Merge pull request #676 from nextstrain/hidden

Allow tree nodes to be hidden
nextstrain · Nov 1, 2018 · a0c4ee8 · a0c4ee8
2 parents 9ac4244 + 52f2aa4
commit a0c4ee8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/src/components/tree/phyloTree/change.js b/src/components/tree/phyloTree/change.js
@@ -3,6 +3,7 @@ import { calcConfidenceWidth } from "./confidence";
 import { applyToChildren } from "./helpers";
 import { timerStart, timerEnd } from "../../../util/perf";
 import { NODE_VISIBLE } from "../../../util/globals";
+import { getBranchVisibility } from "./renderers";
 
 /* loop through the nodes and update each provided prop with the new value
  * additionally, set d.update -> whether or not the node props changed
@@ -58,7 +59,8 @@ const svgSetters = {
     ".branch": {
       stroke: (d) => d.branchStroke,
       "stroke-width": (d) => d["stroke-width"] + "px", // style - as per drawBranches()
-      cursor: (d) => d.visibility === NODE_VISIBLE ? "pointer" : "default"
+      cursor: (d) => d.visibility === NODE_VISIBLE ? "pointer" : "default",
+      visibility: getBranchVisibility
     }
   }
 };
@@ -298,11 +300,11 @@ export const change = function change({
     nodePropsToModify["stroke-width"] = branchThickness;
   }
   if (newDistance || newLayout || zoomIntoClade || svgHasChangedDimensions) {
-    elemsToUpdate.add(".tip").add(".branch.S").add(".branch.T");
+    elemsToUpdate.add(".tip").add(".branch.S").add(".branch.T").add(".branch");
     elemsToUpdate.add(".vaccineCross").add(".vaccineDottedLine").add(".conf");
     elemsToUpdate.add('.branchLabel').add('.tipLabel');
     elemsToUpdate.add(".grid").add(".regression");
-    svgPropsToUpdate.add("cx").add("cy").add("d").add("opacity");
+    svgPropsToUpdate.add("cx").add("cy").add("d").add("opacity").add("visibility");
   }
   if (newLayout) {
     useModifySVGInStages = true;

diff --git a/src/components/tree/phyloTree/renderers.js b/src/components/tree/phyloTree/renderers.js
@@ -120,6 +120,24 @@ export const drawTips = function drawTips() {
   timerEnd("drawTips");
 };
 
+/**
+ * given a tree node, decide whether the branch should be rendered
+ * This enforces the "hidden" property set in the dataset JSON
+ * @return {string}
+ */
+export const getBranchVisibility = (d) => {
+  const hiddenSetting = d.n.hidden;
+  if (hiddenSetting &&
+    (
+      hiddenSetting === "always" ||
+      (hiddenSetting === "timetree" && d.that.distance === "num_date") ||
+      (hiddenSetting === "divtree" && d.that.distance === "div")
+    )
+  ) {
+    return "hidden";
+  }
+  return "visible";
+};
 
 /**
  * adds all branches to the svg, these are paths with class branch, which comprise two groups
@@ -167,6 +185,7 @@ export const drawBranches = function drawBranches() {
         .style("stroke-linecap", "round")
         .style("stroke-width", (d) => d['stroke-width']+"px" || params.branchStrokeWidth)
         .style("fill", "none")
+        .style("visibility", getBranchVisibility)
         .style("cursor", (d) => d.visibility === NODE_VISIBLE ? "pointer" : "default")
         .style("pointer-events", "auto")
         .on("mouseover", this.callbacks.onBranchHover)