# Subject-Series Data Export Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Replace the export modal's assignable-axes UI with three pickers — X field (rows), Data value (cells), and Group by — where columns are always the subjects, matching the cross-subject metrics plot.

**Architecture:** Add X-coordinate helpers to `dataExport.js` (`numericFieldVal`, `listSampleMembers`, `buildSampleIndex`) and a focused `buildSubjectSeriesMatrix` that emits the existing `toCSV` shape. Rewrite `ExportDataModal.jsx` to the three pickers. Then delete the now-dead assignable-axes machinery.

**Tech Stack:** React 18, plain ES modules, Jest + `@testing-library/react` (jsdom). No new dependencies.

**Spec:** `docs/superpowers/specs/2026-07-19-subject-series-export-design.md`

## Global Constraints

- `dataExport.js` stays pure: no React, no I/O.
- Cell value semantics: `0` and `''` are **real** values; only genuinely-missing lookups render blank (`''`), via the existing `hasValue` + `extractValue`.
- CSV: LF (`\n`) line endings; escape every cell via the existing `escapeCsvCell`.
- **X = `Date`** → rows are distinct `YYYY-MM-DD` dates, sorted.
- **X = `# Days Reach`** (`'__days__'`) → rows are `1, 2, 3, …`; the max over subjects of that subject's count of recorded statuses (a status must have `animal_id` and `date`). A cell for `(subject, N)` reads the subject's Nth recorded day, counting **all** records sorted ascending by date (per-status ordinal, Day 1 = earliest).
- **X = daily field** (its `fieldId`) → rows are the distinct **numeric** values (`numericFieldVal`), sorted ascending; non-numeric excluded. A cell for `(subject, v)` reads that subject's first status (by date) whose field equals `v`.
- Columns are **always** the subjects (`listSubjectMembers`), clustered by group then name. Entirely-blank sample rows are dropped; subject columns are always kept.
- Group by defaults to the saved field (`groupField` prop), validated against `__none__`/`__name__`/`__id__`/active `subjectTemplate` fields; coerced to `__none__` when unset or stale.
- CSV: line 1 is `Data,<metric label>`; blank line; a `Group,…` row only when grouping (missing group → `—`); header `= <X label>,<subject headers…>`; data rows `= <X value>,<values…>`. Filename via existing `csvFilename(title, dataLabel)`.
- Default X = `Date`; default Data = first parameter (`Total attempts`).
- Run tests from `frontend/`: `npx jest tests/dataExport.test.js`, `npx jest tests/ExportDataModal.test.jsx`, full `npm test`.
- Two suites (`tests/ExperimentCalendar.test.jsx`, `tests/ExperimentDayView.test.jsx`, 31 tests) fail for a PRE-EXISTING, unrelated reason and must be left as-is; changes must introduce no new failures.

---

### Task 1: X-coordinate helpers

**Files:**
- Modify: `frontend/src/lib/dataExport.js` (add three exports; keep everything else for now)
- Test: `frontend/tests/dataExport.test.js`

**Interfaces:**
- Consumes: existing private `dateKey(date)`.
- Produces:
  - `numericFieldVal(status, field): number|null` — `field.builtin ? status[field.key] : status.custom_fields[field.fieldId]`, `parseFloat`, non-numeric → null.
  - `listSampleMembers(statuses, xField, dailyTemplate): Array<{ id, label, sampleValue }>` — row members for the chosen X (`xField` is `'__date__'`, `'__days__'`, or a daily `fieldId`).
  - `buildSampleIndex(statuses, xField, dailyTemplate): Map<animalId, Map<sampleValue, status>>` — first status per `(subject, sampleValue)` wins, per-subject date-ordered.

- [ ] **Step 1: Write the failing tests**

Append to `frontend/tests/dataExport.test.js`:

