@ohif/app 3.7.0-beta.62 → 3.7.0-beta.63

package/dist/{181.bundle.70c4340cbe29bd14aafc.js → 181.bundle.1accc89eac7f1b4bc752.js}

@@ -23,10 +23,10 @@ var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
 var esm = __webpack_require__(26925);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 337 modules
 var dist_esm = __webpack_require__(45754);
-// EXTERNAL MODULE: ../../core/src/index.ts + 106 modules
-var src = __webpack_require__(38930);
+// EXTERNAL MODULE: ../../core/src/index.ts + 107 modules
+var src = __webpack_require__(3854);
 // EXTERNAL MODULE: ../../ui/src/index.js + 458 modules
-var ui_src = __webpack_require__(33570);
+var ui_src = __webpack_require__(88344);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/state.ts
 var state = __webpack_require__(73704);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.css
@@ -41,7 +41,7 @@ var state = __webpack_require__(73704);
 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,
@@ -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,7 +628,7 @@ 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
@@ -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,7 +956,7 @@ function CornerstoneOverlays(props) {
     element: element,
     viewportData: viewportData,
     servicesManager: servicesManager,
-    viewportIndex: viewportIndex
+    viewportId: viewportId
   }));
 }
 /* harmony default export */ const Overlays_CornerstoneOverlays = (CornerstoneOverlays);
@@ -971,7 +969,7 @@ var getSOPInstanceAttributes = __webpack_require__(87172);
 function WrappedCinePlayer(_ref) {
   let {
     enabledVPElement,
-    viewportIndex,
+    viewportId,
     servicesManager
   } = _ref;
   const {
@@ -983,7 +981,7 @@ function WrappedCinePlayer(_ref) {
     cines
   }, cineService] = (0,ui_src/* useCine */.vQ)();
   const [{
-    activeViewportIndex
+    activeViewportId
   }] = (0,ui_src/* useViewportGrid */.O_)();
   const {
     component: CinePlayerComponent = ui_src/* CinePlayer */.H6
@@ -1001,10 +999,10 @@ function WrappedCinePlayer(_ref) {
     });
   };
   const cineHandler = () => {
-    if (!cines || !cines[viewportIndex] || !enabledVPElement) {
+    if (!cines || !cines[viewportId] || !enabledVPElement) {
       return;
     }
-    const cine = cines[viewportIndex];
+    const cine = cines[viewportId];
     const isPlaying = cine.isPlaying || false;
     const frameRate = cine.frameRate || 24;
     const validFrameRate = Math.max(frameRate, 1);
@@ -1020,35 +1018,35 @@ function WrappedCinePlayer(_ref) {
     dist_esm.eventTarget.addEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_NEW_STACK, cineHandler);
     return () => {
       cineService.setCine({
-        id: viewportIndex,
+        id: viewportId,
         isPlaying: false
       });
       dist_esm.eventTarget.removeEventListener(dist_esm.Enums.Events.STACK_VIEWPORT_NEW_STACK, cineHandler);
     };
   }, [enabledVPElement]);
   (0,react.useEffect)(() => {
-    if (!cines || !cines[viewportIndex] || !enabledVPElement) {
+    if (!cines || !cines[viewportId] || !enabledVPElement) {
       return;
     }
     cineHandler();
     return () => {
-      if (enabledVPElement && cines?.[viewportIndex]?.isPlaying) {
+      if (enabledVPElement && cines?.[viewportId]?.isPlaying) {
         cineService.stopClip(enabledVPElement);
       }
     };
-  }, [cines, viewportIndex, cineService, enabledVPElement, cineHandler]);
-  const cine = cines[viewportIndex];
+  }, [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 -translate-x-1/2 bottom-3",
+    className: "absolute left-1/2 bottom-3 -translate-x-1/2",
     isPlaying: isPlaying,
     onClose: handleCineClose,
     onPlayPauseChange: isPlaying => cineService.setCine({
-      id: activeViewportIndex,
+      id: activeViewportId,
       isPlaying
     }),
     onFrameRateChange: frameRate => cineService.setCine({
-      id: activeViewportIndex,
+      id: activeViewportId,
       frameRate
     })
   });
@@ -1093,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) {
@@ -1126,7 +1127,6 @@ 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,
@@ -1141,6 +1141,7 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     // 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 [enabledVPElement, setEnabledVPElement] = (0,react.useState)(null);
   const elementRef = (0,react.useRef)();
@@ -1169,17 +1170,12 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
       setImageScrollBarHeight();
     }
   }, [elementRef]);
-  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) {
@@ -1190,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();
@@ -1201,20 +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 () => {
-      commandsManager.runCommand('storePresentation', {
-        viewportIndex
+      const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+      if (!viewportInfo) {
+        return;
+      }
+      cleanUpServices(viewportInfo);
+      cornerstoneViewportService.storePresentation({
+        viewportId
       });
-      cleanUpServices();
-      const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(viewportIndex);
-      cornerstoneViewportService.disableElement(viewportIndex);
       if (onElementDisabled) {
         onElementDisabled(viewportInfo);
       }
@@ -1241,18 +1238,18 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
       if (!invalidateData) {
         return;
       }
-      const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(viewportIndex);
+      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) {
@@ -1276,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);
       }
@@ -1304,12 +1311,12 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     if (isJumpToMeasurementDisabled) {
       return;
     }
-    const unsubscribeFromJumpToMeasurementEvents = _subscribeToJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportIndex, displaySets, viewportGridService, cornerstoneViewportService);
-    _checkForCachedJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportIndex, displaySets, viewportGridService, cornerstoneViewportService);
+    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, {
@@ -1328,18 +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
   }), /*#__PURE__*/react.createElement(components_CinePlayer, {
     enabledVPElement: enabledVPElement,
-    viewportIndex: viewportIndex,
+    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,
@@ -1348,14 +1355,13 @@ 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;
@@ -1364,20 +1370,20 @@ function _subscribeToJumpToMeasurementEvents(measurementService, displaySetServi
     }
     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) {
+function _checkForCachedJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportId, displaySets, viewportGridService, cornerstoneViewportService) {
   if (!cacheJumpToMeasurementEvent) {
     return;
   }
@@ -1396,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,
@@ -1417,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;
@@ -1469,7 +1474,6 @@ 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,