@ohif/app 3.9.0-beta.46 → 3.9.0-beta.47

package/dist/{363.bundle.b09eeacf1db06eac578f.js → 217.bundle.042317b439df47cd38b1.js}

@@ -1,19 +1,601 @@
 "use strict";
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[363],{
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[217],{
 
-/***/ 40684:
+/***/ 34:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  Uu: () => (/* binding */ CornerstoneOverlay),
+  ZP: () => (/* binding */ Overlays_CustomizableViewportOverlay)
+});
+
+// UNUSED EXPORTS: CustomizableViewportOverlay
+
+// EXTERNAL MODULE: ../../../node_modules/react/index.js
+var react = __webpack_require__(43001);
+// EXTERNAL MODULE: ../../../node_modules/gl-matrix/esm/index.js + 1 modules
+var esm = __webpack_require__(72076);
+// EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
+var prop_types = __webpack_require__(3827);
+var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 28 modules
+var dist_esm = __webpack_require__(62709);
+// EXTERNAL MODULE: ../../ui/src/index.js + 784 modules
+var src = __webpack_require__(38604);
+// EXTERNAL MODULE: ../../../node_modules/moment/moment.js
+var moment = __webpack_require__(71271);
+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 '';
+  }
+  if (typeof name === 'object') {
+    name = name.Alphabetic;
+    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': OverlayItem,
+  'ohif.overlayItem.windowLevel': VOIOverlayItem,
+  'ohif.overlayItem.zoomLevel': ZoomOverlayItem,
+  'ohif.overlayItem.instanceNumber': InstanceNumberOverlayItem
+};
+const studyDateItem = {
+  id: 'StudyDate',
+  customizationType: 'ohif.overlayItem',
+  label: '',
+  title: 'Study date',
+  condition: ({
+    referenceInstance
+  }) => referenceInstance?.StudyDate,
+  contentF: ({
+    referenceInstance,
+    formatters: {
+      formatDate
+    }
+  }) => formatDate(referenceInstance.StudyDate)
+};
+const seriesDescriptionItem = {
+  id: 'SeriesDescription',
+  customizationType: 'ohif.overlayItem',
+  label: '',
+  title: 'Series description',
+  condition: ({
+    referenceInstance
+  }) => {
+    return referenceInstance && referenceInstance.SeriesDescription;
+  },
+  contentF: ({
+    referenceInstance
+  }) => referenceInstance.SeriesDescription
+};
+const topLeftItems = {
+  id: 'cornerstoneOverlayTopLeft',
+  items: [studyDateItem, seriesDescriptionItem]
+};
+const topRightItems = {
+  id: 'cornerstoneOverlayTopRight',
+  items: []
+};
+const bottomLeftItems = {
+  id: 'cornerstoneOverlayBottomLeft',
+  items: [{
+    id: 'WindowLevel',
+    customizationType: 'ohif.overlayItem.windowLevel'
+  }, {
+    id: 'ZoomLevel',
+    customizationType: 'ohif.overlayItem.zoomLevel',
+    condition: props => {
+      const activeToolName = props.toolGroupService.getActiveToolForViewport(props.viewportId);
+      return activeToolName === 'Zoom';
+    }
+  }]
+};
+const bottomRightItems = {
+  id: 'cornerstoneOverlayBottomRight',
+  items: [{
+    id: 'InstanceNumber',
+    customizationType: 'ohif.overlayItem.instanceNumber'
+  }]
+};
+
+/**
+ * The @ohif/cornerstoneOverlay is a default value for a customization
+ * for the cornerstone overlays.  The intent is to allow it to be extended
+ * without needing to re-write the individual overlays by using the append
+ * mechanism.  Individual attributes can be modified individually without
+ * affecting the other items by using the append as well, with position
+ * based replacement.
+ * This is used as a default in the getCustomizationModule so that it
+ * is available early for additional customization extensions.
+ */
+const CornerstoneOverlay = {
+  id: '@ohif/cornerstoneOverlay',
+  topLeftItems,
+  topRightItems,
+  bottomLeftItems,
+  bottomRightItems
+};
+
+/**
+ * Customizable Viewport Overlay
+ */
+function CustomizableViewportOverlay({
+  element,
+  viewportData,
+  imageSliceData,
+  viewportId,
+  servicesManager
+}) {
+  const {
+    cornerstoneViewportService,
+    customizationService,
+    toolGroupService,
+    displaySetService
+  } = servicesManager.services;
+  const [voi, setVOI] = (0,react.useState)({
+    windowCenter: null,
+    windowWidth: null
+  });
+  const [scale, setScale] = (0,react.useState)(1);
+  const {
+    imageIndex
+  } = imageSliceData;
+
+  // The new customization is 'cornerstoneOverlay', with an append or replace
+  // on the individual items rather than defining individual items.
+  const cornerstoneOverlay = customizationService.getCustomization('@ohif/cornerstoneOverlay');
+
+  // Historical usage defined the overlays as separate items due to lack of
+  // append functionality.  This code enables the historical usage, but
+  // the recommended functionality is to append to the default values in
+  // cornerstoneOverlay rather than defining individual items.
+  const topLeftCustomization = customizationService.getCustomization('cornerstoneOverlayTopLeft') || cornerstoneOverlay?.topLeftItems;
+  const topRightCustomization = customizationService.getCustomization('cornerstoneOverlayTopRight') || cornerstoneOverlay?.topRightItems;
+  const bottomLeftCustomization = customizationService.getCustomization('cornerstoneOverlayBottomLeft') || cornerstoneOverlay?.bottomLeftItems;
+  const bottomRightCustomization = customizationService.getCustomization('cornerstoneOverlayBottomRight') || cornerstoneOverlay?.bottomRightItems;
+  const instanceNumber = (0,react.useMemo)(() => viewportData ? getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService) : null, [viewportData, viewportId, imageIndex, cornerstoneViewportService]);
+  const displaySetProps = (0,react.useMemo)(() => {
+    const displaySets = getDisplaySets(viewportData, displaySetService);
+    if (!displaySets) {
+      return null;
+    }
+    const [displaySet] = displaySets;
+    const {
+      instances,
+      instance: referenceInstance
+    } = displaySet;
+    return {
+      displaySets,
+      displaySet,
+      instance: instances[imageIndex],
+      instances,
+      referenceInstance
+    };
+  }, [viewportData, viewportId, instanceNumber, 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 scale = viewport.getZoom();
+        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, props) => {
+    const overlayItemProps = {
+      ...props,
+      element,
+      viewportData,
+      imageSliceData,
+      viewportId,
+      servicesManager,
+      customization: item,
+      formatters: {
+        formatPN: formatPN,
+        formatDate: formatDICOMDate,
+        formatTime: formatDICOMTime,
+        formatNumberPrecision: formatNumberPrecision
+      }
+    };
+    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.contentF === 'function') {
+        return renderItem.contentF(overlayItemProps);
+      }
+    }
+  }, [element, viewportData, imageSliceData, viewportId, servicesManager, customizationService, displaySetProps, voi, scale, instanceNumber]);
+  const getContent = (0,react.useCallback)((customization, keyPrefix) => {
+    if (!customization?.items) {
+      return null;
+    }
+    const {
+      items
+    } = customization;
+    const props = {
+      ...displaySetProps,
+      formatters: {
+        formatDate: formatDICOMDate
+      },
+      voi,
+      scale,
+      instanceNumber,
+      viewportId,
+      toolGroupService
+    };
+    return /*#__PURE__*/react.createElement(react.Fragment, null, items.map((item, index) => /*#__PURE__*/react.createElement("div", {
+      key: `${keyPrefix}_${index}`
+    }, (!item?.condition || item.condition(props)) && _renderOverlayItem(item, props) || null)));
+  }, [_renderOverlayItem]);
+  return /*#__PURE__*/react.createElement(src/* ViewportOverlay */.No, {
+    topLeft: getContent(topLeftCustomization, 'topLeftOverlayItem'),
+    topRight: getContent(topRightCustomization, 'topRightOverlayItem'),
+    bottomLeft: getContent(bottomLeftCustomization, 'bottomLeftOverlayItem'),
+    bottomRight: getContent(bottomRightCustomization, 'bottomRightOverlayItem')
+  });
+}
+
+/**
+ * Gets an array of display sets for the given viewport, based on the viewport data.
+ * Returns null if none found.
+ */
+function getDisplaySets(viewportData, displaySetService) {
+  if (!viewportData?.data?.length) {
+    return null;
+  }
+  const displaySets = viewportData.data.map(datum => displaySetService.getDisplaySetByUID(datum.displaySetInstanceUID)).filter(it => !!it);
+  if (!displaySets.length) {
+    return null;
+  }
+  return displaySets;
+}
+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[0].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 = esm/* vec3.cross */.R3.cross(esm/* vec3.create */.R3.create(), viewPlaneNormal, scanAxisNormal);
+  const isAcquisitionPlane = esm/* vec3.length */.R3.length(cross) < EPSILON;
+  if (isAcquisitionPlane) {
+    const imageId = imageIds[imageIndex];
+    if (!imageId) {
+      return {};
+    }
+    const {
+      instanceNumber
+    } = dist_esm.metaData.get('generalImageModule', imageId) || {};
+    return parseInt(instanceNumber);
+  }
+}
+function OverlayItem(props) {
+  const {
+    instance,
+    customization = {}
+  } = props;
+  const {
+    color,
+    attribute,
+    title,
+    label,
+    background
+  } = customization;
+  const value = customization.contentF?.(props, customization) ?? instance?.[attribute];
+  if (value === undefined || value === null) {
+    return null;
+  }
+  return /*#__PURE__*/react.createElement("div", {
+    className: "overlay-item flex flex-row",
+    style: {
+      color,
+      background
+    },
+    title: title
+  }, label ? /*#__PURE__*/react.createElement("span", {
+    className: "mr-1 shrink-0"
+  }, label) : null, /*#__PURE__*/react.createElement("span", {
+    className: "ml-1 mr-2 shrink-0"
+  }, value));
+}
+
+/**
+ * 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?.color
+    }
+  }, /*#__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);
+
+
+/***/ }),
+
+/***/ 71645:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   It: () => (/* binding */ ViewportActionCornersProvider),
-/* harmony export */   R4: () => (/* binding */ useViewportActionCornersContext)
+/* harmony export */   HC: () => (/* binding */ useViewportActionCornersContext),
+/* harmony export */   cJ: () => (/* binding */ ViewportActionCornersProvider)
 /* harmony export */ });
 /* unused harmony export ViewportActionCornersContext */
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(41766);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11374);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(43001);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3827);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _ohif_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(79047);
-/* harmony import */ var _services_ViewportActionCornersService_ViewportActionCornersService__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2447);
+/* harmony import */ var _ohif_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(38604);
+/* harmony import */ var _services_ViewportActionCornersService_ViewportActionCornersService__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(13580);
 
 
 
