@ohif/app 3.7.0-beta.10 → 3.7.0-beta.100

package/dist/{707.bundle.ed1d145de922570db0d2.js → 82.bundle.7a89cd8b81eb7e1e5c66.js}

@@ -1,6 +1,6 @@
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[707],{
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[82],{
 
-/***/ 31197:
+/***/ 78227:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -9,44 +9,44 @@ __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),
   toolNames: () => (/* reexport */ toolNames)
 });
 
-// NAMESPACE OBJECT: ../../../extensions/cornerstone/src/types/index.ts
-var types_namespaceObject = {};
-__webpack_require__.r(types_namespaceObject);
-
 // NAMESPACE OBJECT: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/utils/index.ts
 var utils_namespaceObject = {};
 __webpack_require__.r(utils_namespaceObject);
 __webpack_require__.d(utils_namespaceObject, {
+  getDisplayUnit: () => (utils_getDisplayUnit),
   getFirstAnnotationSelected: () => (getFirstAnnotationSelected),
   getHandlesFromPoints: () => (getHandlesFromPoints),
-  getModalityUnit: () => (utils_getModalityUnit),
   getSOPInstanceAttributes: () => (getSOPInstanceAttributes/* default */.Z),
   isAnnotationSelected: () => (isAnnotationSelected),
   setAnnotationSelected: () => (setAnnotationSelected)
 });
 
+// NAMESPACE OBJECT: ../../../extensions/cornerstone/src/types/index.ts
+var types_namespaceObject = {};
+__webpack_require__.r(types_namespaceObject);
+
 // 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 + 331 modules
+var esm = __webpack_require__(3743);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 348 modules
+var dist_esm = __webpack_require__(14957);
+// EXTERNAL MODULE: ../../core/src/index.ts + 65 modules
+var src = __webpack_require__(71771);
 // 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 +76,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 +87,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 +112,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 +153,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 +185,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 +199,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 +230,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 +320,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 +357,223 @@ 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 instanceof Array) {
+        pixelData = overlay.pixelData[0];
+      } 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 +603,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 +645,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 +758,9 @@ function getMappedAnnotations(annotation, displaySetService) {
       SeriesNumber
     } = displaySet;
     const {
-      length
+      length,
+      unit = 'mm'
     } = targetStats;
