From 91c028ef8a94b03cb54210ce90797f43866c3d0b Mon Sep 17 00:00:00 2001 From: vismayak Date: Sun, 8 Dec 2024 15:43:12 -0600 Subject: [PATCH 1/6] Changing marker size and adding dialog support --- .../geostreaming/src/components/Dialog.jsx | 96 +++++++++++++++++++ .../src/containers/Explore/index.jsx | 20 +++- .../geostreaming/src/containers/Map/index.jsx | 2 +- 3 files changed, 115 insertions(+), 3 deletions(-) create mode 100644 packages/geostreaming/src/components/Dialog.jsx diff --git a/packages/geostreaming/src/components/Dialog.jsx b/packages/geostreaming/src/components/Dialog.jsx new file mode 100644 index 00000000..5f374807 --- /dev/null +++ b/packages/geostreaming/src/components/Dialog.jsx @@ -0,0 +1,96 @@ +import React from "react"; +import { makeStyles } from "@material-ui/core/styles"; +import { + Dialog as MuiDialog, + DialogTitle, + DialogContent, + DialogContentText, + IconButton, + FormControlLabel, + Checkbox, +} from "@material-ui/core"; +import { Clear } from "@material-ui/icons"; + +const useStyles = makeStyles((theme) => ({ + dialogCloseButton: { + position: "absolute", + top: theme.spacing(1), + right: theme.spacing(1), + }, + checkboxContainer: { + marginTop: theme.spacing(2), + display: "flex", + alignItems: "center", + }, + dialogPaper: { + width: "70vw", + maxWidth: "1200px", + height: "auto", + maxHeight: "800px", + } +})); + +const Dialog = ({ + open, + onClose, + title, + children, + cookieId = "default-dialog", +}) => { + const classes = useStyles(); + const [dontShowAgain, setDontShowAgain] = React.useState(false); + + React.useEffect(() => { + // Check if "don't show again" cookie exists + const shouldHide = document.cookie.split("; ").find((row) => row.startsWith(`${cookieId}=`)); + + if (shouldHide) { + onClose(); + } + }, [cookieId, onClose]); + + const handleClose = () => { + if (dontShowAgain) { + // Set cookie to expire in 365 days + const expiryDate = new Date(); + expiryDate.setDate(expiryDate.getDate() + 365); + document.cookie = `${cookieId}=true; expires=${expiryDate.toUTCString()}; path=/`; + } + onClose(); + }; + + return ( + + + {title} + + + + + + + + {children} +
+ setDontShowAgain(e.target.checked)} + color="primary" + /> + } + label="Don't show this message again" + /> +
+ + + + ); +}; + +export default Dialog; diff --git a/packages/geostreaming/src/containers/Explore/index.jsx b/packages/geostreaming/src/containers/Explore/index.jsx index b175514b..db04619c 100644 --- a/packages/geostreaming/src/containers/Explore/index.jsx +++ b/packages/geostreaming/src/containers/Explore/index.jsx @@ -14,7 +14,7 @@ import SensorDetail from '../Sensor/Detail'; import type { MapConfig, ParameterType, SensorType, SourceConfig, SourceType } from '../../utils/flowtype'; -import Sidebar from './Sidebar'; +import Dialog from "../../components/Dialog"; const useStyles = makeStyles({ root: { @@ -43,6 +43,11 @@ type Props = { displayOnlineStatus: boolean; filterSources:boolean; defaultDisableCluster:boolean; + dialogInfo: { + title: string; + content: React.Node; + cookieId: string; + } } type Data = { @@ -63,7 +68,8 @@ const Explore = (props: Props) => { filterSources, defaultDisableCluster, sourcesConfig, - displayOnlineStatus + displayOnlineStatus, + dialogInfo } = props; React.useEffect(() => { @@ -169,6 +175,16 @@ const Explore = (props: Props) => { updateShowSensorDetails(false)} /> : null} + + {dialogInfo && dialogInfo.title && dialogInfo.content && dialogInfo.cookieId ? + {}} + title={dialogInfo.title} + children={dialogInfo.content} + cookieId={dialogInfo.cookieId} + /> : + null} ); }; diff --git a/packages/geostreaming/src/containers/Map/index.jsx b/packages/geostreaming/src/containers/Map/index.jsx index 22e23c29..5310fec8 100644 --- a/packages/geostreaming/src/containers/Map/index.jsx +++ b/packages/geostreaming/src/containers/Map/index.jsx @@ -111,7 +111,7 @@ interface Props { const getMarker = (fill: string, stroke: string) => encodeURIComponent( - ` + ` ` From 812f2b6178ad261e06b0c20eee8452ba804144ee Mon Sep 17 00:00:00 2001 From: vismayak Date: Sun, 8 Dec 2024 16:23:57 -0600 Subject: [PATCH 2/6] Just making markers smaller --- .../src/containers/Explore/index.jsx | 20 ++----------------- 1 file changed, 2 insertions(+), 18 deletions(-) diff --git a/packages/geostreaming/src/containers/Explore/index.jsx b/packages/geostreaming/src/containers/Explore/index.jsx index db04619c..b175514b 100644 --- a/packages/geostreaming/src/containers/Explore/index.jsx +++ b/packages/geostreaming/src/containers/Explore/index.jsx @@ -14,7 +14,7 @@ import SensorDetail from '../Sensor/Detail'; import type { MapConfig, ParameterType, SensorType, SourceConfig, SourceType } from '../../utils/flowtype'; -import Dialog from "../../components/Dialog"; +import Sidebar from './Sidebar'; const useStyles = makeStyles({ root: { @@ -43,11 +43,6 @@ type Props = { displayOnlineStatus: boolean; filterSources:boolean; defaultDisableCluster:boolean; - dialogInfo: { - title: string; - content: React.Node; - cookieId: string; - } } type Data = { @@ -68,8 +63,7 @@ const Explore = (props: Props) => { filterSources, defaultDisableCluster, sourcesConfig, - displayOnlineStatus, - dialogInfo + displayOnlineStatus } = props; React.useEffect(() => { @@ -175,16 +169,6 @@ const Explore = (props: Props) => { updateShowSensorDetails(false)} /> : null} - - {dialogInfo && dialogInfo.title && dialogInfo.content && dialogInfo.cookieId ? - {}} - title={dialogInfo.title} - children={dialogInfo.content} - cookieId={dialogInfo.cookieId} - /> : - null} ); }; From 615455d0d609485a18fe056c3ac07046e1eb3564 Mon Sep 17 00:00:00 2001 From: vismayak Date: Sun, 8 Dec 2024 16:56:08 -0600 Subject: [PATCH 3/6] Just making markers smaller --- packages/geostreaming/src/containers/Map/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/geostreaming/src/containers/Map/index.jsx b/packages/geostreaming/src/containers/Map/index.jsx index 5310fec8..42d18f2f 100644 --- a/packages/geostreaming/src/containers/Map/index.jsx +++ b/packages/geostreaming/src/containers/Map/index.jsx @@ -112,8 +112,8 @@ interface Props { const getMarker = (fill: string, stroke: string) => encodeURIComponent( ` - - + + ` ); From f8dd46d172d5549212d6c80a5dc50f0b05d77a34 Mon Sep 17 00:00:00 2001 From: vismayak Date: Sun, 8 Dec 2024 21:39:58 -0600 Subject: [PATCH 4/6] Adding the gltg specific dialog --- .../geostreaming/src/components/Dialog.jsx | 6 +- .../src/containers/Explore/index.jsx | 59 ++++++++++++++++++- 2 files changed, 61 insertions(+), 4 deletions(-) diff --git a/packages/geostreaming/src/components/Dialog.jsx b/packages/geostreaming/src/components/Dialog.jsx index 5f374807..4a8db1e5 100644 --- a/packages/geostreaming/src/components/Dialog.jsx +++ b/packages/geostreaming/src/components/Dialog.jsx @@ -23,7 +23,7 @@ const useStyles = makeStyles((theme) => ({ alignItems: "center", }, dialogPaper: { - width: "70vw", + width: "60vw", maxWidth: "1200px", height: "auto", maxHeight: "800px", @@ -63,7 +63,9 @@ const Dialog = ({ {title} diff --git a/packages/geostreaming/src/containers/Explore/index.jsx b/packages/geostreaming/src/containers/Explore/index.jsx index b175514b..1b5938ca 100644 --- a/packages/geostreaming/src/containers/Explore/index.jsx +++ b/packages/geostreaming/src/containers/Explore/index.jsx @@ -14,7 +14,7 @@ import SensorDetail from '../Sensor/Detail'; import type { MapConfig, ParameterType, SensorType, SourceConfig, SourceType } from '../../utils/flowtype'; -import Sidebar from './Sidebar'; +import Dialog from "../../components/Dialog"; const useStyles = makeStyles({ root: { @@ -83,6 +83,61 @@ const Explore = (props: Props) => { const [showSensorDetails, updateShowSensorDetails] = React.useState(false); + const [openFirstLoadDialog, setOpenFirstLoadDialog] = React.useState(true); + + // Dialog for first load of Explore page - GLTG only + + const exploreDialog = ( + setOpenFirstLoadDialog(false)} + title="Explore Data Dashboard" + cookieId="explore-dialog" + > +

We present nutrient and water quality data from:

+
    +
  1. + Water Quality Portal (WQP): The Water Quality Portal (WQP) is + the premiere source of discrete water-quality data in the United States and includes + publicly available water-quality data from the United States Geological Survey (USGS), + the Environmental Protection Agency (EPA), and over 400 state, federal, tribal, and + local agencies. We have done the work of distilling the nitrogen and phosphorus data + for you so that you may more easily conduct your own analyses. The data is updated + once a year. +
    2. +
  2. + USGS: This data provides multiple parameters of water quality such + as dissolved oxygen, turbidity, water temperature, nutrient data, and more. +
    3. +
  3. + USGS Super Gage Network: + + https://www.usgs.gov/centers/oki-water/science/super-gage-network + +
    4. +
  4. + Upper Mississippi River Restoration (UMMRR): + + https://www.umesc.usgs.gov/data_library/water_quality/water_quality_page.html + +
    5. +
  5. + Fox River Study Group: The Fox River Study Group is a diverse + coalition of stakeholders using science to guide the region toward a cleaner, safer + and more beautiful Fox River. They have data accessible at: +
    + + https://waterdata.usgs.gov/monitoring-location/05549500/#parameterCode=00065&period=P7D&showMedian=false + +
    + + http://ilrdss.sws.uiuc.edu/fox/ + +
    6. +
+ + ); + React.useEffect(() => { if (!sensors.length) { props.fetchSensors(); @@ -144,7 +199,7 @@ const Explore = (props: Props) => { return (
- + {exploreDialog} Date: Mon, 9 Dec 2024 14:05:42 -0600 Subject: [PATCH 5/6] set to open by default --- packages/geostreaming/src/containers/Explore/Sidebar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/geostreaming/src/containers/Explore/Sidebar.jsx b/packages/geostreaming/src/containers/Explore/Sidebar.jsx index 0cad17f2..40ccd0be 100644 --- a/packages/geostreaming/src/containers/Explore/Sidebar.jsx +++ b/packages/geostreaming/src/containers/Explore/Sidebar.jsx @@ -163,7 +163,7 @@ const Sidebar = ({ const [isSidebarOpen, toggleSidebar] = React.useState(true); const [infoDialogControl, toggleInfoDialog] = React.useState(false); const [selectedSourceId, setSourceId] = React.useState(""); - const [showSensors, updateShowSensors] = React.useState(false); + const [showSensors, updateShowSensors] = React.useState(true); React.useEffect(() => { // When new data comes in, make all sources visible. From f2a2b2f89c465471ddfc02c5782a691f7d3546ec Mon Sep 17 00:00:00 2001 From: vismayak Date: Mon, 9 Dec 2024 14:06:31 -0600 Subject: [PATCH 6/6] set to open by default --- packages/core/src/components/ol/SourcesControl.jsx | 2 +- packages/geostreaming/src/containers/Explore/Sidebar.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/ol/SourcesControl.jsx b/packages/core/src/components/ol/SourcesControl.jsx index eb41ce54..1d012c82 100644 --- a/packages/core/src/components/ol/SourcesControl.jsx +++ b/packages/core/src/components/ol/SourcesControl.jsx @@ -179,7 +179,7 @@ const SourcesControl = ({ const [isSidebarOpen, toggleSidebar] = React.useState(true); const [infoDialogControl, toggleInfoDialog] = React.useState(false); const [selectedSourceId, setSourceId] = React.useState(''); - const [showSensors, updateShowSensors] = React.useState(false); + const [showSensors, updateShowSensors] = React.useState(true); React.useEffect(() => { // When new data comes in, sets sources to visible unless config sources has parameter defaultVisibility diff --git a/packages/geostreaming/src/containers/Explore/Sidebar.jsx b/packages/geostreaming/src/containers/Explore/Sidebar.jsx index 40ccd0be..0cad17f2 100644 --- a/packages/geostreaming/src/containers/Explore/Sidebar.jsx +++ b/packages/geostreaming/src/containers/Explore/Sidebar.jsx @@ -163,7 +163,7 @@ const Sidebar = ({ const [isSidebarOpen, toggleSidebar] = React.useState(true); const [infoDialogControl, toggleInfoDialog] = React.useState(false); const [selectedSourceId, setSourceId] = React.useState(""); - const [showSensors, updateShowSensors] = React.useState(true); + const [showSensors, updateShowSensors] = React.useState(false); React.useEffect(() => { // When new data comes in, make all sources visible.