Skip to content

Conversation

@dan-rukas
Copy link
Member

@dan-rukas dan-rukas commented Dec 10, 2025

Context

Introduces DialogContextMenu, a new context menu component in ui-next that replaces the legacy ContextMenu from platform/ui. This component is designed to work with OHIF's UIDialogService and provides modern submenu support using Floating UI.

Changes & Results

  • Renders context menus for viewport interactions (e.g., right-click on measurements)
  • Supports nested submenus that appear inline on hover
  • Automatically repositions submenus when near viewport edges
  • Matches ui-next styling (consistent with Radix UI components)

Differences from legacy ui

The legacy ContextMenu component had limitations:

  • No built-in submenu support
  • Submenus required a "close and reopen" hack (jarring UX)
  • Styling inconsistent with ui-next components
Screen.Recording.2025-12-10.at.10.08.38.AM.mp4

How it works with OHIF

User right-clicks measurement
        ↓
ContextMenuController.showContextMenu()
        ↓
Builds menu items via ContextMenuItemsBuilder
        ↓
Gets DialogContextMenu via customizationService.getCustomization('ui.contextMenu')
        ↓
Shows via UIDialogService.show({ content: DialogContextMenu, contentProps: { items, menus, ... } })
        ↓
DialogContextMenu renders at click position

Floating UI integration

Submenus use Floating UI for intelligent positioning:

  • offset(4) - Adds 4px gap between parent menu and submenu
  • flip() - Flips submenu to opposite side if no room (right → left)
  • shift() - Shifts submenu along axis to stay in viewport

This ensures submenus are always visible regardless of where the user clicks.

Key changes

File Change
DialogContextMenu.tsx New component with Floating UI submenu support
ContextMenuController.tsx Commented out legacy onShowSubMenu callback (no longer needed)
contextMenuUICustomization.ts Registers DialogContextMenu as 'ui.contextMenu'

Testing

  • Right-click on measurement → menu appears at click position
  • Hover over submenu item → submenu appears inline
  • Click near screen edge → submenu flips/shifts to stay visible
  • Click menu item → action executes, menu closes

Checklist

PR

  • My Pull Request title is descriptive, accurate and follows the
    semantic-release format and guidelines.

Code

  • My code has been well-documented (function documentation, inline comments,
    etc.)

Public Documentation Updates

  • [] The documentation page has been updated as necessary for any public API
    additions or removals.

Tested Environment

  • OS: macOS Sequoia 15.7.1 (24G231), Apple M4 Pro
  • Node version: 20.19.1
  • Browser: Chrome 143.0.7499.41 (Official Build) (arm64)

@netlify
Copy link

netlify bot commented Dec 10, 2025

Deploy Preview for ohif-dev canceled.

Name Link
🔨 Latest commit 2dd0c8b
🔍 Latest deploy log https://app.netlify.com/projects/ohif-dev/deploys/69398e1f17ccf60008e98397


export default {
'ui.contextMenu': ContextMenu,
'ui.contextMenu': DialogContextMenu,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you please reach out to Bill about adding a customization to retain the old context menu for the next version? We could call this ui-next.contextMenu to keep it separate, and then remove ui.contextMenu later on.

defaultPointsPosition
);
},
// NOTE: onShowSubMenu removed - DialogContextMenu handles submenus inline
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should check which customization is used, either if old one (ui.context-menu) keep this if the new one (default for us) not use this piece of code

Copy link
Member

@sedghi sedghi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please see my comments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants