diff --git a/src/components/tree/phyloTree/change.js b/src/components/tree/phyloTree/change.js index 78fd96e1d..1a0b6bedc 100644 --- a/src/components/tree/phyloTree/change.js +++ b/src/components/tree/phyloTree/change.js @@ -99,15 +99,12 @@ const createUpdateCall = (treeElem, properties) => (selection) => { const genericSelectAndModify = (svg, treeElem, updateCall, transitionTime) => { // console.log("general svg update for", treeElem); - svg.selectAll(treeElem) - .filter((d) => d.update) - .transition().duration(transitionTime) - .call(updateCall); - if (!transitionTime) { - /* https://github.com/d3/d3-timer#timerFlush */ - timerFlush(); - // console.log("\t\t--FLUSHING TIMER--"); + let selection = svg.selectAll(treeElem) + .filter((d) => d.update); + if (transitionTime) { + selection = selection.transition().duration(transitionTime); } + selection.call(updateCall); }; /* use D3 to select and modify elements, such that a given element is only ever modified _once_ @@ -271,7 +268,8 @@ export const change = function change({ branchThickness = undefined, /* other data */ focus = undefined, - scatterVariables = undefined + scatterVariables = undefined, + performanceFlags = {}, }) { // console.log("\n** phylotree.change() (time since last run:", Date.now() - this.timeLastRenderRequested, "ms) **\n\n"); timerStart("phylotree.change()"); @@ -280,10 +278,11 @@ export const change = function change({ const svgPropsToUpdate = new Set(); /* which SVG properties shall be changed. E.g. "fill", "stroke" */ const useModifySVGInStages = newLayout; /* use modifySVGInStages rather than modifySVG. Not used often. */ + /* calculate dt */ const idealTransitionTime = 500; let transitionTime = idealTransitionTime; - if ((Date.now() - this.timeLastRenderRequested) < idealTransitionTime * 2) { + if ((Date.now() - this.timeLastRenderRequested) < idealTransitionTime * 2 || performanceFlags.get("skipTreeAnimation")===true) { transitionTime = 0; } diff --git a/src/components/tree/phyloTree/labels.js b/src/components/tree/phyloTree/labels.js index 31fe9db88..41d0ca35e 100644 --- a/src/components/tree/phyloTree/labels.js +++ b/src/components/tree/phyloTree/labels.js @@ -1,4 +1,3 @@ -import { timerFlush } from "d3-timer"; import { NODE_VISIBLE } from "../../../util/globals"; import { numericToDateObject, prettifyDate } from "../../../util/dateHelpers"; import { getTraitFromNode } from "../../../util/treeMiscHelpers"; @@ -108,16 +107,16 @@ export const updateBranchLabels = function updateBranchLabels(dt) { ); const labelSize = branchLabelSize(this.params.branchLabelKey); const fontWeight = branchLabelFontWeight(this.params.branchLabelKey); - this.groups.branchLabels + let selection = this.groups.branchLabels .selectAll(".branchLabel") - .transition() - .duration(dt) - .attr("x", (d) => d.xTip - 5) + if (dt) { + selection = selection.transition().duration(dt); + } + selection.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() { diff --git a/src/components/tree/reactD3Interface/change.js b/src/components/tree/reactD3Interface/change.js index 67a3b6707..c657bd7a2 100644 --- a/src/components/tree/reactD3Interface/change.js +++ b/src/components/tree/reactD3Interface/change.js @@ -127,6 +127,7 @@ export const changePhyloTreeViaPropsComparison = (mainTree, phylotree, oldProps, const change = Object.keys(args).length; if (change) { args.animationInProgress = newProps.animationPlayPauseButton === "Pause"; + args.performanceFlags = newProps.performanceFlags; // console.log('\n\n** ', phylotree.id, 'changePhyloTreeViaPropsComparison **', args); phylotree.change(args); } diff --git a/src/middleware/performanceFlags.js b/src/middleware/performanceFlags.js index 958fc65c7..0c0db78f5 100644 --- a/src/middleware/performanceFlags.js +++ b/src/middleware/performanceFlags.js @@ -14,13 +14,15 @@ export const performanceFlags = (_store) => (next) => (action) => { case types.URL_QUERY_CHANGE_WITH_COMPUTED_STATE: /* fallthrough */ case types.CLEAN_START: { modifiedAction = {...action}; - modifiedAction.controls.performanceFlags = calculate() + modifiedAction.controls.performanceFlags = calculate(action) } } return next(modifiedAction || action); // send action to other middleware / reducers }; -function calculate() { +function calculate({tree}) { const toggles = new Map(); + const totalTipCount = tree?.nodes?.[0]?.fullTipCount; + toggles.set("skipTreeAnimation", totalTipCount > 4000); return toggles; } \ No newline at end of file