🚧 make focus button a toggle

nextstrain · Oct 7, 2024 · fa421d5 · fa421d5
1 parent 92b0560
commit fa421d5
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/src/actions/types.js b/src/actions/types.js
@@ -7,7 +7,7 @@ export const SEARCH_INPUT_CHANGE = "SEARCH_INPUT_CHANGE";
 export const CHANGE_LAYOUT = "CHANGE_LAYOUT";
 export const CHANGE_BRANCH_LABEL = "CHANGE_BRANCH_LABEL";
 export const CHANGE_DISTANCE_MEASURE = "CHANGE_DISTANCE_MEASURE";
-export const CHANGE_TREE_FOCUS = "CHANGE_TREE_FOCUS";
+export const TOGGLE_TREE_FOCUS = "TOGGLE_TREE_FOCUS";
 export const CHANGE_DATES_VISIBILITY_THICKNESS = "CHANGE_DATES_VISIBILITY_THICKNESS";
 export const CHANGE_ABSOLUTE_DATE_MIN = "CHANGE_ABSOLUTE_DATE_MIN";
 export const CHANGE_ABSOLUTE_DATE_MAX = "CHANGE_ABSOLUTE_DATE_MAX";

diff --git a/src/components/tree/tree.js b/src/components/tree/tree.js
@@ -2,7 +2,7 @@ import React from "react";
 import { withTranslation } from "react-i18next";
 import { FaSearchMinus } from "react-icons/fa";
 import { updateVisibleTipsAndBranchThicknesses } from "../../actions/tree";
-import { CHANGE_TREE_FOCUS } from "../../actions/types";
+import { TOGGLE_TREE_FOCUS } from "../../actions/types";
 import Card from "../framework/card";
 import Legend from "./legend/legend";
 import PhyloTree from "./phyloTree/phyloTree";
@@ -43,7 +43,7 @@ class Tree extends React.Component {
   }
 
   redrawTree = () => {
-    this.props.dispatch({ type: CHANGE_TREE_FOCUS, focus: false });
+    this.props.dispatch({ type: TOGGLE_TREE_FOCUS, focus: false });
     this.props.dispatch(updateVisibleTipsAndBranchThicknesses({
       root: [0, 0]
     }));
@@ -182,8 +182,8 @@ class Tree extends React.Component {
     );
   }
 
-  focusOnSelected = () => {
-    this.props.dispatch({ type: CHANGE_TREE_FOCUS, focus: true });
+  toggleFocus = () => {
+    this.props.dispatch({ type: TOGGLE_TREE_FOCUS });
   };
 
   zoomToSelected = () => {
@@ -279,9 +279,9 @@ class Tree extends React.Component {
             </button>
             <button
               style={{...tabSingle, ...styles.focusOnSelectedButton}}
-              onClick={this.focusOnSelected}
+              onClick={this.toggleFocus}
             >
-              {t("Focus On Selected")}
+              {t("Toggle Focus")}
             </button>
             <button
               style={{...tabSingle, ...styles.resetTreeButton}}

diff --git a/src/reducers/controls.ts b/src/reducers/controls.ts
@@ -195,9 +195,13 @@ const Controls = (state: ControlsState = getDefaultControlsState(), action): Con
       }
       return Object.assign({}, state, updatesToState);
     }
-    case types.CHANGE_TREE_FOCUS:
+    case types.TOGGLE_TREE_FOCUS:
+      let newValue = !state.treeFocus;
+      if ("focus" in action) {
+        newValue = action.focus;
+      }
       return Object.assign({}, state, {
-        treeFocus: action.focus
+        treeFocus: newValue
       });
     case types.CHANGE_DATES_VISIBILITY_THICKNESS: {
       const newDates: Partial<ControlsState> = { quickdraw: action.quickdraw };