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

package/dist/{707.bundle.0b18a871c9eb8df9e992.js → 967.bundle.8b4adf9b5a7392b51d0c.js}

@@ -1,6 +1,6 @@
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[707],{
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[967],{
 
-/***/ 31197:
+/***/ 94004:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -26,27 +26,26 @@ __webpack_require__.r(utils_namespaceObject);
 __webpack_require__.d(utils_namespaceObject, {
   getFirstAnnotationSelected: () => (getFirstAnnotationSelected),
   getHandlesFromPoints: () => (getHandlesFromPoints),
-  getModalityUnit: () => (utils_getModalityUnit),
   getSOPInstanceAttributes: () => (getSOPInstanceAttributes/* default */.Z),
   isAnnotationSelected: () => (isAnnotationSelected),
   setAnnotationSelected: () => (setAnnotationSelected)
 });
 
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
-var react = __webpack_require__(32735);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 335 modules
-var esm = __webpack_require__(77331);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 321 modules
-var dist_esm = __webpack_require__(57270);
-// EXTERNAL MODULE: ../../core/src/index.ts + 101 modules
-var src = __webpack_require__(48501);
+var react = __webpack_require__(43001);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 337 modules
+var esm = __webpack_require__(45754);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 326 modules
+var dist_esm = __webpack_require__(99116);
+// EXTERNAL MODULE: ../../core/src/index.ts + 75 modules
+var src = __webpack_require__(78695);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/streaming-image-volume-loader/dist/esm/index.js + 13 modules
-var streaming_image_volume_loader_dist_esm = __webpack_require__(28909);
+var streaming_image_volume_loader_dist_esm = __webpack_require__(7087);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/dicom-image-loader/dist/dynamic-import/cornerstoneDICOMImageLoader.min.js
-var cornerstoneDICOMImageLoader_min = __webpack_require__(99605);
+var cornerstoneDICOMImageLoader_min = __webpack_require__(61539);
 var cornerstoneDICOMImageLoader_min_default = /*#__PURE__*/__webpack_require__.n(cornerstoneDICOMImageLoader_min);
 // EXTERNAL MODULE: ../../../node_modules/dicom-parser/dist/dicomParser.min.js
-var dicomParser_min = __webpack_require__(43264);
+var dicomParser_min = __webpack_require__(56660);
 var dicomParser_min_default = /*#__PURE__*/__webpack_require__.n(dicomParser_min);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/initWADOImageLoader.js
 
@@ -76,7 +75,7 @@ function initWebWorkers(appConfig) {
     initialized = true;
   }
 }
-function initWADOImageLoader(userAuthenticationService, appConfig) {
+function initWADOImageLoader(userAuthenticationService, appConfig, extensionManager) {
   (cornerstoneDICOMImageLoader_min_default()).external.cornerstone = esm;
   (cornerstoneDICOMImageLoader_min_default()).external.dicomParser = (dicomParser_min_default());
   registerVolumeLoader('cornerstoneStreamingImageVolume', streaming_image_volume_loader_dist_esm/* cornerstoneStreamingImageVolumeLoader */.IU);
@@ -90,18 +89,13 @@ function initWADOImageLoader(userAuthenticationService, appConfig) {
       convertFloatPixelDataToInt: false
     },
     beforeSend: function (xhr) {
+      //TODO should be removed in the future and request emitted by DicomWebDataSource
+      const sourceConfig = extensionManager.getActiveDataSource()?.[0].getConfig() ?? {};
       const headers = userAuthenticationService.getAuthorizationHeader();
-
-      // Request:
-      // JPEG-LS Lossless (1.2.840.10008.1.2.4.80) if available, otherwise accept
-      // whatever transfer-syntax the origin server provides.
-      // For now we use image/jls and image/x-jls because some servers still use the old type
-      // http://dicom.nema.org/medical/dicom/current/output/html/part18.html
+      const acceptHeader = src.utils.generateAcceptHeader(sourceConfig.acceptHeader, sourceConfig.requestTransferSyntaxUID, sourceConfig.omitQuotationForMultipartRequest);
       const xhrRequestHeaders = {
-        Accept: appConfig.omitQuotationForMultipartRequest ? 'multipart/related; type=application/octet-stream' : 'multipart/related; type="application/octet-stream"'
-        // 'multipart/related; type="image/x-jls", multipart/related; type="image/jls"; transfer-syntax="1.2.840.10008.1.2.4.80", multipart/related; type="image/x-jls", multipart/related; type="application/octet-stream"; transfer-syntax=*',
+        Accept: acceptHeader
       };
-
       if (headers) {
         Object.assign(xhrRequestHeaders, headers);
       }
@@ -116,14 +110,14 @@ function initWADOImageLoader(userAuthenticationService, appConfig) {
 function destroy() {
   // Note: we don't want to call .terminate on the webWorkerManager since
   // that resets the config
-  const webWorkers = cornerstoneDICOMImageLoader_min.webWorkerManager.webWorkers;
+  const webWorkers = webWorkerManager.webWorkers;
   for (let i = 0; i < webWorkers.length; i++) {
     webWorkers[i].worker.terminate();
   }
   webWorkers.length = 0;
 }
-// EXTERNAL MODULE: ../../ui/src/index.js + 452 modules
-var ui_src = __webpack_require__(28619);
+// EXTERNAL MODULE: ../../ui/src/index.js + 458 modules
+var ui_src = __webpack_require__(88344);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/callInputDialog.tsx
 
 
@@ -157,7 +151,9 @@ function callInputDialog(uiDialogService, data, callback) {
     } = _ref;
     switch (action.id) {
       case 'save':
-        if (typeof validateFunc === 'function' && !validateFunc(value.label)) return;
+        if (typeof validateFunc === 'function' && !validateFunc(value.label)) {
+          return;
+        }
         callback(value.label, action.id);
         break;
       case 'cancel':
@@ -201,7 +197,7 @@ function callInputDialog(uiDialogService, data, callback) {
           } = _ref2;
           return /*#__PURE__*/react.createElement(ui_src/* Input */.II, {
             autoFocus: true,
-            className: "bg-black border-primary-main",
+            className: "border-primary-main bg-black",
             type: "text",
             id: "annotation",
             label: inputLabel,
@@ -232,17 +228,17 @@ function callInputDialog(uiDialogService, data, callback) {
 }
 /* harmony default export */ const utils_callInputDialog = (callInputDialog);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/state.ts
-var state = __webpack_require__(21922);
+var state = __webpack_require__(73704);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/getActiveViewportEnabledElement.ts
 
 
 function getActiveViewportEnabledElement(viewportGridService) {
   const {
-    activeViewportIndex
+    activeViewportId
   } = viewportGridService.getState();
   const {
     element
-  } = (0,state/* getEnabledElement */.K8)(activeViewportIndex) || {};
+  } = (0,state/* getEnabledElement */.K8)(activeViewportId) || {};
   const enabledElement = (0,esm.getEnabledElement)(element);
   return enabledElement;
 }
@@ -358,9 +354,214 @@ function onCompletedCalibrationLine(servicesManager, csToolsEvent) {
     });
   });
 }
+// EXTERNAL MODULE: ../../core/src/utils/index.js + 25 modules
+var utils = __webpack_require__(77250);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/tools/ImageOverlayViewerTool.tsx
+
+
+
+
+/**
+ * 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()
+ */
+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]
+      }
+    };
+    super(toolProps, defaultToolProps);
+    this._cachedOverlayMetadata = new Map();
+    this._cachedStats = {};
+    this.onSetToolDisabled = () => {
+      this._cachedStats = {};
+      this._cachedOverlayMetadata = new Map();
+    };
+    this.renderAnnotation = (enabledElement, svgDrawingHelper) => {
+      const {
+        viewport
+      } = enabledElement;
+      const imageId = this.getReferencedImageId(viewport);
+      if (!imageId) {
+        return;
+      }
+      const overlays = this._cachedOverlayMetadata.get(imageId) ?? esm.metaData.get('overlayPlaneModule', imageId)?.overlays;
+
+      // no overlays
+      if (!overlays?.length) {
+        return;
+      }
+      this._cachedOverlayMetadata.set(imageId, overlays);
+      this._getCachedStat(imageId, overlays, this.configuration.fillColor).then(cachedStat => {
+        cachedStat.overlays.forEach(overlay => {
+          this._renderOverlay(enabledElement, svgDrawingHelper, overlay);
+        });
+      });
+      return true;
+    };
+  }
+  /**
+   * Render to DOM
+   *
+   * @param enabledElement
+   * @param svgDrawingHelper
+   * @param overlayData
+   * @returns
+   */
+  _renderOverlay(enabledElement, svgDrawingHelper, overlayData) {
+    const {
+      viewport
+    } = enabledElement;
+    const imageId = this.getReferencedImageId(viewport);
+    if (!imageId) {
+      return;
+    }
+
+    // Decide the rendering position of the overlay image on the current canvas
+    const {
+      _id,
+      columns: width,
+      rows: height,
+      x,
+      y
+    } = overlayData;
+    const overlayTopLeftWorldPos = esm.utilities.imageToWorldCoords(imageId, [x - 1,
+    // Remind that top-left corner's (x, y) is be (1, 1)
+    y - 1]);
+    const overlayTopLeftOnCanvas = viewport.worldToCanvas(overlayTopLeftWorldPos);
+    const overlayBottomRightWorldPos = esm.utilities.imageToWorldCoords(imageId, [width, height]);
+    const overlayBottomRightOnCanvas = viewport.worldToCanvas(overlayBottomRightWorldPos);
+
+    // add image to the annotations svg layer
+    const svgns = 'http://www.w3.org/2000/svg';
+    const svgNodeHash = `image-overlay-${_id}`;
+    const existingImageElement = svgDrawingHelper.getSvgNode(svgNodeHash);
+    const attributes = {
+      'data-id': svgNodeHash,
+      width: overlayBottomRightOnCanvas[0] - overlayTopLeftOnCanvas[0],
+      height: overlayBottomRightOnCanvas[1] - overlayTopLeftOnCanvas[1],
+      x: overlayTopLeftOnCanvas[0],
+      y: overlayTopLeftOnCanvas[1],
+      href: overlayData.dataUrl
+    };
+    if (isNaN(attributes.x) || isNaN(attributes.y) || isNaN(attributes.width) || isNaN(attributes.height)) {
+      console.warn('Invalid rendering attribute for image overlay', attributes['data-id']);
+      return false;
+    }
+    if (existingImageElement) {
+      dist_esm.drawing.setAttributesIfNecessary(attributes, existingImageElement);
+      svgDrawingHelper.setNodeTouched(svgNodeHash);
+    } else {
+      const newImageElement = document.createElementNS(svgns, 'image');
+      dist_esm.drawing.setNewAttributesIfValid(attributes, newImageElement);
+      svgDrawingHelper.appendNode(newImageElement, svgNodeHash);
+    }
+    return true;
+  }
+  async _getCachedStat(imageId, overlayMetadata, color) {
+    if (this._cachedStats[imageId] && this._isSameColor(this._cachedStats[imageId].color, color)) {
+      return this._cachedStats[imageId];
+    }
+    const overlays = await Promise.all(overlayMetadata.filter(overlay => overlay.pixelData).map(async (overlay, idx) => {
+      let pixelData = null;
+      if (overlay.pixelData.Value) {
+        pixelData = overlay.pixelData.Value;
+      } else if (overlay.pixelData.retrieveBulkData) {
+        pixelData = await overlay.pixelData.retrieveBulkData();
+      }
+      if (!pixelData) {
+        return;
+      }
+      const dataUrl = this._renderOverlayToDataUrl({
+        width: overlay.columns,
+        height: overlay.rows
+      }, color, pixelData);
+      return {
+        ...overlay,
+        _id: (0,utils/* guid */.M8)(),
+        dataUrl,
+        // this will be a data url expression of the rendered image
+        color
+      };
+    }));
+    this._cachedStats[imageId] = {
+      color: color,
+      overlays: overlays.filter(overlay => overlay)
+    };
+    return this._cachedStats[imageId];
+  }
+
+  /**
+   * compare two RGBA expression of colors.
+   *
+   * @param color1
+   * @param color2
+   * @returns
+   */
+  _isSameColor(color1, color2) {
+    return color1 && color2 && color1[0] === color2[0] && color1[1] === color2[1] && color1[2] === color2[2] && color1[3] === color2[3];
+  }
+
+  /**
+   * pixelData of overlayPlane module is an array of bits corresponding
+   * to each of the underlying pixels of the image.
+   * Let's create pixel data from bit array of overlay data
+   *
+   * @param pixelDataRaw
+   * @param color
+   * @returns
+   */
+  _renderOverlayToDataUrl(_ref, color, pixelDataRaw) {
+    let {
+      width,
+      height
+    } = _ref;
+    const pixelDataView = new DataView(pixelDataRaw);
+    const totalBits = width * height;
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, width, height); // make it transparent
+    ctx.globalCompositeOperation = 'copy';
+    const imageData = ctx.getImageData(0, 0, width, height);
+    const data = imageData.data;
+    for (let i = 0, bitIdx = 0, byteIdx = 0; i < totalBits; i++) {
+      if (pixelDataView.getUint8(byteIdx) & 1 << bitIdx) {
+        data[i * 4] = color[0];
+        data[i * 4 + 1] = color[1];
+        data[i * 4 + 2] = color[2];
+        data[i * 4 + 3] = color[3];
+      }
+
+      // next bit, byte
+      if (bitIdx >= 7) {
+        bitIdx = 0;
+        byteIdx++;
+      } else {
+        bitIdx++;
+      }
+    }
+    ctx.putImageData(imageData, 0, 0);
+    return canvas.toDataURL();
+  }
+}
+ImageOverlayViewerTool.toolName = 'ImageOverlayViewer';
+/* 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] : {};
   dist_esm.CrosshairsTool.isAnnotation = false;
@@ -390,6 +591,7 @@ function initCornerstoneTools() {
   (0,dist_esm.addTool)(dist_esm.ReferenceLinesTool);
   (0,dist_esm.addTool)(tools_CalibrationLineTool);
   (0,dist_esm.addTool)(dist_esm.TrackballRotateTool);
+  (0,dist_esm.addTool)(tools_ImageOverlayViewerTool);
 
   // Modify annotation tools to use dashed lines on SR
   const annotationStyle = {
@@ -428,13 +630,14 @@ const toolNames = {
   SegmentationDisplay: dist_esm.SegmentationDisplayTool.toolName,
   ReferenceLines: dist_esm.ReferenceLinesTool.toolName,
   CalibrationLine: tools_CalibrationLineTool.toolName,
-  TrackballRotateTool: dist_esm.TrackballRotateTool.toolName
+  TrackballRotateTool: dist_esm.TrackballRotateTool.toolName,
+  ImageOverlayViewer: tools_ImageOverlayViewerTool.toolName
 };
 
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/constants/supportedTools.js
 /* harmony default export */ const supportedTools = (['Length', 'EllipticalROI', 'CircleROI', 'Bidirectional', 'ArrowAnnotate', 'Angle', 'CobbAngle', 'Probe', 'RectangleROI', 'PlanarFreehandROI']);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/utils/getSOPInstanceAttributes.js
