@cdc/core 4.25.7 → 4.25.10

package/helpers/filterColorPalettes.ts

@@ -0,0 +1,152 @@
+import { getColorPaletteVersion } from './getColorPaletteVersion'
+import { chartColorPalettes, twoColorPalette } from '../data/colorPalettes'
+
+export interface FilterColorPalettesOptions {
+  config: any
+  isReversed?: boolean
+  colorPalettes?: any
+  visualizationType?: string
+  useV2Migration?: boolean
+}
+
+export interface FilteredPalettes {
+  sequential: string[]
+  nonSequential: string[]
+  accessibleColors: string[]
+  twoColorPalettes?: string[]
+}
+
+/**
+ * Universal color palette filtering function that works across all visualization types
+ * Combines chart and map palette filtering logic with backwards compatibility
+ */
+export const filterColorPalettes = ({
+  config,
+  isReversed,
+  colorPalettes,
+  visualizationType,
+  useV2Migration
+}: FilterColorPalettesOptions): FilteredPalettes => {
+  // Use provided colorPalettes or fall back to chart palettes
+  const palettes = colorPalettes || chartColorPalettes
+  const version = getColorPaletteVersion(config, useV2Migration)
+  const versionKey = `v${version}`
+  const currentPalettes = palettes[versionKey] || palettes.v2
+
+  // Handle two-color palettes for specific chart types
+  if (visualizationType === 'Paired Bar' || visualizationType === 'Deviation Bar') {
+    const twoColorPalettes = filterTwoColorPalettes(version, isReversed)
+    return {
+      sequential: [],
+      nonSequential: [],
+      accessibleColors: [],
+      twoColorPalettes
+    }
+  }
+
+  // Handle regular palette filtering
+  const isReversedFromConfig = isReversed !== undefined
+    ? isReversed
+    : config.general?.palette?.isReversed
+
+  return filterRegularPalettes(currentPalettes, version, isReversedFromConfig)
+}
+
+/**
+ * Filter two-color palettes (for Paired Bar and Deviation Bar charts)
+ */
+function filterTwoColorPalettes(version: number, isReversed?: boolean): string[] {
+  // Use the version to get the correct two-color palettes
+  const versionKey = `v${version}`
+  const versionedTwoColorPalettes = twoColorPalette[versionKey] || twoColorPalette.v2
+  
+  return Object.keys(versionedTwoColorPalettes).filter(name =>
+    isReversed ? name.endsWith('reverse') : !name.endsWith('reverse')
+  )
+}
+
+/**
+ * Filter regular palettes (sequential, non-sequential, accessible)
+ */
+function filterRegularPalettes(palettes: any, version: number, isReversed?: boolean): FilteredPalettes {
+  const sequential: string[] = []
+  const nonSequential: string[] = []
+  const accessibleColors: string[] = []
+
+  for (const paletteName in palettes) {
+    const isPaletteReversed = paletteName.endsWith('reverse')
+    const matchesReversed = (!isReversed && !isPaletteReversed) || (isReversed && isPaletteReversed)
+
+    if (version === 1) {
+      filterV1Palette(paletteName, matchesReversed, sequential, nonSequential, accessibleColors)
+    } else {
+      filterV2Palette(paletteName, matchesReversed, sequential, nonSequential, accessibleColors)
+    }
+  }
+
+  return { sequential, nonSequential, accessibleColors }
+}
+
+/**
+ * Filter V1 palettes using original chart logic
+ */
+function filterV1Palette(
+  paletteName: string,
+  matchesReversed: boolean,
+  sequential: string[],
+  nonSequential: string[],
+  accessibleColors: string[]
+): void {
+  if (!matchesReversed) return
+
+  if (paletteName.startsWith('sequential')) {
+    sequential.push(paletteName)
+  } else if (paletteName.startsWith('qualitative') && !paletteName.startsWith('colorblindsafe')) {
+    nonSequential.push(paletteName)
+  } else if (paletteName.startsWith('colorblindsafe') || paletteName.includes('colorblindsafe')) {
+    accessibleColors.push(paletteName)
+  }
+}
+
+/**
+ * Filter V2 palettes using updated logic for new palette structure
+ */
+function filterV2Palette(
+  paletteName: string,
+  matchesReversed: boolean,
+  sequential: string[],
+  nonSequential: string[],
+  accessibleColors: string[]
+): void {
+  if (!matchesReversed) return
+
+  if (paletteName.startsWith('sequential')) {
+    sequential.push(paletteName)
+  } else if (paletteName.startsWith('divergent')) {
+    nonSequential.push(paletteName)
+  } else if (paletteName.includes('colorblindsafe') || paletteName.startsWith('qualitative-standard')) {
+    accessibleColors.push(paletteName)
+  } else if (paletteName.startsWith('qualitative') && !paletteName.includes('colorblindsafe')) {
+    // V2 qualitative palettes go to accessible colors if they're standard
+    if (paletteName.includes('standard')) {
+      accessibleColors.push(paletteName)
+    }
+  }
+}
+
+/**
+ * Legacy function for backwards compatibility with chart package
+ */
+export const filterChartColorPalettes = (config: any) => {
+  const version = getColorPaletteVersion(config)
+
+  if (version === 1) {
+    return chartColorPalettes.v1
+  }
+
+  if (version === 2) {
+    return chartColorPalettes.v2
+  }
+
+  return chartColorPalettes.v2
+}

