feat(ui): display region's countries in pill tooltip - #895
Conversation
Expected version change and release notes:1.16.0-dev.11 (v1.16.0-dev.10...feat/geography-ui ) (2026-08-13T11:29 UTC)Features
|
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://proud-glacier-0f640931e-895.westus2.2.azurestaticapps.net |
There was a problem hiding this comment.
Pull request overview
Adds a detail-view tooltip for region geography badges so users can see which countries a pathway’s author-defined regions map to, leveraging the structured { global, regions, country } geography shape introduced previously.
Changes:
- Introduces
regionMemberCodes()utility to retrieve and normalize a pathway region’s member ISO2 codes. - Adds
RegionMembersTooltipcomponent and wires it intoPathwayDetailPageregion badges viaBadgeArray.tooltipGetter. - Adds unit and page-level tests covering mapped regions, unmapped regions, and non-region badges.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/geographyUtils.ts | Adds regionMemberCodes() to look up and normalize region member ISO2 codes. |
| src/utils/geographyUtils.test.tsx | Adds unit tests for regionMemberCodes() behavior and edge cases. |
| src/pages/PathwayDetailPage.tsx | Attaches region-only tooltips to geography badges on the detail page. |
| src/pages/PathwayDetailPage.test.tsx | Adds integration tests asserting tooltip presence/absence and rendered content. |
| src/components/RegionMembersTooltip.tsx | New tooltip body component rendering member country list (with truncation). |
| src/components/RegionMembersTooltip.test.tsx | Adds component tests for ordering, truncation, search prioritization, and empty mappings. |
| src/components/Badge.tsx | Broadens tooltip prop type from string to ReactNode to support rich tooltip content. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://proud-glacier-0f640931e-895.westus2.2.azurestaticapps.net |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 9 changed files in this pull request and generated no new comments.
Suppressed comments (1)
src/components/Badge.tsx:6
BadgeProps.childrenis typed asstring | number, but callers can (and do) pass React elements viaBadgeMaybeAbsent/BadgeArray(e.g. highlighted search matches). This makes the component’s public typing inconsistent with its actual usage and can cause TS friction when passing non-scalar children.
interface BadgeProps {
children: string | number;
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://proud-glacier-0f640931e-895.westus2.2.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://proud-glacier-0f640931e-895.westus2.2.azurestaticapps.net |
jacobvjk
left a comment
jacobvjk
left a comment
There was a problem hiding this comment.
Functionally great, but I would adjust the "no mapping" message a little
| export const REGION_TOOLTIP_MAX_MEMBERS = 12; | ||
|
|
||
| export const NO_REGION_MAPPING_TEXT = | ||
| "No country mapping published for this region."; |
There was a problem hiding this comment.
| "No country mapping published for this region."; | |
| "No country mapping available for this region."; |
"published" sounds too much like we are saying the publication does not have that information. I think in most cases we just did not have the time to put it in at this point. "available" is more open to what the reason may be.
Closes #799: "hovering a multi-country region shows its mapped ISO codes."
Region badges on the detail page showed a bare label with no way to see what the publication actually put in the region.
flattenGeographycarries region labels only and discards membership, so nothing in the UI readgeography.regions[label]— this addsregionMemberCodes(geo, label)ingeographyUtils.tsto look it back up, alongsideflattenGeography/pathwayISOCoverage.RegionMembersTooltiprenders the body: a count line, then member country names (via the existingcountryNameFromISO2), capped at 12 with a+N moretail. It plugs into the geographyBadgeArraythrough thetooltipGetterprop — the one badge family that wasn't passing it, while sectors and metrics already did. No new tooltip machinery; it renders into the existingTextWithTooltip.Details worth flagging:
filterRegions.ts— the publication's mapping, not ours.max-w-xswithpointer-events: none, so it can neither widen nor scroll. IEA's "Africa" has 54 members.sortGeographiesForDetails(A→Z by ISO2, same as country badges);prioritizeGeographiesfloats search matches to the front when a search term is supplied.Badge.tooltipwidened fromstringtoReact.ReactNode.BadgeArray.tooltipGetteralready promisedReactNodeandTextWithTooltip.tooltipalready accepted it —Badgewas the one narrow link in the chain.Global and country badges are unchanged and get no tooltip.
Part of #799 (scope box) / #783 / epic #860.
Testing
433 tests pass. New coverage: 8 tests for
regionMemberCodes, 7 forRegionMembersTooltip(names not codes, count line, the 12-item cap, the empty case), and a newPathwayDetailPage.test.tsx— the page had no test file — which focuses a region badge and asserts the portaled tooltip lists the member country names.Manually, with
npm run dev:/pathway/IEA-APS-2024— 8 regions, overlapping ("Southeast Asia" ⊂ "Asia Pacific"). Hover Africa (54) and Asia Pacific (40) for the+N morecap; North America (3) for a short list./pathway/TZ-REGI-2024— a single 10-member "South East Asia": full list, no cap./pathway/NGFS-NZ2050-2024— region labels with no published mapping: should read "No country mapping published for this region.", never an empty box.Note for reviewers
Independent of #894 and mergeable in either order — verified by test-merging both directions (clean, identical result tree, merged combination passes suite and lint).