@cdc/map 4.25.8 → 4.25.11

package/src/components/WorldMap/WorldMap.tsx

@@ -3,6 +3,7 @@ import { geoMercator } from 'd3-geo'
 import { Mercator } from '@visx/geo'
 import { feature } from 'topojson-client'
 import ConfigContext, { MapDispatchContext } from '../../context'
+import { useLegendMemoContext } from '../../context/LegendMemoContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ZoomableGroup from '../ZoomableGroup'
 import Geo from '../Geo'
@@ -10,6 +11,7 @@ import CityList from '../CityList'
 import BubbleList from '../BubbleList'
 import ZoomControls from '../ZoomControls'
 import { supportedCountries } from '../../data/supported-geos'
+import { getCountriesPicked } from '../../helpers/getCountriesPicked'
 import {
   getGeoFillColor,
   getGeoStrokeColor,
@@ -23,39 +25,51 @@ import {
 } from '../../helpers'
 import useGeoClickHandler from '../../hooks/useGeoClickHandler'
 import useApplyTooltipsToGeo from '../../hooks/useApplyTooltipsToGeo'
+import useCountryZoom from '../../hooks/useCountryZoom'
 import generateRuntimeData from '../../helpers/generateRuntimeData'
 import { applyLegendToRow } from '../../helpers/applyLegendToRow'
 
 import './worldMap.styles.css'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 let projection = geoMercator()
 
+const GRAYED_OUT_COLOR = '#d3d3d3'
+
+type MapPosition = { coordinates: number[]; zoom: number }
+
 const WorldMap = () => {
   // prettier-ignore
   const {
-    data,
-    position,
-    setRuntimeData,
+    runtimeData,
+    position: mapPosition,
     config,
     tooltipId,
     runtimeLegend,
-    legendMemo,
-    legendSpecialClassLastMemo,
     interactionLabel
   } = useContext(ConfigContext)
 
+  // Type assertion: position from context is actually the map viewport position, not legend position
+  const position = mapPosition as unknown as MapPosition
+
+  const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
+
   const { type, allowMapZoom } = config.general
 
   const [world, setWorld] = useState(null)
   const { geoClickHandler } = useGeoClickHandler()
   const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
+
+  const { centerOnCountries } = useCountryZoom(world)
+
   const dispatch = useContext(MapDispatchContext)
 
   useEffect(() => {
     const fetchData = async () => {
       import(/* webpackChunkName: "world-topo" */ './data/world-topo.json').then(topoJSON => {
-        setWorld(feature(topoJSON, topoJSON.objects.countries).features)
+        const worldFeatures = feature(topoJSON, topoJSON.objects.countries).features
+        setWorld(worldFeatures)
       })
     }
     fetchData()
@@ -65,38 +79,118 @@ const WorldMap = () => {
     return <></>
   }
 
-  const handleReset = () => {
+  // Filter countries based on selection
+  const getFilteredWorld = () => {
+    if (!config.general.countriesPicked || config.general.countriesPicked.length === 0) {
+      return world // Show all countries if none selected
+    }
+
+    // Always show all countries when multi-country mode is active
+    // Individual country styling will handle hide/grayed-out states
+    return world
+  }
+
+  const filteredWorld = getFilteredWorld()
+
+  const handleFiltersReset = () => {
     const newRuntimeData = generateRuntimeData(config)
-    publishAnalyticsEvent('map_reset_zoom_level', 'click', interactionLabel, 'map')
-    dispatch({ type: 'SET_POSITION', payload: { coordinates: [0, 30], zoom: 1 } })
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'map_filter_reset',
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config)
+    })
     dispatch({ type: 'SET_FILTERED_COUNTRY_CODE', payload: '' })
-    setRuntimeData(newRuntimeData)
+    dispatch({ type: 'SET_RUNTIME_DATA', payload: newRuntimeData })
+  }
+
+  const handleZoomReset = _setRuntimeData => {
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'map_reset_zoom_level',
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config)
+    })
+
+    // If countries are selected, center on them; otherwise, use default world position
+    const countriesPicked = getCountriesPicked(config)
+
+    if (countriesPicked && countriesPicked.length > 0) {
+      centerOnCountries('reset')
+    } else {
+      dispatch({ type: 'SET_POSITION', payload: { coordinates: [0, 30], zoom: 1 } })
+    }
   }
 
   const handleZoomIn = position => {
     if (position.zoom >= 4) return
-    publishAnalyticsEvent(
-      'map_zoomed_in',
-      'click',
-      `${interactionLabel}|zoom_level_${Math.floor(position.zoom * 1.5)}|${position.coordinates}`,
-      'map'
-    )
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: `zoom_in`,
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      specifics: `zoom_level: ${Math.floor(position.zoom * 1.5)}`
+    })
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: `zoom_in`,
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      specifics: `location: ${position.coordinates}`
+    })
     dispatch({ type: 'SET_POSITION', payload: { coordinates: position.coordinates, zoom: position.zoom * 1.5 } })
   }
 
   const handleZoomOut = position => {
     if (position.zoom <= 1) return
-    publishAnalyticsEvent(
-      'map_zoomed_out',
-      'click',
-      `${interactionLabel}|zoom_level_${Math.floor(position.zoom / 1.5)}|${position.coordinates}`,
-      'map'
-    )
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: `zoom_out`,
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      specifics: `zoom_level: ${Math.floor(position.zoom / 1.5)}`
+    })
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: `zoom_out`,
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      specifics: `location: ${position.coordinates}`
+    })
     dispatch({ type: 'SET_POSITION', payload: { coordinates: position.coordinates, zoom: position.zoom / 1.5 } })
   }
 
   const handleMoveEnd = position => {
-    publishAnalyticsEvent('map_panned', 'drag', interactionLabel, 'map')
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'map_panned',
+      eventAction: 'drag',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      specifics: `zoom: ${position.zoom}`
+    })
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'map_panned',
+      eventAction: 'drag',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(config),
+      specifics: `coordinates: ${position.coordinates}`
+    })
     dispatch({ type: 'SET_POSITION', payload: position })
   }
 
