@cdc/map 4.25.10 → 4.26.1

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 = [
@@ -43,9 +30,10 @@ export const GEOCODE_TYPES = {
 
 export const DEFAULT_MAP_BACKGROUND = '#DFE1E2'
 
+export const DISABLED_MAP_COLOR = '#FFFFFF'
+
 // Component constants
 export const LOGO_MAX_WIDTH = '50px'
-export const STORYBOOK_PORT = 6006
 
 // CSV Parsing Configuration
 export const CSV_PARSE_CONFIG = {

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,27 +40,40 @@ 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
   }
 
+  // Check dictionary replacements before city lookup to handle special cases like DC
   const dict = {
     'Washington D.C.': 'District of Columbia',
     'WASHINGTON DC': 'District of Columbia',
     DC: 'District of Columbia',
     'WASHINGTON DC.': 'District of Columbia',
+    'DISTRICT OF COLUMBIA': 'District of Columbia',
+    Dc: 'District of Columbia',
     Congo: 'Republic of the Congo'
   }
 
   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 (cityKeys.includes(value)) {
+    value = titleCase(String(value) || '')
+    wasLookedUp = true
+  }
+
+  // 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 {
-    return value
+    // Apply titleCase to unrecognized values (e.g., "DISTRICT OF COLUMBIA" -> "District of Columbia")
+    return titleCase(value)
   }
 }

package/src/helpers/generateRuntimeFilters.ts

@@ -1,4 +1,4 @@
-import { getUniqueValues } from './index'
+import { getUniqueValues } from '@cdc/core/helpers/getUniqueValues'
 import { handleSorting } from '@cdc/core/components/Filters'
 
 export const generateRuntimeFilters = (state, hash, runtimeFilters) => {

package/src/helpers/generateRuntimeLegend.ts

@@ -4,11 +4,11 @@ import {
   addUIDs,
   applyColorToLegend,
   getGeoFillColor,
-  hashObj,
   indexOfIgnoreType,
   setBinNumbers,
   sortSpecialClassesLast
 } from '.'
+import { hashObj } from '@cdc/core/helpers/hashObj'
 
 import _ from 'lodash'
 import * as d3 from 'd3'
@@ -598,5 +598,3 @@ export const generateRuntimeLegend = (
     }
   }
 }
-
-export default generateRuntimeLegend

package/src/helpers/generateRuntimeLegendHash.ts

