@cdc/map 4.25.3 → 4.25.6

package/src/components/WorldMap/WorldMap.tsx

@@ -1,42 +1,54 @@
 import { memo, useContext, useState, useEffect } from 'react'
-
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { geoMercator } from 'd3-geo'
 import { Mercator } from '@visx/geo'
 import { feature } from 'topojson-client'
+import ConfigContext, { MapDispatchContext } from '../../context'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ZoomableGroup from '../ZoomableGroup'
 import Geo from '../Geo'
 import CityList from '../CityList'
 import BubbleList from '../BubbleList'
-import ConfigContext from '../../context'
 import ZoomControls from '../ZoomControls'
-import { getGeoFillColor, getGeoStrokeColor } from '../../helpers/colors'
 import { supportedCountries } from '../../data/supported-geos'
-import { handleMapAriaLabels } from '../../helpers/handleMapAriaLabels'
-import { titleCase } from '../../helpers/titleCase'
+import {
+  getGeoFillColor,
+  getGeoStrokeColor,
+  handleMapAriaLabels,
+  titleCase,
+  displayGeoName,
+  SVG_VIEWBOX,
+  SVG_WIDTH,
+  SVG_HEIGHT,
+  MAX_ZOOM_LEVEL
+} from '../../helpers'
+import useGeoClickHandler from '../../hooks/useGeoClickHandler'
+import useApplyTooltipsToGeo from '../../hooks/useApplyTooltipsToGeo'
+import generateRuntimeData from '../../helpers/generateRuntimeData'
+import { applyLegendToRow } from '../../helpers/applyLegendToRow'
+
+import './worldMap.styles.css'
 
 let projection = geoMercator()
 
 const WorldMap = () => {
   // prettier-ignore
   const {
-    applyLegendToRow,
-    applyTooltipsToGeo,
     data,
-    displayGeoName,
-    generateRuntimeData,
-    geoClickHandler,
-    hasZoom,
     position,
-    setFilteredCountryCode,
-    setPosition,
     setRuntimeData,
-    setState,
-    state,
+    config,
     tooltipId,
+    runtimeLegend,
+    legendMemo,
+    legendSpecialClassLastMemo,
   } = useContext(ConfigContext)
 
+  const { type, allowMapZoom } = config.general
+
   const [world, setWorld] = useState(null)
+  const { geoClickHandler } = useGeoClickHandler()
+  const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
+  const dispatch = useContext(MapDispatchContext)
 
   useEffect(() => {
     const fetchData = async () => {
@@ -51,43 +63,30 @@ const WorldMap = () => {
     return <></>
   }
 
-  // TODO Refactor - state should be set together here to avoid rerenders
-  // Resets to original data & zooms out
-  const handleReset = (state, setState, setRuntimeData, generateRuntimeData) => {
-    let reRun = generateRuntimeData(state)
-    setRuntimeData(reRun)
-    setState({
-      ...state,
-      focusedCountry: false,
-      mapPosition: { coordinates: [0, 30], zoom: 1 }
-    })
-    setFilteredCountryCode('')
+  const handleReset = () => {
+    const newRuntimeData = generateRuntimeData(config)
+    dispatch({ type: 'SET_POSITION', payload: { coordinates: [0, 30], zoom: 1 } })
+    dispatch({ type: 'SET_FILTERED_COUNTRY_CODE', payload: '' })
+    setRuntimeData(newRuntimeData)
   }
-  const handleZoomIn = (position, setPosition) => {
+  const handleZoomIn = position => {
     if (position.zoom >= 4) return
-    setPosition(pos => ({ ...pos, zoom: pos.zoom * 1.5 }))
+    dispatch({ type: 'SET_POSITION', payload: { coordinates: position.coordinates, zoom: position.zoom * 1.5 } })
   }
 
-  const handleZoomOut = (position, setPosition) => {
+  const handleZoomOut = position => {
     if (position.zoom <= 1) return
-    setPosition(pos => ({ ...pos, zoom: pos.zoom / 1.5 }))
-  }
-
-  // TODO Refactor - state should be set together here to avoid rerenders
-  const handleCircleClick = (country, state, setState, setRuntimeData, generateRuntimeData) => {
-    if (!state.general.allowMapZoom) return
-    let newRuntimeData = state.data.filter(item => item[state.columns.geo.name] === country[state.columns.geo.name])
-    setFilteredCountryCode(newRuntimeData[0].uid)
+    dispatch({ type: 'SET_POSITION', payload: { coordinates: position.coordinates, zoom: position.zoom / 1.5 } })
   }
 
   const handleMoveEnd = position => {
-    setPosition(position)
+    dispatch({ type: 'SET_POSITION', payload: position })
   }
 
   const constructGeoJsx = geographies => {
     const geosJsx = geographies.map(({ feature: geo, path }, i) => {
-      // If the geo.properties.state value is found in the data use that, otherwise fall back to geo.properties.iso
-      const dataHasStateName = state.data.some(d => d[state.columns.geo.name] === geo.properties.state)
+      // 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
@@ -102,20 +101,16 @@ const WorldMap = () => {
 
       let geoData = data[geoKey]
 
-      // if ((geoKey === 'Alaska' || geoKey === 'Hawaii') && !geoData) {
-      //   geoData = data['United States']
-      // }
-
       const geoDisplayName = displayGeoName(supportedCountries[geoKey]?.[0])
       let legendColors
 
       // Once we receive data for this geographic item, setup variables.
       if (geoData !== undefined) {
-        legendColors = applyLegendToRow(geoData)
+        legendColors = applyLegendToRow(geoData, config, runtimeLegend, legendMemo, legendSpecialClassLastMemo)
       }
 
-      const geoStrokeColor = getGeoStrokeColor(state)
-      const geoFillColor = getGeoFillColor(state)
+      const geoStrokeColor = getGeoStrokeColor(config)
+      const geoFillColor = getGeoFillColor(config)
 
       let styles: Record<string, string | Record<string, string>> = {
         fill: geoFillColor,
@@ -126,23 +121,23 @@ const WorldMap = () => {
 
       // If a legend applies, return it with appropriate information.
       const toolTip = applyTooltipsToGeo(geoDisplayName, geoData)
-      if (legendColors && legendColors[0] !== '#000000' && state.general.type !== 'bubble') {
+      if (legendColors && legendColors[0] !== '#000000' && type !== 'bubble') {
         styles = {
           ...styles,
-          fill: state.general.type !== 'world-geocode' ? legendColors[0] : geoFillColor,
+          fill: type !== 'world-geocode' ? legendColors[0] : geoFillColor,
           cursor: 'default',
           '&:hover': {
-            fill: state.general.type !== 'world-geocode' ? legendColors[1] : geoFillColor
+            fill: type !== 'world-geocode' ? legendColors[1] : geoFillColor
           },
           '&:active': {
-            fill: state.general.type !== 'world-geocode' ? legendColors[2] : geoFillColor
+            fill: type !== 'world-geocode' ? legendColors[2] : geoFillColor
           }
         }
 
         // When to add pointer cursor
         if (
-          (state.columns.navigate && geoData[state.columns.navigate.name]) ||
-          state.tooltips.appearanceType === 'click'
+          (config.columns.navigate && geoData[config.columns.navigate.name]) ||
+          config.tooltips.appearanceType === 'click'
         ) {
           styles.cursor = 'pointer'
         }
@@ -151,9 +146,8 @@ const WorldMap = () => {
           <Geo
             additionalData={additionalData}
             geoData={geoData}
-            state={state}
             key={i + '-geo'}
-            style={styles}
+            styles={styles}
             path={path}
             stroke={geoStrokeColor}
             strokeWidth={strokeWidth}
@@ -170,11 +164,9 @@ const WorldMap = () => {
         <Geo
           additionaldata={JSON.stringify(additionalData)}
           geodata={JSON.stringify(geoData)}
-          state={state}
           key={i + '-geo'}
           stroke={geoStrokeColor}
           strokeWidth={strokeWidth}
-          style={styles}
           styles={styles}
           path={path}
           data-tooltip-id={`tooltip__${tooltipId}`}
@@ -184,39 +176,11 @@ const WorldMap = () => {
     })
 
     // Cities
-    geosJsx.push(
-      <CityList
-        applyLegendToRow={applyLegendToRow}
-        applyTooltipsToGeo={applyTooltipsToGeo}
-        data={data}
-        displayGeoName={displayGeoName}
-        geoClickHandler={geoClickHandler}
-        key='cities'
-        projection={projection}
-        state={state}
-        titleCase={titleCase}
-        tooltipId={tooltipId}
-      />
-    )
+    geosJsx.push(<CityList key='cities' projection={projection} tooltipId={tooltipId} />)
 
     // Bubbles
-    if (state.general.type === 'bubble') {
-      geosJsx.push(
-        <BubbleList
-          key='bubbles'
-          data={state.data}
-          runtimeData={data}
-          state={state}
-          projection={projection}
-          applyLegendToRow={applyLegendToRow}
-          applyTooltipsToGeo={applyTooltipsToGeo}
-          displayGeoName={displayGeoName}
-          tooltipId={tooltipId}
-          handleCircleClick={country =>
-            handleCircleClick(country, state, setState, setRuntimeData, generateRuntimeData)
-          }
-        />
-      )
+    if (type === 'bubble') {
+      geosJsx.push(<BubbleList />)
     }
 
     return geosJsx
@@ -224,56 +188,38 @@ const WorldMap = () => {
 
   return (
     <ErrorBoundary component='WorldMap'>
-      {hasZoom ? (
-        <svg viewBox='0 0 880 500' role='img' aria-label={handleMapAriaLabels(state)}>
-          <rect
-            height={500}
-            width={880}
-            onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)}
-            fill='white'
-          />
+      {allowMapZoom ? (
+        <svg viewBox={SVG_VIEWBOX} role='img' aria-label={handleMapAriaLabels(config)}>
+          <rect height={SVG_HEIGHT} width={SVG_WIDTH} onClick={handleReset} fill='white' />
           <ZoomableGroup
             zoom={position.zoom}
             center={position.coordinates}
             onMoveEnd={handleMoveEnd}
-            maxZoom={4}
+            maxZoom={MAX_ZOOM_LEVEL}
             projection={projection}
-            width={880}
-            height={500}
+            width={SVG_WIDTH}
+            height={SVG_HEIGHT}
           >
             <Mercator data={world}>{({ features }) => constructGeoJsx(features)}</Mercator>
           </ZoomableGroup>
         </svg>
       ) : (
-        <svg viewBox='0 0 880 500'>
+        <svg viewBox={SVG_VIEWBOX}>
           <ZoomableGroup
             zoom={1}
             center={position.coordinates}
             onMoveEnd={handleMoveEnd}
             maxZoom={0}
             projection={projection}
-            width={880}
-            height={500}
+            width={SVG_WIDTH}
+            height={SVG_HEIGHT}
           >
             <Mercator data={world}>{({ features }) => constructGeoJsx(features)}</Mercator>
           </ZoomableGroup>
         </svg>
       )}
-      {(state.general.type === 'data' ||
-        (state.general.type === 'world-geocode' && hasZoom) ||
-        (state.general.type === 'bubble' && hasZoom)) && (
-        <ZoomControls
-          // prettier-ignore
-          generateRuntimeData={generateRuntimeData}
-          handleZoomIn={handleZoomIn}
-          handleZoomOut={handleZoomOut}
-          position={position}
-          setPosition={setPosition}
-          setRuntimeData={setRuntimeData}
-          setState={setState}
-          state={state}
-          handleReset={handleReset}
-        />
+      {(type === 'data' || (type === 'world-geocode' && allowMapZoom) || (type === 'bubble' && allowMapZoom)) && (
+        <ZoomControls handleZoomIn={handleZoomIn} handleZoomOut={handleZoomOut} handleReset={handleReset} />
       )}
     </ErrorBoundary>
   )

package/src/components/WorldMap/worldMap.styles.css

@@ -0,0 +1,28 @@
+.world {
+  &.data .geography-container {
+    border-bottom: var(--lightGray) 1px solid;
+  }
+  .geography-container {
+    cursor: move;
+    position: relative;
+    flex-grow: 1;
+    width: 100%;
+    .geo-point {
+      transition: 0.3s all;
+      circle {
+        fill: inherit;
+        transition: 0.1s transform;
+      }
+      &:hover {
+        transition: 0.2s all;
+      }
+    }
+    .map-logo {
+      display: block;
+      margin: 0 0 0 auto;
+      max-height: 35px;
+    }
+  }
+}
+
+

package/src/components/ZoomControls.tsx

@@ -1,36 +1,38 @@
 import React, { useContext } from 'react'
-import { MapConfig } from '../types/MapConfig'
 import ConfigContext from '../context'
+import { type MapConfig } from '../types/MapConfig'
+import { MapContext } from '../types/MapContext'
+import './zoomControls.styles.css'
 
 type ZoomControlsProps = {
-  handleZoomIn: (coordinates: [Number, Number], setPosition: Function) => void
-  handleZoomOut: (coordinates: [Number, Number], setPosition: Function) => void
-  handleReset: (coordinates: [Number, Number], setPosition: Function) => void
+  handleZoomIn: (coordinates: [Number, Number]) => void
+  handleZoomOut: (coordinates: [Number, Number]) => void
+  handleReset: (setRuntimeData: Function) => void
 }
 
 const ZoomControls: React.FC<ZoomControlsProps> = ({ handleZoomIn, handleZoomOut, handleReset }) => {
-  const { state, setState, setRuntimeData, setPosition, position, generateRuntimeData } = useContext<MapContext>(ConfigContext)
-  if (!state.general.allowMapZoom) return
+  const { config, setRuntimeData, position } = useContext<MapContext>(ConfigContext)
+  if (!config.general.allowMapZoom) return
   return (
-    <div className='zoom-controls' data-html2canvas-ignore>
-      <button onClick={() => handleZoomIn(position, setPosition)} aria-label='Zoom In'>
+    <div className='zoom-controls' data-html2canvas-ignore='true'>
+      <button onClick={() => handleZoomIn(position)} aria-label='Zoom In'>
         <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
           <line x1='12' y1='5' x2='12' y2='19' />
           <line x1='5' y1='12' x2='19' y2='12' />
         </svg>
       </button>
-      <button onClick={() => handleZoomOut(position, setPosition)} aria-label='Zoom Out'>
+      <button onClick={() => handleZoomOut(position)} aria-label='Zoom Out'>
         <svg viewBox='0 0 24 24' stroke='currentColor' strokeWidth='3'>
           <line x1='5' y1='12' x2='19' y2='12' />
         </svg>
       </button>
-      {state.general.type === 'bubble' && (
-        <button onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} className='reset' aria-label='Reset Zoom and Map Filters'>
+      {config.general.type === 'bubble' && (
+        <button onClick={() => handleReset(setRuntimeData)} className='reset' aria-label='Reset Zoom and Map Filters'>
           Reset Filters
         </button>
       )}
-      {(state.general.type === 'world-geocode' || state.general.geoType === 'single-state') && (
-        <button onClick={() => handleReset(state, setState, setRuntimeData, generateRuntimeData)} className='reset' aria-label='Reset Zoom'>
+      {(config.general.type === 'world-geocode' || config.general.geoType === 'single-state') && (
+        <button onClick={() => handleReset(setRuntimeData)} className='reset' aria-label='Reset Zoom'>
           Reset Zoom
         </button>
       )}

package/src/components/zoomControls.styles.css

@@ -0,0 +1,53 @@
+.zoom-controls {
+  display: flex;
+  position: absolute;
+  bottom: 2em;
+  left: 1em;
+  z-index: 4;
+  > button.reset {
+    margin-left: 5px;
+    background: rgba(0, 0, 0, 0.65);
+    transition: 0.2s all;
+    color: #fff;
+    &:hover {
+      background: rgba(0, 0, 0, 0.8);
+      transition: 0.2s all;
+    }
+    &:active {
+      transform: scale(0.9);
+    }
+    &:focus {
+      background: #005eaa;
+    }
+  }
+  > button:not(.reset) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.2em;
+    height: 1.75em;
+    width: 1.75em;
+    background: rgba(0, 0, 0, 0.65);
+    transition: 0.2s all;
+    color: #fff;
+    border-radius: 100%;
+    border: 0;
+    &:hover {
+      background: rgba(0, 0, 0, 0.8);
+      transition: 0.2s all;
+    }
+    &:active {
+      transform: scale(0.9);
+    }
+    svg {
+      height: 1.75em;
+      width: 1.75em;
+    }
+    &:focus {
+      background: #005eaa;
+    }
+  }
+  > button:first-child {
+    margin-right: 0.25em;
+  }
+}

package/src/context.ts

@@ -1,9 +1,14 @@
-import { createContext } from 'react'
+import { createContext, Dispatch } from 'react'
 import { MapConfig } from './types/MapConfig'
+import MapActions from './store/map.actions'
 
 type MapContext = {
+  container
+  setSharedFilter
+  customNavigationHandler
+  tooltipRef
+  containerEl
   applyLegendToRow
-  applyTooltipsToGeo
   data
   displayGeoName
   filteredCountryCode
@@ -11,29 +16,32 @@ type MapContext = {
   generateRuntimeData
   geoClickHandler
   handleCircleClick: Function
-  hasZoom
   innerContainerRef
   isDashboard
-  isDebug
   isEditor
+  mapId: string
   loadConfig
   position
   resetLegendToggles
   runtimeFilters
   runtimeLegend
-  setAccessibleStatus
-  setFilteredCountryCode
   setParentConfig
-  setPosition
   setRuntimeData
   setRuntimeFilters
   setRuntimeLegend
   setSharedFilterValue
-  setState
-  state: MapConfig
+  setConfig: Function
+  config: MapConfig
   tooltipId: string
+  legendMemo
+  legendSpecialClassLastMemo
+  translate
+  scale
+  annotations
 }
 
+export const MapDispatchContext = createContext<Dispatch<MapActions>>(() => {})
+
 const ConfigContext = createContext({} as MapContext)
 
 export default ConfigContext

package/src/data/initial-state.js

@@ -72,9 +72,11 @@ export default {
     subStyle: 'linear blocks',
     tickRotation: '',
     singleColumnLegend: false,
-    hideBorder: false
+    hideBorder: false,
+    groupBy: ''
   },
   filters: [],
+  data: [],
   table: {
     wrapColumns: false,
     label: 'Data Table',
@@ -88,7 +90,8 @@ export default {
     showFullGeoNameInCSV: false,
     forceDisplay: true,
     download: false,
-    indexLabel: ''
+    indexLabel: '',
+    cellMinWidth: '0'
   },
   tooltips: {
     appearanceType: 'hover',

package/src/helpers/addUIDs.ts

@@ -0,0 +1,150 @@
+import {
+  supportedCities,
+  supportedCounties,
+  supportedCountries,
+  supportedRegions,
+  supportedStates,
+  supportedTerritories
+} from './../data/supported-geos'
+
+import { SUPPORTED_DC_NAMES, GEO_TYPES, GEOCODE_TYPES } from './constants'
+import { DataRow, MapConfig } from '../types/MapConfig'
+
+// Data props
+const stateKeys = Object.keys(supportedStates)
+const territoryKeys = Object.keys(supportedTerritories)
+const regionKeys = Object.keys(supportedRegions)
+const countryKeys = Object.keys(supportedCountries)
+const countyKeys = Object.keys(supportedCounties)
+const cityKeys = Object.keys(supportedCities)
+
+const geoLookups: Record<string, GeoLookup> = {
+  state: { keys: stateKeys, data: supportedStates },
+  territory: { keys: territoryKeys, data: supportedTerritories },
+  region: { keys: regionKeys, data: supportedRegions },
+  country: { keys: countryKeys, data: supportedCountries }
+}
+
+const memoizedFindUID = (geoName: string, type: keyof typeof geoLookups): string | undefined => {
+  const lookup = geoLookups[type]
+  return lookup.keys.find(key => lookup.data[key].includes(geoName))
+}
+
+const hasValidCoordinates = (row: Row, columns: GeoConfig['columns']): boolean => {
+  return !!(
+    columns.latitude?.name &&
+    columns.longitude?.name &&
+    row[columns.latitude.name] &&
+    row[columns.longitude.name]
+  )
+}
+
+const normalizeGeoName = (value: unknown): string => {
+  if (value == null) return ''
+  return String(value).toUpperCase()
+}
+
+const findCityUID = (geoName: string): string | undefined => {
+  if (!geoName) return undefined
+  return cityKeys.find(key => key === geoName.toUpperCase())
+}
+
+const handleDCDisplay = (geoName: string, displayAsHex: boolean): string | null => {
+  if (displayAsHex && SUPPORTED_DC_NAMES.includes(geoName)) {
+    return 'US-DC'
+  }
+  return null
+}
+
+const handleUSLocation = (row: DataRow, geoColumn: string, displayAsHex: boolean): string | null => {
+  const geoName = normalizeGeoName(row[geoColumn])
+
+  let uid = memoizedFindUID(geoName, 'state')
+  if (!uid) {
+    uid = memoizedFindUID(geoName, 'territory')
+  }
+
+  if (!uid) uid = handleDCDisplay(geoName, displayAsHex)
+  if (!uid) uid = findCityUID(geoName)
+
+  return uid
+}
+
+const handleWorldLocation = (row: DataRow, geoColumn: string, isWorldGeocodeType: boolean): string | null => {
+  const geoName = row[geoColumn]
+  let uid = memoizedFindUID(geoName, 'country')
+  if (!uid && (isWorldGeocodeType || geoName)) {
+    uid = findCityUID(geoName)
+  }
+
+  return uid
+}
+
+const handleCountyLocation = (row: DataRow, geoColumn: string): string | undefined => {
+  const fips = row[geoColumn]
+  return countyKeys.find(key => key === fips)
+}
+
+const setRowUID = (row: DataRow, uid: string | null): void => {
+  if (uid) {
+    Object.defineProperty(row, 'uid', {
+      value: uid,
+      writable: true
+    })
+  }
+}
+
+/**
+ * Adds unique identifiers to geographic data rows based on their location type and name.
+ * @param {MapConfig} configObj - Configuration object containing data and processing rules
+ * @param {string} fromColumn - Source column identifier
+ * @throws {Error} When configuration is invalid or required data is missing
+ */
+export const addUIDs = (configObj: MapConfig, fromColumn: string) => {
+  const { general, columns, data } = configObj
+  const { displayAsHex, geoType, type: geocodeType } = general
+  const { geo } = columns
+
+  data.forEach(row => {
+    let uid = null
+    if (row.uid) {
+      row.uid = null // Reset existing UID
+    }
+
+    if (!geo.name) return
+
+    switch (geoType) {
+      case GEO_TYPES.US:
+        uid = handleUSLocation(row, geo.name, displayAsHex)
+        break
+
+      case GEO_TYPES.US_REGION:
+        uid = memoizedFindUID(normalizeGeoName(row[geo.name]), 'region')
+        break
+
+      case GEO_TYPES.WORLD:
+        uid = handleWorldLocation(row, geo.name, geocodeType === GEOCODE_TYPES.WORLD)
+        break
+
+      case GEO_TYPES.US_COUNTY:
+      case GEO_TYPES.SINGLE_STATE:
+        if (geocodeType !== GEOCODE_TYPES.US) {
+          uid = handleCountyLocation(row, geo.name)
+        }
+        break
+    }
+
+    // Handle special cases
+    if (!uid) {
+      if (geocodeType === GEOCODE_TYPES.US) {
+        uid = row[geo.name]
+      } else if (hasValidCoordinates(row, columns)) {
+        uid = `${row[geo.name]}`
+      }
+    }
+
+    setRowUID(row, uid)
+  })
+
+  configObj.data.fromColumn = fromColumn
+}