package/helpers/generateColorsArray.ts

@@ -0,0 +1,13 @@
+import chroma from 'chroma-js'
+
+/**
+ * Generate an array of colors based on a given color [color, hoverColor, darkColor]
+ * @param {string} color - The base color to generate the array from (defaults to black)
+ * @param {boolean} special - A flag to determine if the hover color should be brighter or saturated
+ * @returns {string[]} - An array of colors [baseColor, hoverColor, darkerColor]
+ */
+export const generateColorsArray = (color: string = '#000000', special: boolean = false): string[] => {
+  const colorObj = chroma(color)
+  const hoverColor = special ? colorObj.brighten(0.5).hex() : colorObj.saturate(1.3).hex()
+  return [color, hoverColor, colorObj.darken(0.3).hex()]
+}

package/helpers/getColorPaletteVersion.ts

@@ -0,0 +1,33 @@
+import { USE_V2_MIGRATION } from './constants'
+
+/**
+ * Gets the color palette version from a visualization config
+ * @param config - The visualization config object
+ * @param useV2Migration - If provided, overrides the global flag
+ * @returns The major version number
+ */
+export const getColorPaletteVersion = (config: any, useV2Migration?: boolean): number => {
+  // Use passed parameter or fall back to global flag
+  const shouldUseV2 = useV2Migration !== undefined ? useV2Migration : USE_V2_MIGRATION
+
+  // If not using v2 migration, force v1 unless explicitly set to v2
+  if (!shouldUseV2) {
+    if (config.general?.palette?.version) {
+      return parseInt(config.general.palette.version.split('.')[0])
+    }
+    return 1
+  }
+
+  // V2 migration logic - If general.palette exists, it's either migrated or new
+  if (config.general?.palette) {
+    // If version is explicitly set, use it
+    if (config.general.palette.version) {
+      return parseInt(config.general.palette.version.split('.')[0])
+    }
+    // If no version but palette exists, it's likely migrated → use v2
+    return 2
+  }
+
+  // If no general.palette at all, it's legacy → use v1
+  return 1
+}

package/helpers/getPaletteAccessor.ts

@@ -0,0 +1,18 @@
+import { getColorPaletteVersion } from './getColorPaletteVersion'
+
+/**
+ * Gets the appropriate palette accessor based on config version
+ * @param colorPalettes - The color palettes object (e.g., mapColorPalettes, chartColorPalettes)
+ * @param config - The visualization config object
+ * @param paletteName - Optional palette name to get specific palette
+ * @returns The versioned palette accessor or fallback to main palettes, optionally filtered to specific palette
+ */
+export const getPaletteAccessor = (colorPalettes: any, config: any, paletteName?: string) => {
+  const paletteAccessor = colorPalettes?.[`v${getColorPaletteVersion(config)}`] || colorPalettes
+
+  if (paletteName && paletteAccessor) {
+    return paletteAccessor[paletteName]
+  }
+
+  return paletteAccessor
+}

package/helpers/markupProcessor.ts

