@cdc/map 4.25.7 → 4.25.10

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

@@ -1,10 +1,13 @@
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 import ConfigContext from '../../../../context'
+import { useLegendMemoContext } from '../../../../context/LegendMemoContext'
 import { MapContext } from '../../../../types/MapContext'
 import { getGeoFillColor, displayGeoName } from '../../../../helpers'
 import useApplyTooltipsToGeo from '../../../../hooks/useApplyTooltipsToGeo'
 import { applyLegendToRow } from '../../../../helpers/applyLegendToRow'
 import useGeoClickHandler, { geoClickHandler } from '././../../../../hooks/useGeoClickHandler'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 interface CountyOutputProps {
   counties: any[]
@@ -15,14 +18,15 @@ interface CountyOutputProps {
 }
 
 const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoStrokeColor, tooltipId }) => {
-  const { config, data, legendMemo, legendSpecialClassLastMemo, runtimeLegend } = useContext<MapContext>(ConfigContext)
+  const { config, runtimeData, runtimeLegend, interactionLabel } = useContext<MapContext>(ConfigContext)
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
   const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
   const geoFillColor = getGeoFillColor(config)
   const { geoClickHandler } = useGeoClickHandler()
 
   return (
     <>
-      {counties.map(county => {
+      {counties.map((county, countyIndex) => {
         // Map the name from the geo data with the appropriate key for the processed data
         const geoKey = county.id
 
@@ -30,7 +34,7 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
 
         const countyPath = path(county)
 
-        const geoData = data[county.id]
+        const geoData = runtimeData[county.id]
         let legendColors
 
         // Once we receive data for this geographic item, setup variables.
@@ -68,13 +72,26 @@ const CountyOutput: React.FC<CountyOutputProps> = ({ path, counties, scale, geoS
           return (
             <g
               key={`key--${county.id}`}
-              className={`county county--${geoDisplayName.split(' ').join('')} county--${
-                geoData[config.columns.geo.name]
-              }`}
+              className={`county county--${geoDisplayName.split(' ').join('')} county--${geoData[config.columns.geo.name]
+                }`}
               style={styles}
               onClick={() => geoClickHandler(geoDisplayName, geoData)}
               data-tooltip-id={`tooltip__${tooltipId}`}
               data-tooltip-html={toolTip}
+              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}

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

@@ -1,37 +1,43 @@
 import { useContext } from 'react'
-import { mesh, Topology } from 'topojson-client'
+import { Topology } from 'topojson-client'
 import ConfigContext from '../../../../context'
-import { getGeoFillColor, getGeoStrokeColor } from '../../../../helpers/colors'
+import { getGeoStrokeColor } from '../../../../helpers/colors'
+import { getStatesPicked } from '../../../../helpers/getStatesPicked'
 
 type StateOutputProps = {
   topoData: Topology
   path: any
   scale: any
+  runtimeData?: any
 }
 
-const StateOutput: React.FC<StateOutputProps> = ({ topoData, path, scale, stateToShow }: StateOutputProps) => {
+const StateOutput: React.FC<StateOutputProps> = ({ topoData, path, scale, runtimeData }: StateOutputProps) => {
   const { config } = useContext(ConfigContext)
-  if (!topoData?.objects?.states) return null
-  let geo = topoData.objects.states.geometries.filter(s => {
-    return s.properties.name === config.general.statePicked.stateName
+  if (!topoData?.states) return null
+
+  // Use filter-aware state selection instead of direct config access
+  const statesPickedData = getStatesPicked(config, runtimeData)
+  const stateNames = statesPickedData.map(sp => sp.stateName)
+
+  const statesPicked = topoData.states.filter(s => {
+    return stateNames.includes(s.properties.name)
   })
 
   const geoStrokeColor = getGeoStrokeColor(config)
-  const geoFillColor = getGeoFillColor(config)
 
-  let stateLines = path(mesh(topoData, geo[0]))
+  const stateLines = statesPicked.map(s => path(s.geometry))
 
-  return (
+  return stateLines.map((line, index) => (
     <g
-      key={'single-state'}
-      className='single-state'
-      style={{ fill: geoFillColor }}
+      key={`single-state-${index}`}
+      className='single-state pe-none'
+      style={{ fill: 'transparent' }}
       stroke={geoStrokeColor}
-      strokeWidth={0.95 / scale}
+      strokeWidth={2 / scale}
     >
-      <path tabIndex={-1} className='state-path' d={stateLines} />
+      <path tabIndex={-1} className='state-path' d={line} />
     </g>
-  )
+  ))
 }
 
 export default StateOutput

package/src/components/UsaMap/components/TerritoriesSection.tsx

@@ -55,7 +55,7 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
           <div className='d-flex flex-wrap' style={{ columnGap: '1.5rem' }}>
             {(usTerritories.length > 0 || config.general.territoriesAlwaysShow) && (
               <div>
-                <h5 className='territories-label'>U.S. territories</h5>
+                <span className='territories-label'>U.S. territories</span>
                 <span
                   className={`mt-2 ${isMobileViewport ? 'mb-3' : 'mb-4'} d-flex territories`}
                   style={{ minWidth: `${usTerritories.length * SVG_WIDTH + (usTerritories.length - 1) * SVG_GAP}px` }}
@@ -66,7 +66,7 @@ const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, lo
             )}
             {(freelyAssociatedStates.length > 0 || config.general.territoriesAlwaysShow) && (
               <div>
-                <h5 className='territories-label'>Freely associated states</h5>
+                <span className='territories-label'>Freely associated states</span>
                 <span
                   className={`mt-2 ${isMobileViewport ? 'mb-3' : 'mb-4'} d-flex territories`}
                   style={{

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

@@ -7,13 +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`
@@ -130,17 +134,18 @@ const CountyMap = () => {
   const {
     container,
     containerEl,
-    data,
+    runtimeData,
     runtimeFilters,
     runtimeLegend,
     setConfig,
     config,
     tooltipId,
     tooltipRef,
-    legendMemo,
-    legendSpecialClassLastMemo
+    interactionLabel
   } = useContext(ConfigContext)
 
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
+
   // CREATE STATE LINES
   const geoStrokeColor = getGeoStrokeColor(config)
   const { geoClickHandler } = useGeoClickHandler()
@@ -198,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 />
@@ -206,10 +211,18 @@ const CountyMap = () => {
     )
   }
 
-  const runtimeKeys = Object.keys(data)
+  const runtimeKeys = Object.keys(runtimeData)
   const lineWidth = 1
 
   const onReset = () => {
+    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 }
@@ -253,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])
         }
       }
 
@@ -268,17 +281,36 @@ const CountyMap = () => {
 
       // Redraw with focus on state
       setFocus({ id: clickedState.id, index: focusIndex, center: geoCentroid(clickedState), feature: clickedState })
+      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
         }
       }
@@ -319,7 +351,7 @@ const CountyMap = () => {
         if (
           !isNaN(currentTooltipIndex) &&
           applyLegendToRow(
-            data[topoData.mapData[currentTooltipIndex].id],
+            runtimeData[topoData.mapData[currentTooltipIndex].id],
             config,
             runtimeLegend,
             legendMemo,
@@ -327,7 +359,7 @@ const CountyMap = () => {
           )
         ) {
           context.fillStyle = applyLegendToRow(
-            data[topoData.mapData[currentTooltipIndex].id],
+            runtimeData[topoData.mapData[currentTooltipIndex].id],
             config,
             runtimeLegend,
             legendMemo,
@@ -364,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,
@@ -384,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) {
@@ -393,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'
@@ -404,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
@@ -419,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
         }
@@ -438,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
           }
@@ -448,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) {
@@ -524,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 =
@@ -569,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(
@@ -587,7 +666,7 @@ const CountyMap = () => {
 
           if (cityPixelCoords) {
             const legendValues = applyLegendToRow(
-              data[city?.value],
+              runtimeData[city?.value],
               config,
               runtimeLegend,
               legendMemo,
@@ -608,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`}>