From ed4bf13ef28ead5887b803a316b1d76d59efa832 Mon Sep 17 00:00:00 2001
From: James Hadfield <hadfield.james@gmail.com>
Date: Wed, 16 Mar 2022 14:35:44 +1300
Subject: [PATCH] [tree] escape key dismisses any info modal

This implements what we think is an intuitive UI, and also helps with
the bug described in #1243 where removing/disabling a strain-filter
results in the tree visualisation falling out-of-sync with the modal.

See https://github.com/nextstrain/auspice/issues/1479 for context.

Closes #1479
---
 src/components/tree/tree.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/tree/tree.js b/src/components/tree/tree.js
index d9eb25c3c..f145481a9 100644
--- a/src/components/tree/tree.js
+++ b/src/components/tree/tree.js
@@ -41,6 +41,12 @@ class Tree extends React.Component {
         root: [0, 0]
       }));
     };
+    /* pressing the escape key should dismiss an info modal (if one exists) */
+    this.handlekeydownEvent = (event) => {
+      if (event.keyCode===27 && this.state.selectedNode) { // key 27 is esc
+        this.clearSelectedNode(this.state.selectedNode);
+      }
+    };
   }
   setUpAndRenderTreeToo(props, newState) {
     /* this.setState(newState) will be run sometime after this returns */
@@ -52,6 +58,7 @@ class Tree extends React.Component {
     renderTree(this, false, newState.treeToo, props);
   }
   componentDidMount() {
+    document.addEventListener('keyup', this.handlekeydownEvent);
     if (this.props.tree.loaded) {
       const newState = {};
       newState.tree = new PhyloTree(this.props.tree.nodes, "LEFT", this.props.tree.idxOfInViewRootNode);
@@ -96,6 +103,10 @@ class Tree extends React.Component {
     if (Object.keys(newState).length) this.setState(newState);
   }
 
+  componentWillUnmount() {
+    document.removeEventListener('keyup', this.handlekeydownEvent);
+  }
+
   getStyles = () => {
     const activeResetTreeButton = this.props.tree.idxOfInViewRootNode !== 0 ||
       this.props.treeToo.idxOfInViewRootNode !== 0;