@cdc/dashboard 4.24.4 → 4.24.7

package/src/CdcDashboardComponent.tsx

@@ -18,7 +18,6 @@ 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'
@@ -28,19 +27,16 @@ import CdcMarkupInclude from '@cdc/markup-include'
 import CdcFilteredText from '@cdc/filtered-text'
 
 import Grid from './components/Grid'
-import Header, { FilterBehavior } from './components/Header/Header'
+import Header from './components/Header/Header'
 import DataTable from '@cdc/core/components/DataTable'
 import MediaControls from '@cdc/core/components/MediaControls'
 
 import './scss/main.scss'
 import '@cdc/core/styles/v2/main.scss'
-import { gatherQueryParams } from '@cdc/core/helpers/gatherQueryParams'
-import { capitalizeSplitAndJoin } from '@cdc/core/helpers/cove/string'
 
 import VisualizationsPanel from './components/VisualizationsPanel'
 import dashboardReducer from './store/dashboard.reducer'
 import { filterData } from './helpers/filterData'
-import { getFormattedData } from './helpers/getFormattedData'
 import { getVizKeys } from './helpers/getVizKeys'
 import Title from '@cdc/core/components/ui/Title'
 import { type TableConfig } from '@cdc/core/components/DataTable/types/TableConfig'
@@ -48,23 +44,27 @@ import { type TableConfig } from '@cdc/core/components/DataTable/types/TableConf
 // types
 import { type SharedFilter } from './types/SharedFilter'
 import { type APIFilter } from './types/APIFilter'
-import { type Visualization } from '@cdc/core/types/Visualization'
 import { type WCMSProps } from '@cdc/core/types/WCMSProps'
 import { type InitialState } from './types/InitialState'
 import MultiTabs from './components/MultiConfigTabs'
 import _ from 'lodash'
 import EditorContext from '../../editor/src/ConfigContext'
-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 { APIFilterDropdowns, DropdownOptions } from './components/DashboardFilters'
 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 { getFilteredData } from './helpers/getFilteredData'
 import { getVizRowColumnLocator } from './helpers/getVizRowColumnLocator'
 import Layout from '@cdc/core/components/Layout'
+import FootnotesStandAlone from '@cdc/core/components/Footnotes/FootnotesStandAlone'
+import * as apiFilterHelpers from './helpers/apiFilterHelpers'
+import * as reloadURLHelpers from './helpers/reloadURLHelpers'
+import { addValuesToFilters } from '@cdc/core/helpers/addValuesToFilters'
+import { DashboardFilters } from './types/DashboardFilters'
+import DashboardSharedFilters from './components/DashboardFilters'
+import ExpandCollapseButtons from './components/ExpandCollapseButtons'
+import { hasDashboardApplyBehavior } from './helpers/hasDashboardApplyBehavior'
 
 type DashboardProps = Omit<WCMSProps, 'configUrl'> & {
   initialState: InitialState
@@ -76,13 +76,9 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
   const [apiFilterDropdowns, setAPIFilterDropdowns] = useState<APIFilterDropdowns>({})
   const [currentViewport, setCurrentViewport] = useState<ViewPort>('lg')
   const [imageId] = useState(`cove-${Math.random().toString(16).slice(-4)}`)
+  const [allExpanded, setAllExpanded] = useState(true)
 
   const isPreview = state.tabSelected === 'Dashboard Preview'
-  const replacements = {
-    'Remove Spaces': '',
-    'Keep Spaces': ' ',
-    'Replace With Underscore': '_'
-  }
 
   const inNoDataState = useMemo(() => {
     const vals = Object.values(state.data)
@@ -92,134 +88,97 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
 
   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'
-    })
-    if (autoLoadViz.length === 0) return
-    if (autoLoadViz.length > 1) throw new Error('Only one filter row can be autoloaded')
-    return autoLoadViz[0]
-  }
-
   const transform = new DataTransform()
 
