Followup styling fixes (#335)

* Followup to add proper score property to popup
* Adding Additional property name constants

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});
     });
   });
 });

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 {

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>

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';

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,