@@ -105,7 +199,7 @@ const WorldMap = () => {
       // If the geo.properties.config value is found in the data use that, otherwise fall back to geo.properties.iso
       const dataHasStateName = config.data.some(d => d[config.columns.geo.name] === geo.properties.state)
       const geoKey =
-        geo.properties.state && data[geo.properties.state]
+        geo.properties.state && runtimeData[geo.properties.state]
           ? geo.properties.state
           : geo.properties.name
           ? geo.properties.name
@@ -116,7 +210,7 @@ const WorldMap = () => {
       }
       if (!geoKey) return null
 
-      let geoData = data[geoKey]
+      let geoData = runtimeData[geoKey]
 
       const geoDisplayName = displayGeoName(supportedCountries[geoKey]?.[0])
       let legendColors
@@ -129,25 +223,57 @@ const WorldMap = () => {
       const geoStrokeColor = getGeoStrokeColor(config)
       const geoFillColor = getGeoFillColor(config)
 
+      // Check if this country should be greyed out for multi-country selection
+      const countriesPicked = getCountriesPicked(config)
+
+      const isGreyedOut = Boolean(
+        countriesPicked.length > 0 &&
+          config.general.hideUnselectedCountries !== true &&
+          !countriesPicked.some(country => country.iso === geo.properties.iso || country.name === geoDisplayName)
+      )
+
+      // Determine visual state for TDD tests
+      const isSelected = countriesPicked.some(
+        country => country.iso === geo.properties.iso || country.name === geoDisplayName
+      )
+      const isHidden = countriesPicked.length > 0 && config.general.hideUnselectedCountries === true && !isSelected
+
+      // Build CSS class names for TDD tests
+      let geoClassName = ''
+      if (countriesPicked.length > 0) {
+        if (isSelected) {
+          geoClassName = 'selected'
+        } else if (isGreyedOut) {
+          geoClassName = 'grayed-out'
+        } else if (isHidden) {
+          geoClassName = 'hidden'
+        }
+      }
+
       let styles: Record<string, string | Record<string, string>> = {
-        fill: geoFillColor,
-        cursor: 'default'
+        fill: isGreyedOut ? GRAYED_OUT_COLOR : geoFillColor,
+        cursor: 'default',
+        ...(isGreyedOut && { opacity: '0.3' })
       }
 
-      const strokeWidth = 0.9
+      // Scale stroke width inversely with zoom level to maintain consistent visual thickness
+      // At zoom=1, use base width of 0.9; at zoom=4, use 0.225; etc.
+      const baseStrokeWidth = 0.9
+      const currentZoom = position?.zoom || 1
+      const strokeWidth = baseStrokeWidth / currentZoom
 
       // If a legend applies, return it with appropriate information.
       const toolTip = applyTooltipsToGeo(geoDisplayName, geoData)
       if (legendColors && legendColors[0] !== '#000000' && type !== 'bubble') {
         styles = {
           ...styles,
-          fill: type !== 'world-geocode' ? legendColors[0] : geoFillColor,
+          fill: isGreyedOut ? GRAYED_OUT_COLOR : type !== 'world-geocode' ? legendColors[0] : geoFillColor,
           cursor: 'default',
           '&:hover': {
-            fill: type !== 'world-geocode' ? legendColors[1] : geoFillColor
+            fill: isGreyedOut ? GRAYED_OUT_COLOR : type !== 'world-geocode' ? legendColors[1] : geoFillColor
           },
           '&:active': {
-            fill: type !== 'world-geocode' ? legendColors[2] : geoFillColor
+            fill: isGreyedOut ? GRAYED_OUT_COLOR : type !== 'world-geocode' ? legendColors[2] : geoFillColor
           }
         }
 
@@ -168,9 +294,25 @@ const WorldMap = () => {
             path={path}
             stroke={geoStrokeColor}
             strokeWidth={strokeWidth}
+            className={geoClassName}
             onClick={() => geoClickHandler(geoDisplayName, geoData)}
+            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()}`
+              })
+            }}
             data-tooltip-id={`tooltip__${tooltipId}`}
             data-tooltip-html={toolTip}
+            data-country-code={geo.properties.iso}
             tabIndex={-1}
           />
         )
@@ -186,8 +328,24 @@ const WorldMap = () => {
           strokeWidth={strokeWidth}
           styles={styles}
           path={path}
+          className={geoClassName}
+          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()}`
+            })
+          }}
           data-tooltip-id={`tooltip__${tooltipId}`}
           data-tooltip-html={toolTip}
