diff --git a/src/Dashboard.js b/src/Dashboard.js index ae338de..c15221d 100644 --- a/src/Dashboard.js +++ b/src/Dashboard.js @@ -1,24 +1,24 @@ import React from "react"; -import { Routes, Route, HashRouter } from "react-router-dom"; +import { Routes, Route, Link, HashRouter } from "react-router-dom"; import { cloneDeep, has, set} from "lodash"; import ControlPanel from "./components/ControlPanel/ControlPanel"; import OverlayContainer from "./components/OverlayContainer/OverlayContainer"; +import TextButton from "./components/TextButton/TextButton"; import Overlay from "./components/Overlay/Overlay"; -import Explainer from "./components/Explainer/Explainer"; import FAQ from "./components/FAQ/FAQ"; import LiveData from "./components/LiveData/LiveData"; +import Explainer from "./components/Explainer/Explainer"; import { importSiteImages } from "./util/helpers"; import styles from "./Dashboard.module.css"; -import { MenuItem } from "@mui/material"; -import MyTabs from "./components/MyTabs/MyTabs"; // Site description information import siteInfoJSON from "./data/siteInfo.json"; import deccMeasData from "./data/decc_example.json"; - +import { Button } from "@mui/material"; +import LaunchIcon from '@mui/icons-material/Launch'; class Dashboard extends React.Component { constructor(props) { @@ -325,10 +325,11 @@ class Dashboard extends React.Component {
+
- + ☰ - +
} /> - }/> + }/> {overlay}
diff --git a/src/components/MyTabs/MyTabs.js b/src/components/MyTabs/MyTabs.js deleted file mode 100644 index 0ec3776..0000000 --- a/src/components/MyTabs/MyTabs.js +++ /dev/null @@ -1,50 +0,0 @@ -import React, { useState } from "react"; -import { Link } from "react-router-dom"; -import Tabs from "@mui/material/Tabs"; -import Tab from "@mui/material/Tab"; -import QuizOutlinedIcon from '@mui/icons-material/QuizOutlined'; -import { DescriptionOutlined, LaunchOutlined, LiveTvOutlined } from "@mui/icons-material"; - -function MyTabs() { - const [selectedValue, setSelectedValue] = useState(0); // This takes care of the updated variable name - - const handleChange = (event, newValue) => { - setSelectedValue(newValue); - }; - - return ( - - } - label="Live Data" - component={Link} - to="/" - /> - } - label="FAQ" - component={Link} - to="/FAQ" - /> - } - label="Synopsis" - component={Link} - to="/explainer" - /> - }/> - - - ); -} - -export default MyTabs; diff --git a/src/images/Explainer.js b/src/images/Explainer.js deleted file mode 100644 index 04d0129..0000000 --- a/src/images/Explainer.js +++ /dev/null @@ -1,106 +0,0 @@ -import PropTypes from "prop-types"; -import React from "react"; -import ExplanationBox from "../ExplanationBox/ExplanationBox"; -import EstimatesExplainer from "../EstimatesExplainer/EstimatesExplainer"; -import EmissionsBox from "../EmissionsBox/EmissionsBox"; -import EmissionsExplainer from "../EmissionsExplainer/EmissionsExplainer" - -import styles from "../../Dashboard.module.css"; - -import inversionDemo from "../../images/modelVideos/inversion_demo_UK_optim.gif"; -import inventoryComparison from "../../images/methane_BEIS_2019.png"; - -// Model demonstration image -import gasDispersionImage from "../../images/modelImage/emissions_measurements_image.png"; - -class Explainer extends React.Component { - createEmissionsBox() { - const emissionsHeader = "Emissions"; - const emissionsText = `Emissions from the National Atmospheric Emissions Inventory (NAEI).`; - return ( - - ); - } - - // createEmissionsExplainer() { - // const header = "Emissions"; - // const intro = `On the live dashboard page we showed the amount of carbon dioxide and methane we measure in the atmosphere. These measurements can be used to infer emissions.`; - // const body = `There are two primary methods for estimating greenhouse gas emissions: - // a) Inventory methods, in which emissions are estimated using socioeconomic data (e.g., the amount of fuel sold and used in the UK). A map showing the location of the UK's carbon dioxide and methane emissions, according to the inventory, is shown here.\n - // b) Atmospheric data-based methods, in which concentration data and atmospheric models are compared to determine whether the inventory may need to be adjusted.`; - // return ; - // } - - createModelExplainer() { - const header = "Simulating travel of greenhouse gases"; - const body = `When greenhouse gases are emitted, where they travel is dependant - on many different factors including wind direction, speed and turbulence. - Greenhouse gases are often measured from high places, including the top of buildings - and tall masts, like BT towers (as illustrated here). - If we want to start to understand where these greenhouse gases - came from, first we need to use a model that can simulate this. - We can then compare emissions inventories, as described above, to atmospheric - observations and see how well our predictions match reality.`; - // In order to compare inventories to atmospheric observations, we need to use a model that can simulate how greenhouse gases are dispersed in the atmosphere. - // Here, we show a simulation in which XXXXXX.`; - return ; - } - - createComparisonExplainer() { - const header = "Comparing models with observations"; - const body = `To start with we can use our inventory emissions as our initial “best guess” - and compare this to real atmospheric measurements. We can then run simulations to make - small changes to the possible emissions and continuously improve to better match the measurements made at each site. - The animation below illustrates this process, using a site in Tacolneston, Norfolk which is part of - the UK DECC network as an example.`; - return ; - } - - render() { - return ( -
-
{this.createEmissionsBox()}
-
- -
-
{this.createModelExplainer()}
-
- How source gases disperse in the atmopshere -
-
{this.createComparisonExplainer()}
-
- Improvement of model estimates -
-
- -
-
- Inventory improvement - -
-
- ); - } -} - -Explainer.propTypes = { - explain: PropTypes.string, - header: PropTypes.string, - intro: PropTypes.string, -}; - -export default Explainer;