TrizTech/ohif-viewer
15
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

122
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,15 +159,14 @@ 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({
@ -144,12 +174,11 @@ export default function PanelPetSUV({ servicesManager, commandsManager }: withAp
}); });
}} }}
/> />
<Input </InputRow>
containerClassName={'!flex-row !justify-between items-center'}
label={t('Weight')} <InputRow>
labelChildren={<span className="text-aqua-pale"> kg</span>} <InputRow.Label unit="kg">{t('Weight')}</InputRow.Label>
labelClassName="text-[13px] font-inter text-white" <InputRow.Input
className="!m-0 !h-[26px] !w-[117px]"
value={metadata.PatientWeight || ''} value={metadata.PatientWeight || ''}
onChange={e => { onChange={e => {
handleMetadataChange({ handleMetadataChange({
@ -158,15 +187,12 @@ export default function PanelPetSUV({ servicesManager, commandsManager }: withAp
}} }}
id="weight-input" id="weight-input"
/> />
<Input </InputRow>
containerClassName={'!flex-row !justify-between items-center'}
label={t('Total Dose')} <InputRow>
labelChildren={<span className="text-aqua-pale"> bq</span>} <InputRow.Label unit="bq">{t('Total Dose')}</InputRow.Label>
labelClassName="text-[13px] font-inter text-white" <InputRow.Input
className="!m-0 !h-[26px] !w-[117px]" value={metadata.RadiopharmaceuticalInformationSequence.RadionuclideTotalDose || ''}
value={
metadata.RadiopharmaceuticalInformationSequence.RadionuclideTotalDose || ''
}
onChange={e => { onChange={e => {
handleMetadataChange({ handleMetadataChange({
RadiopharmaceuticalInformationSequence: { RadiopharmaceuticalInformationSequence: {
@ -175,12 +201,11 @@ export default function PanelPetSUV({ servicesManager, commandsManager }: withAp
}); });
}} }}
/> />
<Input </InputRow>
containerClassName={'!flex-row !justify-between items-center'}
label={t('Half Life')} <InputRow>
labelChildren={<span className="text-aqua-pale"> s</span>} <InputRow.Label unit="s">{t('Half Life')}</InputRow.Label>
labelClassName="text-[13px] font-inter text-white" <InputRow.Input
className="!m-0 !h-[26px] !w-[117px]"
value={metadata.RadiopharmaceuticalInformationSequence.RadionuclideHalfLife || ''} value={metadata.RadiopharmaceuticalInformationSequence.RadionuclideHalfLife || ''}
onChange={e => { onChange={e => {
handleMetadataChange({ handleMetadataChange({
@ -190,15 +215,13 @@ export default function PanelPetSUV({ servicesManager, commandsManager }: withAp
}); });
}} }}
/> />
<Input </InputRow>
containerClassName={'!flex-row !justify-between items-center'}
label={t('Injection Time')} <InputRow>
labelChildren={<span className="text-aqua-pale"> s</span>} <InputRow.Label unit="s">{t('Injection Time')}</InputRow.Label>
labelClassName="text-[13px] font-inter text-white" <InputRow.Input
className="!m-0 !h-[26px] !w-[117px]"
value={ value={
metadata.RadiopharmaceuticalInformationSequence.RadiopharmaceuticalStartTime || metadata.RadiopharmaceuticalInformationSequence.RadiopharmaceuticalStartTime || ''
''
} }
onChange={e => { onChange={e => {
handleMetadataChange({ handleMetadataChange({
@ -208,23 +231,26 @@ export default function PanelPetSUV({ servicesManager, commandsManager }: withAp
}); });
}} }}
/> />
<Input </InputRow>
containerClassName={'!flex-row !justify-between items-center'}
label={t('Acquisition Time')} <InputRow>
labelChildren={<span className="text-aqua-pale"> s</span>} <InputRow.Label unit="s">{t('Acquisition Time')}</InputRow.Label>
labelClassName="text-[13px] font-inter text-white" <InputRow.Input
className="!m-0 !h-[26px] !w-[117px]"
value={metadata.SeriesTime || ''} value={metadata.SeriesTime || ''}
onChange={() => {}} onChange={() => {}}
/> />
</InputRow>
<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>