update areaDetail with data from d3 CDN (#547)

* update areaDetail with data from d3 CDN

- updated constants with d3 CDN info
- placed AreaDetail component in folder
- fixed J40Alert padding-left console warning
- added tests for both J40Alert rendering

* udpates FE to percentile data

* testing CORS on PR'd URL

* testing PR'd URL

.github/workflows/build_deploy.yml

@@ -101,7 +101,7 @@ jobs:
         run: aws s3 sync ./public/ s3://usds-geoplatform-justice40-website/justice40-tool/${{env.DESTINATION_FOLDER}} --acl public-read --delete
       - name: Update PR with deployed URL
         uses: mshick/add-pr-comment@v1
-        if: github.event_name == 'pull_request' && github.event.action == 'opened' || github.event_name == 'push' # Only comment if the PR has been opened or a push has updated it
+        if: (github.event_name == 'pull_request' && github.event.action == 'opened') || github.event_name == 'push' # Only comment if the PR has been opened or a push has updated it
         with:
           message: |
             **🚢 PR Deployed! 🚢**

client/src/components/AreaDetail/areaDetail.module.scss

@@ -1,4 +1,4 @@
-@import "./utils.scss";
+@import "../utils.scss";
 
 $sidePanelLabelFontColor: #171716;
 $featureSelectBorderColor: #00bde3;

client/src/components/AreaDetail/areaDetail.module.scss.d.ts

@@ -17,7 +17,6 @@ declare namespace MapModuleScssNamespace {
     censusLabel:string;
     divider:string;
     indicatorBox:string;
-    indicatorInfo:string;
     indicatorTitle:string;
     indicatorDescription:string;
     indicatorValue:string;

client/src/components/AreaDetail/index.tsx

@@ -7,7 +7,7 @@ import {defineMessages} from 'react-intl';
 
 // Styles and constants
 import * as styles from './areaDetail.module.scss';
-import * as constants from '../data/constants';
+import * as constants from '../../data/constants';
 
 export const readablePercent = (percent: number) => {
   return `${(percent * 100).toFixed(1)}`;
@@ -113,6 +113,8 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
   const score = properties[constants.SCORE_PROPERTY_HIGH] as number;
   const blockGroup = properties[constants.GEOID_PROPERTY];
   const population = properties[constants.TOTAL_POPULATION];
+  const countyName = properties[constants.COUNTY_NAME];
+  const stateName = properties[constants.STATE_NAME];
 
   interface indicatorInfo {
     label: string,
@@ -176,11 +178,11 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
         </li>
         <li>
           <span className={styles.censusLabel}>{intl.formatMessage(messages.county)} </span>
-          <span className={styles.censusText}>{'Washington County*'}</span>
+          <span className={styles.censusText}>{countyName}</span>
         </li>
         <li>
           <span className={styles.censusLabel}>{intl.formatMessage(messages.state)}</span>
-          <span className={styles.censusText}>{'District of Columbia*'}</span>
+          <span className={styles.censusText}>{stateName}</span>
         </li>
         <li>
           <span className={styles.censusLabel}>{intl.formatMessage(messages.population)} </span>
@@ -194,7 +196,7 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
 
       {indicators.map((indicator, index) => (
         <li key={index} className={styles.indicatorBox} data-cy={'indicatorBox'}>
-          <div className={styles.indicatorInfo}>
+          <div>
             <div className={styles.indicatorTitle}>{indicator.label}</div>
             <div className={styles.indicatorDescription}>
               {indicator.description}

client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap

@@ -49,17 +49,13 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
         <span>
           County: 
         </span>
-        <span>
+        <span />
-          Washington County*
-        </span>
       </li>
       <li>
         <span>
           State: 
         </span>
-        <span>
+        <span />
-          District of Columbia*
-        </span>
       </li>
       <li>
         <span>

client/src/components/AreaDetail/tests/areaDetail.test.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import {render} from '@testing-library/react';
-import AreaDetail, {getCategorization, readablePercent} from './areaDetail';
+import AreaDetail, {getCategorization, readablePercent} from '..';
-import {LocalizedComponent} from '../test/testHelpers';
+import {LocalizedComponent} from '../../../test/testHelpers';
-import * as constants from '../data/constants';
+import * as constants from '../../../data/constants';
 
 describe('rendering of the AreaDetail', () => {
   const properties = {

client/src/components/DatasetContainer/index.tsx

@@ -76,7 +76,7 @@ const DatasetContainer = () => {
     <div className={`${styles.datasetContainer} desktop:grid-col`}>
       <div className={`${styles.j40AlertContainer} desktop:grid-col`}>
         <div className={'grid-container-desktop-lg'}>
-          <J40Alert />
+          <J40Alert isPaddedLeft={false}/>
         </div>
       </div>
       <div className={'grid-container-desktop-lg'}>

client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap

@@ -11,7 +11,9 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       <div
         class="grid-container-desktop-lg"
       >
-        <div>
+        <div
+          class="undefined undefined"
+        >
           Limited data sources — Datasets may be added, updated, or removed.
         </div>
       </div>

client/src/components/J40Alert/index.tsx

@@ -1,25 +1,28 @@
 import React from 'react';
 import {useIntl} from 'gatsby-plugin-intl';
 import {defineMessages} from 'react-intl';
+
 import * as styles from './j40Alert.module.scss';
 
 // This prop follows an inversion of control pattern allowing the user of this component to specify
 // how it's rendered. See more here: https://kentcdodds.com/blog/inversion-of-control
 interface IJ40AlertProps {
-  alertStyle?: {[key:string]: string};
+  isPaddedLeft: boolean;
 }
 
-const J40Alert = ({alertStyle}:IJ40AlertProps) => {
+const J40Alert = ({isPaddedLeft}: IJ40AlertProps) => {
   const intl = useIntl();
   const messages = defineMessages({
     alertMsg: {
       id: 'datasetAlert.header.alertMsg',
-      defaultMessage: 'Limited data sources — Datasets may be added, updated, or removed.',
+      defaultMessage:
+        'Limited data sources — Datasets may be added, updated, or removed.',
       description: 'an alert message to inform users that datasets may change',
     },
   });
+
   return (
-    <div className={styles.j40Alert} style={alertStyle}>
+    <div className={`${styles.j40Alert} ${isPaddedLeft ? styles.j40AlertPaddedLeft : styles.j40AlertNoPaddingLeft}`}>
       {intl.formatMessage(messages.alertMsg)}
     </div>
   );

client/src/components/J40Alert/j40Alert.module.scss

@@ -11,3 +11,11 @@
 .j40Alert {
   @include j40AlertBase;
 }
+
+.j40AlertPaddedLeft {
+  padding-left: 1rem;
+}
+
+.j40AlertNoPaddingLeft {
+  padding-left: 0;
+}

client/src/components/J40Alert/j40Alert.module.scss.d.ts

@@ -1,7 +1,8 @@
 declare namespace J40AlertScssNamespace {
     export interface IJ40AlertScss {
       j40Alert: string;
-        j40AlertLeftPad: string;
+      j40AlertPaddedLeft: string;
+      j40AlertNoPaddingLeft: string;
     }
   }
 

client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap

@@ -1,8 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`rendering of the J40Alert tests the rendering of J40Alert 1`] = `
+exports[`rendering of the J40Alert tests the rendering of J40Alert with padding 1`] = `
 <DocumentFragment>
-  <div>
+  <div
+    class="undefined undefined"
+  >
+    Limited data sources — Datasets may be added, updated, or removed.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`rendering of the J40Alert tests the rendering of J40Alert without padding 1`] = `
+<DocumentFragment>
+  <div
+    class="undefined undefined"
+  >
     Limited data sources — Datasets may be added, updated, or removed.
   </div>
 </DocumentFragment>

client/src/components/J40Alert/tests/j40Alert.test.tsx

@@ -4,10 +4,20 @@ import {LocalizedComponent} from '../../../test/testHelpers';
 import J40Alert from '../index';
 
 describe('rendering of the J40Alert', () => {
-  it('tests the rendering of J40Alert', () => {
+  it('tests the rendering of J40Alert without padding', () => {
     const {asFragment} = render(
         <LocalizedComponent>
-          <J40Alert />
+          <J40Alert isPaddedLeft={false}/>
+        </LocalizedComponent>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('tests the rendering of J40Alert with padding', () => {
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <J40Alert isPaddedLeft={true}/>
         </LocalizedComponent>,
     );
 

client/src/components/J40Map.tsx

@@ -22,7 +22,7 @@ import {useFlags} from '../contexts/FlagContext';
 // Components:
 import TerritoryFocusControl from './territoryFocusControl';
 import MapInfoPanel from './mapInfoPanel';
-import AreaDetail from './areaDetail';
+import AreaDetail from './AreaDetail';
 
 // Styles and constants
 import {makeMapStyle} from '../data/mapStyle';
@@ -104,7 +104,6 @@ const J40Map = ({location}: IJ40Interface) => {
     }
   };
 
-
   const onLoad = () => {
     if (typeof window !== 'undefined' && window.Cypress && mapRef.current) {
       window.underlyingMap = mapRef.current.getMap();

client/src/components/MapWrapper/index.tsx

@@ -28,7 +28,7 @@ const MapWrapper = ({location}: IMapWrapperProps) => {
   });
   return (
     <>
-      <J40Alert alertStyle={{'padding-left': '1rem'}}/>
+      <J40Alert isPaddedLeft={true}/>
       <J40Map location={location}/>
       <div className={styles.mapCaptionTextLink}>
         <a href={constants.DOWNLOAD_ZIP_URL}>

client/src/components/mapInfoPanel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import MapIntroduction from './mapIntroduction';
-import AreaDetail from './areaDetail';
+import AreaDetail from './AreaDetail';
 
 interface IMapInfoPanelProps {
     className: string,

client/src/data/constants.tsx

@@ -4,21 +4,31 @@ import {defineMessages} from 'react-intl';
 
 // URLS
 export const DOWNLOAD_ZIP_URL = 'https://justice40-data.s3.amazonaws.com/data-pipeline/data/score/downloadable/Screening+Tool+Data.zip';
-export const FEATURE_TILE_BASE_URL = 'https://d2zjid6n5ja2pt.cloudfront.net';
+
+// This is the URL for the origin S3 bucket:
+// export const ORIGIN_BASE_URL = 'https://justice40-data.s3.amazonaws.com';
+
+// This is the URL for the CDN that delivers the tile data
+export const FEATURE_TILE_BASE_URL = 'https://d3jqyw10j8e7p9.cloudfront.net';
+const FEATURE_TILE_PATH = 'data-pipeline/data/score/tiles';
+
+// This is the URL for the CDN that delivers the application
+// const APP_BASE_URL = 'https://d2zjid6n5ja2pt.cloudfront.net';
 const XYZ_SUFFIX = '{z}/{x}/{y}.pbf';
+
 export const featureURLForTilesetName = (tilesetName :string ) : string => {
-  return `${FEATURE_TILE_BASE_URL}/${tilesetName}/${XYZ_SUFFIX}`;
+  return `${FEATURE_TILE_BASE_URL}/${FEATURE_TILE_PATH}/${tilesetName}/${XYZ_SUFFIX}`;
 };
-export const FEATURE_TILE_HIGH_ZOOM_URL = featureURLForTilesetName('0714_high');
+export const FEATURE_TILE_HIGH_ZOOM_URL = featureURLForTilesetName('high');
-export const FEATURE_TILE_LOW_ZOOM_URL = featureURLForTilesetName('tiles_low');
+export const FEATURE_TILE_LOW_ZOOM_URL = featureURLForTilesetName('low');
 
 
 // Performance markers
 export const PERFORMANCE_MARKER_MAP_IDLE = 'MAP_IDLE';
 
 // Properties
-export const SCORE_PROPERTY_HIGH = 'Score D (percentile)';
+export const SCORE_PROPERTY_HIGH = 'Score E (percentile)';
-export const SCORE_PROPERTY_LOW = 'D_SCORE';
+export const SCORE_PROPERTY_LOW = 'E_SCORE';
 export const GEOID_PROPERTY = 'GEOID10';
 export const HIGH_SCORE_SOURCE_NAME = 'score-high';
 export const HIGH_SCORE_LAYER_NAME = 'score-high-layer';
@@ -35,8 +45,11 @@ export const HOUSING_BURDEN_PROPERTY_PERCENTILE = 'Housing burden (percent) (per
 export const LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE = 'Linguistic isolation (percent) (percentile)';
 export const UNEMPLOYMENT_PROPERTY_PERCENTILE = 'Unemployed civilians (percent) (percentile)';
 export const TOTAL_POPULATION = 'Total population';
-export const EDUCATION_PROPERTY_PERCENTILE = 'Percent individuals age 25 or over ' +
+export const EDUCATION_PROPERTY_PERCENTILE =
-'with less than high school degree (percentile)';
+`Percent individuals age 25 or over with less than high school degree (percentile)`;
+export const COUNTY_NAME = 'County Name';
+export const STATE_NAME = 'State Name';
+
 
 // The name of the layer within the tiles that contains the score
 export const SCORE_SOURCE_LAYER = 'blocks';