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

package/dist/{351.bundle.0742237651aef9694a65.js → 181.bundle.fa57199595cf28f44c7b.js}

@@ -1,7 +1,7 @@
 "use strict";
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[351],{
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[181],{
 
-/***/ 30351:
+/***/ 86181:
 /***/ ((__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/@cornerstonejs/tools/dist/esm/index.js + 321 modules
-var esm = __webpack_require__(57270);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 335 modules
-var dist_esm = __webpack_require__(77331);
-// EXTERNAL MODULE: ../../core/src/index.ts + 101 modules
-var src = __webpack_require__(48501);
-// EXTERNAL MODULE: ../../ui/src/index.js + 452 modules
-var ui_src = __webpack_require__(28619);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 327 modules
+var esm = __webpack_require__(99777);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 337 modules
+var dist_esm = __webpack_require__(45754);
+// EXTERNAL MODULE: ../../core/src/index.ts + 75 modules
+var src = __webpack_require__(34491);
+// EXTERNAL MODULE: ../../ui/src/index.js + 485 modules
+var ui_src = __webpack_require__(71783);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/state.ts
-var state = __webpack_require__(21922);
+var state = __webpack_require__(73704);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.css
 // extracted by mini-css-extract-plugin
 
@@ -41,7 +41,7 @@ var state = __webpack_require__(21922);
 function CornerstoneImageScrollbar(_ref) {
   let {
     viewportData,
-    viewportIndex,
+    viewportId,
     element,
     imageSliceData,
     setImageSliceData,
@@ -52,9 +52,7 @@ function CornerstoneImageScrollbar(_ref) {
     cineService,
     cornerstoneViewportService
   } = servicesManager.services;
-  const onImageScrollbarChange = (imageIndex, viewportIndex) => {
-    const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(viewportIndex);
-    const viewportId = viewportInfo.getViewportId();
+  const onImageScrollbarChange = (imageIndex, viewportId) => {
     const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
     const {
       isCineEnabled
@@ -63,7 +61,7 @@ function CornerstoneImageScrollbar(_ref) {
       // on image scrollbar change, stop the CINE if it is playing
       cineService.stopClip(element);
       cineService.setCine({
-        id: viewportIndex,
+        id: viewportId,
         isPlaying: false
       });
     }
@@ -76,7 +74,7 @@ function CornerstoneImageScrollbar(_ref) {
     if (!viewportData) {
       return;
     }
-    const viewport = cornerstoneViewportService.getCornerstoneViewportByIndex(viewportIndex);
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
     if (!viewport) {
       return;
     }
@@ -102,7 +100,7 @@ function CornerstoneImageScrollbar(_ref) {
         numberOfSlices
       });
     }
-  }, [viewportIndex, viewportData]);
+  }, [viewportId, viewportData]);
   (0,react.useEffect)(() => {
     if (viewportData?.viewportType !== dist_esm.Enums.ViewportType.STACK) {
       return;
@@ -143,7 +141,7 @@ function CornerstoneImageScrollbar(_ref) {
     };
   }, [viewportData, element]);
   return /*#__PURE__*/react.createElement(ui_src/* ImageScrollbar */.Ln, {
-    onChange: evt => onImageScrollbarChange(evt, viewportIndex),
+    onChange: evt => onImageScrollbarChange(evt, viewportId),
     max: imageSliceData.numberOfSlices ? imageSliceData.numberOfSlices - 1 : 0,
     height: scrollbarHeight,
     value: imageSliceData.imageIndex
@@ -151,7 +149,7 @@ function CornerstoneImageScrollbar(_ref) {
 }
 CornerstoneImageScrollbar.propTypes = {
   viewportData: (prop_types_default()).object,
-  viewportIndex: (prop_types_default()).number.isRequired,
+  viewportId: (prop_types_default()).string.isRequired,
   element: prop_types_default().instanceOf(Element),
   scrollbarHeight: (prop_types_default()).string,
   imageSliceData: (prop_types_default()).object.isRequired,
@@ -160,9 +158,9 @@ CornerstoneImageScrollbar.propTypes = {
 };
 /* harmony default export */ const ViewportImageScrollbar = (CornerstoneImageScrollbar);
 // EXTERNAL MODULE: ../../../node_modules/gl-matrix/esm/index.js + 10 modules
-var gl_matrix_esm = __webpack_require__(88256);
+var gl_matrix_esm = __webpack_require__(45451);
 // EXTERNAL MODULE: ../../../node_modules/moment/moment.js
-var moment = __webpack_require__(53806);
+var moment = __webpack_require__(71271);
 var moment_default = /*#__PURE__*/__webpack_require__.n(moment);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/Overlays/utils.ts
 
@@ -240,7 +238,7 @@ function formatPN(name) {
  * Gets compression type
  *
  * @param {number} imageId
- * @returns {string} comrpession type.
+ * @returns {string} compression type.
  */
 function getCompression(imageId) {
   const generalImageModule = metaData.get('generalImageModule', imageId) || {};
@@ -291,11 +289,11 @@ function VOIOverlayItem(_ref) {
   }, /*#__PURE__*/react.createElement("span", {
     className: "mr-1 shrink-0"
   }, "W:"), /*#__PURE__*/react.createElement("span", {
-    className: "ml-1 mr-2 font-light shrink-0"
+    className: "ml-1 mr-2 shrink-0 font-light"
   }, windowWidth.toFixed(0)), /*#__PURE__*/react.createElement("span", {
     className: "mr-1 shrink-0"
   }, "L:"), /*#__PURE__*/react.createElement("span", {
-    className: "ml-1 font-light shrink-0"
+    className: "ml-1 shrink-0 font-light"
   }, windowCenter.toFixed(0)));
 }
 
@@ -352,7 +350,7 @@ function CustomizableViewportOverlay(_ref4) {
     element,
     viewportData,
     imageSliceData,
-    viewportIndex,
+    viewportId,
     servicesManager
   } = _ref4;
   const {
@@ -382,10 +380,10 @@ function CustomizableViewportOverlay(_ref4) {
   }, [viewportData, imageIndex]);
   const instanceNumber = (0,react.useMemo)(() => {
     if (viewportData != null) {
-      return _getInstanceNumber(viewportData, viewportIndex, imageIndex, cornerstoneViewportService);
+      return _getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService);
     }
     return null;
-  }, [viewportData, viewportIndex, imageIndex, cornerstoneViewportService]);
+  }, [viewportData, viewportId, imageIndex, cornerstoneViewportService]);
 
   /**
    * Initial toolbar state
@@ -422,7 +420,7 @@ function CustomizableViewportOverlay(_ref4) {
     return () => {
       element.removeEventListener(dist_esm.Enums.Events.VOI_MODIFIED, updateVOI);
     };
-  }, [viewportIndex, viewportData, voi, element]);
+  }, [viewportId, viewportData, voi, element]);
 
   /**
    * Updating the scale when the viewport changes its zoom
@@ -434,7 +432,7 @@ function CustomizableViewportOverlay(_ref4) {
         camera
       } = eventDetail.detail;
       if (previousCamera.parallelScale !== camera.parallelScale || previousCamera.scale !== camera.scale) {
-        const viewport = cornerstoneViewportService.getCornerstoneViewportByIndex(viewportIndex);
+        const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
         if (!viewport) {
           return;
         }
@@ -458,7 +456,7 @@ function CustomizableViewportOverlay(_ref4) {
     return () => {
       element.removeEventListener(dist_esm.Enums.Events.CAMERA_MODIFIED, updateScale);
     };
-  }, [viewportIndex, viewportData, cornerstoneViewportService, element]);
+  }, [viewportId, viewportData, cornerstoneViewportService, element]);
 
   /**
    * Updating the active tools when the toolbar changes
@@ -479,7 +477,7 @@ function CustomizableViewportOverlay(_ref4) {
       element,
       viewportData,
       imageSliceData,
-      viewportIndex,
+      viewportId,
       servicesManager,
       customization: item,
       formatters: {
@@ -506,7 +504,7 @@ function CustomizableViewportOverlay(_ref4) {
         return renderItem.content(overlayItemProps);
       }
     }
-  }, [element, viewportData, imageSliceData, viewportIndex, servicesManager, customizationService, instance, voi, scale, instanceNumber]);
+  }, [element, viewportData, imageSliceData, viewportId, servicesManager, customizationService, instance, voi, scale, instanceNumber]);
   const getTopLeftContent = (0,react.useCallback)(() => {
     const items = topLeftCustomization?.items || [{
       id: 'WindowLevel',
@@ -557,7 +555,7 @@ function _getViewportInstance(viewportData, imageIndex) {
   }
   return imageId ? dist_esm.metaData.get('instance', imageId) || {} : {};
 }
-function _getInstanceNumber(viewportData, viewportIndex, imageIndex, cornerstoneViewportService) {
+function _getInstanceNumber(viewportData, viewportId, imageIndex, cornerstoneViewportService) {
   let instanceNumber;
   if (viewportData.viewportType === dist_esm.Enums.ViewportType.STACK) {
     instanceNumber = _getInstanceNumberFromStack(viewportData, imageIndex);
@@ -565,7 +563,7 @@ function _getInstanceNumber(viewportData, viewportIndex, imageIndex, cornerstone
       return null;
     }
   } else if (viewportData.viewportType === dist_esm.Enums.ViewportType.ORTHOGRAPHIC) {
-    instanceNumber = _getInstanceNumberFromVolume(viewportData, imageIndex, viewportIndex, cornerstoneViewportService);
+    instanceNumber = _getInstanceNumberFromVolume(viewportData, imageIndex, viewportId, cornerstoneViewportService);
   }
   return instanceNumber;
 }
@@ -589,7 +587,7 @@ function _getInstanceNumberFromStack(viewportData, imageIndex) {
 // Since volume viewports can be in any view direction, they can render
 // a reconstructed image which don't have imageIds; therefore, no instance and instanceNumber
 // Here we check if viewport is in the acquisition direction and if so, we get the instanceNumber
-function _getInstanceNumberFromVolume(viewportData, imageIndex, viewportIndex, cornerstoneViewportService) {
+function _getInstanceNumberFromVolume(viewportData, viewportId, cornerstoneViewportService) {
   const volumes = viewportData.volumes;
 
   // Todo: support fusion of acquisition plane which has instanceNumber
@@ -601,7 +599,7 @@ function _getInstanceNumberFromVolume(viewportData, imageIndex, viewportIndex, c
     direction,
     imageIds
   } = volume;
-  const cornerstoneViewport = cornerstoneViewportService.getCornerstoneViewportByIndex(viewportIndex);
+  const cornerstoneViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
   if (!cornerstoneViewport) {
     return;
   }
@@ -630,11 +628,11 @@ function _getInstanceNumberFromVolume(viewportData, imageIndex, viewportIndex, c
 CustomizableViewportOverlay.propTypes = {
   viewportData: (prop_types_default()).object,
   imageIndex: (prop_types_default()).number,
-  viewportIndex: (prop_types_default()).number
+  viewportId: (prop_types_default()).string
 };
 /* harmony default export */ const Overlays_CustomizableViewportOverlay = (CustomizableViewportOverlay);
 // 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/Viewport/Overlays/ViewportOrientationMarkers.css
 // extracted by mini-css-extract-plugin
@@ -656,7 +654,7 @@ function ViewportOrientationMarkers(_ref) {
     element,
     viewportData,
     imageSliceData,
-    viewportIndex,
+    viewportId,
     servicesManager,
     orientationMarkers = ['top', 'left']
   } = _ref;
@@ -726,7 +724,7 @@ function ViewportOrientationMarkers(_ref) {
       return '';
     }
     const markers = _getOrientationMarkers(rowCosines, columnCosines, rotation, flipVertical, flipHorizontal);
-    const ohifViewport = cornerstoneViewportService.getViewportInfoByIndex(viewportIndex);
+    const ohifViewport = cornerstoneViewportService.getViewportInfo(viewportId);
     if (!ohifViewport) {
       console.log('ViewportOrientationMarkers::No viewport');
       return null;
@@ -858,9 +856,9 @@ function ViewportImageSliceLoadingIndicator(_ref) {
   }, [element, viewportData]);
   if (error) {
     return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
-      className: "bg-black opacity-50 absolute h-full w-full top-0 left-0"
+      className: "absolute top-0 left-0 h-full w-full bg-black opacity-50"
     }, /*#__PURE__*/react.createElement("div", {
-      className: "flex transparent items-center justify-center w-full h-full"
+      className: "transparent flex h-full w-full items-center justify-center"
     }, /*#__PURE__*/react.createElement("p", {
       className: "text-primary-light text-xl font-light"
     }, /*#__PURE__*/react.createElement("h4", null, "Error Loading Image"), /*#__PURE__*/react.createElement("p", null, "An error has occurred."), /*#__PURE__*/react.createElement("p", null, error)))));
@@ -871,9 +869,9 @@ function ViewportImageSliceLoadingIndicator(_ref) {
       // IMPORTANT: we need to use the pointer-events-none class to prevent the loading indicator from
       // interacting with the mouse, since scrolling should propagate to the viewport underneath
       react.createElement("div", {
-        className: "pointer-events-none bg-black opacity-50 absolute h-full w-full top-0 left-0"
+        className: "pointer-events-none absolute top-0 left-0 h-full w-full bg-black opacity-50"
       }, /*#__PURE__*/react.createElement("div", {
-        className: "flex transparent items-center justify-center w-full h-full"
+        className: "transparent flex h-full w-full items-center justify-center"
       }, /*#__PURE__*/react.createElement("p", {
         className: "text-primary-light text-xl font-light"
       }, "Loading...")))
@@ -899,7 +897,7 @@ ViewportImageSliceLoadingIndicator.defaultProps = {
 
 function CornerstoneOverlays(props) {
   const {
-    viewportIndex,
+    viewportId,
     element,
     scrollbarHeight,
     servicesManager
@@ -916,7 +914,7 @@ function CornerstoneOverlays(props) {
     const {
       unsubscribe
     } = cornerstoneViewportService.subscribe(cornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED, props => {
-      if (props.viewportIndex !== viewportIndex) {
+      if (props.viewportId !== viewportId) {
         return;
       }
       setViewportData(props.viewportData);
@@ -924,12 +922,12 @@ function CornerstoneOverlays(props) {
     return () => {
       unsubscribe();
     };
-  }, [viewportIndex]);
+  }, [viewportId]);
   if (!element) {
     return null;
   }
   if (viewportData) {
-    const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(viewportIndex);
+    const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
     if (viewportInfo?.viewportOptions?.customViewportProps?.hideOverlays) {
       return null;
     }
@@ -937,7 +935,7 @@ function CornerstoneOverlays(props) {
   return /*#__PURE__*/react.createElement("div", {
     className: "noselect"
   }, /*#__PURE__*/react.createElement(ViewportImageScrollbar, {
-    viewportIndex: viewportIndex,
+    viewportId: viewportId,
     viewportData: viewportData,
     element: element,
     imageSliceData: imageSliceData,
@@ -947,7 +945,7 @@ function CornerstoneOverlays(props) {
   }), /*#__PURE__*/react.createElement(Overlays_CustomizableViewportOverlay, {
     imageSliceData: imageSliceData,
     viewportData: viewportData,
-    viewportIndex: viewportIndex,
+    viewportId: viewportId,
     servicesManager: servicesManager,
     element: element
   }), /*#__PURE__*/react.createElement(Overlays_ViewportImageSliceLoadingIndicator, {
@@ -958,12 +956,105 @@ function CornerstoneOverlays(props) {
     element: element,
     viewportData: viewportData,
     servicesManager: servicesManager,
-    viewportIndex: viewportIndex
+    viewportId: viewportId
   }));
 }
 /* harmony default export */ const Overlays_CornerstoneOverlays = (CornerstoneOverlays);
 // 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/components/CinePlayer/CinePlayer.tsx
+
+
+
+function WrappedCinePlayer(_ref) {
+  let {
+    enabledVPElement,
+    viewportId,
+    servicesManager
+  } = _ref;
+  const {
+    toolbarService,
+    customizationService
+  } = servicesManager.services;
+  const [{
+    isCineEnabled,
+    cines
+  }, cineService] = (0,ui_src/* useCine */.vQ)();
+  const [{
+    activeViewportId
+  }] = (0,ui_src/* useViewportGrid */.O_)();
+  const {
+    component: CinePlayerComponent = ui_src/* CinePlayer */.H6
+  } = customizationService.get('cinePlayer') ?? {};
+  const handleCineClose = () => {
+    toolbarService.recordInteraction({
+      groupId: 'MoreTools',
+      interactionType: 'toggle',
+      commands: [{
+        commandName: 'toggleCine',
+        commandOptions: {},
+        toolName: 'cine',
+        context: 'CORNERSTONE'
+      }]
+    });
+  };
+  const cineHandler = () => {
+    if (!cines || !cines[viewportId] || !enabledVPElement) {
+      return;
+    }
+    const cine = cines[viewportId];
+    const isPlaying = cine.isPlaying || false;
+    const frameRate = cine.frameRate || 24;
+    const validFrameRate = Math.max(frameRate, 1);
+    if (isPlaying) {
+      cineService.playClip(enabledVPElement, {
+        framesPerSecond: validFrameRate
+      });
+    } else {
+      cineService.stopClip(enabledVPElement);
+    }
+  };
+  (0,react.useEffect)(() => {
+    dist_esm.eventTarget.addEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_NEW_STACK, cineHandler);
+    return () => {
+      cineService.setCine({
+        id: viewportId,
+        isPlaying: false
+      });
+      dist_esm.eventTarget.removeEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_NEW_STACK, cineHandler);
+    };
+  }, [enabledVPElement]);
+  (0,react.useEffect)(() => {
+    if (!cines || !cines[viewportId] || !enabledVPElement) {
+      return;
+    }
+    cineHandler();
+    return () => {
+      if (enabledVPElement && cines?.[viewportId]?.isPlaying) {
+        cineService.stopClip(enabledVPElement);
+      }
+    };
+  }, [cines, viewportId, cineService, enabledVPElement, cineHandler]);
+  const cine = cines[viewportId];
+  const isPlaying = cine && cine.isPlaying || false;
+  return isCineEnabled && /*#__PURE__*/react.createElement(CinePlayerComponent, {
+    className: "absolute left-1/2 bottom-3 -translate-x-1/2",
+    isPlaying: isPlaying,
+    onClose: handleCineClose,
+    onPlayPauseChange: isPlaying => cineService.setCine({
+      id: activeViewportId,
+      isPlaying
+    }),
+    onFrameRateChange: frameRate => cineService.setCine({
+      id: activeViewportId,
+      frameRate
+    })
+  });
+}
+/* harmony default export */ const CinePlayer = (WrappedCinePlayer);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/CinePlayer/index.ts
+
+/* harmony default export */ const components_CinePlayer = (CinePlayer);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx
 
 
@@ -976,6 +1067,7 @@ var getSOPInstanceAttributes = __webpack_require__(63130);
 
 
 
+
 const STACK = 'stack';
 
 /**
@@ -999,6 +1091,9 @@ function areEqual(prevProps, nextProps) {
   if (prevProps.viewportOptions.viewportType !== nextProps.viewportOptions.viewportType) {
     return false;
   }
+  if (nextProps.viewportOptions.needsRerendering) {
+    return false;
+  }
   const prevDisplaySets = prevProps.displaySets;
   const nextDisplaySets = nextProps.displaySets;
   if (prevDisplaySets.length !== nextDisplaySets.length) {
@@ -1032,27 +1127,22 @@ function areEqual(prevProps, nextProps) {
 // Then we don't need to worry about the re-renders if the props change.
 const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
   const {
-    viewportIndex,
     displaySets,
     dataSource,
     viewportOptions,
     displaySetOptions,
     servicesManager,
+    commandsManager,
     onElementEnabled,
     onElementDisabled,
+    isJumpToMeasurementDisabled,
     // Note: you SHOULD NOT use the initialImageIdOrIndex for manipulation
     // of the imageData in the OHIFCornerstoneViewport. This prop is used
     // to set the initial state of the viewport's first image to render
     initialImageIndex
   } = props;
+  const viewportId = viewportOptions.viewportId;
   const [scrollbarHeight, setScrollbarHeight] = (0,react.useState)('100px');
-  const [{
-    isCineEnabled,
-    cines
-  }, cineService] = (0,ui_src/* useCine */.vQ)();
-  const [{
-    activeViewportIndex
-  }] = (0,ui_src/* useViewportGrid */.O_)();
   const [enabledVPElement, setEnabledVPElement] = (0,react.useState)(null);
   const elementRef = (0,react.useRef)();
   const {
@@ -1067,58 +1157,6 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     stateSyncService
   } = servicesManager.services;
   const [viewportDialogState] = (0,ui_src/* useViewportDialog */.en)();
-  const cineHandler = () => {
-    if (!cines || !cines[viewportIndex] || !enabledVPElement) {
-      return;
-    }
-    const cine = cines[viewportIndex];
-    const isPlaying = cine.isPlaying || false;
-    const frameRate = cine.frameRate || 24;
-    const validFrameRate = Math.max(frameRate, 1);
-    if (isPlaying) {
-      cineService.playClip(enabledVPElement, {
-        framesPerSecond: validFrameRate
-      });
-    } else {
-      cineService.stopClip(enabledVPElement);
-    }
-  };
-  (0,react.useEffect)(() => {
-    dist_esm.eventTarget.addEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_NEW_STACK, cineHandler);
-    return () => {
-      cineService.setCine({
-        id: viewportIndex,
-        isPlaying: false
-      });
-      dist_esm.eventTarget.removeEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_NEW_STACK, cineHandler);
-    };
-  }, [enabledVPElement]);
-  (0,react.useEffect)(() => {
-    if (!cines || !cines[viewportIndex] || !enabledVPElement) {
-      return;
-    }
-    cineHandler();
-    return () => {
-      if (enabledVPElement && cines?.[viewportIndex]?.isPlaying) {
-        cineService.stopClip(enabledVPElement);
-      }
-    };
-  }, [cines, viewportIndex, cineService, enabledVPElement, cineHandler]);
-  const cine = cines[viewportIndex];
-  const isPlaying = cine && cine.isPlaying || false;
-  const handleCineClose = () => {
-    toolbarService.recordInteraction({
-      groupId: 'MoreTools',
-      itemId: 'cine',
-      interactionType: 'toggle',
-      commands: [{
-        commandName: 'toggleCine',
-        commandOptions: {},
-        context: 'CORNERSTONE'
-      }]
-    });
-  };
-
   // useCallback for scroll bar height calculation
   const setImageScrollBarHeight = (0,react.useCallback)(() => {
     const scrollbarHeight = `${elementRef.current.clientHeight - 20}px`;
@@ -1132,46 +1170,12 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
       setImageScrollBarHeight();
     }
   }, [elementRef]);
-  const storePresentation = () => {
-    const currentPresentation = cornerstoneViewportService.getPresentation(viewportIndex);
-    if (!currentPresentation || !currentPresentation.presentationIds) return;
-    const {
-      lutPresentationStore,
-      positionPresentationStore
-    } = stateSyncService.getState();
-    const {
-      presentationIds
-    } = currentPresentation;
-    const {
-      lutPresentationId,
-      positionPresentationId
-    } = presentationIds || {};
-    const storeState = {};
-    if (lutPresentationId) {
-      storeState.lutPresentationStore = {
-        ...lutPresentationStore,
-        [lutPresentationId]: currentPresentation
-      };
-    }
-    if (positionPresentationId) {
-      storeState.positionPresentationStore = {
-        ...positionPresentationStore,
-        [positionPresentationId]: currentPresentation
-      };
-    }
-    stateSyncService.store(storeState);
-  };
-  const cleanUpServices = (0,react.useCallback)(() => {
-    const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(viewportIndex);
-    if (!viewportInfo) {
-      return;
-    }
-    const viewportId = viewportInfo.getViewportId();
+  const cleanUpServices = (0,react.useCallback)(viewportInfo => {
     const renderingEngineId = viewportInfo.getRenderingEngineId();
     const syncGroups = viewportInfo.getSyncGroups();
     toolGroupService.removeViewportFromToolGroup(viewportId, renderingEngineId);
     syncGroupService.removeViewportFromSyncGroup(viewportId, renderingEngineId, syncGroups);
-  }, [viewportIndex, viewportOptions.viewportId]);
+  }, [viewportId]);
   const elementEnabledHandler = (0,react.useCallback)(evt => {
     // check this is this element reference and return early if doesn't match
     if (evt.detail.element !== elementRef.current) {
@@ -1182,8 +1186,7 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
       element
     } = evt.detail;
     const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
-    const viewportIndex = viewportInfo.getViewportIndex();
-    (0,state/* setEnabledElement */.Yc)(viewportIndex, element);
+    (0,state/* setEnabledElement */.Yc)(viewportId, element);
     setEnabledVPElement(element);
     const renderingEngineId = viewportInfo.getRenderingEngineId();
     const toolGroupId = viewportInfo.getToolGroupId();
@@ -1193,18 +1196,22 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     if (onElementEnabled) {
       onElementEnabled(evt);
     }
-  }, [viewportIndex, onElementEnabled, toolGroupService]);
+  }, [viewportId, onElementEnabled, toolGroupService]);
 
   // disable the element upon unmounting
   (0,react.useEffect)(() => {
-    cornerstoneViewportService.enableViewport(viewportIndex, viewportOptions, elementRef.current);
+    cornerstoneViewportService.enableViewport(viewportId, elementRef.current);
     dist_esm.eventTarget.addEventListener(dist_esm.Enums.Events.ELEMENT_ENABLED, elementEnabledHandler);
     setImageScrollBarHeight();
     return () => {
-      storePresentation();
-      cleanUpServices();
-      const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(viewportIndex);
-      cornerstoneViewportService.disableElement(viewportIndex);
+      const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+      if (!viewportInfo) {
+        return;
+      }
+      cleanUpServices(viewportInfo);
+      cornerstoneViewportService.storePresentation({
+        viewportId
+      });
       if (onElementDisabled) {
         onElementDisabled(viewportInfo);
       }
@@ -1223,19 +1230,26 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
   (0,react.useEffect)(() => {
     const {
       unsubscribe
-    } = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED, async invalidatedDisplaySetInstanceUID => {
-      const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(viewportIndex);
+    } = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED, async _ref => {
+      let {
+        displaySetInstanceUID: invalidatedDisplaySetInstanceUID,
+        invalidateData
+      } = _ref;
+      if (!invalidateData) {
+        return;
+      }
+      const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
       if (viewportInfo.hasDisplaySet(invalidatedDisplaySetInstanceUID)) {
         const viewportData = viewportInfo.getViewportData();
         const newViewportData = await cornerstoneCacheService.invalidateViewportData(viewportData, invalidatedDisplaySetInstanceUID, dataSource, displaySetService);
         const keepCamera = true;
-        cornerstoneViewportService.updateViewport(viewportIndex, newViewportData, keepCamera);
+        cornerstoneViewportService.updateViewport(viewportId, newViewportData, keepCamera);
       }
     });
     return () => {
       unsubscribe();
     };
-  }, [viewportIndex]);
+  }, [viewportId]);
   (0,react.useEffect)(() => {
     // handle the default viewportType to be stack
     if (!viewportOptions.viewportType) {
@@ -1259,13 +1273,23 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
         lutPresentation: lutPresentationStore[presentationIds?.lutPresentationId]
       };
       let measurement;
-      if (cacheJumpToMeasurementEvent?.viewportIndex === viewportIndex) {
+      if (cacheJumpToMeasurementEvent?.viewportId === viewportId) {
         measurement = cacheJumpToMeasurementEvent.measurement;
         // Delete the position presentation so that viewport navigates direct
         presentations.positionPresentation = null;
         cacheJumpToMeasurementEvent = null;
       }
-      cornerstoneViewportService.setViewportData(viewportIndex, viewportData, viewportOptions, displaySetOptions, presentations);
+
+      // Note: This is a hack to get the grid to re-render the OHIFCornerstoneViewport component
+      // Used for segmentation hydration right now, since the logic to decide whether
+      // a viewport needs to render a segmentation lives inside the CornerstoneViewportService
+      // so we need to re-render (force update via change of the needsRerendering) so that React
+      // does the diffing and decides we should render this again (although the id and element has not changed)
+      // so that the CornerstoneViewportService can decide whether to render the segmentation or not. Not that we reached here we can turn it off.
+      if (viewportOptions.needsRerendering) {
+        viewportOptions.needsRerendering = false;
+      }
+      cornerstoneViewportService.setViewportData(viewportId, viewportData, viewportOptions, displaySetOptions, presentations);
       if (measurement) {
         esm.annotation.selection.setAnnotationSelected(measurement.uid);
       }
@@ -1284,21 +1308,20 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
    * the cache for jumping to see if there is any jump queued, then we jump to the correct slice.
    */
   (0,react.useEffect)(() => {
-    const unsubscribeFromJumpToMeasurementEvents = _subscribeToJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportIndex, displaySets, viewportGridService, cornerstoneViewportService);
-    _checkForCachedJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportIndex, displaySets, viewportGridService, cornerstoneViewportService);
+    if (isJumpToMeasurementDisabled) {
+      return;
+    }
+    const unsubscribeFromJumpToMeasurementEvents = _subscribeToJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportId, displaySets, viewportGridService, cornerstoneViewportService);
+    _checkForCachedJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportId, displaySets, viewportGridService, cornerstoneViewportService);
     return () => {
       unsubscribeFromJumpToMeasurementEvents();
     };
-  }, [displaySets, elementRef, viewportIndex]);
+  }, [displaySets, elementRef, viewportId]);
   return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
     className: "viewport-wrapper"
   }, /*#__PURE__*/react.createElement(index_esm/* default */.ZP, {
-    handleWidth: true,
-    handleHeight: true,
-    skipOnMount: true // Todo: make these configurable
-    ,
-    refreshMode: 'debounce',
-    refreshRate: 200 // transition amount in side panel
+    refreshMode: "debounce",
+    refreshRate: 50 // Wait 50 ms after last move to render
     ,
     onResize: onResize,
     targetRef: elementRef.current
@@ -1312,26 +1335,18 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     onMouseDown: e => e.preventDefault(),
     ref: elementRef
   }), /*#__PURE__*/react.createElement(Overlays_CornerstoneOverlays, {
-    viewportIndex: viewportIndex,
+    viewportId: viewportId,
     toolBarService: toolbarService,
     element: elementRef.current,
     scrollbarHeight: scrollbarHeight,
     servicesManager: servicesManager
-  }), isCineEnabled && /*#__PURE__*/react.createElement(ui_src/* CinePlayer */.H6, {
-    className: "absolute left-1/2 -translate-x-1/2 bottom-3",
-    isPlaying: isPlaying,
-    onClose: handleCineClose,
-    onPlayPauseChange: isPlaying => cineService.setCine({
-      id: activeViewportIndex,
-      isPlaying
-    }),
-    onFrameRateChange: frameRate => cineService.setCine({
-      id: activeViewportIndex,
-      frameRate
-    })
+  }), /*#__PURE__*/react.createElement(components_CinePlayer, {
+    enabledVPElement: enabledVPElement,
+    viewportId: viewportId,
+    servicesManager: servicesManager
   })), /*#__PURE__*/react.createElement("div", {
     className: "absolute w-full"
-  }, viewportDialogState.viewportIndex === viewportIndex && /*#__PURE__*/react.createElement(ui_src/* Notification */.P_, {
+  }, viewportDialogState.viewportId === viewportId && /*#__PURE__*/react.createElement(ui_src/* Notification */.P_, {
     id: "viewport-notification",
     message: viewportDialogState.message,
     type: viewportDialogState.type,
@@ -1340,41 +1355,46 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     onOutsideClick: viewportDialogState.onOutsideClick
   })));
 }, areEqual);
