Merge pull request #81 from AmanTahiliani/feat/issue-74-live-settling-analysis-handoff
Live → settling → analysis handoff (#74)
263
frontend/src/components/live/LiveHandoff.tsx
Normal file
@@ -0,0 +1,263 @@
|
|||||||
|
import { Archive, ChevronRight, Flag, Radio } from 'lucide-react'
|
||||||
|
import type { LiveTimingRow } from '../../lib/live'
|
||||||
|
import { driverCode } from '../../lib/live'
|
||||||
|
import type { TransportHealth } from '../../lib/liveState'
|
||||||
|
import { feedHealthLabel } from '../../lib/liveState'
|
||||||
|
import type { ContextSession, WeekendContext } from '../../types'
|
||||||
|
import { analysisSessionKey } from '../../lib/weekendContext'
|
||||||
|
import { formatSessionScheduleTime } from '../../lib/schedule'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
/** 'settling' immediately after a session; 'inactive' when nothing is live. */
|
||||||
|
phase: 'settling' | 'inactive'
|
||||||
|
transport: TransportHealth
|
||||||
|
/** Canonical weekend context (issue #72). May be undefined before it loads. */
|
||||||
|
context: WeekendContext | undefined
|
||||||
|
/** Top rows of the final snapshot (settling only), already position-sorted. */
|
||||||
|
rows: LiveTimingRow[]
|
||||||
|
capturedAt?: string | null
|
||||||
|
hasArchive: boolean
|
||||||
|
onViewArchive: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatCapturedAt(capturedAt: string | null | undefined): string {
|
||||||
|
if (!capturedAt) return ''
|
||||||
|
const date = new Date(capturedAt)
|
||||||
|
if (Number.isNaN(date.getTime())) return ''
|
||||||
|
return date.toLocaleString()
|
||||||
|
}
|
||||||
|
|
||||||
|
function sessionKeyOf(session: ContextSession | undefined): number | undefined {
|
||||||
|
const key = session?.session.session_key
|
||||||
|
return key && key > 0 ? key : undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fully ingested analysis (local_analysis === complete). Stricter than
|
||||||
|
* hasLocalAnalysis, which also treats partial as link-worthy — Live polling
|
||||||
|
* and "ready" chrome wait for the complete state.
|
||||||
|
*/
|
||||||
|
export function analysisIsReady(session: ContextSession | undefined): boolean {
|
||||||
|
return session?.availability?.local_analysis === 'complete'
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Analysis target for the Live handoff surface.
|
||||||
|
*
|
||||||
|
* Settling must follow the just-finished session (`previous_completed_session`).
|
||||||
|
* The canonical backend can mark that session archive-complete while leaving
|
||||||
|
* `default_analysis_session` on an older already-ingested practice/qualifying —
|
||||||
|
* preferring default here would link/poll/label the wrong race.
|
||||||
|
*
|
||||||
|
* Inactive keeps the shared default-first preference via analysisSessionKey.
|
||||||
|
*/
|
||||||
|
export function handoffAnalysisSession(
|
||||||
|
context: WeekendContext | undefined,
|
||||||
|
phase: 'settling' | 'inactive',
|
||||||
|
): ContextSession | undefined {
|
||||||
|
if (!context) return undefined
|
||||||
|
if (phase === 'settling') {
|
||||||
|
if (sessionKeyOf(context.previous_completed_session)) {
|
||||||
|
return context.previous_completed_session
|
||||||
|
}
|
||||||
|
return sessionKeyOf(context.default_analysis_session)
|
||||||
|
? context.default_analysis_session
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
const key = analysisSessionKey(context)
|
||||||
|
if (!key) return undefined
|
||||||
|
if (context.default_analysis_session?.session.session_key === key) {
|
||||||
|
return context.default_analysis_session
|
||||||
|
}
|
||||||
|
return context.previous_completed_session
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Keep polling weekend-context while the just-finished session (or, absent
|
||||||
|
* that, the default analysis session) is still ingesting. An older ready
|
||||||
|
* default must not stop the settle→ready transition.
|
||||||
|
*/
|
||||||
|
export function shouldPollHandoffAnalysis(context: WeekendContext | undefined): boolean {
|
||||||
|
if (!context) return true
|
||||||
|
const previous = context.previous_completed_session
|
||||||
|
if (sessionKeyOf(previous) && !analysisIsReady(previous)) return true
|
||||||
|
const fallback = context.default_analysis_session
|
||||||
|
if (sessionKeyOf(fallback) && !analysisIsReady(fallback)) return true
|
||||||
|
return !sessionKeyOf(previous) && !sessionKeyOf(fallback)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function LiveHandoff({
|
||||||
|
phase,
|
||||||
|
transport,
|
||||||
|
context,
|
||||||
|
rows,
|
||||||
|
capturedAt,
|
||||||
|
hasArchive,
|
||||||
|
onViewArchive,
|
||||||
|
}: Props) {
|
||||||
|
const isSettling = phase === 'settling'
|
||||||
|
const testid = isSettling ? 'live-settling' : 'live-inactive'
|
||||||
|
const capturedLabel = formatCapturedAt(capturedAt)
|
||||||
|
|
||||||
|
const focusName = context?.focus_meeting?.meeting_name
|
||||||
|
const activeName = context?.active_session?.meeting?.meeting_name
|
||||||
|
const title = focusName || activeName || 'Live Timing'
|
||||||
|
const topRows = rows.slice(0, 3)
|
||||||
|
|
||||||
|
const analysis = handoffAnalysisSession(context, phase)
|
||||||
|
const analysisKey = sessionKeyOf(analysis)
|
||||||
|
const analysisName = analysis?.session.session_name || 'session'
|
||||||
|
const analysisReady = analysisIsReady(analysis)
|
||||||
|
|
||||||
|
const next = context?.next_session
|
||||||
|
const previous = context?.previous_completed_session
|
||||||
|
// Avoid a duplicate recap card when previous == the analysis target.
|
||||||
|
const showRecap =
|
||||||
|
previous && previous.session.session_key !== analysisKey && previous.session.session_key !== 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className={`live-handoff live-handoff-${phase}`} data-testid={testid}>
|
||||||
|
<header className="live-handoff-head">
|
||||||
|
<span className="live-handoff-eyebrow mono">
|
||||||
|
{isSettling ? (
|
||||||
|
<>
|
||||||
|
<Flag size={13} /> SESSION SETTLING
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Radio size={13} /> NO LIVE SESSION
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<h1 className="live-handoff-title">{title}</h1>
|
||||||
|
{isSettling && capturedLabel && (
|
||||||
|
<p className="live-handoff-captured mono" data-testid="live-handoff-captured">
|
||||||
|
Final feed snapshot captured {capturedLabel}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{!isSettling && (
|
||||||
|
<p className="live-handoff-sub">
|
||||||
|
The timing feed is quiet between sessions. Here's where the weekend stands.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<span className={`live-feed-health live-feed-${transport} live-handoff-feed`}>
|
||||||
|
<span className="live-feed-dot" aria-hidden="true" />
|
||||||
|
{feedHealthLabel(transport)}
|
||||||
|
</span>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{isSettling && topRows.length > 0 && (
|
||||||
|
<div className="live-handoff-snapshot" data-testid="live-handoff-snapshot">
|
||||||
|
<span className="live-handoff-snapshot-label mono">Provisional order at chequered</span>
|
||||||
|
<ol className="live-handoff-order">
|
||||||
|
{topRows.map((row) => (
|
||||||
|
<li key={row.RacingNumber}>
|
||||||
|
<span className="mono">P{row.Position}</span>
|
||||||
|
<span className="live-handoff-code">{driverCode(row)}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="live-handoff-actions">
|
||||||
|
{analysisKey ? (
|
||||||
|
<a
|
||||||
|
className="live-handoff-action live-handoff-primary"
|
||||||
|
href={`/race-hub?session_key=${analysisKey}`}
|
||||||
|
data-testid="live-handoff-analysis"
|
||||||
|
data-ready={analysisReady ? 'true' : 'false'}
|
||||||
|
>
|
||||||
|
<span className="live-handoff-action-body">
|
||||||
|
<span className="live-handoff-action-label">
|
||||||
|
{isSettling ? `Open ${analysisName} analysis` : `Open ${analysisName} in Race Hub`}
|
||||||
|
</span>
|
||||||
|
<span className="live-handoff-action-meta mono">
|
||||||
|
{analysisReady
|
||||||
|
? 'Full timing, strategy & story ready'
|
||||||
|
: isSettling
|
||||||
|
? 'Settling — analysis will fill in as data ingests'
|
||||||
|
: 'Analysis will fill in as data ingests'}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<ChevronRight size={18} />
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className="live-handoff-action live-handoff-pending"
|
||||||
|
data-testid="live-handoff-analysis-pending"
|
||||||
|
>
|
||||||
|
<span className="live-handoff-action-body">
|
||||||
|
<span className="live-handoff-action-label">Analysis not ready yet</span>
|
||||||
|
<span className="live-handoff-action-meta mono">
|
||||||
|
The completed session will appear in Race Hub once it is ingested.
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{next && (
|
||||||
|
<div className="live-handoff-action live-handoff-next" data-testid="live-handoff-next">
|
||||||
|
<span className="live-handoff-action-body">
|
||||||
|
<span className="live-handoff-action-label">
|
||||||
|
Up next · {next.session.session_name}
|
||||||
|
</span>
|
||||||
|
<span className="live-handoff-action-meta mono">
|
||||||
|
{formatSessionScheduleTime(next.session.date_start)}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showRecap && (
|
||||||
|
<a
|
||||||
|
className="live-handoff-action"
|
||||||
|
href={`/race-hub?session_key=${previous!.session.session_key}`}
|
||||||
|
data-testid="live-handoff-recap"
|
||||||
|
>
|
||||||
|
<span className="live-handoff-action-body">
|
||||||
|
<span className="live-handoff-action-label">
|
||||||
|
Recap · {previous!.session.session_name}
|
||||||
|
</span>
|
||||||
|
<span className="live-handoff-action-meta mono">
|
||||||
|
Review the last completed session
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<ChevronRight size={18} />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{hasArchive && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="live-handoff-action live-handoff-archive-btn"
|
||||||
|
onClick={onViewArchive}
|
||||||
|
data-testid="live-handoff-archive"
|
||||||
|
>
|
||||||
|
<span className="live-handoff-action-body">
|
||||||
|
<span className="live-handoff-action-label">
|
||||||
|
<Archive size={14} /> View full timing (read-only)
|
||||||
|
</span>
|
||||||
|
<span className="live-handoff-action-meta mono">
|
||||||
|
Frozen final snapshot — no live updates
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<ChevronRight size={18} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!analysisKey && !next && !showRecap && !hasArchive && (
|
||||||
|
<div className="live-handoff-fallback" data-testid="live-handoff-fallback">
|
||||||
|
<a href="/" className="live-handoff-action">
|
||||||
|
<span className="live-handoff-action-body">
|
||||||
|
<span className="live-handoff-action-label">Weekend</span>
|
||||||
|
<span className="live-handoff-action-meta mono">Weekend schedule & standings</span>
|
||||||
|
</span>
|
||||||
|
<ChevronRight size={18} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,30 +1,60 @@
|
|||||||
import type { LiveStreamData } from '../../types'
|
import type { LiveStreamData } from '../../types'
|
||||||
import type { LiveTimingRow } from '../../lib/live'
|
import type { LiveTimingRow } from '../../lib/live'
|
||||||
import { extrapolateClock, liveSessionDisplay } from '../../lib/live'
|
import { extrapolateClock, liveSessionDisplay } from '../../lib/live'
|
||||||
|
import type { LivePhase, TransportHealth } from '../../lib/liveState'
|
||||||
|
import { feedHealthLabel } from '../../lib/liveState'
|
||||||
import { WeatherStrip } from './WeatherStrip'
|
import { WeatherStrip } from './WeatherStrip'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
isLive: boolean
|
/** Which of the live phases we are rendering: 'live' | 'disconnected' | 'archive'. */
|
||||||
isArchive?: boolean
|
phase: LivePhase
|
||||||
snapshot: LiveStreamData
|
snapshot: LiveStreamData
|
||||||
rows: LiveTimingRow[]
|
rows: LiveTimingRow[]
|
||||||
connection: 'connected' | 'connecting' | 'disconnected' | 'error'
|
transport: TransportHealth
|
||||||
now: number
|
now: number
|
||||||
|
/** ISO capture time — required for archive, shown as the timestamp of record. */
|
||||||
|
capturedAt?: string | null
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SessionBanner({ isLive, isArchive = false, snapshot, rows, connection, now }: Props) {
|
function formatCapturedAt(capturedAt: string | null | undefined): string {
|
||||||
|
if (!capturedAt) return ''
|
||||||
|
const date = new Date(capturedAt)
|
||||||
|
if (Number.isNaN(date.getTime())) return ''
|
||||||
|
return date.toLocaleString()
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SessionBanner({ phase, snapshot, rows, transport, now, capturedAt }: Props) {
|
||||||
const session = snapshot.Session
|
const session = snapshot.Session
|
||||||
const clock = extrapolateClock(snapshot.Clock, snapshot.ClockRefTime, snapshot.ClockExtrapolating, now)
|
const isArchive = phase === 'archive'
|
||||||
|
const isLiveSession = phase === 'live' || phase === 'disconnected'
|
||||||
|
// Archive is a frozen single frame: never extrapolate a running clock for it.
|
||||||
|
const clock = isArchive
|
||||||
|
? ''
|
||||||
|
: extrapolateClock(snapshot.Clock, snapshot.ClockRefTime, snapshot.ClockExtrapolating, now)
|
||||||
const display = liveSessionDisplay(session, rows)
|
const display = liveSessionDisplay(session, rows)
|
||||||
const atRiskLabel =
|
const atRiskLabel =
|
||||||
display.atRiskStart && display.atRiskEnd ? `P${display.atRiskStart}-P${display.atRiskEnd} at risk` : ''
|
display.atRiskStart && display.atRiskEnd ? `P${display.atRiskStart}-P${display.atRiskEnd} at risk` : ''
|
||||||
const stateLabel = isLive ? 'live' : isArchive ? 'archive' : 'stale'
|
const capturedLabel = formatCapturedAt(capturedAt)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="live-banner">
|
<section className={`live-banner${isArchive ? ' live-banner-archive' : ''}`} data-testid="live-banner">
|
||||||
<div className="live-banner-row">
|
<div className="live-banner-row">
|
||||||
<div className="live-banner-main">
|
<div className="live-banner-main">
|
||||||
<span className={`live-conn live-conn-${connection}`}>{connection}</span>
|
{isArchive ? (
|
||||||
|
<span className="live-session-flag live-session-flag-archive" data-testid="live-archive-flag">
|
||||||
|
ARCHIVE
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span
|
||||||
|
className={`live-session-flag live-session-flag-live${
|
||||||
|
phase === 'disconnected' ? ' is-stale' : ''
|
||||||
|
}`}
|
||||||
|
data-testid="live-session-flag"
|
||||||
|
>
|
||||||
|
<span className="live-session-dot" aria-hidden="true" />
|
||||||
|
LIVE SESSION
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
<div>
|
<div>
|
||||||
<h1>{session?.MeetingName || 'Live Timing'}</h1>
|
<h1>{session?.MeetingName || 'Live Timing'}</h1>
|
||||||
<p>
|
<p>
|
||||||
@@ -33,15 +63,40 @@ export function SessionBanner({ isLive, isArchive = false, snapshot, rows, conne
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="live-session-board">
|
<div className="live-session-board">
|
||||||
{display.phaseLabel && <span className="live-phase-pill mono">{display.phaseLabel}</span>}
|
{/* Feed health is strictly secondary and only present for a live session. */}
|
||||||
<div className="live-clock mono" data-testid="live-clock">{clock || '--:--:--'}</div>
|
{isLiveSession && (
|
||||||
|
<span
|
||||||
|
className={`live-feed-health live-feed-${transport}`}
|
||||||
|
data-testid="live-feed-health"
|
||||||
|
title="Transport health — independent of session state"
|
||||||
|
>
|
||||||
|
<span className="live-feed-dot" aria-hidden="true" />
|
||||||
|
{feedHealthLabel(transport)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{isArchive ? (
|
||||||
|
<div className="live-archive-stamp" data-testid="live-archive-stamp">
|
||||||
|
<span className="live-archive-readonly mono">READ-ONLY</span>
|
||||||
|
{capturedLabel && <span className="live-archive-captured mono">captured {capturedLabel}</span>}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{display.phaseLabel && <span className="live-phase-pill mono">{display.phaseLabel}</span>}
|
||||||
|
<div className="live-clock mono" data-testid="live-clock">{clock || '--:--:--'}</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
<div className="live-banner-meta">
|
<div className="live-banner-meta">
|
||||||
{display.advanceCount && <span>{display.advanceCount} advance</span>}
|
{!isArchive && display.advanceCount && <span>{display.advanceCount} advance</span>}
|
||||||
{atRiskLabel && <span>{atRiskLabel}</span>}
|
{!isArchive && atRiskLabel && <span>{atRiskLabel}</span>}
|
||||||
<span>
|
<span>
|
||||||
L<strong>{snapshot.CurrentLap || '-'}</strong>/<strong>{snapshot.TotalLaps || '-'}</strong>
|
L<strong>{snapshot.CurrentLap || '-'}</strong>/<strong>{snapshot.TotalLaps || '-'}</strong>
|
||||||
</span>
|
</span>
|
||||||
<span className={isLive ? 'live-state live-state-on' : 'live-state'}>{stateLabel}</span>
|
{!isArchive && (
|
||||||
|
<span className={phase === 'live' ? 'live-state live-state-on' : 'live-state'}>
|
||||||
|
{phase === 'live' ? 'live' : 'stale'}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{isArchive && <span className="live-state live-state-archive">archive</span>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -32,7 +32,10 @@ export function BetweenSessionsView({
|
|||||||
const previous = context.previous_completed_session
|
const previous = context.previous_completed_session
|
||||||
const previousName = previous?.session.session_name ?? 'Last session'
|
const previousName = previous?.session.session_name ?? 'Last session'
|
||||||
const next = context.next_session?.session
|
const next = context.next_session?.session
|
||||||
const analysisKey = analysisSessionKey(context)
|
// Settling recap must open the just-finished session, not an older default.
|
||||||
|
const previousKey = previous?.session.session_key
|
||||||
|
const analysisKey =
|
||||||
|
settling && previousKey && previousKey > 0 ? previousKey : analysisSessionKey(context)
|
||||||
const nodes = railNodes(previous, context.active_session, context.next_session)
|
const nodes = railNodes(previous, context.active_session, context.next_session)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
168
frontend/src/lib/liveState.ts
Normal file
@@ -0,0 +1,168 @@
|
|||||||
|
// Live timing state model.
|
||||||
|
//
|
||||||
|
// The Live page has to hold four *orthogonal* concepts that used to be
|
||||||
|
// conflated into a single "connected / offline" flag:
|
||||||
|
//
|
||||||
|
// 1. transport health — is the SSE stream up? (connecting/connected/…)
|
||||||
|
// 2. active session — is a session actually running right now?
|
||||||
|
// 3. archive availability — do we retain a final snapshot to inspect?
|
||||||
|
// 4. analysis readiness — is the completed session ingested for Race Hub?
|
||||||
|
//
|
||||||
|
// `deriveLivePhase` collapses the first three inputs into a single UI phase so
|
||||||
|
// the page never, for example, calls a finished session "offline" or lets a
|
||||||
|
// dropped socket masquerade as "archive mode".
|
||||||
|
//
|
||||||
|
// Critical distinction (issue #74 P0): the server's `deactivate()` path moves a
|
||||||
|
// STILL-ACTIVE snapshot into `last_snapshot` whenever the upstream FIA SignalR
|
||||||
|
// connection ends or idles — WITHOUT changing SessionStatus. So `is_live=false`
|
||||||
|
// alone is ambiguous. We rely on the retained snapshot's terminal SessionStatus
|
||||||
|
// (Finished/Ended/…) as the only trustworthy "the session really ended" signal.
|
||||||
|
// A non-terminal retained snapshot means the feed dropped, not that the session
|
||||||
|
// finished, and must render as `disconnected` (retain snapshot, warn, recover),
|
||||||
|
// never `settling`/archive.
|
||||||
|
|
||||||
|
export type TransportHealth = 'connecting' | 'connected' | 'disconnected' | 'error'
|
||||||
|
|
||||||
|
export type LivePhase =
|
||||||
|
| 'connecting' // cold start: no snapshot yet, still opening the feed
|
||||||
|
| 'live' // a session is running and streaming
|
||||||
|
| 'disconnected' // was live, transport/feed dropped — keep the last snapshot, warn
|
||||||
|
| 'settling' // session truly ended; a final snapshot is retained, analysis pending
|
||||||
|
| 'archive' // user opened the retained snapshot as an explicit read-only view
|
||||||
|
| 'inactive' // no session and nothing retained — show weekend context instead
|
||||||
|
|
||||||
|
export interface LiveStateInputs {
|
||||||
|
transport: TransportHealth
|
||||||
|
/** The feed reports an active session AND carries a snapshot for it. */
|
||||||
|
isLive: boolean
|
||||||
|
hasActiveSnapshot: boolean
|
||||||
|
/** A retained snapshot from the last stream is held (may be a dropped feed). */
|
||||||
|
hasArchive: boolean
|
||||||
|
/** The user explicitly opened the archive as a read-only timing view. */
|
||||||
|
archiveMode: boolean
|
||||||
|
/**
|
||||||
|
* The retained snapshot ended on a *terminal* FIA SessionStatus. Only true
|
||||||
|
* here means the session genuinely finished (vs. the transport dropping).
|
||||||
|
*/
|
||||||
|
sessionEndedCleanly: boolean
|
||||||
|
/** We have observed this session live at least once in this page session. */
|
||||||
|
wasLive: boolean
|
||||||
|
/**
|
||||||
|
* The initial `/api/v1/live/state` query has resolved. `connecting` is a
|
||||||
|
* cold-start-only phase: once we know the current state (even if the SSE
|
||||||
|
* transport handshake is still pending), an idle feed is `inactive`, not a
|
||||||
|
* perpetual "connecting…" spinner.
|
||||||
|
*/
|
||||||
|
stateLoaded: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
// Raw FIA SessionStatus values that mean the session is genuinely over. Mirrors
|
||||||
|
// the backend `terminalSessionStatus` used by the weekend-context resolver so
|
||||||
|
// the client and server agree on "finished".
|
||||||
|
const TERMINAL_STATUSES = new Set(['finished', 'finalised', 'finalized', 'ended', 'aborted'])
|
||||||
|
|
||||||
|
function normalizeStatus(status: string | undefined | null): string {
|
||||||
|
if (!status) return ''
|
||||||
|
return status.replace(/[^a-zA-Z]/g, '').toLowerCase()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Whether a raw FIA SessionStatus represents a genuinely completed session. */
|
||||||
|
export function terminalSessionStatus(status: string | undefined | null): boolean {
|
||||||
|
return TERMINAL_STATUSES.has(normalizeStatus(status))
|
||||||
|
}
|
||||||
|
|
||||||
|
export function transportDown(transport: TransportHealth): boolean {
|
||||||
|
return transport === 'disconnected' || transport === 'error'
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Map transport + session + archive inputs to one UI phase. Session lifecycle
|
||||||
|
* and transport health are deliberately orthogonal: a live session with a
|
||||||
|
* dropped socket is `disconnected` (snapshot retained), never `archive` or
|
||||||
|
* `settling`.
|
||||||
|
*/
|
||||||
|
export function deriveLivePhase(input: LiveStateInputs): LivePhase {
|
||||||
|
const {
|
||||||
|
transport,
|
||||||
|
isLive,
|
||||||
|
hasActiveSnapshot,
|
||||||
|
hasArchive,
|
||||||
|
archiveMode,
|
||||||
|
sessionEndedCleanly,
|
||||||
|
stateLoaded,
|
||||||
|
} = input
|
||||||
|
|
||||||
|
// Explicit read-only archive wins — it is a user-chosen mode.
|
||||||
|
if (archiveMode && hasArchive) return 'archive'
|
||||||
|
|
||||||
|
// An active session: transport health only downgrades the *presentation*,
|
||||||
|
// it never removes the session.
|
||||||
|
if (isLive && hasActiveSnapshot) {
|
||||||
|
return transportDown(transport) ? 'disconnected' : 'live'
|
||||||
|
}
|
||||||
|
|
||||||
|
// Feed reports no active session but a snapshot is retained. Distinguish a
|
||||||
|
// genuine session end from an upstream feed drop using the *only* trustworthy
|
||||||
|
// signal: whether the retained snapshot carries a terminal SessionStatus.
|
||||||
|
if (hasArchive) {
|
||||||
|
if (sessionEndedCleanly) return 'settling'
|
||||||
|
// Non-terminal retained snapshot means the upstream feed dropped, not that
|
||||||
|
// the session finished. Hold the last frame and warn — never settle/archive.
|
||||||
|
return 'disconnected'
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cold start only: still opening the feed and we have not yet learned the
|
||||||
|
// current state. Once the initial state query resolves, an idle feed is
|
||||||
|
// `inactive`, not a perpetual "connecting…".
|
||||||
|
if (transport === 'connecting' && !stateLoaded) return 'connecting'
|
||||||
|
|
||||||
|
return 'inactive'
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Phases that render the live timing tower / snapshot surface. */
|
||||||
|
export function rendersSnapshot(phase: LivePhase): boolean {
|
||||||
|
return phase === 'live' || phase === 'disconnected' || phase === 'archive'
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether live-only interpretations (pit-window rejoin, tyre-deg slope, "what
|
||||||
|
* just happened" deltas) are meaningful. They require a moving session, so an
|
||||||
|
* archived single frame must never present them as current insight.
|
||||||
|
*/
|
||||||
|
export function allowsLiveInterpretations(phase: LivePhase): boolean {
|
||||||
|
return phase === 'live' || phase === 'disconnected'
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Read-only, timestamped phases that must not show live/connected chrome. */
|
||||||
|
export function isReadOnlyPhase(phase: LivePhase): boolean {
|
||||||
|
return phase === 'archive'
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fan-facing feed health. Browser SSE can stay `connected` after an upstream
|
||||||
|
* FIA drop leaves us in `disconnected` with a retained non-terminal snapshot —
|
||||||
|
* present that as reconnecting, never "Feed healthy" beside "Connection lost".
|
||||||
|
*/
|
||||||
|
export function effectiveFeedHealth(
|
||||||
|
transport: TransportHealth,
|
||||||
|
phase: LivePhase,
|
||||||
|
): TransportHealth {
|
||||||
|
if (phase === 'disconnected' && !transportDown(transport)) {
|
||||||
|
return 'disconnected'
|
||||||
|
}
|
||||||
|
return transport
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Short, human transport-health label — always secondary to session state. */
|
||||||
|
export function feedHealthLabel(transport: TransportHealth): string {
|
||||||
|
switch (transport) {
|
||||||
|
case 'connected':
|
||||||
|
return 'Feed healthy'
|
||||||
|
case 'connecting':
|
||||||
|
return 'Connecting'
|
||||||
|
case 'disconnected':
|
||||||
|
return 'Reconnecting'
|
||||||
|
case 'error':
|
||||||
|
return 'Feed unavailable'
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||||
import { useQuery } from '@tanstack/react-query'
|
import { useQuery } from '@tanstack/react-query'
|
||||||
import { fetchLiveState } from '../api'
|
import { fetchLiveState, fetchWeekendContext } from '../api'
|
||||||
import type { LivePosition, LiveStreamData } from '../types'
|
import type { LivePosition, LiveStreamData } from '../types'
|
||||||
import {
|
import {
|
||||||
loadPinnedDrivers,
|
loadPinnedDrivers,
|
||||||
@@ -17,6 +17,15 @@ import { recordGapSamples } from '../lib/gapHistory'
|
|||||||
import { battleNumbers, detectBattles } from '../lib/battles'
|
import { battleNumbers, detectBattles } from '../lib/battles'
|
||||||
import type { LiveEvent } from '../lib/events'
|
import type { LiveEvent } from '../lib/events'
|
||||||
import { appendEvents, diffSnapshots, sessionSignature } from '../lib/events'
|
import { appendEvents, diffSnapshots, sessionSignature } from '../lib/events'
|
||||||
|
import {
|
||||||
|
allowsLiveInterpretations,
|
||||||
|
deriveLivePhase,
|
||||||
|
effectiveFeedHealth,
|
||||||
|
rendersSnapshot,
|
||||||
|
terminalSessionStatus,
|
||||||
|
} from '../lib/liveState'
|
||||||
|
import type { TransportHealth } from '../lib/liveState'
|
||||||
|
import { shouldPollHandoffAnalysis } from '../components/live/LiveHandoff'
|
||||||
import { SessionBanner } from '../components/live/SessionBanner'
|
import { SessionBanner } from '../components/live/SessionBanner'
|
||||||
import { TrackStatusBanner } from '../components/live/TrackStatusBanner'
|
import { TrackStatusBanner } from '../components/live/TrackStatusBanner'
|
||||||
import { TimingTower } from '../components/live/TimingTower'
|
import { TimingTower } from '../components/live/TimingTower'
|
||||||
@@ -26,9 +35,12 @@ import { RaceControlFeed } from '../components/live/RaceControlFeed'
|
|||||||
import { EventRail } from '../components/live/EventRail'
|
import { EventRail } from '../components/live/EventRail'
|
||||||
import { TeamRadioTicker } from '../components/live/TeamRadioTicker'
|
import { TeamRadioTicker } from '../components/live/TeamRadioTicker'
|
||||||
import { TyreDegPanel } from '../components/live/TyreDegPanel'
|
import { TyreDegPanel } from '../components/live/TyreDegPanel'
|
||||||
import { Archive, Radio } from 'lucide-react'
|
import { LiveHandoff } from '../components/live/LiveHandoff'
|
||||||
|
import '../styles/live-state.css'
|
||||||
|
|
||||||
type StreamStatus = 'connecting' | 'connected' | 'disconnected' | 'error'
|
/** How often to re-check weekend-context while analysis is still ingesting. */
|
||||||
|
export const WEEKEND_CONTEXT_POLL_MS = 15_000
|
||||||
|
const WEEKEND_CONTEXT_STALE_MS = 15_000
|
||||||
|
|
||||||
export function LiveTimingPage() {
|
export function LiveTimingPage() {
|
||||||
const [activeSnapshot, setActiveSnapshot] = useState<LiveStreamData | null>(null)
|
const [activeSnapshot, setActiveSnapshot] = useState<LiveStreamData | null>(null)
|
||||||
@@ -37,31 +49,84 @@ export function LiveTimingPage() {
|
|||||||
const [archiveSnapshotAt, setArchiveSnapshotAt] = useState<string | null>(null)
|
const [archiveSnapshotAt, setArchiveSnapshotAt] = useState<string | null>(null)
|
||||||
const [archiveMode, setArchiveMode] = useState(false)
|
const [archiveMode, setArchiveMode] = useState(false)
|
||||||
const [isLive, setIsLive] = useState(false)
|
const [isLive, setIsLive] = useState(false)
|
||||||
const [streamStatus, setStreamStatus] = useState<StreamStatus>('connecting')
|
const [streamStatus, setStreamStatus] = useState<TransportHealth>('connecting')
|
||||||
const [now, setNow] = useState(Date.now())
|
const [now, setNow] = useState(Date.now())
|
||||||
const [gapHistory, setGapHistory] = useState<GapHistoryMap>({})
|
const [gapHistory, setGapHistory] = useState<GapHistoryMap>({})
|
||||||
const [pinned, setPinned] = useState<string[]>(() => loadPinnedDrivers())
|
const [pinned, setPinned] = useState<string[]>(() => loadPinnedDrivers())
|
||||||
const [visibleSectors, setVisibleSectors] = useState<VisibleSectorState>({})
|
const [visibleSectors, setVisibleSectors] = useState<VisibleSectorState>({})
|
||||||
const [positions, setPositions] = useState<Record<string, LivePosition>>({})
|
const [, setPositions] = useState<Record<string, LivePosition>>({})
|
||||||
const [events, setEvents] = useState<LiveEvent[]>([])
|
const [events, setEvents] = useState<LiveEvent[]>([])
|
||||||
const prevSnapshotRef = useRef<LiveStreamData | null>(null)
|
const prevSnapshotRef = useRef<LiveStreamData | null>(null)
|
||||||
const sessionSigRef = useRef('')
|
const sessionSigRef = useRef('')
|
||||||
const isLiveRef = useRef(false)
|
const isLiveRef = useRef(false)
|
||||||
const archiveModeRef = useRef(false)
|
const archiveModeRef = useRef(false)
|
||||||
const snapshot = isLive ? activeSnapshot : archiveMode ? archiveSnapshot : null
|
// Whether we ever observed this session as live — used to reason about a
|
||||||
|
// dropped feed vs. a session that was never live in this page session.
|
||||||
|
const wasLiveRef = useRef(false)
|
||||||
const hasArchive = Boolean(archiveSnapshot)
|
const hasArchive = Boolean(archiveSnapshot)
|
||||||
|
|
||||||
const { data, isLoading, isError, error } = useQuery({
|
const {
|
||||||
|
data,
|
||||||
|
isError,
|
||||||
|
error,
|
||||||
|
isFetched: liveStateFetched,
|
||||||
|
} = useQuery({
|
||||||
queryKey: ['live-state'],
|
queryKey: ['live-state'],
|
||||||
queryFn: fetchLiveState,
|
queryFn: fetchLiveState,
|
||||||
staleTime: 5_000,
|
staleTime: 5_000,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// A retained snapshot is only "settled" (session genuinely finished) if it
|
||||||
|
// carries a terminal FIA SessionStatus. Otherwise the upstream feed dropped
|
||||||
|
// while the session was still active and we must stay in `disconnected`.
|
||||||
|
const sessionEndedCleanly = terminalSessionStatus(archiveSnapshot?.SessionStatus)
|
||||||
|
|
||||||
|
// Transport health, active-session state, and archive availability are
|
||||||
|
// orthogonal inputs; deriveLivePhase collapses them into one UI phase.
|
||||||
|
const phase = deriveLivePhase({
|
||||||
|
transport: streamStatus,
|
||||||
|
isLive,
|
||||||
|
hasActiveSnapshot: Boolean(activeSnapshot),
|
||||||
|
hasArchive,
|
||||||
|
archiveMode,
|
||||||
|
sessionEndedCleanly,
|
||||||
|
wasLive: wasLiveRef.current,
|
||||||
|
stateLoaded: liveStateFetched,
|
||||||
|
})
|
||||||
|
const snapshot =
|
||||||
|
phase === 'archive'
|
||||||
|
? archiveSnapshot
|
||||||
|
: isLive
|
||||||
|
? activeSnapshot
|
||||||
|
: phase === 'disconnected'
|
||||||
|
? archiveSnapshot
|
||||||
|
: null
|
||||||
|
|
||||||
|
// Canonical weekend context (issue #72) — the single source of truth for
|
||||||
|
// previous/next/default-analysis identity and temporal state. Only needed
|
||||||
|
// when no session is streaming; keep it idle during a live session. Poll
|
||||||
|
// while a completed session is still ingesting so `settling` can flip to
|
||||||
|
// analysis-ready without a manual refresh.
|
||||||
|
const contextQuery = useQuery({
|
||||||
|
queryKey: ['weekend-context'],
|
||||||
|
queryFn: fetchWeekendContext,
|
||||||
|
enabled: !isLive,
|
||||||
|
staleTime: WEEKEND_CONTEXT_STALE_MS,
|
||||||
|
refetchInterval: (query) => {
|
||||||
|
// Poll until the just-finished previous_completed_session is ready — an
|
||||||
|
// older already-complete default_analysis_session must not stop us.
|
||||||
|
return shouldPollHandoffAnalysis(query.state.data) ? WEEKEND_CONTEXT_POLL_MS : false
|
||||||
|
},
|
||||||
|
refetchIntervalInBackground: false,
|
||||||
|
})
|
||||||
|
const weekendContext = contextQuery.data
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!data) return
|
if (!data) return
|
||||||
const nextLive = data.is_live && Boolean(data.data)
|
const nextLive = data.is_live && Boolean(data.data)
|
||||||
setIsLive(nextLive)
|
setIsLive(nextLive)
|
||||||
isLiveRef.current = nextLive
|
isLiveRef.current = nextLive
|
||||||
|
if (nextLive) wasLiveRef.current = true
|
||||||
if (nextLive && data.data) {
|
if (nextLive && data.data) {
|
||||||
setActiveSnapshot(data.data)
|
setActiveSnapshot(data.data)
|
||||||
setArchiveMode(false)
|
setArchiveMode(false)
|
||||||
@@ -111,6 +176,7 @@ export function LiveTimingPage() {
|
|||||||
setPositions({})
|
setPositions({})
|
||||||
}
|
}
|
||||||
isLiveRef.current = true
|
isLiveRef.current = true
|
||||||
|
wasLiveRef.current = true
|
||||||
setActiveSnapshot(state.data)
|
setActiveSnapshot(state.data)
|
||||||
setArchiveMode(false)
|
setArchiveMode(false)
|
||||||
} else {
|
} else {
|
||||||
@@ -167,6 +233,8 @@ export function LiveTimingPage() {
|
|||||||
}, [snapshot])
|
}, [snapshot])
|
||||||
|
|
||||||
const rawRows = useMemo(() => sortLiveTimingRows(snapshot), [snapshot])
|
const rawRows = useMemo(() => sortLiveTimingRows(snapshot), [snapshot])
|
||||||
|
// Final-snapshot rows for the settling handoff (independent of live rows).
|
||||||
|
const settlingRows = useMemo(() => sortLiveTimingRows(archiveSnapshot), [archiveSnapshot])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (rawRows.length === 0) {
|
if (rawRows.length === 0) {
|
||||||
@@ -210,68 +278,75 @@ export function LiveTimingPage() {
|
|||||||
setPositions(archivePositions)
|
setPositions(archivePositions)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleExitArchive = () => {
|
||||||
|
setArchiveMode(false)
|
||||||
|
}
|
||||||
|
|
||||||
const archiveTimestamp = archiveSnapshotAt ? new Date(archiveSnapshotAt) : null
|
const archiveTimestamp = archiveSnapshotAt ? new Date(archiveSnapshotAt) : null
|
||||||
const archiveLabel =
|
const archiveLabel =
|
||||||
archiveTimestamp && !Number.isNaN(archiveTimestamp.getTime())
|
archiveTimestamp && !Number.isNaN(archiveTimestamp.getTime())
|
||||||
? `Archived snapshot from ${archiveTimestamp.toLocaleString()}`
|
? `Archived snapshot from ${archiveTimestamp.toLocaleString()}`
|
||||||
: 'Archived live timing snapshot'
|
: 'Archived live timing snapshot'
|
||||||
|
|
||||||
|
const showLiveInterpretations = allowsLiveInterpretations(phase)
|
||||||
|
// Upstream FIA loss can leave the browser SSE open; present one coherent
|
||||||
|
// feed-health truth rather than "Connection lost" + "Feed healthy".
|
||||||
|
const feedHealth = effectiveFeedHealth(streamStatus, phase)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="page live-page" data-testid="live-page">
|
<div className="page live-page" data-testid="live-page" data-phase={phase}>
|
||||||
{isError && (
|
{isError && (
|
||||||
<div className="error-box">
|
<div className="error-box">
|
||||||
{error instanceof Error ? error.message : 'Failed to load live timing state'}
|
{error instanceof Error ? error.message : 'Failed to load live timing state'}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{streamStatus === 'disconnected' && snapshot && !archiveMode && (
|
{phase === 'disconnected' && (
|
||||||
<div className="live-status-strip live-status-warn">
|
<div className="live-status-strip live-status-warn" data-testid="live-disconnected-strip">
|
||||||
Stream disconnected — showing last received snapshot
|
Connection lost — showing the last live data while we reconnect. This is not an archive.
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{archiveMode && snapshot && (
|
{phase === 'archive' && (
|
||||||
<div className="live-status-strip live-status-archive" data-testid="live-archive-strip">
|
<div className="live-status-strip live-status-archive" data-testid="live-archive-strip">
|
||||||
{archiveLabel} — live updates are paused for this archive view
|
<span>{archiveLabel} — read-only, live updates are paused</span>
|
||||||
|
<button type="button" className="live-archive-exit" onClick={handleExitArchive}>
|
||||||
|
Exit archive
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{isLoading && !snapshot && (
|
{phase === 'connecting' && (
|
||||||
<div className="loading-state">connecting to live timing…</div>
|
<div className="loading-state">connecting to live timing…</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!isLoading && !snapshot && (
|
{(phase === 'settling' || phase === 'inactive') && (
|
||||||
<div className="empty-state ui-card glass-panel" style={{ padding: '40px', textAlign: 'center', marginTop: '20vh', maxWidth: '400px', marginLeft: 'auto', marginRight: 'auto' }} data-testid="live-empty">
|
<LiveHandoff
|
||||||
<div className="live-empty-status" style={{ marginBottom: '16px' }}>
|
phase={phase}
|
||||||
<span className={`live-conn live-conn-${streamStatus}`}>{streamStatus}</span>
|
transport={feedHealth}
|
||||||
</div>
|
context={weekendContext}
|
||||||
<Radio size={48} style={{ color: 'var(--text-3)', margin: '0 auto 16px auto', display: 'block' }} />
|
rows={settlingRows}
|
||||||
<h2 className="empty-state-title" style={{ fontSize: '20px', marginBottom: '8px' }}>No live session active</h2>
|
capturedAt={archiveSnapshotAt}
|
||||||
<p className="empty-state-desc" style={{ color: 'var(--text-2)' }}>
|
hasArchive={hasArchive}
|
||||||
The telemetry feed is currently offline. <br /><br /> Check the <a href="/" style={{ color: 'var(--red)', textDecoration: 'underline' }}>Command Center</a> for the weekend schedule or explore historical data in the <a href="/race-hub" style={{ color: 'var(--red)', textDecoration: 'underline' }}>Race Hub</a>.
|
onViewArchive={handleViewArchive}
|
||||||
</p>
|
/>
|
||||||
{hasArchive && (
|
|
||||||
<button type="button" className="live-archive-btn" onClick={handleViewArchive}>
|
|
||||||
<Archive size={15} />
|
|
||||||
View Last Session
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{snapshot && (
|
{snapshot && rendersSnapshot(phase) && (
|
||||||
<>
|
<>
|
||||||
<SessionBanner
|
<SessionBanner
|
||||||
isLive={isLive}
|
phase={phase}
|
||||||
isArchive={archiveMode}
|
|
||||||
snapshot={snapshot}
|
snapshot={snapshot}
|
||||||
rows={rows}
|
rows={rows}
|
||||||
connection={streamStatus}
|
transport={feedHealth}
|
||||||
now={now}
|
now={now}
|
||||||
|
capturedAt={phase === 'archive' ? archiveSnapshotAt : null}
|
||||||
/>
|
/>
|
||||||
<TrackStatusBanner status={snapshot.TrackStatus} />
|
<TrackStatusBanner status={snapshot.TrackStatus} />
|
||||||
<PinnedDrivers rows={rows} history={gapHistory} pinned={pinned} onToggle={handleTogglePin} />
|
<PinnedDrivers rows={rows} history={gapHistory} pinned={pinned} onToggle={handleTogglePin} />
|
||||||
<TyreDegPanel rows={rows} sessionType={snapshot.Session?.SessionType} pinned={pinned} />
|
{showLiveInterpretations && (
|
||||||
|
<TyreDegPanel rows={rows} sessionType={snapshot.Session?.SessionType} pinned={pinned} />
|
||||||
|
)}
|
||||||
<div className="live-columns">
|
<div className="live-columns">
|
||||||
<div className="live-tower-col">
|
<div className="live-tower-col">
|
||||||
<div className="sec-header">
|
<div className="sec-header">
|
||||||
|
|||||||
414
frontend/src/styles/live-state.css
Normal file
@@ -0,0 +1,414 @@
|
|||||||
|
/* ── Live → settling → analysis handoff (issue #74) ──
|
||||||
|
*
|
||||||
|
* State-transition presentation for Live: session/flag chrome that replaces
|
||||||
|
* the old connection-as-session conflation, the connection-loss warning, the
|
||||||
|
* archive read-only strip, and the settling/inactive handoff surface.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Session flag: primary session state. Feed health is secondary. */
|
||||||
|
.live-session-flag {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--s2);
|
||||||
|
padding: 5px 9px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-family: var(--f-mono);
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-session-flag-live {
|
||||||
|
background: rgba(225, 6, 0, 0.14);
|
||||||
|
border: 1px solid rgba(225, 6, 0, 0.35);
|
||||||
|
color: #ff6b6b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-session-flag-live.is-stale {
|
||||||
|
background: rgba(255, 214, 0, 0.1);
|
||||||
|
border-color: rgba(255, 214, 0, 0.35);
|
||||||
|
color: var(--yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-session-flag-archive {
|
||||||
|
background: rgba(70, 140, 255, 0.12);
|
||||||
|
border: 1px solid rgba(70, 140, 255, 0.35);
|
||||||
|
color: #8bb7ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-session-dot {
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: currentColor;
|
||||||
|
box-shadow: 0 0 0 0 currentColor;
|
||||||
|
animation: live-pulse 1.6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-session-flag-live.is-stale .live-session-dot {
|
||||||
|
animation: none;
|
||||||
|
opacity: 0.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-feed-health {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--s2);
|
||||||
|
padding: 4px 7px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-family: var(--f-mono);
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-3);
|
||||||
|
border: 1px solid var(--border-2);
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-feed-dot {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-feed-connected {
|
||||||
|
color: var(--green);
|
||||||
|
border-color: rgba(57, 199, 58, 0.25);
|
||||||
|
background: rgba(57, 199, 58, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-feed-connecting {
|
||||||
|
color: var(--yellow);
|
||||||
|
border-color: rgba(255, 214, 0, 0.25);
|
||||||
|
background: rgba(255, 214, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-feed-disconnected,
|
||||||
|
.live-feed-error {
|
||||||
|
color: #ff6b6b;
|
||||||
|
border-color: rgba(225, 6, 0, 0.24);
|
||||||
|
background: rgba(225, 6, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-banner-archive {
|
||||||
|
border-color: rgba(70, 140, 255, 0.28);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-archive-stamp {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-archive-readonly {
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: #8bb7ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-archive-captured {
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--text-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-state-archive {
|
||||||
|
background: rgba(70, 140, 255, 0.12);
|
||||||
|
color: #8bb7ff;
|
||||||
|
border: 1px solid rgba(70, 140, 255, 0.28);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Disconnected warning: a live session whose feed dropped. Distinct from the
|
||||||
|
* blue archive strip so a dropped feed is never mistaken for a read-only
|
||||||
|
* archive. The retained tower stays visible beneath it. */
|
||||||
|
.live-status-strip.live-status-warn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--s3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-status-strip.live-status-warn::before {
|
||||||
|
content: '';
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--yellow);
|
||||||
|
animation: live-pulse 1.6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes live-pulse {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.35;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-status-strip.live-status-archive {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--s4);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-archive-exit {
|
||||||
|
min-height: 28px;
|
||||||
|
padding: 0 var(--s4);
|
||||||
|
border: 1px solid rgba(70, 140, 255, 0.4);
|
||||||
|
border-radius: 4px;
|
||||||
|
background: rgba(70, 140, 255, 0.12);
|
||||||
|
color: #8bb7ff;
|
||||||
|
font-family: var(--f-mono);
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-archive-exit:hover {
|
||||||
|
border-color: rgba(70, 140, 255, 0.7);
|
||||||
|
background: rgba(70, 140, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Handoff surface (settling + inactive) ── */
|
||||||
|
.live-handoff {
|
||||||
|
border: 1px solid var(--border-2);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: var(--s6) var(--s5);
|
||||||
|
background:
|
||||||
|
radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.04), transparent 55%),
|
||||||
|
var(--surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-settling {
|
||||||
|
border-left: 3px solid var(--yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-inactive {
|
||||||
|
border-left: 3px solid var(--border-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-head {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--s3);
|
||||||
|
margin-bottom: var(--s5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-eyebrow {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--s2);
|
||||||
|
align-self: flex-start;
|
||||||
|
padding: 4px var(--s3);
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-settling .live-handoff-eyebrow {
|
||||||
|
color: var(--yellow);
|
||||||
|
background: rgba(245, 158, 11, 0.14);
|
||||||
|
border: 1px solid rgba(245, 158, 11, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-inactive .live-handoff-eyebrow {
|
||||||
|
color: var(--text-2);
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border: 1px solid var(--border-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-title {
|
||||||
|
font-size: 26px;
|
||||||
|
line-height: 1.15;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-captured {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-3);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-sub {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-2);
|
||||||
|
max-width: 62ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-feed {
|
||||||
|
align-self: flex-start;
|
||||||
|
margin-top: var(--s2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Provisional final-order snapshot chips (settling only). */
|
||||||
|
.live-handoff-snapshot {
|
||||||
|
margin-bottom: var(--s5);
|
||||||
|
padding: var(--s4);
|
||||||
|
border: 1px dashed var(--border-2);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(255, 255, 255, 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-snapshot-label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: var(--s3);
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--text-3);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-order {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--s3);
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-order li {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--s2);
|
||||||
|
padding: var(--s2) var(--s3);
|
||||||
|
border: 1px solid var(--border-2);
|
||||||
|
border-radius: 4px;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-order li span:first-child {
|
||||||
|
color: var(--text-3);
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-code {
|
||||||
|
font-weight: 800;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Action cards ── */
|
||||||
|
.live-handoff-actions {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--s3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-action {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--s4);
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--s4) var(--s5);
|
||||||
|
border: 1px solid var(--border-2);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
color: var(--text);
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
transition:
|
||||||
|
border-color 0.15s ease,
|
||||||
|
background 0.15s ease,
|
||||||
|
transform 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.live-handoff-action {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-action:hover {
|
||||||
|
border-color: var(--border-glow);
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
transform: translateX(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-action-body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-action-label {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--s2);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-action-meta {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The primary "open analysis" action is the strongest affordance. */
|
||||||
|
.live-handoff-primary {
|
||||||
|
border-color: rgba(230, 36, 41, 0.4);
|
||||||
|
background: linear-gradient(90deg, rgba(230, 36, 41, 0.14), transparent 60%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-primary:hover {
|
||||||
|
border-color: rgba(230, 36, 41, 0.7);
|
||||||
|
background: linear-gradient(90deg, rgba(230, 36, 41, 0.22), transparent 60%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pending-analysis states read as "waiting", not actionable links. */
|
||||||
|
.live-handoff-primary[data-ready='false'] {
|
||||||
|
border-color: rgba(245, 158, 11, 0.4);
|
||||||
|
background: linear-gradient(90deg, rgba(245, 158, 11, 0.1), transparent 60%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-pending {
|
||||||
|
cursor: default;
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-pending:hover {
|
||||||
|
transform: none;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
border-color: var(--border-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-next {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-next:hover {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Responsive: keep the handoff usable at tablet / mobile widths ── */
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.live-handoff {
|
||||||
|
padding: var(--s5) var(--s4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-title {
|
||||||
|
font-size: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-action {
|
||||||
|
padding: var(--s4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-handoff-action-label {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-status-strip.live-status-archive {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
289
frontend/src/test/LiveHandoff.test.tsx
Normal file
@@ -0,0 +1,289 @@
|
|||||||
|
import { render, screen } from '@testing-library/react'
|
||||||
|
import { describe, expect, it, vi } from 'vitest'
|
||||||
|
import {
|
||||||
|
LiveHandoff,
|
||||||
|
analysisIsReady,
|
||||||
|
handoffAnalysisSession,
|
||||||
|
shouldPollHandoffAnalysis,
|
||||||
|
} from '../components/live/LiveHandoff'
|
||||||
|
import type { LiveTimingRow } from '../lib/live'
|
||||||
|
import type { ContextSession, WeekendContext } from '../types'
|
||||||
|
|
||||||
|
function session(key: number, name: string, type = name): ContextSession['session'] {
|
||||||
|
return {
|
||||||
|
session_key: key,
|
||||||
|
session_name: name,
|
||||||
|
session_type: type,
|
||||||
|
meeting_key: 1,
|
||||||
|
date_start: '2026-07-05T14:00:00Z',
|
||||||
|
date_end: '2026-07-05T16:00:00Z',
|
||||||
|
gmt_offset: '',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function contextSession(
|
||||||
|
key: number,
|
||||||
|
name: string,
|
||||||
|
localAnalysis: string,
|
||||||
|
): ContextSession {
|
||||||
|
return {
|
||||||
|
session: session(key, name),
|
||||||
|
availability: {
|
||||||
|
schedule: 'available',
|
||||||
|
live_transport: 'unknown',
|
||||||
|
live_session: 'inactive',
|
||||||
|
archive: 'unavailable',
|
||||||
|
local_analysis: localAnalysis,
|
||||||
|
freshness: 'fresh',
|
||||||
|
limitations: [],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const baseContext: WeekendContext = {
|
||||||
|
temporal_state: 'session_settling',
|
||||||
|
focus_meeting: {
|
||||||
|
meeting_key: 1,
|
||||||
|
meeting_name: 'British Grand Prix',
|
||||||
|
meeting_official_name: 'British Grand Prix',
|
||||||
|
location: 'Silverstone',
|
||||||
|
country_name: 'UK',
|
||||||
|
country_code: 'GB',
|
||||||
|
country_flag: '',
|
||||||
|
circuit_short_name: 'Silverstone',
|
||||||
|
date_start: '2026-07-03T09:00:00Z',
|
||||||
|
date_end: '2026-07-05T16:00:00Z',
|
||||||
|
year: 2026,
|
||||||
|
},
|
||||||
|
championship_round: 1,
|
||||||
|
total_championship_rounds: 1,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Canonical contract: archive-only just-finished Race vs older ready Practice. */
|
||||||
|
function archiveOnlySettlingContext(previousAnalysis: string): WeekendContext {
|
||||||
|
return {
|
||||||
|
...baseContext,
|
||||||
|
// Older already-ingested session remains the default analysis target.
|
||||||
|
default_analysis_session: contextSession(10, 'Practice 1', 'complete'),
|
||||||
|
// Just-finished Race is archive-complete but not yet analysis-ready.
|
||||||
|
previous_completed_session: contextSession(99, 'Race', previousAnalysis),
|
||||||
|
next_session: contextSession(12, 'Qualifying', 'not_applicable'),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const rows: LiveTimingRow[] = [
|
||||||
|
{ RacingNumber: '1', Position: 1, Driver: { RacingNumber: '1', Position: 1 } as never, Info: { Tla: 'VER' } as never },
|
||||||
|
{ RacingNumber: '4', Position: 2, Driver: { RacingNumber: '4', Position: 2 } as never, Info: { Tla: 'NOR' } as never },
|
||||||
|
]
|
||||||
|
|
||||||
|
describe('analysisIsReady', () => {
|
||||||
|
it('is true only when local analysis is complete', () => {
|
||||||
|
expect(analysisIsReady(contextSession(11, 'Race', 'complete'))).toBe(true)
|
||||||
|
expect(analysisIsReady(contextSession(11, 'Race', 'pending'))).toBe(false)
|
||||||
|
expect(analysisIsReady(contextSession(11, 'Race', 'partial'))).toBe(false)
|
||||||
|
expect(analysisIsReady(undefined)).toBe(false)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('handoffAnalysisSession', () => {
|
||||||
|
it('settling prefers previous_completed_session over an older default', () => {
|
||||||
|
const ctx = archiveOnlySettlingContext('pending')
|
||||||
|
const analysis = handoffAnalysisSession(ctx, 'settling')
|
||||||
|
expect(analysis?.session.session_key).toBe(99)
|
||||||
|
expect(analysis?.session.session_name).toBe('Race')
|
||||||
|
expect(analysisIsReady(analysis)).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('inactive prefers default_analysis_session (shared analysisSessionKey)', () => {
|
||||||
|
const ctx = archiveOnlySettlingContext('pending')
|
||||||
|
const analysis = handoffAnalysisSession(ctx, 'inactive')
|
||||||
|
expect(analysis?.session.session_key).toBe(10)
|
||||||
|
expect(analysis?.session.session_name).toBe('Practice 1')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('settling falls back to default when previous is absent', () => {
|
||||||
|
const ctx = {
|
||||||
|
...baseContext,
|
||||||
|
default_analysis_session: contextSession(11, 'Race', 'pending'),
|
||||||
|
}
|
||||||
|
expect(handoffAnalysisSession(ctx, 'settling')?.session.session_key).toBe(11)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('shouldPollHandoffAnalysis', () => {
|
||||||
|
it('keeps polling when previous is pending even if default is already complete', () => {
|
||||||
|
expect(shouldPollHandoffAnalysis(archiveOnlySettlingContext('pending'))).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('stops polling once the just-finished previous session is ready', () => {
|
||||||
|
expect(shouldPollHandoffAnalysis(archiveOnlySettlingContext('complete'))).toBe(false)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('LiveHandoff settling', () => {
|
||||||
|
it('shows SESSION SETTLING with a pending analysis action while ingesting', () => {
|
||||||
|
render(
|
||||||
|
<LiveHandoff
|
||||||
|
phase="settling"
|
||||||
|
transport="connected"
|
||||||
|
context={{
|
||||||
|
...baseContext,
|
||||||
|
previous_completed_session: contextSession(11, 'Race', 'pending'),
|
||||||
|
}}
|
||||||
|
rows={rows}
|
||||||
|
capturedAt="2026-07-05T16:02:00Z"
|
||||||
|
hasArchive
|
||||||
|
onViewArchive={vi.fn()}
|
||||||
|
/>,
|
||||||
|
)
|
||||||
|
|
||||||
|
expect(screen.getByTestId('live-settling')).toBeInTheDocument()
|
||||||
|
expect(screen.getByText('SESSION SETTLING')).toBeInTheDocument()
|
||||||
|
expect(screen.getByTestId('live-handoff-captured')).toHaveTextContent('Final feed snapshot captured')
|
||||||
|
const action = screen.getByTestId('live-handoff-analysis')
|
||||||
|
expect(action).toHaveAttribute('href', '/race-hub?session_key=11')
|
||||||
|
expect(action).toHaveAttribute('data-ready', 'false')
|
||||||
|
expect(action).toHaveTextContent('Open Race analysis')
|
||||||
|
expect(action).toHaveTextContent(/analysis will fill in as data ingests/i)
|
||||||
|
// Provisional final order from the retained snapshot.
|
||||||
|
expect(screen.getByTestId('live-handoff-snapshot')).toHaveTextContent('VER')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('links/labels/readiness follow archive-only previous, not an older ready default', () => {
|
||||||
|
render(
|
||||||
|
<LiveHandoff
|
||||||
|
phase="settling"
|
||||||
|
transport="connected"
|
||||||
|
context={archiveOnlySettlingContext('pending')}
|
||||||
|
rows={rows}
|
||||||
|
capturedAt="2026-07-05T16:02:00Z"
|
||||||
|
hasArchive
|
||||||
|
onViewArchive={vi.fn()}
|
||||||
|
/>,
|
||||||
|
)
|
||||||
|
|
||||||
|
const action = screen.getByTestId('live-handoff-analysis')
|
||||||
|
expect(action).toHaveAttribute('href', '/race-hub?session_key=99')
|
||||||
|
expect(action).toHaveAttribute('data-ready', 'false')
|
||||||
|
expect(action).toHaveTextContent('Open Race analysis')
|
||||||
|
expect(action).toHaveTextContent(/Settling — analysis will fill in as data ingests/i)
|
||||||
|
expect(action).not.toHaveTextContent('Practice 1')
|
||||||
|
expect(action).not.toHaveTextContent(/full timing, strategy & story ready/i)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('flips to analysis-ready once local ingestion completes', () => {
|
||||||
|
render(
|
||||||
|
<LiveHandoff
|
||||||
|
phase="settling"
|
||||||
|
transport="connected"
|
||||||
|
context={{
|
||||||
|
...baseContext,
|
||||||
|
previous_completed_session: contextSession(11, 'Race', 'complete'),
|
||||||
|
}}
|
||||||
|
rows={rows}
|
||||||
|
capturedAt="2026-07-05T16:02:00Z"
|
||||||
|
hasArchive={false}
|
||||||
|
onViewArchive={vi.fn()}
|
||||||
|
/>,
|
||||||
|
)
|
||||||
|
const action = screen.getByTestId('live-handoff-analysis')
|
||||||
|
expect(action).toHaveAttribute('data-ready', 'true')
|
||||||
|
expect(action).toHaveTextContent(/full timing, strategy & story ready/i)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('never renders live/connected chrome or a countdown in settling', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<LiveHandoff
|
||||||
|
phase="settling"
|
||||||
|
transport="connected"
|
||||||
|
context={{
|
||||||
|
...baseContext,
|
||||||
|
previous_completed_session: contextSession(11, 'Race', 'complete'),
|
||||||
|
}}
|
||||||
|
rows={rows}
|
||||||
|
capturedAt="2026-07-05T16:02:00Z"
|
||||||
|
hasArchive
|
||||||
|
onViewArchive={vi.fn()}
|
||||||
|
/>,
|
||||||
|
)
|
||||||
|
expect(screen.queryByText('LIVE SESSION')).not.toBeInTheDocument()
|
||||||
|
expect(screen.queryByTestId('live-clock')).not.toBeInTheDocument()
|
||||||
|
expect(container.querySelector('.live-session-flag-live')).toBeNull()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('uses non-settling readiness copy when inactive and analysis is still ingesting', () => {
|
||||||
|
render(
|
||||||
|
<LiveHandoff
|
||||||
|
phase="inactive"
|
||||||
|
transport="connected"
|
||||||
|
context={{ ...baseContext, default_analysis_session: contextSession(11, 'Race', 'pending') }}
|
||||||
|
rows={[]}
|
||||||
|
hasArchive={false}
|
||||||
|
onViewArchive={vi.fn()}
|
||||||
|
/>,
|
||||||
|
)
|
||||||
|
const action = screen.getByTestId('live-handoff-analysis')
|
||||||
|
expect(action).toHaveAttribute('data-ready', 'false')
|
||||||
|
expect(action).toHaveTextContent(/analysis will fill in as data ingests/i)
|
||||||
|
expect(action).not.toHaveTextContent(/^Settling/i)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('LiveHandoff inactive', () => {
|
||||||
|
it('uses shared next + recap context instead of a telemetry-offline dead end', () => {
|
||||||
|
render(
|
||||||
|
<LiveHandoff
|
||||||
|
phase="inactive"
|
||||||
|
transport="connected"
|
||||||
|
context={{
|
||||||
|
...baseContext,
|
||||||
|
temporal_state: 'between_sessions',
|
||||||
|
default_analysis_session: contextSession(11, 'Practice 1', 'complete'),
|
||||||
|
next_session: contextSession(12, 'Qualifying', 'not_applicable'),
|
||||||
|
previous_completed_session: contextSession(10, 'Practice 2', 'complete'),
|
||||||
|
}}
|
||||||
|
rows={[]}
|
||||||
|
hasArchive={false}
|
||||||
|
onViewArchive={vi.fn()}
|
||||||
|
/>,
|
||||||
|
)
|
||||||
|
expect(screen.getByTestId('live-inactive')).toBeInTheDocument()
|
||||||
|
expect(screen.getByText('NO LIVE SESSION')).toBeInTheDocument()
|
||||||
|
expect(screen.getByTestId('live-handoff-next')).toHaveTextContent('Qualifying')
|
||||||
|
expect(screen.getByTestId('live-handoff-recap')).toHaveTextContent('Practice 2')
|
||||||
|
// No provisional-order snapshot when inactive.
|
||||||
|
expect(screen.queryByTestId('live-handoff-snapshot')).not.toBeInTheDocument()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('does not duplicate the recap card when previous equals the analysis target', () => {
|
||||||
|
render(
|
||||||
|
<LiveHandoff
|
||||||
|
phase="inactive"
|
||||||
|
transport="connected"
|
||||||
|
context={{
|
||||||
|
...baseContext,
|
||||||
|
default_analysis_session: contextSession(11, 'Race', 'complete'),
|
||||||
|
previous_completed_session: contextSession(11, 'Race', 'complete'),
|
||||||
|
}}
|
||||||
|
rows={[]}
|
||||||
|
hasArchive={false}
|
||||||
|
onViewArchive={vi.fn()}
|
||||||
|
/>,
|
||||||
|
)
|
||||||
|
expect(screen.queryByTestId('live-handoff-recap')).not.toBeInTheDocument()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('falls back to Weekend when the context has nothing to offer', () => {
|
||||||
|
render(
|
||||||
|
<LiveHandoff
|
||||||
|
phase="inactive"
|
||||||
|
transport="error"
|
||||||
|
context={{ temporal_state: 'no_season', championship_round: 0, total_championship_rounds: 0 }}
|
||||||
|
rows={[]}
|
||||||
|
hasArchive={false}
|
||||||
|
onViewArchive={vi.fn()}
|
||||||
|
/>,
|
||||||
|
)
|
||||||
|
expect(screen.getByTestId('live-handoff-fallback')).toHaveTextContent('Weekend')
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -1,32 +1,34 @@
|
|||||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||||
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
|
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
|
||||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||||
import { LiveTimingPage } from '../pages/LiveTimingPage'
|
import { LiveTimingPage, WEEKEND_CONTEXT_POLL_MS } from '../pages/LiveTimingPage'
|
||||||
import type { LiveStateResponse, LiveStreamData } from '../types'
|
import type { LiveStateResponse, LiveStreamData, WeekendContext } from '../types'
|
||||||
|
|
||||||
vi.mock('../api', () => ({
|
vi.mock('../api', () => ({
|
||||||
fetchLiveState: vi.fn(),
|
fetchLiveState: vi.fn(),
|
||||||
fetchLiveTrackOutline: vi.fn(),
|
fetchLiveTrackOutline: vi.fn(),
|
||||||
|
fetchWeekendContext: vi.fn(),
|
||||||
}))
|
}))
|
||||||
|
|
||||||
import { fetchLiveState, fetchLiveTrackOutline } from '../api'
|
import { fetchLiveState, fetchLiveTrackOutline, fetchWeekendContext } from '../api'
|
||||||
|
|
||||||
const mockFetchLiveState = vi.mocked(fetchLiveState)
|
const mockFetchLiveState = vi.mocked(fetchLiveState)
|
||||||
const mockFetchLiveTrackOutline = vi.mocked(fetchLiveTrackOutline)
|
const mockFetchLiveTrackOutline = vi.mocked(fetchLiveTrackOutline)
|
||||||
|
const mockFetchWeekendContext = vi.mocked(fetchWeekendContext)
|
||||||
|
|
||||||
|
// A MockEventSource that opens on construct but never emits a snapshot, so the
|
||||||
|
// initial /api/v1/live/state query drives the rendered phase.
|
||||||
class MockEventSource {
|
class MockEventSource {
|
||||||
onopen: (() => void) | null = null
|
onopen: (() => void) | null = null
|
||||||
onerror: (() => void) | null = null
|
onerror: (() => void) | null = null
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
setTimeout(() => this.onopen?.(), 0)
|
setTimeout(() => this.onopen?.(), 0)
|
||||||
}
|
}
|
||||||
|
|
||||||
addEventListener() {}
|
addEventListener() {}
|
||||||
close() {}
|
close() {}
|
||||||
}
|
}
|
||||||
|
|
||||||
const archivedSnapshot: LiveStreamData = {
|
const raceSnapshot: LiveStreamData = {
|
||||||
Drivers: {
|
Drivers: {
|
||||||
'1': {
|
'1': {
|
||||||
RacingNumber: '1',
|
RacingNumber: '1',
|
||||||
@@ -63,19 +65,10 @@ const archivedSnapshot: LiveStreamData = {
|
|||||||
LastName: 'Verstappen',
|
LastName: 'Verstappen',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
Tyres: {
|
Tyres: { '1': { Compound: 'HARD', New: false, Age: 12 } },
|
||||||
'1': { Compound: 'HARD', New: false, Age: 12 },
|
|
||||||
},
|
|
||||||
Telemetry: {},
|
Telemetry: {},
|
||||||
RCMessages: [],
|
RCMessages: [],
|
||||||
Weather: {
|
Weather: { AirTemp: 22, TrackTemp: 41, Humidity: 58, WindSpeed: 3, WindDir: 180, Rainfall: false },
|
||||||
AirTemp: 22,
|
|
||||||
TrackTemp: 41,
|
|
||||||
Humidity: 58,
|
|
||||||
WindSpeed: 3,
|
|
||||||
WindDir: 180,
|
|
||||||
Rainfall: false,
|
|
||||||
},
|
|
||||||
Session: {
|
Session: {
|
||||||
MeetingName: 'Testonia Grand Prix',
|
MeetingName: 'Testonia Grand Prix',
|
||||||
CircuitName: 'Testring',
|
CircuitName: 'Testring',
|
||||||
@@ -84,9 +77,9 @@ const archivedSnapshot: LiveStreamData = {
|
|||||||
Path: '',
|
Path: '',
|
||||||
},
|
},
|
||||||
TeamRadio: [],
|
TeamRadio: [],
|
||||||
SessionStatus: 'Finished',
|
SessionStatus: 'Started',
|
||||||
TrackStatus: '1',
|
TrackStatus: '1',
|
||||||
CurrentLap: 57,
|
CurrentLap: 30,
|
||||||
TotalLaps: 57,
|
TotalLaps: 57,
|
||||||
Clock: '',
|
Clock: '',
|
||||||
ClockRefTime: '',
|
ClockRefTime: '',
|
||||||
@@ -94,17 +87,93 @@ const archivedSnapshot: LiveStreamData = {
|
|||||||
Stints: {},
|
Stints: {},
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderPage(response: LiveStateResponse) {
|
function weekendContext(localAnalysis: string): WeekendContext {
|
||||||
const queryClient = new QueryClient({
|
return {
|
||||||
defaultOptions: { queries: { retry: false } },
|
temporal_state: 'session_settling',
|
||||||
})
|
focus_meeting: {
|
||||||
|
meeting_key: 1,
|
||||||
|
meeting_name: 'Testonia Grand Prix',
|
||||||
|
meeting_official_name: 'Testonia Grand Prix',
|
||||||
|
location: 'Testring',
|
||||||
|
country_name: 'Testonia',
|
||||||
|
country_code: 'TS',
|
||||||
|
country_flag: '',
|
||||||
|
circuit_short_name: 'Testring',
|
||||||
|
date_start: '2026-07-03T09:00:00Z',
|
||||||
|
date_end: '2026-07-05T16:00:00Z',
|
||||||
|
year: 2026,
|
||||||
|
},
|
||||||
|
previous_completed_session: {
|
||||||
|
session: {
|
||||||
|
session_key: 99,
|
||||||
|
session_name: 'Race',
|
||||||
|
session_type: 'Race',
|
||||||
|
meeting_key: 1,
|
||||||
|
date_start: '2026-07-05T14:00:00Z',
|
||||||
|
date_end: '2026-07-05T16:00:00Z',
|
||||||
|
gmt_offset: '',
|
||||||
|
},
|
||||||
|
availability: {
|
||||||
|
schedule: 'available',
|
||||||
|
live_transport: 'unknown',
|
||||||
|
live_session: 'inactive',
|
||||||
|
archive: 'available',
|
||||||
|
local_analysis: localAnalysis,
|
||||||
|
freshness: 'fresh',
|
||||||
|
limitations: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
championship_round: 1,
|
||||||
|
total_championship_rounds: 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Just-finished archive-only Race + older already-ready Practice default. */
|
||||||
|
function archiveOnlySettlingContext(previousAnalysis: string): WeekendContext {
|
||||||
|
return {
|
||||||
|
...weekendContext(previousAnalysis),
|
||||||
|
default_analysis_session: {
|
||||||
|
session: {
|
||||||
|
session_key: 10,
|
||||||
|
session_name: 'Practice 1',
|
||||||
|
session_type: 'Practice',
|
||||||
|
meeting_key: 1,
|
||||||
|
date_start: '2026-07-04T12:00:00Z',
|
||||||
|
date_end: '2026-07-04T13:00:00Z',
|
||||||
|
gmt_offset: '',
|
||||||
|
},
|
||||||
|
availability: {
|
||||||
|
schedule: 'available',
|
||||||
|
live_transport: 'unknown',
|
||||||
|
live_session: 'inactive',
|
||||||
|
archive: 'available',
|
||||||
|
local_analysis: 'complete',
|
||||||
|
freshness: 'fresh',
|
||||||
|
limitations: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderPage(
|
||||||
|
response: LiveStateResponse,
|
||||||
|
context?: WeekendContext,
|
||||||
|
options: { setWeekendContext?: boolean } = {},
|
||||||
|
) {
|
||||||
|
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
|
||||||
mockFetchLiveState.mockResolvedValue(response)
|
mockFetchLiveState.mockResolvedValue(response)
|
||||||
mockFetchLiveTrackOutline.mockResolvedValue({
|
mockFetchLiveTrackOutline.mockResolvedValue({
|
||||||
circuit_key: 1,
|
circuit_key: 1,
|
||||||
points: [],
|
points: [],
|
||||||
bounds: { minX: 0, maxX: 1, minY: 0, maxY: 1 },
|
bounds: { minX: 0, maxX: 1, minY: 0, maxY: 1 },
|
||||||
})
|
})
|
||||||
|
// Allow callers to pre-configure the weekend-context mock (e.g. pending→complete
|
||||||
|
// polling) without this helper overwriting the chain.
|
||||||
|
if (options.setWeekendContext !== false) {
|
||||||
|
mockFetchWeekendContext.mockResolvedValue(
|
||||||
|
context ?? { temporal_state: 'no_season', championship_round: 0, total_championship_rounds: 0 },
|
||||||
|
)
|
||||||
|
}
|
||||||
return render(
|
return render(
|
||||||
<QueryClientProvider client={queryClient}>
|
<QueryClientProvider client={queryClient}>
|
||||||
<LiveTimingPage />
|
<LiveTimingPage />
|
||||||
@@ -112,7 +181,7 @@ function renderPage(response: LiveStateResponse) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
describe('LiveTimingPage archive mode', () => {
|
describe('LiveTimingPage', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
vi.clearAllMocks()
|
vi.clearAllMocks()
|
||||||
Object.defineProperty(window, 'EventSource', {
|
Object.defineProperty(window, 'EventSource', {
|
||||||
@@ -122,45 +191,205 @@ describe('LiveTimingPage archive mode', () => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('keeps archived snapshots behind the View Last Session action', async () => {
|
afterEach(() => {
|
||||||
renderPage({
|
vi.useRealTimers()
|
||||||
is_live: false,
|
})
|
||||||
data: null,
|
|
||||||
last_snapshot: archivedSnapshot,
|
it('renders the live timing tower for an active session', async () => {
|
||||||
last_positions: {
|
renderPage({ is_live: true, data: raceSnapshot })
|
||||||
'1': { x: 10, y: 20, z: 0, status: 'OnTrack' },
|
expect(await screen.findByText('Timing Tower')).toBeInTheDocument()
|
||||||
|
expect(screen.getByTestId('live-page')).toHaveAttribute('data-phase', 'live')
|
||||||
|
expect(screen.getByTestId('live-session-flag')).toHaveTextContent('LIVE SESSION')
|
||||||
|
expect(screen.getByTestId('live-feed-health')).toBeInTheDocument()
|
||||||
|
expect(screen.getAllByText('VER').length).toBeGreaterThan(0)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('enters the settling handoff (not archive) when the session ends cleanly', async () => {
|
||||||
|
renderPage(
|
||||||
|
{
|
||||||
|
is_live: false,
|
||||||
|
data: null,
|
||||||
|
last_snapshot: { ...raceSnapshot, SessionStatus: 'Finished' },
|
||||||
|
last_snapshot_at: '2026-07-05T16:02:00Z',
|
||||||
},
|
},
|
||||||
last_snapshot_at: '2026-07-04T14:00:00Z',
|
weekendContext('pending'),
|
||||||
|
)
|
||||||
|
|
||||||
|
const settling = await screen.findByTestId('live-settling')
|
||||||
|
expect(settling).toBeInTheDocument()
|
||||||
|
expect(screen.getByTestId('live-page')).toHaveAttribute('data-phase', 'settling')
|
||||||
|
// Just-finished previous_completed_session drives the primary action target.
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(screen.getByTestId('live-handoff-analysis')).toHaveAttribute(
|
||||||
|
'href',
|
||||||
|
'/race-hub?session_key=99',
|
||||||
|
),
|
||||||
|
)
|
||||||
|
// The timing tower is not shown while settling — it is a handoff surface.
|
||||||
|
expect(screen.queryByText('Timing Tower')).not.toBeInTheDocument()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('settles against archive-only previous, not an older ready default_analysis_session', async () => {
|
||||||
|
vi.useFakeTimers({ shouldAdvanceTime: true })
|
||||||
|
mockFetchWeekendContext
|
||||||
|
.mockResolvedValueOnce(archiveOnlySettlingContext('pending'))
|
||||||
|
.mockResolvedValue(archiveOnlySettlingContext('complete'))
|
||||||
|
|
||||||
|
renderPage(
|
||||||
|
{
|
||||||
|
is_live: false,
|
||||||
|
data: null,
|
||||||
|
last_snapshot: { ...raceSnapshot, SessionStatus: 'Finished' },
|
||||||
|
last_snapshot_at: '2026-07-05T16:02:00Z',
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
{ setWeekendContext: false },
|
||||||
|
)
|
||||||
|
|
||||||
|
const action = await screen.findByTestId('live-handoff-analysis')
|
||||||
|
expect(action).toHaveAttribute('href', '/race-hub?session_key=99')
|
||||||
|
expect(action).toHaveAttribute('data-ready', 'false')
|
||||||
|
expect(action).toHaveTextContent('Open Race analysis')
|
||||||
|
expect(action).not.toHaveTextContent('Practice 1')
|
||||||
|
|
||||||
|
// Older default is already complete — polling must continue for previous.
|
||||||
|
await act(async () => {
|
||||||
|
await vi.advanceTimersByTimeAsync(WEEKEND_CONTEXT_POLL_MS + 500)
|
||||||
})
|
})
|
||||||
|
|
||||||
expect(await screen.findByTestId('live-empty')).toHaveTextContent('No live session active')
|
await waitFor(() =>
|
||||||
|
expect(screen.getByTestId('live-handoff-analysis')).toHaveAttribute('data-ready', 'true'),
|
||||||
|
)
|
||||||
|
expect(screen.getByTestId('live-handoff-analysis')).toHaveAttribute(
|
||||||
|
'href',
|
||||||
|
'/race-hub?session_key=99',
|
||||||
|
)
|
||||||
|
expect(mockFetchWeekendContext.mock.calls.length).toBeGreaterThan(1)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('flips settling → analysis-ready when polling sees ingestion complete', async () => {
|
||||||
|
vi.useFakeTimers({ shouldAdvanceTime: true })
|
||||||
|
// First fetch: pending. Subsequent polls: complete.
|
||||||
|
mockFetchWeekendContext
|
||||||
|
.mockResolvedValueOnce(weekendContext('pending'))
|
||||||
|
.mockResolvedValue(weekendContext('complete'))
|
||||||
|
|
||||||
|
renderPage(
|
||||||
|
{
|
||||||
|
is_live: false,
|
||||||
|
data: null,
|
||||||
|
last_snapshot: { ...raceSnapshot, SessionStatus: 'Finished' },
|
||||||
|
last_snapshot_at: '2026-07-05T16:02:00Z',
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
{ setWeekendContext: false },
|
||||||
|
)
|
||||||
|
|
||||||
|
const action = await screen.findByTestId('live-handoff-analysis')
|
||||||
|
expect(action).toHaveAttribute('data-ready', 'false')
|
||||||
|
expect(action).toHaveTextContent(/analysis will fill in as data ingests/i)
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
await vi.advanceTimersByTimeAsync(WEEKEND_CONTEXT_POLL_MS + 500)
|
||||||
|
})
|
||||||
|
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(screen.getByTestId('live-handoff-analysis')).toHaveAttribute('data-ready', 'true'),
|
||||||
|
)
|
||||||
|
expect(screen.getByTestId('live-handoff-analysis')).toHaveTextContent(
|
||||||
|
/full timing, strategy & story ready/i,
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('retains the last snapshot with a disconnected warning (not settling) on a feed drop', async () => {
|
||||||
|
// is_live=false but the retained snapshot has a NON-terminal SessionStatus:
|
||||||
|
// the FIA feed dropped while the session was still active.
|
||||||
|
renderPage(
|
||||||
|
{
|
||||||
|
is_live: false,
|
||||||
|
data: null,
|
||||||
|
last_snapshot: { ...raceSnapshot, SessionStatus: 'Started' },
|
||||||
|
last_snapshot_at: '2026-07-05T15:30:00Z',
|
||||||
|
},
|
||||||
|
weekendContext('pending'),
|
||||||
|
)
|
||||||
|
|
||||||
|
expect(await screen.findByTestId('live-disconnected-strip')).toHaveTextContent(
|
||||||
|
/showing the last live data/i,
|
||||||
|
)
|
||||||
|
expect(screen.getByTestId('live-page')).toHaveAttribute('data-phase', 'disconnected')
|
||||||
|
// The retained live tower stays visible; we never fell into settling/archive.
|
||||||
|
expect(screen.getByText('Timing Tower')).toBeInTheDocument()
|
||||||
|
expect(screen.queryByTestId('live-settling')).not.toBeInTheDocument()
|
||||||
|
expect(screen.queryByTestId('live-archive-strip')).not.toBeInTheDocument()
|
||||||
|
// SSE may still be open (MockEventSource opens) — health must not say healthy.
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(screen.getByTestId('live-feed-health')).toHaveTextContent(/reconnecting/i),
|
||||||
|
)
|
||||||
|
expect(screen.getByTestId('live-feed-health')).not.toHaveTextContent(/feed healthy/i)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('keeps the settled snapshot behind an explicit read-only archive action', async () => {
|
||||||
|
renderPage(
|
||||||
|
{
|
||||||
|
is_live: false,
|
||||||
|
data: null,
|
||||||
|
last_snapshot: { ...raceSnapshot, SessionStatus: 'Finished' },
|
||||||
|
last_positions: { '1': { x: 10, y: 20, z: 0, status: 'OnTrack' } },
|
||||||
|
last_snapshot_at: '2026-07-05T16:02:00Z',
|
||||||
|
},
|
||||||
|
weekendContext('complete'),
|
||||||
|
)
|
||||||
|
|
||||||
|
// Settling first — the tower is hidden until the user opens the archive.
|
||||||
|
await screen.findByTestId('live-settling')
|
||||||
expect(screen.queryByText('Timing Tower')).not.toBeInTheDocument()
|
expect(screen.queryByText('Timing Tower')).not.toBeInTheDocument()
|
||||||
|
|
||||||
fireEvent.click(screen.getByRole('button', { name: /view last session/i }))
|
fireEvent.click(screen.getByTestId('live-handoff-archive'))
|
||||||
|
|
||||||
await waitFor(() => {
|
await waitFor(() =>
|
||||||
expect(screen.getByTestId('live-archive-strip')).toHaveTextContent('Archived snapshot')
|
expect(screen.getByTestId('live-archive-strip')).toHaveTextContent(/read-only/i),
|
||||||
})
|
)
|
||||||
expect(screen.getByText('Timing Tower')).toBeInTheDocument()
|
expect(screen.getByText('Timing Tower')).toBeInTheDocument()
|
||||||
expect(screen.getAllByText('VER').length).toBeGreaterThan(0)
|
// Archive presents its read-only, timestamped chrome — never LIVE.
|
||||||
expect(screen.getByText('archive')).toBeInTheDocument()
|
expect(screen.getByText('archive')).toBeInTheDocument()
|
||||||
|
expect(screen.queryByText('LIVE SESSION')).not.toBeInTheDocument()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('does not show the archive action when no snapshot is retained', async () => {
|
it('shows the inactive weekend context when nothing is live or retained', async () => {
|
||||||
renderPage({ is_live: false, data: null })
|
renderPage(
|
||||||
|
{ is_live: false, data: null },
|
||||||
|
{
|
||||||
|
temporal_state: 'between_weekends',
|
||||||
|
next_session: {
|
||||||
|
session: {
|
||||||
|
session_key: 21,
|
||||||
|
session_name: 'Practice 1',
|
||||||
|
session_type: 'Practice 1',
|
||||||
|
meeting_key: 2,
|
||||||
|
date_start: '2026-07-17T09:00:00Z',
|
||||||
|
date_end: '2026-07-17T10:00:00Z',
|
||||||
|
gmt_offset: '',
|
||||||
|
},
|
||||||
|
availability: {
|
||||||
|
schedule: 'available',
|
||||||
|
live_transport: 'unknown',
|
||||||
|
live_session: 'inactive',
|
||||||
|
archive: 'unavailable',
|
||||||
|
local_analysis: 'not_applicable',
|
||||||
|
freshness: 'fresh',
|
||||||
|
limitations: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
championship_round: 2,
|
||||||
|
total_championship_rounds: 24,
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
expect(await screen.findByTestId('live-empty')).toHaveTextContent('No live session active')
|
expect(await screen.findByTestId('live-inactive')).toBeInTheDocument()
|
||||||
expect(screen.queryByRole('button', { name: /view last session/i })).not.toBeInTheDocument()
|
expect(screen.getByTestId('live-page')).toHaveAttribute('data-phase', 'inactive')
|
||||||
})
|
await waitFor(() =>
|
||||||
|
expect(screen.getByTestId('live-handoff-next')).toHaveTextContent('Practice 1'),
|
||||||
it('temporarily omits the track map while live GPS is unavailable', async () => {
|
)
|
||||||
renderPage({
|
|
||||||
is_live: true,
|
|
||||||
data: { ...archivedSnapshot, SessionStatus: 'Started' },
|
|
||||||
})
|
|
||||||
|
|
||||||
expect(await screen.findByText('Timing Tower')).toBeInTheDocument()
|
|
||||||
expect(screen.queryByText('Track Map')).not.toBeInTheDocument()
|
|
||||||
expect(mockFetchLiveTrackOutline).not.toHaveBeenCalled()
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
183
frontend/src/test/liveState.test.ts
Normal file
@@ -0,0 +1,183 @@
|
|||||||
|
import { describe, expect, it } from 'vitest'
|
||||||
|
import {
|
||||||
|
allowsLiveInterpretations,
|
||||||
|
deriveLivePhase,
|
||||||
|
effectiveFeedHealth,
|
||||||
|
isReadOnlyPhase,
|
||||||
|
rendersSnapshot,
|
||||||
|
terminalSessionStatus,
|
||||||
|
type LiveStateInputs,
|
||||||
|
} from '../lib/liveState'
|
||||||
|
|
||||||
|
const base: LiveStateInputs = {
|
||||||
|
transport: 'connecting',
|
||||||
|
isLive: false,
|
||||||
|
hasActiveSnapshot: false,
|
||||||
|
hasArchive: false,
|
||||||
|
archiveMode: false,
|
||||||
|
sessionEndedCleanly: false,
|
||||||
|
wasLive: false,
|
||||||
|
stateLoaded: false,
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('terminalSessionStatus', () => {
|
||||||
|
it('recognizes genuine session-end statuses', () => {
|
||||||
|
for (const s of ['Finished', 'Finalised', 'Finalized', 'ENDED', 'Aborted']) {
|
||||||
|
expect(terminalSessionStatus(s)).toBe(true)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
it('treats still-running / unknown statuses as non-terminal', () => {
|
||||||
|
for (const s of ['Started', 'Resumed', 'Inactive', '', undefined, null]) {
|
||||||
|
expect(terminalSessionStatus(s)).toBe(false)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('deriveLivePhase transitions', () => {
|
||||||
|
it('connecting: cold start with the feed still opening', () => {
|
||||||
|
expect(deriveLivePhase({ ...base, transport: 'connecting' })).toBe('connecting')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('connecting → live once a session snapshot arrives', () => {
|
||||||
|
expect(
|
||||||
|
deriveLivePhase({
|
||||||
|
...base,
|
||||||
|
transport: 'connected',
|
||||||
|
isLive: true,
|
||||||
|
hasActiveSnapshot: true,
|
||||||
|
}),
|
||||||
|
).toBe('live')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('live → disconnected when the SSE transport drops mid-session', () => {
|
||||||
|
expect(
|
||||||
|
deriveLivePhase({
|
||||||
|
...base,
|
||||||
|
transport: 'disconnected',
|
||||||
|
isLive: true,
|
||||||
|
hasActiveSnapshot: true,
|
||||||
|
wasLive: true,
|
||||||
|
}),
|
||||||
|
).toBe('disconnected')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('live → settling when the session ends with a terminal status', () => {
|
||||||
|
// Feed reports is_live=false, transport healthy, retained snapshot carries a
|
||||||
|
// terminal SessionStatus → the session genuinely finished.
|
||||||
|
expect(
|
||||||
|
deriveLivePhase({
|
||||||
|
...base,
|
||||||
|
transport: 'connected',
|
||||||
|
isLive: false,
|
||||||
|
hasArchive: true,
|
||||||
|
sessionEndedCleanly: true,
|
||||||
|
wasLive: true,
|
||||||
|
}),
|
||||||
|
).toBe('settling')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('live → disconnected (NOT settling) when the FIA feed drops but status is non-terminal', () => {
|
||||||
|
// This is the P0 case: server deactivate() moved a still-active snapshot to
|
||||||
|
// last_snapshot with is_live=false but a non-terminal SessionStatus. The
|
||||||
|
// browser transport is healthy. We must warn + retain, never settle/archive.
|
||||||
|
expect(
|
||||||
|
deriveLivePhase({
|
||||||
|
...base,
|
||||||
|
transport: 'connected',
|
||||||
|
isLive: false,
|
||||||
|
hasArchive: true,
|
||||||
|
sessionEndedCleanly: false,
|
||||||
|
wasLive: true,
|
||||||
|
}),
|
||||||
|
).toBe('disconnected')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('a retained non-terminal snapshot on cold load is disconnected, not settling', () => {
|
||||||
|
expect(
|
||||||
|
deriveLivePhase({
|
||||||
|
...base,
|
||||||
|
transport: 'connected',
|
||||||
|
isLive: false,
|
||||||
|
hasArchive: true,
|
||||||
|
sessionEndedCleanly: false,
|
||||||
|
wasLive: false,
|
||||||
|
}),
|
||||||
|
).toBe('disconnected')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('settling → archive when the user explicitly opens the read-only snapshot', () => {
|
||||||
|
expect(
|
||||||
|
deriveLivePhase({
|
||||||
|
...base,
|
||||||
|
transport: 'connected',
|
||||||
|
isLive: false,
|
||||||
|
hasArchive: true,
|
||||||
|
sessionEndedCleanly: true,
|
||||||
|
archiveMode: true,
|
||||||
|
}),
|
||||||
|
).toBe('archive')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('archive mode wins over an active session (user-chosen read-only view)', () => {
|
||||||
|
expect(
|
||||||
|
deriveLivePhase({
|
||||||
|
...base,
|
||||||
|
transport: 'connected',
|
||||||
|
isLive: true,
|
||||||
|
hasActiveSnapshot: true,
|
||||||
|
hasArchive: true,
|
||||||
|
archiveMode: true,
|
||||||
|
}),
|
||||||
|
).toBe('archive')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('inactive when there is no session and nothing retained', () => {
|
||||||
|
expect(deriveLivePhase({ ...base, transport: 'connected', stateLoaded: true })).toBe('inactive')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('leaves connecting for inactive once the initial state resolves, even mid-handshake', () => {
|
||||||
|
// connecting → inactive: the SSE transport handshake is still pending
|
||||||
|
// (transport === "connecting") but the initial live-state query resolved as
|
||||||
|
// idle, so we must not spin on "connecting…" forever.
|
||||||
|
expect(deriveLivePhase({ ...base, transport: 'connecting', stateLoaded: true })).toBe('inactive')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('phase capability helpers', () => {
|
||||||
|
it('renders the snapshot surface only for live/disconnected/archive', () => {
|
||||||
|
expect(rendersSnapshot('live')).toBe(true)
|
||||||
|
expect(rendersSnapshot('disconnected')).toBe(true)
|
||||||
|
expect(rendersSnapshot('archive')).toBe(true)
|
||||||
|
expect(rendersSnapshot('settling')).toBe(false)
|
||||||
|
expect(rendersSnapshot('inactive')).toBe(false)
|
||||||
|
expect(rendersSnapshot('connecting')).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('allows live-only interpretations only while the session is moving', () => {
|
||||||
|
expect(allowsLiveInterpretations('live')).toBe(true)
|
||||||
|
expect(allowsLiveInterpretations('disconnected')).toBe(true)
|
||||||
|
// A frozen archive frame must never present live-only interpretations.
|
||||||
|
expect(allowsLiveInterpretations('archive')).toBe(false)
|
||||||
|
expect(allowsLiveInterpretations('settling')).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('marks archive as the read-only phase', () => {
|
||||||
|
expect(isReadOnlyPhase('archive')).toBe(true)
|
||||||
|
expect(isReadOnlyPhase('live')).toBe(false)
|
||||||
|
expect(isReadOnlyPhase('disconnected')).toBe(false)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('effectiveFeedHealth', () => {
|
||||||
|
it('downgrades a still-open SSE to reconnecting while phase is disconnected', () => {
|
||||||
|
expect(effectiveFeedHealth('connected', 'disconnected')).toBe('disconnected')
|
||||||
|
expect(effectiveFeedHealth('connecting', 'disconnected')).toBe('disconnected')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('preserves transport when the session phase is live or settling', () => {
|
||||||
|
expect(effectiveFeedHealth('connected', 'live')).toBe('connected')
|
||||||
|
expect(effectiveFeedHealth('connected', 'settling')).toBe('connected')
|
||||||
|
expect(effectiveFeedHealth('error', 'disconnected')).toBe('error')
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -93,6 +93,7 @@ const raceSnapshot = {
|
|||||||
SessionType: 'Race',
|
SessionType: 'Race',
|
||||||
SessionName: 'Race',
|
SessionName: 'Race',
|
||||||
},
|
},
|
||||||
|
SessionStatus: 'Started',
|
||||||
TrackStatus: '2',
|
TrackStatus: '2',
|
||||||
CurrentLap: 30,
|
CurrentLap: 30,
|
||||||
TotalLaps: 57,
|
TotalLaps: 57,
|
||||||
@@ -138,6 +139,7 @@ const sprintQualifyingSnapshot = {
|
|||||||
SessionType: 'Sprint Qualifying',
|
SessionType: 'Sprint Qualifying',
|
||||||
SessionName: 'Sprint Qualifying',
|
SessionName: 'Sprint Qualifying',
|
||||||
},
|
},
|
||||||
|
SessionStatus: 'Started',
|
||||||
TrackStatus: '1',
|
TrackStatus: '1',
|
||||||
CurrentLap: 0,
|
CurrentLap: 0,
|
||||||
TotalLaps: 0,
|
TotalLaps: 0,
|
||||||
@@ -164,6 +166,12 @@ test.describe('Live Timing (mocked snapshot)', () => {
|
|||||||
|
|
||||||
test('renders timing tower with drivers from the snapshot', async ({ page }) => {
|
test('renders timing tower with drivers from the snapshot', async ({ page }) => {
|
||||||
await expect(page.getByTestId('live-page')).toBeVisible()
|
await expect(page.getByTestId('live-page')).toBeVisible()
|
||||||
|
// The hermetic SSE mock ends after a heartbeat, so transport may drop to
|
||||||
|
// disconnected while the session snapshot remains active — both phases keep
|
||||||
|
// the LIVE SESSION chrome and timing tower.
|
||||||
|
await expect(page.getByTestId('live-page')).toHaveAttribute('data-phase', /^(live|disconnected)$/)
|
||||||
|
await expect(page.getByTestId('live-session-flag')).toContainText('LIVE SESSION')
|
||||||
|
await expect(page.getByTestId('live-feed-health')).toBeVisible()
|
||||||
const tower = page.locator('.live-tower')
|
const tower = page.locator('.live-tower')
|
||||||
await expect(tower).toBeVisible()
|
await expect(tower).toBeVisible()
|
||||||
await expect(tower).toContainText('VER')
|
await expect(tower).toContainText('VER')
|
||||||
@@ -233,45 +241,215 @@ test.describe('Live Timing (mocked Sprint Qualifying)', () => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const weekendContext = (localAnalysis: string) => ({
|
||||||
|
temporal_state: 'session_settling',
|
||||||
|
focus_meeting: {
|
||||||
|
meeting_key: 1,
|
||||||
|
meeting_name: 'Testonia Grand Prix',
|
||||||
|
meeting_official_name: 'Testonia Grand Prix',
|
||||||
|
location: 'Testring',
|
||||||
|
country_name: 'Testonia',
|
||||||
|
country_code: 'TS',
|
||||||
|
country_flag: '',
|
||||||
|
circuit_short_name: 'Testring',
|
||||||
|
date_start: '2026-07-03T09:00:00Z',
|
||||||
|
date_end: '2026-07-05T16:00:00Z',
|
||||||
|
year: 2026,
|
||||||
|
},
|
||||||
|
// Just-finished session lives in previous_completed_session (canonical contract).
|
||||||
|
previous_completed_session: {
|
||||||
|
session: {
|
||||||
|
session_key: 9472,
|
||||||
|
session_name: 'Race',
|
||||||
|
session_type: 'Race',
|
||||||
|
meeting_key: 1,
|
||||||
|
date_start: '2026-07-05T14:00:00Z',
|
||||||
|
date_end: '2026-07-05T16:00:00Z',
|
||||||
|
gmt_offset: '',
|
||||||
|
},
|
||||||
|
availability: {
|
||||||
|
schedule: 'available',
|
||||||
|
live_transport: 'unknown',
|
||||||
|
live_session: 'inactive',
|
||||||
|
archive: 'available',
|
||||||
|
local_analysis: localAnalysis,
|
||||||
|
freshness: 'fresh',
|
||||||
|
limitations: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
championship_round: 1,
|
||||||
|
total_championship_rounds: 1,
|
||||||
|
})
|
||||||
|
|
||||||
|
/** Archive-only just-finished Race + older already-ready Practice default. */
|
||||||
|
const archiveOnlySettlingContext = (previousAnalysis: string) => ({
|
||||||
|
...weekendContext(previousAnalysis),
|
||||||
|
default_analysis_session: {
|
||||||
|
session: {
|
||||||
|
session_key: 9001,
|
||||||
|
session_name: 'Practice 1',
|
||||||
|
session_type: 'Practice',
|
||||||
|
meeting_key: 1,
|
||||||
|
date_start: '2026-07-04T12:00:00Z',
|
||||||
|
date_end: '2026-07-04T13:00:00Z',
|
||||||
|
gmt_offset: '',
|
||||||
|
},
|
||||||
|
availability: {
|
||||||
|
schedule: 'available',
|
||||||
|
live_transport: 'unknown',
|
||||||
|
live_session: 'inactive',
|
||||||
|
archive: 'available',
|
||||||
|
local_analysis: 'complete',
|
||||||
|
freshness: 'fresh',
|
||||||
|
limitations: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const heartbeatStream = (route: import('@playwright/test').Route) =>
|
||||||
|
route.fulfill({ contentType: 'text/event-stream', body: 'event: heartbeat\ndata: {}\n\n' })
|
||||||
|
|
||||||
test.describe('Live Timing (no session)', () => {
|
test.describe('Live Timing (no session)', () => {
|
||||||
test('shows the empty state when the feed has no snapshot', async ({ page }) => {
|
test('shows the inactive weekend-context handoff when the feed has no snapshot', async ({ page }) => {
|
||||||
|
await page.route('**/api/v1/live/stream', heartbeatStream)
|
||||||
await page.goto('/live')
|
await page.goto('/live')
|
||||||
await expect(page.getByTestId('live-empty')).toBeVisible()
|
// The e2e server (BOXBOX_DISABLE_LIVE=1) exposes a real /api/v1/weekend-context.
|
||||||
await expect(page.getByTestId('live-page')).toContainText('No live session active')
|
await expect(page.getByTestId('live-inactive')).toBeVisible()
|
||||||
|
await expect(page.getByTestId('live-page')).toHaveAttribute('data-phase', 'inactive')
|
||||||
|
await expect(page.getByText('NO LIVE SESSION')).toBeVisible()
|
||||||
})
|
})
|
||||||
|
|
||||||
test('renders an archived snapshot only after View Last Session', async ({ page }) => {
|
test('enters settling (not archive) when a finished session is retained', async ({ page }) => {
|
||||||
await page.route('**/api/v1/live/state', (route) =>
|
await page.route('**/api/v1/live/state', (route) =>
|
||||||
route.fulfill({
|
route.fulfill({
|
||||||
contentType: 'application/json',
|
contentType: 'application/json',
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
is_live: false,
|
is_live: false,
|
||||||
data: null,
|
data: null,
|
||||||
last_snapshot: {
|
last_snapshot: { ...raceSnapshot.data, SessionStatus: 'Finished' },
|
||||||
...raceSnapshot.data,
|
last_positions: { '1': { x: 100, y: -50, z: 2, status: 'OnTrack' } },
|
||||||
SessionStatus: 'Finished',
|
|
||||||
},
|
|
||||||
last_positions: {
|
|
||||||
'1': { x: 100, y: -50, z: 2, status: 'OnTrack' },
|
|
||||||
},
|
|
||||||
last_snapshot_at: '2026-07-04T14:00:00Z',
|
last_snapshot_at: '2026-07-04T14:00:00Z',
|
||||||
}),
|
}),
|
||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
await page.route('**/api/v1/live/stream', (route) =>
|
await page.route('**/api/v1/weekend-context', (route) =>
|
||||||
route.fulfill({
|
route.fulfill({ contentType: 'application/json', body: JSON.stringify(weekendContext('complete')) }),
|
||||||
contentType: 'text/event-stream',
|
|
||||||
body: 'event: heartbeat\ndata: {}\n\n',
|
|
||||||
}),
|
|
||||||
)
|
)
|
||||||
|
await page.route('**/api/v1/live/stream', heartbeatStream)
|
||||||
|
|
||||||
await page.goto('/live')
|
await page.goto('/live')
|
||||||
await expect(page.getByTestId('live-empty')).toContainText('No live session active')
|
await expect(page.getByTestId('live-settling')).toBeVisible()
|
||||||
|
await expect(page.getByTestId('live-page')).toHaveAttribute('data-phase', 'settling')
|
||||||
|
await expect(page.getByText('SESSION SETTLING')).toBeVisible()
|
||||||
await expect(page.getByText('Timing Tower')).toHaveCount(0)
|
await expect(page.getByText('Timing Tower')).toHaveCount(0)
|
||||||
|
// Canonical weekend-context drives the analysis target + readiness.
|
||||||
|
const analysis = page.getByTestId('live-handoff-analysis')
|
||||||
|
await expect(analysis).toHaveAttribute('href', '/race-hub?session_key=9472')
|
||||||
|
await expect(analysis).toHaveAttribute('data-ready', 'true')
|
||||||
|
|
||||||
await page.getByRole('button', { name: 'View Last Session' }).click()
|
// Opening the read-only archive reveals the frozen tower, never LIVE chrome.
|
||||||
await expect(page.getByTestId('live-archive-strip')).toContainText('Archived snapshot')
|
await page.getByTestId('live-handoff-archive').click()
|
||||||
|
await expect(page.getByTestId('live-archive-strip')).toContainText('read-only')
|
||||||
await expect(page.getByText('Timing Tower')).toBeVisible()
|
await expect(page.getByText('Timing Tower')).toBeVisible()
|
||||||
await expect(page.locator('.live-state')).toContainText('archive')
|
await expect(page.locator('.live-state')).toContainText('archive')
|
||||||
|
await expect(page.getByText('LIVE SESSION')).toHaveCount(0)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('settling shows pending analysis until weekend-context reports complete', async ({ page }) => {
|
||||||
|
await page.route('**/api/v1/live/state', (route) =>
|
||||||
|
route.fulfill({
|
||||||
|
contentType: 'application/json',
|
||||||
|
body: JSON.stringify({
|
||||||
|
is_live: false,
|
||||||
|
data: null,
|
||||||
|
last_snapshot: { ...raceSnapshot.data, SessionStatus: 'Finished' },
|
||||||
|
last_snapshot_at: '2026-07-04T14:00:00Z',
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
await page.route('**/api/v1/weekend-context', (route) =>
|
||||||
|
route.fulfill({ contentType: 'application/json', body: JSON.stringify(weekendContext('pending')) }),
|
||||||
|
)
|
||||||
|
await page.route('**/api/v1/live/stream', heartbeatStream)
|
||||||
|
|
||||||
|
await page.goto('/live')
|
||||||
|
await expect(page.getByTestId('live-settling')).toBeVisible()
|
||||||
|
const analysis = page.getByTestId('live-handoff-analysis')
|
||||||
|
await expect(analysis).toHaveAttribute('data-ready', 'false')
|
||||||
|
await expect(analysis).toContainText(/analysis will fill in as data ingests/i)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('settling targets archive-only previous_completed_session over older default', async ({ page }) => {
|
||||||
|
await page.route('**/api/v1/live/state', (route) =>
|
||||||
|
route.fulfill({
|
||||||
|
contentType: 'application/json',
|
||||||
|
body: JSON.stringify({
|
||||||
|
is_live: false,
|
||||||
|
data: null,
|
||||||
|
last_snapshot: { ...raceSnapshot.data, SessionStatus: 'Finished' },
|
||||||
|
last_snapshot_at: '2026-07-04T14:00:00Z',
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
await page.route('**/api/v1/weekend-context', (route) =>
|
||||||
|
route.fulfill({
|
||||||
|
contentType: 'application/json',
|
||||||
|
body: JSON.stringify(archiveOnlySettlingContext('pending')),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
await page.route('**/api/v1/live/stream', heartbeatStream)
|
||||||
|
|
||||||
|
await page.goto('/live')
|
||||||
|
await expect(page.getByTestId('live-settling')).toBeVisible()
|
||||||
|
const analysis = page.getByTestId('live-handoff-analysis')
|
||||||
|
await expect(analysis).toHaveAttribute('href', '/race-hub?session_key=9472')
|
||||||
|
await expect(analysis).toHaveAttribute('data-ready', 'false')
|
||||||
|
await expect(analysis).toContainText('Open Race analysis')
|
||||||
|
await expect(analysis).not.toContainText('Practice 1')
|
||||||
|
})
|
||||||
|
|
||||||
|
test('retains the last live snapshot with a disconnected warning on a feed drop', async ({ page }) => {
|
||||||
|
// is_live=false but SessionStatus is still "Started": the FIA feed dropped
|
||||||
|
// mid-session. The page must warn + retain the live tower, never settle.
|
||||||
|
// Keep the browser SSE open via a long-lived stream so transport stays connected
|
||||||
|
// while phase is disconnected — health must still say Reconnecting.
|
||||||
|
await page.route('**/api/v1/live/state', (route) =>
|
||||||
|
route.fulfill({
|
||||||
|
contentType: 'application/json',
|
||||||
|
body: JSON.stringify({
|
||||||
|
is_live: false,
|
||||||
|
data: null,
|
||||||
|
last_snapshot: { ...raceSnapshot.data, SessionStatus: 'Started' },
|
||||||
|
last_snapshot_at: '2026-07-04T13:30:00Z',
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
await page.route('**/api/v1/weekend-context', (route) =>
|
||||||
|
route.fulfill({ contentType: 'application/json', body: JSON.stringify(weekendContext('pending')) }),
|
||||||
|
)
|
||||||
|
await page.route('**/api/v1/live/stream', async (route) => {
|
||||||
|
const body = [
|
||||||
|
'event: heartbeat',
|
||||||
|
'data: {}',
|
||||||
|
'',
|
||||||
|
'event: heartbeat',
|
||||||
|
'data: {}',
|
||||||
|
'',
|
||||||
|
].join('\n')
|
||||||
|
await route.fulfill({
|
||||||
|
contentType: 'text/event-stream',
|
||||||
|
headers: { 'Cache-Control': 'no-cache' },
|
||||||
|
body,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
await page.goto('/live')
|
||||||
|
await expect(page.getByTestId('live-page')).toHaveAttribute('data-phase', 'disconnected')
|
||||||
|
await expect(page.getByTestId('live-disconnected-strip')).toContainText('last live data')
|
||||||
|
await expect(page.getByText('Timing Tower')).toBeVisible()
|
||||||
|
await expect(page.getByTestId('live-settling')).toHaveCount(0)
|
||||||
|
await expect(page.getByTestId('live-archive-strip')).toHaveCount(0)
|
||||||
|
await expect(page.getByTestId('live-feed-health')).toContainText(/reconnecting/i)
|
||||||
|
await expect(page.getByTestId('live-feed-health')).not.toContainText(/feed healthy/i)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -37,11 +37,11 @@ test.describe('Production serving (Go + built React)', () => {
|
|||||||
await expect(page.getByTestId('dl-meeting-1229')).toBeVisible()
|
await expect(page.getByTestId('dl-meeting-1229')).toBeVisible()
|
||||||
})
|
})
|
||||||
|
|
||||||
test('serves live route with empty state when live is disabled', async ({ page }) => {
|
test('serves live route with the inactive handoff when live is disabled', async ({ page }) => {
|
||||||
await page.goto('/live')
|
await page.goto('/live')
|
||||||
|
|
||||||
await expect(page.getByTestId('live-empty')).toBeVisible()
|
await expect(page.getByTestId('live-inactive')).toBeVisible()
|
||||||
await expect(page.getByText('No live session active')).toBeVisible()
|
await expect(page.getByText('NO LIVE SESSION')).toBeVisible()
|
||||||
})
|
})
|
||||||
|
|
||||||
test('primary nav links and Admin utility work from built SPA', async ({ page }) => {
|
test('primary nav links and Admin utility work from built SPA', async ({ page }) => {
|
||||||
|
|||||||
BIN
tests/visual/__snapshots__/desktop/live-active.png
Normal file
|
After Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 56 KiB |
BIN
tests/visual/__snapshots__/mobile/live-active.png
Normal file
|
After Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 34 KiB |
BIN
tests/visual/__snapshots__/tablet/live-active.png
Normal file
|
After Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 45 KiB |
@@ -62,10 +62,162 @@ export async function gotoDataLibraryReady(page: Page): Promise<void> {
|
|||||||
await waitForScreenshotReady(page)
|
await waitForScreenshotReady(page)
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function gotoLiveEmptyReady(page: Page): Promise<void> {
|
export async function gotoLiveInactiveReady(page: Page): Promise<void> {
|
||||||
await page.goto('/live')
|
await page.goto('/live')
|
||||||
await expect(page.locator('.loading-state')).toHaveCount(0)
|
await expect(page.locator('.loading-state')).toHaveCount(0)
|
||||||
await expect(page.getByTestId('live-empty')).toBeVisible()
|
// With BOXBOX_DISABLE_LIVE=1 the feed is silent, so the page settles into the
|
||||||
|
// inactive weekend-context handoff sourced from /api/v1/weekend-context.
|
||||||
|
await expect(page.getByTestId('live-inactive')).toBeVisible()
|
||||||
|
// Integrated #73 shell — stale Command/Live/Race Hub baselines must not pass.
|
||||||
|
await expect(page.getByRole('navigation')).toContainText('Weekend')
|
||||||
|
await expect(page.getByRole('navigation')).not.toContainText('Command')
|
||||||
|
await waitForScreenshotReady(page)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Deterministic active Live hierarchy (mocked snapshot + sticky SSE). */
|
||||||
|
export async function gotoLiveActiveReady(page: Page): Promise<void> {
|
||||||
|
await page.addInitScript(() => {
|
||||||
|
window.localStorage.clear()
|
||||||
|
class StickyEventSource {
|
||||||
|
onopen: ((ev: Event) => void) | null = null
|
||||||
|
onerror: ((ev: Event) => void) | null = null
|
||||||
|
constructor(_url: string | URL) {
|
||||||
|
queueMicrotask(() => this.onopen?.(new Event('open')))
|
||||||
|
}
|
||||||
|
addEventListener(_type: string, _listener: EventListenerOrEventListenerObject) {}
|
||||||
|
close() {}
|
||||||
|
}
|
||||||
|
Object.defineProperty(window, 'EventSource', {
|
||||||
|
configurable: true,
|
||||||
|
writable: true,
|
||||||
|
value: StickyEventSource,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const driver = (
|
||||||
|
num: string,
|
||||||
|
pos: number,
|
||||||
|
interval: string,
|
||||||
|
gap: string,
|
||||||
|
overrides: Record<string, unknown> = {},
|
||||||
|
) => ({
|
||||||
|
RacingNumber: num,
|
||||||
|
Position: pos,
|
||||||
|
PrevPosition: pos,
|
||||||
|
GapToLeader: gap,
|
||||||
|
Interval: interval,
|
||||||
|
LastLapTime: '1:21.345',
|
||||||
|
LastLapPB: false,
|
||||||
|
LastLapOB: false,
|
||||||
|
BestLapTime: '1:20.987',
|
||||||
|
BestLapPB: true,
|
||||||
|
BestLapOB: false,
|
||||||
|
BestLapNum: 22,
|
||||||
|
InPit: false,
|
||||||
|
PitOut: false,
|
||||||
|
Retired: false,
|
||||||
|
KnockedOut: false,
|
||||||
|
Cutoff: false,
|
||||||
|
OnFlyingLap: false,
|
||||||
|
NumberOfLaps: 30,
|
||||||
|
SpeedTrap: '312',
|
||||||
|
Sectors: [],
|
||||||
|
...overrides,
|
||||||
|
})
|
||||||
|
const info = (num: string, tla: string, first: string, last: string, team: string, colour: string) => ({
|
||||||
|
RacingNumber: num,
|
||||||
|
BroadcastName: `${first[0]} ${last.toUpperCase()}`,
|
||||||
|
Tla: tla,
|
||||||
|
TeamName: team,
|
||||||
|
TeamColour: colour,
|
||||||
|
FirstName: first,
|
||||||
|
LastName: last,
|
||||||
|
})
|
||||||
|
|
||||||
|
const liveState = {
|
||||||
|
is_live: true,
|
||||||
|
data: {
|
||||||
|
Drivers: {
|
||||||
|
'1': driver('1', 1, '', ''),
|
||||||
|
'4': driver('4', 2, '+0.523', '+0.523'),
|
||||||
|
'44': driver('44', 3, '+3.214', '+3.737'),
|
||||||
|
'63': driver('63', 4, '+12.001', '+15.738', { InPit: true }),
|
||||||
|
},
|
||||||
|
DriverInfo: {
|
||||||
|
'1': info('1', 'VER', 'Max', 'Verstappen', 'Red Bull Racing', '3671C6'),
|
||||||
|
'4': info('4', 'NOR', 'Lando', 'Norris', 'McLaren', 'FF8000'),
|
||||||
|
'44': info('44', 'HAM', 'Lewis', 'Hamilton', 'Ferrari', 'E80020'),
|
||||||
|
'63': info('63', 'RUS', 'George', 'Russell', 'Mercedes', '27F4D2'),
|
||||||
|
},
|
||||||
|
Tyres: {
|
||||||
|
'1': { Compound: 'HARD', New: false, Age: 12 },
|
||||||
|
'4': { Compound: 'MEDIUM', New: false, Age: 8 },
|
||||||
|
'44': { Compound: 'MEDIUM', New: true, Age: 3 },
|
||||||
|
'63': { Compound: 'HARD', New: true, Age: 0 },
|
||||||
|
},
|
||||||
|
Stints: {
|
||||||
|
'1': [
|
||||||
|
{ Compound: 'MEDIUM', New: true, Laps: 18 },
|
||||||
|
{ Compound: 'HARD', New: false, Laps: 12 },
|
||||||
|
],
|
||||||
|
'4': [
|
||||||
|
{ Compound: 'SOFT', New: true, Laps: 14 },
|
||||||
|
{ Compound: 'MEDIUM', New: true, Laps: 16 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
RCMessages: [
|
||||||
|
{
|
||||||
|
Time: '2026-07-03T14:05:00Z',
|
||||||
|
Category: 'Flag',
|
||||||
|
Flag: 'YELLOW',
|
||||||
|
Message: 'YELLOW IN SECTOR 2',
|
||||||
|
Lap: 29,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
Weather: {
|
||||||
|
AirTemp: 22.5,
|
||||||
|
TrackTemp: 41.3,
|
||||||
|
Humidity: 58,
|
||||||
|
WindSpeed: 3.4,
|
||||||
|
WindDir: 180,
|
||||||
|
Rainfall: false,
|
||||||
|
},
|
||||||
|
Session: {
|
||||||
|
MeetingName: 'Testonia Grand Prix',
|
||||||
|
CircuitName: 'Testring',
|
||||||
|
SessionType: 'Race',
|
||||||
|
SessionName: 'Race',
|
||||||
|
Path: '',
|
||||||
|
},
|
||||||
|
TeamRadio: [],
|
||||||
|
SessionStatus: 'Started',
|
||||||
|
TrackStatus: '2',
|
||||||
|
CurrentLap: 30,
|
||||||
|
TotalLaps: 57,
|
||||||
|
// Fixed empty clock → "--:--:--" (no live extrapolation drift).
|
||||||
|
Clock: '',
|
||||||
|
ClockRefTime: '',
|
||||||
|
ClockExtrapolating: false,
|
||||||
|
Telemetry: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
await page.route('**/api/v1/live/state', (route) =>
|
||||||
|
route.fulfill({ contentType: 'application/json', body: JSON.stringify(liveState) }),
|
||||||
|
)
|
||||||
|
await page.route('**/api/v1/live/stream', (route) =>
|
||||||
|
route.fulfill({
|
||||||
|
contentType: 'text/event-stream',
|
||||||
|
body: 'event: heartbeat\ndata: {}\n\n',
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
|
||||||
|
await page.goto('/live')
|
||||||
|
await expect(page.getByTestId('live-page')).toHaveAttribute('data-phase', 'live')
|
||||||
|
await expect(page.getByTestId('live-session-flag')).toContainText('LIVE SESSION')
|
||||||
|
await expect(page.getByText('Timing Tower')).toBeVisible()
|
||||||
|
await expect(page.getByRole('navigation')).toContainText('Weekend')
|
||||||
|
await expect(page.getByRole('navigation')).not.toContainText('Command')
|
||||||
await waitForScreenshotReady(page)
|
await waitForScreenshotReady(page)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
9
tests/visual/live-active.spec.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import { test } from '@playwright/test'
|
||||||
|
import { gotoLiveActiveReady, screenshotPage } from './helpers'
|
||||||
|
|
||||||
|
test.describe('Live active visual regression', () => {
|
||||||
|
test('live-active', async ({ page }) => {
|
||||||
|
await gotoLiveActiveReady(page)
|
||||||
|
await screenshotPage(page, 'live-active')
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -2,7 +2,7 @@ import { test } from '@playwright/test'
|
|||||||
import {
|
import {
|
||||||
gotoWeekendReady,
|
gotoWeekendReady,
|
||||||
gotoDataLibraryReady,
|
gotoDataLibraryReady,
|
||||||
gotoLiveEmptyReady,
|
gotoLiveInactiveReady,
|
||||||
gotoRaceHubFutureReady,
|
gotoRaceHubFutureReady,
|
||||||
gotoRaceHubReady,
|
gotoRaceHubReady,
|
||||||
screenshotPage,
|
screenshotPage,
|
||||||
@@ -32,8 +32,8 @@ test.describe('MVP visual regression', () => {
|
|||||||
await screenshotPage(page, 'data-library')
|
await screenshotPage(page, 'data-library')
|
||||||
})
|
})
|
||||||
|
|
||||||
test('live-empty', async ({ page }) => {
|
test('live-inactive', async ({ page }) => {
|
||||||
await gotoLiveEmptyReady(page)
|
await gotoLiveInactiveReady(page)
|
||||||
await screenshotPage(page, 'live')
|
await screenshotPage(page, 'live')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ test.describe('Weekend home (seeded canonical context)', () => {
|
|||||||
await expect(page.getByTestId('data-library')).toBeVisible()
|
await expect(page.getByTestId('data-library')).toBeVisible()
|
||||||
|
|
||||||
await page.goto('/live')
|
await page.goto('/live')
|
||||||
await expect(page.getByTestId('live-empty')).toBeVisible()
|
await expect(page.getByTestId('live-inactive')).toBeVisible()
|
||||||
|
|
||||||
await page.goto('/explore')
|
await page.goto('/explore')
|
||||||
await expect(page.getByTestId('explore-page')).toBeVisible()
|
await expect(page.getByTestId('explore-page')).toBeVisible()
|
||||||
|
|||||||