@cdc/core 4.24.9-1 → 4.24.10

package/components/DataTable/helpers/tests/customSort.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest'
+import { customSort } from '../customSort'
+
+describe('customSort()', () => {
+  it('should return positive number when a > b', () => {
+    const a = 3
+    const b = 1
+    const sortBy = { column: 'someColumn', asc: true, colIndex: 0 }
+    const config = { type: 'map' }
+    expect(customSort(a, b, sortBy, config)).greaterThan(0)
+    expect(customSort(a, b, sortBy, { type: 'notMap' })).greaterThan(0)
+  })
+  it('should return negative number when a < b', () => {
+    const a = 1
+    const b = 3
+    const sortBy = { column: 'someColumn', asc: true, colIndex: 0 }
+    const config = { type: 'map' }
+    expect(customSort(a, b, sortBy, config)).lessThan(0)
+    expect(customSort(a, b, sortBy, { type: 'notMap' })).lessThan(0)
+  })
+  it('works for dates', () => {
+    const a = 2000
+    const b = 1999
+    const sortBy = { column: 'someColumn', asc: true, colIndex: 0 }
+    expect(
+      customSort(a, b, sortBy, { xAxis: { dataKey: sortBy.column, dateParseFormat: '%Y', type: 'date' } })
+    ).greaterThan(0)
+    expect(
+      customSort(b, a, sortBy, { xAxis: { dataKey: sortBy.column, dateParseFormat: '%Y', type: 'date' } })
+    ).lessThan(0)
+  })
+  it('works for strings', () => {
+    const a = 'banana'
+    const b = 'apple'
+    const sortBy = { column: 'someColumn', asc: true, colIndex: 0 }
+    const config = { type: 'map' }
+    expect(customSort(a, b, sortBy, config)).greaterThan(0)
+    expect(customSort(a, b, sortBy, { type: 'notMap' })).greaterThan(0)
+    expect(customSort(b, a, sortBy, config)).lessThan(0)
+    expect(customSort(b, a, sortBy, { type: 'notMap' })).lessThan(0)
+  })
+  it('works for strings after number', () => {
+    const a = 'banana'
+    const b = '1'
+    const sortBy = { column: 'someColumn', asc: true, colIndex: 0 }
+    const config = { type: 'map' }
+    expect(customSort(a, b, sortBy, config)).greaterThan(0)
+    expect(customSort(a, b, sortBy, { type: 'notMap' })).greaterThan(0)
+    expect(customSort(b, a, sortBy, config)).lessThan(0)
+    expect(customSort(b, a, sortBy, { type: 'notMap' })).lessThan(0)
+  })
+})

package/components/DataTable/helpers/tests/getNewSortBy.test.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest'
+import { getNewSortBy } from '../getNewSortBy'
+
+describe('getNewSortBy()', () => {
+  it('should return ascending when currently undefined', () => {
+    const sortBy = { column: undefined, asc: undefined, colIndex: 0 }
+    const column = 'someColumn'
+    const index = 1
+    const result = getNewSortBy(sortBy, column, index)
+    expect(result).toEqual({ column, asc: true, colIndex: index })
+  })
+  it('should return ascending false when currently true', () => {
+    const sortBy = { column: 'someColumn', asc: true, colIndex: 0 }
+    const column = 'someColumn'
+    const index = 1
+    const result = getNewSortBy(sortBy, column, index)
+    expect(result).toEqual({ column, asc: false, colIndex: index })
+  })
+  it('should return ascending undefined when currently false', () => {
+    const sortBy = { column: 'someColumn', asc: false, colIndex: 0 }
+    const column = 'someColumn'
+    const index = 1
+    const result = getNewSortBy(sortBy, column, index)
+    expect(result).toEqual({ column: undefined, asc: undefined, colIndex: index })
+  })
+})

package/components/EditorPanel/DataTableEditor.tsx

