Refactor wms config utils

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

Hide file tree

Showing 5 changed files with 58 additions and 55 deletions.
diff --git 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
@@ -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 {
       <WMSTileLayer
         url={process.env.REACT_APP_NCWMS_URL}
         format={'image/png'}
-        logscale={wmsLogscale(variableConfig, variableSpec)}
+        logscale={getWmsLogscale(variableConfig, variableId)}
         noWrap={true}
         numcolorbands={wmsNumcolorbands}
         opacity={0.7}
         // srs={"EPSG:3005"}
         transparent={true}
         version={'1.1.1'}
-        abovemaxcolor={wmsAboveMaxColor(variableConfig, variableSpec)}
-        belowmincolor={wmsBelowMinColor(variableConfig, variableSpec)}
-        layers={wmsLayerName(fileMetadata, variableSpec)}
-        time={wmsTime(fileMetadata, season)}
-        styles={wmsStyle(variableConfig, variableSpec)}
-        colorscalerange={wmsColorScaleRange(rangeInDataUnits)}
+        abovemaxcolor={getWmsAboveMaxColor(variableConfig, variableId)}
+        belowmincolor={getWmsBelowMinColor(variableConfig, variableId)}
+        layers={getWmsLayerName(fileMetadata, variableId)}
+        time={getWmsTime(fileMetadata, season)}
+        styles={getWmsStyle(variableConfig, variableId)}
+        colorscalerange={formatWmsColorScaleRange(rangeInDataUnits)}
       />
     );
   }

diff --git 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
@@ -28,26 +28,26 @@ 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,
     {
       request: 'GetLegendGraphic',
       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 (
       <div className={styles.all} ref={this.thing}>
@@ -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)}
             />
           }
           <span

diff --git a/src/components/maps/map-utils.js b/src/components/maps/map-utils.js
@@ -51,11 +51,11 @@ export const generateResolutions = (maxRes, count) =>
 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}`
 };