@cdc/dashboard 4.26.4 → 4.26.5

package/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import FilterEditor from './FilterEditor'
 
@@ -18,8 +18,67 @@ const baseConfig = {
       ]
     }
   },
-  rows: [],
-  visualizations: {}
+  rows: [
+    {
+      columns: [
+        {
+          width: 12,
+          conditionalWidgets: [
+            {
+              widget: 'viz-1',
+              dashboardCondition: {
+                id: 'row-1-col-1-condition',
+                datasetKey: 'nested-data.json',
+                operator: 'hasData'
+              }
+            }
+          ]
+        }
+      ],
+      dashboardCondition: {
+        id: 'row-1-condition',
+        datasetKey: 'nested-data.json',
+        operator: 'hasData'
+      },
+      expandCollapseAllButtons: false
+    },
+    {
+      columns: [
+        {
+          width: 12,
+          widget: 'viz-2',
+          dashboardCondition: {
+            id: 'row-2-col-1-condition',
+            datasetKey: 'nested-data.json',
+            operator: 'hasData'
+          }
+        }
+      ],
+      dashboardCondition: {
+        id: 'row-2-condition',
+        datasetKey: 'nested-data.json',
+        operator: 'hasData'
+      },
+      expandCollapseAllButtons: false,
+      toggle: true
+    }
+  ],
+  visualizations: {
+    'viz-1': {
+      uid: 'viz-1',
+      type: 'markup-include',
+      contentEditor: {
+        title: 'First Markup'
+      }
+    },
+    'viz-2': {
+      uid: 'viz-2',
+      type: 'markup-include',
+      contentEditor: {
+        title: 'Toggle Markup'
+      }
+    }
+  }
 } as any
 
 const createNestedFilter = (type: 'datafilter' | 'urlfilter') =>
@@ -51,6 +110,60 @@ const createNestedFilter = (type: 'datafilter' | 'urlfilter') =>
       : {})
   } as any)
 