-  const setAutoLoadDefaultValue = (sharedFilterIndex: number, filterDropdowns: DropdownOptions, dashboardConfigOverride) => {
-    const autoLoadViz = getAutoLoadVisualization()
-    if (!autoLoadViz) return // no autoLoading happening
-    const notIncludedInAutoLoad = autoLoadViz.hide
-    if (notIncludedInAutoLoad.includes(sharedFilterIndex)) {
-      // we don't want to auto load it
-      return
-    } else {
-      const sharedFilters = dashboardConfigOverride.sharedFilters
-      const sharedFilter = sharedFilters[sharedFilterIndex]
-      if (sharedFilter.active) return // a value has already been selected.
+  const autoLoadFilterIndexes = useMemo(() => {
+    return Object.values(state.config.visualizations)
+      .filter(v => v.type === 'dashboardFilters')
+      .reduce((acc, viz: DashboardFilters) => (viz.autoLoad ? [...acc, ...viz.sharedFilterIndexes] : acc), [])
+  }, [state.config.visualizations])
+
+  const setAutoLoadDefaultValue = (sharedFilterIndex: number, dropdownOptions: DropdownOptions, sharedFilters): SharedFilter => {
+    const sharedFilter = _.cloneDeep(sharedFilters[sharedFilterIndex])
+    if (!autoLoadFilterIndexes.length || !dropdownOptions) return sharedFilter // no autoLoading happening
+    if (!sharedFilter.active && autoLoadFilterIndexes.includes(sharedFilterIndex)) {
       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)
-      const defaultValue = defaultFilterDropdown?.value || filterDropdowns[0].value
+      const notAllParentFiltersSelected = filterParents.some(p => !(p.active || p.queuedActive))
+      if (filterParents && notAllParentFiltersSelected) return sharedFilter
+      // TODO get default value from query parameter
+      const defaultValue = dropdownOptions[0].value
       sharedFilter.active = defaultValue
     }
+    return sharedFilter
   }
 
-  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.
-        acc[_key] = null
+  const loadAPIFilters = (sharedFilters: SharedFilter[], dropdowns = apiFilterDropdowns, recursiveLimit = 3): Promise<SharedFilter[]> => {
+    if (!sharedFilters) return
+    sharedFilters = sharedFilters.map((filter, index) => setAutoLoadDefaultValue(index, dropdowns[filter.apiFilter?.apiEndpoint], sharedFilters))
+    const sharedAPIFilters = sharedFilters.filter(f => f.apiFilter)
+    const loadingFilterMemo = apiFilterHelpers.getLoadingFilterMemo(sharedAPIFilters, dropdowns)
+    setAPIFilterDropdowns({ ...dropdowns, ...loadingFilterMemo })
+    const filterLookup = new Map(sharedAPIFilters.map(filter => [filter.apiFilter.apiEndpoint, filter.apiFilter]))
+    const toFetch = apiFilterHelpers.getToFetch(sharedAPIFilters, dropdowns)
+    const newDropdowns = _.cloneDeep(dropdowns)
+    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 = apiFilterHelpers.getFilterValues(data, apiFilter)
+                newDropdowns[_key] = _filterValues
+                const newDefaultSelectedFilter = setAutoLoadDefaultValue(index, _filterValues, sharedFilters)
+                sharedFilters[index] = newDefaultSelectedFilter
+              })
+              .catch(console.error)
+              .finally(() => {
+                resolve()
+              })
+          })
+      )
+    ).then(() => {
+      const finishedLoading = sharedFilters.reduce((acc, curr, index) => {
+        if (autoLoadFilterIndexes.includes(index) && !curr.active) return false
         return acc
-      }, {})
-      setAPIFilterDropdowns({ ...apiFilterDropdowns, ...loadingFilterMemo })
-      const filterLookup = new Map(sharedAPIFilters.map(filter => [getApiFilterKey(filter.apiFilter!), filter.apiFilter!]))
-      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, active, queuedActive }) => ({ key: queryParameter || '', value: active || queuedActive || '' }))
-      }
-      const getFilterValues = (data: Array<Object>, apiFilter: APIFilter): DropdownOptions => {
-        const { textSelector, valueSelector } = apiFilter
-        return data.map(v => ({ text: v[textSelector], value: v[valueSelector] }))
+      }, true)
+      if (finishedLoading || recursiveLimit === 0) {
+        setAPIFilterDropdowns(dropdowns => ({ ...dropdowns, ...newDropdowns }))
+        dispatch({ type: 'SET_SHARED_FILTERS', payload: sharedFilters })
+        return sharedFilters
+      } else {
+        return loadAPIFilters(sharedFilters, newDropdowns, recursiveLimit - 1)
       }
