Merge pull request #1907 from nextstrain/james/tree-resize-fix

[tree] Reinstate transitions for all d3 updates
nextstrain · Nov 18, 2024 · 522c21d · 522c21d
2 parents 6e047d3 + 5a66b77
commit 522c21d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 15 deletions.
diff --git a/src/components/tree/phyloTree/change.ts b/src/components/tree/phyloTree/change.ts
@@ -74,11 +74,7 @@ const svgSetters = {
 };
 
 
-type SelectionOrTransition =
-   Selection<SVGGElement, PhyloNode, SVGSVGElement | null, unknown> |
-  Transition<SVGGElement, PhyloNode, SVGSVGElement | null, unknown>
-
-type UpdateCall = (selectionOrTransition: SelectionOrTransition) => void;
+type UpdateCall = (selection: Transition<SVGGElement, PhyloNode, SVGSVGElement | null, unknown>) => void;
 
 
 /** createUpdateCall
@@ -120,12 +116,15 @@ const genericSelectAndModify = (
   transitionTime: number,
 ): void => {
   // console.log("general svg update for", treeElem);
-  let selection: SelectionOrTransition = svg.selectAll<SVGGElement, PhyloNode>(treeElem)
-    .filter((d: PhyloNode) => d.update);
-  if (transitionTime) {
-    selection = selection.transition().duration(transitionTime);
+
+  svg.selectAll<SVGGElement, PhyloNode>(treeElem)
+    .filter((d) => d.update)
+    .transition().duration(transitionTime)
+    .call(updateCall);
+  if (!transitionTime) {
+    timerFlush();
   }
-  selection.call(updateCall);
+
 };
 
 /* use D3 to select and modify elements, such that a given element is only ever modified _once_

diff --git a/src/components/tree/phyloTree/labels.js b/src/components/tree/phyloTree/labels.js
@@ -1,3 +1,4 @@
+import { timerFlush } from "d3-timer";
 import { NODE_VISIBLE } from "../../../util/globals";
 import { numericToDateObject, prettifyDate } from "../../../util/dateHelpers";
 import { getTraitFromNode } from "../../../util/treeMiscHelpers";
@@ -107,16 +108,15 @@ export const updateBranchLabels = function updateBranchLabels(dt) {
   );
   const labelSize = branchLabelSize(this.params.branchLabelKey);
   const fontWeight = branchLabelFontWeight(this.params.branchLabelKey);
-  let selection = this.groups.branchLabels
+  this.groups.branchLabels
     .selectAll(".branchLabel")
-  if (dt) {
-    selection = selection.transition().duration(dt);
-  }
-  selection.attr("x", (d) => d.xTip - 5)
+    .transition().duration(dt)
+    .attr("x", (d) => d.xTip - 5)
     .attr("y", (d) => d.yTip - this.params.branchLabelPadY)
     .style("visibility", visibility)
     .style("font-weight", fontWeight)
     .style("font-size", labelSize);
+  if (!dt) timerFlush();
 };
 
 export const removeBranchLabels = function removeBranchLabels() {