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 | - Transition - -type UpdateCall = (selectionOrTransition: SelectionOrTransition) => void; +type UpdateCall = (selection: Transition) => void; /** createUpdateCall @@ -120,12 +116,15 @@ const genericSelectAndModify = ( transitionTime: number, ): void => { // console.log("general svg update for", treeElem); - let selection: SelectionOrTransition = svg.selectAll(treeElem) - .filter((d: PhyloNode) => d.update); - if (transitionTime) { - selection = selection.transition().duration(transitionTime); + + svg.selectAll(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() {