Improve React-PhyloTree interface

[jameshadfield]

Instead of React reaching in and calling the appropriate prototype (updateDistance, updateMultipleArray, etc), a single prototype is available - phylotree.change() - which combines all requested changes (branch thicknesses, visibility, distance etc) into a single D3 call per class (".tip", ".branch" etc). This prevents bugs where multiple D3 update methods were called in quick succession and interfered with each other. It also improves the aesthetics of transitions as all changes are done in the same transition rather than using setTimeout to effectively queue them up.

phylotree.change() API examples

• phylotree.change({newDistance: "num_date"})
• phylotree.change({newLayout: "rect"})
• phylotree.change({changeVisibility: true, visibility: <array>})
• phylotree.change({changeColorBy: true, stroke: <array>, fill: <array>})

Furthermore, all of these can be combined into a single smooth transition, e.g.

• phylotree.change({newDistance: "num_date", newLayout: "rect", changeVisibility: true, visibility: <array>, changeColorBy: true, stroke: <array>, fill: <array>})

Additional changes

• The layout change transition has been improved (in my opinion)
• url query changes via the narrative result in a single action (down from 5)
• computeResponsive has been sped up as it no longer queries the DOM causing a forced reflow (stop computeResponsive causing a forced reflow #499)
• There is 500 lines of deprecated phylotree code which can be removed at some point (it's not referenced anywhere so won't appear in the production bundle).

cc @trvrb @rneher. Online at auspice-dev.herokuapp.com.

[jameshadfield]

here's an example of simultaneously changing the layout, tree metric & color-by:

[trvrb]

@jameshadfield: I like this direction a lot. I think this is much clearer than updateMultipleArray. Code looks good in general, though didn't do a comprehensive review. I did do a couple tests to confirm performance and this aspect looks great.

On master I'm getting a 215ms color change for Ebola and 45ms ticks for animation, while on react-d3-interface I'm getting a 185ms color change and 30ms animation ticks. This is a fantastic improvement.

This is ready to merge from my perspective. @rneher: Let us know if you have any issues; you're much closer to phyloTree.

[jameshadfield]

👍