Update style improvements and minor fixes

2025-11-29 18:45:30 +00:00
parent 19770a2a3c
commit 5865d9dbe5
7 changed files with 162 additions and 86 deletions
--- a/src/components/deviation-list.tsx
+++ b/src/components/deviation-list.tsx
@@ -36,69 +36,71 @@ 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">
-            <Select
-              value={String(dev.dayOffset || 0)}
-              onValueChange={val => onDeviationChange(index, 'dayOffset', parseInt(val, 10))}
-            >
-              <SelectTrigger className="w-28">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {[...Array(parseInt(simulationDays, 10) || 1).keys()].map(day => (
-                  <SelectItem key={day} value={String(day)}>
-                    {t.day} {day + 1}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+          <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))}
+              >
+                <SelectTrigger className="w-28">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {[...Array(parseInt(simulationDays, 10) || 1).keys()].map(day => (
+                    <SelectItem key={day} value={String(day)}>
+                      {t.day} {day + 1}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>

-            <FormTimeInput
-              value={dev.time}
-              onChange={newTime => onDeviationChange(index, 'time', newTime)}
-              required={true}
-              errorMessage={t.timeRequired || 'Time is required'}
-            />
+              <FormTimeInput
+                value={dev.time}
+                onChange={newTime => onDeviationChange(index, 'time', newTime)}
+                required={true}
+                errorMessage={t.timeRequired || 'Time is required'}
+              />

-            <FormNumericInput
-              value={dev.dose}
-              onChange={newDose => onDeviationChange(index, 'dose', newDose)}
-              increment={doseIncrement}
-              min={0}
-              unit={t.mg}
-              required={true}
-              errorMessage={t.doseRequired || 'Dose is required'}
-            />
+              <FormNumericInput
+                value={dev.dose}
+                onChange={newDose => onDeviationChange(index, 'dose', newDose)}
+                increment={doseIncrement}
+                min={0}
+                unit={t.mg}
+                required={true}
+                errorMessage={t.doseRequired || 'Dose is required'}
+              />
+
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div className="flex items-center gap-2">
+                      <Switch
+                        id={`add_dose_${index}`}
+                        checked={dev.isAdditional}
+                        onCheckedChange={checked => onDeviationChange(index, 'isAdditional', checked)}
+                      />
+                      <Label htmlFor={`add_dose_${index}`} className="text-xs whitespace-nowrap">
+                        {t.additional}
+                      </Label>
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{t.additionalTooltip}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>

            <Button
              type="button"
-              variant="ghost"
+              variant="outline"
              size="icon"
              onClick={() => onRemoveDeviation(index)}
-              className="text-destructive hover:text-destructive"
+              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>
-
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <div className="flex items-center gap-2">
-                    <Switch
-                      id={`add_dose_${index}`}
-                      checked={dev.isAdditional}
-                      onCheckedChange={checked => onDeviationChange(index, 'isAdditional', checked)}
-                    />
-                    <Label htmlFor={`add_dose_${index}`} className="text-xs whitespace-nowrap">
-                      {t.additional}
-                    </Label>
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>{t.additionalTooltip}</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
          </div>
        ))}

--- a/src/components/settings.tsx
+++ b/src/components/settings.tsx
@@ -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>
--- a/src/components/simulation-chart.tsx
+++ b/src/components/simulation-chart.tsx
@@ -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>
--- a/src/components/ui/form-numeric-input.tsx
+++ b/src/components/ui/form-numeric-input.tsx
@@ -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"