-      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) 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
-
-        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 (dashboardConfigOverride = undefined) => {
+  const reloadURLData = async (newFilters?: SharedFilter[]) => {
     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)
+    const filters = newFilters || config.dashboard.sharedFilters
+    const datasetKeys = Object.keys(config.datasets)
+
+    const newData = _.cloneDeep(state.data)
+    const newDatasets = _.cloneDeep(config.datasets)
+    let dataWasFetched = false
     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
-
+        const currentQSParams = Object.fromEntries(new URLSearchParams(dataUrl.search))
+        const updatedQSParams = {}
         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') {
-              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']))
-              }
+              newFileName = reloadURLHelpers.getNewFileName(newFileName, filter, datasetKey)
             }
 
             if (!!filter.queryParameter) {
@@ -229,62 +188,42 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
                 updatedQSParams[filter.queryParameter] = filter.active
               }
             }
-          }
-        })
 
-        Object.keys(updatedQSParams).forEach(updatedParam => {
-          if (decodeURIComponent(updatedQSParams[updatedParam]) !== currentQSParams[updatedParam]) {
-            isUpdateNeeded = true
+            if (filter.apiFilter) {
+              updatedQSParams[filter.apiFilter.valueSelector] = filter.active
+            }
           }
         })
 
-        if (isUpdateNeeded) {
-          datasetsNeedsUpdate = true
-          Object.keys(currentQSParams).forEach(currentParam => {
-            if (!updatedQSParams[currentParam]) {
-              updatedQSParams[currentParam] = currentQSParams[currentParam]
+        if (!!newFilters || reloadURLHelpers.isUpdateNeeded(filters, currentQSParams, updatedQSParams)) {
+          dataWasFetched = true
+          const dataUrlFinal = reloadURLHelpers.getDataURL({ ...currentQSParams, ...updatedQSParams }, dataUrl, newFileName)
+
+          await fetchRemoteData(dataUrlFinal).then(responseData => {
+            let data: any[] = responseData
+            if (responseData && dataset.dataDescription) {
+              try {
+                data = transform.autoStandardize(data)
+                data = transform.developerStandardize(data, dataset.dataDescription)
+              } catch (e) {
+                //Data not able to be standardized, leave as is
+              }
             }
+            newDatasets[datasetKey].data = data
+            newDatasets[datasetKey].runtimeDataUrl = dataUrlFinal
+            newData[datasetKey] = data
           })
-          const _params = Object.keys(updatedQSParams).map(key => ({ key, value: updatedQSParams[key] }))
-          let dataUrlFinal = `${dataUrl.origin}${dataUrl.pathname}${gatherQueryParams(_params)}`
-
-          if (newFileName !== '') {
-            let fileExtension = dataUrl.pathname.split('.').pop()
-            let pathWithoutFilename = dataUrl.pathname.substring(0, dataUrl.pathname.lastIndexOf('/'))
-            dataUrlFinal = `${dataUrl.origin}${pathWithoutFilename}/${newFileName}.${fileExtension}${gatherQueryParams(_params)}`
-          }
-
-          let newDataset = await fetchRemoteData(`${dataUrlFinal}`)
-
-          if (newDataset && dataset.dataDescription) {
-            try {
-              newDataset = transform.autoStandardize(newDataset)
-              newDataset = transform.developerStandardize(newDataset, dataset.dataDescription)
-            } catch (e) {
-              //Data not able to be standardized, leave as is
-            }
-          }
-          newDatasets[datasetKey].data = newDataset
-          newDatasets[datasetKey].runtimeDataUrl = dataUrlFinal
-          newData[datasetKey] = newDataset
         }
       }
     }
 
-    if (datasetsNeedsUpdate) {
-      const dashboardConfig = dashboardConfigOverride || config.dashboard
+    if (dataWasFetched) {
       dispatch({ type: 'SET_DATA', payload: newData })
-
-      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 })
+      const filtersWithNewValues = addValuesToFilters<SharedFilter>(filters, newData)
+      const dashboardConfig = newFilters ? { ...config.dashboard, sharedFilters: filtersWithNewValues } : config.dashboard
+      const filteredData = getFilteredData({ ...state, config: { ...state.config, dashboard: dashboardConfig } }, {}, newData)
+      dispatch({ type: 'SET_FILTERED_DATA', payload: filteredData })
+      const visualizations = reloadURLHelpers.getVisualizationsWithFormattedData(config.visualizations, newData)
       dispatch({ type: 'SET_CONFIG', payload: { dashboard: dashboardConfig, datasets: newDatasets, visualizations } })
     }
   }
