Merge pull request #1156 from nextstrain/improve-tree-zoom-logic

Keep sources of the root of the zoomed-subtree in sync. Closes #1139
nextstrain · Jun 9, 2020 · aa9e36a · aa9e36a
2 parents 67a9fe3 + e288c6d
commit aa9e36a
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/components/tree/phyloTree/phyloTree.js b/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") */

diff --git a/src/components/tree/tree.js b/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 */