@cdc/map 4.25.8 → 4.25.10

package/src/components/UsaMap/components/UsaMap.County.tsx

@@ -7,14 +7,17 @@ import Loading from '@cdc/core/components/Loading'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import useMapLayers from '../../../hooks/useMapLayers'
 import ConfigContext from '../../../context'
+import { useLegendMemoContext } from '../../../context/LegendMemoContext'
 import { drawShape, createShapeProperties } from '../helpers/shapes'
-import { getGeoStrokeColor, handleMapAriaLabels, displayGeoName } from '../../../helpers'
+import { getGeoStrokeColor, handleMapAriaLabels, displayGeoName, isLegendItemDisabled } from '../../../helpers'
+import { supportedStatesFipsCodes } from '../../../data/supported-geos'
 import useGeoClickHandler from '../../../hooks/useGeoClickHandler'
 import { applyLegendToRow } from '../../../helpers/applyLegendToRow'
 import useApplyTooltipsToGeo from '../../../hooks/useApplyTooltipsToGeo'
 import { MapConfig } from '../../../types/MapConfig'
 import { DEFAULT_MAP_BACKGROUND } from '../../../helpers/constants'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 const getCountyTopoURL = year => {
   return `https://www.cdc.gov/TemplatePackage/contrib/data/county-topography/cb_${year}_us_county_20m.json`
@@ -131,18 +134,18 @@ const CountyMap = () => {
   const {
     container,
     containerEl,
-    data,
+    runtimeData,
     runtimeFilters,
     runtimeLegend,
     setConfig,
     config,
     tooltipId,
     tooltipRef,
-    legendMemo,
-    legendSpecialClassLastMemo,
-    configUrl
+    interactionLabel
   } = useContext(ConfigContext)
 
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
+
   // CREATE STATE LINES
   const geoStrokeColor = getGeoStrokeColor(config)
   const { geoClickHandler } = useGeoClickHandler()
@@ -200,7 +203,7 @@ const CountyMap = () => {
   const canvasRef = useRef()
 
   // If runtimeData is not defined, show loader
-  if (!data || !isTopoReady(topoData, config, runtimeFilters)) {
+  if (!runtimeData || !isTopoReady(topoData, config, runtimeFilters)) {
     return (
       <div style={{ height: 300 }}>
         <Loading />
@@ -208,11 +211,18 @@ const CountyMap = () => {
     )
   }
 
-  const runtimeKeys = Object.keys(data)
+  const runtimeKeys = Object.keys(runtimeData)
   const lineWidth = 1
 
   const onReset = () => {
-    publishAnalyticsEvent('map_reset_zoom_level', 'click', configUrl, 'map')
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'map_reset_zoom_level',
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config)
+    })
     setConfig({
       ...config,
       mapPosition: { coordinates: [0, 30], zoom: 1 }
@@ -256,8 +266,8 @@ const CountyMap = () => {
             break
           }
         }
-        if (county && data[county.id]) {
-          geoClickHandler(displayGeoName(county.id), data[county.id])
+        if (county && runtimeData[county.id]) {
+          geoClickHandler(displayGeoName(county.id), runtimeData[county.id])
         }
       }
 
@@ -271,19 +281,36 @@ const CountyMap = () => {
 
       // Redraw with focus on state
       setFocus({ id: clickedState.id, index: focusIndex, center: geoCentroid(clickedState), feature: clickedState })
-      publishAnalyticsEvent('map_zoomed_in', 'click', `${configUrl}|zoom_level_3|${clickedState.properties.name}`, 'map')
-
+      publishAnalyticsEvent({
+        vizType: config.type,
+        vizSubType: getVizSubType(config),
+        eventType: `zoom_in`,
+        eventAction: 'click',
+        eventLabel: interactionLabel,
+        vizTitle: getVizTitle(config),
+        specifics: `zoom_level: 3, location: ${clickedState.properties.name}`
+      })
     }
     if (config.general.type === 'us-geocode') {
       const geoRadius = (config.visual.geoCodeCircleSize || 5) * (focus.id ? 2 : 1)
       let clickedGeo
       for (let i = 0; i < runtimeKeys.length; i++) {
         const pixelCoords = topoData.projection([
-          data[runtimeKeys[i]][config.columns.longitude.name],
-          data[runtimeKeys[i]][config.columns.latitude.name]
+          runtimeData[runtimeKeys[i]][config.columns.longitude.name],
+          runtimeData[runtimeKeys[i]][config.columns.latitude.name]
         ])
-        if (pixelCoords && Math.sqrt(Math.pow(pixelCoords[0] - x, 2) + Math.pow(pixelCoords[1] - y, 2)) < geoRadius) {
-          clickedGeo = data[runtimeKeys[i]]
+        if (
+          pixelCoords &&
+          Math.sqrt(Math.pow(pixelCoords[0] - x, 2) + Math.pow(pixelCoords[1] - y, 2)) < geoRadius &&
+          !isLegendItemDisabled(
+            runtimeData[runtimeKeys[i]],
+            runtimeLegend,
+            legendMemo,
+            legendSpecialClassLastMemo,
+            config
+          )
+        ) {
+          clickedGeo = runtimeData[runtimeKeys[i]]
           break
         }
       }
@@ -324,7 +351,7 @@ const CountyMap = () => {
         if (
           !isNaN(currentTooltipIndex) &&
           applyLegendToRow(
-            data[topoData.mapData[currentTooltipIndex].id],
+            runtimeData[topoData.mapData[currentTooltipIndex].id],
             config,
             runtimeLegend,
             legendMemo,
@@ -332,7 +359,7 @@ const CountyMap = () => {
           )
         ) {
           context.fillStyle = applyLegendToRow(
-            data[topoData.mapData[currentTooltipIndex].id],
+            runtimeData[topoData.mapData[currentTooltipIndex].id],
             config,
             runtimeLegend,
             legendMemo,
@@ -369,10 +396,10 @@ const CountyMap = () => {
         }
 
         // If the hovered county is found, show the tooltip for that county, otherwise hide the tooltip
-        if (county && data[county.id]) {
-          if (applyLegendToRow(data[county.id], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)) {
+        if (county && runtimeData[county.id]) {
+          if (applyLegendToRow(runtimeData[county.id], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)) {
             let fillColor = applyLegendToRow(
-              data[county.id],
+              runtimeData[county.id],
               config,
               runtimeLegend,
               legendMemo,
@@ -389,6 +416,24 @@ const CountyMap = () => {
             context.stroke()
           }
 
+          // Track hover analytics event if this is a new location
+          if (isNaN(currentTooltipIndex) || currentTooltipIndex !== countyIndex) {
+            const countyName = displayGeoName(county.id).replace(/[^a-zA-Z0-9]/g, ' ')
+            const stateFips = county.id.slice(0, 2)
+            const stateName = supportedStatesFipsCodes[stateFips]?.replace(/[^a-zA-Z0-9]/g, '_') || 'unknown'
+            const locationName = `${countyName}, ${stateName}`
+            publishAnalyticsEvent({
+              vizType: config.type,
+              vizSubType: getVizSubType(config),
+              eventType: `map_hover`,
+              eventAction: 'hover',
+              eventLabel: interactionLabel,
+              vizTitle: getVizTitle(config),
+              location: displayGeoName(county.id),
+              specifics: `location: ${locationName?.toLowerCase()}`
+            })
+          }
+
           tooltipRef.current.style.display = 'block'
           tooltipRef.current.style.top = tooltipY + 'px'
           if (tooltipX > containerBounds.width / 2) {
@@ -398,7 +443,7 @@ const CountyMap = () => {
             tooltipRef.current.style.transform = 'translate(0, -50%)'
             tooltipRef.current.style.left = tooltipX + 5 + 'px'
           }
-          tooltipRef.current.innerHTML = applyTooltipsToGeo(displayGeoName(county.id), data[county.id])
+          tooltipRef.current.innerHTML = applyTooltipsToGeo(displayGeoName(county.id), runtimeData[county.id])
           tooltipRef.current.setAttribute('data-index', countyIndex)
         } else {
           tooltipRef.current.style.display = 'none'
@@ -409,8 +454,8 @@ const CountyMap = () => {
       // Handle geo map hover
       if (!isNaN(currentTooltipIndex)) {
         const pixelCoords = topoData.projection([
-          data[runtimeKeys[currentTooltipIndex]][config.columns.longitude.name],
-          data[runtimeKeys[currentTooltipIndex]][config.columns.latitude.name]
+          runtimeData[runtimeKeys[currentTooltipIndex]][config.columns.longitude.name],
+          runtimeData[runtimeKeys[currentTooltipIndex]][config.columns.latitude.name]
         ])
         if (pixelCoords && Math.sqrt(Math.pow(pixelCoords[0] - x, 2) + Math.pow(pixelCoords[1] - y, 2)) < geoRadius) {
           return // The user is still hovering over the previous geo point, don't redraw tooltip
@@ -424,17 +469,30 @@ const CountyMap = () => {
       let hoveredGeoIndex
       for (let i = 0; i < runtimeKeys.length; i++) {
         const pixelCoords = topoData.projection([
-          data[runtimeKeys[i]][config.columns.longitude.name],
-          data[runtimeKeys[i]][config.columns.latitude.name]
+          runtimeData[runtimeKeys[i]][config.columns.longitude.name],
+          runtimeData[runtimeKeys[i]][config.columns.latitude.name]
         ])
         let includedShapes = ['circle', 'diamond', 'star', 'triangle', 'square'].includes(config.visual.cityStyle)
         if (
           includedShapes &&
           pixelCoords &&
           Math.sqrt(Math.pow(pixelCoords[0] - x, 2) + Math.pow(pixelCoords[1] - y, 2)) < geoRadius &&
-          applyLegendToRow(data[runtimeKeys[i]], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
+          applyLegendToRow(
+            runtimeData[runtimeKeys[i]],
+            config,
+            runtimeLegend,
+            legendMemo,
+            legendSpecialClassLastMemo
+          ) &&
+          !isLegendItemDisabled(
+            runtimeData[runtimeKeys[i]],
+            runtimeLegend,
+            legendMemo,
+            legendSpecialClassLastMemo,
+            config
+          )
         ) {
-          hoveredGeo = data[runtimeKeys[i]]
+          hoveredGeo = runtimeData[runtimeKeys[i]]
           hoveredGeoIndex = i
           break
         }
@@ -443,9 +501,10 @@ const CountyMap = () => {
           const distance = Math.hypot(pixelCoords[0] - x, pixelCoords[1] - y)
           if (
             distance < 15 &&
-            applyLegendToRow(data[runtimeKeys[i]], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
+            applyLegendToRow(runtimeData[runtimeKeys[i]], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo) &&
+            !isLegendItemDisabled(runtimeData[runtimeKeys[i]], runtimeLegend, legendMemo, legendSpecialClassLastMemo, config)
           ) {
-            hoveredGeo = data[runtimeKeys[i]]
+            hoveredGeo = runtimeData[runtimeKeys[i]]
             hoveredGeoIndex = i
             break
           }
@@ -453,6 +512,21 @@ const CountyMap = () => {
       }
 
       if (hoveredGeo) {
+        // Track hover analytics event if this is a new location
+        if (isNaN(currentTooltipIndex) || currentTooltipIndex !== hoveredGeoIndex) {
+          const locationName = displayGeoName(hoveredGeo[config.columns.geo.name]).replace(/[^a-zA-Z0-9]/g, '_')
+          publishAnalyticsEvent({
+            vizType: config.type,
+            vizSubType: getVizSubType(config),
+            eventType: `map_hover`,
+            eventAction: 'hover',
+            eventLabel: interactionLabel,
+            vizTitle: getVizTitle(config),
+            location: displayGeoName(hoveredGeo[config.columns.geo.name]),
+            specifics: `location: ${locationName?.toLowerCase()}`
+          })
+        }
+
         tooltipRef.current.style.display = 'block'
         tooltipRef.current.style.top = tooltipY + 'px'
         if (tooltipX > containerBounds.width / 2) {
@@ -529,7 +603,7 @@ const CountyMap = () => {
         if (!focus.id && config.general.type === 'us-geocode' && geo.id.length > 2) return
 
         // Gets numeric data associated with the topo data for this state/county
-        const geoData = data[geo.id]
+        const geoData = runtimeData[geo.id]
 
         // Renders state/county
         const legendValues =
@@ -574,7 +648,7 @@ const CountyMap = () => {
         context.strokeStyle = geoStrokeColor
         const geoRadius = (config.visual.geoCodeCircleSize || 5) * (focus.id ? 2 : 1)
         const { additionalCityStyles } = config.visual || []
-        const cityStyles = Object.values(data)
+        const cityStyles = Object.values(runtimeData)
           .filter(d => additionalCityStyles.some(style => String(d[style.column]) === String(style.value)))
           .map(d => {
             const conditionsMatched = additionalCityStyles.find(
@@ -592,7 +666,7 @@ const CountyMap = () => {
 
           if (cityPixelCoords) {
             const legendValues = applyLegendToRow(
-              data[city?.value],
+              runtimeData[city?.value],
               config,
               runtimeLegend,
               legendMemo,
@@ -613,13 +687,13 @@ const CountyMap = () => {
           const citiesList = new Set(cityStyles.map(item => item.value))
 
           const pixelCoords = topoData.projection([
-            data[key][config.columns.longitude.name],
-            data[key][config.columns.latitude.name]
+            runtimeData[key][config.columns.longitude.name],
+            runtimeData[key][config.columns.latitude.name]
           ])
           if (pixelCoords && !citiesList.has(key)) {
             const legendValues =
-              data[key] !== undefined
-                ? applyLegendToRow(data[key], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
+              runtimeData[key] !== undefined
+                ? applyLegendToRow(runtimeData[key], config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
                 : false
             if (legendValues) {
               if (legendValues?.[0] === '#000000' || legendValues?.[0] === DEFAULT_MAP_BACKGROUND) return

package/src/components/UsaMap/components/UsaMap.Region.tsx

@@ -7,7 +7,10 @@ import { Mercator } from '@visx/geo'
 
 // Cdc Components
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 import ConfigContext from '../../../context'
+import { useLegendMemoContext } from '../../../context/LegendMemoContext'
 import Annotation from '../../Annotation'
 
 // Data
@@ -51,7 +54,8 @@ const Rect: React.FC<RectProps> = ({ label, text, stroke, strokeWidth, ...props
 }
 
 const UsaRegionMap = () => {
-  const { data, config, tooltipId, legendMemo, legendSpecialClassLastMemo, runtimeLegend } = useContext(ConfigContext)
+  const { runtimeData, config, tooltipId, runtimeLegend, interactionLabel } = useContext(ConfigContext)
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
   const [focusedStates, setFocusedStates] = useState(null)
   const { geoClickHandler } = useGeoClickHandler()
   const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
@@ -75,10 +79,10 @@ const UsaRegionMap = () => {
 
   useEffect(() => {
     // Territories need to show up if they're in the data at all, not just if they're "active". That's why this is different from Cities
-    const territoriesList = territoriesKeys.filter(key => data[key])
+    const territoriesList = territoriesKeys.filter(key => runtimeData[key])
 
     setTerritoriesData(territoriesList)
-  }, [data])
+  }, [runtimeData])
 
   if (!focusedStates) {
     return <></>
@@ -90,7 +94,7 @@ const UsaRegionMap = () => {
   const territories = territoriesData.map(territory => {
     const Shape = Rect
 
-    const territoryData = data[territory]
+    const territoryData = runtimeData[territory]
 
     let toolTip: string
 
@@ -162,7 +166,7 @@ const UsaRegionMap = () => {
 
       if (!geoKey) return
 
-      const geoData = data[geoKey]
+      const geoData = runtimeData[geoKey]
 
       let legendColors
       // Once we receive data for this geographic item, setup variables.
@@ -215,6 +219,20 @@ const UsaRegionMap = () => {
             data-tooltip-id={`tooltip__${tooltipId}`}
             data-tooltip-html={toolTip}
             tabIndex={-1}
+            onMouseEnter={() => {
+              // Track hover analytics event if this is a new location
+              const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
+              publishAnalyticsEvent({
+                vizType: config.type,
+                vizSubType: getVizSubType(config),
+                eventType: `map_hover`,
+                eventAction: 'hover',
+                eventLabel: interactionLabel,
+                vizTitle: getVizTitle(config),
+                location: geoDisplayName,
+                specifics: `location: ${locationName?.toLowerCase()}`
+              })
+            }}
           >
             <path tabIndex={-1} className='single-geo' stroke={geoStrokeColor} strokeWidth={1} d={path} />
             <g id={`region-${index + 1}-label`}>

package/src/components/UsaMap/components/UsaMap.SingleState.tsx

@@ -41,7 +41,7 @@ const SingleStateMap: React.FC = () => {
   } = useContext<MapContext>(ConfigContext)
 
   const dispatch = useContext(MapDispatchContext)
-  const { handleMoveEnd, handleZoomIn, handleZoomOut, handleReset, projection } = useStateZoom(topoData)
+  const { handleMoveEnd, handleZoomIn, handleZoomOut, handleZoomReset, projection } = useStateZoom(topoData)
 
   // Memoize statesPicked to prevent creating new arrays on every render
   const statesPicked = useMemo(() => {
@@ -70,7 +70,7 @@ const SingleStateMap: React.FC = () => {
         dispatch({ type: 'SET_TOPO_DATA', payload: response })
       })
     }
-  }, [runtimeFilters?.length, topoData?.year])
+  }, [config.general.countyCensusYear, config.general.filterControlsCountyYear, JSON.stringify(runtimeFilters)])
 
   if (!isTopoReady(topoData, config, runtimeFilters)) {
     return (
@@ -129,7 +129,7 @@ const SingleStateMap: React.FC = () => {
   }
   return (
     <ErrorBoundary component='SingleStateMap'>
-      {statesPicked.length && config.general.allowMapZoom && statesPicked.some(sp => sp.fipsCode) && (
+      {!!statesPicked.length && config.general.allowMapZoom && statesPicked.some(sp => sp.fipsCode) && (
         <svg
           viewBox={SVG_VIEWBOX}
           preserveAspectRatio='xMinYMin'
@@ -192,7 +192,7 @@ const SingleStateMap: React.FC = () => {
           </ZoomableGroup>
         </svg>
       )}
-      {statesPicked && !config.general.allowMapZoom && statesPicked.some(sp => sp.fipsCode) && (
+      {!!statesPicked && !config.general.allowMapZoom && statesPicked.some(sp => sp.fipsCode) && (
         <svg
           viewBox={SVG_VIEWBOX}
           preserveAspectRatio='xMinYMin'
@@ -262,7 +262,7 @@ const SingleStateMap: React.FC = () => {
             fontSize={18}
             style={{ fontSize: '28px', height: '18px' }}
           >
-            {config.general.noStateFoundMessage}
+            {config.general.noDataMessage}
           </Text>
         </svg>
       )}
@@ -270,7 +270,7 @@ const SingleStateMap: React.FC = () => {
         // prettier-ignore
         handleZoomIn={handleZoomIn}
         handleZoomOut={handleZoomOut}
-        handleReset={handleReset}
+        handleZoomReset={handleZoomReset}
       />
     </ErrorBoundary>
   )

package/src/components/UsaMap/components/UsaMap.State.tsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useContext, useRef } from 'react'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 // United States Topojson resources
 import hexTopoJSON from '../data/us-hex-topo.json'
@@ -20,6 +22,7 @@ import Annotation from '../../Annotation'
 import Territory from './Territory'
 
 import ConfigContext, { MapDispatchContext } from '../../../context'
+import { useLegendMemoContext } from '../../../context/LegendMemoContext'
 import { MapContext } from '../../../types/MapContext'
 import { checkColorContrast, getContrastColor, outlinedTextColor } from '@cdc/core/helpers/cove/accessibility'
 import TerritoriesSection from './TerritoriesSection'
@@ -69,20 +72,21 @@ const nudges = {
 
 const UsaMap = () => {
   const {
-    data,
+    runtimeData,
     setSharedFilterValue,
     config,
     setConfig,
     tooltipId,
     mapId,
     logo,
-    legendMemo,
-    legendSpecialClassLastMemo,
     currentViewport,
     translate,
-    runtimeLegend
+    runtimeLegend,
+    interactionLabel
   } = useContext<MapContext>(ConfigContext)
 
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
+
   let isFilterValueSupported = false
   const { general, columns, tooltips, hexMap, map, annotations } = config
   const { displayAsHex } = general
@@ -120,14 +124,14 @@ const UsaMap = () => {
 
   const legendMemoUpdated = focusedStates?.every(geo => {
     const geoKey = geo.properties.iso
-    const geoData = data[geoKey]
+    const geoData = runtimeData[geoKey]
     const hash = hashObj(geoData)
     return legendMemo.current.has(hash)
   })
 
   // we use dataRef so that we can use the old data when legendMemo has not been updated yet
   // prevents flickering of the map when filter is changed
-  if (legendMemoUpdated) dataRef.current = data
+  if (legendMemoUpdated) dataRef.current = runtimeData
 
   useEffect(() => {
     const fetchData = async () => {
@@ -153,10 +157,10 @@ const UsaMap = () => {
       setTerritoriesData(territoriesKeys)
     } else {
       // Territories need to show up if they're in the data at all, not just if they're "active". That's why this is different from Cities
-      const territoriesList = territoriesKeys.filter(key => data?.[key])
+      const territoriesList = territoriesKeys.filter(key => runtimeData?.[key])
       setTerritoriesData(territoriesList)
     }
-  }, [data, dataRef.current, general.territoriesAlwaysShow])
+  }, [runtimeData, dataRef.current, general.territoriesAlwaysShow])
 
   const geoStrokeColor = getGeoStrokeColor(config)
   const geoFillColor = getGeoFillColor(config)
@@ -164,7 +168,7 @@ const UsaMap = () => {
   const territories = territoriesData.map((territory, territoryIndex) => {
     const Shape = displayAsHex ? Territory.Hexagon : Territory.Rectangle
 
-    const territoryData = data?.[territory]
+    const territoryData = runtimeData?.[territory]
 
     let toolTip
 
@@ -290,7 +294,7 @@ const UsaMap = () => {
 
       if (!geoKey) return
 
-      const geoData = data?.[geoKey]
+      const geoData = runtimeData?.[geoKey]
 
       let legendColors
 
@@ -440,6 +444,20 @@ const UsaMap = () => {
               data-tooltip-id={`tooltip__${tooltipId}`}
               data-tooltip-html={tooltip}
               tabIndex={-1}
+              onMouseEnter={() => {
+                // Track hover analytics event if this is a new location
+                const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
+                publishAnalyticsEvent({
+                  vizType: config.type,
+                  vizSubType: getVizSubType(config),
+                  eventType: `map_hover`,
+                  eventAction: 'hover',
+                  eventLabel: interactionLabel,
+                  vizTitle: getVizTitle(config),
+                  location: geoDisplayName,
+                  specifics: `location: ${locationName?.toLowerCase()}`
+                })
+              }}
             >
               {/* state path */}
               <path tabIndex={-1} className='single-geo' strokeWidth={1} d={path} />

package/src/components/UsaMap/helpers/map.ts

@@ -96,7 +96,7 @@ export const hasMoreThanFromHash = (data: { [key: string]: any }): boolean => {
   return otherKeys.length > 0
 }
 
-export const getFilterControllingStatesPicked = (state, runtimeData) => {
+export const getFilterControllingStatesPicked = (state, runtimeData): string[] => {
   if (!state.general.filterControlsStatesPicked || !runtimeData) {
     return state?.general?.statesPicked?.map(sp => sp.stateName) || []
   } else {
@@ -111,7 +111,7 @@ export const getFilterControllingStatesPicked = (state, runtimeData) => {
       } else if (statesPickedFromFilter) {
         return [statesPickedFromFilter]
       } else {
-        return state?.general?.statesPicked?.map(sp => sp.stateName) || ['Alabama']
+        return state?.general?.statesPicked?.map(sp => sp.stateName) || []
       }
     }
     return state?.general?.statesPicked?.map(sp => sp.stateName) || []