@@ -0,0 +1,205 @@
+import _ from 'lodash'
+import { MarkupVariable, MarkupCondition } from '../types/MarkupVariable'
+import { VizFilter } from '../types/VizFilter'
+import { filterVizData } from './filterVizData'
+
+/**
+ * Replaces {{variable}} tags in content with actual data values.
+ *
+ * @param content - Content string with markup variables
+ * @param data - Dataset to extract values from
+ * @param markupVariables - Variable configurations
+ * @param options - isEditor, showNoDataMessage, allowHideSection, filters
+ * @returns Processed content and state flags
+ *
+ * @security Returns plain text - must be parsed with html-react-parser before rendering
+ */
+export const processMarkupVariables = (
+  content: string,
+  data: any[] = [],
+  markupVariables: MarkupVariable[] = [],
+  options: {
+    isEditor?: boolean
+    showNoDataMessage?: boolean
+    allowHideSection?: boolean
+    filters?: VizFilter[]
+  } = {}
+): {
+  processedContent: string
+  shouldHideSection: boolean
+  shouldShowNoDataMessage: boolean
+} => {
+  const { isEditor = false, showNoDataMessage = false, allowHideSection = false, filters = [] } = options
+
+  // Early return for invalid inputs
+  if (_.isEmpty(markupVariables) || !content) {
+    return {
+      processedContent: content || '',
+      shouldHideSection: false,
+      shouldShowNoDataMessage: false
+    }
+  }
+
+  // Apply filters to data if filters are present
+  let workingData = data
+  if (filters && filters.length > 0) {
+    workingData = filterVizData(filters, data)
+  }
+
+  try {
+    const emptyVariableChecker: boolean[] = []
+    const noDataMessageChecker: boolean[] = []
+
+    const variableRegexPattern = /{{(.*?)}}/g
+    const processedContent = content.replace(variableRegexPattern, variableTag => {
+      try {
+        if (emptyVariableChecker.length > 0) return variableTag
+
+        const workingVariable = markupVariables.find(variable => variable.tag === variableTag)
+        if (!workingVariable) return variableTag
+
+        // Validate that columnName exists
+        if (!workingVariable.columnName) {
+          console.warn(`Markup variable ${variableTag} has no columnName specified`)
+          return variableTag
+        }
+
+        // Filter data with error handling (apply conditions on top of already filtered data)
+        const conditionFilteredData =
+          workingVariable.conditions.length === 0
+            ? workingData
+            : filterDataByConditions(workingData, [...workingVariable.conditions])
+
+        // Extract values with error handling
+        const variableValues: string[] = _.uniq(
+          (conditionFilteredData || []).map(dataObject => {
+            try {
+              const dataObjectValue = dataObject[workingVariable.columnName]
+
+              // Handle undefined column
+              if (dataObjectValue === undefined && isEditor) {
+                console.warn(
+                  `Column "${workingVariable.columnName}" not found in data for variable ${variableTag}`
+                )
+              }
+
+              return workingVariable.addCommas && !isNaN(parseFloat(dataObjectValue))
+                ? parseFloat(dataObjectValue).toLocaleString('en-US', { useGrouping: true })
+                : String(dataObjectValue || '')
+            } catch (error) {
+              console.error(`Error processing data value for ${variableTag}:`, error)
+              return ''
+            }
+          })
+        ).filter(value => value !== '') // Filter out empty values
+
+        const listConjunction = !isEditor ? 'and' : 'or'
+        const formattedValues = formatValuesList(variableValues, listConjunction)
+
+        const finalDisplay = formattedValues.join(', ')
+
+        if (showNoDataMessage && finalDisplay === '') {
+          noDataMessageChecker.push(true)
+        }
+
+        if (finalDisplay === '' && allowHideSection) {
+          emptyVariableChecker.push(true)
+        }
+
+        return finalDisplay
+      } catch (error) {
+        console.error(`Error processing markup variable ${variableTag}:`, error)
+        return variableTag // Return original tag on error
+      }
+    })
+
+    return {
+      processedContent,
+      shouldHideSection: allowHideSection && emptyVariableChecker.length > 0 && !isEditor,
+      shouldShowNoDataMessage: showNoDataMessage && noDataMessageChecker.length > 0 && !isEditor
+    }
+  } catch (error) {
+    console.error('Error in processMarkupVariables:', error)
+    // Return original content on error
+    return {
+      processedContent: content,
+      shouldHideSection: false,
+      shouldShowNoDataMessage: false
+    }
+  }
+}
+
+/**
+ * Filters data based on multiple conditions
+ */
+const filterDataByConditions = (data: any[], conditions: MarkupCondition[]): any[] => {
+  if (!conditions.length) return data
+
+  const [currentCondition, ...remainingConditions] = conditions
+  const { columnName, isOrIsNotEqualTo, value } = currentCondition
+
+  const filteredData = isOrIsNotEqualTo === 'is'
+    ? data.filter(dataObject => String(dataObject[columnName]) === value)
+    : data.filter(dataObject => String(dataObject[columnName]) !== value)
+
+  return remainingConditions.length === 0
+    ? filteredData
+    : filterDataByConditions(filteredData, remainingConditions)
+}
+
+/**
+ * Formats a list of values with proper conjunction
+ */
+const formatValuesList = (values: string[], conjunction: string): string[] => {
+  if (values.length === 0) return values
+  if (values.length === 1) return values
+  if (values.length === 2) {
+    return [`${values[0]} ${conjunction} ${values[1]}`]
+  }
+
+  const formatted = [...values]
+  formatted[formatted.length - 1] = `${conjunction} ${formatted[formatted.length - 1]}`
+  return [formatted.join(', ')]
+}
+
+/**
+ * Validates markup variables configuration
+ */
+export const validateMarkupVariables = (
+  markupVariables: MarkupVariable[],
+  data: any[]
+): string[] => {
+  const errors: string[] = []
+
+  if (!markupVariables || !Array.isArray(markupVariables)) {
+    return errors
+  }
+
+  const availableColumns = data.length > 0 ? Object.keys(data[0]) : []
+
+  markupVariables.forEach((variable, index) => {
+    if (!variable.tag || !variable.tag.match(/^{{.+}}$/)) {
+      errors.push(`Variable ${index + 1}: Tag must be in format {{tagName}}`)
+    }
+
+    if (!variable.columnName) {
+      errors.push(`Variable ${index + 1}: Column name is required`)
+    } else if (availableColumns.length > 0 && !availableColumns.includes(variable.columnName)) {
+      errors.push(`Variable ${index + 1}: Column "${variable.columnName}" not found in data`)
+    }
+
+    variable.conditions.forEach((condition, condIndex) => {
+      if (!condition.columnName) {
+        errors.push(`Variable ${index + 1}, Condition ${condIndex + 1}: Column name is required`)
+      } else if (availableColumns.length > 0 && !availableColumns.includes(condition.columnName)) {
+        errors.push(`Variable ${index + 1}, Condition ${condIndex + 1}: Column "${condition.columnName}" not found in data`)
+      }
+
+      if (!condition.value) {
+        errors.push(`Variable ${index + 1}, Condition ${condIndex + 1}: Value is required`)
+      }
+    })
+  })
+
+  return errors
+}

