@cdc/dashboard 4.24.12 → 4.25.2-25

package/src/components/Widget.tsx

@@ -33,12 +33,13 @@ const labelHash = {
 
 type WidgetConfig = AnyVisualization & { rowIdx: number; colIdx: number }
 type WidgetProps = {
+  title: string
   widgetConfig?: WidgetConfig
   addVisualization?: Function
   type: string
 }
 
-const Widget = ({ widgetConfig, addVisualization, type }: WidgetProps) => {
+const Widget = ({ title, widgetConfig, addVisualization, type }: WidgetProps) => {
   const { overlay } = useGlobalContext()
   const { config, data } = useContext(DashboardContext)
   const dispatch = useContext(DashboardDispatchContext)
@@ -74,9 +75,10 @@ const Widget = ({ widgetConfig, addVisualization, type }: WidgetProps) => {
 
   const deleteWidget = () => {
     if (!widgetConfig) return
+
     dispatch({
       type: 'DELETE_WIDGET',
-      payload: { rowIdx: widgetConfig.rowIdx, colIdx: widgetConfig.colIdx, uid: widgetConfig.uid }
+      payload: { uid: widgetConfig.uid as string }
     })
   }
 
@@ -102,7 +104,10 @@ const Widget = ({ widgetConfig, addVisualization, type }: WidgetProps) => {
 
   const editWidget = () => {
     if (!widgetConfig) return
-    dispatch({ type: 'UPDATE_VISUALIZATION', payload: { vizKey: widgetConfig.uid, configureData: { editing: true } } })
+    dispatch({
+      type: 'UPDATE_VISUALIZATION',
+      payload: { vizKey: widgetConfig.uid as string, configureData: { editing: true } }
+    })
     loadSampleData()
   }
 
@@ -156,6 +161,7 @@ const Widget = ({ widgetConfig, addVisualization, type }: WidgetProps) => {
           )}
           {iconHash[type]}
           <span>{labelHash[type]}</span>
+          <span>{title}</span>
           {widgetConfig?.newViz && type !== 'dashboardFilters' && (
             <span onClick={editWidget} className='config-needed'>
               Configuration needed

package/src/helpers/addValuesToDashboardFilters.ts

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
 import { SharedFilter } from '../types/SharedFilter'
+import { handleSorting } from '@cdc/core/components/Filters'
 
 // Gets filter values from dataset
 const generateValuesForFilter = (columnName: string, data: Record<string, any[]>) => {
@@ -38,8 +39,8 @@ export const addValuesToDashboardFilters = (
     if (filter.type === 'urlfilter') return filter
     const filterCopy = _.cloneDeep(filter)
     const filterValues = generateValuesForFilter(getSelector(filter), data)
-
     filterCopy.values = filterValues
+
     if (filterValues.length > 0) {
       const queryStringFilterValue = getQueryStringFilterValue(filterCopy)
       if (queryStringFilterValue) {
@@ -49,11 +50,11 @@ export const addValuesToDashboardFilters = (
         const active: string[] = Array.isArray(filterCopy.active) ? filterCopy.active : [filterCopy.active]
         filterCopy.active = active.filter(val => defaultValues.includes(val))
       } else {
-        const defaultLabel = filters.find(filter => filter.resetLabel)
-        const defaultValue = defaultLabel ? defaultLabel.resetLabel : filterCopy.values[0] || filterCopy.active
-        filterCopy.active = defaultValue
+        const hasResetLabel = filters.find(filter => filter.resetLabel)
+        const defaultValue = hasResetLabel ? hasResetLabel.resetLabel : filterCopy.active || filterCopy.values[0]
+        filterCopy.active = filterCopy.defaultValue || defaultValue
       }
     }
-    return filterCopy
+    return handleSorting(filterCopy)
   })
 }

package/src/helpers/apiFilterHelpers.ts

@@ -134,10 +134,16 @@ export const setAutoLoadDefaultValue = (
 ): SharedFilter => {
   const sharedFiltersCopy = _.cloneDeep(sharedFilters)
   const sharedFilter = _.cloneDeep(sharedFiltersCopy[sharedFilterIndex])
-  if (!autoLoadFilterIndexes.length || !dropdownOptions?.length) return sharedFilter // no autoLoading happening
-  const hasQueryParameter = sharedFilter.setByQueryParameter
-    ? Boolean(getQueryParam(sharedFilter.setByQueryParameter))
-    : false
+  const defaultQueryParamValue = getQueryParam(sharedFilter?.setByQueryParameter)
+  const hasQueryParameter = sharedFilter.setByQueryParameter ? defaultQueryParamValue !== undefined : false
+  if (!autoLoadFilterIndexes.length || !dropdownOptions?.length) {
+    if (hasQueryParameter && sharedFilter.apiFilter) {
+      const subQueryValue = getQueryParam(sharedFilter.subGrouping?.setByQueryParameter)
+      const isNestedDropdown = subQueryValue !== undefined
+      sharedFilter.queuedActive = isNestedDropdown ? [defaultQueryParamValue, subQueryValue] : defaultQueryParamValue
+    }
+    return sharedFilter // no autoLoading happening
+  }
   if (autoLoadFilterIndexes.includes(sharedFilterIndex) || hasQueryParameter) {
     const filterParents = sharedFiltersCopy.filter(f => sharedFilter.parents?.includes(f.key))
     const notAllParentFiltersSelected = filterParents.some(p => !(p.active || p.queuedActive))
@@ -148,11 +154,10 @@ export const setAutoLoadDefaultValue = (
       setActiveNestedDropdown(dropdownOptions, sharedFilter)
     } else {
       const defaultValue = dropdownOptions[0]?.value
-      const defaultQueryParamValue = getQueryParam(sharedFilter?.setByQueryParameter)
       if (!sharedFilter.active) {
         sharedFilter.active = defaultQueryParamValue || defaultValue
       } else {
-        const currentOption = dropdownOptions.find(option => option.value === sharedFilter.active)
+        const currentOption = dropdownOptions.find(option => option.value == sharedFilter.active) // loose equality required: 2017 should equal '2017'
         sharedFilter.active = currentOption ? currentOption.value : defaultValue
       }
     }

package/src/helpers/changeFilterActive.ts

@@ -1,6 +1,11 @@
 import _ from 'lodash'
 import { FilterBehavior } from '../helpers/FilterBehavior'
-import { getQueryParams, updateQueryString } from '@cdc/core/helpers/queryStringUtils'
+import {
+  getQueryParams,
+  removeQueryParam,
+  updateQueryParam,
+  updateQueryString
+} from '@cdc/core/helpers/queryStringUtils'
 import { SharedFilter } from '../types/SharedFilter'
 import { DashboardFilters } from '../types/DashboardFilters'
 import { FILTER_STYLE } from '../types/FilterStyles'
@@ -12,9 +17,11 @@ const handleChildren = (sharedFilters: SharedFilter[], parentIndex: number) => {
     .filter(i => i !== null)
   if (childFilterIndexes.length) {
     childFilterIndexes.forEach(filterIndex => {
-      sharedFilters[filterIndex].active = ''
-      if (sharedFilters[filterIndex].subGrouping) {
-        sharedFilters[filterIndex].subGrouping.active = ''
+      const cur = sharedFilters[filterIndex]
+      if (cur.setByQueryParameter) removeQueryParam(cur.setByQueryParameter)
+      cur.active = ''
+      if (cur.subGrouping) {
+        cur.subGrouping.active = ''
       }
     })
   }
@@ -45,7 +52,13 @@ export const changeFilterActive = (
         updateQueryString(queryParams)
       }
     }
+  } else if (currentFilter.subGrouping) {
+    updateQueryParam(currentFilter.setByQueryParameter, value[0])
+    updateQueryParam(currentFilter.subGrouping.setByQueryParameter, value[1])
+    sharedFiltersCopy[filterIndex].queuedActive = value
   } else {
+    const paramVal = Array.isArray(value) ? value.join(',') : value
+    if (currentFilter.setByQueryParameter) updateQueryParam(currentFilter.setByQueryParameter, paramVal)
     sharedFiltersCopy[filterIndex].queuedActive = value
   }
   return [sharedFiltersCopy, handleChildren(sharedFiltersCopy, filterIndex)]

package/src/helpers/getFilteredData.ts

@@ -6,11 +6,18 @@ import { getFormattedData } from './getFormattedData'
 import { getVizKeys } from './getVizKeys'
 
 export const getApplicableFilters = (dashboard: Dashboard, key: string | number): false | SharedFilter[] => {
-  const c = dashboard.sharedFilters?.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(`${key}`) !== -1)
+  const c = dashboard.sharedFilters?.filter(
+    sharedFilter =>
+      (sharedFilter.usedBy && sharedFilter.usedBy.indexOf(`${key}`) !== -1) || sharedFilter.usedBy?.indexOf(key) !== -1
+  )
   return c?.length > 0 ? c : false
 }
 
-export const getFilteredData = (state: DashboardState, initialFilteredData?: Record<string, any>, dataOverride?: Object) => {
+export const getFilteredData = (
+  state: DashboardState,
+  initialFilteredData?: Record<string, any>,
+  dataOverride?: Object
+) => {
   const newFilteredData = initialFilteredData || {}
   const { config } = state
   getVizKeys(config).forEach(key => {
@@ -18,7 +25,8 @@ export const getFilteredData = (state: DashboardState, initialFilteredData?: Rec
     if (applicableFilters) {
       const { dataKey, data, dataDescription } = config.visualizations[key]
       const _data = (dataOverride || state.data)[dataKey] || data
-      const formattedData = dataOverride?.[dataKey] || (dataDescription ? getFormattedData(_data, dataDescription) : _data)
+      const formattedData =
+        dataOverride?.[dataKey] || (dataDescription ? getFormattedData(_data, dataDescription) : _data)
 
       newFilteredData[key] = filterData(applicableFilters, formattedData)
     }
@@ -29,7 +37,8 @@ export const getFilteredData = (state: DashboardState, initialFilteredData?: Rec
       const { dataKey, data, dataDescription } = row
       const _data = (dataOverride || state.data)[dataKey] || data
       if (applicableFilters) {
-        const formattedData = dataOverride?.[dataKey] ?? dataDescription ? getFormattedData(_data, dataDescription) : _data
+        const formattedData =
+          dataOverride?.[dataKey] ?? dataDescription ? getFormattedData(_data, dataDescription) : _data
 
         newFilteredData[index] = filterData(applicableFilters, formattedData)
       } else {

package/src/helpers/getUpdateConfig.ts

@@ -31,7 +31,7 @@ export const getUpdateConfig =
             const defaultValues = _filter.pivot ? _filter.values : _filter.values[0]
 
             const queryStringFilterValue = getQueryStringFilterValue(_filter)
-            if(queryStringFilterValue){
+            if (queryStringFilterValue) {
               _filter.active = queryStringFilterValue
             } else {
               _filter.active = _filter.active || defaultValues
@@ -57,19 +57,26 @@ export const getUpdateConfig =
       visualizationKeys.forEach(visualizationKey => {
         const row = vizRowColumnLocator[visualizationKey]
         if (newConfig.rows[row]?.datakey) return // data configured on the row level
-        const applicableFilters = newConfig.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(visualizationKey) !== -1)
+        const applicableFilters = newConfig.dashboard.sharedFilters.filter(
+          sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(visualizationKey) !== -1
+        )
 
         if (applicableFilters.length > 0) {
           const visualization = newConfig.visualizations[visualizationKey]
           const _newConfigDataSet = newConfig.datasets[visualization.dataKey]
-          const formattedData = getFormattedData(_newConfigDataSet?.data || visualization.data, visualization.dataDescription)
+          const formattedData = getFormattedData(
+            _newConfigDataSet?.data || visualization.data,
+            visualization.dataDescription
+          )
           const _data = formattedData || (dataOverride || state.data)[visualization.dataKey]
           newFilteredData[visualizationKey] = filterData(applicableFilters, _data)
         }
       })
 
       newConfig.rows.forEach((row, rowIndex) => {
-        const applicableFilters = newConfig.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(rowIndex) !== -1)
+        const applicableFilters = newConfig.dashboard.sharedFilters.filter(
+          sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(rowIndex) !== -1
+        )
 
         if (applicableFilters.length > 0) {
           const formattedData = getFormattedData(row.data, row.dataDescription)

package/src/helpers/loadAPIFilters.ts

@@ -42,7 +42,7 @@ export const loadAPIFiltersFactory = (
     return Promise.all(
       Object.keys(toFetch).map(
         endpoint =>
-          new Promise<void>(resolve => {
+          new Promise<{ error: boolean }>(resolve => {
             fetch(endpoint)
               .then(resp => resp.json())
               .then(data => {
@@ -67,13 +67,15 @@ export const loadAPIFiltersFactory = (
                   type: 'ADD_ERROR_MESSAGE',
                   payload: 'There was a problem returning data. Please try again.'
                 })
+                resolve({ error: true })
               })
               .finally(() => {
-                resolve()
+                resolve({ error: false })
               })
           })
       )
-    ).then(() => {
+    ).then(responses => {
+      const hasError = responses.some(({ error }) => error)
       const toLoad = sharedFilters.reduce((acc, curr, index) => {
         // the filter is autoloading and it hasn't finished yet
         if (_autoLoadFilterIndexes.includes(index) && !curr.active) {
@@ -84,7 +86,7 @@ export const loadAPIFiltersFactory = (
         }
         return acc
       }, [])
-      if (!toLoad.length || recursiveLimit === 0) {
+      if (hasError || !toLoad.length || recursiveLimit === 0) {
         setAPIFilterDropdowns(newDropdowns)
         dispatch({ type: 'SET_SHARED_FILTERS', payload: sharedFilters })
         return sharedFilters

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

@@ -0,0 +1,56 @@
+import { SharedFilter } from '../../types/SharedFilter'
+import { updateChildFilters } from '../updateChildFilters'
+
+describe('updateChildFilters', () => {
+  it('should filter data based on the provided filters', () => {
+    const filters = [
+      {
+        tier: 1,
+        columnName: 'name',
+        active: 'John',
+        key: 'Parent Filter',
+        values: ['John', 'Kelly', 'Norman', 'Jane']
+      },
+      {
+        tier: 2,
+        columnName: 'lastName',
+        active: '',
+        key: 'Child Filter',
+        parents: 'Parent Filter',
+        values: ['Deer', 'Roberts']
+      }
+    ] as SharedFilter[]
+    const data = {
+      vizKey: [
+        [
+          { name: 'John', lastName: 'Deer' },
+          { name: 'John', lastName: 'Roberts' },
+          { name: 'Kelly', lastName: 'Adams' },
+          { name: 'Norman', lastName: 'Sally' },
+          { name: 'Jane', lastName: 'Gorman' }
+        ]
+      ]
+    }
+
+    let exprectedResult = [
+      {
+        tier: 1,
+        columnName: 'name',
+        active: 'John',
+        key: 'Parent Filter',
+        values: ['John', 'Kelly', 'Norman', 'Jane']
+      },
+      {
+        tier: 2,
+        columnName: 'lastName',
+        active: '',
+        key: 'Child Filter',
+        parents: 'Parent Filter',
+        values: ['Deer', 'Roberts'] // updated values only
+      }
+    ]
+    const result = updateChildFilters(filters, data)
+
+    expect(result).toEqual(exprectedResult)
+  })
+})

package/src/helpers/updateChildFilters.ts

@@ -0,0 +1,50 @@
+import { SharedFilter } from '../types/SharedFilter'
+import _ from 'lodash'
+
+export const updateChildFilters = (newSharedFilters: SharedFilter[], data: Record<string, any>): SharedFilter[] => {
+  const dataSet = Object.values(data).flat()
+
+  // Find indexes of all child filters
+  const childFilterIndexes: number[] = newSharedFilters
+    .map((filter, index) => (filter.type === 'datafilter' && filter.parents ? index : -1))
+    .filter(index => index !== -1)
+  if (childFilterIndexes.length === 0) return newSharedFilters
+
+  // deep copy of the shared filters
+  const updatedFilters = _.cloneDeep(newSharedFilters)
+
+  // Update each child filter
+  childFilterIndexes.forEach(childIndex => {
+    const childFilter: SharedFilter = newSharedFilters[childIndex]
+    const parentFilter: SharedFilter = newSharedFilters.find(
+      filter => String(childFilter.parents) === String(filter.key)
+    )
+
+    if (parentFilter) {
+      // Filter dataset based on parent's active value
+      const parentsActiveValues: string[] = dataSet.filter((d: Record<string, any>) => {
+        return parentFilter.active?.includes(d[parentFilter.columnName])
+      })
+      // Get unique active values for the child filter
+      const childFilterValues = _.uniq(parentsActiveValues.map(d => d[childFilter.columnName]).filter(Boolean))
+
+      // Update the child filter if unique values exist
+      if (childFilterValues.length > 0) {
+        const isChildMultiSelect = childFilter.filterStyle === 'multi-select'
+        const activeValue = isChildMultiSelect
+          ? childFilterValues
+          : childFilter.active
+          ? childFilter.active
+          : childFilter.defaultValue
+          ? childFilter.defaultValue
+          : childFilterValues[0]
+        updatedFilters[childIndex] = {
+          ...childFilter,
+          values: childFilterValues,
+          active: activeValue
+        }
+      }
+    }
+  })
+  return updatedFilters
+}

package/src/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import MultiDashboardWrapper from './CdcDashboard'
+import '@cdc/core/styles/cove-main.scss'
 import './coreStyles_dashboard.scss'
 
 let isEditor = window.location.href.includes('editor=true')

package/src/scss/main.scss

@@ -138,7 +138,6 @@
   }
 
   .btn {
-
     // Expand and Collapse Buttons for Multiviz Dashboard
     &.expand-collapse-buttons {
       background-color: var(--lightestGray);
@@ -163,13 +162,6 @@
     margin: 15px 0 0;
   }
 
-  .data-table-container {
-    margin: 20px 0 0;
-    &.download-link-above {
-      margin: 0;
-    }
-  }
-
   .collapsable-multiviz-container {
     position: relative;
     border: var(--lightGray) 1px solid;
@@ -193,16 +185,12 @@
         position: relative;
       }
       @include breakpoint(xs) {
-        $font-small: 0.7em;
-        font-size: $font-small + 0.2em;
+        font-size: 0.9em;
       }
     }
     .data-table-heading {
       display: none;
     }
-    .table-container {
-      margin: 0 1em;
-    }
   }
 
   .dashboard-download-link {
@@ -283,8 +271,6 @@
   }
 
   .cdc-dashboard-inner-container {
-    margin: 1em;
-
     &.is-editor {
       margin-top: 7em;
     }

package/src/store/dashboard.actions.ts

@@ -9,12 +9,12 @@ import { SharedFilter } from '../types/SharedFilter'
 type ADD_FOOTNOTE = Action<'ADD_FOOTNOTE', { id: string; rowIndex: number; config: Footnotes }>
 type ADD_VISUALIZATION = Action<'ADD_VISUALIZATION', { rowIdx: number; colIdx: number; newViz: AnyVisualization }>
 type APPLY_CONFIG = Action<'APPLY_CONFIG', [Config, Object?]>
-type DELETE_WIDGET = Action<'DELETE_WIDGET', { rowIdx: number; colIdx: number; uid: string }>
+type DELETE_WIDGET = Action<'DELETE_WIDGET', { uid: string }>
 type MOVE_VISUALIZATION = Action<
   'MOVE_VISUALIZATION',
   { rowIdx: number; colIdx: number; widget: AnyVisualization & { rowIdx: number; colIdx: number } }
 >
-type SET_CONFIG = Action<'SET_CONFIG', Partial<Config>>
+type SET_CONFIG = Action<'SET_CONFIG', Partial<Config> & { activeDashboard?: number }>
 type UPDATE_CONFIG = Action<'UPDATE_CONFIG', [Config, Object?]>
 type SET_DATA = Action<'SET_DATA', Record<string, any[]>>
 type SET_LOADING = Action<'SET_LOADING', boolean>

package/src/store/dashboard.reducer.ts

@@ -1,23 +1,23 @@
 import _ from 'lodash'
 import { getUpdateConfig } from '../helpers/getUpdateConfig'
-import { MultiDashboardConfig } from '../types/MultiDashboard'
+import { MultiDashboard, MultiDashboardConfig } from '../types/MultiDashboard'
 import DashboardActions from './dashboard.actions'
 import { devToolsWrapper } from '@cdc/core/helpers/withDevTools'
 import { Tab } from '../types/Tab'
-import { DashboardConfig } from '../types/DashboardConfig'
+import { Dashboard } from '../types/Dashboard'
 import { ConfigRow } from '../types/ConfigRow'
 import { AnyVisualization } from '@cdc/core/types/Visualization'
 import { initialState } from '../DashboardContext'
 
 type BlankMultiConfig = {
-  dashboard: Partial<DashboardConfig>
+  dashboard: Partial<Dashboard>
   rows: Partial<ConfigRow>[]
   visualizations: Record<string, Object>
   table: Object
 }
 
 const createBlankDashboard: () => BlankMultiConfig = () => ({
-  dashboard: {},
+  dashboard: { sharedFilters: [] },
   rows: [{ columns: [{ width: 12 }] }],
   visualizations: {},
   table: {
@@ -44,7 +44,10 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
       const newRows = state.config.rows.map((row, i) => (i === rowIndex ? { ...row, footnotesId: id } : row))
       return {
         ...state,
-        config: { ...state.config, rows: newRows, visualizations: { ...state.config.visualizations, [id]: config } }
+        config: saveMultiChanges(
+          { ...state.config, rows: newRows, visualizations: { ...state.config.visualizations, [id]: config } },
+          state.config.activeDashboard
+        )
       }
     }
     case 'ADD_NEW_DASHBOARD': {
@@ -55,7 +58,7 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
     }
     case 'UPDATE_CONFIG': {
       const [config, filteredData] = getUpdateConfig(state)(...action.payload)
-      return { ...state, config, filteredData }
+      return { ...state, config: saveMultiChanges(config, state.config.activeDashboard), filteredData }
     }
     case 'APPLY_CONFIG': {
       // using advanced editor. Wipe all existing data and apply new config
@@ -68,10 +71,18 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
           if (data) acc[key] = data
           return acc
         }, {})
-      return { ...initialState, config, filteredData, data }
+      return { ...initialState, config: saveMultiChanges(config, state.config.activeDashboard), filteredData, data }
     }
     case 'SET_CONFIG': {
-      return { ...state, config: { ...state.config, ...action.payload } }
+      if (
+        action.payload.activeDashboard === undefined ||
+        state.config.activeDashboard === action.payload.activeDashboard
+      ) {
+        return {
+          ...state,
+          config: saveMultiChanges({ ...state.config, ...action.payload }, action.payload.activeDashboard)
+        }
+      } else return state // ignore SET_CONFIG calls that have the wrong activeDashboard due to async api fetching
     }
     case 'SET_DATA': {
       return { ...state, data: action.payload }
@@ -88,14 +99,10 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
     case 'SET_SHARED_FILTERS': {
       const newSharedFilters = action.payload
       const newDashboardConfig = { ...state.config.dashboard, sharedFilters: newSharedFilters }
-      if (state.config.multiDashboards) {
-        const saveSlot = state.config.activeDashboard
-        const newMultiDashboards = _.cloneDeep(state.config.multiDashboards)
-        newMultiDashboards[saveSlot].dashboard = newDashboardConfig
-        const newState = applyMultiDashboards(state, newMultiDashboards)
-        return { ...newState, config: { ...newState.config, dashboard: newDashboardConfig } }
+      return {
+        ...state,
+        config: saveMultiChanges({ ...state.config, dashboard: newDashboardConfig }, state.config.activeDashboard)
       }
-      return { ...state, config: { ...state.config, dashboard: newDashboardConfig } }
     }
     case 'SET_TAB_SELECTED': {
       return { ...state, tabSelected: action.payload }
@@ -138,7 +145,8 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
       const label = newMultiDashboards[saveSlot].label
       const toSave = _.pick(state.config, ['dashboard', 'visualizations', 'rows'])
       newMultiDashboards[saveSlot] = { ...toSave, label }
-      return applyMultiDashboards(state, newMultiDashboards)
+      const newConfig = saveMultiChanges(state.config, saveSlot)
+      return { ...state, config: newConfig }
     }
     case 'INITIALIZE_MULTIDASHBOARDS': {
       const label = 'New Dashboard 1'
@@ -171,7 +179,10 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
       newRows[rowIdx].columns[colIdx].widget = vizKey
       return {
         ...state,
-        config: { ...state.config, visualizations: { ...state.config.visualizations, [vizKey]: newViz }, rows: newRows }
+        config: saveMultiChanges(
+          { ...state.config, visualizations: { ...state.config.visualizations, [vizKey]: newViz }, rows: newRows },
+          state.config.activeDashboard
+        )
       }
     }
     case 'MOVE_VISUALIZATION': {
@@ -181,7 +192,7 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
       newRows[rowIdx].columns[colIdx].widget = widget.uid
       return {
         ...state,
-        config: { ...state.config, rows: newRows }
+        config: saveMultiChanges({ ...state.config, rows: newRows }, state.config.activeDashboard)
       }
     }
     case 'UPDATE_VISUALIZATION': {
@@ -189,7 +200,10 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
       const updatedViz = { ...state.config.visualizations[vizKey], ...configureData } as AnyVisualization
       return {
         ...state,
-        config: { ...state.config, visualizations: { ...state.config.visualizations, [vizKey]: updatedViz } }
+        config: saveMultiChanges(
+          { ...state.config, visualizations: { ...state.config.visualizations, [vizKey]: updatedViz } },
+          state.config.activeDashboard
+        )
       }
     }
     case 'UPDATE_ROW': {
@@ -200,12 +214,11 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
         }
         return row
       })
-      return { ...state, config: { ...state.config, rows: newRows } }
+      return { ...state, config: saveMultiChanges({ ...state.config, rows: newRows }, state.config.activeDashboard) }
     }
     case 'DELETE_WIDGET': {
-      const { rowIdx, colIdx, uid } = action.payload
+      const { uid } = action.payload
       const newRows = _.cloneDeep(state.config.rows)
-      newRows[rowIdx].columns[colIdx].widget = null
       const newVisualizations = _.cloneDeep(state.config.visualizations)
       delete newVisualizations[uid]
       const newSharedFilters = _.cloneDeep(state.config.dashboard.sharedFilters)
@@ -216,14 +229,23 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
           }
         })
       }
+
+      const filteredRows = _.map(newRows, row => ({
+        ...row,
+        columns: _.filter(row.columns, column => column.widget !== uid)
+      }))
+
       return {
         ...state,
-        config: {
-          ...state.config,
-          dashboard: { ...state.config.dashboard, sharedFilters: newSharedFilters },
-          visualizations: newVisualizations,
-          rows: newRows
-        }
+        config: saveMultiChanges(
+          {
+            ...state.config,
+            dashboard: { ...state.config.dashboard, sharedFilters: newSharedFilters },
+            visualizations: newVisualizations,
+            rows: filteredRows
+          },
+          state.config.activeDashboard
+        )
       }
     }
     default:
@@ -231,7 +253,16 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
   }
 }
 
-const applyMultiDashboards = (state, newMultiDashboards) => ({
+const saveMultiChanges = (config: MultiDashboardConfig, saveSlot?: number): MultiDashboardConfig => {
+  if (saveSlot === undefined || !config.multiDashboards) return config
+  const newMultiDashboards = [...config.multiDashboards]
+  const label = newMultiDashboards[saveSlot].label
+  const toSave = _.pick(config, ['dashboard', 'visualizations', 'rows'])
+  newMultiDashboards[saveSlot] = { ...toSave, label }
+  return { ...config, multiDashboards: newMultiDashboards }
+}
+
+const applyMultiDashboards = (state: DashboardState, newMultiDashboards: MultiDashboard[]): DashboardState => ({
   ...state,
   config: { ...state.config, multiDashboards: newMultiDashboards }
 })

package/src/types/DashboardConfig.ts

@@ -5,6 +5,7 @@ import { ConfigRow } from './ConfigRow'
 import { AnyVisualization } from '@cdc/core/types/Visualization'
 import { Table } from '@cdc/core/types/Table'
 import { Dashboard } from './Dashboard'
+import { Version } from '@cdc/core/types/Version'
 
 export type DashboardConfig = DataSet & {
   dashboard: Dashboard
@@ -18,4 +19,5 @@ export type DashboardConfig = DataSet & {
   runtime: Runtime
   downloadImageButton: boolean
   downloadPdfButton: boolean
+  version: Version
 }