From 2b38f95383a2974d8b3f18062dd894133497bd8d Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Tue, 30 Apr 2024 14:06:25 -0400 Subject: [PATCH 01/13] updating the mui/material version, adding react-draggable and proptypes dependancies --- package-lock.json | 25 ++++++++++++++++++++++++- package.json | 4 +++- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index ae68edf9..beb1795b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,15 +11,17 @@ "@fontsource/inter": "^5.0.16", "@mui/icons-material": "^5.15.11", "@mui/joy": "^5.0.0-beta.32", - "@mui/material": "^5.15.11", + "@mui/material": "^5.15.15", "axios": "^1.6.7", "core-js": "^3.36.0", "d3": "^7.8.5", "dotenv": "^16.4.5", "leaflet": "^1.9.4", "mapbox-gl": "^3.1.2", + "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-draggable": "^4.4.6", "react-leaflet": "^4.2.1", "react-map-gl": "^7.1.7", "react-query": "^3.39.3", @@ -15670,6 +15672,27 @@ "react": "^18.3.1" } }, + "node_modules/react-draggable": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz", + "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==", + "dependencies": { + "clsx": "^1.1.1", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": ">= 16.3.0", + "react-dom": ">= 16.3.0" + } + }, + "node_modules/react-draggable/node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, "node_modules/react-is": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", diff --git a/package.json b/package.json index ec59f33c..7fb830b7 100644 --- a/package.json +++ b/package.json @@ -49,15 +49,17 @@ "@fontsource/inter": "^5.0.16", "@mui/icons-material": "^5.15.11", "@mui/joy": "^5.0.0-beta.32", - "@mui/material": "^5.15.11", + "@mui/material": "^5.15.15", "axios": "^1.6.7", "core-js": "^3.36.0", "d3": "^7.8.5", "dotenv": "^16.4.5", "leaflet": "^1.9.4", "mapbox-gl": "^3.1.2", + "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-draggable": "^4.4.6", "react-leaflet": "^4.2.1", "react-map-gl": "^7.1.7", "react-query": "^3.39.3", From 241bb8b6c0b0260e2d01ad510c0697bdb1d9f958 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Tue, 30 Apr 2024 14:10:05 -0400 Subject: [PATCH 02/13] adding a floating dialog and using the App component to test it. --- src/app.js | 7 +++- src/utils/dialog-utils.js | 87 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 92 insertions(+), 2 deletions(-) create mode 100644 src/utils/dialog-utils.js diff --git a/src/app.js b/src/app.js index 798abe11..5496ff3e 100644 --- a/src/app.js +++ b/src/app.js @@ -1,10 +1,13 @@ import React, { Fragment } from 'react'; import { Map } from '@components/map'; +import FloatingDialog from '@utils/dialog-utils'; +// import SubObj from "@utils/subObj"; export const App = () => { return ( - - + + + ); }; diff --git a/src/utils/dialog-utils.js b/src/utils/dialog-utils.js new file mode 100644 index 00000000..021bba9e --- /dev/null +++ b/src/utils/dialog-utils.js @@ -0,0 +1,87 @@ +import React, { Fragment } from 'react'; +import Button from '@mui/material/Button'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogTitle from '@mui/material/DialogTitle'; +import Paper from '@mui/material/Paper'; +import Draggable from 'react-draggable'; +import PropTypes from 'prop-types'; +import Slide from '@mui/material/Slide'; + +/** + * This creates a 3D dialog. + * + * @param props + * @returns {JSX.Element} + * @constructor + */ +function PaperComponent(props) { + return ( + + + + ); +} + +/** + * This creates an animated transition for the dialog that pops up + * @type {React.ForwardRefExoticComponent & React.RefAttributes>} + */ +const Transition = React.forwardRef(function Transition(props, ref) { + return ; +}); + +/** + * This is the floating component that displays a floating dialog + * + * @param title + * @param dialogText + * @param openDialog + * @returns {JSX.Element} + * @constructor + */ +export default function FloatingDialog({ title, dialogText, openDialog}) { //, dialogObject + const [open, setOpen] = React.useState(openDialog); + + // closes the dialog + const handleClose = () => { + setOpen(false); + }; + + // return the component that is rendered + return ( + + + + { title } + + + + { dialogText } + + + + + + + + ); +}; + +// define the properties of this component +FloatingDialog.propTypes = { + title: PropTypes.string, + dialogText: PropTypes.string, + openDialog: PropTypes.bool + // dialogObject: PropTypes.any +}; From cb59c6b0ed10a2aadf0341df09f4ab552a13e717 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Tue, 30 Apr 2024 14:18:29 -0400 Subject: [PATCH 03/13] making the component name/params more understandable. --- src/app.js | 4 ++-- src/utils/dialog-utils.js | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app.js b/src/app.js index 5496ff3e..ce89b211 100644 --- a/src/app.js +++ b/src/app.js @@ -1,12 +1,12 @@ import React, { Fragment } from 'react'; import { Map } from '@components/map'; -import FloatingDialog from '@utils/dialog-utils'; +import BaseFloatingDialog from "@utils/dialog-utils"; // import SubObj from "@utils/subObj"; export const App = () => { return ( - + ); diff --git a/src/utils/dialog-utils.js b/src/utils/dialog-utils.js index 021bba9e..bbdba192 100644 --- a/src/utils/dialog-utils.js +++ b/src/utils/dialog-utils.js @@ -42,8 +42,8 @@ const Transition = React.forwardRef(function Transition(props, ref) { * @returns {JSX.Element} * @constructor */ -export default function FloatingDialog({ title, dialogText, openDialog}) { //, dialogObject - const [open, setOpen] = React.useState(openDialog); +export default function BaseFloatingDialog({ title, dialogText, openDialogImmediately} ) { //, dialogObject + const [open, setOpen] = React.useState(openDialogImmediately); // closes the dialog const handleClose = () => { @@ -79,9 +79,9 @@ export default function FloatingDialog({ title, dialogText, openDialog}) { //, d }; // define the properties of this component -FloatingDialog.propTypes = { +BaseFloatingDialog.propTypes = { title: PropTypes.string, dialogText: PropTypes.string, - openDialog: PropTypes.bool + openDialogImmediately: PropTypes.bool // dialogObject: PropTypes.any }; From f0da3b435dec13e25d320f91e2ab44d699fe9121 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Tue, 30 Apr 2024 17:43:51 -0400 Subject: [PATCH 04/13] upgrading the mui versions --- package-lock.json | 4 ++-- package.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index beb1795b..eebaf534 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,8 @@ "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@fontsource/inter": "^5.0.16", - "@mui/icons-material": "^5.15.11", - "@mui/joy": "^5.0.0-beta.32", + "@mui/icons-material": "^5.15.15", + "@mui/joy": "^5.0.0-beta.36", "@mui/material": "^5.15.15", "axios": "^1.6.7", "core-js": "^3.36.0", diff --git a/package.json b/package.json index 7fb830b7..5abcda2f 100644 --- a/package.json +++ b/package.json @@ -47,8 +47,8 @@ "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@fontsource/inter": "^5.0.16", - "@mui/icons-material": "^5.15.11", - "@mui/joy": "^5.0.0-beta.32", + "@mui/icons-material": "^5.15.15", + "@mui/joy": "^5.0.0-beta.36", "@mui/material": "^5.15.15", "axios": "^1.6.7", "core-js": "^3.36.0", From 3f0f758ceddaba4f4547e88abcfb5e25536559b8 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Wed, 1 May 2024 08:52:02 -0400 Subject: [PATCH 05/13] working version of the floating dialog component. --- src/app.js | 21 +++++++++++++++++---- src/utils/dialog-utils.js | 19 ++++++++++++++----- 2 files changed, 31 insertions(+), 9 deletions(-) diff --git a/src/app.js b/src/app.js index ce89b211..190d398b 100644 --- a/src/app.js +++ b/src/app.js @@ -1,13 +1,26 @@ import React, { Fragment } from 'react'; import { Map } from '@components/map'; import BaseFloatingDialog from "@utils/dialog-utils"; -// import SubObj from "@utils/subObj"; export const App = () => { - return ( + const subObj = () => { + return ( + +
+
+ This is a dialog sub-component. +
+
+ + ); + }; + + const floaterArgs = {title: "The dialog title.", description: "The dialog description.", openDialogImmediately:true, "dialogObject": {...subObj()}}; + + return ( - + - ); + ); }; diff --git a/src/utils/dialog-utils.js b/src/utils/dialog-utils.js index bbdba192..9e71cfdd 100644 --- a/src/utils/dialog-utils.js +++ b/src/utils/dialog-utils.js @@ -42,7 +42,7 @@ const Transition = React.forwardRef(function Transition(props, ref) { * @returns {JSX.Element} * @constructor */ -export default function BaseFloatingDialog({ title, dialogText, openDialogImmediately} ) { //, dialogObject +export default function BaseFloatingDialog({ title, description, openDialogImmediately, dialogObject} ) { const [open, setOpen] = React.useState(openDialogImmediately); // closes the dialog @@ -59,14 +59,23 @@ export default function BaseFloatingDialog({ title, dialogText, openDialogImmedi PaperComponent={PaperComponent} TransitionComponent={Transition} aria-labelledby="draggable-dialog-title" + disableEnforceFocus + style={{ pointerEvents: 'none', opacity: '100%' }} + PaperProps={{ style: { pointerEvents: 'auto'} }} + sx={{ + '.MuiBackdrop-root': { + backgroundColor: 'transparent', + } + }} > { title } - { dialogText } + { description } + { dialogObject } - + { title } + + { description } + + { dialogObject } + + ); From bc230824abbdd5d22346a9e6052df5bc350f85f7 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Fri, 3 May 2024 11:02:40 -0400 Subject: [PATCH 08/13] adding a push of the selected observation to the layer context, selected observation state list --- src/components/map/default-layers.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/map/default-layers.js b/src/components/map/default-layers.js index dadffda5..a4fae81e 100644 --- a/src/components/map/default-layers.js +++ b/src/components/map/default-layers.js @@ -12,6 +12,7 @@ export const DefaultLayers = () => { const { defaultModelLayers, setDefaultModelLayers, + setSelectedObservations } = useLayers(); // Create the authorization header @@ -66,6 +67,9 @@ export const DefaultLayers = () => { // from the feature.properties.csv_url and create a fancy plot console.log("Observation Station '" + feature.properties.location_name + "' clicked"); markClicked(map, e); + + // populate selectedObservations list with the newly selected observation point + setSelectedObservations(previous => [...previous, feature.properties]); }); } }; From 73c13bb13cfa68c4fff31c5b81b9fe2a41b6ece1 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Fri, 3 May 2024 11:03:02 -0400 Subject: [PATCH 09/13] adding the selected observation state list --- src/context/map-context.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/context/map-context.js b/src/context/map-context.js index e185f0e7..c2632def 100644 --- a/src/context/map-context.js +++ b/src/context/map-context.js @@ -7,6 +7,10 @@ export const useLayers = () => useContext(LayersContext); export const LayersProvider = ({ children }) => { const [defaultModelLayers, setDefaultModelLayers] = useState([]); const [filteredModelLayers, setFilteredModelLayers] = useState([]); + + // this object contains data for graph rendering + const [selectedObservations, setSelectedObservations] = useState([]); + const [map, setMap] = useState(null); const toggleLayerVisibility = id => { @@ -35,6 +39,8 @@ export const LayersProvider = ({ children }) => { filteredModelLayers, setFilteredModelLayers, toggleLayerVisibility, + selectedObservations, + setSelectedObservations }} > {children} From ffe6cc948756585389d70c78ff6bec9d2a29c38d Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Fri, 3 May 2024 11:40:55 -0400 Subject: [PATCH 10/13] adding the rendering of the items in the selected observation list --- src/app.js | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/src/app.js b/src/app.js index 0794220e..eac7c0c2 100644 --- a/src/app.js +++ b/src/app.js @@ -1,12 +1,24 @@ import React, { Fragment } from 'react'; import { Map } from '@components/map'; -import { Sidebar } from '@components/sidebar'; +import ObservationDialog from "@components/map/observation-dialog"; +import { useLayers } from '@context'; export const App = () => { - return ( + // install the selected observation list from the layer context + const { + selectedObservations + } = useLayers(); + + return ( - - - - ); + { + // for each observation selected + selectedObservations.map (function (obs) { + // render the observation + return ; + }) + } + + + ); }; From f181059ccaa6eea3bde70018cd7bd52cc0626c03 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Fri, 3 May 2024 11:41:48 -0400 Subject: [PATCH 11/13] refactored for clarity --- ...ialog-utils.js => base-floating-dialog.js} | 73 +++++++++++-------- 1 file changed, 41 insertions(+), 32 deletions(-) rename src/utils/{dialog-utils.js => base-floating-dialog.js} (85%) diff --git a/src/utils/dialog-utils.js b/src/utils/base-floating-dialog.js similarity index 85% rename from src/utils/dialog-utils.js rename to src/utils/base-floating-dialog.js index db890f0a..8c598e82 100644 --- a/src/utils/dialog-utils.js +++ b/src/utils/base-floating-dialog.js @@ -12,28 +12,15 @@ import DialogTitle from '@mui/material/DialogTitle'; import Paper from '@mui/material/Paper'; import Slide from '@mui/material/Slide'; -/** - * This creates a 3D dialog. - * - * @param props - * @returns {JSX.Element} - * @constructor - */ -function PaperComponent(props) { - return ( - - - - ); -} +import { useLayers } from '@context'; -/** - * This creates an animated transition for the dialog that pops up - * @type {React.ForwardRefExoticComponent & React.RefAttributes>} - */ -const Transition = React.forwardRef(function Transition(props, ref) { - return ; -}); +// define the properties of this component +BaseFloatingDialog.propTypes = { + title: PropTypes.string, + description: PropTypes.string, + openDialogImmediately: PropTypes.bool, + dialogObject: PropTypes.any +}; /** * This is a component that displays a floating dialog with the content passed @@ -43,18 +30,25 @@ const Transition = React.forwardRef(function Transition(props, ref) { * @param openDialogImmediately: boolean * @param dialogObject: {JSX.Element} * @returns {JSX.Element} - * @constructor */ export default function BaseFloatingDialog({ title, description, openDialogImmediately, dialogObject} ) { - // define the dialog open/close session state const [open, setOpen] = React.useState(openDialogImmediately); + const { + selectedObservations, + setSelectedObservations + } = useLayers(); + /** * the close dialog handler */ const handleClose = () => { + // close the dialog setOpen(false); + + // remove this item from the selected observations list + setSelectedObservations(selectedObservations.filter(item => item.station_name !== title)); }; /** @@ -74,9 +68,9 @@ export default function BaseFloatingDialog({ title, description, openDialogImmed PaperProps={{ style: { pointerEvents: 'auto'} }} sx={{ '.MuiBackdrop-root': { backgroundColor: 'transparent' }}} > - { title } + { "Station: " + title } - { description } + { "Location: " + description } { dialogObject } @@ -86,10 +80,25 @@ export default function BaseFloatingDialog({ title, description, openDialogImmed ); }; -// define the properties of this component -BaseFloatingDialog.propTypes = { - title: PropTypes.string, - description: PropTypes.string, - openDialogImmediately: PropTypes.bool, - dialogObject: PropTypes.any -}; +/** + * This creates a 3D dialog. + * + * @param props + * @returns {JSX.Element} + * @constructor + */ +function PaperComponent(props) { + return ( + + + + ); +} + +/** + * This creates an animated transition for the dialog that pops up + * @type {React.ForwardRefExoticComponent & React.RefAttributes>} + */ +const Transition = React.forwardRef(function Transition(props, ref) { + return ; +}); \ No newline at end of file From ba79c3996a47f3783b0fdb4011c97a105908a96d Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Fri, 3 May 2024 11:42:31 -0400 Subject: [PATCH 12/13] dialog to display an observation selection based on the floating dialog --- src/components/map/observation-dialog.js | 33 ++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 src/components/map/observation-dialog.js diff --git a/src/components/map/observation-dialog.js b/src/components/map/observation-dialog.js new file mode 100644 index 00000000..4d0ab9d6 --- /dev/null +++ b/src/components/map/observation-dialog.js @@ -0,0 +1,33 @@ +import React, {Fragment} from 'react'; +import PropTypes from 'prop-types'; +import BaseFloatingDialog from "@utils/base-floating-dialog"; + +// define the properties of this component +ObservationDialog.propTypes = { + obs_data: PropTypes.object +}; + +export default function ObservationDialog(obs_data) { + // TODO: the url is put in here but it will eventually + // return a graph using data from this url + const graphObj = (url) => { + return ( + +
+ {url} +
+ + ); + }; + + // create an object for the base dialog + const floaterArgs = {title: obs_data.obs.station_name, description: obs_data.obs.location_name, openDialogImmediately:true, "dialogObject": {...graphObj(obs_data.obs.csvurl)}}; + + // render the dialog. + // the key here will be used to remove the dialog from the selected observation list when the dialog is closed + return ( + + + + ); +}; \ No newline at end of file From 1ea68645e2c6bb69547536588174a73802d43d9f Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Fri, 3 May 2024 11:57:53 -0400 Subject: [PATCH 13/13] restoring the sidebar --- src/app.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app.js b/src/app.js index eac7c0c2..fb5a61dd 100644 --- a/src/app.js +++ b/src/app.js @@ -2,6 +2,7 @@ import React, { Fragment } from 'react'; import { Map } from '@components/map'; import ObservationDialog from "@components/map/observation-dialog"; import { useLayers } from '@context'; +import { Sidebar } from '@components/sidebar'; export const App = () => { // install the selected observation list from the layer context @@ -19,6 +20,7 @@ export const App = () => { }) } + ); };