Clean up green task bounding boxes (#8535)

* only show green task bounding boxes if a task exists; show them for all tracing layers

* update changelog

* rename to updateTaskBoundingBoxes and add docstring

Author: philippotto

CHANGELOG.unreleased.md

@@ -19,6 +19,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Replaced fixed threshold of 40 meshes by a dynamic limit based on the number of triangles in the mesh for the "Create Animation" job. [#8588](https://github.com/scalableminds/webknossos/pull/8588) 
 
 ### Fixed
+- Fixed that layer bounding boxes were sometimes colored green even though this should only happen for tasks. [#8535](https://github.com/scalableminds/webknossos/pull/8535)
 
 ### Removed
 

frontend/javascripts/oxalis/controller/scene_controller.ts

@@ -46,7 +46,7 @@ import {
 } from "oxalis/model/accessors/dataset_layer_transformation_accessor";
 import { getActiveMagIndicesForLayers, getPosition } from "oxalis/model/accessors/flycam_accessor";
 import { getSkeletonTracing } from "oxalis/model/accessors/skeletontracing_accessor";
-import { getSomeTracing } from "oxalis/model/accessors/tracing_accessor";
+import { getSomeTracing, getTaskBoundingBoxes } from "oxalis/model/accessors/tracing_accessor";
 import { getPlaneScalingFactor } from "oxalis/model/accessors/view_mode_accessor";
 import { sceneControllerReadyAction } from "oxalis/model/actions/actions";
 import Dimensions from "oxalis/model/dimensions";
@@ -84,7 +84,7 @@ class SceneController {
   layerBoundingBoxes!: { [layerName: string]: Cube };
   annotationToolsGeometryGroup!: THREE.Group;
   highlightedBBoxId: number | null | undefined;
-  taskBoundingBox: Cube | null | undefined;
+  taskCubeByTracingId: Record<string, Cube | null | undefined> = {};
   contour!: ContourGeometry;
   quickSelectGeometry!: QuickSelectGeometry;
   lineMeasurementGeometry!: LineMeasurementGeometry;
@@ -231,6 +231,7 @@ class SceneController {
       showCrossSections: true,
       isHighlighted: false,
     });
+    this.datasetBoundingBox.getMeshes().forEach((mesh) => this.rootNode.add(mesh));
 
     this.contour = new ContourGeometry();
     this.quickSelectGeometry = new QuickSelectGeometry();
@@ -260,8 +261,6 @@ class SceneController {
       ...planeMeshes,
     );
 
-    const taskBoundingBox = getSomeTracing(state.annotation).boundingBox;
-    this.buildTaskingBoundingBox(taskBoundingBox);
     if (state.annotation.skeleton != null) {
       this.addSkeleton((_state) => getSkeletonTracing(_state.annotation), true);
     }
@@ -326,24 +325,48 @@ class SceneController {
     this.rootNode.remove(skeletonGroup);
   }
 
-  buildTaskingBoundingBox(taskBoundingBox: BoundingBoxType | null | undefined): void {
-    if (taskBoundingBox != null) {
-      if (this.taskBoundingBox != null) {
-        this.taskBoundingBox.getMeshes().forEach((mesh) => this.rootNode.remove(mesh));
+  updateTaskBoundingBoxes(
+    taskCubeByTracingId: Record<string, BoundingBoxType | null | undefined>,
+  ): void {
+    /*
+     Ensures that a green task bounding box is rendered in the scene for
+     each layer.
+     The update is implemented by simply removing the old geometry and
+     adding a new one. Since this function is executed very rarely,
+     this is not a performance problem.
+     */
+    for (const [tracingId, boundingBox] of Object.entries(taskCubeByTracingId)) {
+      let taskCube = this.taskCubeByTracingId[tracingId];
+      // Remove the old box if it exists
+      if (taskCube != null) {
+        taskCube.getMeshes().forEach((mesh) => this.rootNode.remove(mesh));
+      }
+      this.taskCubeByTracingId[tracingId] = null;
+      if (boundingBox == null || Store.getState().task == null) {
+        continue;
       }
-
       const { viewMode } = Store.getState().temporaryConfiguration;
-      this.taskBoundingBox = new Cube({
-        min: taskBoundingBox.min,
-        max: taskBoundingBox.max,
+      taskCube = new Cube({
+        min: boundingBox.min,
+        max: boundingBox.max,
         color: 0x00ff00,
         showCrossSections: true,
         isHighlighted: false,
       });
-      this.taskBoundingBox.getMeshes().forEach((mesh) => this.rootNode.add(mesh));
+      taskCube.getMeshes().forEach((mesh) => this.rootNode.add(mesh));
 
       if (constants.MODES_ARBITRARY.includes(viewMode)) {
-        this.taskBoundingBox?.setVisibility(false);
+        taskCube?.setVisibility(false);
+      }
+
+      this.taskCubeByTracingId[tracingId] = taskCube;
+    }
+  }
+
+  forEachTaskCube(fn: (cube: Cube) => void) {
+    for (const cube of Object.values(this.taskCubeByTracingId)) {
+      if (cube != null) {
+        fn(cube);
       }
     }
   }
@@ -369,7 +392,7 @@ class SceneController {
       bbCube.updateForCam(id);
     });
 
-    this.taskBoundingBox?.updateForCam(id);
+    this.forEachTaskCube((cube) => cube.updateForCam(id));
 
     this.segmentMeshController.meshesLayerLODRootGroup.visible = id === OrthoViews.TDView;
     if (this.splitBoundaryMesh != null) {
@@ -623,8 +646,7 @@ class SceneController {
 
     this.datasetBoundingBox.setVisibility(false);
     this.userBoundingBoxGroup.visible = false;
-
-    this.taskBoundingBox?.setVisibility(false);
+    this.forEachTaskCube((cube) => cube.setVisibility(false));
 
     if (this.segmentMeshController.meshesLayerLODRootGroup != null) {
       this.segmentMeshController.meshesLayerLODRootGroup.visible = false;
@@ -639,7 +661,7 @@ class SceneController {
     this.datasetBoundingBox.setVisibility(true);
     this.userBoundingBoxGroup.visible = true;
 
-    this.taskBoundingBox?.setVisibility(true);
+    this.forEachTaskCube((cube) => cube.setVisibility(true));
   }
 
   destroy() {
@@ -670,7 +692,7 @@ class SceneController {
     this.datasetBoundingBox.destroy();
     this.userBoundingBoxes.forEach((cube) => cube.destroy());
     Object.values(this.layerBoundingBoxes).forEach((cube) => cube.destroy());
-    this.taskBoundingBox?.destroy();
+    this.forEachTaskCube((cube) => cube.destroy());
 
     for (const plane of _.values(this.planes)) {
       plane.destroy();
@@ -712,8 +734,9 @@ class SceneController {
         this.updateMeshesAccordingToLayerVisibility(),
       ),
       listenToStoreProperty(
-        (storeState) => getSomeTracing(storeState.annotation).boundingBox,
-        (bb) => this.buildTaskingBoundingBox(bb),
+        (storeState) => getTaskBoundingBoxes(storeState.annotation),
+        (boundingBoxesByTracingId) => this.updateTaskBoundingBoxes(boundingBoxesByTracingId),
+        true,
       ),
       listenToStoreProperty(
         (storeState) =>

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

@@ -1,3 +1,4 @@
+import _ from "lodash";
 import type { Vector3 } from "oxalis/constants";
 import type { SaveQueueType } from "oxalis/model/actions/save_actions";
 import type {
@@ -12,6 +13,7 @@ import type {
 import type { ServerTracing, TracingType } from "types/api_types";
 import { TracingTypeEnum } from "types/api_types";
 import BoundingBox from "../bucket_data_handling/bounding_box";
+import { reuseInstanceOnEquality } from "./accessor_helpers";
 
 export function maybeGetSomeTracing(
   annotation: StoreAnnotation,
@@ -89,6 +91,14 @@ export function selectTracing(
   return tracing;
 }
 
+function _getTaskBoundingBoxes(annotation: StoreAnnotation) {
+  const layers = _.compact([annotation.skeleton, ...annotation.volumes, annotation.readOnly]);
+
+  return Object.fromEntries(layers.map((l) => [l.tracingId, l.boundingBox]));
+}
+
+export const getTaskBoundingBoxes = reuseInstanceOnEquality(_getTaskBoundingBoxes);
+
 export const getUserBoundingBoxesFromState = (state: OxalisState): Array<UserBoundingBox> => {
   const maybeSomeTracing = maybeGetSomeTracing(state.annotation);
   return maybeSomeTracing != null ? maybeSomeTracing.userBoundingBoxes : [];