Warn if outside of bounding box

CHANGELOG.md

@@ -14,6 +14,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 - Added the magnification used for determining the segment ids in the segmentation tab to the table of the tab. [#4480](https://github.com/scalableminds/webknossos/pull/4480)
 - Added support for ID mapping of segmentation layer based on HDF5 agglomerate files. [#4469](https://github.com/scalableminds/webknossos/pull/4469)
 - Added option to hide all unmapped segments to segmentation tab. [#4510](https://github.com/scalableminds/webknossos/pull/4510)
+- Added a warning to the position input in tracings if the current position is out of bounds. The warning colors the position and rotation input orange. [#4544](https://github.com/scalableminds/webknossos/pull/4544)
 - When wK changes datasource-properties.json files of datasets, now it creates a backup log of previous versions. [#4534](https://github.com/scalableminds/webknossos/pull/4534)
 - Isosurface generation now also supports hdf5-style mappings. [#4531](https://github.com/scalableminds/webknossos/pull/4531)
 

frontend/javascripts/libs/error_handling.js

@@ -13,7 +13,10 @@ import window, { document, location } from "libs/window";
 
 // No more than MAX_NUM_ERRORS will be reported to airbrake
 const MAX_NUM_ERRORS = 50;
-const BLACKLISTED_ERROR_MESSAGES = ["ResizeObserver loop limit exceeded"];
+const BLACKLISTED_ERROR_MESSAGES = [
+  "ResizeObserver loop limit exceeded",
+  "Invariant Violation: Cannot call hover while not dragging.",
+];
 
 type ErrorHandlingOptions = {
   throwAssertions: boolean,

frontend/javascripts/messages.js

@@ -75,6 +75,9 @@ In order to restore the current window, a reload is necessary.`,
   "data.disabled_render_missing_data_black": `You just disabled the option to render missing
 data black. This means that in case of missing data, data of lower quality is rendered
 instead. Only enable this option if you understand its effect. All layers will now be reloaded.`,
+  "tracing.out_of_dataset_bounds":
+    "The current position is outside of the dataset's bounding box. No data will be shown here.",
+  "tracing.out_of_task_bounds": "The current position is outside of the task's bounding box.",
   "tracing.copy_position": "Copy position to clipboard.",
   "tracing.copy_rotation": "Copy rotation to clipboard.",
   "tracing.copy_cell_id": "Hit CTRL + I to copy the currently hovered cell id",

frontend/javascripts/oxalis/controller/td_controller.js

@@ -24,6 +24,7 @@ import {
   moveTDViewYAction,
   moveTDViewByVectorAction,
 } from "oxalis/model/actions/view_mode_actions";
+import { getActiveNode } from "oxalis/model/accessors/skeletontracing_accessor";
 import { voxelToNm } from "oxalis/model/scaleinfo";
 import CameraController from "oxalis/controller/camera_controller";
 import PlaneView from "oxalis/view/plane_view";
@@ -49,6 +50,8 @@ export function threeCameraToCameraData(camera: THREE.OrthographicCamera): Camer
   };
 }
 
+const INVALID_ACTIVE_NODE_ID = -1;
+
 type OwnProps = {|
   cameras: OrthoViewMap<THREE.OrthographicCamera>,
   planeView?: PlaneView,
@@ -60,12 +63,42 @@ type StateProps = {|
 |};
 type Props = { ...OwnProps, ...StateProps };
 
-class TDController extends React.PureComponent<Props> {
+type State = {
+  lastActiveNodeId: number,
+};
+
+function maybeGetActiveNodeFromProps(props: Props) {
+  return props.tracing && props.tracing.skeleton && props.tracing.skeleton.activeNodeId != null
+    ? props.tracing.skeleton.activeNodeId
+    : INVALID_ACTIVE_NODE_ID;
+}
+
+class TDController extends React.PureComponent<Props, State> {
   controls: TrackballControls;
   mouseController: InputMouse;
   oldNmPos: Vector3;
   isStarted: boolean;
 
+  constructor(props: Props) {
+    super(props);
+    const initalActiveNodeId = maybeGetActiveNodeFromProps(props);
+    this.state = {
+      lastActiveNodeId: initalActiveNodeId,
+    };
+  }
+
+  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
+    const maybeNewActiveNode = maybeGetActiveNodeFromProps(nextProps);
+    if (
+      maybeNewActiveNode !== prevState.lastActiveNodeId &&
+      maybeNewActiveNode !== INVALID_ACTIVE_NODE_ID
+    ) {
+      return { lastActiveNodeId: maybeNewActiveNode };
+    } else {
+      return null;
+    }
+  }
+
   componentDidMount() {
     const { dataset, flycam } = Store.getState();
     this.oldNmPos = voxelToNm(dataset.dataSource.scale, getPosition(flycam));
@@ -74,6 +107,19 @@ class TDController extends React.PureComponent<Props> {
     this.initMouse();
   }
 
+  componentDidUpdate(prevProps: Props, prevState: State) {
+    if (
+      prevState.lastActiveNodeId !== this.state.lastActiveNodeId &&
+      this.state.lastActiveNodeId !== INVALID_ACTIVE_NODE_ID &&
+      this.props.tracing &&
+      this.props.tracing.skeleton
+    ) {
+      getActiveNode(this.props.tracing.skeleton).map(activeNode =>
+        this.setTargetAndFixPosition(activeNode.position),
+      );
+    }
+  }
+
   componentWillUnmount() {
     this.isStarted = false;
     if (this.mouseController != null) {
@@ -165,8 +211,8 @@ class TDController extends React.PureComponent<Props> {
     };
   }
 
-  setTargetAndFixPosition(): void {
-    const position = getPosition(this.props.flycam);
+  setTargetAndFixPosition(position: ?Vector3 = null): void {
+    position = position || getPosition(this.props.flycam);
     const nmPosition = voxelToNm(this.props.scale, position);
 
     this.controls.target.set(...nmPosition);

frontend/javascripts/oxalis/model/accessors/dataset_accessor.js

@@ -167,7 +167,7 @@ export function getDatasetCenter(dataset: APIDataset): Vector3 {
   ];
 }
 
-function getDatasetExtentInVoxel(dataset: APIDataset) {
+export function getDatasetExtentInVoxel(dataset: APIDataset) {
   const datasetLayers = dataset.dataSource.dataLayers;
   const allBoundingBoxes = datasetLayers.map(layer => layer.boundingBox);
   const unifiedBoundingBoxes = aggregateBoundingBox(allBoundingBoxes);
@@ -176,6 +176,8 @@ function getDatasetExtentInVoxel(dataset: APIDataset) {
     width: max[0] - min[0],
     height: max[1] - min[1],
     depth: max[2] - min[2],
+    min,
+    max,
   };
   return extent;
 }

frontend/javascripts/oxalis/view/action-bar/dataset_position_view.js

@@ -3,20 +3,23 @@ import { Input, Tooltip, Icon } from "antd";
 import { connect } from "react-redux";
 import Clipboard from "clipboard-js";
 import React, { PureComponent } from "react";
-
+import type { APIDataset } from "admin/api_flow_types";
 import { V3 } from "libs/mjs";
 import { Vector3Input } from "libs/vector_input";
 import { getPosition, getRotation } from "oxalis/model/accessors/flycam_accessor";
 import { setPositionAction, setRotationAction } from "oxalis/model/actions/flycam_actions";
+import { getDatasetExtentInVoxel } from "oxalis/model/accessors/dataset_accessor";
 import ButtonComponent from "oxalis/view/components/button_component";
-import Store, { type OxalisState, type Flycam } from "oxalis/store";
+import Store, { type OxalisState, type Flycam, type Task } from "oxalis/store";
 import Toast from "libs/toast";
 import constants, { type ViewMode, type Vector3 } from "oxalis/constants";
 import message from "messages";
 
 type Props = {|
   flycam: Flycam,
   viewMode: ViewMode,
+  dataset: APIDataset,
+  task: ?Task,
 |};
 
 const positionIconStyle = { transform: "rotate(-45deg)" };
@@ -44,16 +47,46 @@ class DatasetPositionView extends PureComponent<Props> {
 
   render() {
     const position = V3.floor(getPosition(this.props.flycam));
+    const { dataset, task } = this.props;
+    const { min: datasetMin, max: datasetMax } = getDatasetExtentInVoxel(dataset);
+    const isPositionOutOfBounds = (min: Vector3, max: Vector3) =>
+      position[0] < min[0] ||
+      position[1] < min[1] ||
+      position[2] < min[2] ||
+      position[0] > max[0] ||
+      position[1] > max[1] ||
+      position[2] > max[2];
+    const isOutOfDatasetBounds = isPositionOutOfBounds(datasetMin, datasetMax);
+    let isOutOfTaskBounds = false;
+    if (task && task.boundingBox) {
+      const bbox = task.boundingBox;
+      const bboxMax = [
+        bbox.topLeft[0] + bbox.width,
+        bbox.topLeft[1] + bbox.height,
+        bbox.topLeft[2] + bbox.depth,
+      ];
+      isOutOfTaskBounds = isPositionOutOfBounds(bbox.topLeft, bboxMax);
+    }
+    const maybeErrorColor =
+      isOutOfDatasetBounds || isOutOfTaskBounds
+        ? { color: "rgb(255, 155, 85)", borderColor: "rgb(241, 122, 39)" }
+        : {};
+    let maybeErrorMessage = null;
+    if (isOutOfDatasetBounds) {
+      maybeErrorMessage = message["tracing.out_of_dataset_bounds"];
+    } else if (!maybeErrorMessage && isOutOfTaskBounds) {
+      maybeErrorMessage = message["tracing.out_of_task_bounds"];
+    }
     const rotation = V3.round(getRotation(this.props.flycam));
     const isArbitraryMode = constants.MODES_ARBITRARY.includes(this.props.viewMode);
 
-    return (
+    const positionView = (
       <div style={{ display: "flex" }}>
         <Input.Group compact style={{ whiteSpace: "nowrap" }}>
           <Tooltip title={message["tracing.copy_position"]} placement="bottomLeft">
             <ButtonComponent
               onClick={this.copyPositionToClipboard}
-              style={{ padding: "0 10px" }}
+              style={{ padding: "0 10px", ...maybeErrorColor }}
               className="hide-on-small-screen"
             >
               <Icon type="pushpin" style={positionIconStyle} />
@@ -63,37 +96,44 @@ class DatasetPositionView extends PureComponent<Props> {
             value={position}
             onChange={this.handleChangePosition}
             autosize
-            style={{ textAlign: "center" }}
+            style={{ textAlign: "center", ...maybeErrorColor }}
           />
         </Input.Group>
         {isArbitraryMode ? (
-          <Tooltip title={message["tracing.copy_rotation"]} placement="bottomLeft">
-            <Input.Group compact style={{ whiteSpace: "nowrap", marginLeft: 10 }}>
+          <Input.Group compact style={{ whiteSpace: "nowrap", marginLeft: 10 }}>
+            <Tooltip title={message["tracing.copy_rotation"]} placement="bottomLeft">
               <ButtonComponent
                 onClick={this.copyRotationToClipboard}
-                style={{ padding: "0 10px" }}
+                style={{ padding: "0 10px", ...maybeErrorColor }}
                 className="hide-on-small-screen"
               >
                 <Icon type="reload" />
               </ButtonComponent>
-              <Vector3Input
-                value={rotation}
-                onChange={this.handleChangeRotation}
-                style={{ textAlign: "center", width: 120 }}
-                allowDecimals
-              />
-            </Input.Group>
-          </Tooltip>
+            </Tooltip>
+            <Vector3Input
+              value={rotation}
+              onChange={this.handleChangeRotation}
+              style={{ textAlign: "center", width: 120, ...maybeErrorColor }}
+              allowDecimals
+            />
+          </Input.Group>
         ) : null}
       </div>
     );
+    return maybeErrorMessage ? (
+      <Tooltip title={maybeErrorMessage}>{positionView}</Tooltip>
+    ) : (
+      positionView
+    );
   }
 }
 
 function mapStateToProps(state: OxalisState): Props {
   return {
     flycam: state.flycam,
     viewMode: state.temporaryConfiguration.viewMode,
+    dataset: state.dataset,
+    task: state.task,
   };
 }