Implement a better UI approach to "settings"/"preferences"

[fedarko]

The approach of just having a ton of buttons isn't very scalable when adding new features. Ideally we'd have something like a dropdown bar that pops open dialogs, but maybe we could use one or two buttons + a series of dialogs to handle that?

Say we want to allow the user to determine the factors that color nodes (by G/C content, depth, etc). How could this be done intuitively and without taking up a ton of top-bar menu space?

[fedarko]

Take a close look at https://github.com/bdparrish/cytoscape.js-toolbar. Consider having the graph cover the entire vertical browser height, but having the left side (say, 20% or so) of the screen be taken up by a small HTML toolbar with collapsable stuff.

If we could omit jQuery, actually... that'd be kind of nice. But certainly not necessary. Just play around with stuff.

Actually tie this in with #68, if possible -- once we get a better toolbar set up, we can use that to supplant messy dialogs for a lot of stuff (it'll make searching, for one thing, a lot easier).

[fedarko]

Concept diagram of what a control panel could look like, with all the current AsmViz controls included --

[fedarko]

also, the controls div needs to be scaled using bootstrap or something so that it works on small-screen devices. screenshot from my phone illustrating why a constant 20% width isn't great on small devices:

(anecdotally, the controls div works fine when I switch to landscape mode for my phone)

[fedarko]

Ah, so it seems enforcing a width of, say, 20em (whatever the max width of the content in the controls div is) would afford us the small-screen capabilities we'd need. And then we could just add some sort of "toggle" button (similar to that of the controls thing in this demo) to ensure that the user can switch the controls on or off (we'd need to call cy.resize() in the toggle section, I think).

[fedarko]

Done! The controls div can now be toggled, and the cy div changes width accordingly. Cool.

[fedarko]

We might want to consider implementing some buttons (fitting, collapsing, ...) as stand-alone absolutely-positioned buttons with a high z-index, similar to how we've placed the controls toggling button (similar to how the wine and cheese map, another Cytoscape.js demo, does it, and somewhat similar to how Google Maps positions zooming/etc. info in the bottom-right corner of the interface).

This would make it easier to interact with the graph while it's at its full width, without compromising display on small screens if we do this right.

[fedarko]

We still have a way to go on improving the UI, but I'd say that this has been supplanted by #137, #138, #139, #140, and will continue to be supplanted by other small issues for things.

[fedarko]

Updating this after the fact to comment that the controls div toggling stuff works SO WELL on my phone it's crazy. I'm really, really excited about this.