-    const unit = 'mm';
     annotations.push({
       SeriesInstanceUID,
       SOPInstanceUID,
@@ -566,10 +787,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 +822,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,16 +832,77 @@ 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);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/utils/getHandlesFromPoints.js
+function getHandlesFromPoints(points) {
+  if (points.longAxis && points.shortAxis) {
+    const handles = {};
+    handles.start = points.longAxis[0];
+    handles.end = points.longAxis[1];
+    handles.perpendicularStart = points.longAxis[0];
+    handles.perpendicularEnd = points.longAxis[1];
+    return handles;
+  }
+  return points.map((p, i) => i % 10 === 0 ? {
+    start: p
+  } : {
+    end: p
+  }).reduce((obj, item) => Object.assign(obj, {
+    ...item
+  }), {});
+}
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/utils/selection.ts
+
+
+/**
+ * Check whether an annotation from imaging library is selected or not.
+ * @param {string} annotationUID uid of imaging library annotation
+ * @returns boolean
+ */
+function isAnnotationSelected(annotationUID) {
+  return dist_esm.annotation.selection.isAnnotationSelected(annotationUID);
+}
+
+/**
+ * Change an annotation from imaging library's selected property.
+ * @param annotationUID - uid of imaging library annotation
+ * @param selected - new value for selected
+ */
+function setAnnotationSelected(annotationUID, selected) {
+  const isCurrentSelected = isAnnotationSelected(annotationUID);
+  // branch cut, avoid invoking imaging library unnecessarily.
+  if (isCurrentSelected !== selected) {
+    dist_esm.annotation.selection.setAnnotationSelected(annotationUID, selected);
+  }
+}
+function getFirstAnnotationSelected(element) {
+  const [selectedAnnotationUID] = dist_esm.annotation.selection.getAnnotationsSelected() || [];
+  if (selectedAnnotationUID) {
+    return dist_esm.annotation.state.getAnnotation(selectedAnnotationUID);
+  }
+}
+
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/utils/getDisplayUnit.js
+const getDisplayUnit = unit => unit == null ? '' : unit;
+/* harmony default export */ const utils_getDisplayUnit = (getDisplayUnit);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/utils/index.ts
+
+
+
+
+
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/Bidirectional.ts
 
 
 
+
 const Bidirectional = {
   toAnnotation: measurement => {},
   toMeasurement: (csToolsEventDetail, displaySetService, cornerstoneViewportService, getValueTypeFromToolType) => {
@@ -711,9 +997,9 @@ function Bidirectional_getMappedAnnotations(annotation, displaySetService) {
     } = displaySet;
     const {
       length,
-      width
+      width,
+      unit
     } = targetStats;
-    const unit = 'mm';
     annotations.push({
       SeriesInstanceUID,
       SOPInstanceUID,
@@ -742,10 +1028,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 +1060,7 @@ function Bidirectional_getDisplayText(mappedAnnotations, displaySet) {
   const {
     length,
     width,
+    unit,
     SeriesNumber,
     SOPInstanceUID,
     frameNumber
@@ -786,22 +1074,11 @@ 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} ${utils_getDisplayUnit(unit)} (S: ${SeriesNumber}${instanceText}${frameText})`);
+  displayText.push(`W: ${roundedWidth} ${utils_getDisplayUnit(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
 
 
@@ -904,16 +1181,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 +1220,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 +1255,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 +1265,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} ${utils_getDisplayUnit(areaUnit)}`);
 
   // Todo: we need a better UI for displaying all these information
   mappedAnnotations.forEach(mappedAnnotation => {
@@ -999,7 +1278,7 @@ function EllipticalROI_getDisplayText(mappedAnnotations, displaySet) {
     let maxStr = '';
     if (max) {
       const roundedMax = src.utils.roundNumber(max, 2);
-      maxStr = `Max: ${roundedMax} <small>${unit}</small> `;
+      maxStr = `Max: ${roundedMax} <small>${utils_getDisplayUnit(unit)}</small> `;
     }
     const str = `${maxStr}(S:${SeriesNumber}${instanceText}${frameText})`;
     if (!displayText.includes(str)) {
@@ -1111,20 +1390,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 +1429,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 +1464,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 +1477,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} ${utils_getDisplayUnit(areaUnit)}`);
 
   // Todo: we need a better UI for displaying all these information
   mappedAnnotations.forEach(mappedAnnotation => {
@@ -1206,7 +1489,7 @@ function CircleROI_getDisplayText(mappedAnnotations, displaySet) {
     let maxStr = '';
     if (max) {
       const roundedMax = src.utils.roundNumber(max, 2);
-      maxStr = `Max: ${roundedMax} <small>${unit}</small> `;
+      maxStr = `Max: ${roundedMax} <small>${utils_getDisplayUnit(unit)}</small> `;
     }
     const str = `${maxStr}(S:${SeriesNumber}${instanceText}${frameText})`;
     if (!displayText.includes(str)) {
@@ -1345,6 +1628,7 @@ function ArrowAnnotate_getDisplayText(mappedAnnotations, displaySet) {
 
 
 
+
 const CobbAngle = {
   toAnnotation: measurement => {},
   /**
@@ -1515,9 +1799,11 @@ 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})`);
+  displayText.push(`${roundedAngle} ${utils_getDisplayUnit(unit)} (S: ${SeriesNumber}${instanceText}${frameText})`);
   return displayText;
 }
 /* harmony default export */ const measurementServiceMappings_CobbAngle = (CobbAngle);
@@ -1525,6 +1811,7 @@ function CobbAngle_getDisplayText(mappedAnnotations, displaySet) {
 
 
 
+
 const Angle = {
   toAnnotation: measurement => {},
   /**
@@ -1695,9 +1982,11 @@ 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})`);
+  displayText.push(`${roundedAngle} ${utils_getDisplayUnit(unit)} (S: ${SeriesNumber}${instanceText}${frameText})`);
   return displayText;
 }
 /* harmony default export */ const measurementServiceMappings_Angle = (Angle);
@@ -1937,20 +2226,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 +2265,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 +2300,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 +2313,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} ${utils_getDisplayUnit(areaUnit)}`);
 
   // Todo: we need a better UI for displaying all these information
   mappedAnnotations.forEach(mappedAnnotation => {
@@ -2032,7 +2325,7 @@ function RectangleROI_getDisplayText(mappedAnnotations, displaySet) {
     let maxStr = '';
     if (max) {
       const roundedMax = src.utils.roundNumber(max, 2);
-      maxStr = `Max: ${roundedMax} <small>${unit}</small> `;
+      maxStr = `Max: ${roundedMax} <small>${utils_getDisplayUnit(unit)}</small> `;
     }
     const str = `${maxStr}(S:${SeriesNumber}${instanceText}${frameText})`;
     if (!displayText.includes(str)) {
@@ -2515,7 +2808,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 +2833,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 +3023,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 +3301,7 @@ const DEFAULT_CONTEXT_MENU_CLICKS = {
     commands: [{
       commandName: 'showCornerstoneContextMenu',
       commandOptions: {
+        requireNearbyToolData: true,
         menuId: 'measurementsContextMenu'
       }
     }]
@@ -3020,9 +3318,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 +3344,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 +3370,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 +3408,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('');
 }
@@ -3137,6 +3457,49 @@ function initDoubleClick(_ref) {
   esm.eventTarget.addEventListener(esm.EVENTS.ELEMENT_DISABLED, elementDisabledHandler.bind(null));
 }
 /* harmony default export */ const src_initDoubleClick = (initDoubleClick);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/initViewTiming.ts
+
+
+const {
+  TimingEnum
+} = src.Types;
+const IMAGE_TIMING_KEYS = [TimingEnum.DISPLAY_SETS_TO_ALL_IMAGES, TimingEnum.DISPLAY_SETS_TO_FIRST_IMAGE, TimingEnum.STUDY_TO_FIRST_IMAGE];
+const imageTiming = {
+  viewportsWaiting: 0
+};
+
+/**
+ * Defines the initial view timing reporting.
+ * This allows knowing how many viewports are waiting for initial views and
+ * when the IMAGE_RENDERED gets sent out.
+ * The first image rendered will fire the FIRST_IMAGE timeEnd logs, while
+ * the last of the enabled viewport will fire the ALL_IMAGES timeEnd logs.
+ *
+ */
+
+function initViewTiming(_ref) {
+  let {
+    element
+  } = _ref;
+  if (!IMAGE_TIMING_KEYS.find(key => src/* log */.cM.timingKeys[key])) {
+    return;
+  }
+  imageTiming.viewportsWaiting += 1;
+  element.addEventListener(esm.EVENTS.IMAGE_RENDERED, imageRenderedListener);
+}
+function imageRenderedListener(evt) {
+  if (evt.detail.viewportStatus === 'preRender') {
+    return;
+  }
+  src/* log */.cM.timeEnd(TimingEnum.DISPLAY_SETS_TO_FIRST_IMAGE);
+  src/* log */.cM.timeEnd(TimingEnum.STUDY_TO_FIRST_IMAGE);
+  src/* log */.cM.timeEnd(TimingEnum.SCRIPT_TO_VIEW);
+  imageTiming.viewportsWaiting -= 1;
+  evt.detail.element.removeEventListener(esm.EVENTS.IMAGE_RENDERED, imageRenderedListener);
+  if (!imageTiming.viewportsWaiting) {
+    src/* log */.cM.timeEnd(TimingEnum.DISPLAY_SETS_TO_ALL_IMAGES);
+  }
+}
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/init.tsx
 
 
@@ -3155,6 +3518,7 @@ function initDoubleClick(_ref) {
 
 
 
+
 // TODO: Cypress tests are currently grabbing this from the window?
 window.cornerstone = esm;
 window.cornerstoneTools = dist_esm;
@@ -3169,7 +3533,24 @@ async function init(_ref) {
     configuration,
     appConfig
   } = _ref;
-  await (0,esm.init)();
+  // Note: this should run first before initializing the cornerstone
+  // DO NOT CHANGE THE ORDER
+  const value = appConfig.useSharedArrayBuffer;
+  let sharedArrayBufferDisabled = false;
+  if (value === 'AUTO') {
+    esm.setUseSharedArrayBuffer(esm.Enums.SharedArrayBufferModes.AUTO);
+  } else if (value === 'FALSE' || value === false) {
+    esm.setUseSharedArrayBuffer(esm.Enums.SharedArrayBufferModes.FALSE);
+    sharedArrayBufferDisabled = true;
+  } else {
+    esm.setUseSharedArrayBuffer(esm.Enums.SharedArrayBufferModes.TRUE);
+  }
+  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));
@@ -3181,34 +3562,35 @@ 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,
     cornerstoneViewportService,
     hangingProtocolService,
     toolGroupService,
+    toolbarService,
     viewportGridService,
     stateSyncService
   } = servicesManager.services;
   window.services = servicesManager.services;
   window.extensionManager = extensionManager;
   window.commandsManager = commandsManager;
-  if (appConfig.showWarningMessageForCrossOrigin && !window.crossOriginIsolated) {
+  if (appConfig.showWarningMessageForCrossOrigin && !window.crossOriginIsolated && !sharedArrayBufferDisabled) {
     uiNotificationService.show({
       title: 'Cross Origin Isolation',
-      message: 'Cross Origin Isolation is not enabled, volume rendering will not work (e.g., MPR)',
+      message: 'Cross Origin Isolation is not enabled, read more about it here: https://docs.ohif.org/faq/',
       type: 'warning'
     });
   }
@@ -3254,7 +3636,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);
@@ -3289,11 +3671,51 @@ async function init(_ref) {
     customizationService,
     commandsManager
   });
-  const newStackCallback = evt => {
+
+  /**
+   * When a viewport gets a new display set, this call will go through all the
+   * active tools in the toolbar, and call any commands registered in the
+   * toolbar service with a callback to re-enable on displaying the viewport.
+   */
+  const toolbarEventListener = evt => {
     const {
       element
     } = evt.detail;
-    dist_esm.utilities.stackPrefetch.enable(element);
+    const activeTools = toolbarService.getActiveTools();
+    activeTools.forEach(tool => {
+      const toolData = toolbarService.getNestedButton(tool);
+      const commands = toolData?.listeners?.[evt.type];
+      commandsManager.run(commands, {
+        element,
+        evt
+      });
+    });
+  };
+
+  /** Listens for active viewport events and fires the toolbar listeners */
+  const activeViewportEventListener = evt => {
+    const {
+      viewportId
+    } = evt;
+    const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+    const activeTools = toolbarService.getActiveTools();
+    activeTools.forEach(tool => {
+      if (!toolGroup?._toolInstances?.[tool]) {
+        return;
+      }
+
+      // check if tool is active on the new viewport
+      const toolEnabled = toolGroup._toolInstances[tool].mode === dist_esm.Enums.ToolModes.Enabled;
+      if (!toolEnabled) {
+        return;
+      }
+      const button = toolbarService.getNestedButton(tool);
+      const commands = button?.listeners?.[evt.type];
+      commandsManager.run(commands, {
+        viewportId,
+        evt
+      });
+    });
   };
   const resetCrosshairs = evt => {
     const {
@@ -3316,12 +3738,22 @@ async function init(_ref) {
       toolGroup.setToolEnabled('Crosshairs');
     }
   };
+  esm.eventTarget.addEventListener(esm.EVENTS.STACK_VIEWPORT_NEW_STACK, evt => {
+    const {
+      element
+    } = evt.detail;
+    dist_esm.utilities.stackContextPrefetch.enable(element);
+  });
   function elementEnabledHandler(evt) {
     const {
       element
     } = evt.detail;
     element.addEventListener(esm.EVENTS.CAMERA_RESET, resetCrosshairs);
-    esm.eventTarget.addEventListener(esm.EVENTS.STACK_VIEWPORT_NEW_STACK, newStackCallback);
+    esm.eventTarget.addEventListener(esm.EVENTS.STACK_VIEWPORT_NEW_STACK, toolbarEventListener);
+    initViewTiming({
+      element,
+      eventTarget: esm.eventTarget
+    });
   }
   function elementDisabledHandler(evt) {
     const {
@@ -3338,31 +3770,7 @@ 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 => {
-    let {
-      viewportIndex,
-      viewportId
-    } = _ref2;
-    viewportId = viewportId || `viewport-${viewportIndex}`;
-    const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
-    if (!toolGroup || !toolGroup._toolInstances?.['ReferenceLines']) {
-      return;
-    }
-
-    // check if reference lines are active
-    const referenceLinesEnabled = toolGroup._toolInstances['ReferenceLines'].mode === dist_esm.Enums.ToolModes.Enabled;
-    if (!referenceLinesEnabled) {
-      return;
-    }
-    toolGroup.setToolConfiguration(dist_esm.ReferenceLinesTool.toolName, {
-      sourceViewportId: viewportId
-    }, true // overwrite
-    );
-
-    // make sure to set it to enabled again since we want to recalculate
-    // the source-target lines
-    toolGroup.setToolEnabled(dist_esm.ReferenceLinesTool.toolName);
-  });
+  viewportGridService.subscribe(viewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED, activeViewportEventListener);
 }
 function CPUModal() {
   return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("p", null, "Your computer does not have enough GPU power to support the default GPU rendering mode. OHIF has switched to CPU rendering mode. Please note that CPU rendering does not support all features such as Volume Rendering, Multiplanar Reconstruction, and Segmentation Overlays."));
@@ -3387,12 +3795,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 +3949,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 +3970,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 +4010,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 +4255,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 +4270,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 +4286,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 +4354,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 +4378,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 +4388,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 +4452,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 +4468,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 {
@@ -4181,13 +4590,18 @@ const CornerstoneViewportDownloadForm = _ref => {
         const imageId = viewport.getCurrentImageId();
         const properties = viewport.getProperties();
         downloadViewport.setStack([imageId]).then(() => {
-          downloadViewport.setProperties(properties);
-          const newWidth = Math.min(width || image.width, MAX_TEXTURE_SIZE);
-          const newHeight = Math.min(height || image.height, MAX_TEXTURE_SIZE);
-          resolve({
-            width: newWidth,
-            height: newHeight
-          });
+          try {
+            downloadViewport.setProperties(properties);
+            const newWidth = Math.min(width || image.width, MAX_TEXTURE_SIZE);
+            const newHeight = Math.min(height || image.height, MAX_TEXTURE_SIZE);
+            resolve({
+              width: newWidth,
+              height: newHeight
+            });
+          } catch (e) {
+            // Happens on clicking the cancel button
+            console.warn('Unable to set properties', e);
+          }
         });
       } else if (downloadViewport instanceof esm.VolumeViewport) {
         const actors = viewport.getActors();
@@ -4264,74 +4678,75 @@ 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
-
-function calculateViewportRegistrations(viewports) {
-  const viewportPairs = _getViewportPairs(viewports);
-  for (const [viewport, nextViewport] of viewportPairs) {
-    // check if they are in the same Frame of Reference
-    const renderingEngine1 = (0,esm.getRenderingEngine)(viewport.renderingEngineId);
-    const renderingEngine2 = (0,esm.getRenderingEngine)(nextViewport.renderingEngineId);
-    const csViewport1 = renderingEngine1.getViewport(viewport.viewportId);
-    const csViewport2 = renderingEngine2.getViewport(nextViewport.viewportId);
-    esm.utilities.calculateViewportsSpatialRegistration(csViewport1, csViewport2);
-  }
-}
-const _getViewportPairs = viewports => {
-  const viewportPairs = [];
-  for (let i = 0; i < viewports.length; i++) {
-    for (let j = i + 1; j < viewports.length; j++) {
-      viewportPairs.push([viewports[i], viewports[j]]);
-    }
-  }
-  return viewportPairs;
-};
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/stackSync/toggleStackImageSync.ts
-
-
-// [ {
-//   synchronizerId: string,
-//   viewports: [ { viewportId: number, renderingEngineId: string, index: number } , ...]
-// ]}
-let STACK_IMAGE_SYNC_GROUPS_INFO = [];
+const STACK_SYNC_NAME = 'stackImageSync';
 function toggleStackImageSync(_ref) {
   let {
     toggledState,
     servicesManager,
-    getEnabledElement
+    viewports: providedViewports
   } = _ref;
+  if (!toggledState) {
+    return disableSync(STACK_SYNC_NAME, servicesManager);
+  }
   const {
     syncGroupService,
     viewportGridService,
     displaySetService,
     cornerstoneViewportService
   } = servicesManager.services;
-  if (!toggledState) {
-    STACK_IMAGE_SYNC_GROUPS_INFO.forEach(syncGroupInfo => {
-      const {
-        viewports,
-        synchronizerId
-      } = syncGroupInfo;
-      viewports.forEach(_ref2 => {
-        let {
-          viewportId,
-          renderingEngineId
-        } = _ref2;
-        syncGroupService.removeViewportFromSyncGroup(viewportId, renderingEngineId, synchronizerId);
-      });
+  const viewports = providedViewports || getReconstructableStackViewports(viewportGridService, displaySetService);
+
+  // create synchronization group and add the viewports to it.
+  viewports.forEach(gridViewport => {
+    const {
+      viewportId
+    } = gridViewport.viewportOptions;
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+    if (!viewport) {
+      return;
+    }
+    syncGroupService.addViewportToSyncGroup(viewportId, viewport.getRenderingEngine().id, {
+      type: 'stackimage',
+      id: STACK_SYNC_NAME,
+      source: true,
+      target: true
     });
-    return;
-  }
-  STACK_IMAGE_SYNC_GROUPS_INFO = [];
+  });
+}
+function disableSync(syncName, servicesManager) {
+  const {
+    syncGroupService,
+    viewportGridService,
+    displaySetService,
+    cornerstoneViewportService
+  } = servicesManager.services;
+  const viewports = getReconstructableStackViewports(viewportGridService, displaySetService);
+  viewports.forEach(gridViewport => {
+    const {
+      viewportId
+    } = gridViewport.viewportOptions;
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+    if (!viewport) {
+      return;
+    }
+    syncGroupService.removeViewportFromSyncGroup(viewport.id, viewport.getRenderingEngine().id, syncName);
+  });
+}
+;
 
-  // create synchronization groups and add viewports
+/**
+ * Gets the consistent spacing stack viewport types, which are the ones which
+ * can be navigated using the stack image sync right now.
+ */
+function getReconstructableStackViewports(viewportGridService, displaySetService) {
   let {
     viewports
   } = viewportGridService.getState();
-
+  viewports = [...viewports.values()];
   // filter empty viewports
   viewports = viewports.filter(viewport => viewport.displaySetInstanceUIDs && viewport.displaySetInstanceUIDs.length);
 
@@ -4342,103 +4757,17 @@ function toggleStackImageSync(_ref) {
     } = viewport;
     for (const displaySetInstanceUID of displaySetInstanceUIDs) {
       const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
+
+      // TODO - add a better test than isReconstructable
       if (displaySet && displaySet.isReconstructable) {
         return true;
       }
       return false;
     }
   });
-  const viewportsByOrientation = viewports.reduce((acc, viewport) => {
-    const {
-      viewportId,
-      viewportType
-    } = viewport.viewportOptions;
-    if (viewportType !== 'stack') {
-      console.warn('Viewport is not a stack, cannot sync images yet');
-      return acc;
-    }
-    const {
-      element
-    } = cornerstoneViewportService.getViewportInfo(viewportId);
-    const {
-      viewport: csViewport,
-      renderingEngineId
-    } = getEnabledElement(element);
-    const {
-      viewPlaneNormal
-    } = csViewport.getCamera();
-
-    // Should we round here? I guess so, but not sure how much precision we need
-    const orientation = viewPlaneNormal.map(v => Math.round(v)).join(',');
-    if (!acc[orientation]) {
-      acc[orientation] = [];
-    }
-    acc[orientation].push({
-      viewportId,
-      renderingEngineId
-    });
-    return acc;
-  }, {});
-
-  // create synchronizer for each group
-  Object.values(viewportsByOrientation).map(viewports => {
-    let synchronizerId = viewports.map(_ref3 => {
-      let {
-        viewportId
-      } = _ref3;
-      return viewportId;
-    }).join(',');
-    synchronizerId = `imageSync_${synchronizerId}`;
-    calculateViewportRegistrations(viewports);
-    viewports.forEach(_ref4 => {
-      let {
-        viewportId,
-        renderingEngineId
-      } = _ref4;
-      syncGroupService.addViewportToSyncGroup(viewportId, renderingEngineId, {
-        type: 'stackimage',
-        id: synchronizerId,
-        source: true,
-        target: true
-      });
-    });
-    STACK_IMAGE_SYNC_GROUPS_INFO.push({
-      synchronizerId,
-      viewports
-    });
-  });
+  return viewports;
 }
-;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/utils/selection.ts
-
-
-/**
- * Check whether an annotation from imaging library is selected or not.
- * @param {string} annotationUID uid of imaging library annotation
- * @returns boolean
- */
-function isAnnotationSelected(annotationUID) {
-  return dist_esm.annotation.selection.isAnnotationSelected(annotationUID);
-}
-
-/**
- * Change an annotation from imaging library's selected property.
- * @param annotationUID - uid of imaging library annotation
- * @param selected - new value for selected
- */
-function setAnnotationSelected(annotationUID, selected) {
-  const isCurrentSelected = isAnnotationSelected(annotationUID);
-  // branch cut, avoid invoking imaging library unnecessarily.
-  if (isCurrentSelected !== selected) {
-    dist_esm.annotation.selection.setAnnotationSelected(annotationUID, selected);
-  }
-}
-function getFirstAnnotationSelected(element) {
-  const [selectedAnnotationUID] = dist_esm.annotation.selection.getAnnotationsSelected() || [];
-  if (selectedAnnotationUID) {
-    return dist_esm.annotation.state.getAnnotation(selectedAnnotationUID);
-  }
-}
-
+;
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/commandsModule.ts
 
 
@@ -4457,6 +4786,7 @@ function commandsModule(_ref) {
     toolGroupService,
     cineService,
     toolbarService,
+    stateSyncService,
     uiDialogService,
     cornerstoneViewportService,
     uiNotificationService,
@@ -4650,8 +4980,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 {
@@ -4716,10 +5045,16 @@ function commandsModule(_ref) {
     toolbarServiceRecordInteraction: props => {
       toolbarService.recordInteraction(props);
     },
+    // Enable or disable a toggleable command, without calling the activation
+    // Used to setup already active tools from hanging protocols
+    setToolbarToggled: props => {
+      toolbarService.setToggled(props.toolId, props.isActive ?? true);
+    },
     setToolActive: _ref9 => {
       let {
         toolName,
-        toolGroupId = null
+        toolGroupId = null,
+        toggledState
       } = _ref9;
       if (toolName === 'Crosshairs') {
         const activeViewportToolGroup = toolGroupService.getToolGroup(null);
@@ -4735,9 +5070,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 +5081,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 +5106,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 +5123,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 +5142,7 @@ function commandsModule(_ref) {
           content: utils_CornerstoneViewportDownloadForm,
           title: 'Download High Quality Image',
           contentProps: {
-            activeViewportIndex,
+            activeViewportId,
             onClose: uiModalService.hide,
             cornerstoneViewportService
           }
@@ -4882,15 +5223,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 +5332,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 +5354,53 @@ 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;
-      const {
-        activeViewportIndex
-      } = viewportGridService.getState();
-      const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(activeViewportIndex);
-      const viewportId = viewportInfo.getViewportId();
-      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
-      if (!toggledState) {
-        toolGroup.setToolDisabled(dist_esm.ReferenceLinesTool.toolName);
+        toggledState,
+        viewportId
+      } = _ref18;
+      if (!viewportId) {
+        const {
+          activeViewportId
+        } = viewportGridService.getState();
+        viewportId = activeViewportId;
       }
+      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
       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 +5455,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 +5538,14 @@ function commandsModule(_ref) {
     toggleStackImageSync: {
       commandFn: actions.toggleStackImageSync
     },
-    toggleReferenceLines: {
-      commandFn: actions.toggleReferenceLines
+    setSourceViewportForReferenceLinesTool: {
+      commandFn: actions.setSourceViewportForReferenceLinesTool
+    },
+    storePresentation: {
+      commandFn: actions.storePresentation
+    },
+    setToolbarToggled: {
+      commandFn: actions.setToolbarToggled
     }
   };
   return {
@@ -5210,9 +5560,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 +5632,7 @@ const mpr = {
     },
     viewports: [{
       viewportOptions: {
+        viewportId: 'mpr-axial',
         toolGroupId: 'mpr',
         viewportType: 'volume',
         orientation: 'axial',
@@ -5301,6 +5651,7 @@ const mpr = {
       }]
     }, {
       viewportOptions: {
+        viewportId: 'mpr-sagittal',
         toolGroupId: 'mpr',
         viewportType: 'volume',
         orientation: 'sagittal',
@@ -5319,6 +5670,7 @@ const mpr = {
       }]
     }, {
       viewportOptions: {
+        viewportId: 'mpr-coronal',
         toolGroupId: 'mpr',
         viewportType: 'volume',
         orientation: 'coronal',
@@ -5341,7 +5693,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 +5881,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 +5946,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 +5993,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 +6036,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 +6132,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 +6210,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 +6369,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 +6474,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 +6498,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 +6543,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 +6579,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 +6896,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 +6937,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 +7028,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 +7055,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 +7124,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 +7139,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 +7165,7 @@ class SegmentationService extends src/* PubSubService */.hC {
       id: segmentationId,
       displaySetInstanceUID: segDisplaySet.displaySetInstanceUID,
       type: representationType,
+      label: segDisplaySet.SeriesDescription,
       representationData: {
         [LABELMAP]: {
           volumeId: segmentationId,
@@ -6731,11 +7182,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 +7205,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 +7240,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 +7290,7 @@ class SegmentationService extends src/* PubSubService */.hC {
       id: segmentationId,
       displaySetInstanceUID: rtDisplaySetUID,
       type: representationType,
+      label: rtDisplaySet.SeriesDescription,
       representationData: {
         [CONTOUR]: {
           geometryIds
@@ -7015,6 +7395,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 +7451,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 +7564,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 +7598,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 +7614,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 +7768,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 +8053,8 @@ class CornerstoneCacheService {
   }
   _shouldRenderSegmentation(displaySets) {
     const {
-      segmentationService
+      segmentationService,
+      displaySetService
     } = this.servicesManager.services;
     const viewportDisplaySetInstanceUIDs = displaySets.map(_ref2 => {
       let {
@@ -7673,7 +8068,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 +8143,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 +8165,6 @@ class ViewportInfo {
       this.viewportOptions = null;
       this.displaySetOptions = null;
     };
-    this.viewportIndex = viewportIndex;
     this.viewportId = viewportId;
     this.setPublicViewportOptions({});
     this.setPublicDisplaySetOptions([{}]);
@@ -7779,7 +8175,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 +8192,6 @@ class ViewportInfo {
   setViewportId(viewportId) {
     this.viewportId = viewportId;
   }
-  setViewportIndex(viewportIndex) {
-    this.viewportIndex = viewportIndex;
-  }
   setElement(element) {
     this.element = element;
   }
@@ -7806,9 +8201,6 @@ class ViewportInfo {
   getViewportData() {
     return this.viewportData;
   }
-  getViewportIndex() {
-    return this.viewportIndex;
-  }
   getElement() {
     return this.element;
   }
@@ -7819,13 +8211,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 +8258,7 @@ class ViewportInfo {
       toolGroupId,
       presentationIds
     });
+    return this.viewportOptions;
   }
   setViewportOptions(viewportOptions) {
     this.viewportOptions = viewportOptions;
@@ -7894,6 +8288,9 @@ class ViewportInfo {
   getOrientation() {
     return this.viewportOptions.orientation;
   }
+  getDisplayArea() {
+    return this.viewportOptions.displayArea;
+  }
   getInitialImageOptions() {
     return this.viewportOptions.initialImageOptions;
   }
@@ -7959,7 +8356,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 +8371,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 +8434,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,59 +8481,111 @@ 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();
     const orientation = viewportInfo.getOrientation();
+    const displayArea = viewportInfo.getDisplayArea();
     const viewportInput = {
       viewportId,
       element,
       type,
       defaultOptions: {
         background,
-        orientation
+        orientation,
+        displayArea
       }
     };
 
+    // 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 +8594,6 @@ class CornerstoneViewportService extends src/* PubSubService */.hC {
     // invalid data.
     this._broadcastEvent(this.EVENTS.VIEWPORT_DATA_CHANGED, {
       viewportData,
-      viewportIndex,
       viewportId
     });
   }
@@ -8175,31 +8605,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 +8643,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 +8744,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 +8806,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 +8859,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 +8910,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 +8970,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 +9007,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 +9037,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 +9112,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;
@@ -8801,30 +9206,6 @@ const package_namespaceObject = JSON.parse('{"u2":"@ohif/extension-cornerstone"}
 
 const id = package_namespaceObject.u2;
 
-;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/utils/getHandlesFromPoints.js
-function getHandlesFromPoints(points) {
-  if (points.longAxis && points.shortAxis) {
-    const handles = {};
-    handles.start = points.longAxis[0];
-    handles.end = points.longAxis[1];
-    handles.perpendicularStart = points.longAxis[0];
-    handles.perpendicularEnd = points.longAxis[1];
-    return handles;
-  }
-  return points.map((p, i) => i % 10 === 0 ? {
-    start: p
-  } : {
-    end: p
-  }).reduce((obj, item) => Object.assign(obj, {
-    ...item
-  }), {});
-}
-;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/utils/index.ts
-
-
-
-
-
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/measurementServiceMappings/index.ts
 
 
@@ -8849,11 +9230,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 +9256,6 @@ const cornerstoneExtension = {
       esm.imageLoadPoolManager.clearRequestStack(type);
       esm.imageRetrievalPoolManager.clearRequestStack(type);
     });
-    destroy();
     (0,state/* reset */.mc)();
   },
   /**
@@ -8956,7 +9335,7 @@ const cornerstoneExtension = {
 
 /***/ }),
 
-/***/ 21922:
+/***/ 73704:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -8976,21 +9355,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 +9378,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__(3743);
 
 
 /**