Add HRS, AML, FUDS and demographics (#1861)

* Add HRS_ET

- refactor to add IndicatorTypes
- modify tests
- add intl

* Add AML and FUDS

- update indicatorFilter
- update tests each indicator has 3 states to test

* Connect BE signal for demographics

- update tests
- i18n-ize

* Remove obsolete tests snapshots

* Update to Score N constants

* Remove higher ed socio-economic indicator

- remove spacer "Meets both socio"
- update snapshots

* Update BE signal types for

- AML
- FUDS

* Filter out missing historic underinvest. indicators

- For the special case when historic underinvestments are missing do not show that indicator at all
- update unit tests

* Make AML appear as No for all that are missing

* Update snapshot

client/src/components/AreaDetail/AreaDetail.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable quotes */
 // External Libs:
 import React from 'react';
-import {useIntl} from 'gatsby-plugin-intl';
+import {MessageDescriptor, useIntl} from 'gatsby-plugin-intl';
 import {Accordion, Button} from '@trussworks/react-uswds';
 
 // Components:
@@ -27,20 +27,34 @@ interface IAreaDetailProps {
   isCensusLayerSelected: boolean,
 }
 
+/**
+ * There are a 4 different indicator types. Each indicator type will render in the UI differently.
+ *
+ * percentile - is the majority of indicators
+ * percents - a few indicators fall into this type
+ * boolean - 3 indicators are of boolean type
+ *    - historic redlining
+ *    - abandoned land mines
+ *    - FUDS
+ *
+ */
+export type indicatorType = 'percentile' | 'percent' | 'boolean';
+
 /**
  * This interface is used as define the various fields for each indicator in the side panel
  *  label: the indicator label or title
  *  description: the description of the indicator used in the side panel
- *  value: the number from the geoJSON tile
+ *  type: see indicatorType above
+ *  value: the number from the geoJSON tile. If tile doesn't exist it get a null value. Could be boolean also
  *  isDisadvagtaged: the flag from the geoJSON tile
- *  isPercent: is the value a percent or percentile
+ *  threshold: a custom value of threshold for certain indicators
  *  */
 export interface indicatorInfo {
   label: string,
   description: string,
-  value: number | null,
+  type: indicatorType,
+  value: number | boolean | null,
   isDisadvagtaged: boolean,
-  isPercent?: boolean,
   threshold?: number,
 }
 
@@ -64,6 +78,35 @@ export interface ICategory {
   isExceedBothSocioBurdens: boolean | null,
 }
 
+/**
+ * This filter will remove indicators from appearing in the side panel by returning
+ * the filter function (curring). There is 1 use case. It can accept any indicator name
+ * as an input.
+ *
+ * 1. For Historic underinvestment if the value is null
+ *
+ * Recommendation is to use a separate filter for each indicator that needs filtering.
+ *
+ * @param {MessageDescriptor} label - allows to re-use this filter for all 3 indicators above
+ * @return {indicatorInfo}
+ */
+export const indicatorFilter = (label:MessageDescriptor) => {
+  const intl = useIntl();
+
+  return (indicator:indicatorInfo) => (
+    indicator.label !== intl.formatMessage(label) ||
+    ( indicator.label == intl.formatMessage(label) && indicator.value != null)
+  );
+};
+
+
+/**
+ * This is the main component. It will render the entire side panel and show the details
+ * of the area/feature that is selected.
+ *
+ * @param {IAreaDetailProps} {}
+ * @return {void}
+ */
 const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps) => {
   const intl = useIntl();
 
@@ -86,12 +129,15 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
 
   const feedbackEmailBody = intl.formatMessage(EXPLORE_COPY.SEND_FEEDBACK.EMAIL_BODY);
 
+
   /**
    * The workforce development category has some indicators who's source will vary depending on which
    * territory is selected. This function allows us to change the source of workforce development indicators
    * depending on which territory was selected
+   *
+   * @param {string} indicatorName
+   * @return {void}
    */
-
   const getWorkForceIndicatorValue = (indicatorName: string) => {
     if (sidePanelState === constants.SIDE_PANEL_STATE_VALUES.ISLAND_AREAS) {
       if (indicatorName === 'lowMedInc') {
@@ -138,12 +184,15 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
     }
   };
 
+
   /**
    * The workforce development category has some indicators who's disadvantaged boolean
    * will vary depending on which territory is selected. This function allows us to change
    * the boolean of workforce development indicators depending on which territory was selected
+   *
+   * @param {string} indicatorName
+   * @return {void}
    */
-
   const getWorkForceIndicatorIsDisadv = (indicatorName: string) => {
     if (sidePanelState === constants.SIDE_PANEL_STATE_VALUES.ISLAND_AREAS) {
       if (indicatorName === 'lowMedInc') {
@@ -190,11 +239,19 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
         true : false;
     }
   };
-  // Define each indicator in the side panel with constants from copy file (for intl)
+
-  // Indicators are grouped by category
+
+  /**
+   * Define each indicator in the side panel with constants from copy file (for intl)
+   *
+   * Indicators are grouped by category
+   */
+
+  // Climate category
   const expAgLoss: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_AG_LOSS),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_AG_LOSS),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.EXP_AGRICULTURE_LOSS_PERCENTILE) ?
       properties[constants.EXP_AGRICULTURE_LOSS_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_EXP_AGR_LOSS] ?
@@ -203,6 +260,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
   const expBldLoss: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_BLD_LOSS),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_BLD_LOSS),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.EXP_BUILDING_LOSS_PERCENTILE) ?
       properties[constants.EXP_BUILDING_LOSS_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_EXP_BLD_LOSS] ?
@@ -211,6 +269,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
   const expPopLoss: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_POP_LOSS),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_POP_LOSS),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.EXP_POPULATION_LOSS_PERCENTILE) ?
       properties[constants.EXP_POPULATION_LOSS_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_EXP_POP_LOSS] ?
@@ -219,6 +278,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
   const flooding: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.FLOODING),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.FLOODING),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.FLOODING_PERCENTILE) ?
       properties[constants.FLOODING_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FLOODING] ?
@@ -227,6 +287,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
   const wildfire: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.WILDFIRE),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.WILDFIRE),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.WASTEWATER_PERCENTILE) ?
       properties[constants.WASTEWATER_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_WILDFIRE] ?
@@ -235,26 +296,30 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
   const lowInc: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LOW_INCOME),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_INCOME),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.POVERTY_BELOW_200_PERCENTILE) ?
       properties[constants.POVERTY_BELOW_200_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_FEDERAL_POVERTY_LEVEL_200] ?
       properties[constants.IS_FEDERAL_POVERTY_LEVEL_200] : null,
     threshold: 65,
   };
-  const higherEd: indicatorInfo = {
+  // const higherEd: indicatorInfo = {
-    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIGH_ED),
+  //   label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIGH_ED),
-    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HIGH_ED),
+  //   description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HIGH_ED),
-    value: properties.hasOwnProperty(constants.NON_HIGHER_ED_PERCENTILE) ?
+  //   type: 'percent',
-      properties[constants.NON_HIGHER_ED_PERCENTILE] : null,
+  //   value: properties.hasOwnProperty(constants.NON_HIGHER_ED_PERCENTILE) ?
-    isDisadvagtaged: properties[constants.IS_HIGHER_ED_PERCENTILE] ?
+  //     properties[constants.NON_HIGHER_ED_PERCENTILE] : null,
-      properties[constants.IS_HIGHER_ED_PERCENTILE] : null,
+  //   isDisadvagtaged: properties[constants.IS_HIGHER_ED_PERCENTILE] ?
-    isPercent: true,
+  //     properties[constants.IS_HIGHER_ED_PERCENTILE] : null,
-    threshold: 80,
+  //   threshold: 80,
-  };
+  // };
 
+
+  // Energy category
   const energyBurden: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ENERGY_BURDEN),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ENERGY_BURDEN),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.ENERGY_PERCENTILE) ?
       properties[constants.ENERGY_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_ENERGY_BURDEN] ?
@@ -263,15 +328,18 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
   const pm25: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PM_2_5),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PM_2_5),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.PM25_PERCENTILE) ?
       properties[constants.PM25_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_PM25] ?
       properties[constants.IS_EXCEEDS_THRESH_FOR_PM25] : null,
   };
 
+  // Transit category
   const dieselPartMatter: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIESEL_PARTICULATE_MATTER),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIESEL_PARTICULATE_MATTER),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.DIESEL_MATTER_PERCENTILE) ?
       properties[constants.DIESEL_MATTER_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_DIESEL_PM] ?
@@ -280,6 +348,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
   const barrierTransport: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.BARRIER_TRANS),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.BARRIER_TRANS),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.TRAVEL_DISADV_PERCENTILE) ?
       properties[constants.TRAVEL_DISADV_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_TRAVEL_DISADV] ?
@@ -288,15 +357,30 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
   const trafficVolume: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.TRAFFIC_VOLUME),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.TRAFFIC_VOLUME),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.TRAFFIC_PERCENTILE) ?
       properties[constants.TRAFFIC_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_TRAFFIC_PROX] ?
       properties[constants.IS_EXCEEDS_THRESH_FOR_TRAFFIC_PROX] : null,
   };
 
+  // Housing category
+  const historicUnderinvest: indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIST_UNDERINVEST),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HIST_UNDERINVEST),
+    type: 'boolean',
+    value: properties.hasOwnProperty(constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH) ?
+      (properties[constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH] ===
+        constants.HISTORIC_UNDERINVESTMENT_RAW_YES ? true : false) :
+      null,
+    isDisadvagtaged: properties.hasOwnProperty(constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH) &&
+    properties[constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH] ===
+    constants.HISTORIC_UNDERINVESTMENT_RAW_YES ? true : false,
+  };
   const houseBurden: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HOUSE_BURDEN),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HOUSE_BURDEN),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.HOUSING_BURDEN_PROPERTY_PERCENTILE) ?
       properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HOUSE_BURDEN] ?
@@ -305,6 +389,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
   const lackGreenSpace: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LACK_GREEN_SPACE),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LACK_GREEN_SPACE),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.IMPERVIOUS_PERCENTILE) ?
       properties[constants.IMPERVIOUS_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_IMPERVIOUS] ?
@@ -313,6 +398,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
   const lackPlumbing: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LACK_PLUMBING),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LACK_PLUMBING),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.KITCHEN_PLUMB_PERCENTILE) ?
       properties[constants.KITCHEN_PLUMB_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_KITCHEN_PLUMB] ?
@@ -321,22 +407,37 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
   const leadPaint: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAD_PAINT),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAD_PAINT),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.LEAD_PAINT_PERCENTILE) ?
       properties[constants.LEAD_PAINT_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_LEAD_PAINT_AND_MEDIAN_HOME_VAL] ?
       properties[constants.IS_EXCEEDS_THRESH_FOR_LEAD_PAINT_AND_MEDIAN_HOME_VAL] : null,
   };
-  // const medHomeVal:indicatorInfo = {
-  //   label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.MED_HOME_VAL),
-  //   description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.MED_HOME_VAL),
-  //   value: properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] ?
-  //   properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] : null,
-  //   isDisadvagtaged: false,
-  // };
 
+  // Pollution categeory
+  const abandonMines: indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ABANDON_MINES),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ABANDON_MINES),
+    type: 'boolean',
+    value: properties.hasOwnProperty(constants.ABANDON_LAND_MINES_EXCEEDS_THRESH) ?
+      properties[constants.ABANDON_LAND_MINES_EXCEEDS_THRESH] : null,
+    isDisadvagtaged: properties.hasOwnProperty(constants.ABANDON_LAND_MINES_EXCEEDS_THRESH) ?
+    properties[constants.ABANDON_LAND_MINES_EXCEEDS_THRESH] : null,
+  };
+  const formerDefSites: indicatorInfo = {
+    label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.FORMER_DEF_SITES),
+    description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.FORMER_DEF_SITES),
+    type: 'boolean',
+    value: properties.hasOwnProperty(constants.FORMER_DEF_SITES_RAW_VALUE) ?
+      (properties[constants.FORMER_DEF_SITES_RAW_VALUE] === constants.FUDS_RAW_YES ? true : false) :
+      null,
+    isDisadvagtaged: properties.hasOwnProperty(constants.FORMER_DEF_SITES_EXCEEDS_THRESH) ?
+    properties[constants.FORMER_DEF_SITES_EXCEEDS_THRESH] : null,
+  };
   const proxHaz: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_HAZ),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_HAZ),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.PROXIMITY_TSDF_SITES_PERCENTILE) ?
       properties[constants.PROXIMITY_TSDF_SITES_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HAZARD_WASTE] ?
