feat(frontend): subject sidebar, legend toggle/highlight, ordered tooltip on cross-subject plot

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-01 09:37:31 -04:00
parent 7b34c2fa52
commit 839d05f449
2 changed files with 117 additions and 9 deletions
@@ -0,0 +1,61 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+// recharts uses ResizeObserver (absent in jsdom); stub all used pieces as passthroughs.
+// Coverage boundary: with recharts mocked out, these tests cover only the sidebar
+// integration path (toggle, checkbox state, persistence). The legend onClick/hover
+// wiring, line hide/strokeWidth, and tooltip ordering are exercised by the pure-helper
+// unit tests (crossSubjectChart.test.js) and SubjectSidebar.test.jsx.
+jest.mock('recharts', () => {
+  const Pass = ({ children }) => <div>{children}</div>;
+  return {
+    ResponsiveContainer: Pass, LineChart: Pass, Line: () => null,
+    XAxis: () => null, YAxis: () => null, CartesianGrid: () => null,
+    Tooltip: () => null, Legend: () => null,
+  };
+});
+
+import { ExperimentAnalysisCharts } from '../src/components/AnalysisCharts';
+
+const ANIMALS = [
+  { id: 'a1', animal_name: 'Mouse-A1', subject_info: { grp: 'Group A' } },
+  { id: 'b1', animal_name: 'Mouse-B1', subject_info: { grp: 'Group B' } },
+];
+const STATUSES = [
+  { animal_id: 'a1', date: '2026-01-01', analysis_summary: { total: 10, success_rate: 0.5, counts: { Success: 5 } } },
+  { animal_id: 'b1', date: '2026-01-01', analysis_summary: { total: 8, success_rate: 0.25, counts: { Success: 2 } } },
+];
+const SUBJECT_TEMPLATE = [{ fieldId: 'grp', label: 'Group', active: true }];
+const DAILY_TEMPLATE = [];
+
+function renderChart() {
+  render(
+    <ExperimentAnalysisCharts
+      animals={ANIMALS}
+      experimentStatuses={STATUSES}
+      subjectTemplate={SUBJECT_TEMPLATE}
+      dailyTemplate={DAILY_TEMPLATE}
+    />,
+  );
+}
+
+it('toggles the subject sidebar open and closed', () => {
+  renderChart();
+  expect(screen.queryByText('Subjects')).toBeNull();
+  fireEvent.click(screen.getByText('▸ Subjects'));
+  expect(screen.getByText('Subjects')).toBeInTheDocument();
+  expect(screen.getByLabelText('Mouse-A1')).toBeInTheDocument();
+  expect(screen.getByLabelText('Mouse-B1')).toBeInTheDocument();
+  fireEvent.click(screen.getByText('◂ Subjects'));
+  expect(screen.queryByText('Subjects')).toBeNull();
+});
+
+it('unchecking a subject in the sidebar persists across re-render', () => {
+  renderChart();
+  fireEvent.click(screen.getByText('▸ Subjects'));
+  const cb = screen.getByLabelText('Mouse-A1');
+  expect(cb.checked).toBe(true);
+  fireEvent.click(cb);
+  expect(screen.getByLabelText('Mouse-A1').checked).toBe(false);
+  expect(screen.getByText('Show all')).toBeInTheDocument();
+});