Improve draw (#400)

* rectangular * max height * finished layout * STY: Add style * TST: Add tests * DOC: Update documentation * added unrooted * added console * ENH: Remove print statement * ENH: first draft of JS circular layout! * MNT: remove max_clradius from python circ layout (wasn't getting used anywhere. why was i keeping track of this lol) * STY: prettify * STY: jshint and prettier fixes * DOC: add note about root and repositioning * TST: port one of the circ layout test cases to js * TST: support+test circ layout for 1-child nodes Progress on #184. Since it looks like the unrooted layout handles these properly, all that's left for this issue should be just not drawing arcs for internal nodes with 1 child. Should be doable by modifying the js circular layout to give 1-child nodes -1 for their arc / angle values or something to signal to empress.js to not bother with arcs. * ENH: parameterize circular layout a bit related to #271, but needs extending to other layouts * PERF: rip out JS rect/circ layout scaling code I was having precision issues with the circular layout scaling (tldr: Math.cos(Math.PI / 2) is very close to but not quite 0, so it was messing up the max / min X computation), but this makes it so we shouldn't have to even worry about things for this case. * MNT: rip out now-unused scaling code in layouts * DOC: add tmp note abt vertical lines & rect layout * DOC: add note about root shifting and xr * TST: unbreak rect layout tests & port some docs * TST: unbreak bit of the c. layout tests * perf boost * TST: unbreak vert. straight-line circ layout test Close to making sure #184 is done :) * TST: unbreak another circ layout test Gonna say that this closes #184. * TST: finish unbreaking circ layout tests :3 Closes #184! I forget if i already did that so i'm doing it again. * TST: test no-root-length case in circ layout * TST: Add branch length preservation test The JS circular layout is now officially fully tested! Nice. * STY: prettify * TST: Add ignoreLengths test * TST: Test > 2pi start angle and ignoreLengths Verifies that big start angles don't break things, and that the two params play nicely * code before removing interations * finsished unrooted * removed names (need tests) * need to verify tests * removed coords * checkpoint before opt _proj * ENH: Remove layouts from Python All layout code is now implemented in JavaScript so we no longer need this here. ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒░░▒▒░░▒▒░░▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒░░▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒░░░░▒▒░░▒▒░░▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒ ▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒░░░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░ ░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒░░ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░░░░░▒▒▒▒▒▒▒▒ ▒▒▒▒▓▓▒▒▒▒ ▒▒▒▒▒▒░░░░▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒░░ ░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ░░▒▒▒▒▒▒░░ ▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒ ░░░░ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ░░▓▓▓▓▒▒ ░░ ▓▓▓▓ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ░░▓▓ ▓▓░░ ▓▓ ▓▓▓▓ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▓▓░░ ▒▒▒▒ ░░▓▓ ▓▓ ▓▓▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒ ▓▓▒▒ ▒▒▓▓ ░░▓▓ ▓▓ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▓▓░░ ▓▓▒▒ ░░▓▓ ░░▓▓ ▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒░░▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▓▓ ▓▓░░ ░░▓▓ ░░ ░░▓▓ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▓▓ ░░ ░░ ░░▓▓░░ ▒▒▒▒ ░░ ░░▓▓ ░░▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▓▓▓▓▓▓▓▓▓▓▒▒░░▓▓▓▓░░ ░░▓▓▒▒▒▒ ▓▓▓▓▓▓ ▒▒▓▓▓▓ ░░▓▓░░ ▓▓ ▒▒░░ ▓▓ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▓▓ ▓▓ ▓▓░░░░▒▒ ▓▓░░▒▒▒▒ ▒▒▒▒▒▒▓▓ ▓▓▒▒ ▒▒░░▓▓░░▒▒▒▒ ░░▓▓▒▒▒▒ ░░▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▓▓ ▓▓ ▓▓░░░░▒▒ ▓▓ ▒▒▒▒ ▓▓ ▓▓▒▒ ▓▓ ▓▓ ▓▓░░▓▓░░░░▓▓▒▒▓▓ ▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒░░ ░░▓▓ ▓▓░░▒▒▒▒ ▓▓ ▓▓░░░░▓▓░░▓▓▒▒ ░░▓▓░░▓▓░░ ▓▓▒▒▓▓ ▓▓▓▓▓▓░░ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▓▓▒▒░░▓▓▓▓ ▓▓▓▓▓▓ ▓▓▓▓▓▓ ░░▓▓▓▓░░▓▓░░ ░░▓▓▓▓▒▒ ▓▓▓▓▒▒ ▓▓▓▓ ▒▒░░ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒░░▓▓ ▒▒░░ ░░ ▒▒░░ ░░░░ ░░ ▒▒▓▓ ▓▓▒▒▒▒▓▓░░ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▓▓▒▒▒▒▓▓▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒ ░░░░ ▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ░░▒▒░░ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒ ▒▒▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▓▓ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▓▓▒▒▒▒▒▒▒▒▒▒▓▓▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓██████████████████▓▓████▓▓████████▓▓▓▓▓▓██▓▓▓▓▓▓▓▓▓▓▓▓████▓▓▓▓████████▓▓████████████████▓▓████████████████████████████████▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒▒▒▓▓▓▓▓▓▒▒▓▓▒▒▒▒▓▓▓▓▒▒▒▒▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒▓▓▒▒▓▓▓▓▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▒▒▓▓▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▒▒▓▓▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ * ENH: Fix test_core.py tests to remove test_data * STY: Fix stylechecks * replaced all _nameToKeys * fixed tests * finished tests * finished tests * prettified * style * Apply suggestions from code review Co-authored-by: Yoshiki Vázquez Baeza <[email protected]> Co-authored-by: Marcus Fedarko <[email protected]> * linted * Apply suggestions from code review Co-authored-by: Marcus Fedarko <[email protected]> * compute layout on demand * addressed comments * error in .travis.yml * fixed test * pinned prettier to 2.0.5 * switch to index buffers * compress rgb * addressed comments * checkpoint * check point * fixed all buffers? * added console.log * checkpoint * merged with master * finished tests * removed unused function * addressed @fedarko comments * Apply suggestions from code review Co-authored-by: Marcus Fedarko <[email protected]> * addressed @fedarko's comments * fixed style * fixed export svg tree * fixed collapse clade issue * Apply suggestions from code review Co-authored-by: Marcus Fedarko <[email protected]> * addressed @fedarko's comments * changed default color * addressed @fedarko's comments Co-authored-by: Yoshiki Vázquez Baeza <[email protected]> Co-authored-by: Marcus Fedarko <[email protected]> Co-authored-by: Yoshiki Vázquez Baeza <[email protected]> Co-authored-by: Marcus Fedarko <[email protected]>
biocore · Nov 5, 2020 · fd159e1 · fd159e1
1 parent 26f1b02
commit fd159e1
Show file tree

Hide file tree

Showing 14 changed files with 562 additions and 479 deletions.
diff --git a/empress/support_files/js/barplot-layer.js b/empress/support_files/js/barplot-layer.js
@@ -246,7 +246,7 @@ define([
             color: this.initialDefaultColorHex,
             change: function (newColor) {
                 // To my knowledge, there isn't a straightforward way of
-                // getting an RGB array out of the "TinyColor" values passed in
+                // getting an RGB number out of the "TinyColor" values passed in
                 // by Spectrum: see
                 // https://bgrins.github.io/spectrum#details-acceptedColorInputs
                 scope.defaultColor = Colorer.hex2RGB(newColor.toHexString());

diff --git a/empress/support_files/js/barplot-panel-handler.js b/empress/support_files/js/barplot-panel-handler.js
@@ -136,8 +136,8 @@ define([
         // next to each other).
         this.useBorders = false;
 
-        // Borders (when enabled) default to white. (This is an RGB array.)
-        this.borderColor = [1, 1, 1];
+        // Borders (when enabled) default to white. (This is an RGB number.)
+        this.borderColor = Colorer.rgbToFloat([255, 255, 255]);
 
         // ... and to having a length of whatever the default barplot layer
         // length divided by 2 is :)
@@ -264,17 +264,12 @@ define([
     BarplotPanel.prototype.initBorderOptions = function () {
         var scope = this;
 
-        // this.borderColor is always a RGB array, for the sake of everyone's
+        // this.borderColor is always a RGB number, for the sake of everyone's
         // sanity. However, spectrum requires that the specified color is a hex
         // string: so we have to convert it to hex first here (only to later
         // convert it back to RGB on change events). Eesh!
-        // A SILLY NOTE: Apparently chroma.gl() modifies the input RGB array if
-        // you pass it in directly, converting it into a weird thing that
-        // is represented in the browser console as "(4) [255, 255, 255,
-        // undefined, _clipped: false, _unclipped: Array(3)]". Unpacking the
-        // input array using ... (as done here with this.borderColor) seems to
-        // avoid this problem.
-        var startingColor = chroma.gl(...this.borderColor).hex();
+        var borderColor = Colorer.unpackColor(this.borderColor);
+        var startingColor = chroma.gl(...borderColor).hex();
 
         $(this.borderColorPicker).spectrum({
             color: startingColor,

diff --git a/empress/support_files/js/colorer.js b/empress/support_files/js/colorer.js
@@ -327,17 +327,46 @@ define(["chroma", "underscore", "util"], function (chroma, _, util) {
 
     /**
      * Returns a mapping of unique field values to their corresponding colors,
-     * where each color is in RGB array format.
+     * where each color is in RGB number format.
      *
      * @return{Object} rgbMap An object mapping each item in
      *                 this.sortedUniqueValues to its assigned color. Each
-     *                 color is represented by an array of [R, G, B], where R,
-     *                 G, B are all floats scaled to within the range [0, 1].
+     *                 color is represented by a number (see rgbToFloat()).
      */
     Colorer.prototype.getMapRGB = function () {
         return _.mapObject(this.__valueToColor, Colorer.hex2RGB);
     };
 
+    /**
+     * Compresses a color array of the form [red, green, blue], where each
+     * element is in the range of [0, 255], into a single number.
+     *
+     * @param{Array} rgb The color array. The element in the array must in the
+     *                   range of [0, 255].
+     *
+     * @return{Number} the compressed color to be used in WebGl shaders
+     */
+    Colorer.rgbToFloat = function (rgb) {
+        return rgb[0] + rgb[1] * 256 + rgb[2] * 256 * 256;
+    };
+
+    /**
+     * Uncompress a RGB color encoded as a float (eg the output of rgbToFloat).
+     * This is the same function found in the WebGl shaders.
+     * However, functions in WebGl shaders cannot be called by js functions and
+     * vice versa.
+     */
+    Colorer.unpackColor = function (f) {
+        var color = [];
+        // red
+        color[0] = f % 256.0;
+        // green
+        color[1] = ((f - color[0]) / 256.0) % 256.0;
+        // blue
+        color[2] = (f - color[0] - 256.0 * color[1]) / 65536.0;
+        return color;
+    };
+
     /**
      * Returns a mapping of unique field values to their corresponding colors,
      * where each color is in hex format.
@@ -379,17 +408,18 @@ define(["chroma", "underscore", "util"], function (chroma, _, util) {
     };
 
     /**
-     * Converts a hex color to an RGB array suitable for use with WebGL.
+     * Converts a hex color to an RGB float suitable for use with WebGL.
      *
      * @param {String} hexString
-     * @return {Array} rgbArray
+     * @return {Float} rgb
      * @classmethod
      */
     Colorer.hex2RGB = function (hexString) {
         // chroma(hexString).gl() returns an array with four components (RGBA
         // instead of RGB). The slice() here strips off the final (alpha)
         // element, which causes problems with Empress' drawing code.
-        return chroma(hexString).gl().slice(0, 3);
+        var rgb = chroma(hexString).rgb().slice(0, 3);
+        return Colorer.rgbToFloat(rgb);
     };
 
     /**

diff --git a/empress/support_files/js/drawer.js b/empress/support_files/js/drawer.js
@@ -1,17 +1,26 @@
-define(["glMatrix", "Camera"], function (gl, Camera) {
+define(["underscore", "glMatrix", "Camera"], function (_, gl, Camera) {
     //  Shaders used in Drawer
     var vertShaderTxt = [
         "precision mediump float;",
         "",
         "attribute vec2 vertPosition;",
         "uniform mat4 mvpMat;",
-        "attribute vec3 color;",
+        "attribute float color;",
         "varying vec3 c;",
         "uniform float pointSize;",
         "",
+        "vec3 unpackColor(float f) {",
+        "  vec3 color;",
+        "  color.r = mod(f, 256.0);",
+        "  color.g = mod((f - color.r) / 256.0, 256.0);",
+        "  color.b = (f - color.r - (256.0 * color.g)) / (65536.0);",
+        "  // rgb are in range [0...255] but they need to be [0...1]",
+        "  return color / 255.0;",
+        "}",
+        "",
         "void main()",
         "{",
-        "  c = color;",
+        "  c = unpackColor(color);",
         "  gl_Position = mvpMat * vec4(vertPosition, 0.0, 1.0);",
         "  gl_PointSize = pointSize;",
         "}",
@@ -50,10 +59,11 @@ define(["glMatrix", "Camera"], function (gl, Camera) {
         this.treeContainer = document.getElementById("tree-container");
         this.contex_ = canvas.getContext("webgl");
         this.cam = cam;
-        this.VERTEX_SIZE = 5;
+        this.VERTEX_SIZE = 3;
+        this.COORD_SIZE = 2;
 
         // sets empress to light mode
-        this.CLR_COL = 1;
+        this.CLR_COL = [1, 1, 1];
 
         // the center of the viewing window in tree coordinates
         this.treeSpaceCenterX = null;
@@ -71,6 +81,9 @@ define(["glMatrix", "Camera"], function (gl, Camera) {
         this.SELECTED_NODE_CIRCLE_DIAMETER = 9.0;
 
         this.showTreeNodes = false;
+
+        // the valid buffer types used in bindBuffer()
+        this.BUFF_TYPES = [1, 2, 3];
     }
 
     /**
@@ -90,7 +103,7 @@ define(["glMatrix", "Camera"], function (gl, Camera) {
         }
 
         // initialze canvas to have fully white background
-        c.clearColor(this.CLR_COL, this.CLR_COL, this.CLR_COL, 1);
+        c.clearColor(...this.CLR_COL, 1);
         c.clear(c.COLOR_BUFFER_BIT | c.DEPTH_BUFFER_BIT);
 
         // create webGL program
@@ -111,9 +124,13 @@ define(["glMatrix", "Camera"], function (gl, Camera) {
         s.isSingle = c.getUniformLocation(s, "isSingle");
         s.pointSize = c.getUniformLocation(s, "pointSize");
 
-        // buffer object for tree
-        s.treeVertBuff = c.createBuffer();
-        this.treeVertSize = 0;
+        // buffer object for tree coordinates
+        s.treeCoordBuff = c.createBuffer();
+        this.treeCoordSize = 0;
+
+        // buffer object to store tree color
+        s.treeColorBuff = c.createBuffer();
+        this.treeColorSize = 0;
 
         // buffer object used to thicken node lines
         s.thickNodeBuff = c.createBuffer();
@@ -222,50 +239,74 @@ define(["glMatrix", "Camera"], function (gl, Camera) {
 
     /**
      * Binds the buffer so WebGL can use it.
+     * There are three types of buffers:
+     *   type 1: contains both coordinates and color
+     *   type 2: only coordinates
+     *   type 3: only color
      *
      * @param {WebGLBuffer} buffer The Buffer to bind
+     * @param {Number} buffType The type of buffer to bind
+     * @param {Number} vertSize The size of the vertex for webgl
      */
-    Drawer.prototype.bindBuffer = function (buffer) {
-        // defines constants for a vertex. A vertex is the form [x, y, r, g, b]
-        const COORD_SIZE = 2;
+    Drawer.prototype.bindBuffer = function (buffer, buffType, vertSize) {
+        if (!_.contains(this.BUFF_TYPES, buffType)) {
+            throw "Invalid buffer type";
+        }
+
+        // defines constants for a vertex. A vertex is the form [x, y, rgb]
         const COORD_OFFSET = 0;
-        const COLOR_SIZE = 3;
-        const COLOR_OFFSET = 2;
+        const COLOR_SIZE = 1;
+        const COLOR_OFFSET = buffType == 1 ? 2 : 0;
 
         var c = this.contex_;
         var s = this.sProg_;
 
         // tell webGL which buffer to use
         c.bindBuffer(c.ARRAY_BUFFER, buffer);
 
-        c.vertexAttribPointer(
-            s.vertPosition,
-            COORD_SIZE,
-            c.FLOAT,
-            c.FALSE,
-            this.VERTEX_SIZE * Float32Array.BYTES_PER_ELEMENT,
-            COORD_OFFSET
-        );
+        if (buffType == 1 || buffType == 2) {
+            c.vertexAttribPointer(
+                s.vertPosition,
+                this.COORD_SIZE,
+                c.FLOAT,
+                c.FALSE,
+                vertSize * Float32Array.BYTES_PER_ELEMENT,
+                COORD_OFFSET
+            );
+        }
 
-        c.vertexAttribPointer(
-            s.color,
-            COLOR_SIZE,
-            c.FLOAT,
-            c.FALSE,
-            this.VERTEX_SIZE * Float32Array.BYTES_PER_ELEMENT,
-            COLOR_OFFSET * Float32Array.BYTES_PER_ELEMENT
-        );
+        if (buffType == 1 || buffType == 3) {
+            c.vertexAttribPointer(
+                s.color,
+                COLOR_SIZE,
+                c.FLOAT,
+                c.FALSE,
+                vertSize * Float32Array.BYTES_PER_ELEMENT,
+                COLOR_OFFSET * Float32Array.BYTES_PER_ELEMENT
+            );
+        }
+    };
+
+    /**
+     * Fills the buffer used to draw the tree.
+     *
+     * @param {Array} data The coordinates [x, y, ...] to fill treeCoordBuffr
+     */
+    Drawer.prototype.loadTreeCoordsBuff = function (data) {
+        data = new Float32Array(data);
+        this.treeCoordSize = data.length / 2;
+        this.fillBufferData_(this.sProg_.treeCoordBuff, data);
     };
 
     /**
      * Fills the buffer used to draw the tree
      *
-     * @param {Array} data The coordinate and color data to fill tree buffer
+     * @param {Array} data The color data to fill treeColorBuff
      */
-    Drawer.prototype.loadTreeBuff = function (data) {
+    Drawer.prototype.loadTreeColorBuff = function (data) {
         data = new Float32Array(data);
-        this.treeVertSize = data.length / 5;
-        this.fillBufferData_(this.sProg_.treeVertBuff, data);
+        this.treeColorSize = data.length;
+        this.fillBufferData_(this.sProg_.treeColorBuff, data);
     };
 
     /**
@@ -275,7 +316,7 @@ define(["glMatrix", "Camera"], function (gl, Camera) {
      */
     Drawer.prototype.loadThickNodeBuff = function (data) {
         data = new Float32Array(data);
-        this.thickNodeSize = data.length / 5;
+        this.thickNodeSize = data.length / this.VERTEX_SIZE;
         this.fillBufferData_(this.sProg_.thickNodeBuff, data);
     };
 
@@ -287,7 +328,7 @@ define(["glMatrix", "Camera"], function (gl, Camera) {
      */
     Drawer.prototype.loadBarplotBuff = function (data) {
         data = new Float32Array(data);
-        this.barplotSize = data.length / 5;
+        this.barplotSize = data.length / this.VERTEX_SIZE;
         this.fillBufferData_(this.sProg_.barplotBuff, data);
     };
 
@@ -298,7 +339,7 @@ define(["glMatrix", "Camera"], function (gl, Camera) {
      */
     Drawer.prototype.loadSelectedNodeBuff = function (data) {
         data = new Float32Array(data);
-        this.selectedNodeSize = data.length / 5;
+        this.selectedNodeSize = data.length / this.VERTEX_SIZE;
         this.fillBufferData_(this.sProg_.selectedNodeBuff, data);
     };
 
@@ -309,7 +350,7 @@ define(["glMatrix", "Camera"], function (gl, Camera) {
      */
     Drawer.prototype.loadNodeBuff = function (data) {
         data = new Float32Array(data);
-        this.nodeSize = data.length / 5;
+        this.nodeSize = data.length / this.VERTEX_SIZE;
         this.fillBufferData_(this.sProg_.nodeVertBuff, data);
     };
 
@@ -320,7 +361,7 @@ define(["glMatrix", "Camera"], function (gl, Camera) {
      */
     Drawer.prototype.loadCladeBuff = function (data) {
         data = new Float32Array(data);
-        this.cladeVertSize = data.length / 5;
+        this.cladeVertSize = data.length / this.VERTEX_SIZE;
         this.fillBufferData_(this.sProg_.cladeBuff, data);
     };
 
@@ -367,26 +408,27 @@ define(["glMatrix", "Camera"], function (gl, Camera) {
         // draw tree node circles, if requested
         if (this.showTreeNodes) {
             c.uniform1f(s.pointSize, this.NODE_CIRCLE_DIAMETER);
-            this.bindBuffer(s.nodeVertBuff);
+            this.bindBuffer(s.nodeVertBuff, 1, 3);
             c.drawArrays(c.POINTS, 0, this.nodeSize);
         }
 
         // draw selected node
         c.uniform1f(s.pointSize, this.SELECTED_NODE_CIRCLE_DIAMETER);
-        this.bindBuffer(s.selectedNodeBuff);
+        this.bindBuffer(s.selectedNodeBuff, 1, 3);
         c.drawArrays(gl.POINTS, 0, this.selectedNodeSize);
 
         c.uniform1i(s.isSingle, 0);
-        this.bindBuffer(s.treeVertBuff);
-        c.drawArrays(c.LINES, 0, this.treeVertSize);
+        this.bindBuffer(s.treeCoordBuff, 2, 2);
+        this.bindBuffer(s.treeColorBuff, 3, 1);
+        c.drawArrays(c.LINES, 0, this.treeCoordSize);
 
-        this.bindBuffer(s.thickNodeBuff);
+        this.bindBuffer(s.thickNodeBuff, 1, 3);
         c.drawArrays(c.TRIANGLES, 0, this.thickNodeSize);
 
-        this.bindBuffer(s.barplotBuff);
+        this.bindBuffer(s.barplotBuff, 1, 3);
         c.drawArrays(c.TRIANGLES, 0, this.barplotSize);
 
-        this.bindBuffer(s.cladeBuff);
+        this.bindBuffer(s.cladeBuff, 1, 3);
         c.drawArrays(c.TRIANGLES, 0, this.cladeVertSize);
     };