fix(ViewportGrid) fill blank viewports with display sets not yet in grid. (#3154)

* fix(ViewportGrid): In ViewportGrid, fill blank viewports with display sets not yet in grid.
ViewportGridService now allows off-screen viewports to remain so that
so as to maintain continuity if they were filled by the UI/user.

* PR feedback: moved getNumViewportPanes into the ViewportGridService API.

* PR feedback:
- renamed some variables
- proper import/export of IDisplaySet
- added some comments for clarification
- fixed broken e2e tests

* Some missed rename of Services.

platform/viewer/src/components/ViewportGrid.tsx

@@ -54,20 +54,35 @@ function ViewerViewportGrid(props) {
         return;
       }
 
-      // Match each viewport individually
-      const numViewports = viewportGrid.numRows * viewportGrid.numCols;
+      const gridDisplaySetUIDs = [];
+      const blankViewportIndices = [];
+
+      // Match each viewport individually.
+      const numViewports = viewportGridService.getNumViewportPanes();
+
       for (
         let viewportIndex = 0;
         viewportIndex < numViewports;
         viewportIndex++
       ) {
+        const viewportDisplaySetUIDs =
+          viewports[viewportIndex]?.displaySetInstanceUIDs ?? [];
+
         if (hpAlreadyApplied.get(viewportIndex)) {
+          gridDisplaySetUIDs.push(...viewportDisplaySetUIDs);
           continue;
         }
 
         // if current viewport doesn't have a match
         if (viewportMatchDetails.get(viewportIndex) === undefined) {
-          return;
+          // if the current viewport is empty/blank
+          if (viewportDisplaySetUIDs.length === 0) {
+            blankViewportIndices.push(viewportIndex);
+          } else {
+            gridDisplaySetUIDs.push(...viewportDisplaySetUIDs);
+          }
+
+          continue;
         }
 
         const { displaySetsInfo, viewportOptions } = viewportMatchDetails.get(
@@ -87,6 +102,8 @@ function ViewerViewportGrid(props) {
           }
         );
 
+        gridDisplaySetUIDs.push(...displaySetUIDsToHang);
+
         viewportGridService.setDisplaySetsForViewport({
           viewportIndex: viewportIndex,
           displaySetInstanceUIDs: displaySetUIDsToHang,
@@ -111,6 +128,25 @@ function ViewerViewportGrid(props) {
           );
         }
       }
+
+      blankViewportIndices.forEach((blankVPIndex: number) => {
+        // try to fill the empty viewport with a display set not already in the grid
+        const displaySetsNotInGrid = availableDisplaySets.filter(
+          displaySet =>
+            gridDisplaySetUIDs.indexOf(displaySet.displaySetInstanceUID) === -1
+        );
+
+        if (displaySetsNotInGrid.length > 0) {
+          const displaySetUIDToAdd =
+            displaySetsNotInGrid[0].displaySetInstanceUID;
+          gridDisplaySetUIDs.push(displaySetUIDToAdd);
+
+          viewportGridService.setDisplaySetsForViewport({
+            viewportIndex: blankVPIndex,
+            displaySetInstanceUIDs: [displaySetUIDToAdd],
+          });
+        }
+      });
     },
     [viewportGrid, numRows, numCols]
   );
@@ -178,6 +214,20 @@ function ViewerViewportGrid(props) {
     };
   }, [viewports]);
 
+  useEffect(() => {
+    const { unsubscribe } = hangingProtocolService.subscribe(
+      hangingProtocolService.EVENTS.STAGE_CHANGE,
+      () => {
+        const displaySets = DisplaySetService.getActiveDisplaySets();
+        updateDisplaySetsForViewports(displaySets);
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [viewports]);
+
   useEffect(() => {
     const { unsubscribe } = measurementService.subscribe(
       measurementService.EVENTS.JUMP_TO_MEASUREMENT,
@@ -314,7 +364,8 @@ function ViewerViewportGrid(props) {
   const getViewportPanes = useCallback(() => {
     const viewportPanes = [];
 
-    for (let i = 0; i < viewports.length; i++) {
+    const numViewports = viewportGridService.getNumViewportPanes();
+    for (let i = 0; i < numViewports; i++) {
       const viewportIndex = i;
       const isActive = activeViewportIndex === viewportIndex;
       const paneMetadata = viewports[i] || {};
@@ -388,7 +439,7 @@ function ViewerViewportGrid(props) {
             <ViewportComponent
               displaySets={displaySets}
               viewportIndex={viewportIndex}
-              viewportLabel={viewports.length > 1 ? viewportLabel : ''}
+              viewportLabel={numViewports > 1 ? viewportLabel : ''}
               dataSource={dataSource}
               viewportOptions={viewportOptions}
               displaySetOptions={displaySetOptions}