```js
import { numericFieldVal, listSampleMembers, buildSampleIndex } from '../src/lib/dataExport';

const sDaily = [{ fieldId: 'c-w', key: 'w', label: 'Weight', builtin: false, active: true }];
const sStatuses = [
  { animal_id: 'a1', date: '2026-07-01T00:00:00Z', custom_fields: { 'c-w': '250' } },
  { animal_id: 'a1', date: '2026-07-03T00:00:00Z', custom_fields: { 'c-w': '260' } },
  { animal_id: 'a2', date: '2026-07-01T00:00:00Z', custom_fields: { 'c-w': '250' } },
];

describe('numericFieldVal', () => {
  it('reads builtin via key and custom via fieldId, parsed to number', () => {
    expect(numericFieldVal({ weight: '250' }, { builtin: true, key: 'weight' })).toBe(250);
    expect(numericFieldVal({ custom_fields: { 'c-w': '12.5' } }, { builtin: false, fieldId: 'c-w' })).toBe(12.5);
  });
  it('returns null for non-numeric, missing, or no field', () => {
    expect(numericFieldVal({ custom_fields: { 'c-w': 'abc' } }, { builtin: false, fieldId: 'c-w' })).toBeNull();
    expect(numericFieldVal({}, { builtin: true, key: 'weight' })).toBeNull();
    expect(numericFieldVal({ weight: 1 }, null)).toBeNull();
  });
});

describe('listSampleMembers', () => {
  it('date: distinct dates sorted', () => {
    expect(listSampleMembers(sStatuses, '__date__', sDaily).map((m) => m.sampleValue)).toEqual(['2026-07-01', '2026-07-03']);
  });
  it('# days reach: 1..max records per subject', () => {
    expect(listSampleMembers(sStatuses, '__days__', sDaily).map((m) => m.sampleValue)).toEqual([1, 2]);
  });
  it('daily field: distinct numeric values sorted ascending', () => {
    expect(listSampleMembers(sStatuses, 'c-w', sDaily).map((m) => m.sampleValue)).toEqual([250, 260]);
  });
});

describe('buildSampleIndex', () => {
  it('date coord maps animalId -> dateKey -> status', () => {
    const idx = buildSampleIndex(sStatuses, '__date__', sDaily);
    expect(idx.get('a1').get('2026-07-03').date).toContain('2026-07-03');
  });
  it('# days reach assigns per-subject ordinals in date order', () => {
    const idx = buildSampleIndex(sStatuses, '__days__', sDaily);
    expect(idx.get('a1').get(1).date).toContain('2026-07-01');
    expect(idx.get('a1').get(2).date).toContain('2026-07-03');
    expect(idx.get('a2').get(1).date).toContain('2026-07-01');
    expect(idx.get('a2').has(2)).toBe(false);
  });
  it('daily field maps numeric value to first status by date', () => {
    const idx = buildSampleIndex(sStatuses, 'c-w', sDaily);
    expect(idx.get('a1').get(250).date).toContain('2026-07-01');
    expect(idx.get('a1').get(260).date).toContain('2026-07-03');
  });
});
```

- [ ] **Step 2: Run tests to verify they fail**

Run: `npx jest tests/dataExport.test.js -t "listSampleMembers"`
Expected: FAIL — `listSampleMembers is not defined`.

- [ ] **Step 3: Write minimal implementation**

Add to `frontend/src/lib/dataExport.js` (after `listExportableParams`, before the private `hasValue`/`dateKey` — note `dateKey` is defined lower in the file but hoisted as a function declaration, so referencing it here is fine):

