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

package/dist/{707.bundle.17a9d7352409b6269596.js → 967.bundle.aa7e40475fa7cab0726e.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";
@@ -9,7 +9,7 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  CornerstoneExtensionTypes: () => (/* reexport */ types_namespaceObject),
+  Types: () => (/* reexport */ types_namespaceObject),
   "default": () => (/* binding */ cornerstone_src),
   getActiveViewportEnabledElement: () => (/* reexport */ getActiveViewportEnabledElement),
   measurementMappingUtils: () => (/* reexport */ utils_namespaceObject),
@@ -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 + 327 modules
+var dist_esm = __webpack_require__(99777);
+// EXTERNAL MODULE: ../../core/src/index.ts + 75 modules
+var src = __webpack_require__(34491);
 // 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);
@@ -87,21 +86,17 @@ function initWADOImageLoader(userAuthenticationService, appConfig) {
       // will convert everything to integers (to be able to work with cornerstone-2d).
       // Until the default is set to true (which is the case for cornerstone3D),
       // we should set this flag to false.
-      convertFloatPixelDataToInt: false
+      convertFloatPixelDataToInt: false,
+      use16BitDataType: Boolean(appConfig.use16BitDataType)
     },
     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 +111,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 + 485 modules
+var ui_src = __webpack_require__(71783);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/callInputDialog.tsx
 
 
@@ -157,7 +152,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':
@@ -187,11 +184,11 @@ function callInputDialog(uiDialogService, data, callback) {
         actions: [{
           id: 'cancel',
           text: 'Cancel',
-          type: ui_src/* ButtonEnums.type */.LZ.U.secondary
+          type: ui_src/* ButtonEnums.type */.LZ.dt.secondary
         }, {
           id: 'save',
           text: 'Save',
-          type: ui_src/* ButtonEnums.type */.LZ.U.primary
+          type: ui_src/* ButtonEnums.type */.LZ.dt.primary
         }],
         onSubmit: onSubmitHandler,
         body: _ref2 => {
@@ -201,7 +198,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 +229,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;
 }
@@ -322,11 +319,12 @@ function onCompletedCalibrationLine(servicesManager, csToolsEvent) {
   const currentColumnPixelSpacing = calibratedPixelSpacing?.[1] || imagePlaneModule?.columnPixelSpacing || 1;
   const adjustCalibration = newLength => {
     const spacingScale = newLength / length;
-    const rowSpacing = spacingScale * currentRowPixelSpacing;
-    const colSpacing = spacingScale * currentColumnPixelSpacing;
 
     // trigger resize of the viewport to adjust the world/pixel mapping
-    calibrateImageSpacing(imageId, viewport.getRenderingEngine(), rowSpacing, colSpacing);
+    calibrateImageSpacing(imageId, viewport.getRenderingEngine(), {
+      type: 'User',
+      scale: 1 / spacingScale
+    });
   };
   return new Promise((resolve, reject) => {
     if (!uiDialogService) {
@@ -358,9 +356,221 @@ 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;
+    };
+  }
+  getReferencedImageId(viewport) {
+    if (viewport instanceof esm.VolumeViewport) {
+      return;
+    }
+    const targetId = this.getTargetId(viewport);
+    return targetId.split('imageId:')[1];
+  }
+  /**
+   * 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 +600,10 @@ 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)(dist_esm.CircleScissorsTool);
+  (0,dist_esm.addTool)(dist_esm.RectangleScissorsTool);
+  (0,dist_esm.addTool)(dist_esm.SphereScissorsTool);
+  (0,dist_esm.addTool)(tools_ImageOverlayViewerTool);
 
   // Modify annotation tools to use dashed lines on SR
   const annotationStyle = {
@@ -428,13 +642,17 @@ 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,
+  CircleScissors: dist_esm.CircleScissorsTool.toolName,
+  RectangleScissors: dist_esm.RectangleScissorsTool.toolName,
+  SphereScissors: dist_esm.SphereScissorsTool.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
 
 
@@ -537,9 +755,9 @@ function getMappedAnnotations(annotation, displaySetService) {
       SeriesNumber
     } = displaySet;
     const {
-      length
+      length,
+      unit = 'mm'
     } = targetStats;
-    const unit = 'mm';
     annotations.push({
       SeriesInstanceUID,
       SOPInstanceUID,
@@ -566,10 +784,13 @@ function _getReport(mappedAnnotations, points, FrameOfReferenceUID) {
   values.push('Cornerstone:Length');
   mappedAnnotations.forEach(annotation => {
     const {
-      length
+      length,
+      unit
     } = annotation;
-    columns.push(`Length (mm)`);
+    columns.push(`Length`);
     values.push(length);
+    columns.push('Unit');
+    values.push(unit);
   });
   if (FrameOfReferenceUID) {
     columns.push('FrameOfReferenceUID');
@@ -598,7 +819,8 @@ function getDisplayText(mappedAnnotations, displaySet) {
     length,
     SeriesNumber,
     SOPInstanceUID,
-    frameNumber
+    frameNumber,
+    unit
   } = mappedAnnotations[0];
   const instance = displaySet.images.find(image => image.SOPInstanceUID === SOPInstanceUID);
   let InstanceNumber;
@@ -607,9 +829,11 @@ 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})`);
+  displayText.push(`${roundedLength} ${unit} (S: ${SeriesNumber}${instanceText}${frameText})`);
   return displayText;
 }
 /* harmony default export */ const measurementServiceMappings_Length = (Length);
@@ -711,9 +935,9 @@ function Bidirectional_getMappedAnnotations(annotation, displaySetService) {
     } = displaySet;
     const {
       length,
-      width
+      width,
+      unit
     } = targetStats;
-    const unit = 'mm';
     annotations.push({
       SeriesInstanceUID,
       SOPInstanceUID,
@@ -742,10 +966,11 @@ function Bidirectional_getReport(mappedAnnotations, points, FrameOfReferenceUID)
   mappedAnnotations.forEach(annotation => {
     const {
       length,
-      width
+      width,
+      unit
     } = annotation;
-    columns.push(`Length (mm)`, `Width (mm)`);
-    values.push(length, width);
+    columns.push(`Length`, `Width`, 'Unit');
+    values.push(length, width, unit);
   });
   if (FrameOfReferenceUID) {
     columns.push('FrameOfReferenceUID');
@@ -773,6 +998,7 @@ function Bidirectional_getDisplayText(mappedAnnotations, displaySet) {
   const {
     length,
     width,
+    unit,
     SeriesNumber,
     SOPInstanceUID,
     frameNumber
@@ -786,27 +1012,15 @@ function Bidirectional_getDisplayText(mappedAnnotations, displaySet) {
   }
   const instanceText = InstanceNumber ? ` I: ${InstanceNumber}` : '';
   const frameText = displaySet.isMultiFrame ? ` F: ${frameNumber}` : '';
-  displayText.push(`L: ${roundedLength} mm (S: ${SeriesNumber}${instanceText}${frameText})`);
-  displayText.push(`W: ${roundedWidth} mm`);
+  displayText.push(`L: ${roundedLength} ${unit} (S: ${SeriesNumber}${instanceText}${frameText})`);
+  displayText.push(`W: ${roundedWidth} ${unit}`);
   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 +1118,18 @@ function EllipticalROI_getMappedAnnotations(annotation, displaySetService) {
       stdDev,
       max,
       area,
-      Modality
+      Modality,
+      areaUnit,
+      modalityUnit
     } = targetStats;
-    const unit = utils_getModalityUnit(Modality);
     annotations.push({
       SeriesInstanceUID,
       SOPInstanceUID,
       SeriesNumber,
       frameNumber,
       Modality,
-      unit,
+      unit: modalityUnit,
+      areaUnit,
       mean,
       stdDev,
       max,
@@ -941,13 +1157,14 @@ function EllipticalROI_getReport(mappedAnnotations, points, FrameOfReferenceUID)
       stdDev,
       max,
       area,
-      unit
+      unit,
+      areaUnit
     } = annotation;
     if (!mean || !unit || !max || !area) {
       return;
     }
-    columns.push(`max (${unit})`, `mean (${unit})`, `std (${unit})`, `area (mm2)`);
-    values.push(max, mean, stdDev, area);
+    columns.push(`max (${unit})`, `mean (${unit})`, `std (${unit})`, 'Area', 'Unit');
+    values.push(max, mean, stdDev, area, areaUnit);
   });
   if (FrameOfReferenceUID) {
     columns.push('FrameOfReferenceUID');
@@ -975,7 +1192,8 @@ function EllipticalROI_getDisplayText(mappedAnnotations, displaySet) {
   const {
     area,
     SOPInstanceUID,
-    frameNumber
+    frameNumber,
+    areaUnit
   } = mappedAnnotations[0];
   const instance = displaySet.images.find(image => image.SOPInstanceUID === SOPInstanceUID);
   let InstanceNumber;
@@ -984,10 +1202,8 @@ function EllipticalROI_getDisplayText(mappedAnnotations, displaySet) {
   }
   const instanceText = InstanceNumber ? ` I: ${InstanceNumber}` : '';
   const frameText = displaySet.isMultiFrame ? ` F: ${frameNumber}` : '';
-
-  // Area sometimes becomes undefined if `preventHandleOutsideImage` is off.
-  const roundedArea = src.utils.roundNumber(area || 0, 2);
-  displayText.push(`${roundedArea} mm<sup>2</sup>`);
+  const roundedArea = src.utils.roundNumber(area, 2);
+  displayText.push(`${roundedArea} ${areaUnit}`);
 
   // Todo: we need a better UI for displaying all these information
   mappedAnnotations.forEach(mappedAnnotation => {
@@ -1013,7 +1229,6 @@ function EllipticalROI_getDisplayText(mappedAnnotations, displaySet) {
 
 
 
-
 const CircleROI = {
   toAnnotation: measurement => {},
   toMeasurement: (csToolsEventDetail, DisplaySetService, CornerstoneViewportService, getValueTypeFromToolType) => {
@@ -1111,20 +1326,22 @@ function CircleROI_getMappedAnnotations(annotation, DisplaySetService) {
       stdDev,
       max,
       area,
-      Modality
+      Modality,
+      areaUnit,
+      modalityUnit
     } = targetStats;
-    const unit = utils_getModalityUnit(Modality);
     annotations.push({
       SeriesInstanceUID,
       SOPInstanceUID,
       SeriesNumber,
       frameNumber,
       Modality,
-      unit,
+      unit: modalityUnit,
       mean,
       stdDev,
       max,
-      area
+      area,
+      areaUnit
     });
   });
   return annotations;
@@ -1148,13 +1365,14 @@ function CircleROI_getReport(mappedAnnotations, points, FrameOfReferenceUID) {
       stdDev,
       max,
       area,
-      unit
+      unit,
+      areaUnit
     } = annotation;
     if (!mean || !unit || !max || !area) {
       return;
     }
-    columns.push(`max (${unit})`, `mean (${unit})`, `std (${unit})`, `area (mm2)`);
-    values.push(max, mean, stdDev, area);
+    columns.push(`max (${unit})`, `mean (${unit})`, `std (${unit})`, 'Area', 'Unit');
+    values.push(max, mean, stdDev, area, areaUnit);
   });
   if (FrameOfReferenceUID) {
     columns.push('FrameOfReferenceUID');
@@ -1182,7 +1400,8 @@ function CircleROI_getDisplayText(mappedAnnotations, displaySet) {
   const {
     area,
     SOPInstanceUID,
-    frameNumber
+    frameNumber,
+    areaUnit
   } = mappedAnnotations[0];
   const instance = displaySet.images.find(image => image.SOPInstanceUID === SOPInstanceUID);
   let InstanceNumber;
@@ -1194,7 +1413,7 @@ function CircleROI_getDisplayText(mappedAnnotations, displaySet) {
 
   // Area sometimes becomes undefined if `preventHandleOutsideImage` is off.
   const roundedArea = src.utils.roundNumber(area || 0, 2);
-  displayText.push(`${roundedArea} mm<sup>2</sup>`);
+  displayText.push(`${roundedArea} ${areaUnit}`);
 
   // Todo: we need a better UI for displaying all these information
   mappedAnnotations.forEach(mappedAnnotation => {
@@ -1515,7 +1734,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 +1916,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 +2062,6 @@ function PlanarFreehandROI_getDisplayText(mappedAnnotations) {
 
 
 
-
 const RectangleROI = {
   toAnnotation: measurement => {},
   toMeasurement: (csToolsEventDetail, DisplaySetService, CornerstoneViewportService, getValueTypeFromToolType) => {
@@ -1937,20 +2159,22 @@ function RectangleROI_getMappedAnnotations(annotation, DisplaySetService) {
       stdDev,
       max,
       area,
-      Modality
+      Modality,
+      modalityUnit,
+      areaUnit
     } = targetStats;
-    const unit = utils_getModalityUnit(Modality);
     annotations.push({
       SeriesInstanceUID,
       SOPInstanceUID,
       SeriesNumber,
       frameNumber,
       Modality,
-      unit,
+      unit: modalityUnit,
       mean,
       stdDev,
       max,
-      area
+      area,
+      areaUnit
     });
   });
   return annotations;
@@ -1974,13 +2198,14 @@ function RectangleROI_getReport(mappedAnnotations, points, FrameOfReferenceUID)
       stdDev,
       max,
       area,
-      unit
+      unit,
+      areaUnit
     } = annotation;
     if (!mean || !unit || !max || !area) {
       return;
     }
-    columns.push(`max (${unit})`, `mean (${unit})`, `std (${unit})`, `area (mm2)`);
-    values.push(max, mean, stdDev, area);
+    columns.push(`Maximum`, `Mean`, `Std Dev`, 'Pixel Unit', `Area`, 'Unit');
+    values.push(max, mean, stdDev, unit, area, areaUnit);
   });
   if (FrameOfReferenceUID) {
     columns.push('FrameOfReferenceUID');
@@ -2008,7 +2233,8 @@ function RectangleROI_getDisplayText(mappedAnnotations, displaySet) {
   const {
     area,
     SOPInstanceUID,
-    frameNumber
+    frameNumber,
+    areaUnit
   } = mappedAnnotations[0];
   const instance = displaySet.images.find(image => image.SOPInstanceUID === SOPInstanceUID);
   let InstanceNumber;
@@ -2020,7 +2246,7 @@ function RectangleROI_getDisplayText(mappedAnnotations, displaySet) {
 
   // Area sometimes becomes undefined if `preventHandleOutsideImage` is off.
   const roundedArea = src.utils.roundNumber(area || 0, 2);
-  displayText.push(`${roundedArea} mm<sup>2</sup>`);
+  displayText.push(`${roundedArea} ${areaUnit}`);
 
   // Todo: we need a better UI for displaying all these information
   mappedAnnotations.forEach(mappedAnnotation => {
@@ -2515,7 +2741,7 @@ function getInterleavedFrames(imageIds) {
   }
   while (!prefetchQueuedFilled.currentPositionDownToMinimum || !prefetchQueuedFilled.currentPositionUpToMaximum) {
     if (!prefetchQueuedFilled.currentPositionDownToMinimum) {
-      // Add imageId bellow
+      // Add imageId below
       lowerImageIdIndex--;
       imageIdsToPrefetch.push({
         imageId: imageIds[lowerImageIdIndex],
@@ -2540,7 +2766,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 +2956,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 = [];
@@ -3004,6 +3234,7 @@ const DEFAULT_CONTEXT_MENU_CLICKS = {
     commands: [{
       commandName: 'showCornerstoneContextMenu',
       commandOptions: {
+        requireNearbyToolData: true,
         menuId: 'measurementsContextMenu'
       }
     }]
@@ -3020,9 +3251,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,9 +3277,18 @@ 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);
+    if (!toRun) {
+      return;
+    }
+
+    // only find nearbyToolData if required, for the click (which closes the context menu
+    // we don't need to find nearbyToolData)
+    let nearbyToolData = null;
+    if (toRun.commands.some(command => command.commandOptions?.requireNearbyToolData)) {
+      nearbyToolData = findNearbyToolData(commandsManager, evt);
+    }
     const options = {
-      nearbyToolData: findNearbyToolData(commandsManager, evt),
+      nearbyToolData,
       event: evt
     };
     commandsManager.run(toRun, options);
@@ -3057,10 +3303,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 +3341,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 +3407,6 @@ function initDoubleClick(_ref) {
 
 
 
-
 // TODO: Cypress tests are currently grabbing this from the window?
 window.cornerstone = esm;
 window.cornerstoneTools = dist_esm;
@@ -3169,10 +3421,25 @@ async function init(_ref) {
     configuration,
     appConfig
   } = _ref;
-  await (0,esm.init)();
+  await (0,esm.init)({
+    rendering: {
+      preferSizeOverAccuracy: Boolean(appConfig.use16BitDataType),
+      useNorm16Texture: Boolean(appConfig.use16BitDataType)
+    }
+  });
 
   // For debugging e2e tests that are failing on CI
   esm.setUseCPURendering(Boolean(appConfig.useCPURendering));
+  switch (appConfig.useSharedArrayBuffer) {
+    case 'AUTO':
+      esm.setUseSharedArrayBuffer(esm.Enums.SharedArrayBufferModes.AUTO);
+      break;
+    case 'FALSE':
+      esm.setUseSharedArrayBuffer(esm.Enums.SharedArrayBufferModes.FALSE);
+      break;
+    default:
+      esm.setUseSharedArrayBuffer(esm.Enums.SharedArrayBufferModes.TRUE);
+  }
   esm.setConfiguration({
     ...esm.getConfiguration(),
     rendering: {
@@ -3181,18 +3448,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 +3521,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 +3605,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 +3652,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 +3806,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 +3827,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 +3867,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 +4112,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 +4127,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 +4143,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 +4211,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, {
@@ -3969,7 +4235,7 @@ function DicomUpload(_ref) {
           getInputProps
         } = _ref4;
         return /*#__PURE__*/react.createElement("div", getRootProps(), /*#__PURE__*/react.createElement(ui_src/* Button */.zx, {
-          type: ui_src/* ButtonEnums.type */.LZ.U.secondary,
+          type: ui_src/* ButtonEnums.type */.LZ.dt.secondary,
           disabled: false,
           onClick: () => {}
         }, 'Add folder', /*#__PURE__*/react.createElement("input", _extends({}, getInputProps(), {
@@ -3979,7 +4245,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 +4309,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 +4325,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 +4530,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 +4560,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 +4594,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 +4719,7 @@ function commandsModule(_ref) {
     toolGroupService,
     cineService,
     toolbarService,
+    stateSyncService,
     uiDialogService,
     cornerstoneViewportService,
     uiNotificationService,
@@ -4650,8 +4913,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 +4981,8 @@ function commandsModule(_ref) {
     setToolActive: _ref9 => {
       let {
         toolName,
-        toolGroupId = null
+        toolGroupId = null,
+        toggledState
       } = _ref9;
       if (toolName === 'Crosshairs') {
         const activeViewportToolGroup = toolGroupService.getToolGroup(null);
@@ -4735,9 +4998,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 +5009,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 +5034,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 +5051,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 +5070,7 @@ function commandsModule(_ref) {
           content: utils_CornerstoneViewportDownloadForm,
           title: 'Download High Quality Image',
           contentProps: {
-            activeViewportIndex,
+            activeViewportId,
             onClose: uiModalService.hide,
             cornerstoneViewportService
           }
@@ -4882,15 +5151,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 +5260,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 +5282,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 +5382,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 +5465,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 +5486,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 +5558,7 @@ const mpr = {
     },
     viewports: [{
       viewportOptions: {
+        viewportId: 'mpr-axial',
         toolGroupId: 'mpr',
         viewportType: 'volume',
         orientation: 'axial',
@@ -5301,6 +5577,7 @@ const mpr = {
       }]
     }, {
       viewportOptions: {
+        viewportId: 'mpr-sagittal',
         toolGroupId: 'mpr',
         viewportType: 'volume',
         orientation: 'sagittal',
@@ -5319,6 +5596,7 @@ const mpr = {
       }]
     }, {
       viewportOptions: {
+        viewportId: 'mpr-coronal',
         toolGroupId: 'mpr',
         viewportType: 'volume',
         orientation: 'coronal',
@@ -5341,7 +5619,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',
@@ -5530,9 +5807,9 @@ class ToolGroupService {
     return dist_esm.ToolGroupManager.getToolGroupForViewport(viewportId, renderingEngine.id);
   }
   getActiveToolForViewport(viewportId) {
-    const toolGroup = dist_esm.ToolGroupManager.getToolGroupForViewport(viewportId);
+    const toolGroup = this.getToolGroupForViewport(viewportId);
     if (!toolGroup) {
-      return null;
+      return;
     }
     return toolGroup.getActivePrimaryMouseButtonTool();
   }
@@ -5595,9 +5872,8 @@ class ToolGroupService {
     this._setToolsMode(toolGroup, tools);
   }
   createToolGroupAndAddTools(toolGroupId, tools) {
-    let configs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     const toolGroup = this.createToolGroup(toolGroupId);
-    this.addToolsToToolGroup(toolGroupId, tools, configs);
+    this.addToolsToToolGroup(toolGroupId, tools);
     return toolGroup;
   }
 
@@ -5643,30 +5919,6 @@ class ToolGroupService {
     const toolInstance = toolGroup.getToolInstance(toolName);
     toolInstance.configuration = config;
   }
-  _getToolNames(toolGroupTools) {
-    const toolNames = [];
-    if (toolGroupTools.active) {
-      toolGroupTools.active.forEach(tool => {
-        toolNames.push(tool.toolName);
-      });
-    }
-    if (toolGroupTools.passive) {
-      toolGroupTools.passive.forEach(tool => {
-        toolNames.push(tool.toolName);
-      });
-    }
-    if (toolGroupTools.enabled) {
-      toolGroupTools.enabled.forEach(tool => {
-        toolNames.push(tool.toolName);
-      });
-    }
-    if (toolGroupTools.disabled) {
-      toolGroupTools.disabled.forEach(tool => {
-        toolNames.push(tool.toolName);
-      });
-    }
-    return toolNames;
-  }
   _setToolsMode(toolGroup, tools) {
     const {
       active,
@@ -5710,29 +5962,46 @@ class ToolGroupService {
       });
     }
   }
-  _addTools(toolGroup, tools, configs) {
-    const toolNames = this._getToolNames(tools);
-    toolNames.forEach(toolName => {
-      // Initialize the toolConfig if no configuration is provided
-      const toolConfig = configs[toolName] ?? {};
-
-      // if (volumeUID) {
-      //   toolConfig.volumeUID = volumeUID;
-      // }
-
-      toolGroup.addTool(toolName, {
-        ...toolConfig
+  _addTools(toolGroup, tools) {
+    const addTools = tools => {
+      tools.forEach(_ref5 => {
+        let {
+          toolName,
+          parentTool,
+          configuration
+        } = _ref5;
+        if (parentTool) {
+          toolGroup.addToolInstance(toolName, parentTool, {
+            ...configuration
+          });
+        } else {
+          toolGroup.addTool(toolName, {
+            ...configuration
+          });
+        }
       });
-    });
+    };
+    if (tools.active) {
+      addTools(tools.active);
+    }
+    if (tools.passive) {
+      addTools(tools.passive);
+    }
+    if (tools.enabled) {
+      addTools(tools.enabled);
+    }
+    if (tools.disabled) {
+      addTools(tools.disabled);
+    }
   }
 }
 ToolGroupService.REGISTRATION = {
   name: 'toolGroupService',
   altName: 'ToolGroupService',
-  create: _ref5 => {
+  create: _ref6 => {
     let {
       servicesManager
-    } = _ref5;
+    } = _ref6;
     return new ToolGroupService(servicesManager);
   }
 };
@@ -5789,7 +6058,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 +6136,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
 /**
@@ -6026,6 +6295,82 @@ class SegmentationService extends src/* PubSubService */.hC {
         segmentation
       });
     };
+    // Todo: this should not run on the main thread
+    this.calculateCentroids = (segmentationId, segmentIndex) => {
+      const segmentation = this.getSegmentation(segmentationId);
+      const volume = this.getLabelmapVolume(segmentationId);
+      const {
+        dimensions,
+        imageData
+      } = volume;
+      const scalarData = volume.getScalarData();
+      const [dimX, dimY, numFrames] = dimensions;
+      const frameLength = dimX * dimY;
+      const segmentIndices = segmentIndex ? [segmentIndex] : segmentation.segments.filter(segment => segment?.segmentIndex).map(segment => segment.segmentIndex);
+      const segmentIndicesSet = new Set(segmentIndices);
+      const centroids = new Map();
+      for (const index of segmentIndicesSet) {
+        centroids.set(index, {
+          x: 0,
+          y: 0,
+          z: 0,
+          count: 0
+        });
+      }
+      let voxelIndex = 0;
+      for (let frame = 0; frame < numFrames; frame++) {
+        for (let p = 0; p < frameLength; p++) {
+          const segmentIndex = scalarData[voxelIndex++];
+          if (segmentIndicesSet.has(segmentIndex)) {
+            const centroid = centroids.get(segmentIndex);
+            centroid.x += p % dimX;
+            centroid.y += p / dimX | 0;
+            centroid.z += frame;
+            centroid.count++;
+          }
+        }
+      }
+      const result = new Map();
+      for (const [index, centroid] of centroids) {
+        const count = centroid.count;
+        const normalizedCentroid = {
+          x: centroid.x / count,
+          y: centroid.y / count,
+          z: centroid.z / count
+        };
+        normalizedCentroid.world = imageData.indexToWorld([normalizedCentroid.x, normalizedCentroid.y, normalizedCentroid.z]);
+        result.set(index, normalizedCentroid);
+      }
+      this.setCentroids(segmentationId, result);
+      return result;
+    };
+    this.setCentroids = (segmentationId, centroids) => {
+      const segmentation = this.getSegmentation(segmentationId);
+      const imageData = this.getLabelmapVolume(segmentationId).imageData; // Assuming this method returns imageData
+
+      if (!segmentation.cachedStats) {
+        segmentation.cachedStats = {
+          segmentCenter: {}
+        };
+      } else if (!segmentation.cachedStats.segmentCenter) {
+        segmentation.cachedStats.segmentCenter = {};
+      }
+      for (const [segmentIndex, centroid] of centroids) {
+        let world = centroid.world;
+
+        // If world coordinates are not provided, calculate them
+        if (!world || world.length === 0) {
+          world = imageData.indexToWorld(centroid.image);
+        }
+        segmentation.cachedStats.segmentCenter[segmentIndex] = {
+          center: {
+            image: centroid.image,
+            world: world
+          }
+        };
+      }
+      this.addOrUpdateSegmentation(segmentation, true, true);
+    };
     this.createSegmentationForDisplaySet = async (displaySetInstanceUID, options) => {
       const {
         displaySetService
@@ -6055,6 +6400,7 @@ class SegmentationService extends src/* PubSubService */.hC {
         // We should set it as active by default, as it created for display
         isActive: true,
         type: representationType,
+        FrameOfReferenceUID: options?.FrameOfReferenceUID || displaySet.instances?.[0]?.FrameOfReferenceUID,
         representationData: {
           LABELMAP: {
             volumeId: segmentationId,
@@ -6078,6 +6424,7 @@ class SegmentationService extends src/* PubSubService */.hC {
     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);
       if (!segmentation) {
         throw new Error(`Segmentation with segmentationId ${segmentationId} not found.`);
@@ -6122,12 +6469,17 @@ class SegmentationService extends src/* PubSubService */.hC {
         if (visibility !== undefined) {
           _this._setSegmentVisibility(segmentationId, segmentIndex, visibility, toolGroupId, suppressEvents);
         }
-        if (isLocked !== undefined) {
+        if (isLocked) {
           _this._setSegmentLocked(segmentationId, segmentIndex, isLocked, suppressEvents);
         }
       }
+      if (!suppressEvents) {
+        _this._broadcastEvent(_this.EVENTS.SEGMENTATION_UPDATED, {
+          segmentation
+        });
+      }
     };
-    this.setSegmentRGBAColorForSegmentation = (segmentationId, segmentIndex, rgbaColor, toolGroupId) => {
+    this.setSegmentRGBAColor = (segmentationId, segmentIndex, rgbaColor, toolGroupId) => {
       const segmentation = this.getSegmentation(segmentationId);
       if (segmentation === undefined) {
         throw new Error(`no segmentation for segmentationId: ${segmentationId}`);
@@ -6153,6 +6505,9 @@ class SegmentationService extends src/* PubSubService */.hC {
         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);
       if (!suppressEvents) {
         _this._broadcastEvent(_this.EVENTS.SEGMENTATION_UPDATED, {
           segmentation
@@ -6467,34 +6822,40 @@ class SegmentationService extends src/* PubSubService */.hC {
     this._initSegmentationService();
   }
   /**
-   * It adds a segment to a segmentation, basically just setting the properties for
-   * the segment.
-   * @param segmentationId - The ID of the segmentation you want to add a
-   * segment to.
-   * @param segmentIndex - The index of the segment to add.
-   * @param properties - The properties of the segment to add including
-   * -- label: the label of the segment
-   * -- color: the color of the segment
-   * -- opacity: the opacity of the segment
-   * -- visibility: the visibility of the segment (boolean)
-   * -- isLocked: whether the segment is locked for editing
-   * -- active: whether the segment is currently the active segment to be edited
+   * Adds a new segment to the specified segmentation.
+   * @param segmentationId - The ID of the segmentation to add the segment to.
+   * @param config - An object containing the configuration options for the new segment.
+   *   - segmentIndex: (optional) The index of the segment to add. If not provided, the next available index will be used.
+   *   - toolGroupId: (optional) The ID of the tool group to associate the new segment with. If not provided, the first available tool group will be used.
+   *   - properties: (optional) An object containing the properties of the new segment.
+   *     - label: (optional) The label of the new segment. If not provided, a default label will be used.
+   *     - color: (optional) The color of the new segment in RGB format. If not provided, a default color will be used.
+   *     - opacity: (optional) The opacity of the new segment. If not provided, a default opacity will be used.
+   *     - visibility: (optional) Whether the new segment should be visible. If not provided, the segment will be visible by default.
+   *     - 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, segmentIndex, toolGroupId, properties) {
-    if (segmentIndex === 0) {
+  addSegment(segmentationId) {
+    let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    if (config?.segmentIndex === 0) {
       throw new Error('Segment index 0 is reserved for "no label"');
     }
-    toolGroupId = toolGroupId ?? this._getFirstToolGroupId();
+    const toolGroupId = config.toolGroupId ?? this._getFirstToolGroupId();
     const {
       segmentationRepresentationUID,
       segmentation
     } = this._getSegmentationInfo(segmentationId, toolGroupId);
+    let segmentIndex = config.segmentIndex;
+    if (!segmentIndex) {
+      // grab the next available segment index
+      segmentIndex = segmentation.segments.length === 0 ? 1 : segmentation.segments.length;
+    }
     if (this._getSegmentInfo(segmentation, segmentIndex)) {
       throw new Error(`Segment ${segmentIndex} already exists`);
     }
     const rgbaColor = dist_esm.segmentation.config.color.getColorForSegmentIndex(toolGroupId, segmentationRepresentationUID, segmentIndex);
     segmentation.segments[segmentIndex] = {
-      label: properties.label,
+      label: config.properties?.label ?? `Segment ${segmentIndex}`,
       segmentIndex: segmentIndex,
       color: [rgbaColor[0], rgbaColor[1], rgbaColor[2]],
       opacity: rgbaColor[3],
@@ -6502,15 +6863,18 @@ class SegmentationService extends src/* PubSubService */.hC {
       isLocked: false
     };
     segmentation.segmentCount++;
+
+    // make the newly added segment the active segment
+    this._setActiveSegment(segmentationId, segmentIndex);
     const suppressEvents = true;
-    if (properties !== undefined) {
+    if (config.properties !== undefined) {
       const {
         color: newColor,
         opacity,
         isLocked,
         visibility,
         active
-      } = properties;
+      } = config.properties;
       if (newColor !== undefined) {
         this._setSegmentColor(segmentationId, segmentIndex, newColor, toolGroupId, suppressEvents);
       }
@@ -6590,12 +6954,21 @@ class SegmentationService extends src/* PubSubService */.hC {
     let suppressEvents = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
     this._setSegmentVisibility(segmentationId, segmentIndex, isVisible, toolGroupId, suppressEvents);
   }
-  setSegmentLockedForSegmentation(segmentationId, segmentIndex, isLocked) {
+  setSegmentLocked(segmentationId, segmentIndex, isLocked) {
     const suppressEvents = false;
     this._setSegmentLocked(segmentationId, segmentIndex, isLocked, suppressEvents);
   }
-  setSegmentLabel(segmentationId, segmentIndex, segmentLabel) {
-    this._setSegmentLabel(segmentationId, segmentIndex, segmentLabel);
+
+  /**
+   * Toggles the locked state of a segment in a segmentation.
+   * @param segmentationId - The ID of the segmentation.
+   * @param segmentIndex - The index of the segment to toggle.
+   */
+  toggleSegmentLocked(segmentationId, segmentIndex) {
+    const segmentation = this.getSegmentation(segmentationId);
+    const segment = this._getSegmentInfo(segmentation, segmentIndex);
+    const isLocked = !segment.isLocked;
+    this._setSegmentLocked(segmentationId, segmentIndex, isLocked);
   }
   setSegmentColor(segmentationId, segmentIndex, color, toolGroupId) {
     this._setSegmentColor(segmentationId, segmentIndex, color, toolGroupId);
@@ -6608,7 +6981,7 @@ class SegmentationService extends src/* PubSubService */.hC {
     const suppressEvents = false;
     this._setActiveSegmentationForToolGroup(segmentationId, toolGroupId, suppressEvents);
   }
-  setActiveSegmentForSegmentation(segmentationId, segmentIndex) {
+  setActiveSegment(segmentationId, segmentIndex) {
     this._setActiveSegment(segmentationId, segmentIndex, false);
   }
 
@@ -6677,11 +7050,14 @@ class SegmentationService extends src/* PubSubService */.hC {
       }
     }]);
 
-    // Define a new color LUT and associate it with this segmentation.
-    // Todo: need to be generalized to accept custom color LUTs
-    const newColorLUT = this.generateNewColorLUT();
-    const newColorLUTIndex = this.getNextColorLUTIndex();
-    dist_esm.segmentation.config.color.addColorLUT(newColorLUT, newColorLUTIndex);
+    // 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 || '',
@@ -6689,8 +7065,8 @@ class SegmentationService extends src/* PubSubService */.hC {
       activeSegmentIndex: segmentation.activeSegmentIndex ?? null,
       segmentCount: segmentation.segmentCount ?? 0,
       isActive: false,
-      colorLUTIndex: newColorLUTIndex,
-      isVisible: true
+      isVisible: true,
+      colorLUTIndex
     };
     cachedSegmentation = this.segmentations[segmentationId];
     this._updateCornerstoneSegmentations({
@@ -6715,6 +7091,7 @@ class SegmentationService extends src/* PubSubService */.hC {
       id: segmentationId,
       displaySetInstanceUID: segDisplaySet.displaySetInstanceUID,
       type: representationType,
+      label: segDisplaySet.SeriesDescription,
       representationData: {
         [LABELMAP]: {
           volumeId: segmentationId,
@@ -6731,11 +7108,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 +7131,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 +7166,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 +7216,7 @@ class SegmentationService extends src/* PubSubService */.hC {
       id: segmentationId,
       displaySetInstanceUID: rtDisplaySetUID,
       type: representationType,
+      label: rtDisplaySet.SeriesDescription,
       representationData: {
         [CONTOUR]: {
           geometryIds
@@ -7015,6 +7321,9 @@ class SegmentationService extends src/* PubSubService */.hC {
       toolGroupService
     } = this.servicesManager.services;
     const center = this._getSegmentCenter(segmentationId, segmentIndex);
+    if (!center?.world) {
+      return;
+    }
     const {
       world
     } = center;
@@ -7068,6 +7377,17 @@ 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
+    } = this.servicesManager.services;
+    const displaySet = displaySetService.getDisplaySetByUID(displaySetUID);
+    if (!displaySet) {
+      return;
+    }
+    displaySet.isHydrated = isHydrated;
+    displaySetService.setDisplaySetMetadataInvalidated(displaySetUID, false);
+  }
   _highlightLabelmap(segmentIndex, alpha, hideOthers, segments, toolGroupId, animationLength, segmentationRepresentation) {
     const newSegmentSpecificConfig = {
       [segmentIndex]: {
@@ -7170,21 +7490,23 @@ class SegmentationService extends src/* PubSubService */.hC {
 
     if (wasActive) {
       const remainingSegmentations = this._getSegmentations();
-      if (remainingSegmentations.length) {
+      const remainingHydratedSegmentations = remainingSegmentations.filter(segmentation => segmentation.hydrated);
+      if (remainingHydratedSegmentations.length) {
         const {
           id
-        } = remainingSegmentations[0];
+        } = remainingHydratedSegmentations[0];
         this._setActiveSegmentationForToolGroup(id, this._getFirstToolGroupId(), false);
       }
     }
+    this._setDisplaySetIsHydrated(segmentationId, false);
     this._broadcastEvent(this.EVENTS.SEGMENTATION_REMOVED, {
       segmentationId
     });
   }
-  setSegmentLabelForSegmentation(segmentationId, segmentIndex, label) {
-    this._setSegmentLabelForSegmentation(segmentationId, segmentIndex, label);
+  setSegmentLabel(segmentationId, segmentIndex, label) {
+    this._setSegmentLabel(segmentationId, segmentIndex, label);
   }
-  _setSegmentLabelForSegmentation(segmentationId, segmentIndex, label) {
+  _setSegmentLabel(segmentationId, segmentIndex, label) {
     let suppressEvents = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     const segmentation = this.getSegmentation(segmentationId);
     if (segmentation === undefined) {
@@ -7202,16 +7524,14 @@ class SegmentationService extends src/* PubSubService */.hC {
       });
     }
   }
-  shouldRenderSegmentation(viewportDisplaySetInstanceUIDs, segDisplaySetInstanceUID) {
-    if (!viewportDisplaySetInstanceUIDs || !viewportDisplaySetInstanceUIDs.length) {
+  shouldRenderSegmentation(viewportDisplaySetInstanceUIDs, segmentationFrameOfReferenceUID) {
+    if (!viewportDisplaySetInstanceUIDs?.length) {
       return false;
     }
     const {
       displaySetService
     } = this.servicesManager.services;
     let shouldDisplaySeg = false;
-    const segDisplaySet = displaySetService.getDisplaySetByUID(segDisplaySetInstanceUID);
-    const segFrameOfReferenceUID = this._getFrameOfReferenceUIDForSeg(segDisplaySet);
 
     // check if the displaySet is sharing the same frameOfReferenceUID
     // with the new segmentation
@@ -7220,7 +7540,7 @@ class SegmentationService extends src/* PubSubService */.hC {
 
       // Todo: this might not be ideal for use cases such as 4D, since we
       // don't want to show the segmentation for all the frames
-      if (displaySet.isReconstructable && displaySet?.images?.[0]?.FrameOfReferenceUID === segFrameOfReferenceUID) {
+      if (displaySet.isReconstructable && displaySet?.images?.[0]?.FrameOfReferenceUID === segmentationFrameOfReferenceUID) {
         shouldDisplaySeg = true;
         break;
       }
@@ -7374,7 +7694,7 @@ class SegmentationService extends src/* PubSubService */.hC {
   }
   _getSegmentationRepresentation(segmentationId, toolGroupId) {
     const segmentationRepresentations = this.getSegmentationRepresentationsForToolGroup(toolGroupId);
-    if (segmentationRepresentations.length === 0) {
+    if (!segmentationRepresentations?.length) {
       return;
     }
 
@@ -7659,7 +7979,8 @@ class CornerstoneCacheService {
   }
   _shouldRenderSegmentation(displaySets) {
     const {
-      segmentationService
+      segmentationService,
+      displaySetService
     } = this.servicesManager.services;
     const viewportDisplaySetInstanceUIDs = displaySets.map(_ref2 => {
       let {
@@ -7673,7 +7994,8 @@ class CornerstoneCacheService {
     const segmentations = segmentationService.getSegmentations();
     for (const segmentation of segmentations) {
       const segDisplaySetInstanceUID = segmentation.displaySetInstanceUID;
-      const shouldDisplaySeg = segmentationService.shouldRenderSegmentation(viewportDisplaySetInstanceUIDs, segDisplaySetInstanceUID);
+      const segDisplaySet = displaySetService.getDisplaySetByUID(segDisplaySetInstanceUID);
+      const shouldDisplaySeg = segmentationService.shouldRenderSegmentation(viewportDisplaySetInstanceUIDs, segDisplaySet.instances[0].FrameOfReferenceUID);
       if (shouldDisplaySeg) {
         return true;
       }
@@ -7747,16 +8069,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 +8091,6 @@ class ViewportInfo {
       this.viewportOptions = null;
       this.displaySetOptions = null;
     };
-    this.viewportIndex = viewportIndex;
     this.viewportId = viewportId;
     this.setPublicViewportOptions({});
     this.setPublicDisplaySetOptions([{}]);
@@ -7779,7 +8101,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 +8118,6 @@ class ViewportInfo {
   setViewportId(viewportId) {
     this.viewportId = viewportId;
   }
-  setViewportIndex(viewportIndex) {
-    this.viewportIndex = viewportIndex;
-  }
   setElement(element) {
     this.element = element;
   }
@@ -7806,9 +8127,6 @@ class ViewportInfo {
   getViewportData() {
     return this.viewportData;
   }
-  getViewportIndex() {
-    return this.viewportIndex;
-  }
   getElement() {
     return this.element;
   }
@@ -7819,13 +8137,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 +8184,7 @@ class ViewportInfo {
       toolGroupId,
       presentationIds
     });
+    return this.viewportOptions;
   }
   setViewportOptions(viewportOptions) {
     this.viewportOptions = viewportOptions;
@@ -7959,7 +8279,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 +8294,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 +8357,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 +8404,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 +8490,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 +8515,6 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
     // invalid data.
     this._broadcastEvent(this.EVENTS.VIEWPORT_DATA_CHANGED, {
       viewportData,
-      viewportIndex,
       viewportId
     });
   }
@@ -8175,31 +8526,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 +8564,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 +8665,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 +8727,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);
@@ -8448,13 +8780,25 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
         continue;
       }
 
-      // otherwise, check if the hydrated segmentations are in the same FOR
+      // otherwise, check if the hydrated segmentations are in the same FrameOfReferenceUID
       // as the primary displaySet, if so add the representation (since it was not there)
       const {
-        id: segDisplaySetInstanceUID,
-        type
+        id: segDisplaySetInstanceUID
       } = segmentation;
-      const segFrameOfReferenceUID = this._getFrameOfReferenceUID(segDisplaySetInstanceUID);
+      let segFrameOfReferenceUID = this._getFrameOfReferenceUID(segDisplaySetInstanceUID);
+      if (!segFrameOfReferenceUID) {
+        // if the segmentation displaySet does not have a FrameOfReferenceUID, we might check the
+        // segmentation itself maybe it has a FrameOfReferenceUID
+        const {
+          FrameOfReferenceUID
+        } = segmentation;
+        if (FrameOfReferenceUID) {
+          segFrameOfReferenceUID = FrameOfReferenceUID;
+        }
+      }
+      if (!segFrameOfReferenceUID) {
+        return;
+      }
       let shouldDisplaySeg = false;
       for (const displaySetInstanceUID of displaySetInstanceUIDs) {
         const primaryFrameOfReferenceUID = this._getFrameOfReferenceUID(displaySetInstanceUID);
@@ -8487,13 +8831,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 +8891,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 +8928,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 +8958,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
 
 
@@ -8707,7 +9033,7 @@ class DicomLoaderService {
     // Use referenced imageInstance
     const imageInstance = getImageInstance(dataset);
     const nonImageInstance = getNonImageInstance(dataset);
-    if (!imageInstance && !nonImageInstance || !nonImageInstance.imageId.startsWith('dicomfile')) {
+    if (!imageInstance && !nonImageInstance || !nonImageInstance.imageId?.startsWith('dicomfile')) {
       return;
     }
     const instance = imageInstance || nonImageInstance;
@@ -8824,7 +9150,6 @@ function getHandlesFromPoints(points) {
 
 
 
-
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/index.ts
 
 
@@ -8849,11 +9174,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 +9200,6 @@ const cornerstoneExtension = {
       esm.imageLoadPoolManager.clearRequestStack(type);
       esm.imageRetrievalPoolManager.clearRequestStack(type);
     });
-    destroy();
     (0,state/* reset */.mc)();
   },
   /**
@@ -8956,7 +9279,7 @@ const cornerstoneExtension = {
 
 /***/ }),
 
-/***/ 21922:
+/***/ 73704:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -8976,21 +9299,21 @@ 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
   };
 };
 
 /**
- * Grabs the enabled element `dom` reference of an ative viewport.
+ * Grabs the enabled element `dom` reference of an active viewport.
  *
  * @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 +9322,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);
 
 
 /**