@ohif/app 3.8.0-beta.66 → 3.8.0-beta.68

package/dist/{889.bundle.edf546d8738c22b94be5.js → 574.bundle.3020ab733b8f07ec50a5.js}

@@ -1,7 +1,7 @@
 "use strict";
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[889],{
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[574],{
 
-/***/ 1889:
+/***/ 71574:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -23,10 +23,10 @@ var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
 var esm = __webpack_require__(20767);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 383 modules
 var dist_esm = __webpack_require__(50719);
-// EXTERNAL MODULE: ../../core/src/index.ts + 67 modules
-var src = __webpack_require__(78198);
-// EXTERNAL MODULE: ../../ui/src/index.js + 497 modules
-var ui_src = __webpack_require__(58046);
+// EXTERNAL MODULE: ../../core/src/index.ts + 68 modules
+var src = __webpack_require__(85073);
+// EXTERNAL MODULE: ../../ui/src/index.js + 521 modules
+var ui_src = __webpack_require__(59134);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/state.ts
 var state = __webpack_require__(71353);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.css
@@ -295,7 +295,13 @@ function CustomizableViewportOverlay({
   const topRightCustomization = customizationService.getModeCustomization('cornerstoneOverlayTopRight');
   const bottomLeftCustomization = customizationService.getModeCustomization('cornerstoneOverlayBottomLeft');
   const bottomRightCustomization = customizationService.getModeCustomization('cornerstoneOverlayBottomRight');
-  const instance = (0,react.useMemo)(() => viewportData ? getViewportInstance(viewportData, imageIndex) : null, [viewportData, imageIndex]);
+  const instance = (0,react.useMemo)(() => {
+    if (viewportData != null) {
+      return _getViewportInstance(viewportData, imageIndex);
+    } else {
+      return null;
+    }
+  }, [viewportData, imageIndex]);
   const instanceNumber = (0,react.useMemo)(() => viewportData ? getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService) : null, [viewportData, viewportId, imageIndex, cornerstoneViewportService]);
 
   /**
@@ -402,7 +408,12 @@ function CustomizableViewportOverlay({
     const items = customization?.items ?? defaultItems;
     return /*#__PURE__*/react.createElement(react.Fragment, null, items.map((item, index) => /*#__PURE__*/react.createElement("div", {
       key: `${keyPrefix}_${index}`
-    }, item?.condition ? item.condition() ? _renderOverlayItem(item) : null : _renderOverlayItem(item))));
+    }, item?.condition ? item.condition({
+      instance,
+      formatters: {
+        formatDate: formatDICOMDate
+      }
+    }) ? _renderOverlayItem(item) : null : _renderOverlayItem(item))));
   }, [_renderOverlayItem]);
   return /*#__PURE__*/react.createElement(ui_src/* ViewportOverlay */.pU, {
     topLeft:
@@ -410,6 +421,31 @@ function CustomizableViewportOverlay({
      * Inline default overlay items for a more standard expansion
      */
     getContent(topLeftCustomization, [{
+      id: 'StudyDate',
+      customizationType: 'ohif.overlayItem',
+      label: '',
+      title: 'Study date',
+      condition: ({
+        instance
+      }) => instance && instance.StudyDate,
+      contentF: ({
+        instance,
+        formatters: {
+          formatDate
+        }
+      }) => formatDate(instance.StudyDate)
+    }, {
+      id: 'SeriesDescription',
+      customizationType: 'ohif.overlayItem',
+      label: '',
+      title: 'Series description',
+      attribute: 'SeriesDescription',
+      condition: ({
+        instance
+      }) => instance && instance.SeriesDescription
+    }], 'topLeftOverlayItem'),
+    topRight: getContent(topRightCustomization, [], 'topRightOverlayItem'),
+    bottomLeft: getContent(bottomLeftCustomization, [{
       id: 'WindowLevel',
       customizationType: 'ohif.overlayItem.windowLevel'
     }, {
@@ -419,35 +455,26 @@ function CustomizableViewportOverlay({
         const activeToolName = toolGroupService.getActiveToolForViewport(viewportId);
         return activeToolName === 'Zoom';
       }
-    }], 'topLeftOverlayItem'),
-    topRight: getContent(topRightCustomization, [{
+    }], 'bottomLeftOverlayItem'),
+    bottomRight: getContent(bottomRightCustomization, [{
       id: 'InstanceNumber',
       customizationType: 'ohif.overlayItem.instanceNumber'
-    }], 'topRightOverlayItem'),
-    bottomLeft: getContent(bottomLeftCustomization, [null], 'bottomLeftOverlayItem'),
-    bottomRight: getContent(bottomRightCustomization, [null], 'bottomRightOverlayItem')
+    }], 'bottomRightOverlayItem')
   });
 }
