@cdc/dashboard 4.24.5 → 4.24.7

package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx

@@ -0,0 +1,143 @@
+import { useContext, useState } from 'react'
+import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
+import Filters from './DashboardFilters'
+import { changeFilterActive } from '../../helpers/changeFilterActive'
+import _ from 'lodash'
+import { FilterBehavior } from '../Header/Header'
+import { getFilteredData } from '../../helpers/getFilteredData'
+import { DashboardFilters } from '../../types/DashboardFilters'
+import { getQueryParams, updateQueryString } from '@cdc/core/helpers/queryStringUtils'
+import Layout from '@cdc/core/components/Layout'
+import DashboardFiltersEditor from './DashboardFiltersEditor'
+import { ViewPort } from '@cdc/core/types/ViewPort'
+import { hasDashboardApplyBehavior } from '../../helpers/hasDashboardApplyBehavior'
+
+export type DropdownOptions = Record<'value' | 'text', string>[]
+
+export type APIFilterDropdowns = {
+  // null means still loading
+  [filtername: string]: null | DropdownOptions
+}
+
+type DashboardFiltersProps = {
+  apiFilterDropdowns: APIFilterDropdowns
+  visualizationConfig: DashboardFilters
+  isEditor?: boolean
+  setConfig: (config: DashboardFilters) => void
+  currentViewport?: ViewPort
+}
+
+const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({ apiFilterDropdowns, visualizationConfig, setConfig: updateConfig, currentViewport, isEditor = false }) => {
+  const state = useContext(DashboardContext)
+  const { config: dashboardConfig, reloadURLData, loadAPIFilters } = state
+  const dispatch = useContext(DashboardDispatchContext)
+
+  const applyFilters = () => {
+    const dashboardConfig = _.cloneDeep(state.config.dashboard)
+    const nonAutoLoadFilterIndexes = Object.values(state.config.visualizations)
+      .filter(v => v.type === 'dashboardFilters')
+      .reduce((acc, viz: DashboardFilters) => (!viz.autoLoad ? [...acc, viz.sharedFilterIndexes] : acc), [])
+    const allRequiredFiltersSelected = !dashboardConfig.sharedFilters.some((filter, filterIndex) => {
+      if (nonAutoLoadFilterIndexes.includes(filterIndex)) {
+        return !filter.active && !filter.queuedActive
+      } else {
+        // autoload filters don't need to be selected to apply filters
+        return false
+      }
+    })
+    if (allRequiredFiltersSelected) {
+      if (hasDashboardApplyBehavior(state.config.visualizations)) {
+        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 })
+      dispatch({ type: 'SET_FILTERED_DATA', payload: getFilteredData(_.cloneDeep(state)) })
+      loadAPIFilters(dashboardConfig.sharedFilters)
+        .then(newFilters => {
+          reloadURLData(newFilters)
+        })
+        .catch(e => {
+          console.error(e)
+        })
+    } else {
+      // TODO noftify of required fields
+    }
+  }
+
+  const handleOnChange = (index: number, value: string | string[]) => {
+    const newConfig = _.cloneDeep(dashboardConfig)
+    let newSharedFilters = changeFilterActive(index, value, newConfig.dashboard.sharedFilters, visualizationConfig)
+
+    if (hasDashboardApplyBehavior(dashboardConfig.visualizations)) {
+      const isAutoSelectFilter = visualizationConfig.autoLoad
+      const missingFilterSelections = newConfig.dashboard.sharedFilters.some(f => !f.active)
+      if (isAutoSelectFilter && !missingFilterSelections) {
+        // a dropdown has been selected that doesn't
+        // require the Go Button
+        loadAPIFilters(newSharedFilters).then(filters => {
+          reloadURLData(filters)
+        })
+      } else {
+        if (Array.isArray(value)) throw Error(`Cannot set active values on urlfilters. expected: ${JSON.stringify(value)} to be a single value.`)
+        newSharedFilters[index].queuedActive = value
+        // setData to empty object because we no longer have a data state.
+        dispatch({ type: 'SET_DATA', payload: {} })
+        dispatch({ type: 'SET_FILTERED_DATA', payload: {} })
+        loadAPIFilters(newSharedFilters)
+      }
+    } else {
+      if (newSharedFilters[index].apiFilter) {
+        reloadURLData(newSharedFilters)
+      } else {
+        const clonedState = _.cloneDeep(state)
+        clonedState.config.dashboard.sharedFilters = newSharedFilters
+        const newFilteredData = getFilteredData(clonedState)
+        dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
+        dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
+      }
+    }
+  }
+  const [displayPanel, setDisplayPanel] = useState(true)
+  const onBackClick = () => {
+    setDisplayPanel(!displayPanel)
+    updateConfig({
+      ...visualizationConfig,
+      showEditorPanel: !displayPanel
+    })
+  }
+
+  return (
+    <Layout.VisualizationWrapper config={visualizationConfig} isEditor={isEditor} currentViewport={currentViewport}>
+      {isEditor && (
+        <Layout.Sidebar displayPanel={displayPanel} isDashboard={true} title={'Configure Dashboard Filters'} onBackClick={onBackClick}>
+          <DashboardFiltersEditor updateConfig={updateConfig} vizConfig={visualizationConfig} />
+        </Layout.Sidebar>
+      )}
+
+      <Layout.Responsive isEditor={isEditor}>
+        <div className={`cdc-dashboard-inner-container${isEditor ? ' is-editor' : ''} cove-component__content col-12`}>
+          <Filters show={visualizationConfig?.sharedFilterIndexes?.map(Number)} filters={dashboardConfig.dashboard.sharedFilters || []} apiFilterDropdowns={apiFilterDropdowns} handleOnChange={handleOnChange} />
+          {visualizationConfig.filterBehavior === FilterBehavior.Apply && !visualizationConfig.autoLoad && <button onClick={applyFilters}>GO!</button>}
+        </div>
+      </Layout.Responsive>
+    </Layout.VisualizationWrapper>
+  )
+}
+
+export default DashboardFiltersWrapper

