Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve search algorithm in sidebar filtering UI #1271

Closed
jameshadfield opened this issue Jan 22, 2021 · 1 comment · Fixed by #1344
Closed

Improve search algorithm in sidebar filtering UI #1271

jameshadfield opened this issue Jan 22, 2021 · 1 comment · Fixed by #1344
Labels
enhancement New feature or request good first issue A relatively isolated issue appropriate for first-time contributors please take this issue

Comments

@jameshadfield
Copy link
Member

Currently (and unchanged in #1265) one must type an exact (case-insensitive) substring of the displayed filter options in order to have them show up as selectable. For example, given a filtering option mutation HA1 136E (buried in a large list), typing any the following examples do not identify the option: mut 136E, mut HA1 136, 136 HA1.

This is also evident for options such as Country → USA where typing in country USA does not identify the option for filtering!

Notes

  • As part of this, we may want to upgrade the version of react-select we are using (we're pinned to 1.0.0-rc5, the latest is 3.2.0).
  • A solution here must take into account performance, as we frequently have lists of options of 10^4 or higher.
  • During Filtering by genotype #1265 I investigated using https://github.com/bvaughn/react-select-fast-filter-options, which would easily expose the string matching algorithm, however this resulted in significantly decreased performance and thus wasn't persued.
@jameshadfield jameshadfield added enhancement New feature or request good first issue A relatively isolated issue appropriate for first-time contributors moderate problem please take this issue labels Jan 22, 2021
@didithilmy
Copy link
Contributor

Hello, I'm interested in taking this issue, I might have a solution without the need to upgrade react-select.

The code takes advantage of react-select's filterOption prop. The filter shows an option only if every word in the search query exists somewhere in the option label. Using this, entering country USA will include Country → USA. This also works even when the order of the word doesn't match.

Screen Shot 2021-03-10 at 15 09 23

I have tried this out using ncov/global and there doesn't seem to be a significant performance issue.

Take a look at master...didithilmy:filter-search-alg

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue A relatively isolated issue appropriate for first-time contributors please take this issue
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants