Let user adjust map colour scales

package.json

@@ -19,6 +19,7 @@
     "react-bootstrap": "^1.0.0-beta.6",
     "react-dom": "^16.8.6",
     "react-icons": "^3.5.0",
+    "react-input-range": "^1.3.0",
     "react-leaflet": "^2.1.4",
     "react-loader": "^2.4.5",
     "react-markdown": "^4.0.6",

public/external-text/default.yaml

@@ -1,6 +1,6 @@
 app:
   tabs:
-    default: references
+    default: summary
 
 selectors:
   prologue: I am interested in information about projected climate change ...
@@ -12,7 +12,7 @@ selectors:
     default: 2050
   variable:
     prefix: ... with details about
-    default: pr
+    default: tasmax
   season:
     prefix: for a typical
     postfix: period
@@ -210,41 +210,70 @@ maps:
   displaySpec:
     fallback:
       palette: seq-Oranges
+      logscale: false
       aboveMaxColor: black
       belowMinColor: black
       range:
         min: -50
         max: 50
+        step: 5
       ticks: [-50, 0, 50]
+    fdd:
+      palette: x-Occam
+      range:
+        min: 0
+        max: 4000
+        step: 500
+      ticks: [0, 1000, 2000, 3000, 4000]
     gdd:
-      palette: seq-Oranges
+      palette: x-Occam
       range:
         min: 0
         max: 4000
+        step: 500
       ticks: [0, 1000, 2000, 3000, 4000]
     hdd:
-      palette: seq-Oranges
+      palette: x-Occam
       range:
         min: 0
         max: 10000
+        step: 500
       ticks: [0, 2000, 4000, 6000, 8000, 10000]
     pr:
       palette: seq-Greens
+      logscale: true
       range:
-        min: 0
+        min: 0.1
         max: 20
-      ticks: [0, 5, 10, 15, 20]
+        step: 0.1
+      ticks: [0.1, 0.2, 0.5, 1, 2, 5, 10, 20]
+    prsn:
+      palette: x-Occam
+      logscale: true
+      range:
+        min: 0.1
+        max: 20
+      ticks: [0.1, 0.2, 0.5, 1, 2, 5, 10, 20]
     tasmax:
-      palette: div-BuRd
+      palette: x-Occam
       range:
         min: -40
         max: 40
+        step: 5
       ticks: [-40, -30, -20, -10, 0, 10, 20, 30, 40]
     tasmin:
-      palette: div-BuRd
+      palette: x-Occam
+      range:
+        min: -40
+        max: 40
+        step: 5
+      ticks: [-40, -30, -20, -10, 0, 10, 20, 30, 40]
+    tasmean:
+      palette: x-Occam
       range:
         min: -40
         max: 40
+        step: 5
       ticks: [-40, -30, -20, -10, 0, 10, 20, 30, 40]
 
 graph:
@@ -477,6 +506,7 @@ components:
 
 colourScale:
   label: ${variable} (${units})
+  rangeLabel: Minimum and maximum data values for colour scale
   note: '*Note: This colour scale applies to both maps.*'
 
 variables:

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

@@ -30,6 +30,8 @@ import TwoDataMaps from '../../maps/TwoDataMaps/TwoDataMaps';
 
 import Cards from '../../misc/Cards';
 
+import 'react-input-range/lib/css/index.css';
+
 const baselineTimePeriod = {
   start_date: 1961,
   end_date: 1990,

src/components/maps/ClimateLayer/ClimateLayer.js

@@ -12,6 +12,7 @@ export default class ClimateLayer extends React.Component {
     fileMetadata: PropTypes.object,
     variableSpec: PropTypes.object,
     season: PropTypes.number,
+    range: PropTypes.object,
   };
 
   render() {
@@ -23,7 +24,8 @@ export default class ClimateLayer extends React.Component {
           this.props.fileMetadata,
           displaySpec,
           this.props.variableSpec,
-          this.props.season
+          this.props.season,
+          this.props.range,
         )}
       />
     );

src/components/maps/DataMap/DataMap.js

@@ -56,6 +56,7 @@ class DataMapDisplay extends React.Component {
     popup: PropTypes.object,
     onPopupChange: PropTypes.func,
     fileMetadata: PropTypes.object,
+    range: PropTypes.object,
   };
 
   // TODO: This code is currently disabled because the CE ncWMS does not allow
