@cdc/map 4.26.2 → 4.26.4

package/src/data/supported-geos.js

@@ -493,7 +493,9 @@ export const supportedCountries = {
   SOM: ['Somalia', 'Somaliland'],
   ZAF: ['South Africa'],
   SGS: ['South Georgia and the South Sandwich Islands', 'S. Geo. and the Is.'],
+  SSD: ['South Sudan', 'S. Sudan'],
   SDS: ['South Sudan', 'S. Sudan'],
+  XSV: ['Svalbard'],
   ESP: ['Spain'],
   LKA: ['Sri Lanka'],
   SDN: ['Sudan'],
@@ -531,11 +533,28 @@ export const supportedCountries = {
   VIR: ['Virgin Islands (U.S.)', 'U.S. Virgin Is.'],
   WLF: ['Wallis and Futuna', 'Wallis and Futuna Is.'],
   KOS: ['Kosovo'],
+  XKS: ['Kosovo'],
   SAH: ['Western Sahara', 'W. Sahara'],
   YEM: ['Yemen'],
   ZMB: ['Zambia'],
   ZWE: ['Zimbabwe'],
   IOT: ['British Indian Ocean Territory'],
+  CPT: ['Clipperton Island'],
+  XAC: ['Ashmore and Cartier Islands'],
+  XBK: ['Baker Island'],
+  XCS: ['Coral Sea Islands'],
+  XHO: ['Howland Island'],
+  XJA: ['Johnston Atoll'],
+  XJM: ['Jan Mayen'],
+  XJV: ['Jarvis Island'],
+  XKR: ['Kingman Reef'],
+  XMW: ['Midway Islands'],
+  XNV: ['Navassa Island'],
+  XPL: ['Palmyra Atoll'],
+  XPR: ['Paracel Islands'],
+  XQZ: ['Akrotiri'],
+  XSP: ['Spratly Islands'],
+  XWK: ['Wake Island'],
   Alaska: ['Alaska'],
   Hawaii: ['Hawaii'],
   Sardinia: ['Sardinia'],

package/src/helpers/colors.ts

@@ -11,7 +11,8 @@ import { MapConfig } from '../types/MapConfig'
 export const getGeoStrokeColor = (config: MapConfig) => {
   const bodyStyles = getComputedStyle(document.body)
   if (config.general.geoBorderColor === 'darkGray') {
-    return bodyStyles.getPropertyValue('--cool-gray-90')
+    const isCountyMap = config.general.geoType === 'us-county'
+    return bodyStyles.getPropertyValue(isCountyMap ? '--colors-gray-cool-70' : '--cool-gray-90')
   } else {
     return bodyStyles.getPropertyValue('--white')
   }

package/src/helpers/countyTerritories.ts

@@ -0,0 +1,38 @@
+export const US_TERRITORY_STATE_FIPS_PREFIXES = new Set(['60', '66', '69', '78'])
+
+export type CountyTerritoryVisibility = {
+  showTerritories: boolean
+  statePrefixes: Set<string>
+  countyIds: Set<string>
+  key: string
+}
+
+export const getCountyTerritoryVisibility = (
+  territoriesAlwaysShow: boolean | undefined,
+  runtimeData?: Record<string, any>
+): CountyTerritoryVisibility => {
+  const countyIds = new Set<string>()
+  const statePrefixes = new Set<string>()
+
+  if (runtimeData) {
+    Object.keys(runtimeData).forEach(key => {
+      if (key.length <= 2) return
+
+      const statePrefix = key.slice(0, 2)
+      if (!US_TERRITORY_STATE_FIPS_PREFIXES.has(statePrefix)) return
+
+      countyIds.add(key)
+      statePrefixes.add(statePrefix)
+    })
+  }
+
+  const showTerritories = territoriesAlwaysShow !== false && countyIds.size > 0
+  const key = `${showTerritories}:${showTerritories ? Array.from(countyIds).sort().join(',') : ''}`
+
+  return {
+    showTerritories,
+    statePrefixes,
+    countyIds,
+    key
+  }
+}

package/src/helpers/dataTableHelpers.ts

@@ -1,6 +1,91 @@
+import {
+  stateFipsToTwoDigit as stateFipsToAbbreviation,
+  supportedStatesFipsCodes as supportedStateFipsCodes
+} from '../data/supported-geos'
+
 /**
  * Determines if the data table should be shown based on current state
  */
 export const shouldShowDataTable = (config: any, table: any, general: any, loading: boolean): boolean => {
   return !config?.runtime?.editorErrorMessage.length && table.forceDisplay && general.type !== 'navigation' && !loading
 }
+
+/**
+ * Filters county runtime data to a selected state code for data table display.
+ * Keeps the original non-enumerable fromHash metadata when present.
+ * Fail-safe: if no recognizable state columns exist in the data, returns original
+ * data unfiltered (avoids breaking misconfigured datasets). If valid state columns
+ * exist but a state has no data, returns empty result as expected.
+ */
+export const filterCountyTableRuntimeDataByStateCode = (runtimeData: any, stateCode: string, config?: any) => {
+  if (!runtimeData || runtimeData.init || !stateCode) return runtimeData
+
+  const runtimeKeys = Object.keys(runtimeData)
+  if (runtimeKeys.length === 0) return runtimeData
+
+  const stateName = supportedStateFipsCodes?.[stateCode]
+  const stateAbbreviation = stateFipsToAbbreviation?.[stateCode]
+  const normalizedSelectedStateCode = String(stateCode).replace(/^0+/, '')
+  const paddedSelectedStateCode = normalizedSelectedStateCode.padStart(2, '0')
+  const stateColumnNames = Object.values(config?.columns || {})
+    .map((column: any) => column?.name)
+    .filter((name: string) => !!name && /(state|territory|fips|jurisdiction)/i.test(name))
+
+  // Also check common state field names directly in the data rows
+  const commonStateFieldNames = [
+    'jurisdiction',
+    'state',
+    'State',
+    'state_name',
+    'stateName',
+    'State/Territory',
+    'state_territory_name'
+  ]
+  const allStateColumns = [...new Set([...stateColumnNames, ...commonStateFieldNames])]
+
+  // Fail-safe: check if UIDs look like county FIPS codes (5 digits) OR if any state column exists in the data
+  const hasCountyFipsUids = runtimeKeys.some(uid => /^\d{5}$/.test(String(uid)))
+  const hasStateColumn = runtimeKeys.some(uid => allStateColumns.some(col => runtimeData[uid]?.[col] !== undefined))
+
+  // If data has neither county FIPS UIDs nor any recognizable state columns, don't filter
+  if (!hasCountyFipsUids && !hasStateColumn) {
+    return runtimeData
+  }
+
+  const filtered = {}
+
+  if (runtimeData.fromHash !== undefined) {
+    Object.defineProperty(filtered, 'fromHash', {
+      value: runtimeData.fromHash
+    })
+  }
+
+  Object.keys(runtimeData).forEach(uid => {
+    const row = runtimeData[uid]
+    const uidPrefix = String(uid).slice(0, 2)
+    const normalizedUidPrefix = uidPrefix.startsWith('0') ? uidPrefix.slice(1) : uidPrefix
+    const matchesUidPrefix =
+      uidPrefix === paddedSelectedStateCode || normalizedUidPrefix === normalizedSelectedStateCode
+
+    const matchesStateColumn = allStateColumns.some((columnName: string) => {
+      const rawValue = row?.[columnName]
+      if (rawValue === undefined || rawValue === null) return false
+
+      const value = String(rawValue).trim()
+      const normalizedValueStateCode = value.replace(/^0+/, '')
+
+      return (
+        (stateName && value.toLowerCase() === String(stateName).toLowerCase()) ||
+        (stateAbbreviation && value.toUpperCase() === String(stateAbbreviation).toUpperCase()) ||
+        value === stateCode ||
+        normalizedValueStateCode === normalizedSelectedStateCode
+      )
+    })
+
+    if (matchesUidPrefix || matchesStateColumn) {
+      filtered[uid] = runtimeData[uid]
+    }
+  })
+
+  return filtered
+}

package/src/helpers/displayGeoName.ts

@@ -16,30 +16,38 @@ import {
  * Converts a geographic key to its display name.
  *
  * @param {string} key - The geographic key to convert.
- * @param {boolean} [convertFipsCodes=true] - Whether to convert FIPS codes.
+ * @param {string} [displayOverride] - If provided, returns this value immediately (used for translated/alternate display names).
  * @returns {string} - The display name for the geographic key.
  */
-export const displayGeoName = (key: string, convertFipsCodes = true): string => {
-  if (!convertFipsCodes) return key
-  let value = key
+export const displayGeoName = (key: string, displayOverride?: string): string => {
+  const rawKey = String(key || '')
+  const trimmedOverride = typeof displayOverride === 'string' ? displayOverride.trim() : ''
+  const normalizedKey = rawKey.toUpperCase()
+  const normalizedOverride = trimmedOverride.toUpperCase()
+
+  if (trimmedOverride && normalizedOverride !== normalizedKey) {
+    return trimmedOverride
+  }
+
+  let value = rawKey
   let wasLookedUp = false
 
   // Map to first item in values array which is the preferred label
-  if (stateKeys.includes(value)) {
-    value = titleCase(supportedStates[key][0])
+  if (stateKeys.includes(normalizedKey)) {
+    value = titleCase(supportedStates[normalizedKey][0])
     wasLookedUp = true
   }
 
-  if (territoryKeys.includes(value)) {
-    value = titleCase(supportedTerritories[key][0])
+  if (territoryKeys.includes(normalizedKey)) {
+    value = titleCase(supportedTerritories[normalizedKey][0])
     wasLookedUp = true
     if (value === 'U.s. Virgin Islands') {
       value = 'U.S. Virgin Islands'
     }
   }
 
-  if (countryKeys.includes(value)) {
-    value = titleCase(supportedCountries[key][0])
+  if (countryKeys.includes(normalizedKey)) {
+    value = titleCase(supportedCountries[normalizedKey][0])
     wasLookedUp = true
   }
 
@@ -64,7 +72,7 @@ export const displayGeoName = (key: string, convertFipsCodes = true): string =>
     wasLookedUp = true
   }
 
-  if (cityKeys.includes(value)) {
+  if (cityKeys.includes(normalizedKey)) {
     value = titleCase(String(value) || '')
     wasLookedUp = true
   }

package/src/helpers/getMapContainerClasses.ts

@@ -1,12 +1,18 @@
 import { type MapConfig } from './../types/MapConfig'
 import { isMultiCountryActive } from './getCountriesPicked'
+import { isBelowBreakpoint } from '@cdc/core/helpers/viewports'
 
-export const getMapContainerClasses = (state: MapConfig, modal) => {
+export const getMapContainerClasses = (state: MapConfig, modal, currentViewport?: string) => {
   const { general } = state
+  const legendWrapping =
+    (state.legend?.position === 'left' || state.legend?.position === 'right') &&
+    currentViewport &&
+    (currentViewport === 'md' || isBelowBreakpoint('md', currentViewport))
 
   let mapContainerClasses = [
     'map-container',
-    state.legend?.position,
+    'visualization-container',
+    legendWrapping ? 'legend-wrapped-bottom' : state.legend?.position,
     state.general.type,
     state.general.geoType,
     'outline-none',

package/src/helpers/getMatchingPatternForRow.ts

@@ -0,0 +1,67 @@
+import { PatternSelection } from '../types/MapConfig'
+import { patternValuesMatch } from './patternMatching'
+
+export type MatchedPattern = {
+  pattern: PatternSelection
+  patternIndex: number
+  matchedDataKey: string
+}
+
+const hasPatternValue = (value: unknown): boolean => String(value ?? '').trim() !== ''
+
+export const getMatchingPatternForRow = (
+  rowObj: Record<string, any> | null | undefined,
+  patterns: PatternSelection[] | null | undefined
+): MatchedPattern | null => {
+  if (!rowObj || !Array.isArray(patterns) || patterns.length === 0) {
+    return null
+  }
+
+  // First pass: specific key matches always win over broad matches.
+  // If multiple specific patterns match, keep the last configured one to
+  // preserve prior "last overlay wins" map behavior.
+  let lastSpecificMatch: MatchedPattern | null = null
+  for (let i = 0; i < patterns.length; i++) {
+    const pattern = patterns[i]
+    const dataKey = pattern?.dataKey ?? ''
+
+    if (String(dataKey).trim() === '' || !hasPatternValue(pattern?.dataValue)) {
+      continue
+    }
+
+    if (patternValuesMatch(pattern.dataValue, rowObj[dataKey])) {
+      lastSpecificMatch = {
+        pattern,
+        patternIndex: i,
+        matchedDataKey: dataKey
+      }
+    }
+  }
+  if (lastSpecificMatch) {
+    return lastSpecificMatch
+  }
+
+  // Second pass: broad matches (blank dataKey) compare against all row values.
+  // If multiple broad patterns match, keep the last configured one.
+  const rowEntries = Object.entries(rowObj)
+  let lastBroadMatch: MatchedPattern | null = null
+  for (let i = 0; i < patterns.length; i++) {
+    const pattern = patterns[i]
+
+    if (String(pattern?.dataKey ?? '').trim() !== '' || !hasPatternValue(pattern?.dataValue)) {
+      continue
+    }
+
+    for (const [rowKey, rowValue] of rowEntries) {
+      if (patternValuesMatch(pattern.dataValue, rowValue)) {
+        lastBroadMatch = {
+          pattern,
+          patternIndex: i,
+          matchedDataKey: rowKey
+        }
+      }
+    }
+  }
+
+  return lastBroadMatch
+}

package/src/helpers/getPatternForRow.ts

@@ -1,5 +1,5 @@
 import { MapConfig } from '../types/MapConfig'
-import { patternValuesMatch } from './patternMatching'
+import { getMatchingPatternForRow } from './getMatchingPatternForRow'
 
 interface PatternInfo {
   pattern?: string
@@ -10,25 +10,18 @@ interface PatternInfo {
 }
 
 export const getPatternForRow = (rowObj: Record<string, any>, config: MapConfig): PatternInfo | null => {
-  if (!config.map?.patterns || !rowObj) {
+  const matchedPattern = getMatchingPatternForRow(rowObj, config.map?.patterns)
+
+  if (!matchedPattern) {
     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 = patternValuesMatch(patternData.dataValue, rowObj[patternData.dataKey])
-
-    if (hasMatchingValues) {
-      return {
-        pattern: patternData.pattern,
-        dataKey: patternData.dataKey,
-        size: patternData.size,
-        patternIndex: i,
-        color: patternData.color
-      }
-    }
+  return {
+    pattern: matchedPattern.pattern.pattern,
+    // Broad matches resolve to the row key that matched, so IDs/classes stay stable.
+    dataKey: matchedPattern.matchedDataKey,
+    size: matchedPattern.pattern.size,
+    patternIndex: matchedPattern.patternIndex,
+    color: matchedPattern.pattern.color
   }
-
-  return null
 }

package/src/helpers/tests/countyTerritories.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it } from 'vitest'
+import { getCountyTerritoryVisibility } from '../countyTerritories'
+
+describe('countyTerritories', () => {
+  it('collects visible territory prefixes and county ids from runtime data', () => {
+    const runtimeData = {
+      '06001': { uid: '06001', value: 1 },
+      '72001': { uid: '72001', value: 2 }
+    }
+
+    const visibility = getCountyTerritoryVisibility(true, runtimeData)
+
+    expect(visibility.showTerritories).toBe(true)
+    expect(Array.from(visibility.statePrefixes).sort()).toEqual(['72'])
+    expect(Array.from(visibility.countyIds).sort()).toEqual(['72001'])
+    expect(visibility.key).toBe('true:72001')
+  })
+
+  it('collects multiple territory prefixes and ignores non-territory counties', () => {
+    const runtimeData = {
+      '72001': { uid: '72001', value: 1 },
+      '72003': { uid: '72003', value: 2 },
+      '78010': { uid: '78010', value: 3 },
+      '06001': { uid: '06001', value: 4 }
+    }
+
+    const visibility = getCountyTerritoryVisibility(true, runtimeData)
+
+    expect(Array.from(visibility.statePrefixes).sort()).toEqual(['72', '78'])
+    expect(Array.from(visibility.countyIds).sort()).toEqual(['72001', '72003', '78010'])
+    expect(visibility.key).toBe('true:72001,72003,78010')
+  })
+
+  it('hides county territories when the config flag is disabled even if territory data exists', () => {
+    const runtimeData = {
+      '72001': { uid: '72001', value: 1 }
+    }
+
+    const visibility = getCountyTerritoryVisibility(false, runtimeData)
+
+    expect(visibility.showTerritories).toBe(false)
+    expect(Array.from(visibility.statePrefixes).sort()).toEqual(['72'])
+    expect(Array.from(visibility.countyIds).sort()).toEqual(['72001'])
+    expect(visibility.key).toBe('false:')
+  })
+
+  it('hides county territories when the config flag is enabled but no territory data exists', () => {
+    const runtimeData = {
+      '06001': { uid: '06001', value: 1 }
+    }
+
+    const visibility = getCountyTerritoryVisibility(true, runtimeData)
+
+    expect(visibility.showTerritories).toBe(false)
+    expect(Array.from(visibility.statePrefixes).sort()).toEqual([])
+    expect(Array.from(visibility.countyIds).sort()).toEqual([])
+    expect(visibility.key).toBe('false:')
+  })
+
+  it('treats an omitted config flag as enabled by default but still hides territories when no territory data exists', () => {
+    const runtimeData = {
+      '06001': { uid: '06001', value: 1 }
+    }
+
+    const visibility = getCountyTerritoryVisibility(undefined, runtimeData)
+
+    expect(visibility.showTerritories).toBe(false)
+    expect(Array.from(visibility.statePrefixes)).toEqual([])
+    expect(Array.from(visibility.countyIds)).toEqual([])
+    expect(visibility.key).toBe('false:')
+  })
+
+  it('changes the key when visible territory county ids change within the same territory prefix', () => {
+    const firstVisibility = getCountyTerritoryVisibility(true, {
+      '72001': { uid: '72001', value: 1 }
+    })
+    const secondVisibility = getCountyTerritoryVisibility(true, {
+      '72003': { uid: '72003', value: 1 }
+    })
+
+    expect(Array.from(firstVisibility.statePrefixes)).toEqual(['72'])
+    expect(Array.from(secondVisibility.statePrefixes)).toEqual(['72'])
+    expect(firstVisibility.key).toBe('true:72001')
+    expect(secondVisibility.key).toBe('true:72003')
+    expect(firstVisibility.key).not.toBe(secondVisibility.key)
+  })
+})

package/src/helpers/tests/dataTableHelpers.test.ts

@@ -0,0 +1,78 @@
+import { describe, it, expect } from 'vitest'
+import { filterCountyTableRuntimeDataByStateCode } from '../dataTableHelpers'
+
+describe('filterCountyTableRuntimeDataByStateCode', () => {
+  it('filters county rows by selected state fips prefix', () => {
+    const runtimeData = {
+      '06001': { uid: '06001', value: 1 },
+      '06013': { uid: '06013', value: 2 },
+      '12001': { uid: '12001', value: 3 }
+    }
+
+    const filtered = filterCountyTableRuntimeDataByStateCode(runtimeData, '06')
+
+    expect(Object.keys(filtered)).toEqual(['06001', '06013'])
+    expect(filtered['06001'].value).toBe(1)
+    expect(filtered['12001']).toBeUndefined()
+  })
+
+  it('filters county rows when state fips is provided without leading zero', () => {
+    const runtimeData = {
+      '06001': { uid: '06001', value: 1 },
+      '06013': { uid: '06013', value: 2 },
+      '12001': { uid: '12001', value: 3 }
+    }
+
+    const filtered = filterCountyTableRuntimeDataByStateCode(runtimeData, '6')
+
+    expect(Object.keys(filtered)).toEqual(['06001', '06013'])
+    expect(filtered['06001'].value).toBe(1)
+    expect(filtered['12001']).toBeUndefined()
+  })
+
+  it('preserves non-enumerable fromHash metadata', () => {
+    const runtimeData = {
+      '06001': { uid: '06001', value: 1 },
+      '12001': { uid: '12001', value: 2 }
+    }
+
+    Object.defineProperty(runtimeData, 'fromHash', {
+      value: 12345,
+      enumerable: false
+    })
+
+    const filtered = filterCountyTableRuntimeDataByStateCode(runtimeData, '06')
+
+    expect(filtered.fromHash).toBe(12345)
+    expect(Object.keys(filtered)).toEqual(['06001'])
+  })
+
+  it('filters us-geocode rows by configured state column when uid is not county fips', () => {
+    const runtimeData = {
+      'ID:2472': { uid: 'ID:2472', 'State/Territory': 'Alabama' },
+      'ID:1010': { uid: 'ID:1010', 'State/Territory': 'California' },
+      'ID:2020': { uid: 'ID:2020', 'State/Territory': 'California' }
+    }
+
+    const config = {
+      columns: {
+        additionalColumn1: { name: 'State/Territory' }
+      }
+    }
+
+    const filtered = filterCountyTableRuntimeDataByStateCode(runtimeData, '06', config)
+
+    expect(Object.keys(filtered)).toEqual(['ID:1010', 'ID:2020'])
+    expect(filtered['ID:2472']).toBeUndefined()
+  })
+
+  it('returns original runtime data when state fips is empty', () => {
+    const runtimeData = {
+      '06001': { uid: '06001', value: 1 }
+    }
+
+    const filtered = filterCountyTableRuntimeDataByStateCode(runtimeData, '')
+
+    expect(filtered).toBe(runtimeData)
+  })
+})

package/src/helpers/tests/displayGeoName.test.ts

@@ -0,0 +1,17 @@
+import { displayGeoName } from '../displayGeoName'
+
+describe('displayGeoName', () => {
+  it('resolves lowercase world iso codes to country names', () => {
+    expect(displayGeoName('ssd')).toBe('South Sudan')
+    expect(displayGeoName('usa')).toBe('United States of America')
+  })
+
+  it('prefers the provided display override', () => {
+    expect(displayGeoName('ssd', 'Custom South Sudan')).toBe('Custom South Sudan')
+  })
+
+  it('ignores display overrides that only restate the raw code with different casing', () => {
+    expect(displayGeoName('ssd', 'Ssd')).toBe('South Sudan')
+    expect(displayGeoName('SSD', 'ssd')).toBe('South Sudan')
+  })
+})