colours are consistent between two trees. Closes #663

src/actions/loadData.js

@@ -82,7 +82,7 @@ export const loadTreeToo = (name, fields) => (dispatch, getState) => {
   fetchJSON(`${charonAPIAddress}request=additionalJSON&source=${oldState.controls.source}&url=${fields.join("/")}&type=tree`)
     .then((json) => {
       const newState = createTreeTooState({treeTooJSON: json.tree, oldState, segment: name});
-      dispatch({type: types.TREE_TOO_DATA, treeToo: newState.treeToo, controls: newState.controls, segment: name});
+      dispatch({type: types.TREE_TOO_DATA, segment: name, ...newState});
     })
     .catch((err) => console.error("Failed to fetch additional tree", err.message));
 };

src/actions/recomputeReduxState.js

@@ -575,27 +575,31 @@ export const createTreeTooState = ({
   /* TODO: reconsile choices (filters, colorBys etc) with this new tree */
   /* TODO: reconcile query with visibility etc */
   let controls = oldState.controls;
+  const tree = Object.assign({}, oldState.tree);
   let treeToo = treeJsonToState(treeTooJSON);
   treeToo.debug = "RIGHT";
-  controls = modifyStateViaTree(controls, oldState.tree, treeToo);
+  controls = modifyStateViaTree(controls, tree, treeToo);
   controls = modifyControlsViaTreeToo(controls, segment);
-  treeToo = modifyTreeStateVisAndBranchThickness(treeToo, oldState.tree.selectedStrain, undefined, controls);
+  treeToo = modifyTreeStateVisAndBranchThickness(treeToo, tree.selectedStrain, undefined, controls);
 
   /* calculate colours if loading from JSONs or if the query demands change */
-  const colorScale = calcColorScale(controls.colorBy, controls, oldState.tree, treeToo, oldState.metadata);
+  const colorScale = calcColorScale(controls.colorBy, controls, tree, treeToo, oldState.metadata);
   const nodeColors = calcNodeColor(treeToo, colorScale);
+  tree.nodeColors = calcNodeColor(tree, colorScale); // also update main tree's colours
+  tree.nodeColorsVersion++;
+
   controls.colorScale = colorScale;
   controls.colorByConfidence = checkColorByConfidence(controls.attrs, controls.colorBy);
   treeToo.nodeColorsVersion = colorScale.version;
   treeToo.nodeColors = nodeColors;
 
   treeToo.tangleTipLookup = constructVisibleTipLookupBetweenTrees(
-    oldState.tree.nodes, treeToo.nodes, oldState.tree.visibility, treeToo.visibility
+    tree.nodes, treeToo.nodes, tree.visibility, treeToo.visibility
   );
 
   // if (tipSelectedIdx) { /* i.e. query.s was set */
   //   tree.tipRadii = calcTipRadii({tipSelectedIdx, colorScale: controls.colorScale, tree});
   //   tree.tipRadiiVersion = 1;
   // }
-  return {treeToo, controls};
+  return {tree, treeToo, controls};
 };

src/components/tree/reactD3Interface/change.js

@@ -82,6 +82,10 @@ export const changePhyloTreeViaPropsComparison = (mainTree, phylotree, oldProps,
   if (oldProps.width !== newProps.width || oldProps.height !== newProps.height) {
     args.svgHasChangedDimensions = true;
   }
+  if (mainTree && oldProps.showTreeToo !== newProps.showTreeToo) {
+    args.svgHasChangedDimensions = true;
+  }
+
   const change = Object.keys(args).length;
   if (change) {
     // console.log('\n\n** ', phylotree.debugId, 'changePhyloTreeViaPropsComparison **', args);

src/components/tree/tree.js

@@ -69,7 +69,6 @@ class Tree extends React.Component {
 
     /* has the 2nd (right hand) tree just been turned on, off or swapped? */
     if (prevProps.showTreeToo !== this.props.showTreeToo) {
-      this.state.tree.change({svgHasChangedDimensions: true}); /* readjust co-ordinates */
       if (!this.props.showTreeToo) { /* turned off -> remove the 2nd tree */
         newState.treeToo = null;
       } else { /* turned on -> render the 2nd tree */
@@ -78,7 +77,6 @@ class Tree extends React.Component {
         }
         newState.tree = this.state.tree; // setUpAndRenderTreeToo needs newState.tree
         this.setUpAndRenderTreeToo(this.props, newState); /* modifies newState in place */
-        // this.resetView(); /* reset the position of the left tree */
         if (this.tangleRef) this.tangleRef.drawLines();
       }
     } else if (this.state.treeToo) { /* the tree hasn't just been swapped, but it does exist and may need updating */

src/reducers/tree.js

@@ -71,6 +71,8 @@ const Tree = (state = getDefaultTreeState(), action) => {
         nodeColors: action.nodeColors,
         nodeColorsVersion: action.version
       });
+    case types.TREE_TOO_DATA:
+      return action.tree;
     case types.ADD_COLOR_BYS:
       /* modify in place ?!?! */
       for (const node of state.nodes) {