@cdc/dashboard 4.25.8 → 4.25.11

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,10 +12,12 @@ 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'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 type SubOptions = { subOptions?: Record<'value' | 'text', string>[] }
 
@@ -48,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
@@ -58,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 => {
@@ -92,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
-      }, {})
-
-      const emptyFilteredData = Object.keys(state.filteredData).reduce((acc, key) => {
-        acc[key] = []
-        return acc
-      }, {})
-
-      dispatch({ type: 'SET_DATA', payload: emptyData })
-      dispatch({ type: 'SET_FILTERED_DATA', payload: emptyFilteredData })
-      
-      loadAPIFilters(dashboardConfig.sharedFilters, apiFilterDropdowns)
-        .then(newFilters => {
-          reloadURLData(newFilters)
+      // Capture current version for this operation
+      const operationVersion = filterVersionRef.current
+      const isStale = () => filterVersionRef.current !== operationVersion
+
+      loadAPIFilters(dashboardConfig.sharedFilters, apiFilterDropdowns, undefined, undefined, isStale)
+        .then(async newFilters => {
+          // Skip if operation is stale
+          if (isStale()) {
+            return
+          }
+
+          // First try to reload URL data (for filters that actually change the API call)
+          await 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,
@@ -134,12 +218,15 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
       visualizationConfig
     )
 
-    publishAnalyticsEvent(
-      'dashboard_filter_changed',
-      'change',
-      `${interactionLabel}|key_${newSharedFilters?.[index]?.key}|value_${value}`,
-      'dashboard'
-    )
+    publishAnalyticsEvent({
+      vizType: dashboardConfig.type,
+      vizSubType: getVizSubType(dashboardConfig),
+      eventType: `dashboard_filter_changed`,
+      eventAction: 'change',
+      eventLabel: `${interactionLabel}`,
+      vizTitle: getVizTitle(dashboardConfig),
+      specifics: `key: ${newConfig.dashboard.sharedFilters[index]?.columnName || 'unknown'}, value: ${value}`
+    })
 
     // sets the active filter option that the user just selected.
     dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
@@ -153,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
@@ -166,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) {
@@ -232,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>

package/src/components/DashboardFilters/_stories/DashboardFilters.stories.tsx

@@ -1,21 +1,80 @@
-import { Meta, StoryObj } from '@storybook/react'
-import DashboardFilters from '../DashboardFilters'
-
-const meta: Meta<typeof DashboardFilters> = {
-  title: 'Components/Atoms/Inputs/DashboardFilters',
-  component: DashboardFilters
-}
-
-type Story = StoryObj<typeof DashboardFilters>
-
-export const Example_1: Story = {
-  args: {
-    filters: [
-      { type: 'datafilter', key: 'label here', values: [1, 2, 3, 4] },
-      { type: 'datafilter', key: 'something' }
-    ],
-    handleOnChange: () => {}
-  }
-}
-
-export default meta
+import { Meta, StoryObj } from '@storybook/react-vite'
+import DashboardFilters from '../DashboardFilters'
+import '../../../scss/main.scss'
+
+const meta: Meta<typeof DashboardFilters> = {
+  title: 'Components/Atoms/Inputs/DashboardFilters',
+  component: DashboardFilters,
+  decorators: [
+    Story => (
+      <div className='cdc-open-viz-module type-dashboard'>
+        <Story />
+      </div>
+    )
+  ]
+}
+
+type Story = StoryObj<typeof DashboardFilters>
+
+export const Example_1: Story = {
+  args: {
+    filters: [
+      {
+        type: 'datafilter',
+        key: 'label here',
+        values: ['1', '2', '3', '4'],
+        columnName: 'label',
+        showDropdown: true,
+        id: 0,
+        parents: []
+      } as any,
+      {
+        type: 'datafilter',
+        key: 'something',
+        values: ['A', 'B', 'C'],
+        columnName: 'something',
+        showDropdown: true,
+        id: 1,
+        parents: []
+      } as any
+    ],
+    show: [0, 1],
+    apiFilterDropdowns: {},
+    handleOnChange: () => {}
+  }
+}
+
+export const WithClearButton: Story = {
+  args: {
+    filters: [
+      {
+        type: 'datafilter',
+        key: 'Category',
+        values: ['Option 1', 'Option 2', 'Option 3'],
+        active: 'Option 1',
+        columnName: 'category',
+        showDropdown: true,
+        id: 0,
+        parents: []
+      } as any,
+      {
+        type: 'datafilter',
+        key: 'Status',
+        values: ['Active', 'Inactive', 'Pending'],
+        active: 'Active',
+        columnName: 'status',
+        showDropdown: true,
+        id: 1,
+        parents: []
+      } as any
+    ],
+    show: [0, 1],
+    apiFilterDropdowns: {},
+    handleOnChange: () => {},
+    showSubmit: true,
+    applyFilters: () => {},
+    handleReset: () => {}
+  }
+}
+
+export default meta