@cdc/core 4.24.9 → 4.24.11

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,20 +28,24 @@ export type CheckboxProps = {
   min?: number
   i?: number
   className?: string
-} & Input
-
-export type SelectProps = {
-  value?: string
-  options?: string[]
-  required?: boolean
-  initial?: string
-
-  // all other props
-  [x: string]: any
-} & Input
+} & Input &
+  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value'>
 
 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 +98,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 <></>
   }
@@ -116,13 +131,46 @@ const CheckBox = memo((props: CheckboxProps) => {
   )
 })
 
+export type SelectProps = {
+  value?: string
+  options?: string[] | { label: string; value: string }[]
+  required?: boolean
+  initial?: string
+
+  // all other props
+  [x: string]: any
+} & Input
+
 const Select = memo((props: SelectProps) => {
-  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}
-    </option>
-  ))
+  const {
+    display = true,
+    label,
+    value,
+    options,
+    fieldName,
+    section = null,
+    subsection = null,
+    required = false,
+    tooltip,
+    updateField,
+    initial: initialValue,
+    ...attributes
+  } = props
+  const optionsJsx = options.map((option, index) => {
+    if (typeof option === 'string') {
+      return (
+        <option value={option} key={index}>
+          {option}
+        </option>
+      )
+    } else {
+      return (
+        <option value={option.value} key={index}>
+          {option.label}
+        </option>
+      )
+    }
+  })
 
   if (initialValue) {
     optionsJsx.unshift(
@@ -142,7 +190,7 @@ const Select = memo((props: SelectProps) => {
         {tooltip}
       </span>
       <select
-        className={required && !value ? 'warning' : ''}
+        className={`cove-form-select ${required && !value ? 'warning' : ''}`}
         name={fieldName}
         value={value}
         onChange={event => {

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

@@ -140,43 +140,24 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                   controls={openControls}
                   deleteField={() => removeFilter(filterIndex)}
                 >
-                  <label>
-                    <span className='edit-label column-heading'>Filter Style</span>
-
-                    <select
-                      value={filter.filterStyle}
-                      onChange={e => {
-                        updateFilterStyle(filterIndex, e.target.value)
-                      }}
-                    >
-                      {filterStyleOptions.map((item, index) => {
-                        return (
-                          <option key={`filter-style-${index}`} value={item}>
-                            {item}
-                          </option>
-                        )
-                      })}
-                    </select>
-                  </label>
+                  <Select
+                    value={filter.filterStyle}
+                    fieldName='filterStyle'
+                    label='Filter Style'
+                    updateField={(_section, _subsection, _field, value) => updateFilterStyle(filterIndex, value)}
+                    options={filterStyleOptions}
+                  />
 
                   {filter.filterStyle !== 'nested-dropdown' ? (
                     <>
-                      <label>
-                        <span className='edit-label column-heading'>Filter</span>
-                        <select
-                          value={filter.columnName}
-                          onChange={e => {
-                            handleNameChange(filterIndex, e.target.value)
-                          }}
-                        >
-                          <option value=''>- Select Option -</option>
-                          {dataColumns.map((dataKey, filterIndex) => (
-                            <option value={dataKey} key={filterIndex}>
-                              {dataKey}
-                            </option>
-                          ))}
-                        </select>
-                      </label>
+                      <Select
+                        value={filter.columnName}
+                        fieldName='columnName'
+                        label='Filter'
+                        updateField={(_section, _subsection, _field, value) => handleNameChange(filterIndex, value)}
+                        options={dataColumns}
+                        initial='- Select Option -'
+                      />
 
                       <label>
                         <span className='edit-showDropdown column-heading'>Show Filter Input</span>
@@ -233,27 +214,21 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                         />
                       </label>
 
-                      <label>
-                        <span className='edit-filterOrder column-heading'>Filter Order</span>
-                        <select
-                          value={filter.order ? filter.order : 'asc'}
-                          onChange={e => updateFilterProp('order', filterIndex, e.target.value)}
-                        >
-                          {filterOrderOptions.map((option, index) => {
-                            return (
-                              <option value={option.value} key={`filter-${index}`}>
-                                {option.label}
-                              </option>
-                            )
-                          })}
-                        </select>
-                        {filter.order === 'cust' && (
-                          <FilterOrder
-                            orderedValues={filter.orderedValues || filter.values}
-                            handleFilterOrder={(index1, index2) => handleFilterOrder(index1, index2, filterIndex)}
-                          />
-                        )}
-                      </label>
+                      <Select
+                        value={filter.order || 'asc'}
+                        fieldName='order'
+                        label='Filter Order'
+                        updateField={(_section, _subSection, _field, value) =>
+                          updateFilterProp('order', filterIndex, value)
+                        }
+                        options={filterOrderOptions}
+                      />
+                      {filter.order === 'cust' && (
+                        <FilterOrder
+                          orderedValues={filter.orderedValues || filter.values}
+                          handleFilterOrder={(index1, index2) => handleFilterOrder(index1, index2, filterIndex)}
+                        />
+                      )}
                     </>
                   ) : (
                     <NestedDropdownEditor

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
@@ -347,7 +351,7 @@ const Filters = (props: FilterProps) => {
         id={`filter-${outerIndex}`}
         name={label}
         aria-label={`Filter by ${label}`}
-        className='filter-select'
+        className='cove-form-select'
         data-index='0'
         value={active}
         onChange={e => {
@@ -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]
@@ -436,6 +439,7 @@ const Filters = (props: FilterProps) => {
 
       const classList = [
         'single-filters',
+        'form-group mr-3',
         mobileFilterStyle ? 'single-filters--dropdown' : `single-filters--${filterStyle}`
       ]
       const mobileExempt = ['nested-dropdown', 'multi-select'].includes(filterStyle)
@@ -443,7 +447,11 @@ const Filters = (props: FilterProps) => {
       return (
         <div className={classList.join(' ')} key={outerIndex}>
           <>
-            {label && <label htmlFor={`filter-${outerIndex}`}>{label}</label>}
+            {label && (
+              <label className='text-capitalize font-weight-bold mt-1 mb-0' htmlFor={`filter-${outerIndex}`}>
+                {label}
+              </label>
+            )}
             {filterStyle === 'tab' && !mobileFilterStyle && Tabs}
             {filterStyle === 'pill' && !mobileFilterStyle && Pills}
             {filterStyle === 'tab bar' && !mobileFilterStyle && <TabBar filter={singleFilter} index={outerIndex} />}
@@ -458,7 +466,10 @@ 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]}
+                filterIndex={outerIndex}
+                options={getNestedOptions(singleFilter)}
                 listLabel={label}
                 handleSelectedItems={value => changeFilterActive(outerIndex, value)}
               />
@@ -479,26 +490,32 @@ 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'>
+      <div className='d-flex flex-wrap w-100 filters-section__wrapper'>
         {' '}
         <>
           <Style />
           {filterBehavior === 'Apply Button' ? (
             <div className='filters-section__buttons'>
               <Button
-                onClick={() => handleApplyButton(filters)}
+                onClick={e => {
+                  handleApplyButton(filters)
+                }}
                 disabled={!showApplyButton}
                 className={[general?.headerColor ? general.headerColor : theme, 'apply'].join(' ')}
               >

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
+}

package/components/Filters/helpers/handleSorting.ts

@@ -0,0 +1,18 @@
+import _ from 'lodash'
+
+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 String(asc ? a : b).localeCompare(String(asc ? b : a), 'en', { numeric: true })
+  }
+
+  singleFilter.values = singleFilterValues.sort(sort)
+
+  return singleFilter
+}

package/components/Filters/helpers/tests/applyQueuedActive.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest'
+import { applyQueuedActive } from '../applyQueuedActive'
+import { VIZ_FILTER_STYLE } from '../../Filters'
+import { SharedFilter } from '@cdc/dashboard/src/types/SharedFilter'
+
+describe('applyQueuedActive', () => {
+  it('should apply queuedActive to active and subGrouping.active for nestedDropdown filter style', () => {
+    const sharedFilter: SharedFilter = {
+      filterStyle: VIZ_FILTER_STYLE.nestedDropdown,
+      queuedActive: ['activeValue', 'subActiveValue'],
+      active: null,
+      subGrouping: {
+        active: null
+      }
+    }
+
+    applyQueuedActive(sharedFilter)
+
+    expect(sharedFilter.active).toBe('activeValue')
+    expect(sharedFilter.subGrouping.active).toBe('subActiveValue')
+    expect(sharedFilter.queuedActive).toBeUndefined()
+  })
+
+  it('should apply queuedActive to active for non-nestedDropdown filter style', () => {
+    const sharedFilter: SharedFilter = {
+      filterStyle: 'someOtherStyle',
+      queuedActive: 'activeValue',
+      active: null
+    }
+
+    applyQueuedActive(sharedFilter)
+
+    expect(sharedFilter.active).toBe('activeValue')
+    expect(sharedFilter.queuedActive).toBeUndefined()
+  })
+
+  it('should handle empty queuedActive for non-nestedDropdown filter style', () => {
+    const sharedFilter: SharedFilter = {
+      filterStyle: 'someOtherStyle',
+      queuedActive: null,
+      active: null
+    }
+
+    applyQueuedActive(sharedFilter)
+
+    expect(sharedFilter.active).toBeNull()
+    expect(sharedFilter.queuedActive).toBeUndefined()
+  })
+})