From b8aaa951d310dc52ff16b0511ca81c2acdedbb9a Mon Sep 17 00:00:00 2001 From: Matt Fisher Date: Wed, 6 Mar 2024 15:29:52 -0700 Subject: [PATCH 1/5] Prevent the subregion collection selector options from line breaking --- .../SubRegionExplorer/SubRegionCollectionSelector/index.tsx | 2 +- src/style/SubRegionCollectionSelector.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ControlPanel/RegionSelector/SubRegionExplorer/SubRegionCollectionSelector/index.tsx b/src/components/ControlPanel/RegionSelector/SubRegionExplorer/SubRegionCollectionSelector/index.tsx index 1b63d69..6452f74 100644 --- a/src/components/ControlPanel/RegionSelector/SubRegionExplorer/SubRegionCollectionSelector/index.tsx +++ b/src/components/ControlPanel/RegionSelector/SubRegionExplorer/SubRegionCollectionSelector/index.tsx @@ -69,7 +69,7 @@ const SubRegionCollectionSelector: React.FC = (pro return ( <> -
+
{subRegionCollectionOptions}
{ diff --git a/src/style/SubRegionCollectionSelector.css b/src/style/SubRegionCollectionSelector.css index e2313ca..8930002 100644 --- a/src/style/SubRegionCollectionSelector.css +++ b/src/style/SubRegionCollectionSelector.css @@ -1,5 +1,6 @@ #SubRegionCollectionSelector { white-space: nowrap; + width: min-content; } .sub-region-collection-option { display: inline-block; From 37fad147eb65c07996f289a04424373bf86ec8c3 Mon Sep 17 00:00:00 2001 From: Matt Fisher Date: Wed, 6 Mar 2024 16:02:43 -0700 Subject: [PATCH 2/5] Generate uniform titles for maps and plots --- src/components/MainWindow/LinePlot.tsx | 12 ++---------- src/components/MainWindow/Tile.tsx | 10 ++++++++++ src/style/Tile.css | 16 ++++++++++++++++ 3 files changed, 28 insertions(+), 10 deletions(-) diff --git a/src/components/MainWindow/LinePlot.tsx b/src/components/MainWindow/LinePlot.tsx index fb418bf..e4c318e 100644 --- a/src/components/MainWindow/LinePlot.tsx +++ b/src/components/MainWindow/LinePlot.tsx @@ -52,7 +52,6 @@ const LinePlot: React.FC = (props) => { ); } - const chartTitle = `${regionLongname} - ${varLongname}`; const yAxisTitle = props.selectedSatelliteVariable.labelPlotYaxis; // WARNING: It is _critical_ that the data is copied before passing to @@ -137,11 +136,9 @@ const LinePlot: React.FC = (props) => { }, ]; - const ytdSeriesLastNonNullPoint = ytdSeries.filter(p => p[1] !== null).slice(-1)[0]; - const ytdSeriesLastDate = new Date(ytdSeriesLastNonNullPoint[0]); const chartOptions: Highcharts.Options = { chart: { - height: '95%', + height: '90%', type: 'line', }, accessibility: { @@ -149,12 +146,7 @@ const LinePlot: React.FC = (props) => { description: `${varLongname} plotted over the current water year.`, }, title: { - text: chartTitle, - style: {fontSize: '20px'}, - }, - subtitle: { - text: `As of ${ytdSeriesLastDate.toISOString().split('T')[0]}`, - style: {fontSize: '16px'}, + text: undefined, }, tooltip: { shared: true, diff --git a/src/components/MainWindow/Tile.tsx b/src/components/MainWindow/Tile.tsx index aa84296..ea920a9 100644 --- a/src/components/MainWindow/Tile.tsx +++ b/src/components/MainWindow/Tile.tsx @@ -68,6 +68,16 @@ const Tile: React.FC = (props) => { FallbackComponent={ErrorFallbackTileComponent} resetKeys={[selectedTileType, selectedRegion, selectedSatelliteVariableId]} > +
+

{selectedTileType == "map" ? selectedSatelliteVariable.longName : selectedSatelliteVariable.longNamePlot}

+

{selectedRegion.longName} as of {selectedSatelliteVariable.lastDateWithData}

+

+ Climatology calculated over{' '} + {selectedSatelliteVariable.historicWaterYearRange[0]} + {' '}to{' '} + {selectedSatelliteVariable.historicWaterYearRange[1]} +

+
}> {content} diff --git a/src/style/Tile.css b/src/style/Tile.css index 8e76445..a1c4dca 100644 --- a/src/style/Tile.css +++ b/src/style/Tile.css @@ -10,7 +10,23 @@ flex-direction: column; } +.tile-title h1, .tile-title h2, .tile-title h3 { + text-align: center; + line-height: 1em; + margin: 0; +} +.tile-title h1 { + font-size: 1.5em; +} +.tile-title h2 { + font-size: 1.3em; +} +.tile-title h3 { + font-size: 1em; +} + .tile-citation { + /* line-height */ font-size: 14px; background: white; } From e9197318509477b6cfd645f67a10d5bcd3224bb4 Mon Sep 17 00:00:00 2001 From: Matt Fisher Date: Wed, 6 Mar 2024 16:19:08 -0700 Subject: [PATCH 3/5] Update citation text and appearance per mock-up See: https://github.com/nsidc/snow-today-webapp/issues/57 --- src/components/MainWindow/LinePlot.tsx | 2 +- src/components/MainWindow/Tile.tsx | 4 ++++ src/constants/citation.ts | 12 +++++++----- src/style/Tile.css | 5 +++-- 4 files changed, 15 insertions(+), 8 deletions(-) diff --git a/src/components/MainWindow/LinePlot.tsx b/src/components/MainWindow/LinePlot.tsx index e4c318e..249809b 100644 --- a/src/components/MainWindow/LinePlot.tsx +++ b/src/components/MainWindow/LinePlot.tsx @@ -138,7 +138,7 @@ const LinePlot: React.FC = (props) => { const chartOptions: Highcharts.Options = { chart: { - height: '90%', + height: '88%', type: 'line', }, accessibility: { diff --git a/src/components/MainWindow/Tile.tsx b/src/components/MainWindow/Tile.tsx index ea920a9..85c2776 100644 --- a/src/components/MainWindow/Tile.tsx +++ b/src/components/MainWindow/Tile.tsx @@ -78,11 +78,15 @@ const Tile: React.FC = (props) => { {selectedSatelliteVariable.historicWaterYearRange[1]}
+ }> {content} +
{CITATION} +
+ {`Data source: ${selectedSatelliteVariable.sensor}/${selectedSatelliteVariable.platform}/${selectedSatelliteVariable.algorithm}`}
diff --git a/src/constants/citation.ts b/src/constants/citation.ts index afaef21..5e778f4 100644 --- a/src/constants/citation.ts +++ b/src/constants/citation.ts @@ -1,5 +1,7 @@ -export const CITATION = ( - 'Rittger, K., Brodzik, M.J., & Raleigh, M. (2022).' - + ' Snow Today. Boulder, Colorado USA.' - + ' National Snow and Ice Data Center.' -); +const authors = "Rittger, K., Lenard, S.J.P., Palomaki, R.T."; +const year = (new Date()).getFullYear(); +const projectText = "Snow Today" +const locationText = "Boulder, Colorado USA"; +const orgText = "National Snow and Ice Data Center"; + +export const CITATION = `${authors} (${year}). ${projectText}. ${locationText}. ${orgText}.`; diff --git a/src/style/Tile.css b/src/style/Tile.css index a1c4dca..b70f039 100644 --- a/src/style/Tile.css +++ b/src/style/Tile.css @@ -26,11 +26,12 @@ } .tile-citation { - /* line-height */ font-size: 14px; - background: white; + line-height: 1em; + text-align: center; } +/* TODO: Remove? */ .tile-message { margin: 20px; } From 027d1eea9dc998159ea626a9a78e5c510e78d201 Mon Sep 17 00:00:00 2001 From: Matt Fisher Date: Wed, 6 Mar 2024 16:20:21 -0700 Subject: [PATCH 4/5] CHANGELOG --- CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3ac7025..22cc062 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +# v0.18.0 (2024-03-06) + +* Prevent sub-region collection selector options from line breaking. +* Display uniform titles for maps and plots. +* Update citation text for maps and plots. + + # v0.17.0 (2024-03-06) * Display sensor/platform/algorithm in variable selectors. From ff91c0f35fe327cd4f1cef4c513085706257e5e1 Mon Sep 17 00:00:00 2001 From: Matt Fisher Date: Wed, 6 Mar 2024 16:21:47 -0700 Subject: [PATCH 5/5] Fix linter error --- src/components/MainWindow/Tile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MainWindow/Tile.tsx b/src/components/MainWindow/Tile.tsx index 85c2776..878f5ac 100644 --- a/src/components/MainWindow/Tile.tsx +++ b/src/components/MainWindow/Tile.tsx @@ -69,7 +69,7 @@ const Tile: React.FC = (props) => { resetKeys={[selectedTileType, selectedRegion, selectedSatelliteVariableId]} >
-

{selectedTileType == "map" ? selectedSatelliteVariable.longName : selectedSatelliteVariable.longNamePlot}

+

{selectedTileType === "map" ? selectedSatelliteVariable.longName : selectedSatelliteVariable.longNamePlot}

{selectedRegion.longName} as of {selectedSatelliteVariable.lastDateWithData}

Climatology calculated over{' '}