raystack / raystack/apsara

DataView: don't offer select/multiselect filters with empty filterOptions

Open Beginner friendly
#849 0 comments 0 reactions 0 assignees View on GitHub

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

  • filterableFields only checks filterable (line ~105):
    const filterableFields = fields?.filter(f => f.filterable) ?? [];
    
  • availableFilters only 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.tsxonAddFilter 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.