[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.

Note that `event.key` may not be implemented in all browsers, however
this functionality is a nicety rather than a must-have, so this is
tolerable. Thanks to @joverlee521 for suggesting to use this instead of
`event.keyCode` during PR review.

See #1479 for context.

Closes #1479

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.key==="Escape" && this.state.selectedNode?.node) {
+        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;