package/helpers/metrics/helpers.ts

@@ -0,0 +1,75 @@
+import { publish } from '../events'
+import packageJson from '../../package.json'
+import {
+  COVE_VISUALIZATION_TYPES,
+  ANALYTICS_EVENT_ACTIONS,
+  ANALYTICS_EVENT_TYPES,
+  EventSpecifics
+} from './types'
+import { GetLabelForEvent } from './getLabelForEvent'
+
+/**
+ * Retrieves the version of the package from its package.json file.
+ * @returns {string} The version of the package.
+ */
+export const getPackageVersion = () => {
+  try {
+    return packageJson.version
+  } catch (e) {
+    console.error('Error loading package version:', e)
+    return 'unknown'
+  }
+}
+
+/**
+ * Publishes an analytics event with the specified parameters.
+ * Format: APP|VIZTYPE_VIZSUBTYPE|VIZ_TITLE|INTERACTION_EVENT_NAME|INTERACTION_TYPE|SPECIFICS
+ *
+ * @param {Object} params - The parameters for the analytics event
+ * @param {string} params.app - The application name (e.g., 'COVE')
+ * @param {COVE_VISUALIZATION_TYPES} params.vizType - The visualization type (e.g., 'map', 'chart')
+ * @param {string} [params.vizSubType] - The visualization subtype (e.g., 'county', 'state', 'bar', 'line')
+ * @param {string} [params.vizTitle] - The title of the visualization
+ * @param {ANALYTICS_EVENT_TYPES} params.eventType - The interaction event name
+ * @param {ANALYTICS_EVENT_ACTIONS} [params.eventAction='unknown'] - The interaction type (e.g., 'click', 'hover')
+ * @param {string} [params.eventLabel] - The event label (typically config URL or interaction label)
+ * @param {string} [params.specifics] - Additional specifics about the event (structured as "key: value, key2: value2")
+ * @param {string} [params.version] - The version of the package (defaults to package.json version)
+ * @returns {void}
+ * @description This function is used to publish analytics events for various user interactions and system states.
+ */
+export const publishAnalyticsEvent = <T extends ANALYTICS_EVENT_TYPES>({
+  app = 'cove',
+  vizType,
+  vizSubType,
+  vizTitle,
+  eventType,
+  eventAction = 'unknown',
+  eventLabel,
+  specifics,
+  version,
+  ...additionalDetails
+}: {
+  app?: string
+  vizType: COVE_VISUALIZATION_TYPES
+  vizSubType?: string
+  vizTitle?: string
+  eventType: T
+  eventAction?: ANALYTICS_EVENT_ACTIONS
+  eventLabel?: GetLabelForEvent<T>
+  specifics?: T extends keyof EventSpecifics ? EventSpecifics[T] : string
+  version?: string
+  [key: string]: any
+}) => {
+  // Added check if we ever need to disable analytics
+  const ANALYTICS_POWERED_ON = true
+  if (!ANALYTICS_POWERED_ON) return
+
+  // Format: APP|VIZTYPE_VIZSUBTYPE|VIZ_TITLE|INTERACTION_EVENT_NAME|INTERACTION_TYPE|SPECIFICS
+  const vizTypeSubType = vizSubType ? `${vizType}_${vizSubType}` : vizType
+  const formattedEvent = `${app}|${vizTypeSubType}|${vizTitle || 'unknown'}|${eventType}|${eventAction}|${specifics || 'no details'}`
+  return publish('cove:analytics', {
+    formattedEvent,
+    eventLabel
+  })
+}

