feat(segmentation): Enhance Segmentation Tools with Preview and Selection Features (#4870)

extensions/cornerstone/src/customizations/segmentationPanelCustomization.tsx

@@ -1,5 +1,7 @@
 import { CustomDropdownMenuContent } from './CustomDropdownMenuContent';
 import { CustomSegmentStatisticsHeader } from './CustomSegmentStatisticsHeader';
+import React, { useState } from 'react';
+import { Switch } from '@ohif/ui-next';
 
 export default function getSegmentationPanelCustomization({ commandsManager, servicesManager }) {
   return {
@@ -30,5 +32,40 @@ export default function getSegmentationPanelCustomization({ commandsManager, ser
       volume: 'Volume',
       lesionGlycolysis: 'Lesion Glycolysis',
     },
+    'segmentationToolbox.config': () => {
+      // Get initial states based on current configuration
+      const [previewEdits, setPreviewEdits] = useState(false);
+      const [toggleSegmentEnabled, setToggleSegmentEnabled] = useState(false);
+
+      const handlePreviewEditsChange = checked => {
+        setPreviewEdits(checked);
+        commandsManager.run('toggleSegmentPreviewEdit', { toggle: checked });
+      };
+
+      const handleToggleSegmentEnabledChange = checked => {
+        setToggleSegmentEnabled(checked);
+        commandsManager.run('toggleSegmentSelect', { 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">
+            <Switch
+              checked={previewEdits}
+              onCheckedChange={handlePreviewEditsChange}
+            />
+            <span className="text-base text-white">Preview edits before creating</span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Switch
+              checked={toggleSegmentEnabled}
+              onCheckedChange={handleToggleSegmentEnabledChange}
+            />
+            <span className="text-base text-white">Highlight segments to select</span>
+          </div>
+        </div>
+      );
+    },
   };
 }