@cdc/dashboard 4.24.11 → 4.24.12-2

package/src/components/DashboardFilters/DashboardFiltersEditor/components/FilterEditor.tsx

@@ -41,11 +41,10 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
       if (viz.type === 'dashboardFilters') return false
       const vizName = viz.general?.title || viz.title || vizKey
       nameLookup[vizKey] = vizName
-      const notAdded = !filter.usedBy || filter.usedBy.indexOf(vizKey) === -1
       const usesSharedFilter = viz.usesSharedFilter
       const rowIndex = vizLookup.row
       const dataConfiguredOnRow = config.rows[rowIndex].dataKey
-      return filter.setBy !== vizKey && notAdded && !usesSharedFilter && !dataConfiguredOnRow
+      return filter.setBy !== vizKey && !usesSharedFilter && !dataConfiguredOnRow
     })
     const rowOptions: number[] = []
 
@@ -363,20 +362,23 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
               {isNestedDropDown && <APIInputs isSubgroup={true} />}
 
               {!!parentFilters.length && (
-                <MultiSelect
-                  label='Parent Filter(s): '
-                  options={parentFilters.map(key => ({ value: key, label: key }))}
-                  fieldName='parents'
-                  selected={filter.parents}
-                  updateField={(_section, _subsection, _fieldname, newItems) => {
-                    updateFilterProp('parents', newItems)
-                  }}
-                />
+                <label>
+                  <span className='edit-label column-heading mt-1'>Parent Filter(s): </span>
+                  <MultiSelect
+                    label='Parent Filter(s): '
+                    options={parentFilters.map(key => ({ value: key, label: key }))}
+                    fieldName='parents'
+                    selected={filter.parents}
+                    updateField={(_section, _subsection, _fieldname, newItems) => {
+                      updateFilterProp('parents', newItems)
+                    }}
+                  />
+                </label>
               )}
 
-              <MultiSelect
-                label='Used By: (optional)'
-                tooltip={
+              <label>
+                <span className='edit-label column-heading mt-1'>
+                  Used By: (optional)
                   <Tooltip style={{ textTransform: 'none' }}>
                     <Tooltip.Target>
                       <Icon display='question' style={{ marginLeft: '0.5rem' }} />
@@ -388,17 +390,19 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
                       </p>
                     </Tooltip.Content>
                   </Tooltip>
-                }
-                options={[...usedByOptions, ...(filter.usedBy || [])].map(opt => ({
-                  value: opt,
-                  label: usedByNameLookup[opt]
-                }))}
-                fieldName='usedBy'
-                selected={filter.usedBy}
-                updateField={(_section, _subsection, _fieldname, newItems) => {
-                  updateFilterProp('usedBy', newItems)
-                }}
-              />
+                </span>
+                <MultiSelect
+                  options={usedByOptions.map(opt => ({
+                    value: opt,
+                    label: usedByNameLookup[opt]
+                  }))}
+                  fieldName='usedBy'
+                  selected={filter.usedBy}
+                  updateField={(_section, _subsection, _fieldname, newItems) => {
+                    updateFilterProp('usedBy', newItems)
+                  }}
+                />
+              </label>
 
               <TextField
                 label='Reset Label: '
@@ -473,31 +477,31 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
                 </select>
               </label>
               <label>
-                <span className='edit-label column-heading'>Used By: </span>
-                <ul>
-                  {filter.usedBy &&
-                    filter.usedBy.map(opt => (
-                      <li key={`used-by-list-item-${opt}`}>
-                        <span>{usedByNameLookup[opt] || opt}</span>{' '}
-                        <button
-                          onClick={e => {
-                            e.preventDefault()
-                            removeFilterUsedBy(filter, opt)
-                          }}
-                        >
-                          X
-                        </button>
-                      </li>
-                    ))}
-                </ul>
-                <select value='' onChange={e => addFilterUsedBy(filter, e.target.value)}>
-                  <option value=''>- Select Option -</option>
-                  {usedByOptions.map(opt => (
-                    <option value={opt} key={`used-by-select-item-${opt}`}>
-                      {usedByNameLookup[opt] || opt}
-                    </option>
-                  ))}
-                </select>
+                <span className='edit-label column-heading mt-1'>
+                  Used By: (optional)
+                  <Tooltip style={{ textTransform: 'none' }}>
+                    <Tooltip.Target>
+                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                    </Tooltip.Target>
+                    <Tooltip.Content>
+                      <p>
+                        Select if you would like specific visualizations or rows to use this filter. Otherwise the
+                        filter will be added to all api requests.
+                      </p>
+                    </Tooltip.Content>
+                  </Tooltip>
+                </span>
+                <MultiSelect
+                  options={usedByOptions.map(opt => ({
+                    value: opt,
+                    label: usedByNameLookup[opt]
+                  }))}
+                  fieldName='usedBy'
+                  selected={filter.usedBy}
+                  updateField={(_section, _subsection, _fieldname, newItems) => {
+                    updateFilterProp('usedBy', newItems)
+                  }}
+                />
               </label>
               <TextField
                 label='Reset Label: '

