@cdc/dashboard 4.24.10 → 4.24.12-2

package/src/components/Header/index.scss

@@ -12,11 +12,6 @@
       margin-bottom: 2px;
       width: 100%;
     }
-    label,
-    input:not([type='checkbox']),
-    select {
-      width: 100% !important;
-    }
 
     label {
       display: flex !important;

package/src/components/MultiConfigTabs/MultiConfigTabs.tsx

@@ -66,8 +66,16 @@ const Tab = ({ name, handleClick, tabs, index, active }) => {
 
   return (
     <li className='nav-item d-flex mt-0'>
-      {canMoveLeft && editing && <button onClick={() => handleReorder(index, -1)}>{'<'}</button>}
-      <div className={`edit nav-link${active ? ' active' : ''}`} aria-current={active ? 'page' : null} onClick={onClick}>
+      {canMoveLeft && editing && (
+        <button className='border-0' onClick={() => handleReorder(index, -1)}>
+          {'<'}
+        </button>
+      )}
+      <div
+        className={`edit nav-link${active ? ' active' : ''}`}
+        aria-current={active ? 'page' : null}
+        onClick={onClick}
+      >
         {editing ? (
           <div className='d-flex'>
             <input type='text' defaultValue={name} onBlur={saveName} ref={inputRef} />
@@ -78,13 +86,17 @@ const Tab = ({ name, handleClick, tabs, index, active }) => {
         ) : (
           <>
             {name}
-            <button className='remove' onClick={handleRemove}>
+            <button className='btn btn-danger border-0 ml-1' onClick={handleRemove}>
               X
             </button>
           </>
         )}
       </div>
-      {canMoveRight && editing && <button onClick={() => handleReorder(index, 1)}>{'>'}</button>}
+      {canMoveRight && editing && (
+        <button className='border-0' onClick={() => handleReorder(index, 1)}>
+          {'>'}
+        </button>
+      )}
     </li>
   )
 }
@@ -92,7 +104,10 @@ const Tab = ({ name, handleClick, tabs, index, active }) => {
 const MultiConfigTabs = () => {
   const { config } = useContext(DashboardContext)
   const dispatch = useContext(DashboardDispatchContext)
-  const tabs = useMemo<string[]>(() => (config.multiDashboards || []).map(({ label }) => label), [config.multiDashboards])
+  const tabs = useMemo<string[]>(
+    () => (config.multiDashboards || []).map(({ label }) => label),
+    [config.multiDashboards]
+  )
   const activeTab = useMemo<number>(() => config.activeDashboard, [config.activeDashboard])
 
   const saveAndLoad = (indexToSwitchTo: number) => {
@@ -104,7 +119,14 @@ const MultiConfigTabs = () => {
   return (
     <ul className='nav nav-tabs multi-config-tabs'>
       {tabs.map((tab, index) => (
-        <Tab key={tab + index} name={tab} tabs={tabs} index={index} handleClick={() => saveAndLoad(index)} active={index === activeTab} />
+        <Tab
+          key={tab + index}
+          name={tab}
+          tabs={tabs}
+          index={index}
+          handleClick={() => saveAndLoad(index)}
+          active={index === activeTab}
+        />
       ))}
       <li className='nav-item'>
         <button className='nav-link add' onClick={() => dispatch({ type: 'ADD_NEW_DASHBOARD' })}>

package/src/components/MultiConfigTabs/MultiTabs.tsx

@@ -2,6 +2,7 @@ import { useContext, useMemo } from 'react'
 import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
 
 import './multiconfigtabs.styles.css'
+import { updateQueryParam } from '@cdc/core/helpers/queryStringUtils'
 
 const MultiTabs = () => {
   const { config } = useContext(DashboardContext)
@@ -15,6 +16,7 @@ const MultiTabs = () => {
   const load = (indexToSwitchTo: number, e) => {
     e.preventDefault() // some form wrapper is causing this to act as a submit button
     dispatch({ type: 'SWITCH_CONFIG', payload: indexToSwitchTo })
+    updateQueryParam('cove-tab', indexToSwitchTo)
   }
 
   if (!config.multiDashboards) return null

package/src/components/MultiConfigTabs/multiconfigtabs.styles.css

@@ -13,11 +13,6 @@
     &:hover {
       :is(button) {
         display: inline-block;
-        color: var(--gray);
-        &:hover {
-          color: var(--black);
-          font-weight: bold;
-        }
       }
 
       background: var(--quaternary);
@@ -32,12 +27,10 @@
       color: white;
       font-weight: bold;
     }
-  }
-  .remove {
-    color: var(--gray);
-    &:hover {
-      color: var(--black);
-      font-weight: bold;
+    .btn-danger {
+      text-decoration: none;
+      padding: 0px 5px;
+      font-size: inherit;
     }
   }
   .add {

package/src/components/Row.tsx

@@ -122,39 +122,82 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
   }
 
   const layoutList = [
-    <li className={curr === '12' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([12])} key='12' title='1 Column'>
+    <li
+      className={curr === '12' ? `current row-menu__list--item` : `row-menu__list--item`}
+      onClick={() => setRowLayout([12])}
+      key='12'
+      title='1 Column'
+    >
       <OneColIcon />
     </li>,
-    <li className={curr === '66' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([6, 6])} key='66' title='2 Columns'>
+    <li
+      className={curr === '66' ? `current row-menu__list--item` : `row-menu__list--item`}
+      onClick={() => setRowLayout([6, 6])}
+      key='66'
+      title='2 Columns'
+    >
       <TwoColIcon />
     </li>,
-    <li className={curr === '444' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([4, 4, 4])} key='444' title='3 Columns'>
+    <li
+      className={curr === '444' ? `current row-menu__list--item` : `row-menu__list--item`}
+      onClick={() => setRowLayout([4, 4, 4])}
+      key='444'
+      title='3 Columns'
+    >
       <ThreeColIcon />
     </li>,
-    <li className={curr === '48' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([4, 8])} key='48' title='2 Columns'>
+    <li
+      className={curr === '48' ? `current row-menu__list--item` : `row-menu__list--item`}
+      onClick={() => setRowLayout([4, 8])}
+      key='48'
+      title='2 Columns'
+    >
       <FourEightColIcon />
     </li>,
-    <li className={curr === '84' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([8, 4])} key='84' title='2 Columns'>
+    <li
+      className={curr === '84' ? `current row-menu__list--item` : `row-menu__list--item`}
+      onClick={() => setRowLayout([8, 4])}
+      key='84'
+      title='2 Columns'
+    >
       <EightFourColIcon />
     </li>,
-    <li className={curr === 'toggle' ? `current row-menu__list--item` : `row-menu__list--item`} onClick={() => setRowLayout([12, 12, 12], true)} key='toggle' title='Toggle between up to three visualizations'>
+    <li
+      className={curr === 'toggle' ? `current row-menu__list--item` : `row-menu__list--item`}
+      onClick={() => setRowLayout([12, 12, 12], true)}
+      key='toggle'
+      title='Toggle between up to three visualizations'
+    >
       <ToggleIcon />
     </li>
   ]
 
   return (
     <nav className='row-menu'>
-      <div className='row-menu__btn'>
-        <ul className='row-menu__flyout'>{layoutList}</ul>
-      </div>
+      <ul className='row-menu__flyout'>{layoutList}</ul>
       <div className='spacer'></div>
-      <button className={rowIdx === 0 ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'} title='Move Row Up' onClick={() => moveRow('up')}>
+      <button
+        className={`btn btn-primary row-menu__btn border-0`}
+        title='Move Row Up'
+        onClick={() => moveRow('up')}
+        disabled={rowIdx === 0}
+      >
         <Icon display='caretUp' color='#fff' size={25} />
       </button>
-      <button className={rowIdx + 1 === rows.length ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'} title='Move Row Down' onClick={() => moveRow('down')}>
+      <button
+        className={'btn btn-primary row-menu__btn border-0'}
+        title='Move Row Down'
+        onClick={() => moveRow('down')}
+        disabled={rowIdx + 1 === rows.length}
+      >
         <Icon display='caretDown' color='#fff' size={25} />
       </button>
-      <button className={rowIdx === 0 && rows.length === 1 ? 'row-menu__btn row-menu__btn--remove row-menu__btn-disabled' : 'row-menu__btn row-menu__btn--remove'} title='Delete Row' onClick={deleteRow}>
+      <button
+        className={'btn btn-danger row-menu__btn row-menu__btn--remove border-0'}
+        title='Delete Row'
+        onClick={deleteRow}
+        disabled={rowIdx === 0 && rows.length === 1}
+      >
         <Icon display='close' color='#fff' size={25} />
       </button>
     </nav>
@@ -177,7 +220,10 @@ const Row: React.FC<RowProps> = ({ row, idx: rowIdx, uuid }) => {
         visualizationType: type,
         editing: true
       }
-      dispatch({ type: 'ADD_FOOTNOTE', payload: { id: uid, rowIndex: rowIdx, config: newVisualizationConfig as Visualization } })
+      dispatch({
+        type: 'ADD_FOOTNOTE',
+        payload: { id: uid, rowIndex: rowIdx, config: newVisualizationConfig as Visualization }
+      })
     } else {
       dispatch({ type: 'UPDATE_VISUALIZATION', payload: { vizKey: row.footnotesId, configureData: { editing: true } } })
     }

package/src/components/VisualizationRow.tsx

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

package/src/components/VisualizationsPanel/VisualizationsPanel.tsx

@@ -119,7 +119,6 @@ const VisualizationsPanel = () => {
         <Widget addVisualization={() => addVisualization('dashboardFilters', '')} type='dashboardFilters' />
         <Widget addVisualization={() => addVisualization('table', '')} type='table' />
       </div>
-      <span className='subheading-3'>Advanced</span>
       <AdvancedEditor
         loadConfig={loadConfig}
         config={config}

package/src/components/Widget.tsx

@@ -5,6 +5,7 @@ import { useGlobalContext } from '@cdc/core/components/GlobalContext'
 import { DashboardContext, DashboardDispatchContext } from '../DashboardContext'
 
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import Icon from '@cdc/core/components/ui/Icon'
 import { AnyVisualization } from '@cdc/core/types/Visualization'
 import { iconHash } from '../helpers/iconHash'
@@ -39,7 +40,7 @@ type WidgetProps = {
 
 const Widget = ({ widgetConfig, addVisualization, type }: WidgetProps) => {
   const { overlay } = useGlobalContext()
-  const { config } = useContext(DashboardContext)
+  const { config, data } = useContext(DashboardContext)
   const dispatch = useContext(DashboardDispatchContext)
 
   const transform = new DataTransform()
@@ -79,9 +80,30 @@ const Widget = ({ widgetConfig, addVisualization, type }: WidgetProps) => {
     })
   }
 
+  const changeDataLimit = (dataUrl, limit) => {
+    const url = new URL(dataUrl)
+    url.searchParams.set('$limit', limit)
+    // Replace encoded $ with actual $ for the URL
+    return url.href.replace(/%24/g, '$')
+  }
+
+  const loadSampleData = () => {
+    const dataKey = config.rows[widgetConfig.rowIdx]?.dataKey || widgetConfig?.dataKey
+    const dataset = config.datasets[dataKey]
+    const _data = data[dataset?.dataUrl]
+    if (_data && !_data.length) {
+      const url = changeDataLimit(dataset.dataUrl, 100)
+      fetchRemoteData(url).then(responseData => {
+        responseData.sample = true
+        dispatch({ type: 'SET_DATA', payload: { ...data, [dataKey]: responseData } })
+      })
+    }
+  }
+
   const editWidget = () => {
     if (!widgetConfig) return
     dispatch({ type: 'UPDATE_VISUALIZATION', payload: { vizKey: widgetConfig.uid, configureData: { editing: true } } })
+    loadSampleData()
   }
 
   let isConfigurationReady = false

package/src/data/initial-state.js

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

package/src/helpers/addValuesToDashboardFilters.ts

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

package/src/helpers/apiFilterHelpers.ts

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

package/src/helpers/changeFilterActive.ts

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

package/src/helpers/filterData.ts

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

package/src/helpers/getVizRowColumnLocator.ts

@@ -1,5 +1,6 @@
 import { ConfigRow } from '../types/ConfigRow'
 
+// returns a dictionary of widget names and their corresponding row and column index
 export const getVizRowColumnLocator = (rows: ConfigRow[]): Record<string, { row: number; column: number }> =>
   rows.reduce((acc, curr, index) => {
     curr.columns?.forEach((column, columnIndex) => {