Merge pull request #1750 from nextstrain/james/restore-svg-selections

Restore SVG selections
nextstrain · Feb 6, 2024 · cc6ef4e · cc6ef4e
2 parents b611a2b + b4db575
commit cc6ef4e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 21 deletions.
diff --git a/src/components/tree/phyloTree/renderers.js b/src/components/tree/phyloTree/renderers.js
@@ -343,29 +343,18 @@ export const updateColorBy = function updateColorBy() {};
  */
 const handleBranchHoverColor = (d, c1, c2) => {
   if (!d) { return; }
-  const id = `T${d.that.id}_${d.n.parent.arrayIdx}_${d.n.arrayIdx}`;
 
   /* We want to emphasize the colour of the branch. How we do this depends on how the branch was rendered in the first place! */
-  const tel = d.that.svg.select(getDomId("#branchT", d.n.name));
-
+  const tel = d.that.svg.select("#"+getDomId("branchT", d.n.name));
   if (!tel.empty()) { // Some displays don't have S & T parts of the branch
     tel.style("stroke", c2);
   }
-  const sel = d.that.svg.select(getDomId("#branchS", d.n.name));
+
+  /* If we reinstate gradient stem colours this section must be updated; see the
+  commit which added this comment for the previous implementation */
+  const sel = d.that.svg.select("#"+getDomId("branchS", d.n.name));
   if (!sel.empty()) {
-    if (d.branchStroke === d.n.parent.shell.branchStroke) {
-      sel.style("stroke", c2);
-    } else {
-      // console.log("going to gradient " + el.attr("id"));
-      const begin = d.that.svg.select(`#${id}_begin`);
-      if (begin) {
-        begin.attr("stop-color", c1);
-      }
-      const end = d.that.svg.select(`#${id}_end`);
-      if (end) {
-        end.attr("stop-color", c2);
-      }
-    }
+    sel.style("stroke", c2);
   }
 };
 

diff --git a/src/components/tree/reactD3Interface/callbacks.js b/src/components/tree/reactD3Interface/callbacks.js
@@ -10,7 +10,7 @@ export const onTipHover = function onTipHover(d) {
   const phylotree = d.that.params.orientation[0] === 1 ?
     this.state.tree :
     this.state.treeToo;
-  phylotree.svg.select(getDomId("#tip", d.n.name))
+  phylotree.svg.select("#"+getDomId("tip", d.n.name))
     .attr("r", (e) => e["r"] + 4);
   this.setState({
     selectedNode: {
@@ -133,8 +133,8 @@ export const onTipLeave = function onTipLeave(d) {
   const phylotree = d.that.params.orientation[0] === 1 ?
     this.state.tree :
     this.state.treeToo;
-  if (!this.state.selectedNode) {
-    phylotree.svg.select(getDomId("#tip", d.n.name))
+  if (this.state.selectedNode) {
+    phylotree.svg.select("#"+getDomId("tip", d.n.name))
       .attr("r", (dd) => dd["r"]);
   }
   this.setState({selectedNode: {}});
@@ -145,7 +145,7 @@ export const clearSelectedNode = function clearSelectedNode(selectedNode) {
   const phylotree = selectedNode.node.that.params.orientation[0] === 1 ?
     this.state.tree :
     this.state.treeToo;
-  phylotree.svg.select(getDomId("#tip", selectedNode.node.n.name))
+  phylotree.svg.select("#"+getDomId("tip", selectedNode.node.n.name))
     .attr("r", (dd) => dd["r"]);
   this.setState({selectedNode: {}});
   if (selectedNode.type==="tip") {