package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx

@@ -31,6 +31,7 @@ type DashboardFiltersProps = {
   isEditor?: boolean
   setConfig: (config: DashboardFilters) => void
   currentViewport?: ViewPort
+  setAPILoading: (loading: boolean) => void
 }
 
 const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
@@ -41,7 +42,7 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
   isEditor = false
 }) => {
   const state = useContext(DashboardContext)
-  const { config: dashboardConfig, reloadURLData, loadAPIFilters, setAPIFilterDropdowns } = state
+  const { config: dashboardConfig, reloadURLData, loadAPIFilters, setAPIFilterDropdowns, setAPILoading } = state
   const dispatch = useContext(DashboardDispatchContext)
 
   const applyFilters = e => {
@@ -81,7 +82,7 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
           updateQueryString(queryParams)
         }
       }
-
+      setAPILoading(true)
       dispatch({ type: 'SET_SHARED_FILTERS', payload: dashboardConfig.sharedFilters })
       dispatch({ type: 'SET_FILTERED_DATA', payload: getFilteredData(_.cloneDeep(state)) })
       loadAPIFilters(dashboardConfig.sharedFilters, apiFilterDropdowns)
@@ -105,6 +106,9 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
       visualizationConfig
     )
 
+    // sets the active filter option that the user just selected.
+    dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
+
     if (hasDashboardApplyBehavior(dashboardConfig.visualizations)) {
       const isAutoSelectFilter = visualizationConfig.autoLoad
       const missingFilterSelections = newConfig.dashboard.sharedFilters.some(f => !f.active)

package/src/components/DashboardFilters/dashboardfilter.styles.css

@@ -8,4 +8,20 @@
     height: calc(1.5em + 0.75rem + 2px);
     align-self: flex-end;
   }
