feat(segmentation): Enhanced segmentation panel design for TMTV (#3988)

Co-authored-by: Alireza <ar.sedghi@gmail.com>

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

@@ -206,6 +206,9 @@ const commandsModule = ({
     loadSegmentationDisplaySetsForViewport: async ({ viewportId, displaySets }) => {
       // Todo: handle adding more than one segmentation
       const displaySet = displaySets[0];
+      const referencedDisplaySet = displaySetService.getDisplaySetByUID(
+        displaySet.referencedDisplaySetInstanceUID
+      );
 
       updateViewportsForSegmentationRendering({
         viewportId,
@@ -221,7 +224,8 @@ const commandsModule = ({
 
           const boundFn = segmentationService[serviceFunction].bind(segmentationService);
           const segmentationId = await boundFn(segDisplaySet, null, suppressEvents);
-
+          const segmentation = segmentationService.getSegmentation(segmentationId);
+          segmentation.description = `S${referencedDisplaySet.SeriesNumber}: ${referencedDisplaySet.SeriesDescription}`;
           return segmentationId;
         },
       });

extensions/cornerstone-dicom-seg/src/getPanelModule.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { useAppConfig } from '@state';
 import { Toolbox } from '@ohif/ui';
 import PanelSegmentation from './panels/PanelSegmentation';
+import { SegmentationPanelMode } from './types/segmentation';
 
 const getPanelModule = ({
   commandsManager,
@@ -17,6 +18,9 @@ const getPanelModule = ({
     const [appConfig] = useAppConfig();
 
     const disableEditingForMode = customizationService.get('segmentation.disableEditing');
+    const segmentationPanelMode =
+      customizationService.get('segmentation.segmentationPanelMode')?.value ||
+      SegmentationPanelMode.Dropdown;
 
     return (
       <PanelSegmentation
@@ -26,12 +30,18 @@ const getPanelModule = ({
         configuration={{
           ...configuration,
           disableEditing: appConfig.disableEditing || disableEditingForMode?.value,
+          segmentationPanelMode: segmentationPanelMode,
         }}
       />
     );
   };
 
   const wrappedPanelSegmentationWithTools = configuration => {
+    const [appConfig] = useAppConfig();
+    const segmentationPanelMode =
+      customizationService.get('segmentation.segmentationPanelMode')?.value ||
+      SegmentationPanelMode.Dropdown;
+
     return (
       <>
         <Toolbox
@@ -50,6 +60,7 @@ const getPanelModule = ({
           extensionManager={extensionManager}
           configuration={{
             ...configuration,
+            segmentationPanelMode: segmentationPanelMode,
           }}
         />
       </>

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

@@ -3,7 +3,7 @@ export function getToolbarModule({ commandsManager, servicesManager }) {
   return [
     {
       name: 'evaluate.cornerstone.segmentation',
-      evaluate: ({ viewportId, button, toolNames }) => {
+      evaluate: ({ viewportId, button, toolNames, disabledText }) => {
         // Todo: we need to pass in the button section Id since we are kind of
         // forcing the button to have black background since initially
         // it is designed for the toolbox not the toolbar on top
@@ -13,6 +13,7 @@ export function getToolbarModule({ commandsManager, servicesManager }) {
           return {
             disabled: true,
             className: '!text-common-bright !bg-black opacity-50',
+            disabledText: disabledText ?? 'No segmentations available',
           };
         }
 
@@ -28,6 +29,7 @@ export function getToolbarModule({ commandsManager, servicesManager }) {
           return {
             disabled: true,
             className: '!text-common-bright ohif-disabled',
+            disabledText: disabledText ?? 'Not available on the current viewport',
           };
         }
 

extensions/cornerstone-dicom-seg/src/panels/PanelSegmentation.tsx

@@ -1,12 +1,17 @@
 import { createReportAsync } from '@ohif/extension-default';
 import React, { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { SegmentationGroupTable } from '@ohif/ui';
-
+import { SegmentationGroupTable, SegmentationGroupTableExpanded } from '@ohif/ui';
+import { SegmentationPanelMode } from '../types/segmentation';
 import callInputDialog from './callInputDialog';
 import callColorPickerDialog from './colorPickerDialog';
 import { useTranslation } from 'react-i18next';
 
+const components = {
+  [SegmentationPanelMode.Expanded]: SegmentationGroupTableExpanded,
+  [SegmentationPanelMode.Dropdown]: SegmentationGroupTable,
+};
+
 export default function PanelSegmentation({
   servicesManager,
   commandsManager,
@@ -170,6 +175,22 @@ export default function PanelSegmentation({
 
   const onToggleSegmentationVisibility = segmentationId => {
     segmentationService.toggleSegmentationVisibility(segmentationId);
+    const segmentation = segmentationService.getSegmentation(segmentationId);
+    const isVisible = segmentation.isVisible;
+    const segments = segmentation.segments;
+
+    const toolGroupIds = getToolGroupIds(segmentationId);
+
+    toolGroupIds.forEach(toolGroupId => {
+      segments.forEach((segment, segmentIndex) => {
+        segmentationService.setSegmentVisibility(
+          segmentationId,
+          segmentIndex,
+          isVisible,
+          toolGroupId
+        );
+      });
+    });
   };
 
   const _setSegmentationConfiguration = useCallback(
@@ -221,59 +242,53 @@ export default function PanelSegmentation({
     });
   };
 
+  const SegmentationGroupTableComponent = components[configuration?.segmentationPanelMode];
+
   return (
-    <>
-      <div className="ohif-scrollbar flex min-h-0 flex-auto select-none flex-col justify-between overflow-auto">
-        <SegmentationGroupTable
-          title={t('Segmentations')}
-          segmentations={segmentations}
-          disableEditing={configuration.disableEditing}
-          activeSegmentationId={selectedSegmentationId || ''}
-          onSegmentationAdd={onSegmentationAdd}
-          onSegmentationClick={onSegmentationClick}
-          onSegmentationDelete={onSegmentationDelete}
-          onSegmentationDownload={onSegmentationDownload}
-          onSegmentationDownloadRTSS={onSegmentationDownloadRTSS}
-          storeSegmentation={storeSegmentation}
-          onSegmentationEdit={onSegmentationEdit}
-          onSegmentClick={onSegmentClick}
-          onSegmentEdit={onSegmentEdit}
-          onSegmentAdd={onSegmentAdd}
-          onSegmentColorClick={onSegmentColorClick}
-          onSegmentDelete={onSegmentDelete}
-          onToggleSegmentVisibility={onToggleSegmentVisibility}
-          onToggleSegmentLock={onToggleSegmentLock}
-          onToggleSegmentationVisibility={onToggleSegmentationVisibility}
-          showDeleteSegment={true}
-          segmentationConfig={{ initialConfig: segmentationConfiguration }}
-          setRenderOutline={value =>
-            _setSegmentationConfiguration(selectedSegmentationId, 'renderOutline', value)
-          }
-          setOutlineOpacityActive={value =>
-            _setSegmentationConfiguration(selectedSegmentationId, 'outlineOpacity', value)
-          }
-          setRenderFill={value =>
-            _setSegmentationConfiguration(selectedSegmentationId, 'renderFill', value)
-          }
-          setRenderInactiveSegmentations={value =>
-            _setSegmentationConfiguration(
-              selectedSegmentationId,
-              'renderInactiveSegmentations',
-              value
-            )
-          }
-          setOutlineWidthActive={value =>
-            _setSegmentationConfiguration(selectedSegmentationId, 'outlineWidthActive', value)
-          }
-          setFillAlpha={value =>
-            _setSegmentationConfiguration(selectedSegmentationId, 'fillAlpha', value)
-          }
-          setFillAlphaInactive={value =>
-            _setSegmentationConfiguration(selectedSegmentationId, 'fillAlphaInactive', value)
-          }
-        />
-      </div>
-    </>
+    <SegmentationGroupTableComponent
+      title={t('Segmentations')}
+      segmentations={segmentations}
+      disableEditing={configuration.disableEditing}
+      activeSegmentationId={selectedSegmentationId || ''}
+      onSegmentationAdd={onSegmentationAdd}
+      onSegmentationClick={onSegmentationClick}
+      onSegmentationDelete={onSegmentationDelete}
+      onSegmentationDownload={onSegmentationDownload}
+      onSegmentationDownloadRTSS={onSegmentationDownloadRTSS}
+      storeSegmentation={storeSegmentation}
+      onSegmentationEdit={onSegmentationEdit}
+      onSegmentClick={onSegmentClick}
+      onSegmentEdit={onSegmentEdit}
+      onSegmentAdd={onSegmentAdd}
+      onSegmentColorClick={onSegmentColorClick}
+      onSegmentDelete={onSegmentDelete}
+      onToggleSegmentVisibility={onToggleSegmentVisibility}
+      onToggleSegmentLock={onToggleSegmentLock}
+      onToggleSegmentationVisibility={onToggleSegmentationVisibility}
+      showDeleteSegment={true}
+      segmentationConfig={{ initialConfig: segmentationConfiguration }}
+      setRenderOutline={value =>
+        _setSegmentationConfiguration(selectedSegmentationId, 'renderOutline', value)
+      }
+      setOutlineOpacityActive={value =>
+        _setSegmentationConfiguration(selectedSegmentationId, 'outlineOpacity', value)
+      }
+      setRenderFill={value =>
+        _setSegmentationConfiguration(selectedSegmentationId, 'renderFill', value)
+      }
+      setRenderInactiveSegmentations={value =>
+        _setSegmentationConfiguration(selectedSegmentationId, 'renderInactiveSegmentations', value)
+      }
+      setOutlineWidthActive={value =>
+        _setSegmentationConfiguration(selectedSegmentationId, 'outlineWidthActive', value)
+      }
+      setFillAlpha={value =>
+        _setSegmentationConfiguration(selectedSegmentationId, 'fillAlpha', value)
+      }
+      setFillAlphaInactive={value =>
+        _setSegmentationConfiguration(selectedSegmentationId, 'fillAlphaInactive', value)
+      }
+    />
   );
 }
 

extensions/cornerstone-dicom-seg/src/types/segmentation.tsx

@@ -0,0 +1,4 @@
+export enum SegmentationPanelMode {
+  Expanded = 'expanded',
+  Dropdown = 'dropdown',
+}