Make all plots work again with the new <Canvas> component & redux architecture

[JobLeonard]

• [x] genescape
• [x] landscape
  • [x] figure out why two of the dropdowns are not working
• [x] heatmap
  • [x] make the manual width/height settings work without SET_VIEW_PROPS
  • [x] make it work properly with flexbox ( see #31 )
• [x] sparkline
  • [x] make it open without SET_VIEW_PROPS
  • [x] figure out what caused it to not work (bug from before I messed with it, relates to #11)

Overlaps with #28 and #31

[JobLeonard]

When I say sparkline is fixed I mean it's in the same broken state as it was before I touched it; I'd like to merge before digging in to fix it.

[JobLeonard]

Well, this is interesting... especially since Landscape seems to work just fine.

[JobLeonard]

Weirdness documented for posterity:

https://www.youtube.com/watch?v=ghaQw9P82-c

(this is exactly why I want to leave the size calculations to the browser, with the javascript size just listening in and dealing with the alloted width/height)

[JobLeonard]

Ok, finally we're making progress! Now all that needs to be figured out is why the plot doesn't fill the whole canvas

[JobLeonard]

After a week of struggling it is so satisfying to finally figure out how everything ties together I'm documenting the WIP just because.

[JobLeonard]

The fetchgene component is still messed up for some reason, but we're getting there:

https://www.youtube.com/watch?v=l3FVAg1ZLH8

[JobLeonard]

https://www.youtube.com/watch?v=gUV7JZjYs-g

I admit that the always-on vertical scrollbars are a bit ugly (the horizontal one should not be there), but it was the least-hackish way of making sure the sparkline "legend" on the top and bottom lined up with the actual sparklines used for the genes.

I used this trick for the scrolling, btw: http://codepen.io/JosephSilber/pen/HqgAz

[JobLeonard]

Ok, I think I have a handle on where the last Heatmap/Sparkline issues originate, namely the size calculations of the sparklines/heatmap. To make things more complicated, there are two unrelated problems (although luckily they are browser-specific).

Because I had only been testing in a 100% zoomed Chrome with no retina (so a window.devicePixelRatio of 1) these issues didn't appear, but look what happens when I change the zoom levels:

https://www.youtube.com/watch?v=D-AYrw7_ERg

What is going is that window.devicePixelRatio and zoom (which, to make things more complicated, are not the same as far as CSS layouting is concerned but are impossible to distinguish in JS) interact with the size calculation code. I need to compensate for that somehow; I'm already happy that I commented my code so heavily last week:

https://github.com/linnarsson-lab/Loom/blob/master/client/components/sparkline.js#[L30-L90]

The other issues are with Firefox where, despite being explicitly instructed to create a canvas at a smaller size, the canvas heights are all 784:

https://www.youtube.com/watch?v=OtU99znSwno

This probably has to do with layouting not being quite done by the time the canvas is mounted, leading to wrong sizes being passed down. A likely related issue is one of oversized canvases no longer being scaled down.

Basically, the canvas size interferes with the CSS layouting.

A solution could be to hide (unmount) the canvases until all other layouting is done, and only then mount them again, making the mounting/resizing of canvases a multi-step process Of course, to complicate matters, there is no obvious way for JS to know when the layout of the whole is done... I need to think about this a bit further. I will get the Safari/Chrome bugs fixed first though, since those seem to be the most used browsers in the research group

[JobLeonard]

Ok, I think I've fixed all of the above issues, but I haven't tried it on Safari or IE yet.

Sten, can you test and deploy if it works?

PS: I think I've also fixed most of the sparkline-view issues you brought up yesterday, except for the dropdowns still having strange CSS styling. Could you verify I didn't miss anything?

[JobLeonard]

There might still be some small bugs, but I think we can close this now that the biggest showstopper (leaky globals) has been closed.