@cdc/dashboard 4.25.8 → 4.25.11

package/src/components/DashboardFilters/DashboardFilters.tsx

@@ -18,6 +18,7 @@ type DashboardFilterProps = {
   showSubmit: boolean
   applyFilters: MouseEventHandler<HTMLButtonElement>
   applyFiltersButtonText?: string
+  handleReset?: MouseEventHandler<HTMLButtonElement>
 }
 
 const DashboardFilters: React.FC<DashboardFilterProps> = ({
@@ -27,7 +28,8 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
   handleOnChange,
   showSubmit,
   applyFilters,
-  applyFiltersButtonText
+  applyFiltersButtonText,
+  handleReset
 }) => {
   const nullVal = (filter: SharedFilter) => {
     const val = filter.queuedActive || filter.active
@@ -76,11 +78,6 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
           ]
         )
 
-        const activeSubGroupValue = _.get(
-          filter?.subGrouping?.valuesLookup,
-          [filter?.active as string, 'values', 0],
-          null // Default to null if the path is invalid
-        )
         if (_key && apiFilterDropdowns[_key]) {
           // URL Filter
           if (filter.filterStyle !== FILTER_STYLE.nestedDropdown) {
@@ -120,8 +117,8 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
         }
 
         const isDisabled = !values.length
-        // push reset label only if it does not includes in filter values  options
-        if (filter.resetLabel && !filter.values.includes(filter.resetLabel)) {
+        // push reset label only if it does not includes in filter values options
+        if (filter.resetLabel && !filter.values.includes(filter.resetLabel) && !_key) {
           values.unshift(
             <option key={`${filter.resetLabel}-option`} value={filter.resetLabel}>
               {filter.resetLabel}
@@ -150,7 +147,7 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
             ) : filter.filterStyle === FILTER_STYLE.nestedDropdown ? (
               <NestedDropdown
                 activeGroup={(filter.queuedActive?.[0] || filter.active) as string}
-                activeSubGroup={_key ? filter.queuedActive?.[1] || filter.subGrouping?.active : activeSubGroupValue}
+                activeSubGroup={(filter.queuedActive?.[1] || filter.subGrouping?.active) as string}
                 filterIndex={filterIndex}
                 options={_key ? getNestedDropdownOptions(apiFilterDropdowns[_key]) : nestedOptions}
                 listLabel={label}
@@ -170,7 +167,14 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
                   disabled={loading || isDisabled}
                 >
                   {loading && <option value='Loading...'>Loading...</option>}
-                  {nullVal(filter) && (
+                  {/* For API filters, show placeholder when no value is selected */}
+                  {_key && nullVal(filter) && (
+                    <option key={`reset-label`} value=''>
+                      {filter.resetLabel || '- Select One -'}
+                    </option>
+                  )}
+                  {/* For non-API filters or when no value is selected, show empty option */}
+                  {!_key && nullVal(filter) && (
                     <option key={`select`} value=''>
                       {filter.resetLabel || '- Select -'}
                     </option>
@@ -184,19 +188,26 @@ const DashboardFilters: React.FC<DashboardFilterProps> = ({
         )
       })}
       {showSubmit && (
-        <button
-          className='btn btn-primary mb-1'
-          onClick={applyFilters}
-          disabled={show.some(filterIndex => {
-            const emptyFilterValues = [undefined, '', '- Select -']
-            return (
-              emptyFilterValues.includes(sharedFilters[filterIndex].queuedActive) &&
-              emptyFilterValues.includes(sharedFilters[filterIndex].active)
-            )
-          })}
-        >
-          {applyFiltersButtonText || 'GO!'}
-        </button>
+        <>
+          <button
+            className='btn btn-primary mb-1 me-2'
+            onClick={applyFilters}
+            disabled={show.some(filterIndex => {
+              const emptyFilterValues = [undefined, '', '- Select -']
+              return (
+                emptyFilterValues.includes(sharedFilters[filterIndex].queuedActive) &&
+                emptyFilterValues.includes(sharedFilters[filterIndex].active)
+              )
+            })}
+          >
+            {applyFiltersButtonText || 'GO!'}
+          </button>
+          {handleReset && (
+            <button className='btn btn-link mb-1' onClick={handleReset}>
+              Clear Filters
+            </button>
+          )}
+        </>
       )}
     </form>
   )

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

@@ -43,9 +43,10 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
     return config.dashboard.sharedFilters
       ?.map<[number, string]>(({ key }, i) => [i, key])
       .filter(([filterIndex]) => !sharedFilterIndexes.includes(filterIndex)) // filter out already added filters
-      .map(([filterIndex, filterName]) => (
-        <option key={filterIndex} value={filterIndex}>{`${filterIndex} - ${filterName}`}</option>
-      ))
+      .map(([filterIndex, filterName]) => ({
+        value: String(filterIndex),
+        label: `${filterIndex} - ${filterName}`
+      }))
   }, [config.visualizations, vizConfig.uid])
 
   const openControls = useState({})
@@ -189,6 +190,27 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
               }
             />
           )}
