@@ -89,147 +70,29 @@ export function StrategyView({ results, stints, pit_stops, hasStints }: Props) {
const cmp = compareFinishPosition(a.position, b.position)
return cmp !== 0 ? cmp : a.driver_number - b.driver_number
})
+
const totalLaps = Math.max(
...stints.map((s) => s.lap_end),
...results.map((r) => r.number_of_laps),
- 1
+ 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
- )
+ const timelineRows: StintTimelineRow[] = sortedDrivers.map((driver) => ({
+ label: driver.name_acronym || String(driver.driver_number),
+ color: driver.team_colour ? `#${driver.team_colour}` : '#888',
+ stints: stints
+ .filter((s) => s.driver_number === driver.driver_number)
+ .map((s) => ({
+ compound: s.compound,
+ lapStart: s.lap_start,
+ lapEnd: s.lap_end,
+ isNew: s.tyre_age_at_start === 0,
+ })),
+ }))
return (
-
-
-
-
-
- {usedCompounds.map((c) => (
-
-
- {c.charAt(0) + c.slice(1).toLowerCase()}
-
- ))}
- {pit_stops.length > 0 && (
-
-
- Pit stop
-
- )}
-
- {totalLaps} laps
-
-
+
)
}
diff --git a/frontend/src/components/charts/DeltaTimeGraph.tsx b/frontend/src/components/charts/DeltaTimeGraph.tsx
new file mode 100644
index 0000000..c4e840f
--- /dev/null
+++ b/frontend/src/components/charts/DeltaTimeGraph.tsx
@@ -0,0 +1,282 @@
+import { useCallback, useMemo, useRef, useState } from 'react'
+import {
+ computeCumulativeDeltas,
+ deltaPolylineSegments,
+ formatDeltaSeconds,
+ type DeltaSeries,
+ type DriverDeltaResult,
+} from '../../lib/delta'
+import '../../styles/delta-graph.css'
+
+export type { DeltaSeries }
+
+export interface DeltaTimeGraphProps {
+ series: DeltaSeries[]
+ referenceLabel?: string
+}
+
+const W = 640
+const H = 220
+const PL = 44
+const PR = 16
+const PT = 12
+const PB = 28
+
+function lapCount(series: ReadonlyArray
): number {
+ return series.reduce((max, s) => Math.max(max, s.lapTimes.length), 0)
+}
+
+function yExtent(drivers: ReadonlyArray): { min: number; max: number } {
+ let min = 0
+ let max = 0
+ for (const driver of drivers) {
+ for (const delta of driver.deltas) {
+ if (delta === null) continue
+ min = Math.min(min, delta)
+ max = Math.max(max, delta)
+ }
+ }
+ if (min === max) {
+ const pad = 1
+ return { min: min - pad, max: max + pad }
+ }
+ const span = max - min
+ const pad = span * 0.08
+ return { min: min - pad, max: max + pad }
+}
+
+function niceYTicks(min: number, max: number): number[] {
+ const span = max - min
+ if (span <= 0) return [0]
+ const rough = span / 4
+ const magnitude = Math.pow(10, Math.floor(Math.log10(rough)))
+ const step = Math.ceil(rough / magnitude) * magnitude
+ const ticks: number[] = []
+ const start = Math.ceil(min / step) * step
+ for (let v = start; v <= max + step * 0.01; v += step) {
+ ticks.push(Number(v.toFixed(6)))
+ }
+ if (!ticks.some((t) => Math.abs(t) < step * 0.01)) {
+ ticks.push(0)
+ ticks.sort((a, b) => a - b)
+ }
+ return ticks
+}
+
+export function DeltaTimeGraph({ series, referenceLabel }: DeltaTimeGraphProps) {
+ const svgRef = useRef(null)
+ const [hoverLap, setHoverLap] = useState(null)
+
+ const drivers = useMemo(
+ () => computeCumulativeDeltas(series, referenceLabel),
+ [series, referenceLabel],
+ )
+
+ const laps = useMemo(() => lapCount(series), [series])
+ const plotW = W - PL - PR
+ const plotH = H - PT - PB
+ const { min: yMin, max: yMax } = useMemo(() => yExtent(drivers), [drivers])
+ const yTicks = useMemo(() => niceYTicks(yMin, yMax), [yMin, yMax])
+
+ const toX = useCallback(
+ (lapIndex: number) => {
+ if (laps <= 1) return PL + plotW / 2
+ return PL + (lapIndex / (laps - 1)) * plotW
+ },
+ [laps, plotW],
+ )
+
+ const toY = useCallback(
+ (delta: number) => {
+ const span = yMax - yMin || 1
+ return PT + ((delta - yMin) / span) * plotH
+ },
+ [yMin, yMax, plotH],
+ )
+
+ const lapTickNumbers = useMemo(() => {
+ const ticks: number[] = []
+ for (let lap = 5; lap <= laps; lap += 5) {
+ ticks.push(lap)
+ }
+ return ticks
+ }, [laps])
+
+ const handlePointerMove = useCallback(
+ (e: React.PointerEvent | React.MouseEvent) => {
+ if (!svgRef.current || laps === 0) return
+ const rect = svgRef.current.getBoundingClientRect()
+ if (rect.width <= 0) return
+ const x = ((e.clientX - rect.left) / rect.width) * W
+ const frac = Math.max(0, Math.min(1, (x - PL) / plotW))
+ const lapIndex = laps <= 1 ? 0 : Math.round(frac * (laps - 1))
+ if (!Number.isFinite(lapIndex)) return
+ setHoverLap(Math.max(0, Math.min(laps - 1, lapIndex)))
+ },
+ [laps, plotW],
+ )
+
+ const handlePointerLeave = useCallback(() => setHoverLap(null), [])
+
+ if (series.length === 0 || laps === 0) {
+ return (
+
+
No lap data to compare.
+
+
Select at least two drivers to compare.
+
+
+
No telemetry data
+ }
+
+ // Clamp a stale hover index in case the series prop shrank between renders.
+ const hover = hoverIndex === null ? null : Math.min(hoverIndex, sampleCount - 1)
+
+ const panelHeight = height
+ const totalHeight = channels.length * panelHeight + (channels.length - 1) * PANEL_GAP
+ const xAt = (i: number) => (i / Math.max(1, sampleCount - 1)) * VIEW_WIDTH
+
+ const channelMax = (channel: TelemetryTraceChannel) => (channel === 'speed' ? speedMax : 100)
+
+ const yAt = (value: number, channel: TelemetryTraceChannel, panelTop: number) => {
+ const usable = panelHeight - PAD_TOP - PAD_BOTTOM
+ const frac = channelValue({ speed: value, throttle: value, brake: value }, channel) / channelMax(channel)
+ return panelTop + PAD_TOP + (1 - frac) * usable
+ }
+
+ const handleMouseMove = (e: React.MouseEvent) => {
+ const rect = svgRef.current?.getBoundingClientRect()
+ if (!rect || rect.width === 0) {
+ setHoverIndex(0)
+ return
+ }
+ const frac = clamp((e.clientX - rect.left) / rect.width, 0, 1)
+ setHoverIndex(clamp(Math.round(frac * (sampleCount - 1)), 0, sampleCount - 1))
+ }
+
+ return (
+
+
+ {series.map((s) => (
+
+
+ {s.label}
+
+ ))}
+
+
+ {hover !== null && (
+
+ Sample {hover}
+ {series.map((s) => (
+
+
+ {s.label}
+ {channels.map((channel) => (
+
+ {formatValue(channelValue(s.samples[hover], channel), channel)}
+
+ ))}
+
+ ))}
+
+ )}
+
+
No stint data to display.
+
+
+
+
+
+
+ {usedCompounds.map((compound) => (
+
+
+ {compoundLabel(compound)}
+
+ ))}
+ {safeTotal} laps
+
+
+ Team Radio
+ {captures.length > 0 && {captures.length} clips}
+
+
+
+ )
+}
diff --git a/frontend/src/lib/delta.ts b/frontend/src/lib/delta.ts
new file mode 100644
index 0000000..eb8fc64
--- /dev/null
+++ b/frontend/src/lib/delta.ts
@@ -0,0 +1,112 @@
+// Cumulative lap-time delta math for driver comparison charts.
+// Pure functions only — no React — so everything is unit-testable.
+
+export interface DeltaSeries {
+ label: string
+ color: string
+ /** Lap duration in seconds; null = no time (pit/out lap). */
+ lapTimes: (number | null)[]
+}
+
+export interface DriverDeltaResult {
+ label: string
+ color: string
+ /** Cumulative delta vs reference (seconds); null when that lap has no time. */
+ deltas: (number | null)[]
+}
+
+/** Format a delta value for axis labels and tooltips (e.g. "+2.5s", "-1.2s"). */
+export function formatDeltaSeconds(delta: number): string {
+ const sign = delta >= 0 ? '+' : ''
+ return `${sign}${delta.toFixed(1)}s`
+}
+
+function buildCumulative(lapTimes: ReadonlyArray): number[] {
+ const cumulative: number[] = []
+ let running = 0
+ for (const lap of lapTimes) {
+ if (lap !== null) {
+ running += lap
+ }
+ cumulative.push(running)
+ }
+ return cumulative
+}
+
+function resolveReference(
+ series: ReadonlyArray,
+ referenceLabel?: string,
+): DeltaSeries | null {
+ if (series.length === 0) return null
+ if (referenceLabel) {
+ return series.find((s) => s.label === referenceLabel) ?? series[0]
+ }
+ return series[0]
+}
+
+/**
+ * Compute per-lap cumulative time delta for each non-reference driver.
+ * Positive = behind reference; negative = ahead.
+ * Null laps carry cumulative forward but emit null in deltas (skip when plotting).
+ */
+export function computeCumulativeDeltas(
+ series: ReadonlyArray,
+ referenceLabel?: string,
+): DriverDeltaResult[] {
+ const reference = resolveReference(series, referenceLabel)
+ if (!reference) return []
+
+ const refCumulative = buildCumulative(reference.lapTimes)
+
+ return series
+ .filter((s) => s.label !== reference.label)
+ .map((driver) => {
+ const driverCumulative = buildCumulative(driver.lapTimes)
+ const lapCount = Math.max(driver.lapTimes.length, refCumulative.length)
+ const deltas: (number | null)[] = []
+
+ for (let i = 0; i < lapCount; i++) {
+ if (driver.lapTimes[i] === null) {
+ deltas.push(null)
+ continue
+ }
+ const refValue = refCumulative[i] ?? refCumulative[refCumulative.length - 1] ?? 0
+ const driverValue =
+ driverCumulative[i] ?? driverCumulative[driverCumulative.length - 1] ?? 0
+ deltas.push(driverValue - refValue)
+ }
+
+ return {
+ label: driver.label,
+ color: driver.color,
+ deltas,
+ }
+ })
+}
+
+/** Split delta samples into contiguous SVG polyline point strings (gaps at null laps). */
+export function deltaPolylineSegments(
+ deltas: ReadonlyArray,
+ toPoint: (lapIndex: number, delta: number) => string,
+): string[] {
+ const segments: string[] = []
+ let current: string[] = []
+
+ for (let i = 0; i < deltas.length; i++) {
+ const value = deltas[i]
+ if (value === null) {
+ if (current.length > 0) {
+ segments.push(current.join(' '))
+ current = []
+ }
+ continue
+ }
+ current.push(toPoint(i, value))
+ }
+
+ if (current.length > 0) {
+ segments.push(current.join(' '))
+ }
+
+ return segments
+}
diff --git a/frontend/src/lib/hero.ts b/frontend/src/lib/hero.ts
new file mode 100644
index 0000000..3c12636
--- /dev/null
+++ b/frontend/src/lib/hero.ts
@@ -0,0 +1,27 @@
+import type { Session } from '../types'
+import { sessionEndTime, sessionStartTime, type FocusMeetingKind } from './schedule'
+
+export type HeroStateKind = 'live' | 'upcoming' | 'between'
+
+export interface HeroStateInputs {
+ now: Date
+ liveActive: boolean
+ currentSession: Session | null
+ focusKind: FocusMeetingKind | null
+}
+
+export function classifySessionStatus(session: Session, now: Date): 'live' | 'done' | 'upcoming' {
+ const start = sessionStartTime(session)
+ const end = sessionEndTime(session)
+ if (start && end && now >= start && now < end) return 'live'
+ if (start && now >= start) return 'done'
+ return 'upcoming'
+}
+
+export function heroState(inputs: HeroStateInputs): HeroStateKind {
+ const { liveActive, currentSession, focusKind } = inputs
+
+ if (liveActive || currentSession) return 'live'
+ if (focusKind === 'current') return 'upcoming'
+ return 'between'
+}
diff --git a/frontend/src/lib/radio.ts b/frontend/src/lib/radio.ts
new file mode 100644
index 0000000..6ff21d9
--- /dev/null
+++ b/frontend/src/lib/radio.ts
@@ -0,0 +1,22 @@
+import type { LiveRadioCapture, LiveSessionMeta } from '../types'
+
+export const LIVE_TIMING_STATIC_BASE = 'https://livetiming.formula1.com/static/'
+
+export function radioClipUrl(
+ session: Pick | null | undefined,
+ capture: Pick | null | undefined,
+): string {
+ const sessionPath = session?.Path?.trim()
+ const capturePath = capture?.Path?.trim()
+ if (!sessionPath || !capturePath) return ''
+ if (/^https?:\/\//i.test(capturePath)) return capturePath
+
+ const base = LIVE_TIMING_STATIC_BASE.replace(/\/+$/, '')
+ const normalizedSession = sessionPath.replace(/^\/+|\/+$/g, '')
+ const normalizedCapture = capturePath.replace(/^\/+/g, '')
+ return `${base}/${normalizedSession}/${normalizedCapture}`
+}
+
+export function radioCaptureKey(capture: LiveRadioCapture): string {
+ return `${capture.Utc}-${capture.RacingNumber}-${capture.Path}`
+}
diff --git a/frontend/src/pages/CommandCenterPage.tsx b/frontend/src/pages/CommandCenterPage.tsx
index 7f54907..29c7493 100644
--- a/frontend/src/pages/CommandCenterPage.tsx
+++ b/frontend/src/pages/CommandCenterPage.tsx
@@ -1,38 +1,38 @@
import { useEffect, useMemo, useState } from 'react'
import { useQueries, useQuery } from '@tanstack/react-query'
import { Link } from '@tanstack/react-router'
-import { fetchLiveState, fetchLocalMeetings, fetchSeasonMeetings, fetchSeasons, fetchSessions, fetchWeekend, fetchChampionshipHub } from '../api'
+import {
+ fetchChampionshipHub,
+ fetchLiveState,
+ fetchLocalMeetings,
+ fetchRaceHub,
+ fetchSeasonMeetings,
+ fetchSeasons,
+ fetchSessions,
+ fetchWeekend,
+} from '../api'
+import { CommandCenterHero } from '../components/CommandCenterHero'
+import { PaddockBriefing } from '../components/PaddockBriefing'
import { RACE_HUB_DATASETS, countWeekendStats, formatCoverageHint, sessionTypeAbbrev } from '../lib/coverage'
+import { countryAccent, countryDecal, countryFlag, formatGpDateRange } from '../lib/gpIdentity'
+import { classifySessionStatus, heroState } from '../lib/hero'
import {
currentAndNextSession,
focusMeetingKind,
- formatCountdown,
formatSessionScheduleTime,
meetingHasStarted,
+ mostRecentPastMeeting,
+ nextUpcomingMeeting,
pickFocusMeeting,
- sessionEndTime,
- sessionStartTime,
sortSessionsByStart,
} from '../lib/schedule'
-import { countryAccent, countryDecal, countryFlag, formatGpDateRange } from '../lib/gpIdentity'
import type { Meeting, Session, Weekend, WeekendSession } from '../types'
-import { PaddockBriefing } from '../components/PaddockBriefing'
-import { Play, Activity, Calendar, Trophy } from 'lucide-react'
-
-type WeekendStatusKind = 'live' | 'current' | 'next' | 'recent' | 'fallback'
+import { Trophy } from 'lucide-react'
const missingDatasets = Object.fromEntries(
RACE_HUB_DATASETS.map((dataset) => [dataset, { status: 'missing', source: 'none', count: 0 }]),
) as WeekendSession['datasets']
-function classifySessionStatus(session: Session, now: Date): 'live' | 'done' | 'upcoming' {
- const start = sessionStartTime(session)
- const end = sessionEndTime(session)
- if (start && end && now >= start && now < end) return 'live'
- if (start && now >= start) return 'done'
- return 'upcoming'
-}
-
function meetingStatus(meeting: Meeting, focusKey: number | undefined, now: Date) {
if (meeting.meeting_key === focusKey) return 'focus'
if (meetingHasStarted(meeting, now)) return 'past'
@@ -148,7 +148,36 @@ export function CommandCenterPage() {
focusWeekendSessions[0]?.session
const analysisSessionKey = actionSession?.session_key
- const weekendsLoading = weekendQueries.some((q) => q.isLoading)
+ const liveActive = liveQuery.data?.is_live === true
+ const heroStateKind = heroState({
+ now: nowDate,
+ liveActive,
+ currentSession,
+ focusKind,
+ })
+
+ const lastPastMeeting = useMemo(
+ () => mostRecentPastMeeting(focusMeetings, nowDate),
+ [focusMeetings, nowDate],
+ )
+ const lastPastWeekend = lastPastMeeting ? weekendsByKey.get(lastPastMeeting.meeting_key) : undefined
+ const lastRaceAnalysis = pickAnalysisSession(lastPastWeekend)
+ const lastRaceSessionKey = lastRaceAnalysis?.session.session_key
+
+ const lastRaceHubQuery = useQuery({
+ queryKey: ['race-hub', lastRaceSessionKey, 'hero-podium'],
+ queryFn: () => fetchRaceHub(lastRaceSessionKey!),
+ enabled: lastRaceSessionKey != null && heroStateKind === 'between',
+ staleTime: 60_000,
+ })
+
+ const nextMeetingForHero = useMemo(() => {
+ if (heroStateKind !== 'between') return null
+ return nextUpcomingMeeting(focusMeetings, nowDate)
+ }, [heroStateKind, focusMeetings, nowDate])
+
+ const lastRacePodium = lastRaceHubQuery.data?.results ?? []
+ const lastRaceName = champHub?.last_race ?? lastPastMeeting?.meeting_name ?? ''
if (seasonsQuery.isLoading) {
return loading command center…
@@ -189,19 +218,7 @@ export function CommandCenterPage() {
)
}
- const liveActive = liveQuery.data?.is_live === true
- const statusKind: WeekendStatusKind = liveActive
- ? 'live'
- : focusKind === 'current'
- ? 'current'
- : focusKind === 'next'
- ? 'next'
- : focusKind === 'recent'
- ? 'recent'
- : 'fallback'
-
const accent = countryAccent(focusMeeting ?? null)
- const decal = countryDecal(focusMeeting ?? null)
const accentStyle = { '--gp-accent': accent } as React.CSSProperties
return (
@@ -224,76 +241,25 @@ export function CommandCenterPage() {
@@ -483,65 +449,3 @@ function FormSparkline({ form, color }: { form: number[], color: string }) {
)
}
-function WeekendKindLabel({ kind }: { kind: WeekendStatusKind }) {
- switch (kind) {
- case 'live':
- return
● Live now
- case 'current':
- return
Current weekend
- case 'next':
- return
Next weekend
- case 'recent':
- return
Recent weekend
- default:
- return
Weekend
- }
-}
-
-interface CountdownBlockProps {
- liveActive: boolean
- currentSession: Session | null
- nextSession: Session | null
- meeting: Meeting
- now: Date
-}
-
-function CountdownBlock({ liveActive, currentSession, nextSession, meeting, now }: CountdownBlockProps) {
- if (liveActive) {
- return (
-
-
SignalR
-
LIVE
-
{currentSession?.session_name ?? 'Feed connected'}
-
- )
- }
- if (currentSession) {
- return (
-
-
On Track
-
{currentSession.session_name}
-
In session
-
- )
- }
- if (nextSession && sessionStartTime(nextSession)) {
- return (
-
-
Next · {nextSession.session_name}
-
{formatCountdown(sessionStartTime(nextSession)!, now)}
-
{formatSessionScheduleTime(nextSession.date_start)}
-
- )
- }
- if (meetingHasStarted(meeting, now)) {
- return (
-
-
Status
-
Complete
-
Weekend finished
-
- )
- }
- return null
-}
diff --git a/frontend/src/pages/LiveTimingPage.tsx b/frontend/src/pages/LiveTimingPage.tsx
index 89b0a7c..1321bba 100644
--- a/frontend/src/pages/LiveTimingPage.tsx
+++ b/frontend/src/pages/LiveTimingPage.tsx
@@ -21,6 +21,7 @@ import { TimingTower } from '../components/live/TimingTower'
import { BattleChips } from '../components/live/BattleChips'
import { PinnedDrivers } from '../components/live/PinnedDrivers'
import { RaceControlFeed } from '../components/live/RaceControlFeed'
+import { TeamRadioTicker } from '../components/live/TeamRadioTicker'
import { TrackMap } from '../components/live/TrackMap'
import { TyreDegPanel } from '../components/live/TyreDegPanel'
import { Radio } from 'lucide-react'
@@ -213,6 +214,11 @@ export function LiveTimingPage() {
/>