```js
// Numeric value of a daily field on one status (mirrors the metrics plot's helper).
export function numericFieldVal(status, field) {
  if (!field) return null;
  const raw = field.builtin ? status?.[field.key] : status?.custom_fields?.[field.fieldId];
  const n = parseFloat(raw);
  return Number.isNaN(n) ? null : n;
}

// Ordered row members for the chosen X coordinate.
// xField: '__date__' | '__days__' | <daily fieldId>
export function listSampleMembers(statuses, xField, dailyTemplate) {
  const list = statuses ?? [];
  if (xField === '__date__') {
    const keys = new Set();
    for (const s of list) if (s?.date) keys.add(dateKey(s.date));
    return [...keys].sort().map((k) => ({ id: k, label: k, sampleValue: k }));
  }
  if (xField === '__days__') {
    const counts = new Map();
    for (const s of list) {
      if (s?.animal_id == null || !s?.date) continue;
      counts.set(s.animal_id, (counts.get(s.animal_id) ?? 0) + 1);
    }
    const max = counts.size ? Math.max(...counts.values()) : 0;
    return Array.from({ length: max }, (_, i) => ({ id: String(i + 1), label: String(i + 1), sampleValue: i + 1 }));
  }
  const field = (dailyTemplate ?? []).find((f) => f.fieldId === xField);
  const vals = new Set();
  for (const s of list) {
    const v = numericFieldVal(s, field);
    if (v !== null) vals.add(v);
  }
  return [...vals].sort((a, b) => a - b).map((v) => ({ id: String(v), label: String(v), sampleValue: v }));
}

// animalId -> Map(sampleValue -> status). First status per (subject, sampleValue) wins,
// scanning each subject's statuses in ascending date order.
export function buildSampleIndex(statuses, xField, dailyTemplate) {
  const bySubject = new Map();
  for (const s of statuses ?? []) {
    if (s?.animal_id == null || !s?.date) continue;
    if (!bySubject.has(s.animal_id)) bySubject.set(s.animal_id, []);
    bySubject.get(s.animal_id).push(s);
  }
  const field = xField !== '__date__' && xField !== '__days__'
    ? (dailyTemplate ?? []).find((f) => f.fieldId === xField)
    : null;

  const index = new Map();
  for (const [animalId, subjStatuses] of bySubject) {
    const ordered = [...subjStatuses].sort((a, b) => dateKey(a.date).localeCompare(dateKey(b.date)));
    const m = new Map();
    ordered.forEach((s, i) => {
      let key;
      if (xField === '__date__') key = dateKey(s.date);
      else if (xField === '__days__') key = i + 1;
      else { const v = numericFieldVal(s, field); if (v === null) return; key = v; }
      if (!m.has(key)) m.set(key, s);
    });
    index.set(animalId, m);
  }
  return index;
}
```

- [ ] **Step 4: Run tests to verify they pass**

Run: `npx jest tests/dataExport.test.js`
Expected: PASS (new suites green; all pre-existing suites still green).

- [ ] **Step 5: Commit**

```bash
git add frontend/src/lib/dataExport.js frontend/tests/dataExport.test.js
git commit -m "feat(export): X-coordinate helpers (date, # days reach, daily field)"
```

---

### Task 2: buildSubjectSeriesMatrix

**Files:**
- Modify: `frontend/src/lib/dataExport.js` (add `buildSubjectSeriesMatrix` + private `xFieldLabel`)
- Test: `frontend/tests/dataExport.test.js`

**Interfaces:**
- Consumes: `listSubjectMembers`, `listSampleMembers`, `buildSampleIndex`, `extractValue`, private `hasValue`.
- Produces: `buildSubjectSeriesMatrix({ xField, dataParam, groupField }, { statuses, animals, dailyTemplate })` → `{ corner, context: { label: 'Data', value }, groupAxis: 'col'|null, columns: [{ id, label, animalId, group }], rows: [{ member: { id, label, sampleValue }, values: [value|''] }] }` — the same shape the existing `toCSV` consumes (`groupAxis: 'col'` triggers its group-row branch).

- [ ] **Step 1: Write the failing tests**

Append to `frontend/tests/dataExport.test.js`:

