Skip to content

Commit

Permalink
migrated a few things
Browse files Browse the repository at this point in the history
  • Loading branch information
@kavigupta
kavigupta committed Aug 13, 2024
1 parent b144ee8 commit 5a16865
Show file tree
Hide file tree
Showing 5 changed files with 149 additions and 184 deletions.
19 changes: 8 additions & 11 deletions react/src/about.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,15 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import "./style.css";
import "./common.css";
import { PageTemplateClass } from "./page_template/template.js";
import { PageTemplate } from "./page_template/template.js";
import { headerTextClass } from './utils/responsive';


class AboutPanel extends PageTemplateClass {
constructor(props) {
super(props);
}

main_content(template_info) {
return (
<div className="serif">
function AboutPanel(props) {
return <PageTemplate
has_universe_selector={false}
main_content={
template_info => <div className="serif">
<div className={headerTextClass()}>About</div>

<p>
Expand All @@ -40,8 +37,8 @@ class AboutPanel extends PageTemplateClass {
<a href="https://github.com/kavigupta/urbanstats/issues">filing an issue on GitHub</a>.
</p>
</div>
);
}
}
/>
}

async function loadPage() {
Expand Down
71 changes: 35 additions & 36 deletions react/src/components/article-panel.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
export { ArticlePanel };
import React, { useRef } from 'react';

import React from 'react';

import { StatisticRowRaw } from "./table";
import { Map } from "./map";
import { Related } from "./related-button";
import { PageTemplateClass } from "../page_template/template.js";
import { PageTemplate } from "../page_template/template.js";
import "../common.css";
import "./article.css";
import { load_article } from './load-article';
Expand All @@ -15,44 +15,46 @@ import { article_link, comparison_link, sanitize } from '../navigation/links';
import { longname_is_exclusively_american, useUniverse } from '../universe';
import { useSetting, useTableCheckboxSettings } from '../page_template/settings';

class ArticlePanel extends PageTemplateClass {
constructor(props) {
super(props);

this.headers_ref = React.createRef();
this.table_ref = React.createRef();
this.map_ref = React.createRef();
}

main_content(template_info) {
if (this.props.articleType == undefined) {
function ArticlePanel(props) {
const table_ref = useRef(null);
const headers_ref = useRef(null);
const map_ref = useRef(null);

const screencap_elements = () => ({
path: sanitize(props.longname) + ".png",
overall_width: table_ref.current.offsetWidth * 2,
elements_to_render: [headers_ref.current, table_ref.current, map_ref.current],
});

console.log("table_ref", table_ref);
const main_content = (template_info) => {
console.log("table_ref", table_ref);
if (props.articleType == undefined) {
throw new Error("articleType is undefined");
}
const self = this;

return (
<div>
<div ref={this.headers_ref}>
<div className={headerTextClass()}>{this.props.shortname}</div>
<div className={subHeaderTextClass()}>{this.props.longname}</div>
<div ref={headers_ref}>
<div className={headerTextClass()}>{props.shortname}</div>
<div className={subHeaderTextClass()}>{props.longname}</div>
</div>
<div style={{ marginBlockEnd: "16px" }}></div>

<div className="stats_table" ref={this.table_ref}>
<div className="stats_table" ref={table_ref}>
<StatisticRowHeader />
<ArticlePanelRows
longname={this.props.longname}
article_row={this.props}
longname={props.longname}
article_row={props}
/>
</div>

<p></p>

<div ref={this.map_ref}>
<div ref={map_ref}>
<Map id="map"
longname={this.props.longname}
related={this.props.related}
article_type={this.props.articleType}
longname={props.longname}
related={props.related}
article_type={props.articleType}
basemap={{ type: "osm" }}
/>
</div>
Expand All @@ -64,27 +66,24 @@ class ArticlePanel extends PageTemplateClass {
<div className="serif" style={comparisonHeadStyle("right")}>Compare to: </div>
</div>
<div style={{ width: "70%" }}>
<ComparisonSearchBox longname={this.props.longname} />
<ComparisonSearchBox longname={props.longname} />
</div>
</div>

<script src="/scripts/map.js"></script>

<Related
related={this.props.related}
article_type={this.props.articleType}
related={props.related}
article_type={props.articleType}
/>
</div>
);
}

screencap_elements() {
return () => ({
path: sanitize(this.props.longname) + ".png",
overall_width: this.table_ref.current.offsetWidth * 2,
elements_to_render: [this.headers_ref.current, this.table_ref.current, this.map_ref.current],
})
}
return <PageTemplate
main_content={main_content}
screencap_elements={screencap_elements}
universes={props.universes}
/>
}

function ComparisonSearchBox(props) {
Expand Down
99 changes: 44 additions & 55 deletions react/src/components/comparison-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,45 @@ class ComparisonPanel extends PageTemplateClass {
throw new Error("ComparisonPanel: names not set");
}

const left_margin = 100 * left_margin_pct
const width_columns = (all_data_types_same(this.props.datas) ? 1.5 : 1) * this.props.datas.length + 1;

const cell = (is_left, i, contents) => {
if (is_left) {
return <div key={i} style={{ width: left_margin + "%" }}>
{contents}
</div>
}
const width = each(this.props.datas) + "%";
return <div key={i} style={{ width: width }}>
{contents}
</div>
}

const bars = () => <div style={{ display: "flex" }}>
{cell(true, 0, <div></div>)}
{this.props.datas.map(
(data, i) => <div key={i} style={{
width: each(this.props.datas) + "%",
height: bar_height,
backgroundColor: color(i)
}} />
)}
</div>;

const maybe_scroll = (contents) => {
const max_columns = mobileLayout() ? 4 : 6;
if (width_columns > max_columns) {
return <div style={{ overflowX: "scroll" }}>
<div style={{ width: 100 * width_columns / (max_columns - 0.7) + "%" }}>
{contents}
</div>
</div>
}
return contents;
}


return (
<div>
<div className={headerTextClass()}>Comparison</div>
Expand All @@ -76,13 +115,13 @@ class ComparisonPanel extends PageTemplateClass {

<div style={{ marginBlockEnd: "1em" }}></div>

{this.maybe_scroll(
{maybe_scroll(
<div ref={this.table_ref}>
{this.bars()}
{bars()}
<div style={{ display: "flex" }}>
{this.cell(true, 0, <div></div>)}
{cell(true, 0, <div></div>)}
{this.props.datas.map(
(data, i) => this.cell(false, i, <div>
(data, i) => cell(false, i, <div>
<HeadingDisplay
longname={data.longname}
include_delete={this.props.datas.length > 1}
Expand All @@ -93,7 +132,7 @@ class ComparisonPanel extends PageTemplateClass {
</div>)
)}
</div>
{this.bars()}
{bars()}

<ComparsionPageRows
names={this.props.names}
Expand All @@ -115,56 +154,6 @@ class ComparisonPanel extends PageTemplateClass {
</div>
);
}

bars() {
return <div style={{ display: "flex" }}>
{this.cell(true, 0, <div></div>)}
{this.props.datas.map(
(data, i) => <div key={i} style={{
width: each(this.props.datas) + "%",
height: bar_height,
backgroundColor: color(i)
}} />
)}
</div>
}

max_columns() {
return mobileLayout() ? 4 : 6;
}

maybe_scroll(contents) {
if (this.width_columns() > this.max_columns()) {
return <div style={{ overflowX: "scroll" }}>
<div style={{ width: 100 * this.width_columns() / (this.max_columns() - 0.7) + "%" }}>
{contents}
</div>
</div>
}
return contents;
}

cell(is_left, i, contents) {
if (is_left) {
return <div key={i} style={{ width: this.left_margin() + "%" }}>
{contents}
</div>
}
const width = each(this.props.datas) + "%";
return <div key={i} style={{ width: width }}>
{contents}
</div>
}

width_columns() {
// 1.5 columns each if all data types are the same, otherwise 1 column each
// + 1 for the left margin
return (all_data_types_same(this.props.datas) ? 1.5 : 1) * this.props.datas.length + 1;
}

left_margin() {
return 100 * left_margin_pct;
}
}

function color(i) {
Expand Down
Loading

0 comments on commit 5a16865

Please sign in to comment.