🚧 use boolean query param

src/actions/recomputeReduxState.js

@@ -64,8 +64,10 @@ const modifyStateViaURLQuery = (state, query) => {
   if (query.m && state.branchLengthsToDisplay === "divAndDate") {
     state["distanceMeasure"] = query.m;
   }
-  if (query.focus) {
-    state["treeFocus"] = query.focus;
+  if (query.focus === undefined) {
+    state["treeFocus"] = false;
+  } else {
+    state["treeFocus"] = true;
   }
   if (query.c) {
     state["colorBy"] = query.c;

src/components/tree/phyloTree/layouts.js

@@ -297,11 +297,11 @@ export const setDistance = function setDistance(distanceAttribute) {
  * rectangularLayout, radialLayout, createChildrenAndParents
  * side effects: node.displayOrder and node.displayOrderRange (i.e. in the phyloTree node)
  */
-export const calcYValues = (nodes, spacing = "even") => {
+export const calcYValues = (nodes, focus) => {
   // console.log("calcYValues started with ", spacing);
   let total = 0; /* cumulative counter of y value at tip */
   let calcY; /* fn called calcY(node) to return some amount of y value at a tip */
-  if (spacing.includes("focus") && 'visibility' in nodes[0]) {
+  if (focus && 'visibility' in nodes[0]) {
     const numberOfTips = nodes.length;
     const numTipsVisible = nodes.filter((d) => !d.hasChildren && d.visibility === NODE_VISIBLE).length;
     const yPerVisible = (0.8 * numberOfTips) / numTipsVisible;
@@ -310,8 +310,7 @@ export const calcYValues = (nodes, spacing = "even") => {
       total += node.visibility === NODE_VISIBLE ? yPerVisible : yPerNotVisible;
       return total;
     };
-  } else { /* fall back to even spacing */
-    if (spacing !== "even") console.warn("falling back to even spacing of y values. Unknown arg:", spacing);
+  } else { /* fall back to no focus */
     calcY = () => ++total;
   }
 
@@ -336,15 +335,11 @@ export const calcYValues = (nodes, spacing = "even") => {
 /**
  * assigns the attribute this.treeFocus and calls the function that
  * recalculates yvalues based on treeFocus setting
- * @param treeFocus -- how to zoom nodes, eg ["even", "focus"]
+ * @param treeFocus -- whether to focus on filtered nodes
  */
 export const setTreeFocus = function setTreeFocus(treeFocus) {
   timerStart("setTreeFocus");
-  if (typeof treeFocus === "undefined") {
-    this.treeFocus = "even";
-  } else {
-    this.treeFocus = treeFocus;
-  }
+  this.treeFocus = treeFocus || false;
   calcYValues(this.nodes, this.treeFocus);
   timerEnd("setTreeFocus");
 };

src/components/tree/tree.js

@@ -43,7 +43,7 @@ class Tree extends React.Component {
   }
 
   redrawTree = () => {
-    this.props.dispatch({ type: CHANGE_TREE_FOCUS, data: "even" });
+    this.props.dispatch({ type: CHANGE_TREE_FOCUS, focus: false });
     this.props.dispatch(updateVisibleTipsAndBranchThicknesses({
       root: [0, 0]
     }));
@@ -183,19 +183,7 @@ class Tree extends React.Component {
   }
 
   focusOnSelected = () => {
-    // if currently set to "even", start at "focus"
-    let treeFocusData = "focus";
-    if (this.props.treeFocus.includes("focus")) {
-      // if currently at "focus", increment to "focus-2"
-      if (!this.props.treeFocus.includes("-")) {
-        treeFocusData = "focus-2";
-      } else {
-      // if currently at "focus-2", increment to "focus-3", etc...
-        const increment = parseInt(this.props.treeFocus.split('-')[1], 10) + 1;
-        treeFocusData = "focus-" + increment.toString();
-      }
-    }
-    this.props.dispatch({ type: CHANGE_TREE_FOCUS, data: treeFocusData });
+    this.props.dispatch({ type: CHANGE_TREE_FOCUS, focus: true });
   };
 
   zoomToSelected = () => {

src/middleware/changeURL.js

@@ -141,7 +141,13 @@ export const changeURLMiddleware = (store) => (next) => (action) => {
       break;
     }
     case types.CHANGE_TREE_FOCUS: {
-      query.z = action.data === state.controls.defaults.treeFocus ? undefined : action.data;
+      if (!("focus" in query) && action.focus) {
+        // "null" is truthy - see query.ci implementation
+        query.focus = null;
+      }
+      else if (("focus" in query) && !action.focus) {
+        query.focus = undefined;
+      }
       break;
     }
     case types.TOGGLE_SIDEBAR: {

src/reducers/controls.ts

@@ -197,7 +197,7 @@ const Controls = (state: ControlsState = getDefaultControlsState(), action): Con
     }
     case types.CHANGE_TREE_FOCUS:
       return Object.assign({}, state, {
-        treeFocus: action.data
+        treeFocus: action.focus
       });
     case types.CHANGE_DATES_VISIBILITY_THICKNESS: {
       const newDates: Partial<ControlsState> = { quickdraw: action.quickdraw };

src/util/globals.js

@@ -27,7 +27,7 @@ export const defaultColorBy = "country";
 export const defaultGeoResolution = "country";
 export const defaultLayout = "rect";
 export const defaultDistanceMeasure = "num_date";
-export const defaultTreeFocus = "even";
+export const defaultTreeFocus = false;
 export const defaultDateRange = 6;
 export const date_select = true;
 export const file_prefix = "Zika_";