From 6c8d71c5b90021e77c060168e5399e6665d73d62 Mon Sep 17 00:00:00 2001
From: Nat Hillard <72811320+NatHillardUSDS@users.noreply.github.com>
Date: Tue, 13 Jul 2021 11:17:49 -0400
Subject: [PATCH] Followup styling fixes (#335)

* Followup to add proper score property to popup
* Adding Additional property name constants
---
 client/cypress/e2e/map.spec.js         |  2 +-
 client/src/components/J40Map.tsx       |  2 +-
 client/src/components/popupContent.tsx |  2 +-
 client/src/data/constants.tsx          |  1 +
 client/src/data/mapStyle.tsx           | 12 ++++++------
 5 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/client/cypress/e2e/map.spec.js b/client/cypress/e2e/map.spec.js
index ee0dface..1857a49f 100644
--- a/client/cypress/e2e/map.spec.js
+++ b/client/cypress/e2e/map.spec.js
@@ -54,7 +54,7 @@ describe('Tests for the Explore the Map page', () => {
       cy.waitForMapIdle(map);
       map.fire('click', {lngLat: punx1001Info.coords});
       const punx1001FeatureState = getFeatureState(map, punx1001Info.id);
-      expect(punx1001FeatureState).to.deep.equal({'selected': true});
+      expect(punx1001FeatureState).to.deep.equal({[constants.SELECTED_PROPERTY]: true});
     });
   });
 });
diff --git a/client/src/components/J40Map.tsx b/client/src/components/J40Map.tsx
index 691cf97c..7e3e7ff5 100644
--- a/client/src/components/J40Map.tsx
+++ b/client/src/components/J40Map.tsx
@@ -63,7 +63,7 @@ const J40Map = () => {
       source: feature.source,
       sourceLayer: feature.sourceLayer,
       id: feature.id,
-    }, {selected: isSelected});
+    }, {[constants.SELECTED_PROPERTY]: isSelected});
     if (isSelected) {
       selectedFeature.current = feature;
     } else {
diff --git a/client/src/components/popupContent.tsx b/client/src/components/popupContent.tsx
index 03889a11..85bbe853 100644
--- a/client/src/components/popupContent.tsx
+++ b/client/src/components/popupContent.tsx
@@ -26,7 +26,7 @@ const PopupContent = ({properties}:IPopupContentProps) => {
 
   const getTitleContent = (properties: constants.J40Properties) => {
     const blockGroup = properties[constants.GEOID_PROPERTY];
-    const score = properties[constants.SCORE_PROPERTY] as number;
+    const score = properties[constants.SCORE_PROPERTY_HIGH] as number;
     return (
       <div className={styles.titleContainer}>
         <div>
diff --git a/client/src/data/constants.tsx b/client/src/data/constants.tsx
index 5da6fd4b..c3e6b55a 100644
--- a/client/src/data/constants.tsx
+++ b/client/src/data/constants.tsx
@@ -16,6 +16,7 @@ export const HIGH_SCORE_SOURCE_NAME = 'score-high';
 export const HIGH_SCORE_LAYER_NAME = 'score-high-layer';
 export const LOW_SCORE_SOURCE_NAME = 'score-low';
 export const LOW_SCORE_LAYER_NAME = 'score-low-layer';
+export const SELECTED_PROPERTY = 'selected';
 
 // The name of the layer within the tiles that contains the score
 export const SCORE_SOURCE_LAYER = 'blocks';
diff --git a/client/src/data/mapStyle.tsx b/client/src/data/mapStyle.tsx
index 1b872c0d..c4da6550 100644
--- a/client/src/data/mapStyle.tsx
+++ b/client/src/data/mapStyle.tsx
@@ -68,7 +68,7 @@ const mapStyle : Style = {
       'minzoom': constants.GLOBAL_MIN_ZOOM,
       'maxzoom': constants.GLOBAL_MAX_ZOOM,
     },
-    'score-high': {
+    [constants.HIGH_SCORE_SOURCE_NAME]: {
       // "Score-high" represents the full set of data
       // at the census block group level. It is only shown
       // at high zoom levels to avoid performance issues at lower zooms
@@ -85,7 +85,7 @@ const mapStyle : Style = {
       'minzoom': constants.GLOBAL_MIN_ZOOM_HIGH,
       'maxzoom': constants.GLOBAL_MAX_ZOOM_HIGH,
     },
-    'score-low': {
+    [constants.LOW_SCORE_SOURCE_NAME]: {
       // "Score-low" represents a tileset at the level of bucketed tracts.
       // census block group information is `dissolve`d into tracts, then
       // each tract is `dissolve`d into one of ten buckets. It is meant
@@ -165,7 +165,7 @@ const mapStyle : Style = {
     {
       // "Score-highlights" represents the border
       // around given tiles that appears at higher zooms
-      'id': 'score-highlights',
+      'id': 'score-highlights-layer',
       'source': constants.HIGH_SCORE_SOURCE_NAME,
       'source-layer': constants.SCORE_SOURCE_LAYER,
       'type': 'line',
@@ -185,7 +185,7 @@ const mapStyle : Style = {
     {
       // "score-border-highlight" is used to highlight
       // the currently-selected feature
-      'id': 'score-border-highlight',
+      'id': 'score-border-highlight-layer',
       'type': 'line',
       'source': constants.HIGH_SCORE_SOURCE_NAME,
       'source-layer': constants.SCORE_SOURCE_LAYER,
@@ -194,7 +194,7 @@ const mapStyle : Style = {
         'line-color': constants.BORDER_HIGHLIGHT_COLOR,
         'line-width': [
           'case',
-          ['boolean', ['feature-state', 'selected'], false],
+          ['boolean', ['feature-state', constants.SELECTED_PROPERTY], false],
           constants.HIGHLIGHT_BORDER_WIDTH,
           0,
         ],
@@ -204,7 +204,7 @@ const mapStyle : Style = {
     },
     {
       // We put labels last to ensure prominence
-      'id': 'labels-only',
+      'id': 'labels-only-layer',
       'type': 'raster',
       'source': 'labels',
       'minzoom': constants.GLOBAL_MIN_ZOOM,