@cdc/map 4.26.2 → 4.26.3

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

@@ -4,8 +4,8 @@
   }
   .geography-container {
     cursor: move;
-    position: relative;
     flex-grow: 1;
+    position: relative;
     width: 100%;
     .geo-point {
       transition: 0.3s all;

package/src/components/ZoomControls.tsx

@@ -13,27 +13,58 @@ type ZoomControlsProps = {
 const ZoomControls: React.FC<ZoomControlsProps> = ({ handleZoomIn, handleZoomOut, handleZoomReset }) => {
   const { config, setRuntimeData, position } = useContext<MapContext>(ConfigContext)
   if (!config.general.allowMapZoom) return
+
+  const isUsGeocodeMap = config.general.type === 'us-geocode'
+  const shouldShowUsGeocodeReset = isUsGeocodeMap && position.zoom > 1
+  const shouldShowBottomReset = config.general.geoType === 'single-state' || config.general.type === 'bubble'
+
+  if (!isUsGeocodeMap) {
+    return (
+      <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)} 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>
+        {shouldShowBottomReset && (
+          <button onClick={() => handleZoomReset(setRuntimeData)} className='reset' aria-label='Reset Zoom'>
+            Reset Zoom
+          </button>
+        )}
+      </div>
+    )
+  }
+
   return (
-    <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)} 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>
-      {(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
+    <>
+      <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)} 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>
+      </div>
+
+      {shouldShowUsGeocodeReset && (
+        <div className='zoom-controls zoom-controls--top-right' data-html2canvas-ignore='true'>
+          <button onClick={() => handleZoomReset(setRuntimeData)} className='reset' aria-label='Reset Zoom'>
+            Reset Zoom
+          </button>
+        </div>
       )}
-    </div>
+    </>
   )
 }
 

package/src/components/zoomControls.styles.css

@@ -1,14 +1,14 @@
 .zoom-controls {
-  display: flex;
-  position: absolute;
   bottom: 2em;
+  display: flex;
   left: 1em;
+  position: absolute;
   z-index: 4;
   > button.reset {
-    margin-left: 5px;
     background: rgba(0, 0, 0, 0.65);
-    transition: 0.2s all;
     color: #fff;
+    margin-left: 5px;
+    transition: 0.2s all;
     &:hover {
       background: rgba(0, 0, 0, 0.8);
       transition: 0.2s all;
@@ -21,17 +21,17 @@
     }
   }
   > button:not(.reset) {
-    display: flex;
     align-items: center;
+    background: rgba(0, 0, 0, 0.65);
+    border: 0;
+    border-radius: 100%;
+    color: #fff;
+    display: flex;
+    height: 1.75em;
     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;
+    width: 1.75em;
     &:hover {
       background: rgba(0, 0, 0, 0.8);
       transition: 0.2s all;
@@ -51,3 +51,19 @@
     margin-right: 0.25em;
   }
 }
+
+.zoom-controls--top-right {
+  bottom: auto;
+  left: auto;
+  right: 1em;
+  top: 1em;
+}
+
+.zoom-controls--top-right > button.reset {
+  background: #005eaa;
+}
+
+.zoom-controls--top-right > button.reset:hover,
+.zoom-controls--top-right > button.reset:focus {
+  background: #004b88;
+}

package/src/data/initial-state.js

@@ -41,6 +41,7 @@ const createInitialState = () => {
       allowMapZoom: true,
       hideGeoColumnInTooltip: false,
       hidePrimaryColumnInTooltip: false,
+      hideUnselectedStates: true,
       statesPicked: []
     },
     type: 'map',
@@ -49,7 +50,8 @@ const createInitialState = () => {
         name: 'FIPS Codes',
         label: 'Location',
         tooltip: false,
-        dataTable: true
+        dataTable: true,
+        displayColumn: ''
       },
       primary: {
         dataTable: true,
@@ -76,14 +78,14 @@ const createInitialState = () => {
       showSpecialClassesLast: false,
       dynamicDescription: false,
       type: 'equalnumber',
-      numberOfItems: 3,
-      position: 'side',
+      numberOfItems: 5,
+      position: 'top',
       title: '',
-      style: 'circles',
+      style: 'gradient',
       subStyle: 'linear blocks',
       tickRotation: '',
       singleColumnLegend: false,
-      hideBorder: false,
+      hideBorder: true,
       groupBy: ''
     },
     filters: [],
@@ -114,6 +116,13 @@ const createInitialState = () => {
       editorErrorMessage: []
     },
     visual: {
+      border: false,
+      borderColorTheme: false,
+      accent: false,
+      background: false,
+      hideBackgroundColor: false,
+      tp5Treatment: false,
+      tp5Background: false,
       minBubbleSize: 1,
       maxBubbleSize: 20,
       extraBubbleBorder: false,

package/src/data/legacy-defaults.ts

@@ -0,0 +1,8 @@
+// Preserves the OLD default values for properties changed in initial-state.js.
+// When the backfill loop fills a missing property, it uses these values instead
+// of the current defaults so that existing configs aren't visually affected.
+//
+// See backfillDefaults() in @cdc/core for the shared fill logic.
+export const LEGACY_MAP_DEFAULTS: Record<string, Record<string, unknown>> = {
+  legend: { style: 'circles', position: 'side', numberOfItems: 3, hideBorder: false }
+}

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/dataTableHelpers.ts

@@ -1,6 +1,62 @@
+import {
+  stateFipsToTwoDigit as stateFipsToAbbreviation,
+  supportedStatesFipsCodes as supportedStateCodes
+} 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.
+ */
+export const filterCountyTableRuntimeDataByStateCode = (runtimeData: any, stateCode: string, config?: any) => {
+  if (!runtimeData || runtimeData.init || !stateCode) return runtimeData
+
+  const filtered = {}
+  const stateName = supportedStateCodes[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)/i.test(name))
+
+  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 = stateColumnNames.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/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')
+  })
+})