package/helpers/metrics/types.ts

@@ -0,0 +1,82 @@
+export type COVE_VISUALIZATION_TYPES =
+  | 'map'
+  | 'chart'
+  | 'data-table'
+  | 'table'
+  | 'markup-include'
+  | 'waffle-chart'
+  | 'dashboard'
+  | 'filtered-text'
+  | 'table-filter'
+  | 'data-bite'
+  | 'navigation'
+  | 'unknown'
+
+export type ANALYTICS_EVENT_ACTIONS =
+  | 'click'
+  | 'drag'
+  | 'toggle'
+  | 'none'
+  | 'keydown'
+  | 'keyboard'
+  | 'load'
+  | 'submit'
+  | 'change'
+  | 'hover'
+  | 'unknown'
+
+export type LEGEND_TOGGLE_MODES = 'highlight' | 'isolate'
+
+/**
+ * Type-safe specifics for different event types
+ * The specifics field should contain structured key-value pairs formatted as strings
+ * Format: "key1: value1, key2: value2"
+ */
+export type EventSpecifics = {
+  // Map events
+  map_hover: `location: ${string}`
+  zoom_in: `zoom_level: ${number}` | `location: ${string}` | `zoom_level: ${number}, location: ${string}`
+  zoom_out: `zoom_level: ${number}` | `location: ${string}` | `zoom_level: ${number}, location: ${string}`
+
+  // Legend events
+  map_legend_item_toggled: `mode: ${LEGEND_TOGGLE_MODES}` | `mode: ${LEGEND_TOGGLE_MODES}, item: ${string}`
+  chart_legend_item_toggled: `mode: ${LEGEND_TOGGLE_MODES}` | `mode: ${LEGEND_TOGGLE_MODES}, item: ${string}`
+
+  // Table events
+  data_table_sort: `column: ${string}, order: ${'asc' | 'desc' | 'none'}`
+
+  // Filter events
+  dashboard_filter_changed: `key: ${string}, value: ${string}`
+
+  // Generic fallback for any event
+  [key: string]: string
+}
+
+export type ANALYTICS_EVENT_TYPES =
+  // Data actions
+  | 'data_downloaded'
+  | 'expand_collapse_toggled' // alternative name for data_table_toggled
+  | 'data_table_sort'
+  | 'data_viewed'
+  | 'clicked_data_link_to_view'
+  | 'link_to_data_table_click'
+
+  // Filter events
+  | `${COVE_VISUALIZATION_TYPES}_filter_reset`
+  | `${COVE_VISUALIZATION_TYPES}_filter_applied`
+  | `${COVE_VISUALIZATION_TYPES}_filter_changed`
+
+  // Legend events
+  | `${COVE_VISUALIZATION_TYPES}_legend_item_toggled` // simplified with specifics for mode
+  | `${COVE_VISUALIZATION_TYPES}_legend_reset`
+
+  // Map-specific events
+  | `${COVE_VISUALIZATION_TYPES}_hover` // simplified with specifics for location
+  | `${COVE_VISUALIZATION_TYPES}_panned`
+  | `${COVE_VISUALIZATION_TYPES}_reset_zoom_level`
+  | `zoom_in` // simplified with specifics for zoom level and location
+  | `zoom_out` // simplified with specifics for zoom level and location
+  | `${COVE_VISUALIZATION_TYPES}_navigation_menu`
+
+  // Image/export events
+  | 'image_download' // generic image download event

