Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

95 gltg explore page changes #96

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/core/src/components/ol/SourcesControl.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
98 changes: 98 additions & 0 deletions packages/geostreaming/src/components/Dialog.jsx
Original file line number Diff line number Diff line change
@@ -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 (
<MuiDialog
open={open}
onClose={handleClose}
classes={{
paper: classes.dialogPaper
}}
>
<DialogTitle>
{title}
<IconButton className={classes.dialogCloseButton} onClick={handleClose}>
<Clear />
</IconButton>
</DialogTitle>

<DialogContent >
<DialogContentText>
{children}
<div className={classes.checkboxContainer}>
<FormControlLabel
control={
<Checkbox
checked={dontShowAgain}
onChange={(e) => setDontShowAgain(e.target.checked)}
color="primary"
/>
}
label="Don't show this message again"
/>
</div>
</DialogContentText>
</DialogContent>
</MuiDialog>
);
};

export default Dialog;
59 changes: 57 additions & 2 deletions packages/geostreaming/src/containers/Explore/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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 = (
<Dialog
open={openFirstLoadDialog}
onClose={() => setOpenFirstLoadDialog(false)}
title="Explore Data Dashboard"
cookieId="explore-dialog"
>
<h2>We present nutrient and water quality data from:</h2>
<ol>
<li>
<strong>Water Quality Portal (WQP):</strong> 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.
</li>
<li>
<strong>USGS:</strong> This data provides multiple parameters of water quality such
as dissolved oxygen, turbidity, water temperature, nutrient data, and more.
</li>
<li>
<strong>USGS Super Gage Network:</strong>
<a href="https://www.usgs.gov/centers/oki-water/science/super-gage-network">
https://www.usgs.gov/centers/oki-water/science/super-gage-network
</a>
</li>
<li>
<strong>Upper Mississippi River Restoration (UMMRR):</strong>
<a href="https://www.umesc.usgs.gov/data_library/water_quality/water_quality_page.html">
https://www.umesc.usgs.gov/data_library/water_quality/water_quality_page.html
</a>
</li>
<li>
<strong>Fox River Study Group:</strong> 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:
<br />
<a href="https://waterdata.usgs.gov/monitoring-location/05549500/#parameterCode=00065&period=P7D&showMedian=false">
https://waterdata.usgs.gov/monitoring-location/05549500/#parameterCode=00065&period=P7D&showMedian=false
</a>
<br />
<a href="http://ilrdss.sws.uiuc.edu/fox/">
http://ilrdss.sws.uiuc.edu/fox/
</a>
</li>
</ol>
</Dialog>
);

React.useEffect(() => {
if (!sensors.length) {
props.fetchSensors();
Expand Down Expand Up @@ -144,7 +199,7 @@ const Explore = (props: Props) => {

return (
<div className={classes.root}>

{exploreDialog}
<Map
mapConfig={mapConfig}
sourcesConfig={sourcesConfig}
Expand Down
6 changes: 3 additions & 3 deletions packages/geostreaming/src/containers/Map/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -111,9 +111,9 @@ interface Props {

const getMarker = (fill: string, stroke: string) =>
encodeURIComponent(
`<svg width="15" height="25" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer">
<path d="M 1 11 A 7 7.5 0 1 1 14 11 L 7.5 25 z" stroke="${stroke}" stroke-width="1" fill="white" />
<ellipse cx="7.5" cy="8.5" rx="4.5" ry="5.5" fill="${fill}" />
`<svg width="10" height="17" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer">
<path d="M 1 7.5 A 4.5 5 0 1 1 9 7.5 L 5 17 z" stroke="${stroke}" stroke-width="1" fill="white" />
<ellipse cx="5" cy="5.5" rx="3" ry="3.5" fill="${fill}" />
</svg>`
);

Expand Down