feature(segmentation): Add contour tools and utilities in a side panel (#5517)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Dan Rukas <dan.rukas@gmail.com>

extensions/cornerstone-dicom-seg/src/commandsModule.ts

@@ -3,7 +3,7 @@ import { classes, Types } from '@ohif/core';
 import { cache, metaData } from '@cornerstonejs/core';
 import { segmentation as cornerstoneToolsSegmentation } from '@cornerstonejs/tools';
 import { adaptersRT, helpers, adaptersSEG } from '@cornerstonejs/adapters';
-import { createReportDialogPrompt } from '@ohif/extension-default';
+import { createReportDialogPrompt, useUIStateStore } from '@ohif/extension-default';
 import { DicomMetadataStore } from '@ohif/core';
 
 import PROMPT_RESPONSES from '../../default/src/utils/_shared/PROMPT_RESPONSES';
@@ -37,7 +37,7 @@ const commandsModule = ({
   servicesManager,
   extensionManager,
 }: Types.Extensions.ExtensionParams): Types.Extensions.CommandsModule => {
-  const { segmentationService, displaySetService, viewportGridService, toolGroupService } =
+  const { segmentationService, displaySetService, viewportGridService } =
     servicesManager.services as AppTypes.Services;
 
   const actions = {
@@ -307,6 +307,17 @@ const commandsModule = ({
         console.warn(e);
       }
     },
+    toggleActiveSegmentationUtility: ({ itemId: buttonId }) => {
+      const { uiState, setUIState } = useUIStateStore.getState();
+      const isButtonActive = uiState['activeSegmentationUtility'] === buttonId;
+      console.log('toggleActiveSegmentationUtility', isButtonActive, buttonId);
+      // if the button is active, clear the active segmentation utility
+      if (isButtonActive) {
+        setUIState('activeSegmentationUtility', null);
+      } else {
+        setUIState('activeSegmentationUtility', buttonId);
+      }
+    },
   };
 
   const definitions = {
@@ -326,6 +337,9 @@ const commandsModule = ({
     downloadRTSS: {
       commandFn: actions.downloadRTSS,
     },
+    toggleActiveSegmentationUtility: {
+      commandFn: actions.toggleActiveSegmentationUtility,
+    },
   };
 
   return {

extensions/cornerstone-dicom-seg/src/components/LogicalContourOperationsOptions.tsx

@@ -0,0 +1,243 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useRunCommand, useSystem } from '@ohif/core';
+import { useActiveViewportSegmentationRepresentations } from '@ohif/extension-cornerstone';
+import {
+  Button,
+  cn,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+  Switch,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+} from '@ohif/ui-next';
+import { Icons } from '@ohif/ui-next';
+import { contourSegmentation } from '@cornerstonejs/tools/utilities';
+import { Segment } from '@cornerstonejs/tools/types';
+
+const { LogicalOperation } = contourSegmentation;
+const options = [
+  {
+    value: 'merge',
+    logicalOperation: LogicalOperation.Union,
+    label: 'Merge',
+    icon: 'actions-combine-merge',
+    helperIcon: 'helper-combine-merge',
+  },
+  {
+    value: 'intersect',
+    logicalOperation: LogicalOperation.Intersect,
+    label: 'Intersect',
+    icon: 'actions-combine-intersect',
+    helperIcon: 'helper-combine-intersect',
+  },
+  {
+    value: 'subtract',
+    logicalOperation: LogicalOperation.Subtract,
+    label: 'Subtract',
+    icon: 'actions-combine-subtract',
+    helperIcon: 'helper-combine-subtract',
+  },
+];
+
+// Shared component for segment selection
+function SegmentSelector({
+  label,
+  value,
+  onValueChange,
+  segments,
+  placeholder = 'Select a segment',
+}: {
+  label: string;
+  value: string;
+  onValueChange: (value: string) => void;
+  segments: Segment[];
+  placeholder?: string;
+}) {
+  return (
+    <div className="flex justify-between gap-6">
+      <div>{label}</div>
+      <Select
+        key={`select-segment-${label}`}
+        onValueChange={onValueChange}
+        value={value}
+      >
+        <SelectTrigger className="overflow-hidden">
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {segments.map(segment => (
+            <SelectItem
+              key={segment.segmentIndex}
+              value={segment.segmentIndex.toString()}
+            >
+              {segment.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
+
+function LogicalContourOperationOptions() {
+  const { servicesManager } = useSystem();
+  const { segmentationService } = servicesManager.services;
+  const { segmentationsWithRepresentations } = useActiveViewportSegmentationRepresentations();
+
+  const activeRepresentation = segmentationsWithRepresentations?.find(
+    ({ representation }) => representation?.active
+  );
+
+  const segments = activeRepresentation
+    ? Object.values(activeRepresentation.segmentation.segments)
+    : [];
+
+  // Calculate the next available segment index
+  const nextSegmentIndex = activeRepresentation
+    ? segmentationService.getNextAvailableSegmentIndex(
+        activeRepresentation.segmentation.segmentationId
+      )
+    : 1;
+
+  const activeSegment = segments.find(segment => segment.active);
+
+  const activeSegmentIndex = activeSegment?.segmentIndex || 0;
+
+  const [operation, setOperation] = useState(options[0]);
+  const [segmentA, setSegmentA] = useState<string>(activeSegmentIndex?.toString() || '');
+  const [segmentB, setSegmentB] = useState<string>('');
+  const [createNewSegment, setCreateNewSegment] = useState<boolean>(false);
+  const [newSegmentName, setNewSegmentName] = useState<string>('');
+
+  useEffect(() => {
+    setSegmentA(activeSegmentIndex?.toString() || null);
+  }, [activeSegmentIndex]);
+
+  useEffect(() => {
+    setNewSegmentName(`Segment ${nextSegmentIndex}`);
+  }, [nextSegmentIndex]);
+
+  const runCommand = useRunCommand();
+
+  const applyLogicalContourOperation = useCallback(() => {
+    let resultSegmentIndex = segmentA;
+    if (createNewSegment) {
+      resultSegmentIndex = nextSegmentIndex.toString();
+      runCommand('addSegment', {
+        segmentationId: activeRepresentation.segmentation.segmentationId,
+        config: {
+          label: newSegmentName,
+          segmentIndex: nextSegmentIndex,
+        },
+      });
+    }
+    runCommand('applyLogicalContourOperation', {
+      segmentAInfo: {
+        segmentationId: activeRepresentation.segmentation.segmentationId,
+        segmentIndex: parseInt(segmentA),
+      },
+      segmentBInfo: {
+        segmentationId: activeRepresentation.segmentation.segmentationId,
+        segmentIndex: parseInt(segmentB),
+      },
+      resultSegmentInfo: {
+        segmentationId: activeRepresentation.segmentation.segmentationId,
+        segmentIndex: parseInt(resultSegmentIndex),
+      },
+      logicalOperation: operation.logicalOperation,
+    });
+  }, [
+    activeRepresentation?.segmentation?.segmentationId,
+    createNewSegment,
+    newSegmentName,
+    nextSegmentIndex,
+    operation.logicalOperation,
+    runCommand,
+    segmentA,
+    segmentB,
+  ]);
+
+  return (
+    <div className="flex w-[245px] flex-col gap-4">
+      <div className="flex items-start justify-between">
+        <div className="flex w-auto flex-col items-center gap-2 text-base font-normal leading-none">
+          <Tabs value={operation.value}>
+            <TabsList className="inline-flex space-x-1">
+              {options.map(option => {
+                const { value, icon } = option;
+                return (
+                  <TabsTrigger
+                    value={value}
+                    key={`logical-contour-operation-${value}`}
+                    onClick={() => setOperation(option)}
+                  >
+                    <Icons.ByName name={icon}></Icons.ByName>
+                  </TabsTrigger>
+                );
+              })}
+            </TabsList>
+          </Tabs>
+          <div>{operation.label}</div>
+        </div>
+        <div className="bg-primary-dark flex h-[62px] w-[88px] items-center justify-center rounded-lg">
+          <Icons.ByName name={operation.helperIcon}></Icons.ByName>
+        </div>
+      </div>
+      <SegmentSelector
+        label="A"
+        value={segmentA}
+        onValueChange={setSegmentA}
+        segments={segments}
+      />
+      <SegmentSelector
+        label="B"
+        value={segmentB}
+        onValueChange={setSegmentB}
+        segments={segments}
+      />
+      <div className="flex justify-end pl-[34px]">
+        <Button
+          className="border-primary/60 grow border"
+          variant="ghost"
+          onClick={() => {
+            applyLogicalContourOperation();
+          }}
+        >
+          {operation.label}
+        </Button>
+      </div>
+      <Separator className="bg-input mt-2 h-[1px]" />
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center justify-start gap-2">
+          <Switch
+            id="logical-contour-operations-create-new-segment-switch"
+            onCheckedChange={setCreateNewSegment}
+          ></Switch>
+          <Label htmlFor="logical-contour-operations-create-new-segment-switch">
+            Create a new segment
+          </Label>
+        </div>
+        <div className="pl-9">
+          <Input
+            className={cn(createNewSegment ? 'visible' : 'hidden')}
+            disabled={!createNewSegment}
+            id="logical-contour-operations-create-new-segment-input"
+            type="text"
+            placeholder="New segment name"
+            value={newSegmentName}
+            onChange={e => setNewSegmentName(e.target.value)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default LogicalContourOperationOptions;

extensions/cornerstone-dicom-seg/src/components/SimplifyContourOptions.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { Button, Input, Label, Separator } from '@ohif/ui-next';
+import { useRunCommand } from '@ohif/core';
+
+function SimplifyContourOptions() {
+  const [areaThreshold, setAreaThreshold] = useState(10);
+
+  const runCommand = useRunCommand();
+
+  return (
+    <div className="flex w-auto w-[252px] flex-col gap-[8px] text-base font-normal leading-none">
+      <div className="flex w-auto flex-col gap-[10px] text-base font-normal leading-none">
+        <div>Fill contour holes</div>
+        <Button
+          className="border-primary/60 border"
+          variant="ghost"
+          onClick={() => {
+            runCommand('removeContourHoles');
+          }}
+        >
+          Fill Holes
+        </Button>
+        <Separator className="bg-input mt-[20px] h-[1px]" />
+      </div>
+      <div className="flex w-auto flex-col gap-[10px] text-base font-normal leading-none">
+        <div>Remove Small Contours</div>
+        <div className="flex items-center gap-2 self-end">
+          <Label
+            htmlFor="simplify-contour-options"
+            className="text-muted-foreground"
+          >
+            Area Threshold
+          </Label>
+          <Input
+            id="simplify-contour-options"
+            className="w-20"
+            type="number"
+            value={areaThreshold}
+            onChange={e => setAreaThreshold(Number(e.target.value))}
+          />
+        </div>
+        <Button
+          className="border-primary/60 border"
+          variant="ghost"
+          onClick={() => {
+            runCommand('removeSmallContours', {
+              areaThreshold,
+            });
+          }}
+        >
+          Remove Small Contours
+        </Button>
+        <Separator className="bg-input mt-[20px] h-[1px]" />
+      </div>
+      <div className="flex w-auto flex-col gap-[10px] text-base font-normal leading-none">
+        <div>Create New Segment from Holes</div>
+        <Button
+          className="border-primary/60 border"
+          variant="ghost"
+          onClick={() => {
+            runCommand('convertContourHoles');
+          }}
+        >
+          Create New Segment
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default SimplifyContourOptions;

extensions/cornerstone-dicom-seg/src/components/SmoothContoursOptions.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Button, Separator } from '@ohif/ui-next';
+import { useRunCommand } from '@ohif/core';
+
+function SmoothContoursOptions() {
+  const runCommand = useRunCommand();
+
+  return (
+    <div className="flex w-auto w-[245px] flex-col gap-[8px] text-base font-normal leading-none">
+      <div className="flex w-auto flex-col gap-[10px] text-base font-normal leading-none">
+        <div>Smooth all edges</div>
+        <Button
+          className="border-primary/60 border"
+          variant="ghost"
+          onClick={() => {
+            runCommand('smoothContours');
+          }}
+        >
+          Smooth Edges
+        </Button>
+        <Separator className="bg-input mt-[20px] h-[1px]" />
+      </div>
+      <div className="flex w-auto flex-col gap-[10px] text-base font-normal leading-none">
+        <div>Remove extra points</div>
+        <Button
+          className="border-primary/60 border"
+          variant="ghost"
+          onClick={() => {
+            runCommand('decimateContours');
+          }}
+        >
+          Remove Points
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default SmoothContoursOptions;

extensions/cornerstone-dicom-seg/src/getToolbarModule.ts

@@ -1,6 +1,32 @@
+import { useUIStateStore } from '@ohif/extension-default';
+import LogicalContourOperationsOptions from './components/LogicalContourOperationsOptions';
+import SimplifyContourOptions from './components/SimplifyContourOptions';
+import SmoothContoursOptions from './components/SmoothContoursOptions';
+
 export function getToolbarModule({ servicesManager }: withAppTypes) {
   const { segmentationService, toolbarService, toolGroupService } = servicesManager.services;
   return [
+    {
+      name: 'cornerstone.SimplifyContourOptions',
+      defaultComponent: SimplifyContourOptions,
+    },
+    {
+      name: 'cornerstone.LogicalContourOperationsOptions',
+      defaultComponent: LogicalContourOperationsOptions,
+    },
+    {
+      name: 'cornerstone.SmoothContoursOptions',
+      defaultComponent: SmoothContoursOptions,
+    },
+    {
+      name: 'cornerstone.isActiveSegmentationUtility',
+      evaluate: ({ button }) => {
+        const { uiState } = useUIStateStore.getState();
+        return {
+          isActive: uiState[`activeSegmentationUtility`] === button.id,
+        };
+      },
+    },
     {
       name: 'evaluate.cornerstone.hasSegmentation',
       evaluate: ({ viewportId }) => {
@@ -10,6 +36,30 @@ export function getToolbarModule({ servicesManager }: withAppTypes) {
         };
       },
     },
+    {
+      name: 'evaluate.cornerstone.hasSegmentationOfType',
+      evaluate: ({ viewportId, segmentationRepresentationType }) => {
+        const segmentations = segmentationService.getSegmentationRepresentations(viewportId);
+
+        if (!segmentations?.length) {
+          return {
+            disabled: true,
+            disabledText: 'No segmentations available',
+          };
+        }
+
+        if (
+          !segmentations.some(segmentation =>
+            Boolean(segmentation.type === segmentationRepresentationType)
+          )
+        ) {
+          return {
+            disabled: true,
+            disabledText: `No ${segmentationRepresentationType} segmentations available`,
+          };
+        }
+      },
+    },
     {
       name: 'evaluate.cornerstone.segmentation',
       evaluate: ({ viewportId, button, toolNames, disabledText }) => {

extensions/cornerstone/src/commandsModule.ts

@@ -14,13 +14,18 @@ import {
   utilities as cstUtils,
   annotation,
   Types as ToolTypes,
+  SplineContourSegmentationTool,
 } from '@cornerstonejs/tools';
+import {
+  SegmentInfo,
+  LogicalOperation,
+  OperatorOptions,
+} from '@cornerstonejs/tools/utilities/contourSegmentation/logicalOperators';
 import * as cornerstoneTools from '@cornerstonejs/tools';
 import * as labelmapInterpolation from '@cornerstonejs/labelmap-interpolation';
 import { ONNXSegmentationController } from '@cornerstonejs/ai';
 
 import { Types as OhifTypes, utils } from '@ohif/core';
-import i18n from '@ohif/i18n';
 import {
   callInputDialogAutoComplete,
   createReportAsync,
@@ -33,7 +38,11 @@ import { getFirstAnnotationSelected } from './utils/measurementServiceMappings/u
 import { getViewportEnabledElement } from './utils/getViewportEnabledElement';
 import getActiveViewportEnabledElement from './utils/getActiveViewportEnabledElement';
 import toggleVOISliceSync from './utils/toggleVOISliceSync';
-import { usePositionPresentationStore, useSegmentationPresentationStore } from './stores';
+import {
+  usePositionPresentationStore,
+  useSegmentationPresentationStore,
+  useSelectedSegmentationsForViewportStore,
+} from './stores';
 import { toolNames } from './initCornerstoneTools';
 import CornerstoneViewportDownloadForm from './utils/CornerstoneViewportDownloadForm';
 import { updateSegmentBidirectionalStats } from './utils/updateSegmentationStats';
@@ -43,6 +52,11 @@ import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
 import { isMeasurementWithinViewport } from './utils/isMeasurementWithinViewport';
 import { getCenterExtent } from './utils/getCenterExtent';
 import { EasingFunctionEnum } from './utils/transitions';
+import { createSegmentationForViewport } from './utils/createSegmentationForViewport';
+import { utilities as segmentationUtilities } from '@cornerstonejs/tools/segmentation';
+import i18n from '@ohif/i18n';
+
+const { add, intersect, subtract, copy } = cstUtils.contourSegmentation;
 
 const { DefaultHistoryMemo } = csUtils.HistoryMemo;
 const toggleSyncFunctions = {
@@ -963,17 +977,21 @@ function commandsModule({
         }
       }
     },
-    setToolActiveToolbar: ({ value, itemId, toolName, toolGroupIds = [] }) => {
+    setToolActiveToolbar: ({ value, itemId, toolName, toolGroupIds = [], bindings }) => {
       // Sometimes it is passed as value (tools with options), sometimes as itemId (toolbar buttons)
       toolName = toolName || itemId || value;
 
       toolGroupIds = toolGroupIds.length ? toolGroupIds : toolGroupService.getToolGroupIds();
 
       toolGroupIds.forEach(toolGroupId => {
-        actions.setToolActive({ toolName, toolGroupId });
+        actions.setToolActive({ toolName, toolGroupId, bindings });
       });
     },
-    setToolActive: ({ toolName, toolGroupId = null }) => {
+    setToolActive: ({
+      toolName,
+      toolGroupId = null,
+      bindings = [{ mouseButton: Enums.MouseBindings.Primary }],
+    }) => {
       const { viewports } = viewportGridService.getState();
 
       if (!viewports.size) {
@@ -1001,11 +1019,7 @@ function commandsModule({
 
       // Set the new toolName to be active
       toolGroup.setToolActive(toolName, {
-        bindings: [
-          {
-            mouseButton: Enums.MouseBindings.Primary,
-          },
-        ],
+        bindings,
       });
     },
     // capture viewport
@@ -1478,48 +1492,24 @@ function commandsModule({
      * as a segmentation representation to the viewport.
      */
     createLabelmapForViewport: async ({ viewportId, options = {} }) => {
-      const { viewportGridService, displaySetService, segmentationService } =
-        servicesManager.services;
-      const { viewports } = viewportGridService.getState();
-      const targetViewportId = viewportId;
-
-      const viewport = viewports.get(targetViewportId);
-
-      // Todo: add support for multiple display sets
-      const displaySetInstanceUID =
-        options.displaySetInstanceUID || viewport.displaySetInstanceUIDs[0];
-
-      const segs = segmentationService.getSegmentations();
-
-      const label = options.label || `${i18n.t('Tools:Segmentation')} ${segs.length + 1}`;
-      const segmentationId = options.segmentationId || `${csUtils.uuidv4()}`;
-
-      const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
-
-      // This will create the segmentation and register it as a display set
-      const generatedSegmentationId = await segmentationService.createLabelmapForDisplaySet(
-        displaySet,
-        {
-          label,
-          segmentationId,
-          segments: options.createInitialSegment
-            ? {
-                1: {
-                  label: `${i18n.t('Tools:Segment')} 1`,
-                  active: true,
-                },
-              }
-            : {},
-        }
-      );
-
-      // Also add the segmentation representation to the viewport
-      await segmentationService.addSegmentationRepresentation(viewportId, {
-        segmentationId,
-        type: Enums.SegmentationRepresentations.Labelmap,
+      return createSegmentationForViewport(servicesManager, {
+        viewportId,
+        options,
+        segmentationType: SegmentationRepresentations.Labelmap,
+      });
+    },
+    /**
+     * Creates a contour for the active viewport
+     *
+     * The created contour will be registered as a display set and also added
+     * as a segmentation representation to the viewport.
+     */
+    createContourForViewport: async ({ viewportId, options = {} }) => {
+      return createSegmentationForViewport(servicesManager, {
+        viewportId,
+        options,
+        segmentationType: SegmentationRepresentations.Contour,
       });
-
-      return generatedSegmentationId;
     },
 
     /**
@@ -1538,9 +1528,9 @@ function commandsModule({
      * Adds a new segment to a segmentation
      * @param props.segmentationId - The ID of the segmentation to add the segment to
      */
-    addSegmentCommand: ({ segmentationId }) => {
+    addSegmentCommand: ({ segmentationId, config }) => {
       const { segmentationService } = servicesManager.services;
-      segmentationService.addSegment(segmentationId);
+      segmentationService.addSegment(segmentationId, config);
     },
 
     /**
@@ -2269,6 +2259,207 @@ function commandsModule({
         deleting,
       });
     },
+    activateSelectedSegmentationOfType: ({ segmentationRepresentationType }) => {
+      const { segmentationService, viewportGridService } = servicesManager.services;
+      const activeViewportId = viewportGridService.getActiveViewportId();
+      const { selectedSegmentationsForViewport } =
+        useSelectedSegmentationsForViewportStore.getState();
+      const segmentationId = selectedSegmentationsForViewport[activeViewportId]?.get(
+        segmentationRepresentationType
+      );
+
+      if (!segmentationId) {
+        return;
+      }
+
+      segmentationService.setActiveSegmentation(activeViewportId, segmentationId);
+    },
+    setDynamicCursorSizeForSculptorTool: ({ value: isDynamicCursorSize }) => {
+      const viewportId = viewportGridService.getActiveViewportId();
+      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+      const sculptorToolInstance = toolGroup.getToolInstance(toolNames.SculptorTool);
+      const oldConfiguration = sculptorToolInstance.configuration;
+
+      sculptorToolInstance.configuration = {
+        ...oldConfiguration,
+        updateCursorSize: isDynamicCursorSize ? 'dynamic' : '',
+      };
+    },
+    setInterpolationToolConfiguration: ({ value: interpolateContours, toolNames }) => {
+      const viewportId = viewportGridService.getActiveViewportId();
+      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+
+      // Set the interpolation configuration for the active tool.
+      const activeTool = toolGroupService.getActiveToolForViewport(viewportId);
+      const interpolationConfig = {
+        interpolation: {
+          enabled: interpolateContours,
+          showInterpolationPolyline: true,
+        },
+      };
+      toolGroup.setToolConfiguration(activeTool, interpolationConfig);
+
+      // Now set the interpolation configuration for the other tools specified.
+      if (toolNames) {
+        Object.values(toolGroup.getToolInstances()).forEach(toolInstance => {
+          if (toolNames?.includes(toolInstance.toolName)) {
+            toolGroup.setToolConfiguration(toolInstance.toolName, interpolationConfig);
+          }
+        });
+      }
+    },
+    setSimplifiedSplineForSplineContourSegmentationTool: ({ value: simplifiedSpline }) => {
+      const viewportId = viewportGridService.getActiveViewportId();
+      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+      Object.values(toolGroup.getToolInstances()).forEach(toolInstance => {
+        if (toolInstance instanceof SplineContourSegmentationTool) {
+          const oldConfiguration = toolInstance.configuration;
+          toolInstance.configuration = {
+            ...oldConfiguration,
+            simplifiedSpline,
+          };
+        }
+      });
+    },
+    removeSmallContours: ({ areaThreshold: threshold }) => {
+      const viewportId = viewportGridService.getActiveViewportId();
+      const activeSegmentation = segmentationService.getActiveSegmentation(viewportId);
+      const activeSegment = segmentationService.getActiveSegment(viewportId);
+
+      if (!activeSegmentation || !activeSegment) {
+        return;
+      }
+
+      const { removeContourIslands } = segmentationUtilities;
+      removeContourIslands(activeSegmentation.segmentationId, activeSegment.segmentIndex, {
+        threshold,
+      });
+      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
+      renderingEngine.render();
+    },
+    applyLogicalContourOperation: ({
+      segmentAInfo,
+      segmentBInfo,
+      resultSegmentInfo,
+      logicalOperation,
+    }: {
+      segmentAInfo: SegmentInfo;
+      segmentBInfo: SegmentInfo;
+      resultSegmentInfo: OperatorOptions;
+      logicalOperation: LogicalOperation;
+    }) => {
+      switch (logicalOperation) {
+        case LogicalOperation.Union:
+          add(segmentAInfo, segmentBInfo, resultSegmentInfo);
+          break;
+        case LogicalOperation.Intersect:
+          intersect(segmentAInfo, segmentBInfo, resultSegmentInfo);
+          break;
+        case LogicalOperation.Subtract:
+          subtract(segmentAInfo, segmentBInfo, resultSegmentInfo);
+          break;
+        default:
+          throw new Error('Unsupported logical operation');
+          break;
+      }
+    },
+    copyContourSegment: ({
+      sourceSegmentInfo,
+      targetSegmentInfo,
+    }: {
+      sourceSegmentInfo: SegmentInfo;
+      targetSegmentInfo?: SegmentInfo;
+    }) => {
+      if (!targetSegmentInfo) {
+        targetSegmentInfo = {
+          segmentationId: sourceSegmentInfo.segmentationId,
+          segmentIndex: segmentationService.getNextAvailableSegmentIndex(
+            sourceSegmentInfo.segmentationId
+          ),
+        };
+        segmentationService.addSegment(targetSegmentInfo.segmentationId, {
+          segmentIndex: targetSegmentInfo.segmentIndex,
+        });
+      }
+
+      copy(sourceSegmentInfo, targetSegmentInfo);
+    },
+    smoothContours: () => {
+      const viewportId = viewportGridService.getActiveViewportId();
+      const activeSegmentation = segmentationService.getActiveSegmentation(viewportId);
+      const activeSegment = segmentationService.getActiveSegment(viewportId);
+
+      if (!activeSegmentation || !activeSegment) {
+        return;
+      }
+
+      const { smoothContours } = segmentationUtilities;
+      smoothContours(activeSegmentation.segmentationId, activeSegment.segmentIndex);
+
+      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
+      renderingEngine.render();
+    },
+    removeContourHoles: () => {
+      const viewportId = viewportGridService.getActiveViewportId();
+      const activeSegmentation = segmentationService.getActiveSegmentation(viewportId);
+      const activeSegment = segmentationService.getActiveSegment(viewportId);
+
+      if (!activeSegmentation || !activeSegment) {
+        return;
+      }
+
+      const { removeContourHoles } = segmentationUtilities;
+      removeContourHoles(activeSegmentation.segmentationId, activeSegment.segmentIndex);
+
+      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
+      renderingEngine.render();
+    },
+    decimateContours: () => {
+      const viewportId = viewportGridService.getActiveViewportId();
+      const activeSegmentation = segmentationService.getActiveSegmentation(viewportId);
+      const activeSegment = segmentationService.getActiveSegment(viewportId);
+
+      if (!activeSegmentation || !activeSegment) {
+        return;
+      }
+
+      const { decimateContours } = segmentationUtilities;
+      decimateContours(activeSegmentation.segmentationId, activeSegment.segmentIndex);
+
+      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
+      renderingEngine.render();
+    },
+    convertContourHoles: () => {
+      const viewportId = viewportGridService.getActiveViewportId();
+      const activeSegmentation = segmentationService.getActiveSegmentation(viewportId);
+      const activeSegment = segmentationService.getActiveSegment(viewportId);
+
+      if (!activeSegmentation || !activeSegment) {
+        return;
+      }
+
+      const targetSegmentInfo = {
+        segmentationId: activeSegmentation.segmentationId,
+        segmentIndex: segmentationService.getNextAvailableSegmentIndex(
+          activeSegmentation.segmentationId
+        ),
+      };
+
+      segmentationService.addSegment(targetSegmentInfo.segmentationId, {
+        segmentIndex: targetSegmentInfo.segmentIndex,
+      });
+
+      const { convertContourHoles } = segmentationUtilities;
+      convertContourHoles(
+        activeSegmentation.segmentationId,
+        activeSegment.segmentIndex,
+        targetSegmentInfo.segmentationId,
+        targetSegmentInfo.segmentIndex
+      );
+
+      const renderingEngine = cornerstoneViewportService.getRenderingEngine();
+      renderingEngine.render();
+    },
   };
 
   const definitions = {
@@ -2467,6 +2658,9 @@ function commandsModule({
     createLabelmapForViewport: {
       commandFn: actions.createLabelmapForViewport,
     },
+    createContourForViewport: {
+      commandFn: actions.createContourForViewport,
+    },
     setActiveSegmentation: {
       commandFn: actions.setActiveSegmentation,
     },
@@ -2568,6 +2762,18 @@ function commandsModule({
     toggleSegmentLabel: actions.toggleSegmentLabel,
     jumpToMeasurementViewport: actions.jumpToMeasurementViewport,
     initializeSegmentLabelTool: actions.initializeSegmentLabelTool,
+    activateSelectedSegmentationOfType: actions.activateSelectedSegmentationOfType,
+    setDynamicCursorSizeForSculptorTool: actions.setDynamicCursorSizeForSculptorTool,
+    setSimplifiedSplineForSplineContourSegmentationTool:
+      actions.setSimplifiedSplineForSplineContourSegmentationTool,
+    removeSmallContours: actions.removeSmallContours,
+    applyLogicalContourOperation: actions.applyLogicalContourOperation,
+    copyContourSegment: actions.copyContourSegment,
+    smoothContours: actions.smoothContours,
+    removeContourHoles: actions.removeContourHoles,
+    decimateContours: actions.decimateContours,
+    convertContourHoles: actions.convertContourHoles,
+    setInterpolationToolConfiguration: actions.setInterpolationToolConfiguration,
   };
 
   return {

extensions/cornerstone/src/components/ExportSegmentationSubMenuItem.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuPortal,
+  DropdownMenuSubContent,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  Icons,
+} from '@ohif/ui-next';
+
+import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
+
+interface ExportSegmentationSubMenuItemProps {
+  segmentationId: string;
+  segmentationRepresentationType: string;
+  allowExport: boolean;
+  actions: {
+    storeSegmentation: (segmentationId: string) => Promise<void>;
+    onSegmentationDownloadRTSS: (segmentationId: string) => void;
+    onSegmentationDownload: (segmentationId: string) => void;
+    downloadCSVSegmentationReport: (segmentationId: string) => void;
+  };
+}
+
+export const ExportSegmentationSubMenuItem: React.FC<ExportSegmentationSubMenuItemProps> = ({
+  segmentationId,
+  segmentationRepresentationType,
+  allowExport,
+  actions,
+}) => {
+  const { t } = useTranslation('SegmentationTable');
+
+  return (
+    <>
+      {segmentationRepresentationType === SegmentationRepresentations.Labelmap && (
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger className="pl-1">
+            <Icons.Export className="text-foreground" />
+            <span className="pl-2">{t('Download & Export')}</span>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent>
+              <DropdownMenuLabel className="flex items-center pl-0">
+                <Icons.Download className="h-5 w-5" />
+                <span className="pl-1">{t('Download')}</span>
+              </DropdownMenuLabel>
+              <DropdownMenuItem
+                onClick={e => {
+                  e.preventDefault();
+                  actions.downloadCSVSegmentationReport(segmentationId);
+                }}
+                disabled={!allowExport}
+              >
+                {t('CSV Report')}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={e => {
+                  e.preventDefault();
+                  actions.onSegmentationDownload(segmentationId);
+                }}
+                disabled={!allowExport}
+              >
+                {t('DICOM SEG')}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={e => {
+                  e.preventDefault();
+                  actions.onSegmentationDownloadRTSS(segmentationId);
+                }}
+                disabled={!allowExport}
+              >
+                {t('DICOM RTSS')}
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel className="flex items-center pl-0">
+                <Icons.Export className="h-5 w-5" />
+                <span className="pl-1 pt-1">{t('Export')}</span>
+              </DropdownMenuLabel>
+              <DropdownMenuItem
+                onClick={e => {
+                  e.preventDefault();
+                  actions.storeSegmentation(segmentationId);
+                }}
+                disabled={!allowExport}
+              >
+                {t('DICOM SEG')}
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
+      )}
+      {segmentationRepresentationType === SegmentationRepresentations.Contour && (
+        <>
+          <DropdownMenuItem
+            onClick={e => {
+              e.preventDefault();
+              actions.onSegmentationDownloadRTSS(segmentationId);
+            }}
+            disabled={!allowExport}
+          >
+            <Icons.Export className="text-foreground" />
+            <span className="pl-2">{t('Download DICOM RTSS')}</span>
+          </DropdownMenuItem>
+        </>
+      )}
+    </>
+  );
+};

extensions/cornerstone/src/components/SegmentationToolConfig.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Switch } from '@ohif/ui-next';
+import { useSystem } from '@ohif/core';
+
+export default function SegmentationToolConfig() {
+  const { commandsManager } = useSystem();
+
+  // 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 => {
+    setPreviewEdits(checked);
+    commandsManager.run('toggleSegmentPreviewEdit', { toggle: checked });
+  };
+
+  const handleToggleSegmentEnabledChange = checked => {
+    setToggleSegmentEnabled(checked);
+    commandsManager.run('toggleSegmentSelect', { toggle: checked });
+  };
+
+  const handleUseCenterAsSegmentIndexChange = checked => {
+    setUseCenterAsSegmentIndex(checked);
+    commandsManager.run('toggleUseCenterSegmentIndex', { toggle: checked });
+  };
+
+  const handleSegmentLabelEnabledChange = checked => {
+    setSegmentLabelEnabled(checked);
+    commandsManager.run('toggleSegmentLabel', { enabled: checked });
+  };
+
+  return (
+    <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-foreground text-base">Preview edits before creating</span>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Switch
+          checked={useCenterAsSegmentIndex}
+          onCheckedChange={handleUseCenterAsSegmentIndexChange}
+        />
+        <span className="text-foreground text-base">Use center as segment index</span>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Switch
+          checked={toggleSegmentEnabled}
+          onCheckedChange={handleToggleSegmentEnabledChange}
+        />
+        <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>
+  );
+}

extensions/cornerstone/src/components/SegmentationUtilityButton.tsx

@@ -0,0 +1,64 @@
+import React, { useCallback } from 'react';
+import { cn, ToolButton } from '@ohif/ui-next';
+import { useUIStateStore } from '@ohif/extension-default';
+
+interface SegmentationUtilityButtonProps {
+  className?: string;
+  isActive?: boolean;
+  id: string;
+}
+
+/**
+ * A button that represents a segmentation utility.
+ * It is implicitly the PopoverTrigger for the options Popover panel that is
+ * opened in the PanelSegmentation component. It in essence is the PopoverTrigger
+ * because typically this button has the associated options to display in the Popover.
+ * Furthermore it also typically has a command for toggling the activeSegmentationUtility
+ * value in the UIStateStore that triggers the fetching of its options.
+
+ * @param props - The props for the button.
+ * @param props.className - The class name for the button.
+ * @param props.isActive - Whether the button is active
+ * @param props.id - The id of the button.
+ */
+function SegmentationUtilityButton(props: SegmentationUtilityButtonProps) {
+  const { className, isActive, id } = props;
+
+  const activeSegmentationUtility = useUIStateStore(
+    store => store.uiState.activeSegmentationUtility
+  );
+
+  const toolButtonClassName = cn(
+    'w-7 h-7 text-primary hover:text-primary hover:!bg-primary/30',
+    className,
+    isActive && 'bg-primary/30'
+  );
+
+  const handleMouseDownCapture = useCallback(
+    event => {
+      if (activeSegmentationUtility === id) {
+        // If this active button is clicked, prevent the default Popover
+        // behaviour of closing the Popover on a pointer/mouse down.
+        // Not doing this will cause the Popover to close and then reopen again.
+        // Why? Because propagating this event will cause PanelSegmentation to
+        // close the Popover by clearing the activeSegmentationUtility. Then
+        // this button will set the activeSegmentationUtility again and the
+        // Popover will reopen.
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [activeSegmentationUtility, id]
+  );
+
+  return (
+    <div onPointerDownCapture={handleMouseDownCapture}>
+      <ToolButton
+        {...props}
+        className={toolButtonClassName}
+      />
+    </div>
+  );
+}
+
+export default SegmentationUtilityButton;

extensions/cornerstone/src/customizations/CustomDropdownMenuContent.tsx

@@ -3,17 +3,14 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuPortal,
   DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
   Icons,
   useSegmentationTableContext,
   useSegmentationExpanded,
 } from '@ohif/ui-next';
 import { useTranslation } from 'react-i18next';
 import { useSystem } from '@ohif/core/src';
+import { ExportSegmentationSubMenuItem } from '../components/ExportSegmentationSubMenuItem';
 
 /**
  * Custom dropdown menu component for segmentation panel that uses context for data
@@ -29,6 +26,8 @@ export const CustomDropdownMenuContent = () => {
     exportOptions,
     activeSegmentation,
     activeSegmentationId,
+    segmentationRepresentationType,
+    disableEditing,
   } = useSegmentationTableContext('CustomDropdownMenu');
 
   // Try to get segmentation data from expanded context first, fall back to table context
@@ -78,10 +77,14 @@ export const CustomDropdownMenuContent = () => {
 
   return (
     <DropdownMenuContent align="start">
-      <DropdownMenuItem onClick={() => onSegmentationAdd(segmentationId)}>
-        <Icons.Add className="text-foreground" />
-        <span className="pl-2">{t('Create New Segmentation')}</span>
-      </DropdownMenuItem>
+      {!disableEditing && (
+        <DropdownMenuItem
+          onClick={() => onSegmentationAdd({ segmentationId, segmentationRepresentationType })}
+        >
+          <Icons.Add className="text-foreground" />
+          <span className="pl-2">{t('Create New Segmentation')}</span>
+        </DropdownMenuItem>
+      )}
       <DropdownMenuSeparator />
       <DropdownMenuLabel>{t('Manage Current Segmentation')}</DropdownMenuLabel>
       <DropdownMenuItem onClick={() => onSegmentationRemoveFromViewport(segmentationId)}>
@@ -92,61 +95,12 @@ export const CustomDropdownMenuContent = () => {
         <Icons.Rename className="text-foreground" />
         <span className="pl-2">{t('Rename')}</span>
       </DropdownMenuItem>
-      <DropdownMenuSub>
-        <DropdownMenuSubTrigger className="pl-1">
-          <Icons.Export className="text-foreground" />
-          <span className="pl-2">{t('Download & Export')}</span>
-        </DropdownMenuSubTrigger>
-        <DropdownMenuPortal>
-          <DropdownMenuSubContent>
-            <DropdownMenuLabel className="flex items-center pl-0">
-              <Icons.Download className="h-5 w-5" />
-              <span className="pl-1">{t('Download')}</span>
-            </DropdownMenuLabel>
-            <DropdownMenuItem
-              onClick={e => {
-                e.preventDefault();
-                actions.downloadCSVSegmentationReport(segmentationId);
-              }}
-              disabled={!allowExport}
-            >
-              {t('CSV Report')}
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={e => {
-                e.preventDefault();
-                actions.onSegmentationDownload(segmentationId);
-              }}
-              disabled={!allowExport}
-            >
-              {t('DICOM SEG')}
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={e => {
-                e.preventDefault();
-                actions.onSegmentationDownloadRTSS(segmentationId);
-              }}
-              disabled={!allowExport}
-            >
-              {t('DICOM RTSS')}
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuLabel className="flex items-center pl-0">
-              <Icons.Export className="h-5 w-5" />
-              <span className="pl-1 pt-1">{t('Export')}</span>
-            </DropdownMenuLabel>
-            <DropdownMenuItem
-              onClick={e => {
-                e.preventDefault();
-                actions.storeSegmentation(segmentationId);
-              }}
-              disabled={!allowExport}
-            >
-              {t('DICOM SEG')}
-            </DropdownMenuItem>
-          </DropdownMenuSubContent>
-        </DropdownMenuPortal>
-      </DropdownMenuSub>
+      <ExportSegmentationSubMenuItem
+        segmentationId={segmentationId}
+        segmentationRepresentationType={segmentationRepresentationType}
+        allowExport={allowExport}
+        actions={actions}
+      />
       <DropdownMenuSeparator />
       <DropdownMenuItem onClick={() => onSegmentationDelete(segmentationId)}>
         <Icons.Delete className="text-red-600" />

extensions/cornerstone/src/customizations/segmentationPanelCustomization.tsx

@@ -1,7 +1,9 @@
 import { CustomDropdownMenuContent } from './CustomDropdownMenuContent';
 import { CustomSegmentStatisticsHeader } from './CustomSegmentStatisticsHeader';
-import React, { useState } from 'react';
-import { Switch } from '@ohif/ui-next';
+import SegmentationToolConfig from '../components/SegmentationToolConfig';
+import React from 'react';
+import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
+import * as cornerstoneTools from '@cornerstonejs/tools';
 
 export default function getSegmentationPanelCustomization({ commandsManager, servicesManager }) {
   return {
@@ -9,10 +11,25 @@ export default function getSegmentationPanelCustomization({ commandsManager, ser
     'panelSegmentation.customSegmentStatisticsHeader': CustomSegmentStatisticsHeader,
     'panelSegmentation.disableEditing': false,
     'panelSegmentation.showAddSegment': true,
-    'panelSegmentation.onSegmentationAdd': () => {
+    'panelSegmentation.onSegmentationAdd': async ({
+      segmentationRepresentationType = SegmentationRepresentations.Labelmap,
+    }) => {
       const { viewportGridService } = servicesManager.services;
       const viewportId = viewportGridService.getState().activeViewportId;
-      commandsManager.run('createLabelmapForViewport', { viewportId });
+      if (segmentationRepresentationType === SegmentationRepresentations.Labelmap) {
+        commandsManager.run('createLabelmapForViewport', { viewportId });
+      } else if (segmentationRepresentationType === SegmentationRepresentations.Contour) {
+        const segmentationId = await commandsManager.run('createContourForViewport', {
+          viewportId,
+        });
+        cornerstoneTools.segmentation.config.style.setStyle(
+          { segmentationId, type: SegmentationRepresentations.Contour },
+          {
+            fillAlpha: 0.5,
+            renderFill: true,
+          }
+        );
+      }
     },
     'panelSegmentation.tableMode': 'collapsed',
     'panelSegmentation.readableText': {
@@ -33,67 +50,11 @@ export default function getSegmentationPanelCustomization({ commandsManager, ser
       lesionGlycolysis: 'Lesion Glycolysis',
       center: 'Center',
     },
-    '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 => {
-        setPreviewEdits(checked);
-        commandsManager.run('toggleSegmentPreviewEdit', { toggle: checked });
-      };
-
-      const handleToggleSegmentEnabledChange = checked => {
-        setToggleSegmentEnabled(checked);
-        commandsManager.run('toggleSegmentSelect', { toggle: checked });
-      };
-
-      const handleUseCenterAsSegmentIndexChange = checked => {
-        setUseCenterAsSegmentIndex(checked);
-        commandsManager.run('toggleUseCenterSegmentIndex', { toggle: checked });
-      };
-
-      const handleSegmentLabelEnabledChange = checked => {
-        setSegmentLabelEnabled(checked);
-        commandsManager.run('toggleSegmentLabel', { enabled: checked });
-      };
-
-      return (
-        <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-foreground text-base">Preview edits before creating</span>
-          </div>
-
-          <div className="flex items-center gap-2">
-            <Switch
-              checked={useCenterAsSegmentIndex}
-              onCheckedChange={handleUseCenterAsSegmentIndexChange}
-            />
-            <span className="text-foreground text-base">Use center as segment index</span>
-          </div>
-
-          <div className="flex items-center gap-2">
-            <Switch
-              checked={toggleSegmentEnabled}
-              onCheckedChange={handleToggleSegmentEnabledChange}
-            />
-            <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>
-      );
+    'labelMapSegmentationToolbox.config': () => {
+      return <SegmentationToolConfig />;
+    },
+    'contourSegmentationToolbox.config': () => {
+      return <SegmentationToolConfig />;
     },
   };
 }

extensions/cornerstone/src/getPanelModule.tsx

@@ -1,53 +1,67 @@
 import React from 'react';
-
+import { useTranslation } from 'react-i18next';
 import { Toolbox } from '@ohif/extension-default';
 import PanelSegmentation from './panels/PanelSegmentation';
 import ActiveViewportWindowLevel from './components/ActiveViewportWindowLevel';
 import PanelMeasurement from './panels/PanelMeasurement';
+import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
+import i18n from '@ohif/i18n';
 
 const getPanelModule = ({ commandsManager, servicesManager, extensionManager }: withAppTypes) => {
-  const wrappedPanelSegmentation = ({ configuration }) => {
+  const { toolbarService } = servicesManager.services;
+
+  const toolSectionMap = {
+    [SegmentationRepresentations.Labelmap]: toolbarService.sections.labelMapSegmentationToolbox,
+    [SegmentationRepresentations.Contour]: toolbarService.sections.contourSegmentationToolbox,
+  };
+
+  const wrappedPanelSegmentation = props => {
     return (
       <PanelSegmentation
         commandsManager={commandsManager}
         servicesManager={servicesManager}
         extensionManager={extensionManager}
         configuration={{
-          ...configuration,
+          ...props?.configuration,
         }}
+        segmentationRepresentationType={props?.segmentationRepresentationType}
       />
     );
   };
 
-  const wrappedPanelSegmentationNoHeader = ({ configuration }) => {
+  const wrappedPanelSegmentationNoHeader = props => {
     return (
       <PanelSegmentation
         commandsManager={commandsManager}
         servicesManager={servicesManager}
         extensionManager={extensionManager}
         configuration={{
-          ...configuration,
+          ...props?.configuration,
         }}
+        segmentationRepresentationType={props?.segmentationRepresentationType}
       />
     );
   };
 
-  const wrappedPanelSegmentationWithTools = ({ configuration }) => {
-    const { toolbarService } = servicesManager.services;
+  const wrappedPanelSegmentationWithTools = props => {
+    const { t } = useTranslation('SegmentationTable');
+    const tKey = `${props.segmentationRepresentationType ?? 'Segmentation'} tools`;
+    const tValue = t(tKey);
 
     return (
       <>
         <Toolbox
-          buttonSectionId={toolbarService.sections.segmentationToolbox}
-          title="Segmentation Tools"
+          buttonSectionId={toolSectionMap[props.segmentationRepresentationType]}
+          title={tValue}
         />
         <PanelSegmentation
           commandsManager={commandsManager}
           servicesManager={servicesManager}
           extensionManager={extensionManager}
           configuration={{
-            ...configuration,
+            ...props?.configuration,
           }}
+          segmentationRepresentationType={props?.segmentationRepresentationType}
         />
       </>
     );
@@ -82,11 +96,26 @@ const getPanelModule = ({ commandsManager, servicesManager, extensionManager }:
       component: wrappedPanelSegmentationNoHeader,
     },
     {
-      name: 'panelSegmentationWithTools',
+      name: 'panelSegmentationWithToolsLabelMap',
       iconName: 'tab-segmentation',
       iconLabel: 'Segmentation',
-      label: 'Segmentation',
-      component: wrappedPanelSegmentationWithTools,
+      label: i18n.t('SegmentationTable:Labelmap'),
+      component: props =>
+        wrappedPanelSegmentationWithTools({
+          ...props,
+          segmentationRepresentationType: SegmentationRepresentations.Labelmap,
+        }),
+    },
+    {
+      name: 'panelSegmentationWithToolsContour',
+      iconName: 'tab-contours',
+      iconLabel: 'Segmentation',
+      label: i18n.t('SegmentationTable:Contour'),
+      component: props =>
+        wrappedPanelSegmentationWithTools({
+          ...props,
+          segmentationRepresentationType: SegmentationRepresentations.Contour,
+        }),
     },
   ];
 };

extensions/cornerstone/src/index.tsx

@@ -44,6 +44,7 @@ import {
   usePositionPresentationStore,
   useSegmentationPresentationStore,
   useSynchronizersStore,
+  useSelectedSegmentationsForViewportStore,
 } from './stores';
 import { useToggleOneUpViewportGridStore } from '@ohif/extension-default';
 import { useActiveViewportSegmentationRepresentations } from './hooks/useActiveViewportSegmentationRepresentations';
@@ -109,6 +110,7 @@ const cornerstoneExtension: Types.Extensions.Extension = {
     toolbarService.registerEventForToolbarUpdate(segmentationService, [
       segmentationService.EVENTS.SEGMENTATION_REMOVED,
       segmentationService.EVENTS.SEGMENTATION_MODIFIED,
+      segmentationService.EVENTS.ANNOTATION_CUT_MERGE_PROCESS_COMPLETED,
     ]);
 
     toolbarService.registerEventForToolbarUpdate(cornerstone.eventTarget, [
@@ -153,6 +155,9 @@ const cornerstoneExtension: Types.Extensions.Extension = {
     useSynchronizersStore.getState().clearSynchronizersStore();
     useToggleOneUpViewportGridStore.getState().clearToggleOneUpViewportGridStore();
     useSegmentationPresentationStore.getState().clearSegmentationPresentationStore();
+    useSelectedSegmentationsForViewportStore
+      .getState()
+      .clearSelectedSegmentationsForViewportStore();
     segmentationService.removeAllSegmentations();
   },
 
@@ -256,6 +261,7 @@ export {
   usePositionPresentationStore,
   useSegmentationPresentationStore,
   useSynchronizersStore,
+  useSelectedSegmentationsForViewportStore,
   Enums,
   useMeasurements,
   useActiveViewportSegmentationRepresentations,

extensions/cornerstone/src/init.tsx

@@ -106,6 +106,12 @@ export default async function init({
     colorbarService.EVENTS.STATE_CHANGED,
   ]);
 
+  toolbarService.registerEventForToolbarUpdate(segmentationService, [
+    segmentationService.EVENTS.SEGMENTATION_MODIFIED,
+    segmentationService.EVENTS.SEGMENTATION_REPRESENTATION_MODIFIED,
+    segmentationService.EVENTS.ANNOTATION_CUT_MERGE_PROCESS_COMPLETED,
+  ]);
+
   window.services = servicesManager.services;
   window.extensionManager = extensionManager;
   window.commandsManager = commandsManager;

extensions/cornerstone/src/initCornerstoneTools.js

@@ -41,6 +41,10 @@ import {
   SegmentSelectTool,
   RegionSegmentPlusTool,
   SegmentLabelTool,
+  LivewireContourSegmentationTool,
+  SculptorTool,
+  SplineContourSegmentationTool,
+  LabelMapEditWithContourTool,
 } from '@cornerstonejs/tools';
 import { LabelmapSlicePropagationTool, MarkerLabelmapTool } from '@cornerstonejs/ai';
 import * as polySeg from '@cornerstonejs/polymorphic-segmentation';
@@ -109,6 +113,10 @@ export default function initCornerstoneTools(configuration = {}) {
   addTool(LabelmapSlicePropagationTool);
   addTool(MarkerLabelmapTool);
   addTool(RegionSegmentPlusTool);
+  addTool(LivewireContourSegmentationTool);
+  addTool(SculptorTool);
+  addTool(SplineContourSegmentationTool);
+  addTool(LabelMapEditWithContourTool);
   // Modify annotation tools to use dashed lines on SR
   const annotationStyle = {
     textBoxFontSize: '15px',
@@ -168,6 +176,10 @@ const toolNames = {
   LabelmapSlicePropagation: LabelmapSlicePropagationTool.toolName,
   MarkerLabelmap: MarkerLabelmapTool.toolName,
   RegionSegmentPlus: RegionSegmentPlusTool.toolName,
+  LivewireContourSegmentation: LivewireContourSegmentationTool.toolName,
+  SculptorTool: SculptorTool.toolName,
+  SplineContourSegmentation: SplineContourSegmentationTool.toolName,
+  LabelMapEditWithContourTool: LabelMapEditWithContourTool.toolName,
 };
 
 export { toolNames };

extensions/cornerstone/src/panels/PanelSegmentation.tsx

@@ -1,16 +1,92 @@
-import React from 'react';
-import { SegmentationTable } from '@ohif/ui-next';
+import React, { useCallback, useEffect } from 'react';
+import {
+  IconPresentationProvider,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  SegmentationTable,
+  ToolSettings,
+} from '@ohif/ui-next';
 import { useActiveViewportSegmentationRepresentations } from '../hooks/useActiveViewportSegmentationRepresentations';
-import { metaData, cache } from '@cornerstonejs/core';
-import { useSystem } from '@ohif/core/src';
+import { useActiveToolOptions, useSystem } from '@ohif/core/src';
+import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
+import { Toolbar, useUIStateStore } from '@ohif/extension-default';
+import SegmentationUtilityButton from '../components/SegmentationUtilityButton';
+import { useSelectedSegmentationsForViewportStore } from '../stores';
+import {
+  hasExportableLabelMapData,
+  hasExportableContourData,
+} from '../utils/segmentationExportUtils';
 
-export default function PanelSegmentation({ children }: withAppTypes) {
+type PanelSegmentationProps = {
+  children?: React.ReactNode;
+
+  // The representation type for this segmentation panel. Undefined means all types.
+  segmentationRepresentationType?: SegmentationRepresentations;
+} & withAppTypes;
+
+export default function PanelSegmentation({
+  children,
+  segmentationRepresentationType,
+}: PanelSegmentationProps) {
   const { commandsManager, servicesManager } = useSystem();
-  const { customizationService, displaySetService } = servicesManager.services;
+  const {
+    customizationService,
+    displaySetService,
+    viewportGridService,
+    toolbarService,
+    segmentationService,
+  } = servicesManager.services;
+  const { activeViewportId } = viewportGridService.getState();
+
+  const utilitiesSectionMap = {
+    [SegmentationRepresentations.Labelmap]: toolbarService.sections.labelMapSegmentationUtilities,
+    [SegmentationRepresentations.Contour]: toolbarService.sections.contourSegmentationUtilities,
+  };
+
+  const selectedSegmentationsForViewportMap = useSelectedSegmentationsForViewportStore(
+    store => store.selectedSegmentationsForViewport[activeViewportId]
+  );
+
+  const selectedSegmentationIdForType = segmentationRepresentationType
+    ? selectedSegmentationsForViewportMap?.get(segmentationRepresentationType)
+    : segmentationService?.getActiveSegmentation(activeViewportId)?.segmentationId;
+
+  const buttonSection = utilitiesSectionMap[segmentationRepresentationType];
+
+  const { activeToolOptions: activeUtilityOptions } = useActiveToolOptions({
+    buttonSectionId: buttonSection,
+  });
 
   const { segmentationsWithRepresentations, disabled } =
     useActiveViewportSegmentationRepresentations();
 
+  const setUIState = useUIStateStore(store => store.setUIState);
+
+  // useEffect for handling clicks on any of the non-active viewports.
+  // The ViewportGrid stops the propagation of pointer/mouse events
+  // for non-active viewports so the Popover below
+  // is not closed when clicking on any of the non-active viewports.
+  useEffect(() => {
+    setUIState('activeSegmentationUtility', null);
+    toolbarService.refreshToolbarState({ viewportId: activeViewportId });
+  }, [activeViewportId, setUIState, toolbarService]);
+
+  // The callback for handling clicks outside of the Popover and, the SegmentationUtilityButton
+  // that triggered it to open. Clicks outside those components must close the Popover.
+  // The Popover is made visible whenever the options associated with the
+  // activeSegmentationUtility exist. Thus clearing the activeSegmentationUtility
+  // clears the associated options and will keep the Popover closed.
+  const handlePopoverOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) {
+        setUIState('activeSegmentationUtility', null);
+        toolbarService.refreshToolbarState({ viewportId: activeViewportId });
+      }
+    },
+    [activeViewportId, setUIState, toolbarService]
+  );
+
   // Extract customization options
   const segmentationTableMode = customizationService.getCustomization(
     'panelSegmentation.tableMode'
@@ -35,6 +111,7 @@ export default function PanelSegmentation({ children }: withAppTypes) {
     },
     onSegmentAdd: segmentationId => {
       commandsManager.run('addSegment', { segmentationId });
+      commandsManager.run('setActiveSegmentation', { segmentationId });
     },
     onSegmentClick: (segmentationId, segmentIndex) => {
       commandsManager.run('setActiveSegmentAndCenter', { segmentationId, segmentIndex });
@@ -51,6 +128,14 @@ export default function PanelSegmentation({ children }: withAppTypes) {
     onSegmentDelete: (segmentationId, segmentIndex) => {
       commandsManager.run('deleteSegment', { segmentationId, segmentIndex });
     },
+    onSegmentCopy:
+      segmentationRepresentationType === SegmentationRepresentations.Contour
+        ? (segmentationId, segmentIndex) => {
+            commandsManager.run('copyContourSegment', {
+              sourceSegmentInfo: { segmentationId, segmentIndex },
+            });
+          }
+        : undefined,
     onToggleSegmentVisibility: (segmentationId, segmentIndex, type) => {
       commandsManager.run('toggleSegmentVisibility', { segmentationId, segmentIndex, type });
     },
@@ -96,52 +181,26 @@ export default function PanelSegmentation({ children }: withAppTypes) {
   };
 
   // Generate export options
+  // Map each segmentation to an export option for it.
+  // A segmentation is exportable if it has any labelmap or contour data.
   const exportOptions = segmentationsWithRepresentations.map(({ segmentation }) => {
     const { representationData, segmentationId } = segmentation;
-    const { Labelmap } = representationData;
+    const { Labelmap, Contour } = representationData;
 
-    if (!Labelmap) {
+    if (!Labelmap && !Contour) {
       return { segmentationId, isExportable: true };
     }
 
-    // Check if any segments have anything drawn in any of the viewports
-    const hasAnySegmentData = (() => {
-      const imageIds = Labelmap.imageIds;
-      if (!imageIds?.length) return false;
-
-      for (const imageId of imageIds) {
-        const pixelData = cache.getImage(imageId)?.getPixelData();
-        if (!pixelData) continue;
-
-        for (let i = 0; i < pixelData.length; i++) {
-          if (pixelData[i] !== 0) return true;
-        }
-      }
-      return false;
-    })();
-
-    if (!hasAnySegmentData) {
+    if (
+      !hasExportableLabelMapData(Labelmap, displaySetService) &&
+      !hasExportableContourData(Contour)
+    ) {
       return { segmentationId, isExportable: false };
     }
 
-    const referencedImageIds = Labelmap.referencedImageIds;
-    const firstImageId = referencedImageIds[0];
-    const instance = metaData.get('instance', firstImageId);
-
-    if (!instance) {
-      return { segmentationId, isExportable: false };
-    }
-
-    const SOPInstanceUID = instance.SOPInstanceUID || instance.SopInstanceUID;
-    const SeriesInstanceUID = instance.SeriesInstanceUID;
-    const displaySet = displaySetService.getDisplaySetForSOPInstanceUID(
-      SOPInstanceUID,
-      SeriesInstanceUID
-    );
-
     return {
       segmentationId,
-      isExportable: displaySet?.isReconstructable,
+      isExportable: true,
     };
   });
 
@@ -150,15 +209,34 @@ export default function PanelSegmentation({ children }: withAppTypes) {
     disabled,
     data: segmentationsWithRepresentations,
     mode: segmentationTableMode,
-    title: 'Segmentations',
+    title: `${segmentationRepresentationType ? `${segmentationRepresentationType} ` : ''}Segmentations`,
     exportOptions,
     disableEditing,
     onSegmentationAdd,
     showAddSegment,
     renderInactiveSegmentations: handlers.getRenderInactiveSegmentations(),
+    segmentationRepresentationType,
+    selectedSegmentationIdForType,
     ...handlers,
   };
 
+  const renderUtilitiesToolbar = () => {
+    if (!buttonSection) {
+      return null;
+    }
+
+    return (
+      <IconPresentationProvider
+        size="large"
+        IconContainer={SegmentationUtilityButton}
+      >
+        <div className="flex flex-wrap gap-[3px] bg-transparent pb-[2px] pl-[8px] pt-[6px]">
+          <Toolbar buttonSection={buttonSection} />
+        </div>
+      </IconPresentationProvider>
+    );
+  };
+
   const renderSegments = () => {
     return (
       <SegmentationTable.Segments>
@@ -175,6 +253,7 @@ export default function PanelSegmentation({ children }: withAppTypes) {
     if (tableProps.mode === 'collapsed') {
       return (
         <SegmentationTable.Collapsed>
+          {renderUtilitiesToolbar()}
           <SegmentationTable.Collapsed.Header>
             <SegmentationTable.Collapsed.DropdownMenu>
               <CustomDropdownMenuContent />
@@ -193,6 +272,7 @@ export default function PanelSegmentation({ children }: withAppTypes) {
     return (
       <>
         <SegmentationTable.Expanded>
+          {renderUtilitiesToolbar()}
           <SegmentationTable.Expanded.Header>
             <SegmentationTable.Expanded.DropdownMenu>
               <CustomDropdownMenuContent />
@@ -211,11 +291,27 @@ export default function PanelSegmentation({ children }: withAppTypes) {
   };
 
   return (
-    <SegmentationTable {...tableProps}>
-      {children}
-      <SegmentationTable.Config />
-      <SegmentationTable.AddSegmentationRow />
-      {renderModeContent()}
-    </SegmentationTable>
+    <Popover
+      open={!!activeUtilityOptions}
+      onOpenChange={handlePopoverOpenChange}
+    >
+      <PopoverAnchor>
+        <SegmentationTable {...tableProps}>
+          {children}
+          <SegmentationTable.Config />
+          <SegmentationTable.AddSegmentationRow />
+          {renderModeContent()}
+        </SegmentationTable>
+      </PopoverAnchor>
+      {activeUtilityOptions && (
+        <PopoverContent
+          side="left"
+          align="start"
+          className="w-auto"
+        >
+          <ToolSettings options={activeUtilityOptions} />
+        </PopoverContent>
+      )}
+    </Popover>
   );
 }

extensions/cornerstone/src/services/SegmentationService/SegmentationService.test.ts

@@ -221,7 +221,7 @@ describe('SegmentationService', () => {
     it('should add event listeners', () => {
       service.onModeEnter();
 
-      expect(eventTarget.addEventListener).toHaveBeenCalledTimes(7);
+      expect(eventTarget.addEventListener).toHaveBeenCalledTimes(8);
 
       expect(eventTarget.addEventListener).toHaveBeenCalledWith(
         csToolsEnums.Events.SEGMENTATION_MODIFIED,
@@ -251,6 +251,10 @@ describe('SegmentationService', () => {
         csToolsEnums.Events.SEGMENTATION_ADDED,
         expect.any(Function)
       );
+      expect(eventTarget.addEventListener).toHaveBeenCalledWith(
+        csToolsEnums.Events.ANNOTATION_CUT_MERGE_PROCESS_COMPLETED,
+        expect.any(Function)
+      );
     });
   });
 
@@ -1999,7 +2003,7 @@ describe('SegmentationService', () => {
 
       service.addSegment(segmentationId, config);
 
-      expect(cstSegmentation.state.getSegmentation).toHaveBeenCalledTimes(1);
+      expect(cstSegmentation.state.getSegmentation).toHaveBeenCalledTimes(2);
       expect(cstSegmentation.state.getSegmentation).toHaveBeenCalledWith(segmentationId);
 
       expect(cstSegmentation.updateSegmentations).toHaveBeenCalledTimes(1);

extensions/cornerstone/src/services/SegmentationService/SegmentationService.ts

@@ -81,6 +81,8 @@ const EVENTS = {
   SEGMENT_LOADING_COMPLETE: 'event::segment_loading_complete',
   // loading completed for all segments
   SEGMENTATION_LOADING_COMPLETE: 'event::segmentation_loading_complete',
+  // fired when a contour annotation cut merge process is completed
+  ANNOTATION_CUT_MERGE_PROCESS_COMPLETED: 'event::annotation_cut_merge_process_completed',
 };
 
 const VALUE_TYPES = {};
@@ -350,6 +352,39 @@ class SegmentationService extends PubSubService {
       FrameOfReferenceUID?: string;
       label?: string;
     }
+  ): Promise<string> {
+    return this._createSegmentationForDisplaySet(displaySet, LABELMAP, options);
+  }
+
+  public async createContourForDisplaySet(
+    displaySet: AppTypes.DisplaySet,
+    options?: {
+      segmentationId?: string;
+      segments?: { [segmentIndex: number]: Partial<cstTypes.Segment> };
+      FrameOfReferenceUID?: string;
+      label?: string;
+    }
+  ): Promise<string> {
+    return this._createSegmentationForDisplaySet(displaySet, CONTOUR, options);
+  }
+
+  /**
+   * Private method to create segmentation for a display set with the specified type
+   *
+   * @param displaySet - The display set to create the segmentation for
+   * @param segmentationType - The type of segmentation (SegmentationRepresentations enum)
+   * @param options - Optional parameters for creating the segmentation
+   * @returns A promise that resolves to the created segmentation ID
+   */
+  private async _createSegmentationForDisplaySet(
+    displaySet: AppTypes.DisplaySet,
+    segmentationType: SegmentationRepresentations,
+    options?: {
+      segmentationId?: string;
+      segments?: { [segmentIndex: number]: Partial<cstTypes.Segment> };
+      FrameOfReferenceUID?: string;
+      label?: string;
+    }
   ): Promise<string> {
     // Todo: random does not makes sense, make this better, like
     // labelmap 1, 2, 3 etc
@@ -375,7 +410,7 @@ class SegmentationService extends PubSubService {
     const segmentationPublicInput: cstTypes.SegmentationPublicInput = {
       segmentationId,
       representation: {
-        type: LABELMAP,
+        type: segmentationType,
         data: {
           imageIds: segImageIds,
           // referencedVolumeId: this._getVolumeIdForDisplaySet(displaySet),
@@ -808,6 +843,15 @@ class SegmentationService extends PubSubService {
     cstSegmentation.config.style.resetToGlobalStyle();
   };
 
+  public getNextAvailableSegmentIndex(segmentationId: string): number {
+    const csSegmentation = this.getCornerstoneSegmentation(segmentationId);
+    // grab the next available segment index based on the object keys,
+    // so basically get the highest segment index value + 1
+
+    const segmentKeys = Object.keys(csSegmentation.segments);
+    return segmentKeys.length === 0 ? 1 : Math.max(...segmentKeys.map(Number)) + 1;
+  }
+
   /**
    * Adds a new segment to the specified segmentation.
    * @param segmentationId - The ID of the segmentation to add the segment to.
@@ -841,10 +885,7 @@ class SegmentationService extends PubSubService {
 
     let segmentIndex = config.segmentIndex;
     if (!segmentIndex) {
-      // grab the next available segment index based on the object keys,
-      // so basically get the highest segment index value + 1
-      const segmentKeys = Object.keys(csSegmentation.segments);
-      segmentIndex = segmentKeys.length === 0 ? 1 : Math.max(...segmentKeys.map(Number)) + 1;
+      segmentIndex = this.getNextAvailableSegmentIndex(segmentationId);
     }
 
     // update the segmentation
@@ -1627,6 +1668,11 @@ class SegmentationService extends PubSubService {
       csToolsEnums.Events.SEGMENTATION_ADDED,
       this._onSegmentationAddedFromSource
     );
+
+    eventTarget.addEventListener(
+      csToolsEnums.Events.ANNOTATION_CUT_MERGE_PROCESS_COMPLETED,
+      this._onAnnotationCutMergeProcessCompletedFromSource
+    );
   }
 
   private getCornerstoneSegmentation(segmentationId: string) {
@@ -1879,6 +1925,13 @@ class SegmentationService extends PubSubService {
       segmentationId,
     });
   };
+
+  private _onAnnotationCutMergeProcessCompletedFromSource = evt => {
+    const { segmentationId } = evt.detail;
+    this._broadcastEvent(this.EVENTS.ANNOTATION_CUT_MERGE_PROCESS_COMPLETED, {
+      segmentationId,
+    });
+  };
 }
 
 export default SegmentationService;

extensions/cornerstone/src/stores/index.ts

@@ -2,3 +2,4 @@ export { useLutPresentationStore } from './useLutPresentationStore';
 export { usePositionPresentationStore } from './usePositionPresentationStore';
 export { useSegmentationPresentationStore } from './useSegmentationPresentationStore';
 export { useSynchronizersStore } from './useSynchronizersStore';
+export { useSelectedSegmentationsForViewportStore } from './useSelectedSegmentationsForViewportStore';

extensions/cornerstone/src/stores/useSelectedSegmentationsForViewportStore.ts

@@ -0,0 +1,85 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { SelectedSegmentationByTypeMap } from '../types/SelectedSegmentationByTypeMap';
+
+const PRESENTATION_TYPE_ID = 'selectedSegmentationsForViewportId';
+const DEBUG_STORE = false;
+
+/**
+ * Represents the state and actions for managing selected segmentations for a viewport by representation type.
+ */
+type SelectedSegmentationsForViewportState = {
+  /**
+   * Stores a mapping from viewport id to a map of representation type to segmentation id.
+   */
+  selectedSegmentationsForViewport: Record<string, SelectedSegmentationByTypeMap>;
+
+  /**
+   * Sets the selected segmentations for a given viewport id.
+   *
+   * @param key - The viewport id.
+   * @param value - The `SelectedSegmentationByTypeMap` to associate with the viewport id.
+   */
+  setSelectedSegmentationsForViewport: (key: string, value: SelectedSegmentationByTypeMap) => void;
+
+  /**
+   * Clears all selected segmentations for all viewports.
+   */
+  clearSelectedSegmentationsForViewportStore: () => void;
+
+  /**
+   * Type identifier for the store.
+   */
+  type: string;
+};
+
+/**
+ * Creates the Selected Segmentations For Viewport store.
+ *
+ * @param set - The zustand set function.
+ * @returns The selected segmentations for viewport store state and actions.
+ */
+const createSelectedSegmentationsForViewportStore = (
+  set
+): SelectedSegmentationsForViewportState => ({
+  selectedSegmentationsForViewport: {},
+  type: PRESENTATION_TYPE_ID,
+
+  /**
+   * Sets the selected segmentations for a given viewport id.
+   */
+  setSelectedSegmentationsForViewport: (key, value) =>
+    set(
+      state => ({
+        selectedSegmentationsForViewport: {
+          ...state.selectedSegmentationsForViewport,
+          [key]: value,
+        },
+      }),
+      false,
+      'setSelectedSegmentationsForViewport'
+    ),
+
+  /**
+   * Clears all selected segmentations for all viewports.
+   */
+  clearSelectedSegmentationsForViewportStore: () =>
+    set(
+      { selectedSegmentationsForViewport: {} },
+      false,
+      'clearSelectedSegmentationsForViewportStore'
+    ),
+});
+
+/**
+ * Zustand store for managing selected segmentations for a viewport by representation type.
+ * Applies devtools middleware when DEBUG_STORE is enabled.
+ */
+export const useSelectedSegmentationsForViewportStore =
+  create<SelectedSegmentationsForViewportState>()(
+    DEBUG_STORE
+      ? devtools(createSelectedSegmentationsForViewportStore, {
+          name: 'SelectedSegmentationsForViewportStore',
+        })
+      : createSelectedSegmentationsForViewportStore
+  );

extensions/cornerstone/src/types/SelectedSegmentationByTypeMap.ts

@@ -0,0 +1,3 @@
+import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
+
+export type SelectedSegmentationByTypeMap = Map<SegmentationRepresentations, string>;

extensions/cornerstone/src/utils/createSegmentationForViewport.ts

@@ -0,0 +1,74 @@
+import { utilities as csUtils } from '@cornerstonejs/core';
+import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
+import i18n from '@ohif/i18n';
+import { ServicesManager } from '@ohif/core';
+
+function _createDefaultSegments(createInitialSegment?: boolean) {
+  return createInitialSegment
+    ? {
+        1: {
+          label: `${i18n.t('Tools:Segment')} 1`,
+          active: true,
+        },
+      }
+    : {};
+}
+
+type CreateSegmentationForViewportOptions = {
+  displaySetInstanceUID?: string;
+  label?: string;
+  segmentationId?: string;
+  createInitialSegment?: boolean;
+};
+
+type CreateSegmentationForViewportParams = {
+  viewportId: string;
+  options?: CreateSegmentationForViewportOptions;
+  segmentationType: SegmentationRepresentations;
+};
+
+/**
+ * Creates a segmentation for the active viewport
+ *
+ * The created segmentation will be registered as a display set and also added
+ * as a segmentation representation to the viewport.
+ */
+export async function createSegmentationForViewport(
+  servicesManager: ServicesManager,
+  { viewportId, options = {}, segmentationType }: CreateSegmentationForViewportParams
+): Promise<string> {
+  const { viewportGridService, displaySetService, segmentationService } = servicesManager.services;
+  const { viewports } = viewportGridService.getState();
+  const targetViewportId = viewportId;
+
+  const viewport = viewports.get(targetViewportId);
+
+  // Todo: add support for multiple display sets
+  const displaySetInstanceUID = options.displaySetInstanceUID || viewport.displaySetInstanceUIDs[0];
+
+  const segs = segmentationService.getSegmentations();
+
+  const label = options.label || `${i18n.t('Tools:Segmentation')} ${segs.length + 1}`;
+  const segmentationId = options.segmentationId || `${csUtils.uuidv4()}`;
+
+  const displaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
+
+  const segmentationCreationOptions = {
+    label,
+    segmentationId,
+    segments: _createDefaultSegments(options.createInitialSegment),
+  };
+
+  // This will create the segmentation and register it as a display set
+  const generatedSegmentationId = await (segmentationType === SegmentationRepresentations.Labelmap
+    ? segmentationService.createLabelmapForDisplaySet(displaySet, segmentationCreationOptions)
+    : segmentationService.createContourForDisplaySet(displaySet, segmentationCreationOptions));
+
+  // Also add the segmentation representation to the viewport
+  await segmentationService.addSegmentationRepresentation(viewportId, {
+    segmentationId,
+    type: segmentationType,
+  });
+
+  return generatedSegmentationId;
+}

extensions/cornerstone/src/utils/index.ts

@@ -10,6 +10,7 @@ import promptHydrationDialog, {
   HydrationSRResult,
 } from './promptHydrationDialog';
 import { getCenterExtent } from './getCenterExtent';
+import { createSegmentationForViewport } from './createSegmentationForViewport';
 
 const utils = {
   handleSegmentChange,
@@ -18,6 +19,7 @@ const utils = {
   setupSegmentationModifiedHandler,
   promptHydrationDialog,
   getCenterExtent,
+  createSegmentationForViewport,
 };
 
 export type { HydrationDialogProps, HydrationCallback, HydrationSRResult };

extensions/cornerstone/src/utils/segmentationExportUtils.ts

@@ -0,0 +1,86 @@
+import { cache, metaData } from '@cornerstonejs/core';
+import { Types as cstTypes } from '@cornerstonejs/tools';
+
+/**
+ * Checks if a labelmap segmentation has exportable data
+ * A label map is exportable if it has any pixel data and
+ * it is referenced by a display set that is reconstructable.
+ *
+ * @param labelmap - The labelmap representation data
+ * @param displaySetService - The display set service instance
+ * @returns boolean - Whether the labelmap has exportable data
+ */
+export const hasExportableLabelMapData = (
+  labelmap: cstTypes.LabelmapSegmentationData | undefined,
+  displaySetService: any
+): boolean => {
+  if (!labelmap) {
+    return false;
+  }
+
+  const imageIds = labelmap?.imageIds;
+  if (!imageIds?.length) {
+    return false;
+  }
+
+  const hasPixelData = imageIds.some(imageId => {
+    const pixelData = cache.getImage(imageId)?.getPixelData();
+    if (!pixelData) {
+      return false;
+    }
+
+    for (let i = 0; i < pixelData.length; i++) {
+      if (pixelData[i] !== 0) {
+        return true;
+      }
+    }
+  });
+
+  if (!hasPixelData) {
+    return false;
+  }
+
+  const referencedImageIds = labelmap?.referencedImageIds;
+
+  if (!referencedImageIds) {
+    return false;
+  }
+  const firstImageId = referencedImageIds[0];
+  const instance = metaData.get('instance', firstImageId);
+
+  if (!instance) {
+    return false;
+  }
+
+  const SOPInstanceUID = instance.SOPInstanceUID || instance.SopInstanceUID;
+  const SeriesInstanceUID = instance.SeriesInstanceUID;
+  const displaySet = displaySetService.getDisplaySetForSOPInstanceUID(
+    SOPInstanceUID,
+    SeriesInstanceUID
+  );
+
+  return displaySet?.isReconstructable;
+};
+
+/**
+ * Checks if a contour segmentation has exportable data
+ * A contour is exportable if it has any contour annotation/geometry data.
+ *
+ * @param contour - The contour representation data
+ * @returns boolean - Whether the contour has exportable data
+ */
+export const hasExportableContourData = (
+  contour: cstTypes.ContourSegmentationData | undefined
+): boolean => {
+  if (!contour) {
+    return false;
+  }
+
+  const contourAnnotationUIDsMap = contour?.annotationUIDsMap;
+
+  if (!contourAnnotationUIDsMap) {
+    return false;
+  }
+
+  return contourAnnotationUIDsMap.size > 0;
+};

extensions/cornerstone/src/utils/segmentationHandlers.ts

@@ -1,5 +1,7 @@
 import * as cornerstoneTools from '@cornerstonejs/tools';
 import { updateSegmentationStats } from './updateSegmentationStats';
+import { useSelectedSegmentationsForViewportStore } from '../stores';
+import { SegmentationRepresentations } from '@cornerstonejs/tools/enums';
 
 /**
  * Sets up the handler for segmentation data modification events
@@ -110,3 +112,49 @@ export function setupSegmentationModifiedHandler({ segmentationService }) {
 
   return { unsubscribe };
 }
+
+/**
+ * Sets up auto tab switching for when the first segmentation is added into the viewer.
+ */
+export function setUpSelectedSegmentationsForViewportHandler({ segmentationService }) {
+  const selectedSegmentationsForViewportEvents = [
+    segmentationService.EVENTS.SEGMENTATION_MODIFIED,
+    segmentationService.EVENTS.SEGMENTATION_REPRESENTATION_MODIFIED,
+  ];
+
+  const unsubscribeSelectedSegmentationsForViewportEvents = selectedSegmentationsForViewportEvents
+    .map(eventName =>
+      segmentationService.subscribe(eventName, event => {
+        const { viewportId } = event;
+
+        if (!viewportId) {
+          return;
+        }
+
+        const { selectedSegmentationsForViewport, setSelectedSegmentationsForViewport } =
+          useSelectedSegmentationsForViewportStore.getState();
+
+        const representations = segmentationService.getSegmentationRepresentations(viewportId);
+
+        const activeRepresentation = representations.find(representation => representation.active);
+
+        const typeToSegmentationIdMap =
+          selectedSegmentationsForViewport[viewportId] ??
+          new Map<SegmentationRepresentations, string>();
+
+        if (activeRepresentation) {
+          typeToSegmentationIdMap.set(
+            activeRepresentation.type,
+            activeRepresentation.segmentationId
+          );
+        } else {
+          typeToSegmentationIdMap.clear();
+        }
+
+        setSelectedSegmentationsForViewport(viewportId, typeToSegmentationIdMap);
+      })
+    )
+    .map(subscription => subscription.unsubscribe);
+
+  return { unsubscribeSelectedSegmentationsForViewportEvents };
+}

extensions/cornerstone/src/utils/setUpSegmentationEventHandlers.test.ts

@@ -2,11 +2,13 @@ import { setUpSegmentationEventHandlers } from './setUpSegmentationEventHandlers
 import {
   setupSegmentationDataModifiedHandler,
   setupSegmentationModifiedHandler,
+  setUpSelectedSegmentationsForViewportHandler,
 } from './segmentationHandlers';
 
 jest.mock('./segmentationHandlers', () => ({
   setupSegmentationDataModifiedHandler: jest.fn(),
   setupSegmentationModifiedHandler: jest.fn(),
+  setUpSelectedSegmentationsForViewportHandler: jest.fn(),
 }));
 
 describe('setUpSegmentationEventHandlers', () => {
@@ -38,6 +40,7 @@ describe('setUpSegmentationEventHandlers', () => {
   const mockUnsubscribeDataModified = jest.fn();
   const mockUnsubscribeModified = jest.fn();
   const mockUnsubscribeCreated = jest.fn();
+  const mockUnsubscribeSelectedSegmentationsForViewportEvents = [jest.fn(), jest.fn()];
 
   const defaultParameters = {
     servicesManager: mockServicesManager as unknown as AppTypes.ServicesManager,
@@ -52,6 +55,10 @@ describe('setUpSegmentationEventHandlers', () => {
     (setupSegmentationModifiedHandler as jest.Mock).mockReturnValue({
       unsubscribe: mockUnsubscribeModified,
     });
+    (setUpSelectedSegmentationsForViewportHandler as jest.Mock).mockReturnValue({
+      unsubscribeSelectedSegmentationsForViewportEvents:
+        mockUnsubscribeSelectedSegmentationsForViewportEvents,
+    });
     mockSegmentationService.subscribe.mockReturnValue({
       unsubscribe: mockUnsubscribeCreated,
     });
@@ -92,6 +99,7 @@ describe('setUpSegmentationEventHandlers', () => {
         mockUnsubscribeDataModified,
         mockUnsubscribeModified,
         mockUnsubscribeCreated,
+        ...mockUnsubscribeSelectedSegmentationsForViewportEvents,
       ],
     });
   });

extensions/cornerstone/src/utils/setUpSegmentationEventHandlers.ts

@@ -1,4 +1,5 @@
 import {
+  setUpSelectedSegmentationsForViewportHandler,
   setupSegmentationDataModifiedHandler,
   setupSegmentationModifiedHandler,
 } from './segmentationHandlers';
@@ -28,7 +29,9 @@ export const setUpSegmentationEventHandlers = ({ servicesManager, commandsManage
 
       const segmentation = segmentationService.getSegmentation(segmentationId);
       const label = segmentation.cachedStats.info;
-      const imageIds = segmentation.representationData.Labelmap.imageIds;
+      const imageIds =
+        segmentation.representationData?.Labelmap?.imageIds ??
+        segmentation.representationData?.Contour?.imageIds;
 
       // Create a display set for the segmentation
       const segmentationDisplaySet = {
@@ -50,10 +53,16 @@ export const setUpSegmentationEventHandlers = ({ servicesManager, commandsManage
     }
   );
 
+  const { unsubscribeSelectedSegmentationsForViewportEvents } =
+    setUpSelectedSegmentationsForViewportHandler({
+      segmentationService,
+    });
+
   const unsubscriptions = [
     unsubscribeSegmentationDataModifiedHandler,
     unsubscribeSegmentationModifiedHandler,
     unsubscribeSegmentationCreated,
+    ...unsubscribeSelectedSegmentationsForViewportEvents,
   ];
 
   return { unsubscriptions };

extensions/default/src/Components/SidePanelWithServices.tsx

@@ -28,7 +28,7 @@ const SidePanelWithServices = ({
   onClose,
   ...props
 }: SidePanelWithServicesProps) => {
-  const panelService = servicesManager?.services?.panelService;
+  const { panelService, toolbarService, viewportGridService } = servicesManager.services;
 
   // Tracks whether this SidePanel has been opened at least once since this SidePanel was inserted into the DOM.
   // Thus going to the Study List page and back to the viewer resets this flag for a SidePanel.
@@ -37,9 +37,15 @@ const SidePanelWithServices = ({
   const [closedManually, setClosedManually] = useState(false);
   const [tabs, setTabs] = useState(tabsProp ?? panelService.getPanels(side));
 
-  const handleActiveTabIndexChange = useCallback(({ activeTabIndex }) => {
-    setActiveTabIndex(activeTabIndex);
-  }, []);
+  const handleActiveTabIndexChange = useCallback(
+    ({ activeTabIndex }) => {
+      const { activeViewportId: viewportId } = viewportGridService.getState();
+      toolbarService.refreshToolbarState({ viewportId });
+
+      setActiveTabIndex(activeTabIndex);
+    },
+    [toolbarService, viewportGridService]
+  );
 
   const handleOpen = useCallback(() => {
     setSidePanelExpanded(true);

extensions/default/src/Toolbar/Toolbar.tsx

@@ -1,9 +1,30 @@
 import React from 'react';
 import { useToolbar } from '@ohif/core';
 
+/**
+ * Props for the Toolbar component that renders a collection of toolbar buttons and/or button sections.
+ *
+ * @interface ToolbarProps
+ */
 interface ToolbarProps {
+  /**
+   * The section of buttons to display in the toolbar.
+   * Common values include 'primary', 'secondary', 'tertiary', etc.
+   * Defaults to 'primary' if not specified.
+   *
+   * @default 'primary'
+   */
   buttonSection?: string;
+
+  /**
+   * The unique identifier of the viewport this toolbar is associated with.
+   */
   viewportId?: string;
+
+  /**
+   * The numeric position or location of the toolbar.
+   * Used for ordering and layout purposes in the UI.
+   */
   location?: number;
 }
 
@@ -60,7 +81,17 @@ export function Toolbar({ buttonSection = 'primary', viewportId, location }: Too
           />
         );
 
-        return <div key={id}>{tool}</div>;
+        return (
+          <div
+            key={id}
+            // This wrapper div exists solely for React's key prop requirement during reconciliation.
+            // We use display:contents to make it transparent to the layout engine (children appear
+            // as direct children of the parent) while keeping it in the DOM for React's virtual DOM.
+            className="contents"
+          >
+            {tool}
+          </div>
+        );
       })}
     </>
   );

extensions/default/src/getToolbarModule.tsx

@@ -10,6 +10,7 @@ import ToolButtonListWrapper from './Toolbar/ToolButtonListWrapper';
 import ToolRowWrapper from './Toolbar/ToolRowWrapper';
 import { ToolBoxButtonGroupWrapper, ToolBoxButtonWrapper } from './Toolbar/ToolBoxWrapper';
 import { ToolButtonWrapper } from './Toolbar/ToolButtonWrapper';
+import { Toolbar } from './Toolbar';
 
 export default function getToolbarModule({ commandsManager, servicesManager }: withAppTypes) {
   const { cineService } = servicesManager.services;
@@ -45,6 +46,10 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
       name: 'ohif.progressDropdown',
       defaultComponent: ProgressDropdownWithService,
     },
+    {
+      name: 'ohif.Toolbar',
+      defaultComponent: Toolbar,
+    },
     {
       name: 'evaluate.cine',
       evaluate: () => {

extensions/default/src/utils/Toolbox.tsx

@@ -1,12 +1,21 @@
 import React, { useState } from 'react';
 import { Icons, PanelSection, ToolSettings } from '@ohif/ui-next';
-import { useSystem, useToolbar } from '@ohif/core';
-import classnames from 'classnames';
+import { useSystem, useToolbar, useActiveToolOptions } from '@ohif/core';
 import { useTranslation } from 'react-i18next';
 
-interface ButtonProps {
-  isActive?: boolean;
-  options?: unknown;
+/**
+ * Props for the Toolbox component that renders a collection of toolbar button sections.
+ */
+interface ToolboxProps {
+  /**
+   * The unique identifier of the button section this toolbox represents.
+   */
+  buttonSectionId: string;
+
+  /**
+   * The display title for the toolbox.
+   */
+  title: string;
 }
 
 /**
@@ -19,7 +28,7 @@ interface ButtonProps {
  * role in enhancing the app with a toolbox by providing a way to integrate
  * and display various tools and their corresponding options
  */
-export function Toolbox({ buttonSectionId, title }: { buttonSectionId: string; title: string }) {
+export function Toolbox({ buttonSectionId, title }: ToolboxProps) {
   const { servicesManager } = useSystem();
   const { t } = useTranslation();
 
@@ -30,6 +39,8 @@ export function Toolbox({ buttonSectionId, title }: { buttonSectionId: string; t
     buttonSection: buttonSectionId,
   });
 
+  const { activeToolOptions } = useActiveToolOptions({ buttonSectionId });
+
   if (!toolboxSections.length) {
     return null;
   }
@@ -41,35 +52,6 @@ export function Toolbox({ buttonSectionId, title }: { buttonSectionId: string; t
     );
   }
 
-  // Helper to check a list of buttons for an active tool.
-  const findActiveOptions = (buttons: any[]): unknown => {
-    for (const tool of buttons) {
-      if (tool.componentProps.isActive) {
-        return tool.componentProps.options;
-      }
-      if (tool.componentProps.buttonSection) {
-        const nestedButtons = toolbarService.getButtonPropsInButtonSection(
-          tool.componentProps.buttonSection
-        ) as ButtonProps[];
-        const activeNested = nestedButtons.find(nested => nested.isActive);
-        if (activeNested) {
-          return activeNested.options;
-        }
-      }
-    }
-    return null;
-  };
-
-  // Look for active tool options across all sections.
-  const activeToolOptions = toolboxSections.reduce((activeOptions, section) => {
-    if (activeOptions) {
-      return activeOptions;
-    }
-    const sectionId = section.componentProps.buttonSection;
-    const buttons = toolbarService.getButtonSection(sectionId);
-    return findActiveOptions(buttons);
-  }, null);
-
   // Define the interaction handler once.
   const handleInteraction = ({ itemId }: { itemId: string }) => {
     onInteraction?.({ itemId });
@@ -103,19 +85,20 @@ export function Toolbox({ buttonSectionId, title }: { buttonSectionId: string; t
           return (
             <div
               key={sectionId}
-              className="bg-muted flex flex-wrap space-x-2 py-2 px-1"
+              className="bg-muted flex flex-wrap gap-2 py-2 px-1"
             >
               {buttons.map(tool => {
-                if (!tool) {
+                // Skip over tools that are not visible. The visible flag is typically set to
+                // false as a result of the evaluator function. The evaluator might explicitly
+                // set visible to false. Alternatively, the ToolbarService will set the visible flag to
+                // false when the evaluator sets disabled to true and the tool has the hideWhenDisabled flag set to true.
+                if (!tool || !tool.componentProps.visible) {
                   return null;
                 }
                 const { id, Component, componentProps } = tool;
 
                 return (
-                  <div
-                    key={id}
-                    className={classnames('ml-1')}
-                  >
+                  <div key={id}>
                     <Component
                       {...componentProps}
                       id={id}