+          data-country-code={geo.properties.iso}
         />
       )
     })
@@ -207,7 +365,7 @@ const WorldMap = () => {
     <ErrorBoundary component='WorldMap'>
       {allowMapZoom ? (
         <svg viewBox={SVG_VIEWBOX} role='img' aria-label={handleMapAriaLabels(config)}>
-          <rect height={SVG_HEIGHT} width={SVG_WIDTH} onClick={handleReset} fill='white' />
+          <rect height={SVG_HEIGHT} width={SVG_WIDTH} onClick={handleFiltersReset} fill='white' />
           <ZoomableGroup
             zoom={position.zoom}
             center={position.coordinates}
@@ -217,7 +375,7 @@ const WorldMap = () => {
             width={SVG_WIDTH}
             height={SVG_HEIGHT}
           >
-            <Mercator data={world}>{({ features }) => constructGeoJsx(features)}</Mercator>
+            <Mercator data={filteredWorld}>{({ features }) => constructGeoJsx(features)}</Mercator>
           </ZoomableGroup>
         </svg>
       ) : (
@@ -231,12 +389,12 @@ const WorldMap = () => {
             width={SVG_WIDTH}
             height={SVG_HEIGHT}
           >
-            <Mercator data={world}>{({ features }) => constructGeoJsx(features)}</Mercator>
+            <Mercator data={filteredWorld}>{({ features }) => constructGeoJsx(features)}</Mercator>
           </ZoomableGroup>
         </svg>
       )}
       {(type === 'data' || (type === 'world-geocode' && allowMapZoom) || (type === 'bubble' && allowMapZoom)) && (
-        <ZoomControls handleZoomIn={handleZoomIn} handleZoomOut={handleZoomOut} handleReset={handleReset} />
+        <ZoomControls handleZoomIn={handleZoomIn} handleZoomOut={handleZoomOut} handleZoomReset={handleZoomReset} />
       )}
     </ErrorBoundary>
   )

package/src/components/ZoomControls.tsx

@@ -7,10 +7,10 @@ import './zoomControls.styles.css'
 type ZoomControlsProps = {
   handleZoomIn: (coordinates: [Number, Number]) => void
   handleZoomOut: (coordinates: [Number, Number]) => void
-  handleReset: (setRuntimeData: Function) => void
+  handleZoomReset: (setRuntimeData: Function) => void
 }
 
-const ZoomControls: React.FC<ZoomControlsProps> = ({ handleZoomIn, handleZoomOut, handleReset }) => {
+const ZoomControls: React.FC<ZoomControlsProps> = ({ handleZoomIn, handleZoomOut, handleZoomReset }) => {
   const { config, setRuntimeData, position } = useContext<MapContext>(ConfigContext)
   if (!config.general.allowMapZoom) return
   return (
@@ -26,13 +26,10 @@ const ZoomControls: React.FC<ZoomControlsProps> = ({ handleZoomIn, handleZoomOut
           <line x1='5' y1='12' x2='19' y2='12' />
         </svg>
       </button>
-      {config.general.type === 'bubble' && (
-        <button onClick={() => handleReset(setRuntimeData)} className='reset' aria-label='Reset Zoom and Map Filters'>
-          Reset Filters
-        </button>
-      )}
-      {(config.general.type === 'world-geocode' || config.general.geoType === 'single-state') && (
-        <button onClick={() => handleReset(setRuntimeData)} className='reset' aria-label='Reset Zoom'>
+      {(config.general.type === 'world-geocode' ||
+        config.general.geoType === 'single-state' ||
+        config.general.type === 'bubble') && (
+        <button onClick={() => handleZoomReset(setRuntimeData)} className='reset' aria-label='Reset Zoom'>
           Reset Zoom
         </button>
       )}

package/src/context/LegendMemoContext.tsx

@@ -0,0 +1,30 @@
+import React, { createContext, useContext } from 'react'
+
+interface LegendMemoContextType {
+  legendMemo: React.RefObject<Map<any, any>>
+  legendSpecialClassLastMemo: React.RefObject<Map<any, any>>
+}
+
+const LegendMemoContext = createContext<LegendMemoContextType | null>(null)
+
+export const LegendMemoProvider: React.FC<{
+  children: React.ReactNode
+  legendMemo: React.RefObject<Map<any, any>>
+  legendSpecialClassLastMemo: React.RefObject<Map<any, any>>
+}> = ({ children, legendMemo, legendSpecialClassLastMemo }) => {
+  return (
+    <LegendMemoContext.Provider value={{ legendMemo, legendSpecialClassLastMemo }}>
+      {children}
+    </LegendMemoContext.Provider>
+  )
+}
+
+export const useLegendMemoContext = () => {
+  const context = useContext(LegendMemoContext)
+  if (!context) {
+    throw new Error('useLegendMemoContext must be used within a LegendMemoProvider')
+  }
+  return context
+}
+
+export default LegendMemoContext

package/src/context.ts

@@ -1,46 +1,7 @@
 import { createContext, Dispatch } from 'react'
-import { MapConfig } from './types/MapConfig'
+import { MapContext } from './types/MapContext'
 import MapActions from './store/map.actions'
 
-type MapContext = {
-  container
-  setSharedFilter
-  customNavigationHandler
-  tooltipRef
-  containerEl
-  applyLegendToRow
-  data
-  displayGeoName
-  filteredCountryCode
-  generateColorsArray
-  generateRuntimeData
-  geoClickHandler
-  handleCircleClick: Function
-  innerContainerRef
-  isDashboard
-  isEditor
-  mapId: string
-  loadConfig
-  position
-  resetLegendToggles
-  runtimeFilters
-  runtimeLegend
-  setParentConfig
-  setRuntimeData
-  setRuntimeFilters
-  setRuntimeLegend
-  setSharedFilterValue
-  setConfig: Function
-  config: MapConfig
-  tooltipId: string
-  legendMemo
-  legendSpecialClassLastMemo
-  translate
-  scale
-  annotations
-  interactionLabel?: string
-}
-
 export const MapDispatchContext = createContext<Dispatch<MapActions>>(() => {})
 
 const ConfigContext = createContext({} as MapContext)