Add tooltips to the phylo tree for both NCBI and Sample entries

app/assets/src/components/ui/containers/DataTooltip.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const DataTooltip = ({ data, subtitle, title }) => {
+  // DataTooltip receives:
+  // - title
+  // - subtitle
+  // - an object(section_name: array([label, value], [..]))
+
+  const renderSection = (sectionName, dataValues) => {
+    return (
+      <div className="data-tooltip__section" key={`section-${sectionName}`}>
+        <div className="data-tooltip__section-name">{sectionName}</div>
+        {dataValues.map(keyValuePair => {
+          return (
+            <div
+              className="data-tooltip__value-pair"
+              key={`value-${sectionName}-${keyValuePair[0]}`}
+            >
+              <div className="data-tooltip__label">{keyValuePair[0]}</div>
+              <div className="data-tooltip__value">{keyValuePair[1]}</div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const renderSections = data => {
+    return data.map(section => renderSection(section.name, section.data));
+  };
+
+  return (
+    <div className="data-tooltip">
+      {title && <div className="data-tooltip__title">{title}</div>}
+      {subtitle && <div className="data-tooltip__subtitle">{subtitle}</div>}
+      <div className="data-tooltip__data">{renderSections(data)}</div>
+    </div>
+  );
+};
+
+DataTooltip.propTypes = {
+  data: PropTypes.array,
+  subtitle: PropTypes.string,
+  title: PropTypes.string
+};
+export default DataTooltip;

app/assets/src/components/views/phylo_tree/PhyloTreeListView.jsx

@@ -28,7 +28,11 @@ class PhyloTreeListView extends React.Component {
   }
 
   getDefaultSelectedTreeId(urlParams, phyloTrees = []) {
-    return urlParams.treeId || (phyloTrees[0] || {}).id;
+    return (
+      urlParams.treeId ||
+      parseInt(window.sessionStorage.getItem("treeId")) ||
+      (phyloTrees[0] || {}).id
+    );
   }
 
   resetUrl() {
@@ -45,6 +49,7 @@ class PhyloTreeListView extends React.Component {
   }
 
   handleTreeChange(_, newPhyloTreeId) {
+    window.sessionStorage.setItem("treeId", newPhyloTreeId.value);
     this.setState({
       selectedPhyloTreeId: newPhyloTreeId.value
     });

app/assets/src/components/views/phylo_tree/PhyloTreeVis.jsx

@@ -2,25 +2,49 @@ import React from "react";
 import Tree from "../../utils/structures/Tree";
 import Dendogram from "../../visualizations/dendrogram/Dendogram";
 import PropTypes from "prop-types";
+import DataTooltip from "../../ui/containers/DataTooltip";
+import Moment from "react-moment";
 
 class PhyloTreeVis extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      newick: props.newick
+      hoveredNode: null
     };
 
-    this.treeVis = null;
-  }
+    (this.newick = props.newick),
+      (this.nodeData = props.nodeData),
+      (this.treeVis = null);
 
-  static getDerivedStateFromProps(props, state) {
-    if (props.newick !== state.newick || props.nodeData !== state.nodeData) {
-      return {
-        newick: props.newick,
-        props: props.nodeData
-      };
-    }
+    this.handleNodeHover = this.handleNodeHover.bind(this);
+
+    this.sampleFields = [
+      { name: "project_name", label: "Project" },
+      { name: "sample_location", label: "Location" },
+      {
+        name: "created_at",
+        label: "Upload Date",
+        parser: val => {
+          return <Moment fromNow date={val} />;
+        }
+      },
+      { name: "sample_date", label: "Collection Date" },
+      { name: "sample_tissue", label: "Tissue" },
+      { name: "sample_template", label: "Template" },
+      { name: "sample_library", label: "Library" },
+      { name: "sample_sequencer", label: "Sequencer" },
+      { name: "sample_unique_id", label: "Unique ID" },
+      { name: "sample_input_pg", label: "Input PG" },
+      { name: "sample_batch", label: "Batch" },
+      { name: "sample_diagnosis", label: "Diagnosis" },
+      { name: "sample_detection", label: "Detection" },
+      { name: "sample_notes", label: "Notes" }
+    ];
+    this.ncbiFields = [
+      { name: "country", label: "Country" },
+      { name: "collection_date", label: "Collection Date" }
+    ];
   }
 
   componentDidMount() {
@@ -33,26 +57,101 @@ class PhyloTreeVis extends React.Component {
       // Name for the legend when the attribute is missing / other
       colorGroupAbsentName: "NCBI References",
       legendX: 880,
-      legendY: 50
+      legendY: 50,
+      tooltipContainer: this.tooltipContainer,
+      onNodeTextClick: this.handleNodeClick,
+      onNodeHover: this.handleNodeHover
     });
     this.treeVis.update();
   }
 
   componentDidUpdate() {
-    this.treeVis.setTree(
-      Tree.fromNewickString(this.props.newick, this.props.nodeData)
-    );
-    this.treeVis.update();
+    if (
+      this.props.newick != this.newick ||
+      this.props.nodeData != this.nodeData
+    ) {
+      this.newick = this.props.newick;
+      this.nodeData = this.props.nodeData;
+      this.treeVis.setTree(
+        Tree.fromNewickString(this.props.newick, this.props.nodeData)
+      );
+      this.treeVis.update();
+    }
+  }
+
+  handleNodeHover(node) {
+    this.setState({ hoveredNode: node });
+  }
+
+  handleNodeClick(node) {
+    if (node.data.accession) {
+      let url = `https://www.ncbi.nlm.nih.gov/nuccore/${node.data.accession}`;
+      window.open(url, "_blank", "noopener", "noreferrer");
+    } else if (node.data.id) {
+      location.href = `/samples/${node.data.id}`;
+    }
+  }
+
+  getFieldValue(field) {
+    let value = this.state.hoveredNode.data[field.name];
+    if (value && field.parser) {
+      try {
+        value = field.parser(value);
+      } catch (err) {
+        // TODO: handle error
+        console.error(err);
+      }
+    }
+    return value || "-";
+  }
+
+  getTooltipData() {
+    let fields = this.state.hoveredNode.data.accession
+      ? this.ncbiFields
+      : this.sampleFields;
+
+    let topSectionName = null;
+    let topSectionData = null;
+    if (this.state.hoveredNode.data.project_name) {
+      topSectionName = "Sample";
+      topSectionData = [
+        ["Project", this.state.hoveredNode.data.project_name || "-"]
+      ];
+    } else {
+      topSectionName = "NCBI Reference";
+      topSectionData = [
+        ["Accession", this.state.hoveredNode.data.accession || "-"]
+      ];
+    }
+    return [
+      { name: topSectionName, data: topSectionData },
+      {
+        name: "Metadata",
+        data: fields.map(f => [f.label, this.getFieldValue(f) || "-"])
+      }
+    ];
   }
 
   render() {
     return (
-      <div
-        className="phylo-tree-vis"
-        ref={container => {
-          this.treeContainer = container;
-        }}
-      />
+      <div className="phylo-tree-vis">
+        <div
+          className="phylo-tree-vis__tree-container"
+          ref={container => {
+            this.treeContainer = container;
+          }}
+        />
+        <div
+          className="phylo-tree-vis__tooltip-container"
+          ref={tooltip => {
+            this.tooltipContainer = tooltip;
+          }}
+        >
+          {this.state.hoveredNode && (
+            <DataTooltip data={this.getTooltipData()} />
+          )}
+        </div>
+      </div>
     );
   }
 }

app/assets/src/components/visualizations/dendrogram/Dendogram.js

@@ -14,7 +14,18 @@ export default class Dendogram {
 
     this.options = Object.assign(
       {
-        curvedEdges: false
+        curvedEdges: false,
+        defaultColor: "#cccccc",
+        colormapName: "viridis",
+        colorGroupAttribute: null,
+        colorGroupLegendTitle: null,
+        colorGroupAbsentName: null,
+        legendX: 880,
+        legendY: 50,
+        onNodeTextClick: null,
+        onNodeClick: null,
+        onNodeHover: null,
+        tooltipContainer: null
       },
       options || {}
     );
@@ -28,7 +39,7 @@ export default class Dendogram {
     // margin top
     this.margins = {
       // includes legend
-      top: 60,
+      top: 80,
       // includes second half of nodes
       bottom: 20,
       // includes root label on the left of the node
@@ -70,10 +81,7 @@ export default class Dendogram {
         `translate(${this.margins.left}, ${this.margins.top})`
       );
 
-    this.tooltipDiv = select("body")
-      .append("div")
-      .attr("class", "dendogram__tooltip")
-      .style("opacity", 0);
+    this.tooltipContainer = select(this.options.tooltipContainer);
   }
 
   adjustHeight(treeHeight) {
@@ -541,48 +549,42 @@ export default class Dendogram {
       })
       .attr("transform", function(node) {
         return `translate(${node.y},${node.x})`;
+      });
+
+    if (!this.tooltipContainer.empty()) {
+      nodeEnter
+        .on("mouseenter", node => {
+          if (!node.children) {
+            this.options.onNodeHover && this.options.onNodeHover(node);
+            this.tooltipContainer.classed("visible", true);
+          }
+        })
+        .on("mousemove", node => {
+          if (!node.children) {
+            this.tooltipContainer
+              .style("left", currentEvent.pageX + 20 + "px")
+              .style("top", currentEvent.pageY + 20 + "px");
+          }
+        })
+        .on("mouseleave", () => {
+          if (!node.children) {
+            this.tooltipContainer.classed("visible", false);
+          }
+        });
+    }
+
+    nodeEnter
+      .append("circle")
+      .attr("r", function(node) {
+        return node.children ? 3 : 5;
       })
       .on("click", node => {
         this.clickHandler(
           () => this.markAsHighlight(node),
           () => this.rerootOriginalTree(node)
         );
-      })
-      .on("mouseover", node => {
-        if (!node.children) {
-          let md = node.data.name.split("__");
-          md.shift();
-
-          if (md.length > 0) {
-            this.tooltipDiv.html(md.join(" / "));
-
-            this.tooltipDiv
-              .transition()
-              .duration(200)
-              .style("opacity", 0.9);
-          }
-        }
-      })
-      .on("mousemove", node => {
-        if (!node.children) {
-          this.tooltipDiv
-            .style("left", currentEvent.pageX + 20 + "px")
-            .style("top", currentEvent.pageY + 20 + "px");
-        }
-      })
-      .on("mouseout", () => {
-        if (!node.children) {
-          this.tooltipDiv
-            .transition()
-            .duration(500)
-            .style("opacity", 0);
-        }
       });
 
-    nodeEnter.append("circle").attr("r", function(node) {
-      return node.children ? 3 : 5;
-    });
-
     nodeEnter
       .append("text")
       .attr("dy", function(d) {
@@ -593,7 +595,11 @@ export default class Dendogram {
       })
       .text(function(d) {
         return d.children ? "" : d.data.name.split("__")[0];
-      });
+      })
+      .on(
+        "click",
+        d => this.options.onNodeTextClick && this.options.onNodeTextClick(d)
+      );
 
     if (this.options.colorGroupAttribute && !this.skipColoring) {
       // Apply colors to the nodes from data.colorIndex

app/assets/src/loader.scss

@@ -40,6 +40,7 @@
 @import "styles/ui/labels/pathogen_label";
 
 // ui/containers
+@import "styles/ui/containers/data_tooltip";
 @import "styles/ui/containers/modal";
 @import "styles/ui/containers/wizard";