From cb1ecb1614ce16b7dcc5fa2d42e77b1bf0037f94 Mon Sep 17 00:00:00 2001 From: Nat Hillard Date: Tue, 29 Jun 2021 11:30:16 -0400 Subject: [PATCH] review fixes, and fix for automated build --- .github/workflows/build_deploy.yml | 2 ++ client/src/components/mapPopup.tsx | 2 +- client/src/components/mapboxMap.module.scss | 2 +- client/src/components/mapboxMap.tsx | 4 +-- client/src/components/openlayersMap.tsx | 13 +++++--- client/src/components/zoomWarning.module.scss | 33 +++++++++---------- .../components/zoomWarning.module.scss.d.ts | 10 +++--- client/src/data/mapStyle.tsx | 6 ++-- 8 files changed, 38 insertions(+), 34 deletions(-) diff --git a/.github/workflows/build_deploy.yml b/.github/workflows/build_deploy.yml index 23bb9608..2cc37d14 100644 --- a/.github/workflows/build_deploy.yml +++ b/.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 diff --git a/client/src/components/mapPopup.tsx b/client/src/components/mapPopup.tsx index 3f7002a2..5aede0a5 100644 --- a/client/src/components/mapPopup.tsx +++ b/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) { diff --git a/client/src/components/mapboxMap.module.scss b/client/src/components/mapboxMap.module.scss index 7cbacfef..c7fcb227 100644 --- a/client/src/components/mapboxMap.module.scss +++ b/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; diff --git a/client/src/components/mapboxMap.tsx b/client/src/components/mapboxMap.tsx index 90c978a8..6d3a6060 100644 --- a/client/src/components/mapboxMap.tsx +++ b/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(null); - const map = useRef() as React.MutableRefObject; ; + const map = useRef() as React.MutableRefObject; const [lng, setLng] = useState(-86.502136); const [lat, setLat] = useState(32.4687126); const [zoom, setZoom] = useState(3); diff --git a/client/src/components/openlayersMap.tsx b/client/src/components/openlayersMap.tsx index 4fb7a305..e9ab2fa9 100644 --- a/client/src/components/openlayersMap.tsx +++ b/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[], -}; +} // 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); } diff --git a/client/src/components/zoomWarning.module.scss b/client/src/components/zoomWarning.module.scss index 6fcee201..ae8ad5fb 100644 --- a/client/src/components/zoomWarning.module.scss +++ b/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%); - } - \ No newline at end of file + 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%); +} diff --git a/client/src/components/zoomWarning.module.scss.d.ts b/client/src/components/zoomWarning.module.scss.d.ts index c5b06ea6..d89abb69 100644 --- a/client/src/components/zoomWarning.module.scss.d.ts +++ b/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; - \ No newline at end of file + +export = ZoomWarningModuleScssModule; + diff --git a/client/src/data/mapStyle.tsx b/client/src/data/mapStyle.tsx index 8656cf7b..aa16859a 100644 --- a/client/src/data/mapStyle.tsx +++ b/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', ],