Add UI for segment statistics (volume and bbox)

CHANGELOG.unreleased.md

@@ -15,6 +15,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Added disabled drag handles to volume and skeleton layers for visual consistency. These layer cannot be dragged or reordered. [#7295](https://github.com/scalableminds/webknossos/pull/7295)
 - Dataset thumbnails for grayscale layers can now be colored using the value in the view configuration. [#7255](https://github.com/scalableminds/webknossos/pull/7255)
 - OpenID Connect authorization is now compatible with Providers that send the user information in an id_token. [#7294](https://github.com/scalableminds/webknossos/pull/7294)
+- Volume and bounding box information is shown in segments' context menus as well as in a separate modal in the segments tab. There is also an option to export the statistics. [#7249](https://github.com/scalableminds/webknossos/pull/7249)
 - A banner underneath the navigation bar informs about current and upcoming maintenances of WEBKNOSSOS. [#7284](https://github.com/scalableminds/webknossos/pull/7284)
 - The AI-based quick select tool can now also be used for ND datasets. [#7287](https://github.com/scalableminds/webknossos/pull/7287)
 

frontend/javascripts/admin/admin_rest_api.ts

@@ -960,6 +960,38 @@ export function getNewestVersionForTracing(
   );
 }
 
+export function getSegmentVolumes(
+  tracingStoreUrl: string,
+  tracingId: string,
+  mag: Vector3,
+  segmentIds: Array<number>,
+): Promise<number[]> {
+  return doWithToken((token) =>
+    Request.sendJSONReceiveJSON(
+      `${tracingStoreUrl}/tracings/volume/${tracingId}/segmentStatistics/volume?token=${token}`,
+      {
+        data: { mag, segmentIds },
+      },
+    ),
+  );
+}
+
+export function getSegmentBoundingBoxes(
+  tracingStoreUrl: string,
+  tracingId: string,
+  mag: Vector3,
+  segmentIds: Array<number>,
+): Promise<Array<{ topLeft: Vector3; width: number; height: number; depth: number }>> {
+  return doWithToken((token) =>
+    Request.sendJSONReceiveJSON(
+      `${tracingStoreUrl}/tracings/volume/${tracingId}/segmentStatistics/boundingBox?token=${token}`,
+      {
+        data: { mag, segmentIds },
+      },
+    ),
+  );
+}
+
 export async function importVolumeTracing(
   tracing: Tracing,
   volumeTracing: VolumeTracing,

frontend/javascripts/libs/browser_feature_check.tsx

@@ -8,6 +8,7 @@ export default function checkBrowserFeatures() {
     new AbortController();
     Object.fromEntries([]);
     new BigUint64Array(1);
+    "hello".replaceAll("l", "k");
   } catch (exception) {
     console.error(
       "This browser lacks support for some modern features. Exception caught during test of features:",

frontend/javascripts/libs/format_utils.ts

@@ -140,8 +140,33 @@ const nmFactorToUnit = new Map([
   [1e9, "m"],
   [1e12, "km"],
 ]);
-export function formatNumberToLength(lengthInNm: number): string {
-  return formatNumberToUnit(lengthInNm, nmFactorToUnit);
+export function formatNumberToLength(lengthInNm: number, decimalPrecision: number = 1): string {
+  return formatNumberToUnit(lengthInNm, nmFactorToUnit, true, decimalPrecision);
+}
+
+const nmFactorToUnit2D = new Map([
+  [1e-6, "pm²"],
+  [1, "nm²"],
+  [1e6, "µm²"],
+  [1e12, "mm²"],
+  [1e18, "m²"],
+  [1e24, "km²"],
+]);
+
+export function formatNumberToArea(lengthInNm2: number, decimalPrecision: number = 1): string {
+  return formatNumberToUnit(lengthInNm2, nmFactorToUnit2D, true, decimalPrecision);
+}
+
+const nmFactorToUnit3D = new Map([
+  [1e-9, "pm³"],
+  [1, "nm³"],
+  [1e9, "µm³"],
+  [1e18, "mm³"],
+  [1e27, "m³"],
+  [1e36, "km³"],
+]);
+export function formatNumberToVolume(lengthInNm3: number, decimalPrecision: number = 1): string {
+  return formatNumberToUnit(lengthInNm3, nmFactorToUnit3D, true, decimalPrecision);
 }
 
 const byteFactorToUnit = new Map([

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

@@ -1,6 +1,6 @@
 // The save saga uses a retry mechanism which is based
 // on exponential back-off.
-export const PUSH_THROTTLE_TIME = 30000; // 30s
+export const PUSH_THROTTLE_TIME = 300000; // 30s
 
 export const SAVE_RETRY_WAITING_TIME = 2000;
 export const MAX_SAVE_RETRY_WAITING_TIME = 300000; // 5m

frontend/javascripts/oxalis/view/context_menu.tsx

@@ -1,8 +1,8 @@
-import { CopyOutlined, PushpinOutlined } from "@ant-design/icons";
+import { CopyOutlined, PushpinOutlined, ReloadOutlined } from "@ant-design/icons";
 import type { Dispatch } from "redux";
 import { Dropdown, Empty, notification, Tooltip, Popover, Input, MenuProps } from "antd";
 import { connect } from "react-redux";
-import React, { createContext, MouseEvent, useContext } from "react";
+import React, { createContext, MouseEvent, useContext, useState } from "react";
 import type {
   APIConnectomeFile,
   APIDataset,
@@ -52,7 +52,7 @@ import {
   deleteBranchpointByIdAction,
   addTreesAndGroupsAction,
 } from "oxalis/model/actions/skeletontracing_actions";
-import { formatNumberToLength, formatLengthAsVx } from "libs/format_utils";
+import { formatNumberToLength, formatLengthAsVx, formatNumberToVolume } from "libs/format_utils";
 import {
   getActiveSegmentationTracing,
   getSegmentsForLayer,
@@ -69,6 +69,7 @@ import {
 import {
   getVisibleSegmentationLayer,
   getMappingInfo,
+  getResolutionInfo,
 } from "oxalis/model/accessors/dataset_accessor";
 import {
   loadAgglomerateSkeletonAtPosition,
@@ -101,6 +102,9 @@ import {
   MenuItemType,
   SubMenuType,
 } from "antd/lib/menu/hooks/useItems";
+import { getSegmentBoundingBoxes, getSegmentVolumes } from "admin/admin_rest_api";
+import { useFetch } from "libs/react_helpers";
+import { AsyncIconButton } from "components/async_clickables";
 import { type AdditionalCoordinate } from "types/api_flow_types";
 
 type ContextMenuContextValue = React.MutableRefObject<HTMLElement | null> | null;
@@ -1084,6 +1088,9 @@ function getInfoMenuItem(
 }
 
 function ContextMenuInner(propsWithInputRef: Props) {
+  const [lastTimeSegmentInfoShouldBeFetched, setLastTimeSegmentInfoShouldBeFetched] = useState(
+    new Date(),
+  );
   const inputRef = useContext(ContextMenuContext);
   const { ...props } = propsWithInputRef;
   const {
@@ -1098,6 +1105,46 @@ function ContextMenuInner(propsWithInputRef: Props) {
     maybeViewport,
   } = props;
 
+  const segmentIdAtPosition = globalPosition != null ? getSegmentIdForPosition(globalPosition) : 0;
+  const { visibleSegmentationLayer, volumeTracing } = props;
+  const hasNoFallbackLayer =
+    visibleSegmentationLayer != null &&
+    "fallbackLayer" in visibleSegmentationLayer &&
+    visibleSegmentationLayer.fallbackLayer == null;
+  const [segmentVolume, boundingBoxInfo] = useFetch(
+    async () => {
+      if (contextMenuPosition == null || volumeTracing == null || !hasNoFallbackLayer) {
+        return [];
+      } else {
+        const tracingId = volumeTracing.tracingId;
+        const tracingStoreUrl = Store.getState().tracing.tracingStore.url;
+        const mag = getResolutionInfo(visibleSegmentationLayer.resolutions);
+        const [segmentSize] = await getSegmentVolumes(
+          tracingStoreUrl,
+          tracingId,
+          mag.getLowestResolution(),
+          [segmentIdAtPosition],
+        );
+        const [boundingBox] = await getSegmentBoundingBoxes(
+          tracingStoreUrl,
+          tracingId,
+          mag.getLowestResolution(),
+          [segmentIdAtPosition],
+        );
+        const boundingBoxTopLeftString = `(${boundingBox.topLeft[0]}, ${boundingBox.topLeft[1]}, ${boundingBox.topLeft[2]})`;
+        const boundingBoxSizeString = `(${boundingBox.width}, ${boundingBox.height}, ${boundingBox.depth})`;
+        return [
+          formatNumberToVolume(segmentSize),
+          `${boundingBoxTopLeftString}, ${boundingBoxSizeString}`,
+        ];
+      }
+    },
+    ["loading", "loading"],
+    // Update segment infos when opening the context menu, in case the annotation was saved since the context menu was last opened.
+    // Of course the info should also be updated when the menu is opened for another segment, or after the refresh button was pressed.
+    [contextMenuPosition, segmentIdAtPosition, lastTimeSegmentInfoShouldBeFetched],
+  );
+
   if (contextMenuPosition == null || maybeViewport == null) {
     return <></>;
   }
@@ -1138,7 +1185,6 @@ function ContextMenuInner(propsWithInputRef: Props) {
     nodeContextMenuNode != null
       ? positionToString(nodeContextMenuNode.position, nodeContextMenuNode.additionalCoordinates)
       : "";
-  const segmentIdAtPosition = globalPosition != null ? getSegmentIdForPosition(globalPosition) : 0;
   const infoRows = [];
 
   if (maybeClickedNodeId != null && nodeContextMenuTree != null) {
@@ -1175,6 +1221,53 @@ function ContextMenuInner(propsWithInputRef: Props) {
     );
   }
 
+  const handleRefreshSegmentVolume = async () => {
+    await api.tracing.save();
+    setLastTimeSegmentInfoShouldBeFetched(new Date());
+  };
+
+  const refreshButton = (
+    <Tooltip title="Update this statistic">
+      <AsyncIconButton
+        onClick={handleRefreshSegmentVolume}
+        type="primary"
+        icon={<ReloadOutlined />}
+        style={{ marginLeft: 4 }}
+      />
+    </Tooltip>
+  );
+
+  if (hasNoFallbackLayer) {
+    infoRows.push(
+      getInfoMenuItem(
+        "volumeInfo",
+        <>
+          <i className="fas fa-expand-alt segment-context-icon" />
+          Volume: {segmentVolume}
+          {copyIconWithTooltip(segmentVolume as string, "Copy volume")}
+          {refreshButton}
+        </>,
+      ),
+    );
+  }
+
+  if (hasNoFallbackLayer) {
+    infoRows.push(
+      getInfoMenuItem(
+        "boundingBoxPositionInfo",
+        <>
+          <i className="fas fa-dice-d6 segment-context-icon" />
+          <>Bounding Box: </>
+          <div style={{ marginLeft: 22, marginTop: -5 }}>
+            {boundingBoxInfo}
+            {copyIconWithTooltip(boundingBoxInfo as string, "Copy BBox top left point and extent")}
+            {refreshButton}
+          </div>
+        </>,
+      ),
+    );
+  }
+
   if (distanceToSelection != null) {
     infoRows.push(
       getInfoMenuItem(

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

@@ -173,7 +173,6 @@ type Props = {
   mapId: (arg0: number) => number;
   isJSONMappingEnabled: boolean;
   mappingInfo: ActiveMappingInfo;
-  isHoveredSegmentId: boolean;
   centeredSegmentId: number | null | undefined;
   selectedSegmentIds: number[] | null | undefined;
   activeCellId: number | null | undefined;
@@ -361,7 +360,6 @@ function _SegmentListItem({
   mapId,
   isJSONMappingEnabled,
   mappingInfo,
-  isHoveredSegmentId,
   centeredSegmentId,
   selectedSegmentIds,
   activeCellId,
@@ -392,6 +390,9 @@ function _SegmentListItem({
     (state: OxalisState) => getSegmentColorAsHSLA(state, mappedId),
     (a: Vector4, b: Vector4) => V4.isEqual(a, b),
   );
+  const isHoveredSegmentId = useSelector(
+    (state: OxalisState) => state.temporaryConfiguration.hoveredSegmentId === segment.id,
+  );
 
   const segmentColorRGBA = Utils.hslaToRgba(segmentColorHSLA);