@cdc/dashboard 4.24.2 → 4.24.4

package/src/CdcDashboardComponent.tsx

@@ -18,6 +18,7 @@ import OverlayFrame from '@cdc/core/components/ui/OverlayFrame'
 import Loading from '@cdc/core/components/Loading'
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 import getViewport from '@cdc/core/helpers/getViewport'
+import { getQueryParams, updateQueryString } from '@cdc/core/helpers/queryStringUtils'
 
 import CdcMap from '@cdc/map'
 import CdcChart from '@cdc/chart'
@@ -53,13 +54,17 @@ import { type InitialState } from './types/InitialState'
 import MultiTabs from './components/MultiConfigTabs'
 import _ from 'lodash'
 import EditorContext from '../../editor/src/ConfigContext'
-
-type DropdownOptions = Record<'value' | 'text', string>[]
-
-type APIFilterDropdowns = {
-  // null means still loading
-  [filtername: string]: null | DropdownOptions
-}
+import { getApiFilterKey } from './helpers/getApiFilterKey'
+import Filters, { APIFilterDropdowns, DropdownOptions } from './components/Filters'
+import EditorWrapper from './components/EditorWrapper/EditorWrapper'
+import DataTableEditorPanel from '@cdc/core/components/DataTable/components/DataTableEditorPanel'
+import DataTableStandAlone from '@cdc/core/components/DataTable/DataTableStandAlone'
+import { ViewPort } from '@cdc/core/types/ViewPort'
+import VisualizationRow from './components/VisualizationRow'
+import { getVizConfig } from './helpers/getVizConfig'
+import { getApplicableFilters, getFilteredData } from './helpers/getFilteredData'
+import { getVizRowColumnLocator } from './helpers/getVizRowColumnLocator'
+import Layout from '@cdc/core/components/Layout'
 
 type DashboardProps = Omit<WCMSProps, 'configUrl'> & {
   initialState: InitialState
@@ -67,12 +72,12 @@ type DashboardProps = Omit<WCMSProps, 'configUrl'> & {
 
 export default function CdcDashboard({ initialState, isEditor = false, isDebug = false }: DashboardProps) {
   const [state, dispatch] = useReducer(dashboardReducer, initialState)
-  console.log('state', state)
   const editorContext = useContext(EditorContext)
   const [apiFilterDropdowns, setAPIFilterDropdowns] = useState<APIFilterDropdowns>({})
-  const [currentViewport, setCurrentViewport] = useState('lg')
+  const [currentViewport, setCurrentViewport] = useState<ViewPort>('lg')
   const [imageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`)
 
+  const isPreview = state.tabSelected === 'Dashboard Preview'
   const replacements = {
     'Remove Spaces': '',
     'Keep Spaces': ' ',
@@ -85,6 +90,8 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
     return vals.some(val => val === undefined)
   }, [state.data])
 
+  const vizRowColumnLocator = getVizRowColumnLocator(state.config.rows)
+
   const getAutoLoadVisualization = (): Visualization | undefined => {
     const autoLoadViz = Object.values(state.config.visualizations).filter(vis => {
       return vis.autoLoad && vis.type === 'filter-dropdowns'
@@ -96,11 +103,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
 
   const transform = new DataTransform()
 
-  const getApiFilterKey = ({ apiEndpoint, heirarchyLookup }: APIFilter) => {
-    return apiEndpoint + (heirarchyLookup || '')
-  }
-
-  const setAutoLoadDefaultValue = (sharedFilterIndex: number, filterDropdowns: DropdownOptions) => {
+  const setAutoLoadDefaultValue = (sharedFilterIndex: number, filterDropdowns: DropdownOptions, dashboardConfigOverride) => {
     const autoLoadViz = getAutoLoadVisualization()
     if (!autoLoadViz) return // no autoLoading happening
     const notIncludedInAutoLoad = autoLoadViz.hide
@@ -108,20 +111,22 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
       // we don't want to auto load it
       return
     } else {
-      const sharedFilter = state.config.dashboard.sharedFilters[sharedFilterIndex]
+      const sharedFilters = dashboardConfigOverride.sharedFilters
+      const sharedFilter = sharedFilters[sharedFilterIndex]
       if (sharedFilter.active) return // a value has already been selected.
-      const filterParents = state.config.dashboard.sharedFilters.filter(f => sharedFilter.parents?.includes(f.key))
-      const notAllParentFiltersSelected = filterParents.some(p => !p.active)
+      const filterParents = sharedFilters.filter(f => sharedFilter.parents?.includes(f.key))
+      const notAllParentFiltersSelected = filterParents.some(p => !p.active && !p.queuedActive)
       if (filterParents && notAllParentFiltersSelected) return
       const defaultFilterDropdown = filterDropdowns.find(({ value }) => value === sharedFilter.apiFilter!.defaultValue)
-      let defaultValue = defaultFilterDropdown?.value || filterDropdowns[0].value
-      changeFilterActive(sharedFilterIndex, defaultValue)
+      const defaultValue = defaultFilterDropdown?.value || filterDropdowns[0].value
+      sharedFilter.active = defaultValue
     }
   }
 
-  const loadAPIFilters = async () => {
-    if (state.config.dashboard.sharedFilters) {
-      const sharedAPIFilters = state.config.dashboard.sharedFilters.filter(f => f.apiFilter)
+  const loadAPIFilters = (dashboardConfigOverride = undefined) => {
+    const sharedFilters = (dashboardConfigOverride || state.config.dashboard).sharedFilters
+    if (sharedFilters) {
+      const sharedAPIFilters = sharedFilters.filter(f => f.apiFilter)
       const loadingFilterMemo: APIFilterDropdowns = sharedAPIFilters.reduce((acc, curr) => {
         const _key = getApiFilterKey(curr.apiFilter!)
         if (apiFilterDropdowns[_key] != null) return acc // don't overwrite fetched data.
@@ -133,89 +138,108 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
       const getParentParams = (childFilter: SharedFilter): Record<'key' | 'value', string>[] | null => {
         const _parents = sharedAPIFilters.filter(parentFilter => childFilter.parents?.includes(parentFilter.key))
         if (!_parents.length) return null
-        return _parents.map(({ queryParameter, queuedActive }) => ({ key: queryParameter || '', value: queuedActive || '' }))
+        return _parents.map(({ queryParameter, active, queuedActive }) => ({ key: queryParameter || '', value: active || queuedActive || '' }))
       }
-      const getFilterValues = (filterData: Object | Array<Object>, apiFilter: APIFilter): DropdownOptions => {
-        const { textSelector, valueSelector, heirarchyLookup } = apiFilter
-        if (heirarchyLookup) {
-          const heirarchy = heirarchyLookup!.split('.')
-          const selector = heirarchy.shift() // pop first element
-          return getFilterValues(selector ? filterData[selector] : filterData, { ...apiFilter, heirarchyLookup: heirarchy.join('.') })
-        }
-        if (!Array.isArray(filterData)) throw new Error('the filter data has requires a heirarchy path to access the filter values, This should be in the format key.subkey.subsubkey')
-        return filterData.map(v => ({ text: v[textSelector], value: v[valueSelector] }))
+      const getFilterValues = (data: Array<Object>, apiFilter: APIFilter): DropdownOptions => {
+        const { textSelector, valueSelector } = apiFilter
+        return data.map(v => ({ text: v[textSelector], value: v[valueSelector] }))
       }
-      state.config.dashboard.sharedFilters.forEach(async (filter, index) => {
-        if (!filter.apiFilter) return
+      const toFetch = {}
+      sharedAPIFilters.forEach((filter, index) => {
         const baseEndpoint = filter.apiFilter.apiEndpoint
         const _key = getApiFilterKey(filter.apiFilter)
         const params = getParentParams(filter)
         const notAllParentsSelected = params?.some(({ value }) => value === '')
+
         if (notAllParentsSelected) return // don't send request for dependent children filter options
-        if (apiFilterDropdowns[_key] && !params && filter.filterBy === 'Query String') return // don't reload filter unless it's a child
-        const endpoint = baseEndpoint + (params ? gatherQueryParams(params) : '')
+        if (apiFilterDropdowns[_key] && !params) return // don't reload filter unless it's a child
+        const topLevelDataAlreadyLoaded = apiFilterDropdowns[_key] && !filter.parents
+        if (topLevelDataAlreadyLoaded) return // don't reload top level filters
 
-        fetch(endpoint)
-          .then(resp => resp.json())
-          .then(data => {
-            const apiFilter = filterLookup.get(_key) as APIFilter
-            const _filterValues = getFilterValues(data, apiFilter)
-            setAPIFilterDropdowns(dropdowns => ({ ...dropdowns, [_key]: _filterValues }))
-            setAutoLoadDefaultValue(index, _filterValues)
-          })
+        const endpoint = baseEndpoint + (params ? gatherQueryParams(params) : '')
+        toFetch[endpoint] = [_key, index]
       })
+      return Promise.all(
+        Object.keys(toFetch).map(
+          endpoint =>
+            new Promise<void>(resolve => {
+              fetch(endpoint)
+                .then(resp => resp.json())
+                .then(data => {
+                  const [_key, index] = toFetch[endpoint]
+                  if (!Array.isArray(data)) throw new Error('COVE only supports response data in the shape Array<Object>')
+                  const apiFilter = filterLookup.get(_key) as APIFilter
+                  const _filterValues = getFilterValues(data, apiFilter)
+                  setAPIFilterDropdowns(dropdowns => ({ ...dropdowns, [_key]: _filterValues }))
+                  setAutoLoadDefaultValue(index, _filterValues, dashboardConfigOverride)
+                })
+                .catch(console.error)
+                .finally(() => {
+                  resolve()
+                })
+            })
+        )
+      )
     }
   }
 
-  const reloadURLData = async () => {
-    const { config } = state
-    if (config.datasets) {
-      let newData = { ...state.data }
-      let newDatasets = { ...config.datasets }
-      let datasetsNeedsUpdate = false
-      let datasetKeys = Object.keys(config.datasets)
-      let newFileName = ''
-
-      for (let i = 0; i < datasetKeys.length; i++) {
-        const datasetKey = datasetKeys[i]
-        const dataset = config.datasets[datasetKey]
-        if (dataset.dataUrl && config.dashboard && config.dashboard.sharedFilters) {
-          const dataUrl = new URL(dataset.runtimeDataUrl || dataset.dataUrl, window.location.origin)
-          let currentQSParams = Object.fromEntries(new URLSearchParams(dataUrl.search))
-          let updatedQSParams = {}
-          let isUpdateNeeded = false
-
-          config.dashboard.sharedFilters.forEach(filter => {
+  const reloadURLData = async (dashboardConfigOverride = undefined) => {
+    const config = _.cloneDeep(state.config)
+    if (!config.datasets) return
+    let newData = { ...state.data }
+    let newDatasets = { ...config.datasets }
+    let datasetsNeedsUpdate = false
+    let datasetKeys = Object.keys(config.datasets)
+    let newFileName = ''
+    const filters = (dashboardConfigOverride || config.dashboard)?.sharedFilters
+    for (let i = 0; i < datasetKeys.length; i++) {
+      const datasetKey = datasetKeys[i]
+      const dataset = config.datasets[datasetKey]
+
+      if (dataset.dataUrl && filters) {
+        const dataUrl = new URL(dataset.runtimeDataUrl || dataset.dataUrl, window.location.origin)
+        let currentQSParams = Object.fromEntries(new URLSearchParams(dataUrl.search))
+        let updatedQSParams = {}
+        let isUpdateNeeded = !!dashboardConfigOverride
+
+        filters.forEach(filter => {
+          // filter.active is always a string when filter.type is 'urlfilter'
+          if (filter.type === 'urlfilter' && !Array.isArray(filter.active)) {
             if (filter.filterBy === 'File Name') {
-              // if no file name is entered use the default active filter. ie. /activeFilter.json
-              if (!filter.fileName && filter.datasetKey === datasetKey) newFileName = filter.active
-              // if a file name is found, ie, state_${query}, use that, ie. state_activeFilter.json
-              if (filter.datasetKey === datasetKey && filter.fileName) newFileName = capitalizeSplitAndJoin.call(String(filter.fileName), ' ', replacements[filter.whitespaceReplacement ?? 'Keep Spaces'])
-              if (newFileName && newFileName.includes('${query}')) {
+              isUpdateNeeded = true
+              if (filter.datasetKey === datasetKey) {
+                if (filter.fileName) {
+                  // if a file name is found, ie, state_${query}, use that, ie. state_activeFilter.json
+                  newFileName = capitalizeSplitAndJoin.call(String(filter.fileName), ' ', replacements[filter.whitespaceReplacement ?? 'Keep Spaces'])
+                } else {
+                  // if no file name is entered use the default active filter. ie. /activeFilter.json
+                  newFileName = filter.active
+                }
+              }
+
+              if (newFileName?.includes('${query}')) {
                 newFileName = newFileName.replace('${query}', capitalizeSplitAndJoin.call(String(filter.active), ' ', replacements[filter.whitespaceReplacement ?? 'Keep Spaces']))
               }
             }
 
-            if (filter.type === 'urlfilter' && !!filter.queryParameter) {
+            if (!!filter.queryParameter) {
               if (updatedQSParams[filter.queryParameter]) {
                 updatedQSParams[filter.queryParameter] = updatedQSParams[filter.queryParameter] + filter.active
               } else {
                 updatedQSParams[filter.queryParameter] = filter.active
               }
             }
-            if (filter.filterBy === 'File Name') {
-              isUpdateNeeded = true
-            }
-          })
-
-          Object.keys(updatedQSParams).forEach(updatedParam => {
-            if (decodeURIComponent(updatedQSParams[updatedParam]) !== currentQSParams[updatedParam]) {
-              isUpdateNeeded = true
-            }
-          })
+          }
+        })
 
-          if (!isUpdateNeeded) return
+        Object.keys(updatedQSParams).forEach(updatedParam => {
+          if (decodeURIComponent(updatedQSParams[updatedParam]) !== currentQSParams[updatedParam]) {
+            isUpdateNeeded = true
+          }
+        })
 
+        if (isUpdateNeeded) {
+          datasetsNeedsUpdate = true
           Object.keys(currentQSParams).forEach(currentParam => {
             if (!updatedQSParams[currentParam]) {
               updatedQSParams[currentParam] = currentQSParams[currentParam]
@@ -243,32 +267,25 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
           newDatasets[datasetKey].data = newDataset
           newDatasets[datasetKey].runtimeDataUrl = dataUrlFinal
           newData[datasetKey] = newDataset
-          datasetsNeedsUpdate = true
         }
       }
+    }
 
-      if (datasetsNeedsUpdate) {
-        dispatch({ type: 'SET_DATA', payload: newData })
-
-        let newFilteredData = {}
-        let newConfig = { ...config }
-        getVizKeys(config).forEach(key => {
-          let dataKey = config.visualizations[key].dataKey
+    if (datasetsNeedsUpdate) {
+      const dashboardConfig = dashboardConfigOverride || config.dashboard
+      dispatch({ type: 'SET_DATA', payload: newData })
 
-          let applicableFilters = config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(key) !== -1)
-          if (applicableFilters.length > 0) {
-            newFilteredData[key] = filterData(applicableFilters, newData[dataKey], state.config.filterBehavior)
-          }
-
-          if (newData[dataKey]) {
-            newConfig.visualizations[key].formattedData = newData[dataKey]
-          }
-        })
+      const newFilteredData = getFilteredData(state, {}, newData)
+      const visualizations = Object.keys(config.visualizations).reduce((acc, vizKey) => {
+        const dataKey = config.visualizations[vizKey].dataKey
+        if (newData[dataKey]) {
+          acc[vizKey].formattedData = newData[dataKey]
+        }
+        return acc
+      }, _.cloneDeep(config.visualizations))
 
-        dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
-        newConfig.datasets = newDatasets
-        dispatch({ type: 'SET_CONFIG', payload: newConfig })
-      }
+      dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
+      dispatch({ type: 'SET_CONFIG', payload: { dashboard: dashboardConfig, datasets: newDatasets, visualizations } })
     }
   }
 
@@ -283,9 +300,8 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
   }
 
   const setSharedFilter = (key, datum) => {
-    const { config } = state
-    let newConfig = { ...config }
-    let newFilteredData = { ...state.filteredData }
+    const { config: newConfig, filteredData } = _.cloneDeep(state)
+
     for (let i = 0; i < newConfig.dashboard.sharedFilters.length; i++) {
       const filter = newConfig.dashboard.sharedFilters[i]
       if (filter.setBy === key) {
@@ -296,20 +312,10 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
       }
     }
 
-    getVizKeys(newConfig).forEach(visualizationKey => {
-      let applicableFilters = newConfig.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(visualizationKey) !== -1)
-
-      if (applicableFilters.length > 0) {
-        const visualization = newConfig.visualizations[visualizationKey]
-
-        const formattedData = visualization.dataDescription ? getFormattedData(state.data[visualization.dataKey] || visualization.data, visualization.dataDescription) : undefined
-
-        newFilteredData[visualizationKey] = filterData(applicableFilters, formattedData || state.data[visualization.dataKey], state.config.filterBehavior)
-      }
-    })
+    const newFilteredData = getFilteredData({ ...state, config: newConfig }, filteredData)
 
     dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
-    dispatch({ type: 'SET_CONFIG', payload: newConfig })
+    dispatch({ type: 'SET_SHARED_FILTERS', payload: newConfig.dashboard.sharedFilters })
   }
 
   useEffect(() => {
@@ -318,19 +324,19 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
       reloadURLData()
     }
     loadAPIFilters()
-  }, [JSON.stringify(state.config.dashboard ? state.config.dashboard.sharedFilters : undefined)])
+  }, [])
 
   const updateChildConfig = (visualizationKey, newConfig) => {
-    const { config } = state
-    let updatedConfig = { ...config }
+    const config = _.cloneDeep(state.config)
+    const updatedConfig = _.pick(config, ['visualizations', 'multiDashboards'])
     updatedConfig.visualizations[visualizationKey] = newConfig
     updatedConfig.visualizations[visualizationKey].formattedData = config.visualizations[visualizationKey].formattedData
     if (config.multiDashboards) {
       const activeDashboard = config.activeDashboard
       const multiDashboards = [...config.multiDashboards]
       const label = multiDashboards[activeDashboard].label
-      const toSave = _.pick(updatedConfig, ['dashboard', 'visualizations', 'rows'])
-      multiDashboards[activeDashboard] = { ...toSave, label }
+      const toSave = { label, visualizations: updatedConfig.visualizations, ..._.pick(config, ['dashboard', 'rows']) }
+      multiDashboards[activeDashboard] = toSave
       updatedConfig.multiDashboards = multiDashboards
     }
 
@@ -342,74 +348,97 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
   }
 
   const applyFilters = () => {
-    let dashboardConfig = state.config.dashboard
-    const allFiltersSelected = !state.config.dashboard.sharedFilters.some(filter => !filter.active && !filter.queuedActive)
-    if (allFiltersSelected) {
+    const dashboardConfig = _.cloneDeep(state.config.dashboard)
+    const autoLoadViz = getAutoLoadVisualization()
+    const nonAutoLoadFilterIndexes = autoLoadViz?.hide || []
+    const allRequiredFiltersSelected = !dashboardConfig.sharedFilters.some((filter, filterIndex) => {
+      if (nonAutoLoadFilterIndexes.includes(filterIndex)) {
+        !filter.active && !filter.queuedActive
+      } else {
+        // autoload filters don't need to be selected to apply filters
+        return false
+      }
+    })
+    if (allRequiredFiltersSelected) {
       if (state.config.filterBehavior === FilterBehavior.Apply) {
-        state.config.dashboard.sharedFilters.forEach((sharedFilter, index) => {
+        const queryParams = getQueryParams()
+        let needsQueryUpdate = false
+        dashboardConfig.sharedFilters.forEach((sharedFilter, index) => {
           if (sharedFilter.queuedActive) {
             dashboardConfig.sharedFilters[index].active = sharedFilter.queuedActive
             delete dashboardConfig.sharedFilters[index].queuedActive
+
+            if (sharedFilter.setByQueryParameter && queryParams[sharedFilter.setByQueryParameter] !== sharedFilter.active) {
+              queryParams[sharedFilter.setByQueryParameter] = sharedFilter.active
+              needsQueryUpdate = true
+            }
           }
         })
+
+        if (needsQueryUpdate) {
+          updateQueryString(queryParams)
+        }
       }
 
-      dispatch({ type: 'SET_CONFIG', payload: { ...state.config, dashboard: dashboardConfig } })
+      dispatch({ type: 'SET_SHARED_FILTERS', payload: dashboardConfig.sharedFilters })
       updateDataFilters()
-      reloadURLData()
+      loadAPIFilters(dashboardConfig)
+        .then(() => {
+          reloadURLData(dashboardConfig)
+        })
+        .catch(e => {
+          console.error(e)
+        })
     } else {
       // TODO noftify of required fields
     }
   }
 
-  const changeFilterActive = (index: number, value: string) => {
-    const { config } = state
-    let dashboardConfig = { ...config.dashboard }
+  const changeFilterActive = (index: number, value: string | string[]) => {
+    const sharedFilters = _.cloneDeep(state.config.dashboard.sharedFilters)
+    const filterActive = sharedFilters[index]
+    const nonAutoLoadFilterIndexes = getAutoLoadVisualization()?.hide
+    const isAutoLoad = nonAutoLoadFilterIndexes && !nonAutoLoadFilterIndexes.includes(index)
 
-    if (config.filterBehavior !== FilterBehavior.Apply) {
-      dashboardConfig.sharedFilters[index].active = value
+    if (state.config.filterBehavior !== FilterBehavior.Apply || isAutoLoad) {
+      sharedFilters[index].active = value
+
+      const queryParams = getQueryParams()
+      if (filterActive.setByQueryParameter && queryParams[filterActive.setByQueryParameter] !== filterActive.active) {
+        queryParams[filterActive.setByQueryParameter] = filterActive.active
+        updateQueryString(queryParams)
+      }
     } else {
-      dashboardConfig.sharedFilters[index].queuedActive = value
+      if (Array.isArray(value)) throw Error(`Cannot set active values on urlfilters. expected: ${JSON.stringify(value)} to be a single value.`)
+      sharedFilters[index].queuedActive = value
     }
 
-    dispatch({ type: 'SET_CONFIG', payload: { ...config, dashboard: dashboardConfig } })
-    if (config.filterBehavior !== FilterBehavior.Apply) {
-      updateDataFilters()
+    dispatch({ type: 'SET_SHARED_FILTERS', payload: sharedFilters })
+    if (state.config.filterBehavior !== FilterBehavior.Apply) {
+      updateDataFilters(sharedFilters)
       reloadURLData()
     }
+    return sharedFilters
   }
 
-  const updateDataFilters = () => {
-    const { config } = state
-    let dashboardConfig = { ...config.dashboard }
-
-    let newFilteredData = {}
-    getVizKeys(config).forEach(key => {
-      let applicableFilters = dashboardConfig.sharedFilters.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(key) !== -1)
-      if (applicableFilters.length > 0) {
-        const visualization = config.visualizations[key]
-        const _data = state.data[visualization.dataKey] || visualization.data
-        const formattedData = visualization.dataDescription ? getFormattedData(_data, visualization.dataDescription) : _data
-
-        newFilteredData[key] = filterData(applicableFilters, formattedData, config.filterBehavior)
-      }
-    })
-
+  const updateDataFilters = (sharedFilters = undefined) => {
+    const clonedState = _.cloneDeep(state)
+    if (sharedFilters) clonedState.config.dashboard.sharedFilters = sharedFilters
+    const newFilteredData = getFilteredData(clonedState)
     dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
   }
 
-  const handleOnChange = (index: number, value: string) => {
-    const { config } = state
-    changeFilterActive(index, value)
+  const handleOnChange = (index: number, value: string | string[]) => {
+    const config = _.cloneDeep(state.config)
+    const newSharedFilters = changeFilterActive(index, value)
     if (config.filterBehavior === FilterBehavior.Apply) {
       const autoLoadViz = getAutoLoadVisualization()
-      if (!autoLoadViz) return // nothing left to do for regular filter behavior.
-      const isAutoSelectFilter = !autoLoadViz.hide.includes(index)
+      const isAutoSelectFilter = !autoLoadViz?.hide.includes(index)
       const missingFilterSelections = config.dashboard.sharedFilters.some(f => !f.active)
       if (isAutoSelectFilter && !missingFilterSelections) {
         // a dropdown has been selected that doesn't
         // require the Go Button
-        reloadURLData()
+        reloadURLData({ sharedFilters: newSharedFilters })
       } else {
         // A parent filter was selected, reset filters by:
         // set auto select filter dropdowns to null
@@ -423,6 +452,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
         if (config.filterBehavior !== FilterBehavior.Apply) {
           dashboardConfig.sharedFilters[index].active = value
         } else {
+          if (Array.isArray(value)) throw Error(`Cannot set active values on urlfilters. expected: ${JSON.stringify(value)} to be a single value.`)
           dashboardConfig.sharedFilters[index].queuedActive = value
         }
         const newSharedFilters = config.dashboard.sharedFilters.map((filter, _index) => {
@@ -430,77 +460,16 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
           if (_isAutoSelectFilter) filter.active = ''
           return filter
         })
-        const _newConfig = { ...config, dashboard: { ...config.dashboard, sharedFilters: newSharedFilters } }
+        const _newConfig = { dashboard: { ...config.dashboard, sharedFilters: newSharedFilters } }
         dispatch({ type: 'SET_CONFIG', payload: _newConfig })
         // setData to empty object because we no longer have a data state.
         dispatch({ type: 'SET_DATA', payload: {} })
         dispatch({ type: 'SET_FILTERED_DATA', payload: {} })
+        loadAPIFilters(_newConfig.dashboard)
       }
     }
   }
 
-  const Filters = ({ hide, autoLoad }: { hide?: number[]; autoLoad?: boolean }) => {
-    const { config } = state
-    const isLegacyFilter = !config.filterBehavior
-    return (
-      <>
-        {config.dashboard.sharedFilters.map((singleFilter, filterIndex) => {
-          if ((singleFilter.type !== 'urlfilter' && !singleFilter.showDropdown) || (hide && hide.indexOf(filterIndex) !== -1)) return <></>
-          const values: JSX.Element[] = []
-          if (singleFilter.resetLabel) {
-            values.push(
-              <option key={`${singleFilter.resetLabel}-option`} value={singleFilter.resetLabel}>
-                {singleFilter.resetLabel}
-              </option>
-            )
-          }
-          const _key = singleFilter.apiFilter ? getApiFilterKey(singleFilter.apiFilter) : undefined
-          if (_key && apiFilterDropdowns[_key]) {
-            // URL Filter
-            apiFilterDropdowns[_key]!.forEach(({ text, value }, index) => {
-              values.push(
-                <option key={`${value}-option-${index}`} value={value}>
-                  {text}
-                </option>
-              )
-            })
-          } else {
-            // Data Filter
-            singleFilter.values?.forEach((filterOption, index) => {
-              const labeledOpt = singleFilter.labels && singleFilter.labels[filterOption]
-              values.push(
-                <option key={`${singleFilter.key}-option-${index}`} value={filterOption}>
-                  {labeledOpt || filterOption}
-                </option>
-              )
-            })
-          }
-
-          return (
-            <div className='cove-dashboard-filters' key={`${singleFilter.key}-filtersection-${filterIndex}`}>
-              <section className='dashboard-filters-section'>
-                <label htmlFor={`filter-${filterIndex}`}>{singleFilter.key}</label>
-                <select
-                  id={`filter-${filterIndex}`}
-                  className='filter-select'
-                  data-index='0'
-                  value={singleFilter.queuedActive || singleFilter.active}
-                  onChange={val => {
-                    handleOnChange(filterIndex, val.target.value)
-                  }}
-                >
-                  {values}
-                </select>
-              </section>
-            </div>
-          )
-        })}
-
-        {!isLegacyFilter && config.filterBehavior === FilterBehavior.Apply && <button onClick={applyFilters}>GO!</button>}
-      </>
-    )
-  }
-
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
       let newViewport = getViewport(entry.contentRect.width)
@@ -520,29 +489,21 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
   // Prevent render if loading
   if (state.loading) return <Loading />
 
+  const GoButton = ({ autoLoad }: { autoLoad?: boolean }) => {
+    if (state.config.filterBehavior === FilterBehavior.Apply && !autoLoad) {
+      return <button onClick={applyFilters}>GO!</button>
+    }
+    return null
+  }
+
   let body: JSX.Element | null = null
   // Editor mode
-  if (isEditor && !state.preview) {
+  if (isEditor && !isPreview) {
     let subVisualizationEditing = false
 
     getVizKeys(state.config).forEach(visualizationKey => {
-      let visualizationConfig = { ...state.config.visualizations[visualizationKey] }
-
-      const dataKey = visualizationConfig.dataKey || 'backwards-compatibility'
-
-      if (state.filteredData && state.filteredData[visualizationKey]) {
-        visualizationConfig.data = state.filteredData[visualizationKey]
-        if (visualizationConfig.formattedData) {
-          visualizationConfig.originalFormattedData = visualizationConfig.formattedData
-          visualizationConfig.formattedData = visualizationConfig.data
-        }
-      } else {
-        visualizationConfig.data = state.data[dataKey]
-        if (visualizationConfig.formattedData) {
-          visualizationConfig.originalFormattedData = visualizationConfig.formattedData
-          visualizationConfig.formattedData = transform.developerStandardize(visualizationConfig.data, visualizationConfig.dataDescription) || visualizationConfig.data
-        }
-      }
+      const rowNumber = vizRowColumnLocator[visualizationKey]?.row
+      const visualizationConfig = getVizConfig(visualizationKey, rowNumber, state.config, state.data, state.filteredData)
 
       const setsSharedFilter = state.config.dashboard.sharedFilters && state.config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === visualizationKey).length > 0
       const setSharedFilterValue = setsSharedFilter ? state.config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === visualizationKey)[0].active : undefined
@@ -598,11 +559,10 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
             )
             break
           case 'data-bite':
-            visualizationConfig = { ...visualizationConfig, newViz: true }
             body = (
               <>
                 <Header visualizationKey={visualizationKey} subEditor='Data Bite' />
-                <CdcDataBite key={visualizationKey} config={visualizationConfig} isEditor={true} setConfig={_updateConfig} isDashboard={true} />
+                <CdcDataBite key={visualizationKey} config={{ ...visualizationConfig, newViz: true }} isEditor={true} setConfig={_updateConfig} isDashboard={true} />
               </>
             )
             break
@@ -635,12 +595,20 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
             body = !hideFilter ? (
               <>
                 <Header visualizationKey={visualizationKey} subEditor='Filter Dropdowns' />
-                <Filters hide={visualizationConfig.hide} autoLoad={visualizationConfig.autoLoad} />
+                <Filters hide={visualizationConfig.hide} filters={state.config.dashboard.sharedFilters} apiFilterDropdowns={apiFilterDropdowns} handleOnChange={handleOnChange} />
+                <GoButton autoLoad={visualizationConfig.autoLoad} />
               </>
             ) : (
               <></>
             )
             break
+          case 'table':
+            body = (
+              <EditorWrapper component={DataTableStandAlone} visualizationKey={visualizationKey} visualizationConfig={visualizationConfig} updateConfig={_updateConfig} type={'Table'} viewport={currentViewport}>
+                <DataTableEditorPanel key={visualizationKey} config={visualizationConfig} updateConfig={_updateConfig} />
+              </EditorWrapper>
+            )
+            break
           default:
             body = <></>
             break
@@ -652,7 +620,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
       body = (
         <DndProvider backend={HTML5Backend}>
           <div className='header-container'>
-            <Header setPreview={setPreview} />
+            <Header />
             <VisualizationsPanel loadConfig={newConfig => dispatch({ type: 'UPDATE_CONFIG', payload: [newConfig] })} config={state.config} />
           </div>
 
@@ -667,188 +635,98 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
     const { title, description } = config.dashboard || {}
     body = (
       <>
-        {isEditor && <Header setPreview={setPreview} />}
-        <MultiTabs isEditor={isEditor && !state.preview} />
-        <div className={`cdc-dashboard-inner-container${isEditor ? ' is-editor' : ''}`}>
-          <Title title={title} isDashboard={true} classes={[`dashboard-title`, `${config.dashboard.theme ?? 'theme-blue'}`]} />
-          {/* Description */}
-          {description && <div className='subtext'>{parse(description)}</div>}
-
-          {/* Filters */}
-          {config.dashboard.sharedFilters && Object.values(config.visualizations || {}).filter(viz => viz.visualizationType === 'filter-dropdowns').length === 0 && <Filters hide={undefined} autoLoad={undefined} />}
-
-          {/* Visualizations */}
-          {config.rows &&
-            config.rows
-              .filter(row => row.filter(col => col.widget).length !== 0)
-              .map((row, index) => {
-                return (
-                  <div className={`dashboard-row ${row.equalHeight ? 'equal-height' : ''}`} key={`row__${index}`}>
-                    {row.map((col, colIndex) => {
-                      if (col.width) {
-                        if (!col.widget) return <div key={`row__${index}__col__${colIndex}`} className={`dashboard-col dashboard-col-${col.width}`}></div>
-
-                        let visualizationConfig = { ...config.visualizations[col.widget] }
-
-                        const dataKey = visualizationConfig.dataKey || 'backwards-compatibility'
-
-                        if (state.filteredData && state.filteredData[col.widget]) {
-                          visualizationConfig.data = state.filteredData[col.widget]
-                          if (visualizationConfig.formattedData) {
-                            visualizationConfig.originalFormattedData = visualizationConfig.formattedData
-                            visualizationConfig.formattedData = visualizationConfig.data
-                          }
-                        } else {
-                          visualizationConfig.data = state.data[dataKey]
-                          if (visualizationConfig.formattedData) {
-                            visualizationConfig.originalFormattedData = visualizationConfig.formattedData
-                            visualizationConfig.formattedData = transform.developerStandardize(visualizationConfig.data, visualizationConfig.dataDescription) || visualizationConfig.data
-                          }
-                        }
-
-                        const setsSharedFilter = config.dashboard.sharedFilters && config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === col.widget).length > 0
-                        const setSharedFilterValue = setsSharedFilter ? config.dashboard.sharedFilters.filter(sharedFilter => sharedFilter.setBy === col.widget)[0].active : undefined
-                        const tableLink = (
-                          <a href={`#data-table-${visualizationConfig.dataKey}`} className='margin-left-href'>
-                            {visualizationConfig.dataKey} (Go to Table)
-                          </a>
-                        )
-                        const hideFilter = visualizationConfig.autoLoad && inNoDataState
-                        return (
-                          <React.Fragment key={`vis__${index}__${colIndex}`}>
-                            <div className={`dashboard-col dashboard-col-${col.width}`}>
-                              {visualizationConfig.type === 'chart' && (
-                                <CdcChart
-                                  key={col.widget}
-                                  config={visualizationConfig}
-                                  dashboardConfig={config}
-                                  isEditor={false}
-                                  setConfig={newConfig => {
-                                    updateChildConfig(col.widget, newConfig)
-                                  }}
-                                  setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
-                                  isDashboard={true}
-                                  link={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
-                                  configUrl={undefined}
-                                  setEditing={undefined}
-                                  hostname={undefined}
-                                  setSharedFilterValue={undefined}
-                                />
-                              )}
-                              {visualizationConfig.type === 'map' && (
-                                <CdcMap
-                                  key={col.widget}
-                                  config={visualizationConfig}
-                                  isEditor={false}
-                                  setConfig={newConfig => {
-                                    updateChildConfig(col.widget, newConfig)
-                                  }}
-                                  showLoader={false}
-                                  setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
-                                  setSharedFilterValue={setSharedFilterValue}
-                                  isDashboard={true}
-                                  link={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
-                                />
-                              )}
-                              {visualizationConfig.type === 'data-bite' && (
-                                <CdcDataBite
-                                  key={col.widget}
-                                  config={visualizationConfig}
-                                  isEditor={false}
-                                  setConfig={newConfig => {
-                                    updateChildConfig(col.widget, newConfig)
-                                  }}
-                                  isDashboard={true}
-                                />
-                              )}
-                              {visualizationConfig.type === 'waffle-chart' && (
-                                <CdcWaffleChart
-                                  key={col.widget}
-                                  config={visualizationConfig}
-                                  isEditor={false}
-                                  setConfig={newConfig => {
-                                    updateChildConfig(col.widget, newConfig)
-                                  }}
-                                  isDashboard={true}
-                                  configUrl={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
-                                />
-                              )}
-                              {visualizationConfig.type === 'markup-include' && (
-                                <CdcMarkupInclude
-                                  key={col.widget}
-                                  config={visualizationConfig}
-                                  isEditor={false}
-                                  setConfig={newConfig => {
-                                    updateChildConfig(col.widget, newConfig)
-                                  }}
-                                  isDashboard={true}
-                                  configUrl={undefined}
-                                />
-                              )}
-                              {visualizationConfig.type === 'filtered-text' && (
-                                <CdcFilteredText
-                                  key={col.widget}
-                                  config={visualizationConfig}
-                                  isEditor={false}
-                                  setConfig={newConfig => {
-                                    updateChildConfig(col.widget, newConfig)
-                                  }}
-                                  isDashboard={true}
-                                  configUrl={undefined}
-                                />
-                              )}
-                              {visualizationConfig.type === 'filter-dropdowns' && !hideFilter && <Filters hide={visualizationConfig.hide} autoLoad={visualizationConfig.autoLoad} />}
-                            </div>
-                          </React.Fragment>
-                        )
-                      }
-                      return <React.Fragment key={`vis__${index}__${colIndex}`}></React.Fragment>
-                    })}
-                  </div>
-                )
-              })}
+        {isEditor && <Header />}
+        <MultiTabs isEditor={isEditor && !isPreview} />
+        <Layout.Responsive isEditor={isEditor}>
+          <div className={`cdc-dashboard-inner-container${isEditor ? ' is-editor' : ''}`}>
+            <Title title={title} isDashboard={true} classes={[`dashboard-title`, `${config.dashboard.theme ?? 'theme-blue'}`]} />
+            {/* Description */}
+            {description && <div className='subtext'>{parse(description)}</div>}
+
+            {/* Filters */}
+            {config.dashboard.sharedFilters && Object.values(config.visualizations || {}).filter(viz => viz.visualizationType === 'filter-dropdowns').length === 0 && (
+              <>
+                <Filters filters={state.config.dashboard.sharedFilters} apiFilterDropdowns={apiFilterDropdowns} handleOnChange={handleOnChange} />
+                <GoButton />
+              </>
+            )}
+
+            {/* Visualizations */}
+            {config.rows &&
+              config.rows
+                .filter(row => row.columns.filter(col => col.widget).length !== 0)
+                .map((row, index) => {
+                  if (row.multiVizColumn && (isPreview || !isEditor)) {
+                    const filteredData = getFilteredData(state)
+                    const data = filteredData[index] ?? row.formattedData
+                    const dataGroups = {}
+                    data.forEach(d => {
+                      const groupKey = d[row.multiVizColumn]
+                      if (!dataGroups[groupKey]) dataGroups[groupKey] = []
+                      dataGroups[groupKey].push(d)
+                    })
+                    return Object.keys(dataGroups).map(groupName => {
+                      const dataValue = dataGroups[groupName]
+                      return (
+                        <React.Fragment key={`row__${index}__${groupName}`}>
+                          <h1 className='h4'>{groupName}</h1>
+                          <VisualizationRow
+                            filteredDataOverride={dataValue}
+                            row={row}
+                            rowIndex={index}
+                            setSharedFilter={setSharedFilter}
+                            updateChildConfig={updateChildConfig}
+                            applyFilters={applyFilters}
+                            apiFilterDropdowns={apiFilterDropdowns}
+                            handleOnChange={handleOnChange}
+                            currentViewport={currentViewport}
+                          />
+                        </React.Fragment>
+                      )
+                    })
+                  } else {
+                    return (
+                      <VisualizationRow key={`row__${index}`} row={row} rowIndex={index} setSharedFilter={setSharedFilter} updateChildConfig={updateChildConfig} applyFilters={applyFilters} apiFilterDropdowns={apiFilterDropdowns} handleOnChange={handleOnChange} currentViewport={currentViewport} />
+                    )
+                  }
+                })}
+
+            {/* Image or PDF Inserts */}
+            <section className='download-buttons'>
+              {config.table?.downloadImageButton && <MediaControls.Button title='Download Dashboard as Image' type='image' state={config} text='Download Dashboard Image' elementToCapture={imageId} />}
+              {config.table?.downloadPdfButton && <MediaControls.Button title='Download Dashboard as PDF' type='pdf' state={config} text='Download Dashboard PDF' elementToCapture={imageId} />}
+            </section>
+
+            {/* Data Table */}
+            {config.table?.show && config.data && (
+              <DataTable
+                config={config}
+                rawData={config.data?.[0]?.tableData ? config.data?.[0]?.tableData : config.data}
+                runtimeData={config.data?.[0]?.tableData ? config.data?.[0]?.tableData : config.data || []}
+                expandDataTable={config.table.expanded}
+                showDownloadButton={config.table.download}
+                tableTitle={config.dashboard.title || ''}
+                viewport={currentViewport}
+                tabbingId={config.dashboard.title || ''}
+                outerContainerRef={outerContainerRef}
+                imageRef={imageId}
+                isDebug={isDebug}
+                isEditor={isEditor}
+              />
+            )}
+            {config.table?.show &&
+              config.datasets &&
+              Object.keys(config.datasets).map(datasetKey => {
+                //For each dataset, find any shared filters that apply to all visualizations using the dataset
 
-          {/* Image or PDF Inserts */}
-          <section className='download-buttons'>
-            {config.table?.downloadImageButton && <MediaControls.Button title='Download Dashboard as Image' type='image' state={config} text='Download Dashboard Image' elementToCapture={imageId} />}
-            {config.table?.downloadPdfButton && <MediaControls.Button title='Download Dashboard as PDF' type='pdf' state={config} text='Download Dashboard PDF' elementToCapture={imageId} />}
-          </section>
-
-          {/* Data Table */}
-          {config.table?.show && config.data && (
-            <DataTable
-              config={config}
-              rawData={config.data}
-              runtimeData={config.data || []}
-              expandDataTable={config.table.expanded}
-              showDownloadButton={config.table.download}
-              tableTitle={config.dashboard.title || ''}
-              viewport={currentViewport}
-              tabbingId={config.dashboard.title || ''}
-              outerContainerRef={outerContainerRef}
-              imageRef={imageId}
-              isDebug={isDebug}
-              isEditor={isEditor}
-            />
-          )}
-          {config.table?.show &&
-            config.datasets &&
-            Object.keys(config.datasets).map(datasetKey => {
-              //For each dataset, find any shared filters that apply to all visualizations using the dataset
-              //Apply these filters to the table
-              let filteredTableData
-              if (config.dashboard.sharedFilters && config.dashboard.sharedFilters.length > 0) {
                 //Gets list of visuailzations using the dataset
-                let vizKeysUsingDataset: string[] = []
-                getVizKeys(config).forEach(visualizationKey => {
-                  if (config.visualizations[visualizationKey].dataKey === datasetKey) {
-                    vizKeysUsingDataset.push(visualizationKey)
-                  }
+                const vizKeysUsingDataset: string[] = getVizKeys(config).filter(visualizationKey => {
+                  return config.visualizations[visualizationKey].dataKey === datasetKey
                 })
 
                 //Checks shared filters against list to see if all visualizations are represented
                 let applicableFilters: SharedFilter[] = []
-                config.dashboard.sharedFilters.forEach(sharedFilter => {
+                config.dashboard.sharedFilters?.forEach(sharedFilter => {
                   let allMatch = true
                   vizKeysUsingDataset.forEach(visualizationKey => {
                     if (sharedFilter.usedBy && sharedFilter.usedBy.indexOf(visualizationKey) === -1) {
@@ -860,28 +738,25 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
                   }
                 })
 
-                //Applys any applicable filters
-                if (applicableFilters.length > 0) {
-                  filteredTableData = filterData(applicableFilters, config.datasets[datasetKey].data, state.config.filterBehavior)
-                }
-              }
-
-              return (
-                <div className='multi-table-container' id={`data-table-${datasetKey}`} key={`data-table-${datasetKey}`}>
-                  <DataTable
-                    config={config as TableConfig}
-                    dataConfig={config.datasets[datasetKey]}
-                    rawData={config.datasets[datasetKey].data}
-                    runtimeData={filteredTableData || config.datasets[datasetKey].data || []}
-                    expandDataTable={config.table.expanded}
-                    tableTitle={datasetKey}
-                    viewport={currentViewport}
-                    tabbingId={datasetKey}
-                  />
-                </div>
-              )
-            })}
-        </div>
+                //Applys any applicable filters to the Table
+                const filteredTableData = applicableFilters.length > 0 ? filterData(applicableFilters, config.datasets[datasetKey].data) : undefined
+                return (
+                  <div className='multi-table-container' id={`data-table-${datasetKey}`} key={`data-table-${datasetKey}`}>
+                    <DataTable
+                      config={config as TableConfig}
+                      dataConfig={config.datasets[datasetKey]}
+                      rawData={config.datasets[datasetKey].data?.[0]?.tableData || config.datasets[datasetKey].data}
+                      runtimeData={config.datasets[datasetKey].data?.[0]?.tableData || filteredTableData || config.datasets[datasetKey].data || []}
+                      expandDataTable={config.table.expanded}
+                      tableTitle={datasetKey}
+                      viewport={currentViewport}
+                      tabbingId={datasetKey}
+                    />
+                  </div>
+                )
+              })}
+          </div>
+        </Layout.Responsive>
       </>
     )
   }