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,7 @@ import {
   setThresholdRangeAndSquash,
   setCustomPalette,
   clearCustomPalette,
+  setSize,
   setToggledClassification,
   refreshDisabledClassification,
 } from '../../../modules/palettes/actions';
@@ -337,14 +339,17 @@ class LayerSettings extends React.Component {
     let renderCustomizations;
     const {
       setOpacity,
+      setSize,
       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 +371,15 @@ class LayerSettings extends React.Component {
           setOpacity={setOpacity}
           layer={layer}
         />
+        {pointSizeLayer && (
+        <Size
+          start={layer.size}
+          setSize={setSize}
+          layer={layer}
+          index={0}
+          groupName={groupName}
+        />
+        )}
         {this.renderGranuleSettings()}
         {renderCustomizations}
         {titilerLayer && <BandSelection layer={layer} />}
@@ -447,6 +461,9 @@ const mapDispatchToProps = (dispatch) => ({
   setOpacity: (id, opacity) => {
     dispatch(setOpacity(id, opacity));
   },
+  setSize: (layerId, size, index, groupName) => {
+    dispatch(setSize(layerId, size, index, groupName));
+  },
   updateGranuleLayerOptions: (dates, def, count) => {
     dispatch(updateGranuleLayerOptions(dates, def, count));
   },
@@ -485,6 +502,7 @@ LayerSettings.propTypes = {
   screenHeight: PropTypes.number,
   setCustomPalette: PropTypes.func,
   setOpacity: PropTypes.func,
+  setSize: PropTypes.func,
   setStyle: PropTypes.func,
   setThresholdRange: PropTypes.func,
   toggleClassification: PropTypes.func,

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { debounce } from 'lodash';
+
+class SizeSelect extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.start,
+    };
+
+    this.debouncedSetSize = debounce((layerId, size, index, groupName) => {
+      const { setSize } = this.props;
+      setSize(layerId, size, index, groupName);
+    }, 100);
+  }
+
+  render() {
+    const {
+      layer,
+      start,
+      index,
+      groupName,
+    } = this.props;
+    const { value } = this.state;
+    return (
+      <div className="layer-size-select settings-component">
+        <h2 className="wv-header">Point Size</h2>
+        <input
+          type="range"
+          className="form-range"
+          min={0}
+          max={25}
+          step={5}
+          defaultValue={start}
+          onChange={(e) => {
+            const val = parseFloat(e.target.value);
+            this.debouncedSetSize(layer.id, val, index, groupName);
+            this.setState({ value: val });
+          }}
+        />
+        <div className="wv-label wv-label-size mt-1">
+          {value <= 0 ? 1 : value}
+        </div>
+      </div>
+    );
+  }
+}
+SizeSelect.defaultProps = {
+  start: 0,
+};
+SizeSelect.propTypes = {
+  layer: PropTypes.object,
+  setSize: 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,7 @@ function UpdateProjection(props) {
       case paletteConstants.SET_CUSTOM:
       case paletteConstants.SET_DISABLED_CLASSIFICATION:
       case paletteConstants.CLEAR_CUSTOM:
+      case paletteConstants.SET_SIZE:
       case layerConstants.ADD_LAYERS_FOR_EVENT:
         return setTimeout(reloadLayers, 100);
       case vectorStyleConstants.SET_FILTER_RANGE:

web/js/mapUI/mapUI.js

@@ -128,6 +128,7 @@ function MapUI(props) {
       case paletteConstants.SET_CUSTOM:
       case paletteConstants.SET_DISABLED_CLASSIFICATION:
       case paletteConstants.CLEAR_CUSTOM:
+      case paletteConstants.SET_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,7 @@ import {
   CLEAR_CUSTOM as CLEAR_CUSTOM_PALETTE,
   SET_THRESHOLD_RANGE_AND_SQUASH,
   SET_DISABLED_CLASSIFICATION,
+  SET_SIZE,
 } from '../palettes/constants';
 import {
   CLEAR_VECTORSTYLE,
@@ -230,6 +231,17 @@ export function layerReducer(state = initialState, action) {
       });
     }
 
+    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,7 @@ import {
   SET_CUSTOM as SET_CUSTOM_PALETTE,
   CLEAR_CUSTOM as CLEAR_CUSTOM_PALETTE,
   SET_THRESHOLD_RANGE_AND_SQUASH,
+  SET_SIZE,
 } from '../palettes/constants';
 
 const config = fixtures.config();
@@ -238,6 +239,17 @@ 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-custom-palette]', () => {
+    const response = layerReducer(initialState, {
+      type: SET_SIZE,
+      id: 'terra-cr',
+      activeString: 'active',
+      size: 15,
+    });
+
+    expect(getTestLayer(response.active.layers).size).toEqual(15);
+  });
+
   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,7 @@ import {
   SET_THRESHOLD_RANGE_AND_SQUASH,
   CLEAR_CUSTOM,
   SET_CUSTOM,
+  SET_SIZE,
   SET_DISABLED_CLASSIFICATION,
   LOADED_CUSTOM_PALETTES,
 } from './constants';
@@ -17,6 +18,7 @@ import {
   clearCustomSelector,
   refreshDisabledSelector,
   setDisabledSelector,
+  setSize as setSizeSelector,
 } from './selectors';
 
 /**
@@ -122,6 +124,27 @@ 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 setToggledClassification(layerId, classIndex, index, groupName) {
   return (dispatch, getState) => {
     const state = getState();

web/js/modules/palettes/actions.test.js

@@ -9,6 +9,7 @@ import {
   setThresholdRangeAndSquash,
   setCustomPalette,
   clearCustomPalette,
+  setSize,
 } from './actions';
 import { addLayer } from '../layers/selectors';
 import {
@@ -18,6 +19,7 @@ import {
   SET_THRESHOLD_RANGE_AND_SQUASH,
   SET_CUSTOM,
   CLEAR_CUSTOM,
+  SET_SIZE,
 } from './constants';
 import fixtures from '../../fixtures';
 
@@ -256,4 +258,15 @@ describe('Test lookup actions [palettes-actions-lookup]', () => {
       );
     },
   );
+  test(`test ${setSize} action [palettes-actions-set-size]`, () => {
+    const store = mockStore(stateWithLayers);
+    store.dispatch(setSize('terra-aod', 15, 0, 'active'));
+    const response = store.getActions()[0];
+
+    expect(response.type).toEqual(SET_SIZE);
+    expect(response.size).toEqual(15);
+    expect(response.groupName).toEqual('active');
+    expect(response.layerId).toEqual('terra-aod');
+    expect(response.activeString).toEqual('active');
+  });
 });

web/js/modules/palettes/constants.js

@@ -8,6 +8,7 @@ export const SET_THRESHOLD_RANGE_AND_SQUASH = 'PALETTES/SET_THRESHOLD_RANGE_AND_
 export const CLEAR_CUSTOM = 'PALETTES/CLEAR_CUSTOM';
 export const CLEAR_CUSTOMS = 'PALETTES/CLEAR_CUSTOMS';
 export const SET_CUSTOM = 'PALETTES/SET_CUSTOM';
+export const SET_SIZE = 'PALETTES/SET_SIZE';
 export const LOADED_CUSTOM_PALETTES = 'PALETTES/LOADED_CUSTOM_PALETTES';
 export const BULK_PALETTE_RENDERING_SUCCESS = 'PALETTES/BULK_PALETTE_RENDERING_SUCCESS';
 export const BULK_PALETTE_PRELOADING_SUCCESS = 'PALETTES/BULK_PALETTE_PRELOADING_SUCCESS';
@@ -18,5 +19,6 @@ export const PALETTE_STRINGS_PERMALINK_ARRAY = [
   'min',
   'max',
   'disabled',
+  'size',
 ];
-export const CUSTOM_PALETTE_TYPE_ARRAY = ['custom', 'squash', 'min', 'max', 'disabled'];
+export const CUSTOM_PALETTE_TYPE_ARRAY = ['custom', 'squash', 'min', 'max', 'disabled', 'size'];

web/js/modules/palettes/reducers.js

@@ -15,6 +15,7 @@ import {
   BULK_PALETTE_PRELOADING_SUCCESS,
   CLEAR_CUSTOM,
   SET_DISABLED_CLASSIFICATION,
+  SET_SIZE,
 } from './constants';
 import { INIT_SECOND_LAYER_GROUP } from '../layers/constants';
 
@@ -70,6 +71,7 @@ export function paletteReducer(state = defaultPaletteState, action) {
     case SET_CUSTOM:
     case SET_DISABLED_CLASSIFICATION:
     case CLEAR_CUSTOM:
+    case SET_SIZE:
       return lodashAssign({}, state, {
         [groupName]: action.palettes || {},
       });