Add UI for segment statistics (volume and bbox)

frontend/javascripts/admin/admin_rest_api.ts

@@ -958,14 +958,32 @@ export function getNewestVersionForTracing(
   );
 }
 
+export function getSegmentVolume(
+  tracingStoreUrl: string,
+  tracingId: string,
+  mag: Vector3,
+  segmentId: number,
+): Promise<number> {
+  return doWithToken((token) => {
+    const params = new URLSearchParams({
+      token: token,
+      mag: mag.join("-"),
+      segmentId: String(segmentId),
+    });
+    return Request.receiveJSON(
+      `${tracingStoreUrl}/tracings/volume/${tracingId}/segmentStatistics/volume?${params}`,
+    );
+  });
+}
+
 export async function importVolumeTracing(
   tracing: Tracing,
   volumeTracing: VolumeTracing,
   dataFile: File,
 ): Promise<number> {
   return doWithToken((token) =>
     Request.sendMultipartFormReceiveJSON(
-      `${tracing.tracingStore.url}/tracings/volume/${volumeTracing.tracingId}/importVolumeData?token=${token}`,
+      `${tracing.tracingStore.url}/tracings/volume/${volumeTracing}/importVolumeData?token=${token}`,
       {
         data: {
           dataFile,

frontend/javascripts/libs/format_utils.ts

@@ -144,6 +144,36 @@ export function formatNumberToLength(lengthInNm: number): string {
   return formatNumberToUnit(lengthInNm, nmFactorToUnit);
 }
 
+const nmFactorToUnit2D = new Map([
+  [1e-6, "pm²"],
+  [1, "nm²"],
+  [1e6, "µm²"],
+  [1e12, "mm²"],
+  [1e18, "m²"],
+  [1e24, "km²"],
+]);
+/* TODO: or rather: 
+const nmFactorToUnit2D = new Map(
+  Array.from(nmFactorToUnit).map((entry) => [Math.pow(entry[0], 2), entry[1].concat("²")]),
+); 
+Although I think that the explicit maps are better to read and it's better to have them stored rather than computing them every time they are needed.
+*/
+export function formatNumberToArea(lengthInNm2: number): string {
+  return formatNumberToUnit(lengthInNm2, nmFactorToUnit2D, true, 0);
+}
+
+const nmFactorToUnit3D = new Map([
+  [1e-9, "pm³"],
+  [1, "nm³"],
+  [1e9, "µm³"],
+  [1e18, "mm³"],
+  [1e27, "m³"],
+  [1e36, "km³"],
+]);
+export function formatNumberToVolume(lengthInNm3: number): string {
+  return formatNumberToUnit(lengthInNm3, nmFactorToUnit3D, true, 0);
+}
+
 const byteFactorToUnit = new Map([
   [1, "B"],
   [1e3, "KB"],

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 { getSegmentVolume } from "admin/admin_rest_api";
+import { useFetch } from "libs/react_helpers";
+import { AsyncIconButton } from "components/async_clickables";
 
 type ContextMenuContextValue = React.MutableRefObject<HTMLElement | null> | null;
 export const ContextMenuContext = createContext<ContextMenuContextValue>(null);
@@ -1093,6 +1097,7 @@ function getInfoMenuItem(
 }
 
 function ContextMenuInner(propsWithInputRef: Props) {
+  const [lastTimeVolumeWasFetched, setLastTimeVolumeWasFetched] = useState(new Date());
   const inputRef = useContext(ContextMenuContext);
   const { ...props } = propsWithInputRef;
   const {
@@ -1107,6 +1112,36 @@ 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 segmentSize = useFetch(
+    async () => {
+      if (visibleSegmentationLayer != null && volumeTracing != null) {
+        if (hasNoFallbackLayer) {
+          console.log(contextMenuPosition); //TODO
+          const tracingId = volumeTracing.tracingId;
+          const tracingStoreUrl = Store.getState().tracing.tracingStore.url;
+          const mag = getResolutionInfo(visibleSegmentationLayer.resolutions);
+          const segmentId = segmentIdAtPosition;
+          const segmentSize = await getSegmentVolume(
+            tracingStoreUrl,
+            tracingId,
+            mag.getHighestResolution(),
+            segmentId,
+          );
+          console.log(segmentSize);
+          return formatNumberToVolume(segmentSize);
+        }
+      }
+    },
+    "loading", //TODO make pretty with spinner
+    [contextMenuPosition, segmentIdAtPosition, lastTimeVolumeWasFetched],
+  );
+
   if (contextMenuPosition == null || maybeViewport == null) {
     return <></>;
   }
@@ -1143,7 +1178,6 @@ function ContextMenuInner(propsWithInputRef: Props) {
   const nodePositionAsString =
     // @ts-expect-error ts-migrate(2339) FIXME: Property 'position' does not exist on type 'never'... Remove this comment to see the full error message
     nodeContextMenuNode != null ? positionToString(nodeContextMenuNode.position) : "";
-  const segmentIdAtPosition = globalPosition != null ? getSegmentIdForPosition(globalPosition) : 0;
   const infoRows = [];
 
   if (maybeClickedNodeId != null && nodeContextMenuTree != null) {
@@ -1180,6 +1214,36 @@ function ContextMenuInner(propsWithInputRef: Props) {
     );
   }
 
+  const handleRefreshSegmentVolume = async () => {
+    await api.tracing.save();
+    setLastTimeVolumeWasFetched(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" />
+          Size: {segmentSize}
+          {copyIconWithTooltip(segmentSize as string, "Copy size")}
+          {refreshButton}
+        </>,
+      ),
+    );
+  }
+
   if (distanceToSelection != null) {
     infoRows.push(
       getInfoMenuItem(

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

@@ -0,0 +1,108 @@
+import { getSegmentVolume } from "admin/admin_rest_api";
+import { Modal, Table } from "antd";
+import { formatDateInLocalTimeZone } from "components/formatted_date";
+import saveAs from "file-saver";
+import { formatNumberToUnit, formatNumberToVolume } from "libs/format_utils";
+import { useFetch } from "libs/react_helpers";
+import { Unicode } from "oxalis/constants";
+import { getResolutionInfo } from "oxalis/model/accessors/dataset_accessor";
+import { Segment } from "oxalis/store";
+import React from "react";
+
+const SEGMENT_STATISTICS_CSV_HEADER = "groupId,segmendId,segmentName,volumeInVoxel,volumeInNm3";
+
+const { ThinSpace } = Unicode;
+
+type Props = {
+  onCancel: (...args: Array<any>) => any;
+  isOpen: boolean;
+  tracingId: any;
+  tracingStoreUrl: any;
+  visibleSegmentationLayer: any;
+  segments: Segment[];
+  group: number;
+};
+
+type SegmentInfo = {
+  segmentId: number;
+  segmentName: string;
+  groupId: number;
+  //groupName: string; TODO
+  volumeInNm3: number;
+  formattedSize: string;
+  volumeInVoxel: number;
+};
+
+const exportStatisticsToCSV = (segmentInformation: Array<SegmentInfo>) => {
+  if (segmentInformation.length < 0) {
+    return;
+  }
+  const segmentStatisticsAsString = segmentInformation
+    .map(
+      (segmentInfo) =>
+        `${segmentInfo.groupId},${segmentInfo.segmentId},${segmentInfo.segmentName},${segmentInfo.volumeInVoxel},${segmentInfo.volumeInNm3}`,
+    )
+    .join("\n");
+  const csv = [SEGMENT_STATISTICS_CSV_HEADER, segmentStatisticsAsString].join("\n");
+  const filename = `segmentStatistics-${new Date().toLocaleString().replace(/s/, "-")}.csv`; // TODO useful file naming
+  const blob = new Blob([csv], {
+    type: "text/plain;charset=utf-8",
+  });
+  saveAs(blob, filename);
+};
+
+export function SegmentStatisticsModal({
+  isOpen,
+  onCancel,
+  tracingId,
+  tracingStoreUrl,
+  visibleSegmentationLayer,
+  segments,
+  group,
+}: Props) {
+  console.log(tracingId);
+  const mag = getResolutionInfo(visibleSegmentationLayer.resolutions);
+  const nmFactorToUnit = new Map([[1, "nm³"]]);
+  const dataSource = useFetch(
+    async () => {
+      const volumeStrings = await segments.map(async (segment: Segment) => {
+        return getSegmentVolume(
+          tracingStoreUrl,
+          tracingId,
+          mag.getHighestResolution(),
+          segment.id,
+        ).then((vol) => {
+          const formattedSize = formatNumberToVolume(vol);
+          return {
+            segmentId: segment.id,
+            segmentName: segment.name == null ? `Segment ${segment.id}` : segment.name,
+            groupId: group,
+            volumeInVoxel: vol,
+            volumeInNm3: parseInt(formatNumberToUnit(vol, nmFactorToUnit).split(ThinSpace)[0]),
+            formattedSize: formattedSize,
+          };
+        });
+      });
+      return Promise.all(volumeStrings);
+    },
+    [], //TODO make pretty with spinner
+    [isOpen],
+  );
+  const columns = [
+    { title: "Segment", dataIndex: "segmentName", key: "segmentName" },
+    { title: "Volume", dataIndex: "formattedSize", key: "formattedSize" },
+  ];
+
+  return (
+    <Modal
+      title="Segment Statistics"
+      open={isOpen}
+      onCancel={onCancel}
+      style={{ marginRight: 10 }}
+      onOk={() => exportStatisticsToCSV(dataSource)}
+      okText="Export to CSV"
+    >
+      <Table dataSource={dataSource} columns={columns} />
+    </Modal>
+  );
+}