From e8f745dfeed6a8a02096ab985305728ecc7c2af5 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Thu, 12 Sep 2024 14:34:36 -0400 Subject: [PATCH 1/6] adding all the state items from the compare tray to here --- src/context/map-context.js | 62 +++++++++++++++++++++++++++++++++++--- 1 file changed, 58 insertions(+), 4 deletions(-) diff --git a/src/context/map-context.js b/src/context/map-context.js index 267ed5a..859da0a 100644 --- a/src/context/map-context.js +++ b/src/context/map-context.js @@ -48,9 +48,32 @@ export const LayersProvider = ({ children }) => { const [map, setMap] = useState(null); - // this object is used to track the side-by-side compare layers + /** + * this section is for the side-by-side compare mode items + * @type {string} + */ + // default for the pane compare name + const defaultSelected = 'Not Selected'; + + // create some state for the left/right name/type selections + const [leftPaneType, setLeftPaneType] = useState(defaultSelected); + const [rightPaneType, setRightPaneType] = useState(defaultSelected); + + // create some state for the left/right ID selections + const [leftPaneID, setLeftPaneID] = useState(defaultSelected); + const [rightPaneID, setRightPaneID] = useState(defaultSelected); + + // create some state for the side/side layers const [sideBySideLayers, setSideBySideLayers] = useState(null); + // create some state for the layer properties + const [leftLayerProps, setLeftLayerProps] = useState(null); + const [rightLayerProps, setRightLayerProps] = useState(null); + + // create some state for the selected layers + const [selectedLeftLayer, setSelectedLeftLayer] = useState(null); + const [selectedRightLayer, setSelectedRightLayer] = useState(null); + /** * get the layer icon * @@ -84,6 +107,27 @@ export const LayersProvider = ({ children }) => { } }; + /** + * clears any captured compare selection data and layers + * + */ + const resetCompare = () => { + // clear the left layer type/ID/properties/layer + setLeftPaneType(defaultSelected); + setLeftPaneID(defaultSelected); + setLeftLayerProps(null); + setSelectedLeftLayer(null); + + // clear the right pane ID/Name/properties/layer + setRightPaneType(defaultSelected); + setRightPaneID(defaultSelected); + setRightLayerProps(null); + setSelectedRightLayer(null); + + // remove the side by side layers + removeSideBySideLayers(); + }; + /** * removes the observation "target" icons and dialogs from the map */ @@ -351,9 +395,19 @@ export const LayersProvider = ({ children }) => { baseMap, setBaseMap, setLayerOpacity, - sideBySideLayers, - setSideBySideLayers, - removeSideBySideLayers + + // declare access to the compare mode items + defaultSelected, + leftPaneID, setLeftPaneID, + rightPaneID, setRightPaneID, + leftPaneType, setLeftPaneType, + rightPaneType, setRightPaneType, + leftLayerProps, setLeftLayerProps, + selectedLeftLayer, setSelectedLeftLayer, + rightLayerProps, setRightLayerProps, + selectedRightLayer, setSelectedRightLayer, + sideBySideLayers, setSideBySideLayers, + resetCompare, removeSideBySideLayers }} > {children} From a7b2ca2f9446b09a66a1bd6cb629f27060f2f15d Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Thu, 12 Sep 2024 14:35:40 -0400 Subject: [PATCH 2/6] moving the compare layer selections from the compare tray to the map surface --- src/components/compare-panel/compare-panel.js | 102 ++++++++++++++++ src/components/compare-panel/index.js | 1 + .../trays/compare-layers/CompareLayersTray.js | 112 +++--------------- 3 files changed, 120 insertions(+), 95 deletions(-) create mode 100644 src/components/compare-panel/compare-panel.js create mode 100644 src/components/compare-panel/index.js diff --git a/src/components/compare-panel/compare-panel.js b/src/components/compare-panel/compare-panel.js new file mode 100644 index 0000000..85dae06 --- /dev/null +++ b/src/components/compare-panel/compare-panel.js @@ -0,0 +1,102 @@ +import React, { Fragment, useRef } from 'react'; +import { Stack, Typography, Box, Button, Card } from '@mui/joy'; +import { useLayers } from '@context'; +import { SwapHorizontalCircleSharp as SwapLayersIcon } from '@mui/icons-material'; +import Draggable from "react-draggable"; + +export const ComparePanel = () => { + const { + // getLayerIcon, + // declare access to the compare mode items + defaultSelected, + leftPaneID, setLeftPaneID, + rightPaneID, setRightPaneID, + leftPaneType, setLeftPaneType, + rightPaneType, setRightPaneType, + leftLayerProps, setLeftLayerProps, + rightLayerProps, setRightLayerProps, + resetCompare + } = useLayers(); + + /** + * swaps the selected layer position in the compare panes + * + */ + const swapPanes = () => { + // get the original left pane data + const origLeftPaneType = leftPaneType; + const origLeftPaneID = leftPaneID; + const origLeftLayerProps = leftLayerProps; + + // clear the left layer type/ID + setLeftPaneType(rightPaneType); + setLeftPaneID(rightPaneID); + setLeftLayerProps(rightLayerProps); + + // clear the right pane ID/Name + setRightPaneType(origLeftPaneType); + setRightPaneID(origLeftPaneID); + setRightLayerProps(origLeftLayerProps); + }; + + // create a reference to avoid the findDOMNode deprecation issue + const nodeRef = useRef(null); + + return ( + + { + // display the selected product details for each pane + (leftPaneID !== defaultSelected || rightPaneID !== defaultSelected) ? + + + + { + // render the left pane selections + + {/*Left pane:*/} + { leftPaneType } + {/*ID: { leftPaneID } */} + + } + + + + + + { + + {/*Right pane:*/} + { rightPaneType } + {/*ID: { rightPaneID }*/} + + } + + + + + + + + : '' + } + + ); +}; \ No newline at end of file diff --git a/src/components/compare-panel/index.js b/src/components/compare-panel/index.js new file mode 100644 index 0000000..208c74a --- /dev/null +++ b/src/components/compare-panel/index.js @@ -0,0 +1 @@ +export * from './compare-panel'; \ No newline at end of file diff --git a/src/components/trays/compare-layers/CompareLayersTray.js b/src/components/trays/compare-layers/CompareLayersTray.js index f8793dc..ec5ae43 100644 --- a/src/components/trays/compare-layers/CompareLayersTray.js +++ b/src/components/trays/compare-layers/CompareLayersTray.js @@ -2,7 +2,6 @@ import React, { Fragment, useState, useEffect } from 'react'; import { Stack, Typography, Box, Button, Card, Accordion, AccordionSummary, AccordionDetails, AccordionGroup } from '@mui/joy'; import { useLayers, useSettings } from '@context'; import { getNamespacedEnvParam } from "@utils/map-utils"; -import { SwapVerticalCircleSharp as SwapLayersIcon } from '@mui/icons-material'; import SldStyleParser from 'geostyler-sld-parser'; // install the side by side compare control @@ -44,37 +43,31 @@ export const CompareLayersTray = () => { map, defaultModelLayers, getLayerIcon, + + // declare access to the compare mode items + defaultSelected, + leftPaneID, setLeftPaneID, + rightPaneID, setRightPaneID, + leftPaneType, setLeftPaneType, + rightPaneType, setRightPaneType, + leftLayerProps, setLeftLayerProps, + selectedLeftLayer, setSelectedLeftLayer, + rightLayerProps, setRightLayerProps, + selectedRightLayer, setSelectedRightLayer, setSideBySideLayers, - removeSideBySideLayers + resetCompare, removeSideBySideLayers } = useLayers(); const { mapStyle, } = useSettings(); - // default for the pane compare name - const defaultSelected = 'Not Selected'; - - // create some state for the left/right name selections - const [leftPaneType, setLeftPaneType] = useState(defaultSelected); - const [rightPaneType, setRightPaneType] = useState(defaultSelected); - - // create some state for the left/right ID selections - const [leftPaneID, setLeftPaneID] = useState(defaultSelected); - const [rightPaneID, setRightPaneID] = useState(defaultSelected); - // used to collapse other open accordions const [accordionIndex, setAccordionIndex] = useState(null); // get the default model run layers const layers = [...defaultModelLayers]; - const [leftLayerProps, setLeftLayerProps] = useState(null); - const [rightLayerProps, setRightLayerProps] = useState(null); - - const [selectedLeftLayer, setSelectedLeftLayer] = useState(null); - const [selectedRightLayer, setSelectedRightLayer] = useState(null); - // get a handle to the leaflet component const L = window.L; @@ -88,30 +81,6 @@ export const CompareLayersTray = () => { const gs_wfs_url = `${ getNamespacedEnvParam('REACT_APP_GS_DATA_URL') }`; const gs_wms_url = gs_wfs_url + 'wms'; - /** - * clears any captured compare selection data and layers - * - */ - const resetCompare = () => { - // clear the left layer type/ID/properties/layer - setLeftPaneType(defaultSelected); - setLeftPaneID(defaultSelected); - setLeftLayerProps(null); - setSelectedLeftLayer(null); - - // clear the right pane ID/Name/properties/layer - setRightPaneType(defaultSelected); - setRightPaneID(defaultSelected); - setRightLayerProps(null); - setSelectedRightLayer(null); - - // remove the side by side layers - removeSideBySideLayers(); - - // rollup the accordions - setAccordionIndex(null); - }; - /** * Save the layer info to state * @@ -139,24 +108,11 @@ export const CompareLayersTray = () => { }; /** - * swaps the selected layer position in the compare panes - * + * resets the accordion */ - const swapPanes = () => { - // get the original left pane data - const origLeftPaneType = leftPaneType; - const origLeftPaneID = leftPaneID; - const origLeftLayerProps = leftLayerProps; - - // clear the left layer type/ID - setLeftPaneType(rightPaneType); - setLeftPaneID(rightPaneID); - setLeftLayerProps(rightLayerProps); - - // clear the right pane ID/Name - setRightPaneType(origLeftPaneType); - setRightPaneID(origLeftPaneID); - setRightLayerProps(origLeftLayerProps); + const resetAccordion = () => { + // rollup the accordions + setAccordionIndex(null); }; /** @@ -196,6 +152,7 @@ export const CompareLayersTray = () => { useEffect(() => { // reset this view resetCompare(); + resetAccordion(); }, [defaultModelLayers]); /** @@ -366,41 +323,6 @@ export const CompareLayersTray = () => { )) } - - { - // display the selected product details for each pane - ( leftPaneID !== defaultSelected || rightPaneID !== defaultSelected ) ? - - - - { - // render the left pane selections - - Left pane: - Type: { leftPaneType } - ID: { leftPaneID } - - } - - - - - - { - - Right pane: - Type: { rightPaneType } - ID: { rightPaneID } - - } - - - - - - : '' - } - ); }; From 8b1cf72473e1543add0263ddc2d07592c25c1872 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Thu, 12 Sep 2024 14:36:25 -0400 Subject: [PATCH 3/6] adding the compare selections to the map surface --- src/app.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app.js b/src/app.js index 26a7a63..74697f7 100644 --- a/src/app.js +++ b/src/app.js @@ -5,9 +5,11 @@ import { ObservationDialog } from "@components/dialog/observation-dialog"; import { useLayers } from '@context'; import { Sidebar } from '@components/sidebar'; import { ControlPanel } from '@components/control-panel'; +import { ComparePanel } from '@components/compare-panel'; import { MapLegend } from '@components/legend'; + /** * renders the main content * @@ -34,6 +36,7 @@ const Content = () => { + ); From 1f4a13ba14922d817e49b64538d601adb3a69daf Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Thu, 12 Sep 2024 16:02:47 -0400 Subject: [PATCH 4/6] moving the legend down a little to make room for the compare panel --- src/components/legend/legend.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/legend/legend.js b/src/components/legend/legend.js index b8466f7..223c811 100644 --- a/src/components/legend/legend.js +++ b/src/components/legend/legend.js @@ -115,7 +115,7 @@ export const MapLegend = () => { sx={{ p: 0, position: 'absolute', - top: '10px', + top: '60px', right: '10px', transition: 'filter 250ms', filter: 'opacity(0.9)', From eb219197812d15072f7cecb8838143fed80198d6 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Thu, 12 Sep 2024 16:03:53 -0400 Subject: [PATCH 5/6] lowering the font size --- src/components/trays/compare-layers/CompareLayersTray.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/trays/compare-layers/CompareLayersTray.js b/src/components/trays/compare-layers/CompareLayersTray.js index 311f1a2..03e1550 100644 --- a/src/components/trays/compare-layers/CompareLayersTray.js +++ b/src/components/trays/compare-layers/CompareLayersTray.js @@ -334,10 +334,10 @@ export const CompareLayersTray = () => { - - From 9ef7d0edd47411a418cb5710e1cc471fcdcb45eb Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Thu, 12 Sep 2024 16:04:46 -0400 Subject: [PATCH 6/6] getting the model run details in the area, tidying up --- src/components/compare-panel/compare-panel.js | 174 +++++++++++++----- 1 file changed, 123 insertions(+), 51 deletions(-) diff --git a/src/components/compare-panel/compare-panel.js b/src/components/compare-panel/compare-panel.js index 85dae06..a0b225d 100644 --- a/src/components/compare-panel/compare-panel.js +++ b/src/components/compare-panel/compare-panel.js @@ -2,11 +2,57 @@ import React, { Fragment, useRef } from 'react'; import { Stack, Typography, Box, Button, Card } from '@mui/joy'; import { useLayers } from '@context'; import { SwapHorizontalCircleSharp as SwapLayersIcon } from '@mui/icons-material'; -import Draggable from "react-draggable"; + +/** + * gets the header data property name index + * This takes into account the two types of runs (tropical, synoptic) + * + * @param layerProps + * @param type + * @returns {string} + */ +const getPropertyName = (layerProps, element_name) => { + // init the return + let ret_val = undefined; + + // capture the name of the element for tropical storms and advisory numbers + if (layerProps['met_class'] === 'tropical') { + // by the element name + switch (element_name) { + case 'stormOrModelEle': + ret_val = layerProps['storm_name']; + break; + case 'numberName': + ret_val = ' Adv: '; + break; + case 'numberEle': + ret_val = layerProps['advisory_number']; + break; + } + } + // capture the name of the synoptic ADCIRC models and cycle numbers + else { + switch (element_name) { + case 'stormOrModelEle': + ret_val = layerProps['model']; + break; + case 'numberName': + ret_val = ' Cycle: '; + break; + case 'numberEle': + ret_val = layerProps['cycle']; + break; + } + } + + // return to the caller + return ret_val; +}; export const ComparePanel = () => { const { - // getLayerIcon, + defaultModelLayers, + // declare access to the compare mode items defaultSelected, leftPaneID, setLeftPaneID, @@ -18,6 +64,39 @@ export const ComparePanel = () => { resetCompare } = useLayers(); + // get the default model run layers + const layers = [...defaultModelLayers]; + + /** + * gets the summary header text for the layer groups. + * This takes into account the two types of runs (tropical, synoptic) + * + * @param layerProps + * @returns {string} + */ + const getHeaderSummary = (paneID) => { + // get the summary if a layer has been selected + if (paneID !== defaultSelected) { + // get the layer props + const layerProps = layers.filter(item => item.id === paneID)[0]['properties']; + + // if layer properties were captured + if (layerProps !== undefined) { + // get the full accordian summary text + return '' + + ((getPropertyName(layerProps, 'stormOrModelEle') === undefined) ? 'Data error' : getPropertyName(layerProps, 'stormOrModelEle').toUpperCase()) + + ', ' + getPropertyName(layerProps, 'numberName') + getPropertyName(layerProps, 'numberEle') + + ', Type: ' + layerProps['event_type'] + + ', Grid: ' + layerProps['grid_type'] + + ((layerProps['meteorological_model'] === 'None') ? '' : ', ' + layerProps['meteorological_model']); + } + } + else { + // return the default text + return defaultSelected; + } + }; + /** * swaps the selected layer position in the compare panes * @@ -42,60 +121,53 @@ export const ComparePanel = () => { // create a reference to avoid the findDOMNode deprecation issue const nodeRef = useRef(null); + // render the panel return ( { // display the selected product details for each pane (leftPaneID !== defaultSelected || rightPaneID !== defaultSelected) ? - - - - { - // render the left pane selections - - {/*Left pane:*/} - { leftPaneType } - {/*ID: { leftPaneID } */} - - } - - - - - - { - - {/*Right pane:*/} - { rightPaneType } - {/*ID: { rightPaneID }*/} - - } - - - - - - - - : '' + + + { + // render the left pane selections + + { getHeaderSummary(leftPaneID) } + { leftPaneType } + + } + + + + + + { + + { getHeaderSummary(rightPaneID) } + { rightPaneType } + + } + + + + + + : '' } );