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

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

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/TrackedMeasurementsContext.tsx

@@ -33,7 +33,7 @@ function TrackedMeasurementsContextProvider(
   const [appConfig] = useAppConfig();
 
   const [viewportGrid, viewportGridService] = useViewportGrid();
-  const { activeViewportIndex, viewports } = viewportGrid;
+  const { activeViewportId, viewports } = viewportGrid;
   const { measurementService, displaySetService } = servicesManager.services;
 
   const machineOptions = Object.assign({}, defaultOptions);
@@ -49,7 +49,7 @@ function TrackedMeasurementsContextProvider(
 
       console.log(
         'jumping to measurement reset viewport',
-        viewportGrid.activeViewportIndex,
+        viewportGrid.activeViewportId,
         trackedMeasurements[0]
       );
 
@@ -84,7 +84,7 @@ function TrackedMeasurementsContextProvider(
       }
 
       viewportGridService.setDisplaySetsForViewport({
-        viewportIndex: viewportGrid.activeViewportIndex,
+        viewportId: viewportGrid.activeViewportId,
         displaySetInstanceUIDs: [referencedDisplaySetUID],
         viewportOptions: {
           initialImageOptions: {
@@ -99,7 +99,7 @@ function TrackedMeasurementsContextProvider(
           evt.data.createdDisplaySetInstanceUIDs[0].displaySetInstanceUID;
 
         viewportGridService.setDisplaySetsForViewport({
-          viewportIndex: evt.data.viewportIndex,
+          viewportId: evt.data.viewportId,
           displaySetInstanceUIDs: [StructuredReportDisplaySetInstanceUID],
         });
       }
@@ -172,16 +172,14 @@ function TrackedMeasurementsContextProvider(
     machineOptions
   );
 
-  const [
-    trackedMeasurements,
-    sendTrackedMeasurementsEvent,
-    trackedMeasurementsService,
-  ] = useMachine(measurementTrackingMachine);
+  const [trackedMeasurements, sendTrackedMeasurementsEvent] = useMachine(
+    measurementTrackingMachine
+  );
 
   // ~~ Listen for changes to ViewportGrid for potential SRs hung in panes when idle
   useEffect(() => {
-    if (viewports.length > 0) {
-      const activeViewport = viewports[activeViewportIndex];
+    if (viewports.size > 0) {
+      const activeViewport = viewports.get(activeViewportId);
 
       if (!activeViewport || !activeViewport?.displaySetInstanceUIDs?.length) {
         return;
@@ -229,12 +227,12 @@ function TrackedMeasurementsContextProvider(
         sendTrackedMeasurementsEvent('PROMPT_HYDRATE_SR', {
           displaySetInstanceUID: displaySet.displaySetInstanceUID,
           SeriesInstanceUID: displaySet.SeriesInstanceUID,
-          viewportIndex: activeViewportIndex,
+          viewportId: activeViewportId,
         });
       }
     }
   }, [
-    activeViewportIndex,
+    activeViewportId,
     sendTrackedMeasurementsEvent,
     servicesManager.services,
     viewports,

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/hydrateStructuredReport.tsx

@@ -6,7 +6,7 @@ function hydrateStructuredReport(
   evt
 ) {
   const { displaySetService } = servicesManager.services;
-  const { viewportIndex, displaySetInstanceUID } = evt;
+  const { viewportId, displaySetInstanceUID } = evt;
   const srDisplaySet = displaySetService.getDisplaySetByUID(
     displaySetInstanceUID
   );
@@ -23,7 +23,7 @@ function hydrateStructuredReport(
     resolve({
       displaySetInstanceUID: evt.displaySetInstanceUID,
       srSeriesInstanceUID: srDisplaySet.SeriesInstanceUID,
-      viewportIndex,
+      viewportId,
       StudyInstanceUID,
       SeriesInstanceUIDs,
     });

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptBeginTracking.js

@@ -10,24 +10,24 @@ const RESPONSE = {
 
 function promptBeginTracking({ servicesManager, extensionManager }, ctx, evt) {
   const { uiViewportDialogService } = servicesManager.services;
-  const { viewportIndex, StudyInstanceUID, SeriesInstanceUID } = evt;
+  const { viewportId, StudyInstanceUID, SeriesInstanceUID } = evt;
 
   return new Promise(async function(resolve, reject) {
     let promptResult = await _askTrackMeasurements(
       uiViewportDialogService,
-      viewportIndex
+      viewportId
     );
 
     resolve({
       userResponse: promptResult,
       StudyInstanceUID,
       SeriesInstanceUID,
-      viewportIndex,
+      viewportId,
     });
   });
 }
 
-function _askTrackMeasurements(uiViewportDialogService, viewportIndex) {
+function _askTrackMeasurements(uiViewportDialogService, viewportId) {
   return new Promise(function(resolve, reject) {
     const message = 'Track measurements for this series?';
     const actions = [
@@ -56,7 +56,7 @@ function _askTrackMeasurements(uiViewportDialogService, viewportIndex) {
     };
 
     uiViewportDialogService.show({
-      viewportIndex,
+      viewportId,
       id: 'measurement-tracking-prompt-begin-tracking',
       type: 'info',
       message,

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptHydrateStructuredReport.js

@@ -20,15 +20,15 @@ function promptHydrateStructuredReport(
     uiViewportDialogService,
     displaySetService,
   } = servicesManager.services;
-  const { viewportIndex, displaySetInstanceUID } = evt;
+  const { viewportId, displaySetInstanceUID } = evt;
   const srDisplaySet = displaySetService.getDisplaySetByUID(
     displaySetInstanceUID
   );
 
-  return new Promise(async function (resolve, reject) {
+  return new Promise(async function(resolve, reject) {
     const promptResult = await _askTrackMeasurements(
       uiViewportDialogService,
-      viewportIndex
+      viewportId
     );
 
     // Need to do action here... So we can set state...
@@ -49,15 +49,15 @@ function promptHydrateStructuredReport(
       userResponse: promptResult,
       displaySetInstanceUID: evt.displaySetInstanceUID,
       srSeriesInstanceUID: srDisplaySet.SeriesInstanceUID,
-      viewportIndex,
+      viewportId,
       StudyInstanceUID,
       SeriesInstanceUIDs,
     });
   });
 }
 
-function _askTrackMeasurements(uiViewportDialogService, viewportIndex) {
-  return new Promise(function (resolve, reject) {
+function _askTrackMeasurements(uiViewportDialogService, viewportId) {
+  return new Promise(function(resolve, reject) {
     const message =
       'Do you want to continue tracking measurements for this study?';
     const actions = [
@@ -78,7 +78,7 @@ function _askTrackMeasurements(uiViewportDialogService, viewportIndex) {
     };
 
     uiViewportDialogService.show({
-      viewportIndex,
+      viewportId,
       type: 'info',
       message,
       actions,

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptSaveReport.js

@@ -13,10 +13,8 @@ function promptSaveReport(
     measurementService,
     displaySetService,
   } = servicesManager.services;
-  const viewportIndex =
-    evt.viewportIndex === undefined
-      ? evt.data.viewportIndex
-      : evt.viewportIndex;
+  const viewportId =
+    evt.viewportId === undefined ? evt.data.viewportId : evt.viewportId;
   const isBackupSave =
     evt.isBackupSave === undefined ? evt.data.isBackupSave : evt.isBackupSave;
   const StudyInstanceUID = evt?.data?.StudyInstanceUID;
@@ -66,7 +64,7 @@ function promptSaveReport(
       createdDisplaySetInstanceUIDs: displaySetInstanceUIDs,
       StudyInstanceUID,
       SeriesInstanceUID,
-      viewportIndex,
+      viewportId,
       isBackupSave,
     });
   });

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewSeries.js

@@ -11,17 +11,17 @@ const RESPONSE = {
 
 function promptTrackNewSeries({ servicesManager, extensionManager }, ctx, evt) {
   const { UIViewportDialogService } = servicesManager.services;
-  const { viewportIndex, StudyInstanceUID, SeriesInstanceUID } = evt;
+  const { viewportId, StudyInstanceUID, SeriesInstanceUID } = evt;
 
   return new Promise(async function(resolve, reject) {
     let promptResult = await _askShouldAddMeasurements(
       UIViewportDialogService,
-      viewportIndex
+      viewportId
     );
 
     if (promptResult === RESPONSE.CREATE_REPORT) {
       promptResult = ctx.isDirty
-        ? await _askSaveDiscardOrCancel(UIViewportDialogService, viewportIndex)
+        ? await _askSaveDiscardOrCancel(UIViewportDialogService, viewportId)
         : RESPONSE.SET_STUDY_AND_SERIES;
     }
 
@@ -29,13 +29,13 @@ function promptTrackNewSeries({ servicesManager, extensionManager }, ctx, evt) {
       userResponse: promptResult,
       StudyInstanceUID,
       SeriesInstanceUID,
-      viewportIndex,
+      viewportId,
       isBackupSave: false,
     });
   });
 }
 
-function _askShouldAddMeasurements(uiViewportDialogService, viewportIndex) {
+function _askShouldAddMeasurements(uiViewportDialogService, viewportId) {
   return new Promise(function(resolve, reject) {
     const message =
       'Do you want to add this measurement to the existing report?';
@@ -62,7 +62,7 @@ function _askShouldAddMeasurements(uiViewportDialogService, viewportIndex) {
     };
 
     uiViewportDialogService.show({
-      viewportIndex,
+      viewportId,
       type: 'info',
       message,
       actions,
@@ -75,7 +75,7 @@ function _askShouldAddMeasurements(uiViewportDialogService, viewportIndex) {
   });
 }
 
-function _askSaveDiscardOrCancel(UIViewportDialogService, viewportIndex) {
+function _askSaveDiscardOrCancel(UIViewportDialogService, viewportId) {
   return new Promise(function(resolve, reject) {
     const message =
       'You have existing tracked measurements. What would you like to do with your existing tracked measurements?';
@@ -98,7 +98,7 @@ function _askSaveDiscardOrCancel(UIViewportDialogService, viewportIndex) {
     };
 
     UIViewportDialogService.show({
-      viewportIndex,
+      viewportId,
       type: 'warning',
       message,
       actions,

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewStudy.js

@@ -9,17 +9,17 @@ const RESPONSE = {
 
 function promptTrackNewStudy({ servicesManager, extensionManager }, ctx, evt) {
   const { UIViewportDialogService } = servicesManager.services;
-  const { viewportIndex, StudyInstanceUID, SeriesInstanceUID } = evt;
+  const { viewportId, StudyInstanceUID, SeriesInstanceUID } = evt;
 
   return new Promise(async function(resolve, reject) {
     let promptResult = await _askTrackMeasurements(
       UIViewportDialogService,
-      viewportIndex
+      viewportId
     );
 
     if (promptResult === RESPONSE.SET_STUDY_AND_SERIES) {
       promptResult = ctx.isDirty
-        ? await _askSaveDiscardOrCancel(UIViewportDialogService, viewportIndex)
+        ? await _askSaveDiscardOrCancel(UIViewportDialogService, viewportId)
         : RESPONSE.SET_STUDY_AND_SERIES;
     }
 
@@ -27,13 +27,13 @@ function promptTrackNewStudy({ servicesManager, extensionManager }, ctx, evt) {
       userResponse: promptResult,
       StudyInstanceUID,
       SeriesInstanceUID,
-      viewportIndex,
+      viewportId,
       isBackupSave: false,
     });
   });
 }
 
-function _askTrackMeasurements(UIViewportDialogService, viewportIndex) {
+function _askTrackMeasurements(UIViewportDialogService, viewportId) {
   return new Promise(function(resolve, reject) {
     const message = 'Track measurements for this series?';
     const actions = [
@@ -55,7 +55,7 @@ function _askTrackMeasurements(UIViewportDialogService, viewportIndex) {
     };
 
     UIViewportDialogService.show({
-      viewportIndex,
+      viewportId,
       type: 'info',
       message,
       actions,
@@ -68,7 +68,7 @@ function _askTrackMeasurements(UIViewportDialogService, viewportIndex) {
   });
 }
 
-function _askSaveDiscardOrCancel(UIViewportDialogService, viewportIndex) {
+function _askSaveDiscardOrCancel(UIViewportDialogService, viewportId) {
   return new Promise(function(resolve, reject) {
     const message =
       'Measurements cannot span across multiple studies. Do you want to save your tracked measurements?';
@@ -91,7 +91,7 @@ function _askSaveDiscardOrCancel(UIViewportDialogService, viewportIndex) {
     };
 
     UIViewportDialogService.show({
-      viewportIndex,
+      viewportId,
       type: 'warning',
       message,
       actions,

extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.tsx

@@ -25,7 +25,7 @@ const DISPLAY_STUDY_SUMMARY_INITIAL_VALUE = {
 };
 
 function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
-  const [viewportGrid, viewportGridService] = useViewportGrid();
+  const [viewportGrid] = useViewportGrid();
   const [measurementChangeTimestamp, setMeasurementsUpdated] = useState(
     Date.now().toString()
   );
@@ -157,7 +157,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
   }
 
   const jumpToImage = ({ uid, isActive }) => {
-    measurementService.jumpToMeasurement(viewportGrid.activeViewportIndex, uid);
+    measurementService.jumpToMeasurement(viewportGrid.activeViewportId, uid);
 
     onMeasurementItemClickHandler({ uid, isActive });
   };
@@ -280,7 +280,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
           onExportClick={exportReport}
           onCreateReportClick={() => {
             sendTrackedMeasurementsEvent('SAVE_REPORT', {
-              viewportIndex: viewportGrid.activeViewportIndex,
+              viewportId: viewportGrid.activeViewportId,
               isBackupSave: true,
             });
           }}

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.tsx

@@ -40,7 +40,7 @@ function PanelStudyBrowserTracking({
   // Tabs --> Studies --> DisplaySets --> Thumbnails
   const { StudyInstanceUIDs } = useImageViewer();
   const [
-    { activeViewportIndex, viewports },
+    { activeViewportId, viewports },
     viewportGridService,
   ] = useViewportGrid();
   const [
@@ -58,10 +58,10 @@ function PanelStudyBrowserTracking({
 
   const onDoubleClickThumbnailHandler = displaySetInstanceUID => {
     let updatedViewports = [];
-    const viewportIndex = activeViewportIndex;
+    const viewportId = activeViewportId;
     try {
       updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
-        viewportIndex,
+        viewportId,
         displaySetInstanceUID
       );
     } catch (error) {
@@ -78,8 +78,8 @@ function PanelStudyBrowserTracking({
     viewportGridService.setDisplaySetsForViewports(updatedViewports);
   };
 
-  const activeViewportDisplaySetInstanceUIDs =
-    viewports[activeViewportIndex]?.displaySetInstanceUIDs;
+  const activeViewportDisplaySetInstanceUIDs = viewports.get(activeViewportId)
+    ?.displaySetInstanceUIDs;
 
   const { trackedSeries } = trackedMeasurements.context;
 
@@ -447,20 +447,19 @@ function _mapDisplaySets(
       const imageSrc = thumbnailImageSrcMap[ds.displaySetInstanceUID];
       const componentType = _getComponentType(ds);
       const numPanes = viewportGridService.getNumViewportPanes();
-      const viewportIdentificator =
-        numPanes === 1
-          ? []
-          : viewports.reduce((acc, viewportData, index) => {
-              if (
-                index < numPanes &&
-                viewportData?.displaySetInstanceUIDs?.includes(
-                  ds.displaySetInstanceUID
-                )
-              ) {
-                acc.push(viewportData.viewportLabel);
-              }
-              return acc;
-            }, []);
+      const viewportIdentificator = [];
+
+      if (numPanes !== 1) {
+        viewports.forEach(viewportData => {
+          if (
+            viewportData?.displaySetInstanceUIDs?.includes(
+              ds.displaySetInstanceUID
+            )
+          ) {
+            viewportIdentificator.push(viewportData.viewportLabel);
+          }
+        });
+      }
 
       const array =
         componentType === 'thumbnailTracked'

extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx

@@ -15,11 +15,10 @@ const { formatDate } = utils;
 function TrackedCornerstoneViewport(props) {
   const {
     displaySets,
-    viewportIndex,
+    viewportId,
     viewportLabel,
     servicesManager,
     extensionManager,
-    viewportOptions,
   } = props;
 
   const { t } = useTranslation('Common');
@@ -43,7 +42,6 @@ function TrackedCornerstoneViewport(props) {
   const [viewportElem, setViewportElem] = useState(null);
 
   const { trackedSeries } = trackedMeasurements.context;
-  const viewportId = viewportOptions.viewportId;
 
   const {
     SeriesDate,
@@ -64,8 +62,8 @@ function TrackedCornerstoneViewport(props) {
   } = displaySet.images[0];
 
   const updateIsTracked = useCallback(() => {
-    const viewport = cornerstoneViewportService.getCornerstoneViewportByIndex(
-      viewportIndex
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(
+      viewportId
     );
 
     if (viewport instanceof BaseVolumeViewport) {
@@ -84,7 +82,7 @@ function TrackedCornerstoneViewport(props) {
     if (trackedSeries.includes(SeriesInstanceUID) !== isTracked) {
       setIsTracked(!isTracked);
     }
-  }, [isTracked, trackedMeasurements, viewportIndex, SeriesInstanceUID]);
+  }, [isTracked, trackedMeasurements, viewportId, SeriesInstanceUID]);
 
   const onElementEnabled = useCallback(
     evt => {
@@ -113,7 +111,7 @@ function TrackedCornerstoneViewport(props) {
     const { unsubscribe } = cornerstoneViewportService.subscribe(
       cornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED,
       props => {
-        if (props.viewportIndex !== viewportIndex) {
+        if (props.viewportId !== viewportId) {
           return;
         }
 
@@ -124,7 +122,7 @@ function TrackedCornerstoneViewport(props) {
     return () => {
       unsubscribe();
     };
-  }, [updateIsTracked, viewportIndex]);
+  }, [updateIsTracked, viewportId]);
 
   useEffect(() => {
     if (isTracked) {
@@ -169,12 +167,12 @@ function TrackedCornerstoneViewport(props) {
     [added, addedRaw].forEach(evt => {
       subscriptions.push(
         measurementService.subscribe(evt, ({ source, measurement }) => {
-          const { activeViewportIndex } = viewportGridService.getState();
+          const { activeViewportId } = viewportGridService.getState();
 
           // Each TrackedCornerstoneViewport receives the MeasurementService's events.
           // Only send the tracked measurements event for the active viewport to avoid
           // sending it more than once.
-          if (viewportIndex === activeViewportIndex) {
+          if (viewportId === activeViewportId) {
             const {
               referenceStudyUID: StudyInstanceUID,
               referenceSeriesUID: SeriesInstanceUID,
@@ -182,7 +180,7 @@ function TrackedCornerstoneViewport(props) {
 
             sendTrackedMeasurementsEvent('SET_DIRTY', { SeriesInstanceUID });
             sendTrackedMeasurementsEvent('TRACK_SERIES', {
-              viewportIndex,
+              viewportId,
               StudyInstanceUID,
               SeriesInstanceUID,
             });
@@ -199,7 +197,7 @@ function TrackedCornerstoneViewport(props) {
   }, [
     measurementService,
     sendTrackedMeasurementsEvent,
-    viewportIndex,
+    viewportId,
     viewportGridService,
   ]);
 
@@ -217,10 +215,7 @@ function TrackedCornerstoneViewport(props) {
 
     setTrackedMeasurementUID(newTrackedMeasurementUID);
 
-    measurementService.jumpToMeasurement(
-      viewportIndex,
-      newTrackedMeasurementUID
-    );
+    measurementService.jumpToMeasurement(viewportId, newTrackedMeasurementUID);
   }
 
   const getCornerstoneViewport = () => {
@@ -280,7 +275,7 @@ function TrackedCornerstoneViewport(props) {
 
 TrackedCornerstoneViewport.propTypes = {
   displaySets: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,
-  viewportIndex: PropTypes.number.isRequired,
+  viewportId: PropTypes.string.isRequired,
   dataSource: PropTypes.object,
   children: PropTypes.node,
   customProps: PropTypes.object,
@@ -299,10 +294,10 @@ function _getNextMeasurementUID(
   const { measurementService, viewportGridService } = servicesManager.services;
   const measurements = measurementService.getMeasurements();
 
-  const { activeViewportIndex, viewports } = viewportGridService.getState();
+  const { activeViewportId, viewports } = viewportGridService.getState();
   const {
     displaySetInstanceUIDs: activeViewportDisplaySetInstanceUIDs,
-  } = viewports[activeViewportIndex];
+  } = viewports.get(activeViewportId);
 
   const { trackedSeries } = trackedMeasurements.context;