Remove segment from list and add undo/redo for segments

CHANGELOG.unreleased.md

@@ -12,6 +12,8 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 
 ### Added
 - Added rendering precomputed meshes with level of detail depending on the zoom of the 3D viewport. This feature only works with version 3 mesh files. [#6909](https://github.com/scalableminds/webknossos/pull/6909)
+- Segments can now be removed from the segment list via the context menu. [#6944](https://github.com/scalableminds/webknossos/pull/6944)
+- Editing the meta data of segments (e.g., the name) is now undoable. [#6944](https://github.com/scalableminds/webknossos/pull/6944)
 
 ### Changed
 - Moved the view mode selection in the toolbar next to the position field. [#6949](https://github.com/scalableminds/webknossos/pull/6949)

frontend/javascripts/components/color_picker.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { Popover } from "antd";
 import * as Utils from "libs/utils";
 import { HexColorInput, HexColorPicker } from "react-colorful";
@@ -47,19 +47,26 @@ export function ChangeColorMenuItemContent({
 }: {
   title: string;
   isDisabled: boolean;
-  onSetColor: (rgb: Vector3) => void;
+  onSetColor: (rgb: Vector3, createsNewUndoState: boolean) => void;
   rgb: Vector3;
   hidePickerIcon?: boolean;
 }) {
+  const isFirstColorChange = useRef(true);
   const color = Utils.rgbToHex(Utils.map3((value) => value * 255, rgb));
   const onChangeColor = (colorStr: string) => {
     if (isDisabled) {
       return;
     }
     const colorRgb = Utils.hexToRgb(colorStr);
     const newColor = Utils.map3((component) => component / 255, colorRgb);
-    onSetColor(newColor);
+
+    // Only create a new undo state on the first color change event.
+    // All following color change events should mutate the most recent undo
+    // state so that the undo stack is not filled on each mouse movement.
+    onSetColor(newColor, isFirstColorChange.current);
+    isFirstColorChange.current = false;
   };
+
   const content = isDisabled ? null : (
     <ThrottledColorPicker color={color} onChange={onChangeColor} />
   );

frontend/javascripts/oxalis/api/api_latest.ts

@@ -2066,6 +2066,8 @@ class DataApi {
           color: rgbColor,
         },
         effectiveLayerName,
+        undefined,
+        true,
       ),
     );
   }

frontend/javascripts/oxalis/model/actions/volumetracing_actions.ts

@@ -170,13 +170,15 @@ export const updateSegmentAction = (
   segment: Partial<Segment>,
   layerName: string,
   timestamp: number = Date.now(),
+  createsNewUndoState: boolean = false,
 ) =>
   ({
     type: "UPDATE_SEGMENT",
     segmentId,
     segment,
     layerName,
     timestamp,
+    createsNewUndoState,
   } as const);
 
 export const removeSegmentAction = (

frontend/javascripts/oxalis/model/sagas/isosurface_saga.ts

@@ -818,7 +818,7 @@ function* loadPrecomputedMeshForSegmentId(
  */
 function* downloadIsosurfaceCellById(cellName: string, segmentId: number): Saga<void> {
   const sceneController = getSceneController();
-  const geometry = sceneController.getIsosurfaceGeometry(segmentId);
+  const geometry = sceneController.getIsosurfaceGeometryInBestLOD(segmentId);
 
   if (geometry == null) {
     const errorMessage = messages["tracing.not_isosurface_available_to_download"];

frontend/javascripts/oxalis/model/sagas/undo_saga.ts

@@ -379,21 +379,23 @@ export function* manageUndoStates(): Saga<never> {
 
         previousAction = userBoundingBoxAction;
       } else if (updateSegment || removeSegment) {
-        // Updates to the segment list shouldn't necessarily create new undo states. In the following
-        // cases, no new undo state should be added:
-        // - the segment list was updated by annotating (then, that action will have caused a new undo state
-        //   anyway)
-        // - the segment list was updated by selecting/hovering a cell (in that case, no new undo state
-        //   should be created, either).
-        // Renaming or removing a segment, on the other hand, should create an undo state.
+        // Updates to the segment list shouldn't necessarily create new undo states. In particular,
+        // no new undo state is created when the updateSegment action is a byproduct of another
+        // UI action (mainly by annotating with volume tools). Also, if a segment's anchor position is
+        // updated automatically (e.g., by clicking), this should also not add another undo state.
+        // On the other hand, a new undo state should be created when the user explicitly caused a
+        // change to a segment. For example:
+        // - by selecting/hovering a cell so that a new entry gets added to the list
+        // - renaming or removing a segment
+        // - changing the color of a segment
         const action = updateSegment || removeSegment;
         if (!action) {
           throw new Error("Unexpected action");
         }
-        shouldClearRedoState = true;
-        const addToUndo =
-          removeSegment != null || (updateSegment && "name" in updateSegment.segment);
-        if (addToUndo) {
+
+        const createNewUndoState = removeSegment != null || updateSegment?.createsNewUndoState;
+        if (createNewUndoState) {
+          shouldClearRedoState = true;
           const activeVolumeTracing = yield* select((state) =>
             getVolumeTracingByLayerName(state.tracing, action.layerName),
           );

frontend/javascripts/oxalis/model/sagas/volumetracing_saga.tsx

@@ -43,6 +43,7 @@ import {
   getMaximumBrushSize,
   getRenderableResolutionForSegmentationTracing,
   getRequestedOrVisibleSegmentationLayer,
+  getSegmentsForLayer,
   isVolumeAnnotationDisallowedForZoom,
 } from "oxalis/model/accessors/volumetracing_accessor";
 import type { Action } from "oxalis/model/actions/actions";
@@ -661,13 +662,19 @@ function* ensureSegmentExists(
       return;
     }
 
+    const doesSegmentExist = yield* select((state) =>
+      getSegmentsForLayer(state, layerName).has(segmentId),
+    );
+
     yield* put(
       updateSegmentAction(
         segmentId,
         {
           somePosition,
         },
         layerName,
+        undefined,
+        !doesSegmentExist,
       ),
     );
   }

frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segment_list_item.tsx

@@ -154,7 +154,12 @@ type Props = {
   handleSegmentDropdownMenuVisibility: (arg0: number, arg1: boolean) => void;
   activeDropdownSegmentId: number | null | undefined;
   allowUpdate: boolean;
-  updateSegment: (arg0: number, arg1: Partial<Segment>, arg2: string) => void;
+  updateSegment: (
+    arg0: number,
+    arg1: Partial<Segment>,
+    arg2: string,
+    createsNewUndoState: boolean,
+  ) => void;
   removeSegment: (arg0: number, arg2: string) => void;
   onSelectSegment: (arg0: Segment) => void;
   visibleSegmentationLayer: APISegmentationLayer | null | undefined;
@@ -363,20 +368,20 @@ function _SegmentListItem({
         andCloseContextMenu,
       ),
       getMakeSegmentActiveMenuItem(segment, setActiveCell, activeCellId, andCloseContextMenu),
-      /*
-       * Disable the change-color menu if the segment was mapped to another segment, because
-       * changing the color wouldn't do anything as long as the mapping is still active.
-       * This is because the id (A) is mapped to another one (B). So, the user would need
-       * to change the color of B to see the effect for A.
-       */
       {
         key: "changeSegmentColor",
+        /*
+         * Disable the change-color menu if the segment was mapped to another segment, because
+         * changing the color wouldn't do anything as long as the mapping is still active.
+         * This is because the id (A) is mapped to another one (B). So, the user would need
+         * to change the color of B to see the effect for A.
+         */
         disabled: isEditingDisabled || segment.id !== mappedId,
         label: (
           <ChangeColorMenuItemContent
             isDisabled={isEditingDisabled}
             title="Change Segment Color"
-            onSetColor={(color) => {
+            onSetColor={(color, createsNewUndoState) => {
               if (visibleSegmentationLayer == null) {
                 return;
               }
@@ -386,6 +391,7 @@ function _SegmentListItem({
                   color,
                 },
                 visibleSegmentationLayer.name,
+                createsNewUndoState,
               );
             }}
             rgb={Utils.take3(segmentColorRGBA)}
@@ -406,6 +412,7 @@ function _SegmentListItem({
               color: null,
             },
             visibleSegmentationLayer.name,
+            true,
           );
         },
         label: "Reset Segment Color",
@@ -487,6 +494,7 @@ function _SegmentListItem({
                       name,
                     },
                     visibleSegmentationLayer.name,
+                    true,
                   );
                 }
               }}

frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segments_view.tsx

@@ -159,8 +159,15 @@ const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
     dispatch(setPositionAction(position));
   },
 
-  updateSegment(segmentId: number, segmentShape: Partial<Segment>, layerName: string) {
-    dispatch(updateSegmentAction(segmentId, segmentShape, layerName));
+  updateSegment(
+    segmentId: number,
+    segmentShape: Partial<Segment>,
+    layerName: string,
+    createsNewUndoState: boolean,
+  ) {
+    dispatch(
+      updateSegmentAction(segmentId, segmentShape, layerName, undefined, createsNewUndoState),
+    );
   },
 
   removeSegment(segmentId: number, layerName: string) {