Feat: shortcut for multicut to improve usability

src/neuroglancer/graph/graph_operation_layer_state.ts

@@ -181,6 +181,7 @@ export class GraphOperationLayerState extends RefCounted {
       this.annotationToSupervoxelA.isActive.value = true;
       this.annotationToSupervoxelB.isActive.value = false;
     }
+    this.changed.dispatch();
   }
 
   getReference(id: AnnotationId): AnnotationReference {

src/neuroglancer/segmentation_user_layer_with_graph.ts

@@ -31,7 +31,7 @@ import {StatusMessage} from 'neuroglancer/status';
 import {trackableAlphaValue} from 'neuroglancer/trackable_alpha';
 import {TrackableBoolean} from 'neuroglancer/trackable_boolean';
 import {TrackableValue, WatchableRefCounted, WatchableValue} from 'neuroglancer/trackable_value';
-import {GraphOperationTab, SelectedGraphOperationState} from 'neuroglancer/ui/graph_multicut';
+import {enableSplitPointTool, GraphOperationTab, PlaceGraphOperationMarkerTool, SelectedGraphOperationState} from 'neuroglancer/ui/graph_multicut';
 import {Uint64Set} from 'neuroglancer/uint64_set';
 import {TrackableRGB} from 'neuroglancer/util/color';
 import {Borrowed, RefCounted} from 'neuroglancer/util/disposable';
@@ -321,6 +321,15 @@ function helper<TBase extends BaseConstructor>(Base: TBase) {
           this.reloadManifest();
           break;
         }
+        case 'switch-multicut-group': {
+          if (this.tool.value === undefined ||
+              (!(this.tool.value instanceof PlaceGraphOperationMarkerTool))) {
+            enableSplitPointTool(this, this.graphOperationLayerState.value!);
+          } else {
+            this.graphOperationLayerState.value!.toggleSource();
+          }
+          break;
+        }
         default:
           super.handleAction(action);
           break;

src/neuroglancer/ui/default_input_event_bindings.ts

@@ -83,6 +83,7 @@ export function getDefaultRenderedDataPanelBindings() {
           'keyc': 'two-point-cut',
           'control+keyc': 'cut-selected',
           'control+keys': 'shatter-segment-equivalences',
+          'control+shift+backslash': 'switch-multicut-group',
           'at:control+wheel': {action: 'zoom-via-wheel', preventDefault: true},
           'at:wheel': {action: 'z+1-via-wheel', preventDefault: true},
           'at:shift+wheel': {action: 'z+10-via-wheel', preventDefault: true},

src/neuroglancer/ui/graph_multicut.ts

@@ -278,6 +278,26 @@ function getCenterPosition(annotation: Annotation, transform: mat4) {
   return vec3.transformMat4(center, center, transform);
 }
 
+export function enableSplitPointTool(
+    layer: SegmentationUserLayerWithGraph, graphOperationLayerState: GraphOperationLayerState) {
+  layer.tool.value = new PlaceGraphOperationMarkerTool(
+      layer, {},
+      () => {
+        if (graphOperationLayerState.activeSource === graphOperationLayerState.sourceA) {
+          return 'set graph red split point';
+        } else {
+          return 'set graph blue split point';
+        }
+      },
+      () => {
+        if (graphOperationLayerState.activeSource === graphOperationLayerState.sourceA) {
+          return 'rgb(255,0,0)';
+        } else {
+          return 'rgb(120,120,255)';
+        }
+      });
+}
+
 export class GraphOperationLayerView extends Tab {
   private annotationListContainer = document.createElement('ul');
   private annotationListElements = new Map<string, HTMLElement>();
@@ -319,9 +339,7 @@ export class GraphOperationLayerView extends Tab {
       const pointButton = document.createElement('button');
       pointButton.textContent = getAnnotationTypeHandler(AnnotationType.POINT).icon;
       pointButton.title = 'Set split point';
-      pointButton.addEventListener('click', () => {
-        this.wrapper.tool.value = new PlaceGraphOperationMarkerTool(this.wrapper, {});
-      });
+      pointButton.addEventListener('click', enableSplitPointTool.bind(undefined, this.wrapper, this.annotationLayer));
       toolbox.appendChild(pointButton);
     }
 
@@ -979,8 +997,14 @@ abstract class PlaceGraphOperationTool extends Tool {
 }
 
 export class PlaceGraphOperationMarkerTool extends PlaceGraphOperationTool {
-  constructor(layer: SegmentationUserLayerWithGraph, options: any) {
+  private _getDescription: () => string;
+
+  constructor(
+      layer: SegmentationUserLayerWithGraph, options: any, getDescription: () => string,
+      getDescriptionColor: () => string) {
     super(layer, options);
+    this._getDescription = getDescription;
+    this.getDescriptionColor = getDescriptionColor;
   }
 
   trigger(mouseState: MouseSelectionState) {
@@ -1039,7 +1063,7 @@ export class PlaceGraphOperationMarkerTool extends PlaceGraphOperationTool {
   }
 
   get description() {
-    return `set graph merge/split point`;
+    return this._getDescription();
   }
 
   toJSON() {

src/neuroglancer/ui/tool.ts

@@ -28,6 +28,7 @@ export abstract class Tool extends RefCounted {
   abstract toJSON(): any;
   deactivate(): void {}
   description: string;
+  getDescriptionColor?(): string;
 }
 
 export function restoreTool(layer: UserLayer, obj: any) {

src/neuroglancer/viewer.ts

@@ -762,7 +762,7 @@ export class Viewer extends RefCounted implements ViewerState {
   private registerActionListeners() {
     for (const action
              of ['recolor', 'clear-segments', 'merge-selected', 'cut-selected',
-                 'shatter-segment-equivalences']) {
+                 'shatter-segment-equivalences', 'switch-multicut-group']) {
       this.bindAction(action, () => {
         this.layerManager.invokeAction(action);
       });

src/neuroglancer/widget/annotation_tool_status.ts

@@ -69,7 +69,25 @@ export class AnnotationToolStatusWidget extends RefCounted {
     return tool.description;
   }
 
+  private getDescriptionColor(): string {
+    const defaultColor = '#33cc33';
+    const layer = this.selectedLayer.layer;
+    if (layer === undefined) {
+      return defaultColor;
+    }
+    const userLayer = layer.layer;
+    if (userLayer === null) {
+      return defaultColor;
+    }
+    const tool = userLayer.tool.value;
+    if (tool === undefined || tool.getDescriptionColor === undefined) {
+      return defaultColor;
+    }
+    return tool.getDescriptionColor();
+  }
+
   private updateView() {
     this.element.textContent = this.getDescriptionText() || '';
+    this.element.style.color = this.getDescriptionColor();
   }
 }