Add multi click split tool for proofreading (#8824)

### URL of deployed dev instance (used for testing):
- https://multisplittool.webknossos.xyz/

### Steps to test:
- Open a dataset with an agglomerate file and create an annotation
- Activate a mapping and the proofreading tool.
- Load a mesh which you want to split for testing purposes.
- try pressing m multiple times. I should toggle the multi cut tool.
Visible via a toggle on the right of the toolbar. Should also be
toggable via manual clicking.
- Turn on the multi cut tool. Start marking super voxels of the loaded
mesh with ctrl +click / shift + ctrl + click to mark 2 paritions.
Confirm the cut by pressing enter. Also try confirm the cut and mesh
paritioning selection via the context menu in the 3d viewport
- Try mesh paritioning selection in teh ortho views via the same
shortcuts or context menu. Should also work.
- Once split, the two new meshes should auto reload and look accurate
according to the previously marked partitions
- That should be it :)

### TODOs:
- [x] Change color partitioning to light & dark gray. Alternatively,
partition one: brighter variant of the mesh color; partition two darker
variant of the mesh color.
- [x] Hitting `enter` upon partition select should do the cut (context
menu interaction is not needed)
- [x] Enable segment selection in ortho viewports
- [x] Shortcut to enter / leave multi cut tool when proofreading is
active (e.g. `m` / `c`)
- [x] Shortcut to perform cut via `enter` and cancel selection via
`Escape`

### Issues:
- fixes #8690

------
(Please delete unneeded items, merge only when none are left open)
- [x] Added changelog entry (create a `$PR_NUMBER.md` file in
`unreleased_changes` or use `./tools/create-changelog-entry.py`)
- [x] Updated [documentation](../blob/master/docs) if applicable

---------

Co-authored-by: Florian M <fm3@users.noreply.github.com>

Author: MichaelBuessemeyer

docs/ui/keyboard_shortcuts.md

