Add delete segment data update action (#7435)

Co-authored-by: Philipp Otto <[email protected]>

Author: frcroth

CHANGELOG.unreleased.md

@@ -11,6 +11,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 [Commits](https://github.com/scalableminds/webknossos/compare/23.12.0...HEAD)
 
 ### Added
+- The data of segments can now be deleted in the segment side panel. [#7435](https://github.com/scalableminds/webknossos/pull/7435)
 - Added support for S3-compliant object storage services (e.g. MinIO) as a storage backend for remote datasets. [#7453](https://github.com/scalableminds/webknossos/pull/7453)
 - Added support for blosc compressed N5 datasets. [#7465](https://github.com/scalableminds/webknossos/pull/7465)
 - Added route for triggering the compute segment index worker job. [#7471](https://github.com/scalableminds/webknossos/pull/7471)

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

@@ -39,6 +39,7 @@ export type SetLargestSegmentIdAction = ReturnType<typeof setLargestSegmentIdAct
 export type SetSegmentsAction = ReturnType<typeof setSegmentsAction>;
 export type UpdateSegmentAction = ReturnType<typeof updateSegmentAction>;
 export type RemoveSegmentAction = ReturnType<typeof removeSegmentAction>;
+export type DeleteSegmentDataAction = ReturnType<typeof deleteSegmentDataAction>;
 export type SetSegmentGroupsAction = ReturnType<typeof setSegmentGroupsAction>;
 export type SetMappingIsEditableAction = ReturnType<typeof setMappingIsEditableAction>;
 
@@ -80,6 +81,7 @@ export type VolumeTracingAction =
   | SetSegmentsAction
   | UpdateSegmentAction
   | RemoveSegmentAction
+  | DeleteSegmentDataAction
   | SetSegmentGroupsAction
   | AddBucketToUndoAction
   | ImportVolumeTracingAction
@@ -232,6 +234,20 @@ export const removeSegmentAction = (
     timestamp,
   } as const);
 
+export const deleteSegmentDataAction = (
+  segmentId: number,
+  layerName: string,
+  callback?: () => void,
+  timestamp: number = Date.now(),
+) =>
+  ({
+    type: "DELETE_SEGMENT_DATA",
+    segmentId,
+    layerName,
+    callback,
+    timestamp,
+  } as const);
+
 export const setSegmentGroupsAction = (
   segmentGroups: Array<SegmentGroup>,
   layerName: string,

frontend/javascripts/oxalis/model/bucket_data_handling/bucket.ts

@@ -543,6 +543,8 @@ export class DataBucket {
         }
       }
     }
+
+    this.invalidateValueSet();
   }
 
   markAsPulled(): void {

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

@@ -32,6 +32,7 @@ type UpdateVolumeTracingUpdateAction = ReturnType<typeof updateVolumeTracing>;
 export type CreateSegmentUpdateAction = ReturnType<typeof createSegmentVolumeAction>;
 export type UpdateSegmentUpdateAction = ReturnType<typeof updateSegmentVolumeAction>;
 export type DeleteSegmentUpdateAction = ReturnType<typeof deleteSegmentVolumeAction>;
+export type DeleteSegmentDataUpdateAction = ReturnType<typeof deleteSegmentDataVolumeAction>;
 type UpdateUserBoundingBoxesUpdateAction = ReturnType<typeof updateUserBoundingBoxes>;
 export type UpdateBucketUpdateAction = ReturnType<typeof updateBucket>;
 type UpdateSegmentGroupsUpdateAction = ReturnType<typeof updateSegmentGroups>;
@@ -63,6 +64,7 @@ export type UpdateAction =
   | CreateSegmentUpdateAction
   | UpdateSegmentUpdateAction
   | DeleteSegmentUpdateAction
+  | DeleteSegmentDataUpdateAction
   | UpdateBucketUpdateAction
   | UpdateTreeVisibilityUpdateAction
   | UpdateTreeEdgesVisibilityUpdateAction
@@ -346,6 +348,14 @@ export function deleteSegmentVolumeAction(id: number) {
     },
   } as const;
 }
+export function deleteSegmentDataVolumeAction(id: number) {
+  return {
+    name: "deleteSegmentData",
+    value: {
+      id,
+    },
+  } as const;
+}
 export function updateBucket(bucketInfo: SendBucketInfo, base64Data: string) {
   return {
     name: "updateBucket",

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

@@ -65,6 +65,7 @@ import type {
   ClickSegmentAction,
   SetActiveCellAction,
   CreateCellAction,
+  DeleteSegmentDataAction,
 } from "oxalis/model/actions/volumetracing_actions";
 import {
   finishAnnotationStrokeAction,
@@ -79,7 +80,11 @@ import { select, take } from "oxalis/model/sagas/effect-generators";
 import listenToMinCut from "oxalis/model/sagas/min_cut_saga";
 import listenToQuickSelect from "oxalis/model/sagas/quick_select_saga";
 import { takeEveryUnlessBusy } from "oxalis/model/sagas/saga_helpers";
-import { UpdateAction, updateSegmentGroups } from "oxalis/model/sagas/update_actions";
+import {
+  deleteSegmentDataVolumeAction,
+  UpdateAction,
+  updateSegmentGroups,
+} from "oxalis/model/sagas/update_actions";
 import {
   createSegmentVolumeAction,
   deleteSegmentVolumeAction,
@@ -90,7 +95,7 @@ import {
   updateMappingName,
 } from "oxalis/model/sagas/update_actions";
 import VolumeLayer from "oxalis/model/volumetracing/volumelayer";
-import { Model } from "oxalis/singletons";
+import { Model, api } from "oxalis/singletons";
 import type { Flycam, SegmentMap, VolumeTracing } from "oxalis/store";
 import React from "react";
 import { actionChannel, call, fork, put, takeEvery, takeLatest } from "typed-redux-saga";
@@ -101,6 +106,7 @@ import {
 } from "./volume/helpers";
 import maybeInterpolateSegmentationLayer from "./volume/volume_interpolation_saga";
 import messages from "messages";
+import { pushSaveQueueTransaction } from "../actions/save_actions";
 
 export function* watchVolumeTracingAsync(): Saga<void> {
   yield* take("WK_READY");
@@ -842,8 +848,35 @@ function* ensureValidBrushSize(): Saga<void> {
   );
 }
 
+function* handleDeleteSegmentData(): Saga<void> {
+  yield* take("WK_READY");
+  while (true) {
+    const action = (yield* take("DELETE_SEGMENT_DATA")) as DeleteSegmentDataAction;
+
+    yield* put(setBusyBlockingInfoAction(true, "Segment is being deleted."));
+    yield* put(
+      pushSaveQueueTransaction(
+        [deleteSegmentDataVolumeAction(action.segmentId)],
+        "volume",
+        action.layerName,
+      ),
+    );
+    yield* call([Model, Model.ensureSavedState]);
+
+    yield* call([api.data, api.data.reloadBuckets], action.layerName, (bucket) =>
+      bucket.containsValue(action.segmentId),
+    );
+
+    yield* put(setBusyBlockingInfoAction(false));
+    if (action.callback) {
+      action.callback();
+    }
+  }
+}
+
 export default [
   editVolumeLayerAsync,
+  handleDeleteSegmentData,
   ensureToolIsAllowedInResolution,
   floodFill,
   watchVolumeTracingAsync,

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

@@ -5,7 +5,7 @@ import {
   VerticalAlignBottomOutlined,
   EllipsisOutlined,
 } from "@ant-design/icons";
-import { List, Tooltip, Dropdown, MenuProps } from "antd";
+import { List, Tooltip, Dropdown, MenuProps, Modal } from "antd";
 import { useDispatch, useSelector } from "react-redux";
 import Checkbox, { CheckboxChangeEvent } from "antd/lib/checkbox/Checkbox";
 import React from "react";
@@ -21,7 +21,13 @@ import {
   refreshMeshAction,
 } from "oxalis/model/actions/annotation_actions";
 import EditableTextLabel from "oxalis/view/components/editable_text_label";
-import type { ActiveMappingInfo, MeshInformation, OxalisState, Segment } from "oxalis/store";
+import type {
+  ActiveMappingInfo,
+  MeshInformation,
+  OxalisState,
+  Segment,
+  VolumeTracing,
+} from "oxalis/store";
 import Store from "oxalis/store";
 import { getSegmentColorAsHSLA } from "oxalis/model/accessors/volumetracing_accessor";
 import Toast from "libs/toast";
@@ -33,6 +39,8 @@ import { withMappingActivationConfirmation } from "./segments_view_helper";
 import { type AdditionalCoordinate } from "types/api_flow_types";
 import { getAdditionalCoordinatesAsString } from "oxalis/model/accessors/flycam_accessor";
 
+const ALSO_DELETE_SEGMENT_FROM_LIST_KEY = "also-delete-segment-from-list";
+
 function ColoredDotIconForSegment({ segmentColorHSLA }: { segmentColorHSLA: Vector4 }) {
   const hslaCss = hslaToCSS(segmentColorHSLA);
 
@@ -192,6 +200,7 @@ type Props = {
     createsNewUndoState: boolean,
   ) => void;
   removeSegment: (arg0: number, arg2: string) => void;
+  deleteSegmentData: (arg0: number, arg2: string, callback?: () => void) => void;
   onSelectSegment: (arg0: Segment) => void;
   visibleSegmentationLayer: APISegmentationLayer | null | undefined;
   loadAdHocMesh: (
@@ -219,6 +228,7 @@ type Props = {
   onRenameStart: () => void;
   onRenameEnd: () => void;
   multiSelectMenu: MenuProps;
+  activeVolumeTracing: VolumeTracing | null | undefined;
 };
 
 function _MeshInfoItem(props: {
@@ -381,6 +391,7 @@ function _SegmentListItem({
   allowUpdate,
   updateSegment,
   removeSegment,
+  deleteSegmentData,
   onSelectSegment,
   visibleSegmentationLayer,
   loadAdHocMesh,
@@ -393,6 +404,7 @@ function _SegmentListItem({
   onRenameStart,
   onRenameEnd,
   multiSelectMenu,
+  activeVolumeTracing,
 }: Props) {
   const isEditingDisabled = !allowUpdate;
 
@@ -497,6 +509,52 @@ function _SegmentListItem({
         },
         label: "Remove Segment From List",
       },
+      {
+        key: "deleteSegmentData",
+        onClick: () => {
+          if (visibleSegmentationLayer == null) {
+            return;
+          }
+
+          Modal.confirm({
+            content: `Are you sure you want to delete the data of segment ${getSegmentName(
+              segment,
+              true,
+            )}? This operation will set all voxels with id ${segment.id} to 0.`,
+            okText: "Yes, delete",
+            okType: "danger",
+            onOk: async () => {
+              await new Promise<void>((resolve) =>
+                deleteSegmentData(segment.id, visibleSegmentationLayer.name, resolve),
+              );
+
+              Toast.info(
+                <span>
+                  The data of segment {getSegmentName(segment, true)} was deleted.{" "}
+                  <a
+                    href="#"
+                    onClick={() => {
+                      removeSegment(segment.id, visibleSegmentationLayer.name);
+                      Toast.close(ALSO_DELETE_SEGMENT_FROM_LIST_KEY);
+                    }}
+                  >
+                    Also remove from list.
+                  </a>
+                </span>,
+                { key: ALSO_DELETE_SEGMENT_FROM_LIST_KEY },
+              );
+            },
+          });
+
+          andCloseContextMenu();
+        },
+        disabled:
+          activeVolumeTracing == null ||
+          !activeVolumeTracing.hasSegmentIndex ||
+          // Not supported for fallback layers, yet.
+          activeVolumeTracing.fallbackLayer != null,
+        label: "Delete Segment's Data",
+      },
     ],
   });
 
@@ -551,7 +609,7 @@ function _SegmentListItem({
         <div style={{ display: "inline-flex", alignItems: "center" }}>
           <ColoredDotIconForSegment segmentColorHSLA={segmentColorHSLA} />
           <EditableTextLabel
-            value={segment.name || `Segment ${segment.id}`}
+            value={getSegmentName(segment)}
             label="Segment Name"
             onClick={() => onSelectSegment(segment)}
             onRenameStart={onRenameStart}
@@ -681,4 +739,9 @@ function getComputeMeshAdHocTooltipInfo(
   };
 }
 
+function getSegmentName(segment: Segment, fallbackToId: boolean = false): string {
+  const fallback = fallbackToId ? `${segment.id}` : `Segment ${segment.id}`;
+  return segment.name || fallback;
+}
+
 export default SegmentListItem;

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

@@ -76,6 +76,7 @@ import { updateTemporarySettingAction } from "oxalis/model/actions/settings_acti
 import {
   batchUpdateGroupsAndSegmentsAction,
   removeSegmentAction,
+  deleteSegmentDataAction,
   setActiveCellAction,
   updateSegmentAction,
 } from "oxalis/model/actions/volumetracing_actions";
@@ -281,6 +282,10 @@ const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
   removeSegment(segmentId: number, layerName: string) {
     dispatch(removeSegmentAction(segmentId, layerName));
   },
+
+  deleteSegmentData(segmentId: number, layerName: string, callback?: () => void) {
+    dispatch(deleteSegmentDataAction(segmentId, layerName, callback));
+  },
 });
 
 type DispatchProps = ReturnType<typeof mapDispatchToProps>;
@@ -1602,6 +1607,7 @@ class SegmentsView extends React.Component<Props, State> {
                     allowUpdate={this.props.allowUpdate}
                     updateSegment={this.props.updateSegment}
                     removeSegment={this.props.removeSegment}
+                    deleteSegmentData={this.props.deleteSegmentData}
                     visibleSegmentationLayer={this.props.visibleSegmentationLayer}
                     loadAdHocMesh={this.props.loadAdHocMesh}
                     loadPrecomputedMesh={this.props.loadPrecomputedMesh}
@@ -1612,6 +1618,7 @@ class SegmentsView extends React.Component<Props, State> {
                     onRenameStart={this.onRenameStart}
                     onRenameEnd={this.onRenameEnd}
                     multiSelectMenu={multiSelectMenu()}
+                    activeVolumeTracing={this.props.activeVolumeTracing}
                   />
                 );
               } else {

frontend/javascripts/oxalis/view/version_entry.tsx

@@ -37,6 +37,7 @@ import type {
   MoveTreeComponentUpdateAction,
   MergeTreeUpdateAction,
   UpdateMappingNameUpdateAction,
+  DeleteSegmentDataUpdateAction,
 } from "oxalis/model/sagas/update_actions";
 import FormattedDate from "components/formatted_date";
 import { MISSING_GROUP_ID } from "oxalis/view/right-border-tabs/tree_hierarchy_view_helpers";
@@ -167,6 +168,10 @@ const descriptionFns: Record<ServerUpdateAction["name"], (...args: any) => Descr
     description: `Deleted the segment with id ${action.value.id} from the segments list.`,
     icon: <DeleteOutlined />,
   }),
+  deleteSegmentData: (action: DeleteSegmentDataUpdateAction): Description => ({
+    description: `Deleted the data of segment ${action.value.id}. All voxels with that id were overwritten with 0.`,
+    icon: <DeleteOutlined />,
+  }),
   addSegmentIndex: (): Description => ({
     description: "Added segment index to enable segment statistics.",
     icon: <EditOutlined />,

frontend/javascripts/test/controller/url_manager.spec.ts

@@ -111,7 +111,7 @@ test("UrlManager should build csv url hash and parse it again", (t) => {
   t.deepEqual(UrlManager.parseUrlHash(), urlState);
 });
 
-test.only("UrlManager should build csv url hash with additional coordinates and parse it again", (t) => {
+test("UrlManager should build csv url hash with additional coordinates and parse it again", (t) => {
   const mode = Constants.MODE_ARBITRARY;
   const urlState = {
     position: [0, 0, 0] as Vector3,

tools/assert-no-test-only.sh

@@ -1,5 +1,7 @@
 #!/bin/bash
+exit_code=0
 echo "Checking for test.only() in test files."
-! grep -r "test\.only(" frontend/javascripts/test || echo "Found test files with test.only() which disables other tests. Please remove the only modifier."
-! grep -r "test\.serial\.only(" frontend/javascripts/test || echo "Found test files with test.only() which disables other tests. Please remove the only modifier."
+! grep -r "test\.only(" frontend/javascripts/test || { echo "Found test files with test.only() which disables other tests. Please remove the only modifier."; exit_code=1; }
+! grep -r "test\.serial\.only(" frontend/javascripts/test || { echo "Found test files with test.only() which disables other tests. Please remove the only modifier."; exit_code=1; }
 echo "Done"
+exit $exit_code