Integrate uniform timeline with replay controls

Author: JackWilb

src/analysis/individualStudy/replay/SingleTask.tsx

@@ -20,22 +20,24 @@ const ICON_GAP = 2;
 
 function taskFill({
   incomplete,
-  hasCorrect,
-  isCorrect,
+  answerStatus,
 }: {
   incomplete: boolean,
-  hasCorrect: boolean,
-  isCorrect: boolean,
+  answerStatus: ComponentAnswerStatus | null,
 }) {
   if (incomplete) {
     return '#e9ecef';
   }
 
-  if (!hasCorrect) {
-    return 'lightgray';
+  if (answerStatus === 'correct') {
+    return '#bfe8c6';
+  }
+
+  if (answerStatus === 'incorrect') {
+    return '#f3c1c1';
   }
 
-  return isCorrect ? '#bfe8c6' : '#f3c1c1';
+  return 'lightgray';
 }
 
 export function SingleTask({
@@ -114,7 +116,7 @@ export function SingleTask({
     >
       <rect
         opacity={isDimmed ? 0.45 : 1}
-        fill={taskFill({ incomplete, hasCorrect, isCorrect })}
+        fill={taskFill({ incomplete, answerStatus })}
         stroke={isHovered ? 'cornflowerblue' : undefined}
         strokeWidth={isHovered ? 3 : 0}
         x={xScale(scaleStart) + TASK_GAP}

src/analysis/individualStudy/replay/tests/AllTasksTimeline.spec.tsx

@@ -16,6 +16,7 @@ import { SingleTaskLabelLines } from '../SingleTaskLabelLines';
 // ── mocks ────────────────────────────────────────────────────────────────────
 
 vi.mock('@mantine/core', () => ({
+  Box: ({ children }: { children: ReactNode }) => <div>{children}</div>,
   Center: ({ children }: { children: ReactNode }) => <div>{children}</div>,
   Stack: ({ children }: { children: ReactNode }) => <div>{children}</div>,
   Tooltip: ({ children, label }: { children: ReactNode; label?: ReactNode }) => (
@@ -137,13 +138,15 @@ describe('SingleTask', () => {
       <svg><SingleTask {...baseProps} answerStatus="correct" /></svg>,
     );
     expect(html).toContain('icon-check');
+    expect(html).toContain('fill="#bfe8c6"');
   });
 
   test('shows x icon for an incorrect response', () => {
     const html = renderToStaticMarkup(
       <svg><SingleTask {...baseProps} answerStatus="incorrect" /></svg>,
     );
     expect(html).toContain('icon-x');
+    expect(html).toContain('fill="#f3c1c1"');
   });
 
   test('shows an accessible grey checkmark for an unknown response', () => {
@@ -153,6 +156,7 @@ describe('SingleTask', () => {
     expect(html).toContain('icon-check');
     expect(html).toContain('var(--mantine-color-gray-6)');
     expect(html).toContain('Response recorded; correctness not configured.');
+    expect(html).toContain('fill="lightgray"');
   });
 
   test('shows microphone icon when hasAudio', () => {
@@ -277,6 +281,39 @@ describe('AllTasksTimeline', () => {
     expect(html).toContain('<rect');
   });
 
+  test('uses equal-width task slots and omits browsed-away intervals in uniform mode', () => {
+    const participant = makeParticipant({
+      answers: {
+        trial1_0: makeAnswer({
+          windowEvents: [
+            [t0 + 1_000, 'visibility', 'hidden'],
+            [t0 + 3_000, 'visibility', 'visible'],
+          ],
+        }),
+        trial2_1: makeAnswer({
+          componentName: 'trial2',
+          trialOrder: '1_0',
+          startTime: t0 + 20_000,
+          endTime: t0 + 40_000,
+        }),
+      },
+    });
+
+    const html = renderToStaticMarkup(
+      <AllTasksTimeline
+        participantData={participant}
+        width={600}
+        studyId="test-study"
+        studyConfig={emptyConfig}
+        maxLength={undefined}
+        timelineMode="uniform"
+      />,
+    );
+
+    expect(html).toContain('width:136px');
+    expect(html).not.toContain('Browsed away');
+  });
+
   test('handles all tracked window event types without error', () => {
     const participant = makeParticipant({
       answers: {

src/analysis/individualStudy/table/tests/TableView.spec.tsx

@@ -58,7 +58,9 @@ vi.mock('@tabler/icons-react', () => ({
 }));
 
 vi.mock('../../replay/AllTasksTimeline', () => ({
-  AllTasksTimeline: ({ taskOrder }: { taskOrder: string }) => <div data-task-order={taskOrder}>AllTasksTimeline</div>,
+  AllTasksTimeline: ({ taskOrder, timelineMode }: { taskOrder: string; timelineMode: string }) => (
+    <div data-task-order={taskOrder} data-timeline-mode={timelineMode}>AllTasksTimeline</div>
+  ),
 }));
 
 vi.mock('../../ParticipantRejectModal', () => ({
@@ -142,16 +144,19 @@ describe('TableView', () => {
     expect(html).toContain('Order');
     expect(html).toContain('Sequence');
     expect(html).toContain('Answer time');
+    expect(html).toContain('Time');
+    expect(html).toContain('Uniform');
   });
 
-  test('uses sequence ordering by default for participant timelines', () => {
+  test('uses sequence ordering and time sizing by default for participant timelines', () => {
     const participant = makeParticipant();
     renderToStaticMarkup(
       <TableView {...defaultProps} visibleParticipants={[participant]} />,
     );
 
     const html = renderToStaticMarkup(capturedTableOptions!.renderDetailPanel({ row: { original: participant } }));
     expect(html).toContain('data-task-order="sequence"');
+    expect(html).toContain('data-timeline-mode="time"');
   });
 
   // ── Status column ──────────────────────────────────────────────────────────