Skip to content

Commit

Permalink
[Graph Browser 2] A bunch of UI tweaks (#894)
Browse files Browse the repository at this point in the history 
- Clean up scss and styles; standardized spacing; use same header styles as the site
- Increase space efficiency -- removed whitespace, reduced number of visible entries
- Update styles and icons for the stat var hierarchy
- Some updates to titles / headers
- Some updates to chart display - button styling, chart size
@beets
beets authored Apr 22, 2021
1 parent 7327432 commit e733925
Showing 13 changed files with 377 additions and 229 deletions.
205 changes: 159 additions & 46 deletions static/css/browser.scss
View file
Original file line number Diff line number Diff line change
@@ -17,18 +17,21 @@
@import 'base';
@import 'draw';

.browser-page-header {
margin: 20px 0;
}
$vertical-spacing: 15px;
$horizontal-spacing: 15px;
$result-background: #f0f0f0;
$border-radius: 3px;

.browser-header-title {
color: #666;
font-size: 1.5rem;
.browser-page-header {
font-size: 1.6rem;
font-weight: 700;
}

.browser-header-subtitle {
color: #666;
color: var(--secondary);
font-size: 1rem;
font-weight: 600;
line-height: 1.2rem;
}

.node-table {
@@ -38,20 +41,23 @@
width: 100%;
}

.node-table tr:nth-child(even) {
background-color: #f0f0f0;
.node-table tr:nth-child(odd) {
background-color: $result-background;
}

.node-table tr.vertical-padding {
background-color: #fff;
.node-table th,
.node-table td {
padding: 8px 12px;
}

.node-table td {
padding: 8px;
.node-table .property-column,
.node-table tr > td:last-of-type,
.node-table tr > th:last-of-type {
width: 25%;
}

.node-table tr.vertical-padding td {
padding: 8px 0;
.observations-table .node-table tr > td:last-of-type {
width: 70%;
}

.node-table li {
@@ -63,20 +69,46 @@
vertical-align: top;
}

.expando {
cursor: pointer;
float: right;
}

.expando:hover {
text-decoration: underline;
}

.expando .material-icons {
font-size: 1rem;
vertical-align: middle;
}

.expando span {
line-height: 1;
vertical-align: middle;
}

th a,
td a {
word-wrap: break-word;
}

.card {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
padding: 7px 15px;
margin: 12px 0;
position: relative;
border-radius: $border-radius;
border: .5px solid #dee2e6;
margin: $vertical-spacing 0;
overflow: hidden;
padding: $vertical-spacing;
position: relative;
}

.browser-in-arc-section .card {
margin: $vertical-spacing 0 2*$vertical-spacing;
}

.arc-group-title {
margin-top: 15px;
margin: $vertical-spacing $horizontal-spacing;
font-size: 1rem;
}

.hide-dots .dot {
@@ -100,7 +132,7 @@ td a {
}

.in-arc-table {
max-height: 19em;
max-height: 12.6em;
overflow-y: scroll;
}

@@ -118,8 +150,11 @@ td a {
}

.error-message {
font-size: 14px;
color: var(--dc-red-lite);
color: #721c24;
font-size: .9rem;
padding: $vertical-spacing $horizontal-spacing;
border-radius: $border-radius;
background: #f8d7da;
}

.legend {
@@ -131,47 +166,83 @@ td a {
}

.svg-node-child {
margin-left: 1rem;
margin-left: 20px;
}

.stat-var-hierarchy-container {
min-height: 20rem;
font-size: 0.9rem;
font-size: .95rem;
padding: $vertical-spacing $horizontal-spacing;
line-height: 1.8rem;
}

.statvar-hierarchy-search-section {
position: relative;
margin-bottom: 1rem;
margin-top: 1rem;
margin-bottom: $vertical-spacing;
}

.stat-var-hierarchy-container .material-icons {
font-size: 18px;
vertical-align: middle;
}

.stat-var-hierarchy-container .bullet {
margin: 0 5px;
}

.stat-var-hierarchy-container .title {
padding-left: 5.5px;
vertical-align: middle;
}

.node-title .material-icons + .title {
font-size: 1rem;
font-weight: 600;
line-height: 2rem;
}

.statvar-hierarchy-search-results {
position: absolute;
max-height: 15rem;
background-color: white;
width: 100%;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
border-radius: 8px;
border-style: solid;
border-color: var(--dc-gray-lite);
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
border-radius: $border-radius;
border: 1px solid var(--gray);
border-top: none;
overflow-y: scroll;
z-index: 2;
}

.statvar-search-input {
border-radius: $border-radius;
color: inherit;
width: 100%;
border-radius: 6px;
}

.clear-search {
position: absolute;
right: 0.3rem;
top: 0.1rem;
top: 0.7rem;
cursor: pointer;
}

.statvar-search-input:focus {
border-color: var(--gray);
}

.no-results-message,
.search-results-heading,
.search-result-value {
padding: 0.1rem 0.4rem;
padding: 0.4rem $horizontal-spacing;
line-height: 1.5;
}

.search-results-heading {
background-color: #f0f0f0;
font-size: 1rem;
margin-bottom: 0;
line-height: 1.8;
}

.search-result-value:hover {
@@ -189,16 +260,51 @@ td a {
}

.statvars-charts-section {
margin-left: 1rem;
margin-left: 24px;
padding: $vertical-spacing;
background: $result-background;
border-radius: $border-radius;
margin-bottom: (-$vertical-spacing);
}

.search-results-heading {
background-color: #f0f0f0;
padding: 0.1rem 0.2rem;
.stat-var-link {
font-size: .9rem;
}

.stat-var-link {
padding-top: 0.2rem;
.stat-var-link .material-icons {
padding-left: .5rem;
}

#observation-chart-section {
margin-bottom: (-$vertical-spacing);
}

.chart-toggle {
background: #fff !important;
border: 1px solid var(--dc-red-strong) !important;
color: var(--dc-red-strong) !important;
height: 2rem;
padding-bottom: 0;
padding-top: 0;
position: absolute;
right: $horizontal-spacing;
top: 10px;
}

.chart-toggle span,
.chart-toggle .material-icons {
line-height: 2rem;
padding-right: 4px;
vertical-align: middle;
}

.chart-toggle .material-icons {
font-size: 18px;
padding-right: 4px;
}

.chart-title {
min-height: 2.5rem;
}

.observations-table {
@@ -212,14 +318,21 @@ td a {
background-color: var(--dc-gray-lite);
}

.chart-section .metadata {
line-height: 1.5;
font-size: .9rem;
margin-bottom: 0;
}

.browser-page-section {
padding-top: 10px;
}

.browser-page-section h3 {
background: rgba(0, 0, 0, .05);
color: #222;
font-weight: 600;
border-radius: $border-radius;
font-size: 1.2rem;
margin: 1.5rem -1rem 1.5rem -1rem;
padding: 6px 12px;
border-radius: 3px;
margin: 10px (-$horizontal-spacing);
padding: 6px $horizontal-spacing;
}

#browser-screen {
77 changes: 49 additions & 28 deletions static/js/browser2/arc_table_row.tsx
View file
Original file line number Diff line number Diff line change
@@ -41,51 +41,72 @@ export class ArcTableRow extends React.Component<
ArcTableRowPropType,
ArcTableRowStateType
> {
showExpando: boolean;

constructor(props: ArcTableRowPropType) {
super(props);
this.state = {
expanded: false,
};
this.showExpando = this.props.values.length > NUM_VALUES_UNEXPANDED;
}

renderValue(value: ArcValue): JSX.Element {
return (
<div className="arc-text" key={value.text}>
{value.dcid ? (
<a href={HREF_PREFIX + value.dcid}>{value.text}</a>
) : (
<span>{value.text}</span>
)}
</div>
);
}

renderExpando(): JSX.Element {
if (!this.showExpando) {
return null;
}
if (this.state.expanded) {
return (
<div className="expando" onClick={this.showLess.bind(this)}>
<i className="material-icons">remove</i>
<span>Show less</span>
</div>
);
} else {
return (
<div className="expando" onClick={this.showMore.bind(this)}>
<i className="material-icons">add</i>
<span>Show more</span>
</div>
);
}
}

render(): JSX.Element {
const values = this.state.expanded
? this.props.values
: _.slice(this.props.values, 0, NUM_VALUES_UNEXPANDED);
const hasMoreValues = this.props.values.length > NUM_VALUES_UNEXPANDED;
return (
<tr>
<td className="property-column" width="25%">
<td className="property-column">
<a href={HREF_PREFIX + this.props.propertyLabel}>
{this.props.propertyLabel}
</a>
</td>
<td width="50%">
<td>
<div className="values-row">
{values.map((value) => {
return (
<div className="arc-text" key={value.text}>
{value.dcid ? (
<a href={HREF_PREFIX + value.dcid}>{value.text}</a>
) : (
<span>{value.text}</span>
)}
</div>
);
})}
{_.slice(this.props.values, 0, NUM_VALUES_UNEXPANDED).map(
(value) => {
return this.renderValue(value);
}
)}
{this.renderExpando()}
{this.state.expanded &&
_.slice(this.props.values, NUM_VALUES_UNEXPANDED).map((value) => {
return this.renderValue(value);
})}
</div>
{this.state.expanded ? (
<div className="clickable-text" onClick={this.showLess.bind(this)}>
Show less
</div>
) : null}
{hasMoreValues && !this.state.expanded ? (
<div className="clickable-text" onClick={this.showMore.bind(this)}>
Show more
</div>
) : null}
</td>
<td width="25%" className="provenance-column">
<td className="provenance-column">
{this.props.provenanceId && (
<a href={HREF_PREFIX + this.props.provenanceId}>{this.props.src}</a>
)}
52 changes: 23 additions & 29 deletions static/js/browser2/browser_page.tsx
View file
Original file line number Diff line number Diff line change
@@ -66,36 +66,30 @@ export class BrowserPage extends React.Component<
const arcDcid = this.getArcDcid();
return (
<>
<div className="browser-page-header">
{this.props.pageDisplayType === PageDisplayType.PLACE_STAT_VAR && (
<div className="browser-header-title">
Statistical Variable:
<a href={URL_PREFIX + this.props.statVarId}>
{" " + this.props.statVarId}
</a>
</div>
{this.props.pageDisplayType === PageDisplayType.PLACE_STAT_VAR && (
<h1 className="browser-page-header">
Statistical Variable:{" "}
<a href={URL_PREFIX + this.props.statVarId}>
{this.props.statVarId}
</a>
</h1>
)}
<h1 className="browser-page-header">
About:{" "}
{this.props.pageDisplayType === PageDisplayType.PLACE_STAT_VAR ? (
<a href={URL_PREFIX + this.props.dcid}>{this.props.nodeName}</a>
) : (
<>{this.props.nodeName}</>
)}
<div className="browser-header-title">
About:
{this.props.pageDisplayType === PageDisplayType.PLACE_STAT_VAR ? (
<a href={URL_PREFIX + this.props.dcid}>
{" " + this.props.nodeName}
</a>
) : (
<span>{" " + this.props.nodeName}</span>
)}
</div>
{this.props.pageDisplayType !== PageDisplayType.PLACE_STAT_VAR && (
<>
<div className="browser-header-subtitle">
{"dcid: " + this.props.dcid}
</div>
<div className="browser-header-subtitle">
{"typeOf: " + this.props.nodeType}
</div>
</>
)}
</div>
</h1>
{this.props.pageDisplayType !== PageDisplayType.PLACE_STAT_VAR && (
<>
<h2 className="browser-header-subtitle">dcid: {this.props.dcid}</h2>
<h2 className="browser-header-subtitle">
typeOf: {this.props.nodeType}
</h2>
</>
)}
<div id="node-content">
<ArcSection
dcid={arcDcid}
17 changes: 17 additions & 0 deletions static/js/browser2/constants.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/**
* Copyright 2020 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

export const URI_PREFIX = "/browser/";
14 changes: 5 additions & 9 deletions static/js/browser2/in_arc_subsection.tsx
View file
Original file line number Diff line number Diff line change
@@ -50,15 +50,11 @@ export class InArcSubsection extends React.Component<InArcSubsectionPropType> {
}
});
return (
<div className="card">
<div id={this.props.parentType} className="arc-group-title">
<strong>
<span>
<span className="mp">{this.props.parentType}</span> of{" "}
{this.props.nodeName}
</span>
</strong>
</div>
<div className="card p-0">
<h4 id={this.props.parentType} className="arc-group-title">
<span className="mp">{this.props.parentType}</span> of{" "}
{this.props.nodeName}
</h4>
<div className="in-arc-table">
<table className="node-table">
<tbody>
125 changes: 63 additions & 62 deletions static/js/browser2/observation_chart.tsx
View file
Original file line number Diff line number Diff line change
@@ -24,12 +24,11 @@ import { DataGroup, DataPoint } from "../chart/base";
import { drawLineChart } from "../chart/draw";
import { getUnit, SourceSeries } from "./util";
import { randDomId } from "../shared/util";
import { URI_PREFIX } from "./constants";

// Chart size
const WIDTH = 500;
const HEIGHT = 250;
const HEIGHT = 220;

const URI_PREFIX = "/browser/";
// Only show dots when there's only a single data point
const MAX_DOTS = 1;
const NO_OBSDCID_ERROR_MESSAGE =
@@ -59,6 +58,7 @@ export class ObservationChart extends React.Component<
private sortedDates: string[] = Object.keys(
this.props.sourceSeries.val
).sort();
private svgContainerRef: React.RefObject<HTMLDivElement>;

constructor(props: ObservationChartPropType) {
super(props);
@@ -68,6 +68,7 @@ export class ObservationChart extends React.Component<
};
this.chartId = randDomId();
this.chartContainerId = this.chartId + "container";
this.svgContainerRef = React.createRef();
}

componentDidMount(): void {
@@ -87,74 +88,73 @@ export class ObservationChart extends React.Component<
const unit = getUnit(this.props.sourceSeries);
return (
<>
<div>
<button
className="btn btn-sm btn-light chart-toggle"
onClick={() =>
this.setState({ showTableView: !this.state.showTableView })
}
>
<i className="material-icons">
{this.state.showTableView ? "show_chart" : "table_view"}
</i>
<span
className="clickable-text"
onClick={() =>
this.setState({ showTableView: !this.state.showTableView })
}
>
{this.state.showTableView ? "show chart" : "show table"}
</span>
</div>
<div id={this.chartContainerId} style={{ position: "relative" }}>
<div style={{ display: tableVisibility }}>
<div className="observations-table">
<table className="node-table">
<tbody>
<tr key="header">
<td width="40%">
<strong>Date</strong>
</td>
<td width="60%">
<strong>
{this.props.statVarName
? this.props.statVarName
: this.props.statVarId}
</strong>
</td>
</tr>
{this.sortedDates.map((date) => {
if (date in this.props.sourceSeries.val) {
return (
<tr
className={obsTableRowClass}
key={date}
onClick={() => this.redirectToObsPage(date)}
>
<td width="50%">{date}</td>
<td width="50%">
<div
<span>{this.state.showTableView ? "show chart" : "show table"}</span>
</button>
<div className="observation-chart">
<div id={this.chartContainerId} style={{ position: "relative" }}>
<div style={{ display: tableVisibility }}>
<div className="observations-table card p-0">
<table className="node-table">
<tbody>
<tr key="header">
<td>
<strong>Date</strong>
</td>
<td>
<strong>
{this.props.statVarName
? this.props.statVarName
: this.props.statVarId}
</strong>
</td>
</tr>
{this.sortedDates.map((date) => {
if (date in this.props.sourceSeries.val) {
return (
<tr
className={obsTableRowClass}
key={date}
onClick={() => this.redirectToObsPage(date)}
>
<td>{date}</td>
<td
className={
this.props.canClickObs ? "clickable-text" : ""
this.props.canClickObs && "clickable-text"
}
>
{this.props.sourceSeries.val[date] + unit}
</div>
</td>
</tr>
);
}
})}
</tbody>
</table>
</td>
</tr>
);
}
})}
</tbody>
</table>
</div>
</div>
<div
id={this.chartId}
className={svgContainerClass}
style={{ display: chartVisibility }}
ref={this.svgContainerRef}
/>
<div id="screen" className="screen">
<div id="spinner"></div>
</div>
</div>
<div
id={this.chartId}
className={svgContainerClass}
style={{ display: chartVisibility }}
/>
<div id="screen" className="screen">
<div id="spinner"></div>
</div>
{this.state.errorMessage ? (
<div className="error-message">{this.state.errorMessage}</div>
) : null}
</div>
{this.state.errorMessage ? (
<div className="error-message">{this.state.errorMessage}</div>
) : null}
</>
);
}
@@ -170,9 +170,10 @@ export class ObservationChart extends React.Component<
});
});
const dataGroups = [new DataGroup("", data)];
const boundingRect = this.svgContainerRef.current.getBoundingClientRect();
drawLineChart(
this.chartId,
WIDTH,
boundingRect.width,
HEIGHT,
dataGroups,
true,
36 changes: 23 additions & 13 deletions static/js/browser2/observation_chart_section.tsx
View file
Original file line number Diff line number Diff line change
@@ -24,6 +24,7 @@ import _ from "lodash";
import { ObservationChart } from "./observation_chart";
import { getUnit, loadSpinner, removeSpinner, SourceSeries } from "./util";
import { randDomId } from "../shared/util";
import { URI_PREFIX } from "./constants";

const NO_MMETHOD_KEY = "no_mmethod";
const NO_OBSPERIOD_KEY = "no_obsPeriod";
@@ -71,7 +72,10 @@ export class ObservationChartSection extends React.Component<

render(): JSX.Element {
return (
<div id={this.containerId} className="loading-spinner-container">
<div
id={this.containerId}
className="loading-spinner-container chart-section"
>
{!_.isEmpty(this.state.errorMessage) && (
<div id={"error-message"}>{this.state.errorMessage}</div>
)}
@@ -93,17 +97,17 @@ export class ObservationChartSection extends React.Component<
return (
<div className="card" key={this.props.statVarId + index}>
<div className="chart-title">
<div>
{sourceSeries.measurementMethod
? "measurementMethod: " + sourceSeries.measurementMethod
: null}
</div>
<div>
{sourceSeries.observationPeriod
? "observationPeriod: " + sourceSeries.observationPeriod
: null}
</div>
<div>{unit ? "unit: " + unit : null}</div>
{sourceSeries.measurementMethod && (
<p className="metadata">
measurementMethod: {sourceSeries.measurementMethod}
</p>
)}
{sourceSeries.observationPeriod && (
<p className="metadata">
observationPeriod: {sourceSeries.observationPeriod}
</p>
)}
{unit && <p className="metadata">unit: {unit}</p>}
</div>
<ObservationChart
sourceSeries={sourceSeries}
@@ -114,7 +118,9 @@ export class ObservationChartSection extends React.Component<
statVarName={this.props.statVarName}
dateToDcid={dateToDcid}
/>
<div>{"provenance: " + sourceSeries.provenanceDomain}</div>
<p className="metadata">
provenance: {sourceSeries.provenanceDomain}
</p>
</div>
);
})}
@@ -173,4 +179,8 @@ export class ObservationChartSection extends React.Component<
});
});
}

private placeStatVarUri(): string {
return `${URI_PREFIX}${this.props.placeDcid}?statVar=${this.props.statVarId}`;
}
}
14 changes: 4 additions & 10 deletions static/js/browser2/out_arc_section.tsx
View file
Original file line number Diff line number Diff line change
@@ -90,19 +90,13 @@ export class OutArcSection extends React.Component<
const predicates = Object.keys(this.state.data);
predicates.sort(this.predicateComparator);
return (
<div className="card">
<div className="card p-0">
<table className="node-table">
<tbody>
<tr key="header">
<td className="property-column" width="25%">
<strong>Property</strong>
</td>
<td width="50%">
<strong>Value</strong>
</td>
<td width="25%">
<strong>Provenance</strong>
</td>
<th className="property-column">Property</th>
<th>Value</th>
<th>Provenance</th>
</tr>
<ArcTableRow
key={DCID_PREDICATE}
6 changes: 3 additions & 3 deletions static/js/browser2/statvar_group_node.tsx
View file
Original file line number Diff line number Diff line change
@@ -29,9 +29,9 @@ import {
import { StatVarNode } from "./statvar_node";

const SCROLL_DELAY = 400;
const BULLET_POINT_HTML = <span>&#8226;</span>;
const DOWN_ARROW_HTML = <span>&#x25BC;</span>;
const RIGHT_ARROW_HTML = <span>&#x25BA;</span>;
const BULLET_POINT_HTML = <span className="bullet">&#8226;</span>;
const DOWN_ARROW_HTML = <i className="material-icons">remove</i>;
const RIGHT_ARROW_HTML = <i className="material-icons">add</i>;

interface StatVarGroupNodePropType {
// the dcid of the node of the current browser page
6 changes: 4 additions & 2 deletions static/js/browser2/statvar_hierarchy.tsx
View file
Original file line number Diff line number Diff line change
@@ -83,8 +83,10 @@ export class StatVarHierarchy extends React.Component<
});
return (
<div className="browser-page-section" id="stat-var-hierarchy-section">
<h3>Stat Var Hierarchy</h3>
<div className="error-message">{this.state.errorMessage}</div>
<h3>Statistical Variables</h3>
{!_.isEmpty(this.state.errorMessage) && (
<div className="error-message">{this.state.errorMessage}</div>
)}
{!_.isEmpty(this.state.statVars) && (
<div className="stat-var-hierarchy-container card">
<StatVarHierarchySearch
14 changes: 9 additions & 5 deletions static/js/browser2/statvar_hierarchy_search.tsx
View file
Original file line number Diff line number Diff line change
@@ -66,11 +66,11 @@ export class StatVarHierarchySearch extends React.Component<
<div className="statvar-hierarchy-search-section">
<div className="search-input-container"></div>
<input
className="statvar-search-input"
className="statvar-search-input form-control"
type="text"
value={this.state.query}
onChange={this.onInputChanged}
placeholder="Filter"
placeholder="Filter Statistical Variables"
onBlur={() => this.setState({ showNoResultsMessage: false })}
/>
<span
@@ -83,7 +83,9 @@ export class StatVarHierarchySearch extends React.Component<
<div className="statvar-hierarchy-search-results">
{!_.isEmpty(this.state.svgResults) && (
<div className="svg-search-results">
<div className="search-results-heading">Stat Var Groups</div>
<h5 className="search-results-heading">
Statistical Variable Groups
</h5>
{this.state.svgResults.map((svg) => {
return (
<div
@@ -98,8 +100,10 @@ export class StatVarHierarchySearch extends React.Component<
</div>
)}
{!_.isEmpty(this.state.svResults) && (
<div className="sv-search-rsults">
<div className="search-results-heading">Stat Vars</div>
<div className="sv-search-results">
<h5 className="search-results-heading">
Statistical Variables
</h5>
{this.state.svResults.map((sv) => {
return (
<div
27 changes: 8 additions & 19 deletions static/js/browser2/statvar_node.tsx
View file
Original file line number Diff line number Diff line change
@@ -23,8 +23,7 @@ import { StatVarNodeType, StatVarHierarchyNodeType } from "./util";
import { StatVarHierarchyNodeHeader } from "./statvar_group_node";
import Collapsible from "react-collapsible";
import { ObservationChartSection } from "./observation_chart_section";

const URI_PREFIX = "/browser/";
import { URI_PREFIX } from "./constants";

interface StatVarNodePropType {
placeDcid: string;
@@ -65,24 +64,14 @@ export class StatVarNode extends React.Component<
>
{this.state.renderContent && (
<div className="statvars-charts-section">
<div className="stat-var-link">
<span>Statistical Variable: </span>
<span
className="clickable-text"
onClick={this.onClickStatVarLink}
>
{this.props.statVar.id}
</span>
</div>
<div className="place-stat-var-link">
<span>Place Stat Var Page: </span>
<span
className="clickable-text"
onClick={this.onClickPlaceStatVarLink}
<h5 className="stat-var-link">
<a
href={`${URI_PREFIX}${this.props.placeDcid}?statVar=${this.props.statVar.id}`}
>
{`${this.props.statVar.id} in ${this.props.nodeName}`}
</span>
</div>
{this.props.statVar.id} for {this.props.nodeName}
<span className="material-icons">open_in_new</span>
</a>
</h5>
<ObservationChartSection
placeDcid={this.props.placeDcid}
statVarId={this.props.statVar.id}
13 changes: 10 additions & 3 deletions static/js/browser2/weather_chart_section.tsx
View file
Original file line number Diff line number Diff line change
@@ -64,7 +64,10 @@ export class WeatherChartSection extends React.Component<
return <div className="error-message">{this.state.errorMessage}</div>;
}
return (
<div id={LOADING_CONTAINER_ID} className="loading-spinner-container">
<div
id={LOADING_CONTAINER_ID}
className="loading-spinner-container chart-section"
>
{Object.keys(this.state.data).map((measuredProperty, index) => {
const unit = getUnit(this.state.data[measuredProperty]);
let title = measuredProperty;
@@ -74,7 +77,9 @@ export class WeatherChartSection extends React.Component<
const sourceSeries = this.state.data[measuredProperty];
return (
<div className="card" key={measuredProperty}>
<div className="chart-title">{title}</div>
<div className="chart-title">
<p className="metadata">{title}</p>
</div>
<ObservationChart
sourceSeries={sourceSeries}
idx={index}
@@ -83,7 +88,9 @@ export class WeatherChartSection extends React.Component<
canClickObs={false}
/>
{!_.isEmpty(sourceSeries.provenanceDomain) && (
<div>{"provenance: " + sourceSeries.provenanceDomain}</div>
<p className="metadata">
provenance: {sourceSeries.provenanceDomain}
</p>
)}
</div>
);

0 comments on commit e733925

Please sign in to comment.