@cdc/editor 4.26.4 → 4.26.5

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@cdc/editor",
-  "version": "4.26.4",
+  "version": "4.26.5",
   "description": "React component for generating a new component entry",
   "license": "Apache-2.0",
   "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/chart": "^4.26.4",
-    "@cdc/core": "^4.26.4",
-    "@cdc/dashboard": "^4.26.4",
-    "@cdc/data-bite": "^4.26.4",
-    "@cdc/map": "^4.26.4",
-    "@cdc/markup-include": "^4.26.4",
-    "@cdc/waffle-chart": "^4.26.4",
+    "@cdc/chart": "^4.26.5",
+    "@cdc/core": "^4.26.5",
+    "@cdc/dashboard": "^4.26.5",
+    "@cdc/data-bite": "^4.26.5",
+    "@cdc/map": "^4.26.5",
+    "@cdc/markup-include": "^4.26.5",
+    "@cdc/waffle-chart": "^4.26.5",
     "axios": "^1.13.2",
     "d3": "^7.9.0",
     "react-dropzone": "^14.3.8",
@@ -23,7 +23,7 @@
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "6097de1ff814001880d9ac64bd66becdc092d63c",
+  "gitHead": "61c025165d96b45a6002c34582c5a622a9d865a9",
   "main": "dist/cdceditor",
   "moduleName": "CdcEditor",
   "peerDependencies": {

package/src/_stories/Editor.stories.tsx

@@ -165,6 +165,68 @@ export const DownloadSingleVizCSV: Story = {
   }
 }
 
+export const LoadFromApiUrlPreview: Story = {
+  args: { config: {} },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+
+    // Intercept fetch and return JSON with a charset in the Content-Type header.
+    // This exercises the MIME type normalisation fix: fetch preserves the full
+    // Content-Type value (e.g. 'application/json; charset=utf-8') while the old
+    // axios code would strip parameters, so the blob re-typing comparison
+    // must use the base type before the semicolon.
+    const mockData = [
+      { state: 'Alabama', value: '42' },
+      { state: 'Alaska', value: '37' },
+      { state: 'Arizona', value: '55' }
+    ]
+    const mockBlob = new Blob([JSON.stringify(mockData)], { type: 'application/json; charset=utf-8' })
+    const originalFetch = window.fetch
+    window.fetch = () => Promise.resolve({ ok: true, blob: () => Promise.resolve(mockBlob) } as Response)
+
+    try {
+      // Select Dashboard so the dataset name becomes meaningful and the
+      // multi-dataset import flow is exercised
+      await user.click(await canvas.findByRole('button', { name: 'Dashboard' }))
+
+      await user.click(canvas.getByText('2. Import Data'))
+
+      // Switch to the URL tab
+      await user.click(await canvas.findByText('Load from URL'))
+
+      // Both fields are required before the button is enabled
+      const nameInput = await canvas.findByLabelText('Enter Dataset Name')
+      await user.type(nameInput, 'api-data')
+
+      const urlInput = await canvas.findByLabelText('Load data from external URL')
+      await user.type(urlInput, 'https://example.gov/api/data.json')
+
+      await user.click(await canvas.findByRole('button', { name: 'Save & Load' }))
+
+      // After a successful dashboard dataset load the Data Sources table appears
+      // and the preview panel should auto-populate (dataset is created with preview: true)
+      await expect(canvas.findByText('Data Sources')).resolves.toBeTruthy()
+      await expect(canvas.findByText('Data Preview')).resolves.toBeTruthy()
+      await expect(canvas.findByText('state')).resolves.toBeTruthy()
+      await expect(canvas.findByText('Alabama')).resolves.toBeTruthy()
+
+      // Navigate away to tab 3 then back to tab 2 — the dataset must survive the round-trip
+      await new Promise(r => setTimeout(r, 1500))
+      await user.click(canvas.getByText('3. Configure'))
+      await new Promise(r => setTimeout(r, 500))
+      await user.click(canvas.getByText('2. Import Data'))
+      await new Promise(r => setTimeout(r, 500))
+
+      await expect(canvas.findByText('Data Sources')).resolves.toBeTruthy()
+      await expect(canvas.findByText('Data Preview')).resolves.toBeTruthy()
+      await expect(canvas.findByText('Alabama')).resolves.toBeTruthy()
+    } finally {
+      window.fetch = originalFetch
+    }
+  }
+}
+
 export const InvalidJsonShowsValidationAlert: Story = {
   args: {
     config: {}

package/src/assets.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const content: string
+  export default content
+}

package/src/components/ChooseTab.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 
 import ConfigContext, { EditorDispatchContext } from '@cdc/core/contexts/EditorContext'
 import ChooseTab from './ChooseTab'
@@ -33,4 +33,67 @@ describe('ChooseTab', () => {
       expect(dispatch).toHaveBeenCalledWith({ type: 'EDITOR_SAVE', payload: tempConfig })
     })
   })
