Merge pull request #68 from nsidc/user-interface-enhancements

User interface adjustments

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.

src/components/ControlPanel/RegionSelector/SubRegionExplorer/SubRegionCollectionSelector/index.tsx

@@ -69,7 +69,7 @@ const SubRegionCollectionSelector: React.FC<ISubRegionCollectionSelector> = (pro
 
   return (
     <>
-      <div className={'SubRegionCollectionSelector'}>
+      <div id={'SubRegionCollectionSelector'}>
         {subRegionCollectionOptions}
       </div>
       {

src/components/MainWindow/LinePlot.tsx

@@ -52,7 +52,6 @@ const LinePlot: React.FC<ILinePlotProps> = (props) => {
     );
   }
 
-  const chartTitle = `${regionLongname} - ${varLongname}`;
   const yAxisTitle = props.selectedSatelliteVariable.labelPlotYaxis;
 
   // WARNING: It is _critical_ that the data is copied before passing to
@@ -137,24 +136,17 @@ const LinePlot: React.FC<ILinePlotProps> = (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: '88%',
       type: 'line',
     },
     accessibility: {
       // TODO: Add units text
       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,

src/components/MainWindow/Tile.tsx

@@ -68,11 +68,25 @@ const Tile: React.FC<ITileProps> = (props) => {
         FallbackComponent={ErrorFallbackTileComponent}
         resetKeys={[selectedTileType, selectedRegion, selectedSatelliteVariableId]}
       >
+        <div className='tile-title'>
+          <h1><b>{selectedTileType === "map" ? selectedSatelliteVariable.longName : selectedSatelliteVariable.longNamePlot}</b></h1>
+          <h2><b>{selectedRegion.longName}</b> as of <b>{selectedSatelliteVariable.lastDateWithData}</b></h2>
+          <h3>
+            Climatology calculated over{' '}
+            <b>{selectedSatelliteVariable.historicWaterYearRange[0]}</b>
+            {' '}to{' '}
+            <b>{selectedSatelliteVariable.historicWaterYearRange[1]}</b>
+          </h3>
+        </div>
+
         <Suspense fallback={<LoadingIcon size={200} />}>
           {content}
         </Suspense>
+
         <div className='tile-citation'>
           {CITATION}
+          <br/>
+          {`Data source: ${selectedSatelliteVariable.sensor}/${selectedSatelliteVariable.platform}/${selectedSatelliteVariable.algorithm}`}
         </div>
       </ErrorBoundary>
     </div>

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}.`;

src/style/SubRegionCollectionSelector.css

@@ -1,5 +1,6 @@
 #SubRegionCollectionSelector {
   white-space: nowrap;
+  width: min-content;
 }
 .sub-region-collection-option {
   display: inline-block;

src/style/Tile.css

@@ -10,11 +10,28 @@
   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 {
   font-size: 14px;
-  background: white;
+  line-height: 1em;
+  text-align: center;
 }
 
+/* TODO: Remove? */
 .tile-message {
   margin: 20px;
 }