add histograms; all changes except making the histograms visible

react/package.json

@@ -50,6 +50,7 @@
     "@dnd-kit/core": "^6.0.6",
     "@dnd-kit/sortable": "^7.0.1",
     "@fontsource/jost": "^5.0.18",
+    "@observablehq/plot": "^0.6.16",
     "@types/google-protobuf": "^3.15.12",
     "dom-to-image-more": "^3.3.0",
     "expr-eval": "^2.0.2",

react/src/components/article-panel.tsx

@@ -31,7 +31,7 @@ export function ArticlePanel({ article } : { article: Article }) {
         elements_to_render: [headers_ref.current!, table_ref.current!, map_ref.current!],
     })
 
-        return <PageTemplate screencap_elements={screencap_elements} has_universe_selector={true} universes={article.universes}>{() =>
+        return <PageTemplate screencap_elements={screencap_elements} has_universe_selector={true} universes={article.universes}>{(template_info) =>
             <div>
                 <div ref={headers_ref}>
                     <div className={headerTextClass()}>{article.shortname}</div>
@@ -40,10 +40,12 @@ export function ArticlePanel({ article } : { article: Article }) {
                 <div style={{ marginBlockEnd: "16px" }}></div>
 
                 <div className="stats_table" ref={table_ref}>
-                    <StatisticRowHeader />
+                    <StatisticRowHeader screenshot_mode={template_info.screenshot_mode} />
                     <ArticlePanelRows
                         longname={article.longname}
+                        shortname={article.shortname}
                         article_row={article}
+                        screenshot_mode={template_info.screenshot_mode}
                     />
                 </div>
 
@@ -93,12 +95,12 @@ function ComparisonSearchBox({ longname }: { longname: string }) {
     />
 }
 
-function StatisticRowHeader() {
+function StatisticRowHeader(props: { screenshot_mode : boolean}) {
     const [simple_ordinals] = useSetting("simple_ordinals");
-    return <StatisticRowRaw index={0} _idx={-1} is_header={true} simple={simple_ordinals} />
+    return <StatisticRowRaw index={0} _idx={-1} is_header={true} simple={simple_ordinals} screenshot_mode={props.screenshot_mode} />
 }
 
-function ArticlePanelRows(props: { article_row: Article, longname: string }) {
+function ArticlePanelRows(props: { article_row: Article, longname: string, shortname: string, screenshot_mode: boolean }) {
     const curr_universe = useUniverse();
     const settings = useTableCheckboxSettings();
     const [simple_ordinals] = useSetting("simple_ordinals");
@@ -109,7 +111,8 @@ function ArticlePanelRows(props: { article_row: Article, longname: string }) {
             <StatisticRowRaw is_header={false} _idx={i} key={row.statname} index={i} {...row}
                 onReplace={x => { document.location = article_link(curr_universe, x) }}
                 simple={simple_ordinals}
-                longname={props.longname}
+                shortname={props.shortname}
+                screenshot_mode={props.screenshot_mode}
             />)}
     </>
 }

react/src/components/comparison-panel.tsx

@@ -11,7 +11,8 @@ import { SearchBox } from './search';
 import { article_link, sanitize } from '../navigation/links';
 import { lighten } from '../utils/color';
 import { longname_is_exclusively_american, useUniverse } from '../universe';
-import { useTableCheckboxSettings } from '../page_template/settings';
+import { row_expanded_key, useSetting, useTableCheckboxSettings } from '../page_template/settings';
+import { WithPlot } from './plots';
 import { Article } from "../utils/protos";
 
 const main_columns = ["statval", "statval_unit", "statistic_ordinal", "statistic_percentile"];
@@ -141,6 +142,7 @@ export function ComparisonPanel(props: { joined_string: string, universes: strin
                     <ComparsionPageRows
                         names={props.names}
                         datas={props.datas}
+                        screenshot_mode={template_info.screenshot_mode}
                     />
                 </div>
             )}
@@ -199,7 +201,7 @@ function all_data_types_same(datas: Article[]) {
 }
 
 
-function ComparsionPageRows({ names, datas }: { names: string[], datas: Article[] }) {
+function ComparsionPageRows({ names, datas, screenshot_mode }: { names: string[], datas: Article[], screenshot_mode: boolean }) {
     const curr_universe = useUniverse();
     let rows: ArticleRow[][] = [];
     const idxs: number[][] = [];
@@ -217,32 +219,58 @@ function ComparsionPageRows({ names, datas }: { names: string[], datas: Article[
         params={() => { return { is_header: true } }}
         datas={datas}
         names={names}
+        screenshot_mode={screenshot_mode}
     />;
-    const render_rows = rows[0].map((_, row_idx) =>
-        <ComparisonRow
-            params={data_idx => {
-                return {
-                    key: row_idx, index: row_idx, is_header: false, ...rows[data_idx][row_idx]
-                }
-            }}
-            datas={datas}
-            names={names}
-        />
-    );
     return (
         <>
             <StatisticRow is_header={true} index={0} contents={header_row} />
 
             {
-                render_rows.map((row, i) =>
-                    <StatisticRow key={i} is_header={false} index={i} contents={row} />
+                rows[0].map((_, row_idx) => 
+                    <ComparisonRowBody
+                        key={row_idx}
+                        rows={rows}
+                        row_idx={row_idx}
+                        datas={datas}
+                        names={names}
+                        screenshot_mode={screenshot_mode}
+                    />
                 )
             }
         </>
     )
 }
 
-function ComparisonRow({ names, params, datas }: { names: string[], params: (i: number) => { is_header: true } | ({ is_header: false, key: number, index: number } & ArticleRow), datas: Article[] }) {
+function ComparisonRowBody({ rows, row_idx, datas, names, screenshot_mode }: {
+    rows: ArticleRow[][],
+    row_idx: number,
+    datas: Article[],
+    names: string[],
+    screenshot_mode: boolean
+}) {
+    const [expanded] = useSetting(row_expanded_key(rows[0][row_idx].statname));
+    const contents = <ComparisonRow
+        params={data_idx => {
+            return {
+                key: row_idx, index: row_idx, ...rows[data_idx][row_idx], is_header: false
+            }
+        }}
+        datas={datas}
+        names={names}
+        screenshot_mode={screenshot_mode}
+    />;
+    const plot_props = rows.map((row, data_idx) => ({...row[row_idx], color: color(data_idx), shortname: datas[data_idx].shortname}));
+    return <WithPlot plot_props={plot_props} expanded={expanded} key={row_idx} screenshot_mode={screenshot_mode}>
+        <StatisticRow key={row_idx} is_header={false} index={row_idx} contents={contents} />
+    </WithPlot>
+}
+
+function ComparisonRow({ names, params, datas, screenshot_mode }: {
+    names: string[],
+    params: (i: number) => { is_header: true } | ({ is_header: false, key: number, index: number } & ArticleRow),
+    datas: Article[],
+    screenshot_mode: boolean
+}) {
     if (names == undefined) {
         throw new Error("ComparisonRow: names is undefined");
     }
@@ -276,7 +304,8 @@ function ComparisonRow({ names, params, datas }: { names: string[], params: (i:
     row_overall.push(...StatisticRowRawCellContents(
         {
             ...param_vals[0], only_columns: ["statname"], _idx: -1, simple: true, longname: datas[0].longname,
-            total_width: 100 * (left_margin_pct - left_bar_margin)
+            total_width: 100 * (left_margin_pct - left_bar_margin),
+            screenshot_mode: screenshot_mode
         }
     ));
     const only_columns = all_data_types_same(datas) ? main_columns : main_columns_across_types;
@@ -287,7 +316,8 @@ function ComparisonRow({ names, params, datas }: { names: string[], params: (i:
                 ...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),
-                total_width: each(datas)
+                total_width: each(datas),
+                screenshot_mode: screenshot_mode
             }
         ));
     }
@@ -356,6 +386,8 @@ function insert_missing(rows: ArticleRow[][], idxs: number[][]) {
                 if (typeof empty_row_example[idx][key] === "number") {
                     // @ts-expect-error Typescript is fucking up this assignment
                     empty_row_example[idx][key] = NaN;
+                } else if (key == "extra_stat") {
+                    empty_row_example[idx][key] = undefined;
                 }
             }
             empty_row_example[idx].article_type = "none"; // doesn't matter since we are using simple mode

react/src/components/load-article.ts

@@ -1,6 +1,11 @@
 import { TableCheckboxSettings } from "../page_template/settings";
 import { universe_is_american } from "../universe";
-import { Article } from "../utils/protos";
+import { Article, IExtraStatistic } from "../utils/protos";
+
+export interface ExtraStat {
+    stat: IExtraStatistic,
+    universe_total: number
+}
 
 export interface ArticleRow {
     statval: number,
@@ -16,7 +21,8 @@ export interface ArticleRow {
     total_count_in_class: number,
     total_count_overall: number,
     _index: number,
-    rendered_statname: string
+    rendered_statname: string,
+    extra_stat?: ExtraStat
 }
 
 const index_list_info = require("../data/index_lists.json") as {
@@ -77,11 +83,23 @@ export function load_article(universe: string, data: Article, settings: TableChe
     const stats = require("../data/statistic_list.json") as string[];
     const explanation_page = require("../data/explanation_page.json") as string[];
 
+    const extra_stats = require("../data/extra_stats.json") as [number, number][];
+    const extra_stat_idx_to_col = extra_stats.map((xy) => xy[0]);
+
     const indices = compute_indices(data.longname, article_type) as number[];
 
     const modified_rows: ArticleRow[] = data.rows.map((row_original, row_index) => {
         const i = indices[row_index];
         // fresh row object
+        let extra_stat: ExtraStat | undefined = undefined;
+        if (extra_stat_idx_to_col.includes(i)) {
+            const extra_stat_idx = extra_stat_idx_to_col.indexOf(i);
+            const [, universe_total_idx] = extra_stats[extra_stat_idx];
+            extra_stat = {
+                stat: data.extraStats[extra_stat_idx],
+                universe_total: data.rows.filter((row, row_index) => indices[row_index] === universe_total_idx)[0].statval!
+            };
+        }
         return {
             statval: row_original.statval!,
             ordinal: row_original.ordinalByUniverse![universe_index],
@@ -96,7 +114,8 @@ export function load_article(universe: string, data: Article, settings: TableChe
             total_count_in_class: for_type(universe, stats[i], article_type),
             total_count_overall: for_type(universe, stats[i], "overall"),
             _index: i,
-            rendered_statname: render_statname(i, names[i], exclusively_american)
+            rendered_statname: render_statname(i, names[i], exclusively_american),
+            extra_stat: extra_stat
         } satisfies ArticleRow
     })
     const filtered_rows = modified_rows.filter((row) => {