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

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));