@cdc/dashboard 4.26.4 → 4.26.5

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@cdc/dashboard",
-  "version": "4.26.4",
+  "version": "4.26.5",
   "description": "React component for combining multiple visualizations into a single dashboard",
   "license": "Apache-2.0",
   "author": "Matthew Pallansch <mpallansch@adittech.com>",
   "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/chart": "^4.26.4",
-    "@cdc/core": "^4.26.4",
-    "@cdc/data-bite": "^4.26.4",
-    "@cdc/filtered-text": "^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/data-bite": "^4.26.5",
+    "@cdc/filtered-text": "^4.26.5",
+    "@cdc/map": "^4.26.5",
+    "@cdc/markup-include": "^4.26.5",
+    "@cdc/waffle-chart": "^4.26.5",
     "js-base64": "^2.5.2",
     "react-accessible-accordion": "^5.0.1",
     "react-dnd": "^16.0.1",
@@ -26,7 +26,7 @@
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "6097de1ff814001880d9ac64bd66becdc092d63c",
+  "gitHead": "61c025165d96b45a6002c34582c5a622a9d865a9",
   "main": "dist/cdcdashboard",
   "moduleName": "CdcDashboard",
   "peerDependencies": {

package/src/CdcDashboard.tsx

@@ -71,7 +71,8 @@ const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({
       return acc
     }, {})
     getVizKeys(newConfig).forEach(vizKey => {
-      const formattedData = datasets[newConfig.visualizations[vizKey].dataKey]
+      const dataKey = newConfig.visualizations[vizKey].dataKey
+      const formattedData = dataKey ? datasets[dataKey] : undefined
       if (formattedData) {
         newConfig.visualizations[vizKey].formattedData = formattedData
       }
@@ -87,7 +88,7 @@ const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({
   const loadSingleDashboard = async config => {
     let newConfig = { ...defaults, ...config } as DashboardConfig
 
-    if (config.datasets) {
+    if (config.datasets && Object.keys(config.datasets).length > 0) {
       return prepareDatasets(newConfig)
     } else {
       const dataKey = newConfig.dataFileName || 'backwards-compatibility'
@@ -141,6 +142,9 @@ const MultiDashboardWrapper: React.FC<MultiDashboardProps> = ({
       multiDashboards: multiConfig.multiDashboards,
       activeDashboard: selectedConfig
     } as MultiDashboardConfig
+    if (!newConfig.datasets || Object.keys(newConfig.datasets).length === 0) {
+      return { newConfig, datasets: {} }
+    }
     return prepareDatasets(newConfig)
   }
 

package/src/CdcDashboardComponent.tsx

@@ -46,8 +46,10 @@ import EditorContext from '@cdc/core/contexts/EditorContext'
 import { APIFilterDropdowns } from './components/DashboardFilters'
 import { ViewPort } from '@cdc/core/types/ViewPort'
 import VisualizationRow from './components/VisualizationRow'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { getVizConfig } from './helpers/getVizConfig'
 import { getFilteredData } from './helpers/getFilteredData'
+import { dashboardRowsUseFiltersIncomplete } from './helpers/dashboardConditions'
 import { getVizRowColumnLocator } from './helpers/getVizRowColumnLocator'
 import { Responsive, VisualizationContainer } from '@cdc/core/components/Layout'
 import * as reloadURLHelpers from './helpers/reloadURLHelpers'
@@ -59,7 +61,9 @@ import Alert from '@cdc/core/components/Alert'
 import { shouldLoadAllFilters } from './helpers/shouldLoadAllFilters'
 import { subscribe, unsubscribe } from '@cdc/core/helpers/events'
 import DashboardEditors from './components/DashboardEditors'
+import { DashboardCopyPasteProvider } from './DashboardCopyPasteContext'
 import { updateChildFilters } from './helpers/updateChildFilters'
+import { getColumnWidgetEntries } from './helpers/dashboardColumnWidgets'
 
 type DashboardProps = Omit<WCMSProps, 'configUrl'> & {
   initialState: InitialState
@@ -80,8 +84,30 @@ export default function CdcDashboard({
   const [allExpanded, setAllExpanded] = useState(true)
   const [apiLoading, setAPILoading] = useState(false)
 
+  // Capture initial filter values at mount (before user interactions mutate filter.active)
+  const initialFilterValues = useMemo(() => {
+    const values: Record<string, string> = {}
+    for (const filter of initialState.config.dashboard?.sharedFilters || []) {
+      if (filter.setBy) {
+        const active = Array.isArray(filter.active) ? filter.active[0] : filter.active
+        values[filter.setBy] = filter.defaultValue || active || filter.values?.[0] || ''
+      }
+    }
+    return values
+  }, [])
+
   const isPreview = state.tabSelected === 'Dashboard Preview'
 
+  const hasFiltersIncompleteCondition = useMemo(
+    () => dashboardRowsUseFiltersIncomplete(state.config.rows || []),
+    [state.config.rows]
+  )
+
+  const hasIncompleteSharedFilters = useMemo(() => {
+    const sharedFilters = state.config.dashboard?.sharedFilters || []
+    return sharedFilters.some(isFilterAtResetState)
+  }, [state.config.dashboard?.sharedFilters])
+
   const inNoDataState = useMemo(() => {
     const hasApplyBehavior = hasDashboardApplyBehavior(state.config.visualizations)
 
@@ -89,18 +115,18 @@ export default function CdcDashboard({
       return true
     }
 
-    // Check if any filters are at their reset state (incomplete)
-    const sharedFilters = state.config.dashboard?.sharedFilters || []
-    const hasResetFilters = sharedFilters.some(isFilterAtResetState)
-    if (hasResetFilters) {
+    if (hasIncompleteSharedFilters) {
       return true
     }
 
-    const vals = reloadURLHelpers.getDatasetKeys(state.config).map(key => state.data[key])
+    const vals = reloadURLHelpers
+      .getDatasetKeys(state.config, { includeDashboardConditionDatasetKeys: false })
+      .map(key => state.data[key])
 
     // Check if there are any visualizations that actually need data
     // Markup-includes without dataKey don't require dashboard data
     const visualizationsNeedingData = Object.values(state.config.visualizations).filter(viz => {
+      if (viz.type === 'dashboardFilters') return false
       return viz.type !== 'markup-include' || viz.dataKey
     })
 
@@ -109,7 +135,15 @@ export default function CdcDashboard({
 
     if (!vals.length) return true
     return vals.some(val => val === undefined)
-  }, [state.data, state.config.visualizations, state.config.dashboard?.sharedFilters, state.filtersApplied])
+  }, [
+    state.data,
+    state.config.visualizations,
+    state.config.datasets,
+    state.config.rows,
+    state.filtersApplied,
+    hasIncompleteSharedFilters,
+    hasFiltersIncompleteCondition
+  ])
 
   const vizRowColumnLocator = getVizRowColumnLocator(state.config.rows)
 
@@ -134,13 +168,9 @@ export default function CdcDashboard({
     const filters = newFilters || config.dashboard.sharedFilters
     const datasetKeys = reloadURLHelpers.getDatasetKeys(config)
 
-    const emptyData = {}
-    const emptyFilteredData = {}
-    dispatch({ type: 'SET_DATA', payload: emptyData })
-    dispatch({ type: 'SET_FILTERED_DATA', payload: emptyFilteredData })
-
-    const newData = {} // Start with empty object instead of cloning existing data
-    const newDatasets = config.datasets
+    setAPILoading(true)
+    const newData = {}
+    const newDatasets = { ...config.datasets }
     let dataWasFetched = false
     let newFileName = ''
 
@@ -207,7 +237,6 @@ export default function CdcDashboard({
             newFileName
           )
 
-          setAPILoading(true)
           await fetchRemoteData(dataUrlFinal)
             .then(({ data: fetchedData, dataMetadata }) => {
               let data: any[] = fetchedData
@@ -220,9 +249,7 @@ export default function CdcDashboard({
                   console.error('Error standardizing data:', e)
                 }
               }
-              newDatasets[datasetKey].data = data
-              newDatasets[datasetKey].dataMetadata = dataMetadata
-              newDatasets[datasetKey].runtimeDataUrl = dataUrlFinal
+              newDatasets[datasetKey] = { ...newDatasets[datasetKey], data, dataMetadata, runtimeDataUrl: dataUrlFinal }
               newData[datasetKey] = data
             })
             .catch(e => {
@@ -231,8 +258,7 @@ export default function CdcDashboard({
                 type: 'ADD_ERROR_MESSAGE',
                 payload: 'There was a problem returning data. Please try again.'
               })
-              newDatasets[datasetKey].data = []
-              newDatasets[datasetKey].runtimeDataUrl = dataUrlFinal
+              newDatasets[datasetKey] = { ...newDatasets[datasetKey], data: [], runtimeDataUrl: dataUrlFinal }
               newData[datasetKey] = []
             })
         }
@@ -247,7 +273,10 @@ export default function CdcDashboard({
         return acc
       }, {})
       const _newData = { ...newData, ...dataFiles }
-      dispatch({ type: 'SET_DATA', payload: _newData })
+      dispatch({
+        type: 'SET_DATA',
+        payload: { data: _newData, activeDashboard: config.activeDashboard }
+      })
       const dataFilterIndexes = config.dashboard.sharedFilters.reduce((acc, filter, index) => {
         if (filter.type === 'datafilter') acc.push(index)
         return acc
@@ -264,7 +293,10 @@ export default function CdcDashboard({
         {},
         _newData
       )
-      dispatch({ type: 'SET_FILTERED_DATA', payload: filteredData })
+      dispatch({
+        type: 'SET_FILTERED_DATA',
+        payload: { filteredData, activeDashboard: config.activeDashboard }
+      })
       const visualizations = reloadURLHelpers.getVisualizationsWithFormattedData(
         config.visualizations as Record<string, Visualization>,
         newData
@@ -308,11 +340,46 @@ export default function CdcDashboard({
 
     const newFilteredData = getFilteredData({ ...state, config: newConfig }, filteredData)
 
-    dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
+    dispatch({ type: 'SET_FILTERED_DATA', payload: { filteredData: newFilteredData } })
     dispatch({ type: 'SET_CONFIG', payload: newConfig })
     dispatch({ type: 'SET_SHARED_FILTERS', payload: newConfig.dashboard.sharedFilters })
   }
 
+  // Get the initial/reset value for a filter (captured at mount to avoid reading mutated state)
+  const getFilterInitialValue = (filter: SharedFilter): string => {
+    const key = filter.setBy || ''
+    return initialFilterValues[key] ?? filter.defaultValue ?? filter.values?.[0] ?? ''
+  }
+
+  const clearSharedFilter = (key: string) => {
+    const { config: newConfig, filteredData } = cloneDeep(state)
+
+    for (let i = 0; i < newConfig.dashboard.sharedFilters.length; i++) {
+      const filter = newConfig.dashboard.sharedFilters[i]
+      if (filter.setBy === key) {
+        filter.active = getFilterInitialValue(filter)
+        break
+      }
+    }
+
+    const newFilteredData = getFilteredData({ ...state, config: newConfig }, filteredData)
+
+    dispatch({ type: 'SET_FILTERED_DATA', payload: { filteredData: newFilteredData } })
+    dispatch({ type: 'SET_CONFIG', payload: newConfig })
+    dispatch({ type: 'SET_SHARED_FILTERS', payload: newConfig.dashboard.sharedFilters })
+  }
+
+  const hasActiveSharedFilter = (key: string): boolean => {
+    const filter = state.config.dashboard?.sharedFilters?.find(f => f.setBy === key)
+    if (!filter) return false
+
+    // Get the initial/default value for this filter
+    const initialValue = getFilterInitialValue(filter)
+
+    // Filter is "user-active" only if active differs from the initial value
+    return filter.active !== undefined && filter.active !== '' && filter.active !== initialValue
+  }
+
   const setEventData = ({ detail }, data, filteredData) => {
     try {
       const newDatasets = Object.keys(detail).reduce((acc, key) => {
@@ -323,8 +390,8 @@ export default function CdcDashboard({
       }, {})
       const newConfig = { ...state, data: { ...data, ...newDatasets } }
       const newFilteredData = getFilteredData(newConfig, cloneDeep(filteredData))
-      dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
-      dispatch({ type: 'SET_DATA', payload: { ...data, ...newDatasets } })
+      dispatch({ type: 'SET_FILTERED_DATA', payload: { filteredData: newFilteredData } })
+      dispatch({ type: 'SET_DATA', payload: { data: { ...data, ...newDatasets } } })
     } catch (e) {
       console.error('Error setting event data: ', e)
     }
@@ -343,24 +410,29 @@ export default function CdcDashboard({
     const loadAllFilters = shouldLoadAllFilters(config, isEditor && !isPreview)
     let sharedFiltersWithValues = addValuesToDashboardFilters(config.dashboard.sharedFilters, state.data)
     sharedFiltersWithValues = updateChildFilters(sharedFiltersWithValues, state.data)
-    setAPILoading(true)
-    loadAPIFilters(sharedFiltersWithValues, apiFilterDropdowns, loadAllFilters)?.then(newFilters => {
-      const allValuesSelected = newFilters.every(filter => {
-        return filter.type === 'datafilter' || filter.active
+    const filterPromise = loadAPIFilters(sharedFiltersWithValues, apiFilterDropdowns, loadAllFilters)
+    if (!filterPromise) {
+      setAPILoading(false)
+    } else {
+      setAPILoading(true)
+      filterPromise.then(newFilters => {
+        const allValuesSelected = newFilters.every(filter => {
+          return filter.type === 'datafilter' || filter.active
+        })
+        if (allValuesSelected) {
+          reloadURLData(newFilters)
+        } else {
+          setAPILoading(false)
+        }
       })
-      if (allValuesSelected) {
-        reloadURLData(newFilters)
-      } else {
-        setAPILoading(false)
-      }
-    })
+    }
   }, [isEditor, isPreview, state.config?.activeDashboard])
 
   useEffect(() => {
     return () => {
       // Clear all data when component unmounts to prevent memory leaks
-      dispatch({ type: 'SET_DATA', payload: {} })
-      dispatch({ type: 'SET_FILTERED_DATA', payload: {} })
+      dispatch({ type: 'SET_DATA', payload: { data: {} } })
+      dispatch({ type: 'SET_FILTERED_DATA', payload: { filteredData: {} } })
 
       // Clear any pending API requests
       setAPILoading(false)
@@ -470,6 +542,8 @@ export default function CdcDashboard({
               _updateConfig={_updateConfig}
               isDebug={isDebug}
               setSharedFilter={setSharedFilter}
+              clearSharedFilter={clearSharedFilter}
+              hasActiveSharedFilter={hasActiveSharedFilter}
               apiFilterDropdowns={apiFilterDropdowns}
               state={state}
               interactionLabel={interactionLabel}
@@ -481,24 +555,30 @@ export default function CdcDashboard({
 
     if (!subVisualizationEditing) {
       body = (
-        <DndProvider backend={HTML5Backend}>
-          {apiLoading && <Loader fullScreen={true} />}
-          <div className='header-container'>
-            <Header />
-            <VisualizationsPanel />
-          </div>
-
-          <div className='layout-container'>
-            <Grid />
-          </div>
-        </DndProvider>
+        <DashboardCopyPasteProvider>
+          <DndProvider backend={HTML5Backend}>
+            {apiLoading && <Loader fullScreen={true} />}
+            <div className='header-container'>
+              <Header />
+              <VisualizationsPanel />
+            </div>
+
+            <div className='layout-container'>
+              <Grid />
+            </div>
+          </DndProvider>
+        </DashboardCopyPasteProvider>
       )
     }
   } else {
     const { config } = state
     const { title, description } = config.dashboard || {}
+    const hasDashboardDownloadButton = config.table?.downloadImageButton || config.table?.downloadPdfButton
 
-    const filteredRows = config.rows?.filter(row => row.columns.filter(col => col.widget).length !== 0)
+    const filteredRows =
+      config.rows
+        ?.map((row, index) => ({ row, index }))
+        .filter(({ row }) => row.columns.some(col => getColumnWidgetEntries(col).length > 0)) || []
 
     body = (
       <>
@@ -525,49 +605,60 @@ export default function CdcDashboard({
             {/* Description */}
             {description && <div className='subtext cove-prose mb-4'>{parse(description)}</div>}
             {/* Visualizations */}
-            {filteredRows?.map((row, index) => (
-              <VisualizationRow
-                key={`row__${index}`}
-                allExpanded={allExpanded}
-                groupName={''}
-                row={row}
-                rowIndex={index}
-                setSharedFilter={setSharedFilter}
-                setAllExpanded={setAllExpanded}
-                updateChildConfig={updateChildConfig}
-                apiFilterDropdowns={apiFilterDropdowns}
-                currentViewport={currentViewport}
-                inNoDataState={inNoDataState}
-                interactionLabel={interactionLabel}
-                isLastRow={index === filteredRows.length - 1}
-              />
+            {filteredRows.map(({ row, index }, renderIndex) => (
+              <ErrorBoundary key={`row__${index}`} component={`VisualizationRow-${index}`}>
+                <VisualizationRow
+                  allExpanded={allExpanded}
+                  groupName={''}
+                  row={row}
+                  rowIndex={index}
+                  setSharedFilter={setSharedFilter}
+                  clearSharedFilter={clearSharedFilter}
+                  hasActiveSharedFilter={hasActiveSharedFilter}
+                  setAllExpanded={setAllExpanded}
+                  updateChildConfig={updateChildConfig}
+                  apiFilterDropdowns={apiFilterDropdowns}
+                  currentViewport={currentViewport}
+                  inNoDataState={inNoDataState}
+                  interactionLabel={interactionLabel}
+                  isLastRow={renderIndex === filteredRows.length - 1}
+                />
+              </ErrorBoundary>
             ))}
 
-            {inNoDataState ? <div className='mt-5'>Please complete your selection to continue.</div> : <></>}
+            {inNoDataState && !(hasIncompleteSharedFilters && hasFiltersIncompleteCondition) ? (
+              <div className='mt-5'>Please complete your selection to continue.</div>
+            ) : (
+              <></>
+            )}
 
             {/* Image or PDF Inserts */}
-            <section className='download-buttons'>
-              {config.table?.downloadImageButton && (
-                <MediaControls.Button
-                  title='Download Dashboard as Image'
-                  type='image'
-                  state={config}
-                  text='Download Dashboard Image'
-                  elementToCapture={imageId}
-                  interactionLabel={interactionLabel}
-                />
-              )}
-              {config.table?.downloadPdfButton && (
-                <MediaControls.Button
-                  title='Download Dashboard as PDF'
-                  type='pdf'
-                  state={config}
-                  text='Download Dashboard PDF'
-                  elementToCapture={imageId}
-                  interactionLabel={interactionLabel}
-                />
-              )}
-            </section>
+            {hasDashboardDownloadButton && (
+              <section className='download-buttons'>
+                {config.table?.downloadImageButton && (
+                  <MediaControls.Button
+                    title='Download Dashboard as Image'
+                    type='image'
+                    state={config}
+                    text='Download Dashboard Image'
+                    elementToCapture={imageId}
+                    interactionLabel={interactionLabel}
+                    appearance={config.table?.downloadImageButtonStyle === 'link' ? 'link' : 'button'}
+                  />
+                )}
+                {config.table?.downloadPdfButton && (
+                  <MediaControls.Button
+                    title='Download Dashboard as PDF'
+                    type='pdf'
+                    state={config}
+                    text='Download Dashboard PDF'
+                    elementToCapture={imageId}
+                    interactionLabel={interactionLabel}
+                    appearance={config.table?.downloadImageButtonStyle === 'link' ? 'link' : 'button'}
+                  />
+                )}
+              </section>
+            )}
 
             {/* Data Table */}
             {config.table?.show && config.data && (

package/src/DashboardCopyPasteContext.test.tsx

@@ -0,0 +1,33 @@
+import React, { useContext } from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { DashboardCopyPasteContext, DashboardCopyPasteProvider } from './DashboardCopyPasteContext'
+
+const CopyPasteHarness = () => {
+  const { copiedWidget, copyWidget } = useContext(DashboardCopyPasteContext)
+
+  return (
+    <>
+      <button onClick={() => copyWidget({ sourceWidgetKey: 'source-widget', label: 'Source Component' })}>
+        Copy Test Component
+      </button>
+      {copiedWidget && <span>{copiedWidget.label}</span>}
+    </>
+  )
+}
+
+describe('DashboardCopyPasteProvider', () => {
+  it('clears copy mode with Escape', () => {
+    render(
+      <DashboardCopyPasteProvider>
+        <CopyPasteHarness />
+      </DashboardCopyPasteProvider>
+    )
+
+    fireEvent.click(screen.getByText('Copy Test Component'))
+    expect(screen.getByText('Source Component')).toBeInTheDocument()
+
+    fireEvent.keyDown(window, { key: 'Escape' })
+    expect(screen.queryByText('Source Component')).not.toBeInTheDocument()
+  })
+})

package/src/DashboardCopyPasteContext.tsx

@@ -0,0 +1,48 @@
+import React, { createContext, useCallback, useEffect, useMemo, useState } from 'react'
+
+export type CopiedDashboardWidget = {
+  sourceWidgetKey: string
+  label: string
+}
+
+type DashboardCopyPasteContextValue = {
+  copiedWidget?: CopiedDashboardWidget
+  copyWidget: (widget: CopiedDashboardWidget) => void
+  clearCopiedWidget: () => void
+}
+
+const initialContext: DashboardCopyPasteContextValue = {
+  copyWidget: () => {},
+  clearCopiedWidget: () => {}
+}
+
+export const DashboardCopyPasteContext = createContext<DashboardCopyPasteContextValue>(initialContext)
+
+export const DashboardCopyPasteProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [copiedWidget, setCopiedWidget] = useState<CopiedDashboardWidget | undefined>()
+  const clearCopiedWidget = useCallback(() => setCopiedWidget(undefined), [])
+
+  useEffect(() => {
+    if (!copiedWidget) return
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        clearCopiedWidget()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [clearCopiedWidget, copiedWidget])
+
+  const value = useMemo(
+    () => ({
+      copiedWidget,
+      copyWidget: setCopiedWidget,
+      clearCopiedWidget
+    }),
+    [clearCopiedWidget, copiedWidget]
+  )
+
+  return <DashboardCopyPasteContext.Provider value={value}>{children}</DashboardCopyPasteContext.Provider>
+}

package/src/_stories/Dashboard.EditorRegression.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import { performAndAssert, waitForPresence } from '@cdc/core/helpers/testing'
+import CdcEditor from '@cdc/editor/src/CdcEditor'
+import SharedFilterRowDeleteConfig from '../../examples/dashboard-shared-filter-row-delete-cleanup.json'
+
+const meta: Meta<typeof CdcEditor> = {
+  title: 'Components/Pages/Dashboard/Regression Editor',
+  component: CdcEditor
+}
+
+export default meta
+type Story = StoryObj<typeof CdcEditor>
+
+export const Delete_Rows_With_Stale_Shared_Filter_Targets: Story = {
+  args: {
+    config: SharedFilterRowDeleteConfig
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+
+    await waitForPresence('.builder-row', canvasElement)
+
+    const getState = () => ({
+      rowCount: canvasElement.querySelectorAll('.builder-row').length,
+      deleteButtonCount: canvasElement.querySelectorAll('[title="Delete Row"]').length,
+      hasFiltersRow: (canvasElement.textContent || '').includes('dashboard-filters'),
+      hasRowA: (canvasElement.textContent || '').includes('Row A'),
+      hasRowB: (canvasElement.textContent || '').includes('Row B'),
+      hasRowC: (canvasElement.textContent || '').includes('Row C'),
+      noDataVisible: (canvasElement.textContent || '').includes('No Data Available'),
+      crashTextVisible: (canvasElement.textContent || '').includes('Cannot read properties of undefined')
+    })
+
+    const initialState = getState()
+    expect(initialState.rowCount).toBe(4)
+    expect(initialState.deleteButtonCount).toBe(4)
+    expect(initialState.hasRowA).toBe(true)
+    expect(initialState.hasRowB).toBe(true)
+    expect(initialState.hasRowC).toBe(true)
+    expect(initialState.noDataVisible).toBe(false)
+    expect(initialState.crashTextVisible).toBe(false)
+
+    await performAndAssert(
+      'Delete one shared-filter row without crashing',
+      getState,
+      async () => await user.click(canvas.getAllByTitle('Delete Row')[1]),
+      (_before, after) =>
+        after.rowCount === 3 &&
+        after.deleteButtonCount === 3 &&
+        !after.hasRowA &&
+        after.hasRowB &&
+        after.hasRowC &&
+        !after.noDataVisible &&
+        !after.crashTextVisible
+    )
+
+    await performAndAssert(
+      'Delete another shared-filter row after indices shift',
+      getState,
+      async () => await user.click(canvas.getAllByTitle('Delete Row')[2]),
+      (_before, after) =>
+        after.rowCount === 2 &&
+        after.deleteButtonCount === 2 &&
+        after.hasRowB &&
+        !after.hasRowC &&
+        !after.noDataVisible &&
+        !after.crashTextVisible
+    )
+  }
+}