@@ -21,10 +603,10 @@
 const DEFAULT_STATE = {
   // default here is the viewportId of the default viewport
   default: {
-    [_ohif_ui__WEBPACK_IMPORTED_MODULE_2__/* .ViewportActionCornersLocations */ .ld.topLeft]: [],
-    [_ohif_ui__WEBPACK_IMPORTED_MODULE_2__/* .ViewportActionCornersLocations */ .ld.topRight]: [],
-    [_ohif_ui__WEBPACK_IMPORTED_MODULE_2__/* .ViewportActionCornersLocations */ .ld.bottomLeft]: [],
-    [_ohif_ui__WEBPACK_IMPORTED_MODULE_2__/* .ViewportActionCornersLocations */ .ld.bottomRight]: []
+    [_ohif_ui__WEBPACK_IMPORTED_MODULE_2__/* .ViewportActionCornersLocations */ .Hv.topLeft]: [],
+    [_ohif_ui__WEBPACK_IMPORTED_MODULE_2__/* .ViewportActionCornersLocations */ .Hv.topRight]: [],
+    [_ohif_ui__WEBPACK_IMPORTED_MODULE_2__/* .ViewportActionCornersLocations */ .Hv.bottomLeft]: [],
+    [_ohif_ui__WEBPACK_IMPORTED_MODULE_2__/* .ViewportActionCornersLocations */ .Hv.bottomRight]: []
   }
   // [anotherViewportId]: { ..... }
 };
@@ -135,13 +717,13 @@ function ViewportActionCornersProvider({
 }
 ViewportActionCornersProvider.propTypes = {
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
-  service: prop_types__WEBPACK_IMPORTED_MODULE_1___default().instanceOf(_services_ViewportActionCornersService_ViewportActionCornersService__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .A).isRequired
+  service: prop_types__WEBPACK_IMPORTED_MODULE_1___default().instanceOf(_services_ViewportActionCornersService_ViewportActionCornersService__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z).isRequired
 };
 const useViewportActionCornersContext = () => (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(ViewportActionCornersContext);
 
 /***/ }),
 
-/***/ 11363:
+/***/ 21217:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -154,10 +736,10 @@ __webpack_require__.d(__webpack_exports__, {
   "default": () => (/* binding */ cornerstone_src),
   findNearbyToolData: () => (/* reexport */ findNearbyToolData),
   getActiveViewportEnabledElement: () => (/* reexport */ getActiveViewportEnabledElement),
-  getEnabledElement: () => (/* reexport */ state/* getEnabledElement */.kJ),
-  getSOPInstanceAttributes: () => (/* reexport */ getSOPInstanceAttributes/* default */.A),
+  getEnabledElement: () => (/* reexport */ state/* getEnabledElement */.K8),
+  getSOPInstanceAttributes: () => (/* reexport */ getSOPInstanceAttributes/* default */.Z),
   measurementMappingUtils: () => (/* reexport */ utils_namespaceObject),
-  setEnabledElement: () => (/* reexport */ state/* setEnabledElement */.ye),
+  setEnabledElement: () => (/* reexport */ state/* setEnabledElement */.Yc),
   toolNames: () => (/* reexport */ toolNames)
 });
 
@@ -168,7 +750,7 @@ __webpack_require__.d(utils_namespaceObject, {
   getDisplayUnit: () => (utils_getDisplayUnit),
   getFirstAnnotationSelected: () => (getFirstAnnotationSelected),
   getHandlesFromPoints: () => (getHandlesFromPoints),
-  getSOPInstanceAttributes: () => (getSOPInstanceAttributes/* default */.A),
+  getSOPInstanceAttributes: () => (getSOPInstanceAttributes/* default */.Z),
   isAnnotationSelected: () => (isAnnotationSelected),
   setAnnotationSelected: () => (setAnnotationSelected)
 });
@@ -178,20 +760,20 @@ var types_namespaceObject = {};
 __webpack_require__.r(types_namespaceObject);
 
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
-var react = __webpack_require__(41766);
+var react = __webpack_require__(43001);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 28 modules
-var esm = __webpack_require__(92136);
+var esm = __webpack_require__(62709);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js
-var dist_esm = __webpack_require__(39371);
+var dist_esm = __webpack_require__(93725);
 // 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);
+var streaming_image_volume_loader_dist_esm = __webpack_require__(15793);
 // EXTERNAL MODULE: ../../core/src/index.ts + 72 modules
-var src = __webpack_require__(75186);
+var src = __webpack_require__(63810);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/dicom-image-loader/dist/dynamic-import/cornerstoneDICOMImageLoader.min.js
-var cornerstoneDICOMImageLoader_min = __webpack_require__(54578);
+var cornerstoneDICOMImageLoader_min = __webpack_require__(61539);
 var cornerstoneDICOMImageLoader_min_default = /*#__PURE__*/__webpack_require__.n(cornerstoneDICOMImageLoader_min);
 // EXTERNAL MODULE: ../../../node_modules/dicom-parser/dist/dicomParser.min.js
-var dicomParser_min = __webpack_require__(45561);
+var dicomParser_min = __webpack_require__(56660);
 var dicomParser_min_default = /*#__PURE__*/__webpack_require__.n(dicomParser_min);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/initWADOImageLoader.js
 
