feat(segmentation mode): Add create, and export SEG with Brushes (#3632)

extensions/cornerstone-dicom-rt/src/index.tsx

@@ -2,7 +2,6 @@ import { id } from './id';
 import React from 'react';
 import { Types } from '@ohif/core';
 import getSopClassHandlerModule from './getSopClassHandlerModule';
-import hydrateRTDisplaySet from './utils/_hydrateRT';
 
 const Component = React.lazy(() => {
   return import(/* webpackPrefetch: true */ './viewports/OHIFCornerstoneRTViewport');
@@ -60,4 +59,3 @@ const extension: Types.Extensions.Extension = {
 };
 
 export default extension;
-export { hydrateRTDisplaySet };

extensions/cornerstone-dicom-rt/src/utils/_hydrateRT.ts

@@ -1,70 +0,0 @@
-async function _hydrateRTDisplaySet({ rtDisplaySet, viewportId, servicesManager }) {
-  const { segmentationService, hangingProtocolService, viewportGridService } =
-    servicesManager.services;
-
-  const displaySetInstanceUID = rtDisplaySet.referencedDisplaySetInstanceUID;
-
-  let segmentationId = null;
-
-  // We need the hydration to notify panels about the new segmentation added
-  const suppressEvents = false;
-
-  segmentationId = await segmentationService.createSegmentationForRTDisplaySet(
-    rtDisplaySet,
-    segmentationId,
-    suppressEvents
-  );
-
-  segmentationService.hydrateSegmentation(rtDisplaySet.displaySetInstanceUID);
-
-  const { viewports } = viewportGridService.getState();
-
-  const updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
-    viewportId,
-    displaySetInstanceUID
-  );
-
-  viewportGridService.setDisplaySetsForViewports(updatedViewports);
-
-  // Todo: fix this after we have a better way for stack viewport segmentations
-
-  // check every viewport in the viewports to see if the displaySetInstanceUID
-  // is being displayed, if so we need to update the viewport to use volume viewport
-  // (if already is not using it) since Cornerstone3D currently only supports
-  // volume viewport for segmentation
-  viewports.forEach(viewport => {
-    if (viewport.viewportId === viewportId) {
-      return;
-    }
-
-    const shouldDisplaySeg = segmentationService.shouldRenderSegmentation(
-      viewport.displaySetInstanceUIDs,
-      rtDisplaySet.displaySetInstanceUID
-    );
-
-    if (shouldDisplaySeg) {
-      updatedViewports.push({
-        viewportId: viewport.viewportId,
-        displaySetInstanceUIDs: viewport.displaySetInstanceUIDs,
-        viewportOptions: {
-          // Note: This is a hack to get the grid to re-render the OHIFCornerstoneViewport component
-          // Used for segmentation hydration right now, since the logic to decide whether
-          // a viewport needs to render a segmentation lives inside the CornerstoneViewportService
-          // so we need to re-render (force update via change of the needsRerendering) so that React
-          // does the diffing and decides we should render this again (although the id and element has not changed)
-          // so that the CornerstoneViewportService can decide whether to render the segmentation or not.
-          needsRerendering: true,
-          initialImageOptions: {
-            preset: 'middle',
-          },
-        },
-      });
-    }
-  });
-
-  // Do the entire update at once
-  viewportGridService.setDisplaySetsForViewports(updatedViewports);
-  return true;
-}
-
-export default _hydrateRTDisplaySet;

extensions/cornerstone-dicom-rt/src/utils/initRTToolGroup.ts

@@ -1,7 +1,7 @@
 function createRTToolGroupAndAddTools(ToolGroupService, customizationService, toolGroupId) {
   const { tools } = customizationService.get('cornerstone.overlayViewportTools') ?? {};
 
-  return ToolGroupService.createToolGroupAndAddTools(toolGroupId, tools, {});
+  return ToolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
 }
 
 export default createRTToolGroupAndAddTools;

extensions/cornerstone-dicom-rt/src/utils/promptHydrateRT.ts

@@ -1,5 +1,4 @@
 import { ButtonEnums } from '@ohif/ui';
-import hydrateRTDisplaySet from './_hydrateRT';
 
 const RESPONSE = {
   NO_NEVER: -1,
@@ -13,6 +12,7 @@ function promptHydrateRT({
   viewportId,
   toolGroupId = 'default',
   preHydrateCallbacks,
+  hydrateRTDisplaySet,
 }) {
   const { uiViewportDialogService } = servicesManager.services;
 

extensions/cornerstone-dicom-rt/src/viewports/OHIFCornerstoneRTViewport.tsx

@@ -3,11 +3,9 @@ import PropTypes from 'prop-types';
 import OHIF, { utils } from '@ohif/core';
 import { ViewportActionBar, useViewportGrid, LoadingIndicatorTotalPercent } from '@ohif/ui';
 
-import _hydrateRTdisplaySet from '../utils/_hydrateRT';
 import promptHydrateRT from '../utils/promptHydrateRT';
 import _getStatusComponent from './_getStatusComponent';
 import createRTToolGroupAndAddTools from '../utils/initRTToolGroup';
-import _hydrateRTDisplaySet from '../utils/_hydrateRT';
 
 const { formatDate } = utils;
 const RT_TOOLGROUP_BASE_NAME = 'RTToolGroup';
@@ -95,6 +93,13 @@ function OHIFCornerstoneRTViewport(props) {
     });
   }, [viewportGrid]);
 
+  const hydrateRTDisplaySet = ({ rtDisplaySet, viewportId }) => {
+    commandsManager.runCommand('loadSegmentationDisplaySetsForViewport', {
+      displaySets: [rtDisplaySet],
+      viewportId,
+    });
+  };
+
   const getCornerstoneViewport = useCallback(() => {
     const { component: Component } = extensionManager.getModuleEntry(
       '@ohif/extension-cornerstone.viewportModule.cornerstone'
@@ -154,6 +159,7 @@ function OHIFCornerstoneRTViewport(props) {
       viewportId,
       rtDisplaySet,
       preHydrateCallbacks: [storePresentationState],
+      hydrateRTDisplaySet,
     }).then(isHydrated => {
       if (isHydrated) {
         setIsHydrated(true);
@@ -295,10 +301,9 @@ function OHIFCornerstoneRTViewport(props) {
     // presentation state (w/l and invert) and then opens the RT. If we don't store
     // the presentation state, the viewport will be reset to the default presentation
     storePresentationState();
-    const isHydrated = await _hydrateRTDisplaySet({
+    const isHydrated = await hydrateRTDisplaySet({
       rtDisplaySet,
       viewportId,
-      servicesManager,
     });
 
     setIsHydrated(isHydrated);

extensions/cornerstone-dicom-seg/package.json

@@ -43,6 +43,7 @@
     "react-router-dom": "^6.8.1"
   },
   "dependencies": {
+    "@cornerstonejs/tools": "^1.16.4",
     "@babel/runtime": "^7.20.13",
     "react-color": "^2.19.3"
   }

extensions/cornerstone-dicom-seg/src/commandsModule.ts

@@ -0,0 +1,383 @@
+import dcmjs from 'dcmjs';
+import { createReportDialogPrompt } from '@ohif/extension-default';
+import { ServicesManager, Types } from '@ohif/core';
+import { cache, metaData } from '@cornerstonejs/core';
+import { segmentation as cornerstoneToolsSegmentation } from '@cornerstonejs/tools';
+import { adaptersSEG, helpers } from '@cornerstonejs/adapters';
+import { DicomMetadataStore } from '@ohif/core';
+
+import {
+  updateViewportsForSegmentationRendering,
+  getUpdatedViewportsForSegmentation,
+  getTargetViewport,
+} from './utils/hydrationUtils';
+
+const {
+  Cornerstone3D: {
+    Segmentation: { generateLabelMaps2DFrom3D, generateSegmentation },
+  },
+} = adaptersSEG;
+
+const { downloadDICOMData } = helpers;
+
+const commandsModule = ({
+  servicesManager,
+  extensionManager,
+}: Types.Extensions.ExtensionParams): Types.Extensions.CommandsModule => {
+  const {
+    uiNotificationService,
+    segmentationService,
+    uiDialogService,
+    displaySetService,
+    viewportGridService,
+  } = (servicesManager as ServicesManager).services;
+
+  const actions = {
+    /**
+     * Retrieves a list of viewports that require updates in preparation for segmentation rendering.
+     * This function evaluates viewports based on their compatibility with the provided segmentation's
+     * frame of reference UID and appends them to the updated list if they should render the segmentation.
+     *
+     * @param {Object} params - Parameters for the function.
+     * @param params.viewportId - the ID of the viewport to be updated.
+     * @param params.servicesManager - The services manager
+     * @param params.referencedDisplaySetInstanceUID - Optional UID for the referenced display set instance.
+     *
+     * @returns {Array} Returns an array of viewports that require updates for segmentation rendering.
+     */
+    getUpdatedViewportsForSegmentation,
+    /**
+     * Creates an empty segmentation for a specified viewport.
+     * It first checks if the display set associated with the viewport is reconstructable.
+     * If not, it raises a notification error. Otherwise, it creates a new segmentation
+     * for the display set after handling the necessary steps for making the viewport
+     * a volume viewport first
+     *
+     * @param {Object} params - Parameters for the function.
+     * @param params.viewportId - the target viewport ID.
+     *
+     */
+    createEmptySegmentationForViewport: async ({ viewportId }) => {
+      const viewport = getTargetViewport({ viewportId, viewportGridService });
+      // Todo: add support for multiple display sets
+      const displaySetInstanceUID = viewport.displaySetInstanceUIDs[0];
+
+      const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
+
+      if (!displaySet.isReconstructable) {
+        uiNotificationService.show({
+          title: 'Segmentation',
+          message: 'Segmentation is not supported for non-reconstructible displaysets yet',
+          type: 'error',
+        });
+        return;
+      }
+
+      updateViewportsForSegmentationRendering({
+        viewportId,
+        servicesManager,
+        loadFn: async () => {
+          const currentSegmentations = segmentationService.getSegmentations();
+          const segmentationId = await segmentationService.createSegmentationForDisplaySet(
+            displaySetInstanceUID,
+            { label: `Segmentation ${currentSegmentations.length + 1}` }
+          );
+
+          const toolGroupId = viewport.viewportOptions.toolGroupId;
+
+          await segmentationService.addSegmentationRepresentationToToolGroup(
+            toolGroupId,
+            segmentationId
+          );
+
+          // Add only one segment for now
+          segmentationService.addSegment(segmentationId, {
+            toolGroupId,
+            segmentIndex: 1,
+            properties: {
+              label: 'Segment 1',
+            },
+          });
+
+          return segmentationId;
+        },
+      });
+    },
+    /**
+     * Loads segmentations for a specified viewport.
+     * The function prepares the viewport for rendering, then loads the segmentation details.
+     * Additionally, if the segmentation has scalar data, it is set for the corresponding label map volume.
+     *
+     * @param {Object} params - Parameters for the function.
+     * @param params.segmentations - Array of segmentations to be loaded.
+     * @param params.viewportId - the target viewport ID.
+     *
+     */
+    loadSegmentationsForViewport: async ({ segmentations, viewportId }) => {
+      updateViewportsForSegmentationRendering({
+        viewportId,
+        servicesManager,
+        loadFn: async () => {
+          // Todo: handle adding more than one segmentation
+          const viewport = getTargetViewport({ viewportId, viewportGridService });
+          const displaySetInstanceUID = viewport.displaySetInstanceUIDs[0];
+
+          const segmentation = segmentations[0];
+          const segmentationId = segmentation.id;
+          const label = segmentation.label;
+          const segments = segmentation.segments;
+
+          delete segmentation.segments;
+
+          await segmentationService.createSegmentationForDisplaySet(displaySetInstanceUID, {
+            segmentationId,
+            label,
+          });
+
+          if (segmentation.scalarData) {
+            const labelmapVolume = segmentationService.getLabelmapVolume(segmentationId);
+            labelmapVolume.scalarData.set(segmentation.scalarData);
+          }
+
+          segmentationService.addOrUpdateSegmentation(segmentation);
+
+          const toolGroupId = viewport.viewportOptions.toolGroupId;
+          await segmentationService.addSegmentationRepresentationToToolGroup(
+            toolGroupId,
+            segmentationId
+          );
+
+          segments.forEach(segment => {
+            if (segment === null) {
+              return;
+            }
+            segmentationService.addSegment(segmentationId, {
+              segmentIndex: segment.segmentIndex,
+              toolGroupId,
+              properties: {
+                color: segment.color,
+                label: segment.label,
+                opacity: segment.opacity,
+                isLocked: segment.isLocked,
+                visibility: segment.isVisible,
+                active: segmentation.activeSegmentIndex === segment.segmentIndex,
+              },
+            });
+          });
+
+          if (segmentation.centroidsIJK) {
+            segmentationService.setCentroids(segmentation.id, segmentation.centroidsIJK);
+          }
+
+          return segmentationId;
+        },
+      });
+    },
+    /**
+     * Loads segmentation display sets for a specified viewport.
+     * Depending on the modality of the display set (SEG or RTSTRUCT),
+     * it chooses the appropriate service function to create
+     * the segmentation for the display set.
+     * The function then prepares the viewport for rendering segmentation.
+     *
+     * @param {Object} params - Parameters for the function.
+     * @param params.viewportId - ID of the viewport where the segmentation display sets should be loaded.
+     * @param params.displaySets - Array of display sets to be loaded for segmentation.
+     *
+     */
+    loadSegmentationDisplaySetsForViewport: async ({ viewportId, displaySets }) => {
+      // Todo: handle adding more than one segmentation
+      const displaySet = displaySets[0];
+
+      updateViewportsForSegmentationRendering({
+        viewportId,
+        servicesManager,
+        referencedDisplaySetInstanceUID: displaySet.referencedDisplaySetInstanceUID,
+        loadFn: async () => {
+          const segDisplaySet = displaySet;
+          const suppressEvents = false;
+          const serviceFunction =
+            segDisplaySet.Modality === 'SEG'
+              ? 'createSegmentationForSEGDisplaySet'
+              : 'createSegmentationForRTDisplaySet';
+
+          const boundFn = segmentationService[serviceFunction].bind(segmentationService);
+          const segmentationId = await boundFn(segDisplaySet, null, suppressEvents);
+
+          return segmentationId;
+        },
+      });
+    },
+    /**
+     * Generates a segmentation from a given segmentation ID.
+     * This function retrieves the associated segmentation and
+     * its referenced volume, extracts label maps from the
+     * segmentation volume, and produces segmentation data
+     * alongside associated metadata.
+     *
+     * @param {Object} params - Parameters for the function.
+     * @param params.segmentationId - ID of the segmentation to be generated.
+     * @param params.options - Optional configuration for the generation process.
+     *
+     * @returns Returns the generated segmentation data.
+     */
+    generateSegmentation: ({ segmentationId, options = {} }) => {
+      const segmentation = cornerstoneToolsSegmentation.state.getSegmentation(segmentationId);
+
+      const { referencedVolumeId } = segmentation.representationData.LABELMAP;
+
+      const segmentationVolume = cache.getVolume(segmentationId);
+      const referencedVolume = cache.getVolume(referencedVolumeId);
+      const referencedImages = referencedVolume.getCornerstoneImages();
+
+      const labelmapObj = generateLabelMaps2DFrom3D(segmentationVolume);
+
+      // Generate fake metadata as an example
+      labelmapObj.metadata = [];
+
+      const segmentationInOHIF = segmentationService.getSegmentation(segmentationId);
+      labelmapObj.segmentsOnLabelmap.forEach(segmentIndex => {
+        // segmentation service already has a color for each segment
+        const segment = segmentationInOHIF?.segments[segmentIndex];
+        const { label, color } = segment;
+
+        const RecommendedDisplayCIELabValue = dcmjs.data.Colors.rgb2DICOMLAB(
+          color.slice(0, 3).map(value => value / 255)
+        ).map(value => Math.round(value));
+
+        const segmentMetadata = {
+          SegmentNumber: segmentIndex.toString(),
+          SegmentLabel: label,
+          SegmentAlgorithmType: 'MANUAL',
+          SegmentAlgorithmName: 'OHIF Brush',
+          RecommendedDisplayCIELabValue,
+          SegmentedPropertyCategoryCodeSequence: {
+            CodeValue: 'T-D0050',
+            CodingSchemeDesignator: 'SRT',
+            CodeMeaning: 'Tissue',
+          },
+          SegmentedPropertyTypeCodeSequence: {
+            CodeValue: 'T-D0050',
+            CodingSchemeDesignator: 'SRT',
+            CodeMeaning: 'Tissue',
+          },
+        };
+        labelmapObj.metadata[segmentIndex] = segmentMetadata;
+      });
+
+      const generatedSegmentation = generateSegmentation(
+        referencedImages,
+        labelmapObj,
+        metaData,
+        options
+      );
+
+      return generatedSegmentation;
+    },
+    /**
+     * Downloads a segmentation based on the provided segmentation ID.
+     * This function retrieves the associated segmentation and
+     * uses it to generate the corresponding DICOM dataset, which
+     * is then downloaded with an appropriate filename.
+     *
+     * @param {Object} params - Parameters for the function.
+     * @param params.segmentationId - ID of the segmentation to be downloaded.
+     *
+     */
+    downloadSegmentation: ({ segmentationId }) => {
+      const segmentationInOHIF = segmentationService.getSegmentation(segmentationId);
+      const generatedSegmentation = actions.generateSegmentation({
+        segmentationId,
+      });
+
+      downloadDICOMData(generatedSegmentation.dataset, `${segmentationInOHIF.label}`);
+    },
+    /**
+     * Stores a segmentation based on the provided segmentationId into a specified data source.
+     * The SeriesDescription is derived from user input or defaults to the segmentation label,
+     * and in its absence, defaults to 'Research Derived Series'.
+     *
+     * @param {Object} params - Parameters for the function.
+     * @param params.segmentationId - ID of the segmentation to be stored.
+     * @param params.dataSource - Data source where the generated segmentation will be stored.
+     *
+     * @returns {Object|void} Returns the naturalized report if successfully stored,
+     * otherwise throws an error.
+     */
+    storeSegmentation: async ({ segmentationId, dataSource }) => {
+      const promptResult = await createReportDialogPrompt(uiDialogService, {
+        extensionManager,
+      });
+
+      if (promptResult.action !== 1 && promptResult.value) {
+        return;
+      }
+
+      const segmentation = segmentationService.getSegmentation(segmentationId);
+
+      if (!segmentation) {
+        throw new Error('No segmentation found');
+      }
+
+      const { label } = segmentation;
+      const SeriesDescription = promptResult.value || label || 'Research Derived Series';
+
+      const generatedData = actions.generateSegmentation({
+        segmentationId,
+        options: {
+          SeriesDescription,
+        },
+      });
+
+      if (!generatedData || !generatedData.dataset) {
+        throw new Error('Error during segmentation generation');
+      }
+
+      const { dataset: naturalizedReport } = generatedData;
+
+      await dataSource.store.dicom(naturalizedReport);
+
+      // The "Mode" route listens for DicomMetadataStore changes
+      // When a new instance is added, it listens and
+      // automatically calls makeDisplaySets
+
+      // add the information for where we stored it to the instance as well
+      naturalizedReport.wadoRoot = dataSource.getConfig().wadoRoot;
+
+      DicomMetadataStore.addInstances([naturalizedReport], true);
+
+      return naturalizedReport;
+    },
+  };
+
+  const definitions = {
+    getUpdatedViewportsForSegmentation: {
+      commandFn: actions.getUpdatedViewportsForSegmentation,
+    },
+    loadSegmentationDisplaySetsForViewport: {
+      commandFn: actions.loadSegmentationDisplaySetsForViewport,
+    },
+    loadSegmentationsForViewport: {
+      commandFn: actions.loadSegmentationsForViewport,
+    },
+    createEmptySegmentationForViewport: {
+      commandFn: actions.createEmptySegmentationForViewport,
+    },
+    generateSegmentation: {
+      commandFn: actions.generateSegmentation,
+    },
+    downloadSegmentation: {
+      commandFn: actions.downloadSegmentation,
+    },
+    storeSegmentation: {
+      commandFn: actions.storeSegmentation,
+    },
+  };
+
+  return {
+    actions,
+    definitions,
+  };
+};
+
+export default commandsModule;

extensions/cornerstone-dicom-seg/src/getPanelModule.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { useAppConfig } from '@state';
+import PanelSegmentation from './panels/PanelSegmentation';
+import SegmentationToolbox from './panels/SegmentationToolbox';
+
+const getPanelModule = ({ commandsManager, servicesManager, extensionManager, configuration }) => {
+  const { customizationService } = servicesManager.services;
+
+  const wrappedPanelSegmentation = configuration => {
+    const [appConfig] = useAppConfig();
+
+    const disableEditingForMode = customizationService.get('segmentation.disableEditing');
+
+    return (
+      <PanelSegmentation
+        commandsManager={commandsManager}
+        servicesManager={servicesManager}
+        extensionManager={extensionManager}
+        configuration={{
+          ...configuration,
+          disableEditing: appConfig.disableEditing || disableEditingForMode?.value,
+        }}
+      />
+    );
+  };
+
+  const wrappedPanelSegmentationWithTools = configuration => {
+    const [appConfig] = useAppConfig();
+    return (
+      <>
+        <SegmentationToolbox
+          commandsManager={commandsManager}
+          servicesManager={servicesManager}
+          extensionManager={extensionManager}
+          configuration={{
+            ...configuration,
+          }}
+        />
+        <PanelSegmentation
+          commandsManager={commandsManager}
+          servicesManager={servicesManager}
+          extensionManager={extensionManager}
+          configuration={{
+            ...configuration,
+          }}
+        />
+      </>
+    );
+  };
+
+  return [
+    {
+      name: 'panelSegmentation',
+      iconName: 'tab-segmentation',
+      iconLabel: 'Segmentation',
+      label: 'Segmentation',
+      component: wrappedPanelSegmentation,
+    },
+    {
+      name: 'panelSegmentationWithTools',
+      iconName: 'tab-segmentation',
+      iconLabel: 'Segmentation',
+      label: 'Segmentation',
+      component: wrappedPanelSegmentationWithTools,
+    },
+  ];
+};
+
+export default getPanelModule;

extensions/cornerstone-dicom-seg/src/getSopClassHandlerModule.js

@@ -60,7 +60,7 @@ function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager)
     throw new Error('ReferencedSeriesSequence is missing for the SEG');
   }
 
-  const referencedSeries = referencedSeriesSequence[0];
+  const referencedSeries = referencedSeriesSequence[0] || referencedSeriesSequence;
 
   displaySet.referencedImages = instance.ReferencedSeriesSequence.ReferencedInstanceSequence;
   displaySet.referencedSeriesInstanceUID = referencedSeries.SeriesInstanceUID;

extensions/cornerstone-dicom-seg/src/index.tsx

@@ -1,12 +1,11 @@
 import { id } from './id';
 import React from 'react';
 
-import { Types } from '@ohif/core';
-
 import getSopClassHandlerModule from './getSopClassHandlerModule';
-import PanelSegmentation from './panels/PanelSegmentation';
 import getHangingProtocolModule from './getHangingProtocolModule';
-import hydrateSEGDisplaySet from './utils/_hydrateSEG';
+import getPanelModule from './getPanelModule';
+import getCommandsModule from './commandsModule';
+import preRegistration from './init';
 
 const Component = React.lazy(() => {
   return import(/* webpackPrefetch: true */ './viewports/OHIFCornerstoneSEGViewport');
@@ -29,6 +28,7 @@ const extension = {
    * You ID can be anything you want, but it should be unique.
    */
   id,
+  preRegistration,
 
   /**
    * PanelModule should provide a list of panels that will be available in OHIF
@@ -36,27 +36,8 @@ const extension = {
    * iconName, iconLabel, label, component} object. Example of a panel module
    * is the StudyBrowserPanel that is provided by the default extension in OHIF.
    */
-  getPanelModule: ({ servicesManager, commandsManager, extensionManager }): Types.Panel[] => {
-    const wrappedPanelSegmentation = () => {
-      return (
-        <PanelSegmentation
-          commandsManager={commandsManager}
-          servicesManager={servicesManager}
-          extensionManager={extensionManager}
-        />
-      );
-    };
-
-    return [
-      {
-        name: 'panelSegmentation',
-        iconName: 'tab-segmentation',
-        iconLabel: 'Segmentation',
-        label: 'Segmentation',
-        component: wrappedPanelSegmentation,
-      },
-    ];
-  },
+  getPanelModule,
+  getCommandsModule,
 
   getViewportModule({ servicesManager, extensionManager }) {
     const ExtendedOHIFCornerstoneSEGViewport = props => {
@@ -83,4 +64,3 @@ const extension = {
 };
 
 export default extension;
-export { hydrateSEGDisplaySet };

extensions/cornerstone-dicom-seg/src/init.ts

@@ -0,0 +1,5 @@
+import { addTool, BrushTool } from '@cornerstonejs/tools';
+
+export default function init({ configuration = {} }): void {
+  addTool(BrushTool);
+}

extensions/cornerstone-dicom-seg/src/panels/PanelSegmentation.tsx

@@ -1,16 +1,22 @@
+import { createReportAsync } from '@ohif/extension-default';
 import React, { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { SegmentationGroupTable } from '@ohif/ui';
+
 import callInputDialog from './callInputDialog';
-import { useAppConfig } from '@state';
+import callColorPickerDialog from './colorPickerDialog';
 import { useTranslation } from 'react-i18next';
 
-export default function PanelSegmentation({ servicesManager, commandsManager }) {
-  const { segmentationService, uiDialogService } = servicesManager.services;
-  const [appConfig] = useAppConfig();
-  const disableEditing = appConfig?.disableEditing;
+export default function PanelSegmentation({
+  servicesManager,
+  commandsManager,
+  extensionManager,
+  configuration,
+}) {
+  const { segmentationService, viewportGridService, uiDialogService } = servicesManager.services;
 
   const { t } = useTranslation('PanelSegmentation');
+
   const [selectedSegmentationId, setSelectedSegmentationId] = useState(null);
   const [segmentationConfiguration, setSegmentationConfiguration] = useState(
     segmentationService.getConfiguration()
@@ -18,29 +24,6 @@ export default function PanelSegmentation({ servicesManager, commandsManager })
 
   const [segmentations, setSegmentations] = useState(() => segmentationService.getSegmentations());
 
-  const [isMinimized, setIsMinimized] = useState({});
-
-  const onToggleMinimizeSegmentation = useCallback(
-    id => {
-      setIsMinimized(prevState => ({
-        ...prevState,
-        [id]: !prevState[id],
-      }));
-    },
-    [setIsMinimized]
-  );
-
-  // Only expand the last segmentation added to the list and collapse the rest
-  useEffect(() => {
-    const lastSegmentationId = segmentations[segmentations.length - 1]?.id;
-    if (lastSegmentationId) {
-      setIsMinimized(prevState => ({
-        ...prevState,
-        [lastSegmentationId]: false,
-      }));
-    }
-  }, [segmentations, setIsMinimized]);
-
   useEffect(() => {
     // ~~ Subscription
     const added = segmentationService.EVENTS.SEGMENTATION_ADDED;
@@ -64,6 +47,16 @@ export default function PanelSegmentation({ servicesManager, commandsManager })
     };
   }, []);
 
+  const getToolGroupIds = segmentationId => {
+    const toolGroupIds = segmentationService.getToolGroupIdsWithSegmentation(segmentationId);
+
+    return toolGroupIds;
+  };
+
+  const onSegmentationAdd = async () => {
+    commandsManager.runCommand('createEmptySegmentationForViewport');
+  };
+
   const onSegmentationClick = (segmentationId: string) => {
     segmentationService.setActiveSegmentationForToolGroup(segmentationId);
   };
@@ -72,14 +65,12 @@ export default function PanelSegmentation({ servicesManager, commandsManager })
     segmentationService.remove(segmentationId);
   };
 
-  const getToolGroupIds = segmentationId => {
-    const toolGroupIds = segmentationService.getToolGroupIdsWithSegmentation(segmentationId);
-
-    return toolGroupIds;
+  const onSegmentAdd = segmentationId => {
+    segmentationService.addSegment(segmentationId);
   };
 
   const onSegmentClick = (segmentationId, segmentIndex) => {
-    segmentationService.setActiveSegmentForSegmentation(segmentationId, segmentIndex);
+    segmentationService.setActiveSegment(segmentationId, segmentIndex);
 
     const toolGroupIds = getToolGroupIds(segmentationId);
 
@@ -101,7 +92,7 @@ export default function PanelSegmentation({ servicesManager, commandsManager })
         return;
       }
 
-      segmentationService.setSegmentLabelForSegmentation(segmentationId, segmentIndex, label);
+      segmentationService.setSegmentLabel(segmentationId, segmentIndex, label);
     });
   };
 
@@ -126,16 +117,34 @@ export default function PanelSegmentation({ servicesManager, commandsManager })
   };
 
   const onSegmentColorClick = (segmentationId, segmentIndex) => {
-    // Todo: Implement color picker later
-    return;
+    const segmentation = segmentationService.getSegmentation(segmentationId);
+
+    const segment = segmentation.segments[segmentIndex];
+    const { color, opacity } = segment;
+
+    const rgbaColor = {
+      r: color[0],
+      g: color[1],
+      b: color[2],
+      a: opacity / 255.0,
+    };
+
+    callColorPickerDialog(uiDialogService, rgbaColor, (newRgbaColor, actionId) => {
+      if (actionId === 'cancel') {
+        return;
+      }
+
+      segmentationService.setSegmentRGBAColor(segmentationId, segmentIndex, [
+        newRgbaColor.r,
+        newRgbaColor.g,
+        newRgbaColor.b,
+        newRgbaColor.a * 255.0,
+      ]);
+    });
   };
 
   const onSegmentDelete = (segmentationId, segmentIndex) => {
-    // segmentationService.removeSegmentFromSegmentation(
-    //   segmentationId,
-    //   segmentIndex
-    // );
-    console.warn('not implemented yet');
+    segmentationService.removeSegment(segmentationId, segmentIndex);
   };
 
   const onToggleSegmentVisibility = (segmentationId, segmentIndex) => {
@@ -155,6 +164,10 @@ export default function PanelSegmentation({ servicesManager, commandsManager })
     });
   };
 
+  const onToggleSegmentLock = (segmentationId, segmentIndex) => {
+    segmentationService.toggleSegmentLocked(segmentationId, segmentIndex);
+  };
+
   const onToggleSegmentationVisibility = segmentationId => {
     segmentationService.toggleSegmentationVisibility(segmentationId);
   };
@@ -169,27 +182,62 @@ export default function PanelSegmentation({ servicesManager, commandsManager })
     [segmentationService]
   );
 
+  const onSegmentationDownload = segmentationId => {
+    commandsManager.runCommand('downloadSegmentation', {
+      segmentationId,
+    });
+  };
+
+  const storeSegmentation = async segmentationId => {
+    const datasources = extensionManager.getActiveDataSource();
+
+    const displaySetInstanceUIDs = await createReportAsync({
+      servicesManager,
+      getReport: () =>
+        commandsManager.runCommand('storeSegmentation', {
+          segmentationId,
+          dataSource: datasources[0],
+        }),
+      reportType: 'Segmentation',
+    });
+
+    // Show the exported report in the active viewport as read only (similar to SR)
+    if (displaySetInstanceUIDs) {
+      // clear the segmentation that we exported, similar to the storeMeasurement
+      // where we remove the measurements and prompt again the user if they would like
+      // to re-read the measurements in a SR read only viewport
+      segmentationService.remove(segmentationId);
+
+      viewportGridService.setDisplaySetsForViewport({
+        viewportId: viewportGridService.getActiveViewportId(),
+        displaySetInstanceUIDs,
+      });
+    }
+  };
+
   return (
-    <div className="mt-1 flex min-h-0 flex-auto flex-col justify-between">
-      {/* show segmentation table */}
-      {segmentations?.length ? (
+    <>
+      <div className="flex min-h-0 flex-auto select-none flex-col justify-between">
         <SegmentationGroupTable
           title={t('Segmentations')}
-          showAddSegmentation={false}
           segmentations={segmentations}
-          isMinimized={isMinimized}
+          disableEditing={configuration.disableEditing}
           activeSegmentationId={selectedSegmentationId || ''}
+          onSegmentationAdd={onSegmentationAdd}
           onSegmentationClick={onSegmentationClick}
           onSegmentationDelete={onSegmentationDelete}
+          onSegmentationDownload={onSegmentationDownload}
+          storeSegmentation={storeSegmentation}
           onSegmentationEdit={onSegmentationEdit}
           onSegmentClick={onSegmentClick}
           onSegmentEdit={onSegmentEdit}
-          disableEditing={disableEditing}
+          onSegmentAdd={onSegmentAdd}
           onSegmentColorClick={onSegmentColorClick}
           onSegmentDelete={onSegmentDelete}
           onToggleSegmentVisibility={onToggleSegmentVisibility}
+          onToggleSegmentLock={onToggleSegmentLock}
           onToggleSegmentationVisibility={onToggleSegmentationVisibility}
-          onToggleMinimizeSegmentation={onToggleMinimizeSegmentation}
+          showDeleteSegment={true}
           segmentationConfig={{ initialConfig: segmentationConfiguration }}
           setRenderOutline={value =>
             _setSegmentationConfiguration(selectedSegmentationId, 'renderOutline', value)
@@ -217,8 +265,8 @@ export default function PanelSegmentation({ servicesManager, commandsManager })
             _setSegmentationConfiguration(selectedSegmentationId, 'fillAlphaInactive', value)
           }
         />
-      ) : null}
-    </div>
+      </div>
+    </>
   );
 }
 

extensions/cornerstone-dicom-seg/src/panels/SegmentationToolbox.tsx

@@ -0,0 +1,405 @@
+import React, { useCallback, useEffect, useState, useReducer } from 'react';
+import { AdvancedToolbox, InputDoubleRange, useViewportGrid } from '@ohif/ui';
+import { Types } from '@ohif/extension-cornerstone';
+import { utilities } from '@cornerstonejs/tools';
+
+const { segmentation: segmentationUtils } = utilities;
+
+const TOOL_TYPES = {
+  CIRCULAR_BRUSH: 'CircularBrush',
+  SPHERE_BRUSH: 'SphereBrush',
+  CIRCULAR_ERASER: 'CircularEraser',
+  SPHERE_ERASER: 'SphereEraser',
+  CIRCLE_SCISSOR: 'CircleScissor',
+  RECTANGLE_SCISSOR: 'RectangleScissor',
+  SPHERE_SCISSOR: 'SphereScissor',
+  THRESHOLD_CIRCULAR_BRUSH: 'ThresholdCircularBrush',
+  THRESHOLD_SPHERE_BRUSH: 'ThresholdSphereBrush',
+};
+
+const ACTIONS = {
+  SET_TOOL_CONFIG: 'SET_TOOL_CONFIG',
+  SET_ACTIVE_TOOL: 'SET_ACTIVE_TOOL',
+};
+
+const initialState = {
+  Brush: {
+    brushSize: 15,
+    mode: 'CircularBrush', // Can be 'CircularBrush' or 'SphereBrush'
+  },
+  Eraser: {
+    brushSize: 15,
+    mode: 'CircularEraser', // Can be 'CircularEraser' or 'SphereEraser'
+  },
+  Scissors: {
+    brushSize: 15,
+    mode: 'CircleScissor', // E.g., 'CircleScissor', 'RectangleScissor', or 'SphereScissor'
+  },
+  ThresholdBrush: {
+    brushSize: 15,
+    thresholdRange: [-500, 500],
+  },
+  activeTool: null,
+};
+
+function toolboxReducer(state, action) {
+  switch (action.type) {
+    case ACTIONS.SET_TOOL_CONFIG:
+      const { tool, config } = action.payload;
+      return {
+        ...state,
+        [tool]: {
+          ...state[tool],
+          ...config,
+        },
+      };
+    case ACTIONS.SET_ACTIVE_TOOL:
+      return { ...state, activeTool: action.payload };
+    default:
+      return state;
+  }
+}
+
+function SegmentationToolbox({ servicesManager, extensionManager }) {
+  const { toolbarService, segmentationService, toolGroupService } =
+    servicesManager.services as Types.CornerstoneServices;
+
+  const [viewportGrid] = useViewportGrid();
+  const { viewports, activeViewportId } = viewportGrid;
+
+  const [toolsEnabled, setToolsEnabled] = useState(false);
+  const [state, dispatch] = useReducer(toolboxReducer, initialState);
+
+  const updateActiveTool = useCallback(() => {
+    if (!viewports?.size || activeViewportId === undefined) {
+      return;
+    }
+    const viewport = viewports.get(activeViewportId);
+
+    if (!viewport) {
+      return;
+    }
+
+    dispatch({
+      type: ACTIONS.SET_ACTIVE_TOOL,
+      payload: toolGroupService.getActiveToolForViewport(viewport.viewportId),
+    });
+  }, [activeViewportId, viewports, toolGroupService, dispatch]);
+
+  const setToolActive = useCallback(
+    toolName => {
+      toolbarService.recordInteraction({
+        interactionType: 'tool',
+        commands: [
+          {
+            commandName: 'setToolActive',
+            commandOptions: {
+              toolName,
+            },
+          },
+        ],
+      });
+
+      dispatch({ type: ACTIONS.SET_ACTIVE_TOOL, payload: toolName });
+    },
+    [toolbarService, dispatch]
+  );
+
+  /**
+   * sets the tools enabled IF there are segmentations
+   */
+  useEffect(() => {
+    const events = [
+      segmentationService.EVENTS.SEGMENTATION_ADDED,
+      segmentationService.EVENTS.SEGMENTATION_UPDATED,
+      segmentationService.EVENTS.SEGMENTATION_REMOVED,
+    ];
+
+    const unsubscriptions = [];
+
+    events.forEach(event => {
+      const { unsubscribe } = segmentationService.subscribe(event, () => {
+        const segmentations = segmentationService.getSegmentations();
+
+        const activeSegmentation = segmentations?.find(seg => seg.isActive);
+
+        setToolsEnabled(activeSegmentation?.segmentCount > 0);
+      });
+
+      unsubscriptions.push(unsubscribe);
+    });
+
+    updateActiveTool();
+
+    return () => {
+      unsubscriptions.forEach(unsubscribe => unsubscribe());
+    };
+  }, [activeViewportId, viewports, segmentationService, updateActiveTool]);
+
+  /**
+   * Update the active tool when the toolbar state changes
+   */
+  useEffect(() => {
+    const { unsubscribe } = toolbarService.subscribe(
+      toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
+      () => {
+        updateActiveTool();
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [toolbarService, updateActiveTool]);
+
+  useEffect(() => {
+    // if the active tool is not a brush tool then do nothing
+    if (!Object.values(TOOL_TYPES).includes(state.activeTool)) {
+      return;
+    }
+
+    // if the tool is Segmentation and it is enabled then do nothing
+    if (toolsEnabled) {
+      return;
+    }
+
+    // if the tool is Segmentation and it is disabled, then switch
+    // back to the window level tool to not confuse the user when no
+    // segmentation is active or when there is no segment in the segmentation
+    setToolActive('WindowLevel');
+  }, [toolsEnabled, state.activeTool, setToolActive]);
+
+  const updateBrushSize = useCallback(
+    (toolName, brushSize) => {
+      toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
+        segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize, toolName);
+      });
+    },
+    [toolGroupService]
+  );
+
+  const onBrushSizeChange = useCallback(
+    (valueAsStringOrNumber, toolCategory) => {
+      const value = Number(valueAsStringOrNumber);
+
+      _getToolNamesFromCategory(toolCategory).forEach(toolName => {
+        updateBrushSize(toolName, value);
+      });
+
+      dispatch({
+        type: ACTIONS.SET_TOOL_CONFIG,
+        payload: {
+          tool: toolCategory,
+          config: { brushSize: value },
+        },
+      });
+    },
+    [toolGroupService, dispatch]
+  );
+
+  const handleRangeChange = useCallback(
+    newRange => {
+      if (
+        newRange[0] === state.ThresholdBrush.thresholdRange[0] &&
+        newRange[1] === state.ThresholdBrush.thresholdRange[1]
+      ) {
+        return;
+      }
+
+      const toolNames = _getToolNamesFromCategory('ThresholdBrush');
+
+      toolNames.forEach(toolName => {
+        toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
+          const toolGroup = toolGroupService.getToolGroup(toolGroupId);
+          toolGroup.setToolConfiguration(toolName, {
+            strategySpecificConfiguration: {
+              THRESHOLD_INSIDE_CIRCLE: {
+                threshold: newRange,
+              },
+            },
+          });
+        });
+      });
+
+      dispatch({
+        type: ACTIONS.SET_TOOL_CONFIG,
+        payload: {
+          tool: 'ThresholdBrush',
+          config: { thresholdRange: newRange },
+        },
+      });
+    },
+    [toolGroupService, dispatch, state.ThresholdBrush.thresholdRange]
+  );
+
+  return (
+    <AdvancedToolbox
+      title="Segmentation Tools"
+      items={[
+        {
+          name: 'Brush',
+          icon: 'icon-tool-brush',
+          disabled: !toolsEnabled,
+          active:
+            state.activeTool === TOOL_TYPES.CIRCULAR_BRUSH ||
+            state.activeTool === TOOL_TYPES.SPHERE_BRUSH,
+          onClick: () => setToolActive(TOOL_TYPES.CIRCULAR_BRUSH),
+          options: [
+            {
+              name: 'Radius (mm)',
+              id: 'brush-radius',
+              type: 'range',
+              min: 0.01,
+              max: 100,
+              value: state.Brush.brushSize,
+              step: 0.5,
+              onChange: value => onBrushSizeChange(value, 'Brush'),
+            },
+            {
+              name: 'Mode',
+              type: 'radio',
+              id: 'brush-mode',
+              value: state.Brush.mode,
+              values: [
+                { value: TOOL_TYPES.CIRCULAR_BRUSH, label: 'Circle' },
+                { value: TOOL_TYPES.SPHERE_BRUSH, label: 'Sphere' },
+              ],
+              onChange: value => setToolActive(value),
+            },
+          ],
+        },
+        {
+          name: 'Eraser',
+          icon: 'icon-tool-eraser',
+          disabled: !toolsEnabled,
+          active:
+            state.activeTool === TOOL_TYPES.CIRCULAR_ERASER ||
+            state.activeTool === TOOL_TYPES.SPHERE_ERASER,
+          onClick: () => setToolActive(TOOL_TYPES.CIRCULAR_ERASER),
+          options: [
+            {
+              name: 'Radius (mm)',
+              type: 'range',
+              id: 'eraser-radius',
+              min: 0.01,
+              max: 100,
+              value: state.Eraser.brushSize,
+              step: 0.5,
+              onChange: value => onBrushSizeChange(value, 'Eraser'),
+            },
+            {
+              name: 'Mode',
+              type: 'radio',
+              id: 'eraser-mode',
+              value: state.Eraser.mode,
+              values: [
+                { value: TOOL_TYPES.CIRCULAR_ERASER, label: 'Circle' },
+                { value: TOOL_TYPES.SPHERE_ERASER, label: 'Sphere' },
+              ],
+              onChange: value => setToolActive(value),
+            },
+          ],
+        },
+        {
+          name: 'Scissor',
+          icon: 'icon-tool-scissor',
+          disabled: !toolsEnabled,
+          active:
+            state.activeTool === TOOL_TYPES.CIRCLE_SCISSOR ||
+            state.activeTool === TOOL_TYPES.RECTANGLE_SCISSOR ||
+            state.activeTool === TOOL_TYPES.SPHERE_SCISSOR,
+          onClick: () => setToolActive(TOOL_TYPES.CIRCLE_SCISSOR),
+          options: [
+            {
+              name: 'Mode',
+              type: 'radio',
+              value: state.Scissors.mode,
+              id: 'scissor-mode',
+              values: [
+                { value: TOOL_TYPES.CIRCLE_SCISSOR, label: 'Circle' },
+                { value: TOOL_TYPES.RECTANGLE_SCISSOR, label: 'Rectangle' },
+                { value: TOOL_TYPES.SPHERE_SCISSOR, label: 'Sphere' },
+              ],
+              onChange: value => setToolActive(value),
+            },
+          ],
+        },
+        {
+          name: 'Threshold Tool',
+          icon: 'icon-tool-threshold',
+          disabled: !toolsEnabled,
+          active:
+            state.activeTool === TOOL_TYPES.THRESHOLD_CIRCULAR_BRUSH ||
+            state.activeTool === TOOL_TYPES.THRESHOLD_SPHERE_BRUSH,
+          onClick: () => setToolActive(TOOL_TYPES.THRESHOLD_CIRCULAR_BRUSH),
+          options: [
+            {
+              name: 'Radius (mm)',
+              id: 'threshold-radius',
+              type: 'range',
+              min: 0.01,
+              max: 100,
+              value: state.ThresholdBrush.brushSize,
+              step: 0.5,
+              onChange: value => onBrushSizeChange(value, 'ThresholdBrush'),
+            },
+            {
+              name: 'Mode',
+              type: 'radio',
+              id: 'threshold-mode',
+              value: state.activeTool,
+              values: [
+                { value: TOOL_TYPES.THRESHOLD_CIRCULAR_BRUSH, label: 'Circle' },
+                { value: TOOL_TYPES.THRESHOLD_SPHERE_BRUSH, label: 'Sphere' },
+              ],
+              onChange: value => setToolActive(value),
+            },
+            {
+              type: 'custom',
+              id: 'segmentation-threshold-range',
+              children: () => {
+                return (
+                  <div>
+                    <div className="bg-secondary-light h-[1px]"></div>
+                    <div className="mt-1 text-[13px] text-white">Threshold</div>
+                    <InputDoubleRange
+                      values={state.ThresholdBrush.thresholdRange}
+                      onChange={handleRangeChange}
+                      minValue={-1000}
+                      maxValue={1000}
+                      step={1}
+                      showLabel={true}
+                      allowNumberEdit={true}
+                      showAdjustmentArrows={false}
+                    />
+                  </div>
+                );
+              },
+            },
+          ],
+        },
+      ]}
+    />
+  );
+}
+
+function _getToolNamesFromCategory(category) {
+  let toolNames = [];
+  switch (category) {
+    case 'Brush':
+      toolNames = ['CircularBrush', 'SphereBrush'];
+      break;
+    case 'Eraser':
+      toolNames = ['CircularEraser', 'SphereEraser'];
+      break;
+    case 'ThresholdBrush':
+      toolNames = ['ThresholdCircularBrush', 'ThresholdSphereBrush'];
+      break;
+    default:
+      break;
+  }
+
+  return toolNames;
+}
+
+export default SegmentationToolbox;

extensions/cornerstone-dicom-seg/src/panels/colorPickerDialog.css

@@ -0,0 +1,3 @@
+.chrome-picker {
+  background: #090c29 !important;
+}

extensions/cornerstone-dicom-seg/src/panels/colorPickerDialog.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Dialog } from '@ohif/ui';
+import { ChromePicker } from 'react-color';
+
+import './colorPickerDialog.css';
+
+function callColorPickerDialog(uiDialogService, rgbaColor, callback) {
+  const dialogId = 'pick-color';
+
+  const onSubmitHandler = ({ action, value }) => {
+    switch (action.id) {
+      case 'save':
+        callback(value.rgbaColor, action.id);
+        break;
+      case 'cancel':
+        callback('', action.id);
+        break;
+    }
+    uiDialogService.dismiss({ id: dialogId });
+  };
+
+  if (uiDialogService) {
+    uiDialogService.create({
+      id: dialogId,
+      centralize: true,
+      isDraggable: false,
+      showOverlay: true,
+      content: Dialog,
+      contentProps: {
+        title: 'Segment Color',
+        value: { rgbaColor },
+        noCloseButton: true,
+        onClose: () => uiDialogService.dismiss({ id: dialogId }),
+        actions: [
+          { id: 'cancel', text: 'Cancel', type: 'primary' },
+          { id: 'save', text: 'Save', type: 'secondary' },
+        ],
+        onSubmit: onSubmitHandler,
+        body: ({ value, setValue }) => {
+          const handleChange = color => {
+            setValue({ rgbaColor: color.rgb });
+          };
+
+          return (
+            <ChromePicker
+              color={value.rgbaColor}
+              onChange={handleChange}
+              presetColors={[]}
+              width={300}
+            />
+          );
+        },
+      },
+    });
+  }
+}
+
+export default callColorPickerDialog;

extensions/cornerstone-dicom-seg/src/utils/_hydrateSEG.ts

@@ -1,73 +0,0 @@
-async function _hydrateSEGDisplaySet({
-  segDisplaySet,
-  viewportId: targetViewportId,
-  servicesManager,
-}) {
-  const { segmentationService, hangingProtocolService, viewportGridService } =
-    servicesManager.services;
-
-  const displaySetInstanceUID = segDisplaySet.referencedDisplaySetInstanceUID;
-
-  let segmentationId = null;
-
-  // We need the hydration to notify panels about the new segmentation added
-  const suppressEvents = false;
-
-  segmentationId = await segmentationService.createSegmentationForSEGDisplaySet(
-    segDisplaySet,
-    segmentationId,
-    suppressEvents
-  );
-
-  segmentationService.hydrateSegmentation(segDisplaySet.displaySetInstanceUID);
-
-  const { viewports } = viewportGridService.getState();
-
-  const updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
-    targetViewportId,
-    displaySetInstanceUID
-  );
-
-  // Todo: fix this after we have a better way for stack viewport segmentations
-
-  // check every viewport in the viewports to see if the displaySetInstanceUID
-  // is being displayed, if so we need to update the viewport to use volume viewport
-  // (if already is not using it) since Cornerstone3D currently only supports
-  // volume viewport for segmentation
-  viewports.forEach((viewport, viewportId) => {
-    if (targetViewportId === viewportId) {
-      return;
-    }
-
-    const shouldDisplaySeg = segmentationService.shouldRenderSegmentation(
-      viewport.displaySetInstanceUIDs,
-      segDisplaySet.displaySetInstanceUID
-    );
-
-    if (shouldDisplaySeg) {
-      updatedViewports.push({
-        viewportId,
-        displaySetInstanceUIDs: viewport.displaySetInstanceUIDs,
-        viewportOptions: {
-          // Note: This is a hack to get the grid to re-render the OHIFCornerstoneViewport component
-          // Used for segmentation hydration right now, since the logic to decide whether
-          // a viewport needs to render a segmentation lives inside the CornerstoneViewportService
-          // so we need to re-render (force update via change of the needsRerendering) so that React
-          // does the diffing and decides we should render this again (although the id and element has not changed)
-          // so that the CornerstoneViewportService can decide whether to render the segmentation or not.
-          needsRerendering: true,
-          initialImageOptions: {
-            preset: 'middle',
-          },
-        },
-      });
-    }
-  });
-
-  // Do the entire update at once
-  viewportGridService.setDisplaySetsForViewports(updatedViewports);
-
-  return true;
-}
-
-export default _hydrateSEGDisplaySet;

extensions/cornerstone-dicom-seg/src/utils/hydrationUtils.ts

@@ -0,0 +1,190 @@
+import { Enums, cache } from '@cornerstonejs/core';
+
+/**
+ * Updates the viewports in preparation for rendering segmentations.
+ * Evaluates each viewport to determine which need modifications,
+ * then for those viewports, changes them to a volume type and ensures
+ * they are ready for segmentation rendering.
+ *
+ * @param {Object} params - Parameters for the function.
+ * @param params.viewportId - ID of the viewport to be updated.
+ * @param params.loadFn - Function to load the segmentation data.
+ * @param params.servicesManager - The services manager.
+ * @param params.referencedDisplaySetInstanceUID - Optional UID for the referenced display set instance.
+ *
+ * @returns Returns true upon successful update of viewports for segmentation rendering.
+ */
+async function updateViewportsForSegmentationRendering({
+  viewportId,
+  loadFn,
+  servicesManager,
+  referencedDisplaySetInstanceUID,
+}: {
+  viewportId: string;
+  loadFn: () => Promise<string>;
+  servicesManager: any;
+  referencedDisplaySetInstanceUID?: string;
+}) {
+  const { cornerstoneViewportService, segmentationService, viewportGridService } =
+    servicesManager.services;
+
+  const viewport = getTargetViewport({ viewportId, viewportGridService });
+  const targetViewportId = viewport.viewportOptions.viewportId;
+
+  referencedDisplaySetInstanceUID =
+    referencedDisplaySetInstanceUID || viewport?.displaySetInstanceUIDs[0];
+
+  const updatedViewports = getUpdatedViewportsForSegmentation({
+    servicesManager,
+    viewportId,
+    referencedDisplaySetInstanceUID,
+  });
+
+  // create Segmentation callback which needs to be waited until
+  // the volume is created (if coming from stack)
+  const createSegmentationForVolume = async () => {
+    const segmentationId = await loadFn();
+    segmentationService.hydrateSegmentation(segmentationId);
+  };
+
+  // the reference volume that is used to draw the segmentation. so check if the
+  // volume exists in the cache (the target Viewport is already a volume viewport)
+  const volumeExists = Array.from(cache._volumeCache.keys()).some(volumeId =>
+    volumeId.includes(referencedDisplaySetInstanceUID)
+  );
+
+  updatedViewports.forEach(async viewport => {
+    viewport.viewportOptions = {
+      ...viewport.viewportOptions,
+      viewportType: 'volume',
+      needsRerendering: true,
+    };
+    const viewportId = viewport.viewportId;
+
+    const csViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+    const prevCamera = csViewport.getCamera();
+
+    // only run the createSegmentationForVolume for the targetViewportId
+    // since the rest will get handled by cornerstoneViewportService
+    if (volumeExists && viewportId === targetViewportId) {
+      await createSegmentationForVolume();
+      return;
+    }
+
+    const createNewSegmentationWhenVolumeMounts = async evt => {
+      const isTheActiveViewportVolumeMounted = evt.detail.volumeActors?.find(ac =>
+        ac.uid.includes(referencedDisplaySetInstanceUID)
+      );
+
+      // Note: make sure to re-grab the viewport since it might have changed
+      // during the time it took for the volume to be mounted, for instance
+      // the stack viewport has been changed to a volume viewport
+      const volumeViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+      volumeViewport.setCamera(prevCamera);
+
+      volumeViewport.element.removeEventListener(
+        Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
+        createNewSegmentationWhenVolumeMounts
+      );
+
+      if (!isTheActiveViewportVolumeMounted) {
+        // it means it is one of those other updated viewports so just update the camera
+        return;
+      }
+
+      if (viewportId === targetViewportId) {
+        await createSegmentationForVolume();
+      }
+    };
+
+    csViewport.element.addEventListener(
+      Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
+      createNewSegmentationWhenVolumeMounts
+    );
+  });
+
+  // Set the displaySets for the viewports that require to be updated
+  viewportGridService.setDisplaySetsForViewports(updatedViewports);
+
+  return true;
+}
+
+const getTargetViewport = ({ viewportId, viewportGridService }) => {
+  const { viewports, activeViewportId } = viewportGridService.getState();
+  const targetViewportId = viewportId || activeViewportId;
+
+  const viewport = viewports.get(targetViewportId);
+
+  return viewport;
+};
+
+/**
+ * Retrieves a list of viewports that require updates in preparation for segmentation rendering.
+ * This function evaluates viewports based on their compatibility with the provided segmentation's
+ * frame of reference UID and appends them to the updated list if they should render the segmentation.
+ *
+ * @param {Object} params - Parameters for the function.
+ * @param params.viewportId - the ID of the viewport to be updated.
+ * @param params.servicesManager - The services manager
+ * @param params.referencedDisplaySetInstanceUID - Optional UID for the referenced display set instance.
+ *
+ * @returns {Array} Returns an array of viewports that require updates for segmentation rendering.
+ */
+function getUpdatedViewportsForSegmentation({
+  viewportId,
+  servicesManager,
+  referencedDisplaySetInstanceUID,
+}) {
+  const { hangingProtocolService, displaySetService, segmentationService, viewportGridService } =
+    servicesManager.services;
+
+  const { viewports } = viewportGridService.getState();
+
+  const viewport = getTargetViewport({ viewportId, viewportGridService });
+  const targetViewportId = viewport.viewportOptions.viewportId;
+
+  const displaySetInstanceUIDs = viewports.get(targetViewportId).displaySetInstanceUIDs;
+
+  const referenceDisplaySetInstanceUID =
+    referencedDisplaySetInstanceUID || displaySetInstanceUIDs[0];
+
+  const referencedDisplaySet = displaySetService.getDisplaySetByUID(referenceDisplaySetInstanceUID);
+  const segmentationFrameOfReferenceUID = referencedDisplaySet.instances[0].FrameOfReferenceUID;
+
+  const updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
+    targetViewportId,
+    referenceDisplaySetInstanceUID
+  );
+
+  viewports.forEach((viewport, viewportId) => {
+    if (
+      targetViewportId === viewportId ||
+      updatedViewports.find(v => v.viewportId === viewportId)
+    ) {
+      return;
+    }
+
+    const shouldDisplaySeg = segmentationService.shouldRenderSegmentation(
+      viewport.displaySetInstanceUIDs,
+      segmentationFrameOfReferenceUID
+    );
+
+    if (shouldDisplaySeg) {
+      updatedViewports.push({
+        viewportId,
+        displaySetInstanceUIDs: viewport.displaySetInstanceUIDs,
+        viewportOptions: {
+          viewportType: 'volume',
+          needsRerendering: true,
+        },
+      });
+    }
+  });
+  return updatedViewports;
+}
+
+export {
+  updateViewportsForSegmentationRendering,
+  getUpdatedViewportsForSegmentation,
+  getTargetViewport,
+};

extensions/cornerstone-dicom-seg/src/utils/initSEGToolGroup.ts

@@ -1,7 +1,7 @@
 function createSEGToolGroupAndAddTools(ToolGroupService, customizationService, toolGroupId) {
   const { tools } = customizationService.get('cornerstone.overlayViewportTools') ?? {};
 
-  return ToolGroupService.createToolGroupAndAddTools(toolGroupId, tools, {});
+  return ToolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
 }
 
 export default createSEGToolGroupAndAddTools;

extensions/cornerstone-dicom-seg/src/utils/promptHydrateSEG.ts

@@ -1,5 +1,4 @@
 import { ButtonEnums } from '@ohif/ui';
-import hydrateSEGDisplaySet from './_hydrateSEG';
 
 const RESPONSE = {
   NO_NEVER: -1,
@@ -7,7 +6,13 @@ const RESPONSE = {
   HYDRATE_SEG: 5,
 };
 
-function promptHydrateSEG({ servicesManager, segDisplaySet, viewportId, preHydrateCallbacks }) {
+function promptHydrateSEG({
+  servicesManager,
+  segDisplaySet,
+  viewportId,
+  preHydrateCallbacks,
+  hydrateSEGDisplaySet,
+}) {
   const { uiViewportDialogService } = servicesManager.services;
 
   return new Promise(async function (resolve, reject) {
@@ -21,7 +26,6 @@ function promptHydrateSEG({ servicesManager, segDisplaySet, viewportId, preHydra
       const isHydrated = await hydrateSEGDisplaySet({
         segDisplaySet,
         viewportId,
-        servicesManager,
       });
 
       resolve(isHydrated);

extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.tsx

@@ -5,7 +5,6 @@ import OHIF, { utils } from '@ohif/core';
 import { LoadingIndicatorTotalPercent, useViewportGrid, ViewportActionBar } from '@ohif/ui';
 import createSEGToolGroupAndAddTools from '../utils/initSEGToolGroup';
 import promptHydrateSEG from '../utils/promptHydrateSEG';
-import hydrateSEGDisplaySet from '../utils/_hydrateSEG';
 import _getStatusComponent from './_getStatusComponent';
 
 const { formatDate } = utils;
@@ -158,6 +157,7 @@ function OHIFCornerstoneSEGViewport(props) {
       viewportId,
       segDisplaySet,
       preHydrateCallbacks: [storePresentationState],
+      hydrateSEGDisplaySet,
     }).then(isHydrated => {
       if (isHydrated) {
         setIsHydrated(true);
@@ -291,6 +291,13 @@ function OHIFCornerstoneSEGViewport(props) {
     SpacingBetweenSlices,
   } = referencedDisplaySetRef.current.metadata;
 
+  const hydrateSEGDisplaySet = ({ segDisplaySet, viewportId }) => {
+    commandsManager.runCommand('loadSegmentationDisplaySetsForViewport', {
+      displaySets: [segDisplaySet],
+      viewportId,
+    });
+  };
+
   const onStatusClick = async () => {
     // Before hydrating a SEG and make it added to all viewports in the grid
     // that share the same frameOfReferenceUID, we need to store the viewport grid
@@ -302,7 +309,6 @@ function OHIFCornerstoneSEGViewport(props) {
     const isHydrated = await hydrateSEGDisplaySet({
       segDisplaySet,
       viewportId,
-      servicesManager,
     });
 
     setIsHydrated(isHydrated);
@@ -369,12 +375,18 @@ OHIFCornerstoneSEGViewport.defaultProps = {
 };
 
 function _getReferencedDisplaySetMetadata(referencedDisplaySet, segDisplaySet) {
-  const {
-    SharedFunctionalGroupsSequence: [SharedFunctionalGroup],
-  } = segDisplaySet.instance;
-  const {
-    PixelMeasuresSequence: [PixelMeasures],
-  } = SharedFunctionalGroup;
+  const { SharedFunctionalGroupsSequence } = segDisplaySet.instance;
+
+  const SharedFunctionalGroup = Array.isArray(SharedFunctionalGroupsSequence)
+    ? SharedFunctionalGroupsSequence[0]
+    : SharedFunctionalGroupsSequence;
+
+  const { PixelMeasuresSequence } = SharedFunctionalGroup;
+
+  const PixelMeasures = Array.isArray(PixelMeasuresSequence)
+    ? PixelMeasuresSequence[0]
+    : PixelMeasuresSequence;
+
   const { SpacingBetweenSlices, SliceThickness } = PixelMeasures;
 
   const image0 = referencedDisplaySet.images[0];

extensions/cornerstone-dicom-sr/src/viewports/OHIFCornerstoneSRViewport.tsx

@@ -240,7 +240,7 @@ function OHIFCornerstoneSRViewport(props) {
     const onDisplaySetsRemovedSubscription = displaySetService.subscribe(
       displaySetService.EVENTS.DISPLAY_SETS_REMOVED,
       ({ displaySetInstanceUIDs }) => {
-        const activeViewport = viewports[activeViewportId];
+        const activeViewport = viewports.get(activeViewportId);
         if (displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)) {
           viewportGridService.setDisplaySetsForViewport({
             viewportId: activeViewportId,

extensions/cornerstone/src/commandsModule.ts

@@ -18,7 +18,6 @@ import toggleStackImageSync from './utils/stackSync/toggleStackImageSync';
 import { getFirstAnnotationSelected } from './utils/measurementServiceMappings/utils/selection';
 import getActiveViewportEnabledElement from './utils/getActiveViewportEnabledElement';
 import { CornerstoneServices } from './types';
-import ImageOverlayViewerTool from './tools/ImageOverlayViewerTool';
 
 function commandsModule({
   servicesManager,
@@ -266,7 +265,6 @@ function commandsModule({
     toolbarServiceRecordInteraction: props => {
       toolbarService.recordInteraction(props);
     },
-
     setToolActive: ({ toolName, toolGroupId = null, toggledState }) => {
       if (toolName === 'Crosshairs') {
         const activeViewportToolGroup = toolGroupService.getToolGroup(null);

extensions/cornerstone/src/components/CinePlayer/CinePlayer.tsx

@@ -13,12 +13,12 @@ function WrappedCinePlayer({ enabledVPElement, viewportId, servicesManager }) {
   const handleCineClose = () => {
     toolbarService.recordInteraction({
       groupId: 'MoreTools',
-      itemId: 'cine',
       interactionType: 'toggle',
       commands: [
         {
           commandName: 'toggleCine',
           commandOptions: {},
+          toolName: 'cine',
           context: 'CORNERSTONE',
         },
       ],

extensions/cornerstone/src/index.tsx

@@ -137,7 +137,7 @@ const cornerstoneExtension: Types.Extensions.Extension = {
 export type { PublicViewportOptions };
 export {
   measurementMappingUtils,
-  CornerstoneExtensionTypes,
+  CornerstoneExtensionTypes as Types,
   toolNames,
   getActiveViewportEnabledElement,
 };

extensions/cornerstone/src/initContextMenu.ts

@@ -18,6 +18,7 @@ const DEFAULT_CONTEXT_MENU_CLICKS = {
       {
         commandName: 'showCornerstoneContextMenu',
         commandOptions: {
+          requireNearbyToolData: true,
           menuId: 'measurementsContextMenu',
         },
       },
@@ -62,8 +63,20 @@ function initContextMenu({
     const customizations =
       customizationService.get('cornerstoneViewportClickCommands') || DEFAULT_CONTEXT_MENU_CLICKS;
     const toRun = customizations[name];
+
+    if (!toRun) {
+      return;
+    }
+
+    // only find nearbyToolData if required, for the click (which closes the context menu
+    // we don't need to find nearbyToolData)
+    let nearbyToolData = null;
+    if (toRun.commands.some(command => command.commandOptions?.requireNearbyToolData)) {
+      nearbyToolData = findNearbyToolData(commandsManager, evt);
+    }
+
     const options = {
-      nearbyToolData: findNearbyToolData(commandsManager, evt),
+      nearbyToolData,
       event: evt,
     };
     commandsManager.run(toRun, options);

extensions/cornerstone/src/initCornerstoneTools.js

@@ -25,6 +25,9 @@ import {
   annotation,
   ReferenceLinesTool,
   TrackballRotateTool,
+  CircleScissorsTool,
+  RectangleScissorsTool,
+  SphereScissorsTool,
 } from '@cornerstonejs/tools';
 
 import CalibrationLineTool from './tools/CalibrationLineTool';
@@ -59,6 +62,9 @@ export default function initCornerstoneTools(configuration = {}) {
   addTool(ReferenceLinesTool);
   addTool(CalibrationLineTool);
   addTool(TrackballRotateTool);
+  addTool(CircleScissorsTool);
+  addTool(RectangleScissorsTool);
+  addTool(SphereScissorsTool);
   addTool(ImageOverlayViewerTool);
 
   // Modify annotation tools to use dashed lines on SR
@@ -101,6 +107,9 @@ const toolNames = {
   ReferenceLines: ReferenceLinesTool.toolName,
   CalibrationLine: CalibrationLineTool.toolName,
   TrackballRotateTool: TrackballRotateTool.toolName,
+  CircleScissors: CircleScissorsTool.toolName,
+  RectangleScissors: RectangleScissorsTool.toolName,
+  SphereScissors: SphereScissorsTool.toolName,
   ImageOverlayViewer: ImageOverlayViewerTool.toolName,
 };
 

extensions/cornerstone/src/services/CornerstoneCacheService/CornerstoneCacheService.ts

@@ -210,7 +210,7 @@ class CornerstoneCacheService {
   }
 
   private _shouldRenderSegmentation(displaySets) {
-    const { segmentationService } = this.servicesManager.services;
+    const { segmentationService, displaySetService } = this.servicesManager.services;
 
     const viewportDisplaySetInstanceUIDs = displaySets.map(
       ({ displaySetInstanceUID }) => displaySetInstanceUID
@@ -222,10 +222,11 @@ class CornerstoneCacheService {
 
     for (const segmentation of segmentations) {
       const segDisplaySetInstanceUID = segmentation.displaySetInstanceUID;
+      const segDisplaySet = displaySetService.getDisplaySetByUID(segDisplaySetInstanceUID);
 
       const shouldDisplaySeg = segmentationService.shouldRenderSegmentation(
         viewportDisplaySetInstanceUIDs,
-        segDisplaySetInstanceUID
+        segDisplaySet.instances[0].FrameOfReferenceUID
       );
 
       if (shouldDisplaySeg) {

extensions/cornerstone/src/services/SegmentationService/SegmentationService.ts

@@ -99,43 +99,51 @@ class SegmentationService extends PubSubService {
   };
 
   /**
-   * It adds a segment to a segmentation, basically just setting the properties for
-   * the segment.
-   * @param segmentationId - The ID of the segmentation you want to add a
-   * segment to.
-   * @param segmentIndex - The index of the segment to add.
-   * @param properties - The properties of the segment to add including
-   * -- label: the label of the segment
-   * -- color: the color of the segment
-   * -- opacity: the opacity of the segment
-   * -- visibility: the visibility of the segment (boolean)
-   * -- isLocked: whether the segment is locked for editing
-   * -- active: whether the segment is currently the active segment to be edited
+   * Adds a new segment to the specified segmentation.
+   * @param segmentationId - The ID of the segmentation to add the segment to.
+   * @param config - An object containing the configuration options for the new segment.
+   *   - segmentIndex: (optional) The index of the segment to add. If not provided, the next available index will be used.
+   *   - toolGroupId: (optional) The ID of the tool group to associate the new segment with. If not provided, the first available tool group will be used.
+   *   - properties: (optional) An object containing the properties of the new segment.
+   *     - label: (optional) The label of the new segment. If not provided, a default label will be used.
+   *     - color: (optional) The color of the new segment in RGB format. If not provided, a default color will be used.
+   *     - opacity: (optional) The opacity of the new segment. If not provided, a default opacity will be used.
+   *     - visibility: (optional) Whether the new segment should be visible. If not provided, the segment will be visible by default.
+   *     - isLocked: (optional) Whether the new segment should be locked for editing. If not provided, the segment will not be locked by default.
+   *     - active: (optional) Whether the new segment should be the active segment to be edited. If not provided, the segment will not be active by default.
    */
   public addSegment(
     segmentationId: string,
-    segmentIndex: number,
-    toolGroupId?: string,
-    properties?: {
-      label?: string;
-      color?: ohifTypes.RGB;
-      opacity?: number;
-      visibility?: boolean;
-      isLocked?: boolean;
-      active?: boolean;
-    }
+    config: {
+      segmentIndex?: number;
+      toolGroupId?: string;
+      properties?: {
+        label?: string;
+        color?: ohifTypes.RGB;
+        opacity?: number;
+        visibility?: boolean;
+        isLocked?: boolean;
+        active?: boolean;
+      };
+    } = {}
   ): void {
-    if (segmentIndex === 0) {
+    if (config?.segmentIndex === 0) {
       throw new Error('Segment index 0 is reserved for "no label"');
     }
 
-    toolGroupId = toolGroupId ?? this._getFirstToolGroupId();
+    const toolGroupId = config.toolGroupId ?? this._getFirstToolGroupId();
 
     const { segmentationRepresentationUID, segmentation } = this._getSegmentationInfo(
       segmentationId,
       toolGroupId
     );
 
+    let segmentIndex = config.segmentIndex;
+    if (!segmentIndex) {
+      // grab the next available segment index
+      segmentIndex = segmentation.segments.length === 0 ? 1 : segmentation.segments.length;
+    }
+
     if (this._getSegmentInfo(segmentation, segmentIndex)) {
       throw new Error(`Segment ${segmentIndex} already exists`);
     }
@@ -147,7 +155,7 @@ class SegmentationService extends PubSubService {
     );
 
     segmentation.segments[segmentIndex] = {
-      label: properties.label,
+      label: config.properties?.label ?? `Segment ${segmentIndex}`,
       segmentIndex: segmentIndex,
       color: [rgbaColor[0], rgbaColor[1], rgbaColor[2]],
       opacity: rgbaColor[3],
@@ -157,9 +165,12 @@ class SegmentationService extends PubSubService {
 
     segmentation.segmentCount++;
 
+    // make the newly added segment the active segment
+    this._setActiveSegment(segmentationId, segmentIndex);
+
     const suppressEvents = true;
-    if (properties !== undefined) {
-      const { color: newColor, opacity, isLocked, visibility, active } = properties;
+    if (config.properties !== undefined) {
+      const { color: newColor, opacity, isLocked, visibility, active } = config.properties;
 
       if (newColor !== undefined) {
         this._setSegmentColor(segmentationId, segmentIndex, newColor, toolGroupId, suppressEvents);
@@ -281,17 +292,21 @@ class SegmentationService extends PubSubService {
     );
   }
 
-  public setSegmentLockedForSegmentation(
-    segmentationId: string,
-    segmentIndex: number,
-    isLocked: boolean
-  ): void {
+  public setSegmentLocked(segmentationId: string, segmentIndex: number, isLocked: boolean): void {
     const suppressEvents = false;
     this._setSegmentLocked(segmentationId, segmentIndex, isLocked, suppressEvents);
   }
 
-  public setSegmentLabel(segmentationId: string, segmentIndex: number, segmentLabel: string): void {
-    this._setSegmentLabel(segmentationId, segmentIndex, segmentLabel);
+  /**
+   * Toggles the locked state of a segment in a segmentation.
+   * @param segmentationId - The ID of the segmentation.
+   * @param segmentIndex - The index of the segment to toggle.
+   */
+  public toggleSegmentLocked(segmentationId: string, segmentIndex: number): void {
+    const segmentation = this.getSegmentation(segmentationId);
+    const segment = this._getSegmentInfo(segmentation, segmentIndex);
+    const isLocked = !segment.isLocked;
+    this._setSegmentLocked(segmentationId, segmentIndex, isLocked);
   }
 
   public setSegmentColor(
@@ -353,7 +368,7 @@ class SegmentationService extends PubSubService {
     this._setActiveSegmentationForToolGroup(segmentationId, toolGroupId, suppressEvents);
   }
 
-  public setActiveSegmentForSegmentation(segmentationId: string, segmentIndex: number): void {
+  public setActiveSegment(segmentationId: string, segmentIndex: number): void {
     this._setActiveSegment(segmentationId, segmentIndex, false);
   }
 
@@ -434,12 +449,14 @@ class SegmentationService extends PubSubService {
       },
     ]);
 
-    // Define a new color LUT and associate it with this segmentation.
-    // Todo: need to be generalized to accept custom color LUTs
-    const newColorLUT = this.generateNewColorLUT();
-    const newColorLUTIndex = this.getNextColorLUTIndex();
-
-    cstSegmentation.config.color.addColorLUT(newColorLUT, newColorLUTIndex);
+    // if first segmentation, we can use the default colorLUT, otherwise
+    // we need to generate a new one and use a new colorLUT
+    const colorLUTIndex = 0;
+    if (Object.keys(this.segmentations).length !== 0) {
+      const newColorLUT = this.generateNewColorLUT();
+      const colorLUTIndex = this.getNextColorLUTIndex();
+      cstSegmentation.config.color.addColorLUT(newColorLUT, colorLUTIndex);
+    }
 
     this.segmentations[segmentationId] = {
       ...segmentation,
@@ -448,8 +465,8 @@ class SegmentationService extends PubSubService {
       activeSegmentIndex: segmentation.activeSegmentIndex ?? null,
       segmentCount: segmentation.segmentCount ?? 0,
       isActive: false,
-      colorLUTIndex: newColorLUTIndex,
       isVisible: true,
+      colorLUTIndex,
     };
 
     cachedSegmentation = this.segmentations[segmentationId];
@@ -736,6 +753,97 @@ class SegmentationService extends PubSubService {
     return this.addOrUpdateSegmentation(segmentation, suppressEvents);
   }
 
+  // Todo: this should not run on the main thread
+  public calculateCentroids = (
+    segmentationId: string,
+    segmentIndex?: number
+  ): Map<number, { x: number; y: number; z: number; world: number[] }> => {
+    const segmentation = this.getSegmentation(segmentationId);
+    const volume = this.getLabelmapVolume(segmentationId);
+    const { dimensions, imageData } = volume;
+    const scalarData = volume.getScalarData();
+    const [dimX, dimY, numFrames] = dimensions;
+    const frameLength = dimX * dimY;
+
+    const segmentIndices = segmentIndex
+      ? [segmentIndex]
+      : segmentation.segments
+          .filter(segment => segment?.segmentIndex)
+          .map(segment => segment.segmentIndex);
+
+    const segmentIndicesSet = new Set(segmentIndices);
+
+    const centroids = new Map();
+    for (const index of segmentIndicesSet) {
+      centroids.set(index, { x: 0, y: 0, z: 0, count: 0 });
+    }
+
+    let voxelIndex = 0;
+    for (let frame = 0; frame < numFrames; frame++) {
+      for (let p = 0; p < frameLength; p++) {
+        const segmentIndex = scalarData[voxelIndex++];
+        if (segmentIndicesSet.has(segmentIndex)) {
+          const centroid = centroids.get(segmentIndex);
+          centroid.x += p % dimX;
+          centroid.y += (p / dimX) | 0;
+          centroid.z += frame;
+          centroid.count++;
+        }
+      }
+    }
+
+    const result = new Map();
+    for (const [index, centroid] of centroids) {
+      const count = centroid.count;
+      const normalizedCentroid = {
+        x: centroid.x / count,
+        y: centroid.y / count,
+        z: centroid.z / count,
+      };
+      normalizedCentroid.world = imageData.indexToWorld([
+        normalizedCentroid.x,
+        normalizedCentroid.y,
+        normalizedCentroid.z,
+      ]);
+      result.set(index, normalizedCentroid);
+    }
+
+    this.setCentroids(segmentationId, result);
+    return result;
+  };
+
+  private setCentroids = (
+    segmentationId: string,
+    centroids: Map<number, { image: number[]; world?: number[] }>
+  ): void => {
+    const segmentation = this.getSegmentation(segmentationId);
+    const imageData = this.getLabelmapVolume(segmentationId).imageData; // Assuming this method returns imageData
+
+    if (!segmentation.cachedStats) {
+      segmentation.cachedStats = { segmentCenter: {} };
+    } else if (!segmentation.cachedStats.segmentCenter) {
+      segmentation.cachedStats.segmentCenter = {};
+    }
+
+    for (const [segmentIndex, centroid] of centroids) {
+      let world = centroid.world;
+
+      // If world coordinates are not provided, calculate them
+      if (!world || world.length === 0) {
+        world = imageData.indexToWorld(centroid.image);
+      }
+
+      segmentation.cachedStats.segmentCenter[segmentIndex] = {
+        center: {
+          image: centroid.image,
+          world: world,
+        },
+      };
+    }
+
+    this.addOrUpdateSegmentation(segmentation, true, true);
+  };
+
   public jumpToSegmentCenter(
     segmentationId: string,
     segmentIndex: number,
@@ -749,6 +857,10 @@ class SegmentationService extends PubSubService {
     const { toolGroupService } = this.servicesManager.services;
     const center = this._getSegmentCenter(segmentationId, segmentIndex);
 
+    if (!center?.world) {
+      return;
+    }
+
     const { world } = center;
 
     // todo: generalize
@@ -831,6 +943,7 @@ class SegmentationService extends PubSubService {
     displaySetInstanceUID: string,
     options?: {
       segmentationId: string;
+      FrameOfReferenceUID: string;
       label: string;
     }
   ): Promise<string> => {
@@ -865,6 +978,8 @@ class SegmentationService extends PubSubService {
       // We should set it as active by default, as it created for display
       isActive: true,
       type: representationType,
+      FrameOfReferenceUID:
+        options?.FrameOfReferenceUID || displaySet.instances?.[0]?.FrameOfReferenceUID,
       representationData: {
         LABELMAP: {
           volumeId: segmentationId,
@@ -892,7 +1007,8 @@ class SegmentationService extends PubSubService {
     toolGroupId: string,
     segmentationId: string,
     hydrateSegmentation = false,
-    representationType = csToolsEnums.SegmentationRepresentations.Labelmap
+    representationType = csToolsEnums.SegmentationRepresentations.Labelmap,
+    suppressEvents = false
   ): Promise<void> => {
     const segmentation = this.getSegmentation(segmentationId);
 
@@ -959,13 +1075,19 @@ class SegmentationService extends PubSubService {
         );
       }
 
-      if (isLocked !== undefined) {
+      if (isLocked) {
         this._setSegmentLocked(segmentationId, segmentIndex, isLocked, suppressEvents);
       }
     }
+
+    if (!suppressEvents) {
+      this._broadcastEvent(this.EVENTS.SEGMENTATION_UPDATED, {
+        segmentation,
+      });
+    }
   };
 
-  public setSegmentRGBAColorForSegmentation = (
+  public setSegmentRGBAColor = (
     segmentationId: string,
     segmentIndex: number,
     rgbaColor,
@@ -1008,11 +1130,11 @@ class SegmentationService extends PubSubService {
     if (!segmentation) {
       throw new Error(`Segmentation with segmentationId ${segmentationId} not found.`);
     }
-
-    this._setDisplaySetIsHydrated(segmentationId, true);
-
     segmentation.hydrated = true;
 
+    // Not all segmentations have dipslaysets, some of them are derived in the client
+    this._setDisplaySetIsHydrated(segmentationId, true);
+
     if (!suppressEvents) {
       this._broadcastEvent(this.EVENTS.SEGMENTATION_UPDATED, {
         segmentation,
@@ -1021,8 +1143,13 @@ class SegmentationService extends PubSubService {
   };
 
   private _setDisplaySetIsHydrated(displaySetUID: string, isHydrated: boolean): void {
-    const { DisplaySetService: displaySetService } = this.servicesManager.services;
+    const { displaySetService } = this.servicesManager.services;
     const displaySet = displaySetService.getDisplaySetByUID(displaySetUID);
+
+    if (!displaySet) {
+      return;
+    }
+
     displaySet.isHydrated = isHydrated;
     displaySetService.setDisplaySetMetadataInvalidated(displaySetUID, false);
   }
@@ -1167,7 +1294,6 @@ class SegmentationService extends PubSubService {
     }
 
     const { colorLUTIndex } = segmentation;
-
     this._removeSegmentationFromCornerstone(segmentationId);
 
     // Delete associated colormap
@@ -1181,8 +1307,12 @@ class SegmentationService extends PubSubService {
     if (wasActive) {
       const remainingSegmentations = this._getSegmentations();
 
-      if (remainingSegmentations.length) {
-        const { id } = remainingSegmentations[0];
+      const remainingHydratedSegmentations = remainingSegmentations.filter(
+        segmentation => segmentation.hydrated
+      );
+
+      if (remainingHydratedSegmentations.length) {
+        const { id } = remainingHydratedSegmentations[0];
 
         this._setActiveSegmentationForToolGroup(id, this._getFirstToolGroupId(), false);
       }
@@ -1312,15 +1442,11 @@ class SegmentationService extends PubSubService {
     return cstSegmentation.state.getSegmentationRepresentations(toolGroupId);
   };
 
-  public setSegmentLabelForSegmentation(
-    segmentationId: string,
-    segmentIndex: number,
-    label: string
-  ) {
-    this._setSegmentLabelForSegmentation(segmentationId, segmentIndex, label);
+  public setSegmentLabel(segmentationId: string, segmentIndex: number, label: string) {
+    this._setSegmentLabel(segmentationId, segmentIndex, label);
   }
 
-  private _setSegmentLabelForSegmentation(
+  private _setSegmentLabel(
     segmentationId: string,
     segmentIndex: number,
     label: string,
@@ -1348,8 +1474,8 @@ class SegmentationService extends PubSubService {
     }
   }
 
-  public shouldRenderSegmentation(viewportDisplaySetInstanceUIDs, segDisplaySetInstanceUID) {
-    if (!viewportDisplaySetInstanceUIDs || !viewportDisplaySetInstanceUIDs.length) {
+  public shouldRenderSegmentation(viewportDisplaySetInstanceUIDs, segmentationFrameOfReferenceUID) {
+    if (!viewportDisplaySetInstanceUIDs?.length) {
       return false;
     }
 
@@ -1357,10 +1483,6 @@ class SegmentationService extends PubSubService {
 
     let shouldDisplaySeg = false;
 
-    const segDisplaySet = displaySetService.getDisplaySetByUID(segDisplaySetInstanceUID);
-
-    const segFrameOfReferenceUID = this._getFrameOfReferenceUIDForSeg(segDisplaySet);
-
     // check if the displaySet is sharing the same frameOfReferenceUID
     // with the new segmentation
     for (const displaySetInstanceUID of viewportDisplaySetInstanceUIDs) {
@@ -1370,7 +1492,7 @@ class SegmentationService extends PubSubService {
       // don't want to show the segmentation for all the frames
       if (
         displaySet.isReconstructable &&
-        displaySet?.images?.[0]?.FrameOfReferenceUID === segFrameOfReferenceUID
+        displaySet?.images?.[0]?.FrameOfReferenceUID === segmentationFrameOfReferenceUID
       ) {
         shouldDisplaySeg = true;
         break;
@@ -1717,7 +1839,7 @@ class SegmentationService extends PubSubService {
     const segmentationRepresentations =
       this.getSegmentationRepresentationsForToolGroup(toolGroupId);
 
-    if (segmentationRepresentations.length === 0) {
+    if (!segmentationRepresentations?.length) {
       return;
     }
 

extensions/cornerstone/src/services/SegmentationService/SegmentationServiceTypes.ts

@@ -39,6 +39,8 @@ type Segmentation = {
   isActive: boolean;
   // if the segmentation is visible in the viewer
   isVisible: boolean;
+  // the frame of reference UID of the segmentation
+  FrameOfReferenceUID: string;
   // the label of the segmentation
   label: string;
   // the number of segments in the segmentation

extensions/cornerstone/src/services/ToolGroupService/ToolGroupService.ts

@@ -97,9 +97,9 @@ export default class ToolGroupService {
   }
 
   public getActiveToolForViewport(viewportId: string): string {
-    const toolGroup = ToolGroupManager.getToolGroupForViewport(viewportId);
+    const toolGroup = this.getToolGroupForViewport(viewportId);
     if (!toolGroup) {
-      return null;
+      return;
     }
 
     return toolGroup.getActivePrimaryMouseButtonTool();
@@ -184,13 +184,9 @@ export default class ToolGroupService {
     this._setToolsMode(toolGroup, tools);
   }
 
-  public createToolGroupAndAddTools(
-    toolGroupId: string,
-    tools: Array<Tool>,
-    configs: any = {}
-  ): Types.IToolGroup {
+  public createToolGroupAndAddTools(toolGroupId: string, tools: Array<Tool>): Types.IToolGroup {
     const toolGroup = this.createToolGroup(toolGroupId);
-    this.addToolsToToolGroup(toolGroupId, tools, configs);
+    this.addToolsToToolGroup(toolGroupId, tools);
     return toolGroup;
   }
 
@@ -239,34 +235,6 @@ export default class ToolGroupService {
     toolInstance.configuration = config;
   }
 
-  private _getToolNames(toolGroupTools: Tools): string[] {
-    const toolNames = [];
-    if (toolGroupTools.active) {
-      toolGroupTools.active.forEach(tool => {
-        toolNames.push(tool.toolName);
-      });
-    }
-    if (toolGroupTools.passive) {
-      toolGroupTools.passive.forEach(tool => {
-        toolNames.push(tool.toolName);
-      });
-    }
-
-    if (toolGroupTools.enabled) {
-      toolGroupTools.enabled.forEach(tool => {
-        toolNames.push(tool.toolName);
-      });
-    }
-
-    if (toolGroupTools.disabled) {
-      toolGroupTools.disabled.forEach(tool => {
-        toolNames.push(tool.toolName);
-      });
-    }
-
-    return toolNames;
-  }
-
   private _setToolsMode(toolGroup, tools) {
     const { active, passive, enabled, disabled } = tools;
 
@@ -295,17 +263,33 @@ export default class ToolGroupService {
     }
   }
 
-  private _addTools(toolGroup, tools, configs) {
-    const toolNames = this._getToolNames(tools);
-    toolNames.forEach(toolName => {
-      // Initialize the toolConfig if no configuration is provided
-      const toolConfig = configs[toolName] ?? {};
+  private _addTools(toolGroup, tools) {
+    const addTools = tools => {
+      tools.forEach(({ toolName, parentTool, configuration }) => {
+        if (parentTool) {
+          toolGroup.addToolInstance(toolName, parentTool, {
+            ...configuration,
+          });
+        } else {
+          toolGroup.addTool(toolName, { ...configuration });
+        }
+      });
+    };
 
-      // if (volumeUID) {
-      //   toolConfig.volumeUID = volumeUID;
-      // }
+    if (tools.active) {
+      addTools(tools.active);
+    }
 
-      toolGroup.addTool(toolName, { ...toolConfig });
-    });
+    if (tools.passive) {
+      addTools(tools.passive);
+    }
+
+    if (tools.enabled) {
+      addTools(tools.enabled);
+    }
+
+    if (tools.disabled) {
+      addTools(tools.disabled);
+    }
   }
 }

extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts

@@ -15,11 +15,7 @@ import {
 import { utilities as csToolsUtils, Enums as csToolsEnums } from '@cornerstonejs/tools';
 import { IViewportService } from './IViewportService';
 import { RENDERING_ENGINE_ID } from './constants';
-import ViewportInfo, {
-  ViewportOptions,
-  DisplaySetOptions,
-  PublicViewportOptions,
-} from './Viewport';
+import ViewportInfo, { DisplaySetOptions, PublicViewportOptions } from './Viewport';
 import { StackViewportData, VolumeViewportData } from '../../types/CornerstoneCacheService';
 import { Presentation, Presentations } from '../../types/Presentation';
 
@@ -586,10 +582,23 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
         continue;
       }
 
-      // otherwise, check if the hydrated segmentations are in the same FOR
+      // otherwise, check if the hydrated segmentations are in the same FrameOfReferenceUID
       // as the primary displaySet, if so add the representation (since it was not there)
-      const { id: segDisplaySetInstanceUID, type } = segmentation;
-      const segFrameOfReferenceUID = this._getFrameOfReferenceUID(segDisplaySetInstanceUID);
+      const { id: segDisplaySetInstanceUID } = segmentation;
+      let segFrameOfReferenceUID = this._getFrameOfReferenceUID(segDisplaySetInstanceUID);
+
+      if (!segFrameOfReferenceUID) {
+        // if the segmentation displaySet does not have a FrameOfReferenceUID, we might check the
+        // segmentation itself maybe it has a FrameOfReferenceUID
+        const { FrameOfReferenceUID } = segmentation;
+        if (FrameOfReferenceUID) {
+          segFrameOfReferenceUID = FrameOfReferenceUID;
+        }
+      }
+
+      if (!segFrameOfReferenceUID) {
+        return;
+      }
 
       let shouldDisplaySeg = false;
 

extensions/cornerstone/src/tools/ImageOverlayViewerTool.tsx

@@ -1,5 +1,6 @@
-import { metaData } from '@cornerstonejs/core';
+import { VolumeViewport, metaData } from '@cornerstonejs/core';
 import { utilities } from '@cornerstonejs/core';
+import { IStackViewport, IVolumeViewport, Point3 } from '@cornerstonejs/core/dist/esm/types';
 import { AnnotationDisplayTool, drawing } from '@cornerstonejs/tools';
 import { guid } from '@ohif/core/src/utils';
 
@@ -46,6 +47,15 @@ class ImageOverlayViewerTool extends AnnotationDisplayTool {
     this._cachedOverlayMetadata = new Map();
   };
 
+  protected getReferencedImageId(viewport: IStackViewport | IVolumeViewport): string {
+    if (viewport instanceof VolumeViewport) {
+      return;
+    }
+
+    const targetId = this.getTargetId(viewport);
+    return targetId.split('imageId:')[1];
+  }
+
   renderAnnotation = (enabledElement, svgDrawingHelper) => {
     const { viewport } = enabledElement;
 

extensions/cornerstone/src/utils/dicomLoaderService.js

@@ -97,7 +97,7 @@ class DicomLoaderService {
 
     if (
       (!imageInstance && !nonImageInstance) ||
-      !nonImageInstance.imageId.startsWith('dicomfile')
+      !nonImageInstance.imageId?.startsWith('dicomfile')
     ) {
       return;
     }

extensions/default/src/Actions/createReportAsync.tsx

@@ -4,49 +4,31 @@ import { DicomMetadataStore } from '@ohif/core';
 /**
  *
  * @param {*} servicesManager
- * @param {*} dataSource
- * @param {*} measurements
- * @param {*} options
- * @returns {string[]} displaySetInstanceUIDs
  */
-async function createReportAsync(
-  servicesManager,
-  commandsManager,
-  dataSource,
-  measurements,
-  options
-) {
+async function createReportAsync({ servicesManager, getReport, reportType = 'measurement' }) {
   const { displaySetService, uiNotificationService, uiDialogService } = servicesManager.services;
   const loadingDialogId = uiDialogService.create({
     showOverlay: true,
     isDraggable: false,
     centralize: true,
-    // TODO: Create a loading indicator component + zeplin design?
     content: Loading,
   });
 
   try {
-    const naturalizedReport = await commandsManager.runCommand(
-      'storeMeasurements',
-      {
-        measurementData: measurements,
-        dataSource,
-        additionalFindingTypes: ['ArrowAnnotate'],
-        options,
-      },
-      'CORNERSTONE_STRUCTURED_REPORT'
-    );
+    const naturalizedReport = await getReport();
 
     // The "Mode" route listens for DicomMetadataStore changes
     // When a new instance is added, it listens and
     // automatically calls makeDisplaySets
     DicomMetadataStore.addInstances([naturalizedReport], true);
 
-    const displaySetInstanceUID = displaySetService.getMostRecentDisplaySet();
+    const displaySet = displaySetService.getMostRecentDisplaySet();
+
+    const displaySetInstanceUID = displaySet.displaySetInstanceUID;
 
     uiNotificationService.show({
       title: 'Create Report',
-      message: 'Measurements saved successfully',
+      message: `${reportType} saved successfully`,
       type: 'success',
     });
 
@@ -54,7 +36,7 @@ async function createReportAsync(
   } catch (error) {
     uiNotificationService.show({
       title: 'Create Report',
-      message: error.message || 'Failed to store measurements',
+      message: error.message || `Failed to store ${reportType}`,
       type: 'error',
     });
   } finally {

extensions/default/src/DicomJSONDataSource/index.js

@@ -119,18 +119,18 @@ function createDicomJSONApi(dicomJsonConfig) {
           });
         },
         processResults: () => {
-          console.debug(' DICOMJson QUERY processResults');
+          console.warn(' DICOMJson QUERY processResults not implemented');
         },
       },
       series: {
         // mapParams: mapParams.bind(),
         search: () => {
-          console.debug(' DICOMJson QUERY SERIES SEARCH');
+          console.warn(' DICOMJson QUERY SERIES SEARCH not implemented');
         },
       },
       instances: {
         search: () => {
-          console.debug(' DICOMJson QUERY instances SEARCH');
+          console.warn(' DICOMJson QUERY instances SEARCH not implemented');
         },
       },
     },
@@ -211,7 +211,7 @@ function createDicomJSONApi(dicomJsonConfig) {
     },
     store: {
       dicom: () => {
-        console.debug(' DICOMJson store dicom');
+        console.warn(' DICOMJson store dicom not implemented');
       },
     },
     getImageIdsForDisplaySet(displaySet) {

extensions/default/src/DicomLocalDataSource/index.js

@@ -85,7 +85,7 @@ function createDicomLocalApi(dicomLocalConfig) {
           });
         },
         processResults: () => {
-          console.debug(' DICOMLocal QUERY processResults');
+          console.warn(' DICOMLocal QUERY processResults not implemented');
         },
       },
       series: {
@@ -107,7 +107,7 @@ function createDicomLocalApi(dicomLocalConfig) {
       },
       instances: {
         search: () => {
-          console.debug(' DICOMLocal QUERY instances SEARCH');
+          console.warn(' DICOMLocal QUERY instances SEARCH not implemented');
         },
       },
     },

extensions/default/src/DicomWebDataSource/index.js

@@ -221,7 +221,7 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
           await wadoDicomWebClient.storeInstances(options);
         } else {
           const meta = {
-            FileMetaInformationVersion: dataset._meta.FileMetaInformationVersion.Value,
+            FileMetaInformationVersion: dataset._meta?.FileMetaInformationVersion?.Value,
             MediaStorageSOPClassUID: dataset.SOPClassUID,
             MediaStorageSOPInstanceUID: dataset.SOPInstanceUID,
             TransferSyntaxUID: EXPLICIT_VR_LITTLE_ENDIAN,
@@ -295,6 +295,8 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
         });
 
         instance.imageId = imageId;
+        instance.wadoRoot = dicomWebConfig.wadoRoot;
+        instance.wadoUri = dicomWebConfig.wadoUri;
 
         metadataProvider.addImageIdToUIDs(imageId, {
           StudyInstanceUID,

extensions/default/src/Panels/ActionButtons.tsx

@@ -2,18 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
-import { LegacyButton, ButtonGroup } from '@ohif/ui';
+import { LegacyButton, LegacyButtonGroup } from '@ohif/ui';
 
 function ActionButtons({ onExportClick, onCreateReportClick }) {
   const { t } = useTranslation('MeasurementTable');
 
   return (
     <React.Fragment>
-      <ButtonGroup
+      <LegacyButtonGroup
         color="black"
         size="inherit"
       >
-        {/* TODO Revisit design of ButtonGroup later - for now use LegacyButton for its children.*/}
+        {/* TODO Revisit design of LegacyButtonGroup later - for now use LegacyButton for its children.*/}
         <LegacyButton
           className="px-2 py-2 text-base"
           onClick={onExportClick}
@@ -26,7 +26,7 @@ function ActionButtons({ onExportClick, onCreateReportClick }) {
         >
           {t('Create Report')}
         </LegacyButton>
-      </ButtonGroup>
+      </LegacyButtonGroup>
     </React.Fragment>
   );
 }

extensions/default/src/Panels/PanelMeasurementTable.tsx

@@ -103,13 +103,20 @@ export default function PanelMeasurementTable({
       // creating too many series instances.
       const options = findSRWithSameSeriesDescription(SeriesDescription, displaySetService);
 
-      return createReportAsync(
-        servicesManager,
-        commandsManager,
-        dataSource,
-        trackedMeasurements,
-        options
-      );
+      const getReport = async () => {
+        return commandsManager.runCommand(
+          'storeMeasurements',
+          {
+            measurementData: trackedMeasurements,
+            dataSource,
+            additionalFindingTypes: ['ArrowAnnotate'],
+            options,
+          },
+          'CORNERSTONE_STRUCTURED_REPORT'
+        );
+      };
+
+      return createReportAsync({ servicesManager, getReport });
     }
   }
 

extensions/default/src/Panels/PanelStudyBrowser.tsx

@@ -103,8 +103,7 @@ function PanelStudyBrowser({
     }
 
     StudyInstanceUIDs.forEach(sid => fetchStudiesForPatient(sid));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [StudyInstanceUIDs, getStudiesForPatientByMRN]);
+  }, [StudyInstanceUIDs, dataSource, getStudiesForPatientByMRN, navigate]);
 
   // // ~~ Initial Thumbnails
   useEffect(() => {
@@ -116,21 +115,23 @@ function PanelStudyBrowser({
       const imageId = imageIds[Math.floor(imageIds.length / 2)];
 
       // TODO: Is it okay that imageIds are not returned here for SR displaySets?
-      if (imageId && !displaySet?.unsupported) {
-        // When the image arrives, render it and store the result in the thumbnailImgSrcMap
-        newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(imageId);
-        if (isMounted.current) {
-          setThumbnailImageSrcMap(prevState => {
-            return { ...prevState, ...newImageSrcEntry };
-          });
-        }
+      if (!imageId || displaySet?.unsupported) {
+        return;
       }
+      // When the image arrives, render it and store the result in the thumbnailImgSrcMap
+      newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(imageId);
+      if (!isMounted.current) {
+        return;
+      }
+
+      setThumbnailImageSrcMap(prevState => {
+        return { ...prevState, ...newImageSrcEntry };
+      });
     });
     return () => {
       isMounted.current = false;
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [StudyInstanceUIDs, dataSource, displaySetService, getImageSrc]);
 
   // ~~ displaySets
   useEffect(() => {
@@ -140,8 +141,7 @@ function PanelStudyBrowser({
     sortStudyInstances(mappedDisplaySets);
 
     setDisplaySets(mappedDisplaySets);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [thumbnailImageSrcMap]);
+  }, [StudyInstanceUIDs, thumbnailImageSrcMap, displaySetService]);
 
   // ~~ subscriptions --> displaySets
   useEffect(() => {
@@ -149,32 +149,40 @@ function PanelStudyBrowser({
     const SubscriptionDisplaySetsAdded = displaySetService.subscribe(
       displaySetService.EVENTS.DISPLAY_SETS_ADDED,
       data => {
-        const { displaySetsAdded } = data;
+        const { displaySetsAdded, options } = data;
         displaySetsAdded.forEach(async dSet => {
           const newImageSrcEntry = {};
           const displaySet = displaySetService.getDisplaySetByUID(dSet.displaySetInstanceUID);
-          if (!displaySet?.unsupported) {
-            const imageIds = dataSource.getImageIdsForDisplaySet(displaySet);
-            const imageId = imageIds[Math.floor(imageIds.length / 2)];
-
-            // TODO: Is it okay that imageIds are not returned here for SR displaysets?
-            if (imageId) {
-              // When the image arrives, render it and store the result in the thumbnailImgSrcMap
-              newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(
-                imageId,
-                dSet.initialViewport
-              );
-              if (isMounted.current) {
-                setThumbnailImageSrcMap(prevState => {
-                  return { ...prevState, ...newImageSrcEntry };
-                });
-              }
-            }
+          if (displaySet?.unsupported) {
+            return;
           }
+
+          const imageIds = dataSource.getImageIdsForDisplaySet(displaySet);
+          const imageId = imageIds[Math.floor(imageIds.length / 2)];
+
+          // TODO: Is it okay that imageIds are not returned here for SR displaysets?
+          if (!imageId) {
+            return;
+          }
+          // When the image arrives, render it and store the result in the thumbnailImgSrcMap
+          newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(
+            imageId,
+            dSet.initialViewport
+          );
+
+          setThumbnailImageSrcMap(prevState => {
+            return { ...prevState, ...newImageSrcEntry };
+          });
         });
       }
     );
 
+    return () => {
+      SubscriptionDisplaySetsAdded.unsubscribe();
+    };
+  }, [getImageSrc, dataSource, displaySetService]);
+
+  useEffect(() => {
     // TODO: Will this always hold _all_ the displaySets we care about?
     // DISPLAY_SETS_CHANGED returns `DisplaySerService.activeDisplaySets`
     const SubscriptionDisplaySetsChanged = displaySetService.subscribe(
@@ -198,12 +206,10 @@ function PanelStudyBrowser({
     );
 
     return () => {
-      SubscriptionDisplaySetsAdded.unsubscribe();
       SubscriptionDisplaySetsChanged.unsubscribe();
       SubscriptionDisplaySetMetaDataInvalidated.unsubscribe();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [StudyInstanceUIDs, thumbnailImageSrcMap, displaySetService]);
 
   const tabs = _createStudyBrowserTabs(StudyInstanceUIDs, studyDisplayList, displaySets);
 

extensions/default/src/Panels/index.js

@@ -1,5 +1,11 @@
 import PanelStudyBrowser from './PanelStudyBrowser';
 import WrappedPanelStudyBrowser from './WrappedPanelStudyBrowser';
 import PanelMeasurementTable from './PanelMeasurementTable';
+import createReportDialogPrompt from './createReportDialogPrompt';
 
-export { PanelStudyBrowser, WrappedPanelStudyBrowser, PanelMeasurementTable };
+export {
+  PanelStudyBrowser,
+  WrappedPanelStudyBrowser,
+  PanelMeasurementTable,
+  createReportDialogPrompt,
+};

extensions/default/src/Toolbar/Toolbar.tsx

@@ -1,51 +1,29 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import classnames from 'classnames';
 
 export default function Toolbar({ servicesManager }) {
   const { toolbarService } = servicesManager.services;
   const [toolbarButtons, setToolbarButtons] = useState([]);
-  const [buttonState, setButtonState] = useState({
-    primaryToolId: '',
-    toggles: {},
-    groups: {},
-  });
 
-  // Could track buttons and state separately...?
   useEffect(() => {
-    const { unsubscribe: unsub1 } = toolbarService.subscribe(
-      toolbarService.EVENTS.TOOL_BAR_MODIFIED,
-      () => setToolbarButtons(toolbarService.getButtonSection('primary'))
-    );
-    const { unsubscribe: unsub2 } = toolbarService.subscribe(
-      toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
-      () => setButtonState({ ...toolbarService.state })
+    const { unsubscribe } = toolbarService.subscribe(toolbarService.EVENTS.TOOL_BAR_MODIFIED, () =>
+      setToolbarButtons(toolbarService.getButtonSection('primary'))
     );
 
     return () => {
-      unsub1();
-      unsub2();
+      unsubscribe();
     };
   }, [toolbarService]);
 
+  const onInteraction = useCallback(
+    args => toolbarService.recordInteraction(args),
+    [toolbarService]
+  );
+
   return (
     <>
       {toolbarButtons.map(toolDef => {
         const { id, Component, componentProps } = toolDef;
-        // TODO: ...
-
-        // isActive if:
-        // - id is primary?
-        // - id is in list of "toggled on"?
-        let isActive;
-        if (componentProps.type === 'toggle') {
-          isActive = buttonState.toggles[id];
-        }
-        // Also need... to filter list for splitButton, and set primary based on most recently clicked
-        // Also need to kill the radioGroup button's magic logic
-        // Everything should be reactive off these props, so commands can inform ToolbarService
-
-        // These can... Trigger toolbar events based on updates?
-        // Then sync using useEffect, or simply modify the state here?
         return (
           // The margin for separating the tools on the toolbar should go here and NOT in each individual component (button) item.
           // This allows for the individual items to be included in other UI components where perhaps alternative margins are desired.
@@ -56,9 +34,7 @@ export default function Toolbar({ servicesManager }) {
             <Component
               id={id}
               {...componentProps}
-              bState={buttonState}
-              isActive={isActive}
-              onInteraction={args => toolbarService.recordInteraction(args)}
+              onInteraction={onInteraction}
               servicesManager={servicesManager}
             />
           </div>

extensions/default/src/Toolbar/ToolbarButtonWithServices.tsx

@@ -0,0 +1,75 @@
+import { ToolbarButton } from '@ohif/ui';
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+function ToolbarButtonWithServices({
+  id,
+  type,
+  commands,
+  onInteraction,
+  servicesManager,
+  ...props
+}) {
+  const { toolbarService } = servicesManager?.services || {};
+
+  const [buttonsState, setButtonState] = useState({
+    primaryToolId: '',
+    toggles: {},
+    groups: {},
+  });
+  const { primaryToolId } = buttonsState;
+
+  const isActive =
+    (type === 'tool' && id === primaryToolId) ||
+    (type === 'toggle' && buttonsState.toggles[id] === true);
+
+  useEffect(() => {
+    const { unsubscribe } = toolbarService.subscribe(
+      toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
+      state => {
+        setButtonState({ ...state });
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [toolbarService]);
+
+  return (
+    <ToolbarButton
+      commands={commands}
+      id={id}
+      type={type}
+      isActive={isActive}
+      onInteraction={onInteraction}
+      {...props}
+    />
+  );
+}
+
+ToolbarButtonWithServices.propTypes = {
+  id: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['tool', 'action', 'toggle']).isRequired,
+  commands: PropTypes.arrayOf(
+    PropTypes.shape({
+      commandName: PropTypes.string.isRequired,
+      context: PropTypes.string,
+    })
+  ),
+  onInteraction: PropTypes.func.isRequired,
+  servicesManager: PropTypes.shape({
+    services: PropTypes.shape({
+      toolbarService: PropTypes.shape({
+        subscribe: PropTypes.func.isRequired,
+        state: PropTypes.shape({
+          primaryToolId: PropTypes.string,
+          toggles: PropTypes.objectOf(PropTypes.bool),
+          groups: PropTypes.objectOf(PropTypes.object),
+        }).isRequired,
+      }).isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+export default ToolbarButtonWithServices;

extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx

@@ -1,13 +1,37 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { LayoutSelector as OHIFLayoutSelector, ToolbarButton } from '@ohif/ui';
-
 import { ServicesManager } from '@ohif/core';
 
-function LayoutSelector({ rows, columns, className, servicesManager, ...rest }) {
-  const [isOpen, setIsOpen] = useState(false);
+function ToolbarLayoutSelectorWithServices({ servicesManager, ...props }) {
+  const { toolbarService } = servicesManager.services;
 
-  const { hangingProtocolService, toolbarService } = (servicesManager as ServicesManager).services;
+  const onSelection = useCallback(
+    props => {
+      toolbarService.recordInteraction({
+        interactionType: 'action',
+        commands: [
+          {
+            commandName: 'setViewportGridLayout',
+            commandOptions: { ...props },
+            context: 'DEFAULT',
+          },
+        ],
+      });
+    },
+    [toolbarService]
+  );
+
+  return (
+    <LayoutSelector
+      {...props}
+      onSelection={onSelection}
+    />
+  );
+}
+
+function LayoutSelector({ rows, columns, className, onSelection, ...rest }) {
+  const [isOpen, setIsOpen] = useState(false);
 
   const closeOnOutsideClick = () => {
     if (isOpen) {
@@ -15,19 +39,6 @@ function LayoutSelector({ rows, columns, className, servicesManager, ...rest })
     }
   };
 
-  useEffect(() => {
-    const { unsubscribe } = hangingProtocolService.subscribe(
-      hangingProtocolService.EVENTS.PROTOCOL_CHANGED,
-      evt => {
-        const { protocol } = evt;
-      }
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, [hangingProtocolService]);
-
   useEffect(() => {
     window.addEventListener('click', closeOnOutsideClick);
     return () => {
@@ -38,19 +49,6 @@ function LayoutSelector({ rows, columns, className, servicesManager, ...rest })
   const onInteractionHandler = () => setIsOpen(!isOpen);
   const DropdownContent = isOpen ? OHIFLayoutSelector : null;
 
-  const onSelectionHandler = props => {
-    toolbarService.recordInteraction({
-      interactionType: 'action',
-      commands: [
-        {
-          commandName: 'setViewportGridLayout',
-          commandOptions: { ...props },
-          context: 'DEFAULT',
-        },
-      ],
-    });
-  };
-
   return (
     <ToolbarButton
       id="Layout"
@@ -64,7 +62,7 @@ function LayoutSelector({ rows, columns, className, servicesManager, ...rest })
           <DropdownContent
             rows={rows}
             columns={columns}
-            onSelection={onSelectionHandler}
+            onSelection={onSelection}
           />
         )
       }
@@ -87,4 +85,4 @@ LayoutSelector.defaultProps = {
   onLayoutChange: () => {},
 };
 
-export default LayoutSelector;
+export default ToolbarLayoutSelectorWithServices;

extensions/default/src/Toolbar/ToolbarSplitButton.tsx

@@ -1,3 +0,0 @@
-import { SplitButton } from '@ohif/ui';
-
-export default SplitButton;

extensions/default/src/Toolbar/ToolbarSplitButtonWithServices.tsx

@@ -0,0 +1,186 @@
+import { SplitButton, Icon, ToolbarButton } from '@ohif/ui';
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+function ToolbarSplitButtonWithServices({
+  isRadio,
+  isAction,
+  groupId,
+  primary,
+  secondary,
+  items,
+  renderer,
+  onInteraction,
+  servicesManager,
+}) {
+  const { toolbarService } = servicesManager?.services;
+
+  const handleItemClick = (item, index) => {
+    const { id, type, commands } = item;
+    onInteraction({
+      groupId,
+      itemId: id,
+      interactionType: type,
+      commands,
+    });
+
+    setState(state => ({
+      ...state,
+      primary: !isAction && isRadio ? { ...item, index } : state.primary,
+      isExpanded: false,
+      items: getSplitButtonItems(items).filter(item =>
+        isRadio && !isAction ? item.index !== index : true
+      ),
+    }));
+  };
+
+  /* Bubbles up individual item clicks */
+  const getSplitButtonItems = items =>
+    items.map((item, index) => ({
+      ...item,
+      index,
+      onClick: () => handleItemClick(item, index),
+    }));
+
+  const [buttonsState, setButtonState] = useState({
+    primaryToolId: '',
+    toggles: {},
+    groups: {},
+  });
+
+  const [state, setState] = useState({
+    primary,
+    items: getSplitButtonItems(items).filter(item =>
+      isRadio && !isAction ? item.id !== primary.id : true
+    ),
+  });
+
+  const { primaryToolId, toggles } = buttonsState;
+
+  const isPrimaryToggle = state.primary.type === 'toggle';
+
+  const isPrimaryActive =
+    (state.primary.type === 'tool' && primaryToolId === state.primary.id) ||
+    (isPrimaryToggle && toggles[state.primary.id] === true);
+
+  const PrimaryButtonComponent =
+    toolbarService?.getButtonComponentForUIType(state.primary.uiType) ?? ToolbarButton;
+
+  useEffect(() => {
+    const { unsubscribe } = toolbarService.subscribe(
+      toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
+      state => {
+        setButtonState({ ...state });
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [toolbarService]);
+
+  const updatedItems = state.items.map(item => {
+    const isActive = item.type === 'tool' && primaryToolId === item.id;
+
+    // We could have added the
+    // item.type === 'toggle' && toggles[item.id] === true
+    // too but that makes the button active when the toggle is active under it
+    // which feels weird
+    return {
+      ...item,
+      isActive,
+    };
+  });
+
+  const DefaultListItemRenderer = ({ type, icon, label, t, id }) => {
+    const isActive = type === 'toggle' && toggles[id] === true;
+
+    return (
+      <div
+        className={classNames(
+          'hover:bg-primary-dark flex h-8 w-full flex-row items-center p-3',
+          'whitespace-pre text-base',
+          isActive && 'bg-primary-dark',
+          isActive
+            ? 'text-[#348CFD]'
+            : 'text-common-bright hover:bg-primary-dark hover:text-primary-light'
+        )}
+      >
+        {icon && (
+          <span className="mr-4">
+            <Icon
+              name={icon}
+              className="h-5 w-5"
+            />
+          </span>
+        )}
+        <span className="mr-5">{t(label)}</span>
+      </div>
+    );
+  };
+
+  const listItemRenderer = renderer || DefaultListItemRenderer;
+
+  return (
+    <SplitButton
+      isRadio={isRadio}
+      isAction={isAction}
+      primary={state.primary}
+      secondary={secondary}
+      items={updatedItems}
+      groupId={groupId}
+      renderer={listItemRenderer}
+      isActive={isPrimaryActive || updatedItems.some(item => item.isActive)}
+      isToggle={isPrimaryToggle}
+      onInteraction={onInteraction}
+      Component={props => (
+        <PrimaryButtonComponent
+          {...props}
+          servicesManager={servicesManager}
+        />
+      )}
+    />
+  );
+}
+
+ToolbarSplitButtonWithServices.propTypes = {
+  isRadio: PropTypes.bool,
+  isAction: PropTypes.bool,
+  groupId: PropTypes.string,
+  primary: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['tool', 'action', 'toggle']).isRequired,
+    uiType: PropTypes.string,
+  }),
+  secondary: PropTypes.shape({
+    id: PropTypes.string,
+    icon: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    tooltip: PropTypes.string.isRequired,
+    isActive: PropTypes.bool,
+  }),
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      type: PropTypes.oneOf(['tool', 'action', 'toggle']).isRequired,
+      icon: PropTypes.string,
+      label: PropTypes.string,
+      tooltip: PropTypes.string,
+    })
+  ),
+  renderer: PropTypes.func,
+  onInteraction: PropTypes.func.isRequired,
+  servicesManager: PropTypes.shape({
+    services: PropTypes.shape({
+      toolbarService: PropTypes.object,
+    }),
+  }),
+};
+
+ToolbarSplitButtonWithServices.defaultProps = {
+  isRadio: false,
+  isAction: false,
+};
+
+export default ToolbarSplitButtonWithServices;

extensions/default/src/ViewerLayout/index.tsx

@@ -44,7 +44,7 @@ function ViewerLayout({
 
     if (!entry) {
       throw new Error(
-        `${id} is not a valid entry for an extension module, please check your configuration or make sure the extension is registered.`
+        `${id} is not valid for an extension module. Please verify your configuration or ensure that the extension is properly registered. It's also possible that your mode is utilizing a module from an extension that hasn't been included in its dependencies (add the extension to the "extensionDependencies" array in your mode's index.js file)`
       );
     }
 

extensions/default/src/getToolbarModule.tsx

@@ -1,7 +1,7 @@
-import { ToolbarButton } from '@ohif/ui';
-import ToolbarDivider from './Toolbar/ToolbarDivider.tsx';
-import ToolbarLayoutSelector from './Toolbar/ToolbarLayoutSelector.tsx';
-import ToolbarSplitButton from './Toolbar/ToolbarSplitButton.tsx';
+import ToolbarDivider from './Toolbar/ToolbarDivider';
+import ToolbarLayoutSelectorWithServices from './Toolbar/ToolbarLayoutSelector';
+import ToolbarSplitButtonWithServices from './Toolbar/ToolbarSplitButtonWithServices';
+import ToolbarButtonWithServices from './Toolbar/ToolbarButtonWithServices';
 
 export default function getToolbarModule({ commandsManager, servicesManager }) {
   return [
@@ -12,27 +12,27 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
     },
     {
       name: 'ohif.action',
-      defaultComponent: ToolbarButton,
+      defaultComponent: ToolbarButtonWithServices,
       clickHandler: () => {},
     },
     {
       name: 'ohif.radioGroup',
-      defaultComponent: ToolbarButton,
+      defaultComponent: ToolbarButtonWithServices,
       clickHandler: () => {},
     },
     {
       name: 'ohif.splitButton',
-      defaultComponent: ToolbarSplitButton,
+      defaultComponent: ToolbarSplitButtonWithServices,
       clickHandler: () => {},
     },
     {
       name: 'ohif.layoutSelector',
-      defaultComponent: ToolbarLayoutSelector,
+      defaultComponent: ToolbarLayoutSelectorWithServices,
       clickHandler: (evt, clickedBtn, btnSectionName) => {},
     },
     {
       name: 'ohif.toggle',
-      defaultComponent: ToolbarButton,
+      defaultComponent: ToolbarButtonWithServices,
       clickHandler: () => {},
     },
   ];

extensions/default/src/index.ts

@@ -13,6 +13,8 @@ import { id } from './id.js';
 import preRegistration from './init';
 import { ContextMenuController, CustomizableContextMenuTypes } from './CustomizableContextMenu';
 import * as dicomWebUtils from './DicomWebDataSource/utils';
+import { createReportDialogPrompt } from './Panels';
+import createReportAsync from './Actions/createReportAsync';
 
 const defaultExtension: Types.Extensions.Extension = {
   /**
@@ -48,4 +50,6 @@ export {
   CustomizableContextMenuTypes,
   getStudiesForPatientByMRN,
   dicomWebUtils,
+  createReportDialogPrompt,
+  createReportAsync,
 };

extensions/dicom-microscopy/src/components/MicroscopyPanel/MicroscopyPanel.tsx

@@ -338,29 +338,6 @@ function MicroscopyPanel(props: IMicroscopyPanelProps) {
           onEdit={onMeasurementItemEditHandler}
         />
       </div>
-      <div className="flex justify-center p-4">
-        <ButtonGroup color="black" size="inherit">
-          {/* Let's hide the save button for now, as export SR for SM is a proof of concept */}
-          {/*{promptSave && (
-            <Button
-              className="px-2 py-2 text-base"
-              size="initial"
-              variant={disabled ? 'disabled' : 'outlined'}
-              color="black"
-              border="primaryActive"
-              onClick={promptSave}
-            >
-              {props.t('Create Report')}
-            </Button>
-          )} */}
-          {/* <Button
-            className="px-2 py-2 text-base"
-            onClick={onDeleteCurrentSRHandler}
-          >
-            {props.t('Reject latest report')}
-          </Button> */}
-        </ButtonGroup>
-      </div>
     </>
   );
 }

extensions/dicom-microscopy/src/utils/constructSR.ts

@@ -60,10 +60,10 @@ export default function constructSR(metadata, { SeriesDescription, SeriesNumber
     const { roiGraphic: roi, label } = annotations[i];
     let { measurements, evaluations, marker, presentationState } = roi.properties;
 
-    console.debug('[SR] storing marker...', marker);
-    console.debug('[SR] storing measurements...', measurements);
-    console.debug('[SR] storing evaluations...', evaluations);
-    console.debug('[SR] storing presentation state...', presentationState);
+    console.log('[SR] storing marker...', marker);
+    console.log('[SR] storing measurements...', measurements);
+    console.log('[SR] storing evaluations...', evaluations);
+    console.log('[SR] storing presentation state...', presentationState);
 
     if (presentationState) {
       presentationState.marker = marker;

extensions/dicom-microscopy/src/utils/loadSR.js

@@ -149,12 +149,12 @@ async function _getROIsFromToolState(naturalizedDataset, FrameOfReferenceUID) {
 
       if (measurements && measurements.length) {
         properties.measurements = measurements;
-        console.debug('[SR] retrieving measurements...', measurements);
+        console.log('[SR] retrieving measurements...', measurements);
       }
 
       if (evaluations && evaluations.length) {
         properties.evaluations = evaluations;
-        console.debug('[SR] retrieving evaluations...', evaluations);
+        console.log('[SR] retrieving evaluations...', evaluations);
       }
 
       const roi = new DICOMMicroscopyViewer.roi.ROI({ scoord3d, properties });

extensions/measurement-tracking/src/_shared/createReportAsync.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import { DicomMetadataStore } from '@ohif/core';
-
-/**
- *
- * @param {*} servicesManager
- * @param {*} dataSource
- * @param {*} measurements
- * @param {*} options
- * @returns {string[]} displaySetInstanceUIDs
- */
-async function createReportAsync(
-  servicesManager,
-  commandsManager,
-  dataSource,
-  measurements,
-  options
-) {
-  const { displaySetService, uiNotificationService, uiDialogService } = servicesManager.services;
-  const loadingDialogId = uiDialogService.create({
-    showOverlay: true,
-    isDraggable: false,
-    centralize: true,
-    // TODO: Create a loading indicator component + zeplin design?
-    content: Loading,
-  });
-
-  try {
-    const naturalizedReport = await commandsManager.runCommand(
-      'storeMeasurements',
-      {
-        measurementData: measurements,
-        dataSource,
-        additionalFindingTypes: ['ArrowAnnotate'],
-        options,
-      },
-      'CORNERSTONE_STRUCTURED_REPORT'
-    );
-
-    // The "Mode" route listens for DicomMetadataStore changes
-    // When a new instance is added, it listens and
-    // automatically calls makeDisplaySets
-    DicomMetadataStore.addInstances([naturalizedReport], true);
-
-    const displaySetInstanceUID = displaySetService.getMostRecentDisplaySet();
-
-    uiNotificationService.show({
-      title: 'Create Report',
-      message: 'Measurements saved successfully',
-      type: 'success',
-    });
-
-    return [displaySetInstanceUID];
-  } catch (error) {
-    uiNotificationService.show({
-      title: 'Create Report',
-      message: error.message || 'Failed to store measurements',
-      type: 'error',
-    });
-  } finally {
-    uiDialogService.dismiss({ id: loadingDialogId });
-  }
-}
-
-function Loading() {
-  return <div className="text-primary-active">Loading...</div>;
-}
-
-export default createReportAsync;

extensions/measurement-tracking/src/_shared/createReportDialogPrompt.tsx

@@ -1,87 +0,0 @@
-/* eslint-disable react/display-name */
-import React from 'react';
-import { ButtonEnums, Dialog, Input } from '@ohif/ui';
-import RESPONSE from './PROMPT_RESPONSES';
-
-export default function createReportDialogPrompt(uiDialogService) {
-  return new Promise(function (resolve, reject) {
-    let dialogId = undefined;
-
-    const _handleClose = () => {
-      // Dismiss dialog
-      uiDialogService.dismiss({ id: dialogId });
-      // Notify of cancel action
-      resolve({ action: RESPONSE.CANCEL, value: undefined });
-    };
-
-    /**
-     *
-     * @param {string} param0.action - value of action performed
-     * @param {string} param0.value - value from input field
-     */
-    const _handleFormSubmit = ({ action, value }) => {
-      switch (action.id) {
-        case 'save':
-          // Only save if description is not blank otherwise ignore
-          if (value.label && value.label.trim() !== '') {
-            resolve({
-              action: RESPONSE.CREATE_REPORT,
-              value: value.label.trim(),
-            });
-            uiDialogService.dismiss({ id: dialogId });
-          }
-          break;
-        case 'cancel':
-          uiDialogService.dismiss({ id: dialogId });
-          resolve({ action: RESPONSE.CANCEL, value: undefined });
-          break;
-      }
-    };
-
-    dialogId = uiDialogService.create({
-      centralize: true,
-      isDraggable: false,
-      content: Dialog,
-      useLastPosition: false,
-      showOverlay: true,
-      contentProps: {
-        title: 'Create Report',
-        value: { label: '' },
-        noCloseButton: true,
-        onClose: _handleClose,
-        actions: [
-          { id: 'cancel', text: 'Cancel', type: ButtonEnums.type.secondary },
-          { id: 'save', text: 'Save', type: ButtonEnums.type.primary },
-        ],
-        // TODO: Should be on button press...
-        onSubmit: _handleFormSubmit,
-        body: ({ value, setValue }) => {
-          const onChangeHandler = event => {
-            event.persist();
-            setValue(value => ({ ...value, label: event.target.value }));
-          };
-          const onKeyPressHandler = event => {
-            if (event.key === 'Enter') {
-              // Trigger form submit
-              _handleFormSubmit({ action: { id: 'save' }, value });
-            }
-          };
-          return (
-            <div className="">
-              <Input
-                label="Enter the report name"
-                labelClassName="text-white grow leading-[1.2] text-[14px]"
-                autoFocus
-                className="border-primary-main grow bg-black"
-                type="text"
-                value={value.label}
-                onChange={onChangeHandler}
-                onKeyPress={onKeyPressHandler}
-              />
-            </div>
-          );
-        },
-      },
-    });
-  });
-}

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/TrackedMeasurementsContext.tsx

@@ -35,7 +35,7 @@ function TrackedMeasurementsContextProvider(
   const machineOptions = Object.assign({}, defaultOptions);
   machineOptions.actions = Object.assign({}, machineOptions.actions, {
     jumpToFirstMeasurementInActiveViewport: (ctx, evt) => {
-      const { trackedStudy, trackedSeries } = ctx;
+      const { trackedStudy, trackedSeries, activeViewportId } = ctx;
       const measurements = measurementService.getMeasurements();
       const trackedMeasurements = measurements.filter(
         m => trackedStudy === m.referenceStudyUID && trackedSeries.includes(m.referenceSeriesUID)
@@ -43,7 +43,7 @@ function TrackedMeasurementsContextProvider(
 
       console.log(
         'jumping to measurement reset viewport',
-        viewportGrid.activeViewportId,
+        activeViewportId,
         trackedMeasurements[0]
       );
 
@@ -71,7 +71,7 @@ function TrackedMeasurementsContextProvider(
       }
 
       viewportGridService.setDisplaySetsForViewport({
-        viewportId: viewportGrid.activeViewportId,
+        viewportId: activeViewportId,
         displaySetInstanceUIDs: [referencedDisplaySetUID],
         viewportOptions: {
           initialImageOptions: {
@@ -82,8 +82,7 @@ function TrackedMeasurementsContextProvider(
     },
     showStructuredReportDisplaySetInActiveViewport: (ctx, evt) => {
       if (evt.data.createdDisplaySetInstanceUIDs.length > 0) {
-        const StructuredReportDisplaySetInstanceUID =
-          evt.data.createdDisplaySetInstanceUIDs[0].displaySetInstanceUID;
+        const StructuredReportDisplaySetInstanceUID = evt.data.createdDisplaySetInstanceUIDs[0];
 
         viewportGridService.setDisplaySetsForViewport({
           viewportId: evt.data.viewportId,
@@ -160,6 +159,13 @@ function TrackedMeasurementsContextProvider(
     measurementTrackingMachine
   );
 
+  useEffect(() => {
+    // Update the state machine with the active viewport ID
+    sendTrackedMeasurementsEvent('UPDATE_ACTIVE_VIEWPORT_ID', {
+      activeViewportId,
+    });
+  }, [activeViewportId, sendTrackedMeasurementsEvent]);
+
   // ~~ Listen for changes to ViewportGrid for potential SRs hung in panes when idle
   useEffect(() => {
     if (viewports.size > 0) {

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/measurementTrackingMachine.js

@@ -15,6 +15,7 @@ const machineConfiguration = {
   id: 'measurementTracking',
   initial: 'idle',
   context: {
+    activeViewportId: null,
     trackedStudy: '',
     trackedSeries: [],
     ignoredSeries: [],
@@ -47,6 +48,11 @@ const machineConfiguration = {
         },
         RESTORE_PROMPT_HYDRATE_SR: 'promptHydrateStructuredReport',
         HYDRATE_SR: 'hydrateStructuredReport',
+        UPDATE_ACTIVE_VIEWPORT_ID: {
+          actions: assign({
+            activeViewportId: (_, event) => event.activeViewportId,
+          }),
+        },
       },
     },
     promptBeginTracking: {

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptSaveReport.js

@@ -1,5 +1,4 @@
-import createReportAsync from './../../_shared/createReportAsync';
-import createReportDialogPrompt from '../../_shared/createReportDialogPrompt';
+import { createReportAsync, createReportDialogPrompt } from '@ohif/extension-default';
 import getNextSRSeriesNumber from '../../_shared/getNextSRSeriesNumber';
 import RESPONSE from '../../_shared/PROMPT_RESPONSES';
 
@@ -15,7 +14,9 @@ function promptSaveReport({ servicesManager, commandsManager, extensionManager }
 
   return new Promise(async function (resolve, reject) {
     // TODO: Fallback if (uiDialogService) {
-    const promptResult = await createReportDialogPrompt(uiDialogService);
+    const promptResult = await createReportDialogPrompt(uiDialogService, {
+      extensionManager,
+    });
 
     if (promptResult.action === RESPONSE.CREATE_REPORT) {
       const dataSources = extensionManager.getDataSources();
@@ -33,16 +34,25 @@ function promptSaveReport({ servicesManager, commandsManager, extensionManager }
 
       const SeriesNumber = getNextSRSeriesNumber(displaySetService);
 
-      displaySetInstanceUIDs = await createReportAsync(
+      const getReport = async () => {
+        return commandsManager.runCommand(
+          'storeMeasurements',
+          {
+            measurementData: trackedMeasurements,
+            dataSource,
+            additionalFindingTypes: ['ArrowAnnotate'],
+            options: {
+              SeriesDescription,
+              SeriesNumber,
+            },
+          },
+          'CORNERSTONE_STRUCTURED_REPORT'
+        );
+      };
+      displaySetInstanceUIDs = await createReportAsync({
         servicesManager,
-        commandsManager,
-        dataSource,
-        trackedMeasurements,
-        {
-          SeriesDescription,
-          SeriesNumber,
-        }
-      );
+        getReport,
+      });
     } else if (promptResult.action === RESPONSE.CANCEL) {
       // Do nothing
     }

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.tsx

@@ -131,14 +131,16 @@ function PanelStudyBrowserTracking({
       const imageIds = dataSource.getImageIdsForDisplaySet(displaySet);
       const imageId = imageIds[Math.floor(imageIds.length / 2)];
 
-      // TODO: Is it okay that imageIds are not returned here for SR displaysets?
-      if (imageId && !displaySet?.unsupported) {
-        // When the image arrives, render it and store the result in the thumbnailImgSrcMap
-        newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(imageId);
-        setThumbnailImageSrcMap(prevState => {
-          return { ...prevState, ...newImageSrcEntry };
-        });
+      // TODO: Is it okay that imageIds are not returned here for SR displaySets?
+      if (!imageId || displaySet?.unsupported) {
+        return;
       }
+      // When the image arrives, render it and store the result in the thumbnailImgSrcMap
+      newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(imageId);
+
+      setThumbnailImageSrcMap(prevState => {
+        return { ...prevState, ...newImageSrcEntry };
+      });
     });
   }, [displaySetService, dataSource, getImageSrc]);
 
@@ -184,27 +186,38 @@ function PanelStudyBrowserTracking({
 
           const newImageSrcEntry = {};
           const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
-          if (!displaySet?.unsupported) {
-            if (options.madeInClient) {
-              setJumpToDisplaySet(displaySetInstanceUID);
-            }
-
-            const imageIds = dataSource.getImageIdsForDisplaySet(displaySet);
-            const imageId = imageIds[Math.floor(imageIds.length / 2)];
-
-            // TODO: Is it okay that imageIds are not returned here for SR displaysets?
-            if (imageId) {
-              // When the image arrives, render it and store the result in the thumbnailImgSrcMap
-              newImageSrcEntry[displaySetInstanceUID] = await getImageSrc(imageId);
-              setThumbnailImageSrcMap(prevState => {
-                return { ...prevState, ...newImageSrcEntry };
-              });
-            }
+          if (displaySet?.unsupported) {
+            return;
           }
+
+          if (options.madeInClient) {
+            setJumpToDisplaySet(displaySetInstanceUID);
+          }
+
+          const imageIds = dataSource.getImageIdsForDisplaySet(displaySet);
+          const imageId = imageIds[Math.floor(imageIds.length / 2)];
+
+          // TODO: Is it okay that imageIds are not returned here for SR displaysets?
+          if (!imageId) {
+            return;
+          }
+
+          // When the image arrives, render it and store the result in the thumbnailImgSrcMap
+          newImageSrcEntry[displaySetInstanceUID] = await getImageSrc(imageId);
+          setThumbnailImageSrcMap(prevState => {
+            return { ...prevState, ...newImageSrcEntry };
+          });
         });
       }
     );
 
+    return () => {
+      SubscriptionDisplaySetsAdded.unsubscribe();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [displaySetService, dataSource, getImageSrc, thumbnailImageSrcMap, trackedSeries, viewports]);
+
+  useEffect(() => {
     // TODO: Will this always hold _all_ the displaySets we care about?
     // DISPLAY_SETS_CHANGED returns `DisplaySerService.activeDisplaySets`
     const SubscriptionDisplaySetsChanged = displaySetService.subscribe(
@@ -246,12 +259,10 @@ function PanelStudyBrowserTracking({
     );
 
     return () => {
-      SubscriptionDisplaySetsAdded.unsubscribe();
       SubscriptionDisplaySetsChanged.unsubscribe();
       SubscriptionDisplaySetMetaDataInvalidated.unsubscribe();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [displaySetService, dataSource, getImageSrc, thumbnailImageSrcMap, trackedSeries, viewports]);
+  }, [thumbnailImageSrcMap, trackedSeries, viewports, dataSource, displaySetService]);
 
   const tabs = _createStudyBrowserTabs(
     StudyInstanceUIDs,
@@ -442,7 +453,7 @@ function _mapDisplaySets(
                 body: () => (
                   <div className="bg-primary-dark p-4 text-white">
                     <p>Are you sure you want to delete this report?</p>
-                    <p>This action cannot be undone.</p>
+                    <p className="mt-2">This action cannot be undone.</p>
                   </div>
                 ),
                 actions: [

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/ExportReports.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LegacyButton, ButtonGroup } from '@ohif/ui';
+import { LegacyButton, LegacyButtonGroup } from '@ohif/ui';
 import { useTranslation } from 'react-i18next';
 
 function ExportReports({ segmentations, tmtvValue, config, commandsManager }) {
@@ -9,8 +9,8 @@ function ExportReports({ segmentations, tmtvValue, config, commandsManager }) {
     <>
       {segmentations?.length ? (
         <div className="mt-4 flex justify-center space-x-2">
-          {/* TODO Revisit design of ButtonGroup later - for now use LegacyButton for its children.*/}
-          <ButtonGroup
+          {/* TODO Revisit design of LegacyButtonGroup later - for now use LegacyButton for its children.*/}
+          <LegacyButtonGroup
             color="black"
             size="inherit"
           >
@@ -27,8 +27,8 @@ function ExportReports({ segmentations, tmtvValue, config, commandsManager }) {
             >
               {t('Export CSV')}
             </LegacyButton>
-          </ButtonGroup>
-          <ButtonGroup
+          </LegacyButtonGroup>
+          <LegacyButtonGroup
             color="black"
             size="inherit"
           >
@@ -41,7 +41,7 @@ function ExportReports({ segmentations, tmtvValue, config, commandsManager }) {
             >
               {t('Create RT Report')}
             </LegacyButton>
-          </ButtonGroup>
+          </LegacyButtonGroup>
         </div>
       ) : null}
     </>

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/ROIThresholdConfiguration.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Label, Select, LegacyButton, ButtonGroup } from '@ohif/ui';
+import { Input, Label, Select, LegacyButton, LegacyButtonGroup } from '@ohif/ui';
 import { useTranslation } from 'react-i18next';
 
 export const ROI_STAT = 'roi_stat';
@@ -35,8 +35,8 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
           />
         </div>
         <div className="w-1/2">
-          {/* TODO Revisit design of ButtonGroup later - for now use LegacyButton for its children.*/}
-          <ButtonGroup>
+          {/* TODO Revisit design of LegacyButtonGroup later - for now use LegacyButton for its children.*/}
+          <LegacyButtonGroup>
             <LegacyButton
               size="initial"
               className="px-2 py-2 text-base text-white"
@@ -55,7 +55,7 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
             >
               {t('End')}
             </LegacyButton>
-          </ButtonGroup>
+          </LegacyButtonGroup>
         </div>
       </div>