@cdc/dashboard 4.25.1 → 4.25.2-25

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

@@ -1,10 +1,16 @@
 import _ from 'lodash'
 import { APIFilter } from '../../../../types/APIFilter'
 import { getVizRowColumnLocator } from '../../../../helpers/getVizRowColumnLocator'
-import { TextField } from '@cdc/core/components/EditorPanel/Inputs'
+import { Select, TextField } from '@cdc/core/components/EditorPanel/Inputs'
 import DataTransform from '@cdc/core/helpers/DataTransform'
 import { useEffect, useMemo, useState } from 'react'
 import { SharedFilter } from '../../../../types/SharedFilter'
+
+// Add defaultValue to SharedFilter type
+interface SharedFilter {
+  defaultValue?: string
+  resetLabel?: string
+}
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
@@ -14,14 +20,24 @@ import { Visualization } from '@cdc/core/types/Visualization'
 import { hasDashboardApplyBehavior } from '../../../../helpers/hasDashboardApplyBehavior'
 import NestedDropDownDashboard from './NestedDropDownDashboard'
 import { FILTER_STYLE } from '../../../../types/FilterStyles'
+import { filterOrderOptions } from '@cdc/core/components/Filters'
+import FilterOrder from '@cdc/core/components/EditorPanel/VizFilterEditor/components/FilterOrder'
 
 type FilterEditorProps = {
   config: DashboardConfig
   filter: SharedFilter
+  filterIndex: number
   updateFilterProp: (name: keyof SharedFilter, value: any) => void
+  toggleNestedQueryParameters: (checked: boolean) => void
 }
 
-const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilterProp }) => {
+const FilterEditor: React.FC<FilterEditorProps> = ({
+  filter,
+  filterIndex,
+  config,
+  updateFilterProp,
+  toggleNestedQueryParameters
+}) => {
   const [columns, setColumns] = useState<string[]>([])
   const transform = new DataTransform()
   const filterStyles = Object.values(FILTER_STYLE)
@@ -59,6 +75,11 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
     return [nameLookup, [...vizOptions, ...rowsNotSelected]]
   }, [config.visualizations, filter.usedBy, filter.setBy, vizRowColumnLocator])
 
+  const useParameters = useMemo(() => {
+    if (filter.subGrouping) return !!(filter.setByQueryParameter && filter.subGrouping?.setByQueryParameter)
+    return !!filter.setByQueryParameter
+  }, [config, filterIndex])
+
   const loadColumnData = async () => {
     const columns = {}
     const dataKeys = Object.keys(config.datasets)
@@ -94,21 +115,6 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
     loadColumnData()
   }, [config.datasets])
 
-  const addFilterUsedBy = (filter, value) => {
-    if (value === '') return
-    if (!filter.usedBy) filter.usedBy = []
-    filter.usedBy.push(value)
-    updateFilterProp('usedBy', filter.usedBy)
-  }
-
-  const removeFilterUsedBy = (filter, value) => {
-    let usedByIndex = filter.usedBy.indexOf(value)
-    if (usedByIndex !== -1) {
-      filter.usedBy.splice(usedByIndex, 1)
-      updateFilterProp('usedBy', filter.usedBy)
-    }
-  }
-
   const updateAPIFilter = (key: keyof APIFilter, value: string | boolean) => {
     const filterClone = _.cloneDeep(filter)
     const _filter = filterClone.apiFilter || { apiEndpoint: '', valueSelector: '', textSelector: '' }
@@ -116,8 +122,12 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
     updateFilterProp('apiFilter', newAPIFilter)
   }
 
