@cdc/dashboard 4.24.10 → 4.24.12-2

package/src/helpers/loadAPIFilters.ts

@@ -3,29 +3,41 @@ import { APIFilterDropdowns } from '../components/DashboardFilters'
 import { SharedFilter } from '../types/SharedFilter'
 import * as apiFilterHelpers from './apiFilterHelpers'
 import { APIFilter } from '../types/APIFilter'
+import { getParentParams, notAllParentsSelected } from './apiFilterHelpers'
 
 export const loadAPIFiltersFactory = (
   dispatch: Function,
+  dispatchErrorMessages: Function,
   setAPIFilterDropdowns: Function,
   autoLoadFilterIndexes: number[]
 ) => {
   const loadAPIFilters = (
     sharedFilters: SharedFilter[],
     dropdowns: APIFilterDropdowns,
-    recursiveLimit = 3
+    loadAll?: boolean,
+    recursiveLimit = 50
   ): Promise<SharedFilter[]> => {
     if (!sharedFilters) return
+    const allIndexes = sharedFilters.map((_, index) => index)
+    const _autoLoadFilterIndexes = loadAll ? allIndexes : autoLoadFilterIndexes
     sharedFilters = sharedFilters.map((filter, index) =>
       apiFilterHelpers.setAutoLoadDefaultValue(
         index,
         dropdowns[filter.apiFilter?.apiEndpoint],
         sharedFilters,
-        autoLoadFilterIndexes
+        _autoLoadFilterIndexes
       )
     )
     const sharedAPIFilters = sharedFilters.filter(f => f.apiFilter)
     const filterLookup = new Map(sharedAPIFilters.map(filter => [filter.apiFilter.apiEndpoint, filter.apiFilter]))
     const toFetch = apiFilterHelpers.getToFetch(sharedFilters, dropdowns)
+    const loadingDropdowns = Object.values(toFetch).reduce(
+      (acc, [dropdownsKey]) => ({ ...acc, [dropdownsKey]: null }),
+      {}
+    )
+    setAPIFilterDropdowns(currentState => {
+      return { ...currentState, ...loadingDropdowns }
+    })
     const newDropdowns = _.cloneDeep(dropdowns)
     return Promise.all(
       Object.keys(toFetch).map(
@@ -36,7 +48,6 @@ export const loadAPIFiltersFactory = (
               .then(data => {
                 if (!Array.isArray(data)) {
                   console.error('COVE only supports response data in the shape Array<Object>')
-                  return
                 }
                 const [_key, index] = toFetch[endpoint]
                 const apiFilter = filterLookup.get(_key) as APIFilter
@@ -47,27 +58,38 @@ export const loadAPIFiltersFactory = (
                   index,
                   _filterValues,
                   sharedFilters,
-                  autoLoadFilterIndexes
+                  _autoLoadFilterIndexes
                 )
                 sharedFilters[index] = newDefaultSelectedFilter
               })
-              .catch(console.error)
+              .catch(() => {
+                dispatchErrorMessages({
+                  type: 'ADD_ERROR_MESSAGE',
+                  payload: 'There was a problem returning data. Please try again.'
+                })
+              })
               .finally(() => {
                 resolve()
               })
           })
       )
     ).then(() => {
-      const finishedLoading = sharedFilters.reduce((acc, curr, index) => {
-        if (autoLoadFilterIndexes.includes(index) && !curr.active) return false
+      const toLoad = sharedFilters.reduce((acc, curr, index) => {
+        // the filter is autoloading and it hasn't finished yet
+        if (_autoLoadFilterIndexes.includes(index) && !curr.active) {
+          if (notAllParentsSelected(getParentParams(curr, sharedFilters))) {
+            return acc
+          }
+          return [...acc, index]
+        }
         return acc
-      }, true)
-      if (finishedLoading || recursiveLimit === 0) {
+      }, [])
+      if (!toLoad.length || recursiveLimit === 0) {
         setAPIFilterDropdowns(newDropdowns)
         dispatch({ type: 'SET_SHARED_FILTERS', payload: sharedFilters })
         return sharedFilters
       } else {
-        return loadAPIFilters(sharedFilters, newDropdowns, recursiveLimit - 1)
+        return loadAPIFilters(sharedFilters, newDropdowns, loadAll, recursiveLimit - 1)
       }
     })
   }

package/src/helpers/reloadURLHelpers.ts

@@ -4,6 +4,7 @@ import { capitalizeSplitAndJoin } from '@cdc/core/helpers/cove/string'
 import { AnyVisualization, Visualization } from '@cdc/core/types/Visualization'
 import _ from 'lodash'
 import { DashboardConfig } from '../types/DashboardConfig'
+import { ConfigRow } from '../types/ConfigRow'
 
 export const isUpdateNeeded = (
   filters: SharedFilter[],
@@ -104,9 +105,15 @@ export const getVisualizationsWithFormattedData = (visualizations: Record<string
 export const filterUsedByDataUrl = (
   filter: SharedFilter,
   datasetKey: string,
-  visualizations: Record<string, AnyVisualization>
+  visualizations: Record<string, AnyVisualization>,
+  rows: ConfigRow[]
 ) => {
   if (!filter.usedBy || !filter.usedBy.length) return true
-  const vizUsingFilters = filter.usedBy?.map(vizKey => visualizations[vizKey])
+  const vizUsingFilters = filter.usedBy?.map(vizOrRowKey => visualizations[vizOrRowKey] || rows[vizOrRowKey])
+  // push any footnotes which are using the filter also
+  filter.usedBy?.forEach(vizOrRowKey => {
+    if (rows[vizOrRowKey] && rows[vizOrRowKey].footnotesId)
+      return vizUsingFilters.push(visualizations[rows[vizOrRowKey].footnotesId])
+  })
   return vizUsingFilters?.some(viz => viz?.dataKey === datasetKey)
 }

package/src/helpers/shouldLoadAllFilters.ts

@@ -0,0 +1,30 @@
+import { getQueryParam } from '@cdc/core/helpers/queryStringUtils'
+import { Visualization } from '@cdc/core/types/Visualization'
+
+export const shouldLoadAllFilters = (config, isEditorPanel): boolean => {
+  const autoLoad = Boolean(getQueryParam('cove-auto-load'))
+  const activeConfig = config.multiDashboards ? config.multiDashboards[config.activeDashboard] : config
+  const hasFilterByFileNameFunctionality = activeConfig.dashboard.sharedFilters?.some(
+    filter => filter.filterBy === 'File Name'
+  )
+  const isAutoLoadTab = Object.values(activeConfig.visualizations).reduce((acc, viz: Visualization) => {
+    if (acc === false) return acc
+    if (viz.visualizationType === 'dashboardFilters') {
+      if (viz.filterBehavior === 'Apply Button') return false
+      if (viz.autoLoad) {
+        return true
+      }
+    }
+    return acc
+  }, undefined)
+  if (autoLoad || isAutoLoadTab || hasFilterByFileNameFunctionality || isEditorPanel) {
+    const rowDataSetKeys = activeConfig.rows.map(row => row.dataKey).filter(Boolean)
+    const dataKeys = Object.values(activeConfig.visualizations)
+      .map((visualization: Visualization) => visualization.dataKey)
+      .filter(Boolean)
+      .concat(rowDataSetKeys)
+    const missingData = dataKeys.find(dataset => !config.datasets[dataset].data?.length)
+    return Boolean(missingData)
+  }
+  return false
+}

package/src/helpers/tests/apiFilterHelpers.test.ts

@@ -3,7 +3,9 @@ import {
   getToFetch,
   getFilterValues,
   getLoadingFilterMemo,
-  getParentParams
+  getParentParams,
+  setActiveNestedDropdown,
+  setActiveMultiDropdown
 } from '../apiFilterHelpers'
 import _ from 'lodash'
 import type { APIFilterDropdowns } from '../../components/DashboardFilters'
@@ -18,7 +20,7 @@ describe('getLoadingFilterMemo', () => {
     }
     const expectedOutput: APIFilterDropdowns = {
       endpoint1: { text: 'text1', value: 'value1' },
-      endpoint2: null
+      endpoint2: undefined
     }
     expect(getLoadingFilterMemo(sharedAPIFilters, apiFilterDropdowns)).toEqual(expectedOutput)
   })
@@ -36,8 +38,8 @@ describe('getLoadingFilterMemo', () => {
     const sharedAPIFilters = ['endpoint1', 'endpoint2']
     const apiFilterDropdowns: APIFilterDropdowns = {}
     const expectedOutput: APIFilterDropdowns = {
-      endpoint1: null,
-      endpoint2: null
+      endpoint1: undefined,
+      endpoint2: undefined
     }
     expect(getLoadingFilterMemo(sharedAPIFilters, apiFilterDropdowns)).toEqual(expectedOutput)
   })
@@ -280,6 +282,85 @@ describe('getToFetch', () => {
   })
 })
 
