fix: backward compatibility with toolbar service (#5052)

modes/basic-dev-mode/src/index.ts

@@ -96,7 +96,7 @@ function modeFactory({ modeConfiguration }) {
 
       toolbarService.register(toolbarButtons);
       toolbarService.updateSection('primary', [
-        'measurementSection',
+        'MeasurementTools',
         'Zoom',
         'WindowLevel',
         'Pan',

modes/basic-dev-mode/src/toolbarButtons.ts

@@ -11,17 +11,17 @@ export const setToolActiveToolbar = {
 const toolbarButtons: Button[] = [
   // sections
   {
-    id: 'measurementSection',
+    id: 'MeasurementTools',
     uiType: 'ohif.toolButtonList',
     props: {
-      buttonSection: 'measurementSection',
+      buttonSection: true,
     },
   },
   {
     id: 'MoreTools',
     uiType: 'ohif.toolButtonList',
     props: {
-      buttonSection: 'moreToolsSection',
+      buttonSection: true,
     },
   },
 

modes/basic-test-mode/src/index.ts

@@ -103,7 +103,7 @@ function modeFactory() {
         'MoreTools',
       ]);
 
-      toolbarService.updateSection('windowLevelSection', [
+      toolbarService.updateSection('WindowLevelGroup', [
         'WindowLevel',
         'Soft tissue',
         'Lung',
@@ -118,10 +118,10 @@ function modeFactory() {
       ]);
 
       toolbarService.updateSection(toolbarService.sections.viewportActionMenu.bottomMiddle, [
-        'advancedRenderingControls',
+        'AdvancedRenderingControls',
       ]);
 
-      toolbarService.updateSection('advancedRenderingControls', [
+      toolbarService.updateSection('AdvancedRenderingControls', [
         'voiManualControlMenu',
         'Colorbar',
         'opacityMenu',
@@ -138,7 +138,7 @@ function modeFactory() {
         'windowLevelMenu',
       ]);
 
-      toolbarService.updateSection('windowLevelSection', [
+      toolbarService.updateSection('WindowLevelGroup', [
         'WindowLevel',
         'Soft tissue',
         'Lung',
@@ -147,7 +147,7 @@ function modeFactory() {
         'Brain',
       ]);
 
-      toolbarService.updateSection(toolbarService.sections.measurementSection, [
+      toolbarService.updateSection('MeasurementTools', [
         'Length',
         'Bidirectional',
         'ArrowAnnotate',
@@ -158,7 +158,7 @@ function modeFactory() {
         'LivewireContour',
       ]);
 
-      toolbarService.updateSection(toolbarService.sections.moreToolsSection, [
+      toolbarService.updateSection('MoreTools', [
         'Reset',
         'rotate-right',
         'flipHorizontal',

modes/basic-test-mode/src/toolbarButtons.ts

@@ -40,35 +40,26 @@ export const setToolActiveToolbar = {
   },
 };
 
-const callbacks = (toolName: string) => [
-  {
-    commandName: 'setViewportForToolConfiguration',
-    commandOptions: {
-      toolName,
-    },
-  },
-];
-
 const toolbarButtons: Button[] = [
   {
     id: 'MeasurementTools',
     uiType: 'ohif.toolButtonList',
     props: {
-      buttonSection: 'measurementSection',
+      buttonSection: true,
     },
   },
   {
     id: 'MoreTools',
     uiType: 'ohif.toolButtonList',
     props: {
-      buttonSection: 'moreToolsSection',
+      buttonSection: true,
     },
   },
   {
     id: 'WindowLevelGroup',
     uiType: 'ohif.toolButtonList',
     props: {
-      buttonSection: 'windowLevelSection',
+      buttonSection: true,
     },
   },
 

modes/longitudinal/src/index.ts

@@ -112,7 +112,7 @@ function modeFactory({ modeConfiguration }) {
         'AdvancedRenderingControls',
       ]);
 
-      toolbarService.updateSection(toolbarService.sections.advancedRenderingControlsSection, [
+      toolbarService.updateSection('AdvancedRenderingControls', [
         'windowLevelMenuEmbedded',
         'voiManualControlMenu',
         'Colorbar',
@@ -130,7 +130,7 @@ function modeFactory({ modeConfiguration }) {
         'windowLevelMenu',
       ]);
 
-      toolbarService.updateSection(toolbarService.sections.measurementSection, [
+      toolbarService.updateSection('MeasurementTools', [
         'Length',
         'Bidirectional',
         'ArrowAnnotate',
@@ -142,7 +142,7 @@ function modeFactory({ modeConfiguration }) {
         'LivewireContour',
       ]);
 
-      toolbarService.updateSection(toolbarService.sections.moreToolsSection, [
+      toolbarService.updateSection('MoreTools', [
         'Reset',
         'rotate-right',
         'flipHorizontal',

modes/longitudinal/src/toolbarButtons.ts

@@ -25,21 +25,21 @@ const toolbarButtons: Button[] = [
     id: 'MeasurementTools',
     uiType: 'ohif.toolButtonList',
     props: {
-      buttonSection: 'measurementSection',
+      buttonSection: true,
     },
   },
   {
     id: 'MoreTools',
     uiType: 'ohif.toolButtonList',
     props: {
-      buttonSection: 'moreToolsSection',
+      buttonSection: true,
     },
   },
   {
     id: 'AdvancedRenderingControls',
     uiType: 'ohif.advancedRenderingControls',
     props: {
-      buttonSection: 'advancedRenderingControlsSection',
+      buttonSection: true,
     },
   },
   // tool defs

modes/microscopy/src/index.tsx

@@ -50,7 +50,7 @@ function modeFactory({ modeConfiguration }) {
       toolbarService.register(toolbarButtons);
       toolbarService.updateSection('primary', ['MeasurementTools', 'dragPan', 'TagBrowser']);
 
-      toolbarService.updateSection('measurementSection', [
+      toolbarService.updateSection('MeasurementTools', [
         'line',
         'point',
         'polygon',

modes/microscopy/src/toolbarButtons.ts

@@ -13,7 +13,7 @@ const toolbarButtons: Button[] = [
     id: 'MeasurementTools',
     uiType: 'ohif.toolButtonList',
     props: {
-      buttonSection: 'measurementSection',
+      buttonSection: true,
     },
   },
   {

modes/preclinical-4d/src/getWorkflowSettings.ts

@@ -10,31 +10,35 @@ const cornerstone = {
   activeViewportWindowLevel: '@ohif/extension-cornerstone.panelModule.activeViewportWindowLevel',
 };
 
-const defaultButtons = [
-  {
-    buttonSection: 'primary',
-    buttons: ['MeasurementTools', 'Zoom', 'WindowLevel', 'Crosshairs', 'Pan'],
-  },
-  {
-    buttonSection: 'measurementSection',
-    buttons: ['Length', 'Bidirectional', 'ArrowAnnotate', 'EllipticalROI'],
-  },
-];
+function getDefaultButtons({ toolbarService }) {
+  return [
+    {
+      buttonSection: toolbarService.sections.primary,
+      buttons: ['MeasurementTools', 'Zoom', 'WindowLevel', 'Crosshairs', 'Pan'],
+    },
+    {
+      buttonSection: 'MeasurementTools',
+      buttons: ['Length', 'Bidirectional', 'ArrowAnnotate', 'EllipticalROI'],
+    },
+  ];
+}
 
-const ROIThresholdToolbox = [
-  {
-    buttonSection: 'dynamic-toolbox',
-    buttons: ['SegmentationTools'],
-  },
-  {
-    buttonSection: 'segmentationToolboxToolsSection',
-    buttons: ['BrushTools', 'RectangleROIStartEndThreshold'],
-  },
-  {
-    buttonSection: 'brushToolsSection',
-    buttons: ['Brush', 'Eraser', 'Threshold'],
-  },
-];
+function getROIThresholdToolbox({ toolbarService }) {
+  return [
+    {
+      buttonSection: toolbarService.sections.dynamicToolbox,
+      buttons: ['SegmentationTools'],
+    },
+    {
+      buttonSection: 'SegmentationTools',
+      buttons: ['BrushTools', 'RectangleROIStartEndThreshold'],
+    },
+    {
+      buttonSection: 'BrushTools',
+      buttons: ['Brush', 'Eraser', 'Threshold'],
+    },
+  ];
+}
 
 const defaultLeftPanel = [[dynamicVolume.leftPanel, cornerstone.activeViewportWindowLevel]];
 
@@ -46,6 +50,10 @@ const defaultLayout = {
 };
 
 function getWorkflowSettings({ servicesManager }) {
+  const { toolbarService } = servicesManager.services;
+  const defaultButtons = getDefaultButtons({ toolbarService });
+  const ROIThresholdToolbox = getROIThresholdToolbox({ toolbarService });
+
   return {
     steps: [
       {

modes/preclinical-4d/src/index.tsx

@@ -56,7 +56,7 @@ function modeFactory({ modeConfiguration }) {
 
       toolbarService.register(toolbarButtons);
 
-      toolbarService.updateSection('secondary', ['ProgressDropdown']);
+      toolbarService.updateSection(toolbarService.sections.secondary, ['ProgressDropdown']);
 
       toolbarService.updateSection(toolbarService.sections.viewportActionMenu.topLeft, [
         'orientationMenu',
@@ -72,7 +72,7 @@ function modeFactory({ modeConfiguration }) {
         'AdvancedRenderingControls',
       ]);
 
-      toolbarService.updateSection(toolbarService.sections.advancedRenderingControlsSection, [
+      toolbarService.updateSection('AdvancedRenderingControls', [
         'windowLevelMenuEmbedded',
         'voiManualControlMenu',
         'Colorbar',

modes/preclinical-4d/src/toolbarButtons.tsx

@@ -22,28 +22,28 @@ const toolbarButtons = [
     id: 'MeasurementTools',
     uiType: 'ohif.toolButtonList',
     props: {
-      buttonSection: 'measurementSection',
+      buttonSection: true,
     },
   },
   {
     id: 'BrushTools',
     uiType: 'ohif.toolBoxButtonGroup',
     props: {
-      buttonSection: 'brushToolsSection',
+      buttonSection: true,
     },
   },
   {
     id: 'SegmentationTools',
     uiType: 'ohif.toolBoxButton',
     props: {
-      buttonSection: 'segmentationToolboxToolsSection',
+      buttonSection: true,
     },
   },
   {
     id: 'AdvancedRenderingControls',
     uiType: 'ohif.advancedRenderingControls',
     props: {
-      buttonSection: 'advancedRenderingControlsSection',
+      buttonSection: true,
     },
   },
   {

modes/segmentation/src/index.tsx

@@ -83,7 +83,7 @@ function modeFactory({ modeConfiguration }) {
         'AdvancedRenderingControls',
       ]);
 
-      toolbarService.updateSection(toolbarService.sections.advancedRenderingControlsSection, [
+      toolbarService.updateSection('AdvancedRenderingControls', [
         'windowLevelMenuEmbedded',
         'voiManualControlMenu',
         'Colorbar',
@@ -101,7 +101,7 @@ function modeFactory({ modeConfiguration }) {
         'windowLevelMenu',
       ]);
 
-      toolbarService.updateSection('moreToolsSection', [
+      toolbarService.updateSection('MoreTools', [
         'Reset',
         'rotate-right',
         'flipHorizontal',
@@ -114,22 +114,22 @@ function modeFactory({ modeConfiguration }) {
         'TagBrowser',
       ]);
 
-      toolbarService.updateSection('segmentationToolbox', [
+      toolbarService.updateSection(toolbarService.sections.segmentationToolbox, [
         'SegmentationUtilities',
         'SegmentationTools',
       ]);
-      toolbarService.updateSection('segmentationToolboxUtilitySection', [
+      toolbarService.updateSection('SegmentationUtilities', [
         'LabelmapSlicePropagation',
         'InterpolateLabelmap',
         'SegmentBidirectional',
       ]);
-      toolbarService.updateSection('segmentationToolboxToolsSection', [
+      toolbarService.updateSection('SegmentationTools', [
         'BrushTools',
         'MarkerLabelmap',
         'RegionSegmentPlus',
         'Shapes',
       ]);
-      toolbarService.updateSection('brushToolsSection', ['Brush', 'Eraser', 'Threshold']);
+      toolbarService.updateSection('BrushTools', ['Brush', 'Eraser', 'Threshold']);
     },
     onModeExit: ({ servicesManager }: withAppTypes) => {
       const {

modes/segmentation/src/toolbarButtons.ts

@@ -22,7 +22,7 @@ const toolbarButtons: Button[] = [
     id: 'AdvancedRenderingControls',
     uiType: 'ohif.advancedRenderingControls',
     props: {
-      buttonSection: 'advancedRenderingControlsSection',
+      buttonSection: true,
     },
   },
   {
@@ -160,14 +160,14 @@ const toolbarButtons: Button[] = [
     id: 'MoreTools',
     uiType: 'ohif.toolButtonList',
     props: {
-      buttonSection: 'moreToolsSection',
+      buttonSection: true,
     },
   },
   {
     id: 'BrushTools',
     uiType: 'ohif.toolBoxButtonGroup',
     props: {
-      buttonSection: 'brushToolsSection',
+      buttonSection: true,
     },
   },
   // Section containers for the nested toolbox
@@ -175,14 +175,14 @@ const toolbarButtons: Button[] = [
     id: 'SegmentationUtilities',
     uiType: 'ohif.toolBoxButton',
     props: {
-      buttonSection: 'segmentationToolboxUtilitySection',
+      buttonSection: true,
     },
   },
   {
     id: 'SegmentationTools',
     uiType: 'ohif.toolBoxButton',
     props: {
-      buttonSection: 'segmentationToolboxToolsSection',
+      buttonSection: true,
     },
   },
   // tool defs

modes/tmtv/src/index.ts

@@ -106,7 +106,7 @@ function modeFactory({ modeConfiguration }) {
         'AdvancedRenderingControls',
       ]);
 
-      toolbarService.updateSection(toolbarService.sections.advancedRenderingControlsSection, [
+      toolbarService.updateSection('AdvancedRenderingControls', [
         'windowLevelMenuEmbedded',
         'voiManualControlMenu',
         'Colorbar',
@@ -124,7 +124,7 @@ function modeFactory({ modeConfiguration }) {
         'windowLevelMenu',
       ]);
 
-      toolbarService.updateSection('measurementSection', [
+      toolbarService.updateSection('MeasurementTools', [
         'Length',
         'Bidirectional',
         'ArrowAnnotate',

modes/tmtv/src/toolbarButtons.ts

@@ -12,28 +12,28 @@ const toolbarButtons = [
     id: 'MeasurementTools',
     uiType: 'ohif.toolButtonList',
     props: {
-      buttonSection: 'measurementSection',
+      buttonSection: true,
     },
   },
   {
     id: 'SegmentationTools',
     uiType: 'ohif.toolBoxButton',
     props: {
-      buttonSection: 'segmentationToolboxToolsSection',
+      buttonSection: true,
     },
   },
   {
     id: 'BrushTools',
     uiType: 'ohif.toolBoxButtonGroup',
     props: {
-      buttonSection: 'brushToolsSection',
+      buttonSection: true,
     },
   },
   {
     id: 'AdvancedRenderingControls',
     uiType: 'ohif.advancedRenderingControls',
     props: {
-      buttonSection: 'advancedRenderingControlsSection',
+      buttonSection: true,
     },
   },
   {