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

New select component for selecting a large amount of options #17059

Merged
merged 37 commits into from
Nov 24, 2023

Conversation

ElectronicBlueberry
Copy link
Member

@ElectronicBlueberry ElectronicBlueberry commented Nov 21, 2023

closes #17019

image

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.

image

image

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.

image

(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.

image

image

The size of the table can be increased, to allow for seeing more options at once.

image

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.

image

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.

image

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)

  • I've included appropriate automated tests.
  • This is a refactoring of components with existing test coverage.
  • Instructions for manual testing are as follows:
    1. [add testing steps and prerequisites here if you didn't write automated tests covering all your changes]

License

  • I agree to license these and all my past contributions to the core galaxy codebase under the MIT license.

@ElectronicBlueberry ElectronicBlueberry marked this pull request as ready for review November 23, 2023 14:25
@github-actions github-actions bot added this to the 23.2 milestone Nov 23, 2023
Copy link
Contributor

@davelopez davelopez left a 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!

@ElectronicBlueberry
Copy link
Member Author

The only thing that I miss a bit is another little button to clear the search similar to other search components we have.

image

@davelopez davelopez merged commit 61b7575 into galaxyproject:dev Nov 24, 2023
27 checks passed
@davelopez davelopez deleted the many-select branch November 24, 2023 15:02
Copy link

This PR was merged without a "kind/" label, please correct.

@davelopez davelopez restored the many-select branch November 24, 2023 15:04
@mvdbeek mvdbeek modified the milestones: 23.2, 24.0 Dec 19, 2023
@jdavcs jdavcs added the highlight Included in user-facing release notes at the top label Mar 25, 2024
@jdavcs jdavcs mentioned this pull request Apr 1, 2024
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/UI-UX highlight Included in user-facing release notes at the top kind/enhancement kind/feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

New Select Component for a Large Number of Options
4 participants