From 0007bac11dfd3aae80d3b5989cebe725800c67c9 Mon Sep 17 00:00:00 2001 From: Lisa Stillwell Date: Wed, 6 Nov 2024 14:16:00 -0500 Subject: [PATCH] #296 update data range sliders to support units settings --- .../settings/colormaps/colormap-slider.js | 118 ++++++++++++++---- .../trays/settings/colormaps/data-range.js | 22 +++- .../trays/settings/colormaps/utils.js | 18 ++- src/utils/default-styles.js | 2 +- 4 files changed, 129 insertions(+), 31 deletions(-) diff --git a/src/components/trays/settings/colormaps/colormap-slider.js b/src/components/trays/settings/colormaps/colormap-slider.js index 4532000..7131fcd 100644 --- a/src/components/trays/settings/colormaps/colormap-slider.js +++ b/src/components/trays/settings/colormaps/colormap-slider.js @@ -3,8 +3,8 @@ import PropTypes from 'prop-types'; import SldStyleParser from 'geostyler-sld-parser'; import { Slider, Box } from '@mui/joy'; import { useSettings } from '@context'; -import { restoreColorMapType } from '@utils/map-utils'; -import { maxSliderValues } from './utils'; +import { restoreColorMapType, metersToFeet, feetToMeters, mpsToKnots, knotsToMps, mpsToMph, mphToMps } from '@utils/map-utils'; +import { maxSliderValues, sliderSteps, sliderMarkSteps } from './utils'; const MAXELE = 'maxele'; const MAXWVEL = 'maxwvel'; @@ -20,36 +20,63 @@ export const ColormapSlider = ({style}) => { const { mapStyle, + unitsType, + speedType, } = useSettings(); + // convert the value to imperial, if not metric + const convertValue = (product, v) => { + let newValue = v; + + if (unitsType.current !== "metric") { + // handle speed conversions + if(product === MAXWVEL) { + if(speedType.current === "knots") { + newValue = mpsToKnots(v); + } + else { // mph + newValue = mpsToMph(v); + } + } + else { // handle distance conversion + newValue = metersToFeet(v); + } + } + + return Math.round(newValue); + }; + const sldParser = new SldStyleParser(); - // set the correct slider values for the appropriate style + // set the correct slider values for the appropriate style and unit type const setSliderParams = (style) => { - let max_slider_value = 0; let slider_step = 0; const marks = []; + let product = ''; - if (style.name.includes("maxwvel")) { - max_slider_value = maxSliderValues[MAXWVEL]; - slider_step = 1; - for (let i = 0; i <= max_slider_value; i+=10) { + if (style.name.includes(MAXWVEL)) { + product = MAXWVEL; + max_slider_value = maxSliderValues[MAXWVEL][unitsType.current]; + slider_step = sliderSteps[MAXWVEL][unitsType.current]; + for (let i = 0; i <= max_slider_value; i+=sliderMarkSteps[MAXWVEL][unitsType.current]) { marks.push({ label: i, value: i }); } } else - if (style.name.includes("swan")) { - max_slider_value = maxSliderValues[SWAN]; - slider_step = 0.5; - for (let i = 0; i <= max_slider_value; i+=5) { + if (style.name.includes(SWAN)) { + product = SWAN; + max_slider_value = maxSliderValues[SWAN][unitsType.current]; + slider_step = sliderSteps[SWAN][unitsType.current]; + for (let i = 0; i <= max_slider_value; i+=sliderMarkSteps[SWAN][unitsType.current]) { marks.push({ label: i, value: i }); } } else { // maxele - max_slider_value = maxSliderValues[MAXELE]; - slider_step = 0.25; - for (let i = 0; i <= max_slider_value; i++) { + product = MAXELE; + max_slider_value = maxSliderValues[MAXELE][unitsType.current]; + slider_step = sliderSteps[MAXELE][unitsType.current]; + for (let i = 0; i <= max_slider_value; i+=sliderMarkSteps[MAXELE][unitsType.current]) { marks.push({ label: i, value: i }); } } @@ -60,7 +87,8 @@ export const ColormapSlider = ({style}) => { setMinSliderValue(0); const colormapEntries = style.rules[0].symbolizers[0].colorMap.colorMapEntries; - setValue([parseFloat(colormapEntries[colormapEntries.length-1].quantity), parseFloat(colormapEntries[0].quantity)]); + setValue([convertValue(product, parseFloat(colormapEntries[colormapEntries.length-1].quantity)), + convertValue(product, parseFloat(colormapEntries[0].quantity))]); }; useEffect(() => { @@ -86,7 +114,7 @@ export const ColormapSlider = ({style}) => { }; getDefaultStyle(); - }, []); + }, [unitsType]); const storeStyle = useCallback((style) => { // save colormap type for later restoration when it is lost @@ -109,7 +137,25 @@ export const ColormapSlider = ({style}) => { const dataRange = []; const colormapEntries = style.rules[0].symbolizers[0].colorMap.colorMapEntries; for(let i = colormapEntries.length-1; i >= 0; i--) { - dataRange.push(colormapEntries[i].quantity); + // check to see if units are set to imperial + if (unitsType.current === "imperial") { + // handle speed type range + if (style.name.includes(MAXWVEL)) { + if (speedType.current === "knots") { + dataRange.push(mpsToKnots(colormapEntries[i].quantity)); + } + else { + dataRange.push(mpsToMph(colormapEntries[i].quantity)); + } + } + else { + dataRange.push(metersToFeet(colormapEntries[i].quantity)); + } + + } + else { + dataRange.push(colormapEntries[i].quantity); + } } // if this is an intervals type of colormap, correct last entry in range if (style.rules[0].symbolizers[0].colorMap.type === "intervals") { @@ -149,22 +195,46 @@ export const ColormapSlider = ({style}) => { const colormapEntries = [...style.rules[0].symbolizers[0].colorMap.colorMapEntries]; colormapEntries.forEach((entry, idx) => { if (idx <= range.length) { - entry.quantity = range[idx]; + // need to convert actual quantity in style if unit is set to imperial + // must always refer to GeoServer adcirc layers using metric units + if (unitsType.current === "imperial") { + if (style.name.includes("maxwvel")) + entry.quantity = ((speedType.current === "mph")? + mphToMps(range[idx]) + : + knotsToMps(range[idx])); + else entry.quantity = feetToMeters(range[idx]); + } + else entry.quantity = range[idx]; + + // now set labels if (style.name.includes("maxwvel")) { - entry.label = range[idx] + " m/s"; + // 2 different speed types for imperial + if (unitsType.current === "imperial") { + entry.label = range[idx] + ((speedType.current === "knots")? " kn" : " mph"); + } + else { + entry.label = range[idx] + " " + speedType.current; + } } else { - entry.label = range[idx] + " m"; + entry.label = range[idx] + ((unitsType.current === "metric")? " m" : " ft"); } // if the colormap type is set to intervals, the last entry is a special case, // so must change the last entry values if (style.rules[0].symbolizers[0].colorMap.type === "intervals") { if ( idx === range.length-1) { if (style.name.includes("maxwvel")) { - entry.label = ">= " + entry.quantity + " m/s"; + // 2 different speed types for imperial + if (unitsType.current === "imperial") { + entry.label = range[idx] + ((speedType.current === "knots")? " kn" : " mph"); + } + else { + entry.label = range[idx] + " " + speedType.current; + } } else { - entry.label = ">= " + entry.quantity + " m"; + entry.label = ">= " + entry.quantity + ((unitsType.current === "metric")? " m" : " ft"); } entry.quantity = maxSliderValue; } @@ -216,7 +286,7 @@ export const ColormapSlider = ({style}) => { }; return ( - + 'Y-Axis'} value={ value } diff --git a/src/components/trays/settings/colormaps/data-range.js b/src/components/trays/settings/colormaps/data-range.js index f32304f..af3db47 100644 --- a/src/components/trays/settings/colormaps/data-range.js +++ b/src/components/trays/settings/colormaps/data-range.js @@ -15,6 +15,8 @@ export const DataRangeEdit = () => { const { mapStyle, + unitsType, + speedType, } = useSettings(); return ( @@ -36,21 +38,35 @@ export const DataRangeEdit = () => { style={mapStyle.maxele.current} /> - } mb={2} level="title-md">Maximum Water Level + } + mb={2} + level="title-md"> + Maximum Water Level {unitsType.current==="metric"? "(meters)" : "(feet)"} + - } mb={2} level="title-md">Maximum Wind Speed + } + mb={2} + level="title-md"> + Maximum Wind Speed ({speedType.current}) + - } level="title-md">Maximum Significant Wave Height + } + level="title-md"> + Maximum Significant Wave Height {unitsType.current==="metric"? "(meters)" : "(feet)"} + diff --git a/src/components/trays/settings/colormaps/utils.js b/src/components/trays/settings/colormaps/utils.js index a83f3d4..62b0ec7 100644 --- a/src/components/trays/settings/colormaps/utils.js +++ b/src/components/trays/settings/colormaps/utils.js @@ -1,5 +1,17 @@ export const maxSliderValues = { - "maxele": 10, - "maxwvel": 100, - "swan": 30 + "maxele": { "metric": 10, "imperial": 30 }, + "maxwvel": { "metric": 100, "imperial": 200 }, + "swan": { "metric": 30, "imperial": 100 } +}; + +export const sliderSteps = { + "maxele": { "metric": 0.25, "imperial": 1 }, + "maxwvel": { "metric": 1, "imperial": 5 }, + "swan": { "metric": 0.5, "imperial": 5 } +}; + +export const sliderMarkSteps = { + "maxele": { "metric": 1, "imperial": 5 }, + "maxwvel": { "metric": 10, "imperial": 20 }, + "swan": { "metric": 5, "imperial": 10 } }; \ No newline at end of file diff --git a/src/utils/default-styles.js b/src/utils/default-styles.js index 107e8fa..66c1add 100644 --- a/src/utils/default-styles.js +++ b/src/utils/default-styles.js @@ -154,7 +154,7 @@ export const maxeleImperialStyle = ' \ \ \ \ - \ + \ \ \ \