From 9b3d52d89b9665332ab1e22053d9fdbcb7f164ca Mon Sep 17 00:00:00 2001
From: Experiments DB Dev <dev@experiments-db.local>
Date: Sun, 19 Jul 2026 13:59:48 -0400
Subject: [PATCH] fix(export): default group-by to None when unset/stale;
 polish

Final code review of the configurable-data-export feature: ExperimentDetail
was forwarding its on-page groupField state (defaults to '__name__') into
ExportDataModal, leaking a clustering default into the default (untouched)
export. Now passes the raw saved localStorage value, defaulting to
'__none__'. The modal also now validates the incoming groupField against
'__none__'/'__name__'/'__id__'/active subjectTemplate fields and coerces to
'__none__' otherwise, guarding against stale/deleted subject_info fields.
Plus a stale module comment fix and optional-chaining consistency fix in
listSubjectMembers.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/components/ExportDataModal.jsx |  6 +-
 frontend/src/lib/dataExport.js              |  6 +-
 frontend/src/pages/ExperimentDetail.jsx     |  2 +-
 frontend/tests/ExportDataModal.test.jsx     | 72 +++++++++++++++++++++
 frontend/tests/dataExport.test.js           | 19 ++++++
 5 files changed, 101 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ExportDataModal.jsx b/frontend/src/components/ExportDataModal.jsx