package/helpers/metrics/utils.ts

@@ -0,0 +1,34 @@
+const getVizTitle = (config) => {
+  if (config?.type === 'dashboard') {
+    return String(config?.dashboard?.title).toLowerCase()
+  }
+  if (config?.title) {
+    return String(config.title).toLowerCase()
+  } else if (config?.general?.title) {
+    return String(config.general.title).toLowerCase()
+  } else {
+    return 'no title'
+  }
+}
+
+const getVizSubType = config => {
+  if (config?.type === 'markup-include') {
+    return `${config?.contentEditor?.title}`
+  }
+  if (config?.general?.geoType) {
+    return `${config.general.geoType}`
+  }
+
+  if (config?.type === 'chart' && config?.visualizationType) {
+    // Convert chart visualization type to format: chart_subtype
+    // e.g., "Bar" -> "chart_bar", "Line" -> "chart_line"
+    const subtype = String(config.visualizationType).toLowerCase().replace(/\s+/g, '_')
+    return `${subtype}`
+  }
+
+  if (config?.type === 'chart') {
+    return 'chart'
+  }
+}
+
+export { getVizTitle, getVizSubType }

package/helpers/palettes/colorDistributions.ts

@@ -0,0 +1,56 @@
+// Chart color distributions for v2 9-color sequential palettes to improve contrast
+// Similar to map distributions but optimized for chart legends
+export const v2ColorDistribution = {
+  1: [4], // Middle color for single item
+  2: [0, 8], // First and middle
+  3: [0, 4, 8], // First, middle, last
+  4: [0, 2, 6, 8], // Evenly spaced
+  5: [0, 2, 4, 6, 8], // Well-distributed
+  6: [0, 1, 3, 5, 7, 8], // Good spacing
+  7: [0, 1, 2, 4, 6, 7, 8], // Skip middle-adjacent
+  8: [0, 1, 2, 3, 5, 6, 7, 8], // Skip one in middle
+  9: [0, 1, 2, 3, 4, 5, 6, 7, 8] // Use all colors
+}
+
+// Enhanced color distributions for divergent palettes to maximize contrast
+// Prioritizes endpoints and avoids the neutral middle region
+export const divergentColorDistribution = {
+  1: [4], // Neutral middle for single item
+  2: [1, 7], // Strong contrast from each end
+  3: [0, 4, 8], // Maximum endpoints plus neutral
+  4: [0, 2, 6, 8], // Well-spaced with emphasis on extremes
+  5: [0, 1, 4, 7, 8], // Skip adjacent to middle, emphasize ends
+  6: [0, 1, 3, 5, 7, 8], // Avoid immediate middle area
+  7: [0, 1, 2, 4, 6, 7, 8], // Skip one middle-adjacent
+  8: [0, 1, 2, 3, 5, 6, 7, 8], // Skip one in middle
+  9: [0, 1, 2, 3, 4, 5, 6, 7, 8] // Use all colors
+}
+
+// Color distribution optimized for colorblind-safe palette accessibility
+// Maximizes perceptual differences for color vision deficiency
+export const colorblindColorDistribution = {
+  1: [0], // Start with strongest color
+  2: [0, 4], // High contrast pair (orange, blue)
+  3: [0, 2, 4], // Orange, green, blue - maximum differentiation
+  4: [0, 1, 2, 4], // Add cyan for more separation
+  5: [0, 1, 2, 4, 5], // Add dark blue for depth
+  6: [0, 1, 2, 4, 5, 6], // Add pink for additional distinction
+  7: [0, 1, 2, 4, 5, 6, 8], // Add brown, skip black temporarily
+  8: [0, 1, 2, 4, 5, 6, 7, 8], // Add black for maximum contrast
+  9: [0, 1, 2, 3, 4, 5, 6, 7, 8] // Use all colors
+}
+
+// Basic color distribution for map v1 compatibility
+// Simple distribution pattern for any palette length up to 10 items
+export const mapV1ColorDistribution = {
+  1: [1],
+  2: [1, 3],
+  3: [1, 3, 5],
+  4: [0, 2, 4, 6],
+  5: [0, 2, 4, 6, 7],
+  6: [0, 2, 3, 4, 5, 7],
+  7: [0, 2, 3, 4, 5, 6, 7],
+  8: [0, 2, 3, 4, 5, 6, 7, 8],
+  9: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+  10: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+}