@cdc/dashboard 4.25.10 → 4.26.1

package/src/helpers/filterData.ts

@@ -2,7 +2,11 @@ import _ from 'lodash'
 import { SharedFilter } from '../types/SharedFilter'
 import { FILTER_STYLE } from '../types/FilterStyles'
 
-const findFilterTier = (filters: SharedFilter[], sharedFilter: SharedFilter) => {
+/**
+ * Recursively calculates the tier/depth of a filter based on its parent dependencies.
+ * Root filters (no parents) are tier 1, children of root filters are tier 2, etc.
+ */
+const findFilterTier = (filters: SharedFilter[], sharedFilter: SharedFilter): number => {
   if (!sharedFilter.parents?.length) {
     return 1
   } else {
@@ -12,6 +16,10 @@ const findFilterTier = (filters: SharedFilter[], sharedFilter: SharedFilter) =>
   }
 }
 
+/**
+ * Calculates and assigns tier values to all filters, returns the maximum tier.
+ * Mutates the filter objects by setting their tier property.
+ */
 function getMaxTierAndSetFilterTiers(filters: SharedFilter[]): number {
   let maxTier = 1
   filters.forEach(sharedFilter => {
@@ -23,7 +31,30 @@ function getMaxTierAndSetFilterTiers(filters: SharedFilter[]): number {
   return maxTier
 }
 
-function filter(data = [], filters: SharedFilter[], condition) {
+/**
+ * Checks if a filter is currently at its reset/incomplete state.
+ * A filter is incomplete if it's visible AND:
+ * - The active value is empty/null/undefined, OR
+ * - The active value equals the resetLabel (if one is defined)
+ */
+export const isFilterAtResetState = (filter: SharedFilter): boolean => {
+  // Only check filters that are visible to the user
+  if (!filter.showDropdown) return false
+
+  // Check if active value is empty/null/undefined
+  const isEmptyValue = filter.active === '' || filter.active === null || filter.active === undefined
+
+  // Check if active value equals the resetLabel
+  const equalsResetLabel = filter.resetLabel && filter.resetLabel === filter.active
+
+  return isEmptyValue || equalsResetLabel
+}
+
+/**
+ * Filters data by applying filters of a specific tier.
+ * Filters are applied hierarchically by tier to handle parent-child dependencies.
+ */
+function filterDataByTier(data = [], filters: SharedFilter[], tier: number) {
   const activeFilters = _.filter(filters, f => (f.resetLabel === f.active ? f.values?.includes(f.resetLabel) : true))
   return data.filter(row => {
     const foundMatchingFilter = activeFilters.find(filter => {
@@ -51,8 +82,9 @@ function filter(data = [], filters: SharedFilter[], condition) {
         isNotTheSelectedValue = subGroupActive && selectedSubGroupValue !== subGroupActive
       }
 
-      const isFirstOccurrenceOfTier = filter.tier === condition
-      if (filter.type !== 'urlfilter' && isFirstOccurrenceOfTier && isNotTheSelectedValue) {
+      const isMatchingTier = filter.tier === tier
+      // Only apply client-side filtering for datafilter (urlfilters modify the API endpoint instead)
+      if (filter.type !== 'urlfilter' && isMatchingTier && isNotTheSelectedValue) {
         return true
       }
     })
@@ -60,17 +92,30 @@ function filter(data = [], filters: SharedFilter[], condition) {
   })
 }
 
+/**
+ * Filters data based on shared filter configurations.
+ * Returns empty array if any filter is at its reset state (incomplete selection).
+ * Otherwise applies filters hierarchically by tier to handle parent-child dependencies.
+ */
 export const filterData = (filters: SharedFilter[], _data: Object[]): Object[] => {
   const maxTier = getMaxTierAndSetFilterTiers(filters)
 
+  // Check if any filters are currently at their reset state
+  const hasResetFilters = filters.some(isFilterAtResetState)
+
+  // If any filter is at reset state, return empty data to show "no data" message
+  if (hasResetFilters) {
+    return []
+  }
+
   for (let i = 0; i < maxTier; i++) {
     const lastIteration = i === maxTier - 1
 
-    const filteredData = filter(_data, filters, i + 1)
+    const filteredData = filterDataByTier(_data, filters, i + 1)
 
     if (lastIteration) {
-      // not sure if this last run of filter() function is necessary.
-      return filter(filteredData, filters, maxTier - 1)
+      // not sure if this last run of filterDataByTier() function is necessary.
+      return filterDataByTier(filteredData, filters, maxTier - 1)
     }
   }
 }

package/src/helpers/filterResetHelpers.ts

@@ -0,0 +1,102 @@
+import { SharedFilter } from '../types/SharedFilter'
+import { APIFilterDropdowns } from '../components/DashboardFilters'
+import { FILTER_STYLE } from '../types/FilterStyles'
+
+/**
+ * Determines the reset value for a filter based on its configuration.
+ * When forceEmpty is true (like when clicking "Clear Filters"), always returns empty.
+ * Otherwise uses priority: defaultValue > empty string (for resetLabel) > first API option
+ * Note: resetLabel is for display purposes only. When present, we return empty string
+ * so the placeholder option renders correctly in the dropdown.
+ */
+export const getFilterResetValue = (
+  filter: SharedFilter,
+  apiFilterDropdowns: APIFilterDropdowns,
+  forceEmpty: boolean = false
+): string | undefined => {
+  // When clearing filters, always reset to empty/resetLabel state
+  if (forceEmpty) {
+    // Return empty string to show reset label or placeholder, undefined falls back to first value
+    return ''
+  }
+
+  // If filter has a defaultValue, use that (for initial load)
+  if (filter.defaultValue) {
+    return filter.defaultValue
+  }
+  // If filter has a resetLabel, return empty string so placeholder renders
+  if (typeof filter.resetLabel === 'string') {
+    return ''
+  }
+  // Otherwise, use first available value if API filter
+  if (filter.apiFilter) {
+    const _key = filter.apiFilter.apiEndpoint
+    const options = apiFilterDropdowns[_key]
+    if (options && options.length > 0) {
+      return options[0].value
+    }
+  }
+  return undefined
+}
+
+/**
+ * Resets a filter's active and queuedActive values based on its filter style.
+ * Handles multi-select, nested-dropdown, and standard dropdown styles.
+ */
+export const resetFilterToValue = (
+  filter: SharedFilter,
+  resetValue: string | undefined,
+  apiFilterDropdowns: APIFilterDropdowns
+): void => {
+  // Handle multi-select filters
+  if (filter.filterStyle === FILTER_STYLE.multiSelect) {
+    filter.active = resetValue ? [resetValue] : []
+    filter.queuedActive = undefined
+  } else if (filter.filterStyle === FILTER_STYLE.nestedDropdown) {
+    // For nested dropdowns, reset both group and subgroup
+    const _key = filter.apiFilter?.apiEndpoint
+    const options = apiFilterDropdowns[_key]
+
+    // When resetValue is explicitly empty/undefined, clear both group and subgroup
+    if (resetValue === '' || resetValue === undefined) {
+      filter.active = resetValue || ''
+      filter.subGrouping.active = ''
+    } else if (options && options.length > 0) {
+      // Use specific resetValue or fall back to first option
+      const selectedOption = options.find(opt => opt.value === resetValue) || options[0]
+      filter.active = selectedOption.value
+      if (selectedOption.subOptions && selectedOption.subOptions.length > 0) {
+        filter.subGrouping.active = selectedOption.subOptions[0].value
+      } else {
+        filter.subGrouping.active = ''
+      }
+    } else {
+      // No options available, use resetValue or empty
+      filter.active = resetValue || ''
+      filter.subGrouping.active = ''
+    }
+    filter.queuedActive = undefined
+  } else {
+    // Standard dropdown
+    filter.active = resetValue
+    filter.queuedActive = undefined
+  }
+}
+
+/**
+ * Clears dropdown cache for child filters that have parent dependencies.
+ * Sets them to empty arrays so they appear disabled without loading state.
+ */
+export const clearChildFilterDropdowns = (
+  sharedFilters: SharedFilter[],
+  apiFilterDropdowns: APIFilterDropdowns
+): APIFilterDropdowns => {
+  const updatedDropdowns = { ...apiFilterDropdowns }
+  sharedFilters.forEach(filter => {
+    if (filter.apiFilter && filter.parents && filter.parents.length > 0) {
+      // Set to empty array so they show as disabled without loading state
+      updatedDropdowns[filter.apiFilter.apiEndpoint] = []
+    }
+  })
+  return updatedDropdowns
+}

package/src/helpers/formatConfigBeforeSave.ts

@@ -17,11 +17,12 @@ const cleanDashboardFootnotes = (config: DashboardConfig) => {
   }
 }
 
-const cleanDashboardData = (config: DashboardConfig) => {
+const cleanDashboardData = (config: DashboardConfig, isEditor = false) => {
   if (config.datasets) {
     Object.keys(config.datasets).forEach(datasetKey => {
       delete config.datasets[datasetKey].formattedData
-      if (config.datasets[datasetKey].dataUrl) {
+      // Only delete data when not in editor mode
+      if (config.datasets[datasetKey].dataUrl && !isEditor) {
         delete config.datasets[datasetKey].data
       }
     })
@@ -104,12 +105,12 @@ const removeRuntimeDataURLs = (config: DashboardConfig) => {
   }
 }
 
-export const stripConfig = configToStrip => {
+export const stripConfig = (configToStrip, isEditor = false) => {
   const strippedConfig = cloneConfig(configToStrip)
   if (strippedConfig.type === 'dashboard') {
     if (strippedConfig.multiDashboards) {
       strippedConfig.multiDashboards.forEach((multiDashboard, i) => {
-        cleanDashboardData(strippedConfig.multiDashboards[i])
+        cleanDashboardData(strippedConfig.multiDashboards[i], isEditor)
         cleanSharedFilters(strippedConfig.multiDashboards[i])
         cleanDashboardFootnotes(strippedConfig.multiDashboards[i])
         cleanVisualizationFilters(strippedConfig.multiDashboards[i])
@@ -120,7 +121,7 @@ export const stripConfig = configToStrip => {
       delete strippedConfig.label
     }
     delete strippedConfig.activeDashboard
-    cleanDashboardData(strippedConfig)
+    cleanDashboardData(strippedConfig, isEditor)
     cleanSharedFilters(strippedConfig)
     cleanDashboardFootnotes(strippedConfig)
     cleanVisualizationFilters(strippedConfig)

package/src/helpers/getUpdateConfig.ts

@@ -1,91 +1,91 @@
-import { DashboardState } from '../store/dashboard.reducer'
-import { DashboardConfig as Config, DashboardConfig } from '../types/DashboardConfig'
-import { filterData } from './filterData'
-import { generateValuesForFilter } from './generateValuesForFilter'
-import { getFormattedData } from './getFormattedData'
-import { getVizKeys } from './getVizKeys'
-import { getVizRowColumnLocator } from './getVizRowColumnLocator'
-
-import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
-
-type UpdateState = Omit<DashboardState, 'config'> & {
-  config?: DashboardConfig
-}
-
-export const getUpdateConfig =
-  (state: UpdateState) =>
-  (newConfig, dataOverride?: Object): [Config, Object] => {
-    let newFilteredData = {}
-    let visualizationKeys = getVizKeys(newConfig)
-
-    const vizRowColumnLocator = getVizRowColumnLocator(newConfig.rows)
-
-    if (newConfig.dashboard.sharedFilters) {
-      newConfig.dashboard.sharedFilters.forEach((filter, i) => {
-        const filterIsSetByVizData = !!visualizationKeys.find(key => key === filter.setBy)
-        const _filter = newConfig.dashboard.sharedFilters[i]
-
-        const setValuesAndActive = filterValues => {
-          _filter.values = filterValues
-          if (filterValues.length > 0) {
-            const defaultValues = _filter.pivot ? _filter.values : _filter.values[0]
-
-            const queryStringFilterValue = getQueryStringFilterValue(_filter)
-            if (queryStringFilterValue) {
-              _filter.active = queryStringFilterValue
-            } else {
-              _filter.active = _filter.active || defaultValues
-            }
-          }
-        }
-
-        const filterValues = generateValuesForFilter(filter.columnName, dataOverride || state.data)
-        if (filterIsSetByVizData) {
-          if (_filter.order === 'asc') {
-            filterValues.sort()
-          }
-          if (_filter.order === 'desc') {
-            filterValues.sort().reverse()
-          }
-
-          setValuesAndActive(filterValues)
-        } else if ((!filter.values || filter.values.length === 0) && filter.showDropdown) {
-          setValuesAndActive(filterValues)
-        }
-      })
-
-      visualizationKeys.forEach(visualizationKey => {
-        const row = vizRowColumnLocator[visualizationKey]
-        if (newConfig.rows[row]?.datakey) return // data configured on the row level
-        const applicableFilters = newConfig.dashboard.sharedFilters.filter(
-          sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(visualizationKey) !== -1
-        )
-
-        if (applicableFilters.length > 0) {
-          const visualization = newConfig.visualizations[visualizationKey]
-          const _newConfigDataSet = newConfig.datasets[visualization.dataKey]
-          const formattedData = getFormattedData(
-            _newConfigDataSet?.data || visualization.data,
-            visualization.dataDescription
-          )
-          const _data = formattedData || (dataOverride || state.data)[visualization.dataKey]
-          newFilteredData[visualizationKey] = filterData(applicableFilters, _data)
-        }
-      })
-
-      newConfig.rows.forEach((row, rowIndex) => {
-        const applicableFilters = newConfig.dashboard.sharedFilters.filter(
-          sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(rowIndex) !== -1
-        )
-
-        if (applicableFilters.length > 0) {
-          const formattedData = getFormattedData(row.data, row.dataDescription)
-          const _data = formattedData || (dataOverride || state.data)[rowIndex]
-          newFilteredData[rowIndex] = filterData(applicableFilters, _data)
-        }
-      })
-    }
-    //Enforce default values that need to be calculated at runtime
-    newConfig.runtime = {}
-    return [newConfig, newFilteredData]
-  }
+import { DashboardState } from '../store/dashboard.reducer'
+import { DashboardConfig as Config, DashboardConfig } from '../types/DashboardConfig'
+import { filterData } from './filterData'
+import { generateValuesForFilter } from './generateValuesForFilter'
+import { getFormattedData } from './getFormattedData'
+import { getVizKeys } from './getVizKeys'
+import { getVizRowColumnLocator } from './getVizRowColumnLocator'
+
+import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
+
+type UpdateState = Omit<DashboardState, 'config'> & {
+  config?: DashboardConfig
+}
+
+export const getUpdateConfig =
+  (state: UpdateState) =>
+  (newConfig, dataOverride?: Object): [Config, Object] => {
+    let newFilteredData = {}
+    let visualizationKeys = getVizKeys(newConfig)
+
+    const vizRowColumnLocator = getVizRowColumnLocator(newConfig.rows)
+
+    if (newConfig.dashboard.sharedFilters) {
+      newConfig.dashboard.sharedFilters.forEach((filter, i) => {
+        const filterIsSetByVizData = !!visualizationKeys.find(key => key === filter.setBy)
+        const _filter = newConfig.dashboard.sharedFilters[i]
+
+        const setValuesAndActive = filterValues => {
+          _filter.values = filterValues
+          if (filterValues.length > 0) {
+            const defaultValues = _filter.pivot ? _filter.values : _filter.values[0]
+
+            const queryStringFilterValue = getQueryStringFilterValue(_filter)
+            if (queryStringFilterValue) {
+              _filter.active = queryStringFilterValue
+            } else {
+              _filter.active = _filter.active || defaultValues
+            }
+          }
+        }
+
+        const filterValues = generateValuesForFilter(filter.columnName, dataOverride || state.data)
+        if (filterIsSetByVizData) {
+          if (_filter.order === 'asc') {
+            filterValues.sort()
+          }
+          if (_filter.order === 'desc') {
+            filterValues.sort().reverse()
+          }
+
+          setValuesAndActive(filterValues)
+        } else if ((!filter.values || filter.values.length === 0) && filter.showDropdown) {
+          setValuesAndActive(filterValues)
+        }
+      })
+
+      visualizationKeys.forEach(visualizationKey => {
+        const row = vizRowColumnLocator[visualizationKey]
+        if (newConfig.rows[row]?.datakey) return // data configured on the row level
+        const applicableFilters = newConfig.dashboard.sharedFilters.filter(
+          sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(visualizationKey) !== -1
+        )
+
+        if (applicableFilters.length > 0) {
+          const visualization = newConfig.visualizations[visualizationKey]
+          const _newConfigDataSet = newConfig.datasets[visualization.dataKey]
+          const formattedData = getFormattedData(
+            _newConfigDataSet?.data || visualization.data,
+            visualization.dataDescription
+          )
+          const _data = formattedData || (dataOverride || state.data)[visualization.dataKey]
+          newFilteredData[visualizationKey] = filterData(applicableFilters, _data)
+        }
+      })
+
+      newConfig.rows.forEach((row, rowIndex) => {
+        const applicableFilters = newConfig.dashboard.sharedFilters.filter(
+          sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(rowIndex) !== -1
+        )
+
+        if (applicableFilters.length > 0) {
+          const formattedData = getFormattedData(row.data, row.dataDescription)
+          const _data = formattedData || (dataOverride || state.data)[rowIndex]
+          newFilteredData[rowIndex] = filterData(applicableFilters, _data)
+        }
+      })
+    }
+    //Enforce default values that need to be calculated at runtime
+    newConfig.runtime = {}
+    return [newConfig, newFilteredData]
+  }

package/src/helpers/getVizConfig.ts

@@ -8,7 +8,7 @@ import { AnyVisualization } from '@cdc/core/types/Visualization'
 
 const transform = new DataTransform()
 
-export const getFootnotesVizConfig = (
+const getFootnotesVizConfig = (
   visualizationConfig: AnyVisualization,
   rowNumber: number,
   config: MultiDashboardConfig,
@@ -100,7 +100,7 @@ export const getVizConfig = (
     const dataKey = visualizationConfig.dataKey || 'backwards-compatibility'
     // Markup-includes need data even when shared filters exist (for markup variables)
     const shouldClearData = sharedFilterColumns.length && visualizationConfig.type !== 'markup-include'
-    visualizationConfig.data = data[dataKey] || []
+    visualizationConfig.data = shouldClearData ? [] : data[dataKey] || []
     if (visualizationConfig.formattedData) {
       visualizationConfig.formattedData =
         transform.developerStandardize(visualizationConfig.data, visualizationConfig.dataDescription) ||

package/src/helpers/loadAPIFilters.ts

@@ -1,99 +1,109 @@
-import _ from 'lodash'
-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,
-  dispatchErrorMessages: Function,
-  setAPIFilterDropdowns: Function,
-  autoLoadFilterIndexes: number[]
-) => {
-  const loadAPIFilters = (
-    sharedFilters: SharedFilter[],
-    dropdowns: APIFilterDropdowns,
-    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
-      )
-    )
-    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(
-        endpoint =>
-          new Promise<{ error: boolean }>(resolve => {
-            fetch(endpoint)
-              .then(resp => resp.json())
-              .then(data => {
-                if (!Array.isArray(data)) {
-                  console.error('COVE only supports response data in the shape Array<Object>')
-                }
-                const [_key, index] = toFetch[endpoint]
-                const apiFilter = filterLookup.get(_key) as APIFilter
-                const _filterValues = apiFilterHelpers.getFilterValues(data, apiFilter)
-
-                newDropdowns[_key] = _filterValues
-                const newDefaultSelectedFilter = apiFilterHelpers.setAutoLoadDefaultValue(
-                  index,
-                  _filterValues,
-                  sharedFilters,
-                  _autoLoadFilterIndexes
-                )
-                sharedFilters[index] = newDefaultSelectedFilter
-              })
-              .catch(() => {
-                dispatchErrorMessages({
-                  type: 'ADD_ERROR_MESSAGE',
-                  payload: 'There was a problem returning data. Please try again.'
-                })
-                resolve({ error: true })
-              })
-              .finally(() => {
-                resolve({ error: false })
-              })
-          })
-      )
-    ).then(responses => {
-      const hasError = responses.some(({ error }) => error)
-      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
-      }, [])
-      if (hasError || !toLoad.length || recursiveLimit === 0) {
-        setAPIFilterDropdowns(newDropdowns)
-        dispatch({ type: 'SET_SHARED_FILTERS', payload: sharedFilters })
-        return sharedFilters
-      } else {
-        return loadAPIFilters(sharedFilters, newDropdowns, loadAll, recursiveLimit - 1)
-      }
-    })
-  }
-  return loadAPIFilters
-}
+import _ from 'lodash'
+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,
+  dispatchErrorMessages: Function,
+  setAPIFilterDropdowns: Function,
+  autoLoadFilterIndexes: number[]
+) => {
+  const loadAPIFilters = (
+    sharedFilters: SharedFilter[],
+    dropdowns: APIFilterDropdowns,
+    loadAll?: boolean,
+    recursiveLimit = 50,
+    isStale?: () => boolean
+  ): Promise<SharedFilter[]> => {
+    if (!sharedFilters) return
+    const allIndexes = sharedFilters.map((_, index) => index)
+    const _autoLoadFilterIndexes = loadAll ? allIndexes : autoLoadFilterIndexes
+    sharedFilters = sharedFilters.map((filter, index) => {
+      // For data filters (no API endpoint), return unchanged to preserve user selections
+      if (!filter.apiFilter?.apiEndpoint) {
+        return filter
+      }
+      return apiFilterHelpers.setAutoLoadDefaultValue(
+        index,
+        dropdowns[filter.apiFilter.apiEndpoint],
+        sharedFilters,
+        _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(
+        endpoint =>
+          new Promise<{ error: boolean }>(resolve => {
+            fetch(endpoint)
+              .then(resp => resp.json())
+              .then(data => {
+                if (!Array.isArray(data)) {
+                  console.error('COVE only supports response data in the shape Array<Object>')
+                }
+                const [_key, index] = toFetch[endpoint]
+                const apiFilter = filterLookup.get(_key) as APIFilter
+                const _filterValues = apiFilterHelpers.getFilterValues(data, apiFilter)
+
+                newDropdowns[_key] = _filterValues
+                const newDefaultSelectedFilter = apiFilterHelpers.setAutoLoadDefaultValue(
+                  index,
+                  _filterValues,
+                  sharedFilters,
+                  _autoLoadFilterIndexes
+                )
+                sharedFilters[index] = newDefaultSelectedFilter
+              })
+              .catch(() => {
+                dispatchErrorMessages({
+                  type: 'ADD_ERROR_MESSAGE',
+                  payload: 'There was a problem returning data. Please try again.'
+                })
+                resolve({ error: true })
+              })
+              .finally(() => {
+                resolve({ error: false })
+              })
+          })
+      )
+    ).then(responses => {
+      const hasError = responses.some(({ error }) => error)
+      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
+      }, [])
+      if (hasError || !toLoad.length || recursiveLimit === 0) {
+        // Check if this operation is stale before dispatching
+        if (isStale && isStale()) {
+          // Operation is stale (filters were cleared), skip dispatch
+          return sharedFilters
+        }
+        setAPIFilterDropdowns(newDropdowns)
+        dispatch({ type: 'SET_SHARED_FILTERS', payload: sharedFilters })
+        return sharedFilters
+      } else {
+        return loadAPIFilters(sharedFilters, newDropdowns, loadAll, recursiveLimit - 1, isStale)
+      }
+    })
+  }
+  return loadAPIFilters
+}