@cdc/editor 4.26.2 → 4.26.4

package/src/components/PreviewDataTable.test.tsx

@@ -0,0 +1,184 @@
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import ConfigContext, { EditorDispatchContext } from '@cdc/core/contexts/EditorContext'
+import PreviewDataTable from './PreviewDataTable'
+
+describe('PreviewDataTable', () => {
+  const renderPreview = config => {
+    const dispatch = vi.fn()
+
+    return render(
+      <ConfigContext.Provider
+        value={
+          {
+            config,
+            errors: [],
+            currentViewport: 'lg',
+            globalActive: 1,
+            setTempConfig: vi.fn()
+          } as any
+        }
+      >
+        <EditorDispatchContext.Provider value={dispatch}>
+          <PreviewDataTable />
+        </EditorDispatchContext.Provider>
+      </ConfigContext.Provider>
+    )
+  }
+
+  it('updates the rendered preview rows when the dashboard preview source changes', async () => {
+    const initialConfig = {
+      type: 'dashboard',
+      datasets: {
+        source_a: {
+          data: [{ label: 'Old Source Row', value: 'A' }],
+          preview: true
+        },
+        source_b: {
+          data: [{ label: 'Secondary Row', value: 'B' }],
+          preview: false
+        }
+      }
+    }
+
+    const nextConfig = {
+      ...initialConfig,
+      datasets: {
+        source_b: {
+          data: [{ label: 'New Source Row', value: 'B2' }],
+          preview: true
+        },
+        source_a: {
+          data: [{ label: 'Old Source Row', value: 'A' }],
+          preview: false
+        }
+      }
+    }
+
+    const view = renderPreview(initialConfig)
+
+    expect(await screen.findByText('Old Source Row')).toBeInTheDocument()
+    expect(screen.queryByText('New Source Row')).not.toBeInTheDocument()
+
+    view.rerender(
+      <ConfigContext.Provider
+        value={
+          {
+            config: nextConfig,
+            errors: [],
+            currentViewport: 'lg',
+            globalActive: 1,
+            setTempConfig: vi.fn()
+          } as any
+        }
+      >
+        <EditorDispatchContext.Provider value={vi.fn()}>
+          <PreviewDataTable />
+        </EditorDispatchContext.Provider>
+      </ConfigContext.Provider>
+    )
+
+    await waitFor(() => {
+      expect(screen.getByText('New Source Row')).toBeInTheDocument()
+    })
+    expect(screen.queryByText('Old Source Row')).not.toBeInTheDocument()
+  })
+
+  it('shows another loaded dataset after the active preview dataset is removed', async () => {
+    const initialConfig = {
+      type: 'dashboard',
+      datasets: {
+        source_a: {
+          data: [{ label: 'Removed Source Row', value: 'A' }],
+          preview: true
+        },
+        source_b: {
+          data: [{ label: 'Fallback Source Row', value: 'B' }],
+          preview: false
+        }
+      }
+    }
+
+    const nextConfig = {
+      type: 'dashboard',
+      datasets: {
+        source_b: {
+          data: [{ label: 'Fallback Source Row', value: 'B' }],
+          preview: true
+        }
+      }
+    }
+
+    const view = renderPreview(initialConfig)
+
+    expect(await screen.findByText('Removed Source Row')).toBeInTheDocument()
+
+    view.rerender(
+      <ConfigContext.Provider
+        value={
+          {
+            config: nextConfig,
+            errors: [],
+            currentViewport: 'lg',
+            globalActive: 1,
+            setTempConfig: vi.fn()
+          } as any
+        }
+      >
+        <EditorDispatchContext.Provider value={vi.fn()}>
+          <PreviewDataTable />
+        </EditorDispatchContext.Provider>
+      </ConfigContext.Provider>
+    )
+
+    await waitFor(() => {
+      expect(screen.getByText('Fallback Source Row')).toBeInTheDocument()
+    })
+    expect(screen.queryByText('Removed Source Row')).not.toBeInTheDocument()
+  })
+
+  it('returns to the initial empty preview when the final dataset is removed', async () => {
+    const initialConfig = {
+      type: 'dashboard',
+      datasets: {
+        source_a: {
+          data: [{ label: 'Last Source Row', value: 'A' }],
+          preview: true
+        }
+      }
+    }
+
+    const nextConfig = {
+      type: 'dashboard',
+      datasets: {}
+    }
+
+    const view = renderPreview(initialConfig)
+
+    expect(await screen.findByText('Last Source Row')).toBeInTheDocument()
+
+    view.rerender(
+      <ConfigContext.Provider
+        value={
+          {
+            config: nextConfig,
+            errors: [],
+            currentViewport: 'lg',
+            globalActive: 1,
+            setTempConfig: vi.fn()
+          } as any
+        }
+      >
+        <EditorDispatchContext.Provider value={vi.fn()}>
+          <PreviewDataTable />
+        </EditorDispatchContext.Provider>
+      </ConfigContext.Provider>
+    )
+
+    await waitFor(() => {
+      expect(screen.getByText('No Data')).toBeInTheDocument()
+    })
+    expect(screen.getByText('Import data to preview')).toBeInTheDocument()
+    expect(screen.queryByText('Last Source Row')).not.toBeInTheDocument()
+  })
+})

