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.

extensions/cornerstone/src/utils/mpr/toggleMPRHangingProtocol.ts

@@ -59,6 +59,13 @@ export default function toggleMPRHangingProtocol({
     viewports[activeViewportIndex].displaySetInstanceUIDs;
 
   const errorCallback = error => {
+    // Unable to create MPR, so be sure to return to the cached/original protocol.
+    hangingProtocolService.setProtocol(
+      cachedState.protocol.id,
+      viewportMatchDetails,
+      restoreErrorCallback
+    );
+
     uiNotificationService.show({
       title: 'Multiplanar reconstruction (MPR) ',
       message:
@@ -276,13 +283,17 @@ function _getViewportsInfo({ protocol, stage, viewports, servicesManager }) {
     .filter(Boolean);
 
   if (viewportIds.length) {
-    toolOptions = viewportIds.map(viewportId => {
-      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
-      return {
-        toolGroupId: toolGroup.id,
-        toolOptions: toolGroup.toolOptions,
-      };
-    });
+    toolOptions = viewportIds
+      .map(viewportId => {
+        const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+        return toolGroup
+          ? {
+              toolGroupId: toolGroup.id,
+              toolOptions: toolGroup.toolOptions,
+            }
+          : null;
+      })
+      .filter(Boolean);
   }
 
   return { viewportMatchDetails, viewportStructure, toolOptions };

extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx

@@ -79,7 +79,15 @@ function LayoutSelector({
         ],
       });
     }
-    viewportGridService.setLayout({ numRows, numCols });
+
+    // When a new layout is selected, keep any extra/offscreen viewports
+    // so that if any of those viewports were populated via the UI then they
+    // will be maintained in case those viewports are redisplayed later.
+    viewportGridService.setLayout({
+      numRows,
+      numCols,
+      keepExtraViewports: true,
+    });
   };
 
   return (

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

@@ -182,7 +182,7 @@ function PanelStudyBrowserTracking({
       thumbnailImageSrcMap,
       trackedSeries,
       viewports,
-      isSingleViewport,
+      viewportGridService,
       dataSource,
       displaySetService,
       uiDialogService,
@@ -245,7 +245,7 @@ function PanelStudyBrowserTracking({
           thumbnailImageSrcMap,
           trackedSeries,
           viewports,
-          isSingleViewport,
+          viewportGridService,
           dataSource,
           displaySetService,
           uiDialogService,
@@ -412,7 +412,7 @@ function _mapDisplaySets(
   thumbnailImageSrcMap,
   trackedSeriesInstanceUIDs,
   viewports, // TODO: make array of `displaySetInstanceUIDs`?
-  isSingleViewport,
+  viewportGridService,
   dataSource,
   displaySetService,
   uiDialogService,
@@ -423,18 +423,21 @@ function _mapDisplaySets(
   displaySets.forEach(ds => {
     const imageSrc = thumbnailImageSrcMap[ds.displaySetInstanceUID];
     const componentType = _getComponentType(ds.Modality);
-    const viewportIdentificator = isSingleViewport
-      ? []
-      : viewports.reduce((acc, viewportData, index) => {
-          if (
-            viewportData?.displaySetInstanceUIDs?.includes(
-              ds.displaySetInstanceUID
-            )
-          ) {
-            acc.push(viewportData.viewportLabel);
-          }
-          return acc;
-        }, []);
+    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 array =
       componentType === 'thumbnailTracked'