Keep sources of the root of the zoomed-subtree in sync. Closes #1139

We keep track of the root-node of the currently selected subtree within auspice via two pieces of state: `idxOfInViewRootNode` (redux state) and `zoomNode` (phylotree state). They were out-of-sync when loading a tree in a zoomed state, which resulted in the inability to zoom out via clicking on a basal branch. This commit fixes this bug. It would be better to only store this state in one place.

src/components/tree/phyloTree/phyloTree.js

@@ -11,7 +11,7 @@ import * as confidence from "./confidence";
 import * as labels from "./labels";
 
 /* phylogenetic tree drawing function - the actual tree is rendered by the render prototype */
-const PhyloTree = function PhyloTree(reduxNodes, id) {
+const PhyloTree = function PhyloTree(reduxNodes, id, idxOfInViewRootNode) {
   this.grid = false;
   this.attributes = ['r', 'cx', 'cy', 'id', 'class', 'd'];
   this.params = createDefaultParams();
@@ -40,7 +40,7 @@ const PhyloTree = function PhyloTree(reduxNodes, id) {
   setYValues(this.nodes);
   this.xScale = scaleLinear();
   this.yScale = scaleLinear();
-  this.zoomNode = this.nodes[0];
+  this.zoomNode = this.nodes[idxOfInViewRootNode];
   this.strainToNode = {};
   this.nodes.forEach((phylonode) => {this.strainToNode[phylonode.n.name] = phylonode;});
   /* debounced functions (AFAIK you can't define these as normal prototypes as they need "this") */

src/components/tree/tree.js

@@ -44,7 +44,7 @@ class Tree extends React.Component {
   setUpAndRenderTreeToo(props, newState) {
     /* this.setState(newState) will be run sometime after this returns */
     /* modifies newState in place */
-    newState.treeToo = new PhyloTree(props.treeToo.nodes, "RIGHT");
+    newState.treeToo = new PhyloTree(props.treeToo.nodes, "RIGHT", props.treeToo.idxOfInViewRootNode);
     if (attemptUntangle) {
       untangleTreeToo(newState.tree, newState.treeToo);
     }
@@ -53,7 +53,7 @@ class Tree extends React.Component {
   componentDidMount() {
     if (this.props.tree.loaded) {
       const newState = {};
-      newState.tree = new PhyloTree(this.props.tree.nodes, "LEFT");
+      newState.tree = new PhyloTree(this.props.tree.nodes, "LEFT", this.props.tree.idxOfInViewRootNode);
       renderTree(this, true, newState.tree, this.props);
       if (this.props.showTreeToo) {
         this.setUpAndRenderTreeToo(this.props, newState); /* modifies newState in place */