Merge pull request #63 from openghg/formatPrettier

Ran prettier over code base
openghg · Sep 15, 2023 · 4220489 · 4220489
2 parents 495f20e + 7d258f1
commit 4220489
Show file tree

Hide file tree

Showing 32 changed files with 307 additions and 331 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,6 @@
+# Ignore artifacts:
+build
+coverage
+
+# Ignore all HTML files:
+**/*.html
diff --git a/src/Dashboard.js b/src/Dashboard.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { Routes, Route, Link, HashRouter } from "react-router-dom";
-import { cloneDeep, has, set} from "lodash";
+import { cloneDeep, has, set } from "lodash";
 
 import ControlPanel from "./components/ControlPanel/ControlPanel";
 import OverlayContainer from "./components/OverlayContainer/OverlayContainer";
@@ -17,7 +17,7 @@ import styles from "./Dashboard.module.css";
 import siteInfoJSON from "./data/siteInfo.json";
 import deccMeasData from "./data/dash_data_test_200_complete.json";
 import { Button, MenuItem } from "@mui/material";
-import LaunchIcon from '@mui/icons-material/Launch';
+import LaunchIcon from "@mui/icons-material/Launch";
 
 class Dashboard extends React.Component {
   constructor(props) {
@@ -156,7 +156,7 @@ class Dashboard extends React.Component {
     let siteStructure = {};
 
     let defaultSpecies = null;
-    let defaultSourceKey = 'decc_tac_54m_picarro';;
+    let defaultSourceKey = "decc_tac_54m_picarro";
     let defaultNetwork = null;
 
     try {
@@ -198,15 +198,12 @@ class Dashboard extends React.Component {
 
                 const dataKey = `${species}.${sourceKey}`;
 
-
-                const combinedData = { data: graphData, metadata: metadata};
+                const combinedData = { data: graphData, metadata: metadata };
 
                 set(processedData, dataKey, combinedData);
-;
               }
             }
           }
-
         }
       }
     } catch (error) {
@@ -324,7 +321,15 @@ class Dashboard extends React.Component {
         <HashRouter>
           <div className={styles.gridContainer}>
             <div className={styles.header}>
-            <Button variant="text" href="https://catalogue.ceda.ac.uk/uuid/f5b38d1654d84b03ba79060746541e4f" target="_blank" startIcon={<LaunchIcon/>} style={{color:"#97FEED"}}>Visit DECC Public Data</Button> 
+              <Button
+                variant="text"
+                href="https://catalogue.ceda.ac.uk/uuid/f5b38d1654d84b03ba79060746541e4f"
+                target="_blank"
+                startIcon={<LaunchIcon />}
+                style={{ color: "#97FEED" }}
+              >
+                Visit DECC Public Data
+              </Button>
               <div className={styles.menuIcon}>
                 <MenuItem styling="light" extrastyling={{ fontSize: "1.6em" }} onClick={this.toggleSidebar}>
                   &#9776;
@@ -352,7 +357,7 @@ class Dashboard extends React.Component {
             <Routes>
               <Route path="/FAQ" element={<FAQ />} />
               <Route path="/" element={liveData} />
-              <Route path="/explainer" element={<Explainer/>}/>            
+              <Route path="/explainer" element={<Explainer />} />
             </Routes>
             {overlay}
           </div>

diff --git a/src/Dashboard.test.js b/src/Dashboard.test.js
@@ -6,7 +6,7 @@ import Dashboard from "./Dashboard";
 
 jest.mock("./util/helpers", () => ({
   importSVGs: () => {
-    return { "1609459200000": "siteName-2021-01-01T00:00:00.svg" };
+    return { 1609459200000: "siteName-2021-01-01T00:00:00.svg" };
   },
   isEmpty: () => false,
   getVisID: () => "123",
@@ -19,16 +19,15 @@ describe("Test Dashboard", () => {
     expect(screen.getByText("A new system for estimating London's emissions")).toBeInTheDocument();
     expect(screen.getByText("Select visualisation type:")).toBeInTheDocument();
     expect(screen.getByText("Footprint Analysis")).toBeInTheDocument();
-    expect(screen.getByTestId("select-form")).toBeInTheDocument()
-
+    expect(screen.getByTestId("select-form")).toBeInTheDocument();
   });
 
   test("Ensure select button selects", () => {
     render(<Dashboard />);
 
     expect(screen.getByText("Select visualisation type:")).toBeInTheDocument();
-    expect(screen.getByTestId("select-form")).toBeInTheDocument()
-    
+    expect(screen.getByTestId("select-form")).toBeInTheDocument();
+
     userEvent.selectOptions(screen.getByTestId("select-form"), ["footprint"]);
     expect(screen.getByTestId("sel-footprint").selected).toBe(true);
     expect(screen.getByTestId("sel-timeseries").selected).toBe(false);
@@ -37,11 +36,9 @@ describe("Test Dashboard", () => {
     userEvent.selectOptions(screen.getByTestId("select-form"), ["timeseries"]);
     expect(screen.getByTestId("sel-footprint").selected).toBe(false);
     expect(screen.getByTestId("sel-timeseries").selected).toBe(true);
-
   });
 
   test("Ensure timeseries plotting panel rendered", () => {
-
     render(<Dashboard />);
 
     userEvent.selectOptions(screen.getByTestId("select-form"), ["timeseries"]);
@@ -89,7 +86,6 @@ describe("Test Dashboard", () => {
   });
 
   test("Ensure footprint analysis rendered", () => {
-
     render(<Dashboard />);
 
     userEvent.selectOptions(screen.getByTestId("select-form"), ["footprint"]);
@@ -99,8 +95,6 @@ describe("Test Dashboard", () => {
     expect(screen.getByTestId("vis-unit-footprint-plot-CO2-fp-TMB")).toBeInTheDocument();
     expect(screen.getByTestId("vis-unit-footprint-plot-CH4-fp-TMB")).toBeInTheDocument();
 
-    expect(screen.getByText("Footprint Analysis")).toBeInTheDocument()
-
+    expect(screen.getByText("Footprint Analysis")).toBeInTheDocument();
   });
-
 });
diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
@@ -6,16 +6,13 @@ class Checkbox extends React.Component {
   render() {
     return (
       <div className={styles.main}>
-        <div className={styles.label}>
-            {this.props.label}
-        </div>
+        <div className={styles.label}>{this.props.label}</div>
         <div className={styles.box}>
           <input
             name={this.props.name}
             data-testid={this.props.name}
             site={this.props.site}
             species={this.props.species}
-
             type="checkbox"
             checked={this.props.checked}
             onChange={this.props.onChange}
@@ -33,7 +30,7 @@ Checkbox.propTypes = {
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   site: PropTypes.string.isRequired,
-  species: PropTypes.string.isRequired
-}
+  species: PropTypes.string.isRequired,
+};
 
 export default Checkbox;
diff --git a/src/components/Checkbox/Checkbox.test.js b/src/components/Checkbox/Checkbox.test.js
@@ -8,9 +8,7 @@ describe("Test Checkbox", () => {
   test("Check ticking calls function", () => {
     const fn = jest.fn();
 
-    render(
-      <Checkbox species="test_species" site="test_site" name="testbox" label="testbox" onChange={fn} />
-    );
+    render(<Checkbox species="test_species" site="test_site" name="testbox" label="testbox" onChange={fn} />);
 
     const checkbox = screen.getByTestId("testbox");
 

diff --git a/src/components/ControlPanel/ControlPanel.js b/src/components/ControlPanel/ControlPanel.js
@@ -32,8 +32,11 @@ class ControlPanel extends React.Component {
     return (
       <div className={styles.container}>
         <div className={styles.closeButton}>
-          <CancelOutlined styling="light" extrastyling={{ fontSize: "2em" }} onClick={this.props.closePanel}>
-          </CancelOutlined>
+          <CancelOutlined
+            styling="light"
+            extrastyling={{ fontSize: "2em" }}
+            onClick={this.props.closePanel}
+          ></CancelOutlined>
         </div>
         <div className={styles.header}>
           <div className={styles.headerText}>DECC Network Dashboard</div>

diff --git a/src/components/ControlPanel/ControlPanel.test.js b/src/components/ControlPanel/ControlPanel.test.js
@@ -63,9 +63,8 @@
 //     userEvent.selectOptions(screen.getByTestId("select-form"), ["footprint"]);
 //     expect(screen.getByTestId("sel-footprint").selected).toBe(true);
 //     expect(screen.getByTestId("sel-timeseries").selected).toBe(false);
-    
+
 //     expect(sel_fn).toHaveBeenCalledTimes(1);
 //   });
 
-
 // });
diff --git a/src/components/DataSelector/DataSelector.test.js b/src/components/DataSelector/DataSelector.test.js
@@ -18,29 +18,29 @@ describe("Test DataSelector", () => {
     expect(screen.getByTestId("AAA_test_c")).toBeInTheDocument();
   });
 
-    test("Check ticking and clicking plot", () => {
-      const fn = jest.fn();
+  test("Check ticking and clicking plot", () => {
+    const fn = jest.fn();
 
-      render(<DataSelector dataKeys={testKeys} dataSelector={fn} />);
+    render(<DataSelector dataKeys={testKeys} dataSelector={fn} />);
 
-      const checkboxA = screen.getByTestId("AAA_test_a");
-      const checkboxB = screen.getByTestId("AAA_test_b");
-      const checkboxC = screen.getByTestId("AAA_test_c");
+    const checkboxA = screen.getByTestId("AAA_test_a");
+    const checkboxB = screen.getByTestId("AAA_test_b");
+    const checkboxC = screen.getByTestId("AAA_test_c");
 
-      expect(checkboxA).not.toBeChecked();
-      expect(checkboxB).not.toBeChecked();
-      expect(checkboxC).not.toBeChecked();
+    expect(checkboxA).not.toBeChecked();
+    expect(checkboxB).not.toBeChecked();
+    expect(checkboxC).not.toBeChecked();
 
-      userEvent.click(checkboxA);
-      userEvent.click(checkboxB);
-      userEvent.click(checkboxC);
+    userEvent.click(checkboxA);
+    userEvent.click(checkboxB);
+    userEvent.click(checkboxC);
 
-      expect(checkboxA).toBeChecked();
-      expect(checkboxB).toBeChecked();
-      expect(checkboxC).toBeChecked();
+    expect(checkboxA).toBeChecked();
+    expect(checkboxB).toBeChecked();
+    expect(checkboxC).toBeChecked();
 
-      userEvent.click(screen.getByRole("button", { name: /plot/i }));
+    userEvent.click(screen.getByRole("button", { name: /plot/i }));
 
-      expect(fn).toHaveBeenCalledTimes(1);
-    });
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/src/components/DensityMap/DensityMap.js b/src/components/DensityMap/DensityMap.js
@@ -4,8 +4,8 @@ import Plot from "react-plotly.js";
 import { extend } from "lodash";
 import styles from "./DensityMap.module.css";
 import ch4MobileGlasgow from "../../data/ch4_mobile_glasgow.json";
-import { createImage } from "../../util/helpers"
-import openghg from "../../images/OpenGHG_Logo_Landscape.png"
+import { createImage } from "../../util/helpers";
+import openghg from "../../images/OpenGHG_Logo_Landscape.png";
 
 class DensityMap extends React.Component {
   render() {
@@ -29,13 +29,13 @@ class DensityMap extends React.Component {
     const uniOfBristol = require(`../../images/UniOfBristolLogo.png`);
     const metOffice = require(`../../images/Metoffice.png`);
     const ncas = require(`../../images/ncas.png`);
-    
+
     const layout = {
       mapbox: { center: { lon: -4.212836, lat: 55.843658 }, style: "open-street-map", zoom: 10 },
       coloraxis: {
         colorscale: "Viridis",
         colorbar: { title: { side: "right", text: "Methane (ppb)", font: { size: 16 } } },
-      },      
+      },
       margin: { t: 30, b: 30, l: 30, r: 30 },
       width: width,
       height: height,

diff --git a/src/components/DynamicDimensions/DynamicDimensions.js b/src/components/DynamicDimensions/DynamicDimensions.js
@@ -50,7 +50,7 @@ DynamicDimensions.propTypes = {
   children: PropTypes.node.isRequired,
   divID: PropTypes.string.isRequired,
   heightScale: PropTypes.string,
-  widthScale: PropTypes.string
-}
+  widthScale: PropTypes.string,
+};
 
 export default DynamicDimensions;
diff --git a/src/components/EmissionsBox/EmissionsBox.js b/src/components/EmissionsBox/EmissionsBox.js
@@ -147,41 +147,39 @@ class EmissionsBox extends React.Component {
       [61.908634740966804, 4.908553108520451],
     ];
 
-    const midpointLat = overlayBounds[0][0] + (overlayBounds[1][0] - overlayBounds[0][0]) / 2
-    const midpointLon = overlayBounds[0][1] + (overlayBounds[1][1] - overlayBounds[0][1]) / 2
-    const overlayMidpoint = [midpointLat, midpointLon]
-    const mapstyle = `proton`
+    const midpointLat = overlayBounds[0][0] + (overlayBounds[1][0] - overlayBounds[0][0]) / 2;
+    const midpointLon = overlayBounds[0][1] + (overlayBounds[1][1] - overlayBounds[0][1]) / 2;
+    const overlayMidpoint = [midpointLat, midpointLon];
+    const mapstyle = `proton`;
 
     // const emissionsText = `Emission locations from the National Atmospheric Emissions Inventory (NAEI). Maps generated using ukghg model.`;
 
     return (
       <div className={styles.container}>
         <div className={styles.caption}>
-            Emission locations from the&nbsp;
-            <a
-              href="https://naei.beis.gov.uk/about/"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+          Emission locations from the&nbsp;
+          <a href="https://naei.beis.gov.uk/about/" target="_blank" rel="noopener noreferrer">
             National Atmospheric Emissions Inventory (NAEI)
-            </a>
+          </a>
           . Maps generated using&nbsp;
-          <a
-              href="https://github.com/NERC-CEH/ukghg"
-              target="_blank"
-              rel="noopener noreferrer"
-            >          
-            ukghg model</a>
+          <a href="https://github.com/NERC-CEH/ukghg" target="_blank" rel="noopener noreferrer">
+            ukghg model
+          </a>
           .
         </div>
         <div className={styles.plot}>
-          <LeafletMap centre={overlayMidpoint} zoom={5} overlayBounds={overlayBounds} overlayImg={emissionsImage} mapstyle={mapstyle}/>
+          <LeafletMap
+            centre={overlayMidpoint}
+            zoom={5}
+            overlayBounds={overlayBounds}
+            overlayImg={emissionsImage}
+            mapstyle={mapstyle}
+          />
         </div>
-        <div className={styles.buttons} style={{padding:'25px'}}>
+        <div className={styles.buttons} style={{ padding: "25px" }}>
           <div className={styles.speciesButtons}>{speciesButtons}</div>
-          </div>
-          <div className={styles.buttons} style={{padding:'0.1%'}}>
-
+        </div>
+        <div className={styles.buttons} style={{ padding: "0.1%" }}>
           <div className={styles.sectorButtons}>{sectorButtons}</div>
         </div>
       </div>