From 1de994ab746d2c0bd3a199e60132d25d137f4aba Mon Sep 17 00:00:00 2001 From: christof-wittreich Date: Thu, 9 Jan 2025 17:47:51 -0500 Subject: [PATCH 1/4] Added sizing for MODIS_Aqua_Thermal_Anomalies_All --- .../layer/settings/layer-settings.js | 18 ++++++ web/js/components/layer/settings/size.js | 58 +++++++++++++++++++ web/js/map/layerbuilder.js | 2 + .../update-projection/updateProjection.js | 1 + web/js/mapUI/mapUI.js | 1 + web/js/modules/layers/reducers.js | 12 ++++ web/js/modules/layers/reducers.test.js | 12 ++++ web/js/modules/layers/selectors.js | 1 + web/js/modules/layers/util.js | 7 ++- web/js/modules/map/util.js | 3 + web/js/modules/palettes/actions.js | 23 ++++++++ web/js/modules/palettes/actions.test.js | 13 +++++ web/js/modules/palettes/constants.js | 4 +- web/js/modules/palettes/reducers.js | 2 + web/js/modules/palettes/selectors.js | 21 ++++++- web/js/modules/palettes/util.js | 29 +++++++++- web/js/modules/vector-styles/selectors.js | 3 + web/scss/features/sidebar.scss | 1 + 18 files changed, 206 insertions(+), 5 deletions(-) create mode 100644 web/js/components/layer/settings/size.js diff --git a/web/js/components/layer/settings/layer-settings.js b/web/js/components/layer/settings/layer-settings.js index 7997da04ed..ad11eb37ab 100644 --- a/web/js/components/layer/settings/layer-settings.js +++ b/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 && ( + + )} {this.renderGranuleSettings()} {renderCustomizations} {titilerLayer && } @@ -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, diff --git a/web/js/components/layer/settings/size.js b/web/js/components/layer/settings/size.js new file mode 100644 index 0000000000..89973c84c9 --- /dev/null +++ b/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 ( +
+

Point Size

+ { + const val = parseFloat(e.target.value); + this.debouncedSetSize(layer.id, val, index, groupName); + this.setState({ value: val }); + }} + /> +
+ {value <= 0 ? 1 : value} +
+
+ ); + } +} +SizeSelect.defaultProps = { + start: 0, +}; +SizeSelect.propTypes = { + layer: PropTypes.object, + setSize: PropTypes.func, + start: PropTypes.number, +}; + +export default SizeSelect; diff --git a/web/js/map/layerbuilder.js b/web/js/map/layerbuilder.js index 51f508747c..680e999e47 100644 --- a/web/js/map/layerbuilder.js +++ b/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 = ''; diff --git a/web/js/mapUI/components/update-projection/updateProjection.js b/web/js/mapUI/components/update-projection/updateProjection.js index ba200ee3c0..0997810c65 100644 --- a/web/js/mapUI/components/update-projection/updateProjection.js +++ b/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: diff --git a/web/js/mapUI/mapUI.js b/web/js/mapUI/mapUI.js index 4a1491e4b8..e941a1d0e1 100644 --- a/web/js/mapUI/mapUI.js +++ b/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: diff --git a/web/js/modules/layers/reducers.js b/web/js/modules/layers/reducers.js index f25ec7a361..842848f371 100644 --- a/web/js/modules/layers/reducers.js +++ b/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]: { diff --git a/web/js/modules/layers/reducers.test.js b/web/js/modules/layers/reducers.test.js index 9a8da94232..0e5e3fc333 100644 --- a/web/js/modules/layers/reducers.test.js +++ b/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, diff --git a/web/js/modules/layers/selectors.js b/web/js/modules/layers/selectors.js index ab3e9b4304..94872a2aab 100644 --- a/web/js/modules/layers/selectors.js +++ b/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 = { diff --git a/web/js/modules/layers/util.js b/web/js/modules/layers/util.js index aaadc1f562..52343f7207 100644 --- a/web/js/modules/layers/util.js +++ b/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,6 +1009,9 @@ const getLayerSpec = (attributes) => { if (attr.id === 'count') { count = Number(attr.value); } + if (attr.id === 'size') { + size = attr.value; + } }); return { @@ -1015,6 +1019,7 @@ const getLayerSpec = (attributes) => { opacity, count, bandCombo, + size, // only include palette attributes if Array.length condition // is true: https://stackoverflow.com/a/40560953/4589331 diff --git a/web/js/modules/map/util.js b/web/js/modules/map/util.js index 3a91177384..ce87475a06 100644 --- a/web/js/modules/map/util.js +++ b/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(','); } diff --git a/web/js/modules/palettes/actions.js b/web/js/modules/palettes/actions.js index 06060065a3..74411bd09e 100644 --- a/web/js/modules/palettes/actions.js +++ b/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(); diff --git a/web/js/modules/palettes/actions.test.js b/web/js/modules/palettes/actions.test.js index 01a1516ad0..8ea4faf511 100644 --- a/web/js/modules/palettes/actions.test.js +++ b/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'); + }); }); diff --git a/web/js/modules/palettes/constants.js b/web/js/modules/palettes/constants.js index 0fed270830..de02fd0bcb 100644 --- a/web/js/modules/palettes/constants.js +++ b/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']; diff --git a/web/js/modules/palettes/reducers.js b/web/js/modules/palettes/reducers.js index 1bc7f31ade..ac458b477e 100644 --- a/web/js/modules/palettes/reducers.js +++ b/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 || {}, }); diff --git a/web/js/modules/palettes/selectors.js b/web/js/modules/palettes/selectors.js index e3962bdba0..56a30be450 100644 --- a/web/js/modules/palettes/selectors.js +++ b/web/js/modules/palettes/selectors.js @@ -134,7 +134,7 @@ const useLookup = function(layerId, palettesObj, state) { use = true; return false; } - } else if (palette.legend.colors.length > 1) { + } else if (palette.legend.colors.length > 1 || !lodashIsUndefined(palette.size)) { use = true; } }); @@ -364,6 +364,9 @@ export function getKey(layerId, groupStr, state) { if (def.squash) { keys.push('squash'); } + if (def.size) { + keys.push(`size=${def.size}`); + } return keys.join(','); } @@ -497,6 +500,22 @@ export function clearCustomSelector(layerId, index, palettes, state) { return updateLookup(layerId, newPalettes, state); } +export function setSize(layerId, size, index, palettes, state) { + let newPalettes = prepare(layerId, palettes, state); + newPalettes = update(newPalettes, { + [layerId]: { + maps: { + [index]: { + $merge: { + size, + }, + }, + }, + }, + }); + return updateLookup(layerId, newPalettes, state); +} + export function isPaletteAllowed(layerId, config) { const { palette } = config.layers[layerId]; if (!palette || palette.immutable) { diff --git a/web/js/modules/palettes/util.js b/web/js/modules/palettes/util.js index 16fdecf4d9..ab9f910583 100644 --- a/web/js/modules/palettes/util.js +++ b/web/js/modules/palettes/util.js @@ -16,6 +16,7 @@ import { setRange as setRangeSelector, findIndex as findPaletteExtremeIndex, initDisabledSelector, + setSize, } from './selectors'; import util from '../../util/util'; @@ -290,6 +291,7 @@ export function getPaletteAttributeArray(layerId, palettes, state) { let maxObj = lodashAssign({}, { key: 'max', array: [] }, DEFAULT_OBJ); let squashObj = lodashAssign({}, { key: 'squash', array: [] }, DEFAULT_OBJ); let disabledObj = lodashAssign({}, { key: 'disabled', array: [] }, DEFAULT_OBJ); + let sizeObj = lodashAssign({}, { key: 'size', array: [] }, DEFAULT_OBJ); const attrArray = []; for (let i = 0; i < count; i += 1) { if (!palettes[layerId].maps[i]) { @@ -309,6 +311,7 @@ export function getPaletteAttributeArray(layerId, palettes, state) { const disabledValue = paletteDef.disabled && paletteDef.disabled.length ? paletteDef.disabled.join('-') : undefined; + const sizeValue = paletteDef.size || undefined; palObj = createPaletteAttributeObject( paletteDef, @@ -341,9 +344,15 @@ export function getPaletteAttributeArray(layerId, palettes, state) { disabledObj, count, ); + sizeObj = createPaletteAttributeObject( + paletteDef, + sizeValue, + sizeObj, + count, + ); } - [palObj, minObj, maxObj, squashObj, disabledObj].forEach((obj) => { + [palObj, minObj, maxObj, squashObj, disabledObj, sizeObj].forEach((obj) => { if (obj.isActive || (obj.key === 'disabled' && obj.value !== '')) { attrArray.push({ id: obj.key === 'custom' ? 'palette' : obj.key, @@ -450,10 +459,26 @@ export function loadPalettes(permlinkState, state) { palettes: { [stateObj.groupStr]: { $set: newPalettes } }, }); } catch (error) { - console.warn(` Invalid palette: ${value}`); + console.warn(`Invalid palette: ${value}`); } }); } + if (layerDef.size) { + try { + const newPalettes = setSize( + layerId, + layerDef.size, + 0, + state.palettes[stateObj.groupStr], + state, + ); + state = update(state, { + palettes: { [stateObj.groupStr]: { $set: newPalettes } }, + }); + } catch (error) { + console.warn(`Unable to set point size: ${layerDef.size}`); + } + } if (min.length > 0 || max.length > 0) { count = getCount(layerId, state); for (let i = 0; i < count; i += 1) { diff --git a/web/js/modules/vector-styles/selectors.js b/web/js/modules/vector-styles/selectors.js index 40c59b6476..e1e389dbf3 100644 --- a/web/js/modules/vector-styles/selectors.js +++ b/web/js/modules/vector-styles/selectors.js @@ -299,6 +299,9 @@ export function clearStyleFunction(def, vectorStyleId, vectorStyles, layer, stat export const applyStyle = (def, olVectorLayer, state, options) => { const { config } = state; const { vectorStyles } = config; + if (def.size && def.size >= 5) { + def.vectorStyle.id += `_size${def.size}`; + } const vectorStyleId = def.vectorStyle.id; if (!vectorStyles || !vectorStyleId) { diff --git a/web/scss/features/sidebar.scss b/web/scss/features/sidebar.scss index 0e15394cec..4d040cc763 100644 --- a/web/scss/features/sidebar.scss +++ b/web/scss/features/sidebar.scss @@ -912,6 +912,7 @@ p.recharts-tooltip-label { } .wv-label-opacity, + .wv-label-size, .wv-label-granule.count { text-align: right; } From 1b739f98fe65ec1db74fcd081fbb4677a0e67185 Mon Sep 17 00:00:00 2001 From: christof-wittreich Date: Mon, 20 Jan 2025 15:47:32 -0500 Subject: [PATCH 2/4] Feedback changes --- .../layer/settings/layer-settings.js | 7 ++ web/js/components/layer/settings/size.js | 78 +++++++++---------- .../update-projection/updateProjection.js | 1 + web/js/mapUI/mapUI.js | 1 + web/js/modules/layers/reducers.js | 13 ++++ web/js/modules/layers/reducers.test.js | 20 ++++- web/js/modules/palettes/actions.js | 28 +++++++ web/js/modules/palettes/constants.js | 1 + web/js/modules/palettes/reducers.js | 2 + web/js/modules/palettes/selectors.js | 17 ++++ 10 files changed, 127 insertions(+), 41 deletions(-) diff --git a/web/js/components/layer/settings/layer-settings.js b/web/js/components/layer/settings/layer-settings.js index ad11eb37ab..f980dfc527 100644 --- a/web/js/components/layer/settings/layer-settings.js +++ b/web/js/components/layer/settings/layer-settings.js @@ -39,6 +39,7 @@ import { setCustomPalette, clearCustomPalette, setSize, + clearSize, setToggledClassification, refreshDisabledClassification, } from '../../../modules/palettes/actions'; @@ -340,6 +341,7 @@ class LayerSettings extends React.Component { const { setOpacity, setSize, + clearSize, customPalettesIsActive, layer, palettedAllowed, @@ -375,6 +377,7 @@ class LayerSettings extends React.Component { ({ 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)); }, @@ -503,6 +509,7 @@ LayerSettings.propTypes = { setCustomPalette: PropTypes.func, setOpacity: PropTypes.func, setSize: PropTypes.func, + clearSize: PropTypes.func, setStyle: PropTypes.func, setThresholdRange: PropTypes.func, toggleClassification: PropTypes.func, diff --git a/web/js/components/layer/settings/size.js b/web/js/components/layer/settings/size.js index 89973c84c9..732f45c796 100644 --- a/web/js/components/layer/settings/size.js +++ b/web/js/components/layer/settings/size.js @@ -1,50 +1,47 @@ -import React from 'react'; +import React, { useState } 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, - }; +function SizeSelect(props) { + const { + layer, + start, + index, + groupName, + } = props; - this.debouncedSetSize = debounce((layerId, size, index, groupName) => { - const { setSize } = this.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); - } + } + }, 100); - render() { - const { - layer, - start, - index, - groupName, - } = this.props; - const { value } = this.state; - return ( -
-

Point Size

- { - const val = parseFloat(e.target.value); - this.debouncedSetSize(layer.id, val, index, groupName); - this.setState({ value: val }); - }} - /> -
- {value <= 0 ? 1 : value} -
+ return ( +
+

Point Size

+ { + const val = parseFloat(e.target.value); + debouncedSetSize(layer.id, val, index, groupName); + setValue(val); + }} + /> +
+ {value <= 0 ? 1 : value}
- ); - } +
+ ); } SizeSelect.defaultProps = { start: 0, @@ -52,6 +49,7 @@ SizeSelect.defaultProps = { SizeSelect.propTypes = { layer: PropTypes.object, setSize: PropTypes.func, + clearSize: PropTypes.func, start: PropTypes.number, }; diff --git a/web/js/mapUI/components/update-projection/updateProjection.js b/web/js/mapUI/components/update-projection/updateProjection.js index 0997810c65..48642936ab 100644 --- a/web/js/mapUI/components/update-projection/updateProjection.js +++ b/web/js/mapUI/components/update-projection/updateProjection.js @@ -336,6 +336,7 @@ function UpdateProjection(props) { 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: diff --git a/web/js/mapUI/mapUI.js b/web/js/mapUI/mapUI.js index e941a1d0e1..bb5906ddc3 100644 --- a/web/js/mapUI/mapUI.js +++ b/web/js/mapUI/mapUI.js @@ -129,6 +129,7 @@ function MapUI(props) { 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: diff --git a/web/js/modules/layers/reducers.js b/web/js/modules/layers/reducers.js index 842848f371..a1948ca732 100644 --- a/web/js/modules/layers/reducers.js +++ b/web/js/modules/layers/reducers.js @@ -30,6 +30,7 @@ import { SET_THRESHOLD_RANGE_AND_SQUASH, SET_DISABLED_CLASSIFICATION, SET_SIZE, + CLEAR_SIZE, } from '../palettes/constants'; import { CLEAR_VECTORSTYLE, @@ -231,6 +232,18 @@ 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]: { diff --git a/web/js/modules/layers/reducers.test.js b/web/js/modules/layers/reducers.test.js index 0e5e3fc333..79c0a50331 100644 --- a/web/js/modules/layers/reducers.test.js +++ b/web/js/modules/layers/reducers.test.js @@ -20,6 +20,7 @@ import { CLEAR_CUSTOM as CLEAR_CUSTOM_PALETTE, SET_THRESHOLD_RANGE_AND_SQUASH, SET_SIZE, + CLEAR_SIZE, } from '../palettes/constants'; const config = fixtures.config(); @@ -239,7 +240,7 @@ 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]', () => { + test('SET_SIZE action sets size for given layer [layers-reducer-set-size]', () => { const response = layerReducer(initialState, { type: SET_SIZE, id: 'terra-cr', @@ -250,6 +251,23 @@ describe('layer Reducer tests', () => { 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, diff --git a/web/js/modules/palettes/actions.js b/web/js/modules/palettes/actions.js index 74411bd09e..0c52991e31 100644 --- a/web/js/modules/palettes/actions.js +++ b/web/js/modules/palettes/actions.js @@ -9,6 +9,7 @@ import { CLEAR_CUSTOM, SET_CUSTOM, SET_SIZE, + CLEAR_SIZE, SET_DISABLED_CLASSIFICATION, LOADED_CUSTOM_PALETTES, } from './constants'; @@ -19,6 +20,7 @@ import { refreshDisabledSelector, setDisabledSelector, setSize as setSizeSelector, + clearSize as clearSizeSelector, } from './selectors'; /** @@ -145,6 +147,26 @@ export function setSize(layerId, size, index, groupName) { }; } +export function clearSize(layerId, index, groupName) { + return (dispatch, getState) => { + const state = getState(); + const newActivePalettesObj = clearSizeSelector( + layerId, + undefined, + 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(); @@ -210,6 +232,9 @@ export function clearCustoms() { if (colormap.disabled) { dispatch(setToggledClassification(key, undefined, index, groupName)); } + if (colormap.size) { + dispatch(clearSize(key, index, groupName)); + } }); }); }; @@ -267,6 +292,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)); + } }); }); }; diff --git a/web/js/modules/palettes/constants.js b/web/js/modules/palettes/constants.js index de02fd0bcb..7cb30ee316 100644 --- a/web/js/modules/palettes/constants.js +++ b/web/js/modules/palettes/constants.js @@ -9,6 +9,7 @@ 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 CLEAR_SIZE = 'PALETTES/CLEAR_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'; diff --git a/web/js/modules/palettes/reducers.js b/web/js/modules/palettes/reducers.js index ac458b477e..2f1bd12105 100644 --- a/web/js/modules/palettes/reducers.js +++ b/web/js/modules/palettes/reducers.js @@ -16,6 +16,7 @@ import { CLEAR_CUSTOM, SET_DISABLED_CLASSIFICATION, SET_SIZE, + CLEAR_SIZE, } from './constants'; import { INIT_SECOND_LAYER_GROUP } from '../layers/constants'; @@ -72,6 +73,7 @@ export function paletteReducer(state = defaultPaletteState, action) { case SET_DISABLED_CLASSIFICATION: case CLEAR_CUSTOM: case SET_SIZE: + case CLEAR_SIZE: return lodashAssign({}, state, { [groupName]: action.palettes || {}, }); diff --git a/web/js/modules/palettes/selectors.js b/web/js/modules/palettes/selectors.js index 56a30be450..fb1ea71f80 100644 --- a/web/js/modules/palettes/selectors.js +++ b/web/js/modules/palettes/selectors.js @@ -516,6 +516,23 @@ export function setSize(layerId, size, index, palettes, state) { return updateLookup(layerId, newPalettes, state); } +export function clearSize(layerId, index, palettes, state) { + index = lodashIsUndefined(index) ? 0 : index; + const active = palettes[layerId]; + if (!active) { + return palettes; + } + const palette = active.maps[index]; + if (!palette.size) { + return palettes; + } + delete palette.size; + const newPalettes = update(palettes, { + [layerId]: { maps: { [index]: { $set: palette } } }, + }); // remove size key + return updateLookup(layerId, newPalettes, state); +} + export function isPaletteAllowed(layerId, config) { const { palette } = config.layers[layerId]; if (!palette || palette.immutable) { From 03eb5a65437dc6ddae566beeca88b714f0b21a03 Mon Sep 17 00:00:00 2001 From: christof-wittreich Date: Tue, 21 Jan 2025 15:55:49 -0500 Subject: [PATCH 3/4] Removed extra passed parameter --- web/js/modules/palettes/actions.js | 1 - 1 file changed, 1 deletion(-) diff --git a/web/js/modules/palettes/actions.js b/web/js/modules/palettes/actions.js index 0c52991e31..b780e1f29d 100644 --- a/web/js/modules/palettes/actions.js +++ b/web/js/modules/palettes/actions.js @@ -152,7 +152,6 @@ export function clearSize(layerId, index, groupName) { const state = getState(); const newActivePalettesObj = clearSizeSelector( layerId, - undefined, index, state.palettes[groupName], state, From 3f4a251fc8c254765bf592e98bfd248f78283b6a Mon Sep 17 00:00:00 2001 From: christof-wittreich Date: Thu, 23 Jan 2025 15:27:11 -0500 Subject: [PATCH 4/4] Updated labels --- web/js/components/layer/settings/size.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/js/components/layer/settings/size.js b/web/js/components/layer/settings/size.js index 732f45c796..47e58730df 100644 --- a/web/js/components/layer/settings/size.js +++ b/web/js/components/layer/settings/size.js @@ -23,7 +23,7 @@ function SizeSelect(props) { return (
-

Point Size

+

Point Radius

{value <= 0 ? 1 : value} + px
);