Virtualized tree for tracklist to support having thousands of tracks

[cmdcolin]

This is a draft PR for using a virtualized tree for large tracklist rendering

Demos

volvox
http://s3.amazonaws.com/jbrowse.org/code/jb2/virtualized_tree/index.html?config=test_data%2Fvolvox%2Fconfig.json

1000 genomes data
http://s3.amazonaws.com/jbrowse.org/code/jb2/virtualized_tree/index.html?config=https%3A%2F%2Fs3.amazonaws.com%2Fjbrowse.org%2Fgenomes%2FGRCh38%2F1000genomes%2Fconfig_1000genomes.json&session=share-SUK-mntGyB&password=eQF0F

Todos include restoring "Add track" and "Add connection" button, adding the "track actions" (...) after tracks, and possible user-interface prettying

Any early feedback welcome

Probably we will not have text wrapping as a compromise for simplicity, and we will have a slightly side-scrollable list

Fixes #728

[cmdcolin]

I tried adding a connection icon

Screenshot

I guess while it satisfies the outline we made in the previous comment, I feel like the ux is still a bit weird. I put it on a separate branch for now. My feeling is that it is a bit better without. My reasoning is that hamburger menu fits user expectation better, people who are interested can locate a hamburger menu, but for the 99% of users it does not concern them as much

Can try it out here once the codes are built

http://s3.amazonaws.com/jbrowse.org/code/jb2/virtualized_tree/index.html?config=test_data%2Fconfig.json&session=share-UkFYdJ9r1B&password=ZI3H7

http://s3.amazonaws.com/jbrowse.org/code/jb2/virtualized_tree_connect_icon/index.html?config=test_data%2Fconfig.json&session=share-UkFYdJ9r1B&password=ZI3H7

[cmdcolin]

I went ahead and merged the power icon drop down for the connections after talked with @elliothershberg

It now also pops up a dialog to toggle connections on and off

The space was too cramped I think to properly toggle them via a submenu of that dropdown and any reasonably long connection name would go offscreen

[cmdcolin]

The connection tracks are also loaded into a separate tree root (mentioned on call) so that the connection tracks live in a separate hierarchy from the rest of the tracks now

Here is a small gallery

[elliothershberg]

I'm looking over this now after pairing with @cmdcolin and thinking about any feedback from a usability perspective. I think overall, as @rbuels pointed out, this is a big performance win as track lists scale.

A few smaller details:

1. The floating "+" button could probably get bumped up a little bit, it bumps against the scroll bar that shows up for me (tiny pixel pushing detail 😆)

2. In the dialog boxes, is it redundant to have the close button and the "x" icon in the top right?

3. Does this implementation require having the new top level tracks part of the hierarchy?

vs.

On that note, would it possible to give a little bottom margin to the individual sections so that there is a bit more breathing room between things? If it would be hacky to implement, might not be worth it.

Those are the only small points I have on the UI. Always good to improve performance 💪

[cmdcolin]

1. can do
2. I think the duplication shouldn't be too bad...there are just three ways to close dialog (X icon, Close button, clicking outside the dialog....kinda silly but shouldn't cause too much cognitive overhead)
3. While I understand there is a design difference here, I think it may be good to keep the "Tracks" hierarchy, because it allows you to actually collapse all of the main "Tracks", and then only expand connection tracks. see above screenshot https://user-images.githubusercontent.com/6511937/114908911-90ab8500-9dea-11eb-8670-5b98a903ec19.png