@cdc/dashboard 4.24.10 → 4.24.11

package/src/components/Header/Header.tsx

@@ -6,6 +6,7 @@ import './index.scss'
 import MultiConfigTabs from '../MultiConfigTabs'
 import { Tab } from '../../types/Tab'
 import _ from 'lodash'
+import { getVizRowColumnLocator } from '../../helpers/getVizRowColumnLocator'
 
 type HeaderProps = {
   back?: any
@@ -16,7 +17,7 @@ type HeaderProps = {
 const Header = (props: HeaderProps) => {
   const tabs: Tab[] = ['Dashboard Description', 'Data Table Settings', 'Dashboard Preview']
   const { visualizationKey, subEditor } = props
-  const { config, setParentConfig, tabSelected } = useContext(DashboardContext)
+  const { config, setParentConfig, tabSelected, data } = useContext(DashboardContext)
   if (!config) return null
   const dispatch = useContext(DashboardDispatchContext)
   const back = () => {
@@ -24,6 +25,22 @@ const Header = (props: HeaderProps) => {
     const newConfig = _.cloneDeep(config)
     newConfig.visualizations[visualizationKey].editing = false
     dispatch({ type: 'SET_CONFIG', payload: newConfig })
+
+    // the Widget component will do a data fetch if no data is available for the visualization
+    // this is intended to help visualization developers.
+    type SampleData = Record<string, { sample: boolean }> & Object[]
+    if (Object.values(data).some((d: SampleData) => d.sample)) {
+      const sampleDataRemoved = Object.keys(data).reduce((acc, key) => {
+        if ((data[key] as SampleData).sample) {
+          acc[key] = []
+        } else {
+          acc[key] = data[key]
+        }
+        return acc
+      }, {})
+
+      dispatch({ type: 'SET_DATA', payload: sampleDataRemoved })
+    }
   }
 
   const changeConfigValue = (parentObj, key, value) => {
@@ -81,10 +98,18 @@ const Header = (props: HeaderProps) => {
         <div className='heading-1'>
           Dashboard Editor{' '}
           <span className='small'>
-            <input type='checkbox' onChange={handleCheck} checked={multiInitialized} disabled={multiInitialized} /> make multidashboard
+            <input type='checkbox' onChange={handleCheck} checked={multiInitialized} disabled={multiInitialized} /> make
+            multidashboard
           </span>
           <br />
-          {<input type='text' placeholder='Enter Dashboard Name Here' defaultValue={config.dashboard?.title} onChange={e => changeConfigValue('dashboard', 'title', e.target.value)} />}
+          {
+            <input
+              type='text'
+              placeholder='Enter Dashboard Name Here'
+              defaultValue={config.dashboard?.title}
+              onChange={e => changeConfigValue('dashboard', 'title', e.target.value)}
+            />
+          }
         </div>
       )}
       {!subEditor && (
@@ -106,18 +131,34 @@ const Header = (props: HeaderProps) => {
             })}
           </ul>
           <div className='heading-body'>
-            {tabSelected === 'Dashboard Description' && <input type='text' className='description-input' placeholder='Type a dashboard description here.' defaultValue={config.dashboard?.description} onChange={e => changeConfigValue('dashboard', 'description', e.target.value)} />}
+            {tabSelected === 'Dashboard Description' && (
+              <input
+                type='text'
+                className='description-input'
+                placeholder='Type a dashboard description here.'
+                defaultValue={config.dashboard?.description}
+                onChange={e => changeConfigValue('dashboard', 'description', e.target.value)}
+              />
+            )}
             {tabSelected === 'Data Table Settings' && (
               <>
                 <div className='wrap'>
                   <label>
-                    <input type='checkbox' defaultChecked={config.table.show} onChange={e => changeConfigValue('table', 'show', e.target.checked)} />
+                    <input
+                      type='checkbox'
+                      defaultChecked={config.table.show}
+                      onChange={e => changeConfigValue('table', 'show', e.target.checked)}
+                    />
                     Show Data Table(s)
                   </label>
                   <br />
 
                   <label>
-                    <input type='checkbox' defaultChecked={config.table.expanded} onChange={e => changeConfigValue('table', 'expanded', e.target.checked)} />
+                    <input
+                      type='checkbox'
+                      defaultChecked={config.table.expanded}
+                      onChange={e => changeConfigValue('table', 'expanded', e.target.checked)}
+                    />
                     Expanded by Default
                   </label>
                   <br />
@@ -125,19 +166,39 @@ const Header = (props: HeaderProps) => {
 
                 <div className='wrap'>
                   <label>
-                    <input type='checkbox' defaultChecked={config.table.limitHeight} onChange={e => changeConfigValue('table', 'limitHeight', e.target.checked)} />
+                    <input
+                      type='checkbox'
+                      defaultChecked={config.table.limitHeight}
+                      onChange={e => changeConfigValue('table', 'limitHeight', e.target.checked)}
+                    />
                     Limit Table Height
                   </label>
-                  {config.table.limitHeight && <input className='table-height-input' type='text' placeholder='Height (px)' defaultValue={config.table.height} onChange={e => changeConfigValue('table', 'height', e.target.value)} />}
+                  {config.table.limitHeight && (
+                    <input
+                      className='table-height-input'
+                      type='text'
+                      placeholder='Height (px)'
+                      defaultValue={config.table.height}
+                      onChange={e => changeConfigValue('table', 'height', e.target.value)}
+                    />
+                  )}
                 </div>
 
                 <div className='wrap'>
                   <label>
-                    <input type='checkbox' defaultChecked={config.table.download} onChange={e => changeConfigValue('table', 'download', e.target.checked)} />
+                    <input
+                      type='checkbox'
+                      defaultChecked={config.table.download}
+                      onChange={e => changeConfigValue('table', 'download', e.target.checked)}
+                    />
                     Show Download CSV Link
                   </label>
                   <label>
-                    <input type='checkbox' defaultChecked={config.table.showDownloadUrl} onChange={e => changeConfigValue('table', 'showDownloadUrl', e.target.checked)} />
+                    <input
+                      type='checkbox'
+                      defaultChecked={config.table.showDownloadUrl}
+                      onChange={e => changeConfigValue('table', 'showDownloadUrl', e.target.checked)}
+                    />
                     Show URL to Automatically Updated Data
                   </label>
                 </div>

package/src/components/Header/index.scss

@@ -12,11 +12,6 @@
       margin-bottom: 2px;
       width: 100%;
     }
-    label,
-    input:not([type='checkbox']),
-    select {
-      width: 100% !important;
-    }
 
     label {
       display: flex !important;

package/src/components/MultiConfigTabs/MultiConfigTabs.tsx

@@ -66,8 +66,16 @@ const Tab = ({ name, handleClick, tabs, index, active }) => {
 
   return (
     <li className='nav-item d-flex mt-0'>
-      {canMoveLeft && editing && <button onClick={() => handleReorder(index, -1)}>{'<'}</button>}
-      <div className={`edit nav-link${active ? ' active' : ''}`} aria-current={active ? 'page' : null} onClick={onClick}>
+      {canMoveLeft && editing && (
+        <button className='border-0' onClick={() => handleReorder(index, -1)}>
+          {'<'}
+        </button>
+      )}
+      <div
+        className={`edit nav-link${active ? ' active' : ''}`}
+        aria-current={active ? 'page' : null}
+        onClick={onClick}
+      >
         {editing ? (
           <div className='d-flex'>
             <input type='text' defaultValue={name} onBlur={saveName} ref={inputRef} />
@@ -78,13 +86,17 @@ const Tab = ({ name, handleClick, tabs, index, active }) => {
         ) : (
           <>
             {name}
-            <button className='remove' onClick={handleRemove}>
+            <button className='btn btn-danger border-0 ml-1' onClick={handleRemove}>
               X
             </button>
           </>
         )}
       </div>
-      {canMoveRight && editing && <button onClick={() => handleReorder(index, 1)}>{'>'}</button>}
+      {canMoveRight && editing && (
+        <button className='border-0' onClick={() => handleReorder(index, 1)}>
+          {'>'}
+        </button>
+      )}
     </li>
   )
 }
@@ -92,7 +104,10 @@ const Tab = ({ name, handleClick, tabs, index, active }) => {
 const MultiConfigTabs = () => {
   const { config } = useContext(DashboardContext)
   const dispatch = useContext(DashboardDispatchContext)
-  const tabs = useMemo<string[]>(() => (config.multiDashboards || []).map(({ label }) => label), [config.multiDashboards])
+  const tabs = useMemo<string[]>(
+    () => (config.multiDashboards || []).map(({ label }) => label),
+    [config.multiDashboards]
+  )
   const activeTab = useMemo<number>(() => config.activeDashboard, [config.activeDashboard])
 
   const saveAndLoad = (indexToSwitchTo: number) => {
@@ -104,7 +119,14 @@ const MultiConfigTabs = () => {
   return (
     <ul className='nav nav-tabs multi-config-tabs'>
       {tabs.map((tab, index) => (
-        <Tab key={tab + index} name={tab} tabs={tabs} index={index} handleClick={() => saveAndLoad(index)} active={index === activeTab} />
+        <Tab
+          key={tab + index}
+          name={tab}
+          tabs={tabs}
+          index={index}
+          handleClick={() => saveAndLoad(index)}
+          active={index === activeTab}
+        />
       ))}
       <li className='nav-item'>
         <button className='nav-link add' onClick={() => dispatch({ type: 'ADD_NEW_DASHBOARD' })}>

package/src/components/MultiConfigTabs/MultiTabs.tsx

@@ -2,6 +2,7 @@ import { useContext, useMemo } from 'react'
 import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
 
 import './multiconfigtabs.styles.css'
+import { updateQueryParam } from '@cdc/core/helpers/queryStringUtils'
 
 const MultiTabs = () => {
   const { config } = useContext(DashboardContext)
@@ -15,6 +16,7 @@ const MultiTabs = () => {
   const load = (indexToSwitchTo: number, e) => {
     e.preventDefault() // some form wrapper is causing this to act as a submit button
     dispatch({ type: 'SWITCH_CONFIG', payload: indexToSwitchTo })
+    updateQueryParam('cove-tab', indexToSwitchTo)
   }
 
   if (!config.multiDashboards) return null

package/src/components/MultiConfigTabs/multiconfigtabs.styles.css

@@ -13,11 +13,6 @@
     &:hover {
       :is(button) {
         display: inline-block;
-        color: var(--gray);
-        &:hover {
-          color: var(--black);
-          font-weight: bold;
-        }
       }
 
       background: var(--quaternary);
@@ -32,12 +27,10 @@
       color: white;
       font-weight: bold;
     }
-  }
-  .remove {
-    color: var(--gray);
-    &:hover {
-      color: var(--black);
-      font-weight: bold;
+    .btn-danger {
+      text-decoration: none;
+      padding: 0px 5px;
+      font-size: inherit;
     }
   }
   .add {

package/src/components/Row.tsx

@@ -122,39 +122,82 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
   }
 
   const layoutList = [
-    <li className={curr === '12' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([12])} key='12' title='1 Column'>
+    <li
+      className={curr === '12' ? `current row-menu__list--item` : `row-menu__list--item`}
+      onClick={() => setRowLayout([12])}
+      key='12'
+      title='1 Column'
+    >
       <OneColIcon />
     </li>,
-    <li className={curr === '66' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([6, 6])} key='66' title='2 Columns'>
+    <li
+      className={curr === '66' ? `current row-menu__list--item` : `row-menu__list--item`}
+      onClick={() => setRowLayout([6, 6])}
+      key='66'
+      title='2 Columns'
+    >
       <TwoColIcon />
     </li>,
-    <li className={curr === '444' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([4, 4, 4])} key='444' title='3 Columns'>
+    <li
+      className={curr === '444' ? `current row-menu__list--item` : `row-menu__list--item`}
+      onClick={() => setRowLayout([4, 4, 4])}
+      key='444'
+      title='3 Columns'
+    >
       <ThreeColIcon />
     </li>,
-    <li className={curr === '48' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([4, 8])} key='48' title='2 Columns'>
+    <li
+      className={curr === '48' ? `current row-menu__list--item` : `row-menu__list--item`}
+      onClick={() => setRowLayout([4, 8])}
+      key='48'
+      title='2 Columns'
+    >
       <FourEightColIcon />
     </li>,
-    <li className={curr === '84' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([8, 4])} key='84' title='2 Columns'>
+    <li
+      className={curr === '84' ? `current row-menu__list--item` : `row-menu__list--item`}
+      onClick={() => setRowLayout([8, 4])}
+      key='84'
+      title='2 Columns'
+    >
       <EightFourColIcon />
     </li>,
-    <li className={curr === 'toggle' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([12, 12, 12], true)} key='toggle' title='Toggle between up to three visualizations'>
+    <li
+      className={curr === 'toggle' ? `current row-menu__list--item` : `row-menu__list--item`}
+      onClick={() => setRowLayout([12, 12, 12], true)}
+      key='toggle'
+      title='Toggle between up to three visualizations'
+    >
       <ToggleIcon />
     </li>
   ]
 
   return (
     <nav className='row-menu'>
-      <div className='row-menu__btn'>
-        <ul className='row-menu__flyout'>{layoutList}</ul>
-      </div>
+      <ul className='row-menu__flyout'>{layoutList}</ul>
       <div className='spacer'></div>
-      <button className={rowIdx === 0 ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'} title='Move Row Up' onClick={() => moveRow('up')}>
+      <button
+        className={`btn btn-primary row-menu__btn border-0`}
+        title='Move Row Up'
+        onClick={() => moveRow('up')}
+        disabled={rowIdx === 0}
+      >
         <Icon display='caretUp' color='#fff' size={25} />
       </button>
-      <button className={rowIdx + 1 === rows.length ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'} title='Move Row Down' onClick={() => moveRow('down')}>
+      <button
+        className={'btn btn-primary row-menu__btn border-0'}
+        title='Move Row Down'
+        onClick={() => moveRow('down')}
+        disabled={rowIdx + 1 === rows.length}
+      >
         <Icon display='caretDown' color='#fff' size={25} />
       </button>
-      <button className={rowIdx === 0 && rows.length === 1 ? 'row-menu__btn row-menu__btn--remove row-menu__btn-disabled' : 'row-menu__btn row-menu__btn--remove'} title='Delete Row' onClick={deleteRow}>
+      <button
+        className={'btn btn-danger row-menu__btn row-menu__btn--remove border-0'}
+        title='Delete Row'
+        onClick={deleteRow}
+        disabled={rowIdx === 0 && rows.length === 1}
+      >
         <Icon display='close' color='#fff' size={25} />
       </button>
     </nav>
@@ -177,7 +220,10 @@ const Row: React.FC<RowProps> = ({ row, idx: rowIdx, uuid }) => {
         visualizationType: type,
         editing: true
       }
-      dispatch({ type: 'ADD_FOOTNOTE', payload: { id: uid, rowIndex: rowIdx, config: newVisualizationConfig as Visualization } })
+      dispatch({
+        type: 'ADD_FOOTNOTE',
+        payload: { id: uid, rowIndex: rowIdx, config: newVisualizationConfig as Visualization }
+      })
     } else {
       dispatch({ type: 'UPDATE_VISUALIZATION', payload: { vizKey: row.footnotesId, configureData: { editing: true } } })
     }

package/src/components/VisualizationRow.tsx

@@ -157,8 +157,6 @@ const VisualizationRow: React.FC<VizRowProps> = ({
 
           const shouldShow = row.toggle === undefined || (row.toggle && show[colIndex])
 
-          const body = <></>
-
           return (
             <div
               key={`vis__${index}__${colIndex}`}

package/src/components/VisualizationsPanel/VisualizationsPanel.tsx

@@ -119,7 +119,6 @@ const VisualizationsPanel = () => {
         <Widget addVisualization={() => addVisualization('dashboardFilters', '')} type='dashboardFilters' />
         <Widget addVisualization={() => addVisualization('table', '')} type='table' />
       </div>
-      <span className='subheading-3'>Advanced</span>
       <AdvancedEditor
         loadConfig={loadConfig}
         config={config}

package/src/components/Widget.tsx

@@ -5,6 +5,7 @@ import { useGlobalContext } from '@cdc/core/components/GlobalContext'
 import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
 
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import Icon from '@cdc/core/components/ui/Icon'
 import { AnyVisualization } from '@cdc/core/types/Visualization'
 import { iconHash } from '../helpers/iconHash'
@@ -39,7 +40,7 @@ type WidgetProps = {
 
 const Widget = ({ widgetConfig, addVisualization, type }: WidgetProps) => {
   const { overlay } = useGlobalContext()
-  const { config } = useContext(DashboardContext)
+  const { config, data } = useContext(DashboardContext)
   const dispatch = useContext(DashboardDispatchContext)
 
   const transform = new DataTransform()
@@ -79,9 +80,30 @@ const Widget = ({ widgetConfig, addVisualization, type }: WidgetProps) => {
     })
   }
 
+  const changeDataLimit = (dataUrl, limit) => {
+    const url = new URL(dataUrl)
+    url.searchParams.set('$limit', limit)
+    // Replace encoded $ with actual $ for the URL
+    return url.href.replace(/%24/g, '$')
+  }
+
+  const loadSampleData = () => {
+    const dataKey = config.rows[widgetConfig.rowIdx]?.dataKey || widgetConfig?.dataKey
+    const dataset = config.datasets[dataKey]
+    const _data = data[dataset.dataUrl]
+    if (_data && !_data.length) {
+      const url = changeDataLimit(dataset.dataUrl, 100)
+      fetchRemoteData(url).then(responseData => {
+        responseData.sample = true
+        dispatch({ type: 'SET_DATA', payload: { ...data, [dataKey]: responseData } })
+      })
+    }
+  }
+
   const editWidget = () => {
     if (!widgetConfig) return
     dispatch({ type: 'UPDATE_VISUALIZATION', payload: { vizKey: widgetConfig.uid, configureData: { editing: true } } })
+    loadSampleData()
   }
 
   let isConfigurationReady = false

package/src/helpers/getVizRowColumnLocator.ts

@@ -1,5 +1,6 @@
 import { ConfigRow } from '../types/ConfigRow'
 
+// returns a dictionary of widget names and their corresponding row and column index
 export const getVizRowColumnLocator = (rows: ConfigRow[]): Record<string, { row: number; column: number }> =>
   rows.reduce((acc, curr, index) => {
     curr.columns?.forEach((column, columnIndex) => {

package/src/helpers/loadAPIFilters.ts

@@ -6,6 +6,7 @@ import { APIFilter } from '../types/APIFilter'
 
 export const loadAPIFiltersFactory = (
   dispatch: Function,
+  dispatchErrorMessages: Function,
   setAPIFilterDropdowns: Function,
   autoLoadFilterIndexes: number[]
 ) => {
@@ -36,7 +37,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
@@ -51,7 +51,12 @@ export const loadAPIFiltersFactory = (
                 )
                 sharedFilters[index] = newDefaultSelectedFilter
               })
-              .catch(console.error)
+              .catch(() => {
+                dispatchErrorMessages({
+                  type: 'ADD_ERROR_MESSAGE',
+                  payload: 'There was a problem returning data. Please try again.'
+                })
+              })
               .finally(() => {
                 resolve()
               })

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')
   })

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 => {

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