Compare commits

..

2 Commits

Author SHA1 Message Date
AmanTahiliani
f8bd183c26 merge phase-2 (preview page, chapters) — resolve additive import conflicts 2026-07-11 18:13:41 -04:00
AmanTahiliani
01ec1f24e7 feat(#22): Driver profile page
Implemented by claude via .agents/dev dispatch.
2026-07-11 18:12:00 -04:00
20 changed files with 1513 additions and 1292 deletions

View File

@@ -2,6 +2,7 @@ import type {
ArticleContent, ArticleContent,
CarDataSample, CarDataSample,
ChampionshipHub, ChampionshipHub,
DriverSummary,
EnrichedGrid, EnrichedGrid,
EnrichedResult, EnrichedResult,
LapsComparisonResponse, LapsComparisonResponse,
@@ -108,6 +109,19 @@ export async function fetchChampionshipHub(year?: number): Promise<ChampionshipH
return res.json() return res.json()
} }
export async function fetchDriverSummary(
driverNumber: number,
year?: number,
): Promise<DriverSummary> {
const params = new URLSearchParams({ driver_number: String(driverNumber) })
if (year) params.set('year', String(year))
const res = await fetch(`/api/v1/driver/summary?${params.toString()}`)
if (!res.ok) {
throw new Error(`API ${res.status}: ${res.statusText}`)
}
return res.json()
}
export async function fetchLiveState(): Promise<LiveStateResponse> { export async function fetchLiveState(): Promise<LiveStateResponse> {
const res = await fetch('/api/v1/live/state') const res = await fetch('/api/v1/live/state')
if (!res.ok) { if (!res.ok) {

View File

@@ -1,23 +1,7 @@
import { useMemo } from 'react'
import { useQuery } from '@tanstack/react-query' import { useQuery } from '@tanstack/react-query'
import { Link } from '@tanstack/react-router' import { Link } from '@tanstack/react-router'
import { import { fetchNews } from '../api'
fetchChampionshipHub,
fetchNews,
fetchSeasonMeetings,
fetchSeasons,
} from '../api'
import {
activeDigestWindow,
gpWindows,
itemsForWindow,
sinceLastLabel,
tagColour,
tagItems,
topTags,
} from '../lib/digest'
import { timeAgo } from '../utils' import { timeAgo } from '../utils'
import '../styles/digest.css'
const SOURCE_DISPLAY: Record<string, string> = { const SOURCE_DISPLAY: Record<string, string> = {
'fia': 'FIA', 'fia': 'FIA',
@@ -30,53 +14,14 @@ const SOURCE_DISPLAY: Record<string, string> = {
} }
export function PaddockBriefing() { export function PaddockBriefing() {
const now = useMemo(() => new Date(), [])
const { data: news, isLoading, isError } = useQuery({ const { data: news, isLoading, isError } = useQuery({
queryKey: ['news'], queryKey: ['news'],
queryFn: () => fetchNews(100), queryFn: () => fetchNews(100),
staleTime: 60_000, staleTime: 60_000,
}) })
const seasonsQuery = useQuery({
queryKey: ['seasons'],
queryFn: fetchSeasons,
})
const latestSeason = seasonsQuery.data?.[0] ?? null
const meetingsQuery = useQuery({
queryKey: ['season-meetings', latestSeason],
queryFn: () => fetchSeasonMeetings(latestSeason!),
enabled: latestSeason != null,
})
const hubQuery = useQuery({
queryKey: ['championship-hub', latestSeason],
queryFn: () => fetchChampionshipHub(latestSeason!),
enabled: latestSeason != null,
})
const meetings = meetingsQuery.data ?? []
const hub = hubQuery.data
const tagged = useMemo(
() => tagItems(news ?? [], hub?.drivers ?? [], hub?.teams ?? []),
[news, hub],
)
const windows = useMemo(() => gpWindows(meetings, now), [meetings, now])
const activeWindow = useMemo(
() => activeDigestWindow(windows, meetings, now),
[windows, meetings, now],
)
const sinceItems = useMemo(
() => itemsForWindow(tagged, activeWindow),
[tagged, activeWindow],
)
const sinceTags = useMemo(() => topTags(sinceItems, 4), [sinceItems])
const sinceLabel = sinceLastLabel(meetings, now)
const unreadCount = news?.filter((i) => !i.read_at).length ?? 0 const unreadCount = news?.filter((i) => !i.read_at).length ?? 0
const preview = sinceItems.length > 0 ? sinceItems.slice(0, 5) : (tagged.slice(0, 5)) const preview = news?.slice(0, 5) ?? []
return ( return (
<section className="cc-briefing" data-testid="paddock-briefing"> <section className="cc-briefing" data-testid="paddock-briefing">
@@ -92,27 +37,6 @@ export function PaddockBriefing() {
</Link> </Link>
</div> </div>
{meetings.length > 0 && (
<div className="cc-brief-digest-meta" data-testid="cc-brief-digest-meta">
<span>Since {sinceLabel}</span>
<span>·</span>
<span>{sinceItems.length} items</span>
{sinceTags.length > 0 && (
<div className="cc-brief-digest-tags">
{sinceTags.map((tag) => (
<span
key={tag.key}
className="cc-brief-tag"
style={{ borderColor: tagColour(tag.colour) }}
>
{tag.label}
</span>
))}
</div>
)}
</div>
)}
{isLoading && <div className="briefing-state loading-state">loading</div>} {isLoading && <div className="briefing-state loading-state">loading</div>}
{isError && <div className="briefing-state error-box">Failed to load briefing</div>} {isError && <div className="briefing-state error-box">Failed to load briefing</div>}

View File

@@ -1,293 +0,0 @@
import { meetingEndTime, meetingStartTime, mostRecentPastMeeting, nextUpcomingMeeting } from './schedule'
import type { ChampHubDriver, ChampHubTeam, Meeting, NewsItem } from '../types'
export interface GPWindow {
meeting_key: number
meeting_name: string
/** Inclusive lower bound: end of previous GP, or open for season opener. */
start: Date | null
/** Exclusive upper bound: start of next GP, or open after the final round. */
end: Date | null
}
export interface DigestTag {
kind: 'driver' | 'team'
key: string
label: string
colour: string
}
export type TaggedNewsItem = NewsItem & { tags: DigestTag[] }
export const RECENT_BUCKET_KEY = '__recent__'
interface MatchCandidate {
start: number
end: number
tag: DigestTag
}
interface TagPattern {
pattern: string
tag: DigestTag
}
function sortMeetings(meetings: Meeting[]): Meeting[] {
return [...meetings].sort((a, b) => {
const left = meetingStartTime(a)?.getTime() ?? 0
const right = meetingStartTime(b)?.getTime() ?? 0
if (left !== right) return left - right
return a.meeting_name.localeCompare(b.meeting_name)
})
}
/** Derive inter-race windows [prev GP end → next GP start] for each round. */
export function gpWindows(meetings: Meeting[], _now: Date): GPWindow[] {
const sorted = sortMeetings(meetings)
return sorted.map((meeting, index) => ({
meeting_key: meeting.meeting_key,
meeting_name: meeting.meeting_name,
start: index > 0 ? meetingEndTime(sorted[index - 1]) : null,
end: index < sorted.length - 1 ? meetingStartTime(sorted[index + 1]) : null,
}))
}
function itemPublishedAt(item: NewsItem): Date | null {
if (!item.published_at) return null
const parsed = Date.parse(item.published_at)
return Number.isNaN(parsed) ? null : new Date(parsed)
}
function itemInWindow(published: Date, window: GPWindow): boolean {
if (window.start && published < window.start) return false
if (window.end && published >= window.end) return false
return true
}
export function windowForDate(windows: GPWindow[], published: Date): GPWindow | null {
const matches = windows.filter((window) => itemInWindow(published, window))
if (matches.length === 0) return null
return matches.reduce((best, window) => {
const bestStart = best.start?.getTime() ?? Number.NEGATIVE_INFINITY
const windowStart = window.start?.getTime() ?? Number.NEGATIVE_INFINITY
return windowStart >= bestStart ? window : best
})
}
export interface GroupedDigest {
windows: Array<{ window: GPWindow; items: NewsItem[] }>
recent: NewsItem[]
}
/** Bucket news items into GP windows; undated items land in `recent`. */
export function groupByWindow(items: NewsItem[], windows: GPWindow[]): GroupedDigest {
const buckets = new Map<number, NewsItem[]>()
const recent: NewsItem[] = []
for (const item of items) {
const published = itemPublishedAt(item)
if (!published) {
recent.push(item)
continue
}
const match = windowForDate(windows, published)
if (!match) {
recent.push(item)
continue
}
const list = buckets.get(match.meeting_key) ?? []
list.push(item)
buckets.set(match.meeting_key, list)
}
const grouped = windows
.map((window) => ({
window,
items: buckets.get(window.meeting_key) ?? [],
}))
.filter((entry) => entry.items.length > 0)
return { windows: grouped, recent }
}
function driverLastName(fullName: string): string | null {
const parts = fullName.trim().split(/\s+/).filter(Boolean)
if (parts.length < 2) return null
return parts[parts.length - 1] ?? null
}
function buildTagPatterns(drivers: ChampHubDriver[], teams: ChampHubTeam[]): TagPattern[] {
const patterns: TagPattern[] = []
for (const team of teams) {
if (!team.team_name.trim()) continue
patterns.push({
pattern: team.team_name.toLowerCase(),
tag: {
kind: 'team',
key: `team:${team.team_name}`,
label: team.team_name,
colour: team.team_colour,
},
})
}
for (const driver of drivers) {
const colour = driver.team_colour
const base = {
kind: 'driver' as const,
colour,
}
if (driver.full_name.trim()) {
patterns.push({
pattern: driver.full_name.toLowerCase(),
tag: {
...base,
key: `driver:${driver.name_acronym}`,
label: driver.name_acronym,
},
})
const lastName = driverLastName(driver.full_name)
if (lastName) {
patterns.push({
pattern: lastName.toLowerCase(),
tag: {
...base,
key: `driver:${driver.name_acronym}`,
label: driver.name_acronym,
},
})
}
}
if (driver.name_acronym.trim()) {
patterns.push({
pattern: driver.name_acronym.toLowerCase(),
tag: {
...base,
key: `driver:${driver.name_acronym}`,
label: driver.name_acronym,
},
})
}
}
patterns.sort((a, b) => b.pattern.length - a.pattern.length)
return patterns
}
function overlaps(a: MatchCandidate, b: MatchCandidate): boolean {
return a.start < b.end && b.start < a.end
}
/**
* Tag items via case-insensitive substring match on title + summary.
* Longest pattern wins on overlapping spans (v1 string match — no NLP).
*
* Known limitations: common-word last names, team names inside other words,
* and driver TLAs that appear in unrelated acronyms can false-positive.
*/
export function tagItems(
items: NewsItem[],
drivers: ChampHubDriver[],
teams: ChampHubTeam[],
): TaggedNewsItem[] {
const patterns = buildTagPatterns(drivers, teams)
return items.map((item) => {
const haystack = `${item.title} ${item.summary ?? ''}`.toLowerCase()
const accepted: MatchCandidate[] = []
for (const { pattern, tag } of patterns) {
if (!pattern) continue
let from = 0
while (from <= haystack.length - pattern.length) {
const index = haystack.indexOf(pattern, from)
if (index === -1) break
const candidate: MatchCandidate = {
start: index,
end: index + pattern.length,
tag,
}
if (!accepted.some((match) => overlaps(match, candidate))) {
accepted.push(candidate)
}
from = index + 1
}
}
const tagsByKey = new Map<string, DigestTag>()
for (const match of accepted) {
tagsByKey.set(match.tag.key, match.tag)
}
return {
...item,
tags: [...tagsByKey.values()].sort((a, b) => a.label.localeCompare(b.label)),
}
})
}
export function activeDigestWindow(
windows: GPWindow[],
meetings: Meeting[],
now: Date,
): GPWindow | null {
const next = nextUpcomingMeeting(meetings, now)
if (next) {
return windows.find((window) => window.meeting_key === next.meeting_key) ?? null
}
const recent = mostRecentPastMeeting(meetings, now)
if (recent) {
return windows.find((window) => window.meeting_key === recent.meeting_key) ?? null
}
return windows[0] ?? null
}
export function sinceLastLabel(meetings: Meeting[], now: Date): string {
const last = mostRecentPastMeeting(meetings, now)
if (last) return last.meeting_name
const next = nextUpcomingMeeting(meetings, now)
if (next) return `Before ${next.meeting_name}`
return 'Pre-season'
}
export function itemsForWindow(items: TaggedNewsItem[], window: GPWindow | null): TaggedNewsItem[] {
if (!window) return []
return items.filter((item) => {
const published = itemPublishedAt(item)
return published != null && itemInWindow(published, window)
})
}
export function topTags(items: TaggedNewsItem[], limit = 5): DigestTag[] {
const counts = new Map<string, { tag: DigestTag; count: number }>()
for (const item of items) {
for (const tag of item.tags) {
const current = counts.get(tag.key)
if (current) current.count += 1
else counts.set(tag.key, { tag, count: 1 })
}
}
return [...counts.values()]
.sort((a, b) => b.count - a.count || a.tag.label.localeCompare(b.tag.label))
.slice(0, limit)
.map((entry) => entry.tag)
}
export function filterByTag(items: TaggedNewsItem[], tagKey: string | null): TaggedNewsItem[] {
if (!tagKey) return items
return items.filter((item) => item.tags.some((tag) => tag.key === tagKey))
}
export function tagColour(colour: string): string {
if (!colour) return 'var(--text-3)'
return colour.startsWith('#') ? colour : `#${colour}`
}
export function sortWindowBucketsNewestFirst<T extends { window: GPWindow }>(buckets: T[]): T[] {
return [...buckets].sort((a, b) => {
const left = a.window.start?.getTime() ?? 0
const right = b.window.start?.getTime() ?? 0
return right - left
})
}

View File

@@ -0,0 +1,69 @@
import type { DriverSummaryRound } from '../types'
/** One round mapped for the grid-vs-finish chart and results table. */
export interface RoundDelta {
round: number // 1-based round index within the completed season
label: string // short GP label, e.g. "Bahrain"
grid: number | null
finish: number | null
/** grid finish: positive = places gained on Sunday, null when unknowable. */
delta: number | null
points: number
status: 'classified' | 'dnf' | 'dns' | 'dsq' | 'absent'
}
/** Strip the "Grand Prix" boilerplate so round labels fit chart axes. */
export function shortGpLabel(meetingName: string): string {
const short = meetingName
.replace(/\s*grand prix\s*/i, ' ')
.replace(/\s+gp\s*$/i, ' ')
.trim()
return short || meetingName
}
function roundStatus(r: DriverSummaryRound): RoundDelta['status'] {
if (r.dns) return 'dns'
if (r.dsq) return 'dsq'
if (r.dnf) return 'dnf'
if (r.race_position <= 0 && r.grid_position <= 0) return 'absent'
return 'classified'
}
/**
* Map summary rounds to grid-vs-finish deltas. Positions of 0 mean "no data"
* (driver absent, pit-lane start, …) and become null; a delta is only computed
* when both ends are known and the driver actually started the race.
*/
export function gridFinishDeltas(rounds: DriverSummaryRound[]): RoundDelta[] {
return rounds.map((r, i) => {
const status = roundStatus(r)
const grid = r.grid_position > 0 ? r.grid_position : null
const finish = r.race_position > 0 ? r.race_position : null
const delta =
grid != null && finish != null && status !== 'dns' && status !== 'absent'
? grid - finish
: null
return {
round: i + 1,
label: shortGpLabel(r.meeting_name),
grid,
finish,
delta,
points: r.points,
status,
}
})
}
/** 'P4' for known positions, '—' when unknown. */
export function formatPosition(pos: number | null): string {
return pos != null && pos > 0 ? `P${pos}` : '—'
}
/** '+3' (gained), '2' (lost), '=' (held), '—' (unknown). */
export function formatDelta(delta: number | null): string {
if (delta == null) return '—'
if (delta > 0) return `+${delta}`
if (delta < 0) return `${Math.abs(delta)}`
return '='
}

View File

@@ -47,7 +47,9 @@ export function countryDecal(meeting: Meeting | undefined | null): string {
return name.slice(0, 3).toUpperCase() || '—' return name.slice(0, 3).toUpperCase() || '—'
} }
export function countryFlag(meeting: Meeting | undefined | null): string { export function countryFlag(
meeting: Pick<Meeting, 'country_code' | 'country_flag'> | undefined | null,
): string {
if (meeting?.country_flag && !/^https?:\/\//i.test(meeting.country_flag)) return meeting.country_flag if (meeting?.country_flag && !/^https?:\/\//i.test(meeting.country_flag)) return meeting.country_flag
const code = meeting?.country_code?.toUpperCase() const code = meeting?.country_code?.toUpperCase()
const iso2 = code ? CODE3_TO_2[code] : '' const iso2 = code ? CODE3_TO_2[code] : ''

View File

@@ -1,33 +1,13 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useCallback, useEffect, useRef, useState } from 'react'
import { useQuery, useQueryClient } from '@tanstack/react-query' import { useQuery, useQueryClient } from '@tanstack/react-query'
import { import { fetchNews, fetchNewsArticle, markNewsRead } from '../api'
fetchChampionshipHub,
fetchNews,
fetchNewsArticle,
fetchSeasonMeetings,
fetchSeasons,
markNewsRead,
} from '../api'
import {
activeDigestWindow,
filterByTag,
groupByWindow,
gpWindows,
itemsForWindow,
sinceLastLabel,
sortWindowBucketsNewestFirst,
tagColour,
tagItems,
topTags,
type DigestTag,
type TaggedNewsItem,
} from '../lib/digest'
import { stripHtml, timeAgo } from '../utils' import { stripHtml, timeAgo } from '../utils'
import type { ArticleContent, NewsItem } from '../types' import type { ArticleContent, NewsItem } from '../types'
import '../styles/digest.css'
type Category = 'all' | 'official' | 'news' | 'video' type Category = 'all' | 'official' | 'news' | 'video'
const PAGE_SIZE = 16
const CATEGORY_LABELS: Record<Category, string> = { const CATEGORY_LABELS: Record<Category, string> = {
all: 'All', all: 'All',
official: 'Official', official: 'Official',
@@ -91,31 +71,6 @@ function CategoryTabs({
) )
} }
function TagChip({
tag,
active,
onClick,
className = 'digest-tag-chip',
}: {
tag: DigestTag
active?: boolean
onClick?: () => void
className?: string
}) {
return (
<button
type="button"
className={`${className}${active ? ' active' : ''}`}
style={{ '--tag-colour': tagColour(tag.colour) } as React.CSSProperties}
onClick={onClick}
aria-pressed={active}
>
<span className="digest-tag-dot" aria-hidden="true" />
{tag.label}
</button>
)
}
function OGImage({ url, title }: { url?: string; title: string }) { function OGImage({ url, title }: { url?: string; title: string }) {
const [failed, setFailed] = useState(false) const [failed, setFailed] = useState(false)
const initial = (title[0] ?? '?').toUpperCase() const initial = (title[0] ?? '?').toUpperCase()
@@ -143,15 +98,11 @@ function OGImage({ url, title }: { url?: string; title: string }) {
function BriefingCard({ function BriefingCard({
item, item,
isActive, isActive,
activeTag,
onSelect, onSelect,
onTagClick,
}: { }: {
item: TaggedNewsItem item: NewsItem
isActive: boolean isActive: boolean
activeTag: string | null
onSelect: (item: NewsItem) => void onSelect: (item: NewsItem) => void
onTagClick: (tag: DigestTag) => void
}) { }) {
const isRead = !!item.read_at const isRead = !!item.read_at
const isVideo = categoryOf(item) === 'video' const isVideo = categoryOf(item) === 'video'
@@ -178,25 +129,6 @@ function BriefingCard({
{stripHtml(item.og_description || item.summary || '')} {stripHtml(item.og_description || item.summary || '')}
</p> </p>
)} )}
{item.tags.length > 0 && (
<div className="bp-card-tags">
{item.tags.map((tag) => (
<button
key={tag.key}
type="button"
className={`bp-card-tag${activeTag === tag.key ? ' active' : ''}`}
style={{ '--tag-colour': tagColour(tag.colour) } as React.CSSProperties}
onClick={(e) => {
e.stopPropagation()
onTagClick(tag)
}}
>
<span className="digest-tag-dot" aria-hidden="true" />
{tag.label}
</button>
))}
</div>
)}
</div> </div>
</article> </article>
) )
@@ -214,6 +146,7 @@ function ReaderPanel({
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [error, setError] = useState<string | null>(null) const [error, setError] = useState<string | null>(null)
// Close on Escape
useEffect(() => { useEffect(() => {
const handler = (e: KeyboardEvent) => { const handler = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose() if (e.key === 'Escape') onClose()
@@ -222,6 +155,7 @@ function ReaderPanel({
return () => document.removeEventListener('keydown', handler) return () => document.removeEventListener('keydown', handler)
}, [onClose]) }, [onClose])
// Fetch article when item changes
useEffect(() => { useEffect(() => {
if (!item) { if (!item) {
setArticle(null) setArticle(null)
@@ -241,14 +175,9 @@ function ReaderPanel({
.catch((err) => { setError(String(err)); setLoading(false) }) .catch((err) => { setError(String(err)); setLoading(false) })
}, [item?.url, item ? categoryOf(item) : '']) }, [item?.url, item ? categoryOf(item) : ''])
// Scroll panel to top when item changes
useEffect(() => { useEffect(() => {
const panel = panelRef.current panelRef.current?.scrollTo({ top: 0 })
if (!panel) return
if (typeof panel.scrollTo === 'function') {
panel.scrollTo({ top: 0 })
} else {
panel.scrollTop = 0
}
}, [item?.url]) }, [item?.url])
const isOpen = item !== null const isOpen = item !== null
@@ -368,6 +297,7 @@ function ReaderPanel({
{article && !loading && article.content && ( {article && !loading && article.content && (
<div <div
className="bp-reader-body" className="bp-reader-body"
// readability strips scripts/iframes; sources are all known news outlets
// eslint-disable-next-line react/no-danger // eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: article.content }} dangerouslySetInnerHTML={{ __html: article.content }}
/> />
@@ -402,9 +332,8 @@ function ReaderPanel({
export function BriefingPage() { export function BriefingPage() {
const [activeCategory, setActiveCategory] = useState<Category>('all') const [activeCategory, setActiveCategory] = useState<Category>('all')
const [selectedItem, setSelectedItem] = useState<NewsItem | null>(null) const [selectedItem, setSelectedItem] = useState<NewsItem | null>(null)
const [activeTag, setActiveTag] = useState<string | null>(null) const [page, setPage] = useState(1)
const queryClient = useQueryClient() const queryClient = useQueryClient()
const now = useMemo(() => new Date(), [])
const { data: allNews = [], isLoading, isError } = useQuery({ const { data: allNews = [], isLoading, isError } = useQuery({
queryKey: ['news'], queryKey: ['news'],
@@ -412,74 +341,13 @@ export function BriefingPage() {
staleTime: 60_000, staleTime: 60_000,
}) })
const seasonsQuery = useQuery({ const filtered = allNews.filter(
queryKey: ['seasons'],
queryFn: fetchSeasons,
})
const latestSeason = seasonsQuery.data?.[0] ?? null
const meetingsQuery = useQuery({
queryKey: ['season-meetings', latestSeason],
queryFn: () => fetchSeasonMeetings(latestSeason!),
enabled: latestSeason != null,
})
const hubQuery = useQuery({
queryKey: ['championship-hub', latestSeason],
queryFn: () => fetchChampionshipHub(latestSeason!),
enabled: latestSeason != null,
})
const meetings = meetingsQuery.data ?? []
const hub = hubQuery.data
const taggedNews = useMemo(
() => tagItems(allNews, hub?.drivers ?? [], hub?.teams ?? []),
[allNews, hub],
)
const categoryFiltered = useMemo(
() => taggedNews.filter(
(item) => activeCategory === 'all' || categoryOf(item) === activeCategory, (item) => activeCategory === 'all' || categoryOf(item) === activeCategory,
),
[taggedNews, activeCategory],
) )
const pageCount = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE))
const tagFiltered = useMemo( const safePage = Math.min(page, pageCount)
() => filterByTag(categoryFiltered, activeTag), const pageStart = (safePage - 1) * PAGE_SIZE
[categoryFiltered, activeTag], const pagedItems = filtered.slice(pageStart, pageStart + PAGE_SIZE)
)
const windows = useMemo(() => gpWindows(meetings, now), [meetings, now])
const grouped = useMemo(() => groupByWindow(tagFiltered, windows), [tagFiltered, windows])
const windowSections = useMemo(
() => sortWindowBucketsNewestFirst(grouped.windows),
[grouped.windows],
)
const activeWindow = useMemo(
() => activeDigestWindow(windows, meetings, now),
[windows, meetings, now],
)
const sinceLastItems = useMemo(
() => itemsForWindow(tagFiltered, activeWindow),
[tagFiltered, activeWindow],
)
const sinceLastTags = useMemo(() => topTags(sinceLastItems), [sinceLastItems])
const sinceLabel = sinceLastLabel(meetings, now)
const taggedByUrl = useMemo(() => {
const map = new Map<string, TaggedNewsItem>()
for (const item of tagFiltered) map.set(item.url, item)
return map
}, [tagFiltered])
const recentTagged = useMemo(() => {
const urls = new Set(grouped.recent.map((item) => item.url))
return tagFiltered.filter((item) => urls.has(item.url))
}, [grouped.recent, tagFiltered])
const counts: Record<Category, number> = { const counts: Record<Category, number> = {
all: allNews.length, all: allNews.length,
@@ -506,14 +374,22 @@ export function BriefingPage() {
const handleClose = useCallback(() => setSelectedItem(null), []) const handleClose = useCallback(() => setSelectedItem(null), [])
const handleTagClick = useCallback((tag: DigestTag) => { useEffect(() => {
setActiveTag((current) => (current === tag.key ? null : tag.key)) setPage((current) => Math.min(current, pageCount))
}, [pageCount])
const handlePageChange = useCallback(
(nextPage: number) => {
setPage(Math.min(Math.max(nextPage, 1), pageCount))
setSelectedItem(null) setSelectedItem(null)
}, []) window.scrollTo({ top: 0, behavior: 'smooth' })
},
[pageCount],
)
const unreadCount = allNews.filter((i) => !i.read_at).length const unreadCount = allNews.filter((i) => !i.read_at).length
const hasDigest = meetings.length > 0 const pageEnd = Math.min(pageStart + pagedItems.length, filtered.length)
const showEmpty = tagFiltered.length === 0 && grouped.recent.length === 0 const showPagination = filtered.length > PAGE_SIZE
return ( return (
<div className="bp-page" data-testid="briefing-page"> <div className="bp-page" data-testid="briefing-page">
@@ -532,106 +408,74 @@ export function BriefingPage() {
<CategoryTabs <CategoryTabs
active={activeCategory} active={activeCategory}
counts={counts} counts={counts}
onChange={(c) => { onChange={(c) => { setActiveCategory(c); setSelectedItem(null); setPage(1) }}
setActiveCategory(c)
setSelectedItem(null)
setActiveTag(null)
}}
/> />
{hasDigest && ( {filtered.length === 0 ? (
<div className="digest-sticky" data-testid="digest-sticky-header">
<div className="digest-sticky-head">
<h2 className="digest-sticky-title">Since {sinceLabel}</h2>
<span className="digest-sticky-count">
{sinceLastItems.length} item{sinceLastItems.length === 1 ? '' : 's'}
</span>
</div>
{(sinceLastTags.length > 0 || activeTag) && (
<div className="digest-sticky-tags">
{sinceLastTags.map((tag) => (
<TagChip
key={tag.key}
tag={tag}
active={activeTag === tag.key}
onClick={() => handleTagClick(tag)}
/>
))}
{activeTag && (
<button
type="button"
className="digest-filter-clear"
onClick={() => setActiveTag(null)}
data-testid="digest-filter-clear"
>
Clear filter
</button>
)}
</div>
)}
</div>
)}
{showEmpty ? (
<div className="bp-empty"> <div className="bp-empty">
No {activeCategory !== 'all' ? activeCategory : ''} items available. No {activeCategory !== 'all' ? activeCategory : ''} items available.
{activeTag ? ' Try clearing the tag filter.' : ''}
{!activeTag && (
<>
{' '}
Run <code>box-box --ingest-news</code> to refresh feeds. Run <code>box-box --ingest-news</code> to refresh feeds.
</>
)}
</div> </div>
) : ( ) : (
<> <>
{windowSections.map(({ window, items }) => ( {showPagination && (
<section <div className="bp-pagination bp-pagination-top">
key={window.meeting_key} <span className="bp-pagination-meta mono">
className="digest-section" {pageStart + 1}-{pageEnd} of {filtered.length}
data-testid={`digest-window-${window.meeting_key}`} </span>
<div className="bp-pagination-actions">
<button
className="bp-page-btn"
onClick={() => handlePageChange(safePage - 1)}
disabled={safePage === 1}
> >
<div className="digest-section-head"> Previous
<h3 className="digest-section-title">{window.meeting_name}</h3> </button>
<span className="digest-section-count">{items.length}</span> <span className="bp-page-current mono">
Page {safePage} / {pageCount}
</span>
<button
className="bp-page-btn"
onClick={() => handlePageChange(safePage + 1)}
disabled={safePage === pageCount}
>
Next
</button>
</div> </div>
<div className={`bp-grid${selectedItem ? ' bp-grid-narrow' : ''}`}>
{items.map((item) => {
const tagged = taggedByUrl.get(item.url) ?? { ...item, tags: [] }
return (
<BriefingCard
key={item.url}
item={tagged}
isActive={selectedItem?.url === item.url}
activeTag={activeTag}
onSelect={handleSelect}
onTagClick={handleTagClick}
/>
)
})}
</div> </div>
</section> )}
))}
{recentTagged.length > 0 && (
<section className="digest-section digest-recent-section" data-testid="digest-recent">
<div className="digest-section-head">
<h3 className="digest-section-title">Recent</h3>
<span className="digest-section-count">{recentTagged.length}</span>
</div>
<div className={`bp-grid${selectedItem ? ' bp-grid-narrow' : ''}`}> <div className={`bp-grid${selectedItem ? ' bp-grid-narrow' : ''}`}>
{recentTagged.map((item) => ( {pagedItems.map((item) => (
<BriefingCard <BriefingCard
key={item.url} key={item.url}
item={item} item={item}
isActive={selectedItem?.url === item.url} isActive={selectedItem?.url === item.url}
activeTag={activeTag}
onSelect={handleSelect} onSelect={handleSelect}
onTagClick={handleTagClick}
/> />
))} ))}
</div> </div>
</section>
{showPagination && (
<div className="bp-pagination bp-pagination-bottom">
<button
className="bp-page-btn"
onClick={() => handlePageChange(safePage - 1)}
disabled={safePage === 1}
>
Previous
</button>
<span className="bp-page-current mono">
Page {safePage} / {pageCount}
</span>
<button
className="bp-page-btn"
onClick={() => handlePageChange(safePage + 1)}
disabled={safePage === pageCount}
>
Next
</button>
</div>
)} )}
</> </>
)} )}

View File

@@ -1,5 +1,6 @@
import { useMemo, useState } from 'react' import { useMemo, useState } from 'react'
import { useQuery } from '@tanstack/react-query' import { useQuery } from '@tanstack/react-query'
import { Link } from '@tanstack/react-router'
import { fetchChampionshipHub, fetchSeasons } from '../api' import { fetchChampionshipHub, fetchSeasons } from '../api'
import { teamColor } from '../utils' import { teamColor } from '../utils'
import type { ChampHubDriver, ChampionshipHub } from '../types' import type { ChampHubDriver, ChampionshipHub } from '../types'
@@ -242,6 +243,7 @@ function ChampionshipBody({ hub, view, setView }: BodyProps) {
leaderPoints={leader.points} leaderPoints={leader.points}
titleMath={titleMath} titleMath={titleMath}
roundsLeft={hub.rounds_left} roundsLeft={hub.rounds_left}
season={hub.season}
/> />
)} )}
{view === 'constructors' && <ConstructorsView hub={hub} />} {view === 'constructors' && <ConstructorsView hub={hub} />}
@@ -271,11 +273,13 @@ function DriversView({
leaderPoints, leaderPoints,
titleMath, titleMath,
roundsLeft, roundsLeft,
season,
}: { }: {
enriched: EnrichedDriver[] enriched: EnrichedDriver[]
leaderPoints: number leaderPoints: number
titleMath: string titleMath: string
roundsLeft: number roundsLeft: number
season: number
}) { }) {
const podium = enriched.slice(0, 3) const podium = enriched.slice(0, 3)
return ( return (
@@ -360,12 +364,19 @@ function DriversView({
P{e.pos} P{e.pos}
</td> </td>
<td> <td>
<div className="champ-drv"> <Link
to="/drivers/$driverNumber"
params={{ driverNumber: String(e.d.driver_number) }}
search={{ year: season }}
className="champ-drv"
style={{ color: 'inherit', textDecoration: 'none' }}
data-testid={`champ-driver-link-${e.d.driver_number}`}
>
<span className="champ-drv-bar" style={{ background: e.color }} /> <span className="champ-drv-bar" style={{ background: e.color }} />
<span className="champ-drv-code mono">{e.d.name_acronym}</span> <span className="champ-drv-code mono">{e.d.name_acronym}</span>
<span className="champ-drv-name">{e.d.full_name}</span> <span className="champ-drv-name">{e.d.full_name}</span>
<span className="champ-drv-num mono">#{e.d.driver_number}</span> <span className="champ-drv-num mono">#{e.d.driver_number}</span>
</div> </Link>
</td> </td>
<td className="champ-td-team">{e.d.team_name}</td> <td className="champ-td-team">{e.d.team_name}</td>
<td className="r mono champ-td-pts">{fmtPts(e.d.points)}</td> <td className="r mono champ-td-pts">{fmtPts(e.d.points)}</td>

View File

@@ -0,0 +1,369 @@
import { useQuery } from '@tanstack/react-query'
import { Link } from '@tanstack/react-router'
import { fetchDriverSummary, fetchSeasons } from '../api'
import { teamColor } from '../utils'
import { countryFlag } from '../lib/gpIdentity'
import {
formatDelta,
formatPosition,
gridFinishDeltas,
type RoundDelta,
} from '../lib/driverProfile'
import type { DriverSummary } from '../types'
import '../styles/driver-profile.css'
interface Props {
driverNumber: number
year?: number
}
function fmtPts(n: number): string {
return Number.isInteger(n) ? String(n) : n.toFixed(1)
}
export function DriverProfilePage({ driverNumber, year }: Props) {
// Without an explicit ?year=, default to the latest ingested season; if the
// seasons list is empty/unavailable the backend falls back to the current year.
const seasonsQuery = useQuery({
queryKey: ['seasons'],
queryFn: fetchSeasons,
enabled: year == null,
})
const resolvedYear = year ?? seasonsQuery.data?.[0]
const seasonsSettled = year != null || !seasonsQuery.isLoading
const summaryQuery = useQuery({
queryKey: ['driver-summary', driverNumber, resolvedYear ?? 'latest'],
queryFn: () => fetchDriverSummary(driverNumber, resolvedYear),
enabled: seasonsSettled && driverNumber > 0,
staleTime: 5 * 60_000,
})
if (driverNumber <= 0) {
return <div className="page error-box">Invalid driver number</div>
}
if (!seasonsSettled || summaryQuery.isLoading) {
return <div className="page loading-state">loading driver profile</div>
}
if (summaryQuery.isError) {
return (
<div className="page error-box">
{summaryQuery.error instanceof Error
? summaryQuery.error.message
: 'Failed to load driver profile'}
</div>
)
}
const summary = summaryQuery.data
if (!summary) {
return <div className="page error-box">No driver data</div>
}
return <DriverProfileBody summary={summary} />
}
function DriverProfileBody({ summary }: { summary: DriverSummary }) {
const color = teamColor(summary.team_colour)
const deltas = gridFinishDeltas(summary.rounds)
return (
<div className="dp-page" data-testid="driver-profile">
<header className="dp-header" data-testid="dp-header" style={{ borderLeftColor: color }}>
<div className="dp-identity">
<div className="dp-title-row">
<span className="dp-code mono">{summary.name_acronym || `#${summary.driver_number}`}</span>
<span className="dp-num mono" style={{ color }}>
#{summary.driver_number}
</span>
</div>
<h1 className="dp-name">{summary.full_name || `Driver ${summary.driver_number}`}</h1>
<div className="dp-team">
<span className="dp-team-swatch" style={{ background: color }} />
{summary.team_name || 'Unknown team'}
<span className="dp-season mono">{summary.season}</span>
</div>
</div>
<div className="dp-stat-rail">
<div className="dp-stat">
<div className="dp-stat-value mono">{summary.position > 0 ? `P${summary.position}` : '—'}</div>
<div className="dp-stat-label">Championship</div>
</div>
<div className="dp-stat">
<div className="dp-stat-value mono">{fmtPts(summary.points)}</div>
<div className="dp-stat-label">Points</div>
</div>
<div className="dp-stat">
<div className="dp-stat-value mono">{summary.wins}</div>
<div className="dp-stat-label">Wins</div>
</div>
<div className="dp-stat">
<div className="dp-stat-value mono">{summary.podiums}</div>
<div className="dp-stat-label">Podiums</div>
</div>
<div className="dp-stat">
<div className="dp-stat-value mono">{summary.poles}</div>
<div className="dp-stat-label">Poles</div>
</div>
</div>
<Link to="/championship" className="dp-back mono">
Championship
</Link>
</header>
<section className="dp-section" data-testid="dp-form">
<h2 className="dp-section-title mono">Season form</h2>
{summary.cumulative.length > 0 ? (
<div className="dp-form-grid">
<CumulativeLine
cumulative={summary.cumulative}
labels={summary.round_labels}
color={color}
/>
<FormStrip form={summary.form} color={color} />
</div>
) : (
<div className="dp-empty">No completed rounds yet.</div>
)}
</section>
<section className="dp-section" data-testid="dp-quali-race">
<h2 className="dp-section-title mono">Quali vs race</h2>
{deltas.some((d) => d.delta != null) ? (
<GridVsRaceChart deltas={deltas} color={color} />
) : (
<div className="dp-empty">No grid-vs-finish data yet.</div>
)}
</section>
<section className="dp-section" data-testid="dp-rounds">
<h2 className="dp-section-title mono">Track by track</h2>
{summary.rounds.length > 0 ? (
<RoundsTable summary={summary} deltas={deltas} />
) : (
<div className="dp-empty">No completed rounds yet.</div>
)}
</section>
</div>
)
}
const LINE_W = 640
const LINE_H = 180
const LINE_PL = 44
const LINE_PR = 16
const LINE_PT = 12
const LINE_PB = 24
function CumulativeLine({
cumulative,
labels,
color,
}: {
cumulative: number[]
labels: string[]
color: string
}) {
const n = cumulative.length
const maxY = Math.max(25, ...cumulative)
const plotW = LINE_W - LINE_PL - LINE_PR
const plotH = LINE_H - LINE_PT - LINE_PB
const x = (i: number) => (n <= 1 ? LINE_PL + plotW / 2 : LINE_PL + (i * plotW) / (n - 1))
const y = (v: number) => LINE_PT + plotH - (v / maxY) * plotH
const points = cumulative.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(' ')
const tickStep = Math.max(1, Math.ceil(n / 8))
const ticks: { x: number; label: string }[] = []
for (let i = 0; i < n; i += tickStep) {
ticks.push({ x: x(i), label: labels[i] ?? `R${i + 1}` })
}
return (
<figure className="dp-chart">
<figcaption className="dp-chart-caption mono">Cumulative points</figcaption>
<svg viewBox={`0 0 ${LINE_W} ${LINE_H}`} className="dp-chart-svg" role="img" aria-label="Cumulative points per round">
{[0, 0.5, 1].map((f) => {
const v = Math.round(maxY * f)
return (
<g key={f}>
<line x1={LINE_PL} y1={y(v)} x2={LINE_W - LINE_PR} y2={y(v)} className="dp-gridline" />
<text x={LINE_PL - 6} y={y(v) + 3} textAnchor="end" className="dp-axis">
{v}
</text>
</g>
)
})}
{ticks.map((t) => (
<text key={t.label} x={t.x} y={LINE_H - 8} textAnchor="middle" className="dp-axis">
{t.label}
</text>
))}
<polyline
points={points}
fill="none"
stroke={color}
strokeWidth="2.2"
strokeLinejoin="round"
strokeLinecap="round"
/>
<circle cx={x(n - 1)} cy={y(cumulative[n - 1])} r="3.2" fill={color} />
</svg>
</figure>
)
}
function FormStrip({ form, color }: { form: number[]; color: string }) {
const max = Math.max(25, ...form)
return (
<div className="dp-form-strip">
<div className="dp-chart-caption mono">Last {form.length} races</div>
<div className="dp-form-bars">
{form.map((pts, i) => (
<div className="dp-form-bar" key={i} title={`${fmtPts(pts)} pts`}>
<div
className="dp-form-bar-fill"
style={{ height: `${Math.max(4, (pts / max) * 100)}%`, background: color }}
/>
<span className="dp-form-bar-val mono">{fmtPts(pts)}</span>
</div>
))}
</div>
</div>
)
}
const DELTA_H = 190
const DELTA_PT = 14
const DELTA_PB = 30
function GridVsRaceChart({ deltas, color }: { deltas: RoundDelta[]; color: string }) {
const maxAbs = Math.max(1, ...deltas.map((d) => Math.abs(d.delta ?? 0)))
const colW = 34
const w = Math.max(240, deltas.length * colW)
const plotH = DELTA_H - DELTA_PT - DELTA_PB
const zeroY = DELTA_PT + plotH / 2
const scale = plotH / 2 / maxAbs
return (
<figure className="dp-chart">
<figcaption className="dp-chart-caption mono">
Positions gained () / lost () from grid to flag, per round
</figcaption>
<div className="dp-chart-scroll">
<svg
viewBox={`0 0 ${w} ${DELTA_H}`}
width={w}
height={DELTA_H}
className="dp-delta-svg"
role="img"
aria-label="Positions gained or lost per round"
>
<line x1={0} y1={zeroY} x2={w} y2={zeroY} className="dp-zeroline" />
{deltas.map((d, i) => {
const cx = i * colW + colW / 2
if (d.delta == null) {
return (
<g key={d.round}>
<text x={cx} y={zeroY - 6} textAnchor="middle" className="dp-axis">
·
</text>
<text x={cx} y={DELTA_H - 8} textAnchor="middle" className="dp-axis">
R{d.round}
</text>
</g>
)
}
const h = Math.abs(d.delta) * scale
const yTop = d.delta >= 0 ? zeroY - h : zeroY
return (
<g key={d.round}>
<title>{`${d.label}: ${formatPosition(d.grid)}${formatPosition(d.finish)} (${formatDelta(d.delta)})`}</title>
<rect
x={cx - 8}
y={yTop}
width={16}
height={Math.max(1.5, h)}
rx={2}
fill={color}
opacity={d.delta >= 0 ? 0.95 : 0.45}
/>
<text
x={cx}
y={d.delta >= 0 ? yTop - 4 : yTop + h + 11}
textAnchor="middle"
className="dp-delta-val mono"
>
{formatDelta(d.delta)}
</text>
<text x={cx} y={DELTA_H - 8} textAnchor="middle" className="dp-axis">
R{d.round}
</text>
</g>
)
})}
</svg>
</div>
</figure>
)
}
function statusNote(d: RoundDelta): string {
if (d.status === 'dnf') return 'DNF'
if (d.status === 'dns') return 'DNS'
if (d.status === 'dsq') return 'DSQ'
if (d.status === 'absent') return '—'
return ''
}
function RoundsTable({ summary, deltas }: { summary: DriverSummary; deltas: RoundDelta[] }) {
return (
<div className="dp-scroll">
<table className="dp-table">
<thead>
<tr>
<th className="l">Rnd</th>
<th className="l">Grand Prix</th>
<th className="r">Grid</th>
<th className="r">Race</th>
<th className="r">Δ</th>
<th className="r">Pts</th>
<th className="l"></th>
</tr>
</thead>
<tbody>
{summary.rounds.map((r, i) => {
const d = deltas[i]
return (
<tr key={r.meeting_key}>
<td className="mono dp-td-dim">R{i + 1}</td>
<td>
<span className="dp-flag" aria-hidden="true">
{countryFlag({ country_code: r.country_code, country_flag: '' })}
</span>
{r.meeting_name}
</td>
<td className="r mono">{formatPosition(d.grid)}</td>
<td className="r mono">{formatPosition(d.finish)}</td>
<td
className="r mono"
style={{
color:
d.delta == null
? 'var(--text-3)'
: d.delta > 0
? 'var(--green)'
: d.delta < 0
? 'var(--red)'
: 'var(--text-2)',
}}
>
{formatDelta(d.delta)}
</td>
<td className="r mono">{fmtPts(r.points)}</td>
<td className="dp-td-dim mono">{statusNote(d)}</td>
</tr>
)
})}
</tbody>
</table>
</div>
)
}

View File

@@ -6,12 +6,17 @@ import { DataLibraryPage } from './pages/DataLibraryPage'
import { LiveTimingPage } from './pages/LiveTimingPage' import { LiveTimingPage } from './pages/LiveTimingPage'
import { BriefingPage } from './pages/BriefingPage' import { BriefingPage } from './pages/BriefingPage'
import { ChampionshipPage } from './pages/ChampionshipPage' import { ChampionshipPage } from './pages/ChampionshipPage'
import { DriverProfilePage } from './pages/DriverProfilePage'
import { RacePreviewPage } from './pages/RacePreviewPage' import { RacePreviewPage } from './pages/RacePreviewPage'
type RaceHubSearch = { type RaceHubSearch = {
session_key?: number session_key?: number
} }
type DriverProfileSearch = {
year?: number
}
const rootRoute = createRootRoute({ const rootRoute = createRootRoute({
component: () => ( component: () => (
<> <>
@@ -65,6 +70,20 @@ export const championshipRoute = createRoute({
component: ChampionshipPage, component: ChampionshipPage,
}) })
export const driverProfileRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/drivers/$driverNumber',
validateSearch: (search: Record<string, unknown>): DriverProfileSearch => {
const year = Number(search.year)
return Number.isFinite(year) && year > 0 ? { year } : {}
},
component: function DriverProfileRoute() {
const { driverNumber } = driverProfileRoute.useParams()
const { year } = driverProfileRoute.useSearch()
return <DriverProfilePage driverNumber={Number(driverNumber) || 0} year={year} />
},
})
export const briefingRoute = createRoute({ export const briefingRoute = createRoute({
getParentRoute: () => rootRoute, getParentRoute: () => rootRoute,
path: '/briefing', path: '/briefing',
@@ -84,6 +103,7 @@ const routeTree = rootRoute.addChildren([
dataLibraryRoute, dataLibraryRoute,
liveTimingRoute, liveTimingRoute,
championshipRoute, championshipRoute,
driverProfileRoute,
briefingRoute, briefingRoute,
previewRoute, previewRoute,
]) ])

View File

@@ -1,178 +0,0 @@
/* ── Calendar-aware paddock digest ── */
.digest-sticky {
position: sticky;
top: 0;
z-index: 20;
margin-bottom: var(--s5);
padding: var(--s4) var(--s5);
background: color-mix(in srgb, var(--bg) 92%, transparent);
backdrop-filter: blur(8px);
border: 1px solid var(--border);
border-radius: 6px;
}
.digest-sticky-head {
display: flex;
align-items: baseline;
gap: var(--s3);
flex-wrap: wrap;
margin-bottom: var(--s3);
}
.digest-sticky-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
margin: 0;
}
.digest-sticky-count {
font-size: 11px;
color: var(--text-3);
font-family: var(--f-mono);
letter-spacing: 0.04em;
}
.digest-sticky-tags {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
align-items: center;
}
.digest-tag-chip {
display: inline-flex;
align-items: center;
gap: var(--s2);
padding: 2px 8px;
border-radius: 999px;
border: 1px solid var(--border-2);
background: var(--surface);
color: var(--text-2);
font-size: 11px;
font-family: var(--f-mono);
cursor: pointer;
transition: border-color 0.1s, color 0.1s, background 0.1s;
}
.digest-tag-chip:hover {
color: var(--text);
background: var(--surface-h);
}
.digest-tag-chip.active {
color: var(--text);
border-color: var(--tag-colour, var(--red));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--tag-colour, var(--red)) 35%, transparent);
}
.digest-tag-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--tag-colour, var(--text-3));
flex-shrink: 0;
}
.digest-filter-clear {
padding: 2px 8px;
border: 1px dashed var(--border-2);
border-radius: 999px;
background: none;
color: var(--text-3);
font-size: 11px;
font-family: var(--f-mono);
cursor: pointer;
}
.digest-filter-clear:hover {
color: var(--text);
border-color: var(--border-2);
}
.digest-section {
margin-bottom: var(--s6);
}
.digest-section-head {
display: flex;
align-items: baseline;
gap: var(--s3);
margin-bottom: var(--s4);
padding-bottom: var(--s3);
border-bottom: 1px solid var(--border);
}
.digest-section-title {
font-size: 13px;
font-weight: 600;
color: var(--text);
margin: 0;
letter-spacing: 0.02em;
}
.digest-section-count {
font-size: 11px;
color: var(--text-3);
font-family: var(--f-mono);
}
.digest-recent-section .digest-section-title {
color: var(--text-2);
}
.bp-card-tags {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin-top: var(--s2);
}
.bp-card-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 6px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text-2);
font-size: 10px;
font-family: var(--f-mono);
cursor: pointer;
}
.bp-card-tag:hover {
color: var(--text);
border-color: var(--border-2);
}
.bp-card-tag.active {
border-color: var(--tag-colour, var(--red));
}
.cc-brief-digest-meta {
display: flex;
align-items: center;
gap: var(--s2);
margin-bottom: var(--s3);
font-size: 11px;
color: var(--text-3);
font-family: var(--f-mono);
}
.cc-brief-digest-tags {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
}
.cc-brief-tag {
font-size: 10px;
padding: 1px 6px;
border-radius: 999px;
border: 1px solid var(--border);
color: var(--text-2);
font-family: var(--f-mono);
}

View File

@@ -0,0 +1,289 @@
/* Driver profile page (/drivers/$driverNumber) */
.dp-page {
max-width: 1100px;
margin: 0 auto;
padding: var(--s6) var(--s5);
display: flex;
flex-direction: column;
gap: var(--s6);
}
/* --- header --- */
.dp-header {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--s5);
padding: var(--s5);
padding-left: var(--s6);
border: 1px solid var(--border);
border-left: 4px solid var(--red);
border-radius: var(--r2);
background: var(--surface);
}
.dp-title-row {
display: flex;
align-items: baseline;
gap: var(--s3);
}
.dp-code {
font-size: 13px;
letter-spacing: 0.12em;
color: var(--text-2);
text-transform: uppercase;
}
.dp-num {
font-size: 13px;
font-weight: 700;
}
.dp-name {
margin: var(--s2) 0;
font-size: 30px;
line-height: 1.1;
letter-spacing: -0.01em;
}
.dp-team {
display: flex;
align-items: center;
gap: var(--s3);
font-size: 13px;
color: var(--text-2);
}
.dp-team-swatch {
width: 10px;
height: 10px;
border-radius: 2px;
}
.dp-season {
color: var(--text-3);
}
.dp-stat-rail {
display: flex;
gap: var(--s5);
}
.dp-stat {
min-width: 72px;
}
.dp-stat-value {
font-size: 22px;
font-weight: 700;
}
.dp-stat-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-3);
}
.dp-back {
position: absolute;
top: var(--s4);
right: var(--s5);
font-size: 12px;
color: var(--text-3);
text-decoration: none;
}
.dp-back:hover {
color: var(--text);
}
/* --- sections --- */
.dp-section {
display: flex;
flex-direction: column;
gap: var(--s4);
}
.dp-section-title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-2);
}
.dp-empty {
padding: var(--s5);
border: 1px dashed var(--border);
border-radius: var(--r2);
color: var(--text-3);
font-size: 13px;
}
/* --- charts --- */
.dp-form-grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr);
gap: var(--s5);
align-items: stretch;
}
@media (max-width: 760px) {
.dp-form-grid {
grid-template-columns: 1fr;
}
}
.dp-chart {
margin: 0;
padding: var(--s4);
border: 1px solid var(--border);
border-radius: var(--r2);
background: var(--surface);
min-width: 0;
}
.dp-chart-caption {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-3);
margin-bottom: var(--s3);
}
.dp-chart-svg {
display: block;
width: 100%;
height: auto;
}
.dp-chart-scroll {
overflow-x: auto;
}
.dp-gridline {
stroke: var(--border);
stroke-width: 1;
}
.dp-zeroline {
stroke: var(--text-3);
stroke-width: 1;
stroke-dasharray: 3 3;
}
.dp-axis {
fill: var(--text-3);
font-family: var(--f-mono);
font-size: 10px;
}
.dp-delta-svg {
display: block;
}
.dp-delta-val {
fill: var(--text-2);
font-size: 10px;
}
/* --- form strip --- */
.dp-form-strip {
padding: var(--s4);
border: 1px solid var(--border);
border-radius: var(--r2);
background: var(--surface);
display: flex;
flex-direction: column;
}
.dp-form-bars {
flex: 1;
display: flex;
align-items: flex-end;
gap: var(--s3);
min-height: 110px;
}
.dp-form-bar {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
gap: var(--s2);
}
.dp-form-bar-fill {
width: 100%;
max-width: 34px;
border-radius: 2px 2px 0 0;
opacity: 0.9;
}
.dp-form-bar-val {
font-size: 11px;
color: var(--text-2);
}
/* --- rounds table --- */
.dp-scroll {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--r2);
background: var(--surface);
}
.dp-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.dp-table th {
padding: var(--s3) var(--s4);
font-family: var(--f-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-3);
border-bottom: 1px solid var(--border);
}
.dp-table td {
padding: var(--s3) var(--s4);
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.dp-table tbody tr:last-child td {
border-bottom: none;
}
.dp-table th.l,
.dp-table td.l {
text-align: left;
}
.dp-table th.r,
.dp-table td.r {
text-align: right;
}
.dp-td-dim {
color: var(--text-3);
}
.dp-flag {
margin-right: var(--s3);
}

View File

@@ -1,209 +0,0 @@
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { render, screen, waitFor, fireEvent, within } from '@testing-library/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { BriefingPage } from '../pages/BriefingPage'
import type { ChampHubDriver, ChampHubTeam, ChampionshipHub, Meeting, NewsItem } from '../types'
vi.mock('../api', () => ({
fetchNews: vi.fn(),
fetchNewsArticle: vi.fn(),
markNewsRead: vi.fn(),
fetchSeasons: vi.fn(),
fetchSeasonMeetings: vi.fn(),
fetchChampionshipHub: vi.fn(),
}))
import {
fetchNews,
fetchNewsArticle,
fetchSeasons,
fetchSeasonMeetings,
fetchChampionshipHub,
markNewsRead,
} from '../api'
const mockFetchNews = vi.mocked(fetchNews)
const mockFetchNewsArticle = vi.mocked(fetchNewsArticle)
const mockFetchSeasons = vi.mocked(fetchSeasons)
const mockFetchSeasonMeetings = vi.mocked(fetchSeasonMeetings)
const mockFetchHub = vi.mocked(fetchChampionshipHub)
const mockMarkNewsRead = vi.mocked(markNewsRead)
const bahrain: Meeting = {
meeting_key: 1,
meeting_name: 'Bahrain',
meeting_official_name: 'Bahrain GP',
location: 'Sakhir',
country_name: 'Bahrain',
country_code: 'BRN',
country_flag: '',
circuit_short_name: 'Sakhir',
date_start: '2025-03-14T00:00:00+00:00',
date_end: '2025-03-16T23:59:59+00:00',
year: 2025,
}
const monaco: Meeting = {
meeting_key: 2,
meeting_name: 'Monaco',
meeting_official_name: 'Monaco GP',
location: 'Monaco',
country_name: 'Monaco',
country_code: 'MON',
country_flag: '',
circuit_short_name: 'Monaco',
date_start: '2025-05-23T00:00:00+00:00',
date_end: '2025-05-25T23:59:59+00:00',
year: 2025,
}
const drivers: ChampHubDriver[] = [
{
driver_number: 1,
name_acronym: 'VER',
full_name: 'Max Verstappen',
team_name: 'Red Bull',
team_colour: '3671c6',
points: 100,
position: 1,
wins: 3,
podiums: 5,
poles: 2,
form: [25, 18, 25],
cumulative: [25, 43, 68, 100],
teammate_wins: 4,
teammate_losses: 1,
},
{
driver_number: 4,
name_acronym: 'NOR',
full_name: 'Lando Norris',
team_name: 'McLaren',
team_colour: 'ff8000',
points: 80,
position: 2,
wins: 1,
podiums: 4,
poles: 1,
form: [18, 25, 18],
cumulative: [18, 36, 54, 80],
teammate_wins: 3,
teammate_losses: 2,
},
]
const teams: ChampHubTeam[] = [
{ team_name: 'Red Bull', team_colour: '3671c6', points: 150, position: 1, wins: 4 },
{ team_name: 'McLaren', team_colour: 'ff8000', points: 120, position: 2, wins: 2 },
]
const hub: ChampionshipHub = {
season: 2025,
round: 2,
total_rounds: 2,
rounds_left: 0,
last_race: 'Monaco GP',
round_labels: ['R1', 'R2'],
drivers,
teams,
}
const newsItems: NewsItem[] = [
{
source: 'autosport-f1',
title: 'Verstappen sets the pace in Bahrain',
url: 'https://example.com/bahrain-ver',
published_at: '2025-03-15T10:00:00Z',
fetched_at: '2025-03-15T11:00:00Z',
summary: 'Red Bull dominate opening practice',
},
{
source: 'racefans-f1',
title: 'Norris targets Monaco upgrade',
url: 'https://example.com/monaco-nor',
published_at: '2025-04-20T10:00:00Z',
fetched_at: '2025-04-20T11:00:00Z',
summary: 'McLaren bring new floor',
},
{
source: 'bbc-f1',
title: 'Undated paddock rumour',
url: 'https://example.com/undated',
fetched_at: '2025-04-21T11:00:00Z',
},
]
function renderPage() {
const queryClient = new QueryClient({
defaultOptions: { queries: { retry: false } },
})
return render(
<QueryClientProvider client={queryClient}>
<BriefingPage />
</QueryClientProvider>,
)
}
describe('BriefingPage digest layout', () => {
beforeEach(() => {
vi.clearAllMocks()
vi.setSystemTime(new Date('2025-04-10T12:00:00Z'))
mockFetchSeasons.mockResolvedValue([2025])
mockFetchSeasonMeetings.mockResolvedValue([bahrain, monaco])
mockFetchHub.mockResolvedValue(hub)
mockFetchNews.mockResolvedValue(newsItems)
mockFetchNewsArticle.mockResolvedValue({ title: 'Article', content: '<p>Body</p>' })
mockMarkNewsRead.mockResolvedValue(undefined)
})
afterEach(() => {
vi.useRealTimers()
})
it('renders sticky since-last header, GP sections, and recent bucket', async () => {
renderPage()
await waitFor(() => {
expect(screen.getByTestId('digest-sticky-header')).toHaveTextContent('Since Bahrain')
})
expect(screen.getByTestId('digest-window-2')).toHaveTextContent('Monaco')
expect(screen.getByTestId('digest-window-1')).toHaveTextContent('Bahrain')
expect(screen.getByTestId('digest-recent')).toHaveTextContent('Undated paddock rumour')
expect(screen.getByText('Verstappen sets the pace in Bahrain')).toBeInTheDocument()
expect(screen.getByText('Norris targets Monaco upgrade')).toBeInTheDocument()
})
it('filters the digest when a tag chip is clicked', async () => {
renderPage()
await waitFor(() => {
expect(screen.getByTestId('digest-sticky-header')).toBeInTheDocument()
})
const sticky = screen.getByTestId('digest-sticky-header')
const norTag = within(sticky).getByRole('button', { name: /^NOR$/i })
fireEvent.click(norTag)
await waitFor(() => {
expect(screen.queryByText('Verstappen sets the pace in Bahrain')).not.toBeInTheDocument()
})
expect(screen.getByText('Norris targets Monaco upgrade')).toBeInTheDocument()
expect(screen.getByTestId('digest-filter-clear')).toBeInTheDocument()
fireEvent.click(screen.getByTestId('digest-filter-clear'))
await waitFor(() => {
expect(screen.getByText('Verstappen sets the pace in Bahrain')).toBeInTheDocument()
})
})
it('preserves category tabs', async () => {
renderPage()
await waitFor(() => {
expect(screen.getByRole('tab', { name: /All/i })).toBeInTheDocument()
})
expect(screen.getByRole('tab', { name: /News/i })).toBeInTheDocument()
})
})

View File

@@ -0,0 +1,160 @@
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { render, screen, waitFor } from '@testing-library/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { RouterProvider, createRouter, createRootRoute, createRoute } from '@tanstack/react-router'
import { DriverProfilePage } from '../pages/DriverProfilePage'
import type { DriverSummary } from '../types'
vi.mock('../api', () => ({
fetchSeasons: vi.fn(),
fetchDriverSummary: vi.fn(),
}))
import { fetchSeasons, fetchDriverSummary } from '../api'
const mockFetchSeasons = vi.mocked(fetchSeasons)
const mockFetchSummary = vi.mocked(fetchDriverSummary)
const summary: DriverSummary = {
season: 2025,
driver_number: 1,
name_acronym: 'VER',
full_name: 'Max Verstappen',
team_name: 'Red Bull',
team_colour: '3671c6',
headshot_url: '',
points: 50,
position: 1,
wins: 2,
podiums: 2,
poles: 1,
form: [25, 25],
cumulative: [25, 50],
round_labels: ['R1', 'R2'],
rounds: [
{
meeting_key: 1201,
meeting_name: 'Bahrain Grand Prix',
country_code: 'BHR',
country_name: 'Bahrain',
race_position: 1,
grid_position: 1,
quali_position: 1,
points: 25,
dnf: false,
dns: false,
dsq: false,
},
{
meeting_key: 1202,
meeting_name: 'Saudi Arabian Grand Prix',
country_code: 'SAU',
country_name: 'Saudi Arabia',
race_position: 1,
grid_position: 4,
quali_position: 4,
points: 25,
dnf: false,
dns: false,
dsq: false,
},
],
}
function renderPage(props: { driverNumber: number; year?: number }) {
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
const rootRoute = createRootRoute({
component: () => (
<QueryClientProvider client={queryClient}>
<DriverProfilePage driverNumber={props.driverNumber} year={props.year} />
</QueryClientProvider>
),
})
const indexRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/',
component: () => null,
})
const router = createRouter({ routeTree: rootRoute.addChildren([indexRoute]) })
return render(<RouterProvider router={router} />)
}
describe('DriverProfilePage', () => {
beforeEach(() => {
vi.clearAllMocks()
mockFetchSeasons.mockResolvedValue([2025])
mockFetchSummary.mockResolvedValue(summary)
})
it('renders header, form, quali-vs-race, and rounds sections', async () => {
renderPage({ driverNumber: 1, year: 2025 })
await waitFor(() => {
expect(screen.getByTestId('driver-profile')).toBeInTheDocument()
})
// Header: identity + season stats.
expect(screen.getByTestId('dp-header')).toBeInTheDocument()
expect(screen.getByText('Max Verstappen')).toBeInTheDocument()
expect(screen.getByText('#1')).toBeInTheDocument()
expect(screen.getByText('Red Bull', { exact: false })).toBeInTheDocument()
// 'P1' / '50' also appear in the rounds table and chart axis.
expect(screen.getAllByText('P1').length).toBeGreaterThan(0)
expect(screen.getAllByText('50').length).toBeGreaterThan(0)
// Season form strip.
expect(screen.getByTestId('dp-form')).toBeInTheDocument()
expect(screen.getByText('Cumulative points')).toBeInTheDocument()
// Quali-vs-race chart shows the delta from the Saudi round (P4 → P1 = +3).
expect(screen.getByTestId('dp-quali-race')).toBeInTheDocument()
expect(screen.getAllByText('+3').length).toBeGreaterThan(0)
// Track-by-track table rows with flags.
const rounds = screen.getByTestId('dp-rounds')
expect(rounds).toBeInTheDocument()
expect(screen.getByText('Bahrain Grand Prix')).toBeInTheDocument()
expect(screen.getByText('Saudi Arabian Grand Prix')).toBeInTheDocument()
expect(rounds.textContent).toContain('🇧🇭')
expect(rounds.textContent).toContain('🇸🇦')
// With an explicit year, the seasons list is not needed.
expect(mockFetchSeasons).not.toHaveBeenCalled()
expect(mockFetchSummary).toHaveBeenCalledWith(1, 2025)
})
it('defaults to the latest season when no year is given', async () => {
renderPage({ driverNumber: 1 })
await waitFor(() => {
expect(screen.getByTestId('driver-profile')).toBeInTheDocument()
})
expect(mockFetchSummary).toHaveBeenCalledWith(1, 2025)
})
it('shows the API error message on failure', async () => {
mockFetchSummary.mockRejectedValue(new Error('API 404: Not Found'))
renderPage({ driverNumber: 99, year: 2025 })
await waitFor(() => {
expect(screen.getByText('API 404: Not Found')).toBeInTheDocument()
})
})
it('shows empty states when no rounds are completed', async () => {
mockFetchSummary.mockResolvedValue({
...summary,
form: [],
cumulative: [],
round_labels: [],
rounds: [],
})
renderPage({ driverNumber: 1, year: 2025 })
await waitFor(() => {
expect(screen.getByTestId('driver-profile')).toBeInTheDocument()
})
expect(screen.getAllByText('No completed rounds yet.').length).toBe(2)
expect(screen.getByText('No grid-vs-finish data yet.')).toBeInTheDocument()
})
})

View File

@@ -1,265 +0,0 @@
import { describe, it, expect } from 'vitest'
import {
activeDigestWindow,
filterByTag,
groupByWindow,
gpWindows,
itemsForWindow,
sinceLastLabel,
sortWindowBucketsNewestFirst,
tagItems,
topTags,
windowForDate,
} from '../lib/digest'
import type { ChampHubDriver, ChampHubTeam, Meeting, NewsItem } from '../types'
const meeting = (overrides: Partial<Meeting> = {}): Meeting => ({
meeting_key: 1,
meeting_name: 'Bahrain',
meeting_official_name: 'Bahrain GP',
location: 'Sakhir',
country_name: 'Bahrain',
country_code: 'BRN',
country_flag: '',
circuit_short_name: 'Sakhir',
date_start: '2025-03-14T00:00:00+00:00',
date_end: '2025-03-16T23:59:59+00:00',
year: 2025,
...overrides,
})
const news = (overrides: Partial<NewsItem> = {}): NewsItem => ({
source: 'autosport-f1',
title: 'Headline',
url: `https://example.com/${Math.random()}`,
fetched_at: '2025-04-01T12:00:00Z',
...overrides,
})
const driver = (over: Partial<ChampHubDriver>): ChampHubDriver => ({
driver_number: 1,
name_acronym: 'VER',
full_name: 'Max Verstappen',
team_name: 'Red Bull',
team_colour: '3671c6',
points: 100,
position: 1,
wins: 3,
podiums: 5,
poles: 2,
form: [25, 18, 25],
cumulative: [25, 43, 68, 100],
teammate_wins: 4,
teammate_losses: 1,
...over,
})
const team = (over: Partial<ChampHubTeam>): ChampHubTeam => ({
team_name: 'Red Bull',
team_colour: '3671c6',
points: 150,
position: 1,
wins: 4,
...over,
})
describe('gpWindows', () => {
const bahrain = meeting({ meeting_key: 1, meeting_name: 'Bahrain' })
const monaco = meeting({
meeting_key: 2,
meeting_name: 'Monaco',
date_start: '2025-05-23T00:00:00+00:00',
date_end: '2025-05-25T23:59:59+00:00',
})
const canada = meeting({
meeting_key: 3,
meeting_name: 'Canada',
date_start: '2025-06-13T00:00:00+00:00',
date_end: '2025-06-15T23:59:59+00:00',
})
it('derives inter-race windows mid-season', () => {
const now = new Date('2025-04-10T12:00:00Z')
const windows = gpWindows([bahrain, monaco, canada], now)
expect(windows).toHaveLength(3)
expect(windows[0].start).toBeNull()
expect(windows[0].end?.toISOString()).toBe(new Date('2025-05-23T00:00:00+00:00').toISOString())
expect(windows[1].start?.toISOString()).toBe(new Date('2025-03-16T23:59:59+00:00').toISOString())
expect(windows[1].end?.toISOString()).toBe(new Date('2025-06-13T00:00:00+00:00').toISOString())
expect(windows[2].start?.toISOString()).toBe(new Date('2025-05-25T23:59:59+00:00').toISOString())
expect(windows[2].end).toBeNull()
})
it('handles before the first race of the season', () => {
const now = new Date('2025-01-01T00:00:00Z')
const windows = gpWindows([bahrain, monaco], now)
expect(windows[0].start).toBeNull()
expect(activeDigestWindow(windows, [bahrain, monaco], now)?.meeting_name).toBe('Bahrain')
expect(sinceLastLabel([bahrain, monaco], now)).toBe('Before Bahrain')
})
it('handles after the final race of the season', () => {
const now = new Date('2025-12-01T00:00:00Z')
const windows = gpWindows([bahrain, monaco], now)
expect(activeDigestWindow(windows, [bahrain, monaco], now)?.meeting_name).toBe('Monaco')
expect(sinceLastLabel([bahrain, monaco], now)).toBe('Monaco')
expect(windows[1].end).toBeNull()
})
})
describe('groupByWindow', () => {
const bahrain = meeting({ meeting_key: 1 })
const monaco = meeting({
meeting_key: 2,
date_start: '2025-05-23T00:00:00+00:00',
date_end: '2025-05-25T23:59:59+00:00',
})
const windows = gpWindows([bahrain, monaco], new Date('2025-04-10T12:00:00Z'))
it('buckets dated items into the matching GP window', () => {
const items = [
news({ url: 'https://a', published_at: '2025-03-10T10:00:00Z', title: 'Pre-Bahrain' }),
news({ url: 'https://b', published_at: '2025-04-05T10:00:00Z', title: 'Between races' }),
news({ url: 'https://c', published_at: '2025-05-24T10:00:00Z', title: 'Monaco weekend' }),
]
const grouped = groupByWindow(items, windows)
const bahrainItems = grouped.windows.find((entry) => entry.window.meeting_key === 1)?.items ?? []
const monacoItems = grouped.windows.find((entry) => entry.window.meeting_key === 2)?.items ?? []
expect(bahrainItems).toHaveLength(1)
expect(bahrainItems[0].title).toBe('Pre-Bahrain')
expect(monacoItems).toHaveLength(2)
expect(monacoItems.map((item) => item.title)).toEqual(['Between races', 'Monaco weekend'])
})
it('puts undated items in the recent bucket', () => {
const items = [
news({ url: 'https://u', title: 'Undated story' }),
news({ url: 'https://d', published_at: '2025-04-05T10:00:00Z' }),
]
const grouped = groupByWindow(items, windows)
expect(grouped.recent).toHaveLength(1)
expect(grouped.recent[0].url).toBe('https://u')
})
it('sorts window buckets newest first for display', () => {
const items = [
news({ published_at: '2025-03-10T10:00:00Z' }),
news({ published_at: '2025-05-24T10:00:00Z' }),
]
const grouped = groupByWindow(items, windows)
const sorted = sortWindowBucketsNewestFirst(grouped.windows)
expect(sorted[0].window.meeting_key).toBe(2)
expect(sorted[1].window.meeting_key).toBe(1)
})
})
describe('tagItems', () => {
const drivers = [
driver({ name_acronym: 'VER', full_name: 'Max Verstappen', team_name: 'Red Bull' }),
driver({
driver_number: 4,
name_acronym: 'NOR',
full_name: 'Lando Norris',
team_name: 'McLaren',
team_colour: 'ff8000',
}),
]
const teams = [
team({ team_name: 'Red Bull' }),
team({ team_name: 'McLaren', team_colour: 'ff8000' }),
]
it('tags drivers and teams case-insensitively', () => {
const [item] = tagItems(
[news({ title: 'ver leads mclaren in practice', summary: 'Norris close behind' })],
drivers,
teams,
)
const labels = item.tags.map((tag) => tag.label).sort()
expect(labels).toEqual(['McLaren', 'NOR', 'VER'])
})
it('returns no tags when nothing matches', () => {
const [item] = tagItems(
[news({ title: 'Generic paddock update' })],
drivers,
teams,
)
expect(item.tags).toEqual([])
})
it('prefers the longest overlapping match', () => {
const [item] = tagItems(
[news({ title: 'Max Verstappen extends championship lead' })],
drivers,
teams,
)
expect(item.tags).toHaveLength(1)
expect(item.tags[0].label).toBe('VER')
})
it('matches a driver last name inside prose', () => {
const [item] = tagItems(
[news({ title: 'Verstappen was untouchable in qualifying' })],
drivers,
teams,
)
expect(item.tags.some((tag) => tag.label === 'VER')).toBe(true)
})
})
describe('digest helpers', () => {
it('collects top tags by frequency', () => {
const tagged = tagItems(
[
news({ title: 'VER wins', url: 'https://a' }),
news({ title: 'VER dominates', url: 'https://b' }),
news({ title: 'Norris podium', url: 'https://c' }),
],
[driver({}), driver({ driver_number: 4, name_acronym: 'NOR', full_name: 'Lando Norris', team_name: 'McLaren' })],
[team({}), team({ team_name: 'McLaren', team_colour: 'ff8000' })],
)
expect(topTags(tagged, 2).map((tag) => tag.label)).toEqual(['VER', 'NOR'])
})
it('filters items by tag key', () => {
const tagged = tagItems(
[
news({ title: 'VER wins', url: 'https://a' }),
news({ title: 'Neutral headline', url: 'https://b' }),
],
[driver({})],
[team({})],
)
const filtered = filterByTag(tagged, 'driver:VER')
expect(filtered).toHaveLength(1)
expect(filtered[0].url).toBe('https://a')
})
it('selects items for the active digest window', () => {
const bahrain = meeting({ meeting_key: 1 })
const monaco = meeting({
meeting_key: 2,
date_start: '2025-05-23T00:00:00+00:00',
date_end: '2025-05-25T23:59:59+00:00',
})
const now = new Date('2025-04-10T12:00:00Z')
const windows = gpWindows([bahrain, monaco], now)
const active = activeDigestWindow(windows, [bahrain, monaco], now)
const tagged = tagItems(
[
news({ published_at: '2025-04-05T10:00:00Z', url: 'https://in' }),
news({ published_at: '2025-03-10T10:00:00Z', url: 'https://out' }),
],
[],
[],
)
const inWindow = itemsForWindow(tagged, active)
expect(inWindow).toHaveLength(1)
expect(inWindow[0].url).toBe('https://in')
expect(windowForDate(windows, new Date('2025-04-05T10:00:00Z'))?.meeting_key).toBe(2)
})
})

View File

@@ -0,0 +1,104 @@
import { describe, it, expect } from 'vitest'
import {
formatDelta,
formatPosition,
gridFinishDeltas,
shortGpLabel,
} from '../lib/driverProfile'
import type { DriverSummaryRound } from '../types'
function round(over: Partial<DriverSummaryRound>): DriverSummaryRound {
return {
meeting_key: 1201,
meeting_name: 'Bahrain Grand Prix',
country_code: 'BHR',
country_name: 'Bahrain',
race_position: 1,
grid_position: 1,
quali_position: 1,
points: 25,
dnf: false,
dns: false,
dsq: false,
...over,
}
}
describe('gridFinishDeltas', () => {
it('computes positive delta for places gained', () => {
const [d] = gridFinishDeltas([round({ grid_position: 5, race_position: 2, points: 18 })])
expect(d.grid).toBe(5)
expect(d.finish).toBe(2)
expect(d.delta).toBe(3)
expect(d.points).toBe(18)
expect(d.status).toBe('classified')
expect(d.round).toBe(1)
})
it('computes negative delta for places lost', () => {
const [d] = gridFinishDeltas([round({ grid_position: 1, race_position: 4 })])
expect(d.delta).toBe(-3)
})
it('returns null delta when the grid slot is unknown (position 0)', () => {
const [d] = gridFinishDeltas([round({ grid_position: 0, race_position: 6 })])
expect(d.grid).toBeNull()
expect(d.finish).toBe(6)
expect(d.delta).toBeNull()
})
it('flags DNS rounds and never computes a delta for them', () => {
const [d] = gridFinishDeltas([round({ dns: true, grid_position: 8, race_position: 0 })])
expect(d.status).toBe('dns')
expect(d.delta).toBeNull()
})
it('marks rounds the driver did not enter as absent', () => {
const [d] = gridFinishDeltas([round({ grid_position: 0, race_position: 0, points: 0 })])
expect(d.status).toBe('absent')
expect(d.grid).toBeNull()
expect(d.finish).toBeNull()
expect(d.delta).toBeNull()
})
it('still computes the delta for a classified DNF with known positions', () => {
const [d] = gridFinishDeltas([round({ dnf: true, grid_position: 3, race_position: 15 })])
expect(d.status).toBe('dnf')
expect(d.delta).toBe(-12)
})
it('numbers rounds sequentially and shortens labels', () => {
const ds = gridFinishDeltas([
round({}),
round({ meeting_name: 'Saudi Arabian Grand Prix', meeting_key: 1202 }),
])
expect(ds.map((d) => d.round)).toEqual([1, 2])
expect(ds[1].label).toBe('Saudi Arabian')
})
})
describe('shortGpLabel', () => {
it('strips "Grand Prix" wherever it appears', () => {
expect(shortGpLabel('Bahrain Grand Prix')).toBe('Bahrain')
expect(shortGpLabel('Grand Prix of Monaco')).toBe('of Monaco')
})
it('falls back to the original name when stripping empties it', () => {
expect(shortGpLabel('Grand Prix')).toBe('Grand Prix')
})
})
describe('formatPosition / formatDelta', () => {
it('formats positions', () => {
expect(formatPosition(4)).toBe('P4')
expect(formatPosition(null)).toBe('—')
expect(formatPosition(0)).toBe('—')
})
it('formats deltas', () => {
expect(formatDelta(3)).toBe('+3')
expect(formatDelta(-2)).toBe('2')
expect(formatDelta(0)).toBe('=')
expect(formatDelta(null)).toBe('—')
})
})

View File

@@ -396,6 +396,39 @@ export interface ChampionshipHub {
teams: ChampHubTeam[] teams: ChampHubTeam[]
} }
export interface DriverSummaryRound {
meeting_key: number
meeting_name: string
country_code: string
country_name: string
race_position: number
grid_position: number
quali_position?: number
points: number
dnf: boolean
dns: boolean
dsq: boolean
}
export interface DriverSummary {
season: number
driver_number: number
name_acronym: string
full_name: string
team_name: string
team_colour: string
headshot_url: string
points: number
position: number
wins: number
podiums: number
poles: number
form: number[]
cumulative: number[]
round_labels: string[]
rounds: DriverSummaryRound[]
}
export interface NewsItem { export interface NewsItem {
source: string source: string
title: string title: string

View File

@@ -797,11 +797,6 @@ func (s *Server) localChampionshipHub(year int) (champHubResponse, bool, error)
} }
func (s *Server) openF1ChampionshipHub(year int) (champHubResponse, error) { func (s *Server) openF1ChampionshipHub(year int) (champHubResponse, error) {
meetings, err := s.client.GetMeetingsForYear(year)
if err != nil {
return champHubResponse{}, err
}
champ, err := s.client.GetDriverChampionshipForYear(year) champ, err := s.client.GetDriverChampionshipForYear(year)
if err != nil { if err != nil {
return champHubResponse{}, err return champHubResponse{}, err
@@ -816,16 +811,39 @@ func (s *Server) openF1ChampionshipHub(year int) (champHubResponse, error) {
driverInfo = buildDriverMapFirst(ds) driverInfo = buildDriverMapFirst(ds)
} }
sort.Slice(meetings, func(i, j int) bool { return meetings[i].DateStart < meetings[j].DateStart }) races, incomplete, err := s.fetchSeasonRaces(year)
if err != nil {
return champHubResponse{}, err
}
resp := aggregateChampionshipHub(year, races, champ, teams, driverInfo)
ttl := champHubTTL(year, time.Now())
if incomplete {
// Any per-meeting fetch failure (network, rate limit) yields an incomplete // Any per-meeting fetch failure (network, rate limit) yields an incomplete
// aggregate: serve it so the page still renders, but cache it only briefly // aggregate: serve it so the page still renders, but cache it only briefly
// so a partial view of the season doesn't stick around for the full TTL. // so a partial view of the season doesn't stick around for the full TTL.
var incomplete atomic.Bool ttl = champHubIncompleteTTL
races := fetchMeetingRaces(meetings, champHubWorkers, func(m models.Meeting) (meetingRace, bool) { }
s.hubCache.put(year, resp, time.Now(), ttl)
return resp, nil
}
// fetchSeasonRaces returns a season's GP meetings in date order, each bundled
// with its race results and starting grid fetched from OpenF1. incomplete
// reports whether any per-meeting fetch failed, so callers can avoid caching a
// partial view of the season for long.
func (s *Server) fetchSeasonRaces(year int) (races []meetingRace, incomplete bool, err error) {
meetings, err := s.client.GetMeetingsForYear(year)
if err != nil {
return nil, false, err
}
sort.Slice(meetings, func(i, j int) bool { return meetings[i].DateStart < meetings[j].DateStart })
var failed atomic.Bool
races = fetchMeetingRaces(meetings, champHubWorkers, func(m models.Meeting) (meetingRace, bool) {
sessions, serr := s.client.GetSessionsForMeeting(int(m.MeetingKey)) sessions, serr := s.client.GetSessionsForMeeting(int(m.MeetingKey))
if serr != nil { if serr != nil {
incomplete.Store(true) failed.Store(true)
return meetingRace{}, false return meetingRace{}, false
} }
raceKey := 0 raceKey := 0
@@ -841,18 +859,11 @@ func (s *Server) openF1ChampionshipHub(year int) (champHubResponse, error) {
results, rerr := s.client.GetSessionResult(raceKey) results, rerr := s.client.GetSessionResult(raceKey)
grid, gerr := s.client.GetStartingGrid(raceKey) grid, gerr := s.client.GetStartingGrid(raceKey)
if rerr != nil || gerr != nil { if rerr != nil || gerr != nil {
incomplete.Store(true) failed.Store(true)
} }
return meetingRace{Meeting: m, RaceSessionKey: raceKey, Results: results, Grid: grid}, true return meetingRace{Meeting: m, RaceSessionKey: raceKey, Results: results, Grid: grid}, true
}) })
return races, failed.Load(), nil
resp := aggregateChampionshipHub(year, races, champ, teams, driverInfo)
ttl := champHubTTL(year, time.Now())
if incomplete.Load() {
ttl = champHubIncompleteTTL
}
s.hubCache.put(year, resp, time.Now(), ttl)
return resp, nil
} }
// aggregateChampionshipHub is the pure aggregation core (no network) so it can be // aggregateChampionshipHub is the pure aggregation core (no network) so it can be

View File

@@ -0,0 +1,177 @@
package web
import (
"fmt"
"net/http"
"strconv"
"time"
"github.com/AmanTahiliani/box-box/internal/models"
)
// --- /api/v1/driver/summary ---
// Per-driver season summary: championship standing plus per-round race results,
// aggregated server-side from the same sources as the championship hub. Caching
// relies on the OpenF1 client's HTTP cache TTLs — no extra layer here.
type driverSummaryRound struct {
MeetingKey int `json:"meeting_key"`
MeetingName string `json:"meeting_name"`
CountryCode string `json:"country_code"`
CountryName string `json:"country_name"`
// RacePosition and GridPosition are 0 when the driver has no entry for the
// round (did not enter, or data missing).
RacePosition int `json:"race_position"`
GridPosition int `json:"grid_position"`
// QualiPosition is derived from the starting grid in v1 (full qualifying
// session results are deferred); omitted when unknown.
QualiPosition int `json:"quali_position,omitempty"`
Points float64 `json:"points"`
DNF bool `json:"dnf"`
DNS bool `json:"dns"`
DSQ bool `json:"dsq"`
}
type driverSummaryResponse struct {
Season int `json:"season"`
DriverNumber int `json:"driver_number"`
NameAcronym string `json:"name_acronym"`
FullName string `json:"full_name"`
TeamName string `json:"team_name"`
TeamColour string `json:"team_colour"`
HeadshotURL string `json:"headshot_url"`
Points float64 `json:"points"`
Position int `json:"position"`
Wins int `json:"wins"`
Podiums int `json:"podiums"`
Poles int `json:"poles"`
Form []float64 `json:"form"`
Cumulative []float64 `json:"cumulative"`
RoundLabels []string `json:"round_labels"`
Rounds []driverSummaryRound `json:"rounds"`
}
func (s *Server) handleDriverSummary(w http.ResponseWriter, r *http.Request) {
driverNumber, err := strconv.Atoi(r.URL.Query().Get("driver_number"))
if err != nil || driverNumber <= 0 {
http.Error(w, "driver_number required", http.StatusBadRequest)
return
}
year, _ := strconv.Atoi(r.URL.Query().Get("year"))
if year == 0 {
year = time.Now().Year()
}
champ, err := s.client.GetDriverChampionshipForYear(year)
if err != nil {
writeError(w, err, http.StatusInternalServerError, s.client.LastResponseWasStale())
return
}
var entry *models.ChampionshipDriver
for i := range champ {
if champ[i].DriverNumber == driverNumber {
entry = &champ[i]
break
}
}
if entry == nil {
http.Error(w, fmt.Sprintf("driver %d not found in %d championship", driverNumber, year), http.StatusNotFound)
return
}
driverInfo := map[int]models.Driver{}
if ds, derr := s.client.GetDriversForSession(champ[0].SessionKey); derr == nil {
driverInfo = buildDriverMapFirst(ds)
}
if d, ok := s.championshipDriverInfo(entry.SessionKey, driverNumber, driverInfo); ok {
driverInfo[driverNumber] = d
}
races, _, err := s.fetchSeasonRaces(year)
if err != nil {
writeError(w, err, http.StatusInternalServerError, s.client.LastResponseWasStale())
return
}
resp, ok := aggregateDriverSummary(year, driverNumber, races, champ, driverInfo)
if !ok {
http.Error(w, fmt.Sprintf("driver %d not found in %d championship", driverNumber, year), http.StatusNotFound)
return
}
writeJSON(w, resp)
}
// aggregateDriverSummary is the pure aggregation core (no network) so it can be
// unit-tested with synthetic data. It reuses the championship-hub aggregation
// for the derived season stats (wins, podiums, poles, form, cumulative) and
// adds the per-round result rows. races must be ordered ascending by date and
// contain only GP meetings. Returns ok=false when the driver is not in champ.
func aggregateDriverSummary(
year, driverNumber int,
races []meetingRace,
champ []models.ChampionshipDriver,
driverInfo map[int]models.Driver,
) (driverSummaryResponse, bool) {
hub := aggregateChampionshipHub(year, races, champ, nil, driverInfo)
var hd *champHubDriver
for i := range hub.Drivers {
if hub.Drivers[i].DriverNumber == driverNumber {
hd = &hub.Drivers[i]
break
}
}
if hd == nil {
return driverSummaryResponse{}, false
}
rounds := make([]driverSummaryRound, 0, len(races))
for _, mr := range races {
if len(mr.Results) == 0 {
continue // round not completed yet
}
round := driverSummaryRound{
MeetingKey: int(mr.Meeting.MeetingKey),
MeetingName: mr.Meeting.MeetingName,
CountryCode: mr.Meeting.CountryCode,
CountryName: mr.Meeting.CountryName,
}
for _, res := range mr.Results {
if res.DriverNumber == driverNumber {
round.RacePosition = res.Position
round.Points = res.Points
round.DNF = res.DNF
round.DNS = res.DNS
round.DSQ = res.DSQ
break
}
}
for _, g := range mr.Grid {
if g.DriverNumber == driverNumber {
round.GridPosition = g.Position
round.QualiPosition = g.Position
break
}
}
rounds = append(rounds, round)
}
return driverSummaryResponse{
Season: year,
DriverNumber: hd.DriverNumber,
NameAcronym: hd.NameAcronym,
FullName: hd.FullName,
TeamName: hd.TeamName,
TeamColour: hd.TeamColour,
HeadshotURL: driverInfo[driverNumber].HeadshotURL,
Points: hd.Points,
Position: hd.Position,
Wins: hd.Wins,
Podiums: hd.Podiums,
Poles: hd.Poles,
Form: hd.Form,
Cumulative: hd.Cumulative,
RoundLabels: hub.RoundLabels,
Rounds: rounds,
}, true
}

View File

@@ -0,0 +1,136 @@
package web
import (
"net/http"
"net/http/httptest"
"testing"
"github.com/AmanTahiliani/box-box/internal/models"
)
func driverSummaryFixtures() ([]meetingRace, []models.ChampionshipDriver, map[int]models.Driver) {
driverInfo := map[int]models.Driver{
1: {DriverNumber: 1, NameAcronym: "VER", FullName: "Max Verstappen", TeamName: "Red Bull", TeamColour: "3671c6", HeadshotURL: "https://example.com/ver.png"},
3: {DriverNumber: 3, NameAcronym: "HAM", FullName: "Lewis Hamilton", TeamName: "Mercedes", TeamColour: "27f4d2"},
}
champ := []models.ChampionshipDriver{
{DriverNumber: 1, PointsCurrent: 50, PositionCurrent: 1, SessionKey: 99},
{DriverNumber: 3, PointsCurrent: 33, PositionCurrent: 2, SessionKey: 99},
}
// Round 1: VER P1 from pole, HAM P2 from P3.
// Round 2: VER P1 from P2, HAM P3 from pole.
// Round 3: not yet run — must not appear in rounds.
races := []meetingRace{
{
Meeting: models.Meeting{MeetingKey: 1201, MeetingName: "Bahrain GP", CountryCode: "BHR", CountryName: "Bahrain"},
Results: []models.SessionResult{raceResult(1, 1, 25), raceResult(3, 2, 18)},
Grid: []models.StartingGrid{{DriverNumber: 1, Position: 1}, {DriverNumber: 3, Position: 3}},
},
{
Meeting: models.Meeting{MeetingKey: 1202, MeetingName: "Saudi GP", CountryCode: "SAU", CountryName: "Saudi Arabia"},
Results: []models.SessionResult{raceResult(1, 1, 25), raceResult(3, 3, 15)},
Grid: []models.StartingGrid{{DriverNumber: 3, Position: 1}, {DriverNumber: 1, Position: 2}},
},
{Meeting: models.Meeting{MeetingKey: 1203, MeetingName: "Australia GP"}},
}
return races, champ, driverInfo
}
func TestAggregateDriverSummary(t *testing.T) {
races, champ, driverInfo := driverSummaryFixtures()
resp, ok := aggregateDriverSummary(2025, 1, races, champ, driverInfo)
if !ok {
t.Fatal("aggregateDriverSummary ok = false, want true")
}
if resp.Season != 2025 || resp.DriverNumber != 1 {
t.Errorf("season/driver = %d/%d, want 2025/1", resp.Season, resp.DriverNumber)
}
if resp.NameAcronym != "VER" || resp.FullName != "Max Verstappen" || resp.TeamName != "Red Bull" || resp.TeamColour != "3671c6" {
t.Errorf("driver identity = %s %s %s %s", resp.NameAcronym, resp.FullName, resp.TeamName, resp.TeamColour)
}
if resp.HeadshotURL != "https://example.com/ver.png" {
t.Errorf("headshot = %q", resp.HeadshotURL)
}
if resp.Points != 50 || resp.Position != 1 {
t.Errorf("points/position = %v/%d, want 50/1", resp.Points, resp.Position)
}
if resp.Wins != 2 || resp.Podiums != 2 || resp.Poles != 1 {
t.Errorf("wins/podiums/poles = %d/%d/%d, want 2/2/1", resp.Wins, resp.Podiums, resp.Poles)
}
if len(resp.Form) != 2 || resp.Form[0] != 25 || resp.Form[1] != 25 {
t.Errorf("form = %v, want [25 25]", resp.Form)
}
// Cumulative reconciles the last value to the official total.
if len(resp.Cumulative) != 2 || resp.Cumulative[0] != 25 || resp.Cumulative[1] != 50 {
t.Errorf("cumulative = %v, want [25 50]", resp.Cumulative)
}
if len(resp.RoundLabels) != 2 || resp.RoundLabels[0] != "R1" {
t.Errorf("round labels = %v, want [R1 R2]", resp.RoundLabels)
}
// Only completed rounds appear.
if len(resp.Rounds) != 2 {
t.Fatalf("rounds = %d, want 2", len(resp.Rounds))
}
r1 := resp.Rounds[0]
if r1.MeetingKey != 1201 || r1.MeetingName != "Bahrain GP" || r1.CountryCode != "BHR" || r1.CountryName != "Bahrain" {
t.Errorf("round 1 meeting = %+v", r1)
}
if r1.RacePosition != 1 || r1.GridPosition != 1 || r1.QualiPosition != 1 || r1.Points != 25 {
t.Errorf("round 1 result = %+v, want P1 from P1 with 25 pts", r1)
}
r2 := resp.Rounds[1]
if r2.RacePosition != 1 || r2.GridPosition != 2 || r2.Points != 25 {
t.Errorf("round 2 result = %+v, want P1 from P2 with 25 pts", r2)
}
}
func TestAggregateDriverSummaryDriverMissingFromRound(t *testing.T) {
races, champ, driverInfo := driverSummaryFixtures()
// Drop HAM from round 2's results and grid: the round still appears with
// zero-valued positions so round indexing stays aligned with the season.
races[1].Results = []models.SessionResult{raceResult(1, 1, 25)}
races[1].Grid = []models.StartingGrid{{DriverNumber: 1, Position: 2}}
resp, ok := aggregateDriverSummary(2025, 3, races, champ, driverInfo)
if !ok {
t.Fatal("aggregateDriverSummary ok = false, want true")
}
if len(resp.Rounds) != 2 {
t.Fatalf("rounds = %d, want 2", len(resp.Rounds))
}
r2 := resp.Rounds[1]
if r2.RacePosition != 0 || r2.GridPosition != 0 || r2.QualiPosition != 0 || r2.Points != 0 {
t.Errorf("round 2 for absent driver = %+v, want zero values", r2)
}
}
func TestAggregateDriverSummaryUnknownDriver(t *testing.T) {
races, champ, driverInfo := driverSummaryFixtures()
if _, ok := aggregateDriverSummary(2025, 44, races, champ, driverInfo); ok {
t.Error("unknown driver should return ok = false")
}
}
func TestHandleDriverSummaryBadRequest(t *testing.T) {
srv := testServer(t, nil)
// Missing, non-numeric, zero, and negative driver_number are all rejected.
for _, url := range []string{
"/api/v1/driver/summary?year=2025",
"/api/v1/driver/summary?year=2025&driver_number=abc",
"/api/v1/driver/summary?year=2025&driver_number=0",
"/api/v1/driver/summary?year=2025&driver_number=-4",
} {
req := httptest.NewRequest(http.MethodGet, url, nil)
rec := httptest.NewRecorder()
srv.handleDriverSummary(rec, req)
if rec.Code != http.StatusBadRequest {
t.Errorf("%s: status = %d, want 400", url, rec.Code)
}
}
}

View File

@@ -70,6 +70,9 @@ func (s *Server) routes() (http.Handler, error) {
mux.HandleFunc("/api/v1/news", s.handleNews) mux.HandleFunc("/api/v1/news", s.handleNews)
mux.HandleFunc("/api/v1/meetings", s.handleMeetings) mux.HandleFunc("/api/v1/meetings", s.handleMeetings)
mux.HandleFunc("/api/v1/sessions", s.handleSessions) mux.HandleFunc("/api/v1/sessions", s.handleSessions)
// /api/v1/driver/summary before /api/v1/drivers: distinct prefixes today,
// but keep the more specific driver/* paths registered first.
mux.HandleFunc("/api/v1/driver/summary", s.handleDriverSummary)
mux.HandleFunc("/api/v1/drivers", s.handleDrivers) mux.HandleFunc("/api/v1/drivers", s.handleDrivers)
mux.HandleFunc("/api/v1/results", s.handleResults) mux.HandleFunc("/api/v1/results", s.handleResults)
mux.HandleFunc("/api/v1/grid", s.handleGrid) mux.HandleFunc("/api/v1/grid", s.handleGrid)