@cdc/core 4.25.8 → 4.25.10

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()
 
@@ -148,12 +154,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,7 +295,7 @@ const Filters: React.FC<FilterProps> = ({
               >
                 Apply
               </Button>
-              <Button secondary disabled={initialFiltersActive} onClick={handleReset}>
+              <Button secondary disabled={initialFiltersActive} onClick={handleFiltersReset}>
                 Clear Filters
               </Button>
             </div>

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 => {

package/components/Legend/Legend.Gradient.tsx

@@ -70,7 +70,7 @@ const LegendGradient = ({
     const lastTick = index === labels.length - 1
 
     return (
-      <Group top={MARGIN}>
+      <Group key={`tick-${index}`} top={MARGIN}>
         {!lastTick && !isLinearBlocks && <line x1={xPositionX} x2={xPositionX} y1={30} y2={boxHeight} stroke='black' />}
         <Text
           angle={-tickRotation}
@@ -123,9 +123,8 @@ const LegendGradient = ({
               const segmentWidth = (legendWidth - legendSeparatorsToSubtract) / numTicks
               const xPosition = index * segmentWidth + MARGIN + getTickSeparatorsAdjustment(index)
               return (
-                <Group>
+                <Group key={`color-block-${index}`}>
                   <rect
-                    key={index}
                     x={xPosition}
                     y={MARGIN}
                     width={segmentWidth}
@@ -142,10 +141,9 @@ const LegendGradient = ({
               const segmentWidth = (legendWidth - legendSeparatorsToSubtract) / numTicks
               const xPosition = separatorAfter * segmentWidth + MARGIN + getTickSeparatorsAdjustment(separatorAfter - 1)
               return (
-                <Group>
+                <Group key={`separator-${index}`}>
                   {/* Separators block */}
                   <rect
-                    key={index}
                     x={xPosition}
                     y={MARGIN / 2}
                     width={separatorSize}
@@ -157,7 +155,6 @@ const LegendGradient = ({
 
                   {/* Dotted dividing line */}
                   <line
-                    key={index}
                     x1={xPosition + separatorSize / 2}
                     x2={xPosition + separatorSize / 2}
                     y1={-3}

package/components/LegendShape.tsx

@@ -1,24 +1,142 @@
 import React from 'react'
 
+interface PatternInfo {
+  pattern: string
+  patternId: string
+  size?: string
+  color?: string
+}
+
 interface LegendShapeProps {
   fill: string
   borderColor?: string
   display?: 'inline-block' | 'block' | 'inline'
   shape?: 'circle' | 'square'
+  patternInfo?: PatternInfo
 }
 
 const LegendShape: React.FC<LegendShapeProps> = props => {
-  const { fill, borderColor, display = 'inline-block', shape = 'circle' } = props
+  const { fill, borderColor, display = 'inline-block', shape = 'circle', patternInfo } = props
   const dimensions = { width: '1em', height: '1em' }
   const isCircleOrSquare = ['circle', 'square'].includes(shape)
+
+  // If pattern is provided, use SVG with pattern fill
+  if (patternInfo) {
+    const sizes = {
+      small: '8',
+      medium: '10',
+      large: '12'
+    }
+
+    const patternSize = sizes[patternInfo.size as keyof typeof sizes] || '10'
+    // Use the exact pattern color from config, with a reliable fallback
+    const patternColor = patternInfo.color || '#212529'
+
+    return (
+      <span className={`legend-item ${isCircleOrSquare ? 'me-2' : ''}`} style={{ display, verticalAlign: 'middle', width: dimensions.width, height: dimensions.height }}>
+        <svg width="100%" height="100%" viewBox="0 0 16 16" className="legend-shape-svg">
+          {/* Pattern definitions */}
+          <defs>
+            {patternInfo.pattern === 'waves' && (
+              <pattern
+                id={patternInfo.patternId}
+                patternUnits="userSpaceOnUse"
+                width={patternSize}
+                height={patternSize}
+              >
+                <path
+                  d={`M0,${parseInt(patternSize) / 2} Q${parseInt(patternSize) / 4},0 ${parseInt(patternSize) / 2},${parseInt(patternSize) / 2} T${patternSize},${parseInt(patternSize) / 2}`}
+                  stroke={patternColor}
+                  strokeWidth="0.25"
+                  fill="none"
+                />
+              </pattern>
+            )}
+            {patternInfo.pattern === 'circles' && (
+              <pattern
+                id={patternInfo.patternId}
+                patternUnits="userSpaceOnUse"
+                width={patternSize}
+                height={patternSize}
+              >
+                <circle
+                  cx={parseInt(patternSize) / 2}
+                  cy={parseInt(patternSize) / 2}
+                  r="1.25"
+                  fill={patternColor}
+                />
+              </pattern>
+            )}
+            {patternInfo.pattern === 'lines' && (
+              <pattern
+                id={patternInfo.patternId}
+                patternUnits="userSpaceOnUse"
+                width={patternSize}
+                height={patternSize}
+              >
+                <line
+                  x1="0"
+                  y1="0"
+                  x2={patternSize}
+                  y2={patternSize}
+                  stroke={patternColor}
+                  strokeWidth="0.75"
+                />
+              </pattern>
+            )}
+          </defs>
+
+          {shape === 'circle' ? (
+            <circle
+              fill={fill}
+              r={7.5}
+              cx={8}
+              cy={8}
+              stroke={borderColor || 'rgba(0,0,0,.3)'}
+              strokeWidth={1}
+            />
+          ) : (
+            <rect
+              fill={fill}
+              width={15}
+              height={15}
+              x={0.5}
+              y={0.5}
+              stroke={borderColor || 'rgba(0,0,0,.3)'}
+              strokeWidth={1}
+            />
+          )}
+          {shape === 'circle' ? (
+            <circle
+              fill={`url(#${patternInfo.patternId})`}
+              r={7.5}
+              cx={8}
+              cy={8}
+              stroke='none'
+            />
+          ) : (
+            <rect
+              fill={`url(#${patternInfo.patternId})`}
+              width={15}
+              height={15}
+              x={0.5}
+              y={0.5}
+              stroke='none'
+            />
+          )}
+        </svg>
+      </span>
+    )
+  }
+
+  // Default solid color shape
   const styles = {
     borderRadius: shape === 'circle' ? '50%' : '0px',
-    verticalAlign: 'middle',
     display: display,
     height: dimensions.height,
     width: dimensions.width,
     border: borderColor ? `${borderColor} 1px solid` : 'rgba(0,0,0,.3) 1px solid',
-    backgroundColor: fill
+    backgroundColor: fill,
   }
 
   return <span className={`legend-item ${isCircleOrSquare ? 'me-2' : ''}`} style={styles} />

package/components/MediaControls.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 // import html2pdf from 'html2pdf.js'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 const buttonText = {
   pdf: 'Download PDF',
@@ -38,6 +39,14 @@ const generateMedia = (state, type, elementToCapture, interactionLabel) => {
   // Identify Selector
   const baseSvg = document.querySelector(`[data-download-id=${elementToCapture}]`)
 
+  // Extract title from different state structures
+  const getTitle = state => {
+    if (state?.dashboard?.title) return state.dashboard.title
+    if (state?.general?.title) return state.general.title
+    if (state?.title) return state.title
+    return undefined
+  }
+
   // Handles different state title locations between components
   // Apparently some packages use state.title where others use state.general.title
   const handleFileName = state => {
@@ -85,6 +94,23 @@ const generateMedia = (state, type, elementToCapture, interactionLabel) => {
 
       const downloadImage = async () => {
         document.body.appendChild(container) // Append container to the DOM
+
+        // Fix select elements to show their current selected values before screenshot
+        const selectElements = container.querySelectorAll('select')
+        const originalSelects = baseSvg.querySelectorAll('select')
+
+        selectElements.forEach((select, index) => {
+          const originalSelect = originalSelects[index]
+          if (originalSelect && originalSelect.value) {
+            select.value = originalSelect.value
+            // Also update the visual display for browsers that don't update immediately
+            const selectedOption = select.querySelector(`option[value="${originalSelect.value}"]`) as HTMLOptionElement
+            if (selectedOption) {
+              selectedOption.selected = true
+            }
+          }
+        })
+
         import(/* webpackChunkName: "html2canvas" */ 'html2canvas').then(mod => {
           mod
             .default(container, {
@@ -93,8 +119,16 @@ const generateMedia = (state, type, elementToCapture, interactionLabel) => {
                 el.className.search(/download-buttons|download-links|data-table-container/) !== -1
             })
             .then(canvas => {
+              document.body.removeChild(container) // Clean up container
               saveImageAs(canvas.toDataURL(), filename + '.png')
-              publishAnalyticsEvent(`${state.type}_image_downloaded`, 'click', interactionLabel, `${state.type}`)
+              publishAnalyticsEvent({
+                vizType: state.type,
+                vizSubType: getVizSubType(state),
+                eventType: `image_download`,
+                eventAction: 'click',
+                eventLabel: interactionLabel,
+                vizTitle: getTitle(state)
+              })
             })
         })
       }
@@ -151,7 +185,14 @@ const Link = ({ config, dashboardDataConfig, interactionLabel }) => {
         title={buttonText.link}
         target='_blank'
         onClick={() => {
-          publishAnalyticsEvent('data_viewed', 'click', `${unknown}`)
+          publishAnalyticsEvent({
+            vizType: config.type,
+            vizSubType: getVizSubType(config),
+            eventType: 'clicked_data_link_to_view',
+            eventAction: 'click',
+            eventLabel: interactionLabel,
+            vizTitle: getVizTitle(config)
+          })
         }}
       >
         {buttonText.link}
@@ -166,7 +207,14 @@ const Link = ({ config, dashboardDataConfig, interactionLabel }) => {
       title='Link to view full data set'
       target='_blank'
       onClick={() => {
-        publishAnalyticsEvent('data_viewed', 'click', `${interactionLabel}`)
+        publishAnalyticsEvent({
+          vizType: config.type,
+          vizSubType: getVizSubType(config),
+          eventType: 'data_viewed',
+          eventAction: 'click',
+          eventLabel: interactionLabel,
+          vizTitle: getVizTitle(config)
+        })
       }}
     >
       {buttonText.link}

package/components/PaletteConversionModal.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import Button from '@cdc/core/components/elements/Button'
+
+interface PaletteConversionModalProps {
+  onConfirm: () => void
+  onCancel: () => void
+  onReturnToV1: () => void
+  paletteName?: string
+}
+
+const PaletteConversionModal: React.FC<PaletteConversionModalProps> = ({
+  onConfirm,
+  onCancel,
+  onReturnToV1,
+  paletteName
+}) => {
+  return (
+    <div
+      className='modal-overlay'
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 9999
+      }}
+    >
+      <div
+        className='modal-content'
+        style={{
+          backgroundColor: 'white',
+          borderRadius: '8px',
+          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+          maxWidth: '500px',
+          margin: '20px'
+        }}
+      >
+        <div
+          className='modal-header'
+          style={{
+            padding: '20px 20px 0 20px',
+            borderBottom: '1px solid #e0e0e0'
+          }}
+        >
+          <h3 style={{ margin: '0 0 20px 0' }}>Color Palette Conversion</h3>
+        </div>
+
+        <div className='modal-body' style={{ padding: '20px' }}>
+          <p>
+            <strong>
+              Your visualization uses an outdated color palette and will be updated to a new, improved palette.
+            </strong>
+          </p>
+          <br />
+          <p>
+            These new palettes provide improved accessibility and consistency across visualizations. If your previous
+            colors are important for approvals, do not save your visualizations with the new palette.
+          </p>
+          <br />
+        </div>
+
+        <div
+          className='modal-footer'
+          style={{
+            padding: '20px',
+            borderTop: '1px solid #e0e0e0',
+            display: 'flex',
+            gap: '10px',
+            justifyContent: 'flex-end'
+          }}
+        >
+          <Button secondary onClick={onReturnToV1} style={{ marginRight: 'auto' }}>
+            Cancel
+          </Button>
+          <Button onClick={onConfirm}>Convert to New Palette</Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PaletteConversionModal

package/components/PaletteSelector/DeveloperPaletteRollback.tsx

@@ -0,0 +1,114 @@
+import React from 'react'
+import _ from 'lodash'
+import { isCoveDeveloperMode } from '../../helpers/queryStringUtils'
+import { 
+  hasPaletteBackup, 
+  getOriginalPaletteName, 
+  rollbackPaletteToOriginal,
+  hasTwoColorPaletteBackup,
+  getOriginalTwoColorPaletteName,
+  rollbackTwoColorPaletteToOriginal
+} from '../../helpers/palettes/utils'
+import './PaletteSelector.css'
+
+interface DeveloperPaletteRollbackProps {
+  config: any
+  updateConfig: (newConfig: any) => void
+  className?: string
+}
+
+const DeveloperPaletteRollback: React.FC<DeveloperPaletteRollbackProps> = ({
+  config,
+  updateConfig,
+  className = ''
+}) => {
+  // Only show if developer mode is enabled
+  if (!isCoveDeveloperMode()) {
+    return null
+  }
+
+  // Check for both regular and two-color palette backups
+  const hasRegularBackup = hasPaletteBackup(config)
+  const hasTwoColorBackup = hasTwoColorPaletteBackup(config)
+  
+  // Only show if there's backup data available
+  if (!hasRegularBackup && !hasTwoColorBackup) {
+    return null
+  }
+
+  const originalPaletteName = getOriginalPaletteName(config)
+  const originalTwoColorPaletteName = getOriginalTwoColorPaletteName(config)
+  const currentPaletteName = config?.general?.palette?.name || config?.palette || config?.color
+  const currentTwoColorPaletteName = config?.twoColor?.palette
+
+  const handleRollback = () => {
+    // Determine which type of rollback to perform and show appropriate confirmation
+    let confirmMessage = ''
+    let fromName = ''
+    let toName = ''
+    
+    if (hasTwoColorBackup) {
+      // Two-color palette rollback
+      fromName = currentTwoColorPaletteName
+      toName = originalTwoColorPaletteName
+      confirmMessage = `Are you sure you want to rollback the palette from "${fromName}" to "${toName}"?\n\nThis will restore the original v1 palette configuration.`
+    } else if (hasRegularBackup) {
+      // Regular palette rollback  
+      fromName = currentPaletteName
+      toName = originalPaletteName
+      confirmMessage = `Are you sure you want to rollback the palette from "${fromName}" to "${toName}"?\n\nThis will restore the original palette configuration and remove the migrated structure.`
+    }
+
+    const confirmRollback = window.confirm(confirmMessage)
+
+    if (confirmRollback) {
+      const configCopy = _.cloneDeep(config)
+      console.log('Config before rollback:', JSON.stringify(configCopy, null, 2))
+      
+      let success = false
+      
+      if (hasTwoColorBackup) {
+        success = rollbackTwoColorPaletteToOriginal(configCopy)
+        console.log('Two-color rollback success:', success)
+      } else if (hasRegularBackup) {
+        const rolledBackConfig = rollbackPaletteToOriginal(configCopy)
+        success = !!rolledBackConfig
+        console.log('Regular rollback success:', success)
+      }
+      
+      console.log('Config after rollback:', JSON.stringify(configCopy, null, 2))
+
+      if (success) {
+        updateConfig(configCopy)
+      } else {
+        alert('Rollback failed: No backup data available')
+      }
+    }
+  }
+
+  // Determine display text based on available backups
+  const displayPaletteName = hasTwoColorBackup ? originalTwoColorPaletteName : originalPaletteName
+  const infoText = hasTwoColorBackup 
+    ? `Developer Mode: Two-color palette migrated from "${originalTwoColorPaletteName}"`
+    : `Developer Mode: Migrated from "${originalPaletteName}"`
+
+  return (
+    <div className={`developer-palette-rollback ${className}`}>
+      <div className="rollback-info">
+        <small className="text-muted">
+          {infoText}
+        </small>
+      </div>
+      <button
+        type="button"
+        className="btn btn-sm btn-outline-warning"
+        onClick={handleRollback}
+        title={`Rollback to original palette: ${displayPaletteName}`}
+      >
+        Rollback Palette
+      </button>
+    </div>
+  )
+}
+
+export default DeveloperPaletteRollback