DataView: don't offer select/multiselect filters with empty filterOptions
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 70
- Forks
- 13
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 8
Description
Summary
DataView offers select / multiselect filters in the "add filter" menu even when the field's filterOptions is empty. Picking one seeds a chip that has no value and nothing to choose from — a dead control the user can't complete or use.
This is common when filter options are loaded async (e.g. a "Status" or "Owner" facet whose options arrive from the server after first paint): for a moment the field is filterable: true but has zero options, and the menu still lists it.
Where it happens
components/data-view-beta/components/filters.tsx
filterableFieldsonly checksfilterable(line ~105):const filterableFields = fields?.filter(f => f.filterable) ?? [];availableFiltersonly removes already-applied fields (line ~40):const availableFilters = fieldList?.filter( f => !appliedFiltersSet.has(f.accessorKey) );
Neither step checks whether a select / multiselect field actually has options.
components/data-view-beta/hooks/useFilters.tsx — onAddFilter then seeds the value from the (empty) options (line ~22):
const options = field.filterOptions || [];
...
: filterType === FilterType.select
? options[0]?.value // undefined when filterOptions is empty
So the resulting filter is { _type: 'select', value: undefined, ... } — an unpickable chip.
Request
Exclude select / multiselect fields with no filterOptions from the available-filters list, so an unusable filter is never offered. Roughly:
const isSelect =
field.filterType === 'select' || field.filterType === 'multiselect';
const hasOptions = Boolean(field.filterOptions?.length);
// keep the field only if it's not a select, or it's a select WITH options
return !isSelect || hasOptions;
Non-select filter types (string, number, date) are unaffected — they don't depend on filterOptions.
Workaround
We currently re-implement the add-filter menu (also needed for the align gap in #848) and apply this same guard client-side before offering a field. Folding the options check into Apsara's own available-filters logic would let consumers drop the guard.
Willing to contribute
Happy to open a PR if the approach looks right.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in components/data-view-beta/components/filters.tsx by reading filterableFields and availableFilters, then inspect onAddFilter in components/data-view-beta/hooks/useFilters.tsx. Confirm that select and multiselect fields with empty filterOptions are excluded while non-select filters remain available, and that populated select filters can still be added.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 75/100