From 3bc778884ea091ce084b3419a3d5b376ea711bcc Mon Sep 17 00:00:00 2001 From: Rod Glover Date: Tue, 30 Jun 2020 14:03:40 -0700 Subject: [PATCH] Refactor wms config utils --- .../app-root/MapsTabBody/MapsTabBody.js | 5 +-- .../maps/ClimateLayer/ClimateLayer.js | 32 ++++++++-------- src/components/maps/DataMap/DataMap.js | 6 +-- .../maps/NcwmsColourbar/NcwmsColourbar.js | 32 +++++++++------- src/components/maps/map-utils.js | 38 +++++++++---------- 5 files changed, 58 insertions(+), 55 deletions(-) diff --git a/src/components/app-root/MapsTabBody/MapsTabBody.js b/src/components/app-root/MapsTabBody/MapsTabBody.js index 3bcc0c93..aa4a17dc 100644 --- a/src/components/app-root/MapsTabBody/MapsTabBody.js +++ b/src/components/app-root/MapsTabBody/MapsTabBody.js @@ -39,7 +39,7 @@ import T from '../../../temporary/external-text'; import DataMap from '../../maps/DataMap'; import BCBaseMap from '../../maps/BCBaseMap'; import NcwmsColourbar from '../../maps/NcwmsColourbar'; -import { regionBounds, wmsLogscale } from '../../maps/map-utils'; +import { regionBounds, getWmsLogscale } from '../../maps/map-utils'; import styles from '../../maps/NcwmsColourbar/NcwmsColourbar.module.css'; import { getVariableInfo, } from '../../../utils/variables-and-units'; import Button from 'react-bootstrap/Button'; @@ -126,8 +126,7 @@ export default class MapsTabBody extends React.Component { ); console.log('### MapsTabBody: variableConfig', variableConfig) - // TODO: replace usages of `mapsConfig` with `variableConfig`? - const logscale = wmsLogscale(variableConfig, variableRep); + const logscale = getWmsLogscale(variableConfig, variableId); const unitsConversions = collectionToCanonicalUnitsSpecs(this.getConfig('units')); diff --git a/src/components/maps/ClimateLayer/ClimateLayer.js b/src/components/maps/ClimateLayer/ClimateLayer.js index fd931a5b..12cec1b1 100644 --- a/src/components/maps/ClimateLayer/ClimateLayer.js +++ b/src/components/maps/ClimateLayer/ClimateLayer.js @@ -4,15 +4,15 @@ import { WMSTileLayer } from 'react-leaflet'; import mapValues from 'lodash/fp/mapValues'; import T from '../../../temporary/external-text'; import { - wmsAboveMaxColor, - wmsBelowMinColor, - wmsColorScaleRange, - wmsDataRange, - wmsLayerName, - wmsLogscale, + getWmsAboveMaxColor, + getWmsBelowMinColor, + formatWmsColorScaleRange, + getWmsDataRange, + getWmsLayerName, + getWmsLogscale, wmsNumcolorbands, - wmsStyle, - wmsTime + getWmsStyle, + getWmsTime } from '../map-utils'; import { getConvertUnits, getVariableDataUnits, getVariableDisplay, @@ -56,7 +56,7 @@ export default class ClimateLayer extends React.Component { const convertUnits = getConvertUnits(unitsConversions, variableConfig, variableId); - const rangeInDisplayUnits = wmsDataRange(variableConfig, variableSpec); + const rangeInDisplayUnits = getWmsDataRange(variableConfig, variableId); const rangeInDataUnits = mapValues( convertUnits(displayUnits, dataUnits) )(rangeInDisplayUnits); @@ -65,19 +65,19 @@ export default class ClimateLayer extends React.Component { ); } diff --git a/src/components/maps/DataMap/DataMap.js b/src/components/maps/DataMap/DataMap.js index 3a1f0435..8617e5a5 100644 --- a/src/components/maps/DataMap/DataMap.js +++ b/src/components/maps/DataMap/DataMap.js @@ -18,7 +18,7 @@ import LayerValuePopup from '../LayerValuePopup'; import SimpleGeoJSON from '../SimpleGeoJSON'; import withAsyncData from '../../../HOCs/withAsyncData'; import { fetchFileMetadata } from '../../../data-services/metadata'; -import { wmsLayerName, wmsTime, wmsClimateLayerProps } from '../map-utils'; +import { getWmsLayerName, getWmsTime, wmsClimateLayerProps } from '../map-utils'; import './DataMap.css'; import { allDefined } from '../../../utils/lodash-fp-extras'; @@ -35,8 +35,8 @@ const getLayerInfo = ({ layerSpec, layerPoint: xy }) => { exceptions: 'application/vnd.ogc.se_xml', ...xy, info_format: 'text/xml', // f**k, only xml is available - query_layers: wmsLayerName(layerSpec), - time: wmsTime(layerSpec), + query_layers: getWmsLayerName(layerSpec), + time: getWmsTime(layerSpec), feature_count: 50, // ?? version: '1.1.1', }, diff --git a/src/components/maps/NcwmsColourbar/NcwmsColourbar.js b/src/components/maps/NcwmsColourbar/NcwmsColourbar.js index 83afadeb..f62ff7f8 100644 --- a/src/components/maps/NcwmsColourbar/NcwmsColourbar.js +++ b/src/components/maps/NcwmsColourbar/NcwmsColourbar.js @@ -28,18 +28,18 @@ import mapValues from 'lodash/fp/mapValues'; import styles from './NcwmsColourbar.module.css'; import { makeURI } from '../../../utils/uri'; import { - wmsDataRange, - wmsLogscale, + getWmsDataRange, + getWmsLogscale, wmsNumcolorbands, - wmsPalette, - wmsTicks, - wmsAboveMaxColor, - wmsBelowMinColor, + getWmsPalette, + getWmsTicks, + getWmsAboveMaxColor, + getWmsBelowMinColor, } from '../map-utils'; // TODO: Move to data-services. -const getColorbarURI = (displaySpec, variableSpec, width, height) => +const getColorbarURI = (displaySpec, variableId, width, height) => makeURI( process.env.REACT_APP_NCWMS_URL, { @@ -47,7 +47,7 @@ const getColorbarURI = (displaySpec, variableSpec, width, height) => colorbaronly: 'true', width, height, - palette: wmsPalette(displaySpec, variableSpec), + palette: getWmsPalette(displaySpec, variableId), numcolorbands: wmsNumcolorbands, } ); @@ -124,19 +124,23 @@ export default class NcwmsColourbar extends React.Component { heading, note, displaySpec, variableSpec, } = this.props; - const logscale = wmsLogscale(displaySpec, variableSpec); + console.log('### NcwmsColourbar: displaySpec', displaySpec) + const variableId = variableSpec.variable_id; + console.log('### NcwmsColourbar: variableSpec', variableSpec) + + const logscale = getWmsLogscale(displaySpec, variableId); const scaleOperator = logscale ? Math.log : identity; - const range = wmsDataRange(displaySpec, variableSpec); + const range = getWmsDataRange(displaySpec, variableId); const rangeScale = mapValues(scaleOperator, range); const rangeSpan = rangeScale.max - rangeScale.min; - const ticks = wmsTicks(displaySpec, variableSpec); + const ticks = getWmsTicks(displaySpec, variableId); const belowAboveLength = (100 - length) /2; //% const width = this.state.width; const imageWidth = Math.round(width * length / 100); - const belowMinColor = wmsBelowMinColor(displaySpec, variableSpec); - const aboveMaxColor = wmsAboveMaxColor(displaySpec, variableSpec); + const belowMinColor = getWmsBelowMinColor(displaySpec, variableId); + const aboveMaxColor = getWmsAboveMaxColor(displaySpec, variableId); return (
@@ -168,7 +172,7 @@ export default class NcwmsColourbar extends React.Component { 'margin-left': -breadth, 'margin-right': `${length}%`, }} - src={getColorbarURI(displaySpec, variableSpec, breadth, imageWidth)} + src={getColorbarURI(displaySpec, variableId, breadth, imageWidth)} /> } export const wmsNumcolorbands = 249; -export const wmsLayerName = (fileMetadata, variableSpec) => - `${fileMetadata.unique_id}/${variableSpec.variable_id}`; +export const getWmsLayerName = (fileMetadata, variableId) => + `${fileMetadata.unique_id}/${variableId}`; -export const wmsTime = (fileMetadata, season) => { +export const getWmsTime = (fileMetadata, season) => { const timeIndexOffset = { 'yearly': 16, 'seasonal': 12, 'monthly': 0 }[fileMetadata.timescale]; @@ -64,28 +64,28 @@ export const wmsTime = (fileMetadata, season) => { }; -export const getDisplaySpecItem = curry( - // Extract the relevant item (e.g., 'palette') from a display spec, which - // is a configuration object retrieved from the external text file. - (item, displaySpec, variableSpec) => getOr( - displaySpec.fallback[item], - [variableSpec.variable_id, item], - displaySpec +export const getVariableSpecItem = curry( + // Extract the relevant item (e.g., 'palette') from a variable spec, which + // is a configuration object. + (item, variableSpec, variableId) => getOr( + variableSpec.fallback[item], + [variableId, item], + variableSpec ) ); -export const wmsLogscale = getDisplaySpecItem('logscale'); -export const wmsPalette = getDisplaySpecItem('palette'); -export const wmsDataRange = getDisplaySpecItem('range'); -export const wmsTicks = getDisplaySpecItem('ticks'); -export const wmsAboveMaxColor = getDisplaySpecItem('aboveMaxColor'); -export const wmsBelowMinColor = getDisplaySpecItem('belowMinColor'); +export const getWmsLogscale = getVariableSpecItem('logscale'); +export const getWmsPalette = getVariableSpecItem('palette'); +export const getWmsDataRange = getVariableSpecItem('range'); +export const getWmsTicks = getVariableSpecItem('ticks'); +export const getWmsAboveMaxColor = getVariableSpecItem('aboveMaxColor'); +export const getWmsBelowMinColor = getVariableSpecItem('belowMinColor'); -export const wmsStyle = (displaySpec, variableSpec) => - `default-scalar/${wmsPalette(displaySpec, variableSpec)}`; +export const getWmsStyle = (displaySpec, variableId) => + `default-scalar/${getWmsPalette(displaySpec, variableId)}`; -export const wmsColorScaleRange = range => { +export const formatWmsColorScaleRange = range => { return `${range.min},${range.max}` };