@cdc/map 4.25.7 → 4.25.10

package/src/helpers/generateRuntimeLegendHash.ts

@@ -2,12 +2,13 @@ import { hashObj } from './hashObj'
 import { MapConfig } from '../types/MapConfig'
 
 export const generateRuntimeLegendHash = (config: MapConfig, runtimeFilters) => {
+  const { name: paletteName } = config.general.palette
   return hashObj({
     unified: config.legend.unified ?? false,
     equalNumberOptIn: config.general.equalNumberOptIn ?? false,
     specialClassesLast: config.legend.showSpecialClassesLast ?? false,
-    color: config.color,
-    customColors: config.customColors,
+    color: paletteName,
+    customColors: config.general?.palette?.customColors,
     numberOfItems: config.legend.numberOfItems,
     type: config.legend.type,
     separateZero: config.legend.separateZero ?? false,
@@ -16,6 +17,7 @@ export const generateRuntimeLegendHash = (config: MapConfig, runtimeFilters) =>
     specialClasses: config.legend.specialClasses,
     geoType: config.general.geoType,
     data: config.data,
+    palette: config.general.palette,
     filters: {
       ...config.filters
     },

package/src/helpers/getColumnNames.ts

@@ -8,7 +8,7 @@ type ColumnNames = {
   categoricalColumnName: string | null
 } | null
 
-export const getColumnNames = (columns?: Pick<MapConfig, 'columns'>): ColumnNames => {
+export const getColumnNames = (columns?: MapConfig['columns']): ColumnNames => {
   if (!columns) return null
   const geoColumnName = columns.geo?.name || null
   const primaryColumnName = columns.primary?.name || null

package/src/helpers/getPatternForRow.ts

@@ -0,0 +1,36 @@
+import { MapConfig } from '../types/MapConfig'
+
+export interface PatternInfo {
+  pattern?: string
+  dataKey: string
+  size?: string
+  patternIndex: number
+  color?: string
+}
+
+export const getPatternForRow = (
+  rowObj: Record<string, any>,
+  config: MapConfig
+): PatternInfo | null => {
+  if (!config.map?.patterns || !rowObj) {
+    return null
+  }
+
+  // Find a pattern that matches this row's data
+  for (let i = 0; i < config.map.patterns.length; i++) {
+    const patternData = config.map.patterns[i]
+    const hasMatchingValues = patternData.dataValue === rowObj[patternData.dataKey]
+
+    if (hasMatchingValues) {
+      return {
+        pattern: patternData.pattern,
+        dataKey: patternData.dataKey,
+        size: patternData.size,
+        patternIndex: i,
+        color: patternData.color
+      }
+    }
+  }
+
+  return null
+}

package/src/helpers/getStatesPicked.ts

@@ -0,0 +1,14 @@
+import { getFilterControllingStatesPicked } from '../components/UsaMap/helpers/map'
+import { supportedStatesFipsCodes } from '../data/supported-geos'
+
+export const getStatesPicked = (config, runtimeData) => {
+  const stateNames = getFilterControllingStatesPicked(config, runtimeData)
+  return stateNames.map(stateName => {
+    const fipsCode = Object.keys(supportedStatesFipsCodes).find(key => supportedStatesFipsCodes[key] === stateName)
+    if (!fipsCode) console.error(`State name "${stateName}" not found.`)
+    return {
+      fipsCode,
+      stateName
+    }
+  })
+}

package/src/helpers/handleMapAriaLabels.ts

@@ -3,7 +3,7 @@ export const handleMapAriaLabels = (state: MapConfig = '', testing = false) => {
   try {
     if (!state.general.geoType) throw Error('handleMapAriaLabels: no geoType found in state')
     const {
-      general: { title, geoType, statePicked }
+      general: { title, geoType, statesPicked }
     } = state
     let ariaLabel = ''
     switch (geoType) {
@@ -17,7 +17,7 @@ export const handleMapAriaLabels = (state: MapConfig = '', testing = false) => {
         ariaLabel += `United States county map`
         break
       case 'single-state':
-        ariaLabel += `${statePicked.stateName} county map`
+        ariaLabel += `${statesPicked.map(sp => sp.stateName).join(', ')} county map`
         break
       case 'us-region':
         ariaLabel += `United States HHS Region map`

package/src/helpers/index.ts

@@ -1,9 +1,8 @@
 export { addUIDs } from './addUIDs'
 export { applyColorToLegend } from './applyColorToLegend'
-export { colorDistributions } from './colorDistributions'
 export { displayGeoName } from './displayGeoName'
 export { formatLegendLocation } from './formatLegendLocation'
-export { generateColorsArray } from './generateColorsArray'
+export { generateColorsArray } from '@cdc/core/helpers/generateColorsArray'
 export { generateRuntimeLegendHash } from './generateRuntimeLegendHash'
 export { getGeoStrokeColor, getGeoFillColor } from './colors'
 export { getUniqueValues } from './getUniqueValues'
@@ -11,6 +10,7 @@ export { handleMapAriaLabels } from './handleMapAriaLabels'
 export { handleMapTabbing } from './handleMapTabbing'
 export { hashObj } from './hashObj'
 export { indexOfIgnoreType } from './indexOfIgnoreType'
+export { isLegendItemDisabled } from './isLegendItemDisabled'
 export { navigationHandler } from './navigationHandler'
 export { resetLegendToggles } from './resetLegendToggles'
 export { setBinNumbers } from './setBinNumbers'
@@ -19,4 +19,12 @@ export { titleCase as toTitleCase } from './toTitleCase'
 export { titleCase } from './titleCase'
 export { validateFipsCodeLength } from './validateFipsCodeLength'
 export { getMapContainerClasses } from './getMapContainerClasses'
-export { SVG_HEIGHT, SVG_WIDTH, SVG_PADDING, SVG_VIEWBOX, HEADER_COLORS, MAX_ZOOM_LEVEL } from './constants'
+export {
+  SVG_HEIGHT,
+  SVG_WIDTH,
+  SVG_PADDING,
+  SVG_VIEWBOX,
+  HEADER_COLORS,
+  MAX_ZOOM_LEVEL,
+  DEFAULT_MAP_BACKGROUND
+} from './constants'

package/src/helpers/isLegendItemDisabled.ts

@@ -0,0 +1,16 @@
+import { hashObj } from './hashObj'
+
+export const isLegendItemDisabled = (
+  dataForCheck: any,
+  runtimeLegend: any,
+  legendMemo: React.MutableRefObject<Map<number, number>>,
+  legendSpecialClassLastMemo: React.MutableRefObject<Map<number, number>>,
+  config: any
+): boolean => {
+  if (!dataForCheck || !runtimeLegend?.items) return false
+  const hash = hashObj(dataForCheck)
+  if (!legendMemo.current.has(hash)) return false
+  const idx = legendMemo.current.get(hash)
+  const disabledIdx = config.legend.showSpecialClassesLast ? legendSpecialClassLastMemo.current.get(hash) ?? idx : idx
+  return runtimeLegend.items[disabledIdx]?.disabled || false
+}

package/src/helpers/mapObserverHelpers.ts

@@ -0,0 +1,40 @@
+import { publish } from '@cdc/core/helpers/events'
+import { MapConfig } from '../types/MapConfig'
+import MapActions from '../store/map.actions'
+import { Dispatch } from 'react'
+
+/**
+ * Publishes 'cove_loaded' only after the map SVG is rendered in the DOM.
+ * Checks immediately, then uses a MutationObserver as a fallback for async rendering.
+ * Update the mapSvg ref if the map container changes.
+ */
+export const observeMapSvgLoaded = (
+  mapSvgRef: React.RefObject<HTMLElement>,
+  config: MapConfig,
+  coveLoadedHasRan: boolean,
+  dispatch: Dispatch<MapActions>
+): (() => void) => {
+  // Immediate check in case SVG is already present
+  const svgEl = mapSvgRef.current?.querySelector('svg')
+  if (svgEl && svgEl.childNodes.length > 0) {
+    publish('cove_loaded', { config })
+    dispatch({ type: 'SET_COVE_LOADED_HAS_RAN', payload: true })
+    return () => {}
+  }
+
+  // Fallback to observer for async SVG rendering
+  const observer = new MutationObserver(() => {
+    const svgEl = mapSvgRef.current?.querySelector('svg')
+    if (svgEl && svgEl.childNodes.length > 0) {
+      publish('cove_loaded', { config })
+      dispatch({ type: 'SET_COVE_LOADED_HAS_RAN', payload: true })
+      observer.disconnect()
+    }
+  })
+
+  if (mapSvgRef.current) {
+    observer.observe(mapSvgRef.current, { childList: true, subtree: true })
+  }
+
+  return () => observer.disconnect()
+}

package/src/helpers/resetLegendToggles.ts

@@ -1,5 +1,6 @@
 import _ from 'lodash'
-export const resetLegendToggles = (runtimeLegend, setRuntimeLegend) => {
+
+export const resetLegendToggles = (runtimeLegend, dispatch) => {
   const legendCopy = _.cloneDeep(runtimeLegend)
 
   legendCopy.items.forEach(legendItem => {
@@ -9,5 +10,5 @@ export const resetLegendToggles = (runtimeLegend, setRuntimeLegend) => {
 
   legendCopy.runtimeDataHash = runtimeLegend.runtimeDataHash
 
-  setRuntimeLegend(legendCopy)
+  dispatch({ type: 'SET_RUNTIME_LEGEND', payload: legendCopy })
 }

package/src/helpers/toggleLegendActive.ts

@@ -1,12 +1,6 @@
 import _ from 'lodash'
 
-export const toggleLegendActive = (
-  i: number,
-  legendLabel: string,
-  runtimeLegend,
-  setRuntimeLegend,
-  setAccessibleStatus: (message: string) => void
-) => {
+export const toggleLegendActive = (i: number, legendLabel: string, runtimeLegend, dispatch) => {
   const runtimeLegendCopy = _.cloneDeep(runtimeLegend)
 
   // Create and toggle the new value
@@ -17,9 +11,10 @@ export const toggleLegendActive = (
 
   runtimeLegendCopy['disabledAmt'] = newValue ? disabledAmt + 1 : disabledAmt - 1
 
-  setRuntimeLegend(runtimeLegendCopy)
+  dispatch({ type: 'SET_RUNTIME_LEGEND', payload: runtimeLegendCopy })
 
-  setAccessibleStatus(
-    `Disabled legend item ${legendLabel ?? ''}. Please reference the data table to see updated values.`
-  )
+  dispatch({
+    type: 'SET_ACCESSIBLE_STATUS',
+    payload: `Disabled legend item ${legendLabel ?? ''}. Please reference the data table to see updated values.`
+  })
 }

package/src/helpers/urlDataHelpers.ts

@@ -0,0 +1,70 @@
+import Papa from 'papaparse'
+import _ from 'lodash'
+import { DataTransform } from '@cdc/core/helpers/DataTransform'
+import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
+import { MapConfig } from '../types/MapConfig'
+import { CSV_PARSE_CONFIG } from './constants'
+import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
+
+export const buildQueryString = (params: Record<string, string>): string =>
+  Object.keys(params)
+    .map((param, i) => {
+      let qs = i === 0 ? '?' : '&'
+      qs += param + '='
+      qs += params[param]
+      return qs
+    })
+    .join('')
+
+export const reloadURLData = async (config: MapConfig, setConfig: (config: MapConfig) => void): Promise<void> => {
+  if (!config.dataUrl) return
+
+  const dataUrl = new URL(config.runtimeDataUrl || config.dataUrl, window.location.origin)
+  let qsParams = Object.fromEntries(new URLSearchParams(dataUrl.search))
+
+  let isUpdateNeeded = false
+  config.filters.forEach(filter => {
+    if (filter.type === 'url' && qsParams[filter.queryParameter] !== decodeURIComponent(filter.active)) {
+      qsParams[filter.queryParameter] = filter.active
+      isUpdateNeeded = true
+    }
+  })
+
+  if (!isUpdateNeeded) return
+
+  let dataUrlFinal = `${dataUrl.origin}${dataUrl.pathname}${buildQueryString(qsParams)}`
+  let data
+
+  try {
+    const regex = /(?:\.([^.]+))?$/
+    const ext = regex.exec(dataUrl.pathname)[1]
+
+    if ('csv' === ext || isSolrCsv(dataUrlFinal)) {
+      data = await fetch(dataUrlFinal)
+        .then(response => response.text())
+        .then(responseText => {
+          const parsedCsv = Papa.parse(responseText, CSV_PARSE_CONFIG)
+          return parsedCsv.data
+        })
+    } else if ('json' === ext || isSolrJson(dataUrlFinal)) {
+      data = await fetch(dataUrlFinal).then(response => response.json())
+    } else {
+      data = []
+    }
+  } catch (e) {
+    console.error(`Cannot parse URL: ${dataUrlFinal}`, e)
+    data = []
+  }
+
+  if (config.dataDescription) {
+    const transform = new DataTransform()
+    data = transform.autoStandardize(data)
+    data = transform.developerStandardize(data, config.dataDescription)
+  }
+
+  const newConfig = cloneConfig(config)
+  newConfig.data = data
+  newConfig.runtimeDataUrl = dataUrlFinal
+
+  setConfig(newConfig)
+}

package/src/hooks/useGeoClickHandler.ts

@@ -1,9 +1,17 @@
 import ConfigContext, { MapDispatchContext } from '../context'
 import { navigationHandler } from '../helpers'
 import { useContext } from 'react'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle } from '@cdc/core/helpers/metrics/utils'
 
 const useGeoClickHandler = () => {
-  const { config: state, setConfig, setSharedFilter, customNavigationHandler } = useContext(ConfigContext)
+  const {
+    config: state,
+    setConfig,
+    setSharedFilter,
+    customNavigationHandler,
+    interactionLabel
+  } = useContext(ConfigContext)
   const dispatch = useContext(MapDispatchContext)
 
   const geoClickHandler = (geoDisplayName: string, geoData: object): void => {
@@ -30,11 +38,37 @@ const useGeoClickHandler = () => {
       }
       dispatch({ type: 'SET_MODAL', payload: modalData })
 
+      // Track modal click analytics event
+      if (interactionLabel) {
+        const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
+        publishAnalyticsEvent({
+          vizType: 'map',
+          eventType: `modal_trigger` as any,
+          eventAction: 'click',
+          eventLabel: interactionLabel,
+          vizTitle: getVizTitle(state),
+          specifics: `clicked on: ${String(locationName).toLowerCase()}`
+        })
+      }
+
       return
     }
 
     // Otherwise if this item has a link specified for it, do regular navigation.
     if (state.columns.navigate && geoData[state.columns.navigate.name]) {
+      // Track navigation click analytics event
+      if (interactionLabel) {
+        const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
+        publishAnalyticsEvent({
+          vizType: 'map',
+          eventType: `map_trigger` as any,
+          eventAction: 'click',
+          eventLabel: interactionLabel,
+          vizTitle: getVizTitle(state),
+          specifics: `clicked on: ${String(locationName).toLowerCase()}`
+        })
+      }
+
       navigationHandler(state.general.navigationTarget, geoData[state.columns.navigate.name], customNavigationHandler)
     }
   }

package/src/hooks/useLegendMemo.ts

@@ -0,0 +1,17 @@
+import { useRef } from 'react'
+
+/**
+ * Custom hook to manage legend memoization refs
+ * Extracted from context to reduce context props and improve performance
+ */
+export const useLegendMemo = () => {
+  const legendMemo = useRef(new Map())
+  const legendSpecialClassLastMemo = useRef(new Map())
+
+  return {
+    legendMemo,
+    legendSpecialClassLastMemo
+  }
+}
+
+export default useLegendMemo

package/src/hooks/useMapLayers.tsx

@@ -3,6 +3,7 @@ import { feature } from 'topojson-client'
 import { Group } from '@visx/group'
 import { MapConfig } from '../types/MapConfig'
 import _ from 'lodash'
+import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
 
 /**
  * This is the starting structure for adding custom geoJSON shape layers to a projection.
@@ -46,10 +47,10 @@ export default function useMapLayers(config: MapConfig, setConfig, pathGenerator
 
   const handleRemoveLayer = (e: MouseEvent<HTMLButtonElement>, index: number) => {
     e.preventDefault()
-    const newConfig = _.cloneDeep(config)
+    const newConfig = cloneConfig(config)
     const layers = newConfig.map.layers.filter((_layer, i) => i !== index)
     newConfig.map.layers = layers
-    setConfig(newConfig )
+    setConfig(newConfig)
   }
 
   const handleAddLayer = (e: Event) => {
@@ -58,9 +59,9 @@ export default function useMapLayers(config: MapConfig, setConfig, pathGenerator
       name: 'New Custom Layer',
       url: ''
     }
-    const newConfig = _.cloneDeep(config)
+    const newConfig = cloneConfig(config)
     newConfig.map.layers.unshift(placeHolderLayer)
-    setConfig( newConfig )
+    setConfig(newConfig)
   }
 
   const handleMapLayer = (e: ChangeEvent<HTMLInputElement>, index: number, layerKey: string) => {