```js
import { buildSubjectSeriesMatrix } from '../src/lib/dataExport';

const ssAnimals = [
  { id: 'a1', animal_name: 'Alpha', animal_id_string: 'R-001', subject_info: { grp: 'Control' } },
  { id: 'a2', animal_name: 'Beta', animal_id_string: 'R-002', subject_info: { grp: 'Drug' } },
];
const ssStatuses = [
  { animal_id: 'a1', date: '2026-07-01T00:00:00Z', analysis_summary: { total: 5 } },
  { animal_id: 'a1', date: '2026-07-02T00:00:00Z', analysis_summary: { total: 7 } },
  { animal_id: 'a2', date: '2026-07-01T00:00:00Z', analysis_summary: { total: 9 } },
];
const totalParam = { id: '__total__', label: 'Total attempts', kind: 'total', group: 'metrics' };

describe('buildSubjectSeriesMatrix', () => {
  it('date X: subjects as columns, date rows, blank where missing, context names the metric', () => {
    const m = buildSubjectSeriesMatrix(
      { xField: '__date__', dataParam: totalParam, groupField: '__none__' },
      { statuses: ssStatuses, animals: ssAnimals, dailyTemplate: [] },
    );
    expect(m.corner).toBe('Date');
    expect(m.context).toEqual({ label: 'Data', value: 'Total attempts' });
    expect(m.groupAxis).toBeNull();
    expect(m.columns.map((c) => c.label)).toEqual(['Alpha', 'Beta']);
    expect(m.rows.map((r) => r.member.label)).toEqual(['2026-07-01', '2026-07-02']);
    expect(m.rows[0].values).toEqual([5, 9]);
    expect(m.rows[1].values).toEqual([7, '']);
  });
  it('# days reach X: rows align each subject by day ordinal', () => {
    const m = buildSubjectSeriesMatrix(
      { xField: '__days__', dataParam: totalParam, groupField: '__none__' },
      { statuses: ssStatuses, animals: ssAnimals, dailyTemplate: [] },
    );
    expect(m.corner).toBe('# Days Reach');
    expect(m.rows.map((r) => r.member.label)).toEqual(['1', '2']);
    expect(m.rows[0].values).toEqual([5, 9]);
    expect(m.rows[1].values).toEqual([7, '']);
  });
  it('grouping sets groupAxis col and clusters subjects', () => {
    const m = buildSubjectSeriesMatrix(
      { xField: '__date__', dataParam: totalParam, groupField: 'grp' },
      { statuses: ssStatuses, animals: ssAnimals, dailyTemplate: [] },
    );
    expect(m.groupAxis).toBe('col');
    expect(m.columns.map((c) => [c.group, c.label])).toEqual([['Control', 'Alpha'], ['Drug', 'Beta']]);
  });
  it('drops entirely-blank rows', () => {
    const statuses = [
      { animal_id: 'a1', date: '2026-07-01T00:00:00Z', analysis_summary: { total: 5 } },
      { animal_id: 'a1', date: '2026-07-05T00:00:00Z', analysis_summary: null },
    ];
    const m = buildSubjectSeriesMatrix(
      { xField: '__date__', dataParam: totalParam, groupField: '__none__' },
      { statuses, animals: ssAnimals, dailyTemplate: [] },
    );
    expect(m.rows.map((r) => r.member.label)).toEqual(['2026-07-01']);
  });
});
```

- [ ] **Step 2: Run tests to verify they fail**

Run: `npx jest tests/dataExport.test.js -t "buildSubjectSeriesMatrix"`
Expected: FAIL — `buildSubjectSeriesMatrix is not defined`.

- [ ] **Step 3: Write minimal implementation**

Add to `frontend/src/lib/dataExport.js` (after `buildSampleIndex`):

```js
function xFieldLabel(xField, dailyTemplate) {
  if (xField === '__date__') return 'Date';
  if (xField === '__days__') return '# Days Reach';
  return (dailyTemplate ?? []).find((f) => f.fieldId === xField)?.label ?? '';
}

// Subjects as columns, X-field values as rows, one Data value per cell.
// Returns the { context, corner, groupAxis, columns, rows } shape toCSV consumes.
export function buildSubjectSeriesMatrix({ xField, dataParam, groupField }, { statuses, animals, dailyTemplate }) {
  const columns = listSubjectMembers(animals, groupField);
  const rowMembers = listSampleMembers(statuses, xField, dailyTemplate);
  const index = buildSampleIndex(statuses, xField, dailyTemplate);

  const cellValue = (sampleValue, animalId) => {
    const status = index.get(animalId)?.get(sampleValue);
    if (!status || !dataParam) return '';
    const v = extractValue(status, dataParam);
    return hasValue(v) ? v : '';
  };

  let rows = rowMembers.map((rm) => ({
    member: rm,
    values: columns.map((c) => cellValue(rm.sampleValue, c.animalId)),
  }));
  rows = rows.filter((r) => r.values.some((v) => v !== '')); // drop entirely-blank sample rows

  const grouped = !!groupField && groupField !== '__none__';
  return {
    corner: xFieldLabel(xField, dailyTemplate),
    context: { label: 'Data', value: dataParam?.label ?? '' },
    groupAxis: grouped ? 'col' : null,
    columns,
    rows,
  };
}
```

