@cdc/dashboard 4.24.7 → 4.24.9-1

package/src/components/VisualizationRow.tsx

@@ -27,10 +27,21 @@ type VisualizationWrapperProps = {
   row: ConfigRow
 }
 
-const VisualizationWrapper: React.FC<VisualizationWrapperProps> = ({ allExpanded, currentViewport, groupName, row, children }) => {
+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}>
+      <CollapsibleVisualizationRow
+        allExpanded={allExpanded}
+        fontSize={'26px'}
+        groupName={groupName}
+        currentViewport={currentViewport}
+      >
         {children}
       </CollapsibleVisualizationRow>
     </div>
@@ -54,7 +65,17 @@ type VizRowProps = {
   currentViewport: ViewPort
 }
 
-const VisualizationRow: React.FC<VizRowProps> = ({ allExpanded, filteredDataOverride, groupName, 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) => {
@@ -81,7 +102,9 @@ const VisualizationRow: React.FC<VizRowProps> = ({ allExpanded, filteredDataOver
   }, [config, row, rawData, dashboardFilteredData])
 
   const applyButtonNotClicked = (vizConfig: DashboardFilters): boolean => {
-    const dashboardFilters = Object.values(config.visualizations).filter(v => v.type === 'dashboardFilters') as DashboardFilters[]
+    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 => {
@@ -94,11 +117,16 @@ const VisualizationRow: React.FC<VizRowProps> = ({ allExpanded, filteredDataOver
     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 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={`col-md-${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) {
@@ -108,22 +136,37 @@ const VisualizationRow: React.FC<VizRowProps> = ({ allExpanded, filteredDataOver
             }
           }
 
-          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 = inNoDataState && visualizationConfig.type === 'dashboardFilters' && applyButtonNotClicked(visualizationConfig)
+          const hideFilter =
+            inNoDataState &&
+            visualizationConfig.type === 'dashboardFilters' &&
+            applyButtonNotClicked(visualizationConfig)
 
           const shouldShow = row.toggle === undefined || (row.toggle && show[colIndex])
 
           const body = <></>
 
           return (
-            <div key={`vis__${index}__${colIndex}`} className={`col-${col.width} ${!shouldShow ? 'd-none' : ''}`}>
-              <VisualizationWrapper allExpanded={allExpanded} currentViewport={currentViewport} groupName={groupName} row={row}>
+            <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}
@@ -135,7 +178,15 @@ const VisualizationRow: React.FC<VizRowProps> = ({ allExpanded, filteredDataOver
                     }}
                     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}
@@ -154,7 +205,15 @@ const VisualizationRow: React.FC<VizRowProps> = ({ allExpanded, filteredDataOver
                     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' && (
@@ -177,7 +236,15 @@ const VisualizationRow: React.FC<VizRowProps> = ({ allExpanded, filteredDataOver
                       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' && (
@@ -226,14 +293,28 @@ const VisualizationRow: React.FC<VizRowProps> = ({ allExpanded, filteredDataOver
                     viewport={currentViewport}
                   />
                 )}
-                {visualizationConfig.type === 'footnotes' && <FootnotesStandAlone key={col.widget} visualizationKey={col.widget} config={visualizationConfig} viewport={currentViewport} />}
+                {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}
+      {row.footnotesId ? (
+        <FootnotesStandAlone
+          isEditor={false}
+          visualizationKey={row.footnotesId}
+          config={footnotesConfig}
+          viewport={currentViewport}
+        />
+      ) : null}
     </div>
   )
 }

package/src/components/Widget.tsx

@@ -18,6 +18,7 @@ const labelHash = {
   Bar: 'Bar',
   Line: 'Line',
   'Spark Line': 'Spark Line',
+  'Bump Chart': 'Bump Chart',
   Pie: 'Pie',
   us: 'United States (State- or County-Level)',
   'us-county': 'United States (State- or County-Level)',

package/src/helpers/FilterBehavior.ts

@@ -0,0 +1,4 @@
+export const FilterBehavior = {
+  Apply: 'Apply Button',
+  OnChange: 'Filter Change'
+}

package/src/helpers/addValuesToDashboardFilters.ts

@@ -0,0 +1,49 @@
+import _ from 'lodash'
+import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
+import { SharedFilter } from '../types/SharedFilter'
+
+// Gets filter values from dataset
+const generateValuesForFilter = (columnName, data: Record<string, any[]>) => {
+  const values: string[] = []
+  // data is a dataset this loops through ALL datasets to find matching values
+  // not sure if this is desired behavior
+
+  const d = Object.values(data) || []
+  d.forEach((rows: any[]) => {
+    rows?.forEach(row => {
+      const value = row[columnName]
+      if (value !== undefined && !values.includes(value)) {
+        values.push(String(value))
+      }
+    })
+  })
+  return values
+}
+
+const getSelector = (filter: SharedFilter) => {
+  return filter.type === 'urlfilter' ? filter.apiFilter?.valueSelector : filter.columnName
+}
+
+export const addValuesToDashboardFilters = (filters: SharedFilter[], data: Record<string, any[]>): Array<SharedFilter> => {
+  return filters?.map(filter => {
+    if (filter.type === 'urlfilter') return filter
+    const filterCopy = _.cloneDeep(filter)
+    const filterValues = generateValuesForFilter(getSelector(filter), data)
+    filterCopy.values = filterValues
+    if (filterValues.length > 0) {
+      const queryStringFilterValue = getQueryStringFilterValue(filterCopy)
+      if (queryStringFilterValue) {
+        filterCopy.active = queryStringFilterValue
+      } else if (filter.multiSelect) {
+        const defaultValues = filterCopy.values
+        const active: string[] = Array.isArray(filterCopy.active) ? filterCopy.active : [filterCopy.active]
+        filterCopy.active = active.filter(val => defaultValues.includes(val))
+      } else {
+        const defaultValue = filterCopy.values[0] || filterCopy.active
+        const active = Array.isArray(filterCopy.active) ? filterCopy.active[0] : filterCopy.active
+        filterCopy.active = filterCopy.values.includes(active) ? active : defaultValue
+      }
+    }
+    return filterCopy
+  })
+}

package/src/helpers/apiFilterHelpers.ts

@@ -2,26 +2,42 @@ import { gatherQueryParams } from '@cdc/core/helpers/gatherQueryParams'
 import { APIFilterDropdowns, DropdownOptions } from '../components/DashboardFilters'
 import { APIFilter } from '../types/APIFilter'
 import { SharedFilter } from '../types/SharedFilter'
+import _ from 'lodash'
+import { getQueryParams } from '@cdc/core/helpers/queryStringUtils'
 
-export const getLoadingFilterMemo = (sharedAPIFilters, apiFilterDropdowns): APIFilterDropdowns =>
-  sharedAPIFilters.reduce((acc, curr) => {
-    const _key = curr.apiFilter.apiEndpoint
-    if (apiFilterDropdowns[_key] != null) return acc // don't overwrite fetched data.
-    acc[_key] = null
+/** key for the dropdowns object */
+type DropdownsKey = string
+
+export const getLoadingFilterMemo = (
+  apiFiltersEndpoints: string[],
+  apiFilterDropdowns,
+  changedChildFilterIndexes = []
+): APIFilterDropdowns =>
+  apiFiltersEndpoints.reduce((acc, endpoint, currIndex) => {
+    const _key: DropdownsKey = endpoint
+    const hasChanged = changedChildFilterIndexes.includes(currIndex)
+    if (apiFilterDropdowns[_key] != null && !hasChanged) {
+      acc[_key] = apiFilterDropdowns[_key]
+    } else {
+      acc[_key] = null
+    }
     return acc
   }, {})
 
-const getParentParams = (childFilter: SharedFilter, sharedAPIFilters: SharedFilter[]): Record<'key' | 'value', string>[] | null => {
-  const _parents = sharedAPIFilters.filter(parentFilter => childFilter.parents?.includes(parentFilter.key))
-  if (!_parents.length) return null
+const getParentParams = (
+  childFilter: SharedFilter,
+  sharedFilters: SharedFilter[]
+): Record<'key' | 'value', string>[] | null => {
+  const _parents = sharedFilters.filter(parentFilter => childFilter.parents?.includes(parentFilter.key))
+  if (!(_parents || []).length) return null
 
   return _parents.flatMap(filter => {
     const key = filter.queryParameter || filter.apiFilter.valueSelector || ''
     const value = filter.queuedActive || filter.active || ''
     if (Array.isArray(value)) {
-      return value.map(_value => ({ key, value: _value }))
+      return value.map(_value => ({ key, value: _value.toString() }))
     }
-    return [{ key, value }]
+    return [{ key, value: value.toString() }]
   })
 }
 
@@ -30,22 +46,58 @@ export const getFilterValues = (data: Array<Object>, apiFilter: APIFilter): Drop
   return data.map(v => ({ text: v[textSelector || valueSelector], value: v[valueSelector] }))
 }
 
-export const getToFetch = (sharedAPIFilters: SharedFilter[], apiFilterDropdowns: APIFilterDropdowns): Record<string, [string, number]> => {
+/** API endpoint to fetch */
+type Endpoint = string
+type SharedFilterIndex = number
+export const getToFetch = (
+  sharedFilters: SharedFilter[],
+  apiFilterDropdowns: APIFilterDropdowns
+): Record<Endpoint, [DropdownsKey, SharedFilterIndex]> => {
   const toFetch = {}
-  sharedAPIFilters.forEach((filter, index) => {
-    const baseEndpoint = filter.apiFilter.apiEndpoint
+  sharedFilters.forEach((filter, index) => {
+    const baseEndpoint = filter.apiFilter?.apiEndpoint
+    if (!baseEndpoint) return
     const _key = baseEndpoint
-    const isAPIFilter = apiFilterDropdowns[_key]
-    const parentParams = getParentParams(filter, sharedAPIFilters)
+    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 (isAPIFilter && !parentParams) return // don't reload filter unless it's a child
-    const topLevelDataAlreadyLoaded = isAPIFilter && !filter.parents
-    if (topLevelDataAlreadyLoaded) return // don't reload top level filters
 
     const endpoint = baseEndpoint + (parentParams ? gatherQueryParams(baseEndpoint, parentParams) : '')
     toFetch[endpoint] = [_key, index]
   })
   return toFetch
 }
+
+export const setAutoLoadDefaultValue = (
+  sharedFilterIndex: number,
+  dropdownOptions: DropdownOptions,
+  sharedFilters: SharedFilter[],
+  autoLoadFilterIndexes: number[]
+): SharedFilter => {
+  const sharedFiltersCopy = _.cloneDeep(sharedFilters)
+  const sharedFilter = _.cloneDeep(sharedFiltersCopy[sharedFilterIndex])
+  if (!autoLoadFilterIndexes.length || !dropdownOptions?.length) return sharedFilter // no autoLoading happening
+  if (autoLoadFilterIndexes.includes(sharedFilterIndex)) {
+    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 === 'multi-select' ? [dropdownOptions[0]?.value] : dropdownOptions[0]?.value
+    if (!sharedFilter.active) {
+      const queryParams = getQueryParams()
+      const defaultQueryParamValue = queryParams[sharedFilter?.queryParameter]
+      sharedFilter.active = defaultQueryParamValue || defaultValue
+    } else if (sharedFilter.filterStyle === 'multi-select') {
+      const currentOption = (sharedFilter.active as string[]).filter(activeVal =>
+        dropdownOptions.find(option => option.value === activeVal)
+      )
+      sharedFilter.active = currentOption.length ? currentOption : defaultValue
+    } else {
+      const currentOption = dropdownOptions.find(option => option.value === sharedFilter.active)
+      sharedFilter.active = currentOption ? currentOption.value : defaultValue
+    }
+  }
+  return sharedFilter
+}

package/src/helpers/changeFilterActive.ts

@@ -1,23 +1,32 @@
 import _ from 'lodash'
-import { FilterBehavior } from '../components/Header/Header'
+import { FilterBehavior } from '../helpers/FilterBehavior'
 import { getQueryParams, updateQueryString } from '@cdc/core/helpers/queryStringUtils'
 import { SharedFilter } from '../types/SharedFilter'
 import { DashboardFilters } from '../types/DashboardFilters'
 
 const handleChildren = (sharedFilters: SharedFilter[], parentIndex: number) => {
   const parentKey = sharedFilters[parentIndex].key
-  const childIndex = sharedFilters.findIndex(filter => filter.parents?.includes(parentKey))
-  if (childIndex !== -1) {
-    sharedFilters[childIndex].active = ''
+  const childFilterIndexes = sharedFilters
+    .map((filter, index) => (filter.parents?.includes(parentKey) ? index : null))
+    .filter(i => i !== null)
+  if (childFilterIndexes.length) {
+    childFilterIndexes.forEach(filterIndex => {
+      sharedFilters[filterIndex].active = ''
+    })
   }
+  return childFilterIndexes
 }
 
-export const changeFilterActive = (filterIndex: number, value: string | string[], sharedFilters: SharedFilter[], vizConfig: DashboardFilters): SharedFilter[] => {
+export const changeFilterActive = (
+  filterIndex: number,
+  value: string | string[],
+  sharedFilters: SharedFilter[],
+  vizConfig: DashboardFilters
+): [SharedFilter[], number[]] => {
   const sharedFiltersCopy = _.cloneDeep(sharedFilters)
-  const currentFilter = sharedFilters[filterIndex]
+  const currentFilter = sharedFiltersCopy[filterIndex]
   if (vizConfig.filterBehavior !== FilterBehavior.Apply || vizConfig.autoLoad) {
     sharedFiltersCopy[filterIndex].active = value
-    handleChildren(sharedFiltersCopy, filterIndex)
     const queryParams = getQueryParams()
     if (currentFilter.setByQueryParameter && queryParams[currentFilter.setByQueryParameter] !== currentFilter.active) {
       queryParams[currentFilter.setByQueryParameter] = currentFilter.active
@@ -26,5 +35,5 @@ export const changeFilterActive = (filterIndex: number, value: string | string[]
   } else {
     sharedFiltersCopy[filterIndex].queuedActive = value
   }
-  return sharedFiltersCopy
+  return [sharedFiltersCopy, handleChildren(sharedFiltersCopy, filterIndex)]
 }

package/src/helpers/getFilteredData.ts

@@ -10,14 +10,14 @@ export const getApplicableFilters = (dashboard: Dashboard, key: string | number)
   return c?.length > 0 ? c : false
 }
 
-export const getFilteredData = (state: DashboardState, initialFilteredData = {}, dataOverride?: Object) => {
-  const newFilteredData = initialFilteredData
+export const getFilteredData = (state: DashboardState, initialFilteredData?: Record<string, any>, dataOverride?: Object) => {
+  const newFilteredData = initialFilteredData || {}
   const { config } = state
   getVizKeys(config).forEach(key => {
     const applicableFilters = getApplicableFilters(config.dashboard, key)
     if (applicableFilters) {
       const { dataKey, data, dataDescription } = config.visualizations[key]
-      const _data = state.data[dataKey] || data
+      const _data = (dataOverride || state.data)[dataKey] || data
       const formattedData = dataOverride?.[dataKey] || (dataDescription ? getFormattedData(_data, dataDescription) : _data)
 
       newFilteredData[key] = filterData(applicableFilters, formattedData)
@@ -27,7 +27,7 @@ export const getFilteredData = (state: DashboardState, initialFilteredData = {},
     if (row.dataKey) {
       const applicableFilters = getApplicableFilters(config.dashboard, index)
       const { dataKey, data, dataDescription } = row
-      const _data = state.data[dataKey] || data
+      const _data = (dataOverride || state.data)[dataKey] || data
       if (applicableFilters) {
         const formattedData = dataOverride?.[dataKey] ?? dataDescription ? getFormattedData(_data, dataDescription) : _data
 

package/src/helpers/iconHash.tsx

@@ -5,6 +5,7 @@ export const iconHash = {
   'data-bite': <Icon display='databite' base />,
   Bar: <Icon display='chartBar' base />,
   'Spark Line': <Icon display='chartLine' />,
+  'Bump Chart': <Icon display='chartLine' />,
   'waffle-chart': <Icon display='grid' base />,
   'markup-include': <Icon display='code' base />,
   Line: <Icon display='chartLine' base />,
@@ -14,6 +15,7 @@ export const iconHash = {
   world: <Icon display='mapWorld' base />,
   'single-state': <Icon display='mapAl' base />,
   gear: <Icon display='gear' base />,
+  gearMulti: <Icon display='gearMulti' base />,
   tools: <Icon display='tools' base />,
   'filtered-text': <Icon display='filtered-text' base />,
   dashboardFilters: <Icon display='dashboardFilters' base />,

package/src/helpers/loadAPIFilters.ts

@@ -0,0 +1,74 @@
+import _ from 'lodash'
+import { APIFilterDropdowns } from '../components/DashboardFilters'
+import { SharedFilter } from '../types/SharedFilter'
+import * as apiFilterHelpers from './apiFilterHelpers'
+import { APIFilter } from '../types/APIFilter'
+
+export const loadAPIFiltersFactory = (
+  dispatch: Function,
+  setAPIFilterDropdowns: Function,
+  autoLoadFilterIndexes: number[]
+) => {
+  const loadAPIFilters = (
+    sharedFilters: SharedFilter[],
+    dropdowns: APIFilterDropdowns,
+    recursiveLimit = 3
+  ): Promise<SharedFilter[]> => {
+    if (!sharedFilters) return
+    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 newDropdowns = _.cloneDeep(dropdowns)
+    return Promise.all(
+      Object.keys(toFetch).map(
+        endpoint =>
+          new Promise<void>(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>')
+                  return
+                }
+                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(console.error)
+              .finally(() => {
+                resolve()
+              })
+          })
+      )
+    ).then(() => {
+      const finishedLoading = sharedFilters.reduce((acc, curr, index) => {
+        if (autoLoadFilterIndexes.includes(index) && !curr.active) return false
+        return acc
+      }, true)
+      if (finishedLoading || recursiveLimit === 0) {
+        setAPIFilterDropdowns(newDropdowns)
+        dispatch({ type: 'SET_SHARED_FILTERS', payload: sharedFilters })
+        return sharedFilters
+      } else {
+        return loadAPIFilters(sharedFilters, newDropdowns, recursiveLimit - 1)
+      }
+    })
+  }
+  return loadAPIFilters
+}

package/src/helpers/reloadURLHelpers.ts

@@ -1,10 +1,14 @@
 import { gatherQueryParams } from '@cdc/core/helpers/gatherQueryParams'
 import { SharedFilter } from '../types/SharedFilter'
 import { capitalizeSplitAndJoin } from '@cdc/core/helpers/cove/string'
-import { Visualization } from '@cdc/core/types/Visualization'
+import { AnyVisualization, Visualization } from '@cdc/core/types/Visualization'
 import _ from 'lodash'
 
-export const isUpdateNeeded = (filters: SharedFilter[], currentQueryParams: Record<string, string>, newQueryParams: Record<string, string>): boolean => {
+export const isUpdateNeeded = (
+  filters: SharedFilter[],
+  currentQueryParams: Record<string, string>,
+  newQueryParams: Record<string, string>
+): boolean => {
   let needsUpdate = false
   filters.find(filter => {
     if (filter.type === 'urlfilter' && !Array.isArray(filter.active) && filter.filterBy === 'File Name') {
@@ -20,15 +24,24 @@ export const isUpdateNeeded = (filters: SharedFilter[], currentQueryParams: Reco
   return needsUpdate
 }
 
-export const getDataURL = (updatedQSParams: Record<string, string>, dataUrl: URL, newFileName: string) => {
-  const _params = Object.keys(updatedQSParams).map(key => ({ key, value: updatedQSParams[key] }))
+export const getDataURL = (updatedQSParams: Record<string, string | string[]>, dataUrl: URL, newFileName: string) => {
+  const _params = Object.keys(updatedQSParams).flatMap(key => {
+    const value = updatedQSParams[key]
+    if (value === undefined) return []
+    if (typeof value === 'string' && (value as String).match(/undefined/)) return []
+    if (Array.isArray(value)) return value.map(v => ({ key, value: v }))
+    return { key, value }
+  })
   const baseURL = dataUrl.origin + dataUrl.pathname
   let dataUrlFinal = `${baseURL}${gatherQueryParams(baseURL, _params)}`
 
   if (newFileName !== '') {
     const fileExtension = dataUrl.pathname.split('.').pop()
     const pathWithoutFilename = dataUrl.pathname.substring(0, dataUrl.pathname.lastIndexOf('/'))
-    dataUrlFinal = `${dataUrl.origin}${pathWithoutFilename}/${newFileName}.${fileExtension}${gatherQueryParams(baseURL, _params)}`
+    dataUrlFinal = `${dataUrl.origin}${pathWithoutFilename}/${newFileName}.${fileExtension}${gatherQueryParams(
+      baseURL,
+      _params
+    )}`
   }
   return dataUrlFinal
 }
@@ -43,7 +56,11 @@ export const getNewFileName = (newFileName: string, filter: SharedFilter, datase
   if (filter.datasetKey === datasetKey) {
     if (filter.fileName) {
       // if a file name is found, ie, state_${query}, use that, ie. state_activeFilter.json
-      fileName = capitalizeSplitAndJoin.call(String(filter.fileName), ' ', replacements[filter.whitespaceReplacement ?? 'Keep Spaces'])
+      fileName = capitalizeSplitAndJoin.call(
+        String(filter.fileName),
+        ' ',
+        replacements[filter.whitespaceReplacement ?? 'Keep Spaces']
+      )
     } else {
       // if no file name is entered use the default active filter. ie. /activeFilter.json
       fileName = filter.active as string
@@ -51,7 +68,14 @@ export const getNewFileName = (newFileName: string, filter: SharedFilter, datase
   }
 
   if (fileName?.includes('${query}')) {
-    fileName = fileName.replace('${query}', capitalizeSplitAndJoin.call(String(filter.active), ' ', replacements[filter.whitespaceReplacement ?? 'Keep Spaces']))
+    fileName = fileName.replace(
+      '${query}',
+      capitalizeSplitAndJoin.call(
+        String(filter.active),
+        ' ',
+        replacements[filter.whitespaceReplacement ?? 'Keep Spaces']
+      )
+    )
   }
 
   return fileName
@@ -66,3 +90,13 @@ export const getVisualizationsWithFormattedData = (visualizations: Record<string
     return acc
   }, _.cloneDeep(visualizations))
 }
+
+export const filterUsedByDataUrl = (
+  filter: SharedFilter,
+  datasetKey: string,
+  visualizations: Record<string, AnyVisualization>
+) => {
+  if (!filter.usedBy || !filter.usedBy.length) return true
+  const vizUsingFilters = filter.usedBy?.map(vizKey => visualizations[vizKey])
+  return vizUsingFilters?.some(viz => viz?.dataKey === datasetKey)
+}