Add seasonal display params to maps

public/external-text/default.yaml

@@ -17,11 +17,11 @@ selectors:
     forTabs: ['summary', 'impacts', 'maps']
   variable:
     prefix: with details about
-    default: tasmean
+    default: prsn
     forTabs: ['maps', 'graphs']
   season:
     prefix: for a typical
-    default: 16
+    default: 12
     postfix: period
     forTabs: ['maps', 'graphs']
 
@@ -252,7 +252,7 @@ tabs:
       title: "#### Projected: ${$$.components.period}"
     colourScale:
       label: |
-        ${id === 'prsn' || id === 'pr' ? 'Average' : ''} ${label} (${unitsSpec.label})
+        ${label} (${unitsSpec.label})
       note: |
         ${logscale ? $$.tabs.maps.colourScale.logscaleNote : ''} This colour scale applies to both maps.
       logscaleNote: |
@@ -261,9 +261,10 @@ tabs:
         these are mapped to the below-minimum colour.* <br/>
     config:
       variables:
-      # NB: range and tick values are in *display* units.
-      # TODO: Remove fallback
+        # NB: range and tick values are in *display* units.
         fallback:
+          display: absolute
+          displayUnits: foo
           palette: seq-Oranges
           logscale: false
           belowMinColor: white
@@ -306,26 +307,80 @@ tabs:
           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]
+          seasons:
+            annual:
+              displayUnits: mm/year (cum)
+              range:
+                min: 10
+                max: 4000
+              ticks: [10, 20, 40, 80, 100, 200, 400, 800, 1000, 2000, 4000]
+            winter:
+              displayUnits: mm/season (cum)
+              range:
+                min: 10
+                max: 2000
+              ticks: [10, 20, 40, 80, 100, 200, 400, 800, 1000, 2000]
+            spring:
+              displayUnits: mm/season (cum)
+              range:
+                min: 10
+                max: 1000
+              ticks: [10, 20, 40, 80, 100, 200, 400, 800, 1000]
+            summer:
+              displayUnits: mm/season (cum)
+              range:
+                min: 10
+                max: 500
+              ticks: [10, 20, 40, 80, 100, 200, 400, 500]
+            fall:
+              displayUnits: mm/season (cum)
+              range:
+                min: 10
+                max: 2000
+              ticks: [10, 20, 40, 80, 100, 200, 400, 800, 1000, 2000]
         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]
+          seasons:
+            annual:
+              displayUnits: mm/year (cum)
+              range:
+                min: 10
+                max: 1000
+              ticks: [10, 20, 40, 80, 100, 200, 400, 800, 1000]
+            winter:
+              displayUnits: mm/season (cum)
+              range:
+                min: 10
+                max: 500
+              ticks: [10, 20, 40, 80, 100, 200, 400, 500]
+            spring:
+              displayUnits: mm/season (cum)
+              range:
+                min: 10
+                max: 200
+              ticks: [10, 20, 40, 80, 100, 200]
+            summer:
+              displayUnits: mm/season (cum)
+              range:
+                min: 1
+                max: 20
+              ticks: [1, 2, 4, 8, 10, 20]
+            fall:
+              displayUnits: mm/season (cum)
+              range:
+                min: 10
+                max: 200
+              ticks: [10, 20, 40, 80, 100, 200]
         tasmax:
           display: absolute
           displayUnits: °C
@@ -335,6 +390,8 @@ tabs:
             max: 40
           ticks: [-40, -30, -20, -10, 0, 10, 20, 30, 40]
         tasmin:
+          display: absolute
+          displayUnits: °C
           palette: x-Occam
           range:
             min: -40
@@ -711,6 +768,7 @@ units:
     'mm/d': 365.25
     'kg m-2 d-1': mm/d
     'mm': mm/yr
+    'mm/year': mm/yr
     'mm/season': 4
     'mm/month': 12
     'mm/year (cum)':

src/components/app-root/MapsTabBody/MapsTabBody.js

@@ -34,7 +34,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Row, Col } from 'react-bootstrap';
 import Loader from 'react-loader';
+import mapValues from 'lodash/fp/mapValues';
 import merge from 'lodash/fp/merge';
+import isString from 'lodash/fp/isString';
 import T from '../../../temporary/external-text';
 import DataMap from '../../maps/DataMap';
 import BCBaseMap from '../../maps/BCBaseMap';
@@ -46,6 +48,8 @@ import Button from 'react-bootstrap/Button';
 import StaticControl from '../../maps/StaticControl';
 import { allDefined } from '../../../utils/lodash-fp-extras';
 import { collectionToCanonicalUnitsSpecs } from '../../../utils/units';
