@ohif/app 3.8.0-beta.6 → 3.8.0-beta.60

package/dist/{776.bundle.08eb381dc3d06708eb0f.js → 963.bundle.8110049ad01d956455a2.js}

@@ -1,14 +1,15 @@
-(self["webpackChunk"] = self["webpackChunk"] || []).push([[776],{
+"use strict";
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[963],{
 
-/***/ 78227:
+/***/ 34963:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-"use strict";
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
+  ImageOverlayViewerTool: () => (/* reexport */ tools_ImageOverlayViewerTool),
   Types: () => (/* reexport */ types_namespaceObject),
   "default": () => (/* binding */ cornerstone_src),
   getActiveViewportEnabledElement: () => (/* reexport */ getActiveViewportEnabledElement),
@@ -23,7 +24,7 @@ __webpack_require__.d(utils_namespaceObject, {
   getDisplayUnit: () => (utils_getDisplayUnit),
   getFirstAnnotationSelected: () => (getFirstAnnotationSelected),
   getHandlesFromPoints: () => (getHandlesFromPoints),
-  getSOPInstanceAttributes: () => (getSOPInstanceAttributes/* default */.Z),
+  getSOPInstanceAttributes: () => (getSOPInstanceAttributes/* default */.A),
   isAnnotationSelected: () => (isAnnotationSelected),
   setAnnotationSelected: () => (setAnnotationSelected)
 });
@@ -33,20 +34,20 @@ var types_namespaceObject = {};
 __webpack_require__.r(types_namespaceObject);
 
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
-var react = __webpack_require__(43001);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 331 modules
-var esm = __webpack_require__(3743);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 348 modules
-var dist_esm = __webpack_require__(14957);
-// EXTERNAL MODULE: ../../core/src/index.ts + 65 modules
-var src = __webpack_require__(71771);
+var react = __webpack_require__(41766);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 382 modules
+var esm = __webpack_require__(39526);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 14 modules
+var dist_esm = __webpack_require__(72980);
+// EXTERNAL MODULE: ../../core/src/index.ts + 66 modules
+var src = __webpack_require__(14283);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/streaming-image-volume-loader/dist/esm/index.js + 13 modules
-var streaming_image_volume_loader_dist_esm = __webpack_require__(7087);
+var streaming_image_volume_loader_dist_esm = __webpack_require__(23722);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/dicom-image-loader/dist/dynamic-import/cornerstoneDICOMImageLoader.min.js
-var cornerstoneDICOMImageLoader_min = __webpack_require__(61539);
+var cornerstoneDICOMImageLoader_min = __webpack_require__(54578);
 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__(56660);
+var dicomParser_min = __webpack_require__(45561);
 var dicomParser_min_default = /*#__PURE__*/__webpack_require__.n(dicomParser_min);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/initWADOImageLoader.js
 
@@ -79,7 +80,7 @@ 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 */.IU);
+  registerVolumeLoader('cornerstoneStreamingImageVolume', streaming_image_volume_loader_dist_esm/* cornerstoneStreamingImageVolumeLoader */.FC);
   cornerstoneDICOMImageLoader_min_default().configure({
     decodeConfig: {
       // !! IMPORTANT !!
@@ -88,7 +89,7 @@ function initWADOImageLoader(userAuthenticationService, appConfig, extensionMana
       // Until the default is set to true (which is the case for cornerstone3D),
       // we should set this flag to false.
       convertFloatPixelDataToInt: false,
-      use16BitDataType: Boolean(appConfig.use16BitDataType)
+      use16BitDataType: Boolean(appConfig.useNorm16Texture) || Boolean(appConfig.preferSizeOverAccuracy)
     },
     beforeSend: function (xhr) {
       //TODO should be removed in the future and request emitted by DicomWebDataSource
@@ -104,7 +105,7 @@ function initWADOImageLoader(userAuthenticationService, appConfig, extensionMana
       return xhrRequestHeaders;
     },
     errorInterceptor: error => {
-      src/* errorHandler */.Po.getHTTPErrorHandler(error);
+      src/* errorHandler */.r_.getHTTPErrorHandler(error);
     }
   });
   initWebWorkers(appConfig);
@@ -118,8 +119,8 @@ function destroy() {
   }
   webWorkers.length = 0;
 }
-// EXTERNAL MODULE: ../../ui/src/index.js + 485 modules
-var ui_src = __webpack_require__(71783);
+// EXTERNAL MODULE: ../../ui/src/index.js + 487 modules
+var ui_src = __webpack_require__(55395);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/callInputDialog.tsx
 
 
@@ -136,9 +137,7 @@ var ui_src = __webpack_require__(71783);
  * @param {string?} dialogConfig.dialogTitle - title of the input dialog
  * @param {string?} dialogConfig.inputLabel - show label above the input
  */
-function callInputDialog(uiDialogService, data, callback) {
-  let isArrowAnnotateInputDialog = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-  let dialogConfig = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+function callInputDialog(uiDialogService, data, callback, isArrowAnnotateInputDialog = true, dialogConfig = {}) {
   const dialogId = 'dialog-enter-annotation';
   const label = data ? isArrowAnnotateInputDialog ? data.text : data.label : '';
   const {
@@ -146,11 +145,10 @@ function callInputDialog(uiDialogService, data, callback) {
     inputLabel = 'Enter your annotation',
     validateFunc = value => true
   } = dialogConfig;
-  const onSubmitHandler = _ref => {
-    let {
-      action,
-      value
-    } = _ref;
+  const onSubmitHandler = ({
+    action,
+    value
+  }) => {
     switch (action.id) {
       case 'save':
         if (typeof validateFunc === 'function' && !validateFunc(value.label)) {
@@ -172,7 +170,7 @@ function callInputDialog(uiDialogService, data, callback) {
       centralize: true,
       isDraggable: false,
       showOverlay: true,
-      content: ui_src/* Dialog */.Vq,
+      content: ui_src/* Dialog */.lG,
       contentProps: {
         title: dialogTitle,
         value: {
@@ -185,19 +183,18 @@ function callInputDialog(uiDialogService, data, callback) {
         actions: [{
           id: 'cancel',
           text: 'Cancel',
-          type: ui_src/* ButtonEnums.type */.LZ.dt.secondary
+          type: ui_src/* ButtonEnums.type */.Ny.NW.secondary
         }, {
           id: 'save',
           text: 'Save',
-          type: ui_src/* ButtonEnums.type */.LZ.dt.primary
+          type: ui_src/* ButtonEnums.type */.Ny.NW.primary
         }],
         onSubmit: onSubmitHandler,
-        body: _ref2 => {
-          let {
-            value,
-            setValue
-          } = _ref2;
-          return /*#__PURE__*/react.createElement(ui_src/* Input */.II, {
+        body: ({
+          value,
+          setValue
+        }) => {
+          return /*#__PURE__*/react.createElement(ui_src/* Input */.pd, {
             autoFocus: true,
             className: "border-primary-main bg-black",
             type: "text",
@@ -230,7 +227,7 @@ function callInputDialog(uiDialogService, data, callback) {
 }
 /* harmony default export */ const utils_callInputDialog = (callInputDialog);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/state.ts
-var state = __webpack_require__(73704);
+var state = __webpack_require__(71353);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/getActiveViewportEnabledElement.ts
 
 
@@ -240,7 +237,7 @@ function getActiveViewportEnabledElement(viewportGridService) {
   } = viewportGridService.getState();
   const {
     element
-  } = (0,state/* getEnabledElement */.K8)(activeViewportId) || {};
+  } = (0,state/* getEnabledElement */.kJ)(activeViewportId) || {};
   const enabledElement = (0,esm.getEnabledElement)(element);
   return enabledElement;
 }
@@ -256,8 +253,8 @@ const {
  * Calibration Line tool works almost the same as the
  */
 class CalibrationLineTool extends dist_esm.LengthTool {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     this._renderingViewport = void 0;
     this._lengthToolRenderAnnotation = this.renderAnnotation;
     this.renderAnnotation = (enabledElement, svgDrawingHelper) => {
@@ -350,8 +347,46 @@ function onCompletedCalibrationLine(servicesManager, csToolsEvent) {
     });
   });
 }
-// EXTERNAL MODULE: ../../core/src/utils/index.js + 25 modules
-var utils = __webpack_require__(77250);
+// EXTERNAL MODULE: ../../core/src/utils/index.js + 26 modules
+var utils = __webpack_require__(17541);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/tools/OverlayPlaneModuleProvider.ts
+
+const _cachedOverlayMetadata = new Map();
+
+/**
+ * Image Overlay Viewer tool is not a traditional tool that requires user interactin.
+ * But it is used to display Pixel Overlays. And it will provide toggling capability.
+ *
+ * The documentation for Overlay Plane Module of DICOM can be found in [C.9.2 of
+ * Part-3 of DICOM standard](https://dicom.nema.org/medical/dicom/2018b/output/chtml/part03/sect_C.9.2.html)
+ *
+ * Image Overlay rendered by this tool can be toggled on and off using
+ * toolGroup.setToolEnabled() and toolGroup.setToolDisabled()
+ */
+const OverlayPlaneModuleProvider = {
+  /** Adds the metadata for overlayPlaneModule */
+  add: (imageId, metadata) => {
+    if (_cachedOverlayMetadata.get(imageId) === metadata) {
+      // This is a no-op here as the tool re-caches the data
+      return;
+    }
+    _cachedOverlayMetadata.set(imageId, metadata);
+  },
+  /** Standard getter for metadata */
+  get: (type, query) => {
+    if (Array.isArray(query)) {
+      return;
+    }
+    if (type !== 'overlayPlaneModule') {
+      return;
+    }
+    return _cachedOverlayMetadata.get(query);
+  }
+};
+
+// Needs to be higher priority than default provider
+esm.metaData.addProvider(OverlayPlaneModuleProvider.get, 10_000);
+/* harmony default export */ const tools_OverlayPlaneModuleProvider = (OverlayPlaneModuleProvider);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/tools/ImageOverlayViewerTool.tsx
 
 
@@ -368,21 +403,14 @@ var utils = __webpack_require__(77250);
  * toolGroup.setToolEnabled() and toolGroup.setToolDisabled()
  */
 class ImageOverlayViewerTool extends dist_esm.AnnotationDisplayTool {
-  constructor() {
-    let toolProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let defaultToolProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-      supportedInteractionTypes: [],
-      configuration: {
-        fillColor: [255, 127, 127, 255]
-      }
-    };
+  constructor(toolProps = {}, defaultToolProps = {
+    supportedInteractionTypes: [],
+    configuration: {
+      fillColor: [255, 127, 127, 255]
+    }
+  }) {
     super(toolProps, defaultToolProps);
-    this._cachedOverlayMetadata = new Map();
-    this._cachedStats = {};
-    this.onSetToolDisabled = () => {
-      this._cachedStats = {};
-      this._cachedOverlayMetadata = new Map();
-    };
+    this.onSetToolDisabled = () => {};
     this.renderAnnotation = (enabledElement, svgDrawingHelper) => {
       const {
         viewport
@@ -391,14 +419,23 @@ class ImageOverlayViewerTool extends dist_esm.AnnotationDisplayTool {
       if (!imageId) {
         return;
       }
-      const overlays = this._cachedOverlayMetadata.get(imageId) ?? esm.metaData.get('overlayPlaneModule', imageId)?.overlays;
+      const overlayMetadata = esm.metaData.get('overlayPlaneModule', imageId);
+      const overlays = overlayMetadata?.overlays;
 
       // no overlays
       if (!overlays?.length) {
         return;
       }
-      this._cachedOverlayMetadata.set(imageId, overlays);
-      this._getCachedStat(imageId, overlays, this.configuration.fillColor).then(cachedStat => {
+
+      // Fix the x, y positions
+      overlays.forEach(overlay => {
+        overlay.x ||= 0;
+        overlay.y ||= 0;
+      });
+
+      // Will clear cached stat data when the overlay data changes
+      ImageOverlayViewerTool.addOverlayPlaneModule(imageId, overlayMetadata);
+      this._getCachedStat(imageId, overlayMetadata, this.configuration.fillColor).then(cachedStat => {
         cachedStat.overlays.forEach(overlay => {
           this._renderOverlay(enabledElement, svgDrawingHelper, overlay);
         });
@@ -472,10 +509,11 @@ class ImageOverlayViewerTool extends dist_esm.AnnotationDisplayTool {
     return true;
   }
   async _getCachedStat(imageId, overlayMetadata, color) {
-    if (this._cachedStats[imageId] && this._isSameColor(this._cachedStats[imageId].color, color)) {
-      return this._cachedStats[imageId];
+    const missingOverlay = overlayMetadata.overlays.filter(overlay => overlay.pixelData && !overlay.dataUrl);
+    if (missingOverlay.length === 0) {
+      return overlayMetadata;
     }
-    const overlays = await Promise.all(overlayMetadata.filter(overlay => overlay.pixelData).map(async (overlay, idx) => {
+    const overlays = await Promise.all(overlayMetadata.overlays.filter(overlay => overlay.pixelData).map(async (overlay, idx) => {
       let pixelData = null;
       if (overlay.pixelData.Value) {
         pixelData = overlay.pixelData.Value;
@@ -483,6 +521,10 @@ class ImageOverlayViewerTool extends dist_esm.AnnotationDisplayTool {
         pixelData = overlay.pixelData[0];
       } 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 arrayBuffer = await blob.arrayBuffer();
+        pixelData = arrayBuffer;
       }
       if (!pixelData) {
         return;
@@ -490,20 +532,17 @@ class ImageOverlayViewerTool extends dist_esm.AnnotationDisplayTool {
       const dataUrl = this._renderOverlayToDataUrl({
         width: overlay.columns,
         height: overlay.rows
-      }, color, pixelData);
+      }, overlay.color || color, pixelData);
       return {
         ...overlay,
-        _id: (0,utils/* guid */.M8)(),
+        _id: (0,utils/* guid */.Os)(),
         dataUrl,
         // this will be a data url expression of the rendered image
         color
       };
     }));
-    this._cachedStats[imageId] = {
-      color: color,
-      overlays: overlays.filter(overlay => overlay)
-    };
-    return this._cachedStats[imageId];
+    overlayMetadata.overlays = overlays;
+    return overlayMetadata;
   }
 
   /**
@@ -526,11 +565,10 @@ class ImageOverlayViewerTool extends dist_esm.AnnotationDisplayTool {
    * @param color
    * @returns
    */
-  _renderOverlayToDataUrl(_ref, color, pixelDataRaw) {
-    let {
-      width,
-      height
-    } = _ref;
+  _renderOverlayToDataUrl({
+    width,
+    height
+  }, color, pixelDataRaw) {
     const pixelDataView = new DataView(pixelDataRaw);
     const totalBits = width * height;
     const canvas = document.createElement('canvas');
@@ -562,13 +600,17 @@ class ImageOverlayViewerTool extends dist_esm.AnnotationDisplayTool {
   }
 }
 ImageOverlayViewerTool.toolName = 'ImageOverlayViewer';
+/**
+ * The overlay plane module provider add method is exposed here to be used
+ * when updating the overlay for this tool to use for displaying data.
+ */
+ImageOverlayViewerTool.addOverlayPlaneModule = tools_OverlayPlaneModuleProvider.add;
 /* harmony default export */ const tools_ImageOverlayViewerTool = (ImageOverlayViewerTool);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/initCornerstoneTools.js
 
 
 
-function initCornerstoneTools() {
-  let configuration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+function initCornerstoneTools(configuration = {}) {
   dist_esm.CrosshairsTool.isAnnotation = false;
   dist_esm.ReferenceLinesTool.isAnnotation = false;
   (0,dist_esm.init)(configuration);
@@ -648,7 +690,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']);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/utils/getSOPInstanceAttributes.js
-var getSOPInstanceAttributes = __webpack_require__(87172);
+var getSOPInstanceAttributes = __webpack_require__(1663);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/Length.ts
 
 
@@ -688,7 +730,7 @@ const Length = {
       SOPInstanceUID,
       SeriesInstanceUID,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, cornerstoneViewportService, viewportId);
+    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, cornerstoneViewportService, viewportId);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -696,7 +738,8 @@ const Length = {
       displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
     }
     const {
-      points
+      points,
+      textBox
     } = data.handles;
     const mappedAnnotations = getMappedAnnotations(annotation, displaySetService);
     const displayText = getDisplayText(mappedAnnotations, displaySet);
@@ -706,6 +749,7 @@ const Length = {
       SOPInstanceUID,
       FrameOfReferenceUID,
       points,
+      textBox,
       metadata,
       referenceSeriesUID: SeriesInstanceUID,
       referenceStudyUID: StudyInstanceUID,
@@ -745,7 +789,7 @@ function getMappedAnnotations(annotation, displaySetService) {
       SOPInstanceUID,
       SeriesInstanceUID,
       frameNumber
-    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId);
+    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId);
     const displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID, frameNumber);
     const {
       SeriesNumber
@@ -925,7 +969,7 @@ const Bidirectional = {
       SOPInstanceUID,
       SeriesInstanceUID,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, cornerstoneViewportService, viewportId);
+    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, cornerstoneViewportService, viewportId);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -933,7 +977,8 @@ const Bidirectional = {
       displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
     }
     const {
-      points
+      points,
+      textBox
     } = data.handles;
     const mappedAnnotations = Bidirectional_getMappedAnnotations(annotation, displaySetService);
     const displayText = Bidirectional_getDisplayText(mappedAnnotations, displaySet);
@@ -943,6 +988,7 @@ const Bidirectional = {
       SOPInstanceUID,
       FrameOfReferenceUID,
       points,
+      textBox,
       metadata,
       referenceSeriesUID: SeriesInstanceUID,
       referenceStudyUID: StudyInstanceUID,
@@ -983,7 +1029,7 @@ function Bidirectional_getMappedAnnotations(annotation, displaySetService) {
       SOPInstanceUID,
       SeriesInstanceUID,
       frameNumber
-    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId);
+    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId);
     const displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID, frameNumber);
     const {
       SeriesNumber
@@ -1106,7 +1152,7 @@ const EllipticalROI = {
       SOPInstanceUID,
       SeriesInstanceUID,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, cornerstoneViewportService, viewportId);
+    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, cornerstoneViewportService, viewportId);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -1114,7 +1160,8 @@ const EllipticalROI = {
       displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
     }
     const {
-      points
+      points,
+      textBox
     } = data.handles;
     const mappedAnnotations = EllipticalROI_getMappedAnnotations(annotation, displaySetService);
     const displayText = EllipticalROI_getDisplayText(mappedAnnotations, displaySet);
@@ -1124,6 +1171,7 @@ const EllipticalROI = {
       SOPInstanceUID,
       FrameOfReferenceUID,
       points,
+      textBox,
       metadata,
       referenceSeriesUID: SeriesInstanceUID,
       referenceStudyUID: StudyInstanceUID,
@@ -1164,7 +1212,7 @@ function EllipticalROI_getMappedAnnotations(annotation, displaySetService) {
       SOPInstanceUID,
       SeriesInstanceUID,
       frameNumber
-    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId);
+    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId);
     const displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID, frameNumber);
     const {
       SeriesNumber
@@ -1315,7 +1363,7 @@ const CircleROI = {
       SOPInstanceUID,
       SeriesInstanceUID,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, CornerstoneViewportService, viewportId);
+    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, CornerstoneViewportService, viewportId);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -1323,7 +1371,8 @@ const CircleROI = {
       displaySet = DisplaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
     }
     const {
-      points
+      points,
+      textBox
     } = data.handles;
     const mappedAnnotations = CircleROI_getMappedAnnotations(annotation, DisplaySetService);
     const displayText = CircleROI_getDisplayText(mappedAnnotations, displaySet);
@@ -1333,6 +1382,7 @@ const CircleROI = {
       SOPInstanceUID,
       FrameOfReferenceUID,
       points,
+      textBox,
       metadata,
       referenceSeriesUID: SeriesInstanceUID,
       referenceStudyUID: StudyInstanceUID,
@@ -1373,7 +1423,7 @@ function CircleROI_getMappedAnnotations(annotation, DisplaySetService) {
       SOPInstanceUID,
       SeriesInstanceUID,
       frameNumber
-    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId);
+    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId);
     const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID, frameNumber);
     const {
       SeriesNumber
@@ -1530,7 +1580,7 @@ const ArrowAnnotate_Length = {
       SOPInstanceUID,
       SeriesInstanceUID,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, cornerstoneViewportService, viewportId);
+    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, cornerstoneViewportService, viewportId);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -1538,7 +1588,8 @@ const ArrowAnnotate_Length = {
       displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
     }
     const {
-      points
+      points,
+      textBox
     } = data.handles;
     const mappedAnnotations = ArrowAnnotate_getMappedAnnotations(annotation, displaySetService);
     const displayText = ArrowAnnotate_getDisplayText(mappedAnnotations, displaySet);
@@ -1547,6 +1598,7 @@ const ArrowAnnotate_Length = {
       SOPInstanceUID,
       FrameOfReferenceUID,
       points,
+      textBox,
       metadata,
       referenceSeriesUID: SeriesInstanceUID,
       referenceStudyUID: StudyInstanceUID,
@@ -1554,7 +1606,6 @@ const ArrowAnnotate_Length = {
       toolName: metadata.toolName,
       displaySetInstanceUID: displaySet.displaySetInstanceUID,
       label: data.text,
-      text: data.text,
       displayText: displayText,
       data: data.cachedStats,
       type: getValueTypeFromToolType(toolName),
@@ -1580,7 +1631,7 @@ function ArrowAnnotate_getMappedAnnotations(annotation, displaySetService) {
     SOPInstanceUID,
     SeriesInstanceUID,
     frameNumber
-  } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId);
+  } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId);
   const displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID, frameNumber);
   const {
     SeriesNumber
@@ -1657,7 +1708,7 @@ const CobbAngle = {
       SOPInstanceUID,
       SeriesInstanceUID,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, CornerstoneViewportService, viewportId);
+    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, CornerstoneViewportService, viewportId);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -1665,7 +1716,8 @@ const CobbAngle = {
       displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
     }
     const {
-      points
+      points,
+      textBox
     } = data.handles;
     const mappedAnnotations = CobbAngle_getMappedAnnotations(annotation, displaySetService);
     const displayText = CobbAngle_getDisplayText(mappedAnnotations, displaySet);
@@ -1675,6 +1727,7 @@ const CobbAngle = {
       SOPInstanceUID,
       FrameOfReferenceUID,
       points,
+      textBox,
       metadata,
       referenceSeriesUID: SeriesInstanceUID,
       referenceStudyUID: StudyInstanceUID,
@@ -1714,7 +1767,7 @@ function CobbAngle_getMappedAnnotations(annotation, DisplaySetService) {
       SOPInstanceUID,
       SeriesInstanceUID,
       frameNumber
-    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId);
+    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId);
     const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID, frameNumber);
     const {
       SeriesNumber
@@ -1840,7 +1893,7 @@ const Angle = {
       SOPInstanceUID,
       SeriesInstanceUID,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, CornerstoneViewportService, viewportId);
+    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, CornerstoneViewportService, viewportId);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = displaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -1848,7 +1901,8 @@ const Angle = {
       displaySet = displaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
     }
     const {
-      points
+      points,
+      textBox
     } = data.handles;
     const mappedAnnotations = Angle_getMappedAnnotations(annotation, displaySetService);
     const displayText = Angle_getDisplayText(mappedAnnotations, displaySet);
@@ -1858,6 +1912,7 @@ const Angle = {
       SOPInstanceUID,
       FrameOfReferenceUID,
       points,
+      textBox,
       metadata,
       referenceSeriesUID: SeriesInstanceUID,
       referenceStudyUID: StudyInstanceUID,
@@ -1897,7 +1952,7 @@ function Angle_getMappedAnnotations(annotation, DisplaySetService) {
       SOPInstanceUID,
       SeriesInstanceUID,
       frameNumber
-    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId);
+    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId);
     const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID, frameNumber);
     const {
       SeriesNumber
@@ -2021,7 +2076,7 @@ const PlanarFreehandROI = {
       SOPInstanceUID,
       SeriesInstanceUID,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, CornerstoneViewportService, viewportId);
+    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, CornerstoneViewportService, viewportId);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -2029,7 +2084,8 @@ const PlanarFreehandROI = {
       displaySet = DisplaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
     }
     const {
-      points
+      points,
+      textBox
     } = data.handles;
     const mappedAnnotations = PlanarFreehandROI_getMappedAnnotations(annotation, DisplaySetService);
     const displayText = PlanarFreehandROI_getDisplayText(mappedAnnotations);
@@ -2039,6 +2095,7 @@ const PlanarFreehandROI = {
       SOPInstanceUID,
       FrameOfReferenceUID,
       points,
+      textBox,
       metadata,
       referenceSeriesUID: SeriesInstanceUID,
       referenceStudyUID: StudyInstanceUID,
@@ -2078,7 +2135,7 @@ function PlanarFreehandROI_getMappedAnnotations(annotationData, DisplaySetServic
   const {
     SOPInstanceUID: _SOPInstanceUID,
     SeriesInstanceUID: _SeriesInstanceUID
-  } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId) || {};
+  } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId) || {};
   if (!_SOPInstanceUID || !_SeriesInstanceUID) {
     return annotations;
   }
@@ -2151,7 +2208,7 @@ const RectangleROI = {
       SOPInstanceUID,
       SeriesInstanceUID,
       StudyInstanceUID
-    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId, CornerstoneViewportService, viewportId);
+    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId, CornerstoneViewportService, viewportId);
     let displaySet;
     if (SOPInstanceUID) {
       displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID);
@@ -2159,7 +2216,8 @@ const RectangleROI = {
       displaySet = DisplaySetService.getDisplaySetsForSeries(SeriesInstanceUID);
     }
     const {
-      points
+      points,
+      textBox
     } = data.handles;
     const mappedAnnotations = RectangleROI_getMappedAnnotations(annotation, DisplaySetService);
     const displayText = RectangleROI_getDisplayText(mappedAnnotations, displaySet);
@@ -2169,6 +2227,7 @@ const RectangleROI = {
       SOPInstanceUID,
       FrameOfReferenceUID,
       points,
+      textBox,
       metadata,
       referenceSeriesUID: SeriesInstanceUID,
       referenceStudyUID: StudyInstanceUID,
@@ -2209,7 +2268,7 @@ function RectangleROI_getMappedAnnotations(annotation, DisplaySetService) {
       SOPInstanceUID,
       SeriesInstanceUID,
       frameNumber
-    } = (0,getSOPInstanceAttributes/* default */.Z)(referencedImageId);
+    } = (0,getSOPInstanceAttributes/* default */.A)(referencedImageId);
     const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(SOPInstanceUID, SeriesInstanceUID, frameNumber);
     const {
       SeriesNumber
@@ -2639,10 +2698,9 @@ const connectMeasurementServiceToTools = (measurementService, cornerstoneViewpor
     RAW_MEASUREMENT_ADDED
   } = measurementService.EVENTS;
   const csTools3DVer1MeasurementSource = measurementService.getSource(CORNERSTONE_3D_TOOLS_SOURCE_NAME, CORNERSTONE_3D_TOOLS_SOURCE_VERSION);
-  measurementService.subscribe(MEASUREMENTS_CLEARED, _ref => {
-    let {
-      measurements
-    } = _ref;
+  measurementService.subscribe(MEASUREMENTS_CLEARED, ({
+    measurements
+  }) => {
     if (!Object.keys(measurements).length) {
       return;
     }
@@ -2657,12 +2715,11 @@ const connectMeasurementServiceToTools = (measurementService, cornerstoneViewpor
       removeAnnotation(uid);
     }
   });
-  measurementService.subscribe(MEASUREMENT_UPDATED, _ref2 => {
-    let {
-      source,
-      measurement,
-      notYetUpdatedAtSource
-    } = _ref2;
+  measurementService.subscribe(MEASUREMENT_UPDATED, ({
+    source,
+    measurement,
+    notYetUpdatedAtSource
+  }) => {
     if (source.name !== CORNERSTONE_3D_TOOLS_SOURCE_NAME) {
       return;
     }
@@ -2692,14 +2749,12 @@ const connectMeasurementServiceToTools = (measurementService, cornerstoneViewpor
 
     // Todo: trigger render for annotation
   });
-
-  measurementService.subscribe(RAW_MEASUREMENT_ADDED, _ref3 => {
-    let {
-      source,
-      measurement,
-      data,
-      dataSource
-    } = _ref3;
+  measurementService.subscribe(RAW_MEASUREMENT_ADDED, ({
+    source,
+    measurement,
+    data,
+    dataSource
+  }) => {
     if (source.name !== CORNERSTONE_3D_TOOLS_SOURCE_NAME) {
       return;
     }
@@ -2713,7 +2768,7 @@ const connectMeasurementServiceToTools = (measurementService, cornerstoneViewpor
     let frameNumber = 1;
     if (measurement?.metadata?.referencedImageId) {
       imageId = measurement.metadata.referencedImageId;
-      frameNumber = (0,getSOPInstanceAttributes/* default */.Z)(measurement.metadata.referencedImageId).frameNumber;
+      frameNumber = (0,getSOPInstanceAttributes/* default */.A)(measurement.metadata.referencedImageId).frameNumber;
     } else {
       imageId = dataSource.getImageIdsForInstance({
         instance
@@ -2743,11 +2798,10 @@ const connectMeasurementServiceToTools = (measurementService, cornerstoneViewpor
       }
     });
   });
-  measurementService.subscribe(MEASUREMENT_REMOVED, _ref4 => {
-    let {
-      source,
-      measurement: removedMeasurementId
-    } = _ref4;
+  measurementService.subscribe(MEASUREMENT_REMOVED, ({
+    source,
+    measurement: removedMeasurementId
+  }) => {
     if (source?.name && source.name !== CORNERSTONE_3D_TOOLS_SOURCE_NAME) {
       return;
     }
@@ -2826,7 +2880,7 @@ function getInterleavedFrames(imageIds) {
   return imageIdsToPrefetch;
 }
 // EXTERNAL MODULE: ../../../node_modules/lodash/lodash.js
-var lodash = __webpack_require__(44379);
+var lodash = __webpack_require__(5517);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/interleaveCenterLoader.ts
 
 
@@ -2844,15 +2898,14 @@ const viewportIdVolumeInputArrayMap = new Map();
  * @param {Object} props image loading properties from Cornerstone ViewportService
  * @returns
  */
-function interleaveCenterLoader(_ref) {
-  let {
-    data: {
-      viewportId,
-      volumeInputArray
-    },
-    displaySetsMatchDetails,
-    viewportMatchDetails: matchDetails
-  } = _ref;
+function interleaveCenterLoader({
+  data: {
+    viewportId,
+    volumeInputArray
+  },
+  displaySetsMatchDetails,
+  viewportMatchDetails: matchDetails
+}) {
   viewportIdVolumeInputArrayMap.set(viewportId, volumeInputArray);
 
   // Based on the volumeInputs store the volumeIds and SeriesInstanceIds
@@ -2921,10 +2974,9 @@ function interleaveCenterLoader(_ref) {
       return request.imageId;
     });
     const imageIds = getInterleavedFrames(requestImageIds);
-    const reOrderedRequests = imageIds.map(_ref2 => {
-      let {
-        imageId
-      } = _ref2;
+    const reOrderedRequests = imageIds.map(({
+      imageId
+    }) => {
       const request = requests.find(req => req.imageId === imageId);
       return request;
     });
@@ -2950,14 +3002,13 @@ function interleaveCenterLoader(_ref) {
   });
   const requestType = esm.Enums.RequestType.Prefetch;
   const priority = 0;
-  finalRequests.forEach(_ref3 => {
-    let {
-      callLoadImage,
-      additionalDetails,
-      imageId,
-      imageIdIndex,
-      options
-    } = _ref3;
+  finalRequests.forEach(({
+    callLoadImage,
+    additionalDetails,
+    imageId,
+    imageIdIndex,
+    options
+  }) => {
     const callLoadImageBound = callLoadImage.bind(null, imageId, imageIdIndex, options);
     esm.imageLoadPoolManager.addRequest(callLoadImageBound, requestType, additionalDetails, priority);
   });
@@ -3055,14 +3106,13 @@ const nthLoader_viewportIdVolumeInputArrayMap = new Map();
  * visually much better.
  * @param {Object} props image loading properties from Cornerstone ViewportService
  */
-function interleaveNthLoader(_ref) {
-  let {
-    data: {
-      viewportId,
-      volumeInputArray
-    },
-    displaySetsMatchDetails
-  } = _ref;
+function interleaveNthLoader({
+  data: {
+    viewportId,
+    volumeInputArray
+  },
+  displaySetsMatchDetails
+}) {
   nthLoader_viewportIdVolumeInputArrayMap.set(viewportId, volumeInputArray);
 
   // Based on the volumeInputs store the volumeIds and SeriesInstanceIds
@@ -3100,14 +3150,13 @@ function interleaveNthLoader(_ref) {
   const finalRequests = interleave(orderedRequests);
   const requestType = esm.Enums.RequestType.Prefetch;
   const priority = 0;
-  finalRequests.forEach(_ref2 => {
-    let {
-      callLoadImage,
-      additionalDetails,
-      imageId,
-      imageIdIndex,
-      options
-    } = _ref2;
+  finalRequests.forEach(({
+    callLoadImage,
+    additionalDetails,
+    imageId,
+    imageIdIndex,
+    options
+  }) => {
     const callLoadImageBound = callLoadImage.bind(null, imageId, imageIdIndex, options);
     esm.imageLoadPoolManager.addRequest(callLoadImageBound, requestType, additionalDetails, priority);
   });
@@ -3138,15 +3187,14 @@ const interleaveTopToBottom_viewportIdVolumeInputArrayMap = new Map();
  * @param {Object} {viewportData, displaySetMatchDetails}
  * @returns
  */
-function interleaveTopToBottom(_ref) {
-  let {
-    data: {
-      viewportId,
-      volumeInputArray
-    },
-    displaySetsMatchDetails,
-    viewportMatchDetails: matchDetails
-  } = _ref;
+function interleaveTopToBottom({
+  data: {
+    viewportId,
+    volumeInputArray
+  },
+  displaySetsMatchDetails,
+  viewportMatchDetails: matchDetails
+}) {
   interleaveTopToBottom_viewportIdVolumeInputArrayMap.set(viewportId, volumeInputArray);
 
   // Based on the volumeInputs store the volumeIds and SeriesInstanceIds
@@ -3235,14 +3283,13 @@ function interleaveTopToBottom(_ref) {
   });
   const requestType = esm.Enums.RequestType.Prefetch;
   const priority = 0;
-  finalRequests.forEach(_ref2 => {
-    let {
-      callLoadImage,
-      additionalDetails,
-      imageId,
-      imageIdIndex,
-      options
-    } = _ref2;
+  finalRequests.forEach(({
+    callLoadImage,
+    additionalDetails,
+    imageId,
+    imageIdIndex,
+    options
+  }) => {
     const callLoadImageBound = callLoadImage.bind(null, imageId, imageIdIndex, options);
     esm.imageLoadPoolManager.addRequest(callLoadImageBound, requestType, additionalDetails, priority);
   });
@@ -3324,12 +3371,11 @@ function getEventName(evt) {
   nameArr.push(button);
   return nameArr.join('');
 }
-function initContextMenu(_ref) {
-  let {
-    cornerstoneViewportService,
-    customizationService,
-    commandsManager
-  } = _ref;
+function initContextMenu({
+  cornerstoneViewportService,
+  customizationService,
+  commandsManager
+}) {
   /*
    * Run the commands associated with the given button press,
    * defaults on button1 and button2
@@ -3367,7 +3413,7 @@ function initContextMenu(_ref) {
       return;
     }
     // TODO check update upstream
-    (0,state/* setEnabledElement */.Yc)(viewportId, element);
+    (0,state/* setEnabledElement */.ye)(viewportId, element);
     element.addEventListener(cs3DToolsEvents.MOUSE_CLICK, cornerstoneViewportHandleClick);
   }
   function elementDisabledHandler(evt) {
@@ -3413,11 +3459,10 @@ function getDoubleClickEventName(evt) {
   nameArr.push('doubleClick');
   return nameArr.join('');
 }
-function initDoubleClick(_ref) {
-  let {
-    customizationService,
-    commandsManager
-  } = _ref;
+function initDoubleClick({
+  customizationService,
+  commandsManager
+}) {
   const cornerstoneViewportHandleDoubleClick = evt => {
     // Do not allow double click on a tool.
     const nearbyToolData = findNearbyToolData(commandsManager, evt);
@@ -3453,10 +3498,7 @@ function initDoubleClick(_ref) {
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/initViewTiming.ts
 
 
-const {
-  TimingEnum
-} = src.Types;
-const IMAGE_TIMING_KEYS = [TimingEnum.DISPLAY_SETS_TO_ALL_IMAGES, TimingEnum.DISPLAY_SETS_TO_FIRST_IMAGE, TimingEnum.STUDY_TO_FIRST_IMAGE];
+const IMAGE_TIMING_KEYS = [];
 const imageTiming = {
   viewportsWaiting: 0
 };
@@ -3470,11 +3512,18 @@ const imageTiming = {
  *
  */
 
-function initViewTiming(_ref) {
-  let {
-    element
-  } = _ref;
-  if (!IMAGE_TIMING_KEYS.find(key => src/* log */.cM.timingKeys[key])) {
+function initViewTiming({
+  element
+}) {
+  if (!IMAGE_TIMING_KEYS.length) {
+    // Work around a bug in WebPack that doesn't getting the enums initialized
+    // quite fast enough to be declared statically.
+    const {
+      TimingEnum
+    } = 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])) {
     return;
   }
   imageTiming.viewportsWaiting += 1;
@@ -3484,13 +3533,16 @@ function imageRenderedListener(evt) {
   if (evt.detail.viewportStatus === 'preRender') {
     return;
   }
-  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);
+  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);
   imageTiming.viewportsWaiting -= 1;
   evt.detail.element.removeEventListener(esm.EVENTS.IMAGE_RENDERED, imageRenderedListener);
   if (!imageTiming.viewportsWaiting) {
-    src/* log */.cM.timeEnd(TimingEnum.DISPLAY_SETS_TO_ALL_IMAGES);
+    src/* log */.Rm.timeEnd(TimingEnum.DISPLAY_SETS_TO_ALL_IMAGES);
   }
 }
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/init.tsx
@@ -3518,14 +3570,13 @@ window.cornerstoneTools = dist_esm;
 /**
  *
  */
-async function init(_ref) {
-  let {
-    servicesManager,
-    commandsManager,
-    extensionManager,
-    configuration,
-    appConfig
-  } = _ref;
+async function init({
+  servicesManager,
+  commandsManager,
+  extensionManager,
+  configuration,
+  appConfig
+}) {
   // Note: this should run first before initializing the cornerstone
   // DO NOT CHANGE THE ORDER
   const value = appConfig.useSharedArrayBuffer;
@@ -3540,8 +3591,8 @@ async function init(_ref) {
   }
   await (0,esm.init)({
     rendering: {
-      preferSizeOverAccuracy: Boolean(appConfig.use16BitDataType),
-      useNorm16Texture: Boolean(appConfig.use16BitDataType)
+      preferSizeOverAccuracy: Boolean(appConfig.preferSizeOverAccuracy),
+      useNorm16Texture: Boolean(appConfig.useNorm16Texture)
     }
   });
 
@@ -3575,7 +3626,8 @@ async function init(_ref) {
     toolGroupService,
     toolbarService,
     viewportGridService,
-    stateSyncService
+    stateSyncService,
+    syncGroupService
   } = servicesManager.services;
   window.services = servicesManager.services;
   window.extensionManager = extensionManager;
@@ -3597,6 +3649,11 @@ async function init(_ref) {
     clearOnModeExit: true
   });
 
+  // Stores synchronizers state to be restored
+  stateSyncService.register('synchronizersStore', {
+    clearOnModeExit: true
+  });
+
   // Stores a map from `positionPresentationId` to a Presentation object so that
   // an OHIFCornerstoneViewport can be redisplayed with the same position
   stateSyncService.register('positionPresentationStore', {
@@ -3615,8 +3672,8 @@ async function init(_ref) {
     outlineOpacity: 1,
     outlineOpacityInactive: 0.65
   });
-  const metadataProvider = src["default"].classes.MetadataProvider;
-  esm.volumeLoader.registerVolumeLoader('cornerstoneStreamingImageVolume', streaming_image_volume_loader_dist_esm/* cornerstoneStreamingImageVolumeLoader */.IU);
+  const metadataProvider = src/* default.classes */.Ay.classes.MetadataProvider;
+  esm.volumeLoader.registerVolumeLoader('cornerstoneStreamingImageVolume', streaming_image_volume_loader_dist_esm/* cornerstoneStreamingImageVolumeLoader */.FC);
   hangingProtocolService.registerImageLoadStrategy('interleaveCenter', interleaveCenterLoader);
   hangingProtocolService.registerImageLoadStrategy('interleaveTopToBottom', interleaveTopToBottom);
   hangingProtocolService.registerImageLoadStrategy('nth', interleaveNthLoader);
@@ -3655,6 +3712,16 @@ async function init(_ref) {
       cornerstoneViewportService.setVolumesForViewport(viewport, volumeInputArray, presentations);
     }
   });
+
+  // resize the cornerstone viewport service when the grid size changes
+  // IMPORTANT: this should happen outside of the OHIFCornerstoneViewport
+  // since it will trigger a rerender of each viewport and each resizing
+  // the offscreen canvas which would result in a performance hit, this should
+  // done only once per grid resize here. Doing it once here, allows us to reduce
+  // the refreshRage(in ms) to 10 from 50. I tried with even 1 or 5 ms it worked fine
+  viewportGridService.subscribe(viewportGridService.EVENTS.GRID_SIZE_CHANGED, () => {
+    cornerstoneViewportService.resize(true);
+  });
   src_initContextMenu({
     cornerstoneViewportService,
     customizationService,
@@ -3710,6 +3777,17 @@ async function init(_ref) {
       });
     });
   };
+
+  /**
+   * Runs error handler for failed requests.
+   * @param event
+   */
+  const imageLoadFailedHandler = ({
+    detail
+  }) => {
+    const handler = src/* errorHandler */.r_.getHTTPErrorHandler();
+    handler(detail.error);
+  };
   const resetCrosshairs = evt => {
     const {
       element
@@ -3737,6 +3815,8 @@ async function init(_ref) {
     } = evt.detail;
     dist_esm.utilities.stackContextPrefetch.enable(element);
   });
+  esm.eventTarget.addEventListener(esm.EVENTS.IMAGE_LOAD_FAILED, imageLoadFailedHandler);
+  esm.eventTarget.addEventListener(esm.EVENTS.IMAGE_LOAD_ERROR, imageLoadFailedHandler);
   function elementEnabledHandler(evt) {
     const {
       element
@@ -3760,7 +3840,6 @@ async function init(_ref) {
     //   newStackCallback
     // );
   }
-
   esm.eventTarget.addEventListener(esm.EVENTS.ELEMENT_ENABLED, elementEnabledHandler.bind(null));
   esm.eventTarget.addEventListener(esm.EVENTS.ELEMENT_DISABLED, elementDisabledHandler.bind(null));
   viewportGridService.subscribe(viewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED, activeViewportEventListener);
@@ -3788,12 +3867,12 @@ function _showCPURenderingModal(uiModalService, hangingProtocolService) {
   });
 }
 // EXTERNAL MODULE: ../../../node_modules/react-dropzone/dist/es/index.js + 5 modules
-var es = __webpack_require__(74834);
+var es = __webpack_require__(5013);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
-var prop_types = __webpack_require__(3827);
+var prop_types = __webpack_require__(11374);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
 // EXTERNAL MODULE: ../../../node_modules/classnames/index.js
-var classnames = __webpack_require__(44921);
+var classnames = __webpack_require__(61466);
 var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/DicomFileUploader.ts
 
@@ -3817,7 +3896,7 @@ class UploadRejection {
     this.status = status;
   }
 }
-class DicomFileUploader extends src/* PubSubService */.hC {
+class DicomFileUploader extends src/* PubSubService */.Rc {
   constructor(file, dataSource) {
     super(EVENTS);
     this._file = void 0;
@@ -3956,10 +4035,9 @@ class DicomFileUploader extends src/* PubSubService */.hC {
 
 
 // eslint-disable-next-line react/display-name
-const DicomUploadProgressItem = /*#__PURE__*/(0,react.memo)(_ref => {
-  let {
-    dicomFileUploader
-  } = _ref;
+const DicomUploadProgressItem = /*#__PURE__*/(0,react.memo)(({
+  dicomFileUploader
+}) => {
   const [percentComplete, setPercentComplete] = (0,react.useState)(dicomFileUploader.getPercentComplete());
   const [failedReason, setFailedReason] = (0,react.useState)('');
   const [status, setStatus] = (0,react.useState)(dicomFileUploader.getStatus());
@@ -3982,20 +4060,20 @@ const DicomUploadProgressItem = /*#__PURE__*/(0,react.memo)(_ref => {
   const getStatusIcon = () => {
     switch (dicomFileUploader.getStatus()) {
       case UploadStatus.Success:
-        return /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+        return /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
           name: "status-tracked",
           className: "text-primary-light"
         });
       case UploadStatus.InProgress:
-        return /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+        return /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
           name: "icon-transferring"
         });
       case UploadStatus.Failed:
-        return /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+        return /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
           name: "icon-alert-small"
         });
       case UploadStatus.Cancelled:
-        return /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+        return /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
           name: "icon-alert-outline"
         });
       default:
@@ -4020,7 +4098,7 @@ const DicomUploadProgressItem = /*#__PURE__*/(0,react.memo)(_ref => {
     className: "w-10 text-right"
   }, percentComplete, "%"), /*#__PURE__*/react.createElement("div", {
     className: "ml-auto flex cursor-pointer"
-  }, /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+  }, /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
     className: "text-primary-active self-center",
     name: "close",
     onClick: cancelUpload
@@ -4055,11 +4133,10 @@ const BASE_INTERVAL_TIME = 15000;
 // calculate the upload rate.
 const UPLOAD_RATE_THRESHOLD = 75;
 const NO_WRAP_ELLIPSIS_CLASS_NAMES = 'text-ellipsis whitespace-nowrap overflow-hidden';
-function DicomUploadProgress(_ref) {
-  let {
-    dicomFileUploaderArr,
-    onComplete
-  } = _ref;
+function DicomUploadProgress({
+  dicomFileUploaderArr,
+  onComplete
+}) {
   const [totalUploadSize] = (0,react.useState)(dicomFileUploaderArr.reduce((acc, fileUploader) => acc + fileUploader.getFileSize(), 0));
   const currentUploadSizeRef = (0,react.useRef)(0);
   const uploadRateRef = (0,react.useRef)(0);
@@ -4251,7 +4328,7 @@ function DicomUploadProgress(_ref) {
       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 */.zx, {
+    }, `${dicomFileUploaderArr.length} ${dicomFileUploaderArr.length > 1 ? 'files' : 'file'} completed.`), /*#__PURE__*/react.createElement(ui_src/* Button */.$n, {
       disabled: false,
       className: "ml-auto",
       onClick: onComplete
@@ -4272,7 +4349,7 @@ function DicomUploadProgress(_ref) {
       className: "ml-auto flex w-6 justify-center"
     }, numFails > 0 && /*#__PURE__*/react.createElement("div", {
       onClick: () => setShowFailedOnly(currentShowFailedOnly => !currentShowFailedOnly)
-    }, /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+    }, /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
       className: "cursor-pointer",
       name: "icon-status-alert"
     })));
@@ -4287,7 +4364,7 @@ function DicomUploadProgress(_ref) {
     }, 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 */.YE, {
+    }, /*#__PURE__*/react.createElement(ui_src/* ProgressLoadingBar */.dD, {
       progress: showInfiniteProgressBar() ? undefined : Math.min(100, percentComplete)
     })), /*#__PURE__*/react.createElement("div", {
       className: "ml-1 flex w-24 items-center"
@@ -4324,12 +4401,11 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 
-function DicomUpload(_ref) {
-  let {
-    dataSource,
-    onComplete,
-    onStarted
-  } = _ref;
+function DicomUpload({
+  dataSource,
+  onComplete,
+  onStarted
+}) {
   const baseClassNames = 'min-h-[480px] flex flex-col bg-black select-none';
   const [dicomFileUploaderArr, setDicomFileUploaderArr] = (0,react.useState)([]);
   const onDrop = (0,react.useCallback)(async acceptedFiles => {
@@ -4337,53 +4413,44 @@ function DicomUpload(_ref) {
     setDicomFileUploaderArr(acceptedFiles.map(file => new DicomFileUploader(file, dataSource)));
   }, []);
   const getDropZoneComponent = () => {
-    return /*#__PURE__*/react.createElement(es/* default */.Z, {
+    return /*#__PURE__*/react.createElement(es/* default */.A, {
       onDrop: acceptedFiles => {
         onDrop(acceptedFiles);
       },
       noClick: true
-    }, _ref2 => {
-      let {
-        getRootProps
-      } = _ref2;
-      return /*#__PURE__*/react.createElement("div", _extends({}, getRootProps(), {
-        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 */.Z, {
-        onDrop: onDrop,
-        noDrag: true
-      }, _ref3 => {
-        let {
-          getRootProps,
-          getInputProps
-        } = _ref3;
-        return /*#__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 */.Z, {
-        onDrop: onDrop,
-        noDrag: true
-      }, _ref4 => {
-        let {
-          getRootProps,
-          getInputProps
-        } = _ref4;
-        return /*#__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(), {
-          webkitdirectory: "true",
-          mozdirectory: "true"
-        }))));
-      })), /*#__PURE__*/react.createElement("div", {
-        className: "pt-5"
-      }, "or drag images or folders here"), /*#__PURE__*/react.createElement("div", {
-        className: "text-aqua-pale pt-3 text-lg"
-      }, "(DICOM files supported)"));
-    });
+    }, ({
+      getRootProps
+    }) => /*#__PURE__*/react.createElement("div", _extends({}, getRootProps(), {
+      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, {
+      onDrop: onDrop,
+      noDrag: true
+    }, ({
+      getRootProps,
+      getInputProps
+    }) => /*#__PURE__*/react.createElement("div", getRootProps(), /*#__PURE__*/react.createElement(ui_src/* Button */.$n, {
+      disabled: false,
+      onClick: () => {}
+    }, 'Add files', /*#__PURE__*/react.createElement("input", getInputProps())))), /*#__PURE__*/react.createElement(es/* default */.A, {
+      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,
+      disabled: false,
+      onClick: () => {}
+    }, 'Add folder', /*#__PURE__*/react.createElement("input", _extends({}, getInputProps(), {
+      webkitdirectory: "true",
+      mozdirectory: "true"
+    })))))), /*#__PURE__*/react.createElement("div", {
+      className: "pt-5"
+    }, "or drag images or folders here"), /*#__PURE__*/react.createElement("div", {
+      className: "text-aqua-pale pt-3 text-lg"
+    }, "(DICOM files supported)")));
   };
   return /*#__PURE__*/react.createElement(react.Fragment, null, dicomFileUploaderArr.length ? /*#__PURE__*/react.createElement("div", {
     className: classnames_default()('h-[calc(100vh-300px)]', baseClassNames)
@@ -4444,8 +4511,10 @@ function getCustomizationModule() {
   }];
 }
 /* harmony default export */ const src_getCustomizationModule = (getCustomizationModule);
+// EXTERNAL MODULE: ../../../node_modules/gl-matrix/esm/index.js + 10 modules
+var gl_matrix_esm = __webpack_require__(83636);
 // EXTERNAL MODULE: ../../../node_modules/html2canvas/dist/html2canvas.esm.js
-var html2canvas_esm = __webpack_require__(76010);
+var html2canvas_esm = __webpack_require__(90445);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/CornerstoneViewportDownloadForm.tsx
 
 
@@ -4458,13 +4527,12 @@ const MINIMUM_SIZE = 100;
 const DEFAULT_SIZE = 512;
 const MAX_TEXTURE_SIZE = 10000;
 const VIEWPORT_ID = 'cornerstone-viewport-download-form';
-const CornerstoneViewportDownloadForm = _ref => {
-  let {
-    onClose,
-    activeViewportId: activeViewportIdProp,
-    cornerstoneViewportService
-  } = _ref;
-  const enabledElement = (0,state/* getEnabledElement */.K8)(activeViewportIdProp);
+const CornerstoneViewportDownloadForm = ({
+  onClose,
+  activeViewportId: activeViewportIdProp,
+  cornerstoneViewportService
+}) => {
+  const enabledElement = (0,state/* getEnabledElement */.kJ)(activeViewportIdProp);
   const activeViewportElement = enabledElement?.element;
   const activeViewportEnabledElement = (0,esm.getEnabledElement)(activeViewportElement);
   const {
@@ -4541,6 +4609,7 @@ const CornerstoneViewportDownloadForm = _ref => {
     renderingEngine.resize();
 
     // Trigger the render on the viewport to update the on screen
+    downloadViewport.resetCamera();
     downloadViewport.render();
     downloadViewportElement.addEventListener(esm.Enums.Events.IMAGE_RENDERED, function updateViewport(event) {
       const enabledElement = (0,esm.getEnabledElement)(event.target);
@@ -4647,19 +4716,18 @@ const CornerstoneViewportDownloadForm = _ref => {
   const downloadBlob = (filename, fileType) => {
     const file = `${filename}.${fileType}`;
     const divForDownloadViewport = document.querySelector(`div[data-viewport-uid="${VIEWPORT_ID}"]`);
-    (0,html2canvas_esm/* default */.Z)(divForDownloadViewport).then(canvas => {
+    (0,html2canvas_esm/* default */.A)(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 */.mQ, {
+  return /*#__PURE__*/react.createElement(ui_src/* ViewportDownloadForm */.VS, {
     onClose: onClose,
     minimumSize: MINIMUM_SIZE,
     maximumSize: MAX_TEXTURE_SIZE,
     defaultSize: DEFAULT_SIZE,
-    canvasClass: 'cornerstone-canvas',
     activeViewportElement: activeViewportElement,
     enableViewport: enableViewport,
     disableViewport: disableViewport,
@@ -4674,16 +4742,15 @@ CornerstoneViewportDownloadForm.propTypes = {
   activeViewportId: (prop_types_default()).string.isRequired
 };
 /* harmony default export */ const utils_CornerstoneViewportDownloadForm = (CornerstoneViewportDownloadForm);
-;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/stackSync/toggleStackImageSync.ts
-const STACK_SYNC_NAME = 'stackImageSync';
-function toggleStackImageSync(_ref) {
-  let {
-    toggledState,
-    servicesManager,
-    viewports: providedViewports
-  } = _ref;
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/imageSliceSync/toggleImageSliceSync.ts
+const IMAGE_SLICE_SYNC_NAME = 'IMAGE_SLICE_SYNC';
+function toggleImageSliceSync({
+  toggledState,
+  servicesManager,
+  viewports: providedViewports
+}) {
   if (!toggledState) {
-    return disableSync(STACK_SYNC_NAME, servicesManager);
+    return disableSync(IMAGE_SLICE_SYNC_NAME, servicesManager);
   }
   const {
     syncGroupService,
@@ -4704,7 +4771,7 @@ function toggleStackImageSync(_ref) {
     }
     syncGroupService.addViewportToSyncGroup(viewportId, viewport.getRenderingEngine().id, {
       type: 'stackimage',
-      id: STACK_SYNC_NAME,
+      id: IMAGE_SLICE_SYNC_NAME,
       source: true,
       target: true
     });
@@ -4767,11 +4834,11 @@ function getReconstructableStackViewports(viewportGridService, displaySetService
 
 
 
-function commandsModule(_ref) {
-  let {
-    servicesManager,
-    commandsManager
-  } = _ref;
+
+function commandsModule({
+  servicesManager,
+  commandsManager
+}) {
   const {
     viewportGridService,
     toolGroupService,
@@ -4835,19 +4902,17 @@ function commandsModule(_ref) {
       };
       commandsManager.run(options, optionsToUse);
     },
-    getNearbyToolData(_ref2) {
-      let {
-        nearbyToolData,
-        element,
-        canvasCoordinates
-      } = _ref2;
+    getNearbyToolData({
+      nearbyToolData,
+      element,
+      canvasCoordinates
+    }) {
       return nearbyToolData ?? dist_esm.utilities.getAnnotationNearPoint(element, canvasCoordinates);
     },
-    getNearbyAnnotation(_ref3) {
-      let {
-        element,
-        canvasCoordinates
-      } = _ref3;
+    getNearbyAnnotation({
+      element,
+      canvasCoordinates
+    }) {
       const nearbyToolData = actions.getNearbyToolData({
         nearbyToolData: null,
         element,
@@ -4871,10 +4936,9 @@ function commandsModule(_ref) {
     // Measurement tool commands:
 
     /** Delete the given measurement */
-    deleteMeasurement: _ref4 => {
-      let {
-        uid
-      } = _ref4;
+    deleteMeasurement: ({
+      uid
+    }) => {
       if (uid) {
         measurementServiceSource.remove(uid);
       }
@@ -4883,10 +4947,9 @@ function commandsModule(_ref) {
      * Show the measurement labelling input dialog and update the label
      * on the measurement with a response if not cancelled.
      */
-    setMeasurementLabel: _ref5 => {
-      let {
-        uid
-      } = _ref5;
+    setMeasurementLabel: ({
+      uid
+    }) => {
       const measurement = measurementService.getMeasurement(uid);
       utils_callInputDialog(uiDialogService, measurement, (label, actionId) => {
         if (actionId === 'cancel') {
@@ -4961,10 +5024,9 @@ function commandsModule(_ref) {
     },
     // Retrieve value commands
     getActiveViewportEnabledElement: _getActiveViewportEnabledElement,
-    setViewportActive: _ref6 => {
-      let {
-        viewportId
-      } = _ref6;
+    setViewportActive: ({
+      viewportId
+    }) => {
       const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
       if (!viewportInfo) {
         console.warn('No viewport found for viewportId:', viewportId);
@@ -4972,11 +5034,10 @@ function commandsModule(_ref) {
       }
       viewportGridService.setActiveViewportId(viewportId);
     },
-    arrowTextCallback: _ref7 => {
-      let {
-        callback,
-        data
-      } = _ref7;
+    arrowTextCallback: ({
+      callback,
+      data
+    }) => {
       utils_callInputDialog(uiDialogService, data, callback);
     },
     cleanUpCrosshairs: () => {
@@ -5013,12 +5074,11 @@ function commandsModule(_ref) {
         isPlaying: false
       }));
     },
-    setWindowLevel(_ref8) {
-      let {
-        window,
-        level,
-        toolGroupId
-      } = _ref8;
+    setWindowLevel({
+      window,
+      level,
+      toolGroupId
+    }) {
       // convert to numbers
       const windowWidthNum = Number(window);
       const windowCenterNum = Number(level);
@@ -5056,12 +5116,11 @@ function commandsModule(_ref) {
     setToolbarToggled: props => {
       toolbarService.setToggled(props.toolId, props.isActive ?? true);
     },
-    setToolActive: _ref9 => {
-      let {
-        toolName,
-        toolGroupId = null,
-        toggledState
-      } = _ref9;
+    setToolActive: ({
+      toolName,
+      toolGroupId = null,
+      toggledState
+    }) => {
       if (toolName === 'Crosshairs') {
         const activeViewportToolGroup = toolGroupService.getToolGroup(null);
         if (!activeViewportToolGroup._toolInstances.Crosshairs) {
@@ -5146,10 +5205,9 @@ function commandsModule(_ref) {
         });
       }
     },
-    rotateViewport: _ref10 => {
-      let {
-        rotation
-      } = _ref10;
+    rotateViewport: ({
+      rotation
+    }) => {
       const enabledElement = _getActiveViewportEnabledElement();
       if (!enabledElement) {
         return;
@@ -5157,10 +5215,18 @@ function commandsModule(_ref) {
       const {
         viewport
       } = enabledElement;
-      if (viewport instanceof esm.StackViewport) {
-        const {
-          rotation: currentRotation
-        } = viewport.getProperties();
+      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);
+        viewport.setCamera({
+          viewUp: rotatedViewUp
+        });
+        viewport.render();
+      } else if (viewport.getRotation !== undefined) {
+        const currentRotation = viewport.getRotation();
         const newRotation = (currentRotation + rotation) % 360;
         viewport.setProperties({
           rotation: newRotation
@@ -5204,10 +5270,9 @@ function commandsModule(_ref) {
         viewport.render();
       }
     },
-    invertViewport: _ref11 => {
-      let {
-        element
-      } = _ref11;
+    invertViewport: ({
+      element
+    }) => {
       let enabledElement;
       if (element === undefined) {
         enabledElement = _getActiveViewportEnabledElement();
@@ -5240,10 +5305,9 @@ function commandsModule(_ref) {
       viewport.resetCamera();
       viewport.render();
     },
-    scaleViewport: _ref12 => {
-      let {
-        direction
-      } = _ref12;
+    scaleViewport: ({
+      direction
+    }) => {
       const enabledElement = _getActiveViewportEnabledElement();
       const scaleFactor = direction > 0 ? 0.9 : 1.1;
       if (!enabledElement) {
@@ -5268,11 +5332,10 @@ function commandsModule(_ref) {
       }
     },
     /** Jumps the active viewport or the specified one to the given slice index */
-    jumpToImage: _ref13 => {
-      let {
-        imageIndex,
-        viewport: gridViewport
-      } = _ref13;
+    jumpToImage: ({
+      imageIndex,
+      viewport: gridViewport
+    }) => {
       // Get current active viewport (return if none active)
       let viewport;
       if (!gridViewport) {
@@ -5306,10 +5369,9 @@ function commandsModule(_ref) {
       };
       dist_esm.utilities.jumpToSlice(viewport.element, options);
     },
-    scroll: _ref14 => {
-      let {
-        direction
-      } = _ref14;
+    scroll: ({
+      direction
+    }) => {
       const enabledElement = _getActiveViewportEnabledElement();
       if (!enabledElement) {
         return;
@@ -5322,13 +5384,12 @@ function commandsModule(_ref) {
       };
       dist_esm.utilities.scroll(viewport, options);
     },
-    setViewportColormap: _ref15 => {
-      let {
-        viewportId,
-        displaySetInstanceUID,
-        colormap,
-        immediate = false
-      } = _ref15;
+    setViewportColormap: ({
+      viewportId,
+      displaySetInstanceUID,
+      colormap,
+      immediate = false
+    }) => {
       const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
       const actorEntries = viewport.getActors();
       const actorEntry = actorEntries.find(actorEntry => {
@@ -5346,10 +5407,9 @@ function commandsModule(_ref) {
         viewport.render();
       }
     },
-    changeActiveViewport: _ref16 => {
-      let {
-        direction = 1
-      } = _ref16;
+    changeActiveViewport: ({
+      direction = 1
+    }) => {
       const {
         activeViewportId,
         viewports
@@ -5359,20 +5419,18 @@ function commandsModule(_ref) {
       const nextViewportIndex = (currentIndex + direction + viewportIds.length) % viewportIds.length;
       viewportGridService.setActiveViewportId(viewportIds[nextViewportIndex]);
     },
-    toggleStackImageSync: _ref17 => {
-      let {
-        toggledState
-      } = _ref17;
-      toggleStackImageSync({
+    toggleImageSliceSync: ({
+      toggledState
+    }) => {
+      toggleImageSliceSync({
         servicesManager,
         toggledState
       });
     },
-    setSourceViewportForReferenceLinesTool: _ref18 => {
-      let {
-        toggledState,
-        viewportId
-      } = _ref18;
+    setSourceViewportForReferenceLinesTool: ({
+      toggledState,
+      viewportId
+    }) => {
       if (!viewportId) {
         const {
           activeViewportId
@@ -5385,14 +5443,32 @@ function commandsModule(_ref) {
       }, true // overwrite
       );
     },
-
-    storePresentation: _ref19 => {
-      let {
-        viewportId
-      } = _ref19;
+    storePresentation: ({
+      viewportId
+    }) => {
       cornerstoneViewportService.storePresentation({
         viewportId
       });
+    },
+    attachProtocolViewportDataListener: ({
+      protocol,
+      stageIndex
+    }) => {
+      const EVENT = cornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED;
+      const command = protocol.callbacks.onViewportDataInitialized;
+      const numPanes = protocol.stages?.[stageIndex]?.viewports.length ?? 1;
+      let numPanesWithData = 0;
+      const {
+        unsubscribe
+      } = cornerstoneViewportService.subscribe(EVENT, evt => {
+        numPanesWithData++;
+        if (numPanesWithData === numPanes) {
+          commandsManager.run(...command);
+
+          // Unsubscribe from the event
+          unsubscribe(EVENT);
+        }
+      });
     }
   };
   const definitions = {
@@ -5527,8 +5603,8 @@ function commandsModule(_ref) {
     setViewportColormap: {
       commandFn: actions.setViewportColormap
     },
-    toggleStackImageSync: {
-      commandFn: actions.toggleStackImageSync
+    toggleImageSliceSync: {
+      commandFn: actions.toggleImageSliceSync
     },
     setSourceViewportForReferenceLinesTool: {
       commandFn: actions.setSourceViewportForReferenceLinesTool
@@ -5541,6 +5617,9 @@ function commandsModule(_ref) {
     },
     cleanUpCrosshairs: {
       commandFn: actions.cleanUpCrosshairs
+    },
+    attachProtocolViewportDataListener: {
+      commandFn: actions.attachProtocolViewportDataListener
     }
   };
   return {
@@ -5550,35 +5629,19 @@ function commandsModule(_ref) {
   };
 }
 /* harmony default export */ const src_commandsModule = (commandsModule);
-;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/getHangingProtocolModule.ts
-const mpr = {
-  id: 'mpr',
-  name: 'Multi-Planar Reconstruction',
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/hps/fourUp.ts
+const fourUp = {
+  id: 'fourUp',
   locked: true,
-  createdDate: '2021-02-23',
-  modifiedDate: '2023-08-15',
+  name: 'fourUp',
+  createdDate: '2023-03-15T10:29:44.894Z',
+  modifiedDate: '2023-03-15T10:29:44.894Z',
   availableTo: {},
   editableBy: {},
-  // Unknown number of priors referenced - so just match any study
-  numberOfPriorsReferenced: 0,
   protocolMatchingRules: [],
-  imageLoadStrategy: 'nth',
-  callbacks: {
-    // Switches out of MPR mode when the layout change button is used
-    onLayoutChange: [{
-      commandName: 'toggleHangingProtocol',
-      commandOptions: {
-        protocolId: 'mpr'
-      },
-      context: 'DEFAULT'
-    }],
-    // Turns off crosshairs when switching out of MPR mode
-    onProtocolExit: [{
-      commandName: 'cleanUpCrosshairs'
-    }]
-  },
+  imageLoadStrategy: 'interleaveCenter',
   displaySetSelectors: {
-    activeDisplaySet: {
+    mprDisplaySet: {
       seriesMatchingRules: [{
         weight: 1,
         attribute: 'isReconstructable',
@@ -5592,33 +5655,17 @@ const mpr = {
     }
   },
   stages: [{
-    name: 'MPR 1x3',
+    id: 'fourUpStage',
+    name: 'fourUp',
     viewportStructure: {
       layoutType: 'grid',
       properties: {
-        rows: 1,
-        columns: 3,
-        layoutOptions: [{
-          x: 0,
-          y: 0,
-          width: 1 / 3,
-          height: 1
-        }, {
-          x: 1 / 3,
-          y: 0,
-          width: 1 / 3,
-          height: 1
-        }, {
-          x: 2 / 3,
-          y: 0,
-          width: 1 / 3,
-          height: 1
-        }]
+        rows: 2,
+        columns: 2
       }
     },
     viewports: [{
       viewportOptions: {
-        viewportId: 'mpr-axial',
         toolGroupId: 'mpr',
         viewportType: 'volume',
         orientation: 'axial',
@@ -5633,14 +5680,29 @@ const mpr = {
         }]
       },
       displaySets: [{
-        id: 'activeDisplaySet'
+        id: 'mprDisplaySet'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'volume3d',
+        viewportType: 'volume3d',
+        orientation: 'coronal',
+        customViewportProps: {
+          hideOverlays: true
+        }
+      },
+      displaySets: [{
+        id: 'mprDisplaySet',
+        options: {
+          // ToDo: choose appropriate preset
+          displayPreset: 'CT-Bone'
+        }
       }]
     }, {
       viewportOptions: {
-        viewportId: 'mpr-sagittal',
         toolGroupId: 'mpr',
         viewportType: 'volume',
-        orientation: 'sagittal',
+        orientation: 'coronal',
         initialImageOptions: {
           preset: 'middle'
         },
@@ -5652,14 +5714,13 @@ const mpr = {
         }]
       },
       displaySets: [{
-        id: 'activeDisplaySet'
+        id: 'mprDisplaySet'
       }]
     }, {
       viewportOptions: {
-        viewportId: 'mpr-coronal',
         toolGroupId: 'mpr',
         viewportType: 'volume',
-        orientation: 'coronal',
+        orientation: 'sagittal',
         initialImageOptions: {
           preset: 'middle'
         },
@@ -5671,15 +5732,16 @@ const mpr = {
         }]
       },
       displaySets: [{
-        id: 'activeDisplaySet'
+        id: 'mprDisplaySet'
       }]
     }]
   }]
 };
-const mprAnd3DVolumeViewport = {
-  id: 'mprAnd3DVolumeViewport',
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/hps/main3D.ts
+const main3D = {
+  id: 'main3D',
   locked: true,
-  name: 'mpr',
+  name: 'main3D',
   createdDate: '2023-03-15T10:29:44.894Z',
   modifiedDate: '2023-03-15T10:29:44.894Z',
   availableTo: {},
@@ -5697,25 +5759,280 @@ const mprAnd3DVolumeViewport = {
           }
         },
         required: true
-      }, {
-        attribute: 'Modality',
-        constraint: {
-          equals: {
-            value: 'CT'
-          }
-        },
-        required: true
       }]
     }
   },
   stages: [{
-    id: 'mpr3Stage',
-    name: 'mpr',
+    id: 'main3DStage',
+    name: 'main3D',
     viewportStructure: {
       layoutType: 'grid',
       properties: {
         rows: 2,
-        columns: 2
+        columns: 3,
+        layoutOptions: [{
+          x: 0,
+          y: 0,
+          width: 1,
+          height: 1 / 2
+        }, {
+          x: 0,
+          y: 1 / 2,
+          width: 1 / 3,
+          height: 1 / 2
+        }, {
+          x: 1 / 3,
+          y: 1 / 2,
+          width: 1 / 3,
+          height: 1 / 2
+        }, {
+          x: 2 / 3,
+          y: 1 / 2,
+          width: 1 / 3,
+          height: 1 / 2
+        }]
+      }
+    },
+    viewports: [{
+      viewportOptions: {
+        toolGroupId: 'volume3d',
+        viewportType: 'volume3d',
+        orientation: 'coronal',
+        customViewportProps: {
+          hideOverlays: true
+        }
+      },
+      displaySets: [{
+        id: 'mprDisplaySet',
+        options: {
+          // ToDo: choose appropriate preset
+          displayPreset: 'CT-Bone'
+        }
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'mpr',
+        viewportType: 'volume',
+        orientation: 'axial',
+        initialImageOptions: {
+          preset: 'middle'
+        },
+        syncGroups: [{
+          type: 'voi',
+          id: 'mpr',
+          source: true,
+          target: true
+        }]
+      },
+      displaySets: [{
+        id: 'mprDisplaySet'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'mpr',
+        viewportType: 'volume',
+        orientation: 'coronal',
+        initialImageOptions: {
+          preset: 'middle'
+        },
+        syncGroups: [{
+          type: 'voi',
+          id: 'mpr',
+          source: true,
+          target: true
+        }]
+      },
+      displaySets: [{
+        id: 'mprDisplaySet'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'mpr',
+        viewportType: 'volume',
+        orientation: 'sagittal',
+        initialImageOptions: {
+          preset: 'middle'
+        },
+        syncGroups: [{
+          type: 'voi',
+          id: 'mpr',
+          source: true,
+          target: true
+        }]
+      },
+      displaySets: [{
+        id: 'mprDisplaySet'
+      }]
+    }]
+  }]
+};
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/hps/mpr.ts
+const mpr = {
+  id: 'mpr',
+  name: 'Multi-Planar Reconstruction',
+  locked: true,
+  createdDate: '2021-02-23',
+  modifiedDate: '2023-08-15',
+  availableTo: {},
+  editableBy: {},
+  // Unknown number of priors referenced - so just match any study
+  numberOfPriorsReferenced: 0,
+  protocolMatchingRules: [],
+  imageLoadStrategy: 'nth',
+  callbacks: {
+    // Switches out of MPR mode when the layout change button is used
+    onLayoutChange: [{
+      commandName: 'toggleHangingProtocol',
+      commandOptions: {
+        protocolId: 'mpr'
+      },
+      context: 'DEFAULT'
+    }],
+    // Turns off crosshairs when switching out of MPR mode
+    onProtocolExit: [{
+      commandName: 'cleanUpCrosshairs'
+    }]
+  },
+  displaySetSelectors: {
+    activeDisplaySet: {
+      seriesMatchingRules: [{
+        weight: 1,
+        attribute: 'isReconstructable',
+        constraint: {
+          equals: {
+            value: true
+          }
+        },
+        required: true
+      }]
+    }
+  },
+  stages: [{
+    name: 'MPR 1x3',
+    viewportStructure: {
+      layoutType: 'grid',
+      properties: {
+        rows: 1,
+        columns: 3,
+        layoutOptions: [{
+          x: 0,
+          y: 0,
+          width: 1 / 3,
+          height: 1
+        }, {
+          x: 1 / 3,
+          y: 0,
+          width: 1 / 3,
+          height: 1
+        }, {
+          x: 2 / 3,
+          y: 0,
+          width: 1 / 3,
+          height: 1
+        }]
+      }
+    },
+    viewports: [{
+      viewportOptions: {
+        viewportId: 'mpr-axial',
+        toolGroupId: 'mpr',
+        viewportType: 'volume',
+        orientation: 'axial',
+        initialImageOptions: {
+          preset: 'middle'
+        },
+        syncGroups: [{
+          type: 'voi',
+          id: 'mpr',
+          source: true,
+          target: true
+        }]
+      },
+      displaySets: [{
+        id: 'activeDisplaySet'
+      }]
+    }, {
+      viewportOptions: {
+        viewportId: 'mpr-sagittal',
+        toolGroupId: 'mpr',
+        viewportType: 'volume',
+        orientation: 'sagittal',
+        initialImageOptions: {
+          preset: 'middle'
+        },
+        syncGroups: [{
+          type: 'voi',
+          id: 'mpr',
+          source: true,
+          target: true
+        }]
+      },
+      displaySets: [{
+        id: 'activeDisplaySet'
+      }]
+    }, {
+      viewportOptions: {
+        viewportId: 'mpr-coronal',
+        toolGroupId: 'mpr',
+        viewportType: 'volume',
+        orientation: 'coronal',
+        initialImageOptions: {
+          preset: 'middle'
+        },
+        syncGroups: [{
+          type: 'voi',
+          id: 'mpr',
+          source: true,
+          target: true
+        }]
+      },
+      displaySets: [{
+        id: 'activeDisplaySet'
+      }]
+    }]
+  }]
+};
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/hps/mprAnd3DVolumeViewport.ts
+const mprAnd3DVolumeViewport = {
+  id: 'mprAnd3DVolumeViewport',
+  locked: true,
+  name: 'mpr',
+  createdDate: '2023-03-15T10:29:44.894Z',
+  modifiedDate: '2023-03-15T10:29:44.894Z',
+  availableTo: {},
+  editableBy: {},
+  protocolMatchingRules: [],
+  imageLoadStrategy: 'interleaveCenter',
+  displaySetSelectors: {
+    mprDisplaySet: {
+      seriesMatchingRules: [{
+        weight: 1,
+        attribute: 'isReconstructable',
+        constraint: {
+          equals: {
+            value: true
+          }
+        },
+        required: true
+      }, {
+        attribute: 'Modality',
+        constraint: {
+          equals: {
+            value: 'CT'
+          }
+        },
+        required: true
+      }]
+    }
+  },
+  stages: [{
+    id: 'mpr3Stage',
+    name: 'mpr',
+    viewportStructure: {
+      layoutType: 'grid',
+      properties: {
+        rows: 2,
+        columns: 2
       }
     },
     viewports: [{
@@ -5755,7 +6072,298 @@ const mprAnd3DVolumeViewport = {
       viewportOptions: {
         toolGroupId: 'mpr',
         viewportType: 'volume',
-        orientation: 'coronal',
+        orientation: 'coronal',
+        initialImageOptions: {
+          preset: 'middle'
+        },
+        syncGroups: [{
+          type: 'voi',
+          id: 'mpr',
+          source: true,
+          target: true
+        }]
+      },
+      displaySets: [{
+        id: 'mprDisplaySet'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'mpr',
+        viewportType: 'volume',
+        orientation: 'sagittal',
+        initialImageOptions: {
+          preset: 'middle'
+        },
+        syncGroups: [{
+          type: 'voi',
+          id: 'mpr',
+          source: true,
+          target: true
+        }]
+      },
+      displaySets: [{
+        id: 'mprDisplaySet'
+      }]
+    }]
+  }]
+};
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/hps/only3D.ts
+const only3D = {
+  id: 'only3D',
+  locked: true,
+  name: 'only3D',
+  createdDate: '2023-03-15T10:29:44.894Z',
+  modifiedDate: '2023-03-15T10:29:44.894Z',
+  availableTo: {},
+  editableBy: {},
+  protocolMatchingRules: [],
+  imageLoadStrategy: 'interleaveCenter',
+  displaySetSelectors: {
+    mprDisplaySet: {
+      seriesMatchingRules: [{
+        weight: 1,
+        attribute: 'isReconstructable',
+        constraint: {
+          equals: {
+            value: true
+          }
+        },
+        required: true
+      }]
+    }
+  },
+  stages: [{
+    id: 'only3DStage',
+    name: 'only3D',
+    viewportStructure: {
+      layoutType: 'grid',
+      properties: {
+        rows: 1,
+        columns: 1
+      }
+    },
+    viewports: [{
+      viewportOptions: {
+        toolGroupId: 'volume3d',
+        viewportType: 'volume3d',
+        orientation: 'coronal',
+        customViewportProps: {
+          hideOverlays: true
+        }
+      },
+      displaySets: [{
+        id: 'mprDisplaySet',
+        options: {
+          // ToDo: choose appropriate preset
+          displayPreset: 'CT-Bone'
+        }
+      }]
+    }]
+  }]
+};
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/hps/primary3D.ts
+const primary3D = {
+  id: 'primary3D',
+  locked: true,
+  name: 'primary3D',
+  createdDate: '2023-03-15T10:29:44.894Z',
+  modifiedDate: '2023-03-15T10:29:44.894Z',
+  availableTo: {},
+  editableBy: {},
+  protocolMatchingRules: [],
+  imageLoadStrategy: 'interleaveCenter',
+  displaySetSelectors: {
+    mprDisplaySet: {
+      seriesMatchingRules: [{
+        weight: 1,
+        attribute: 'isReconstructable',
+        constraint: {
+          equals: {
+            value: true
+          }
+        },
+        required: true
+      }]
+    }
+  },
+  stages: [{
+    id: 'primary3DStage',
+    name: 'primary3D',
+    viewportStructure: {
+      layoutType: 'grid',
+      properties: {
+        rows: 3,
+        columns: 3,
+        layoutOptions: [{
+          x: 0,
+          y: 0,
+          width: 2 / 3,
+          height: 1
+        }, {
+          x: 2 / 3,
+          y: 0,
+          width: 1 / 3,
+          height: 1 / 3
+        }, {
+          x: 2 / 3,
+          y: 1 / 3,
+          width: 1 / 3,
+          height: 1 / 3
+        }, {
+          x: 2 / 3,
+          y: 2 / 3,
+          width: 1 / 3,
+          height: 1 / 3
+        }]
+      }
+    },
+    viewports: [{
+      viewportOptions: {
+        toolGroupId: 'volume3d',
+        viewportType: 'volume3d',
+        orientation: 'coronal',
+        customViewportProps: {
+          hideOverlays: true
+        }
+      },
+      displaySets: [{
+        id: 'mprDisplaySet',
+        options: {
+          // ToDo: choose appropriate preset
+          displayPreset: 'CT-Bone'
+        }
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'mpr',
+        viewportType: 'volume',
+        orientation: 'axial',
+        initialImageOptions: {
+          preset: 'middle'
+        },
+        syncGroups: [{
+          type: 'voi',
+          id: 'mpr',
+          source: true,
+          target: true
+        }]
+      },
+      displaySets: [{
+        id: 'mprDisplaySet'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'mpr',
+        viewportType: 'volume',
+        orientation: 'coronal',
+        initialImageOptions: {
+          preset: 'middle'
+        },
+        syncGroups: [{
+          type: 'voi',
+          id: 'mpr',
+          source: true,
+          target: true
+        }]
+      },
+      displaySets: [{
+        id: 'mprDisplaySet'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'mpr',
+        viewportType: 'volume',
+        orientation: 'sagittal',
+        initialImageOptions: {
+          preset: 'middle'
+        },
+        syncGroups: [{
+          type: 'voi',
+          id: 'mpr',
+          source: true,
+          target: true
+        }]
+      },
+      displaySets: [{
+        id: 'mprDisplaySet'
+      }]
+    }]
+  }]
+};
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/hps/primaryAxial.ts
+const primaryAxial = {
+  id: 'primaryAxial',
+  locked: true,
+  name: 'primaryAxial',
+  createdDate: '2023-03-15T10:29:44.894Z',
+  modifiedDate: '2023-03-15T10:29:44.894Z',
+  availableTo: {},
+  editableBy: {},
+  protocolMatchingRules: [],
+  imageLoadStrategy: 'interleaveCenter',
+  displaySetSelectors: {
+    mprDisplaySet: {
+      seriesMatchingRules: [{
+        weight: 1,
+        attribute: 'isReconstructable',
+        constraint: {
+          equals: {
+            value: true
+          }
+        },
+        required: true
+      }]
+    }
+  },
+  stages: [{
+    id: 'primaryAxialStage',
+    name: 'primaryAxial',
+    viewportStructure: {
+      layoutType: 'grid',
+      properties: {
+        rows: 2,
+        columns: 3,
+        layoutOptions: [{
+          x: 0,
+          y: 0,
+          width: 2 / 3,
+          height: 1
+        }, {
+          x: 2 / 3,
+          y: 0,
+          width: 1 / 3,
+          height: 1 / 2
+        }, {
+          x: 2 / 3,
+          y: 1 / 2,
+          width: 1 / 3,
+          height: 1 / 2
+        }]
+      }
+    },
+    viewports: [{
+      viewportOptions: {
+        toolGroupId: 'mpr',
+        viewportType: 'volume',
+        orientation: 'axial',
+        initialImageOptions: {
+          preset: 'middle'
+        },
+        syncGroups: [{
+          type: 'voi',
+          id: 'mpr',
+          source: true,
+          target: true
+        }]
+      },
+      displaySets: [{
+        id: 'mprDisplaySet'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'mpr',
+        viewportType: 'volume',
+        orientation: 'sagittal',
         initialImageOptions: {
           preset: 'middle'
         },
@@ -5773,7 +6381,7 @@ const mprAnd3DVolumeViewport = {
       viewportOptions: {
         toolGroupId: 'mpr',
         viewportType: 'volume',
-        orientation: 'sagittal',
+        orientation: 'coronal',
         initialImageOptions: {
           preset: 'middle'
         },
@@ -5790,6 +6398,14 @@ const mprAnd3DVolumeViewport = {
     }]
   }]
 };
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/getHangingProtocolModule.ts
+
+
+
+
+
+
+
 function getHangingProtocolModule() {
   return [{
     name: mpr.id,
@@ -5797,10 +6413,26 @@ function getHangingProtocolModule() {
   }, {
     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/services/ToolGroupService/ToolGroupService.ts
+var _class;
 
 
 
@@ -5825,7 +6457,7 @@ class ToolGroupService {
     this.viewportGridService = viewportGridService;
     this.listeners = {};
     this.EVENTS = ToolGroupService_EVENTS;
-    Object.assign(this, src/* pubSubServiceInterface */.KZ);
+    Object.assign(this, src/* pubSubServiceInterface */.Ml);
   }
   onModeExit() {
     this.destroy();
@@ -5924,8 +6556,7 @@ class ToolGroupService {
     });
     return toolGroup;
   }
-  addToolsToToolGroup(toolGroupId, tools) {
-    let configs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  addToolsToToolGroup(toolGroupId, tools, configs = {}) {
     const toolGroup = dist_esm.ToolGroupManager.getToolGroup(toolGroupId);
     // this.changeConfigurationIfNecessary(toolGroup, volumeId);
     this._addTools(toolGroup, tools, configs);
@@ -5987,49 +6618,44 @@ class ToolGroupService {
       disabled
     } = tools;
     if (active) {
-      active.forEach(_ref => {
-        let {
-          toolName,
-          bindings
-        } = _ref;
+      active.forEach(({
+        toolName,
+        bindings
+      }) => {
         toolGroup.setToolActive(toolName, {
           bindings
         });
       });
     }
     if (passive) {
-      passive.forEach(_ref2 => {
-        let {
-          toolName
-        } = _ref2;
+      passive.forEach(({
+        toolName
+      }) => {
         toolGroup.setToolPassive(toolName);
       });
     }
     if (enabled) {
-      enabled.forEach(_ref3 => {
-        let {
-          toolName
-        } = _ref3;
+      enabled.forEach(({
+        toolName
+      }) => {
         toolGroup.setToolEnabled(toolName);
       });
     }
     if (disabled) {
-      disabled.forEach(_ref4 => {
-        let {
-          toolName
-        } = _ref4;
+      disabled.forEach(({
+        toolName
+      }) => {
         toolGroup.setToolDisabled(toolName);
       });
     }
   }
   _addTools(toolGroup, tools) {
     const addTools = tools => {
-      tools.forEach(_ref5 => {
-        let {
-          toolName,
-          parentTool,
-          configuration
-        } = _ref5;
+      tools.forEach(({
+        toolName,
+        parentTool,
+        configuration
+      }) => {
         if (parentTool) {
           toolGroup.addToolInstance(toolName, parentTool, {
             ...configuration
@@ -6055,20 +6681,21 @@ class ToolGroupService {
     }
   }
 }
+_class = ToolGroupService;
 ToolGroupService.REGISTRATION = {
   name: 'toolGroupService',
   altName: 'ToolGroupService',
-  create: _ref6 => {
-    let {
-      servicesManager
-    } = _ref6;
-    return new ToolGroupService(servicesManager);
+  create: ({
+    servicesManager
+  }) => {
+    return new _class(servicesManager);
   }
 };
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/services/ToolGroupService/index.js
 
 /* harmony default export */ const services_ToolGroupService = (ToolGroupService);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/services/SyncGroupService/SyncGroupService.ts
+var SyncGroupService_class;
 
 
 const SyncGroupService_EVENTS = {
@@ -6096,13 +6723,13 @@ class SyncGroupService {
       [POSITION]: dist_esm.synchronizers.createCameraPositionSynchronizer,
       [VOI]: dist_esm.synchronizers.createVOISynchronizer,
       [ZOOMPAN]: dist_esm.synchronizers.createZoomPanSynchronizer,
-      [STACKIMAGE]: dist_esm.synchronizers.createStackImageSynchronizer
+      [STACKIMAGE]: dist_esm.synchronizers.createImageSliceSynchronizer
     };
     this.servicesManager = serviceManager;
     this.listeners = {};
     this.EVENTS = SyncGroupService_EVENTS;
     //
-    Object.assign(this, src/* pubSubServiceInterface */.KZ);
+    Object.assign(this, src/* pubSubServiceInterface */.Ml);
   }
   _createSynchronizer(type, id, options) {
     const syncCreator = this.synchronizerCreators[type.toLowerCase()];
@@ -6121,6 +6748,9 @@ class SyncGroupService {
   addSynchronizerType(type, creator) {
     this.synchronizerCreators[type.toLowerCase()] = creator;
   }
+  getSynchronizer(id) {
+    return dist_esm.SynchronizerManager.getSynchronizer(id);
+  }
   _getOrCreateSynchronizer(type, id, options) {
     let synchronizer = dist_esm.SynchronizerManager.getSynchronizer(id);
     if (!synchronizer) {
@@ -6161,6 +6791,9 @@ class SyncGroupService {
   destroy() {
     dist_esm.SynchronizerManager.destroy();
   }
+  getSynchronizersForViewport(viewportId, renderingEngineId) {
+    return dist_esm.SynchronizerManager.getAllSynchronizers().filter(s => s.hasSourceViewport(renderingEngineId, viewportId) || s.hasTargetViewport(renderingEngineId, viewportId));
+  }
   removeViewportFromSyncGroup(viewportId, renderingEngineId, syncGroupId) {
     const synchronizers = dist_esm.SynchronizerManager.getAllSynchronizers();
     const filteredSynchronizers = syncGroupId ? synchronizers.filter(s => s.id === syncGroupId) : synchronizers;
@@ -6182,24 +6815,21 @@ class SyncGroupService {
     });
   }
 }
+SyncGroupService_class = SyncGroupService;
 SyncGroupService.REGISTRATION = {
   name: 'syncGroupService',
   altName: 'SyncGroupService',
-  create: _ref => {
-    let {
-      servicesManager
-    } = _ref;
-    return new SyncGroupService(servicesManager);
+  create: ({
+    servicesManager
+  }) => {
+    return new SyncGroupService_class(servicesManager);
   }
 };
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/services/SyncGroupService/index.js
 
 /* harmony default export */ const services_SyncGroupService = (SyncGroupService);
-// EXTERNAL MODULE: ../../../node_modules/lodash.clonedeep/index.js
-var lodash_clonedeep = __webpack_require__(11677);
-var lodash_clonedeep_default = /*#__PURE__*/__webpack_require__.n(lodash_clonedeep);
 // EXTERNAL MODULE: ../../../node_modules/lodash.isequal/index.js
-var lodash_isequal = __webpack_require__(10311);
+var lodash_isequal = __webpack_require__(71932);
 var lodash_isequal_default = /*#__PURE__*/__webpack_require__.n(lodash_isequal);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/transitions.ts
 /**
@@ -6249,24 +6879,21 @@ function reverseEaseInOutBell(x, baseline) {
  * and geometry Id
  */
 function mapROIContoursToRTStructData(structureSet, rtDisplaySetUID) {
-  return structureSet.ROIContours.map(_ref => {
-    let {
-      contourPoints,
-      ROINumber,
-      ROIName,
-      colorArray
-    } = _ref;
-    const data = contourPoints.map(_ref2 => {
-      let {
-        points,
-        ...rest
-      } = _ref2;
-      const newPoints = points.map(_ref3 => {
-        let {
-          x,
-          y,
-          z
-        } = _ref3;
+  return structureSet.ROIContours.map(({
+    contourPoints,
+    ROINumber,
+    ROIName,
+    colorArray
+  }) => {
+    const data = contourPoints.map(({
+      points,
+      ...rest
+    }) => {
+      const newPoints = points.map(({
+        x,
+        y,
+        z
+      }) => {
         return [x, y, z];
       });
       return {
@@ -6285,16 +6912,13 @@ function mapROIContoursToRTStructData(structureSet, rtDisplaySetUID) {
   });
 }
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/services/SegmentationService/SegmentationService.ts
+var SegmentationService_class;
 
 
 
 
 
 
-
-const {
-  COLOR_LUT
-} = dist_esm.CONSTANTS;
 const LABELMAP = dist_esm.Enums.SegmentationRepresentations.Labelmap;
 const CONTOUR = dist_esm.Enums.SegmentationRepresentations.Contour;
 const SegmentationService_EVENTS = {
@@ -6320,14 +6944,11 @@ const SEGMENT_CONSTANT = {
   isLocked: false
 };
 const VOLUME_LOADER_SCHEME = 'cornerstoneStreamingImageVolume';
-class SegmentationService extends src/* PubSubService */.hC {
-  constructor(_ref) {
-    var _this;
-    let {
-      servicesManager
-    } = _ref;
+class SegmentationService extends src/* PubSubService */.Rc {
+  constructor({
+    servicesManager
+  }) {
     super(SegmentationService_EVENTS);
-    _this = this;
     this.segmentations = void 0;
     this.servicesManager = void 0;
     this.highlightIntervalId = null;
@@ -6468,7 +7089,6 @@ class SegmentationService extends src/* PubSubService */.hC {
           }
         }
       };
-
       this.addOrUpdateSegmentation(segmentation);
       return segmentationId;
     };
@@ -6481,11 +7101,8 @@ class SegmentationService extends src/* PubSubService */.hC {
     this.toggleSegmentationVisibility = segmentationId => {
       this._toggleSegmentationVisibility(segmentationId, false);
     };
-    this.addSegmentationRepresentationToToolGroup = async function (toolGroupId, segmentationId) {
-      let hydrateSegmentation = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-      let representationType = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : dist_esm.Enums.SegmentationRepresentations.Labelmap;
-      let suppressEvents = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-      const segmentation = _this.getSegmentation(segmentationId);
+    this.addSegmentationRepresentationToToolGroup = async (toolGroupId, segmentationId, hydrateSegmentation = false, representationType = dist_esm.Enums.SegmentationRepresentations.Labelmap, suppressEvents = false) => {
+      const segmentation = this.getSegmentation(segmentationId);
       if (!segmentation) {
         throw new Error(`Segmentation with segmentationId ${segmentationId} not found.`);
       }
@@ -6493,9 +7110,6 @@ class SegmentationService extends src/* PubSubService */.hC {
         // hydrate the segmentation if it's not hydrated yet
         segmentation.hydrated = true;
       }
-      const {
-        colorLUTIndex
-      } = segmentation;
 
       // Based on the segmentationId, set the colorLUTIndex.
       const segmentationRepresentationUIDs = await dist_esm.segmentation.addSegmentationRepresentations(toolGroupId, [{
@@ -6504,8 +7118,7 @@ class SegmentationService extends src/* PubSubService */.hC {
       }]);
 
       // set the latest segmentation representation as active one
-      _this._setActiveSegmentationForToolGroup(segmentationId, toolGroupId, segmentationRepresentationUIDs[0]);
-      dist_esm.segmentation.config.color.setColorLUT(toolGroupId, segmentationRepresentationUIDs[0], colorLUTIndex);
+      this._setActiveSegmentationForToolGroup(segmentationId, toolGroupId, segmentationRepresentationUIDs[0]);
 
       // add the segmentation segments properly
       for (const segment of segmentation.segments) {
@@ -6521,20 +7134,20 @@ class SegmentationService extends src/* PubSubService */.hC {
         } = segment;
         const suppressEvents = true;
         if (color !== undefined) {
-          _this._setSegmentColor(segmentationId, segmentIndex, color, toolGroupId, suppressEvents);
+          this._setSegmentColor(segmentationId, segmentIndex, color, toolGroupId, suppressEvents);
         }
         if (opacity !== undefined) {
-          _this._setSegmentOpacity(segmentationId, segmentIndex, opacity, toolGroupId, suppressEvents);
+          this._setSegmentOpacity(segmentationId, segmentIndex, opacity, toolGroupId, suppressEvents);
         }
         if (visibility !== undefined) {
-          _this._setSegmentVisibility(segmentationId, segmentIndex, visibility, toolGroupId, suppressEvents);
+          this._setSegmentVisibility(segmentationId, segmentIndex, visibility, toolGroupId, suppressEvents);
         }
         if (isLocked) {
-          _this._setSegmentLocked(segmentationId, segmentIndex, isLocked, suppressEvents);
+          this._setSegmentLocked(segmentationId, segmentIndex, isLocked, suppressEvents);
         }
       }
       if (!suppressEvents) {
-        _this._broadcastEvent(_this.EVENTS.SEGMENTATION_UPDATED, {
+        this._broadcastEvent(this.EVENTS.SEGMENTATION_UPDATED, {
           segmentation
         });
       }
@@ -6558,18 +7171,17 @@ class SegmentationService extends src/* PubSubService */.hC {
       const toolGroupIds = dist_esm.segmentation.state.getToolGroupIdsWithSegmentation(segmentationId);
       return toolGroupIds;
     };
-    this.hydrateSegmentation = function (segmentationId) {
-      let suppressEvents = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      const segmentation = _this.getSegmentation(segmentationId);
+    this.hydrateSegmentation = (segmentationId, suppressEvents = false) => {
+      const segmentation = this.getSegmentation(segmentationId);
       if (!segmentation) {
         throw new Error(`Segmentation with segmentationId ${segmentationId} not found.`);
       }
       segmentation.hydrated = true;
 
       // Not all segmentations have dipslaysets, some of them are derived in the client
-      _this._setDisplaySetIsHydrated(segmentationId, true);
+      this._setDisplaySetIsHydrated(segmentationId, true);
       if (!suppressEvents) {
-        _this._broadcastEvent(_this.EVENTS.SEGMENTATION_UPDATED, {
+        this._broadcastEvent(this.EVENTS.SEGMENTATION_UPDATED, {
           segmentation
         });
       }
@@ -6627,11 +7239,10 @@ class SegmentationService extends src/* PubSubService */.hC {
         renderInactiveSegmentations,
         renderOutline
       } = configuration;
-      const setConfigValueIfDefined = function (key, value) {
-        let transformFn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      const setConfigValueIfDefined = (key, value, transformFn = null) => {
         if (value !== undefined) {
           const transformedValue = transformFn ? transformFn(value) : value;
-          _this._setSegmentationConfig(key, transformedValue);
+          this._setSegmentationConfig(key, transformedValue);
         }
       };
       setConfigValueIfDefined('renderOutline', renderOutline);
@@ -6678,32 +7289,30 @@ class SegmentationService extends src/* PubSubService */.hC {
     this.getSegmentationRepresentationsForToolGroup = toolGroupId => {
       return dist_esm.segmentation.state.getSegmentationRepresentations(toolGroupId);
     };
-    this._toggleSegmentationVisibility = function (segmentationId) {
-      let suppressEvents = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      const segmentation = _this.segmentations[segmentationId];
+    this._toggleSegmentationVisibility = (segmentationId, suppressEvents = false) => {
+      const segmentation = this.segmentations[segmentationId];
       if (!segmentation) {
         throw new Error(`Segmentation with segmentationId ${segmentationId} not found.`);
       }
       segmentation.isVisible = !segmentation.isVisible;
-      _this._updateCornerstoneSegmentationVisibility(segmentationId);
+      this._updateCornerstoneSegmentationVisibility(segmentationId);
       if (suppressEvents === false) {
-        _this._broadcastEvent(_this.EVENTS.SEGMENTATION_UPDATED, {
+        this._broadcastEvent(this.EVENTS.SEGMENTATION_UPDATED, {
           segmentation
         });
       }
     };
-    this._setSegmentColor = function (segmentationId, segmentIndex, color, toolGroupId) {
-      let suppressEvents = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-      const segmentation = _this.getSegmentation(segmentationId);
+    this._setSegmentColor = (segmentationId, segmentIndex, color, toolGroupId, suppressEvents = false) => {
+      const segmentation = this.getSegmentation(segmentationId);
       if (segmentation === undefined) {
         throw new Error(`no segmentation for segmentationId: ${segmentationId}`);
       }
-      const segmentInfo = _this._getSegmentInfo(segmentation, segmentIndex);
+      const segmentInfo = this._getSegmentInfo(segmentation, segmentIndex);
       if (segmentInfo === undefined) {
         throw new Error(`Segment ${segmentIndex} not yet added to segmentation: ${segmentationId}`);
       }
-      toolGroupId = toolGroupId ?? _this._getApplicableToolGroupId();
-      const segmentationRepresentation = _this._getSegmentationRepresentation(segmentationId, toolGroupId);
+      toolGroupId = toolGroupId ?? this._getApplicableToolGroupId();
+      const segmentationRepresentation = this._getSegmentationRepresentation(segmentationId, toolGroupId);
       if (!segmentationRepresentation) {
         throw new Error('Must add representation to toolgroup before setting segments');
       }
@@ -6714,23 +7323,22 @@ class SegmentationService extends src/* PubSubService */.hC {
       dist_esm.segmentation.config.color.setColorForSegmentIndex(toolGroupId, segmentationRepresentationUID, segmentIndex, [...color, rgbaColor[3]]);
       segmentInfo.color = color;
       if (suppressEvents === false) {
-        _this._broadcastEvent(_this.EVENTS.SEGMENTATION_UPDATED, {
+        this._broadcastEvent(this.EVENTS.SEGMENTATION_UPDATED, {
           segmentation
         });
       }
     };
-    this._setSegmentOpacity = function (segmentationId, segmentIndex, opacity, toolGroupId) {
-      let suppressEvents = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-      const segmentation = _this.getSegmentation(segmentationId);
+    this._setSegmentOpacity = (segmentationId, segmentIndex, opacity, toolGroupId, suppressEvents = false) => {
+      const segmentation = this.getSegmentation(segmentationId);
       if (segmentation === undefined) {
         throw new Error(`no segmentation for segmentationId: ${segmentationId}`);
       }
-      const segmentInfo = _this._getSegmentInfo(segmentation, segmentIndex);
+      const segmentInfo = this._getSegmentInfo(segmentation, segmentIndex);
       if (segmentInfo === undefined) {
         throw new Error(`Segment ${segmentIndex} not yet added to segmentation: ${segmentationId}`);
       }
-      toolGroupId = toolGroupId ?? _this._getApplicableToolGroupId();
-      const segmentationRepresentation = _this._getSegmentationRepresentation(segmentationId, toolGroupId);
+      toolGroupId = toolGroupId ?? this._getApplicableToolGroupId();
+      const segmentationRepresentation = this._getSegmentationRepresentation(segmentationId, toolGroupId);
       if (!segmentationRepresentation) {
         throw new Error('Must add representation to toolgroup before setting segments');
       }
@@ -6741,7 +7349,7 @@ class SegmentationService extends src/* PubSubService */.hC {
       dist_esm.segmentation.config.color.setColorForSegmentIndex(toolGroupId, segmentationRepresentationUID, segmentIndex, [rgbaColor[0], rgbaColor[1], rgbaColor[2], opacity]);
       segmentInfo.opacity = opacity;
       if (suppressEvents === false) {
-        _this._broadcastEvent(_this.EVENTS.SEGMENTATION_UPDATED, {
+        this._broadcastEvent(this.EVENTS.SEGMENTATION_UPDATED, {
           segmentation
         });
       }
@@ -6864,15 +7472,6 @@ class SegmentationService extends src/* PubSubService */.hC {
       }
       return viewportInfo.getToolGroupId();
     };
-    this.getNextColorLUTIndex = () => {
-      let i = 0;
-      while (true) {
-        if (dist_esm.segmentation.state.getColorLUT(i) === undefined) {
-          return i;
-        }
-        i++;
-      }
-    };
     /**
      * Converts object of objects to array.
      *
@@ -6901,8 +7500,7 @@ class SegmentationService extends src/* PubSubService */.hC {
    *     - isLocked: (optional) Whether the new segment should be locked for editing. If not provided, the segment will not be locked by default.
    *     - active: (optional) Whether the new segment should be the active segment to be edited. If not provided, the segment will not be active by default.
    */
-  addSegment(segmentationId) {
-    let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  addSegment(segmentationId, config = {}) {
     if (config?.segmentIndex === 0) {
       throw new Error('Segment index 0 is reserved for "no label"');
     }
@@ -7016,8 +7614,7 @@ class SegmentationService extends src/* PubSubService */.hC {
       segmentation
     });
   }
-  setSegmentVisibility(segmentationId, segmentIndex, isVisible, toolGroupId) {
-    let suppressEvents = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  setSegmentVisibility(segmentationId, segmentIndex, isVisible, toolGroupId, suppressEvents = false) {
     this._setSegmentVisibility(segmentationId, segmentIndex, isVisible, toolGroupId, suppressEvents);
   }
   setSegmentLocked(segmentationId, segmentIndex, isLocked) {
@@ -7062,8 +7659,7 @@ class SegmentationService extends src/* PubSubService */.hC {
    *
     * @return Array of segmentations
    */
-  getSegmentations() {
-    let filterNonHydratedSegmentations = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  getSegmentations(filterNonHydratedSegmentations = true) {
     const segmentations = this._getSegmentations();
     return segmentations && segmentations.filter(segmentation => {
       return !filterNonHydratedSegmentations || segmentation.hydrated;
@@ -7098,9 +7694,7 @@ class SegmentationService extends src/* PubSubService */.hC {
   getSegmentation(segmentationId) {
     return this.segmentations[segmentationId];
   }
-  addOrUpdateSegmentation(segmentation) {
-    let suppressEvents = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    let notYetUpdatedAtSource = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  addOrUpdateSegmentation(segmentation, suppressEvents = false, notYetUpdatedAtSource = false) {
     const {
       id: segmentationId
     } = segmentation;
@@ -7130,15 +7724,6 @@ class SegmentationService extends src/* PubSubService */.hC {
         }
       }
     }]);
-
-    // if first segmentation, we can use the default colorLUT, otherwise
-    // we need to generate a new one and use a new colorLUT
-    const colorLUTIndex = 0;
-    if (Object.keys(this.segmentations).length !== 0) {
-      const newColorLUT = this.generateNewColorLUT();
-      const colorLUTIndex = this.getNextColorLUTIndex();
-      dist_esm.segmentation.config.color.addColorLUT(newColorLUT, colorLUTIndex);
-    }
     this.segmentations[segmentationId] = {
       ...segmentation,
       label: segmentation.label || '',
@@ -7146,8 +7731,7 @@ class SegmentationService extends src/* PubSubService */.hC {
       activeSegmentIndex: segmentation.activeSegmentIndex ?? null,
       segmentCount: segmentation.segmentCount ?? 0,
       isActive: false,
-      isVisible: true,
-      colorLUTIndex
+      isVisible: true
     };
     cachedSegmentation = this.segmentations[segmentationId];
     this._updateCornerstoneSegmentations({
@@ -7161,8 +7745,7 @@ class SegmentationService extends src/* PubSubService */.hC {
     }
     return cachedSegmentation.id;
   }
-  async createSegmentationForSEGDisplaySet(segDisplaySet, segmentationId) {
-    let suppressEvents = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  async createSegmentationForSEGDisplaySet(segDisplaySet, segmentationId, suppressEvents = false) {
     // Todo: we only support creating labelmap for SEG displaySets for now
     const representationType = LABELMAP;
     segmentationId = segmentationId ?? segDisplaySet.displaySetInstanceUID;
@@ -7268,8 +7851,7 @@ class SegmentationService extends src/* PubSubService */.hC {
     });
     return this.addOrUpdateSegmentation(segmentation, suppressEvents);
   }
-  async createSegmentationForRTDisplaySet(rtDisplaySet, segmentationId) {
-    let suppressEvents = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  async createSegmentationForRTDisplaySet(rtDisplaySet, segmentationId, suppressEvents = false) {
     // Todo: we currently only have support for contour representation for initial
     // RT display
     const representationType = CONTOUR;
@@ -7286,12 +7868,9 @@ class SegmentationService extends src/* PubSubService */.hC {
 
     // sort by segmentIndex
     allRTStructData.sort((a, b) => a.segmentIndex - b.segmentIndex);
-    const geometryIds = allRTStructData.map(_ref2 => {
-      let {
-        geometryId
-      } = _ref2;
-      return geometryId;
-    });
+    const geometryIds = allRTStructData.map(({
+      geometryId
+    }) => geometryId);
     const segmentation = {
       ...defaultScheme,
       id: segmentationId,
@@ -7344,7 +7923,6 @@ class SegmentationService extends src/* PubSubService */.hC {
           },
           modifiedTime: rtDisplaySet.SeriesDate // we use the SeriesDate as the modifiedTime since this is the first time we are creating the segmentation
         };
-
         segmentation.segments[segmentIndex] = {
           label: id,
           segmentIndex,
@@ -7392,12 +7970,8 @@ class SegmentationService extends src/* PubSubService */.hC {
     });
     return this.addOrUpdateSegmentation(segmentation, suppressEvents);
   }
-  jumpToSegmentCenter(segmentationId, segmentIndex, toolGroupId) {
-    let highlightAlpha = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0.9;
-    let highlightSegment = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
-    let animationLength = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 750;
-    let highlightHideOthers = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
-    let highlightFunctionType = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 'ease-in-out';
+  jumpToSegmentCenter(segmentationId, segmentIndex, toolGroupId, highlightAlpha = 0.9, highlightSegment = true, animationLength = 750, highlightHideOthers = false, highlightFunctionType = 'ease-in-out' // todo: make animation functions configurable from outside
+  ) {
     const {
       toolGroupService
     } = this.servicesManager.services;
@@ -7437,11 +8011,7 @@ class SegmentationService extends src/* PubSubService */.hC {
       }
     });
   }
-  highlightSegment(segmentationId, segmentIndex, toolGroupId) {
-    let alpha = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0.9;
-    let animationLength = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 750;
-    let hideOthers = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
-    let highlightFunctionType = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 'ease-in-out';
+  highlightSegment(segmentationId, segmentIndex, toolGroupId, alpha = 0.9, animationLength = 750, hideOthers = true, highlightFunctionType = 'ease-in-out') {
     if (this.highlightIntervalId) {
       clearInterval(this.highlightIntervalId);
     }
@@ -7587,8 +8157,7 @@ class SegmentationService extends src/* PubSubService */.hC {
   setSegmentLabel(segmentationId, segmentIndex, label) {
     this._setSegmentLabel(segmentationId, segmentIndex, label);
   }
-  _setSegmentLabel(segmentationId, segmentIndex, label) {
-    let suppressEvents = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  _setSegmentLabel(segmentationId, segmentIndex, label, suppressEvents = false) {
     const segmentation = this.getSegmentation(segmentationId);
     if (segmentation === undefined) {
       throw new Error(`no segmentation for segmentationId: ${segmentationId}`);
@@ -7640,12 +8209,10 @@ class SegmentationService extends src/* PubSubService */.hC {
       segmentCount: 0,
       segments: [],
       isVisible: true,
-      isActive: false,
-      colorLUTIndex: 0
+      isActive: false
     };
   }
-  _setActiveSegmentationForToolGroup(segmentationId, toolGroupId) {
-    let suppressEvents = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  _setActiveSegmentationForToolGroup(segmentationId, toolGroupId, suppressEvents = false) {
     const segmentations = this._getSegmentations();
     const targetSegmentation = this.getSegmentation(segmentationId);
     if (targetSegmentation === undefined) {
@@ -7662,8 +8229,7 @@ class SegmentationService extends src/* PubSubService */.hC {
       });
     }
   }
-  _setActiveSegment(segmentationId, segmentIndex) {
-    let suppressEvents = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  _setActiveSegment(segmentationId, segmentIndex, suppressEvents = false) {
     const segmentation = this.getSegmentation(segmentationId);
     if (segmentation === undefined) {
       throw new Error(`no segmentation for segmentationId: ${segmentationId}`);
@@ -7711,8 +8277,7 @@ class SegmentationService extends src/* PubSubService */.hC {
     } = segmentCenter[segmentIndex];
     return center;
   }
-  _setSegmentLocked(segmentationId, segmentIndex, isLocked) {
-    let suppressEvents = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  _setSegmentLocked(segmentationId, segmentIndex, isLocked, suppressEvents = false) {
     const segmentation = this.getSegmentation(segmentationId);
     if (segmentation === undefined) {
       throw new Error(`no segmentation for segmentationId: ${segmentationId}`);
@@ -7729,8 +8294,7 @@ class SegmentationService extends src/* PubSubService */.hC {
       });
     }
   }
-  _setSegmentVisibility(segmentationId, segmentIndex, isVisible, toolGroupId) {
-    let suppressEvents = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  _setSegmentVisibility(segmentationId, segmentIndex, isVisible, toolGroupId, suppressEvents = false) {
     toolGroupId = toolGroupId ?? this._getApplicableToolGroupId();
     const {
       segmentationRepresentationUID,
@@ -7756,8 +8320,7 @@ class SegmentationService extends src/* PubSubService */.hC {
       });
     }
   }
-  _setSegmentLabel(segmentationId, segmentIndex, segmentLabel) {
-    let suppressEvents = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  _setSegmentLabel(segmentationId, segmentIndex, segmentLabel, suppressEvents = false) {
     const segmentation = this.getSegmentation(segmentationId);
     if (segmentation === undefined) {
       throw new Error(`no segmentation for segmentationId: ${segmentationId}`);
@@ -7835,11 +8398,10 @@ class SegmentationService extends src/* PubSubService */.hC {
       esm.cache.removeVolumeLoadObject(segmentationId);
     }
   }
-  _updateCornerstoneSegmentations(_ref3) {
-    let {
-      segmentationId,
-      notYetUpdatedAtSource
-    } = _ref3;
+  _updateCornerstoneSegmentations({
+    segmentationId,
+    notYetUpdatedAtSource
+  }) {
     if (notYetUpdatedAtSource === false) {
       return;
     }
@@ -7876,19 +8438,15 @@ class SegmentationService extends src/* PubSubService */.hC {
       return referencedFrameOfReferenceSequence.FrameOfReferenceUID;
     }
   }
-  generateNewColorLUT() {
-    const newColorLUT = lodash_clonedeep_default()(COLOR_LUT);
-    return newColorLUT;
-  }
 }
+SegmentationService_class = SegmentationService;
 SegmentationService.REGISTRATION = {
   name: 'segmentationService',
   altName: 'SegmentationService',
-  create: _ref4 => {
-    let {
-      servicesManager
-    } = _ref4;
-    return new SegmentationService({
+  create: ({
+    servicesManager
+  }) => {
+    return new SegmentationService_class({
       servicesManager
     });
   }
@@ -7918,6 +8476,7 @@ function getCornerstoneViewportType(viewportType) {
   throw new Error(`Invalid viewport type: ${viewportType}. Valid types are: stack, volume`);
 }
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/services/CornerstoneCacheService/CornerstoneCacheService.ts
+var CornerstoneCacheService_class;
 
 
 const CornerstoneCacheService_VOLUME_LOADER_SCHEME = 'cornerstoneStreamingImageVolume';
@@ -7971,12 +8530,9 @@ class CornerstoneCacheService {
       esm.cache.removeVolumeLoadObject(volumeId);
       this.volumeImageIds.delete(volumeId);
     }
-    const displaySets = viewportData.data.map(_ref => {
-      let {
-        displaySetInstanceUID
-      } = _ref;
-      return displaySetService.getDisplaySetByUID(displaySetInstanceUID);
-    });
+    const displaySets = viewportData.data.map(({
+      displaySetInstanceUID
+    }) => displaySetService.getDisplaySetByUID(displaySetInstanceUID));
     const newViewportData = await this._getVolumeViewportData(dataSource, displaySets, viewportData.viewportType);
     return newViewportData;
   }
@@ -8063,12 +8619,9 @@ class CornerstoneCacheService {
       segmentationService,
       displaySetService
     } = this.servicesManager.services;
-    const viewportDisplaySetInstanceUIDs = displaySets.map(_ref2 => {
-      let {
-        displaySetInstanceUID
-      } = _ref2;
-      return displaySetInstanceUID;
-    });
+    const viewportDisplaySetInstanceUIDs = displaySets.map(({
+      displaySetInstanceUID
+    }) => displaySetInstanceUID);
 
     // check inside segmentations if any of them are referencing the displaySets
     // that are about to be displayed
@@ -8091,14 +8644,14 @@ class CornerstoneCacheService {
     return stackImageIds;
   }
 }
+CornerstoneCacheService_class = CornerstoneCacheService;
 CornerstoneCacheService.REGISTRATION = {
   name: 'cornerstoneCacheService',
   altName: 'CornerstoneCacheService',
-  create: _ref3 => {
-    let {
-      servicesManager
-    } = _ref3;
-    return new CornerstoneCacheService(servicesManager);
+  create: ({
+    servicesManager
+  }) => {
+    return new CornerstoneCacheService_class(servicesManager);
   }
 };
 /* harmony default export */ const CornerstoneCacheService_CornerstoneCacheService = (CornerstoneCacheService);
@@ -8228,12 +8781,9 @@ class ViewportInfo {
     let viewportData = this.getViewportData();
     if (viewportData.viewportType === esm.Enums.ViewportType.ORTHOGRAPHIC || viewportData.viewportType === esm.Enums.ViewportType.VOLUME_3D) {
       viewportData = viewportData;
-      return viewportData.data.some(_ref => {
-        let {
-          displaySetInstanceUID: dsUID
-        } = _ref;
-        return dsUID === displaySetInstanceUID;
-      });
+      return viewportData.data.some(({
+        displaySetInstanceUID: dsUID
+      }) => dsUID === displaySetInstanceUID);
     }
     viewportData = viewportData;
     return viewportData.data.displaySetInstanceUID === displaySetInstanceUID;
@@ -8274,6 +8824,12 @@ class ViewportInfo {
   getViewportOptions() {
     return this.viewportOptions;
   }
+  getPresentationIds() {
+    const {
+      presentationIds
+    } = this.viewportOptions;
+    return presentationIds;
+  }
   setDisplaySetOptions(displaySetOptions) {
     this.displaySetOptions = displaySetOptions;
   }
@@ -8305,8 +8861,7 @@ class ViewportInfo {
 
   // Handle incoming public display set options or a display set select
   // with a contained options.
-  mapDisplaySetOptions() {
-    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [{}];
+  mapDisplaySetOptions(options = [{}]) {
     const displaySetOptions = [];
     options.forEach(item => {
       let option = item?.options || item;
@@ -8346,6 +8901,7 @@ var JumpPresets = /*#__PURE__*/function (JumpPresets) {
 }(JumpPresets || {});
 /* harmony default export */ const utils_JumpPresets = (JumpPresets);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts
+var CornerstoneViewportService_class;
 
 
 
@@ -8360,18 +8916,23 @@ const CornerstoneViewportService_EVENTS = {
  * Handles cornerstone viewport logic including enabling, disabling, and
  * updating the viewport.
  */
-class CornerstoneViewportService extends src/* PubSubService */.hC {
+class CornerstoneViewportService extends src/* PubSubService */.Rc {
   constructor(servicesManager) {
     super(CornerstoneViewportService_EVENTS);
     this.renderingEngine = void 0;
     this.viewportsById = new Map();
     this.viewportGridResizeObserver = void 0;
     this.viewportsDisplaySets = new Map();
+    this.beforeResizePositionPresentations = new Map();
     // Some configs
     this.enableResizeDetector = void 0;
     this.resizeRefreshRateMs = void 0;
     this.resizeRefreshMode = void 0;
     this.servicesManager = null;
+    this.resizeQueue = [];
+    this.viewportResizeTimer = null;
+    this.gridResizeDelay = 50;
+    this.gridResizeTimeOut = null;
     this.renderingEngine = null;
     this.viewportGridResizeObserver = null;
     this.servicesManager = servicesManager;
@@ -8409,13 +8970,28 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
   }
 
   /**
-   * It triggers the resize on the rendering engine.
+   * It triggers the resize on the rendering engine, and renders the viewports
+   *
+   * @param isGridResize - if the resize is triggered by a grid resize
+   * this is used to avoid double resize of the viewports since if the
+   * grid is resized, all viewports will be resized so there is no need
+   * to resize them individually which will get triggered by their
+   * individual resize observers
    */
-  resize() {
-    const immediate = true;
-    const keepCamera = true;
-    this.renderingEngine.resize(immediate, keepCamera);
-    this.renderingEngine.render();
+  resize(isGridResize = false) {
+    // if there is a grid resize happening, it means the viewport grid
+    // has been manipulated (e.g., panels closed, added, etc.) and we need
+    // to resize all viewports, so we will add a timeout here to make sure
+    // we don't double resize the viewports when viewports in the grid are
+    // resized individually
+    if (isGridResize) {
+      this.performResize();
+      this.resetGridResizeTimeout();
+      this.resizeQueue = [];
+      clearTimeout(this.viewportResizeTimer);
+    } else {
+      this.enqueueViewportResizeRequest();
+    }
   }
 
   /**
@@ -8451,83 +9027,222 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
     this.viewportsById.delete(viewportId);
     this.viewportsDisplaySets.delete(viewportId);
   }
-  setPresentations(viewport, presentations) {
-    const properties = presentations?.lutPresentation?.properties;
-    if (properties) {
-      viewport.setProperties(properties);
+
+  /**
+   * Sets the presentations for a given viewport. Presentations is an object
+   * that can define the lut or position for a viewport.
+   *
+   * @param viewportId - The ID of the viewport.
+   * @param presentations - The presentations to apply to the viewport.
+   */
+  setPresentations(viewportId, presentations) {
+    const viewport = this.getCornerstoneViewport(viewportId);
+    if (!viewport) {
+      return;
+    }
+    if (!presentations) {
+      return;
+    }
+    const {
+      lutPresentation,
+      positionPresentation
+    } = presentations;
+    if (lutPresentation) {
+      const {
+        presentation
+      } = lutPresentation;
+      if (viewport instanceof esm.BaseVolumeViewport) {
+        Object.entries(presentation).forEach(([volumeId, properties]) => {
+          viewport.setProperties(properties, volumeId);
+        });
+      } else {
+        viewport.setProperties(presentation);
+      }
     }
-    const camera = presentations?.positionPresentation?.camera;
-    if (camera) {
-      viewport.setCamera(camera);
+    if (positionPresentation) {
+      const {
+        viewPlaneNormal,
+        viewUp,
+        zoom,
+        pan
+      } = positionPresentation.presentation;
+      viewport.setCamera({
+        viewPlaneNormal,
+        viewUp
+      });
+      if (zoom !== undefined) {
+        viewport.setZoom(zoom);
+      }
+      if (pan !== undefined) {
+        viewport.setPan(pan);
+      }
     }
   }
-  getPresentation(viewportId) {
+
+  /**
+   * Retrieves the position presentation information for a given viewport.
+   * @param viewportId The ID of the viewport.
+   * @returns The position presentation object containing various properties
+   * such as ID, viewport type, initial image index, view plane normal, view up, zoom, and pan.
+   */
+  getPositionPresentation(viewportId) {
     const viewportInfo = this.viewportsById.get(viewportId);
     if (!viewportInfo) {
       return;
     }
+    const presentationIds = viewportInfo.getPresentationIds();
+    if (!presentationIds) {
+      return;
+    }
     const {
-      viewportType,
-      presentationIds
-    } = viewportInfo.getViewportOptions();
+      positionPresentationId
+    } = presentationIds;
     const csViewport = this.getCornerstoneViewport(viewportId);
     if (!csViewport) {
       return;
     }
-    const properties = csViewport.getProperties();
-    if (properties.isComputedVOI) {
-      delete properties.voiRange;
-      delete properties.VOILUTFunction;
-    }
+    const {
+      viewPlaneNormal,
+      viewUp
+    } = csViewport.getCamera();
     const initialImageIndex = csViewport.getCurrentImageIdIndex();
-    const camera = csViewport.getCamera();
+    const zoom = csViewport.getZoom();
+    const pan = csViewport.getPan();
     return {
-      presentationIds,
-      viewportType: !viewportType || viewportType === 'stack' ? 'stack' : 'volume',
-      properties,
-      initialImageIndex,
-      camera
+      id: positionPresentationId,
+      viewportType: viewportInfo.getViewportType(),
+      presentation: {
+        initialImageIndex,
+        viewUp,
+        viewPlaneNormal,
+        zoom,
+        pan
+      }
     };
   }
-  storePresentation(_ref) {
-    let {
-      viewportId
-    } = _ref;
-    const stateSyncService = this.servicesManager.services.stateSyncService;
-    let presentation;
+
+  /**
+   * Retrieves the LUT (Lookup Table) presentation for a given viewport.
+   * @param viewportId The ID of the viewport.
+   * @returns The LUT presentation object, or undefined if the viewport does not exist.
+   */
+  getLutPresentation(viewportId) {
+    const viewportInfo = this.viewportsById.get(viewportId);
+    if (!viewportInfo) {
+      return;
+    }
+    const presentationIds = viewportInfo.getPresentationIds();
+    if (!presentationIds) {
+      return;
+    }
+    const {
+      lutPresentationId
+    } = presentationIds;
+    const csViewport = this.getCornerstoneViewport(viewportId);
+    if (!csViewport) {
+      return;
+    }
+    const cleanProperties = properties => {
+      if (properties.isComputedVOI) {
+        delete properties.voiRange;
+        delete properties.VOILUTFunction;
+      }
+      return properties;
+    };
+    const presentation = csViewport instanceof esm.BaseVolumeViewport ? new Map() : cleanProperties(csViewport.getProperties());
+    if (presentation instanceof Map) {
+      csViewport.getActors().forEach(({
+        uid: volumeId
+      }) => {
+        const properties = cleanProperties(csViewport.getProperties(volumeId));
+        presentation.set(volumeId, properties);
+      });
+    }
+    return {
+      id: lutPresentationId,
+      viewportType: viewportInfo.getViewportType(),
+      presentation
+    };
+  }
+
+  /**
+   * Retrieves the presentations for a given viewport.
+   * @param viewportId - The ID of the viewport.
+   * @returns The presentations for the viewport.
+   */
+  getPresentations(viewportId) {
+    const viewportInfo = this.viewportsById.get(viewportId);
+    if (!viewportInfo) {
+      return;
+    }
+    const positionPresentation = this.getPositionPresentation(viewportId);
+    const lutPresentation = this.getLutPresentation(viewportId);
+    return {
+      positionPresentation,
+      lutPresentation
+    };
+  }
+
+  /**
+   * Stores the presentation state for a given viewport inside the
+   * stateSyncService. This is used to persist the presentation state
+   * across different scenarios e.g., when the viewport is changing the
+   * display set, or when the viewport is moving to a different layout.
+   *
+   * @param viewportId The ID of the viewport.
+   */
+  storePresentation({
+    viewportId
+  }) {
+    let presentations = null;
     try {
-      presentation = this.getPresentation(viewportId);
+      presentations = this.getPresentations(viewportId);
+      if (!presentations?.positionPresentation && !presentations?.lutPresentation) {
+        return;
+      }
     } catch (error) {
       console.warn(error);
-    }
-    if (!presentation || !presentation.presentationIds) {
       return;
     }
     const {
-      lutPresentationStore,
-      positionPresentationStore
+      stateSyncService,
+      syncGroupService
+    } = this.servicesManager.services;
+    const synchronizers = syncGroupService.getSynchronizersForViewport(viewportId, this.renderingEngine.id);
+    const {
+      positionPresentationStore,
+      synchronizersStore,
+      lutPresentationStore
     } = stateSyncService.getState();
     const {
-      presentationIds
-    } = presentation;
+      lutPresentation,
+      positionPresentation
+    } = presentations;
     const {
-      lutPresentationId,
-      positionPresentationId
-    } = presentationIds || {};
-    const storeState = {};
+      id: positionPresentationId
+    } = positionPresentation;
+    const {
+      id: lutPresentationId
+    } = lutPresentation;
+    const updateStore = (store, id, value) => ({
+      ...store,
+      [id]: value
+    });
+    const newState = {};
     if (lutPresentationId) {
-      storeState.lutPresentationStore = {
-        ...lutPresentationStore,
-        [lutPresentationId]: presentation
-      };
+      newState.lutPresentationStore = updateStore(lutPresentationStore, lutPresentationId, lutPresentation);
     }
     if (positionPresentationId) {
-      storeState.positionPresentationStore = {
-        ...positionPresentationStore,
-        [positionPresentationId]: presentation
-      };
+      newState.positionPresentationStore = updateStore(positionPresentationStore, positionPresentationId, positionPresentation);
     }
-    stateSyncService.store(storeState);
+    if (synchronizers?.length) {
+      newState.synchronizersStore = updateStore(synchronizersStore, viewportId, synchronizers.map(synchronizer => ({
+        id: synchronizer.id,
+        sourceViewports: [...synchronizer.getSourceViewports()],
+        targetViewports: [...synchronizer.getTargetViewports()]
+      })));
+    }
+    stateSyncService.store(newState);
   }
 
   /**
@@ -8595,16 +9310,25 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
     viewportInfo.setViewportId(viewportId);
     this.viewportsById.set(viewportId, viewportInfo);
     const viewport = renderingEngine.getViewport(viewportId);
-    this._setDisplaySets(viewport, viewportData, viewportInfo, presentations);
+    const displaySetPromise = this._setDisplaySets(viewport, viewportData, viewportInfo, presentations);
 
     // The broadcast event here ensures that listeners have a valid, up to date
     // viewport to access.  Doing it too early can result in exceptions or
     // invalid data.
-    this._broadcastEvent(this.EVENTS.VIEWPORT_DATA_CHANGED, {
-      viewportData,
-      viewportId
+    displaySetPromise.then(() => {
+      this._broadcastEvent(this.EVENTS.VIEWPORT_DATA_CHANGED, {
+        viewportData,
+        viewportId
+      });
     });
   }
+
+  /**
+   * Retrieves the Cornerstone viewport with the specified ID.
+   *
+   * @param viewportId - The ID of the viewport.
+   * @returns The Cornerstone viewport object if found, otherwise null.
+   */
   getCornerstoneViewport(viewportId) {
     const viewportInfo = this.getViewportInfo(viewportId);
     if (!viewportInfo || !this.renderingEngine || this.renderingEngine.hasBeenDestroyed) {
@@ -8613,10 +9337,40 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
     const viewport = this.renderingEngine.getViewport(viewportId);
     return viewport;
   }
+
+  /**
+   * Retrieves the viewport information for a given viewport ID. The viewport information
+   * is the OHIF construct that holds different options and data for a given viewport and
+   * is different from the cornerstone viewport.
+   *
+   * @param viewportId The ID of the viewport.
+   * @returns The viewport information.
+   */
   getViewportInfo(viewportId) {
     return this.viewportsById.get(viewportId);
   }
-  _setStackViewport(viewport, viewportData, viewportInfo, presentations) {
+
+  /**
+   * Looks through the viewports to see if the specified measurement can be
+   * displayed in one of the viewports.
+   *
+   * @param measurement
+   *          The measurement that is desired to view.
+   * @param activeViewportId - the index that was active at the time the jump
+   *          was initiated.
+   * @return the viewportId that the measurement should be displayed in.
+   */
+  getViewportIdToJump(activeViewportId, displaySetInstanceUID, cameraProps) {
+    const viewportInfo = this.getViewportInfo(activeViewportId);
+    const {
+      referencedImageId
+    } = cameraProps;
+    if (viewportInfo?.contains(displaySetInstanceUID, referencedImageId)) {
+      return activeViewportId;
+    }
+    return [...this.viewportsById.values()].find(viewportInfo => viewportInfo.contains(displaySetInstanceUID, referencedImageId))?.viewportId ?? null;
+  }
+  async _setStackViewport(viewport, viewportData, viewportInfo, presentations = {}) {
     const displaySetOptions = viewportInfo.getDisplaySetOptions();
     const {
       imageIds,
@@ -8634,7 +9388,8 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
     if (!presentations.lutPresentation?.properties) {
       const {
         voi,
-        voiInverted
+        voiInverted,
+        colormap
       } = displaySetOptions[0];
       if (voi && (voi.windowWidth || voi.windowCenter)) {
         const {
@@ -8649,15 +9404,15 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
       if (voiInverted !== undefined) {
         properties.invert = voiInverted;
       }
+      if (colormap !== undefined) {
+        properties.colormap = colormap;
+      }
     }
-    viewport.setStack(imageIds, initialImageIndexToUse).then(() => {
+    return viewport.setStack(imageIds, initialImageIndexToUse).then(() => {
       viewport.setProperties({
         ...properties
       });
-      const camera = presentations.positionPresentation?.camera;
-      if (camera) {
-        viewport.setCamera(camera);
-      }
+      this.setPresentations(viewport.id, presentations);
     });
   }
   _getInitialImageIndexForViewport(viewportInfo, imageIds) {
@@ -8709,7 +9464,7 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
     }
     return 0;
   }
-  async _setVolumeViewport(viewport, viewportData, viewportInfo, presentations) {
+  async _setVolumeViewport(viewport, viewportData, viewportInfo, presentations = {}) {
     // TODO: We need to overhaul the way data sources work so requests can be made
     // async. I think we should follow the image loader pattern which is async and
     // has a cache behind it.
@@ -8814,14 +9569,13 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
       };
     });
     await viewport.setVolumes(volumeInputArray);
-    volumesProperties.forEach(_ref2 => {
-      let {
-        properties,
-        volumeId
-      } = _ref2;
+    volumesProperties.forEach(({
+      properties,
+      volumeId
+    }) => {
       viewport.setProperties(properties, volumeId);
     });
-    this.setPresentations(viewport, presentations);
+    this.setPresentations(viewport.id, presentations);
 
     // load any secondary displaySets
     const displaySetInstanceUIDs = this.viewportsDisplaySets.get(viewport.id);
@@ -8918,34 +9672,37 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
 
   // Todo: keepCamera is an interim solution until we have a better solution for
   // keeping the camera position when the viewport data is changed
-  updateViewport(viewportId, viewportData) {
-    let keepCamera = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  updateViewport(viewportId, viewportData, keepCamera = false) {
     const viewportInfo = this.getViewportInfo(viewportId);
     const viewport = this.getCornerstoneViewport(viewportId);
     const viewportCamera = viewport.getCamera();
+    let displaySetPromise;
     if (viewport instanceof esm.VolumeViewport || viewport instanceof esm.VolumeViewport3D) {
-      this._setVolumeViewport(viewport, viewportData, viewportInfo).then(() => {
+      displaySetPromise = this._setVolumeViewport(viewport, viewportData, viewportInfo).then(() => {
         if (keepCamera) {
           viewport.setCamera(viewportCamera);
           viewport.render();
         }
       });
-      return;
     }
     if (viewport instanceof esm.StackViewport) {
-      this._setStackViewport(viewport, viewportData, viewportInfo);
-      return;
+      displaySetPromise = this._setStackViewport(viewport, viewportData, viewportInfo);
     }
+    displaySetPromise.then(() => {
+      this._broadcastEvent(this.EVENTS.VIEWPORT_DATA_CHANGED, {
+        viewportData,
+        viewportId
+      });
+    });
   }
-  _setDisplaySets(viewport, viewportData, viewportInfo) {
-    let presentations = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  _setDisplaySets(viewport, viewportData, viewportInfo, presentations = {}) {
     if (viewport instanceof esm.StackViewport) {
-      this._setStackViewport(viewport, viewportData, viewportInfo, presentations);
-    } else if (viewport instanceof esm.VolumeViewport || viewport instanceof esm.VolumeViewport3D) {
-      this._setVolumeViewport(viewport, viewportData, viewportInfo, presentations);
-    } else {
-      throw new Error('Unknown viewport type');
+      return this._setStackViewport(viewport, viewportData, viewportInfo, presentations);
     }
+    if ([esm.VolumeViewport, esm.VolumeViewport3D].some(type => viewport instanceof type)) {
+      return this._setVolumeViewport(viewport, viewportData, viewportInfo, presentations);
+    }
+    throw new Error('Unknown viewport type');
   }
 
   /**
@@ -9008,36 +9765,67 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
       return images[0].FrameOfReferenceUID;
     }
   }
+  enqueueViewportResizeRequest() {
+    this.resizeQueue.push(false); // false indicates viewport resize
 
-  /**
-   * Looks through the viewports to see if the specified measurement can be
-   * displayed in one of the viewports.
-   *
-   * @param measurement
-   *          The measurement that is desired to view.
-   * @param activeViewportId - the index that was active at the time the jump
-   *          was initiated.
-   * @return the viewportId that the measurement should be displayed in.
-   */
-  getViewportIdToJump(activeViewportId, displaySetInstanceUID, cameraProps) {
-    const viewportInfo = this.getViewportInfo(activeViewportId);
-    const {
-      referencedImageId
-    } = cameraProps;
-    if (viewportInfo?.contains(displaySetInstanceUID, referencedImageId)) {
-      return activeViewportId;
+    clearTimeout(this.viewportResizeTimer);
+    this.viewportResizeTimer = setTimeout(() => {
+      this.processViewportResizeQueue();
+    }, this.gridResizeDelay);
+  }
+  processViewportResizeQueue() {
+    const isGridResizeInQueue = this.resizeQueue.some(isGridResize => isGridResize);
+    if (this.resizeQueue.length > 0 && !isGridResizeInQueue && !this.gridResizeTimeOut) {
+      this.performResize();
     }
-    return [...this.viewportsById.values()].find(viewportInfo => viewportInfo.contains(displaySetInstanceUID, referencedImageId))?.viewportId ?? null;
+
+    // Clear the queue after processing viewport resizes
+    this.resizeQueue = [];
+  }
+  performResize() {
+    const isImmediate = false;
+    const viewports = this.getRenderingEngine().getViewports();
+
+    // Store the current position presentations for each viewport.
+    viewports.forEach(({
+      id
+    }) => {
+      const presentation = this.getPositionPresentation(id);
+      this.beforeResizePositionPresentations.set(id, presentation);
+    });
+
+    // Resize the rendering engine and render.
+    const renderingEngine = this.renderingEngine;
+    renderingEngine.resize(isImmediate);
+    renderingEngine.render();
+
+    // Reset the camera for viewports that should reset their camera on resize,
+    // which means only those viewports that have a zoom level of 1.
+    this.beforeResizePositionPresentations.forEach((positionPresentation, viewportId) => {
+      this.setPresentations(viewportId, {
+        positionPresentation
+      });
+    });
+
+    // Resize and render the rendering engine again.
+    renderingEngine.resize(isImmediate);
+    renderingEngine.render();
+  }
+  resetGridResizeTimeout() {
+    clearTimeout(this.gridResizeTimeOut);
+    this.gridResizeTimeOut = setTimeout(() => {
+      this.gridResizeTimeOut = null;
+    }, this.gridResizeDelay);
   }
 }
+CornerstoneViewportService_class = CornerstoneViewportService;
 CornerstoneViewportService.REGISTRATION = {
   name: 'cornerstoneViewportService',
   altName: 'CornerstoneViewportService',
-  create: _ref3 => {
-    let {
-      servicesManager
-    } = _ref3;
-    return new CornerstoneViewportService(servicesManager);
+  create: ({
+    servicesManager
+  }) => {
+    return new CornerstoneViewportService_class(servicesManager);
   }
 };
 /* harmony default export */ const ViewportService_CornerstoneViewportService = (CornerstoneViewportService);
@@ -9045,7 +9833,7 @@ CornerstoneViewportService.REGISTRATION = {
 
 
 // EXTERNAL MODULE: ../../../node_modules/dicomweb-client/build/dicomweb-client.es.js
-var dicomweb_client_es = __webpack_require__(97604);
+var dicomweb_client_es = __webpack_require__(36922);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/dicomLoaderService.js
 
 
@@ -9086,8 +9874,7 @@ const getNonImageInstance = dataset => {
 const getImageInstanceId = imageInstance => {
   return getImageId(imageInstance);
 };
-const fetchIt = function (url) {
-  let headers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : src.DICOMWeb.getAuthorizationHeader();
+const fetchIt = (url, headers = src.DICOMWeb.getAuthorizationHeader()) => {
   return fetch(url, headers).then(response => response.arrayBuffer());
 };
 const cornerstoneRetriever = imageId => {
@@ -9095,15 +9882,13 @@ const cornerstoneRetriever = imageId => {
     return image && image.data && image.data.byteArray.buffer;
   });
 };
-const wadorsRetriever = function (url, studyInstanceUID, seriesInstanceUID, sopInstanceUID) {
-  let headers = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : src.DICOMWeb.getAuthorizationHeader();
-  let errorInterceptor = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : src/* errorHandler */.Po.getHTTPErrorHandler();
+const wadorsRetriever = (url, studyInstanceUID, seriesInstanceUID, sopInstanceUID, headers = src.DICOMWeb.getAuthorizationHeader(), errorInterceptor = src/* errorHandler */.r_.getHTTPErrorHandler()) => {
   const config = {
     url,
     headers,
     errorInterceptor
   };
-  const dicomWeb = new dicomweb_client_es.api.DICOMwebClient(config);
+  const dicomWeb = new dicomweb_client_es/* api */.FH.DICOMwebClient(config);
   return dicomWeb.retrieveInstance({
     studyInstanceUID,
     seriesInstanceUID,
@@ -9176,7 +9961,8 @@ class DicomLoaderService {
       SOPInstanceUID,
       authorizationHeaders,
       wadoRoot,
-      wadoUri
+      wadoUri,
+      instance
     } = dataset;
     // Retrieve wadors or just try to fetch wadouri
     if (!someInvalidStrings(wadoRoot)) {
@@ -9185,6 +9971,15 @@ class DicomLoaderService {
       return fetchIt(wadoUri, {
         headers: authorizationHeaders
       });
+    } else if (!someInvalidStrings(instance?.url)) {
+      // make sure the url is absolute, remove the scope
+      // from it if it is not absolute. For instance it might be dicomweb:http://....
+      // and we need to remove the dicomweb: part
+      const url = instance.url;
+      const absoluteUrl = url.startsWith('http') ? url : url.substring(url.indexOf(':') + 1);
+      return fetchIt(absoluteUrl, {
+        headers: authorizationHeaders
+      });
     }
   }
   *getLoaderIterator(dataset, studies, headers) {
@@ -9209,10 +10004,10 @@ class DicomLoaderService {
 const dicomLoaderService = new DicomLoaderService();
 /* harmony default export */ const utils_dicomLoaderService = (dicomLoaderService);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/package.json
-const package_namespaceObject = JSON.parse('{"u2":"@ohif/extension-cornerstone"}');
+const package_namespaceObject = /*#__PURE__*/JSON.parse('{"UU":"@ohif/extension-cornerstone"}');
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/id.js
 
-const id = package_namespaceObject.u2;
+const id = package_namespaceObject.UU;
 
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/index.ts
 
@@ -9238,10 +10033,11 @@ function src_extends() { src_extends = Object.assign ? Object.assign.bind() : fu
 
 
 
+
 
 
 const Component = /*#__PURE__*/react.lazy(() => {
-  return Promise.all(/* import() */[__webpack_require__.e(23), __webpack_require__.e(181)]).then(__webpack_require__.bind(__webpack_require__, 86181));
+  return __webpack_require__.e(/* import() */ 889).then(__webpack_require__.bind(__webpack_require__, 1889));
 });
 const OHIFCornerstoneViewport = props => {
   return /*#__PURE__*/react.createElement(react.Suspense, {
@@ -9264,7 +10060,7 @@ const cornerstoneExtension = {
       esm.imageLoadPoolManager.clearRequestStack(type);
       esm.imageRetrievalPoolManager.clearRequestStack(type);
     });
-    (0,state/* reset */.mc)();
+    (0,state/* reset */.cL)();
   },
   /**
    * Register the Cornerstone 3D services and set them up for use.
@@ -9283,11 +10079,10 @@ const cornerstoneExtension = {
     return init.call(this, props);
   },
   getHangingProtocolModule: src_getHangingProtocolModule,
-  getViewportModule(_ref) {
-    let {
-      servicesManager,
-      commandsManager
-    } = _ref;
+  getViewportModule({
+    servicesManager,
+    commandsManager
+  }) {
     const ExtendedOHIFCornerstoneViewport = props => {
       // const onNewImageHandler = jumpData => {
       //   commandsManager.runCommand('jumpToImage', jumpData);
@@ -9308,10 +10103,9 @@ const cornerstoneExtension = {
   },
   getCommandsModule: src_commandsModule,
   getCustomizationModule: src_getCustomizationModule,
-  getUtilityModule(_ref2) {
-    let {
-      servicesManager
-    } = _ref2;
+  getUtilityModule({
+    servicesManager
+  }) {
     return [{
       name: 'common',
       exports: {
@@ -9321,7 +10115,7 @@ const cornerstoneExtension = {
             cornerstoneTools: dist_esm
           };
         },
-        getEnabledElement: state/* getEnabledElement */.K8,
+        getEnabledElement: state/* getEnabledElement */.kJ,
         dicomLoaderService: utils_dicomLoaderService
       }
     }, {
@@ -9343,14 +10137,13 @@ const cornerstoneExtension = {
 
 /***/ }),
 
-/***/ 73704:
+/***/ 71353:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-"use strict";
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   K8: () => (/* binding */ getEnabledElement),
-/* harmony export */   Yc: () => (/* binding */ setEnabledElement),
-/* harmony export */   mc: () => (/* binding */ reset)
+/* harmony export */   cL: () => (/* binding */ reset),
+/* harmony export */   kJ: () => (/* binding */ getEnabledElement),
+/* harmony export */   ye: () => (/* binding */ setEnabledElement)
 /* harmony export */ });
 const state = {
   // The `defaultContext` of an extension's commandsModule
@@ -9386,14 +10179,13 @@ const reset = () => {
 
 /***/ }),
 
-/***/ 87172:
+/***/ 1663:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-"use strict";
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   Z: () => (/* binding */ getSOPInstanceAttributes)
+/* harmony export */   A: () => (/* binding */ getSOPInstanceAttributes)
 /* harmony export */ });
-/* harmony import */ var _cornerstonejs_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3743);
+/* harmony import */ var _cornerstonejs_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(39526);
 
 
 /**
@@ -9410,7 +10202,6 @@ function getSOPInstanceAttributes(imageId) {
 
   // Todo: implement for volume viewports and use the referencedSeriesInstanceUID
 }
-
 function _getUIDFromImageID(imageId) {
   const instance = _cornerstonejs_core__WEBPACK_IMPORTED_MODULE_0__.metaData.get('instance', imageId);
   return {
@@ -9421,13 +10212,6 @@ function _getUIDFromImageID(imageId) {
   };
 }
 
-/***/ }),
-
-/***/ 78753:
-/***/ (() => {
-
-/* (ignored) */
-
 /***/ })
 
 }]);