@cdc/dashboard 4.24.1 → 4.24.2

package/src/_stories/Dashboard.stories.tsx

@@ -5,8 +5,8 @@ import ExampleConfig_1 from './_mock/dashboard-gallery.json'
 import ExampleConfig_2 from './_mock/dashboard-2.json'
 import ExampleConfig_3 from './_mock/dashboard_no_filter.json'
 import Dashboard_Filter from './_mock/dashboard-filter.json'
-import Dashboard from '../CdcDashboard'
-import { Config } from '../types/Config'
+import Dashboard from '../CdcDashboardComponent'
+import { type DashboardConfig as Config } from '../types/DashboardConfig'
 import { userEvent, within } from '@storybook/testing-library'
 
 const meta: Meta<typeof Dashboard> = {

package/src/components/Column.tsx

@@ -7,19 +7,22 @@ import Widget from './Widget'
 const Column = ({ data, rowIdx, colIdx }) => {
   const { config } = useContext(DashboardContext)
 
-  const [{ isOver, canDrop }, drop] = useDrop(() => ({
-    accept: 'vis-widget',
-    drop: () => ({
-      rowIdx,
-      colIdx,
-      canDrop
+  const [{ isOver, canDrop }, drop] = useDrop(
+    () => ({
+      accept: 'vis-widget',
+      drop: () => ({
+        rowIdx,
+        colIdx,
+        canDrop
+      }),
+      canDrop: () => !data.widget,
+      collect: monitor => ({
+        isOver: monitor.isOver(),
+        canDrop: !!monitor.canDrop()
+      })
     }),
-    canDrop: () => !data.widget,
-    collect: monitor => ({
-      isOver: monitor.isOver(),
-      canDrop: !!monitor.canDrop()
-    })
-  }))
+    [config.activeDashboard]
+  )
 
   const widget = data.widget ? config?.visualizations[data.widget] : null
   if (widget && !widget.uid) widget.uid = data.widget

package/src/components/Header/Header.tsx

@@ -5,7 +5,7 @@ import { DashboardContext, DashboardDispatchContext } from '../../DashboardConte
 // types
 import { type APIFilter } from '../../types/APIFilter'
 import { type SharedFilter } from '../../types/SharedFilter'
-import { type Config } from '../../types/Config'
+import { type DashboardConfig as Config } from '../../types/DashboardConfig'
 
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
@@ -17,6 +17,7 @@ import Select from '@cdc/core/components/ui/Select'
 import Button from '@cdc/core/components/elements/Button'
 
 import './index.scss'
+import MultiConfigTabs from '../MultiConfigTabs'
 
 type HeaderProps = {
   setPreview?: any
@@ -502,13 +503,13 @@ const Header = (props: HeaderProps) => {
                   <select
                     value={filter.parents || []}
                     onChange={e => {
-                      updateFilterProp('parent', index, e.target.value)
+                      updateFilterProp('parents', index, e.target.value)
                     }}
                   >
                     <option value=''>Select a filter</option>
                     {config.dashboard.sharedFilters &&
                       config.dashboard.sharedFilters.map(sharedFilter => {
-                        if (sharedFilter.key !== filter.key && sharedFilter.type !== 'urlfilter') {
+                        if (sharedFilter.key !== filter.key) {
                           return <option>{sharedFilter.key}</option>
                         }
                       })}
@@ -541,6 +542,15 @@ const Header = (props: HeaderProps) => {
     )
   }
 
+  const handleCheck = e => {
+    const { checked } = e.currentTarget
+    if (checked) {
+      dispatch({ type: 'INITIALIZE_MULTIDASHBOARDS' })
+    }
+  }
+
+  const multiInitialized = !!config.multiDashboards
+
   return (
     <div aria-level={2} role='heading' className={`editor-heading${subEditor ? ' sub-dashboard-viz' : ''}`}>
       {subEditor ? (
@@ -549,13 +559,17 @@ const Header = (props: HeaderProps) => {
         </div>
       ) : (
         <div className='heading-1'>
-          Dashboard Editor
+          Dashboard Editor{' '}
+          <span className='small'>
+            <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)} />}
         </div>
       )}
       {!subEditor && (
         <div className='toggle-bar__wrapper'>
+          <MultiConfigTabs isEditor />
           <ul className='toggle-bar'>
             <li
               className={tabSelected === 0 ? 'active' : 'inactive'}

package/src/components/MultiConfigTabs/MultiConfigTabs.tsx

@@ -0,0 +1,106 @@
+import { createRef, useContext, useMemo, useState } from 'react'
+import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
+import Modal from '@cdc/core/components/ui/Modal'
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import './multiconfigtabs.styles.css'
+
+const AreYouSure = deleteCallback => {
+  return (
+    <Modal>
+      <Modal.Content>
+        <p>Are you sure you want to delete this dashboard? </p>
+        <button className='btn btn-danger' onClick={deleteCallback}>
+          DELETE
+        </button>
+      </Modal.Content>
+    </Modal>
+  )
+}
+
+const Tab = ({ name, handleClick, tabs, index, active }) => {
+  const [editing, setEditing] = useState(false)
+  const dispatch = useContext(DashboardDispatchContext)
+  const { overlay } = useGlobalContext()
+  const inputRef = createRef<HTMLInputElement>()
+
+  const onBlur = () => {
+    const newVal = inputRef.current.value
+    const sameName = newVal === name
+    const blankName = !newVal
+    const duplicateName = tabs.includes(newVal)
+    if (!sameName && !blankName && !duplicateName) {
+      dispatch({ type: 'RENAME_DASHBOARD_TAB', payload: { current: name, new: newVal } })
+    }
+    setEditing(false)
+  }
+
+  const onClick = e => {
+    // ignore click on delete button
+    if (e.target.className === 'remove') return
+    if (active) {
+      setEditing(true)
+    } else {
+      handleClick()
+    }
+  }
+
+  const handleRemove = () => {
+    const deleteCallback = () => {
+      dispatch({ type: 'REMOVE_MULTIDASHBOARD_AT_INDEX', payload: index })
+      overlay?.actions.toggleOverlay(false)
+    }
+    overlay?.actions.openOverlay(AreYouSure(deleteCallback))
+  }
+
+  const handleReorder = (index: number, moveTo: -1 | 1) => {
+    const newIndex = index + moveTo
+    const inbounds = newIndex > -1 && newIndex <= tabs.length - 1
+    if (inbounds) {
+      dispatch({ type: 'REORDER_MULTIDASHBOARDS', payload: { currentIndex: index, newIndex: index + moveTo } })
+    }
+  }
+
+  const canMoveLeft = index !== 0
+  const canMoveRight = index <= tabs.length - 2
+
+  return (
+    <li className='nav-item'>
+      <a className={`edit nav-link${active ? ' active' : ''}`} aria-current={active ? 'page' : null} href='#' onClick={onClick}>
+        {canMoveLeft && <button onClick={() => handleReorder(index, -1)}>{'<'}</button>}
+        {editing ? <input type='text' defaultValue={name} onBlur={onBlur} ref={inputRef} /> : <>{name}</>}
+        {canMoveRight && <button onClick={() => handleReorder(index, 1)}>{'>'}</button>}
+        <button className='remove' onClick={handleRemove}>
+          X
+        </button>
+      </a>
+    </li>
+  )
+}
+
+const MultiConfigTabs = () => {
+  const { config } = useContext(DashboardContext)
+  const dispatch = useContext(DashboardDispatchContext)
+  const tabs = useMemo<string[]>(() => (config.multiDashboards || []).map(({ label }) => label), [config.multiDashboards])
+  const activeTab = useMemo<number>(() => config.activeDashboard, [config.activeDashboard])
+
+  const saveAndLoad = (indexToSwitchTo: number) => {
+    dispatch({ type: 'SAVE_CURRENT_CHANGES' })
+    dispatch({ type: 'SWITCH_CONFIG', payload: indexToSwitchTo })
+  }
+
+  if (!config.multiDashboards) return null
+  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} />
+      ))}
+      <li className='nav-item'>
+        <a className='nav-link add' href='#' onClick={() => dispatch({ type: 'ADD_NEW_DASHBOARD' })}>
+          +
+        </a>
+      </li>
+    </ul>
+  )
+}
+
+export default MultiConfigTabs

package/src/components/MultiConfigTabs/MultiTabs.tsx

@@ -0,0 +1,30 @@
+import { useContext, useMemo } from 'react'
+import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
+
+import './multiconfigtabs.styles.css'
+
+const MultiTabs = () => {
+  const { config } = useContext(DashboardContext)
+  const dispatch = useContext(DashboardDispatchContext)
+  const tabs = useMemo<string[]>(() => (config.multiDashboards || []).map(({ label }) => label), [config.multiDashboards])
+  const activeTab = useMemo<number>(() => config.activeDashboard, [config.activeDashboard])
+
+  const load = (indexToSwitchTo: number) => {
+    dispatch({ type: 'SWITCH_CONFIG', payload: indexToSwitchTo })
+  }
+
+  if (!config.multiDashboards) return null
+  return (
+    <ul className='nav nav-tabs multi-config-tabs'>
+      {tabs.map((tab, index) => (
+        <li className='nav-item'>
+          <a className={`nav-link${activeTab === index ? ' active' : ''}`} aria-current={activeTab === index ? 'page' : null} href='#' onClick={() => load(index)}>
+            {tab}
+          </a>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default MultiTabs

package/src/components/MultiConfigTabs/index.tsx

@@ -0,0 +1,8 @@
+import MultiConfigTabs from './MultiConfigTabs'
+import MultiTabs from './MultiTabs'
+
+const Tabs: React.FC<{ isEditor: boolean }> = ({ isEditor = false }) => {
+  return isEditor ? <MultiConfigTabs /> : <MultiTabs />
+}
+
+export default Tabs

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

@@ -0,0 +1,32 @@
+.multi-config-tabs {
+  .nav-link {
+    font-weight: 400;
+    display: block;
+    padding: 0.5rem 1rem;
+    :is(button) {
+      display: none;
+      background: none;
+    }
+    &:hover {
+      :is(button) {
+        display: inline-block;
+        color: var(--gray);
+        &:hover {
+          color: var(--black);
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  .remove {
+    color: var(--gray);
+    &:hover {
+      color: var(--black);
+      font-weight: bold;
+    }
+  }
+  .add {
+    font-weight: 800;
+    padding: 0.5rem 1rem;
+  }
+}

package/src/components/Widget.tsx

@@ -10,7 +10,7 @@ import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import DataDesigner from '@cdc/core/components/managers/DataDesigner'
 import Icon from '@cdc/core/components/ui/Icon'
 import Modal from '@cdc/core/components/ui/Modal'
-import { Visualization } from '../types/Config'
+import { Visualization } from '@cdc/core/types/Visualization'
 
 const iconHash = {
   'data-bite': <Icon display='databite' base />,
@@ -87,13 +87,16 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
     updateConfig({ ...config, rows, visualizations })
   }
 
-  const [{ isDragging, ...collected }, drag] = useDrag({
-    type: 'vis-widget',
-    end: handleWidgetMove,
-    collect: monitor => ({
-      isDragging: monitor.isDragging()
-    })
-  })
+  const [{ isDragging, ...collected }, drag] = useDrag(
+    {
+      type: 'vis-widget',
+      end: handleWidgetMove,
+      collect: monitor => ({
+        isDragging: monitor.isDragging()
+      })
+    },
+    [config.activeDashboard, config.rows]
+  )
 
   const deleteWidget = () => {
     if (!data) return
@@ -266,6 +269,19 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
     }
   }, [data?.openModal])
 
+  let isConfigurationReady = false;
+  if(type === 'markup-include' || type === 'filter-dropdowns'){
+    isConfigurationReady = true;
+  } else if(data && data.formattedData) {
+    isConfigurationReady = true;
+  } else if(data && data.dataKey && data.dataDescription && config.datasets[data.dataKey]){
+    let formattedDataAttempt = transform.autoStandardize(config.datasets[data.dataKey].data);
+    formattedDataAttempt = transform.developerStandardize(formattedDataAttempt, data.dataDescription);
+    if(formattedDataAttempt){
+      isConfigurationReady = true;
+    }
+  }
+
   return (
     <>
       <div className='widget' ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }} {...collected}>
@@ -273,7 +289,7 @@ const Widget = ({ data, addVisualization, type }: WidgetProps) => {
         <div className='widget__content'>
           {data?.rowIdx !== undefined && (
             <div className='widget-menu'>
-              {((data.dataKey && data.dataDescription && (data.formattedData || (config.datasets[data.dataKey] && transform.autoStandardize(config.datasets[data.dataKey].data)))) || type === 'markup-include') && type !== 'filter-dropdowns' && (
+              {isConfigurationReady && (
                 <button title='Configure Visualization' className='btn btn-configure' onClick={editWidget}>
                   {iconHash['tools']}
                 </button>

package/src/helpers/generateValuesForFilter.ts

@@ -13,7 +13,7 @@ export const generateValuesForFilter = (columnName, _data, filterBehavior) => {
   const values: string[] = []
 
   Object.keys(_data).forEach(key => {
-    _data[key].forEach(row => {
+    _data[key]?.forEach(row => {
       const value = row[columnName]
       if (value && false === values.includes(value)) {
         values.push(value)

package/src/helpers/getUpdateConfig.ts

@@ -1,12 +1,16 @@
 import { DashboardState } from '../store/dashboard.reducer'
-import { Config } from '../types/Config'
+import { DashboardConfig as Config, DashboardConfig } from '../types/DashboardConfig'
 import { filterData } from './filterData'
 import { generateValuesForFilter } from './generateValuesForFilter'
 import { getFormattedData } from './getFormattedData'
 import { getVizKeys } from './getVizKeys'
 
+type UpdateState = Omit<DashboardState, 'config'> & {
+  config?: DashboardConfig
+}
+
 export const getUpdateConfig =
-  (state: DashboardState) =>
+  (state: UpdateState) =>
   (newConfig, dataOverride?: Object): [Config, Object] => {
     let newFilteredData = {}
     let visualizationKeys = getVizKeys(newConfig)

package/src/helpers/processData.ts

@@ -0,0 +1,13 @@
+import { FilterBehavior } from '../components/Header/Header'
+import { DataSet } from '../types/DataSet'
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
+import { getFormattedData } from './getFormattedData'
+
+export const processData = async (dataSet: DataSet, filterBehavior) => {
+  if (dataSet.dataUrl && filterBehavior !== FilterBehavior.Apply) {
+    const dataset = await fetchRemoteData(`${dataSet.dataUrl}`)
+    return getFormattedData(dataset, dataSet.dataDescription)
+  }
+
+  return dataSet.formattedData || dataSet.data
+}

package/src/helpers/processDataLegacy.ts

@@ -0,0 +1,14 @@
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
+import { getFormattedData } from './getFormattedData'
+
+export const processDataLegacy = async (response: any) => {
+  let dataset = response.formattedData || response.data
+
+  if (response.dataUrl) {
+    dataset = await fetchRemoteData(`${response.dataUrl}`)
+
+    dataset = getFormattedData(dataset, response.dataDescription)
+  }
+
+  return dataset
+}

package/src/{index.jsx → index.tsx}

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
-import CdcDashboard from './CdcDashboard'
+import MultiDashboardWrapper from './CdcDashboard'
 
 let isEditor = window.location.href.includes('editor=true')
 let isDebug = window.location.href.includes('debug=true')
@@ -10,6 +10,6 @@ let domContainer = document.getElementsByClassName('react-container')[0]
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
-    <CdcDashboard configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} isDebug={isDebug} />
+    <MultiDashboardWrapper configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} isDebug={isDebug} />
   </React.StrictMode>
 )

package/src/scss/editor-panel.scss

@@ -3,13 +3,17 @@
 .editor-panel + .cdc-dashboard-inner-container,
 .editor-heading + .cdc-open-viz-module {
   position: relative;
-  top: 3em;
-  .editor-panel {
-    top: 3em;
-  }
-  .editor-toggle {
-    top: 3.5em;
-  }
+  min-height: 80vh;
+}
+
+.header-container {
+  display: flex;
+  position: sticky;
+  top: 0;
+  flex-direction: column;
+  width: calc(350px + 1em);
+  max-height: 95vh;
+  z-index: 3;
 }
 
 .editor-panel {
@@ -83,12 +87,12 @@
   background: #fff;
   width: $editorWidth;
   overflow-y: overlay;
-  position: fixed;
+  position: absolute;
   z-index: 8;
   display: flex;
   flex-direction: column;
   left: 0;
-  top: 48px;
+  top: 0;
   bottom: 0;
   .accordion__heading {
     background: $lightestGray;
@@ -587,14 +591,13 @@
   color: #000;
   font-size: 1em;
   border: 0;
-  position: fixed;
+  position: absolute;
   z-index: 99;
   transition: 0.1s background;
   cursor: pointer;
   width: 25px;
   height: 25px;
   left: 307px;
-  top: calc(3em + 10px);
   box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
   &:before {
     top: 43%;

package/src/scss/grid.scss

@@ -3,18 +3,17 @@ $red: #f74242;
 
 .layout-container {
   display: flex;
+  margin-top: -80vh;
+  margin-left: calc($editorWidth + 1em);
 }
 
 .visualizations-panel {
   background-color: #fff;
   padding: 1em;
-  width: 350px;
+  width: $editorWidth;
   border-right: #c7c7c7 1px solid;
-  position: fixed;
-  top: 6em;
-  bottom: 0;
   z-index: 1;
-  overflow-y: auto;
+  overflow-y: scroll;
 }
 
 .hidden.editor-panel + .builder-grid {
@@ -29,7 +28,6 @@ $red: #f74242;
 .builder-grid {
   flex-grow: 1;
   padding: 5em 3em 3em;
-  margin-left: calc(350px + 1em);
 }
 
 .column-container {

package/src/scss/main.scss

@@ -15,11 +15,8 @@
     border-bottom: #c7c7c7 1px solid;
     padding: 0 1em;
     display: flex;
-    height: 6em;
-    position: fixed;
-    width: 100%;
-    z-index: 19;
-    top: 0;
+    width: 100vw;
+    z-index: 5;
     &.sub-dashboard-viz {
       height: 3em;
     }
@@ -285,9 +282,6 @@
     .editor-panel {
       top: 40px;
     }
-    .editor-toggle {
-      top: 3em;
-    }
   }
 }
 

package/src/store/dashboard.actions.ts

@@ -1,6 +1,5 @@
-import type { Config } from '../types/Config'
-
-type Action<T, P> = { type: T; payload: P }
+import type { DashboardConfig as Config } from '../types/DashboardConfig'
+import { type Action } from '@cdc/core/types/Action'
 
 type SET_CONFIG = Action<'SET_CONFIG', Config>
 type UPDATE_CONFIG = Action<'UPDATE_CONFIG', [Config, Object?]>
@@ -9,6 +8,13 @@ type SET_LOADING = Action<'SET_LOADING', boolean>
 type SET_PREVIEW = Action<'SET_PREVIEW', boolean>
 type SET_FILTERED_DATA = Action<'SET_FILTERED_DATA', Object>
 type SET_TAB_SELECTED = Action<'SET_TAB_SELECTED', number>
+type RENAME_DASHBOARD_TAB = Action<'RENAME_DASHBOARD_TAB', { current: string; new: string }>
+type INITIALIZE_MULTIDASHBOARDS = Action<'INITIALIZE_MULTIDASHBOARDS', undefined>
+type REMOVE_MULTIDASHBOARD_AT_INDEX = Action<'REMOVE_MULTIDASHBOARD_AT_INDEX', number>
+type REORDER_MULTIDASHBOARDS = Action<'REORDER_MULTIDASHBOARDS', { currentIndex: number; newIndex: number }>
+type ADD_NEW_DASHBOARD = Action<'ADD_NEW_DASHBOARD', undefined>
+type SAVE_CURRENT_CHANGES = Action<'SAVE_CURRENT_CHANGES', undefined>
+type SWITCH_CONFIG = Action<'SWITCH_CONFIG', number>
 
-type DashboardActions = SET_CONFIG | UPDATE_CONFIG | SET_DATA | SET_LOADING | SET_PREVIEW | SET_FILTERED_DATA | SET_TAB_SELECTED
+type DashboardActions = ADD_NEW_DASHBOARD | SET_CONFIG | UPDATE_CONFIG | REMOVE_MULTIDASHBOARD_AT_INDEX | RENAME_DASHBOARD_TAB | REORDER_MULTIDASHBOARDS | SAVE_CURRENT_CHANGES | SET_DATA | SET_LOADING | SET_PREVIEW | SET_FILTERED_DATA | SET_TAB_SELECTED | SWITCH_CONFIG | INITIALIZE_MULTIDASHBOARDS
 export default DashboardActions

package/src/store/dashboard.reducer.ts

@@ -1,17 +1,40 @@
+import _ from 'lodash'
 import { getUpdateConfig } from '../helpers/getUpdateConfig'
-import { Config } from '../types/Config'
+import { MultiDashboardConfig } from '../types/MultiDashboard'
 import DashboardActions from './dashboard.actions'
+import { devToolsWrapper } from '@cdc/core/helpers/withDevTools'
+
+const createBlankDashboard = () => ({
+  dashboard: {
+    theme: 'theme-blue'
+  },
+  rows: [[{ width: 12 }, {}, {}]],
+  visualizations: {},
+  table: {
+    label: 'Data Table',
+    show: true,
+    showDownloadUrl: false,
+    showVertical: true
+  }
+})
 
 export type DashboardState = {
-  config?: Config
+  config: MultiDashboardConfig
   data: Object
   filteredData: Object
   loading: boolean
   preview: boolean
   tabSelected: number
 }
+
 const reducer = (state: DashboardState, action: DashboardActions): DashboardState => {
   switch (action.type) {
+    case 'ADD_NEW_DASHBOARD': {
+      const currentMultiDashboards = state.config.multiDashboards
+      const label = 'New Dashboard ' + (currentMultiDashboards.length + 1)
+      const newMultiDashboards = [...currentMultiDashboards, { ...createBlankDashboard(), label }]
+      return applyMultiDashboards(state, newMultiDashboards)
+    }
     case 'UPDATE_CONFIG': {
       const [config, filteredData] = getUpdateConfig(state)(...action.payload)
       return { ...state, config, filteredData }
@@ -34,9 +57,57 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
     case 'SET_TAB_SELECTED': {
       return { ...state, tabSelected: action.payload }
     }
+    case 'REMOVE_MULTIDASHBOARD_AT_INDEX': {
+      const newMultiDashboards = [...state.config.multiDashboards]
+      _.remove(newMultiDashboards, (_, index) => {
+        return index === action.payload
+      })
+      if (newMultiDashboards.length === 0) return { ...state, config: _.omit(state.config, 'multiDashboards') }
+      return applyMultiDashboards(state, newMultiDashboards)
+    }
+    case 'RENAME_DASHBOARD_TAB': {
+      const newMultiDashboards = state.config.multiDashboards.map(dashboard => {
+        if (dashboard.label === action.payload.current) {
+          dashboard.label = action.payload.new
+        }
+        return dashboard
+      })
+      const newConfig = { ...state.config, label: action.payload.new } // make sure active label is updated
+      return applyMultiDashboards({ ...state, newConfig }, newMultiDashboards)
+    }
+    case 'REORDER_MULTIDASHBOARDS': {
+      const { newIndex, currentIndex } = action.payload
+      const newMultiDashboards = [...state.config.multiDashboards]
+      newMultiDashboards.splice(newIndex, 0, newMultiDashboards.splice(currentIndex, 1)[0])
+      // set activeDashboard to newIndex
+      const config = { ...state.config, activeDashboard: newIndex }
+      return applyMultiDashboards({ ...state, config }, newMultiDashboards)
+    }
+    case 'SAVE_CURRENT_CHANGES': {
+      const saveSlot = state.config.activeDashboard
+      const newMultiDashboards = [...state.config.multiDashboards]
+      const label = newMultiDashboards[saveSlot].label
+      const toSave = _.pick(state.config, ['dashboard', 'visualizations', 'rows'])
+      newMultiDashboards[saveSlot] = { ...toSave, label }
+      return applyMultiDashboards(state, newMultiDashboards)
+    }
+    case 'INITIALIZE_MULTIDASHBOARDS': {
+      const label = 'New Dashboard 1'
+      const toSave = _.pick(state.config, ['dashboard', 'visualizations', 'rows'])
+      const newMultiDashboards = [{ ...toSave, label }]
+      const config = { ...state.config, activeDashboard: 0 }
+      return applyMultiDashboards({ ...state, config }, newMultiDashboards)
+    }
+    case 'SWITCH_CONFIG': {
+      const slot = action.payload
+      const newConfigFields = state.config.multiDashboards[slot]
+      return { ...state, config: { ...state.config, ...newConfigFields, activeDashboard: slot } }
+    }
     default:
       return state
   }
 }
 
-export default reducer
+const applyMultiDashboards = (state, newMultiDashboards) => ({ ...state, config: { ...state.config, multiDashboards: newMultiDashboards } })
+
+export default devToolsWrapper<DashboardState, DashboardActions>(reducer)