cbaoth/med-plan-assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update style improvements and minor fixes

Browse Source
This commit is contained in:
Andreas Weyer
2025-11-29 18:45:30 +00:00
parent 19770a2a3c
commit 5865d9dbe5
7 changed files with 162 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -64,7 +64,7 @@ const MedPlanAssistant = () => {
removeDeviation,
handleDeviationChange,
applySuggestion
} = useSimulation(appState);
} = useSimulation(appState, t);
return (
<div className="min-h-screen bg-background p-4 sm:p-6 lg:p-8">

24
src/components/deviation-list.tsx
View File

@@ -36,7 +36,8 @@ const DeviationList = ({
</CardHeader>
<CardContent className="space-y-2">
{deviations.map((dev: any, index: number) => (
<div key={index} className="flex items-center gap-3 p-3 bg-card rounded-lg border flex-wrap">
<div key={index} className="relative flex items-start gap-3 p-3 bg-card rounded-lg border flex-wrap">
<div className="flex items-center gap-3 flex-1 flex-wrap">
<Select
value={String(dev.dayOffset || 0)}
onValueChange={val => onDeviationChange(index, 'dayOffset', parseInt(val, 10))}
@@ -70,16 +71,6 @@ const DeviationList = ({
errorMessage={t.doseRequired || 'Dose is required'}
/>
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => onRemoveDeviation(index)}
className="text-destructive hover:text-destructive"
>
<X className="h-4 w-4" />
</Button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
@@ -100,6 +91,17 @@ const DeviationList = ({
</Tooltip>
</TooltipProvider>
</div>
<Button
type="button"
variant="outline"
size="icon"
onClick={() => onRemoveDeviation(index)}
className="absolute top-3 right-3 text-destructive hover:bg-destructive hover:text-destructive-foreground border-destructive/30"
>
<X className="h-4 w-4" />
</Button>
</div>
))}
<Button

2
src/components/settings.tsx
View File

@@ -35,7 +35,7 @@ const Settings = ({
<CardTitle>{t.advancedSettings}</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Label htmlFor="showDayTimeOnXAxis" className="font-medium">
{t.show24hTimeAxis}
</Label>

109
src/components/simulation-chart.tsx
View File

@@ -12,6 +12,27 @@
import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ReferenceLine, ResponsiveContainer } from 'recharts';
// Chart color scheme
const CHART_COLORS = {
// d-Amphetamine profiles
idealDamph: '#2563eb', // blue-600 (primary, solid, bold)
deviatedDamph: '#f59e0b', // amber-500 (warning, dashed)
correctedDamph: '#10b981', // emerald-500 (success, dash-dot)
// Lisdexamfetamine profiles
idealLdx: '#7c3aed', // violet-600 (primary, dashed)
deviatedLdx: '#f97316', // orange-500 (warning, dashed)
correctedLdx: '#059669', // emerald-600 (success, dash-dot)
// Reference lines
therapeuticMin: '#22c55e', // green-500
therapeuticMax: '#ef4444', // red-500
dayDivider: '#9ca3af', // gray-400
// Tooltip cursor
cursor: '#6b7280' // gray-500
} as const;
const SimulationChart = ({
idealProfile,
deviatedProfile,
@@ -46,11 +67,47 @@ const SimulationChart = ({
return [domainMin, domainMax];
}, [yAxisMin, yAxisMax]);
// Merge all profiles into a single dataset for proper tooltip synchronization
const mergedData = React.useMemo(() => {
const dataMap = new Map();
// Add ideal profile data
idealProfile?.forEach((point: any) => {
dataMap.set(point.timeHours, {
timeHours: point.timeHours,
idealDamph: point.damph,
idealLdx: point.ldx
});
});
// Add deviated profile data
deviatedProfile?.forEach((point: any) => {
const existing = dataMap.get(point.timeHours) || { timeHours: point.timeHours };
dataMap.set(point.timeHours, {
...existing,
deviatedDamph: point.damph,
deviatedLdx: point.ldx
});
});
// Add corrected profile data
correctedProfile?.forEach((point: any) => {
const existing = dataMap.get(point.timeHours) || { timeHours: point.timeHours };
dataMap.set(point.timeHours, {
...existing,
correctedDamph: point.damph,
correctedLdx: point.ldx
});
});
return Array.from(dataMap.values()).sort((a, b) => a.timeHours - b.timeHours);
}, [idealProfile, deviatedProfile, correctedProfile]);
return (
<div className="flex-grow w-full overflow-x-auto">
<div className="flex-grow w-full overflow-x-auto overflow-y-hidden">
<div style={{ width: `${chartWidthPercentage}%`, height: '100%', minWidth: '100%' }}>
<ResponsiveContainer width="100%" height="100%">
<LineChart margin={{ top: 20, right: 20, left: 0, bottom: 5 }}>
<LineChart data={mergedData} margin={{ top: 20, right: 20, left: 0, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
dataKey="timeHours"
@@ -76,14 +133,18 @@ const SimulationChart = ({
<Tooltip
formatter={(value: any, name) => [`${typeof value === 'number' ? value.toFixed(1) : value} ${t.ngml}`, name]}
labelFormatter={(label) => `${t.hour.replace('h', 'Hour')}: ${label}${t.hour}`}
wrapperStyle={{ pointerEvents: 'none', zIndex: 200 }}
allowEscapeViewBox={{ x: false, y: false }}
cursor={{ stroke: CHART_COLORS.cursor, strokeWidth: 1, strokeDasharray: '1 1' }}
position={{ y: 0 }}
/>
<Legend verticalAlign="top" height={36} />
<Legend verticalAlign="top" align="left" height={36} wrapperStyle={{ zIndex: 100, marginLeft: 60 }} />
{(chartView === 'damph' || chartView === 'both') && (
<ReferenceLine
y={parseFloat(therapeuticRange.min) || 0}
label={{ value: t.min, position: 'insideTopLeft' }}
stroke="green"
stroke={CHART_COLORS.therapeuticMin}
strokeDasharray="3 3"
xAxisId="hours"
/>
@@ -92,7 +153,7 @@ const SimulationChart = ({
<ReferenceLine
y={parseFloat(therapeuticRange.max) || 0}
label={{ value: t.max, position: 'insideTopLeft' }}
stroke="red"
stroke={CHART_COLORS.therapeuticMax}
strokeDasharray="3 3"
xAxisId="hours"
/>
@@ -103,7 +164,7 @@ const SimulationChart = ({
<ReferenceLine
key={day}
x={day * 24}
stroke="#999"
stroke={CHART_COLORS.dayDivider}
strokeDasharray="5 5"
xAxisId="hours"
/>
@@ -113,80 +174,80 @@ const SimulationChart = ({
{(chartView === 'damph' || chartView === 'both') && (
<Line
type="monotone"
data={idealProfile}
dataKey="damph"
dataKey="idealDamph"
name={`${t.dAmphetamine} (Ideal)`}
stroke="#3b82f6"
stroke={CHART_COLORS.idealDamph}
strokeWidth={2.5}
dot={false}
xAxisId="hours"
connectNulls
/>
)}
{(chartView === 'ldx' || chartView === 'both') && (
<Line
type="monotone"
data={idealProfile}
dataKey="ldx"
dataKey="idealLdx"
name={`${t.lisdexamfetamine} (Ideal)`}
stroke="#8b5cf6"
stroke={CHART_COLORS.idealLdx}
strokeWidth={2}
dot={false}
strokeDasharray="3 3"
xAxisId="hours"
connectNulls
/>
)}
{deviatedProfile && (chartView === 'damph' || chartView === 'both') && (
<Line
type="monotone"
data={deviatedProfile}
dataKey="damph"
dataKey="deviatedDamph"
name={`${t.dAmphetamine} (Deviation)`}
stroke="#f59e0b"
stroke={CHART_COLORS.deviatedDamph}
strokeWidth={2}
strokeDasharray="5 5"
dot={false}
xAxisId="hours"
connectNulls
/>
)}
{deviatedProfile && (chartView === 'ldx' || chartView === 'both') && (
<Line
type="monotone"
data={deviatedProfile}
dataKey="ldx"
dataKey="deviatedLdx"
name={`${t.lisdexamfetamine} (Deviation)`}
stroke="#f97316"
stroke={CHART_COLORS.deviatedLdx}
strokeWidth={1.5}
strokeDasharray="5 5"
dot={false}
xAxisId="hours"
connectNulls
/>
)}
{correctedProfile && (chartView === 'damph' || chartView === 'both') && (
<Line
type="monotone"
data={correctedProfile}
dataKey="damph"
dataKey="correctedDamph"
name={`${t.dAmphetamine} (Correction)`}
stroke="#10b981"
stroke={CHART_COLORS.correctedDamph}
strokeWidth={2.5}
strokeDasharray="3 7"
dot={false}
xAxisId="hours"
connectNulls
/>
)}
{correctedProfile && (chartView === 'ldx' || chartView === 'both') && (
<Line
type="monotone"
data={correctedProfile}
dataKey="ldx"
dataKey="correctedLdx"
name={`${t.lisdexamfetamine} (Correction)`}
stroke="#059669"
stroke={CHART_COLORS.correctedLdx}
strokeWidth={2}
strokeDasharray="3 7"
dot={false}
xAxisId="hours"
connectNulls
/>
)}
</LineChart>

3
src/components/ui/form-numeric-input.tsx
View File

@@ -136,7 +136,7 @@ const FormNumericInput = React.forwardRef<HTMLInputElement, NumericInputProps>(
return (
<div ref={containerRef} className={cn("relative flex items-center gap-2", className)}>
<div className="flex items-center flex-1">
<div className="flex items-center">
<Button
type="button"
variant="outline"
@@ -159,6 +159,7 @@ const FormNumericInput = React.forwardRef<HTMLInputElement, NumericInputProps>(
onFocus={handleFocus}
onKeyDown={handleKeyDown}
className={cn(
"w-24",
"rounded-none border-x-0 h-9",
getAlignmentClass(),
hasError && "border-destructive focus-visible:ring-destructive"

12
src/hooks/useSimulation.ts
View File

@@ -24,7 +24,12 @@ interface SuggestionResult {
dayOffset?: number;
}
export const useSimulation = (appState: AppState) => {
interface Translations {
noSuitableNextDose: string;
noSignificantCorrection: string;
}
export const useSimulation = (appState: AppState, t: Translations) => {
const { pkParams, doses, steadyStateConfig, doseIncrement, uiSettings } = appState;
const { simulationDays } = uiSettings;
@@ -51,10 +56,11 @@ export const useSimulation = (appState: AppState) => {
doseIncrement,
simulationDays,
steadyStateConfig,
pkParams
pkParams,
t
);
setSuggestion(newSuggestion);
}, [doses, deviations, doseIncrement, simulationDays, steadyStateConfig, pkParams]);
}, [doses, deviations, doseIncrement, simulationDays, steadyStateConfig, pkParams, t]);
React.useEffect(() => {
generateSuggestionMemo();

12
src/utils/suggestions.ts
View File

@@ -22,13 +22,19 @@ interface SuggestionResult {
dayOffset?: number;
}
interface Translations {
noSuitableNextDose: string;
noSignificantCorrection: string;
}
export const generateSuggestion = (
doses: Dose[],
deviations: Deviation[],
doseIncrement: string,
simulationDays: string,
steadyStateConfig: SteadyStateConfig,
pkParams: PkParams
pkParams: PkParams,
t: Translations
): SuggestionResult | null => {
if (deviations.length === 0) {
return null;
@@ -68,7 +74,7 @@ export const generateSuggestion = (
});
if (!nextDose) {
return { text: "Keine passende nächste Dosis für Korrektur gefunden." };
return { text: t.noSuitableNextDose };
}
// Type assertion after null check
@@ -85,7 +91,7 @@ export const generateSuggestion = (
const concentrationDifference = idealConcentration - deviatedConcentration;
if (Math.abs(concentrationDifference) < 0.5) {
return { text: "Keine signifikante Korrektur notwendig." };
return { text: t.noSignificantCorrection };
}
const doseAdjustmentFactor = 0.5;