@@ -2225,8 +2225,8 @@ export async function getEdgesForAgglomerateMinCut(
   tracingStoreUrl: string,
   tracingId: string,
   segmentsInfo: {
-    segmentId1: NumberLike;
-    segmentId2: NumberLike;
+    partition1: NumberLike[];
+    partition2: NumberLike[];
     mag: Vector3;
     agglomerateId: NumberLike;
     editableMappingId: string;
@@ -2240,8 +2240,8 @@ export async function getEdgesForAgglomerateMinCut(
           data: {
             ...segmentsInfo,
             // TODO: Proper 64 bit support (#6921)
-            segmentId1: Number(segmentsInfo.segmentId1),
-            segmentId2: Number(segmentsInfo.segmentId2),
+            partition1: segmentsInfo.partition1.map(Number),
+            partition2: segmentsInfo.partition2.map(Number),
             agglomerateId: Number(segmentsInfo.agglomerateId),
           },
         },

frontend/javascripts/admin/rest_api.ts

@@ -311,6 +311,12 @@ instead. Only enable this option if you understand its effect. All layers will n
     "The annotation was successfully unlocked. Reloading this annotation ...",
   "annotation.lock.success":
     "The annotation was successfully locked. Reloading this annotation ...",
+  "proofreading.multi_cut.different_agglomerate_selected": `The selected segment belongs to a different agglomerate than the one that is currently partitioned via selections. If you want to split this other agglomerate please clear your current selection with "ESC" first.`,
+  "proofreading.multi_cut.empty_partition":
+    "Not every partition has at least one selected segment. Select at least one segment for each partition before performing a cut action.",
+  "proofreading.multi_cut.no_valid_agglomerate":
+    "No agglomerate for the selected segments could be found. Please retry with a new selection.",
+  "proofreading.multi_cut.split_failed": "Could not determine a valid split. Operation failed.",
   "task.bulk_create_invalid":
     "Can not parse task specification. It includes at least one invalid task.",
   "task.recommended_configuration": "The author of this task suggests to use these settings:",

frontend/javascripts/messages.tsx

@@ -21,6 +21,7 @@ import { initializeSceneController } from "viewer/controller/scene_controller";
 import UrlManager from "viewer/controller/url_manager";
 import ArbitraryController from "viewer/controller/viewmodes/arbitrary_controller";
 import PlaneController from "viewer/controller/viewmodes/plane_controller";
+import { AnnotationTool } from "viewer/model/accessors/tool_accessor";
 import { wkReadyAction } from "viewer/model/actions/actions";
 import { redoAction, saveNowAction, undoAction } from "viewer/model/actions/save_actions";
 import { setViewModeAction, updateLayerSettingAction } from "viewer/model/actions/settings_actions";
@@ -232,8 +233,14 @@ class Controller extends React.PureComponent<PropsWithRouter, State> {
         "shift + 3": () => Store.dispatch(setViewModeAction(constants.MODE_ARBITRARY_PLANE)),
         m: () => {
           // rotate allowed modes
-          const currentViewMode = Store.getState().temporaryConfiguration.viewMode;
-          const { allowedModes } = Store.getState().annotation.restrictions;
+          const state = Store.getState();
+          const isProofreadingActive = state.uiInformation.activeTool === AnnotationTool.PROOFREAD;
+          const currentViewMode = state.temporaryConfiguration.viewMode;
+          if (isProofreadingActive && currentViewMode === constants.MODE_PLANE_TRACING) {
+            // Skipping cycling view mode as m in proofreading is used to toggle multi cut tool.
+            return;
+          }
+          const { allowedModes } = state.annotation.restrictions;
           const index = (allowedModes.indexOf(currentViewMode) + 1) % allowedModes.length;
           Store.dispatch(setViewModeAction(allowedModes[index]));
         },

frontend/javascripts/viewer/controller.tsx

@@ -44,6 +44,7 @@ import {
   minCutAgglomerateWithPositionAction,
   proofreadAtPosition,
   proofreadMergeAction,
+  toggleSegmentInPartitionAction,
 } from "viewer/model/actions/proofread_actions";
 import {
   hideMeasurementTooltipAction,
@@ -1080,6 +1081,19 @@ export class ProofreadToolController {
 
     const state = Store.getState();
     const globalPosition = calculateGlobalPos(state, pos).rounded;
+    const isMultiSplitActive = state.userConfiguration.isMultiSplitActive;
+    const ctrlOrMetaKey = event.ctrlKey || event.metaKey;
+    if (isMultiSplitActive && ctrlOrMetaKey) {
+      const unmappedSegmentId = VolumeHandlers.getUnmappedSegmentIdForPosition(globalPosition);
+      const mappedSegmentId = VolumeHandlers.getSegmentIdForPosition(globalPosition);
+      if (unmappedSegmentId === 0 || mappedSegmentId === 0) {
+        // No valid ids were found, ignore action.
+        return;
+      }
+      const partition = event.shiftKey ? 2 : 1;
+      Store.dispatch(toggleSegmentInPartitionAction(unmappedSegmentId, partition, mappedSegmentId));
+      return;
+    }
 
     if (event.shiftKey) {
       Store.dispatch(proofreadMergeAction(globalPosition));
@@ -1095,30 +1109,42 @@ export class ProofreadToolController {
 
   static getActionDescriptors(
     _activeTool: AnnotationTool,
-    _userConfiguration: UserConfiguration,
+    userConfiguration: UserConfiguration,
     shiftKey: boolean,
     ctrlOrMetaKey: boolean,
     _altKey: boolean,
     isTDViewportActive: boolean,
   ): ActionDescriptor {
+    const { isMultiSplitActive } = userConfiguration;
+
+    // --- Multi-split additions -----------------------------------------------
+    const multiSplitOverwrites: Partial<ActionDescriptor> = {};
+    if (isMultiSplitActive) {
+      if (shiftKey && ctrlOrMetaKey) {
+        multiSplitOverwrites.leftClick = "Add to Partition 2";
+      } else if (ctrlOrMetaKey) {
+        multiSplitOverwrites.leftClick = "Add to Partition 1";
+      }
+    }
+
+    // --- TD-viewport viewport -----------------------------------------------------
     if (isTDViewportActive) {
-      let maybeLeftClick = {};
+      let maybeLeftClick: Partial<ActionDescriptor> = {};
       if (shiftKey) {
-        maybeLeftClick = {
-          leftClick: "Jump to point",
-        };
+        maybeLeftClick.leftClick = "Jump to point";
       } else if (ctrlOrMetaKey) {
-        maybeLeftClick = {
-          leftClick: "Activate super-voxel",
-        };
+        maybeLeftClick.leftClick = "Activate super-voxel";
       }
 
       return {
         ...maybeLeftClick,
+        ...multiSplitOverwrites,
         leftDrag: "Move",
         rightClick: "Context Menu",
       };
     }
+
+    // --- Default ortho viewports -------------------------------------------
     let leftClick = "Select Segment to Proofread";
     if (shiftKey) {
       leftClick = "Merge with active Segment";
@@ -1128,6 +1154,7 @@ export class ProofreadToolController {
 
     return {
       leftClick,
+      ...multiSplitOverwrites,
       rightClick: "Context Menu",
     };
   }

frontend/javascripts/viewer/controller/combinations/tool_controls.ts

@@ -47,36 +47,49 @@ export function handlePickCell(pos: Point2) {
     storeState.flycam.additionalCoordinates || [],
   );
 }
-export const getSegmentIdForPosition = memoizeOne(
-  (globalPos: Vector3) => {
-    // This function will return the currently loaded segment ID for a given position.
-    // If the corresponding bucket is not loaded at the moment, the return value will be 0.
-    // See getSegmentIdForPositionAsync if the bucket loading should be awaited before returning the ID.
-    const layer = Model.getVisibleSegmentationLayer();
-    const { additionalCoordinates } = Store.getState().flycam;
 
-    if (!layer) {
-      return 0;
-    }
-    const posInLayerSpace = globalToLayerTransformedPosition(
-      globalPos,
-      layer.name,
-      "segmentation",
-      Store.getState(),
-    );
+const _getSegmentIdForPosition = (mapped: boolean) => (globalPos: Vector3) => {
+  // This function will return the currently loaded segment ID for a given position.
+  // If the corresponding bucket is not loaded at the moment, the return value will be 0.
+  // See getSegmentIdForPositionAsync if the bucket loading should be awaited before returning the ID.
+  const layer = Model.getVisibleSegmentationLayer();
+  const { additionalCoordinates } = Store.getState().flycam;
 
-    const segmentationCube = layer.cube;
-    const segmentationLayerName = layer.name;
-    const renderedZoomStepForCameraPosition = api.data.getRenderedZoomStepAtPosition(
-      segmentationLayerName,
-      posInLayerSpace,
-    );
-    return segmentationCube.getMappedDataValue(
-      posInLayerSpace,
-      additionalCoordinates,
-      renderedZoomStepForCameraPosition,
-    );
-  },
+  if (!layer) {
+    return 0;
+  }
+  const posInLayerSpace = globalToLayerTransformedPosition(
+    globalPos,
+    layer.name,
+    "segmentation",
+    Store.getState(),
+  );
+
+  const segmentationCube = layer.cube;
+  const segmentationLayerName = layer.name;
+  const renderedZoomStepForCameraPosition = api.data.getRenderedZoomStepAtPosition(
+    segmentationLayerName,
+    posInLayerSpace,
+  );
+
+  return mapped
+    ? segmentationCube.getMappedDataValue(
+        posInLayerSpace,
+        additionalCoordinates,
+        renderedZoomStepForCameraPosition,
+      )
+    : segmentationCube.getDataValue(
+        posInLayerSpace,
+        additionalCoordinates,
+        null,
+        renderedZoomStepForCameraPosition,
+      );
+};
+export const getSegmentIdForPosition = memoizeOne(_getSegmentIdForPosition(true), ([a], [b]) =>
+  V3.isEqual(a, b),
+);
+export const getUnmappedSegmentIdForPosition = memoizeOne(
+  _getSegmentIdForPosition(false),
   ([a], [b]) => V3.isEqual(a, b),
 );
 export async function getSegmentIdForPositionAsync(globalPos: Vector3) {