@cdc/map 4.25.7 → 4.25.10

package/src/helpers/applyColorToLegend.ts

@@ -1,74 +1,151 @@
-import colorPalettes from '@cdc/core/data/colorPalettes'
+import { mapColorPalettes as colorPalettes } from '@cdc/core/data/colorPalettes'
 import chroma from 'chroma-js'
-import { type MapConfig } from '@cdc/map/src/types/MapConfig'
-import { colorDistributions } from './colorDistributions'
+import { type MapConfig } from '../types/MapConfig'
+import { mapV1ColorDistribution } from '@cdc/core/helpers/palettes/colorDistributions'
+import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
+
+// Palette name migrations from v1 to v2
+const mapPaletteNameMigrations = {
+  yelloworangered: 'sequential_yellow_orange_red',
+  yelloworangebrown: 'sequential_yellow_orange_brown',
+  pinkpurple: 'sequential_pink_purple',
+  pinkpurplereverse: 'sequential_pink_purplereverse',
+  bluegreen: 'sequential_blue_green',
+  bluegreenreverse: 'sequential_blue_greenreverse',
+  orangered: 'sequential_orange_red',
+  orangeredreverse: 'sequential_orange_redreverse',
+  red: 'sequential_red',
+  redreverse: 'sequential_redreverse',
+  greenblue: 'sequential_green_blue',
+  greenbluereverse: 'sequential_green_bluereverse',
+  yelloworangeredreverse: 'sequential_yellow_orange_redreverse',
+  yelloworangebrownreverse: 'sequential_yellow_orange_brownreverse',
+  yellowpurple: 'divergent_yellow_purple',
+  yellowpurplereverse: 'divergent_yellow_purplereverse',
+  qualitative1: 'qualitative1',
+  qualitative2: 'qualitative2',
+  qualitative3: 'qualitative3',
+  qualitative4: 'qualitative4',
+  qualitative9: 'qualitative9',
+  'sequential-blue-2(MPX)': 'sequential_blue_extended',
+  'sequential-blue-2(MPX)reverse': 'sequential_blue_extendedreverse',
+  'sequential-orange(MPX)': 'sequential_orange_extended',
+  'sequential-orange(MPX)reverse': 'sequential_orange_extendedreverse',
+  colorblindsafe: 'colorblindsafe',
+  qualitative1reverse: 'qualitative1reverse',
+  qualitative2reverse: 'qualitative2reverse',
+  qualitative3reverse: 'qualitative3reverse',
+  qualitative4reverse: 'qualitative4reverse',
+  qualitative9reverse: 'qualitative9reverse',
+  colorblindsafereverse: 'colorblindsafereverse'
+}
 
 type LegendItem = {
   special: boolean
 }
 
