@cdc/dashboard 4.25.10 → 4.26.1

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

@@ -1,8 +1,11 @@
 import { DashboardConfig } from '../../../../types/DashboardConfig'
 import { SharedFilter } from '../../../../types/SharedFilter'
 import _ from 'lodash'
-import { SubGrouping } from '@cdc/core/types/VizFilter'
+import { SubGrouping, OrderBy } from '@cdc/core/types/VizFilter'
 import { TextField, Select } from '@cdc/core/components/EditorPanel/Inputs'
+import { handleSorting } from '@cdc/core/components/Filters/helpers/handleSorting'
+import { filterOrderOptions } from '@cdc/core/helpers/filterOrderOptions'
+import FilterOrder from '@cdc/core/components/EditorPanel/VizFilterEditor/components/FilterOrder'
 
 type NestedDropDownEditorDashboardProps = {
   config: DashboardConfig
@@ -47,30 +50,40 @@ 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', '')
+      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 order = subGrouping?.order || 'asc'
 
     const valuesLookup = filter.values.reduce((acc, groupName) => {
-      const values: string[] = _.uniq(
+      const rawValues: string[] = _.uniq(
         config.datasets[selectedOptionDatasetName].data
           .map(d => {
             return d[filter.columnName] === groupName ? d[newColumnName] : ''
           })
           .filter(value => value !== '')
-      ).sort()
+      )
+
+      // Sort values according to the order setting
+      const { values: sortedValues } = handleSorting({ values: rawValues, order })
 
       acc[groupName] = {
-        values,
-        orderedValues: values
+        values: sortedValues,
+        orderedValues: sortedValues
       }
       return acc
     }, {})
@@ -79,12 +92,94 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
       ...subGrouping,
       columnName: newColumnName,
       valuesLookup,
+      order,
       defaultValue: '' // Reset default value when column changes
     }
 
     updateFilterProp('subGrouping', newSubGrouping)
   }
 
