feat(toolbox): Refactor Toolbar and Toolbox to enable sections (#4825)

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

@@ -10,10 +10,31 @@ const cornerstone = {
   activeViewportWindowLevel: '@ohif/extension-cornerstone.panelModule.activeViewportWindowLevel',
 };
 
-const defaultButtons = {
-  buttonSection: 'primary',
-  buttons: ['MeasurementTools', 'Zoom', 'WindowLevel', 'Crosshairs', 'Pan'],
-};
+const defaultButtons = [
+  {
+    buttonSection: 'primary',
+    buttons: ['MeasurementTools', 'Zoom', 'WindowLevel', 'Crosshairs', 'Pan'],
+  },
+  {
+    buttonSection: 'measurementSection',
+    buttons: ['Length', 'Bidirectional', 'ArrowAnnotate', 'EllipticalROI'],
+  },
+];
+
+const ROIThresholdToolbox = [
+  {
+    buttonSection: 'dynamic-toolbox',
+    buttons: ['SegmentationTools'],
+  },
+  {
+    buttonSection: 'segmentationToolboxToolsSection',
+    buttons: ['BrushTools', 'RectangleROIStartEndThreshold'],
+  },
+  {
+    buttonSection: 'brushToolsSection',
+    buttons: ['Brush', 'Eraser', 'Threshold'],
+  },
+];
 
 const defaultLeftPanel = [[dynamicVolume.leftPanel, cornerstone.activeViewportWindowLevel]];
 
@@ -66,13 +87,7 @@ function getWorkflowSettings({ servicesManager }) {
             rightPanelClosed: false,
           },
         },
-        toolbarButtons: [
-          defaultButtons,
-          {
-            buttonSection: 'dynamic-toolbox',
-            buttons: ['BrushTools', 'RectangleROIStartEndThreshold'],
-          },
-        ],
+        toolbarButtons: [...defaultButtons, ...ROIThresholdToolbox],
         hangingProtocol: {
           protocolId: 'default4D',
           stageId: 'roiQuantification',