Skip to content

Commit

Permalink
use context for universe rather than passing it through (#285)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kavigupta
kavigupta authored Aug 12, 2024
1 parent 96f1b7e commit 8372433
Show file tree
Hide file tree
Showing 15 changed files with 280 additions and 192 deletions.
8 changes: 6 additions & 2 deletions react/src/article.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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();
12 changes: 6 additions & 6 deletions react/src/comparison.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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();
40 changes: 21 additions & 19 deletions react/src/components/article-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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}
/>
Expand All @@ -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>

Expand All @@ -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>

Expand All @@ -83,7 +73,6 @@ class ArticlePanel extends PageTemplate {
<Related
related={this.props.related}
article_type={this.props.articleType}
universe={this.state.current_universe}
/>
</div>
);
Expand All @@ -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}
/>)}
</>
}
24 changes: 8 additions & 16 deletions react/src/components/comparison-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"];
Expand Down Expand Up @@ -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");
}
Expand Down Expand Up @@ -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>)
)}
Expand All @@ -110,7 +106,6 @@ class ComparisonPanel extends PageTemplate {
<ComparsionPageRows
names={this.props.names}
datas={this.props.datas}
current_universe={this.state.current_universe}
/>
</div>
)}
Expand All @@ -123,7 +118,6 @@ class ComparisonPanel extends PageTemplate {
id="map_combined"
article_type={undefined}
basemap={{ type: "osm" }}
universe={this.state.current_universe}
/>
</div>
</div>
Expand Down Expand Up @@ -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);
Expand All @@ -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) =>
Expand All @@ -249,7 +243,6 @@ function ComparsionPageRows({ names, datas, current_universe }) {
}
}}
datas={datas}
current_universe={current_universe}
names={names}
/>
);
Expand All @@ -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");
}
Expand Down Expand Up @@ -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)
}
));
Expand All @@ -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)
}
));
Expand All @@ -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%" }}>
Expand All @@ -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}
Expand Down
Loading

0 comments on commit 8372433

Please sign in to comment.