Story #17585
closed
Redesign navigation of files in collections
100%
Description
The collection view needs to handle arbitrarily large/deep file listings. The current tree view in the "files" panel on the wb2 collection page does not work well as the number of files rises into the tens of thousands.
Requirements:
- Must be functionally possible to view and navigate very large file collections (a good test case would be a collection with ten million files) without it being incredibly slow and/or crashing the browser.
- From UI point of view we can generally assume that very large collections have been organized into a reasonable hierarchy, but this still needs to be robust in situations where there are 10,000-100,000 files in a single flat directory.
- Must be possible to interact with files the same ways that are currently possible (download, open in new tab, copy link for sharing).
- Should have some basic search or filtering feature for filenames.
Possible concept from discussion:
Instead of tree view, show (and load) only a single folder level at once. Show list of folders and files. Have bread crumbs at the top to enable easy navigation back to parent directories.
Files
Updated by Peter Amstutz over 3 years ago
- Related to Story #16944: WB2 collections page feature parity added
Updated by Peter Amstutz over 3 years ago
- Target version set to 2021-07-21 sprint
Updated by Peter Amstutz over 3 years ago
- Target version changed from 2021-07-21 sprint to 2021-07-07 sprint
Updated by Peter Amstutz over 3 years ago
- Target version changed from 2021-07-07 sprint to 2021-07-21 sprint
Updated by Peter Amstutz over 3 years ago
- Status changed from New to In Progress
Updated by Peter Amstutz over 3 years ago
- Target version changed from 2021-07-21 sprint to 2021-08-04 sprint
Updated by Peter Amstutz over 3 years ago
- Target version changed from 2021-08-04 sprint to 2021-08-18 sprint
Updated by Peter Amstutz over 3 years ago
- Target version changed from 2021-08-18 sprint to 2021-09-01 sprint
Updated by Daniel Kutyła over 3 years ago
New version first commit: https://dev.arvados.org/projects/arvados-workbench-2/repository/revisions/4b956bd2e3bcccdeb808df7391d135659cf85b94
Test run: not ran
Branch: 17585-Redesign-navigation-of-files-in-collections
Initial impl
Updated by Peter Amstutz over 3 years ago
Daniel Kutyła wrote:
New version first commit: https://dev.arvados.org/projects/arvados-workbench-2/repository/revisions/4b956bd2e3bcccdeb808df7391d135659cf85b94
Test run: not ran
Branch: 17585-Redesign-navigation-of-files-in-collectionsInitial impl
Panels should have a white background.
Clicking on a file flashes "Loading..." then shows the same file list.
The behavior for displaying directories on the left side is confusing.
When there are no subdirectories, the left panel is completely empty.
If there is a subdirectory at the top level, the directory appears on both panels.
When you click on the first subdirectory, the directory on the left side is highlighted, but the contents of the left panel doesn't change.
When you click on the 2nd level subdirectory, it replaces the left side with the list of "sibling" subdirectories at the same level.
It is confusing as to whether the breadcrumb bar refers to the left side or right side.
I know we were trying to display two directory levels at once, but the current implementation is confusing. Let's try something simpler.
Just show one directory at a time. The breadcrumbs reflect the current directory.
- The left panel lists just the subdirectories in current directory.
- The right panel lists just the files in the current directory.
The user uses the left panel to navigate directories, and the right panel to manipulate files.
There should be checkboxes to allow selecting subdirectories.
The left hand directory list should include ".." or an up arrow (or back arrow) icon to navigate to the parent directory.
Updated by Peter Amstutz over 3 years ago
Also, using Lucas's tool from #17948 I created a collection with 30,000 files in the root directory. That didn't work well. We still need to add some kind of paging for this case.
Updated by Lucas Di Pentima over 3 years ago
I've created a couple of big-ish collections on ce8i5 for testing purposes, and shared with Daniel:
- ce8i5-4zz18-hdsd6xy593r1d0r (~35k files at the root dir)
- ce8i5-4zz18-d956vn5c5kc52zp (~34k files distributed in a 3 level deep tree)
When ce8i5 gets #15430 applied, I'll make new versions with a lot more files.
Updated by Peter Amstutz over 3 years ago
- Target version changed from 2021-09-01 sprint to 2021-09-15 sprint
Updated by Daniel Kutyła over 3 years ago
New version first commit: https://dev.arvados.org/projects/arvados-workbench-2/repository/revisions/3ef505311c624abd61dd899283e061974abe8efb
Test run: developer-tests-workbench2: #474
Branch: 17585-Redesign-navigation-of-files-in-collections
Final impl
Updated by Daniel Kutyła over 3 years ago
Test re-run: developer-tests-workbench2: #475
Updated by Peter Amstutz over 3 years ago
- Is duplicate of Bug #17565: Add level-by-level expansion when browsing large collections added
Updated by Daniel Kutyła over 3 years ago
Test re-run: developer-tests-workbench2: #476
Updated by Peter Amstutz over 3 years ago
- File wb2-file-browser.png wb2-file-browser.png added
Functionally the performance seems very good.
For the layout I have some design changes. I don't believe these are terribly complicated changes, but I think they will make a big difference in usability.
Instead of trying to explain them with words, I made this mockup:
Updated by Peter Amstutz over 3 years ago
- Target version changed from 2021-09-15 sprint to 2021-09-29 sprint
Updated by Daniel Kutyła over 3 years ago
New version first commit: https://dev.arvados.org/projects/arvados-workbench-2/repository/revisions/c258ddf845adb99ef1af626036d31438fc5c0c70
Test run: developer-tests-workbench2: #481
Branch: 17585-Redesign-navigation-of-files-in-collections
New layout impl
Updated by Peter Amstutz about 3 years ago
Daniel Kutyła wrote:
New version first commit: https://dev.arvados.org/projects/arvados-workbench-2/repository/revisions/c258ddf845adb99ef1af626036d31438fc5c0c70
Test run: developer-tests-workbench2: #481
Branch: 17585-Redesign-navigation-of-files-in-collectionsNew layout impl
This is really great!
I only see one detail missing. If possible I'd like to see an right-pointing triangle or arrow added next to the currently selected folder on the left side, in order to make it even more clear that the folder that is selected on the left corresponds to the listing on the right.
Otherwise I think this is just about ready to merge.
Updated by Daniel Kutyła about 3 years ago
New version first commit: https://dev.arvados.org/projects/arvados-workbench-2/repository/revisions/3bb4ad6f8d2986a087cbfa3701b80887bab082ec
Test run: developer-tests-workbench2: #490
Branch: 17585-Redesign-navigation-of-files-in-collections
Added arrow to left panel for the selected folder
Updated by Peter Amstutz about 3 years ago
Daniel Kutyła wrote:
New version first commit: https://dev.arvados.org/projects/arvados-workbench-2/repository/revisions/3bb4ad6f8d2986a087cbfa3701b80887bab082ec
Test run: developer-tests-workbench2: #490
Branch: 17585-Redesign-navigation-of-files-in-collectionsAdded arrow to left panel for the selected folder
Perfect. This LGTM.
Updated by Daniel Kutyła about 3 years ago
- Status changed from In Progress to Resolved
- % Done changed from 0 to 100
Applied in changeset arvados-workbench-2:arvados-workbench2|a5f5a2ec8ae05ec2ad41dda0cd736dafe6cc669d.