@cdc/core 4.25.8 → 4.25.10

package/components/AdvancedEditor/AdvancedEditor.tsx

@@ -3,12 +3,17 @@ import MapIcon from '../../assets/map-folded.svg'
 import ChartIcon from '../../assets/icon-chart-bar.svg'
 import MarkupIncludeIcon from '../../assets/icon-code.svg'
 import { FilterFunction, JsonEditor, UpdateFunction } from 'json-edit-react'
-import { formatConfigBeforeSave as stripConfig } from '../../helpers/formatConfigBeforeSave'
 import './advanced-editor-styles.css'
 import _ from 'lodash'
 import Tooltip from '../ui/Tooltip'
 
-export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExpandCollapse = () => {} }) => {
+export const AdvancedEditor = ({
+  loadConfig,
+  config,
+  convertStateToConfig,
+  stripConfig = config => config,
+  onExpandCollapse = () => {}
+}) => {
   const [advancedToggle, _setAdvancedToggle] = useState(false)
   const [configTextboxValue, setConfigTextbox] = useState<Record<string, any>>({})
   const setAdvancedToggle = val => {
@@ -26,13 +31,29 @@ export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExp
   }
 
   useEffect(() => {
-    let parsedConfig = stripConfig(config)
-    if (config.type !== 'dashboard') {
-      parsedConfig = convertStateToConfig()
+    // Only process config when advanced editor is open to improve performance
+    if (advancedToggle) {
+      let parsedConfig = stripConfig(config)
+      if (config.type !== 'dashboard') {
+        parsedConfig = convertStateToConfig()
+      }
+
+      setConfigTextbox(parsedConfig)
     }
+  }, [config, advancedToggle])
 
-    setConfigTextbox(parsedConfig)
-  }, [config])
+  // Initialize config when advanced editor is first opened
+  const handleToggleOpen = () => {
+    if (!advancedToggle) {
+      // Process config only when opening for the first time
+      let parsedConfig = stripConfig(config)
+      if (config.type !== 'dashboard') {
+        parsedConfig = convertStateToConfig()
+      }
+      setConfigTextbox(parsedConfig)
+    }
+    setAdvancedToggle(!advancedToggle)
+  }
 
   const typeLookup = {
     chart: ['Charts', 'https://www.cdc.gov/cove/index.html', <ChartIcon />],
@@ -58,7 +79,7 @@ export const AdvancedEditor = ({ loadConfig, config, convertStateToConfig, onExp
         </div>
       </a>
       <div className='advanced'>
-        <span className='advanced-toggle-link' onClick={() => setAdvancedToggle(!advancedToggle)}>
+        <span className='advanced-toggle-link' onClick={handleToggleOpen}>
           <span>{advancedToggle ? `— ` : `+ `}</span>Advanced Options
         </span>
         {advancedToggle && (

package/components/DataTable/DataTable.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo } from 'react'
+import { useEffect, useState, useMemo, useRef } from 'react'
 import { timeParse } from 'd3-time-format'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
@@ -53,6 +53,10 @@ export type DataTableProps = {
   // determines if columns should be wrapped in the table
   wrapColumns?: boolean
   interactionLabel?: string
+  // Map-specific props (optional)
+  legendMemo?: React.MutableRefObject<Map<any, any>>
+  legendSpecialClassLastMemo?: React.MutableRefObject<Map<any, any>>
+  runtimeLegend?: any
 }
 
 const DataTable = (props: DataTableProps) => {
@@ -95,6 +99,11 @@ const DataTable = (props: DataTableProps) => {
 
   const [accessibilityLabel, setAccessibilityLabel] = useState('')
 
+  // Create default refs for map-specific props when not provided
+  const defaultLegendMemo = useRef(new Map())
+  const defaultLegendSpecialClassLastMemo = useRef(new Map())
+  const defaultRuntimeLegend = null
+
   const isVertical = !(config.type === 'chart' && !config.table?.showVertical)
 
   const rand = Math.random().toString(16).substr(2, 8)
@@ -136,23 +145,23 @@ const DataTable = (props: DataTableProps) => {
   const rows =
     isVertical && sortBy.column
       ? rawRows.sort((a, b) => {
-          let dataA
-          let dataB
-          if (config.type === 'map' && config.columns) {
-            const sortByColName = config.columns[sortBy.column].name
-            dataA = runtimeData[a][sortByColName]
-            dataB = runtimeData[b][sortByColName]
-          }
-          if (['chart', 'dashboard', 'table'].includes(config.type)) {
-            dataA = runtimeData[a][sortBy.column]
-            dataB = runtimeData[b][sortBy.column]
-          }
-          if (!dataA && !dataB && config.type === 'chart' && config.xAxis && config.xAxis.type === 'date-time') {
-            dataA = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[a][config.xAxis.dataKey])
-            dataB = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[b][config.xAxis.dataKey])
-          }
-          return dataA || dataB ? customSort(dataA, dataB, sortBy, config) : 0
-        })
+        let dataA
+        let dataB
+        if (config.type === 'map' && config.columns) {
+          const sortByColName = config.columns[sortBy.column].name
+          dataA = runtimeData[a][sortByColName]
+          dataB = runtimeData[b][sortByColName]
+        }
+        if (['chart', 'dashboard', 'table'].includes(config.type)) {
+          dataA = runtimeData[a][sortBy.column]
+          dataB = runtimeData[b][sortBy.column]
+        }
+        if (!dataA && !dataB && config.type === 'chart' && config.xAxis && config.xAxis.type === 'date-time') {
+          dataA = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[a][config.xAxis.dataKey])
+          dataB = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[b][config.xAxis.dataKey])
+        }
+        return dataA || dataB ? customSort(dataA, dataB, sortBy, config) : 0
+      })
       : rawRows
 
   const limitHeight = {
@@ -231,17 +240,17 @@ const DataTable = (props: DataTableProps) => {
       const visibleData =
         config.type === 'map'
           ? getMapRowData(
-              rows,
-              columns,
-              config,
-              formatLegendLocation,
-              runtimeData as Record<string, Object>,
-              displayGeoName,
-              filterColumns
-            )
+            rows,
+            columns,
+            config,
+            formatLegendLocation,
+            runtimeData as Record<string, Object>,
+            displayGeoName,
+            filterColumns
+          )
           : runtimeData.map(d => {
-              return _.pick(d, [...filterColumns, ...dataSeriesColumns])
-            })
+            return _.pick(d, [...filterColumns, ...dataSeriesColumns])
+          })
       const csvData = config.table?.downloadVisibleDataOnly ? visibleData : rawData
 
       // only use fullGeoName on County maps and no other
@@ -277,7 +286,16 @@ const DataTable = (props: DataTableProps) => {
 
     const childrenMatrix =
       config.type === 'map'
-        ? mapCellMatrix({ ...props, rows, wrapColumns, runtimeData, viewport })
+        ? mapCellMatrix({
+          ...props,
+          rows,
+          wrapColumns,
+          runtimeData,
+          viewport,
+          legendMemo: props.legendMemo || defaultLegendMemo,
+          legendSpecialClassLastMemo: props.legendSpecialClassLastMemo || defaultLegendSpecialClassLastMemo,
+          runtimeLegend: props.runtimeLegend || defaultRuntimeLegend
+        })
         : chartCellMatrix({ rows, ...props, runtimeData, isVertical, sortBy, hasRowType, viewport })
 
     const useBottomExpandCollapse = config.table.showBottomCollapse && expanded && Array.isArray(childrenMatrix)
@@ -285,12 +303,12 @@ const DataTable = (props: DataTableProps) => {
     // If every value in a column is a number, record the column index so the header and cells can be right-aligned
     const rightAlignedCols = childrenMatrix.length
       ? Object.fromEntries(
-          Object.keys(childrenMatrix[0])
-            .filter(
-              i => childrenMatrix.filter(row => isRightAlignedTableValue(row[i])).length === childrenMatrix.length
-            )
-            .map(x => [x, true])
-        )
+        Object.keys(childrenMatrix[0])
+          .filter(
+            i => childrenMatrix.filter(row => isRightAlignedTableValue(row[i])).length === childrenMatrix.length
+          )
+          .map(x => [x, true])
+      )
       : {}
 
     const showCollapseButton = config.table.collapsible !== false && useBottomExpandCollapse
@@ -305,6 +323,7 @@ const DataTable = (props: DataTableProps) => {
               fileName={`${vizTitle || 'data-table'}.csv`}
               headerColor={headerColor}
               interactionLabel={interactionLabel}
+              config={config}
             />
           )}
         </MediaControls.Section>
@@ -365,9 +384,8 @@ const DataTable = (props: DataTableProps) => {
                 )
               }
               tableOptions={{
-                className: `table table-striped table-width-unset ${
-                  expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'
-                }${isVertical ? '' : ' horizontal'}`,
+                className: `table table-striped table-width-unset ${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'
+                  }${isVertical ? '' : ' horizontal'}`,
                 'aria-live': 'assertive',
                 'aria-rowcount': config?.data?.length ? config.data.length : -1,
                 hidden: !expanded,

package/components/DataTable/components/ChartHeader.tsx

@@ -7,6 +7,7 @@ import { getNewSortBy } from '../helpers/getNewSortBy'
 import parse from 'html-react-parser'
 import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
 import { publishAnalyticsEvent } from '../../../helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 type ChartHeaderProps = {
   data
@@ -61,9 +62,8 @@ const ChartHeader = ({
     if (columnHeaderText === notApplicableText) return
 
     return (
-      <span className='cdcdataviz-sr-only'>{`Press command, modifier, or enter key to sort by ${columnHeaderText} in ${
-        sortBy.column !== columnHeaderText ? 'ascending' : sortBy.column === 'desc' ? 'descending' : 'ascending'
-      }  order`}</span>
+      <span className='cdcdataviz-sr-only'>{`Press command, modifier, or enter key to sort by ${columnHeaderText} in ${sortBy.column !== columnHeaderText ? 'ascending' : sortBy.column === 'desc' ? 'descending' : 'ascending'
+        }  order`}</span>
     )
   }
 
@@ -116,18 +116,29 @@ const ChartHeader = ({
               scope='col'
               onClick={() => {
                 if (hasRowType) return
-                publishAnalyticsEvent(
-                  `data_table_sort_by|${newSortBy.column}|${
-                    newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'undefined'
-                  }`,
-                  'click',
-                  interactionLabel
-                )
+                publishAnalyticsEvent({
+                  vizType: config.type,
+                  vizSubType: getVizSubType(config),
+                  eventType: `data_table_sort`,
+                  eventAction: 'click',
+                  eventLabel: interactionLabel,
+                  vizTitle: getVizTitle(config),
+                  specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                })
                 setSortBy(newSortBy)
               }}
               onKeyDown={e => {
                 if (hasRowType) return
-                if (e.keyCode === 13) {
+                if (e.key === 'Enter') {
+                  publishAnalyticsEvent({
+                    vizType: config.type,
+                    vizSubType: getVizSubType(config),
+                    eventType: `data_table_sort`,
+                    eventAction: 'keyboard',
+                    eventLabel: interactionLabel,
+                    vizTitle: getVizTitle(config),
+                    specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                  })
                   setSortBy(newSortBy)
                 }
               }}
@@ -137,7 +148,7 @@ const ChartHeader = ({
                   : { 'aria-sort': 'descending' }
                 : null)}
             >
-              <ColumnHeadingText text={text} column={column} config={config} />
+              <ColumnHeadingText text={text} config={config} />
               {isSortedCol && <SortIcon ascending={sortByAsc} />}
               <ScreenReaderSortByText sortBy={sortBy} config={config} text={text} />
             </th>
@@ -171,10 +182,29 @@ const ChartHeader = ({
               role='columnheader'
               scope='col'
               onClick={() => {
+                if (hasRowType) return
+                publishAnalyticsEvent({
+                  vizType: config.type,
+                  vizSubType: getVizSubType(config),
+                  eventType: `data_table_sort`,
+                  eventAction: 'click',
+                  eventLabel: interactionLabel,
+                  vizTitle: getVizTitle(config),
+                  specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                })
                 setSortBy(newSortBy)
               }}
               onKeyDown={e => {
-                if (e.keyCode === 13) {
+                if (e.key === 'Enter') {
+                  publishAnalyticsEvent({
+                    vizType: config.type,
+                    vizSubType: getVizSubType(config),
+                    eventType: `data_table_sort`,
+                    eventAction: 'keyboard',
+                    eventLabel: interactionLabel,
+                    vizTitle: getVizTitle(config),
+                    specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                  })
                   setSortBy(newSortBy)
                 }
               }}
@@ -184,7 +214,7 @@ const ChartHeader = ({
                   : { 'aria-sort': 'descending' }
                 : null)}
             >
-              <ColumnHeadingText text={text} column={column} config={config} />
+              <ColumnHeadingText text={text} config={config} />
               {isSortedCol && <SortIcon ascending={sortByAsc} />}
 
               <ScreenReaderSortByText text={text} config={config} sortBy={sortBy} />

package/components/DataTable/components/ExpandCollapse.tsx

@@ -1,3 +1,4 @@
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 import { publishAnalyticsEvent } from '../../../helpers/metrics/helpers'
 import { Visualization } from '../../../types/Visualization'
 import Icon from '../../ui/Icon'
@@ -17,7 +18,15 @@ const ExpandCollapse = ({ expanded, setExpanded, tableTitle, config, interaction
       role='button'
       className={expanded ? 'data-table-heading p-3' : 'collapsed data-table-heading p-3'}
       onClick={() => {
-        publishAnalyticsEvent('data_table_toggled', 'click', interactionLabel, config.type || 'unknown')
+        publishAnalyticsEvent({
+          vizType: config?.type,
+          vizSubType: getVizSubType(config),
+          eventType: 'expand_collapse_toggled',
+          eventAction: 'click',
+          eventLabel: interactionLabel,
+          vizTitle: getVizTitle(config),
+          specifics: expanded ? 'collapsed' : 'expanded'
+        })
         setExpanded(!expanded)
       }}
       tabIndex={0}

package/components/DataTable/components/MapHeader.tsx

@@ -3,6 +3,7 @@ import ScreenReaderText from '../../elements/ScreenReaderText'
 import { SortIcon } from './SortIcon'
 import { getNewSortBy } from '../helpers/getNewSortBy'
 import { publishAnalyticsEvent } from '../../../helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 type MapHeaderProps = DataTableProps & {
   sortBy: { column; asc }
@@ -56,17 +57,28 @@ const MapHeader = ({
               role='columnheader'
               scope='col'
               onClick={() => {
-                publishAnalyticsEvent(
-                  `data_table_sort_by|${newSortBy.column}|${
-                    newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'undefined'
-                  }`,
-                  'click',
-                  interactionLabel
-                )
+                publishAnalyticsEvent({
+                  vizType: config.type,
+                  vizSubType: getVizSubType(config),
+                  eventType: `data_table_sort`,
+                  eventAction: 'click',
+                  eventLabel: interactionLabel,
+                  vizTitle: getVizTitle(config),
+                  specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                })
                 setSortBy(newSortBy)
               }}
               onKeyDown={e => {
-                if (e.keyCode === 13) {
+                if (e.key === 'Enter') {
+                  publishAnalyticsEvent({
+                    vizType: config.type,
+                    vizSubType: getVizSubType(config),
+                    eventType: `data_table_sort`,
+                    eventAction: 'keyboard',
+                    eventLabel: interactionLabel,
+                    vizTitle: getVizTitle(config),
+                    specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                  })
                   setSortBy(newSortBy)
                 }
               }}
@@ -77,15 +89,14 @@ const MapHeader = ({
                   : { 'aria-sort': 'descending' }
                 : null)}
             >
-              <ColumnHeadingText text={text} config={config} column={column} />
+              <ColumnHeadingText text={text} config={config} />
               <SortIcon ascending={sortByAsc} />
-              <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${
-                sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'
-              } order`}</span>
+              <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'
+                } order`}</span>
             </th>
           )
         })}
-    </tr>
+    </tr >
   )
 }
 

package/components/DataTable/data-table.css

@@ -145,7 +145,13 @@ table.data-table {
 
     svg {
       margin-left: 1rem;
+
+      &.legend-shape-svg {
+        display: flex;
+        margin-left: 0 !important;
+      }
     }
+
   }
 
   td a {

package/components/DataTable/helpers/chartCellMatrix.tsx

@@ -31,7 +31,6 @@ const chartCellArray = ({
   const groupBy = config.table?.groupBy
   const dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
 
-
   const dataSeriesColumnsSorted = () => {
     if (!sortBy && sortBy.colIndex === null) return dataSeriesColumns
     return dataSeriesColumns.sort((a, b) => {
@@ -73,10 +72,14 @@ const chartCellArray = ({
       return rows.map(row => {
         if (hasRowType) {
           const rowType = getRowType(runtimeData[row])
-          const rowValues = dataSeriesColumns.map(column => getChartCellValue(row, column, config, runtimeData, rightAxisItemsMap))
+          const rowValues = dataSeriesColumns.map(column =>
+            getChartCellValue(row, column, config, runtimeData, rightAxisItemsMap)
+          )
           return [rowType, ...rowValues]
         } else {
-          return dataSeriesColumns.map((column, j) => getChartCellValue(row, column, config, runtimeData, rightAxisItemsMap))
+          return dataSeriesColumns.map((column, j) =>
+            getChartCellValue(row, column, config, runtimeData, rightAxisItemsMap)
+          )
         }
       })
     }
@@ -86,11 +89,11 @@ const chartCellArray = ({
       let nodes: ReactNode[] =
         config.visualizationType !== 'Pie'
           ? [
-            <>
-              {colorScale && colorScale(seriesName) && <LegendShape fill={colorScale(seriesName)} />}
-              {parse(seriesName)}
-            </>
-          ]
+              <>
+                {colorScale && colorScale(seriesName) && <LegendShape fill={colorScale(seriesName)} />}
+                {parse(String(seriesName))}
+              </>
+            ]
           : []
       return nodes.concat(rows.map((row, i) => getChartCellValue(row, column, config, runtimeData, rightAxisItemsMap)))
     })

package/components/DataTable/helpers/mapCellMatrix.tsx

@@ -6,6 +6,7 @@ import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
 import _ from 'lodash'
 import { applyLegendToRow } from '@cdc/map/src/helpers/applyLegendToRow'
 import { hashObj } from '@cdc/map/src/helpers'
+import { getPatternForRow } from '@cdc/map/src/helpers/getPatternForRow'
 
 type MapRowsProps = DataTableProps & {
   rows: string[]
@@ -104,10 +105,27 @@ const mapCellArray = ({
             type === 'bubble' && allowMapZoom && geoType === 'world' ? () => setFilteredCountryCode(row) : undefined
 
           const validColor = legendColor && legendColor.length > 0 && !noColor
+          
+          // Check for pattern information
+          const patternInfo = getPatternForRow(rowObj, config)
+          const mapId = config.runtime?.uniqueId || 'map'
+          
           return (
             <div className='col-12'>
               {validColor ? (
-                <LegendShape fill={legendColor[0]} />
+                patternInfo ? (
+                  <LegendShape
+                    fill={legendColor[0]}
+                    patternInfo={{
+                      pattern: patternInfo.pattern,
+                      patternId: `${mapId}--${patternInfo.dataKey}--${patternInfo.patternIndex}--table`,
+                      size: patternInfo.size,
+                      color: patternInfo.color
+                    }}
+                  />
+                ) : (
+                  <LegendShape fill={legendColor[0]} />
+                )
               ) : (
                 <div className='d-inline-block me-2' style={{ width: '1rem', height: '1rem' }} />
               )}

package/components/DownloadButton.tsx

@@ -1,43 +1,69 @@
+import { useRef } from 'react'
 import Papa from 'papaparse'
 import { publishAnalyticsEvent } from '../helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 type DownloadButtonProps = {
-  rawData: Object
+  rawData: any[]
   fileName: string
   headerColor: string
   skipId: string | number
   configUrl?: string
+  interactionLabel?: string
+  title?: string
 }
 
-const DownloadButton = ({ rawData, fileName, headerColor, skipId, configUrl }: DownloadButtonProps) => {
-  const csvData = Papa.unparse(rawData)
-  // Prepend a Byte Order Mark (BOM) to the CSV data.
-  // The BOM is a special marker that helps applications like Excel recognize the file as UTF-8 encoded.
-  // Adding the BOM ensures that Excel interprets special characters correctly.
-  const bom = '\uFEFF'
-  const utf8EncodedCsvData = new TextEncoder().encode(bom + csvData)
-  const blob = new Blob([utf8EncodedCsvData], { type: 'text/csv;charset=utf-8;' })
+const DownloadButton = ({ rawData, fileName, headerColor, skipId, interactionLabel, configUrl, title, config }: DownloadButtonProps) => {
+  const linkRef = useRef<HTMLAnchorElement>(null)
+
+  const handleDownload = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault()
+
+    const csvData = Papa.unparse(rawData)
+
+    // Prepend a Byte Order Mark (BOM) to the CSV data.
+    // The BOM is a special marker that helps applications like Excel recognize the file as UTF-8 encoded.
+    // Adding the BOM ensures that Excel interprets special characters correctly.
+    const bom = '\uFEFF'
+    const utf8EncodedCsvData = new TextEncoder().encode(bom + csvData)
+    const blob = new Blob([utf8EncodedCsvData], { type: 'text/csv;charset=utf-8;' })
+
+    const url = URL.createObjectURL(blob)
 
-  const saveBlob = () => {
     //@ts-ignore
     if (typeof window.navigator.msSaveBlob === 'function') {
       //@ts-ignore
       navigator.msSaveBlob(blob, fileName)
+    } else {
+      const downloadLink = document.createElement('a')
+      downloadLink.href = url
+      downloadLink.download = fileName
+      document.body.appendChild(downloadLink)
+      downloadLink.click()
+      document.body.removeChild(downloadLink)
     }
-    publishAnalyticsEvent('data_downloaded', 'click', configUrl)
+    URL.revokeObjectURL(url)
+    publishAnalyticsEvent({
+      vizType: config.type,
+      vizSubType: getVizSubType(config),
+      eventType: 'data_downloaded',
+      eventAction: 'click',
+      eventLabel: interactionLabel || configUrl,
+      vizTitle: getVizTitle(config)
+    })
   }
 
   return (
     <a
-      download={fileName}
+      ref={linkRef}
       type='button'
-      onClick={saveBlob}
-      href={URL.createObjectURL(blob)}
+      onClick={handleDownload}
       aria-label='Download this data in a CSV file format.'
       className={`${headerColor} no-border`}
       id={`${skipId}`}
       data-html2canvas-ignore
       role='button'
+      style={{ cursor: 'pointer' }}
     >
       Download Data (CSV)
     </a>