From fa421d562bcbf84499de0c538af66845ab6dd96d Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Mon, 7 Oct 2024 12:34:42 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20make=20focus=20button=20a=20togg?=
 =?UTF-8?q?le?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/actions/types.js        |  2 +-
 src/components/tree/tree.js | 12 ++++++------
 src/reducers/controls.ts    |  8 ++++++--
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/actions/types.js b/src/actions/types.js
index 87ff4c3e9..cf40b7aeb 100644
--- 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
index feb91c79d..8857fca2a 100644
--- 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
index ea34b62d5..bb7078926 100644
--- 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 };