[tree] button to go back to previous zoom

src/actions/tree.js

@@ -49,7 +49,7 @@ export const applyInViewNodesToTree = (idx, tree) => {
  * @return {function} a function to be handled by redux (thunk)
  */
 export const updateVisibleTipsAndBranchThicknesses = (
-  {root = [undefined, undefined], cladeSelected = undefined} = {}
+  {root = [undefined, undefined], cladeSelected = undefined, revertTreeZoom = false} = {}
 ) => {
   return (dispatch, getState) => {
     const { tree, treeToo, controls, frequencies } = getState();
@@ -61,6 +61,19 @@ export const updateVisibleTipsAndBranchThicknesses = (
     if (!tree.nodes) {return;}
     // console.log("ROOT SETTING TO", root)
     /* mark nodes as "in view" as applicable */
+
+    if (revertTreeZoom) {
+      // NOTE: currently this functionality is only implemented for the main tree
+      // any implementation for two trees will have to consider the order of zoom operations across the trees
+      const len = tree.idxOfInViewRootNodeHistory.length;
+      if (len===0) {
+        console.error("Error trying to revert tree zoom with no history");
+        return;
+      }
+      root[0] = tree.idxOfInViewRootNodeHistory[len-1];
+      root[1] = undefined;
+    }
+
     const rootIdxTree1 = applyInViewNodesToTree(root[0], tree);
 
     const data = calculateVisiblityAndBranchThickness(
@@ -111,6 +124,15 @@ export const updateVisibleTipsAndBranchThicknesses = (
       visibilityToo: dispatchObj.visibilityToo
     });
 
+    /* update the history stack for zoom levels (if we are zooming) */
+    if (tree.idxOfFilteredRoot !== dispatchObj.idxOfInViewRootNode) {
+      if (revertTreeZoom) {
+        dispatchObj.idxOfInViewRootNodeHistory = tree.idxOfInViewRootNodeHistory.slice(0, -1);
+      } else {
+        dispatchObj.idxOfInViewRootNodeHistory = [...tree.idxOfInViewRootNodeHistory, tree.idxOfInViewRootNode];
+      }
+    }
+
     /* D I S P A T C H */
     dispatch(dispatchObj);
     updateEntropyVisibility(dispatch, getState);

src/components/tree/tree.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { withTranslation } from "react-i18next";
-import { FaSearchMinus } from "react-icons/fa";
+import { FaSearchMinus, FaReply } from "react-icons/fa";
 import { updateVisibleTipsAndBranchThicknesses } from "../../actions/tree";
 import Card from "../framework/card";
 import Legend from "./legend/legend";
@@ -10,6 +10,7 @@ import HoverInfoPanel from "./infoPanels/hover";
 import TipClickedPanel from "./infoPanels/click";
 import { changePhyloTreeViaPropsComparison } from "./reactD3Interface/change";
 import * as callbacks from "./reactD3Interface/callbacks";
+import { StyledTooltip } from "../controls/styles";
 import { tabSingle, darkGrey, lightGrey } from "../../globalStyles";
 import { renderTree } from "./reactD3Interface/initialRender";
 import Tangle from "./tangle";
@@ -109,6 +110,8 @@ class Tree extends React.Component {
     const treeIsZoomed = this.props.tree.idxOfInViewRootNode !== 0 ||
       this.props.treeToo.idxOfInViewRootNode !== 0;
 
+    const treeCanReturnToPreviousZoom = !!this.props.tree.idxOfInViewRootNodeHistory.length;
+
     return {
       treeButtonsDiv: {
         zIndex: 100,
@@ -137,6 +140,17 @@ class Tree extends React.Component {
         color: treeIsZoomed ? darkGrey : lightGrey,
         pointerEvents: treeIsZoomed ? "auto" : "none",
         marginRight: "4px"
+      },
+      revertTreeZoomButton: {
+        zIndex: 100,
+        display: "inline-block",
+        cursor: treeCanReturnToPreviousZoom ? "pointer" : "auto",
+        color: treeCanReturnToPreviousZoom ? darkGrey : lightGrey,
+        pointerEvents: treeCanReturnToPreviousZoom ? "auto" : "none",
+        marginRight: "4px"
+      },
+      helpTooltip: {
+        textTransform: "none"
       }
     };
   };
@@ -159,6 +173,10 @@ class Tree extends React.Component {
     }));
   };
 
+  revertTreeZoom = () => {
+    this.props.dispatch(updateVisibleTipsAndBranchThicknesses({revertTreeZoom: true}));
+  }
+
   zoomBack = () => {
     let newRoot, newRootToo;
     // Zoom out of main tree if index of root node is not 0
@@ -224,6 +242,20 @@ class Tree extends React.Component {
         }
         {this.props.narrativeMode ? null : (
           <div style={{...styles.treeButtonsDiv}}>
+            { this.props.showTreeToo ?
+              null :
+              (<button
+                style={{...tabSingle, ...styles.revertTreeZoomButton, ...styles.helpTooltip}}
+                onClick={this.revertTreeZoom}
+                data-tip
+                data-for="revertTreeZoom"
+              >
+                <FaReply/>
+                <StyledTooltip place="bottom" type="dark" effect="solid" id="revertTreeZoom">
+                  Go back to the previous zoom state
+                </StyledTooltip>
+              </button>)
+            }
             <button
               style={{...tabSingle, ...styles.zoomOutButton}}
               onClick={this.zoomBack}

src/reducers/tree.js

@@ -20,6 +20,7 @@ export const getDefaultTreeState = () => {
     vaccines: false,
     version: 0,
     idxOfInViewRootNode: 0,
+    idxOfInViewRootNodeHistory: [],
     visibleStateCounts: {},
     totalStateCounts: {},
     availableBranchLabels: [],
@@ -52,6 +53,9 @@ const Tree = (state = getDefaultTreeState(), action) => {
         visibleStateCounts: countTraitsAcrossTree(state.nodes, action.stateCountAttrs, action.visibility, true),
         selectedStrain: action.selectedStrain
       };
+      if (action.idxOfInViewRootNodeHistory) {
+        newStates.idxOfInViewRootNodeHistory = action.idxOfInViewRootNodeHistory;
+      }
       return Object.assign({}, state, newStates);
     case types.UPDATE_TIP_RADII:
       return Object.assign({}, state, {