-var getSOPInstanceAttributes = __webpack_require__(63130);
+var getSOPInstanceAttributes = __webpack_require__(87172);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/Length.ts
 
 
@@ -607,7 +810,9 @@ function getDisplayText(mappedAnnotations, displaySet) {
   }
   const instanceText = InstanceNumber ? ` I: ${InstanceNumber}` : '';
   const frameText = displaySet.isMultiFrame ? ` F: ${frameNumber}` : '';
-  if (length === null || length === undefined) return displayText;
+  if (length === null || length === undefined) {
+    return displayText;
+  }
   const roundedLength = src.utils.roundNumber(length, 2);
   displayText.push(`${roundedLength} mm (S: ${SeriesNumber}${instanceText}${frameText})`);
   return displayText;
@@ -791,22 +996,10 @@ function Bidirectional_getDisplayText(mappedAnnotations, displaySet) {
   return displayText;
 }
 /* harmony default export */ const measurementServiceMappings_Bidirectional = (Bidirectional);
-;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/utils/getModalityUnit.js
-function getModalityUnit(modality) {
-  if (modality === 'CT') {
-    return 'HU';
-  } else if (modality === 'PT') {
-    return 'SUV';
-  } else {
-    return '';
-  }
-}
-/* harmony default export */ const utils_getModalityUnit = (getModalityUnit);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/EllipticalROI.ts
 
 
 