- [ ] **Step 4: Run tests to verify they pass**

Run: `npx jest tests/dataExport.test.js`
Expected: PASS (all suites green).

- [ ] **Step 5: Commit**

```bash
git add frontend/src/lib/dataExport.js frontend/tests/dataExport.test.js
git commit -m "feat(export): buildSubjectSeriesMatrix — subjects as columns over an X field"
```

---

### Task 3: Rewrite ExportDataModal to the three pickers

**Files:**
- Modify: `frontend/src/components/ExportDataModal.jsx` (full body rewrite; keep `triggerDownload`)
- Test: `frontend/tests/ExportDataModal.test.jsx` (rewrite)

**Interfaces:**
- Consumes: `listExportableParams`, `buildSubjectSeriesMatrix`, `toCSV`, `csvFilename` from `../lib/dataExport`; `experimentsApi.getDailyStatuses`.
- Props unchanged: `experimentTitle`, `experimentId`, `dailyTemplate`, `animals`, `subjectTemplate` (default `[]`), `groupField` (default `'__none__'`), `onClose`.
- Produces: modal with three selects — X (rows), Data (cells), Group by.

- [ ] **Step 1: Rewrite the component test**

Replace the entire contents of `frontend/tests/ExportDataModal.test.jsx` with:

```jsx
import React from 'react';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import ExportDataModal from '../src/components/ExportDataModal';
import * as client from '../src/api/client';

jest.mock('../src/api/client', () => ({
  experimentsApi: { getDailyStatuses: jest.fn() },
}));

const animals = [
  { id: 'a1', animal_name: 'Alpha', animal_id_string: 'R-001', subject_info: { grp: 'Control' } },
  { id: 'a2', animal_name: 'Beta', animal_id_string: 'R-002', subject_info: { grp: 'Drug' } },
];
const statuses = [
  { animal_id: 'a1', date: '2026-07-01T00:00:00Z', analysis_summary: { total: 5, success_rate: 0.5 } },
  { animal_id: 'a1', date: '2026-07-02T00:00:00Z', analysis_summary: { total: 7, success_rate: 0.7 } },
  { animal_id: 'a2', date: '2026-07-01T00:00:00Z', analysis_summary: { total: 9, success_rate: 0.9 } },
];
const subjectTemplate = [{ fieldId: 'grp', label: 'Group', active: true }];

beforeEach(() => {
  jest.clearAllMocks();
  client.experimentsApi.getDailyStatuses.mockResolvedValue(statuses);
});

// Intercept the Blob handed to URL.createObjectURL so tests can read the real CSV.
// Also stub anchor.click() — jsdom treats a click on <a href="blob:..."> as an
// unimplemented navigation that throws async and can flake a 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,
    restore: async () => {
      await new Promise((r) => setTimeout(r, 0)); // flush handleExport's setTimeout revoke
      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
      experimentId="exp-1"
      experimentTitle="My Study"
      dailyTemplate={[]}
      animals={animals}
      subjectTemplate={subjectTemplate}
      groupField="__none__"
      onClose={jest.fn()}
      {...props}
    />,
  );
}

describe('ExportDataModal', () => {
  it('renders X / Data / Group by pickers; X defaults to Date', async () => {
    renderModal();
    expect(await screen.findByLabelText('X axis (rows)')).toHaveValue('__date__');
    expect(screen.getByLabelText('Data (cells)')).toBeInTheDocument();
    expect(screen.getByLabelText('Group by')).toHaveValue('__none__');
    await waitFor(() => expect(screen.getByText(/2 rows × 2 subjects/i)).toBeInTheDocument());
  });

  it('default export (X=Date, Data=Total attempts) has subject columns, date rows, blank where missing', async () => {
    const dl = mockDownload();
    renderModal();
    await screen.findByLabelText('X axis (rows)');
    await waitFor(() => expect(screen.getByText(/2 rows/i)).toBeInTheDocument());
    fireEvent.click(screen.getByText('Export CSV'));
    const text = await readBlobText(dl.getBlob());
    expect(text).toBe('Data,Total attempts\n\nDate,Alpha,Beta\n2026-07-01,5,9\n2026-07-02,7,');
    await dl.restore();
  });

  it('switching X to # Days Reach makes rows the day ordinals', async () => {
    const dl = mockDownload();
    renderModal();
    fireEvent.change(await screen.findByLabelText('X axis (rows)'), { target: { value: '__days__' } });
    await waitFor(() => expect(screen.getByText(/2 rows/i)).toBeInTheDocument());
    fireEvent.click(screen.getByText('Export CSV'));
    const text = await readBlobText(dl.getBlob());
    expect(text).toBe('Data,Total attempts\n\n# Days Reach,Alpha,Beta\n1,5,9\n2,7,');
    await dl.restore();
  });

  it('a valid group field adds a Group row and clusters subjects', async () => {
    const dl = mockDownload();
    renderModal({ groupField: 'grp' });
    await screen.findByLabelText('X axis (rows)');
    await waitFor(() => expect(screen.getByText(/2 rows/i)).toBeInTheDocument());
    fireEvent.click(screen.getByText('Export CSV'));
    const text = await readBlobText(dl.getBlob());
    expect(text).toMatch(/^Group,Control,Drug$/m);
    await dl.restore();
  });
});
```

