Opening an image in a directory with many files is very slow
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 119
- Forks
- 72
- Avg merge
- 18h 42m
- Merged PRs (30d)
- 24
Description
Describe the bug
When opening an image in a directory with many (~10k) images, my browser hangs for about a minute. The longest time seems to be consumed by https://github.com/nextcloud/viewer/blob/c77de0393c22dbd294d6006d7ee4209e3c81d74d/src/views/Viewer.vue#L797-L799
The map() call here has a runtime complexity of O(n^2) with n being the number of files in the directory which is not ideal.
If I don't overlook something, the goal of
https://github.com/nextcloud/viewer/blob/c77de0393c22dbd294d6006d7ee4209e3c81d74d/src/views/Viewer.vue#L778-L799
is to get filteredFiles sorted and assign that to this.fileList.
From an algorithmic point of view, it should be possible that sortNodes() (or a similar function) returns a list of indices that sort the underlying list (here nodes) like argsort in NumPy. Then this list of indices can be used to reorder filteredFiles. Then, except for the sorting everything should run in O(n).
To Reproduce
Steps to reproduce the behavior:
- Open an image in a directory with many (~10k) images
- Wait until the prev/next buttons appear
Desktop (please complete the following information):
- OS: Ubuntu 22.04
- Browser Firefox 144.0.2
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in src/views/Viewer.vue at lines 778-799, especially the map() call at lines 797-799 and the sortNodes() flow. Reproduce the delay by opening an image in a directory with about 10,000 images, then verify that the filtered files are sorted with the previous/next buttons appearing without the roughly one-minute browser hang.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 68/100