-const getViewportInstance = (viewportData, imageIndex) => {
-  const {
-    viewportType,
-    data
-  } = viewportData;
+function _getViewportInstance(viewportData, imageIndex) {
   let imageId = null;
-  switch (viewportType) {
-    case dist_esm.Enums.ViewportType.STACK:
-      imageId = data.imageIds[imageIndex];
-      break;
-    case dist_esm.Enums.ViewportType.ORTHOGRAPHIC:
-      if (data?.length === 1) {
-        imageId = data[0].imageIds[imageIndex];
-      }
-      break;
-    default:
-      break;
+  if (viewportData.viewportType === dist_esm.Enums.ViewportType.STACK) {
+    imageId = viewportData.data.imageIds[imageIndex];
+  } else if (viewportData.viewportType === dist_esm.Enums.ViewportType.ORTHOGRAPHIC) {
+    const volumes = viewportData.data;
+    if (volumes && volumes.length == 1) {
+      const volume = volumes[0];
+      imageId = volume.imageIds[imageIndex];
+    }
   }
   return imageId ? dist_esm.metaData.get('instance', imageId) || {} : {};
-};
+}
 const getInstanceNumber = (viewportData, viewportId, imageIndex, cornerstoneViewportService) => {
   let instanceNumber;
   switch (viewportData.viewportType) {
@@ -541,11 +568,11 @@ function VOIOverlayItem({
   }, /*#__PURE__*/react.createElement("span", {
     className: "mr-1 shrink-0"
   }, "W:"), /*#__PURE__*/react.createElement("span", {
-    className: "ml-1 mr-2 shrink-0 font-light"
+    className: "ml-1 mr-2 shrink-0"
   }, windowWidth.toFixed(0)), /*#__PURE__*/react.createElement("span", {
     className: "mr-1 shrink-0"
   }, "L:"), /*#__PURE__*/react.createElement("span", {
-    className: "ml-1 shrink-0 font-light"
+    className: "ml-1 shrink-0"
   }, windowCenter.toFixed(0)));
 }
 
@@ -563,9 +590,7 @@ function ZoomOverlayItem({
     }
   }, /*#__PURE__*/react.createElement("span", {
     className: "mr-1 shrink-0"
-  }, "Zoom:"), /*#__PURE__*/react.createElement("span", {
-    className: "font-light"
-  }, scale.toFixed(2), "x"));
+  }, "Zoom:"), /*#__PURE__*/react.createElement("span", null, scale.toFixed(2), "x"));
 }
 
 /**
@@ -587,9 +612,7 @@ function InstanceNumberOverlayItem({
     }
   }, /*#__PURE__*/react.createElement("span", {
     className: "mr-1 shrink-0"
-  }, "I:"), /*#__PURE__*/react.createElement("span", {
-    className: "font-light"
-  }, instanceNumber !== undefined && instanceNumber !== null ? `${instanceNumber} (${imageIndex + 1}/${numberOfSlices})` : `${imageIndex + 1}/${numberOfSlices}`));
+  }, "I:"), /*#__PURE__*/react.createElement("span", null, instanceNumber !== undefined && instanceNumber !== null ? `${instanceNumber} (${imageIndex + 1}/${numberOfSlices})` : `${imageIndex + 1}/${numberOfSlices}`));
 }
 CustomizableViewportOverlay.propTypes = {
   viewportData: (prop_types_default()).object,
@@ -694,20 +717,15 @@ function ViewportOrientationMarkers({
       console.log('ViewportOrientationMarkers::No viewport');
       return null;
     }
-    const backgroundColor = ohifViewport.getViewportOptions().background;
-
-    // Todo: probably this can be done in a better way in which we identify bright
-    // background
-    const isLight = backgroundColor ? dist_esm.utilities.isEqual(backgroundColor, [1, 1, 1]) : false;
     return orientationMarkers.map((m, index) => /*#__PURE__*/react.createElement("div", {
-      className: classnames_default()(`${m}-mid orientation-marker`, isLight ? 'text-[#726F7E]' : 'text-[#ccc]'),
+      className: classnames_default()('overlay-text', `${m}-mid orientation-marker`, 'text-aqua-pale', 'text-[13px]', 'leading-5'),
       key: `${m}-mid orientation-marker`
     }, /*#__PURE__*/react.createElement("div", {
       className: "orientation-marker-value"
     }, markers[m])));
   }, [viewportData, imageSliceData, rotation, flipVertical, flipHorizontal, orientationMarkers, element]);
   return /*#__PURE__*/react.createElement("div", {
-    className: "ViewportOrientationMarkers noselect"
+    className: "ViewportOrientationMarkers select-none"
   }, markers);
 }
 ViewportOrientationMarkers.propTypes = {
@@ -1049,6 +1067,908 @@ function WrappedCinePlayer({
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/CinePlayer/index.ts
 
 /* harmony default export */ const components_CinePlayer = (CinePlayer);
+// EXTERNAL MODULE: ../../../extensions/cornerstone/src/contextProviders/ViewportActionCornersProvider.tsx
+var ViewportActionCornersProvider = __webpack_require__(76255);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/OHIFViewportActionCorners.tsx
+
+
+
+function OHIFViewportActionCorners({
+  viewportId
+}) {
+  const [viewportActionCornersState] = (0,ViewportActionCornersProvider/* useViewportActionCornersContext */.R4)();
+  if (!viewportActionCornersState[viewportId]) {
+    return null;
+  }
+  return /*#__PURE__*/react.createElement(ui_src/* ViewportActionCorners */.R2, {
+    cornerComponents: viewportActionCornersState[viewportId]
+  });
+}
+/* harmony default export */ const components_OHIFViewportActionCorners = (OHIFViewportActionCorners);
+// EXTERNAL MODULE: ../../../node_modules/react-i18next/dist/es/index.js + 15 modules
+var es = __webpack_require__(80619);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/Colormap.tsx
+
+
+
+function Colormap({
+  colormaps,
+  viewportId,
+  displaySets,
+  commandsManager,
+  serviceManager
+}) {
+  const {
+    cornerstoneViewportService
+  } = serviceManager.services;
+  const [activeDisplaySet, setActiveDisplaySet] = (0,react.useState)(displaySets[0]);
+  const [showPreview, setShowPreview] = (0,react.useState)(false);
+  const [prePreviewColormap, setPrePreviewColormap] = (0,react.useState)(null);
+  const showPreviewRef = (0,react.useRef)(showPreview);
+  showPreviewRef.current = showPreview;
+  const prePreviewColormapRef = (0,react.useRef)(prePreviewColormap);
+  prePreviewColormapRef.current = prePreviewColormap;
+  const activeDisplaySetRef = (0,react.useRef)(activeDisplaySet);
+  activeDisplaySetRef.current = activeDisplaySet;
+  const onSetColorLUT = (0,react.useCallback)(props => {
+    // TODO: Better way to check if it's a fusion
+    const oneOpacityColormaps = ['Grayscale', 'X Ray'];
+    const opacity = displaySets.length > 1 && !oneOpacityColormaps.includes(props.colormap.name) ? 0.5 : 1;
+    commandsManager.run({
+      commandName: 'setViewportColormap',
+      commandOptions: {
+        ...props,
+        opacity,
+        immediate: true
+      },
+      context: 'CORNERSTONE'
+    });
+  }, [commandsManager]);
+  const getViewportColormap = (viewportId, displaySet) => {
+    const {
+      displaySetInstanceUID
+    } = displaySet;
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+    if (viewport instanceof dist_esm.StackViewport) {
+      const {
+        colormap
+      } = viewport.getProperties();
+      if (!colormap) {
+        return colormaps.find(c => c.Name === 'Grayscale') || colormaps[0];
+      }
+      return colormap;
+    }
+    const actorEntries = viewport.getActors();
+    const actorEntry = actorEntries.find(entry => entry.uid.includes(displaySetInstanceUID));
+    const {
+      colormap
+    } = viewport.getProperties(actorEntry.uid);
+    if (!colormap) {
+      return colormaps.find(c => c.Name === 'Grayscale') || colormaps[0];
+    }
+    return colormap;
+  };
+  const buttons = (0,react.useMemo)(() => {
+    return displaySets.map((displaySet, index) => ({
+      children: displaySet.Modality,
+      key: index,
+      style: {
+        minWidth: `calc(100% / ${displaySets.length})`
+      }
+    }));
+  }, [displaySets]);
+  (0,react.useEffect)(() => {
+    setActiveDisplaySet(displaySets[displaySets.length - 1]);
+  }, [displaySets]);
+  return /*#__PURE__*/react.createElement(react.Fragment, null, buttons.length > 1 && /*#__PURE__*/react.createElement("div", {
+    className: "all-in-one-menu-item flex w-full justify-center"
+  }, /*#__PURE__*/react.createElement(ui_src/* ButtonGroup */.e2, {
+    onActiveIndexChange: index => {
+      setActiveDisplaySet(displaySets[index]);
+      setPrePreviewColormap(null);
+    },
+    activeIndex: displaySets.findIndex(ds => ds.displaySetInstanceUID === activeDisplaySetRef.current.displaySetInstanceUID) || 1,
+    className: "w-[70%] text-[10px]"
+  }, buttons.map(({
+    children,
+    key,
+    style
+  }) => /*#__PURE__*/react.createElement("div", {
+    key: key,
+    style: style
+  }, children)))), /*#__PURE__*/react.createElement("div", {
+    className: "all-in-one-menu-item flex w-full justify-center"
+  }, /*#__PURE__*/react.createElement(ui_src/* SwitchButton */.L$, {
+    label: "Preview in viewport",
+    checked: showPreview,
+    onChange: checked => {
+      setShowPreview(checked);
+    }
+  })), /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.DividerItem */.se.VG, null), /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.ItemPanel */.se.cV, null, colormaps.map((colormap, index) => /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.Item */.se.q7, {
+    key: index,
+    label: colormap.description,
+    onClick: () => {
+      onSetColorLUT({
+        viewportId,
+        colormap,
+        displaySetInstanceUID: activeDisplaySetRef.current.displaySetInstanceUID
+      });
+      setPrePreviewColormap(null);
+    },
+    onMouseEnter: () => {
+      if (showPreviewRef.current) {
+        setPrePreviewColormap(getViewportColormap(viewportId, activeDisplaySetRef.current));
+        onSetColorLUT({
+          viewportId,
+          colormap,
+          displaySetInstanceUID: activeDisplaySetRef.current.displaySetInstanceUID
+        });
+      }
+    },
+    onMouseLeave: () => {
+      if (showPreviewRef.current && prePreviewColormapRef.current) {
+        onSetColorLUT({
+          viewportId,
+          colormap: prePreviewColormapRef.current,
+          displaySetInstanceUID: activeDisplaySetRef.current.displaySetInstanceUID
+        });
+      }
+    }
+  }))));
+}
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/Colorbar.tsx
+
+
+
+
+function setViewportColorbar(viewportId, displaySets, commandsManager, serviceManager, colorbarOptions) {
+  const {
+    cornerstoneViewportService
+  } = serviceManager.services;
+  const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+  const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+  const backgroundColor = viewportInfo.getViewportOptions().background;
+  const isLight = backgroundColor ? dist_esm.utilities.isEqual(backgroundColor, [1, 1, 1]) : false;
+  if (isLight) {
+    colorbarOptions.ticks = {
+      position: 'left',
+      style: {
+        font: '12px Arial',
+        color: '#000000',
+        maxNumTicks: 8,
+        tickSize: 5,
+        tickWidth: 1,
+        labelMargin: 3
+      }
+    };
+  }
+  const displaySetInstanceUIDs = [];
+  if (viewport instanceof dist_esm.StackViewport) {
+    displaySetInstanceUIDs.push(viewportId);
+  }
+  if (viewport instanceof dist_esm.VolumeViewport) {
+    displaySets.forEach(ds => {
+      displaySetInstanceUIDs.push(ds.displaySetInstanceUID);
+    });
+  }
+  commandsManager.run({
+    commandName: 'toggleViewportColorbar',
+    commandOptions: {
+      viewportId,
+      options: colorbarOptions,
+      displaySetInstanceUIDs
+    },
+    context: 'CORNERSTONE'
+  });
+}
+function Colorbar({
+  viewportId,
+  displaySets,
+  commandsManager,
+  serviceManager,
+  colorbarProperties
+}) {
+  const {
+    colorbarService
+  } = serviceManager.services;
+  const {
+    width: colorbarWidth,
+    colorbarTickPosition,
+    colorbarContainerPosition,
+    colormaps,
+    colorbarInitialColormap
+  } = colorbarProperties;
+  const [showColorbar, setShowColorbar] = (0,react.useState)(colorbarService.hasColorbar(viewportId));
+  const onSetColorbar = (0,react.useCallback)(() => {
+    setViewportColorbar(viewportId, displaySets, commandsManager, serviceManager, {
+      viewportId,
+      colormaps,
+      ticks: {
+        position: colorbarTickPosition
+      },
+      width: colorbarWidth,
+      position: colorbarContainerPosition,
+      activeColormapName: colorbarInitialColormap
+    });
+  }, [commandsManager]);
+  (0,react.useEffect)(() => {
+    const updateColorbarState = () => {
+      setShowColorbar(colorbarService.hasColorbar(viewportId));
+    };
+    const {
+      unsubscribe
+    } = colorbarService.subscribe(colorbarService.EVENTS.STATE_CHANGED, updateColorbarState);
+    return () => {
+      unsubscribe();
+    };
+  }, [viewportId]);
+  return /*#__PURE__*/react.createElement("div", {
+    className: "all-in-one-menu-item flex w-full justify-center"
+  }, /*#__PURE__*/react.createElement(ui_src/* SwitchButton */.L$, {
+    label: "Display Color bar",
+    checked: showColorbar,
+    onChange: () => {
+      onSetColorbar();
+    }
+  }));
+}
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/WindowLevel.tsx
+
+
+
+function WindowLevel({
+  viewportId,
+  commandsManager,
+  presets
+}) {
+  const {
+    t
+  } = (0,es/* useTranslation */.Bd)('WindowLevelActionMenu');
+  const onSetWindowLevel = (0,react.useCallback)(props => {
+    commandsManager.run({
+      commandName: 'setViewportWindowLevel',
+      commandOptions: {
+        ...props
+      },
+      context: 'CORNERSTONE'
+    });
+  }, [commandsManager]);
+  return /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.ItemPanel */.se.cV, null, /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.HeaderItem */.se.N5, null, t('Modality Presets', {
+    modality: Object.keys(presets)[0]
+  })), Object.values(presets)[0].map((preset, index) => /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.Item */.se.q7, {
+    key: index,
+    label: preset.description,
+    secondaryLabel: `${preset.window} / ${preset.level}`,
+    onClick: () => onSetWindowLevel({
+      ...preset,
+      viewportId
+    })
+  })));
+}
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresetsContent.tsx
+
+
+
+
+function VolumeRenderingPresetsContent({
+  presets,
+  viewportId,
+  commandsManager,
+  onClose
+}) {
+  const [filteredPresets, setFilteredPresets] = (0,react.useState)(presets);
+  const [searchValue, setSearchValue] = (0,react.useState)('');
+  const [selectedPreset, setSelectedPreset] = (0,react.useState)(null);
+  const handleSearchChange = (0,react.useCallback)(value => {
+    setSearchValue(value);
+    const filtered = value ? presets.filter(preset => preset.name.toLowerCase().includes(value.toLowerCase())) : presets;
+    setFilteredPresets(filtered);
+  }, [presets]);
+  const handleApply = (0,react.useCallback)(props => {
+    commandsManager.runCommand('setViewportPreset', {
+      ...props
+    });
+  }, [commandsManager]);
+  const formatLabel = (label, maxChars) => {
+    return label.length > maxChars ? `${label.slice(0, maxChars)}...` : label;
+  };
+  return /*#__PURE__*/react.createElement("div", {
+    className: "flex min-h-full w-full flex-col justify-between"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "border-secondary-light h-[433px] w-full overflow-hidden rounded border bg-black px-2.5"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "flex h-[46px] w-full items-center justify-start"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "h-[26px] w-[200px]"
+  }, /*#__PURE__*/react.createElement(ui_src/* InputFilterText */.Cv, {
+    value: searchValue,
+    onDebounceChange: handleSearchChange,
+    placeholder: 'Search all'
+  }))), /*#__PURE__*/react.createElement("div", {
+    className: "ohif-scrollbar overflow h-[385px] w-full overflow-y-auto"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "grid grid-cols-4 gap-3 pt-2 pr-3"
+  }, filteredPresets.map((preset, index) => /*#__PURE__*/react.createElement("div", {
+    key: index,
+    className: "flex cursor-pointer flex-col items-start",
+    onClick: () => {
+      setSelectedPreset(preset);
+      handleApply({
+        preset: preset.name,
+        viewportId
+      });
+    }
+  }, /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
+    name: preset.name,
+    className: selectedPreset?.name === preset.name ? 'border-primary-light h-[75px] w-[95px] max-w-none rounded border-2' : 'hover:border-primary-light h-[75px] w-[95px] max-w-none rounded border-2 border-black'
+  }), /*#__PURE__*/react.createElement("label", {
+    className: "text-aqua-pale mt-2 text-left text-xs"
+  }, formatLabel(preset.name, 11))))))), /*#__PURE__*/react.createElement("footer", {
+    className: "flex h-[60px] w-full items-center justify-end"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "flex"
+  }, /*#__PURE__*/react.createElement(ui_src/* Button */.$n, {
+    name: "Cancel",
+    size: ui_src/* ButtonEnums.size */.Ny.Ej.medium,
+    type: ui_src/* ButtonEnums.type */.Ny.NW.secondary,
+    onClick: onClose
+  }, ' ', "Cancel", ' '))));
+}
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresets.tsx
+
+
+
+function VolumeRenderingPresets({
+  viewportId,
+  serviceManager,
+  commandsManager,
+  volumeRenderingPresets
+}) {
+  const {
+    uiModalService
+  } = serviceManager.services;
+  const onClickPresets = () => {
+    uiModalService.show({
+      content: VolumeRenderingPresetsContent,
+      title: 'Rendering Presets',
+      movable: true,
+      contentProps: {
+        onClose: uiModalService.hide,
+        presets: volumeRenderingPresets,
+        viewportId,
+        commandsManager
+      },
+      containerDimensions: 'h-[543px] w-[460px]',
+      contentDimensions: 'h-[493px] w-[460px]  pl-[12px]'
+    });
+  };
+  return /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.Item */.se.q7, {
+    label: "Rendering Presets",
+    icon: /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
+      name: "VolumeRendering"
+    }),
+    rightIcon: /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
+      name: "action-new-dialog"
+    }),
+    onClick: onClickPresets
+  });
+}
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingQuality.tsx
+
+function VolumeRenderingQuality({
+  volumeRenderingQualityRange,
+  commandsManager,
+  serviceManager,
+  viewportId
+}) {
+  const {
+    cornerstoneViewportService
+  } = serviceManager.services;
+  const {
+    min,
+    max,
+    step
+  } = volumeRenderingQualityRange;
+  const [quality, setQuality] = (0,react.useState)(null);
+  const onChange = (0,react.useCallback)(value => {
+    commandsManager.runCommand('setVolumeRenderingQulaity', {
+      viewportId,
+      volumeQuality: value
+    });
+    setQuality(value);
+  }, [commandsManager, viewportId]);
+  const calculateBackground = value => {
+    const percentage = (value - 0) / (1 - 0) * 100;
+    return `linear-gradient(to right, #5acce6 0%, #5acce6 ${percentage}%, #3a3f99 ${percentage}%, #3a3f99 100%)`;
+  };
+  (0,react.useEffect)(() => {
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+    const {
+      actor
+    } = viewport.getActors()[0];
+    const mapper = actor.getMapper();
+    const image = mapper.getInputData();
+    const spacing = image.getSpacing();
+    const sampleDistance = mapper.getSampleDistance();
+    const averageSpacing = spacing.reduce((a, b) => a + b) / 3.0;
+    if (sampleDistance === averageSpacing) {
+      setQuality(1);
+    } else {
+      setQuality(Math.sqrt(averageSpacing / (sampleDistance * 0.5)));
+    }
+  }, [cornerstoneViewportService, viewportId]);
+  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
+    className: "all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]"
+  }, /*#__PURE__*/react.createElement("label", {
+    className: "block text-white",
+    htmlFor: "volume"
+  }, "Quality"), quality !== null && /*#__PURE__*/react.createElement("input", {
+    className: "bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg",
+    value: quality,
+    id: "volume",
+    max: max,
+    min: min,
+    type: "range",
+    step: step,
+    onChange: e => onChange(parseInt(e.target.value, 10)),
+    style: {
+      background: calculateBackground((quality - min) / (max - min))
+    }
+  })));
+}
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeShift.tsx
+
+function VolumeShift({
+  viewportId,
+  commandsManager,
+  serviceManager
+}) {
+  const {
+    cornerstoneViewportService
+  } = serviceManager.services;
+  const [minShift, setMinShift] = (0,react.useState)(null);
+  const [maxShift, setMaxShift] = (0,react.useState)(null);
+  const [shift, setShift] = (0,react.useState)(cornerstoneViewportService.getCornerstoneViewport(viewportId)?.shiftedBy || 0);
+  const [step, setStep] = (0,react.useState)(null);
+  const [isBlocking, setIsBlocking] = (0,react.useState)(false);
+  const prevShiftRef = (0,react.useRef)(shift);
+  const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+  const {
+    actor
+  } = viewport.getActors()[0];
+  const ofun = actor.getProperty().getScalarOpacity(0);
+  (0,react.useEffect)(() => {
+    if (isBlocking) {
+      return;
+    }
+    const range = ofun.getRange();
+    const transferFunctionWidth = range[1] - range[0];
+    const minShift = -transferFunctionWidth;
+    const maxShift = transferFunctionWidth;
+    setMinShift(minShift);
+    setMaxShift(maxShift);
+    setStep(Math.pow(10, Math.floor(Math.log10(transferFunctionWidth / 500))));
+  }, [cornerstoneViewportService, viewportId, actor, ofun, isBlocking]);
+  const onChangeRange = (0,react.useCallback)(newShift => {
+    const shiftDifference = newShift - prevShiftRef.current;
+    prevShiftRef.current = newShift;
+    viewport.shiftedBy = newShift;
+    commandsManager.runCommand('shiftVolumeOpacityPoints', {
+      viewportId,
+      shift: shiftDifference
+    });
+  }, [commandsManager, viewportId, viewport]);
+  const calculateBackground = value => {
+    const percentage = (value - 0) / (1 - 0) * 100;
+    return `linear-gradient(to right, #5acce6 0%, #5acce6 ${percentage}%, #3a3f99 ${percentage}%, #3a3f99 100%)`;
+  };
+  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
+    className: "all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]"
+  }, /*#__PURE__*/react.createElement("label", {
+    className: "block  text-white",
+    htmlFor: "shift"
+  }, "Shift"), step !== null && /*#__PURE__*/react.createElement("input", {
+    className: "bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg",
+    value: shift,
+    onChange: e => {
+      const shiftValue = parseInt(e.target.value, 10);
+      setShift(shiftValue);
+      onChangeRange(shiftValue);
+    },
+    id: "shift",
+    onMouseDown: () => setIsBlocking(true),
+    onMouseUp: () => setIsBlocking(false),
+    max: maxShift,
+    min: minShift,
+    type: "range",
+    step: step,
+    style: {
+      background: calculateBackground((shift - minShift) / (maxShift - minShift))
+    }
+  })));
+}
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeLighting.tsx
+
+function VolumeLighting({
+  serviceManager,
+  commandsManager,
+  viewportId
+}) {
+  const {
+    cornerstoneViewportService
+  } = serviceManager.services;
+  const [ambient, setAmbient] = (0,react.useState)(null);
+  const [diffuse, setDiffuse] = (0,react.useState)(null);
+  const [specular, setSpecular] = (0,react.useState)(null);
+  const onAmbientChange = (0,react.useCallback)(() => {
+    commandsManager.runCommand('setVolumeLighting', {
+      viewportId,
+      options: {
+        ambient
+      }
+    });
+  }, [ambient, commandsManager, viewportId]);
+  const onDiffuseChange = (0,react.useCallback)(() => {
+    commandsManager.runCommand('setVolumeLighting', {
+      viewportId,
+      options: {
+        diffuse
+      }
+    });
+  }, [diffuse, commandsManager, viewportId]);
+  const onSpecularChange = (0,react.useCallback)(() => {
+    commandsManager.runCommand('setVolumeLighting', {
+      viewportId,
+      options: {
+        specular
+      }
+    });
+  }, [specular, commandsManager, viewportId]);
+  const calculateBackground = value => {
+    const percentage = (value - 0) / (1 - 0) * 100;
+    return `linear-gradient(to right, #5acce6 0%, #5acce6 ${percentage}%, #3a3f99 ${percentage}%, #3a3f99 100%)`;
+  };
+  (0,react.useEffect)(() => {
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+    const {
+      actor
+    } = viewport.getActors()[0];
+    const ambient = actor.getProperty().getAmbient();
+    const diffuse = actor.getProperty().getDiffuse();
+    const specular = actor.getProperty().getSpecular();
+    setAmbient(ambient);
+    setDiffuse(diffuse);
+    setSpecular(specular);
+  }, [viewportId, cornerstoneViewportService]);
+  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
+    className: "all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]"
+  }, /*#__PURE__*/react.createElement("label", {
+    className: "block  text-white",
+    htmlFor: "ambient"
+  }, "Ambient"), ambient !== null && /*#__PURE__*/react.createElement("input", {
+    className: "bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg",
+    value: ambient,
+    onChange: e => {
+      setAmbient(e.target.value);
+      onAmbientChange();
+    },
+    id: "ambient",
+    max: 1,
+    min: 0,
+    type: "range",
+    step: 0.1,
+    style: {
+      background: calculateBackground(ambient)
+    }
+  })), /*#__PURE__*/react.createElement("div", {
+    className: "all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]"
+  }, /*#__PURE__*/react.createElement("label", {
+    className: "block  text-white",
+    htmlFor: "diffuse"
+  }, "Diffuse"), diffuse !== null && /*#__PURE__*/react.createElement("input", {
+    className: "bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg",
+    value: diffuse,
+    onChange: e => {
+      setDiffuse(e.target.value);
+      onDiffuseChange();
+    },
+    id: "diffuse",
+    max: 1,
+    min: 0,
+    type: "range",
+    step: 0.1,
+    style: {
+      background: calculateBackground(diffuse)
+    }
+  })), /*#__PURE__*/react.createElement("div", {
+    className: "all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]"
+  }, /*#__PURE__*/react.createElement("label", {
+    className: "block  text-white",
+    htmlFor: "specular"
+  }, "Specular"), specular !== null && /*#__PURE__*/react.createElement("input", {
+    className: "bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg",
+    value: specular,
+    onChange: e => {
+      setSpecular(e.target.value);
+      onSpecularChange();
+    },
+    id: "specular",
+    max: 1,
+    min: 0,
+    type: "range",
+    step: 0.1,
+    style: {
+      background: calculateBackground(specular)
+    }
+  })));
+}
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeShade.tsx
+
+
+function VolumeShade({
+  commandsManager,
+  viewportId,
+  serviceManager
+}) {
+  const {
+    cornerstoneViewportService
+  } = serviceManager.services;
+  const [shade, setShade] = (0,react.useState)(true);
+  const [key, setKey] = (0,react.useState)(0);
+  const onShadeChange = (0,react.useCallback)(checked => {
+    commandsManager.runCommand('setVolumeLighting', {
+      viewportId,
+      options: {
+        shade: checked
+      }
+    });
+  }, [commandsManager, viewportId]);
+  (0,react.useEffect)(() => {
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+    const {
+      actor
+    } = viewport.getActors()[0];
+    const shade = actor.getProperty().getShade();
+    setShade(shade);
+    setKey(key + 1);
+  }, [viewportId, cornerstoneViewportService]);
+  return /*#__PURE__*/react.createElement(ui_src/* SwitchButton */.L$, {
+    key: key,
+    label: "Shade",
+    checked: shade,
+    onChange: () => {
+      setShade(!shade);
+      onShadeChange(!shade);
+    }
+  });
+}
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingOptions.tsx
+
+
+
+
+
+
+function VolumeRenderingOptions({
+  viewportId,
+  commandsManager,
+  volumeRenderingQualityRange,
+  serviceManager
+}) {
+  return /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.ItemPanel */.se.cV, null, /*#__PURE__*/react.createElement(VolumeRenderingQuality, {
+    viewportId: viewportId,
+    commandsManager: commandsManager,
+    serviceManager: serviceManager,
+    volumeRenderingQualityRange: volumeRenderingQualityRange
+  }), /*#__PURE__*/react.createElement(VolumeShift, {
+    viewportId: viewportId,
+    commandsManager: commandsManager,
+    serviceManager: serviceManager
+  }), /*#__PURE__*/react.createElement("div", {
+    className: "all-in-one-menu-item flex w-full justify-start"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "text-aqua-pale text-[13px]"
+  }, "LIGHTING")), /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.DividerItem */.se.VG, null), /*#__PURE__*/react.createElement("div", {
+    className: "all-in-one-menu-item flex w-full justify-center"
+  }, /*#__PURE__*/react.createElement(VolumeShade, {
+    commandsManager: commandsManager,
+    serviceManager: serviceManager,
+    viewportId: viewportId
+  })), /*#__PURE__*/react.createElement(VolumeLighting, {
+    viewportId: viewportId,
+    commandsManager: commandsManager,
+    serviceManager: serviceManager
+  }));
+}
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/WindowLevelActionMenu.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+function WindowLevelActionMenu({
+  viewportId,
+  element,
+  presets,
+  verticalDirection,
+  horizontalDirection,
+  commandsManager,
+  serviceManager,
+  colorbarProperties,
+  displaySets,
+  volumeRenderingPresets,
+  volumeRenderingQualityRange
+}) {
+  const {
+    colormaps,
+    colorbarContainerPosition,
+    colorbarInitialColormap,
+    colorbarTickPosition,
+    width: colorbarWidth
+  } = colorbarProperties;
+  const {
+    colorbarService,
+    cornerstoneViewportService
+  } = serviceManager.services;
+  const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+  const backgroundColor = viewportInfo.getViewportOptions().background;
+  const isLight = backgroundColor ? dist_esm.utilities.isEqual(backgroundColor, [1, 1, 1]) : false;
+  const nonImageModalities = ['SR', 'SEG', 'SM', 'RTSTRUCT', 'RTPLAN', 'RTDOSE'];
+  const {
+    t
+  } = (0,es/* useTranslation */.Bd)('WindowLevelActionMenu');
+  const [viewportGrid] = (0,ui_src/* useViewportGrid */.ih)();
+  const {
+    activeViewportId
+  } = viewportGrid;
+  const [vpHeight, setVpHeight] = (0,react.useState)(element?.clientHeight);
+  const [menuKey, setMenuKey] = (0,react.useState)(0);
+  const [is3DVolume, setIs3DVolume] = (0,react.useState)(false);
+  const onSetColorbar = (0,react.useCallback)(() => {
+    setViewportColorbar(viewportId, displaySets, commandsManager, serviceManager, {
+      colormaps,
+      ticks: {
+        position: colorbarTickPosition
+      },
+      width: colorbarWidth,
+      position: colorbarContainerPosition,
+      activeColormapName: colorbarInitialColormap
+    });
+  }, [commandsManager]);
+  (0,react.useEffect)(() => {
+    const newVpHeight = element?.clientHeight;
+    if (vpHeight !== newVpHeight) {
+      setVpHeight(newVpHeight);
+    }
+  }, [element, vpHeight]);
+  (0,react.useEffect)(() => {
+    if (!colorbarService.hasColorbar(viewportId)) {
+      return;
+    }
+    window.setTimeout(() => {
+      colorbarService.removeColorbar(viewportId);
+      onSetColorbar();
+    }, 0);
+  }, [viewportId]);
+  (0,react.useEffect)(() => {
+    if (colorbarService.hasColorbar(viewportId)) {
+      colorbarService.removeColorbar(viewportId);
+    }
+  }, [displaySets]);
+  (0,react.useEffect)(() => {
+    setMenuKey(menuKey + 1);
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+    if (viewport instanceof dist_esm.VolumeViewport3D) {
+      setIs3DVolume(true);
+    } else {
+      setIs3DVolume(false);
+    }
+  }, [displaySets, viewportId, presets, volumeRenderingQualityRange, volumeRenderingPresets, colorbarProperties, activeViewportId, viewportGrid]);
+  return /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.IconMenu */.se.dd, {
+    icon: "viewport-window-level",
+    verticalDirection: verticalDirection,
+    horizontalDirection: horizontalDirection,
+    iconClassName: classnames_default()(
+    // Visible on hover and for the active viewport
+    activeViewportId === viewportId ? 'visible' : 'invisible group-hover:visible', 'flex shrink-0 cursor-pointer rounded active:text-white', isLight ? 'text-aqua-pale hover:bg-secondary-dark' : 'text-primary-light hover:bg-secondary-light/60'),
+    menuStyle: {
+      maxHeight: vpHeight - 32,
+      minWidth: 218
+    },
+    onVisibilityChange: () => {
+      setVpHeight(element.clientHeight);
+    },
+    menuKey: menuKey
+  }, /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.ItemPanel */.se.cV, null, !is3DVolume && /*#__PURE__*/react.createElement(Colorbar, {
+    viewportId: viewportId,
+    displaySets: displaySets.filter(ds => !nonImageModalities.includes(ds.Modality)),
+    commandsManager: commandsManager,
+    serviceManager: serviceManager,
+    colorbarProperties: colorbarProperties
+  }), colormaps && !is3DVolume && /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.SubMenu */.se.g8, {
+    key: "colorLUTPresets",
+    itemLabel: "Color LUT",
+    itemIcon: "icon-color-lut"
+  }, /*#__PURE__*/react.createElement(Colormap, {
+    colormaps: colormaps,
+    viewportId: viewportId,
+    displaySets: displaySets.filter(ds => !nonImageModalities.includes(ds.Modality)),
+    commandsManager: commandsManager,
+    serviceManager: serviceManager
+  })), presets && !is3DVolume && /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.SubMenu */.se.g8, {
+    key: "windowLevelPresets",
+    itemLabel: t('Modality Window Presets', {
+      modality: Object.keys(presets)[0]
+    }),
+    itemIcon: "viewport-window-level"
+  }, /*#__PURE__*/react.createElement(WindowLevel, {
+    viewportId: viewportId,
+    commandsManager: commandsManager,
+    presets: presets
+  })), volumeRenderingPresets && is3DVolume && /*#__PURE__*/react.createElement(VolumeRenderingPresets, {
+    serviceManager: serviceManager,
+    viewportId: viewportId,
+    commandsManager: commandsManager,
+    volumeRenderingPresets: volumeRenderingPresets
+  }), volumeRenderingQualityRange && is3DVolume && /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.SubMenu */.se.g8, {
+    itemLabel: "Rendering Options"
+  }, /*#__PURE__*/react.createElement(VolumeRenderingOptions, {
+    viewportId: viewportId,
+    commandsManager: commandsManager,
+    volumeRenderingQualityRange: volumeRenderingQualityRange,
+    serviceManager: serviceManager
+  }))));
+}
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/getWindowLevelActionMenu.tsx
+
+
+function getWindowLevelActionMenu({
+  viewportId,
+  element,
+  displaySets,
+  servicesManager,
+  commandsManager,
+  verticalDirection,
+  horizontalDirection
+}) {
+  const {
+    customizationService
+  } = servicesManager.services;
+  const {
+    presets
+  } = customizationService.get('cornerstone.windowLevelPresets');
+  const colorbarProperties = customizationService.get('cornerstone.colorbar');
+  const {
+    volumeRenderingPresets,
+    volumeRenderingQualityRange
+  } = customizationService.get('cornerstone.3dVolumeRendering');
+  const displaySetPresets = displaySets.filter(displaySet => presets[displaySet.Modality]).map(displaySet => {
+    return {
+      [displaySet.Modality]: presets[displaySet.Modality]
+    };
+  });
+  const hasMenu = displaySetPresets.length > 0;
+  return hasMenu ? /*#__PURE__*/react.createElement(WindowLevelActionMenu, {
+    viewportId: viewportId,
+    element: element,
+    presets: displaySetPresets[0],
+    verticalDirection: verticalDirection,
+    horizontalDirection: horizontalDirection,
+    commandsManager: commandsManager,
+    serviceManager: servicesManager,
+    colorbarProperties: colorbarProperties,
+    displaySets: displaySets,
+    volumeRenderingPresets: volumeRenderingPresets,
+    volumeRenderingQualityRange: volumeRenderingQualityRange
+  }) : null;
+}
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx
 
 
@@ -1062,6 +1982,9 @@ function WrappedCinePlayer({
 
 
 
+
+
+
 const STACK = 'stack';
 
 /**
@@ -1139,6 +2062,7 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
   const [scrollbarHeight, setScrollbarHeight] = (0,react.useState)('100px');
   const [enabledVPElement, setEnabledVPElement] = (0,react.useState)(null);
   const elementRef = (0,react.useRef)();
+  const [appConfig] = (0,state_0/* useAppConfig */.r)();
   const {
     measurementService,
     displaySetService,
@@ -1148,12 +2072,14 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     cornerstoneViewportService,
     cornerstoneCacheService,
     viewportGridService,
-    stateSyncService
+    stateSyncService,
+    viewportActionCornersService,
+    customizationService
   } = servicesManager.services;
   const [viewportDialogState] = (0,ui_src/* useViewportDialog */.OR)();
   // useCallback for scroll bar height calculation
   const setImageScrollBarHeight = (0,react.useCallback)(() => {
-    const scrollbarHeight = `${elementRef.current.clientHeight - 20}px`;
+    const scrollbarHeight = `${elementRef.current.clientHeight - 40}px`;
     setScrollbarHeight(scrollbarHeight);
   }, [elementRef]);
 
@@ -1169,6 +2095,7 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     const syncGroups = viewportInfo.getSyncGroups();
     toolGroupService.removeViewportFromToolGroup(viewportId, renderingEngineId);
     syncGroupService.removeViewportFromSyncGroup(viewportId, renderingEngineId, syncGroups);
+    viewportActionCornersService.clear(viewportId);
   }, [viewportId]);
   const elementEnabledHandler = (0,react.useCallback)(evt => {
     // check this is this element reference and return early if doesn't match
@@ -1319,6 +2246,33 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
       unsubscribeFromJumpToMeasurementEvents();
     };
   }, [displaySets, elementRef, viewportId]);
