fix(datasource/graphene) multicut tool was not updating 2d visualizat…

…ion for previously unloaded chunks (as new equivalences were loaded)

src/datasource/graphene/frontend.ts

@@ -204,6 +204,7 @@ import {
   CancellationToken,
   CancellationTokenSource,
 } from "#src/util/cancellation";
+import { debounce } from "lodash";
 
 function vec4FromVec3(vec: vec3, alpha = 0) {
   const res = vec4.clone([...vec]);
@@ -2676,39 +2677,32 @@ class MulticutSegmentsTool extends LayerTool<SegmentationUserLayer> {
       displayState.baseSegmentHighlighting.value = priorBaseSegmentHighlighting;
       displayState.highlightColor.value = priorHighlightColor;
     });
-
     const resetMulticutDisplay = () => {
       resetTemporaryVisibleSegmentsState(segmentationGroupState);
       displayState.useTempSegmentStatedColors2d.value = false;
       displayState.tempSegmentStatedColors2d.value.clear(); // TODO, should only clear those that are in temp sets
       displayState.tempSegmentDefaultColor2d.value = undefined;
       displayState.highlightColor.value = undefined;
     };
-
     const updateMulticutDisplay = () => {
       resetMulticutDisplay();
       activeGroupIndicator.classList.toggle(
         "blueGroup",
         multicutState.blueGroup.value,
       );
-
       const focusSegment = multicutState.focusSegment.value;
       if (focusSegment === undefined) return;
-
       displayState.baseSegmentHighlighting.value = true;
       displayState.highlightColor.value = multicutState.blueGroup.value
         ? BLUE_COLOR_HIGHTLIGHT
         : RED_COLOR_HIGHLIGHT;
       segmentsState.useTemporaryVisibleSegments.value = true;
       segmentsState.useTemporarySegmentEquivalences.value = true;
-
-      // add to focus segments and temporary sets
+      // add focus segment and red/blue segments
       segmentsState.temporaryVisibleSegments.add(focusSegment);
-
       for (const segment of multicutState.segments) {
         segmentsState.temporaryVisibleSegments.add(segment);
       }
-
       // all other segments are added to the focus segment equivalences
       for (const equivalence of segmentsState.segmentEquivalences.setElements(
         focusSegment,
@@ -2720,14 +2714,12 @@ class MulticutSegmentsTool extends LayerTool<SegmentationUserLayer> {
           );
         }
       }
-
       // set colors
       displayState.tempSegmentDefaultColor2d.value = MULTICUT_OFF_COLOR;
       displayState.tempSegmentStatedColors2d.value.set(
         focusSegment,
         TRANSPARENT_COLOR_PACKED,
       );
-
       for (const segment of multicutState.redSegments) {
         displayState.tempSegmentStatedColors2d.value.set(
           segment,
@@ -2743,18 +2735,19 @@ class MulticutSegmentsTool extends LayerTool<SegmentationUserLayer> {
 
       displayState.useTempSegmentStatedColors2d.value = true;
     };
-
     updateMulticutDisplay();
-
     activation.registerDisposer(
       multicutState.changed.add(updateMulticutDisplay),
     );
-
+    activation.registerDisposer(
+      segmentationGroupState.segmentEquivalences.changed.add(
+        debounce(() => updateMulticutDisplay(), 0),
+      ),
+    );
     activation.bindAction("swap-group", (event) => {
       event.stopPropagation();
       multicutState.swapGroup();
     });
-
     activation.bindAction("set-anchor", (event) => {
       event.stopPropagation();
       const currentSegmentSelection = maybeGetSelection(
@@ -2788,7 +2781,6 @@ class MulticutSegmentsTool extends LayerTool<SegmentationUserLayer> {
       }
       multicutState.activeGroup.add(currentSegmentSelection);
     });
-
     activation.bindAction("submit", (event) => {
       event.stopPropagation();
       submitAction();