+
+  it('creates a HeatMap starter config when the HeatMap button is selected', () => {
+    const dispatch = vi.fn()
+
+    render(
+      <ConfigContext.Provider
+        value={
+          {
+            config: { type: 'chart' },
+            tempConfig: null,
+            errors: [],
+            currentViewport: 'lg',
+            globalActive: 0,
+            setTempConfig: vi.fn()
+          } as any
+        }
+      >
+        <EditorDispatchContext.Provider value={dispatch}>
+          <ChooseTab />
+        </EditorDispatchContext.Provider>
+      </ConfigContext.Provider>
+    )
+
+    expect(
+      screen.getByRole('button', { name: 'HeatMap' }).querySelector('.choose-vis__heatmap-icon')
+    ).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'HeatMap' }))
+
+    expect(dispatch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'EDITOR_SET_CONFIG',
+        payload: expect.objectContaining({
+          visualizationType: 'HeatMap',
+          type: 'chart',
+          title: 'Synthetic Varicella Cases by HHS Region',
+          xAxis: expect.objectContaining({
+            dataKey: 'Month',
+            label: 'Month'
+          }),
+          yAxis: expect.objectContaining({
+            label: 'HHS Region',
+            titlePlacement: 'side'
+          }),
+          series: expect.arrayContaining([
+            expect.objectContaining({
+              dataKey: 'HHS Region 1',
+              name: 'Region 1',
+              type: 'HeatMap'
+            })
+          ]),
+          heatmap: expect.objectContaining({
+            cellPadding: 2
+          }),
+          legend: expect.objectContaining({
+            position: 'top',
+            style: 'gradient',
+            label: 'Reported cases'
+          })
+        })
+      })
+    )
+  })
 })

package/src/components/ChooseTab.tsx

@@ -18,6 +18,7 @@ import EpiChartIcon from '@cdc/core/assets/icon-epi-chart.svg'
 import ForecastIcon from '@cdc/core/assets/icon-chart-forecast.svg'
 import GaugeChartIcon from '@cdc/core/assets/icon-linear-gauge.svg'
 import GlobeIcon from '@cdc/core/assets/icon-map-world.svg'
+import HeatMapIconSrc from '@cdc/core/assets/icon-heatmap.png'
 import HorizonChartIcon from '@cdc/core/assets/icon-chart-area.svg'
 import HorizontalStackIcon from '@cdc/core/assets/icon-chart-bar-stacked.svg'
 import Icon from '@cdc/core/components/ui/Icon'
@@ -69,6 +70,11 @@ const VizButton: React.FC<VizButtonProps> = ({ activeVizButtonID, onConfigure, .
   )
 }
 
+const HeatMapIcon = () => <img className='choose-vis__heatmap-icon' src={HeatMapIconSrc} alt='' aria-hidden='true' />
+
+const heatMapRegionColumns = Array.from({ length: 10 }, (_, index) => `HHS Region ${index + 1}`)
+const heatMapSampleColumns = ['Month', ...heatMapRegionColumns]
+
 const ChooseTab: React.FC = (): JSX.Element => {
   const { config, tempConfig } = useContext(ConfigContext)
 
@@ -441,6 +447,76 @@ const buttons = [
     icon: <ForecastIcon />,
     content: 'Display a forecasting chart to predict future data trends.'
   },
+  {
+    id: 28,
+    category: 'Charts',
+    label: 'HeatMap',
+    type: 'chart',
+    subType: 'HeatMap',
+    title: 'Synthetic Varicella Cases by HHS Region',
+    showTitle: true,
+    description: 'Example data are synthetic and for demonstration only.',
+    orientation: 'vertical',
+    xAxis: {
+      type: 'categorical',
+      dataKey: 'Month',
+      label: 'Month',
+      size: 75,
+      maxTickRotation: 0,
+      tickRotation: 0,
+      labelOffset: 0
+    },
+    yAxis: {
+      type: 'categorical',
+      label: 'HHS Region',
+      size: 120,
+      titlePlacement: 'side'
+    },
+    heatmap: {
+      cellPadding: 2,
+      rowLabelGap: 32,
+      columnLabelGap: 48,
+      xAxisPosition: 'top',
+      showCellValues: false
+    },
+    series: heatMapRegionColumns.map((region, index) => ({
+      dataKey: region,
+      name: `Region ${index + 1}`,
+      type: 'HeatMap',
+      axis: 'Left',
+      tooltip: true
+    })),
+    columns: heatMapSampleColumns.reduce(
+      (columns, columnName) => ({
+        ...columns,
+        [columnName]: {
+          name: columnName,
+          label: columnName.replace('HHS ', ''),
+          dataTable: true
+        }
+      }),
+      {}
+    ),
+    dataFormat: {
+      commas: true,
+      roundTo: 0
+    },
+    general: {
+      palette: {
+        isReversed: false,
+        version: '2.0',
+        name: 'sequential_blue'
+      }
+    },
+    legend: {
+      position: 'top',
+      style: 'gradient',
+      subStyle: 'smooth',
+      label: 'Reported cases'
+    },
+    icon: <HeatMapIcon />,
+    content: 'Display a heatmap to compare intensity across two dimensions.'
+  },
   {
     id: 27,
     category: 'Charts',
@@ -493,7 +569,7 @@ const buttons = [
     content: 'Present the numerical proportions of a data series.'
   },
   {
-    id: 27,
+    id: 29,
     category: 'Charts',
     label: 'Radar',
     type: 'chart',

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

@@ -1,6 +1,5 @@
 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'
@@ -102,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)

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/scss/choose-vis-tab.scss

@@ -84,7 +84,8 @@
         }
       }
 
-      svg {
+      svg,
+      .choose-vis__heatmap-icon {
         display: block;
         margin: 0 auto;
         box-sizing: border-box;
@@ -92,6 +93,11 @@
         height: 80px;
         flex-shrink: 0;
       }
+
+      .choose-vis__heatmap-icon {
+        object-fit: contain;
+        mix-blend-mode: multiply;
+      }
     }
   }
 }

package/src/scss/main.scss

@@ -31,7 +31,6 @@
         background: #f2f2f2;
         line-height: 3rem;
         border-bottom: 1px solid var(--lightGray);
-        color: #333;
         flex-grow: 1;
         flex-shrink: 0;
         width: 25%;
@@ -225,10 +224,6 @@
   }
 }
 
-section.introText {
-  padding: 15px 0;
-}
-
 section.footnotes {
   border-top: 1px solid #ddd;
   margin-top: 70px;