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/components/Dialog.jsx b/packages/geostreaming/src/components/Dialog.jsx new file mode 100644 index 00000000..4a8db1e5 --- /dev/null +++ b/packages/geostreaming/src/components/Dialog.jsx @@ -0,0 +1,98 @@ +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: "60vw", + 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..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} encodeURIComponent( - ` - - + ` + + ` );