fix(segmentation): Changes to fix problems with non hydrated/loaded segmentations to be viewable when switching hanging protocols (e.g. MPR) (#5139)

extensions/cornerstone-dicom-rt/src/getSopClassHandlerModule.ts

@@ -31,7 +31,7 @@ function _getDisplaySetsFromSeries(
   const displaySet = {
     Modality: 'RTSTRUCT',
     loading: false,
-    isReconstructable: false, // by default for now since it is a volumetric SEG currently
+    isReconstructable: false,
     displaySetInstanceUID: utils.guid(),
     SeriesDescription,
     SeriesNumber,
@@ -87,6 +87,7 @@ function _getDisplaySetsFromSeries(
         const addedDisplaySet = displaySetsAdded[0];
         if (addedDisplaySet.SeriesInstanceUID === displaySet.referencedSeriesInstanceUID) {
           displaySet.referencedDisplaySetInstanceUID = addedDisplaySet.displaySetInstanceUID;
+          displaySet.isReconstructable = addedDisplaySet.isReconstructable;
           unsubscribe();
         }
       }
@@ -94,6 +95,7 @@ function _getDisplaySetsFromSeries(
   } else {
     const referencedDisplaySet = referencedDisplaySets[0];
     displaySet.referencedDisplaySetInstanceUID = referencedDisplaySet.displaySetInstanceUID;
+    displaySet.isReconstructable = referencedDisplaySet.isReconstructable;
   }
 
   displaySet.load = ({ headers, createSegmentation = true }) =>

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

@@ -34,7 +34,7 @@ function _getDisplaySetsFromSeries(
   const displaySet = {
     Modality: 'SEG',
     loading: false,
-    isReconstructable: true, // by default for now since it is a volumetric SEG currently
+    isReconstructable: false,
     displaySetInstanceUID: utils.guid(),
     SeriesDescription,
     SeriesNumber,
@@ -91,12 +91,14 @@ function _getDisplaySetsFromSeries(
         const addedDisplaySet = displaySetsAdded[0];
         if (addedDisplaySet.SeriesInstanceUID === displaySet.referencedSeriesInstanceUID) {
           displaySet.referencedDisplaySetInstanceUID = addedDisplaySet.displaySetInstanceUID;
+          displaySet.isReconstructable = addedDisplaySet.isReconstructable;
           unsubscribe();
         }
       }
     );
   } else {
     displaySet.referencedDisplaySetInstanceUID = referencedDisplaySet.displaySetInstanceUID;
+    displaySet.isReconstructable = referencedDisplaySet.isReconstructable;
   }
 
   displaySet.load = async ({ headers }) =>

extensions/cornerstone/src/components/SelectItemWithModality.tsx

@@ -4,11 +4,16 @@ import React from 'react';
 const SelectItemWithModality = ({
   displaySet,
   showModality = true,
+  dataCY = `${displaySet.label}-${displaySet.Modality}`,
 }: {
   displaySet: AppTypes.DisplaySet;
   showModality?: boolean;
+  dataCY?: string;
 }): JSX.Element => (
-  <div className="flex w-[90%] items-center justify-between">
+  <div
+    className="flex w-[90%] items-center justify-between"
+    data-cy={dataCY}
+  >
     <span className="text-foreground truncate text-base">{displaySet.label}</span>
     {showModality && displaySet.Modality && (
       <span className="text-muted-foreground flex-shrink-0 whitespace-nowrap text-xs">

extensions/cornerstone/src/components/ViewportDataOverlaySettingMenu/ViewportDataOverlayMenu.tsx

@@ -206,6 +206,7 @@ function ViewportDataOverlayMenu({ viewportId }: withAppTypes<{ viewportId: stri
           onClick={() => {
             setPendingSegmentations([...pendingSegmentations, `seg-${Date.now()}`]);
           }}
+          dataCY={`AddSegmentationDataOverlay-${viewportId}`}
         >
           <Icons.Plus className="h-4 w-4" />
           Segmentation
@@ -289,7 +290,10 @@ function ViewportDataOverlayMenu({ viewportId }: withAppTypes<{ viewportId: stri
                       value={item.displaySetInstanceUID}
                       className="pr-2"
                     >
-                      <SelectItemWithModality displaySet={item} />
+                      <SelectItemWithModality
+                        displaySet={item}
+                        dataCY={`${item.label}`}
+                      />
                     </SelectItem>
                   ))}
                 </SelectContent>

extensions/cornerstone/src/components/ViewportDataOverlaySettingMenu/ViewportDataOverlayMenuWrapper.tsx

@@ -18,6 +18,7 @@ type DataOverlayMenuProps = {
   onOpen?: () => void;
   onClose?: () => void;
   disabled?: boolean;
+  id?: string;
 };
 
 export function ViewportDataOverlayMenuWrapper(props: DataOverlayMenuProps): ReactNode {
@@ -40,6 +41,7 @@ export function ViewportDataOverlayMenuWrapper(props: DataOverlayMenuProps): Rea
 
   const Icon = <Icons.ViewportViews className={iconClassName} />;
 
+  const idProp = rest.id ? { id: `${rest.id}-${viewportId}` } : {};
   return (
     <Popover
       open={isOpen}
@@ -56,6 +58,7 @@ export function ViewportDataOverlayMenuWrapper(props: DataOverlayMenuProps): Rea
               icon="ViewportViews"
               {...rest}
               {...containerProps}
+              {...idProp}
             >
               {Icon}
             </IconContainer>

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

@@ -835,16 +835,19 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
     const displaySetModality = displaySet?.Modality;
 
     // filter overlay display sets (e.g. segmentation) since they will get handled below via the segmentation service
-    const filteredVolumeInputArray = volumeInputArray.filter(volumeInput => {
-      const displaySet = displaySetService.getDisplaySetByUID(volumeInput.displaySetInstanceUID);
-      return !displaySet?.isOverlayDisplaySet;
-    });
+    const filteredVolumeInputArray = volumeInputArray
+      .map((volumeInput, index) => {
+        return { volumeInput, displaySetOptions: displaySetOptions[index] };
+      })
+      .filter(({ volumeInput }) => {
+        const displaySet = displaySetService.getDisplaySetByUID(volumeInput.displaySetInstanceUID);
+        return !displaySet?.isOverlayDisplaySet;
+      });
 
     // Todo: use presentations states
-    const volumesProperties = filteredVolumeInputArray.map((volumeInput, index) => {
+    const volumesProperties = filteredVolumeInputArray.map(({ volumeInput, displaySetOptions }) => {
       const { volumeId } = volumeInput;
-      const displaySetOption = displaySetOptions[index];
-      const { voi, voiInverted, colormap, displayPreset } = displaySetOption;
+      const { voi, voiInverted, colormap, displayPreset } = displaySetOptions;
       const properties = {} as ViewportProperties;
 
       if (voi && (voi.windowWidth || voi.windowCenter)) {
@@ -887,14 +890,10 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
       if (backgroundDisplaySet.length !== 1) {
         throw new Error('Background display set not found');
       }
-
-      await viewport.setVolumes([
-        { volumeId: `${VOLUME_LOADER_SCHEME}:${backgroundDisplaySet[0].displaySetInstanceUID}` },
-      ]);
-    } else {
-      await viewport.setVolumes(filteredVolumeInputArray);
     }
 
+    await viewport.setVolumes(volumeInputArray);
+
     if (addOverlayFn) {
       addOverlayFn();
     }

extensions/cornerstone/src/utils/nthLoader.ts

@@ -48,7 +48,7 @@ export default function interleaveNthLoader({
   // iterate over all volumes, and get their imageIds, and interleave
   // the imageIds and save them in AllRequests for later use
   const originalRequests = volumes
-    .map(volume => volume.getImageLoadRequests())
+    .map(volume => volume.getImageLoadRequests?.() ?? [])
     .filter(requests => requests?.[0]?.imageId);
 
   const orderedRequests = originalRequests.map(request => getNthFrames(request));

extensions/default/src/stores/useDisplaySetSelectorStore.ts

@@ -24,7 +24,7 @@ type DisplaySetSelectorState = {
   /**
    * Stores a mapping from `<activeStudyUID>:<displaySetSelectorId>:<matchOffset>` to `displaySetInstanceUID`.
    */
-  displaySetSelectorMap: Record<string, string>;
+  displaySetSelectorMap: Record<string, Array<string>>;
 
   /**
    * Sets the display set selector for a given key.
@@ -32,7 +32,7 @@ type DisplaySetSelectorState = {
    * @param key - The key.
    * @param value - The `displaySetInstanceUID` to associate with the key.
    */
-  setDisplaySetSelector: (key: string, value: string) => void;
+  setDisplaySetSelector: (key: string, value: Array<string>) => void;
 
   /**
    * Clears the entire display set selector map.
@@ -53,7 +53,7 @@ const createDisplaySetSelectorStore = (set): DisplaySetSelectorState => ({
   /**
    * Sets the display set selector for a given key.
    */
-  setDisplaySetSelector: (key: string, value: string) =>
+  setDisplaySetSelector: (key: string, value: Array<string>) =>
     set(
       state => ({
         displaySetSelectorMap: {

extensions/default/src/utils/layerConfigurationUtils.ts

@@ -65,15 +65,23 @@ export function configureViewportForLayerAddition(params: {
     viewport.viewportOptions.orientation = cornerstoneViewportService.getOrientation(viewportId);
   }
 
-  // Do not force volume for SEG and RTSTRUCT if there is only one display set
-  if (requestedLayerDisplaySet.isOverlayDisplaySet && currentDisplaySetUIDs.length === 1) {
-    viewport.viewportOptions.viewportType = 'stack';
-  } else {
-    viewport.viewportOptions.viewportType = 'volume';
+  // If a viewport type was already set do not reset it.
+  if (!viewport.viewportOptions.viewportType) {
+    // Do not force volume for SEG and RTSTRUCT if there is only one display set
+    if (requestedLayerDisplaySet.isOverlayDisplaySet && currentDisplaySetUIDs.length === 1) {
+      viewport.viewportOptions.viewportType = 'stack';
+    } else {
+      viewport.viewportOptions.viewportType = 'volume';
+    }
   }
 
   // create same amount of display set options as the number of display set UIDs
   const displaySetOptions = allDisplaySetInstanceUIDs.map((uid, index) => {
+    // There is already a display set option for this display set, so return it.
+    if (viewport.displaySetOptions?.[index]) {
+      return viewport.displaySetOptions[index];
+    }
+
     if (index === 0) {
       // no colormap for background
       return {};

extensions/default/src/utils/reuseCachedLayouts.ts

@@ -6,7 +6,7 @@ import { useHangingProtocolStageIndexStore } from '../stores/useHangingProtocolS
 export type ReturnType = {
   hangingProtocolStageIndexMap: Record<string, Types.HangingProtocol.HPInfo>;
   viewportGridStore: Record<string, unknown>;
-  displaySetSelectorMap: Record<string, string>;
+  displaySetSelectorMap: Record<string, Array<string>>;
 };
 
 /**
@@ -53,24 +53,33 @@ const reuseCachedLayout = (state, hangingProtocolService: HangingProtocolService
     if (!displaySetOptions) {
       return;
     }
+    const activeDisplaySetUIDs = [];
+
     for (let i = 0; i < displaySetOptions.length; i++) {
       const displaySetUID = displaySetInstanceUIDs[i];
       if (!displaySetUID) {
         continue;
       }
-      if (viewportId === activeViewportId && i === 0) {
-        setDisplaySetSelector(`${activeStudyUID}:activeDisplaySet:0`, displaySetUID);
+      if (viewportId === activeViewportId) {
+        activeDisplaySetUIDs.push(displaySetUID);
       }
+
       // The activeDisplaySet selector should only be set once (i.e. for the actual active display set)
       if (displaySetOptions[i]?.id && displaySetOptions[i].id !== 'activeDisplaySet') {
+        // TODO: handle multiple layers/display sets for the non-active viewports
         setDisplaySetSelector(
           `${activeStudyUID}:${displaySetOptions[i].id}:${
             displaySetOptions[i].matchedDisplaySetsIndex || 0
           }`,
-          displaySetUID
+          [displaySetUID]
         );
       }
     }
+
+    if (viewportId === activeViewportId) {
+      // After going through all the display set options for the active viewport, store the display set selector array
+      setDisplaySetSelector(`${activeStudyUID}:activeDisplaySet:0`, activeDisplaySetUIDs);
+    }
   });
 
   setHangingProtocolStageIndex(cacheId, hpInfo);

platform/core/src/services/HangingProtocolService/HangingProtocolService.ts

@@ -1355,7 +1355,7 @@ export default class HangingProtocolService extends PubSubService {
     const { StudyInstanceUID: activeStudyUID } = this.activeStudy;
     viewport.displaySets.forEach(displaySetOptions => {
       const { id, matchedDisplaySetsIndex = 0 } = displaySetOptions;
-      const reuseDisplaySetUID =
+      const reuseDisplaySetUIDs =
         id && displaySetSelectorMap[`${activeStudyUID}:${id}:${matchedDisplaySetsIndex || 0}`];
       const viewportDisplaySetMain = this.displaySetMatchDetails.get(id);
 
@@ -1366,14 +1366,17 @@ export default class HangingProtocolService extends PubSubService {
       );
 
       // Use the display set provided instead
-      if (reuseDisplaySetUID) {
-        // This display set should have already been validated
-        const displaySetInfo: HangingProtocol.DisplaySetInfo = {
-          displaySetInstanceUID: reuseDisplaySetUID,
-          displaySetOptions,
-        };
+      if (reuseDisplaySetUIDs) {
+        reuseDisplaySetUIDs.forEach(reuseDisplaySetUID => {
+          // This display set should have already been validated
+          const displaySetInfo: HangingProtocol.DisplaySetInfo = {
+            displaySetInstanceUID: reuseDisplaySetUID,
+            displaySetOptions,
+          };
+
+          displaySetsInfo.push(displaySetInfo);
+        });
 
-        displaySetsInfo.push(displaySetInfo);
         return;
       }
 
@@ -1383,7 +1386,7 @@ export default class HangingProtocolService extends PubSubService {
         const { displaySetInstanceUID } = viewportDisplaySet;
 
         const displaySetInfo: HangingProtocol.DisplaySetInfo = {
-          displaySetInstanceUID,
+          displaySetInstanceUID: displaySetInstanceUID,
           displaySetOptions,
         };
 
@@ -1476,14 +1479,16 @@ export default class HangingProtocolService extends PubSubService {
     const { displaySetService } = this._servicesManager.services;
     const { displaySetSelectorMap } = options;
     if (displaySetSelectorMap) {
-      Object.entries(displaySetSelectorMap).forEach(([key, displaySetInstanceUID]) => {
-        const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
+      Object.entries(displaySetSelectorMap).forEach(([key, displaySetInstanceUIDs]) => {
+        displaySetInstanceUIDs.forEach(displaySetInstanceUID => {
+          const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
 
-        if (!displaySet) {
-          throw new Error(
-            `The displaySetInstanceUID ${displaySetInstanceUID} is not found in the displaySetService`
-          );
-        }
+          if (!displaySet) {
+            throw new Error(
+              `The displaySetInstanceUID ${displaySetInstanceUID} is not found in the displaySetService`
+            );
+          }
+        });
       });
     }
   }

platform/core/src/types/HangingProtocol.ts

@@ -49,7 +49,7 @@ export type SetProtocolOptions = {
    * This is normally transparent to the user of this, but in order to specify
    * specific instances, they can be added like that.
    */
-  displaySetSelectorMap?: Record<string, string>;
+  displaySetSelectorMap?: Record<string, Array<string>>;
 
   /** Used to define the display sets already in view, in order to allow
    * filling empty viewports with other instances.

platform/ui-next/src/components/Button/Button.tsx

@@ -35,6 +35,7 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  dataCY?: string;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(

platform/ui-next/src/components/ToolButton/ToolButton.tsx

@@ -97,6 +97,7 @@ function ToolButton(props: ToolButtonProps) {
             size="icon"
             aria-label={defaultTooltip}
             disabled={disabled}
+            name={id}
           >
             {children || (
               <Icons.ByName

tests/MPRThenSEGOverlayNoHydration.spec.ts

@@ -0,0 +1,41 @@
+import { test } from 'playwright-test-coverage';
+import { visitStudy, checkForScreenshot, screenShotPaths } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID = '1.3.12.2.1107.5.2.32.35162.30000015050317233592200000046';
+  const mode = 'viewer';
+  await visitStudy(page, studyInstanceUID, mode, 2000);
+});
+
+test('should launch MPR with unhydrated SEG chosen from the data overlay menu', async ({
+  page,
+}) => {
+  await page.getByTestId('side-panel-header-right').click();
+
+  await page.getByTestId('Layout').click();
+  await page.getByTestId('MPR').click();
+
+  await page.waitForTimeout(5000);
+  await checkForScreenshot(
+    page,
+    page,
+    screenShotPaths.mprThenSEGOverlayNoHydration.mprPreSEGOverlayNoHydration
+  );
+
+  // Hover over the middle/sagittal viewport so that the data overlay menu is available.
+  await page.locator('css=div[data-viewportid="mpr-sagittal"]').hover();
+  await page.getByTestId('dataOverlayMenu-mpr-sagittal-btn').click();
+  await page.getByTestId('AddSegmentationDataOverlay-mpr-sagittal').click();
+  await page.getByText('SELECT A SEGMENTATION').click();
+  await page.getByTestId('Segmentation').click();
+
+  // Hide the overlay menu.
+  await page.getByTestId('dataOverlayMenu-mpr-sagittal-btn').click();
+
+  await page.waitForTimeout(5000);
+  await checkForScreenshot(
+    page,
+    page,
+    screenShotPaths.mprThenSEGOverlayNoHydration.mprPostSEGOverlayNoHydration
+  );
+});

tests/SEGDataOverlayNoHydrationThenMPR.spec.ts

@@ -0,0 +1,38 @@
+import { test } from 'playwright-test-coverage';
+import { visitStudy, checkForScreenshot, screenShotPaths } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID = '1.3.12.2.1107.5.2.32.35162.30000015050317233592200000046';
+  const mode = 'viewer';
+  await visitStudy(page, studyInstanceUID, mode, 2000);
+});
+
+test('should launch MPR with unhydrated SEG chosen from the data overlay menu', async ({
+  page,
+}) => {
+  await page.getByTestId('side-panel-header-right').click();
+  await page.getByTestId('dataOverlayMenu-default-btn').click();
+  await page.getByTestId('AddSegmentationDataOverlay-default').click();
+  await page.getByText('SELECT A SEGMENTATION').click();
+  await page.getByTestId('Segmentation').click();
+
+  // Hide the overlay menu.
+  await page.getByTestId('dataOverlayMenu-default-btn').click();
+
+  await page.waitForTimeout(5000);
+  await checkForScreenshot(
+    page,
+    page,
+    screenShotPaths.segDataOverlayNoHydrationThenMPR.segDataOverlayNoHydrationPreMPR
+  );
+
+  await page.getByTestId('Layout').click();
+  await page.getByTestId('MPR').click();
+
+  await page.waitForTimeout(5000);
+  await checkForScreenshot(
+    page,
+    page,
+    screenShotPaths.segDataOverlayNoHydrationThenMPR.segDataOverlayNoHydrationPostMPR
+  );
+});

tests/SEGNoHydrationThenMPR.spec.ts

@@ -0,0 +1,22 @@
+import { test } from 'playwright-test-coverage';
+import { visitStudy, checkForScreenshot, screenShotPaths } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID = '1.3.12.2.1107.5.2.32.35162.30000015050317233592200000046';
+  const mode = 'viewer';
+  await visitStudy(page, studyInstanceUID, mode, 2000);
+});
+
+test('should launch MPR with unhydrated SEG', async ({ page }) => {
+  await page.getByTestId('side-panel-header-right').click();
+  await page.getByTestId('study-browser-thumbnail-no-image').dblclick();
+
+  await page.waitForTimeout(5000);
+  await checkForScreenshot(page, page, screenShotPaths.segNoHydrationThenMPR.segNoHydrationPreMPR);
+
+  await page.getByTestId('Layout').click();
+  await page.getByTestId('MPR').click();
+
+  await page.waitForTimeout(5000);
+  await checkForScreenshot(page, page, screenShotPaths.segNoHydrationThenMPR.segNoHydrationPostMPR);
+});

tests/utils/screenShotPaths.ts

@@ -89,6 +89,18 @@ const screenShotPaths = {
     mprAfterSegHydrated: 'mprAfterSegHydrated.png',
     mprAfterSegHydratedAfterLayoutChange: 'mprAfterSegHydratedAfterLayoutChange.png',
   },
+  segNoHydrationThenMPR: {
+    segNoHydrationPreMPR: 'segNoHydrationPreMpr.png',
+    segNoHydrationPostMPR: 'segNoHydrationPostMpr.png',
+  },
+  segDataOverlayNoHydrationThenMPR: {
+    segDataOverlayNoHydrationPreMPR: 'segDataOverlayNoHydrationPreMpr.png',
+    segDataOverlayNoHydrationPostMPR: 'segDataOverlayNoHydrationPostMpr.png',
+  },
+  mprThenSEGOverlayNoHydration: {
+    mprPreSEGOverlayNoHydration: 'mprPreSEGOverlayNoHydration.png',
+    mprPostSEGOverlayNoHydration: 'mprPostSEGOverlayNoHydration.png',
+  },
   rtHydration: {
     rtPostHydration: 'rtPostHydration.png',
     rtPreHydration: 'rtPreHydration.png',