study item dropdown menu customizations

extensions/cornerstone/src/panels/PanelMeasurement.tsx

@@ -1,15 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { utils } from '@ohif/core';
-import { useViewportGrid } from '@ohif/ui-next';
 import { MeasurementTable } from '@ohif/ui-next';
 import debounce from 'lodash.debounce';
 import { useMeasurements } from '../hooks/useMeasurements';
 
-const {
-  filterAdditionalFindings: filterAdditionalFinding,
-  filterOr,
-  filterAny,
-} = utils.MeasurementFilters;
+const { filterAdditionalFindings: filterAdditionalFinding, filterAny } = utils.MeasurementFilters;
 
 export type withAppAndFilters = withAppTypes & {
   measurementFilter: (item) => boolean;

extensions/default/src/Components/MoreDropdownMenu.tsx

@@ -0,0 +1,86 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  Icons,
+  Button,
+} from '@ohif/ui-next';
+
+/**
+ * The default sub-menu appearance and setup is defined here, but this can be
+ * replaced by
+ */
+const getMenuItemsDefault = ({ commandsManager, items, servicesManager, ...props }) => {
+  const { customizationService } = servicesManager.services;
+
+  // This allows replacing the default child item for menus, whereas the entire
+  // getMenuItems can also be replaced by providing it to the MoreDropdownMenu
+  const menuContent = customizationService.getCustomization('ohif.menuContent');
+
+  return (
+    <DropdownMenuContent
+      hideWhenDetached
+      align="start"
+      onClick={e => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+    >
+      {items?.map(item =>
+        menuContent.content({
+          key: item.id,
+          item,
+          commandsManager,
+          servicesManager,
+          ...props,
+        })
+      )}
+    </DropdownMenuContent>
+  );
+};
+
+/**
+ * The component provides a ... sub-menu for various components which appears
+ * on hover over the main component.
+ *
+ * @param bindProps - properties to define the sub-menu
+ * @returns Component bound to the bindProps
+ */
+export default function MoreDropdownMenu(bindProps) {
+  const {
+    menuItemsKey,
+    getMenuItems = getMenuItemsDefault,
+    commandsManager,
+    servicesManager,
+  } = bindProps;
+  const { customizationService } = servicesManager.services;
+
+  const items = customizationService.getCustomization(menuItemsKey)?.value;
+
+  function BoundMoreDropdownMenu(props) {
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="hidden group-hover:inline-flex data-[state=open]:inline-flex"
+            onClick={e => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+          >
+            <Icons.More />
+          </Button>
+        </DropdownMenuTrigger>
+        {getMenuItems({
+          ...props,
+          commandsManager: commandsManager,
+          servicesManager: servicesManager,
+          items,
+        })}
+      </DropdownMenu>
+    );
+  }
+  return BoundMoreDropdownMenu;
+}

extensions/default/src/CustomizableContextMenu/ContextMenuController.tsx

@@ -54,13 +54,13 @@ export default class ContextMenuController {
 
     const { locking, visibility } = CsAnnotation;
     const targetAnnotationId = selectorProps?.nearbyToolData?.annotationUID as string;
+
     if (targetAnnotationId) {
-      const isLocked = locking.isAnnotationLocked(
-        annotationManager.getAnnotation(targetAnnotationId)
-      );
+      const isLocked = locking.isAnnotationLocked(targetAnnotationId);
+      const isVisible = visibility.isAnnotationVisible(targetAnnotationId);
 
-      if (isLocked) {
-        console.warn('Annotation is locked.');
+      if (isLocked || !isVisible) {
+        console.warn(`Annotation is ${isLocked ? 'locked' : 'not visible'}.`);
         return;
       }
     }

extensions/default/src/Panels/StudyBrowser/PanelStudyBrowser.tsx

@@ -7,6 +7,14 @@ import { useNavigate } from 'react-router-dom';
 import { Separator } from '@ohif/ui-next';
 import { PanelStudyBrowserHeader } from './PanelStudyBrowserHeader';
 import { defaultActionIcons, defaultViewPresets } from './constants';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  Icons,
+  Button,
+} from '@ohif/ui-next';
+import MoreDropdownMenu from '../../Components/MoreDropdownMenu';
 
 const { sortStudyInstances, formatDate, createStudyBrowserTabs } = utils;
 
@@ -280,10 +288,6 @@ function PanelStudyBrowser({
 
   const activeDisplaySetInstanceUIDs = viewports.get(activeViewportId)?.displaySetInstanceUIDs;
 
-  const onThumbnailContextMenu = (commandName, options) => {
-    commandsManager.runCommand(commandName, options);
-  };
-
   return (
     <>
       <>
@@ -304,16 +308,26 @@ function PanelStudyBrowser({
         tabs={tabs}
         servicesManager={servicesManager}
         activeTabName={activeTabName}
-        onDoubleClickThumbnail={onDoubleClickThumbnailHandler}
-        activeDisplaySetInstanceUIDs={activeDisplaySetInstanceUIDs}
         expandedStudyInstanceUIDs={expandedStudyInstanceUIDs}
         onClickStudy={_handleStudyClick}
         onClickTab={clickedTabName => {
           setActiveTabName(clickedTabName);
         }}
+        onClickThumbnail={() => {}}
+        onDoubleClickThumbnail={onDoubleClickThumbnailHandler}
+        activeDisplaySetInstanceUIDs={activeDisplaySetInstanceUIDs}
         showSettings={actionIcons.find(icon => icon.id === 'settings').value}
         viewPresets={viewPresets}
-        onThumbnailContextMenu={onThumbnailContextMenu}
+        ThumbnailMenuItems={MoreDropdownMenu({
+          commandsManager,
+          servicesManager,
+          menuItemsKey: 'studyBrowser.thumbnailMenuItems',
+        })}
+        StudyMenuItems={MoreDropdownMenu({
+          commandsManager,
+          servicesManager,
+          menuItemsKey: 'studyBrowser.studyMenuItems',
+        })}
       />
     </>
   );

extensions/default/src/getCustomizationModule.tsx

@@ -6,6 +6,14 @@ import DataSourceConfigurationComponent from './Components/DataSourceConfigurati
 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;
 
@@ -202,6 +210,133 @@ 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>
+            );
+          },
+        },
+        {
+          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',
+                      },
+                    },
+                  ],
+                },
+              },
+            },
+          ],
+        },
       ],
     },
   ];

extensions/default/src/index.ts

@@ -37,6 +37,7 @@ import promptLabelAnnotation from './utils/promptLabelAnnotation';
 import usePatientInfo from './hooks/usePatientInfo';
 import { PanelStudyBrowserHeader } from './Panels/StudyBrowser/PanelStudyBrowserHeader';
 import * as utils from './utils';
+import MoreDropdownMenu from './Components/MoreDropdownMenu';
 
 const defaultExtension: Types.Extensions.Extension = {
   /**
@@ -102,4 +103,5 @@ export {
   usePatientInfo,
   PanelStudyBrowserHeader,
   utils,
+  MoreDropdownMenu,
 };