From dc46af8d31f6a5d74c1712e40332dfd85771606c Mon Sep 17 00:00:00 2001
From: Experiments DB Dev <dev@experiments-db.local>
Date: Thu, 23 Apr 2026 12:59:34 -0400
Subject: [PATCH] feat: inline cell editing and prev/next day navigation in day
 view

Clicking any table cell opens an inline input (text or textarea per
field type). Enter or blur saves; Escape cancels. Unchanged values
skip the API call. Custom fields merge with existing custom_fields;
builtin fields use their key directly.

Prev/next buttons at the bottom navigate to adjacent days that have
data for the selected field, preserving the ?field= param. Day list
is fetched via getCalendar and sorted chronologically.

Tests: 41 total (added 15 new tests for cell editing and day nav).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/ExperimentDayView.jsx  | 186 +++++++++++++++---
 frontend/tests/ExperimentDayView.test.jsx | 218 +++++++++++++++++++++-
 2 files changed, 380 insertions(+), 24 deletions(-)

diff --git a/frontend/src/pages/ExperimentDayView.jsx b/frontend/src/pages/ExperimentDayView.jsx
index 9b83ba7..fddf645 100644
--- a/frontend/src/pages/ExperimentDayView.jsx
+++ b/frontend/src/pages/ExperimentDayView.jsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useParams, useNavigate, useSearchParams, Link } from 'react-router-dom';
 import { format } from 'date-fns';
 import {
   ResponsiveContainer, BarChart, Bar, XAxis, YAxis,
   CartesianGrid, Tooltip, Legend,
 } from 'recharts';
-import { experimentsApi } from '../api/client';
+import { experimentsApi, dailyStatusesApi } from '../api/client';
 import Button from '../components/ui/Button';
 import Modal from '../components/ui/Modal';
 import DailyStatusForm from '../components/DailyStatusForm';
@@ -23,8 +23,50 @@ function cellText(value) {
   return String(value);
 }
 