@@ -345,6 +446,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
   const proxNPL: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_NPL),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_NPL),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.PROXIMITY_NPL_SITES_PERCENTILE) ?
       properties[constants.PROXIMITY_NPL_SITES_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_SUPERFUND] ?
@@ -353,15 +455,18 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
   const proxRMP: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_RMP),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_RMP),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.PROXIMITY_RMP_SITES_PERCENTILE) ?
       properties[constants.PROXIMITY_RMP_SITES_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_RMP] ?
       properties[constants.IS_EXCEEDS_THRESH_FOR_RMP] : null,
   };
 
+  // Water category
   const leakyTanks: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAKY_TANKS),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAKY_TANKS),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.LEAKY_UNDER_PERCENTILE) ?
       properties[constants.LEAKY_UNDER_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_LEAKY_UNDER] ?
@@ -370,15 +475,18 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
   const wasteWater: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.WASTE_WATER),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.WASTE_WATER),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.WASTEWATER_PERCENTILE) ?
       properties[constants.WASTEWATER_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_WASTEWATER] ?
       properties[constants.IS_EXCEEDS_THRESH_FOR_WASTEWATER] : null,
   };
 
+  // Health category
   const asthma: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ASTHMA),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ASTHMA),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.ASTHMA_PERCENTILE) ?
       properties[constants.ASTHMA_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_ASTHMA] ?
@@ -387,6 +495,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
   const diabetes: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIABETES),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIABETES),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.DIABETES_PERCENTILE) ?
       properties[constants.DIABETES_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_DIABETES] ?
@@ -395,6 +504,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
   const heartDisease: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HEART_DISEASE),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HEART_DISEASE),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.HEART_PERCENTILE) ?
       properties[constants.HEART_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HEART_DISEASE] ?
@@ -403,15 +513,18 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
   const lifeExpect: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LIFE_EXPECT),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_LIFE_EXPECT),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.LIFE_PERCENTILE) ?
       properties[constants.LIFE_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_LOW_LIFE_EXP] ?
       properties[constants.IS_EXCEEDS_THRESH_FOR_LOW_LIFE_EXP] : null,
   };
 
+  // Workforce dev category
   const lingIso: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LING_ISO),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LING_ISO),
+    type: 'percentile',
     value: properties.hasOwnProperty(constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE) ?
       properties[constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE] : null,
     isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_LINGUISITIC_ISO] ?
@@ -420,30 +533,34 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
   const lowMedInc: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LOW_MED_INC),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_MED_INCOME),
+    type: 'percentile',
     value: getWorkForceIndicatorValue('lowMedInc'),
     isDisadvagtaged: getWorkForceIndicatorIsDisadv('lowMedInc'),
   };
   const unemploy: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.UNEMPLOY),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.UNEMPLOY),
+    type: 'percentile',
     value: getWorkForceIndicatorValue('unemploy'),
     isDisadvagtaged: getWorkForceIndicatorIsDisadv('unemploy'),
   };
   const poverty: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.POVERTY),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.POVERTY),
+    type: 'percentile',
     value: getWorkForceIndicatorValue('poverty'),
     isDisadvagtaged: getWorkForceIndicatorIsDisadv('poverty'),
   };
   const highSchool: indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIGH_SCL),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HIGH_SKL),
+    type: 'percent',
     value: getWorkForceIndicatorValue('highSchool'),
     isDisadvagtaged: getWorkForceIndicatorIsDisadv('highSchool'),
-    isPercent: true,
     threshold: 10,
   };
 