package/src/components/DashboardFilters/index.ts

@@ -0,0 +1,3 @@
+export { default } from './DashboardFiltersWrapper'
+
+export type { APIFilterDropdowns, DropdownOptions } from './DashboardFiltersWrapper'

package/src/components/DataDesignerModal.tsx

@@ -71,6 +71,11 @@ export const DataDesignerModal: React.FC<DataDesignerModalProps> = ({ vizKey, ro
     }
   }
 
+  const setExpandCollapseAllButtons = (selection: boolean) => {
+    dispatch({ type: 'UPDATE_ROW', payload: { rowIndex, rowData: { expandCollapseAllButtons: selection } } })
+    setCanContinue(true)
+  }
+
   return (
     <Modal>
       <Modal.Content>
@@ -121,15 +126,10 @@ export const DataDesignerModal: React.FC<DataDesignerModalProps> = ({ vizKey, ro
               }}
             />
           ) : (
-            <InputSelect
-              options={Object.keys(config.datasets[configureData.dataKey]?.data[0] || {})}
-              value={config.rows[rowIndex].multiVizColumn}
-              label='Multi-Visualization Column'
-              initial='--Select--'
-              fieldName=''
-              updateField={(section, subsection, fieldName, value) => setMultiVizColumn(value)}
-              required
-            />
+            <>
+              <InputSelect options={Object.keys(config.datasets[configureData.dataKey]?.data[0] || {})} value={config.rows[rowIndex].multiVizColumn} label='Multi-Visualization Column' initial='--Select--' updateField={(section, subsection, fieldName, value) => setMultiVizColumn(value)} required />
+              <CheckBox value={config.rows[rowIndex].expandCollapseAllButtons} label=' Add Expand/Collapse All buttons' fieldName='' updateField={(section, subsection, fieldName, value) => setExpandCollapseAllButtons(value)} />
+            </>
           )
         ) : (
           <></>

package/src/components/ExpandCollapseButtons.tsx

@@ -0,0 +1,20 @@
+type ExpandCollapseButtonsProps = {
+  setAllExpanded: Function
+}
+
+const ExpandCollapseButtons: React.FC<ExpandCollapseButtonsProps> = ({ setAllExpanded }) => {
+  return (
+    <div className='d-block '>
+      <div className='d-flex flex-row-reverse mb-2'>
+        <button className='btn expand-collapse-buttons' onClick={() => setAllExpanded(false)}>
+          - Collapse All
+        </button>
+        <button className='btn expand-collapse-buttons mr-2' onClick={() => setAllExpanded(true)}>
+          + Expand All
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default ExpandCollapseButtons

package/src/components/Header/Header.tsx

@@ -2,19 +2,9 @@ import { useEffect, useContext } from 'react'
 
 import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
 
-// types
-import { type SharedFilter } from '../../types/SharedFilter'
-import { type DashboardConfig as Config } from '../../types/DashboardConfig'
-import { useGlobalContext } from '@cdc/core/components/GlobalContext'
-
-import Tooltip from '@cdc/core/components/ui/Tooltip'
-import Icon from '@cdc/core/components/ui/Icon'
-import Select from '@cdc/core/components/ui/Select'
-
 import './index.scss'
 import MultiConfigTabs from '../MultiConfigTabs'
 import { Tab } from '../../types/Tab'
-import FilterModal from './FilterModal'
 import _ from 'lodash'
 
 type HeaderProps = {
@@ -29,7 +19,7 @@ export const FilterBehavior = {
 }
 
 const Header = (props: HeaderProps) => {
-  const tabs: Tab[] = ['Dashboard Description', 'Dashboard Filters', 'Data Table Settings', 'Dashboard Preview']
+  const tabs: Tab[] = ['Dashboard Description', 'Data Table Settings', 'Dashboard Preview']
   const { visualizationKey, subEditor } = props
   const { config, setParentConfig, tabSelected } = useContext(DashboardContext)
   if (!config) return null
@@ -41,8 +31,6 @@ const Header = (props: HeaderProps) => {
     dispatch({ type: 'SET_CONFIG', payload: newConfig })
   }
 
-  const { overlay } = useGlobalContext()
-
   const changeConfigValue = (parentObj, key, value) => {
     let newConfig = { ...config }
     if (!newConfig[parentObj]) newConfig[parentObj] = {}
@@ -50,48 +38,6 @@ const Header = (props: HeaderProps) => {
     dispatch({ type: 'UPDATE_CONFIG', payload: [newConfig] })
   }
 
-  const addNewFilter = () => {
-    let dashboardConfig = { ...config.dashboard }
-
-    dashboardConfig.sharedFilters = dashboardConfig.sharedFilters || []
-    const newFilter: SharedFilter = { key: 'Dashboard Filter ' + (dashboardConfig.sharedFilters.length + 1) }
-    dashboardConfig.sharedFilters.push(newFilter)
-
-    dispatch({ type: 'UPDATE_CONFIG', payload: [{ ...config, dashboard: dashboardConfig }] })
-  }
-
-  const removeFilter = index => {
-    let dashboardConfig = { ...config.dashboard }
-    let visualizations = { ...config.visualizations }
-
-    dashboardConfig.sharedFilters?.splice(index, 1)
-
-    Object.keys(visualizations).forEach(vizKey => {
-      if (visualizations[vizKey].visualizationType === 'filter-dropdowns' && visualizations[vizKey].hide && visualizations[vizKey].hide.length > 0) {
-        if (visualizations[vizKey].hide.indexOf(index) !== -1) {
-          visualizations[vizKey].hide.splice(visualizations[vizKey].hide.indexOf(index), 1)
-        }
-        visualizations[vizKey].hide.forEach((hideIndex, i) => {
-          if (hideIndex > index) {
-            visualizations[vizKey].hide[i] = hideIndex - 1
-          }
-        })
-      }
-    })
-
-    // Ensures URL filters refresh after filter removal
-    if (dashboardConfig.datasets) {
-      Object.keys(dashboardConfig.datasets).forEach(datasetKey => {
-        dashboardConfig.datasets![datasetKey].runtimeDataUrl = ''
-      })
-    }
-
-    const newConfig = { ...config, visualizations, dashboard: dashboardConfig }
-    dispatch({ type: 'UPDATE_CONFIG', payload: [newConfig] })
-
-    overlay?.actions.toggleOverlay()
-  }
-
   const convertStateToConfig = (type = 'JSON') => {
     let strippedState = JSON.parse(JSON.stringify(config))
     delete strippedState.newViz
@@ -166,48 +112,6 @@ const Header = (props: HeaderProps) => {
           </ul>
           <div className='heading-body'>
             {tabSelected === 'Dashboard Description' && <input type='text' className='description-input' placeholder='Type a dashboard description here.' defaultValue={config.dashboard?.description} onChange={e => changeConfigValue('dashboard', 'description', e.target.value)} />}
-            {tabSelected === 'Dashboard Filters' && (
-              <>
-                {config.dashboard.sharedFilters &&
-                  config.dashboard.sharedFilters.map((sharedFilter, index) => (
-                    <span className='shared-filter-button' key={`shared-filter-${sharedFilter.key}`}>
-                      <a
-                        href='#'
-                        onClick={e => {
-                          e.preventDefault()
-                          overlay?.actions.openOverlay(<FilterModal index={index} config={config} filterState={sharedFilter} removeFilter={removeFilter} />)
-                        }}
-                      >
-                        {sharedFilter.key}
-                      </a>
-                      <button onClick={() => removeFilter(index)}>X</button>
-                    </span>
-                  ))}
-                <button onClick={addNewFilter}>Add New Filter</button>
-
-                <Select
-                  value={config.filterBehavior}
-                  fieldName='filterBehavior'
-                  label='Filter Behavior'
-                  initial='- Select Option -'
-                  onchange={e => {
-                    const newConfig = { ...config, filterBehavior: e.target.value }
-                    dispatch({ type: 'UPDATE_CONFIG', payload: [newConfig] })
-                  }}
-                  options={Object.values(FilterBehavior)}
-                  tooltip={
-                    <Tooltip style={{ textTransform: 'none' }}>
-                      <Tooltip.Target>
-                        <Icon display='question' color='' style={{ marginLeft: '0.5rem' }} />
-                      </Tooltip.Target>
-                      <Tooltip.Content>
-                        <p>The Apply Button option changes the visualization when the user clicks "apply". The Filter Change option immediately changes the visualization when the selection is changed.</p>
-                      </Tooltip.Content>
-                    </Tooltip>
-                  }
-                />
-              </>
-            )}
             {tabSelected === 'Data Table Settings' && (
               <>
                 <div className='wrap'>

package/src/components/MultiConfigTabs/MultiConfigTabs.tsx

@@ -65,14 +65,14 @@ const Tab = ({ name, handleClick, tabs, index, active }) => {
 
   return (
     <li className='nav-item'>
-      <a className={`edit nav-link${active ? ' active' : ''}`} aria-current={active ? 'page' : null} href='#' onClick={onClick}>
+      <div className={`edit nav-link${active ? ' active' : ''}`} aria-current={active ? 'page' : null} onClick={onClick}>
         {canMoveLeft && <button onClick={() => handleReorder(index, -1)}>{'<'}</button>}
         {editing ? <input type='text' defaultValue={name} onBlur={onBlur} ref={inputRef} /> : <>{name}</>}
         {canMoveRight && <button onClick={() => handleReorder(index, 1)}>{'>'}</button>}
         <button className='remove' onClick={handleRemove}>
           X
         </button>
-      </a>
+      </div>
     </li>
   )
 }
@@ -95,9 +95,9 @@ const MultiConfigTabs = () => {
         <Tab key={tab + index} name={tab} tabs={tabs} index={index} handleClick={() => saveAndLoad(index)} active={index === activeTab} />
       ))}
       <li className='nav-item'>
-        <a className='nav-link add' href='#' onClick={() => dispatch({ type: 'ADD_NEW_DASHBOARD' })}>
+        <button className='nav-link add' onClick={() => dispatch({ type: 'ADD_NEW_DASHBOARD' })}>
           +
-        </a>
+        </button>
       </li>
     </ul>
   )

package/src/components/Row.tsx

@@ -17,6 +17,7 @@ import { DataDesignerModal } from './DataDesignerModal'
 import { useGlobalContext } from '@cdc/core/components/GlobalContext'
 import { iconHash } from '../helpers/iconHash'
 import _ from 'lodash'
+import { Visualization } from '@cdc/core/types/Visualization'
 
 type RowMenuProps = {
   rowIdx: number
@@ -104,9 +105,20 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
   }
 
   const deleteRow = () => {
-    rows.splice(rowIdx, 1) // Just delete the row. Don't delete the instantiated widgets for now.
+    let newVisualizations = { ...config.visualizations }
+
+    //delete the instantiated widgets
+    if (rows[rowIdx] && rows[rowIdx].columns && rows[rowIdx].columns.length && config.visualizations) {
+      rows[rowIdx].columns.forEach(column => {
+        if (column.widget) {
+          delete newVisualizations[column.widget]
+        }
+      })
+    }
 
-    updateConfig({ ...config, rows })
+    rows.splice(rowIdx, 1) // delete the row
+
+    updateConfig({ ...config, rows, visualizations: newVisualizations })
   }
 
   const layoutList = [
@@ -149,31 +161,52 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
   )
 }
 
-const Row = ({ row, idx: rowIdx, uuid }) => {
+type RowProps = { row: ConfigRow; idx: number; uuid: number | string }
+
+const Row: React.FC<RowProps> = ({ row, idx: rowIdx, uuid }) => {
   const { overlay } = useGlobalContext()
-  return (
-    <div className='builder-row' data-row-id={rowIdx}>
-      <RowMenu rowIdx={rowIdx} />
-      <div className='column-container'>
-        <>
-          <button
-            title='Configure Data'
-            className='btn btn-configure-row'
-            onClick={() => {
-              overlay?.actions.openOverlay(<DataDesignerModal rowIndex={rowIdx} />)
-            }}
-          >
-            {iconHash['gear']}
-          </button>
+  const dispatch = useContext(DashboardDispatchContext)
 
+  const configureFootnotes = () => {
+    if (!row.footnotesId) {
+      const type = 'footnotes'
+      const uid = type + Date.now()
+      const newVisualizationConfig = {
+        uid,
+        type,
+        visualizationType: type,
+        editing: true
+      }
+      dispatch({ type: 'ADD_FOOTNOTE', payload: { id: uid, rowIndex: rowIdx, config: newVisualizationConfig as Visualization } })
+    } else {
+      dispatch({ type: 'UPDATE_VISUALIZATION', payload: { vizKey: row.footnotesId, configureData: { editing: true } } })
+    }
+  }
+  return (
+    <>
+      <div className='builder-row' data-row-id={rowIdx}>
+        <RowMenu rowIdx={rowIdx} />
+        <button
+          title='Configure Data'
+          className='btn btn-configure-row'
+          onClick={() => {
+            overlay?.actions.openOverlay(<DataDesignerModal rowIndex={rowIdx} />)
+          }}
+        >
+          {iconHash['gear']}
+        </button>
+        <div className='column-container'>
           {row.columns
             .filter(column => column.width)
             .map((column, colIdx) => (
               <Column data={column} key={`row-${uuid}-col-${colIdx}`} rowIdx={rowIdx} colIdx={colIdx} />
             ))}
-        </>
+        </div>
+        <button className='btn btn-primary footnotes' onClick={configureFootnotes}>
+          {row.footnotesId ? 'Edit' : 'Add'} Footnotes
+        </button>
       </div>
-    </div>
+    </>
   )
 }
 

package/src/components/Toggle/Toggle.tsx

@@ -1,7 +1,5 @@
-import { useContext } from 'react'
-import { DashboardDispatchContext } from '../../DashboardContext'
 import { ConfigRow } from '../../types/ConfigRow'
-import { Visualization } from '@cdc/core/types/Visualization'
+import { AnyVisualization } from '@cdc/core/types/Visualization'
 import { getIcon } from '../../helpers/iconHash'
 import './toggle-style.css'
 import _ from 'lodash'
@@ -9,7 +7,7 @@ import _ from 'lodash'
 type ToggleProps = {
   active: number
   row: ConfigRow
-  visualizations: Record<string, Visualization>
+  visualizations: Record<string, AnyVisualization>
   setToggled: (colIndex: number) => void
 }
 const Toggle: React.FC<ToggleProps> = ({ active, row, visualizations, setToggled }) => {

package/src/components/VisualizationRow.tsx

@@ -1,56 +1,104 @@
 import DataTableStandAlone from '@cdc/core/components/DataTable/DataTableStandAlone'
-import React, { MouseEventHandler, useContext, useMemo } from 'react'
+import React, { useContext, useMemo } from 'react'
 import Toggle from './Toggle'
 import _ from 'lodash'
 import { ConfigRow } from '../types/ConfigRow'
-import CdcMap from '@cdc/map'
 import CdcChart from '@cdc/chart'
 import CdcDataBite from '@cdc/data-bite'
+import CdcMap from '@cdc/map'
 import CdcWaffleChart from '@cdc/waffle-chart'
 import CdcMarkupInclude from '@cdc/markup-include'
 import CdcFilteredText from '@cdc/filtered-text'
-import Filters, { APIFilterDropdowns } from './Filters'
-import { FilterBehavior } from './Header/Header'
+import DashboardSharedFilters, { APIFilterDropdowns } from './DashboardFilters'
 import { DashboardContext } from '../DashboardContext'
 import { ViewPort } from '@cdc/core/types/ViewPort'
-import { getVizConfig } from '../helpers/getVizConfig'
+import { getFootnotesVizConfig, getVizConfig } from '../helpers/getVizConfig'
 import { TableConfig } from '@cdc/core/components/DataTable/types/TableConfig'
+import FootnotesStandAlone from '@cdc/core/components/Footnotes/FootnotesStandAlone'
+import CollapsibleVisualizationRow from './CollapsibleVisualizationRow'
+import { DashboardFilters } from '../types/DashboardFilters'
+import { hasDashboardApplyBehavior } from '../helpers/hasDashboardApplyBehavior'
+
+type VisualizationWrapperProps = {
+  allExpanded: boolean
+  children: React.ReactNode
+  currentViewport: ViewPort
+  groupName: string
+  row: ConfigRow
+}
+
+const VisualizationWrapper: React.FC<VisualizationWrapperProps> = ({ allExpanded, currentViewport, groupName, row, children }) => {
+  return row.expandCollapseAllButtons ? (
+    <div className='collapsable-multiviz-container'>
+      <CollapsibleVisualizationRow allExpanded={allExpanded} fontSize={'26px'} groupName={groupName} currentViewport={currentViewport}>
+        {children}
+      </CollapsibleVisualizationRow>
+    </div>
+  ) : (
+    <>
+      <h3>{groupName}</h3>
+      {children}
+    </>
+  )
+}
 
 type VizRowProps = {
+  allExpanded: boolean
   filteredDataOverride?: Object[]
+  groupName: string
   row: ConfigRow
   rowIndex: number
   setSharedFilter: Function
   updateChildConfig: Function
-  applyFilters: MouseEventHandler<HTMLButtonElement>
   apiFilterDropdowns: APIFilterDropdowns
-  handleOnChange: Function
   currentViewport: ViewPort
 }
 
-const VisualizationRow: React.FC<VizRowProps> = ({ filteredDataOverride, row, rowIndex: index, setSharedFilter, updateChildConfig, applyFilters, apiFilterDropdowns, handleOnChange, currentViewport }) => {
+const VisualizationRow: React.FC<VizRowProps> = ({ allExpanded, filteredDataOverride, groupName, row, rowIndex: index, setSharedFilter, updateChildConfig, applyFilters, apiFilterDropdowns, handleOnChange, currentViewport }) => {
   const { config, filteredData: dashboardFilteredData, data: rawData } = useContext(DashboardContext)
   const [show, setShow] = React.useState(row.columns.map((col, i) => i === 0))
   const setToggled = (colIndex: number) => {
     setShow(show.map((_, i) => i === colIndex))
   }
   const inNoDataState = useMemo(() => {
-    const vals = Object.values(rawData)
+    const vals = Object.values(rawData).flatMap(val => val)
     if (!vals.length) return true
     return vals.some(val => val === undefined)
   }, [rawData])
-  const GoButton = ({ autoLoad }: { autoLoad?: boolean }) => {
-    if (config.filterBehavior === FilterBehavior.Apply && !autoLoad) {
-      return <button onClick={applyFilters}>GO!</button>
+
+  const footnotesConfig = useMemo(() => {
+    if (row.footnotesId) {
+      const footnoteConfig = getFootnotesVizConfig(row.footnotesId, index, config)
+      if (row.multiVizColumn && filteredDataOverride) {
+        const vizCategory = filteredDataOverride[0][row.multiVizColumn]
+        // the multiViz filtering filtering is applied after the dashboard filters
+        const categoryFootnote = footnoteConfig.formattedData.filter(d => d[row.multiVizColumn] === vizCategory)
+        footnoteConfig.formattedData = categoryFootnote
+      }
+      return footnoteConfig
     }
     return null
+  }, [config, row, rawData, dashboardFilteredData])
+
+  const applyButtonNotClicked = (vizConfig: DashboardFilters): boolean => {
+    const dashboardFilters = Object.values(config.visualizations).filter(v => v.type === 'dashboardFilters') as DashboardFilters[]
+    const applyFilters = dashboardFilters.filter(v => !v.autoLoad).flatMap(v => v.sharedFilterIndexes)
+    if (hasDashboardApplyBehavior(config.visualizations) && vizConfig.autoLoad) {
+      return applyFilters.some(index => {
+        const { queuedActive, active } = config.dashboard.sharedFilters[index]
+        if (!active && !queuedActive) return true
+        if (!queuedActive) return false
+        return queuedActive !== active
+      })
+    }
+    return false
   }
   return (
-    <div className={`dashboard-row ${row.equalHeight ? 'equal-height' : ''} ${row.toggle ? 'toggle' : ''}`} key={`row__${index}`}>
+    <div className={`row mb-5 ${row.equalHeight ? 'equal-height' : ''} ${row.toggle ? 'toggle' : ''}`} key={`row__${index}`}>
       {row.toggle && <Toggle row={row} visualizations={config.visualizations} active={show.indexOf(true)} setToggled={setToggled} />}
       {row.columns.map((col, colIndex) => {
         if (col.width) {
-          if (!col.widget) return <div key={`row__${index}__col__${colIndex}`} className={`dashboard-col dashboard-col-${col.width}`}></div>
+          if (!col.widget) return <div key={`row__${index}__col__${colIndex}`} className={`col-md-${col.width}`}></div>
 
           const visualizationConfig = getVizConfig(col.widget, index, config, rawData, dashboardFilteredData)
           if (filteredDataOverride) {
@@ -67,12 +115,15 @@ const VisualizationRow: React.FC<VizRowProps> = ({ filteredDataOverride, row, ro
               {visualizationConfig.dataKey} (Go to Table)
             </a>
           )
-          const hideFilter = visualizationConfig.autoLoad && inNoDataState
+          const hideFilter = inNoDataState && visualizationConfig.type === 'dashboardFilters' && applyButtonNotClicked(visualizationConfig)
 
           const shouldShow = row.toggle === undefined || (row.toggle && show[colIndex])
+
+          const body = <></>
+
           return (
-            <React.Fragment key={`vis__${index}__${colIndex}`}>
-              <div className={`dashboard-col dashboard-col-${col.width} ${!shouldShow ? 'hidden-toggle' : ''}`}>
+            <div key={`vis__${index}__${colIndex}`} className={`col-${col.width} ${!shouldShow ? 'd-none' : ''}`}>
+              <VisualizationWrapper allExpanded={allExpanded} currentViewport={currentViewport} groupName={groupName} row={row}>
                 {visualizationConfig.type === 'chart' && (
                   <CdcChart
                     key={col.widget}
@@ -153,11 +204,16 @@ const VisualizationRow: React.FC<VizRowProps> = ({ filteredDataOverride, row, ro
                     configUrl={undefined}
                   />
                 )}
-                {visualizationConfig.type === 'filter-dropdowns' && !hideFilter && (
-                  <React.Fragment key={col.widget}>
-                    <Filters hide={visualizationConfig.hide} filters={config.dashboard.sharedFilters} apiFilterDropdowns={apiFilterDropdowns} handleOnChange={handleOnChange} />
-                    <GoButton autoLoad={visualizationConfig.autoLoad} />
-                  </React.Fragment>
+                {visualizationConfig.type === 'dashboardFilters' && !hideFilter && (
+                  <DashboardSharedFilters
+                    setConfig={newConfig => {
+                      updateChildConfig(col.widget, newConfig)
+                    }}
+                    key={col.widget}
+                    visualizationConfig={visualizationConfig as DashboardFilters}
+                    apiFilterDropdowns={apiFilterDropdowns}
+                    currentViewport={currentViewport}
+                  />
                 )}
                 {visualizationConfig.type === 'table' && (
                   <DataTableStandAlone
@@ -170,12 +226,14 @@ const VisualizationRow: React.FC<VizRowProps> = ({ filteredDataOverride, row, ro
                     viewport={currentViewport}
                   />
                 )}
-              </div>
-            </React.Fragment>
+                {visualizationConfig.type === 'footnotes' && <FootnotesStandAlone key={col.widget} visualizationKey={col.widget} config={visualizationConfig} viewport={currentViewport} />}
+              </VisualizationWrapper>
+            </div>
           )
         }
         return <React.Fragment key={`vis__${index}__${colIndex}`}></React.Fragment>
       })}
+      {row.footnotesId ? <FootnotesStandAlone isEditor={false} visualizationKey={row.footnotesId} config={footnotesConfig} viewport={currentViewport} /> : null}
     </div>
   )
 }