diff --git a/package-lock.json b/package-lock.json index 5f8490f9..3d67aa0e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2581,6 +2581,11 @@ "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==" }, + "autobind-decorator": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-1.4.3.tgz", + "integrity": "sha1-TJb/p3sQYi7eJPEQ9du/VmkUF9E=" + }, "autoprefixer": { "version": "9.5.1", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.5.1.tgz", @@ -15107,6 +15112,15 @@ "prop-types": "^15.5.8" } }, + "react-input-range": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/react-input-range/-/react-input-range-1.3.0.tgz", + "integrity": "sha1-+W0AFjGrgXQX8eJtj5+WhLSCf1k=", + "requires": { + "autobind-decorator": "^1.3.4", + "prop-types": "^15.5.8" + } + }, "react-is": { "version": "16.8.6", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", diff --git a/package.json b/package.json index 9b2ad14c..5e7e2528 100644 --- a/package.json +++ b/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", diff --git a/public/external-text/default.yaml b/public/external-text/default.yaml index 9a8fbb2a..7a357973 100644 --- a/public/external-text/default.yaml +++ b/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: diff --git a/src/components/app-root/App/App.js b/src/components/app-root/App/App.js index 6dbd0494..1350503a 100755 --- a/src/components/app-root/App/App.js +++ b/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, diff --git a/src/components/maps/ClimateLayer/ClimateLayer.js b/src/components/maps/ClimateLayer/ClimateLayer.js index d40dcee1..a10bf4d0 100644 --- a/src/components/maps/ClimateLayer/ClimateLayer.js +++ b/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, )} /> ); diff --git a/src/components/maps/DataMap/DataMap.js b/src/components/maps/DataMap/DataMap.js index 474a432a..aaa3635a 100644 --- a/src/components/maps/DataMap/DataMap.js +++ b/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 && diff --git a/src/components/maps/NcwmsColourbar/NcwmsColourbar.js b/src/components/maps/NcwmsColourbar/NcwmsColourbar.js index 2ea5d904..5029b9f5 100644 --- a/src/components/maps/NcwmsColourbar/NcwmsColourbar.js +++ b/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,6 +63,7 @@ export default class NcwmsColourbar extends React.Component { variableSpec: PropTypes.object, width: PropTypes.number, height: PropTypes.number, + range: PropTypes.object, }; static defaultProps = { @@ -65,43 +71,28 @@ export default class NcwmsColourbar extends React.Component { 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 (
-
@@ -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 => ( - - {tick} - - ) + tick => { + const position = logscale ? + Math.log(tick/range.min) / Math.log(range.max/range.min) : + (tick - range.min) / span; + return ( + + {tick} + + ) + } )(ticks) }
-
); } diff --git a/src/components/maps/NcwmsColourbar/NcwmsColourbar.module.css b/src/components/maps/NcwmsColourbar/NcwmsColourbar.module.css index 3a71e2c7..4ec34af2 100644 --- a/src/components/maps/NcwmsColourbar/NcwmsColourbar.module.css +++ b/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;*/ } diff --git a/src/components/maps/TwoDataMaps/TwoDataMaps.js b/src/components/maps/TwoDataMaps/TwoDataMaps.js index 320b27d1..6b51a91b 100644 --- a/src/components/maps/TwoDataMaps/TwoDataMaps.js +++ b/src/components/maps/TwoDataMaps/TwoDataMaps.js @@ -32,6 +32,15 @@ import T from '../../../temporary/external-text'; import DataMap from '../../maps/DataMap'; import BCBaseMap from '../BCBaseMap'; import NcwmsColourbar from '../NcwmsColourbar'; +import InputRange from 'react-input-range'; +import styles from '../NcwmsColourbar/NcwmsColourbar.module.css'; + + +const getVariableConfig = (texts, variable, path) => + get( + [get('representative.variable_id', variable), path], + T.getRaw(texts, 'maps.displaySpec') + ); export default class TwoDataMaps extends React.Component { @@ -47,25 +56,89 @@ export default class TwoDataMaps extends React.Component { }; state = { + range: getVariableConfig(this.context, this.props.variable, 'range'), viewport: BCBaseMap.initialViewport, popup: { isOpen: false, }, }; + + // Updating the state in getDerivedStateFromProps is preferable, but we can't + // access context there (at least I don't know how to do that) since it is + // a static method. Therefore do it in componentDidUpdate. + // + // static getDerivedStateFromProps(props, state) { + // return null; + // // TODO: See if this can be done with memoization instead + // const range = getVariableConfig(this.context, props.variable, 'range'); + // console.log('### TwoDataMaps.getDerivedStateFromProps: range', range) + // return { + // range, + // }; + // } + // + componentDidUpdate(prevProps, prevState, snapshot) { + // Reset state.range to the default for the variable. + if (prevProps.variable !== this.props.variable) { + const range = getVariableConfig(this.context, this.props.variable, 'range'); + console.log('### TwoDataMaps.componentDidUpdate', range) + this.handleChangeRange(range); + } + } + handleChangeSelection = (name, value) => this.setState({ [name]: value }); + handleChangeRange = this.handleChangeSelection.bind(this, 'range'); handleChangeViewport = this.handleChangeSelection.bind(this, 'viewport'); handleChangePopup = this.handleChangeSelection.bind(this, 'popup'); + getConfig = path => T.get(this.context, path, {}, 'raw'); + getUnits = variableSpec => + get( + [get('variable_id', variableSpec), 'units'], + this.getConfig('variables') + ); + render() { + console.log('### TwoDataMaps.render') + const rangeConfig = + getVariableConfig(this.context, this.props.variable, 'range'); + const variableSpec = this.props.variable.representative; return ( + + + + @@ -86,6 +159,7 @@ export default class TwoDataMaps extends React.Component { variable={this.props.variable} timePeriod={this.props.historicalTimePeriod} metadata={this.props.metadata} + range={this.state.range} /> @@ -104,6 +178,7 @@ export default class TwoDataMaps extends React.Component { variable={this.props.variable} timePeriod={this.props.futureTimePeriod} metadata={this.props.metadata} + range={this.state.range} /> diff --git a/src/components/maps/map-utils.js b/src/components/maps/map-utils.js index 6202e071..d116e0ee 100644 --- a/src/components/maps/map-utils.js +++ b/src/components/maps/map-utils.js @@ -34,6 +34,7 @@ export const getDisplaySpecItem = curry( ) ); +export const wmsLogscale = getDisplaySpecItem('logscale'); export const wmsPalette = getDisplaySpecItem('palette'); export const wmsDataRange = getDisplaySpecItem('range'); export const wmsTicks = getDisplaySpecItem('ticks'); @@ -50,10 +51,10 @@ export const wmsColorScaleRange = (displaySpec, variableSpec) => { }; -export const wmsClimateLayerProps = (fileMetadata, displaySpec, variableSpec, season) => { +export const wmsClimateLayerProps = (fileMetadata, displaySpec, variableSpec, season, range) => { return { format: 'image/png', - logscale: false, + logscale: wmsLogscale(displaySpec, variableSpec), noWrap: true, numcolorbands: wmsNumcolorbands, opacity: 0.7, @@ -65,6 +66,7 @@ export const wmsClimateLayerProps = (fileMetadata, displaySpec, variableSpec, se layers: wmsLayerName(fileMetadata, variableSpec), time: wmsTime(fileMetadata, season), styles: wmsStyle(displaySpec, variableSpec), - colorscalerange: wmsColorScaleRange(displaySpec, variableSpec), + // colorscalerange: wmsColorScaleRange(displaySpec, variableSpec), + colorscalerange: `${range.min},${range.max}`, } }; diff --git a/src/temporary/external-text.js b/src/temporary/external-text.js index 6e611b32..fe6dcc86 100644 --- a/src/temporary/external-text.js +++ b/src/temporary/external-text.js @@ -210,4 +210,7 @@ export default class ExternalText extends React.Component { ExternalText.contextType = ExternalTextContext; ExternalText.Provider = Provider; ExternalText.get = get; +ExternalText.getRaw = _.curry( + (texts, path) => get(texts, path, {}, 'raw', undefined) +); ExternalText.Markdown = ReactMarkdown;