-  const handleFilterStyleChange = value => {
-    updateFilterProp('filterStyle', value)
+  const updateLabel = (value: string) => {
+    const duplicateLabels = config.dashboard.sharedFilters.filter(
+      (filter, i) => filter.key === value && filterIndex !== i
+    )
+    // If there are duplicate labels, append the number of duplicates to the label similar functionality to duplicate file names
+    updateFilterProp('key', duplicateLabels.length ? value + ` (${duplicateLabels.length})` : value)
   }
 
   const isNestedDropDown = filter.filterStyle === FILTER_STYLE.nestedDropdown
@@ -215,7 +225,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
             <span className='edit-label column-heading'>Filter Style: </span>
             <select
               value={filter.filterStyle || FILTER_STYLE.dropdown}
-              onChange={e => handleFilterStyleChange(e.target.value)}
+              onChange={e => updateFilterProp('filterStyle', e.target.value)}
             >
               {filterStyles.map(dataKey => (
                 <option value={dataKey} key={`filter-style-select-item-${dataKey}`}>
@@ -240,7 +250,9 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
           <TextField
             label='Label'
             value={filter.key}
-            updateField={(_section, _subSection, _key, value) => updateFilterProp('key', value)}
+            updateField={(_section, _subSection, _key, value) => {
+              updateLabel(value)
+            }}
           />
           {filter.filterStyle === FILTER_STYLE.multiSelect && (
             <TextField
@@ -361,6 +373,30 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
 
               {isNestedDropDown && <APIInputs isSubgroup={true} />}
 
+              <label>
+                <input
+                  type='checkbox'
+                  checked={useParameters}
+                  aria-label='Create query parameters'
+                  disabled={!filter.apiFilter?.valueSelector && !filter.apiFilter?.subgroupValueSelector}
+                  onChange={e => toggleNestedQueryParameters(e.target.checked)}
+                />
+                <span>
+                  {' '}
+                  Create query parameters{' '}
+                  <Tooltip style={{ textTransform: 'none' }}>
+                    <Tooltip.Target>
+                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                    </Tooltip.Target>
+                    <Tooltip.Content>
+                      <p>
+                        Query parameters will be added to the URL which correspond to the respective value selector.
+                      </p>
+                    </Tooltip.Content>
+                  </Tooltip>
+                </span>
+              </label>
+
               {!!parentFilters.length && (
                 <label>
                   <span className='edit-label column-heading mt-1'>Parent Filter(s): </span>
@@ -409,12 +445,6 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
                 value={filter.resetLabel || ''}
                 updateField={(_section, _subSection, _key, value) => updateFilterProp('resetLabel', value)}
               />
-
-              <TextField
-                label='Default Value Set By Query String Parameter: '
-                value={filter.setByQueryParameter || ''}
-                updateField={(_section, _subSection, _key, value) => updateFilterProp('setByQueryParameter', value)}
-              />
             </>
           )}
 
@@ -439,6 +469,38 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
                     </select>
                   </label>
 
+                  <Select
+                    value={filter.defaultValue}
+                    options={
+                      filter.resetLabel
+                        ? [filter.resetLabel, ...config.dashboard.sharedFilters[filterIndex].values]
+                        : config.dashboard.sharedFilters[filterIndex].values
+                    }
+                    updateField={(_section, _subSection, _key, value) => updateFilterProp('defaultValue', value)}
+                    label={'Filter Default Value'}
+                    initial={'Select'}
+                  />
+
+                  <Select
+                    value={filter.order || 'asc'}
+                    options={filterOrderOptions}
+                    updateField={(_section, _subSection, _key, value) => updateFilterProp('order', value)}
+                    label={'Filter Order'}
+                  />
+
+                  {/* if custom order is set use react-dnd library to sort the values */}
+                  {filter.order === 'cust' && (
+                    <FilterOrder
+                      orderedValues={filter.orderedValues || filter.values}
+                      handleFilterOrder={(index1, index2) => {
+                        const values = [...filter.values]
+                        const [removed] = values.splice(index1, 1)
+                        values.splice(index2, 0, removed)
+                        updateFilterProp('orderedValues', values)
+                      }}
+                    />
+                  )}
+
                   <label>
                     <span className='edit-label column-heading'>Show Dropdown</span>
                     <input
@@ -451,14 +513,39 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
                   </label>
                 </>
               ) : (
-                <NestedDropDownDashboard
-                  filter={filter}
-                  updateFilterProp={(name, value) => {
-                    updateFilterProp(name, value)
-                  }}
-                  isDashboard={true}
-                  config={config}
-                />
+                <>
+                  <NestedDropDownDashboard
+                    filter={filter}
+                    updateFilterProp={(name, value) => {
+                      updateFilterProp(name, value)
+                    }}
+                    isDashboard={true}
+                    config={config}
+                  />
+                  <label>
+                    <input
+                      type='checkbox'
+                      checked={useParameters}
+                      aria-label='Create query parameters'
+                      disabled={!filter.columnName || !filter.subGrouping?.columnName}
+                      onChange={e => toggleNestedQueryParameters(e.target.checked)}
+                    />
+                    <span>
+                      {' '}
+                      Create query parameters{' '}
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>
+                            Query parameters will be added to the URL which correspond to the respective column name.
+                          </p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    </span>
+                  </label>
+                </>
               )}
               <label>
                 <span className='edit-label column-heading'>Set By: </span>
@@ -527,11 +614,13 @@ const FilterEditor: React.FC<FilterEditorProps> = ({ filter, config, updateFilte
                 </select>
               </label>
 
-              <TextField
-                label='Default Value Set By Query String Parameter: '
-                value={filter.setByQueryParameter || ''}
-                updateField={(_section, _subSection, _key, value) => updateFilterProp('setByQueryParameter', value)}
-              />
+              {!isNestedDropDown && (
+                <TextField
+                  label='Default Value Set By Query String Parameter: '
+                  value={filter.setByQueryParameter || ''}
+                  updateField={(_section, _subSection, _key, value) => updateFilterProp('setByQueryParameter', value)}
+                />
+              )}
             </>
           )}
         </>

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

@@ -22,13 +22,16 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
   const datasets = Object.keys(config.datasets)
   const columnNameOptionsInDataset = []
   datasets.map(datasetKey => {
-    const columnNamesInDataset = Object.keys(config.datasets[datasetKey].data[0])
-    columnNamesInDataset.forEach(columnName =>
-      columnNameOptionsInDataset.push({
-        datasetKey,
-        columnName
-      })
-    )
+    const data = config.datasets[datasetKey].data
+    if (data) {
+      const columnNamesInDataset = Object.keys(data[0])
+      columnNamesInDataset.forEach(columnName =>
+        columnNameOptionsInDataset.push({
+          datasetKey,
+          columnName
+        })
+      )
+    }
   })
 
   const subGroupingColumnNameOptions = []

package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx

@@ -14,6 +14,7 @@ import { hasDashboardApplyBehavior } from '../../helpers/hasDashboardApplyBehavi
 import * as apiFilterHelpers from '../../helpers/apiFilterHelpers'
 import { applyQueuedActive } from '@cdc/core/components/Filters/helpers/applyQueuedActive'
 import './dashboardfilter.styles.css'
+import { updateChildFilters } from '../../helpers/updateChildFilters'
 
 type SubOptions = { subOptions?: Record<'value' | 'text', string>[] }
 
@@ -64,17 +65,15 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
         const queryParams = getQueryParams()
         let needsQueryUpdate = false
         dashboardConfig.sharedFilters.forEach(sharedFilter => {
-          if (sharedFilter.queuedActive) {
-            applyQueuedActive(sharedFilter)
-            if (
-              sharedFilter.setByQueryParameter &&
-              queryParams[sharedFilter.setByQueryParameter] !== sharedFilter.active
-            ) {
-              queryParams[sharedFilter.setByQueryParameter] = Array.isArray(sharedFilter.active)
-                ? sharedFilter.active.join(',')
-                : sharedFilter.active
-              needsQueryUpdate = true
-            }
+          if (sharedFilter.queuedActive) applyQueuedActive(sharedFilter)
+          if (
+            sharedFilter.setByQueryParameter &&
+            queryParams[sharedFilter.setByQueryParameter] !== sharedFilter.active
+          ) {
+            queryParams[sharedFilter.setByQueryParameter] = Array.isArray(sharedFilter.active)
+              ? sharedFilter.active.join(',')
+              : sharedFilter.active
+            needsQueryUpdate = true
           }
         })
 
@@ -183,7 +182,7 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
           >
             <Filters
               show={visualizationConfig?.sharedFilterIndexes?.map(Number)}
-              filters={dashboardConfig.dashboard.sharedFilters || []}
+              filters={updateChildFilters(dashboardConfig.dashboard.sharedFilters, state.data) || []}
               apiFilterDropdowns={apiFilterDropdowns}
               handleOnChange={handleOnChange}
               showSubmit={visualizationConfig.filterBehavior === FilterBehavior.Apply && !visualizationConfig.autoLoad}

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

@@ -1,7 +1,5 @@
 .cove-dashboard-filters-container {
   :is(label) {
-    margin-bottom: 0;
-    margin-top: 0.5rem;
     font-size: var(--filter-label-font-size);
     font-weight: 700;
   }

package/src/components/VisualizationRow.tsx

@@ -68,6 +68,7 @@ type VizRowProps = {
   updateChildConfig: Function
   apiFilterDropdowns: APIFilterDropdowns
   currentViewport: ViewPort
+  isLastRow: boolean
 }
 
 const VisualizationRow: React.FC<VizRowProps> = ({
@@ -80,7 +81,8 @@ const VisualizationRow: React.FC<VizRowProps> = ({
   setSharedFilter,
   updateChildConfig,
   apiFilterDropdowns,
-  currentViewport
+  currentViewport,
+  isLastRow
 }) => {
   const { config, filteredData: dashboardFilteredData, data: rawData } = useContext(DashboardContext)
   const [show, setShow] = React.useState(row.columns.map((col, i) => i === 0))
@@ -156,11 +158,19 @@ const VisualizationRow: React.FC<VizRowProps> = ({
 
           const shouldShow = row.toggle === undefined || (row.toggle && show[colIndex])
 
+          const hiddenDashboardFilters =
+            visualizationConfig.type === 'dashboardFilters' &&
+            visualizationConfig.sharedFilterIndexes &&
+            visualizationConfig.sharedFilterIndexes.filter(
+              idx => config.dashboard.sharedFilters?.[idx]?.showDropdown === false
+            ).length === visualizationConfig.sharedFilterIndexes.length
+          const hasMarginBottom = !isLastRow && !hiddenDashboardFilters
+
           return (
             <div
               key={`vis__${index}__${colIndex}`}
               className={`col-12 col-md-${col.width}${!shouldShow ? ' d-none' : ''}${
-                hideVisualization ? ' hide-parent-visualization' : ' mb-4'
+                hideVisualization ? ' hide-parent-visualization' : hasMarginBottom ? ' mb-4' : ''
               }`}
             >
               {row.toggle && !hideVisualization && (

package/src/helpers/addValuesToDashboardFilters.ts

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
 import { SharedFilter } from '../types/SharedFilter'
+import { handleSorting } from '@cdc/core/components/Filters'
 
 // Gets filter values from dataset
 const generateValuesForFilter = (columnName: string, data: Record<string, any[]>) => {
@@ -38,8 +39,8 @@ export const addValuesToDashboardFilters = (
     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) {
@@ -49,11 +50,11 @@ export const addValuesToDashboardFilters = (
         const active: string[] = Array.isArray(filterCopy.active) ? filterCopy.active : [filterCopy.active]
         filterCopy.active = active.filter(val => defaultValues.includes(val))
       } else {
-        const defaultLabel = filters.find(filter => filter.resetLabel)
-        const defaultValue = defaultLabel ? defaultLabel.resetLabel : filterCopy.values[0] || filterCopy.active
-        filterCopy.active = defaultValue
+        const hasResetLabel = filters.find(filter => filter.resetLabel)
+        const defaultValue = hasResetLabel ? hasResetLabel.resetLabel : filterCopy.active || filterCopy.values[0]
+        filterCopy.active = filterCopy.defaultValue || defaultValue
       }
     }
-    return filterCopy
+    return handleSorting(filterCopy)
   })
 }

package/src/helpers/apiFilterHelpers.ts

@@ -134,10 +134,16 @@ export const setAutoLoadDefaultValue = (
 ): SharedFilter => {
   const sharedFiltersCopy = _.cloneDeep(sharedFilters)
   const sharedFilter = _.cloneDeep(sharedFiltersCopy[sharedFilterIndex])
-  if (!autoLoadFilterIndexes.length || !dropdownOptions?.length) return sharedFilter // no autoLoading happening
-  const hasQueryParameter = sharedFilter.setByQueryParameter
-    ? Boolean(getQueryParam(sharedFilter.setByQueryParameter))
-    : false
+  const defaultQueryParamValue = getQueryParam(sharedFilter?.setByQueryParameter)
+  const hasQueryParameter = sharedFilter.setByQueryParameter ? defaultQueryParamValue !== undefined : false
+  if (!autoLoadFilterIndexes.length || !dropdownOptions?.length) {
+    if (hasQueryParameter && sharedFilter.apiFilter) {
+      const subQueryValue = getQueryParam(sharedFilter.subGrouping?.setByQueryParameter)
+      const isNestedDropdown = subQueryValue !== undefined
+      sharedFilter.queuedActive = isNestedDropdown ? [defaultQueryParamValue, subQueryValue] : defaultQueryParamValue
+    }
+    return sharedFilter // no autoLoading happening
+  }
   if (autoLoadFilterIndexes.includes(sharedFilterIndex) || hasQueryParameter) {
     const filterParents = sharedFiltersCopy.filter(f => sharedFilter.parents?.includes(f.key))
     const notAllParentFiltersSelected = filterParents.some(p => !(p.active || p.queuedActive))
@@ -148,7 +154,6 @@ export const setAutoLoadDefaultValue = (
       setActiveNestedDropdown(dropdownOptions, sharedFilter)
     } else {
       const defaultValue = dropdownOptions[0]?.value
-      const defaultQueryParamValue = getQueryParam(sharedFilter?.setByQueryParameter)
       if (!sharedFilter.active) {
         sharedFilter.active = defaultQueryParamValue || defaultValue
       } else {

package/src/helpers/changeFilterActive.ts

@@ -1,6 +1,11 @@
 import _ from 'lodash'
 import { FilterBehavior } from '../helpers/FilterBehavior'
-import { getQueryParams, updateQueryString } from '@cdc/core/helpers/queryStringUtils'
+import {
+  getQueryParams,
+  removeQueryParam,
+  updateQueryParam,
+  updateQueryString
+} from '@cdc/core/helpers/queryStringUtils'
 import { SharedFilter } from '../types/SharedFilter'
 import { DashboardFilters } from '../types/DashboardFilters'
 import { FILTER_STYLE } from '../types/FilterStyles'
@@ -12,9 +17,11 @@ const handleChildren = (sharedFilters: SharedFilter[], parentIndex: number) => {
     .filter(i => i !== null)
   if (childFilterIndexes.length) {
     childFilterIndexes.forEach(filterIndex => {
-      sharedFilters[filterIndex].active = ''
-      if (sharedFilters[filterIndex].subGrouping) {
-        sharedFilters[filterIndex].subGrouping.active = ''
+      const cur = sharedFilters[filterIndex]
+      if (cur.setByQueryParameter) removeQueryParam(cur.setByQueryParameter)
+      cur.active = ''
+      if (cur.subGrouping) {
+        cur.subGrouping.active = ''
       }
     })
   }
@@ -45,7 +52,13 @@ export const changeFilterActive = (
         updateQueryString(queryParams)
       }
     }
+  } else if (currentFilter.subGrouping) {
+    updateQueryParam(currentFilter.setByQueryParameter, value[0])
+    updateQueryParam(currentFilter.subGrouping.setByQueryParameter, value[1])
+    sharedFiltersCopy[filterIndex].queuedActive = value
   } else {
+    const paramVal = Array.isArray(value) ? value.join(',') : value
+    if (currentFilter.setByQueryParameter) updateQueryParam(currentFilter.setByQueryParameter, paramVal)
     sharedFiltersCopy[filterIndex].queuedActive = value
   }
   return [sharedFiltersCopy, handleChildren(sharedFiltersCopy, filterIndex)]

package/src/helpers/getFilteredData.ts

@@ -6,11 +6,18 @@ import { getFormattedData } from './getFormattedData'
 import { getVizKeys } from './getVizKeys'
 
 export const getApplicableFilters = (dashboard: Dashboard, key: string | number): false | SharedFilter[] => {
-  const c = dashboard.sharedFilters?.filter(sharedFilter => sharedFilter.usedBy && sharedFilter.usedBy.indexOf(`${key}`) !== -1)
+  const c = dashboard.sharedFilters?.filter(
+    sharedFilter =>
+      (sharedFilter.usedBy && sharedFilter.usedBy.indexOf(`${key}`) !== -1) || sharedFilter.usedBy?.indexOf(key) !== -1
+  )
   return c?.length > 0 ? c : false
 }
 
-export const getFilteredData = (state: DashboardState, initialFilteredData?: Record<string, any>, dataOverride?: Object) => {
+export const getFilteredData = (
+  state: DashboardState,
+  initialFilteredData?: Record<string, any>,
+  dataOverride?: Object
+) => {
   const newFilteredData = initialFilteredData || {}
   const { config } = state
   getVizKeys(config).forEach(key => {
@@ -18,7 +25,8 @@ export const getFilteredData = (state: DashboardState, initialFilteredData?: Rec
     if (applicableFilters) {
       const { dataKey, data, dataDescription } = config.visualizations[key]
       const _data = (dataOverride || state.data)[dataKey] || data
-      const formattedData = dataOverride?.[dataKey] || (dataDescription ? getFormattedData(_data, dataDescription) : _data)
+      const formattedData =
+        dataOverride?.[dataKey] || (dataDescription ? getFormattedData(_data, dataDescription) : _data)
 
       newFilteredData[key] = filterData(applicableFilters, formattedData)
     }
@@ -29,7 +37,8 @@ export const getFilteredData = (state: DashboardState, initialFilteredData?: Rec
       const { dataKey, data, dataDescription } = row
       const _data = (dataOverride || state.data)[dataKey] || data
       if (applicableFilters) {
-        const formattedData = dataOverride?.[dataKey] ?? dataDescription ? getFormattedData(_data, dataDescription) : _data
+        const formattedData =
+          dataOverride?.[dataKey] ?? dataDescription ? getFormattedData(_data, dataDescription) : _data
 
         newFilteredData[index] = filterData(applicableFilters, formattedData)
       } else {

package/src/helpers/getUpdateConfig.ts

@@ -31,7 +31,7 @@ export const getUpdateConfig =
             const defaultValues = _filter.pivot ? _filter.values : _filter.values[0]
 
             const queryStringFilterValue = getQueryStringFilterValue(_filter)
-            if(queryStringFilterValue){
+            if (queryStringFilterValue) {
               _filter.active = queryStringFilterValue
             } else {
               _filter.active = _filter.active || defaultValues
@@ -57,19 +57,26 @@ export const getUpdateConfig =
       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)
+        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 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)
+        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)

package/src/helpers/loadAPIFilters.ts

@@ -42,7 +42,7 @@ export const loadAPIFiltersFactory = (
     return Promise.all(
       Object.keys(toFetch).map(
         endpoint =>
-          new Promise<void>(resolve => {
+          new Promise<{ error: boolean }>(resolve => {
             fetch(endpoint)
               .then(resp => resp.json())
               .then(data => {
@@ -67,13 +67,15 @@ export const loadAPIFiltersFactory = (
                   type: 'ADD_ERROR_MESSAGE',
                   payload: 'There was a problem returning data. Please try again.'
                 })
+                resolve({ error: true })
               })
               .finally(() => {
-                resolve()
+                resolve({ error: false })
               })
           })
       )
-    ).then(() => {
+    ).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) {
@@ -84,7 +86,7 @@ export const loadAPIFiltersFactory = (
         }
         return acc
       }, [])
-      if (!toLoad.length || recursiveLimit === 0) {
+      if (hasError || !toLoad.length || recursiveLimit === 0) {
         setAPIFilterDropdowns(newDropdowns)
         dispatch({ type: 'SET_SHARED_FILTERS', payload: sharedFilters })
         return sharedFilters

package/src/helpers/tests/updatesChildFilters.test.ts

@@ -0,0 +1,56 @@
+import { SharedFilter } from '../../types/SharedFilter'
+import { updateChildFilters } from '../updateChildFilters'
+
+describe('updateChildFilters', () => {
+  it('should filter data based on the provided filters', () => {
+    const filters = [
+      {
+        tier: 1,
+        columnName: 'name',
+        active: 'John',
+        key: 'Parent Filter',
+        values: ['John', 'Kelly', 'Norman', 'Jane']
+      },
+      {
+        tier: 2,
+        columnName: 'lastName',
+        active: '',
+        key: 'Child Filter',
+        parents: 'Parent Filter',
+        values: ['Deer', 'Roberts']
+      }
+    ] as SharedFilter[]
+    const data = {
+      vizKey: [
+        [
+          { name: 'John', lastName: 'Deer' },
+          { name: 'John', lastName: 'Roberts' },
+          { name: 'Kelly', lastName: 'Adams' },
+          { name: 'Norman', lastName: 'Sally' },
+          { name: 'Jane', lastName: 'Gorman' }
+        ]
+      ]
+    }
+
+    let exprectedResult = [
+      {
+        tier: 1,
+        columnName: 'name',
+        active: 'John',
+        key: 'Parent Filter',
+        values: ['John', 'Kelly', 'Norman', 'Jane']
+      },
+      {
+        tier: 2,
+        columnName: 'lastName',
+        active: '',
+        key: 'Child Filter',
+        parents: 'Parent Filter',
+        values: ['Deer', 'Roberts'] // updated values only
+      }
+    ]
+    const result = updateChildFilters(filters, data)
+
+    expect(result).toEqual(exprectedResult)
+  })
+})