+describe('FilterEditor API filter subgroup text selector', () => {
+  it('displays subgroupTextSelector value from apiFilter', () => {
+    const filter = {
+      ...createNestedFilter('urlfilter'),
+      apiFilter: {
+        apiEndpoint: '/api/nested-options',
+        valueSelector: 'year',
+        subgroupValueSelector: 'quarter',
+        subgroupTextSelector: 'quarterName'
+      }
+    } as any
+
+    render(
+      <FilterEditor
+        config={{
+          ...baseConfig,
+          dashboard: { sharedFilters: [filter] }
+        }}
+        filter={filter}
+        filterIndex={0}
+        onNestedDragAreaHover={vi.fn()}
+        toggleNestedQueryParameters={vi.fn()}
+        updateFilterProp={vi.fn()}
+      />
+    )
+
+    expect(screen.getByDisplayValue('quarterName')).toBeInTheDocument()
+  })
+
+  it('shows empty string when subgroupTextSelector is absent', () => {
+    const filter = createNestedFilter('urlfilter') as any
+
+    render(
+      <FilterEditor
+        config={{
+          ...baseConfig,
+          dashboard: { sharedFilters: [filter] }
+        }}
+        filter={filter}
+        filterIndex={0}
+        onNestedDragAreaHover={vi.fn()}
+        toggleNestedQueryParameters={vi.fn()}
+        updateFilterProp={vi.fn()}
+      />
+    )
+
+    const inputs = screen.getAllByRole('textbox')
+    const subgroupTextInput = inputs.find(el =>
+      el.closest('label')?.textContent?.includes('Subgroup Display Text Selector')
+    )
+    expect(subgroupTextInput).toHaveValue('')
+  })
+})
+
 describe('FilterEditor nested dropdown display toggle', () => {
   it.each([
     ['data-backed nested filters', createNestedFilter('datafilter')],
@@ -124,4 +237,68 @@ describe('FilterEditor nested dropdown display toggle', () => {
 
     expect(screen.queryByLabelText('Display subgrouping only')).not.toBeInTheDocument()
   })
+
+  it('uses row targets for row conditions and does not expose dashboard condition ids in Used By options', () => {
+    render(
+      <FilterEditor
+        config={{
+          ...baseConfig,
+          dashboard: {
+            sharedFilters: [
+              {
+                ...createNestedFilter('datafilter'),
+                filterStyle: 'dropdown'
+              }
+            ]
+          }
+        }}
+        filter={{
+          ...createNestedFilter('datafilter'),
+          filterStyle: 'dropdown'
+        }}
+        filterIndex={0}
+        onNestedDragAreaHover={vi.fn()}
+        toggleNestedQueryParameters={vi.fn()}
+        updateFilterProp={vi.fn()}
+      />
+    )
+
+    const expandButtons = screen.getAllByLabelText('Expand')
+    fireEvent.click(expandButtons[0])
+
+    expect(screen.getByText('Row 1')).toBeInTheDocument()
+    expect(screen.queryByText('Row 1 Dashboard Condition')).not.toBeInTheDocument()
+    expect(screen.queryByText('Row 1 Column 1 Component 1 Dashboard Condition')).not.toBeInTheDocument()
+    expect(screen.queryByText('Row 2 Dashboard Condition')).not.toBeInTheDocument()
+    expect(screen.queryByText('Row 2 Column 1 Dashboard Condition')).not.toBeInTheDocument()
+  })
+
+  it('updates dashboard shared filter note text', async () => {
+    const filter = {
+      ...createNestedFilter('datafilter'),
+      filterStyle: 'dropdown',
+      note: 'Existing note'
+    }
+    const updateFilterProp = vi.fn()
+
+    render(
+      <FilterEditor
+        config={{
+          ...baseConfig,
+          dashboard: { sharedFilters: [filter] }
+        }}
+        filter={filter}
+        filterIndex={0}
+        onNestedDragAreaHover={vi.fn()}
+        toggleNestedQueryParameters={vi.fn()}
+        updateFilterProp={updateFilterProp}
+      />
+    )
+
+    fireEvent.change(screen.getByLabelText('Note'), { target: { value: 'Helpful note' } })
+
+    await waitFor(() => {
+      expect(updateFilterProp).toHaveBeenCalledWith('note', 'Helpful note')
+    })
+  })
 })

package/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.tsx

@@ -1,7 +1,7 @@
-import { getVizRowColumnLocator } from '../../../../helpers/getVizRowColumnLocator'
 import { Select, TextField } from '@cdc/core/components/EditorPanel/Inputs'
 import DataTransform from '@cdc/core/helpers/DataTransform'
 import { useEffect, useMemo, useState } from 'react'
+import { getSharedFilterTargetOptions } from '../../../../helpers/dashboardFilterTargets'
 import { SharedFilter } from '../../../../types/SharedFilter'
 
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
@@ -10,7 +10,6 @@ import Icon from '@cdc/core/components/ui/Icon'
 import MultiSelect from '@cdc/core/components/MultiSelect'
 import Loading from '@cdc/core/components/Loading'
 import { DashboardConfig } from '../../../../types/DashboardConfig'
-import { Visualization } from '@cdc/core/types/Visualization'
 import { hasDashboardApplyBehavior } from '../../../../helpers/hasDashboardApplyBehavior'
 import APIModal from './APIModal'
 import NestedDropDownDashboard from './NestedDropDownDashboard'
@@ -52,8 +51,6 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
     .filter(({ key }) => key !== filter.key)
     .map(({ key }) => key)
 
-  const vizRowColumnLocator = getVizRowColumnLocator(config.rows)
-
   const getVizTitle = (viz, vizKey) => {
     let vizName = viz.general?.title || viz.title || vizKey
     if (viz.visualizationType === 'markup-include') {
@@ -63,32 +60,9 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
   }
 
   const [usedByNameLookup, usedByOptions] = useMemo(() => {
-    const nameLookup = {}
-    const vizOptions = Object.keys(config.visualizations).filter(vizKey => {
-      const vizLookup = vizRowColumnLocator[vizKey]
-      if (!vizLookup) return false
-      const viz = config.visualizations[vizKey] as Visualization
-      if (viz.type === 'dashboardFilters') return false
-      const vizName = getVizTitle(viz, vizKey)
-
-      nameLookup[vizKey] = vizName
-      const usesSharedFilter = viz.usesSharedFilter
-      const rowIndex = vizLookup.row
-      const dataConfiguredOnRow = config.rows[rowIndex].dataKey
-      return filter.setBy !== vizKey && !usesSharedFilter && !dataConfiguredOnRow
-    })
-    const rowOptions: number[] = []
-
-    config.rows.forEach((row, rowIndex) => {
-      if (!!row.dataKey) {
-        nameLookup[rowIndex] = `Row ${rowIndex + 1}`
-        rowOptions.push(rowIndex)
-      }
-    })
-
-    const rowsNotSelected = rowOptions.filter(row => !filter.usedBy || filter.usedBy.indexOf(row.toString()) === -1)
-    return [nameLookup, [...vizOptions, ...rowsNotSelected]]
-  }, [config.visualizations, filter.usedBy, filter.setBy, vizRowColumnLocator])
+    const { nameLookup, options } = getSharedFilterTargetOptions(config, filter)
+    return [nameLookup, options]
+  }, [config, filter])
 
   const useParameters = useMemo(() => {
     if (filter.subGrouping) return !!(filter.setByQueryParameter && filter.subGrouping?.setByQueryParameter)
@@ -224,11 +198,20 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
 
           <TextField
             label='Label'
+            fieldName='key'
             value={filter.key}
             updateField={(_section, _subSection, _key, value) => {
               updateLabel(value)
             }}
           />
+          <TextField
+            type='textarea'
+            className='filter-editor__compact-textarea'
+            label='Note'
+            fieldName='note'
+            value={filter.note || ''}
+            updateField={(_section, _subSection, _key, value) => updateFilterProp('note', value)}
+          />
           {filter.filterStyle === FILTER_STYLE.multiSelect && (
             <TextField
               label='Select Limit'
@@ -293,7 +276,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                   {filter.filterBy === 'Query String' && filter.usedBy && filter.usedBy.length > 0 && (
                     <div className='bg-info-subtle p-2 my-2' style={{ fontSize: '0.9em' }}>
                       <Icon display='info' style={{ marginRight: '0.5rem' }} />
-                      Will apply to datasets used by selected widgets
+                      Will apply to datasets used by selected targets
                     </div>
                   )}
                   {filter.filterBy === 'File Name' && (
@@ -406,7 +389,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                     </label>
                     <label>
                       <span>Subgroup Display Text Selector: </span>
-                      <input value={filter?.apifilter?.subgroupTextSelector || ''} disabled />
+                      <input value={filter?.apiFilter?.subgroupTextSelector || ''} disabled />
                       <Tooltip style={{ textTransform: 'none' }}>
                         <Tooltip.Target>
                           <Icon display='question' style={{ marginLeft: '0.5rem' }} />

package/src/components/DashboardFilters/DashboardFiltersWrapper.test.tsx

@@ -0,0 +1,142 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { DashboardContext, DashboardDispatchContext, initialState } from '../../DashboardContext'
+import DashboardFiltersWrapper from './DashboardFiltersWrapper'
+
+vi.mock('@cdc/core/components/ui/Icon', () => ({
+  default: props => <span data-testid='mock-icon' {...props} />
+}))
+
+const createSharedFilter = (overrides = {}) =>
+  ({
+    key: 'Year',
+    type: 'datafilter',
+    filterStyle: 'dropdown',
+    showDropdown: true,
+    values: ['2023', '2024'],
+    active: '2023',
+    columnName: 'year',
+    parents: [],
+    ...overrides
+  } as any)
+
+const renderWrapper = ({
+  grayBackground,
+  sharedFilters = [createSharedFilter()],
+  sharedFilterIndexes = [0],
+  isEditor = false
+}: {
+  grayBackground?: boolean
+  sharedFilters?: any[]
+  sharedFilterIndexes?: any[]
+  isEditor?: boolean
+} = {}) => {
+  const visualizationConfig = {
+    uid: 'dashboardFilters1',
+    type: 'dashboardFilters',
+    visualizationType: 'dashboardFilters',
+    filterBehavior: 'Filter Change',
+    filterIntro: 'Choose a <strong>year</strong> to update the dashboard.',
+    sharedFilterIndexes,
+    visual: grayBackground === undefined ? undefined : { grayBackground }
+  } as any
+
+  return render(
+    <DashboardContext.Provider
+      value={{
+        ...initialState,
+        config: {
+          type: 'dashboard',
+          dashboard: { sharedFilters },
+          datasets: {},
+          rows: [],
+          visualizations: {
+            dashboardFilters1: visualizationConfig
+          }
+        } as any,
+        data: {},
+        outerContainerRef: vi.fn(),
+        setParentConfig: vi.fn(),
+        isDebug: false,
+        isEditor: false,
+        reloadURLData: vi.fn(),
+        loadAPIFilters: vi.fn(),
+        setAPIFilterDropdowns: vi.fn(),
+        setAPILoading: vi.fn()
+      }}
+    >
+      <DashboardDispatchContext.Provider value={vi.fn()}>
+        <DashboardFiltersWrapper
+          apiFilterDropdowns={{}}
+          visualizationConfig={visualizationConfig}
+          setConfig={vi.fn()}
+          currentViewport={'lg' as any}
+          isEditor={isEditor}
+          interactionLabel='dashboard-test'
+        />
+      </DashboardDispatchContext.Provider>
+    </DashboardContext.Provider>
+  )
+}
+
+describe('DashboardFiltersWrapper visual styles', () => {
+  it('wraps filters in the dashboard filters callout when grey background is enabled', () => {
+    const { container } = renderWrapper({ grayBackground: true })
+
+    expect(container.querySelector('.cdc-callout.cdc-callout--dashboard-filters')).toBeInTheDocument()
+  })
+
+  it.each([false, undefined])('keeps the existing unwrapped layout when grayBackground is %s', value => {
+    const { container } = renderWrapper({ grayBackground: value })
+
+    expect(container.querySelector('.cdc-callout.cdc-callout--dashboard-filters')).not.toBeInTheDocument()
+  })
+
+  it('renders filter intro text above dashboard filter controls', () => {
+    const { container } = renderWrapper()
+    const intro = container.querySelector('.filters-section__intro-text')
+
+    expect(intro).toBeInTheDocument()
+    expect(intro).toHaveTextContent('Choose a year to update the dashboard.')
+    expect(intro?.querySelector('strong')).toHaveTextContent('year')
+  })
+
+  it('renders no dashboard filters container when every referenced filter is hidden', () => {
+    const { container } = renderWrapper({ sharedFilters: [createSharedFilter({ showDropdown: false })] })
+
+    expect(container.querySelector('.cove-dashboard-filters-container')).not.toBeInTheDocument()
+  })
+
+  it('renders no dashboard filters container when sharedFilterIndexes is empty', () => {
+    const { container } = renderWrapper({ sharedFilterIndexes: [] })
+
+    expect(container.querySelector('.cove-dashboard-filters-container')).not.toBeInTheDocument()
+  })
+
+  it('renders no dashboard filters container when sharedFilterIndexes only references missing filters', () => {
+    const { container } = renderWrapper({ sharedFilterIndexes: [4] })
+
+    expect(container.querySelector('.cove-dashboard-filters-container')).not.toBeInTheDocument()
+  })
+
+  it('keeps the editor sidebar available without rendering an empty runtime filters container', () => {
+    const { container, getByText } = renderWrapper({
+      sharedFilters: [createSharedFilter({ showDropdown: false })],
+      isEditor: true
+    })
+
+    expect(getByText('Configure Dashboard Filters')).toBeInTheDocument()
+    expect(container.querySelector('.cove-dashboard-filters-container')).not.toBeInTheDocument()
+  })
+
+  it.each([
+    ['urlfilter', createSharedFilter({ type: 'urlfilter', showDropdown: false })],
+    ['nestedDropdown', createSharedFilter({ filterStyle: 'nested-dropdown', showDropdown: false })],
+    ['tabSimple', createSharedFilter({ filterStyle: 'tab-simple', showDropdown: false })]
+  ])('keeps %s dashboard filters visible under dashboard-specific rules', (_label, filter) => {
+    const { container } = renderWrapper({ sharedFilters: [filter] })
+
+    expect(container.querySelector('.cove-dashboard-filters-container')).toBeInTheDocument()
+  })
+})

package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx

@@ -14,10 +14,10 @@ import { hasDashboardApplyBehavior } from '../../helpers/hasDashboardApplyBehavi
 import * as apiFilterHelpers from '../../helpers/apiFilterHelpers'
 import * as filterResetHelpers from '../../helpers/filterResetHelpers'
 import { applyQueuedActive } from '@cdc/core/components/Filters/helpers/applyQueuedActive'
-import './dashboardfilter.styles.css'
 import { updateChildFilters } from '../../helpers/updateChildFilters'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { hasVisibleDashboardFiltersForIndexes } from '../../helpers/filterVisibility'
 
 type SubOptions = { subOptions?: Record<'value' | 'text', string>[] }
 
@@ -193,7 +193,7 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
       }
     }
     const newFilteredData = getFilteredData(clonedState)
-    dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
+    dispatch({ type: 'SET_FILTERED_DATA', payload: { filteredData: newFilteredData } })
 
     publishAnalyticsEvent({
       vizType: dashboardConfig.type,
@@ -260,7 +260,7 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
         newSharedFilters[index].queuedActive = value
 
         // Don't clear data immediately - keep existing data until new data loads
-        // Only update the filter dropdowns and prepare for reload
+        // Only update the dashboard filters and prepare for reload
         setAPIFilterDropdowns(loadingFilterMemo)
         loadAPIFilters(newSharedFilters, loadingFilterMemo, undefined, undefined, isStale)
       }
@@ -280,7 +280,7 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
           }
         }
         const newFilteredData = getFilteredData(clonedState)
-        dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
+        dispatch({ type: 'SET_FILTERED_DATA', payload: { filteredData: newFilteredData } })
         dispatch({ type: 'SET_SHARED_FILTERS', payload: updatedFilters })
       }
     }
@@ -294,13 +294,28 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
     })
   }
 
