Make Maps tab work with new arrangement

pacificclimate · Jun 30, 2020 · 801cff0 · 801cff0
1 parent e644a5c
commit 801cff0
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 95 deletions.
diff --git a/public/external-text/default.yaml b/public/external-text/default.yaml
@@ -1,6 +1,6 @@
 app:
   tabs:
-    default: graphs
+    default: maps
 
 selectors:
   prologue: |
@@ -252,86 +252,102 @@ tabs:
       title: "#### Projected: ${$$.components.period}"
     colourScale:
       label: |
-        ${id === 'prsn' || id === 'pr' ? 'Average' : ''} ${label} (${units})
+        ${id === 'prsn' || id === 'pr' ? 'Average' : ''} ${label} (${unitsSpec.label})
       note: |
         ${logscale ? $$.tabs.maps.colourScale.logscaleNote : ''} This colour scale applies to both maps.
       logscaleNote: |
         *This colour scale is logarithmic.
         A logarithmic scale cannot include zero values;
         these are mapped to the below-minimum colour.* <br/>
-    displaySpec:
-      # Organized by variable.
+    config:
+      variables:
       # NB: range and tick values are in *display* units.
-      fallback:
-        palette: seq-Oranges
-        logscale: false
-        belowMinColor: white
-        aboveMaxColor: black
-        range:
-          min: -50
-          max: 50
-        ticks: [-50, 0, 50]
-      ffd:
-        palette: x-Occam
-        range:
-          min: 0
-          max: 366
-        ticks: [0, 100, 200, 300, 365]
-      gdd:
-        palette: x-Occam
-        range:
-          min: 0
-          max: 4000
-        ticks: [0, 1000, 2000, 3000, 4000]
-      hdd:
-        palette: x-Occam
-        range:
-          min: 0
-          max: 10000
-        ticks: [0, 2000, 4000, 6000, 8000, 10000]
-      cdd:
-        palette: x-Occam
-        range:
-          min: 0
-          max: 1000
-        ticks: [0, 250, 500, 750, 1000]
-      pr:
-        palette: x-Occam
-  #      palette: seq-Greens
-        logscale: true
-        belowMinColor: white
-        aboveMaxColor: black
-        # NB: units mm/month
-        range:
-          min: 10
-          max: 500
-        ticks: [10, 20, 40, 80, 100, 200, 400, 800, 500]
-      prsn:
-        palette: x-Occam
-        logscale: true
-        # NB: units mm/month
-        range:
-          min: 10
-          max: 200
-        ticks: [10, 20, 40, 80, 100, 200]
-      tasmax:
-        palette: x-Occam
-        range:
-          min: -40
-          max: 40
-        ticks: [-40, -30, -20, -10, 0, 10, 20, 30, 40]
-      tasmin:
-        palette: x-Occam
-        range:
-          min: -40
-          max: 40
-        ticks: [-40, -30, -20, -10, 0, 10, 20, 30, 40]
-      tasmean:
-        palette: x-Occam
-        range:
-          min: -40
-          max: 40
-        ticks: [-40, -30, -20, -10, 0, 10, 20, 30, 40]
+      # TODO: Remove fallback
+        fallback:
+          palette: seq-Oranges
+          logscale: false
+          belowMinColor: white
+          aboveMaxColor: black
+          range:
+            min: -50
+            max: 50
+          ticks: [-50, 0, 50]
+        ffd:
+          display: absolute
+          displayUnits: days
+          palette: x-Occam
+          range:
+            min: 0
+            max: 366
+          ticks: [0, 100, 200, 300, 365]
+        gdd:
+          display: absolute
+          displayUnits: degree-days
+          palette: x-Occam
+          range:
+            min: 0
+            max: 4000
+          ticks: [0, 1000, 2000, 3000, 4000]
+        hdd:
+          display: absolute
+          displayUnits: degree-days
+          palette: x-Occam
+          range:
+            min: 0
+            max: 10000
+          ticks: [0, 2000, 4000, 6000, 8000, 10000]
+        cdd:
+          display: absolute
+          displayUnits: degree-days
+          palette: x-Occam
+          range:
+            min: 0
+            max: 1000
+          ticks: [0, 250, 500, 750, 1000]
+        pr:
+          display: absolute
+          displayUnits: mm/month
+          palette: x-Occam
+          logscale: true
+          belowMinColor: white
+          aboveMaxColor: black
+          # NB: units mm/month
+          range:
+            min: 10
+            max: 500
+          ticks: [10, 20, 40, 80, 100, 200, 400, 800, 500]
+        prsn:
+          display: absolute
+          displayUnits: mm/month
+          palette: x-Occam
+          logscale: true
+          # NB: units mm/month
+          range:
+            min: 10
+            max: 200
+          ticks: [10, 20, 40, 80, 100, 200]
+        tasmax:
+          display: absolute
+          displayUnits: °C
+          palette: x-Occam
+          range:
+            min: -40
+            max: 40
+          ticks: [-40, -30, -20, -10, 0, 10, 20, 30, 40]
+        tasmin:
+          palette: x-Occam
+          range:
+            min: -40
+            max: 40
+          ticks: [-40, -30, -20, -10, 0, 10, 20, 30, 40]
+        tasmean:
+          display: absolute
+          displayUnits: °C
+          palette: x-Occam
+          range:
+            min: -40
+            max: 40
+          ticks: [-40, -30, -20, -10, 0, 10, 20, 30, 40]
 
   graphs:
     disabled: false

