Update pharmacokinetic parameters/calculations, add advanced settings, add disclaimer/citations, many improvements
This commit is contained in:
@@ -19,6 +19,91 @@ import { Separator } from './ui/separator';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
|
||||
import { ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import { getDefaultState } from '../constants/defaults';
|
||||
|
||||
/**
|
||||
* Helper function to create translation interpolation values for defaults.
|
||||
* Derives default values dynamically from hardcoded defaults.
|
||||
*/
|
||||
const getDefaultsForTranslation = (pkParams: any, therapeuticRange: any, uiSettings: any) => {
|
||||
const defaults = getDefaultState();
|
||||
|
||||
return {
|
||||
// UI Settings
|
||||
simulationDays: defaults.uiSettings.simulationDays,
|
||||
displayedDays: defaults.uiSettings.displayedDays,
|
||||
therapeuticRangeMin: defaults.therapeuticRange.min,
|
||||
therapeuticRangeMax: defaults.therapeuticRange.max,
|
||||
|
||||
// PK Parameters
|
||||
damphHalfLife: defaults.pkParams.damph.halfLife,
|
||||
ldxHalfLife: defaults.pkParams.ldx.halfLife,
|
||||
ldxAbsorptionHalfLife: defaults.pkParams.ldx.absorptionHalfLife,
|
||||
|
||||
// Advanced Settings
|
||||
bodyWeight: defaults.pkParams.advanced.weightBasedVd.bodyWeight,
|
||||
tmaxDelay: defaults.pkParams.advanced.foodEffect.tmaxDelay,
|
||||
phTendency: defaults.pkParams.advanced.urinePh.phTendency,
|
||||
fOral: defaults.pkParams.advanced.fOral,
|
||||
fOralPercent: String((parseFloat(defaults.pkParams.advanced.fOral) * 100).toFixed(1)),
|
||||
steadyStateDays: defaults.pkParams.advanced.steadyStateDays,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Helper function to interpolate translation strings with default values.
|
||||
* @example t('simulationDurationTooltip', defaultsForT) → "...Default: 5 days."
|
||||
*/
|
||||
const tWithDefaults = (translationFn: any, key: string, defaults: Record<string, string>) => {
|
||||
const translated = translationFn(key);
|
||||
let result = translated;
|
||||
|
||||
// Replace all {{placeholder}} patterns with values from defaults object
|
||||
Object.entries(defaults).forEach(([placeholder, value]) => {
|
||||
result = result.replace(new RegExp(`{{${placeholder}}}`, 'g'), String(value));
|
||||
});
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* Helper function to render tooltip content with inline source links.
|
||||
* Parses [link text](url) markdown-style syntax and renders as clickable links.
|
||||
* @example "See [this study](https://example.com)" → clickable link within tooltip
|
||||
*/
|
||||
const renderTooltipWithLinks = (text: string): React.ReactNode => {
|
||||
const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
|
||||
const parts: React.ReactNode[] = [];
|
||||
let lastIndex = 0;
|
||||
let match;
|
||||
|
||||
while ((match = linkRegex.exec(text)) !== null) {
|
||||
// Add text before link
|
||||
if (match.index > lastIndex) {
|
||||
parts.push(text.substring(lastIndex, match.index));
|
||||
}
|
||||
// Add link
|
||||
parts.push(
|
||||
<a
|
||||
key={`link-${match.index}`}
|
||||
href={match[2]}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline italic text-yellow-300 hover:text-yellow-200 cursor-pointer"
|
||||
>
|
||||
{match[1]}
|
||||
</a>
|
||||
);
|
||||
lastIndex = linkRegex.lastIndex;
|
||||
}
|
||||
|
||||
// Add remaining text
|
||||
if (lastIndex < text.length) {
|
||||
parts.push(text.substring(lastIndex));
|
||||
}
|
||||
|
||||
return parts.length > 0 ? parts : text;
|
||||
};
|
||||
|
||||
const Settings = ({
|
||||
pkParams,
|
||||
@@ -35,8 +120,40 @@ const Settings = ({
|
||||
const showTherapeuticRange = (uiSettings as any).showTherapeuticRange ?? true;
|
||||
|
||||
const [isDiagramExpanded, setIsDiagramExpanded] = React.useState(true);
|
||||
const [isSimulationExpanded, setIsSimulationExpanded] = React.useState(true);
|
||||
const [isPharmacokineticExpanded, setIsPharmacokineticExpanded] = React.useState(true);
|
||||
const [isAdvancedExpanded, setIsAdvancedExpanded] = React.useState(false);
|
||||
|
||||
// Create defaults object for translation interpolation
|
||||
const defaultsForT = getDefaultsForTranslation(pkParams, therapeuticRange, uiSettings);
|
||||
|
||||
// Helper to update nested advanced settings
|
||||
const updateAdvanced = (category: string, key: string, value: any) => {
|
||||
onUpdatePkParams('advanced', {
|
||||
...pkParams.advanced,
|
||||
[category]: {
|
||||
...pkParams.advanced[category],
|
||||
[key]: value
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const updateAdvancedDirect = (key: string, value: any) => {
|
||||
onUpdatePkParams('advanced', {
|
||||
...pkParams.advanced,
|
||||
[key]: value
|
||||
});
|
||||
};
|
||||
|
||||
// Check for out-of-range warnings
|
||||
const absorptionHL = parseFloat(pkParams.ldx.absorptionHalfLife);
|
||||
const conversionHL = parseFloat(pkParams.ldx.halfLife);
|
||||
const eliminationHL = parseFloat(pkParams.damph.halfLife);
|
||||
|
||||
const absorptionWarning = (absorptionHL < 0.7 || absorptionHL > 1.2);
|
||||
const conversionWarning = (conversionHL < 0.7 || conversionHL > 1.2);
|
||||
const eliminationWarning = (eliminationHL < 9 || eliminationHL > 12);
|
||||
const eliminationExtreme = (eliminationHL < 7 || eliminationHL > 15);
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Diagram Settings Card */}
|
||||
@@ -49,6 +166,172 @@ const Settings = ({
|
||||
</CardHeader>
|
||||
{isDiagramExpanded && (
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch
|
||||
id="showTemplateDay"
|
||||
checked={showTemplateDay}
|
||||
onCheckedChange={checked => onUpdateUiSetting('showTemplateDay', checked)}
|
||||
/>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label htmlFor="showTemplateDay" className="font-medium cursor-help">
|
||||
{t('showTemplateDayInChart')}
|
||||
</Label>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'showTemplateDayTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch
|
||||
id="showDayReferenceLines"
|
||||
checked={showDayReferenceLines}
|
||||
onCheckedChange={checked => onUpdateUiSetting('showDayReferenceLines', checked)}
|
||||
/>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label htmlFor="showDayReferenceLines" className="font-medium cursor-help">
|
||||
{t('showDayReferenceLines')}
|
||||
</Label>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'showDayReferenceLinesTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch
|
||||
id="showTherapeuticRange"
|
||||
checked={showTherapeuticRange}
|
||||
onCheckedChange={checked => onUpdateUiSetting('showTherapeuticRange', checked)}
|
||||
/>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label htmlFor="showTherapeuticRange" className="font-medium cursor-help">
|
||||
{t('showTherapeuticRangeLines')}
|
||||
</Label>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'showTherapeuticRangeLinesTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
{showTherapeuticRange && (
|
||||
<div className="ml-8 space-y-2">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="font-medium cursor-help">
|
||||
{t('therapeuticRange')}
|
||||
</Label>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'therapeuticRangeTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<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('errorTherapeuticRangeMinRequired') || '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('errorTherapeuticRangeMaxRequired') || 'Maximum therapeutic range is required'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
<div className="space-y-2">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="font-medium cursor-help">{t('displayedDays')}</Label>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'displayedDaysTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<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">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="font-medium cursor-help">{t('yAxisRange')}</Label>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'yAxisRangeTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<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>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t('xAxisTimeFormat')}</Label>
|
||||
<TooltipProvider>
|
||||
@@ -94,70 +377,31 @@ const Settings = ({
|
||||
</Select>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<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="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="showTherapeuticRange"
|
||||
checked={showTherapeuticRange}
|
||||
onCheckedChange={checked => onUpdateUiSetting('showTherapeuticRange', checked)}
|
||||
/>
|
||||
<Label htmlFor="showTherapeuticRange" className="font-regular">
|
||||
{t('showTherapeuticRangeLines')}
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
{/* Simulation Settings Card */}
|
||||
<Card>
|
||||
<CardHeader className="cursor-pointer pb-3" onClick={() => setIsSimulationExpanded(!isSimulationExpanded)}>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg">{t('simulationSettings')}</CardTitle>
|
||||
{isSimulationExpanded ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
|
||||
</div>
|
||||
</CardHeader>
|
||||
{isSimulationExpanded && (
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
{ /* <Label className={`font-medium ${!showTherapeuticRange ? 'text-muted-foreground' : ''}`}>{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={showTherapeuticRange}
|
||||
disabled={!showTherapeuticRange}
|
||||
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={showTherapeuticRange}
|
||||
disabled={!showTherapeuticRange}
|
||||
errorMessage={t('therapeuticRangeMaxRequired') || 'Maximum therapeutic range is required'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t('simulationDuration')}</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="font-medium cursor-help">{t('simulationDuration')}</Label>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'simulationDurationTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<FormNumericInput
|
||||
value={simulationDays}
|
||||
onChange={val => onUpdateUiSetting('simulationDays', val)}
|
||||
@@ -171,44 +415,26 @@ const Settings = ({
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t('displayedDays')}</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="font-medium cursor-help">{t('steadyStateDays')}</Label>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'steadyStateDaysTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<FormNumericInput
|
||||
value={displayedDays}
|
||||
onChange={val => onUpdateUiSetting('displayedDays', val)}
|
||||
value={pkParams.advanced.steadyStateDays}
|
||||
onChange={val => updateAdvancedDirect('steadyStateDays', val)}
|
||||
increment={1}
|
||||
min={1}
|
||||
max={parseInt(simulationDays, 10) || 3}
|
||||
min={0}
|
||||
max={7}
|
||||
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>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
@@ -225,15 +451,28 @@ const Settings = ({
|
||||
<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>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="font-medium cursor-help">{t('halfLife')}</Label>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{renderTooltipWithLinks(tWithDefaults(t, 'halfLifeTooltip', defaultsForT))}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<FormNumericInput
|
||||
value={pkParams.damph.halfLife}
|
||||
onChange={val => onUpdatePkParams('damph', { ...pkParams.damph, halfLife: val })}
|
||||
increment={0.5}
|
||||
min={0.1}
|
||||
min={5}
|
||||
max={34}
|
||||
unit="h"
|
||||
required={true}
|
||||
errorMessage={t('halfLifeRequired') || 'Half-life is required'}
|
||||
warning={eliminationWarning && !eliminationExtreme}
|
||||
error={eliminationExtreme}
|
||||
warningMessage={t('warningEliminationOutOfRange')}
|
||||
errorMessage={t('errorEliminationHalfLifeRequired')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -241,28 +480,235 @@ const Settings = ({
|
||||
|
||||
<h3 className="text-lg font-semibold">{t('lisdexamfetamineParameters')}</h3>
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t('conversionHalfLife')}</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="font-medium cursor-help">{t('conversionHalfLife')}</Label>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'conversionHalfLifeTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<FormNumericInput
|
||||
value={pkParams.ldx.halfLife}
|
||||
onChange={val => onUpdatePkParams('ldx', { ...pkParams.ldx, halfLife: val })}
|
||||
increment={0.1}
|
||||
min={0.1}
|
||||
min={0.5}
|
||||
max={2}
|
||||
unit="h"
|
||||
required={true}
|
||||
errorMessage={t('conversionHalfLifeRequired') || 'Conversion half-life is required'}
|
||||
warning={conversionWarning}
|
||||
warningMessage={t('warningConversionOutOfRange')}
|
||||
errorMessage={t('errorConversionHalfLifeRequired')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t('absorptionRate')}</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="font-medium cursor-help">{t('absorptionHalfLife')}</Label>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'absorptionHalfLifeTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<FormNumericInput
|
||||
value={pkParams.ldx.absorptionRate}
|
||||
onChange={val => onUpdatePkParams('ldx', { ...pkParams.ldx, absorptionRate: val })}
|
||||
value={pkParams.ldx.absorptionHalfLife}
|
||||
onChange={val => onUpdatePkParams('ldx', { ...pkParams.ldx, absorptionHalfLife: val })}
|
||||
increment={0.1}
|
||||
min={0.1}
|
||||
unit={t('faster')}
|
||||
min={0.5}
|
||||
max={2}
|
||||
unit="h"
|
||||
required={true}
|
||||
warning={absorptionWarning}
|
||||
warningMessage={t('warningAbsorptionOutOfRange')}
|
||||
errorMessage={t('errorAbsorptionRateRequired')}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Advanced Settings Card */}
|
||||
<Card>
|
||||
<CardHeader className="cursor-pointer pb-3" onClick={() => setIsAdvancedExpanded(!isAdvancedExpanded)}>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg">{t('advancedSettings')}</CardTitle>
|
||||
{isAdvancedExpanded ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
|
||||
</div>
|
||||
</CardHeader>
|
||||
{isAdvancedExpanded && (
|
||||
<CardContent className="space-y-4">
|
||||
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md p-3 text-sm">
|
||||
<p className="text-yellow-800 dark:text-yellow-200">{t('advancedSettingsWarning')}</p>
|
||||
</div>
|
||||
|
||||
{/* Weight-Based Vd */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch
|
||||
id="weightBasedVdEnabled"
|
||||
checked={pkParams.advanced.weightBasedVd.enabled}
|
||||
onCheckedChange={checked => updateAdvanced('weightBasedVd', 'enabled', checked)}
|
||||
/>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label htmlFor="weightBasedVdEnabled" className="font-medium cursor-help">
|
||||
{t('weightBasedVdScaling')}
|
||||
</Label>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'weightBasedVdTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
{pkParams.advanced.weightBasedVd.enabled && (
|
||||
<div className="ml-8 space-y-2">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="text-sm font-medium cursor-help">{t('bodyWeight')}</Label>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{renderTooltipWithLinks(tWithDefaults(t, 'bodyWeightTooltip', defaultsForT))}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<FormNumericInput
|
||||
value={pkParams.advanced.weightBasedVd.bodyWeight}
|
||||
onChange={val => updateAdvanced('weightBasedVd', 'bodyWeight', val)}
|
||||
increment={1}
|
||||
min={20}
|
||||
max={150}
|
||||
unit={t('bodyWeightUnit')}
|
||||
required={true}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
{/* Food Effect */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch
|
||||
id="foodEffectEnabled"
|
||||
checked={pkParams.advanced.foodEffect.enabled}
|
||||
onCheckedChange={checked => updateAdvanced('foodEffect', 'enabled', checked)}
|
||||
/>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label htmlFor="foodEffectEnabled" className="font-medium cursor-help">
|
||||
{t('foodEffectEnabled')}
|
||||
</Label>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'foodEffectTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
{pkParams.advanced.foodEffect.enabled && (
|
||||
<div className="ml-8 space-y-2">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="text-sm font-medium cursor-help">{t('tmaxDelay')}</Label>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{renderTooltipWithLinks(tWithDefaults(t, 'tmaxDelayTooltip', defaultsForT))}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<FormNumericInput
|
||||
value={pkParams.advanced.foodEffect.tmaxDelay}
|
||||
onChange={val => updateAdvanced('foodEffect', 'tmaxDelay', val)}
|
||||
increment={0.1}
|
||||
min={0}
|
||||
max={2}
|
||||
unit={t('tmaxDelayUnit')}
|
||||
required={true}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
{/* Urine pH */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch
|
||||
id="urinePHEnabled"
|
||||
checked={pkParams.advanced.urinePh.enabled}
|
||||
onCheckedChange={checked => updateAdvanced('urinePh', 'enabled', checked)}
|
||||
/>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label htmlFor="urinePHEnabled" className="font-medium cursor-help">
|
||||
{t('urinePHTendency')}
|
||||
</Label>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'urinePHTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
{pkParams.advanced.urinePh.enabled && (
|
||||
<div className="ml-8 space-y-2">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="text-sm font-medium cursor-help">{t('urinePHValue')}</Label>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'urinePHValueTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<FormNumericInput
|
||||
value={pkParams.advanced.urinePh.phTendency}
|
||||
onChange={val => updateAdvanced('urinePh', 'phTendency', val)}
|
||||
increment={0.1}
|
||||
min={5.5}
|
||||
max={8.0}
|
||||
required={true}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t('phUnit')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
{/* Oral Bioavailability */}
|
||||
<div className="space-y-2">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="font-medium cursor-help">{t('oralBioavailability')}</Label>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{renderTooltipWithLinks(tWithDefaults(t, 'oralBioavailabilityTooltip', defaultsForT))}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<FormNumericInput
|
||||
value={pkParams.advanced.fOral}
|
||||
onChange={val => updateAdvancedDirect('fOral', val)}
|
||||
increment={0.01}
|
||||
min={0.5}
|
||||
max={1.0}
|
||||
required={true}
|
||||
errorMessage={t('absorptionRateRequired') || 'Absorption rate is required'}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
Reference in New Issue
Block a user