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

extensions/tmtv/src/Panels/PanelPetSUV.tsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { PanelSection, Input, Button } from '@ohif/ui';
 import { DicomMetadataStore } from '@ohif/core';
 import { useTranslation } from 'react-i18next';
+import { Separator } from '@ohif/ui-next';
 
 const DEFAULT_MEATADATA = {
   PatientWeight: null,
@@ -22,7 +23,13 @@ const DEFAULT_MEATADATA = {
  * @param param0
  * @returns
  */
-export default function PanelPetSUV({ servicesManager, commandsManager }: withAppTypes) {
+export default function PanelPetSUV({
+  servicesManager,
+  commandsManager,
+  renderHeader,
+  getCloseIcon,
+  tab,
+}: withAppTypes) {
   const { t } = useTranslation('PanelSUV');
   const { displaySetService, toolGroupService, toolbarService, hangingProtocolService } =
     servicesManager.services;
@@ -125,104 +132,127 @@ export default function PanelPetSUV({ servicesManager, commandsManager }: withAp
     }, 0);
   }
   return (
-    <div className="ohif-scrollbar flex min-h-0 flex-auto select-none flex-col justify-between overflow-auto">
-      <div className="flex min-h-0 flex-1 flex-col bg-black text-[13px] font-[300]">
-        <PanelSection title={t('Patient Information')}>
-          <div className="flex flex-col">
-            <div className="bg-primary-dark flex flex-col gap-4 p-2">
-              <Input
-                containerClassName={'!flex-row !justify-between items-center'}
-                label={t('Patient Sex')}
-                labelClassName="text-[13px] font-inter text-white"
-                className="!m-0 !h-[26px] !w-[117px]"
-                value={metadata.PatientSex || ''}
-                onChange={e => {
-                  handleMetadataChange({
-                    PatientSex: e.target.value,
-                  });
-                }}
-              />
-              <Input
-                containerClassName={'!flex-row !justify-between items-center'}
-                label={t('Weight')}
-                labelChildren={<span className="text-aqua-pale"> kg</span>}
-                labelClassName="text-[13px] font-inter text-white"
-                className="!m-0 !h-[26px] !w-[117px]"
-                value={metadata.PatientWeight || ''}
-                onChange={e => {
-                  handleMetadataChange({
-                    PatientWeight: e.target.value,
-                  });
-                }}
-                id="weight-input"
-              />
-              <Input
-                containerClassName={'!flex-row !justify-between items-center'}
-                label={t('Total Dose')}
-                labelChildren={<span className="text-aqua-pale"> bq</span>}
-                labelClassName="text-[13px] font-inter text-white"
-                className="!m-0 !h-[26px] !w-[117px]"
-                value={metadata.RadiopharmaceuticalInformationSequence.RadionuclideTotalDose || ''}
-                onChange={e => {
-                  handleMetadataChange({
-                    RadiopharmaceuticalInformationSequence: {
-                      RadionuclideTotalDose: e.target.value,
-                    },
-                  });
-                }}
-              />
-              <Input
-                containerClassName={'!flex-row !justify-between items-center'}
-                label={t('Half Life')}
-                labelChildren={<span className="text-aqua-pale"> s</span>}
-                labelClassName="text-[13px] font-inter text-white"
-                className="!m-0 !h-[26px] !w-[117px]"
-                value={metadata.RadiopharmaceuticalInformationSequence.RadionuclideHalfLife || ''}
-                onChange={e => {
-                  handleMetadataChange({
-                    RadiopharmaceuticalInformationSequence: {
-                      RadionuclideHalfLife: e.target.value,
-                    },
-                  });
-                }}
-              />
-              <Input
-                containerClassName={'!flex-row !justify-between items-center'}
-                label={t('Injection Time')}
-                labelChildren={<span className="text-aqua-pale"> s</span>}
-                labelClassName="text-[13px] font-inter text-white"
-                className="!m-0 !h-[26px] !w-[117px]"
-                value={
-                  metadata.RadiopharmaceuticalInformationSequence.RadiopharmaceuticalStartTime || ''
-                }
-                onChange={e => {
-                  handleMetadataChange({
-                    RadiopharmaceuticalInformationSequence: {
-                      RadiopharmaceuticalStartTime: e.target.value,
-                    },
-                  });
-                }}
-              />
-              <Input
-                containerClassName={'!flex-row !justify-between items-center'}
-                label={t('Acquisition Time')}
-                labelChildren={<span className="text-aqua-pale"> s</span>}
-                labelClassName="text-[13px] font-inter text-white"
-                className="!m-0 !h-[26px] !w-[117px]"
-                value={metadata.SeriesTime || ''}
-                onChange={() => {}}
-              />
-              <Button
-                className="!h-[26px] !w-[115px] self-end !p-0"
-                onClick={updateMetadata}
-              >
-                Reload Data
-              </Button>
+    <>
+      {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>
-        </PanelSection>
+          <Separator
+            orientation="horizontal"
+            className="bg-black"
+            thickness="2px"
+          />
+        </>
+      )}
+      <div className="ohif-scrollbar flex min-h-0 flex-auto select-none flex-col justify-between overflow-auto">
+        <div className="flex min-h-0 flex-1 flex-col bg-black text-[13px] font-[300]">
+          <PanelSection title={t('Patient Information')}>
+            <div className="flex flex-col">
+              <div className="bg-primary-dark flex flex-col gap-4 p-2">
+                <Input
+                  containerClassName={'!flex-row !justify-between items-center'}
+                  label={t('Patient Sex')}
+                  labelClassName="text-[13px] font-inter text-white"
+                  className="!m-0 !h-[26px] !w-[117px]"
+                  value={metadata.PatientSex || ''}
+                  onChange={e => {
+                    handleMetadataChange({
+                      PatientSex: e.target.value,
+                    });
+                  }}
+                />
+                <Input
+                  containerClassName={'!flex-row !justify-between items-center'}
+                  label={t('Weight')}
+                  labelChildren={<span className="text-aqua-pale"> kg</span>}
+                  labelClassName="text-[13px] font-inter text-white"
+                  className="!m-0 !h-[26px] !w-[117px]"
+                  value={metadata.PatientWeight || ''}
+                  onChange={e => {
+                    handleMetadataChange({
+                      PatientWeight: e.target.value,
+                    });
+                  }}
+                  id="weight-input"
+                />
+                <Input
+                  containerClassName={'!flex-row !justify-between items-center'}
+                  label={t('Total Dose')}
+                  labelChildren={<span className="text-aqua-pale"> bq</span>}
+                  labelClassName="text-[13px] font-inter text-white"
+                  className="!m-0 !h-[26px] !w-[117px]"
+                  value={
+                    metadata.RadiopharmaceuticalInformationSequence.RadionuclideTotalDose || ''
+                  }
+                  onChange={e => {
+                    handleMetadataChange({
+                      RadiopharmaceuticalInformationSequence: {
+                        RadionuclideTotalDose: e.target.value,
+                      },
+                    });
+                  }}
+                />
+                <Input
+                  containerClassName={'!flex-row !justify-between items-center'}
+                  label={t('Half Life')}
+                  labelChildren={<span className="text-aqua-pale"> s</span>}
+                  labelClassName="text-[13px] font-inter text-white"
+                  className="!m-0 !h-[26px] !w-[117px]"
+                  value={metadata.RadiopharmaceuticalInformationSequence.RadionuclideHalfLife || ''}
+                  onChange={e => {
+                    handleMetadataChange({
+                      RadiopharmaceuticalInformationSequence: {
+                        RadionuclideHalfLife: e.target.value,
+                      },
+                    });
+                  }}
+                />
+                <Input
+                  containerClassName={'!flex-row !justify-between items-center'}
+                  label={t('Injection Time')}
+                  labelChildren={<span className="text-aqua-pale"> s</span>}
+                  labelClassName="text-[13px] font-inter text-white"
+                  className="!m-0 !h-[26px] !w-[117px]"
+                  value={
+                    metadata.RadiopharmaceuticalInformationSequence.RadiopharmaceuticalStartTime ||
+                    ''
+                  }
+                  onChange={e => {
+                    handleMetadataChange({
+                      RadiopharmaceuticalInformationSequence: {
+                        RadiopharmaceuticalStartTime: e.target.value,
+                      },
+                    });
+                  }}
+                />
+                <Input
+                  containerClassName={'!flex-row !justify-between items-center'}
+                  label={t('Acquisition Time')}
+                  labelChildren={<span className="text-aqua-pale"> s</span>}
+                  labelClassName="text-[13px] font-inter text-white"
+                  className="!m-0 !h-[26px] !w-[117px]"
+                  value={metadata.SeriesTime || ''}
+                  onChange={() => {}}
+                />
+                <Button
+                  className="!h-[26px] !w-[115px] self-end !p-0"
+                  onClick={updateMetadata}
+                >
+                  Reload Data
+                </Button>
+              </div>
+            </div>
+          </PanelSection>
+        </div>
       </div>
-    </div>
+    </>
   );
 }
 