@@ -224,8 +806,8 @@ function initWebWorkers(appConfig) {
 function initWADOImageLoader(userAuthenticationService, appConfig, extensionManager) {
   (cornerstoneDICOMImageLoader_min_default()).external.cornerstone = esm;
   (cornerstoneDICOMImageLoader_min_default()).external.dicomParser = (dicomParser_min_default());
-  registerVolumeLoader('cornerstoneStreamingImageVolume', streaming_image_volume_loader_dist_esm/* cornerstoneStreamingImageVolumeLoader */.FC);
-  registerVolumeLoader('cornerstoneStreamingDynamicImageVolume', streaming_image_volume_loader_dist_esm/* cornerstoneStreamingDynamicImageVolumeLoader */.Mr);
+  registerVolumeLoader('cornerstoneStreamingImageVolume', streaming_image_volume_loader_dist_esm/* cornerstoneStreamingImageVolumeLoader */.IU);
+  registerVolumeLoader('cornerstoneStreamingDynamicImageVolume', streaming_image_volume_loader_dist_esm/* cornerstoneStreamingDynamicImageVolumeLoader */.X5);
   cornerstoneDICOMImageLoader_min_default().configure({
     decodeConfig: {
       // !! IMPORTANT !!
@@ -250,7 +832,7 @@ function initWADOImageLoader(userAuthenticationService, appConfig, extensionMana
       return xhrRequestHeaders;
     },
     errorInterceptor: error => {
-      src/* errorHandler */.r_.getHTTPErrorHandler(error);
+      src/* errorHandler */.Po.getHTTPErrorHandler(error);
     }
   });
   initWebWorkers(appConfig);
@@ -264,8 +846,8 @@ function destroy() {
   }
   webWorkers.length = 0;
 }
-// EXTERNAL MODULE: ../../ui/src/index.js + 782 modules
-var ui_src = __webpack_require__(79047);
+// EXTERNAL MODULE: ../../ui/src/index.js + 784 modules
+var ui_src = __webpack_require__(38604);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/callInputDialog.tsx
 
 
@@ -316,7 +898,7 @@ function callInputDialog(uiDialogService, data, callback, isArrowAnnotateInputDi
       centralize: true,
       isDraggable: false,
       showOverlay: true,
-      content: ui_src/* Dialog */.lG,
+      content: ui_src/* Dialog */.Vq,
       contentProps: {
         title: dialogTitle,
         value: {
@@ -329,18 +911,18 @@ function callInputDialog(uiDialogService, data, callback, isArrowAnnotateInputDi
         actions: [{
           id: 'cancel',
           text: 'Cancel',
-          type: ui_src/* ButtonEnums.type */.Ny.NW.secondary
+          type: ui_src/* ButtonEnums.type */.LZ.dt.secondary
         }, {
           id: 'save',
           text: 'Save',
-          type: ui_src/* ButtonEnums.type */.Ny.NW.primary
+          type: ui_src/* ButtonEnums.type */.LZ.dt.primary
         }],
         onSubmit: onSubmitHandler,
         body: ({
           value,
           setValue
         }) => {
-          return /*#__PURE__*/react.createElement(ui_src/* Input */.pd, {
+          return /*#__PURE__*/react.createElement(ui_src/* Input */.II, {
             autoFocus: true,
             className: "border-primary-main bg-black",
             type: "text",
@@ -395,7 +977,7 @@ function callLabelAutocompleteDialog(uiDialogService, callback, dialogConfig, la
     centralize: true,
     isDraggable: false,
     showOverlay: true,
-    content: ui_src/* LabellingFlow */.nd,
+    content: ui_src/* LabellingFlow */.CV,
     contentProps: {
       labellingDoneCallback: labellingDoneCallback,
       measurementData: {
@@ -424,7 +1006,7 @@ function showLabelAnnotationPopup(measurement, uiDialogService, labelConfig) {
       id: 'select-annotation',
       isDraggable: false,
       showOverlay: true,
-      content: ui_src/* LabellingFlow */.nd,
+      content: ui_src/* LabellingFlow */.CV,
       defaultPosition: {
         x: window.innerWidth / 2,
         y: window.innerHeight / 2
@@ -441,7 +1023,7 @@ function showLabelAnnotationPopup(measurement, uiDialogService, labelConfig) {
 }
 /* harmony default export */ const utils_callInputDialog = (callInputDialog);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/state.ts
-var state = __webpack_require__(83910);
+var state = __webpack_require__(13000);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/getActiveViewportEnabledElement.ts
 
 
@@ -451,7 +1033,7 @@ function getActiveViewportEnabledElement(viewportGridService) {
   } = viewportGridService.getState();
   const {
     element
-  } = (0,state/* getEnabledElement */.kJ)(activeViewportId) || {};
+  } = (0,state/* getEnabledElement */.K8)(activeViewportId) || {};
   const enabledElement = (0,esm.getEnabledElement)(element);
   return enabledElement;
 }
@@ -561,8 +1143,8 @@ function onCompletedCalibrationLine(servicesManager, csToolsEvent) {
     });
   });
 }
-// EXTERNAL MODULE: ../../core/src/utils/index.js + 26 modules
-var utils = __webpack_require__(86890);
+// EXTERNAL MODULE: ../../core/src/utils/index.ts + 27 modules
+var utils = __webpack_require__(21551);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/tools/OverlayPlaneModuleProvider.ts
 
 const _cachedOverlayMetadata = new Map();
@@ -736,7 +1318,7 @@ class ImageOverlayViewerTool extends dist_esm.AnnotationDisplayTool {
       } else if (overlay.pixelData.retrieveBulkData) {
         pixelData = await overlay.pixelData.retrieveBulkData();
       } else if (overlay.pixelData.InlineBinary) {
-        const blob = (0,utils/* b64toBlob */.Vk)(overlay.pixelData.InlineBinary);
+        const blob = (0,utils/* b64toBlob */.Mi)(overlay.pixelData.InlineBinary);
         const arrayBuffer = await blob.arrayBuffer();
         pixelData = arrayBuffer;
       }
@@ -749,7 +1331,7 @@ class ImageOverlayViewerTool extends dist_esm.AnnotationDisplayTool {
       }, overlay.color || color, pixelData);
       return {
         ...overlay,
-        _id: (0,utils/* guid */.Os)(),
+        _id: (0,utils/* guid */.M8)(),
         dataUrl,
         // this will be a data url expression of the rendered image
         color
@@ -925,7 +1507,7 @@ const toolNames = {
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/constants/supportedTools.js
 /* harmony default export */ const supportedTools = (['Length', 'EllipticalROI', 'CircleROI', 'Bidirectional', 'ArrowAnnotate', 'Angle', 'CobbAngle', 'Probe', 'RectangleROI', 'PlanarFreehandROI', 'SplineROI', 'LivewireContour', 'Probe', 'UltrasoundDirectionalTool']);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/utils/getSOPInstanceAttributes.js
-var getSOPInstanceAttributes = __webpack_require__(20928);
+var getSOPInstanceAttributes = __webpack_require__(90927);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/Length.ts
 
 
@@ -965,7 +1547,7 @@ const Length = {
       SOPInstanceUID,
       SeriesInstanceUID,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, displaySetService, annotation);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, displaySetService, annotation);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -1022,7 +1604,7 @@ function getMappedAnnotations(annotation, displaySetService) {
       SOPInstanceUID,
       SeriesInstanceUID,
       frameNumber
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, displaySetService, annotation);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, displaySetService, annotation);
     const displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID)[0];
     const {
       SeriesNumber
@@ -1202,7 +1784,7 @@ const Bidirectional = {
       SOPInstanceUID,
       SeriesInstanceUID,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, displaySetService, annotation);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, displaySetService, annotation);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -1260,7 +1842,7 @@ function Bidirectional_getMappedAnnotations(annotation, displaySetService) {
       SOPInstanceUID,
       SeriesInstanceUID,
       frameNumber
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, displaySetService, annotation);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, displaySetService, annotation);
     const displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID)[0];
     const {
       SeriesNumber
@@ -1395,7 +1977,7 @@ const EllipticalROI = {
       SOPInstanceUID,
       SeriesInstanceUID,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, displaySetService, annotation);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, displaySetService, annotation);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -1452,7 +2034,7 @@ function EllipticalROI_getMappedAnnotations(annotation, displaySetService) {
       SOPInstanceUID,
       SeriesInstanceUID,
       frameNumber
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, displaySetService, annotation);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, displaySetService, annotation);
     const displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID)[0];
     const {
       SeriesNumber
@@ -1600,7 +2182,7 @@ const CircleROI = {
       SOPInstanceUID,
       SeriesInstanceUID,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, displaySetService, annotation);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, displaySetService, annotation);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -1657,7 +2239,7 @@ function CircleROI_getMappedAnnotations(annotation, displaySetService) {
       SOPInstanceUID,
       SeriesInstanceUID,
       frameNumber
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, displaySetService, annotation);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, displaySetService, annotation);
     const displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID)[0];
     const {
       SeriesNumber
@@ -1810,7 +2392,7 @@ const ArrowAnnotate_Length = {
       SOPInstanceUID,
       SeriesInstanceUID,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, displaySetService, annotation);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, displaySetService, annotation);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -1862,7 +2444,7 @@ function ArrowAnnotate_getMappedAnnotations(annotation, displaySetService) {
     SOPInstanceUID,
     SeriesInstanceUID,
     frameNumber
-  } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, displaySetService, annotation);
+  } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, displaySetService, annotation);
   const displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID)[0];
   const {
     SeriesNumber
@@ -1939,7 +2521,7 @@ const CobbAngle = {
       SOPInstanceUID,
       SeriesInstanceUID,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, displaySetService, annotation);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, displaySetService, annotation);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -1996,7 +2578,7 @@ function CobbAngle_getMappedAnnotations(annotation, displaySetService) {
       SOPInstanceUID,
       SeriesInstanceUID,
       frameNumber
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, displaySetService, annotation);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, displaySetService, annotation);
     const displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID)[0];
     const {
       SeriesNumber
@@ -2122,7 +2704,7 @@ const Angle = {
       SOPInstanceUID,
       SeriesInstanceUID,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, displaySetService, annotation);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, displaySetService, annotation);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -2179,7 +2761,7 @@ function Angle_getMappedAnnotations(annotation, displaySetService) {
       SOPInstanceUID,
       SeriesInstanceUID,
       frameNumber
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, displaySetService, annotation);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, displaySetService, annotation);
     const displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID)[0];
     const {
       SeriesNumber
@@ -2311,7 +2893,7 @@ const PlanarFreehandROI = {
       SeriesInstanceUID,
       frameNumber,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, displaySetService, annotation);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, displaySetService, annotation);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -2414,7 +2996,7 @@ function PlanarFreehandROI_getDisplayText(annotation, displaySet, customizationS
   const {
     SOPInstanceUID,
     frameNumber
-  } = (0,getSOPInstanceAttributes/* default */.A)(metadata.referencedImageId, displaySetService, annotation);
+  } = (0,getSOPInstanceAttributes/* default */.Z)(metadata.referencedImageId, displaySetService, annotation);
   const displayTextArray = [];
   const instance = displaySet.images.find(image => image.SOPInstanceUID === SOPInstanceUID);
   let InstanceNumber;
