feat(segmentation): Enhance dropdown menu functionality in SegmentationTable (#4553)

2024-11-28 12:41:08 -05:00 · 2024-11-28 12:41:08 -05:00 · 397fd85653
commit 397fd85653
parent 144ec791a2
6 changed files with 153 additions and 167 deletions
--- a/extensions/cornerstone/src/panels/PanelSegmentation.tsx
+++ b/extensions/cornerstone/src/panels/PanelSegmentation.tsx
@ -1,5 +1,16 @@
 import React from 'react';
-import { SegmentationTable } from '@ohif/ui-next';
+import {
+  DropdownMenuLabel,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  Icons,
+  SegmentationTable,
+  DropdownMenuSubTrigger,
+} from '@ohif/ui-next';
 import { useActiveViewportSegmentationRepresentations } from '../hooks/useActiveViewportSegmentationRepresentations';
 import { metaData } from '@cornerstonejs/core';

@ -147,6 +158,66 @@ export default function PanelSegmentation({
    }
  );

+  const CustomDropdownMenuContent = customizationService.getCustomComponent(
+    'PanelSegmentation.CustomDropdownMenuContent',
+    ({
+      activeSegmentation,
+      onSegmentationAdd,
+      onSegmentationRemoveFromViewport,
+      onSegmentationEdit,
+      onSegmentationDelete,
+      allowExport,
+      storeSegmentation,
+      onSegmentationDownload,
+      onSegmentationDownloadRTSS,
+      t,
+    }) => (
+      <DropdownMenuContent align="start">
+        <DropdownMenuItem onClick={() => onSegmentationAdd(activeSegmentation.id)}>
+          <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(activeSegmentation.id)}>
+          <Icons.Series className="text-foreground" />
+          <span className="pl-2">{t('Remove from Viewport')}</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => onSegmentationEdit(activeSegmentation.id)}>
+          <Icons.Rename className="text-foreground" />
+          <span className="pl-2">{t('Rename')}</span>
+        </DropdownMenuItem>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger
+            disabled={!allowExport}
+            className="pl-1"
+          >
+            <Icons.Export className="text-foreground" />
+            <span className="pl-2">{t('Export & Download')}</span>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem onClick={() => storeSegmentation(activeSegmentation.id)}>
+                {t('Export DICOM SEG')}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => onSegmentationDownload(activeSegmentation.id)}>
+                {t('Download DICOM SEG')}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => onSegmentationDownloadRTSS(activeSegmentation.id)}>
+                {t('Download DICOM RTSTRUCT')}
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => onSegmentationDelete(activeSegmentation.id)}>
+          <Icons.Delete className="text-red-600" />
+          <span className="pl-2 text-red-600">{t('Delete')}</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    )
+  );
+
  const exportOptions = segmentationsWithRepresentations.map(({ segmentation }) => {
    const { representationData, segmentationId } = segmentation;
    const { Labelmap } = representationData;
@ -219,13 +290,17 @@ export default function PanelSegmentation({

        {SegmentationTableMode === 'collapsed' ? (
          <SegmentationTable.Collapsed>
-            <SegmentationTable.SelectorHeader />
+            <SegmentationTable.SelectorHeader>
+              <CustomDropdownMenuContent />
+            </SegmentationTable.SelectorHeader>
            <SegmentationTable.AddSegmentRow />
            <SegmentationTable.Segments />
          </SegmentationTable.Collapsed>
        ) : (
          <SegmentationTable.Expanded>
-            <SegmentationTable.Header />
+            <SegmentationTable.Header>
+              <CustomDropdownMenuContent />
+            </SegmentationTable.Header>
            {/* <SegmentationTable.AddSegmentRow /> */}
            <SegmentationTable.Segments />
          </SegmentationTable.Expanded>
--- a/extensions/default/src/commandsModule.ts
+++ b/extensions/default/src/commandsModule.ts
@ -124,6 +124,14 @@ const commandsModule = ({
     * @param options.stageId - the stageId to apply
     * @param options.stageIndex - the index of the stage to go to.
     * @param options.reset - flag to indicate if the HP should be reset to its original and not restored to a previous state
+     *
+     * commandsManager.run('setHangingProtocol', {
+     *   activeStudyUID: '1.2.3',
+     *   protocolId: 'myProtocol',
+     *   stageId: 'myStage',
+     *   stageIndex: 0,
+     *   reset: false,
+     * });
     */
    setHangingProtocol: ({
      activeStudyUID = '',
--- a/modes/longitudinal/src/customizations.tsx
+++ b/modes/longitudinal/src/customizations.tsx
@ -1,3 +1,16 @@
+import React from 'react';
+import {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuPortal,
+  DropdownMenuLabel,
+  Icons,
+} from '@ohif/ui-next';
+
 export const performCustomizations = customizationService => {
  // Set the custom SegmentationTable
  customizationService.addModeCustomizations([
@ -22,5 +35,30 @@ export const performCustomizations = customizationService => {
    //       { value: 'Toe', label: 'Toe' },
    //     ],
    //   },
+    /**
+     * Custom Dropdown Menu Item
+     */
+    // {
+    //   id: 'PanelSegmentation.CustomDropdownMenuContent',
+    //   content: ({
+    //     activeSegmentation,
+    //     onSegmentationAdd,
+    //     onSegmentationRemoveFromViewport,
+    //     onSegmentationEdit,
+    //     onSegmentationDelete,
+    //     allowExport,
+    //     storeSegmentation,
+    //     onSegmentationDownload,
+    //     onSegmentationDownloadRTSS,
+    //     t,
+    //   }) => (
+    //     <DropdownMenuContent align="start">
+    //       <DropdownMenuItem onClick={() => onSegmentationDelete(activeSegmentation.id)}>
+    //         <Icons.Delete className="text-red-600" />
+    //         <span className="pl-2 text-red-600">{t('My Custom Dropdown Menu Item')}</span>
+    //       </DropdownMenuItem>
+    //     </DropdownMenuContent>
+    //   ),
+    // },
  ]);
 };
--- a/platform/ui-next/src/components/SegmentationTable/SegmentationExpanded.tsx
+++ b/platform/ui-next/src/components/SegmentationTable/SegmentationExpanded.tsx
@ -26,10 +26,7 @@ export const SegmentationExpanded: React.FC<{ children?: React.ReactNode }> = ({
                representation: segmentationInfo.representation,
              })
            ) : (
-              <SegmentationHeader
-                segmentation={segmentationInfo.segmentation}
-                representation={segmentationInfo.representation}
-              />
+              <SegmentationHeader segmentation={segmentationInfo.segmentation} />
            )}
          </PanelSection.Header>
          <PanelSection.Content>
@ -38,7 +35,6 @@ export const SegmentationExpanded: React.FC<{ children?: React.ReactNode }> = ({
                React.isValidElement(child)
                  ? React.cloneElement(child, {
                      segmentation: segmentationInfo.segmentation,
-                      representation: segmentationInfo.representation,
                    })
                  : child
              )}
--- a/platform/ui-next/src/components/SegmentationTable/SegmentationHeader.tsx
+++ b/platform/ui-next/src/components/SegmentationTable/SegmentationHeader.tsx
@ -1,39 +1,31 @@
 import React from 'react';
 import { Button } from '../Button';
 import { Icons } from '../Icons/Icons';
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-  DropdownMenuPortal,
-} from '../DropdownMenu';
+import { DropdownMenu, DropdownMenuTrigger } from '../DropdownMenu';
 import { Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip';
 import { useSegmentationTableContext } from './SegmentationTableContext';
 import { useTranslation } from 'react-i18next';

 export const SegmentationHeader: React.FC<{
+  children?: React.ReactNode;
  segmentation?: any;
-}> = ({ segmentation }) => {
+}> = ({ children, segmentation }) => {
  const { t } = useTranslation('SegmentationTable');
-  const {
-    onSegmentAdd,
-    onSegmentationRemoveFromViewport,
-    onSegmentationEdit,
-    onSegmentationDelete,
-    onSegmentationDownload,
-    onSegmentationDownloadRTSS,
-    storeSegmentation,
-  } = useSegmentationTableContext('SegmentationHeader');
+  const { ...contextProps } = useSegmentationTableContext('SegmentationHeader');

  if (!segmentation) {
    return null;
  }

+  const childrenWithProps = React.Children.map(children, child =>
+    React.isValidElement(child)
+      ? React.cloneElement(child, {
+          t,
+          ...contextProps,
+        })
+      : child
+  );
+
  return (
    <div className="text-foreground flex h-8 w-full items-center justify-between">
      <div className="flex items-center space-x-1">
@ -48,79 +40,7 @@ export const SegmentationHeader: React.FC<{
              <Icons.More />
            </Button>
          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem
-              onClick={e => {
-                e.stopPropagation();
-                onSegmentAdd(segmentation.segmentationId);
-              }}
-            >
-              <Icons.Add className="text-foreground" />
-              <span className="pl-2">{t('Add Segment')}</span>
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              onClick={e => {
-                e.stopPropagation();
-                onSegmentationRemoveFromViewport(segmentation.segmentationId);
-              }}
-            >
-              <Icons.Series className="text-foreground" />
-              <span className="pl-2">{t('Remove from Viewport')}</span>
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={e => {
-                e.stopPropagation();
-                onSegmentationEdit(segmentation.segmentationId);
-              }}
-            >
-              <Icons.Rename className="text-foreground" />
-              <span className="pl-2">{t('Rename')}</span>
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={e => e.stopPropagation()}>
-              <Icons.Hide className="text-foreground" />
-              <span className="pl-2">{t('Hide or Show all Segments')}</span>
-            </DropdownMenuItem>
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger onClick={e => e.stopPropagation()}>
-                <Icons.Export className="text-foreground" />
-                <span className="pl-2">{t('Export & Download')}</span>
-              </DropdownMenuSubTrigger>
-              <DropdownMenuPortal>
-                <DropdownMenuSubContent>
-                  <DropdownMenuItem
-                    onClick={e => {
-                      e.stopPropagation();
-                      storeSegmentation(segmentation.segmentationId);
-                    }}
-                  >
-                    {t('Export DICOM SEG')}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onClick={e => {
-                      e.stopPropagation();
-                      onSegmentationDownload(segmentation.segmentationId);
-                    }}
-                  >
-                    {t('Download DICOM SEG')}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onClick={e => {
-                      e.stopPropagation();
-                      onSegmentationDownloadRTSS(segmentation.segmentationId);
-                    }}
-                  >
-                    {t('Download DICOM RTSTRUCT')}
-                  </DropdownMenuItem>
-                </DropdownMenuSubContent>
-              </DropdownMenuPortal>
-            </DropdownMenuSub>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={() => onSegmentationDelete(segmentation.segmentationId)}>
-              <Icons.Delete className="text-red-600" />
-              <span className="pl-2 text-red-600">{t('Delete')}</span>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
+          {childrenWithProps}
        </DropdownMenu>
        <div className="pl-1.5">{segmentation.label}</div>
      </div>
--- a/platform/ui-next/src/components/SegmentationTable/SegmentationSelectorHeader.tsx
+++ b/platform/ui-next/src/components/SegmentationTable/SegmentationSelectorHeader.tsx
@ -4,17 +4,9 @@ import {
  Button,
  DropdownMenu,
  DropdownMenuTrigger,
-  DropdownMenuItem,
-  DropdownMenuContent,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuPortal,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
  Tooltip,
  TooltipTrigger,
  TooltipContent,
-  DropdownMenuLabel,
 } from '../../components';

 import { useTranslation } from 'react-i18next';
@ -26,20 +18,8 @@ export const SegmentationSelectorHeader: React.FC<{ children?: React.ReactNode }
 }) => {
  const { t } = useTranslation('SegmentationTable.HeaderCollapsed');

-  const {
-    data,
-    activeSegmentationId,
-    mode,
-    onSegmentationClick,
-    onSegmentationAdd,
-    onSegmentationRemoveFromViewport,
-    onSegmentationEdit,
-    onSegmentationDelete,
-    onSegmentationDownload,
-    onSegmentationDownloadRTSS,
-    storeSegmentation,
-    exportOptions,
-  } = useSegmentationTableContext('SegmentationTable.HeaderCollapsed');
+  const { data, activeSegmentationId, mode, onSegmentationClick, exportOptions, ...contextProps } =
+    useSegmentationTableContext('SegmentationTable.HeaderCollapsed');

  if (mode !== 'collapsed' || !data?.length) {
    return null;
@ -65,6 +45,17 @@ export const SegmentationSelectorHeader: React.FC<{ children?: React.ReactNode }
    ({ segmentationId }) => segmentationId === activeSegmentation.id
  )?.isExportable;

+  const childrenWithProps = React.Children.map(children, child =>
+    React.isValidElement(child)
+      ? React.cloneElement(child, {
+          activeSegmentation,
+          allowExport,
+          t,
+          ...contextProps,
+        })
+      : child
+  );
+
  return (
    <div className="bg-primary-dark flex h-10 w-full items-center space-x-1 rounded-t px-1.5">
      <DropdownMenu>
@ -76,49 +67,7 @@ export const SegmentationSelectorHeader: React.FC<{ children?: React.ReactNode }
            <Icons.More className="h-6 w-6" />
          </Button>
        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem onClick={() => onSegmentationAdd(activeSegmentation.id)}>
-            <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(activeSegmentation.id)}>
-            <Icons.Series className="text-foreground" />
-            <span className="pl-2">{t('Remove from Viewport')}</span>
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => onSegmentationEdit(activeSegmentation.id)}>
-            <Icons.Rename className="text-foreground" />
-            <span className="pl-2">{t('Rename')}</span>
-          </DropdownMenuItem>
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger
-              disabled={!allowExport}
-              className="pl-1"
-            >
-              <Icons.Export className="text-foreground" />
-              <span className="pl-2">{t('Export & Download')}</span>
-            </DropdownMenuSubTrigger>
-            <DropdownMenuPortal>
-              <DropdownMenuSubContent>
-                <DropdownMenuItem onClick={() => storeSegmentation(activeSegmentation.id)}>
-                  {t('Export DICOM SEG')}
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => onSegmentationDownload(activeSegmentation.id)}>
-                  {t('Download DICOM SEG')}
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => onSegmentationDownloadRTSS(activeSegmentation.id)}>
-                  {t('Download DICOM RTSTRUCT')}
-                </DropdownMenuItem>
-              </DropdownMenuSubContent>
-            </DropdownMenuPortal>
-          </DropdownMenuSub>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={() => onSegmentationDelete(activeSegmentation.id)}>
-            <Icons.Delete className="text-red-600" />
-            <span className="pl-2 text-red-600">{t('Delete')}</span>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
+        {childrenWithProps}
      </DropdownMenu>
      <Select
        onValueChange={value => onSegmentationClick(value)}