@@ -315,16 +254,21 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
     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(() => {
+    if (isEditor && !isPreview) return
     const { config } = state
-    if (config.filterBehavior !== FilterBehavior.Apply) {
+    if (!hasDashboardApplyBehavior(config.visualizations)) {
       reloadURLData()
     }
-    loadAPIFilters()
-  }, [])
+
+    const sharedFiltersWithValues = addValuesToFilters<SharedFilter>(config.dashboard.sharedFilters, state.data)
+    loadAPIFilters(sharedFiltersWithValues)
+    updateFilteredData()
+  }, [isEditor, isPreview, state.config?.activeDashboard])
 
   const updateChildConfig = (visualizationKey, newConfig) => {
     const config = _.cloneDeep(state.config)
@@ -347,129 +291,13 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
     }
   }
 
-  const applyFilters = () => {
-    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
-        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_SHARED_FILTERS', payload: dashboardConfig.sharedFilters })
-      updateDataFilters()
-      loadAPIFilters(dashboardConfig)
-        .then(() => {
-          reloadURLData(dashboardConfig)
-        })
-        .catch(e => {
-          console.error(e)
-        })
-    } else {
-      // TODO noftify of required fields
-    }
-  }
-
-  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 (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 {
-      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_SHARED_FILTERS', payload: sharedFilters })
-    if (state.config.filterBehavior !== FilterBehavior.Apply) {
-      updateDataFilters(sharedFilters)
-      reloadURLData()
-    }
-    return sharedFilters
-  }
-
-  const updateDataFilters = (sharedFilters = undefined) => {
+  const updateFilteredData = (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 = _.cloneDeep(state.config)
-    const newSharedFilters = changeFilterActive(index, value)
-    if (config.filterBehavior === FilterBehavior.Apply) {
-      const autoLoadViz = getAutoLoadVisualization()
-      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({ sharedFilters: newSharedFilters })
-      } else {
-        // A parent filter was selected, reset filters by:
-        // set auto select filter dropdowns to null
-        const autoSelectFilters = config.dashboard.sharedFilters.filter((_, _index) => !autoLoadViz?.hide.includes(_index))
-        const dropdownFilterKeys = autoSelectFilters.map(filter => getApiFilterKey(filter.apiFilter!))
-        const newApiDropdowns = { ...apiFilterDropdowns }
-        dropdownFilterKeys.forEach(key => (newApiDropdowns[key] = null))
-        setAPIFilterDropdowns(newApiDropdowns)
-        // remove active from sharedFilters that are autoLoading
-        const dashboardConfig = { ...config.dashboard }
-        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) => {
-          const _isAutoSelectFilter = !autoLoadViz?.hide.includes(_index)
-          if (_isAutoSelectFilter) filter.active = ''
-          return filter
-        })
-        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 resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
       let newViewport = getViewport(entry.contentRect.width)
@@ -484,18 +312,9 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
     }
   }, [])
 
-  const setPreview = shouldPreview => dispatch({ type: 'SET_PREVIEW', payload: shouldPreview })
-
   // 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 && !isPreview) {
