Census block groups should highlight when selected (#317)

* Fixes #280 - adds territory focus buttons for Alaska, Hawaii, Lower 48, and Puerto Rico to enable easy zoom to these locations

* Adding tests - Specifically:
    * Adding VSCode debug command for Cypress and debug port specification
    * Disabling CORS on local tests
    * Adding waitForMapIdle Cypress test helper
    * Adding constants for easy change and access

client/src/components/J40Map.tsx

@@ -5,7 +5,8 @@ import maplibregl, {LngLatBoundsLike,
   NavigationControl,
   PopupOptions,
   Popup,
-  LngLatLike} from 'maplibre-gl';
+  LngLatLike,
+  MapboxGeoJSONFeature} from 'maplibre-gl';
 import mapStyle from '../data/mapStyle';
 import ZoomWarning from './zoomWarning';
 import PopupContent from './popupContent';
@@ -25,6 +26,7 @@ type ClickEvent = maplibregl.MapMouseEvent & maplibregl.EventData;
 const J40Map = () => {
   const mapContainer = React.useRef<HTMLDivElement>(null);
   const mapRef = useRef<Map>() as React.MutableRefObject<Map>;
+  const selectedFeature = useRef<MapboxGeoJSONFeature>();
   const [zoom, setZoom] = useState(constants.GLOBAL_MIN_ZOOM);
 
   useEffect(() => {
@@ -55,6 +57,20 @@ const J40Map = () => {
     initialMap.addControl(new NavigationControl({showCompass: false}), 'top-left');
     mapRef.current = initialMap;
   }, []);
+  const setMapSelected = (feature:MapboxGeoJSONFeature, isSelected:boolean) : void => {
+    // The below can be confirmed during debug with:
+    // mapRef.current.getFeatureState({"id":feature.id, "source":feature.source, "sourceLayer":feature.sourceLayer})
+    mapRef.current.setFeatureState({
+      source: feature.source,
+      sourceLayer: feature.sourceLayer,
+      id: feature.id,
+    }, {selected: isSelected});
+    if (isSelected) {
+      selectedFeature.current = feature;
+    } else {
+      selectedFeature.current = undefined;
+    }
+  };
 
   const handleClick = (e: ClickEvent) => {
     const map = e.target;
@@ -62,10 +78,16 @@ const J40Map = () => {
     const features = map.queryRenderedFeatures(clickedCoord, {
       layers: ['score'],
     });
-
-    if (features.length && features[0].properties) {
+    const feature = features && features[0];
+    if (feature) {
       const placeholder = document.createElement('div');
-      ReactDOM.render(<PopupContent properties={features[0].properties} />, placeholder);
+      // If we've selected a new feature, set 'selected' to false
+      if (selectedFeature.current && feature.id !== selectedFeature.current.id) {
+        setMapSelected(selectedFeature.current, false);
+      }
+      setMapSelected(feature, true);
+
+      ReactDOM.render(<PopupContent properties={feature.properties} />, placeholder);
       const options : PopupOptions = {
         offset: [0, 0],
         className: styles.j40Popup,
@@ -74,6 +96,9 @@ const J40Map = () => {
       new Popup(options)
           .setLngLat(e.lngLat)
           .setDOMContent(placeholder)
+          .on('close', function() {
+            setMapSelected(feature, false);
+          })
           .addTo(map);
     }
   };

client/src/components/popupContent.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import * as constants from '../data/constants';
 import * as styles from './popupContent.module.scss';
+import {GeoJsonProperties} from 'geojson';
 
 interface IPopupContentProps {
-  properties: constants.J40Properties,
+  properties: GeoJsonProperties,
 }
 
-
 const PopupContent = ({properties}:IPopupContentProps) => {
   const readablePercent = (percent: number) => {
     return `${(percent * 100).toFixed(2)}`;

client/src/data/constants.tsx

@@ -1,6 +1,16 @@
+// URLS
+export const FEATURE_TILE_BASE_URL = 'https://d2zjid6n5ja2pt.cloudfront.net/0629_demo';
+
+// Performance markers
+export const PERFORMANCE_MARKER_MAP_IDLE = 'MAP_IDLE';
+
 // Properties
 export const SCORE_PROPERTY = 'Score D (percentile)';
 export const GEOID_PROPERTY = 'GEOID10';
+export const SCORE_SOURCE_NAME = 'score';
+// The name of the layer within the tiles that contains the score
+export const SCORE_SOURCE_LAYER = 'blocks';
+
 export type J40Properties = { [key: string]: any };
 
 
@@ -63,3 +73,4 @@ export const DEFAULT_OUTLINE_COLOR = '#4EA5CF';
 export const MIN_COLOR = '#FFFFFF';
 export const MED_COLOR = '#D1DAE6';
 export const MAX_COLOR = '#768FB3';
+export const BORDER_HIGHLIGHT_COLOR = '#00BDE3';

client/src/data/mapStyle.tsx

@@ -63,8 +63,11 @@ const mapStyle : Style = {
     },
     'score': {
       'type': 'vector',
+      // Our current tippecanoe command does not set an id.
+      // The below line promotes the GEOID10 property to the ID
+      'promoteId': 'GEOID10',
       'tiles': [
-        'https://d2zjid6n5ja2pt.cloudfront.net/0629_demo/{z}/{x}/{y}.pbf',
+        `${constants.FEATURE_TILE_BASE_URL}/{z}/{x}/{y}.pbf`,
         // For local development, use:
         // 'http://localhost:8080/data/tl_2010_bg_with_data/{z}/{x}/{y}.pbf',
       ],
@@ -98,8 +101,8 @@ const mapStyle : Style = {
     },
     {
       'id': 'score',
-      'source': 'score',
-      'source-layer': 'blocks',
+      'source': constants.SCORE_SOURCE_NAME,
+      'source-layer': constants.SCORE_SOURCE_LAYER,
       'type': 'fill',
       'filter': ['all',
         ['>', constants.SCORE_PROPERTY, 0.6],
@@ -117,7 +120,7 @@ const mapStyle : Style = {
     {
       'id': 'score-highlights',
       'source': 'score',
-      'source-layer': 'blocks',
+      'source-layer': constants.SCORE_SOURCE_LAYER,
       'type': 'line',
       'minzoom': constants.GLOBAL_MIN_ZOOM_HIGH,
       'layout': {
@@ -131,6 +134,24 @@ const mapStyle : Style = {
         'line-opacity': 0.5,
       },
     },
+    {
+      // This layer queries the feature-state property "selected" and
+      // highlights the border of the selected region if true
+      'id': 'score-border-highlight',
+      'type': 'line',
+      'source': 'score',
+      'source-layer': constants.SCORE_SOURCE_LAYER,
+      'layout': {},
+      'paint': {
+        'line-color': constants.BORDER_HIGHLIGHT_COLOR,
+        'line-width': [
+          'case',
+          ['boolean', ['feature-state', 'selected'], false],
+          5.0,
+          0,
+        ],
+      },
+    },
     {
       'id': 'labels-only',
       'type': 'raster',