Rename hovered node state

With the previous commit creating "selectedNode" as part of redux state,
the tree state variable "selectedNode" is only used for hover events, so
rename it to convey this.

src/components/tree/infoPanels/hover.js

@@ -401,13 +401,12 @@ const HoverInfoPanel = ({
   observedMutations,
   t
 }) => {
-  if (selectedNode.event !== "hover") return null;
-  const node = selectedNode.node.n;
+  if (!selectedNode) return null
+  const node = selectedNode.n;
   const idxOfInViewRootNode = getIdxOfInViewRootNode(node);
-
   return (
     <Container node={node} panelDims={panelDims}>
-      {selectedNode.type === "tip" ? (
+      {node.hasChildren===false ? (
         <>
           <StrainName name={node.name}/>
           <VaccineInfo node={node} t={t}/>

src/components/tree/reactD3Interface/callbacks.js

@@ -13,13 +13,7 @@ export const onTipHover = function onTipHover(d) {
     this.state.treeToo;
   phylotree.svg.select("#"+getDomId("tip", d.n.name))
     .attr("r", (e) => e["r"] + 4);
-  this.setState({
-    selectedNode: {
-      node: d,
-      type: "tip",
-      event: "hover"
-    }
-  });
+  this.setState({hoveredNode: d});
 };
 
 export const onTipClick = function onTipClick(d) {
@@ -49,13 +43,7 @@ export const onBranchHover = function onBranchHover(d) {
   }
 
   /* Set the hovered state so that an info box can be displayed */
-  this.setState({
-    selectedNode: {
-      node: d,
-      type: "branch",
-      event: "hover"
-    }
-  });
+  this.setState({hoveredNode: d});
 };
 
 export const onBranchClick = function onBranchClick(d) {
@@ -104,7 +92,6 @@ export const onBranchClick = function onBranchClick(d) {
 
 /* onBranchLeave called when mouse-off, i.e. anti-hover */
 export const onBranchLeave = function onBranchLeave(d) {
-  if (this.state.selectedNode.event!=="hover") return;
 
   /* Reset the stroke back to what it was before */
   branchStrokeForLeave(d);
@@ -115,19 +102,18 @@ export const onBranchLeave = function onBranchLeave(d) {
     tree.removeConfidence();
   }
   /* Set selectedNode state to an empty object, which will remove the info box */
-  this.setState({selectedNode: {}});
+  this.setState({hoveredNode: null});
 };
 
 export const onTipLeave = function onTipLeave(d) {
-  if (this.state.selectedNode.event!=="hover") return;
   const phylotree = d.that.params.orientation[0] === 1 ?
     this.state.tree :
     this.state.treeToo;
-  if (this.state.selectedNode) {
+  if (this.state.hoveredNode) {
     phylotree.svg.select("#"+getDomId("tip", d.n.name))
       .attr("r", (dd) => dd["r"]);
   }
-  this.setState({selectedNode: {}});
+  this.setState({hoveredNode: null});
 };
 
 /* clearSelectedNode when clicking to remove the node-selected modal */

src/components/tree/tree.js

@@ -29,7 +29,7 @@ class Tree extends React.Component {
     };
     this.tangleRef = undefined;
     this.state = {
-      selectedNode: {},
+      hoveredNode: null,
       tree: null,
       treeToo: null
     };
@@ -199,7 +199,7 @@ class Tree extends React.Component {
           <Legend width={this.props.width}/>
         </ErrorBoundary>
         <HoverInfoPanel
-          selectedNode={this.state.selectedNode}
+          selectedNode={this.state.hoveredNode}
           colorBy={this.props.colorBy}
           colorByConfidence={this.props.colorByConfidence}
           colorScale={this.props.colorScale}