+ {toolbarButtons.map(toolDef => {
+ if (!toolDef) {
+ return null;
+ }
+
+ const { id, Component, componentProps } = toolDef;
+
+ // Enhanced props with state and actions - respecting viewport specificity
+ const enhancedProps = {
+ ...componentProps,
+ isOpen: isItemOpen(id, viewportId),
+ isLocked: isItemLocked(id, viewportId),
+ onOpen: () => openItem(id, viewportId),
+ onClose: () => closeItem(id, viewportId),
+ onToggleLock: () => toggleLock(id, viewportId),
+ viewportId,
+ };
+
+ const tool = (
+ {
+ onInteraction({
+ ...args,
+ itemId: id,
+ viewportId,
+ });
+ }}
+ {...enhancedProps}
+ />
+ );
+
+ // Always show all icons on first mount for 3 seconds
+ // After that, always show Colorbar, show others only when mouse is at bottom
+ const shouldBeVisible = showAllIcons || id === 'Colorbar' || isAtBottom;
+
+ return (
+
+ {tool}
+
+ );
+ })}
+
+ );
+}
+
+export default AdvancedRenderingControls;
diff --git a/extensions/cornerstone/src/components/AdvancedRenderingControls/index.ts b/extensions/cornerstone/src/components/AdvancedRenderingControls/index.ts
new file mode 100644
index 000000000..dff754e97
--- /dev/null
+++ b/extensions/cornerstone/src/components/AdvancedRenderingControls/index.ts
@@ -0,0 +1 @@
+export { default } from './AdvancedRenderingControls';
diff --git a/extensions/cornerstone/src/components/ModalityLoadBadge/ModalityLoadBadge.tsx b/extensions/cornerstone/src/components/ModalityLoadBadge/ModalityLoadBadge.tsx
new file mode 100644
index 000000000..530e17041
--- /dev/null
+++ b/extensions/cornerstone/src/components/ModalityLoadBadge/ModalityLoadBadge.tsx
@@ -0,0 +1,168 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ViewportActionButton } from '@ohif/ui-next';
+import { Icons, Tooltip, TooltipTrigger, TooltipContent } from '@ohif/ui-next';
+import { useSystem } from '@ohif/core/src';
+import { useViewportDisplaySets } from '../../hooks/useViewportDisplaySets';
+import { useMeasurementTracking } from '../../hooks/useMeasurementTracking';
+
+/**
+ * ModalityLoadBadge displays the status and actionable buttons for viewports containing
+ * special displaySets (SR, SEG, RTSTRUCT) or when tracking measurements
+ */
+function ModalityLoadBadge({ viewportId }: { viewportId: string }) {
+ const { commandsManager } = useSystem();
+ const { t } = useTranslation('Common');
+ const loadStr = t('LOAD');
+
+ const { isTracked, isLocked } = useMeasurementTracking({ viewportId });
+
+ const { backgroundDisplaySet, overlayDisplaySets } = useViewportDisplaySets(viewportId);
+
+ const [specialDisplaySet, setSpecialDisplaySet] = useState(null);
+
+ const allDisplaySets = useMemo(() => {
+ return [backgroundDisplaySet, ...overlayDisplaySets].filter(Boolean);
+ }, [backgroundDisplaySet, overlayDisplaySets]);
+
+ useEffect(() => {
+ const displaySet = allDisplaySets.find(ds => ds.isOverlayDisplaySet || ds?.Modality === 'SR');
+
+ setSpecialDisplaySet(displaySet || null);
+ }, [allDisplaySets]);
+
+ const statusInfo = useMemo(() => {
+ if (isTracked && !specialDisplaySet) {
+ return {
+ type: 'SR',
+ isHydrated: true,
+ isTracked,
+ displaySet: null,
+ tooltip: 'Currently tracking measurements in this viewport',
+ };
+ }
+
+ if (!specialDisplaySet) {
+ return {
+ type: null,
+ };
+ }
+
+ const type = specialDisplaySet.Modality;
+ const isHydrated = specialDisplaySet.isHydrated || false;
+ let tooltip = null;
+ const isRehydratable = specialDisplaySet.isRehydratable || false;
+
+ if (type === 'SEG') {
+ tooltip = isHydrated
+ ? 'This Segmentation is loaded in the segmentation panel'
+ : 'Click LOAD to load segmentation.';
+ } else if (type === 'RTSTRUCT') {
+ tooltip = isHydrated
+ ? 'This RTSTRUCT is loaded in the segmentation panel'
+ : 'Click LOAD to load RTSTRUCT.';
+ } else if (type === 'SR') {
+ if (!isRehydratable) {
+ tooltip = 'This structured report is not compatible with this application.';
+ } else if (isRehydratable && isLocked) {
+ tooltip =
+ 'This structured report is currently read-only because you are tracking measurements in another viewport.';
+ } else {
+ tooltip = `Click ${loadStr} to restore measurements.`;
+ }
+ }
+
+ return {
+ type,
+ isHydrated,
+ displaySet: specialDisplaySet,
+ isRehydratable,
+ tooltip,
+ };
+ }, [specialDisplaySet, loadStr, isLocked, isTracked]);
+
+ // Nothing to show if there's no special display set type or tracking
+ if (!statusInfo.type && !isTracked) {
+ return null;
+ }
+
+ const StatusIcon = () => {
+ if (statusInfo.type === 'SR') {
+ if (statusInfo.isRehydratable && !isLocked) {
+ return (
+
+ );
+ }
+
+ if (statusInfo.isRehydratable && isLocked) {
+ return (
+
+ );
+ } else {
+ return (
+
+ );
+ }
+ } else {
+ return ;
+ }
+ };
+
+ const StatusArea = () => {
+ if (!statusInfo.isHydrated) {
+ return (
+
+
+
+ {statusInfo.type}
+
+ {/* We don't show the load button for SRs because we handle it in the SR extension
+ via the tracked measurement context that works with state machine, this is not a regression right now */}
+ {statusInfo.type !== 'SR' && (
+ {
+ commandsManager.runCommand('hydrateSecondaryDisplaySet', {
+ displaySet: statusInfo.displaySet,
+ viewportId,
+ });
+ }}
+ >
+ {loadStr}
+
+ )}
+
@@ -433,7 +425,7 @@ function ViewerViewportGrid(props: withAppTypes) {
}
return viewportPanes;
- }, [viewports, activeViewportId, viewportComponents, dataSource, initializeViewportCorners]);
+ }, [viewports, activeViewportId, viewportComponents, dataSource]);
/**
* Loading indicator until numCols and numRows are gotten from the HangingProtocolService
diff --git a/platform/app/src/hooks/index.js b/platform/app/src/hooks/index.js
index 44163c188..29c94cee1 100644
--- a/platform/app/src/hooks/index.js
+++ b/platform/app/src/hooks/index.js
@@ -1,5 +1,4 @@
import useDebounce from './useDebounce';
import useSearchParams from './useSearchParams';
-import useViewportActionCornersWithGrid from './useViewportActionCornersWithGrid';
-export { useDebounce, useSearchParams, useViewportActionCornersWithGrid };
+export { useDebounce, useSearchParams };
diff --git a/platform/app/src/hooks/index.ts b/platform/app/src/hooks/index.ts
index 2eb9011e0..29c94cee1 100644
--- a/platform/app/src/hooks/index.ts
+++ b/platform/app/src/hooks/index.ts
@@ -1,5 +1,4 @@
-import useViewportActionCornersWithGrid from './useViewportActionCornersWithGrid';
import useDebounce from './useDebounce';
import useSearchParams from './useSearchParams';
-export { useViewportActionCornersWithGrid, useDebounce, useSearchParams };
+export { useDebounce, useSearchParams };
diff --git a/platform/app/src/hooks/useViewportActionCornersWithGrid.ts b/platform/app/src/hooks/useViewportActionCornersWithGrid.ts
deleted file mode 100644
index d0f75092c..000000000
--- a/platform/app/src/hooks/useViewportActionCornersWithGrid.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import { useCallback, MutableRefObject, useRef } from 'react';
-import { useViewportActionCorners, ViewportActionCornersLocations } from '@ohif/ui-next';
-import { useSystem } from '@ohif/core';
-
-/**
- * Hook that manages viewport action corner components for all viewports in the grid
- * @returns A function that can be called to initialize action corners for a viewport
- */
-export default function useViewportActionCornersWithGrid() {
- const [, api] = useViewportActionCorners();
- const { servicesManager } = useSystem();
- const { customizationService } = servicesManager.services;
-
- // Keep a ref to track processed viewports to avoid duplicates
- const processedViewports = useRef>(new Set());
-
- // Map of customization keys to their corresponding enum values
- const locationMap = {
- 'viewportActionMenu.topLeft': ViewportActionCornersLocations.topLeft,
- 'viewportActionMenu.topRight': ViewportActionCornersLocations.topRight,
- 'viewportActionMenu.bottomLeft': ViewportActionCornersLocations.bottomLeft,
- 'viewportActionMenu.bottomRight': ViewportActionCornersLocations.bottomRight,
- };
-
- // Function to process customizations for a viewport
- const initializeViewportCorners = useCallback(
- (
- viewportId: string,
- elementRef: MutableRefObject,
- displaySets: any[],
- commandsManager: any
- ) => {
- if (!viewportId || !elementRef?.current) {
- return;
- }
-
- // Prevent duplicate processing
- if (processedViewports.current.has(viewportId)) {
- return;
- }
-
- // Mark this viewport as processed
- processedViewports.current.add(viewportId);
-
- // Clear any existing components for this viewport
- api.clear(viewportId);
-
- // Process each location
- Object.entries(locationMap).forEach(([locationKey, locationValue]) => {
- const items = customizationService.getCustomization(locationKey);
- if (!items || !items.length) {
- return;
- }
-
- items.forEach(item => {
- try {
- if (typeof item.component === 'function') {
- // Use the component renderer provided directly in the item
- const component = item.component({
- viewportId,
- element: elementRef.current,
- displaySets,
- location: locationValue,
- commandsManager,
- });
-
- if (component) {
- api.addComponent({
- viewportId,
- id: item.id,
- component,
- location: locationValue,
- indexPriority: item.indexPriority,
- });
- }
- } else if (item.component) {
- // Handle static components
- api.addComponent({
- viewportId,
- id: item.id,
- component: item.component,
- location: locationValue,
- indexPriority: item.indexPriority,
- });
- }
- } catch (error) {
- console.error(`Error adding component ${item.id} to viewport corner:`, error);
- }
- });
- });
- },
- [api, customizationService]
- );
-
- // Cleanup function for unmounting viewports
- const cleanupViewportCorners = useCallback(
- (viewportId: string) => {
- if (!viewportId) {
- return;
- }
-
- // Remove from processed set
- processedViewports.current.delete(viewportId);
-
- // Clear from the store
- api.clear(viewportId);
- },
- [api]
- );
-
- return { initializeViewportCorners, cleanupViewportCorners };
-}
diff --git a/platform/app/src/routes/Mode/Mode.tsx b/platform/app/src/routes/Mode/Mode.tsx
index 94f1a1e34..328887d5b 100644
--- a/platform/app/src/routes/Mode/Mode.tsx
+++ b/platform/app/src/routes/Mode/Mode.tsx
@@ -83,10 +83,10 @@ export default function ModeRoute({
extensionManager.setActiveDataSource(dataSourceName);
}
- const dataSource = extensionManager.getActiveDataSource()[0];
+ const dataSource = extensionManager.getActiveDataSourceOrNull();
// Only handling one route per mode for now
- const route = mode.routes[0];
+ const route = mode.routes?.[0] ?? null;
useEffect(() => {
const loadExtensions = async () => {
diff --git a/platform/cli/templates/mode/src/index.tsx b/platform/cli/templates/mode/src/index.tsx
index c3cd36805..bcb637b45 100644
--- a/platform/cli/templates/mode/src/index.tsx
+++ b/platform/cli/templates/mode/src/index.tsx
@@ -48,8 +48,8 @@ function modeFactory({ modeConfiguration }) {
// Init Default and SR ToolGroups
initToolGroups(extensionManager, toolGroupService, commandsManager);
- toolbarService.addButtons([...toolbarButtons, ...moreTools]);
- toolbarService.createButtonSection('primary', [
+ toolbarService.register([...toolbarButtons, ...moreTools]);
+ toolbarService.updateSection('primary', [
'measurementSection',
'Zoom',
'Pan',
@@ -61,7 +61,7 @@ function modeFactory({ modeConfiguration }) {
'moreToolsSection',
]);
- toolbarService.createButtonSection('measurementSection', [
+ toolbarService.updateSection('measurementSection', [
'Length',
'Bidirectional',
'ArrowAnnotate',
@@ -73,7 +73,7 @@ function modeFactory({ modeConfiguration }) {
'LivewireContour',
]);
- toolbarService.createButtonSection('moreToolsSection', [
+ toolbarService.updateSection('moreToolsSection', [
'Reset',
'rotate-right',
'flipHorizontal',
diff --git a/platform/core/package.json b/platform/core/package.json
index 3e62fe183..db02662b0 100644
--- a/platform/core/package.json
+++ b/platform/core/package.json
@@ -37,8 +37,8 @@
"@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
"@cornerstonejs/codec-openjpeg": "^1.2.4",
"@cornerstonejs/codec-openjph": "^2.4.5",
- "@cornerstonejs/core": "^3.12.2",
- "@cornerstonejs/dicom-image-loader": "^3.12.2",
+ "@cornerstonejs/core": "^3.15.1",
+ "@cornerstonejs/dicom-image-loader": "^3.15.1",
"@ohif/ui": "3.11.0-beta.32",
"cornerstone-math": "0.1.9",
"dicom-parser": "^1.8.21"
diff --git a/platform/core/src/extensions/ExtensionManager.ts b/platform/core/src/extensions/ExtensionManager.ts
index 20e67f90a..677f8fe68 100644
--- a/platform/core/src/extensions/ExtensionManager.ts
+++ b/platform/core/src/extensions/ExtensionManager.ts
@@ -388,6 +388,10 @@ export default class ExtensionManager extends PubSubService {
return this.dataSourceMap[this._activeDataSourceName];
};
+ getActiveDataSourceOrNull = () => {
+ return this.dataSourceMap[this._activeDataSourceName]?.[0] ?? null;
+ };
+
/**
* Gets the data source definition for the given data source name.
* If no data source name is provided, the active data source definition is
diff --git a/platform/core/src/hooks/index.ts b/platform/core/src/hooks/index.ts
new file mode 100644
index 000000000..eb47ffed4
--- /dev/null
+++ b/platform/core/src/hooks/index.ts
@@ -0,0 +1,5 @@
+export * from './useToolbar';
+export * from './types';
+export * from './useViewportRef';
+export * from './useViewportSize';
+export * from './useViewportMousePosition';
diff --git a/platform/core/src/hooks/types.ts b/platform/core/src/hooks/types.ts
new file mode 100644
index 000000000..6c93fc58e
--- /dev/null
+++ b/platform/core/src/hooks/types.ts
@@ -0,0 +1,27 @@
+export interface ToolbarButtonActions {
+ // Lock/Unlock actions
+ lockItem: (itemId: string, viewportId?: string) => void;
+ unlockItem: (itemId: string, viewportId?: string) => void;
+ toggleLock: (itemId: string, viewportId?: string) => void;
+ isItemLocked: (itemId: string, viewportId?: string) => boolean;
+
+ // Visibility actions
+ showItem: (itemId: string, viewportId?: string) => void;
+ hideItem: (itemId: string, viewportId?: string) => void;
+ toggleVisibility: (itemId: string, viewportId?: string) => void;
+ isItemVisible: (itemId: string, viewportId?: string) => boolean;
+
+ // Open/Close actions (for menus)
+ openItem: (itemId: string, viewportId?: string) => void;
+ closeItem: (itemId: string, viewportId?: string) => void;
+ closeAllItems: (viewportId?: string) => void;
+ isItemOpen: (itemId: string, viewportId?: string) => boolean;
+
+ // Evaluation
+ evaluateButtonForViewport: (itemId: string, viewportId?: string) => any;
+}
+
+export interface ToolbarHookReturn extends ToolbarButtonActions {
+ toolbarButtons: any[]; // The display representation of toolbar buttons
+ onInteraction: (args: any) => void;
+}
diff --git a/platform/core/src/hooks/useActiveViewportDisplaySets.ts b/platform/core/src/hooks/useActiveViewportDisplaySets.ts
index 895e0aedc..1314fff21 100644
--- a/platform/core/src/hooks/useActiveViewportDisplaySets.ts
+++ b/platform/core/src/hooks/useActiveViewportDisplaySets.ts
@@ -1,6 +1,6 @@
import { useEffect, useState, useCallback } from 'react';
import { DisplaySet } from '../types';
-
+import { useSystem } from '../';
/**
* Hook that listens for changes in the active viewport and its display sets.
* It returns the display sets associated with the active viewport.
@@ -8,7 +8,8 @@ import { DisplaySet } from '../types';
* @param servicesManager - Services manager instance
* @returns Array of display sets for the active viewport
*/
-const useActiveViewportDisplaySets = ({ servicesManager }): DisplaySet[] => {
+const useActiveViewportDisplaySets = (): DisplaySet[] => {
+ const { servicesManager } = useSystem();
const { displaySetService, viewportGridService } = servicesManager.services;
// Move this function outside useEffect and memoize it
const getDisplaySetsForViewport = useCallback(
diff --git a/platform/core/src/hooks/useToolbar.tsx b/platform/core/src/hooks/useToolbar.tsx
index 4ca4e8fa4..33c2fe011 100644
--- a/platform/core/src/hooks/useToolbar.tsx
+++ b/platform/core/src/hooks/useToolbar.tsx
@@ -1,20 +1,26 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState, useMemo } from 'react';
import { useSystem } from '../contextProviders/SystemProvider';
+import { ToolbarHookReturn } from './types';
-export function useToolbar({ buttonSection = 'primary' }: withAppTypes) {
+export function useToolbar({ buttonSection = 'primary' }: withAppTypes): ToolbarHookReturn {
const { commandsManager, servicesManager } = useSystem();
const { toolbarService, viewportGridService } = servicesManager.services;
const { EVENTS } = toolbarService;
+ // Store all buttons returned by the toolbar service
const [toolbarButtons, setToolbarButtons] = useState(
- toolbarService.getButtonSection(buttonSection as string)
+ toolbarService.getButtonSection(buttonSection as string).filter(Boolean)
);
+ // Store state of open/closed menu items
+ // Note: We keep this in local state to avoid re-evaluating the toolbar on every interaction
+ const [openItemIds, setOpenItemIds] = useState>({});
+
// Callback function for handling toolbar interactions
const onInteraction = useCallback(
args => {
args.event?.stopPropagation?.();
- const viewportId = viewportGridService.getActiveViewportId();
+ const viewportId = args.viewportId || viewportGridService.getActiveViewportId();
const refreshProps = { viewportId };
const buttonProps = toolbarService.getButtonProps(args.itemId);
@@ -58,15 +64,17 @@ export function useToolbar({ buttonSection = 'primary' }: withAppTypes) {
buttonProps.commands = allCommands;
}
+
toolbarService.recordInteraction({ ...args, ...buttonProps }, { refreshProps });
},
- [toolbarService, viewportGridService, toolbarButtons]
+ [toolbarService, viewportGridService]
);
// Effect to handle toolbar modification events
useEffect(() => {
const handleToolbarModified = () => {
- setToolbarButtons(toolbarService.getButtonSection(buttonSection as string)?.filter(Boolean));
+ const buttons = toolbarService.getButtonSection(buttonSection as string)?.filter(Boolean);
+ setToolbarButtons(buttons);
};
const subs = [EVENTS.TOOL_BAR_MODIFIED, EVENTS.TOOL_BAR_STATE_MODIFIED].map(event => {
@@ -96,5 +104,163 @@ export function useToolbar({ buttonSection = 'primary' }: withAppTypes) {
return () => subscriptions.forEach(sub => sub.unsubscribe());
}, [viewportGridService, toolbarService]);
- return { toolbarButtons, onInteraction };
+ // Action API for toolbar buttons
+ const actions = useMemo(() => {
+ return {
+ // Lock/Unlock actions
+ lockItem: (itemId: string, viewportId?: string) => {
+ const targetViewportId = viewportId || viewportGridService.getActiveViewportId();
+ const button = toolbarService.getButton(itemId);
+
+ if (button) {
+ // Set isLocked flag in button metadata
+ button.props = {
+ ...button.props,
+ isLocked: true,
+ };
+
+ // Re-evaluate the button
+ toolbarService.refreshToolbarState({ viewportId: targetViewportId, itemId });
+ }
+ },
+
+ unlockItem: (itemId: string, viewportId?: string) => {
+ const targetViewportId = viewportId || viewportGridService.getActiveViewportId();
+ const button = toolbarService.getButton(itemId);
+
+ if (button) {
+ // Set isLocked flag in button metadata
+ button.props = {
+ ...button.props,
+ isLocked: false,
+ };
+
+ // Re-evaluate the button
+ toolbarService.refreshToolbarState({ viewportId: targetViewportId, itemId });
+ }
+ },
+
+ toggleLock: (itemId: string, viewportId?: string) => {
+ const targetViewportId = viewportId || viewportGridService.getActiveViewportId();
+ const button = toolbarService.getButton(itemId);
+
+ if (button) {
+ // Toggle isLocked flag in button metadata
+ button.props = {
+ ...button.props,
+ isLocked: !button.props.isLocked,
+ };
+
+ // Re-evaluate the button
+ toolbarService.refreshToolbarState({ viewportId: targetViewportId, itemId });
+ }
+ },
+
+ isItemLocked: (itemId: string, viewportId?: string): boolean => {
+ const button = toolbarService.getButton(itemId);
+ return button?.props?.isLocked === true;
+ },
+
+ // Visibility actions - controlled by evaluator functions in toolbar items
+ showItem: (itemId: string, viewportId?: string) => {
+ const targetViewportId = viewportId || viewportGridService.getActiveViewportId();
+ const button = toolbarService.getButton(itemId);
+
+ if (button) {
+ // Set isVisible flag in button metadata
+ button.props = {
+ ...button.props,
+ isVisible: true,
+ };
+
+ // Re-evaluate the button
+ toolbarService.refreshToolbarState({ viewportId: targetViewportId, itemId });
+ }
+ },
+
+ hideItem: (itemId: string, viewportId?: string) => {
+ const targetViewportId = viewportId || viewportGridService.getActiveViewportId();
+ const button = toolbarService.getButton(itemId);
+
+ if (button) {
+ // Set isVisible flag in button metadata
+ button.props = {
+ ...button.props,
+ isVisible: false,
+ };
+
+ // Re-evaluate the button
+ toolbarService.refreshToolbarState({ viewportId: targetViewportId, itemId });
+ }
+ },
+
+ toggleVisibility: (itemId: string, viewportId?: string) => {
+ const targetViewportId = viewportId || viewportGridService.getActiveViewportId();
+ const button = toolbarService.getButton(itemId);
+
+ if (button) {
+ // Toggle isVisible flag in button metadata
+ button.props = {
+ ...button.props,
+ isVisible: button.props.isVisible === false ? true : false,
+ };
+
+ // Re-evaluate the button
+ toolbarService.refreshToolbarState({ viewportId: targetViewportId, itemId });
+ }
+ },
+
+ isItemVisible: (itemId: string, viewportId?: string): boolean => {
+ const button = toolbarService.getButton(itemId);
+ // If isVisible is explicitly false, return false; otherwise return true
+ return button?.props?.isVisible !== false;
+ },
+
+ // Open/Close actions - managed in local state for performance
+ openItem: (itemId: string, viewportId?: string) => {
+ setOpenItemIds(prev => {
+ // Close all other items
+ const updated = {};
+ // Then set the current item to open
+ updated[itemId] = true;
+ return updated;
+ });
+ },
+
+ closeItem: (itemId: string, viewportId?: string) => {
+ setOpenItemIds(prev => ({
+ ...prev,
+ [itemId]: false,
+ }));
+ },
+
+ closeAllItems: (viewportId?: string) => {
+ setOpenItemIds({});
+ },
+
+ isItemOpen: (itemId: string, viewportId?: string): boolean => {
+ return openItemIds[itemId] === true;
+ },
+ };
+ }, [viewportGridService, toolbarService, openItemIds]);
+
+ if (!toolbarButtons?.length) {
+ return {
+ toolbarButtons: [],
+ onInteraction,
+ ...actions,
+ };
+ }
+
+ // filter out buttons that are disabled and have hideWhenDisabled set to true
+ const filteredToolbarButtons = toolbarButtons.filter(button => {
+ const props = button.componentProps;
+ return props.visible !== false;
+ });
+
+ return {
+ toolbarButtons: filteredToolbarButtons,
+ onInteraction,
+ ...actions,
+ };
}
diff --git a/platform/core/src/hooks/useViewportMousePosition.ts b/platform/core/src/hooks/useViewportMousePosition.ts
new file mode 100644
index 000000000..60fa12c80
--- /dev/null
+++ b/platform/core/src/hooks/useViewportMousePosition.ts
@@ -0,0 +1,67 @@
+import { useState, useEffect } from 'react';
+import { useViewportRef } from './useViewportRef';
+import { useViewportSize } from './useViewportSize';
+
+interface MousePosition {
+ x: number;
+ y: number;
+ isInViewport: boolean;
+ relativeY: number; // Position as percentage from top (0-1)
+ isInBottomPercentage: (percentage: number) => boolean;
+}
+
+function useViewportMousePosition(viewportId: string): MousePosition {
+ const viewportRef = useViewportRef(viewportId);
+ const { height, clientRect } = useViewportSize(viewportId);
+
+ const [mousePosition, setMousePosition] = useState({
+ x: 0,
+ y: 0,
+ isInViewport: false,
+ relativeY: 0,
+ isInBottomPercentage: (percentage: number) => false,
+ });
+
+ useEffect(() => {
+ if (!viewportRef.current) {
+ return;
+ }
+
+ const handleMouseMove = (event: MouseEvent) => {
+ if (!clientRect) {
+ return;
+ }
+
+ // Get mouse position relative to viewport
+ const x = event.clientX - clientRect.left;
+ const y = event.clientY - clientRect.top;
+
+ const isInViewport = x >= 0 && x <= clientRect.width && y >= 0 && y <= clientRect.height;
+
+ const relativeY = Math.max(0, Math.min(1, y / height));
+
+ const isInBottomPercentage = (percentage: number) => {
+ return relativeY >= 1 - percentage / 100;
+ };
+
+ setMousePosition({
+ x,
+ y,
+ isInViewport,
+ relativeY,
+ isInBottomPercentage,
+ });
+ };
+
+ document.addEventListener('mousemove', handleMouseMove);
+
+ return () => {
+ document.removeEventListener('mousemove', handleMouseMove);
+ };
+ }, [viewportRef, height, clientRect]);
+
+ return mousePosition;
+}
+
+export default useViewportMousePosition;
+export { useViewportMousePosition };
diff --git a/platform/core/src/hooks/useViewportRef.ts b/platform/core/src/hooks/useViewportRef.ts
new file mode 100644
index 000000000..d6fd4eaba
--- /dev/null
+++ b/platform/core/src/hooks/useViewportRef.ts
@@ -0,0 +1,58 @@
+import React, { createContext, useContext, useRef } from 'react';
+
+type ViewportRefsContextType = {
+ registerViewport: (viewportId: string, element: HTMLElement) => void;
+ unregisterViewport: (viewportId: string) => void;
+ getViewportElement: (viewportId: string) => HTMLElement | null;
+ viewportRefs: Map;
+};
+
+// comment
+const ViewportRefsContext = createContext(undefined);
+
+export const ViewportRefsProvider = ({ children }: { children: React.ReactNode }) => {
+ const viewportRefsRef = useRef>(new Map());
+
+ const registerViewport = (viewportId: string, element: HTMLElement) => {
+ viewportRefsRef.current.set(viewportId, element);
+ };
+
+ const unregisterViewport = (viewportId: string) => {
+ viewportRefsRef.current.delete(viewportId);
+ };
+
+ const getViewportElement = (viewportId: string): HTMLElement | null => {
+ return viewportRefsRef.current.get(viewportId) || null;
+ };
+
+ const contextValue: ViewportRefsContextType = {
+ registerViewport,
+ unregisterViewport,
+ getViewportElement,
+ viewportRefs: viewportRefsRef.current,
+ };
+
+ return React.createElement(ViewportRefsContext.Provider, { value: contextValue }, children);
+};
+
+export const useViewportRefs = () => {
+ const context = useContext(ViewportRefsContext);
+
+ if (context === undefined) {
+ throw new Error('useViewportRefs must be used within a ViewportRefsProvider');
+ }
+
+ return context;
+};
+
+export const useViewportRef = (viewportId: string) => {
+ const { registerViewport, unregisterViewport, getViewportElement } = useViewportRefs();
+
+ const ref = {
+ current: getViewportElement(viewportId),
+ register: (element: HTMLElement) => registerViewport(viewportId, element),
+ unregister: () => unregisterViewport(viewportId),
+ };
+
+ return ref;
+};
diff --git a/platform/core/src/hooks/useViewportSize.ts b/platform/core/src/hooks/useViewportSize.ts
new file mode 100644
index 000000000..6ffe60bd7
--- /dev/null
+++ b/platform/core/src/hooks/useViewportSize.ts
@@ -0,0 +1,97 @@
+import { useEffect, useState, useCallback, useMemo } from 'react';
+import { useViewportRef } from './';
+
+interface ViewportSize {
+ width: number;
+ height: number;
+ offsetLeft: number;
+ offsetTop: number;
+ clientRect: DOMRect | null;
+ isVisible: boolean;
+}
+
+/**
+ * Hook that provides viewport size dimensions and monitors for changes
+ * @param viewportId - The ID of the viewport to monitor
+ * @returns ViewportSize object containing width, height, and visibility info
+ */
+function useViewportSize(viewportId: string): ViewportSize {
+ const viewportElementRef = useViewportRef(viewportId);
+
+ const [size, setSize] = useState({
+ width: 0,
+ height: 0,
+ offsetLeft: 0,
+ offsetTop: 0,
+ clientRect: null,
+ isVisible: false,
+ });
+
+ // Update viewport dimensions
+ const updateViewportSize = useCallback(() => {
+ if (!viewportElementRef?.current) {
+ return;
+ }
+
+ const element = viewportElementRef.current;
+ const clientRect = element.getBoundingClientRect();
+ const newWidth = clientRect.width;
+ const newHeight = clientRect.height;
+ const newOffsetLeft = element.offsetLeft;
+ const newOffsetTop = element.offsetTop;
+ const newIsVisible = newWidth > 0 && newHeight > 0;
+
+ setSize(prevSize => {
+ if (
+ prevSize.width === newWidth &&
+ prevSize.height === newHeight &&
+ prevSize.offsetLeft === newOffsetLeft &&
+ prevSize.offsetTop === newOffsetTop &&
+ prevSize.isVisible === newIsVisible
+ ) {
+ return prevSize;
+ }
+
+ return {
+ width: newWidth,
+ height: newHeight,
+ offsetLeft: newOffsetLeft,
+ offsetTop: newOffsetTop,
+ clientRect,
+ isVisible: newIsVisible,
+ };
+ });
+ }, [viewportElementRef]);
+
+ useEffect(() => {
+ if (!viewportId || !viewportElementRef?.current) {
+ return;
+ }
+
+ updateViewportSize();
+
+ const resizeObserver = new ResizeObserver(() => {
+ updateViewportSize();
+ });
+
+ resizeObserver.observe(viewportElementRef.current);
+
+ window.addEventListener('resize', updateViewportSize);
+
+ return () => {
+ window.removeEventListener('resize', updateViewportSize);
+
+ if (viewportElementRef.current) {
+ resizeObserver.unobserve(viewportElementRef.current);
+ }
+ resizeObserver.disconnect();
+ };
+ }, [viewportId, viewportElementRef, updateViewportSize]);
+
+ const memoizedSize = useMemo(() => size, [size]);
+
+ return memoizedSize;
+}
+
+export default useViewportSize;
+export { useViewportSize };
diff --git a/platform/core/src/index.ts b/platform/core/src/index.ts
index b9d8719f5..134f471d2 100644
--- a/platform/core/src/index.ts
+++ b/platform/core/src/index.ts
@@ -2,6 +2,7 @@ import { ExtensionManager, MODULE_TYPES } from './extensions';
import { ServiceProvidersManager, ServicesManager } from './services';
import classes, { CommandsManager, HotkeysManager } from './classes';
import { SystemContextProvider, useSystem } from './contextProviders/SystemProvider';
+import { ViewportRefsProvider } from './hooks/useViewportRef';
import DICOMWeb from './DICOMWeb';
import errorHandler from './errorHandler.js';
@@ -13,7 +14,6 @@ import utils from './utils';
import defaults from './defaults';
import * as Types from './types';
import * as Enums from './enums';
-import { useToolbar } from './hooks/useToolbar';
import {
CineService,
UIDialogService,
@@ -42,6 +42,8 @@ import { DisplaySetMessage, DisplaySetMessageList } from './services/DisplaySetS
import IWebApiDataSource from './DataSources/IWebApiDataSource';
import useActiveViewportDisplaySets from './hooks/useActiveViewportDisplaySets';
+export * from './hooks';
+
const hotkeys = {
...utils.hotkeys,
defaults: { hotkeyBindings: defaults.hotkeyBindings },
@@ -86,7 +88,6 @@ const OHIF = {
pubSubServiceInterface,
PubSubService,
PanelService,
- useToolbar,
useActiveViewportDisplaySets,
WorkflowStepsService,
StudyPrefetcherService,
@@ -101,6 +102,7 @@ export {
ServicesManager,
ServiceProvidersManager,
SystemContextProvider,
+ ViewportRefsProvider,
//
defaults,
utils,
@@ -137,7 +139,6 @@ export {
WorkflowStepsService,
StudyPrefetcherService,
useSystem,
- useToolbar,
useActiveViewportDisplaySets,
};
diff --git a/platform/core/src/services/ToolBarService/ToolbarService.ts b/platform/core/src/services/ToolBarService/ToolbarService.ts
index 7edf04bba..99252b29e 100644
--- a/platform/core/src/services/ToolBarService/ToolbarService.ts
+++ b/platform/core/src/services/ToolBarService/ToolbarService.ts
@@ -2,13 +2,68 @@ import { CommandsManager } from '../../classes';
import { ExtensionManager } from '../../extensions';
import { PubSubService } from '../_shared/pubSubServiceInterface';
import type { RunCommand } from '../../types/Command';
-import { Button, ButtonProps, EvaluateFunction, EvaluatePublic, NestedButtonProps } from './types';
+import { Button, ButtonProps, EvaluateFunction, EvaluatePublic } from './types';
const EVENTS = {
TOOL_BAR_MODIFIED: 'event::toolBarService:toolBarModified',
TOOL_BAR_STATE_MODIFIED: 'event::toolBarService:toolBarStateModified',
};
+/**
+ * Predefined toolbar sections used throughout the application
+ */
+export const TOOLBAR_SECTIONS = {
+ /**
+ * Main toolbar
+ */
+ primary: 'primary',
+
+ /**
+ * Secondary toolbar
+ */
+ secondary: 'secondary',
+
+ /**
+ * Viewport action menu sections
+ */
+ viewportActionMenu: {
+ topLeft: 'viewportActionMenu.topLeft',
+ topRight: 'viewportActionMenu.topRight',
+ bottomLeft: 'viewportActionMenu.bottomLeft',
+ bottomRight: 'viewportActionMenu.bottomRight',
+ topMiddle: 'viewportActionMenu.topMiddle',
+ bottomMiddle: 'viewportActionMenu.bottomMiddle',
+ leftMiddle: 'viewportActionMenu.leftMiddle',
+ rightMiddle: 'viewportActionMenu.rightMiddle',
+ },
+
+ /**
+ * Measurement tools section
+ */
+ measurementSection: 'measurementSection',
+
+ /**
+ * More tools section
+ */
+ moreToolsSection: 'moreToolsSection',
+
+ /**
+ * Advanced rendering controls section
+ */
+ advancedRenderingControlsSection: 'advancedRenderingControlsSection',
+};
+
+export enum ButtonLocation {
+ TopLeft = 0,
+ TopMiddle = 1,
+ TopRight = 2,
+ LeftMiddle = 3,
+ RightMiddle = 4,
+ BottomLeft = 5,
+ BottomMiddle = 6,
+ BottomRight = 7,
+}
+
export default class ToolbarService extends PubSubService {
public static REGISTRATION = {
name: 'toolbarService',
@@ -18,6 +73,13 @@ export default class ToolbarService extends PubSubService {
},
};
+ /**
+ * Access to predefined toolbar sections for autocomplete support
+ */
+ public get sections() {
+ return TOOLBAR_SECTIONS;
+ }
+
public static createButton(options: {
id: string;
label: string;
@@ -130,7 +192,7 @@ export default class ToolbarService extends PubSubService {
* @param buttons - The buttons to be added.
* @param replace - Flag indicating if any existing button with the same id as one being added should be replaced
*/
- public addButtons(buttons: Button[], replace: boolean = false): void {
+ public register(buttons: Button[], replace: boolean = false): void {
buttons.forEach(button => {
if (replace || !this.state.buttons[button.id]) {
if (!button.props) {
@@ -231,7 +293,8 @@ export default class ToolbarService extends PubSubService {
* which buttons to evaluate based on the props
*/
public refreshToolbarState(refreshProps) {
- const buttons = this.state.buttons;
+ const originalButtons = this.state.buttons;
+ const updatedButtons = { ...originalButtons };
const evaluationResults = new Map();
const evaluateButtonProps = (button, props, refreshProps) => {
@@ -239,6 +302,7 @@ export default class ToolbarService extends PubSubService {
const { disabled, disabledText, className, isActive } = evaluationResults.get(button.id);
return { ...props, disabled, disabledText, className, isActive };
} else {
+ const evaluateProps = props.evaluateProps;
const evaluated =
typeof props.evaluate === 'function'
? props.evaluate({ ...refreshProps, button })
@@ -247,6 +311,7 @@ export default class ToolbarService extends PubSubService {
...props,
...evaluated,
disabled: evaluated?.disabled || false,
+ visible: evaluateProps?.hideWhenDisabled && evaluated?.disabled ? false : true,
className: evaluated?.className || '',
isActive: evaluated?.isActive, // isActive will be undefined for buttons without this prop
};
@@ -255,7 +320,14 @@ export default class ToolbarService extends PubSubService {
}
};
- Object.values(buttons).forEach(button => {
+ const updatedIds = new Set();
+ Object.values(originalButtons).forEach(button => {
+ // Note: do not re-evaluate buttons that have already been evaluated
+ // this will result in inconsistencies in the toolbar state
+ if (updatedIds.has(button.id)) {
+ return;
+ }
+
const hasSection = (button.props as NestedButtonProps)?.buttonSection;
if (!hasSection) {
@@ -263,10 +335,12 @@ export default class ToolbarService extends PubSubService {
const buttonProps = button.props as ButtonProps;
const updatedProps = evaluateButtonProps(button, buttonProps, refreshProps);
- buttons[button.id] = {
+ updatedButtons[button.id] = {
...button,
props: updatedProps,
};
+
+ updatedIds.add(button.id);
} else {
let buttonProps = button.props as NestedButtonProps;
const { evaluate: groupEvaluate } = buttonProps;
@@ -288,17 +362,27 @@ export default class ToolbarService extends PubSubService {
}
toolButtonIds.forEach(buttonId => {
- const button = buttons[buttonId];
+ const button = originalButtons[buttonId];
+ if (!button) {
+ return;
+ }
+
+ if (updatedIds.has(buttonId)) {
+ return;
+ }
+
const updatedProps = evaluateButtonProps(button, button.props, refreshProps);
- buttons[buttonId] = {
+ updatedButtons[buttonId] = {
...button,
props: updatedProps,
};
+
+ updatedIds.add(buttonId);
});
}
});
- this.setButtons(buttons);
+ this.setButtons(updatedButtons);
return this.state;
}
@@ -373,7 +457,7 @@ export default class ToolbarService extends PubSubService {
* @param {string} key - The key of the button section.
* @param {Array} buttons - The buttons to be added to the section.
*/
- createButtonSection(key, buttons) {
+ updateSection(key, buttons) {
if (this.state.buttonSections[key]) {
this.state.buttonSections[key].push(
...buttons.filter(
@@ -443,7 +527,7 @@ export default class ToolbarService extends PubSubService {
}
const { id, uiType } = btn;
- const { groupId } = btn.props as NestedButtonProps;
+ const { buttonSection } = btn.props;
const buttonTypes = this._getButtonUITypes();
@@ -457,7 +541,7 @@ export default class ToolbarService extends PubSubService {
return;
}
- !groupId ? this.handleEvaluate(btn.props) : this.handleEvaluateNested(btn.props);
+ !buttonSection ? this.handleEvaluate(btn.props) : this.handleEvaluateNested(btn.props);
const { id: buttonId, props: componentProps } = btn;
@@ -587,6 +671,7 @@ export default class ToolbarService extends PubSubService {
return evaluateFunction;
});
+ const evaluateProps = props.evaluate;
props.evaluate = args => {
const results = evaluators.map(evaluator => evaluator(args)).filter(Boolean);
@@ -607,6 +692,8 @@ export default class ToolbarService extends PubSubService {
return mergedResult;
};
+ props.evaluateProps = evaluateProps;
+
return;
}
@@ -627,7 +714,9 @@ export default class ToolbarService extends PubSubService {
const { name, ...options } = evaluate;
const evaluateFunction = this._evaluateFunction[name];
if (evaluateFunction) {
+ const evaluateProps = props.evaluate;
props.evaluate = args => evaluateFunction({ ...args, ...options });
+ props.evaluateProps = evaluateProps;
return;
}
@@ -645,4 +734,56 @@ export default class ToolbarService extends PubSubService {
this.state.buttonSections[buttonSection] = [];
this._broadcastEvent(this.EVENTS.TOOL_BAR_MODIFIED, { ...this.state });
}
+
+ /**
+ * Checks if a button exists in any toolbar section.
+ *
+ * @param buttonId - The button ID to check for
+ * @returns True if the button exists in any section, false otherwise
+ */
+ isInAnySection(buttonId: string): boolean {
+ if (!buttonId) {
+ return false;
+ }
+
+ // Check all sections to see if the button ID exists in any of them
+ return Object.values(this.state.buttonSections).some(
+ section => Array.isArray(section) && section.includes(buttonId)
+ );
+ }
+
+ /**
+ * Returns the alignment and side for a specific viewport corner location.
+ * Used for menu positioning based on the corner location.
+ *
+ * @param location - The viewport corner location
+ * @returns An object with align and side properties
+ */
+ public getAlignAndSide(location: ButtonLocation | string): {
+ align: 'start' | 'end' | 'center';
+ side: 'top' | 'bottom' | 'left' | 'right';
+ } {
+ const locationNumber = Number(location);
+ switch (locationNumber) {
+ case ButtonLocation.TopLeft: // Enum 0, Original 0 (topLeft)
+ return { align: 'start', side: 'bottom' };
+ case ButtonLocation.TopMiddle: // Enum 1, Original 4 (topMiddle)
+ return { align: 'center', side: 'bottom' };
+ case ButtonLocation.TopRight: // Enum 2, Original 1 (topRight)
+ return { align: 'end', side: 'bottom' };
+ case ButtonLocation.LeftMiddle: // Enum 3, Original 6 (leftMiddle)
+ return { align: 'start', side: 'right' };
+ case ButtonLocation.RightMiddle: // Enum 4, Original 7 (rightMiddle)
+ return { align: 'end', side: 'left' };
+ case ButtonLocation.BottomLeft: // Enum 5, Original 2 (bottomLeft)
+ return { align: 'start', side: 'top' };
+ case ButtonLocation.BottomMiddle: // Enum 6, Original 5 (bottomMiddle)
+ return { align: 'center', side: 'top' };
+ case ButtonLocation.BottomRight: // Enum 7, Original 3 (bottomRight)
+ return { align: 'end', side: 'top' };
+ default:
+ // Default to TopLeft behavior if an unexpected value is passed.
+ return { align: 'start', side: 'bottom' };
+ }
+ }
}
diff --git a/platform/core/src/services/ToolBarService/index.ts b/platform/core/src/services/ToolBarService/index.ts
index 0147896b4..0ff1702a7 100644
--- a/platform/core/src/services/ToolBarService/index.ts
+++ b/platform/core/src/services/ToolBarService/index.ts
@@ -1,3 +1,3 @@
-import ToolbarService from './ToolbarService';
-
+import ToolbarService, { TOOLBAR_SECTIONS } from './ToolbarService';
export default ToolbarService;
+export { TOOLBAR_SECTIONS };
diff --git a/platform/core/src/services/ToolBarService/types.ts b/platform/core/src/services/ToolBarService/types.ts
index ed424a2ea..02ed1afe6 100644
--- a/platform/core/src/services/ToolBarService/types.ts
+++ b/platform/core/src/services/ToolBarService/types.ts
@@ -1,6 +1,22 @@
import type { RunCommand } from '../../types/Command';
import React from 'react';
+/**
+ * Type definitions for toolbar sections
+ */
+export type ToolbarSections = {
+ primary: string;
+ secondary: string;
+ viewportActionMenu: {
+ topLeft: string;
+ topRight: string;
+ bottomLeft: string;
+ bottomRight: string;
+ };
+ measurementSection: string;
+ moreToolsSection: string;
+};
+
export type EvaluatePublic =
| string
| EvaluateFunction
diff --git a/platform/core/src/services/WorkflowStepsService/WorkflowStepsService.ts b/platform/core/src/services/WorkflowStepsService/WorkflowStepsService.ts
index 33a9b5449..ee2a0c6ab 100644
--- a/platform/core/src/services/WorkflowStepsService/WorkflowStepsService.ts
+++ b/platform/core/src/services/WorkflowStepsService/WorkflowStepsService.ts
@@ -137,7 +137,7 @@ class WorkflowStepsService extends PubSubService {
toUse.forEach(({ buttonSection, buttons }) => {
toolbarService.clearButtonSection(buttonSection);
- toolbarService.createButtonSection(buttonSection, buttons);
+ toolbarService.updateSection(buttonSection, buttons);
});
}
diff --git a/platform/core/src/types/DisplaySet.ts b/platform/core/src/types/DisplaySet.ts
index 2c410d8ab..c2061c41c 100644
--- a/platform/core/src/types/DisplaySet.ts
+++ b/platform/core/src/types/DisplaySet.ts
@@ -35,9 +35,19 @@ export type DisplaySet = {
*/
renderedUrl?: string;
+ /**
+ * The instance UID of the display set that this display set references.
+ * This is used to determine if the display set is a referenced display set.
+ * It usually is for SEG, RTSTRUCT, etc.
+ */
+ referencedDisplaySetInstanceUID?: string;
+
SeriesDate?: string;
SeriesTime?: string;
instance?: InstanceMetadata;
+
+ isHydrated?: boolean;
+ isRehydratable?: boolean;
};
export type DisplaySetSeriesMetadataInvalidatedEvent = {
diff --git a/platform/docs/docs/migration-guide/3p10-to-3p11/commands.md b/platform/docs/docs/migration-guide/3p10-to-3p11/commands.md
new file mode 100644
index 000000000..d38b52f52
--- /dev/null
+++ b/platform/docs/docs/migration-guide/3p10-to-3p11/commands.md
@@ -0,0 +1,72 @@
+---
+sidebar_position: 4
+sidebar_label: Commands
+summary: Migration guide for OHIF 3.11's different commands
+---
+
+
+
+## updateStoredPositionPresentation
+
+now uses displaySetInstanceUIDs instead of displaySetInstanceUID as a parameter.
+
+
+## `loadSRMeasurements` Command
+
+**Key Changes:**
+
+* The `loadSRMeasurements` command, previously part of the `@ohif/extension-cornerstone-dicom-sr` extension, has been **removed**.
+* Its functionality of hydrating a Structured Report (SR) and displaying its referenced series in a viewport is now primarily handled by the new `hydrateSecondaryDisplaySet` command available in the `@ohif/extension-cornerstone` extension.
+* The `hydrateStructuredReport` command (from `@ohif/extension-cornerstone-dicom-sr`) now solely focuses on hydrating the SR and returning its data, without directly manipulating viewports.
+
+**Migration Steps:**
+
+If you were previously using the `loadSRMeasurements` command to load and display SR measurements, you should update your code to use the `hydrateSecondaryDisplaySet` command.
+
+1. **Identify `loadSRMeasurements` Usage:**
+ Locate where your code calls `commandsManager.runCommand('loadSRMeasurements', ...)`.
+
+2. **Update to `hydrateSecondaryDisplaySet`:**
+ Replace the call to `loadSRMeasurements` with `hydrateSecondaryDisplaySet`. You will need to pass the full `displaySet` object for the SR and the target `viewportId`.
+
+ ```diff
+ - // Old way: using loadSRMeasurements
+ - commandsManager.runCommand('loadSRMeasurements', {
+ - displaySetInstanceUID: srDisplaySetInstanceUID,
+ - // viewportId was implicitly the active one or not directly specifiable here
+ - });
+ -
+ + // New way: using hydrateSecondaryDisplaySet
+ + const { displaySetService, viewportGridService } = servicesManager.services;
+ +
+ + // 1. Get the SR displaySet object
+ + const srDisplaySet = displaySetService.getDisplaySetByUID(srDisplaySetInstanceUID);
+ +
+ + // 2. Determine the target viewportId (e.g., active viewport)
+ + const viewportId = viewportGridService.getActiveViewportId(); // Or your specific viewportId
+ +
+ + if (srDisplaySet && viewportId) {
+ + commandsManager.runCommand('hydrateSecondaryDisplaySet', {
+ + displaySet: srDisplaySet,
+ + viewportId: viewportId,
+ + });
+ + } else {
+ + console.warn('SR DisplaySet or ViewportId not found, cannot hydrate.');
+ + }
+ ```
+
+**Explanation:**
+
+* The `loadSRMeasurements` command was responsible for both hydrating the SR (getting its measurement data and referenced series UIDs) and then updating the viewport to show the referenced series.
+* The new `hydrateSecondaryDisplaySet` command, when given an SR `displaySet` (`displaySet.Modality === 'SR'`), will:
+ 1. Internally call the `hydrateStructuredReport` command to parse the SR and get its details (including `SeriesInstanceUIDs` of referenced images).
+ 2. Then, it will automatically find the corresponding image display sets for those `SeriesInstanceUIDs`.
+ 3. Finally, it will update the specified `viewportId` to display the primary referenced image series.
+* This change centralizes the logic for hydrating secondary display sets (like SR, SEG, RTSTRUCT) and updating viewports into the `hydrateSecondaryDisplaySet` command within the core Cornerstone extension.
+
+**Note on UI/Button Changes:**
+The UI button typically associated with "Load SR" (often seen in viewport corners or specific contexts) has also been refactored. The hydration of SRs is now often triggered by:
+* The `TrackedMeasurementsContext` if the `@ohif/extension-measurement-tracking` is in use.
+* The new `ModalityLoadBadge` component, which can appear in viewports containing SR, SEG, or RTSTRUCT display sets, offering a "LOAD" action that calls `hydrateSecondaryDisplaySet`.
+
+If you had custom UI invoking `loadSRMeasurements`, you'll need to adapt it to call `hydrateSecondaryDisplaySet` as described above.
diff --git a/platform/docs/docs/migration-guide/3p10-to-3p11/hydration.md b/platform/docs/docs/migration-guide/3p10-to-3p11/hydration.md
new file mode 100644
index 000000000..0f82524f4
--- /dev/null
+++ b/platform/docs/docs/migration-guide/3p10-to-3p11/hydration.md
@@ -0,0 +1,85 @@
+---
+title: Hydration
+sidebar_position: 3
+sidebar_label: Hydration
+summary: Migration guide for OHIF 3.11's hydration system changes, including the transition to a centralized hydration dialog and command-based hydration for secondary display sets.
+---
+
+## Update Hydration Logic:
+ * The `promptHydrateSEG` and `promptHydrateRT` functions have been updated to use the generic `utils.promptHydrationDialog` from `@ohif/extension-cornerstone`.
+ * The actual hydration is now often triggered by the `hydrateSecondaryDisplaySet` command.
+
+ *Example: `promptHydrateRT` change*
+
+ ```diff
+ // extensions/cornerstone-dicom-rt/src/utils/promptHydrateRT.ts
+ - const RESPONSE = {
+ - NO_NEVER: -1,
+ - CANCEL: 0,
+ - HYDRATE_SEG: 5,
+ - };
+ + import { utils, Types } from '@ohif/extension-cornerstone';
+
+ function promptHydrateRT({
+ servicesManager,
+ rtDisplaySet,
+ viewportId,
+ preHydrateCallbacks,
+ hydrateRTDisplaySet,
+ -}: withAppTypes) {
+ - const { uiViewportDialogService, customizationService } = servicesManager.services;
+ - // ... lots of old promise and dialog logic
+ - return new Promise(async function (resolve, reject) {
+ - // ...
+ - });
+ -}
+ -
+ -function _askHydrate(
+ - // ...
+ -) {
+ - // ...
+ -}
+ +}: {
+ + servicesManager: AppTypes.ServicesManager;
+ + rtDisplaySet: AppTypes.DisplaySet;
+ + viewportId: string;
+ + preHydrateCallbacks?: Types.HydrationCallback[];
+ + hydrateRTDisplaySet: Types.HydrationCallback;
+ +}) {
+ + return utils.promptHydrationDialog({
+ + servicesManager,
+ + viewportId,
+ + displaySet: rtDisplaySet,
+ + preHydrateCallbacks,
+ + hydrateCallback: hydrateRTDisplaySet,
+ + type: 'RTSTRUCT',
+ + });
+ }
+ ```
+ The `hydrateRTDisplaySet` callback passed to this function would now typically involve the `hydrateSecondaryDisplaySet` command.
+ ```diff
+ // extensions/cornerstone-dicom-rt/src/viewports/OHIFCornerstoneRTViewport.tsx
+ useEffect(() => {
+ if (rtIsLoading) {
+ return;
+ }
+ promptHydrateRT({
+ servicesManager,
+ viewportId,
+ rtDisplaySet,
+ - preHydrateCallbacks: [storePresentationState],
+ - hydrateRTDisplaySet,
+ - }).then(isHydrated => {
+ - if (isHydrated) {
+ - setIsHydrated(true);
+ - }
+ + hydrateRTDisplaySet: async () => {
+ + return commandsManager.runCommand('hydrateSecondaryDisplaySet', {
+ + displaySet: rtDisplaySet,
+ + viewportId,
+ + });
+ + },
+ });
+ - }, [servicesManager, viewportId, rtDisplaySet, rtIsLoading]);
+ + }, [servicesManager, viewportId, rtDisplaySet, rtIsLoading, commandsManager]);
+ ```
diff --git a/platform/docs/docs/migration-guide/3p10-to-3p11/index.md b/platform/docs/docs/migration-guide/3p10-to-3p11/index.md
index bee159b84..d60fdfd76 100644
--- a/platform/docs/docs/migration-guide/3p10-to-3p11/index.md
+++ b/platform/docs/docs/migration-guide/3p10-to-3p11/index.md
@@ -6,17 +6,3 @@ sidebar_label: 3.10 -> 3.11 beta
# Migration Guide
This guide provides information about migrating from OHIF version 3.10 to version 3.11.
-
-## General
-
-`viewportActionMenu.segmentationOverlay` is renamed to `viewportActionMenu.dataOverlay`
-as it handles now both segmentation and data overlay.
-
-## Viewport Action Menu Customization
-
-The structure for defining viewport action menu customizations has changed. See the [Viewport Action Menu](./viewport-action-menu.md) migration guide for details.
-
-
-## updateStoredPositionPresentation
-
-now uses displaySetInstanceUIDs instead of displaySetInstanceUID.
diff --git a/platform/docs/docs/migration-guide/3p10-to-3p11/toolbarService.md b/platform/docs/docs/migration-guide/3p10-to-3p11/toolbarService.md
new file mode 100644
index 000000000..510ce538b
--- /dev/null
+++ b/platform/docs/docs/migration-guide/3p10-to-3p11/toolbarService.md
@@ -0,0 +1,153 @@
+---
+sidebar_position: 2
+sidebar_label: Toolbar Service
+summary: Migration guide for OHIF 3.11's toolbar service changes, including the transition from `ViewportActionCornersService` to `ToolbarService`
+---
+
+
+**Key Changes:**
+
+* **`ViewportActionCornersService` Removed:** The `ViewportActionCornersService` and its associated provider (`ViewportActionCornersProvider`) and hook (`useViewportActionCorners`) have been removed. Functionality for viewport corner items is now integrated into the `ToolbarService` and standard toolbar components.
+* **Viewport Corner Items as Toolbar Buttons:** Items previously managed by `ViewportActionCornersService` are now configured as regular toolbar buttons. They are assigned to specific toolbar sections (e.g., `viewportActionMenu.topLeft`) and rendered using `Toolbar` components within the viewport corners.
+* **`ToolbarService` API Updates:**
+ * `ToolbarService.addButtons()` has been renamed to `ToolbarService.register()` to better reflect its purpose of registering button definitions rather than just adding them.
+ * `ToolbarService.createButtonSection()` has been renamed to `ToolbarService.updateSection()` to better reflect that it is not about creating new sections but updating existing ones.
+ * `ToolbarService` now has a `sections` property (e.g., `toolbarService.sections.viewportActionMenu.topLeft`) providing predefined section names.
+* **Enhanced `useToolbar` Hook:**
+ * The `useToolbar` hook now returns additional state management functions for toolbar items:
+ * `openItem`, `closeItem`, `isItemOpen` (for managing dropdown/popover states).
+ * `lockItem`, `unlockItem`, `toggleLock`, `isItemLocked`.
+ * `showItem`, `hideItem`, `toggleVisibility`, `isItemVisible`.
+ * The `onInteraction` callback now receives `itemId` and `viewportId`.
+* **Toolbar Button Configuration:**
+ * The `groupId` prop in button configurations (e.g., for `ohif.toolButtonList`, `ohif.toolBoxButtonGroup`) is generally replaced by directly using `buttonSection` to define the set of buttons.
+ * Button `evaluate` functions can now leverage `evaluateProps.hideWhenDisabled` to automatically hide a button when it's disabled.
+* **New UI Components & Hooks for Viewport Corners:**
+ * Specialized components like `ModalityLoadBadge`, `NavigationComponent`, `TrackingStatus`, `ViewportDataOverlayMenuWrapper`, `ViewportOrientationMenuWrapper`, `WindowLevelActionMenuWrapper` are now used as toolbar buttons, typically in viewport action menu sections.
+ * `useViewportHover` hook can be used to determine if a viewport is hovered or active, controlling the visibility of corner toolbars.
+* **`IconPresentationProvider`:** A new `IconPresentationProvider` and `useIconPresentation` hook have been introduced to standardize icon sizing and styling within toolbars and related components.
+* **Legacy Toolbar Components Removed:** `ToolbarSplitButtonWithServicesLegacy` and `ToolbarButtonGroupWithServicesLegacy` have been removed.
+
+**Migration Steps:**
+
+1. **Update `ToolbarService` Method Calls:**
+ * Replace all instances of `toolbarService.addButtons(...)` with `toolbarService.register(...)`.
+ * Replace all instances of `toolbarService.createButtonSection(...)` with `toolbarService.updateSection(...)`.
+
+ ```diff
+ // Before
+ - toolbarService.addButtons(toolbarButtons);
+ - toolbarService.createButtonSection('primary', ['Zoom', 'Pan']);
+
+ // After
+ + toolbarService.register(toolbarButtons);
+ + toolbarService.updateSection('primary', ['Zoom', 'Pan']);
+ ```
+
+2. **Migrate Viewport Action Corner Items:**
+ * Remove any direct usage of the old `ViewportActionCornersService`, `useViewportActionCorners`, or `ViewportActionCornersProvider`.
+ * Define your viewport corner items (like orientation menu, W/L menu, data overlay menu) as standard toolbar buttons using `toolbarService.register()`.
+ * Assign these buttons to the new dedicated viewport action menu sections. You can access these section names via `toolbarService.sections.viewportActionMenu.`, e.g., `toolbarService.sections.viewportActionMenu.topLeft`.
+
+ ```diff
+ // Before: Customization in viewportActionMenuCustomizations.ts (now deleted)
+ // or direct use of ViewportActionCornersService.addComponent
+ - // Example: viewportActionCornersService.addComponent({ viewportId, id: 'orientationMenu', component: MyOrientationMenu, location: 'topLeft' });
+
+ // After: In your mode's onModeEnter or similar setup
+ + const myViewportCornerButtons = [
+ + {
+ + id: 'orientationMenu',
+ + uiType: 'ohif.orientationMenu', // Or your custom component registered as a UI type
+ + props: { /* ... props for your component ... */ }
+ + },
+ + // ... other corner buttons
+ + ];
+ + toolbarService.register(myViewportCornerButtons);
+ + toolbarService.updateSection(
+ + toolbarService.sections.viewportActionMenu.topLeft,
+ + ['orientationMenu', /* other button IDs */]
+ + );
+ ```
+ * The `OHIFViewportActionCorners.tsx` component now internally uses `Toolbar` components for each corner, which are populated by these sections.
+ * For custom components that act as menus (e.g., popovers), use the `onOpen`, `onClose`, `isOpen` props passed down by the `Toolbar` component (which get these from `useToolbar`).
+
+ ```diff
+ // Before: Custom component might have managed its own open state
+ - // const [isMenuOpen, setIsMenuOpen] = useState(false);
+ - // const handleOpenChange = (open) => setIsMenuOpen(open);
+
+ // After: Custom component receives isOpen, onOpen, onClose from Toolbar
+ + function MyCustomMenuButton({ isOpen, onOpen, onClose, ...rest }) {
+ + const handleOpenChange = (openState: boolean) => {
+ + if (openState) {
+ + onOpen?.();
+ + } else {
+ + onClose?.();
+ + }
+ + };
+ +
+ + return (
+ +
+ + {/* ... PopoverTrigger and PopoverContent ... */}
+ +
+ + );
+ + }
+ ```
+
+3. **Adapt Toolbar Button and Component Configurations:**
+ * For `ohif.toolButtonList` or `ohif.toolBoxButtonGroup` (and their wrappers), the `groupId` prop is no longer the primary way to define the set of buttons. Instead, ensure the `buttonSection` prop correctly points to the section name containing the desired buttons. The `id` prop on these wrapper components should be unique for the component instance.
+
+ ```diff
+ // Before
+ - {
+ - id: 'MeasurementTools',
+ - uiType: 'ohif.toolButtonList',
+ - props: {
+ - buttonSection: 'measurementSection',
+ - groupId: 'MeasurementTools', // groupId often matched buttonSection
+ - },
+ - },
+
+ // After
+ + {
+ + id: 'MeasurementTools', // This is the ID of the ToolButtonList/ToolBox component itself
+ + uiType: 'ohif.toolButtonList',
+ + props: {
+ + // This section contains the actual tool buttons (e.g., Length, Bidirectional)
+ + buttonSection: 'measurementSection',
+ + },
+ + },
+ ```
+ * Update wrappers like `ToolBoxButtonGroupWrapper` and `ToolButtonListWrapper`:
+ * The `groupId` prop is replaced by `id` (which is the ID of the wrapper button itself).
+ * The `onInteraction` callback in these wrappers now provides `id` (the wrapper's ID) instead of `groupId`.
+ * If you have custom `evaluate` functions, you can now use `evaluateProps: { hideWhenDisabled: true }` in your button definition to automatically hide the button if it evaluates to disabled.
+
+
+5. **Adopt `IconPresentationProvider` (Optional but Recommended):**
+ * For consistent icon styling across your application's toolbars, wrap a high-level component (like your main `Header` or layout component) with ``.
+ * Custom tool button components can then use the `useIconPresentation` hook to get appropriate class names for icons or a pre-styled `IconContainer`.
+
+ ```diff
+ // In your main App.tsx or Header.tsx
+ + import { IconPresentationProvider, ToolButton } from '@ohif/ui-next';
+ // ...
+ +
+ {/* Your Header content including Toolbars */}
+ +
+
+ // In a custom tool button using icons
+ + import { useIconPresentation, Icons } from '@ohif/ui-next';
+ + function MyCustomToolButton({ iconName }) {
+ + const { className: iconClassName } = useIconPresentation();
+ + return ;
+ + }
+ ```
+
+6. **Remove Legacy Component Usage:**
+ * Replace any usage of `ToolbarSplitButtonWithServicesLegacy` and `ToolbarButtonGroupWithServicesLegacy` with the newer patterns, typically by configuring individual buttons and using `ToolButtonList` or `ButtonGroup` from `@ohif/ui-next` directly, driven by `useToolbar`.
diff --git a/platform/docs/docs/migration-guide/3p10-to-3p11/ui.md b/platform/docs/docs/migration-guide/3p10-to-3p11/ui.md
new file mode 100644
index 000000000..074790e5d
--- /dev/null
+++ b/platform/docs/docs/migration-guide/3p10-to-3p11/ui.md
@@ -0,0 +1,60 @@
+---
+sidebar_position: 5
+sidebar_label: UI
+summary: Migration guide for OHIF 3.11's UI changes, including the transition from `ViewportActionCornersService` to `ToolbarService` and the introduction of `useToolbar` hook.
+---
+
+
+## New useIconPresentation hook
+
+This section details the introduction of the `IconPresentationProvider` and `useIconPresentation` hook, offering an optional way to manage icon size and container styling within the UI.
+
+### Key Changes:
+
+* **New Context and Hook:** Introduction of `IconPresentationProvider` and `useIconPresentation` to provide a standardized way to control the size and potentially the container component/props for icons and related interactive elements (like `ToolButton`).
+
+### Migration Steps:
+
+Using the `IconPresentationProvider` is **entirely optional**. If you do not wrap your components with this provider, components like `ToolButton` will continue to use their explicit `size` prop and default styling.
+
+However, if you wish to centrally manage the presentation of icons within a specific part of your application's component tree, follow these steps:
+
+1. **Identify the component subtree:** Determine which section of your UI you want to apply consistent icon styling to.
+
+2. **Wrap with `IconPresentationProvider`:** Wrap the root of that component subtree with the `IconPresentationProvider`. Pass the desired `size` prop. You can also optionally provide a custom `IconContainer` component and `containerProps` if you want to change the wrapper around the icon itself (e.g., switching from a `Button` to a `ToolButton` or applying specific styling).
+
+ ```jsx
+ import { IconPresentationProvider, ToolButton } from '@ohif/ui-next';
+
+ function MyComponentTree() {
+ return (
+ // Icons and ToolButtons within this provider will inherit 'large' size
+
+ {/* Any components inside that consume the context */}
+
+ {/* ... other components ... */}
+
+ );
+ }
+ ```
+
+3. **Consume the context in components (if building custom components):** If you are building a custom component that renders an icon and want it to respect the provider's settings, use the `useIconPresentation` hook within that component. This hook provides the configured size, a calculated CSS class name (`className`), the specified `IconContainer` component, and its `containerProps`.
+
+ ```jsx
+ import React from 'react';
+ import { useIconPresentation, Icons } from '@ohif/ui-next';
+
+ function MyCustomIconButton({ iconName, ...rest }) {
+ // This hook reads the nearest IconPresentationProvider context
+ const { className, IconContainer, containerProps } = useIconPresentation();
+
+ // Use the provided IconContainer and its props
+ return (
+
+ {/* Use the calculated className for the icon */}
+
+
+ );
+ }
+ ```
+ *Note: Built-in components like `ToolButton` in `@ohif/ui-next` have been updated internally to consume this context automatically if a provider is available.*
diff --git a/platform/docs/docs/migration-guide/3p10-to-3p11/viewport-action-menu.md b/platform/docs/docs/migration-guide/3p10-to-3p11/viewport-action-menu.md
index 2b7f36d98..b2b1fd307 100644
--- a/platform/docs/docs/migration-guide/3p10-to-3p11/viewport-action-menu.md
+++ b/platform/docs/docs/migration-guide/3p10-to-3p11/viewport-action-menu.md
@@ -1,102 +1,124 @@
---
-sidebar_position: 2
-sidebar_label: Viewport Action Menu
-summary: Migration guide for OHIF 3.11's viewport action menu customization changes, including the transition from individual item configurations to location-based arrays and the removal of index priorities.
+sidebar_position: 1
+sidebar_label: Viewport Corners
+summary: Migration guide for OHIF 3.11's viewport corners customization changes, including the transition from individual item configurations to location-based arrays and the removal of index priorities.
---
-# Viewport Action Menu Customization
-In OHIF 3.11, we've redesigned how viewport action menu customizations are defined to make them more intuitive and organized by location.
+Okay, here's a migration guide based on the provided diff, focusing on the introduction of `TrackingStatus`, `ModalityLoadBadge`, and `NavigationComponent`.
-## Changes
+**Key Changes:**
-Previously, viewport action menu customizations were defined with individual item configurations that specified location and priority:
+* **Deprecated `ViewportActionCornersService`**: The `ViewportActionCornersService` and its associated provider (`ViewportActionCornersProvider`) have been removed. UI elements previously managed by this service are now typically handled by dedicated components integrated via the `ToolbarService`.
+* **New Centralized UI Components**:
+ * `ModalityLoadBadge`: A new component in `@ohif/extension-cornerstone` that 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 like `OHIFCornerstoneSEGViewport` and `OHIFCornerstoneRTViewport`.
+ * `TrackingStatus`: A new component in `@ohif/extension-cornerstone` to indicate if measurements in a viewport are being tracked. This replaces inline tracking status indicators previously in `OHIFCornerstoneSRMeasurementViewport` and `TrackedCornerstoneViewport`.
+ * `NavigationComponent`: A new component in `@ohif/extension-cornerstone` that provides navigation arrows (e.g., for segments in SEG/RT or measurements in SR/tracked series). This replaces the `ViewportActionArrows` previously instantiated directly within viewport components.
+* **Viewport Simplification**: Viewport components like `OHIFCornerstoneSEGViewport`, `OHIFCornerstoneRTViewport`, and `OHIFCornerstoneSRMeasurementViewport` have been simplified. They no longer manage their own status indicators, load buttons, or navigation arrows. They now primarily delegate rendering to `OHIFCornerstoneViewport`.
+* **Refactored Hydration Prompts**: Utility functions like `promptHydrateSEG` and `promptHydrateRT` now use a centralized `utils.promptHydrationDialog` from `@ohif/extension-cornerstone`.
+* **Centralized Hydration Command**: A new command `hydrateSecondaryDisplaySet` has been added to `@ohif/extension-cornerstone` to 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.
-```ts
-export default {
- 'viewportActionMenu.orientationMenu': {
- enabled: true,
- location: viewportActionCornersService.LOCATIONS.topLeft,
- indexPriority: 1,
- },
- 'viewportActionMenu.dataOverlay': {
- enabled: true,
- location: viewportActionCornersService.LOCATIONS.topLeft,
- indexPriority: 2,
- },
- // ...
-};
-```
+**Migration Steps:**
-Now, viewport action menu customizations are organized by location, with each location having its own customization ID:
+1. **Remove `ViewportActionCornersService` Usage**:
+ * If you were using `ViewportActionCornersService` to 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 the `ToolbarService`.
+ * The internal status components (`_getStatusComponent`) and `ViewportActionArrows` within specific viewports (SEG, RT, SR) have been removed. Their functionality is now provided by `ModalityLoadBadge`, `TrackingStatus`, and `NavigationComponent`.
-```ts
-export default {
- 'viewportActionMenu.topLeft': [
- {
- id: 'orientationMenu',
- enabled: true,
- },
- {
- id: 'dataOverlay',
- enabled: true,
- },
- {
- id: 'windowLevelActionMenu',
- enabled: true,
- },
- ],
- 'viewportActionMenu.topRight': [],
- 'viewportActionMenu.bottomLeft': [],
- 'viewportActionMenu.bottomRight': [],
-};
-```
-## Migration Steps
+3. **Integrate New UI Components via `ToolbarService`**:
+ * The `ModalityLoadBadge`, `TrackingStatus`, and `NavigationComponent` are now registered with the `ToolbarService` within the `@ohif/extension-cornerstone`'s `getToolbarModule`.
+ * Modes (e.g., `longitudinal`) should define toolbar sections for viewport corners and add these components to those sections.
-1. Reorganize your viewport action menu customizations by using location-based customization IDs (`viewportActionMenu.topLeft`, `viewportActionMenu.topRight`, etc.).
-2. For each component, move it into the appropriate location array.
-3. Replace the component key with an `id` property that doesn't include the prefix (just use `orientationMenu` instead of `viewportActionMenu.orientationMenu`).
-4. Remove the `location` property (since it's now implied by the customization ID).
-5. Remove the `indexPriority` property (order in the array now determines display order).
-6. For each component, provide a `component` function that returns the component instance.
+ *Example: Adding components to viewport corners in `longitudinal` mode*
+ ```diff
+ // modes/longitudinal/src/index.ts
+ function modeFactory({ modeConfiguration }) {
+ return {
+ // ...
+ onModeEnter: ({ servicesManager, extensionManager, commandsManager }: withAppTypes) => {
+ // ...
+ toolbarService.addButtons(toolbarButtons);
+ toolbarService.createButtonSection('primary', [
+ // ... primary tools
+ ]);
-## Component Rendering
+ + 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`:
+ ```diff
+ // 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,
+ + },
+ + },
+ + },
+ ```
-Component rendering logic is now included directly in the item configuration via a `component` function:
-```ts
-const createOrientationMenu = ({ viewportId, element, location }) => {
- return getViewportOrientationMenu({
- viewportId,
- element,
- location,
- });
-};
+5. **Direct Import of `OHIFCornerstoneViewport`**:
+ * Extensions that were previously getting the cornerstone viewport component dynamically via `extensionManager.getModuleEntry('@ohif/extension-cornerstone.viewportModule.cornerstone')` should now import `OHIFCornerstoneViewport` directly from `@ohif/extension-cornerstone`.
-const createDataOverlay = ({ viewportId, element, displaySets, location }) => {
- return getViewportDataOverlaySettingsMenu({
- viewportId,
- element,
- displaySets,
- location,
- });
-};
+ ```diff
+ // 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';
-export default {
- 'viewportActionMenu.topLeft': [
- {
- id: 'orientationMenu',
- enabled: true,
- component: createOrientationMenu,
- },
- {
- id: 'dataOverlay',
- enabled: true,
- component: createDataOverlay,
- },
- // other components...
- ],
- // other locations...
-};
-```
+ function OHIFCornerstonePMAPViewport(props: withAppTypes) {
+ // ...
+ const getCornerstoneViewport = useCallback(() => {
+ - const { component: Component } = extensionManager.getModuleEntry(
+ - '@ohif/extension-cornerstone.viewportModule.cornerstone'
+ - );
+ // ...
+ return (
+ -
+ + />
+ );
+ // ...
+ ```
diff --git a/platform/docs/docs/platform/hooks/index.md b/platform/docs/docs/platform/hooks/index.md
new file mode 100644
index 000000000..52cc5ee47
--- /dev/null
+++ b/platform/docs/docs/platform/hooks/index.md
@@ -0,0 +1,33 @@
+---
+title: Hooks
+summary: List of React hooks available in the platform, these are custom hooks that are used to access the state of the platform
+---
+
+# Hooks
+
+## [useMeasurements](./useMeasurements.md)
+A React hook that provides mapped measurements from the measurement service with automatic updates when measurements change.
+
+## [useViewportSegmentations](./useViewportSegmentations.md)
+A React hook that provides segmentation data and representations for the active viewport with automatic updates when segmentations change.
+
+## [useMeasurementTracking](./useMeasurementTracking.md)
+A React hook that provides measurement tracking information for a specific viewport, including tracking state and tracked measurement UIDs.
+
+## [useViewportDisplaySets](./useViewportDisplaySets.md)
+A React hook that provides access to display sets associated with a viewport, including background, foreground, overlay, and potential display sets.
+
+## [useViewportHover](./useViewportHover.md)
+A React hook that tracks mouse hover state and active status for a specific viewport.
+
+## [usePatientInfo](./usePatientInfo.md)
+A React hook that provides patient information from the active display sets and detects when multiple patients are loaded.
+
+## [useSearchParams](./useSearchParams.md)
+A React hook that provides access to URL search parameters from both the query string and hash fragment.
+
+## [useDynamicMaxHeight](./useDynamicMaxHeight.md)
+A React hook that calculates the maximum height for an element based on its position in the viewport, with automatic recalculation on window resize or data changes.
+
+## [useSessionStorage](./useSessionStorage.md)
+A React hook that provides sessionStorage access with automatic JSON parsing/stringifying and an option to clear data when the page unloads.
\ No newline at end of file
diff --git a/platform/docs/docs/platform/hooks/useDynamicMaxHeight.md b/platform/docs/docs/platform/hooks/useDynamicMaxHeight.md
new file mode 100644
index 000000000..95854c173
--- /dev/null
+++ b/platform/docs/docs/platform/hooks/useDynamicMaxHeight.md
@@ -0,0 +1,65 @@
+---
+title: useDynamicMaxHeight
+summary: A React hook that calculates the maximum height for an element based on its position in the viewport, with automatic recalculation on window resize or data changes.
+---
+
+# useDynamicMaxHeight
+
+The `useDynamicMaxHeight` hook calculates the maximum height an element can have based on its position relative to the bottom of the viewport, ensuring it doesn't overflow or get cut off by the viewport edge.
+
+## Overview
+
+This hook is useful for creating responsive UI elements that need to fit within the visible area of the screen without causing scrolling or content overflow. It automatically recalculates the maximum height when the window is resized or when specified data changes, ensuring the element always fits properly.
+
+## Import
+
+```js
+import { useDynamicMaxHeight } from '@ohif/ui-next';
+```
+
+## Usage
+
+```jsx
+function DynamicHeightPanel({ data, children }) {
+ const { ref, maxHeight } = useDynamicMaxHeight(data, 30, 200);
+
+ return (
+
+ {children}
+
+ );
+}
+```
+
+## Parameters
+
+- `data` (required): Any data that, when changed, should trigger a recalculation of the maximum height. This can be an array, object, or primitive value.
+- `buffer` (optional): Additional space (in pixels) to leave below the element. Defaults to 20px.
+- `minHeight` (optional): Minimum height (in pixels) for the element. Defaults to 100px.
+
+## Returns
+
+An object containing:
+
+- `ref`: A React ref object that must be attached to the target DOM element
+- `maxHeight`: A CSS-compatible string value for the calculated maximum height (e.g., "500px")
+
+## Implementation Details
+
+- The hook uses `window.innerHeight` and the element's position to calculate the available space between the element's top edge and the bottom of the viewport.
+- It subtracts the specified buffer from the available height to ensure there's space below the element.
+- The calculated height is constrained by the specified minimum height to prevent the element from becoming too small.
+- The hook uses `requestAnimationFrame` to ensure the initial calculation happens after the component has been rendered and positioned in the DOM.
+- It automatically recalculates the maximum height when:
+ - The window is resized
+ - The `data`, `buffer`, or `minHeight` dependencies change
+- The hook properly cleans up event listeners and animation frame requests when the component unmounts.
+
+This hook is particularly useful for panels, menus, and content areas that need to dynamically adjust their height based on their position in the viewport, ensuring a good user experience without unexpected scrolling or content clipping.
\ No newline at end of file
diff --git a/platform/docs/docs/platform/hooks/useMeasurementTracking.md b/platform/docs/docs/platform/hooks/useMeasurementTracking.md
new file mode 100644
index 000000000..b488e86d0
--- /dev/null
+++ b/platform/docs/docs/platform/hooks/useMeasurementTracking.md
@@ -0,0 +1,79 @@
+---
+title: useMeasurementTracking
+summary: A React hook that provides measurement tracking information for a specific viewport, including tracking state and tracked measurement UIDs.
+---
+
+# useMeasurementTracking
+
+The `useMeasurementTracking` hook provides measurement tracking information for a specific viewport, including the tracking state and UIDs of tracked measurements associated with the viewport's series.
+
+## Overview
+
+This hook gives components access to tracking information for measurements in a viewport. It monitors the tracked measurements service and measurement service to provide up-to-date tracking states and the list of measurement UIDs associated with the series displayed in the viewport.
+
+## Import
+
+```js
+import { useMeasurementTracking } from '@ohif/extension-cornerstone';
+```
+
+## Usage
+
+```jsx
+function MeasurementTrackingInfo({ viewportId }) {
+ const {
+ isTracked,
+ isLocked,
+ seriesInstanceUID,
+ trackedMeasurementUIDs
+ } = useMeasurementTracking({
+ viewportId,
+ });
+
+ return (
+
+ );
+}
+```
+
+## Parameters
+
+- `options` - Configuration options:
+ - `viewportId` (required): The ID of the viewport to track
+
+## Returns
+
+An object containing the following properties:
+
+- `isTracked`: Boolean indicating if the series in the viewport is currently tracked
+- `isLocked`: Boolean indicating if tracking is enabled (locked) globally
+- `seriesInstanceUID`: The Series Instance UID of the background display set in the viewport
+- `trackedMeasurementUIDs`: Array of measurement UIDs that are associated with the tracked series in the viewport
+
+## Events
+
+The hook automatically updates when any of these events occur:
+
+From the tracked measurements service:
+- `TRACKING_ENABLED`
+- `TRACKING_DISABLED`
+- `TRACKED_SERIES_CHANGED`
+- `SERIES_ADDED`
+- `SERIES_REMOVED`
+
+From the measurement service:
+- `MEASUREMENT_ADDED`
+- `RAW_MEASUREMENT_ADDED`
+- `MEASUREMENT_UPDATED`
+- `MEASUREMENT_REMOVED`
+- `MEASUREMENTS_CLEARED`
diff --git a/platform/docs/docs/platform/hooks/useMeasurements.md b/platform/docs/docs/platform/hooks/useMeasurements.md
new file mode 100644
index 000000000..d1336d0c7
--- /dev/null
+++ b/platform/docs/docs/platform/hooks/useMeasurements.md
@@ -0,0 +1,68 @@
+---
+title: useMeasurements
+summary: A React hook that provides mapped measurements from the measurement service with automatic updates when measurements change.
+---
+
+# useMeasurements
+
+The `useMeasurements` hook provides access to measurements from the measurement service, with automatic updates when measurements are added, updated, or removed.
+
+## Overview
+
+This hook retrieves measurements from the measurement service and maps them to a display-friendly format. It monitors various measurement service events and updates the returned measurements automatically when changes occur.
+
+## Import
+
+```js
+import { useMeasurements } from '@ohif/extension-cornerstone';
+```
+
+## Usage
+
+```jsx
+function MeasurementPanel() {
+ const measurementFilter = measurements => measurements.someFilter;
+
+ const measurements = useMeasurements({
+ measurementFilter,
+ });
+
+ return (
+
+ );
+}
+```
+
+## Parameters
+
+- `options` - Configuration options:
+ - `measurementFilter` - Optional function to filter measurements returned by the measurement service.
+
+## Returns
+
+An array of mapped measurements with the following structure:
+
+
+## Events
+
+The hook automatically updates when any of these measurement service events occur:
+- `MEASUREMENT_ADDED`
+- `RAW_MEASUREMENT_ADDED`
+- `MEASUREMENT_UPDATED`
+- `MEASUREMENT_REMOVED`
+- `MEASUREMENTS_CLEARED`
+
+## Implementation Details
+
+The hook uses debouncing to prevent excessive re-renders when multiple measurement events occur in rapid succession. It also performs a deep comparison of the measurements to avoid unnecessary state updates when the data hasn't actually changed.
diff --git a/platform/docs/docs/platform/hooks/usePatientInfo.md b/platform/docs/docs/platform/hooks/usePatientInfo.md
new file mode 100644
index 000000000..62bc9b9ae
--- /dev/null
+++ b/platform/docs/docs/platform/hooks/usePatientInfo.md
@@ -0,0 +1,68 @@
+---
+title: usePatientInfo
+summary: A React hook that provides patient information from the active display sets and detects when multiple patients are loaded.
+---
+
+# usePatientInfo
+
+The `usePatientInfo` hook provides access to basic patient demographic information from the active display sets and also detects when display sets from multiple patients are loaded simultaneously.
+
+## Overview
+
+This hook retrieves patient information from the first instance of the first display set added to the viewer. It monitors when new display sets are added and updates the patient information accordingly. It also checks if any of the active display sets are from different patients and provides this information through the `isMixedPatients` flag.
+
+## Import
+
+```js
+import { usePatientInfo } from '@ohif/extension-default';
+```
+
+## Usage
+
+```jsx
+function PatientBanner() {
+ const { patientInfo, isMixedPatients } = usePatientInfo();
+
+ return (
+
+ );
+}
+```
+
+## Parameters
+
+This hook doesn't take any parameters.
+
+## Returns
+
+An object containing:
+
+- `patientInfo`: Object with the following properties:
+ - `PatientName`: Formatted patient name
+ - `PatientID`: Patient identifier
+ - `PatientSex`: Patient sex
+ - `PatientDOB`: Formatted patient date of birth
+- `isMixedPatients`: Boolean indicating whether multiple patients are loaded in the viewer
+
+## Events
+
+The hook subscribes to the following display set service events:
+
+- `DISPLAY_SETS_ADDED`: Updates patient information when new display sets are added to the viewer
+
+## Implementation Details
+
+- Patient name and date of birth are formatted using OHIF utility functions.
+- The hook checks all active display sets to determine if they belong to different patients.
+- Patient information is initialized with empty strings and updated when display sets are added.
+- When no instances are available in a display set, the hook attempts to get information from the `instance` property as a fallback.
\ No newline at end of file
diff --git a/platform/docs/docs/platform/hooks/useSearchParams.md b/platform/docs/docs/platform/hooks/useSearchParams.md
new file mode 100644
index 000000000..909c1b0bc
--- /dev/null
+++ b/platform/docs/docs/platform/hooks/useSearchParams.md
@@ -0,0 +1,69 @@
+---
+title: useSearchParams
+summary: A React hook that provides access to URL search parameters from both the query string and hash fragment.
+---
+
+# useSearchParams
+
+The `useSearchParams` hook provides access to URL search parameters, combining both query string parameters and hash fragment parameters into a single URLSearchParams object.
+
+## Overview
+
+This hook extends the standard React Router `useLocation` functionality by merging search parameters from both the query string and the hash fragment of the URL. It also provides an option to normalize parameter keys to lowercase for case-insensitive parameter handling.
+
+## Import
+
+```js
+import { useSearchParams } from '@ohif/app';
+```
+
+## Usage
+
+```jsx
+function RouteParameterReader() {
+ const searchParams = useSearchParams();
+ // Or with lowercase keys option
+ const lowerCaseParams = useSearchParams({ lowerCaseKeys: true });
+
+ const studyInstanceUID = searchParams.get('StudyInstanceUID');
+ // With lowerCaseKeys: true
+ const sameStudyUID = lowerCaseParams.get('studyinstanceuid');
+
+ return (
+
+ );
+}
+```
+
+## Parameters
+
+- `options` (optional): Configuration options
+ - `lowerCaseKeys` - Boolean indicating whether to convert all parameter keys to lowercase (default: false)
+
+## Returns
+
+A `URLSearchParams` object containing all parameters from both:
+- The query string (e.g., `?param1=value1¶m2=value2`)
+- The hash fragment (e.g., `#param3=value3¶m4=value4`)
+
+If parameters with the same key exist in both the query string and hash fragment, the hash fragment values take precedence.
+
+## Implementation Details
+
+- The hook uses React Router's `useLocation` to access the current URL.
+- It first creates a URLSearchParams object from the location's search property.
+- It then creates another URLSearchParams object from the location's hash property (excluding the leading '#').
+- The parameters from the hash are added to the search parameters, overriding any duplicate keys.
+- If the `lowerCaseKeys` option is enabled, it creates a new URLSearchParams object with all keys converted to lowercase.
+
+This is particularly useful in OHIF where parameters may be specified in either the query string or hash fragment, and where case-sensitivity of parameter names might vary across different systems.
diff --git a/platform/docs/docs/platform/hooks/useSessionStorage.md b/platform/docs/docs/platform/hooks/useSessionStorage.md
new file mode 100644
index 000000000..8eed706d5
--- /dev/null
+++ b/platform/docs/docs/platform/hooks/useSessionStorage.md
@@ -0,0 +1,84 @@
+---
+title: useSessionStorage
+summary: A React hook that provides sessionStorage access with automatic JSON parsing/stringifying and an option to clear data when the page unloads.
+---
+
+# useSessionStorage
+
+The `useSessionStorage` hook provides a convenient way to store and retrieve data from the browser's sessionStorage with automatic JSON serialization and deserialization. It also offers the option to automatically clear the stored data when a page unloads.
+
+## Overview
+
+This hook wraps the browser's sessionStorage API to provide a more React-friendly interface. It handles JSON serialization/deserialization automatically and maintains the stored values in local state for reactive updates. The hook also includes a unique feature to clear specific items from sessionStorage when the page unloads, which is useful for temporary session data that shouldn't persist.
+
+## Import
+
+```js
+import { useSessionStorage } from '@ohif/ui-next';
+```
+
+## Usage
+
+```jsx
+function UserPreferencesPanel() {
+ const [preferences, setPreferences] = useSessionStorage({
+ key: 'viewer-preferences',
+ defaultValue: { theme: 'dark', fontSize: 'medium' },
+ clearOnUnload: false,
+ });
+
+ const updateTheme = (theme) => {
+ setPreferences({ ...preferences, theme });
+ };
+
+ return (
+
+
User Preferences
+
Current Theme: {preferences.theme}
+
+
+
+ );
+}
+
+function TemporaryWorkspace() {
+ const [workspace, setWorkspace] = useSessionStorage({
+ key: 'temp-workspace',
+ defaultValue: { annotations: [] },
+ clearOnUnload: true, // This data will be cleared when the page unloads
+ });
+
+ return (
+
+
Temporary Workspace
+
This workspace will be cleared when you leave the page
+ {/* Workspace UI components */}
+
+ );
+}
+```
+
+## Parameters
+
+An options object with the following properties:
+
+- `key` (required): The sessionStorage key under which to store the data
+- `defaultValue` (optional): The default value to use if no data exists in sessionStorage for the given key. Defaults to an empty object (`{}`)
+- `clearOnUnload` (optional): Whether to clear this item from sessionStorage when the page unloads. Defaults to `false`
+
+## Returns
+
+An array containing:
+
+1. The current value from sessionStorage (parsed from JSON)
+2. A function to update the value in both state and sessionStorage
+
+The update function automatically handles JSON stringification of the data.
+
+## Implementation Details
+
+- The hook uses a global Map (`sessionItemsToClearOnUnload`) to track items that should be cleared when the page unloads.
+- It utilizes the browser's `visibilitychange` event to implement the clearOnUnload feature. When the page becomes hidden (which happens both when switching tabs and when unloading), items marked for clearing are removed from sessionStorage.
+- If the page later becomes visible again (e.g., when switching back to the tab), the items are restored from the Map.
+- The hook's update function merges the new value with the current state using the spread operator, maintaining a similar behavior to React's `setState`.
+- All data is automatically serialized to JSON before storing in sessionStorage and deserialized when retrieving.
diff --git a/platform/docs/docs/platform/hooks/useViewportDisplaySets.md b/platform/docs/docs/platform/hooks/useViewportDisplaySets.md
new file mode 100644
index 000000000..7c3a99f5e
--- /dev/null
+++ b/platform/docs/docs/platform/hooks/useViewportDisplaySets.md
@@ -0,0 +1,98 @@
+---
+title: useViewportDisplaySets
+summary: A React hook that provides access to display sets associated with a viewport, including background, foreground, overlay, and potential display sets.
+---
+
+# useViewportDisplaySets
+
+The `useViewportDisplaySets` hook provides access to display sets associated with a viewport, organized into categories based on their role and potential usage.
+
+## Overview
+
+This hook retrieves all display sets associated with a specific viewport and categorizes them into background, foreground, overlays, and potential display sets that could be added to the viewport in different roles. It allows components to efficiently access and manage viewport display sets for various UI interactions like layer menus and display set selectors.
+
+## Import
+
+```js
+import { useViewportDisplaySets } from '@ohif/extension-cornerstone';
+```
+
+## Usage
+
+```jsx
+function ViewportLayerControls({ viewportId }) {
+ const {
+ backgroundDisplaySet,
+ foregroundDisplaySets,
+ overlayDisplaySets,
+ potentialOverlayDisplaySets,
+ potentialForegroundDisplaySets,
+ potentialBackgroundDisplaySets,
+ } = useViewportDisplaySets(viewportId);
+
+ return (
+
+
+
Background
+
{backgroundDisplaySet?.SeriesDescription}
+
+
+
+
Foreground ({foregroundDisplaySets.length})
+ {foregroundDisplaySets.map(ds => (
+
{ds.SeriesDescription}
+ ))}
+
+
+
+
Overlays ({overlayDisplaySets.length})
+ {overlayDisplaySets.map(ds => (
+
{ds.SeriesDescription}
+ ))}
+
+
+
+
Available Overlays ({potentialOverlayDisplaySets.length})
+ {potentialOverlayDisplaySets.map(ds => (
+
{ds.SeriesDescription}
+ ))}
+
+
+ );
+}
+```
+
+## Parameters
+
+- `viewportId` (optional): The ID of the viewport to get display sets for. If not provided, uses the active viewport.
+- `options` (optional): Configuration options to control which display sets to include:
+ - `includeBackground`: Whether to include the background display set (default: true)
+ - `includeForeground`: Whether to include foreground display sets (default: true)
+ - `includeOverlay`: Whether to include overlay display sets (default: true)
+ - `includePotentialOverlay`: Whether to include potential overlay display sets (default: true)
+ - `includePotentialForeground`: Whether to include potential foreground display sets (default: true)
+ - `includePotentialBackground`: Whether to include potential background display sets (default: true)
+
+## Returns
+
+An object containing requested display set collections based on options:
+
+- `allDisplaySets`: All display sets in the viewer (only if requested)
+- `viewportDisplaySets`: The display sets currently in the viewport
+- `backgroundDisplaySet`: The primary display set for the viewport (base image)
+- `foregroundDisplaySets`: Display sets currently shown with background (non-overlay layers)
+- `overlayDisplaySets`: Segmentation display sets currently applied as overlays
+- `potentialOverlayDisplaySets`: Display sets that could be toggled on as overlays (derived modalities)
+- `potentialForegroundDisplaySets`: Display sets that could be added as foreground layers
+- `potentialBackgroundDisplaySets`: Display sets that could replace the current background
+
+Each property is only included if the corresponding option is true.
+
+## Implementation Details
+
+- The hook automatically adapts to viewport changes through the `useViewportGrid` hook.
+- It only fetches and processes display sets that are needed based on the provided options.
+- Display sets are categorized based on their modality and properties.
+- Potential display sets are sorted by priority to present the most relevant options first.
+- Derived overlay modalities (like SEG, SR) are treated differently than other display sets.
+- The hook uses memoization extensively to optimize performance and prevent unnecessary recalculations.
diff --git a/platform/docs/docs/platform/hooks/useViewportHover.md b/platform/docs/docs/platform/hooks/useViewportHover.md
new file mode 100644
index 000000000..61c45a1de
--- /dev/null
+++ b/platform/docs/docs/platform/hooks/useViewportHover.md
@@ -0,0 +1,57 @@
+---
+title: useViewportHover
+summary: A React hook that tracks mouse hover state and active status for a specific viewport.
+---
+
+# useViewportHover
+
+The `useViewportHover` hook provides information about whether the mouse is currently hovering over a specific viewport and whether that viewport is active.
+
+## Overview
+
+This hook monitors mouse movement to track hover state over a viewport element by its ID. It also checks whether the viewport is currently active (selected) in the viewer. This is useful for implementing conditional UI elements or behaviors that depend on user interaction with viewports.
+
+## Import
+
+```js
+import { useViewportHover } from '@ohif/extension-cornerstone';
+```
+
+## Usage
+
+```jsx
+function ViewportOverlay({ viewportId }) {
+ const { isHovered, isActive } = useViewportHover(viewportId);
+
+ return (
+
+ );
+}
+```
+
+## Parameters
+
+- `viewportId` (required): The ID of the viewport to track hover state for
+
+## Returns
+
+An object containing the following properties:
+
+- `isHovered`: Boolean indicating if the mouse is currently hovering over the viewport
+- `isActive`: Boolean indicating if the viewport is currently the active viewport in the grid
+
+## Implementation Details
+
+- The hook uses the DOM to find the viewport element by its `data-viewportId` attribute.
+- It calculates and maintains the viewport's bounding rectangle to efficiently determine if the mouse is within the viewport's bounds.
+- The viewport element's rectangle is updated when the window is resized.
+- Global mouse movement is tracked to determine hover state, rather than relying on traditional mouseenter/mouseleave events.
+- The hook automatically cleans up event listeners when the component unmounts or the viewport ID changes.
+- Active viewport state is derived from the viewport grid state using the `useViewportGrid` hook.
\ No newline at end of file
diff --git a/platform/docs/docs/platform/hooks/useViewportSegmentations.md b/platform/docs/docs/platform/hooks/useViewportSegmentations.md
new file mode 100644
index 000000000..26d59e931
--- /dev/null
+++ b/platform/docs/docs/platform/hooks/useViewportSegmentations.md
@@ -0,0 +1,95 @@
+---
+title: useViewportSegmentations
+summary: A React hook that provides segmentation data and representations for the active viewport with automatic updates when segmentations change.
+---
+
+# useViewportSegmentations
+
+The `useViewportSegmentations` hook provides access to segmentation data and their representations for a specific viewport, with automatic updates when segmentations are modified, removed, or representations change.
+
+## Overview
+
+This hook retrieves all segmentations and their representations for a given viewport from the segmentation service. It maps the segmentation data to a display-friendly format, including readable text for statistics. The hook monitors various segmentation and viewport events to update automatically when changes occur.
+
+## Import
+
+```js
+import { useViewportSegmentations } from '@ohif/extension-cornerstone';
+```
+
+## Usage
+
+```jsx
+function SegmentationPanel({ viewportId }) {
+ const { segmentationsWithRepresentations, disabled } = useViewportSegmentations({
+ viewportId,
+ subscribeToDataModified: true,
+ debounceTime: 100,
+ });
+
+ if (disabled) {
+ return
Segmentations not available for this modality
;
+ }
+
+ if (!segmentationsWithRepresentations.length) {
+ return