@cdc/core 4.25.8 → 4.25.10

package/helpers/metrics/helpers.ts

@@ -3,7 +3,8 @@ import packageJson from '../../package.json'
 import {
   COVE_VISUALIZATION_TYPES,
   ANALYTICS_EVENT_ACTIONS,
-  ANALYTICS_EVENT_TYPES
+  ANALYTICS_EVENT_TYPES,
+  EventSpecifics
 } from './types'
 import { GetLabelForEvent } from './getLabelForEvent'
 
@@ -22,31 +23,53 @@ export const getPackageVersion = () => {
 
 /**
  * Publishes an analytics event with the specified parameters.
- * @param {ANALYTICS_EVENT_TYPES} eventType - The type of the event
- * @param {ANALYTICS_EVENT_ACTIONS} [eventAction='unknown'] - The action associated with the event
- * @param {ANALYTICS_EVENT_LABEL} [eventLabel='unknown'] - The label for the event
- * @param {COVE_VISUALIZATION_TYPES} [visualizationType] - The type of visualization associated with the event
- * @param {Object} [additionalDetails] - Additional details to include in the event
+ * 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>(
-  eventType: T,
-  eventAction: ANALYTICS_EVENT_ACTIONS = 'unknown',
-  eventLabel: GetLabelForEvent<T>,
-  visualizationType?: COVE_VISUALIZATION_TYPES,
-  additionalDetails?: Object
-) => {
+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', {
-    eventType,
-    eventAction,
-    eventLabel,
-    component: visualizationType || 'unknown',
-    version: getPackageVersion() || 'unknown',
-    ...(additionalDetails || {})
+    formattedEvent,
+    eventLabel
   })
 }

package/helpers/metrics/types.ts

@@ -2,12 +2,14 @@ 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 =
@@ -16,28 +18,65 @@ export type ANALYTICS_EVENT_ACTIONS =
   | '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'
-  | 'data_table_toggled' // expand/collapse
+  | '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`
-  | `${COVE_VISUALIZATION_TYPES}_image_downloaded`
-  | `${COVE_VISUALIZATION_TYPES}_legend_item_toggled--${LEGEND_TOGGLE_MODES}-mode`
+
+  // Legend events
+  | `${COVE_VISUALIZATION_TYPES}_legend_item_toggled` // simplified with specifics for mode
   | `${COVE_VISUALIZATION_TYPES}_legend_reset`
-  | `${COVE_VISUALIZATION_TYPES}_loaded`
-  | `${COVE_VISUALIZATION_TYPES}_navigation_menu`
+
+  // Map-specific events
+  | `${COVE_VISUALIZATION_TYPES}_hover` // simplified with specifics for location
   | `${COVE_VISUALIZATION_TYPES}_panned`
   | `${COVE_VISUALIZATION_TYPES}_reset_zoom_level`
-  | `${COVE_VISUALIZATION_TYPES}_zoomed_in`
-  | `${COVE_VISUALIZATION_TYPES}_zoomed_out`
-  | `data_table_sort_by|${string}|${'asc' | 'desc' | 'undefined'}`
-  | 'link_to_data_table_click'
+  | `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]
+}

package/helpers/palettes/migratePaletteName.ts

@@ -0,0 +1,150 @@
+// Chart palette migration map
+export const chartPaletteMigrationMap: Record<string, string> = {
+  yelloworangered: 'sequential_orange',
+  yelloworangebrown: 'sequential_orange',
+  orangered: 'sequential_orange',
+  yellowpurple: 'sequential_orange',
+  red: 'sequential_orange',
+  'Sequential Orange': 'sequential_orange',
+  'Sequential Orange Two': 'sequential_orange',
+  'sequential-orange(MPX)': 'sequential_orange',
+  'sequential-orange-(MPX)': 'sequential_orange',
+  pinkpurple: 'sequential_purple',
+  bluegreen: 'sequential_blue',
+  'sequential-blue': 'sequential_blue',
+  'sequential-blue-2-(MPX)': 'sequential_blue',
+  'sequential-blue-2(MPX)': 'sequential_blue',
+  'Sequential Blue': 'sequential_blue',
+  'sequential Blue Two': 'sequential_blue',
+  'sequential Blue Three': 'sequential_blue',
+  greenblue: 'sequential_green',
+  'Sequential Green': 'sequential_green',
+  qualitative1: 'qualitative_standard',
+  qualitative2: 'qualitative_standard',
+  qualitative3: 'qualitative_standard',
+  qualitative4: 'qualitative_standard',
+  colorblindsafe: 'qualitative_standard',
+  'qualitative-bold': 'qualitative_standard',
+  'qualitative-soft': 'qualitative_standard',
+  // Reverse palette migrations
+  yelloworangeredreverse: 'sequential_orangereverse',
+  yelloworangebrownreverse: 'sequential_orangereverse',
+  orangeredreverse: 'sequential_orangereverse',
+  yellowpurplereverse: 'sequential_orangereverse',
+  redreverse: 'sequential_orangereverse',
+  'Sequential Orangereverse': 'sequential_orangereverse',
+  'Sequential Orange Tworeverse': 'sequential_orangereverse',
+  'sequential-orange(MPX)reverse': 'sequential_orangereverse',
+  'sequential-orange-(MPX)reverse': 'sequential_orangereverse',
+  pinkpurplereverse: 'sequential_purplereverse',
+  bluegreenreverse: 'sequential_bluereverse',
+  'sequential-bluereverse': 'sequential_bluereverse',
+  'sequential-blue-2-(MPX)reverse': 'sequential_bluereverse',
+  'sequential-blue-2(MPX)reverse': 'sequential_bluereverse',
+  'Sequential Bluereverse': 'sequential_bluereverse',
+  'sequential Blue Tworeverse': 'sequential_bluereverse',
+  'sequential Blue Threereverse': 'sequential_bluereverse',
+  greenbluereverse: 'sequential_greenreverse',
+  'Sequential Greenreverse': 'sequential_greenreverse',
+  qualitative1reverse: 'qualitative_standardreverse',
+  qualitative2reverse: 'qualitative_standardreverse',
+  qualitative3reverse: 'qualitative_standardreverse',
+  qualitative4reverse: 'qualitative_standardreverse',
+  colorblindsafereverse: 'qualitative_standardreverse',
+  'qualitative-boldreverse': 'qualitative_standardreverse',
+  'qualitative-softreverse': 'qualitative_standardreverse'
+}
+
+// Map palette migration map  
+export const mapPaletteMigrationMap: Record<string, string> = {
+  sequential_yellow_orange_red: 'sequential_orange',
+  sequential_yellow_orange_brown: 'sequential_orange',
+  sequential_orange_red: 'sequential_orange',
+  sequential_orange_extended: 'sequential_orange',
+  sequential_pink_purple: 'sequential_purple',
+  divergent_yellow_purple: 'divergent_blue_purple',
+  sequential_blue_green: 'sequential_blue',
+  sequential_blue_extended: 'sequential_blue',
+  sequential_green_blue: 'sequential_teal',
+  sequential_red: 'sequential_orange',
+  qualitative_earth_tones: 'qualitative',
+  // Reverse palette migrations
+  sequential_yellow_orange_redreverse: 'sequential_orangereverse',
+  sequential_yellow_orange_brownreverse: 'sequential_orangereverse',
+  sequential_orange_redreverse: 'sequential_orangereverse',
+  sequential_orange_extendedreverse: 'sequential_orangereverse',
+  sequential_pink_purplereverse: 'sequential_purplereverse',
+  divergent_yellow_purplereverse: 'divergent_blue_purplereverse',
+  sequential_blue_greenreverse: 'sequential_bluereverse',
+  sequential_blue_extendedreverse: 'sequential_bluereverse',
+  sequential_green_bluereverse: 'sequential_tealreverse',
+  sequential_redreverse: 'sequential_orangereverse',
+  qualitative_earth_tonesreverse: 'qualitativereverse',
+  'qualitative_bold': 'qualitative_standard',
+  'qualitative_soft': 'qualitative_standard',
+  'qualitative_boldreverse': 'qualitative_standardreverse',
+  'qualitative_softreverse': 'qualitative_standardreverse',
+  'qualitative1': 'qualitative_standard',
+  'qualitative2': 'qualitative_standard',
+  'qualitative3': 'qualitative_standard',
+  'qualitative4': 'qualitative_standard',
+  'colorblindsafe': 'qualitative_standard',
+  'qualitative1reverse': 'qualitative_standardreverse',
+  'qualitative2reverse': 'qualitative_standardreverse',
+  'qualitative3reverse': 'qualitative_standardreverse',
+  'qualitative4reverse': 'qualitative_standardreverse',
+}
+
+// Two-color palette migration map (v1 to v2)
+export const twoColorPaletteMigrationMap: Record<string, string> = {
+  // Monochrome palettes → divergent_blue_purple
+  'monochrome-1': 'divergent_blue_purple',
+  'monochrome-2': 'divergent_blue_purple', 
+  'monochrome-3': 'divergent_blue_purple',
+  'monochrome-4': 'divergent_blue_purple',
+  
+  // Warm palettes → divergent_green_orange
+  'monochrome-5': 'divergent_green_orange',
+  'warm-1': 'divergent_green_orange',
+  
+  // Cool palettes → divergent_blue_cyan
+  'cool-1': 'divergent_blue_cyan',
+  'cool-2': 'divergent_blue_cyan',
+  'cool-3': 'divergent_blue_cyan', 
+  'cool-4': 'divergent_blue_cyan',
+  'cool-5': 'divergent_blue_cyan',
+  
+  // Complementary palettes → divergent_blue_orange
+  'complementary-1': 'divergent_blue_orange',
+  'complementary-2': 'divergent_blue_orange',
+  'complementary-3': 'divergent_blue_orange',
+  'complementary-4': 'divergent_blue_orange',
+  'complementary-5': 'divergent_blue_orange',
+  
+  // Reverse palette migrations
+  'monochrome-1reverse': 'divergent_blue_purplereverse',
+  'monochrome-2reverse': 'divergent_blue_purplereverse',
+  'monochrome-3reverse': 'divergent_blue_purplereverse', 
+  'monochrome-4reverse': 'divergent_blue_purplereverse',
+  'monochrome-5reverse': 'divergent_green_orangereverse',
+  'warm-1reverse': 'divergent_green_orangereverse',
+  'cool-1reverse': 'divergent_blue_cyanreverse',
+  'cool-2reverse': 'divergent_blue_cyanreverse',
+  'cool-3reverse': 'divergent_blue_cyanreverse',
+  'cool-4reverse': 'divergent_blue_cyanreverse',
+  'cool-5reverse': 'divergent_blue_cyanreverse',
+  'complementary-1reverse': 'divergent_blue_orangereverse',
+  'complementary-2reverse': 'divergent_blue_orangereverse',
+  'complementary-3reverse': 'divergent_blue_orangereverse',
+  'complementary-4reverse': 'divergent_blue_orangereverse',
+  'complementary-5reverse': 'divergent_blue_orangereverse'
+}
+
+// Combined palette migration map for backward compatibility
+export const paletteMigrationMap: Record<string, string> = {
+  ...chartPaletteMigrationMap,
+  ...mapPaletteMigrationMap,
+  ...twoColorPaletteMigrationMap
+}
+
+

package/helpers/palettes/standardizePaletteNames.ts

@@ -0,0 +1,77 @@
+// Rename Palettes
+export const newMapPaletteNames = {
+    'yelloworangered': 'sequential_yellow_orange_red',
+    'yelloworangebrown': 'sequential_yellow_orange_brown',
+    'yelloworangebrownreverse': 'sequential_yellow_orange_brownreverse',
+    '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_red_reverse',
+    'greenblue': 'sequential_green_blue',
+    'greenbluereverse': 'sequential_green_bluereverse',
+    'yelloworangeredreverse': 'sequential_yellow_orange_redreverse',
+    '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',
+}
+
+export const newChartPaletteNames = {
+    'qualitative-bold': 'qualitative_bold',
+    'qualitative-soft': 'qualitative_soft',
+    'qualitative-standard': 'qualitative_standard',
+    'sequential-blue': 'sequential_blue',
+    'sequential-blue-2-(MPX)': 'sequential_blue_extended',
+    'sequential-orange': 'sequential_orange',
+    'sequential-orange-(MPX)': 'sequential_orange_extended',
+    'sequential-green': 'sequential_green',
+    'sequential-purple': 'sequential_purple',
+    'sequential-teal': 'sequential_teal',
+    'divergent-bluecyan': 'divergent_blue_cyan',
+    'divergent-bluepurple': 'divergent_blue_purple',
+    'divergent-greenorange': 'divergent_green_orange',
+    'divergent-blueorange': 'divergent_blue_orange',
+    'qualitative1': 'qualitative1',
+    'qualitative2': 'qualitative2',
+    'qualitative3': 'qualitative3',
+    'qualitative4': 'qualitative4',
+    'colorblindsafe': 'colorblindsafe',
+    // Reverse variants
+    'qualitative-boldreverse': 'qualitative_boldreverse',
+    'qualitative-softreverse': 'qualitative_softreverse',
+    'qualitative-standardreverse': 'qualitative_standardreverse',
+    'sequential-bluereverse': 'sequential_bluereverse',
+    'sequential-blue-2-(MPX)reverse': 'sequential_blue_extendedreverse',
+    'sequential-orangereverse': 'sequential_orangereverse',
+    'sequential-orange-(MPX)reverse': 'sequential_orange_extendedreverse',
+    'sequential-greenreverse': 'sequential_greenreverse',
+    'sequential-purplereverse': 'sequential_purplereverse',
+    'sequential-tealreverse': 'sequential_tealreverse',
+    'divergent-bluecyanreverse': 'divergent_blue_cyanreverse',
+    'divergent-bluepurplereverse': 'divergent_blue_purplereverse',
+    'divergent-greenorangereverse': 'divergent_green_orangereverse',
+    'divergent-blueorangereverse': 'divergent_blue_orangereverse',
+    'qualitative1reverse': 'qualitative1reverse',
+    'qualitative2reverse': 'qualitative2reverse',
+    'qualitative3reverse': 'qualitative3reverse',
+    'qualitative4reverse': 'qualitative4reverse',
+    'colorblindsafereverse': 'colorblindsafereverse'
+}