+          {vizConfig.filterBehavior === 'Apply Button' && (
+            <CheckBox
+              label='Show Clear Filters Button'
+              value={vizConfig.showClearButton ?? true}
+              updateField={(_section, _subsection, _key, value) => {
+                updateConfig({ ...vizConfig, showClearButton: value })
+              }}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      When enabled, displays a "Clear Filters" button that allows users to reset all filter selections.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+          )}
         </AccordionItemPanel>
       </AccordionItem>
 
@@ -254,8 +276,10 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
                   </Tooltip.Content>
                 </Tooltip>
               </span>
-              <select
+              <Select
+                label=''
                 value={''}
+                options={[{ value: '', label: 'Select' }, ...(existingOptions || [])]}
                 onChange={e => {
                   updateConfig({
                     ...vizConfig,
@@ -263,14 +287,7 @@ const DashboardFiltersEditor: React.FC<DashboardFitlersEditorProps> = ({ vizConf
                   })
                   setCanAddExisting(false)
                 }}
-              >
-                {[
-                  <option key='select' value=''>
-                    Select
-                  </option>,
-                  ...existingOptions
-                ]}
-              </select>
+              />
             </label>
           ) : (
             <button onClick={() => setCanAddExisting(true)} className='btn btn-primary full-width mt-2'>

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

@@ -100,7 +100,7 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
       if (!_dataSet.data && _dataSet.dataUrl) {
         setDataFiltersLoading(true)
         let data = await fetchRemoteData(_dataSet.dataUrl)
-        if (_dataSet.dataDescription) {
+        if (_dataSet.dataDescription && data && data.length > 0) {
           try {
             data = transform.autoStandardize(data)
             data = transform.developerStandardize(data, _dataSet.dataDescription)
@@ -110,6 +110,9 @@ const FilterEditor: React.FC<FilterEditorProps> = ({
           } finally {
             _dataSet.data = data
           }
+        } else if (data) {
+          // If no dataDescription but we have data, store it directly
+          _dataSet.data = data
         }
       }
 
@@ -181,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>
@@ -251,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
@@ -304,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' }} />
@@ -315,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>
+                        }
+                      />
                     </>
                   )}
                 </>
@@ -504,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}
@@ -644,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

@@ -2,7 +2,7 @@ import { DashboardConfig } from '../../../../types/DashboardConfig'
 import { SharedFilter } from '../../../../types/SharedFilter'
 import _ from 'lodash'
 import { SubGrouping } from '@cdc/core/types/VizFilter'
-import { TextField } from '@cdc/core/components/EditorPanel/Inputs'
+import { TextField, Select } from '@cdc/core/components/EditorPanel/Inputs'
 
 type NestedDropDownEditorDashboardProps = {
   config: DashboardConfig
@@ -47,16 +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(
@@ -77,7 +85,8 @@ const NestedDropDownDashboard: React.FC<NestedDropDownEditorDashboardProps> = ({
     const newSubGrouping: SubGrouping = {
       ...subGrouping,
       columnName: newColumnName,
-      valuesLookup
+      valuesLookup,
+      defaultValue: '' // Reset default value when column changes
     }
 
     updateFilterProp('subGrouping', newSubGrouping)
@@ -92,51 +101,72 @@ 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)
+      <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}
+          updateField={(_section, _subSection, _key, value) => updateFilterProp('defaultValue', value)}
+          label={'Group Default Value'}
+          initial={'Select'}
+        />
+      )}
+
+      {/* Default Value for Sub Group */}
+      {subGrouping?.columnName && (filter.defaultValue || filter.active) && subGrouping.valuesLookup && (
+        <Select
+          value={subGrouping.defaultValue}
+          options={(() => {
+            const groupKey = filter.defaultValue || (Array.isArray(filter.active) ? filter.active[0] : filter.active)
+            return subGrouping.valuesLookup[groupKey as string]?.values || []
+          })()}
+          updateField={(_section, _subSection, _key, value) => {
+            const newSubGrouping = { ...subGrouping, defaultValue: value }
+            updateFilterProp('subGrouping', newSubGrouping)
           }}
-        >
-          <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>
+          label={'Sub Group Default Value'}
+          initial={'Select'}
+        />
+      )}
     </div>
   )
 }