-  // if all of the filters are hidden filters don't display the VisualizationWrapper
-  const filters = visualizationConfig?.sharedFilterIndexes
-    ?.map(Number)
-    ?.map(filterIndex => dashboardConfig.dashboard.sharedFilters[filterIndex])
-
-  const displayNone = filters?.length ? filters.every(filter => filter.showDropdown === false) : false
-  if (displayNone && !isEditor) return <></>
+  const hasVisibleFilterControls = hasVisibleDashboardFiltersForIndexes(
+    dashboardConfig.dashboard.sharedFilters,
+    visualizationConfig?.sharedFilterIndexes
+  )
+  const filterControls = (
+    <Filters
+      show={visualizationConfig?.sharedFilterIndexes?.map(Number)}
+      filters={updateChildFilters(dashboardConfig.dashboard.sharedFilters, state.data) || []}
+      apiFilterDropdowns={apiFilterDropdowns}
+      handleOnChange={handleOnChange}
+      showSubmit={visualizationConfig.filterBehavior === FilterBehavior.Apply && !visualizationConfig.autoLoad}
+      filterIntro={visualizationConfig.filterIntro}
+      applyFilters={applyFilters}
+      applyFiltersButtonText={visualizationConfig.applyFiltersButtonText}
+      handleReset={
+        visualizationConfig.filterBehavior === FilterBehavior.Apply && (visualizationConfig.showClearButton ?? true)
+          ? handleReset
+          : undefined
+      }
+    />
+  )
+  if (!hasVisibleFilterControls && !isEditor) return <></>
   return (
     <VisualizationWrapper config={visualizationConfig} isEditor={isEditor} currentViewport={currentViewport}>
       {isEditor && (
@@ -314,28 +329,18 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
         </Sidebar>
       )}
 
-      {!displayNone && (
+      {hasVisibleFilterControls && (
         <Responsive isEditor={isEditor}>
           <div
             className={`${
               isEditor ? ' is-editor' : ''
             } cove-visualization__inner cove-visualization__body col-12 cove-dashboard-filters-container`}
           >
-            <Filters
-              show={visualizationConfig?.sharedFilterIndexes?.map(Number)}
-              filters={updateChildFilters(dashboardConfig.dashboard.sharedFilters, state.data) || []}
-              apiFilterDropdowns={apiFilterDropdowns}
-              handleOnChange={handleOnChange}
-              showSubmit={visualizationConfig.filterBehavior === FilterBehavior.Apply && !visualizationConfig.autoLoad}
-              applyFilters={applyFilters}
-              applyFiltersButtonText={visualizationConfig.applyFiltersButtonText}
-              handleReset={
-                visualizationConfig.filterBehavior === FilterBehavior.Apply &&
-                (visualizationConfig.showClearButton ?? true)
-                  ? handleReset
-                  : undefined
-              }
-            />
+            {visualizationConfig.visual?.grayBackground ? (
+              <div className='cdc-callout cdc-callout--dashboard-filters'>{filterControls}</div>
+            ) : (
+              filterControls
+            )}
           </div>
         </Responsive>
       )}

package/src/components/DashboardFilters/dashboardfilter.styles.css

@@ -1,27 +1,42 @@
-.cove-dashboard-filters-container {
-  :is(label) {
-    font-size: var(--filter-label-font-size);
-    font-weight: 700;
-  }
-  .btn {
-    align-self: flex-end;
-    /* this is the height that is defined for the .form-control class in _forms.scss in bootstrap. */
-    height: calc(1.5em + 0.75rem + 2px);
-  }
-  .loading-filter {
-    position: relative;
-    .spinner-border {
-      height: 1.5rem;
-      position: absolute;
-      right: 10%;
-      top: 55%;
-      width: 1.5rem;
-    }
-  }
-  :is(select):disabled {
-    background-color: var(--lightestGray);
-    & > :is(option) {
-      color: var(--darkGray);
-    }
-  }
-}
+.dashboard-filters__form {
+  align-items: flex-end;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem 1.5rem;
+}
+
+.dashboard-filters__field {
+  margin: 0;
+}
+
+.cove-dashboard-filters-container {
+  .cdc-callout--dashboard-filters {
+    --cdc-callout-background: #f4f8fa;
+  }
+
+  :is(label) {
+    font-size: var(--filter-label-font-size);
+    font-weight: 700;
+  }
+  .btn {
+    align-self: flex-end;
+    /* this is the height that is defined for the .form-control class in _forms.scss in bootstrap. */
+    height: calc(1.5em + 0.75rem + 2px);
+  }
+  .loading-filter {
+    position: relative;
+    .spinner-border {
+      height: 1.5rem;
+      position: absolute;
+      right: 10%;
+      top: 55%;
+      width: 1.5rem;
+    }
+  }
+  :is(select):disabled {
+    background-color: var(--lightestGray);
+    & > :is(option) {
+      color: var(--darkGray);
+    }
+  }
+}

package/src/components/DataDesignerModal.tsx

@@ -11,6 +11,7 @@ import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import DataTransform from '@cdc/core/helpers/DataTransform'
 import { ConfigureData } from '@cdc/core/types/ConfigureData'
 import Icon from '@cdc/core/components/ui/Icon'
+import { getColumnWidgetKeys } from '../helpers/dashboardColumnWidgets'
 
 type DataDesignerModalProps = {
   rowIndex: number
@@ -79,7 +80,7 @@ export const DataDesignerModal: React.FC<DataDesignerModalProps> = ({ vizKey, ro
   }
 
   const removeDatasetsFromVisualizations = () => {
-    const columnVisualizations = config.rows[rowIndex].columns.map(column => column.widget).filter(Boolean)
+    const columnVisualizations = config.rows[rowIndex].columns.flatMap(column => getColumnWidgetKeys(column))
     columnVisualizations.forEach(currentVisualizationKey => {
       dispatch({ type: 'RESET_VISUALIZATION', payload: { vizKey: currentVisualizationKey } })
     })

package/src/components/Grid.tsx

@@ -4,6 +4,7 @@ import Button from '@cdc/core/components/elements/Button'
 
 import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
 import { ConfigRow } from '../types/ConfigRow'
+import { createCoveId } from '@cdc/core/helpers/createCoveId'
 
 const Grid = () => {
   const { config } = useContext(DashboardContext)
@@ -12,18 +13,21 @@ const Grid = () => {
   const rows = config.rows
   const updateConfig = config => dispatch({ type: 'UPDATE_CONFIG', payload: [config] })
   const addRow = () => {
-    const blankRow: Partial<ConfigRow> = { columns: [{ width: 12 }] }
+    const existingRowUuids = rows?.flatMap(row => (row.uuid === undefined ? [] : [row.uuid]))
+    const blankRow: Partial<ConfigRow> = {
+      columns: [{ width: 12 }],
+      uuid: createCoveId('row', { existingIds: existingRowUuids })
+    }
     updateConfig({
       ...config,
-      rows: [...rows, blankRow],
-      uuid: Date.now()
+      rows: [...rows, blankRow]
     })
   }
 
   return (
     <div className='builder-grid'>
       {(rows || []).map((row, idx) => (
-        <Row row={row} idx={idx} uuid={row.uuid} key={idx} />
+        <Row row={row} idx={idx} uuid={row.uuid ?? idx} key={idx} />
       ))}
       <Button variant='primary' className='col' onClick={addRow}>
         Add Row