Skip to content

Make DropDown more performant for many options#1343

Merged
gregorydlogan merged 2 commits intoopencast:r/17.xfrom
Arnei:dropdown-with-variablesizelist
Jul 10, 2025
Merged

Make DropDown more performant for many options#1343
gregorydlogan merged 2 commits intoopencast:r/17.xfrom
Arnei:dropdown-with-variablesizelist

Conversation

@Arnei
Copy link
Copy Markdown
Member

@Arnei Arnei commented Jun 20, 2025

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

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.
@Arnei Arnei added the type:enhancement New feature or request label Jun 20, 2025
@github-actions
Copy link
Copy Markdown
Contributor

Use docker or podman to test this pull request locally.

Run test server using develop.opencast.org as backend:

podman run --rm -it -p 127.0.0.1:3000:3000 ghcr.io/opencast/opencast-admin-interface:pr-1343

Specify a different backend like stable.opencast.org:

podman run --rm -it -p 127.0.0.1:3000:3000 -e PROXY_TARGET=https://stable.opencast.org ghcr.io/opencast/opencast-admin-interface:pr-1343

It may take a few seconds for the interface to spin up.
It will then be available at http://127.0.0.1:3000.
For more options you can pass on to the proxy, take a look at the README.md.

@github-actions
Copy link
Copy Markdown
Contributor

This pull request is deployed at test.admin-interface.opencast.org/1343/2025-06-20_08-43-35/ .
It might take a few minutes for it to become available.

@github-actions
Copy link
Copy Markdown
Contributor

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

@gregorydlogan gregorydlogan self-assigned this Jul 10, 2025
@gregorydlogan gregorydlogan merged commit 1af4c2e into opencast:r/17.x Jul 10, 2025
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

type:enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants