OHIF with Cornerstone3D 2.0 (#4347)

2024-11-06 07:15:27 -05:00
1 parent 8981a61b8c
commit 7ce7127d7c
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState, useRef } from 'react';
 import { CinePlayer, useCine } from '@ohif/ui';
 import { Enums, eventTarget, cache } from '@cornerstonejs/core';
-import { Enums as StreamingEnums } from '@cornerstonejs/streaming-image-volume-loader';
 import { useAppConfig } from '@state';

 function WrappedCinePlayer({
@@ -101,7 +100,7 @@ function WrappedCinePlayer({
      return;
    }

-    eventTarget.addEventListener(Enums.Events.STACK_VIEWPORT_NEW_STACK, newDisplaySetHandler);
+    enabledVPElement.addEventListener(Enums.Events.VIEWPORT_NEW_IMAGE_SET, newDisplaySetHandler);
    // this doesn't makes sense that we are listening to this event on viewport element
    enabledVPElement.addEventListener(
      Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
@@ -111,7 +110,10 @@ function WrappedCinePlayer({
    return () => {
      cineService.setCine({ id: viewportId, isPlaying: false });

-      eventTarget.removeEventListener(Enums.Events.STACK_VIEWPORT_NEW_STACK, newDisplaySetHandler);
+      enabledVPElement.removeEventListener(
+        Enums.Events.VIEWPORT_NEW_IMAGE_SET,
+        newDisplaySetHandler
+      );
      enabledVPElement.removeEventListener(
        Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
        newDisplaySetHandler
@@ -181,13 +183,13 @@ function RenderCinePlayer({
    };

    eventTarget.addEventListener(
-      StreamingEnums.Events.DYNAMIC_VOLUME_TIME_POINT_INDEX_CHANGED,
+      Enums.Events.DYNAMIC_VOLUME_TIME_POINT_INDEX_CHANGED,
      handleTimePointIndexChange
    );

    return () => {
      eventTarget.removeEventListener(
-        StreamingEnums.Events.DYNAMIC_VOLUME_TIME_POINT_INDEX_CHANGED,
+        Enums.Events.DYNAMIC_VOLUME_TIME_POINT_INDEX_CHANGED,
        handleTimePointIndexChange
      );
    };
@@ -199,7 +201,7 @@ function RenderCinePlayer({
    }

    const { volumeId, timePointIndex, numTimePoints, splittingTag } = dynamicInfo || {};
-    const volume = cache.getVolume(volumeId);
+    const volume = cache.getVolume(volumeId, true);
    volume.timePointIndex = timePointIndex;

    setDynamicInfo({ volumeId, timePointIndex, numTimePoints, label: splittingTag });
@@ -207,7 +209,7 @@ function RenderCinePlayer({

  const updateDynamicInfo = useCallback(props => {
    const { volumeId, timePointIndex } = props;
-    const volume = cache.getVolume(volumeId);
+    const volume = cache.getVolume(volumeId, true);
    volume.timePointIndex = timePointIndex;
  }, []);

@@ -223,6 +225,7 @@ function RenderCinePlayer({
          isPlaying: false,
        });
        cineService.setIsCineEnabled(false);
+        cineService.setViewportCineClosed(viewportId);
      }}
      onPlayPauseChange={isPlaying => {
        cineService.setCine({
@@ -0,0 +1,138 @@
+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(segmentation => (
+              <li
+                key={segmentation.segmentation.segmentationId}
+                className="flex items-center text-sm"
+              >
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="text-muted-foreground mr-2"
+                  onClick={() =>
+                    addSegmentationToViewport(segmentation.segmentation.segmentationId)
+                  }
+                >
+                  <Icons.Plus className="h-6 w-6" />
+                </Button>
+                <span className="text-foreground/60">{segmentation.segmentation.label}</span>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default ViewportSegmentationMenu;
@@ -0,0 +1,101 @@
+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';
+
+export function ViewportSegmentationMenuWrapper({
+  viewportId,
+  displaySets,
+  servicesManager,
+  commandsManager,
+  location,
+}: withAppTypes<{
+  viewportId: string;
+  element: HTMLElement;
+}>): ReactNode {
+  const { segmentationService, viewportActionCornersService, viewportGridService } =
+    servicesManager.services;
+  const [representations, setRepresentations] = useState(null);
+
+  useEffect(() => {
+    const representations = segmentationService.getSegmentationRepresentations(viewportId);
+    setRepresentations(representations);
+  }, [viewportId, segmentationService]);
+
+  useEffect(() => {
+    const { unsubscribe } = segmentationService.subscribe(
+      segmentationService.EVENTS.SEGMENTATION_REPRESENTATION_MODIFIED,
+      () => {
+        const representations = segmentationService.getSegmentationRepresentations(viewportId);
+        setRepresentations(representations);
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [viewportId, segmentationService]);
+
+  const activeViewportId = viewportGridService.getActiveViewportId();
+  const isActiveViewport = viewportId === activeViewportId;
+
+  const { align, side } = getAlignAndSide(viewportActionCornersService, location);
+
+  if (!representations?.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' };
+  }
+};
@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+import { ViewportSegmentationMenuWrapper } from './ViewportSegmentationMenuWrapper';
+
+export function getViewportDataOverlaySettingsMenu(
+  props: withAppTypes<{
+    viewportId: string;
+    element: HTMLElement;
+  }>
+): ReactNode {
+  return <ViewportSegmentationMenuWrapper {...props} />;
+}
@@ -1,10 +1,15 @@
-import React, { useEffect, useCallback, useState, ReactElement } from 'react';
+import React, { useEffect, useCallback, useState, ReactElement, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
 import { PanelSection, WindowLevel } from '@ohif/ui';
-import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
-import { Enums, eventTarget, cache as cs3DCache, utilities as csUtils } from '@cornerstonejs/core';
-import { getViewportVolumeHistogram } from './getViewportVolumeHistogram';
+import { Enums, eventTarget } from '@cornerstonejs/core';
+import { useActiveViewportDisplaySets } from '@ohif/core';
+import {
+  getNodeOpacity,
+  isPetVolumeWithDefaultOpacity,
+  isVolumeWithConstantOpacity,
+  getWindowLevelsData,
+} from './utils';

 const { Events } = Enums;

@@ -16,19 +21,16 @@ const ViewportWindowLevel = ({
 }>): ReactElement => {
  const { cornerstoneViewportService } = servicesManager.services;
  const [windowLevels, setWindowLevels] = useState([]);
-  const [cachedHistograms, setCachedHistograms] = useState({});
+  const [isLoading, setIsLoading] = useState(true);
+  const displaySets = useActiveViewportDisplaySets({ servicesManager });

-  /**
-   * Looks for all viewports that has exactly all volumeIds passed as parameter.
-   */
  const getViewportsWithVolumeIds = useCallback(
    (volumeIds: string[]) => {
      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
      const viewports = renderingEngine.getVolumeViewports();

      return viewports.filter(vp => {
-        const viewportVolumeIds = vp.getActors().map(actor => actor.uid);
-
+        const viewportVolumeIds = vp.getActors().map(actor => actor.referencedId);
        return (
          volumeIds.length === viewportVolumeIds.length &&
          volumeIds.every(volumeId => viewportVolumeIds.includes(volumeId))
@@ -38,97 +40,10 @@ const ViewportWindowLevel = ({
    [cornerstoneViewportService]
  );

-  const getNodeOpacity = (volumeActor, nodeIndex) => {
-    const volumeOpacity = volumeActor.getProperty().getScalarOpacity(0);
-    const nodeValue = [];
-
-    volumeOpacity.getNodeValue(nodeIndex, nodeValue);
-
-    return nodeValue[1];
-  };
-
-  /**
-   * Checks if the opacity applied to the PET volume is something like
-   * [{x: 0, y: 0}, {x: 0.1, y: [C]}, {x: [ANY], y: [C]}] where C is a
-   * constant opacity value for all x's greater than 0.1
-   */
-  const isPetVolumeWithDefaultOpacity = (volumeId, volumeActor) => {
-    const volume = cs3DCache.getVolume(volumeId);
-
-    if (!volume) {
-      return false;
-    }
-
-    const modality = volume.metadata.Modality;
-
-    if (modality !== 'PT') {
-      return false;
-    }
-
-    const volumeOpacity = volumeActor.getProperty().getScalarOpacity(0);
-
-    // It must have at least two points (0 and 0.1)
-    if (volumeOpacity.getSize() < 2) {
-      return false;
-    }
-
-    const node1Value = [];
-    const node2Value = [];
-
-    volumeOpacity.getNodeValue(0, node1Value);
-    volumeOpacity.getNodeValue(1, node2Value);
-
-    // First node must be (x:0, y:0} and the second one {x:0.1, y:any}
-    if (node1Value[0] !== 0 || node1Value[1] !== 0 || node2Value[0] !== 0.1) {
-      return false;
-    }
-
-    const expectedOpacity = node2Value[1];
-    const opacitySize = volumeOpacity.getSize();
-    const currentNodeValue = [];
-
-    // Any point after 0.1 must have the same opacity
-    for (let i = 2; i < opacitySize; i++) {
-      volumeOpacity.getNodeValue(i, currentNodeValue);
-
-      if (currentNodeValue[1] !== expectedOpacity) {
-        return false;
-      }
-    }
-
-    return true;
-  };
-
-  /**
-   * Checks if the opacity function has a constance opacity value for all x's
-   */
-  const isVolumeWithConstantOpacity = volumeActor => {
-    const volumeOpacity = volumeActor.getProperty().getScalarOpacity(0);
-    const opacitySize = volumeOpacity.getSize();
-    const firstNodeValue = [];
-
-    volumeOpacity.getNodeValue(0, firstNodeValue);
-
-    const firstNodeOpacity = firstNodeValue[1];
-
-    for (let i = 0; i < opacitySize; i++) {
-      const currentNodeValue = [];
-
-      volumeOpacity.getNodeValue(0, currentNodeValue);
-
-      if (currentNodeValue[1] !== firstNodeOpacity) {
-        return false;
-      }
-    }
-
-    return true;
-  };
-
  const getVolumeOpacity = useCallback((viewport, volumeId) => {
-    const volumeActor = viewport.getActor(volumeId).actor;
+    const volumeActor = viewport.getActors().find(actor => actor.referencedId === volumeId)?.actor;

    if (isPetVolumeWithDefaultOpacity(volumeId, volumeActor)) {
-      // Get the opacity from the second node at 0.1
      return getNodeOpacity(volumeActor, 1);
    } else if (isVolumeWithConstantOpacity(volumeActor)) {
      return getNodeOpacity(volumeActor, 0);
@@ -137,85 +52,14 @@ const ViewportWindowLevel = ({
    return undefined;
  }, []);

-  const getWindowLevelsData = useCallback(
-    async (viewportId: number) => {
-      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-
-      if (!viewport) {
-        return [];
-      }
-
-      const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
-
-      const volumeIds = viewport.getActors().map(actor => actor.uid);
-      const viewportProperties = viewport.getProperties();
-      const { voiRange } = viewportProperties;
-      const viewportVoi = voiRange
-        ? {
-            windowWidth: voiRange.upper - voiRange.lower,
-            windowCenter: voiRange.lower + (voiRange.upper - voiRange.lower) / 2,
-          }
-        : undefined;
-
-      const windowLevels = await Promise.all(
-        volumeIds.map(async (volumeId, volumeIndex) => {
-          const volume = cs3DCache.getVolume(volumeId);
-
-          if (!volume) {
-            return null;
-          }
-
-          const opacity = getVolumeOpacity(viewport, volumeId);
-          const { metadata, scaling } = volume;
-          const modality = metadata.Modality;
-
-          // TODO: find a proper way to fix the histogram
-          const options = {
-            min: modality === 'PT' ? 0.1 : -999,
-            max: modality === 'PT' ? 5 : 10000,
-          };
-
-          const histogram =
-            cachedHistograms[volumeId] ??
-            (await getViewportVolumeHistogram(viewport, volume, options));
-          const { voi: displaySetVOI, colormap: displaySetColormap } =
-            viewportInfo.displaySetOptions[volumeIndex];
-          let colormap;
-          if (displaySetColormap) {
-            colormap =
-              csUtils.colormap.getColormap(displaySetColormap.name) ??
-              vtkColorMaps.getPresetByName(displaySetColormap.name);
-          }
-
-          const voi = !volumeIndex ? viewportVoi ?? displaySetVOI : displaySetVOI;
-
-          return {
-            viewportId,
-            modality,
-            volumeId,
-            volumeIndex,
-            voi,
-            histogram,
-            colormap,
-            step: scaling?.PT ? 0.05 : 1,
-            opacity,
-            showOpacitySlider: volumeIndex === 1 && opacity !== undefined,
-          };
-        })
-      );
-
-      const data = windowLevels.filter(Boolean);
-      return data;
-    },
-
-    [cachedHistograms, cornerstoneViewportService, getVolumeOpacity]
-  );
-
  const updateViewportHistograms = useCallback(() => {
-    getWindowLevelsData(viewportId).then(windowLevels => {
-      setWindowLevels(windowLevels);
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+    const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+
+    getWindowLevelsData(viewport, viewportInfo, getVolumeOpacity).then(data => {
+      setWindowLevels(data);
    });
-  }, [viewportId, getWindowLevelsData]);
+  }, [viewportId, cornerstoneViewportService, getVolumeOpacity]);

  const handleCornerstoneVOIModified = useCallback(
    e => {
@@ -252,8 +96,8 @@ const ViewportWindowLevel = ({
    [windowLevels]
  );

-  const debouncedHandleCornerstoneVOIModified = useCallback(
-    debounce(handleCornerstoneVOIModified, 100),
+  const debouncedHandleCornerstoneVOIModified = useMemo(
+    () => debounce(handleCornerstoneVOIModified, 100),
    [handleCornerstoneVOIModified]
  );

@@ -280,7 +124,7 @@ const ViewportWindowLevel = ({
        return;
      }

-      const viewportVolumeIds = viewport.getActors().map(actor => actor.uid);
+      const viewportVolumeIds = viewport.getActors().map(actor => actor.referencedId);
      const viewports = getViewportsWithVolumeIds(viewportVolumeIds);

      viewports.forEach(vp => {
@@ -291,49 +135,50 @@ const ViewportWindowLevel = ({
    [getViewportsWithVolumeIds, cornerstoneViewportService]
  );

-  // Listen to windowLevels changes and caches all the new ones
+  // New function to handle image volume loading completion
+  const handleImageVolumeLoadingCompleted = useCallback(() => {
+    setIsLoading(false);
+    updateViewportHistograms();
+  }, [updateViewportHistograms]);
+
+  // Listen to cornerstone events and set up interval for histogram updates
  useEffect(() => {
-    const newVolumeHistograms = windowLevels
-      .filter(windowLevel => !cachedHistograms[windowLevel.volumeId] && windowLevel.histogram)
-      .reduce((volumeHistograms, windowLevel) => {
-        // If the histogram exists, add it to the volumeHistograms object
-        if (windowLevel?.histogram) {
-          volumeHistograms[windowLevel.volumeId] = windowLevel.histogram;
-        }
-        return volumeHistograms;
-      }, {});
-
-    if (Object.keys(newVolumeHistograms).length) {
-      setCachedHistograms(prev => ({ ...prev, ...newVolumeHistograms }));
-    }
-  }, [windowLevels, cachedHistograms]);
-
-  // Updates the histogram when the viewport index prop has changed
-  useEffect(() => updateViewportHistograms(), [viewportId, updateViewportHistograms]);
-
-  // Listen to cornerstone events on "eventTarget" and at the document level
-  useEffect(() => {
-    eventTarget.addEventListener(Events.IMAGE_VOLUME_LOADING_COMPLETED, updateViewportHistograms);
-
    document.addEventListener(Events.VOI_MODIFIED, debouncedHandleCornerstoneVOIModified, true);
+    eventTarget.addEventListener(
+      Events.IMAGE_VOLUME_LOADING_COMPLETED,
+      handleImageVolumeLoadingCompleted
+    );
+
+    const intervalId = setInterval(() => {
+      if (isLoading) {
+        updateViewportHistograms();
+      }
+    }, 1000);

    return () => {
-      eventTarget.removeEventListener(
-        Events.IMAGE_VOLUME_LOADING_COMPLETED,
-        updateViewportHistograms
-      );
-
      document.removeEventListener(
        Events.VOI_MODIFIED,
        debouncedHandleCornerstoneVOIModified,
        true
      );
+      eventTarget.removeEventListener(
+        Events.IMAGE_VOLUME_LOADING_COMPLETED,
+        handleImageVolumeLoadingCompleted
+      );
+      clearInterval(intervalId);
    };
-  }, [updateViewportHistograms, debouncedHandleCornerstoneVOIModified]);
+  }, [
+    updateViewportHistograms,
+    debouncedHandleCornerstoneVOIModified,
+    handleImageVolumeLoadingCompleted,
+    isLoading,
+  ]);
+
+  // Create a memoized version of displaySet IDs for comparison
+  const displaySetIds = useMemo(() => {
+    return displaySets?.map(ds => ds.displaySetInstanceUID).sort() || [];
+  }, [displaySets]);

-  // Updates the viewport when the context of the viewport has changed. This is
-  // necessary when moving across different stages because the viewport index
-  // may not change but the volumes loaded on it may change.
  useEffect(() => {
    const { unsubscribe } = cornerstoneViewportService.subscribe(
      cornerstoneViewportService.EVENTS.VIEWPORT_VOLUMES_CHANGED,
@@ -344,10 +189,15 @@ const ViewportWindowLevel = ({
      }
    );

+    // Only update if displaySets actually changed and are loaded
+    if (displaySetIds.length && !isLoading) {
+      updateViewportHistograms();
+    }
+
    return () => {
      unsubscribe();
    };
-  }, [viewportId, cornerstoneViewportService, updateViewportHistograms]);
+  }, [viewportId, cornerstoneViewportService, updateViewportHistograms, displaySetIds, isLoading]);

  return (
    <PanelSection title="Window Level">
@@ -20,10 +20,6 @@ const workerFn = () => {
 const getViewportVolumeHistogram = async (viewport, volume, options?) => {
  workerManager.registerWorker('histogram-worker', workerFn, WorkerOptions);

-  if (!volume?.loadStatus.loaded) {
-    return undefined;
-  }
-
  const volumeImageData = viewport.getImageData(volume.volumeId);

  if (!volumeImageData) {
@@ -32,12 +28,15 @@ const getViewportVolumeHistogram = async (viewport, volume, options?) => {

  let scalarData = volume.scalarData;

-  let prevTimePoint;
  if (volume.numTimePoints > 1) {
-    prevTimePoint = volume.timePointIndex;
-    const middleTimePoint = Math.round(volume.numTimePoints / 2);
-    volume.timePointIndex = middleTimePoint;
-    scalarData = volume.getScalarData(middleTimePoint);
+    const targetTimePoint = volume.numTimePoints - 1; // or any other time point you need
+    scalarData = volume.voxelManager.getTimePointScalarData(targetTimePoint);
+  } else {
+    scalarData = volume.voxelManager.getCompleteScalarDataArray();
+  }
+
+  if (!scalarData?.length) {
+    return undefined;
  }

  const { dimensions, origin, direction, spacing } = volume;
@@ -50,11 +49,12 @@ const getViewportVolumeHistogram = async (viewport, volume, options?) => {
    scalarData,
  });

-  // after we calculate the range let's reset the timePointIndex
-  if (volume.numTimePoints > 1) {
-    volume.timePointIndex = prevTimePoint;
-  }
  const { minimum: min, maximum: max } = range;
+
+  if (min === Infinity || max === -Infinity) {
+    return undefined;
+  }
+
  const calcHistOptions = {
    numBins: 256,
    min: Math.max(min, options?.min ?? min),
@@ -0,0 +1,153 @@
+import { cache as cs3DCache, Types } from '@cornerstonejs/core';
+import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
+import { utilities as csUtils } from '@cornerstonejs/core';
+import { getViewportVolumeHistogram } from './getViewportVolumeHistogram';
+
+/**
+ * Gets node opacity from volume actor
+ */
+export const getNodeOpacity = (volumeActor, nodeIndex) => {
+  const volumeOpacity = volumeActor.getProperty().getScalarOpacity(0);
+  const nodeValue = [];
+
+  volumeOpacity.getNodeValue(nodeIndex, nodeValue);
+
+  return nodeValue[1];
+};
+
+/**
+ * Checks if the opacity applied to the PET volume follows a specific pattern
+ */
+export const isPetVolumeWithDefaultOpacity = (volumeId: string, volumeActor) => {
+  const volume = cs3DCache.getVolume(volumeId);
+
+  if (!volume || volume.metadata.Modality !== 'PT') {
+    return false;
+  }
+
+  const volumeOpacity = volumeActor.getProperty().getScalarOpacity(0);
+
+  if (volumeOpacity.getSize() < 2) {
+    return false;
+  }
+
+  const node1Value = [];
+  const node2Value = [];
+
+  volumeOpacity.getNodeValue(0, node1Value);
+  volumeOpacity.getNodeValue(1, node2Value);
+
+  if (node1Value[0] !== 0 || node1Value[1] !== 0 || node2Value[0] !== 0.1) {
+    return false;
+  }
+
+  const expectedOpacity = node2Value[1];
+  const opacitySize = volumeOpacity.getSize();
+  const currentNodeValue = [];
+
+  for (let i = 2; i < opacitySize; i++) {
+    volumeOpacity.getNodeValue(i, currentNodeValue);
+    if (currentNodeValue[1] !== expectedOpacity) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+/**
+ * Checks if volume has constant opacity
+ */
+export const isVolumeWithConstantOpacity = volumeActor => {
+  const volumeOpacity = volumeActor.getProperty().getScalarOpacity(0);
+  const opacitySize = volumeOpacity.getSize();
+  const firstNodeValue = [];
+
+  volumeOpacity.getNodeValue(0, firstNodeValue);
+  const firstNodeOpacity = firstNodeValue[1];
+
+  for (let i = 0; i < opacitySize; i++) {
+    const currentNodeValue = [];
+    volumeOpacity.getNodeValue(0, currentNodeValue);
+    if (currentNodeValue[1] !== firstNodeOpacity) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+/**
+ * Gets window levels data for a viewport
+ */
+export const getWindowLevelsData = async (
+  viewport: Types.IStackViewport | Types.IVolumeViewport,
+  viewportInfo: any,
+  getVolumeOpacity: (viewport: any, volumeId: string) => number | undefined
+) => {
+  if (!viewport) {
+    return [];
+  }
+
+  const volumeIds = (viewport as Types.IBaseVolumeViewport).getAllVolumeIds();
+  const viewportProperties = viewport.getProperties();
+  const { voiRange } = viewportProperties;
+  const viewportVoi = voiRange
+    ? {
+        windowWidth: voiRange.upper - voiRange.lower,
+        windowCenter: voiRange.lower + (voiRange.upper - voiRange.lower) / 2,
+      }
+    : undefined;
+
+  const windowLevels = await Promise.all(
+    volumeIds.map(async (volumeId, volumeIndex) => {
+      const volume = cs3DCache.getVolume(volumeId);
+
+      const opacity = getVolumeOpacity(viewport, volumeId);
+      const { metadata, scaling } = volume;
+      const modality = metadata.Modality;
+
+      const options = {
+        min: modality === 'PT' ? 0.1 : -999,
+        max: modality === 'PT' ? 5 : 10000,
+      };
+
+      const histogram = await getViewportVolumeHistogram(viewport, volume, options);
+
+      if (!histogram || histogram.range.min === histogram.range.max) {
+        return null;
+      }
+
+      if (!viewportInfo.displaySetOptions || !viewportInfo.displaySetOptions[volumeIndex]) {
+        return null;
+      }
+
+      const { voi: displaySetVOI, colormap: displaySetColormap } =
+        viewportInfo.displaySetOptions[volumeIndex];
+
+      let colormap;
+      if (displaySetColormap) {
+        colormap =
+          csUtils.colormap.getColormap(displaySetColormap.name) ??
+          vtkColorMaps.getPresetByName(displaySetColormap.name);
+      }
+
+      const voi = !volumeIndex ? (viewportVoi ?? displaySetVOI) : displaySetVOI;
+
+      return {
+        viewportId: viewportInfo.viewportId,
+        modality,
+        volumeId,
+        volumeIndex,
+        voi,
+        histogram,
+        colormap,
+        step: scaling?.PT ? 0.05 : 1,
+        opacity,
+        showOpacitySlider: volumeIndex === 1 && opacity !== undefined,
+      };
+    })
+  );
+
+  return windowLevels.filter(Boolean);
+};
@@ -1,6 +1,6 @@
 import React, { ReactElement, useCallback, useEffect, useRef, useState, useMemo } from 'react';
 import { AllInOneMenu, ButtonGroup, SwitchButton } from '@ohif/ui';
-import { StackViewport } from '@cornerstonejs/core';
+import { StackViewport, Types } from '@cornerstonejs/core';
 import { ColormapProps } from '../../types/Colormap';

 export function Colormap({
@@ -54,8 +54,10 @@ export function Colormap({
      return colormap;
    }
    const actorEntries = viewport.getActors();
-    const actorEntry = actorEntries.find(entry => entry.uid.includes(displaySetInstanceUID));
-    const { colormap } = viewport.getProperties(actorEntry.uid);
+    const actorEntry = actorEntries?.find(entry =>
+      entry.referencedId.includes(displaySetInstanceUID)
+    );
+    const { colormap } = (viewport as Types.IVolumeViewport).getProperties(actorEntry.referencedId);
    if (!colormap) {
      return colormaps.find(c => c.Name === 'Grayscale') || colormaps[0];
    }
@@ -15,12 +15,12 @@ import { ViewportPreset } from '../../types/ViewportPresets';
 import { VolumeViewport3D } from '@cornerstonejs/core';
 import { utilities } from '@cornerstonejs/core';

+export const nonWLModalities = ['SR', 'SEG', 'SM', 'RTSTRUCT', 'RTPLAN', 'RTDOSE'];
+
 export type WindowLevelActionMenuProps = {
  viewportId: string;
  element: HTMLElement;
  presets: Array<Record<string, Array<WindowLevelPreset>>>;
-  verticalDirection: AllInOneMenu.VerticalDirection;
-  horizontalDirection: AllInOneMenu.HorizontalDirection;
  colorbarProperties: ColorbarProperties;
  displaySets: Array<any>;
  volumeRenderingPresets: Array<ViewportPreset>;
@@ -53,8 +53,6 @@ export function WindowLevelActionMenu({
  const backgroundColor = viewportInfo.getViewportOptions().background;
  const isLight = backgroundColor ? utilities.isEqual(backgroundColor, [1, 1, 1]) : false;

-  const nonImageModalities = ['SR', 'SEG', 'SM', 'RTSTRUCT', 'RTPLAN', 'RTDOSE'];
-
  const { t } = useTranslation('WindowLevelActionMenu');

  const [viewportGrid] = useViewportGrid();
@@ -119,7 +117,7 @@ export function WindowLevelActionMenu({
      horizontalDirection={horizontalDirection}
      iconClassName={classNames(
        // Visible on hover and for the active viewport
-        activeViewportId === viewportId ? 'visible' : 'invisible group-hover:visible',
+        activeViewportId === viewportId ? 'visible' : 'invisible group-hover/pane:visible',
        'flex shrink-0 cursor-pointer rounded active:text-white text-primary-light',
        isLight ? ' hover:bg-secondary-dark' : 'hover:bg-secondary-light/60'
      )}
@@ -133,7 +131,7 @@ export function WindowLevelActionMenu({
        {!is3DVolume && (
          <Colorbar
            viewportId={viewportId}
-            displaySets={displaySets.filter(ds => !nonImageModalities.includes(ds.Modality))}
+            displaySets={displaySets.filter(ds => !nonWLModalities.includes(ds.Modality))}
            commandsManager={commandsManager}
            servicesManager={servicesManager}
            colorbarProperties={colorbarProperties}
@@ -149,7 +147,7 @@ export function WindowLevelActionMenu({
            <Colormap
              colormaps={colormaps}
              viewportId={viewportId}
-              displaySets={displaySets.filter(ds => !nonImageModalities.includes(ds.Modality))}
+              displaySets={displaySets.filter(ds => !nonWLModalities.includes(ds.Modality))}
              commandsManager={commandsManager}
              servicesManager={servicesManager}
            />
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { WindowLevelActionMenu } from './WindowLevelActionMenu';
+import { nonWLModalities, WindowLevelActionMenu } from './WindowLevelActionMenu';

 export function getWindowLevelActionMenu({
  viewportId,
@@ -9,7 +9,11 @@ export function getWindowLevelActionMenu({
  commandsManager,
  verticalDirection,
  horizontalDirection,
-}: withAppTypes): ReactNode {
+}: withAppTypes<{
+  viewportId: string;
+  element: HTMLElement;
+  displaySets: AppTypes.DisplaySet[];
+}>): ReactNode {
  const { customizationService } = servicesManager.services;

  const { presets } = customizationService.get('cornerstone.windowLevelPresets');
@@ -24,6 +28,14 @@ export function getWindowLevelActionMenu({
      return { [displaySet.Modality]: presets[displaySet.Modality] };
    });

+  const modalities = displaySets
+    .map(displaySet => displaySet.Modality)
+    .filter(modality => !nonWLModalities.includes(modality));
+
+  if (modalities.length === 0) {
+    return null;
+  }
+
  return (
    <WindowLevelActionMenu
      viewportId={viewportId}