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-17T13:29 UTC)Features
Other
|
|
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
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://proud-glacier-0f640931e-895.westus2.2.azurestaticapps.net |
|
updated the "mapping not available" message |
|
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/utils/geographyUtils.ts:80
regionMemberCodesalways scansObject.keys(geo.regions)to find a normalized match. If there is an exact key equal to the normalizedlabel(the common case), it’s cheaper and more deterministic to use it directly first; it also avoids accidentally selecting a different key when multiple region keys normalize to the same value (e.g. both "Europe" and " Europe ").
const key = Object.keys(geo.regions).find(
(k) => normalizeGeography(k) === wanted,
);
if (key === undefined) return [];
const members = geo.regions[key];
|
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 13 out of 13 changed files in this pull request and generated no new comments.
Suppressed comments (1)
src/components/RegionMembersTooltip.tsx:18
- The PR description (and earlier discussion) says unmapped regions should read “No country mapping published for this region.”, but the UI constant currently uses “available…”. If the “published” wording is intentional, this string (and the related assertions in tests) should be updated to match so reviewers/users see the same copy that’s documented for #799.
export const NO_REGION_MAPPING_TEXT =
"No country mapping available for this region.";
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).