From 837243313be3d8438c4855fb488cf52e4ac2d09e Mon Sep 17 00:00:00 2001
From: Kavi Gupta <kavi@berkeley.edu>
Date: Sun, 11 Aug 2024 22:58:35 -0700
Subject: [PATCH] use context for universe rather than passing it through
 (#285)

---
 react/src/article.js                     |   8 +-
 react/src/comparison.js                  |  12 +-
 react/src/components/article-panel.js    |  40 +++---
 react/src/components/comparison-panel.js |  24 ++--
 react/src/components/header.tsx          |  42 +++---
 react/src/components/map.tsx             |   9 +-
 react/src/components/mapper-panel.js     |   2 -
 react/src/components/related-button.tsx  |  12 +-
 react/src/components/statistic-panel.js  | 156 ++++++++++++++---------
 react/src/components/table.tsx           |  36 +++---
 react/src/page_template/template.abc     |  64 ++++++++++
 react/src/page_template/template.js      |  18 +--
 react/src/quiz/quiz-question.js          |   2 -
 react/src/statistic.js                   |  41 +++---
 react/src/universe.ts                    |   6 +
 15 files changed, 280 insertions(+), 192 deletions(-)
 create mode 100644 react/src/page_template/template.abc

diff --git a/react/src/article.js b/react/src/article.js
index cb4c1ae3..51aee19e 100644
--- a/react/src/article.js
+++ b/react/src/article.js
@@ -7,7 +7,7 @@ import { data_link } from "./navigation/links";
 
 import { ArticlePanel } from './components/article-panel';
 import { loadProtobuf } from './load_json';
-import { default_article_universe, get_universe, remove_universe_if_default, remove_universe_if_not_in } from './universe';
+import { default_article_universe, get_universe, remove_universe_if_default, remove_universe_if_not_in, UNIVERSE_CONTEXT } from './universe';
 
 
 async function loadPage() {
@@ -20,7 +20,11 @@ async function loadPage() {
     remove_universe_if_not_in(data.universes)
     const default_universe = default_article_universe(longname);
     remove_universe_if_default(default_universe);
-    root.render(<ArticlePanel longname={longname} {...data} universe={get_universe(default_universe)} />);
+    root.render(
+        <UNIVERSE_CONTEXT.Provider value={get_universe(default_universe)}>
+            <ArticlePanel longname={longname} {...data} />
+        </UNIVERSE_CONTEXT.Provider>
+    );
 }
 
 loadPage();
\ No newline at end of file
diff --git a/react/src/comparison.js b/react/src/comparison.js
index d0362398..5f08315d 100644
--- a/react/src/comparison.js
+++ b/react/src/comparison.js
@@ -7,7 +7,7 @@ import { data_link } from "./navigation/links";
 
 import { loadProtobuf } from './load_json';
 import { ComparisonPanel } from './components/comparison-panel.js';
-import { default_comparison_universe, get_universe, remove_universe_if_default, remove_universe_if_not_in } from './universe';
+import { default_comparison_universe, get_universe, remove_universe_if_default, remove_universe_if_not_in, UNIVERSE_CONTEXT } from './universe';
 
 
 async function loadPage() {
@@ -24,11 +24,11 @@ async function loadPage() {
     remove_universe_if_not_in(universes)
     const default_universe = default_comparison_universe(names);
     remove_universe_if_default(default_universe);
-    root.render(<ComparisonPanel names={names} datas={datas} joined_string={joined_string} universes={universes}
-        universe={get_universe(
-            default_universe
-        )}
-    />);
+    root.render(
+        <UNIVERSE_CONTEXT.Provider value={get_universe(default_universe)}>
+            <ComparisonPanel names={names} datas={datas} joined_string={joined_string} universes={universes} />
+        </UNIVERSE_CONTEXT.Provider>
+    );
 }
 
 loadPage();
\ No newline at end of file
diff --git a/react/src/components/article-panel.js b/react/src/components/article-panel.js
index 8b187e05..201b6d79 100644
--- a/react/src/components/article-panel.js
+++ b/react/src/components/article-panel.js
@@ -12,7 +12,7 @@ import { load_article } from './load-article';
 import { comparisonHeadStyle, headerTextClass, subHeaderTextClass } from '../utils/responsive';
 import { SearchBox } from './search';
 import { article_link, comparison_link, sanitize } from '../navigation/links';
-import { longname_is_exclusively_american } from '../universe';
+import { longname_is_exclusively_american, useUniverse } from '../universe';
 import { useSetting, useTableCheckboxSettings } from '../page_template/settings';
 
 class ArticlePanel extends PageTemplate {
@@ -39,9 +39,8 @@ class ArticlePanel extends PageTemplate {
                 <div style={{ marginBlockEnd: "16px" }}></div>
 
                 <div className="stats_table" ref={this.table_ref}>
-                    <StatisticRowHeader universe={this.state.current_universe} />
+                    <StatisticRowHeader />
                     <ArticlePanelRows
-                        current_universe={this.state.current_universe}
                         longname={this.props.longname}
                         article_row={this.props}
                     />
@@ -55,7 +54,6 @@ class ArticlePanel extends PageTemplate {
                         related={this.props.related}
                         article_type={this.props.articleType}
                         basemap={{ type: "osm" }}
-                        universe={this.state.current_universe}
                     />
                 </div>
 
@@ -66,15 +64,7 @@ class ArticlePanel extends PageTemplate {
                         <div className="serif" style={comparisonHeadStyle("right")}>Compare to: </div>
                     </div>
                     <div style={{ width: "70%" }}>
-                        <SearchBox
-                            style={{ ...comparisonHeadStyle(), width: "100%" }}
-                            placeholder={"Other region..."}
-                            on_change={(x) => {
-                                document.location.href = comparison_link(
-                                    this.state.current_universe,
-                                    [this.props.longname, x]);
-                            }}
-                        />
+                        <ComparisonSearchBox longname={this.props.longname} />
                     </div>
                 </div>
 
@@ -83,7 +73,6 @@ class ArticlePanel extends PageTemplate {
                 <Related
                     related={this.props.related}
                     article_type={this.props.articleType}
-                    universe={this.state.current_universe}
                 />
             </div>
         );
@@ -106,23 +95,36 @@ class ArticlePanel extends PageTemplate {
     }
 }
 
-function StatisticRowHeader(props) {
+function ComparisonSearchBox(props) {
+    const curr_universe = useUniverse();
+    return <SearchBox
+        style={{ ...comparisonHeadStyle(), width: "100%" }}
+        placeholder={"Other region..."}
+        on_change={(x) => {
+            document.location.href = comparison_link(
+                curr_universe,
+                [props.longname, x]);
+        }}
+    />
+}
+
+function StatisticRowHeader() {
     const [simple_ordinals, _] = useSetting("simple_ordinals");
-    return <StatisticRowRaw _idx={-1} is_header={true} simple={simple_ordinals} universe={props.universe}/>
+    return <StatisticRowRaw _idx={-1} is_header={true} simple={simple_ordinals} />
 }
 
 function ArticlePanelRows(props) {
+    const curr_universe = useUniverse();
     const settings = useTableCheckboxSettings();
     const [simple_ordinals, _set_simple_ordinals] = useSetting("simple_ordinals");
-    const [filtered_rows, _] = load_article(props.current_universe, props.article_row, settings,
+    const [filtered_rows, _] = load_article(curr_universe, props.article_row, settings,
         longname_is_exclusively_american(props.longname));
     return <>
         {filtered_rows.map((row, i) =>
             <StatisticRowRaw _idx={i} key={row.statname} index={i} {...row}
-                onReplace={x => { document.location = article_link(props.current_universe, x) }}
+                onReplace={x => { document.location = article_link(curr_universe, x) }}
                 simple={simple_ordinals}
                 longname={props.longname}
-                universe={props.current_universe}
             />)}
     </>
 }
\ No newline at end of file
diff --git a/react/src/components/comparison-panel.js b/react/src/components/comparison-panel.js
index 4425e4a6..246f676b 100644
--- a/react/src/components/comparison-panel.js
+++ b/react/src/components/comparison-panel.js
@@ -12,7 +12,7 @@ import { comparisonHeadStyle, headerTextClass, mobileLayout, subHeaderTextClass
 import { SearchBox } from './search';
 import { article_link, sanitize } from '../navigation/links';
 import { lighten } from '../utils/color';
-import { longname_is_exclusively_american } from '../universe';
+import { longname_is_exclusively_american, useUniverse } from '../universe';
 import { useTableCheckboxSettings } from '../page_template/settings';
 
 const main_columns = ["statval", "statval_unit", "statistic_ordinal", "statistic_percentile"];
@@ -57,9 +57,6 @@ class ComparisonPanel extends PageTemplate {
 
     main_content() {
         const self = this;
-        if (this.state.current_universe == undefined) {
-            throw new Error("ComparisonPanel: current_universe not set");
-        }
         if (this.props.names == undefined) {
             throw new Error("ComparisonPanel: names not set");
         }
@@ -100,7 +97,6 @@ class ComparisonPanel extends PageTemplate {
                                         on_click={() => on_delete(self.props.names, i)}
                                         on_change={(x) => on_change(self.props.names, i, x)}
                                         screenshot_mode={this.state.screenshot_mode}
-                                        universe={this.state.current_universe}
                                     />
                                 </div>)
                             )}
@@ -110,7 +106,6 @@ class ComparisonPanel extends PageTemplate {
                         <ComparsionPageRows
                             names={this.props.names}
                             datas={this.props.datas}
-                            current_universe={this.state.current_universe}
                         />
                     </div>
                 )}
@@ -123,7 +118,6 @@ class ComparisonPanel extends PageTemplate {
                         id="map_combined"
                         article_type={undefined}
                         basemap={{ type: "osm" }}
-                        universe={this.state.current_universe}
                     />
                 </div>
             </div>
@@ -222,12 +216,13 @@ function all_data_types_same(datas) {
 }
 
 
-function ComparsionPageRows({ names, datas, current_universe }) {
+function ComparsionPageRows({ names, datas }) {
+    const curr_universe = useUniverse();
     var rows = [];
     var idxs = [];
     const exclusively_american = datas.every(x => longname_is_exclusively_american(x.longname));
     for (let i in datas) {
-        const [r, idx] = load_article(current_universe, datas[i], useTableCheckboxSettings(),
+        const [r, idx] = load_article(curr_universe, datas[i], useTableCheckboxSettings(),
             exclusively_american);
         rows.push(r);
         idxs.push(idx);
@@ -238,7 +233,6 @@ function ComparsionPageRows({ names, datas, current_universe }) {
     const header_row = <ComparisonRow
         params={i => { return { is_header: true } }}
         datas={datas}
-        current_universe={current_universe}
         names={names}
     />;
     const render_rows = rows[0].map((_, row_idx) =>
@@ -249,7 +243,6 @@ function ComparsionPageRows({ names, datas, current_universe }) {
                 }
             }}
             datas={datas}
-            current_universe={current_universe}
             names={names}
         />
     );
@@ -266,7 +259,7 @@ function ComparsionPageRows({ names, datas, current_universe }) {
     )
 }
 
-function ComparisonRow({ names, params, datas, current_universe }) {
+function ComparisonRow({ names, params, datas }) {
     if (names == undefined) {
         throw new Error("ComparisonRow: names is undefined");
     }
@@ -300,7 +293,6 @@ function ComparisonRow({ names, params, datas, current_universe }) {
     row_overall.push(...StatisticRowRawCellContents(
         {
             ...param_vals[0], only_columns: ["statname"], _idx: -1, simple: true, longname: datas[0].longname,
-            universe: current_universe,
             total_width: 100 * (left_margin_pct - left_bar_margin)
         }
     ));
@@ -312,7 +304,6 @@ function ComparisonRow({ names, params, datas, current_universe }) {
                 ...param_vals[i], only_columns: only_columns, _idx: i, simple: true,
                 statistic_style: highlight_idx == i ? { backgroundColor: lighten(color(i), 0.7) } : {},
                 onReplace: x => on_change(names, i, x),
-                universe: current_universe,
                 total_width: each(datas)
             }
         ));
@@ -339,9 +330,10 @@ function ManipulationButton({ color, on_click, text }) {
     </div>
 }
 
-function HeadingDisplay({ universe, longname, include_delete, on_click, on_change, screenshot_mode }) {
+function HeadingDisplay({ longname, include_delete, on_click, on_change, screenshot_mode }) {
 
     const [is_editing, set_is_editing] = React.useState(false);
+    const curr_universe = useUniverse();
 
     const manipulation_buttons = <div style={{ height: manipulation_button_height }}>
         <div style={{ display: "flex", justifyContent: "flex-end", height: "100%" }}>
@@ -359,7 +351,7 @@ function HeadingDisplay({ universe, longname, include_delete, on_click, on_chang
     return <div>
         {screenshot_mode ? undefined : manipulation_buttons}
         <div style={{ height: "5px" }} />
-        <a className="serif" href={article_link(universe, longname)} style={{ textDecoration: "none" }}><div style={comparisonHeadStyle()}>{longname}</div></a>
+        <a className="serif" href={article_link(curr_universe, longname)} style={{ textDecoration: "none" }}><div style={comparisonHeadStyle()}>{longname}</div></a>
         {is_editing ?
             <SearchBox
                 autoFocus={true}
diff --git a/react/src/components/header.tsx b/react/src/components/header.tsx
index 1d156fa2..cabf5317 100644
--- a/react/src/components/header.tsx
+++ b/react/src/components/header.tsx
@@ -7,6 +7,7 @@ import { Nav } from './hamburger';
 import { mobileLayout } from '../utils/responsive';
 import { ScreenshotButton } from './screenshot';
 import { article_link, universe_path } from '../navigation/links';
+import { set_universe, useUniverse } from '../universe';
 
 export const HEADER_BAR_SIZE = "48px";
 const HEADER_BAR_SIZE_DESKTOP = "60px";
@@ -15,22 +16,19 @@ export function Header(props: {
     hamburger_open: boolean,
     set_hamburger_open: (newValue: boolean) => void,
     has_universe_selector: boolean,
-    current_universe: string,
     all_universes: string[],
-    on_universe_update: (universe: string) => void,
     has_screenshot: boolean,
     screenshot_mode: boolean,
-    initiate_screenshot: () => void
+    initiate_screenshot: (curr_universe: string) => void
 }) {
+    const curr_universe = useUniverse();
     return (
         <div className="top_panel">
             <TopLeft
                 hamburger_open={props.hamburger_open}
                 set_hamburger_open={props.set_hamburger_open}
                 has_universe_selector={props.has_universe_selector}
-                current_universe={props.current_universe}
                 all_universes={props.all_universes}
-                on_universe_update={props.on_universe_update}
             />
             <div className="right_panel_top" style={{ height: HEADER_BAR_SIZE }}>
                 {/* flex but stretch to fill */}
@@ -38,9 +36,7 @@ export function Header(props: {
                     {!mobileLayout() && props.has_universe_selector
                         ? <div style={{ paddingRight: "0.5em" }}>
                             <UniverseSelector
-                                current_universe={props.current_universe}
                                 all_universes={props.all_universes}
-                                on_universe_update={props.on_universe_update}
                             />
                         </div>
                         : undefined}
@@ -48,7 +44,7 @@ export function Header(props: {
                         props.has_screenshot ?
                             <ScreenshotButton
                                 screenshot_mode={props.screenshot_mode}
-                                onClick={props.initiate_screenshot}
+                                onClick={() => props.initiate_screenshot(curr_universe)}
                             /> : undefined
                     }
                     <div className="hgap"></div>
@@ -57,7 +53,7 @@ export function Header(props: {
                             on_change={
                                 new_location => {
                                     window.location.href = article_link(
-                                        props.current_universe, new_location
+                                        curr_universe, new_location
                                     )
                                 }
                             }
@@ -83,9 +79,7 @@ function TopLeft(props: {
     hamburger_open: boolean,
     set_hamburger_open: (newValue: boolean) => void,
     has_universe_selector: boolean,
-    current_universe: string,
     all_universes: string[],
-    on_universe_update: (universe: string) => void
 }) {
     if (mobileLayout()) {
         return (
@@ -95,9 +89,7 @@ function TopLeft(props: {
                 {
                     props.has_universe_selector ?
                         <UniverseSelector
-                            current_universe={props.current_universe}
                             all_universes={props.all_universes}
-                            on_universe_update={props.on_universe_update}
                         /> :
                         <HeaderImage />
                 }
@@ -122,9 +114,10 @@ function HeaderImage() {
 }
 
 function UniverseSelector(
-    { current_universe, all_universes, on_universe_update }
-    : { current_universe: string, all_universes: string[], on_universe_update: (universe: string) => void }
+    { all_universes }
+        : { all_universes: string[] }
 ) {
+    const curr_universe = useUniverse();
     // button to select universe. Image is icons/flags/${universe}.png
     // when clicked, a dropdown appears with all universes, labeled by their flags
 
@@ -135,10 +128,7 @@ function UniverseSelector(
     let dropdown = dropdown_open ? <UniverseDropdown
         flag_size={width}
         all_universes={all_universes}
-        on_universe_update={(universe: string) => {
-            set_dropdown_open(false);
-            on_universe_update(universe);
-        }} /> : undefined;
+    /> : undefined;
 
     // wrap dropdown in a div to place it in front of everything else and let it spill out of the header
     // do NOT use class
@@ -165,7 +155,7 @@ function UniverseSelector(
                     alignItems: "center",
                 }
             }>
-                <img src={`/icons/flags/${current_universe}.png`} alt={current_universe} width={width}
+                <img src={`/icons/flags/${curr_universe}.png`} alt={curr_universe} width={width}
                     className="universe-selector"
                     onClick={() => set_dropdown_open(!dropdown_open)}
                 />
@@ -176,8 +166,8 @@ function UniverseSelector(
 }
 
 function UniverseDropdown(
-    { all_universes, on_universe_update, flag_size }
-    : { all_universes: string[], on_universe_update: (universe: string) => void, flag_size: string }
+    { all_universes, flag_size }
+        : { all_universes: string[], flag_size: string }
 ) {
     return (
         <div>
@@ -188,9 +178,9 @@ function UniverseDropdown(
             >
                 Select universe for statistics
             </div>
-            {all_universes.map(universe => {
+            {all_universes.map(alt_universe => {
                 return (
-                    <div key={universe} onClick={() => on_universe_update(universe)}>
+                    <div key={alt_universe} onClick={() => set_universe(alt_universe)}>
                         <div style={{
                             display: "flex",
                             flexDirection: "row",
@@ -202,12 +192,12 @@ function UniverseDropdown(
                         }}
                             className="hoverable_elements"
                         >
-                            <img src={universe_path(universe)} alt={universe}
+                            <img src={universe_path(alt_universe)} alt={alt_universe}
                                 width={flag_size}
                                 className="universe-selector-option"
                             />
                             <div className="serif">
-                                {universe == "world" ? "World" : universe}
+                                {alt_universe == "world" ? "World" : alt_universe}
                             </div>
                         </div>
                     </div>
diff --git a/react/src/components/map.tsx b/react/src/components/map.tsx
index ef7802c2..ba3ec504 100644
--- a/react/src/components/map.tsx
+++ b/react/src/components/map.tsx
@@ -14,12 +14,12 @@ import { NormalizeProto } from "../utils/types";
 import { Feature, IRelatedButton, IRelatedButtons } from "../utils/protos";
 import { Basemap } from "../mapper/settings";
 import { relationship_key, useRelatedCheckboxSettings, useSetting } from '../page_template/settings';
+import { UNIVERSE_CONTEXT } from '../universe';
 
 export interface MapGenericProps {
     height?: string,
     id: string,
     basemap: Basemap,
-    universe: string,
 }
 
 class MapGeneric<P extends MapGenericProps> extends React.Component<P> {
@@ -291,7 +291,7 @@ class MapGeneric<P extends MapGenericProps> extends React.Component<P> {
         });
         if (add_callback) {
             polygon = polygon.on("click", () => {
-                window.location.href = article_link(this.props.universe, name);
+                window.location.href = article_link(this.context!, name);
             });
         }
 
@@ -318,13 +318,16 @@ class MapGeneric<P extends MapGenericProps> extends React.Component<P> {
         console.log("zoom to", name);
         this.map!.fitBounds(this.polygon_by_name.get(name)!.getBounds());
     }
+
+    static contextType = UNIVERSE_CONTEXT;
+    
+    declare context: React.ContextType<typeof UNIVERSE_CONTEXT>;
 }
 
 interface MapProps extends MapGenericProps {
     longname: string,
     related: NormalizeProto<IRelatedButtons>[],
     article_type: string,
-    universe: string,
 }
 
 interface ArticleMapProps extends MapProps {
diff --git a/react/src/components/mapper-panel.js b/react/src/components/mapper-panel.js
index ba3ab7e2..11cebe88 100644
--- a/react/src/components/mapper-panel.js
+++ b/react/src/components/mapper-panel.js
@@ -180,7 +180,6 @@ function MapComponent(props) {
                     line_style={props.line_style}
                     basemap={props.basemap}
                     height={props.height}
-                    universe={props.universe}
                 />
             </div>
             <div style={{ height: "8%", width: "100%" }}>
@@ -367,7 +366,6 @@ class MapperPanel extends PageTemplate {
             line_style={this.state.map_settings.line_style}
             basemap={this.state.map_settings.basemap}
             height={height}
-            universe={this.state.current_universe}
         />
     }
 
diff --git a/react/src/components/related-button.tsx b/react/src/components/related-button.tsx
index acb79523..fe0cbff4 100644
--- a/react/src/components/related-button.tsx
+++ b/react/src/components/related-button.tsx
@@ -8,6 +8,7 @@ import "./related.css";
 import { mobileLayout } from '../utils/responsive';
 import { lighten } from '../utils/color';
 import { useSetting, relationship_key } from '../page_template/settings';
+import { useUniverse } from '../universe';
 
 
 const type_ordering_idx = require("../data/type_ordering_idx.json");
@@ -38,8 +39,9 @@ const colorsEach: Record<string, string> = {
     "Native": GREEN,
 };
 
-function RelatedButton(props: { region: Region, universe: string }) {
+function RelatedButton(props: { region: Region }) {
 
+    const curr_universe = useUniverse();
     const type_category = type_to_type_category[props.region.rowType];
 
     let classes = `serif button_related`
@@ -55,13 +57,13 @@ function RelatedButton(props: { region: Region, universe: string }) {
             <a
                 className={classes}
                 style={{ color: "black", backgroundColor: lighten(color, 0.7) }}
-                href={article_link(props.universe, props.region.longname)}>{props.region.shortname}
+                href={article_link(curr_universe, props.region.longname)}>{props.region.shortname}
             </a>
         </li>
     );
 }
 
-function RelatedList(props: { articleType: string, buttonType: string, regions: Record<string, Region[]>, universe: string }) {
+function RelatedList(props: { articleType: string, buttonType: string, regions: Record<string, Region[]> }) {
     if (props.articleType == undefined) {
         throw new Error("articleType is undefined; shoud be defined");
     }
@@ -108,7 +110,6 @@ function RelatedList(props: { articleType: string, buttonType: string, regions:
                                             <RelatedButton
                                                 key={i}
                                                 region={row}
-                                                universe={props.universe}
                                             />
                                         )
                                     }
@@ -123,7 +124,7 @@ function RelatedList(props: { articleType: string, buttonType: string, regions:
     );
 }
 
-export function Related(props: { article_type: string, related: { relationshipType: string, buttons: Region[] }[], universe: string }) {
+export function Related(props: { article_type: string, related: { relationshipType: string, buttons: Region[] }[] }) {
 
     // buttons[rowType][relationshipType] = <list of buttons>
     const [showHistoricalCds] = useSetting("show_historical_cds");
@@ -160,7 +161,6 @@ export function Related(props: { article_type: string, related: { relationshipTy
                 buttonType={key}
                 regions={buttons[key]}
                 articleType={props.article_type}
-                universe={props.universe}
             />
         );
     }
diff --git a/react/src/components/statistic-panel.js b/react/src/components/statistic-panel.js
index b79171d3..28c17067 100644
--- a/react/src/components/statistic-panel.js
+++ b/react/src/components/statistic-panel.js
@@ -10,6 +10,7 @@ import { article_link, explanation_page_link, sanitize, statistic_link } from '.
 import { Percentile, Statistic } from './table';
 import { display_type } from '../utils/text';
 import { useSetting } from '../page_template/settings';
+import { useUniverse } from '../universe';
 
 const table_style = { display: "flex", flexDirection: "column", padding: "1px" };
 const column_names = ["Ordinal", "Name", "Value", "", "Percentile"];
@@ -55,10 +56,10 @@ class StatisticPanel extends PageTemplate {
         return this.is_ascending() ? "ascending" : "descending";
     }
 
-    swap_ascending_descending() {
+    swap_ascending_descending(curr_universe) {
         var new_order = this.is_ascending() ? "descending" : "ascending";
         document.location = statistic_link(
-            this.state.current_universe,
+            curr_universe,
             this.props.statname, this.props.article_type,
             1, this.props.amount, new_order,
             undefined
@@ -112,7 +113,10 @@ class StatisticPanel extends PageTemplate {
             <div ref={this.headers_ref}>
                 <div className={headerTextClass()}>{this.props.rendered_statname}</div>
                 {/* // TODO plural */}
-                <div className={subHeaderTextClass()}>{display_type(this.state.current_universe, this.props.article_type)} ({this.rendered_order()})</div>
+                <StatisticPanelSubhead
+                    article_type={this.props.article_type}
+                    rendered_order={this.rendered_order()}
+                />
             </div>
             <div style={{ marginBlockEnd: "16px" }}></div>
             <div className="serif" ref={this.table_ref}>
@@ -121,7 +125,7 @@ class StatisticPanel extends PageTemplate {
                         if (i === 0) {
                             return <div key={name} style={{ ...this.style(i, 0), "display": "flex", "justifyContent": "space-between", "flexDirection": "row" }}>
                                 <div>{name}</div>
-                                <AscendingVsDescending on_click={() => this.swap_ascending_descending()} is_ascending={this.is_ascending()} />
+                                <AscendingVsDescending on_click={curr_universe => this.swap_ascending_descending(curr_universe)} is_ascending={this.is_ascending()} />
                             </div>
                         }
                         return <div key={name} style={this.style(i, 0)}>{name}</div>
@@ -133,7 +137,7 @@ class StatisticPanel extends PageTemplate {
                     }}>
                         <div style={this.style(0, row_idx + 1)}>{i + 1}</div>
                         <div style={this.style(1, row_idx + 1)}>
-                            <a href={article_link(this.state.current_universe, this.props.article_names[i])} style={{ fontWeight: 500, color: "black", textDecoration: "none" }}>{this.props.article_names[i]}</a>
+                            <ArticleLink longname={this.props.article_names[i]} />
                         </div>
                         <div style={this.style(2, row_idx + 1)} className='value'>
                             <Statistic
@@ -179,43 +183,15 @@ class StatisticPanel extends PageTemplate {
         const next = Math.min(max_page_start, current + per_page);
         const current_page = Math.ceil(current / per_page);
 
-        // low-key style for the buttons
-        const button_style = {
-            backgroundColor: "#f7f1e8",
-            border: "1px solid #000",
-            padding: "0 0.5em",
-            margin: "0.5em"
-        };
 
-        const select_page = <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
-            <button onClick={() => this.change_start(prev)} className="serif" style={button_style}>&lt;</button>
-            <div>
-                <span>Page: </span>
-                <input type="string" pattern="[0-9]*"
-                    style={{ width: "3em", textAlign: "right" }}
-                    className="serif"
-                    defaultValue={current_page} onKeyDown={e => {
-                        if (e.key === "Enter") {
-                            var new_page = e.target.value;
-                            if (typeof new_page === "string") {
-                                new_page = parseInt(new_page);
-                            }
-                            if (typeof new_page === "number") {
-                                if (new_page < 1) {
-                                    new_page = 1;
-                                }
-                                if (new_page > max_pages) {
-                                    new_page = max_pages;
-                                }
-                                const new_start = (new_page - 1) * per_page + 1;
-                                self.change_start(new_start);
-                            }
-                        }
-                    }} />
-                <span> of {max_pages}</span>
-            </div>
-            <button onClick={() => this.change_start(next)} className="serif" style={button_style}>&gt;</button>
-        </div>;
+        const select_page = <SelectPage
+            change_start={(curr_universe, new_start) => self.change_start(curr_universe, new_start)}
+            current_page={current_page}
+            max_pages={max_pages}
+            prev_page={prev}
+            next_page={next}
+            per_page={per_page}
+        />
 
         // align the entire div to the center. not flex.
         return <div style={{
@@ -236,30 +212,24 @@ class StatisticPanel extends PageTemplate {
                 </div>
             </div>
             <div style={{ width: "25%" }}>
-                <div style={{ margin: "auto", textAlign: "center" }}>
-                    <span><select defaultValue={
-                        per_page == total ? "All" : per_page
-                    } onChange={e => this.change_amount(e.target.value)} className="serif">
-                        <option value="10">10</option>
-                        <option value="20">20</option>
-                        <option value="50">50</option>
-                        <option value="100">100</option>
-                        <option value="All">All</option>
-                    </select> per page</span>
-                </div>
+                <PerPageSelector
+                    per_page={per_page}
+                    total={total}
+                    change_amount={(curr_universe, new_amount) => self.change_amount(curr_universe, new_amount)}
+                />
             </div>
         </div>
     }
 
-    change_start(new_start) {
+    change_start(curr_universe, new_start) {
         document.location.href = statistic_link(
-            this.state.current_universe,
+            curr_universe,
             this.props.statname, this.props.article_type,
             new_start, this.props.amount, this.props.order, undefined
         );
     }
 
-    change_amount(new_amount) {
+    change_amount(curr_universe, new_amount) {
         const new_amount_str = new_amount;
         var start = this.props.start;
         if (new_amount === "All") {
@@ -274,7 +244,7 @@ class StatisticPanel extends PageTemplate {
         }
         if (typeof new_amount === "number") {
             document.location.href = statistic_link(
-                this.state.current_universe,
+                curr_universe,
                 this.props.statname,
                 this.props.article_type,
                 start,
@@ -286,6 +256,77 @@ class StatisticPanel extends PageTemplate {
     }
 }
 
+function PerPageSelector(props) {
+    const curr_universe = useUniverse();
+    return <div style={{ margin: "auto", textAlign: "center" }}>
+        <span><select defaultValue={
+            props.per_page == props.total ? "All" : props.per_page
+        } onChange={e => props.change_amount(curr_universe, e.target.value)} className="serif">
+            <option value="10">10</option>
+            <option value="20">20</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="All">All</option>
+        </select> per page</span>
+    </div>
+}
+
+function SelectPage(props) {
+    // low-key style for the buttons
+    const button_style = {
+        backgroundColor: "#f7f1e8",
+        border: "1px solid #000",
+        padding: "0 0.5em",
+        margin: "0.5em"
+    };
+
+    const curr_universe = useUniverse();
+    return <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+        <button onClick={() => props.change_start(curr_universe, props.prev_page)} className="serif" style={button_style}>&lt;</button>
+        <div>
+            <span>Page: </span>
+            <input type="string" pattern="[0-9]*"
+                style={{ width: "3em", textAlign: "right" }}
+                className="serif"
+                defaultValue={props.current_page} onKeyDown={e => {
+                    if (e.key === "Enter") {
+                        var new_page = e.target.value;
+                        if (typeof new_page === "string") {
+                            new_page = parseInt(new_page);
+                        }
+                        if (typeof new_page === "number") {
+                            if (new_page < 1) {
+                                new_page = 1;
+                            }
+                            if (new_page > props.max_pages) {
+                                new_page = props.max_pages;
+                            }
+                            const new_start = (new_page - 1) * props.per_page + 1;
+                            props.change_start(curr_universe, new_start);
+                        }
+                    }
+                }} />
+            <span> of {props.max_pages}</span>
+        </div>
+        <button onClick={() => props.change_start(curr_universe, props.next_page)} className="serif" style={button_style}>&gt;</button>
+    </div>
+}
+
+function ArticleLink(props) {
+    const curr_universe = useUniverse();
+    return <a
+        href={article_link(curr_universe, props.longname)}
+        style={{ fontWeight: 500, color: "black", textDecoration: "none" }}
+    >{props.longname}</a>
+}
+
+function StatisticPanelSubhead(props) {
+    const curr_universe = useUniverse();
+    return <div className={subHeaderTextClass()}>
+        {display_type(curr_universe, props.article_type)} ({props.rendered_order})
+    </div>
+}
+
 function AutoPercentile(props) {
     const [simple_ordinals, _] = useSetting("simple_ordinals");
     return <Percentile ordinal={props.ordinal}
@@ -296,9 +337,10 @@ function AutoPercentile(props) {
 }
 
 function AscendingVsDescending({ on_click, is_ascending }) {
+    const curr_universe = useUniverse();
     // either an up or down arrow, depending on the current ordering
     return <div style={{ display: "flex", alignItems: "center" }}>
-        <div style={{ cursor: "pointer" }} onClick={on_click}>
+        <div style={{ cursor: "pointer" }} onClick={() => on_click(curr_universe)}>
             {is_ascending ? "▲" : "▼"}
         </div>
     </div>
diff --git a/react/src/components/table.tsx b/react/src/components/table.tsx
index 48f7a05a..70e25a6c 100644
--- a/react/src/components/table.tsx
+++ b/react/src/components/table.tsx
@@ -8,6 +8,7 @@ import { is_historical_cd } from '../utils/is_historical';
 import { display_type } from '../utils/text';
 import { ArticleRow } from './load-article';
 import { useSetting } from '../page_template/settings';
+import { useUniverse } from '../universe';
 
 const table_row_style: React.CSSProperties = {
     display: "flex",
@@ -30,17 +31,15 @@ export type StatisticRowRawProps = {
         }
     )
 
-export function StatisticRowRaw(props: StatisticRowRawProps & { index: number, universe: string, longname?: string }) {
+export function StatisticRowRaw(props: StatisticRowRawProps & { index: number, longname?: string }) {
 
     const cell_contents = StatisticRowRawCellContents({ ...props, total_width: 100 });
 
     return <StatisticRow is_header={props.is_header} index={props.index} contents={cell_contents} />;
 }
 
-export function StatisticRowRawCellContents(props: StatisticRowRawProps & { total_width: number, universe: string, longname?: string }) {
-    if (props.universe == undefined) {
-        throw "StatisticRowRawCellContents: universe is undefined";
-    }
+export function StatisticRowRawCellContents(props: StatisticRowRawProps & { total_width: number, longname?: string }) {
+    const curr_universe = useUniverse();
     const alignStyle: React.CSSProperties = { textAlign: props.is_header ? "center" : "right" };
     let value_columns: [number, string, React.ReactNode][] = [
         [15,
@@ -85,7 +84,7 @@ export function StatisticRowRawCellContents(props: StatisticRowRawProps & { tota
                 props.is_header ? "Statistic" :
                     <a className="statname_no_link" href={
                         statistic_link(
-                            props.universe,
+                            curr_universe,
                             props.statname, props.article_type, props.ordinal,
                             20, undefined, props.longname!
                         )
@@ -106,7 +105,6 @@ export function StatisticRowRawCellContents(props: StatisticRowRawProps & { tota
                         statpath={props.statpath}
                         simple={props.simple}
                         onReplace={props.onReplace}
-                        universe={props.universe}
                     />
             }</span>
         ],
@@ -133,7 +131,6 @@ export function StatisticRowRawCellContents(props: StatisticRowRawProps & { tota
                         statpath={props.statpath}
                         type={props.article_type}
                         total={props.total_count_in_class}
-                        universe={props.universe}
                     />
                 </span>
         ],
@@ -147,7 +144,6 @@ export function StatisticRowRawCellContents(props: StatisticRowRawProps & { tota
                         statpath={props.statpath}
                         type="overall"
                         total={props.total_count_overall}
-                        universe={props.universe}
                     />
                 </span>
         ]
@@ -337,10 +333,8 @@ function ElectionResult(props: { value: number }) {
     return <span className={"party_result_" + party}>{party}+{text}</span>;
 }
 
-export function Ordinal(props: { ordinal: number, total: number, type: string, statpath: string, onReplace?: (newValue: string) => void, simple: boolean, universe: string }) {
-    if (props.universe == undefined) {
-        throw "Ordinal: universe is undefined";
-    }
+export function Ordinal(props: { ordinal: number, total: number, type: string, statpath: string, onReplace?: (newValue: string) => void, simple: boolean }) {
+    const curr_universe = useUniverse();
     const onNewNumber = async (number: number) => {
         let num = number;
         if (num < 0) {
@@ -353,7 +347,7 @@ export function Ordinal(props: { ordinal: number, total: number, type: string, s
         if (num <= 0) {
             num = 1;
         }
-        const data = await load_ordering(props.universe, props.statpath, props.type);
+        const data = await load_ordering(curr_universe, props.statpath, props.type);
         props.onReplace?.(data[num - 1])
     }
     const ordinal = props.ordinal;
@@ -370,7 +364,7 @@ export function Ordinal(props: { ordinal: number, total: number, type: string, s
         return right_align(en);
     }
     return <div className="serif" style={{ textAlign: "right" }}>
-        {en} of {total} {display_type(props.universe, type)}
+        {en} of {total} {display_type(curr_universe, type)}
     </div>;
 }
 
@@ -428,8 +422,9 @@ export function Percentile(props: { ordinal: number, total: number, percentile_b
     return <div className="serif" style={{ textAlign: "right" }}>{text}</div>;
 }
 
-function PointerButtonsIndex(props: { ordinal: number, statpath: string, type: string, total: number, universe: string }) {
-    const get_data = async () => await load_ordering(props.universe, props.statpath, props.type);
+function PointerButtonsIndex(props: { ordinal: number, statpath: string, type: string, total: number }) {
+    const curr_universe = useUniverse();
+    const get_data = async () => await load_ordering(curr_universe, props.statpath, props.type);
     const [settings_show_historical_cds] = useSetting("show_historical_cds");
     const show_historical_cds = settings_show_historical_cds || is_historical_cd(props.type);
     return (
@@ -441,7 +436,6 @@ function PointerButtonsIndex(props: { ordinal: number, statpath: string, type: s
                 direction={-1}
                 total={props.total}
                 show_historical_cds={show_historical_cds}
-                universe={props.universe}
             />
             <PointerButtonIndex
                 text=">"
@@ -450,13 +444,13 @@ function PointerButtonsIndex(props: { ordinal: number, statpath: string, type: s
                 direction={+1}
                 total={props.total}
                 show_historical_cds={show_historical_cds}
-                universe={props.universe}
             />
         </span>
     );
 }
 
-function PointerButtonIndex(props: { text: string, get_data: () => Promise<string[]>, original_pos: number, direction: number, total: number, show_historical_cds: boolean, universe: string }) {
+function PointerButtonIndex(props: { text: string, get_data: () => Promise<string[]>, original_pos: number, direction: number, total: number, show_historical_cds: boolean }) {
+    const curr_universe = useUniverse();
     const out_of_bounds = (pos: number) => pos < 0 || pos >= props.total
     const onClick = async (pos: number) => {
         {
@@ -467,7 +461,7 @@ function PointerButtonIndex(props: { text: string, get_data: () => Promise<strin
                     pos += props.direction;
                     continue;
                 }
-                document.location = article_link(props.universe, name);
+                document.location = article_link(curr_universe, name);
                 return;
             }
         }
diff --git a/react/src/page_template/template.abc b/react/src/page_template/template.abc
new file mode 100644
index 00000000..61128de4
--- /dev/null
+++ b/react/src/page_template/template.abc
@@ -0,0 +1,64 @@
+import React, { Fragment, useState } from 'react';
+
+import { Header } from "../components/header";
+import { Sidebar } from "../components/sidebar";
+import "../common.css";
+import "../components/article.css";
+import { useResponsive } from '../utils/responsive';
+import { ScreencapElements, create_screenshot } from '../components/screenshot';
+
+export function PageTemplate(props: { mainContent: (screenshotMode: boolean) => React.ReactNode, screencapElements?: ScreencapElements }) {
+    const [hamburger_open, set_hamburger_open] = useState(false);
+    const [screenshot_mode, set_screenshot_mode] = useState(false);
+    
+    const responsive = useResponsive()
+
+    const initiateScreenshot = () => {
+        set_screenshot_mode(true)
+        setTimeout(async () => {
+            await create_screenshot(props.screencapElements!)
+            set_screenshot_mode(false)
+        })
+    }
+
+    return (
+        <Fragment>
+            <meta name="viewport" content="width=600" />
+            <div className={responsive.mobileLayout ? "main_panel_mobile" : "main_panel"}>
+                <Header
+                    hamburger_open={hamburger_open}
+                    set_hamburger_open={set_hamburger_open}
+                    has_screenshot={props.screencapElements !== undefined}
+                    screenshot_mode={screenshot_mode}
+                    initiate_screenshot={initiateScreenshot}
+                />
+                <div className="gap"></div>
+                <BodyPanel mainContent={props.mainContent(screenshot_mode)} hamburger_open={hamburger_open} />
+            </div>
+        </Fragment>
+    );
+}
+
+function BodyPanel(props: { mainContent: React.ReactNode, hamburger_open: boolean }) {
+    const responsive = useResponsive()
+    if (props.hamburger_open) {
+        return <LeftPanel />;
+    }
+    return <div className="body_panel">
+        {responsive.mobileLayout ? undefined : <LeftPanel />}
+        <div className={responsive.mobileLayout ? "content_panel_mobile" : "right_panel"}>
+            {props.mainContent}
+            <div className="gap"></div>
+            <div className="centered_text">Urban Stats Version 9.3.0 by Kavi Gupta. Last updated 2024-02-09. Significant help with weather data from <a href="https://twitter.com/OklahomaPerson">OklahomaPerson</a>. Not for commercial use.</div>
+        </div>
+    </div>
+}
+
+function LeftPanel() {
+    const responsive = useResponsive()
+    return (
+        <div className={responsive.mobileLayout ? "left_panel_mobile" : "left_panel"}>
+            <Sidebar />
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/react/src/page_template/template.js b/react/src/page_template/template.js
index 56aff563..4491ab6b 100644
--- a/react/src/page_template/template.js
+++ b/react/src/page_template/template.js
@@ -33,7 +33,6 @@ class PageTemplate extends React.Component {
             settings: settings,
             hamburger_open: false,
             screenshot_mode: false,
-            current_universe: this.props.universe,
         }
     }
 
@@ -41,15 +40,10 @@ class PageTemplate extends React.Component {
         const self = this;
 
 
-        const set_this_universe = universe => {
-            self.setState({ current_universe: universe });
-            set_universe(universe);
-        }
-
-        const initiate_screenshot = async () => {
+        const initiate_screenshot = async curr_universe => {
             self.setState({ screenshot_mode: true });
             setTimeout(async () => {
-                await self.screencap();
+                await self.screencap(curr_universe);
                 self.setState({ screenshot_mode: false });
             })
         }
@@ -63,11 +57,9 @@ class PageTemplate extends React.Component {
                         set_hamburger_open={x => this.setState({ hamburger_open: x })}
                         has_screenshot={this.has_screenshot_button()}
                         has_universe_selector={this.has_universe_selector()}
-                        current_universe={this.state.current_universe}
                         all_universes={this.props.universes}
-                        on_universe_update={set_this_universe}
                         screenshot_mode={this.state.screenshot_mode}
-                        initiate_screenshot={() => initiate_screenshot()}
+                        initiate_screenshot={curr_universe => initiate_screenshot(curr_universe)}
                     />
                     <div style={{ marginBlockEnd: "16px" }}></div>
                     <BodyPanel
@@ -97,12 +89,12 @@ class PageTemplate extends React.Component {
         }
     }
 
-    async screencap() {
+    async screencap(curr_universe) {
         const config = this.screencap_elements();
 
         try {
             console.log("Creating screenshot...");
-            await create_screenshot(config, this.has_universe_selector() ? this.state.current_universe : undefined);
+            await create_screenshot(config, this.has_universe_selector() ? curr_universe : undefined);
         } catch (e) {
             console.error(e);
         }
diff --git a/react/src/quiz/quiz-question.js b/react/src/quiz/quiz-question.js
index 112742e3..dd4d98d3 100644
--- a/react/src/quiz/quiz-question.js
+++ b/react/src/quiz/quiz-question.js
@@ -200,7 +200,6 @@ class JuxtastatQuizQuestion extends QuizQuestion {
             longname={this.props.longname_a}
             article_type={undefined}
             basemap={{ type: "osm" }}
-            universe={undefined}
         />
     }
 
@@ -209,7 +208,6 @@ class JuxtastatQuizQuestion extends QuizQuestion {
             longname={this.props.longname_b}
             article_type={undefined}
             basemap={{ type: "osm" }}
-            universe={undefined}
         />
     }
 }
diff --git a/react/src/statistic.js b/react/src/statistic.js
index 45f8e141..05e4d6e9 100644
--- a/react/src/statistic.js
+++ b/react/src/statistic.js
@@ -7,7 +7,7 @@ import "./common.css";
 import { load_ordering_protobuf, load_ordering } from './load_json';
 import { StatisticPanel } from './components/statistic-panel.js';
 import { for_type, render_statname } from './components/load-article';
-import { get_universe, longname_is_exclusively_american, remove_universe_if_default } from './universe';
+import { get_universe, longname_is_exclusively_american, remove_universe_if_default, UNIVERSE_CONTEXT } from './universe';
 
 
 async function loadPage() {
@@ -42,24 +42,27 @@ async function loadPage() {
     const root = ReactDOM.createRoot(document.getElementById("root"));
     const universes = require("./data/universes_ordered.json");
     const exclusively_american = article_names.every(longname_is_exclusively_american);
-    root.render(<StatisticPanel
-        statname={statname}
-        statpath={statpath}
-        count={for_type(universe, statcol, article_type)}
-        explanation_page={explanation_page}
-        ordering={order}
-        highlight={highlight}
-        article_type={article_type}
-        joined_string={statpath}
-        start={start}
-        amount={amount}
-        order={order}
-        article_names={article_names}
-        data={data}
-        universes={universes}
-        universe={universe}
-        rendered_statname={render_statname(names.indexOf(statname), statname, exclusively_american)}
-    />);
+    root.render(
+        <UNIVERSE_CONTEXT.Provider value={universe}>
+            <StatisticPanel
+                statname={statname}
+                statpath={statpath}
+                count={for_type(universe, statcol, article_type)}
+                explanation_page={explanation_page}
+                ordering={order}
+                highlight={highlight}
+                article_type={article_type}
+                joined_string={statpath}
+                start={start}
+                amount={amount}
+                order={order}
+                article_names={article_names}
+                data={data}
+                universes={universes}
+                rendered_statname={render_statname(names.indexOf(statname), statname, exclusively_american)}
+            />
+        </UNIVERSE_CONTEXT.Provider>
+    );
 }
 
 loadPage();
\ No newline at end of file
diff --git a/react/src/universe.ts b/react/src/universe.ts
index 98ee916a..77e17ea1 100644
--- a/react/src/universe.ts
+++ b/react/src/universe.ts
@@ -1,4 +1,10 @@
+import { createContext, useContext } from "react";
 
+export const UNIVERSE_CONTEXT = createContext<string | undefined>(undefined);
+
+export function useUniverse(): string {
+    return useContext(UNIVERSE_CONTEXT)!;
+}
 
 export function get_universe(default_universe: string | undefined) {
     return new URLSearchParams(window.location.search).get("universe") || default_universe