[tanglegrams] ensure clip mask width > 0

Fixes a browser-specific bug where the invalid `<rect>` would cause the
entire RHS tree to not be displayed.

Tested on Safari 17.4.1, Firefox 126 & Chrome 123

Closes #1755

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
 

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 <https://github.com/nextstrain/auspice/issues/1755>
+  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