+describe('setActiveNestedDropdown', () => {
+  const dropdownOptions = [
+    { value: 'option1', subOptions: [{ value: 'subOption1' }], label: 'Option 1' },
+    { value: 'option2', subOptions: [{ value: 'subOption2' }], label: 'Option 2' }
+  ]
+
+  const sharedFilters = [
+    {
+      key: 'filter1',
+      active: null,
+      filterStyle: FILTER_STYLE.nestedDropdown,
+      subGrouping: {},
+      queuedActive: null,
+      parents: []
+    },
+    {
+      key: 'filter2',
+      active: null,
+      setByQueryParameter: 'group',
+      filterStyle: FILTER_STYLE.nestedDropdown,
+      subGrouping: { setByQueryParameter: 'subgroup' },
+      queuedActive: null,
+      parents: ['filter1']
+    }
+  ] as SharedFilter[]
+
+  it('should set the active value for a nested dropdown', () => {
+    setActiveNestedDropdown(dropdownOptions, sharedFilters[0])
+    expect(sharedFilters[0].active).toEqual('option1')
+    expect(sharedFilters[0].subGrouping.active).toEqual('subOption1')
+  })
+  it('should set the active value for nested dropdown with query parameters', () => {
+    delete window.location
+    window.location = new URL('https://www.example.com?group=option2&subgroup=subOption2')
+    setActiveNestedDropdown(dropdownOptions, sharedFilters[1])
+    expect(sharedFilters[1].active).toEqual('option2')
+    expect(sharedFilters[1].subGrouping.active).toEqual('subOption2')
+  })
+})
+
+describe('setActiveMultiDropdown', () => {
+  const dropdownOptions = [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' }
+  ]
+
+  const sharedFilters = [
+    {
+      key: 'filter1',
+      active: null,
+      filterStyle: FILTER_STYLE.multiSelect,
+      queuedActive: null,
+      parents: []
+    },
+    {
+      key: 'filter2',
+      active: null,
+      filterStyle: FILTER_STYLE.multiSelect,
+      setByQueryParameter: 'group',
+      queuedActive: null,
+      parents: ['filter1']
+    }
+  ] as SharedFilter[]
+  it('should set the active value for a multi dropdown', () => {
+    setActiveMultiDropdown(dropdownOptions, sharedFilters[0])
+    expect(sharedFilters[0].active).toEqual(['option1'])
+  })
+  it('should set the active value for a multi dropdown with queryParameters', () => {
+    delete window.location
+    window.location = new URL('https://www.example.com?group=option1&group=option2')
+    setActiveMultiDropdown(dropdownOptions, sharedFilters[1])
+    expect(sharedFilters[1].active).toEqual(['option1', 'option2'])
+    delete window.location
+    window.location = new URL('https://www.example.com?group=option1,option2')
+    setActiveMultiDropdown(dropdownOptions, sharedFilters[1])
+    expect(sharedFilters[1].active).toEqual(['option1', 'option2'])
+  })
+})
+
 describe('setAutoLoadDefaultValue', () => {
   const dropdownOptions = [
     { value: 'option1', label: 'Option 1' },

package/src/helpers/tests/loadAPIFiltersWrapper.test.ts

@@ -66,6 +66,7 @@ global.fetch = fetch
 
 describe('loadAPIFiltersFactory', () => {
   const dispatch = vi.fn()
+  const dispatchErrorMessages = vi.fn()
   const setAPIFilterDropdowns = vi.fn()
   const apiFilterDropdowns = {
     'cdc.gov/filters/Sex': [
@@ -76,7 +77,7 @@ describe('loadAPIFiltersFactory', () => {
   afterEach(() => {
     vi.restoreAllMocks()
   })
-  const loadAPIFilters = loadAPIFiltersFactory(dispatch, setAPIFilterDropdowns, [2])
+  const loadAPIFilters = loadAPIFiltersFactory(dispatch, dispatchErrorMessages, setAPIFilterDropdowns, [2])
   it('creates a function', () => {
     expect(typeof loadAPIFilters).toEqual('function')
   })
@@ -90,7 +91,7 @@ describe('loadAPIFiltersFactory', () => {
   it('loadAPIFilters() load dropdowns for children when parent is selected', async () => {
     const newSharedFilters = await loadAPIFilters(sharedFilters, apiFilterDropdowns)
     expect(dispatch).toHaveBeenCalledTimes(1)
-    expect(setAPIFilterDropdowns).toHaveBeenCalledTimes(1)
+    expect(setAPIFilterDropdowns).toHaveBeenCalledTimes(2)
 
     const expectedDropdowns = {
       'cdc.gov/filters/Quarter': [
@@ -132,7 +133,7 @@ describe('loadAPIFiltersFactory', () => {
     sharedFilters[1].active = 'Q1'
     const newSharedFilters = await loadAPIFilters(sharedFilters, apiFilterDropdowns)
     expect(dispatch).toHaveBeenCalledTimes(1)
-    expect(setAPIFilterDropdowns).toHaveBeenCalledTimes(1)
+    expect(setAPIFilterDropdowns).toHaveBeenCalledTimes(2)
 
     const expectedDropdowns = {
       'cdc.gov/filters/Quarter': [
@@ -213,8 +214,13 @@ describe('loadAPIFiltersFactory', () => {
     }
     const newSharedFilters = await loadAPIFilters(_sharedFilters, apiDropdownsLoaded)
     expect(dispatch).toHaveBeenCalledTimes(1)
-    expect(setAPIFilterDropdowns).toHaveBeenCalledTimes(1)
+    expect(setAPIFilterDropdowns).toHaveBeenCalledTimes(2)
 
     expect(newSharedFilters[2].active).toEqual(['2020', '2021'])
   })
+  it('loads All filters if loadAll is true', async () => {
+    const _sharedFilters = _.cloneDeep(sharedFilters)
+    const newSharedFilters = await loadAPIFilters(_sharedFilters, {}, true)
+    expect(newSharedFilters[2].active).toEqual([2020])
+  })
 })

package/src/helpers/tests/reloadURLHelpers.test.ts

@@ -203,30 +203,36 @@ describe('filterUsedByDataUrl', () => {
   it('should return true when filter has no usedBy property', () => {
     const filter = { datasetKey: 'dataset1' }
     const datasetKey = 'dataset1'
-    expect(filterUsedByDataUrl(filter, datasetKey, visualizations)).toBe(true)
+    expect(filterUsedByDataUrl(filter, datasetKey, visualizations, [])).toBe(true)
   })
 
   it('should return true when filter has an empty usedBy array', () => {
     const filter = { usedBy: [], datasetKey: 'dataset1' }
     const datasetKey = 'dataset1'
-    expect(filterUsedByDataUrl(filter, datasetKey, visualizations)).toBe(true)
+    expect(filterUsedByDataUrl(filter, datasetKey, visualizations, [])).toBe(true)
   })
 
   it('should return true when filter has usedBy array with visualization keys that match the datasetKey', () => {
     const filter = { usedBy: ['viz1', 'viz3'], datasetKey: 'dataset1' }
     const datasetKey = 'dataset1'
-    expect(filterUsedByDataUrl(filter, datasetKey, visualizations)).toBe(true)
+    expect(filterUsedByDataUrl(filter, datasetKey, visualizations, [])).toBe(true)
   })
 
   it('should return false when filter has usedBy array with visualization keys that do not match the datasetKey', () => {
     const filter = { usedBy: ['viz2'], datasetKey: 'dataset1' }
     const datasetKey = 'dataset1'
-    expect(filterUsedByDataUrl(filter, datasetKey, visualizations)).toBe(false)
+    expect(filterUsedByDataUrl(filter, datasetKey, visualizations, [])).toBe(false)
   })
 
   it('should return true when filter has usedBy array with a mix of matching and non-matching visualization keys', () => {
     const filter = { usedBy: ['viz1', 'viz2'], datasetKey: 'dataset1' }
     const datasetKey = 'dataset1'
-    expect(filterUsedByDataUrl(filter, datasetKey, visualizations)).toBe(true)
+    expect(filterUsedByDataUrl(filter, datasetKey, visualizations, [])).toBe(true)
+  })
+
+  it('should return true when used by a row', () => {
+    const filter = { usedBy: ['viz1', 'viz2', 2], datasetKey: 'dataset1' }
+    const datasetKey = 'dataset1'
+    expect(filterUsedByDataUrl(filter, datasetKey, visualizations, [{}, {}, { dataKey: 'dataset1' }])).toBe(true)
   })
 })

package/src/helpers/tests/shouldLoadAllFilters.test.ts

@@ -0,0 +1,117 @@
+import { shouldLoadAllFilters } from '../shouldLoadAllFilters'
+
+describe('shouldLoadAllFilters', () => {
+  it('returns false if not autoloading', () => {
+    delete window.location
+    window.location = new URL('https://www.example.com')
+    expect(shouldLoadAllFilters({ rows: [], visualizations: {}, dashboard: {} })).toBe(false)
+  })
+  it('returns true if missing data', () => {
+    delete window.location
+    window.location = new URL('https://www.example.com?cove-auto-load=true')
+    const config = {
+      dashboard: {},
+      visualizations: {
+        abc: {
+          dataKey: 'abcd'
+        }
+      },
+      rows: [],
+      datasets: {
+        abcd: {
+          data: []
+        }
+      }
+    }
+    expect(shouldLoadAllFilters(config)).toBe(true)
+    const config2 = {
+      multiDashboards: [
+        {
+          dashboard: {},
+          visualizations: {
+            abc: {
+              dataKey: 'abcd'
+            }
+          },
+          rows: [],
+          datasets: {
+            abcd: {
+              data: []
+            }
+          }
+        }
+      ],
+      datasets: {
+        abcd: {
+          data: []
+        }
+      },
+      activeDashboard: 0
+    }
+    expect(shouldLoadAllFilters(config2)).toBe(true)
+  })
+  it('returns false if no missing data', () => {
+    delete window.location
+    window.location = new URL('https://www.example.com?cove-auto-load=true')
+    const config = {
+      dashboard: {},
+      visualizations: {
+        abc: {
+          dataKey: 'abcd'
+        }
+      },
+      rows: [],
+      datasets: {
+        abcd: {
+          data: [{}]
+        }
+      }
+    }
+    expect(shouldLoadAllFilters(config)).toBe(false)
+  })
+  it('returns true when theres an autoloading filter and no apply filters', () => {
+    delete window.location
+    window.location = new URL('https://www.example.com')
+    const config = {
+      dashboard: {},
+      visualizations: {
+        abc: {
+          visualizationType: 'dashboardFilters',
+          dataKey: 'abcd',
+          autoLoad: true
+        }
+      },
+      rows: [],
+      datasets: {
+        abcd: { data: [] }
+      }
+    }
+    expect(shouldLoadAllFilters(config)).toBe(true)
+  })
+
+  it('returns false when theres an autoloading filter and apply filters', () => {
+    delete window.location
+    window.location = new URL('https://www.example.com')
+    const config = {
+      dashboard: {},
+      visualizations: {
+        abc: {
+          visualizationType: 'dashboardFilters',
+          dataKey: 'abcd',
+          autoLoad: true
+        },
+        abc2: {
+          visualizationType: 'dashboardFilters',
+          dataKey: 'abcde',
+          filterBehavior: 'Apply Button'
+        }
+      },
+      rows: [],
+      datasets: {
+        abcd: { data: [] },
+        abcde: { data: [] }
+      }
+    }
+    expect(shouldLoadAllFilters(config)).toBe(false)
+  })
+})

package/src/scss/editor-panel.scss

@@ -384,9 +384,6 @@
     font-weight: normal;
   }
 
-  .btn {
-    margin-top: 1em;
-  }
   .sort-list {
     list-style: none;
     > li {

package/src/scss/grid.scss

@@ -51,27 +51,25 @@ $red: #f74242;
   margin-top: 2em;
 }
 
-.row-menu__btn:hover .row-menu__flyout {
-  transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-  width: 180px;
-
-  li {
-    display: flex;
-  }
 
-  li + li {
-    margin-left: 0.3em;
-  }
-}
 
 .row-menu__flyout {
+  background-color: var(--blue);
+  $blue: #005eaa;
+  background-color: #c2c2c2;
+  border-radius: 0.2em 0.2em 0 0;
+  outline: none;
+  
+  padding: 0.2em 0.3em;
+  fill: #fff;
   list-style: none;
   display: flex;
   justify-content: flex-start;
   overflow: hidden;
+  transition: background-color 300ms cubic-bezier(0.16, 1, 0.3, 1);
   transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1);
   z-index: 1;
-  width: 25px;
+  width: 35px;
 
   li:not(.current) {
     display: none;
@@ -89,6 +87,18 @@ $red: #f74242;
   .row-menu__list--item {
     display: flex;
   }
+  &:hover {
+    transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    width: 180px;
+    background-color: lighten($blue, 8%);
+    li {
+      display: flex;
+    }
+  
+    li + li {
+      margin-left: 0.3em;
+    }
+  }
 }
 
 .row-menu__btn {
@@ -96,7 +106,6 @@ $red: #f74242;
   border-radius: 0.2em 0.2em 0 0;
   outline: none;
   transition: background-color 300ms cubic-bezier(0.16, 1, 0.3, 1);
-  cursor: pointer;
   padding: 0.2em 0.3em;
   display: flex;
   fill: #fff;
@@ -294,11 +303,6 @@ $red: #f74242;
   }
 }
 
-.btn.add-row {
-  font-size: 1.1em;
-  width: 100%;
-}
-
 .btn--fluid {
   @extend .btn;
   width: 100%;
@@ -359,11 +363,6 @@ $red: #f74242;
 
   &:hover {
     .row-menu .row-menu__btn {
-      background-color: var(--blue);
-      $blue: #005eaa;
-      &:hover {
-        background-color: lighten($blue, 8%);
-      }
 
       &.row-menu__btn--edit {
         background-color: transparent;

package/src/scss/main.scss

@@ -138,21 +138,6 @@
   }
 
   .btn {
-    background: #005eaa;
-    color: #fff;
-    border: 0;
-    padding: 0.4em 0.8em;
-    font-size: 0.9em;
-    display: block;
-    border-radius: 5px;
-    transition: 0.1s all;
-    cursor: pointer;
-
-    &[disabled] {
-      opacity: 0.5;
-      z-index: -1;
-      position: relative;
-    }
 
     // Expand and Collapse Buttons for Multiviz Dashboard
     &.expand-collapse-buttons {
@@ -260,15 +245,6 @@
     width: 100%;
   }
 
-  .cove-dashboard-filters-container {
-    z-index: 5;
-  }
-
-  .cove-dashboard-filters {
-    display: inline-flex;
-    margin: 1em;
-  }
-
   @include breakpointClass(md) {
     .dashboard-row {
       flex-direction: row;
@@ -301,9 +277,6 @@
     }
   }
 
-  .dashboard-filters-section {
-    margin: 0 0 1em;
-  }
   .builder-grid .editor-heading {
     position: relative;
     right: -2em;

package/src/store/dashboard.reducer.ts

@@ -105,8 +105,14 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
       _.remove(newMultiDashboards, (_, index) => {
         return index === action.payload
       })
+      const config = {
+        ...state.config,
+        multiDashboards: newMultiDashboards,
+        ...newMultiDashboards[0],
+        activeDashboard: 0
+      }
       if (newMultiDashboards.length === 0) return { ...state, config: _.omit(state.config, 'multiDashboards') }
-      return applyMultiDashboards(state, newMultiDashboards)
+      return applyMultiDashboards({ ...state, config }, newMultiDashboards)
     }
     case 'RENAME_DASHBOARD_TAB': {
       const newMultiDashboards = state.config.multiDashboards.map(dashboard => {
@@ -144,7 +150,8 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
     case 'SWITCH_CONFIG': {
       const slot = action.payload
       const newConfigFields = state.config.multiDashboards[slot]
-      return { ...state, config: { ...state.config, ...newConfigFields, activeDashboard: slot } }
+      const _newDatasets = _.cloneDeep(state.data)
+      return { ...state, data: _newDatasets, config: { ...state.config, ...newConfigFields, activeDashboard: slot } }
     }
     case 'TOGGLE_ROW': {
       const { rowIndex, colIndex } = action.payload

package/src/store/errorMessage/errorMessage.actions.ts

@@ -0,0 +1,7 @@
+import { Action } from '@cdc/core/types/Action'
+
+type ADD_ERROR_MESSAGE = Action<'ADD_ERROR_MESSAGE', string>
+type DISMISS_ERROR_MESSAGE = Action<'DISMISS_ERROR_MESSAGE', number>
+
+type errorMessagesActions = ADD_ERROR_MESSAGE | DISMISS_ERROR_MESSAGE
+export default errorMessagesActions

package/src/store/errorMessage/errorMessage.reducer.ts

@@ -0,0 +1,24 @@
+import _ from 'lodash'
+import errorMessagesActions from './errorMessage.actions'
+import { devToolsWrapper } from '@cdc/core/helpers/withDevTools'
+
+export type errorMessagesState = string[]
+
+const reducer = (state: errorMessagesState, action: errorMessagesActions): errorMessagesState => {
+  switch (action.type) {
+    case 'ADD_ERROR_MESSAGE': {
+      const message = action.payload
+      return [...state, message]
+    }
+
+    case 'DISMISS_ERROR_MESSAGE': {
+      const messages = [...state]
+      _.remove(messages, (_, index) => {
+        return index === action.payload
+      })
+      return messages
+    }
+  }
+}
+
+export default devToolsWrapper<errorMessagesState, errorMessagesActions>(reducer)