WV-3265 Point Sizing for MODIS_Aqua_Thermal_Anomalies_All

web/js/components/layer/settings/layer-settings.js

@@ -8,6 +8,7 @@ import { connect } from 'react-redux';
 
 import Opacity from './opacity';
 import Palette from './palette';
+import Size from './size';
 import BandSelection from './band-selection/band-selection-parent-info-menu';
 import AssociatedLayers from './associated-layers-toggle';
 import VectorStyle from './vector-style';
@@ -37,6 +38,8 @@ import {
   setThresholdRangeAndSquash,
   setCustomPalette,
   clearCustomPalette,
+  setSize,
+  clearSize,
   setToggledClassification,
   refreshDisabledClassification,
 } from '../../../modules/palettes/actions';
@@ -337,14 +340,18 @@ class LayerSettings extends React.Component {
     let renderCustomizations;
     const {
       setOpacity,
+      setSize,
+      clearSize,
       customPalettesIsActive,
       layer,
       palettedAllowed,
       zot,
+      groupName,
     } = this.props;
     const hasAssociatedLayers = layer.associatedLayers && layer.associatedLayers.length;
     const hasTracks = layer.orbitTracks && layer.orbitTracks.length;
     const titilerLayer = layer.id === 'HLS_Customizable_Sentinel' || layer.id === 'HLS_Customizable_Landsat';
+    const pointSizeLayer = layer.type === 'vector' && layer.id === 'MODIS_Aqua_Thermal_Anomalies_All';
     const granuleMetadata = layer?.enableCMRDataFinder && !(zot?.underZoomValue > 0);
     const layerGroup = layer.layergroup;
 
@@ -366,6 +373,16 @@ class LayerSettings extends React.Component {
           setOpacity={setOpacity}
           layer={layer}
         />
+        {pointSizeLayer && (
+        <Size
+          start={layer.size}
+          setSize={setSize}
+          clearSize={clearSize}
+          layer={layer}
+          index={0}
+          groupName={groupName}
+        />
+        )}
         {this.renderGranuleSettings()}
         {renderCustomizations}
         {titilerLayer && <BandSelection layer={layer} />}
@@ -447,6 +464,12 @@ const mapDispatchToProps = (dispatch) => ({
   setOpacity: (id, opacity) => {
     dispatch(setOpacity(id, opacity));
   },
+  setSize: (layerId, size, index, groupName) => {
+    dispatch(setSize(layerId, size, index, groupName));
+  },
+  clearSize: (layerId, index, groupName) => {
+    dispatch(clearSize(layerId, index, groupName));
+  },
   updateGranuleLayerOptions: (dates, def, count) => {
     dispatch(updateGranuleLayerOptions(dates, def, count));
   },
@@ -485,6 +508,8 @@ LayerSettings.propTypes = {
   screenHeight: PropTypes.number,
   setCustomPalette: PropTypes.func,
   setOpacity: PropTypes.func,
+  setSize: PropTypes.func,
+  clearSize: PropTypes.func,
   setStyle: PropTypes.func,
   setThresholdRange: PropTypes.func,
   toggleClassification: PropTypes.func,

web/js/components/layer/settings/size.js

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { debounce } from 'lodash';
+
+function SizeSelect(props) {
+  const {
+    layer,
+    start,
+    index,
+    groupName,
+  } = props;
+
+  const [value, setValue] = useState(start);
+
+  const debouncedSetSize = debounce((layerId, size, index, groupName) => {
+    const { setSize, clearSize } = props;
+    if (size === 0) {
+      clearSize(layerId, index, groupName);
+    } else {
+      setSize(layerId, size, index, groupName);
+    }
+  }, 100);
+
+  return (
+    <div className="layer-size-select settings-component">
+      <h2 className="wv-header">Point Radius</h2>
+      <input
+        type="range"
+        className="form-range"
+        min={0}
+        max={25}
+        step={5}
+        defaultValue={start}
+        onChange={(e) => {
+          const val = parseFloat(e.target.value);
+          debouncedSetSize(layer.id, val, index, groupName);
+          setValue(val);
+        }}
+      />
+      <div className="wv-label wv-label-size mt-1">
+        {value <= 0 ? 1 : value}
+        px
+      </div>
+    </div>
+  );
+}
+SizeSelect.defaultProps = {
+  start: 0,
+};
+SizeSelect.propTypes = {
+  layer: PropTypes.object,
+  setSize: PropTypes.func,
+  clearSize: PropTypes.func,
+  start: PropTypes.number,
+};
+
+export default SizeSelect;

web/js/map/layerbuilder.js

@@ -451,6 +451,8 @@ export default function mapLayerBuilder(config, cache, store) {
     };
     if (def.styles) {
       parameters.STYLES = def.styles;
+    } else if (def.size && def.size >= 5) {
+      parameters.STYLES = `size${def.size}`;
     }
 
     urlParameters = '';

web/js/mapUI/components/update-projection/updateProjection.js

@@ -335,6 +335,8 @@ function UpdateProjection(props) {
       case paletteConstants.SET_CUSTOM:
       case paletteConstants.SET_DISABLED_CLASSIFICATION:
       case paletteConstants.CLEAR_CUSTOM:
+      case paletteConstants.SET_SIZE:
+      case paletteConstants.CLEAR_SIZE:
       case layerConstants.ADD_LAYERS_FOR_EVENT:
         return setTimeout(reloadLayers, 100);
       case vectorStyleConstants.SET_FILTER_RANGE:

web/js/mapUI/mapUI.js

@@ -128,6 +128,8 @@ function MapUI(props) {
       case paletteConstants.SET_CUSTOM:
       case paletteConstants.SET_DISABLED_CLASSIFICATION:
       case paletteConstants.CLEAR_CUSTOM:
+      case paletteConstants.SET_SIZE:
+      case paletteConstants.CLEAR_SIZE:
       case layerConstants.ADD_LAYERS_FOR_EVENT:
       case vectorStyleConstants.SET_FILTER_RANGE:
       case vectorStyleConstants.SET_VECTORSTYLE:

web/js/modules/layers/reducers.js

@@ -29,6 +29,8 @@ import {
   CLEAR_CUSTOM as CLEAR_CUSTOM_PALETTE,
   SET_THRESHOLD_RANGE_AND_SQUASH,
   SET_DISABLED_CLASSIFICATION,
+  SET_SIZE,
+  CLEAR_SIZE,
 } from '../palettes/constants';
 import {
   CLEAR_VECTORSTYLE,
@@ -230,6 +232,29 @@ export function layerReducer(state = initialState, action) {
       });
     }
 
+    case CLEAR_SIZE: {
+      return update(state, {
+        [compareState]: {
+          layers: {
+            [getLayerIndex()]: {
+              size: { $set: undefined },
+            },
+          },
+        },
+      });
+    }
+
+    case SET_SIZE:
+      return update(state, {
+        [compareState]: {
+          layers: {
+            [getLayerIndex()]: {
+              size: { $set: action.size },
+            },
+          },
+        },
+      });
+
     case SET_FILTER_RANGE: {
       return update(state, {
         [compareState]: {

web/js/modules/layers/reducers.test.js

@@ -19,6 +19,8 @@ import {
   SET_CUSTOM as SET_CUSTOM_PALETTE,
   CLEAR_CUSTOM as CLEAR_CUSTOM_PALETTE,
   SET_THRESHOLD_RANGE_AND_SQUASH,
+  SET_SIZE,
+  CLEAR_SIZE,
 } from '../palettes/constants';
 
 const config = fixtures.config();
@@ -238,6 +240,34 @@ describe('layer Reducer tests', () => {
     expect(getTestLayer(response.active.layers).custom).toEqual(['custom-id']);
   });
 
+  test('SET_SIZE action sets size for given layer [layers-reducer-set-size]', () => {
+    const response = layerReducer(initialState, {
+      type: SET_SIZE,
+      id: 'terra-cr',
+      activeString: 'active',
+      size: 15,
+    });
+
+    expect(getTestLayer(response.active.layers).size).toEqual(15);
+  });
+
+  test('CLEAR_SIZE action removed size value [layers-reducer-clear-size]', () => {
+    const customInitial = update(initialState, {
+      active: {
+        layers: {
+          2: { size: { $set: 15 } },
+        },
+      },
+    });
+    const response = layerReducer(customInitial, {
+      type: CLEAR_SIZE,
+      id: 'terra-cr',
+      activeString: 'active',
+    });
+    expect(getTestLayer(customInitial.active.layers).size).toEqual(15);
+    expect(getTestLayer(response.active.layers).size).toEqual(undefined);
+  });
+
   test('UPDATE_OPACITY action updates opacity for given layer [layers-reducer-update-opacity]', () => {
     const response = layerReducer(initialState, {
       type: UPDATE_OPACITY,

web/js/modules/layers/selectors.js

@@ -39,6 +39,7 @@ export function addLayer(id, spec = {}, layersParam, layerConfig, overlayLength,
   def.squash = spec.squash || undefined;
   def.disabled = spec.disabled || undefined;
   def.count = spec.count || def.count || undefined;
+  def.size = spec.size || undefined;
 
   if (Array.isArray(spec.bandCombo)) {
     def.bandCombo = {

web/js/modules/layers/util.js

@@ -846,7 +846,7 @@ export function serializeLayers(layers, state, groupName) {
         value: bandComboString,
       });
     }
-    if (def.palette && (def.custom || def.min || def.max || def.squash || def.disabled || (palettes[def.id] && palettes[def.id].maps && palettes[def.id].maps.length > 1))) {
+    if (def.palette && (def.custom || def.min || def.max || def.squash || def.disabled || def.size || (palettes[def.id] && palettes[def.id].maps && palettes[def.id].maps.length > 1))) {
       // If layer has palette and palette attributes
       const paletteAttributeArray = getPaletteAttributeArray(
         def.id,
@@ -913,6 +913,7 @@ const getLayerSpec = (attributes) => {
   let custom;
   let disabled;
   let count;
+  let size;
   let bandCombo;
 
   lodashEach(attributes, (attr) => {
@@ -1008,13 +1009,17 @@ const getLayerSpec = (attributes) => {
     if (attr.id === 'count') {
       count = Number(attr.value);
     }
+    if (attr.id === 'size') {
+      size = attr.value;
+    }
   });
 
   return {
     hidden,
     opacity,
     count,
     bandCombo,
+    size,
 
     // only include palette attributes if Array.length condition
     // is true: https://stackoverflow.com/a/40560953/4589331

web/js/modules/map/util.js

@@ -337,6 +337,9 @@ export async function promiseImageryForTour(state, layers, dateString, activeStr
     if (layer.squash) {
       keys.push('squash');
     }
+    if (layer.size) {
+      keys.push(`size=${layer.size}`);
+    }
     if (keys.length > 0) {
       options.style = keys.join(',');
     }

web/js/modules/palettes/actions.js

@@ -8,6 +8,8 @@ import {
   SET_THRESHOLD_RANGE_AND_SQUASH,
   CLEAR_CUSTOM,
   SET_CUSTOM,
+  SET_SIZE,
+  CLEAR_SIZE,
   SET_DISABLED_CLASSIFICATION,
   LOADED_CUSTOM_PALETTES,
 } from './constants';
@@ -17,6 +19,8 @@ import {
   clearCustomSelector,
   refreshDisabledSelector,
   setDisabledSelector,
+  setSize as setSizeSelector,
+  clearSize as clearSizeSelector,
 } from './selectors';
 
 /**
@@ -122,6 +126,46 @@ export function clearCustomPalette(layerId, index, groupName) {
   };
 }
 
+export function setSize(layerId, size, index, groupName) {
+  return (dispatch, getState) => {
+    const state = getState();
+    const newActivePalettesObj = setSizeSelector(
+      layerId,
+      size,
+      index,
+      state.palettes[groupName],
+      state,
+    );
+    dispatch({
+      type: SET_SIZE,
+      groupName,
+      activeString: groupName,
+      layerId,
+      palettes: newActivePalettesObj,
+      size,
+    });
+  };
+}
+
+export function clearSize(layerId, index, groupName) {
+  return (dispatch, getState) => {
+    const state = getState();
+    const newActivePalettesObj = clearSizeSelector(
+      layerId,
+      index,
+      state.palettes[groupName],
+      state,
+    );
+    dispatch({
+      type: CLEAR_SIZE,
+      groupName,
+      activeString: groupName,
+      layerId,
+      palettes: newActivePalettesObj,
+    });
+  };
+}
+
 export function setToggledClassification(layerId, classIndex, index, groupName) {
   return (dispatch, getState) => {
     const state = getState();
@@ -187,6 +231,9 @@ export function clearCustoms() {
         if (colormap.disabled) {
           dispatch(setToggledClassification(key, undefined, index, groupName));
         }
+        if (colormap.size) {
+          dispatch(clearSize(key, index, groupName));
+        }
       });
     });
   };
@@ -244,6 +291,9 @@ export function refreshPalettes(activePalettes) {
         if (colormap.disabled) {
           dispatch(refreshDisabledClassification(key, colormap.disabled, index, groupName));
         }
+        if (colormap.size) {
+          dispatch(setSize(key, colormap.size, index, groupName));
+        }
       });
     });
   };