Improve rendering performance

[sehilyi]

Some Initial Thoughts

• Using HiGlass' data structure largely allows us to render visualization w/o too much cost because it pre-aggregates data and send Gosling the manageable amount of data values to display. But, still, improving rendering performance is really important (e.g., using many number of tracks w/ non-higlass data will significantly degrade the performance).
• Performance can be largely improved If we render texture (sprite), instead of individual graphical elements, and stretch them upon zooming in/out until getting new tiles. Some challenges:
  • Not straightforward to apply this concept in circular layouts
  • Some marks (text and circles) would result in ugly or even unreadable appearance
  • We still need to update subset of graphical elements if mark-level visibility options are being used (i.e., visibility: [{..., target: "mark" }])
• Sharing the same texture for identical-looking visual marks would be another option (Example)
  • e.g., use the same texture for the same color bars and just resize them.
• Linking multiple higlass views looks to significantly decrease the zooming/panning performance
• This rendering performance is especially important for dense matrix visualization (#38)
• A constant/related problem that we encounter: https://github.com/gosling-lang/gosling.js/issues/230

Resources

• web worker
• SpriteBatches: http://rbwhitaker.wikidot.com/spritebatch-basics
• https://mattdesl.svbtle.com/drawing-lines-is-hard