feat(data overlay): add foreground background control plus orientation change in the UI and add RTDOSE support (#5007)

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": "^3.9.5",
+    "@cornerstonejs/dicom-image-loader": "^3.11.6",
     "@ohif/core": "3.11.0-beta.23",
     "@ohif/ui": "3.11.0-beta.23",
     "dcmjs": "*",
@@ -51,12 +51,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^3.9.5",
-    "@cornerstonejs/ai": "^3.9.5",
-    "@cornerstonejs/core": "^3.9.5",
-    "@cornerstonejs/labelmap-interpolation": "^3.9.5",
-    "@cornerstonejs/polymorphic-segmentation": "^3.9.5",
-    "@cornerstonejs/tools": "^3.9.5",
+    "@cornerstonejs/adapters": "^3.11.6",
+    "@cornerstonejs/ai": "^3.11.6",
+    "@cornerstonejs/core": "^3.11.6",
+    "@cornerstonejs/labelmap-interpolation": "^3.11.6",
+    "@cornerstonejs/polymorphic-segmentation": "^3.11.6",
+    "@cornerstonejs/tools": "^3.11.6",
     "@itk-wasm/morphological-contour-interpolation": "1.1.0",
     "@kitware/vtk.js": "32.12.0",
     "html2canvas": "^1.4.1",

extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useRef, useCallback, useState } from 'react';
 import * as cs3DTools from '@cornerstonejs/tools';
 import { Enums, eventTarget, getEnabledElement } from '@cornerstonejs/core';
 import { MeasurementService } from '@ohif/core';
-import { AllInOneMenu } from '@ohif/ui-next';
 import { useViewportDialog } from '@ohif/ui-next';
 import type { Types as csTypes } from '@cornerstonejs/core';
 
@@ -14,12 +13,11 @@ import CinePlayer from '../components/CinePlayer';
 import type { Types } from '@ohif/core';
 
 import OHIFViewportActionCorners from '../components/OHIFViewportActionCorners';
-import { getWindowLevelActionMenu } from '../components/WindowLevelActionMenu/getWindowLevelActionMenu';
-import { getViewportDataOverlaySettingsMenu } from '../components/ViewportDataOverlaySettingMenu';
 import { getViewportPresentations } from '../utils/presentations/getViewportPresentations';
 import { useSynchronizersStore } from '../stores/useSynchronizersStore';
 import ActiveViewportBehavior from '../utils/ActiveViewportBehavior';
 import { WITH_NAVIGATION } from '../services/ViewportService/CornerstoneViewportService';
+import { useViewportActionCorners } from '../hooks';
 
 const STACK = 'stack';
 
@@ -321,49 +319,15 @@ const OHIFCornerstoneViewport = React.memo(
       };
     }, [displaySets, elementRef, viewportId, isJumpToMeasurementDisabled, servicesManager]);
 
-    // Set up the window level action menu in the viewport action corners.
-    useEffect(() => {
-      const windowLevelActionMenu = customizationService.getCustomization(
-        'viewportActionMenu.windowLevelActionMenu'
-      );
-      const segmentationOverlay = customizationService.getCustomization(
-        'viewportActionMenu.segmentationOverlay'
-      );
-
-      if (windowLevelActionMenu?.enabled) {
-        viewportActionCornersService.addComponent({
-          viewportId,
-          id: 'windowLevelActionMenu',
-          component: getWindowLevelActionMenu({
-            viewportId,
-            element: elementRef.current,
-            displaySets,
-            servicesManager,
-            commandsManager,
-            location: windowLevelActionMenu.location,
-            verticalDirection: AllInOneMenu.VerticalDirection.TopToBottom,
-            horizontalDirection: AllInOneMenu.HorizontalDirection.RightToLeft,
-          }),
-          location: windowLevelActionMenu.location,
-        });
-      }
-
-      if (segmentationOverlay?.enabled) {
-        viewportActionCornersService.addComponent({
-          viewportId,
-          id: 'segmentation',
-          component: getViewportDataOverlaySettingsMenu({
-            viewportId,
-            element: elementRef.current,
-            displaySets,
-            servicesManager,
-            commandsManager,
-            location: segmentationOverlay.location,
-          }),
-          location: segmentationOverlay.location,
-        });
-      }
-    }, [displaySets, viewportId, viewportActionCornersService, servicesManager, commandsManager]);
+    // Set up the window level action menu in the viewport action corners using the custom hook
+    useViewportActionCorners({
+      viewportId,
+      elementRef,
+      displaySets,
+      viewportActionCornersService,
+      customizationService,
+      commandsManager,
+    });
 
     const Notification = customizationService.getCustomization('ui.notificationComponent');
 