-//  Applies color to a legend item based on its index and special classes.
-export const applyColorToLegend = (legendItemIndex: number, config: MapConfig, result: LegendItem[] = []): string => {
+/**
+ * applyColorToLegend
+ * @param legendIdx legend item index
+ * @param config chart config
+ * @param result hash of legend items
+ * @returns string - the corresponding color for the legend item
+ */
+export const applyColorToLegend = (legendIdx: number, config: MapConfig, result: LegendItem[] = []): string => {
   if (!config) throw new Error('Config is required')
 
-  const { legend, customColors, general, color } = config
-  const { geoType, palette } = general
-  const specialClasses = legend?.specialClasses ?? []
-  const colorPalette = customColors ?? colorPalettes[color] ?? colorPalettes['bluegreen']
+  const { legend, general } = config
+  const { geoType, palette = { name: 'bluegreen', isReversed: false } } = general
+  // Support both migrated (general.palette.name) and legacy (config.color) palette locations
+  const version = getColorPaletteVersion(config)
+  let color = general?.palette?.name || config.color || palette.name || 'bluegreen'
 
-  // Handle Region Maps need for a 10th color
-  if (geoType === 'us-region' && colorPalette.length < 10 && colorPalette.length > 8) {
-    const darkenedColor = chroma(colorPalette[palette.isReversed ? 0 : 8])
-      .darken(0.75)
-      .hex()
-    palette.isReversed ? colorPalette.unshift(darkenedColor) : colorPalette.push(darkenedColor)
+  // Apply palette migration if needed (v1 name -> v2 name)
+  if (mapPaletteNameMigrations[color]) {
+    color = mapPaletteNameMigrations[color]
   }
 
-  // Check if there are actually any special classes in the current result
-  const actualSpecialClassesCount = result.filter(item => item.special).length
+  // Try multiple approaches to find the palette
+  let mapColorPalette = general?.palette?.customColors
 
-  const regularItemColorIndex = legendItemIndex - actualSpecialClassesCount
+  if (!mapColorPalette) {
+    // Try the detected version first
+    mapColorPalette = colorPalettes?.[`v${version}`]?.[color]
+  }
 
-  // Handle special classes coloring
-  if (result[legendItemIndex]?.special) {
-    const specialClassColors = chroma.scale(['#D4D4D4', '#939393']).colors(specialClasses.length)
-    return specialClassColors[legendItemIndex]
+  if (!mapColorPalette) {
+    // Try v2 explicitly
+    mapColorPalette = colorPalettes?.v2?.[color]
+  }
+
+  if (!mapColorPalette) {
+    // Try v1 with original color name
+    const originalColor = general?.palette?.name || config.color || palette.name || 'bluegreen'
+    mapColorPalette = colorPalettes?.v1?.[originalColor]
+  }
+
+  if (!mapColorPalette) {
+    // Final fallback
+    mapColorPalette = colorPalettes.v1['bluegreen']
   }
 
-  // For categorical maps with custom colors, use color distribution logic
-  if (config.legend?.type === 'category' && customColors) {
-    const amt = config.legend.additionalCategories?.length ?? 10
-    const distributionArray = colorDistributions[amt] ?? []
+  // Handle Region Maps need for a 10th color
+  if (geoType === 'us-region' && mapColorPalette.length < 10 && mapColorPalette.length > 8) {
+    const newColor = chroma(mapColorPalette[config.general.palette.isReversed ? 0 : 8])
+      .darken(0.75)
+      .hex()
+    config.general.palette.isReversed ? mapColorPalette.unshift(newColor) : mapColorPalette.push(newColor)
+  }
 
-    const specificColor = distributionArray[legendItemIndex - specialClasses.length] ?? colorPalette.at(-1)
+  // Count actual special classes in the result array
+  const actualSpecialClassCount = result.filter(item => item.special).length
+  const colorIdx = legendIdx - actualSpecialClassCount
 
-    // If specificColor is a number, use it as an index; otherwise return the color directly
-    return colorPalette[specificColor] ?? '#fff'
+  // Handle special classes coloring
+  if (result[legendIdx]?.special) {
+    const specialClassColors = chroma.scale(['#D4D4D4', '#939393']).colors(actualSpecialClassCount)
+    const specialClassIdx = result.slice(0, legendIdx + 1).filter(item => item.special).length - 1
+    return specialClassColors[specialClassIdx]
   }
 
   // Use qualitative color palettes directly
   if (color.includes('qualitative')) {
-    const safeIndex = Math.max(0, Math.min(regularItemColorIndex, colorPalette.length - 1))
-    return colorPalette[safeIndex]
+    return mapColorPalette[colorIdx]
   }
 
-  // Determine color distribution - use actual special classes count for consistent coloring
-  const legendItemCount =
-    Math.max(result.length - actualSpecialClassesCount, 1) < 10
-      ? Math.max(result.length - actualSpecialClassesCount, 1)
-      : Object.keys(colorDistributions).length
-
-  const colorDistributionArray = colorDistributions[legendItemCount] ?? []
+  // Determine color distribution based on non-special items
+  // For numeric legends, use the configured numberOfItems for consistent color distribution
+  // For category legends, use the actual result length
+  const isNumericLegend = legend && ['equalnumber', 'equalinterval'].includes(legend.type)
+  const nonSpecialItemCount = isNumericLegend
+    ? (legend.numberOfItems || result.length)
+    : result.length - actualSpecialClassCount
+
+  const amt =
+    Math.max(nonSpecialItemCount, 1) < 10
+      ? Math.max(nonSpecialItemCount, 1)
+      : Object.keys(mapV1ColorDistribution).length
+  const distributionArray = mapV1ColorDistribution[amt] ?? []
+
+  // Safety check to ensure mapColorPalette exists and is an array
+  if (!mapColorPalette || !Array.isArray(mapColorPalette) || mapColorPalette.length === 0) {
+    console.warn('No valid color palette found, returning gray fallback')
+    return '#d3d3d3'
+  }
 
-  const rowDistributionIndex = colorDistributionArray[legendItemIndex - actualSpecialClassesCount]
+  const specificColor =
+    distributionArray[colorIdx] ?? mapColorPalette[colorIdx] ?? mapColorPalette[mapColorPalette.length - 1]
 
-  const colorValue = rowDistributionIndex ?? colorPalette[regularItemColorIndex] ?? colorPalette.at(-1)
+  if (typeof specificColor === 'number') {
+    return specificColor < mapColorPalette.length
+      ? mapColorPalette[specificColor]
+      : mapColorPalette[mapColorPalette.length - 1]
+  }
 
-  // Check if specificColor is a string(e.g., a valid color code)
-  if (typeof colorValue === 'string' && config.legend?.type === 'category' && customColors) {
-    return colorValue
+  if (typeof specificColor === 'string') {
+    return specificColor
   }
 
-  // Otherwise, use specificColor as an index for mapColorPalette
-  return colorPalette[colorValue]
+  // Final fallback
+  return mapColorPalette[0] || '#d3d3d3'
 }

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,27 +28,26 @@ 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 = String(hashObj(rowObj))
+    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?.[idx]?.disabled) {
-      return generateColorsArray()
+    if (runtimeLegend.items?.[disabledIdx]?.disabled) {
+      return generateColorsArray(DEFAULT_MAP_BACKGROUND)
     }
 
-    // Use the index from legendMemo which should already be updated for reordered items
-    const legendItem = runtimeLegend.items?.[idx]
-    const legendBinColor = legendItem?.color
-
-    return generateColorsArray(legendBinColor, legendItem?.special)
+    const legendBinColor = runtimeLegend.items.find(o => o.bin === idx)?.color
+    return generateColorsArray(legendBinColor, runtimeLegend.items[idx]?.special)
   } catch (e) {
     console.error('COVE: ', e)
     return null

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

@@ -42,3 +42,15 @@ export const GEOCODE_TYPES = {
 } as const
 
 export const DEFAULT_MAP_BACKGROUND = '#DFE1E2'
+
+// Component constants
+export const LOGO_MAX_WIDTH = '50px'
+export const STORYBOOK_PORT = 6006
+
+// 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

@@ -1,5 +1,14 @@
 import { titleCase } from './titleCase'
-import { supportedStates, supportedTerritories, supportedCountries, supportedCounties } from '../data/supported-geos'
+import {
+  supportedStates,
+  supportedTerritories,
+  supportedCountries,
+  supportedCounties,
+  stateKeys,
+  territoryKeys,
+  countryKeys,
+  countyKeys
+} from '../data/supported-geos'
 
 /**
  * Converts a geographic key to its display name.
@@ -10,10 +19,6 @@ import { supportedStates, supportedTerritories, supportedCountries, supportedCou
  */
 export const displayGeoName = (key: string, convertFipsCodes = true): string => {
   if (!convertFipsCodes) return key
-  const stateKeys = Object.keys(supportedStates)
-  const territoryKeys = Object.keys(supportedTerritories)
-  const countryKeys = Object.keys(supportedCountries)
-  const countyKeys = Object.keys(supportedCounties)
   let value = key
 
   // Map to first item in values array which is the preferred label
@@ -44,13 +49,13 @@ export const displayGeoName = (key: string, convertFipsCodes = true): string =>
     Congo: 'Republic of the Congo'
   }
 
-  if (true === Object.keys(dict).includes(value)) {
+  if (Object.keys(dict).includes(value)) {
     value = dict[value]
   }
   // 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') {
     return value
   } else {
-    return titleCase(value)
+    return value
   }
 }

package/src/helpers/formatLegendLocation.ts

@@ -1,8 +1,6 @@
-import { stateFipsToTwoDigit, supportedCounties } from '../data/supported-geos'
+import { stateFipsToTwoDigit, supportedCounties, countyKeySet } from '../data/supported-geos'
 import { titleCase } from './titleCase'
 
-const countyKeySet = new Set(Object.keys(supportedCounties))
-
 export const formatLegendLocation = (key, runtimeLookup) => {
   let formattedName = ''