Story #17585

Redesign navigation of files in collections

Added by Peter Amstutz 5 months ago. Updated 5 days ago.

Status:
In Progress
Priority:
Normal
Assigned To:
Category:
Workbench2
Target version:
Start date:
08/24/2021
Due date:
% Done:

0%

Estimated time:
(Total: 0.00 h)
Story points:
-

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.

wb2-file-browser.png (234 KB) wb2-file-browser.png Peter Amstutz, 09/10/2021 08:29 PM

Subtasks

Task #17835: ReviewIn ProgressDaniel Kutyła


Related issues

Related to Arvados Epics - Story #16944: WB2 collections page feature pairityNew10/01/202111/30/2021

Is duplicate of Arvados - Bug #17565: Add level-by-level expansion when browsing large collectionsNew

History

#1 Updated by Peter Amstutz 5 months ago

  • Description updated (diff)

#2 Updated by Peter Amstutz 4 months ago

  • Related to Story #16944: WB2 collections page feature pairity added

#3 Updated by Peter Amstutz 3 months ago

  • Target version set to 2021-07-21 sprint

#4 Updated by Peter Amstutz 3 months ago

  • Description updated (diff)

#5 Updated by Peter Amstutz 3 months ago

  • Target version changed from 2021-07-21 sprint to 2021-07-07 sprint

#6 Updated by Peter Amstutz 3 months ago

  • Assigned To set to Daniel Kutyła

#7 Updated by Peter Amstutz 3 months ago

  • Target version changed from 2021-07-07 sprint to 2021-07-21 sprint

#8 Updated by Peter Amstutz 2 months ago

  • Status changed from New to In Progress

#9 Updated by Peter Amstutz 2 months ago

  • Target version changed from 2021-07-21 sprint to 2021-08-04 sprint

#10 Updated by Peter Amstutz about 2 months ago

  • Target version changed from 2021-08-04 sprint to 2021-08-18 sprint

#11 Updated by Peter Amstutz about 1 month ago

  • Target version changed from 2021-08-18 sprint to 2021-09-01 sprint

#12 Updated by Daniel Kutyła about 1 month 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

#13 Updated by Peter Amstutz 28 days 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-collections

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

#14 Updated by Peter Amstutz 28 days 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.

#15 Updated by Lucas Di Pentima 28 days ago

I've created a couple of big-ish collections on ce8i5 for testing purposes, and shared with Daniel:

When ce8i5 gets #15430 applied, I'll make new versions with a lot more files.

#16 Updated by Peter Amstutz 20 days ago

  • Target version changed from 2021-09-01 sprint to 2021-09-15 sprint

#19 Updated by Peter Amstutz 11 days ago

  • Is duplicate of Bug #17565: Add level-by-level expansion when browsing large collections added

#21 Updated by Peter Amstutz 11 days ago

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:

#22 Updated by Peter Amstutz 6 days ago

  • Target version changed from 2021-09-15 sprint to 2021-09-29 sprint

Also available in: Atom PDF