Update separated pharmacokinetic from diagram settings, made both collapsible

This commit is contained in:
2026-01-08 13:15:49 +00:00
parent 3630ac510f
commit 3ebd7ea251
4 changed files with 234 additions and 208 deletions

View File

@@ -18,6 +18,7 @@ import { Label } from './ui/label';
import { Separator } from './ui/separator'; import { Separator } from './ui/separator';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
import { ChevronDown, ChevronUp } from 'lucide-react';
const Settings = ({ const Settings = ({
pkParams, pkParams,
@@ -32,217 +33,238 @@ const Settings = ({
const { showDayTimeOnXAxis, yAxisMin, yAxisMax, showTemplateDay, simulationDays, displayedDays } = uiSettings; const { showDayTimeOnXAxis, yAxisMin, yAxisMax, showTemplateDay, simulationDays, displayedDays } = uiSettings;
const showDayReferenceLines = (uiSettings as any).showDayReferenceLines ?? true; const showDayReferenceLines = (uiSettings as any).showDayReferenceLines ?? true;
const [isDiagramExpanded, setIsDiagramExpanded] = React.useState(true);
const [isPharmacokineticExpanded, setIsPharmacokineticExpanded] = React.useState(true);
return ( return (
<Card> <div className="space-y-4">
<CardHeader> {/* Diagram Settings Card */}
<CardTitle className="text-lg">{t('diagramSettings')}</CardTitle> <Card>
</CardHeader> <CardHeader className="cursor-pointer pb-3" onClick={() => setIsDiagramExpanded(!isDiagramExpanded)}>
<CardContent className="space-y-4"> <div className="flex items-center justify-between">
<div className="space-y-2"> <CardTitle className="text-lg">{t('diagramSettings')}</CardTitle>
<Label className="font-medium">{t('xAxisTimeFormat')}</Label> {isDiagramExpanded ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
<TooltipProvider>
<Select
value={showDayTimeOnXAxis}
onValueChange={value => onUpdateUiSetting('showDayTimeOnXAxis', value)}
>
<SelectTrigger className="w-[240px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
<Tooltip>
<TooltipTrigger asChild>
<SelectItem value="continuous">
{t('xAxisFormatContinuous')}
</SelectItem>
</TooltipTrigger>
<TooltipContent side="right">
<p className="text-xs">{t('xAxisFormatContinuousDesc')}</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<SelectItem value="24h">
{t('xAxisFormat24h')}
</SelectItem>
</TooltipTrigger>
<TooltipContent side="right">
<p className="text-xs">{t('xAxisFormat24hDesc')}</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<SelectItem value="12h">
{t('xAxisFormat12h')}
</SelectItem>
</TooltipTrigger>
<TooltipContent side="right">
<p className="text-xs">{t('xAxisFormat12hDesc')}</p>
</TooltipContent>
</Tooltip>
</SelectContent>
</Select>
</TooltipProvider>
</div>
<div className="flex items-center gap-3">
<Switch
id="showDayReferenceLines"
checked={showDayReferenceLines}
onCheckedChange={checked => onUpdateUiSetting('showDayReferenceLines', checked)}
/>
<Label htmlFor="showDayReferenceLines" className="font-regular">
{t('showDayReferenceLines')}
</Label>
</div>
<div className="flex items-center gap-3">
<Switch
id="showTemplateDay"
checked={showTemplateDay}
onCheckedChange={checked => onUpdateUiSetting('showTemplateDay', checked)}
/>
<Label htmlFor="showTemplateDay" className="font-regular">
{t('showTemplateDayInChart')}
</Label>
</div>
<div className="space-y-2">
<Label className="font-medium">{t('simulationDuration')}</Label>
<FormNumericInput
value={simulationDays}
onChange={val => onUpdateUiSetting('simulationDays', val)}
increment={1}
min={3}
max={7}
unit={t('unitDays')}
required={true}
errorMessage={t('errorNumberRequired')}
/>
</div>
<div className="space-y-2">
<Label className="font-medium">{t('displayedDays')}</Label>
<FormNumericInput
value={displayedDays}
onChange={val => onUpdateUiSetting('displayedDays', val)}
increment={1}
min={1}
max={parseInt(simulationDays, 10) || 3}
unit={t('unitDays')}
required={true}
errorMessage={t('errorNumberRequired')}
/>
</div>
<div className="space-y-2">
<Label className="font-medium">{t('yAxisRange')}</Label>
<div className="flex items-center gap-2">
<FormNumericInput
value={yAxisMin}
onChange={val => onUpdateUiSetting('yAxisMin', val)}
increment={1}
min={0}
placeholder={t('auto')}
allowEmpty={true}
clearButton={true}
/>
<span className="text-muted-foreground">-</span>
<FormNumericInput
value={yAxisMax}
onChange={val => onUpdateUiSetting('yAxisMax', val)}
increment={5}
min={0}
placeholder={t('auto')}
unit="ng/ml"
allowEmpty={true}
clearButton={true}
/>
</div> </div>
</div> </CardHeader>
{isDiagramExpanded && (
<CardContent className="space-y-4">
<div className="space-y-2">
<Label className="font-medium">{t('xAxisTimeFormat')}</Label>
<TooltipProvider>
<Select
value={showDayTimeOnXAxis}
onValueChange={value => onUpdateUiSetting('showDayTimeOnXAxis', value)}
>
<SelectTrigger className="w-[240px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
<Tooltip>
<TooltipTrigger asChild>
<SelectItem value="continuous">
{t('xAxisFormatContinuous')}
</SelectItem>
</TooltipTrigger>
<TooltipContent side="right">
<p className="text-xs">{t('xAxisFormatContinuousDesc')}</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<SelectItem value="24h">
{t('xAxisFormat24h')}
</SelectItem>
</TooltipTrigger>
<TooltipContent side="right">
<p className="text-xs">{t('xAxisFormat24hDesc')}</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<SelectItem value="12h">
{t('xAxisFormat12h')}
</SelectItem>
</TooltipTrigger>
<TooltipContent side="right">
<p className="text-xs">{t('xAxisFormat12hDesc')}</p>
</TooltipContent>
</Tooltip>
</SelectContent>
</Select>
</TooltipProvider>
</div>
<div className="space-y-2"> <div className="flex items-center gap-3">
<Label className="font-medium">{t('therapeuticRange')}</Label> <Switch
<div className="flex items-center gap-2"> id="showDayReferenceLines"
<FormNumericInput checked={showDayReferenceLines}
value={therapeuticRange.min} onCheckedChange={checked => onUpdateUiSetting('showDayReferenceLines', checked)}
onChange={val => onUpdateTherapeuticRange('min', val)} />
increment={0.5} <Label htmlFor="showDayReferenceLines" className="font-regular">
min={0} {t('showDayReferenceLines')}
placeholder={t('min')} </Label>
required={true} </div>
errorMessage={t('therapeuticRangeMinRequired') || 'Minimum therapeutic range is required'}
/> <div className="flex items-center gap-3">
<span className="text-muted-foreground">-</span> <Switch
<FormNumericInput id="showTemplateDay"
value={therapeuticRange.max} checked={showTemplateDay}
onChange={val => onUpdateTherapeuticRange('max', val)} onCheckedChange={checked => onUpdateUiSetting('showTemplateDay', checked)}
increment={0.5} />
min={0} <Label htmlFor="showTemplateDay" className="font-regular">
placeholder={t('max')} {t('showTemplateDayInChart')}
unit="ng/ml" </Label>
required={true} </div>
errorMessage={t('therapeuticRangeMaxRequired') || 'Maximum therapeutic range is required'}
/> <div className="space-y-2">
<Label className="font-medium">{t('simulationDuration')}</Label>
<FormNumericInput
value={simulationDays}
onChange={val => onUpdateUiSetting('simulationDays', val)}
increment={1}
min={3}
max={7}
unit={t('unitDays')}
required={true}
errorMessage={t('errorNumberRequired')}
/>
</div>
<div className="space-y-2">
<Label className="font-medium">{t('displayedDays')}</Label>
<FormNumericInput
value={displayedDays}
onChange={val => onUpdateUiSetting('displayedDays', val)}
increment={1}
min={1}
max={parseInt(simulationDays, 10) || 3}
unit={t('unitDays')}
required={true}
errorMessage={t('errorNumberRequired')}
/>
</div>
<div className="space-y-2">
<Label className="font-medium">{t('yAxisRange')}</Label>
<div className="flex items-center gap-2">
<FormNumericInput
value={yAxisMin}
onChange={val => onUpdateUiSetting('yAxisMin', val)}
increment={1}
min={0}
placeholder={t('auto')}
allowEmpty={true}
clearButton={true}
/>
<span className="text-muted-foreground">-</span>
<FormNumericInput
value={yAxisMax}
onChange={val => onUpdateUiSetting('yAxisMax', val)}
increment={1}
min={0}
placeholder={t('auto')}
unit="ng/ml"
allowEmpty={true}
clearButton={true}
/>
</div>
</div>
<div className="space-y-2">
<Label className="font-medium">{t('therapeuticRange')}</Label>
<div className="flex items-center gap-2">
<FormNumericInput
value={therapeuticRange.min}
onChange={val => onUpdateTherapeuticRange('min', val)}
increment={0.5}
min={0}
placeholder={t('min')}
required={true}
errorMessage={t('therapeuticRangeMinRequired') || 'Minimum therapeutic range is required'}
/>
<span className="text-muted-foreground">-</span>
<FormNumericInput
value={therapeuticRange.max}
onChange={val => onUpdateTherapeuticRange('max', val)}
increment={0.5}
min={0}
placeholder={t('max')}
unit="ng/ml"
required={true}
errorMessage={t('therapeuticRangeMaxRequired') || 'Maximum therapeutic range is required'}
/>
</div>
</div>
</CardContent>
)}
</Card>
{/* Pharmacokinetic Settings Card */}
<Card>
<CardHeader className="cursor-pointer pb-3" onClick={() => setIsPharmacokineticExpanded(!isPharmacokineticExpanded)}>
<div className="flex items-center justify-between">
<CardTitle className="text-lg">{t('pharmacokineticsSettings')}</CardTitle>
{isPharmacokineticExpanded ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
</div> </div>
</div> </CardHeader>
{isPharmacokineticExpanded && (
<CardContent className="space-y-4">
<h3 className="text-lg font-semibold">{t('dAmphetamineParameters')}</h3>
<div className="space-y-2">
<Label className="font-medium">{t('halfLife')}</Label>
<FormNumericInput
value={pkParams.damph.halfLife}
onChange={val => onUpdatePkParams('damph', { ...pkParams.damph, halfLife: val })}
increment={0.5}
min={0.1}
unit="h"
required={true}
errorMessage={t('halfLifeRequired') || 'Half-life is required'}
/>
</div>
<Separator className="my-4" /> <Separator className="my-4" />
<h3 className="text-lg font-semibold">{t('dAmphetamineParameters')}</h3> <h3 className="text-lg font-semibold">{t('lisdexamfetamineParameters')}</h3>
<div className="space-y-2"> <div className="space-y-2">
<Label className="font-medium">{t('halfLife')}</Label> <Label className="font-medium">{t('conversionHalfLife')}</Label>
<FormNumericInput <FormNumericInput
value={pkParams.damph.halfLife} value={pkParams.ldx.halfLife}
onChange={val => onUpdatePkParams('damph', { ...pkParams.damph, halfLife: val })} onChange={val => onUpdatePkParams('ldx', { ...pkParams.ldx, halfLife: val })}
increment={0.5} increment={0.1}
min={0.1} min={0.1}
unit="h" unit="h"
required={true} required={true}
errorMessage={t('halfLifeRequired') || 'Half-life is required'} errorMessage={t('conversionHalfLifeRequired') || 'Conversion half-life is required'}
/> />
</div> </div>
<Separator className="my-4" /> <div className="space-y-2">
<Label className="font-medium">{t('absorptionRate')}</Label>
<FormNumericInput
value={pkParams.ldx.absorptionRate}
onChange={val => onUpdatePkParams('ldx', { ...pkParams.ldx, absorptionRate: val })}
increment={0.1}
min={0.1}
unit={t('faster')}
required={true}
errorMessage={t('absorptionRateRequired') || 'Absorption rate is required'}
/>
</div>
</CardContent>
)}
</Card>
<h3 className="text-lg font-semibold">{t('lisdexamfetamineParameters')}</h3> {/* Reset Button - Always Visible */}
<div className="space-y-2"> <Button
<Label className="font-medium">{t('conversionHalfLife')}</Label> type="button"
<FormNumericInput onClick={onReset}
value={pkParams.ldx.halfLife} variant="destructive"
onChange={val => onUpdatePkParams('ldx', { ...pkParams.ldx, halfLife: val })} className="w-full"
increment={0.1} >
min={0.1} {t('resetAllSettings')}
unit="h" </Button>
required={true} </div>
errorMessage={t('conversionHalfLifeRequired') || 'Conversion half-life is required'}
/>
</div>
<div className="space-y-2">
<Label className="font-medium">{t('absorptionRate')}</Label>
<FormNumericInput
value={pkParams.ldx.absorptionRate}
onChange={val => onUpdatePkParams('ldx', { ...pkParams.ldx, absorptionRate: val })}
increment={0.1}
min={0.1}
unit={t('faster')}
required={true}
errorMessage={t('absorptionRateRequired') || 'Absorption rate is required'}
/>
</div>
<Separator className="my-4" />
<Button
type="button"
onClick={onReset}
variant="destructive"
className="w-full"
>
{t('resetAllSettings')}
</Button>
</CardContent>
</Card>
); );
}; };

View File

@@ -105,6 +105,6 @@ export const getDefaultState = (): AppState => ({
yAxisMin: '8', yAxisMin: '8',
yAxisMax: '13', yAxisMax: '13',
simulationDays: '5', simulationDays: '5',
displayedDays: '5', displayedDays: '2',
} }
}); });

View File

@@ -55,6 +55,7 @@ export const de = {
// Settings // Settings
diagramSettings: "Diagramm-Einstellungen", diagramSettings: "Diagramm-Einstellungen",
pharmacokineticsSettings: "Pharmakokinetik-Einstellungen",
xAxisTimeFormat: "Zeitformat", xAxisTimeFormat: "Zeitformat",
xAxisFormatContinuous: "Fortlaufend", xAxisFormatContinuous: "Fortlaufend",
xAxisFormatContinuousDesc: "Endlose Sequenz (0h, 6h, 12h...)", xAxisFormatContinuousDesc: "Endlose Sequenz (0h, 6h, 12h...)",
@@ -77,8 +78,9 @@ export const de = {
conversionHalfLife: "Umwandlungs-Halbwertszeit", conversionHalfLife: "Umwandlungs-Halbwertszeit",
absorptionRate: "Absorptionsrate", absorptionRate: "Absorptionsrate",
faster: "(schneller >)", faster: "(schneller >)",
resetAllSettings: "Alle Einstellungen zurücksetzen", resetAllSettings: "Alle Einstellungen zurücksetzen", resetDiagramSettings: "Diagramm-Einstellungen zurücksetzen",
resetPharmacokineticSetting: "Pharmakokinetik-Einstellungen zurücksetzen",
resetPlan: "Plan zurücksetzen",
// Units // Units
unitMg: "mg", unitMg: "mg",
unitNgml: "ng/ml", unitNgml: "ng/ml",

View File

@@ -54,6 +54,7 @@ export const en = {
// Settings // Settings
diagramSettings: "Diagram Settings", diagramSettings: "Diagram Settings",
pharmacokineticsSettings: "Pharmacokinetics Settings",
xAxisTimeFormat: "Time Format", xAxisTimeFormat: "Time Format",
xAxisFormatContinuous: "Continuous", xAxisFormatContinuous: "Continuous",
xAxisFormatContinuousDesc: "Endless sequence (0h, 6h, 12h...)", xAxisFormatContinuousDesc: "Endless sequence (0h, 6h, 12h...)",
@@ -76,8 +77,9 @@ export const en = {
conversionHalfLife: "Conversion Half-life", conversionHalfLife: "Conversion Half-life",
absorptionRate: "Absorption Rate", absorptionRate: "Absorption Rate",
faster: "(faster >)", faster: "(faster >)",
resetAllSettings: "Reset All Settings", resetAllSettings: "Reset All Settings", resetDiagramSettings: "Reset Diagram Settings",
resetPharmacokineticSettings: "Reset Pharmacokinetic Settings",
resetPlan: "Reset Plan",
// Units // Units
unitMg: "mg", unitMg: "mg",
unitNgml: "ng/ml", unitNgml: "ng/ml",