+
+  // Set up the window level action menu in the viewport action corners.
+  (0,react.useEffect)(() => {
+    // Doing an === check here because the default config value when not set is true
+    if (appConfig.addWindowLevelActionMenu === false) {
+      return;
+    }
+
+    // TODO: In the future we should consider using the customization service
+    // to determine if and in which corner various action components should go.
+    const wlActionMenu = getWindowLevelActionMenu({
+      viewportId,
+      element: elementRef.current,
+      displaySets,
+      servicesManager,
+      commandsManager,
+      verticalDirection: ui_src/* AllInOneMenu.VerticalDirection */.se.mq.TopToBottom,
+      horizontalDirection: ui_src/* AllInOneMenu.HorizontalDirection */.se.Iu.RightToLeft
+    });
+    viewportActionCornersService.setComponent({
+      viewportId,
+      id: 'windowLevelActionMenu',
+      component: wlActionMenu,
+      location: viewportActionCornersService.LOCATIONS.topRight,
+      indexPriority: -100
+    });
+  }, [displaySets, viewportId, viewportActionCornersService, servicesManager, commandsManager]);
   return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
     className: "viewport-wrapper"
   }, /*#__PURE__*/react.createElement(index_esm/* default */.Ay, {
@@ -1344,7 +2298,7 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     viewportId: viewportId,
     servicesManager: servicesManager
   })), /*#__PURE__*/react.createElement("div", {
-    className: "absolute w-full"
+    className: "absolute top-[24px] w-full"
   }, viewportDialogState.viewportId === viewportId && /*#__PURE__*/react.createElement(ui_src/* Notification */.Eg, {
     id: "viewport-notification",
     message: viewportDialogState.message,
@@ -1352,7 +2306,9 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     actions: viewportDialogState.actions,
     onSubmit: viewportDialogState.onSubmit,
     onOutsideClick: viewportDialogState.onOutsideClick
-  })));
+  })), /*#__PURE__*/react.createElement(components_OHIFViewportActionCorners, {
+    viewportId: viewportId
+  }));
 }, areEqual);
 function _subscribeToJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportId, displaySets, viewportGridService, cornerstoneViewportService) {
   const {