@ohif/app 3.8.0-beta.8 → 3.8.0-beta.81

package/dist/574.bundle.d648fea691d6709bf2b4.js

@@ -0,0 +1,2652 @@
+"use strict";
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[574],{
+
+/***/ 71574:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ Viewport_OHIFCornerstoneViewport)
+});
+
+// EXTERNAL MODULE: ../../../node_modules/react/index.js
+var react = __webpack_require__(41766);
+// EXTERNAL MODULE: ../../../node_modules/react-resize-detector/build/index.esm.js
+var index_esm = __webpack_require__(78668);
+// EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
+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 + 18 modules
+var esm = __webpack_require__(24542);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 327 modules
+var dist_esm = __webpack_require__(44656);
+// EXTERNAL MODULE: ../../core/src/index.ts + 70 modules
+var src = __webpack_require__(55411);
+// EXTERNAL MODULE: ../../ui/src/index.js + 785 modules
+var ui_src = __webpack_require__(5085);
+// EXTERNAL MODULE: ../../../extensions/cornerstone/src/state.ts
+var state = __webpack_require__(71353);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.css
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx
+
+
+
+
+
+function CornerstoneImageScrollbar({
+  viewportData,
+  viewportId,
+  element,
+  imageSliceData,
+  setImageSliceData,
+  scrollbarHeight,
+  servicesManager
+}) {
+  const {
+    cineService,
+    cornerstoneViewportService
+  } = servicesManager.services;
+  const onImageScrollbarChange = (imageIndex, viewportId) => {
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+    const {
+      isCineEnabled
+    } = cineService.getState();
+    if (isCineEnabled) {
+      // on image scrollbar change, stop the CINE if it is playing
+      cineService.stopClip(element);
+      cineService.setCine({
+        id: viewportId,
+        isPlaying: false
+      });
+    }
+    esm.utilities.jumpToSlice(viewport.element, {
+      imageIndex,
+      debounceLoading: true
+    });
+  };
+  (0,react.useEffect)(() => {
+    if (!viewportData) {
+      return;
+    }
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+    if (!viewport) {
+      return;
+    }
+    if (viewportData.viewportType === dist_esm.Enums.ViewportType.STACK) {
+      const imageIndex = viewport.getCurrentImageIdIndex();
+      setImageSliceData({
+        imageIndex: imageIndex,
+        numberOfSlices: viewportData.data.imageIds.length
+      });
+      return;
+    }
+    if (viewportData.viewportType === dist_esm.Enums.ViewportType.ORTHOGRAPHIC) {
+      const sliceData = dist_esm.utilities.getImageSliceDataForVolumeViewport(viewport);
+      if (!sliceData) {
+        return;
+      }
+      const {
+        imageIndex,
+        numberOfSlices
+      } = sliceData;
+      setImageSliceData({
+        imageIndex,
+        numberOfSlices
+      });
+    }
+  }, [viewportId, viewportData]);
+  (0,react.useEffect)(() => {
+    if (viewportData?.viewportType !== dist_esm.Enums.ViewportType.STACK) {
+      return;
+    }
+    const updateStackIndex = event => {
+      const {
+        newImageIdIndex
+      } = event.detail;
+      // find the index of imageId in the imageIds
+      setImageSliceData({
+        imageIndex: newImageIdIndex,
+        numberOfSlices: viewportData.data.imageIds.length
+      });
+    };
+    element.addEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_SCROLL, updateStackIndex);
+    return () => {
+      element.removeEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_SCROLL, updateStackIndex);
+    };
+  }, [viewportData, element]);
+  (0,react.useEffect)(() => {
+    if (viewportData?.viewportType !== dist_esm.Enums.ViewportType.ORTHOGRAPHIC) {
+      return;
+    }
+    const updateVolumeIndex = event => {
+      const {
+        imageIndex,
+        numberOfSlices
+      } = event.detail;
+      // find the index of imageId in the imageIds
+      setImageSliceData({
+        imageIndex,
+        numberOfSlices
+      });
+    };
+    element.addEventListener(dist_esm.Enums.Events.VOLUME_NEW_IMAGE, updateVolumeIndex);
+    return () => {
+      element.removeEventListener(dist_esm.Enums.Events.VOLUME_NEW_IMAGE, updateVolumeIndex);
+    };
+  }, [viewportData, element]);
+  return /*#__PURE__*/react.createElement(ui_src/* ImageScrollbar */.uq, {
+    onChange: evt => onImageScrollbarChange(evt, viewportId),
+    max: imageSliceData.numberOfSlices ? imageSliceData.numberOfSlices - 1 : 0,
+    height: scrollbarHeight,
+    value: imageSliceData.imageIndex
+  });
+}
+CornerstoneImageScrollbar.propTypes = {
+  viewportData: (prop_types_default()).object,
+  viewportId: (prop_types_default()).string.isRequired,
+  element: prop_types_default().instanceOf(Element),
+  scrollbarHeight: (prop_types_default()).string,
+  imageSliceData: (prop_types_default()).object.isRequired,
+  setImageSliceData: (prop_types_default()).func.isRequired,
+  servicesManager: (prop_types_default()).object.isRequired
+};
+/* harmony default export */ const ViewportImageScrollbar = (CornerstoneImageScrollbar);
+// EXTERNAL MODULE: ../../../node_modules/gl-matrix/esm/index.js + 1 modules
+var gl_matrix_esm = __webpack_require__(44753);
+// EXTERNAL MODULE: ../../../node_modules/moment/moment.js
+var moment = __webpack_require__(8291);
+var moment_default = /*#__PURE__*/__webpack_require__.n(moment);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/Overlays/utils.ts
+
+
+
+/**
+ * Checks if value is valid.
+ *
+ * @param {number} value
+ * @returns {boolean} is valid.
+ */
+function isValidNumber(value) {
+  return typeof value === 'number' && !isNaN(value);
+}
+
+/**
+ * Formats number precision.
+ *
+ * @param {number} number
+ * @param {number} precision
+ * @returns {number} formatted number.
+ */
+function formatNumberPrecision(number, precision = 0) {
+  if (number !== null) {
+    return parseFloat(number).toFixed(precision);
+  }
+}
+
+/**
+ * Formats DICOM date.
+ *
+ * @param {string} date
+ * @param {string} strFormat
+ * @returns {string} formatted date.
+ */
+function formatDICOMDate(date, strFormat = 'MMM D, YYYY') {
+  return moment_default()(date, 'YYYYMMDD').format(strFormat);
+}
+
+/**
+ *    DICOM Time is stored as HHmmss.SSS, where:
+ *      HH 24 hour time:
+ *        m mm        0..59   Minutes
+ *        s ss        0..59   Seconds
+ *        S SS SSS    0..999  Fractional seconds
+ *
+ *        Goal: '24:12:12'
+ *
+ * @param {*} time
+ * @param {string} strFormat
+ * @returns {string} formatted name.
+ */
+function formatDICOMTime(time, strFormat = 'HH:mm:ss') {
+  return moment_default()(time, 'HH:mm:ss').format(strFormat);
+}
+
+/**
+ * Formats a patient name for display purposes
+ *
+ * @param {string} name
+ * @returns {string} formatted name.
+ */
+function formatPN(name) {
+  if (!name) {
+    return '';
+  }
+  const cleaned = name.split('^').filter(s => !!s).join(', ').trim();
+  return cleaned === ',' || cleaned === '' ? '' : cleaned;
+}
+
+/**
+ * Gets compression type
+ *
+ * @param {number} imageId
+ * @returns {string} compression type.
+ */
+function getCompression(imageId) {
+  const generalImageModule = metaData.get('generalImageModule', imageId) || {};
+  const {
+    lossyImageCompression,
+    lossyImageCompressionRatio,
+    lossyImageCompressionMethod
+  } = generalImageModule;
+  if (lossyImageCompression === '01' && lossyImageCompressionRatio !== '') {
+    const compressionMethod = lossyImageCompressionMethod || 'Lossy: ';
+    const compressionRatio = formatNumberPrecision(lossyImageCompressionRatio, 2);
+    return compressionMethod + compressionRatio + ' : 1';
+  }
+  return 'Lossless / Uncompressed';
+}
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.css
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.tsx
+
+
+
+
+
+
+
+const EPSILON = 1e-4;
+const OverlayItemComponents = {
+  'ohif.overlayItem.windowLevel': VOIOverlayItem,
+  'ohif.overlayItem.zoomLevel': ZoomOverlayItem,
+  'ohif.overlayItem.instanceNumber': InstanceNumberOverlayItem
+};
+
+/**
+ * Customizable Viewport Overlay
+ */
+function CustomizableViewportOverlay({
+  element,
+  viewportData,
+  imageSliceData,
+  viewportId,
+  servicesManager
+}) {
+  const {
+    cornerstoneViewportService,
+    customizationService,
+    toolGroupService
+  } = servicesManager.services;
+  const [voi, setVOI] = (0,react.useState)({
+    windowCenter: null,
+    windowWidth: null
+  });
+  const [scale, setScale] = (0,react.useState)(1);
+  const {
+    imageIndex
+  } = imageSliceData;
+  const topLeftCustomization = customizationService.getModeCustomization('cornerstoneOverlayTopLeft');
+  const topRightCustomization = customizationService.getModeCustomization('cornerstoneOverlayTopRight');
+  const bottomLeftCustomization = customizationService.getModeCustomization('cornerstoneOverlayBottomLeft');
+  const bottomRightCustomization = customizationService.getModeCustomization('cornerstoneOverlayBottomRight');
+  const instances = (0,react.useMemo)(() => {
+    if (viewportData != null) {
+      return _getViewportInstances(viewportData);
+    } else {
+      return null;
+    }
+  }, [viewportData, imageIndex]);
+  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
+   */
+  (0,react.useEffect)(() => {
+    const updateVOI = eventDetail => {
+      const {
+        range
+      } = eventDetail.detail;
+      if (!range) {
+        return;
+      }
+      const {
+        lower,
+        upper
+      } = range;
+      const {
+        windowWidth,
+        windowCenter
+      } = dist_esm.utilities.windowLevel.toWindowLevel(lower, upper);
+      setVOI({
+        windowCenter,
+        windowWidth
+      });
+    };
+    element.addEventListener(dist_esm.Enums.Events.VOI_MODIFIED, updateVOI);
+    return () => {
+      element.removeEventListener(dist_esm.Enums.Events.VOI_MODIFIED, updateVOI);
+    };
+  }, [viewportId, viewportData, voi, element]);
+
+  /**
+   * Updating the scale when the viewport changes its zoom
+   */
+  (0,react.useEffect)(() => {
+    const updateScale = eventDetail => {
+      const {
+        previousCamera,
+        camera
+      } = eventDetail.detail;
+      if (previousCamera.parallelScale !== camera.parallelScale || previousCamera.scale !== camera.scale) {
+        const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+        if (!viewport) {
+          return;
+        }
+        const imageData = viewport.getImageData();
+        if (!imageData) {
+          return;
+        }
+        if (camera.scale) {
+          setScale(camera.scale);
+          return;
+        }
+        const {
+          spacing
+        } = imageData;
+        // convert parallel scale to scale
+        const scale = element.clientHeight * spacing[0] * 0.5 / camera.parallelScale;
+        setScale(scale);
+      }
+    };
+    element.addEventListener(dist_esm.Enums.Events.CAMERA_MODIFIED, updateScale);
+    return () => {
+      element.removeEventListener(dist_esm.Enums.Events.CAMERA_MODIFIED, updateScale);
+    };
+  }, [viewportId, viewportData, cornerstoneViewportService, element]);
+  const _renderOverlayItem = (0,react.useCallback)(item => {
+    const overlayItemProps = {
+      element,
+      viewportData,
+      imageSliceData,
+      viewportId,
+      servicesManager,
+      customization: item,
+      formatters: {
+        formatPN: formatPN,
+        formatDate: formatDICOMDate,
+        formatTime: formatDICOMTime,
+        formatNumberPrecision: formatNumberPrecision
+      },
+      instance: instances ? instances[item?.instanceIndex] : null,
+      voi,
+      scale,
+      instanceNumber
+    };
+    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, 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'
+    }, {
+      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'
+    }], 'bottomRightOverlayItem')
+  });
+}
+function _getViewportInstances(viewportData) {
+  const imageIds = [];
+  if (viewportData.viewportType === dist_esm.Enums.ViewportType.STACK) {
+    imageIds.push(viewportData.data.imageIds[0]);
+  } else if (viewportData.viewportType === dist_esm.Enums.ViewportType.ORTHOGRAPHIC) {
+    const volumes = viewportData.data;
+    volumes.forEach(volume => {
+      if (!volume?.imageIds || volume.imageIds.length === 0) {
+        return;
+      }
+      imageIds.push(volume.imageIds[0]);
+    });
+  }
+  const instances = [];
+  imageIds.forEach(imageId => {
+    const instance = dist_esm.metaData.get('instance', imageId) || {};
+    instances.push(instance);
+  });
+  return instances;
+}
+const getInstanceNumber = (viewportData, viewportId, imageIndex, cornerstoneViewportService) => {
+  let instanceNumber;
+  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 ?? null;
+};
+function _getInstanceNumberFromStack(viewportData, imageIndex) {
+  const imageIds = viewportData.data.imageIds;
+  const imageId = imageIds[imageIndex];
+  if (!imageId) {
+    return;
+  }
+  const generalImageModule = dist_esm.metaData.get('generalImageModule', imageId) || {};
+  const {
+    instanceNumber
+  } = generalImageModule;
+  const stackSize = imageIds.length;
+  if (stackSize <= 1) {
+    return;
+  }
+  return parseInt(instanceNumber);
+}
+
+// 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, imageIndex) {
+  const volumes = viewportData.data;
+  if (!volumes) {
+    return;
+  }
+
+  // Todo: support fusion of acquisition plane which has instanceNumber
+  const {
+    volume
+  } = volumes[0];
+  const {
+    direction,
+    imageIds
+  } = volume;
+  const cornerstoneViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+  if (!cornerstoneViewport) {
+    return;
+  }
+  const camera = cornerstoneViewport.getCamera();
+  const {
+    viewPlaneNormal
+  } = camera;
+  // checking if camera is looking at the acquisition plane (defined by the direction on the volume)
+
+  const scanAxisNormal = direction.slice(6, 9);
+
+  // check if viewPlaneNormal is parallel to scanAxisNormal
+  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) {
+      return {};
+    }
+    const {
+      instanceNumber
+    } = dist_esm.metaData.get('generalImageModule', imageId) || {};
+    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,
+  viewportId: (prop_types_default()).string
+};
+/* harmony default export */ const Overlays_CustomizableViewportOverlay = (CustomizableViewportOverlay);
+// EXTERNAL MODULE: ../../../node_modules/classnames/index.js
+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
+
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.tsx
+
+
+
+
+
+
+
+const {
+  getOrientationStringLPS,
+  invertOrientationStringLPS
+} = esm.utilities.orientation;
+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);
+  const [flipVertical, setFlipVertical] = (0,react.useState)(false);
+  const {
+    cornerstoneViewportService
+  } = servicesManager.services;
+  (0,react.useEffect)(() => {
+    const cameraModifiedListener = evt => {
+      const {
+        rotation,
+        previousCamera,
+        camera
+      } = evt.detail;
+      if (rotation !== undefined) {
+        setRotation(rotation);
+      }
+      if (camera.flipHorizontal !== undefined && previousCamera.flipHorizontal !== camera.flipHorizontal) {
+        setFlipHorizontal(camera.flipHorizontal);
+      }
+      if (camera.flipVertical !== undefined && previousCamera.flipVertical !== camera.flipVertical) {
+        setFlipVertical(camera.flipVertical);
+      }
+    };
+    element.addEventListener(dist_esm.Enums.Events.CAMERA_MODIFIED, cameraModifiedListener);
+    return () => {
+      element.removeEventListener(dist_esm.Enums.Events.CAMERA_MODIFIED, cameraModifiedListener);
+    };
+  }, []);
+  const markers = (0,react.useMemo)(() => {
+    if (!viewportData) {
+      return '';
+    }
+    let rowCosines, columnCosines;
+    if (viewportData.viewportType === 'stack') {
+      const imageIndex = imageSliceData.imageIndex;
+      const imageId = viewportData.data.imageIds?.[imageIndex];
+
+      // Workaround for below TODO stub
+      if (!imageId) {
+        return false;
+      }
+      ({
+        rowCosines,
+        columnCosines
+      } = dist_esm.metaData.get('imagePlaneModule', imageId) || {});
+    } else {
+      if (!element || !(0,dist_esm.getEnabledElement)(element)) {
+        return '';
+      }
+      const {
+        viewport
+      } = (0,dist_esm.getEnabledElement)(element);
+      const {
+        viewUp,
+        viewPlaneNormal
+      } = viewport.getCamera();
+      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;
+    }
+    if (!rowCosines || !columnCosines || rotation === undefined) {
+      return '';
+    }
+    const markers = _getOrientationMarkers(rowCosines, columnCosines, rotation, flipVertical, flipHorizontal);
+    const ohifViewport = cornerstoneViewportService.getViewportInfo(viewportId);
+    if (!ohifViewport) {
+      console.log('ViewportOrientationMarkers::No viewport');
+      return null;
+    }
+    return orientationMarkers.map((m, index) => /*#__PURE__*/react.createElement("div", {
+      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 select-none"
+  }, markers);
+}
+ViewportOrientationMarkers.propTypes = {
+  percentComplete: (prop_types_default()).number,
+  error: (prop_types_default()).object
+};
+ViewportOrientationMarkers.defaultProps = {
+  percentComplete: 0,
+  error: null
+};
+
+/**
+ *
+ * Computes the orientation labels on a Cornerstone-enabled Viewport element
+ * when the viewport settings change (e.g. when a horizontal flip or a rotation occurs)
+ *
+ * @param {*} rowCosines
+ * @param {*} columnCosines
+ * @param {*} rotation in degrees
+ * @returns
+ */
+function _getOrientationMarkers(rowCosines, columnCosines, rotation, flipVertical, flipHorizontal) {
+  const rowString = getOrientationStringLPS(rowCosines);
+  const columnString = getOrientationStringLPS(columnCosines);
+  const oppositeRowString = invertOrientationStringLPS(rowString);
+  const oppositeColumnString = invertOrientationStringLPS(columnString);
+  const markers = {
+    top: oppositeColumnString,
+    left: oppositeRowString,
+    right: rowString,
+    bottom: columnString
+  };
+
+  // If any vertical or horizontal flips are applied, change the orientation strings ahead of
+  // the rotation applications
+  if (flipVertical) {
+    markers.top = invertOrientationStringLPS(markers.top);
+    markers.bottom = invertOrientationStringLPS(markers.bottom);
+  }
+  if (flipHorizontal) {
+    markers.left = invertOrientationStringLPS(markers.left);
+    markers.right = invertOrientationStringLPS(markers.right);
+  }
+
+  // Swap the labels accordingly if the viewport has been rotated
+  // This could be done in a more complex way for intermediate rotation values (e.g. 45 degrees)
+  if (rotation === 90 || rotation === -270) {
+    return {
+      top: markers.left,
+      left: invertOrientationStringLPS(markers.top),
+      right: invertOrientationStringLPS(markers.bottom),
+      bottom: markers.right // left
+    };
+  } else if (rotation === -90 || rotation === 270) {
+    return {
+      top: invertOrientationStringLPS(markers.left),
+      left: markers.top,
+      bottom: markers.left,
+      right: markers.bottom
+    };
+  } else if (rotation === 180 || rotation === -180) {
+    return {
+      top: invertOrientationStringLPS(markers.top),
+      left: invertOrientationStringLPS(markers.left),
+      bottom: invertOrientationStringLPS(markers.bottom),
+      right: invertOrientationStringLPS(markers.right)
+    };
+  }
+  return markers;
+}
+/* harmony default export */ const Overlays_ViewportOrientationMarkers = (ViewportOrientationMarkers);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/Overlays/ViewportImageSliceLoadingIndicator.tsx
+
+
+
+function ViewportImageSliceLoadingIndicator({
+  viewportData,
+  element
+}) {
+  const [loading, setLoading] = (0,react.useState)(false);
+  const [error, setError] = (0,react.useState)(false);
+  const loadIndicatorRef = (0,react.useRef)(null);
+  const imageIdToBeLoaded = (0,react.useRef)(null);
+  const setLoadingState = evt => {
+    clearTimeout(loadIndicatorRef.current);
+    loadIndicatorRef.current = setTimeout(() => {
+      setLoading(true);
+    }, 50);
+  };
+  const setFinishLoadingState = evt => {
+    clearTimeout(loadIndicatorRef.current);
+    setLoading(false);
+  };
+  const setErrorState = evt => {
+    clearTimeout(loadIndicatorRef.current);
+    if (imageIdToBeLoaded.current === evt.detail.imageId) {
+      setError(evt.detail.error);
+      imageIdToBeLoaded.current = null;
+    }
+  };
+  (0,react.useEffect)(() => {
+    element.addEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_SCROLL, setLoadingState);
+    element.addEventListener(dist_esm.Enums.Events.IMAGE_LOAD_ERROR, setErrorState);
+    element.addEventListener(dist_esm.Enums.Events.STACK_NEW_IMAGE, setFinishLoadingState);
+    return () => {
+      element.removeEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_SCROLL, setLoadingState);
+      element.removeEventListener(dist_esm.Enums.Events.STACK_NEW_IMAGE, setFinishLoadingState);
+      element.removeEventListener(dist_esm.Enums.Events.IMAGE_LOAD_ERROR, setErrorState);
+    };
+  }, [element, viewportData]);
+  if (error) {
+    return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
+      className: "absolute top-0 left-0 h-full w-full bg-black opacity-50"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "transparent flex h-full w-full items-center justify-center"
+    }, /*#__PURE__*/react.createElement("p", {
+      className: "text-primary-light text-xl font-light"
+    }, /*#__PURE__*/react.createElement("h4", null, "Error Loading Image"), /*#__PURE__*/react.createElement("p", null, "An error has occurred."), /*#__PURE__*/react.createElement("p", null, error)))));
+  }
+  if (loading) {
+    return (
+      /*#__PURE__*/
+      // IMPORTANT: we need to use the pointer-events-none class to prevent the loading indicator from
+      // interacting with the mouse, since scrolling should propagate to the viewport underneath
+      react.createElement("div", {
+        className: "pointer-events-none absolute top-0 left-0 h-full w-full bg-black opacity-50"
+      }, /*#__PURE__*/react.createElement("div", {
+        className: "transparent flex h-full w-full items-center justify-center"
+      }, /*#__PURE__*/react.createElement("p", {
+        className: "text-primary-light text-xl font-light"
+      }, "Loading...")))
+    );
+  }
+  return null;
+}
+ViewportImageSliceLoadingIndicator.propTypes = {
+  percentComplete: (prop_types_default()).number,
+  error: (prop_types_default()).object,
+  element: (prop_types_default()).object
+};
+ViewportImageSliceLoadingIndicator.defaultProps = {
+  percentComplete: 0,
+  error: null
+};
+/* harmony default export */ const Overlays_ViewportImageSliceLoadingIndicator = (ViewportImageSliceLoadingIndicator);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/Overlays/CornerstoneOverlays.tsx
+
+
+
+
+
+function CornerstoneOverlays(props) {
+  const {
+    viewportId,
+    element,
+    scrollbarHeight,
+    servicesManager
+  } = props;
+  const {
+    cornerstoneViewportService
+  } = servicesManager.services;
+  const [imageSliceData, setImageSliceData] = (0,react.useState)({
+    imageIndex: 0,
+    numberOfSlices: 0
+  });
+  const [viewportData, setViewportData] = (0,react.useState)(null);
+  (0,react.useEffect)(() => {
+    const {
+      unsubscribe
+    } = cornerstoneViewportService.subscribe(cornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED, props => {
+      if (props.viewportId !== viewportId) {
+        return;
+      }
+      setViewportData(props.viewportData);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [viewportId]);
+  if (!element) {
+    return null;
+  }
+  if (viewportData) {
+    const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+    if (viewportInfo?.viewportOptions?.customViewportProps?.hideOverlays) {
+      return null;
+    }
+  }
+  return /*#__PURE__*/react.createElement("div", {
+    className: "noselect"
+  }, /*#__PURE__*/react.createElement(ViewportImageScrollbar, {
+    viewportId: viewportId,
+    viewportData: viewportData,
+    element: element,
+    imageSliceData: imageSliceData,
+    setImageSliceData: setImageSliceData,
+    scrollbarHeight: scrollbarHeight,
+    servicesManager: servicesManager
+  }), /*#__PURE__*/react.createElement(Overlays_CustomizableViewportOverlay, {
+    imageSliceData: imageSliceData,
+    viewportData: viewportData,
+    viewportId: viewportId,
+    servicesManager: servicesManager,
+    element: element
+  }), /*#__PURE__*/react.createElement(Overlays_ViewportImageSliceLoadingIndicator, {
+    viewportData: viewportData,
+    element: element
+  }), /*#__PURE__*/react.createElement(Overlays_ViewportOrientationMarkers, {
+    imageSliceData: imageSliceData,
+    element: element,
+    viewportData: viewportData,
+    servicesManager: servicesManager,
+    viewportId: viewportId
+  }));
+}
+/* harmony default export */ const Overlays_CornerstoneOverlays = (CornerstoneOverlays);
+// EXTERNAL MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/utils/getSOPInstanceAttributes.js
+var getSOPInstanceAttributes = __webpack_require__(1663);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/streaming-image-volume-loader/dist/esm/index.js + 13 modules
+var streaming_image_volume_loader_dist_esm = __webpack_require__(23722);
+// EXTERNAL MODULE: ./state/index.js + 1 modules
+var state_0 = __webpack_require__(15575);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/CinePlayer/CinePlayer.tsx
+
+
+
+
+
+function WrappedCinePlayer({
+  enabledVPElement,
+  viewportId,
+  servicesManager
+}) {
+  const {
+    customizationService,
+    displaySetService,
+    viewportGridService
+  } = servicesManager.services;
+  const [{
+    isCineEnabled,
+    cines
+  }, cineService] = (0,ui_src/* useCine */.tq)();
+  const [newStackFrameRate, setNewStackFrameRate] = (0,react.useState)(24);
+  const [dynamicInfo, setDynamicInfo] = (0,react.useState)(null);
+  const [appConfig] = (0,state_0/* useAppConfig */.r)();
+  const isMountedRef = (0,react.useRef)(null);
+  const cineHandler = () => {
+    if (!cines?.[viewportId] || !enabledVPElement) {
+      return;
+    }
+    const {
+      isPlaying = false,
+      frameRate = 24
+    } = cines[viewportId];
+    const validFrameRate = Math.max(frameRate, 1);
+    return isPlaying ? cineService.playClip(enabledVPElement, {
+      framesPerSecond: validFrameRate,
+      viewportId
+    }) : cineService.stopClip(enabledVPElement);
+  };
+  const newDisplaySetHandler = (0,react.useCallback)(() => {
+    if (!enabledVPElement || !isCineEnabled) {
+      return;
+    }
+    const {
+      viewports
+    } = viewportGridService.getState();
+    const {
+      displaySetInstanceUIDs
+    } = viewports.get(viewportId);
+    let frameRate = 24;
+    let isPlaying = cines[viewportId]?.isPlaying || false;
+    displaySetInstanceUIDs.forEach(displaySetInstanceUID => {
+      const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
+      if (displaySet.FrameRate) {
+        // displaySet.FrameRate corresponds to DICOM tag (0018,1063) which is defined as the the frame time in milliseconds
+        // So a bit of math to get the actual frame rate.
+        frameRate = Math.round(1000 / displaySet.FrameRate);
+        isPlaying ||= !!appConfig.autoPlayCine;
+      }
+
+      // check if the displaySet is dynamic and set the dynamic info
+      if (displaySet.isDynamicVolume) {
+        const {
+          dynamicVolumeInfo
+        } = displaySet;
+        const numTimePoints = dynamicVolumeInfo.timePoints.length;
+        const label = dynamicVolumeInfo.splittingTag;
+        const timePointIndex = dynamicVolumeInfo.timePointIndex || 0;
+        setDynamicInfo({
+          volumeId: displaySet.displaySetInstanceUID,
+          timePointIndex,
+          numTimePoints,
+          label
+        });
+      } else {
+        setDynamicInfo(null);
+      }
+    });
+    if (isPlaying) {
+      cineService.setIsCineEnabled(isPlaying);
+    }
+    cineService.setCine({
+      id: viewportId,
+      isPlaying,
+      frameRate
+    });
+    setNewStackFrameRate(frameRate);
+  }, [displaySetService, viewportId, viewportGridService, cines, isCineEnabled]);
+  (0,react.useEffect)(() => {
+    isMountedRef.current = true;
+    newDisplaySetHandler();
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, [isCineEnabled, newDisplaySetHandler]);
+
+  /**
+   * Use effect for handling new display set
+   */
+  (0,react.useEffect)(() => {
+    if (!enabledVPElement) {
+      return;
+    }
+    dist_esm.eventTarget.addEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_NEW_STACK, newDisplaySetHandler);
+    // this doesn't makes sense that we are listening to this event on viewport element
+    enabledVPElement.addEventListener(dist_esm.Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME, newDisplaySetHandler);
+    return () => {
+      cineService.setCine({
+        id: viewportId,
+        isPlaying: false
+      });
+      dist_esm.eventTarget.removeEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_NEW_STACK, newDisplaySetHandler);
+      enabledVPElement.removeEventListener(dist_esm.Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME, newDisplaySetHandler);
+    };
+  }, [enabledVPElement, newDisplaySetHandler, viewportId]);
+  (0,react.useEffect)(() => {
+    if (!cines || !cines[viewportId] || !enabledVPElement || !isMountedRef.current) {
+      return;
+    }
+    cineHandler();
+    return () => {
+      cineService.stopClip(enabledVPElement);
+    };
+  }, [cines, viewportId, cineService, enabledVPElement, cineHandler]);
+  if (!isCineEnabled) {
+    return null;
+  }
+  const cine = cines[viewportId];
+  const isPlaying = cine?.isPlaying || false;
+  return /*#__PURE__*/react.createElement(RenderCinePlayer, {
+    viewportId: viewportId,
+    cineService: cineService,
+    newStackFrameRate: newStackFrameRate,
+    isPlaying: isPlaying,
+    dynamicInfo: dynamicInfo,
+    customizationService: customizationService
+  });
+}
+function RenderCinePlayer({
+  viewportId,
+  cineService,
+  newStackFrameRate,
+  isPlaying,
+  dynamicInfo: dynamicInfoProp,
+  customizationService
+}) {
+  const {
+    component: CinePlayerComponent = ui_src/* CinePlayer */.F0
+  } = customizationService.get('cinePlayer') ?? {};
+  const [dynamicInfo, setDynamicInfo] = (0,react.useState)(dynamicInfoProp);
+  (0,react.useEffect)(() => {
+    setDynamicInfo(dynamicInfoProp);
+  }, [dynamicInfoProp]);
+
+  /**
+   * Use effect for handling 4D time index changed
+   */
+  (0,react.useEffect)(() => {
+    if (!dynamicInfo) {
+      return;
+    }
+    const handleTimePointIndexChange = evt => {
+      const {
+        volumeId,
+        timePointIndex,
+        numTimePoints,
+        splittingTag
+      } = evt.detail;
+      setDynamicInfo({
+        volumeId,
+        timePointIndex,
+        numTimePoints,
+        label: splittingTag
+      });
+    };
+    dist_esm.eventTarget.addEventListener(streaming_image_volume_loader_dist_esm/* Enums.Events */.fX.s.DYNAMIC_VOLUME_TIME_POINT_INDEX_CHANGED, handleTimePointIndexChange);
+    return () => {
+      dist_esm.eventTarget.removeEventListener(streaming_image_volume_loader_dist_esm/* Enums.Events */.fX.s.DYNAMIC_VOLUME_TIME_POINT_INDEX_CHANGED, handleTimePointIndexChange);
+    };
+  }, [dynamicInfo]);
+  (0,react.useEffect)(() => {
+    if (!dynamicInfo) {
+      return;
+    }
+    const {
+      volumeId,
+      timePointIndex,
+      numTimePoints,
+      splittingTag
+    } = dynamicInfo || {};
+    const volume = dist_esm.cache.getVolume(volumeId);
+    volume.timePointIndex = timePointIndex;
+    setDynamicInfo({
+      volumeId,
+      timePointIndex,
+      numTimePoints,
+      label: splittingTag
+    });
+  }, []);
+  const updateDynamicInfo = (0,react.useCallback)(props => {
+    const {
+      volumeId,
+      timePointIndex
+    } = props;
+    const volume = dist_esm.cache.getVolume(volumeId);
+    volume.timePointIndex = timePointIndex;
+  }, []);
+  return /*#__PURE__*/react.createElement(CinePlayerComponent, {
+    className: "absolute left-1/2 bottom-3 -translate-x-1/2",
+    frameRate: newStackFrameRate,
+    isPlaying: isPlaying,
+    onClose: () => {
+      // also stop the clip
+      cineService.setCine({
+        id: viewportId,
+        isPlaying: false
+      });
+      cineService.setIsCineEnabled(false);
+    },
+    onPlayPauseChange: isPlaying => {
+      cineService.setCine({
+        id: viewportId,
+        isPlaying
+      });
+    },
+    onFrameRateChange: frameRate => cineService.setCine({
+      id: viewportId,
+      frameRate
+    }),
+    dynamicInfo: dynamicInfo,
+    updateDynamicInfo: updateDynamicInfo
+  });
+}
+/* harmony default export */ const CinePlayer = (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})`,
+        fontSize: '0.8rem',
+        textAlign: 'center',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }
+    }));
+  }, [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,
+        viewportId
+      },
+      context: 'CORNERSTONE'
+    });
+  }, [commandsManager, viewportId]);
+  return /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.ItemPanel */.se.cV, null, presets.map((modalityPresets, modalityIndex) => /*#__PURE__*/react.createElement(react.Fragment, {
+    key: modalityIndex
+  }, Object.entries(modalityPresets).map(([modality, presetsArray]) => /*#__PURE__*/react.createElement(react.Fragment, {
+    key: modality
+  }, /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.HeaderItem */.se.N5, null, t('Modality Presets', {
+    modality
+  })), presetsArray.map((preset, index) => /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.Item */.se.q7, {
+    key: `${modality}-${index}`,
+    label: preset.description,
+    secondaryLabel: `${preset.window} / ${preset.level}`,
+    onClick: () => onSetWindowLevel(preset)
+  })))))));
+}
+;// 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] pr-[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)),
+      '--thumb-inner-color': '#5acce6',
+      '--thumb-outer-color': '#090c29'
+    }
+  })));
+}
+;// 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)),
+      '--thumb-inner-color': '#5acce6',
+      '--thumb-outer-color': '#090c29'
+    }
+  })));
+}
+;// 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),
+      '--thumb-inner-color': '#5acce6',
+      '--thumb-outer-color': '#090c29'
+    }
+  })), /*#__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),
+      '--thumb-inner-color': '#5acce6',
+      '--thumb-outer-color': '#090c29'
+    }
+  })), /*#__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),
+      '--thumb-inner-color': '#5acce6',
+      '--thumb-outer-color': '#090c29'
+    }
+  })));
+}
+;// 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 !h-[20px] w-full justify-start"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "text-aqua-pale text-[13px]"
+  }, "LIGHTING")), /*#__PURE__*/react.createElement("div", {
+    className: "bg-primary-dark mt-1 mb-1 h-[2px] w-full"
+  }), /*#__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 text-primary-light', isLight ? ' hover:bg-secondary-dark' : '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 && presets.length > 0 && !is3DVolume && /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.SubMenu */.se.g8, {
+    key: "windowLevelPresets",
+    itemLabel: t('Modality Window Presets'),
+    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]
+    };
+  });
+  return /*#__PURE__*/react.createElement(WindowLevelActionMenu, {
+    viewportId: viewportId,
+    element: element,
+    presets: displaySetPresets,
+    verticalDirection: verticalDirection,
+    horizontalDirection: horizontalDirection,
+    commandsManager: commandsManager,
+    serviceManager: servicesManager,
+    colorbarProperties: colorbarProperties,
+    displaySets: displaySets,
+    volumeRenderingPresets: volumeRenderingPresets,
+    volumeRenderingQualityRange: volumeRenderingQualityRange
+  });
+}
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const STACK = 'stack';
+
+/**
+ * Caches the jump to measurement operation, so that if display set is shown,
+ * it can jump to the measurement.
+ */
+let cacheJumpToMeasurementEvent;
+function areEqual(prevProps, nextProps) {
+  if (nextProps.needsRerendering) {
+    return false;
+  }
+  if (prevProps.displaySets.length !== nextProps.displaySets.length) {
+    return false;
+  }
+  if (prevProps.viewportOptions.orientation !== nextProps.viewportOptions.orientation) {
+    return false;
+  }
+  if (prevProps.viewportOptions.toolGroupId !== nextProps.viewportOptions.toolGroupId) {
+    return false;
+  }
+  if (prevProps.viewportOptions.viewportType !== nextProps.viewportOptions.viewportType) {
+    return false;
+  }
+  if (nextProps.viewportOptions.needsRerendering) {
+    return false;
+  }
+  const prevDisplaySets = prevProps.displaySets;
+  const nextDisplaySets = nextProps.displaySets;
+  if (prevDisplaySets.length !== nextDisplaySets.length) {
+    return false;
+  }
+  for (let i = 0; i < prevDisplaySets.length; i++) {
+    const prevDisplaySet = prevDisplaySets[i];
+    const foundDisplaySet = nextDisplaySets.find(nextDisplaySet => nextDisplaySet.displaySetInstanceUID === prevDisplaySet.displaySetInstanceUID);
+    if (!foundDisplaySet) {
+      return false;
+    }
+
+    // check they contain the same image
+    if (foundDisplaySet.images?.length !== prevDisplaySet.images?.length) {
+      return false;
+    }
+
+    // check if their imageIds are the same
+    if (foundDisplaySet.images?.length) {
+      for (let j = 0; j < foundDisplaySet.images.length; j++) {
+        if (foundDisplaySet.images[j].imageId !== prevDisplaySet.images[j].imageId) {
+          return false;
+        }
+      }
+    }
+  }
+  return true;
+}
+
+// Todo: This should be done with expose of internal API similar to react-vtkjs-viewport
+// Then we don't need to worry about the re-renders if the props change.
+const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
+  const {
+    displaySets,
+    dataSource,
+    viewportOptions,
+    displaySetOptions,
+    servicesManager,
+    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,
+    // if the viewport is part of a hanging protocol layout
+    // we should not really rely on the old synchronizers and
+    // you see below we only rehydrate the synchronizers if the viewport
+    // is not part of the hanging protocol layout. HPs should
+    // define their own synchronizers. Since the synchronizers are
+    // viewportId dependent and
+    isHangingProtocolLayout
+  } = props;
+  const viewportId = viewportOptions.viewportId;
+  if (!viewportId) {
+    throw new Error('Viewport ID is required');
+  }
+
+  // Since we only have support for dynamic data in volume viewports, we should
+  // handle this case here and set the viewportType to volume if any of the
+  // displaySets are dynamic volumes
+  viewportOptions.viewportType = displaySets.some(ds => ds.isDynamicVolume) ? 'volume' : viewportOptions.viewportType;
+  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,
+    toolbarService,
+    toolGroupService,
+    syncGroupService,
+    cornerstoneViewportService,
+    cornerstoneCacheService,
+    viewportGridService,
+    stateSyncService,
+    viewportActionCornersService
+  } = 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 - 40}px`;
+    setScrollbarHeight(scrollbarHeight);
+  }, [elementRef]);
+
+  // useCallback for onResize
+  const onResize = (0,react.useCallback)(() => {
+    if (elementRef.current) {
+      cornerstoneViewportService.resize();
+      setImageScrollBarHeight();
+    }
+  }, [elementRef]);
+  const cleanUpServices = (0,react.useCallback)(viewportInfo => {
+    const renderingEngineId = viewportInfo.getRenderingEngineId();
+    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
+    if (evt.detail.element !== elementRef.current) {
+      return;
+    }
+    const {
+      viewportId,
+      element
+    } = evt.detail;
+    const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+    (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 && !isHangingProtocolLayout) {
+      // If the viewport used to have a synchronizer, re apply it again
+      _rehydrateSynchronizers(synchronizersStore, viewportId, syncGroupService);
+    }
+    if (onElementEnabled) {
+      onElementEnabled(evt);
+    }
+  }, [viewportId, onElementEnabled, toolGroupService]);
+
+  // disable the element upon unmounting
+  (0,react.useEffect)(() => {
+    cornerstoneViewportService.enableViewport(viewportId, elementRef.current);
+    dist_esm.eventTarget.addEventListener(dist_esm.Enums.Events.ELEMENT_ENABLED, elementEnabledHandler);
+    setImageScrollBarHeight();
+    return () => {
+      const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+      if (!viewportInfo) {
+        return;
+      }
+      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);
+    };
+  }, []);
+
+  // subscribe to displaySet metadata invalidation (updates)
+  // Currently, if the metadata changes we need to re-render the display set
+  // for it to take effect in the viewport. As we deal with scaling in the loading,
+  // we need to remove the old volume from the cache, and let the
+  // viewport to re-add it which will use the new metadata. Otherwise, the
+  // viewport will use the cached volume and the new metadata will not be used.
+  // Note: this approach does not actually end of sending network requests
+  // and it uses the network cache
+  (0,react.useEffect)(() => {
+    const {
+      unsubscribe
+    } = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED, async ({
+      displaySetInstanceUID: invalidatedDisplaySetInstanceUID,
+      invalidateData
+    }) => {
+      if (!invalidateData) {
+        return;
+      }
+      const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+      if (viewportInfo.hasDisplaySet(invalidatedDisplaySetInstanceUID)) {
+        const viewportData = viewportInfo.getViewportData();
+        const newViewportData = await cornerstoneCacheService.invalidateViewportData(viewportData, invalidatedDisplaySetInstanceUID, dataSource, displaySetService);
+        const keepCamera = true;
+        cornerstoneViewportService.updateViewport(viewportId, newViewportData, keepCamera);
+      }
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [viewportId]);
+  (0,react.useEffect)(() => {
+    // handle the default viewportType to be stack
+    if (!viewportOptions.viewportType) {
+      viewportOptions.viewportType = STACK;
+    }
+    const loadViewportData = async () => {
+      const viewportData = await cornerstoneCacheService.createViewportData(displaySets, viewportOptions, dataSource, initialImageIndex);
+
+      // 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 state = stateSyncService.getState();
+      const lutPresentationStore = state.lutPresentationStore;
+      const positionPresentationStore = state.positionPresentationStore;
+      const {
+        presentationIds
+      } = viewportOptions;
+      const presentations = {
+        positionPresentation: positionPresentationStore[presentationIds?.positionPresentationId],
+        lutPresentation: lutPresentationStore[presentationIds?.lutPresentationId]
+      };
+      let measurement;
+      if (cacheJumpToMeasurementEvent?.viewportId === viewportId) {
+        measurement = cacheJumpToMeasurementEvent.measurement;
+        // Delete the position presentation so that viewport navigates direct
+        presentations.positionPresentation = null;
+        cacheJumpToMeasurementEvent = null;
+      }
+
+      // Note: This is a hack to get the grid to re-render the OHIFCornerstoneViewport component
+      // Used for segmentation hydration right now, since the logic to decide whether
+      // a viewport needs to render a segmentation lives inside the CornerstoneViewportService
+      // so we need to re-render (force update via change of the needsRerendering) so that React
+      // does the diffing and decides we should render this again (although the id and element has not changed)
+      // so that the CornerstoneViewportService can decide whether to render the segmentation or not. Not that we reached here we can turn it off.
+      if (viewportOptions.needsRerendering) {
+        viewportOptions.needsRerendering = false;
+      }
+      cornerstoneViewportService.setViewportData(viewportId, viewportData, viewportOptions, displaySetOptions, presentations);
+      if (measurement) {
+        esm.annotation.selection.setAnnotationSelected(measurement.uid);
+      }
+    };
+    loadViewportData();
+  }, [viewportOptions, displaySets, dataSource]);
+
+  /**
+   * There are two scenarios for jump to click
+   * 1. Current viewports contain the displaySet that the annotation was drawn on
+   * 2. Current viewports don't contain the displaySet that the annotation was drawn on
+   * and we need to change the viewports displaySet for jumping.
+   * Since measurement_jump happens via events and listeners, the former case is handled
+   * by the measurement_jump direct callback, but the latter case is handled first by
+   * the viewportGrid to set the correct displaySet on the viewport, AND THEN we check
+   * the cache for jumping to see if there is any jump queued, then we jump to the correct slice.
+   */
+  (0,react.useEffect)(() => {
+    if (isJumpToMeasurementDisabled) {
+      return;
+    }
+    const unsubscribeFromJumpToMeasurementEvents = _subscribeToJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportId, displaySets, viewportGridService, cornerstoneViewportService);
+    _checkForCachedJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportId, displaySets, viewportGridService, cornerstoneViewportService);
+    return () => {
+      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, {
+    onResize: onResize,
+    targetRef: elementRef.current
+  }), /*#__PURE__*/react.createElement("div", {
+    className: "cornerstone-viewport-element",
+    style: {
+      height: '100%',
+      width: '100%'
+    },
+    onContextMenu: e => e.preventDefault(),
+    onMouseDown: e => e.preventDefault(),
+    ref: elementRef
+  }), /*#__PURE__*/react.createElement(Overlays_CornerstoneOverlays, {
+    viewportId: viewportId,
+    toolBarService: toolbarService,
+    element: elementRef.current,
+    scrollbarHeight: scrollbarHeight,
+    servicesManager: servicesManager
+  }), /*#__PURE__*/react.createElement(components_CinePlayer, {
+    enabledVPElement: enabledVPElement,
+    viewportId: viewportId,
+    servicesManager: servicesManager
+  })), /*#__PURE__*/react.createElement("div", {
+    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,
+    onKeyPress: viewportDialogState.onKeyPress
+  })), /*#__PURE__*/react.createElement(components_OHIFViewportActionCorners, {
+    viewportId: viewportId
+  }));
+}, areEqual);
+function _subscribeToJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportId, displaySets, viewportGridService, cornerstoneViewportService) {
+  const {
+    unsubscribe
+  } = measurementService.subscribe(src.MeasurementService.EVENTS.JUMP_TO_MEASUREMENT_VIEWPORT, props => {
+    cacheJumpToMeasurementEvent = props;
+    const {
+      viewportId: jumpId,
+      measurement,
+      isConsumed
+    } = props;
+    if (!measurement || isConsumed) {
+      return;
+    }
+    if (cacheJumpToMeasurementEvent.cornerstoneViewport === undefined) {
+      // Decide on which viewport should handle this
+      cacheJumpToMeasurementEvent.cornerstoneViewport = cornerstoneViewportService.getViewportIdToJump(jumpId, measurement.displaySetInstanceUID, {
+        referencedImageId: measurement.referencedImageId
+      });
+    }
+    if (cacheJumpToMeasurementEvent.cornerstoneViewport !== viewportId) {
+      return;
+    }
+    _jumpToMeasurement(measurement, elementRef, viewportId, measurementService, displaySetService, viewportGridService, cornerstoneViewportService);
+  });
+  return unsubscribe;
+}
+
+// Check if there is a queued jumpToMeasurement event
+function _checkForCachedJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportId, displaySets, viewportGridService, cornerstoneViewportService) {
+  if (!cacheJumpToMeasurementEvent) {
+    return;
+  }
+  if (cacheJumpToMeasurementEvent.isConsumed) {
+    cacheJumpToMeasurementEvent = null;
+    return;
+  }
+  const displaysUIDs = displaySets.map(displaySet => displaySet.displaySetInstanceUID);
+  if (!displaysUIDs?.length) {
+    return;
+  }
+
+  // Jump to measurement if the measurement exists
+  const {
+    measurement
+  } = cacheJumpToMeasurementEvent;
+  if (measurement && elementRef) {
+    if (displaysUIDs.includes(measurement?.displaySetInstanceUID)) {
+      _jumpToMeasurement(measurement, elementRef, viewportId, measurementService, displaySetService, viewportGridService, cornerstoneViewportService);
+    }
+  }
+}
+function _jumpToMeasurement(measurement, targetElementRef, viewportId, measurementService, displaySetService, viewportGridService, cornerstoneViewportService) {
+  const targetElement = targetElementRef.current;
+  const {
+    displaySetInstanceUID,
+    SOPInstanceUID,
+    frameNumber
+  } = measurement;
+  if (!SOPInstanceUID) {
+    console.warn('cannot jump in a non-acquisition plane measurements yet');
+    return;
+  }
+  const referencedDisplaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
+
+  // Todo: setCornerstoneMeasurementActive should be handled by the toolGroupManager
+  //  to set it properly
+  // setCornerstoneMeasurementActive(measurement);
+
+  viewportGridService.setActiveViewportId(viewportId);
+  const enabledElement = (0,dist_esm.getEnabledElement)(targetElement);
+  if (enabledElement) {
+    // See how the jumpToSlice() of Cornerstone3D deals with imageIdx param.
+    const viewport = enabledElement.viewport;
+    let imageIdIndex = 0;
+    let viewportCameraDirectionMatch = true;
+    if (viewport instanceof dist_esm.StackViewport) {
+      const imageIds = viewport.getImageIds();
+      imageIdIndex = imageIds.findIndex(imageId => {
+        const {
+          SOPInstanceUID: aSOPInstanceUID,
+          frameNumber: aFrameNumber
+        } = (0,getSOPInstanceAttributes/* default */.A)(imageId);
+        return aSOPInstanceUID === SOPInstanceUID && (!frameNumber || frameNumber === aFrameNumber);
+      });
+    } else {
+      // for volume viewport we can't rely on the imageIdIndex since it can be
+      // a reconstructed view that doesn't match the original slice numbers etc.
+      const {
+        viewPlaneNormal: measurementViewPlane
+      } = measurement.metadata;
+      imageIdIndex = referencedDisplaySet.images.findIndex(i => i.SOPInstanceUID === SOPInstanceUID);
+      const {
+        viewPlaneNormal: viewportViewPlane
+      } = viewport.getCamera();
+
+      // should compare abs for both planes since the direction can be flipped
+      if (measurementViewPlane && !dist_esm.utilities.isEqual(measurementViewPlane.map(Math.abs), viewportViewPlane.map(Math.abs))) {
+        viewportCameraDirectionMatch = false;
+      }
+    }
+    if (!viewportCameraDirectionMatch || imageIdIndex === -1) {
+      return;
+    }
+    esm.utilities.jumpToSlice(targetElement, {
+      imageIndex: imageIdIndex
+    });
+    esm.annotation.selection.setAnnotationSelected(measurement.uid);
+    // Jump to measurement consumed, remove.
+    cacheJumpToMeasurementEvent?.consume?.();
+    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';
+OHIFCornerstoneViewport.defaultProps = {
+  isJumpToMeasurementDisabled: false
+};
+OHIFCornerstoneViewport.propTypes = {
+  displaySets: (prop_types_default()).array.isRequired,
+  dataSource: (prop_types_default()).object.isRequired,
+  viewportOptions: (prop_types_default()).object,
+  displaySetOptions: prop_types_default().arrayOf((prop_types_default()).any),
+  servicesManager: (prop_types_default()).object.isRequired,
+  onElementEnabled: (prop_types_default()).func,
+  isJumpToMeasurementDisabled: (prop_types_default()).bool,
+  // 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
+  initialImageIdOrIndex: prop_types_default().oneOfType([(prop_types_default()).string, (prop_types_default()).number])
+};
+/* harmony default export */ const Viewport_OHIFCornerstoneViewport = (OHIFCornerstoneViewport);
+
+/***/ })
+
+}]);