Merge pull request #42 from Local-Connectivity-Lab/issue28

Adding visibility Button #28

Author: mmt456

.env

@@ -1 +1,2 @@
-PUBLIC_URL=.
+PUBLIC_URL=.
+PORT=3002 

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.vscode/launch.json

package.json

@@ -39,12 +39,12 @@
     "web-vitals": "^2.1.2"
   },
   "scripts": {
-    "start": "PORT=3002 react-scripts start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "format": "prettier --write --config ./prettierrc.json 'src/**/*.{ts,tsx}'",
-    "format-check": "prettier --check --config ./prettierrc.json 'src/**/*.{ts,tsx}'"
+    "format": "prettier --write --config ./prettierrc.json src/**/*.{ts,tsx}",
+    "format-check": "prettier --check --config ./prettierrc.json src/**/*.{ts,tsx}"
   },
   "eslintConfig": {
     "extends": [

src/vis/Vis.tsx

@@ -14,6 +14,7 @@ import IconButton from '@mui/material/IconButton';
 import Container from '@mui/material/Container';
 import MenuIcon from '@mui/icons-material/Menu';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import Visibility from '@mui/icons-material/Visibility';
 import { homeListItems } from '../ListItems';
 import MapSelectionRadio, { MapType } from './MapSelectionRadio';
 import DisplaySelection from './DisplaySelection';
@@ -25,6 +26,7 @@ import LineChart from './LineChart';
 import axios from 'axios';
 import { API_URL } from '../utils/config';
 import { UNITS, MAP_TYPE_CONVERT } from './MeasurementMap';
+import { solveDisplayOptions } from './DisplaySelection';
 
 // import { setOptions } from 'leaflet';
 
@@ -317,7 +319,9 @@ export default function Vis() {
           </Card>
         </Fade>
       </Box>
+
       <Box
+        // new box
         component='main'
         sx={{
           backgroundColor: 'transparent',
@@ -331,6 +335,31 @@ export default function Vis() {
               : 0),
           zIndex: '4',
         }}
+      >
+        <IconButton
+          onClick={() => {
+            setDisplayOptions(
+              solveDisplayOptions(displayOptions, 'displayGraph', true),
+            );
+          }}
+        >
+          <Visibility></Visibility>
+        </IconButton>
+      </Box>
+      <Box
+        component='main'
+        sx={{
+          backgroundColor: 'transparent',
+          overflow: 'none',
+          position: 'absolute',
+          right: '8px',
+          bottom:
+            20 +
+            (displayValue(displayOptions, 'displayGraph')
+              ? chartHeight + 10
+              : +50),
+          zIndex: '5',
+        }}
       >
         <Fade
           mountOnEnter