@ohif/app 3.8.0-beta.7 → 3.8.0-beta.71

package/dist/{181.bundle.a62b9f0ec692299acb35.js → 574.bundle.b262cbe9f2afd7275271.js}

@@ -1,7 +1,7 @@
 "use strict";
-(self["webpackChunk"] = self["webpackChunk"] || []).push([[181],{
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[574],{
 
-/***/ 86181:
+/***/ 71574:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -13,22 +13,22 @@ __webpack_require__.d(__webpack_exports__, {
 });
 
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
-var react = __webpack_require__(43001);
+var react = __webpack_require__(41766);
 // EXTERNAL MODULE: ../../../node_modules/react-resize-detector/build/index.esm.js
-var index_esm = __webpack_require__(7023);
+var index_esm = __webpack_require__(78668);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
-var prop_types = __webpack_require__(3827);
+var prop_types = __webpack_require__(11374);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 348 modules
-var esm = __webpack_require__(14957);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 331 modules
-var dist_esm = __webpack_require__(3743);
-// EXTERNAL MODULE: ../../core/src/index.ts + 65 modules
-var src = __webpack_require__(71771);
-// EXTERNAL MODULE: ../../ui/src/index.js + 486 modules
-var ui_src = __webpack_require__(22582);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 16 modules
+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 + 68 modules
+var src = __webpack_require__(85073);
+// EXTERNAL MODULE: ../../ui/src/index.js + 542 modules
+var ui_src = __webpack_require__(48804);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/state.ts
-var state = __webpack_require__(73704);
+var state = __webpack_require__(71353);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.css
 // extracted by mini-css-extract-plugin
 
@@ -38,16 +38,15 @@ var state = __webpack_require__(73704);
 
 
 
-function CornerstoneImageScrollbar(_ref) {
-  let {
-    viewportData,
-    viewportId,
-    element,
-    imageSliceData,
-    setImageSliceData,
-    scrollbarHeight,
-    servicesManager
-  } = _ref;
+function CornerstoneImageScrollbar({
+  viewportData,
+  viewportId,
+  element,
+  imageSliceData,
+  setImageSliceData,
+  scrollbarHeight,
+  servicesManager
+}) {
   const {
     cineService,
     cornerstoneViewportService
@@ -140,7 +139,7 @@ function CornerstoneImageScrollbar(_ref) {
       element.removeEventListener(dist_esm.Enums.Events.VOLUME_NEW_IMAGE, updateVolumeIndex);
     };
   }, [viewportData, element]);
-  return /*#__PURE__*/react.createElement(ui_src/* ImageScrollbar */.Ln, {
+  return /*#__PURE__*/react.createElement(ui_src/* ImageScrollbar */.uq, {
     onChange: evt => onImageScrollbarChange(evt, viewportId),
     max: imageSliceData.numberOfSlices ? imageSliceData.numberOfSlices - 1 : 0,
     height: scrollbarHeight,
@@ -158,9 +157,9 @@ CornerstoneImageScrollbar.propTypes = {
 };
 /* harmony default export */ const ViewportImageScrollbar = (CornerstoneImageScrollbar);
 // EXTERNAL MODULE: ../../../node_modules/gl-matrix/esm/index.js + 10 modules
-var gl_matrix_esm = __webpack_require__(45451);
+var gl_matrix_esm = __webpack_require__(83636);
 // EXTERNAL MODULE: ../../../node_modules/moment/moment.js
-var moment = __webpack_require__(71271);
+var moment = __webpack_require__(8291);
 var moment_default = /*#__PURE__*/__webpack_require__.n(moment);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/Overlays/utils.ts
 
@@ -183,8 +182,7 @@ function isValidNumber(value) {
  * @param {number} precision
  * @returns {number} formatted number.
  */
-function formatNumberPrecision(number) {
-  let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+function formatNumberPrecision(number, precision = 0) {
   if (number !== null) {
     return parseFloat(number).toFixed(precision);
   }
@@ -197,8 +195,7 @@ function formatNumberPrecision(number) {
  * @param {string} strFormat
  * @returns {string} formatted date.
  */
-function formatDICOMDate(date) {
-  let strFormat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'MMM D, YYYY';
+function formatDICOMDate(date, strFormat = 'MMM D, YYYY') {
   return moment_default()(date, 'YYYYMMDD').format(strFormat);
 }
 
@@ -215,8 +212,7 @@ function formatDICOMDate(date) {
  * @param {string} strFormat
  * @returns {string} formatted name.
  */
-function formatDICOMTime(time) {
-  let strFormat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'HH:mm:ss';
+function formatDICOMTime(time, strFormat = 'HH:mm:ss') {
   return moment_default()(time, 'HH:mm:ss').format(strFormat);
 }
 
@@ -266,104 +262,32 @@ function getCompression(imageId) {
 
 
 const EPSILON = 1e-4;
-/**
- * Window Level / Center Overlay item
- */
-function VOIOverlayItem(_ref) {
-  let {
-    voi,
-    customization
-  } = _ref;
-  const {
-    windowWidth,
-    windowCenter
-  } = voi;
-  if (typeof windowCenter !== 'number' || typeof windowWidth !== 'number') {
-    return null;
-  }
-  return /*#__PURE__*/react.createElement("div", {
-    className: "overlay-item flex flex-row",
-    style: {
-      color: customization && customization.color || undefined
-    }
-  }, /*#__PURE__*/react.createElement("span", {
-    className: "mr-1 shrink-0"
-  }, "W:"), /*#__PURE__*/react.createElement("span", {
-    className: "ml-1 mr-2 shrink-0 font-light"
-  }, windowWidth.toFixed(0)), /*#__PURE__*/react.createElement("span", {
-    className: "mr-1 shrink-0"
-  }, "L:"), /*#__PURE__*/react.createElement("span", {
-    className: "ml-1 shrink-0 font-light"
-  }, windowCenter.toFixed(0)));
-}
-
-/**
- * Zoom Level Overlay item
- */
-function ZoomOverlayItem(_ref2) {
-  let {
-    scale,
-    customization
-  } = _ref2;
-  return /*#__PURE__*/react.createElement("div", {
-    className: "overlay-item flex flex-row",
-    style: {
-      color: customization && customization.color || undefined
-    }
-  }, /*#__PURE__*/react.createElement("span", {
-    className: "mr-1 shrink-0"
-  }, "Zoom:"), /*#__PURE__*/react.createElement("span", {
-    className: "font-light"
-  }, scale.toFixed(2), "x"));
-}
-
-/**
- * Instance Number Overlay Item
- */
-function InstanceNumberOverlayItem(_ref3) {
-  let {
-    instanceNumber,
-    imageSliceData,
-    customization
-  } = _ref3;
-  const {
-    imageIndex,
-    numberOfSlices
-  } = imageSliceData;
-  return /*#__PURE__*/react.createElement("div", {
-    className: "overlay-item flex flex-row",
-    style: {
-      color: customization && customization.color || undefined
-    }
-  }, /*#__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}`));
-}
+const OverlayItemComponents = {
+  'ohif.overlayItem.windowLevel': VOIOverlayItem,
+  'ohif.overlayItem.zoomLevel': ZoomOverlayItem,
+  'ohif.overlayItem.instanceNumber': InstanceNumberOverlayItem
+};
 
 /**
  * Customizable Viewport Overlay
  */
-function CustomizableViewportOverlay(_ref4) {
-  let {
-    element,
-    viewportData,
-    imageSliceData,
-    viewportId,
-    servicesManager
-  } = _ref4;
+function CustomizableViewportOverlay({
+  element,
+  viewportData,
+  imageSliceData,
+  viewportId,
+  servicesManager
+}) {
   const {
-    toolbarService,
     cornerstoneViewportService,
-    customizationService
+    customizationService,
+    toolGroupService
   } = servicesManager.services;
   const [voi, setVOI] = (0,react.useState)({
     windowCenter: null,
     windowWidth: null
   });
   const [scale, setScale] = (0,react.useState)(1);
-  const [activeTools, setActiveTools] = (0,react.useState)([]);
   const {
     imageIndex
   } = imageSliceData;
@@ -371,26 +295,14 @@ function CustomizableViewportOverlay(_ref4) {
   const topRightCustomization = customizationService.getModeCustomization('cornerstoneOverlayTopRight');
   const bottomLeftCustomization = customizationService.getModeCustomization('cornerstoneOverlayBottomLeft');
   const bottomRightCustomization = customizationService.getModeCustomization('cornerstoneOverlayBottomRight');
-  const instance = (0,react.useMemo)(() => {
+  const instances = (0,react.useMemo)(() => {
     if (viewportData != null) {
-      return _getViewportInstance(viewportData, imageIndex);
+      return _getViewportInstances(viewportData);
     } else {
       return null;
     }
   }, [viewportData, imageIndex]);
-  const instanceNumber = (0,react.useMemo)(() => {
-    if (viewportData != null) {
-      return _getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService);
-    }
-    return null;
-  }, [viewportData, viewportId, imageIndex, cornerstoneViewportService]);
-
-  /**
-   * Initial toolbar state
-   */
-  (0,react.useEffect)(() => {
-    setActiveTools(toolbarService.getActiveTools());
-  }, []);
+  const instanceNumber = (0,react.useMemo)(() => viewportData ? getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService) : null, [viewportData, viewportId, imageIndex, cornerstoneViewportService]);
 
   /**
    * Updating the VOI when the viewport changes its voi
@@ -457,21 +369,6 @@ function CustomizableViewportOverlay(_ref4) {
       element.removeEventListener(dist_esm.Enums.Events.CAMERA_MODIFIED, updateScale);
     };
   }, [viewportId, viewportData, cornerstoneViewportService, element]);
-
-  /**
-   * Updating the active tools when the toolbar changes
-   */
-  // Todo: this should act on the toolGroups instead of the toolbar state
-  (0,react.useEffect)(() => {
-    const {
-      unsubscribe
-    } = toolbarService.subscribe(toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED, () => {
-      setActiveTools(toolbarService.getActiveTools());
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, [toolbarService]);
   const _renderOverlayItem = (0,react.useCallback)(item => {
     const overlayItemProps = {
       element,
@@ -486,87 +383,130 @@ function CustomizableViewportOverlay(_ref4) {
         formatTime: formatDICOMTime,
         formatNumberPrecision: formatNumberPrecision
       },
-      instance,
-      // calculated
+      instance: instances ? instances[item?.instanceIndex] : null,
       voi,
       scale,
       instanceNumber
     };
-    if (item.customizationType === 'ohif.overlayItem.windowLevel') {
-      return /*#__PURE__*/react.createElement(VOIOverlayItem, overlayItemProps);
-    } else if (item.customizationType === 'ohif.overlayItem.zoomLevel') {
-      return /*#__PURE__*/react.createElement(ZoomOverlayItem, overlayItemProps);
-    } else if (item.customizationType === 'ohif.overlayItem.instanceNumber') {
-      return /*#__PURE__*/react.createElement(InstanceNumberOverlayItem, overlayItemProps);
+    if (!item) {
+      return null;
+    }
+    const {
+      customizationType
+    } = item;
+    const OverlayItemComponent = OverlayItemComponents[customizationType];
+    if (OverlayItemComponent) {
+      return /*#__PURE__*/react.createElement(OverlayItemComponent, overlayItemProps);
     } else {
       const renderItem = customizationService.transform(item);
       if (typeof renderItem.content === 'function') {
         return renderItem.content(overlayItemProps);
       }
     }
-  }, [element, viewportData, imageSliceData, viewportId, servicesManager, customizationService, instance, voi, scale, instanceNumber]);
-  const getTopLeftContent = (0,react.useCallback)(() => {
-    const items = topLeftCustomization?.items || [{
+  }, [element, viewportData, imageSliceData, viewportId, servicesManager, customizationService, instances, voi, scale, instanceNumber]);
+  const getContent = (0,react.useCallback)((customization, defaultItems, keyPrefix) => {
+    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({
+      instance: instances ? instances[item?.instanceIndex] : null,
+      formatters: {
+        formatDate: formatDICOMDate
+      }
+    }) ? _renderOverlayItem(item) : null : _renderOverlayItem(item))));
+  }, [_renderOverlayItem]);
+  const studyDateItem = {
+    id: 'StudyDate',
+    customizationType: 'ohif.overlayItem',
+    label: '',
+    title: 'Study date',
+    condition: ({
+      instance
+    }) => instance && instance.StudyDate,
+    contentF: ({
+      instance,
+      formatters: {
+        formatDate
+      }
+    }) => formatDate(instance.StudyDate)
+  };
+  const seriesDescriptionItem = {
+    id: 'SeriesDescription',
+    customizationType: 'ohif.overlayItem',
+    label: '',
+    title: 'Series description',
+    attribute: 'SeriesDescription',
+    condition: ({
+      instance
+    }) => {
+      return instance && instance.SeriesDescription;
+    }
+  };
+  const topLeftItems = instances ? instances.map((instance, index) => {
+    return [{
+      ...studyDateItem,
+      instanceIndex: index
+    }, {
+      ...seriesDescriptionItem,
+      instanceIndex: index
+    }];
+  }).flat() : [];
+  return /*#__PURE__*/react.createElement(ui_src/* ViewportOverlay */.pU, {
+    topLeft:
+    /**
+     * Inline default overlay items for a more standard expansion
+     */
+    getContent(topLeftCustomization, [...topLeftItems], 'topLeftOverlayItem'),
+    topRight: getContent(topRightCustomization, [], 'topRightOverlayItem'),
+    bottomLeft: getContent(bottomLeftCustomization, [{
       id: 'WindowLevel',
       customizationType: 'ohif.overlayItem.windowLevel'
-    }];
-    return /*#__PURE__*/react.createElement(react.Fragment, null, items.map((item, i) => /*#__PURE__*/react.createElement("div", {
-      key: `topLeftOverlayItem_${i}`
-    }, _renderOverlayItem(item))));
-  }, [topLeftCustomization, _renderOverlayItem]);
-  const getTopRightContent = (0,react.useCallback)(() => {
-    const items = topRightCustomization?.items || [{
-      id: 'InstanceNmber',
+    }, {
+      id: 'ZoomLevel',
+      customizationType: 'ohif.overlayItem.zoomLevel',
+      condition: () => {
+        const activeToolName = toolGroupService.getActiveToolForViewport(viewportId);
+        return activeToolName === 'Zoom';
+      }
+    }], 'bottomLeftOverlayItem'),
+    bottomRight: getContent(bottomRightCustomization, [{
+      id: 'InstanceNumber',
       customizationType: 'ohif.overlayItem.instanceNumber'
-    }];
-    return /*#__PURE__*/react.createElement(react.Fragment, null, items.map((item, i) => /*#__PURE__*/react.createElement("div", {
-      key: `topRightOverlayItem_${i}`
-    }, _renderOverlayItem(item))));
-  }, [topRightCustomization, _renderOverlayItem]);
-  const getBottomLeftContent = (0,react.useCallback)(() => {
-    const items = bottomLeftCustomization?.items || [];
-    return /*#__PURE__*/react.createElement(react.Fragment, null, items.map((item, i) => /*#__PURE__*/react.createElement("div", {
-      key: `bottomLeftOverlayItem_${i}`
-    }, _renderOverlayItem(item))));
-  }, [bottomLeftCustomization, _renderOverlayItem]);
-  const getBottomRightContent = (0,react.useCallback)(() => {
-    const items = bottomRightCustomization?.items || [];
-    return /*#__PURE__*/react.createElement(react.Fragment, null, items.map((item, i) => /*#__PURE__*/react.createElement("div", {
-      key: `bottomRightOverlayItem_${i}`
-    }, _renderOverlayItem(item))));
-  }, [bottomRightCustomization, _renderOverlayItem]);
-  return /*#__PURE__*/react.createElement(ui_src/* ViewportOverlay */.No, {
-    topLeft: getTopLeftContent(),
-    topRight: getTopRightContent(),
-    bottomLeft: getBottomLeftContent(),
-    bottomRight: getBottomRightContent()
+    }], 'bottomRightOverlayItem')
   });
 }
-function _getViewportInstance(viewportData, imageIndex) {
-  let imageId = null;
+function _getViewportInstances(viewportData) {
+  const imageIds = [];
   if (viewportData.viewportType === dist_esm.Enums.ViewportType.STACK) {
-    imageId = viewportData.data.imageIds[imageIndex];
+    imageIds.push(viewportData.data.imageIds[0]);
   } 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];
-    }
+    volumes.forEach(volume => {
+      if (!volume?.imageIds) {
+        return;
+      }
+      imageIds.push(volume.imageIds[0]);
+    });
   }
-  return imageId ? dist_esm.metaData.get('instance', imageId) || {} : {};
+  const instances = [];
+  imageIds.forEach(imageId => {
+    const instance = dist_esm.metaData.get('instance', imageId) || {};
+    instances.push(instance);
+  });
+  return instances;
 }
-function _getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService) {
+const getInstanceNumber = (viewportData, viewportId, imageIndex, cornerstoneViewportService) => {
   let instanceNumber;
-  if (viewportData.viewportType === dist_esm.Enums.ViewportType.STACK) {
-    instanceNumber = _getInstanceNumberFromStack(viewportData, imageIndex);
-    if (!instanceNumber && instanceNumber !== 0) {
-      return null;
-    }
-  } else if (viewportData.viewportType === dist_esm.Enums.ViewportType.ORTHOGRAPHIC) {
-    instanceNumber = _getInstanceNumberFromVolume(viewportData, imageIndex, viewportId, cornerstoneViewportService);
+  switch (viewportData.viewportType) {
+    case dist_esm.Enums.ViewportType.STACK:
+      instanceNumber = _getInstanceNumberFromStack(viewportData, imageIndex);
+      break;
+    case dist_esm.Enums.ViewportType.ORTHOGRAPHIC:
+      instanceNumber = _getInstanceNumberFromVolume(viewportData, viewportId, cornerstoneViewportService, imageIndex);
+      break;
   }
-  return instanceNumber;
-}
+  return instanceNumber ?? null;
+};
 function _getInstanceNumberFromStack(viewportData, imageIndex) {
   const imageIds = viewportData.data.imageIds;
   const imageId = imageIds[imageIndex];
@@ -587,14 +527,16 @@ function _getInstanceNumberFromStack(viewportData, imageIndex) {
 // Since volume viewports can be in any view direction, they can render
 // a reconstructed image which don't have imageIds; therefore, no instance and instanceNumber
 // Here we check if viewport is in the acquisition direction and if so, we get the instanceNumber
-function _getInstanceNumberFromVolume(viewportData, viewportId, cornerstoneViewportService) {
-  const volumes = viewportData.volumes;
-
-  // Todo: support fusion of acquisition plane which has instanceNumber
-  if (!volumes || volumes.length > 1) {
+function _getInstanceNumberFromVolume(viewportData, viewportId, cornerstoneViewportService, imageIndex) {
+  const volumes = viewportData.data;
+  if (!volumes) {
     return;
   }
-  const volume = volumes[0];
+
+  // Todo: support fusion of acquisition plane which has instanceNumber
+  const {
+    volume
+  } = volumes[0];
   const {
     direction,
     imageIds
@@ -612,8 +554,8 @@ function _getInstanceNumberFromVolume(viewportData, viewportId, cornerstoneViewp
   const scanAxisNormal = direction.slice(6, 9);
 
   // check if viewPlaneNormal is parallel to scanAxisNormal
-  const cross = gl_matrix_esm/* vec3.cross */.R3.cross(gl_matrix_esm/* vec3.create */.R3.create(), viewPlaneNormal, scanAxisNormal);
-  const isAcquisitionPlane = gl_matrix_esm/* vec3.length */.R3.length(cross) < EPSILON;
+  const cross = gl_matrix_esm/* vec3.cross */.eR.cross(gl_matrix_esm/* vec3.create */.eR.create(), viewPlaneNormal, scanAxisNormal);
+  const isAcquisitionPlane = gl_matrix_esm/* vec3.length */.eR.length(cross) < EPSILON;
   if (isAcquisitionPlane) {
     const imageId = imageIds[imageIndex];
     if (!imageId) {
@@ -625,6 +567,75 @@ function _getInstanceNumberFromVolume(viewportData, viewportId, cornerstoneViewp
     return parseInt(instanceNumber);
   }
 }
+
+/**
+ * Window Level / Center Overlay item
+ */
+function VOIOverlayItem({
+  voi,
+  customization
+}) {
+  const {
+    windowWidth,
+    windowCenter
+  } = voi;
+  if (typeof windowCenter !== 'number' || typeof windowWidth !== 'number') {
+    return null;
+  }
+  return /*#__PURE__*/react.createElement("div", {
+    className: "overlay-item flex flex-row",
+    style: {
+      color: customization && customization.color || undefined
+    }
+  }, /*#__PURE__*/react.createElement("span", {
+    className: "mr-1 shrink-0"
+  }, "W:"), /*#__PURE__*/react.createElement("span", {
+    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"
+  }, windowCenter.toFixed(0)));
+}
+
+/**
+ * Zoom Level Overlay item
+ */
+function ZoomOverlayItem({
+  scale,
+  customization
+}) {
+  return /*#__PURE__*/react.createElement("div", {
+    className: "overlay-item flex flex-row",
+    style: {
+      color: customization && customization.color || undefined
+    }
+  }, /*#__PURE__*/react.createElement("span", {
+    className: "mr-1 shrink-0"
+  }, "Zoom:"), /*#__PURE__*/react.createElement("span", null, scale.toFixed(2), "x"));
+}
+
+/**
+ * Instance Number Overlay Item
+ */
+function InstanceNumberOverlayItem({
+  instanceNumber,
+  imageSliceData,
+  customization
+}) {
+  const {
+    imageIndex,
+    numberOfSlices
+  } = imageSliceData;
+  return /*#__PURE__*/react.createElement("div", {
+    className: "overlay-item flex flex-row",
+    style: {
+      color: customization && customization.color || undefined
+    }
+  }, /*#__PURE__*/react.createElement("span", null, instanceNumber !== undefined && instanceNumber !== null ? /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("span", {
+    className: "mr-1 shrink-0"
+  }, "I:"), /*#__PURE__*/react.createElement("span", null, `${instanceNumber} (${imageIndex + 1}/${numberOfSlices})`)) : `${imageIndex + 1}/${numberOfSlices}`));
+}
 CustomizableViewportOverlay.propTypes = {
   viewportData: (prop_types_default()).object,
   imageIndex: (prop_types_default()).number,
@@ -632,7 +643,7 @@ CustomizableViewportOverlay.propTypes = {
 };
 /* harmony default export */ const Overlays_CustomizableViewportOverlay = (CustomizableViewportOverlay);
 // EXTERNAL MODULE: ../../../node_modules/classnames/index.js
-var classnames = __webpack_require__(44921);
+var classnames = __webpack_require__(61466);
 var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.css
 // extracted by mini-css-extract-plugin
@@ -649,15 +660,14 @@ const {
   getOrientationStringLPS,
   invertOrientationStringLPS
 } = esm.utilities.orientation;
-function ViewportOrientationMarkers(_ref) {
-  let {
-    element,
-    viewportData,
-    imageSliceData,
-    viewportId,
-    servicesManager,
-    orientationMarkers = ['top', 'left']
-  } = _ref;
+function ViewportOrientationMarkers({
+  element,
+  viewportData,
+  imageSliceData,
+  viewportId,
+  servicesManager,
+  orientationMarkers = ['top', 'left']
+}) {
   // Rotation is in degrees
   const [rotation, setRotation] = (0,react.useState)(0);
   const [flipHorizontal, setFlipHorizontal] = (0,react.useState)(false);
@@ -715,8 +725,8 @@ function ViewportOrientationMarkers(_ref) {
         viewUp,
         viewPlaneNormal
       } = viewport.getCamera();
-      const viewRight = gl_matrix_esm/* vec3.create */.R3.create();
-      gl_matrix_esm/* vec3.cross */.R3.cross(viewRight, viewUp, viewPlaneNormal);
+      const viewRight = gl_matrix_esm/* vec3.create */.eR.create();
+      gl_matrix_esm/* vec3.cross */.eR.cross(viewRight, viewUp, viewPlaneNormal);
       columnCosines = [-viewUp[0], -viewUp[1], -viewUp[2]];
       rowCosines = viewRight;
     }
@@ -729,20 +739,15 @@ function ViewportOrientationMarkers(_ref) {
       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 = {
@@ -818,11 +823,10 @@ function _getOrientationMarkers(rowCosines, columnCosines, rotation, flipVertica
 
 
 
-function ViewportImageSliceLoadingIndicator(_ref) {
-  let {
-    viewportData,
-    element
-  } = _ref;
+function ViewportImageSliceLoadingIndicator({
+  viewportData,
+  element
+}) {
   const [loading, setLoading] = (0,react.useState)(false);
   const [error, setError] = (0,react.useState)(false);
   const loadIndicatorRef = (0,react.useRef)(null);
@@ -961,48 +965,34 @@ function CornerstoneOverlays(props) {
 }
 /* harmony default export */ const Overlays_CornerstoneOverlays = (CornerstoneOverlays);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/utils/getSOPInstanceAttributes.js
-var getSOPInstanceAttributes = __webpack_require__(87172);
+var getSOPInstanceAttributes = __webpack_require__(1663);
 // EXTERNAL MODULE: ./state/index.js + 1 modules
-var state_0 = __webpack_require__(62657);
+var state_0 = __webpack_require__(15575);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/CinePlayer/CinePlayer.tsx
 
 
 
 
-function WrappedCinePlayer(_ref) {
-  let {
-    enabledVPElement,
-    viewportId,
-    servicesManager
-  } = _ref;
+function WrappedCinePlayer({
+  enabledVPElement,
+  viewportId,
+  servicesManager
+}) {
   const {
-    toolbarService,
     customizationService,
     displaySetService,
-    viewportGridService,
-    cineService
+    viewportGridService
   } = servicesManager.services;
   const [{
     isCineEnabled,
     cines
-  }] = (0,ui_src/* useCine */.vQ)();
+  }, api] = (0,ui_src/* useCine */.tq)();
   const [newStackFrameRate, setNewStackFrameRate] = (0,react.useState)(24);
-  const [appConfig] = (0,state_0/* useAppConfig */.M)();
+  const [appConfig] = (0,state_0/* useAppConfig */.r)();
+  const isMountedRef = (0,react.useRef)(null);
   const {
-    component: CinePlayerComponent = ui_src/* CinePlayer */.H6
+    component: CinePlayerComponent = ui_src/* CinePlayer */.F0
   } = customizationService.get('cinePlayer') ?? {};
-  const handleCineClose = () => {
-    toolbarService.recordInteraction({
-      groupId: 'MoreTools',
-      interactionType: 'toggle',
-      commands: [{
-        commandName: 'toggleCine',
-        commandOptions: {},
-        toolName: 'cine',
-        context: 'CORNERSTONE'
-      }]
-    });
-  };
   const cineHandler = () => {
     if (!cines || !cines[viewportId] || !enabledVPElement) {
       return;
@@ -1012,11 +1002,11 @@ function WrappedCinePlayer(_ref) {
     const frameRate = cine.frameRate || 24;
     const validFrameRate = Math.max(frameRate, 1);
     if (isPlaying) {
-      cineService.playClip(enabledVPElement, {
+      api.playClip(enabledVPElement, {
         framesPerSecond: validFrameRate
       });
     } else {
-      cineService.stopClip(enabledVPElement);
+      api.stopClip(enabledVPElement);
     }
   };
   const newStackCineHandler = (0,react.useCallback)(() => {
@@ -1038,19 +1028,22 @@ function WrappedCinePlayer(_ref) {
       }
     });
     if (isPlaying) {
-      cineService.setIsCineEnabled(isPlaying);
+      api.setIsCineEnabled(isPlaying);
     }
-    cineService.setCine({
+    api.setCine({
       id: viewportId,
       isPlaying,
       frameRate
     });
     setNewStackFrameRate(frameRate);
-  }, [cineService, displaySetService, viewportId, viewportGridService, cines]);
+  }, [displaySetService, viewportId, viewportGridService, cines]);
   (0,react.useEffect)(() => {
+    isMountedRef.current = true;
     dist_esm.eventTarget.addEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_NEW_STACK, newStackCineHandler);
     return () => {
-      cineService.setCine({
+      isMountedRef.current = false;
+      api.stopClip(enabledVPElement);
+      api.setCine({
         id: viewportId,
         isPlaying: false
       });
@@ -1058,28 +1051,35 @@ function WrappedCinePlayer(_ref) {
     };
   }, [enabledVPElement, newStackCineHandler]);
   (0,react.useEffect)(() => {
-    if (!cines || !cines[viewportId] || !enabledVPElement) {
+    if (!cines || !cines[viewportId] || !enabledVPElement || !isMountedRef.current) {
       return;
     }
     cineHandler();
     return () => {
-      if (enabledVPElement && cines?.[viewportId]?.isPlaying) {
-        cineService.stopClip(enabledVPElement);
-      }
+      api.stopClip(enabledVPElement);
     };
-  }, [cines, viewportId, cineService, enabledVPElement, cineHandler]);
+  }, [cines, viewportId, enabledVPElement, cineHandler]);
   const cine = cines[viewportId];
   const isPlaying = cine && cine.isPlaying || false;
   return isCineEnabled && /*#__PURE__*/react.createElement(CinePlayerComponent, {
     className: "absolute left-1/2 bottom-3 -translate-x-1/2",
     frameRate: newStackFrameRate,
     isPlaying: isPlaying,
-    onClose: handleCineClose,
-    onPlayPauseChange: isPlaying => cineService.setCine({
-      id: viewportId,
-      isPlaying
-    }),
-    onFrameRateChange: frameRate => cineService.setCine({
+    onClose: () => {
+      // also stop the clip
+      api.setCine({
+        id: viewportId,
+        isPlaying: false
+      });
+      api.setIsCineEnabled(false);
+    },
+    onPlayPauseChange: isPlaying => {
+      api.setCine({
+        id: viewportId,
+        isPlaying
+      });
+    },
+    onFrameRateChange: frameRate => api.setCine({
       id: viewportId,
       frameRate
     })
@@ -1089,6 +1089,908 @@ function WrappedCinePlayer(_ref) {
 ;// 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
 
 
@@ -1102,6 +2004,9 @@ function WrappedCinePlayer(_ref) {
 
 
 
+
+
+
 const STACK = 'stack';
 
 /**
@@ -1166,19 +2071,20 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     viewportOptions,
     displaySetOptions,
     servicesManager,
-    commandsManager,
     onElementEnabled,
     onElementDisabled,
     isJumpToMeasurementDisabled,
     // Note: you SHOULD NOT use the initialImageIdOrIndex for manipulation
     // of the imageData in the OHIFCornerstoneViewport. This prop is used
     // to set the initial state of the viewport's first image to render
-    initialImageIndex
+    initialImageIndex,
+    onReady
   } = props;
   const viewportId = viewportOptions.viewportId;
   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,
@@ -1188,12 +2094,14 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     cornerstoneViewportService,
     cornerstoneCacheService,
     viewportGridService,
-    stateSyncService
+    stateSyncService,
+    viewportActionCornersService,
+    customizationService
   } = servicesManager.services;
-  const [viewportDialogState] = (0,ui_src/* useViewportDialog */.en)();
+  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]);
 
@@ -1209,6 +2117,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
@@ -1220,15 +2129,21 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
       element
     } = evt.detail;
     const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
-    (0,state/* setEnabledElement */.Yc)(viewportId, element);
+    (0,state/* setEnabledElement */.ye)(viewportId, element);
     setEnabledVPElement(element);
     const renderingEngineId = viewportInfo.getRenderingEngineId();
     const toolGroupId = viewportInfo.getToolGroupId();
     const syncGroups = viewportInfo.getSyncGroups();
     toolGroupService.addViewportToToolGroup(viewportId, renderingEngineId, toolGroupId);
     syncGroupService.addViewportToSyncGroup(viewportId, renderingEngineId, syncGroups);
+    const synchronizersStore = stateSyncService.getState().synchronizersStore;
+    if (synchronizersStore?.[viewportId]?.length) {
+      // If the viewport used to have a synchronizer, re apply it again
+      _rehydrateSynchronizers(synchronizersStore, viewportId, syncGroupService);
+    }
     if (onElementEnabled) {
       onElementEnabled(evt);
+      onReady?.(evt);
     }
   }, [viewportId, onElementEnabled, toolGroupService]);
 
@@ -1242,13 +2157,17 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
       if (!viewportInfo) {
         return;
       }
-      cleanUpServices(viewportInfo);
       cornerstoneViewportService.storePresentation({
         viewportId
       });
+
+      // This should be done after the store presentation since synchronizers
+      // will get cleaned up and they need the viewportInfo to be present
+      cleanUpServices(viewportInfo);
       if (onElementDisabled) {
         onElementDisabled(viewportInfo);
       }
+      cornerstoneViewportService.disableElement(viewportId);
       dist_esm.eventTarget.removeEventListener(dist_esm.Enums.Events.ELEMENT_ENABLED, elementEnabledHandler);
     };
   }, []);
@@ -1264,11 +2183,10 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
   (0,react.useEffect)(() => {
     const {
       unsubscribe
-    } = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED, async _ref => {
-      let {
-        displaySetInstanceUID: invalidatedDisplaySetInstanceUID,
-        invalidateData
-      } = _ref;
+    } = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED, async ({
+      displaySetInstanceUID: invalidatedDisplaySetInstanceUID,
+      invalidateData
+    }) => {
       if (!invalidateData) {
         return;
       }
@@ -1295,10 +2213,9 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
       // The presentation state will have been stored previously by closing
       // a viewport.  Otherwise, this viewport will be unchanged and the
       // presentation information will be directly carried over.
-      const {
-        lutPresentationStore,
-        positionPresentationStore
-      } = stateSyncService.getState();
+      const state = stateSyncService.getState();
+      const lutPresentationStore = state.lutPresentationStore;
+      const positionPresentationStore = state.positionPresentationStore;
       const {
         presentationIds
       } = viewportOptions;
@@ -1351,12 +2268,36 @@ 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 */.ZP, {
-    refreshMode: "debounce",
-    refreshRate: 50 // Wait 50 ms after last move to render
-    ,
+  }, /*#__PURE__*/react.createElement(index_esm/* default */.Ay, {
     onResize: onResize,
     targetRef: elementRef.current
   }), /*#__PURE__*/react.createElement("div", {
@@ -1379,15 +2320,17 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     viewportId: viewportId,
     servicesManager: servicesManager
   })), /*#__PURE__*/react.createElement("div", {
-    className: "absolute w-full"
-  }, viewportDialogState.viewportId === viewportId && /*#__PURE__*/react.createElement(ui_src/* Notification */.P_, {
+    className: "absolute top-[24px] w-full"
+  }, viewportDialogState.viewportId === viewportId && /*#__PURE__*/react.createElement(ui_src/* Notification */.Eg, {
     id: "viewport-notification",
     message: viewportDialogState.message,
     type: viewportDialogState.type,
     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 {
@@ -1470,7 +2413,7 @@ function _jumpToMeasurement(measurement, targetElementRef, viewportId, measureme
         const {
           SOPInstanceUID: aSOPInstanceUID,
           frameNumber: aFrameNumber
-        } = (0,getSOPInstanceAttributes/* default */.Z)(imageId);
+        } = (0,getSOPInstanceAttributes/* default */.A)(imageId);
         return aSOPInstanceUID === SOPInstanceUID && (!frameNumber || frameNumber === aFrameNumber);
       });
     } else {
@@ -1501,6 +2444,42 @@ function _jumpToMeasurement(measurement, targetElementRef, viewportId, measureme
     cacheJumpToMeasurementEvent = null;
   }
 }
+function _rehydrateSynchronizers(synchronizersStore, viewportId, syncGroupService) {
+  synchronizersStore[viewportId].forEach(synchronizerObj => {
+    if (!synchronizerObj.id) {
+      return;
+    }
+    const {
+      id,
+      sourceViewports,
+      targetViewports
+    } = synchronizerObj;
+    const synchronizer = syncGroupService.getSynchronizer(id);
+    if (!synchronizer) {
+      return;
+    }
+    const sourceViewportInfo = sourceViewports.find(sourceViewport => sourceViewport.viewportId === viewportId);
+    const targetViewportInfo = targetViewports.find(targetViewport => targetViewport.viewportId === viewportId);
+    const isSourceViewportInSynchronizer = synchronizer.getSourceViewports().find(sourceViewport => sourceViewport.viewportId === viewportId);
+    const isTargetViewportInSynchronizer = synchronizer.getTargetViewports().find(targetViewport => targetViewport.viewportId === viewportId);
+
+    // if the viewport was previously a source viewport, add it again
+    if (sourceViewportInfo && !isSourceViewportInSynchronizer) {
+      synchronizer.addSource({
+        viewportId: sourceViewportInfo.viewportId,
+        renderingEngineId: sourceViewportInfo.renderingEngineId
+      });
+    }
+
+    // if the viewport was previously a target viewport, add it again
+    if (targetViewportInfo && !isTargetViewportInSynchronizer) {
+      synchronizer.addTarget({
+        viewportId: targetViewportInfo.viewportId,
+        renderingEngineId: targetViewportInfo.renderingEngineId
+      });
+    }
+  });
+}
 
 // Component displayName
 OHIFCornerstoneViewport.displayName = 'OHIFCornerstoneViewport';