Warn if outside of bounding box

CHANGELOG.unreleased.md

@@ -16,6 +16,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - 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)
 - 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)
+- Added a warning to the position input in tracings if the current position is out of bounds. The warning colors the position input orange. [#4544](https://github.com/scalableminds/webknossos/pull/4544)
 - Isosurface generation now also supports hdf5-style mappings. [#4531](https://github.com/scalableminds/webknossos/pull/4531)
 
 ### Changed
@@ -34,6 +35,8 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 
 ### Fixed
 - Users only get tasks of datasets that they can access. [#4488](https://github.com/scalableminds/webknossos/pull/4488)
+- Ignoring an error message caused by the drag and drop functionality. This error claims that a reload of the tracing is required although everything is fine. [#4544](https://github.com/scalableminds/webknossos/pull/4544)
+- Fixed that after selecting a node in the 3d viewport the rotating center of the viewport was not updated immediately. [#4544](https://github.com/scalableminds/webknossos/pull/4544)
 - Fixed the import of datasets which was temporarily broken. [#4497](https://github.com/scalableminds/webknossos/pull/4497)
 - Fixed the displayed segment ids in segmentation tab when "Render Missing Data Black" is turned off. [#4480](https://github.com/scalableminds/webknossos/pull/4480)
 - The datastore checks if a organization folder can be created before creating a new organization. [#4501](https://github.com/scalableminds/webknossos/pull/4501)

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

@@ -76,6 +76,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,6 +63,12 @@ type StateProps = {|
 |};
 type Props = { ...OwnProps, ...StateProps };
 
+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> {
   controls: TrackballControls;
   mouseController: InputMouse;
@@ -74,6 +83,22 @@ class TDController extends React.PureComponent<Props> {
     this.initMouse();
   }
 
+  componentDidUpdate(prevProps: Props) {
+    if (
+      maybeGetActiveNodeFromProps(this.props) !== maybeGetActiveNodeFromProps(prevProps) &&
+      maybeGetActiveNodeFromProps(this.props) !== INVALID_ACTIVE_NODE_ID &&
+      this.props.tracing &&
+      this.props.tracing.skeleton
+    ) {
+      // The rotation center of this viewport is not updated to the new position after selecing a node in the viewport.
+      // This happens because the selection of the node does not trigger a call to setTargetAndFixPosition directly.
+      // Thus we do it manually whenever the active node changes.
+      getActiveNode(this.props.tracing.skeleton).map(activeNode =>
+        this.setTargetAndFixPosition(activeNode.position),
+      );
+    }
+  }
+
   componentWillUnmount() {
     this.isStarted = false;
     if (this.mouseController != null) {
@@ -165,8 +190,8 @@ class TDController extends React.PureComponent<Props> {
     };
   }
 
-  setTargetAndFixPosition(): void {
-    const position = getPosition(this.props.flycam);
+  setTargetAndFixPosition(position?: Vector3): 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)" };
@@ -42,18 +45,53 @@ class DatasetPositionView extends PureComponent<Props> {
     Store.dispatch(setRotationAction(rotation));
   };
 
+  isPositionOutOfBounds = (position: Vector3) => {
+    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);
+    }
+    return { isOutOfDatasetBounds, isOutOfTaskBounds };
+  };
+
   render() {
     const position = V3.floor(getPosition(this.props.flycam));
+    const { isOutOfDatasetBounds, isOutOfTaskBounds } = this.isPositionOutOfBounds(position);
+    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 +101,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" }}
                 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 }}
+              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,
   };
 }