@cdc/map 4.25.10 → 4.25.11

package/src/components/WorldMap/WorldMap.tsx

@@ -11,6 +11,7 @@ import CityList from '../CityList'
 import BubbleList from '../BubbleList'
 import ZoomControls from '../ZoomControls'
 import { supportedCountries } from '../../data/supported-geos'
+import { getCountriesPicked } from '../../helpers/getCountriesPicked'
 import {
   getGeoFillColor,
   getGeoStrokeColor,
@@ -24,6 +25,7 @@ import {
 } from '../../helpers'
 import useGeoClickHandler from '../../hooks/useGeoClickHandler'
 import useApplyTooltipsToGeo from '../../hooks/useApplyTooltipsToGeo'
+import useCountryZoom from '../../hooks/useCountryZoom'
 import generateRuntimeData from '../../helpers/generateRuntimeData'
 import { applyLegendToRow } from '../../helpers/applyLegendToRow'
 
@@ -33,17 +35,24 @@ import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 let projection = geoMercator()
 
+const GRAYED_OUT_COLOR = '#d3d3d3'
+
+type MapPosition = { coordinates: number[]; zoom: number }
+
 const WorldMap = () => {
   // prettier-ignore
   const {
     runtimeData,
-    position,
+    position: mapPosition,
     config,
     tooltipId,
     runtimeLegend,
     interactionLabel
   } = useContext(ConfigContext)
 
+  // Type assertion: position from context is actually the map viewport position, not legend position
+  const position = mapPosition as unknown as MapPosition
+
   const { legendMemo, legendSpecialClassLastMemo } = useLegendMemoContext()
 
   const { type, allowMapZoom } = config.general
@@ -51,12 +60,16 @@ const WorldMap = () => {
   const [world, setWorld] = useState(null)
   const { geoClickHandler } = useGeoClickHandler()
   const { applyTooltipsToGeo } = useApplyTooltipsToGeo()
+
+  const { centerOnCountries } = useCountryZoom(world)
+
   const dispatch = useContext(MapDispatchContext)
 
   useEffect(() => {
     const fetchData = async () => {
       import(/* webpackChunkName: "world-topo" */ './data/world-topo.json').then(topoJSON => {
-        setWorld(feature(topoJSON, topoJSON.objects.countries).features)
+        const worldFeatures = feature(topoJSON, topoJSON.objects.countries).features
+        setWorld(worldFeatures)
       })
     }
     fetchData()
@@ -66,6 +79,19 @@ const WorldMap = () => {
     return <></>
   }
 
+  // Filter countries based on selection
+  const getFilteredWorld = () => {
+    if (!config.general.countriesPicked || config.general.countriesPicked.length === 0) {
+      return world // Show all countries if none selected
+    }
+
+    // Always show all countries when multi-country mode is active
+    // Individual country styling will handle hide/grayed-out states
+    return world
+  }
+
+  const filteredWorld = getFilteredWorld()
+
   const handleFiltersReset = () => {
     const newRuntimeData = generateRuntimeData(config)
     publishAnalyticsEvent({
@@ -89,7 +115,15 @@ const WorldMap = () => {
       eventLabel: interactionLabel,
       vizTitle: getVizTitle(config)
     })
-    dispatch({ type: 'SET_POSITION', payload: { coordinates: [0, 30], zoom: 1 } })
+
+    // If countries are selected, center on them; otherwise, use default world position
+    const countriesPicked = getCountriesPicked(config)
+
+    if (countriesPicked && countriesPicked.length > 0) {
+      centerOnCountries('reset')
+    } else {
+      dispatch({ type: 'SET_POSITION', payload: { coordinates: [0, 30], zoom: 1 } })
+    }
   }
 
   const handleZoomIn = position => {
@@ -189,25 +223,57 @@ const WorldMap = () => {
       const geoStrokeColor = getGeoStrokeColor(config)
       const geoFillColor = getGeoFillColor(config)
 
+      // Check if this country should be greyed out for multi-country selection
+      const countriesPicked = getCountriesPicked(config)
+
+      const isGreyedOut = Boolean(
+        countriesPicked.length > 0 &&
+          config.general.hideUnselectedCountries !== true &&
+          !countriesPicked.some(country => country.iso === geo.properties.iso || country.name === geoDisplayName)
+      )
+
+      // Determine visual state for TDD tests
+      const isSelected = countriesPicked.some(
+        country => country.iso === geo.properties.iso || country.name === geoDisplayName
+      )
+      const isHidden = countriesPicked.length > 0 && config.general.hideUnselectedCountries === true && !isSelected
+
+      // Build CSS class names for TDD tests
+      let geoClassName = ''
+      if (countriesPicked.length > 0) {
+        if (isSelected) {
+          geoClassName = 'selected'
+        } else if (isGreyedOut) {
+          geoClassName = 'grayed-out'
+        } else if (isHidden) {
+          geoClassName = 'hidden'
+        }
+      }
+
       let styles: Record<string, string | Record<string, string>> = {
-        fill: geoFillColor,
-        cursor: 'default'
+        fill: isGreyedOut ? GRAYED_OUT_COLOR : geoFillColor,
+        cursor: 'default',
+        ...(isGreyedOut && { opacity: '0.3' })
       }
 
-      const strokeWidth = 0.9
+      // Scale stroke width inversely with zoom level to maintain consistent visual thickness
+      // At zoom=1, use base width of 0.9; at zoom=4, use 0.225; etc.
+      const baseStrokeWidth = 0.9
+      const currentZoom = position?.zoom || 1
+      const strokeWidth = baseStrokeWidth / currentZoom
 
       // If a legend applies, return it with appropriate information.
       const toolTip = applyTooltipsToGeo(geoDisplayName, geoData)
       if (legendColors && legendColors[0] !== '#000000' && type !== 'bubble') {
         styles = {
           ...styles,
-          fill: type !== 'world-geocode' ? legendColors[0] : geoFillColor,
+          fill: isGreyedOut ? GRAYED_OUT_COLOR : type !== 'world-geocode' ? legendColors[0] : geoFillColor,
           cursor: 'default',
           '&:hover': {
-            fill: type !== 'world-geocode' ? legendColors[1] : geoFillColor
+            fill: isGreyedOut ? GRAYED_OUT_COLOR : type !== 'world-geocode' ? legendColors[1] : geoFillColor
           },
           '&:active': {
-            fill: type !== 'world-geocode' ? legendColors[2] : geoFillColor
+            fill: isGreyedOut ? GRAYED_OUT_COLOR : type !== 'world-geocode' ? legendColors[2] : geoFillColor
           }
         }
 
@@ -228,6 +294,7 @@ const WorldMap = () => {
             path={path}
             stroke={geoStrokeColor}
             strokeWidth={strokeWidth}
+            className={geoClassName}
             onClick={() => geoClickHandler(geoDisplayName, geoData)}
             onMouseEnter={() => {
               // Track hover analytics event if this is a new location
@@ -245,6 +312,7 @@ const WorldMap = () => {
             }}
             data-tooltip-id={`tooltip__${tooltipId}`}
             data-tooltip-html={toolTip}
+            data-country-code={geo.properties.iso}
             tabIndex={-1}
           />
         )
@@ -260,6 +328,7 @@ const WorldMap = () => {
           strokeWidth={strokeWidth}
           styles={styles}
           path={path}
+          className={geoClassName}
           onMouseEnter={() => {
             // Track hover analytics event if this is a new location
             const locationName = geoDisplayName.replace(/[^a-zA-Z0-9]/g, '_')
@@ -276,6 +345,7 @@ const WorldMap = () => {
           }}
           data-tooltip-id={`tooltip__${tooltipId}`}
           data-tooltip-html={toolTip}
+          data-country-code={geo.properties.iso}
         />
       )
     })
@@ -305,7 +375,7 @@ const WorldMap = () => {
             width={SVG_WIDTH}
             height={SVG_HEIGHT}
           >
-            <Mercator data={world}>{({ features }) => constructGeoJsx(features)}</Mercator>
+            <Mercator data={filteredWorld}>{({ features }) => constructGeoJsx(features)}</Mercator>
           </ZoomableGroup>
         </svg>
       ) : (
@@ -319,7 +389,7 @@ const WorldMap = () => {
             width={SVG_WIDTH}
             height={SVG_HEIGHT}
           >
-            <Mercator data={world}>{({ features }) => constructGeoJsx(features)}</Mercator>
+            <Mercator data={filteredWorld}>{({ features }) => constructGeoJsx(features)}</Mercator>
           </ZoomableGroup>
         </svg>
       )}

package/src/data/initial-state.js

@@ -140,6 +140,16 @@ const createInitialState = () => {
     },
     filterBehavior: 'Filter Change',
     filterIntro: '',
+    smallMultiples: {
+      mode: '',
+      tileColumn: '',
+      tilesPerRowDesktop: 2,
+      tilesPerRowMobile: 1,
+      tileOrderType: 'asc',
+      tileOrder: [],
+      tileTitles: {},
+      synchronizedTooltips: true
+    },
     markupVariables: [],
     enableMarkupVariables: false
   }

package/src/data/supported-geos.js

@@ -98,74 +98,6 @@ export const supportedRegions = {
   'region 10': ['REGION 10', 'R10']
 }
 
-/**
- * State Name to ISO Code Mapping
- *
- * Maps proper case state names to their corresponding ISO 3166-2 codes.
- * Provides reverse lookup capability for the supportedStates table.
- *
- * Structure: { 'State Name': 'US-XX' }
- * - Key: Proper case state name (e.g., 'California')
- * - Value: ISO 3166-2 state code (e.g., 'US-CA')
- *
- * Used in:
- * - Data processing when state names need to be converted to ISO codes
- * - Validation and normalization of state data
- */
-export const stateToIso = {
-  // States
-  Alabama: 'US-AL',
-  Alaska: 'US-AK',
-  Arizona: 'US-AZ',
-  Arkansas: 'US-AR',
-  California: 'US-CA',
-  Colorado: 'US-CO',
-  Connecticut: 'US-CT',
-  Delaware: 'US-DE',
-  Florida: 'US-FL',
-  Georgia: 'US-GA',
-  Hawaii: 'US-HI',
-  Idaho: 'US-ID',
-  Illinois: 'US-IL',
-  Indiana: 'US-IN',
-  Iowa: 'US-IA',
-  Kansas: 'US-KS',
-  Kentucky: 'US-KY',
-  Louisiana: 'US-LA',
-  Maine: 'US-ME',
-  Maryland: 'US-MD',
-  Massachusetts: 'US-MA',
-  Michigan: 'US-MI',
-  Minnesota: 'US-MN',
-  Mississippi: 'US-MS',
-  Missouri: 'US-MO',
-  Montana: 'US-MT',
-  Nebraska: 'US-NE',
-  Nevada: 'US-NV',
-  'New Hampshire': 'US-NH',
-  'New Jersey': 'US-NJ',
-  'New Mexico': 'US-NM',
-  'New York': 'US-NY',
-  'North Carolina': 'US-NC',
-  'North Dakota': 'US-ND',
-  Ohio: 'US-OH',
-  Oklahoma: 'US-OK',
-  Oregon: 'US-OR',
-  Pennsylvania: 'US-PA',
-  'Rhode Island': 'US-RI',
-  'South Carolina': 'US-SC',
-  'South Dakota': 'US-SD',
-  Tennessee: 'US-TN',
-  Texas: 'US-TX',
-  Utah: 'US-UT',
-  Vermont: 'US-VT',
-  Virginia: 'US-VA',
-  Washington: 'US-WA',
-  'West Virginia': 'US-WV',
-  Wisconsin: 'US-WI',
-  Wyoming: 'US-WY'
-}
-
 /**
  * State FIPS Code to Two-Letter Abbreviation Mapping
  *
@@ -750,7 +682,7 @@ export const supportedCities = {
   'GREAT PLAINS TRIBAL LEADERS HEALTH BOARD': [-103.22444, 44.083054],
   'GREENSBORO': [-79.791977, 36.072636],
   'HENDERSON': [-114.981720, 36.039524],
-  'HERSHEY': [-76.6779444, 40.2849997 ],
+  'HERSHEY': [-76.6779444, 40.2849997],
   'HIALEAH': [-80.278107, 25.857595],
   'HONOLULU': [-157.858337, 21.306944],
   'HOPI TRIBE': [-110.5035, 35.7833],
@@ -783,7 +715,7 @@ export const supportedCities = {
   'LUBBOCK': [-101.855164, 33.577862],
   'MADISON': [-89.401230, 43.073051],
   'MARION COUNTY, INDIANA': [-86.136543, 39.781029],
-  'MARION':[-88.9330556,37.7305556],
+  'MARION': [-88.9330556, 37.7305556],
   'MEMPHIS': [-90.048981, 35.149532],
   'MESA': [-111.831474, 33.415184],
   'MIAMI': [-80.191788, 25.761681],
@@ -808,7 +740,7 @@ export const supportedCities = {
   'OLYMPIA': [-122.9382403, 47.0394791],
   'OMAHA': [-95.934502, 41.256538],
   'ORLANDO': [-81.379234, 28.538336],
-  'PASADENA':[-95.209099,29.691063],
+  'PASADENA': [-95.209099, 29.691063],
   'PHILADELPHIA': [-75.165222, 39.952583],
   'PHOENIX': [-112.074036, 33.448376],
   'PITTSBURGH': [-79.995888, 40.440624],
@@ -828,9 +760,9 @@ export const supportedCities = {
   'SACRAMENTO': [-121.494400, 38.581573],
   'SAINT PAUL': [-93.089958, 44.953705],
   'SALEM, ALABAMA': [-85.2386, 32.5968],
-  'SALEM, CONNECTICUT': [-72.2754,41.4904],
+  'SALEM, CONNECTICUT': [-72.2754, 41.4904],
   'SALEM, FLORIDA': [-83.4129, 29.8869],
-  'SALEM, ILLINOIS':[-88.945618,38.626991],
+  'SALEM, ILLINOIS': [-88.945618, 38.626991],
   'SALEM, MASSACHUSETTS': [-70.8955, 42.5197],
   'SALEM, OR': [-123.0351, 44.9429],
   'SALEM, OREGON': [-123.0351, 44.9429],
@@ -839,19 +771,19 @@ export const supportedCities = {
   'SALUDA, VIRGINIA': [-76.5950, 37.6064],
   'SAN ANTONIO': [-98.493629, 29.424122],
   'SAN BENITO': [-97.6311, 26.1326],
-  'SAN BERNARDINO':[-117.302399,34.115784],
+  'SAN BERNARDINO': [-117.302399, 34.115784],
   'SAN DIEGO': [-117.161087, 32.715736],
   'SAN FRANCISCO': [-122.419418, 37.774929],
   'SAN JOSE': [-121.886330, 37.338207],
   'SANTA ANA': [-117.867653, 33.745472],
-  'SANTA CLARA':[-121.955238,37.354107],
+  'SANTA CLARA': [-121.955238, 37.354107],
   'SCOTTSDALE': [-111.926048, 33.494171],
   'SEATTLE': [-122.332069, 47.606209],
   'SOUTH PUGET INTERTRIBAL PLANNING AGENCY': [-123.0832, 47.1241],
   'SOUTHCENTRAL FOUNDATION': [-149.7971, 61.1821],
   'SOUTHEAST ALASKA REGIONAL HEALTH CONSORTIUM': [-135.3369, 57.05479],
   'SPOKANE': [-117.426048, 47.658779],
-  'ST PAUL': [ -93.089958, 44.953705],
+  'ST PAUL': [-93.089958, 44.953705],
   'ST. LOUIS': [-90.199402, 38.627003],
   'ST. PETERSBURG': [-82.640289, 27.767601],
   'STOCKTON': [-121.290779, 37.957703],

package/src/helpers/addUIDs.ts

@@ -25,8 +25,16 @@ const geoLookups: Record<string, GeoLookup> = {
   country: { keys: countryKeys, data: supportedCountries }
 }
 
-const memoizedFindUID = (geoName: string, type: keyof typeof geoLookups): string | undefined => {
+const memoizedFindUID = (
+  geoName: string,
+  type: keyof typeof geoLookups,
+  caseInsensitive = false
+): string | undefined => {
   const lookup = geoLookups[type]
+  if (caseInsensitive) {
+    const lowerGeoName = geoName.toLowerCase()
+    return lookup.keys.find(key => lookup.data[key].some(name => name.toLowerCase() === lowerGeoName))
+  }
   return lookup.keys.find(key => lookup.data[key].includes(geoName))
 }
 
@@ -72,7 +80,10 @@ const handleUSLocation = (row: DataRow, geoColumn: string, displayAsHex: boolean
 
 const handleWorldLocation = (row: DataRow, geoColumn: string, isWorldGeocodeType: boolean): string | null => {
   const geoName = row[geoColumn]
-  let uid = memoizedFindUID(geoName, 'country')
+  if (!geoName) return null
+
+  // Use case-insensitive matching for world countries to handle various input formats
+  let uid = memoizedFindUID(geoName, 'country', true)
   if (!uid && (isWorldGeocodeType || geoName)) {
     uid = findCityUID(geoName)
   }

package/src/helpers/applyColorToLegend.ts

@@ -65,6 +65,30 @@ export const applyColorToLegend = (legendIdx: number, config: MapConfig, result:
     color = mapPaletteNameMigrations[color]
   }
 
+  // Check for customColorsOrdered first (direct 1-to-1 mapping, no distribution)
+  if (general?.palette?.customColorsOrdered && Array.isArray(general.palette.customColorsOrdered)) {
+    const customColorsOrdered = general.palette.customColorsOrdered
+
+    // Count actual special classes in the result array
+    const actualSpecialClassCount = result.filter(item => item.special).length
+    const colorIdx = legendIdx - actualSpecialClassCount
+
+    // 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]
+    }
+
+    // Direct 1-to-1 mapping with customColorsOrdered (no distribution array)
+    if (colorIdx >= 0 && colorIdx < customColorsOrdered.length) {
+      return customColorsOrdered[colorIdx]
+    }
+
+    // Fallback to last color if index out of bounds
+    return customColorsOrdered[customColorsOrdered.length - 1] || '#d3d3d3'
+  }
+
   // Try multiple approaches to find the palette
   let mapColorPalette = general?.palette?.customColors
 
@@ -118,7 +142,7 @@ export const applyColorToLegend = (legendIdx: number, config: MapConfig, result:
   // For category legends, use the actual result length
   const isNumericLegend = legend && ['equalnumber', 'equalinterval'].includes(legend.type)
   const nonSpecialItemCount = isNumericLegend
-    ? (legend.numberOfItems || result.length)
+    ? legend.numberOfItems || result.length
     : result.length - actualSpecialClassCount
 
   const amt =

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 = [
@@ -45,7 +32,6 @@ 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 = {

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 {
-    return value
+    // Apply titleCase to unrecognized values (e.g., "DISTRICT OF COLUMBIA" -> "District of Columbia")
+    return titleCase(value)
   }
 }

package/src/helpers/generateRuntimeLegend.ts

@@ -598,5 +598,3 @@ export const generateRuntimeLegend = (
     }
   }
 }
-
-export default generateRuntimeLegend

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
   }