Rework Race Hub as weekend workspace

frontend/src/test/DatasetStatusView.test.tsx

@@ -1,55 +1,90 @@
 import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
+import { RouterProvider, createRouter, createRootRoute, createRoute } from '@tanstack/react-router'
 import { DatasetStatusView } from '../components/DatasetStatusView'
 import type { DatasetInfo } from '../types'
 
-const allAvailable: Record<string, DatasetInfo> = {
+const fullDatasets: Record<string, DatasetInfo> = {
   meeting: { status: 'available', source: 'local', count: 1 },
   session: { status: 'available', source: 'local', count: 1 },
   drivers: { status: 'available', source: 'local', count: 20 },
   results: { status: 'available', source: 'local', count: 20 },
   starting_grid: { status: 'available', source: 'local', count: 20 },
+  stints: { status: 'available', source: 'local', count: 30 },
+  pit_stops: { status: 'available', source: 'local', count: 18 },
+  positions: { status: 'available', source: 'local', count: 120 },
+  race_control: { status: 'available', source: 'local', count: 5 },
+  weather: { status: 'available', source: 'local', count: 4 },
+  laps: { status: 'available', source: 'local', count: 200 },
 }
 
-const partial: Record<string, DatasetInfo> = {
+const coreOnly: Record<string, DatasetInfo> = {
   meeting: { status: 'available', source: 'local', count: 1 },
   session: { status: 'available', source: 'local', count: 1 },
-  drivers: { status: 'missing', source: 'none' },
-  results: { status: 'missing', source: 'none' },
-  starting_grid: { status: 'missing', source: 'none' },
+  drivers: { status: 'available', source: 'local', count: 20 },
+  results: { status: 'available', source: 'local', count: 20 },
+  starting_grid: { status: 'available', source: 'local', count: 20 },
+  stints: { status: 'missing', source: 'none' },
+  pit_stops: { status: 'missing', source: 'none' },
+  positions: { status: 'missing', source: 'none' },
+  race_control: { status: 'missing', source: 'none' },
+  weather: { status: 'missing', source: 'none' },
+  laps: { status: 'missing', source: 'none' },
+}
+
+function renderView(datasets: Record<string, DatasetInfo>) {
+  const rootRoute = createRootRoute({
+    component: () => <DatasetStatusView datasets={datasets} />,
+  })
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => null,
+  })
+  const router = createRouter({ routeTree: rootRoute.addChildren([indexRoute]) })
+  return render(<RouterProvider router={router} />)
 }
 
 describe('DatasetStatusView', () => {
-  it('shows 5/5 when all available', () => {
-    render(<DatasetStatusView datasets={allAvailable} />)
-    expect(screen.getByText(/5\/5/)).toBeInTheDocument()
+  it('shows 11/11 when all datasets are available', async () => {
+    renderView(fullDatasets)
+    await waitFor(() =>
+      expect(screen.getByText(/11\/11 datasets local/)).toBeInTheDocument(),
+    )
   })
 
-  it('shows local badges for available datasets', () => {
-    render(<DatasetStatusView datasets={allAvailable} />)
-    const localBadges = screen.getAllByText('Local')
-    expect(localBadges).toHaveLength(5)
+  it('shows a Local badge for every available dataset', async () => {
+    renderView(fullDatasets)
+    await waitFor(() => expect(screen.getAllByText('Local')).toHaveLength(11))
   })
 
-  it('shows missing badges for missing datasets', () => {
-    render(<DatasetStatusView datasets={partial} />)
-    const missingBadges = screen.getAllByText('Missing')
-    expect(missingBadges).toHaveLength(3)
+  it('shows Missing badges for missing datasets', async () => {
+    renderView(coreOnly)
+    await waitFor(() => expect(screen.getAllByText('Missing')).toHaveLength(6))
   })
 
-  it('shows the ingest command when data is missing', () => {
-    render(<DatasetStatusView datasets={partial} />)
-    expect(screen.getByText(/ingest-session/i)).toBeInTheDocument()
-  })
-
-  it('does not show ingest command when all available', () => {
-    render(<DatasetStatusView datasets={allAvailable} />)
+  it('links to admin when datasets are missing instead of inlining CLI commands', async () => {
+    renderView(coreOnly)
+    await waitFor(() => {
+      expect(screen.getByRole('link', { name: /manage ingestion/i })).toHaveAttribute(
+        'href',
+        '/admin',
+      )
+    })
     expect(screen.queryByText(/ingest-session/i)).not.toBeInTheDocument()
   })
 
-  it('shows record counts', () => {
-    render(<DatasetStatusView datasets={allAvailable} />)
-    const twenties = screen.getAllByText('20')
-    expect(twenties.length).toBeGreaterThan(0)
+  it('does not surface ingest hints when fully covered', async () => {
+    renderView(fullDatasets)
+    await waitFor(() => expect(screen.getByText(/11\/11/)).toBeInTheDocument())
+    expect(screen.queryByText(/manage ingestion/i)).not.toBeInTheDocument()
+  })
+
+  it('renders record counts from the dataset payload', async () => {
+    renderView(fullDatasets)
+    await waitFor(() => {
+      const twenties = screen.getAllByText('20')
+      expect(twenties.length).toBeGreaterThan(0)
+    })
   })
 })

frontend/src/test/RaceHubPage.test.tsx

@@ -0,0 +1,260 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor, fireEvent } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  Outlet,
+  RouterProvider,
+  createRouter,
+  createRootRoute,
+  createRoute,
+} from '@tanstack/react-router'
+import { RaceHubPage } from '../pages/RaceHubPage'
+import type { DatasetInfo, Meeting, RaceHub, Session, Weekend } from '../types'
+
+vi.mock('../api', () => ({
+  fetchRaceHub: vi.fn(),
+  fetchSeasons: vi.fn(),
+  fetchLocalMeetings: vi.fn(),
+  fetchWeekend: vi.fn(),
+}))
+
+import { fetchRaceHub, fetchSeasons, fetchLocalMeetings, fetchWeekend } from '../api'
+
+const mockFetchRaceHub = vi.mocked(fetchRaceHub)
+const mockFetchSeasons = vi.mocked(fetchSeasons)
+const mockFetchLocalMeetings = vi.mocked(fetchLocalMeetings)
+const mockFetchWeekend = vi.mocked(fetchWeekend)
+
+const meeting: Meeting = {
+  meeting_key: 1229,
+  meeting_name: 'Monaco Grand Prix',
+  meeting_official_name: 'FORMULA 1 GRAND PRIX DE MONACO 2025',
+  location: 'Monaco',
+  country_name: 'Monaco',
+  country_code: 'MON',
+  country_flag: '',
+  circuit_short_name: 'Monaco',
+  date_start: '2025-05-23T00:00:00+00:00',
+  date_end: '2025-05-25T00:00:00+00:00',
+  year: 2025,
+}
+
+const raceSession: Session = {
+  session_key: 9472,
+  session_name: 'Race',
+  session_type: 'Race',
+  meeting_key: 1229,
+  date_start: '2025-05-25T13:00:00+00:00',
+  date_end: '2025-05-25T15:00:00+00:00',
+  gmt_offset: '02:00:00',
+}
+
+const qualSession: Session = {
+  session_key: 9471,
+  session_name: 'Qualifying',
+  session_type: 'Qualifying',
+  meeting_key: 1229,
+  date_start: '2025-05-24T14:00:00+00:00',
+  date_end: '2025-05-24T15:00:00+00:00',
+  gmt_offset: '02:00:00',
+}
+
+const fullDatasets: Record<string, DatasetInfo> = {
+  meeting: { status: 'available', source: 'local', count: 1 },
+  session: { status: 'available', source: 'local', count: 1 },
+  drivers: { status: 'available', source: 'local', count: 20 },
+  results: { status: 'available', source: 'local', count: 20 },
+  starting_grid: { status: 'available', source: 'local', count: 20 },
+  stints: { status: 'available', source: 'local', count: 30 },
+  pit_stops: { status: 'available', source: 'local', count: 18 },
+  positions: { status: 'available', source: 'local', count: 120 },
+  race_control: { status: 'available', source: 'local', count: 5 },
+  weather: { status: 'available', source: 'local', count: 4 },
+  laps: { status: 'available', source: 'local', count: 200 },
+}
+
+const raceHub: RaceHub = {
+  source: 'local',
+  session_key: 9472,
+  datasets: fullDatasets,
+  meeting,
+  session: raceSession,
+  drivers: [
+    {
+      driver_number: 1,
+      name_acronym: 'VER',
+      full_name: 'Max Verstappen',
+      first_name: 'Max',
+      last_name: 'Verstappen',
+      team_name: 'Red Bull Racing',
+      team_colour: '3671C6',
+      headshot_url: '',
+      broadcast_name: 'M VERSTAPPEN',
+      session_key: 9472,
+      meeting_key: 1229,
+    },
+  ],
+  results: [
+    {
+      driver_number: 1,
+      position: 1,
+      name_acronym: 'VER',
+      full_name: 'Max Verstappen',
+      team_name: 'Red Bull Racing',
+      team_colour: '3671C6',
+      dnf: false,
+      dns: false,
+      dsq: false,
+      duration: 5500,
+      gap_to_leader: null,
+      number_of_laps: 78,
+      points: 25,
+      session_key: 9472,
+      meeting_key: 1229,
+    },
+  ],
+  starting_grid: [
+    {
+      driver_number: 1,
+      position: 1,
+      name_acronym: 'VER',
+      full_name: 'Max Verstappen',
+      team_name: 'Red Bull Racing',
+      team_colour: '3671C6',
+      session_key: 9472,
+      meeting_key: 1229,
+      lap_duration: 70.5,
+    },
+  ],
+  stints: [],
+  pit_stops: [],
+  positions: [],
+  race_control: [],
+  weather: [
+    {
+      session_key: 9472,
+      meeting_key: 1229,
+      date: '2025-05-25T13:30:00+00:00',
+      air_temperature: 22,
+      track_temperature: 40,
+      humidity: 50,
+      pressure: 1010,
+      rainfall: 0,
+      wind_direction: 180,
+      wind_speed: 1.2,
+    },
+  ],
+  laps: [
+    {
+      session_key: 9472,
+      driver_number: 1,
+      meeting_key: 1229,
+      lap_number: 42,
+      date_start: '2025-05-25T14:00:00+00:00',
+      lap_duration: 71.5,
+      is_pit_out_lap: false,
+    },
+  ],
+}
+
+const weekend: Weekend = {
+  source: 'local',
+  meeting_key: 1229,
+  meeting,
+  default_session_key: 9472,
+  sessions: [
+    { session: qualSession, source: 'local', datasets: fullDatasets },
+    { session: raceSession, source: 'local', datasets: fullDatasets },
+  ],
+}
+
+function renderRaceHub(sessionKey: number) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  })
+
+  const rootRoute = createRootRoute({
+    component: () => (
+      <QueryClientProvider client={queryClient}>
+        <Outlet />
+      </QueryClientProvider>
+    ),
+  })
+  const raceHubRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/race-hub',
+    validateSearch: (search: Record<string, unknown>) => {
+      const sk = Number(search.session_key)
+      return Number.isFinite(sk) && sk > 0 ? { session_key: sk } : {}
+    },
+    component: function RaceHubRouteComponent() {
+      const { session_key } = raceHubRoute.useSearch()
+      return <RaceHubPage sessionKey={session_key ?? 0} />
+    },
+  })
+  const router = createRouter({
+    routeTree: rootRoute.addChildren([raceHubRoute]),
+    history: undefined,
+  })
+
+  // Navigate to the URL before mounting
+  router.navigate({ to: '/race-hub', search: sessionKey ? { session_key: sessionKey } : {} })
+  return render(<RouterProvider router={router} />)
+}
+
+describe('RaceHubPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockFetchSeasons.mockResolvedValue([2025])
+    mockFetchLocalMeetings.mockResolvedValue([meeting])
+    mockFetchWeekend.mockResolvedValue(weekend)
+    mockFetchRaceHub.mockResolvedValue(raceHub)
+  })
+
+  it('renders the workspace identity band, session rail, and overview for a known session', async () => {
+    renderRaceHub(9472)
+
+    await waitFor(() => expect(screen.getByTestId('race-hub')).toBeInTheDocument())
+    expect(screen.getByTestId('rh-identity')).toHaveTextContent('Monaco Grand Prix')
+    expect(screen.getByTestId('rh-identity')).toHaveTextContent('MON')
+
+    await waitFor(() =>
+      expect(screen.getByTestId('rh-session-9472')).toBeInTheDocument(),
+    )
+    expect(screen.getByTestId('rh-session-9471')).toBeInTheDocument()
+
+    // Overview is default
+    expect(screen.getByTestId('rh-overview')).toBeInTheDocument()
+    expect(screen.getByText('Winner')).toBeInTheDocument()
+  })
+
+  it('exposes Race Story sub-controls for classification, grid, and positions', async () => {
+    renderRaceHub(9472)
+    await waitFor(() => expect(screen.getByTestId('race-hub')).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Race Story' }))
+
+    expect(screen.getByRole('tab', { name: 'Classification' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Starting Grid' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Positions' })).toBeInTheDocument()
+    expect(screen.getByText('Final Classification')).toBeInTheDocument()
+  })
+
+  it('keeps Data Status accessible and free of inline CLI guidance', async () => {
+    renderRaceHub(9472)
+    await waitFor(() => expect(screen.getByTestId('race-hub')).toBeInTheDocument())
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Data Status' }))
+
+    expect(screen.getByTestId('rh-data-status')).toBeInTheDocument()
+    expect(screen.queryByText(/ingest-session/i)).not.toBeInTheDocument()
+  })
+
+  it('toggles the inline weekend switcher', async () => {
+    renderRaceHub(9472)
+    await waitFor(() => expect(screen.getByTestId('race-hub')).toBeInTheDocument())
+
+    fireEvent.click(screen.getByTestId('rh-switch-weekend'))
+    expect(await screen.findByTestId('rh-switcher')).toBeInTheDocument()
+  })
+})

frontend/src/test/TabBar.test.tsx

@@ -3,35 +3,34 @@ import { render, screen, fireEvent } from '@testing-library/react'
 import { TabBar } from '../components/TabBar'
 
 describe('TabBar', () => {
-  it('renders all Race Hub tabs', () => {
-    render(<TabBar active="results" onChange={() => {}} />)
-    expect(screen.getByRole('tab', { name: 'Results' })).toBeInTheDocument()
-    expect(screen.getByRole('tab', { name: 'Grid' })).toBeInTheDocument()
+  it('renders all Race Hub workspace tabs', () => {
+    render(<TabBar active="overview" onChange={() => {}} />)
+    expect(screen.getByRole('tab', { name: 'Overview' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Race Story' })).toBeInTheDocument()
     expect(screen.getByRole('tab', { name: 'Strategy' })).toBeInTheDocument()
-    expect(screen.getByRole('tab', { name: 'Positions' })).toBeInTheDocument()
-    expect(screen.getByRole('tab', { name: 'Laps' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Lap Data' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Conditions' })).toBeInTheDocument()
     expect(screen.getByRole('tab', { name: 'Race Control' })).toBeInTheDocument()
-    expect(screen.getByRole('tab', { name: 'Weather' })).toBeInTheDocument()
-    expect(screen.getByRole('tab', { name: 'Datasets' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Data Status' })).toBeInTheDocument()
   })
 
   it('marks the active tab with aria-selected', () => {
-    render(<TabBar active="grid" onChange={() => {}} />)
-    expect(screen.getByRole('tab', { name: 'Grid' })).toHaveAttribute('aria-selected', 'true')
-    expect(screen.getByRole('tab', { name: 'Results' })).toHaveAttribute('aria-selected', 'false')
+    render(<TabBar active="strategy" onChange={() => {}} />)
+    expect(screen.getByRole('tab', { name: 'Strategy' })).toHaveAttribute('aria-selected', 'true')
+    expect(screen.getByRole('tab', { name: 'Overview' })).toHaveAttribute('aria-selected', 'false')
   })
 
   it('applies active class only to the active tab', () => {
-    render(<TabBar active="strategy" onChange={() => {}} />)
-    const strategy = screen.getByRole('tab', { name: 'Strategy' })
-    const results = screen.getByRole('tab', { name: 'Results' })
-    expect(strategy.className).toContain('active')
-    expect(results.className).not.toContain('active')
+    render(<TabBar active="conditions" onChange={() => {}} />)
+    const active = screen.getByRole('tab', { name: 'Conditions' })
+    const inactive = screen.getByRole('tab', { name: 'Overview' })
+    expect(active.className).toContain('active')
+    expect(inactive.className).not.toContain('active')
   })
 
   it('calls onChange with the correct tab id when clicked', () => {
     const onChange = vi.fn()
-    render(<TabBar active="results" onChange={onChange} />)
+    render(<TabBar active="overview" onChange={onChange} />)
     fireEvent.click(screen.getByRole('tab', { name: 'Race Control' }))
     expect(onChange).toHaveBeenCalledWith('race_control')
   })

frontend/src/test/setup.ts

@@ -1 +1,6 @@
 import '@testing-library/jest-dom'
+
+Object.defineProperty(window, 'scrollTo', {
+  value: () => {},
+  writable: true,
+})