From 7439a1a10140df70e018e56aa383f0837269522a Mon Sep 17 00:00:00 2001
From: Experiments DB Dev <dev@experiments-db.local>
Date: Thu, 23 Apr 2026 12:21:52 -0400
Subject: [PATCH] fix: day modal bar chart shows experiment-wide session stats
 per subject

Shows Total / Success / Failure bars across ALL sessions for each animal
that has at least one valid (non-empty) value for the chosen field.
Animals with zero valid field entries are excluded from the chart.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/ExperimentCalendar.jsx     | 38 +++++++++++--------
 frontend/tests/ExperimentCalendar.test.jsx    | 15 +++++---
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/ExperimentCalendar.jsx b/frontend/src/components/ExperimentCalendar.jsx
index 608acb7..8352e35 100644
--- a/frontend/src/components/ExperimentCalendar.jsx
+++ b/frontend/src/components/ExperimentCalendar.jsx
@@ -53,25 +53,29 @@ function DayPanel({ date, animals, allStatuses, template, experimentId, selected
 
   const fieldLabel = fieldOptions.find((f) => f.value === selectedField)?.label;
 
-  // Bar chart: this day's field value per subject (numeric fields only)
+  // Bar chart: session stats across ALL days, for animals with at least one valid field value
   const barData = useMemo(() => {
     if (!selectedField) return [];
     const isBuiltin = BUILTIN_KEYS_SET.has(selectedField);
-    return animalsWithData
+    return animals
       .map((animal) => {
-        const status = statusByAnimal[animal.id];
-        if (!status) return null;
-        const raw = isBuiltin ? status[selectedField] : status.custom_fields?.[selectedField];
-        if (raw === null || raw === undefined || String(raw).trim() === '') return null;
-        const num = parseFloat(raw);
-        if (isNaN(num)) return null;
+        const statuses = allStatuses.filter((s) => s.animal_id === animal.id);
+        const total = statuses.length;
+        if (total === 0) return null;
+        const success = statuses.filter((s) => {
+          const val = isBuiltin ? s[selectedField] : s.custom_fields?.[selectedField];
+          return val !== null && val !== undefined && String(val).trim() !== '';
+        }).length;
+        if (success === 0) return null; // skip animals with no valid field data
         return {
           name: animal.animal_name || animal.animal_id_string || animal.id.slice(0, 8),
-          value: num,
+          total,
+          success,
+          failure: total - success,
         };
       })
       .filter(Boolean);
-  }, [animalsWithData, statusByAnimal, selectedField]);
+  }, [animals, allStatuses, selectedField]);
 
   return (
     <div className="space-y-3 max-h-[80vh] overflow-y-auto pr-1">
@@ -120,16 +124,20 @@ function DayPanel({ date, animals, allStatuses, template, experimentId, selected
       {/* Bar chart: overall per-subject completeness */}
       {barData.length > 0 && (
         <div className="mt-4 pt-4 border-t border-gray-100">
-          <h4 className="text-sm font-semibold text-gray-700 mb-3">
-            {fieldLabel ?? 'Field'} by subject
+          <h4 className="text-sm font-semibold text-gray-700 mb-1">
+            Session statistics — {fieldLabel ?? 'selected field'}
           </h4>
+          <p className="text-xs text-gray-400 mb-3">All sessions across the experiment</p>
           <ResponsiveContainer width="100%" height={200}>
             <BarChart data={barData} margin={{ top: 4, right: 16, left: 0, bottom: 4 }}>
               <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
               <XAxis dataKey="name" tick={{ fontSize: 11 }} />
-              <YAxis tick={{ fontSize: 11 }} />
-              <Tooltip formatter={(v) => [v, fieldLabel ?? 'Value']} />
-              <Bar dataKey="value" name={fieldLabel ?? 'Value'} fill="#6366f1" radius={[3, 3, 0, 0]} />
+              <YAxis tick={{ fontSize: 11 }} allowDecimals={false} />
+              <Tooltip />
+              <Legend wrapperStyle={{ fontSize: 11 }} />
+              <Bar dataKey="total" name="Total" fill="#94a3b8" />
+              <Bar dataKey="success" name="Success" fill="#22c55e" />
+              <Bar dataKey="failure" name="Failure" fill="#f87171" minPointSize={2} />
             </BarChart>
           </ResponsiveContainer>
         </div>
diff --git a/frontend/tests/ExperimentCalendar.test.jsx b/frontend/tests/ExperimentCalendar.test.jsx
index b7c462f..a17dfb9 100644
--- a/frontend/tests/ExperimentCalendar.test.jsx
+++ b/frontend/tests/ExperimentCalendar.test.jsx
@@ -248,7 +248,7 @@ describe('day click modal', () => {
 // ── Bar chart (inside day modal) ──────────────────────────────────────────────
 
 describe('bar chart inside day modal', () => {
-  it('renders bar chart for numeric field values on that day', async () => {
+  it('renders session stats bar chart when animals have valid field data', async () => {
     const dateStr = todayStr();
     const statuses = [
       makeStatus('a1000000-0000-0000-0000-000000000001', dateStr, { 'ww000000-0000-0000-0000-000000000099': '325' }),
@@ -263,16 +263,19 @@ describe('bar chart inside day modal', () => {
     });
   });
 
-  it('does not render bar chart when selected field is non-numeric', async () => {
+  it('excludes animals with no valid field data from bar chart', async () => {
     const dateStr = todayStr();
-    // vitals is a text field — not numeric, so no bar chart
-    const statuses = [makeStatus('a1000000-0000-0000-0000-000000000001', dateStr, {}, 'HR 72')];
+    // Rat A has weight data; Rat B has only empty custom_fields — should be excluded from chart
+    const statuses = [
+      makeStatus('a1000000-0000-0000-0000-000000000001', dateStr, { 'ww000000-0000-0000-0000-000000000099': '325' }),
+      makeStatus('a2000000-0000-0000-0000-000000000002', dateStr, {}),
+    ];
     render(
       <ExperimentCalendar experimentId={EXP_ID} template={TEMPLATE} allStatuses={statuses} animals={ANIMALS} />,
     );
-    fireEvent.change(screen.getByTestId('field-select'), { target: { value: 'vitals' } });
     fireEvent.click(screen.getByTestId(`day-${dateStr}`));
     await waitFor(() => screen.getByRole('dialog'));
-    expect(screen.queryByTestId('bar-chart')).not.toBeInTheDocument();
+    // Both animals are in the day view (both have records), but bar chart only has Rat A
+    expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
   });
 });