-
 const EllipticalROI = {
   toAnnotation: measurement => {},
   toMeasurement: (csToolsEventDetail, displaySetService, cornerstoneViewportService, getValueTypeFromToolType) => {
@@ -904,16 +1097,16 @@ function EllipticalROI_getMappedAnnotations(annotation, displaySetService) {
       stdDev,
       max,
       area,
-      Modality
+      Modality,
+      modalityUnit
     } = targetStats;
-    const unit = utils_getModalityUnit(Modality);
     annotations.push({
       SeriesInstanceUID,
       SOPInstanceUID,
       SeriesNumber,
       frameNumber,
       Modality,
-      unit,
+      unit: modalityUnit,
       mean,
       stdDev,
       max,
@@ -1013,7 +1206,6 @@ function EllipticalROI_getDisplayText(mappedAnnotations, displaySet) {
 
 
 
-
 const CircleROI = {
   toAnnotation: measurement => {},
   toMeasurement: (csToolsEventDetail, DisplaySetService, CornerstoneViewportService, getValueTypeFromToolType) => {
@@ -1111,16 +1303,16 @@ function CircleROI_getMappedAnnotations(annotation, DisplaySetService) {
       stdDev,
       max,
       area,
-      Modality
+      Modality,
+      modalityUnit
     } = targetStats;
-    const unit = utils_getModalityUnit(Modality);
     annotations.push({
       SeriesInstanceUID,
       SOPInstanceUID,
       SeriesNumber,
       frameNumber,
       Modality,
-      unit,
+      unit: modalityUnit,
       mean,
       stdDev,
       max,
@@ -1515,7 +1707,9 @@ function CobbAngle_getDisplayText(mappedAnnotations, displaySet) {
   }
   const instanceText = InstanceNumber ? ` I: ${InstanceNumber}` : '';
   const frameText = displaySet.isMultiFrame ? ` F: ${frameNumber}` : '';
-  if (angle === undefined) return displayText;
+  if (angle === undefined) {
+    return displayText;
+  }
   const roundedAngle = src.utils.roundNumber(angle, 2);
   displayText.push(`${roundedAngle} ${unit} (S: ${SeriesNumber}${instanceText}${frameText})`);
   return displayText;
@@ -1695,7 +1889,9 @@ function Angle_getDisplayText(mappedAnnotations, displaySet) {
   }
   const instanceText = InstanceNumber ? ` I: ${InstanceNumber}` : '';
   const frameText = displaySet.isMultiFrame ? ` F: ${frameNumber}` : '';
-  if (angle === undefined) return displayText;
+  if (angle === undefined) {
+    return displayText;
+  }
   const roundedAngle = src.utils.roundNumber(angle, 2);
   displayText.push(`${roundedAngle} ${unit} (S: ${SeriesNumber}${instanceText}${frameText})`);
   return displayText;
@@ -1839,7 +2035,6 @@ function PlanarFreehandROI_getDisplayText(mappedAnnotations) {
 
 
 
-
 const RectangleROI = {
   toAnnotation: measurement => {},
   toMeasurement: (csToolsEventDetail, DisplaySetService, CornerstoneViewportService, getValueTypeFromToolType) => {
@@ -1937,16 +2132,16 @@ function RectangleROI_getMappedAnnotations(annotation, DisplaySetService) {
       stdDev,
       max,
       area,
-      Modality
+      Modality,
+      modalityUnit
     } = targetStats;
-    const unit = utils_getModalityUnit(Modality);
     annotations.push({
       SeriesInstanceUID,
       SOPInstanceUID,
       SeriesNumber,
       frameNumber,
       Modality,
-      unit,
+      unit: modalityUnit,
       mean,
       stdDev,
       max,
@@ -2540,7 +2735,7 @@ function getInterleavedFrames(imageIds) {
   return imageIdsToPrefetch;
 }
 // EXTERNAL MODULE: ../../../node_modules/lodash/lodash.js
-var lodash = __webpack_require__(92891);
+var lodash = __webpack_require__(44379);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/interleaveCenterLoader.ts
 
 
@@ -2730,8 +2925,12 @@ function getNthFrames(imageIds) {
  * @returns [] reordered to be breadth first traversal of lists
  */
 function interleave(lists) {
-  if (!lists || !lists.length) return [];
-  if (lists.length === 1) return lists[0];
+  if (!lists || !lists.length) {
+    return [];
+  }
+  if (lists.length === 1) {
+    return lists[0];
+  }
   console.time('interleave');
   const useLists = [...lists];
   const ret = [];
@@ -3020,9 +3219,15 @@ const DEFAULT_CONTEXT_MENU_CLICKS = {
 function getEventName(evt) {
   const button = evt.detail.event.which;
   const nameArr = [];
-  if (evt.detail.event.altKey) nameArr.push('alt');
-  if (evt.detail.event.ctrlKey) nameArr.push('ctrl');
-  if (evt.detail.event.shiftKey) nameArr.push('shift');
+  if (evt.detail.event.altKey) {
+    nameArr.push('alt');
+  }
+  if (evt.detail.event.ctrlKey) {
+    nameArr.push('ctrl');
+  }
+  if (evt.detail.event.shiftKey) {
+    nameArr.push('shift');
+  }
   nameArr.push('button');
   nameArr.push(button);
   return nameArr.join('');
@@ -3040,7 +3245,6 @@ function initContextMenu(_ref) {
   const cornerstoneViewportHandleEvent = (name, evt) => {
     const customizations = customizationService.get('cornerstoneViewportClickCommands') || DEFAULT_CONTEXT_MENU_CLICKS;
     const toRun = customizations[name];
-    console.log('initContextMenu::cornerstoneViewportHandleEvent', name, toRun);
     const options = {
       nearbyToolData: findNearbyToolData(commandsManager, evt),
       event: evt
@@ -3057,10 +3261,11 @@ function initContextMenu(_ref) {
       element
     } = evt.detail;
     const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
-    if (!viewportInfo) return;
-    const viewportIndex = viewportInfo.getViewportIndex();
+    if (!viewportInfo) {
+      return;
+    }
     // TODO check update upstream
-    (0,state/* setEnabledElement */.Yc)(viewportIndex, element);
+    (0,state/* setEnabledElement */.Yc)(viewportId, element);
     element.addEventListener(cs3DToolsEvents.MOUSE_CLICK, cornerstoneViewportHandleClick);
   }
   function elementDisabledHandler(evt) {
@@ -3094,9 +3299,15 @@ const DEFAULT_DOUBLE_CLICK = {
  */
 function getDoubleClickEventName(evt) {
   const nameArr = [];
-  if (evt.detail.event.altKey) nameArr.push('alt');
-  if (evt.detail.event.ctrlKey) nameArr.push('ctrl');
-  if (evt.detail.event.shiftKey) nameArr.push('shift');
+  if (evt.detail.event.altKey) {
+    nameArr.push('alt');
+  }
+  if (evt.detail.event.ctrlKey) {
+    nameArr.push('ctrl');
+  }
+  if (evt.detail.event.shiftKey) {
+    nameArr.push('shift');
+  }
   nameArr.push('doubleClick');
   return nameArr.join('');
 }
@@ -3154,7 +3365,6 @@ function initDoubleClick(_ref) {
 
 
 
-
 // TODO: Cypress tests are currently grabbing this from the window?
 window.cornerstone = esm;
 window.cornerstoneTools = dist_esm;
@@ -3181,18 +3391,18 @@ async function init(_ref) {
     }
   });
 
-  // For debugging large datasets
-  const MAX_CACHE_SIZE_1GB = 1073741824;
-  const maxCacheSize = appConfig.maxCacheSize;
-  esm.cache.setMaxCacheSize(maxCacheSize ? maxCacheSize : MAX_CACHE_SIZE_1GB);
+  // For debugging large datasets, otherwise prefer the defaults
+  const {
+    maxCacheSize
+  } = appConfig;
+  if (maxCacheSize) {
+    esm.cache.setMaxCacheSize(maxCacheSize);
+  }
   initCornerstoneTools();
   esm.Settings.getRuntimeSettings().set('useCursors', Boolean(appConfig.useCursors));
   const {
     userAuthenticationService,
-    measurementService,
     customizationService,
-    displaySetService,
-    uiDialogService,
     uiModalService,
     uiNotificationService,
     cineService,
@@ -3254,7 +3464,7 @@ async function init(_ref) {
     thumbnail: appConfig?.maxNumRequests?.thumbnail || 75,
     prefetch: appConfig?.maxNumRequests?.prefetch || 10
   };
-  initWADOImageLoader(userAuthenticationService, appConfig);
+  initWADOImageLoader(userAuthenticationService, appConfig, extensionManager);
 
   /* Measurement Service */
   this.measurementServiceSource = connectToolsToMeasurementService(servicesManager);
@@ -3338,12 +3548,10 @@ async function init(_ref) {
 
   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_INDEX_CHANGED, _ref2 => {
+  viewportGridService.subscribe(viewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED, _ref2 => {
     let {
-      viewportIndex,
       viewportId
     } = _ref2;
-    viewportId = viewportId || `viewport-${viewportIndex}`;
     const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
     if (!toolGroup || !toolGroup._toolInstances?.['ReferenceLines']) {
       return;
@@ -3387,12 +3595,12 @@ function _showCPURenderingModal(uiModalService, hangingProtocolService) {
   });
 }
 // EXTERNAL MODULE: ../../../node_modules/react-dropzone/dist/es/index.js + 5 modules
-var es = __webpack_require__(58591);
+var es = __webpack_require__(74834);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
-var prop_types = __webpack_require__(60216);
+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__(40841);
+var classnames = __webpack_require__(44921);
 var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/DicomFileUploader.ts
 
@@ -3541,7 +3749,9 @@ class DicomFileUploader extends src/* PubSubService */.hC {
     request.addEventListener('loadend', cleanUpCallback);
   }
   _checkDicomFile(arrayBuffer) {
-    if (arrayBuffer.length <= 132) return false;
+    if (arrayBuffer.length <= 132) {
+      return false;
+    }
     const arr = new Uint8Array(arrayBuffer.slice(128, 132));
     // bytes from 128 to 132 must be "DICM"
     return Array.from('DICM').every((char, i) => char.charCodeAt(0) === arr[i]);
@@ -3560,7 +3770,6 @@ const DicomUploadProgressItem = /*#__PURE__*/(0,react.memo)(_ref => {
   const [percentComplete, setPercentComplete] = (0,react.useState)(dicomFileUploader.getPercentComplete());
   const [failedReason, setFailedReason] = (0,react.useState)('');
   const [status, setStatus] = (0,react.useState)(dicomFileUploader.getStatus());
-  console.info(`${dicomFileUploader.getFileId()}`);
   const isComplete = (0,react.useCallback)(() => {
     return status === UploadStatus.Failed || status === UploadStatus.Cancelled || status === UploadStatus.Success;
   }, [status]);
@@ -3601,25 +3810,25 @@ const DicomUploadProgressItem = /*#__PURE__*/(0,react.memo)(_ref => {
     }
   };
   return /*#__PURE__*/react.createElement("div", {
-    className: "flex w-full p-2.5 text-lg min-h-14 items-center border-b border-secondary-light overflow-hidden"
+    className: "min-h-14 border-secondary-light flex w-full items-center overflow-hidden border-b p-2.5 text-lg"
   }, /*#__PURE__*/react.createElement("div", {
-    className: "flex flex-col gap-1 self-top w-0 grow shrink"
+    className: "self-top flex w-0 shrink grow flex-col gap-1"
   }, /*#__PURE__*/react.createElement("div", {
     className: "flex gap-4"
   }, /*#__PURE__*/react.createElement("div", {
-    className: "flex w-6 justify-center items-center shrink-0"
+    className: "flex w-6 shrink-0 items-center justify-center"
   }, getStatusIcon()), /*#__PURE__*/react.createElement("div", {
-    className: "text-ellipsis whitespace-nowrap overflow-hidden"
+    className: "overflow-hidden text-ellipsis whitespace-nowrap"
   }, dicomFileUploader.getFileName())), failedReason && /*#__PURE__*/react.createElement("div", {
     className: "pl-10"
   }, failedReason)), /*#__PURE__*/react.createElement("div", {
-    className: "w-24 flex items-center"
+    className: "flex w-24 items-center"
   }, !isComplete() && /*#__PURE__*/react.createElement(react.Fragment, null, dicomFileUploader.getStatus() === UploadStatus.InProgress && /*#__PURE__*/react.createElement("div", {
     className: "w-10 text-right"
   }, percentComplete, "%"), /*#__PURE__*/react.createElement("div", {
-    className: "flex cursor-pointer ml-auto"
+    className: "ml-auto flex cursor-pointer"
   }, /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
-    className: "self-center text-primary-active",
+    className: "text-primary-active self-center",
     name: "close",
     onClick: cancelUpload
   })))));
@@ -3846,7 +4055,7 @@ function DicomUploadProgress(_ref) {
   }, []);
   const getNumCompletedAndTimeRemainingComponent = () => {
     return /*#__PURE__*/react.createElement("div", {
-      className: "text-lg px-1 pb-4 h-14 flex bg-primary-dark items-center"
+      className: "bg-primary-dark flex h-14 items-center px-1 pb-4 text-lg"
     }, numFilesCompleted === dicomFileUploaderArr.length ? /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("span", {
       className: NO_WRAP_ELLIPSIS_CLASS_NAMES
     }, `${dicomFileUploaderArr.length} ${dicomFileUploaderArr.length > 1 ? 'files' : 'file'} completed.`), /*#__PURE__*/react.createElement(ui_src/* Button */.zx, {
@@ -3861,13 +4070,13 @@ function DicomUploadProgress(_ref) {
     }, ' files completed.', "\xA0"), /*#__PURE__*/react.createElement("span", {
       className: NO_WRAP_ELLIPSIS_CLASS_NAMES
     }, timeRemaining ? `Less than ${getFormattedTimeRemaining()} remaining. ` : ''), /*#__PURE__*/react.createElement("span", {
-      className: classnames_default()(NO_WRAP_ELLIPSIS_CLASS_NAMES, 'cursor-pointer text-primary-active hover:text-primary-light active:text-aqua-pale ml-auto'),
+      className: classnames_default()(NO_WRAP_ELLIPSIS_CLASS_NAMES, 'text-primary-active hover:text-primary-light active:text-aqua-pale ml-auto cursor-pointer'),
       onClick: cancelAllUploads
     }, "Cancel All Uploads")));
   };
   const getShowFailedOnlyIconComponent = () => {
     return /*#__PURE__*/react.createElement("div", {
-      className: "ml-auto flex justify-center w-6"
+      className: "ml-auto flex w-6 justify-center"
     }, numFails > 0 && /*#__PURE__*/react.createElement("div", {
       onClick: () => setShowFailedOnly(currentShowFailedOnly => !currentShowFailedOnly)
     }, /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
@@ -3877,28 +4086,28 @@ function DicomUploadProgress(_ref) {
   };
   const getPercentCompleteComponent = () => {
     return /*#__PURE__*/react.createElement("div", {
-      className: "overflow-y-scroll ohif-scrollbar px-2 border-b border-secondary-light"
+      className: "ohif-scrollbar border-secondary-light overflow-y-scroll border-b px-2"
     }, /*#__PURE__*/react.createElement("div", {
-      className: "flex w-full p-2.5 items-center min-h-14"
+      className: "min-h-14 flex w-full items-center p-2.5"
     }, numFilesCompleted === dicomFileUploaderArr.length ? /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
-      className: "text-xl text-primary-light"
+      className: "text-primary-light text-xl"
     }, numFails > 0 ? `Completed with ${numFails} ${numFails > 1 ? 'errors' : 'error'}!` : 'Completed!'), getShowFailedOnlyIconComponent()) : /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
       ref: progressBarContainerRef,
       className: "flex-grow"
     }, /*#__PURE__*/react.createElement(ui_src/* ProgressLoadingBar */.YE, {
       progress: showInfiniteProgressBar() ? undefined : Math.min(100, percentComplete)
     })), /*#__PURE__*/react.createElement("div", {
-      className: "w-24 ml-1 flex items-center"
+      className: "ml-1 flex w-24 items-center"
     }, /*#__PURE__*/react.createElement("div", {
       className: "w-10 text-right"
     }, `${getPercentCompleteRounded()}%`), getShowFailedOnlyIconComponent()))));
   };
   return /*#__PURE__*/react.createElement("div", {
-    className: "flex flex-col grow"
+    className: "flex grow flex-col"
   }, getNumCompletedAndTimeRemainingComponent(), /*#__PURE__*/react.createElement("div", {
-    className: "flex flex-col bg-black text-lg overflow-hidden grow"
+    className: "flex grow flex-col overflow-hidden bg-black text-lg"
   }, getPercentCompleteComponent(), /*#__PURE__*/react.createElement("div", {
-    className: "overflow-y-scroll ohif-scrollbar px-2 grow h-1"
+    className: "ohif-scrollbar h-1 grow overflow-y-scroll px-2"
   }, dicomFileUploaderArr.filter(dicomFileUploader => !showFailedOnly || dicomFileUploader.getStatus() === UploadStatus.Failed).map(dicomFileUploader => /*#__PURE__*/react.createElement(DicomUpload_DicomUploadProgressItem, {
     key: dicomFileUploader.getFileId(),
     dicomFileUploader: dicomFileUploader
@@ -3945,7 +4154,7 @@ function DicomUpload(_ref) {
         getRootProps
       } = _ref2;
       return /*#__PURE__*/react.createElement("div", _extends({}, getRootProps(), {
-        className: "m-5 dicom-upload-drop-area-border-dash flex flex-col items-center justify-center h-full"
+        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, {
@@ -3979,7 +4188,7 @@ function DicomUpload(_ref) {
       })), /*#__PURE__*/react.createElement("div", {
         className: "pt-5"
       }, "or drag images or folders here"), /*#__PURE__*/react.createElement("div", {
-        className: "pt-3 text-aqua-pale text-lg"
+        className: "text-aqua-pale pt-3 text-lg"
       }, "(DICOM files supported)"));
     });
   };
@@ -4043,7 +4252,7 @@ function getCustomizationModule() {
 }
 /* harmony default export */ const src_getCustomizationModule = (getCustomizationModule);
 // EXTERNAL MODULE: ../../../node_modules/html2canvas/dist/html2canvas.esm.js
-var html2canvas_esm = __webpack_require__(63691);
+var html2canvas_esm = __webpack_require__(76010);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/CornerstoneViewportDownloadForm.tsx
 
 
@@ -4059,10 +4268,10 @@ const VIEWPORT_ID = 'cornerstone-viewport-download-form';
 const CornerstoneViewportDownloadForm = _ref => {
   let {
     onClose,
-    activeViewportIndex,
+    activeViewportId: activeViewportIdProp,
     cornerstoneViewportService
   } = _ref;
-  const enabledElement = (0,state/* getEnabledElement */.K8)(activeViewportIndex);
+  const enabledElement = (0,state/* getEnabledElement */.K8)(activeViewportIdProp);
   const activeViewportElement = enabledElement?.element;
   const activeViewportEnabledElement = (0,esm.getEnabledElement)(activeViewportElement);
   const {
@@ -4264,7 +4473,7 @@ const CornerstoneViewportDownloadForm = _ref => {
 };
 CornerstoneViewportDownloadForm.propTypes = {
   onClose: (prop_types_default()).func,
-  activeViewportIndex: (prop_types_default()).number.isRequired
+  activeViewportId: (prop_types_default()).string.isRequired
 };
 /* harmony default export */ const utils_CornerstoneViewportDownloadForm = (CornerstoneViewportDownloadForm);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/stackSync/calculateViewportRegistrations.ts
@@ -4294,7 +4503,7 @@ const _getViewportPairs = viewports => {
 
 // [ {
 //   synchronizerId: string,
-//   viewports: [ { viewportId: number, renderingEngineId: string, index: number } , ...]
+//   viewports: [ { viewportId: string, renderingEngineId: string, index: number } , ...]
 // ]}
 let STACK_IMAGE_SYNC_GROUPS_INFO = [];
 function toggleStackImageSync(_ref) {
@@ -4328,27 +4537,23 @@ function toggleStackImageSync(_ref) {
   STACK_IMAGE_SYNC_GROUPS_INFO = [];
 
   // create synchronization groups and add viewports
-  let {
+  const {
     viewports
   } = viewportGridService.getState();
 
   // filter empty viewports
-  viewports = viewports.filter(viewport => viewport.displaySetInstanceUIDs && viewport.displaySetInstanceUIDs.length);
-
+  const viewportsArray = Array.from(viewports.values()).filter(viewport => viewport.displaySetInstanceUIDs?.length)
   // filter reconstructable viewports
-  viewports = viewports.filter(viewport => {
+  .filter(viewport => {
     const {
       displaySetInstanceUIDs
     } = viewport;
     for (const displaySetInstanceUID of displaySetInstanceUIDs) {
       const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
-      if (displaySet && displaySet.isReconstructable) {
-        return true;
-      }
-      return false;
+      return !!displaySet?.isReconstructable;
     }
   });
-  const viewportsByOrientation = viewports.reduce((acc, viewport) => {
+  const viewportsByOrientation = viewportsArray.reduce((acc, viewport) => {
     const {
       viewportId,
       viewportType
@@ -4457,6 +4662,7 @@ function commandsModule(_ref) {
     toolGroupService,
     cineService,
     toolbarService,
+    stateSyncService,
     uiDialogService,
     cornerstoneViewportService,
     uiNotificationService,
@@ -4650,8 +4856,7 @@ function commandsModule(_ref) {
         console.warn('No viewport found for viewportId:', viewportId);
         return;
       }
-      const viewportIndex = viewportInfo.getViewportIndex();
-      viewportGridService.setActiveViewportIndex(viewportIndex);
+      viewportGridService.setActiveViewportId(viewportId);
     },
     arrowTextCallback: _ref7 => {
       let {
@@ -4719,7 +4924,8 @@ function commandsModule(_ref) {
     setToolActive: _ref9 => {
       let {
         toolName,
-        toolGroupId = null
+        toolGroupId = null,
+        toggledState
       } = _ref9;
       if (toolName === 'Crosshairs') {
         const activeViewportToolGroup = toolGroupService.getToolGroup(null);
@@ -4735,9 +4941,10 @@ function commandsModule(_ref) {
       }
       const {
         viewports
-      } = viewportGridService.getState() || {
-        viewports: []
-      };
+      } = viewportGridService.getState();
+      if (!viewports.size) {
+        return;
+      }
       const toolGroup = toolGroupService.getToolGroup(toolGroupId);
       const toolGroupViewportIds = toolGroup?.getViewportIds?.();
 
@@ -4745,11 +4952,8 @@ function commandsModule(_ref) {
       if (!toolGroupViewportIds || !toolGroupViewportIds.length) {
         return;
       }
-      const filteredViewports = viewports.filter(viewport => {
-        if (!viewport.viewportOptions) {
-          return false;
-        }
-        return toolGroupViewportIds.includes(viewport.viewportOptions.viewportId);
+      const filteredViewports = Array.from(viewports.values()).filter(viewport => {
+        return toolGroupViewportIds.includes(viewport.viewportId);
       });
       if (!filteredViewports.length) {
         return;
@@ -4773,6 +4977,14 @@ function commandsModule(_ref) {
           toolGroup.setToolPassive(activeToolName);
         }
       }
+
+      // If there is a toggle state, then simply set the enabled/disabled state without
+      // setting the tool active.
+      if (toggledState != null) {
+        toggledState ? toolGroup.setToolEnabled(toolName) : toolGroup.setToolDisabled(toolName);
+        return;
+      }
+
       // Set the new toolName to be active
       toolGroup.setToolActive(toolName, {
         bindings: [{
@@ -4782,9 +4994,9 @@ function commandsModule(_ref) {
     },
     showDownloadViewportModal: () => {
       const {
-        activeViewportIndex
+        activeViewportId
       } = viewportGridService.getState();
-      if (!cornerstoneViewportService.getCornerstoneViewportByIndex(activeViewportIndex)) {
+      if (!cornerstoneViewportService.getCornerstoneViewport(activeViewportId)) {
         // Cannot download a non-cornerstone viewport (image).
         uiNotificationService.show({
           title: 'Download Image',
@@ -4801,7 +5013,7 @@ function commandsModule(_ref) {
           content: utils_CornerstoneViewportDownloadForm,
           title: 'Download High Quality Image',
           contentProps: {
-            activeViewportIndex,
+            activeViewportId,
             onClose: uiModalService.hide,
             cornerstoneViewportService
           }
@@ -4882,15 +5094,13 @@ function commandsModule(_ref) {
       const {
         viewport
       } = enabledElement;
-      if (viewport instanceof esm.StackViewport) {
-        const {
-          invert
-        } = viewport.getProperties();
-        viewport.setProperties({
-          invert: !invert
-        });
-        viewport.render();
-      }
+      const {
+        invert
+      } = viewport.getProperties();
+      viewport.setProperties({
+        invert: !invert
+      });
+      viewport.render();
     },
     resetViewport: () => {
       const enabledElement = _getActiveViewportEnabledElement();
@@ -4993,12 +5203,12 @@ function commandsModule(_ref) {
     },
     setViewportColormap: _ref15 => {
       let {
-        viewportIndex,
+        viewportId,
         displaySetInstanceUID,
         colormap,
         immediate = false
       } = _ref15;
-      const viewport = cornerstoneViewportService.getCornerstoneViewportByIndex(viewportIndex);
+      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
       const actorEntries = viewport.getActors();
       const actorEntry = actorEntries.find(actorEntry => {
         return actorEntry.uid.includes(displaySetInstanceUID);
@@ -5015,51 +5225,52 @@ function commandsModule(_ref) {
         viewport.render();
       }
     },
-    incrementActiveViewport: () => {
-      const {
-        activeViewportIndex,
-        viewports
-      } = viewportGridService.getState();
-      const nextViewportIndex = (activeViewportIndex + 1) % viewports.length;
-      viewportGridService.setActiveViewportIndex(nextViewportIndex);
-    },
-    decrementActiveViewport: () => {
+    changeActiveViewport: _ref16 => {
+      let {
+        direction = 1
+      } = _ref16;
       const {
-        activeViewportIndex,
+        activeViewportId,
         viewports
       } = viewportGridService.getState();
-      const nextViewportIndex = (activeViewportIndex - 1 + viewports.length) % viewports.length;
-      viewportGridService.setActiveViewportIndex(nextViewportIndex);
+      const viewportIds = Array.from(viewports.keys());
+      const currentIndex = viewportIds.indexOf(activeViewportId);
+      const nextViewportIndex = (currentIndex + direction + viewportIds.length) % viewportIds.length;
+      viewportGridService.setActiveViewportId(viewportIds[nextViewportIndex]);
     },
-    toggleStackImageSync: _ref16 => {
+    toggleStackImageSync: _ref17 => {
       let {
         toggledState
-      } = _ref16;
+      } = _ref17;
       toggleStackImageSync({
         getEnabledElement: esm.getEnabledElement,
         servicesManager,
         toggledState
       });
     },
-    toggleReferenceLines: _ref17 => {
+    setSourceViewportForReferenceLinesTool: _ref18 => {
       let {
         toggledState
-      } = _ref17;
+      } = _ref18;
       const {
-        activeViewportIndex
+        activeViewportId
       } = viewportGridService.getState();
-      const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(activeViewportIndex);
+      const viewportInfo = cornerstoneViewportService.getViewportInfo(activeViewportId);
       const viewportId = viewportInfo.getViewportId();
       const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
-      if (!toggledState) {
-        toolGroup.setToolDisabled(dist_esm.ReferenceLinesTool.toolName);
-      }
       toolGroup.setToolConfiguration(dist_esm.ReferenceLinesTool.toolName, {
         sourceViewportId: viewportId
       }, true // overwrite
       );
+    },
 
-      toolGroup.setToolEnabled(dist_esm.ReferenceLinesTool.toolName);
+    storePresentation: _ref19 => {
+      let {
+        viewportId
+      } = _ref19;
+      cornerstoneViewportService.storePresentation({
+        viewportId
+      });
     }
   };
   const definitions = {
@@ -5114,10 +5325,13 @@ function commandsModule(_ref) {
       }
     },
     incrementActiveViewport: {
-      commandFn: actions.incrementActiveViewport
+      commandFn: actions.changeActiveViewport
     },
     decrementActiveViewport: {
-      commandFn: actions.decrementActiveViewport
+      commandFn: actions.changeActiveViewport,
+      options: {
+        direction: -1
+      }
     },
     flipViewportHorizontal: {
       commandFn: actions.flipViewportHorizontal
@@ -5194,8 +5408,13 @@ function commandsModule(_ref) {
     toggleStackImageSync: {
       commandFn: actions.toggleStackImageSync
     },
-    toggleReferenceLines: {
-      commandFn: actions.toggleReferenceLines
+    setSourceViewportForReferenceLinesTool: {
+      commandFn: actions.setSourceViewportForReferenceLinesTool
+    },
+    storePresentation: {
+      commandFn: actions.storePresentation,
+      storeContexts: [],
+      options: {}
     }
   };
   return {
@@ -5210,9 +5429,8 @@ const mpr = {
   id: 'mpr',
   name: 'Multi-Planar Reconstruction',
   locked: true,
-  hasUpdatedPriorsInformation: false,
   createdDate: '2021-02-23',
-  modifiedDate: '2023-04-03',
+  modifiedDate: '2023-08-15',
   availableTo: {},
   editableBy: {},
   // Unknown number of priors referenced - so just match any study
@@ -5283,6 +5501,7 @@ const mpr = {
     },
     viewports: [{
       viewportOptions: {
+        viewportId: 'mpr-axial',
         toolGroupId: 'mpr',
         viewportType: 'volume',
         orientation: 'axial',
@@ -5301,6 +5520,7 @@ const mpr = {
       }]
     }, {
       viewportOptions: {
+        viewportId: 'mpr-sagittal',
         toolGroupId: 'mpr',
         viewportType: 'volume',
         orientation: 'sagittal',
@@ -5319,6 +5539,7 @@ const mpr = {
       }]
     }, {
       viewportOptions: {
+        viewportId: 'mpr-coronal',
         toolGroupId: 'mpr',
         viewportType: 'volume',
         orientation: 'coronal',
@@ -5341,7 +5562,6 @@ const mpr = {
 const mprAnd3DVolumeViewport = {
   id: 'mprAnd3DVolumeViewport',
   locked: true,
-  hasUpdatedPriorsInformation: false,
   name: 'mpr',
   createdDate: '2023-03-15T10:29:44.894Z',
   modifiedDate: '2023-03-15T10:29:44.894Z',
@@ -5789,7 +6009,7 @@ class SyncGroupService {
    * @param type is the type of the synchronizer to create
    * @param creator
    */
-  setSynchronizer(type, creator) {
+  addSynchronizerType(type, creator) {
     this.synchronizerCreators[type.toLowerCase()] = creator;
   }
   _getOrCreateSynchronizer(type, id, options) {
@@ -5867,10 +6087,10 @@ SyncGroupService.REGISTRATION = {
 
 /* harmony default export */ const services_SyncGroupService = (SyncGroupService);
 // EXTERNAL MODULE: ../../../node_modules/lodash.clonedeep/index.js
-var lodash_clonedeep = __webpack_require__(71975);
+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__(68652);
+var lodash_isequal = __webpack_require__(10311);
 var lodash_isequal_default = /*#__PURE__*/__webpack_require__.n(lodash_isequal);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/transitions.ts
 /**
@@ -6152,6 +6372,7 @@ class SegmentationService extends src/* PubSubService */.hC {
       if (!segmentation) {
         throw new Error(`Segmentation with segmentationId ${segmentationId} not found.`);
       }
+      _this._setDisplaySetIsHydrated(segmentationId, true);
       segmentation.hydrated = true;
       if (!suppressEvents) {
         _this._broadcastEvent(_this.EVENTS.SEGMENTATION_UPDATED, {
@@ -6715,6 +6936,7 @@ class SegmentationService extends src/* PubSubService */.hC {
       id: segmentationId,
       displaySetInstanceUID: segDisplaySet.displaySetInstanceUID,
       type: representationType,
+      label: segDisplaySet.SeriesDescription,
       representationData: {
         [LABELMAP]: {
           volumeId: segmentationId,
@@ -6731,11 +6953,11 @@ class SegmentationService extends src/* PubSubService */.hC {
       return this.addOrUpdateSegmentation(Object.assign(segmentation, cachedSegmentation), suppressEvents);
     }
     const {
-      segments,
+      labelmapBufferArray,
       referencedVolumeId
     } = segDisplaySet;
-    if (!segments || !referencedVolumeId) {
-      throw new Error('To create the segmentation from SEG displaySet, the displaySet should be loaded first, you can perform segDisplaySet.load() before calling this method.');
+    if (!labelmapBufferArray || !referencedVolumeId) {
+      throw new Error('No labelmapBufferArray or referencedVolumeId found for the SEG displaySet');
     }
 
     // if the labelmap doesn't exist, we need to create it first from the
@@ -6754,72 +6976,27 @@ class SegmentationService extends src/* PubSubService */.hC {
         sharedArrayBuffer: true
       }
     });
-    const [rows, columns] = derivedVolume.dimensions;
     const derivedVolumeScalarData = derivedVolume.getScalarData();
-    const {
-      imageIds
-    } = referencedVolume;
-    const sopUIDImageIdIndexMap = imageIds.reduce((acc, imageId, index) => {
-      const {
-        sopInstanceUid
-      } = esm.metaData.get('generalImageModule', imageId);
-      acc[sopInstanceUid] = index;
-      return acc;
-    }, {});
-    const numSegments = Object.keys(segments).length;
-    // Note: ideally we could use the TypedArray set method, but since each
-    // slice can have multiple segments, we need to loop over each slice and
-    // set the segment value for each segment.
-    let overlappingSegments = false;
-    const _segmentInfoUpdate = (segmentInfo, segmentIndex) => {
+    const segmentsInfo = segDisplaySet.segMetadata.data;
+    derivedVolumeScalarData.set(new Uint8Array(labelmapBufferArray[0]));
+    segmentation.segments = segmentsInfo.map((segmentInfo, segmentIndex) => {
+      if (segmentIndex === 0) {
+        return;
+      }
       const {
-        pixelData: segPixelData
+        SegmentedPropertyCategoryCodeSequence,
+        SegmentNumber,
+        SegmentLabel,
+        SegmentAlgorithmType,
+        SegmentAlgorithmName,
+        SegmentedPropertyTypeCodeSequence,
+        rgba
       } = segmentInfo;
-      let segmentX = 0;
-      let segmentY = 0;
-      let segmentZ = 0;
-      let count = 0;
-      for (const [functionalGroupIndex, functionalGroup] of segmentInfo.functionalGroups.entries()) {
-        const {
-          ReferencedSOPInstanceUID
-        } = functionalGroup.DerivationImageSequence.SourceImageSequence;
-        const imageIdIndex = sopUIDImageIdIndexMap[ReferencedSOPInstanceUID];
-        if (imageIdIndex === -1) {
-          return;
-        }
-        const step = rows * columns;
-
-        // we need a faster way to get the pixel data for the current
-        // functional group, which we use typed array view
-
-        const functionGroupPixelData = new Uint8Array(segPixelData.buffer, functionalGroupIndex * step, step);
-        const functionalGroupStartIndex = imageIdIndex * step;
-        const functionalGroupEndIndex = (imageIdIndex + 1) * step;
-
-        // Note: this for loop is not optimized, since DICOM SEG stores
-        // each segment as a separate labelmap so if there is a slice
-        // that has multiple segments, we will have to loop over each
-        // segment and we cannot use the TypedArray set method.
-        for (let i = functionalGroupStartIndex, j = 0; i < functionalGroupEndIndex; i++, j++) {
-          if (functionGroupPixelData[j] !== 0) {
-            if (derivedVolumeScalarData[i] !== 0) {
-              overlappingSegments = true;
-            }
-            derivedVolumeScalarData[i] = segmentIndex;
-
-            // centroid calculations
-            segmentX += i % columns;
-            segmentY += Math.floor(i / columns) % rows;
-            segmentZ += Math.floor(i / (columns * rows));
-            count++;
-          }
-        }
-      }
-
-      // centroid calculations
-      const x = Math.floor(segmentX / count);
-      const y = Math.floor(segmentY / count);
-      const z = Math.floor(segmentZ / count);
+      const {
+        x,
+        y,
+        z
+      } = segDisplaySet.centroids.get(segmentIndex);
       const centerWorld = derivedVolume.imageData.indexToWorld([x, y, z]);
       segmentation.cachedStats = {
         ...segmentation.cachedStats,
@@ -6834,51 +7011,24 @@ class SegmentationService extends src/* PubSubService */.hC {
           }
         }
       };
-      const numInitialized = Object.keys(segmentation.cachedStats.segmentCenter).length;
-
-      // Calculate percentage completed
-      const percentComplete = Math.round(numInitialized / numSegments * 100);
-      this._broadcastEvent(SegmentationService_EVENTS.SEGMENT_LOADING_COMPLETE, {
-        percentComplete,
-        numSegments: numSegments
-      });
-    };
-    const promiseArray = [];
-    for (const segmentIndex in segments) {
-      const segmentInfo = segments[segmentIndex];
-
-      // Important: we need a non-blocking way to update the segmentation
-      // state, otherwise the UI will freeze and the user will not be able
-      // to interact with the app or progress bars will not be updated.
-      const promise = new Promise((resolve, reject) => {
-        setTimeout(() => {
-          _segmentInfoUpdate(segmentInfo, segmentIndex);
-          resolve();
-        }, 0);
-      });
-      promiseArray.push(promise);
-    }
-    await Promise.all(promiseArray);
-    segmentation.segmentCount = Object.keys(segments).length;
-    segmentation.segments = [null]; // segment 0
-
-    Object.keys(segments).forEach(segmentIndex => {
-      const segmentInfo = segments[segmentIndex];
-      const segIndex = Number(segmentIndex);
-      segmentation.segments[segIndex] = {
-        label: segmentInfo.label || `Segment ${segIndex}`,
-        segmentIndex: Number(segmentIndex),
-        color: [segmentInfo.color[0], segmentInfo.color[1], segmentInfo.color[2]],
-        opacity: segmentInfo.color[3],
+      return {
+        label: SegmentLabel || `Segment ${SegmentNumber}`,
+        segmentIndex: Number(SegmentNumber),
+        category: SegmentedPropertyCategoryCodeSequence ? SegmentedPropertyCategoryCodeSequence.CodeMeaning : '',
+        type: SegmentedPropertyTypeCodeSequence ? SegmentedPropertyTypeCodeSequence.CodeMeaning : '',
+        algorithmType: SegmentAlgorithmType,
+        algorithmName: SegmentAlgorithmName,
+        color: rgba,
+        opacity: 255,
         isVisible: true,
         isLocked: false
       };
     });
+    segmentation.segmentCount = segmentsInfo.length - 1;
     segDisplaySet.isLoaded = true;
     this._broadcastEvent(SegmentationService_EVENTS.SEGMENTATION_LOADING_COMPLETE, {
       segmentationId,
-      segDisplaySet,
-      overlappingSegments
+      segDisplaySet
     });
     return this.addOrUpdateSegmentation(segmentation, suppressEvents);
   }
@@ -6911,6 +7061,7 @@ class SegmentationService extends src/* PubSubService */.hC {
       id: segmentationId,
       displaySetInstanceUID: rtDisplaySetUID,
       type: representationType,
+      label: rtDisplaySet.SeriesDescription,
       representationData: {
         [CONTOUR]: {
           geometryIds
@@ -7068,6 +7219,14 @@ class SegmentationService extends src/* PubSubService */.hC {
     const adjustedAlpha = type === LABELMAP ? alpha : 1 - alpha;
     highlightFn(segmentIndex, adjustedAlpha, hideOthers, segments, toolGroupId, animationLength, segmentationRepresentation);
   }
+  _setDisplaySetIsHydrated(displaySetUID, isHydrated) {
+    const {
+      DisplaySetService: displaySetService
+    } = this.servicesManager.services;
+    const displaySet = displaySetService.getDisplaySetByUID(displaySetUID);
+    displaySet.isHydrated = isHydrated;
+    displaySetService.setDisplaySetMetadataInvalidated(displaySetUID, false);
+  }
   _highlightLabelmap(segmentIndex, alpha, hideOthers, segments, toolGroupId, animationLength, segmentationRepresentation) {
     const newSegmentSpecificConfig = {
       [segmentIndex]: {
@@ -7177,6 +7336,7 @@ class SegmentationService extends src/* PubSubService */.hC {
         this._setActiveSegmentationForToolGroup(id, this._getFirstToolGroupId(), false);
       }
     }
+    this._setDisplaySetIsHydrated(segmentationId, false);
     this._broadcastEvent(this.EVENTS.SEGMENTATION_REMOVED, {
       segmentationId
     });
@@ -7747,16 +7907,17 @@ const DEFAULT_TOOLGROUP_ID = 'default';
 // Return true if the data contains the given display set UID OR the imageId
 // if it is a composite object.
 const dataContains = (data, displaySetUID, imageId) => {
-  if (data.displaySetInstanceUID === displaySetUID) return true;
+  if (data.displaySetInstanceUID === displaySetUID) {
+    return true;
+  }
   if (imageId && data.isCompositeStack && data.imageIds) {
     return !!data.imageIds.find(dataId => dataId === imageId);
   }
   return false;
 };
 class ViewportInfo {
-  constructor(viewportIndex, viewportId) {
+  constructor(viewportId) {
     this.viewportId = '';
-    this.viewportIndex = void 0;
     this.element = void 0;
     this.viewportOptions = void 0;
     this.displaySetOptions = void 0;
@@ -7768,7 +7929,6 @@ class ViewportInfo {
       this.viewportOptions = null;
       this.displaySetOptions = null;
     };
-    this.viewportIndex = viewportIndex;
     this.viewportId = viewportId;
     this.setPublicViewportOptions({});
     this.setPublicDisplaySetOptions([{}]);
@@ -7779,7 +7939,9 @@ class ViewportInfo {
    * OR if it is a composite stack and contains the given imageId
    */
   contains(displaySetUID, imageId) {
-    if (!this.viewportData?.data) return false;
+    if (!this.viewportData?.data) {
+      return false;
+    }
     if (this.viewportData.data.length) {
       return !!this.viewportData.data.find(data => dataContains(data, displaySetUID, imageId));
     }
@@ -7794,9 +7956,6 @@ class ViewportInfo {
   setViewportId(viewportId) {
     this.viewportId = viewportId;
   }
-  setViewportIndex(viewportIndex) {
-    this.viewportIndex = viewportIndex;
-  }
   setElement(element) {
     this.element = element;
   }
@@ -7806,9 +7965,6 @@ class ViewportInfo {
   getViewportData() {
     return this.viewportData;
   }
-  getViewportIndex() {
-    return this.viewportIndex;
-  }
   getElement() {
     return this.element;
   }
@@ -7819,13 +7975,14 @@ class ViewportInfo {
     // map the displaySetOptions and check if they are undefined then set them to default values
     const displaySetOptions = this.mapDisplaySetOptions(publicDisplaySetOptions);
     this.setDisplaySetOptions(displaySetOptions);
+    return this.displaySetOptions;
   }
   hasDisplaySet(displaySetInstanceUID) {
     // Todo: currently this does not work for non image & referenceImage displaySets.
     // Since SEG and other derived displaySets are loaded in a different way, and not
     // via cornerstoneViewportService
     let viewportData = this.getViewportData();
-    if (viewportData.viewportType === esm.Enums.ViewportType.ORTHOGRAPHIC) {
+    if (viewportData.viewportType === esm.Enums.ViewportType.ORTHOGRAPHIC || viewportData.viewportType === esm.Enums.ViewportType.VOLUME_3D) {
       viewportData = viewportData;
       return viewportData.data.some(_ref => {
         let {
@@ -7865,6 +8022,7 @@ class ViewportInfo {
       toolGroupId,
       presentationIds
     });
+    return this.viewportOptions;
   }
   setViewportOptions(viewportOptions) {
     this.viewportOptions = viewportOptions;
@@ -7959,7 +8117,6 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
   constructor(servicesManager) {
     super(CornerstoneViewportService_EVENTS);
     this.renderingEngine = void 0;
-    this.viewportsInfo = new Map();
     this.viewportsById = new Map();
     this.viewportGridResizeObserver = void 0;
     this.viewportsDisplaySets = new Map();
@@ -7975,37 +8132,16 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
 
   /**
    * Adds the HTML element to the viewportService
-   * @param {*} viewportIndex
+   * @param {*} viewportId
    * @param {*} elementRef
    */
-  enableViewport(viewportIndex, viewportOptions, elementRef) {
-    // Use the provided viewportId
-    // Not providing a viewportId is frowned upon because it does weird things
-    // on moving them around, but it does mostly work.
-    if (!viewportOptions.viewportId) {
-      console.warn('Should provide viewport id externally', viewportOptions);
-      viewportOptions.viewportId = this.getViewportId(viewportIndex) || `viewport-${viewportIndex}`;
-    }
-    const {
-      viewportId
-    } = viewportOptions;
-    const viewportInfo = new Viewport(viewportIndex, viewportId);
-    if (!viewportInfo.viewportId) {
-      throw new Error('Should have viewport ID afterwards');
-    }
+  enableViewport(viewportId, elementRef) {
+    const viewportInfo = new Viewport(viewportId);
     viewportInfo.setElement(elementRef);
-    this.viewportsInfo.set(viewportIndex, viewportInfo);
     this.viewportsById.set(viewportId, viewportInfo);
   }
   getViewportIds() {
-    const viewportIds = [];
-    this.viewportsInfo.forEach(viewportInfo => {
-      viewportIds.push(viewportInfo.getViewportId());
-    });
-    return viewportIds;
-  }
-  getViewportId(viewportIndex) {
-    return this.viewportsInfo[viewportIndex]?.viewportId;
+    return Array.from(this.viewportsById.keys());
   }
 
   /**
@@ -8059,34 +8195,38 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
    * created for every new viewport, this will be called whenever the set of
    * viewports is changed, but NOT when the viewport position changes only.
    *
-   * @param viewportIndex
+   * @param viewportId - The viewportId to disable
    */
-  disableElement(viewportIndex) {
-    const viewportInfo = this.viewportsInfo.get(viewportIndex);
-    if (!viewportInfo) {
-      return;
-    }
-    const viewportId = viewportInfo.getViewportId();
-    this.renderingEngine && this.renderingEngine.disableElement(viewportId);
-    this.viewportsInfo.get(viewportIndex).destroy();
-    this.viewportsInfo.delete(viewportIndex);
+  disableElement(viewportId) {
+    this.renderingEngine?.disableElement(viewportId);
+
+    // clean up
     this.viewportsById.delete(viewportId);
+    this.viewportsDisplaySets.delete(viewportId);
   }
   setPresentations(viewport, presentations) {
     const properties = presentations?.lutPresentation?.properties;
-    if (properties) viewport.setProperties(properties);
+    if (properties) {
+      viewport.setProperties(properties);
+    }
     const camera = presentations?.positionPresentation?.camera;
-    if (camera) viewport.setCamera(camera);
+    if (camera) {
+      viewport.setCamera(camera);
+    }
   }
-  getPresentation(viewportIndex) {
-    const viewportInfo = this.viewportsInfo.get(viewportIndex);
-    if (!viewportInfo) return;
+  getPresentation(viewportId) {
+    const viewportInfo = this.viewportsById.get(viewportId);
+    if (!viewportInfo) {
+      return;
+    }
     const {
       viewportType,
       presentationIds
     } = viewportInfo.getViewportOptions();
-    const csViewport = this.getCornerstoneViewportByIndex(viewportIndex);
-    if (!csViewport) return;
+    const csViewport = this.getCornerstoneViewport(viewportId);
+    if (!csViewport) {
+      return;
+    }
     const properties = csViewport.getProperties();
     if (properties.isComputedVOI) {
       delete properties.voiRange;
@@ -8102,40 +8242,78 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
       camera
     };
   }
+  storePresentation(_ref) {
+    let {
+      viewportId
+    } = _ref;
+    const stateSyncService = this.servicesManager.services.stateSyncService;
+    let presentation;
+    try {
+      presentation = this.getPresentation(viewportId);
+    } catch (error) {
+      console.warn(error);
+    }
+    if (!presentation || !presentation.presentationIds) {
+      return;
+    }
+    const {
+      lutPresentationStore,
+      positionPresentationStore
+    } = stateSyncService.getState();
+    const {
+      presentationIds
+    } = presentation;
+    const {
+      lutPresentationId,
+      positionPresentationId
+    } = presentationIds || {};
+    const storeState = {};
+    if (lutPresentationId) {
+      storeState.lutPresentationStore = {
+        ...lutPresentationStore,
+        [lutPresentationId]: presentation
+      };
+    }
+    if (positionPresentationId) {
+      storeState.positionPresentationStore = {
+        ...positionPresentationStore,
+        [positionPresentationId]: presentation
+      };
+    }
+    stateSyncService.store(storeState);
+  }
 
   /**
-   * Uses the renderingEngine to enable the element for the given viewport index
-   * and sets the displaySet data to the viewport
-   * @param {*} viewportIndex
-   * @param {*} displaySet
-   * @param {*} dataSource
-   * @returns
+   * Sets the viewport data for a viewport.
+   * @param viewportId - The ID of the viewport to set the data for.
+   * @param viewportData - The viewport data to set.
+   * @param publicViewportOptions - The public viewport options.
+   * @param publicDisplaySetOptions - The public display set options.
+   * @param presentations - The presentations to set.
    */
-  setViewportData(viewportIndex, viewportData, publicViewportOptions, publicDisplaySetOptions, presentations) {
+  setViewportData(viewportId, viewportData, publicViewportOptions, publicDisplaySetOptions, presentations) {
     const renderingEngine = this.getRenderingEngine();
-    const viewportId = publicViewportOptions.viewportId || this.getViewportId(viewportIndex);
-    if (!viewportId) {
-      throw new Error('Must define viewportId externally');
-    }
+
+    // This is the old viewportInfo, which may have old options but we might be
+    // using its viewport (same viewportId as the new viewportInfo)
     const viewportInfo = this.viewportsById.get(viewportId);
+
+    // We should store the presentation for the current viewport since we can't only
+    // rely to store it WHEN the viewport is disabled since we might keep around the
+    // same viewport/element and just change the viewportData for it (drag and drop etc.)
+    // the disableElement storePresentation handle would not be called in this case
+    // and we would lose the presentation.
+    this.storePresentation({
+      viewportId: viewportInfo.getViewportId()
+    });
     if (!viewportInfo) {
-      throw new Error('Viewport info not defined');
+      throw new Error('element is not enabled for the given viewportId');
     }
 
-    // If the viewport has moved index, then record the new index
-    if (viewportInfo.viewportIndex !== viewportIndex) {
-      this.viewportsInfo.delete(viewportInfo.viewportIndex);
-      this.viewportsInfo.set(viewportIndex, viewportInfo);
-      viewportInfo.viewportIndex = viewportIndex;
-    }
-    viewportInfo.setRenderingEngineId(renderingEngine.id);
-    const {
-      viewportOptions,
-      displaySetOptions
-    } = this._getViewportAndDisplaySetOptions(publicViewportOptions, publicDisplaySetOptions, viewportInfo);
-    viewportInfo.setViewportOptions(viewportOptions);
-    viewportInfo.setDisplaySetOptions(displaySetOptions);
-    viewportInfo.setViewportData(viewportData);
+    // override the viewportOptions and displaySetOptions with the public ones
+    // since those are the newly set ones, we set them here so that it handles defaults
+    const displaySetOptions = viewportInfo.setPublicDisplaySetOptions(publicDisplaySetOptions);
+    const viewportOptions = viewportInfo.setPublicViewportOptions(publicViewportOptions);
     const element = viewportInfo.getElement();
     const type = viewportInfo.getViewportType();
     const background = viewportInfo.getBackground();
@@ -8150,11 +8328,23 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
       }
     };
 
+    // Rendering Engine Id set should happen before enabling the element
+    // since there are callbacks that depend on the renderingEngine id
+    // Todo: however, this is a limitation which means that we can't change
+    // the rendering engine id for a given viewport which might be a super edge
+    // case
+    viewportInfo.setRenderingEngineId(renderingEngine.id);
+
     // Todo: this is not optimal at all, we are re-enabling the already enabled
     // element which is not what we want. But enabledElement as part of the
     // renderingEngine is designed to be used like this. This will trigger
     // ENABLED_ELEMENT again and again, which will run onEnableElement callbacks
     renderingEngine.enableElement(viewportInput);
+    viewportInfo.setViewportOptions(viewportOptions);
+    viewportInfo.setDisplaySetOptions(displaySetOptions);
+    viewportInfo.setViewportData(viewportData);
+    viewportInfo.setViewportId(viewportId);
+    this.viewportsById.set(viewportId, viewportInfo);
     const viewport = renderingEngine.getViewport(viewportId);
     this._setDisplaySets(viewport, viewportData, viewportInfo, presentations);
 
@@ -8163,7 +8353,6 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
     // invalid data.
     this._broadcastEvent(this.EVENTS.VIEWPORT_DATA_CHANGED, {
       viewportData,
-      viewportIndex,
       viewportId
     });
   }
@@ -8175,31 +8364,8 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
     const viewport = this.renderingEngine.getViewport(viewportId);
     return viewport;
   }
-  getCornerstoneViewportByIndex(viewportIndex) {
-    const viewportInfo = this.getViewportInfoByIndex(viewportIndex);
-    if (!viewportInfo || !this.renderingEngine || this.renderingEngine.hasBeenDestroyed) {
-      return null;
-    }
-    const viewport = this.renderingEngine.getViewport(viewportInfo.getViewportId());
-    return viewport;
-  }
-
-  /**
-   * Returns the viewportIndex for the provided viewportId
-   * @param {string} viewportId - the viewportId
-   * @returns {number} - the viewportIndex
-   */
-  getViewportInfoByIndex(viewportIndex) {
-    return this.viewportsInfo.get(viewportIndex);
-  }
   getViewportInfo(viewportId) {
-    // @ts-ignore
-    for (const [index, viewport] of this.viewportsInfo.entries()) {
-      if (viewport.getViewportId() === viewportId) {
-        return viewport;
-      }
-    }
-    return null;
+    return this.viewportsById.get(viewportId);
   }
   _setStackViewport(viewport, viewportData, viewportInfo, presentations) {
     const displaySetOptions = viewportInfo.getDisplaySetOptions();
@@ -8236,9 +8402,13 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
       }
     }
     viewport.setStack(imageIds, initialImageIndexToUse).then(() => {
-      viewport.setProperties(properties);
+      viewport.setProperties({
+        ...properties
+      });
       const camera = presentations.positionPresentation?.camera;
-      if (camera) viewport.setCamera(camera);
+      if (camera) {
+        viewport.setCamera(camera);
+      }
     });
   }
   _getInitialImageIndexForViewport(viewportInfo, imageIds) {
@@ -8333,7 +8503,7 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
       });
     }
     this.viewportsDisplaySets.set(viewport.id, displaySetInstanceUIDs);
-    if (hangingProtocolService.hasCustomImageLoadStrategy() && !hangingProtocolService.customImageLoadPerformed) {
+    if (hangingProtocolService.getShouldPerformCustomImageLoad()) {
       // delegate the volume loading to the hanging protocol service if it has a custom image load strategy
       return hangingProtocolService.runImageLoadStrategy({
         viewportId: viewport.id,
@@ -8395,11 +8565,11 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
       };
     });
     await viewport.setVolumes(volumeInputArray);
-    volumesProperties.forEach(_ref => {
+    volumesProperties.forEach(_ref2 => {
       let {
         properties,
         volumeId
-      } = _ref;
+      } = _ref2;
       viewport.setProperties(properties, volumeId);
     });
     this.setPresentations(viewport, presentations);
@@ -8487,13 +8657,12 @@ 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(viewportIndex, viewportData) {
+  updateViewport(viewportId, viewportData) {
     let keepCamera = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    const viewportInfo = this.getViewportInfoByIndex(viewportIndex);
-    const viewportId = viewportInfo.getViewportId();
+    const viewportInfo = this.getViewportInfo(viewportId);
     const viewport = this.getCornerstoneViewport(viewportId);
     const viewportCamera = viewport.getCamera();
-    if (viewport instanceof esm.VolumeViewport) {
+    if (viewport instanceof esm.VolumeViewport || viewport instanceof esm.VolumeViewport3D) {
       this._setVolumeViewport(viewport, viewportData, viewportInfo).then(() => {
         if (keepCamera) {
           viewport.setCamera(viewportCamera);
@@ -8548,23 +8717,6 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
       return slabThickness;
     }
   }
-  _getViewportAndDisplaySetOptions(publicViewportOptions, publicDisplaySetOptions, viewportInfo) {
-    const viewportIndex = viewportInfo.getViewportIndex();
-
-    // Creating a temporary viewportInfo to handle defaults
-    const newViewportInfo = new Viewport(viewportIndex, viewportInfo.getViewportId());
-
-    // To handle setting the default values if missing for the viewportOptions and
-    // displaySetOptions
-    newViewportInfo.setPublicViewportOptions(publicViewportOptions);
-    newViewportInfo.setPublicDisplaySetOptions(publicDisplaySetOptions);
-    const newViewportOptions = newViewportInfo.getViewportOptions();
-    const newDisplaySetOptions = newViewportInfo.getDisplaySetOptions();
-    return {
-      viewportOptions: newViewportOptions,
-      displaySetOptions: newDisplaySetOptions
-    };
-  }
   _getFrameOfReferenceUID(displaySetInstanceUID) {
     const {
       displaySetService
@@ -8602,28 +8754,28 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
    *
    * @param measurement
    *          The measurement that is desired to view.
-   * @param activeViewportIndex - the index that was active at the time the jump
+   * @param activeViewportId - the index that was active at the time the jump
    *          was initiated.
-   * @return the viewportIndex to display the given measurement
+   * @return the viewportId that the measurement should be displayed in.
    */
-  getViewportIndexToJump(activeViewportIndex, displaySetInstanceUID, cameraProps) {
-    const viewportInfo = this.viewportsInfo.get(activeViewportIndex);
+  getViewportIdToJump(activeViewportId, displaySetInstanceUID, cameraProps) {
+    const viewportInfo = this.getViewportInfo(activeViewportId);
     const {
       referencedImageId
     } = cameraProps;
     if (viewportInfo?.contains(displaySetInstanceUID, referencedImageId)) {
-      return activeViewportIndex;
+      return activeViewportId;
     }
-    return [...this.viewportsById.values()].find(viewportInfo => viewportInfo.contains(displaySetInstanceUID, referencedImageId))?.viewportIndex ?? -1;
+    return [...this.viewportsById.values()].find(viewportInfo => viewportInfo.contains(displaySetInstanceUID, referencedImageId))?.viewportId ?? null;
   }
 }
 CornerstoneViewportService.REGISTRATION = {
   name: 'cornerstoneViewportService',
   altName: 'CornerstoneViewportService',
-  create: _ref2 => {
+  create: _ref3 => {
     let {
       servicesManager
-    } = _ref2;
+    } = _ref3;
     return new CornerstoneViewportService(servicesManager);
   }
 };
@@ -8632,7 +8784,7 @@ CornerstoneViewportService.REGISTRATION = {
 
 
 // EXTERNAL MODULE: ../../../node_modules/dicomweb-client/build/dicomweb-client.es.js
-var dicomweb_client_es = __webpack_require__(75935);
+var dicomweb_client_es = __webpack_require__(97604);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/dicomLoaderService.js
 
 
@@ -8824,7 +8976,6 @@ function getHandlesFromPoints(points) {
 
 
 
-
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/index.ts
 
 
@@ -8849,11 +9000,10 @@ function src_extends() { src_extends = Object.assign ? Object.assign.bind() : fu
 
 
 
-
 
 
 const Component = /*#__PURE__*/react.lazy(() => {
-  return Promise.all(/* import() */[__webpack_require__.e(664), __webpack_require__.e(351)]).then(__webpack_require__.bind(__webpack_require__, 30351));
+  return Promise.all(/* import() */[__webpack_require__.e(23), __webpack_require__.e(181)]).then(__webpack_require__.bind(__webpack_require__, 86181));
 });
 const OHIFCornerstoneViewport = props => {
   return /*#__PURE__*/react.createElement(react.Suspense, {
@@ -8876,7 +9026,6 @@ const cornerstoneExtension = {
       esm.imageLoadPoolManager.clearRequestStack(type);
       esm.imageRetrievalPoolManager.clearRequestStack(type);
     });
-    destroy();
     (0,state/* reset */.mc)();
   },
   /**
@@ -8956,7 +9105,7 @@ const cornerstoneExtension = {
 
 /***/ }),
 
-/***/ 21922:
+/***/ 73704:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -8976,9 +9125,9 @@ const state = {
  * @param {HTMLElement} dom Active viewport element.
  * @return void
  */
-const setEnabledElement = (viewportIndex, element, context) => {
+const setEnabledElement = (viewportId, element, context) => {
   const targetContext = context || state.DEFAULT_CONTEXT;
-  state.enabledElements[viewportIndex] = {
+  state.enabledElements[viewportId] = {
     element,
     context: targetContext
   };
@@ -8989,8 +9138,8 @@ const setEnabledElement = (viewportIndex, element, context) => {
  *
  * @return {HTMLElement} Active viewport element.
  */
-const getEnabledElement = viewportIndex => {
-  return state.enabledElements[viewportIndex];
+const getEnabledElement = viewportId => {
+  return state.enabledElements[viewportId];
 };
 const reset = () => {
   state.enabledElements = {};
@@ -8999,14 +9148,14 @@ const reset = () => {
 
 /***/ }),
 
-/***/ 63130:
+/***/ 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__(77331);
+/* harmony import */ var _cornerstonejs_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(45754);
 
 
 /**