fix(WindowLevelActionMenu): The window level menu must show different contents for 3D volume viewports (#5113)

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

@@ -2,17 +2,14 @@ import { Icons, FooterAction } from '@ohif/ui-next';
 import React, { ReactElement, useState, useCallback } from 'react';
 import { PresetDialog } from '@ohif/ui-next';
 import { ViewportPreset, VolumeRenderingPresetsContentProps } from '../../types/ViewportPresets';
+import { useSystem } from '@ohif/core';
 
 interface Props extends VolumeRenderingPresetsContentProps {
   hide: () => void;
 }
 
-export function VolumeRenderingPresetsContent({
-  presets,
-  viewportId,
-  commandsManager,
-  hide,
-}: Props): ReactElement {
+export function VolumeRenderingPresetsContent({ presets, viewportId, hide }: Props): ReactElement {
+  const { commandsManager } = useSystem();
   const [searchValue, setSearchValue] = useState('');
   const [selectedPreset, setSelectedPreset] = useState<ViewportPreset | null>(null);
 

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

@@ -53,7 +53,6 @@ export function WindowLevelActionMenuContent({
 
   return (
     <AllInOneMenu.Menu
-      menuKey={menuKey}
       key={menuKey}
       // the visibility is handled by the parent component
       isVisible={true}

extensions/cornerstone/src/hooks/useViewportRendering.tsx

@@ -104,6 +104,11 @@ const opacityToLinear = (opacityValue: number): number => {
   return Math.pow(opacityValue, 1.0 / GAMMA);
 };
 
+const is3DViewport = ({ viewportId, cornerstoneViewportService }) => {
+  const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+  return viewport instanceof VolumeViewport3D;
+};
+
 /**
  * Hook to access window level functionality for a specific viewport
  *
@@ -119,7 +124,9 @@ export function useViewportRendering(
   const { cornerstoneViewportService, colorbarService, customizationService } =
     servicesManager.services;
 
-  const [is3DVolume, setIs3DVolume] = useState(false);
+  const [is3DVolume, setIs3DVolume] = useState(
+    is3DViewport({ viewportId, cornerstoneViewportService })
+  );
   const [hasColorbar, setHasColorbar] = useState(colorbarService.hasColorbar(viewportId));
   const [colorbarPosition, setColorbarPosition] = useState<ColorbarPositionType>(
     options?.location ? getPosition(options.location) : 'bottom'
@@ -233,8 +240,9 @@ export function useViewportRendering(
   }, [allWindowLevelPresets, activeDisplaySetInstanceUID]);
 
   useEffect(() => {
+    setIs3DVolume(is3DViewport({ viewportId, cornerstoneViewportService }));
+
     const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-    setIs3DVolume(viewport instanceof VolumeViewport3D);
 
     // Initialize the VOI range from the viewport
     if (viewport && activeDisplaySetInstanceUID) {