- [ ] **Step 2: Run the test to verify it fails**

Run: `npx jest tests/ExportDataModal.test.jsx`
Expected: FAIL — old modal has no `X axis (rows)` / `Data (cells)` labels.

- [ ] **Step 3: Rewrite the component**

Replace the entire contents of `frontend/src/components/ExportDataModal.jsx` with:

```jsx
import React, { useEffect, useMemo, useState } from 'react';
import { experimentsApi } from '../api/client';
import Button from './ui/Button';
import Alert from './ui/Alert';
import { listExportableParams, buildSubjectSeriesMatrix, toCSV, csvFilename } from '../lib/dataExport';

const PARAM_GROUP_LABELS = { metrics: 'Session metrics', daily: 'Daily record fields' };

function triggerDownload(filename, text) {
  const blob = new Blob([text], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  setTimeout(() => URL.revokeObjectURL(url), 0);
}

export default function ExportDataModal({
  experimentTitle, experimentId, dailyTemplate, animals, subjectTemplate = [], groupField = '__none__', onClose,
}) {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [statuses, setStatuses] = useState([]);

  const [xField, setXField] = useState('__date__');
  const [dataId, setDataId] = useState(null);
  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;
    setLoading(true);
    setError(null);
    experimentsApi.getDailyStatuses(experimentId, {})
      .then((data) => { if (alive) setStatuses(data); })
      .catch((err) => { if (alive) setError(err.message); })
      .finally(() => { if (alive) setLoading(false); });
    return () => { alive = false; };
  }, [experimentId]);

  const params = useMemo(() => listExportableParams(dailyTemplate, statuses), [dailyTemplate, statuses]);
  const effDataId = dataId ?? params[0]?.id ?? null;
  const dataParam = params.find((p) => p.id === effDataId) ?? params[0] ?? null;

  const activeDaily = useMemo(() => (dailyTemplate ?? []).filter((f) => f.active), [dailyTemplate]);
  const xOptions = useMemo(() => [
    { id: '__date__', label: 'Date' },
    { id: '__days__', label: '# Days Reach' },
    ...activeDaily.map((f) => ({ id: f.fieldId, label: f.label })),
  ], [activeDaily]);

  const matrix = useMemo(
    () => (dataParam
      ? buildSubjectSeriesMatrix({ xField, dataParam, groupField: groupBy }, { statuses, animals, dailyTemplate })
      : { columns: [], rows: [], context: { label: 'Data', value: '' }, corner: '', groupAxis: null }),
    [xField, dataParam, groupBy, statuses, animals, dailyTemplate],
  );
  const hasData = matrix.rows.length > 0;

  const groupedParams = useMemo(() => {
    const out = [];
    for (const p of params) {
      let g = out.find((x) => x.group === p.group);
      if (!g) { g = { group: p.group, items: [] }; out.push(g); }
      g.items.push(p);
    }
    return out;
  }, [params]);

  function handleExport() {
    if (!hasData || !dataParam) return;
    triggerDownload(csvFilename(experimentTitle, dataParam.label), toCSV(matrix));
    onClose();
  }

  if (loading) return <p className="text-sm text-gray-400" aria-live="polite">Loading data…</p>;
  if (error) return (
    <div className="space-y-4">
      <Alert type="error" message={error} />
      <div className="flex justify-end"><Button variant="secondary" onClick={onClose}>Close</Button></div>
    </div>
  );

  const selectCls = 'w-full border border-gray-200 rounded px-2 py-1.5 text-sm bg-white focus:outline-none focus:ring-1 focus:ring-indigo-400';

  return (
    <div className="space-y-4">
      <p className="text-sm text-gray-500">
        One value per subject over an X axis — each column is a subject, each row an X value. Blank where a subject has no value.
      </p>

      <div>
        <label htmlFor="export-x" className="block text-xs font-medium text-gray-500 mb-1">X axis (rows)</label>
        <select id="export-x" value={xField} onChange={(e) => setXField(e.target.value)} className={selectCls}>
          {xOptions.map((o) => <option key={o.id} value={o.id}>{o.label}</option>)}
        </select>
      </div>

      <div>
        <label htmlFor="export-data" className="block text-xs font-medium text-gray-500 mb-1">Data (cells)</label>
        <select id="export-data" value={effDataId ?? ''} onChange={(e) => setDataId(e.target.value)} className={selectCls}>
          {groupedParams.map((g) => (
            <optgroup key={g.group} label={PARAM_GROUP_LABELS[g.group] ?? g.group}>
              {g.items.map((p) => <option key={p.id} value={p.id}>{p.label}</option>)}
            </optgroup>
          ))}
        </select>
      </div>

      <div>
        <label htmlFor="export-group" className="block text-xs font-medium text-gray-500 mb-1">Group by</label>
        <select id="export-group" value={groupBy} onChange={(e) => setGroupBy(e.target.value)} className={selectCls}>
          <option value="__none__">— None —</option>
          <option value="__name__">Name</option>
          <option value="__id__">Subject ID</option>
          {subjectTemplate.filter((f) => f.active).map((f) => (
            <option key={f.fieldId} value={f.fieldId}>{f.label}</option>
          ))}
        </select>
      </div>

      <p className="text-xs text-gray-400">
        {hasData
          ? `${matrix.rows.length} row${matrix.rows.length !== 1 ? 's' : ''} × ${matrix.columns.length} subject${matrix.columns.length !== 1 ? 's' : ''}`
          : 'No data for this selection yet.'}
      </p>

      <div className="flex justify-end gap-2 pt-2">
        <Button variant="secondary" onClick={onClose}>Cancel</Button>
        <Button onClick={handleExport} disabled={!hasData}>Export CSV</Button>
      </div>
    </div>
  );
}
```