+  .loading-filter {
+    position: relative;
+    .spinner-border {
+      position: absolute;
+      top: 55%;
+      right: 10%;
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
+  :is(select):disabled {
+    background-color: var(--lightestGray);
+    & > :is(option) {
+      color: var(--darkGray);
+    }
+  }
 }

package/src/components/VisualizationRow.tsx

@@ -24,6 +24,7 @@ type VisualizationWrapperProps = {
   children: React.ReactNode
   currentViewport: ViewPort
   groupName: string
+  hideVisualization: boolean
   row: ConfigRow
 }
 
@@ -31,10 +32,13 @@ const VisualizationWrapper: React.FC<VisualizationWrapperProps> = ({
   allExpanded,
   currentViewport,
   groupName,
+  hideVisualization,
   row,
   children
 }) => {
-  return row.expandCollapseAllButtons ? (
+  return hideVisualization ? (
+    <></>
+  ) : row.expandCollapseAllButtons ? (
     <div className='collapsable-multiviz-container'>
       <CollapsibleVisualizationRow
         allExpanded={allExpanded}
@@ -47,7 +51,7 @@ const VisualizationWrapper: React.FC<VisualizationWrapperProps> = ({
     </div>
   ) : (
     <>
-      <h3>{groupName}</h3>
+      {groupName !== '' ? <h3>{groupName}</h3> : <></>}
       {children}
     </>
   )
@@ -59,6 +63,7 @@ type VizRowProps = {
   groupName: string
   row: ConfigRow
   rowIndex: number
+  inNoDataState: boolean
   setSharedFilter: Function
   updateChildConfig: Function
   apiFilterDropdowns: APIFilterDropdowns
@@ -71,6 +76,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
   groupName,
   row,
   rowIndex: index,
+  inNoDataState,
   setSharedFilter,
   updateChildConfig,
   apiFilterDropdowns,
@@ -81,11 +87,6 @@ const VisualizationRow: React.FC<VizRowProps> = ({
   const setToggled = (colIndex: number) => {
     setShow(show.map((_, i) => i === colIndex))
   }
-  const inNoDataState = useMemo(() => {
-    const vals = Object.values(rawData).flatMap(val => val)
-    if (!vals.length) return true
-    return vals.some(val => val === undefined)
-  }, [rawData])
 
   const footnotesConfig = useMemo(() => {
     if (row.footnotesId) {
@@ -95,7 +96,10 @@ const VisualizationRow: React.FC<VizRowProps> = ({
         // the multiViz filtering filtering is applied after the dashboard filters
         const categoryFootnote = footnoteConfig.formattedData.filter(d => d[row.multiVizColumn] === vizCategory)
         footnoteConfig.formattedData = categoryFootnote
+      } else {
+        footnoteConfig.formattedData = dashboardFilteredData[row.footnotesId]
       }
+
       return footnoteConfig
     }
     return null
@@ -120,13 +124,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
     return false
   }
   return (
-    <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} />
-      )}
+    <div className={`row${row.equalHeight ? ' equal-height' : ''}${row.toggle ? ' toggle' : ''}`} key={`row__${index}`}>
       {row.columns.map((col, colIndex) => {
         if (col.width) {
           if (!col.widget) return <div key={`row__${index}__col__${colIndex}`} className={`col col-${col.width}`}></div>
@@ -150,22 +148,34 @@ const VisualizationRow: React.FC<VizRowProps> = ({
               {visualizationConfig.dataKey} (Go to Table)
             </a>
           )
-          const hideFilter =
+
+          const hideVisualization =
             inNoDataState &&
-            visualizationConfig.type === 'dashboardFilters' &&
-            applyButtonNotClicked(visualizationConfig)
+            visualizationConfig.filterBehavior !== 'Apply Button' &&
+            (visualizationConfig.type !== 'dashboardFilters' || applyButtonNotClicked(visualizationConfig))
 
           const shouldShow = row.toggle === undefined || (row.toggle && show[colIndex])
 
           return (
             <div
               key={`vis__${index}__${colIndex}`}
-              className={`p-1 col-12 col-md-${col.width} ${!shouldShow ? 'd-none' : ''}`}
+              className={`col-12 col-md-${col.width}${!shouldShow ? ' d-none' : ''}${
+                hideVisualization ? ' hide-parent-visualization' : ' mt-5 p-1'
+              }`}
             >
+              {row.toggle && !hideVisualization && (
+                <Toggle
+                  row={row}
+                  visualizations={config.visualizations}
+                  active={show.indexOf(true)}
+                  setToggled={setToggled}
+                />
+              )}
               <VisualizationWrapper
                 allExpanded={allExpanded}
                 currentViewport={currentViewport}
                 groupName={groupName}
+                hideVisualization={hideVisualization}
                 row={row}
               >
                 {visualizationConfig.type === 'chart' && (
@@ -272,7 +282,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
                     configUrl={undefined}
                   />
                 )}
-                {visualizationConfig.type === 'dashboardFilters' && !hideFilter && (
+                {visualizationConfig.type === 'dashboardFilters' && (
                   <DashboardSharedFilters
                     setConfig={newConfig => {
                       updateChildConfig(col.widget, newConfig)
@@ -308,7 +318,7 @@ const VisualizationRow: React.FC<VizRowProps> = ({
         }
         return <React.Fragment key={`vis__${index}__${colIndex}`}></React.Fragment>
       })}
-      {row.footnotesId ? (
+      {row.footnotesId && !inNoDataState ? (
         <FootnotesStandAlone
           isEditor={false}
           visualizationKey={row.footnotesId}

package/src/components/Widget.tsx

@@ -90,7 +90,7 @@ const Widget = ({ widgetConfig, addVisualization, type }: WidgetProps) => {
   const loadSampleData = () => {
     const dataKey = config.rows[widgetConfig.rowIdx]?.dataKey || widgetConfig?.dataKey
     const dataset = config.datasets[dataKey]
-    const _data = data[dataset.dataUrl]
+    const _data = data[dataset?.dataUrl]
     if (_data && !_data.length) {
       const url = changeDataLimit(dataset.dataUrl, 100)
       fetchRemoteData(url).then(responseData => {

package/src/data/initial-state.js

@@ -1,6 +1,7 @@
 export default {
   dashboard: {
-    theme: 'theme-blue'
+    theme: 'theme-blue',
+    sharedFilters: []
   },
   rows: [[{ width: 12 }, {}, {}]],
   visualizations: {},

package/src/helpers/addValuesToDashboardFilters.ts

@@ -30,9 +30,11 @@ const getSelector = (filter: SharedFilter) => {
 
 export const addValuesToDashboardFilters = (
   filters: SharedFilter[],
-  data: Record<string, any[]>
+  data: Record<string, any[]>,
+  filtersToSkip: number[] = []
 ): Array<SharedFilter> => {
-  return filters?.map(filter => {
+  return filters?.map((filter, index) => {
+    if (filtersToSkip.includes(index)) return filter
     if (filter.type === 'urlfilter') return filter
     const filterCopy = _.cloneDeep(filter)
     const filterValues = generateValuesForFilter(getSelector(filter), data)

package/src/helpers/apiFilterHelpers.ts

@@ -3,7 +3,7 @@ import { APIFilterDropdowns, DropdownOptions } from '../components/DashboardFilt
 import { APIFilter } from '../types/APIFilter'
 import { SharedFilter } from '../types/SharedFilter'
 import _ from 'lodash'
-import { getQueryParams } from '@cdc/core/helpers/queryStringUtils'
+import { getQueryParam } from '@cdc/core/helpers/queryStringUtils'
 import { FILTER_STYLE } from '../types/FilterStyles'
 
 /** key for the dropdowns object */
@@ -17,10 +17,10 @@ export const getLoadingFilterMemo = (
   apiFiltersEndpoints.reduce((acc, endpoint, currIndex) => {
     const _key: DropdownsKey = endpoint
     const hasChanged = changedChildFilterIndexes.includes(currIndex)
-    if (apiFilterDropdowns[_key] != null && !hasChanged) {
+    if (apiFilterDropdowns[_key] && !hasChanged) {
       acc[_key] = apiFilterDropdowns[_key]
     } else {
-      acc[_key] = null
+      acc[_key] = undefined
     }
     return acc
   }, {})
@@ -37,7 +37,7 @@ export const getParentParams = (
       const key = filter.apiFilter.valueSelector || ''
       const subKey = filter.apiFilter.subgroupValueSelector || ''
       const val = filter.queuedActive ? filter.queuedActive[0] : (filter.active as string) || ''
-      const subVal = filter.queuedActive ? filter.queuedActive[1] : filter.subGrouping.active || ''
+      const subVal = filter.queuedActive ? filter.queuedActive[1] : filter.subGrouping?.active || ''
       return [
         { key, value: val },
         { key: subKey, value: subVal }
@@ -53,6 +53,8 @@ export const getParentParams = (
   })
 }
 
+export const notAllParentsSelected = parentParams => parentParams?.some(({ value }) => value === '')
+
 export const getFilterValues = (data: Array<Object>, apiFilter: APIFilter): DropdownOptions => {
   const { textSelector, valueSelector, subgroupTextSelector, subgroupValueSelector } = apiFilter
   if (subgroupValueSelector) {
@@ -83,9 +85,8 @@ export const getToFetch = (
     const _key = baseEndpoint
     if (apiFilterDropdowns[_key]) return // don't reload cached filter
     const parentParams = getParentParams(filter, sharedFilters)
-    const notAllParentsSelected = parentParams?.some(({ value }) => value === '')
 
-    if (notAllParentsSelected) return // don't send request for dependent children filter options
+    if (notAllParentsSelected(parentParams)) return // don't send request for dependent children filter options
 
     const endpoint = baseEndpoint + (parentParams ? gatherQueryParams(baseEndpoint, parentParams) : '')
     toFetch[endpoint] = [_key, index]
@@ -93,6 +94,38 @@ export const getToFetch = (
   return toFetch
 }
 
+export const setActiveNestedDropdown = (dropdownOptions, sharedFilter) => {
+  const defaultQueryParamValue = getQueryParam(sharedFilter?.setByQueryParameter)
+  const defaultValue = dropdownOptions[0]?.value
+  const subDefaultValue = dropdownOptions[0]?.subOptions[0].value
+  const subDefaultQueryParamValue = getQueryParam(sharedFilter?.subGrouping.setByQueryParameter)
+  if (!sharedFilter.active) {
+    sharedFilter.active = defaultQueryParamValue || defaultValue
+    sharedFilter.subGrouping.active = subDefaultQueryParamValue || subDefaultValue
+  } else {
+    const currentOption = dropdownOptions.find(option => option.value === sharedFilter.active)
+    sharedFilter.active = currentOption ? currentOption.value : defaultValue
+    if (currentOption) {
+      const currentSubOption = currentOption.subOptions.find(option => option.value === sharedFilter.subGrouping.active)
+      sharedFilter.subGrouping.active = currentSubOption?.value || subDefaultValue
+    } else {
+      sharedFilter.subGrouping.active = subDefaultValue
+    }
+  }
+}
+
+export const setActiveMultiDropdown = (dropdownOptions, sharedFilter) => {
+  const defaultQueryParamValue = getQueryParam(sharedFilter?.setByQueryParameter)
+  const multiDefaultQueryParamValue = Array.isArray(defaultQueryParamValue)
+    ? defaultQueryParamValue
+    : defaultQueryParamValue?.split(',')
+  const multiDefaultValue = defaultQueryParamValue ? multiDefaultQueryParamValue : [dropdownOptions[0]?.value]
+  const currentOption = ((sharedFilter.active as string[]) || []).filter(activeVal =>
+    dropdownOptions.find(option => option.value === activeVal)
+  )
+  sharedFilter.active = currentOption.length ? currentOption : multiDefaultValue
+}
+
 export const setAutoLoadDefaultValue = (
   sharedFilterIndex: number,
   dropdownOptions: DropdownOptions,
@@ -102,24 +135,26 @@ export const setAutoLoadDefaultValue = (
   const sharedFiltersCopy = _.cloneDeep(sharedFilters)
   const sharedFilter = _.cloneDeep(sharedFiltersCopy[sharedFilterIndex])
   if (!autoLoadFilterIndexes.length || !dropdownOptions?.length) return sharedFilter // no autoLoading happening
-  if (autoLoadFilterIndexes.includes(sharedFilterIndex)) {
+  const hasQueryParameter = sharedFilter.setByQueryParameter
+    ? Boolean(getQueryParam(sharedFilter.setByQueryParameter))
+    : false
+  if (autoLoadFilterIndexes.includes(sharedFilterIndex) || hasQueryParameter) {
     const filterParents = sharedFiltersCopy.filter(f => sharedFilter.parents?.includes(f.key))
     const notAllParentFiltersSelected = filterParents.some(p => !(p.active || p.queuedActive))
     if (filterParents && notAllParentFiltersSelected) return sharedFilter
-    const defaultValue =
-      sharedFilter.filterStyle === FILTER_STYLE.multiSelect ? [dropdownOptions[0]?.value] : dropdownOptions[0]?.value
-    if (!sharedFilter.active) {
-      const queryParams = getQueryParams()
-      const defaultQueryParamValue = queryParams[sharedFilter?.setByQueryParameter]
-      sharedFilter.active = defaultQueryParamValue || defaultValue
-    } else if (sharedFilter.filterStyle === FILTER_STYLE.multiSelect) {
-      const currentOption = (sharedFilter.active as string[]).filter(activeVal =>
-        dropdownOptions.find(option => option.value === activeVal)
-      )
-      sharedFilter.active = currentOption.length ? currentOption : defaultValue
+    if (sharedFilter.filterStyle === FILTER_STYLE.multiSelect) {
+      setActiveMultiDropdown(dropdownOptions, sharedFilter)
+    } else if (sharedFilter.filterStyle === FILTER_STYLE.nestedDropdown) {
+      setActiveNestedDropdown(dropdownOptions, sharedFilter)
     } else {
-      const currentOption = dropdownOptions.find(option => option.value === sharedFilter.active)
-      sharedFilter.active = currentOption ? currentOption.value : defaultValue
+      const defaultValue = dropdownOptions[0]?.value
+      const defaultQueryParamValue = getQueryParam(sharedFilter?.setByQueryParameter)
+      if (!sharedFilter.active) {
+        sharedFilter.active = defaultQueryParamValue || defaultValue
+      } else {
+        const currentOption = dropdownOptions.find(option => option.value === sharedFilter.active)
+        sharedFilter.active = currentOption ? currentOption.value : defaultValue
+      }
     }
   }
   return sharedFilter

package/src/helpers/changeFilterActive.ts

@@ -13,6 +13,9 @@ const handleChildren = (sharedFilters: SharedFilter[], parentIndex: number) => {
   if (childFilterIndexes.length) {
     childFilterIndexes.forEach(filterIndex => {
       sharedFilters[filterIndex].active = ''
+      if (sharedFilters[filterIndex].subGrouping) {
+        sharedFilters[filterIndex].subGrouping.active = ''
+      }
     })
   }
   return childFilterIndexes

package/src/helpers/filterData.ts

@@ -24,7 +24,7 @@ function getMaxTierAndSetFilterTiers(filters: SharedFilter[]): number {
 }
 
 function filter(data = [], filters: SharedFilter[], condition) {
-  const activeFilters = filters.filter(f => f.resetLabel !== f.active)
+  const activeFilters = _.filter(filters, f => (f.resetLabel === f.active ? f.values?.includes(f.resetLabel) : true))
   return data.filter(row => {
     const foundMatchingFilter = activeFilters.find(filter => {
       const currentValue = row[filter.columnName]

package/src/helpers/loadAPIFilters.ts

@@ -3,6 +3,7 @@ import { APIFilterDropdowns } from '../components/DashboardFilters'
 import { SharedFilter } from '../types/SharedFilter'
 import * as apiFilterHelpers from './apiFilterHelpers'
 import { APIFilter } from '../types/APIFilter'
+import { getParentParams, notAllParentsSelected } from './apiFilterHelpers'
 
 export const loadAPIFiltersFactory = (
   dispatch: Function,
@@ -13,20 +14,30 @@ export const loadAPIFiltersFactory = (
   const loadAPIFilters = (
     sharedFilters: SharedFilter[],
     dropdowns: APIFilterDropdowns,
-    recursiveLimit = 3
+    loadAll?: boolean,
+    recursiveLimit = 50
   ): Promise<SharedFilter[]> => {
     if (!sharedFilters) return
+    const allIndexes = sharedFilters.map((_, index) => index)
+    const _autoLoadFilterIndexes = loadAll ? allIndexes : autoLoadFilterIndexes
     sharedFilters = sharedFilters.map((filter, index) =>
       apiFilterHelpers.setAutoLoadDefaultValue(
         index,
         dropdowns[filter.apiFilter?.apiEndpoint],
         sharedFilters,
-        autoLoadFilterIndexes
+        _autoLoadFilterIndexes
       )
     )
     const sharedAPIFilters = sharedFilters.filter(f => f.apiFilter)
     const filterLookup = new Map(sharedAPIFilters.map(filter => [filter.apiFilter.apiEndpoint, filter.apiFilter]))
     const toFetch = apiFilterHelpers.getToFetch(sharedFilters, dropdowns)
+    const loadingDropdowns = Object.values(toFetch).reduce(
+      (acc, [dropdownsKey]) => ({ ...acc, [dropdownsKey]: null }),
+      {}
+    )
+    setAPIFilterDropdowns(currentState => {
+      return { ...currentState, ...loadingDropdowns }
+    })
     const newDropdowns = _.cloneDeep(dropdowns)
     return Promise.all(
       Object.keys(toFetch).map(
@@ -47,7 +58,7 @@ export const loadAPIFiltersFactory = (
                   index,
                   _filterValues,
                   sharedFilters,
-                  autoLoadFilterIndexes
+                  _autoLoadFilterIndexes
                 )
                 sharedFilters[index] = newDefaultSelectedFilter
               })
@@ -63,16 +74,22 @@ export const loadAPIFiltersFactory = (
           })
       )
     ).then(() => {
-      const finishedLoading = sharedFilters.reduce((acc, curr, index) => {
-        if (autoLoadFilterIndexes.includes(index) && !curr.active) return false
+      const toLoad = sharedFilters.reduce((acc, curr, index) => {
+        // the filter is autoloading and it hasn't finished yet
+        if (_autoLoadFilterIndexes.includes(index) && !curr.active) {
+          if (notAllParentsSelected(getParentParams(curr, sharedFilters))) {
+            return acc
+          }
+          return [...acc, index]
+        }
         return acc
-      }, true)
-      if (finishedLoading || recursiveLimit === 0) {
+      }, [])
+      if (!toLoad.length || recursiveLimit === 0) {
         setAPIFilterDropdowns(newDropdowns)
         dispatch({ type: 'SET_SHARED_FILTERS', payload: sharedFilters })
         return sharedFilters
       } else {
-        return loadAPIFilters(sharedFilters, newDropdowns, recursiveLimit - 1)
+        return loadAPIFilters(sharedFilters, newDropdowns, loadAll, recursiveLimit - 1)
       }
     })
   }

package/src/helpers/reloadURLHelpers.ts

@@ -4,6 +4,7 @@ import { capitalizeSplitAndJoin } from '@cdc/core/helpers/cove/string'
 import { AnyVisualization, Visualization } from '@cdc/core/types/Visualization'
 import _ from 'lodash'
 import { DashboardConfig } from '../types/DashboardConfig'
+import { ConfigRow } from '../types/ConfigRow'
 
 export const isUpdateNeeded = (
   filters: SharedFilter[],
@@ -104,9 +105,15 @@ export const getVisualizationsWithFormattedData = (visualizations: Record<string
 export const filterUsedByDataUrl = (
   filter: SharedFilter,
   datasetKey: string,
-  visualizations: Record<string, AnyVisualization>
+  visualizations: Record<string, AnyVisualization>,
+  rows: ConfigRow[]
 ) => {
   if (!filter.usedBy || !filter.usedBy.length) return true
-  const vizUsingFilters = filter.usedBy?.map(vizKey => visualizations[vizKey])
+  const vizUsingFilters = filter.usedBy?.map(vizOrRowKey => visualizations[vizOrRowKey] || rows[vizOrRowKey])
+  // push any footnotes which are using the filter also
+  filter.usedBy?.forEach(vizOrRowKey => {
+    if (rows[vizOrRowKey] && rows[vizOrRowKey].footnotesId)
+      return vizUsingFilters.push(visualizations[rows[vizOrRowKey].footnotesId])
+  })
   return vizUsingFilters?.some(viz => viz?.dataKey === datasetKey)
 }

package/src/helpers/shouldLoadAllFilters.ts

@@ -0,0 +1,30 @@
+import { getQueryParam } from '@cdc/core/helpers/queryStringUtils'
+import { Visualization } from '@cdc/core/types/Visualization'
+
+export const shouldLoadAllFilters = (config, isEditorPanel): boolean => {
+  const autoLoad = Boolean(getQueryParam('cove-auto-load'))
+  const activeConfig = config.multiDashboards ? config.multiDashboards[config.activeDashboard] : config
+  const hasFilterByFileNameFunctionality = activeConfig.dashboard.sharedFilters?.some(
+    filter => filter.filterBy === 'File Name'
+  )
+  const isAutoLoadTab = Object.values(activeConfig.visualizations).reduce((acc, viz: Visualization) => {
+    if (acc === false) return acc
+    if (viz.visualizationType === 'dashboardFilters') {
+      if (viz.filterBehavior === 'Apply Button') return false
+      if (viz.autoLoad) {
+        return true
+      }
+    }
+    return acc
+  }, undefined)
+  if (autoLoad || isAutoLoadTab || hasFilterByFileNameFunctionality || isEditorPanel) {
+    const rowDataSetKeys = activeConfig.rows.map(row => row.dataKey).filter(Boolean)
+    const dataKeys = Object.values(activeConfig.visualizations)
+      .map((visualization: Visualization) => visualization.dataKey)
+      .filter(Boolean)
+      .concat(rowDataSetKeys)
+    const missingData = dataKeys.find(dataset => !config.datasets[dataset].data?.length)
+    return Boolean(missingData)
+  }
+  return false
+}