Enhance grouping logic with worker signal management and improve annotation editor updates

src/js/science_plugins.js

@@ -161,11 +161,13 @@ function Science_plugins() {
       })
     )
   );
+  this.workerSignal = new Set();
   this.GroupingWorker.onmessage = this.groupingWorkerOnMessage.bind(this);
 }
 
 Science_plugins.prototype.updateSliceRegion = async function (img_id = _via_image_id, update = true) {
   let groupBy = [];
+  this.workerSignal.add(img_id);
   for (let i = 0; i < _via_img_metadata[img_id].regions.length; ++i) {
     if (
       _via_img_metadata[img_id].regions[i].region_attributes.Type ===
@@ -175,11 +177,13 @@ Science_plugins.prototype.updateSliceRegion = async function (img_id = _via_imag
     }
   }
   if (groupBy.length === 0) {
+    this.workerSignal.delete(img_id);
     console.warn("No slice regions found");
     return false;
   }
-  let hash = _via_img_metadata[img_id].computeHash(groupBy);
+  let hash = _via_img_metadata[img_id].computeHash();
   if (hash === _via_img_metadata[img_id].getHash() && !_via_img_metadata[img_id].isGroupEmpty()) {
+    this.workerSignal.delete(img_id);
     console.debug("No change in regions or groups not empty");
     return false;
   }
@@ -209,6 +213,33 @@ Science_plugins.prototype.groupingWorkerOnMessage = async function (e) {
   if (e.data.update) {
     sidebar.annotation_editor_update_content();
   }
+  this.workerSignal.delete(img_id);
+};
+
+Science_plugins.prototype.getGroupingProgress = function (imageId, timeout = 5000) {
+  return new Promise((resolve) => {
+    const startTime = Date.now();
+    
+    const checkProgress = () => {
+       // If no longer processing, resolve success
+       if (!this.workerSignal.has(imageId)) {
+        resolve(true);
+        return;
+      }
+      
+      // If timeout reached, resolve false
+      if (Date.now() - startTime > timeout) {
+        resolve(false);
+        return;
+      }
+      
+      // Check again after small delay
+      setTimeout(checkProgress, 100);
+    };
+
+    // Start checking
+    checkProgress();
+  });
 };
 
 // Grouping modify name to group

src/js/sidebar.js

@@ -692,9 +692,11 @@ class Sidebar {
   annotation_editor_update_content() {
     try {
       if (this.ae !== undefined) {
+        this.ae.addClass("d-none");
         this.ae.empty();
         this.annotation_editor_update_header_html();
         this.annotation_editor_update_metadata_html();
+        this.ae.removeClass("d-none"); // show the annotation editor
         drawing.updateCheckedLockHtml();
       }
     } catch (err) {
@@ -880,7 +882,7 @@ class Sidebar {
     }
   }
 
-  annotation_editor_update_metadata_html() {
+  async annotation_editor_update_metadata_html() {
     if (!_via_img_count) {
       return;
     }
@@ -905,6 +907,8 @@ class Sidebar {
               );
             } else {
               if (_via_img_metadata[_via_image_id].isGroupable()) {
+                plugin.updateSliceRegion(_via_image_id);
+                await plugin.getGroupingProgress(_via_image_id);
                 let tmp = [];
                 let colspan = 4;
                 let done_ids = [];