othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui(panels): PetSUV updates for ui-next and responsive layout (#4864)

Browse Source
This commit is contained in:
Dan Rukas 2025-03-17 22:57:19 -04:00 committed by GitHub
parent 2c75638d1c
commit c227c5742a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 120 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

212
extensions/tmtv/src/Panels/PanelPetSUV.tsx
View File

@ -1,9 +1,8 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { PanelSection, Input, Button } from '@ohif/ui';
import { DicomMetadataStore } from '@ohif/core'; import { DicomMetadataStore } from '@ohif/core';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Separator } from '@ohif/ui-next'; import { Button, Input, Label, PanelSection, Separator } from '@ohif/ui-next';
const DEFAULT_MEATADATA = { const DEFAULT_MEATADATA = {
PatientWeight: null, PatientWeight: null,
@ -23,6 +22,38 @@ const DEFAULT_MEATADATA = {
* @param param0 * @param param0
* @returns * @returns
*/ */
// InputRow compound component
const InputRow = ({ children, className, ...props }) => {
return (
<div
className={`flex flex-row items-center space-x-4 ${className || ''}`}
{...props}
>
{children}
</div>
);
};
// InputRow sub-components
InputRow.Label = ({ children, unit, className, ...props }) => (
<Label className={`min-w-32 flex-shrink-0 ${className || ''}`} {...props}>
{children}
{unit && <span className="text-muted-foreground"> {unit}</span>}
</Label>
);
InputRow.Input = ({ className, ...props }) => (
<Input
className={`h-7 flex-1 ${className || ''}`}
{...props}
/>
);
// Set display names for better debugging
InputRow.Label.displayName = 'InputRow.Label';
InputRow.Input.displayName = 'InputRow.Input';
export default function PanelPetSUV({ servicesManager, commandsManager }: withAppTypes) { export default function PanelPetSUV({ servicesManager, commandsManager }: withAppTypes) {
const { t } = useTranslation('PanelSUV'); const { t } = useTranslation('PanelSUV');
const { displaySetService, toolGroupService, toolbarService, hangingProtocolService } = const { displaySetService, toolGroupService, toolbarService, hangingProtocolService } =
@ -128,103 +159,98 @@ export default function PanelPetSUV({ servicesManager, commandsManager }: withAp
return ( return (
<> <>
<div className="ohif-scrollbar flex min-h-0 flex-auto select-none flex-col justify-between overflow-auto"> <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]"> <div className="flex min-h-0 flex-1 flex-col bg-black text-base">
<PanelSection title={t('Patient Information')}> <PanelSection defaultOpen={true}>
<div className="flex flex-col"> <PanelSection.Header>{t('Patient Information')}</PanelSection.Header>
<div className="bg-primary-dark flex flex-col gap-4 p-2"> <PanelSection.Content>
<Input <div className="bg-primary-dark flex flex-col gap-3 p-2">
containerClassName={'!flex-row !justify-between items-center'} <InputRow>
label={t('Patient Sex')} <InputRow.Label>{t('Patient Sex')}</InputRow.Label>
labelClassName="text-[13px] font-inter text-white" <InputRow.Input
className="!m-0 !h-[26px] !w-[117px]" value={metadata.PatientSex || ''}
value={metadata.PatientSex || ''} onChange={e => {
onChange={e => { handleMetadataChange({
handleMetadataChange({ PatientSex: e.target.value,
PatientSex: e.target.value, });
}); }}
}} />
/> </InputRow>
<Input
containerClassName={'!flex-row !justify-between items-center'} <InputRow>
label={t('Weight')} <InputRow.Label unit="kg">{t('Weight')}</InputRow.Label>
labelChildren={<span className="text-aqua-pale"> kg</span>} <InputRow.Input
labelClassName="text-[13px] font-inter text-white" value={metadata.PatientWeight || ''}
className="!m-0 !h-[26px] !w-[117px]" onChange={e => {
value={metadata.PatientWeight || ''} handleMetadataChange({
onChange={e => { PatientWeight: e.target.value,
handleMetadataChange({ });
PatientWeight: e.target.value, }}
}); id="weight-input"
}} />
id="weight-input" </InputRow>
/>
<Input <InputRow>
containerClassName={'!flex-row !justify-between items-center'} <InputRow.Label unit="bq">{t('Total Dose')}</InputRow.Label>
label={t('Total Dose')} <InputRow.Input
labelChildren={<span className="text-aqua-pale"> bq</span>} value={metadata.RadiopharmaceuticalInformationSequence.RadionuclideTotalDose || ''}
labelClassName="text-[13px] font-inter text-white" onChange={e => {
className="!m-0 !h-[26px] !w-[117px]" handleMetadataChange({
value={ RadiopharmaceuticalInformationSequence: {
metadata.RadiopharmaceuticalInformationSequence.RadionuclideTotalDose || '' RadionuclideTotalDose: e.target.value,
} },
onChange={e => { });
handleMetadataChange({ }}
RadiopharmaceuticalInformationSequence: { />
RadionuclideTotalDose: e.target.value, </InputRow>
},
}); <InputRow>
}} <InputRow.Label unit="s">{t('Half Life')}</InputRow.Label>
/> <InputRow.Input
<Input value={metadata.RadiopharmaceuticalInformationSequence.RadionuclideHalfLife || ''}
containerClassName={'!flex-row !justify-between items-center'} onChange={e => {
label={t('Half Life')} handleMetadataChange({
labelChildren={<span className="text-aqua-pale"> s</span>} RadiopharmaceuticalInformationSequence: {
labelClassName="text-[13px] font-inter text-white" RadionuclideHalfLife: e.target.value,
className="!m-0 !h-[26px] !w-[117px]" },
value={metadata.RadiopharmaceuticalInformationSequence.RadionuclideHalfLife || ''} });
onChange={e => { }}
handleMetadataChange({ />
RadiopharmaceuticalInformationSequence: { </InputRow>
RadionuclideHalfLife: e.target.value,
}, <InputRow>
}); <InputRow.Label unit="s">{t('Injection Time')}</InputRow.Label>
}} <InputRow.Input
/> value={
<Input metadata.RadiopharmaceuticalInformationSequence.RadiopharmaceuticalStartTime || ''
containerClassName={'!flex-row !justify-between items-center'} }
label={t('Injection Time')} onChange={e => {
labelChildren={<span className="text-aqua-pale"> s</span>} handleMetadataChange({
labelClassName="text-[13px] font-inter text-white" RadiopharmaceuticalInformationSequence: {
className="!m-0 !h-[26px] !w-[117px]" RadiopharmaceuticalStartTime: e.target.value,
value={ },
metadata.RadiopharmaceuticalInformationSequence.RadiopharmaceuticalStartTime || });
'' }}
} />
onChange={e => { </InputRow>
handleMetadataChange({
RadiopharmaceuticalInformationSequence: { <InputRow>
RadiopharmaceuticalStartTime: e.target.value, <InputRow.Label unit="s">{t('Acquisition Time')}</InputRow.Label>
}, <InputRow.Input
}); value={metadata.SeriesTime || ''}
}} onChange={() => {}}
/> />
<Input </InputRow>
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 <Button
className="!h-[26px] !w-[115px] self-end !p-0" variant="default"
size="sm"
className="w-28 self-end"
onClick={updateMetadata} onClick={updateMetadata}
> >
Reload Data Reload Data
</Button> </Button>
</div> </div>
</div> </PanelSection.Content>
</PanelSection> </PanelSection>
</div> </div>
</div> </div>