+// ── Inline cell editor ────────────────────────────────────────────────────────
+
+function CellEdit({ value, field, saving, onSave, onCancel }) {
+  const [val, setVal] = useState(value ?? '');
+  const ref = useRef(null);
+
+  useEffect(() => {
+    ref.current?.focus();
+    ref.current?.select();
+  }, []);
+
+  function handleKey(e) {
+    if (e.key === 'Escape') { e.preventDefault(); onCancel(); }
+    if (e.key === 'Enter' && field.type !== 'textarea') { e.preventDefault(); onSave(val); }
+  }
+
+  const cls = 'w-full text-sm border border-blue-400 rounded px-1.5 py-0.5 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white disabled:opacity-60';
+
+  if (field.type === 'textarea') {
+    return (
+      <textarea
+        ref={ref} value={val} rows={3} disabled={saving}
+        onChange={(e) => setVal(e.target.value)}
+        onBlur={() => onSave(val)}
+        onKeyDown={handleKey}
+        className={cls}
+      />
+    );
+  }
+  return (
+    <input
+      ref={ref} type="text" value={val} disabled={saving}
+      onChange={(e) => setVal(e.target.value)}
+      onBlur={() => onSave(val)}
+      onKeyDown={handleKey}
+      className={cls}
+    />
+  );
+}
+
+// ── Page ──────────────────────────────────────────────────────────────────────
+
 export default function ExperimentDayView() {
-  const { id, date } = useParams();          // id = experimentId, date = YYYY-MM-DD
+  const { id, date } = useParams();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
 
@@ -34,6 +76,16 @@ export default function ExperimentDayView() {
   const [error, setError] = useState(null);
   const [editStatus, setEditStatus] = useState(null);
 
+  // Inline cell editing
+  const [editingCell, setEditingCell] = useState(null); // { statusId, fieldId }
+  const [cellSaving, setCellSaving] = useState(false);
+  const [cellError, setCellError] = useState(null);
+
+  // Day navigation
+  const [dayList, setDayList] = useState([]);
+
+  const selectedField = searchParams.get('field') ?? null;
+
   useEffect(() => {
     setLoading(true);
     Promise.all([
@@ -48,25 +100,27 @@ export default function ExperimentDayView() {
       .finally(() => setLoading(false));
   }, [id, date]);
 
+  // Fetch ordered list of days with data for this field, for prev/next nav
+  useEffect(() => {
+    if (!id || !selectedField) return;
+    experimentsApi.getCalendar(id, selectedField)
+      .then(({ days }) => setDayList(Object.keys(days).sort()))
+      .catch(() => {});
+  }, [id, selectedField]);
+
   const dailyTemplate = useMemo(() => {
     if (!experiment) return [];
-    const t = experiment.template ?? [];
-    return t.filter((f) => f.active);
+    return (experiment.template ?? []).filter((f) => f.active);
   }, [experiment]);
 
   const animals = useMemo(() => experiment?.animals ?? [], [experiment]);
 
-  // Selected field from URL (passed by calendar). Used to filter which rows show.
-  const selectedField = searchParams.get('field') ?? null;
-
-  // Build map: animal_id → status for this day
   const statusByAnimal = useMemo(() => {
     const map = {};
     statuses.forEach((s) => { map[s.animal_id] = s; });
     return map;
   }, [statuses]);
 
-  // Rows: animals with a valid (non-empty) value for the selected field, or all if no field filter
   const rows = useMemo(() => {
     return animals
       .map((animal) => ({ animal, status: statusByAnimal[animal.id] }))
@@ -79,7 +133,6 @@ export default function ExperimentDayView() {
       });
   }, [animals, statusByAnimal, selectedField]);
 
-  // Bar chart: analysis_summary from each row's status (same contract as calendar modal)
   const barData = useMemo(() => {
     return rows
       .map(({ animal, status }) => {
@@ -95,14 +148,48 @@ export default function ExperimentDayView() {
       .filter(Boolean);
   }, [rows]);
 
+  // Prev / next days with data
+  const currentDayIdx = dayList.indexOf(date);
+  const prevDay = currentDayIdx > 0 ? dayList[currentDayIdx - 1] : null;
+  const nextDay = currentDayIdx < dayList.length - 1 ? dayList[currentDayIdx + 1] : null;
+
+  function dayNavUrl(d) {
+    return `/experiments/${id}/day/${d}${selectedField ? `?field=${selectedField}` : ''}`;
+  }
+
+  // Inline cell save
+  async function saveCell(status, field, rawValue) {
+    const value = rawValue?.trim() || null;
+    // Skip save if unchanged
+    const current = getFieldValue(status, field);
+    const currentNorm = current == null ? null : String(current).trim() || null;
+    if (value === currentNorm) { setEditingCell(null); return; }
+
+    setCellSaving(true);
+    setCellError(null);
+    try {
+      let payload;
+      if (field.builtin) {
+        payload = { [field.key]: value };
+      } else {
+        payload = { custom_fields: { ...status.custom_fields, [field.fieldId]: value } };
+      }
+      const updated = await dailyStatusesApi.update(status.id, payload);
+      setStatuses((prev) => prev.map((s) => s.id === updated.id ? updated : s));
+      setEditingCell(null);
+    } catch (err) {
+      setCellError(err.message ?? 'Save failed');
+    } finally {
+      setCellSaving(false);
+    }
+  }
+
   const displayDate = date
     ? format(new Date(date + 'T12:00:00'), 'MMMM d, yyyy')
     : date;
 
   if (loading) {
-    return (
-      <div className="max-w-5xl mx-auto px-4 py-10 text-center text-gray-400">Loading…</div>
-    );
+    return <div className="max-w-5xl mx-auto px-4 py-10 text-center text-gray-400">Loading…</div>;
   }
   if (error) {
     return (
@@ -132,6 +219,10 @@ export default function ExperimentDayView() {
         </Button>
       </div>
 
+      {cellError && (
+        <Alert type="error" message={cellError} onDismiss={() => setCellError(null)} className="mb-4" />
+      )}
+
       {/* Status table */}
       {rows.length === 0 ? (
         <div className="text-center py-16 border-2 border-dashed border-gray-200 rounded-xl text-gray-400">
@@ -185,13 +276,34 @@ export default function ExperimentDayView() {
                           </span>
                         )}
                       </td>
-                      {dailyTemplate.map((f) => (
-                        <td key={f.fieldId} className="px-3 py-1.5 text-gray-700 max-w-[220px] align-top">
-                          <span className="whitespace-pre-wrap break-words">
-                            {status ? (cellText(getFieldValue(status, f)) ?? <span className="text-gray-300">—</span>) : <span className="text-gray-300">—</span>}
-                          </span>
-                        </td>
-                      ))}
+
+                      {/* Field cells — click to edit inline */}
+                      {dailyTemplate.map((f) => {
+                        const isEditing = editingCell?.statusId === status?.id && editingCell?.fieldId === f.fieldId;
+                        const text = status ? cellText(getFieldValue(status, f)) : null;
+                        return (
+                          <td key={f.fieldId} className="px-3 py-1.5 text-gray-700 max-w-[220px] align-top">
+                            {isEditing ? (
+                              <CellEdit
+                                value={text}
+                                field={f}
+                                saving={cellSaving}
+                                onSave={(val) => saveCell(status, f, val)}
+                                onCancel={() => setEditingCell(null)}
+                              />
+                            ) : (
+                              <span
+                                className="whitespace-pre-wrap break-words block rounded px-0.5 -mx-0.5 cursor-pointer hover:bg-blue-50 transition-colors"
+                                title="Click to edit"
+                                onClick={() => status && setEditingCell({ statusId: status.id, fieldId: f.fieldId })}
+                              >
+                                {text ?? <span className="text-gray-300">—</span>}
+                              </span>
+                            )}
+                          </td>
+                        );
+                      })}
+
                       <td className={`px-2 py-1.5 sticky right-0 z-10 border-l border-gray-100 ${rowBg}`}>
                         {status && (
                           <Button size="sm" variant="secondary" onClick={() => setEditStatus(status)}>
@@ -210,7 +322,7 @@ export default function ExperimentDayView() {
 
       {/* Session metrics bar chart */}
       {barData.length > 0 && (
-        <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
+        <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-5 mb-8">
           <h3 className="text-sm font-semibold text-gray-700 mb-3">Session metrics</h3>
           <ResponsiveContainer width="100%" height={220}>
             <BarChart data={barData} margin={{ top: 4, right: 16, left: 0, bottom: 4 }}>
@@ -227,7 +339,35 @@ export default function ExperimentDayView() {
         </div>
       )}
 
-      {/* Edit modal */}
+      {/* Prev / next day navigation */}
+      {(prevDay || nextDay) && (
+        <div className="flex justify-between items-center mt-2 mb-4">
+          <div>
+            {prevDay && (
+              <button
+                type="button"
+                onClick={() => navigate(dayNavUrl(prevDay))}
+                className="text-sm text-blue-600 hover:text-blue-800 hover:underline"
+              >
+                ← {format(new Date(prevDay + 'T12:00:00'), 'MMMM d, yyyy')}
+              </button>
+            )}
+          </div>
+          <div>
+            {nextDay && (
+              <button
+                type="button"
+                onClick={() => navigate(dayNavUrl(nextDay))}
+                className="text-sm text-blue-600 hover:text-blue-800 hover:underline"
+              >
+                {format(new Date(nextDay + 'T12:00:00'), 'MMMM d, yyyy')} →
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Edit modal (full row) */}
       {editStatus && (
         <Modal
           isOpen={!!editStatus}
diff --git a/frontend/tests/ExperimentDayView.test.jsx b/frontend/tests/ExperimentDayView.test.jsx
index 2ac2c50..a81f598 100644
--- a/frontend/tests/ExperimentDayView.test.jsx
+++ b/frontend/tests/ExperimentDayView.test.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor, within } from '@testing-library/react';
 import ExperimentDayView from '../src/pages/ExperimentDayView';
-import { experimentsApi } from '../src/api/client';
 
 // ── Mocks ──────────────────────────────────────────────────────────────────────
 
@@ -13,11 +12,16 @@ jest.mock('react-router-dom', () => ({
   Link: ({ to, children, ...props }) => <a href={to} {...props}>{children}</a>,
 }));
 const { useParams, useSearchParams } = require('react-router-dom');
+const { experimentsApi, dailyStatusesApi } = require('../src/api/client');
 
 jest.mock('../src/api/client', () => ({
   experimentsApi: {
     get: jest.fn(),
     getDayStatuses: jest.fn(),
+    getCalendar: jest.fn(),
+  },
+  dailyStatusesApi: {
+    update: jest.fn(),
   },
 }));
 
@@ -98,6 +102,8 @@ beforeEach(() => {
   useSearchParams.mockReturnValue(makeSearchParams(FIELD_ID));
   experimentsApi.get.mockResolvedValue(EXPERIMENT);
   experimentsApi.getDayStatuses.mockResolvedValue([]);
+  experimentsApi.getCalendar.mockResolvedValue({ field: FIELD_ID, days: {} });
+  dailyStatusesApi.update.mockResolvedValue({});
 });
 
 // ── Loading & error states ────────────────────────────────────────────────────
@@ -420,4 +426,214 @@ describe('API calls', () => {
       expect(experimentsApi.get).toHaveBeenCalledWith(EXP_ID)
     );
   });
+
+  it('calls getCalendar with experiment id and selected field for day navigation', async () => {
+    render(<ExperimentDayView />);
+    await waitFor(() =>
+      expect(experimentsApi.getCalendar).toHaveBeenCalledWith(EXP_ID, FIELD_ID)
+    );
+  });
+});
+
+// ── Inline cell editing ───────────────────────────────────────────────────────
+
+describe('inline cell editing', () => {
+  const STATUS_ID = 'status-a1000000-0000-0000-0000-000000000001';
+
+  beforeEach(() => {
+    experimentsApi.getDayStatuses.mockResolvedValue([
+      makeStatus('a1000000-0000-0000-0000-000000000001', {
+        custom_fields: { [FIELD_ID]: '325' },
+        vitals: 'HR 72',
+      }),
+    ]);
+    dailyStatusesApi.update.mockResolvedValue(
+      makeStatus('a1000000-0000-0000-0000-000000000001', {
+        custom_fields: { [FIELD_ID]: '330' },
+        vitals: 'HR 72',
+      })
+    );
+  });
+
+  it('shows an input when a cell value is clicked', async () => {
+    render(<ExperimentDayView />);
+    await waitFor(() => screen.getByText('325'));
+    fireEvent.click(screen.getByText('325'));
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('shows an input when a dash (empty cell) is clicked', async () => {
+    render(<ExperimentDayView />);
+    await waitFor(() => screen.getByText('Rat A'));
+    // Vitals is shown as "HR 72" but weight is selected, click on a dash cell in vitals column
+    // After the status above vitals = 'HR 72' (not empty), let's use a status without vitals
+    experimentsApi.getDayStatuses.mockResolvedValue([
+      makeStatus('a1000000-0000-0000-0000-000000000001', {
+        custom_fields: { [FIELD_ID]: '325' },
+        vitals: null,
+      }),
+    ]);
+    // Re-render
+    const { unmount } = render(<ExperimentDayView />);
+    await waitFor(() => screen.getAllByText('Rat A'));
+    const dashCell = screen.getAllByText('—')[0];
+    fireEvent.click(dashCell);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    unmount();
+  });
+
+  it('saves a custom field value on Enter key', async () => {
+    render(<ExperimentDayView />);
+    await waitFor(() => screen.getByText('325'));
+    fireEvent.click(screen.getByText('325'));
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: '330' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+    await waitFor(() =>
+      expect(dailyStatusesApi.update).toHaveBeenCalledWith(
+        STATUS_ID,
+        expect.objectContaining({ custom_fields: expect.objectContaining({ [FIELD_ID]: '330' }) })
+      )
+    );
+  });
+
+  it('saves on blur', async () => {
+    render(<ExperimentDayView />);
+    await waitFor(() => screen.getByText('325'));
+    fireEvent.click(screen.getByText('325'));
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: '328' } });
+    fireEvent.blur(input);
+    await waitFor(() =>
+      expect(dailyStatusesApi.update).toHaveBeenCalledWith(
+        STATUS_ID,
+        expect.objectContaining({ custom_fields: expect.objectContaining({ [FIELD_ID]: '328' }) })
+      )
+    );
+  });
+
+  it('cancels edit on Escape without saving', async () => {
+    render(<ExperimentDayView />);
+    await waitFor(() => screen.getByText('325'));
+    fireEvent.click(screen.getByText('325'));
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: '999' } });
+    fireEvent.keyDown(input, { key: 'Escape' });
+    expect(dailyStatusesApi.update).not.toHaveBeenCalled();
+    await waitFor(() => expect(screen.queryByRole('textbox')).not.toBeInTheDocument());
+  });
+
+  it('skips the API call when the value is unchanged', async () => {
+    render(<ExperimentDayView />);
+    await waitFor(() => screen.getByText('325'));
+    fireEvent.click(screen.getByText('325'));
+    const input = screen.getByRole('textbox');
+    // value unchanged — blur without editing
+    fireEvent.blur(input);
+    expect(dailyStatusesApi.update).not.toHaveBeenCalled();
+  });
+
+  it('saves a builtin field (vitals) with the field key as payload key', async () => {
+    render(<ExperimentDayView />);
+    await waitFor(() => screen.getByText('HR 72'));
+    fireEvent.click(screen.getByText('HR 72'));
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: 'HR 80' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+    await waitFor(() =>
+      expect(dailyStatusesApi.update).toHaveBeenCalledWith(
+        STATUS_ID,
+        expect.objectContaining({ vitals: 'HR 80' })
+      )
+    );
+    // custom_fields must NOT be in the payload for a builtin field
+    const payload = dailyStatusesApi.update.mock.calls[0][1];
+    expect(payload).not.toHaveProperty('custom_fields');
+  });
+});
+
+// ── Prev / next day navigation ────────────────────────────────────────────────
+
+describe('prev/next day navigation', () => {
+  it('shows no navigation buttons when there are no other days', async () => {
+    experimentsApi.getCalendar.mockResolvedValue({
+      field: FIELD_ID,
+      days: { [DATE_STR]: 2 },
+    });
+    render(<ExperimentDayView />);
+    await waitFor(() => expect(experimentsApi.getCalendar).toHaveBeenCalled());
+    expect(screen.queryByText(/← April/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/April.*→/)).not.toBeInTheDocument();
+  });
+
+  it('shows a previous day button when an earlier day has data', async () => {
+    experimentsApi.getCalendar.mockResolvedValue({
+      field: FIELD_ID,
+      days: { '2026-04-22': 1, [DATE_STR]: 2 },
+    });
+    render(<ExperimentDayView />);
+    await waitFor(() => screen.getByText(/April 22, 2026/));
+    expect(screen.getByText(/← April 22, 2026/)).toBeInTheDocument();
+  });
+
+  it('shows a next day button when a later day has data', async () => {
+    experimentsApi.getCalendar.mockResolvedValue({
+      field: FIELD_ID,
+      days: { [DATE_STR]: 2, '2026-04-24': 1 },
+    });
+    render(<ExperimentDayView />);
+    await waitFor(() => screen.getByText(/April 24, 2026/));
+    expect(screen.getByText(/April 24, 2026 →/)).toBeInTheDocument();
+  });
+
+  it('shows both prev and next buttons when surrounded by days with data', async () => {
+    experimentsApi.getCalendar.mockResolvedValue({
+      field: FIELD_ID,
+      days: { '2026-04-21': 1, [DATE_STR]: 2, '2026-04-25': 3 },
+    });
+    render(<ExperimentDayView />);
+    await waitFor(() => screen.getByText(/April 21, 2026/));
+    expect(screen.getByText(/← April 21, 2026/)).toBeInTheDocument();
+    expect(screen.getByText(/April 25, 2026 →/)).toBeInTheDocument();
+  });
+
+  it('navigates to the previous day with the field param preserved', async () => {
+    experimentsApi.getCalendar.mockResolvedValue({
+      field: FIELD_ID,
+      days: { '2026-04-22': 1, [DATE_STR]: 2 },
+    });
+    render(<ExperimentDayView />);
+    await waitFor(() => screen.getByText(/← April 22, 2026/));
+    fireEvent.click(screen.getByText(/← April 22, 2026/));
+    expect(mockNavigate).toHaveBeenCalledWith(
+      `/experiments/${EXP_ID}/day/2026-04-22?field=${FIELD_ID}`
+    );
+  });
+
+  it('navigates to the next day with the field param preserved', async () => {
+    experimentsApi.getCalendar.mockResolvedValue({
+      field: FIELD_ID,
+      days: { [DATE_STR]: 2, '2026-04-24': 1 },
+    });
+    render(<ExperimentDayView />);
+    await waitFor(() => screen.getByText(/April 24, 2026 →/));
+    fireEvent.click(screen.getByText(/April 24, 2026 →/));
+    expect(mockNavigate).toHaveBeenCalledWith(
+      `/experiments/${EXP_ID}/day/2026-04-24?field=${FIELD_ID}`
+    );
+  });
+
+  it('only shows adjacent days, not all days (prev is immediately before in sorted list)', async () => {
+    experimentsApi.getCalendar.mockResolvedValue({
+      field: FIELD_ID,
+      days: { '2026-04-10': 1, '2026-04-20': 2, [DATE_STR]: 3, '2026-04-30': 1 },
+    });
+    render(<ExperimentDayView />);
+    await waitFor(() => screen.getByText(/April 20, 2026/));
+    // Prev should be April 20 (immediately before), not April 10
+    expect(screen.getByText(/← April 20, 2026/)).toBeInTheDocument();
+    expect(screen.queryByText(/April 10/)).not.toBeInTheDocument();
+    // Next should be April 30 (immediately after)
+    expect(screen.getByText(/April 30, 2026 →/)).toBeInTheDocument();
+  });
 });