From a17fb0b51a72ab0611b449bcc5e931fc23ea64b0 Mon Sep 17 00:00:00 2001 From: james hadfield Date: Tue, 11 Jun 2024 16:04:12 +1200 Subject: [PATCH] [tanglegrams] ensure clip mask width > 0 Fixes a browser-specific bug where the invalid `` would cause the entire RHS tree to not be displayed. Tested on Safari 17.4.1, Firefox 126 & Chrome 123 Closes #1755 --- CHANGELOG.md | 1 + src/components/tree/phyloTree/renderers.js | 6 +++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 98cf870b4..c3c922f77 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ * Tangletrees can now be coloured by genotype (previously such a colouring would only work for the LHS tree). This requires the genome annotation (in the dataset JSON) to be identical across both datasets. This can be especially useful when comparing trees generated from the same sequences or a similar set of sequences in order to understand the differences in tree structure. ([#1785](https://github.com/nextstrain/auspice/pull/1783)) * Bugfix: The legend entries shown for a tangletree may not have shown values only observed in the RHS tree when the dataset was first loaded. ([#1785](https://github.com/nextstrain/auspice/pull/1783)) +* Bugfix: Multiple trees ("tanglegrams") now render correctly in Safari. ([#1786](https://github.com/nextstrain/auspice/pull/1786)) ## version 2.54.1 - 2024/06/10 diff --git a/src/components/tree/phyloTree/renderers.js b/src/components/tree/phyloTree/renderers.js index c1500c6c7..c955cc978 100644 --- a/src/components/tree/phyloTree/renderers.js +++ b/src/components/tree/phyloTree/renderers.js @@ -374,7 +374,11 @@ export const branchStrokeForHover = function branchStrokeForHover(d) { * in practice, elements (or portions of elements) render outside this. */ export const setClipMask = function setClipMask() { - const [xMin, xMax, yMin, yMax] = [...this.xScale.range(), ...this.yScale.range()]; + const [yMin, yMax] = this.yScale.range(); + // for the RHS tree (if there is one) ensure that xMin < xMax, else width<0 which some + // browsers don't like. See + let [xMin, xMax] = this.xScale.range(); + if (parseInt(xMin, 10)>parseInt(xMax, 10)) [xMin, xMax] = [xMax, xMin]; const x0 = xMin - 5; const width = xMax - xMin + 20; // RHS overflow is not problematic const y0 = yMin - 15; // some overflow at top is ok