feat: Add simple multi-monitor support

.webpack/webpack.base.js

@@ -218,6 +218,7 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
     config.optimization.minimizer = [
       new TerserJSPlugin({
         parallel: true,
+        exclude: /app-config.js/,
         terserOptions: {},
       }),
     ];

extensions/default/src/CustomizableContextMenu/ContextMenuController.tsx

@@ -47,6 +47,10 @@ export default class ContextMenuController {
     }
 
     const { event, subMenu, menuId, menus, selectorProps } = contextMenuProps;
+    if (!menus) {
+      console.warn('No menus found for', menuId);
+      return;
+    }
 
     const annotationManager = CsAnnotation.state.getAnnotationManager();
     const { locking } = CsAnnotation;
@@ -75,7 +79,7 @@ export default class ContextMenuController {
       preventCutOf: true,
       defaultPosition: ContextMenuController._getDefaultPosition(
         defaultPointsPosition,
-        event?.detail,
+        event?.detail || event,
         viewportElement
       ),
       event,
@@ -91,7 +95,7 @@ export default class ContextMenuController {
         menus,
         event,
         subMenu,
-        eventData: event?.detail,
+        eventData: event?.detail || event,
 
         onClose: () => {
           this.services.uiDialogService.dismiss({ id: 'context-menu' });
@@ -138,8 +142,8 @@ export default class ContextMenuController {
   };
 
   static _getEventDefaultPosition = eventDetail => ({
-    x: eventDetail && eventDetail.currentPoints.client[0],
-    y: eventDetail && eventDetail.currentPoints.client[1],
+    x: eventDetail?.currentPoints?.client[0] ?? eventDetail?.pageX,
+    y: eventDetail?.currentPoints?.client[1] ?? eventDetail?.pageY,
   });
 
   static _getElementDefaultPosition = element => {

extensions/default/src/Panels/WrappedPanelStudyBrowser.tsx

@@ -13,10 +13,10 @@ import requestDisplaySetCreationForStudy from './requestDisplaySetCreationForStu
  * @param {object} commandsManager
  * @param {object} extensionManager
  */
-function WrappedPanelStudyBrowser({ commandsManager, extensionManager, servicesManager }) {
+function WrappedPanelStudyBrowser({ extensionManager, servicesManager }) {
   // TODO: This should be made available a different way; route should have
   // already determined our datasource
-  const dataSource = extensionManager.getDataSources()[0];
+  const [dataSource] = extensionManager.getActiveDataSource();
   const _getStudiesForPatientByMRN = getStudiesForPatientByMRN.bind(null, dataSource);
   const _getImageSrcFromImageId = useCallback(
     _createGetImageSrcFromImageIdFn(extensionManager),

extensions/default/src/Panels/requestDisplaySetCreationForStudy.js

@@ -13,7 +13,7 @@ function requestDisplaySetCreationForStudy(
     return;
   }
 
-  dataSource.retrieve.series.metadata({ StudyInstanceUID, madeInClient });
+  return dataSource.retrieve.series.metadata({ StudyInstanceUID, madeInClient });
 }
 
 export default requestDisplaySetCreationForStudy;

extensions/default/src/ViewerLayout/ViewerHeader.tsx

@@ -10,6 +10,7 @@ import { hotkeys } from '@ohif/core';
 import { Toolbar } from '../Toolbar/Toolbar';
 import HeaderPatientInfo from './HeaderPatientInfo';
 import { PatientInfoVisibility } from './HeaderPatientInfo/HeaderPatientInfo';
+import { preserveQueryParameters, publicUrl } from '@ohif/app';
 
 const { availableLanguages, defaultLanguage, currentLanguage } = i18n;
 
@@ -25,8 +26,6 @@ function ViewerHeader({
   const onClickReturnButton = () => {
     const { pathname } = location;
     const dataSourceIdx = pathname.indexOf('/', 1);
-    const query = new URLSearchParams(window.location.search);
-    const configUrl = query.get('configUrl');
 
     const dataSourceName = pathname.substring(dataSourceIdx + 1);
     const existingDataSource = extensionManager.getDataSources(dataSourceName);
@@ -35,13 +34,10 @@ function ViewerHeader({
     if (dataSourceIdx !== -1 && existingDataSource) {
       searchQuery.append('datasources', pathname.substring(dataSourceIdx + 1));
     }
-
-    if (configUrl) {
-      searchQuery.append('configUrl', configUrl);
-    }
+    preserveQueryParameters(searchQuery);
 
     navigate({
-      pathname: '/',
+      pathname: publicUrl,
       search: decodeURIComponent(searchQuery.toString()),
     });
   };

extensions/default/src/commandsModule.ts

@@ -1,4 +1,4 @@
-import { Types } from '@ohif/core';
+import { Types, DicomMetadataStore } from '@ohif/core';
 
 import { ContextMenuController, defaultContextMenu } from './CustomizableContextMenu';
 import DicomTagBrowser from './DicomTagBrowser/DicomTagBrowser';
@@ -16,6 +16,7 @@ import { useHangingProtocolStageIndexStore } from './stores/useHangingProtocolSt
 import { useToggleHangingProtocolStore } from './stores/useToggleHangingProtocolStore';
 import { useViewportsByPositionStore } from './stores/useViewportsByPositionStore';
 import { useToggleOneUpViewportGridStore } from './stores/useToggleOneUpViewportGridStore';
+import requestDisplaySetCreationForStudy from './Panels/requestDisplaySetCreationForStudy';
 
 export type HangingProtocolParams = {
   protocolId?: string;
@@ -25,6 +26,26 @@ export type HangingProtocolParams = {
   reset?: false;
 };
 
+/**
+ * The studies from display sets gets the studies in study date
+ * order or in study instance UID order - not very useful, but
+ * if not specifically specified then at least making it consistent is useful.
+ */
+const getStudiesfromDisplaySets = displaySets => {
+  const studyMap = {};
+
+  const ret = displaySets.reduce((prev, curr) => {
+    const { StudyInstanceUID } = curr;
+    if (!studyMap[StudyInstanceUID]) {
+      const study = DicomMetadataStore.getStudy(StudyInstanceUID);
+      studyMap[StudyInstanceUID] = study;
+      prev.push(study);
+    }
+    return prev;
+  }, []);
+  return ret;
+};
+
 export type UpdateViewportDisplaySetParams = {
   direction: number;
   excludeNonImageModalities?: boolean;
@@ -33,6 +54,7 @@ export type UpdateViewportDisplaySetParams = {
 const commandsModule = ({
   servicesManager,
   commandsManager,
+  extensionManager,
 }: Types.Extensions.ExtensionParams): Types.Extensions.CommandsModule => {
   const {
     customizationService,
@@ -41,12 +63,46 @@ const commandsModule = ({
     uiNotificationService,
     viewportGridService,
     displaySetService,
+    multiMonitorService,
   } = servicesManager.services;
 
   // Define a context menu controller for use with any context menus
   const contextMenuController = new ContextMenuController(servicesManager, commandsManager);
 
   const actions = {
+    /**
+     * Runs a command in multi-monitor mode.  No-op if not multi-monitor.
+     */
+    multimonitor: async options => {
+      const { commands, screenDelta, studyInstanceUID } = options;
+      if (multiMonitorService.numberOfScreens < 2) {
+        return options.fallback?.(options);
+      }
+
+      await multiMonitorService.launchWindow(studyInstanceUID, screenDelta, options);
+      if (commands) {
+        multiMonitorService.run(screenDelta, commands, options);
+      }
+    },
+
+    /**
+     * Ensures that the specified study is available for display
+     * Then, if commands is specified, runs the given commands list/instance
+     */
+    loadStudy: async options => {
+      const { studyInstanceUID, commands } = options;
+      if (hangingProtocolService.hasStudyUID(studyInstanceUID)) {
+        return commands && commandsManager.run(commands, options);
+      }
+      const [dataSource] = extensionManager.getActiveDataSource();
+      await requestDisplaySetCreationForStudy(dataSource, displaySetService, studyInstanceUID);
+      const activeStudy = DicomMetadataStore.getStudy(studyInstanceUID);
+      hangingProtocolService.addStudy(activeStudy);
+      const displaySets = displaySetService.getActiveDisplaySets();
+      hangingProtocolService.setDisplaySets(displaySets);
+      return commands && commandsManager.run(commands, options);
+    },
+
     /**
      * Show the context menu.
      * @param options.menuId defines the menu name to lookup, from customizationService
@@ -141,6 +197,7 @@ const commandsModule = ({
       reset = false,
     }: HangingProtocolParams): boolean => {
       try {
+        console.log('******** Set hanging protocol', activeStudyUID);
         // Stores in the state the display set selector id to displaySetUID mapping
         // Pass in viewportId for the active viewport.  This item will get set as
         // the activeViewportId
@@ -169,18 +226,27 @@ const commandsModule = ({
             stageIndex,
           });
 
-        if (activeStudyUID) {
-          hangingProtocolService.setActiveStudyUID(activeStudyUID);
-        }
+        const activeStudyChanged = hangingProtocolService.setActiveStudyUID(activeStudyUID);
 
-        const storedHanging = `${hangingProtocolService.getState().activeStudyUID}:${protocolId}:${
+        const storedHanging = `${activeStudyUID || hangingProtocolService.getState().activeStudyUID}:${protocolId}:${
           useStageIdx || 0
         }`;
 
         const { viewportGridState } = useViewportGridStore.getState();
         const restoreProtocol = !reset && viewportGridState[storedHanging];
 
         if (
+          reset ||
+          (activeStudyChanged &&
+            !viewportGridState[storedHanging] &&
+            stageIndex === undefined &&
+            stageId === undefined)
+        ) {
+          // Run the hanging protocol fresh, re-using the existing study data
+          // This is done on reset or when the study changes and we haven't yet
+          // applied it, and don't specify exact stage to use.
+          hangingProtocolService.run({ activeStudyUID }, protocolId);
+        } else if (
           protocolId === hpInfo.protocolId &&
           useStageIdx === hpInfo.stageIndex &&
           !activeStudyUID
@@ -562,6 +628,12 @@ const commandsModule = ({
   };
 
   const definitions = {
+    multimonitor: {
+      commandFn: actions.multimonitor,
+    },
+    loadStudy: {
+      commandFn: actions.loadStudy,
+    },
     showContextMenu: {
       commandFn: actions.showContextMenu,
     },

extensions/default/src/customizations/studyBrowserContextMenu.ts

@@ -0,0 +1,81 @@
+export const studyBrowserContextMenu = {
+  id: 'StudyBrowser.studyContextMenu',
+  customizationType: 'ohif.contextMenu',
+  menus: [
+    {
+      id: 'studyBrowserContextMenu',
+      // selector restricts context menu to when there is nearbyToolData
+      items: [
+        {
+          label: 'Show in Grid',
+          commands: {
+            commandName: 'loadStudy',
+            commandOptions: {
+              commands: {
+                commandName: 'setHangingProtocol',
+                commandOptions: {
+                  protocolId: '@ohif/mnGrid8',
+                },
+              },
+            },
+          },
+        },
+        {
+          label: 'Show in other monitor',
+          selector: ({ isMultimonitor }) => isMultimonitor,
+          commands: {
+            commandName: 'multimonitor',
+            commandOptions: {
+              commands: {
+                commandName: 'loadStudy',
+                commandOptions: {
+                  commands: {
+                    commandName: 'setHangingProtocol',
+                    commandOptions: {
+                      protocolId: '@ohif/mnGrid8',
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+        {
+          label: 'Compare All',
+          selector: ({ isMultimonitor }) => isMultimonitor,
+          commands: [
+            {
+              commandName: 'loadStudy',
+              commandOptions: {
+                commands: {
+                  commandName: 'setHangingProtocol',
+                  commandOptions: {
+                    protocolId: '@ohif/mnGrid',
+                  },
+                },
+              },
+            },
+            {
+              commandName: 'multimonitor',
+              commandOptions: {
+                commands: {
+                  commandName: 'loadStudy',
+                  commandOptions: {
+                    commands: {
+                      commandName: 'setHangingProtocol',
+                      commandOptions: {
+                        protocolId: '@ohif/mnGridMonitor2',
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export default studyBrowserContextMenu;

extensions/default/src/getCustomizationModule.tsx

@@ -5,6 +5,7 @@ import { ProgressDropdownWithService } from './Components/ProgressDropdownWithSe
 import DataSourceConfigurationComponent from './Components/DataSourceConfigurationComponent';
 import { GoogleCloudDataSourceConfigurationAPI } from './DataSourceConfigurationAPI/GoogleCloudDataSourceConfigurationAPI';
 import { utils } from '@ohif/core';
+import studyBrowserContextMenu from './customizations/studyBrowserContextMenu';
 
 const formatDate = utils.formatDate;
 
@@ -140,6 +141,7 @@ export default function getCustomizationModule({ servicesManager, extensionManag
             return clonedObject;
           },
         },
+        studyBrowserContextMenu,
 
         {
           // the generic GUI component to configure a data source using an instance of a BaseDataSourceConfigurationAPI

extensions/default/src/getHangingProtocolModule.js

@@ -1,4 +1,4 @@
-import hpMNGrid from './hangingprotocols/hpMNGrid';
+import { hpMN, hpMN8, hpMNMonitor2 } from './hangingprotocols/hpMNGrid';
 import hpMNCompare from './hangingprotocols/hpCompare';
 import hpMammography from './hangingprotocols/hpMammo';
 import hpScale from './hangingprotocols/hpScale';
@@ -142,8 +142,16 @@ function getHangingProtocolModule() {
     },
     // Create a MxN hanging protocol available by default
     {
-      name: hpMNGrid.id,
-      protocol: hpMNGrid,
+      name: hpMN.id,
+      protocol: hpMN,
+    },
+    {
+      name: hpMN8.id,
+      protocol: hpMN8,
+    },
+    {
+      name: hpMNMonitor2.id,
+      protocol: hpMNMonitor2,
     },
   ];
 }