feat(studies-panel): New OHIF study panel - under experimental flag (#…

…4254)
OHIF · Sep 11, 2024 · 7a96406 · 7a96406
1 parent 4432b6b
commit 7a96406
Show file tree

Hide file tree

Showing 80 changed files with 4,119 additions and 253 deletions.
diff --git a/extensions/cornerstone-dicom-seg/src/getPanelModule.tsx b/extensions/cornerstone-dicom-seg/src/getPanelModule.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { useAppConfig } from '@state';
-import { Toolbox } from '@ohif/ui';
+import { Toolbox as NewToolbox } from '@ohif/ui-next';
+import { Toolbox as OldToolbox } from '@ohif/ui';
 import PanelSegmentation from './panels/PanelSegmentation';
 
 const getPanelModule = ({
@@ -13,7 +14,7 @@ const getPanelModule = ({
 }: withAppTypes) => {
   const { customizationService } = servicesManager.services;
 
-  const wrappedPanelSegmentation = configuration => {
+  const wrappedPanelSegmentation = ({ configuration, renderHeader, getCloseIcon, tab }) => {
     const [appConfig] = useAppConfig();
 
     return (
@@ -26,13 +27,40 @@ const getPanelModule = ({
           disableEditing: appConfig.disableEditing,
           ...customizationService.get('segmentation.panel'),
         }}
+        renderHeader={renderHeader}
+        getCloseIcon={getCloseIcon}
+        tab={tab}
       />
     );
   };
 
-  const wrappedPanelSegmentationWithTools = configuration => {
+  const wrappedPanelSegmentationNoHeader = ({ configuration }) => {
     const [appConfig] = useAppConfig();
 
+    return (
+      <PanelSegmentation
+        commandsManager={commandsManager}
+        servicesManager={servicesManager}
+        extensionManager={extensionManager}
+        configuration={{
+          ...configuration,
+          disableEditing: appConfig.disableEditing,
+          ...customizationService.get('segmentation.panel'),
+        }}
+      />
+    );
+  };
+
+  const wrappedPanelSegmentationWithTools = ({
+    configuration,
+    renderHeader,
+    getCloseIcon,
+    tab,
+  }) => {
+    const [appConfig] = useAppConfig();
+
+    const Toolbox = appConfig.useExperimentalUI ? NewToolbox : OldToolbox;
+
     return (
       <>
         <Toolbox
@@ -44,6 +72,9 @@ const getPanelModule = ({
           configuration={{
             ...configuration,
           }}
+          renderHeader={renderHeader}
+          getCloseIcon={getCloseIcon}
+          tab={tab}
         />
         <PanelSegmentation
           commandsManager={commandsManager}
@@ -74,6 +105,13 @@ const getPanelModule = ({
       label: 'Segmentation',
       component: wrappedPanelSegmentationWithTools,
     },
+    {
+      name: 'panelSegmentationNoHeader',
+      iconName: 'tab-segmentation',
+      iconLabel: 'Segmentation',
+      label: 'Segmentation',
+      component: wrappedPanelSegmentationNoHeader,
+    },
   ];
 };
 

diff --git a/extensions/cornerstone-dicom-seg/src/panels/PanelSegmentation.tsx b/extensions/cornerstone-dicom-seg/src/panels/PanelSegmentation.tsx
@@ -6,6 +6,7 @@ import { SegmentationPanelMode } from '../types/segmentation';
 import callInputDialog from './callInputDialog';
 import callColorPickerDialog from './colorPickerDialog';
 import { useTranslation } from 'react-i18next';
+import { Separator } from '@ohif/ui-next';
 
 const components = {
   [SegmentationPanelMode.Expanded]: SegmentationGroupTableExpanded,
@@ -17,6 +18,9 @@ export default function PanelSegmentation({
   commandsManager,
   extensionManager,
   configuration,
+  renderHeader,
+  getCloseIcon,
+  tab,
 }: withAppTypes) {
   const {
     segmentationService,
@@ -319,52 +323,76 @@ export default function PanelSegmentation({
       : onSegmentationAdd;
 
   return (
-    <SegmentationGroupTableComponent
-      title={t('Segmentations')}
-      segmentations={segmentations}
-      disableEditing={configuration.disableEditing}
-      activeSegmentationId={selectedSegmentationId || ''}
-      onSegmentationAdd={onSegmentationAddWrapper}
-      addSegmentationClassName={addSegmentationClassName}
-      showAddSegment={allowAddSegment}
-      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)
-      }
-    />
+    <>
+      {renderHeader && (
+        <>
+          <div className="bg-primary-dark flex select-none rounded-t pt-1.5 pb-[2px]">
+            <div className="flex h-[24px] w-full cursor-pointer select-none justify-center self-center text-[14px]">
+              <div className="text-primary-active flex grow cursor-pointer select-none justify-center self-center text-[13px]">
+                <span>{tab.label}</span>
+              </div>
+            </div>
+
+            {getCloseIcon()}
+          </div>
+          <Separator
+            orientation="horizontal"
+            className="bg-black"
+            thickness="2px"
+          />
+        </>
+      )}
+      <SegmentationGroupTableComponent
+        title={t('Segmentations')}
+        segmentations={segmentations}
+        disableEditing={configuration.disableEditing}
+        activeSegmentationId={selectedSegmentationId || ''}
+        onSegmentationAdd={onSegmentationAddWrapper}
+        addSegmentationClassName={addSegmentationClassName}
+        showAddSegment={allowAddSegment}
+        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)
+        }
+      />
+    </>
   );
 }
 

diff --git a/extensions/cornerstone-dynamic-volume/src/getPanelModule.tsx b/extensions/cornerstone-dynamic-volume/src/getPanelModule.tsx
@@ -1,20 +1,28 @@
 import React from 'react';
 import { DynamicDataPanel } from './panels';
-import { Toolbox } from '@ohif/ui';
+import { Toolbox as NewToolbox } from '@ohif/ui-next';
+import { Toolbox as OldToolbox } from '@ohif/ui';
+import { useAppConfig } from '@state';
 import DynamicExport from './panels/DynamicExport';
 
 function getPanelModule({ commandsManager, extensionManager, servicesManager }) {
-  const wrappedDynamicDataPanel = () => {
+  const wrappedDynamicDataPanel = ({ renderHeader, getCloseIcon, tab }) => {
     return (
       <DynamicDataPanel
         commandsManager={commandsManager}
         servicesManager={servicesManager}
         extensionManager={extensionManager}
+        renderHeader={renderHeader}
+        getCloseIcon={getCloseIcon}
+        tab={tab}
       />
     );
   };
 
-  const wrappedDynamicToolbox = () => {
+  const wrappedDynamicToolbox = ({ renderHeader, getCloseIcon, tab }) => {
+    const [appConfig] = useAppConfig();
+
+    const Toolbox = appConfig.useExperimentalUI ? NewToolbox : OldToolbox;
     return (
       <>
         <Toolbox
@@ -23,6 +31,9 @@ function getPanelModule({ commandsManager, extensionManager, servicesManager })
           extensionManager={extensionManager}
           buttonSectionId="dynamic-toolbox"
           title="Threshold Tools"
+          renderHeader={renderHeader}
+          getCloseIcon={getCloseIcon}
+          tab={tab}
         />
       </>
     );

diff --git a/extensions/cornerstone-dynamic-volume/src/panels/DynamicDataPanel.tsx b/extensions/cornerstone-dynamic-volume/src/panels/DynamicDataPanel.tsx
@@ -1,17 +1,44 @@
 import React from 'react';
 import PanelGenerateImage from './PanelGenerateImage';
+import { Separator } from '@ohif/ui-next';
 
-function DynamicDataPanel({ servicesManager, commandsManager }) {
+function DynamicDataPanel({
+  servicesManager,
+  commandsManager,
+  renderHeader,
+  getCloseIcon,
+  tab,
+}: withAppTypes) {
   return (
-    <div
-      className="flex flex-col text-white"
-      data-cy={'dynamic-volume-panel'}
-    >
-      <PanelGenerateImage
-        commandsManager={commandsManager}
-        servicesManager={servicesManager}
-      ></PanelGenerateImage>
-    </div>
+    <>
+      {renderHeader && (
+        <>
+          <div className="bg-primary-dark flex select-none rounded-t pt-1.5 pb-[2px]">
+            <div className="flex h-[24px] w-full cursor-pointer select-none justify-center self-center text-[14px]">
+              <div className="text-primary-active flex grow cursor-pointer select-none justify-center self-center text-[13px]">
+                <span>{tab.label}</span>
+              </div>
+            </div>
+
+            {getCloseIcon()}
+          </div>
+          <Separator
+            orientation="horizontal"
+            className="bg-black"
+            thickness="2px"
+          />
+        </>
+      )}
+      <div
+        className="flex flex-col text-white"
+        data-cy={'dynamic-volume-panel'}
+      >
+        <PanelGenerateImage
+          commandsManager={commandsManager}
+          servicesManager={servicesManager}
+        ></PanelGenerateImage>
+      </div>
+    </>
   );
 }
 

diff --git a/extensions/default/src/Components/SidePanelWithServices.tsx b/extensions/default/src/Components/SidePanelWithServices.tsx
@@ -1,5 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import { SidePanel } from '@ohif/ui';
+import { SidePanel as NewSidePanel } from '@ohif/ui-next';
+import { SidePanel as OldSidePanel } from '@ohif/ui';
+import { useAppConfig } from '@state';
 import { Types } from '@ohif/core';
 
 export type SidePanelWithServicesProps = {
@@ -26,6 +28,7 @@ const SidePanelWithServices = ({
   const [hasBeenOpened, setHasBeenOpened] = useState(false);
   const [activeTabIndex, setActiveTabIndex] = useState(activeTabIndexProp);
   const [tabs, setTabs] = useState(tabsProp ?? panelService.getPanels(side));
+  const [appConfig] = useAppConfig();
 
   const handleSidePanelOpen = useCallback(() => {
     setHasBeenOpened(true);
@@ -75,6 +78,8 @@ const SidePanelWithServices = ({
     };
   }, [tabs, hasBeenOpened, panelService]);
 
+  const SidePanel = appConfig?.useExperimentalUI ? NewSidePanel : OldSidePanel;
+
   return (
     <SidePanel
       {...props}

diff --git a/extensions/default/src/Panels/PanelMeasurementTable.tsx b/extensions/default/src/Panels/PanelMeasurementTable.tsx
@@ -17,13 +17,17 @@ import createReportDialogPrompt, {
 } from './createReportDialogPrompt';
 import createReportAsync from '../Actions/createReportAsync';
 import findSRWithSameSeriesDescription from '../utils/findSRWithSameSeriesDescription';
+import { Separator } from '@ohif/ui-next';
 
 const { downloadCSVReport } = utils;
 
 export default function PanelMeasurementTable({
   servicesManager,
   commandsManager,
   extensionManager,
+  renderHeader,
+  getCloseIcon,
+  tab,
 }: withAppTypes): React.FunctionComponent {
   const { t } = useTranslation('MeasurementTable');
 
@@ -212,6 +216,24 @@ export default function PanelMeasurementTable({
 
   return (
     <>
+      {renderHeader && (
+        <>
+          <div className="bg-primary-dark flex select-none rounded-t pt-1.5 pb-[2px]">
+            <div className="flex h-[24px] w-full cursor-pointer select-none justify-center self-center text-[14px]">
+              <div className="text-primary-active flex grow cursor-pointer select-none justify-center self-center text-[13px]">
+                <span>{tab.label}</span>
+              </div>
+            </div>
+
+            {getCloseIcon()}
+          </div>
+          <Separator
+            orientation="horizontal"
+            className="bg-black"
+            thickness="2px"
+          />
+        </>
+      )}
       <div
         className="ohif-scrollbar overflow-y-auto overflow-x-hidden"
         data-cy={'measurements-panel'}