@@ -524,22 +488,18 @@ OHIFCornerstoneViewport.displayName = 'OHIFCornerstoneViewport';
 
 function areEqual(prevProps, nextProps) {
   if (nextProps.needsRerendering) {
-    console.debug('OHIFCornerstoneViewport: Rerender caused by: needsRerendering');
     return false;
   }
 
   if (prevProps.displaySets.length !== nextProps.displaySets.length) {
-    console.debug('OHIFCornerstoneViewport: Rerender caused by: displaySets length change');
     return false;
   }
 
   if (prevProps.viewportOptions.orientation !== nextProps.viewportOptions.orientation) {
-    console.debug('OHIFCornerstoneViewport: Rerender caused by: orientation change');
     return false;
   }
 
   if (prevProps.viewportOptions.toolGroupId !== nextProps.viewportOptions.toolGroupId) {
-    console.debug('OHIFCornerstoneViewport: Rerender caused by: toolGroupId change');
     return false;
   }
 
@@ -547,12 +507,10 @@ function areEqual(prevProps, nextProps) {
     nextProps.viewportOptions.viewportType &&
     prevProps.viewportOptions.viewportType !== nextProps.viewportOptions.viewportType
   ) {
-    console.debug('OHIFCornerstoneViewport: Rerender caused by: viewportType change');
     return false;
   }
 
   if (nextProps.viewportOptions.needsRerendering) {
-    console.debug('OHIFCornerstoneViewport: Rerender caused by: viewportOptions.needsRerendering');
     return false;
   }
 
@@ -560,7 +518,6 @@ function areEqual(prevProps, nextProps) {
   const nextDisplaySets = nextProps.displaySets;
 
   if (prevDisplaySets.length !== nextDisplaySets.length) {
-    console.debug('OHIFCornerstoneViewport: Rerender caused by: displaySets length mismatch');
     return false;
   }
 
@@ -573,13 +530,11 @@ function areEqual(prevProps, nextProps) {
     );
 
     if (!foundDisplaySet) {
-      console.debug('OHIFCornerstoneViewport: Rerender caused by: displaySet not found');
       return false;
     }
 
     // check they contain the same image
     if (foundDisplaySet.images?.length !== prevDisplaySet.images?.length) {
-      console.debug('OHIFCornerstoneViewport: Rerender caused by: images length mismatch');
       return false;
     }
 
@@ -587,7 +542,6 @@ function areEqual(prevProps, nextProps) {
     if (foundDisplaySet.images?.length) {
       for (let j = 0; j < foundDisplaySet.images.length; j++) {
         if (foundDisplaySet.images[j].imageId !== prevDisplaySet.images[j].imageId) {
-          console.debug('OHIFCornerstoneViewport: Rerender caused by: imageId mismatch');
           return false;
         }
       }

extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx

@@ -63,7 +63,7 @@ function CornerstoneImageScrollbar({
     }
     const { viewportType } = viewportData;
     const eventId =
-      (viewportType === Enums.ViewportType.STACK && Enums.Events.STACK_VIEWPORT_SCROLL) ||
+      (viewportType === Enums.ViewportType.STACK && Enums.Events.STACK_NEW_IMAGE) ||
       (viewportType === Enums.ViewportType.ORTHOGRAPHIC && Enums.Events.VOLUME_NEW_IMAGE) ||
       Enums.Events.IMAGE_RENDERED;
 
@@ -72,11 +72,11 @@ function CornerstoneImageScrollbar({
       if (!viewport || viewport instanceof VolumeViewport3D) {
         return;
       }
-      const { imageIndex, newImageIdIndex = imageIndex } = event.detail;
+      const { imageIndex, newImageIdIndex = imageIndex, imageIdIndex } = event.detail;
       const numberOfSlices = viewport.getNumberOfSlices();
       // find the index of imageId in the imageIds
       setImageSliceData({
-        imageIndex: newImageIdIndex,
+        imageIndex: newImageIdIndex ?? imageIdIndex,
         numberOfSlices,
       });
     };

extensions/cornerstone/src/commandsModule.ts

@@ -3,6 +3,7 @@ import {
   StackViewport,
   VolumeViewport,
   utilities as csUtils,
+  Enums as CoreEnums,
   Types as CoreTypes,
   BaseVolumeViewport,
 } from '@cornerstonejs/core';
@@ -248,7 +249,7 @@ function commandsModule({
     },
     updateStoredPositionPresentation: ({
       viewportId,
-      displaySetInstanceUID,
+      displaySetInstanceUIDs,
       referencedImageId,
       options,
     }) => {
@@ -256,11 +257,24 @@ function commandsModule({
       const { positionPresentationStore, setPositionPresentation, getPositionPresentationId } =
         usePositionPresentationStore.getState();
 
-      // Look inside positionPresentationStore and find the key that includes the displaySetInstanceUID
+      // Look inside positionPresentationStore and find the key that includes ALL the displaySetInstanceUIDs
       // and the value has viewportId as activeViewportId.
-      const previousReferencedDisplaySetStoreKey = Object.entries(positionPresentationStore).find(
-        ([key, value]) => key.includes(displaySetInstanceUID) && value.viewportId === viewportId
-      )?.[0];
+      let previousReferencedDisplaySetStoreKey;
+
+      if (
+        displaySetInstanceUIDs &&
+        Array.isArray(displaySetInstanceUIDs) &&
+        displaySetInstanceUIDs.length > 0
+      ) {
+        previousReferencedDisplaySetStoreKey = Object.entries(positionPresentationStore).find(
+          ([key, value]) => {
+            return (
+              displaySetInstanceUIDs.every(uid => key.includes(uid)) &&
+              value.viewportId === viewportId
+            );
+          }
+        )?.[0];
+      }
 
       // Create presentation data with referencedImageId and options if provided
       const presentationData = referencedImageId
@@ -282,7 +296,7 @@ function commandsModule({
       // so we need to grab the positionPresentationId directly from the store,
       // Todo: this is really hacky, we should have a better way for this
       const positionPresentationId = getPositionPresentationId({
-        displaySetInstanceUIDs: [displaySetInstanceUID],
+        displaySetInstanceUIDs,
         viewportId,
       });
 
@@ -719,7 +733,7 @@ function commandsModule({
         return;
       }
 
-      if (!toolGroup.hasTool(toolName)) {
+      if (!toolGroup?.hasTool(toolName)) {
         return;
       }
 
@@ -1019,7 +1033,7 @@ function commandsModule({
 
       const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
 
-      if (!toolGroup.hasTool(toolName)) {
+      if (!toolGroup?.hasTool(toolName)) {
         return;
       }
 
@@ -1189,6 +1203,9 @@ function commandsModule({
     },
     /**
      * Creates a labelmap for the active viewport
+     *
+     * The created labelmap will be registered as a display set and also added
+     * as a segmentation representation to the viewport.
      */
     createLabelmapForViewport: async ({ viewportId, options = {} }) => {
       const { viewportGridService, displaySetService, segmentationService } =
@@ -1209,6 +1226,7 @@ function commandsModule({
 
       const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
 
+      // This will create the segmentation and register it as a display set
       const generatedSegmentationId = await segmentationService.createLabelmapForDisplaySet(
         displaySet,
         {
@@ -1225,6 +1243,7 @@ function commandsModule({
         }
       );
 
+      // Also add the segmentation representation to the viewport
       await segmentationService.addSegmentationRepresentation(viewportId, {
         segmentationId,
         type: Enums.SegmentationRepresentations.Labelmap,
@@ -1741,6 +1760,30 @@ function commandsModule({
         });
       });
     },
+    setViewportOrientation: ({ viewportId, orientation }) => {
+      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+
+      if (!viewport || viewport.type !== CoreEnums.ViewportType.ORTHOGRAPHIC) {
+        console.warn('Orientation can only be set on volume viewports');
+        return;
+      }
+
+      // Get display sets for this viewport to verify at least one is reconstructable
+      const displaySetUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId);
+      const displaySets = displaySetUIDs.map(uid => displaySetService.getDisplaySetByUID(uid));
+
+      if (!displaySets.some(ds => ds.isReconstructable)) {
+        console.warn('Cannot change orientation: No reconstructable display sets in viewport');
+        return;
+      }
+
+      viewport.setOrientation(orientation);
+      viewport.render();
+
+      // update the orientation in the viewport info
+      const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+      viewportInfo.setOrientation(orientation);
+    },
   };
 
   const definitions = {
@@ -2021,6 +2064,7 @@ function commandsModule({
     decreaseBrushSize: actions.decreaseBrushSize,
     addNewSegment: actions.addNewSegment,
     loadSegmentationDisplaySetsForViewport: actions.loadSegmentationDisplaySetsForViewport,
+    setViewportOrientation: actions.setViewportOrientation,
   };
 
   return {

extensions/cornerstone/src/components/OHIFViewportActionCorners.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useViewportActionCornersContext } from '../contextProviders/ViewportActionCornersProvider';
 import { useSystem } from '@ohif/core';
+import { useViewportGrid } from '@ohif/ui-next';
 
 export type OHIFViewportActionCornersProps = {
   viewportId: string;
@@ -9,8 +10,13 @@ export type OHIFViewportActionCornersProps = {
 function OHIFViewportActionCorners({ viewportId }: OHIFViewportActionCornersProps) {
   const { servicesManager } = useSystem();
   const [viewportActionCornersState] = useViewportActionCornersContext();
+
+  const [viewportGrid] = useViewportGrid();
+  const isActiveViewport = viewportGrid.activeViewportId === viewportId;
+
   const ViewportActionCorners =
     servicesManager.services.customizationService.getCustomization('ui.viewportActionCorner');
+
   if (!viewportActionCornersState[viewportId]) {
     return null;
   }
@@ -18,7 +24,8 @@ function OHIFViewportActionCorners({ viewportId }: OHIFViewportActionCornersProp
   return (
     <ViewportActionCorners
       cornerComponents={viewportActionCornersState[viewportId]}
-    ></ViewportActionCorners>
+      isActiveViewport={isActiveViewport}
+    />
   );
 }
 

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

@@ -0,0 +1,478 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  Icons,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+} from '@ohif/ui-next';
+import { useSystem } from '@ohif/core';
+
+import { useViewportDisplaySets } from '../../hooks/useViewportDisplaySets';
+
+function ViewportDataOverlayMenu({ viewportId }: withAppTypes<{ viewportId: string }>) {
+  const { commandsManager, servicesManager } = useSystem();
+  const [pendingForegrounds, setPendingForegrounds] = useState<string[]>([]);
+  const [pendingSegmentations, setPendingSegmentations] = useState<string[]>([]);
+  const [thresholdOpacityEnabled, setThresholdOpacityEnabled] = useState(false);
+
+  const { hangingProtocolService } = servicesManager.services;
+
+  const {
+    backgroundDisplaySet,
+    potentialOverlayDisplaySets,
+    potentialForegroundDisplaySets,
+    potentialBackgroundDisplaySets,
+    overlayDisplaySets,
+    foregroundDisplaySets,
+  } = useViewportDisplaySets(viewportId);
+
+  /**
+   * Change the background display set
+   */
+  const handleBackgroundSelection = (newBackgroundDisplaySet: AppTypes.DisplaySet) => {
+    const updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
+      viewportId,
+      newBackgroundDisplaySet.displaySetInstanceUID
+    );
+
+    commandsManager.run('setDisplaySetsForViewports', {
+      viewportsToUpdate: updatedViewports,
+    });
+  };
+
+  /**
+   * Handle threshold and opacity toggle
+   */
+  const handleThresholdOpacityToggle = (checked: boolean) => {
+    setThresholdOpacityEnabled(checked);
+
+    if (foregroundDisplaySets.length > 0) {
+      // Example implementation of threshold/opacity adjustment
+      commandsManager.runCommand('setForegroundThresholdOpacity', {
+        viewportId,
+        enabled: checked,
+      });
+    }
+  };
+
+  /**
+   * Replace a display set layer with a new one
+   */
+  const handleReplaceDisplaySetLayer = (
+    currentDisplaySetInstanceUID: string,
+    newDisplaySetInstanceUID: string
+  ) => {
+    // Remove current display set
+    commandsManager.runCommand('removeDisplaySetLayer', {
+      viewportId,
+      displaySetInstanceUID: currentDisplaySetInstanceUID,
+    });
+
+    setTimeout(() => {
+      commandsManager.runCommand('addDisplaySetAsLayer', {
+        viewportId,
+        displaySetInstanceUID: newDisplaySetInstanceUID,
+      });
+    }, 0);
+  };
+
+  /**
+   * Remove a display set layer
+   */
+  const handleRemoveDisplaySetLayer = (displaySetInstanceUID: string) => {
+    commandsManager.runCommand('removeDisplaySetLayer', {
+      viewportId,
+      displaySetInstanceUID,
+    });
+  };
+
+  /**
+   * Add a display set as a layer
+   */
+  const handleAddDisplaySetAsLayer = (displaySetInstanceUID: string) => {
+    commandsManager.runCommand('addDisplaySetAsLayer', {
+      viewportId,
+      displaySetInstanceUID,
+    });
+  };
+
+  /**
+   * Handle overlay display set selection change
+   */
+  const handleOverlaySelectionChange = (
+    currentDisplaySet: AppTypes.DisplaySet,
+    newDisplaySetInstanceUID: string
+  ) => {
+    if (newDisplaySetInstanceUID === currentDisplaySet.displaySetInstanceUID) {
+      return;
+    }
+
+    // Find the selected display set
+    const selectedDisplaySet = potentialOverlayDisplaySets.find(
+      ds => ds.displaySetInstanceUID === newDisplaySetInstanceUID
+    );
+
+    if (selectedDisplaySet) {
+      handleReplaceDisplaySetLayer(
+        currentDisplaySet.displaySetInstanceUID,
+        selectedDisplaySet.displaySetInstanceUID
+      );
+    }
+  };
+
+  /**
+   * Handle foreground display set selection change
+   */
+  const handleForegroundSelectionChange = (
+    currentDisplaySet: AppTypes.DisplaySet,
+    newDisplaySetInstanceUID: string
+  ) => {
+    if (newDisplaySetInstanceUID === currentDisplaySet.displaySetInstanceUID) {
+      return;
+    }
+
+    // Find the selected display set
+    const selectedDisplaySet = potentialForegroundDisplaySets.find(
+      ds => ds.displaySetInstanceUID === newDisplaySetInstanceUID
+    );
+
+    if (selectedDisplaySet) {
+      handleReplaceDisplaySetLayer(
+        currentDisplaySet.displaySetInstanceUID,
+        selectedDisplaySet.displaySetInstanceUID
+      );
+    }
+  };
+
+  /**
+   * Handle pending segmentation selection
+   */
+  const handlePendingSegmentationSelection = (pendingId: string, displaySetInstanceUID: string) => {
+    const selectedDisplaySet = potentialOverlayDisplaySets.find(
+      ds => ds.displaySetInstanceUID === displaySetInstanceUID
+    );
+
+    if (selectedDisplaySet) {
+      handleAddDisplaySetAsLayer(selectedDisplaySet.displaySetInstanceUID);
+      // Remove this pending segmentation from the list
+      setPendingSegmentations(pendingSegmentations.filter(id => id !== pendingId));
+    }
+  };
+
+  /**
+   * Handle pending foreground selection
+   */
+  const handlePendingForegroundSelection = (pendingId: string, displaySetInstanceUID: string) => {
+    const selectedDisplaySet = potentialForegroundDisplaySets.find(
+      ds => ds.displaySetInstanceUID === displaySetInstanceUID
+    );
+
+    if (selectedDisplaySet) {
+      handleAddDisplaySetAsLayer(selectedDisplaySet.displaySetInstanceUID);
+      // Remove this pending foreground from the list
+      setPendingForegrounds(pendingForegrounds.filter(id => id !== pendingId));
+    }
+  };
+
+  return (
+    <div className="bg-popover flex h-full w-[275px] flex-col rounded rounded-md p-1.5">
+      {/* Top buttons row */}
+      <div className={`flex`}>
+        <Button
+          variant="ghost"
+          className="text-primary flex items-center p-1"
+          onClick={() => {
+            // Add a new pending foreground slot with a unique ID
+            setPendingForegrounds([...pendingForegrounds, `pending-${Date.now()}`]);
+          }}
+          disabled={potentialForegroundDisplaySets.length === 0}
+        >
+          <Icons.Plus className="h-4 w-4" />
+          Foreground
+        </Button>
+        <Button
+          variant="ghost"
+          className="text-primary ml-2 flex items-center"
+          disabled={potentialOverlayDisplaySets.length === 0}
+          onClick={() => {
+            setPendingSegmentations([...pendingSegmentations, `seg-${Date.now()}`]);
+          }}
+        >
+          <Icons.Plus className="h-4 w-4" />
+          Segmentation
+        </Button>
+      </div>
+
+      <div className="">
+        {/* Overlays Segmentation section */}
+        <div className="my-2 ml-1">
+          {overlayDisplaySets.map((displaySet, index) => (
+            <div
+              key={displaySet.displaySetInstanceUID}
+              className="mb-1 flex items-center"
+            >
+              <Icons.LayerSegmentation className="text-muted-foreground mr-1 h-6 w-6 flex-shrink-0" />
+              <Select
+                value={displaySet.displaySetInstanceUID}
+                onValueChange={value => handleOverlaySelectionChange(displaySet, value)}
+              >
+                <SelectTrigger className="flex-1">
+                  <SelectValue>{displaySet.label?.toUpperCase()}</SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {/* Include both potential overlays and the current overlay */}
+                  <SelectItem
+                    key={displaySet.displaySetInstanceUID}
+                    value={displaySet.displaySetInstanceUID}
+                  >
+                    {displaySet.label}
+                  </SelectItem>
+                  {potentialOverlayDisplaySets.map(item => (
+                    <SelectItem
+                      key={item.displaySetInstanceUID}
+                      value={item.displaySetInstanceUID}
+                    >
+                      {item.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="ml-2 flex-shrink-0"
+                  >
+                    <Icons.More className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem
+                    onClick={() => handleRemoveDisplaySetLayer(displaySet.displaySetInstanceUID)}
+                  >
+                    Remove
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          ))}
+
+          {pendingSegmentations.map(pendingId => (
+            <div
+              key={pendingId}
+              className="mb-2 flex items-center"
+            >
+              <Icons.LayerSegmentation className="text-muted-foreground mr-1 h-6 w-6 flex-shrink-0" />
+              <Select
+                value=""
+                onValueChange={value => handlePendingSegmentationSelection(pendingId, value)}
+              >
+                <SelectTrigger className="flex-1">
+                  <SelectValue placeholder="SELECT A SEGMENTATION" />
+                </SelectTrigger>
+                <SelectContent>
+                  {potentialOverlayDisplaySets.map(item => (
+                    <SelectItem
+                      key={item.displaySetInstanceUID}
+                      value={item.displaySetInstanceUID}
+                    >
+                      {item.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="ml-2 flex-shrink-0"
+                  >
+                    <Icons.More className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem
+                    onClick={() => {
+                      // Remove this pending segmentation
+                      setPendingSegmentations(pendingSegmentations.filter(id => id !== pendingId));
+                    }}
+                  >
+                    Cancel
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          ))}
+        </div>
+        {/* Foregrounds section */}
+        <div className="my-2 px-1">
+          {foregroundDisplaySets.map((displaySet, index) => (
+            <div
+              key={displaySet.displaySetInstanceUID}
+              className="mb-1 flex items-center"
+            >
+              <Icons.LayerForeground className="text-muted-foreground mr-1 h-6 w-6 flex-shrink-0" />
+              <Select
+                value={displaySet.displaySetInstanceUID}
+                onValueChange={value => handleForegroundSelectionChange(displaySet, value)}
+              >
+                <SelectTrigger className="flex-1">
+                  <SelectValue>{displaySet.label?.toUpperCase()}</SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {/* Include both potential foregrounds and the current foreground */}
+                  <SelectItem
+                    key={displaySet.displaySetInstanceUID}
+                    value={displaySet.displaySetInstanceUID}
+                  >
+                    {displaySet.label}
+                  </SelectItem>
+                  {potentialForegroundDisplaySets.map(item => (
+                    <SelectItem
+                      key={item.displaySetInstanceUID}
+                      value={item.displaySetInstanceUID}
+                    >
+                      {item.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="ml-2 flex-shrink-0"
+                  >
+                    <Icons.More className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem
+                    onClick={() => handleRemoveDisplaySetLayer(displaySet.displaySetInstanceUID)}
+                  >
+                    Remove
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          ))}
+
+          {pendingForegrounds.map(pendingId => (
+            <div
+              key={pendingId}
+              className="mb-2 flex items-center"
+            >
+              <Icons.LayerForeground className="text-muted-foreground mr-1 h-6 w-6 flex-shrink-0" />
+              <Select
+                value=""
+                onValueChange={value => handlePendingForegroundSelection(pendingId, value)}
+              >
+                <SelectTrigger className="flex-1">
+                  <SelectValue placeholder="SELECT A FOREGROUND" />
+                </SelectTrigger>
+                <SelectContent>
+                  {potentialForegroundDisplaySets.map(item => (
+                    <SelectItem
+                      key={item.displaySetInstanceUID}
+                      value={item.displaySetInstanceUID}
+                    >
+                      {item.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="ml-2 flex-shrink-0"
+                  >
+                    <Icons.More className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem
+                    onClick={() => {
+                      // Remove this pending foreground
+                      setPendingForegrounds(pendingForegrounds.filter(id => id !== pendingId));
+                    }}
+                  >
+                    Cancel
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          ))}
+        </div>
+        {/* Background section */}
+        <div className="mt-1 mb-1 flex items-center px-1">
+          <Icons.LayerBackground className="text-muted-foreground mr-1 h-6 w-6 flex-shrink-0" />
+          <Select
+            value={backgroundDisplaySet.displaySetInstanceUID}
+            onValueChange={value => {
+              const selectedDisplaySet = potentialBackgroundDisplaySets.find(
+                ds => ds.displaySetInstanceUID === value
+              );
+              if (selectedDisplaySet) {
+                handleBackgroundSelection(selectedDisplaySet);
+              }
+            }}
+          >
+            <SelectTrigger className="flex-1">
+              <SelectValue>
+                {(
+                  backgroundDisplaySet.SeriesDescription ||
+                  backgroundDisplaySet.label ||
+                  'background'
+                ).toUpperCase()}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              {potentialBackgroundDisplaySets.map(displaySet => (
+                <SelectItem
+                  key={displaySet.displaySetInstanceUID}
+                  value={displaySet.displaySetInstanceUID}
+                >
+                  {displaySet.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+      {/* {foregroundDisplaySets.length > 0 && (
+        <div className="mt-1 ml-7">
+          <div className="flex items-center">
+            <Switch
+              id="threshold-opacity-switch"
+              className="mr-2"
+              checked={thresholdOpacityEnabled}
+              onCheckedChange={handleThresholdOpacityToggle}
+            />
+            <label
+              htmlFor="threshold-opacity-switch"
+              className="text-muted-foreground cursor-pointer text-sm"
+              onClick={() => setThresholdOpacityEnabled(!thresholdOpacityEnabled)}
+            >
+              Control threshold & opacity
+            </label>
+          </div>
+        </div>
+      )} */}
+    </div>
+  );
+}
+
+export default ViewportDataOverlayMenu;

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

@@ -0,0 +1,62 @@
+import React, { ReactNode } from 'react';
+import {
+  Button,
+  cn,
+  Icons,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  useViewportGrid,
+} from '@ohif/ui-next';
+import ViewportDataOverlayMenu from './ViewportDataOverlayMenu';
+import classNames from 'classnames';
+import { useSystem } from '@ohif/core';
+
+export function ViewportDataOverlayMenuWrapper({
+  viewportId,
+  displaySets,
+  location,
+}: withAppTypes<{
+  viewportId: string;
+  element: HTMLElement;
+}>): ReactNode {
+  const { servicesManager } = useSystem();
+  const { viewportActionCornersService } = servicesManager.services;
+  const [viewportGrid] = useViewportGrid();
+
+  const { align, side } = viewportActionCornersService.getAlignAndSide(location);
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        asChild
+        className="flex items-center justify-center"
+      >
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn(
+            viewportGrid.activeViewportId === viewportId
+              ? 'visible'
+              : 'invisible group-hover/pane:visible'
+          )}
+        >
+          <Icons.ViewportViews className={classNames('text-highlight')} />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="border-none bg-transparent p-0 shadow-none"
+        side={side}
+        align={align}
+        alignOffset={0}
+        sideOffset={5}
+      >
+        <ViewportDataOverlayMenu
+          className="w-full"
+          viewportId={viewportId}
+          displaySets={displaySets}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -1,136 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Button, Icons, Separator } from '@ohif/ui-next';
-import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
-
-function ViewportSegmentationMenu({
-  viewportId,
-  servicesManager,
-}: withAppTypes<{ viewportId: string }>) {
-  const { segmentationService } = servicesManager.services;
-  const [activeSegmentations, setActiveSegmentations] = useState([]);
-  const [availableSegmentations, setAvailableSegmentations] = useState([]);
-
-  useEffect(() => {
-    const updateSegmentations = () => {
-      const active = segmentationService.getSegmentationRepresentations(viewportId);
-      setActiveSegmentations(active);
-
-      const all = segmentationService.getSegmentations();
-      const available = all.filter(
-        seg => !active.some(activeSeg => activeSeg.segmentationId === seg.segmentationId)
-      );
-      setAvailableSegmentations(available);
-    };
-
-    updateSegmentations();
-
-    const subscriptions = [
-      segmentationService.EVENTS.SEGMENTATION_MODIFIED,
-      segmentationService.EVENTS.SEGMENTATION_REMOVED,
-      segmentationService.EVENTS.SEGMENTATION_REPRESENTATION_MODIFIED,
-    ].map(event => segmentationService.subscribe(event, updateSegmentations));
-
-    return () => {
-      subscriptions.forEach(subscription => subscription.unsubscribe());
-    };
-  }, [segmentationService, viewportId]);
-
-  const toggleSegmentationRepresentationVisibility = (
-    segmentationId,
-    type = SegmentationRepresentations.Labelmap
-  ) => {
-    segmentationService.toggleSegmentationRepresentationVisibility(viewportId, {
-      segmentationId,
-      type,
-    });
-  };
-
-  const addSegmentationToViewport = segmentationId => {
-    segmentationService.addSegmentationRepresentation(viewportId, { segmentationId });
-  };
-
-  const removeSegmentationFromViewport = segmentationId => {
-    segmentationService.removeSegmentationRepresentations(viewportId, {
-      segmentationId,
-    });
-  };
-
-  return (
-    <div className="bg-muted flex h-full w-[262px] flex-col rounded p-3">
-      <span className="text-muted-foreground mb-2 text-xs font-semibold">Current Viewport</span>
-      <ul className="space-y-1">
-        {activeSegmentations.map(segmentation => (
-          <li
-            key={segmentation.id}
-            className="flex items-center text-sm"
-          >
-            <Button
-              variant="ghost"
-              size="icon"
-              className="text-muted-foreground mr-2"
-              onClick={() => removeSegmentationFromViewport(segmentation.segmentationId)}
-            >
-              <Icons.Minus className="h-6 w-6" />
-            </Button>
-            <span className="text-foreground flex-grow">{segmentation.label}</span>
-            {segmentation.visible ? (
-              <Button
-                variant="ghost"
-                size="icon"
-                className="text-muted-foreground"
-                onClick={() =>
-                  toggleSegmentationRepresentationVisibility(
-                    segmentation.segmentationId,
-                    segmentation.type
-                  )
-                }
-              >
-                <Icons.Hide className="h-6 w-6" />
-              </Button>
-            ) : (
-              <Button
-                variant="ghost"
-                size="icon"
-                className="text-muted-foreground"
-                onClick={() =>
-                  toggleSegmentationRepresentationVisibility(
-                    segmentation.segmentationId,
-                    segmentation.type
-                  )
-                }
-              >
-                <Icons.Show className="h-6 w-6" />
-              </Button>
-            )}
-          </li>
-        ))}
-      </ul>
-      {availableSegmentations.length > 0 && (
-        <>
-          <Separator className="bg-input mb-3" />
-          <span className="text-muted-foreground mb-2 text-xs font-semibold">Available</span>
-          <ul className="space-y-1">
-            {availableSegmentations.map(({ segmentationId, label }) => (
-              <li
-                key={segmentationId}
-                className="flex items-center text-sm"
-              >
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="text-muted-foreground mr-2"
-                  onClick={() => addSegmentationToViewport(segmentationId)}
-                >
-                  <Icons.Plus className="h-6 w-6" />
-                </Button>
-                <span className="text-foreground/60">{label}</span>
-              </li>
-            ))}
-          </ul>
-        </>
-      )}
-    </div>
-  );
-}
-
-export default ViewportSegmentationMenu;

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

@@ -1,83 +0,0 @@
-import React, { ReactNode, useEffect, useState } from 'react';
-import { Button, Icons, Popover, PopoverContent, PopoverTrigger } from '@ohif/ui-next';
-import ViewportSegmentationMenu from './ViewportSegmentationMenu';
-import classNames from 'classnames';
-import { useSegmentations } from '../../hooks/useSegmentations';
-
-export function ViewportSegmentationMenuWrapper({
-  viewportId,
-  displaySets,
-  servicesManager,
-  commandsManager,
-  location,
-}: withAppTypes<{
-  viewportId: string;
-  element: HTMLElement;
-}>): ReactNode {
-  const { viewportActionCornersService, viewportGridService } = servicesManager.services;
-
-  const segmentations = useSegmentations({ servicesManager });
-
-  const activeViewportId = viewportGridService.getActiveViewportId();
-  const isActiveViewport = viewportId === activeViewportId;
-
-  const { align, side } = getAlignAndSide(viewportActionCornersService, location);
-
-  if (!segmentations?.length) {
-    return null;
-  }
-
-  return (
-    <Popover>
-      <PopoverTrigger
-        asChild
-        className="flex items-center justify-center"
-      >
-        <Button
-          variant="ghost"
-          size="icon"
-        >
-          <Icons.ViewportViews
-            className={classNames(
-              'text-highlight',
-              isActiveViewport ? 'visible' : 'invisible group-hover/pane:visible'
-            )}
-          />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="border-none bg-transparent p-0 shadow-none"
-        side={side}
-        align={align}
-        alignOffset={-15}
-        sideOffset={5}
-      >
-        <ViewportSegmentationMenu
-          className="w-full"
-          viewportId={viewportId}
-          displaySets={displaySets}
-          servicesManager={servicesManager}
-          commandsManager={commandsManager}
-        />
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-const getAlignAndSide = (viewportActionCornersService, location) => {
-  const ViewportActionCornersLocations = viewportActionCornersService.LOCATIONS;
-
-  switch (location) {
-    case ViewportActionCornersLocations.topLeft:
-      return { align: 'start', side: 'bottom' };
-    case ViewportActionCornersLocations.topRight:
-      return { align: 'end', side: 'bottom' };
-    case ViewportActionCornersLocations.bottomLeft:
-      return { align: 'start', side: 'top' };
-    case ViewportActionCornersLocations.bottomRight:
-      return { align: 'end', side: 'top' };
-    default:
-      console.debug('Unknown location, defaulting to bottom-start');
-      return { align: 'start', side: 'bottom' };
-  }
-};

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { ViewportSegmentationMenuWrapper } from './ViewportSegmentationMenuWrapper';
+import { ViewportDataOverlayMenuWrapper } from './ViewportDataOverlayMenuWrapper';
 
 export function getViewportDataOverlaySettingsMenu(
   props: withAppTypes<{
@@ -7,5 +7,5 @@ export function getViewportDataOverlaySettingsMenu(
     element: HTMLElement;
   }>
 ): ReactNode {
-  return <ViewportSegmentationMenuWrapper {...props} />;
+  return <ViewportDataOverlayMenuWrapper {...props} />;
 }

extensions/cornerstone/src/components/ViewportDataOverlaySettingMenu/utils.ts

@@ -0,0 +1,156 @@
+import { utilities as csUtils } from '@cornerstonejs/core';
+
+export const DEFAULT_COLORMAP = 'hsv';
+export const DEFAULT_OPACITY = 0.5;
+export const DEFAULT_OPACITY_PERCENT = DEFAULT_OPACITY * 100;
+export const DERIVED_OVERLAY_MODALITIES = ['SEG', 'RTSTRUCT'];
+
+/**
+ * Get modality-specific color and opacity settings from the customization service
+ */
+export function getModalityOverlayColormap(customizationService, modality) {
+  const modalityOverlayDefaultColorMaps = customizationService?.getCustomization(
+    'cornerstone.modalityOverlayDefaultColorMaps'
+  ) || { defaultSettings: {} };
+
+  return (
+    modalityOverlayDefaultColorMaps.defaultSettings[modality] || {
+      colormap: DEFAULT_COLORMAP,
+      opacity: DEFAULT_OPACITY,
+    }
+  );
+}
+
+/**
+ * Identifies display sets that can be used as overlays for a specific viewport.
+ *
+ * "Enhanced" display sets are those that:
+ * 1. Are not already in the viewport
+ * 2. Are evaluated for their ability to be overlaid onto the background display set
+ * 3. Have an "isOverlayable" flag indicating if they're compatible with the viewport
+ *
+ * A display set is considered overlayable when:
+ * - The background display set is reconstructable
+ * - The display set is not unsupported
+ * - The Frame of Reference matches the background display set
+ * - For non-derived modalities: background can be a volume and display set is either multiframe or valid volume
+ *
+ * @returns {Object} Object containing:
+ *   - viewportDisplaySets: Display sets already in the viewport
+ *   - enhancedDisplaySets: Other display sets with overlayability assessment
+ */
+export function getEnhancedDisplaySets({ viewportId, services }) {
+  const { displaySetService, viewportGridService } = services;
+  const displaySetsUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId);
+  const allDisplaySets = displaySetService.getActiveDisplaySets();
+
+  const otherDisplaySets = allDisplaySets.filter(
+    displaySet => !displaySetsUIDs.includes(displaySet.displaySetInstanceUID)
+  );
+
+  const viewportDisplaySets = displaySetsUIDs.map(displaySetUID =>
+    displaySetService.getDisplaySetByUID(displaySetUID)
+  );
+
+  const backgroundCanBeVolume = csUtils.isValidVolume(viewportDisplaySets[0].imageIds);
+  const backgroundDisplaySet = viewportDisplaySets[0];
+
+  const enhancedDisplaySets = otherDisplaySets.map(displaySet => {
+    if (!backgroundDisplaySet.isReconstructable) {
+      return {
+        ...displaySet,
+        isOverlayable: false,
+      };
+    }
+
+    if (displaySet.unsupported) {
+      return {
+        ...displaySet,
+        isOverlayable: false,
+      };
+    }
+
+    // Check if Frame of Reference matches
+    if (
+      displaySet.FrameOfReferenceUID &&
+      displaySet.FrameOfReferenceUID !== backgroundDisplaySet.FrameOfReferenceUID
+    ) {
+      return {
+        ...displaySet,
+        isOverlayable: false,
+      };
+    }
+
+    // Special handling for derived modalities
+    if (!DERIVED_OVERLAY_MODALITIES.includes(displaySet.Modality)) {
+      if (!backgroundCanBeVolume) {
+        return {
+          ...displaySet,
+          isOverlayable: false,
+        };
+      }
+
+      const imageIds = displaySet.imageIds || displaySet.images?.map(image => image.imageId);
+      const isMultiframe = displaySet.isMultiFrame;
+
+      if (!isMultiframe && imageIds?.length > 0 && !csUtils.isValidVolume(imageIds)) {
+        return {
+          ...displaySet,
+          isOverlayable: false,
+        };
+      }
+    }
+
+    return {
+      ...displaySet,
+      isOverlayable: true,
+    };
+  });
+
+  return {
+    viewportDisplaySets,
+    enhancedDisplaySets,
+  };
+}
+
+/**
+ * Sort function: puts disabled items (isOverlayable: false) at the end
+ */
+export const sortByOverlayable = (a, b) => {
+  if (a.isOverlayable === b.isOverlayable) {
+    return 0;
+  }
+  return a.isOverlayable ? -1 : 1;
+};
+
+/**
+ * Create display set options based on modality and opacity settings
+ */
+export function createColormapOverlayDisplaySetOptions(displaySet, opacity, customizationService) {
+  if (displaySet.Modality === 'SEG') {
+    return {};
+  }
+
+  const modalitySettings = getModalityOverlayColormap(customizationService, displaySet.Modality);
+  return {
+    colormap: {
+      name: modalitySettings.colormap || DEFAULT_COLORMAP,
+      opacity: opacity / 100, // Convert from percentage to 0-1 range
+    },
+  };
+}
+
+/**
+ * Get segmentations that can be added as overlays to the viewport
+ *
+ * Note: This function is deprecated as we now use display sets for segmentations
+ */
+export function getAvailableSegmentations(segmentationService) {
+  const segmentations = segmentationService.getSegmentations() || [];
+  return segmentations.map(segmentation => ({
+    segmentationId: segmentation.segmentationId,
+    label: segmentation.label || 'Segmentation',
+    segments: segmentation.segments,
+    frameOfReferenceUID: segmentation.frameOfReferenceUID,
+  }));
+}

extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import { Icons, useViewportGrid } from '@ohif/ui-next';
+import { useSystem } from '@ohif/core';
+import { Enums } from '@cornerstonejs/core';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  Button,
+} from '@ohif/ui-next';
+
+function ViewportOrientationMenu({ location }: withAppTypes<{ location?: string }>) {
+  const { servicesManager, commandsManager } = useSystem();
+  const [viewportGridState, viewportGridService] = useViewportGrid();
+  const { cornerstoneViewportService, displaySetService } = servicesManager.services;
+
+  const viewportId = viewportGridState.activeViewportId;
+
+  const handleOrientationChange = (orientation: string) => {
+    const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+    const currentViewportType = viewportInfo?.getViewportType();
+
+    // Get the displaySets in this viewport
+    const displaySetUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId);
+    const displaySets = displaySetUIDs
+      .map(uid => displaySetService.getDisplaySetByUID(uid))
+      .filter(Boolean);
+
+    if (!displaySets.length) {
+      return;
+    }
+
+    // Check if at least one displaySet is reconstructable
+    const hasReconstructableDisplaySet = displaySets.some(ds => ds.isReconstructable);
+
+    if (!hasReconstructableDisplaySet) {
+      console.warn('Cannot change orientation: No reconstructable display sets in viewport');
+      return;
+    }
+
+    // Set the orientation enum based on the selected orientation
+    let orientationEnum;
+    switch (orientation.toLowerCase()) {
+      case 'axial':
+        orientationEnum = Enums.OrientationAxis.AXIAL;
+        break;
+      case 'sagittal':
+        orientationEnum = Enums.OrientationAxis.SAGITTAL;
+        break;
+      case 'coronal':
+        orientationEnum = Enums.OrientationAxis.CORONAL;
+        break;
+      default:
+        orientationEnum = Enums.OrientationAxis.ACQUISITION;
+    }
+
+    // If viewport is not already a volume type, we need to convert it
+    if (currentViewportType !== Enums.ViewportType.ORTHOGRAPHIC) {
+      // Configure the viewport to be a volume viewport with current display sets
+      const updatedViewport = {
+        viewportId,
+        displaySetInstanceUIDs: displaySetUIDs,
+        viewportOptions: {
+          viewportType: Enums.ViewportType.ORTHOGRAPHIC,
+          orientation: orientationEnum,
+        },
+        displaySetOptions: displaySetUIDs.map(() => ({})),
+      };
+
+      // Update the viewport to be a volume viewport
+      commandsManager.run('setDisplaySetsForViewports', {
+        viewportsToUpdate: [updatedViewport],
+      });
+    } else {
+      // Set the viewport orientation
+      commandsManager.runCommand('setViewportOrientation', {
+        viewportId,
+        orientation: orientationEnum,
+      });
+    }
+  };
+  const { viewportActionCornersService } = servicesManager.services;
+  const displaySetUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId);
+  const displaySets = displaySetUIDs
+    .map(uid => displaySetService.getDisplaySetByUID(uid))
+    .filter(Boolean);
+
+  if (!displaySets.length) {
+    return null;
+  }
+
+  const hasReconstructableDisplaySet = displaySets.some(ds => ds.isReconstructable);
+
+  // Get proper alignment and side based on the location
+  let align = 'center';
+  let side = 'bottom';
+
+  if (location !== undefined) {
+    const positioning = viewportActionCornersService.getAlignAndSide(location);
+    align = positioning.align;
+    side = positioning.side;
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="text-highlight"
+          disabled={!hasReconstructableDisplaySet}
+        >
+          <Icons.OrientationSwitch />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="min-w-[160px]"
+        align={align}
+        side={side}
+        sideOffset={5}
+      >
+        <DropdownMenuLabel className="-ml-1">Orientation</DropdownMenuLabel>
+        <DropdownMenuItem onClick={() => handleOrientationChange('axial')}>Axial</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => handleOrientationChange('sagittal')}>
+          Sagittal
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => handleOrientationChange('coronal')}>
+          Coronal
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => handleOrientationChange('acquisition')}>
+          Acquisition
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export default ViewportOrientationMenu;

extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenuWrapper.tsx

@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+import { useViewportGrid } from '@ohif/ui-next';
+import { cn } from '@ohif/ui-next';
+import ViewportOrientationMenu from './ViewportOrientationMenu';
+
+export function ViewportOrientationMenuWrapper({
+  viewportId,
+  location,
+}: withAppTypes<{
+  viewportId: string;
+  element: HTMLElement;
+  location: string;
+}>): ReactNode {
+  const [viewportGrid] = useViewportGrid();
+  const isActiveViewport = viewportId === viewportGrid.activeViewportId;
+
+  return (
+    <div
+      className={cn(
+        'flex justify-end',
+        isActiveViewport ? 'visible' : 'invisible group-hover/pane:visible'
+      )}
+    >
+      <ViewportOrientationMenu location={location} />
+    </div>
+  );
+}

extensions/cornerstone/src/components/ViewportOrientationMenu/index.tsx

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import { ViewportOrientationMenuWrapper } from './ViewportOrientationMenuWrapper';
+
+export function getViewportOrientationMenu(
+  props: withAppTypes<{
+    viewportId: string;
+    element: HTMLElement;
+    location: string;
+  }>
+): ReactNode {
+  return <ViewportOrientationMenuWrapper {...props} />;
+}
+
+export * from './ViewportOrientationMenu';

extensions/cornerstone/src/components/WindowLevelActionMenu/Colorbar.tsx

@@ -1,18 +1,18 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import { Switch } from '@ohif/ui-next';
-import { StackViewport, VolumeViewport } from '@cornerstonejs/core';
+import { StackViewport } from '@cornerstonejs/core';
 import { ColorbarProps } from '../../types/Colorbar';
 import { utilities } from '@cornerstonejs/core';
+import { useSystem } from '@ohif/core';
 
 export function setViewportColorbar(
   viewportId,
-  displaySets,
   commandsManager,
   servicesManager: AppTypes.ServicesManager,
   colorbarOptions
 ) {
-  const { cornerstoneViewportService } = servicesManager.services;
-  const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+  const { cornerstoneViewportService, viewportGridService } = servicesManager.services;
+  const displaySetInstanceUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId);
 
   const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
   const backgroundColor = viewportInfo.getViewportOptions().background;
@@ -32,36 +32,18 @@ export function setViewportColorbar(
     };
   }
 
-  const displaySetInstanceUIDs = [];
-
-  if (viewport instanceof StackViewport) {
-    displaySetInstanceUIDs.push(viewportId);
-  }
-
-  if (viewport instanceof VolumeViewport) {
-    displaySets.forEach(ds => {
-      displaySetInstanceUIDs.push(ds.displaySetInstanceUID);
-    });
-  }
-
-  commandsManager.run({
-    commandName: 'toggleViewportColorbar',
-    commandOptions: {
-      viewportId,
-      options: colorbarOptions,
-      displaySetInstanceUIDs,
-    },
-    context: 'CORNERSTONE',
+  commandsManager.run('toggleViewportColorbar', {
+    viewportId,
+    options: colorbarOptions,
+    displaySetInstanceUIDs,
   });
 }
 
 export function Colorbar({
   viewportId,
-  displaySets,
-  commandsManager,
-  servicesManager,
   colorbarProperties,
 }: withAppTypes<ColorbarProps>): ReactElement {
+  const { servicesManager, commandsManager } = useSystem();
   const { colorbarService } = servicesManager.services;
   const {
     width: colorbarWidth,
@@ -73,7 +55,7 @@ export function Colorbar({
   const [showColorbar, setShowColorbar] = useState(colorbarService.hasColorbar(viewportId));
 
   const onSetColorbar = useCallback(() => {
-    setViewportColorbar(viewportId, displaySets, commandsManager, servicesManager, {
+    setViewportColorbar(viewportId, commandsManager, servicesManager, {
       viewportId,
       colormaps,
       ticks: {

extensions/cornerstone/src/components/WindowLevelActionMenu/Colormap.tsx

@@ -3,14 +3,10 @@ import { AllInOneMenu, Switch, Tabs, TabsList, TabsTrigger } from '@ohif/ui-next
 
 import { StackViewport, Types } from '@cornerstonejs/core';
 import { ColormapProps } from '../../types/Colormap';
+import { useSystem } from '@ohif/core';
 
-export function Colormap({
-  colormaps,
-  viewportId,
-  displaySets,
-  commandsManager,
-  servicesManager,
-}: ColormapProps): ReactElement {
+export function Colormap({ colormaps, viewportId, displaySets }: ColormapProps): ReactElement {
+  const { servicesManager, commandsManager } = useSystem();
   const { cornerstoneViewportService } = servicesManager.services;
 
   const [activeDisplaySet, setActiveDisplaySet] = useState(displaySets[0]);

extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeLighting.tsx

@@ -1,13 +1,10 @@
 import React, { ReactElement, useState, useEffect, useCallback } from 'react';
 import { VolumeLightingProps } from '../../types/ViewportPresets';
 import { Numeric } from '@ohif/ui-next';
+import { useSystem } from '@ohif/core';
 
-export function VolumeLighting({
-  servicesManager,
-  commandsManager,
-  viewportId,
-  hasShade,
-}: VolumeLightingProps): ReactElement {
+export function VolumeLighting({ viewportId, hasShade }: VolumeLightingProps): ReactElement {
+  const { servicesManager, commandsManager } = useSystem();
   const { cornerstoneViewportService } = servicesManager.services;
   const [lightingValues, setLightingValues] = useState({
     ambient: null,

extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingOptions.tsx

@@ -5,43 +5,31 @@ import { VolumeRenderingQuality } from './VolumeRenderingQuality';
 import { VolumeShift } from './VolumeShift';
 import { VolumeLighting } from './VolumeLighting';
 import { VolumeShade } from './VolumeShade';
+
 export function VolumeRenderingOptions({
   viewportId,
-  commandsManager,
   volumeRenderingQualityRange,
-  servicesManager,
 }: VolumeRenderingOptionsProps): ReactElement {
   const [hasShade, setShade] = useState(false);
   return (
     <AllInOneMenu.ItemPanel>
       <VolumeRenderingQuality
         viewportId={viewportId}
-        commandsManager={commandsManager}
-        servicesManager={servicesManager}
         volumeRenderingQualityRange={volumeRenderingQualityRange}
       />
-
-      <VolumeShift
-        viewportId={viewportId}
-        commandsManager={commandsManager}
-        servicesManager={servicesManager}
-      />
+      <VolumeShift viewportId={viewportId} />
       <div className="mt-2 flex h-8 !h-[20px] w-full flex-shrink-0 items-center justify-start px-2 text-base">
         <div className="text-muted-foreground text-sm">Lighting</div>
       </div>
       <div className="bg-background mt-1 mb-1 h-px w-full"></div>
       <div className="hover:bg-accent flex h-8 w-full flex-shrink-0 items-center px-2 text-base hover:rounded">
         <VolumeShade
-          commandsManager={commandsManager}
-          servicesManager={servicesManager}
           viewportId={viewportId}
           onClickShade={setShade}
         />
       </div>
       <VolumeLighting
         viewportId={viewportId}
-        commandsManager={commandsManager}
-        servicesManager={servicesManager}
         hasShade={hasShade}
       />
     </AllInOneMenu.ItemPanel>

extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresets.tsx

@@ -3,13 +3,13 @@ import { Icons } from '@ohif/ui-next';
 import React, { ReactElement } from 'react';
 import { VolumeRenderingPresetsProps } from '../../types/ViewportPresets';
 import { VolumeRenderingPresetsContent } from './VolumeRenderingPresetsContent';
+import { useSystem } from '@ohif/core';
 
 export function VolumeRenderingPresets({
   viewportId,
-  servicesManager,
-  commandsManager,
   volumeRenderingPresets,
 }: VolumeRenderingPresetsProps): ReactElement {
+  const { servicesManager } = useSystem();
   const { uiDialogService } = servicesManager.services;
 
   const onClickPresets = () => {
@@ -21,7 +21,6 @@ export function VolumeRenderingPresets({
       contentProps: {
         presets: volumeRenderingPresets,
         viewportId,
-        commandsManager,
       },
     });
   };

extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingQuality.tsx

@@ -1,13 +1,13 @@
 import React, { ReactElement, useCallback, useState, useEffect } from 'react';
 import { VolumeRenderingQualityProps } from '../../types/ViewportPresets';
 import { Numeric } from '@ohif/ui-next';
+import { useSystem } from '@ohif/core';
 
 export function VolumeRenderingQuality({
   volumeRenderingQualityRange,
-  commandsManager,
-  servicesManager,
   viewportId,
 }: VolumeRenderingQualityProps): ReactElement {
+  const { servicesManager, commandsManager } = useSystem();
   const { cornerstoneViewportService } = servicesManager.services;
   const { min, max, step } = volumeRenderingQualityRange;
   const [quality, setQuality] = useState(null);

extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeShade.tsx

@@ -1,13 +1,13 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import { Switch } from '@ohif/ui-next';
 import { VolumeShadeProps } from '../../types/ViewportPresets';
+import { useSystem } from '@ohif/core';
 
 export function VolumeShade({
-  commandsManager,
   viewportId,
-  servicesManager,
   onClickShade = bool => {},
 }: VolumeShadeProps): ReactElement {
+  const { servicesManager, commandsManager } = useSystem();
   const { cornerstoneViewportService } = servicesManager.services;
   const [shade, setShade] = useState(true);
   const [key, setKey] = useState(0);

extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeShift.tsx

@@ -1,12 +1,10 @@
 import React, { ReactElement, useCallback, useEffect, useState, useRef } from 'react';
 import { VolumeShiftProps } from '../../types/ViewportPresets';
 import { Numeric } from '@ohif/ui-next';
+import { useSystem } from '@ohif/core';
 
-export function VolumeShift({
-  viewportId,
-  commandsManager,
-  servicesManager,
-}: VolumeShiftProps): ReactElement {
+export function VolumeShift({ viewportId }: VolumeShiftProps): ReactElement {
+  const { servicesManager, commandsManager } = useSystem();
   const { cornerstoneViewportService } = servicesManager.services;
   const [minShift, setMinShift] = useState<number | null>(null);
   const [maxShift, setMaxShift] = useState<number | null>(null);

extensions/cornerstone/src/components/WindowLevelActionMenu/WindowLevel.tsx

@@ -1,20 +1,16 @@
 import React, { ReactElement, useCallback } from 'react';
 import { AllInOneMenu } from '@ohif/ui-next';
 import { WindowLevelPreset } from '../../types/WindowLevel';
-import { CommandsManager } from '@ohif/core';
+import { useSystem } from '@ohif/core';
 import { useTranslation } from 'react-i18next';
 
 export type WindowLevelProps = {
   viewportId: string;
   presets: Array<Record<string, Array<WindowLevelPreset>>>;
-  commandsManager: CommandsManager;
 };
 
-export function WindowLevel({
-  viewportId,
-  commandsManager,
-  presets,
-}: WindowLevelProps): ReactElement {
+export function WindowLevel({ viewportId, presets }: WindowLevelProps): ReactElement {
+  const { commandsManager } = useSystem();
   const { t } = useTranslation('WindowLevelActionMenu');
 
   const onSetWindowLevel = useCallback(

extensions/cornerstone/src/components/WindowLevelActionMenu/WindowLevelActionMenu.tsx

@@ -15,8 +15,7 @@ import { VolumeRenderingOptions } from './VolumeRenderingOptions';
 import { ViewportPreset } from '../../types/ViewportPresets';
 import { VolumeViewport3D } from '@cornerstonejs/core';
 import { utilities } from '@cornerstonejs/core';
-
-export const nonWLModalities = ['SR', 'SEG', 'SM', 'RTSTRUCT', 'RTPLAN', 'RTDOSE'];
+import { useSystem } from '@ohif/core';
 
 export type WindowLevelActionMenuProps = {
   viewportId: string;
@@ -34,13 +33,12 @@ export function WindowLevelActionMenu({
   presets,
   verticalDirection,
   horizontalDirection,
-  commandsManager,
-  servicesManager,
   colorbarProperties,
   displaySets,
   volumeRenderingPresets,
   volumeRenderingQualityRange,
 }: withAppTypes<WindowLevelActionMenuProps>): ReactElement {
+  const { commandsManager, servicesManager } = useSystem();
   const {
     colormaps,
     colorbarContainerPosition,
@@ -48,6 +46,7 @@ export function WindowLevelActionMenu({
     colorbarTickPosition,
     width: colorbarWidth,
   } = colorbarProperties;
+
   const { colorbarService, cornerstoneViewportService } = servicesManager.services;
   const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
   const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
@@ -64,7 +63,7 @@ export function WindowLevelActionMenu({
   const [is3DVolume, setIs3DVolume] = useState(false);
 
   const onSetColorbar = useCallback(() => {
-    setViewportColorbar(viewportId, displaySets, commandsManager, servicesManager, {
+    setViewportColorbar(viewportId, commandsManager, servicesManager, {
       colormaps,
       ticks: {
         position: colorbarTickPosition,
@@ -117,7 +116,6 @@ export function WindowLevelActionMenu({
       verticalDirection={verticalDirection}
       horizontalDirection={horizontalDirection}
       iconClassName={classNames(
-        // Visible on hover and for the active viewport
         activeViewportId === viewportId ? 'visible' : 'invisible group-hover/pane:visible',
         'flex shrink-0 cursor-pointer rounded active:text-foreground text-highlight',
         isLight ? ' hover:bg-primary/30' : 'hover:bg-primary/30'
@@ -132,9 +130,7 @@ export function WindowLevelActionMenu({
         {!is3DVolume && (
           <Colorbar
             viewportId={viewportId}
-            displaySets={displaySets.filter(ds => !nonWLModalities.includes(ds.Modality))}
-            commandsManager={commandsManager}
-            servicesManager={servicesManager}
+            displaySets={displaySets.filter(ds => ds.supportsWindowLevel === true)}
             colorbarProperties={colorbarProperties}
           />
         )}
@@ -150,9 +146,7 @@ export function WindowLevelActionMenu({
               className="flex h-full w-full flex-col"
               colormaps={colormaps}
               viewportId={viewportId}
-              displaySets={displaySets.filter(ds => !nonWLModalities.includes(ds.Modality))}
-              commandsManager={commandsManager}
-              servicesManager={servicesManager}
+              displaySets={displaySets.filter(ds => ds.supportsWindowLevel === true)}
             />
           </AllInOneMenu.SubMenu>
         )}
@@ -165,7 +159,6 @@ export function WindowLevelActionMenu({
           >
             <WindowLevel
               viewportId={viewportId}
-              commandsManager={commandsManager}
               presets={presets}
             />
           </AllInOneMenu.SubMenu>
@@ -173,9 +166,7 @@ export function WindowLevelActionMenu({
 
         {volumeRenderingPresets && is3DVolume && (
           <VolumeRenderingPresets
-            servicesManager={servicesManager}
             viewportId={viewportId}
-            commandsManager={commandsManager}
             volumeRenderingPresets={volumeRenderingPresets}
           />
         )}
@@ -184,9 +175,7 @@ export function WindowLevelActionMenu({
           <AllInOneMenu.SubMenu itemLabel="Rendering Options">
             <VolumeRenderingOptions
               viewportId={viewportId}
-              commandsManager={commandsManager}
               volumeRenderingQualityRange={volumeRenderingQualityRange}
-              servicesManager={servicesManager}
             />
           </AllInOneMenu.SubMenu>
         )}

extensions/cornerstone/src/components/WindowLevelActionMenu/getWindowLevelActionMenu.tsx

@@ -1,12 +1,12 @@
 import React, { ReactNode } from 'react';
-import { nonWLModalities } from './WindowLevelActionMenu';
+import { WindowLevelActionMenuProps } from './WindowLevelActionMenu';
+import { useSystem } from '@ohif/core';
+import { WindowLevelActionMenu as WindowLevelActionMenuComponent } from './WindowLevelActionMenu';
 
-export function getWindowLevelActionMenu({
+function WindowLevelActionMenu({
   viewportId,
   element,
   displaySets,
-  servicesManager,
-  commandsManager,
   verticalDirection,
   horizontalDirection,
 }: withAppTypes<{
@@ -14,31 +14,25 @@ export function getWindowLevelActionMenu({
   element: HTMLElement;
   displaySets: AppTypes.DisplaySet[];
 }>): ReactNode {
+  const { servicesManager } = useSystem();
   const { customizationService } = servicesManager.services;
 
   const presets = customizationService.getCustomization('cornerstone.windowLevelPresets');
   const colorbarProperties = customizationService.getCustomization('cornerstone.colorbar');
   const { volumeRenderingPresets, volumeRenderingQualityRange } =
     customizationService.getCustomization('cornerstone.3dVolumeRendering');
-  const WindowLevelActionMenu = customizationService.getCustomization(
-    'viewportActionMenu.windowLevelActionMenu'
-  );
   const displaySetPresets = displaySets
     .filter(displaySet => presets[displaySet.Modality])
     .map(displaySet => {
       return { [displaySet.Modality]: presets[displaySet.Modality] };
     });
 
-  const modalities = displaySets
-    .map(displaySet => displaySet.Modality)
-    .filter(modality => !nonWLModalities.includes(modality));
+  const modalities = displaySets.map(displaySet => displaySet.supportsWindowLevel);
 
   if (modalities.length === 0) {
     return null;
   }
 
-  const WindowLevelActionMenuComponent = WindowLevelActionMenu?.component;
-
   return (
     <WindowLevelActionMenuComponent
       viewportId={viewportId}
@@ -46,8 +40,6 @@ export function getWindowLevelActionMenu({
       presets={displaySetPresets}
       verticalDirection={verticalDirection}
       horizontalDirection={horizontalDirection}
-      commandsManager={commandsManager}
-      servicesManager={servicesManager}
       colorbarProperties={colorbarProperties}
       displaySets={displaySets}
       volumeRenderingPresets={volumeRenderingPresets}
@@ -55,3 +47,7 @@ export function getWindowLevelActionMenu({
     />
   );
 }
+
+export function getWindowLevelActionMenu(props: WindowLevelActionMenuProps) {
+  return <WindowLevelActionMenu {...props} />;
+}

extensions/cornerstone/src/constants/index.ts

@@ -0,0 +1,3 @@
+// Volume loader schemes
+export const VOLUME_LOADER_SCHEME = 'cornerstoneStreamingImageVolume';
+export const DYNAMIC_VOLUME_LOADER_SCHEME = 'cornerstoneStreamingDynamicImageVolume';

extensions/cornerstone/src/customizations/modalityColorMapCustomization.ts

@@ -0,0 +1,23 @@
+export default {
+  'cornerstone.modalityOverlayDefaultColorMaps': {
+    defaultSettings: {
+      PT: {
+        colormap: 'hsv',
+        // Note: Right now, there is a nonlinear relationship between the opacity value
+        // below and how it will get applied to the image. The limitation is in rendering.
+        // We are working on this and will remove this note when it's fixed.
+        // But don't expect 0.5 to be 50% opacity, but rather close to that.
+        opacity: 0.5,
+      },
+      RTDOSE: {
+        colormap: 'Isodose',
+        // Note: Right now, there is a nonlinear relationship between the opacity value
+        // below and how it will get applied to the image. The limitation is in rendering.
+        // We are working on this and will remove this note when it's fixed.
+        // But don't expect 0.5 to be 50% opacity, but rather close to that.
+
+        opacity: 0.5,
+      },
+    },
+  },
+};

extensions/cornerstone/src/customizations/viewportActionMenuCustomizations.ts

@@ -1,14 +1,55 @@
-import viewportActionCornersService from '../services/ViewportActionCornersService/ViewportActionCornersService';
-import { WindowLevelActionMenu } from '../components/WindowLevelActionMenu/WindowLevelActionMenu';
+import { getWindowLevelActionMenu } from '../components/WindowLevelActionMenu/getWindowLevelActionMenu';
+import { getViewportDataOverlaySettingsMenu } from '../components/ViewportDataOverlaySettingMenu';
+import { getViewportOrientationMenu } from '../components/ViewportOrientationMenu';
+import { AllInOneMenu } from '@ohif/ui-next';
+
+// Generate component renderer functions for each component type
+const createOrientationMenu = ({ viewportId, element, location }) => {
+  return getViewportOrientationMenu({
+    viewportId,
+    element,
+    location,
+  });
+};
+
+const createDataOverlay = ({ viewportId, element, displaySets, location }) => {
+  return getViewportDataOverlaySettingsMenu({
+    viewportId,
+    element,
+    displaySets,
+    location,
+  });
+};
+
+const createWindowLevelMenu = ({ viewportId, element, displaySets }) => {
+  return getWindowLevelActionMenu({
+    viewportId,
+    element,
+    displaySets,
+    verticalDirection: AllInOneMenu.VerticalDirection.TopToBottom,
+    horizontalDirection: AllInOneMenu.HorizontalDirection.LeftToRight,
+  });
+};
 
 export default {
-  'viewportActionMenu.windowLevelActionMenu': {
-    enabled: true,
-    location: viewportActionCornersService.LOCATIONS.topRight,
-    component: WindowLevelActionMenu,
-  },
-  'viewportActionMenu.segmentationOverlay': {
-    enabled: true,
-    location: viewportActionCornersService.LOCATIONS.topRight,
-  },
+  'viewportActionMenu.topLeft': [
+    {
+      id: 'orientationMenu',
+      enabled: true,
+      component: createOrientationMenu,
+    },
+    {
+      id: 'dataOverlay',
+      enabled: true,
+      component: createDataOverlay,
+    },
+    {
+      id: 'windowLevelActionMenu',
+      enabled: true,
+      component: createWindowLevelMenu,
+    },
+  ],
+  'viewportActionMenu.topRight': [],
+  'viewportActionMenu.bottomLeft': [],
+  'viewportActionMenu.bottomRight': [],
 };

extensions/cornerstone/src/getCustomizationModule.tsx

@@ -6,6 +6,7 @@ import viewportClickCommandsCustomization from './customizations/viewportClickCo
 import measurementsCustomization from './customizations/measurementsCustomization';
 import volumeRenderingCustomization from './customizations/volumeRenderingCustomization';
 import colorbarCustomization from './customizations/colorbarCustomization';
+import modalityColorMapCustomization from './customizations/modalityColorMapCustomization';
 import windowLevelPresetsCustomization from './customizations/windowLevelPresetsCustomization';
 import miscCustomization from './customizations/miscCustomization';
 import captureViewportModalCustomization from './customizations/captureViewportModalCustomization';
@@ -25,6 +26,7 @@ function getCustomizationModule({ commandsManager, servicesManager }) {
         ...measurementsCustomization,
         ...volumeRenderingCustomization,
         ...colorbarCustomization,
+        ...modalityColorMapCustomization,
         ...windowLevelPresetsCustomization,
         ...miscCustomization,
         ...captureViewportModalCustomization,

extensions/cornerstone/src/getSopClassHandlerModule.js

@@ -1,4 +1,5 @@
 import OHIF from '@ohif/core';
+import i18n from '@ohif/i18n';
 import { utilities as csUtils, Enums as csEnums } from '@cornerstonejs/core';
 import dcmjs from 'dcmjs';
 import { dicomWebUtils } from '@ohif/extension-default';
@@ -112,6 +113,7 @@ function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager)
     instances,
     othersFrameOfReferenceUID,
     imageIds: instances.map(instance => instance.imageId),
+    label: SeriesDescription || `${i18n.t('Series')} ${SeriesNumber} - ${i18n.t('SM')}`,
   };
   // The microscopy viewer directly accesses the metadata already loaded, and
   // uses the DICOMweb client library directly for loading, so it has to be

extensions/cornerstone/src/getToolbarModule.tsx

@@ -233,7 +233,7 @@ function _evaluateToggle({
   }
   const toolName = toolbarService.getToolNameForButton(button);
 
-  if (!toolGroup.hasTool(toolName)) {
+  if (!toolGroup?.hasTool(toolName)) {
     return getDisabledState(disabledText);
   }
 

extensions/cornerstone/src/hooks/index.ts

@@ -0,0 +1,5 @@
+export { default as useViewportActionCorners } from './useViewportActionCorners';
+export * from './useViewportActionCorners';
+export * from './useActiveViewportSegmentationRepresentations';
+export * from './useMeasurements';
+export * from './useSegmentations';

extensions/cornerstone/src/hooks/useSegmentations.ts

@@ -84,7 +84,7 @@ function mapSegmentationToDisplay(segmentation, customizationService) {
  * @param options.debounceTime - Debounce time in milliseconds for updates.
  * @returns An array of segmentation data.
  */
-export function useSegmentations(options: {
+export function useSegmentations(options?: {
   subscribeToDataModified?: boolean;
   debounceTime?: number;
 }): SegmentationData[] {

extensions/cornerstone/src/hooks/useViewportActionCorners.ts

@@ -0,0 +1,113 @@
+import { useEffect } from 'react';
+import React from 'react';
+import { ViewportActionCornersLocations } from '@ohif/ui-next';
+import { useSystem } from '@ohif/core/src';
+
+/**
+ * Viewport action corner location type
+ */
+export interface ViewportActionCornerLocation {
+  type: 'VIEWPORT';
+  id: string;
+  corner?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+
+/**
+ * Viewport action corner service interface
+ */
+export interface ViewportActionCornerService {
+  addComponent: (params: {
+    viewportId: string;
+    id: string;
+    component: React.ReactNode;
+    location: ViewportActionCornersLocations | string;
+    indexPriority?: number;
+  }) => void;
+  clear: (viewportId: string) => void;
+  getAlignAndSide: (location: ViewportActionCornersLocations | string) => {
+    align: 'start' | 'center' | 'end';
+    side: 'top' | 'right' | 'bottom' | 'left';
+  };
+}
+
+/**
+ * Customization service interface
+ */
+export interface CustomizationService {
+  getCustomization: (name: string) => any;
+}
+
+/**
+ * Props for the useViewportActionCorners hook
+ */
+interface UseViewportActionCornersProps {
+  viewportId: string;
+  elementRef: React.MutableRefObject<HTMLDivElement>;
+  displaySets: AppTypes.DisplaySet[];
+}
+
+// Map of customization keys to their corresponding enum values
+const locationMap = {
+  'viewportActionMenu.topLeft': ViewportActionCornersLocations.topLeft,
+  'viewportActionMenu.topRight': ViewportActionCornersLocations.topRight,
+  'viewportActionMenu.bottomLeft': ViewportActionCornersLocations.bottomLeft,
+  'viewportActionMenu.bottomRight': ViewportActionCornersLocations.bottomRight,
+};
+
+/**
+ * Hook to manage viewport action corners for a Cornerstone viewport
+ */
+export function useViewportActionCorners({
+  viewportId,
+  elementRef,
+  displaySets,
+}: UseViewportActionCornersProps): void {
+  const { servicesManager } = useSystem();
+  const { viewportActionCornersService, customizationService } = servicesManager.services;
+
+  useEffect(() => {
+    // Process each location
+    Object.entries(locationMap).forEach(([locationKey, locationValue]) => {
+      const items = customizationService.getCustomization(locationKey);
+
+      if (!items || !items.length) {
+        return;
+      }
+
+      items.forEach(item => {
+        if (!item.enabled) {
+          return;
+        }
+
+        const componentId = item.id;
+
+        if (item.component) {
+          // Use the component renderer provided directly in the item
+          const component = item.component({
+            viewportId,
+            element: elementRef.current,
+            displaySets,
+            location: locationValue,
+          });
+
+          viewportActionCornersService.addComponent({
+            viewportId,
+            id: componentId,
+            component,
+            location: locationValue,
+          });
+        } else if (item.component) {
+          // Handle static components
+          viewportActionCornersService.addComponent({
+            viewportId,
+            id: item.id,
+            component: item.component,
+            location: locationValue,
+          });
+        }
+      });
+    });
+  }, [displaySets, viewportId, viewportActionCornersService, elementRef]);
+}
+
+export default useViewportActionCorners;

extensions/cornerstone/src/hooks/useViewportDisplaySets.ts

@@ -0,0 +1,247 @@
+import { useMemo } from 'react';
+import { useSystem, utils } from '@ohif/core';
+import { useViewportGrid } from '@ohif/ui-next';
+import {
+  getEnhancedDisplaySets,
+  sortByOverlayable,
+  DERIVED_OVERLAY_MODALITIES,
+} from '../components/ViewportDataOverlaySettingMenu/utils';
+
+const sortByPriority = (a, b) => {
+  if (utils.isLowPriorityModality(a.Modality)) {
+    return 1;
+  }
+  return -1;
+};
+
+/**
+ * Options for the useViewportDisplaySets hook
+ */
+export type UseViewportDisplaySetsOptions = {
+  /**
+   * Whether to include background display set
+   */
+  includeBackground?: boolean;
+  /**
+   * Whether to include foreground display sets
+   */
+  includeForeground?: boolean;
+  /**
+   * Whether to include overlay display sets
+   */
+  includeOverlay?: boolean;
+  /**
+   * Whether to include potential overlay display sets
+   */
+  includePotentialOverlay?: boolean;
+  /**
+   * Whether to include potential foreground display sets
+   */
+  includePotentialForeground?: boolean;
+  /**
+   * Whether to include potential background display sets
+   */
+  includePotentialBackground?: boolean;
+};
+
+/**
+ * Return type for useViewportDisplaySets
+ */
+export type ViewportDisplaySets = {
+  /**
+   * The primary display set for the viewport (base image)
+   */
+  backgroundDisplaySet?: any;
+  /**
+   * Display sets currently shown with background (non-overlay layers)
+   */
+  foregroundDisplaySets?: any[];
+  /**
+   * Segmentation display sets currently applied as overlays
+   */
+  overlayDisplaySets?: any[];
+  /**
+   * Display sets that could be toggled on as overlays (derived modalities)
+   */
+  potentialOverlayDisplaySets?: any[];
+  /**
+   * Display sets that could be added as foreground layers
+   */
+  potentialForegroundDisplaySets?: any[];
+  /**
+   * Display sets that could replace the current background
+   */
+  potentialBackgroundDisplaySets?: any[];
+};
+
+/**
+ * Hook to provide display sets and overlay information for a viewport based on options.
+ *
+ * @param viewportId - The viewport ID to get display sets for
+ * @param options - Options to control which display sets to compute
+ * @returns Object containing requested display set collections based on options
+ */
+export function useViewportDisplaySets(
+  viewportId: string,
+  options?: UseViewportDisplaySetsOptions
+): ViewportDisplaySets {
+  const { servicesManager } = useSystem();
+  const { displaySetService, segmentationService } = servicesManager.services;
+
+  // Note: this is very important we should use the useViewportGrid hook here,
+  // since if the viewport displaySet is changed we should re-run this hook
+  // to get the latest displaySets
+  const [_, viewportGridService] = useViewportGrid();
+
+  // Apply defaults - include everything if no options specified
+  const {
+    includeBackground = true,
+    includeForeground = true,
+    includeOverlay = true,
+    includePotentialOverlay = true,
+    includePotentialForeground = true,
+    includePotentialBackground = true,
+  } = options || {};
+
+  // Get all available display sets (only if needed)
+  const needsAllDisplaySets = includePotentialBackground;
+  const allDisplaySets = useMemo(
+    () => (needsAllDisplaySets ? displaySetService.getActiveDisplaySets() : []),
+    [displaySetService, needsAllDisplaySets]
+  );
+
+  // Get all available segmentations (only if needed)
+  const needsSegmentations = includeOverlay;
+  const segmentationRepresentations = useMemo(
+    () =>
+      needsSegmentations ? segmentationService.getSegmentationRepresentations(viewportId) : [],
+    [segmentationService, viewportId, needsSegmentations]
+  );
+
+  const overlayDisplaySets = useMemo(() => {
+    if (!includeOverlay) {
+      return [];
+    }
+    return segmentationRepresentations.map(repr => {
+      const displaySet = displaySetService.getDisplaySetByUID(repr.segmentationId);
+      return displaySet;
+    });
+  }, [includeOverlay, segmentationRepresentations, displaySetService]);
+
+  const overlayDisplaySetUIDs = useMemo(
+    () => overlayDisplaySets.map(ds => ds.displaySetInstanceUID),
+    [overlayDisplaySets]
+  );
+
+  // Get enhanced display sets (only if needed)
+  const needsEnhancedDisplaySets =
+    includeBackground || includeForeground || includePotentialOverlay || includePotentialForeground;
+
+  const { viewportDisplaySets, enhancedDisplaySets } = useMemo(() => {
+    if (!needsEnhancedDisplaySets) {
+      return { viewportDisplaySets: [], enhancedDisplaySets: [] };
+    }
+    return getEnhancedDisplaySets({
+      viewportId,
+      services: { displaySetService, viewportGridService },
+    });
+  }, [viewportId, displaySetService, viewportGridService, needsEnhancedDisplaySets]);
+
+  const backgroundDisplaySet = useMemo(
+    () => (includeBackground ? viewportDisplaySets[0] : undefined),
+    [includeBackground, viewportDisplaySets]
+  );
+
+  const foregroundDisplaySets = useMemo(() => {
+    if (!includeForeground || !backgroundDisplaySet) {
+      return [];
+    }
+    return viewportDisplaySets.filter(
+      ds =>
+        !DERIVED_OVERLAY_MODALITIES.includes(ds.Modality) &&
+        ds.displaySetInstanceUID !== backgroundDisplaySet.displaySetInstanceUID
+    );
+  }, [includeForeground, viewportDisplaySets, backgroundDisplaySet]);
+
+  const foregroundDisplaySetUIDs = useMemo(
+    () => foregroundDisplaySets.map(ds => ds.displaySetInstanceUID),
+    [foregroundDisplaySets]
+  );
+
+  const potentialOverlayDisplaySets = useMemo(() => {
+    if (!includePotentialOverlay) {
+      return [];
+    }
+    return enhancedDisplaySets
+      .filter(
+        ds =>
+          DERIVED_OVERLAY_MODALITIES.includes(ds.Modality) &&
+          !overlayDisplaySetUIDs.includes(ds.displaySetInstanceUID) &&
+          ds.isOverlayable
+      )
+      .sort(sortByOverlayable);
+  }, [includePotentialOverlay, enhancedDisplaySets, overlayDisplaySetUIDs]);
+
+  const potentialForegroundDisplaySets = useMemo(() => {
+    if (!includePotentialForeground) {
+      return [];
+    }
+    return enhancedDisplaySets
+      .filter(
+        ds =>
+          !DERIVED_OVERLAY_MODALITIES.includes(ds.Modality) &&
+          !foregroundDisplaySetUIDs.includes(ds.displaySetInstanceUID) &&
+          ds.isOverlayable
+      )
+      .sort(sortByPriority);
+  }, [includePotentialForeground, enhancedDisplaySets, foregroundDisplaySetUIDs]);
+
+  const potentialBackgroundDisplaySets = useMemo(() => {
+    if (!includePotentialBackground || !backgroundDisplaySet) {
+      return [];
+    }
+    return allDisplaySets
+      .filter(
+        ds =>
+          !DERIVED_OVERLAY_MODALITIES.includes(ds.Modality) &&
+          ds.displaySetInstanceUID !== backgroundDisplaySet.displaySetInstanceUID &&
+          !overlayDisplaySetUIDs.includes(ds.displaySetInstanceUID) &&
+          !foregroundDisplaySetUIDs.includes(ds.displaySetInstanceUID)
+      )
+      .sort(sortByPriority);
+  }, [
+    includePotentialBackground,
+    allDisplaySets,
+    backgroundDisplaySet,
+    overlayDisplaySetUIDs,
+    foregroundDisplaySetUIDs,
+  ]);
+
+  const result: ViewportDisplaySets = {};
+
+  if (includeBackground) {
+    result.backgroundDisplaySet = backgroundDisplaySet;
+  }
+
+  if (includeForeground) {
+    result.foregroundDisplaySets = foregroundDisplaySets;
+  }
+
+  if (includeOverlay) {
+    result.overlayDisplaySets = overlayDisplaySets;
+  }
+
+  if (includePotentialOverlay) {
+    result.potentialOverlayDisplaySets = potentialOverlayDisplaySets;
+  }
+
+  if (includePotentialForeground) {
+    result.potentialForegroundDisplaySets = potentialForegroundDisplaySets;
+  }
+
+  if (includePotentialBackground) {
+    result.potentialBackgroundDisplaySets = potentialBackgroundDisplaySets;
+  }
+
+  return result;
+}

extensions/cornerstone/src/index.tsx

@@ -269,4 +269,7 @@ export {
   CornerstoneViewportDownloadForm,
   utils,
 };
+
+// Export constants
+export { VOLUME_LOADER_SCHEME, DYNAMIC_VOLUME_LOADER_SCHEME } from './constants';
 export default cornerstoneExtension;

extensions/cornerstone/src/init.tsx

@@ -96,6 +96,8 @@ export default async function init({
     viewportGridService,
     segmentationService,
     measurementService,
+    colorbarService,
+    displaySetService,
   } = servicesManager.services;
 
   window.services = servicesManager.services;
@@ -255,8 +257,17 @@ export default async function init({
   eventTarget.addEventListener(EVENTS.IMAGE_LOAD_FAILED, imageLoadFailedHandler);
   eventTarget.addEventListener(EVENTS.IMAGE_LOAD_ERROR, imageLoadFailedHandler);
 
+  const getDisplaySetFromVolumeId = (volumeId: string) => {
+    const allDisplaySets = displaySetService.getActiveDisplaySets();
+    const volume = cornerstone.cache.getVolume(volumeId);
+    const imageIds = volume.imageIds;
+    return allDisplaySets.find(ds => ds.imageIds?.some(id => imageIds.includes(id)));
+  };
+
   function elementEnabledHandler(evt) {
     const { element } = evt.detail;
+    const { viewport } = getEnabledElement(element);
+    initViewTiming({ element });
 
     element.addEventListener(EVENTS.CAMERA_RESET, evt => {
       const { element } = evt.detail;
@@ -268,7 +279,10 @@ export default async function init({
       commandsManager.runCommand('resetCrosshairs', { viewportId });
     });
 
-    initViewTiming({ element });
+    // limitation: currently supporting only volume viewports with fusion
+    if (viewport.type !== cornerstone.Enums.ViewportType.ORTHOGRAPHIC) {
+      return;
+    }
   }
 
   eventTarget.addEventListener(EVENTS.ELEMENT_ENABLED, elementEnabledHandler.bind(null));
@@ -294,12 +308,48 @@ export default async function init({
     100
   );
 
+  // Subscribe to actor events to dynamically update colorbars
+
   // Call this function when initializing
   initializeWebWorkerProgressHandler(servicesManager.services.uiNotificationService);
 
+  const { unsubscribe: unsubscribeSegmentationCreated } = segmentationService.subscribe(
+    segmentationService.EVENTS.SEGMENTATION_ADDED,
+    evt => {
+      const { segmentationId } = evt;
+      const displaySet = displaySetService.getDisplaySetByUID(segmentationId);
+      if (displaySet) {
+        return;
+      }
+
+      const segmentation = segmentationService.getSegmentation(segmentationId);
+      const label = segmentation.cachedStats.info;
+      const imageIds = segmentation.representationData.Labelmap.imageIds;
+
+      // Create a display set for the segmentation
+      const segmentationDisplaySet = {
+        displaySetInstanceUID: segmentationId,
+        SOPClassUID: '1.2.840.10008.5.1.4.1.1.66.4',
+        SOPClassHandlerId: '@ohif/extension-cornerstone-dicom-seg.sopClassHandlerModule.dicom-seg',
+        SeriesDescription: label,
+        Modality: 'SEG',
+        numImageFrames: imageIds.length,
+        imageIds,
+        isOverlayDisplaySet: true,
+        label,
+        madeInClient: true,
+        segmentationId: segmentationId,
+        isDerived: true,
+      };
+
+      displaySetService.addDisplaySets(segmentationDisplaySet);
+    }
+  );
+
   const unsubscriptions = [
     unsubscribeSegmentationDataModifiedHandler,
     unsubscribeSegmentationModifiedHandler,
+    unsubscribeSegmentationCreated,
   ];
 
   return { unsubscriptions };

extensions/cornerstone/src/services/ColorbarService/ColorbarService.ts

@@ -38,14 +38,16 @@ export default class ColorbarService extends PubSubService {
 
   public static REGISTRATION = {
     name: 'colorbarService',
-    create: () => {
-      return new ColorbarService();
+    create: ({ servicesManager }: OhifTypes.Extensions.ExtensionParams) => {
+      return new ColorbarService(servicesManager);
     },
   };
   colorbars = {};
+  servicesManager: AppTypes.ServicesManager;
 
-  constructor() {
+  constructor(servicesManager: AppTypes.ServicesManager) {
     super(ColorbarService.EVENTS);
+    this.servicesManager = servicesManager;
   }
 
   /**
@@ -68,6 +70,7 @@ export default class ColorbarService extends PubSubService {
    * @param options Configuration options for the colorbar, including position, colormaps, active colormap name, ticks, and width.
    */
   public addColorbar(viewportId, displaySetInstanceUIDs, options = {} as ColorbarOptions) {
+    const { displaySetService } = this.servicesManager.services;
     const renderingEngine = getRenderingEngine(RENDERING_ENGINE_ID);
     const viewport = renderingEngine.getViewport(viewportId);
 
@@ -95,6 +98,12 @@ export default class ColorbarService extends PubSubService {
     );
 
     displaySetInstanceUIDs.forEach((displaySetInstanceUID, index) => {
+      // don't show colorbar for overlay display sets (e.g. segmentation)
+      const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
+      if (displaySet.isOverlayDisplaySet) {
+        return;
+      }
+
       const volumeId = this.getVolumeIdForIdentifier(viewport, displaySetInstanceUID);
       const properties = viewport?.getProperties(volumeId);
       const colormap = properties?.colormap;
@@ -123,9 +132,19 @@ export default class ColorbarService extends PubSubService {
         volumeId: viewport instanceof VolumeViewport ? volumeId : undefined,
       });
       if (this.colorbars[viewportId]) {
-        this.colorbars[viewportId].push({ colorbar, container: colorbarContainer });
+        this.colorbars[viewportId].push({
+          colorbar,
+          container: colorbarContainer,
+          displaySetInstanceUID,
+        });
       } else {
-        this.colorbars[viewportId] = [{ colorbar, container: colorbarContainer }];
+        this.colorbars[viewportId] = [
+          {
+            colorbar,
+            container: colorbarContainer,
+            displaySetInstanceUID,
+          },
+        ];
       }
     });
 
@@ -136,24 +155,50 @@ export default class ColorbarService extends PubSubService {
   }
 
   /**
-   * Removes the colorbar associated with a given viewport ID. This involves cleaning up any created DOM elements and internal references.
+   * Removes a colorbar from a specific viewport. If displaySetInstanceUID is provided,
+   * only the colorbar associated with that specific displaySetInstanceUID will be removed.
+   * Otherwise, all colorbars for the given viewport will be removed.
    *
    * @param viewportId The identifier for the viewport from which the colorbar will be removed.
+   * @param displaySetInstanceUID Optional. The specific display set instance UID associated with the colorbar to remove.
    */
-  public removeColorbar(viewportId) {
+  public removeColorbar(viewportId, displaySetInstanceUID?: string) {
     const colorbarInfo = this.colorbars[viewportId];
     if (!colorbarInfo) {
       return;
     }
 
-    colorbarInfo.forEach(({ colorbar, container }) => {
-      container.parentNode.removeChild(container);
-    });
+    if (displaySetInstanceUID) {
+      // Find the index of the colorbar with the matching displaySetInstanceUID
+      const index = colorbarInfo.findIndex(
+        info => info.displaySetInstanceUID === displaySetInstanceUID
+      );
 
-    delete this.colorbars[viewportId];
+      if (index !== -1) {
+        // Remove only the specific colorbar container
+        const { container } = colorbarInfo[index];
+        container.parentNode.removeChild(container);
+
+        // Remove the colorbar from the array
+        colorbarInfo.splice(index, 1);
+
+        // If there are no more colorbars for this viewport, remove the entry
+        if (colorbarInfo.length === 0) {
+          delete this.colorbars[viewportId];
+        }
+      }
+    } else {
+      // Remove all colorbars for the viewport (original behavior)
+      colorbarInfo.forEach(({ container }) => {
+        container.parentNode.removeChild(container);
+      });
+
+      delete this.colorbars[viewportId];
+    }
 
     this._broadcastEvent(ColorbarService.EVENTS.STATE_CHANGED, {
       viewportId,
+      displaySetInstanceUID,
       changeType: ChangeTypes.Removed,
     });
   }

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

@@ -3,8 +3,7 @@ import { cache as cs3DCache, Enums, volumeLoader } from '@cornerstonejs/core';
 
 import getCornerstoneViewportType from '../../utils/getCornerstoneViewportType';
 import { StackViewportData, VolumeViewportData } from '../../types/CornerstoneCacheService';
-
-const VOLUME_LOADER_SCHEME = 'cornerstoneStreamingImageVolume';
+import { VOLUME_LOADER_SCHEME } from '../../constants';
 
 class CornerstoneCacheService {
   static REGISTRATION = {

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

@@ -8,26 +8,29 @@
  * and geometry Id
  */
 export function mapROIContoursToRTStructData(structureSet: unknown, rtDisplaySetUID: unknown) {
-  return structureSet.ROIContours.map(({ contourPoints, ROINumber, ROIName, colorArray }) => {
-    const data = contourPoints.map(({ points, ...rest }) => {
-      const newPoints = points.map(({ x, y, z }) => {
-        return [x, y, z];
+  return structureSet.ROIContours.map(
+    ({ contourPoints, ROINumber, ROIName, colorArray, ROIGroup }) => {
+      const data = contourPoints.map(({ points, ...rest }) => {
+        const newPoints = points.map(({ x, y, z }) => {
+          return [x, y, z];
+        });
+
+        return {
+          ...rest,
+          points: newPoints,
+        };
       });
 
+      const id = ROIName || ROINumber;
+
       return {
-        ...rest,
-        points: newPoints,
+        data,
+        id,
+        segmentIndex: ROINumber,
+        color: colorArray,
+        group: ROIGroup,
+        geometryId: `${rtDisplaySetUID}:${id}:segmentIndex-${ROINumber}`,
       };
-    });
-
-    const id = ROIName || ROINumber;
-
-    return {
-      data,
-      id,
-      segmentIndex: ROINumber,
-      color: colorArray,
-      geometryId: `${rtDisplaySetUID}:${id}:segmentIndex-${ROINumber}`,
-    };
-  });
+    }
+  );
 }

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

@@ -29,6 +29,7 @@ import { updateLabelmapSegmentationImageReferences } from '@cornerstonejs/tools/
 import { triggerSegmentationRepresentationModified } from '@cornerstonejs/tools/segmentation/triggerSegmentationEvents';
 import { convertStackToVolumeLabelmap } from '@cornerstonejs/tools/segmentation/helpers/convertStackToVolumeLabelmap';
 import { getLabelmapImageIds } from '@cornerstonejs/tools/segmentation';
+import { VOLUME_LOADER_SCHEME } from '../../constants';
 
 const LABELMAP = csToolsEnums.SegmentationRepresentations.Labelmap;
 const CONTOUR = csToolsEnums.SegmentationRepresentations.Contour;
@@ -80,8 +81,6 @@ const EVENTS = {
 
 const VALUE_TYPES = {};
 
-const VOLUME_LOADER_SCHEME = 'cornerstoneStreamingImageVolume';
-
 class SegmentationService extends PubSubService {
   static REGISTRATION = {
     name: 'segmentationService',
@@ -615,7 +614,7 @@ class SegmentationService extends PubSubService {
 
     // Process each segment similarly to the SEG function
     for (const rtStructData of allRTStructData) {
-      const { data, id, color, segmentIndex, geometryId } = rtStructData;
+      const { data, id, color, segmentIndex, geometryId, group } = rtStructData;
 
       // Add the color to the colorLUT array
       colorLUT.push(color);
@@ -646,6 +645,7 @@ class SegmentationService extends PubSubService {
           cachedStats: segmentsCachedStats,
           locked: false,
           active: false,
+          group,
         };
 
         // Broadcast segment loading progress

extensions/cornerstone/src/services/ViewportActionCornersService/ViewportActionCornersService.ts

@@ -10,6 +10,11 @@ export type ActionComponentInfo = {
   indexPriority?: number;
 };
 
+export type AlignAndSide = {
+  align: 'start' | 'end' | 'center';
+  side: 'top' | 'bottom' | 'left' | 'right';
+};
+
 class ViewportActionCornersService extends PubSubService {
   public static readonly EVENTS = {};
   public static readonly LOCATIONS = ViewportActionCornersLocations;
@@ -66,6 +71,22 @@ class ViewportActionCornersService extends PubSubService {
   public clear(viewportId: string) {
     this.serviceImplementation._clear(viewportId);
   }
+
+  public getAlignAndSide(location: ViewportActionCornersLocations): AlignAndSide {
+    switch (location) {
+      case ViewportActionCornersLocations.topLeft:
+        return { align: 'start', side: 'bottom' };
+      case ViewportActionCornersLocations.topRight:
+        return { align: 'end', side: 'bottom' };
+      case ViewportActionCornersLocations.bottomLeft:
+        return { align: 'start', side: 'top' };
+      case ViewportActionCornersLocations.bottomRight:
+        return { align: 'end', side: 'top' };
+      default:
+        console.debug('Unknown location, defaulting to bottom-start');
+        return { align: 'start', side: 'bottom' };
+    }
+  }
 }
 
 export default ViewportActionCornersService;

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

@@ -32,6 +32,7 @@ import { useLutPresentationStore } from '../../stores/useLutPresentationStore';
 import { usePositionPresentationStore } from '../../stores/usePositionPresentationStore';
 import { useSynchronizersStore } from '../../stores/useSynchronizersStore';
 import { useSegmentationPresentationStore } from '../../stores/useSegmentationPresentationStore';
+import { VOLUME_LOADER_SCHEME } from '../../constants';
 
 const EVENTS = {
   VIEWPORT_DATA_CHANGED: 'event::cornerstoneViewportService:viewportDataChanged',
@@ -407,11 +408,6 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
     // and we would lose the presentation.
     this.storePresentation({ viewportId: viewportInfo.getViewportId() });
 
-    // Todo: i don't like this here, move it
-    this.servicesManager.services.segmentationService.clearSegmentationRepresentations(
-      viewportInfo.getViewportId()
-    );
-
     if (!viewportInfo) {
       throw new Error('element is not enabled for the given viewportId');
     }
@@ -513,6 +509,11 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
     return this.viewportsById.get(viewportId);
   }
 
+  public getOrientation(viewportId: string): string {
+    const viewportInfo = this.getViewportInfo(viewportId);
+    return viewportInfo.getOrientation();
+  }
+
   /**
    * Looks through the viewports to see if the specified measurement can be
    * displayed in one of the viewports. This function tries to get a "best fit"
@@ -761,8 +762,8 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
       const { imageIds, displaySetInstanceUID } = data;
       let volume = data.volume;
 
-      if (!volume) {
-        const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
+      const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
+      if (!volume && displaySet.images) {
         volume = csToolsUtils.getOrCreateImageVolume(displaySet.images.map(image => image.imageId));
       }
 
@@ -780,6 +781,8 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
       volumeInputArray.push({
         imageIds,
         volumeId,
+        modality: displaySet.Modality,
+        displaySetInstanceUID,
         blendMode: displaySetOptions.blendMode,
         slabThickness: this._getSlabThickness(displaySetOptions, volumeId),
       });
@@ -822,8 +825,15 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
     const displaySetUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewport.id);
     const displaySet = displaySetService.getDisplaySetByUID(displaySetUIDs[0]);
     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;
+    });
+
     // Todo: use presentations states
-    const volumesProperties = volumeInputArray.map((volumeInput, index) => {
+    const volumesProperties = filteredVolumeInputArray.map((volumeInput, index) => {
       const { volumeId } = volumeInput;
       const displaySetOption = displaySetOptions[index];
       const { voi, voiInverted, colormap, displayPreset } = displaySetOption;
@@ -853,9 +863,29 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
     });
 
     // For SEG and RT viewports
-    const { addOverlayFn } = this._processExtraDisplaySetsForViewport(viewport) || {};
+    const { addOverlayFn, imageIds } = this._processExtraDisplaySetsForViewport(viewport) || {};
 
-    await viewport.setVolumes(volumeInputArray);
+    if (!filteredVolumeInputArray.length && addOverlayFn) {
+      // if there is no volume input array, and there is an addOverlayFn, means we need to take
+      // care of the background overlay display set first then the addOverlayFn will add the
+      // SEG displaySet
+      const sampleImageId = imageIds[0];
+      const backgroundDisplaySet = displaySetService.getDisplaySetsBy(
+        displaySet =>
+          !displaySet.isOverlayDisplaySet &&
+          displaySet.images.some(image => image.imageId === sampleImageId)
+      );
+
+      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);
+    }
 
     if (addOverlayFn) {
       addOverlayFn();
@@ -896,31 +926,30 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
     // load any secondary displaySets
     const displaySetInstanceUIDs = this.viewportsDisplaySets.get(viewport.id);
 
-    // Can be SEG or RTSTRUCT for now but not PMAP
-    const segOrRTSOverlayDisplaySet = displaySetInstanceUIDs
+    // Find overlay display sets (e.g. SEG, RTSTRUCT)
+    const overlayDisplaySet = displaySetInstanceUIDs
       .map(displaySetService.getDisplaySetByUID)
-      .find(
-        displaySet =>
-          displaySet?.isOverlayDisplaySet && ['SEG', 'RTSTRUCT'].includes(displaySet.Modality)
-      );
+      .find(displaySet => displaySet?.isOverlayDisplaySet);
 
     // if it is only the overlay displaySet, then we need to get the reference
     // displaySet imageIds and set them as the imageIds for the viewport,
     // here we can do some logic if the reference is missing
     // then find the most similar match of displaySet instead
-    if (!segOrRTSOverlayDisplaySet) {
+    if (!overlayDisplaySet) {
       return;
     }
 
-    const referenceDisplaySet = displaySetService.getDisplaySetByUID(
-      segOrRTSOverlayDisplaySet.referencedDisplaySetInstanceUID
-    );
-    const imageIds = referenceDisplaySet.images.map(image => image.imageId);
+    let imageIds;
+    if (overlayDisplaySet.referencedDisplaySetInstanceUID) {
+      const referenceDisplaySet = displaySetService.getDisplaySetByUID(
+        overlayDisplaySet.referencedDisplaySetInstanceUID
+      );
+      imageIds = referenceDisplaySet.images.map(image => image.imageId);
+    }
 
     return {
       imageIds,
-      addOverlayFn: () =>
-        this.addOverlayRepresentationForDisplaySet(segOrRTSOverlayDisplaySet, viewport),
+      addOverlayFn: () => this.addOverlayRepresentationForDisplaySet(overlayDisplaySet, viewport),
     };
   }
 

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

@@ -316,6 +316,10 @@ class ViewportInfo {
     return this.viewportOptions.orientation;
   }
 
+  public setOrientation(orientation: Enums.OrientationAxis): void {
+    this.viewportOptions.orientation = orientation;
+  }
+
   public getDisplayArea(): Types.DisplayArea {
     return this.viewportOptions.displayArea;
   }

extensions/cornerstone/src/types/ViewportPresets.ts

@@ -1,5 +1,3 @@
-import { CommandsManager } from '@ohif/core';
-
 export type ViewportPreset = {
   name: string;
   gradientOpacity: string;
@@ -15,8 +13,6 @@ export type ViewportPreset = {
 
 export type VolumeRenderingPresetsProps = {
   viewportId: string;
-  servicesManager: AppTypes.ServicesManager;
-  commandsManager: CommandsManager;
   volumeRenderingPresets: ViewportPreset[];
 };
 
@@ -24,13 +20,10 @@ export type VolumeRenderingPresetsContentProps = {
   presets: ViewportPreset[];
   onClose: () => void;
   viewportId: string;
-  commandsManager: CommandsManager;
 };
 
 export type VolumeRenderingOptionsProps = {
   viewportId: string;
-  commandsManager: CommandsManager;
-  servicesManager: AppTypes.ServicesManager;
   volumeRenderingQualityRange: VolumeRenderingQualityRange;
 };
 
@@ -42,27 +35,19 @@ export type VolumeRenderingQualityRange = {
 
 export type VolumeRenderingQualityProps = {
   viewportId: string;
-  commandsManager: CommandsManager;
-  servicesManager: AppTypes.ServicesManager;
   volumeRenderingQualityRange: VolumeRenderingQualityRange;
 };
 
 export type VolumeShiftProps = {
   viewportId: string;
-  commandsManager: CommandsManager;
-  servicesManager: AppTypes.ServicesManager;
 };
 
 export type VolumeShadeProps = {
   viewportId: string;
-  commandsManager: CommandsManager;
-  servicesManager: AppTypes.ServicesManager;
   onClickShade?: (bool: boolean) => void;
 };
 
 export type VolumeLightingProps = {
   viewportId: string;
-  commandsManager: CommandsManager;
-  servicesManager: AppTypes.ServicesManager;
   hasShade: boolean;
 };

extensions/cornerstone/src/types/index.ts

@@ -1,5 +1,10 @@
 import * as CornerstoneCacheService from './CornerstoneCacheService';
 import type CornerstoneServices from './CornerstoneServices';
 export { type SyncGroup } from '../services/SyncGroupService';
+export {
+  type ViewportActionCornerLocation,
+  type ViewportActionCornerService,
+  type CustomizationService,
+} from '../hooks/useViewportActionCorners';
 
 export type { CornerstoneCacheService, CornerstoneServices };

extensions/cornerstone/src/utils/colormaps.js

@@ -13,6 +13,15 @@ const colormaps = [
     RGBPoints: [0, 1, 1, 1, 1, 0, 0, 0],
     description: 'X Ray',
   },
+  {
+    ColorSpace: 'RGB',
+    Name: 'Isodose',
+    NanColor: [1, 0, 0],
+    RGBPoints: [
+      0, 0, 1, 0, 0.1, 0.5, 1, 0, 0.2, 1, 1, 0, 0.3, 1, 0.66, 0, 0.4, 1, 0.33, 0, 0.5, 1, 0, 0,
+    ],
+    description: 'Isodose',
+  },
   {
     ColorSpace: 'RGB',
     Name: 'hsv',

extensions/cornerstone/src/utils/presentations/getViewportPresentations.ts

@@ -24,9 +24,13 @@ export function getViewportPresentations(
 
   const { lutPresentationId, positionPresentationId, segmentationPresentationId } = presentationIds;
 
+  const positionPresentation = positionPresentationStore[positionPresentationId];
+  const lutPresentation = lutPresentationStore[lutPresentationId];
+  const segmentationPresentation = segmentationPresentationStore[segmentationPresentationId];
+
   return {
-    positionPresentation: positionPresentationStore[positionPresentationId],
-    lutPresentation: lutPresentationStore[lutPresentationId],
-    segmentationPresentation: segmentationPresentationStore[segmentationPresentationId],
+    positionPresentation,
+    lutPresentation,
+    segmentationPresentation,
   };
 }