@@ -504,7 +323,8 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
     getVizKeys(state.config).forEach(visualizationKey => {
       const rowNumber = vizRowColumnLocator[visualizationKey]?.row
       const visualizationConfig = getVizConfig(visualizationKey, rowNumber, state.config, state.data, state.filteredData)
-
+      visualizationConfig.uid = visualizationKey
+      if (visualizationConfig.type === 'footnotes') visualizationConfig.formattedData = undefined
       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
 
@@ -590,13 +410,12 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
               </>
             )
             break
-          case 'filter-dropdowns':
+          case 'dashboardFilters':
             const hideFilter = visualizationConfig.autoLoad && inNoDataState
             body = !hideFilter ? (
               <>
                 <Header visualizationKey={visualizationKey} subEditor='Filter Dropdowns' />
-                <Filters hide={visualizationConfig.hide} filters={state.config.dashboard.sharedFilters} apiFilterDropdowns={apiFilterDropdowns} handleOnChange={handleOnChange} />
-                <GoButton autoLoad={visualizationConfig.autoLoad} />
+                <DashboardSharedFilters isEditor={true} visualizationConfig={visualizationConfig} apiFilterDropdowns={apiFilterDropdowns} setConfig={_updateConfig} />
               </>
             ) : (
               <></>
@@ -604,9 +423,18 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
             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>
+              <>
+                <Header visualizationKey={visualizationKey} subEditor='Table' />
+                <DataTableStandAlone visualizationKey={visualizationKey} config={visualizationConfig} isEditor={true} updateConfig={_updateConfig} />
+              </>
+            )
+            break
+          case 'footnotes':
+            body = (
+              <>
+                <Header visualizationKey={visualizationKey} subEditor='Footnotes' />
+                <FootnotesStandAlone visualizationKey={visualizationKey} config={{ ...visualizationConfig, datasets: state.config.datasets }} isEditor={true} updateConfig={_updateConfig} />
+              </>
             )
             break
           default:
@@ -621,7 +449,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
         <DndProvider backend={HTML5Backend}>
           <div className='header-container'>
             <Header />
-            <VisualizationsPanel loadConfig={newConfig => dispatch({ type: 'UPDATE_CONFIG', payload: [newConfig] })} config={state.config} />
+            <VisualizationsPanel />
           </div>
 
           <div className='layout-container'>
@@ -633,6 +461,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
   } else {
     const { config } = state
     const { title, description } = config.dashboard || {}
+
     body = (
       <>
         {isEditor && <Header />}
@@ -642,22 +471,13 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
             <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 filteredData = getFilteredData(state, _.cloneDeep(state.data))
                     const data = filteredData[index] ?? row.formattedData
                     const dataGroups = {}
                     data.forEach(d => {
@@ -665,29 +485,31 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
                       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} />
+                      <>
+                        {/* Expand/Collapse All */}
+                        {row.expandCollapseAllButtons === true && <ExpandCollapseButtons setAllExpanded={setAllExpanded} />}
+                        {Object.keys(dataGroups).map(groupName => {
+                          const dataValue = dataGroups[groupName]
+                          return (
+                            <VisualizationRow
+                              key={`row__${index}__${groupName}`}
+                              allExpanded={allExpanded}
+                              filteredDataOverride={dataValue}
+                              groupName={groupName}
+                              row={row}
+                              rowIndex={index}
+                              setSharedFilter={setSharedFilter}
+                              updateChildConfig={updateChildConfig}
+                              apiFilterDropdowns={apiFilterDropdowns}
+                              currentViewport={currentViewport}
+                            />
+                          )
+                        })}
+                      </>
                     )
+                  } else {
+                    return <VisualizationRow key={`row__${index}`} allExpanded={false} groupName={''} row={row} rowIndex={index} setSharedFilter={setSharedFilter} updateChildConfig={updateChildConfig} apiFilterDropdowns={apiFilterDropdowns} currentViewport={currentViewport} />
                   }
                 })}
 
@@ -765,7 +587,7 @@ export default function CdcDashboard({ initialState, isEditor = false, isDebug =
 
   return (
     <GlobalContextProvider>
-      <DashboardContext.Provider value={{ ...state, setParentConfig: editorContext.setTempConfig, outerContainerRef, isDebug }}>
+      <DashboardContext.Provider value={{ ...state, setParentConfig: editorContext.setTempConfig, outerContainerRef, isDebug, loadAPIFilters, reloadURLData }}>
         <DashboardDispatchContext.Provider value={dispatch}>
           <div className={dashboardContainerClasses.join(' ')} ref={outerContainerRef} data-download-id={imageId}>
             {body}