viewport-action-menu
Key Changes:
- Deprecated
ViewportActionCornersService: TheViewportActionCornersServiceand its associated provider (ViewportActionCornersProvider) have been removed. UI elements previously managed by this service are now typically handled by dedicated components integrated via theToolbarService. - New Centralized UI Components:
ModalityLoadBadge: A new component in@ohif/extension-cornerstonethat displays the status (e.g., SEG/RT/SR loaded or requiring hydration) and a "LOAD" button for secondary display sets (SEG, RTSTRUCT, SR). This replaces the inline status and load logic within individual viewport components likeOHIFCornerstoneSEGViewportandOHIFCornerstoneRTViewport.TrackingStatus: A new component in@ohif/extension-cornerstoneto indicate if measurements in a viewport are being tracked. This replaces inline tracking status indicators previously inOHIFCornerstoneSRMeasurementViewportandTrackedCornerstoneViewport.NavigationComponent: A new component in@ohif/extension-cornerstonethat provides navigation arrows (e.g., for segments in SEG/RT or measurements in SR/tracked series). This replaces theViewportActionArrowspreviously instantiated directly within viewport components.
- Viewport Simplification: Viewport components like
OHIFCornerstoneSEGViewport,OHIFCornerstoneRTViewport, andOHIFCornerstoneSRMeasurementViewporthave been simplified. They no longer manage their own status indicators, load buttons, or navigation arrows. They now primarily delegate rendering toOHIFCornerstoneViewport. - Refactored Hydration Prompts: Utility functions like
promptHydrateSEGandpromptHydrateRTnow use a centralizedutils.promptHydrationDialogfrom@ohif/extension-cornerstone. - Centralized Hydration Command: A new command
hydrateSecondaryDisplaySethas been added to@ohif/extension-cornerstoneto handle the hydration logic for SEG, RTSTRUCT, and SR display sets. - New Hooks: Several new hooks have been introduced in
@ohif/extension-cornerstone(e.g.,useViewportDisplaySets,useMeasurementTracking,useViewportSegmentations,useViewportHover) to provide data and state for these new UI components.
Migration Steps:
-
Remove
ViewportActionCornersServiceUsage:- If you were using
ViewportActionCornersServiceto add custom components to viewport corners, you will need to refactor this. The recommended approach is to define these components as toolbar buttons and place them in designated viewport action menu sections (e.g.,viewportActionMenu.topLeft) using theToolbarService. - The internal status components (
_getStatusComponent) andViewportActionArrowswithin specific viewports (SEG, RT, SR) have been removed. Their functionality is now provided byModalityLoadBadge,TrackingStatus, andNavigationComponent.
- If you were using
-
Integrate New UI Components via
ToolbarService:- The
ModalityLoadBadge,TrackingStatus, andNavigationComponentare now registered with theToolbarServicewithin the@ohif/extension-cornerstone'sgetToolbarModule. - Modes (e.g.,
longitudinal) should define toolbar sections for viewport corners and add these components to those sections.
Example: Adding components to viewport corners in
longitudinalmode// modes/longitudinal/src/index.ts
function modeFactory({ modeConfiguration }) {
return {
// ...
onModeEnter: ({ servicesManager, extensionManager, commandsManager }: withAppTypes) => {
// ...
toolbarService.addButtons(toolbarButtons);
toolbarService.createButtonSection('primary', [
// ... primary tools
]);
+ toolbarService.updateSection(toolbarService.sections.viewportActionMenu.topLeft, [
+ 'orientationMenu',
+ 'dataOverlayMenu',
+ 'windowLevelMenu',
+ ]);
+ toolbarService.updateSection(toolbarService.sections.viewportActionMenu.topRight, [
+ 'modalityLoadBadge',
+ 'trackingStatus',
+ 'navigationComponent',
+ ]);
// ...
},And ensure these buttons are defined in your mode's
toolbarButtons.ts:// modes/longitudinal/src/toolbarButtons.ts
+ {
+ id: 'modalityLoadBadge',
+ uiType: 'ohif.modalityLoadBadge',
+ props: {
+ // ... props like icon, label, tooltip, evaluate
+ evaluate: {
+ name: 'evaluate.modalityLoadBadge',
+ hideWhenDisabled: true,
+ },
+ },
+ },
+ {
+ id: 'navigationComponent',
+ uiType: 'ohif.navigationComponent',
+ props: {
+ // ... props
+ evaluate: {
+ name: 'evaluate.navigationComponent',
+ hideWhenDisabled: true,
+ },
+ },
+ },
+ {
+ id: 'trackingStatus',
+ uiType: 'ohif.trackingStatus',
+ props: {
+ // ... props
+ evaluate: {
+ name: 'evaluate.trackingStatus',
+ hideWhenDisabled: true,
+ },
+ },
+ }, - The
-
Direct Import of
OHIFCornerstoneViewport:- Extensions that were previously getting the cornerstone viewport component dynamically via
extensionManager.getModuleEntry('@ohif/extension-cornerstone.viewportModule.cornerstone')should now importOHIFCornerstoneViewportdirectly from@ohif/extension-cornerstone.
// extensions/cornerstone-dicom-pmap/src/viewports/OHIFCornerstonePMAPViewport.tsx
import PropTypes from 'prop-types';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useViewportGrid } from '@ohif/ui-next';
+import { OHIFCornerstoneViewport } from '@ohif/extension-cornerstone';
function OHIFCornerstonePMAPViewport(props: withAppTypes) {
// ...
const getCornerstoneViewport = useCallback(() => {
- const { component: Component } = extensionManager.getModuleEntry(
- '@ohif/extension-cornerstone.viewportModule.cornerstone'
- );
// ...
return (
- <Component
+ <OHIFCornerstoneViewport
{...props}
// ...
- ></Component>
+ />
);
// ... - Extensions that were previously getting the cornerstone viewport component dynamically via