@@ -41,6 +41,7 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
 
   const excludeColumns = (section, subSection, fieldName, excludedColNames: string[]) => {
     const newColumns = _.cloneDeep(config.columns)
+
     const colNames: string[] = []
     for (let colKey in newColumns) {
       const col = newColumns[colKey]
@@ -48,6 +49,8 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
       if (excludedColNames.includes(col.name)) {
         // ensure all excluded columns are set to false
         newColumns[colKey].dataTable = false
+      } else {
+        newColumns[colKey].dataTable = true
       }
     }
     excludedColNames.forEach(colName => {
@@ -91,10 +94,16 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           tooltip={
             <Tooltip style={{ textTransform: 'none' }}>
               <Tooltip.Target>
-                <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                <Icon
+                  display='question'
+                  style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                />
               </Tooltip.Target>
               <Tooltip.Content>
-                <p>Hiding the data table may affect accessibility. An alternate form of accessing visualization data is a 508 requirement.</p>
+                <p>
+                  Hiding the data table may affect accessibility. An alternate form of accessing visualization data is a
+                  508 requirement.
+                </p>
               </Tooltip.Content>
             </Tooltip>
           }
@@ -112,7 +121,10 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           tooltip={
             <Tooltip style={{ textTransform: 'none' }}>
               <Tooltip.Target>
-                <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                <Icon
+                  display='question'
+                  style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                />
               </Tooltip.Target>
               <Tooltip.Content>
                 <p>This will draw the data table with vertical data instead of horizontal.</p>
@@ -135,7 +147,10 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
                 <Icon display='question' style={{ marginLeft: '0.5rem' }} />
               </Tooltip.Target>
               <Tooltip.Content>
-                <p>To comply with 508 standards, if the first column in the data table has no header, enter a brief one here.</p>
+                <p>
+                  To comply with 508 standards, if the first column in the data table has no header, enter a brief one
+                  here.
+                </p>
               </Tooltip.Content>
             </Tooltip>
           }
@@ -160,17 +175,96 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           </Tooltip>
         }
       />
-      <CheckBox value={config.table.limitHeight} section='table' fieldName='limitHeight' label=' Limit Table Height' updateField={updateField} />
-      {config.table.limitHeight && <TextField value={config.table.height} section='table' fieldName='height' label='Data Table Height' type='number' min={0} max={500} placeholder='Height(px)' updateField={updateField} />}
-      {config?.visualizationType !== 'Sankey' && <MultiSelect key={excludedColumns.join('') + 'excluded'} options={dataColumns.map(c => ({ label: c, value: c }))} selected={excludedColumns} fieldName='dataTable' label='Exclude Columns' section='columns' updateField={excludeColumns} />}
-      <CheckBox value={config.table.collapsible} fieldName='collapsible' label=' Collapsible' section='table' updateField={updateField} />
-      {config.table.collapsible !== false && <CheckBox value={config.table.expanded} fieldName='expanded' label=' Expanded by Default' section='table' updateField={updateField} />}
-      {isDashboard && config.type !== 'table' && <CheckBox value={config.table.showDataTableLink} fieldName='showDataTableLink' label='Show Data Table Name & Link' section='table' updateField={updateField} />}
-      {isLoadedFromUrl && <CheckBox value={config.table.showDownloadUrl} fieldName='showDownloadUrl' label='Show URL to Automatically Updated Data' section='table' updateField={updateField} />}
-      {config.type !== 'table' && <CheckBox value={config.table.showDownloadImgButton} fieldName='showDownloadImgButton' label='Display Image Button' section='table' updateField={updateField} />}
+      <CheckBox
+        value={config.table.limitHeight}
+        section='table'
+        fieldName='limitHeight'
+        label=' Limit Table Height'
+        updateField={updateField}
+      />
+      {config.table.limitHeight && (
+        <TextField
+          value={config.table.height}
+          section='table'
+          fieldName='height'
+          label='Data Table Height'
+          type='number'
+          min={0}
+          max={500}
+          placeholder='Height(px)'
+          updateField={updateField}
+        />
+      )}
+      {config?.visualizationType !== 'Sankey' && (
+        <MultiSelect
+          key={excludedColumns.join('') + 'excluded'}
+          options={dataColumns.map(c => ({ label: c, value: c }))}
+          selected={excludedColumns}
+          fieldName='dataTable'
+          label='Exclude Columns'
+          section='columns'
+          updateField={excludeColumns}
+        />
+      )}
+      <CheckBox
+        value={config.table.collapsible}
+        fieldName='collapsible'
+        label=' Collapsible'
+        section='table'
+        updateField={updateField}
+      />
+      {config.table.collapsible !== false && (
+        <CheckBox
+          value={config.table.expanded}
+          fieldName='expanded'
+          label=' Expanded by Default'
+          section='table'
+          updateField={updateField}
+        />
+      )}
+      {isDashboard && config.type !== 'table' && (
+        <CheckBox
+          value={config.table.showDataTableLink}
+          fieldName='showDataTableLink'
+          label='Show Data Table Name & Link'
+          section='table'
+          updateField={updateField}
+        />
+      )}
+      {isLoadedFromUrl && (
+        <CheckBox
+          value={config.table.showDownloadUrl}
+          fieldName='showDownloadUrl'
+          label='Show URL to Automatically Updated Data'
+          section='table'
+          updateField={updateField}
+        />
+      )}
+      {config.type !== 'table' && (
+        <CheckBox
+          value={config.table.showDownloadImgButton}
+          fieldName='showDownloadImgButton'
+          label='Display Image Button'
+          section='table'
+          updateField={updateField}
+        />
+      )}
+      {config.type !== 'table' && (
+        <CheckBox
+          value={config.table.showDownloadLinkBelow}
+          fieldName='showDownloadLinkBelow'
+          label='Show Download Link Below Table'
+          section='table'
+          updateField={updateField}
+        />
+      )}
       <label>
         <span className='edit-label column-heading'>Table Cell Min Width</span>
-        <input type='number' value={config.table.cellMinWidth ? config.table.cellMinWidth : 0} onChange={e => updateField('table', null, 'cellMinWidth', e.target.value)} />
+        <input
+          type='number'
+          value={config.table.cellMinWidth ? config.table.cellMinWidth : 0}
+          onChange={e => updateField('table', null, 'cellMinWidth', e.target.value)}
+        />
       </label>
       {config?.visualizationType !== 'Sankey' && (
         <label>
@@ -181,7 +275,10 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
                 <Icon display='question' style={{ marginLeft: '0.5rem' }} />
               </Tooltip.Target>
               <Tooltip.Content>
-                <p>Choose a column to use for grouping data rows. The selected column will not be shown in the data table. You will only be able to choose a column which does not have a column configuration.</p>
+                <p>
+                  Choose a column to use for grouping data rows. The selected column will not be shown in the data
+                  table. You will only be able to choose a column which does not have a column configuration.
+                </p>
               </Tooltip.Content>
             </Tooltip>
           </span>
@@ -192,7 +289,12 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
               changeGroupBy(event.target.value)
             }}
           >
-            {[PLACEHOLDER, ...groupPivotColumns.filter(col => col !== config.table.pivot?.columnName && col !== config.table.pivot?.valueColumn)].map(option => (
+            {[
+              PLACEHOLDER,
+              ...groupPivotColumns.filter(
+                col => col !== config.table.pivot?.columnName && col !== config.table.pivot?.valueColumn
+              )
+            ].map(option => (
               <option key={option}>{option}</option>
             ))}
           </select>
@@ -211,7 +313,9 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           </Tooltip>
         }
         value={config.table.pivot?.columnName}
-        options={groupPivotColumns.filter(col => col !== config.table.groupBy && col !== config.table.pivot?.valueColumn)}
+        options={groupPivotColumns.filter(
+          col => col !== config.table.groupBy && col !== config.table.pivot?.valueColumn
+        )}
         initial='-Select-'
         section='table'
         subsection='pivot'
@@ -219,25 +323,27 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
         updateField={updateField}
       />
       {config.table.pivot?.columnName && (
-        <Select
-          label='Pivot Value Column: '
+        <MultiSelect
+          key={config.table.pivot?.columnName}
+          options={groupPivotColumns
+            .filter(col => col !== config.table.pivot?.columnName && col !== config.table.groupBy)
+            .map(c => ({ label: c, value: c }))}
+          selected={config.table.pivot?.valueColumns}
+          label='Pivot Value Column(s) '
+          section='table'
+          subsection='pivot'
+          fieldName='valueColumns'
+          updateField={updateField}
           tooltip={
             <Tooltip style={{ textTransform: 'none' }}>
               <Tooltip.Target>
                 <Icon display='question' style={{ marginLeft: '0.5rem' }} />
               </Tooltip.Target>
               <Tooltip.Content>
-                <p>The column whos values will be pivoted under the column selected as the Filter.</p>
+                <p>The column(s) whos values will be pivoted under the column selected as the Filter.</p>
               </Tooltip.Content>
             </Tooltip>
           }
-          value={config.table.pivot?.valueColumn}
-          initial='-Select-'
-          section='table'
-          options={groupPivotColumns.filter(col => col !== config.table.pivot?.columnName && col !== config.table.groupBy)}
-          subsection='pivot'
-          fieldName='valueColumn'
-          updateField={updateField}
         />
       )}
     </>

package/components/EditorPanel/Inputs.tsx

@@ -17,6 +17,7 @@ export type TextFieldProps = {
   value: string | number
   type?: 'text' | 'number' | 'textarea' | 'date'
   min?: number
+  maxLength?: number
   max?: number
   i?: number
   id?: string
@@ -27,7 +28,8 @@ export type CheckboxProps = {
   min?: number
   i?: number
   className?: string
-} & Input
+} & Input &
+  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value'>
 
 export type SelectProps = {
   value?: string
@@ -40,7 +42,20 @@ export type SelectProps = {
 } & Input
 
 const TextField = memo((props: TextFieldProps) => {
-  const { display = true, label, tooltip, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'text', i = null, min = null, ...attributes } = props
+  const {
+    display = true,
+    label,
+    tooltip,
+    section = null,
+    subsection = null,
+    fieldName,
+    updateField,
+    value: stateValue,
+    type = 'text',
+    i = null,
+    min = null,
+    ...attributes
+  } = props
   const [value, setValue] = useState(stateValue)
   const [debouncedValue] = useDebounce(value, 500)
 
@@ -93,7 +108,17 @@ const TextField = memo((props: TextFieldProps) => {
 })
 
 const CheckBox = memo((props: CheckboxProps) => {
-  const { display = true, label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes } = props
+  const {
+    display = true,
+    label,
+    value,
+    fieldName,
+    section = null,
+    subsection = null,
+    tooltip,
+    updateField,
+    ...attributes
+  } = props
   if (!display) {
     return <></>
   }
@@ -117,7 +142,20 @@ const CheckBox = memo((props: CheckboxProps) => {
 })
 
 const Select = memo((props: SelectProps) => {
-  const { display = true, label, value, options, fieldName, section = null, subsection = null, required = false, tooltip, updateField, initial: initialValue, ...attributes } = props
+  const {
+    display = true,
+    label,
+    value,
+    options,
+    fieldName,
+    section = null,
+    subsection = null,
+    required = false,
+    tooltip,
+    updateField,
+    initial: initialValue,
+    ...attributes
+  } = props
   let optionsJsx = options.map((optionName, index) => (
     <option value={optionName} key={index}>
       {optionName}

package/components/EditorPanel/VizFilterEditor/NestedDropdownEditor.tsx

@@ -3,6 +3,7 @@ import { SubGrouping, VizFilter, OrderBy } from '../../../types/VizFilter'
 import { filterOrderOptions, handleSorting } from '../../Filters'
 import FilterOrder from './components/FilterOrder'
 import { Visualization } from '../../../types/Visualization'
+import { useMemo } from 'react'
 
 type NestedDropdownEditorProps = {
   config: Visualization
@@ -121,6 +122,25 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
 
   const columnNameOptions = dataColumns.filter(columnName => !listOfUsedColumnNames.includes(columnName))
 
+  const useParameters = useMemo(() => {
+    const filter = config.filters[filterIndex]
+    return !!(filter.setByQueryParameter && filter.subGrouping?.setByQueryParameter)
+  }, [config, filterIndex])
+
+  const handleParametersCheckboxClick = e => {
+    const updatedFilters = config.filters
+    const { checked } = e.target
+    const groupColumnName = checked ? filter.columnName : ''
+    const subGroupColumnName = checked ? subGrouping.columnName : ''
+    updatedFilters[filterIndex] = {
+      ...config.filters[filterIndex],
+      setByQueryParameter: groupColumnName,
+      subGrouping: { ...subGrouping, setByQueryParameter: subGroupColumnName }
+    }
+
+    updateField(null, null, 'filters', updatedFilters)
+  }
+
   return (
     <div className='nesteddropdown-editor'>
       <label>
@@ -175,15 +195,13 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
       <label>
         <input
           type='checkbox'
-          checked={!!filter.setByQueryParameter}
+          checked={useParameters}
           aria-label='Create query parameters'
-          onChange={e => {
-            updateGroupingFilterProp('setByQueryParameter', filter.columnName)
-            updateSubGroupingFilterProperty({ ...subGrouping, setByQueryParameter: subGrouping.columnName })
-          }}
+          disabled={!filter.columnName || !subGrouping?.columnName}
+          onChange={e => handleParametersCheckboxClick(e)}
         />
         <span> Create query parameters</span>
-        {!!filter.setByQueryParameter && (
+        {useParameters && (
           <>
             <span className='edit-label column-heading mt-2'>
               Grouping: Default Value Set By Query String Parameter
@@ -200,7 +218,7 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
             </span>
             <input
               type='text'
-              value={subGrouping.setByQueryParameter}
+              value={subGrouping?.setByQueryParameter}
               onChange={e => {
                 const setByQueryParameter = e.target.value
                 updateSubGroupingFilterProperty({ ...subGrouping, setByQueryParameter })

package/components/EditorPanel/VizFilterEditor/VizFilterEditor.tsx

@@ -144,7 +144,7 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                     <span className='edit-label column-heading'>Filter Style</span>
 
                     <select
-                      value={filter.filterStyle}
+                      value={filter.filterStyle || 'dropdown'}
                       onChange={e => {
                         updateFilterStyle(filterIndex, e.target.value)
                       }}

package/components/{Filters.tsx → Filters/Filters.tsx}

@@ -2,18 +2,32 @@ import { useState, useEffect, useMemo } from 'react'
 import { useId } from 'react'
 
 // CDC
-import Button from './elements/Button'
-import { getQueryParams, updateQueryString } from '../helpers/queryStringUtils'
-import MultiSelect from './MultiSelect'
-import { Visualization } from '../types/Visualization'
-import { MultiSelectFilter, OrderBy, VizFilter } from '../types/VizFilter'
-import { filterVizData } from '../helpers/filterVizData'
-import { addValuesToFilters } from '../helpers/addValuesToFilters'
-import { DimensionsType } from '../types/Dimensions'
-import NestedDropdown from './NestedDropdown'
+import Button from '../elements/Button'
+import { getQueryParams, updateQueryString } from '../../helpers/queryStringUtils'
+import MultiSelect from '../MultiSelect'
+import { Visualization } from '../../types/Visualization'
+import { MultiSelectFilter, OrderBy, VizFilter } from '../../types/VizFilter'
+import { filterVizData } from '../../helpers/filterVizData'
+import { addValuesToFilters } from '../../helpers/addValuesToFilters'
+import { DimensionsType } from '../../types/Dimensions'
+import NestedDropdown from '../NestedDropdown'
 import _ from 'lodash'
+import { getNestedOptions } from './helpers/getNestedOptions'
+import { applyQueuedActive } from './helpers/applyQueuedActive'
+import { handleSorting } from './helpers/handleSorting'
 
-export const filterStyleOptions = ['dropdown', 'nested-dropdown', 'pill', 'tab', 'tab bar', 'multi-select']
+export const VIZ_FILTER_STYLE = {
+  dropdown: 'dropdown',
+  nestedDropdown: 'nested-dropdown',
+  pill: 'pill',
+  tab: 'tab',
+  tabBar: 'tab bar',
+  multiSelect: 'multi-select'
+} as const
+
+export type VizFilterStyle = (typeof VIZ_FILTER_STYLE)[keyof typeof VIZ_FILTER_STYLE]
+
+export const filterStyleOptions = Object.values(VIZ_FILTER_STYLE)
 
 export const filterOrderOptions: { label: string; value: OrderBy }[] = [
   {
@@ -30,23 +44,6 @@ export const filterOrderOptions: { label: string; value: OrderBy }[] = [
   }
 ]
 
-export const handleSorting = singleFilter => {
-  const singleFilterValues = _.cloneDeep(singleFilter.values)
-  if (singleFilter.order === 'cust' && singleFilter.filterStyle !== 'nested-dropdown') {
-    singleFilter.values = singleFilter.orderedValues?.length ? singleFilter.orderedValues : singleFilterValues
-    return singleFilter
-  }
-
-  const sort = (a, b) => {
-    const asc = singleFilter.order !== 'desc'
-    return (asc ? a : b).toString().localeCompare((asc ? b : a).toString(), 'en', { numeric: true })
-  }
-
-  singleFilter.values = singleFilterValues.sort(sort)
-
-  return singleFilter
-}
-
 const hasStandardFilterBehavior = ['chart', 'table']
 
 export const useFilters = props => {
@@ -116,6 +113,14 @@ export const useFilters = props => {
         queryParams[newFilter.setByQueryParameter] = newFilter.active
         updateQueryString(queryParams)
       }
+      if (
+        newFilter?.subGrouping?.setByQueryParameter &&
+        queryParams[newFilter?.subGrouping?.setByQueryParameter] !== newFilter?.subGrouping.active
+      ) {
+        queryParams[newFilter?.subGrouping?.setByQueryParameter] = newFilter.subGrouping.active
+        updateQueryString(queryParams)
+      }
+      setFilteredData(newFilters[index])
     }
 
     if (!visualizationConfig.dynamicSeries) {
@@ -186,8 +191,7 @@ export const useFilters = props => {
     const queryParams = getQueryParams()
     newFilters.forEach(newFilter => {
       if (newFilter.queuedActive) {
-        newFilter.active = newFilter.queuedActive
-        delete newFilter.queuedActive
+        applyQueuedActive(newFilter)
         if (newFilter.setByQueryParameter && queryParams[newFilter.setByQueryParameter] !== newFilter.active) {
           queryParams[newFilter.setByQueryParameter] = newFilter.active
           needsQueryUpdate = true
@@ -379,7 +383,6 @@ const Filters = (props: FilterProps) => {
       const { active, queuedActive, label, filterStyle } = singleFilter as VizFilter
 
       handleSorting(singleFilter)
-
       singleFilter.values?.forEach((filterOption, index) => {
         const pillClassList = ['pill', active === filterOption ? 'pill--active' : null, theme && theme]
         const tabClassList = ['tab', active === filterOption && 'tab--active', theme && theme]
@@ -458,7 +461,9 @@ const Filters = (props: FilterProps) => {
             )}
             {filterStyle === 'nested-dropdown' && (
               <NestedDropdown
-                currentFilter={singleFilter}
+                activeGroup={(singleFilter.active as string) || (singleFilter.queuedActive || [])[0]}
+                activeSubGroup={(singleFilter.subGrouping?.active as string) || (singleFilter.queuedActive || [])[1]}
+                options={getNestedOptions(singleFilter)}
                 listLabel={label}
                 handleSelectedItems={value => changeFilterActive(outerIndex, value)}
               />
@@ -479,16 +484,20 @@ const Filters = (props: FilterProps) => {
   }
 
   if (visualizationConfig?.filters?.length === 0) return
-  const filterSectionClassList = [
-    `filters-section legend_${visualizationConfig?.legend?.hide ? 'hidden' : 'visible'}_${
-      visualizationConfig?.legend?.position || ''
-    }`,
-    type === 'map' ? general.headerColor : visualizationConfig?.visualizationType === 'Spark Line' ? null : theme
-  ]
+
+  const getClasses = () => {
+    const { visualizationType, legend } = visualizationConfig || {}
+    const baseClass = 'filters-section'
+    const conditionalClass = type === 'map' ? general.headerColor : visualizationType === 'Spark Line' ? null : theme
+    const legendClass = legend && !legend.hide && legend.position === 'top' ? 'mb-0' : null
+
+    return [baseClass, conditionalClass, legendClass].filter(Boolean)
+  }
+
   return (
-    <section className={filterSectionClassList.join(' ')}>
+    <section className={getClasses().join(' ')}>
       <p className='filters-section__intro-text'>
-        {filters?.some(f => f.active && f.showDropdown) ? filterConstants.introText : ''}{' '}
+        {filters?.some(filter => filter.active && filter.columnName) ? filterConstants.introText : ''}{' '}
         {visualizationConfig.filterBehavior === 'Apply Button' && filterConstants.applyText}
       </p>
       <div className='filters-section__wrapper'>

package/components/Filters/helpers/applyQueuedActive.ts

@@ -0,0 +1,12 @@
+import { VIZ_FILTER_STYLE } from '../Filters'
+import { SharedFilter } from '@cdc/dashboard/src/types/SharedFilter'
+
+export const applyQueuedActive = (sharedFilter: SharedFilter) => {
+  if (sharedFilter.filterStyle === VIZ_FILTER_STYLE.nestedDropdown) {
+    sharedFilter.active = sharedFilter.queuedActive[0]
+    sharedFilter.subGrouping.active = sharedFilter.queuedActive[1]
+  } else {
+    sharedFilter.active = sharedFilter.queuedActive
+  }
+  delete sharedFilter.queuedActive
+}

package/components/Filters/helpers/getNestedOptions.ts

@@ -0,0 +1,29 @@
+import { SubGrouping } from '../../../types/VizFilter'
+import { NestedOptions, ValueTextPair } from '../../NestedDropdown/nestedDropdownHelpers'
+
+type GetOptionsMemoParams = {
+  orderedValues?: string[]
+  values: string[]
+  subGrouping: SubGrouping
+}
+
+export const getNestedOptions = ({ orderedValues, values, subGrouping }: GetOptionsMemoParams): NestedOptions => {
+  // keep custom ordered value order
+  const filteredValues = orderedValues?.length
+    ? orderedValues.filter(orderedValue => values.includes(orderedValue))
+    : values
+  const v: NestedOptions = filteredValues.map<[ValueTextPair, ValueTextPair[]]>(value => {
+    if (!subGrouping) return [[value], []]
+    const { orderedValues, values: filteredSubValues } = subGrouping.valuesLookup[value]
+    // keep custom subFilter order
+    const subFilterValues =
+      orderedValues?.filter(orderedValue => filteredSubValues.includes(orderedValue)) || filteredSubValues
+    const structuredNestedDropdownData: [ValueTextPair, ValueTextPair[]] = [
+      [value],
+      subFilterValues.map(subValue => [subValue])
+    ]
+    return structuredNestedDropdownData
+  })
+
+  return v
+}