diff --git a/src/components/app-root/MapsTabBody/MapsTabBody.js b/src/components/app-root/MapsTabBody/MapsTabBody.js
@@ -34,6 +34,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Row, Col } from 'react-bootstrap';
 import Loader from 'react-loader';
+import merge from 'lodash/fp/merge';
 import T from '../../../temporary/external-text';
 import DataMap from '../../maps/DataMap';
 import BCBaseMap from '../../maps/BCBaseMap';
@@ -44,6 +45,7 @@ import { getVariableInfo, } from '../../../utils/variables-and-units';
 import Button from 'react-bootstrap/Button';
 import StaticControl from '../../maps/StaticControl';
 import { allDefined } from '../../../utils/lodash-fp-extras';
+import { collectionToCanonicalUnitsSpecs } from '../../../utils/units';
 
 
 export default class MapsTabBody extends React.Component {
@@ -116,9 +118,25 @@ export default class MapsTabBody extends React.Component {
 
     const variableRep = variable.representative;
     const variableId = variableRep.variable_id;
-    const variableConfig = this.getConfig('variables');
-    const displaySpec = this.getConfig('tabs.maps.displaySpec');
-    const logscale = wmsLogscale(displaySpec, variableRep);
+
+    const mapsConfig = this.getConfig('tabs.maps.config');
+    const variableConfig = merge(
+      this.getConfig('variables'),
+      mapsConfig.variables,
+    );
+    console.log('### MapsTabBody: variableConfig', variableConfig)
+
+    // TODO: replace usages of `mapsConfig` with `variableConfig`?
+    const logscale = wmsLogscale(variableConfig, variableRep);
+
+    const unitsConversions =
+      collectionToCanonicalUnitsSpecs(this.getConfig('units'));
+
+    const variableInfo = getVariableInfo(
+      unitsConversions, variableConfig, variableId, 'absolute'
+    );
+    console.log('### MapsTabBody: variableInfo', variableInfo)
+
     const zoomButton = (
       <StaticControl position='topright'>
         <Button
@@ -141,7 +159,7 @@ export default class MapsTabBody extends React.Component {
               length={80}
               heading={<T
                 path='tabs.maps.colourScale.label'
-                data={getVariableInfo(variableConfig, variableId, 'absolute')}
+                data={variableInfo}
                 placeholder={null}
                 className={styles.label}
               />}
@@ -152,7 +170,7 @@ export default class MapsTabBody extends React.Component {
                 data={{ logscale }}
               />}
               variableSpec={variableRep}
-              displaySpec={displaySpec}
+              displaySpec={variableConfig}
             />
           </Col>
         </Row>

diff --git a/src/components/maps/ClimateLayer/ClimateLayer.js b/src/components/maps/ClimateLayer/ClimateLayer.js
@@ -15,9 +15,11 @@ import {
   wmsTime
 } from '../map-utils';
 import {
-  getConvertUnits, getVariableDataUnits,
+  getConvertUnits, getVariableDataUnits, getVariableDisplay,
   getVariableDisplayUnits
 } from '../../../utils/variables-and-units';
+import merge from 'lodash/fp/merge';
+import { collectionToCanonicalUnitsSpecs } from '../../../utils/units';
 
 
 export default class ClimateLayer extends React.Component {
@@ -33,21 +35,28 @@ export default class ClimateLayer extends React.Component {
   render() {
     const { fileMetadata, variableSpec, season } = this.props;
     const variableId = variableSpec.variable_id;
-    // TODO: Pull config up
-    const displaySpec = this.getConfig('tabs.maps.displaySpec');
-    const variableConfig = this.getConfig('variables');
-    const unitsConversions = this.getConfig('units');
+    // TODO: Pull config up!!!! We're repeating far too much here.
+    const mapsConfig = this.getConfig('tabs.maps.config');
+    const variableConfig = merge(
+      this.getConfig('variables'),
+      mapsConfig.variables,
+    );
+    console.log('### ClimateLayer: variableConfig', variableConfig)
+    const unitsConversions =
+      collectionToCanonicalUnitsSpecs(this.getConfig('units'));
 
     // Convert the data range for the climate layer from display units, which
     // are convenient for the user to specify (in the config file), to data
     // units, which is what the data actually comes in.
-    const rangeInDisplayUnits = wmsDataRange(displaySpec, variableSpec);
+    const display = getVariableDisplay(variableConfig, variableId);
     const displayUnits =
-      getVariableDisplayUnits(variableConfig, variableId, 'absolute');
+      getVariableDisplayUnits(variableConfig, variableId, display);
     // TODO: dataUnits should come from metadata, not config.
     const dataUnits = getVariableDataUnits(variableConfig, variableId);
     const convertUnits =
       getConvertUnits(unitsConversions, variableConfig, variableId);
+
+    const rangeInDisplayUnits = wmsDataRange(variableConfig, variableSpec);
     const rangeInDataUnits = mapValues(
       convertUnits(displayUnits, dataUnits)
     )(rangeInDisplayUnits);
@@ -56,18 +65,18 @@ export default class ClimateLayer extends React.Component {
       <WMSTileLayer
         url={process.env.REACT_APP_NCWMS_URL}
         format={'image/png'}
-        logscale={wmsLogscale(displaySpec, variableSpec)}
+        logscale={wmsLogscale(variableConfig, variableSpec)}
         noWrap={true}
         numcolorbands={wmsNumcolorbands}
         opacity={0.7}
         // srs={"EPSG:3005"}
         transparent={true}
         version={'1.1.1'}
-        abovemaxcolor={wmsAboveMaxColor(displaySpec, variableSpec)}
-        belowmincolor={wmsBelowMinColor(displaySpec, variableSpec)}
+        abovemaxcolor={wmsAboveMaxColor(variableConfig, variableSpec)}
+        belowmincolor={wmsBelowMinColor(variableConfig, variableSpec)}
         layers={wmsLayerName(fileMetadata, variableSpec)}
         time={wmsTime(fileMetadata, season)}
-        styles={wmsStyle(displaySpec, variableSpec)}
+        styles={wmsStyle(variableConfig, variableSpec)}
         colorscalerange={wmsColorScaleRange(rangeInDataUnits)}
       />
     );

diff --git a/src/components/maps/NcwmsColourbar/NcwmsColourbar.js b/src/components/maps/NcwmsColourbar/NcwmsColourbar.js
@@ -69,6 +69,7 @@ export default class NcwmsColourbar extends React.Component {
 
     variableSpec: PropTypes.object,
 
+    // TODO: Rename to variableConfig
     displaySpec: PropTypes.object,
     // Display spec
   };

diff --git a/src/utils/variables-and-units.js b/src/utils/variables-and-units.js
@@ -41,13 +41,9 @@ export const getVariableDisplay = (variableConfig, variableId) => {
 };
 
 
-// TODO: This should be defunct by the time all is done here. Remove.
 export const getVariableDataUnits =
-  (variableConfig, variableId, display = 'absolute') => {
+  (variableConfig, variableId) => {
     const vc = getConfigForId(variableConfig, variableId);
-    if (display === 'relative') {
-      return 'relative';
-    }
     return vc.dataUnits;
   };