Add Race Hub analytics visuals

frontend/src/components/PositionEvolutionView.tsx

@@ -1,20 +1,22 @@
-import type { EnrichedResult, EnrichedGrid } from '../types'
+import type { EnrichedResult, EnrichedGrid, PositionSample, Lap } from '../types'
 import { gridDelta, gridDeltaClass } from '../utils'
 
 interface Props {
   results: EnrichedResult[]
   grid: EnrichedGrid[]
+  positions: PositionSample[]
+  laps: Lap[]
   hasPositions: boolean
 }
 
-export function PositionEvolutionView({ results, grid, hasPositions }: Props) {
+export function PositionEvolutionView({ results, grid, positions, laps: _laps, hasPositions }: Props) {
   if (!hasPositions) {
     return (
       <div>
         <div className="analysis-notice">
-          <strong>Lap-by-lap positions not available.</strong> The backend does not
-          yet expose position samples in <code>/api/v1/race-hub</code>. Evolution
-          charts require per-driver position per lap.
+          <strong>Lap-by-lap positions not available.</strong> This session does not
+          have ingested position samples in <code>/api/v1/race-hub</code>. Evolution
+          charts require per-driver position samples over time.
         </div>
 
         {results.length > 0 && grid.length > 0 && (
@@ -73,8 +75,165 @@ export function PositionEvolutionView({ results, grid, hasPositions }: Props) {
     )
   }
 
-  // Placeholder for when position samples are available
+  // Build time-indexed position series per driver
+  const allTimes = [...new Set(positions.map((p) => p.date))].sort()
+
+  if (allTimes.length === 0) {
+    return <div className="missing-notice">No position samples in this dataset.</div>
+  }
+
+  const tMin = new Date(allTimes[0]).getTime()
+  const tMax = new Date(allTimes[allTimes.length - 1]).getTime()
+  const tRange = Math.max(tMax - tMin, 1)
+
+  const byDriver = new Map<number, Array<{ t: number; pos: number }>>()
+  for (const p of positions) {
+    if (!byDriver.has(p.driver_number)) byDriver.set(p.driver_number, [])
+    byDriver.get(p.driver_number)!.push({
+      t: (new Date(p.date).getTime() - tMin) / tRange,
+      pos: p.position,
+    })
+  }
+  for (const samples of byDriver.values()) {
+    samples.sort((a, b) => a.t - b.t)
+  }
+
+  const maxPos = Math.max(...positions.map((p) => p.position), results.length, 2)
+  const colorByDriver = new Map(results.map((r) => [r.driver_number, r.team_colour]))
+  const acronymByDriver = new Map(results.map((r) => [r.driver_number, r.name_acronym]))
+
+  const W = 640
+  const H = 180
+  const PL = 40
+  const PR = 48 // right margin for driver labels
+  const PT = 8
+  const PB = 8
+  const plotW = W - PL - PR
+  const plotH = H - PT - PB
+
+  const toX = (t: number) => PL + t * plotW
+  const toY = (pos: number) => PT + ((pos - 1) / Math.max(maxPos - 1, 1)) * plotH
+
   return (
-    <div className="missing-notice">Position evolution chart: not yet implemented.</div>
+    <div data-testid="position-chart">
+      <div className="scroll-x">
+        <svg
+          viewBox={`0 0 ${W} ${H}`}
+          style={{ width: '100%', minWidth: 280, maxWidth: W, display: 'block' }}
+          role="img"
+          aria-label="Position evolution chart"
+        >
+          {/* Horizontal grid lines + P# labels */}
+          {Array.from({ length: maxPos }, (_, i) => i + 1).map((pos) => (
+            <g key={pos}>
+              <line
+                x1={PL}
+                x2={W - PR}
+                y1={toY(pos)}
+                y2={toY(pos)}
+                stroke="var(--border)"
+                strokeWidth={0.5}
+              />
+              <text
+                x={PL - 4}
+                y={toY(pos) + 4}
+                textAnchor="end"
+                fill="var(--text-3)"
+                fontSize={8}
+                fontFamily="var(--f-mono)"
+              >
+                P{pos}
+              </text>
+            </g>
+          ))}
+
+          {/* Driver lines */}
+          {Array.from(byDriver.entries()).map(([dNum, samples]) => {
+            const colour = colorByDriver.get(dNum)
+            const color = colour ? `#${colour}` : '#888'
+            const pts = samples.map((s) => `${toX(s.t)},${toY(s.pos)}`).join(' ')
+            const last = samples[samples.length - 1]
+
+            return (
+              <g key={dNum}>
+                <polyline
+                  points={pts}
+                  fill="none"
+                  stroke={color}
+                  strokeWidth={2}
+                  strokeLinejoin="round"
+                  strokeLinecap="round"
+                />
+                {samples.map((s, i) => (
+                  <circle key={i} cx={toX(s.t)} cy={toY(s.pos)} r={3} fill={color} />
+                ))}
+                {last && (
+                  <text
+                    x={toX(last.t) + 6}
+                    y={toY(last.pos) + 4}
+                    fill={color}
+                    fontSize={9}
+                    fontFamily="var(--f-mono)"
+                    fontWeight={700}
+                  >
+                    {acronymByDriver.get(dNum) ?? dNum}
+                  </text>
+                )}
+              </g>
+            )
+          })}
+        </svg>
+      </div>
+
+      {/* Grid → Finish table below chart for context */}
+      {results.length > 0 && grid.length > 0 && (
+        <>
+          <div className="sec-header" style={{ marginTop: 'var(--s5)' }}>
+            <span className="sec-title">Grid → Finish</span>
+            <span className="sec-meta">net positions</span>
+          </div>
+          <table className="data-table" style={{ maxWidth: 360 }}>
+            <thead>
+              <tr>
+                <th>Driver</th>
+                <th className="c">Grid</th>
+                <th className="c">Finish</th>
+                <th className="r">Δ</th>
+              </tr>
+            </thead>
+            <tbody>
+              {results.map((r) => {
+                const gridPos =
+                  grid.find((g) => g.driver_number === r.driver_number)?.position ?? 0
+                return (
+                  <tr key={r.driver_number}>
+                    <td>
+                      <span
+                        style={{
+                          fontFamily: 'var(--f-mono)',
+                          fontWeight: 700,
+                          color: r.team_colour ? `#${r.team_colour}` : 'var(--text)',
+                        }}
+                      >
+                        {r.name_acronym || r.driver_number}
+                      </span>
+                    </td>
+                    <td className="c mono" style={{ color: 'var(--text-3)' }}>
+                      {gridPos || '—'}
+                    </td>
+                    <td className="c mono">{r.position}</td>
+                    <td className="r">
+                      <span className={gridDeltaClass(r.position, gridPos)}>
+                        {gridDelta(r.position, gridPos)}
+                      </span>
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </>
+      )}
+    </div>
   )
 }

frontend/src/components/StrategyView.tsx

@@ -1,16 +1,41 @@
-import type { EnrichedResult } from '../types'
+import type { EnrichedResult, Stint, PitStop } from '../types'
+
+const COMPOUND_COLORS: Record<string, string> = {
+  SOFT: '#e8002d',
+  MEDIUM: '#ffd600',
+  HARD: '#e8e8e4',
+  INTERMEDIATE: '#39b54a',
+  WET: '#0067ff',
+}
+
+function compoundColor(c: string): string {
+  return COMPOUND_COLORS[c.toUpperCase()] ?? '#666'
+}
+
+function compoundInitial(c: string): string {
+  const abbr: Record<string, string> = {
+    SOFT: 'S',
+    MEDIUM: 'M',
+    HARD: 'H',
+    INTERMEDIATE: 'I',
+    WET: 'W',
+  }
+  return abbr[c.toUpperCase()] ?? c[0] ?? '?'
+}
 
 interface Props {
   results: EnrichedResult[]
+  stints: Stint[]
+  pit_stops: PitStop[]
   hasStints: boolean
 }
 
-export function StrategyView({ results, hasStints }: Props) {
+export function StrategyView({ results, stints, pit_stops, hasStints }: Props) {
   if (!hasStints) {
     return (
       <div>
         <div className="analysis-notice">
-          <strong>Stints not available.</strong> The backend does not yet expose
+          <strong>Stints not available.</strong> This session does not have ingested
           tyre compound and stint ranges in <code>/api/v1/race-hub</code>. Strategy
           charts require per-driver stints: compound, lap_start, lap_end.
         </div>
@@ -59,8 +84,148 @@ export function StrategyView({ results, hasStints }: Props) {
     )
   }
 
-  // Placeholder for when stints data is available
+  const sortedDrivers = [...results].sort((a, b) => a.position - b.position)
+  const totalLaps = Math.max(
+    ...stints.map((s) => s.lap_end),
+    ...results.map((r) => r.number_of_laps),
+    1
+  )
+
+  const SVG_W = 640
+  const LEFT = 48
+  const RIGHT = 12
+  const ROW_H = 28
+  const BAR_H = 14
+  const BAR_Y = 7
+  const BAR_W = SVG_W - LEFT - RIGHT
+  const SVG_H = sortedDrivers.length * ROW_H + 8
+
+  const lapX = (lap: number) => LEFT + ((lap - 1) / totalLaps) * BAR_W
+  const stintW = (s: Stint) =>
+    Math.max(2, ((s.lap_end - s.lap_start + 1) / totalLaps) * BAR_W)
+
+  const usedCompounds = [...new Set(stints.map((s) => s.compound.toUpperCase()))].filter(
+    (c) => c in COMPOUND_COLORS
+  )
+
   return (
-    <div className="missing-notice">Strategy chart: not yet implemented.</div>
+    <div data-testid="strategy-chart">
+      <div className="scroll-x">
+        <svg
+          viewBox={`0 0 ${SVG_W} ${SVG_H}`}
+          style={{ width: '100%', minWidth: 280, maxWidth: SVG_W, display: 'block' }}
+          role="img"
+          aria-label="Race strategy stint chart"
+        >
+          {sortedDrivers.map((driver, i) => {
+            const rowY = i * ROW_H
+            const color = driver.team_colour ? `#${driver.team_colour}` : '#888'
+            const dStints = stints.filter((s) => s.driver_number === driver.driver_number)
+            const dPits = pit_stops.filter((p) => p.driver_number === driver.driver_number)
+
+            return (
+              <g key={driver.driver_number} transform={`translate(0,${rowY})`}>
+                <text
+                  x={LEFT - 5}
+                  y={BAR_Y + BAR_H / 2 + 4}
+                  textAnchor="end"
+                  fill={color}
+                  fontFamily="var(--f-mono)"
+                  fontWeight={700}
+                  fontSize={10}
+                >
+                  {driver.name_acronym}
+                </text>
+
+                {dStints.map((stint, si) => {
+                  const x = lapX(stint.lap_start)
+                  const w = stintW(stint)
+                  const fill = compoundColor(stint.compound)
+                  return (
+                    <g key={si}>
+                      <rect x={x} y={BAR_Y} width={w} height={BAR_H} fill={fill} rx={1.5} />
+                      {w > 18 && (
+                        <text
+                          x={x + w / 2}
+                          y={BAR_Y + BAR_H / 2 + 4}
+                          textAnchor="middle"
+                          fill="#111"
+                          fontFamily="var(--f-mono)"
+                          fontWeight={700}
+                          fontSize={8}
+                        >
+                          {compoundInitial(stint.compound)}
+                        </text>
+                      )}
+                    </g>
+                  )
+                })}
+
+                {dPits.map((pit, pi) => {
+                  const x = lapX(pit.lap_number)
+                  return (
+                    <line
+                      key={pi}
+                      x1={x}
+                      x2={x}
+                      y1={BAR_Y - 3}
+                      y2={BAR_Y + BAR_H + 3}
+                      stroke="var(--text)"
+                      strokeWidth={1.5}
+                      opacity={0.7}
+                    />
+                  )
+                })}
+              </g>
+            )
+          })}
+        </svg>
+      </div>
+
+      <div
+        style={{
+          display: 'flex',
+          gap: 'var(--s4)',
+          flexWrap: 'wrap',
+          marginTop: 'var(--s4)',
+          fontSize: 11,
+          color: 'var(--text-3)',
+          alignItems: 'center',
+        }}
+      >
+        {usedCompounds.map((c) => (
+          <span key={c} style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+            <span
+              style={{
+                width: 10,
+                height: 10,
+                background: COMPOUND_COLORS[c],
+                borderRadius: 2,
+                display: 'inline-block',
+                border: c === 'HARD' ? '1px solid #555' : undefined,
+              }}
+            />
+            {c.charAt(0) + c.slice(1).toLowerCase()}
+          </span>
+        ))}
+        {pit_stops.length > 0 && (
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, marginLeft: 4 }}>
+            <span
+              style={{
+                width: 1,
+                height: 12,
+                background: 'var(--text)',
+                display: 'inline-block',
+                opacity: 0.7,
+              }}
+            />
+            Pit stop
+          </span>
+        )}
+        <span style={{ marginLeft: 'auto', fontFamily: 'var(--f-mono)', fontSize: 10 }}>
+          {totalLaps} laps
+        </span>
+      </div>
+    </div>
   )
 }

frontend/src/pages/RaceHubPage.tsx

@@ -123,6 +123,8 @@ export function RaceHubPage({ sessionKey }: Props) {
               </div>
               <StrategyView
                 results={data.results}
+                stints={data.stints}
+                pit_stops={data.pit_stops}
                 hasStints={data.datasets['stints']?.status === 'available'}
               />
             </div>
@@ -136,6 +138,8 @@ export function RaceHubPage({ sessionKey }: Props) {
               <PositionEvolutionView
                 results={data.results}
                 grid={data.starting_grid}
+                positions={data.positions}
+                laps={data.laps}
                 hasPositions={data.datasets['positions']?.status === 'available'}
               />
             </div>

frontend/src/test/PositionEvolutionView.test.tsx

@@ -0,0 +1,200 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { PositionEvolutionView } from '../components/PositionEvolutionView'
+import type { EnrichedResult, EnrichedGrid, PositionSample, Lap } from '../types'
+
+const results: EnrichedResult[] = [
+  {
+    driver_number: 1,
+    position: 1,
+    name_acronym: 'VER',
+    full_name: 'Max Verstappen',
+    team_name: 'Red Bull Racing',
+    team_colour: '3671C6',
+    dnf: false,
+    dns: false,
+    dsq: false,
+    duration: null,
+    gap_to_leader: null,
+    number_of_laps: 78,
+    points: 25,
+    session_key: 9472,
+    meeting_key: 1229,
+  },
+  {
+    driver_number: 44,
+    position: 2,
+    name_acronym: 'HAM',
+    full_name: 'Lewis Hamilton',
+    team_name: 'Ferrari',
+    team_colour: 'E8002D',
+    dnf: false,
+    dns: false,
+    dsq: false,
+    duration: null,
+    gap_to_leader: 5.1,
+    number_of_laps: 78,
+    points: 18,
+    session_key: 9472,
+    meeting_key: 1229,
+  },
+]
+
+const grid: EnrichedGrid[] = [
+  {
+    driver_number: 1,
+    position: 1,
+    name_acronym: 'VER',
+    full_name: 'Max Verstappen',
+    team_name: 'Red Bull Racing',
+    team_colour: '3671C6',
+    session_key: 9472,
+    meeting_key: 1229,
+    lap_duration: 71.234,
+  },
+  {
+    driver_number: 44,
+    position: 2,
+    name_acronym: 'HAM',
+    full_name: 'Lewis Hamilton',
+    team_name: 'Ferrari',
+    team_colour: 'E8002D',
+    session_key: 9472,
+    meeting_key: 1229,
+    lap_duration: 71.456,
+  },
+]
+
+const positions: PositionSample[] = [
+  {
+    session_key: 9472,
+    driver_number: 1,
+    meeting_key: 1229,
+    date: '2025-05-25T13:05:00+00:00',
+    position: 1,
+  },
+  {
+    session_key: 9472,
+    driver_number: 1,
+    meeting_key: 1229,
+    date: '2025-05-25T13:10:00+00:00',
+    position: 1,
+  },
+  {
+    session_key: 9472,
+    driver_number: 44,
+    meeting_key: 1229,
+    date: '2025-05-25T13:05:00+00:00',
+    position: 2,
+  },
+]
+
+const laps: Lap[] = [
+  {
+    session_key: 9472,
+    driver_number: 1,
+    meeting_key: 1229,
+    lap_number: 1,
+    date_start: '2025-05-25T13:00:00+00:00',
+    lap_duration: 75.1,
+    is_pit_out_lap: false,
+  },
+]
+
+describe('PositionEvolutionView — positions available', () => {
+  it('renders the position chart container', () => {
+    const { container } = render(
+      <PositionEvolutionView
+        results={results}
+        grid={grid}
+        positions={positions}
+        laps={laps}
+        hasPositions={true}
+      />
+    )
+    expect(container.querySelector('[data-testid="position-chart"]')).toBeInTheDocument()
+  })
+
+  it('renders an SVG chart', () => {
+    const { container } = render(
+      <PositionEvolutionView
+        results={results}
+        grid={grid}
+        positions={positions}
+        laps={laps}
+        hasPositions={true}
+      />
+    )
+    expect(container.querySelector('svg')).toBeInTheDocument()
+    expect(container.querySelectorAll('polyline').length).toBeGreaterThan(0)
+  })
+
+  it('does not show the missing-data notice', () => {
+    render(
+      <PositionEvolutionView
+        results={results}
+        grid={grid}
+        positions={positions}
+        laps={laps}
+        hasPositions={true}
+      />
+    )
+    expect(screen.queryByText(/Lap-by-lap positions not available/i)).not.toBeInTheDocument()
+  })
+
+  it('renders Grid → Finish table below chart', () => {
+    render(
+      <PositionEvolutionView
+        results={results}
+        grid={grid}
+        positions={positions}
+        laps={laps}
+        hasPositions={true}
+      />
+    )
+    expect(screen.getByText('Grid → Finish')).toBeInTheDocument()
+  })
+})
+
+describe('PositionEvolutionView — positions missing', () => {
+  it('shows the missing-data notice', () => {
+    render(
+      <PositionEvolutionView
+        results={results}
+        grid={grid}
+        positions={[]}
+        laps={[]}
+        hasPositions={false}
+      />
+    )
+    expect(screen.getByText(/Lap-by-lap positions not available/i)).toBeInTheDocument()
+  })
+
+  it('falls back to grid → finish table when both results and grid exist', () => {
+    render(
+      <PositionEvolutionView
+        results={results}
+        grid={grid}
+        positions={[]}
+        laps={[]}
+        hasPositions={false}
+      />
+    )
+    expect(screen.getByText('Grid → Finish')).toBeInTheDocument()
+    expect(screen.getByText('VER')).toBeInTheDocument()
+    expect(screen.getByText('HAM')).toBeInTheDocument()
+  })
+
+  it('does not render the position chart', () => {
+    const { container } = render(
+      <PositionEvolutionView
+        results={results}
+        grid={grid}
+        positions={[]}
+        laps={[]}
+        hasPositions={false}
+      />
+    )
+    expect(container.querySelector('[data-testid="position-chart"]')).not.toBeInTheDocument()
+  })
+})

frontend/src/test/StrategyView.test.tsx

@@ -0,0 +1,134 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { StrategyView } from '../components/StrategyView'
+import type { EnrichedResult, Stint, PitStop } from '../types'
+
+const results: EnrichedResult[] = [
+  {
+    driver_number: 1,
+    position: 1,
+    name_acronym: 'VER',
+    full_name: 'Max Verstappen',
+    team_name: 'Red Bull Racing',
+    team_colour: '3671C6',
+    dnf: false,
+    dns: false,
+    dsq: false,
+    duration: null,
+    gap_to_leader: null,
+    number_of_laps: 78,
+    points: 25,
+    session_key: 9472,
+    meeting_key: 1229,
+  },
+  {
+    driver_number: 44,
+    position: 2,
+    name_acronym: 'HAM',
+    full_name: 'Lewis Hamilton',
+    team_name: 'Ferrari',
+    team_colour: 'E8002D',
+    dnf: false,
+    dns: false,
+    dsq: false,
+    duration: null,
+    gap_to_leader: 5.1,
+    number_of_laps: 78,
+    points: 18,
+    session_key: 9472,
+    meeting_key: 1229,
+  },
+]
+
+const stints: Stint[] = [
+  {
+    session_key: 9472,
+    driver_number: 1,
+    meeting_key: 1229,
+    stint_number: 1,
+    compound: 'MEDIUM',
+    lap_start: 1,
+    lap_end: 30,
+    tyre_age_at_start: 0,
+  },
+  {
+    session_key: 9472,
+    driver_number: 44,
+    meeting_key: 1229,
+    stint_number: 1,
+    compound: 'SOFT',
+    lap_start: 1,
+    lap_end: 18,
+    tyre_age_at_start: 0,
+  },
+]
+
+const pitStops: PitStop[] = [
+  {
+    session_key: 9472,
+    driver_number: 44,
+    meeting_key: 1229,
+    lap_number: 19,
+    date: '2025-05-25T14:00:00+00:00',
+    pit_duration: 2.4,
+    lane_duration: 0,
+    stop_duration: 2.4,
+  },
+]
+
+describe('StrategyView — stints available', () => {
+  it('renders the strategy chart container', () => {
+    const { container } = render(
+      <StrategyView results={results} stints={stints} pit_stops={pitStops} hasStints={true} />
+    )
+    expect(container.querySelector('[data-testid="strategy-chart"]')).toBeInTheDocument()
+  })
+
+  it('renders driver acronyms as SVG text', () => {
+    render(
+      <StrategyView results={results} stints={stints} pit_stops={pitStops} hasStints={true} />
+    )
+    expect(screen.getByText('VER')).toBeInTheDocument()
+    expect(screen.getByText('HAM')).toBeInTheDocument()
+  })
+
+  it('renders an SVG stint chart', () => {
+    const { container } = render(
+      <StrategyView results={results} stints={stints} pit_stops={pitStops} hasStints={true} />
+    )
+    expect(container.querySelector('svg')).toBeInTheDocument()
+    expect(container.querySelectorAll('rect').length).toBeGreaterThan(0)
+  })
+
+  it('does not show the stints-unavailable notice', () => {
+    render(
+      <StrategyView results={results} stints={stints} pit_stops={pitStops} hasStints={true} />
+    )
+    expect(screen.queryByText(/Stints not available/i)).not.toBeInTheDocument()
+  })
+})
+
+describe('StrategyView — stints missing', () => {
+  it('shows the missing-data notice', () => {
+    render(
+      <StrategyView results={results} stints={[]} pit_stops={[]} hasStints={false} />
+    )
+    expect(screen.getByText(/Stints not available/i)).toBeInTheDocument()
+  })
+
+  it('falls back to laps-completed table', () => {
+    render(
+      <StrategyView results={results} stints={[]} pit_stops={[]} hasStints={false} />
+    )
+    expect(screen.getByText('VER')).toBeInTheDocument()
+    expect(screen.getByText('HAM')).toBeInTheDocument()
+    expect(screen.getAllByText('78').length).toBe(2)
+  })
+
+  it('does not render the strategy chart', () => {
+    const { container } = render(
+      <StrategyView results={results} stints={[]} pit_stops={[]} hasStints={false} />
+    )
+    expect(container.querySelector('[data-testid="strategy-chart"]')).not.toBeInTheDocument()
+  })
+})