package/src/components/PreviewDataTable.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useMemo, useCallback, useEffect, memo } from 'react'
+import React, { useState, useContext, useMemo, useEffect, useRef, memo } from 'react'
 import {
   useTable,
   useBlockLayout,
@@ -18,18 +18,21 @@ import { GrFormPrevious } from 'react-icons/gr'
 import validateFipsCodeLength from '@cdc/core/helpers/validateFipsCodeLength'
 import { errorMessages } from '../helpers/errorMessages'
 import { DataSet } from '@cdc/core/types/DataSet'
-import Icon from '@cdc/core/components/ui/Icon'
+import Button from '@cdc/core/components/elements/Button'
 
-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)
@@ -58,25 +61,27 @@ const Footer = memo(({ previousPage, nextPage, canPreviousPage, canNextPage, pag
   <footer className='data-table-pagination mt-2'>
     <ul>
       <li>
-        <button
+        <Button
           onClick={() => previousPage()}
           className='btn btn-prev display-flex align-items-center justify-content-center'
           disabled={!canPreviousPage}
           title='Previous Page'
+          flexCenter
         >
           {' '}
           <GrFormPrevious />
-        </button>
+        </Button>
       </li>
       <li className='me-2'>
-        <button
+        <Button
           onClick={() => nextPage()}
           className='btn btn-next display-flex align-items-center justify-content-center'
           disabled={!canNextPage}
           title='Next Page'
+          flexCenter
         >
           <MdNavigateNext />
-        </button>
+        </Button>
       </li>
     </ul>
     <span>
@@ -86,30 +91,45 @@ 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) {
+      // When the active dataset is removed, clear the cached source so the placeholder can render again.
+      lastDataSourceRef.current = null
+      _setTableData(null)
+      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)
         }
@@ -129,10 +149,14 @@ const PreviewDataTable = () => {
     const loadData = async () => {
       if (!config.data) {
         if (config.type === 'dashboard') {
+          if (!previewData) {
+            setTableData(null)
+            return
+          }
           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 +168,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 +185,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 +250,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/components/modal/Confirmation.jsx

@@ -1,16 +1,17 @@
 import React from 'react'
+import Button from '@cdc/core/components/elements/Button'
 
 export const ConfirmationModal = props => {
   return (
     <>
       <p className='message'>{props.message}</p>
       <div className='confirmation-buttons'>
-        <div className='btn btn-inline' onClick={props.onCancel}>
+        <Button type='button' className='btn btn-inline' onClick={props.onCancel}>
           No
-        </div>
-        <div className='btn btn-inline' onClick={props.onConfirm}>
+        </Button>
+        <Button type='button' className='btn btn-inline' onClick={props.onConfirm}>
           Yes
-        </div>
+        </Button>
       </div>
     </>
   )

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;
@@ -202,9 +202,22 @@
     font-size: 1em;
     display: block;
     border-radius: 5px;
-    transition: 0.1s all;
+    transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
     cursor: pointer;
 
+    @media (hover: hover) {
+      &:hover:not(:disabled) {
+        background: #0b4778;
+        transform: translateY(-1px);
+        box-shadow: 0 0.5rem 1.1rem rgb(0 94 170 / 22%);
+      }
+    }
+
+    &:active:not(:disabled) {
+      transform: translateY(0);
+      box-shadow: 0 0.15rem 0.45rem rgb(0 94 170 / 12%);
+    }
+
     &.btn-inline {
       display: inline-block;
       margin: 10px 0 0 10px;