mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-07 19:56:18 -04:00
feat(race-hub): add Compare tab with telemetry traces and lap deltas (#10)
Ship driver comparison in the race hub: two pickers (default top finishers), best-lap telemetry overlays via TelemetryTraceChart, and cumulative pace delta via DeltaTimeGraph with pit-lap captions. Car data is filtered to each driver's fastest lap client-side (OpenF1 returns full-session samples). Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
244
frontend/src/components/CompareView.tsx
Normal file
244
frontend/src/components/CompareView.tsx
Normal file
@@ -0,0 +1,244 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { fetchLapsComparison, fetchTelemetry } from '../api'
|
||||
import {
|
||||
buildBestLapTraceSeries,
|
||||
compareDriverOptions,
|
||||
comparisonToDeltaSeries,
|
||||
defaultCompareDriverNumbers,
|
||||
formatPitLapsCaption,
|
||||
} from '../lib/compare'
|
||||
import type { Driver, EnrichedResult } from '../types'
|
||||
import { teamColor } from '../utils'
|
||||
import { DriverCell } from './DriverCell'
|
||||
import { TelemetryTraceChart } from './charts/TelemetryTraceChart'
|
||||
import { DeltaTimeGraph } from './charts/DeltaTimeGraph'
|
||||
import '../styles/compare-view.css'
|
||||
|
||||
interface Props {
|
||||
sessionKey: number
|
||||
results: EnrichedResult[]
|
||||
drivers: Driver[]
|
||||
}
|
||||
|
||||
function SectionState({
|
||||
loading,
|
||||
error,
|
||||
empty,
|
||||
emptyMessage,
|
||||
children,
|
||||
}: {
|
||||
loading: boolean
|
||||
error: Error | null
|
||||
empty: boolean
|
||||
emptyMessage: string
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
if (loading) {
|
||||
return <div className="loading-state">loading…</div>
|
||||
}
|
||||
if (error) {
|
||||
return <div className="error-box">{error.message}</div>
|
||||
}
|
||||
if (empty) {
|
||||
return <div className="missing-notice">{emptyMessage}</div>
|
||||
}
|
||||
return <>{children}</>
|
||||
}
|
||||
|
||||
export function CompareView({ sessionKey, results, drivers }: Props) {
|
||||
const driverOptions = useMemo(
|
||||
() => compareDriverOptions(drivers, results),
|
||||
[drivers, results],
|
||||
)
|
||||
|
||||
const initialPair = useMemo(
|
||||
() => defaultCompareDriverNumbers(results, drivers),
|
||||
[results, drivers],
|
||||
)
|
||||
|
||||
const [driverA, setDriverA] = useState<number | null>(initialPair?.[0] ?? null)
|
||||
const [driverB, setDriverB] = useState<number | null>(initialPair?.[1] ?? null)
|
||||
|
||||
useEffect(() => {
|
||||
if (driverA != null && driverB != null) return
|
||||
const pair = defaultCompareDriverNumbers(results, drivers)
|
||||
if (!pair) return
|
||||
setDriverA(pair[0])
|
||||
setDriverB(pair[1])
|
||||
}, [results, drivers, driverA, driverB])
|
||||
|
||||
const pair = useMemo((): [number, number] | null => {
|
||||
if (driverA == null || driverB == null || driverA === driverB) return null
|
||||
return [driverA, driverB]
|
||||
}, [driverA, driverB])
|
||||
|
||||
const comparisonQuery = useQuery({
|
||||
queryKey: ['laps-comparison', sessionKey, pair?.[0], pair?.[1]],
|
||||
queryFn: () => fetchLapsComparison(sessionKey, pair!),
|
||||
enabled: pair != null,
|
||||
staleTime: 60_000,
|
||||
})
|
||||
|
||||
const telemetryAQuery = useQuery({
|
||||
queryKey: ['telemetry', sessionKey, pair?.[0]],
|
||||
queryFn: () => fetchTelemetry(sessionKey, pair![0]),
|
||||
enabled: pair != null,
|
||||
staleTime: 60_000,
|
||||
})
|
||||
|
||||
const telemetryBQuery = useQuery({
|
||||
queryKey: ['telemetry', sessionKey, pair?.[1]],
|
||||
queryFn: () => fetchTelemetry(sessionKey, pair![1]),
|
||||
enabled: pair != null,
|
||||
staleTime: 60_000,
|
||||
})
|
||||
|
||||
const comparison = comparisonQuery.data
|
||||
const referenceLabel = useMemo(() => {
|
||||
if (!pair) return undefined
|
||||
const meta = comparison?.drivers.find((d) => d.driver_number === pair[0])
|
||||
const session = drivers.find((d) => d.driver_number === pair[0])
|
||||
return meta?.name_acronym || session?.name_acronym
|
||||
}, [pair, comparison, drivers])
|
||||
|
||||
const deltaSeries = useMemo(() => {
|
||||
if (!comparison || !pair) return []
|
||||
return comparisonToDeltaSeries(comparison, pair, drivers)
|
||||
}, [comparison, pair, drivers])
|
||||
|
||||
const pitCaption = useMemo(() => {
|
||||
if (!comparison || !pair) return null
|
||||
return formatPitLapsCaption(comparison.pit_laps, pair, comparison, drivers)
|
||||
}, [comparison, pair, drivers])
|
||||
|
||||
const traceSeries = useMemo(() => {
|
||||
if (!pair || !comparison) return []
|
||||
const out = []
|
||||
|
||||
for (const dn of pair) {
|
||||
const comp = comparison.drivers.find((d) => d.driver_number === dn)
|
||||
const session = drivers.find((d) => d.driver_number === dn)
|
||||
const label = comp?.name_acronym || session?.name_acronym || `#${dn}`
|
||||
const color = teamColor(comp?.team_colour || session?.team_colour)
|
||||
|
||||
const carData =
|
||||
dn === pair[0] ? (telemetryAQuery.data ?? []) : (telemetryBQuery.data ?? [])
|
||||
const series = buildBestLapTraceSeries(carData, comp?.laps ?? [], label, color)
|
||||
if (series) out.push(series)
|
||||
}
|
||||
|
||||
return out
|
||||
}, [pair, comparison, drivers, telemetryAQuery.data, telemetryBQuery.data])
|
||||
|
||||
const telemetryLoading = telemetryAQuery.isLoading || telemetryBQuery.isLoading
|
||||
const telemetryError = telemetryAQuery.error ?? telemetryBQuery.error
|
||||
|
||||
if (driverOptions.length < 2) {
|
||||
return (
|
||||
<div className="missing-notice" data-testid="compare-view-empty">
|
||||
Need at least two drivers in this session to compare.
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const driverAInfo = driverOptions.find((d) => d.driver_number === driverA)
|
||||
const driverBInfo = driverOptions.find((d) => d.driver_number === driverB)
|
||||
|
||||
return (
|
||||
<div className="compare-view" data-testid="compare-view">
|
||||
<div className="compare-pickers">
|
||||
<div className="compare-picker">
|
||||
<span className="compare-picker-label">Reference</span>
|
||||
<select
|
||||
className="compare-picker-select"
|
||||
value={driverA ?? ''}
|
||||
onChange={(e) => setDriverA(Number(e.target.value))}
|
||||
data-testid="compare-picker-a"
|
||||
>
|
||||
{driverOptions.map((d) => (
|
||||
<option key={d.driver_number} value={d.driver_number}>
|
||||
{d.name_acronym} · #{d.driver_number}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{driverAInfo && (
|
||||
<DriverCell
|
||||
acronym={driverAInfo.name_acronym}
|
||||
number={driverAInfo.driver_number}
|
||||
colour={driverAInfo.team_colour}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="compare-picker">
|
||||
<span className="compare-picker-label">Challenger</span>
|
||||
<select
|
||||
className="compare-picker-select"
|
||||
value={driverB ?? ''}
|
||||
onChange={(e) => setDriverB(Number(e.target.value))}
|
||||
data-testid="compare-picker-b"
|
||||
>
|
||||
{driverOptions.map((d) => (
|
||||
<option key={d.driver_number} value={d.driver_number}>
|
||||
{d.name_acronym} · #{d.driver_number}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{driverBInfo && (
|
||||
<DriverCell
|
||||
acronym={driverBInfo.name_acronym}
|
||||
number={driverBInfo.driver_number}
|
||||
colour={driverBInfo.team_colour}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{driverA === driverB && (
|
||||
<div className="analysis-notice">
|
||||
<strong>Pick two different drivers</strong> to run a comparison.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<section className="compare-section" data-testid="compare-telemetry-section">
|
||||
<div>
|
||||
<div className="compare-section-title">Best lap telemetry</div>
|
||||
<div className="compare-section-meta">
|
||||
Speed, throttle, and brake traces for each driver's fastest lap
|
||||
</div>
|
||||
</div>
|
||||
<SectionState
|
||||
loading={telemetryLoading}
|
||||
error={telemetryError instanceof Error ? telemetryError : null}
|
||||
empty={!telemetryLoading && !telemetryError && traceSeries.length === 0}
|
||||
emptyMessage="No telemetry samples for the best laps. Car data may not be available for this session."
|
||||
>
|
||||
<TelemetryTraceChart series={traceSeries} />
|
||||
</SectionState>
|
||||
</section>
|
||||
|
||||
<section className="compare-section" data-testid="compare-pace-section">
|
||||
<div>
|
||||
<div className="compare-section-title">Race pace</div>
|
||||
<div className="compare-section-meta">
|
||||
Cumulative lap-time delta vs {referenceLabel ?? 'reference'}
|
||||
</div>
|
||||
</div>
|
||||
<SectionState
|
||||
loading={comparisonQuery.isLoading}
|
||||
error={comparisonQuery.error instanceof Error ? comparisonQuery.error : null}
|
||||
empty={!comparisonQuery.isLoading && !comparisonQuery.error && deltaSeries.length < 2}
|
||||
emptyMessage="No lap comparison data for the selected drivers."
|
||||
>
|
||||
<DeltaTimeGraph series={deltaSeries} referenceLabel={referenceLabel} />
|
||||
{pitCaption && (
|
||||
<p className="compare-pit-caption" data-testid="compare-pit-caption">
|
||||
{pitCaption}
|
||||
</p>
|
||||
)}
|
||||
</SectionState>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -2,6 +2,7 @@ export type Tab =
|
||||
| 'overview'
|
||||
| 'race_story'
|
||||
| 'strategy'
|
||||
| 'compare'
|
||||
| 'lap_data'
|
||||
| 'conditions'
|
||||
| 'race_control'
|
||||
@@ -11,6 +12,7 @@ const TABS: { id: Tab; label: string }[] = [
|
||||
{ id: 'overview', label: 'Overview' },
|
||||
{ id: 'race_story', label: 'Race Story' },
|
||||
{ id: 'strategy', label: 'Strategy' },
|
||||
{ id: 'compare', label: 'Compare' },
|
||||
{ id: 'lap_data', label: 'Lap Data' },
|
||||
{ id: 'conditions', label: 'Conditions' },
|
||||
{ id: 'race_control', label: 'Race Control' },
|
||||
|
||||
Reference in New Issue
Block a user