Add axis labels for Rectangular and Clock Phylogeny trees.

nextstrain · Mar 12, 2020 · 71fb2a8 · 71fb2a8
1 parent ca09e84
commit 71fb2a8
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 1 deletion.
diff --git a/src/components/tree/phyloTree/defaultParams.js b/src/components/tree/phyloTree/defaultParams.js
@@ -11,7 +11,7 @@ export const createDefaultParams = () => ({
   tickLabelFill: darkGrey,
   minorTicks: 4,
   orientation: [1, 1],
-  margins: {left: 25, right: 15, top: 10, bottom: 30},
+  margins: {left: 30, right: 15, top: 10, bottom: 40},
   showGrid: true,
   fillSelected: "#A73",
   radiusSelected: 5,

diff --git a/src/components/tree/phyloTree/grid.js b/src/components/tree/phyloTree/grid.js
@@ -14,6 +14,9 @@ export const hideGrid = function hideGrid() {
   if ("gridText" in this.groups) {
     this.groups.gridText.selectAll("*").style('visibility', 'hidden');
   }
+  if ("axisText" in this.groups) {
+    this.groups.axisText.selectAll("*").style('visibility', 'hidden');
+  }
 };
 
 const addSVGGroupsIfNeeded = (groups, svg) => {
@@ -29,6 +32,9 @@ const addSVGGroupsIfNeeded = (groups, svg) => {
   if (!("gridText" in groups)) {
     groups.gridText = svg.append("g").attr("id", "gridText");
   }
+  if (!("axisText" in groups)) {
+    groups.axisText = svg.append("g").attr("id", "axisText");
+  }
 };
 
 /**
@@ -330,6 +336,45 @@ export const addGrid = function addGrid() {
         .attr("x", xTextPos(this.xScale, layout))
         .attr("y", yTextPos(this.yScale, layout));
 
+  /* add axis labels */
+  this.groups.axisText.selectAll("*").remove();
+  this.svg.selectAll(".axisText").remove();
+  if (layout == 'rect' || layout == "clock") {
+    let label = "Date";
+    if (this.distance == "div" || layout == 'clock') {
+      // This is a heuristic to determine whether this data
+      // measures "substitutions per site" or "substitutions"
+      if (this.yScale.domain()[0] > 5) {
+        label = "Mutations";
+      } else {
+        label = "Divergence";
+      }
+    }
+
+    this.groups.axisText
+      .append("text")
+        .text(layout == 'rect' ? label : "Date") // Clock always has Date on the X-axis
+        .attr("class", "gridText")
+        .style("font-size", this.params.tickLabelSize)
+        .style("font-family", this.params.fontFamily)
+        .style("fill", this.params.tickLabelFill)
+        .style("text-anchor", "middle")
+        .attr("x", this.xScale.range()[1] / 2)
+        .attr("y", this.yScale.range()[1] + this.params.margins.bottom - 6)
+
+    if (layout == 'clock') {
+      this.groups.axisText
+        .append("text")
+          .text(label) // Clock always has Date on the X-axis
+          .attr("class", "gridText")
+          .style("font-size", this.params.tickLabelSize)
+          .style("font-family", this.params.fontFamily)
+          .style("fill", this.params.tickLabelFill)
+          .style("text-anchor", "middle")
+          .attr('transform', 'translate(' + 10 + ',' + (this.yScale.range()[1] / 2) + ') rotate(-90)')
+    }
+  }
+
   this.grid=true;
   timerEnd("addGrid");
 };