/* ============================================================= page-map.jsx — Full-width global map with country search Layout: [Search bar] → [Big map] → [Country drilldown below] ============================================================= */ const MAP_MODULE_AUDIT_ALIAS = "World Map"; function PageMap({ model, onOpenSite, onOpenInPM, role }) { // T025 — engineer/po/admin can navigate from a site card straight to the PM // editor with the canonical site identity preserved. Management stays // monitoring-only (no PM access by role gate), so the button hides for them. const canOpenInPM = !!onOpenInPM && (role === "engineer" || role === "po" || role === "admin"); const [metric, setMetric] = React.useState("links"); const [selected, setSelected] = React.useState(null); const [searchTerm, setSearchTerm] = React.useState(""); const [showSuggest, setShowSuggest] = React.useState(false); const searchRef = React.useRef(null); // ---------- Per-country aggregate (FULL dataset, not filtered) ---------- // PROP-11: enrich each country aggregate row with lifecycle data so the map // can colour by lifecycle phase or completion %. const countryData = React.useMemo(() => { const base = PRData.countryAggregate(model); if (!PRData.countryLifecycleAggregate) return base; const lifecycle = PRData.countryLifecycleAggregate(model); const byCountry = new Map(); for (const l of lifecycle) byCountry.set((l.country || "").toLowerCase(), l); return base.map((row) => { const canon = window.COUNTRY_ISO ? window.COUNTRY_ISO.canonical(row.key) : row.key; const lc = byCountry.get((canon || "").toLowerCase()) || byCountry.get((row.key || "").toLowerCase()) || null; return { ...row, lifecycle: lc || null, sitesComplete: lc ? lc.sitesComplete : 0, blockedSites: lc ? lc.blockedSites : 0, averageLifecyclePercent: lc ? lc.averageLifecyclePercent : 0, dominantLifecyclePhase: lc ? lc.dominantLifecyclePhase : "no-data", dominantLifecyclePhaseLabel: lc ? lc.dominantLifecyclePhaseLabel : "No project data", readinessPercent: lc ? lc.readinessPercent : 0, blockedReadinessCount: lc ? lc.blockedReadinessCount : 0, sitesReadyForMigration: lc ? lc.sitesReadyForMigration : 0, readinessTrackedSites: lc ? lc.readinessTrackedSites : 0, linksInMigration: lc ? lc.linksInMigration : 0, postMigrationCompleteLinks: lc ? lc.postMigrationCompleteLinks : 0, readinessTrackedLinks: lc ? lc.readinessTrackedLinks : 0, }; }); }, [model]); // ---------- Drilldown for the selected country ---------- const selectedData = React.useMemo(() => { return PRData.countryDrilldown(model, selected); }, [model, selected]); const canonical = selected ? window.COUNTRY_ISO.canonical(selected) : null; // ---------- Search suggestions ---------- // Build a list of canonical country names with data, deduped. const allCountries = React.useMemo(() => { const m = new Map(); for (const c of countryData) { const iso = window.COUNTRY_ISO.toISO(c.key); if (!iso) continue; const canon = window.COUNTRY_ISO.canonical(c.key); if (!m.has(canon)) m.set(canon, { canon, iso, key: c.key, sites: 0, links: 0 }); const e = m.get(canon); e.sites += c.sites.size; e.links += c.links; } return [...m.values()].sort((a, b) => a.canon.localeCompare(b.canon)); }, [countryData]); // T023: when actively searching, never silently truncate matches — a country // with valid workbook data must be reachable through search. Cap only the // empty-query default to keep the dropdown short on first focus. const SUGGEST_EMPTY_DEFAULT = 8; const suggestions = React.useMemo(() => { const q = searchTerm.trim().toLowerCase(); if (!q) return allCountries.slice(0, SUGGEST_EMPTY_DEFAULT); return allCountries.filter((c) => c.canon.toLowerCase().includes(q)); }, [searchTerm, allCountries]); const totalMatches = React.useMemo(() => { const q = searchTerm.trim().toLowerCase(); if (!q) return allCountries.length; return allCountries.filter((c) => c.canon.toLowerCase().includes(q)).length; }, [searchTerm, allCountries]); function pickCountry(key) { setSelected(key); setSearchTerm(""); setShowSuggest(false); // Smooth-scroll to drilldown setTimeout(() => { const el = document.getElementById("country-drilldown"); if (el) { const rect = el.getBoundingClientRect(); const offset = window.scrollY + rect.top - 80; window.scrollTo({ top: offset, behavior: "smooth" }); } }, 50); } // Close suggestion dropdown when clicking outside React.useEffect(() => { function onDoc(e) { if (searchRef.current && !searchRef.current.contains(e.target)) { setShowSuggest(false); } } document.addEventListener("mousedown", onDoc); return () => document.removeEventListener("mousedown", onDoc); }, []); return (
} />
Metric source Project tracker Canonical sites {(model.canonicalSites || model.sites || []).length} Canonical links {(model.canonicalLinks || []).length} Local project updates {model.overridesApplied || 0} New Underlay readiness feeds country lifecycle Program baseline is not used for map totals
{/* Country search */}
{ setSearchTerm(e.target.value); setShowSuggest(true); }} onFocus={() => setShowSuggest(true)} placeholder="Search country — try India, France, Japan, Argentina…" onKeyDown={(e) => { if (e.key === "Enter" && suggestions.length) pickCountry(suggestions[0].key); if (e.key === "Escape") { setShowSuggest(false); setSearchTerm(""); } }} style={{fontSize: 14}} /> {(selected || searchTerm) && ( )}
{showSuggest && suggestions.length > 0 && (
{suggestions.map((s) => ( ))} {searchTerm.trim() && (
Showing {suggestions.length} of {totalMatches} match{totalMatches === 1 ? "" : "es"}
)}
)}
{/* Full-width map */}
pickCountry(names[0])} height={Math.max(640, Math.round(window.innerHeight * 0.75))} />
{/* Country drilldown (below the map) */}
{!selected || !selectedData ? (
No country selected
Pick a country to drill in
Use the search above, or click any highlighted country on the map. The drilldown shows every site, the vendor mix, criticality breakdown, and a dedicated discussion thread.
Top countries by canonical links
c.links > 0) .sort((a, b) => b.links - a.links) .slice(0, 6) .map((c) => ({ label: window.COUNTRY_ISO.canonical(c.key), value: c.links, color: c.atRisk > 0 ? "var(--warn)" : "var(--accent)" }))} />
) : (
{/* Header */}
Country drilldown
{canonical}
{/* Stats strip */}
{(() => { const lc = countryData.find((c) => (window.COUNTRY_ISO.canonical(c.key) || c.key) === canonical); if (!lc || !lc.lifecycle) return null; return ( <> = 75 ? "ok" : "warn"}/> ); })()}
{/* Body: 3 columns: Vendors + Criticality, Sites, Discussion */}
Vendors
{selectedData.vendors.length === 0 ? (
No vendor data.
) : (
{selectedData.vendors.map(([v, n]) => ( {v} {n} ))}
)}
Criticality mix
{selectedData.criticalities.length === 0 ? ( — ) : selectedData.criticalities.map(([c, n]) => ( {n} ))}
Sites in {canonical} ({selectedData.sitesInCountry.length})
{selectedData.sitesInCountry.length === 0 && No sites recorded.} {selectedData.sitesInCountry.map((s) => { const linkRefs = (s.canonicalLinkRefs || s.linkRefs || (s.links || []).map((l) => l && l.linkRef).filter(Boolean) || []); const linkCount = (s.canonicalLinkRefs || s.linkRefs || s.links || []).length; // PM payload contract: prefer the canonical siteCode, but fall // back to siteName before shortLabel because the workbook can // carry stub shortLabels like "0" while the site clearly has a // human-readable name. page-pm.jsx::PageProjectManagement // resolves overlay→sites via siteCode === idRef OR // siteName.toLowerCase() === idLow, so siteName is the safe // fallback when siteCode is missing. const pmIdRef = s.siteCode || s.siteName || s.shortLabel; return (
onOpenSite({ site: s })} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onOpenSite({ site: s }); } }} style={{ textAlign: "left", padding: "8px 10px", borderRadius: 8, border: "1px solid var(--line-soft)", background: "var(--surface)", display: "flex", justifyContent: "space-between", alignItems: "center", cursor: "pointer", fontSize: 12.5, }}> {s.siteName || s.id} {s.siteCode || "—"} {linkCount}L {canOpenInPM && pmIdRef && ( )}
); })}
Discussion · {canonical}
)}
); } function Stat({ label, value, tone }) { return (
{label}
{value}
); } window.PageMap = PageMap;