The bar was a plain flex row while sections use a 200px-label + per-school
grid, so chips drifted off the columns they label. The bar now shares the
sections' grid template (via --school-count) at the same 761px breakpoint;
verified pixel-exact against live section columns (236/615/994). Mobile
pills unchanged.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
The grid sections (At a glance, Ofsted, Getting a place, Who goes there)
collapsed generically on mobile — grey label pills, full names wrapping
to 3 lines, no dots — making the page ~2x the mockup's height and
'significantly different' from the mobile design.
Each measure is now wrapped in a <Measure> that is display:contents on
desktop (so the label + cells still flow into the shared aligned grid,
unchanged) and a white card on mobile with compact [dot][short name]
[value] rows — matching the mobile mockup. The sticky school bar becomes
scrollable short-name pills on mobile too. Adds a shortName() util.
Desktop layout is unchanged (display:contents dissolves the wrapper).
Validated the card mechanism and real content shapes (report-card cell,
badges, %+chip rows) via static previews at both widths.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
Refresh bug: on mount the basket is empty for a beat before it hydrates
from the URL. The fetch effect nulled comparisonData on that transient
empty urnKey, then the one-shot 'SSR covers it' skip suppressed the
refetch — leaving the page blank on reload. The effect is now gated on
isInitialized, never blanks on empty (the render already shows the empty
state when nothing is selected), and decides fetch-vs-skip by whether it
already holds each requested school's data (SSR or a prior fetch).
Perf: useComparison ran a useSWR('/api/compare') whose result nothing
consumed — dead weight that fired on every page (Navigation + Toast are
global) whenever the basket was non-empty, and duplicated ComparisonView's
own fetch on the compare page. Removed; the hook now exposes basket state
only.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
- Metric changes no longer refire /api/compare (the data is already
client-side; the picker is presentational) — the fetch effect depends
only on the URN set, with URL sync split into its own effect.
- The initial client fetch is skipped when the SSR payload already covers
the selected schools; national averages + benchmarks now arrive via SSR
props so nothing is lost by skipping.
- page.tsx fetches comparison and metrics in parallel.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
The compare view refetches /api/compare on the client after SSR; on any
failure the catch nulled comparisonData, destroying the working
SSR-provided chart. A transient error (or staging's broken external /api
proxy) should not blank a comparison the user is already viewing — keep
the existing data instead.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The compare chart squashed clustered schools into a thin band (y pinned
0-100) under an in-chart title + per-school legend that ate ~40% of a
300px card, leaving converging lines indistinguishable on phones.
- Auto-fit the y-axis to the data on all viewports (computeYBounds in
lib/utils: padded + min-span for percentages, symmetric around 0 for
progress, fitted for scores; negative pct-named trend metrics are not
zero-clamped).
- Distinct point style per school (circle/triangle/rect/rectRot/star)
as secondary encoding for convergence and colour-blindness.
- Mobile: drop in-chart title/legend/axis titles; add a chip row (colour
dot + name) that doubles as tap-to-focus — highlights one school's
line and dims the rest. Chart card 300px -> 340px, nearly all plot.
- Fix a latent colour mismatch: datasets were built from Object.entries
whose integer-like URN keys enumerate in ascending numeric order,
desyncing line colours from card colours; the chart now receives the
ordered school list.
- Union years across schools instead of taking the first school's.
- Extract PerformanceChart's matchMedia pattern into hooks/useIsMobile.
Unit tests for metricKind/computeYBounds; e2e journey covers the mobile
chips and focus toggle.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The seed effect only adopted the URL's schools when localStorage was
empty, so a recipient who had ever used compare silently saw their own
old shortlist instead of the shared one. Explicit URL urns now replace
the stored selection on load (then persist as usual); bare /compare
still restores the visitor's own selection. Adds replaceSchools() to
the comparison context. Card values also switch to CHART_TEXT_COLORS.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Frontend
- Dynamic-import Chart.js components on detail/compare views so Chart.js
no longer ships in initial JS.
- Drop force-dynamic on home, compare, rankings so internal data fetches
reuse Next.js's per-call revalidate cache.
- Switch /school/[slug] to ISR with a 7-day revalidate window (school
data updates annually).
- Preconnect to analytics + postcodes.io; remove redundant defer on the
Umami Script tag (afterInteractive already covers it).
- Bump images.minimumCacheTTL to 1 year.
- Extract HowItWorks and Editorial sections as server components passed
to HomeView via slot props so their JSX stays out of the client bundle.
Backend
- Add GZipMiddleware (min 512 bytes).
- Add CacheAndETagMiddleware: per-path Cache-Control with long s-maxage
+ stale-while-revalidate, ETag generation, and 304 on If-None-Match.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Add lib/analytics.ts with a single typed track() wrapper. SSR-safe,
never throws, no-ops when Umami isn't loaded. Event names form a
fixed union so refactors stay safe.
14 events wired:
Discovery (3)
search_submitted FilterBar submit + near_me path
near_me_used all geolocation outcomes
empty_results search returns 0 schools
Engagement (5)
school_viewed SchoolDetail + Secondary on mount, with
urn / phase / local_authority / from
section_nav_used section-nav links on both detail views
chart_metric_changed mobile chart chip switch
metric_compared_in_rankings rankings metric dropdown
external_link_clicked Ofsted / school website / DfE (declarative
data-umami-event attributes)
Conversion (5)
compare_school_added search/rankings/detail/compare sources
compare_school_removed detail toggle and compare page
compare_viewed once per session when there's a selection
(school_count, phase_mix)
compare_metric_changed compare page metric dropdown
compare_shared native sheet vs clipboard distinguished
Operational (1)
api_error caught in handleResponse, includes
endpoint / status / route
Suggested Goals to configure in the Umami dashboard for the funnel
report: search_submitted → school_viewed → compare_school_added →
compare_viewed → compare_shared.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
MOB-14: PerformanceChart and ComparisonChart both already configure
legend position 'top' — no change needed.
MOB-15: Compare's detailedTable is 774px wide inside an overflow-x:
auto wrapper. Add a right-edge mask-image fade at ≤640px so phone
users see the table extends past the viewport.
MOB-16: ComparisonView's Share button previously did clipboard-only.
Prefer navigator.share when available (iOS/Android native sheet) so
users can send straight to Messages / WhatsApp / Mail / etc. Fall
back to clipboard with the existing "Copied!" toast otherwise. User
cancellations swallow silently; only real errors trigger fallback.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Once the user explicitly clicks a phase tab, suppress auto-phase detection
so switching to Secondary (or Primary) can't be snapped back by the effect
that fires when comparisonData re-fetches.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The useEffect that auto-selects the Primary/Secondary tab was calling
setComparePhase() without updating selectedMetric. When a URL carries a
primary metric (e.g. metric=rwm_expected_pct) but the shortlisted schools
are secondary, the tab would switch to Secondary while the metric stayed
at rwm_expected_pct — which is null for all secondary schools, causing
every card to show "–" and requiring a manual tab toggle to fix.
Fix: after determining the phase from school data, check whether the
current metric belongs to that phase's category list. If not, reset to
the phase default (attainment_8_score for secondary, rwm_expected_pct
for primary). A metric that already fits the phase (e.g. the URL already
carried attainment_8_score) is preserved unchanged.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Apply formatAcademicYear to all year displays in ComparisonChart, ComparisonView,
PerformanceChart, and RankingsView. Remove old vanilla JS frontend and CSV data
directory — both superseded by the Next.js app and Meltano pipeline.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- URLs now /school/138267-school-name instead of /school/138267
- Bare URN URLs redirect to canonical slug (backward compat)
- Remove overflow-x:hidden that broke sticky tab nav on secondary pages
- ComparisonToast starts collapsed — user must click to open
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1. Simpler home page: only search box on landing, no filter dropdowns
2. Advanced filters: hidden behind toggle on results page, auto-open if active
3. Per-school phase rendering: each row renders based on its own data
4. Taller 4-line rows with context line (type, age range, denomination, gender)
5. Result-scoped filters: dropdown values reflect current search results
6. Fix blank filter values: exclude empty strings and "Not applicable"
7. Rankings: Primary/Secondary phase tabs with phase-specific metrics
8. Compare: Primary/Secondary tabs with school counts and phase metrics
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Addresses 28 issues identified in UX audit (P0–P3 severity):
P0 — Critical:
- Fix compare URL sharing: seed ComparisonContext from SSR initialData
when localStorage is empty, making /compare?urns=... links shareable
- Remove permanently broken "Avg. Scaled Score" column from school
detail historical data table
P1 — High priority:
- Add radius selector (0.5–10 mi) to postcode search in FilterBar
- Make Add to Compare a toggle (remove) on SchoolCards
- Hide hero title/description once a search is active
- Show school count + quick-search prompts on empty landing page
- Compare empty state opens in-page school search modal directly
- Remove URN from school detail header (irrelevant to end users)
- Move map above performance chart in school detail page
- Add ← Back navigation to school detail page
- Add sort controls to search results (RWM%, distance, A–Z)
- Show metric descriptions below metric selector
- Expand ComparisonToast to list school names with per-school remove
- Add progress score explainer (0 = national average) throughout
P2 — Medium:
- Remove console.log statements from ComparisonView
- Colour-code comparison school cards to match chart line colours
- Replace plain loading text with LoadingSkeleton in ComparisonView
- Rankings empty state uses shared EmptyState component
- Rankings year filter shows actual year e.g. "2023 (Latest)"
- Rankings subtitle shows top-N count
- Add View link alongside Add button in rankings table
- Remove placeholder Privacy Policy / Terms links from footer
- Replace untappable 10px info icons with visible metric hint text
- Show active filter chips in search results header
P3 — Polish:
- Remove redundant "Home" nav link (logo already links home)
- Add / and Ctrl+K keyboard shortcut to focus search input
- Add Share button to compare page (copies URL to clipboard)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Changed 'equity' to 'disadvantaged' and 'trends' to '3yr' to match
the MetricDefinition category type.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added optgroup elements to organize metrics into logical categories:
- Expected Standard
- Higher Standard
- Progress Scores
- Average Scores
- Gender Performance
- Equity (Disadvantaged)
- School Context
- 3-Year Trends
Also added CSS styling for optgroup labels to match the design system.
Note: School names in rankings are already clickable links to school details.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- ComparisonView now uses fetchComparison from lib/api
- SchoolSearchModal now uses fetchSchools from lib/api
- Fixed bug in fetcher function that incorrectly sliced URLs
(url.slice(4) was removing '/com' from '/compare')
This fixes the malformed URL issue where '/api/compare' became '/apipare'.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added better UX and debugging for the comparison screen:
1. Loading state for chart section
- Shows "Loading comparison data..." when schools are selected
but data hasn't loaded yet
- Provides visual feedback to users
2. Enhanced debugging logs
- Log URNs being fetched
- Log API response status
- Log received comparison data
- Better error handling with null state on failure
3. Improved conditional rendering
- Chart shows when data is available
- Loading message shows when waiting for data
- Nothing shows when no schools selected
This helps diagnose any API issues and provides better user feedback
during data loading.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The compare screen and school search modal were not working because
they were fetching from '/api' directly instead of using the
NEXT_PUBLIC_API_URL environment variable that points to the backend.
Fixed client-side fetch calls in:
- ComparisonView: Fetch comparison data with correct API URL
- SchoolSearchModal: Search schools with correct API URL
This ensures client-side requests go to the FastAPI backend at
the configured URL (e.g., http://localhost:8000/api) rather than
trying to hit non-existent Next.js API routes.
Fixes comparison screen showing no data when schools are selected.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1. Added original favicon
- Copied favicon.svg from original frontend
- Added favicon reference to layout metadata
- Professional icon with brand colors
2. Updated logo in navigation
- Replaced emoji with proper SVG logo from original design
- Uses circular target design with crosshairs
- Matches brand identity with coral accent color
3. Removed emoji icons throughout app for professional look
- Removed 📍 (location pin) from school locations
- Removed 🏫 (school building) from school types
- Removed 🔢 from URN labels and section headings
- Kept meaningful symbols (✓, +) in buttons only
- Updated map popup button color to brand coral (#e07256)
Components updated:
- Navigation: Professional SVG logo
- HomeView: Clean location banner
- SchoolDetailView: No decorative emojis in metadata
- ComparisonView: Text-only school information
- SchoolSearchModal: Clean school listings
- LeafletMapInner: Professional map popups
Result: More polished, professional appearance suitable for
educational data platform
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Migrate from vanilla JavaScript SPA to Next.js 16 with App Router
- Add server-side rendering for all pages (Home, Compare, Rankings)
- Create individual school pages with dynamic routing (/school/[urn])
- Implement Chart.js and Leaflet map integrations
- Add comprehensive SEO with sitemap, robots.txt, and JSON-LD
- Set up Docker multi-service architecture (PostgreSQL, FastAPI, Next.js)
- Update CI/CD pipeline to build both backend and frontend images
- Fix Dockerfile to include devDependencies for TypeScript compilation
- Add Jest testing configuration
- Implement performance optimizations (code splitting, caching)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
tudorandClaude Opus 4.6