Bug #17114

For large shared projects wb2 is loading very slow

Added by Daniel Kutyła 12 days ago. Updated about 16 hours ago.

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

0%

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

Description

App tends to create a lot of html nodes and removes them after some time this makes it unresponsive and slow

filter-tree-original.png (18.6 KB) filter-tree-original.png Lucas Di Pentima, 11/24/2020 07:02 PM
filter-tree-broken.png (18.9 KB) filter-tree-broken.png Lucas Di Pentima, 11/24/2020 07:02 PM

Subtasks

Task #17115: Review 17114-side-panel-tree-as-listIn ProgressDaniel Kutyła

History

#1 Updated by Peter Amstutz 9 days ago

From discussion:

  • Showing 100s or 1000s of nodes into the tree isn't good UI, could limit the number of nodes to make tree more efficient
  • Seems like it builds the whole tree (?) and then collapses nodes, lots of overhead for nodes never visible
  • Tree is built using a very inefficient method that makes many copies and creates lots of garbage
  • Could migrate to virtual tree component that we use for file listing

#2 Updated by Lucas Di Pentima 9 days ago

If we're going to allow showing projects in the order of 1000 or more, a virtual list will be needed nevertheless, because AFAIR on the file listing case, it used to get really slow with not so many files.

Here're some metrics: https://dev.arvados.org/issues/15610#note-26

OTOH I like Peter's suggestion on not rendering under "shared with me" (for example) more than 50 elements or something like that, but I think the UI has to be very clear as to why it isn't rendering the rest, or maybe if there're more than N, take the user to the main "shared with me" panel UI and not render that branch of the tree.

#3 Updated by Peter Amstutz 9 days ago

FWIW, React Material UI has a Tree View in the "Lab" section, which means it isn't a core component. That's probably why it the original WB2 team built their own.

https://material-ui.com/components/tree-view/

We could look into this one, but the virtualized tree component we adopted for the file browser might still be even better.

#4 Updated by Peter Amstutz 7 days ago

  • Target version changed from 2020-11-18 to 2020-12-02 Sprint

#6 Updated by Lucas Di Pentima about 16 hours ago

Reviewing arvados-workbench2|8fd2c92
Branch 17114-side-panel-tree-as-list

  • The Tree component is used on several parts, including the “type filter selector” on DataExplorer UIs. As you can see on the attached screenshots, that selector is now broken because the user cannot select which kind of process or data collection to show.

Also available in: Atom PDF