+  // Handle group order change (asc/desc/cust)
+  const handleGroupingOrderBy = (order: OrderBy) => {
+    const groupSortObject = {
+      values: _.cloneDeep(filter.values),
+      order
+    }
+    const { values: newOrderedValues } = handleSorting(groupSortObject)
+
+    const updates: Partial<SharedFilter> = {
+      values: newOrderedValues,
+      order
+    }
+
+    if (order === 'cust') {
+      updates.orderedValues = newOrderedValues
+    } else {
+      updates.orderedValues = undefined
+    }
+
+    // Update filter with new order and values
+    updateFilterProp('order', order)
+  }
+
+  // Handle drag-drop reorder for group values
+  const handleGroupingCustomOrder = (sourceIndex: number, destinationIndex: number) => {
+    if (sourceIndex === undefined || destinationIndex === undefined || sourceIndex === destinationIndex) return
+
+    const orderedValues = _.cloneDeep(filter.orderedValues || filter.values)
+    const [movedItem] = orderedValues.splice(sourceIndex, 1)
+    orderedValues.splice(destinationIndex, 0, movedItem)
+
+    // Update both values and orderedValues, and ensure order is 'cust'
+    updateFilterProp('orderedValues', orderedValues)
+    if (filter.order !== 'cust') {
+      updateFilterProp('order', 'cust')
+    }
+  }
+
+  // Handle subgroup order change (asc/desc/cust)
+  const handleSubGroupingOrderBy = (order: OrderBy) => {
+    const newValuesLookup = Object.keys(subGrouping.valuesLookup).reduce((acc, groupName) => {
+      const subGroup = subGrouping.valuesLookup[groupName]
+      const { values: sortedValues } = handleSorting({ values: _.cloneDeep(subGroup.values), order })
+
+      acc[groupName] = {
+        values: sortedValues,
+        orderedValues: order === 'cust' ? sortedValues : undefined
+      }
+      return acc
+    }, {})
+
+    const newSubGrouping: SubGrouping = {
+      ...subGrouping,
+      order,
+      valuesLookup: newValuesLookup
+    }
+
+    updateFilterProp('subGrouping', newSubGrouping)
+  }
+
+  // Handle drag-drop reorder for subgroup values within a specific group
+  const handleSubGroupingCustomOrder = (
+    sourceIndex: number,
+    destinationIndex: number,
+    currentOrderedValues: string[],
+    groupName: string
+  ) => {
+    if (sourceIndex === undefined || destinationIndex === undefined || sourceIndex === destinationIndex) return
+
+    const updatedGroupOrderedValues = _.cloneDeep(currentOrderedValues)
+    const [movedItem] = updatedGroupOrderedValues.splice(sourceIndex, 1)
+    updatedGroupOrderedValues.splice(destinationIndex, 0, movedItem)
+
+    const newSubGrouping = _.cloneDeep(subGrouping)
+    newSubGrouping.valuesLookup[groupName].values = updatedGroupOrderedValues
+    newSubGrouping.valuesLookup[groupName].orderedValues = updatedGroupOrderedValues
+    newSubGrouping.order = 'cust'
+
+    updateFilterProp('subGrouping', newSubGrouping)
+  }
+
   return (
     <div className='nesteddropdown-editor'>
       {!isDashboard && (
@@ -94,57 +189,50 @@ 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 && (
         <Select
           value={filter.defaultValue}
-          options={filter.values}
+          options={filter.orderedValues || filter.values}
           updateField={(_section, _subSection, _key, value) => updateFilterProp('defaultValue', value)}
           label={'Group Default Value'}
           initial={'Select'}
@@ -157,7 +245,8 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
           value={subGrouping.defaultValue}
           options={(() => {
             const groupKey = filter.defaultValue || (Array.isArray(filter.active) ? filter.active[0] : filter.active)
-            return subGrouping.valuesLookup[groupKey as string]?.values || []
+            const lookup = subGrouping.valuesLookup[groupKey as string]
+            return lookup?.orderedValues || lookup?.values || []
           })()}
           updateField={(_section, _subSection, _key, value) => {
             const newSubGrouping = { ...subGrouping, defaultValue: value }
@@ -167,6 +256,54 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
           initial={'Select'}
         />
       )}
+
+      {/* Group Order */}
+      {filter.columnName && filter.values && filter.values.length > 0 && (
+        <div className='mt-2'>
+          <Select
+            label='Group Order'
+            value={filter.order || 'asc'}
+            options={filterOrderOptions}
+            onChange={e => handleGroupingOrderBy(e.target.value as OrderBy)}
+          />
+          {filter.order === 'cust' && (
+            <FilterOrder
+              orderedValues={filter.orderedValues || filter.values}
+              handleFilterOrder={handleGroupingCustomOrder}
+            />
+          )}
+        </div>
+      )}
+
+      {/* SubGrouping Order */}
+      {subGrouping?.columnName && subGrouping.valuesLookup && Object.keys(subGrouping.valuesLookup).length > 0 && (
+        <div className='mt-2'>
+          <Select
+            label='SubGrouping Order'
+            value={subGrouping.order || 'asc'}
+            options={filterOrderOptions}
+            onChange={e => handleSubGroupingOrderBy(e.target.value as OrderBy)}
+          />
+          {subGrouping.order === 'cust' &&
+            (filter.orderedValues || filter.values)?.map((groupName, i) => {
+              const lookup = subGrouping.valuesLookup[groupName]
+              if (!lookup) return null
+              const orderedSubGroupValues = lookup.orderedValues || lookup.values
+              return (
+                <div key={`group-subgroup-values-${groupName}-${i}`}>
+                  <span className='font-weight-bold fw-bold'>{groupName}</span>
+                  <FilterOrder
+                    key={`subgroup-values-${groupName}-${i}`}
+                    orderedValues={orderedSubGroupValues}
+                    handleFilterOrder={(sourceIndex, destinationIndex) => {
+                      handleSubGroupingCustomOrder(sourceIndex, destinationIndex, orderedSubGroupValues, groupName)
+                    }}
+                  />
+                </div>
+              )
+            })}
+        </div>
+      )}
     </div>
   )
 }

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,108 @@ 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 child filter values before filtering data
+    const updatedFilters = updateChildFilters(dashboardConfig.sharedFilters, state.data)
+
+    // Update filtered data immediately after resetting filters
+    // Use the updated filters instead of state
+    const clonedState = {
+      ...state,
+      config: {
+        ...state.config,
+        dashboard: {
+          ...state.config.dashboard,
+          sharedFilters: updatedFilters
+        }
+      }
+    }
+    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 +243,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,11 +262,12 @@ 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 {
+      const updatedFilters = updateChildFilters(newSharedFilters, state.data)
       if (newSharedFilters[index].type === 'urlfilter' && newSharedFilters[index].apiFilter) {
-        reloadURLData(newSharedFilters)
+        reloadURLData(updatedFilters)
       } else {
         const clonedState = {
           ...state,
@@ -182,13 +275,13 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
             ...state.config,
             dashboard: {
               ...state.config.dashboard,
-              sharedFilters: newSharedFilters
+              sharedFilters: updatedFilters
             }
           }
         }
         const newFilteredData = getFilteredData(clonedState)
         dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
-        dispatch({ type: 'SET_SHARED_FILTERS', payload: newSharedFilters })
+        dispatch({ type: 'SET_SHARED_FILTERS', payload: updatedFilters })
       }
     }
   }
@@ -204,9 +297,9 @@ const DashboardFiltersWrapper: React.FC<DashboardFiltersProps> = ({
   // if all of the filters are hidden filters don't display the VisualizationWrapper
   const filters = visualizationConfig?.sharedFilterIndexes
     ?.map(Number)
-    .map(filterIndex => dashboardConfig.dashboard.sharedFilters[filterIndex])
+    ?.map(filterIndex => dashboardConfig.dashboard.sharedFilters[filterIndex])
 
-  const displayNone = filters.length ? filters.every(filter => filter.showDropdown === false) : false
+  const displayNone = filters?.length ? filters.every(filter => filter.showDropdown === false) : false
   if (displayNone && !isEditor) return <></>
   return (
     <Layout.VisualizationWrapper config={visualizationConfig} isEditor={isEditor} currentViewport={currentViewport}>
@@ -224,8 +317,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 +329,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,9 +1,17 @@
 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
+  component: DashboardFilters,
+  decorators: [
+    Story => (
+      <div className='cdc-open-viz-module type-dashboard'>
+        <Story />
+      </div>
+    )
+  ]
 }
 
 type Story = StoryObj<typeof DashboardFilters>
@@ -11,11 +19,62 @@ 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' }
+      {
+        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