review fixes, and fix for automated build

.github/workflows/build_deploy.yml

@@ -39,6 +39,8 @@ jobs:
           echo "DESTINATION_FOLDER=$(echo $GITHUB_SHA | cut -c 1-6)" >> $GITHUB_ENV
       - name: Install
         run: npm ci
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Build
         run: npm run build --if-present
       - name: Get directory contents

client/src/components/mapPopup.tsx

@@ -48,7 +48,7 @@ const MapPopup = ({map, selectedFeature, position}: IMapPopupProps) => {
   }, [position]);
 
   const getCategorization = (percentile: number) => {
-    let categorization = '';
+    let categorization;
     if (percentile >= 0.75 ) {
       categorization = 'Prioritized';
     } else if (0.60 <= percentile && percentile < 0.75) {

client/src/components/mapboxMap.module.scss

@@ -12,7 +12,7 @@
   font-family: monospace;
   z-index: 1;
   position: absolute;
-  top: 300;
+  top: 300px;
   left: 0;
   margin: 12px;
   border-radius: 4px;

client/src/components/mapboxMap.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable no-unused-vars */
 import React, {useRef, useEffect, useState} from 'react';
-import {Map, NavigationControl, Popup, MapLayerMouseEvent, Coordinate} from 'mapbox-gl';
+import {Map, NavigationControl} from 'mapbox-gl';
 import * as styles from './mapboxMap.module.scss';
 import mapStyle from '../data/mapStyle';
 import ZoomWarning from './zoomWarning';
 
 const MapboxMap = () => {
   const mapContainer = React.useRef<HTMLDivElement>(null);
-  const map = useRef<Map>() as React.MutableRefObject<Map>; ;
+  const map = useRef<Map>() as React.MutableRefObject<Map>;
   const [lng, setLng] = useState(-86.502136);
   const [lat, setLat] = useState(32.4687126);
   const [zoom, setZoom] = useState(3);

client/src/components/openlayersMap.tsx

@@ -13,9 +13,12 @@ import ZoomWarning from './zoomWarning';
 import MapPopup from './mapPopup';
 import * as styles from './openlayersMap.module.scss';
 
+const DEFAULT_ZOOM = 4;
+const DEFAULT_US_CENTER = [-86.502136, 32.4687126];
+
 interface IMapWrapperProps {
   features: Feature<Geometry>[],
-};
+}
 
 // The below adapted from
 // https://taylor.callsen.me/using-openlayers-with-react-functional-components/
@@ -38,7 +41,7 @@ const MapWrapper = ({features}: IMapWrapperProps) => {
 
   useEffect( () => {
     const view = new View({
-      center: fromLonLat([-86.502136, 32.4687126]),
+      center: fromLonLat(DEFAULT_US_CENTER),
       zoom: 4,
     });
 
@@ -52,7 +55,7 @@ const MapWrapper = ({features}: IMapWrapperProps) => {
       view: view,
       controls: [],
     });
-    const currentZoom = Math.floor(initialMap.getView().getZoom()!);
+    const currentZoom = Math.floor(initialMap.getView().getZoom() || DEFAULT_ZOOM);
 
     initialMap.on('moveend', handleMoveEnd);
     initialMap.on('click', handleMapClick);
@@ -82,7 +85,7 @@ const MapWrapper = ({features}: IMapWrapperProps) => {
     }
   }, [features]);
 
-  const handleMapClick = (event: { pixel: any; }) => {
+  const handleMapClick = (event: { pixel: any }) => {
     const clickedCoord = mapRef.current.getCoordinateFromPixel(event.pixel);
 
     mapRef.current.forEachFeatureAtPixel(event.pixel, (feature) => {
@@ -94,7 +97,7 @@ const MapWrapper = ({features}: IMapWrapperProps) => {
   };
 
   const handleMoveEnd = () => {
-    const newZoom = Math.floor(mapRef.current.getView().getZoom()!);
+    const newZoom = Math.floor(mapRef.current.getView().getZoom() || DEFAULT_ZOOM);
     if (currentZoom != newZoom) {
       setCurrentZoom(newZoom);
     }

client/src/components/zoomWarning.module.scss

@@ -1,18 +1,17 @@
 .zoomWarning {
-    background-color: #953a10;
-    height: 5.5%;
-    width: 66%;
-    margin: auto;
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position:absolute;
-    top:50%;
-    left:20%;
-  }
-  
-  .zoomWarning > img {
-    filter: invert(100%);
-  }
-  
+  background-color: #953a10;
+  height: 5.5%;
+  width: 66%;
+  margin: auto;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  left: 20%;
+}
+
+.zoomWarning > img {
+  filter: invert(100%);
+}

client/src/components/zoomWarning.module.scss.d.ts

@@ -3,11 +3,11 @@ declare namespace ZoomWarningModuleScssNamespace {
         zoomWarning: string;
     }
   }
-  
-  declare const ZoomWarningModuleScssModule: ZoomWarningModuleScssNamespace.IZoomWarningModuleScss & {
+
+declare const ZoomWarningModuleScssModule: ZoomWarningModuleScssNamespace.IZoomWarningModuleScss & {
     /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
     locals: ZoomWarningModuleScssNamespace.IZoomWarningModuleScss;
   };
-  
-  export = ZoomWarningModuleScssModule;
-  
+
+export = ZoomWarningModuleScssModule;
+

client/src/data/mapStyle.tsx

@@ -14,7 +14,7 @@ function hexToHSLA(hex:string, alpha:number) {
  * @param {number} medRamp : the medium value this can assume
  * @param {number} maxRamp : the maximum value this can assume
  * @param {boolean} high : whether this is a "high" or "low" layer
- * @return {FillLayerDetails} a mapboxgl fill layer
+ * @return {FillPaint} a mapboxgl fill layer
  **/
 function makePaint({
   field,
@@ -92,13 +92,13 @@ const mapStyle : Style = {
     'geo': {
       'type': 'raster',
       'tiles': [
-        'http://mt0.google.com/vt/lyrs=p&hl=en&x={x}&y={y}&z={z}',
+        'https://mt0.google.com/vt/lyrs=p&hl=en&x={x}&y={y}&z={z}',
       ],
     },
     'custom': {
       'type': 'vector',
       'tiles': [
-        'http://usds-geoplatform-justice40-website.s3-website-us-east-1.amazonaws.com/0624_demo/{z}/{x}/{y}.pbf',
+        'https://d2zjid6n5ja2pt.cloudfront.net/0624_demo/{z}/{x}/{y}.pbf',
         // For local development, use:
         // 'http://localhost:8080/data/tl_2010_bg_with_data/{z}/{x}/{y}.pbf',
       ],