@cdc/dashboard 4.24.5 → 4.24.9-1

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 = {
@@ -23,13 +13,8 @@ type HeaderProps = {
   visualizationKey?: string
 }
 
-export const FilterBehavior = {
-  Apply: 'Apply Button',
-  OnChange: 'Filter Change'
-}
-
 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 +26,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 +33,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 +107,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

@@ -23,7 +23,8 @@ const Tab = ({ name, handleClick, tabs, index, active }) => {
   const { overlay } = useGlobalContext()
   const inputRef = createRef<HTMLInputElement>()
 
-  const onBlur = () => {
+  const saveName = e => {
+    e.stopPropagation()
     const newVal = inputRef.current.value
     const sameName = newVal === name
     const blankName = !newVal
@@ -64,15 +65,26 @@ const Tab = ({ name, handleClick, tabs, index, active }) => {
   const canMoveRight = index <= tabs.length - 2
 
   return (
-    <li className='nav-item'>
-      <a className={`edit nav-link${active ? ' active' : ''}`} aria-current={active ? 'page' : null} href='#' onClick={onClick}>
-        {canMoveLeft && <button onClick={() => handleReorder(index, -1)}>{'<'}</button>}
-        {editing ? <input type='text' defaultValue={name} onBlur={onBlur} ref={inputRef} /> : <>{name}</>}
-        {canMoveRight && <button onClick={() => handleReorder(index, 1)}>{'>'}</button>}
-        <button className='remove' onClick={handleRemove}>
-          X
-        </button>
-      </a>
+    <li className='nav-item d-flex mt-0'>
+      {canMoveLeft && editing && <button onClick={() => handleReorder(index, -1)}>{'<'}</button>}
+      <div className={`edit nav-link${active ? ' active' : ''}`} aria-current={active ? 'page' : null} onClick={onClick}>
+        {editing ? (
+          <div className='d-flex'>
+            <input type='text' defaultValue={name} onBlur={saveName} ref={inputRef} />
+            <button className='btn btn-link save' onClick={saveName}>
+              save
+            </button>
+          </div>
+        ) : (
+          <>
+            {name}
+            <button className='remove' onClick={handleRemove}>
+              X
+            </button>
+          </>
+        )}
+      </div>
+      {canMoveRight && editing && <button onClick={() => handleReorder(index, 1)}>{'>'}</button>}
     </li>
   )
 }
@@ -95,9 +107,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['gearMulti']}
+        </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,132 @@
 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,
+  apiFilterDropdowns,
+  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}`}>
-      {row.toggle && <Toggle row={row} visualizations={config.visualizations} active={show.indexOf(true)} setToggled={setToggled} />}
+    <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 col-${col.width}`}></div>
 
           const visualizationConfig = getVizConfig(col.widget, index, config, rawData, dashboardFilteredData)
           if (filteredDataOverride) {
@@ -60,19 +136,37 @@ const VisualizationRow: React.FC<VizRowProps> = ({ filteredDataOverride, row, ro
             }
           }
 
-          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 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 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={`p-1 col-12 col-md-${col.width} ${!shouldShow ? 'd-none' : ''}`}
+            >
+              <VisualizationWrapper
+                allExpanded={allExpanded}
+                currentViewport={currentViewport}
+                groupName={groupName}
+                row={row}
+              >
                 {visualizationConfig.type === 'chart' && (
                   <CdcChart
                     key={col.widget}
@@ -84,7 +178,15 @@ const VisualizationRow: React.FC<VizRowProps> = ({ filteredDataOverride, row, ro
                     }}
                     setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
                     isDashboard={true}
-                    link={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
+                    link={
+                      config.table &&
+                      config.table.show &&
+                      config.datasets &&
+                      visualizationConfig.table &&
+                      visualizationConfig.table.showDataTableLink
+                        ? tableLink
+                        : undefined
+                    }
                     configUrl={undefined}
                     setEditing={undefined}
                     hostname={undefined}
@@ -103,7 +205,15 @@ const VisualizationRow: React.FC<VizRowProps> = ({ filteredDataOverride, row, ro
                     setSharedFilter={setsSharedFilter ? setSharedFilter : undefined}
                     setSharedFilterValue={setSharedFilterValue}
                     isDashboard={true}
-                    link={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
+                    link={
+                      config.table &&
+                      config.table.show &&
+                      config.datasets &&
+                      visualizationConfig.table &&
+                      visualizationConfig.table.showDataTableLink
+                        ? tableLink
+                        : undefined
+                    }
                   />
                 )}
                 {visualizationConfig.type === 'data-bite' && (
@@ -126,7 +236,15 @@ const VisualizationRow: React.FC<VizRowProps> = ({ filteredDataOverride, row, ro
                       updateChildConfig(col.widget, newConfig)
                     }}
                     isDashboard={true}
-                    configUrl={config.table && config.table.show && config.datasets && visualizationConfig.table && visualizationConfig.table.showDataTableLink ? tableLink : undefined}
+                    configUrl={
+                      config.table &&
+                      config.table.show &&
+                      config.datasets &&
+                      visualizationConfig.table &&
+                      visualizationConfig.table.showDataTableLink
+                        ? tableLink
+                        : undefined
+                    }
                   />
                 )}
                 {visualizationConfig.type === 'markup-include' && (
@@ -153,11 +271,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 +293,28 @@ 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>
   )
 }