extensions/tmtv/src/getPanelModule.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { PanelPetSUV, PanelROIThresholdExport } 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';
 
 // TODO:
 // - No loading UI exists yet
@@ -8,16 +10,24 @@ import { Toolbox } from '@ohif/ui';
 // - show errors in UI for thumbnails if promise fails
 
 function getPanelModule({ commandsManager, extensionManager, servicesManager }) {
-  const wrappedPanelPetSuv = () => {
+  const wrappedPanelPetSuv = ({ renderHeader, getCloseIcon, tab }) => {
     return (
       <PanelPetSUV
         commandsManager={commandsManager}
         servicesManager={servicesManager}
+        extensionManager={extensionManager}
+        renderHeader={renderHeader}
+        getCloseIcon={getCloseIcon}
+        tab={tab}
       />
     );
   };
 
-  const wrappedROIThresholdToolbox = () => {
+  const wrappedROIThresholdToolbox = ({ renderHeader, getCloseIcon, tab }: withAppTypes) => {
+    const [appConfig] = useAppConfig();
+
+    const Toolbox = appConfig.useExperimentalUI ? NewToolbox : OldToolbox;
+
     return (
       <>
         <Toolbox
@@ -26,6 +36,9 @@ function getPanelModule({ commandsManager, extensionManager, servicesManager })
           extensionManager={extensionManager}
           buttonSectionId="ROIThresholdToolbox"
           title="Threshold Tools"
+          renderHeader={renderHeader}
+          getCloseIcon={getCloseIcon}
+          tab={tab}
         />
       </>
     );