@@ -1,4 +1,4 @@
-import { hashObj } from './hashObj'
+import { hashObj } from '@cdc/core/helpers/hashObj'
 import { MapConfig } from '../types/MapConfig'
 
 export const generateRuntimeLegendHash = (config: MapConfig, runtimeFilters) => {

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

@@ -1,6 +1,6 @@
 import { MapConfig } from '../types/MapConfig'
 
-export interface PatternInfo {
+interface PatternInfo {
   pattern?: string
   dataKey: string
   size?: string
@@ -8,10 +8,7 @@ export interface PatternInfo {
   color?: string
 }
 
-export const getPatternForRow = (
-  rowObj: Record<string, any>,
-  config: MapConfig
-): PatternInfo | null => {
+export const getPatternForRow = (rowObj: Record<string, any>, config: MapConfig): PatternInfo | null => {
   if (!config.map?.patterns || !rowObj) {
     return null
   }

package/src/helpers/index.ts

@@ -5,10 +5,8 @@ export { formatLegendLocation } from './formatLegendLocation'
 export { generateColorsArray } from '@cdc/core/helpers/generateColorsArray'
 export { generateRuntimeLegendHash } from './generateRuntimeLegendHash'
 export { getGeoStrokeColor, getGeoFillColor } from './colors'
-export { getUniqueValues } from './getUniqueValues'
 export { handleMapAriaLabels } from './handleMapAriaLabels'
 export { handleMapTabbing } from './handleMapTabbing'
-export { hashObj } from './hashObj'
 export { indexOfIgnoreType } from './indexOfIgnoreType'
 export { isLegendItemDisabled } from './isLegendItemDisabled'
 export { navigationHandler } from './navigationHandler'
@@ -24,7 +22,7 @@ export {
   SVG_WIDTH,
   SVG_PADDING,
   SVG_VIEWBOX,
-  HEADER_COLORS,
   MAX_ZOOM_LEVEL,
-  DEFAULT_MAP_BACKGROUND
+  DEFAULT_MAP_BACKGROUND,
+  DISABLED_MAP_COLOR
 } from './constants'

package/src/helpers/isLegendItemDisabled.ts

@@ -1,4 +1,4 @@
-import { hashObj } from './hashObj'
+import { hashObj } from '@cdc/core/helpers/hashObj'
 
 export const isLegendItemDisabled = (
   dataForCheck: any,
@@ -12,5 +12,5 @@ export const isLegendItemDisabled = (
   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
+  return runtimeLegend.items[disabledIdx]?.disabled || runtimeLegend.items[disabledIdx]?.hidden || false
 }

package/src/helpers/resetLegendToggles.ts

@@ -5,6 +5,7 @@ export const resetLegendToggles = (runtimeLegend, dispatch) => {
 
   legendCopy.items.forEach(legendItem => {
     delete legendItem.disabled
+    delete legendItem.hidden
   })
   legendCopy.disabledAmt = 0
 

package/src/helpers/smallMultiplesHelpers.ts

@@ -0,0 +1,359 @@
+import { DataRow, MapConfig } from '../types/MapConfig'
+
+/**
+ * Get unique values from a specific column in the data
+ * These values will become the tiles in small multiples view
+ *
+ * @param data - The full dataset
+ * @param tileColumn - The column name to extract unique values from
+ * @returns Array of unique values, sorted alphabetically, with null/undefined filtered out
+ */
+export const getTileValues = (data: DataRow[], tileColumn: string): (string | number)[] => {
+  if (!data || !tileColumn) return []
+
+  const uniqueValues = Array.from(new Set(data.map(row => row[tileColumn])))
+    .filter(val => val != null && val !== '')
+    .sort()
+
+  return uniqueValues as (string | number)[]
+}
+
+/**
+ * Filter data for a specific tile based on the tile column and value
+ *
+ * @param allData - The complete dataset
+ * @param tileColumn - The column to filter by
+ * @param tileValue - The value to filter for
+ * @returns Filtered data containing only rows where column === value
+ */
+export const getTileData = (allData: DataRow[], tileColumn: string, tileValue: string | number): DataRow[] => {
+  if (!allData || !tileColumn) return []
+
+  return allData.filter(row => row[tileColumn] === tileValue)
+}
+
+/**
+ * Get the display title for a tile
+ * Uses custom title if configured, otherwise returns the column value
+ *
+ * @param tileValue - The value from the tile column
+ * @param tileTitles - Object mapping values to custom titles
+ * @returns The display title for the tile
+ */
+export const getTileDisplayTitle = (tileValue: string | number, tileTitles?: { [key: string]: string }): string => {
+  if (tileTitles && tileTitles[String(tileValue)]) {
+    return tileTitles[String(tileValue)]
+  }
+  return String(tileValue)
+}
+
+/**
+ * Apply tile ordering based on configuration
+ * Supports ascending, descending, and custom ordering
+ *
+ * @param tileValues - Array of tile values to order
+ * @param orderType - Type of ordering: 'asc', 'desc', or 'custom'
+ * @param customOrder - Custom order array (used when orderType is 'custom')
+ * @param tileTitles - Custom titles for display (used for sorting by title)
+ * @returns Ordered array of tile values
+ */
+export const applyTileOrder = (
+  tileValues: (string | number)[],
+  orderType?: 'asc' | 'desc' | 'custom',
+  customOrder?: string[],
+  tileTitles?: { [key: string]: string }
+): (string | number)[] => {
+  if (!orderType || !tileValues.length) {
+    return tileValues
+  }
+
+  switch (orderType) {
+    case 'asc':
+      return [...tileValues].sort((a, b) => {
+        const titleA = getTileDisplayTitle(a, tileTitles).toLowerCase()
+        const titleB = getTileDisplayTitle(b, tileTitles).toLowerCase()
+        return titleA.localeCompare(titleB)
+      })
+
+    case 'desc':
+      return [...tileValues].sort((a, b) => {
+        const titleA = getTileDisplayTitle(a, tileTitles).toLowerCase()
+        const titleB = getTileDisplayTitle(b, tileTitles).toLowerCase()
+        return titleB.localeCompare(titleA)
+      })
+
+    case 'custom':
+      if (!customOrder || customOrder.length === 0) {
+        return tileValues
+      }
+
+      // Sort tiles based on their position in customOrder array
+      return [...tileValues].sort((a, b) => {
+        const keyA = String(a)
+        const keyB = String(b)
+
+        const orderA = customOrder.indexOf(keyA)
+        const orderB = customOrder.indexOf(keyB)
+
+        // Items not in customOrder go to the end
+        const finalOrderA = orderA === -1 ? 999999 : orderA
+        const finalOrderB = orderB === -1 ? 999999 : orderB
+
+        return finalOrderA - finalOrderB
+      })
+
+    default:
+      return tileValues
+  }
+}
+
+/**
+ * Get tile keys for editor/configuration purposes
+ * This is used in the editor to show available tiles for ordering/titling
+ *
+ * @param config - The map configuration
+ * @param data - The dataset
+ * @returns Array of tile keys (same as getTileValues but specifically for editor use)
+ */
+export const getTileKeys = (config: MapConfig, data: DataRow[]): (string | number)[] => {
+  if (!config.smallMultiples?.tileColumn || !data) {
+    return []
+  }
+
+  return getTileValues(data, config.smallMultiples.tileColumn)
+}
+
+/**
+ * Pivot data from long format to wide format for DataTable display
+ * Transforms data so each unique tileColumn value becomes its own column
+ *
+ * Example:
+ * From: [{geo: "AL", value: 100, pathogen: "COVID"}, {geo: "AL", value: 50, pathogen: "Flu"}]
+ * To:   [{geo: "AL", COVID: 100, Flu: 50}]
+ *
+ * @param data - Original data in long format
+ * @param tileColumn - Column to pivot on (e.g., "pathogen")
+ * @param valueColumn - Column containing values to pivot (e.g., "value")
+ * @param geoColumn - Geography column name (e.g., "geo")
+ * @param tileValues - Ordered array of tile values (determines column order)
+ * @returns Pivoted data in wide format
+ */
+export const pivotDataForDataTable = (
+  data: DataRow[],
+  tileColumn: string,
+  valueColumn: string,
+  geoColumn: string,
+  tileValues: (string | number)[]
+): DataRow[] => {
+  if (!data || !tileColumn || !valueColumn || !geoColumn) return []
+
+  // Group data by geography
+  const geoGroups = new Map<string, DataRow[]>()
+
+  data.forEach(row => {
+    const geoKey = String(row[geoColumn])
+    if (!geoGroups.has(geoKey)) {
+      geoGroups.set(geoKey, [])
+    }
+    geoGroups.get(geoKey)!.push(row)
+  })
+
+  // Create pivoted rows
+  const pivotedData: DataRow[] = []
+
+  geoGroups.forEach((rows, geoKey) => {
+    const pivotedRow: DataRow = {
+      [geoColumn]: geoKey
+    }
+
+    // Copy non-value, non-tile columns from first row (they should be the same for all rows of this geo)
+    const firstRow = rows[0]
+    Object.keys(firstRow).forEach(key => {
+      if (key !== tileColumn && key !== valueColumn && key !== geoColumn) {
+        pivotedRow[key] = firstRow[key]
+      }
+    })
+
+    // Add a column for each tile value
+    rows.forEach(row => {
+      const tileValue = row[tileColumn]
+      if (tileValue != null && tileValue !== '') {
+        pivotedRow[String(tileValue)] = row[valueColumn]
+      }
+    })
+
+    pivotedData.push(pivotedRow)
+  })
+
+  return pivotedData
+}
+
+/**
+ * Pivot runtimeData from long format to wide format
+ * RuntimeData is an object keyed by UID, so we need to pivot the values within each UID
+ *
+ * @param runtimeData - Original runtimeData object keyed by UID
+ * @param tileColumn - Column to pivot on (e.g., "pathogen")
+ * @param valueColumn - Column containing values to pivot (e.g., "activity_level_label")
+ * @param geoColumn - Geography column name (e.g., "State")
+ * @param allData - Full dataset to find all rows for each geo
+ * @param tileValues - Ordered array of tile values
+ * @returns Pivoted runtimeData
+ */
+export const pivotRuntimeDataForDataTable = (
+  runtimeData: { [uid: string]: any },
+  tileColumn: string,
+  valueColumn: string,
+  geoColumn: string,
+  allData: DataRow[],
+  tileValues: (string | number)[]
+): { [uid: string]: any } => {
+  if (!runtimeData || !tileColumn || !valueColumn || !geoColumn || !allData) return runtimeData
+
+  const pivotedRuntimeData: { [uid: string]: any } = {}
+
+  // For each UID in runtimeData
+  Object.keys(runtimeData).forEach(uid => {
+    const baseRow = runtimeData[uid]
+    const geoValue = baseRow[geoColumn]
+
+    // Find all rows in allData for this geo
+    const rowsForThisGeo = allData.filter(row => row[geoColumn] === geoValue)
+
+    // Create pivoted row starting with base row
+    const pivotedRow = { ...baseRow }
+
+    // Add a property for each tile value
+    rowsForThisGeo.forEach(row => {
+      const tileValue = row[tileColumn]
+      if (tileValue != null && tileValue !== '') {
+        pivotedRow[String(tileValue)] = row[valueColumn]
+      }
+    })
+
+    // Remove the original value column and tile column
+    delete pivotedRow[valueColumn]
+    delete pivotedRow[tileColumn]
+
+    pivotedRuntimeData[uid] = pivotedRow
+  })
+
+  return pivotedRuntimeData
+}
+
+/**
+ * Create column configurations for pivoted data table
+ * Generates one column config for each tile value, copying formatting from the original value column
+ * Preserves column order by inserting new columns where the value column was
+ *
+ * @param originalColumns - Original columns configuration
+ * @param valueColumnName - Name of the value column to clone config from
+ * @param tileColumnName - Name of the tile column to remove
+ * @param tileValues - Array of tile values (becomes new column names)
+ * @param tileTitles - Custom titles for columns
+ * @returns New columns configuration with geo column + one column per tile value
+ */
+export const createPivotedColumns = (
+  originalColumns: any,
+  valueColumnName: string,
+  tileColumnName: string,
+  tileValues: (string | number)[],
+  tileTitles?: { [key: string]: string }
+): any => {
+  // Find the original value column config to clone its formatting
+  // Need to search by column.name, not by key
+  let valueColumnConfig = {}
+  let valueColumnKey = null
+
+  Object.keys(originalColumns).forEach(key => {
+    if (originalColumns[key].name === valueColumnName) {
+      valueColumnConfig = originalColumns[key]
+      valueColumnKey = key
+    }
+  })
+
+  // Create new columns object preserving order
+  const newColumns = {}
+
+  // Iterate through original columns
+  Object.keys(originalColumns).forEach(key => {
+    const column = originalColumns[key]
+
+    // Check if this column's name matches the value column
+    if (column.name === valueColumnName) {
+      // Replace value column with pivoted columns
+      tileValues.forEach(tileValue => {
+        const columnKey = String(tileValue)
+        newColumns[columnKey] = {
+          ...valueColumnConfig,
+          name: columnKey,
+          label: getTileDisplayTitle(tileValue, tileTitles),
+          dataTable: true
+        }
+      })
+    } else if (column.name === tileColumnName) {
+      // Skip tile column - don't add it to new columns
+      return
+    } else {
+      // Keep all other columns
+      newColumns[key] = originalColumns[key]
+    }
+  })
+
+  return newColumns
+}
+
+/**
+ * Prepare data table props for small multiples display
+ * If small multiples is enabled, pivots data and columns. Otherwise returns originals.
+ *
+ * @param config - Map configuration
+ * @param columns - Original columns configuration
+ * @param runtimeData - Original runtime data
+ * @returns Object with modified config, columns, and runtimeData (or originals if not small multiples)
+ */
+export const prepareSmallMultiplesDataTable = (
+  config: MapConfig,
+  columns: any,
+  runtimeData: any
+): { config: MapConfig; columns: any; runtimeData: any } => {
+  const { tileColumn, tileOrderType, tileOrder, tileTitles } = config.smallMultiples
+  const valueColumn = config.columns.primary?.name
+  const geoColumn = config.columns.geo?.name
+
+  // If required columns aren't configured, return originals
+  if (!valueColumn || !geoColumn) {
+    return { config, columns, runtimeData }
+  }
+
+  // Get ordered tile values
+  const rawTileValues = getTileValues(config.data, tileColumn)
+  const orderedTileValues = applyTileOrder(rawTileValues, tileOrderType, tileOrder, tileTitles)
+
+  // Pivot data
+  const pivotedData = pivotDataForDataTable(config.data, tileColumn, valueColumn, geoColumn, orderedTileValues)
+
+  // Pivot runtimeData
+  const pivotedRuntimeData = pivotRuntimeDataForDataTable(
+    runtimeData,
+    tileColumn,
+    valueColumn,
+    geoColumn,
+    config.data,
+    orderedTileValues
+  )
+
+  // Create pivoted columns
+  const pivotedColumns = createPivotedColumns(columns, valueColumn, tileColumn, orderedTileValues, tileTitles)
+
+  // Return modified config with pivoted data and columns
+  return {
+    config: {
+      ...config,
+      data: pivotedData,
+      columns: pivotedColumns
+    },
+    columns: pivotedColumns,
+    runtimeData: pivotedRuntimeData
+  }
+}

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

@@ -1,4 +1,4 @@
-import { hashObj } from '../hashObj'
+import { hashObj } from '@cdc/core/helpers/hashObj'
 
 describe('hashObj', () => {
   it('should return a hash value for a given object', () => {