Update app main layout, diagram improvements

src/App.js

@@ -34,7 +34,7 @@ const MedPlanAssistant = () => {
   } = appState;
 
   const {
-    showDayTimeXAxis,
+    showDayTimeOnXAxis,
     chartView,
     yAxisMin,
     yAxisMax,
@@ -67,35 +67,10 @@ const MedPlanAssistant = () => {
           </div>
         </header>
 
-        <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
+        <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
-          {/* Left Column - Controls */}
-          <div className="xl:col-span-1 space-y-6">
-            <DoseSchedule
-              doses={doses}
-              doseIncrement={doseIncrement}
-              onUpdateDoses={(newDoses) => updateState('doses', newDoses)}
-              t={t}
-            />
 
-            <DeviationList
+          {/* Both Columns - Chart */}
-              deviations={deviations}
+          <div className="xl:col-span-2 bg-white p-5 rounded-lg shadow-sm border min-h-[600px] flex flex-col">
-              doseIncrement={doseIncrement}
-              simulationDays={simulationDays}
-              onAddDeviation={addDeviation}
-              onRemoveDeviation={removeDeviation}
-              onDeviationChange={handleDeviationChange}
-              t={t}
-            />
-
-            <SuggestionPanel
-              suggestion={suggestion}
-              onApplySuggestion={applySuggestion}
-              t={t}
-            />
-          </div>
-
-          {/* Center Column - Chart */}
-          <div className="xl:col-span-1 bg-white p-5 rounded-lg shadow-sm border min-h-[600px] flex flex-col">
             <div className="flex justify-center space-x-2 mb-4">
               <button
                 onClick={() => updateUiSetting('chartView', 'damph')}
@@ -122,7 +97,7 @@ const MedPlanAssistant = () => {
               deviatedProfile={deviatedProfile}
               correctedProfile={correctedProfile}
               chartView={chartView}
-              showDayTimeXAxis={showDayTimeXAxis}
+              showDayTimeOnXAxis={showDayTimeOnXAxis}
               therapeuticRange={therapeuticRange}
               simulationDays={simulationDays}
               displayedDays={displayedDays}
@@ -132,7 +107,33 @@ const MedPlanAssistant = () => {
             />
           </div>
 
-          {/* Right Column - Settings */}
+          {/* Left Column - Controls */}
+          <div className="xl:col-span-1 space-y-6">
+            <DoseSchedule
+              doses={doses}
+              doseIncrement={doseIncrement}
+              onUpdateDoses={(newDoses) => updateState('doses', newDoses)}
+              t={t}
+            />
+
+            <DeviationList
+              deviations={deviations}
+              doseIncrement={doseIncrement}
+              simulationDays={simulationDays}
+              onAddDeviation={addDeviation}
+              onRemoveDeviation={removeDeviation}
+              onDeviationChange={handleDeviationChange}
+              t={t}
+            />
+
+            <SuggestionPanel
+              suggestion={suggestion}
+              onApplySuggestion={applySuggestion}
+              t={t}
+            />
+          </div>
+
+         {/* Right Column - Settings */}
           <div className="xl:col-span-1 space-y-6">
             <Settings
               pkParams={pkParams}
@@ -145,6 +146,7 @@ const MedPlanAssistant = () => {
               t={t}
             />
           </div>
+
         </div>
 
         <footer className="mt-8 p-4 bg-gray-100 rounded-lg text-sm text-gray-700 border">

src/components/Settings.js

@@ -11,7 +11,7 @@ const Settings = ({
   onReset,
   t
 }) => {
-  const { showDayTimeXAxis, yAxisMin, yAxisMax, simulationDays, displayedDays } = uiSettings;
+  const { showDayTimeOnXAxis, yAxisMin, yAxisMax, simulationDays, displayedDays } = uiSettings;
 
   return (
     <div className="bg-white p-5 rounded-lg shadow-sm border">
@@ -20,12 +20,12 @@ const Settings = ({
         <div className="flex items-center">
           <input
             type="checkbox"
-            id="showDayTimeXAxis"
+            id="showDayTimeOnXAxis"
-            checked={showDayTimeXAxis}
+            checked={showDayTimeOnXAxis}
-            onChange={e => onUpdateUiSetting('showDayTimeXAxis', e.target.checked)}
+            onChange={e => onUpdateUiSetting('showDayTimeOnXAxis', e.target.checked)}
             className="h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-500"
           />
-          <label htmlFor="showDayTimeXAxis" className="ml-3 block font-medium text-gray-600">
+          <label htmlFor="showDayTimeOnXAxis" className="ml-3 block font-medium text-gray-600">
             {t.show24hTimeAxis}
           </label>
         </div>

src/components/SimulationChart.js

@@ -6,7 +6,7 @@ const SimulationChart = ({
   deviatedProfile,
   correctedProfile,
   chartView,
-  showDayTimeXAxis,
+  showDayTimeOnXAxis,
   therapeuticRange,
   simulationDays,
   displayedDays,
@@ -16,7 +16,17 @@ const SimulationChart = ({
 }) => {
   const totalHours = (parseInt(simulationDays, 10) || 3) * 24;
   const chartTicks = Array.from({length: Math.floor(totalHours / 6) + 1}, (_, i) => i * 6);
-  const chartWidthPercentage = Math.max(100, (totalHours / ( (parseInt(displayedDays, 10) || 2) * 24)) * 100);
+
+  // Generate ticks for 24h repeating axis (every 6 hours across all days)
+  const dayTimeTicks = React.useMemo(() => {
+    const ticks = [];
+    for (let i = 0; i <= totalHours; i += 6) {
+      ticks.push(i);
+    }
+    return ticks;
+  }, [totalHours]);
+
+  const chartWidthPercentage = Math.max(100, (totalHours / ( (parseInt(displayedDays, 10) || 2) * 25)) * 100);
 
   const chartDomain = React.useMemo(() => {
     const numMin = parseFloat(yAxisMin);
@@ -36,21 +46,10 @@ const SimulationChart = ({
               dataKey="timeHours"
               type="number"
               domain={[0, totalHours]}
-              ticks={chartTicks}
+              ticks={showDayTimeOnXAxis ? dayTimeTicks : chartTicks}
-              tickFormatter={(h) => `${h}${t.hour}`}
+              tickFormatter={(h) => `${showDayTimeOnXAxis ? h % 24 : h}${t.hour}`}
-              xAxisId="continuous"
+              xAxisId="hours"
             />
-            {showDayTimeXAxis && (
-              <XAxis
-                dataKey="timeHours"
-                type="number"
-                domain={[0, totalHours]}
-                ticks={chartTicks}
-                tickFormatter={(h) => `${h % 24}${t.hour}`}
-                xAxisId="daytime"
-                orientation="top"
-              />
-            )}
             <YAxis
               label={{ value: t.concentration, angle: -90, position: 'insideLeft', offset: -10 }}
               domain={chartDomain}
@@ -68,7 +67,7 @@ const SimulationChart = ({
                 label={{ value: t.min, position: 'insideTopLeft' }}
                 stroke="green"
                 strokeDasharray="3 3"
-                xAxisId="continuous"
+                xAxisId="hours"
               />
             )}
             {(chartView === 'damph' || chartView === 'both') && (
@@ -77,7 +76,7 @@ const SimulationChart = ({
                 label={{ value: t.max, position: 'insideTopLeft' }}
                 stroke="red"
                 strokeDasharray="3 3"
-                xAxisId="continuous"
+                xAxisId="hours"
               />
             )}
 
@@ -88,7 +87,7 @@ const SimulationChart = ({
                   x={day * 24}
                   stroke="#999"
                   strokeDasharray="5 5"
-                  xAxisId="continuous"
+                  xAxisId="hours"
                 />
               )
             ))}
@@ -102,7 +101,7 @@ const SimulationChart = ({
                 stroke="#3b82f6"
                 strokeWidth={2.5}
                 dot={false}
-                xAxisId="continuous"
+                xAxisId="hours"
               />
             )}
             {(chartView === 'ldx' || chartView === 'both') && (
@@ -115,7 +114,7 @@ const SimulationChart = ({
                 strokeWidth={2}
                 dot={false}
                 strokeDasharray="3 3"
-                xAxisId="continuous"
+                xAxisId="hours"
               />
             )}
 
@@ -129,7 +128,7 @@ const SimulationChart = ({
                 strokeWidth={2}
                 strokeDasharray="5 5"
                 dot={false}
-                xAxisId="continuous"
+                xAxisId="hours"
               />
             )}
             {deviatedProfile && (chartView === 'ldx' || chartView === 'both') && (
@@ -142,7 +141,7 @@ const SimulationChart = ({
                 strokeWidth={1.5}
                 strokeDasharray="5 5"
                 dot={false}
-                xAxisId="continuous"
+                xAxisId="hours"
               />
             )}
 
@@ -156,7 +155,7 @@ const SimulationChart = ({
                 strokeWidth={2.5}
                 strokeDasharray="3 7"
                 dot={false}
-                xAxisId="continuous"
+                xAxisId="hours"
               />
             )}
             {correctedProfile && (chartView === 'ldx' || chartView === 'both') && (
@@ -169,7 +168,7 @@ const SimulationChart = ({
                 strokeWidth={2}
                 strokeDasharray="3 7"
                 dot={false}
-                xAxisId="continuous"
+                xAxisId="hours"
               />
             )}
           </LineChart>

src/constants/defaults.js

@@ -19,7 +19,7 @@ export const getDefaultState = () => ({
   therapeuticRange: { min: '10.5', max: '11.5' },
   doseIncrement: '2.5',
   uiSettings: {
-    showDayTimeXAxis: true,
+    showDayTimeOnXAxis: true,
     chartView: 'damph',
     yAxisMin: '',
     yAxisMax: '',