@cdc/dashboard 4.24.3 → 4.24.4

package/src/CdcDashboardComponent.tsx

@@ -60,8 +60,11 @@ 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 Toggle from './components/Toggle'
-import { Dashboard } from './types/Dashboard'
+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
@@ -87,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'
@@ -98,7 +103,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
 
   const transform = new DataTransform()
 
-  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
@@ -106,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.
@@ -131,63 +138,69 @@ 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 = (data: 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 ? data[selector] : data, { ...apiFilter, heirarchyLookup: heirarchy.join('.') })
-        }
-        if (!Array.isArray(data)) 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')
+      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 getApplicableFilters = (dashboard: Dashboard, key: string): false | SharedFilter[] => {
-    const c = dashboard.sharedFilters?.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(key) !== -1)
-    return c?.length > 0 ? c : false
-  }
-
-  const reloadURLData = async () => {
-    const { config } = state
+  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]
-      const filters = config.dashboard?.sharedFilters
+
       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 = false
+        let isUpdateNeeded = !!dashboardConfigOverride
 
         filters.forEach(filter => {
           // filter.active is always a string when filter.type is 'urlfilter'
@@ -259,25 +272,20 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
     }
 
     if (datasetsNeedsUpdate) {
+      const dashboardConfig = dashboardConfigOverride || config.dashboard
       dispatch({ type: 'SET_DATA', payload: newData })
 
-      let newFilteredData = {}
-      let visualizations = { ...config.visualizations }
-      getVizKeys(config).forEach(key => {
-        let dataKey = config.visualizations[key].dataKey
-
-        const applicableFilters = getApplicableFilters(config.dashboard, key)
-        if (applicableFilters) {
-          newFilteredData[key] = filterData(applicableFilters, 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]) {
-          visualizations[key].formattedData = newData[dataKey]
+          acc[vizKey].formattedData = newData[dataKey]
         }
-      })
+        return acc
+      }, _.cloneDeep(config.visualizations))
 
       dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
-      dispatch({ type: 'SET_CONFIG', payload: { ...config, datasets: newDatasets, visualizations } })
+      dispatch({ type: 'SET_CONFIG', payload: { dashboard: dashboardConfig, datasets: newDatasets, visualizations } })
     }
   }
 
@@ -292,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) {
@@ -305,19 +312,10 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
       }
     }
 
-    getVizKeys(newConfig).forEach(visualizationKey => {
-      const applicableFilters = getApplicableFilters(newConfig.dashboard, visualizationKey)
-      if (applicableFilters) {
-        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])
-      }
-    })
+    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(() => {
@@ -326,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
     }
 
@@ -350,13 +348,22 @@ 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) {
         const queryParams = getQueryParams()
         let needsQueryUpdate = false
-        state.config.dashboard.sharedFilters.forEach((sharedFilter, index) => {
+        dashboardConfig.sharedFilters.forEach((sharedFilter, index) => {
           if (sharedFilter.queuedActive) {
             dashboardConfig.sharedFilters[index].active = sharedFilter.queuedActive
             delete dashboardConfig.sharedFilters[index].queuedActive
@@ -373,21 +380,28 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
         }
       }
 
-      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 | string[]) => {
-    const { config } = state
-    let dashboardConfig = { ...config.dashboard }
-    let filterActive = dashboardConfig.sharedFilters[index]
+    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) {
@@ -396,47 +410,35 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
       }
     } 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
+      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
-    const dashboardConfig = { ...config.dashboard }
-
-    const newFilteredData = {}
-    getVizKeys(config).forEach(key => {
-      const applicableFilters = getApplicableFilters(dashboardConfig, key)
-      if (applicableFilters) {
-        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)
-      }
-    })
-
+  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 | string[]) => {
-    const { config } = state
-    changeFilterActive(index, value)
+    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
@@ -458,11 +460,12 @@ 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)
       }
     }
   }
@@ -499,23 +502,8 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
     let subVisualizationEditing = false
 
     getVizKeys(state.config).forEach(visualizationKey => {
-      const visualizationConfig = _.cloneDeep(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
@@ -649,226 +637,126 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
       <>
         {isEditor && <Header />}
         <MultiTabs isEditor={isEditor && !isPreview} />
-        <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.filter(col => col.widget).length !== 0)
-              .map((row, index) => {
-                const isToggleRow = row[0].toggle
+        <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
+
+                //Gets list of visuailzations using the dataset
+                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 => {
+                  let allMatch = true
+                  vizKeysUsingDataset.forEach(visualizationKey => {
+                    if (sharedFilter.usedBy && sharedFilter.usedBy.indexOf(visualizationKey) === -1) {
+                      allMatch = false
+                    }
+                  })
+                  if (allMatch) {
+                    applicableFilters.push(sharedFilter)
+                  }
+                })
+
+                //Applys any applicable filters to the Table
+                const filteredTableData = applicableFilters.length > 0 ? filterData(applicableFilters, config.datasets[datasetKey].data) : undefined
                 return (
-                  <div className={`dashboard-row ${row.equalHeight ? 'equal-height' : ''} ${isToggleRow ? 'toggle' : ''}`} key={`row__${index}`}>
-                    {isToggleRow && <Toggle row={row} rowIndex={index} visualizations={config.visualizations} />}
-                    {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>
-
-                        const visualizationConfig = _.cloneDeep(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
-
-                        const hiddenToggle = col.hide !== undefined ? col.hide : colIndex !== 0
-                        const hidden = col.toggle ? hiddenToggle : false
-                        return (
-                          <React.Fragment key={`vis__${index}__${colIndex}`}>
-                            <div className={`dashboard-col dashboard-col-${col.width} ${hidden ? 'hidden-toggle' : ''}`}>
-                              {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} filters={state.config.dashboard.sharedFilters} apiFilterDropdowns={apiFilterDropdowns} handleOnChange={handleOnChange} />
-                                  <GoButton autoLoad={visualizationConfig.autoLoad} />
-                                </>
-                              )}
-                              {visualizationConfig.type === 'table' && <DataTableStandAlone key={col.widget} visualizationKey={col.widget} config={visualizationConfig} viewport={currentViewport} />}
-                            </div>
-                          </React.Fragment>
-                        )
-                      }
-                      return <React.Fragment key={`vis__${index}__${colIndex}`}></React.Fragment>
-                    })}
+                  <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>
                 )
               })}
-
-          {/* 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
-
-              //Gets list of visuailzations using the dataset
-              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 => {
-                let allMatch = true
-                vizKeysUsingDataset.forEach(visualizationKey => {
-                  if (sharedFilter.usedBy && sharedFilter.usedBy.indexOf(visualizationKey) === -1) {
-                    allMatch = false
-                  }
-                })
-                if (allMatch) {
-                  applicableFilters.push(sharedFilter)
-                }
-              })
-
-              //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>
+          </div>
+        </Layout.Responsive>
       </>
     )
   }