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

package/dist/{664.bundle.09abae984223969d1bde.js → 23.bundle.e008ad788170f2ed5569.js}

@@ -1,15 +1,15 @@
 "use strict";
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[664],{
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[23],{
 
-/***/ 14664:
+/***/ 7023:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   ZP: () => (/* binding */ ResizeDetector)
 /* harmony export */ });
 /* unused harmony exports useResizeDetector, withResizeDetector */
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(32735);
-/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(12788);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(43001);
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14347);
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -893,8 +893,7 @@ function useResizeDetector(props) {
         };
     }, [refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, onResize, observerOptions, ref.current]);
     return __assign({ ref: ref }, size);
-}//# sourceMappingURL=index.esm.js.map
-
+}
 
 /***/ })
 

package/dist/{976.bundle.c1df3878a015cdf0e51f.js → 236.bundle.cb102f5d6b3e2c164b06.js}

@@ -1,6 +1,6 @@
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[976],{
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[236],{
 
-/***/ 77594:
+/***/ 80965:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -19,15 +19,15 @@ const package_namespaceObject = JSON.parse('{"u2":"@ohif/extension-dicom-microsc
 const id = package_namespaceObject.u2;
 
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
-var react = __webpack_require__(32735);
-// EXTERNAL MODULE: ../../ui/src/index.js + 452 modules
-var src = __webpack_require__(28619);
-// EXTERNAL MODULE: ../../core/src/index.ts + 101 modules
-var core_src = __webpack_require__(48501);
+var react = __webpack_require__(43001);
+// EXTERNAL MODULE: ../../ui/src/index.js + 458 modules
+var src = __webpack_require__(88344);
+// EXTERNAL MODULE: ../../core/src/index.ts + 75 modules
+var core_src = __webpack_require__(78695);
 // EXTERNAL MODULE: ../../../node_modules/react-i18next/dist/es/index.js + 15 modules
-var es = __webpack_require__(21572);
-// EXTERNAL MODULE: ../../../node_modules/mathjs/lib/esm/index.js + 972 modules
-var esm = __webpack_require__(29926);
+var es = __webpack_require__(69190);
+// EXTERNAL MODULE: ../../../node_modules/mathjs/lib/esm/index.js + 982 modules
+var esm = __webpack_require__(55220);
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/utils/coordinateFormatScoord3d2Geometry.js
 
 
@@ -61,7 +61,9 @@ function coordinateFormatScoord3d2Geometry(coordinates, pyramid) {
   return coordinates;
 }
 function _getPixelSpacing(metadata) {
-  if (metadata.PixelSpacing) return metadata.PixelSpacing;
+  if (metadata.PixelSpacing) {
+    return metadata.PixelSpacing;
+  }
   const functionalGroup = metadata.SharedFunctionalGroupsSequence[0];
   const pixelMeasures = functionalGroup.PixelMeasuresSequence[0];
   return pixelMeasures.PixelSpacing;
@@ -211,10 +213,10 @@ const EVENTS = {
  * expose only the features/behaviors that are relevant to the application
  */
 class ViewerManager extends core_src/* PubSubService */.hC {
-  constructor(viewer, viewportIndex, container, studyInstanceUID, seriesInstanceUID) {
+  constructor(viewer, viewportId, container, studyInstanceUID, seriesInstanceUID) {
     super(EVENTS);
     this.viewer = viewer;
-    this.viewportIndex = viewportIndex;
+    this.viewportId = viewportId;
     this.container = container;
     this.studyInstanceUID = studyInstanceUID;
     this.seriesInstanceUID = seriesInstanceUID;
@@ -811,7 +813,7 @@ class MicroscopyService extends core_src/* PubSubService */.hC {
   clear() {
     this.managedViewers.forEach(managedViewer => managedViewer.destroy());
     this.managedViewers.clear();
-    for (var key in this.annotations) {
+    for (const key in this.annotations) {
       delete this.annotations[key];
     }
     this.roiUids.clear();
@@ -879,7 +881,9 @@ class MicroscopyService extends core_src/* PubSubService */.hC {
       managedViewer
     } = data;
     const roiAnnotation = this.getAnnotation(roiGraphic.uid);
-    if (!roiAnnotation) return;
+    if (!roiAnnotation) {
+      return;
+    }
     roiAnnotation.setRoiGraphic(roiGraphic);
     roiAnnotation.setViewState(managedViewer.getViewState());
   }
@@ -933,7 +937,9 @@ class MicroscopyService extends core_src/* PubSubService */.hC {
     } = data;
     const selectedAnnotation = this.getAnnotation(roiGraphic.uid);
     if (selectedAnnotation && selectedAnnotation !== this.getSelectedAnnotation()) {
-      if (this.selectedAnnotation) this.clearSelection();
+      if (this.selectedAnnotation) {
+        this.clearSelection();
+      }
       this.selectedAnnotation = selectedAnnotation;
       this._broadcastEvent(MicroscopyService_EVENTS.ANNOTATION_SELECTED, selectedAnnotation);
     }
@@ -1014,23 +1020,23 @@ class MicroscopyService extends core_src/* PubSubService */.hC {
   }
 
   /**
-   * Creates a managed viewer instance for the given thrid-party API's viewer.
+   * Creates a managed viewer instance for the given third-party API's viewer.
    * Restores existing annotations for the given study/series.
    * Adds event subscriptions for the viewer being added.
    * Focuses the selected annotation when the viewer is being loaded into the
    * active viewport.
    *
-   * @param {Object} viewer Third-party viewer API's object to be managed
-   * @param {Number} viewportIndex The index of the viewport to load the viewer
-   * @param {HTMLElement} container The DOM element where it will be renderd
-   * @param {String} studyInstanceUID The study UID of the loaded image
-   * @param {String} seriesInstanceUID The series UID of the loaded image
-   * @param {Array} displaySets All displaySets related to the same StudyInstanceUID
+   * @param viewer - Third-party viewer API's object to be managed
+   * @param viewportId - The viewport Id where the viewer will be loaded
+   * @param container - The DOM element where it will be rendered
+   * @param studyInstanceUID - The study UID of the loaded image
+   * @param seriesInstanceUID - The series UID of the loaded image
+   * @param displaySets - All displaySets related to the same StudyInstanceUID
    *
    * @returns {ViewerManager} managed viewer
    */
-  addViewer(viewer, viewportIndex, container, studyInstanceUID, seriesInstanceUID) {
-    const managedViewer = new viewerManager(viewer, viewportIndex, container, studyInstanceUID, seriesInstanceUID);
+  addViewer(viewer, viewportId, container, studyInstanceUID, seriesInstanceUID) {
+    const managedViewer = new viewerManager(viewer, viewportId, container, studyInstanceUID, seriesInstanceUID);
     this._restoreAnnotations(managedViewer);
     viewer._manager = managedViewer;
     this.managedViewers.add(managedViewer);
@@ -1039,7 +1045,7 @@ class MicroscopyService extends core_src/* PubSubService */.hC {
     this._addManagedViewerSubscriptions(managedViewer);
     if (this.pendingFocus) {
       this.pendingFocus = false;
-      this.focusAnnotation(this.selectedAnnotation, viewportIndex);
+      this.focusAnnotation(this.selectedAnnotation, viewportId);
     }
     return managedViewer;
   }
@@ -1188,7 +1194,9 @@ class MicroscopyService extends core_src/* PubSubService */.hC {
    * @param {RoiAnnotation} roiAnnotation The instance to be selected
    */
   selectAnnotation(roiAnnotation) {
-    if (this.selectedAnnotation) this.clearSelection();
+    if (this.selectedAnnotation) {
+      this.clearSelection();
+    }
     this.selectedAnnotation = roiAnnotation;
     this._broadcastEvent(MicroscopyService_EVENTS.ANNOTATION_SELECTED, roiAnnotation);
     this.setROIStyle(roiAnnotation.uid, utils_styles.active);
@@ -1197,12 +1205,12 @@ class MicroscopyService extends core_src/* PubSubService */.hC {
   /**
    * Toggles overview map
    *
-   * @param viewportIndex The active viewport index
+   * @param viewportId The active viewport index
    * @returns {void}
    */
-  toggleOverviewMap(viewportIndex) {
+  toggleOverviewMap(viewportId) {
     const managedViewers = Array.from(this.managedViewers);
-    const managedViewer = managedViewers.find(mv => mv.viewportIndex === viewportIndex);
+    const managedViewer = managedViewers.find(mv => mv.viewportId === viewportId);
     if (managedViewer) {
       managedViewer.toggleOverviewMap();
     }
@@ -1239,10 +1247,10 @@ class MicroscopyService extends core_src/* PubSubService */.hC {
    * the managed viewer instance is created.
    *
    * @param {RoiAnnotation} roiAnnotation RoiAnnotation instance to be focused
-   * @param {Number} viewportIndex Index of the viewport to focus
+   * @param {string} viewportId Index of the viewport to focus
    */
-  focusAnnotation(roiAnnotation, viewportIndex) {
-    const filter = mv => mv.viewportIndex === viewportIndex;
+  focusAnnotation(roiAnnotation, viewportId) {
+    const filter = mv => mv.viewportId === viewportId;
     const managedViewer = Array.from(this.managedViewers).find(filter);
     if (managedViewer) {
       managedViewer.setViewStateByExtent(roiAnnotation);
@@ -1360,7 +1368,7 @@ MicroscopyService.REGISTRATION = serviceManager => {
 };
 
 // EXTERNAL MODULE: ../../../node_modules/dcmjs/build/dcmjs.es.js
-var dcmjs_es = __webpack_require__(22737);
+var dcmjs_es = __webpack_require__(67540);
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/utils/callInputDialog.tsx
 
 
@@ -1434,7 +1442,7 @@ function callInputDialog(_ref) {
             label: "Enter your annotation",
             labelClassName: "text-white text-[14px] leading-[1.2]",
             autoFocus: true,
-            className: "bg-black border-primary-main",
+            className: "border-primary-main bg-black",
             type: "text",
             value: value.defaultValue,
             onChange: event => {
@@ -1544,7 +1552,9 @@ function constructSR(metadata, _ref, annotations) {
     console.debug('[SR] storing measurements...', measurements);
     console.debug('[SR] storing evaluations...', evaluations);
     console.debug('[SR] storing presentation state...', presentationState);
-    if (presentationState) presentationState.marker = marker;
+    if (presentationState) {
+      presentationState.marker = marker;
+    }
 
     /** Avoid incompatibility with dcmjs */
     measurements = measurements.map(measurement => {
@@ -1654,10 +1664,10 @@ function constructSR(metadata, _ref, annotations) {
  * @param filename
  */
 function saveByteArray(buffer, filename) {
-  var blob = new Blob([buffer], {
+  const blob = new Blob([buffer], {
     type: 'application/dicom'
   });
-  var link = document.createElement('a');
+  const link = document.createElement('a');
   link.href = window.URL.createObjectURL(blob);
   link.download = filename;
   link.click();
@@ -1728,14 +1738,14 @@ function MicroscopyPanel(props) {
     displaySetService
   } = servicesManager.services;
   (0,react.useEffect)(() => {
-    const viewport = props.viewports[props.activeViewportIndex];
+    const viewport = props.viewports[props.activeViewportId];
     if (viewport.displaySetInstanceUIDs[0]) {
       const displaySet = displaySetService.getDisplaySetByUID(viewport.displaySetInstanceUIDs[0]);
       if (displaySet) {
         setStudyInstanceUID(displaySet.StudyInstanceUID);
       }
     }
-  }, [props.viewports, props.activeViewportIndex]);
+  }, [props.viewports, props.activeViewportId]);
   (0,react.useEffect)(() => {
     const onAnnotationUpdated = () => {
       const roiAnnotations = microscopyService.getAnnotationsForStudy(studyInstanceUID);
@@ -1883,7 +1893,7 @@ function MicroscopyPanel(props) {
    */
   const onDeleteCurrentSRHandler = async () => {
     try {
-      const activeViewport = props.viewports[props.activeViewportIndex];
+      const activeViewport = props.viewports[props.activeViewportId];
       const {
         StudyInstanceUID
       } = activeViewport;
@@ -1927,7 +1937,7 @@ function MicroscopyPanel(props) {
     } = _ref;
     const roiAnnotation = microscopyService.getAnnotation(uid);
     microscopyService.selectAnnotation(roiAnnotation);
-    microscopyService.focusAnnotation(roiAnnotation, props.activeViewportIndex);
+    microscopyService.focusAnnotation(roiAnnotation, props.activeViewportId);
   };
 
   /**
@@ -1978,7 +1988,7 @@ function MicroscopyPanel(props) {
   });
   const disabled = data.length === 0;
   return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
-    className: "overflow-x-hidden overflow-y-auto ohif-scrollbar",
+    className: "ohif-scrollbar overflow-y-auto overflow-x-hidden",
     "data-cy": 'measurements-panel'
   }, /*#__PURE__*/react.createElement(src/* MeasurementTable */.wt, {
     title: "Measurements",
@@ -2013,12 +2023,12 @@ function getPanelModule(_ref) {
   } = _ref;
   const wrappedMeasurementPanel = () => {
     const [{
-      activeViewportIndex,
+      activeViewportId,
       viewports
-    }, viewportGridService] = (0,src/* useViewportGrid */.O_)();
+    }] = (0,src/* useViewportGrid */.O_)();
     return /*#__PURE__*/react.createElement(MicroscopyPanel_MicroscopyPanel, {
       viewports: viewports,
-      activeViewportIndex: activeViewportIndex,
+      activeViewportId: activeViewportId,
       onSaveComplete: () => {},
       onRejectComplete: () => {},
       commandsManager: commandsManager,
@@ -2057,7 +2067,9 @@ function getCommandsModule(_ref) {
       } = _ref2;
       if (uid) {
         const roiAnnotation = microscopyService.getAnnotation(uid);
-        if (roiAnnotation) microscopyService.removeAnnotation(roiAnnotation);
+        if (roiAnnotation) {
+          microscopyService.removeAnnotation(roiAnnotation);
+        }
       }
     },
     setLabel: _ref3 => {
@@ -2096,7 +2108,7 @@ function getCommandsModule(_ref) {
       }];
       if (['line', 'box', 'circle', 'point', 'polygon', 'freehandpolygon', 'freehandline'].indexOf(toolName) >= 0) {
         // TODO: read from configuration
-        let options = {
+        const options = {
           geometryType: toolName,
           vertexEnabled: true,
           styleOptions: utils_styles["default"],
@@ -2126,37 +2138,23 @@ function getCommandsModule(_ref) {
         }], dragPanOnMiddle, dragZoomOnRight]);
       }
     },
-    incrementActiveViewport: () => {
-      const {
-        activeViewportIndex,
-        viewports
-      } = viewportGridService.getState();
-      const nextViewportIndex = (activeViewportIndex + 1) % viewports.length;
-      viewportGridService.setActiveViewportIndex(nextViewportIndex);
-    },
-    decrementActiveViewport: () => {
-      const {
-        activeViewportIndex,
-        viewports
-      } = viewportGridService.getState();
-      const nextViewportIndex = (activeViewportIndex - 1 + viewports.length) % viewports.length;
-      viewportGridService.setActiveViewportIndex(nextViewportIndex);
-    },
     toggleOverlays: () => {
       // overlay
       const overlays = document.getElementsByClassName('microscopy-viewport-overlay');
       let onoff = false; // true if this will toggle on
       for (let i = 0; i < overlays.length; i++) {
-        if (i === 0) onoff = overlays.item(0).classList.contains('hidden');
+        if (i === 0) {
+          onoff = overlays.item(0).classList.contains('hidden');
+        }
         overlays.item(i).classList.toggle('hidden');
       }
 
       // overview
       const {
-        activeViewportIndex,
+        activeViewportId,
         viewports
       } = viewportGridService.getState();
-      microscopyService.toggleOverviewMap(activeViewportIndex);
+      microscopyService.toggleOverviewMap(activeViewportId);
     },
     toggleAnnotations: () => {
       microscopyService.toggleROIsVisibility();
@@ -2178,14 +2176,6 @@ function getCommandsModule(_ref) {
       storeContexts: [],
       options: {}
     },
-    incrementActiveViewport: {
-      commandFn: actions.incrementActiveViewport,
-      storeContexts: []
-    },
-    decrementActiveViewport: {
-      commandFn: actions.decrementActiveViewport,
-      storeContexts: []
-    },
     toggleOverlays: {
       commandFn: actions.toggleOverlays,
       storeContexts: [],
@@ -2373,7 +2363,7 @@ async function loadSR(microscopyService, microscopySRDisplaySet, referencedDispl
 async function _getROIsFromToolState(naturalizedDataset, FrameOfReferenceUID) {
   const toolState = MeasurementReport.generateToolState(naturalizedDataset);
   const tools = Object.getOwnPropertyNames(toolState);
-  const DICOMMicroscopyViewer = await __webpack_require__.e(/* import() | dicom-microscopy-viewer */ 18).then(__webpack_require__.t.bind(__webpack_require__, 78457, 23));
+  const DICOMMicroscopyViewer = await __webpack_require__.e(/* import() | dicom-microscopy-viewer */ 18).then(__webpack_require__.t.bind(__webpack_require__, 42613, 23));
   const measurementGroupContentItems = _getMeasurementGroups(naturalizedDataset);
   const rois = [];
   const labels = [];
@@ -2613,7 +2603,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 const Component = /*#__PURE__*/react.lazy(() => {
-  return Promise.all(/* import() */[__webpack_require__.e(780), __webpack_require__.e(331), __webpack_require__.e(935), __webpack_require__.e(151), __webpack_require__.e(664), __webpack_require__.e(82), __webpack_require__.e(55)]).then(__webpack_require__.bind(__webpack_require__, 76440));
+  return Promise.all(/* import() */[__webpack_require__.e(754), __webpack_require__.e(604), __webpack_require__.e(417), __webpack_require__.e(23), __webpack_require__.e(90), __webpack_require__.e(250)]).then(__webpack_require__.bind(__webpack_require__, 76516));
 });
 const MicroscopyViewport = props => {
   return /*#__PURE__*/react.createElement(react.Suspense, {
@@ -2655,7 +2645,7 @@ const MicroscopyViewport = props => {
      *
      * @param props {*}
      * @param props.displaySets
-     * @param props.viewportIndex
+     * @param props.viewportId
      * @param props.viewportLabel
      * @param props.dataSource
      * @param props.viewportOptions
@@ -2668,16 +2658,15 @@ const MicroscopyViewport = props => {
       } = props;
       const [viewportGrid, viewportGridService] = (0,src/* useViewportGrid */.O_)();
       const {
-        viewports,
-        activeViewportIndex
+        activeViewportId
       } = viewportGrid;
       return /*#__PURE__*/react.createElement(MicroscopyViewport, _extends({
         servicesManager: servicesManager,
         extensionManager: extensionManager,
         commandsManager: commandsManager,
-        activeViewportIndex: activeViewportIndex,
-        setViewportActive: viewportIndex => {
-          viewportGridService.setActiveViewportIndex(viewportIndex);
+        activeViewportId: activeViewportId,
+        setViewportActive: viewportId => {
+          viewportGridService.setActiveViewportId(viewportId);
         },
         viewportData: viewportOptions
       }, props));

package/dist/{55.bundle.550a823e75eb608e8d5e.js → 250.bundle.8bc4553ee5c56bf7cf32.js}

@@ -1,7 +1,7 @@
 "use strict";
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[55,806],{
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[250,579],{
 
-/***/ 76440:
+/***/ 76516:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -13,22 +13,22 @@ __webpack_require__.d(__webpack_exports__, {
 });
 
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
-var react = __webpack_require__(32735);
+var react = __webpack_require__(43001);
 // EXTERNAL MODULE: ../../../node_modules/react-resize-detector/build/index.esm.js
-var index_esm = __webpack_require__(14664);
+var index_esm = __webpack_require__(7023);
 // 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/lodash.debounce/index.js
-var lodash_debounce = __webpack_require__(40001);
+var lodash_debounce = __webpack_require__(8324);
 var lodash_debounce_default = /*#__PURE__*/__webpack_require__.n(lodash_debounce);
-// EXTERNAL MODULE: ../../ui/src/index.js + 452 modules
-var src = __webpack_require__(28619);
+// EXTERNAL MODULE: ../../ui/src/index.js + 458 modules
+var src = __webpack_require__(88344);
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/DicomMicroscopyViewport.css
 // extracted by mini-css-extract-plugin
 
 // 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/dicom-microscopy/src/components/ViewportOverlay/listComponentGenerator.tsx
 const listComponentGenerator = props => {
@@ -36,11 +36,17 @@ const listComponentGenerator = props => {
     list,
     itemGenerator
   } = props;
-  if (!list) return;
+  if (!list) {
+    return;
+  }
   return list.map(item => {
-    if (!item) return;
+    if (!item) {
+      return;
+    }
     const generator = item.generator || itemGenerator;
-    if (!generator) throw new Error(`No generator for ${item}`);
+    if (!generator) {
+      throw new Error(`No generator for ${item}`);
+    }
     return generator({
       ...props,
       item
@@ -52,9 +58,9 @@ const listComponentGenerator = props => {
 // extracted by mini-css-extract-plugin
 
 // EXTERNAL MODULE: ../../../node_modules/moment/moment.js
-var moment_moment = __webpack_require__(53806);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 335 modules
-var esm = __webpack_require__(77331);
+var moment_moment = __webpack_require__(71271);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 337 modules
+var esm = __webpack_require__(45754);
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/components/ViewportOverlay/utils.ts
 
 
@@ -230,8 +236,12 @@ const itemGenerator = props => {
   props.formatTime = formatDICOMTime;
   props.formatPN = formatPN;
   props.formatNumberPrecision = formatNumberPrecision;
-  if (condition && !condition(props)) return null;
-  if (!contents && !valueFunc) return null;
+  if (condition && !condition(props)) {
+    return null;
+  }
+  if (!contents && !valueFunc) {
+    return null;
+  }
   const value = valueFunc && valueFunc(props);
   const contentsValue = contents && contents(props) || [{
     className: 'mr-1',
@@ -250,9 +260,9 @@ const itemGenerator = props => {
 };
 /* harmony default export */ const ViewportOverlay = (generateFromConfig({}));
 // EXTERNAL MODULE: ../../../node_modules/dicomweb-client/build/dicomweb-client.es.js
-var dicomweb_client_es = __webpack_require__(75935);
-// EXTERNAL MODULE: ../../core/src/index.ts + 101 modules
-var core_src = __webpack_require__(48501);
+var dicomweb_client_es = __webpack_require__(97604);
+// EXTERNAL MODULE: ../../core/src/index.ts + 75 modules
+var core_src = __webpack_require__(78695);
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/utils/dicomWebClient.ts
 
 
@@ -332,9 +342,9 @@ function getDicomWebClient(_ref) {
   return client;
 }
 // EXTERNAL MODULE: ../../../node_modules/dcmjs/build/dcmjs.es.js
-var dcmjs_es = __webpack_require__(22737);
-// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 58 modules
-var default_src = __webpack_require__(96082);
+var dcmjs_es = __webpack_require__(67540);
+// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 74 modules
+var default_src = __webpack_require__(48090);
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/utils/cleanDenaturalizedDataset.ts
 
 function isPrimitive(v) {
@@ -415,11 +425,11 @@ class DicomMicroscopyViewport extends react.Component {
     this.setViewportActiveHandler = () => {
       const {
         setViewportActive,
-        viewportIndex,
-        activeViewportIndex
+        viewportId,
+        activeViewportId
       } = this.props;
-      if (viewportIndex !== activeViewportIndex) {
-        setViewportActive(viewportIndex);
+      if (viewportId !== activeViewportId) {
+        setViewportActive(viewportId);
       }
     };
     this.onWindowResize = () => {
@@ -430,7 +440,9 @@ class DicomMicroscopyViewport extends react.Component {
     } = this.props.servicesManager.services;
     this.microscopyService = microscopyService;
     this.debouncedResize = lodash_debounce_default()(() => {
-      if (this.viewer) this.viewer.resize();
+      if (this.viewer) {
+        this.viewer.resize();
+      }
     }, 100);
   }
   /**
@@ -465,7 +477,7 @@ class DicomMicroscopyViewport extends react.Component {
       const {
         viewer: DicomMicroscopyViewer,
         metadata: metadataUtils
-      } = await __webpack_require__.e(/* import() | dicom-microscopy-viewer */ 18).then(__webpack_require__.t.bind(__webpack_require__, 78457, 23));
+      } = await __webpack_require__.e(/* import() | dicom-microscopy-viewer */ 18).then(__webpack_require__.t.bind(__webpack_require__, 42613, 23));
       const microscopyViewer = DicomMicroscopyViewer.VolumeImageViewer;
       const client = getDicomWebClient({
         extensionManager: this.props.extensionManager,
@@ -571,7 +583,7 @@ class DicomMicroscopyViewport extends react.Component {
         StudyInstanceUID,
         SeriesInstanceUID
       } = displaySet;
-      this.managedViewer = this.microscopyService.addViewer(this.viewer, this.props.viewportIndex, container, StudyInstanceUID, SeriesInstanceUID);
+      this.managedViewer = this.microscopyService.addViewer(this.viewer, this.props.viewportId, container, StudyInstanceUID, SeriesInstanceUID);
       this.managedViewer.addContextMenuCallback(event => {
         // TODO: refactor this after Bill's changes on ContextMenu feature get merged
         // const roiAnnotationNearBy = this.getNearbyROI(event);
@@ -592,9 +604,13 @@ class DicomMicroscopyViewport extends react.Component {
   componentDidMount() {
     const {
       displaySets,
-      viewportIndex
+      viewportOptions
     } = this.props;
-    const displaySet = displaySets[viewportIndex];
+    const {
+      viewportId
+    } = viewportOptions;
+    // Todo-rename: this is always getting the 0
+    const displaySet = displaySets[0];
     this.installOpenLayersRenderer(this.container.current, displaySet).then(() => {
       this.setState({
         isLoaded: true
@@ -658,17 +674,17 @@ class DicomMicroscopyViewport extends react.Component {
       style: style,
       ref: this.container
     }), this.state.isLoaded ? null : /*#__PURE__*/react.createElement(src/* LoadingIndicatorProgress */.LE, {
-      className: 'w-full h-full bg-black'
+      className: 'h-full w-full bg-black'
     }));
   }
 }
 DicomMicroscopyViewport.propTypes = {
   viewportData: (prop_types_default()).object,
-  activeViewportIndex: (prop_types_default()).number,
+  activeViewportId: (prop_types_default()).string,
   setViewportActive: (prop_types_default()).func,
   // props from OHIF Viewport Grid
   displaySets: (prop_types_default()).array,
-  viewportIndex: (prop_types_default()).number,
+  viewportId: (prop_types_default()).string,
   viewportLabel: (prop_types_default()).string,
   dataSource: (prop_types_default()).object,
   viewportOptions: (prop_types_default()).object,