feat: filter race time distributions by gender and age group

[rootulp]

Feedback

From a Reddit comment about tritimes.org:

Is there a way to sort the main page on mobile by M/F and age group? Wasn't really finding a way to filter the data to see the distribution of times for my age group, but would love such a feature if it were available!

The race page's Time Distributions showed histograms over the entire finisher field, with no way to narrow them to a gender + age-group segment.

What this does

Adds two filter controls above the Time Distributions on /race/[slug]:

• Gender — All / Male / Female (values present in the race)
• Age group — All / 18–24 / 25–29 / … / PRO (derived by stripping the M/F prefix off the age-group code, so M35-39 and F35-39 collapse into one 35-39 option)

Picking a segment recomputes all four histograms (swim, bike, run, total) instantly in the browser — no reload. A "N of M finishers" line + Reset button appear when a filter is active, and an empty combination shows a tidy empty state. Native <select>s keep it mobile-friendly and accessible. The default All/All view is server-rendered, so SEO/no-JS output is unchanged.

Implementation

• app/src/lib/histogram.ts (new, client-safe): extracted the pure histogram helpers (computeRaceHistogram, computeMedian, formatSecondsShort, BIN_SIZES) out of data.ts so a client component can use them without pulling the ~190MB data corpus into its bundle (kept clean per import-graph.test.ts). Added deriveAgeBand and filterSegment.
• getRaceSegmentData(slug) in data.ts: ships a compact per-finisher payload (parallel arrays of splits + gender/age-band indices). ~30–40 KB gzipped worst case (~5K-finisher race); far less typical.
• RaceDistributions.tsx (new client component): holds the two selections and recomputes histograms in a useMemo, rendering the existing RaceHistogram.
• Race page wires it in, replacing the inline whole-field distributions block. Summary cards, discipline table, demographics, and leaderboards are unchanged.

Testing

• Unit tests: deriveAgeBand, filterSegment, computeRaceHistogram regression, and getRaceSegmentData shape (175/175 pass).
• Verified end-to-end in a real browser at a mobile viewport: gender/age dropdowns, live histogram recompute (e.g. Female + 35–39 → 53 of 1,744 finishers), Reset, and clean accessible names on the controls.

🤖 Generated with Claude Code

https://claude.ai/code/session_01GWYCWpC6wFtk4MH7E4gwDS

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tritimes	Ready	Preview, Comment	Jul 16, 2026 4:58am

[coderabbitai]

Warning

Review limit reached

@rootulp, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 13 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 6aee4d09-768b-4cda-b2ae-2d628a865609

📥 Commits

Reviewing files that changed from the base of the PR and between f464965 and f083373.

📒 Files selected for processing (7)

• app/src/app/race/[slug]/page.tsx
• app/src/components/RaceDistributions.tsx
• app/src/lib/__tests__/histogram.test.ts
• app/src/lib/__tests__/race-segment.test.ts
• app/src/lib/data.ts
• app/src/lib/histogram.ts
• app/src/lib/types.ts

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/race-distribution-filter

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}