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

package/dist/221.css

@@ -0,0 +1,2 @@
+.dicom-tag-browser-table{margin-left:auto;margin-right:auto}.dicom-tag-browser-table-wrapper{overflow-x:scroll}.dicom-tag-browser-table tr{border-top:1px solid #ddd;color:#fff;padding-left:10px;padding-right:10px;white-space:nowrap}.stick{overflow:clip;position:sticky}.dicom-tag-browser-content{overflow:hidden;padding-bottom:50px;width:100%}.dicom-tag-browser-instance-range .range{height:20px}.dicom-tag-browser-instance-range{padding:20px 0}.dicom-tag-browser-table td.dicom-tag-browser-table-center{text-align:center}.dicom-tag-browser-table th{color:"#20A5D6";padding-left:10px;padding-right:10px;text-align:center}.dicom-tag-browser-table th.dicom-tag-browser-table-left{text-align:left}
+.chrome-picker{background:#090c29!important}

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.dcbddf56a7d8f388bb8a.js → 236.bundle.d2da6d1991e1229bf913.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 + 485 modules
+var src = __webpack_require__(71783);
+// EXTERNAL MODULE: ../../core/src/index.ts + 75 modules
+var core_src = __webpack_require__(34491);
 // 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;
@@ -271,7 +273,7 @@ class ViewerManager extends core_src/* PubSubService */.hC {
   }
 
   /**
-   * Cleares all the relevant event handlers for the third-party API
+   * Clears all the relevant event handlers for the third-party API
    */
   unregisterEvents() {
     this.container.removeEventListener(ApiEvents.ROI_ADDED, this.onRoiAdded);
@@ -365,7 +367,7 @@ class ViewerManager extends core_src/* PubSubService */.hC {
    * @param {String} label The label of the annotation.
    */
   addRoiGraphicWithLabel(roiGraphic, label) {
-    // NOTE: Dicom Microscopy Viewer will override styles for "Text" evalutations
+    // NOTE: Dicom Microscopy Viewer will override styles for "Text" evaluations
     // to hide all other geometries, we are not going to use its label.
     // if (label) {
     //   if (!roiGraphic.properties) roiGraphic.properties = {};
@@ -738,7 +740,7 @@ class RoiAnnotation extends core_src/* PubSubService */.hC {
   /**
    * Returns the geometry type of the annotation concatenated with the label
    * defined for the annotation.
-   * Difference with getDetailedLabel() is that this will return empty string for empy
+   * Difference with getDetailedLabel() is that this will return empty string for empty
    * label.
    *
    * @returns {String} Text with geometry type and label
@@ -805,13 +807,13 @@ class MicroscopyService extends core_src/* PubSubService */.hC {
   }
 
   /**
-   * Cleares all the annotations and managed viewers, setting the manager state
+   * Clears all the annotations and managed viewers, setting the manager state
    * to its initial state
    */
   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;
   }
@@ -1081,7 +1087,7 @@ class MicroscopyService extends core_src/* PubSubService */.hC {
 
   /**
    * Removes the given third-party viewer API's object from the managed viewers
-   * and cleares all its event subscriptions
+   * and clears all its event subscriptions
    *
    * @param {Object} viewer Third-party viewer API's object to be removed
    */
@@ -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
 
 
@@ -1418,11 +1426,11 @@ function callInputDialog(_ref) {
         actions: [{
           id: 'cancel',
           text: 'Cancel',
-          type: src/* ButtonEnums.type */.LZ.U.secondary
+          type: src/* ButtonEnums.type */.LZ.dt.secondary
         }, {
           id: 'save',
           text: 'Save',
-          type: src/* ButtonEnums.type */.LZ.U.primary
+          type: src/* ButtonEnums.type */.LZ.dt.primary
         }],
         onSubmit: onSubmitHandler,
         body: _ref3 => {
@@ -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 => {
@@ -1540,11 +1548,13 @@ function constructSR(metadata, _ref, annotations) {
       marker,
       presentationState
     } = roi.properties;
-    console.debug('[SR] storing marker...', marker);
-    console.debug('[SR] storing measurements...', measurements);
-    console.debug('[SR] storing evaluations...', evaluations);
-    console.debug('[SR] storing presentation state...', presentationState);
-    if (presentationState) presentationState.marker = marker;
+    console.log('[SR] storing marker...', marker);
+    console.log('[SR] storing measurements...', measurements);
+    console.log('[SR] storing evaluations...', evaluations);
+    console.log('[SR] storing presentation state...', presentationState);
+    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",
@@ -1986,11 +1996,6 @@ function MicroscopyPanel(props) {
     data: data,
     onClick: onMeasurementItemClickHandler,
     onEdit: onMeasurementItemEditHandler
-  })), /*#__PURE__*/react.createElement("div", {
-    className: "flex justify-center p-4"
-  }, /*#__PURE__*/react.createElement(src/* ButtonGroup */.hE, {
-    color: "black",
-    size: "inherit"
   })));
 }
 const connectedMicroscopyPanel = (0,es/* withTranslation */.Zh)(['MicroscopyTable', 'Common'])(MicroscopyPanel);
@@ -2013,12 +2018,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 +2062,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 +2103,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 +2133,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 +2171,6 @@ function getCommandsModule(_ref) {
       storeContexts: [],
       options: {}
     },
-    incrementActiveViewport: {
-      commandFn: actions.incrementActiveViewport,
-      storeContexts: []
-    },
-    decrementActiveViewport: {
-      commandFn: actions.decrementActiveViewport,
-      storeContexts: []
-    },
     toggleOverlays: {
       commandFn: actions.toggleOverlays,
       storeContexts: [],
@@ -2359,7 +2344,7 @@ async function loadSR(microscopyService, microscopySRDisplaySet, referencedDispl
     // NOTE: When saving Microscopy SR, we are attaching identifier property
     // to each ROI, and when read for display, it is coming in as "TEXT"
     // evaluation.
-    // As the Dicom Microscopy Viewer will override styles for "Text" evalutations
+    // As the Dicom Microscopy Viewer will override styles for "Text" evaluations
     // to hide all other geometries, we are going to manually remove that
     // evaluation item.
     const roi = rois[i];
@@ -2373,7 +2358,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 = [];
@@ -2446,11 +2431,11 @@ async function _getROIsFromToolState(naturalizedDataset, FrameOfReferenceUID) {
       });
       if (measurements && measurements.length) {
         properties.measurements = measurements;
-        console.debug('[SR] retrieving measurements...', measurements);
+        console.log('[SR] retrieving measurements...', measurements);
       }
       if (evaluations && evaluations.length) {
         properties.evaluations = evaluations;
-        console.debug('[SR] retrieving evaluations...', evaluations);
+        console.log('[SR] retrieving evaluations...', evaluations);
       }
       const roi = new DICOMMicroscopyViewer.roi.ROI({
         scoord3d,
@@ -2533,7 +2518,7 @@ function DicomMicroscopySRSopClassHandler_getDisplaySetsFromSeries(instances, se
   const instance = instances[0];
 
   // TODO ! Consumption of DICOMMicroscopySRSOPClassHandler to a derived dataset or normal dataset?
-  // TOOD -> Easy to swap this to a "non-derived" displaySet, but unfortunately need to put it in a different extension.
+  // TODO -> Easy to swap this to a "non-derived" displaySet, but unfortunately need to put it in a different extension.
   const naturalizedDataset = core_src.DicomMetadataStore.getSeries(instance.StudyInstanceUID, instance.SeriesInstanceUID).instances[0];
   const ReferencedFrameOfReferenceUID = _getReferencedFrameOfReferenceUID(naturalizedDataset);
   const {
@@ -2613,7 +2598,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(342), __webpack_require__.e(250)]).then(__webpack_require__.bind(__webpack_require__, 76516));
 });
 const MicroscopyViewport = props => {
   return /*#__PURE__*/react.createElement(react.Suspense, {
@@ -2655,7 +2640,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 +2653,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));