@cdc/editor 4.26.3 → 4.26.5

package/src/components/DataImport/components/DataImport.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useContext, useEffect } from 'react'
 import { useDropzone } from 'react-dropzone'
-import axios from 'axios'
+import { csvFormat } from 'd3'
 
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 
@@ -19,6 +19,7 @@ import CloseIcon from '@cdc/core/assets/icon-close.svg'
 import DataDesigner from '@cdc/core/components/managers/DataDesigner'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
+import Button from '@cdc/core/components/elements/Button'
 import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
 import { type Visualization } from '@cdc/core/types/Visualization'
 import { type DataSet } from '@cdc/core/types/DataSet'
@@ -32,6 +33,7 @@ import { supportedDataTypes } from '../helpers/supportedDataTypes'
 import { getFileExtension } from '../helpers/getFileExtension'
 import { parseTextByMimeType } from '../helpers/parseTextByMimeType'
 import { getMimeType } from '../helpers/getMimeType'
+import { applyAutoDetectedDateParseFormat } from '../helpers/applyAutoDetectedDateParseFormat'
 import {
   extractCoveData,
   getSampleVegaJson,
@@ -99,25 +101,27 @@ const DataImport = () => {
 
     try {
       // eslint-disable-next-line no-unused-vars
-      await axios
-        .get(dataURL.toString(), {
-          responseType: 'blob'
-        })
-        .then(response => {
-          responseBlob = response.data
-
-          // Sometimes the files are coming in as plain text types... Maybe when saved from Macs
-          const csvTypes = ['text/csv', 'text/plain']
-          if ((fileExtension === '.csv' && csvTypes.includes(responseBlob.type)) || isSolrCsv(externalURL)) {
-            responseBlob = responseBlob.slice(0, responseBlob.size, 'text/csv')
-          } else if (
-            responseBlob.type === 'application/json' ||
-            (fileExtension === '.json' && responseBlob.type === 'text/plain') ||
-            isSolrJson(externalURL)
-          ) {
-            responseBlob = responseBlob.slice(0, responseBlob.size, 'application/json')
-          }
-        })
+      const response = await fetch(dataURL.toString())
+      if (!response.ok) {
+        throw new Error(`HTTP error ${response.status}`)
+      }
+      responseBlob = await response.blob()
+
+      // Strip charset/parameters — fetch preserves the full Content-Type (e.g. 'application/json; charset=utf-8')
+      // while XHR (axios) would strip them, so normalise before comparing.
+      const blobBaseType = responseBlob.type.split(';')[0].trim()
+
+      // Sometimes the files are coming in as plain text types... Maybe when saved from Macs
+      const csvTypes = ['text/csv', 'text/plain']
+      if ((fileExtension === '.csv' && csvTypes.includes(blobBaseType)) || isSolrCsv(externalURL)) {
+        responseBlob = responseBlob.slice(0, responseBlob.size, 'text/csv')
+      } else if (
+        blobBaseType === 'application/json' ||
+        (fileExtension === '.json' && blobBaseType === 'text/plain') ||
+        isSolrJson(externalURL)
+      ) {
+        responseBlob = responseBlob.slice(0, responseBlob.size, 'application/json')
+      }
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error('Error in loadExternal', err)
@@ -208,14 +212,21 @@ const DataImport = () => {
             payload: { datasetKey: newDatasetName || fileSource, dataset, oldDatasetKey }
           })
         } else {
+          const configWithAutoDetectedDateFormat = applyAutoDetectedDateParseFormat(
+            {
+              ...config,
+              ...tempConfig
+            },
+            newData as Record<string, unknown>[]
+          )
+
           let newConfig = {
-            ...config,
-            ...tempConfig,
+            ...configWithAutoDetectedDateFormat,
             data: newData,
             dataMetadata,
             dataFileName: fileSource, // new file source
             dataFileSourceType: fileSourceType, // new file source type
-            formattedData: transform.developerStandardize(newData, config.dataDescription)
+            formattedData: transform.developerStandardize(newData, configWithAutoDetectedDateFormat.dataDescription)
           }
           if (setDataURL) {
             newConfig.dataUrl = fileSource
@@ -359,7 +370,7 @@ const DataImport = () => {
           Always load from URL (normally will only pull once)
         </label>
         <div className='d-flex justify-content-end mt-2 mb-3'>
-          <button
+          <Button
             className='btn btn-primary px-4'
             type='submit'
             id='load-data'
@@ -367,7 +378,7 @@ const DataImport = () => {
             onClick={() => loadData(null, externalURL, editingDataset)}
           >
             Save & Load
-          </button>
+          </Button>
         </div>
       </>
     )
@@ -388,7 +399,7 @@ const DataImport = () => {
     return (
       //todo convert to modal
       <>
-        <button
+        <Button
           className='btn danger'
           onClick={() =>
             resetEditor(
@@ -399,7 +410,7 @@ const DataImport = () => {
         >
           Clear
           <CloseIcon />
-        </button>
+        </Button>
         {/* DEV-851 link to replace file should pop file dialog */}
         {config.dataFileSourceType === 'file' && (
           <div className='link link-replace' {...getRootProps2()}>
@@ -435,6 +446,49 @@ const DataImport = () => {
     dispatch({ type: 'DELETE_DASHBOARD_DATASET', payload: { datasetKey } })
   }
 
+  const downloadCSV = (data: Array<Record<string, unknown>>, filename: string) => {
+    // Normalize filename: strip query/hash, remove path, replace extension with .csv
+    let baseName = filename || ''
+
+    const queryIndex = baseName.indexOf('?')
+    const hashIndex = baseName.indexOf('#')
+    const cutoffIndex = queryIndex === -1 ? hashIndex : hashIndex === -1 ? queryIndex : Math.min(queryIndex, hashIndex)
+    if (cutoffIndex !== -1) {
+      baseName = baseName.substring(0, cutoffIndex)
+    }
+
+    const lastSlash = Math.max(baseName.lastIndexOf('/'), baseName.lastIndexOf('\\'))
+    if (lastSlash !== -1) {
+      baseName = baseName.substring(lastSlash + 1)
+    }
+
+    const lastDot = baseName.lastIndexOf('.')
+    if (lastDot > 0) {
+      baseName = baseName.substring(0, lastDot)
+    }
+
+    if (!baseName) {
+      baseName = 'data'
+    }
+
+    const name = `${baseName}.csv`
+    const blob = new Blob(['\uFEFF' + csvFormat(data)], { type: 'text/csv;charset=utf-8;' })
+    // @ts-ignore
+    if (typeof window.navigator.msSaveBlob === 'function') {
+      // @ts-ignore
+      navigator.msSaveBlob(blob, name)
+    } else {
+      const url = URL.createObjectURL(blob)
+      const link = document.createElement('a')
+      link.href = url
+      link.download = name
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      URL.revokeObjectURL(url)
+    }
+  }
+
   const updateDataFromVegaConfig = pastedConfig => {
     const vegaConfig = parseVegaConfig(JSON.parse(pastedConfig))
     const newData = extractCoveData(vegaConfig)
@@ -609,7 +663,7 @@ const DataImport = () => {
             </fieldset>
           )
         )}
-      <button
+      <Button
         className='btn full-width btn-primary'
         onClick={() => {
           setConfig({
@@ -621,7 +675,7 @@ const DataImport = () => {
         }}
       >
         Add New URL Filter
-      </button>
+      </Button>
     </>
   )
 
@@ -639,7 +693,7 @@ const DataImport = () => {
                   <th>Name</th>
                   <th>Size</th>
                   <th>Type</th>
-                  <th colSpan={3}>Actions</th>
+                  <th colSpan={4}>Actions</th>
                 </tr>
               </thead>
               <tbody>
@@ -651,17 +705,33 @@ const DataImport = () => {
                         <td className='p-1'>{displaySize(config.datasets[datasetKey].dataFileSize)}</td>
                         <td className='p-1'>{config.datasets[datasetKey].dataFileFormat}</td>
                         <td>
-                          <button
-                            className='btn btn-link p-1'
+                          <Button
+                            variant='link'
+                            className='p-1'
                             onClick={() => setGlobalDatasetProp(datasetKey, 'preview', true)}
                           >
                             Preview
+                          </Button>
+                        </td>
+                        <td>
+                          <button
+                            className='btn btn-link p-1'
+                            disabled={!config.datasets[datasetKey].data?.length}
+                            onClick={() =>
+                              downloadCSV(
+                                config.datasets[datasetKey].data,
+                                config.datasets[datasetKey].dataFileName || datasetKey
+                              )
+                            }
+                          >
+                            Download
                           </button>
                         </td>
                         <td>
                           {config.datasets[datasetKey].dataFileSourceType === 'url' && (
-                            <button
-                              className='btn btn-link p-1'
+                            <Button
+                              variant='link'
+                              className='p-1'
                               onClick={() => {
                                 if (editingDataset === datasetKey) {
                                   setEditingDataset(undefined)
@@ -677,13 +747,13 @@ const DataImport = () => {
                               }}
                             >
                               Edit
-                            </button>
+                            </Button>
                           )}
                         </td>
                         <td>
-                          <button className='btn btn-danger' onClick={() => removeDataset(datasetKey)}>
+                          <Button variant='danger' onClick={() => removeDataset(datasetKey)}>
                             X
-                          </button>
+                          </Button>
                         </td>
                       </tr>
                     )
@@ -719,6 +789,14 @@ const DataImport = () => {
                         )}
                       </div>
                       <div>{resetButton()}</div>
+                      {config.data?.length > 0 && (
+                        <button
+                          className='btn btn-link p-1'
+                          onClick={() => downloadCSV(config.data, config.dataFileName || 'data')}
+                        >
+                          Download CSV
+                        </button>
+                      )}
                     </div>
                   )}
 
@@ -727,6 +805,14 @@ const DataImport = () => {
                       <div className='url-source-options'>
                         <div>{loadDataFromUrl()}</div>
                         <div>{resetButton()}</div>
+                        {config.data?.length > 0 && (
+                          <button
+                            className='btn btn-link p-1'
+                            onClick={() => downloadCSV(config.data, config.dataFileName || 'data')}
+                          >
+                            Download CSV
+                          </button>
+                        )}
                       </div>
                       {config.dataUrl && (config.type === 'chart' || config.type === 'map') && urlFilters}
                     </>
@@ -750,15 +836,16 @@ const DataImport = () => {
                         placeholder='{ }'
                       />
                       <div className='mb-3 d-flex justify-content-end'>
-                        <button
-                          className='btn btn-primary px-4'
+                        <Button
+                          variant='primary'
+                          className='px-4'
                           type='submit'
                           id='load-data'
                           disabled={!pastedConfig}
                           onClick={() => updateDataFromVegaConfig(pastedConfig)}
                         >
                           Save & Load
-                        </button>
+                        </Button>
                       </div>
                     </div>
                   </TabPane>
@@ -812,15 +899,16 @@ const DataImport = () => {
                       />
                     </label>
                     <div className='d-flex justify-content-end mt-2 mb-3'>
-                      <button
-                        className='btn btn-primary px-4'
+                      <Button
+                        variant='primary'
+                        className='px-4'
                         type='submit'
                         id='load-data'
                         disabled={!newDatasetName || !externalURL}
                         onClick={() => loadData(null, externalURL, editingDataset)}
                       >
                         Save & Load
-                      </button>
+                      </Button>
                     </div>
                   </TabPane>
                 </Tabs>
@@ -895,20 +983,17 @@ const DataImport = () => {
 
         {config.type === 'dashboard' && !addingDataset && (
           <div className='mt-2'>
-            <button className='btn btn-primary' onClick={() => setAddingDataset(true)}>
+            <Button variant='primary' onClick={() => setAddingDataset(true)}>
               + Add More Files
-            </button>
+            </Button>
           </div>
         )}
 
         {readyToConfigure && (
           <div className='mt-2'>
-            <button
-              className='btn btn-primary'
-              onClick={() => dispatch({ type: 'EDITOR_SET_GLOBALACTIVE', payload: 2 })}
-            >
+            <Button variant='primary' onClick={() => dispatch({ type: 'EDITOR_SET_GLOBALACTIVE', payload: 2 })}>
               Configure your visualization
-            </button>
+            </Button>
           </div>
         )}
 

package/src/components/DataImport/components/SampleData.test.tsx

@@ -0,0 +1,16 @@
+import SampleData from './SampleData'
+
+describe('SampleData', () => {
+  it('includes a synthetic varicella HeatMap sample dataset', () => {
+    const sample = SampleData.data.charts.find(sample => sample.fileName === 'valid-heatmap-varicella-cases.csv')
+
+    expect(sample).toBeDefined()
+    expect(sample).toEqual(
+      expect.objectContaining({
+        text: 'HeatMap Data (Synthetic Varicella Cases)',
+        data: expect.stringContaining('Month,HHS Region 1,HHS Region 2')
+      })
+    )
+    expect(sample?.data).toContain('Apr,55,61,78,69,72,64,58,57,66,50')
+  })
+})

package/src/components/DataImport/components/SampleData.tsx

@@ -10,6 +10,7 @@ import validBoxPlotData from './samples/valid-boxplot.csv?raw'
 import validChartData from './samples/valid-data-chart.csv?raw'
 import validCountyMapData from './samples/valid-county-data.csv?raw'
 import validForecastData from './samples/valid-forecast-data.csv?raw'
+import validHeatMapData from './samples/valid-heatmap-varicella-cases.csv?raw'
 import validGeoPoint from './samples/valid-geo-point.csv?raw'
 import validHorizonData from './samples/valid-horizon-chart.json?raw'
 import validMapData from './samples/valid-data-map.csv?raw'
@@ -60,6 +61,11 @@ const sampleData = {
       fileName: 'valid-horizon-data.json',
       data: validHorizonData
     },
+    {
+      text: 'HeatMap Data (Synthetic Varicella Cases)',
+      fileName: 'valid-heatmap-varicella-cases.csv',
+      data: validHeatMapData
+    },
     {
       text: 'Sankey Chart Data',
       fileName: 'valid-sankey-data.json',

package/src/components/DataImport/components/samples/valid-heatmap-varicella-cases.csv

@@ -0,0 +1,13 @@
+Month,HHS Region 1,HHS Region 2,HHS Region 3,HHS Region 4,HHS Region 5,HHS Region 6,HHS Region 7,HHS Region 8,HHS Region 9,HHS Region 10
+Jan,18,22,35,28,31,24,19,21,26,16
+Feb,24,29,41,34,38,31,27,28,33,22
+Mar,42,48,63,56,59,51,46,44,53,39
+Apr,55,61,78,69,72,64,58,57,66,50
+May,49,54,70,62,65,58,52,51,60,46
+Jun,31,36,49,43,45,40,35,34,41,30
+Jul,17,21,30,25,28,23,20,19,24,16
+Aug,12,15,22,18,20,16,14,13,17,11
+Sep,14,18,26,21,23,19,16,15,20,13
+Oct,20,24,33,28,30,25,22,21,27,18
+Nov,27,32,44,37,40,34,29,30,35,24
+Dec,34,39,52,45,48,41,36,37,43,31

package/src/components/DataImport/helpers/applyAutoDetectedDateParseFormat.ts

@@ -0,0 +1,35 @@
+import { getAutoDetectedDateParseFormat, isDateScale } from '@cdc/core/helpers/cove/date'
+import { type Visualization } from '@cdc/core/types/Visualization'
+
+const isChartWithDateAxis = (config: Visualization) =>
+  config?.type === 'chart' && !!config?.xAxis && isDateScale(config.xAxis)
+
+export const applyAutoDetectedDateParseFormat = (
+  config: Visualization,
+  importedData: Record<string, unknown>[]
+): Visualization => {
+  if (!isChartWithDateAxis(config) || !config?.xAxis?.dataKey || !importedData?.length) {
+    return config
+  }
+
+  const existingDateParseFormat = config.xAxis.dateParseFormat
+
+  if (typeof existingDateParseFormat === 'string' && existingDateParseFormat.trim() !== '') {
+    return config
+  }
+  const xAxisKey = config.xAxis.dataKey
+
+  const autoDetectedDateParseFormat = getAutoDetectedDateParseFormat(importedData, xAxisKey)
+
+  if (!autoDetectedDateParseFormat) {
+    return config
+  }
+
+  return {
+    ...config,
+    xAxis: {
+      ...config.xAxis,
+      dateParseFormat: autoDetectedDateParseFormat
+    }
+  }
+}

package/src/components/DataImport/tests/applyAutoDetectedDateParseFormat.test.ts

@@ -0,0 +1,128 @@
+import { describe, expect, it } from 'vitest'
+import { applyAutoDetectedDateParseFormat } from '../helpers/applyAutoDetectedDateParseFormat'
+
+describe('applyAutoDetectedDateParseFormat', () => {
+  const baseChartConfig: any = {
+    type: 'chart',
+    xAxis: {
+      type: 'date',
+      dataKey: 'date',
+      dateParseFormat: ''
+    },
+    tooltips: {
+      dateDisplayFormat: '%B %-d, %Y'
+    },
+    table: {
+      dateDisplayFormat: '%b %-d %Y'
+    }
+  }
+
+  const reliableSlashDateRows = [
+    { date: '2024/03/15', value: 10 },
+    { date: '2025/11/09', value: 12 }
+  ]
+
+  const ambiguousUsOrEuDateRows = [
+    { date: '01/02/2024', value: 10 },
+    { date: '02/03/2024', value: 12 }
+  ]
+
+  const missingXAxisDateRows = [{ otherDate: '2024/03/15', value: 10 }]
+  const sparseFirstRowReliableDateRows = [
+    { otherDate: 'ignore-me', value: 8 },
+    { date: '2024/03/15', value: 10 },
+    { date: '2025/11/09', value: 12 }
+  ]
+
+  it('auto-fills the chart xAxis date parse format when detection is reliable', () => {
+    const result: any = applyAutoDetectedDateParseFormat(baseChartConfig, reliableSlashDateRows)
+
+    expect(result.xAxis.dateParseFormat).toBe('%Y/%m/%d')
+    expect(result.tooltips.dateDisplayFormat).toBe('%B %-d, %Y')
+    expect(result.table.dateDisplayFormat).toBe('%b %-d %Y')
+  })
+
+  it('auto-fills the chart xAxis date parse format for date-time axes when detection is reliable', () => {
+    const result: any = applyAutoDetectedDateParseFormat(
+      {
+        ...baseChartConfig,
+        xAxis: {
+          ...baseChartConfig.xAxis,
+          type: 'date-time'
+        }
+      },
+      reliableSlashDateRows
+    )
+
+    expect(result.xAxis.dateParseFormat).toBe('%Y/%m/%d')
+    expect(result.tooltips.dateDisplayFormat).toBe('%B %-d, %Y')
+    expect(result.table.dateDisplayFormat).toBe('%b %-d %Y')
+  })
+
+  it('leaves the config unchanged when the sample is ambiguous', () => {
+    const result: any = applyAutoDetectedDateParseFormat(baseChartConfig, ambiguousUsOrEuDateRows)
+
+    expect(result).toEqual(baseChartConfig)
+  })
+
+  it('leaves the config unchanged when xAxis.dateParseFormat is already configured', () => {
+    const preconfiguredChartConfig: any = {
+      ...baseChartConfig,
+      xAxis: {
+        ...baseChartConfig.xAxis,
+        dateParseFormat: '%d/%m/%Y'
+      }
+    }
+
+    const result: any = applyAutoDetectedDateParseFormat(preconfiguredChartConfig, reliableSlashDateRows)
+
+    expect(result).toEqual(preconfiguredChartConfig)
+  })
+  it('does nothing for non-date chart axes', () => {
+    const result: any = applyAutoDetectedDateParseFormat(
+      {
+        ...baseChartConfig,
+        xAxis: {
+          ...baseChartConfig.xAxis,
+          type: 'categorical'
+        }
+      },
+      [{ date: '2024/03/15', value: 10 }]
+    )
+
+    expect(result).toEqual({
+      ...baseChartConfig,
+      xAxis: {
+        ...baseChartConfig.xAxis,
+        type: 'categorical'
+      }
+    })
+  })
+
+  it('does nothing for non-chart visualizations', () => {
+    const result: any = applyAutoDetectedDateParseFormat(
+      {
+        ...baseChartConfig,
+        type: 'map'
+      },
+      [{ date: '2024/03/15', value: 10 }]
+    )
+
+    expect(result).toEqual({
+      ...baseChartConfig,
+      type: 'map'
+    })
+  })
+
+  it('does nothing when the configured x-axis column is missing', () => {
+    const result: any = applyAutoDetectedDateParseFormat(baseChartConfig, missingXAxisDateRows)
+
+    expect(result).toEqual(baseChartConfig)
+  })
+
+  it('still detects the date parse format when the first row is missing the x-axis key', () => {
+    const result: any = applyAutoDetectedDateParseFormat(baseChartConfig, sparseFirstRowReliableDateRows)
+
+    expect(result.xAxis.dateParseFormat).toBe('%Y/%m/%d')
+  })
+})