@cdc/dashboard 4.25.10 → 4.26.1

package/src/components/DataDesignerModal.tsx

@@ -4,14 +4,13 @@ import { useContext, useMemo, useState } from 'react'
 import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
 import Modal from '@cdc/core/components/ui/Modal'
 import Loader from '@cdc/core/components/Loader'
-import { CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
+import { CheckBox, Select } from '@cdc/core/components/EditorPanel/Inputs'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import _ from 'lodash'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import DataTransform from '@cdc/core/helpers/DataTransform'
 import { ConfigureData } from '@cdc/core/types/ConfigureData'
 import Icon from '@cdc/core/components/ui/Icon'
-import InputSelect from '@cdc/core/components/inputs/InputSelect'
 
 type DataDesignerModalProps = {
   rowIndex: number
@@ -134,10 +133,18 @@ export const DataDesignerModal: React.FC<DataDesignerModalProps> = ({ vizKey, ro
         {loadingAPIData && <Loader fullScreen />}
         <div className='dataset-selector-container'>
           Select a dataset:&nbsp;
-          <select className='dataset-selector' value={configureData.dataKey || ''} onChange={changeDataset}>
+          <select
+            className='dataset-selector cove-form-select'
+            value={configureData.dataKey || ''}
+            onChange={changeDataset}
+          >
             <option value=''>Select a dataset</option>
             {config.datasets &&
-              Object.keys(config.datasets).map(datasetKey => <option key={datasetKey}>{datasetKey}</option>)}
+              Object.keys(config.datasets).map(datasetKey => (
+                <option key={datasetKey} value={datasetKey}>
+                  {datasetKey}
+                </option>
+              ))}
           </select>
           {vizKey && (
             // only shows for visualizations
@@ -186,8 +193,13 @@ export const DataDesignerModal: React.FC<DataDesignerModalProps> = ({ vizKey, ro
             />
           ) : (
             <>
-              <InputSelect
-                options={Object.keys(config.datasets[configureData.dataKey]?.data[0] || {})}
+              <Select
+                options={Object.keys(
+                  config.rows[rowIndex]?.data?.[0] ||
+                    configureData.data?.[0] ||
+                    config.datasets[configureData.dataKey]?.data?.[0] ||
+                    {}
+                )}
                 value={config.rows[rowIndex].multiVizColumn}
                 label='Multi-Visualization Column'
                 initial='--Select--'

package/src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useContext } from 'react'
+import { useContext, useRef, useEffect } from 'react'
 import cloneConfig from '@cdc/core/helpers/cloneConfig'
 import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
 
@@ -20,8 +20,22 @@ const Header = (props: HeaderProps) => {
   const dispatch = useContext(DashboardDispatchContext)
   const back = () => {
     if (!visualizationKey) return
+
     const newConfig = cloneConfig(config)
-    newConfig.visualizations[visualizationKey].editing = false
+
+    // Ensure visualizations object exists
+    if (!newConfig.visualizations || !newConfig.visualizations[visualizationKey]) {
+      console.error(`Visualization ${visualizationKey} not found in config`)
+      return
+    }
+
+    // Explicitly set editing to false
+    newConfig.visualizations[visualizationKey] = {
+      ...newConfig.visualizations[visualizationKey],
+      editing: false,
+      showEditorPanel: false
+    }
+
     dispatch({ type: 'SET_CONFIG', payload: newConfig })
 
     // the Widget component will do a data fetch if no data is available for the visualization
@@ -56,21 +70,24 @@ const Header = (props: HeaderProps) => {
     return strippedState
   }
 
-  useEffect(() => {
-    const parsedData = convertStateToConfig()
-
-    // Emit the data in a regular JS event so it can be consumed by anything.
-    const event = new CustomEvent('updateVizConfig', { detail: JSON.stringify(parsedData) })
-
-    window.dispatchEvent(event)
+  const configStringRef = useRef<string>()
 
-    // Pass up to Editor if needed
-    if (setParentConfig) {
-      setParentConfig(parsedData)
+  // Only update parent when config content actually changes (not just reference)
+  useEffect(() => {
+    const configString = JSON.stringify(convertStateToConfig())
+    if (configStringRef.current !== configString) {
+      configStringRef.current = configString
+
+      // Emit the data in a regular JS event so it can be consumed by anything.
+      const event = new CustomEvent('updateVizConfig', { detail: configString })
+      window.dispatchEvent(event)
+
+      // Pass up to Editor if needed
+      if (setParentConfig) {
+        setParentConfig(JSON.parse(configString))
+      }
     }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [config])
+  }, [config, setParentConfig])
 
   const handleCheck = e => {
     const { checked } = e.currentTarget
@@ -96,12 +113,27 @@ const Header = (props: HeaderProps) => {
             multidashboard
           </span>
           <br />
-          <input
-            type='text'
-            placeholder='Enter Dashboard Name Here'
-            defaultValue={config.dashboard?.title}
-            onChange={e => changeConfigValue('dashboard', 'title', e.target.value)}
-          />
+          <div style={{ display: 'flex', alignItems: 'flex-end', gap: '10px' }}>
+            <input
+              type='text'
+              placeholder='Enter Dashboard Name Here'
+              defaultValue={config.dashboard?.title}
+              onChange={e => changeConfigValue('dashboard', 'title', e.target.value)}
+              style={{ flex: 1 }}
+            />
+            <label style={{ display: 'flex', flexDirection: 'column', gap: '3px', fontSize: '0.85em' }}>
+              <span style={{ fontSize: '0.8em' }}>Title Style</span>
+              <select
+                value={config.dashboard.titleStyle}
+                onChange={e => changeConfigValue('dashboard', 'titleStyle', e.target.value)}
+                style={{ fontSize: '0.9em' }}
+              >
+                <option value='small'>Small</option>
+                <option value='large'>Large</option>
+                <option value='legacy'>Legacy</option>
+              </select>
+            </label>
+          </div>
         </div>
       )}
       {!subEditor && (

package/src/components/Toggle/Toggle.tsx

@@ -1,48 +1,48 @@
-import { ConfigRow } from '../../types/ConfigRow'
-import { AnyVisualization } from '@cdc/core/types/Visualization'
-import { getIcon } from '../../helpers/iconHash'
-import { labelHash } from '@cdc/core/helpers/labelHash'
-import './toggle-style.css'
-import _ from 'lodash'
-
-type ToggleProps = {
-  active: number
-  row: ConfigRow
-  visualizations: Record<string, AnyVisualization>
-  setToggled: (colIndex: number) => void
-}
-const Toggle: React.FC<ToggleProps> = ({ active, row, visualizations, setToggled, text }) => {
-  const selectItem = (colIndex, e = null) => {
-    if (e?.key && e.key !== 'Enter' && e.key !== ' ') return
-    if (e?.key === ' ') e.preventDefault() // Prevent page scroll
-    setToggled(colIndex)
-  }
-
-  return (
-    <div className='toggle-component' role='radiogroup' aria-label='Visualization options'>
-      {row.columns.map((col, colIndex) => {
-        if (!col.widget) return null
-        const type = visualizations[col.widget].type
-        // Get the column toggele Text or default to the type
-        const text = col.toggleName ? col.toggleName : labelHash[type]
-        const selected = colIndex === active
-        return (
-          <div
-            role='radio'
-            className={selected ? 'selected' : ''}
-            key={colIndex}
-            onClick={() => selectItem(colIndex)}
-            onKeyUp={e => selectItem(colIndex, e)}
-            aria-checked={selected}
-            tabIndex={0}
-            aria-label={`Toggle ${type}`}
-          >
-            <span aria-hidden='true'>{getIcon(visualizations[col.widget])}</span> <span>{text}</span>
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
-export default Toggle
+import { ConfigRow } from '../../types/ConfigRow'
+import { AnyVisualization } from '@cdc/core/types/Visualization'
+import { getIcon } from '../../helpers/iconHash'
+import { labelHash } from '@cdc/core/helpers/labelHash'
+import './toggle-style.css'
+import _ from 'lodash'
+
+type ToggleProps = {
+  active: number
+  row: ConfigRow
+  visualizations: Record<string, AnyVisualization>
+  setToggled: (colIndex: number) => void
+}
+const Toggle: React.FC<ToggleProps> = ({ active, row, visualizations, setToggled, text }) => {
+  const selectItem = (colIndex, e = null) => {
+    if (e?.key && e.key !== 'Enter' && e.key !== ' ') return
+    if (e?.key === ' ') e.preventDefault() // Prevent page scroll
+    setToggled(colIndex)
+  }
+
+  return (
+    <div className='toggle-component' role='radiogroup' aria-label='Visualization options'>
+      {row.columns.map((col, colIndex) => {
+        if (!col.widget) return null
+        const type = visualizations[col.widget].type
+        // Get the column toggele Text or default to the type
+        const text = col.toggleName ? col.toggleName : labelHash[type]
+        const selected = colIndex === active
+        return (
+          <div
+            role='radio'
+            className={selected ? 'selected' : ''}
+            key={colIndex}
+            onClick={() => selectItem(colIndex)}
+            onKeyUp={e => selectItem(colIndex, e)}
+            aria-checked={selected}
+            tabIndex={0}
+            aria-label={`Toggle ${text}`}
+          >
+            <span aria-hidden='true'>{getIcon(visualizations[col.widget])}</span> <span>{text}</span>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default Toggle

package/src/components/VisualizationRow.tsx

@@ -93,6 +93,63 @@ const VisualizationRow: React.FC<VizRowProps> = ({
     if (row.toggle) setToggled(0)
   }, [config.activeDashboard, index])
 
+  useEffect(() => {
+    // Trigger window resize event when tab changes to force chart re-render
+    if (row.toggle && toggledRow !== undefined) {
+      // Use setTimeout to ensure the d-none class has been removed first
+      setTimeout(() => {
+        window.dispatchEvent(new Event('resize'))
+      }, 50)
+    }
+  }, [toggledRow, row.toggle])
+
+  // Equalize TP5 data bite title heights in the same row
+  useEffect(() => {
+    const rowElement = document.querySelector(`[data-row-index="${index}"]`)
+    if (!rowElement) return
+
+    const tp5Titles = Array.from(rowElement.querySelectorAll('.bite__style--tp5 .cdc-callout__heading'))
+    if (tp5Titles.length <= 1) return // No need to equalize if there's only one or none
+
+    const equalizeTP5Titles = () => {
+      // Reset heights first
+      tp5Titles.forEach((title: HTMLElement) => {
+        title.style.minHeight = ''
+      })
+
+      // Calculate max height after reset
+      let maxHeight = 0
+      tp5Titles.forEach((title: HTMLElement) => {
+        const height = title.offsetHeight
+        if (height > maxHeight) maxHeight = height
+      })
+
+      // Apply max height to all titles
+      if (maxHeight > 0) {
+        tp5Titles.forEach((title: HTMLElement) => {
+          title.style.minHeight = `${maxHeight}px`
+        })
+      }
+    }
+
+    // Initial equalization
+    equalizeTP5Titles()
+
+    // Use ResizeObserver to watch for size changes in any of the titles
+    const resizeObserver = new ResizeObserver(() => {
+      equalizeTP5Titles()
+    })
+
+    // Observe all titles
+    tp5Titles.forEach(title => {
+      resizeObserver.observe(title as Element)
+    })
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [index, row, config, filteredDataOverride])
+
   const show = useMemo(() => {
     if (row.toggle) {
       return row.columns.map((col, i) => i === toggledRow)
@@ -166,13 +223,18 @@ const VisualizationRow: React.FC<VizRowProps> = ({
   }
 
   return (
-    <div className={`row${row.equalHeight ? ' equal-height' : ''}${row.toggle ? ' toggle' : ''}`} key={`row__${index}`}>
+    <div
+      className={`row${row.equalHeight ? ' equal-height' : ''}${row.toggle ? ' toggle' : ''}`}
+      key={`row__${index}`}
+      data-row-index={index}
+    >
       {row.toggle && !inNoDataState && (
         <Toggle row={row} visualizations={config.visualizations} active={toggledRow} setToggled={setToggled} />
       )}
       {row.columns.map((col, colIndex) => {
         if (col.width) {
-          if (!col.widget) return <div key={`row__${index}__col__${colIndex}`} className={`col col-${col.width}`}></div>
+          if (!col.widget)
+            return <div key={`row__${index}__col__${colIndex}`} className={`col-12 col-md-${col.width}`}></div>
 
           const visualizationConfig = getVizConfig(
             col.widget,
@@ -212,9 +274,14 @@ const VisualizationRow: React.FC<VizRowProps> = ({
             </a>
           )
 
+          // Markup-includes with external URLs don't depend on dashboard data
+          const isMarkupIncludeWithoutDataDependency =
+            type === 'markup-include' && !visualizationConfig.dataKey && !visualizationConfig.data?.length
+
           const hideVisualization =
             inNoDataState &&
             filterBehavior !== 'Apply Button' &&
+            !isMarkupIncludeWithoutDataDependency &&
             (type !== 'dashboardFilters' || applyButtonNotClicked(visualizationConfig))
 
           const shouldShow = row.toggle === undefined || (row.toggle && show[colIndex])
@@ -223,11 +290,11 @@ const VisualizationRow: React.FC<VizRowProps> = ({
             type === 'dashboardFilters' &&
             sharedFilterIndexes &&
             sharedFilterIndexes.filter(idx => config.dashboard.sharedFilters?.[idx]?.showDropdown === false).length ===
-            sharedFilterIndexes.length
-          const hasMarginBottom = !isLastRow && !hiddenDashboardFilters
+              sharedFilterIndexes.length
 
-          const vizWrapperClass = `col-12 col-md-${col.width}${!shouldShow ? ' d-none' : ''}${hideVisualization ? ' hide-parent-visualization' : hasMarginBottom ? ' mb-4' : ''
-            }`
+          const vizWrapperClass = `col-12 col-md-${col.width}${!shouldShow ? ' d-none' : ''}${
+            hideVisualization ? ' hide-parent-visualization' : ''
+          }${hiddenDashboardFilters ? ' hidden-dashboard-filters' : ''}`
           const link =
             config.table && config.table.show && config.datasets && table && table.showDataTableLink
               ? tableLink

package/src/components/VisualizationsPanel/VisualizationsPanel.tsx

@@ -51,7 +51,6 @@ const addVisualization = (type, subType) => {
         markupVariables: [],
         showHeader: true,
         srcUrl: '#example',
-        title: 'Markup Include',
         useInlineHTML: true
       }
       newVisualizationConfig.theme = 'theme-blue'
@@ -81,7 +80,7 @@ const addVisualization = (type, subType) => {
 
 const VisualizationsPanel = () => {
   const [advancedEditing, setAdvancedEditing] = useState(false)
-  const { config } = useContext(DashboardContext)
+  const { config, isEditor } = useContext(DashboardContext)
   const dispatch = useContext(DashboardDispatchContext)
   const loadConfig = incomingConfig => {
     const newConfig = !incomingConfig.multiDashboards
@@ -124,7 +123,7 @@ const VisualizationsPanel = () => {
         loadConfig={loadConfig}
         config={config}
         convertStateToConfig={() => undefined}
-        stripConfig={stripConfig}
+        stripConfig={cfg => stripConfig(cfg, isEditor)}
         onExpandCollapse={() => {
           setAdvancedEditing(!advancedEditing)
         }}

package/src/components/Widget/Widget.tsx

@@ -123,7 +123,7 @@ const Widget = ({
     if (!widgetConfig) return
     dispatch({
       type: 'UPDATE_VISUALIZATION',
-      payload: { vizKey: widgetConfig.uid as string, configureData: { editing: true } }
+      payload: { vizKey: widgetConfig.uid as string, configureData: { editing: true, showEditorPanel: true } }
     })
     loadSampleData()
   }

package/src/data/initial-state.js

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

package/src/helpers/addValuesToDashboardFilters.ts

@@ -1,7 +1,8 @@
 import _ from 'lodash'
-import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
+import { getQueryStringFilterValue, isFilterHiddenByQuery } from '@cdc/core/helpers/queryStringUtils'
 import { SharedFilter } from '../types/SharedFilter'
 import { handleSorting } from '@cdc/core/components/Filters'
+import { mergeCustomOrderValues } from '@cdc/core/helpers/mergeCustomOrderValues'
 
 // Gets filter values from dataset
 const generateValuesForFilter = (columnName: string, data: Record<string, any[]>) => {
@@ -34,13 +35,20 @@ export const addValuesToDashboardFilters = (
   data: Record<string, any[]>,
   filtersToSkip: number[] = []
 ): Array<SharedFilter> => {
-  return filters?.map((filter, index) => {
+  const result = 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)
+
+    // Only generate values from data if not pre-configured
+    const hasPreConfiguredValues = filter.values && filter.values.length > 0
+    const filterValues = hasPreConfiguredValues ? filter.values : generateValuesForFilter(getSelector(filter), data)
+
     filterCopy.values = filterValues
 
+    // Merge new values with existing custom order (fixes DEV-11740 & DEV-11376)
+    filterCopy.orderedValues = mergeCustomOrderValues(filterValues, filterCopy.orderedValues, filterCopy.order)
+
     if (filterValues.length > 0) {
       const queryStringFilterValue = getQueryStringFilterValue(filterCopy)
       if (queryStringFilterValue) {
@@ -50,12 +58,21 @@ export const addValuesToDashboardFilters = (
         const active: string[] = Array.isArray(filterCopy.active) ? filterCopy.active : [filterCopy.active]
         filterCopy.active = active.filter(val => defaultValues.includes(val))
       } else {
-        const hasResetLabel = filters.find(filter => filter.resetLabel)
-        const defaultValue = hasResetLabel ? hasResetLabel.resetLabel : filterCopy.active || filterCopy.values[0]
-        filterCopy.active = filterCopy.defaultValue || defaultValue
+        // Initialize active from defaultValue if not already set
+        // OR if defaultValue exists, always use it (overrides stale active from saved config)
+        if (filterCopy.defaultValue) {
+          filterCopy.active = filterCopy.defaultValue
+        } else if (!filterCopy.active) {
+          filterCopy.active = filterCopy.resetLabel || filterCopy.values[0]
+        }
       }
     }
 
+    // Check if filter should be hidden by query parameter
+    if (isFilterHiddenByQuery(filterCopy)) {
+      filterCopy.showDropdown = false
+    }
+
     // Handle nested dropdown subGrouping.active property
     if (filterCopy.subGrouping && filterCopy.subGrouping.valuesLookup) {
       const groupName = filterCopy.active as string
@@ -83,4 +100,5 @@ export const addValuesToDashboardFilters = (
 
     return handleSorting(filterCopy)
   })
+  return result
 }

package/src/helpers/apiFilterHelpers.ts

@@ -53,7 +53,31 @@ export const getParentParams = (
   })
 }
 
-export const notAllParentsSelected = parentParams => parentParams?.some(({ value }) => value === '')
+/**
+ * Checks if any parent filters are unselected or at their reset state.
+ * Returns true if at least one parent is not properly selected.
+ */
+export const hasUnselectedParents = (parentParams, sharedFilters?: SharedFilter[]): boolean => {
+  if (!parentParams) return false
+
+  return parentParams.some(({ key, value }) => {
+    // Check if value is empty
+    if (value === '') return true
+
+    // Check if value equals the parent filter's resetLabel
+    if (sharedFilters) {
+      const parentFilter = sharedFilters.find(f => f.queryParameter === key || f.apiFilter?.valueSelector === key)
+      if (parentFilter?.resetLabel && value === parentFilter.resetLabel) {
+        return true
+      }
+    }
+
+    return false
+  })
+}
+
+// Keep old name for backward compatibility
+export const notAllParentsSelected = hasUnselectedParents
 
 export const getFilterValues = (data: Array<Object>, apiFilter: APIFilter): DropdownOptions => {
   const { textSelector, valueSelector, subgroupTextSelector, subgroupValueSelector } = apiFilter
@@ -86,7 +110,7 @@ export const getToFetch = (
     if (apiFilterDropdowns[_key]) return // don't reload cached filter
     const parentParams = getParentParams(filter, sharedFilters)
 
-    if (notAllParentsSelected(parentParams)) return // don't send request for dependent children filter options
+    if (notAllParentsSelected(parentParams, sharedFilters)) return // don't send request for dependent children filter options
 
     const endpoint = baseEndpoint + (parentParams ? gatherQueryParams(baseEndpoint, parentParams) : '')
     toFetch[endpoint] = [_key, index]

package/src/helpers/changeFilterActive.ts

@@ -1,65 +1,67 @@
-import _ from 'lodash'
-import { FilterBehavior } from '../helpers/FilterBehavior'
-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'
-
-const handleChildren = (sharedFilters: SharedFilter[], parentIndex: number) => {
-  const parentKey = sharedFilters[parentIndex].key
-  const childFilterIndexes = sharedFilters
-    .map((filter, index) => (filter.parents?.includes(parentKey) ? index : null))
-    .filter(i => i !== null)
-  if (childFilterIndexes.length) {
-    childFilterIndexes.forEach(filterIndex => {
-      const cur = sharedFilters[filterIndex]
-      if (cur.setByQueryParameter) removeQueryParam(cur.setByQueryParameter)
-      cur.active = ''
-      if (cur.subGrouping) {
-        cur.subGrouping.active = ''
-      }
-    })
-  }
-  return childFilterIndexes
-}
-
-export const changeFilterActive = (
-  filterIndex: number,
-  value: string | string[],
-  sharedFilters: SharedFilter[],
-  vizConfig: DashboardFilters
-): [SharedFilter[], number[]] => {
-  const sharedFiltersCopy = _.cloneDeep(sharedFilters)
-  const currentFilter = sharedFiltersCopy[filterIndex]
-  if (vizConfig.filterBehavior !== FilterBehavior.Apply || vizConfig.autoLoad) {
-    if (currentFilter?.filterStyle === FILTER_STYLE.nestedDropdown) {
-      sharedFiltersCopy[filterIndex].active = value[0]
-      sharedFiltersCopy[filterIndex].subGrouping.active = value[1]
-    } else {
-      sharedFiltersCopy[filterIndex].active = value
-      handleChildren(sharedFiltersCopy, filterIndex)
-      const queryParams = getQueryParams()
-      if (
-        currentFilter.setByQueryParameter &&
-        queryParams[currentFilter.setByQueryParameter] !== currentFilter.active
-      ) {
-        queryParams[currentFilter.setByQueryParameter] = currentFilter.active
-        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)]
-}
+import _ from 'lodash'
+import { FilterBehavior } from '../helpers/FilterBehavior'
+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'
+
+const handleChildren = (sharedFilters: SharedFilter[], parentIndex: number) => {
+  const parentKey = sharedFilters[parentIndex].key
+  const childFilterIndexes = sharedFilters
+    .map((filter, index) => (filter.parents?.includes(parentKey) ? index : null))
+    .filter(i => i !== null)
+  if (childFilterIndexes.length) {
+    childFilterIndexes.forEach(filterIndex => {
+      const cur = sharedFilters[filterIndex]
+      if (cur.type === 'urlfilter') {
+        if (cur.setByQueryParameter) removeQueryParam(cur.setByQueryParameter)
+        cur.active = ''
+        if (cur.subGrouping) {
+          cur.subGrouping.active = ''
+        }
+      }
+    })
+  }
+  return childFilterIndexes
+}
+
+export const changeFilterActive = (
+  filterIndex: number,
+  value: string | string[],
+  sharedFilters: SharedFilter[],
+  vizConfig: DashboardFilters
+): [SharedFilter[], number[]] => {
+  const sharedFiltersCopy = _.cloneDeep(sharedFilters)
+  const currentFilter = sharedFiltersCopy[filterIndex]
+  if (vizConfig.filterBehavior !== FilterBehavior.Apply || vizConfig.autoLoad) {
+    if (currentFilter?.filterStyle === FILTER_STYLE.nestedDropdown) {
+      sharedFiltersCopy[filterIndex].active = value[0]
+      sharedFiltersCopy[filterIndex].subGrouping.active = value[1]
+    } else {
+      sharedFiltersCopy[filterIndex].active = value
+      handleChildren(sharedFiltersCopy, filterIndex)
+      const queryParams = getQueryParams()
+      if (
+        currentFilter.setByQueryParameter &&
+        queryParams[currentFilter.setByQueryParameter] !== currentFilter.active
+      ) {
+        queryParams[currentFilter.setByQueryParameter] = currentFilter.active
+        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)]
+}