@@ -122,6 +123,7 @@ class DataMapDisplay extends React.Component {
           fileMetadata={this.props.fileMetadata}
           variableSpec={this.props.variable.representative}
           season={this.props.season}
+          range={this.props.range}
         />
         {
           this.props.popup.isOpen &&

src/components/maps/NcwmsColourbar/NcwmsColourbar.js

@@ -22,6 +22,9 @@
 //  - Props `width` and `height` are for the unrotated (vertical) graphic;
 //    so their meaning is reversed in the rendered graphic. Confusing, sorry.
 
+// TODO: Configuration should be obtained outside this component and passed in;
+//  no use of ExternalText here.
+
 import PropTypes from 'prop-types';
 import React from 'react';
 import get from 'lodash/fp/get';
@@ -31,8 +34,10 @@ import styles from './NcwmsColourbar.module.css';
 import { makeURI } from '../../../utils/uri';
 import {
   wmsDataRange,
+  wmsLogscale,
   wmsNumcolorbands,
-  wmsPalette, wmsTicks
+  wmsPalette,
+  wmsTicks
 } from '../map-utils';
 
 
@@ -58,50 +63,36 @@ export default class NcwmsColourbar extends React.Component {
     variableSpec: PropTypes.object,
     width: PropTypes.number,
     height: PropTypes.number,
+    range: PropTypes.object,
   };
 
   static defaultProps = {
     width: 20,
     height: 300,
   };
 
-  getConfig = path => T.get(this.context, path, {}, 'raw');
-  getUnits = variableSpec =>
-    get(
-      [get('variable_id', variableSpec), 'units'],
-      this.getConfig('variables')
-    );
-
   render() {
+    const { variableSpec, width, height, range } = this.props;
     const displaySpec = T.get(this.context, 'maps.displaySpec', {}, 'raw');
-    const range = wmsDataRange(displaySpec, this.props.variableSpec);
+    const logscale = wmsLogscale(displaySpec, variableSpec);
     const span = range.max - range.min;
-    const ticks = wmsTicks(displaySpec, this.props.variableSpec);
+    const ticks = wmsTicks(displaySpec, variableSpec);
     return (
       <div
           className={styles.wrapper}
           style={{ width: this.props.height + 20 }}
         >
-          <T
-            path='colourScale.label'
-            data={{
-              variable: get('variable_name', this.props.variableSpec),
-              units: this.getUnits(this.props.variableSpec)
-            }}
-             placeholder={null}
-             className={styles.label}
-          />
           <img
             className={styles.image}
             style={{
-              'margin-top': -this.props.height,
-              'margin-left': -this.props.width,
+              'margin-top': -height,
+              'margin-left': -width,
             }}
             src={getColorbarURI(
               displaySpec,
-              this.props.variableSpec,
-              this.props.width,
-              this.props.height
+              variableSpec,
+              width,
+              height,
             )}
           />
           <div className={styles.ticks}>
@@ -110,23 +101,23 @@ export default class NcwmsColourbar extends React.Component {
               // their enclosing div; a value of `left` in % makes it very
               // easy to place them correctly.
               map(
-                tick => (
-                  <span
-                    style={{
-                      left: `${(tick - range.min) / span * 100}%`
-                    }}
-                  >
-                    {tick}
-                  </span>
-                )
+                tick => {
+                  const position = logscale ?
+                    Math.log(tick/range.min) / Math.log(range.max/range.min) :
+                    (tick - range.min) / span;
+                  return (
+                    <span
+                      style={{
+                        left: `${position * 100}%`
+                      }}
+                    >
+                      {tick}
+                    </span>
+                  )
+                }
               )(ticks)
             }
           </div>
-          <T
-            path={'colourScale.note'}
-            placeholder={null}
-            className={styles.note}
-          />
         </div>
     );
   }

src/components/maps/NcwmsColourbar/NcwmsColourbar.module.css

@@ -5,11 +5,6 @@
     width: 320px;  /* for nominal 300px height */
 }
 
-.wrapper .label {
-    text-align: center;
-    margin-bottom: -0.4rem;
-}
-
 .wrapper .image {
     transform: rotate(90deg);
     transform-origin: bottom right;
@@ -32,8 +27,14 @@
     padding-top: 10px;
 }
 
-.wrapper .note {
+.label {
+    text-align: center;
+    margin-top: 1rem;
+    margin-bottom: -0.4rem;
+}
+
+.note {
     font-size: 80%;
     text-align: center;
-    margin-top: -0.75rem;
+    /*margin-top: -0.75rem;*/
 }