+import ClimateLayer from '../../maps/ClimateLayer';
+import { seasonIndexToPeriod } from '../../../utils/percentile-anomaly';
 
 
 export default class MapsTabBody extends React.Component {
@@ -120,9 +124,24 @@ export default class MapsTabBody extends React.Component {
     const variableId = variableRep.variable_id;
 
     const mapsConfig = this.getConfig('tabs.maps.config');
+    const seasonId = seasonIndexToPeriod(season);
+    const mapsVariableConfigForTimescale = mapValues(
+      value => {
+        const {
+          displayUnits, range, ticks,
+
+        } = value.seasons ? value.seasons[seasonId] : value;
+        return ({
+          ...value,
+          displayUnits,
+          range,
+          ticks,
+        });
+      },
+    )(mapsConfig.variables);
     const variableConfig = merge(
       this.getConfig('variables'),
-      mapsConfig.variables,
+      mapsVariableConfigForTimescale,
     );
     console.log('### MapsTabBody: variableConfig', variableConfig)
 
@@ -191,6 +210,8 @@ export default class MapsTabBody extends React.Component {
               variable={variable}
               timePeriod={baselineTimePeriod}
               metadata={this.props.metadata}
+              variableConfig={variableConfig}
+              unitsConversions={unitsConversions}
             >
               {zoomButton}
             </DataMap>
@@ -212,6 +233,8 @@ export default class MapsTabBody extends React.Component {
               variable={variable}
               timePeriod={futureTimePeriod}
               metadata={this.props.metadata}
+              variableConfig={variableConfig}
+              unitsConversions={unitsConversions}
             >
               {zoomButton}
             </DataMap>

src/components/maps/ClimateLayer/ClimateLayer.js

@@ -20,6 +20,8 @@ import {
 } from '../../../utils/variables-and-units';
 import merge from 'lodash/fp/merge';
 import { collectionToCanonicalUnitsSpecs } from '../../../utils/units';
+import { allDefined } from '../../../utils/lodash-fp-extras';
+import Loader from 'react-loader';
 
 
 export default class ClimateLayer extends React.Component {
@@ -30,20 +32,31 @@ export default class ClimateLayer extends React.Component {
     fileMetadata: PropTypes.object,
     variableSpec: PropTypes.object,
     season: PropTypes.number,
+    variableConfig: PropTypes.object,
+    unitsConversions: PropTypes.object,
   };
 
   render() {
-    const { fileMetadata, variableSpec, season } = this.props;
+    if (!allDefined(
+      [
+        'fileMetadata',
+        'variableSpec',
+        'season',
+        'variableConfig',
+        'unitsConversions',
+      ],
+      this.props
+    )) {
+      console.log('### ClimateLayer: unsettled props', this.props)
+      return <Loader/>;
+    }
+    const {
+      fileMetadata, variableSpec, season, variableConfig, unitsConversions,
+    } = this.props;
     const variableId = variableSpec.variable_id;
-    // 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: variableId', variableId)
     console.log('### ClimateLayer: variableConfig', variableConfig)
-    const unitsConversions =
-      collectionToCanonicalUnitsSpecs(this.getConfig('units'));
+    console.log('### ClimateLayer: unitsConversions', unitsConversions)
 
     // 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
@@ -53,6 +66,7 @@ export default class ClimateLayer extends React.Component {
       getVariableDisplayUnits(variableConfig, variableId, display);
     // TODO: dataUnits should come from metadata, not config.
     const dataUnits = getVariableDataUnits(variableConfig, variableId);
+    console.log('### ClimateLayer: unitsConversions: display, displayUnits, dataUnits', display, displayUnits, dataUnits)
     const convertUnits =
       getConvertUnits(unitsConversions, variableConfig, variableId);
 

src/components/maps/DataMap/DataMap.js

@@ -61,6 +61,8 @@ class DataMapDisplay extends React.Component {
     onPopupChange: PropTypes.func,
     fileMetadata: PropTypes.object,
     fileMetadataFetchError: PropTypes.object,
+    variableConfig: PropTypes.object,
+    unitsConversions: PropTypes.object,
     // Any other props are passed through to CanadaBaseMap.
   };
 
@@ -119,6 +121,8 @@ class DataMapDisplay extends React.Component {
         'timePeriod',
         'variable',
         'season',
+        'variableConfig',
+        'unitsConversions',
       ],
       this.props
     )) {
@@ -127,12 +131,13 @@ class DataMapDisplay extends React.Component {
     }
     const {
       children, region, timePeriod, season, variable, popup,
-      fileMetadata, ...rest
+      fileMetadata, variableConfig, unitsConversions,
+      ...baseMapProps
     } = this.props;
 
     return (
       <CanadaBaseMap
-        {...rest}
+        {...baseMapProps}
         // FIXME: Popups are disabled because the CE ncWMS does not allow
         //  GetFeatureInfo requests, which are required to fill the popup.
         // onClick={this.handleClickMap}
@@ -141,6 +146,8 @@ class DataMapDisplay extends React.Component {
           fileMetadata={fileMetadata}
           variableSpec={variable.representative}
           season={season}
+          variableConfig={variableConfig}
+          unitsConversions={unitsConversions}
         />
         {
           popup.isOpen &&

src/utils/units.js

@@ -142,17 +142,27 @@ export const fromBaseUnits = curry((unitsSpec, value) =>
 );
 
 
+export const getUnitsSpec = (group, unitsId) => {
+  const unitsSpec = group[unitsId];
+  if (!unitsSpec) {
+    throw new Error(`Units group contains no spec for '${unitsId}'`);
+  }
+  return unitsSpec;
+};
+
+
 export const convertUnitsInGroup = curry((
   group, fromUnitsId, toUnitsId, value
 ) => {
+  console.log('### convertUnitsInGroup: group, fromUnitsId, toUnitsId, value', group, fromUnitsId, toUnitsId, value)
   if (!group) {
     throw new Error('Undefined units group');
   }
   if (fromUnitsId === toUnitsId) {  // Identity; short circuit
     return value;
   }
-  const fromUnitsSpec = group[fromUnitsId];
-  const toUnitsSpec = group[toUnitsId];
+  const fromUnitsSpec = getUnitsSpec(group, fromUnitsId);
+  const toUnitsSpec = getUnitsSpec(group, toUnitsId);
   return fromBaseUnits(toUnitsSpec, toBaseUnits(fromUnitsSpec, value));
 });
 

src/utils/variables-and-units.js

@@ -86,6 +86,7 @@ export const getConvertUnits= (unitsSpecs, variableConfig, variableId) => {
   if (!unitsGroup) {
     throw new Error(`No units group for ${variableType}`);
   }
+  console.log('### getConvertUnits: variableType, unitsGroup', variableType, unitsGroup)
   return convertUnitsInGroup(unitsGroup);
 };