- [ ] **Step 4: Run the test to verify it passes**

Run: `npx jest tests/ExportDataModal.test.jsx`
Expected: PASS (all four cases).

- [ ] **Step 5: Run the full suite**

Run: `npm test`
Expected: `dataExport` + `ExportDataModal` green; only the two known pre-existing suites fail; no new failures.

- [ ] **Step 6: Commit**

```bash
git add frontend/src/components/ExportDataModal.jsx frontend/tests/ExportDataModal.test.jsx
git commit -m "feat(export): modal becomes X / Data / Group by pickers, subjects as columns"
```

---

### Task 4: Remove the dead assignable-axes code

**Files:**
- Modify: `frontend/src/lib/dataExport.js` (delete unused exports)
- Test: `frontend/tests/dataExport.test.js` (delete their describe blocks + imports)

**Interfaces:**
- Removes (now unused after Task 3): `EXPORT_DIMENSIONS`, `dimLabel`, `otherDimension`, `listDateMembers`, `buildStatusIndex`, `listParameterMembers`, `listDimensionMembers`, and `buildMatrix`.
- Keeps: `extractValue`, `listExportableParams`, `subjectGroupValue`, `listSubjectMembers`, `numericFieldVal`, `listSampleMembers`, `buildSampleIndex`, `buildSubjectSeriesMatrix`, `toCSV`, `csvFilename`, and the private `hasValue`, `dateKey`, `escapeCsvCell`, `xFieldLabel`.

