@cdc/editor 4.26.2 → 4.26.3

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@cdc/editor",
-  "version": "4.26.2",
+  "version": "4.26.3",
   "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.2",
-    "@cdc/core": "^4.26.2",
-    "@cdc/dashboard": "^4.26.2",
-    "@cdc/data-bite": "^4.26.2",
-    "@cdc/map": "^4.26.2",
-    "@cdc/markup-include": "^4.26.2",
-    "@cdc/waffle-chart": "^4.26.2",
+    "@cdc/chart": "^4.26.3",
+    "@cdc/core": "^4.26.3",
+    "@cdc/dashboard": "^4.26.3",
+    "@cdc/data-bite": "^4.26.3",
+    "@cdc/map": "^4.26.3",
+    "@cdc/markup-include": "^4.26.3",
+    "@cdc/waffle-chart": "^4.26.3",
     "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": "be3413e8e1149abf94225108f86a7910f56e0616",
+  "gitHead": "d50e45a074fbefa56cac904917e707d57f237737",
   "main": "dist/cdceditor",
   "moduleName": "CdcEditor",
   "peerDependencies": {

package/src/CdcEditor.tsx

@@ -19,7 +19,6 @@ import { legacyConfigSupport } from './helpers/legacyConfigSupport'
 
 import './scss/main.scss'
 import editorReducer, { EditorState } from '@cdc/core/contexts/editor.reducer'
-import _ from 'lodash'
 import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
 import { WCMSProps } from '@cdc/core/types/WCMSProps'
 import { devToolsStore } from '@cdc/core/helpers/withDevTools'
@@ -73,7 +72,7 @@ const CdcEditor: React.FC<WCMSProps> = ({ config: configObj, hostname, container
   }, [])
 
   useEffect(() => {
-    let strippedConfig = stripConfig(state.config)
+    let strippedConfig = stripConfig(state.config, true)
 
     const parsedData = JSON.stringify(strippedConfig)
     // Emit the data in a regular JS event so it can be consumed by anything.
@@ -99,7 +98,7 @@ const CdcEditor: React.FC<WCMSProps> = ({ config: configObj, hostname, container
     <GlobalContextProvider>
       <ConfigContext.Provider value={{ ...state, setTempConfig: setTempConfigAndUpdate }}>
         <EditorDispatchContext.Provider value={dispatch}>
-          <div className={`cdc-open-viz-module cdc-editor ${state.currentViewport}`} ref={outerContainerRef}>
+          <div className={`cove-visualization cdc-editor ${state.currentViewport}`} ref={outerContainerRef}>
             <Tabs className='top-level'>
               <TabPane title='1. Choose Visualization Type' className='choose-type'>
                 <ChooseTab />

package/src/_stories/Editor.stories.tsx

@@ -1,9 +1,29 @@
 import { Meta, StoryObj } from '@storybook/react-vite'
 import CdcEditor from '../CdcEditor'
-import { within, userEvent } from 'storybook/test'
+import { within, userEvent, expect } from 'storybook/test'
+import ChartEditorConfig from '../../../chart/src/_stories/_mock/editor-tests/bar-chart-editor-test.json'
+import MapConfig from '../../../map/src/_stories/_mock/default-patterns.json'
+import DashboardConfig from '../../../dashboard/src/_stories/_mock/dashboard_no_filter.json'
+import DataTableConfig from '../../../data-table/examples/data-table-example.json'
 
-const sleep = ms => {
-  return new Promise(r => setTimeout(r, ms))
+const loadConfigFromTextArea = async (canvasElement, config) => {
+  const user = userEvent.setup()
+  const textArea = canvasElement.querySelector('#pasteConfig') as HTMLTextAreaElement
+  const loadButton = canvasElement.querySelector('#load-data') as HTMLButtonElement
+
+  expect(textArea).toBeTruthy()
+  expect(loadButton).toBeTruthy()
+
+  await user.click(textArea)
+  await user.clear(textArea)
+  await user.paste(JSON.stringify(config))
+  await user.click(loadButton)
+}
+
+const assertImportDataTabAccessible = async canvas => {
+  const user = userEvent.setup()
+  await user.click(canvas.getByText('2. Import Data'))
+  await expect(canvas.findByText('Data Preview')).resolves.toBeTruthy()
 }
 
 const meta: Meta<typeof CdcEditor> = {
@@ -26,10 +46,95 @@ export const PreviewTableTests: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
     const user = userEvent.setup()
-    await sleep(1000)
-    const mapButton = canvas.getByText('United States (State- or County-Level)')
+
+    const mapButton = await canvas.findByRole('button', { name: 'United States (State- or County-Level)' })
     await user.click(mapButton)
-    const sampleData = canvas.getByText('United States: County Sample Data')
+
+    await user.click(canvas.getByText('2. Import Data'))
+
+    const sampleData = await canvas.findByText('United States: County Sample Data')
     await user.click(sampleData)
+
+    await expect(canvas.findByText('Data Preview')).resolves.toBeTruthy()
+  }
+}
+
+export const LoadChartJsonConfig: Story = {
+  args: {
+    config: {}
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await loadConfigFromTextArea(canvasElement, ChartEditorConfig)
+    await assertImportDataTabAccessible(canvas)
+  }
+}
+
+export const LoadMapJsonConfig: Story = {
+  args: {
+    config: {}
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await loadConfigFromTextArea(canvasElement, MapConfig)
+    await assertImportDataTabAccessible(canvas)
+  }
+}
+
+export const LoadDashboardJsonConfig: Story = {
+  args: {
+    config: {}
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await loadConfigFromTextArea(canvasElement, DashboardConfig)
+    await assertImportDataTabAccessible(canvas)
+  }
+}
+
+export const LoadDataTableJsonConfig: Story = {
+  args: {
+    config: {}
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await loadConfigFromTextArea(canvasElement, DataTableConfig)
+    await assertImportDataTabAccessible(canvas)
+  }
+}
+
+export const InvalidJsonShowsValidationAlert: Story = {
+  args: {
+    config: {}
+  },
+  play: async ({ canvasElement }) => {
+    const user = userEvent.setup()
+    const textArea = canvasElement.querySelector('#pasteConfig') as HTMLTextAreaElement
+    const loadButton = canvasElement.querySelector('#load-data') as HTMLButtonElement
+
+    expect(textArea).toBeTruthy()
+    expect(loadButton).toBeTruthy()
+
+    const originalAlert = window.alert
+    const originalOnError = window.onerror
+    let alertText = ''
+
+    window.alert = message => {
+      alertText = String(message)
+    }
+
+    window.onerror = () => true
+
+    try {
+      await user.click(textArea)
+      await user.clear(textArea)
+      await user.paste('{"broken": true, }')
+      await user.click(loadButton)
+
+      await expect(alertText).toBe('The JSON that was entered is invalid.')
+    } finally {
+      window.alert = originalAlert
+      window.onerror = originalOnError
+    }
   }
 }

package/src/components/ChooseTab.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { render, waitFor } from '@testing-library/react'
+
+import ConfigContext, { EditorDispatchContext } from '@cdc/core/contexts/EditorContext'
+import ChooseTab from './ChooseTab'
+
+describe('ChooseTab', () => {
+  it('dispatches EDITOR_SAVE once when tempConfig is present', async () => {
+    const dispatch = vi.fn()
+    const tempConfig = { type: 'chart', data: [{ x: 'A', y: 1 }] }
+
+    render(
+      <ConfigContext.Provider
+        value={
+          {
+            config: { type: 'chart' },
+            tempConfig,
+            errors: [],
+            currentViewport: 'lg',
+            globalActive: 0,
+            setTempConfig: vi.fn()
+          } as any
+        }
+      >
+        <EditorDispatchContext.Provider value={dispatch}>
+          <ChooseTab />
+        </EditorDispatchContext.Provider>
+      </ConfigContext.Provider>
+    )
+
+    await waitFor(() => {
+      expect(dispatch).toHaveBeenCalledTimes(1)
+      expect(dispatch).toHaveBeenCalledWith({ type: 'EDITOR_SAVE', payload: tempConfig })
+    })
+  })
+})

package/src/components/ChooseTab.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import '../scss/choose-vis-tab.scss'
 
 import ConfigContext, { EditorDispatchContext } from '@cdc/core/contexts/EditorContext'
@@ -51,6 +51,23 @@ interface ButtonProps {
   orientation?: string | null
 }
 
+interface VizButtonProps extends ButtonProps {
+  activeVizButtonID?: number
+  onConfigure: (props: Record<string, unknown>) => void
+}
+
+const VizButton: React.FC<VizButtonProps> = ({ activeVizButtonID, onConfigure, ...buttonProps }) => {
+  const { label, icon, id } = buttonProps
+  const isActive = id === activeVizButtonID || 0
+
+  return (
+    <button className={isActive ? 'active' : ''} onClick={() => onConfigure(buttonProps)} aria-label={label}>
+      {icon}
+      <span className='mt-1'>{label}</span>
+    </button>
+  )
+}
+
 const ChooseTab: React.FC = (): JSX.Element => {
   const { config, tempConfig } = useContext(ConfigContext)
 
@@ -59,6 +76,12 @@ const ChooseTab: React.FC = (): JSX.Element => {
   const dispatch = useContext(EditorDispatchContext)
   const rowLabels = ['General', , 'Charts', 'Maps']
 
+  useEffect(() => {
+    if (tempConfig) {
+      dispatch({ type: 'EDITOR_SAVE', payload: tempConfig })
+    }
+  }, [dispatch, tempConfig])
+
   const handleUpload = e => {
     const file = e.target.files[0]
     const reader = new FileReader()
@@ -75,12 +98,15 @@ const ChooseTab: React.FC = (): JSX.Element => {
       newConfig = JSON.parse(text)
     } catch (e) {
       alert('The JSON that was entered is invalid.')
-      throw new Error()
+      return
     }
 
     const isVega = isVegaConfig(newConfig)
     if (isVega) {
       newConfig = importVegaConfig(newConfig)
+      if (!newConfig) {
+        return
+      }
     }
 
     dispatch({ type: 'EDITOR_SET_CONFIG', payload: newConfig })
@@ -112,7 +138,7 @@ const ChooseTab: React.FC = (): JSX.Element => {
 
     const errorText = vegaErrors.join('\n\n')
     alert(errorText)
-    throw new Error(errorText)
+    return null
   }
 
   const generateNewConfig = props => {
@@ -174,25 +200,6 @@ const ChooseTab: React.FC = (): JSX.Element => {
     dispatch({ type: 'EDITOR_SET_GLOBALACTIVE', payload: 1 })
   }
 
-  const VizButton: React.FC<ButtonProps> = props => {
-    const { label, icon, id } = props
-    const isActive = id === config?.activeVizButtonID || 0
-    const handleClick = () => {
-      configureTabs(props)
-    }
-
-    if (tempConfig) {
-      dispatch({ type: 'EDITOR_SAVE', payload: tempConfig })
-    }
-
-    return (
-      <button className={isActive ? 'active' : ''} onClick={handleClick} aria-label={label}>
-        {icon}
-        <span className='mt-1'>{label}</span>
-      </button>
-    )
-  }
-
   return (
     <div className='choose-vis'>
       <a
@@ -221,7 +228,11 @@ const ChooseTab: React.FC = (): JSX.Element => {
                   <li key={`${label}-button-${buttonIndex}`}>
                     <Tooltip position='right'>
                       <Tooltip.Target>
-                        <VizButton {...button} />
+                        <VizButton
+                          {...button}
+                          activeVizButtonID={config?.activeVizButtonID}
+                          onConfigure={configureTabs}
+                        />
                       </Tooltip.Target>
                       <Tooltip.Content>{button.content}</Tooltip.Content>
                     </Tooltip>

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

@@ -24,7 +24,7 @@ import { type Visualization } from '@cdc/core/types/Visualization'
 import { type DataSet } from '@cdc/core/types/DataSet'
 
 import './data-import.scss'
-import '@cdc/core/styles/v2/components/data-designer.scss'
+import '@cdc/core/components/managers/data-designer.scss'
 
 import { errorMessages, maxFileSize } from '../../../helpers/errorMessages'
 import { displaySize } from '../helpers/displaySize'
@@ -39,6 +39,7 @@ import {
   parseVegaConfig,
   updateVegaData
 } from '@cdc/core/helpers/vegaConfig'
+import { extractDataAndMetadata } from '@cdc/core/helpers/extractDataAndMetadata'
 
 const DataImport = () => {
   const { config, errors, tempConfig, sharepath } = useContext(ConfigContext)
@@ -179,12 +180,13 @@ const DataImport = () => {
     const filereader = new FileReader()
 
     filereader.onload = function () {
-      const handleSetConfig = (newData: Object[], useTempConfig = false) => {
+      const handleSetConfig = (newData: Object[], useTempConfig = false, dataMetadata = {}) => {
         const setDataURL = keepURL && fileSourceType === 'url'
         if (config.type === 'dashboard') {
           const dataFileFormat = mimeType.split('/')[1].toUpperCase()
           const dataset = {
             data: newData,
+            dataMetadata,
             dataFileSize: fileSize,
             dataFileName: fileSource, // new file source
             dataFileSourceType: fileSourceType, // new file source type
@@ -210,6 +212,7 @@ const DataImport = () => {
             ...config,
             ...tempConfig,
             data: newData,
+            dataMetadata,
             dataFileName: fileSource, // new file source
             dataFileSourceType: fileSourceType, // new file source type
             formattedData: transform.developerStandardize(newData, config.dataDescription)
@@ -227,14 +230,16 @@ const DataImport = () => {
         if (config.vegaConfig) {
           return updateDataFromVegaData(result, fileSource, fileSourceType)
         }
-        const text = transform.autoStandardize(result)
+        const { data: extractedData, dataMetadata } = extractDataAndMetadata(result)
+        const text = transform.autoStandardize(extractedData)
         if (config.data && config.series) {
           if (dataExists(text, config.series, config?.xAxis.dataKey)) {
-            handleSetConfig(text, true)
+            handleSetConfig(text, true, dataMetadata)
           } else {
             resetEditor(
               {
                 data: text,
+                dataMetadata,
                 dataFileName: fileSource,
                 dataFileSourceType: fileSourceType
               } as Visualization,
@@ -242,7 +247,7 @@ const DataImport = () => {
             )
           }
         } else {
-          handleSetConfig(text)
+          handleSetConfig(text, false, dataMetadata)
         }
 
         if (editingDataset) {

package/src/components/PreviewDataTable.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useMemo, useCallback, useEffect, memo } from 'react'
+import React, { useState, useContext, useMemo, useCallback, useEffect, useRef, memo } from 'react'
 import {
   useTable,
   useBlockLayout,
@@ -20,16 +20,19 @@ import { errorMessages } from '../helpers/errorMessages'
 import { DataSet } from '@cdc/core/types/DataSet'
 import Icon from '@cdc/core/components/ui/Icon'
 
-const TableFilter = memo(({ globalFilter, setGlobalFilter, disabled = false }: any) => {
-  const [filterValue, setFilterValue] = useState(globalFilter)
+const TableFilter = memo(({ globalFilter, setGlobalFilter = () => {}, disabled = false }: any) => {
+  const [filterValue, setFilterValue] = useState(globalFilter ?? '')
 
   const [debouncedValue] = useDebounce(filterValue, 200)
 
   useEffect(() => {
-    if ('string' === typeof debouncedValue && debouncedValue !== globalFilter) {
-      setGlobalFilter(debouncedValue ?? '')
+    if ('string' === typeof debouncedValue && typeof setGlobalFilter === 'function') {
+      const nextFilter = debouncedValue.trim() ? debouncedValue : undefined
+      if (nextFilter !== globalFilter) {
+        setGlobalFilter(nextFilter)
+      }
     }
-  }, [debouncedValue])
+  }, [debouncedValue, globalFilter, setGlobalFilter])
 
   const onChange = e => {
     setFilterValue(e.target.value)
@@ -86,30 +89,40 @@ const Footer = memo(({ previousPage, nextPage, canPreviousPage, canNextPage, pag
 ))
 
 const PreviewDataTable = () => {
-  const { config } = useContext(ConfigContext)
+  const { config, errors } = useContext(ConfigContext)
   const previewData = useMemo(() => {
     if (config.type === 'dashboard') {
-      return Object.values(config.datasets).find((dataset: DataSet) => {
+      const previewDataset = Object.values(config.datasets).find((dataset: DataSet) => {
         return dataset.preview && Array.isArray(dataset.data)
       })
+      return previewDataset?.data
     }
     return config.data
   }, [config.type, config.data, config.datasets])
-  const [tableData, _setTableData] = useState(previewData)
+  const [tableData, _setTableData] = useState(Array.isArray(previewData) ? previewData : null)
+  const lastDataSourceRef = useRef<any[]>(null)
   const runSideEffects = (td: any[]) => {
+    if (!Array.isArray(td) || td.length === 0) return td
+
     const isSankey = Object.keys(td[0]).includes('tableData')
-    const newData = generateColumns(isSankey ? td[0].tableData : td)
-    validateFipsCodeLength(newData)
-    return newData
+    const normalizedData = isSankey ? td[0].tableData : td
+    validateFipsCodeLength(normalizedData)
+    return normalizedData
+  }
+  const setTableData = td => {
+    if (!Array.isArray(td) || td.length === 0) return
+    if (lastDataSourceRef.current === td) return
+
+    lastDataSourceRef.current = td
+    _setTableData(runSideEffects(td))
   }
-  const setTableData = td => _setTableData(runSideEffects(td))
 
   const dispatch = useContext(EditorDispatchContext)
 
   const fetchDatasetData = async (datasetKey, datasetConfig) => {
     if (datasetConfig.preview) {
       if (datasetConfig.dataUrl) {
-        const remoteData = await fetchRemoteData(datasetConfig.dataUrl)
+        const { data: remoteData } = await fetchRemoteData(datasetConfig.dataUrl)
         if (Array.isArray(remoteData)) {
           setTableData(remoteData)
         }
@@ -132,7 +145,7 @@ const PreviewDataTable = () => {
           await handleDashboardData(config.datasets)
         } else {
           if (config.dataUrl) {
-            const remoteData = await fetchRemoteData(config.dataUrl)
+            const { data: remoteData } = await fetchRemoteData(config.dataUrl)
             if (Array.isArray(remoteData)) {
               setTableData(remoteData)
             }
@@ -144,16 +157,11 @@ const PreviewDataTable = () => {
     }
 
     loadData()
-  }, [config, config.data, previewData]) // eslint-disable-line
+  }, [config.data, config.dataUrl, config.datasets, config.type, previewData]) // eslint-disable-line
 
   const tableColumns = useMemo(() => {
-    if (!tableData) return []
-    const columns = tableData.columns ?? []
-    if (columns.length > 0 && columns.includes('')) {
-      // todo find a way to call the errors. Currently they are in DataImport.js
-      // maybe these can be moved to a file? but then we need a way to add settings like size...
-      dispatch({ type: 'EDITOR_SET_ERRORS', payload: [errorMessages.emptyCols] })
-    }
+    if (!Array.isArray(tableData)) return []
+    const columns = Object.keys(tableData[0] ?? {})
 
     return columns.map(columnName => {
       const columnConfig = {
@@ -166,27 +174,13 @@ const PreviewDataTable = () => {
     })
   }, [tableData])
 
-  // This adds a columns property just like the D3 function for JSON parsing.
-  const generateColumns = data => {
-    let columns = []
-
-    data.forEach(rowObj => {
-      Object.keys(rowObj).forEach(columnHeading => {
-        if (false === columns.includes(columnHeading)) {
-          columns.push(columnHeading)
-        }
-      })
-    })
-
-    // D3 uses a weird quirk where it attaches a named property to an array. Replicating here.
-    type D3Data = any[] & { columns }
-    const newData: D3Data = [...data] as D3Data
-
-    if (Array.isArray(newData)) {
-      newData.columns = columns
-      return newData
+  useEffect(() => {
+    if (!tableData) return
+    const columns = Object.keys(tableData[0] ?? {})
+    if (columns.length > 0 && columns.includes('') && !errors?.includes(errorMessages.emptyCols)) {
+      dispatch({ type: 'EDITOR_SET_ERRORS', payload: [errorMessages.emptyCols] })
     }
-  }
+  }, [dispatch, errors, tableData])
 
   const {
     getTableProps,
@@ -245,7 +239,8 @@ const PreviewDataTable = () => {
     )
   }
 
-  if (!tableData) return [<Header key='header' />, <PlaceholderTable key='table' />]
+  if (!Array.isArray(tableData) || tableData.length === 0)
+    return [<Header key='header' />, <PlaceholderTable key='table' />]
 
   const footerProps = {
     previousPage,

package/src/scss/main.scss

@@ -1,6 +1,6 @@
 @import 'variables';
 
-.cdc-open-viz-module.cdc-editor {
+.cove-visualization.cdc-editor {
   min-height: inherit;
   display: flex;
   flex-direction: column;