feat(grid): remove viewportIndex and only rely on viewportId (#3591)

Co-authored-by: Bill Wallace <wayfarer3130@gmail.com>

extensions/cornerstone-dicom-sr/src/viewports/OHIFCornerstoneSRViewport.tsx

@@ -21,7 +21,6 @@ function OHIFCornerstoneSRViewport(props) {
     children,
     dataSource,
     displaySets,
-    viewportIndex,
     viewportLabel,
     viewportOptions,
     servicesManager,
@@ -36,6 +35,8 @@ function OHIFCornerstoneSRViewport(props) {
     measurementService,
   } = servicesManager.services;
 
+  const viewportId = viewportOptions.viewportId;
+
   // SR viewport will always have a single display set
   if (displaySets.length > 1) {
     throw new Error('SR viewport should only have a single display set');
@@ -54,7 +55,7 @@ function OHIFCornerstoneSRViewport(props) {
     setReferencedDisplaySetMetadata,
   ] = useState(null);
   const [element, setElement] = useState(null);
-  const { viewports, activeViewportIndex } = viewportGrid;
+  const { viewports, activeViewportId } = viewportGrid;
 
   // Optional hook into tracking extension, if present.
   let trackedMeasurements;
@@ -88,7 +89,7 @@ function OHIFCornerstoneSRViewport(props) {
       if (displaySets.length) {
         viewportGridService.setDisplaySetsForViewports([
           {
-            viewportIndex: activeViewportIndex,
+            viewportId: activeViewportId,
             displaySetInstanceUIDs: [displaySets[0].displaySetInstanceUID],
           },
         ]);
@@ -163,12 +164,8 @@ function OHIFCornerstoneSRViewport(props) {
           // imageIdIndex will handle it by updating the viewport, but if they
           // are the same we just need to use measurementService to jump to the
           // new measurement
-          const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
-            viewportIndex
-          );
-
           const csViewport = cornerstoneViewportService.getCornerstoneViewport(
-            viewportInfo.getViewportId()
+            viewportId
           );
 
           const imageIds = csViewport.getImageIds();
@@ -183,7 +180,7 @@ function OHIFCornerstoneSRViewport(props) {
         }
       });
     },
-    [dataSource, srDisplaySet, activeImageDisplaySetData, viewportIndex]
+    [dataSource, srDisplaySet, activeImageDisplaySetData, viewportId]
   );
 
   const getCornerstoneViewport = useCallback(() => {
@@ -231,7 +228,7 @@ function OHIFCornerstoneSRViewport(props) {
         isJumpToMeasurementDisabled={true}
       ></Component>
     );
-  }, [activeImageDisplaySetData, viewportIndex, measurementSelected]);
+  }, [activeImageDisplaySetData, viewportId, measurementSelected]);
 
   const onMeasurementChange = useCallback(
     direction => {
@@ -269,12 +266,12 @@ function OHIFCornerstoneSRViewport(props) {
     const onDisplaySetsRemovedSubscription = displaySetService.subscribe(
       displaySetService.EVENTS.DISPLAY_SETS_REMOVED,
       ({ displaySetInstanceUIDs }) => {
-        const activeViewport = viewports[activeViewportIndex];
+        const activeViewport = viewports[activeViewportId];
         if (
           displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)
         ) {
           viewportGridService.setDisplaySetsForViewport({
-            viewportIndex: activeViewportIndex,
+            viewportId: activeViewportId,
             displaySetInstanceUIDs: [],
           });
         }
@@ -341,7 +338,7 @@ function OHIFCornerstoneSRViewport(props) {
       return (
         child &&
         React.cloneElement(child, {
-          viewportIndex,
+          viewportId,
           key: index,
         })
       );
@@ -373,7 +370,7 @@ function OHIFCornerstoneSRViewport(props) {
         getStatusComponent={() =>
           _getStatusComponent({
             srDisplaySet,
-            viewportIndex,
+            viewportId,
             isTracked: false,
             isRehydratable: srDisplaySet.isRehydratable,
             isLocked,
@@ -413,7 +410,7 @@ function OHIFCornerstoneSRViewport(props) {
 
 OHIFCornerstoneSRViewport.propTypes = {
   displaySets: PropTypes.arrayOf(PropTypes.object),
-  viewportIndex: PropTypes.number.isRequired,
+  viewportId: PropTypes.string.isRequired,
   dataSource: PropTypes.object,
   children: PropTypes.node,
   viewportLabel: PropTypes.string,
@@ -462,7 +459,7 @@ async function _getViewportReferencedDisplaySetData(
 
 function _getStatusComponent({
   srDisplaySet,
-  viewportIndex,
+  viewportId,
   isRehydratable,
   isLocked,
   sendTrackedMeasurementsEvent,
@@ -470,7 +467,7 @@ function _getStatusComponent({
   const handleMouseUp = () => {
     sendTrackedMeasurementsEvent('HYDRATE_SR', {
       displaySetInstanceUID: srDisplaySet.displaySetInstanceUID,
-      viewportIndex,
+      viewportId,
     });
   };