@cdc/core 4.25.8 → 4.25.11

package/components/EditorPanel/components/MarkupVariablesEditor.tsx

@@ -0,0 +1,450 @@
+import React, { useState, useMemo, useCallback } from 'react'
+import { MarkupVariable, MarkupCondition } from '../../../types/MarkupVariable'
+import Button from '../../elements/Button'
+import { TextField, Select, CheckBox } from '../Inputs'
+import Icon from '../../ui/Icon'
+import Accordion from '../../ui/Accordion'
+import { Datasets } from '../../../types/DataSet'
+import _ from 'lodash'
+
+type MarkupVariablesEditorProps = {
+  /** Array of markup variable configurations */
+  markupVariables: MarkupVariable[]
+  /** Dataset to extract column names and values from (for backward compatibility) */
+  data?: any[]
+  /** Available datasets for multi-dataset support */
+  datasets?: Datasets
+  /** Configuration object containing dataKey for dataset assignment */
+  config?: { dataKey?: string }
+  /** Callback when variables are added, updated, or removed */
+  onChange: (variables: MarkupVariable[]) => void
+  /** Whether markup variables feature is enabled */
+  enableMarkupVariables?: boolean
+  /** Callback when enable/disable toggle changes */
+  onToggleEnable?: (enabled: boolean) => void
+}
+
+export type { MarkupVariablesEditorProps }
+
+/**
+ * Editor for creating and managing markup variables with {{variable-name}} syntax.
+ * Supports conditional filters, number formatting, and auto-generated tags.
+ */
+const MarkupVariablesEditor: React.FC<MarkupVariablesEditorProps> = ({
+  markupVariables = [],
+  data = [],
+  datasets,
+  config,
+  onChange,
+  enableMarkupVariables = false,
+  onToggleEnable
+}) => {
+  const [editingIndex, setEditingIndex] = useState<number | null>(null)
+  const [validationErrors, setValidationErrors] = useState<Record<number, string[]>>({})
+
+  // Ensure we always have a valid array (memoized with deep equality to prevent unnecessary re-renders)
+  const safeMarkupVariables = useMemo(() => markupVariables || [], [JSON.stringify(markupVariables)])
+
+  // Get the target dataset with fallback logic (memoized for performance)
+  const getTargetData = useCallback((): any[] => {
+    // First try to use the data prop
+    if (data && data.length > 0) {
+      return data
+    }
+
+    // Fallback to assigned dataset using config.dataKey
+    if (datasets && config?.dataKey) {
+      const assignedDataset = datasets[config.dataKey]
+      if (assignedDataset?.data?.length > 0) {
+        return assignedDataset.data
+      }
+    }
+
+    return []
+  }, [data, datasets, config?.dataKey])
+
+  // Get columns from the available data (memoized for performance)
+  const getAvailableColumns = useMemo((): string[] => {
+    const targetData = getTargetData()
+    return targetData.length > 0 ? Object.keys(targetData[0]) : []
+  }, [getTargetData])
+
+  // Get column values for a specific column (memoized for performance)
+  const getColumnValues = useCallback((columnName: string): string[] => {
+    const targetData = getTargetData()
+    if (targetData.length === 0) return []
+
+    const uniqueValues = new Set<string>()
+    targetData.forEach(row => {
+      if (row[columnName] !== undefined && row[columnName] !== null) {
+        uniqueValues.add(String(row[columnName]))
+      }
+    })
+    return Array.from(uniqueValues).sort()
+  }, [data, datasets, config?.dataKey])
+
+  // Validate a variable and return array of error messages
+  const validateVariable = React.useCallback((variable: MarkupVariable): string[] => {
+    const errors: string[] = []
+    if (!variable.name || variable.name.trim() === '') {
+      errors.push('Variable name is required')
+    }
+    if (!variable.tag || variable.tag.trim() === '') {
+      errors.push('Variable tag is required')
+    }
+    if (!variable.columnName || variable.columnName.trim() === '') {
+      errors.push('Data column is required')
+    }
+    // Validate conditions
+    variable.conditions?.forEach((condition, index) => {
+      if (!condition.columnName) {
+        errors.push(`Condition ${index + 1}: Column is required`)
+      }
+      if (!condition.value) {
+        errors.push(`Condition ${index + 1}: Value is required`)
+      }
+    })
+    return errors
+  }, [])
+
+  // Validate all variables on mount and when variables change
+  React.useEffect(() => {
+    const errors: Record<number, string[]> = {}
+    safeMarkupVariables.forEach((variable, index) => {
+      const variableErrors = validateVariable(variable)
+      if (variableErrors.length > 0) {
+        errors[index] = variableErrors
+      }
+    })
+
+    // Only update if errors have actually changed (use deep equality)
+    setValidationErrors(prev => {
+      const errorsChanged = !_.isEqual(prev, errors)
+      return errorsChanged ? errors : prev
+    })
+  }, [safeMarkupVariables, validateVariable]) // Re-validate when variables change
+
+
+  const addVariable = () => {
+    const newVariable: MarkupVariable = {
+      name: '',
+      tag: '',
+      columnName: '',
+      conditions: [],
+      addCommas: false,
+      hideOnNull: false
+    }
+    const newVariables = [...safeMarkupVariables, newVariable]
+    onChange(newVariables)
+    const newIndex = safeMarkupVariables.length
+    setEditingIndex(newIndex)
+
+    // Immediately show validation errors for the new empty variable
+    const errors = validateVariable(newVariable)
+    setValidationErrors(prev => ({
+      ...prev,
+      [newIndex]: errors
+    }))
+  }
+
+  const updateVariable = (index: number, updates: Partial<MarkupVariable>) => {
+    const updated = safeMarkupVariables.map((variable, i) =>
+      i === index ? { ...variable, conditions: variable.conditions || [], ...updates } : variable
+    )
+    onChange(updated)
+
+    // Validate and update errors for this variable
+    const errors = validateVariable(updated[index])
+    setValidationErrors(prev => ({
+      ...prev,
+      [index]: errors
+    }))
+  }
+
+  const removeVariable = (index: number) => {
+    const updated = safeMarkupVariables.filter((_, i) => i !== index)
+    onChange(updated)
+    if (editingIndex === index) {
+      setEditingIndex(null)
+    }
+  }
+
+  const generateTag = (name: string) => {
+    if (!name) return ''
+    // Convert name to tag format: "My Variable" -> "{{my-variable}}"
+    return `{{${name.toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '')}}}`
+  }
+
+
+
+  const addCondition = (variableIndex: number) => {
+    const variable = safeMarkupVariables[variableIndex]
+    const newCondition: MarkupCondition = {
+      columnName: '',
+      isOrIsNotEqualTo: 'is',
+      value: ''
+    }
+    const updatedConditions = [...(variable.conditions || []), newCondition]
+    updateVariable(variableIndex, { conditions: updatedConditions })
+  }
+
+  const updateCondition = (variableIndex: number, conditionIndex: number, updates: Partial<MarkupCondition>) => {
+    const variable = safeMarkupVariables[variableIndex]
+    const conditions = variable.conditions || []
+    const updatedConditions = conditions.map((condition, i) =>
+      i === conditionIndex ? { ...condition, ...updates } : condition
+    )
+    updateVariable(variableIndex, { conditions: updatedConditions })
+  }
+
+  const removeCondition = (variableIndex: number, conditionIndex: number) => {
+    const variable = safeMarkupVariables[variableIndex]
+    const updatedConditions = variable.conditions.filter((_, i) => i !== conditionIndex)
+    updateVariable(variableIndex, { conditions: updatedConditions })
+  }
+
+  return (
+    <div className='markup-variables-editor'>
+      <div className='mb-3'>
+        <CheckBox
+          value={enableMarkupVariables}
+          fieldName='enableMarkupVariables'
+          label='Enable Markup Variables'
+          updateField={(_section, _subsection, _fieldName, value) => {
+            if (onToggleEnable) {
+              onToggleEnable(value)
+            }
+          }}
+        />
+      </div>
+
+      {enableMarkupVariables && (
+        <>
+          <div className='mb-3'>
+            <p className='text-sm text-gray-600'>
+              Use variables in your content with <code>{'{{variable-name}}'}</code> syntax.
+              Variables will be replaced with values from your data.
+            </p>
+          </div>
+
+          {safeMarkupVariables.length > 0 && (
+            <div className='variables-list mb-3'>
+              {safeMarkupVariables.map((variable, index) => variable ? (
+                <div key={index} className='variable-item p-3 border rounded mb-2' style={{ backgroundColor: '#fff' }}>
+                  <div className='d-flex justify-content-between align-items-start mb-2'>
+                    <div style={{ flex: 1 }}>
+                      <div style={{ fontSize: '16px', fontWeight: 600, marginBottom: '4px' }}>
+                        {variable.name || 'Unnamed Variable'}
+                      </div>
+                      <div style={{ fontSize: '13px', color: '#6c757d', fontFamily: 'monospace', marginBottom: '4px' }}>
+                        {variable.tag}
+                      </div>
+                      <div style={{ fontSize: '13px', color: '#6c757d' }}>
+                        Column: <strong>{variable.columnName || 'Not selected'}</strong>
+                        {variable.conditions && variable.conditions.length > 0 && (
+                          <span> • {variable.conditions.length} condition{variable.conditions.length !== 1 ? 's' : ''}</span>
+                        )}
+                      </div>
+                      {validationErrors[index] && validationErrors[index].length > 0 && (
+                        <div style={{ fontSize: '12px', color: '#dc3545', marginTop: '8px' }}>
+                          <strong>⚠ Validation Errors:</strong>
+                          <ul style={{ margin: '4px 0 0 0', paddingLeft: '20px' }}>
+                            {validationErrors[index].map((error, errorIndex) => (
+                              <li key={errorIndex}>{error}</li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+                    </div>
+                    <div className='d-flex gap-2'>
+                      <Button
+                        className='btn-sm'
+                        onClick={() => setEditingIndex(editingIndex === index ? null : index)}
+                      >
+                        {editingIndex === index ? 'Close' : 'Edit'}
+                      </Button>
+                    </div>
+                  </div>
+
+                  {editingIndex === index && (
+                    <div className='mt-3 pt-3 border-t'>
+                      <Accordion>
+                        <Accordion.Section title='Basic Settings'>
+                          <div className='mb-3'>
+                            <TextField
+                              value={variable.name}
+                              fieldName='name'
+                              label='Variable Name'
+                              placeholder='e.g., "State Name"'
+                              updateField={(section, subsection, fieldName, value) => {
+                                updateVariable(index, {
+                                  name: value,
+                                  tag: generateTag(value)
+                                })
+                              }}
+                            />
+                          </div>
+                          <div className='mb-3'>
+                            <label>
+                              <span className='edit-label column-heading'>Tag (auto-generated)</span>
+                              <input
+                                type='text'
+                                value={variable.tag}
+                                placeholder='{{variable-name}}'
+                                readOnly
+                                style={{ backgroundColor: '#e9ecef', cursor: 'not-allowed' }}
+                              />
+                            </label>
+                          </div>
+
+                          <div className='mb-3'>
+                            <Select
+                              value={variable.columnName}
+                              fieldName='columnName'
+                              label='Data Column'
+                              options={[
+                                { value: '', label: 'Select Column...' },
+                                ...getAvailableColumns.map(col => ({ value: col, label: col }))
+                              ]}
+                              updateField={(_section, _subsection, _fieldName, value) => {
+                                updateVariable(index, { columnName: value })
+                              }}
+                            />
+                          </div>
+                        </Accordion.Section>
+
+                        <Accordion.Section title='Conditions'>
+                          <div className='text-sm text-gray-500 mb-2'>
+                            Add conditions to filter when this variable should display data
+                          </div>
+
+                          {variable.conditions && variable.conditions.length > 0 && (
+                            <div className='conditions-list mb-2'>
+                              {variable.conditions.map((condition, conditionIndex) => (
+                                <div key={`condition-${index}-${conditionIndex}`} className='condition-item p-2 border rounded mb-2' style={{ backgroundColor: '#f8f9fa' }}>
+                                  <div className='mb-2'>
+                                    <Select
+                                      value={condition.columnName || ''}
+                                      fieldName={`condition-column-${index}-${conditionIndex}`}
+                                      label='Column'
+                                      options={[
+                                        { value: '', label: 'Select Column...' },
+                                        ...getAvailableColumns.map(col => ({ value: col, label: col }))
+                                      ]}
+                                      updateField={(_section, _subsection, _fieldName, newColumnName) => {
+                                        // Reset value when column changes
+                                        updateCondition(index, conditionIndex, {
+                                          columnName: newColumnName,
+                                          value: ''
+                                        })
+                                      }}
+                                    />
+                                  </div>
+                                  <div className='mb-2'>
+                                    <Select
+                                      value={condition.isOrIsNotEqualTo || 'is'}
+                                      fieldName={`condition-operator-${index}-${conditionIndex}`}
+                                      label='Operator'
+                                      options={[
+                                        { value: 'is', label: 'is' },
+                                        { value: 'is not', label: 'is not' }
+                                      ]}
+                                      updateField={(_section, _subsection, _fieldName, value) => {
+                                        updateCondition(index, conditionIndex, { isOrIsNotEqualTo: value as 'is' | 'is not' })
+                                      }}
+                                    />
+                                  </div>
+                                  <div className='mb-2'>
+                                    <Select
+                                      value={condition.value || ''}
+                                      fieldName={`condition-value-${index}-${conditionIndex}`}
+                                      label='Value'
+                                      options={[
+                                        { value: '', label: 'Select Value...' },
+                                        ...(condition.columnName
+                                          ? getColumnValues(condition.columnName).map(val => ({
+                                            value: String(val),
+                                            label: String(val)
+                                          }))
+                                          : [])
+                                      ]}
+                                      updateField={(_section, _subsection, _fieldName, value) => {
+                                        updateCondition(index, conditionIndex, { value })
+                                      }}
+                                    />
+                                  </div>
+                                  <Button
+                                    className='btn-sm btn-danger'
+                                    onClick={() => removeCondition(index, conditionIndex)}
+                                  >
+                                    Remove Condition
+                                  </Button>
+                                </div>
+                              ))}
+                            </div>
+                          )}
+
+                          <Button
+                            className='btn-sm'
+                            onClick={() => addCondition(index)}
+                          >
+                            <Icon display='plus' size={14} className='mr-1' />
+                            Add Condition
+                          </Button>
+                        </Accordion.Section>
+
+                        <Accordion.Section title='Formatting Options'>
+                          <div className='mb-3'>
+                            <CheckBox
+                              value={variable.addCommas || false}
+                              fieldName='addCommas'
+                              label='Format numbers with commas'
+                              updateField={(_section, _subsection, _fieldName, value) =>
+                                updateVariable(index, { addCommas: value })
+                              }
+                            />
+                          </div>
+
+                          <div className='mb-3'>
+                            <CheckBox
+                              value={variable.hideOnNull || false}
+                              fieldName='hideOnNull'
+                              label='Hide section when value is null'
+                              updateField={(_section, _subsection, _fieldName, value) =>
+                                updateVariable(index, { hideOnNull: value })
+                              }
+                            />
+                          </div>
+                        </Accordion.Section>
+                      </Accordion>
+
+                      <div className='mt-3 pt-3 border-t' style={{ textAlign: 'center' }}>
+                        <Button
+                          className='btn-sm btn-danger'
+                          onClick={() => {
+                            if (window.confirm(`Are you sure you want to delete the variable "${variable.name || 'Unnamed Variable'}"?`)) {
+                              removeVariable(index)
+                            }
+                          }}
+                        >
+                          Delete Variable
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ) : <></>)}
+            </div>
+          )}
+
+          <Button className='btn-primary' onClick={addVariable}>
+            <Icon display='plus' size={16} className='mr-2' />
+            Add Variable
+          </Button>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default MarkupVariablesEditor

package/components/EditorPanel/components/PanelMarkup.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import MarkupVariablesEditor from './MarkupVariablesEditor'
+import Accordion from '../../ui/Accordion'
+import { MarkupVariable } from '../../../types/MarkupVariable'
+
+type PanelMarkupProps = {
+  /** Display name for the panel */
+  name: string
+  /** Array of markup variable configurations */
+  markupVariables: MarkupVariable[]
+  /** Dataset to extract column names and values from */
+  data: any[]
+  /** Whether markup variables feature is enabled */
+  enableMarkupVariables: boolean
+  /** Callback when variables are added, updated, or removed */
+  onMarkupVariablesChange: (variables: MarkupVariable[]) => void
+  /** Callback when enable/disable toggle changes */
+  onToggleEnable: (enabled: boolean) => void
+  /** Optional: wrap in accordion. Default true */
+  withAccordion?: boolean
+}
+
+/**
+ * Shared panel for markup variables editor across all visualization packages.
+ * Wraps MarkupVariablesEditor with optional accordion functionality.
+ */
+const PanelMarkup: React.FC<PanelMarkupProps> = ({
+  name,
+  markupVariables,
+  data,
+  enableMarkupVariables,
+  onMarkupVariablesChange,
+  onToggleEnable,
+  withAccordion = true
+}) => {
+  const content = (
+    <MarkupVariablesEditor
+      markupVariables={markupVariables || []}
+      data={data}
+      onChange={onMarkupVariablesChange}
+      enableMarkupVariables={enableMarkupVariables || false}
+      onToggleEnable={onToggleEnable}
+    />
+  )
+
+  if (!withAccordion) {
+    return content
+  }
+
+  return (
+    <Accordion key={name}>
+      <Accordion.Section title={name} key={name}>
+        {content}
+      </Accordion.Section>
+    </Accordion>
+  )
+}
+
+export default PanelMarkup

package/components/ErrorBoundary.jsx

@@ -13,7 +13,9 @@ class ErrorBoundary extends React.Component {
 
   componentDidCatch(error, errorInfo) {
     // You can also log the error to an error reporting service
-    console.warn(error, errorInfo)
+    console.error('ErrorBoundary caught an error:', error)
+    console.error('Error info:', errorInfo)
+    console.error('Error stack:', error.stack)
   }
 
   render() {

package/components/Filters/Filters.tsx

@@ -20,6 +20,7 @@ import { applyQueuedActive } from './helpers/applyQueuedActive'
 import Tabs from './components/Tabs'
 import Dropdown from './components/Dropdown'
 import { publishAnalyticsEvent } from '../../helpers/metrics/helpers'
+import { getVizSubType, getVizTitle } from '@cdc/core/helpers/metrics/utils'
 
 export const VIZ_FILTER_STYLE = {
   dropdown: 'dropdown',
@@ -87,12 +88,15 @@ const Filters: React.FC<FilterProps> = ({
     const newFilters = getChangedFilters([...filters], index, value, filterBehavior)
     setFilters(newFilters)
 
-    publishAnalyticsEvent(
-      `${visualizationConfig.type}_filter_changed`,
-      'click',
-      `${interactionLabel}|key_${newFilters?.[index]?.columnName}|value_${newFilters?.[index]?.active}`,
-      visualizationConfig.type
-    )
+    publishAnalyticsEvent({
+      vizType: visualizationConfig.type as any,
+      vizSubType: getVizSubType(visualizationConfig),
+      eventType: `${visualizationConfig.type}_filter_changed` as any,
+      eventAction: 'change',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(visualizationConfig),
+      specifics: `key: ${String(newFilters?.[index]?.columnName).toLowerCase()}, value: ${String(newFilters?.[index]?.active).toLowerCase()}`
+    })
   }
 
   const handleApplyButton = newFilters => {
@@ -113,17 +117,19 @@ const Filters: React.FC<FilterProps> = ({
 
     setFilters(newFilters)
 
-    publishAnalyticsEvent(
-      `${visualizationConfig.type}_filter_applied`,
-      'click',
-      `${interactionLabel}|${newFilters.map(f => f.active)}`,
-      visualizationConfig.type
-    )
+    publishAnalyticsEvent({
+      vizType: visualizationConfig.type as any,
+      eventType: `${visualizationConfig.type}_filter_applied` as any,
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(visualizationConfig),
+      specifics: newFilters.map(f => f.active).join(',')
+    })
 
     setShowApplyButton(false)
   }
 
-  const handleReset = e => {
+  const handleFiltersReset = e => {
     let newFilters = [...filters]
     e.preventDefault()
 
@@ -135,10 +141,31 @@ const Filters: React.FC<FilterProps> = ({
         filter.values = getUniqueValues(visualizationConfig.data, filter.columnName)
       }
 
-      newFilters[i].active = handleSorting(filter).values[0]
+      // Determine reset value based on filter configuration
+      let resetValue
+
+      // If filter has a resetLabel, reset to empty state (shows "- Select -")
+      if (filter.resetLabel) {
+        resetValue = filter.resetLabel
+      }
+      // If filter has a defaultValue, use that
+      else if (filter.defaultValue) {
+        resetValue = filter.defaultValue
+      }
+      // Otherwise, use first value in sorted values array
+      else if (filter.values && filter.values.length > 0) {
+        resetValue = handleSorting(filter).values[0]
+      }
+
+      // Handle multi-select filters
+      if (filter.filterStyle === 'multi-select') {
+        newFilters[i].active = resetValue ? [resetValue] : []
+      } else {
+        newFilters[i].active = resetValue
+      }
 
-      if (filter.setByQueryParameter && queryParams[filter.setByQueryParameter] !== filter.active) {
-        queryParams[filter.setByQueryParameter] = filter.active
+      if (filter.setByQueryParameter && queryParams[filter.setByQueryParameter] !== newFilters[i].active) {
+        queryParams[filter.setByQueryParameter] = newFilters[i].active
         needsQueryUpdate = true
       }
     })
@@ -148,12 +175,13 @@ const Filters: React.FC<FilterProps> = ({
     }
 
     setFilters(newFilters)
-    publishAnalyticsEvent(
-      `${visualizationConfig.type}_filter_reset`,
-      'click',
-      `${interactionLabel}`,
-      visualizationConfig.type
-    )
+    publishAnalyticsEvent({
+      vizType: visualizationConfig.type as any,
+      eventType: `${visualizationConfig.type}_filter_reset` as any,
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: visualizationConfig?.title
+    })
   }
 
   const mobileFilterStyle = useMemo(() => {
@@ -288,9 +316,9 @@ const Filters: React.FC<FilterProps> = ({
               >
                 Apply
               </Button>
-              <Button secondary disabled={initialFiltersActive} onClick={handleReset}>
+              <button className='btn btn-link' disabled={initialFiltersActive} onClick={handleFiltersReset}>
                 Clear Filters
-              </Button>
+              </button>
             </div>
           ) : (
             <></>

package/components/Filters/components/Dropdown.tsx

@@ -10,7 +10,7 @@ type DropdownProps = {
 }
 
 const Dropdown: React.FC<DropdownProps> = ({ index: outerIndex, label, filter, changeFilterActive }) => {
-  const { active, queuedActive } = filter
+  const { active, queuedActive, resetLabel } = filter
 
   return (
     <select
@@ -25,6 +25,11 @@ const Dropdown: React.FC<DropdownProps> = ({ index: outerIndex, label, filter, c
         changeFilterActive(outerIndex, e.target.value)
       }}
     >
+      {resetLabel && (
+        <option key='reset-option' value={resetLabel} aria-label={resetLabel}>
+          {resetLabel}
+        </option>
+      )}
       {filter.values?.map((value, index) => {
         return (
           <option key={index} value={value} aria-label={value}>

package/components/Filters/components/Tabs.tsx

@@ -41,6 +41,7 @@ const Tabs: React.FC<TabsProps> = ({ filter, index: outerIndex, changeFilterActi
   const Tabs = filter.values.map((value, index) => {
     return (
       <button
+        key={`${value}-${outerIndex}-${index}-${id}`}
         id={`${value}-${outerIndex}-${index}-${id}`}
         className={getClassList(value)}
         onClick={e => {