feat: improve segment label (#5217)

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

extensions/cornerstone/src/commandsModule.ts

@@ -102,6 +102,7 @@ let segmentAIEnabled = false;
 function commandsModule({
   servicesManager,
   commandsManager,
+  extensionManager,
 }: OhifTypes.Extensions.ExtensionParams): OhifTypes.Extensions.CommandsModule {
   const {
     viewportGridService,
@@ -1743,17 +1744,62 @@ function commandsModule({
         }
       });
     },
-    toggleSegmentLabel: ({ toggle }) => {
+    toggleSegmentLabel: () => {
+      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 (toggle) {
-          toolGroup.setToolActive(cornerstoneTools.SegmentLabelTool.toolName);
+        if (isOn) {
+          toolGroup.setToolDisabled(toolName);
         } else {
-          toolGroup.setToolDisabled(cornerstoneTools.SegmentLabelTool.toolName);
+          toolGroup.setToolActive(toolName);
         }
       });
     },
+    /**
+     * Used to sync the apps initial state with the config file settings.
+     *
+     * Will mutate the tools object of the given tool group and add the segmentLabelTool to the proper place.
+     *
+     * Use it before initializing the toolGroup with the tools.
+     */
+    initializeSegmentLabelTool: ({ tools }) => {
+      const appConfig = extensionManager.appConfig;
+      const segmentLabelConfig = appConfig.segmentation?.segmentLabel;
+
+      if (segmentLabelConfig?.enabledByDefault) {
+        const activeTools = tools?.active ?? [];
+        activeTools.push({
+          toolName: toolNames.SegmentLabel,
+          configuration: {
+            hoverTimeout: segmentLabelConfig?.hoverTimeout ?? 1,
+            color: segmentLabelConfig?.labelColor,
+            background: segmentLabelConfig?.background,
+          },
+        });
+
+        tools.active = activeTools;
+        return tools;
+      }
+
+      const disabledTools = tools?.disabled ?? [];
+      disabledTools.push({
+        toolName: toolNames.SegmentLabel,
+        configuration: {
+          hoverTimeout: segmentLabelConfig?.hoverTimeout ?? 1,
+          color: segmentLabelConfig?.labelColor,
+        },
+      });
+      tools.disabled = disabledTools;
+      return tools;
+    },
     toggleUseCenterSegmentIndex: ({ toggle }) => {
       let labelmapTools = getLabelmapTools({ toolGroupService });
       labelmapTools = labelmapTools.filter(tool => !tool.toolName.includes('Eraser'));
@@ -2369,6 +2415,7 @@ function commandsModule({
     startRecordingForAnnotationGroup: actions.startRecordingForAnnotationGroup,
     endRecordingForAnnotationGroup: actions.endRecordingForAnnotationGroup,
     toggleSegmentLabel: actions.toggleSegmentLabel,
+    initializeSegmentLabelTool: actions.initializeSegmentLabelTool,
   };
 
   return {

extensions/cornerstone/src/customizations/segmentationPanelCustomization.tsx

@@ -38,7 +38,6 @@ export default function getSegmentationPanelCustomization({ commandsManager, ser
       const [previewEdits, setPreviewEdits] = useState(false);
       const [toggleSegmentEnabled, setToggleSegmentEnabled] = useState(false);
       const [useCenterAsSegmentIndex, setUseCenterAsSegmentIndex] = useState(false);
-      const [shouldShowLabelOnHover, setShouldShowLabelOnHover] = useState(false);
       const handlePreviewEditsChange = checked => {
         setPreviewEdits(checked);
         commandsManager.run('toggleSegmentPreviewEdit', { toggle: checked });
@@ -54,11 +53,6 @@ export default function getSegmentationPanelCustomization({ commandsManager, ser
         commandsManager.run('toggleUseCenterSegmentIndex', { toggle: checked });
       };
 
-      const handleToggleShowLabelOnHover = checked => {
-        setShouldShowLabelOnHover(checked);
-        commandsManager.run('toggleSegmentLabel', { toggle: checked });
-      };
-
       return (
         <div className="bg-muted flex flex-col gap-4 border-b border-b-[2px] border-black px-2 py-3">
           <div className="flex items-center gap-2">
@@ -84,14 +78,6 @@ export default function getSegmentationPanelCustomization({ commandsManager, ser
             />
             <span className="text-base text-white">Hover on segment border to activate</span>
           </div>
-
-          <div className="flex items-center gap-2">
-            <Switch
-              checked={shouldShowLabelOnHover}
-              onCheckedChange={handleToggleShowLabelOnHover}
-            />
-            <span className="text-base text-white">Show segment label on mouse hover</span>
-          </div>
         </div>
       );
     },

extensions/cornerstone/src/getCustomizationModule.tsx

@@ -12,13 +12,17 @@ import miscCustomization from './customizations/miscCustomization';
 import captureViewportModalCustomization from './customizations/captureViewportModalCustomization';
 import viewportDownloadWarningCustomization from './customizations/viewportDownloadWarningCustomization';
 
-function getCustomizationModule({ commandsManager, servicesManager }) {
+function getCustomizationModule({ commandsManager, servicesManager, extensionManager }) {
   return [
     {
       name: 'default',
       value: {
         ...viewportOverlayCustomization,
-        ...getSegmentationPanelCustomization({ commandsManager, servicesManager }),
+        ...getSegmentationPanelCustomization({
+          commandsManager,
+          servicesManager,
+          extensionManager,
+        }),
         ...layoutSelectorCustomization,
         ...viewportToolsCustomization,
         ...viewportClickCommandsCustomization,