- [ ] **Step 1: Delete the dead source exports**

In `frontend/src/lib/dataExport.js`, delete these eight exported definitions entirely (they are only used by each other and the old modal, now replaced): `EXPORT_DIMENSIONS`, `dimLabel`, `otherDimension`, `listDateMembers`, `buildStatusIndex`, `listParameterMembers`, `listDimensionMembers`, `buildMatrix`. Also update the top-of-file comment to describe the subject-series export (drop the "dimension-agnostic buildMatrix" wording). Keep `dateKey`, `hasValue`, `escapeCsvCell`, and everything listed under "Keeps" above.

- [ ] **Step 2: Delete their tests**

In `frontend/tests/dataExport.test.js`, delete the describe blocks and their now-unused import identifiers for the removed functions: the `describe('dimension primitives', …)`, `describe('subjectGroupValue', …)` KEEP (subjectGroupValue is kept — do NOT delete it), `describe('listDateMembers', …)`, `describe('buildStatusIndex', …)`, `describe('listParameterMembers / listDimensionMembers', …)`, and `describe('buildMatrix', …)` blocks. Remove `EXPORT_DIMENSIONS`, `dimLabel`, `otherDimension`, `listDateMembers`, `buildStatusIndex`, `listDimensionMembers`, `listParameterMembers`, and `buildMatrix` from the file's `import` statements, leaving the imports for kept functions (`extractValue`, `listExportableParams`, `subjectGroupValue`, `listSubjectMembers`, `numericFieldVal`, `listSampleMembers`, `buildSampleIndex`, `buildSubjectSeriesMatrix`, `toCSV`, `csvFilename`).

- [ ] **Step 3: Verify nothing references the removed names**

Run: `grep -rnE "buildMatrix|EXPORT_DIMENSIONS|listDimensionMembers|buildStatusIndex|listDateMembers|listParameterMembers|otherDimension|dimLabel" frontend/src frontend/tests`
Expected: no output (all references gone).

- [ ] **Step 4: Run the suites**

Run: `npx jest tests/dataExport.test.js tests/ExportDataModal.test.jsx`
Expected: PASS. Then `npm test` — only the two known pre-existing suites fail, no new failures.

- [ ] **Step 5: Commit**

```bash
git add frontend/src/lib/dataExport.js frontend/tests/dataExport.test.js
git commit -m "refactor(export): remove dead assignable-axes helpers and their tests"
```

---

## Self-Review Notes

- **Spec coverage:** three pickers (Task 3) · X = Date/# Days Reach/daily field with the exact semantics (Tasks 1–2) · subjects always columns, clustered by group, blank rows dropped (Task 2) · Group by validated/defaulted (Task 3) · CSV `Data,<metric>` + group row + X-corner (Tasks 2–3, reusing `toCSV`) · assignable-axes UI/machinery removed (Tasks 3–4). All covered.
- **Type consistency:** sample member `{ id, label, sampleValue }`, subject column `{ id, label, animalId, group }`, and matrix `{ context, corner, groupAxis, columns, rows }` are used identically across Tasks 1–3 and match the existing `toCSV`.
- **Out of scope (per spec):** assignable columns/pinned, subject subsetting, analyzed-only day counting, footer/repeat line.