@cdc/dashboard 4.25.10 → 4.25.11

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

@@ -184,33 +184,25 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
   return (
     <>
       {dataFiltersLoading && <Loading />}
-      <label>
-        <span className='edit-label column-heading'>Filter Type: </span>
-        <select
-          defaultValue={filter.type || ''}
-          onChange={e => selectFilterType(e.target.value)}
-          disabled={!!filter.type}
-        >
-          <option value=''>- Select Option -</option>
-          <option value='urlfilter'>URL</option>
-          <option value='datafilter'>Data</option>
-        </select>
-      </label>
+      <Select
+        label='Filter Type'
+        value={filter.type || ''}
+        options={[
+          { value: '', label: '- Select Option -' },
+          { value: 'urlfilter', label: 'URL' },
+          { value: 'datafilter', label: 'Data' }
+        ]}
+        onChange={e => selectFilterType(e.target.value)}
+        disabled={!!filter.type}
+      />
       {filter.type !== undefined && (
         <>
-          <label>
-            <span className='edit-label column-heading'>Filter Style: </span>
-            <select
-              value={filter.filterStyle || FILTER_STYLE.dropdown}
-              onChange={e => updateFilterProp('filterStyle', e.target.value)}
-            >
-              {filterStyles.map(dataKey => (
-                <option value={dataKey} key={`filter-style-select-item-${dataKey}`}>
-                  {dataKey}
-                </option>
-              ))}
-            </select>
-          </label>
+          <Select
+            label='Filter Style'
+            value={filter.filterStyle || FILTER_STYLE.dropdown}
+            options={filterStyles}
+            onChange={e => updateFilterProp('filterStyle', e.target.value)}
+          />
           {filter.filterStyle === FILTER_STYLE.dropdown && (
             <label>
               <span className='me-1'>Show Dropdown</span>
@@ -254,41 +246,31 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
             <>
               {!hasDashboardApplyBehavior(config.visualizations) && (
                 <>
-                  <label>
-                    <span className='edit-label column-heading'>URL to Filter: </span>
-                    <select
-                      defaultValue={filter.datasetKey || ''}
-                      onChange={e => updateFilterProp('datasetKey', e.target.value)}
-                    >
-                      <option value=''>- Select Option -</option>
-                      {Object.keys(config.datasets).map(datasetKey => {
-                        if (config.datasets[datasetKey].dataUrl) {
-                          return (
-                            <option key={datasetKey} value={datasetKey}>
-                              {config.datasets[datasetKey].dataUrl}
-                            </option>
-                          )
-                        }
-                        return null
-                      })}
-                    </select>
-                  </label>
+                  <Select
+                    label='URL to Filter'
+                    value={filter.datasetKey || ''}
+                    options={[
+                      { value: '', label: '- Select Option -' },
+                      ...Object.keys(config.datasets)
+                        .filter(datasetKey => config.datasets[datasetKey].dataUrl)
+                        .map(datasetKey => ({
+                          value: datasetKey,
+                          label: config.datasets[datasetKey].dataUrl
+                        }))
+                    ]}
+                    onChange={e => updateFilterProp('datasetKey', e.target.value)}
+                  />
 
-                  <label>
-                    <span className='edit-label column-heading'>Filter By: </span>
-                    <select
-                      defaultValue={filter.filterBy || ''}
-                      onChange={e => updateFilterProp('filterBy', e.target.value)}
-                    >
-                      <option value=''>- Select Option -</option>
-                      <option key={'query-string'} value={'Query String'}>
-                        Query String
-                      </option>
-                      <option key={'file-name'} value={'File Name'}>
-                        File Name
-                      </option>
-                    </select>
-                  </label>
+                  <Select
+                    label='Filter By'
+                    value={filter.filterBy || ''}
+                    options={[
+                      { value: '', label: '- Select Option -' },
+                      { value: 'Query String', label: 'Query String' },
+                      { value: 'File Name', label: 'File Name' }
+                    ]}
+                    onChange={e => updateFilterProp('filterBy', e.target.value)}
+                  />
                   {filter.filterBy === 'File Name' && (
                     <>
                       <TextField
@@ -307,9 +289,16 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                         }
                       />
 
-                      <label>
-                        <span className='edit-label column-heading'>
-                          White Space Replacments
+                      <Select
+                        label='White Space Replacments'
+                        value={filter.whitespaceReplacement || 'Keep Spaces'}
+                        options={[
+                          { value: 'Remove Spaces', label: 'Remove Spaces' },
+                          { value: 'Replace With Underscore', label: 'Replace With Underscore' },
+                          { value: 'Keep Spaces', label: 'Keep Spaces' }
+                        ]}
+                        onChange={e => updateFilterProp('whitespaceReplacement', e.target.value)}
+                        tooltip={
                           <Tooltip style={{ textTransform: 'none' }}>
                             <Tooltip.Target>
                               <Icon display='question' style={{ marginLeft: '0.5rem' }} />
@@ -318,22 +307,8 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                               <p>{`Set how whitespace characters will be handled in the file request`}</p>
                             </Tooltip.Content>
                           </Tooltip>
-                        </span>
-                        <select
-                          defaultValue={filter.whitespaceReplacement || 'Keep Spaces'}
-                          onChange={e => updateFilterProp('whitespaceReplacement', e.target.value)}
-                        >
-                          <option key={'remove-spaces'} value={'Remove Spaces'}>
-                            Remove Spaces
-                          </option>
-                          <option key={'replace-with-underscore'} value={'Replace With Underscore'}>
-                            Replace With Underscore
-                          </option>
-                          <option key={'keep-spaces'} value={'Keep Spaces'}>
-                            Keep Spaces
-                          </option>
-                        </select>
-                      </label>
+                        }
+                      />
                     </>
                   )}
                 </>
@@ -507,22 +482,17 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
             <>
               {filter.filterStyle !== FILTER_STYLE.nestedDropdown ? (
                 <>
-                  <label>
-                    <span className='edit-label column-heading'>Filter: </span>
-                    <select
-                      value={filter.columnName}
-                      onChange={e => {
-                        updateFilterProp('columnName', e.target.value)
-                      }}
-                    >
-                      <option value=''>- Select Option -</option>
-                      {columns.map(dataKey => (
-                        <option value={dataKey} key={`filter-column-select-item-${dataKey}`}>
-                          {dataKey}
-                        </option>
-                      ))}
-                    </select>
-                  </label>
+                  <Select
+                    label='Filter'
+                    value={filter.columnName || ''}
+                    options={[
+                      { value: '', label: '- Select Option -' },
+                      ...columns.map(col => ({ value: col, label: col }))
+                    ]}
+                    onChange={e => {
+                      updateFilterProp('columnName', e.target.value)
+                    }}
+                  />
 
                   <Select
                     value={filter.defaultValue}
@@ -647,23 +617,19 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
                 updateField={(_section, _subSection, _key, value) => updateFilterProp('resetLabel', value)}
               />
 
-              <label>
-                <span className='edit-label column-heading'>Parent Filter: </span>
-                <select
-                  value={filter.parents || []}
-                  onChange={e => {
-                    updateFilterProp('parents', e.target.value)
-                  }}
-                >
-                  <option value=''>Select a filter</option>
-                  {config.dashboard.sharedFilters &&
-                    config.dashboard.sharedFilters.map(sharedFilter => {
-                      if (sharedFilter.key !== filter.key) {
-                        return <option key={sharedFilter.key}>{sharedFilter.key}</option>
-                      }
-                    })}
-                </select>
-              </label>
+              <Select
+                label='Parent Filter'
+                value={filter.parents || ''}
+                options={[
+                  { value: '', label: 'Select a filter' },
+                  ...(config.dashboard.sharedFilters || [])
+                    .filter(sharedFilter => sharedFilter.key !== filter.key)
+                    .map(sharedFilter => ({ value: sharedFilter.key, label: sharedFilter.key }))
+                ]}
+                onChange={e => {
+                  updateFilterProp('parents', e.target.value)
+                }}
+              />
 
               {!isNestedDropdown && (
                 <TextField

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

@@ -47,17 +47,24 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
     })
   }
 
-  const handleFitlerGroupColumnNameChange = selectedOption => {
-    const selectedOptionDatasetName = selectedOption.selectedOptions[0].dataset.set
-    const newColumnName = selectedOption.value
+  const handleFitlerGroupColumnNameChange = (value: string) => {
+    if (!value) {
+      updateFilterProp('columnName', '')
+      updateFilterProp('defaultValue', '')
+      return
+    }
+    const [newColumnName, selectedOptionDatasetName] = value.split('|')
     updateFilterProp('columnName', newColumnName)
     updateFilterProp('defaultValue', '') // Reset default value when column changes
     populateSubGroupingOptions(selectedOptionDatasetName, newColumnName)
   }
 
-  const handleSubGroupColumnNameChange = selectedOption => {
-    const selectedOptionDatasetName = selectedOption.selectedOptions[0].dataset.set
-    const newColumnName = selectedOption.value
+  const handleSubGroupColumnNameChange = (value: string) => {
+    if (!value) {
+      updateFilterProp('subGrouping', { ...subGrouping, columnName: '', valuesLookup: {}, defaultValue: '' })
+      return
+    }
+    const [newColumnName, selectedOptionDatasetName] = value.split('|')
 
     const valuesLookup = filter.values.reduce((acc, groupName) => {
       const values: string[] = _.uniq(
@@ -94,51 +101,44 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
           updateField={(_section, _subSection, _key, value) => updateFilterProp('key', value)}
         />
       )}
-      <label>
-        <div className='edit-label column-heading mt-2'>
-          Filter Grouping
-          <span></span>
-        </div>
-        <select value={filter.columnName} onChange={e => handleFitlerGroupColumnNameChange(e.target)}>
-          <option value=''>- Select Option -</option>
-          {columnNameOptionsInDataset?.map(option => (
-            <option
-              value={option.columnName}
-              data-set={option.datasetKey}
-              key={`filter_${option.datasetKey}_${option.columnName} `}
-            >
-              {option.columnName}
-            </option>
-          ))}
-        </select>
-      </label>
-      <label>
-        <div className='edit-label column-heading mt-2'>
-          Filter SubGrouping
-          <span></span>
-        </div>
-        <select
-          value={subGrouping?.columnName ?? ''}
-          onChange={e => {
-            handleSubGroupColumnNameChange(e.target)
-          }}
-        >
-          <option value=''>- Select Option -</option>
-          {columnNameOptionsInDataset.map(option => {
-            if (option.columnName !== filter.columnName) {
-              return (
-                <option
-                  value={option.columnName}
-                  data-set={option.datasetKey}
-                  key={`subFilter_${option.datasetKey}_${option.columnName} `}
-                >
-                  {option.columnName}
-                </option>
-              )
-            }
-          })}
-        </select>
-      </label>
+      <Select
+        label='Filter Grouping'
+        value={
+          filter.columnName
+            ? `${filter.columnName}|${
+                columnNameOptionsInDataset.find(opt => opt.columnName === filter.columnName)?.datasetKey || ''
+              }`
+            : ''
+        }
+        options={[
+          { value: '', label: '- Select Option -' },
+          ...columnNameOptionsInDataset.map(option => ({
+            value: `${option.columnName}|${option.datasetKey}`,
+            label: option.columnName
+          }))
+        ]}
+        onChange={e => handleFitlerGroupColumnNameChange(e.target.value)}
+      />
+      <Select
+        label='Filter SubGrouping'
+        value={
+          subGrouping?.columnName
+            ? `${subGrouping.columnName}|${
+                columnNameOptionsInDataset.find(opt => opt.columnName === subGrouping.columnName)?.datasetKey || ''
+              }`
+            : ''
+        }
+        options={[
+          { value: '', label: '- Select Option -' },
+          ...columnNameOptionsInDataset
+            .filter(option => option.columnName !== filter.columnName)
+            .map(option => ({
+              value: `${option.columnName}|${option.datasetKey}`,
+              label: option.columnName
+            }))
+        ]}
+        onChange={e => handleSubGroupColumnNameChange(e.target.value)}
+      />
 
       {/* Default Value for Main Group */}
       {filter.columnName && filter.values && filter.values.length > 0 && (

package/src/components/DashboardFilters/DashboardFiltersWrapper.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react'
+import { useContext, useState, useRef } from 'react'
 import { DashboardContext, DashboardDispatchContext } from '../../DashboardContext'
 import Filters from './DashboardFilters'
 import { changeFilterActive } from '../../helpers/changeFilterActive'
@@ -12,6 +12,7 @@ import DashboardFiltersEditor from './DashboardFiltersEditor'
 import { ViewPort } from '@cdc/core/types/ViewPort'
 import { hasDashboardApplyBehavior } from '../../helpers/hasDashboardApplyBehavior'
 import * as apiFilterHelpers from '../../helpers/apiFilterHelpers'
+import * as filterResetHelpers from '../../helpers/filterResetHelpers'
 import { applyQueuedActive } from '@cdc/core/components/Filters/helpers/applyQueuedActive'
 import './dashboardfilter.styles.css'
 import { updateChildFilters } from '../../helpers/updateChildFilters'
@@ -49,9 +50,15 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
   const { config: dashboardConfig, reloadURLData, loadAPIFilters, setAPIFilterDropdowns, setAPILoading } = state
   const dispatch = useContext(DashboardDispatchContext)
 
+  // Track filter version to prevent stale async updates from overwriting cleared filters
+  const filterVersionRef = useRef(0)
+
   const applyFilters = e => {
     e.preventDefault() // prevent form submission
 
+    // Increment version to invalidate any pending async filter operations from handleOnChange
+    filterVersionRef.current += 1
+
     const dashboardConfig = {
       ...state.config.dashboard,
       sharedFilters: [...state.config.dashboard.sharedFilters] // Only clone the array we need to modify
@@ -59,18 +66,21 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
 
     const nonAutoLoadFilterIndexes = Object.values(state.config.visualizations)
       .filter(v => v.type === 'dashboardFilters')
-      .reduce((acc, viz: DashboardFilters) => (!viz.autoLoad ? [...acc, viz.sharedFilterIndexes] : acc), [])
+      .reduce((acc, viz: DashboardFilters) => (!viz.autoLoad ? [...acc, ...viz.sharedFilterIndexes] : acc), [])
     const allRequiredFiltersSelected = !dashboardConfig.sharedFilters.some((filter, filterIndex) => {
       if (nonAutoLoadFilterIndexes.includes(filterIndex)) {
-        return !filter.active && !filter.queuedActive
+        const activeValue = filter.queuedActive || filter.active
+        // Check if filter is not selected OR is set to its reset label
+        const isNotSelected = !activeValue || (filter.resetLabel && activeValue === filter.resetLabel)
+        return isNotSelected
       } else {
         // autoload filters don't need to be selected to apply filters
         return false
       }
     })
     if (allRequiredFiltersSelected) {
-      if (hasDashboardApplyBehavior(state.config.visualizations)) {
-        dispatch({ type: 'SET_FILTERS_APPLIED', payload: true })
+      const hasApplyBehavior = hasDashboardApplyBehavior(state.config.visualizations)
+      if (hasApplyBehavior) {
         const queryParams = getQueryParams()
         let needsQueryUpdate = false
         dashboardConfig.sharedFilters.forEach(sharedFilter => {
@@ -93,32 +103,105 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
       setAPILoading(true)
       dispatch({ type: 'SET_SHARED_FILTERS', payload: dashboardConfig.sharedFilters })
 
-      // Clear data when applying filters to force fresh reload
-      const emptyData = Object.keys(state.data).reduce((acc, key) => {
-        acc[key] = []
-        return acc
-      }, {})
+      // Capture current version for this operation
+      const operationVersion = filterVersionRef.current
+      const isStale = () => filterVersionRef.current !== operationVersion
 
-      const emptyFilteredData = Object.keys(state.filteredData).reduce((acc, key) => {
-        acc[key] = []
-        return acc
-      }, {})
+      loadAPIFilters(dashboardConfig.sharedFilters, apiFilterDropdowns, undefined, undefined, isStale)
+        .then(async newFilters => {
+          // Skip if operation is stale
+          if (isStale()) {
+            return
+          }
 
-      dispatch({ type: 'SET_DATA', payload: emptyData })
-      dispatch({ type: 'SET_FILTERED_DATA', payload: emptyFilteredData })
+          // First try to reload URL data (for filters that actually change the API call)
+          await reloadURLData(newFilters)
 
-      loadAPIFilters(dashboardConfig.sharedFilters, apiFilterDropdowns)
-        .then(newFilters => {
-          reloadURLData(newFilters)
+          // Set filters applied AFTER data is loaded to prevent "no data" flash
+          if (hasApplyBehavior) {
+            dispatch({ type: 'SET_FILTERS_APPLIED', payload: true })
+          }
+          setAPILoading(false)
         })
         .catch(e => {
           console.error(e)
+          setAPILoading(false)
         })
     } else {
       // TODO noftify of required fields
     }
   }
 
+  const handleReset = e => {
+    e.preventDefault()
+
+    // Increment version to invalidate any pending async filter operations
+    filterVersionRef.current += 1
+
+    const dashboardConfig = {
+      ...state.config.dashboard,
+      sharedFilters: _.cloneDeep(state.config.dashboard.sharedFilters)
+    }
+
+    const queryParams = getQueryParams()
+    let needsQueryUpdate = false
+
+    // Reset each filter to empty/resetLabel state (forceEmpty = true)
+    dashboardConfig.sharedFilters.forEach((filter, i) => {
+      const resetValue = filterResetHelpers.getFilterResetValue(filter, apiFilterDropdowns, true)
+      filterResetHelpers.resetFilterToValue(dashboardConfig.sharedFilters[i], resetValue, apiFilterDropdowns)
+
+      // Update query parameters if needed
+      if (
+        filter.setByQueryParameter &&
+        queryParams[filter.setByQueryParameter] !== dashboardConfig.sharedFilters[i].active
+      ) {
+        queryParams[filter.setByQueryParameter] = dashboardConfig.sharedFilters[i].active
+        needsQueryUpdate = true
+      }
+    })
+
+    if (needsQueryUpdate) {
+      updateQueryString(queryParams)
+    }
+
+    // Clear dropdown cache for child filters that depend on parents
+    const updatedDropdowns = filterResetHelpers.clearChildFilterDropdowns(
+      dashboardConfig.sharedFilters,
+      apiFilterDropdowns
+    )
+    setAPIFilterDropdowns(updatedDropdowns)
+
+    dispatch({ type: 'SET_SHARED_FILTERS', payload: dashboardConfig.sharedFilters })
+
+    // Reset filtersApplied state to false when clearing filters
+    dispatch({ type: 'SET_FILTERS_APPLIED', payload: false })
+
+    // Update filtered data immediately after resetting filters
+    // Use the updated dashboardConfig filters instead of state
+    const clonedState = {
+      ...state,
+      config: {
+        ...state.config,
+        dashboard: {
+          ...state.config.dashboard,
+          sharedFilters: dashboardConfig.sharedFilters
+        }
+      }
+    }
+    const newFilteredData = getFilteredData(clonedState)
+    dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
+
+    publishAnalyticsEvent({
+      vizType: dashboardConfig.type,
+      vizSubType: getVizSubType(dashboardConfig),
+      eventType: `dashboard_filter_reset`,
+      eventAction: 'click',
+      eventLabel: interactionLabel,
+      vizTitle: getVizTitle(dashboardConfig)
+    })
+  }
+
   const handleOnChange = (index: number, value: string | string[]) => {
     const newConfig = {
       ...dashboardConfig,
@@ -157,12 +240,18 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
         apiFilterDropdowns,
         changedFilterIndexes
       )
+      // Capture current version for this operation
+      const operationVersion = filterVersionRef.current
+      const isStale = () => filterVersionRef.current !== operationVersion
+
       if (isAutoSelectFilter && !missingFilterSelections) {
         // a dropdown has been selected that doesn't
         // require the Go Button
         setAPIFilterDropdowns(loadingFilterMemo)
-        loadAPIFilters(newSharedFilters, loadingFilterMemo).then(filters => {
-          reloadURLData(filters)
+        loadAPIFilters(newSharedFilters, loadingFilterMemo, undefined, undefined, isStale).then(filters => {
+          if (!isStale()) {
+            reloadURLData(filters)
+          }
         })
       } else {
         newSharedFilters[index].queuedActive = value
@@ -170,7 +259,7 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
         // Don't clear data immediately - keep existing data until new data loads
         // Only update the filter dropdowns and prepare for reload
         setAPIFilterDropdowns(loadingFilterMemo)
-        loadAPIFilters(newSharedFilters, loadingFilterMemo)
+        loadAPIFilters(newSharedFilters, loadingFilterMemo, undefined, undefined, isStale)
       }
     } else {
       if (newSharedFilters[index].type === 'urlfilter' && newSharedFilters[index].apiFilter) {
@@ -224,8 +313,9 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
       {!displayNone && (
         <Layout.Responsive isEditor={isEditor}>
           <div
-            className={`${isEditor ? ' is-editor' : ''
-              } cove-component__content col-12 cove-dashboard-filters-container`}
+            className={`${
+              isEditor ? ' is-editor' : ''
+            } cove-component__content col-12 cove-dashboard-filters-container`}
           >
             <Filters
               show={visualizationConfig?.sharedFilterIndexes?.map(Number)}
@@ -235,6 +325,12 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
               showSubmit={visualizationConfig.filterBehavior === FilterBehavior.Apply && !visualizationConfig.autoLoad}
               applyFilters={applyFilters}
               applyFiltersButtonText={visualizationConfig.applyFiltersButtonText}
+              handleReset={
+                visualizationConfig.filterBehavior === FilterBehavior.Apply &&
+                (visualizationConfig.showClearButton ?? true)
+                  ? handleReset
+                  : undefined
+              }
             />
           </div>
         </Layout.Responsive>