Allow to restrict floodfill to a bounding box

CHANGELOG.unreleased.md

@@ -13,6 +13,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 ### Added
 - Added the total volume of a dataset to a tooltip in the dataset info tab. [#8229](https://github.com/scalableminds/webknossos/pull/8229)
 - Optimized performance of data loading with “fill value“ chunks. [#8271](https://github.com/scalableminds/webknossos/pull/8271)
+- The fill tool can now be adapted so that it only acts within a specified bounding box. Use the new "Restrict Floodfill" mode for that in the toolbar. [#8267](https://github.com/scalableminds/webknossos/pull/8267)
 
 ### Changed
 - Renamed "resolution" to "magnification" in more places within the codebase, including local variables. [#8168](https://github.com/scalableminds/webknossos/pull/8168)

docs/volume_annotation/tools.md

@@ -68,6 +68,8 @@ The following interactions and modes become available when working with some of
 ![3D Fill Modifier](./images/3d-modifier.jpg){align=left width="60"} 
 **2D/3D Fill**: Modifies the flood filling tool to work in 2D (in-plane only) or 3D (volumetric fill/re-labeling). 3D flood fill is constrained to a small, regional bounding box for performance reasons. Read more about [flood fills](#volume-flood-fills) below.
 
+![Restrict Fill](./images/icon_restricted_floodfill.jpg){align=left width="60"} 
+**Restrict Fill by Bounding Box**: When enabled, the fill operation will be restricted by the smallest bounding box that encloses the clicked position. This feature can be useful when correcting segmentation in a small bounding box (e.g., when curating training data).
 
 ## Quick-select tool
 The Quick Select tool offers AI-powered automatic segmentation, powered by [Segment Anything Model 2](https://ai.meta.com/blog/segment-anything-2/). Simply draw a selection around your target structure, and WEBKNOSSOS will automatically segment it for you.

frontend/javascripts/components/async_clickables.tsx

@@ -1,4 +1,4 @@
-import { Button, type ButtonProps } from "antd";
+import { Button, ConfigProvider, type ButtonProps } from "antd";
 import { LoadingOutlined } from "@ant-design/icons";
 import * as React from "react";
 import FastTooltip from "./fast_tooltip";
@@ -47,9 +47,12 @@ export function AsyncButton(props: AsyncButtonProps) {
   const effectiveChildren = hideContentWhenLoading && isLoading ? null : children;
   return (
     <FastTooltip title={title}>
-      <Button {...rest} loading={isLoading} onClick={onClick}>
-        {effectiveChildren}
-      </Button>
+      {/* Avoid weird animation when icons swap */}
+      <ConfigProvider theme={{ token: { motion: false } }}>
+        <Button {...rest} loading={isLoading} onClick={onClick}>
+          {effectiveChildren}
+        </Button>
+      </ConfigProvider>
     </FastTooltip>
   );
 }

frontend/javascripts/libs/mjs.ts

@@ -250,6 +250,9 @@ const V2 = {
   clone(a: Vector2): Vector2 {
     return [a[0], a[1]];
   },
+  prod(a: Vector2) {
+    return a[0] * a[1];
+  },
 };
 
 const _tmpVec: Vector3 = [0, 0, 0];

frontend/javascripts/libs/progress_callback.ts

@@ -1,6 +1,8 @@
 import { message } from "antd";
 import { sleep } from "libs/utils";
+
 type HideFn = () => void;
+
 export type ProgressCallback = (
   isDone: boolean,
   progressState: string | React.ReactNode,
@@ -9,11 +11,14 @@ export type ProgressCallback = (
 ) => Promise<{
   hideFn: HideFn;
 }>;
+
 type Options = {
   pauseDelay: number;
   successMessageDelay: number;
   key?: string;
-}; // This function returns another function which can be called within a longer running
+};
+
+// This function returns another function which can be called within a longer running
 // process to update the UI with progress information. Example usage:
 // const progressCallback = createProgressCallback({ pauseDelay: 100, successMessageDelay: 5000 });
 // await progressCallback(false, "Beginning work...")

frontend/javascripts/oxalis/constants.ts

@@ -333,6 +333,9 @@ const Constants = {
     _2D: (process.env.IS_TESTING ? [512, 512, 1] : [768, 768, 1]) as Vector3,
     _3D: (process.env.IS_TESTING ? [64, 64, 32] : [96, 96, 96]) as Vector3,
   },
+  // When the user uses the "isFloodfillRestrictedToBoundingBox" setting,
+  // we are more lax with the flood fill extent.
+  FLOOD_FILL_MULTIPLIER_FOR_BBOX_RESTRICTION: 10,
   MAXIMUM_DATE_TIMESTAMP: 8640000000000000,
   SCALEBAR_HEIGHT: 22,
   SCALEBAR_OFFSET: 10,

frontend/javascripts/oxalis/controller/combinations/bounding_box_handlers.ts

@@ -242,7 +242,9 @@ export function createBoundingBoxAndGetEdges(
     addUserBoundingBoxAction({
       boundingBox: {
         min: globalPosition,
-        max: V3.add(globalPosition, [1, 1, 1]),
+        // The last argument ensures that a Vector3 is used and not a
+        // Float32Array.
+        max: V3.add(globalPosition, [1, 1, 1], [0, 0, 0]),
       },
     }),
   );

frontend/javascripts/oxalis/default_state.ts

@@ -84,6 +84,7 @@ const defaultState: OxalisState = {
     gpuMemoryFactor: Constants.DEFAULT_GPU_MEMORY_FACTOR,
     overwriteMode: OverwriteModeEnum.OVERWRITE_ALL,
     fillMode: FillModeEnum._2D,
+    isFloodfillRestrictedToBoundingBox: false,
     interpolationMode: InterpolationModeEnum.INTERPOLATE,
     useLegacyBindings: false,
     quickSelect: {

frontend/javascripts/oxalis/model/accessors/tracing_accessor.ts

@@ -10,6 +10,8 @@ import type {
 import type { ServerTracing, TracingType } from "types/api_flow_types";
 import { TracingTypeEnum } from "types/api_flow_types";
 import type { SaveQueueType } from "oxalis/model/actions/save_actions";
+import BoundingBox from "../bucket_data_handling/bounding_box";
+import type { Vector3 } from "oxalis/constants";
 
 export function maybeGetSomeTracing(
   tracing: Tracing,
@@ -86,7 +88,17 @@ export function selectTracing(
 
   return tracing;
 }
+
 export const getUserBoundingBoxesFromState = (state: OxalisState): Array<UserBoundingBox> => {
   const maybeSomeTracing = maybeGetSomeTracing(state.tracing);
   return maybeSomeTracing != null ? maybeSomeTracing.userBoundingBoxes : [];
 };
+
+export const getUserBoundingBoxesThatContainPosition = (
+  state: OxalisState,
+  position: Vector3,
+): Array<UserBoundingBox> => {
+  const bboxes = getUserBoundingBoxesFromState(state);
+
+  return bboxes.filter((el) => new BoundingBox(el.boundingBox).containsPoint(position));
+};

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

@@ -39,6 +39,10 @@ const warnMergeWithoutPendingOperations = _.throttle(() => {
   );
 }, WARNING_THROTTLE_THRESHOLD);
 
+const warnAwaitedMissingBucket = _.throttle(() => {
+  ErrorHandling.notify(new Error("Awaited missing bucket"));
+}, WARNING_THROTTLE_THRESHOLD);
+
 export function assertNonNullBucket(bucket: Bucket): asserts bucket is DataBucket {
   if (bucket.type === "null") {
     throw new Error("Unexpected null bucket.");
@@ -773,7 +777,7 @@ export class DataBucket {
       // In the past, ensureLoaded() never returned if the bucket
       // was MISSING. This log might help to discover potential
       // bugs which could arise in combination with MISSING buckets.
-      console.warn("Awaited missing bucket.");
+      warnAwaitedMissingBucket();
     }
   }
 }

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

@@ -487,7 +487,7 @@ class DataCube {
     additionalCoordinates: AdditionalCoordinate[] | null,
     segmentIdNumber: number,
     dimensionIndices: DimensionMap,
-    floodfillBoundingBox: BoundingBoxType,
+    _floodfillBoundingBox: BoundingBoxType,
     zoomStep: number,
     progressCallback: ProgressCallback,
     use3D: boolean,
@@ -498,14 +498,17 @@ class DataCube {
   }> {
     // This flood-fill algorithm works in two nested levels and uses a list of buckets to flood fill.
     // On the inner level a bucket is flood-filled  and if the iteration of the buckets data
-    // reaches an neighbour bucket, this bucket is added to this list of buckets to flood fill.
+    // reaches a neighbour bucket, this bucket is added to this list of buckets to flood fill.
     // The outer level simply iterates over all  buckets in the list and triggers the bucket-wise flood fill.
     // Additionally a map is created that saves all labeled voxels for each bucket. This map is returned at the end.
     //
-    // Note: It is possible that a bucket is multiple times added to the list of buckets. This is intended
+    // Note: It is possible that a bucket is added multiple times to the list of buckets. This is intended
     // because a border of the "neighbour volume shape" might leave the neighbour bucket and enter it somewhere else.
     // If it would not be possible to have the same neighbour bucket in the list multiple times,
     // not all of the target area in the neighbour bucket might be filled.
+
+    const floodfillBoundingBox = new BoundingBox(_floodfillBoundingBox);
+
     // Helper function to convert between xyz and uvw (both directions)
     const transpose = (voxel: Vector3): Vector3 =>
       Dimensions.transDimWithIndices(voxel, dimensionIndices);
@@ -517,12 +520,12 @@ class DataCube {
       zoomStep,
     );
     const seedBucket = this.getOrCreateBucket(seedBucketAddress);
-    let coveredBBoxMin: Vector3 = [
+    const coveredBBoxMin: Vector3 = [
       Number.POSITIVE_INFINITY,
       Number.POSITIVE_INFINITY,
       Number.POSITIVE_INFINITY,
     ];
-    let coveredBBoxMax: Vector3 = [0, 0, 0];
+    const coveredBBoxMax: Vector3 = [0, 0, 0];
 
     if (seedBucket.type === "null") {
       return {
@@ -689,35 +692,37 @@ class DataCube {
           } else {
             // Label the current neighbour and add it to the neighbourVoxelStackUvw to iterate over its neighbours.
             const neighbourVoxelIndex = this.getVoxelIndexByVoxelOffset(neighbourVoxelXyz);
+            const currentGlobalPosition = V3.add(
+              currentGlobalBucketPosition,
+              V3.scale3(adjustedNeighbourVoxelXyz, currentMag),
+            );
 
             if (bucketData[neighbourVoxelIndex] === sourceSegmentId) {
-              bucketData[neighbourVoxelIndex] = segmentId;
-              markUvwInSliceAsLabeled(neighbourVoxelUvw);
-              neighbourVoxelStackUvw.pushVoxel(neighbourVoxelUvw);
-              labeledVoxelCount++;
-              const currentGlobalPosition = V3.add(
-                currentGlobalBucketPosition,
-                V3.scale3(adjustedNeighbourVoxelXyz, currentMag),
-              );
-              coveredBBoxMin = [
-                Math.min(coveredBBoxMin[0], currentGlobalPosition[0]),
-                Math.min(coveredBBoxMin[1], currentGlobalPosition[1]),
-                Math.min(coveredBBoxMin[2], currentGlobalPosition[2]),
-              ];
-              // The maximum is exclusive which is why we add 1 to the position
-              coveredBBoxMax = [
-                Math.max(coveredBBoxMax[0], currentGlobalPosition[0] + 1),
-                Math.max(coveredBBoxMax[1], currentGlobalPosition[1] + 1),
-                Math.max(coveredBBoxMax[2], currentGlobalPosition[2] + 1),
-              ];
-
-              if (labeledVoxelCount % 1000000 === 0) {
-                console.log(`Labeled ${labeledVoxelCount} Vx. Continuing...`);
-
-                await progressCallback(
-                  false,
-                  `Labeled ${labeledVoxelCount / 1000000} MVx. Continuing...`,
-                );
+              if (floodfillBoundingBox.containsPoint(currentGlobalPosition)) {
+                bucketData[neighbourVoxelIndex] = segmentId;
+                markUvwInSliceAsLabeled(neighbourVoxelUvw);
+                neighbourVoxelStackUvw.pushVoxel(neighbourVoxelUvw);
+                labeledVoxelCount++;
+
+                coveredBBoxMin[0] = Math.min(coveredBBoxMin[0], currentGlobalPosition[0]);
+                coveredBBoxMin[1] = Math.min(coveredBBoxMin[1], currentGlobalPosition[1]);
+                coveredBBoxMin[2] = Math.min(coveredBBoxMin[2], currentGlobalPosition[2]);
+
+                // The maximum is exclusive which is why we add 1 to the position
+                coveredBBoxMax[0] = Math.max(coveredBBoxMax[0], currentGlobalPosition[0] + 1);
+                coveredBBoxMax[1] = Math.max(coveredBBoxMax[1], currentGlobalPosition[1] + 1);
+                coveredBBoxMax[2] = Math.max(coveredBBoxMax[2], currentGlobalPosition[2] + 1);
+
+                if (labeledVoxelCount % 1000000 === 0) {
+                  console.log(`Labeled ${labeledVoxelCount} Vx. Continuing...`);
+
+                  await progressCallback(
+                    false,
+                    `Labeled ${labeledVoxelCount / 1000000} MVx. Continuing...`,
+                  );
+                }
+              } else {
+                wasBoundingBoxExceeded = true;
               }
             }
           }