feat(segmentation): Enhanced segmentation panel design for TMTV (#3988)

Co-authored-by: Alireza <ar.sedghi@gmail.com>

extensions/tmtv/src/getPanelModule.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { PanelPetSUV, PanelROIThresholdSegmentation } from './Panels';
+import { Toolbox } from '@ohif/ui';
 
 // TODO:
 // - No loading UI exists yet
@@ -12,18 +13,26 @@ function getPanelModule({ commandsManager, extensionManager, servicesManager })
       <PanelPetSUV
         commandsManager={commandsManager}
         servicesManager={servicesManager}
-        extensionManager={extensionManager}
       />
     );
   };
 
   const wrappedROIThresholdSeg = () => {
     return (
-      <PanelROIThresholdSegmentation
-        commandsManager={commandsManager}
-        servicesManager={servicesManager}
-        extensionManager={extensionManager}
-      />
+      <>
+        <Toolbox
+          commandsManager={commandsManager}
+          servicesManager={servicesManager}
+          extensionManager={extensionManager}
+          buttonSectionId="tmtvToolbox"
+          title="Threshold Tools"
+        />
+        <PanelROIThresholdSegmentation
+          commandsManager={commandsManager}
+          servicesManager={servicesManager}
+          extensionManager={extensionManager}
+        />
+      </>
     );
   };
 
@@ -31,15 +40,15 @@ function getPanelModule({ commandsManager, extensionManager, servicesManager })
     {
       name: 'petSUV',
       iconName: 'tab-patient-info',
-      iconLabel: 'PET SUV',
-      label: 'PET SUV',
+      iconLabel: 'Patient Info',
+      label: 'Patient Info',
       component: wrappedPanelPetSuv,
     },
     {
       name: 'ROIThresholdSeg',
-      iconName: 'tab-roi-threshold',
-      iconLabel: 'ROI Threshold',
-      label: 'ROI Threshold',
+      iconName: 'tab-segmentation',
+      iconLabel: 'Segmentation',
+      label: 'Segmentation',
       component: wrappedROIThresholdSeg,
     },
   ];