vaccine positions correct for all layouts

nextstrain · Feb 13, 2018 · 91fb4d3 · 91fb4d3
1 parent 46d48e5
commit 91fb4d3
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/src/components/tree/phyloTree/generalUpdates.js b/src/components/tree/phyloTree/generalUpdates.js
@@ -100,7 +100,7 @@ export const updateGeometry = function updateGeometry(dt) {
     this.svg.selectAll(".vaccineCross")
       .transition().duration(dt)
       .attr("d", (dd) => dd.vaccineCross);
-    if (this.layout === "rect") { /* we only have dotted lines on rect layout so far */
+    if (this.distance === "num_date") {
       this.svg.selectAll(".vaccineDottedLine")
         .transition().duration(dt)
         .style("opacity", 1)

diff --git a/src/components/tree/phyloTree/layouts.js b/src/components/tree/phyloTree/layouts.js
@@ -47,6 +47,7 @@ export const rectangularLayout = function rectangularLayout() {
   if (this.vaccines) {
     this.vaccines.forEach((d) => {
       d.xCross = d.crossDepth;
+      d.yCross = d.y;
     });
   }
 };
@@ -65,8 +66,11 @@ export const timeVsRootToTip = function timeVsRootToTip() {
     d.px = d.n.parent.attr["num_date"];
     d.py = d.n.parent.attr["div"];
   });
-  if (this.vaccines) { /* where the tips should be */
-    this.vaccines.forEach((d) => {d.xCross = d.x;});
+  if (this.vaccines) { /* overlay vaccine cross on tip */
+    this.vaccines.forEach((d) => {
+      d.xCross = d.x;
+      d.yCross = d.y;
+    });
   }
   const nTips = this.numberOfTips;
   // REGRESSION WITH FREE INTERCEPT
@@ -145,7 +149,9 @@ export const unrootedLayout = function unrootedLayout() {
   }
   if (this.vaccines) {
     this.vaccines.forEach((d) => {
-      d.xCross = d.x;
+      const bL = d.crossDepth - d.depth;
+      d.xCross = d.px + bL * Math.cos(d.tau + d.w * 0.5);
+      d.yCross = d.py + bL * Math.sin(d.tau + d.w * 0.5);
     });
   }
 };
@@ -175,7 +181,13 @@ export const radialLayout = function radialLayout() {
   });
   if (this.vaccines) {
     this.vaccines.forEach((d) => {
-      d.xCross = (d.crossDepth - offset) * Math.sin(d.angle);
+      if (this.distance === "div") {
+        d.xCross = d.x;
+        d.yCross = d.y;
+      } else {
+        d.xCross = (d.crossDepth - offset) * Math.sin(d.angle);
+        d.yCross = (d.crossDepth - offset) * Math.cos(d.angle);
+      }
     });
   }
 };

diff --git a/src/components/tree/phyloTree/zoom.js b/src/components/tree/phyloTree/zoom.js
@@ -99,9 +99,10 @@ export const mapToScreen = function mapToScreen() {
   if (this.vaccines) {
     this.vaccines.forEach((d) => {
       const n = 5; /* half the number of pixels that the cross will take up */
-      d.xTipCross = this.xScale(d.xCross); /* x position of the center of the cross */
-      d.vaccineCross = ` M ${d.xTipCross-n},${d.yTip-n} L ${d.xTipCross+n},${d.yTip+n} M ${d.xTipCross-n},${d.yTip+n} L ${d.xTipCross+n},${d.yTip-n}`;
-      d.vaccineLine = ` M ${d.xTip},${d.yTip} L ${d.xTipCross},${d.yTip}`;
+      const xTipCross = this.xScale(d.xCross); /* x position of the center of the cross */
+      const yTipCross = this.yScale(d.yCross); /* x position of the center of the cross */
+      d.vaccineCross = ` M ${xTipCross-n},${yTipCross-n} L ${xTipCross+n},${yTipCross+n} M ${xTipCross-n},${yTipCross+n} L ${xTipCross+n},${yTipCross-n}`;
+      d.vaccineLine = ` M ${d.xTip},${d.yTip} L ${xTipCross},${yTipCross}`;
     });
   }
   if (this.params.confidence && this.layout==="rect") {