From 5a66b778acbcfd5325910aa4a7e1425273467b8e Mon Sep 17 00:00:00 2001
From: james hadfield <hadfield.james@gmail.com>
Date: Mon, 18 Nov 2024 13:49:40 +1300
Subject: [PATCH] [tree] Reinstate transitions for all d3 updates

This is a partial reversion of 3a18d773adedafe6f41fce26fa7d814ceeec395f
in order to fix a bug where a mixture of d3 calls with (non-zero)
transition durations followed by d3 calls without transitions would
cause out-of-sync errors. See <https://github.com/nextstrain/auspice/issues/1904>
for a more detailed explanation.

Closes #1904

Closes #1903
---
 src/components/tree/phyloTree/change.ts | 19 +++++++++----------
 src/components/tree/phyloTree/labels.js | 10 +++++-----
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/components/tree/phyloTree/change.ts b/src/components/tree/phyloTree/change.ts
index 0c586f7df..12096f145 100644
--- 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
index 41d0ca35e..76b6ee07e 100644
--- 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() {