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

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

extensions/default/src/Panels/PanelMeasurementTable.tsx

@@ -25,7 +25,7 @@ export default function PanelMeasurementTable({
   extensionManager,
 }): React.FunctionComponent {
   const [viewportGrid, viewportGridService] = useViewportGrid();
-  const { activeViewportIndex, viewports } = viewportGrid;
+  const { activeViewportId, viewports } = viewportGrid;
   const {
     measurementService,
     uiDialogService,
@@ -80,7 +80,7 @@ export default function PanelMeasurementTable({
 
   async function createReport(): Promise<any> {
     // filter measurements that are added to the active study
-    const activeViewport = viewports[activeViewportIndex];
+    const activeViewport = viewports.get(activeViewportId);
     const measurements = measurementService.getMeasurements();
     const displaySet = displaySetService.getDisplaySetByUID(
       activeViewport.displaySetInstanceUIDs[0]
@@ -133,7 +133,7 @@ export default function PanelMeasurementTable({
   }
 
   const jumpToImage = ({ uid, isActive }) => {
-    measurementService.jumpToMeasurement(viewportGrid.activeViewportIndex, uid);
+    measurementService.jumpToMeasurement(viewportGrid.activeViewportId, uid);
 
     onMeasurementItemClickHandler({ uid, isActive });
   };

extensions/default/src/Panels/PanelStudyBrowser.tsx

@@ -29,7 +29,7 @@ function PanelStudyBrowser({
   // Tabs --> Studies --> DisplaySets --> Thumbnails
   const { StudyInstanceUIDs } = useImageViewer();
   const [
-    { activeViewportIndex, viewports },
+    { activeViewportId, viewports },
     viewportGridService,
   ] = useViewportGrid();
   const [activeTabName, setActiveTabName] = useState('primary');
@@ -43,10 +43,10 @@ function PanelStudyBrowser({
 
   const onDoubleClickThumbnailHandler = displaySetInstanceUID => {
     let updatedViewports = [];
-    const viewportIndex = activeViewportIndex;
+    const viewportId = activeViewportId;
     try {
       updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
-        viewportIndex,
+        viewportId,
         displaySetInstanceUID
       );
     } catch (error) {
@@ -262,8 +262,8 @@ function PanelStudyBrowser({
     }
   }
 
-  const activeDisplaySetInstanceUIDs =
-    viewports[activeViewportIndex]?.displaySetInstanceUIDs;
+  const activeDisplaySetInstanceUIDs = viewports.get(activeViewportId)
+    ?.displaySetInstanceUIDs;
 
   return (
     <StudyBrowser

extensions/default/src/commandsModule.ts

@@ -261,17 +261,17 @@ const commandsModule = ({
         ];
         stateSyncService.store(stateSyncReduce);
         // This is a default action applied
-        actions.toggleHpTools(hangingProtocolService.getActiveProtocol());
+        const { protocol } = hangingProtocolService.getActiveProtocol();
+        actions.toggleHpTools(protocol);
         // Send the notification about updating the state
         if (protocolId !== hpInfo.protocolId) {
-          const { protocol } = hangingProtocolService.getActiveProtocol();
           // The old protocol callbacks are used for turning off things
           // like crosshairs when moving to the new HP
           commandsManager.run(oldProtocol.callbacks?.onProtocolExit);
           // The new protocol callback is used for things like
           // activating modes etc.
-          commandsManager.run(protocol.callbacks?.onProtocolEnter);
         }
+        commandsManager.run(protocol.callbacks?.onProtocolEnter);
         return true;
       } catch (e) {
         actions.toggleHpTools(hangingProtocolService.getActiveProtocol());
@@ -394,12 +394,12 @@ const commandsModule = ({
 
     toggleOneUp() {
       const viewportGridState = viewportGridService.getState();
-      const { activeViewportIndex, viewports, layout } = viewportGridState;
+      const { activeViewportId, viewports, layout } = viewportGridState;
       const {
         displaySetInstanceUIDs,
         displaySetOptions,
         viewportOptions,
-      } = viewports[activeViewportIndex];
+      } = viewports.get(activeViewportId);
 
       if (layout.numCols === 1 && layout.numRows === 1) {
         // The viewer is in one-up. Check if there is a state to restore/toggle back to.
@@ -410,20 +410,16 @@ const commandsModule = ({
         }
         // There is a state to toggle back to. The viewport that was
         // originally toggled to one up was the former active viewport.
-        const viewportIndexToUpdate =
-          toggleOneUpViewportGridStore.activeViewportIndex;
+        const viewportIdToUpdate =
+          toggleOneUpViewportGridStore.activeViewportId;
 
-        // Determine which viewports need to be updated. This is particularly
-        // important when MPR is toggled to one up and a different reconstructable
-        // is swapped in. Note that currently HangingProtocolService.getViewportsRequireUpdate
-        // does not support viewport with multiple display sets.
-        const updatedViewports =
+        const updatedViewportsViaHP =
           displaySetInstanceUIDs.length > 1
             ? []
             : displaySetInstanceUIDs
                 .map(displaySetInstanceUID =>
                   hangingProtocolService.getViewportsRequireUpdate(
-                    viewportIndexToUpdate,
+                    viewportIdToUpdate,
                     displaySetInstanceUID
                   )
                 )
@@ -432,14 +428,37 @@ const commandsModule = ({
         // This findOrCreateViewport returns either one of the updatedViewports
         // returned from the HP service OR if there is not one from the HP service then
         // simply returns what was in the previous state.
-        const findOrCreateViewport = (viewportIndex: number) => {
-          const viewport = updatedViewports.find(
-            viewport => viewport.viewportIndex === viewportIndex
-          );
+        const findOrCreateViewport = (position: number) => {
+          // get the viewportId in the current state (since we are in the one-up layout)
+          const currentOneUpViewport = Array.from(viewports.values())[0];
 
-          return viewport
-            ? { viewportOptions, displaySetOptions, ...viewport }
-            : toggleOneUpViewportGridStore.viewports[viewportIndex];
+          // we should restore the previous layout but take into the account the fact that
+          // the current one up viewport might have a new displaySet dragged and dropped on it
+          // so we should prioritize the current one in the old grid store layout viewports
+
+          const newViewports = Array.from(
+            toggleOneUpViewportGridStore.viewports.values()
+          ).map(viewport => {
+            if (viewport.viewportId === currentOneUpViewport.viewportId) {
+              return {
+                ...currentOneUpViewport,
+              };
+            }
+
+            return viewport;
+          });
+
+          // However, we also need to take into account that the current one up viewport
+          // might have been part of a bigger hanging protocol layout, so going back
+          // from one up we should apply those viewports as well.
+          return updatedViewportsViaHP.length > 1 &&
+            updatedViewportsViaHP[position]
+            ? {
+                viewportOptions,
+                displaySetOptions,
+                ...updatedViewportsViaHP[position],
+              }
+            : newViewports[position];
         };
 
         const layoutOptions = viewportGridService.getLayoutOptionsFromState(
@@ -450,7 +469,7 @@ const commandsModule = ({
         viewportGridService.setLayout({
           numRows: toggleOneUpViewportGridStore.layout.numRows,
           numCols: toggleOneUpViewportGridStore.layout.numCols,
-          activeViewportIndex: viewportIndexToUpdate,
+          activeViewportId: viewportIdToUpdate,
           layoutOptions,
           findOrCreateViewport,
         });
@@ -520,8 +539,8 @@ const commandsModule = ({
     },
 
     openDICOMTagViewer() {
-      const { activeViewportIndex, viewports } = viewportGridService.getState();
-      const activeViewportSpecificData = viewports[activeViewportIndex];
+      const { activeViewportId, viewports } = viewportGridService.getState();
+      const activeViewportSpecificData = viewports.get(activeViewportId);
       const { displaySetInstanceUIDs } = activeViewportSpecificData;
 
       const displaySets = displaySetService.activeDisplaySets;
@@ -552,17 +571,9 @@ const commandsModule = ({
     },
 
     scrollActiveThumbnailIntoView: () => {
-      const { activeViewportIndex, viewports } = viewportGridService.getState();
+      const { activeViewportId, viewports } = viewportGridService.getState();
 
-      if (
-        !viewports ||
-        activeViewportIndex < 0 ||
-        activeViewportIndex > viewports.length - 1
-      ) {
-        return;
-      }
-
-      const activeViewport = viewports[activeViewportIndex];
+      const activeViewport = viewports.get(activeViewportId);
       const activeDisplaySetInstanceUID =
         activeViewport.displaySetInstanceUIDs[0];
 
@@ -615,9 +626,9 @@ const commandsModule = ({
 
       currentDisplaySets.sort(dsSortFn);
 
-      const { activeViewportIndex, viewports } = viewportGridService.getState();
+      const { activeViewportId, viewports } = viewportGridService.getState();
 
-      const { displaySetInstanceUIDs } = viewports[activeViewportIndex];
+      const { displaySetInstanceUIDs } = viewports.get(activeViewportId);
 
       const activeDisplaySetIndex = currentDisplaySets.findIndex(displaySet =>
         displaySetInstanceUIDs.includes(displaySet.displaySetInstanceUID)
@@ -656,7 +667,7 @@ const commandsModule = ({
 
       try {
         updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
-          activeViewportIndex,
+          activeViewportId,
           displaySetInstanceUID
         );
       } catch (error) {

extensions/default/src/findViewportsByPosition.ts

@@ -1,4 +1,4 @@
-import { StateSyncService, Types } from '@ohif/core';
+import { StateSyncService } from '@ohif/core';
 
 /**
  * This find or create viewport is paired with the reduce results from
@@ -7,7 +7,7 @@ import { StateSyncService, Types } from '@ohif/core';
  * then one can be re-used from the display set if it isn't going to be displayed.
  * @param hangingProtocolService - bound parameter supplied before using this
  * @param viewportsByPosition - bound parameter supplied before using this
- * @param viewportIndex - the index to retrieve
+ * @param position - the position in the grid to retrieve
  * @param positionId - the current position on screen to retrieve
  * @param options - the set of options used, so that subsequent calls can
  *                  store state that is reset by the setLayout.
@@ -17,7 +17,7 @@ import { StateSyncService, Types } from '@ohif/core';
 export const findOrCreateViewport = (
   hangingProtocolService,
   viewportsByPosition,
-  viewportIndex: number,
+  position: number,
   positionId: string,
   options: Record<string, unknown>
 ) => {
@@ -74,24 +74,19 @@ const findViewportsByPosition = (
   const viewportsByPosition = { ...syncState.viewportsByPosition };
   const initialInDisplay = [];
 
-  for (const viewport of viewports) {
+  viewports.forEach(viewport => {
     if (viewport.positionId) {
       const storedViewport = {
         ...viewport,
         viewportOptions: { ...viewport.viewportOptions },
       };
       viewportsByPosition[viewport.positionId] = storedViewport;
-      // The cache doesn't store the viewport options - it is only useful
-      // for remembering the type of viewport and UIDs
-      delete storedViewport.viewportId;
-      delete storedViewport.viewportOptions.viewportId;
     }
-  }
+  });
 
   for (let row = 0; row < numRows; row++) {
     for (let col = 0; col < numCols; col++) {
-      const pos = col + row * numCols;
-      const positionId = viewports?.[pos]?.positionId || `${col}-${row}`;
+      const positionId = `${col}-${row}`;
       const viewport = viewportsByPosition[positionId];
       if (viewport?.displaySetInstanceUIDs) {
         initialInDisplay.push(...viewport.displaySetInstanceUIDs);

extensions/default/src/getHangingProtocolModule.js

@@ -73,6 +73,7 @@ const defaultProtocol = {
         {
           viewportOptions: {
             viewportType: 'stack',
+            viewportId: 'default',
             toolGroupId: 'default',
             // This will specify the initial image options index if it matches in the URL
             // and will otherwise not specify anything.

extensions/default/src/utils/reuseCachedLayouts.ts

@@ -19,22 +19,24 @@ const reuseCachedLayout = (
   hangingProtocolService: HangingProtocolService,
   syncService: StateSyncService
 ): ReturnType => {
-  const { activeViewportIndex, viewports, layout } = state;
+  const { activeViewportId } = state;
+  const { protocol } = hangingProtocolService.getActiveProtocol();
   const hpInfo = hangingProtocolService.getState();
   const { protocolId, stageIndex, activeStudyUID } = hpInfo;
-  const { protocol } = hangingProtocolService.getActiveProtocol();
+
+  const syncState = syncService.getState();
+  const viewportGridStore = { ...syncState.viewportGridStore };
+  const displaySetSelectorMap = { ...syncState.displaySetSelectorMap };
+
   const stage = protocol.stages[stageIndex];
   const storeId = `${activeStudyUID}:${protocolId}:${stageIndex}`;
-  const syncState = syncService.getState();
   const cacheId = `${activeStudyUID}:${protocolId}`;
-  const viewportGridStore = { ...syncState.viewportGridStore };
   const hangingProtocolStageIndexMap = {
     ...syncState.hangingProtocolStageIndexMap,
   };
-  const displaySetSelectorMap = { ...syncState.displaySetSelectorMap };
   const { rows, columns } = stage.viewportStructure.properties;
   const custom =
-    stage.viewports.length !== state.viewports.length ||
+    stage.viewports.length !== state.viewports.size ||
     state.layout.numRows !== rows ||
     state.layout.numCols !== columns;
 
@@ -44,18 +46,17 @@ const reuseCachedLayout = (
     viewportGridStore[storeId] = { ...state };
   }
 
-  for (let idx = 0; idx < state.viewports.length; idx++) {
-    const viewport = state.viewports[idx];
+  state.viewports.forEach((viewport, viewportId) => {
     const { displaySetOptions, displaySetInstanceUIDs } = viewport;
     if (!displaySetOptions) {
-      continue;
+      return;
     }
     for (let i = 0; i < displaySetOptions.length; i++) {
       const displaySetUID = displaySetInstanceUIDs[i];
       if (!displaySetUID) {
         continue;
       }
-      if (idx === activeViewportIndex && i === 0) {
+      if (viewportId === activeViewportId && i === 0) {
         displaySetSelectorMap[
           `${activeStudyUID}:activeDisplaySet:0`
         ] = displaySetUID;
@@ -67,7 +68,7 @@ const reuseCachedLayout = (
         ] = displaySetUID;
       }
     }
-  }
+  });
 
   return {
     hangingProtocolStageIndexMap,