Lasso Select

[JobLeonard]

We want to be able to select a subset of cells/genes from a scatterplot by drawing a polygon around them, and then do something with that selection.

Interface-wise, drawing and selecting similar to this d3 sketch would be nice:

http://bl.ocks.org/christophermanning/5020993

Things that need to be fixed before this can work

• coordinate projection needs to be bijective, that is: we need to be able to translate from raw data, to pixel position on canvas, to mouse-coordinates and back (otherwise we don't know which cells/genes to select)
  • has to work with linear or log scaled projection, in any combination for either axis
  • axes on the side of the canvas will reduce viewport of actual plot, which needs to be accounted for
• canvas interaction
  • mouse click and drag support
  • touch click and drag support
  • overrule normal website behaviour for both (we need to avoid scrolling, for example)
  • figure out how to dispatch state changes to redux, but not too often (since that will cause countless of rerenders for no good reason)
• figure out how to structure the data to keep track of these selections
• turn that into a way of filtering data
  • client-side (filter selection)
  • sending requests to server (find enriched genes for selection)

So yeah, quite the architectural design challenge, I think. If it's ok with you I'll take this slow and think hard about it to "try and get it right the first time", as one of the CompSci professors at my old Uni would always say (which is part of why I want to focus on other, more straightforward issues first: I'll get to work on this in the back of my head for a while).

[JobLeonard]

Mouse coordinates on canvas: HTML5 Canvas Mouse Coordinates

Idea for how to handle mouse input:

• normalise mouse coordinate to [0, 1] range; makes the remaining code independant of canvas pixel size
  • clip to viewport before normalisation (in case of axes or other margins on the canvas)
• project [0, 1] range back to original coordinates
  • for linear scale: multiply by appropriate factor
  • for log scale: N^mouse coordinate, where N is whatever base we use for the log (2, e, 10)

[JobLeonard]

react-keydown - might be useful for assigning hotkeys to a canvas that has focus - for example, using + and - to zoom to/ from mouse position on scatterplots.