-function _subscribeToJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportIndex, displaySets, viewportGridService, cornerstoneViewportService) {
-  const displaysUIDs = displaySets.map(displaySet => displaySet.displaySetInstanceUID);
+function _subscribeToJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportId, displaySets, viewportGridService, cornerstoneViewportService) {
   const {
     unsubscribe
   } = measurementService.subscribe(src.MeasurementService.EVENTS.JUMP_TO_MEASUREMENT_VIEWPORT, props => {
     cacheJumpToMeasurementEvent = props;
     const {
-      viewportIndex: jumpIndex,
+      viewportId: jumpId,
       measurement,
       isConsumed
     } = props;
-    if (!measurement || isConsumed) return;
+    if (!measurement || isConsumed) {
+      return;
+    }
     if (cacheJumpToMeasurementEvent.cornerstoneViewport === undefined) {
       // Decide on which viewport should handle this
-      cacheJumpToMeasurementEvent.cornerstoneViewport = cornerstoneViewportService.getViewportIndexToJump(jumpIndex, measurement.displaySetInstanceUID, {
+      cacheJumpToMeasurementEvent.cornerstoneViewport = cornerstoneViewportService.getViewportIdToJump(jumpId, measurement.displaySetInstanceUID, {
         referencedImageId: measurement.referencedImageId
       });
     }
-    if (cacheJumpToMeasurementEvent.cornerstoneViewport !== viewportIndex) {
+    if (cacheJumpToMeasurementEvent.cornerstoneViewport !== viewportId) {
       return;
     }
-    _jumpToMeasurement(measurement, elementRef, viewportIndex, measurementService, displaySetService, viewportGridService, cornerstoneViewportService);
+    _jumpToMeasurement(measurement, elementRef, viewportId, measurementService, displaySetService, viewportGridService, cornerstoneViewportService);
   });
   return unsubscribe;
 }
 
 // Check if there is a queued jumpToMeasurement event
-function _checkForCachedJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportIndex, displaySets, viewportGridService, cornerstoneViewportService) {
-  if (!cacheJumpToMeasurementEvent) return;
+function _checkForCachedJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportId, displaySets, viewportGridService, cornerstoneViewportService) {
+  if (!cacheJumpToMeasurementEvent) {
+    return;
+  }
   if (cacheJumpToMeasurementEvent.isConsumed) {
     cacheJumpToMeasurementEvent = null;
     return;
   }
   const displaysUIDs = displaySets.map(displaySet => displaySet.displaySetInstanceUID);
-  if (!displaysUIDs?.length) return;
+  if (!displaysUIDs?.length) {
+    return;
+  }
 
   // Jump to measurement if the measurement exists
   const {
@@ -1382,11 +1402,11 @@ function _checkForCachedJumpToMeasurementEvents(measurementService, displaySetSe
   } = cacheJumpToMeasurementEvent;
   if (measurement && elementRef) {
     if (displaysUIDs.includes(measurement?.displaySetInstanceUID)) {
-      _jumpToMeasurement(measurement, elementRef, viewportIndex, measurementService, displaySetService, viewportGridService, cornerstoneViewportService);
+      _jumpToMeasurement(measurement, elementRef, viewportId, measurementService, displaySetService, viewportGridService, cornerstoneViewportService);
     }
   }
 }
-function _jumpToMeasurement(measurement, targetElementRef, viewportIndex, measurementService, displaySetService, viewportGridService, cornerstoneViewportService) {
+function _jumpToMeasurement(measurement, targetElementRef, viewportId, measurementService, displaySetService, viewportGridService, cornerstoneViewportService) {
   const targetElement = targetElementRef.current;
   const {
     displaySetInstanceUID,
@@ -1403,9 +1423,8 @@ function _jumpToMeasurement(measurement, targetElementRef, viewportIndex, measur
   //  to set it properly
   // setCornerstoneMeasurementActive(measurement);
 
-  viewportGridService.setActiveViewportIndex(viewportIndex);
+  viewportGridService.setActiveViewportId(viewportId);
   const enabledElement = (0,dist_esm.getEnabledElement)(targetElement);
-  const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(viewportIndex);
   if (enabledElement) {
     // See how the jumpToSlice() of Cornerstone3D deals with imageIdx param.
     const viewport = enabledElement.viewport;
@@ -1451,14 +1470,17 @@ function _jumpToMeasurement(measurement, targetElementRef, viewportIndex, measur
 
 // Component displayName
 OHIFCornerstoneViewport.displayName = 'OHIFCornerstoneViewport';
+OHIFCornerstoneViewport.defaultProps = {
+  isJumpToMeasurementDisabled: false
+};
 OHIFCornerstoneViewport.propTypes = {
-  viewportIndex: (prop_types_default()).number.isRequired,
   displaySets: (prop_types_default()).array.isRequired,
   dataSource: (prop_types_default()).object.isRequired,
   viewportOptions: (prop_types_default()).object,
   displaySetOptions: prop_types_default().arrayOf((prop_types_default()).any),
   servicesManager: (prop_types_default()).object.isRequired,
   onElementEnabled: (prop_types_default()).func,
+  isJumpToMeasurementDisabled: (prop_types_default()).bool,
   // Note: you SHOULD NOT use the initialImageIdOrIndex for manipulation
   // of the imageData in the OHIFCornerstoneViewport. This prop is used
   // to set the initial state of the viewport's first image to render