index d676521..d8cc000 100644
--- a/frontend/src/components/ExportDataModal.jsx
+++ b/frontend/src/components/ExportDataModal.jsx
@@ -31,7 +31,11 @@ export default function ExportDataModal({
   const [rowDim, setRowDim] = useState('date');
   const [colDim, setColDim] = useState('subject');
   const [pinnedId, setPinnedId] = useState(null);
-  const [groupBy, setGroupBy] = useState(groupField ?? '__none__');
+  const [groupBy, setGroupBy] = useState(() => {
+    const valid = groupField === '__none__' || groupField === '__name__' || groupField === '__id__'
+      || subjectTemplate.some((f) => f.active && f.fieldId === groupField);
+    return valid ? groupField : '__none__';
+  });
 
   useEffect(() => {
     let alive = true;
diff --git a/frontend/src/lib/dataExport.js b/frontend/src/lib/dataExport.js
index 173db8a..a44c268 100644
--- a/frontend/src/lib/dataExport.js
+++ b/frontend/src/lib/dataExport.js
@@ -1,4 +1,6 @@
-// Pure helpers for exporting daily-parameter data as a date×subject CSV matrix.
+// Pure helpers for exporting daily-parameter data as a CSV matrix. buildMatrix is
+// dimension-agnostic: rows and columns are assignable to Date/Subject/Parameter,
+// with the leftover dimension pinned to a single value.
 // No React, no I/O — mirrors the crossSubjectChart.js pure-helper pattern.
 
 // Read a single parameter's raw value from one daily status.
@@ -112,7 +114,7 @@ export function listSubjectMembers(animals, groupField) {
   const members = list.map((a) => {
     const name = a?.animal_name ?? '';
     const label = nameCounts.get(name) > 1 ? `${name} (${a?.animal_id_string ?? ''})` : name;
-    return { id: a.id, label, animalId: a.id, group: subjectGroupValue(a, groupField) };
+    return { id: a?.id, label, animalId: a?.id, group: subjectGroupValue(a, groupField) };
   });
   const grouped = !!groupField && groupField !== '__none__';
   members.sort((x, y) => {
diff --git a/frontend/src/pages/ExperimentDetail.jsx b/frontend/src/pages/ExperimentDetail.jsx
index 11a1183..76f8503 100644
--- a/frontend/src/pages/ExperimentDetail.jsx
+++ b/frontend/src/pages/ExperimentDetail.jsx
@@ -417,7 +417,7 @@ export default function ExperimentDetail() {
           dailyTemplate={dailyTemplate}
           animals={animals}
           subjectTemplate={subjectTemplate}
-          groupField={groupField}
+          groupField={localStorage.getItem(`exp-subject-group-${id}`) ?? '__none__'}
           onClose={() => setShowExport(false)}
         />
       </Modal>
diff --git a/frontend/tests/ExportDataModal.test.jsx b/frontend/tests/ExportDataModal.test.jsx
index f8924a9..7c866c9 100644
--- a/frontend/tests/ExportDataModal.test.jsx
+++ b/frontend/tests/ExportDataModal.test.jsx
@@ -22,6 +22,44 @@ beforeEach(() => {
   client.experimentsApi.getDailyStatuses.mockResolvedValue(statuses);
 });
 
+// Intercepts the Blob passed to URL.createObjectURL during handleExport so tests
+// can inspect the actual CSV text produced, rather than inferring it from the
+// <select>'s DOM value (which can be misleading — see the coercion test below).
+// Also stubs anchor .click() — jsdom treats a real click on an <a href="blob:...">
+// as a navigation attempt, which it doesn't implement; that throws asynchronously
+// (after the test has moved on) and can flakily fail an unrelated later test.
+function mockDownload() {
+  let blob = null;
+  const origCreate = global.URL.createObjectURL;
+  const origRevoke = global.URL.revokeObjectURL;
+  const origClick = window.HTMLAnchorElement.prototype.click;
+  global.URL.createObjectURL = jest.fn((b) => { blob = b; return 'blob:mock'; });
+  global.URL.revokeObjectURL = jest.fn();
+  window.HTMLAnchorElement.prototype.click = jest.fn();
+  return {
+    getBlob: () => blob,
+    // handleExport schedules `setTimeout(() => URL.revokeObjectURL(url), 0)`; flush
+    // that pending macrotask before unmocking, or it fires after restore() has put
+    // back the (non-existent, in jsdom) original revokeObjectURL and throws async —
+    // an error jest attributes to whatever test happens to run next.
+    restore: async () => {
+      await new Promise((r) => setTimeout(r, 0));
+      global.URL.createObjectURL = origCreate;
+      global.URL.revokeObjectURL = origRevoke;
+      window.HTMLAnchorElement.prototype.click = origClick;
+    },
+  };
+}
+
+function readBlobText(blob) {
+  return new Promise((resolve, reject) => {
+    const fr = new FileReader();
+    fr.onload = () => resolve(fr.result);
+    fr.onerror = reject;
+    fr.readAsText(blob);
+  });
+}
+
 function renderModal(props = {}) {
   return render(
     <ExportDataModal
@@ -61,4 +99,38 @@ describe('ExportDataModal', () => {
     fireEvent.change(rows, { target: { value: 'subject' } }); // collides with column=subject
     await waitFor(() => expect(screen.getByLabelText('Columns')).not.toHaveValue('subject'));
   });
+
+  it('defaults Group by to None when groupField is __none__, and the exported CSV has no Group row (Issue-1 regression guard: default export reproduces today\'s export)', async () => {
+    const dl = mockDownload();
+    renderModal({ groupField: '__none__' });
+    await screen.findByLabelText('Rows');
+    expect(screen.getByLabelText('Group by')).toHaveValue('__none__');
+    await waitFor(() => expect(screen.getByText(/1 date/i)).toBeInTheDocument());
+    fireEvent.click(screen.getByText('Export CSV'));
+    const text = await readBlobText(dl.getBlob());
+    expect(text).not.toMatch(/^Group,/m);
+    await dl.restore();
+  });
+
+  it('defaults Group by to the saved field when it is a valid active subject field', async () => {
+    renderModal({ groupField: 'grp' });
+    await screen.findByLabelText('Rows');
+    expect(screen.getByLabelText('Group by')).toHaveValue('grp');
+  });
+
+  it('coerces Group by to None when the saved field no longer exists in subjectTemplate, so the export carries no stray Group row (Issue-2 guard)', async () => {
+    // Note: asserting the <select>'s DOM .value here would be misleading — React's
+    // controlled <select> falls back to selecting the first <option> ("__none__")
+    // whenever the given value matches no option, regardless of whether the
+    // component actually validated/coerced its internal state. So we assert the
+    // real behavioral effect (the exported CSV) instead.
+    const dl = mockDownload();
+    renderModal({ groupField: 'ghost-field' });
+    await screen.findByLabelText('Rows');
+    await waitFor(() => expect(screen.getByText(/1 date/i)).toBeInTheDocument());
+    fireEvent.click(screen.getByText('Export CSV'));
+    const text = await readBlobText(dl.getBlob());
+    expect(text).not.toMatch(/^Group,/m);
+    await dl.restore();
+  });
 });
diff --git a/frontend/tests/dataExport.test.js b/frontend/tests/dataExport.test.js
index 0402b32..88d43bf 100644
--- a/frontend/tests/dataExport.test.js
+++ b/frontend/tests/dataExport.test.js
@@ -136,6 +136,25 @@ describe('buildMatrix', () => {
       { statuses: gStatuses, animals: gAnimals, dailyTemplate });
     expect(m.columns.map((c) => c.label)).not.toContain('X');
   });
+
+  it('neither axis is Subject: drops a blank date row and a blank parameter column together', () => {
+    // Subject is pinned (rowDim=date, colDim=parameter). Both drop-blank filters engage:
+    // 07-02 has no data at all (row dropped), and the custom field X never has data (column dropped).
+    const dailyTemplate = [{ fieldId: 'c-x', key: 'x', label: 'X', builtin: false, active: true }];
+    const statuses = [
+      { animal_id: 'a1', date: '2026-07-01T00:00:00.000Z', analysis_summary: { total: 5, success_rate: 0.5 } },
+      { animal_id: 'a1', date: '2026-07-02T00:00:00.000Z', analysis_summary: null },
+    ];
+    const subjectMember = { id: 'a1', label: 'Alpha', animalId: 'a1' };
+    const m = buildMatrix(
+      { rowDim: 'date', colDim: 'parameter', pinnedMember: subjectMember, groupField: '__none__' },
+      { statuses, animals: gAnimals, dailyTemplate },
+    );
+    expect(m.groupAxis).toBeNull();
+    expect(m.rows.map((r) => r.member.label)).toEqual(['2026-07-01']);
+    expect(m.columns.map((c) => c.label)).not.toContain('X');
+    expect(m.columns.map((c) => c.label)).toEqual(['Total attempts', 'Success rate']);
+  });
 });
 
 import { toCSV, csvFilename } from '../src/lib/dataExport';