ui(settings): Moved Segment Label Display from tools to settings panel (#5422)

Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com>

extensions/cornerstone/src/commandsModule.ts

@@ -1858,22 +1858,16 @@ function commandsModule({
         }
       });
     },
-    toggleSegmentLabel: () => {
+    toggleSegmentLabel: ({ enabled }) => {
       const toolName = cornerstoneTools.SegmentLabelTool.toolName;
       const toolGroupIds = toolGroupService.getToolGroupIds();
 
-      const isOn = toolGroupIds.some(toolGroupId => {
-        const toolGroup = cornerstoneTools.ToolGroupManager.getToolGroup(toolGroupId);
-        const mode = toolGroup.getToolInstance(toolName)?.mode;
-        return mode === 'Active';
-      });
-
       toolGroupIds.forEach(toolGroupId => {
         const toolGroup = cornerstoneTools.ToolGroupManager.getToolGroup(toolGroupId);
-        if (isOn) {
+        if (enabled) {
-          toolGroup.setToolDisabled(toolName);
-        } else {
           toolGroup.setToolActive(toolName);
+        } else {
+          toolGroup.setToolDisabled(toolName);
         }
       });
     },

extensions/cornerstone/src/customizations/segmentationPanelCustomization.tsx

@@ -36,6 +36,7 @@ export default function getSegmentationPanelCustomization({ commandsManager, ser
     'segmentationToolbox.config': () => {
       // Get initial states based on current configuration
       const [previewEdits, setPreviewEdits] = useState(false);
+      const [segmentLabelEnabled, setSegmentLabelEnabled] = useState(false);
       const [toggleSegmentEnabled, setToggleSegmentEnabled] = useState(false);
       const [useCenterAsSegmentIndex, setUseCenterAsSegmentIndex] = useState(false);
       const handlePreviewEditsChange = checked => {
@@ -53,14 +54,19 @@ export default function getSegmentationPanelCustomization({ commandsManager, ser
         commandsManager.run('toggleUseCenterSegmentIndex', { toggle: checked });
       };
 
+      const handleSegmentLabelEnabledChange = checked => {
+        setSegmentLabelEnabled(checked);
+        commandsManager.run('toggleSegmentLabel', { enabled: checked });
+      };
+
       return (
-        <div className="bg-muted flex flex-col gap-4 border-b border-b-[2px] border-black px-2 py-3">
+        <div className="bg-muted flex flex-col gap-2 border-b border-b-[2px] border-black px-2 py-3">
           <div className="flex items-center gap-2">
             <Switch
               checked={previewEdits}
               onCheckedChange={handlePreviewEditsChange}
             />
-            <span className="text-base text-white">Preview edits before creating</span>
+            <span className="text-foreground text-base">Preview edits before creating</span>
           </div>
 
           <div className="flex items-center gap-2">
@@ -68,7 +74,7 @@ export default function getSegmentationPanelCustomization({ commandsManager, ser
               checked={useCenterAsSegmentIndex}
               onCheckedChange={handleUseCenterAsSegmentIndexChange}
             />
-            <span className="text-base text-white">Use center as segment index</span>
+            <span className="text-foreground text-base">Use center as segment index</span>
           </div>
 
           <div className="flex items-center gap-2">
@@ -76,7 +82,15 @@ export default function getSegmentationPanelCustomization({ commandsManager, ser
               checked={toggleSegmentEnabled}
               onCheckedChange={handleToggleSegmentEnabledChange}
             />
-            <span className="text-base text-white">Hover on segment border to activate</span>
+            <span className="text-foreground text-base">Hover on segment border to activate</span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Switch
+              checked={segmentLabelEnabled}
+              onCheckedChange={handleSegmentLabelEnabledChange}
+            />
+            <span className="text-foreground text-base">Show segment name on hover</span>
           </div>
         </div>
       );

modes/longitudinal/src/index.ts

@@ -161,7 +161,6 @@ function modeFactory({ modeConfiguration }) {
         'AdvancedMagnify',
         'UltrasoundDirectionalTool',
 'WindowLevelRegion',
-        'SegmentLabelTool',
       ]);
 
       customizationService.setCustomizations({

modes/longitudinal/src/toolbarButtons.ts

@@ -667,24 +667,6 @@ const toolbarButtons: Button[] = [
       buttonSection: true,
     },
   },
-  {
-    id: 'SegmentLabelTool',
-    uiType: 'ohif.toolBoxButton',
-    props: {
-      icon: 'tool-segment-label',
-      label: i18n.t('Buttons:Segment Label Display'),
-      tooltip: i18n.t(
-        'Buttons:Click to show or hide segment labels when hovering with your mouse.'
-      ),
-      commands: { commandName: 'toggleSegmentLabel' },
-      evaluate: [
-        'evaluate.cornerstoneTool.toggle',
-        {
-          name: 'evaluate.cornerstone.hasSegmentation',
-        },
-      ],
-    },
-  },
   // {
   //   id: 'Undo',
   //   uiType: 'ohif.toolButton',

modes/segmentation/src/index.tsx

@@ -122,7 +122,6 @@ function modeFactory({ modeConfiguration }) {
         'LabelmapSlicePropagation',
         'InterpolateLabelmap',
 'SegmentBidirectional',
-        'SegmentLabelTool',
       ]);
       toolbarService.updateSection('SegmentationTools', [
         'BrushTools',

modes/segmentation/src/toolbarButtons.ts

@@ -749,24 +749,6 @@ const toolbarButtons: Button[] = [
       ],
     },
   },
-  {
-    id: 'SegmentLabelTool',
-    uiType: 'ohif.toolBoxButton',
-    props: {
-      icon: 'tool-segment-label',
-      label: i18n.t('Buttons:Segment Label Display'),
-      tooltip: i18n.t(
-        'Buttons:Click to show or hide segment labels when hovering with your mouse.'
-      ),
-      commands: { commandName: 'toggleSegmentLabel' },
-      evaluate: [
-        'evaluate.cornerstoneTool.toggle',
-        {
-          name: 'evaluate.cornerstone.hasSegmentation',
-        },
-      ],
-    },
-  },
 ];
 
 export default toolbarButtons;