+
   /**
    * Aggregate indicators based on categories
    *
@@ -455,7 +572,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
       id: 'climate-change',
       titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLIMATE),
       indicators: [expAgLoss, expBldLoss, expPopLoss, flooding, wildfire],
-      socioEcIndicators: [lowInc, higherEd],
+      socioEcIndicators: [lowInc],
       isDisadvagtaged: properties[constants.IS_CLIMATE_FACTOR_DISADVANTAGED_M] ?
         properties[constants.IS_CLIMATE_FACTOR_DISADVANTAGED_M] : null,
       isExceed1MoreBurden: properties[constants.IS_CLIMATE_EXCEED_ONE_OR_MORE_INDICATORS_M] ?
@@ -467,7 +584,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
       id: 'clean-energy',
       titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_ENERGY),
       indicators: [energyBurden, pm25],
-      socioEcIndicators: [lowInc, higherEd],
+      socioEcIndicators: [lowInc],
       isDisadvagtaged: properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED_M] ?
         properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED_M] : null,
       isExceed1MoreBurden: properties[constants.IS_ENERGY_EXCEED_ONE_OR_MORE_INDICATORS_M] ?
@@ -479,7 +596,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
       id: 'clean-transport',
       titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_TRANSPORT),
       indicators: [dieselPartMatter, barrierTransport, trafficVolume],
-      socioEcIndicators: [lowInc, higherEd],
+      socioEcIndicators: [lowInc],
       isDisadvagtaged: properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED_M] ?
         properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED_M] : null,
       isExceed1MoreBurden: properties[constants.IS_TRANSPORT_EXCEED_ONE_OR_MORE_INDICATORS_M] ?
@@ -490,8 +607,8 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
     {
       id: 'sustain-house',
       titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.SUSTAIN_HOUSE),
-      indicators: [houseBurden, lackGreenSpace, lackPlumbing, leadPaint],
+      indicators: [historicUnderinvest, houseBurden, lackGreenSpace, lackPlumbing, leadPaint],
-      socioEcIndicators: [lowInc, higherEd],
+      socioEcIndicators: [lowInc],
       isDisadvagtaged: properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED_M] ?
         properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED_M] : null,
       isExceed1MoreBurden: properties[constants.IS_HOUSING_EXCEED_ONE_OR_MORE_INDICATORS_M] ?
@@ -502,8 +619,8 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
     {
       id: 'leg-pollute',
       titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.LEG_POLLUTE),
-      indicators: [proxHaz, proxNPL, proxRMP],
+      indicators: [abandonMines, formerDefSites, proxHaz, proxNPL, proxRMP],
-      socioEcIndicators: [lowInc, higherEd],
+      socioEcIndicators: [lowInc],
       isDisadvagtaged: properties[constants.IS_POLLUTION_FACTOR_DISADVANTAGED_M] ?
         properties[constants.IS_POLLUTION_FACTOR_DISADVANTAGED_M] : null,
       isExceed1MoreBurden: properties[constants.IS_POLLUTION_EXCEED_ONE_OR_MORE_INDICATORS_M] ?
@@ -515,7 +632,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
       id: 'clean-water',
       titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_WATER),
       indicators: [leakyTanks, wasteWater],
-      socioEcIndicators: [lowInc, higherEd],
+      socioEcIndicators: [lowInc],
       isDisadvagtaged: properties[constants.IS_WATER_FACTOR_DISADVANTAGED_M] ?
         properties[constants.IS_WATER_FACTOR_DISADVANTAGED_M] : null,
       isExceed1MoreBurden: properties[constants.IS_WATER_EXCEED_ONE_OR_MORE_INDICATORS_M] ?
@@ -527,7 +644,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
       id: 'health-burdens',
       titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.HEALTH_BURDEN),
       indicators: [asthma, diabetes, heartDisease, lifeExpect],
-      socioEcIndicators: [lowInc, higherEd],
+      socioEcIndicators: [lowInc],
       isDisadvagtaged: properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED_M] ?
         properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED_M] : null,
       isExceed1MoreBurden: properties[constants.IS_HEALTH_EXCEED_ONE_OR_MORE_INDICATORS_M] ?
@@ -539,7 +656,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
       id: 'work-dev',
       titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.WORK_DEV),
       indicators: [lingIso, lowMedInc, unemploy, poverty],
-      socioEcIndicators: [highSchool, higherEd],
+      socioEcIndicators: [highSchool],
       isDisadvagtaged: properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_M] ?
         properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_M] : null,
       isExceed1MoreBurden: properties[constants.IS_WORKFORCE_EXCEED_ONE_OR_MORE_INDICATORS_M] ?
@@ -549,6 +666,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
     },
   ];
 
+
   /**
    * Modify the category array depending on the sidePanelState field. This field comes from the backend
    * and is called UI_EXP.
@@ -577,9 +695,11 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
   }
 
 
-  // Create the AccoridionItems by mapping over the categories array. In this array we define the
+  /**
-  // various indicators for a specific category. This is an array which then maps over the <Indicator />
+   * Create the AccoridionItems by mapping over the categories array. In this array we define the
-  // component to render the actual Indicator
+   * various indicators for a specific category. This is an array which then maps over the
+   * <Indicator /> component to render the actual Indicator
+   */
   const categoryItems = categories.map((category) => ({
     id: category.id,
 
@@ -600,10 +720,12 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
           isBurdened={category.isExceed1MoreBurden}
         />
 
-        {/* indicators */}
+        {/* Indicators - filters then map */}
-        {category.indicators.map((indicator: any, index: number) => {
+        {category.indicators
-          return <Indicator key={`ind${index}`} indicator={indicator} />;
+            .filter(indicatorFilter(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIST_UNDERINVEST))
-        })}
+            .map((indicator: any, index: number) => {
+              return <Indicator key={`ind${index}`} indicator={indicator} />;
+            })}
 
         {/* AND */}
         <div className={styles.categorySpacer}>
@@ -611,10 +733,10 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
         </div>
 
         {/* Exceeds both socioeconomic burdens */}
-        <ExceedBurden
+        {/* <ExceedBurden
           text={EXPLORE_COPY.SIDE_PANEL_SPACERS.EXCEED_BOTH_SOCIO}
           isBurdened={category.isExceedBothSocioBurdens}
-        />
+        /> */}
 
         {/* socio-economic indicators */}
         {category.socioEcIndicators.map((indicator: any, index: number) => {
@@ -641,7 +763,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
             />
 
             {/* Demographics */}
-            <TractDemographics />
+            <TractDemographics properties={properties}/>
 
             {/* Disadvantaged? */}
             <div className={styles.categorization}>
@@ -671,6 +793,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
               {/* <div className={styles.showThresholdExceed}>
                 {EXPLORE_COPY.numberOfThresholdsExceeded(properties[constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS])}
               </div> */}
+
               {/* Send Feedback button */}
               <a
                 className={styles.sendFeedbackLink}

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

@@ -5,26 +5,26 @@ import {LocalizedComponent} from '../../../test/testHelpers';
 
 import * as constants from '../../../data/constants';
 
-// Todo: Update tests to take into account tribal layer selected
+const properties = {
-describe('rendering of the AreaDetail', () => {
+  [constants.POVERTY_BELOW_100_PERCENTILE]: .12,
-  const properties = {
+  [constants.HIGH_SCHOOL_PROPERTY_PERCENTILE]: .98,
-    [constants.POVERTY_BELOW_100_PERCENTILE]: .12,
+  [constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE]: .97,
-    [constants.HIGH_SCHOOL_PROPERTY_PERCENTILE]: .98,
+  [constants.UNEMPLOYMENT_PROPERTY_PERCENTILE]: .96,
-    [constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE]: .97,
+  [constants.HOUSING_BURDEN_PROPERTY_PERCENTILE]: .95,
-    [constants.UNEMPLOYMENT_PROPERTY_PERCENTILE]: .96,
+  [constants.SCORE_PROPERTY_HIGH]: true,
-    [constants.HOUSING_BURDEN_PROPERTY_PERCENTILE]: .95,
+  [constants.GEOID_PROPERTY]: 98729374234,
-    [constants.SCORE_PROPERTY_HIGH]: true,
+  [constants.TOTAL_POPULATION]: 3435435,
-    [constants.GEOID_PROPERTY]: 98729374234,
+  [constants.STATE_NAME]: 'New York',
-    [constants.TOTAL_POPULATION]: 3435435,
+  [constants.COUNTY_NAME]: 'Brooklyn',
-    [constants.STATE_NAME]: 'New York',
+  [constants.POVERTY_BELOW_200_PERCENTILE]: .19,
-    [constants.COUNTY_NAME]: 'Brooklyn',
+  [constants.SIDE_PANEL_STATE]: constants.SIDE_PANEL_STATE_VALUES.NATION,
-    [constants.POVERTY_BELOW_200_PERCENTILE]: .19,
+  [constants.COUNT_OF_CATEGORIES_DISADV]: 5,
-    [constants.SIDE_PANEL_STATE]: constants.SIDE_PANEL_STATE_VALUES.NATION,
+  [constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS]: 3,
-    [constants.COUNT_OF_CATEGORIES_DISADV]: 5,
+};
-    [constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS]: 3,
+const hash = ['11.54', '36.0762', '-84.4494'];
-  };
-  const hash = ['11.54', '36.0762', '-84.4494'];
 
+
+describe('rendering of the Islan areas in AreaDetail', () => {
   it('checks if indicators for NATION is present', () => {
     const {asFragment} = render(
         <LocalizedComponent>

client/src/components/Indicator/Indicator.test.tsx

@@ -6,15 +6,14 @@ import {indicatorInfo} from '../AreaDetail/AreaDetail';
 
 import * as EXPLORE_COPY from '../../data/copy/explore';
 
-
 describe('rendering of the Indicator', () => {
   it('checks if component renders', () => {
     const highSchool:indicatorInfo = {
       label: 'some label',
       description: 'some description',
+      type: 'percent',
       value: .97,
       isDisadvagtaged: true,
-      isPercent: true,
       threshold: 20,
     };
     const {asFragment} = render(
@@ -31,9 +30,9 @@ describe('rendering of the Indicator', () => {
     const highSchool:indicatorInfo = {
       label: 'some label',
       description: 'some description',
+      type: 'percent',
       value: .426,
       isDisadvagtaged: true,
-      isPercent: true,
       threshold: 20,
     };
     const {asFragment} = render(
@@ -52,6 +51,7 @@ describe('test rendering of Indicator value icons', () => {
     const {asFragment} = render(
         <LocalizedComponent>
           <IndicatorValueIcon
+            type='percent'
             value={90}
             isAboveThresh={true}
           />
@@ -64,6 +64,7 @@ describe('test rendering of Indicator value icons', () => {
     const {asFragment} = render(
         <LocalizedComponent>
           <IndicatorValueIcon
+            type='percentile'
             value={13}
             isAboveThresh={false}
           />
@@ -77,6 +78,7 @@ describe('test rendering of Indicator value icons', () => {
     const {asFragment} = render(
         <LocalizedComponent>
           <IndicatorValueIcon
+            type='percentile'
             value={0}
             isAboveThresh={false}
           />
@@ -86,10 +88,25 @@ describe('test rendering of Indicator value icons', () => {
     screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_DOWN.defaultMessage);
   });
 
-  it('renders the unavailable icon when the value is null', () => {
+  it('renders the unavailable icon when the value is a boolean null', () => {
     const {asFragment} = render(
         <LocalizedComponent>
           <IndicatorValueIcon
+            type='boolean'
+            value={null}
+            isAboveThresh={false}
+          />
+        </LocalizedComponent>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+    screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE.defaultMessage);
+  });
+
+  it('renders the unavailable icon when the value is a percentile null', () => {
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <IndicatorValueIcon
+            type='percentile'
             value={null}
             isAboveThresh={false}
           />
@@ -108,7 +125,7 @@ describe('test rendering of Indicator value sub-text', () => {
             value={95}
             isAboveThresh={true}
             threshold={90}
-            isPercent={false}
+            type='percentile'
           />
         </LocalizedComponent>,
     );
@@ -121,20 +138,20 @@ describe('test rendering of Indicator value sub-text', () => {
             value={89}
             isAboveThresh={false}
             threshold={90}
-            isPercent={false}
+            type='percentile'
           />
         </LocalizedComponent>,
     );
     expect(asFragment()).toMatchSnapshot();
   });
-  it('renders the "data is not available"', () => {
+  it(`renders missing data `, () => {
     const {asFragment} = render(
         <LocalizedComponent>
           <IndicatorValueSubText
             value={null}
             isAboveThresh={false}
             threshold={90}
-            isPercent={false}
+            type='percentile'
           />
         </LocalizedComponent>,
     );
@@ -144,58 +161,34 @@ describe('test rendering of Indicator value sub-text', () => {
 
 describe('test that the unit suffix renders correctly', ()=> {
   it('renders correctly when the value is a percentile', () => {
-    const lowLife:indicatorInfo = {
-      label: 'some label',
-      description: 'some description',
-      value: 97,
-      isDisadvagtaged: true,
-      isPercent: false,
-      threshold: 20,
-    };
-
     const {asFragment} = render(
         <LocalizedComponent>
           <IndicatorValue
-            isPercent={lowLife.isPercent}
+            type={'percentile'}
             displayStat={90}
           />
         </LocalizedComponent>,
     );
     expect(asFragment()).toMatchSnapshot();
   });
+
   it('renders correctly when the value is a percent', () => {
-    const lowLife:indicatorInfo = {
-      label: 'some label',
-      description: 'some description',
-      value: 97,
-      isDisadvagtaged: true,
-      isPercent: true,
-      threshold: 20,
-    };
-
     const {asFragment} = render(
         <LocalizedComponent>
           <IndicatorValue
-            isPercent={lowLife.isPercent}
+            type={'percent'}
             displayStat={90}
           />
         </LocalizedComponent>,
     );
     expect(asFragment()).toMatchSnapshot();
   });
-  it('renders correctly when the value is a null', () => {
-    const lowLife:indicatorInfo = {
-      label: 'some label',
-      description: 'some description',
-      value: null,
-      isDisadvagtaged: true,
-      isPercent: false,
-    };
 
+  it('renders correctly when the value is a null', () => {
     const {asFragment} = render(
         <LocalizedComponent>
           <IndicatorValue
-            isPercent={lowLife.isPercent}
+            type={'percentile'}
             displayStat={null}
           />
         </LocalizedComponent>,
@@ -203,3 +196,153 @@ describe('test that the unit suffix renders correctly', ()=> {
     expect(asFragment()).toMatchSnapshot();
   });
 });
+
+describe('renders value correctly for historic underinvest.', () => {
+  it('checks if it renders when HRS_ET = true', () => {
+    const historicUnderinvest:indicatorInfo = {
+      label: 'some label',
+      description: 'some description',
+      type: 'boolean',
+      value: true,
+      isDisadvagtaged: true,
+    };
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <Indicator indicator={historicUnderinvest}/>
+        </LocalizedComponent>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('checks if it renders when HRS_ET = false:', () => {
+    const historicUnderinvest:indicatorInfo = {
+      label: 'some label',
+      description: 'some description',
+      type: 'boolean',
+      value: false,
+      isDisadvagtaged: true,
+    };
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <Indicator indicator={historicUnderinvest}/>
+        </LocalizedComponent>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('checks if it renders nothin when HRS_ET = null:', () => {
+    const historicUnderinvest:indicatorInfo = {
+      label: 'some label',
+      description: 'some description',
+      type: 'boolean',
+      value: null,
+      isDisadvagtaged: true,
+    };
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <Indicator indicator={historicUnderinvest}/>
+        </LocalizedComponent>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('renders value correctly for abandoned land mines', () => {
+  it('checks if it renders when AML_RAW = true', () => {
+    const abandonMines:indicatorInfo = {
+      label: 'some label',
+      description: 'some description',
+      type: 'boolean',
+      value: true,
+      isDisadvagtaged: true,
+    };
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <Indicator indicator={abandonMines}/>
+        </LocalizedComponent>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('checks if it renders when AML_RAW = false:', () => {
+    const abandonMines:indicatorInfo = {
+      label: 'some label',
+      description: 'some description',
+      type: 'boolean',
+      value: false,
+      isDisadvagtaged: true,
+    };
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <Indicator indicator={abandonMines}/>
+        </LocalizedComponent>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('checks if it renders nothin when AML_RAW = null:', () => {
+    const abandonMines:indicatorInfo = {
+      label: 'some label',
+      description: 'some description',
+      type: 'boolean',
+      value: null,
+      isDisadvagtaged: true,
+    };
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <Indicator indicator={abandonMines}/>
+        </LocalizedComponent>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('renders value correctly for Former defense sites', () => {
+  it('checks if it renders when FUDS_RAW = true', () => {
+    const formerDefSites:indicatorInfo = {
+      label: 'some label',
+      description: 'some description',
+      type: 'boolean',
+      value: true,
+      isDisadvagtaged: true,
+    };
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <Indicator indicator={formerDefSites}/>
+        </LocalizedComponent>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('checks if it renders when FUDS_RAW = false:', () => {
+    const formerDefSites:indicatorInfo = {
+      label: 'some label',
+      description: 'some description',
+      type: 'boolean',
+      value: false,
+      isDisadvagtaged: true,
+    };
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <Indicator indicator={formerDefSites}/>
+        </LocalizedComponent>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('checks if it renders nothin when FUDS_RAW = null:', () => {
+    const formerDefSites:indicatorInfo = {
+      label: 'some label',
+      description: 'some description',
+      type: 'boolean',
+      value: null,
+      isDisadvagtaged: true,
+    };
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <Indicator indicator={formerDefSites}/>
+        </LocalizedComponent>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

client/src/components/Indicator/Indicator.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {useIntl} from 'gatsby-plugin-intl';
 
-import {indicatorInfo} from '../AreaDetail/AreaDetail';
+import {indicatorInfo, indicatorType} from '../AreaDetail/AreaDetail';
 
 import * as styles from './Indicator.module.scss';
 import * as constants from '../../data/constants';
@@ -15,23 +15,24 @@ import upArrow from '/node_modules/uswds/dist/img/usa-icons/arrow_upward.svg';
 import unAvailable from '/node_modules/uswds/dist/img/usa-icons/do_not_disturb.svg';
 
 interface IIndicator {
-    indicator: indicatorInfo,
+  indicator: indicatorInfo,
 }
 
 interface IIndicatorValueIcon {
+  type: indicatorType,
   value: number | null,
   isAboveThresh: boolean,
 };
 
 interface IIndicatorValueSubText {
-  value: number | null,
+  type: indicatorType,
+  value: number | null | boolean,
   isAboveThresh: boolean,
   threshold: number,
-  isPercent: boolean | undefined,
 }
 
 interface IIndicatorValue {
-  isPercent: boolean | undefined,
+  type: indicatorType,
   displayStat: number | null,
 }
 
@@ -42,7 +43,7 @@ interface IIndicatorValue {
  * @param {number | null} props
  * @return {JSX.Element}
  */
-export const IndicatorValueIcon = ({value, isAboveThresh}: IIndicatorValueIcon) => {
+export const IndicatorValueIcon = ({type, value, isAboveThresh}: IIndicatorValueIcon) => {
   const intl = useIntl();
 
   if (value == null) {
@@ -50,7 +51,7 @@ export const IndicatorValueIcon = ({value, isAboveThresh}: IIndicatorValueIcon)
       src={unAvailable}
       alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE)}
     />;
-  } else {
+  } else if (type === 'percent' || type === 'percentile') {
     return isAboveThresh ?
       <img
         src={upArrow}
@@ -60,7 +61,7 @@ export const IndicatorValueIcon = ({value, isAboveThresh}: IIndicatorValueIcon)
         src={downArrow}
         alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_DOWN)}
       />;
-  }
+  } else return <></>;
 };
 
 /**
@@ -69,32 +70,40 @@ export const IndicatorValueIcon = ({value, isAboveThresh}: IIndicatorValueIcon)
  *   "below 20 percent"
  *   "data is not available"
  *
- *  Todo: refactor into single component, add to i18n and add to tests
+ * @param {IIndicatorValueSubText} {}
- *
  * @return {JSX.Element}
  */
-export const IndicatorValueSubText = ({value, isAboveThresh, threshold, isPercent}:IIndicatorValueSubText) => {
+export const IndicatorValueSubText = ({type, value, isAboveThresh, threshold}:IIndicatorValueSubText) => {
-  return value == null ?
+  if (value === null) {
-    <div>
+    return (
-      {EXPLORE_COPY.SIDE_PANEL_VALUES.UNAVAILBLE_MSG}
+      <div>
-    </div> :
+        {EXPLORE_COPY.SIDE_PANEL_VALUES.UNAVAILBLE_MSG}
-    <div>
+      </div>
-      {
+    );
-        isAboveThresh ?
+  } else if (type === 'percent' || type === 'percentile') {
-        EXPLORE_COPY.SIDE_PANEL_VALUES.ABOVE :
+    return (
-        EXPLORE_COPY.SIDE_PANEL_VALUES.BELOW
+      <div>
-      }
+        {
-      {threshold ?
+          isAboveThresh ?
-        <IndicatorValue isPercent={isPercent} displayStat={threshold} /> :
+          EXPLORE_COPY.SIDE_PANEL_VALUES.ABOVE :
-        <IndicatorValue isPercent={isPercent} displayStat={90} />
+          EXPLORE_COPY.SIDE_PANEL_VALUES.BELOW
-      }
+        }
-      {` `}
+        {
-      {
+          threshold ?
-        isPercent ?
+          <IndicatorValue type={type} displayStat={threshold}/> :
-        EXPLORE_COPY.SIDE_PANEL_VALUES.PERCENT :
+          <IndicatorValue type={type} displayStat={90}/>
-        EXPLORE_COPY.SIDE_PANEL_VALUES.PERCENTILE
+        }
-      }
+        {` `}
-    </div>;
+        {
+          type === 'percent' ?
+          EXPLORE_COPY.SIDE_PANEL_VALUES.PERCENT :
+          EXPLORE_COPY.SIDE_PANEL_VALUES.PERCENTILE
+        }
+      </div>
+    );
+  } else {
+    return (<></>);
+  }
 };
 
 /**
@@ -138,46 +147,61 @@ export const superscriptOrdinal = (indicatorValueWithSuffix:string) => {
 };
 
 /**
- * This component will return the indicators's value with an ordinal suffix
+ * This component will return the indicators's value. The value depends on the
- * or a percentage sign using i18n functions
+ * indicator type. Each type renders a different UI.
  *
  * @return {JSX.Element | null}
  */
-export const IndicatorValue = ({isPercent, displayStat}:IIndicatorValue) => {
+export const IndicatorValue = ({type, displayStat}:IIndicatorValue) => {
   const intl = useIntl();
 
   if (displayStat === null) return <React.Fragment></React.Fragment>;
 
-  const i18nOrdinalSuffix: string = intl.formatMessage(
+  if (type === 'percent' || type === 'percentile') {
-      {
+    // In this case we will show no value and an icon only
-        id: 'explore.map.page.side.panel.indicator.percentile.value.ordinal.suffix',
+
-        // eslint-disable-next-line max-len
+    if (type === 'percent') {
-        description: `Navigate to the explore the tool page. Click on the map. The side panel will show categories. Open a category. This will define the indicator value's ordinal suffix. For example the st in 91st, the rd in 23rd, and the th in 26th, etc.`,
+      // If the type is percent, return the intl percent format
-        defaultMessage: `
+      return (
+        <span>
+          {intl.formatNumber(
+              displayStat,
+              {
+                style: 'unit',
+                unit: 'percent',
+                unitDisplay: 'short',
+              },
+          )}
+        </span>
+      );
+    } else {
+    // If the type is percentile, create the intl ordinal and return it as a superscript
+      const i18nOrdinalSuffix: string = intl.formatMessage(
+          {
+            id: 'explore.map.page.side.panel.indicator.percentile.value.ordinal.suffix',
+            // eslint-disable-next-line max-len
+            description: `Navigate to the explore the tool page. Click on the map. The side panel will show categories. Open a category. This will define the indicator value's ordinal suffix. For example the st in 91st, the rd in 23rd, and the th in 26th, etc.`,
+            defaultMessage: `
         {indicatorValue, selectordinal, 
           one {#st} 
           two {#nd}
           =3 {#rd} 
           other {#th}
-      }
+        }
-      `,
+        `,
-      },
-      {
-        indicatorValue: displayStat,
-      },
-  );
-
-  return isPercent ?
-    <span>
-      {intl.formatNumber(
-          displayStat,
-          {
-            style: 'unit',
-            unit: 'percent',
-            unitDisplay: 'short',
           },
-      )}
+          {
-    </span> : superscriptOrdinal(i18nOrdinalSuffix);
+            indicatorValue: displayStat,
+          },
+      );
+      return superscriptOrdinal(i18nOrdinalSuffix);
+    }
+  } else {
+    // when the type === boolean the display stat will be either 100 (true) or 0 (false)
+    return displayStat === 0 ?
+      EXPLORE_COPY.SIDE_PANEL_SPACERS.NO :
+      EXPLORE_COPY.SIDE_PANEL_SPACERS.YES;
+  }
 };
 
 /**
@@ -187,8 +211,14 @@ export const IndicatorValue = ({isPercent, displayStat}:IIndicatorValue) => {
  * @return {JSX.Element}
  */
 const Indicator = ({indicator}:IIndicator) => {
-  // Convert the decimal value to a stat to display
+  /**
-  const displayStat = indicator.value !== null ? Math.floor(indicator.value * 100) : null;
+   * The indicator value could be a number | boolean | null. In all cases we coerce to number
+   * before flooring.
+   *
+   * In the case where indicator.value is a boolean, the displayStat will be either 100 or 0, depending
+   * on if indicator.value is true or false respectively.
+   */
+  const displayStat = indicator.value !== null ? Math.floor(Number(indicator.value) * 100) : null;
 
   // If the threshold exists, set it, otherwise set it to the default value
   const threshold = indicator.threshold ? indicator.threshold : constants.DEFAULT_THRESHOLD_PERCENTILE;
@@ -196,7 +226,6 @@ const Indicator = ({indicator}:IIndicator) => {
   // A boolean to represent if the indicator is above or below the threshold
   const isAboveThresh = displayStat !== null && displayStat >= threshold ? true : false;
 
-
   return (
     <li
       className={indicator.isDisadvagtaged ? styles.disadvantagedIndicator : styles.indicatorBoxMain}
@@ -218,12 +247,16 @@ const Indicator = ({indicator}:IIndicator) => {
 
             {/* Indicator value */}
             <div className={styles.indicatorValue}>
-              <IndicatorValue isPercent={indicator.isPercent} displayStat={displayStat}/>
+              <IndicatorValue
+                type={indicator.type}
+                displayStat={displayStat}
+              />
             </div>
 
             {/* Indicator icon - up arrow, down arrow, or unavailable */}
             <div className={styles.indicatorArrow}>
               <IndicatorValueIcon
+                type={indicator.type}
                 value={displayStat}
                 isAboveThresh={isAboveThresh}
               />
@@ -236,9 +269,10 @@ const Indicator = ({indicator}:IIndicator) => {
               value={displayStat}
               isAboveThresh={isAboveThresh}
               threshold={threshold}
-              isPercent={indicator.isPercent}
+              type={indicator.type}
             />
           </div>
+
         </div>
       </div>
     </li>

client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap

@@ -84,6 +84,270 @@ exports[`rendering of the Indicator checks if the flooring function works 1`] =
 </DocumentFragment>
 `;
 
+exports[`renders value correctly for Former defense sites checks if it renders nothin when FUDS_RAW = null: 1`] = `
+<DocumentFragment>
+  <li
+    data-cy="indicatorBox"
+    data-testid="indicator-box"
+  >
+    <div>
+      <div>
+        some label
+        <div>
+          some description
+        </div>
+      </div>
+      <div>
+        <div>
+          <div />
+          <div>
+            <img
+              alt="an icon to represent data is unavailable"
+              src="test-file-stub"
+            />
+          </div>
+        </div>
+        <div>
+          <div>
+            missing data
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`renders value correctly for Former defense sites checks if it renders when FUDS_RAW = false: 1`] = `
+<DocumentFragment>
+  <li
+    data-cy="indicatorBox"
+    data-testid="indicator-box"
+  >
+    <div>
+      <div>
+        some label
+        <div>
+          some description
+        </div>
+      </div>
+      <div>
+        <div>
+          <div>
+            No
+          </div>
+          <div />
+        </div>
+        <div />
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`renders value correctly for Former defense sites checks if it renders when FUDS_RAW = true 1`] = `
+<DocumentFragment>
+  <li
+    data-cy="indicatorBox"
+    data-testid="indicator-box"
+  >
+    <div>
+      <div>
+        some label
+        <div>
+          some description
+        </div>
+      </div>
+      <div>
+        <div>
+          <div>
+            Yes
+          </div>
+          <div />
+        </div>
+        <div />
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`renders value correctly for abandoned land mines checks if it renders nothin when AML_RAW = null: 1`] = `
+<DocumentFragment>
+  <li
+    data-cy="indicatorBox"
+    data-testid="indicator-box"
+  >
+    <div>
+      <div>
+        some label
+        <div>
+          some description
+        </div>
+      </div>
+      <div>
+        <div>
+          <div />
+          <div>
+            <img
+              alt="an icon to represent data is unavailable"
+              src="test-file-stub"
+            />
+          </div>
+        </div>
+        <div>
+          <div>
+            missing data
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`renders value correctly for abandoned land mines checks if it renders when AML_RAW = false: 1`] = `
+<DocumentFragment>
+  <li
+    data-cy="indicatorBox"
+    data-testid="indicator-box"
+  >
+    <div>
+      <div>
+        some label
+        <div>
+          some description
+        </div>
+      </div>
+      <div>
+        <div>
+          <div>
+            No
+          </div>
+          <div />
+        </div>
+        <div />
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`renders value correctly for abandoned land mines checks if it renders when AML_RAW = true 1`] = `
+<DocumentFragment>
+  <li
+    data-cy="indicatorBox"
+    data-testid="indicator-box"
+  >
+    <div>
+      <div>
+        some label
+        <div>
+          some description
+        </div>
+      </div>
+      <div>
+        <div>
+          <div>
+            Yes
+          </div>
+          <div />
+        </div>
+        <div />
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`renders value correctly for historic underinvest. checks if it renders nothin when HRS_ET = null: 1`] = `
+<DocumentFragment>
+  <li
+    data-cy="indicatorBox"
+    data-testid="indicator-box"
+  >
+    <div>
+      <div>
+        some label
+        <div>
+          some description
+        </div>
+      </div>
+      <div>
+        <div>
+          <div />
+          <div>
+            <img
+              alt="an icon to represent data is unavailable"
+              src="test-file-stub"
+            />
+          </div>
+        </div>
+        <div>
+          <div>
+            missing data
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`renders value correctly for historic underinvest. checks if it renders when HRS_ET = false: 1`] = `
+<DocumentFragment>
+  <li
+    data-cy="indicatorBox"
+    data-testid="indicator-box"
+  >
+    <div>
+      <div>
+        some label
+        <div>
+          some description
+        </div>
+      </div>
+      <div>
+        <div>
+          <div>
+            No
+          </div>
+          <div />
+        </div>
+        <div />
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`renders value correctly for historic underinvest. checks if it renders when HRS_ET = true 1`] = `
+<DocumentFragment>
+  <li
+    data-cy="indicatorBox"
+    data-testid="indicator-box"
+  >
+    <div>
+      <div>
+        some label
+        <div>
+          some description
+        </div>
+      </div>
+      <div>
+        <div>
+          <div>
+            Yes
+          </div>
+          <div />
+        </div>
+        <div />
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
 exports[`test rendering of Indicator value icons renders the down arrow when the value is above the threshold 1`] = `
 <DocumentFragment>
   <img
@@ -102,7 +366,16 @@ exports[`test rendering of Indicator value icons renders the down arrow when the
 </DocumentFragment>
 `;
 
-exports[`test rendering of Indicator value icons renders the unavailable icon when the value is null 1`] = `
+exports[`test rendering of Indicator value icons renders the unavailable icon when the value is a boolean null 1`] = `
+<DocumentFragment>
+  <img
+    alt="an icon to represent data is unavailable"
+    src="test-file-stub"
+  />
+</DocumentFragment>
+`;
+
+exports[`test rendering of Indicator value icons renders the unavailable icon when the value is a percentile null 1`] = `
 <DocumentFragment>
   <img
     alt="an icon to represent data is unavailable"
@@ -120,6 +393,14 @@ exports[`test rendering of Indicator value icons renders the up arrow when value
 </DocumentFragment>
 `;
 
+exports[`test rendering of Indicator value sub-text renders missing data  1`] = `
+<DocumentFragment>
+  <div>
+    missing data
+  </div>
+</DocumentFragment>
+`;
+
 exports[`test rendering of Indicator value sub-text renders the "above 90 percentile" 1`] = `
 <DocumentFragment>
   <div>
@@ -148,14 +429,6 @@ exports[`test rendering of Indicator value sub-text renders the "below 90 percen
 </DocumentFragment>
 `;
 
-exports[`test rendering of Indicator value sub-text renders the "data is not available" 1`] = `
-<DocumentFragment>
-  <div>
-    data is not available
-  </div>
-</DocumentFragment>
-`;
-
 exports[`test that the unit suffix renders correctly renders correctly when the value is a null 1`] = `<DocumentFragment />`;
 
 exports[`test that the unit suffix renders correctly renders correctly when the value is a percent 1`] = `

client/src/components/TractDemographics/TractDemographics.test.tsx

@@ -3,13 +3,395 @@ import {render} from '@testing-library/react';
 import {LocalizedComponent} from '../../test/testHelpers';
 import TractDemographics from './TractDemographics';
 
-describe('rendering of TractDemographics Component', () => {
+const propertiesAS = {
-  const {asFragment} = render(
+  'GEOID10': '60010950300',
-      <LocalizedComponent>
+  'SF': 'American Samoa',
-        <TractDemographics />
+  'M_WTR': false,
-      </LocalizedComponent>,
+  'M_WKFC': true,
-  );
+  'M_CLT': false,
-  it('checks if component renders', () => {
+  'M_ENY': false,
+  'M_TRN': false,
+  'M_HSG': false,
+  'M_PLN': false,
+  'M_HLTH': false,
+  'SM_C': true,
+  'SM_DON': false,
+  'SM_NO_DON': true,
+  'EPLRLI': false,
+  'EALRLI': false,
+  'EBLRLI': false,
+  'PM25LI': false,
+  'EBLI': false,
+  'DPMLI': false,
+  'TPLI': false,
+  'LPMHVLI': false,
+  'HBLI': false,
+  'RMPLI': false,
+  'SFLI': false,
+  'HWLI': false,
+  'WDLI': false,
+  'USTLI': false,
+  'DLI': false,
+  'ALI': false,
+  'HDLI': false,
+  'LLELI': false,
+  'LILHSE': false,
+  'PLHSE': false,
+  'LMILHSE': false,
+  'ULHSE': false,
+  'EPL_ET': false,
+  'EAL_ET': false,
+  'EBL_ET': false,
+  'EB_ET': false,
+  'PM25_ET': false,
+  'DS_ET': false,
+  'TP_ET': false,
+  'LPP_ET': false,
+  'KP_ET': false,
+  'HB_ET': false,
+  'RMP_ET': false,
+  'NPL_ET': false,
+  'TSDF_ET': false,
+  'WD_ET': false,
+  'UST_ET': false,
+  'DB_ET': false,
+  'A_ET': false,
+  'HD_ET': false,
+  'LLE_ET': false,
+  'UN_ET': false,
+  'LISO_ET': false,
+  'POV_ET': false,
+  'LMI_ET': false,
+  'IA_LMI_ET': false,
+  'IA_UN_ET': false,
+  'IA_POV_ET': true,
+  'TC': 1,
+  'CC': 1,
+  'IAULHSE': false,
+  'IAPLHSE': true,
+  'IALMILHSE': false,
+  'IALMILHSE_PFS': 0.27,
+  'IAPLHSE_PFS': 0.98,
+  'IAULHSE_PFS': 0.75,
+  'LHE': false,
+  'IALHE': true,
+  'IAHSEF': 0.52,
+  'CA_LT20': false,
+  'M_CLT_EOMI': false,
+  'M_ENY_EOMI': false,
+  'M_TRN_EOMI': false,
+  'M_HSG_EOMI': false,
+  'M_PLN_EOMI': false,
+  'M_WTR_EOMI': false,
+  'M_HLTH_EOMI': false,
+  'M_WKFC_EOMI': true,
+  'FPL200S': false,
+  'M_WKFC_EBSI': true,
+  'TD_ET': false,
+  'FLD_ET': false,
+  'WFR_ET': false,
+  'ADJ_ET': true,
+  'ADJ_PFS': 1,
+  'IS_ET': false,
+  'FUDS_ET': '0',
+  'UI_EXP': 'Island Areas',
+  'THRHLD': 3,
+};
+
+const propertiesNYC = {
+  'GEOID10': '36081020800',
+  'SF': 'New York',
+  'CF': 'Queens County',
+  'DF_PFS': 0.69,
+  'AF_PFS': 0.46,
+  'HDF_PFS': 0.29,
+  'DSF_PFS': 0.96,
+  'EBF_PFS': 0.75,
+  'EBLR_PFS': 0.11,
+  'EPLR_PFS': 0.19,
+  'HBF_PFS': 0.75,
+  'LLEF_PFS': 0.2,
+  'LIF_PFS': 0.9,
+  'LMI_PFS': 0.35,
+  'MHVF_PFS': 0.93,
+  'PM25F_PFS': 0.44,
+  'HSEF': 0.2830459770114942,
+  'P100_PFS': 0.43,
+  'P200_PFS': 0.41,
+  'P200_I_PFS': 0.37,
+  'LPF_PFS': 0.93,
+  'KP_PFS': 0.2159833426939357,
+  'NPL_PFS': 0.73,
+  'RMP_PFS': 0.42,
+  'TSDF_PFS': 0.87,
+  'TPF': 3136,
+  'TF_PFS': 0.92,
+  'UF_PFS': 0.86,
+  'UST_PFS': 0.9877704355346548,
+  'M_WTR': false,
+  'M_WKFC': true,
+  'M_CLT': false,
+  'M_ENY': false,
+  'M_TRN': false,
+  'M_HSG': false,
+  'M_PLN': false,
+  'M_HLTH': false,
+  'SM_C': true,
+  'SM_DON': false,
+  'SM_NO_DON': true,
+  'EPLRLI': false,
+  'EALRLI': false,
+  'EBLRLI': false,
+  'PM25LI': false,
+  'EBLI': false,
+  'DPMLI': false,
+  'TPLI': false,
+  'LPMHVLI': false,
+  'HBLI': false,
+  'RMPLI': false,
+  'SFLI': false,
+  'HWLI': false,
+  'WDLI': false,
+  'USTLI': false,
+  'DLI': false,
+  'ALI': false,
+  'HDLI': false,
+  'LLELI': false,
+  'LILHSE': true,
+  'PLHSE': false,
+  'LMILHSE': false,
+  'ULHSE': false,
+  'EPL_ET': false,
+  'EAL_ET': false,
+  'EBL_ET': false,
+  'EB_ET': false,
+  'PM25_ET': false,
+  'DS_ET': true,
+  'TP_ET': true,
+  'LPP_ET': false,
+  'HRS_ET': '1',
+  'KP_ET': false,
+  'HB_ET': false,
+  'RMP_ET': false,
+  'NPL_ET': false,
+  'TSDF_ET': false,
+  'WD_ET': false,
+  'UST_ET': true,
+  'DB_ET': false,
+  'A_ET': false,
+  'HD_ET': false,
+  'LLE_ET': false,
+  'UN_ET': false,
+  'LISO_ET': true,
+  'POV_ET': false,
+  'LMI_ET': false,
+  'IA_LMI_ET': false,
+  'IA_UN_ET': false,
+  'IA_POV_ET': false,
+  'TC': 1,
+  'CC': 1,
+  'IAULHSE': false,
+  'IAPLHSE': false,
+  'IALMILHSE': false,
+  'LHE': true,
+  'IALHE': false,
+  'CA': 0.1,
+  'NCA': 0.89,
+  'CA_LT20': true,
+  'M_CLT_EOMI': false,
+  'M_ENY_EOMI': false,
+  'M_TRN_EOMI': true,
+  'M_HSG_EOMI': false,
+  'M_PLN_EOMI': false,
+  'M_WTR_EOMI': false,
+  'M_HLTH_EOMI': false,
+  'M_WKFC_EOMI': true,
+  'FPL200S': false,
+  'M_WKFC_EBSI': true,
+  'TD_ET': false,
+  'TD_PFS': 0.61,
+  'FLD_PFS': 0.52,
+  'WFR_PFS': 0.33,
+  'FLD_ET': false,
+  'WFR_ET': false,
+  'ADJ_ET': true,
+  'ADJ_PFS': 1,
+  'IS_PFS': 0.99,
+  'IS_ET': false,
+  'IMP_FLG': '0',
+  'DM_B': 0.22,
+  'DM_AI': 0.03,
+  'DM_A': 0.09,
+  'DM_HI': 0,
+  'DM_T': 0.1,
+  'DM_W': 0.11,
+  'DM_H': 0.33,
+  'DM_O': 0.36,
+  'AGE_10': 0.13,
+  'AGE_MIDDLE': 0.8,
+  'AGE_OLD': 0.06,
+  'UI_EXP': 'Nation',
+  'THRHLD': 21,
+};
+
+const propertiesAK = {
+  'GEOID10': '02290000300',
+  'SF': 'Alaska',
+  'CF': 'Yukon-Koyukuk Census Area',
+  'DF_PFS': 0.87,
+  'AF_PFS': 0.93,
+  'HDF_PFS': 0.92,
+  'DSF_PFS': 0,
+  'EBF_PFS': 0.97,
+  'EBLR_PFS': 0.76,
+  'EPLR_PFS': 0.71,
+  'HBF_PFS': 0.22,
+  'LLEF_PFS': 0.79,
+  'LIF_PFS': 0.5,
+  'LMI_PFS': 0.89,
+  'MHVF_PFS': 0.07,
+  'HSEF': 0.128,
+  'P100_PFS': 0.84,
+  'P200_PFS': 0.79,
+  'P200_I_PFS': 0.81,
+  'LPF_PFS': 0.11,
+  'KP_PFS': 0.9996164436103616,
+  'NPL_PFS': 0,
+  'RMP_PFS': 0,
+  'TSDF_PFS': 0,
+  'TPF': 1821,
+  'UF_PFS': 0.97,
+  'UST_PFS': 0.0563641031877947,
+  'M_WTR': false,
+  'M_WKFC': true,
+  'M_CLT': false,
+  'M_ENY': true,
+  'M_TRN': false,
+  'M_HSG': false,
+  'M_PLN': false,
+  'M_HLTH': true,
+  'SM_C': true,
+  'SM_DON': false,
+  'SM_NO_DON': true,
+  'EPLRLI': false,
+  'EALRLI': false,
+  'EBLRLI': false,
+  'PM25LI': false,
+  'EBLI': true,
+  'DPMLI': false,
+  'TPLI': false,
+  'LPMHVLI': false,
+  'HBLI': false,
+  'RMPLI': false,
+  'SFLI': false,
+  'HWLI': false,
+  'WDLI': false,
+  'USTLI': false,
+  'DLI': false,
+  'ALI': true,
+  'HDLI': true,
+  'LLELI': false,
+  'LILHSE': false,
+  'PLHSE': false,
+  'LMILHSE': false,
+  'ULHSE': true,
+  'EPL_ET': false,
+  'EAL_ET': false,
+  'EBL_ET': false,
+  'EB_ET': true,
+  'PM25_ET': false,
+  'DS_ET': false,
+  'TP_ET': false,
+  'LPP_ET': false,
+  'KP_ET': true,
+  'HB_ET': false,
+  'RMP_ET': false,
+  'NPL_ET': false,
+  'TSDF_ET': false,
+  'WD_ET': false,
+  'UST_ET': false,
+  'DB_ET': false,
+  'A_ET': true,
+  'HD_ET': true,
+  'LLE_ET': false,
+  'UN_ET': true,
+  'LISO_ET': false,
+  'POV_ET': false,
+  'LMI_ET': false,
+  'IA_LMI_ET': false,
+  'IA_UN_ET': false,
+  'IA_POV_ET': false,
+  'TC': 6,
+  'CC': 5,
+  'IAULHSE': false,
+  'IAPLHSE': false,
+  'IALMILHSE': false,
+  'LHE': true,
+  'IALHE': false,
+  'CA': 0.05,
+  'NCA': 0.94,
+  'CA_LT20': true,
+  'M_CLT_EOMI': false,
+  'M_ENY_EOMI': true,
+  'M_TRN_EOMI': false,
+  'M_HSG_EOMI': true,
+  'M_PLN_EOMI': true,
+  'M_WTR_EOMI': false,
+  'M_HLTH_EOMI': true,
+  'M_WKFC_EOMI': true,
+  'FPL200S': true,
+  'M_WKFC_EBSI': true,
+  'TD_ET': false,
+  'TD_PFS': 0.43,
+  'FLD_PFS': 0.05,
+  'FLD_ET': false,
+  'WFR_ET': false,
+  'ADJ_ET': false,
+  'ADJ_PFS': 0.75,
+  'IS_ET': false,
+  'FUDS_ET': '1',
+  'IMP_FLG': '0',
+  'DM_B': 0,
+  'DM_AI': 0.78,
+  'DM_A': 0,
+  'DM_HI': 0,
+  'DM_T': 0.03,
+  'DM_W': 0.15,
+  'DM_H': 0.02,
+  'DM_O': 0,
+  'AGE_10': 0.17,
+  'AGE_MIDDLE': 0.69,
+  'AGE_OLD': 0.12,
+  'UI_EXP': 'Nation',
+  'THRHLD': 21,
+};
+
+
+describe('rendering of TractDemographics component', () => {
+  it('does it render a tract in American Samoa correctly? ', () => {
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <TractDemographics properties={propertiesAS}/>
+        </LocalizedComponent>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('does it render a tract in NYC correctly? ', () => {
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <TractDemographics properties={propertiesNYC}/>
+        </LocalizedComponent>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('does it render a tract in Alaska correctly? ', () => {
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <TractDemographics properties={propertiesAK}/>
+        </LocalizedComponent>,
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 });

client/src/components/TractDemographics/TractDemographics.tsx

@@ -6,54 +6,32 @@ import expandIcon from '/node_modules/uswds/dist/img/usa-icons/expand_more.svg';
 import collapseIcon from '/node_modules/uswds/dist/img/usa-icons/expand_less.svg';
 
 import * as styles from './TractDemographics.module.scss';
+import * as constants from '../../data/constants';
+import * as EXPLORE_COPY from '../../data/copy/explore';
 
-// Mock interface
 export interface ITractDemographicsProps {
-  racial: [string, number][],
+  properties: constants.J40Properties
-  age: [string, number][]
 }
 
-// Mock backend data
+interface IDemographicsData {
-const demographicsData:ITractDemographicsProps = {
+  race: [React.ReactElement, number][],
-  racial: [
+  age: [React.ReactElement, number][],
-    ['White', 61.4],
+}
-    ['Black or African Americon', 10.3],
-    ['American Indian and Alaska Native', 10.3],
-    ['Asian', 7.2],
-    ['Native Hawiian or Pacific Islander', 4.2],
-    ['Other', 2.5],
-    ['Two or more races', 6.7],
-    ['Hispanic or Latino', 10.4],
-  ],
-  age: [
-    ['Children under 10', 1.4],
-    ['Ages 10 - 64', 80.3],
-    ['Elderly over 65', 7.2],
-  ],
-};
-
-/*
- * Generate the demographic item based the input
- * // TODO: Update after actual data is created
- *
- */
-const demographicItemGen = (demographicData: any[]) => {
-  return demographicData.map((el, index) => {
-    return (
-      <div key={index} className={styles.demographicItem}>
-        <span>{ el[0] }</span>
-        <span>{`${el[1]}%`}</span>
-      </div>
-    );
-  });
-};
 
 interface IJ40AccordionItem {
   id: string,
-  title: string,
+  title: React.ReactElement,
-  children: React.ElementType
+  children: React.ReactElement
 }
 
+
+/**
+ * This function will create the custom Accordion item. This will be used
+ * for the race and age demographic UI elements
+ *
+ * @param {IJ40AccordionItem} props
+ * @return {JSX.Element}
+ */
 const J40AccordionItem = ({id, title, children}:IJ40AccordionItem) => {
   const [isExpanded, setIsExpanded] = useState(false);
   return (
@@ -100,18 +78,125 @@ const J40AccordionItem = ({id, title, children}:IJ40AccordionItem) => {
   );
 };
 
-const TractDemographics = () => {
+
+/**
+ * This function will create each line item on the list of demographics
+ *
+ * @param {[]} demographicData
+ * @return {JSX.Element}
+ */
+const demographicItemGen = (demographicData: []) => {
+  return demographicData.map((el, index) => {
+    return (
+      <div key={index} className={styles.demographicItem}>
+        <span>{ el[0] }</span>
+        {typeof el[1] === 'number' ?
+        <span>{`${el[1]}%`}</span> :
+        <span>{`${el[1]}`}</span> }
+      </div>
+    );
+  });
+};
+
+
+/**
+ * This function will return the numeric value of each demographic. Taking into
+ * account cases when the data is undefined or is null
+ *
+ * @param {number} stat
+ * @return {number}
+ */
+const displayStat = (stat: number) => {
+  if (stat === undefined || stat === null) {
+    return '--';
+  } else if (stat === 0) {
+    return 0;
+  }
+
+  return Number(Math.floor(stat * 100));
+};
+
+
+/**
+ * This function will create the data structure for the demographics data
+ *
+ * @param {constants.J40Properties} properties
+ * @return {IDemographicsData}
+ */
+const getDemographicsData = (properties:constants.J40Properties):IDemographicsData => (
+  {
+    race: [
+      [
+        EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_NON_HISPANIC_WHITE,
+        displayStat(properties[constants.DEMO_NON_HISPANIC_WHITE]),
+      ],
+      [
+        EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_BLACK,
+        displayStat(properties[constants.DEMO_BLACK]),
+      ],
+      [
+        EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_AMERICAN_INDIAN,
+        displayStat(properties[constants.DEMO_AMERICAN_INDIAN]),
+      ],
+      [
+        EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_ASIAN,
+        displayStat(properties[constants.DEMO_ASIAN]),
+      ],
+      [
+        EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_HAWAIIAN,
+        displayStat(properties[constants.DEMO_HAWAIIAN]),
+      ],
+      [
+        EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_OTHER_RACE,
+        displayStat(properties[constants.DEMO_OTHER_RACE]),
+      ],
+      [
+        EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_TWO_OR_MORE_RACES,
+        displayStat(properties[constants.DEMO_TWO_OR_MORE_RACES]),
+      ],
+      [
+        EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_HISPANIC,
+        displayStat(properties[constants.DEMO_HISPANIC]),
+      ],
+    ],
+    age: [
+      [
+        EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_AGE_UNDER_10,
+        displayStat(properties[constants.DEMO_AGE_UNDER_10]),
+      ],
+      [
+        EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_AGE_MID,
+        displayStat(properties[constants.DEMO_AGE_MID]),
+      ],
+      [
+        EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_AGE_OVER_64,
+        displayStat(properties[constants.DEMO_AGE_OVER_64]),
+      ],
+    ],
+  });
+
+
+/**
+ * This is the main component for this file. It accepts the selected feature
+ * as a prop and return the demographics component.
+ *
+ * @param {ITractDemographicsProps} props
+ * @return {JSX.Element}
+ */
+const TractDemographics = ({properties}: ITractDemographicsProps) => {
+  const {race, age} = getDemographicsData(properties);
+
   return (
     <div className={styles.demographicsContainer}>
       <div className={styles.demographicsTitle}>
-        Tract demographics
+        {EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.TITLE}
       </div>
       <>
-        <J40AccordionItem id={'race'} title={`Race / Ethnicity`}>
+        <J40AccordionItem id={'race'} title={EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.RACE_TITLE}>
-          {demographicItemGen(demographicsData.racial)}
+          {demographicItemGen(race)}
         </J40AccordionItem>
-        <J40AccordionItem id={'age'} title={`Age`}>
+        <J40AccordionItem id={'age'} title={EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.AGE_TITLE}>
-          {demographicItemGen(demographicsData.age)}
+          {demographicItemGen(age)}
         </J40AccordionItem>
       </>
     </div>

client/src/components/TractDemographics/__snapshots__/TractDemographics.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`rendering of TractDemographics Component checks if component renders 1`] = `
+exports[`rendering of TractDemographics component does it render a tract in Alaska correctly?  1`] = `
 <DocumentFragment>
   <div>
     <div>
@@ -35,15 +35,15 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
           White
         </span>
         <span>
-          61.4%
+          15%
         </span>
       </div>
       <div>
         <span>
-          Black or African Americon
+          Black or African American
         </span>
         <span>
-          10.3%
+          0%
         </span>
       </div>
       <div>
@@ -51,7 +51,7 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
           American Indian and Alaska Native
         </span>
         <span>
-          10.3%
+          78%
         </span>
       </div>
       <div>
@@ -59,7 +59,7 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
           Asian
         </span>
         <span>
-          7.2%
+          0%
         </span>
       </div>
       <div>
@@ -67,7 +67,7 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
           Native Hawiian or Pacific Islander
         </span>
         <span>
-          4.2%
+          0%
         </span>
       </div>
       <div>
@@ -75,7 +75,7 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
           Other
         </span>
         <span>
-          2.5%
+          0%
         </span>
       </div>
       <div>
@@ -83,7 +83,7 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
           Two or more races
         </span>
         <span>
-          6.7%
+          3%
         </span>
       </div>
       <div>
@@ -91,7 +91,7 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
           Hispanic or Latino
         </span>
         <span>
-          10.4%
+          2%
         </span>
       </div>
     </section>
@@ -124,7 +124,7 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
           Children under 10
         </span>
         <span>
-          1.4%
+          17%
         </span>
       </div>
       <div>
@@ -132,15 +132,311 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
           Ages 10 - 64
         </span>
         <span>
-          80.3%
+          69%
         </span>
       </div>
       <div>
         <span>
-          Elderly over 65
+          Elderly over 64
         </span>
         <span>
-          7.2%
+          12%
+        </span>
+      </div>
+    </section>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`rendering of TractDemographics component does it render a tract in American Samoa correctly?  1`] = `
+<DocumentFragment>
+  <div>
+    <div>
+      Tract demographics
+    </div>
+    <h6>
+      Race / Ethnicity
+      <span>
+        (
+        <button
+          aria-controls="race-panel"
+          aria-expanded="false"
+          id="race-header"
+          tabindex="0"
+        >
+          show
+        </button>
+        <img
+          alt="expand icon"
+          src="test-file-stub"
+        />
+        )
+      </span>
+    </h6>
+    <section
+      aria-labelledby="race-header"
+      hidden=""
+      id="race-panel"
+    >
+      <div>
+        <span>
+          White
+        </span>
+        <span>
+          --
+        </span>
+      </div>
+      <div>
+        <span>
+          Black or African American
+        </span>
+        <span>
+          --
+        </span>
+      </div>
+      <div>
+        <span>
+          American Indian and Alaska Native
+        </span>
+        <span>
+          --
+        </span>
+      </div>
+      <div>
+        <span>
+          Asian
+        </span>
+        <span>
+          --
+        </span>
+      </div>
+      <div>
+        <span>
+          Native Hawiian or Pacific Islander
+        </span>
+        <span>
+          --
+        </span>
+      </div>
+      <div>
+        <span>
+          Other
+        </span>
+        <span>
+          --
+        </span>
+      </div>
+      <div>
+        <span>
+          Two or more races
+        </span>
+        <span>
+          --
+        </span>
+      </div>
+      <div>
+        <span>
+          Hispanic or Latino
+        </span>
+        <span>
+          --
+        </span>
+      </div>
+    </section>
+    <h6>
+      Age
+      <span>
+        (
+        <button
+          aria-controls="age-panel"
+          aria-expanded="false"
+          id="age-header"
+          tabindex="0"
+        >
+          show
+        </button>
+        <img
+          alt="expand icon"
+          src="test-file-stub"
+        />
+        )
+      </span>
+    </h6>
+    <section
+      aria-labelledby="age-header"
+      hidden=""
+      id="age-panel"
+    >
+      <div>
+        <span>
+          Children under 10
+        </span>
+        <span>
+          --
+        </span>
+      </div>
+      <div>
+        <span>
+          Ages 10 - 64
+        </span>
+        <span>
+          --
+        </span>
+      </div>
+      <div>
+        <span>
+          Elderly over 64
+        </span>
+        <span>
+          --
+        </span>
+      </div>
+    </section>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`rendering of TractDemographics component does it render a tract in NYC correctly?  1`] = `
+<DocumentFragment>
+  <div>
+    <div>
+      Tract demographics
+    </div>
+    <h6>
+      Race / Ethnicity
+      <span>
+        (
+        <button
+          aria-controls="race-panel"
+          aria-expanded="false"
+          id="race-header"
+          tabindex="0"
+        >
+          show
+        </button>
+        <img
+          alt="expand icon"
+          src="test-file-stub"
+        />
+        )
+      </span>
+    </h6>
+    <section
+      aria-labelledby="race-header"
+      hidden=""
+      id="race-panel"
+    >
+      <div>
+        <span>
+          White
+        </span>
+        <span>
+          11%
+        </span>
+      </div>
+      <div>
+        <span>
+          Black or African American
+        </span>
+        <span>
+          22%
+        </span>
+      </div>
+      <div>
+        <span>
+          American Indian and Alaska Native
+        </span>
+        <span>
+          3%
+        </span>
+      </div>
+      <div>
+        <span>
+          Asian
+        </span>
+        <span>
+          9%
+        </span>
+      </div>
+      <div>
+        <span>
+          Native Hawiian or Pacific Islander
+        </span>
+        <span>
+          0%
+        </span>
+      </div>
+      <div>
+        <span>
+          Other
+        </span>
+        <span>
+          36%
+        </span>
+      </div>
+      <div>
+        <span>
+          Two or more races
+        </span>
+        <span>
+          10%
+        </span>
+      </div>
+      <div>
+        <span>
+          Hispanic or Latino
+        </span>
+        <span>
+          33%
+        </span>
+      </div>
+    </section>
+    <h6>
+      Age
+      <span>
+        (
+        <button
+          aria-controls="age-panel"
+          aria-expanded="false"
+          id="age-header"
+          tabindex="0"
+        >
+          show
+        </button>
+        <img
+          alt="expand icon"
+          src="test-file-stub"
+        />
+        )
+      </span>
+    </h6>
+    <section
+      aria-labelledby="age-header"
+      hidden=""
+      id="age-panel"
+    >
+      <div>
+        <span>
+          Children under 10
+        </span>
+        <span>
+          13%
+        </span>
+      </div>
+      <div>
+        <span>
+          Ages 10 - 64
+        </span>
+        <span>
+          80%
+        </span>
+      </div>
+      <div>
+        <span>
+          Elderly over 64
+        </span>
+        <span>
+          6%
         </span>
       </div>
     </section>

client/src/data/constants.tsx

@@ -38,6 +38,20 @@ export const COUNTY_NAME = 'CF';
 export const STATE_NAME = 'SF';
 export const TOTAL_POPULATION = 'TPF';
 
+
+// Demographics
+export const DEMO_NON_HISPANIC_WHITE = 'DM_W';
+export const DEMO_BLACK = 'DM_B';
+export const DEMO_AMERICAN_INDIAN = 'DM_AI';
+export const DEMO_ASIAN = 'DM_A';
+export const DEMO_HAWAIIAN = 'DM_HI';
+export const DEMO_OTHER_RACE = 'DM_O';
+export const DEMO_TWO_OR_MORE_RACES = 'DM_T';
+export const DEMO_HISPANIC = 'DM_H';
+export const DEMO_AGE_UNDER_10 = 'AGE_10';
+export const DEMO_AGE_MID = 'AGE_MIDDLE';
+export const DEMO_AGE_OVER_64 = 'AGE_OLD';
+
 /**
  * The SCORE_BOUNDAY_THRESHOLD will determine if the tract is disadvantaged
  * or not. Currently all values are railed to 0 or 1. If the
@@ -59,8 +73,8 @@ export const SIDE_PANEL_STATE_VALUES = {
 };
 
 // Climate category
-export const IS_CLIMATE_FACTOR_DISADVANTAGED_M = 'M_CLT';
+export const IS_CLIMATE_FACTOR_DISADVANTAGED_M = 'N_CLT';
-export const IS_CLIMATE_EXCEED_ONE_OR_MORE_INDICATORS_M = 'M_CLT_EOMI';
+export const IS_CLIMATE_EXCEED_ONE_OR_MORE_INDICATORS_M = 'N_CLT_EOMI';
 
 export const EXP_AGRICULTURE_LOSS_PERCENTILE = 'EALR_PFS';
 export const IS_EXCEEDS_THRESH_FOR_EXP_AGR_LOSS = 'EAL_ET';
@@ -77,7 +91,7 @@ export const IS_EXCEEDS_THRESH_FLOODING = 'FLD_ET';
 export const WILDFIRE_PERCENTILE = 'WF_PFS';
 export const IS_EXCEEDS_THRESH_WILDFIRE = 'WF_ET';
 
-export const IS_EXCEED_BOTH_SOCIO_INDICATORS_M = 'M_EBSI';
+export const IS_EXCEED_BOTH_SOCIO_INDICATORS_M = 'N_EBSI';
 
 export const POVERTY_BELOW_200_PERCENTILE = 'P200_PFS';
 export const IS_FEDERAL_POVERTY_LEVEL_200 = 'FPL200S';
@@ -89,8 +103,8 @@ export const NON_HIGHER_ED_PERCENTILE = 'NCA';
 
 
 // Energy category
-export const IS_ENERGY_FACTOR_DISADVANTAGED_M = 'M_ENY';
+export const IS_ENERGY_FACTOR_DISADVANTAGED_M = 'N_ENY';
-export const IS_ENERGY_EXCEED_ONE_OR_MORE_INDICATORS_M = 'M_ENY_EOMI';
+export const IS_ENERGY_EXCEED_ONE_OR_MORE_INDICATORS_M = 'N_ENY_EOMI';
 
 export const ENERGY_PERCENTILE = 'EBF_PFS';
 export const IS_EXCEEDS_THRESH_FOR_ENERGY_BURDEN = 'EB_ET';
@@ -100,8 +114,8 @@ export const IS_EXCEEDS_THRESH_FOR_PM25 = 'PM25_ET';
 
 
 // Transport category
-export const IS_TRANSPORT_FACTOR_DISADVANTAGED_M = 'M_TRN';
+export const IS_TRANSPORT_FACTOR_DISADVANTAGED_M = 'N_TRN';
-export const IS_TRANSPORT_EXCEED_ONE_OR_MORE_INDICATORS_M = 'M_TRN_EOMI';
+export const IS_TRANSPORT_EXCEED_ONE_OR_MORE_INDICATORS_M = 'N_TRN_EOMI';
 
 export const DIESEL_MATTER_PERCENTILE = 'DSF_PFS';
 export const IS_EXCEEDS_THRESH_FOR_DIESEL_PM = 'DS_ET';
@@ -114,8 +128,11 @@ export const IS_EXCEEDS_THRESH_FOR_TRAFFIC_PROX = 'TP_ET';
 
 
 // Housing category
-export const IS_HOUSING_FACTOR_DISADVANTAGED_M = 'M_HSG';
+export const IS_HOUSING_FACTOR_DISADVANTAGED_M = 'N_HSG';
-export const IS_HOUSING_EXCEED_ONE_OR_MORE_INDICATORS_M = 'M_HSG_EOMI';
+export const IS_HOUSING_EXCEED_ONE_OR_MORE_INDICATORS_M = 'N_HSG_EOMI';
+
+export const HISTORIC_UNDERINVESTMENT_EXCEED_THRESH = 'HRS_ET';
+export const HISTORIC_UNDERINVESTMENT_RAW_YES = 1;
 
 export const HOUSING_BURDEN_PROPERTY_PERCENTILE = 'HBF_PFS';
 export const IS_EXCEEDS_THRESH_FOR_HOUSE_BURDEN = 'HB_ET';
@@ -133,8 +150,17 @@ export const IS_EXCEEDS_THRESH_FOR_LEAD_PAINT_AND_MEDIAN_HOME_VAL = 'LPP_ET';
 
 
 // Pollution category
-export const IS_POLLUTION_FACTOR_DISADVANTAGED_M = 'M_PLN';
+export const IS_POLLUTION_FACTOR_DISADVANTAGED_M = 'N_PLN';
-export const IS_POLLUTION_EXCEED_ONE_OR_MORE_INDICATORS_M = 'M_PLN_EOMI';
+export const IS_POLLUTION_EXCEED_ONE_OR_MORE_INDICATORS_M = 'N_PLN_EOMI';
+
+export const ABANDON_LAND_MINES_RAW_VALUE = 'AML_RAW';
+export const AML_RAW_YES = 1;
+export const ABANDON_LAND_MINES_EXCEEDS_THRESH = 'AML_ET';
+
+export const FORMER_DEF_SITES_RAW_VALUE = 'FUDS_RAW';
+export const FUDS_RAW_YES = 1;
+export const FUDS_RAW_NO = 0;
+export const FORMER_DEF_SITES_EXCEEDS_THRESH = 'FUDS_ET';
 
 export const PROXIMITY_TSDF_SITES_PERCENTILE = 'TSDF_PFS';
 export const IS_EXCEEDS_THRESH_FOR_HAZARD_WASTE = 'TSDF_ET';
@@ -147,8 +173,8 @@ export const IS_EXCEEDS_THRESH_FOR_RMP = 'RMP_ET';
 
 
 // Water category
-export const IS_WATER_FACTOR_DISADVANTAGED_M = 'M_WTR';
+export const IS_WATER_FACTOR_DISADVANTAGED_M = 'N_WTR';
-export const IS_WATER_EXCEED_ONE_OR_MORE_INDICATORS_M = 'M_WTR_EOMI';
+export const IS_WATER_EXCEED_ONE_OR_MORE_INDICATORS_M = 'N_WTR_EOMI';
 
 export const LEAKY_UNDER_PERCENTILE = 'UST_PFS';
 export const IS_EXCEEDS_THRESH_LEAKY_UNDER = 'UST_ET';
@@ -159,8 +185,8 @@ export const IS_EXCEEDS_THRESH_FOR_WASTEWATER = 'WD_ET';
 
 
 // Health category
-export const IS_HEALTH_FACTOR_DISADVANTAGED_M = 'M_HLTH';
+export const IS_HEALTH_FACTOR_DISADVANTAGED_M = 'N_HLTH';
-export const IS_HEALTH_EXCEED_ONE_OR_MORE_INDICATORS_M = 'M_HLTH_EOMI';
+export const IS_HEALTH_EXCEED_ONE_OR_MORE_INDICATORS_M = 'N_HLTH_EOMI';
 
 export const ASTHMA_PERCENTILE = 'AF_PFS';
 export const IS_EXCEEDS_THRESH_FOR_ASTHMA = 'A_ET';
@@ -176,8 +202,8 @@ export const IS_EXCEEDS_THRESH_FOR_LOW_LIFE_EXP = 'LLE_ET';
 
 
 // Workforce category
-export const IS_WORKFORCE_FACTOR_DISADVANTAGED_M = 'M_WKFC';
+export const IS_WORKFORCE_FACTOR_DISADVANTAGED_M = 'N_WKFC';
-export const IS_WORKFORCE_EXCEED_ONE_OR_MORE_INDICATORS_M = 'M_WKFC_EOMI';
+export const IS_WORKFORCE_EXCEED_ONE_OR_MORE_INDICATORS_M = 'N_WKFC_EOMI';
 
 export const LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE = 'LIF_PFS';
 export const IS_EXCEEDS_THRESH_FOR_LINGUISITIC_ISO = 'LISO_ET';
@@ -197,7 +223,7 @@ export const IS_EXCEEDS_THRESH_FOR_BELOW_100_POVERTY = 'POV_ET';
 export const ISLAND_AREAS_POVERTY_LOW_HS_EDU_PERCENTILE_FIELD= 'IAPLHSE_PFS';
 export const IS_EXCEEDS_THRESH_FOR_ISLAND_AREA_BELOW_100_POVERTY = 'IA_POV_ET';
 
-export const IS_WORKFORCE_EXCEED_BOTH_SOCIO_INDICATORS_M = 'M_WKFC_EBSI';
+export const IS_WORKFORCE_EXCEED_BOTH_SOCIO_INDICATORS_M = 'N_WKFC_EBSI';
 
 export const HIGH_SCHOOL_PROPERTY_PERCENTILE = `HSEF`;
 export const IS_LOW_HS_EDUCATION_LOW_HIGHER_ED_PRIORITIZED = 'LHE';
@@ -226,8 +252,8 @@ export const SELECTED_TRIBAL_FEATURE_BORDER_LAYER_ID = 'selected-feature-tribal-
 export const TRIBAL_ALASKA_POINTS_LAYER_ID = 'tribal-alaska-points-layer-id';
 
 // Used in layer filters:
-export const SCORE_PROPERTY_LOW = 'M_SCORE';
+export const SCORE_PROPERTY_LOW = 'SCORE';
-export const SCORE_PROPERTY_HIGH = 'SM_C';
+export const SCORE_PROPERTY_HIGH = 'SN_C';
 
 // Zoom
 export const GLOBAL_MIN_ZOOM = 3;

client/src/data/copy/explore.tsx

@@ -331,6 +331,79 @@ export const SIDE_PANEL_CBG_INFO = defineMessages({
   },
 });
 
+export const SIDE_PANEL_DEMOGRAPHICS = {
+  TITLE: <FormattedMessage
+    id={'explore.map.page.side.panel.demo.title'}
+    defaultMessage={'Tract demographics'}
+    description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demograhics title`}
+  />,
+  RACE_TITLE: <FormattedMessage
+    id={'explore.map.page.side.panel.demo.race.title'}
+    defaultMessage={'Race / Ethnicity'}
+    description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demograhics race title`}
+  />,
+  AGE_TITLE: <FormattedMessage
+    id={'explore.map.page.side.panel.demo.age.title'}
+    defaultMessage={'Age'}
+    description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demograhics age title`}
+  />,
+  DEMO_NON_HISPANIC_WHITE: <FormattedMessage
+    id={'explore.map.page.side.panel.demo.white'}
+    defaultMessage={'White'}
+    description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: White`}
+  />,
+  DEMO_BLACK: <FormattedMessage
+    id={'explore.map.page.side.panel.demo.black'}
+    defaultMessage={'Black or African American'}
+    description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Black`}
+  />,
+  DEMO_AMERICAN_INDIAN: <FormattedMessage
+    id={'explore.map.page.side.panel.demo.american.indian'}
+    defaultMessage={'American Indian and Alaska Native'}
+    description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: American Indian and Alaska Native`}
+  />,
+  DEMO_ASIAN: <FormattedMessage
+    id={'explore.map.page.side.panel.demo.asian'}
+    defaultMessage={'Asian'}
+    description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Asian`}
+  />,
+  DEMO_HAWAIIAN: <FormattedMessage
+    id={'explore.map.page.side.panel.demo.hawaiian'}
+    defaultMessage={'Native Hawiian or Pacific Islander'}
+    description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Native Hawiian or Pacific Islander`}
+  />,
+  DEMO_OTHER_RACE: <FormattedMessage
+    id={'explore.map.page.side.panel.demo.other'}
+    defaultMessage={'Other'}
+    description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Other`}
+  />,
+  DEMO_TWO_OR_MORE_RACES: <FormattedMessage
+    id={'explore.map.page.side.panel.demo.two.or.more'}
+    defaultMessage={'Two or more races'}
+    description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Two or more races`}
+  />,
+  DEMO_HISPANIC: <FormattedMessage
+    id={'explore.map.page.side.panel.demo.hispanic'}
+    defaultMessage={'Hispanic or Latino'}
+    description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Hispanic or Latino`}
+  />,
+  DEMO_AGE_UNDER_10: <FormattedMessage
+    id={'explore.map.page.side.panel.demo.age.under.10'}
+    defaultMessage={'Children under 10'}
+    description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Children under 10`}
+  />,
+  DEMO_AGE_MID: <FormattedMessage
+    id={'explore.map.page.side.panel.demo.of.age.mid'}
+    defaultMessage={'Ages 10 - 64'}
+    description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Ages 10 - 64`}
+  />,
+  DEMO_AGE_OVER_64: <FormattedMessage
+    id={'explore.map.page.side.panel.demo.age.over.64'}
+    defaultMessage={'Elderly over 64'}
+    description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Elderly over 64`}
+  />,
+};
+
 export const SIDE_PANEL_TRIBAL_INFO = defineMessages({
   LAND_AREA_NAME: {
     id: 'explore.map.page.side.panel.tribalInfo.landAreaName',
@@ -468,32 +541,27 @@ export const SIDE_PANEL_INDICATORS = defineMessages({
   EXP_AG_LOSS: {
     id: 'explore.map.page.side.panel.indicator.exp.ag.loss',
     defaultMessage: 'Expected agriculture loss rate',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show agriculture loss rate
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show agriculture loss rate`,
-`,
   },
   EXP_BLD_LOSS: {
     id: 'explore.map.page.side.panel.indicator.exp.bld.loss',
     defaultMessage: 'Expected building loss rate',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show building loss rate
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show building loss rate`,
-`,
   },
   EXP_POP_LOSS: {
     id: 'explore.map.page.side.panel.indicator.exp.pop.loss',
     defaultMessage: 'Expected population loss rate',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show population loss rate
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show population loss rate`,
-`,
   },
   FLOODING: {
     id: 'explore.map.page.side.panel.indicator.flooding',
     defaultMessage: 'Future flood risk',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show flood risk
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show flood risk`,
-`,
   },
   WILDFIRE: {
     id: 'explore.map.page.side.panel.indicator.wildfire',
     defaultMessage: 'Future wildfire risk',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show wildfire risk
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show wildfire risk`,
-`,
   },
   LOW_INCOME: {
     id: 'explore.map.page.side.panel.indicator.low.income',
@@ -502,8 +570,7 @@ export const SIDE_PANEL_INDICATORS = defineMessages({
   HIGH_ED: {
     id: 'explore.map.page.side.panel.indicator.high.ed',
     defaultMessage: 'Higher education non-enrollment',
-    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Higher ed degree achievement rate
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Higher ed degree achievement rate`,
-`,
   },
   ENERGY_BURDEN: {
     id: 'explore.map.page.side.panel.indicator.energyBurden',
@@ -540,6 +607,11 @@ export const SIDE_PANEL_INDICATORS = defineMessages({
     defaultMessage: 'Median home value',
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Housing cost burden`,
   },
+  HIST_UNDERINVEST: {
+    id: 'explore.map.page.side.panel.indicator.historic.underinvest',
+    defaultMessage: 'Historic underinvestment',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Historic underinvestment`,
+  },
   HOUSE_BURDEN: {
     id: 'explore.map.page.side.panel.indicator.houseBurden',
     defaultMessage: 'Housing cost burden',
@@ -555,6 +627,16 @@ export const SIDE_PANEL_INDICATORS = defineMessages({
     defaultMessage: 'Lack of plumbing',
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Lack of plumbing`,
   },
+  ABANDON_MINES: {
+    id: 'explore.map.page.side.panel.indicator.abandon.mines',
+    defaultMessage: 'Abandoned mine lands',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Abandoned land mines`,
+  },
+  FORMER_DEF_SITES: {
+    id: 'explore.map.page.side.panel.indicator.former.def.sites',
+    defaultMessage: 'Formerly Used Defense Sites (FUDS)',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Formerly Used Defense Sites (FUDS)`,
+  },
   PROX_HAZ: {
     id: 'explore.map.page.side.panel.indicator.prox.haz',
     defaultMessage: 'Proximity to hazardous waste facilities',
@@ -668,7 +750,7 @@ export const SIDE_PANEL_VALUES = {
   UNAVAILBLE_MSG: <FormattedMessage
     id={'explore.map.page.side.panel.indicator.value.subtext.unavailable'}
     description={'subtext for indicator when data is N/A'}
-    defaultMessage={`data is not available`}
+    defaultMessage={`missing data`}
   />,
 };
 
@@ -764,6 +846,11 @@ export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Median home value in area`,
 
   },
+  HIST_UNDERINVEST: {
+    id: 'explore.map.page.side.panel.indicator.description.historic.underinvestment',
+    defaultMessage: 'Census tracts with historically high barriers to accessing home loans',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Low income households spending more than 30% of income housing`,
+  },
   HOUSE_BURDEN: {
     id: 'explore.map.page.side.panel.indicator.description.houseBurden',
     defaultMessage: 'Low income households spending more than 30% of income on housing',
@@ -780,6 +867,16 @@ export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
     description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Share of homes without indoor kitchens or plumbing`,
   },
 
+  ABANDON_MINES: {
+    id: 'explore.map.page.side.panel.indicator.description.abandon.mines',
+    defaultMessage: 'Presence of an abandoned land mine within the tract',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Presence of an abandoned land mine within the tract`,
+  },
+  FORMER_DEF_SITES: {
+    id: 'explore.map.page.side.panel.indicator.description.former.def.sites',
+    defaultMessage: 'Presence of a Formerly Used Defense Site within the tract',
+    description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Presence of a Formerly Used Defense Site within the tract`,
+  },
   PROX_HAZ: {
     id: 'explore.map.page.side.panel.indicator.description.prox.haz',
     defaultMessage: 'Count of hazardous waste facilities within 5 kilometers',

client/src/intl/en.json

@@ -467,6 +467,62 @@
     "defaultMessage": "YES",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the communities the score currently is focused on"
   },
+  "explore.map.page.side.panel.demo.age.over.64": {
+    "defaultMessage": "Elderly over 64",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Elderly over 64"
+  },
+  "explore.map.page.side.panel.demo.age.title": {
+    "defaultMessage": "Age",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demograhics age title"
+  },
+  "explore.map.page.side.panel.demo.age.under.10": {
+    "defaultMessage": "Children under 10",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Children under 10"
+  },
+  "explore.map.page.side.panel.demo.american.indian": {
+    "defaultMessage": "American Indian and Alaska Native",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: American Indian and Alaska Native"
+  },
+  "explore.map.page.side.panel.demo.asian": {
+    "defaultMessage": "Asian",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Asian"
+  },
+  "explore.map.page.side.panel.demo.black": {
+    "defaultMessage": "Black or African American",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Black"
+  },
+  "explore.map.page.side.panel.demo.hawaiian": {
+    "defaultMessage": "Native Hawiian or Pacific Islander",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Native Hawiian or Pacific Islander"
+  },
+  "explore.map.page.side.panel.demo.hispanic": {
+    "defaultMessage": "Hispanic or Latino",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Hispanic or Latino"
+  },
+  "explore.map.page.side.panel.demo.of.age.mid": {
+    "defaultMessage": "Ages 10 - 64",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Ages 10 - 64"
+  },
+  "explore.map.page.side.panel.demo.other": {
+    "defaultMessage": "Other",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Other"
+  },
+  "explore.map.page.side.panel.demo.race.title": {
+    "defaultMessage": "Race / Ethnicity",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demograhics race title"
+  },
+  "explore.map.page.side.panel.demo.title": {
+    "defaultMessage": "Tract demographics",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demograhics title"
+  },
+  "explore.map.page.side.panel.demo.two.or.more": {
+    "defaultMessage": "Two or more races",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Two or more races"
+  },
+  "explore.map.page.side.panel.demo.white": {
+    "defaultMessage": "White",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: White"
+  },
   "explore.map.page.side.panel.exceed.burden.answer.no": {
     "defaultMessage": "No",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. This will display NO if the census tract is disadvantaged"
@@ -499,6 +555,10 @@
     "defaultMessage": "Tract information",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the census tract info title"
   },
+  "explore.map.page.side.panel.indicator.abandon.mines": {
+    "defaultMessage": "Abandoned mine lands",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Abandoned land mines"
+  },
   "explore.map.page.side.panel.indicator.asthma": {
     "defaultMessage": "Asthma",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Asthma"
@@ -507,6 +567,10 @@
     "defaultMessage": "Transportation barriers",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show transportation barriers"
   },
+  "explore.map.page.side.panel.indicator.description.abandon.mines": {
+    "defaultMessage": "Presence of an abandoned land mine within the tract",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Presence of an abandoned land mine within the tract"
+  },
   "explore.map.page.side.panel.indicator.description.asthma": {
     "defaultMessage": "Weighted percent of people who have been told they have asthma",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Number of people who have been told they have asthma"
@@ -543,6 +607,10 @@
     "defaultMessage": "Projected risk to properties from floods from tides, rain, riverine and storm surges in 30 years",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of flooding risk"
   },
+  "explore.map.page.side.panel.indicator.description.former.def.sites": {
+    "defaultMessage": "Presence of a Formerly Used Defense Site within the tract",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Presence of a Formerly Used Defense Site within the tract"
+  },
   "explore.map.page.side.panel.indicator.description.heartDisease": {
     "defaultMessage": "People ages 18 years and older who have been told they have heart disease",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Weighted percent of people ages 18 years and older who have \n    been told they have heart disease"
@@ -555,6 +623,10 @@
     "defaultMessage": "Percent of people ages 25 years or older whose education level is less than a high school diploma",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Percent of people ages 25 years or older whose education level \n      is less than a high school diploma"
   },
+  "explore.map.page.side.panel.indicator.description.historic.underinvestment": {
+    "defaultMessage": "Census tracts with historically high barriers to accessing home loans",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Low income households spending more than 30% of income housing"
+  },
   "explore.map.page.side.panel.indicator.description.houseBurden": {
     "defaultMessage": "Low income households spending more than 30% of income on housing",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Low income households spending more than 30% of income housing"
@@ -645,19 +717,23 @@
   },
   "explore.map.page.side.panel.indicator.exp.ag.loss": {
     "defaultMessage": "Expected agriculture loss rate",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show agriculture loss rate\n"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show agriculture loss rate"
   },
   "explore.map.page.side.panel.indicator.exp.bld.loss": {
     "defaultMessage": "Expected building loss rate",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show building loss rate\n"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show building loss rate"
   },
   "explore.map.page.side.panel.indicator.exp.pop.loss": {
     "defaultMessage": "Expected population loss rate",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show population loss rate\n"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show population loss rate"
   },
   "explore.map.page.side.panel.indicator.flooding": {
     "defaultMessage": "Future flood risk",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show flood risk\n"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show flood risk"
+  },
+  "explore.map.page.side.panel.indicator.former.def.sites": {
+    "defaultMessage": "Formerly Used Defense Sites (FUDS)",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Formerly Used Defense Sites (FUDS)"
   },
   "explore.map.page.side.panel.indicator.heartDisease": {
     "defaultMessage": "Heart disease",
@@ -665,12 +741,16 @@
   },
   "explore.map.page.side.panel.indicator.high.ed": {
     "defaultMessage": "Higher education non-enrollment",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Higher ed degree achievement rate\n"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Higher ed degree achievement rate"
   },
   "explore.map.page.side.panel.indicator.high.school": {
     "defaultMessage": "High school degree non-attainment",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show High school degree achievement rate"
   },
+  "explore.map.page.side.panel.indicator.historic.underinvest": {
+    "defaultMessage": "Historic underinvestment",
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Historic underinvestment"
+  },
   "explore.map.page.side.panel.indicator.houseBurden": {
     "defaultMessage": "Housing cost burden",
     "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Housing cost burden"
@@ -800,7 +880,7 @@
     "description": "indicating percentile units"
   },
   "explore.map.page.side.panel.indicator.value.subtext.unavailable": {
-    "defaultMessage": "data is not available",
+    "defaultMessage": "missing data",
     "description": "subtext for indicator when data is N/A"
   },
   "explore.map.page.side.panel.indicator.value.unavailable.alt.text": {
@@ -813,7 +893,7 @@
   },
   "explore.map.page.side.panel.indicator.wildfire": {
     "defaultMessage": "Future wildfire risk",
-    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show wildfire risk\n"
+    "description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show wildfire risk"
   },
   "explore.map.page.side.panel.info.alt.text.icon1": {
     "defaultMessage": "An icon that has depicts pieces of a block selected mimicking the census block census tracts",