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) {
-          toolGroup.setToolDisabled(toolName);
-        } else {
+        if (enabled) {
           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>
       );