fix(cine): Resolve Cine Player Faults on DisplaySet Update (#4909)

extensions/cornerstone-dicom-sr/src/commandsModule.ts

@@ -41,7 +41,7 @@ const _generateReport = (measurementData, additionalFindingTypes, options = {})
 };
 
 const commandsModule = (props: withAppTypes) => {
-  const { servicesManager, extensionManager } = props;
+  const { servicesManager, extensionManager, commandsManager } = props;
   const { customizationService, viewportGridService, displaySetService } = servicesManager.services;
 
   const actions = {
@@ -156,12 +156,14 @@ const commandsModule = (props: withAppTypes) => {
 
       const displaySets = displaySetService.getDisplaySetsForSeries(SeriesInstanceUIDs[0]);
       if (displaySets.length) {
-        viewportGridService.setDisplaySetsForViewports([
-          {
-            viewportId: viewportGridService.getActiveViewportId(),
-            displaySetInstanceUIDs: [displaySets[0].displaySetInstanceUID],
-          },
-        ]);
+        commandsManager.run('setDisplaySetsForViewports', {
+          viewportsToUpdate: [
+            {
+              viewportId: viewportGridService.getActiveViewportId(),
+              displaySetInstanceUIDs: [displaySets[0].displaySetInstanceUID],
+            },
+          ],
+        });
       }
     },
   };

extensions/cornerstone-dynamic-volume/src/commandsModule.ts

@@ -263,7 +263,7 @@ const commandsModule = ({ commandsManager, servicesManager }: withAppTypes) => {
         }
       }
 
-      viewportGridService.setDisplaySetsForViewports(viewportsToUpdate);
+      commandsManager.run('setDisplaySetsForViewports', { viewportsToUpdate });
     },
     swapComputedWithDynamicDisplaySet: () => {
       // Todo: this assumes there is only one dynamic display set in the viewer
@@ -313,7 +313,7 @@ const commandsModule = ({ commandsManager, servicesManager }: withAppTypes) => {
         }
       }
 
-      viewportGridService.setDisplaySetsForViewports(viewportsToUpdate);
+      commandsManager.run('setDisplaySetsForViewports', { viewportsToUpdate });
     },
     createNewLabelMapForDynamicVolume: async ({ label }) => {
       const { viewports, activeViewportId } = viewportGridService.getState();

extensions/cornerstone/src/commandsModule.ts

@@ -581,7 +581,6 @@ function commandsModule({
       });
       viewport.render();
     },
-
     toggleViewportColorbar: ({ viewportId, displaySetInstanceUIDs, options = {} }) => {
       const hasColorbar = colorbarService.hasColorbar(viewportId);
       if (hasColorbar) {
@@ -590,7 +589,6 @@ function commandsModule({
       }
       colorbarService.addColorbar(viewportId, displaySetInstanceUIDs, options);
     },
-
     setWindowLevel(props) {
       const { toolGroupId } = props;
       const { viewportId } = _getActiveViewportEnabledElement();
@@ -1536,6 +1534,22 @@ function commandsModule({
         measurementService.remove(activeAnnotationUID);
       });
     },
+    setDisplaySetsForViewports: ({ viewportsToUpdate }) => {
+      const { cineService, viewportGridService } = servicesManager.services;
+      // Stopping the cine of modified viewports before changing the viewports to
+      // avoid inconsistent state and lost references
+      viewportsToUpdate.forEach(viewport => {
+        const state = cineService.getState();
+        const currentCineState = state.cines?.[viewport.viewportId];
+        cineService.setCine({
+          id: viewport.viewportId,
+          frameRate: currentCineState?.frameRate ?? state.default?.frameRate ?? 24,
+          isPlaying: false,
+        });
+      });
+
+      viewportGridService.setDisplaySetsForViewports(viewportsToUpdate);
+    },
     undo: () => {
       DefaultHistoryMemo.undo();
     },
@@ -1987,6 +2001,7 @@ function commandsModule({
     deleteActiveAnnotation: {
       commandFn: actions.deleteActiveAnnotation,
     },
+    setDisplaySetsForViewports: actions.setDisplaySetsForViewports,
     undo: actions.undo,
     redo: actions.redo,
     interpolateLabelmap: actions.interpolateLabelmap,

extensions/default/src/commandsModule.ts

@@ -622,7 +622,7 @@ const commandsModule = ({
         });
       }
 
-      viewportGridService.setDisplaySetsForViewports(updatedViewports);
+      commandsManager.run('setDisplaySetsForViewports', { viewportsToUpdate: updatedViewports });
 
       setTimeout(() => actions.scrollActiveThumbnailIntoView(), 0);
     },

extensions/default/src/customizations/studyBrowserCustomization.ts

@@ -46,10 +46,9 @@ export default {
   'studyBrowser.studyMode': 'all',
   'studyBrowser.thumbnailDoubleClickCallback': {
     callbacks: [
-      ({ activeViewportId, servicesManager, isHangingProtocolLayout }) =>
+      ({ activeViewportId, servicesManager, commandsManager, isHangingProtocolLayout }) =>
         async displaySetInstanceUID => {
-          const { hangingProtocolService, viewportGridService, uiNotificationService } =
-            servicesManager.services;
+          const { hangingProtocolService, uiNotificationService } = servicesManager.services;
           let updatedViewports = [];
           const viewportId = activeViewportId;
 
@@ -69,7 +68,9 @@ export default {
             });
           }
 
-          viewportGridService.setDisplaySetsForViewports(updatedViewports);
+          commandsManager.run('setDisplaySetsForViewports', {
+            viewportsToUpdate: updatedViewports,
+          });
         },
     ],
   },