-
Notifications
You must be signed in to change notification settings - Fork 967
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
New select component for selecting a large amount of options #17059
Merged
davelopez
merged 37 commits into
galaxyproject:dev
from
ElectronicBlueberry:many-select
Nov 24, 2023
Merged
New select component for selecting a large amount of options #17059
davelopez
merged 37 commits into
galaxyproject:dev
from
ElectronicBlueberry:many-select
Nov 24, 2023
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
fix worker only works for single element at a time
show info for selecting and processing
fix blinking options on selecting highlighted
decrease worker running debounce time
fix show more deselect after
increase default display limits to 1000
client/src/components/Form/Elements/FormSelectMany/worker/filterOptions.ts
Fixed
Show resolved
Hide resolved
client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
Fixed
Show resolved
Hide resolved
client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
Fixed
Show fixed
Hide fixed
client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
Fixed
Show fixed
Hide fixed
client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
Fixed
Show fixed
Hide fixed
client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
Fixed
Show fixed
Hide fixed
client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
Fixed
Show fixed
Hide fixed
client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
Fixed
Show fixed
Hide fixed
client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
Fixed
Show fixed
Hide fixed
client/src/components/Form/Elements/FormSelectMany/worker/filterOptions.ts
Dismissed
Show dismissed
Hide dismissed
davelopez
approved these changes
Nov 23, 2023
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Amazing component and very polished!
The only thing that I miss a bit is another little button to clear the search similar to other search components we have.
Thank you so much!
client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts
Outdated
Show resolved
Hide resolved
client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts
Outdated
Show resolved
Hide resolved
client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
Outdated
Show resolved
Hide resolved
davelopez
approved these changes
Nov 24, 2023
This PR was merged without a "kind/" label, please correct. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Labels
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
closes #17019
Adds a new select component for selecting a large amount of options.
The component features a list based layout, which can be filtered using plain-text or a regular expression. Options can be added individually, in bulk via the filter value, or by first highlighting a range.
The component can be chosen when multiple options are available, and a local preference for which component to choose can be set. If no preference is set the new component will automatically be chosen if there are more than 15 options selected, or more than 500 options are available.
(The second option now says "Default to simple select" instead)
The heavy logic for the component is run off of the main thread, so user inputs are not blocked. If this processing takes a while, an indicator shows that the component is currently processing the inputs.
They component is fully keyboard accessible. All methods of selection and highlighting work via keyboard. The options are not selectable individually with tab, but can be scrolled through using the arrow-keys.
The hover hint adapts when a keyboard is used.
The size of the table can be increased, to allow for seeing more options at once.
The options in the list are limited to 1000 for performance reasons, but this can be temporarily increased in steps of 500, when reaching the end of a list.
Performance scales very well with number of options and selected values. It was tested with a set of 100k mock values, and remains below half a second.
Due to the logic running in a worker, heavy filtering and grouping operations do not block the user interface or browser.
A single worker is shared by all component instances, since only one of them will be required at a time.
How to test the changes?
(Select all options that apply)
License