@cdc/map 4.25.3 → 4.25.6

package/src/components/BubbleList.tsx

@@ -1,37 +1,96 @@
-import React, { useContext, useEffect } from 'react'
+import React, { useContext } from 'react'
 import { scaleLinear } from 'd3-scale'
 import { countryCoordinates } from '../data/country-coordinates'
 import stateCoordinates from '../data/state-coordinates'
-import ConfigContext from '../context'
+import ConfigContext, { MapDispatchContext } from '../context'
+import { type Coordinate, DataRow } from '../types/MapConfig'
+import useApplyTooltipsToGeo from '../hooks/useApplyTooltipsToGeo'
+import { applyLegendToRow } from '../helpers/applyLegendToRow'
+import { displayGeoName, SVG_HEIGHT, SVG_WIDTH } from '../helpers'
+import { geoMercator, geoAlbersUsa, type GeoProjection } from 'd3-geo'
+import { getColumnNames } from '../helpers/getColumnNames'
+import { MapContext } from '../types/MapContext'
+import useGeoClickHandler from '../hooks/useGeoClickHandler'
 
-export const BubbleList = ({ data: dataImport, state, projection, applyLegendToRow, applyTooltipsToGeo, handleCircleClick, runtimeData, displayGeoName }) => {
-  const maxDataValue = Math.max(...dataImport.map(d => d[state.columns.primary.name]))
-  const { tooltipId } = useContext(ConfigContext)
-
-  const hasBubblesWithZeroOnMap = state.visual.showBubbleZeros ? 0 : 1
-  // sort runtime data. Smaller bubbles should appear on top.
-  const sortedRuntimeData = Object.values(runtimeData).sort((a, b) => (a[state.columns.primary.name] < b[state.columns.primary.name] ? 1 : -1))
-  if (!sortedRuntimeData) return
+type BubbleListProps = {
+  customProjection?: GeoProjection
+}
 
+export const BubbleList: React.FC<BubbleListProps> = ({ customProjection }) => {
+  const { config, tooltipId, legendMemo, legendSpecialClassLastMemo, setRuntimeData, runtimeData, runtimeLegend } =
+    useContext<MapContext>(ConfigContext)
+  const { columns, data, general, visual } = config
+  const { geoType, allowMapZoom } = general
+  const { minBubbleSize, maxBubbleSize, showBubbleZeros, extraBubbleBorder } = visual
+  const hasBubblesWithZeroOnMap = showBubbleZeros ? 0 : 1
   const clickTolerance = 10
-  // Set bubble sizes
-  var size = scaleLinear().domain([hasBubblesWithZeroOnMap, maxDataValue]).range([state.visual.minBubbleSize, state.visual.maxBubbleSize])
+  const dispatch = useContext(MapDispatchContext)
+  const { geoClickHandler } = useGeoClickHandler()
+
+  // hooks
+  const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
+  const { primaryColumnName, geoColumnName } = getColumnNames(columns)
+
+  const maxDataValue = Math.max(...data.map(d => d[primaryColumnName]))
+  const size = scaleLinear().domain([hasBubblesWithZeroOnMap, maxDataValue]).range([minBubbleSize, maxBubbleSize])
+
+  const getProjection = () => {
+    try {
+      if (geoType === 'world') return geoMercator()
+      if (geoType === 'us') return geoAlbersUsa().translate([SVG_WIDTH / 2 + 15, SVG_HEIGHT / 2]) // translate is half of each svg x/y viewbox values
+      if (customProjection) return customProjection
+      throw new Error('No projection found in BubbleList component')
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  const projection = getProjection()
 
-  // Start looping through the countries to create the bubbles.
-  if (state.general.geoType === 'world') {
-    const countries =
+  const handleBubbleClick = (dataRow: DataRow) => {
+    if (!allowMapZoom) return
+    const newRuntimeData = data.filter(item => item[geoColumnName] === dataRow[geoColumnName])
+    const _filteredCountryCode = newRuntimeData[0]?.uid
+    if (!_filteredCountryCode) return null
+    const coordinates = countryCoordinates[_filteredCountryCode]
+    const long = coordinates[1]
+    const lat = coordinates[0]
+    const reversedCoordinates: Coordinate = [long, lat]
+    const filteredCountryObj = runtimeData[_filteredCountryCode]
+    const _tempRuntimeData = {
+      [_filteredCountryCode]: filteredCountryObj
+    }
+
+    // Zoom the map in...
+    dispatch({ type: 'SET_POSITION', payload: { coordinates: reversedCoordinates, zoom: 3 } })
+
+    // ...and show the data for the clicked country
+    setRuntimeData(_tempRuntimeData)
+  }
+
+  const sortedRuntimeData: DataRow = Object.values(runtimeData).sort((a, b) =>
+    a[primaryColumnName] < b[primaryColumnName] ? 1 : -1
+  )
+
+  if (!sortedRuntimeData) return
+
+  if (geoType === 'world') {
+    return (
       sortedRuntimeData &&
-      sortedRuntimeData.map((country, index) => {
+      sortedRuntimeData.map(country => {
         let coordinates = countryCoordinates[country.uid]
 
         if (!coordinates) return true
 
-        const countryName = displayGeoName(country[state.columns.geo.name])
+        const countryName = displayGeoName(country[geoColumnName])
         const toolTip = applyTooltipsToGeo(countryName, country)
-        const legendColors = applyLegendToRow(country)
+        const legendColors = applyLegendToRow(country, config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
 
-        let primaryKey = state.columns.primary.name
-        if ((Math.floor(Number(country[primaryKey])) === 0 || country[primaryKey] === '') && !state.visual.showBubbleZeros) return
+        if (
+          (Math.floor(Number(country[primaryColumnName])) === 0 || country[primaryColumnName] === '') &&
+          !showBubbleZeros
+        )
+          return
 
         let transform = `translate(${projection([coordinates[1], coordinates[0]])})`
 
@@ -45,9 +104,9 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
               tabIndex={-1}
               key={`circle-${countryName.replace(' ', '')}`}
               className={`bubble country--${countryName}`}
-              cx={Number(projection(coordinates[1], coordinates[0])[0]) || 0} // || 0 handles error on loads where the data isn't ready
+              cx={Number(projection(coordinates[1], coordinates[0])[0]) || 0}
               cy={Number(projection(coordinates[1], coordinates[0])[1]) || 0}
-              r={Number(size(country[primaryKey]))}
+              r={Number(size(country[primaryColumnName]))}
               fill={legendColors[0]}
               stroke={legendColors[0]}
               strokeWidth={1.25}
@@ -57,8 +116,15 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
                 pointerY = e.clientY
               }}
               onPointerUp={e => {
-                if (pointerX && pointerY && e.clientX > pointerX - clickTolerance && e.clientX < pointerX + clickTolerance && e.clientY > pointerY - clickTolerance && e.clientY < pointerY + clickTolerance) {
-                  handleCircleClick(country)
+                if (
+                  pointerX &&
+                  pointerY &&
+                  e.clientX > pointerX - clickTolerance &&
+                  e.clientX < pointerX + clickTolerance &&
+                  e.clientY > pointerY - clickTolerance &&
+                  e.clientY < pointerY + clickTolerance
+                ) {
+                  handleBubbleClick(country)
                   pointerX = undefined
                   pointerY = undefined
                 }
@@ -69,14 +135,14 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
               data-tooltip-html={toolTip}
             />
 
-            {state.visual.extraBubbleBorder && (
+            {extraBubbleBorder && (
               <circle
                 tabIndex={-1}
                 key={`circle-${countryName.replace(' ', '')}`}
                 className='bubble'
-                cx={Number(projection(coordinates[1], coordinates[0])[0]) || 0} // || 0 handles error on loads where the data isn't ready
+                cx={Number(projection(coordinates[1], coordinates[0])[0]) || 0}
                 cy={Number(projection(coordinates[1], coordinates[0])[1]) || 0}
-                r={Number(size(country[primaryKey])) + 1}
+                r={Number(size(country[primaryColumnName])) + 1}
                 fill={'transparent'}
                 stroke={'white'}
                 strokeWidth={0.5}
@@ -85,8 +151,15 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
                   pointerY = e.clientY
                 }}
                 onPointerUp={e => {
-                  if (pointerX && pointerY && e.clientX > pointerX - clickTolerance && e.clientX < pointerX + clickTolerance && e.clientY > pointerY - clickTolerance && e.clientY < pointerY + clickTolerance) {
-                    handleCircleClick(country)
+                  if (
+                    pointerX &&
+                    pointerY &&
+                    e.clientX > pointerX - clickTolerance &&
+                    e.clientX < pointerX + clickTolerance &&
+                    e.clientY > pointerY - clickTolerance &&
+                    e.clientY < pointerY + clickTolerance
+                  ) {
+                    handleBubbleClick(country)
                     pointerX = undefined
                     pointerY = undefined
                   }
@@ -106,21 +179,20 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
           </g>
         )
       })
-    return countries
+    )
   }
 
-  if (state.general.geoType === 'us') {
-    const bubbles =
+  if (geoType === 'us') {
+    return (
       sortedRuntimeData &&
-      sortedRuntimeData.map((item, index) => {
+      sortedRuntimeData.map(item => {
         let stateData = stateCoordinates[item.uid]
-        let primaryKey = state?.columns?.primary?.name
-        if (Number(size(item[primaryKey])) === 0) return
+        if (Number(size(item[primaryColumnName])) === 0) return
 
-        if (item[primaryKey] === null) item[primaryKey] = ''
+        if (item[primaryColumnName] === null) item[primaryColumnName] = ''
 
-        // Return if hiding zeros on the map
-        if ((Math.floor(Number(item[primaryKey])) === 0 || item[primaryKey] === '') && !state.visual.showBubbleZeros) return
+        if ((Math.floor(Number(item[primaryColumnName])) === 0 || item[primaryColumnName] === '') && !showBubbleZeros)
+          return
 
         if (!stateData) return true
         let longitude = Number(stateData.Longitude)
@@ -131,7 +203,7 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
 
         stateName = displayGeoName(stateName)
         const toolTip = applyTooltipsToGeo(stateName, item)
-        const legendColors = applyLegendToRow(item)
+        const legendColors = applyLegendToRow(item, config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
 
         let transform = `translate(${projection([coordinates[1], coordinates[0]])})`
 
@@ -144,9 +216,9 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
               tabIndex={-1}
               key={`circle-${stateName.replace(' ', '')}`}
               className='bubble'
-              cx={projection(coordinates)[0] || 0} // || 0 handles error on loads where the data isn't ready
+              cx={projection(coordinates)[0] || 0}
               cy={projection(coordinates)[1] || 0}
-              r={Number(size(item[primaryKey]))}
+              r={Number(size(item[primaryColumnName]))}
               fill={legendColors[0]}
               stroke={legendColors[0]}
               strokeWidth={1.25}
@@ -156,8 +228,15 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
                 pointerY = e.clientY
               }}
               onPointerUp={e => {
-                if (pointerX && pointerY && e.clientX > pointerX - clickTolerance && e.clientX < pointerX + clickTolerance && e.clientY > pointerY - clickTolerance && e.clientY < pointerY + clickTolerance) {
-                  handleCircleClick(state)
+                if (
+                  pointerX &&
+                  pointerY &&
+                  e.clientX > pointerX - clickTolerance &&
+                  e.clientX < pointerX + clickTolerance &&
+                  e.clientY > pointerY - clickTolerance &&
+                  e.clientY < pointerY + clickTolerance
+                ) {
+                  geoClickHandler(stateName, stateData)
                   pointerX = undefined
                   pointerY = undefined
                 }
@@ -167,14 +246,14 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
               data-tooltip-id={`tooltip__${tooltipId}`}
               data-tooltip-html={toolTip}
             />
-            {state.visual.extraBubbleBorder && (
+            {extraBubbleBorder && (
               <circle
                 tabIndex={-1}
                 key={`circle-${stateName.replace(' ', '')}`}
                 className='bubble'
-                cx={projection(coordinates)[0] || 0} // || 0 handles error on loads where the data isn't ready
+                cx={projection(coordinates)[0] || 0}
                 cy={projection(coordinates)[1] || 0}
-                r={Number(size(item[primaryKey])) + 1}
+                r={Number(size(item[primaryColumnName])) + 1}
                 fill={'transparent'}
                 stroke={'white'}
                 strokeWidth={0.5}
@@ -184,8 +263,15 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
                   pointerY = e.clientY
                 }}
                 onPointerUp={e => {
-                  if (pointerX && pointerY && e.clientX > pointerX - clickTolerance && e.clientX < pointerX + clickTolerance && e.clientY > pointerY - clickTolerance && e.clientY < pointerY + clickTolerance) {
-                    handleCircleClick(state)
+                  if (
+                    pointerX &&
+                    pointerY &&
+                    e.clientX > pointerX - clickTolerance &&
+                    e.clientX < pointerX + clickTolerance &&
+                    e.clientY > pointerY - clickTolerance &&
+                    e.clientY < pointerY + clickTolerance
+                  ) {
+                    geoClickHandler(stateName, stateData)
                     pointerX = undefined
                     pointerY = undefined
                   }
@@ -201,7 +287,7 @@ export const BubbleList = ({ data: dataImport, state, projection, applyLegendToR
 
         return <g key={`group-${stateName.replace(' ', '')}`}>{circle}</g>
       })
-    return bubbles
+    )
   }
 }
 export default BubbleList

package/src/components/CityList.tsx

@@ -1,86 +1,97 @@
-import { useState, useEffect, useContext } from 'react'
-
-import { jsx } from '@emotion/react'
-import { supportedCities } from '../data/supported-geos'
+import { useContext, useEffect, useState } from 'react'
 import { scaleLinear } from 'd3-scale'
-import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from '@visx/glyph'
-import { getFilterControllingStatePicked } from './UsaMap/helpers/map'
-import { titleCase } from '../helpers/titleCase'
-
+import { GlyphCircle, GlyphDiamond, GlyphSquare, GlyphStar, GlyphTriangle } from '@visx/glyph'
 import ConfigContext from '../context'
-import { getGeoStrokeColor } from '../helpers/colors'
-
-const CityList = ({
-  data,
-  geoClickHandler,
-  applyTooltipsToGeo,
-  displayGeoName,
-  applyLegendToRow,
-  setSharedFilterValue,
-  isFilterValueSupported,
-  tooltipId,
-  projection
-}) => {
-  const [citiesData, setCitiesData] = useState({})
-  const { state, topoData, runtimeData, position } = useContext(ConfigContext)
-  if (!projection) return
-
-  useEffect(() => {
-    const citiesDictionary = {}
+import { supportedCities } from '../data/supported-geos'
+import { getFilterControllingStatePicked } from './UsaMap/helpers/map'
+import { displayGeoName, getGeoStrokeColor, SVG_HEIGHT, SVG_PADDING, SVG_WIDTH, titleCase } from '../helpers'
+import useGeoClickHandler from '../hooks/useGeoClickHandler'
+import useApplyTooltipsToGeo from '../hooks/useApplyTooltipsToGeo'
+import { applyLegendToRow } from '../helpers/applyLegendToRow'
+import { getColumnNames } from '../helpers/getColumnNames'
+
+type CityListProps = {
+  setSharedFilterValue: string
+  isFilterValueSupported: boolean
+  tooltipId: string
+  projection: any
+}
 
-    if (data) {
-      Object.keys(data).forEach(key => {
-        const city = data[key]
-        citiesDictionary[city[state.columns.geo.name]] = city
-      })
-    }
+const CityList: React.FC<CityListProps> = ({ setSharedFilterValue, isFilterValueSupported, tooltipId, projection }) => {
+  const {
+    config,
+    topoData,
+    data: runtimeData,
+    position,
+    legendMemo,
+    legendSpecialClassLastMemo,
+    runtimeLegend
+  } = useContext(ConfigContext)
+  const { geoClickHandler } = useGeoClickHandler()
+  const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
+
+  const { geoColumnName, latitudeColumnName, longitudeColumnName, primaryColumnName } = getColumnNames(config.columns)
+  const { additionalCityStyles } = config.visual || []
 
-    setCitiesData(citiesDictionary)
-  }, [data])
+  if (!projection) return
 
-  if (state.general.type === 'bubble') {
-    const maxDataValue = Math.max(...(data ? Object.keys(data).map(key => data[key][state.columns.primary.name]) : [0]))
-    const sortedRuntimeData = Object.values(data).sort((a, b) =>
-      a[state.columns.primary.name] < b[state.columns.primary.name] ? 1 : -1
+  const citiesData = runtimeData
+    ? Object.keys(runtimeData).reduce((acc, key) => {
+        const city = runtimeData[key]
+        acc[city[geoColumnName]] = city
+        return acc
+      }, {})
+    : {}
+
+  if (config.general.type === 'bubble') {
+    const maxDataValue = Math.max(
+      ...(runtimeData ? Object.keys(runtimeData).map(key => runtimeData[key][config.columns.primary.name]) : [0])
+    )
+    const sortedRuntimeData = Object.values(runtimeData).sort((a, b) =>
+      a[primaryColumnName] < b[primaryColumnName] ? 1 : -1
     )
     if (!sortedRuntimeData) return
 
     // Set bubble sizes
-    var size = scaleLinear().domain([1, maxDataValue]).range([state.visual.minBubbleSize, state.visual.maxBubbleSize])
+    var size = scaleLinear().domain([1, maxDataValue]).range([config.visual.minBubbleSize, config.visual.maxBubbleSize])
   }
-  let cityList = Object.keys(citiesData).filter(c => undefined !== c || undefined !== data[c])
+  const cityList = Object.keys(citiesData).filter(c => undefined !== c || undefined !== runtimeData[c])
   if (!cityList) return true
 
   // Cities output
-  const cities = cityList.map((city, i) => {
-    let geoData
-    if (data) {
-      Object.keys(data).forEach(key => {
-        if (city === data[key][state.columns.geo.name]) {
-          geoData = data[key]
+  return cityList.map((city, i) => {
+    let geoData: Object
+    if (runtimeData) {
+      Object.keys(runtimeData).forEach(key => {
+        if (city === runtimeData[key][config.columns.geo.name]) {
+          geoData = runtimeData[key]
         }
       })
     }
     if (!geoData) {
-      geoData = data ? data[city] : undefined
+      geoData = runtimeData ? runtimeData[city] : undefined
     }
     const cityDisplayName = titleCase(displayGeoName(city))
 
-    const legendColors = geoData ? applyLegendToRow(geoData) : data[city] ? applyLegendToRow(data[city]) : false
+    const legendColors = geoData
+      ? applyLegendToRow(geoData, config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
+      : runtimeData[city]
+      ? applyLegendToRow(runtimeData[city], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
+      : false
 
     if (legendColors === false) {
       return true
     }
 
-    const toolTip = applyTooltipsToGeo(cityDisplayName, geoData || data[city])
+    const toolTip = applyTooltipsToGeo(cityDisplayName, geoData || runtimeData[city])
 
-    const radius = state.visual.geoCodeCircleSize || 8
+    const radius = config.visual.geoCodeCircleSize || 8
 
     const additionalProps = {
-      fillOpacity: state.general.type === 'bubble' ? 0.4 : 1
+      fillOpacity: config.general.type === 'bubble' ? 0.4 : 1
     }
 
-    const geoStrokeColor = getGeoStrokeColor(state)
+    const geoStrokeColor = getGeoStrokeColor(config)
 
     const pin = (
       <path
@@ -101,8 +112,8 @@ const CityList = ({
     let transform = ''
 
     if (
-      !geoData?.[state.columns.longitude.name] &&
-      !geoData?.[state.columns.latitude.name] &&
+      !geoData?.[longitudeColumnName] &&
+      !geoData?.[latitudeColumnName] &&
       city &&
       supportedCities[city.toUpperCase()]
     ) {
@@ -111,34 +122,26 @@ const CityList = ({
 
     let needsPointer = false
 
-    if (geoData?.[state.columns.longitude.name] && geoData?.[state.columns.latitude.name]) {
-      let coords = [Number(geoData?.[state.columns.longitude.name]), Number(geoData?.[state.columns.latitude.name])]
+    if (geoData?.[longitudeColumnName] && geoData?.[latitudeColumnName]) {
+      let coords = [Number(geoData?.[longitudeColumnName]), Number(geoData?.[latitudeColumnName])]
       transform = `translate(${projection(coords)})`
       needsPointer = true
     }
 
-    if (
-      geoData?.[state.columns.longitude.name] &&
-      geoData?.[state.columns.latitude.name] &&
-      state.general.geoType === 'single-state'
-    ) {
-      const statePicked = getFilterControllingStatePicked(state, runtimeData)
+    if (geoData?.[longitudeColumnName] && geoData?.[latitudeColumnName] && config.general.geoType === 'single-state') {
+      const statePicked = getFilterControllingStatePicked(config, runtimeData)
       const _statePickedData = topoData?.states?.find(s => s.properties.name === statePicked)
-      // SVG ITEMS
-      const WIDTH = 880
-      const HEIGHT = 500
-      const PADDING = 50
 
       const newProjection = projection.fitExtent(
         [
-          [PADDING, PADDING],
-          [WIDTH - PADDING, HEIGHT - PADDING]
+          [SVG_PADDING, SVG_PADDING],
+          [SVG_WIDTH - SVG_PADDING, SVG_HEIGHT - SVG_PADDING]
         ],
         _statePickedData
       )
-      let coords = [Number(geoData?.[state.columns.longitude.name]), Number(geoData?.[state.columns.latitude.name])]
+      let coords = [Number(geoData?.[longitudeColumnName]), Number(geoData?.[latitudeColumnName])]
       transform = `translate(${newProjection(coords)}) scale(${
-        state.visual.geoCodeCircleSize / (position.zoom > 1 ? position.zoom : 1)
+        config.visual.geoCodeCircleSize / (position.zoom > 1 ? position.zoom : 1)
       })`
       needsPointer = true
     }
@@ -153,8 +156,8 @@ const CityList = ({
       stroke:
         setSharedFilterValue &&
         isFilterValueSupported &&
-        data[city] &&
-        data[city][state.columns.geo.name] === setSharedFilterValue
+        runtimeData[city] &&
+        runtimeData[city][config.columns.geo.name] === setSharedFilterValue
           ? 'rgba(0, 0, 0, 1)'
           : 'rgba(0, 0, 0, 0.4)',
       '&:hover': {
@@ -170,15 +173,15 @@ const CityList = ({
 
     // If we need to add a cursor pointer
     if (
-      (state.columns.navigate && geoData?.[state.columns.navigate.name] && geoData[state.columns.navigate.name]) ||
-      state.tooltips.appearanceType === 'click'
+      (config.columns.navigate && geoData?.[config.columns.navigate.name] && geoData[config.columns.navigate.name]) ||
+      config.tooltips.appearanceType === 'click'
     ) {
       styles.cursor = 'pointer'
     }
 
     const shapeProps = {
       onClick: () => geoClickHandler(cityDisplayName, geoData),
-      size: state.general.type === 'bubble' ? size(geoData[state.columns.primary.name]) : radius * 30,
+      size: config.general.type === 'bubble' ? size(geoData[primaryColumnName]) : radius * 30,
       title: 'Select for more information',
       'data-tooltip-id': `tooltip__${tooltipId}`,
       'data-tooltip-html': toolTip,
@@ -197,9 +200,8 @@ const CityList = ({
       triangle: <GlyphTriangle {...shapeProps} />
     }
 
-    const { additionalCityStyles } = state.visual || []
-    const cityStyle = Object.values(data)
-      .filter(d => additionalCityStyles.some(style => String(d[style.column]) === String(style.value)))
+    const cityStyle = Object.values(runtimeData)
+      .filter(d => additionalCityStyles?.some(style => String(d[style.column]) === String(style.value)))
       .map(d => {
         const conditionsMatched = additionalCityStyles.find(style => String(d[style.column]) === String(style.value))
         return { ...conditionsMatched, ...d }
@@ -210,8 +212,8 @@ const CityList = ({
 
     if (cityStyle !== undefined && cityStyle.shape) {
       if (
-        !geoData?.[state.columns.longitude.name] &&
-        !geoData?.[state.columns.latitude.name] &&
+        !geoData?.[longitudeColumnName] &&
+        !geoData?.[latitudeColumnName] &&
         city &&
         supportedCities[city.toUpperCase()]
       ) {
@@ -224,10 +226,10 @@ const CityList = ({
         )
       }
 
-      if (geoData?.[state.columns.longitude.name] && geoData?.[state.columns.latitude.name]) {
-        const coords = [Number(geoData?.[state.columns.longitude.name]), Number(geoData?.[state.columns.latitude.name])]
+      if (geoData?.[longitudeColumnName] && geoData?.[latitudeColumnName]) {
+        const coords = [Number(geoData?.[longitudeColumnName]), Number(geoData?.[latitudeColumnName])]
         let translate = `translate(${projection(coords)})`
-        console.log(translate, 'translate')
+
         return (
           <g key={i} transform={translate} style={styles} className='geo-point' tabIndex={-1}>
             {cityStyleShapes[cityStyle.shape.toLowerCase()]}
@@ -235,14 +237,14 @@ const CityList = ({
         )
       }
     }
+    if (legendColors?.[0] === '#000000') return
+
     return (
       <g key={i} transform={transform} style={styles} className='geo-point' tabIndex={-1}>
-        {cityStyleShapes[state.visual.cityStyle.toLowerCase()]}
+        {cityStyleShapes[config.visual.cityStyle.toLowerCase()]}
       </g>
     )
   })
-
-  return cities
 }
 
 export default CityList

package/src/components/DataTable.tsx

@@ -10,8 +10,8 @@ import MediaControls from '@cdc/core/components/MediaControls'
 import SkipTo from '@cdc/core/components/elements/SkipTo'
 
 import Loading from '@cdc/core/components/Loading'
-import { navigationHandler } from '../helpers/navigationHandler'
-import ConfigContext from '../context'
+import { navigationHandler } from '../helpers'
+import ConfigContext, { MapDispatchContext } from '../context'
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = props => {
@@ -29,10 +29,10 @@ const DataTable = props => {
     applyLegendToRow,
     displayGeoName,
     formatLegendLocation,
-    tabbingId,
-    setFilteredCountryCode
+    tabbingId
   } = props
 
+  const dispatch = useContext(MapDispatchContext)
   const { currentViewport: viewport } = useContext(ConfigContext)
   const [expanded, setExpanded] = useState(expandDataTable)
   const [sortBy, setSortBy] = useState({ column: 'geo', asc: false })
@@ -181,7 +181,7 @@ const DataTable = props => {
         aria-label='Download this data in a CSV file format.'
         className={`${headerColor} no-border`}
         id={`${skipId}`}
-        data-html2canvas-ignore
+        data-html2canvas-ignore={true}
         role='button'
       >
         Download Data (CSV)
@@ -217,7 +217,7 @@ const DataTable = props => {
   if (!state.data) return <Loading />
 
   const rows = Object.keys(runtimeData)
-    .filter(row => applyLegendToRow(runtimeData[row]))
+    .filter(row => applyLegendToRow(runtimeData[row], state))
     .sort((a, b) => {
       const sortVal = customSort(
         runtimeData[a][state.columns[sortBy.column].name],
@@ -326,7 +326,7 @@ const DataTable = props => {
 
                         if (column === 'geo') {
                           const rowObj = runtimeData[row]
-                          const legendColor = applyLegendToRow(rowObj)
+                          const legendColor = applyLegendToRow(rowObj, state)
 
                           var labelValue
                           if (state.general.geoType !== 'us-county' || state.general.type === 'us-geocode') {
@@ -355,7 +355,7 @@ const DataTable = props => {
                               state.general.type === 'bubble' &&
                               state.general.allowMapZoom &&
                               state.general.geoType === 'world'
-                                ? setFilteredCountryCode(row)
+                                ? dispatch({ type: 'SET_FILTERED_COUNTRY_CODE', payload: row })
                                 : true
                             }
                           >