diff --git a/src/components/tree/index.js b/src/components/tree/index.js index 229d056aa..8ea773f28 100644 --- a/src/components/tree/index.js +++ b/src/components/tree/index.js @@ -20,7 +20,8 @@ const Tree = connect((state) => ({ panelsToDisplay: state.controls.panelsToDisplay, selectedBranchLabel: state.controls.selectedBranchLabel, narrativeMode: state.narrative.display, - animationPlayPauseButton: state.controls.animationPlayPauseButton + animationPlayPauseButton: state.controls.animationPlayPauseButton, + alwaysDisplayTipLabels: state.controls.alwaysDisplayTipLabels }))(UnconnectedTree); export default Tree; diff --git a/src/components/tree/phyloTree/labels.js b/src/components/tree/phyloTree/labels.js index 532d3bd02..1b4ac0a7f 100644 --- a/src/components/tree/phyloTree/labels.js +++ b/src/components/tree/phyloTree/labels.js @@ -1,7 +1,7 @@ import { timerFlush } from "d3-timer"; import { NODE_VISIBLE } from "../../../util/globals"; -export const updateTipLabels = function updateTipLabels(dt) { +export const updateTipLabels = function updateTipLabels(alwaysDisplayTipLabels, dt) { if ("tipLabels" in this.groups) { this.groups.tipLabels.selectAll("*").remove(); } else { @@ -14,9 +14,8 @@ export const updateTipLabels = function updateTipLabels(dt) { const inViewTerminalNodes = this.nodes .filter((d) => d.terminal) .filter((d) => d.inView); - // console.log(`there are ${inViewTerminalNodes.length} nodes in view`) - if (inViewTerminalNodes.length < this.params.tipLabelBreakL1 || true) { - + // console.log(`there are ${inViewTerminalNodes.length} nodes in view`) + if (inViewTerminalNodes.length < this.params.tipLabelBreakL1 || alwaysDisplayTipLabels) { let fontSize = this.params.tipLabelFontSizeL1; if (inViewTerminalNodes.length < this.params.tipLabelBreakL2) { fontSize = this.params.tipLabelFontSizeL2; diff --git a/src/components/tree/reactD3Interface/change.js b/src/components/tree/reactD3Interface/change.js index eeb11cf4e..727f27dae 100644 --- a/src/components/tree/reactD3Interface/change.js +++ b/src/components/tree/reactD3Interface/change.js @@ -70,6 +70,11 @@ export const changePhyloTreeViaPropsComparison = (mainTree, phylotree, oldProps, args.newLayout = newProps.layout; } + /* if force-display tip label control is toggled, re-render tree labels */ + if (oldProps.alwaysDisplayTipLabels !== newProps.alwaysDisplayTipLabels) { + phylotree.updateTipLabels(newProps.alwaysDisplayTipLabels); + } + /* zoom to a clade / reset zoom to entire tree */ if (oldTreeRedux.idxOfInViewRootNode !== newTreeRedux.idxOfInViewRootNode) { const rootNode = phylotree.nodes[newTreeRedux.idxOfInViewRootNode];