@cdc/map 4.25.8 → 4.25.11

package/src/helpers/applyLegendToRow.ts

@@ -1,7 +1,9 @@
-import { generateColorsArray, hashObj } from '../helpers'
-import colorPalettes from '@cdc/core/data/colorPalettes'
+import { generateColorsArray } from '@cdc/core/helpers/generateColorsArray'
+import { hashObj, DEFAULT_MAP_BACKGROUND } from '../helpers'
+import { mapColorPalettes as colorPalettes } from '@cdc/core/data/colorPalettes'
 import { MapConfig } from '../types/MapConfig'
 import { type RuntimeLegend } from '../types/runtimeLegend'
+import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
 
 type Memo<T> = { current: Map<string, T> }
 
@@ -14,8 +16,9 @@ export const applyLegendToRow = (
 ): string[] => {
   if (!config) return null
 
-  const { general, color, legend } = config
+  const { general, legend } = config
   const { type } = general
+  const color = general.palette?.name ?? 'bluegreenreverse'
   const { showSpecialClassesLast } = legend
 
   try {
@@ -25,21 +28,22 @@ export const applyLegendToRow = (
     }
 
     if (type === 'navigation') {
-      const mapColorPalette = colorPalettes[color] ?? colorPalettes['bluegreenreverse']
+      const mapColorPalette =
+        colorPalettes[`v${getColorPaletteVersion(config)}`]?.[color] ?? colorPalettes.v1['bluegreenreverse']
       return generateColorsArray(mapColorPalette[3])
     }
 
     const hash = hashObj(rowObj)
 
     if (!legendMemo.current.has(hash)) {
-      return generateColorsArray()
+      return generateColorsArray(DEFAULT_MAP_BACKGROUND)
     }
 
     const idx = legendMemo.current.get(hash)!
     const disabledIdx = showSpecialClassesLast ? legendSpecialClassLastMemo.current.get(hash) ?? idx : idx
 
     if (runtimeLegend.items?.[disabledIdx]?.disabled) {
-      return generateColorsArray()
+      return generateColorsArray(DEFAULT_MAP_BACKGROUND)
     }
 
     const legendBinColor = runtimeLegend.items.find(o => o.bin === idx)?.color

package/src/helpers/componentHelpers.ts

@@ -0,0 +1,8 @@
+/**
+ * Builds CSS class names for the main map section container
+ */
+export const buildSectionClassNames = (viewport: string, headerColor: string, hasError: boolean): string => {
+  const classes = ['cove-component__content', 'cdc-map-inner-container', viewport, headerColor]
+  if (hasError) classes.push('type-map--has-error')
+  return classes.join(' ')
+}

package/src/helpers/constants.ts

@@ -1,20 +1,7 @@
 export const SVG_WIDTH = 880
 export const SVG_HEIGHT = 500
-export const SVG_PADDING = 50
+export const SVG_PADDING = 25
 export const SVG_VIEWBOX = `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`
-export const HEADER_COLORS = [
-  'theme-blue',
-  'theme-purple',
-  'theme-brown',
-  'theme-teal',
-  'theme-pink',
-  'theme-orange',
-  'theme-slate',
-  'theme-indigo',
-  'theme-cyan',
-  'theme-green',
-  'theme-amber'
-]
 export const MAX_ZOOM_LEVEL = 4
 
 export const SUPPORTED_DC_NAMES = [
@@ -42,3 +29,14 @@ export const GEOCODE_TYPES = {
 } as const
 
 export const DEFAULT_MAP_BACKGROUND = '#DFE1E2'
+
+// Component constants
+export const LOGO_MAX_WIDTH = '50px'
+
+// CSV Parsing Configuration
+export const CSV_PARSE_CONFIG = {
+  header: true,
+  dynamicTyping: true,
+  skipEmptyLines: true,
+  encoding: 'utf-8'
+} as const

package/src/helpers/dataTableHelpers.ts

@@ -0,0 +1,6 @@
+/**
+ * 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
+}

package/src/helpers/displayGeoName.ts

@@ -4,10 +4,12 @@ import {
   supportedTerritories,
   supportedCountries,
   supportedCounties,
+  supportedCities,
   stateKeys,
   territoryKeys,
   countryKeys,
-  countyKeys
+  countyKeys,
+  cityKeys
 } from '../data/supported-geos'
 
 /**
@@ -20,14 +22,17 @@ import {
 export const displayGeoName = (key: string, convertFipsCodes = true): string => {
   if (!convertFipsCodes) return key
   let value = key
+  let wasLookedUp = false
 
   // Map to first item in values array which is the preferred label
   if (stateKeys.includes(value)) {
     value = titleCase(supportedStates[key][0])
+    wasLookedUp = true
   }
 
   if (territoryKeys.includes(value)) {
     value = titleCase(supportedTerritories[key][0])
+    wasLookedUp = true
     if (value === 'U.s. Virgin Islands') {
       value = 'U.S. Virgin Islands'
     }
@@ -35,10 +40,17 @@ export const displayGeoName = (key: string, convertFipsCodes = true): string =>
 
   if (countryKeys.includes(value)) {
     value = titleCase(supportedCountries[key][0])
+    wasLookedUp = true
   }
 
   if (countyKeys.includes(value)) {
     value = titleCase(supportedCounties[key])
+    wasLookedUp = true
+  }
+
+  if (cityKeys.includes(value)) {
+    value = titleCase(String(value) || '')
+    wasLookedUp = true
   }
 
   const dict = {
@@ -51,11 +63,14 @@ export const displayGeoName = (key: string, convertFipsCodes = true): string =>
 
   if (Object.keys(dict).includes(value)) {
     value = dict[value]
+    wasLookedUp = true
   }
-  // if you get here and it's 2 letters then DONT titleCase state abbreviations like "AL"
-  if (value?.length === 2 || value === 'U.S. Virgin Islands') {
+
+  // If value was looked up from our dictionaries and needs formatting, or if it's a 2-letter abbreviation, return as-is
+  if (value?.length === 2 || value === 'U.S. Virgin Islands' || wasLookedUp) {
     return value
   } else {
+    // Apply titleCase to unrecognized values (e.g., "DISTRICT OF COLUMBIA" -> "District of Columbia")
     return titleCase(value)
   }
 }

package/src/helpers/generateRuntimeLegend.ts

@@ -14,8 +14,13 @@ import _ from 'lodash'
 import * as d3 from 'd3'
 
 // Cdc
-import colorPalettes from '@cdc/core/data/colorPalettes'
+import { mapColorPalettes as colorPalettes } from '@cdc/core/data/colorPalettes'
 import { supportedCountries } from '../data/supported-geos'
+import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
+import { v2ColorDistribution } from '@cdc/core/helpers/palettes/colorDistributions'
+
+// Types
+import { MapConfig, DataRow, RuntimeFilters } from '../types/MapConfig'
 
 type LegendItem = {
   special?: boolean
@@ -34,11 +39,11 @@ export type GeneratedLegend = {
 }
 
 export const generateRuntimeLegend = (
-  configObj,
-  runtimeData: object[],
+  configObj: MapConfig,
+  runtimeData: DataRow[],
   hash: string,
-  setConfig: Function,
-  runtimeFilters: object[],
+  setConfig: (newMapConfig: MapConfig) => void,
+  runtimeFilters: RuntimeFilters,
   legendMemo: React.MutableRefObject<Map<string, number>>,
   legendSpecialClassLastMemo: React.MutableRefObject<Map<string, number>>
 ): GeneratedLegend | [] => {
@@ -331,8 +336,35 @@ export const generateRuntimeLegend = (
           numberOfRows -= chunkAmt
         }
       } else {
-        let colors = colorPalettes[configObj.color]
-        let colorRange = colors.slice(0, legend.numberOfItems)
+        const paletteName = configObj.general?.palette?.name || configObj.color
+        const version = getColorPaletteVersion(configObj)
+        let colors = colorPalettes?.[`v${version}`]?.[paletteName]
+        // Fallback to a default palette if none is selected or found
+        if (!colors) {
+          const defaultPalette = version === 1 ? 'sequential_blue_green' : 'sequential_blue'
+          colors = colorPalettes?.[`v${version}`]?.[defaultPalette]
+        }
+
+        if (!colors) {
+          console.warn('No color palette found, using fallback colors')
+          colors = ['#d3d3d3', '#a0a0a0', '#707070', '#404040'] // Gray fallback
+        }
+
+        // Check if we should use v2 distribution logic for better contrast
+        const isSequentialOrDivergent =
+          paletteName && (paletteName.includes('sequential') || paletteName.includes('divergent'))
+        const useV2Distribution =
+          version === 2 && isSequentialOrDivergent && colors.length === 9 && legend.numberOfItems <= 9
+
+        let colorRange
+        if (useV2Distribution && v2ColorDistribution[legend.numberOfItems]) {
+          // Use strategic color distribution for v2 sequential/divergent palettes
+          const distributionIndices = v2ColorDistribution[legend.numberOfItems]
+          colorRange = distributionIndices.map(index => colors[index])
+        } else {
+          // Use existing logic for v1 palettes and other cases
+          colorRange = colors.slice(0, legend.numberOfItems)
+        }
 
         const getDomain = () => {
           // backwards compatibility
@@ -559,8 +591,10 @@ export const generateRuntimeLegend = (
     return result
   } catch (e) {
     console.error(e)
-    return []
+    return {
+      fromHash: null,
+      runtimeDataHash: null,
+      items: []
+    }
   }
 }
-
-export default generateRuntimeLegend

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

@@ -0,0 +1,103 @@
+import { supportedCountries } from '../data/supported-geos'
+import type { MapConfig } from '../types/MapConfig'
+
+export interface CountryPickedInfo {
+  iso: string
+  name: string
+}
+
+export const getCountriesPicked = (config: MapConfig): CountryPickedInfo[] => {
+  if (!config.general.countriesPicked || config.general.countriesPicked.length === 0) {
+    return []
+  }
+
+  return config.general.countriesPicked.map(country => {
+    // Validate that the ISO code exists in our supported countries
+    if (!supportedCountries[country.iso]) {
+      console.error(`Country ISO code "${country.iso}" not found in supported countries.`)
+    }
+
+    return {
+      iso: country.iso,
+      name: country.name
+    }
+  })
+}
+
+/**
+ * ISO codes that are in supported-geos.js but don't have geometries in world-topo.json
+ * These are filtered out to prevent users from selecting countries that won't render
+ */
+const EXCLUDED_ISOS = new Set([
+  // US Territories (not in topology - grouped with USA or missing)
+  'ASM',
+  'GUM',
+  'MNP',
+  'VIR',
+  // Small territories/islands without separate geometries
+  'ALA',
+  'AIA',
+  'AND',
+  'ABW',
+  'BES',
+  'BMU',
+  'BVT',
+  'CXR',
+  'CCK',
+  'COK',
+  'CUW',
+  'FRO',
+  'GGY',
+  'HMD',
+  'IMN',
+  'JEY',
+  'LIE',
+  'MCO',
+  'MSR',
+  'NRU',
+  'NIU',
+  'NFK',
+  'PCN',
+  'SGS',
+  'SJM',
+  'TKL',
+  'TCA',
+  'TUV',
+  'VAT',
+  'WLF'
+])
+
+/**
+ * Helper to get all supported countries formatted for dropdown options
+ * Filters to only valid ISO 3166-1 alpha-3 codes and removes countries without topology
+ */
+export const getSupportedCountryOptions = () => {
+  return Object.keys(supportedCountries)
+    .filter(iso => /^[A-Z]{3}$/.test(iso)) // Only proper 3-letter ISO codes
+    .filter(iso => !EXCLUDED_ISOS.has(iso)) // Exclude countries without topology
+    .map(iso => ({
+      value: iso,
+      label: supportedCountries[iso][0] // Use the first (primary) name
+    }))
+    .sort((a, b) => a.label.localeCompare(b.label)) // Sort alphabetically by name
+}
+
+/**
+ * Helper to determine if the map should show only selected countries
+ * Returns true if countries are selected, false if showing all countries
+ */
+export const isMultiCountryActive = (config: MapConfig): boolean => {
+  return Boolean(config.general.countriesPicked && config.general.countriesPicked.length > 0)
+}
+
+/**
+ * Helper to determine display mode for unselected countries
+ * Returns 'hidden' if hideUnselectedCountries is true, 'grayed' if false (default)
+ */
+export const getUnselectedCountryDisplayMode = (config: MapConfig): 'hidden' | 'grayed' | 'normal' => {
+  if (!isMultiCountryActive(config)) {
+    return 'normal' // Show all countries normally when none are specifically selected
+  }
+
+  return config.general.hideUnselectedCountries ? 'hidden' : 'grayed'
+}

package/src/helpers/getMapContainerClasses.ts

@@ -1,4 +1,5 @@
 import { type MapConfig } from './../types/MapConfig'
+import { isMultiCountryActive } from './getCountriesPicked'
 
 export const getMapContainerClasses = (state: MapConfig, modal) => {
   const { general } = state
@@ -19,5 +20,11 @@ export const getMapContainerClasses = (state: MapConfig, modal) => {
   if (general.type === 'navigation' && true === general.fullBorder) {
     mapContainerClasses.push('full-border')
   }
+
+  // Add multi-country class when multi-country mode is active
+  if (isMultiCountryActive(state)) {
+    mapContainerClasses.push('multi-country-selected')
+  }
+
   return mapContainerClasses
 }

package/src/helpers/getPatternForRow.ts

@@ -0,0 +1,33 @@
+import { MapConfig } from '../types/MapConfig'
+
+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

@@ -3,9 +3,12 @@ import { supportedStatesFipsCodes } from '../data/supported-geos'
 
 export const getStatesPicked = (config, runtimeData) => {
   const stateNames = getFilterControllingStatesPicked(config, runtimeData)
-
-  return stateNames.map(stateName => ({
-    fipsCode: Object.keys(supportedStatesFipsCodes).find(key => supportedStatesFipsCodes[key] === stateName),
-    stateName
-  }))
+  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/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,4 @@ 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, 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 })
 }