@ohif/app 3.8.0-beta.5 → 3.8.0-beta.51

package/dist/{82.bundle.9e269153bafc15562988.js → 290.bundle.744ac8d04daee807702f.js}

@@ -1,14 +1,15 @@
-(self["webpackChunk"] = self["webpackChunk"] || []).push([[82],{
+"use strict";
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[290],{
 
-/***/ 78227:
+/***/ 21290:
 /***/ ((__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),
@@ -34,14 +35,14 @@ __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: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 376 modules
+var esm = __webpack_require__(64225);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 454 modules
+var dist_esm = __webpack_require__(76634);
 // EXTERNAL MODULE: ../../core/src/index.ts + 65 modules
 var src = __webpack_require__(71771);
 // 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__(15793);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/dicom-image-loader/dist/dynamic-import/cornerstoneDICOMImageLoader.min.js
 var cornerstoneDICOMImageLoader_min = __webpack_require__(61539);
 var cornerstoneDICOMImageLoader_min_default = /*#__PURE__*/__webpack_require__.n(cornerstoneDICOMImageLoader_min);
@@ -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
@@ -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__(18414);
 ;// 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)) {
@@ -192,11 +190,10 @@ function callInputDialog(uiDialogService, data, callback) {
           type: ui_src/* ButtonEnums.type */.LZ.dt.primary
         }],
         onSubmit: onSubmitHandler,
-        body: _ref2 => {
-          let {
-            value,
-            setValue
-          } = _ref2;
+        body: ({
+          value,
+          setValue
+        }) => {
           return /*#__PURE__*/react.createElement(ui_src/* Input */.II, {
             autoFocus: true,
             className: "border-primary-main bg-black",
@@ -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__(3225);
+;// 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 */.Mi)(overlay.pixelData.InlineBinary);
+        const arrayBuffer = await blob.arrayBuffer();
+        pixelData = arrayBuffer;
       }
       if (!pixelData) {
         return;
@@ -490,7 +532,7 @@ 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)(),
@@ -499,11 +541,8 @@ class ImageOverlayViewerTool extends dist_esm.AnnotationDisplayTool {
         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);
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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),
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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;
     }
@@ -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;
     }
@@ -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
@@ -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);
@@ -3470,10 +3515,9 @@ const imageTiming = {
  *
  */
 
-function initViewTiming(_ref) {
-  let {
-    element
-  } = _ref;
+function initViewTiming({
+  element
+}) {
   if (!IMAGE_TIMING_KEYS.find(key => src/* log */.cM.timingKeys[key])) {
     return;
   }
@@ -3518,14 +3562,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 +3583,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 +3618,8 @@ async function init(_ref) {
     toolGroupService,
     toolbarService,
     viewportGridService,
-    stateSyncService
+    stateSyncService,
+    syncGroupService
   } = servicesManager.services;
   window.services = servicesManager.services;
   window.extensionManager = extensionManager;
@@ -3597,6 +3641,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', {
@@ -3710,6 +3759,17 @@ async function init(_ref) {
       });
     });
   };
+
+  /**
+   * Runs error handler for failed requests.
+   * @param event
+   */
+  const imageLoadFailedHandler = ({
+    detail
+  }) => {
+    const handler = src/* errorHandler */.Po.getHTTPErrorHandler();
+    handler(detail.error);
+  };
   const resetCrosshairs = evt => {
     const {
       element
@@ -3737,6 +3797,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 +3822,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);
@@ -3793,7 +3854,7 @@ var es = __webpack_require__(74834);
 var prop_types = __webpack_require__(3827);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
 // EXTERNAL MODULE: ../../../node_modules/classnames/index.js
-var classnames = __webpack_require__(44921);
+var classnames = __webpack_require__(33901);
 var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/DicomFileUploader.ts
 
@@ -3956,10 +4017,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());
@@ -4055,11 +4115,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);
@@ -4324,12 +4383,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 => {
@@ -4342,48 +4400,39 @@ function DicomUpload(_ref) {
         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 */.Z, {
+      onDrop: onDrop,
+      noDrag: true
+    }, ({
+      getRootProps,
+      getInputProps
+    }) => /*#__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
+    }, ({
+      getRootProps,
+      getInputProps
+    }) => /*#__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)")));
   };
   return /*#__PURE__*/react.createElement(react.Fragment, null, dicomFileUploaderArr.length ? /*#__PURE__*/react.createElement("div", {
     className: classnames_default()('h-[calc(100vh-300px)]', baseClassNames)
@@ -4444,6 +4493,8 @@ 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__(45451);
 // EXTERNAL MODULE: ../../../node_modules/html2canvas/dist/html2canvas.esm.js
 var html2canvas_esm = __webpack_require__(76010);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/CornerstoneViewportDownloadForm.tsx
@@ -4458,12 +4509,11 @@ 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 CornerstoneViewportDownloadForm = ({
+  onClose,
+  activeViewportId: activeViewportIdProp,
+  cornerstoneViewportService
+}) => {
   const enabledElement = (0,state/* getEnabledElement */.K8)(activeViewportIdProp);
   const activeViewportElement = enabledElement?.element;
   const activeViewportEnabledElement = (0,esm.getEnabledElement)(activeViewportElement);
@@ -4674,16 +4724,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 +4753,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 +4816,11 @@ function getReconstructableStackViewports(viewportGridService, displaySetService
 
 
 
-function commandsModule(_ref) {
-  let {
-    servicesManager,
-    commandsManager
-  } = _ref;
+
+function commandsModule({
+  servicesManager,
+  commandsManager
+}) {
   const {
     viewportGridService,
     toolGroupService,
@@ -4835,19 +4884,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 +4918,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 +4929,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 +5006,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 +5016,10 @@ function commandsModule(_ref) {
       }
       viewportGridService.setActiveViewportId(viewportId);
     },
-    arrowTextCallback: _ref7 => {
-      let {
-        callback,
-        data
-      } = _ref7;
+    arrowTextCallback: ({
+      callback,
+      data
+    }) => {
       utils_callInputDialog(uiDialogService, data, callback);
     },
     cleanUpCrosshairs: () => {
@@ -5013,12 +5056,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 +5098,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 +5187,9 @@ function commandsModule(_ref) {
         });
       }
     },
-    rotateViewport: _ref10 => {
-      let {
-        rotation
-      } = _ref10;
+    rotateViewport: ({
+      rotation
+    }) => {
       const enabledElement = _getActiveViewportEnabledElement();
       if (!enabledElement) {
         return;
@@ -5157,10 +5197,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 */._E.identity(new Float32Array(16));
+        gl_matrix_esm/* mat4.rotate */._E.rotate(rotMat, rotMat, rotAngle, camera.viewPlaneNormal);
+        const rotatedViewUp = gl_matrix_esm/* vec3.transformMat4 */.R3.transformMat4(gl_matrix_esm/* vec3.create */.R3.create(), camera.viewUp, rotMat);
+        viewport.setCamera({
+          viewUp: rotatedViewUp
+        });
+        viewport.render();
+      } else if (viewport.getRotation !== undefined) {
+        const currentRotation = viewport.getRotation();
         const newRotation = (currentRotation + rotation) % 360;
         viewport.setProperties({
           rotation: newRotation
@@ -5204,10 +5252,9 @@ function commandsModule(_ref) {
         viewport.render();
       }
     },
-    invertViewport: _ref11 => {
-      let {
-        element
-      } = _ref11;
+    invertViewport: ({
+      element
+    }) => {
       let enabledElement;
       if (element === undefined) {
         enabledElement = _getActiveViewportEnabledElement();
@@ -5236,19 +5283,13 @@ function commandsModule(_ref) {
       const {
         viewport
       } = enabledElement;
-      if (viewport instanceof esm.StackViewport) {
-        viewport.resetProperties();
-        viewport.resetCamera();
-      } else {
-        viewport.resetProperties();
-        viewport.resetCamera();
-      }
+      viewport.resetProperties?.();
+      viewport.resetCamera();
       viewport.render();
     },
-    scaleViewport: _ref12 => {
-      let {
-        direction
-      } = _ref12;
+    scaleViewport: ({
+      direction
+    }) => {
       const enabledElement = _getActiveViewportEnabledElement();
       const scaleFactor = direction > 0 ? 0.9 : 1.1;
       if (!enabledElement) {
@@ -5273,11 +5314,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) {
@@ -5311,10 +5351,9 @@ function commandsModule(_ref) {
       };
       dist_esm.utilities.jumpToSlice(viewport.element, options);
     },
-    scroll: _ref14 => {
-      let {
-        direction
-      } = _ref14;
+    scroll: ({
+      direction
+    }) => {
       const enabledElement = _getActiveViewportEnabledElement();
       if (!enabledElement) {
         return;
@@ -5327,13 +5366,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 => {
@@ -5351,10 +5389,9 @@ function commandsModule(_ref) {
         viewport.render();
       }
     },
-    changeActiveViewport: _ref16 => {
-      let {
-        direction = 1
-      } = _ref16;
+    changeActiveViewport: ({
+      direction = 1
+    }) => {
       const {
         activeViewportId,
         viewports
@@ -5364,20 +5401,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
@@ -5390,14 +5425,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 = {
@@ -5532,8 +5585,8 @@ function commandsModule(_ref) {
     setViewportColormap: {
       commandFn: actions.setViewportColormap
     },
-    toggleStackImageSync: {
-      commandFn: actions.toggleStackImageSync
+    toggleImageSliceSync: {
+      commandFn: actions.toggleImageSliceSync
     },
     setSourceViewportForReferenceLinesTool: {
       commandFn: actions.setSourceViewportForReferenceLinesTool
@@ -5546,6 +5599,9 @@ function commandsModule(_ref) {
     },
     cleanUpCrosshairs: {
       commandFn: actions.cleanUpCrosshairs
+    },
+    attachProtocolViewportDataListener: {
+      commandFn: actions.attachProtocolViewportDataListener
     }
   };
   return {
@@ -5555,35 +5611,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',
@@ -5597,33 +5637,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',
@@ -5638,14 +5662,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'
         },
@@ -5657,14 +5696,13 @@ const mpr = {
         }]
       },
       displaySets: [{
-        id: 'activeDisplaySet'
+        id: 'mprDisplaySet'
       }]
     }, {
       viewportOptions: {
-        viewportId: 'mpr-coronal',
         toolGroupId: 'mpr',
         viewportType: 'volume',
-        orientation: 'coronal',
+        orientation: 'sagittal',
         initialImageOptions: {
           preset: 'middle'
         },
@@ -5676,15 +5714,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: {},
@@ -5702,28 +5741,57 @@ 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',
@@ -5743,9 +5811,399 @@ const mprAnd3DVolumeViewport = {
       }]
     }, {
       viewportOptions: {
-        toolGroupId: 'volume3d',
-        viewportType: 'volume3d',
-        orientation: 'coronal',
+        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: [{
+      viewportOptions: {
+        toolGroupId: 'mpr',
+        viewportType: 'volume',
+        orientation: 'axial',
+        initialImageOptions: {
+          preset: 'middle'
+        },
+        syncGroups: [{
+          type: 'voi',
+          id: 'mpr',
+          source: true,
+          target: true
+        }]
+      },
+      displaySets: [{
+        id: 'mprDisplaySet'
+      }]
+    }, {
+      viewportOptions: {
+        toolGroupId: 'volume3d',
+        viewportType: 'volume3d',
+        orientation: 'coronal',
+        customViewportProps: {
+          hideOverlays: true
+        }
+      },
+      displaySets: [{
+        id: 'mprDisplaySet',
+        options: {
+          displayPreset: 'CT-Bone'
+        }
+      }]
+    }, {
+      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/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
         }
@@ -5753,9 +6211,28 @@ const mprAnd3DVolumeViewport = {
       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',
@@ -5795,6 +6272,122 @@ const mprAnd3DVolumeViewport = {
     }]
   }]
 };
+;// 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'
+        },
+        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'
+      }]
+    }]
+  }]
+};
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/getHangingProtocolModule.ts
+
+
+
+
+
+
+
 function getHangingProtocolModule() {
   return [{
     name: mpr.id,
@@ -5802,10 +6395,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;
 
 
 
@@ -5929,8 +6538,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);
@@ -5992,49 +6600,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
@@ -6060,20 +6663,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 = {
@@ -6101,7 +6705,7 @@ 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 = {};
@@ -6126,6 +6730,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) {
@@ -6166,6 +6773,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;
@@ -6187,22 +6797,19 @@ 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_default = /*#__PURE__*/__webpack_require__.n(lodash_isequal);
@@ -6254,24 +6861,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 {
@@ -6290,16 +6894,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 = {
@@ -6326,13 +6927,10 @@ const SEGMENT_CONSTANT = {
 };
 const VOLUME_LOADER_SCHEME = 'cornerstoneStreamingImageVolume';
 class SegmentationService extends src/* PubSubService */.hC {
-  constructor(_ref) {
-    var _this;
-    let {
-      servicesManager
-    } = _ref;
+  constructor({
+    servicesManager
+  }) {
     super(SegmentationService_EVENTS);
-    _this = this;
     this.segmentations = void 0;
     this.servicesManager = void 0;
     this.highlightIntervalId = null;
@@ -6473,7 +7071,6 @@ class SegmentationService extends src/* PubSubService */.hC {
           }
         }
       };
-
       this.addOrUpdateSegmentation(segmentation);
       return segmentationId;
     };
@@ -6486,11 +7083,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.`);
       }
@@ -6498,9 +7092,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, [{
@@ -6509,8 +7100,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) {
@@ -6526,20 +7116,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
         });
       }
@@ -6563,18 +7153,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
         });
       }
@@ -6632,11 +7221,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);
@@ -6683,32 +7271,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');
       }
@@ -6719,23 +7305,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');
       }
@@ -6746,7 +7331,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
         });
       }
@@ -6869,15 +7454,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.
      *
@@ -6906,8 +7482,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"');
     }
@@ -7021,8 +7596,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) {
@@ -7067,8 +7641,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;
@@ -7103,9 +7676,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;
@@ -7135,15 +7706,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 || '',
@@ -7151,8 +7713,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({
@@ -7166,8 +7727,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;
@@ -7273,8 +7833,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;
@@ -7291,12 +7850,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,
@@ -7349,7 +7905,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,
@@ -7397,12 +7952,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;
@@ -7442,11 +7993,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);
     }
@@ -7592,8 +8139,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}`);
@@ -7645,12 +8191,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) {
@@ -7667,8 +8211,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}`);
@@ -7716,8 +8259,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}`);
@@ -7734,8 +8276,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,
@@ -7761,8 +8302,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}`);
@@ -7840,11 +8380,10 @@ class SegmentationService extends src/* PubSubService */.hC {
       esm.cache.removeVolumeLoadObject(segmentationId);
     }
   }
-  _updateCornerstoneSegmentations(_ref3) {
-    let {
-      segmentationId,
-      notYetUpdatedAtSource
-    } = _ref3;
+  _updateCornerstoneSegmentations({
+    segmentationId,
+    notYetUpdatedAtSource
+  }) {
     if (notYetUpdatedAtSource === false) {
       return;
     }
@@ -7881,19 +8420,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
     });
   }
@@ -7923,6 +8458,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';
@@ -7976,12 +8512,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;
   }
@@ -8068,12 +8601,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
@@ -8096,14 +8626,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);
@@ -8233,12 +8763,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;
@@ -8310,8 +8837,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;
@@ -8351,6 +8877,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;
 
 
 
@@ -8494,11 +9021,13 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
       camera
     };
   }
-  storePresentation(_ref) {
-    let {
-      viewportId
-    } = _ref;
-    const stateSyncService = this.servicesManager.services.stateSyncService;
+  storePresentation({
+    viewportId
+  }) {
+    const {
+      stateSyncService,
+      syncGroupService
+    } = this.servicesManager.services;
     let presentation;
     try {
       presentation = this.getPresentation(viewportId);
@@ -8508,9 +9037,11 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
     if (!presentation || !presentation.presentationIds) {
       return;
     }
+    const synchronizers = syncGroupService.getSynchronizersForViewport(viewportId, this.renderingEngine.id);
     const {
       lutPresentationStore,
-      positionPresentationStore
+      positionPresentationStore,
+      synchronizersStore
     } = stateSyncService.getState();
     const {
       presentationIds
@@ -8532,6 +9063,20 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
         [positionPresentationId]: presentation
       };
     }
+    if (synchronizers?.length) {
+      storeState.synchronizersStore = {
+        ...synchronizersStore,
+        [viewportId]: synchronizers.map(synchronizer => {
+          const sourceViewports = synchronizer.getSourceViewports();
+          const targetViewports = synchronizer.getTargetViewports();
+          return {
+            id: synchronizer.id,
+            sourceViewports: [...sourceViewports],
+            targetViewports: [...targetViewports]
+          };
+        })
+      };
+    }
     stateSyncService.store(storeState);
   }
 
@@ -8600,14 +9145,16 @@ 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
+      });
     });
   }
   getCornerstoneViewport(viewportId) {
@@ -8621,7 +9168,7 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
   getViewportInfo(viewportId) {
     return this.viewportsById.get(viewportId);
   }
-  _setStackViewport(viewport, viewportData, viewportInfo, presentations) {
+  async _setStackViewport(viewport, viewportData, viewportInfo, presentations) {
     const displaySetOptions = viewportInfo.getDisplaySetOptions();
     const {
       imageIds,
@@ -8639,7 +9186,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 {
@@ -8654,8 +9202,11 @@ 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
       });
@@ -8819,11 +9370,10 @@ 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);
@@ -8923,31 +9473,34 @@ 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);
+      return this._setStackViewport(viewport, viewportData, viewportInfo, presentations);
     } else if (viewport instanceof esm.VolumeViewport || viewport instanceof esm.VolumeViewport3D) {
-      this._setVolumeViewport(viewport, viewportData, viewportInfo, presentations);
+      return this._setVolumeViewport(viewport, viewportData, viewportInfo, presentations);
     } else {
       throw new Error('Unknown viewport type');
     }
@@ -9035,14 +9588,14 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
     return [...this.viewportsById.values()].find(viewportInfo => viewportInfo.contains(displaySetInstanceUID, referencedImageId))?.viewportId ?? null;
   }
 }
+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);
@@ -9091,8 +9644,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 => {
@@ -9100,9 +9652,7 @@ 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 */.Po.getHTTPErrorHandler()) => {
   const config = {
     url,
     headers,
@@ -9181,7 +9731,8 @@ class DicomLoaderService {
       SOPInstanceUID,
       authorizationHeaders,
       wadoRoot,
-      wadoUri
+      wadoUri,
+      instance
     } = dataset;
     // Retrieve wadors or just try to fetch wadouri
     if (!someInvalidStrings(wadoRoot)) {
@@ -9190,6 +9741,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) {
@@ -9243,6 +9803,7 @@ function src_extends() { src_extends = Object.assign ? Object.assign.bind() : fu
 
 
 
+
 
 
 const Component = /*#__PURE__*/react.lazy(() => {
@@ -9288,11 +9849,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);
@@ -9313,10 +9873,9 @@ const cornerstoneExtension = {
   },
   getCommandsModule: src_commandsModule,
   getCustomizationModule: src_getCustomizationModule,
-  getUtilityModule(_ref2) {
-    let {
-      servicesManager
-    } = _ref2;
+  getUtilityModule({
+    servicesManager
+  }) {
     return [{
       name: 'common',
       exports: {
@@ -9351,7 +9910,6 @@ const cornerstoneExtension = {
 /***/ 73704:
 /***/ ((__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),
@@ -9394,11 +9952,10 @@ const reset = () => {
 /***/ 87172:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-"use strict";
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   Z: () => (/* 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__(64225);
 
 
 /**
@@ -9415,7 +9972,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 {
@@ -9426,13 +9982,6 @@ function _getUIDFromImageID(imageId) {
   };
 }
 
-/***/ }),
-
-/***/ 78753:
-/***/ (() => {
-
-/* (ignored) */
-
 /***/ })
 
 }]);