@@ -2498,7 +3080,7 @@ const RectangleROI = {
       SOPInstanceUID,
       SeriesInstanceUID,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, displaySetService, annotation);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, displaySetService, annotation);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -2555,7 +3137,7 @@ function RectangleROI_getMappedAnnotations(annotation, displaySetService) {
       SOPInstanceUID,
       SeriesInstanceUID,
       frameNumber
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, displaySetService, annotation);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, displaySetService, annotation);
     const displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID)[0];
     const {
       SeriesNumber
@@ -2717,7 +3299,7 @@ const SplineROI = {
       SeriesInstanceUID,
       frameNumber,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -2827,7 +3409,7 @@ function SplineROI_getDisplayText(annotation, displaySet, customizationService)
   const {
     SOPInstanceUID,
     frameNumber
-  } = (0,getSOPInstanceAttributes/* default */.A)(metadata.referencedImageId);
+  } = (0,getSOPInstanceAttributes/* default */.Z)(metadata.referencedImageId);
   const displayTextArray = [];
   const instance = displaySet.images.find(image => image.SOPInstanceUID === SOPInstanceUID);
   let InstanceNumber;
@@ -2920,7 +3502,7 @@ const LivewireContour = {
       SeriesInstanceUID,
       frameNumber,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -3014,7 +3596,7 @@ function LivewireContour_getDisplayText(annotation, displaySet, customizationSer
   const {
     SOPInstanceUID,
     frameNumber
-  } = (0,getSOPInstanceAttributes/* default */.A)(metadata.referencedImageId);
+  } = (0,getSOPInstanceAttributes/* default */.Z)(metadata.referencedImageId);
   const displayText = [];
   const instance = displaySet.images.find(image => image.SOPInstanceUID === SOPInstanceUID);
   let InstanceNumber;
@@ -3080,7 +3662,7 @@ const Probe = {
       SOPInstanceUID,
       SeriesInstanceUID,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, displaySetService, annotation);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, displaySetService, annotation);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -3135,7 +3717,7 @@ function Probe_getMappedAnnotations(annotation, displaySetService) {
       SOPInstanceUID,
       SeriesInstanceUID,
       frameNumber
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, displaySetService, annotation);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, displaySetService, annotation);
     const displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID)[0];
     const {
       SeriesNumber
@@ -3255,7 +3837,7 @@ const UltrasoundDirectional = {
       SOPInstanceUID,
       SeriesInstanceUID,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -3312,7 +3894,7 @@ function UltrasoundDirectional_getMappedAnnotations(annotation, DisplaySetServic
       SOPInstanceUID,
       SeriesInstanceUID,
       frameNumber
-    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId);
+    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId);
     const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID, frameNumber);
     const {
       SeriesNumber
@@ -3854,7 +4436,7 @@ const connectMeasurementServiceToTools = (measurementService, cornerstoneViewpor
     let frameNumber = 1;
     if (measurement?.metadata?.referencedImageId) {
       imageId = measurement.metadata.referencedImageId;
-      frameNumber = (0,getSOPInstanceAttributes/* default */.A)(measurement.metadata.referencedImageId).frameNumber;
+      frameNumber = (0,getSOPInstanceAttributes/* default */.Z)(measurement.metadata.referencedImageId).frameNumber;
     } else {
       imageId = dataSource.getImageIdsForInstance({
         instance
@@ -4031,7 +4613,7 @@ function getInterleavedFrames(imageIds) {
   return imageIdsToPrefetch;
 }
 // EXTERNAL MODULE: ../../../node_modules/lodash/lodash.js
-var lodash = __webpack_require__(5517);
+var lodash = __webpack_require__(44379);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/interleaveCenterLoader.ts
 
 
@@ -4607,7 +5189,7 @@ function initContextMenu({
       return;
     }
     // TODO check update upstream
-    (0,state/* setEnabledElement */.ye)(viewportId, element);
+    (0,state/* setEnabledElement */.Yc)(viewportId, element);
     element.addEventListener(cs3DToolsEvents.MOUSE_CLICK, cornerstoneViewportHandleClick);
   }
   function elementDisabledHandler(evt) {
@@ -4717,7 +5299,7 @@ function initViewTiming({
     } = src.Enums;
     IMAGE_TIMING_KEYS.push(TimingEnum.DISPLAY_SETS_TO_ALL_IMAGES, TimingEnum.DISPLAY_SETS_TO_FIRST_IMAGE, TimingEnum.STUDY_TO_FIRST_IMAGE);
   }
-  if (!IMAGE_TIMING_KEYS.find(key => src/* log */.Rm.timingKeys[key])) {
+  if (!IMAGE_TIMING_KEYS.find(key => src/* log */.cM.timingKeys[key])) {
     return;
   }
   imageTiming.viewportsWaiting += 1;
@@ -4730,13 +5312,13 @@ function imageRenderedListener(evt) {
   const {
     TimingEnum
   } = src.Enums;
-  src/* log */.Rm.timeEnd(TimingEnum.DISPLAY_SETS_TO_FIRST_IMAGE);
-  src/* log */.Rm.timeEnd(TimingEnum.STUDY_TO_FIRST_IMAGE);
-  src/* log */.Rm.timeEnd(TimingEnum.SCRIPT_TO_VIEW);
+  src/* log */.cM.timeEnd(TimingEnum.DISPLAY_SETS_TO_FIRST_IMAGE);
+  src/* log */.cM.timeEnd(TimingEnum.STUDY_TO_FIRST_IMAGE);
+  src/* log */.cM.timeEnd(TimingEnum.SCRIPT_TO_VIEW);
   imageTiming.viewportsWaiting -= 1;
   evt.detail.element.removeEventListener(esm.EVENTS.IMAGE_RENDERED, imageRenderedListener);
   if (!imageTiming.viewportsWaiting) {
-    src/* log */.Rm.timeEnd(TimingEnum.DISPLAY_SETS_TO_ALL_IMAGES);
+    src/* log */.cM.timeEnd(TimingEnum.DISPLAY_SETS_TO_ALL_IMAGES);
   }
 }
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/colormaps.js
@@ -4945,9 +5527,9 @@ async function init({
   dist_esm.segmentation.config.setGlobalRepresentationConfig(contourRepresentation, {
     renderFill: false
   });
-  const metadataProvider = src/* default.classes */.Ay.classes.MetadataProvider;
-  esm.volumeLoader.registerVolumeLoader('cornerstoneStreamingImageVolume', streaming_image_volume_loader_dist_esm/* cornerstoneStreamingImageVolumeLoader */.FC);
-  esm.volumeLoader.registerVolumeLoader('cornerstoneStreamingDynamicImageVolume', streaming_image_volume_loader_dist_esm/* cornerstoneStreamingDynamicImageVolumeLoader */.Mr);
+  const metadataProvider = src["default"].classes.MetadataProvider;
+  esm.volumeLoader.registerVolumeLoader('cornerstoneStreamingImageVolume', streaming_image_volume_loader_dist_esm/* cornerstoneStreamingImageVolumeLoader */.IU);
+  esm.volumeLoader.registerVolumeLoader('cornerstoneStreamingDynamicImageVolume', streaming_image_volume_loader_dist_esm/* cornerstoneStreamingDynamicImageVolumeLoader */.X5);
   hangingProtocolService.registerImageLoadStrategy('interleaveCenter', interleaveCenterLoader);
   hangingProtocolService.registerImageLoadStrategy('interleaveTopToBottom', interleaveTopToBottom);
   hangingProtocolService.registerImageLoadStrategy('nth', interleaveNthLoader);
@@ -5013,7 +5595,7 @@ async function init({
   const imageLoadFailedHandler = ({
     detail
   }) => {
-    const handler = src/* errorHandler */.r_.getHTTPErrorHandler();
+    const handler = src/* errorHandler */.Po.getHTTPErrorHandler();
     handler(detail.error);
   };
   esm.eventTarget.addEventListener(esm.EVENTS.STACK_VIEWPORT_NEW_STACK, evt => {
@@ -5101,12 +5683,12 @@ function _showCPURenderingModal(uiModalService, hangingProtocolService) {
   });
 }
 // EXTERNAL MODULE: ../../../node_modules/react-dropzone/dist/es/index.js + 4 modules
-var es = __webpack_require__(92854);
+var es = __webpack_require__(15280);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
-var prop_types = __webpack_require__(11374);
+var prop_types = __webpack_require__(3827);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
 // EXTERNAL MODULE: ../../../node_modules/classnames/index.js
-var classnames = __webpack_require__(61466);
+var classnames = __webpack_require__(33901);
 var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/DicomFileUploader.ts
 
@@ -5130,7 +5712,7 @@ class UploadRejection {
     this.status = status;
   }
 }
-class DicomFileUploader extends src/* PubSubService */.Rc {
+class DicomFileUploader extends src/* PubSubService */.hC {
   constructor(file, dataSource) {
     super(EVENTS);
     this._file = void 0;
@@ -5294,20 +5876,20 @@ const DicomUploadProgressItem = /*#__PURE__*/(0,react.memo)(({
   const getStatusIcon = () => {
     switch (dicomFileUploader.getStatus()) {
       case UploadStatus.Success:
-        return /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
+        return /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
           name: "status-tracked",
           className: "text-primary-light"
         });
       case UploadStatus.InProgress:
-        return /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
+        return /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
           name: "icon-transferring"
         });
       case UploadStatus.Failed:
-        return /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
+        return /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
           name: "icon-alert-small"
         });
       case UploadStatus.Cancelled:
-        return /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
+        return /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
           name: "icon-alert-outline"
         });
       default:
@@ -5332,7 +5914,7 @@ const DicomUploadProgressItem = /*#__PURE__*/(0,react.memo)(({
     className: "w-10 text-right"
   }, percentComplete, "%"), /*#__PURE__*/react.createElement("div", {
     className: "ml-auto flex cursor-pointer"
-  }, /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
+  }, /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
     className: "text-primary-active self-center",
     name: "close",
     onClick: cancelUpload
@@ -5562,7 +6144,7 @@ function DicomUploadProgress({
       className: "bg-primary-dark flex h-14 items-center px-1 pb-4 text-lg"
     }, numFilesCompleted === dicomFileUploaderArr.length ? /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("span", {
       className: NO_WRAP_ELLIPSIS_CLASS_NAMES
-    }, `${dicomFileUploaderArr.length} ${dicomFileUploaderArr.length > 1 ? 'files' : 'file'} completed.`), /*#__PURE__*/react.createElement(ui_src/* Button */.$n, {
+    }, `${dicomFileUploaderArr.length} ${dicomFileUploaderArr.length > 1 ? 'files' : 'file'} completed.`), /*#__PURE__*/react.createElement(ui_src/* Button */.zx, {
       disabled: false,
       className: "ml-auto",
       onClick: onComplete
@@ -5583,7 +6165,7 @@ function DicomUploadProgress({
       className: "ml-auto flex w-6 justify-center"
     }, numFails > 0 && /*#__PURE__*/react.createElement("div", {
       onClick: () => setShowFailedOnly(currentShowFailedOnly => !currentShowFailedOnly)
-    }, /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
+    }, /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
       className: "cursor-pointer",
       name: "icon-status-alert"
     })));
@@ -5598,7 +6180,7 @@ function DicomUploadProgress({
     }, numFails > 0 ? `Completed with ${numFails} ${numFails > 1 ? 'errors' : 'error'}!` : 'Completed!'), getShowFailedOnlyIconComponent()) : /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
       ref: progressBarContainerRef,
       className: "flex-grow"
-    }, /*#__PURE__*/react.createElement(ui_src/* ProgressLoadingBar */.dD, {
+    }, /*#__PURE__*/react.createElement(ui_src/* ProgressLoadingBar */.YE, {
       progress: showInfiniteProgressBar() ? undefined : Math.min(100, percentComplete)
     })), /*#__PURE__*/react.createElement("div", {
       className: "ml-1 flex w-24 items-center"
@@ -5626,7 +6208,7 @@ DicomUploadProgress.propTypes = {
 // extracted by mini-css-extract-plugin
 
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/DicomUpload/DicomUpload.tsx
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 
 
 
@@ -5647,7 +6229,7 @@ function DicomUpload({
     setDicomFileUploaderArr(acceptedFiles.map(file => new DicomFileUploader(file, dataSource)));
   }, []);
   const getDropZoneComponent = () => {
-    return /*#__PURE__*/react.createElement(es/* default */.A, {
+    return /*#__PURE__*/react.createElement(es/* default */.Z, {
       onDrop: acceptedFiles => {
         onDrop(acceptedFiles);
       },
@@ -5658,23 +6240,23 @@ function DicomUpload({
       className: "dicom-upload-drop-area-border-dash m-5 flex h-full flex-col items-center justify-center"
     }), /*#__PURE__*/react.createElement("div", {
       className: "flex gap-3"
-    }, /*#__PURE__*/react.createElement(es/* default */.A, {
+    }, /*#__PURE__*/react.createElement(es/* default */.Z, {
       onDrop: onDrop,
       noDrag: true
     }, ({
       getRootProps,
       getInputProps
-    }) => /*#__PURE__*/react.createElement("div", getRootProps(), /*#__PURE__*/react.createElement(ui_src/* Button */.$n, {
+    }) => /*#__PURE__*/react.createElement("div", getRootProps(), /*#__PURE__*/react.createElement(ui_src/* Button */.zx, {
       disabled: false,
       onClick: () => {}
-    }, 'Add files', /*#__PURE__*/react.createElement("input", getInputProps())))), /*#__PURE__*/react.createElement(es/* default */.A, {
+    }, 'Add files', /*#__PURE__*/react.createElement("input", getInputProps())))), /*#__PURE__*/react.createElement(es/* default */.Z, {
       onDrop: onDrop,
       noDrag: true
     }, ({
       getRootProps,
       getInputProps
-    }) => /*#__PURE__*/react.createElement("div", getRootProps(), /*#__PURE__*/react.createElement(ui_src/* Button */.$n, {
-      type: ui_src/* ButtonEnums.type */.Ny.NW.secondary,
+    }) => /*#__PURE__*/react.createElement("div", getRootProps(), /*#__PURE__*/react.createElement(ui_src/* Button */.zx, {
+      type: ui_src/* ButtonEnums.type */.LZ.dt.secondary,
       disabled: false,
       onClick: () => {}
     }, 'Add folder', /*#__PURE__*/react.createElement("input", _extends({}, getInputProps(), {
@@ -5757,6 +6339,8 @@ const defaultWindowLevelPresets = {
   }]
 };
 /* harmony default export */ const WindowLevelActionMenu_defaultWindowLevelPresets = (defaultWindowLevelPresets);
+// EXTERNAL MODULE: ../../../extensions/cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.tsx + 2 modules
+var CustomizableViewportOverlay = __webpack_require__(34);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/getCustomizationModule.ts
 
 
@@ -5764,6 +6348,7 @@ const defaultWindowLevelPresets = {
 
 
 
+
 const DefaultColormap = 'Grayscale';
 const {
   VIEWPORT_PRESETS
@@ -5806,7 +6391,7 @@ function getCustomizationModule() {
     }
   }, {
     name: 'default',
-    value: [{
+    value: [CustomizableViewportOverlay/* CornerstoneOverlay */.Uu, {
       id: 'cornerstone.overlayViewportTools',
       tools
     }, {
@@ -5944,9 +6529,9 @@ function getCustomizationModule() {
 }
 /* harmony default export */ const src_getCustomizationModule = (getCustomizationModule);
 // EXTERNAL MODULE: ../../../node_modules/gl-matrix/esm/index.js + 1 modules
-var gl_matrix_esm = __webpack_require__(44753);
+var gl_matrix_esm = __webpack_require__(72076);
 // EXTERNAL MODULE: ../../../node_modules/html2canvas/dist/html2canvas.esm.js
-var html2canvas_esm = __webpack_require__(90445);
+var html2canvas_esm = __webpack_require__(76010);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/CornerstoneViewportDownloadForm.tsx
 
 
@@ -5964,7 +6549,7 @@ const CornerstoneViewportDownloadForm = ({
   activeViewportId: activeViewportIdProp,
   cornerstoneViewportService
 }) => {
-  const enabledElement = (0,state/* getEnabledElement */.kJ)(activeViewportIdProp);
+  const enabledElement = (0,state/* getEnabledElement */.K8)(activeViewportIdProp);
   const activeViewportElement = enabledElement?.element;
   const activeViewportEnabledElement = (0,esm.getEnabledElement)(activeViewportElement);
   const {
@@ -6156,14 +6741,14 @@ const CornerstoneViewportDownloadForm = ({
   const downloadBlob = (filename, fileType) => {
     const file = `${filename}.${fileType}`;
     const divForDownloadViewport = document.querySelector(`div[data-viewport-uid="${VIEWPORT_ID}"]`);
-    (0,html2canvas_esm/* default */.A)(divForDownloadViewport).then(canvas => {
+    (0,html2canvas_esm/* default */.Z)(divForDownloadViewport).then(canvas => {
       const link = document.createElement('a');
       link.download = file;
       link.href = canvas.toDataURL(fileType, 1.0);
       link.click();
     });
   };
-  return /*#__PURE__*/react.createElement(ui_src/* ViewportDownloadForm */.VS, {
+  return /*#__PURE__*/react.createElement(ui_src/* ViewportDownloadForm */.mQ, {
     onClose: onClose,
     minimumSize: MINIMUM_SIZE,
     maximumSize: MAX_TEXTURE_SIZE,
@@ -6810,9 +7395,9 @@ function commandsModule({
       if (viewport instanceof esm.BaseVolumeViewport) {
         const camera = viewport.getCamera();
         const rotAngle = rotation * Math.PI / 180;
-        const rotMat = gl_matrix_esm/* mat4.identity */.pB.identity(new Float32Array(16));
-        gl_matrix_esm/* mat4.rotate */.pB.rotate(rotMat, rotMat, rotAngle, camera.viewPlaneNormal);
-        const rotatedViewUp = gl_matrix_esm/* vec3.transformMat4 */.eR.transformMat4(gl_matrix_esm/* vec3.create */.eR.create(), camera.viewUp, rotMat);
+        const rotMat = gl_matrix_esm/* mat4.identity */._E.identity(new Float32Array(16));
+        gl_matrix_esm/* mat4.rotate */._E.rotate(rotMat, rotMat, rotAngle, camera.viewPlaneNormal);
+        const rotatedViewUp = gl_matrix_esm/* vec3.transformMat4 */.R3.transformMat4(gl_matrix_esm/* vec3.create */.R3.create(), camera.viewUp, rotMat);
         viewport.setCamera({
           viewUp: rotatedViewUp
         });
@@ -7161,7 +7746,7 @@ function commandsModule({
       const image = mapper.getInputData();
       const dims = image.getDimensions();
       const spacing = image.getSpacing();
-      const spatialDiagonal = gl_matrix_esm/* vec3.length */.eR.length(gl_matrix_esm/* vec3.fromValues */.eR.fromValues(dims[0] * spacing[0], dims[1] * spacing[1], dims[2] * spacing[2]));
+      const spatialDiagonal = gl_matrix_esm/* vec3.length */.R3.length(gl_matrix_esm/* vec3.fromValues */.R3.fromValues(dims[0] * spacing[0], dims[1] * spacing[1], dims[2] * spacing[2]));
       let sampleDistance = spacing.reduce((a, b) => a + b) / 3.0;
       sampleDistance /= volumeQuality > 1 ? 0.5 * volumeQuality ** 2 : 1.0;
       const samplesPerRay = spatialDiagonal / sampleDistance + 1;
@@ -8278,50 +8863,1321 @@ const primaryAxial = {
     }]
   }]
 };
-;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/getHangingProtocolModule.ts
-
-
-
-
-
-
-
-function getHangingProtocolModule() {
-  return [{
-    name: mpr.id,
-    protocol: mpr
-  }, {
-    name: mprAnd3DVolumeViewport.id,
-    protocol: mprAnd3DVolumeViewport
-  }, {
-    name: fourUp.id,
-    protocol: fourUp
-  }, {
-    name: main3D.id,
-    protocol: main3D
-  }, {
-    name: primaryAxial.id,
-    protocol: primaryAxial
-  }, {
-    name: only3D.id,
-    protocol: only3D
-  }, {
-    name: primary3D.id,
-    protocol: primary3D
-  }];
-}
-/* harmony default export */ const src_getHangingProtocolModule = (getHangingProtocolModule);
-;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/getToolbarModule.tsx
-
-const getToggledClassName = isToggled => {
-  return isToggled ? '!text-primary-active' : '!text-common-bright hover:!bg-primary-dark hover:text-primary-light';
-};
-function getToolbarModule({
-  commandsManager,
-  servicesManager
-}) {
-  const {
-    toolGroupService,
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/hps/frameView.ts
+const frameView = {
+  id: '@ohif/frameView',
+  description: 'Frame view for the active series',
+  name: 'Frame View',
+  icon: 'tool-stack-scroll',
+  isPreset: true,
+  toolGroupIds: ['default'],
+  displaySetSelectors: {
+    defaultDisplaySetId: {
+      seriesMatchingRules: [{
+        attribute: 'numImageFrames',
+        constraint: {
+          greaterThan: {
+            value: 16
+          }
+        },
+        required: true
+      }, {
+        attribute: 'isDisplaySetFromUrl',
+        weight: 10,
+        constraint: {
+          equals: true
+        }
+      }]
+    }
+  },
+  defaultViewport: {
+    viewportOptions: {
+      viewportType: 'stack',
+      toolGroupId: 'default',
+      allowUnmatchedView: true
+    },
+    displaySets: [{
+      id: 'defaultDisplaySetId',
+      matchedDisplaySetsIndex: -1
+    }]
+  },
+  stages: [{
+    name: 'frameView',
+    id: '4x4',
+    viewportStructure: {
+      layoutType: 'grid',
+      properties: {
+        rows: 4,
+        columns: 4
+      }
+    },
+    viewports: [{
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 0
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 1
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 2
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 3
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 4
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 5
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 6
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 7
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 8
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 9
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 10
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 11
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 12
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 13
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 14
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 15
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }]
+  }, {
+    name: 'frameView',
+    id: '3x3',
+    viewportStructure: {
+      layoutType: 'grid',
+      properties: {
+        rows: 3,
+        columns: 3
+      }
+    },
+    viewports: [{
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 0
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 1
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 2
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 3
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 4
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 5
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 6
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 7
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 8
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }]
+  }, {
+    name: 'frameView',
+    id: '3x2',
+    viewportStructure: {
+      layoutType: 'grid',
+      properties: {
+        rows: 2,
+        columns: 3
+      }
+    },
+    viewports: [{
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 0
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 1
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 2
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 3
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 4
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 5
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }]
+  }, {
+    name: 'frameView',
+    id: '2x2',
+    viewportStructure: {
+      layoutType: 'grid',
+      properties: {
+        rows: 2,
+        columns: 2
+      }
+    },
+    viewports: [{
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 0
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 1
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 2
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 3
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }]
+  }, {
+    name: 'frameView',
+    id: '1x3',
+    viewportStructure: {
+      layoutType: 'grid',
+      properties: {
+        rows: 1,
+        columns: 3
+      }
+    },
+    viewports: [{
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 0
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 1
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 2
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }]
+  }, {
+    name: 'frameView',
+    id: '1x2',
+    viewportStructure: {
+      layoutType: 'grid',
+      properties: {
+        rows: 1,
+        columns: 2
+      }
+    },
+    viewports: [{
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 0
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'default',
+        syncGroups: [{
+          type: 'zoompan',
+          id: 'zoompansync',
+          source: true,
+          target: true
+        }, {
+          type: 'voi',
+          id: 'wlsync',
+          source: true,
+          target: true,
+          options: {
+            syncColormap: true
+          }
+        }, {
+          type: 'frameview',
+          id: 'frameViewSync',
+          source: true,
+          target: true,
+          options: {
+            viewportIndex: 1
+          }
+        }]
+      },
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }]
+  }]
+};
+
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/getHangingProtocolModule.ts
+
+
+
+
+
+
+
+
+function getHangingProtocolModule() {
+  return [{
+    name: mpr.id,
+    protocol: mpr
+  }, {
+    name: mprAnd3DVolumeViewport.id,
+    protocol: mprAnd3DVolumeViewport
+  }, {
+    name: fourUp.id,
+    protocol: fourUp
+  }, {
+    name: main3D.id,
+    protocol: main3D
+  }, {
+    name: primaryAxial.id,
+    protocol: primaryAxial
+  }, {
+    name: only3D.id,
+    protocol: only3D
+  }, {
+    name: primary3D.id,
+    protocol: primary3D
+  }, {
+    name: frameView.id,
+    protocol: frameView
+  }];
+}
+/* harmony default export */ const src_getHangingProtocolModule = (getHangingProtocolModule);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/getToolbarModule.tsx
+
+const getToggledClassName = isToggled => {
+  return isToggled ? '!text-primary-active' : '!text-common-bright hover:!bg-primary-dark hover:text-primary-light';
+};
+function getToolbarModule({
+  commandsManager,
+  servicesManager
+}) {
+  const {
+    toolGroupService,
     toolbarService,
     syncGroupService,
     cornerstoneViewportService,
@@ -8553,7 +10409,7 @@ function getToolbarModule({
       }
       const displaySets = displaySetUIDs.map(displaySetService.getDisplaySetByUID);
       const areReconstructable = displaySets.every(displaySet => {
-        return displaySet.isReconstructable;
+        return displaySet?.isReconstructable;
       });
       if (!areReconstructable) {
         return {
@@ -8646,7 +10502,7 @@ class ToolGroupService {
     this.uiNotificationService = uiNotificationService;
     this.listeners = {};
     this.EVENTS = ToolGroupService_EVENTS;
-    Object.assign(this, src/* pubSubServiceInterface */.Ml);
+    Object.assign(this, src/* pubSubServiceInterface */.KZ);
     this._init();
   }
   onModeExit() {
@@ -8919,7 +10775,7 @@ class SyncGroupService {
     this.listeners = {};
     this.EVENTS = SyncGroupService_EVENTS;
     //
-    Object.assign(this, src/* pubSubServiceInterface */.Ml);
+    Object.assign(this, src/* pubSubServiceInterface */.KZ);
   }
   _createSynchronizer(type, id, options) {
     // Initialize if not already done
@@ -8951,6 +10807,15 @@ class SyncGroupService {
     return dist_esm.SynchronizerManager.getSynchronizer(id);
   }
 
+  /**
+   * Registers a custom synchronizer.
+   * @param id - The id of the synchronizer.
+   * @param createFunction - The function that creates the synchronizer.
+   */
+  registerCustomSynchronizer(id, createFunction) {
+    this.synchronizerCreators[id] = createFunction;
+  }
+
   /**
    * Retrieves an array of synchronizers of a specific type.
    * @param type - The type of synchronizers to retrieve.
@@ -9082,7 +10947,7 @@ SyncGroupService.REGISTRATION = {
 
 /* harmony default export */ const services_SyncGroupService = (SyncGroupService);
 // EXTERNAL MODULE: ../../../node_modules/lodash.isequal/index.js
-var lodash_isequal = __webpack_require__(71932);
+var lodash_isequal = __webpack_require__(10311);
 var lodash_isequal_default = /*#__PURE__*/__webpack_require__.n(lodash_isequal);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/transitions.ts
 /**
@@ -9197,7 +11062,7 @@ const SEGMENT_CONSTANT = {
   isLocked: false
 };
 const VOLUME_LOADER_SCHEME = 'cornerstoneStreamingImageVolume';
-class SegmentationService extends src/* PubSubService */.Rc {
+class SegmentationService extends src/* PubSubService */.hC {
   constructor({
     servicesManager
   }) {
@@ -11272,7 +13137,7 @@ const CornerstoneViewportService_EVENTS = {
  * Handles cornerstone viewport logic including enabling, disabling, and
  * updating the viewport.
  */
-class CornerstoneViewportService extends src/* PubSubService */.Rc {
+class CornerstoneViewportService extends src/* PubSubService */.hC {
   constructor(servicesManager) {
     super(CornerstoneViewportService_EVENTS);
     this.renderingEngine = void 0;
@@ -12253,7 +14118,7 @@ var _ColorbarService;
 const {
   ViewportColorbar
 } = dist_esm.utilities.voi.colorbar;
-class ColorbarService extends src/* PubSubService */.Rc {
+class ColorbarService extends src/* PubSubService */.hC {
   constructor() {
     super(ColorbarService.EVENTS);
     this.colorbars = {};
@@ -12519,7 +14384,7 @@ ColorbarService.REGISTRATION = {
 
 
 // EXTERNAL MODULE: ../../../node_modules/dicomweb-client/build/dicomweb-client.es.js
-var dicomweb_client_es = __webpack_require__(36922);
+var dicomweb_client_es = __webpack_require__(97604);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/dicomLoaderService.js
 
 
@@ -12568,13 +14433,13 @@ const cornerstoneRetriever = imageId => {
     return image && image.data && image.data.byteArray.buffer;
   });
 };
-const wadorsRetriever = (url, studyInstanceUID, seriesInstanceUID, sopInstanceUID, headers = src.DICOMWeb.getAuthorizationHeader(), errorInterceptor = src/* errorHandler */.r_.getHTTPErrorHandler()) => {
+const wadorsRetriever = (url, studyInstanceUID, seriesInstanceUID, sopInstanceUID, headers = src.DICOMWeb.getAuthorizationHeader(), errorInterceptor = src/* errorHandler */.Po.getHTTPErrorHandler()) => {
   const config = {
     url,
     headers,
     errorInterceptor
   };
-  const dicomWeb = new dicomweb_client_es/* api */.FH.DICOMwebClient(config);
+  const dicomWeb = new dicomweb_client_es.api.DICOMwebClient(config);
   return dicomWeb.retrieveInstance({
     studyInstanceUID,
     seriesInstanceUID,
@@ -12690,23 +14555,23 @@ class DicomLoaderService {
 const dicomLoaderService = new DicomLoaderService();
 /* harmony default export */ const utils_dicomLoaderService = (dicomLoaderService);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/package.json
-const package_namespaceObject = /*#__PURE__*/JSON.parse('{"UU":"@ohif/extension-cornerstone"}');
+const package_namespaceObject = JSON.parse('{"u2":"@ohif/extension-cornerstone"}');
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/id.js
 
-const id = package_namespaceObject.UU;
+const id = package_namespaceObject.u2;
 
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/index.ts
 
 
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/services/ViewportActionCornersService/ViewportActionCornersService.ts
-var ViewportActionCornersService = __webpack_require__(2447);
+var ViewportActionCornersService = __webpack_require__(13580);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/contextProviders/ViewportActionCornersProvider.tsx
-var ViewportActionCornersProvider = __webpack_require__(40684);
+var ViewportActionCornersProvider = __webpack_require__(71645);
 // EXTERNAL MODULE: ../../../node_modules/lodash.debounce/index.js
-var lodash_debounce = __webpack_require__(14771);
+var lodash_debounce = __webpack_require__(8324);
 var lodash_debounce_default = /*#__PURE__*/__webpack_require__.n(lodash_debounce);
-// EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps.js + 1 modules
-var ColorMaps = __webpack_require__(12882);
+// EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps.js
+var ColorMaps = __webpack_require__(31239);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/ViewportWindowLevel/getViewportVolumeHistogram.ts
 
 const workerManager = (0,esm.getWebWorkerManager)();
@@ -12720,7 +14585,7 @@ const WorkerOptions = {
 
 // Register the task
 const workerFn = () => {
-  return new Worker(new URL(/* worker import */ __webpack_require__.p + __webpack_require__.u(54), __webpack_require__.b), {
+  return new Worker(new URL(/* worker import */ __webpack_require__.p + __webpack_require__.u(158), __webpack_require__.b), {
     name: 'histogram-worker' // name used by the browser to name the worker
   });
 };
@@ -12924,7 +14789,7 @@ const ViewportWindowLevel = ({
       } = viewportInfo.displaySetOptions[volumeIndex];
       let colormap;
       if (displaySetColormap) {
-        colormap = esm.utilities.colormap.getColormap(displaySetColormap.name) ?? ColorMaps/* default */.A.getPresetByName(displaySetColormap.name);
+        colormap = esm.utilities.colormap.getColormap(displaySetColormap.name) ?? ColorMaps/* default */.Z.getPresetByName(displaySetColormap.name);
       }
       const voi = !volumeIndex ? viewportVoi ?? displaySetVOI : displaySetVOI;
       return {
@@ -13051,13 +14916,13 @@ const ViewportWindowLevel = ({
       unsubscribe();
     };
   }, [viewportId, cornerstoneViewportService, updateViewportHistograms]);
-  return /*#__PURE__*/react.createElement(ui_src/* PanelSection */.aU, {
+  return /*#__PURE__*/react.createElement(ui_src/* PanelSection */.cw, {
     title: "Window Level"
   }, windowLevels.map((windowLevel, i) => {
     if (!windowLevel.histogram) {
       return null;
     }
-    return /*#__PURE__*/react.createElement(ui_src/* WindowLevel */.bL, {
+    return /*#__PURE__*/react.createElement(ui_src/* WindowLevel */._N, {
       key: windowLevel.volumeId,
       title: `${windowLevel.modality}`,
       histogram: windowLevel.histogram,
@@ -13084,7 +14949,7 @@ ViewportWindowLevel.propTypes = {
 const ActiveViewportWindowLevel = ({
   servicesManager
 }) => {
-  const [viewportGrid] = (0,ui_src/* useViewportGrid */.ih)();
+  const [viewportGrid] = (0,ui_src/* useViewportGrid */.O_)();
   const {
     activeViewportId
   } = viewportGrid;
@@ -13099,8 +14964,43 @@ ActiveViewportWindowLevel.propTypes = {
 /* harmony default export */ const ActiveViewportWindowLevel_ActiveViewportWindowLevel = (ActiveViewportWindowLevel);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/ActiveViewportWindowLevel/index.js
 
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/synchronizers/frameViewSynchronizer.ts
+
+
+const frameViewSyncCallback = (synchronizerInstance, sourceViewport, targetViewport) => {
+  const renderingEngine = (0,esm.getRenderingEngine)(targetViewport.renderingEngineId);
+  if (!renderingEngine) {
+    throw new Error(`No RenderingEngine for Id: ${targetViewport.renderingEngineId}`);
+  }
+  const sViewport = renderingEngine.getViewport(sourceViewport.viewportId);
+  const {
+    viewportIndex: targetViewportIndex
+  } = synchronizerInstance.getOptions(targetViewport.viewportId);
+  const {
+    viewportIndex: sourceViewportIndex
+  } = synchronizerInstance.getOptions(sourceViewport.viewportId);
+  if (targetViewportIndex === undefined || sourceViewportIndex === undefined) {
+    throw new Error('No viewportIndex provided');
+  }
+  const tViewport = renderingEngine.getViewport(targetViewport.viewportId);
+  const sourceSliceIndex = sViewport.getSliceIndex();
+  const sliceDifference = Number(targetViewportIndex) - Number(sourceViewportIndex);
+  const targetSliceIndex = sourceSliceIndex + sliceDifference;
+  if (targetSliceIndex === tViewport.getSliceIndex()) {
+    return;
+  }
+  dist_esm.utilities.jumpToSlice(tViewport.element, {
+    imageIndex: targetSliceIndex
+  });
+};
+const createFrameViewSynchronizer = synchronizerName => {
+  const synchronizer = dist_esm.SynchronizerManager.createSynchronizer(synchronizerName, esm.EVENTS.CAMERA_MODIFIED, frameViewSyncCallback);
+  return synchronizer;
+};
+
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/index.tsx
-function src_extends() { src_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return src_extends.apply(this, arguments); }
+function src_extends() { return src_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, src_extends.apply(null, arguments); }
+
 
 
 
@@ -13139,7 +15039,7 @@ const {
   getDynamicVolumeInfo
 } = volumeLoaderHelpers ?? {};
 const Component = /*#__PURE__*/react.lazy(() => {
-  return __webpack_require__.e(/* import() */ 139).then(__webpack_require__.bind(__webpack_require__, 56139));
+  return __webpack_require__.e(/* import() */ 169).then(__webpack_require__.bind(__webpack_require__, 31169));
 });
 const OHIFCornerstoneViewport = props => {
   return /*#__PURE__*/react.createElement(react.Suspense, {
@@ -13180,7 +15080,7 @@ const cornerstoneExtension = {
       esm.imageRetrievalPoolManager.clearRequestStack(type);
     });
     cineService.setIsCineEnabled(false);
-    (0,state/* reset */.cL)();
+    (0,state/* reset */.mc)();
   },
   /**
    * Register the Cornerstone 3D services and set them up for use.
@@ -13197,9 +15097,13 @@ const cornerstoneExtension = {
     servicesManager.registerService(services_SyncGroupService.REGISTRATION);
     servicesManager.registerService(services_SegmentationService.REGISTRATION);
     servicesManager.registerService(services_CornerstoneCacheService.REGISTRATION);
-    servicesManager.registerService(ViewportActionCornersService/* default */.A.REGISTRATION);
+    servicesManager.registerService(ViewportActionCornersService/* default */.Z.REGISTRATION);
     servicesManager.registerService(services_ColorbarService.REGISTRATION);
-    serviceProvidersManager.registerProvider(ViewportActionCornersService/* default */.A.REGISTRATION.name, ViewportActionCornersProvider/* ViewportActionCornersProvider */.It);
+    serviceProvidersManager.registerProvider(ViewportActionCornersService/* default */.Z.REGISTRATION.name, ViewportActionCornersProvider/* ViewportActionCornersProvider */.cJ);
+    const {
+      syncGroupService
+    } = servicesManager.services;
+    syncGroupService.registerCustomSynchronizer('frameview', createFrameViewSynchronizer);
     return init.call(this, props);
   },
   getToolbarModule: getToolbarModule,
@@ -13252,7 +15156,7 @@ const cornerstoneExtension = {
             cornerstoneTools: dist_esm
           };
         },
-        getEnabledElement: state/* getEnabledElement */.kJ,
+        getEnabledElement: state/* getEnabledElement */.K8,
         dicomLoaderService: utils_dicomLoaderService,
         showLabelAnnotationPopup: showLabelAnnotationPopup
       }
@@ -13280,18 +15184,18 @@ const cornerstoneExtension = {
 
 /***/ }),
 
-/***/ 2447:
+/***/ 13580:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */   Z: () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _ohif_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(75186);
-/* harmony import */ var _ohif_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(79047);
+/* harmony import */ var _ohif_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(63810);
+/* harmony import */ var _ohif_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(38604);
 var _ViewportActionCornersService;
 
 
-class ViewportActionCornersService extends _ohif_core__WEBPACK_IMPORTED_MODULE_0__/* .PubSubService */ .Rc {
+class ViewportActionCornersService extends _ohif_core__WEBPACK_IMPORTED_MODULE_0__/* .PubSubService */ .hC {
   constructor() {
     super(ViewportActionCornersService.EVENTS);
     this.serviceImplementation = {};
@@ -13332,7 +15236,7 @@ class ViewportActionCornersService extends _ohif_core__WEBPACK_IMPORTED_MODULE_0
 }
 _ViewportActionCornersService = ViewportActionCornersService;
 ViewportActionCornersService.EVENTS = {};
-ViewportActionCornersService.LOCATIONS = _ohif_ui__WEBPACK_IMPORTED_MODULE_1__/* .ViewportActionCornersLocations */ .ld;
+ViewportActionCornersService.LOCATIONS = _ohif_ui__WEBPACK_IMPORTED_MODULE_1__/* .ViewportActionCornersLocations */ .Hv;
 ViewportActionCornersService.REGISTRATION = {
   name: 'viewportActionCornersService',
   altName: 'ViewportActionCornersService',
@@ -13346,13 +15250,13 @@ ViewportActionCornersService.REGISTRATION = {
 
 /***/ }),
 
-/***/ 83910:
+/***/ 13000:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   cL: () => (/* binding */ reset),
-/* harmony export */   kJ: () => (/* binding */ getEnabledElement),
-/* harmony export */   ye: () => (/* binding */ setEnabledElement)
+/* harmony export */   K8: () => (/* binding */ getEnabledElement),
+/* harmony export */   Yc: () => (/* binding */ setEnabledElement),
+/* harmony export */   mc: () => (/* binding */ reset)
 /* harmony export */ });
 const state = {
   // The `defaultContext` of an extension's commandsModule
@@ -13388,13 +15292,13 @@ const reset = () => {
 
 /***/ }),
 
-/***/ 20928:
+/***/ 90927:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   A: () => (/* binding */ getSOPInstanceAttributes)
+/* harmony export */   Z: () => (/* binding */ getSOPInstanceAttributes)
 /* harmony export */ });
-/* harmony import */ var _cornerstonejs_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(92136);
+/* harmony import */ var _cornerstonejs_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(62709);
 
 
 /**