feat(actions): simplify action corner api through the toolbarService (#5033)

modes/tmtv/src/index.ts

@@ -88,28 +88,56 @@ function modeFactory({ modeConfiguration }) {
       );
 
       unsubscriptions.push(unsubscribe);
-      toolbarService.addButtons(toolbarButtons);
-      toolbarService.createButtonSection('primary', [
+      toolbarService.register(toolbarButtons);
+      toolbarService.updateSection(toolbarService.sections.primary, [
         'MeasurementTools',
         'Zoom',
+        'Pan',
         'WindowLevel',
         'Crosshairs',
-        'Pan',
       ]);
-      toolbarService.createButtonSection('measurementSection', [
+
+      toolbarService.updateSection(toolbarService.sections.viewportActionMenu.topLeft, [
+        'orientationMenu',
+        'dataOverlayMenu',
+      ]);
+
+      toolbarService.updateSection(toolbarService.sections.viewportActionMenu.bottomMiddle, [
+        'AdvancedRenderingControls',
+      ]);
+
+      toolbarService.updateSection(toolbarService.sections.advancedRenderingControlsSection, [
+        'windowLevelMenuEmbedded',
+        'voiManualControlMenu',
+        'Colorbar',
+        'opacityMenu',
+        'thresholdMenu',
+      ]);
+
+      toolbarService.updateSection(toolbarService.sections.viewportActionMenu.topRight, [
+        'modalityLoadBadge',
+        'trackingStatus',
+        'navigationComponent',
+      ]);
+
+      toolbarService.updateSection(toolbarService.sections.viewportActionMenu.bottomLeft, [
+        'windowLevelMenu',
+      ]);
+
+      toolbarService.updateSection('measurementSection', [
         'Length',
         'Bidirectional',
         'ArrowAnnotate',
         'EllipticalROI',
       ]);
 
-      toolbarService.createButtonSection('ROIThresholdToolbox', ['SegmentationTools']);
-      toolbarService.createButtonSection('segmentationToolboxToolsSection', [
+      toolbarService.updateSection('ROIThresholdToolbox', ['SegmentationTools']);
+      toolbarService.updateSection('segmentationToolboxToolsSection', [
         'RectangleROIStartEndThreshold',
         'BrushTools',
       ]);
 
-      toolbarService.createButtonSection('brushToolsSection', ['Brush', 'Eraser', 'Threshold']);
+      toolbarService.updateSection('brushToolsSection', ['Brush', 'Eraser', 'Threshold']);
 
       customizationService.setCustomizations({
         'panelSegmentation.tableMode': {

modes/tmtv/src/toolbarButtons.ts

@@ -13,14 +13,12 @@ const toolbarButtons = [
     uiType: 'ohif.toolButtonList',
     props: {
       buttonSection: 'measurementSection',
-      groupId: 'MeasurementTools',
     },
   },
   {
     id: 'SegmentationTools',
     uiType: 'ohif.toolBoxButton',
     props: {
-      groupId: 'SegmentationTools',
       buttonSection: 'segmentationToolboxToolsSection',
     },
   },
@@ -29,7 +27,73 @@ const toolbarButtons = [
     uiType: 'ohif.toolBoxButtonGroup',
     props: {
       buttonSection: 'brushToolsSection',
-      groupId: 'BrushTools',
+    },
+  },
+  {
+    id: 'AdvancedRenderingControls',
+    uiType: 'ohif.advancedRenderingControls',
+    props: {
+      buttonSection: 'advancedRenderingControlsSection',
+    },
+  },
+  {
+    id: 'modalityLoadBadge',
+    uiType: 'ohif.modalityLoadBadge',
+    props: {
+      icon: 'Status',
+      label: 'Status',
+      tooltip: 'Status',
+      evaluate: {
+        name: 'evaluate.modalityLoadBadge',
+        hideWhenDisabled: true,
+      },
+    },
+  },
+  {
+    id: 'Colorbar',
+    uiType: 'ohif.colorbar',
+    props: {
+      type: 'tool',
+      label: 'Colorbar',
+    },
+  },
+  {
+    id: 'navigationComponent',
+    uiType: 'ohif.navigationComponent',
+    props: {
+      icon: 'Navigation',
+      label: 'Navigation',
+      tooltip: 'Navigate between segments/measurements and manage their visibility',
+      evaluate: {
+        name: 'evaluate.navigationComponent',
+        hideWhenDisabled: true,
+      },
+    },
+  },
+  {
+    id: 'windowLevelMenuEmbedded',
+    uiType: 'ohif.windowLevelMenuEmbedded',
+    props: {
+      icon: 'WindowLevel',
+      label: 'Window Level',
+      tooltip: 'Adjust window/level presets and customize image contrast settings',
+      evaluate: {
+        name: 'evaluate.windowLevelMenuEmbedded',
+        hideWhenDisabled: true,
+      },
+    },
+  },
+  {
+    id: 'trackingStatus',
+    uiType: 'ohif.trackingStatus',
+    props: {
+      icon: 'TrackingStatus',
+      label: 'Tracking Status',
+      tooltip: 'View and manage tracking status of measurements and annotations',
+      evaluate: {
+        name: 'evaluate.trackingStatus',
+        hideWhenDisabled: true,
+      },
     },
   },
   {
@@ -295,6 +359,76 @@ const toolbarButtons = [
       ],
     },
   },
+  {
+    id: 'dataOverlayMenu',
+    uiType: 'ohif.dataOverlayMenu',
+    props: {
+      icon: 'ViewportViews',
+      label: 'Data Overlay',
+      tooltip: 'Configure data overlay options and manage foreground/background display sets',
+      evaluate: 'evaluate.dataOverlayMenu',
+    },
+  },
+  {
+    id: 'orientationMenu',
+    uiType: 'ohif.orientationMenu',
+    props: {
+      icon: 'OrientationSwitch',
+      label: 'Orientation',
+      tooltip:
+        'Change viewport orientation between axial, sagittal, coronal and acquisition planes',
+      evaluate: {
+        name: 'evaluate.orientationMenu',
+        // hideWhenDisabled: true,
+      },
+    },
+  },
+  {
+    id: 'windowLevelMenu',
+    uiType: 'ohif.windowLevelMenu',
+    props: {
+      icon: 'WindowLevel',
+      label: 'Window Level',
+      tooltip: 'Adjust window/level presets and customize image contrast settings',
+      evaluate: 'evaluate.windowLevelMenu',
+    },
+  },
+  {
+    id: 'voiManualControlMenu',
+    uiType: 'ohif.voiManualControlMenu',
+    props: {
+      icon: 'WindowLevelAdvanced',
+      label: 'Advanced Window Level',
+      tooltip: 'Advanced window/level settings with manual controls and presets',
+      evaluate: 'evaluate.voiManualControlMenu',
+    },
+  },
+  {
+    id: 'thresholdMenu',
+    uiType: 'ohif.thresholdMenu',
+    props: {
+      icon: 'Threshold',
+      label: 'Threshold',
+      tooltip: 'Image threshold settings',
+      evaluate: {
+        name: 'evaluate.thresholdMenu',
+        hideWhenDisabled: true,
+      },
+    },
+  },
+  {
+    id: 'opacityMenu',
+    uiType: 'ohif.opacityMenu',
+    props: {
+      icon: 'Opacity',
+      label: 'Opacity',
+      tooltip: 'Image opacity settings',
+      evaluate: {
+        name: 'evaluate.opacityMenu',
+        hideWhenDisabled: true,
+      },
+    },
+  },
 ];
 
 export default toolbarButtons;