From cea27d438d1de2c1ec90cbaefdc2b31a1d9980a1 Mon Sep 17 00:00:00 2001 From: Ibrahim <93064150+IbrahimCSAE@users.noreply.github.com> Date: Thu, 4 Apr 2024 23:00:11 -0400 Subject: [PATCH] feat(advanced-roi-tools): new tools and icon updates and overlay bug fixes (#4014) --- .../Overlays/CustomizableViewportOverlay.tsx | 129 +++++++++++------- .../cornerstone/src/getToolbarModule.tsx | 20 +++ .../cornerstone/src/initCornerstoneTools.js | 18 ++- extensions/default/src/Toolbar/Toolbar.tsx | 9 +- modes/basic-test-mode/src/initToolGroups.ts | 5 + modes/basic-test-mode/src/moreTools.ts | 20 ++- modes/basic-test-mode/src/toolbarButtons.ts | 24 ++++ modes/longitudinal/src/initToolGroups.js | 6 +- modes/longitudinal/src/moreTools.ts | 20 ++- modes/longitudinal/src/toolbarButtons.ts | 24 ++++ modes/segmentation/src/initToolGroups.ts | 2 + modes/segmentation/src/toolbarButtons.ts | 20 ++- .../src/assets/icons/focus-frame-target.svg | 13 ++ .../ui/src/assets/icons/icon-tool-brush.svg | 15 +- .../ui/src/assets/icons/icon-tool-eraser.svg | 17 ++- .../ui/src/assets/icons/icon-tool-shape.svg | 7 +- .../src/assets/icons/icon-tool-threshold.svg | 17 ++- platform/ui/src/assets/icons/pencil.svg | 5 +- platform/ui/src/assets/icons/tool-angle.svg | 17 ++- .../ui/src/assets/icons/tool-annotate.svg | 14 +- .../src/assets/icons/tool-bidirectional.svg | 26 +++- .../ui/src/assets/icons/tool-calibrate.svg | 19 +++ platform/ui/src/assets/icons/tool-capture.svg | 15 +- platform/ui/src/assets/icons/tool-cine.svg | 13 +- platform/ui/src/assets/icons/tool-circle.svg | 11 +- .../ui/src/assets/icons/tool-crosshair.svg | 28 ++-- .../assets/icons/tool-dicom-tag-browser.svg | 15 ++ .../src/assets/icons/tool-flip-horizontal.svg | 15 +- .../ui/src/assets/icons/tool-freehand-roi.svg | 12 ++ platform/ui/src/assets/icons/tool-invert.svg | 14 +- .../src/assets/icons/tool-layout-default.svg | 21 +++ platform/ui/src/assets/icons/tool-length.svg | 20 ++- .../ui/src/assets/icons/tool-magnetic-roi.svg | 17 +++ platform/ui/src/assets/icons/tool-magnify.svg | 11 +- .../src/assets/icons/tool-measure-elipse.svg | 12 ++ platform/ui/src/assets/icons/tool-move.svg | 19 ++- .../src/assets/icons/tool-quick-magnify.svg | 11 ++ .../ui/src/assets/icons/tool-rectangle.svg | 16 ++- .../src/assets/icons/tool-reference-lines.svg | 13 ++ platform/ui/src/assets/icons/tool-reset.svg | 13 +- .../ui/src/assets/icons/tool-rotate-right.svg | 17 ++- .../ui/src/assets/icons/tool-spline-roi.svg | 14 ++ .../assets/icons/tool-stack-image-sync.svg | 10 ++ .../ui/src/assets/icons/tool-stack-scroll.svg | 15 +- .../icons/tool-toggle-dicom-overlay.svg | 9 ++ .../icons/tool-ultrasound-bidirectional.svg | 15 ++ .../ui/src/assets/icons/tool-window-level.svg | 13 +- platform/ui/src/assets/icons/tool-zoom.svg | 13 +- platform/ui/src/components/Icon/getIcon.js | 30 ++-- .../src/components/IconButton/IconButton.tsx | 4 +- .../components/SplitButton/SplitButton.tsx | 7 +- .../ToolbarButton/ToolbarButton.tsx | 2 +- 52 files changed, 662 insertions(+), 210 deletions(-) create mode 100644 platform/ui/src/assets/icons/focus-frame-target.svg create mode 100644 platform/ui/src/assets/icons/tool-calibrate.svg create mode 100644 platform/ui/src/assets/icons/tool-dicom-tag-browser.svg create mode 100644 platform/ui/src/assets/icons/tool-freehand-roi.svg create mode 100644 platform/ui/src/assets/icons/tool-layout-default.svg create mode 100644 platform/ui/src/assets/icons/tool-magnetic-roi.svg create mode 100644 platform/ui/src/assets/icons/tool-measure-elipse.svg create mode 100644 platform/ui/src/assets/icons/tool-quick-magnify.svg create mode 100644 platform/ui/src/assets/icons/tool-reference-lines.svg create mode 100644 platform/ui/src/assets/icons/tool-spline-roi.svg create mode 100644 platform/ui/src/assets/icons/tool-stack-image-sync.svg create mode 100644 platform/ui/src/assets/icons/tool-toggle-dicom-overlay.svg create mode 100644 platform/ui/src/assets/icons/tool-ultrasound-bidirectional.svg diff --git a/extensions/cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.tsx b/extensions/cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.tsx index 5349481a8..3f2f7474b 100644 --- a/extensions/cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.tsx +++ b/extensions/cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.tsx @@ -80,9 +80,9 @@ function CustomizableViewportOverlay({ 'cornerstoneOverlayBottomRight' ); - const instance = useMemo(() => { + const instances = useMemo(() => { if (viewportData != null) { - return _getViewportInstance(viewportData, imageIndex); + return _getViewportInstances(viewportData); } else { return null; } @@ -177,7 +177,7 @@ function CustomizableViewportOverlay({ formatTime: formatDICOMTime, formatNumberPrecision, }, - instance, + instance: instances ? instances[item?.instanceIndex] : null, voi, scale, instanceNumber, @@ -207,7 +207,7 @@ function CustomizableViewportOverlay({ viewportId, servicesManager, customizationService, - instance, + instances, voi, scale, instanceNumber, @@ -217,13 +217,15 @@ function CustomizableViewportOverlay({ const getContent = useCallback( (customization, defaultItems, keyPrefix) => { const items = customization?.items ?? defaultItems; - return ( <> {items.map((item, index) => (
{item?.condition - ? item.condition({ instance, formatters: { formatDate: formatDICOMDate } }) + ? item.condition({ + instance: instances ? instances[item?.instanceIndex] : null, + formatters: { formatDate: formatDICOMDate }, + }) ? _renderOverlayItem(item) : null : _renderOverlayItem(item)} @@ -235,35 +237,50 @@ function CustomizableViewportOverlay({ [_renderOverlayItem] ); + const studyDateItem = { + id: 'StudyDate', + customizationType: 'ohif.overlayItem', + label: '', + title: 'Study date', + condition: ({ instance }) => instance && instance.StudyDate, + contentF: ({ instance, formatters: { formatDate } }) => formatDate(instance.StudyDate), + }; + + const seriesDescriptionItem = { + id: 'SeriesDescription', + customizationType: 'ohif.overlayItem', + label: '', + title: 'Series description', + attribute: 'SeriesDescription', + condition: ({ instance }) => { + return instance && instance.SeriesDescription; + }, + }; + + const topLeftItems = instances + ? instances + .map((instance, index) => { + return [ + { + ...studyDateItem, + instanceIndex: index, + }, + { + ...seriesDescriptionItem, + instanceIndex: index, + }, + ]; + }) + .flat() + : []; + return ( instance && instance.StudyDate, - contentF: ({ instance, formatters: { formatDate } }) => - formatDate(instance.StudyDate), - }, - { - id: 'SeriesDescription', - customizationType: 'ohif.overlayItem', - label: '', - title: 'Series description', - attribute: 'SeriesDescription', - condition: ({ instance }) => instance && instance.SeriesDescription, - }, - ], - 'topLeftOverlayItem' - ) + getContent(topLeftCustomization, [...topLeftItems], 'topLeftOverlayItem') } topRight={getContent(topRightCustomization, [], 'topRightOverlayItem')} bottomLeft={getContent( @@ -298,18 +315,26 @@ function CustomizableViewportOverlay({ ); } -function _getViewportInstance(viewportData, imageIndex) { - let imageId = null; +function _getViewportInstances(viewportData) { + const imageIds = []; if (viewportData.viewportType === Enums.ViewportType.STACK) { - imageId = viewportData.data.imageIds[imageIndex]; + imageIds.push(viewportData.data.imageIds[0]); } else if (viewportData.viewportType === Enums.ViewportType.ORTHOGRAPHIC) { const volumes = viewportData.data; - if (volumes && volumes.length == 1) { - const volume = volumes[0]; - imageId = volume.imageIds[imageIndex]; - } + volumes.forEach(volume => { + if (!volume?.imageIds) { + return; + } + imageIds.push(volume.imageIds[0]); + }); } - return imageId ? metaData.get('instance', imageId) || {} : {}; + const instances = []; + + imageIds.forEach(imageId => { + const instance = metaData.get('instance', imageId) || {}; + instances.push(instance); + }); + return instances; } const getInstanceNumber = (viewportData, viewportId, imageIndex, cornerstoneViewportService) => { @@ -323,7 +348,8 @@ const getInstanceNumber = (viewportData, viewportId, imageIndex, cornerstoneView instanceNumber = _getInstanceNumberFromVolume( viewportData, viewportId, - cornerstoneViewportService + cornerstoneViewportService, + imageIndex ); break; } @@ -354,15 +380,20 @@ function _getInstanceNumberFromStack(viewportData, imageIndex) { // Since volume viewports can be in any view direction, they can render // a reconstructed image which don't have imageIds; therefore, no instance and instanceNumber // Here we check if viewport is in the acquisition direction and if so, we get the instanceNumber -function _getInstanceNumberFromVolume(viewportData, viewportId, cornerstoneViewportService) { - const volumes = viewportData.volumes; +function _getInstanceNumberFromVolume( + viewportData, + viewportId, + cornerstoneViewportService, + imageIndex +) { + const volumes = viewportData.data; - // Todo: support fusion of acquisition plane which has instanceNumber - if (!volumes || volumes.length > 1) { + if (!volumes) { return; } - const volume = volumes[0]; + // Todo: support fusion of acquisition plane which has instanceNumber + const { volume } = volumes[0]; const { direction, imageIds } = volume; const cornerstoneViewport = cornerstoneViewportService.getCornerstoneViewport(viewportId); @@ -445,11 +476,15 @@ function InstanceNumberOverlayItem({ className="overlay-item flex flex-row" style={{ color: (customization && customization.color) || undefined }} > - I: - {instanceNumber !== undefined && instanceNumber !== null - ? `${instanceNumber} (${imageIndex + 1}/${numberOfSlices})` - : `${imageIndex + 1}/${numberOfSlices}`} + {instanceNumber !== undefined && instanceNumber !== null ? ( + <> + I: + {`${instanceNumber} (${imageIndex + 1}/${numberOfSlices})`} + + ) : ( + `${imageIndex + 1}/${numberOfSlices}` + )}
); diff --git a/extensions/cornerstone/src/getToolbarModule.tsx b/extensions/cornerstone/src/getToolbarModule.tsx index 807eeb4f3..565eb2a6b 100644 --- a/extensions/cornerstone/src/getToolbarModule.tsx +++ b/extensions/cornerstone/src/getToolbarModule.tsx @@ -182,6 +182,26 @@ export default function getToolbarModule({ commandsManager, servicesManager }) { } }, }, + { + name: 'evaluate.isUS', + evaluate: ({ viewportId, disabledText }) => { + const displaySetUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId); + + if (!displaySetUIDs?.length) { + return; + } + + const displaySets = displaySetUIDs.map(displaySetService.getDisplaySetByUID); + const isUS = displaySets.some(displaySet => displaySet.Modality === 'US'); + if (!isUS) { + return { + disabled: true, + className: '!text-common-bright ohif-disabled', + disabledText: disabledText ?? 'Not available on the current viewport', + }; + } + }, + }, { name: 'evaluate.viewportProperties.toggle', evaluate: ({ viewportId, button }) => { diff --git a/extensions/cornerstone/src/initCornerstoneTools.js b/extensions/cornerstone/src/initCornerstoneTools.js index 767b607a7..a4599201e 100644 --- a/extensions/cornerstone/src/initCornerstoneTools.js +++ b/extensions/cornerstone/src/initCornerstoneTools.js @@ -16,7 +16,6 @@ import { ProbeTool, AngleTool, CobbAngleTool, - PlanarFreehandROITool, MagnifyTool, CrosshairsTool, SegmentationDisplayTool, @@ -28,6 +27,11 @@ import { CircleScissorsTool, RectangleScissorsTool, SphereScissorsTool, + AdvancedMagnifyTool, + UltrasoundDirectionalTool, + PlanarFreehandROITool, + SplineROITool, + LivewireContourTool, } from '@cornerstonejs/tools'; import CalibrationLineTool from './tools/CalibrationLineTool'; @@ -55,7 +59,6 @@ export default function initCornerstoneTools(configuration = {}) { addTool(DragProbeTool); addTool(AngleTool); addTool(CobbAngleTool); - addTool(PlanarFreehandROITool); addTool(MagnifyTool); addTool(CrosshairsTool); addTool(SegmentationDisplayTool); @@ -66,6 +69,11 @@ export default function initCornerstoneTools(configuration = {}) { addTool(RectangleScissorsTool); addTool(SphereScissorsTool); addTool(ImageOverlayViewerTool); + addTool(AdvancedMagnifyTool); + addTool(UltrasoundDirectionalTool); + addTool(PlanarFreehandROITool); + addTool(SplineROITool); + addTool(LivewireContourTool); // Modify annotation tools to use dashed lines on SR const annotationStyle = { @@ -100,7 +108,6 @@ const toolNames = { Bidirectional: BidirectionalTool.toolName, Angle: AngleTool.toolName, CobbAngle: CobbAngleTool.toolName, - PlanarFreehandROI: PlanarFreehandROITool.toolName, Magnify: MagnifyTool.toolName, Crosshairs: CrosshairsTool.toolName, SegmentationDisplay: SegmentationDisplayTool.toolName, @@ -111,6 +118,11 @@ const toolNames = { RectangleScissors: RectangleScissorsTool.toolName, SphereScissors: SphereScissorsTool.toolName, ImageOverlayViewer: ImageOverlayViewerTool.toolName, + AdvancedMagnify: AdvancedMagnifyTool.toolName, + UltrasoundDirectional: UltrasoundDirectionalTool.toolName, + SplineROI: SplineROITool.toolName, + LivewireContour: LivewireContourTool.toolName, + PlanarFreehandROI: PlanarFreehandROITool.toolName, }; export { toolNames }; diff --git a/extensions/default/src/Toolbar/Toolbar.tsx b/extensions/default/src/Toolbar/Toolbar.tsx index 000a2b1da..26be1263b 100644 --- a/extensions/default/src/Toolbar/Toolbar.tsx +++ b/extensions/default/src/Toolbar/Toolbar.tsx @@ -31,14 +31,7 @@ export function Toolbar({ servicesManager }) { /> ); - return ( -
- {tool} -
- ); + return
{tool}
; })} ); diff --git a/modes/basic-test-mode/src/initToolGroups.ts b/modes/basic-test-mode/src/initToolGroups.ts index 97caed87a..a791d6ab0 100644 --- a/modes/basic-test-mode/src/initToolGroups.ts +++ b/modes/basic-test-mode/src/initToolGroups.ts @@ -49,6 +49,11 @@ function initDefaultToolGroup(extensionManager, toolGroupService, commandsManage { toolName: toolNames.Angle }, { toolName: toolNames.Magnify }, { toolName: toolNames.SegmentationDisplay }, + { toolName: toolNames.AdvancedMagnify }, + { toolName: toolNames.UltrasoundDirectional }, + { toolName: toolNames.PlanarFreehandROI }, + { toolName: toolNames.SplineROI }, + { toolName: toolNames.LivewireContour }, ], // enabled enabled: [{ toolName: toolNames.ImageOverlayViewer }], diff --git a/modes/basic-test-mode/src/moreTools.ts b/modes/basic-test-mode/src/moreTools.ts index e7da76369..1369bc629 100644 --- a/modes/basic-test-mode/src/moreTools.ts +++ b/modes/basic-test-mode/src/moreTools.ts @@ -124,7 +124,7 @@ const moreTools = [ evaluate: 'evaluate.viewportProperties.toggle', }), createButton({ - id: 'Probe', + id: 'DragProbe', icon: 'tool-probe', label: 'Probe', tooltip: 'Probe', @@ -173,11 +173,27 @@ const moreTools = [ }), createButton({ id: 'TagBrowser', - icon: 'list-bullets', + icon: 'dicom-tag-browser', label: 'Dicom Tag Browser', tooltip: 'Dicom Tag Browser', commands: 'openDICOMTagViewer', }), + createButton({ + id: 'AdvancedMagnify', + icon: 'icon-tool-loupe', + label: 'Loupe', + tooltip: 'Loupe', + commands: setToolActiveToolbar, + evaluate: 'evaluate.cornerstoneTool', + }), + createButton({ + id: 'UltrasoundDirectionalTool', + icon: 'icon-tool-ultrasound-bidirectional', + label: 'Ultrasound Directional', + tooltip: 'Ultrasound Directional', + commands: setToolActiveToolbar, + evaluate: ['evaluate.cornerstoneTool', 'evaluate.isUS'], + }), ], }, }, diff --git a/modes/basic-test-mode/src/toolbarButtons.ts b/modes/basic-test-mode/src/toolbarButtons.ts index 988e639f7..59e5bf59c 100644 --- a/modes/basic-test-mode/src/toolbarButtons.ts +++ b/modes/basic-test-mode/src/toolbarButtons.ts @@ -101,6 +101,30 @@ const toolbarButtons: Button[] = [ commands: setToolActiveToolbar, evaluate: 'evaluate.cornerstoneTool', }), + createButton({ + id: 'PlanarFreehandROI', + icon: 'icon-tool-freehand-roi', + label: 'Freehand ROI', + tooltip: 'Freehand ROI', + commands: setToolActiveToolbar, + evaluate: 'evaluate.cornerstoneTool', + }), + createButton({ + id: 'SplineROI', + icon: 'icon-tool-spline-roi', + label: 'Spline ROI', + tooltip: 'Spline ROI', + commands: setToolActiveToolbar, + evaluate: 'evaluate.cornerstoneTool', + }), + createButton({ + id: 'LivewireContour', + icon: 'icon-tool-livewire', + label: 'Livewire tool', + tooltip: 'Livewire tool', + commands: setToolActiveToolbar, + evaluate: 'evaluate.cornerstoneTool', + }), ], }, }, diff --git a/modes/longitudinal/src/initToolGroups.js b/modes/longitudinal/src/initToolGroups.js index 293729ccf..cb1eb8c8b 100644 --- a/modes/longitudinal/src/initToolGroups.js +++ b/modes/longitudinal/src/initToolGroups.js @@ -61,10 +61,14 @@ function initDefaultToolGroup( { toolName: toolNames.StackScroll }, { toolName: toolNames.Angle }, { toolName: toolNames.CobbAngle }, - { toolName: toolNames.PlanarFreehandROI }, { toolName: toolNames.Magnify }, { toolName: toolNames.SegmentationDisplay }, { toolName: toolNames.CalibrationLine }, + { toolName: toolNames.AdvancedMagnify }, + { toolName: toolNames.UltrasoundDirectional }, + { toolName: toolNames.PlanarFreehandROI }, + { toolName: toolNames.SplineROI }, + { toolName: toolNames.LivewireContour }, ], // enabled enabled: [{ toolName: toolNames.ImageOverlayViewer }, { toolName: toolNames.ReferenceLines }], diff --git a/modes/longitudinal/src/moreTools.ts b/modes/longitudinal/src/moreTools.ts index 8b0e0c9e0..d523418cd 100644 --- a/modes/longitudinal/src/moreTools.ts +++ b/modes/longitudinal/src/moreTools.ts @@ -124,7 +124,7 @@ const moreTools = [ evaluate: 'evaluate.viewportProperties.toggle', }), createButton({ - id: 'Probe', + id: 'DragProbe', icon: 'tool-probe', label: 'Probe', tooltip: 'Probe', @@ -173,11 +173,27 @@ const moreTools = [ }), createButton({ id: 'TagBrowser', - icon: 'list-bullets', + icon: 'dicom-tag-browser', label: 'Dicom Tag Browser', tooltip: 'Dicom Tag Browser', commands: 'openDICOMTagViewer', }), + createButton({ + id: 'AdvancedMagnify', + icon: 'icon-tool-loupe', + label: 'Loupe', + tooltip: 'Loupe', + commands: setToolActiveToolbar, + evaluate: 'evaluate.cornerstoneTool', + }), + createButton({ + id: 'UltrasoundDirectionalTool', + icon: 'icon-tool-ultrasound-bidirectional', + label: 'Ultrasound Directional', + tooltip: 'Ultrasound Directional', + commands: setToolActiveToolbar, + evaluate: ['evaluate.cornerstoneTool', 'evaluate.isUS'], + }), ], }, }, diff --git a/modes/longitudinal/src/toolbarButtons.ts b/modes/longitudinal/src/toolbarButtons.ts index ebb6b7654..79d0297e9 100644 --- a/modes/longitudinal/src/toolbarButtons.ts +++ b/modes/longitudinal/src/toolbarButtons.ts @@ -75,6 +75,30 @@ const toolbarButtons: Button[] = [ commands: setToolActiveToolbar, evaluate: 'evaluate.cornerstoneTool', }), + createButton({ + id: 'PlanarFreehandROI', + icon: 'icon-tool-freehand-roi', + label: 'Freehand ROI', + tooltip: 'Freehand ROI', + commands: setToolActiveToolbar, + evaluate: 'evaluate.cornerstoneTool', + }), + createButton({ + id: 'SplineROI', + icon: 'icon-tool-spline-roi', + label: 'Spline ROI', + tooltip: 'Spline ROI', + commands: setToolActiveToolbar, + evaluate: 'evaluate.cornerstoneTool', + }), + createButton({ + id: 'LivewireContour', + icon: 'icon-tool-livewire', + label: 'Livewire tool', + tooltip: 'Livewire tool', + commands: setToolActiveToolbar, + evaluate: 'evaluate.cornerstoneTool', + }), ], }, }, diff --git a/modes/segmentation/src/initToolGroups.ts b/modes/segmentation/src/initToolGroups.ts index 026cecdbf..f6d7556e0 100644 --- a/modes/segmentation/src/initToolGroups.ts +++ b/modes/segmentation/src/initToolGroups.ts @@ -58,6 +58,8 @@ function createTools(utilityModule) { { toolName: toolNames.StackScroll }, { toolName: toolNames.Magnify }, { toolName: toolNames.SegmentationDisplay }, + { toolName: toolNames.AdvancedMagnify }, + { toolName: toolNames.UltrasoundDirectional }, ], disabled: [{ toolName: toolNames.ReferenceLines }], }; diff --git a/modes/segmentation/src/toolbarButtons.ts b/modes/segmentation/src/toolbarButtons.ts index b732aff8e..5232312cc 100644 --- a/modes/segmentation/src/toolbarButtons.ts +++ b/modes/segmentation/src/toolbarButtons.ts @@ -212,7 +212,7 @@ const toolbarButtons: Button[] = [ evaluate: 'evaluate.viewportProperties.toggle', }), createButton({ - id: 'Probe', + id: 'DragProbe', icon: 'tool-probe', label: 'Probe', tooltip: 'Probe', @@ -261,11 +261,27 @@ const toolbarButtons: Button[] = [ }), createButton({ id: 'TagBrowser', - icon: 'list-bullets', + icon: 'dicom-tag-browser', label: 'Dicom Tag Browser', tooltip: 'Dicom Tag Browser', commands: 'openDICOMTagViewer', }), + createButton({ + id: 'AdvancedMagnify', + icon: 'icon-tool-loupe', + label: 'Loupe', + tooltip: 'Loupe', + commands: setToolActiveToolbar, + evaluate: 'evaluate.cornerstoneTool', + }), + createButton({ + id: 'UltrasoundDirectionalTool', + icon: 'icon-tool-ultrasound-bidirectional', + label: 'Ultrasound Directional', + tooltip: 'Ultrasound Directional', + commands: setToolActiveToolbar, + evaluate: ['evaluate.cornerstoneTool', 'evaluate.isUS'], + }), ], }, }, diff --git a/platform/ui/src/assets/icons/focus-frame-target.svg b/platform/ui/src/assets/icons/focus-frame-target.svg new file mode 100644 index 000000000..1139d858c --- /dev/null +++ b/platform/ui/src/assets/icons/focus-frame-target.svg @@ -0,0 +1,13 @@ + + + focus-frame-target + + + + + + + + + + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/icon-tool-brush.svg b/platform/ui/src/assets/icons/icon-tool-brush.svg index 2258260d9..a489624ee 100644 --- a/platform/ui/src/assets/icons/icon-tool-brush.svg +++ b/platform/ui/src/assets/icons/icon-tool-brush.svg @@ -1,9 +1,14 @@ - + tool-seg-brush - - - + + + - \ No newline at end of file + diff --git a/platform/ui/src/assets/icons/icon-tool-eraser.svg b/platform/ui/src/assets/icons/icon-tool-eraser.svg index a1f78fed4..0f4b3facc 100644 --- a/platform/ui/src/assets/icons/icon-tool-eraser.svg +++ b/platform/ui/src/assets/icons/icon-tool-eraser.svg @@ -1,10 +1,15 @@ - + tool-seg-eraser - - - - + + + + - \ No newline at end of file + diff --git a/platform/ui/src/assets/icons/icon-tool-shape.svg b/platform/ui/src/assets/icons/icon-tool-shape.svg index 290d156e6..2b6279025 100644 --- a/platform/ui/src/assets/icons/icon-tool-shape.svg +++ b/platform/ui/src/assets/icons/icon-tool-shape.svg @@ -1,9 +1,10 @@ - + tool-seg-shape - + - \ No newline at end of file + diff --git a/platform/ui/src/assets/icons/icon-tool-threshold.svg b/platform/ui/src/assets/icons/icon-tool-threshold.svg index 4870fa5a4..e1f3ed8e0 100644 --- a/platform/ui/src/assets/icons/icon-tool-threshold.svg +++ b/platform/ui/src/assets/icons/icon-tool-threshold.svg @@ -1,17 +1,22 @@ - + tool-seg-threshold - + - - + + + + - + - \ No newline at end of file + diff --git a/platform/ui/src/assets/icons/pencil.svg b/platform/ui/src/assets/icons/pencil.svg index 1f76dcd3b..1b643bfec 100644 --- a/platform/ui/src/assets/icons/pencil.svg +++ b/platform/ui/src/assets/icons/pencil.svg @@ -1,3 +1,4 @@ - - + + diff --git a/platform/ui/src/assets/icons/tool-angle.svg b/platform/ui/src/assets/icons/tool-angle.svg index 08d55baa8..064a1502f 100644 --- a/platform/ui/src/assets/icons/tool-angle.svg +++ b/platform/ui/src/assets/icons/tool-angle.svg @@ -1,7 +1,12 @@ - - - - - + + + tool-angle + + + + + + + - + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-annotate.svg b/platform/ui/src/assets/icons/tool-annotate.svg index 34787d5d5..b10a8ad52 100644 --- a/platform/ui/src/assets/icons/tool-annotate.svg +++ b/platform/ui/src/assets/icons/tool-annotate.svg @@ -1,5 +1,11 @@ - - - + + + tool-annotate + + + + + + - + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-bidirectional.svg b/platform/ui/src/assets/icons/tool-bidirectional.svg index da047bf71..4f77aa51b 100644 --- a/platform/ui/src/assets/icons/tool-bidirectional.svg +++ b/platform/ui/src/assets/icons/tool-bidirectional.svg @@ -1,9 +1,21 @@ - - - - - + + + tool-bidirectional + + + + + + + + + + + + + + + - - + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-calibrate.svg b/platform/ui/src/assets/icons/tool-calibrate.svg new file mode 100644 index 000000000..7fd8966db --- /dev/null +++ b/platform/ui/src/assets/icons/tool-calibrate.svg @@ -0,0 +1,19 @@ + + + tool-calibrate + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-capture.svg b/platform/ui/src/assets/icons/tool-capture.svg index 405d53c8c..391cb892e 100644 --- a/platform/ui/src/assets/icons/tool-capture.svg +++ b/platform/ui/src/assets/icons/tool-capture.svg @@ -1,7 +1,10 @@ - - - - - + + + tool- + + + + + - + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-cine.svg b/platform/ui/src/assets/icons/tool-cine.svg index 2c442a9f2..e3da518d3 100644 --- a/platform/ui/src/assets/icons/tool-cine.svg +++ b/platform/ui/src/assets/icons/tool-cine.svg @@ -1,6 +1,9 @@ - - - - + + + tool-cine + + + + - + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-circle.svg b/platform/ui/src/assets/icons/tool-circle.svg index e94375564..011ec5507 100644 --- a/platform/ui/src/assets/icons/tool-circle.svg +++ b/platform/ui/src/assets/icons/tool-circle.svg @@ -1,3 +1,8 @@ - - - + + + tool-circle + + + + + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-crosshair.svg b/platform/ui/src/assets/icons/tool-crosshair.svg index a03906e79..ebbd617f2 100644 --- a/platform/ui/src/assets/icons/tool-crosshair.svg +++ b/platform/ui/src/assets/icons/tool-crosshair.svg @@ -1,14 +1,14 @@ - - - - - - - - - + + + tool-crosshair + + + + + + + + + + + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-dicom-tag-browser.svg b/platform/ui/src/assets/icons/tool-dicom-tag-browser.svg new file mode 100644 index 000000000..f87608015 --- /dev/null +++ b/platform/ui/src/assets/icons/tool-dicom-tag-browser.svg @@ -0,0 +1,15 @@ + + + tool-dicom-tag-browser + + + + + + + + + + + + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-flip-horizontal.svg b/platform/ui/src/assets/icons/tool-flip-horizontal.svg index adf1de555..f3ab15fe5 100644 --- a/platform/ui/src/assets/icons/tool-flip-horizontal.svg +++ b/platform/ui/src/assets/icons/tool-flip-horizontal.svg @@ -1,7 +1,10 @@ - - - - - + + + tool-flip-horizontal + + + + + - + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-freehand-roi.svg b/platform/ui/src/assets/icons/tool-freehand-roi.svg new file mode 100644 index 000000000..42160326e --- /dev/null +++ b/platform/ui/src/assets/icons/tool-freehand-roi.svg @@ -0,0 +1,12 @@ + + + tool-freehand-roi + + + + + + + + + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-invert.svg b/platform/ui/src/assets/icons/tool-invert.svg index 0f92a4c37..9b5047ca2 100644 --- a/platform/ui/src/assets/icons/tool-invert.svg +++ b/platform/ui/src/assets/icons/tool-invert.svg @@ -1,6 +1,10 @@ - - - - + + + tool-invert + + + + + - + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-layout-default.svg b/platform/ui/src/assets/icons/tool-layout-default.svg new file mode 100644 index 000000000..b8721853d --- /dev/null +++ b/platform/ui/src/assets/icons/tool-layout-default.svg @@ -0,0 +1,21 @@ + + + tool-layout-default + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-length.svg b/platform/ui/src/assets/icons/tool-length.svg index 873460e7e..5ede3069d 100644 --- a/platform/ui/src/assets/icons/tool-length.svg +++ b/platform/ui/src/assets/icons/tool-length.svg @@ -1,6 +1,16 @@ - - - - + + + tool-length + + + + + + + + + + + - + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-magnetic-roi.svg b/platform/ui/src/assets/icons/tool-magnetic-roi.svg new file mode 100644 index 000000000..fbcb25bce --- /dev/null +++ b/platform/ui/src/assets/icons/tool-magnetic-roi.svg @@ -0,0 +1,17 @@ + + + tool-livewire + + + + + + + + + + + + + + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-magnify.svg b/platform/ui/src/assets/icons/tool-magnify.svg index e26496594..cb3ad1e61 100644 --- a/platform/ui/src/assets/icons/tool-magnify.svg +++ b/platform/ui/src/assets/icons/tool-magnify.svg @@ -1,6 +1,7 @@ - - - - + + + tool-magnify-area + + - + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-measure-elipse.svg b/platform/ui/src/assets/icons/tool-measure-elipse.svg new file mode 100644 index 000000000..5198db687 --- /dev/null +++ b/platform/ui/src/assets/icons/tool-measure-elipse.svg @@ -0,0 +1,12 @@ + + + tool-measure-elipse + + + + + + + + + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-move.svg b/platform/ui/src/assets/icons/tool-move.svg index 095a22527..411e95194 100644 --- a/platform/ui/src/assets/icons/tool-move.svg +++ b/platform/ui/src/assets/icons/tool-move.svg @@ -1,8 +1,13 @@ - - - - - - + + + tool-move + + + + + + + + - + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-quick-magnify.svg b/platform/ui/src/assets/icons/tool-quick-magnify.svg new file mode 100644 index 000000000..7a4766a7e --- /dev/null +++ b/platform/ui/src/assets/icons/tool-quick-magnify.svg @@ -0,0 +1,11 @@ + + + tool-zoom-in + + + + + + + + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-rectangle.svg b/platform/ui/src/assets/icons/tool-rectangle.svg index 58f95cc95..d534c8ad5 100644 --- a/platform/ui/src/assets/icons/tool-rectangle.svg +++ b/platform/ui/src/assets/icons/tool-rectangle.svg @@ -1,8 +1,12 @@ - - - - + + + tool-rectangle + + + + + - + - + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-reference-lines.svg b/platform/ui/src/assets/icons/tool-reference-lines.svg new file mode 100644 index 000000000..6329d81cb --- /dev/null +++ b/platform/ui/src/assets/icons/tool-reference-lines.svg @@ -0,0 +1,13 @@ + + + tool-reference-lines + + + + + + + + + + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-reset.svg b/platform/ui/src/assets/icons/tool-reset.svg index 4360043c0..5c6d49fe4 100644 --- a/platform/ui/src/assets/icons/tool-reset.svg +++ b/platform/ui/src/assets/icons/tool-reset.svg @@ -1,6 +1,9 @@ - - - - + + + tool-reset + + + + - + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-rotate-right.svg b/platform/ui/src/assets/icons/tool-rotate-right.svg index a30a64971..7ee994219 100644 --- a/platform/ui/src/assets/icons/tool-rotate-right.svg +++ b/platform/ui/src/assets/icons/tool-rotate-right.svg @@ -1,9 +1,12 @@ - - - - - - + + + tool-rotate-right + + + + + + - + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-spline-roi.svg b/platform/ui/src/assets/icons/tool-spline-roi.svg new file mode 100644 index 000000000..9266c536c --- /dev/null +++ b/platform/ui/src/assets/icons/tool-spline-roi.svg @@ -0,0 +1,14 @@ + + + tool-spline-roi + + + + + + + + + + + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-stack-image-sync.svg b/platform/ui/src/assets/icons/tool-stack-image-sync.svg new file mode 100644 index 000000000..d09d4861b --- /dev/null +++ b/platform/ui/src/assets/icons/tool-stack-image-sync.svg @@ -0,0 +1,10 @@ + + + tool-stack-image-sync + + + + + + + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-stack-scroll.svg b/platform/ui/src/assets/icons/tool-stack-scroll.svg index ea717b660..795da7701 100644 --- a/platform/ui/src/assets/icons/tool-stack-scroll.svg +++ b/platform/ui/src/assets/icons/tool-stack-scroll.svg @@ -1,7 +1,10 @@ - - - - - + + + tool-stack-scroll + + + + + - + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-toggle-dicom-overlay.svg b/platform/ui/src/assets/icons/tool-toggle-dicom-overlay.svg new file mode 100644 index 000000000..6cd55e57a --- /dev/null +++ b/platform/ui/src/assets/icons/tool-toggle-dicom-overlay.svg @@ -0,0 +1,9 @@ + + + tool-toggle-dicom-overlay + + + + + + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-ultrasound-bidirectional.svg b/platform/ui/src/assets/icons/tool-ultrasound-bidirectional.svg new file mode 100644 index 000000000..8ec735b1a --- /dev/null +++ b/platform/ui/src/assets/icons/tool-ultrasound-bidirectional.svg @@ -0,0 +1,15 @@ + + + tool-ultrasound-bidirectional + + + + + + + + + + + + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-window-level.svg b/platform/ui/src/assets/icons/tool-window-level.svg index d423da4cb..fd63f1b6e 100644 --- a/platform/ui/src/assets/icons/tool-window-level.svg +++ b/platform/ui/src/assets/icons/tool-window-level.svg @@ -1,6 +1,9 @@ - - - - + + + tool-window-level + + + + - + \ No newline at end of file diff --git a/platform/ui/src/assets/icons/tool-zoom.svg b/platform/ui/src/assets/icons/tool-zoom.svg index b6b35814a..c6fbfebc6 100644 --- a/platform/ui/src/assets/icons/tool-zoom.svg +++ b/platform/ui/src/assets/icons/tool-zoom.svg @@ -1,6 +1,9 @@ - - - - + + + tool-zoom + + + + - + \ No newline at end of file diff --git a/platform/ui/src/components/Icon/getIcon.js b/platform/ui/src/components/Icon/getIcon.js index e02d77b20..7bd5c5042 100644 --- a/platform/ui/src/components/Icon/getIcon.js +++ b/platform/ui/src/components/Icon/getIcon.js @@ -29,7 +29,7 @@ import infoAction from './../../assets/icons/info-action.svg'; import infoLink from './../../assets/icons/info-link.svg'; import launchArrow from './../../assets/icons/launch-arrow.svg'; import launchInfo from './../../assets/icons/launch-info.svg'; -import link from './../../assets/icons/link.svg'; +import link from './../../assets/icons/tool-stack-image-sync.svg'; import listBullets from './../../assets/icons/list-bullets.svg'; import lock from './../../assets/icons/lock.svg'; import logoOhifSmall from './../../assets/icons/logo-ohif-small.svg'; @@ -90,32 +90,32 @@ import prevArrow from './../../assets/icons/prev-arrow.svg'; import viewportStatusTracked from './../../assets/icons/viewport-status-tracked.svg'; /** Tools */ -import toggleDicomOverlay from './../../assets/icons/toggle-dicom-overlay.svg'; +import toggleDicomOverlay from './../../assets/icons/tool-toggle-dicom-overlay.svg'; import toolZoom from './../../assets/icons/tool-zoom.svg'; import toolCapture from './../../assets/icons/tool-capture.svg'; -import toolLayout from './../../assets/icons/tool-layout.svg'; +import toolLayout from './../../assets/icons/tool-layout-default.svg'; import toolMore from './../../assets/icons/tool-more-menu.svg'; import toolMove from './../../assets/icons/tool-move.svg'; import toolWindow from './../../assets/icons/tool-window-level.svg'; import toolAnnotate from './../../assets/icons/tool-annotate.svg'; import toolBidirectional from './../../assets/icons/tool-bidirectional.svg'; -import toolElipse from './../../assets/icons/tool-ellipse.svg'; +import toolElipse from './../../assets/icons/tool-measure-elipse.svg'; import toolCircle from './../../assets/icons/tool-circle.svg'; import toolLength from './../../assets/icons/tool-length.svg'; import toolStackScroll from './../../assets/icons/tool-stack-scroll.svg'; -import toolMagnify from './../../assets/icons/tool-magnify.svg'; +import toolMagnify from './../../assets/icons/tool-quick-magnify.svg'; import toolFlipHorizontal from './../../assets/icons/tool-flip-horizontal.svg'; import toolInvert from './../../assets/icons/tool-invert.svg'; import toolRotateRight from './../../assets/icons/tool-rotate-right.svg'; import toolCine from './../../assets/icons/tool-cine.svg'; import toolCrosshair from './../../assets/icons/tool-crosshair.svg'; -import toolProbe from './../../assets/icons/tool-probe.svg'; +import toolProbe from './../../assets/icons/focus-frame-target.svg'; import toolAngle from './../../assets/icons/tool-angle.svg'; import toolReset from './../../assets/icons/tool-reset.svg'; import toolRectangle from './../../assets/icons/tool-rectangle.svg'; import toolFusionColor from './../../assets/icons/tool-fusion-color.svg'; import toolCreateThreshold from './../../assets/icons/tool-create-threshold.svg'; -import toolCalibration from './../../assets/icons/tool-calibration.svg'; +import toolCalibration from './../../assets/icons/tool-calibrate.svg'; import toolFreehand from './../../assets/icons/tool-freehand.svg'; import toolFreehandPolygon from './../../assets/icons/tool-freehand-polygon.svg'; import toolPolygon from './../../assets/icons/tool-polygon.svg'; @@ -131,7 +131,7 @@ import rowUnlock from './../../assets/icons/row-unlock.svg'; import iconMPR from './../../assets/icons/icon-mpr-alt.svg'; import checkboxDefault from './../../assets/icons/checkbox-default.svg'; import checkboxActive from './../../assets/icons/checkbox-active.svg'; -import referenceLines from './../../assets/icons/reference-lines.svg'; +import referenceLines from './../../assets/icons/tool-reference-lines.svg'; import chevronDownNew from './../../assets/icons/icon-disclosure-close.svg'; import chevronLeftNew from './../../assets/icons/icon-disclosure-open.svg'; import settingsBars from './../../assets/icons/icon-display-settings.svg'; @@ -145,7 +145,12 @@ import iconToolScissor from './../../assets/icons/icon-tool-scissor.svg'; import iconToolShape from './../../assets/icons/icon-tool-shape.svg'; import iconToolThreshold from './../../assets/icons/icon-tool-threshold.svg'; import viewportWindowLevel from './../../assets/icons/viewport-window-level.svg'; - +import dicomTagBrowser from './../../assets/icons/tool-dicom-tag-browser.svg'; +import iconToolFreehandRoi from './../../assets/icons/tool-freehand-roi.svg'; +import iconToolLivewire from './../../assets/icons/tool-magnetic-roi.svg'; +import iconToolSplineRoi from './../../assets/icons/tool-spline-roi.svg'; +import iconToolUltrasoundBidirectional from './../../assets/icons/tool-ultrasound-bidirectional.svg'; +import iconToolLoupe from './../../assets/icons/tool-magnify.svg'; /** Old OHIF */ import oldTrash from './../../assets/icons/old-trash.svg'; import oldPlay from './../../assets/icons/old-play.svg'; @@ -355,6 +360,13 @@ const ICONS = { 'prev-arrow': prevArrow, 'viewport-status-tracked': viewportStatusTracked, 'viewport-window-level': viewportWindowLevel, + 'dicom-tag-browser': dicomTagBrowser, + /** New Tools */ + 'icon-tool-freehand-roi': iconToolFreehandRoi, + 'icon-tool-livewire': iconToolLivewire, + 'icon-tool-spline-roi': iconToolSplineRoi, + 'icon-tool-ultrasound-bidirectional': iconToolUltrasoundBidirectional, + 'icon-tool-loupe': iconToolLoupe, /** Old OHIF */ 'old-trash': oldTrash, 'old-play': oldPlay, diff --git a/platform/ui/src/components/IconButton/IconButton.tsx b/platform/ui/src/components/IconButton/IconButton.tsx index 6637bd06e..ea6922455 100644 --- a/platform/ui/src/components/IconButton/IconButton.tsx +++ b/platform/ui/src/components/IconButton/IconButton.tsx @@ -63,7 +63,7 @@ const iconSizeClasses = { small: 'w-4 h-4', medium: 'w-5 h-5', large: 'w-6 h-6', - toolbar: 'w-[24px] h-[24px]', + toolbar: 'w-[28px] h-[28px]', }; const fullWidthClasses = { @@ -92,7 +92,7 @@ const IconButton = ({ onClick(e); }; - const padding = size === 'toolbar' ? '8px' : size === 'toolbox' ? '4px' : null; + const padding = size === 'toolbar' ? '6px' : size === 'toolbox' ? '6px' : null; return ( )} diff --git a/platform/ui/src/components/ToolbarButton/ToolbarButton.tsx b/platform/ui/src/components/ToolbarButton/ToolbarButton.tsx index 226b1aeae..3d3938191 100644 --- a/platform/ui/src/components/ToolbarButton/ToolbarButton.tsx +++ b/platform/ui/src/components/ToolbarButton/ToolbarButton.tsx @@ -32,7 +32,7 @@ const ToolbarButton = ({ ? toolTipClassName : sizeToUse === 'toolbar' ? 'w-[40px] h-[40px]' - : 'w-[32px] h-[32px]'; + : 'w-[40px] h-[40px]'; return (