feat(multimonitor): Add simple multi-monitor support to open another study(#4178)

extensions/default/src/getCustomizationModule.tsx

@@ -5,6 +5,15 @@ 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';
+import {
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuPortal,
+  DropdownMenuSubContent,
+  DropdownMenuItem,
+  Icons,
+} from '@ohif/ui-next';
 
 const formatDate = utils.formatDate;
 
@@ -47,7 +56,74 @@ export default function getCustomizationModule({ servicesManager, extensionManag
         ],
       },
     },
-
+    {
+      name: 'multimonitor',
+      merge: 'Append',
+      value: {
+        id: 'studyBrowser.studyMenuItems',
+        customizationType: 'ohif.menuContent',
+        value: [
+          {
+            id: 'applyHangingProtocol',
+            label: 'Apply Hanging Protocol',
+            iconName: 'ViewportViews',
+            items: [
+              {
+                id: 'applyDefaultProtocol',
+                label: 'Default',
+                commands: [
+                  'loadStudy',
+                  {
+                    commandName: 'setHangingProtocol',
+                    commandOptions: {
+                      protocolId: 'default',
+                    },
+                  },
+                ],
+              },
+              {
+                id: 'applyMPRProtocol',
+                label: '2x2 Grid',
+                commands: [
+                  'loadStudy',
+                  {
+                    commandName: 'setHangingProtocol',
+                    commandOptions: {
+                      protocolId: '@ohif/mnGrid',
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: 'showInOtherMonitor',
+            label: 'Launch On Second Monitor',
+            iconName: 'DicomTagBrowser',
+            // we should use evaluator for this, as these are basically toolbar buttons
+            selector: ({ servicesManager }) => {
+              const { multiMonitorService } = servicesManager.services;
+              return multiMonitorService.isMultimonitor;
+            },
+            commands: {
+              commandName: 'multimonitor',
+              commandOptions: {
+                hashParams: '&hangingProtocolId=@ohif/mnGrid8',
+                commands: [
+                  'loadStudy',
+                  {
+                    commandName: 'setHangingProtocol',
+                    commandOptions: {
+                      protocolId: '@ohif/mnGrid8',
+                    },
+                  },
+                ],
+              },
+            },
+          },
+        ],
+      },
+    },
     {
       name: 'default',
       value: [
@@ -117,7 +193,6 @@ export default function getCustomizationModule({ servicesManager, extensionManag
             );
           },
         },
-
         {
           id: 'ohif.contextMenu',
 
@@ -140,6 +215,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
@@ -200,6 +276,69 @@ export default function getCustomizationModule({ servicesManager, extensionManag
             },
           ],
         },
+        {
+          id: 'studyBrowser.thumbnailMenuItems',
+          value: [
+            {
+              id: 'tagBrowser',
+              label: 'Tag Browser',
+              iconName: 'DicomTagBrowser',
+              commands: 'openDICOMTagViewer',
+            },
+          ],
+        },
+        {
+          id: 'ohif.menuContent',
+          content: function (props) {
+            const { item, commandsManager, servicesManager, ...rest } = props;
+
+            // If item has sub-items, render a submenu
+            if (item.items) {
+              return (
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger className="gap-[6px]">
+                    {item.iconName && (
+                      <Icons.ByName
+                        name={item.iconName}
+                        className="-ml-1"
+                      />
+                    )}
+                    {item.label}
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                    <DropdownMenuSubContent>
+                      {item.items.map(subItem => this.content({ ...props, item: subItem }))}
+                    </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+                </DropdownMenuSub>
+              );
+            }
+
+            // Regular menu item
+            const isDisabled = item.selector && !item.selector({ servicesManager });
+
+            return (
+              <DropdownMenuItem
+                disabled={isDisabled}
+                onSelect={() => {
+                  commandsManager.runAsync(item.commands, {
+                    ...item.commandOptions,
+                    ...rest,
+                  });
+                }}
+                className="gap-[6px]"
+              >
+                {item.iconName && (
+                  <Icons.ByName
+                    name={item.iconName}
+                    className="-ml-1"
+                  />
+                )}
+                {item.label}
+              </DropdownMenuItem>
+            );
+          },
+        },
       ],
     },
   ];