Improve "Settings" tab UI

[JobLeonard]

Currently the navbar and settings tab have some warts that I'd like to fix

• both the navbar and settings tab constantly take up a lot of space
  • the navbar takes up a whole row for just a few links to other views and the list of datasets.
  • on desktops this leaves a large empty row
  • on smaller screens this navbar collapses, and still leaves a large, empty row
  • the settings tab takes up a whole column, which depending on the context also leaves a lot to be desired.
  • on desktops they leave a lot of empty space below them.
  • on smaller screens the settings are larger than the, and scrolling down makes the plots disappear.
• most of the drop-downs are much too long to be easy to navigate
  • replacing them with react-virtualised-select would help as it would make it possible to type-to-find options, as well as add autocomplete
  • most of these use the DropDown component I made that generates a dropdown with dispatching items based on a set of arrays. If I implement react-virtualized-select here we will basically get this feature for free just about everywhere in our interface

Proposals to fix:

• [ ] combine navbar and settings tab
  • [ ] implement link back to dataset list
  • [ ] implement links to other views (dropdown?)
• [ ] make the settings tab collapsible to the left, to maximise screen space for plot
• [x] implement a sensible scrolling setting for when the settings are larger than the screen
• [x] replace current drop downs with reac-virtualized-select where sensible

[JobLeonard]

This might help:

http://golden-layout.com/

[JobLeonard]

React 16 (which we're using) makes it easier to handle create and control pop-up windows:

https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202

This would allow for an (optional) dedicated pop-up rendering the heatmap, scatterplots and bar charts in their own window, while still be controlled by the main app. This would be useful in multi-monitor set-ups.

An added advantage of that is that printing the pop-up window would let you print these charts without the settings tab (scatterplots would need a legend div though). Also, in the case of bar charts, our current way of handling scrolling means we can't show all bar charts at any given time. Putting them in a separate pop-up would also solve that.

Also, it looks super-trivial.