Merge pull request #31 from Local-Connectivity-Lab/SearchBar

Restricting the search to US area. Merged with Esther present.
Local-Connectivity-Lab · Jan 18, 2024 · ff7a560 · ff7a560
2 parents 902c1dc + d6b340c
commit ff7a560
Show file tree

Hide file tree

Showing 13 changed files with 1,047 additions and 791 deletions.
diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml
@@ -1,11 +1,10 @@
-
 name: Check
 
 on:
   push:
     branches:
-      - '**'
-      - '!main'
+      - "**"
+      - "!main"
 
 jobs:
   check:
@@ -17,7 +16,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version-file: '.node-version'
+          node-version-file: ".node-version"
 
       - name: Install Node dependencies
         run: npm ci

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -5,28 +5,28 @@ name: Publish Site
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   build:
     name: Publish Site
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v3
-
-    - uses: actions/setup-node@v3
-      with:
-        node-version-file: '.node-version'
-        
-    - name: Install Node dependencies
-      run: npm ci
-      
-    - name: Build
-      run: npm run build
-
-    - name: Publish website
-      uses: alex-page/blazing-fast-gh-pages-deploy@v1.1.0
-      with:
-        repo-token: ${{ secrets.GH_PAT }}
-        site-directory: 'build'
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: ".node-version"
+
+      - name: Install Node dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Publish website
+        uses: alex-page/blazing-fast-gh-pages-deploy@v1.1.0
+        with:
+          repo-token: ${{ secrets.GH_PAT }}
+          site-directory: "build"
diff --git a/README.md b/README.md
@@ -21,9 +21,11 @@ npm install
 
 
 # Issues
-- Chart doesn't show tooltips. 
+
+- Chart doesn't show tooltips.
 
 # TODOs
+
 - Make the chart more informative
   - Hover on a line should show the exact data and which sites are they from
 - Admin Panel
@@ -32,4 +34,5 @@ npm install
 - Better compatibility with local development
 
 # Maybe
+
 - More map information
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,12 +26,11 @@
     "fontsource-roboto": "^4.0.0",
     "jsonwebtoken": "^8.5.1",
     "leaflet": "^1.7.1",
-    "node-canvas": "^2.7.0",
+    "leaflet-geosearch": "^3.7.0",
     "prettier": "^2.5.1",
     "qrcode.react": "^1.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "leaflet-geosearch": "^3.7.0",
     "react-multi-select-component": "^4.1.14",
     "react-router": "^6.2.1",
     "react-router-dom": "^6.2.1",
@@ -67,6 +66,7 @@
   },
   "devDependencies": {
     "@types/cors": "^2.8.12",
-    "@types/qrcode.react": "^1.0.2"
+    "@types/qrcode.react": "^1.0.2",
+    "canvas": "^2.11.2"
   }
-}
+}
diff --git a/prettierrc.json b/prettierrc.json
@@ -6,4 +6,4 @@
   "bracketSpacing": true,
   "arrowParens": "avoid",
   "trailingComma": "all"
-}
+}
diff --git a/public/index.html b/public/index.html
@@ -1,22 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <meta name="description" content="Web site created using create-react-app" />
-  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
-    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
-    crossorigin="" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-  <!--
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
+      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+      crossorigin=""
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <!--
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -25,42 +30,48 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>Performance Evaluation</title>
-  <script type="text/javascript">
-    // Single Page Apps for GitHub Pages
-    // https://github.com/rafrex/spa-github-pages
-    // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
-    // ----------------------------------------------------------------------
-    // This script checks to see if a redirect is present in the query string
-    // and converts it back into the correct url and adds it to the
-    // browser's history using window.history.replaceState(...),
-    // which won't cause the browser to attempt to load the new url.
-    // When the single page app is loaded further down in this file,
-    // the correct url will be waiting in the browser's history for
-    // the single page app to route accordingly.
-    (function (l) {
-      if (l.search) {
-        var q = {};
-        l.search.slice(1).split('&').forEach(function (v) {
-          var a = v.split('=');
-          q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
-        });
-        if (q.p !== undefined) {
-          window.history.replaceState(null, null,
-            l.pathname.slice(0, -1) + (q.p || '') +
-            (q.q ? ('?' + q.q) : '') +
-            l.hash
-          );
+    <title>Performance Evaluation</title>
+    <script type="text/javascript">
+      // Single Page Apps for GitHub Pages
+      // https://github.com/rafrex/spa-github-pages
+      // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
+      // ----------------------------------------------------------------------
+      // This script checks to see if a redirect is present in the query string
+      // and converts it back into the correct url and adds it to the
+      // browser's history using window.history.replaceState(...),
+      // which won't cause the browser to attempt to load the new url.
+      // When the single page app is loaded further down in this file,
+      // the correct url will be waiting in the browser's history for
+      // the single page app to route accordingly.
+      (function (l) {
+        if (l.search) {
+          var q = {};
+          l.search
+            .slice(1)
+            .split("&")
+            .forEach(function (v) {
+              var a = v.split("=");
+              q[a[0]] = a.slice(1).join("=").replace(/~and~/g, "&");
+            });
+          if (q.p !== undefined) {
+            window.history.replaceState(
+              null,
+              null,
+              l.pathname.slice(0, -1) +
+                (q.p || "") +
+                (q.q ? "?" + q.q : "") +
+                l.hash
+            );
+          }
         }
-      }
-    }(window.location))
-  </script>
-</head>
+      })(window.location);
+    </script>
+  </head>
 
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-  <!--
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -70,6 +81,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
-</html>
+  </body>
+</html>
diff --git a/src/admin/login.css b/src/admin/login.css
@@ -1,8 +1,8 @@
-.form {
-  max-width: 330px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  padding: 20px;
-  margin-top: 30px;
-}
+.form {
+  max-width: 330px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  margin-top: 30px;
+}
diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
diff --git a/src/utils/fonts.css b/src/utils/fonts.css
@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap");
diff --git a/src/vis/MapLegend.tsx b/src/vis/MapLegend.tsx
@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import * as d3 from 'd3';
-import { createCanvas } from 'node-canvas';
+import { createCanvas } from 'canvas';
 
 const tickSize = 6;
 const height = 150;

diff --git a/src/vis/MeasurementMap.tsx b/src/vis/MeasurementMap.tsx
@@ -17,14 +17,15 @@ import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';
 import 'leaflet-geosearch/dist/geosearch.css';
 
 // Updated with details from: https://stadiamaps.com/stamen/onboarding/migrate/
-const ATTRIBUTION = '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> ' +
+const ATTRIBUTION =
+  '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> ' +
   '&copy; <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> ' +
   '&copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> ' +
   '&copy; <a href="https://www.openstreetmap.org/about/" target="_blank">OpenStreetMap contributors</a>';
 
-  const URL = `https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}${
-    devicePixelRatio > 1 ? '@2x' : ''
-  }.png`;
+const URL = `https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}${
+  devicePixelRatio > 1 ? '@2x' : ''
+}.png`;
 
 const BIN_SIZE_SHIFT = 0;
 const DEFAULT_ZOOM = 10;
@@ -93,8 +94,12 @@ const MeasurementMap = ({
   const [cDomain, setCDomain] = useState<number[]>();
   const [map, setMap] = useState<L.Map>();
   const [bins, setBins] = useState<number[][]>([]);
-  const [bounds, setBounds] =
-    useState<{ left: number; top: number; width: number; height: number }>();
+  const [bounds, setBounds] = useState<{
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  }>();
   // Data squares
   const [layer, setLayer] = useState<L.LayerGroup>();
   // Layer for boundaries

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }