added latest user feedback and provided a link to live demo

Author: Lauenburg

README.md

@@ -1,5 +1,10 @@
 # SynAnno
 
+## Live Demo
+A demo is available [here](http://16.170.214.77/)
+
+## Table of Contents
+
 SynAnno is a tool designed for proofreading and correcting synaptic polarity annotation from electron microscopy (EM) volumes - specifically the [H01](https://h01-release.storage.googleapis.com/landing.html) dataset. SynAnno is aimed for integration with CAVE (Connectome Annotation Versioning Engine).
 
 - [Key Components and Subjects](#key-components-and-subjects)

synanno/static/css/style.css

@@ -26,7 +26,7 @@
 
 .unsure,
 .card>.unsure {
-  background: #d7dbdd;
+  background: #f6f699;
 }
 
 .card {

synanno/static/viewer.js

@@ -41,8 +41,8 @@ window.onload = async () => {
             processSwcFile(swcTxt, sectionArrays, activeNeuronSection, activeSynapseIDs);
 
             if (synapsePointCloud) {
-                updateLoadingBar(parseInt(synapsePointCloud.length / 3), activeSynapseIDs);
                 processSynapseCloudData(synapsePointCloud, maxVolumeSize, activeSynapseIDs, initialLoad);
+                updateLoadingBar(parseInt(synapsePointCloud.length / 3), activeSynapseIDs);
             } else {
                 console.error("No synapse cloud path provided.");
             }
@@ -176,7 +176,7 @@ function processSynapseCloudData(data, maxVolumeSize, activeSynapseIDs, initialL
         colors[i * 4 + 3] = 1.0;
 
         if (activeSynapseIDs.length > 0) {
-            sizes[i] = activeSynapseIDs.includes(i) ? maxVolumeSize : 10;
+            sizes[i] = activeSynapseIDs.includes(i) ? maxVolumeSize*maxVolumeSize : 10;
 
             alphas[i]  = window.synapseColors[i] === "green" || window.synapseColors[i] === "red" ? 0.8 : 0.4;
             alphas[i] = activeSynapseIDs.includes(i) ? 1.0 : 0.4;
@@ -613,16 +613,17 @@ function createMetadataElement(metadata, colors, activeNeuronSection) {
 }
 
 
-function updateLoadingBar(synapse_count, activeSynapseIDs) {
-    if (!Array.isArray(activeSynapseIDs)) {
-        console.error("activeSynapseIDs is not an array!", activeSynapseIDs);
-        activeSynapseIDs = [];
+function updateLoadingBar(synapse_count) {
+    if (!window.synapseColors || typeof window.synapseColors !== "object") {
+        console.error("synapseColors is not defined or invalid!", window.synapseColors);
+        return;
     }
 
-    if (activeSynapseIDs.length === 0) return;
+    const highlightedSynapseCount = Object.values(window.synapseColors).filter(
+        (color) => color === "green" || color === "red"
+    ).length;
 
-    const lowestDisplayedSectionIdx = Math.min(...activeSynapseIDs);
-    const progressPercent = (lowestDisplayedSectionIdx / synapse_count) * 100;
+    const progressPercent = (highlightedSynapseCount / synapse_count) * 100;
 
     document.getElementById("loading_progress").style.width = `${progressPercent}%`;
 }

synanno/templates/export_annotate.html

@@ -1,8 +1,7 @@
 {% extends "templatebase.html" %} {% block help_content %}
 <p class="text-muted">
   The export annotations view lets you download the JSON file containing
-  instance metadata by clicking `Download JSON`, redraw masks with the `Revise
-  Dataset` workflow by clicking `Redraw Masks`, or start a new process by
+  instance metadata by clicking `Download JSON`, redraw masks with the `Error Correction` workflow by clicking `Error Correction`, or start a new process by
   clicking `Start New Process`.
 </p>
 {% endblock %} {% block content %}
@@ -24,7 +23,7 @@ <h2 class="mb-1">You finalized the proofreading of your data!</h2>
     type="button"
     class="btn btn-secondary ml-2"
     href="{{ url_for('manual_annotate.draw')}}"
-    >Redraw Masks</a
+    >Error Correction</a
   >
   <a
     id="resetButton"

synanno/templates/landingpage.html

@@ -27,15 +27,15 @@
 {% block content %}
 <div class="container-fluid vh-100 w-75">
   <div class="pt-5 text-center">
-    <h2 class="mb-2">Welcome to SynAnno Annotation Tool</h2>
+    <h2 class="mb-2">Welcome to SynAnno</h2>
     <p>
-      Choose your workflow: annotate a newly acquired dataset or proofread existing annotations.
+      Choose your workflow: Proofread a newly acquired dataset or correct existing masks and markers.
     </p>
   </div>
   <div class="row justify-content-center h-50">
     <div class="col my-auto">
       <div class="card text-center border-primary">
-        <h4 class="card-title">Revise Dataset</h4>
+        <h4 class="card-title">Error Correction</h4>
         <div class="card-body">
           <a class="btn" href="{{ url_for('open_data.open_data_task', task='draw') }}">
             <h2><i class="fa fa-object-group fa-5x" style="color: rgb(80, 80, 80)"></i></h2>
@@ -45,7 +45,7 @@ <h2><i class="fa fa-object-group fa-5x" style="color: rgb(80, 80, 80)"></i></h2>
     </div>
     <div class="col my-auto">
       <div class="card text-center border-primary">
-        <h4 class="card-title">Proofread Annotations</h4>
+        <h4 class="card-title">Error Detection</h4>
         <div class="card-body">
           <a class="btn" href="{{ url_for('open_data.open_data_task', task='annotate') }}">
             <h2><i class="fa fa-arrows fa-5x" style="color: rgb(80, 80, 80)"></i></h2>