Make DropDown more performant for many options#1343
Merged
gregorydlogan merged 2 commits intoopencast:r/17.xfrom Jul 10, 2025
Merged
Make DropDown more performant for many options#1343gregorydlogan merged 2 commits intoopencast:r/17.xfrom
gregorydlogan merged 2 commits intoopencast:r/17.xfrom
Conversation
Attempts to improve performance of the DropDown component for scenarios where a dropdown has a lot (~10000) options to choose from. Improvements should be most apparent in the access control tabs in case of many roles, and the series table filter in case of many series. Introduces virtualization to our DropDown, using react-window. Unfortunately forces us to define fixed heights for our options, which may cause trouble for long labels. Makes auto-translation of option labels optional, as it can be very expensive and thus should be avoided if not needed. Switch Select for AsyncSelect. This allows us to potentially cache option calculations, further reducing computation time. Memoize the getFilters selector. Should prevent constant rerenders in certain cases.
Contributor
|
Use Run test server using develop.opencast.org as backend: Specify a different backend like stable.opencast.org: It may take a few seconds for the interface to spin up. |
Contributor
|
This pull request is deployed at test.admin-interface.opencast.org/1343/2025-06-20_08-43-35/ . |
Contributor
|
This pull request has conflicts ☹ |
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Attempts to improve performance of the DropDown component for scenarios where a dropdown has a lot (~10000) options to choose from. Improvements should be most apparent in the access control tabs in case of many roles,
and the series table filter in case of many series.
Introduces virtualization to our DropDown, using react-window. Unfortunately forces us to define fixed heights
for our options, which may cause trouble for long labels.
Makes auto-translation of option labels optional, as it can be very expensive and thus should be avoided if not needed.
Switch Select for AsyncSelect. This allows us to potentially cache option calculations, further reducing computation time.
Memoize the getFilters selector. Should prevent constant rerenders in certain cases.
Screencast of improved performance (this PR):
Bildschirmaufzeichnung vom 2025-06-20 10-45-18.webm
Screencast of unimporved performance (r/17.x):
Bildschirmaufzeichnung vom 2025-06-20 10-46-42.webm