fix(bugs): Update dependencies and enhance UI components (#4478)

extensions/cornerstone/package.json

@@ -38,7 +38,7 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.4",
     "@cornerstonejs/codec-openjph": "^2.4.5",
-    "@cornerstonejs/dicom-image-loader": "^2.1.17",
+    "@cornerstonejs/dicom-image-loader": "^2.2.1",
     "@icr/polyseg-wasm": "^0.4.0",
     "@ohif/core": "3.9.0-beta.109",
     "@ohif/ui": "3.9.0-beta.109",
@@ -55,9 +55,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^2.1.17",
-    "@cornerstonejs/core": "^2.1.17",
-    "@cornerstonejs/tools": "^2.1.17",
+    "@cornerstonejs/adapters": "^2.2.1",
+    "@cornerstonejs/core": "^2.2.1",
+    "@cornerstonejs/tools": "^2.2.1",
     "@icr/polyseg-wasm": "^0.4.0",
     "@kitware/vtk.js": "32.1.0",
     "html2canvas": "^1.4.1",

extensions/cornerstone/src/commandsModule.ts

@@ -111,16 +111,14 @@ function commandsModule({
       commandsManager.run(options, optionsToUse);
     },
     updateStoredSegmentationPresentation: ({ displaySet, type }) => {
-      const { setSegmentationPresentation } = useSegmentationPresentationStore.getState();
+      const { addSegmentationPresentationItem } = useSegmentationPresentationStore.getState();
 
       const referencedDisplaySetInstanceUID = displaySet.referencedDisplaySetInstanceUID;
-      setSegmentationPresentation(referencedDisplaySetInstanceUID, [
-        {
-          segmentationId: displaySet.displaySetInstanceUID,
-          hydrated: true,
-          type,
-        },
-      ]);
+      addSegmentationPresentationItem(referencedDisplaySetInstanceUID, {
+        segmentationId: displaySet.displaySetInstanceUID,
+        hydrated: true,
+        type,
+      });
     },
     updateStoredPositionPresentation: ({ viewportId, displaySetInstanceUID }) => {
       const presentations = cornerstoneViewportService.getPresentations(viewportId);
@@ -1043,7 +1041,7 @@ function commandsModule({
      * @param props.key - The style key to set
      * @param props.value - The style value
      */
-    setSegmentationStyleCommand: ({ segmentationId, type, key, value }) => {
+    setSegmentationStyleCommand: ({ type, key, value }) => {
       const { segmentationService } = servicesManager.services;
       segmentationService.setStyle({ type }, { [key]: value });
     },
@@ -1150,12 +1148,17 @@ function commandsModule({
       const segment = segmentation.segments[segmentIndex];
       const { label } = segment;
 
-      callInputDialog(uiDialogService, label, (label, actionId) => {
+      const callback = (label, actionId) => {
         if (label === '') {
           return;
         }
 
         segmentationService.setSegmentLabel(segmentationId, segmentIndex, label);
+      };
+
+      callInputDialog(uiDialogService, label, callback, false, {
+        dialogTitle: 'Edit Segment Label',
+        inputLabel: 'Enter new label',
       });
     },
 
@@ -1169,12 +1172,17 @@ function commandsModule({
 
       const { label } = segmentation;
 
-      callInputDialog(uiDialogService, label, (label, actionId) => {
+      const callback = (label, actionId) => {
         if (label === '') {
           return;
         }
 
         segmentationService.addOrUpdateSegmentation({ segmentationId, label });
+      };
+
+      callInputDialog(uiDialogService, label, callback, false, {
+        dialogTitle: 'Edit Segmentation Label',
+        inputLabel: 'Enter new label',
       });
     },
 

extensions/cornerstone/src/panels/PanelSegmentation.tsx

@@ -6,8 +6,6 @@ import { metaData } from '@cornerstonejs/core';
 export default function PanelSegmentation({
   servicesManager,
   commandsManager,
-  extensionManager,
-  configuration,
   children,
 }: withAppTypes) {
   const { customizationService, viewportGridService, displaySetService } = servicesManager.services;
@@ -91,23 +89,23 @@ export default function PanelSegmentation({
       commandsManager.run('deleteSegmentation', { segmentationId });
     },
 
-    setFillAlpha: (type, value) => {
+    setFillAlpha: ({ type }, value) => {
       commandsManager.run('setFillAlpha', { type, value });
     },
 
-    setOutlineWidth: (type, value) => {
+    setOutlineWidth: ({ type }, value) => {
       commandsManager.run('setOutlineWidth', { type, value });
     },
 
-    setRenderFill: (type, value) => {
+    setRenderFill: ({ type }, value) => {
       commandsManager.run('setRenderFill', { type, value });
     },
 
-    setRenderOutline: (type, value) => {
+    setRenderOutline: ({ type }, value) => {
       commandsManager.run('setRenderOutline', { type, value });
     },
 
-    setFillAlphaInactive: (type, value) => {
+    setFillAlphaInactive: ({ type }, value) => {
       commandsManager.run('setFillAlphaInactive', { type, value });
     },
 
@@ -152,6 +150,14 @@ export default function PanelSegmentation({
   const exportOptions = segmentationsWithRepresentations.map(({ segmentation }) => {
     const { representationData, segmentationId } = segmentation;
     const { Labelmap } = representationData;
+
+    if (!Labelmap) {
+      return {
+        segmentationId,
+        isExportable: true,
+      };
+    }
+
     const referencedImageIds = Labelmap.referencedImageIds;
     const firstImageId = referencedImageIds[0];
 

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

@@ -100,10 +100,16 @@ class SegmentationService extends PubSubService {
     this._segmentationIdToColorLUTIndexMap = new Map();
 
     this.servicesManager = servicesManager;
+  }
 
+  public onModeEnter(): void {
     this._initSegmentationService();
   }
 
+  public onModeExit(): void {
+    this.destroy();
+  }
+
   /**
    * Retrieves a segmentation by its ID.
    *
@@ -1386,7 +1392,11 @@ class SegmentationService extends PubSubService {
     const frameOfReferenceUID = viewport.getFrameOfReferenceUID();
     const segImage = cache.getImage(imageIds[0]);
 
-    if (segImage?.FrameOfReferenceUID === frameOfReferenceUID) {
+    if (
+      segImage?.FrameOfReferenceUID &&
+      frameOfReferenceUID &&
+      segImage.FrameOfReferenceUID === frameOfReferenceUID
+    ) {
       const isConverted = await this.convertStackToVolumeViewport(viewport);
       triggerSegmentationRepresentationModified(
         viewportId,

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

@@ -763,6 +763,10 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
       });
     }
 
+    if (!volumesNotLoaded.length) {
+      return;
+    }
+
     // This returns the async continuation only
     return this.setVolumesForViewport(viewport, volumeInputArray, presentations);
   }
@@ -1114,8 +1118,8 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
 
     const { segmentationService } = this.servicesManager.services;
 
-    segmentationPresentation.forEach((presentation: SegmentationPresentationItem) => {
-      const { segmentationId, type, hydrated } = presentation;
+    segmentationPresentation.forEach((presentationItem: SegmentationPresentationItem) => {
+      const { segmentationId, type, hydrated } = presentationItem;
 
       if (hydrated) {
         segmentationService.addSegmentationRepresentation(viewport.id, {

extensions/cornerstone/src/stores/useSegmentationPresentationStore.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
-import { SegmentationPresentation } from '../types/Presentation';
+import { SegmentationPresentation, SegmentationPresentationItem } from '../types/Presentation';
 import { JOIN_STR } from './presentationUtils';
 import { getViewportOrientationFromImageOrientationPatient } from '../utils/getViewportOrientationFromImageOrientationPatient';
 
@@ -62,10 +62,9 @@ type SegmentationPresentationStore = {
    * @param segmentationPresentation - The `SegmentationPresentation` to add.
    * @param servicesManager - The services manager instance.
    */
-  addSegmentationPresentation: (
+  addSegmentationPresentationItem: (
     presentationId: string,
-    segmentationPresentation: SegmentationPresentation,
-    { servicesManager }: { servicesManager: AppTypes.ServicesManager }
+    segmentationPresentationItem: SegmentationPresentationItem
   ) => void;
 
   /**
@@ -183,33 +182,52 @@ const createSegmentationPresentationStore = set => ({
     set({ segmentationPresentationStore: {} }, false, 'clearSegmentationPresentationStore'),
 
   /**
-   * Adds a new segmentation presentation to the store.
+   * Adds a new segmentation presentation item to the store.
+   *
+   * segmentationPresentationItem: {
+   *   segmentationId: string;
+   *   type: SegmentationRepresentations;
+   *   hydrated: boolean | null;
+   *   config?: unknown;
+   * }
    */
-  addSegmentationPresentation: (
+  addSegmentationPresentationItem: (
     presentationId: string,
-    segmentationPresentation: SegmentationPresentation,
-    { servicesManager }: { servicesManager: AppTypes.ServicesManager }
+    segmentationPresentationItem: SegmentationPresentationItem
   ) =>
     set(
       state => ({
         segmentationPresentationStore: {
           ...state.segmentationPresentationStore,
-          [presentationId]: segmentationPresentation,
+          [presentationId]: [
+            ...(state.segmentationPresentationStore[presentationId] || []),
+            segmentationPresentationItem,
+          ],
         },
       }),
       false,
-      'addSegmentationPresentation'
+      'addSegmentationPresentationItem'
     ),
 
   /**
-   * Sets the segmentation presentation for a given presentation ID.
+   * Sets the segmentation presentation for a given presentation ID. A segmentation
+   * presentation is an array of SegmentationPresentationItem.
+   *
+   * segmentationPresentationItem: {
+   *   segmentationId: string;
+   *   type: SegmentationRepresentations;
+   *   hydrated: boolean | null;
+   *   config?: unknown;
+   * }
+   *
+   * segmentationPresentation: SegmentationPresentationItem[]
    */
-  setSegmentationPresentation: (presentationId: string, value: SegmentationPresentation) =>
+  setSegmentationPresentation: (presentationId: string, values: SegmentationPresentation) =>
     set(
       state => ({
         segmentationPresentationStore: {
           ...state.segmentationPresentationStore,
-          [presentationId]: value,
+          [presentationId]: values,
         },
       }),
       false,

extensions/cornerstone/src/utils/measurementServiceMappings/utils/getValueDisplayString.js

@@ -4,9 +4,9 @@ import getDisplayUnit from './getDisplayUnit';
 export const getStatisticDisplayString = (numbers, unit, key) => {
   if (Array.isArray(numbers) && numbers.length > 0) {
     const results = numbers.map(number => utils.roundNumber(number, 2));
-    return `${key.charAt(0).toUpperCase() + key.slice(1)}: ${results.join(', ')} <small>${getDisplayUnit(unit)}</small>`;
+    return `${key.charAt(0).toUpperCase() + key.slice(1)}: ${results.join(', ')} ${getDisplayUnit(unit)}`;
   }
 
   const result = utils.roundNumber(numbers, 2);
-  return `${key.charAt(0).toUpperCase() + key.slice(1)}: ${result} <small>${getDisplayUnit(unit)}</small>`;
+  return `${key.charAt(0).toUpperCase() + key.slice(1)}: ${result} ${getDisplayUnit(unit)}`;
 };