const { useState, useEffect, useMemo, useCallback, useRef, createContext, useContext } = React; /* ─── Global App Context ─────────────────────────────────────────── */ const AppContext = createContext(); function useApp() { return useContext(AppContext); } /* ─── Helpers ─────────────────────────────────────────────────────── */ function getSchool(districtCode, schoolCode) { const key = districtCode + "_" + schoolCode; const idx = window.CMAS.schoolIndex[key]; return idx != null ? window.CMAS.schools[idx] : null; } function getDistrict(code) { const idx = window.CMAS.districtIndex[code]; return idx != null ? window.CMAS.districts[idx] : null; } function fmt(v, decimals = 1) { if (v == null) return "—"; return Number(v).toFixed(decimals); } function fmtPct(v) { if (v == null) return "—"; return Number(v).toFixed(1) + "%"; } function fmtOrd(n) { if (n == null) return "—"; const s = ["th","st","nd","rd"]; const v = n % 100; return n + (s[(v - 20) % 10] || s[v] || s[0]); } function pctileClass(p) { if (p == null) return "mid"; if (p >= 70) return "high"; if (p >= 30) return "mid"; return "low"; } function deltaArrow(d) { if (d == null) return { cls: "flat", text: "—" }; if (d > 0) return { cls: "up", text: "↑ " + Math.abs(d).toFixed(1) + " pp" }; if (d < 0) return { cls: "down", text: "↓ " + Math.abs(d).toFixed(1) + " pp" }; return { cls: "flat", text: "0.0 pp" }; } function subjectColor(subj) { switch (subj) { case "ELA": return "var(--teal)"; case "Math": return "var(--amber)"; case "Science": return "var(--rose)"; case "Spanish Language Arts": return "var(--indigo)"; default: return "var(--text3)"; } } function participationLevel(rate) { if (rate == null) return "green"; if (rate >= 95) return "green"; if (rate >= 85) return "yellow"; return "red"; } /* ─── SVG Icons (inline) ──────────────────────────────────────────── */ const Icons = { home: () => , school: () => , compare: () => , rankings: () => , district: () => , map: () => , search: () => , collapse: () => , expand: () => , close: () => , info: () => , }; /* ─── Sidebar ─────────────────────────────────────────────────────── */ const NAV_ITEMS = [ { id: "overview", label: "Overview", icon: "home" }, { id: "school", label: "School", icon: "school" }, { id: "compare", label: "Compare", icon: "compare" }, { id: "rankings", label: "Rankings", icon: "rankings" }, { id: "district", label: "District", icon: "district" }, { id: "map", label: "District Heatmap", icon: "map" }, ]; function Sidebar({ page, setPage, collapsed, setCollapsed }) { return ( ); } /* ─── Top Filter Bar ──────────────────────────────────────────────── */ function TopBar({ page }) { const { year, setYear, subject, setSubject, showSLA, setShowSLA } = useApp(); const pageTitle = NAV_ITEMS.find(n => n.id === page)?.label || ""; return (
{pageTitle === "Overview" ? "State Overview" : pageTitle}
YEAR
SUBJECT
setShowSLA(!showSLA)}>
SLA
); } /* ─── Compare Tray ────────────────────────────────────────────────── */ function CompareTray({ collapsed }) { const { compareList, removeFromCompare, setPage } = useApp(); if (compareList.length === 0) return null; return (
COMPARING: {compareList.map(s => (
{s.name}
))}
); } /* ─── Main App ────────────────────────────────────────────────────── */ function App() { const [page, setPage] = useState("overview"); const [collapsed, setCollapsed] = useState(false); const [year, setYear] = useState("2025"); const [subject, setSubject] = useState("ELA"); const [showSLA, setShowSLA] = useState(false); const [selectedSchool, setSelectedSchool] = useState(null); // { districtCode, schoolCode } const [selectedDistrict, setSelectedDistrict] = useState(null); // districtCode const [compareList, setCompareList] = useState([]); // [{ districtCode, code, name }] const addToCompare = useCallback((districtCode, schoolCode) => { if (compareList.length >= 5) return; const key = districtCode + "_" + schoolCode; if (compareList.some(c => c.districtCode + "_" + c.code === key)) return; const s = getSchool(districtCode, schoolCode); if (s) setCompareList(prev => [...prev, { districtCode, code: schoolCode, name: s.name }]); }, [compareList]); const removeFromCompare = useCallback((districtCode, schoolCode) => { setCompareList(prev => prev.filter(c => !(c.districtCode === districtCode && c.code === schoolCode))); }, []); const navigateToSchool = useCallback((districtCode, schoolCode) => { setSelectedSchool({ districtCode, schoolCode }); setPage("school"); }, []); const navigateToDistrict = useCallback((districtCode) => { setSelectedDistrict(districtCode); setPage("district"); }, []); const ctx = { year, setYear, subject, setSubject, showSLA, setShowSLA, selectedSchool, selectedDistrict, compareList, addToCompare, removeFromCompare, navigateToSchool, navigateToDistrict, setPage, }; const renderPage = () => { switch (page) { case "overview": return ; case "school": return ; case "compare": return ; case "rankings": return ; case "district": return ; case "map": return ; default: return ; } }; return (
0 ? { paddingBottom: 60 } : undefined}> {renderPage()}
); } ReactDOM.createRoot(document.getElementById("root")).render();