feat: seal of reliability how it is calculated - #179
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds a localized “How it is calculated” page for the Seal of Reliability, including timeline-based visual explanations and richer rendering of translated copy.
Changes:
- Introduces
RichText+InlineCodeand an inline backtick tokenizer to safely render code-ish identifiers in translations. - Adds a new “how it is calculated” route with multiple UI components, timeline math helpers, and unit tests.
- Updates Seal of Reliability description page CTAs and extends EN/FR message catalogs with the new page content.
Reviewed changes
Copilot reviewed 18 out of 18 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/app/utils/inline-code.ts | Adds tokenizer to split translated strings into plain/code runs based on backticks. |
| src/app/utils/inline-code.spec.ts | Unit tests for inline-code tokenization behavior. |
| src/app/components/RichText.tsx | Renders tokenized text with inline code formatting. |
| src/app/components/InlineCode.tsx | Provides styled inline code rendering via MUI Box. |
| src/app/[locale]/seal-of-reliability/how-it-is-calculated/page.tsx | Registers the new localized Next.js route + metadata/static params. |
| src/app/[locale]/seal-of-reliability/how-it-is-calculated/lib/timeline.ts | Adds UTC-stable timeline geometry helpers for diagrams. |
| src/app/[locale]/seal-of-reliability/how-it-is-calculated/lib/timeline.spec.ts | Unit tests for timeline math helpers. |
| src/app/[locale]/seal-of-reliability/how-it-is-calculated/lib/content.tsx | Defines scenario/example data and message keys powering the page. |
| src/app/[locale]/seal-of-reliability/how-it-is-calculated/components/TimelineTrack.tsx | Renders track segments/markers for timeline diagrams. |
| src/app/[locale]/seal-of-reliability/how-it-is-calculated/components/ScenarioCard.tsx | Renders scenario diagrams and captions using timeline helpers + translations. |
| src/app/[locale]/seal-of-reliability/how-it-is-calculated/components/RollingCoverageCard.tsx | Renders rolling coverage examples with markers and pass/fail chip. |
| src/app/[locale]/seal-of-reliability/how-it-is-calculated/components/ResultChip.tsx | Adds a pass/fail chip with icons. |
| src/app/[locale]/seal-of-reliability/how-it-is-calculated/components/HowItIsCalculatedPage.tsx | Implements the main page layout and sections. |
| src/app/[locale]/seal-of-reliability/how-it-is-calculated/components/AxisTicks.tsx | Adds positioned axis tick labels for diagrams. |
| src/app/[locale]/seal-of-reliability/components/SealOfReliabilityDescriptionPage.tsx | Adds CTAs linking to the new “how it is calculated” page. |
| src/app/Theme.ts | Removes 'use client' and tweaks a typography spacing value. |
| messages/fr.json | Adds EN/FR copy for the new page + new CTA labels. |
| messages/en.json | Adds EN/FR copy for the new page + new CTA labels. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| export interface DateRange { | ||
| /** Inclusive ISO date (YYYY-MM-DD). */ | ||
| start: string; | ||
| /** Inclusive ISO date (YYYY-MM-DD). */ | ||
| end: string; | ||
| } |
| export function daysBetween(startIso: string, endIso: string): number { | ||
| return (parseIsoDate(endIso) - parseIsoDate(startIso)) / MS_PER_DAY; | ||
| } |
| export function placeRangeOnAxis( | ||
| range: DateRange, | ||
| axis: DateRange, | ||
| ): TrackPlacement { | ||
| const leftPercent = placeDateOnAxis(range.start, axis); | ||
| const rightPercent = placeDateOnAxis(range.end, axis); | ||
| return { | ||
| leftPercent, | ||
| widthPercent: roundPercent(Math.max(rightPercent - leftPercent, 0)), | ||
| }; | ||
| } |
| {t('freshContinuous.scenarios.title')} | ||
| </Typography> | ||
| <Box sx={twoColumnGrid}> | ||
| {rollingCoverageExamples.map((example) => ( | ||
| <RollingCoverageCard key={example.id} example={example} /> | ||
| ))} | ||
| </Box> |
|
*Lighthouse ran on https://mobilitydatabase-k1a83vcx1-mobility-data.vercel.app/ * (Desktop)
*Lighthouse ran on https://mobilitydatabase-k1a83vcx1-mobility-data.vercel.app/feeds * (Desktop)
*Lighthouse ran on https://mobilitydatabase-k1a83vcx1-mobility-data.vercel.app/feeds/gtfs/mdb-2126 * (Desktop)
*Lighthouse ran on https://mobilitydatabase-k1a83vcx1-mobility-data.vercel.app/feeds/gtfs_rt/mdb-2585 * (Desktop)
*Lighthouse ran on https://mobilitydatabase-k1a83vcx1-mobility-data.vercel.app/feeds/gbfs/gbfs-flamingo_porirua * (Desktop)
|
emmambd
left a comment
emmambd
left a comment
There was a problem hiding this comment.
This looks great! I have two main thoughts:
- I think adding icons in the methodology section might help to make it more visual
- I think the timeline for "How the Seal is earned over time" in the prototype did a better job of visually explaining this process than the 3 steps. It's really important that we convey clearly that the Seal probation starts being earned once the feed meets the criteria and I think that needs a better visual to accompany it to get the point across.
|
Another thought - the "Aug 27th" in the "Fresh: Rolling 7 Days of Coverage" maybe is just noise that isn't contributing to the visual - it could be omitted |
|
LGTM! @abigailmbd's off sick today but we can wait for her feedback tomorrow before merging |
Summary:
closes https://github.com/MobilityData/product-tasks/issues/210
Adds the seal of reliability "How it is calculated" page
Expected behavior:
When going on
seal-of-reliability/how-it-is-calculatedyou should see the page and it should look good in mobile, tablet, light mode dark modeYou should be able to navigate from the
seal-of-reliabilitypageTesting tips:
Go on
seal-of-reliability/how-it-is-calculatedand proof read the text, check styling on different resolutions and light mode dark modePlease make sure these boxes are checked before submitting your pull request - thanks!
yarn testto make sure you didn't break anything