react-msaview 6.1.0 → 6.2.0

package/src/components/dialogs/ExportSVGDialog.tsx

@@ -4,6 +4,7 @@ import { Dialog, ErrorMessage } from '@jbrowse/core/ui'
 import {
   Alert,
   Button,
+  CircularProgress,
   DialogActions,
   DialogContent,
   FormControl,
@@ -19,6 +20,16 @@ import Checkbox2 from '../Checkbox2.tsx'
 
 import type { MsaViewModel } from '../../model.ts'
 
+// Run after the browser has painted. A requestAnimationFrame callback still
+// runs *before* the frame it was queued for, so one alone hands the main thread
+// to the render with the spinner not yet on screen; the second fires once that
+// frame is out.
+function afterPaint(fn: () => void) {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(fn)
+  })
+}
+
 export default function ExportSVGDialog({
   model,
   onClose,
@@ -32,6 +43,7 @@ export default function ExportSVGDialog({
     'viewport',
   )
   const [error, setError] = useState<unknown>()
+  const [exporting, setExporting] = useState(false)
   const theme = useTheme()
   const {
     totalWidth,
@@ -39,12 +51,20 @@ export default function ExportSVGDialog({
     treeAreaWidth,
     turnedOnTracks,
     totalTrackAreaHeight,
+    numColumns,
+    leaves,
+    showMsaLetters,
   } = model
   const hasTracks = turnedOnTracks.length > 0
   const entireWidth = totalWidth + treeAreaWidth
   const entireHeight = totalHeight + (includeTracks ? totalTrackAreaHeight : 0)
-  const isLargeExport =
-    exportType === 'entire' && (entireWidth > 10000 || entireHeight > 10000)
+  // the background is one raster image whatever its size, so what the figure
+  // actually costs is its residue letters: each is an svg element of its own.
+  // Past roughly this many the export runs to tens of seconds and can exhaust
+  // the tab's memory outright
+  const glyphs =
+    showMsaLetters && exportType === 'entire' ? numColumns * leaves.length : 0
+  const isLargeExport = glyphs > 100_000
   return (
     <Dialog
       onClose={() => {
@@ -100,8 +120,11 @@ export default function ExportSVGDialog({
         </div>
         {isLargeExport ? (
           <Alert severity="warning" style={{ marginTop: 8 }}>
-            The entire MSA is very large ({Math.round(entireWidth)}x
-            {Math.round(entireHeight)} pixels). Export may be slow or fail.
+            The entire MSA is {Math.round(entireWidth)}x
+            {Math.round(entireHeight)} pixels and draws{' '}
+            {Math.round(glyphs / 1000)}k residue letters, each its own SVG
+            element. Export may be slow or fail — zooming out far enough to hide
+            the letters exports the same alignment as an image instead.
           </Alert>
         ) : null}
       </DialogContent>
@@ -109,25 +132,37 @@ export default function ExportSVGDialog({
         <Button
           variant="contained"
           color="primary"
+          // rendering runs on the main thread and a large figure holds it for
+          // seconds; without this the button stays live through the freeze and
+          // a second click starts a second export
+          disabled={exporting}
+          startIcon={
+            exporting ? <CircularProgress size={16} color="inherit" /> : null
+          }
           onClick={() => {
-            void model
-              .exportSVG({
-                theme,
-                includeMinimap:
-                  exportType === 'entire' ? false : includeMinimap,
-                includeTracks: hasTracks && includeTracks,
-                exportType,
-              })
-              .then(() => {
-                onClose()
-              })
-              .catch((e: unknown) => {
-                console.error(e)
-                setError(e)
-              })
+            setExporting(true)
+            afterPaint(() => {
+              void model
+                .exportSVG({
+                  theme,
+                  includeMinimap,
+                  includeTracks: hasTracks && includeTracks,
+                  exportType,
+                })
+                .then(() => {
+                  onClose()
+                })
+                .catch((e: unknown) => {
+                  console.error(e)
+                  setError(e)
+                })
+                .finally(() => {
+                  setExporting(false)
+                })
+            })
           }}
         >
-          Submit
+          {exporting ? 'Exporting…' : 'Submit'}
         </Button>
         <Button
           variant="contained"

package/src/components/getVisibleLeaves.ts

@@ -1,7 +1,28 @@
 import type { MsaViewModel } from '../model.ts'
 
-// The slice of leaves whose rows intersect a block of height blockSizeY at
-// vertical offset offsetY, padded by one row on each side.
+// The half-open range of rows [yStart, yEnd) whose leaves intersect a block of
+// height blockSizeY at vertical offset offsetY, padded by one row on each side.
+// Y-axis counterpart to visibleColRange.
+export function visibleRowRange({
+  model,
+  offsetY,
+  blockSizeY,
+}: {
+  model: MsaViewModel
+  offsetY: number
+  blockSizeY: number
+}) {
+  const { rowHeight } = model
+  return {
+    yStart: Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight)),
+    yEnd: Math.max(
+      0,
+      Math.ceil((offsetY + blockSizeY + rowHeight) / rowHeight),
+    ),
+  }
+}
+
+// The leaves in that range.
 export function getVisibleLeaves({
   model,
   offsetY,
@@ -11,11 +32,6 @@ export function getVisibleLeaves({
   offsetY: number
   blockSizeY: number
 }) {
-  const { leaves, rowHeight } = model
-  const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight))
-  const yEnd = Math.max(
-    0,
-    Math.ceil((offsetY + blockSizeY + rowHeight) / rowHeight),
-  )
-  return leaves.slice(yStart, yEnd)
+  const { yStart, yEnd } = visibleRowRange({ model, offsetY, blockSizeY })
+  return model.leaves.slice(yStart, yEnd)
 }

package/src/components/header/settingsMenuItems.ts

@@ -65,7 +65,7 @@ export function treeSettingsMenuItems(model: MsaViewModel): MenuItem[] {
     toggle('Show tree', drawTree, arg => {
       model.setDrawTree(arg)
     }),
-    toggle('Draw clickable bubbles on tree branches', drawNodeBubbles, arg => {
+    toggle('Draw bubbles on tree branches', drawNodeBubbles, arg => {
       model.setDrawNodeBubbles(arg)
     }),
     toggle('Tree labels align right', labelsAlignRight, arg => {

package/src/components/minimap/Minimap.tsx

@@ -13,10 +13,7 @@ import type { MsaViewModel } from '../../model.ts'
 const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
   const { minimapHeight, msaCanvasWidth, highResScaleFactor } = model
   const theme = useTheme()
-  const { unit, s, w, polygonHeight, polygonPoints } = getMinimapLayout(
-    model,
-    msaCanvasWidth,
-  )
+  const { unit, s, w, polygonHeight, polygonPoints } = getMinimapLayout(model)
 
   // the whole alignment, sampled down to the bar: it says where the conserved
   // blocks and the gappy stretches are, which is what a scroll aims at

package/src/components/minimap/MinimapSVG.tsx

@@ -1,46 +1,61 @@
 import React from 'react'
 
-import { observer } from 'mobx-react'
-
+import { scrollbarThumbFill } from '../DragHandle.tsx'
+import { canvasHref, msaThumbnail } from '../msa/msaRaster.ts'
 import { MINIMAP_BAR_HEIGHT, getMinimapLayout } from './minimapLayout.ts'
 
 import type { MsaViewModel } from '../../model.ts'
+import type { Theme } from '@mui/material'
 
-const MinimapSVG = observer(
-  ({ model, width }: { model: MsaViewModel; width: number }) => {
-    const { s, w, polygonPoints } = getMinimapLayout(model, width)
-    const fillColor = 'rgb(66, 119, 127)'
-    const fillOpacity = 0.3
+// The static counterpart to Minimap, for the SVG export. renderToSvg drives it
+// through renderToStaticMarkup, so it reads the model once and never re-renders
+// -- no observer wrapper.
+export default function MinimapSVG({
+  model,
+  theme,
+}: {
+  model: MsaViewModel
+  theme: Theme
+}) {
+  const { msaCanvasWidth } = model
+  const { s, w, polygonPoints } = getMinimapLayout(model)
+  // the same downsampled alignment the live minimap draws behind its thumb;
+  // undefined wherever a canvas cannot be read back, leaving a bare outline
+  const href = canvasHref(
+    msaThumbnail({ model, theme, height: MINIMAP_BAR_HEIGHT }),
+  )
 
-    return (
-      <>
-        <rect
+  return (
+    <>
+      {href ? (
+        <image
+          href={href}
           x={0}
           y={0}
-          width={width}
+          width={msaCanvasWidth}
           height={MINIMAP_BAR_HEIGHT}
-          stroke="#555"
-          fill="none"
+          preserveAspectRatio="none"
         />
-        <rect
-          x={Math.max(0, s)}
-          y={0}
-          width={w}
-          height={MINIMAP_BAR_HEIGHT}
-          fill={fillColor}
-          fillOpacity={fillOpacity}
-          stroke="#555"
-        />
-        <g transform={`translate(0 ${MINIMAP_BAR_HEIGHT})`}>
-          <polygon
-            fill={fillColor}
-            fillOpacity={fillOpacity}
-            points={polygonPoints}
-          />
-        </g>
-      </>
-    )
-  },
-)
-
-export default MinimapSVG
+      ) : null}
+      <rect
+        x={0}
+        y={0}
+        width={msaCanvasWidth}
+        height={MINIMAP_BAR_HEIGHT}
+        stroke="#555"
+        fill="none"
+      />
+      <rect
+        x={Math.max(0, s)}
+        y={0}
+        width={w}
+        height={MINIMAP_BAR_HEIGHT}
+        fill={scrollbarThumbFill}
+        stroke="#555"
+      />
+      <g transform={`translate(0 ${MINIMAP_BAR_HEIGHT})`}>
+        <polygon fill={scrollbarThumbFill} points={polygonPoints} />
+      </g>
+    </>
+  )
+}

package/src/components/minimap/minimapLayout.test.ts

@@ -23,7 +23,7 @@ test('the viewport rectangle scales by the canvas width, not the msa area', () =
   expect(model.showVerticalScrollbar).toBe(true)
   expect(model.msaCanvasWidth).toBe(model.msaAreaWidth - 20)
 
-  const { unit, s, w } = getMinimapLayout(model, model.msaCanvasWidth)
+  const { unit, s, w } = getMinimapLayout(model)
   expect(unit).toBeCloseTo(model.msaCanvasWidth / model.totalWidth)
   // unscrolled, the rectangle starts at the left edge and covers the fraction
   // of the alignment on screen. Sizing it by msaAreaWidth instead overstated
@@ -34,12 +34,12 @@ test('the viewport rectangle scales by the canvas width, not the msa area', () =
   )
 })
 
-test('the rectangle tracks scrollX and the trapezoid spans the given width', () => {
+test('the rectangle tracks scrollX and the trapezoid spans the bar', () => {
   const model = makeModel()
   model.setScrollX(-300)
 
-  const width = 400
-  const { s, polygonHeight, polygonPoints } = getMinimapLayout(model, width)
+  const { msaCanvasWidth: width } = model
+  const { s, polygonHeight, polygonPoints } = getMinimapLayout(model)
   expect(s).toBeCloseTo((300 / model.totalWidth) * width)
   expect(polygonHeight).toBe(model.minimapHeight - MINIMAP_BAR_HEIGHT)
   // bottom edge spans the full minimap, top edge is the viewport rectangle
@@ -48,11 +48,22 @@ test('the rectangle tracks scrollX and the trapezoid spans the given width', ()
   ).toBe(true)
 })
 
+test('an alignment that already fits never overflows the bar', () => {
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    msaFormat: 'fasta',
+    data: { msa: '>a\nACGT\n>b\nACGT' },
+  })
+  model.setWidth(1000)
+  expect(model.totalWidth).toBeLessThan(model.msaCanvasWidth)
+  expect(getMinimapLayout(model).w).toBe(model.msaCanvasWidth)
+})
+
 test('an empty alignment collapses to a zero-width unit instead of dividing by zero', () => {
   const model = MSAModelF().create({ type: 'MsaView' })
   model.setWidth(1000)
   expect(model.totalWidth).toBe(0)
-  const { unit, s, w } = getMinimapLayout(model, 400)
+  const { unit, s, w } = getMinimapLayout(model)
   expect(unit).toBe(0)
   expect(s).toBeCloseTo(0)
   // still clamped to the minimum grabbable width

package/src/components/minimap/minimapLayout.ts

@@ -3,20 +3,19 @@ import type { MsaViewModel } from '../../model.ts'
 export const MINIMAP_BAR_HEIGHT = 12
 
 /**
- * Viewport-rectangle and trapezoid geometry for a minimap drawn `minimapWidth`
- * pixels wide, shared by the interactive Minimap and the static MinimapSVG.
- *
- * The width is a parameter rather than read off the model because the two
- * differ: on screen the minimap sits over the alignment canvas, while the SVG
- * export lays the whole figure out on its own grid. What the rectangle *marks*
- * is always the on-screen viewport, so that part comes from the model.
+ * Viewport-rectangle and trapezoid geometry for the minimap, shared by the
+ * interactive Minimap and the static MinimapSVG. Both span the alignment canvas
+ * exactly -- a minimap drawn a different width than the columns it maps puts
+ * its viewport rectangle over the wrong ones.
  */
-export function getMinimapLayout(model: MsaViewModel, minimapWidth: number) {
+export function getMinimapLayout(model: MsaViewModel) {
   const { scrollX, minimapHeight, totalWidth, msaCanvasWidth } = model
-  const unit = totalWidth > 0 ? minimapWidth / totalWidth : 0
+  const unit = totalWidth > 0 ? msaCanvasWidth / totalWidth : 0
   const s = -scrollX * unit
-  const w = Math.max(msaCanvasWidth * unit, 20)
+  // the rectangle marks the visible slice of the alignment, so it can never be
+  // wider than the bar itself
+  const w = Math.min(msaCanvasWidth, Math.max(msaCanvasWidth * unit, 20))
   const polygonHeight = minimapHeight - MINIMAP_BAR_HEIGHT
-  const polygonPoints = `${s + w},0 ${s},0 0,${polygonHeight} ${minimapWidth},${polygonHeight}`
+  const polygonPoints = `${s + w},0 ${s},0 0,${polygonHeight} ${msaCanvasWidth},${polygonHeight}`
   return { unit, s, w, polygonHeight, polygonPoints }
 }

package/src/components/msa/msaRaster.ts

@@ -11,7 +11,7 @@ const maxCachedTiles = 64
 const maxThumbnailColumns = 2000
 const maxColorCacheEntries = 4096
 
-type RasterCanvas = HTMLCanvasElement | OffscreenCanvas
+export type RasterCanvas = HTMLCanvasElement | OffscreenCanvas
 type RasterCtx = CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D
 
 export interface RasterSpec {
@@ -125,23 +125,32 @@ export function rasterPixels({
   return out
 }
 
+// Getting a context object back is not the same as getting one that can do
+// this: the headless render shim hands back a context carrying only measureText,
+// which a truthiness test accepts and putImageData then does not survive. Name
+// the methods the raster actually calls, so every caller degrades together.
+function usableRasterCtx(ctx: unknown): ctx is RasterCtx {
+  const c = ctx as Record<string, unknown> | null
+  return (
+    !!c &&
+    typeof c.createImageData === 'function' &&
+    typeof c.putImageData === 'function' &&
+    typeof c.getImageData === 'function' &&
+    typeof c.clearRect === 'function' &&
+    typeof c.fillRect === 'function'
+  )
+}
+
 function makeRasterCanvas(width: number, height: number) {
-  if (typeof OffscreenCanvas !== 'undefined') {
-    const canvas = new OffscreenCanvas(width, height)
-    const ctx = canvas.getContext('2d', { willReadFrequently: true })
-    return ctx
-      ? { canvas: canvas as RasterCanvas, ctx: ctx as RasterCtx }
-      : undefined
-  }
-  if (typeof document === 'undefined') {
-    return undefined
-  }
-  const canvas = document.createElement('canvas')
-  canvas.width = width
-  canvas.height = height
-  const ctx = canvas.getContext('2d', { willReadFrequently: true })
-  return ctx
-    ? { canvas: canvas as RasterCanvas, ctx: ctx as RasterCtx }
+  const canvas =
+    typeof OffscreenCanvas !== 'undefined'
+      ? new OffscreenCanvas(width, height)
+      : typeof document !== 'undefined'
+        ? Object.assign(document.createElement('canvas'), { width, height })
+        : undefined
+  const ctx = canvas?.getContext('2d', { willReadFrequently: true })
+  return usableRasterCtx(ctx)
+    ? { canvas: canvas as RasterCanvas, ctx }
     : undefined
 }
 
@@ -308,6 +317,104 @@ export function drawMsaRaster({
   ctx.imageSmoothingEnabled = true
 }
 
+/**
+ * A raster canvas as a PNG data URI, for embedding in the SVG export.
+ *
+ * toDataURL is the synchronous read-back and only the DOM canvas has it, so an
+ * OffscreenCanvas -- which is what the tile and thumbnail caches hold wherever
+ * it exists -- gets copied onto one first. Returns undefined wherever the
+ * read-back is unavailable (jsdom) rather than throwing, which is the signal to
+ * fall back to drawing the thing in vector.
+ */
+export function canvasHref(canvas: RasterCanvas | undefined) {
+  if (!canvas || typeof document === 'undefined') {
+    return undefined
+  }
+  try {
+    if (canvas instanceof HTMLCanvasElement) {
+      return canvas.toDataURL('image/png')
+    }
+    const out = document.createElement('canvas')
+    out.width = canvas.width
+    out.height = canvas.height
+    const ctx = out.getContext('2d')
+    if (typeof ctx?.drawImage !== 'function') {
+      return undefined
+    }
+    ctx.drawImage(canvas as CanvasImageSource, 0, 0)
+    return out.toDataURL('image/png')
+  } catch {
+    return undefined
+  }
+}
+
+// A canvas much past this many pixels fails to allocate, and the browser's own
+// per-side limit is lower still, so a raster bigger than either samples down.
+// The result is still drawn across the same rectangle -- it loses cell-exact
+// detail at a size where no figure could show it anyway.
+const maxImagePixels = 64e6
+const maxImageSide = 16384
+
+/**
+ * The alignment rectangle [col0, col0+numCols) x [row0, row0+numRows) as a PNG
+ * data URI, for the SVG export.
+ *
+ * SVG has no blit, so the export cannot reuse the tile cache the live canvas
+ * draws from: one <image> is the whole background instead. That is the
+ * difference between an export that scales and one that does not -- the vector
+ * path emits a <rect> per cell, and a 200x500 alignment exhausts the heap
+ * building them.
+ *
+ * Returns undefined wherever a canvas cannot be read back (jsdom, notably),
+ * which is the signal to keep the per-cell path.
+ */
+export function rasterImageHref({
+  model,
+  theme,
+  col0,
+  row0,
+  numCols,
+  numRows,
+}: {
+  model: MsaViewModel
+  theme: Theme
+  col0: number
+  row0: number
+  numCols: number
+  numRows: number
+}) {
+  if (numCols <= 0 || numRows <= 0 || typeof document === 'undefined') {
+    return undefined
+  }
+  const cache = getCache(model, theme)
+  let step = 1
+  while (
+    Math.ceil(numCols / step) * Math.ceil(numRows / step) > maxImagePixels ||
+    Math.ceil(numCols / step) > maxImageSide ||
+    Math.ceil(numRows / step) > maxImageSide
+  ) {
+    step *= 2
+  }
+  const width = Math.ceil(numCols / step)
+  const height = Math.ceil(numRows / step)
+
+  return canvasHref(
+    paint(
+      rasterPixels({
+        spec: cache.spec,
+        col0,
+        row0,
+        width,
+        height,
+        colStep: step,
+        rowStep: step,
+      }),
+      width,
+      height,
+    ),
+  )
+}
+
 /**
  * The whole alignment sampled down to a strip small enough to sit behind the
  * minimap thumb, cached alongside the block tiles because it goes stale under

package/src/components/tree/renderTreeCanvas.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest'
 
 import { calcDepthToLeaf, findMaxBranchLen } from '../../hierarchy.ts'
 import stateModelFactory from '../../model.ts'
+import { ClickMapIndex } from './clickMap.ts'
 import { getNodeX, renderTreeCanvas } from './renderTreeCanvas.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
@@ -174,3 +175,57 @@ describe('renderTreeCanvas horizontal extent', () => {
     expect(model.treeWidth).toBe(model.treeAreaWidth - 10 - model.marginLeft)
   })
 })
+
+describe('node bubble click targets', () => {
+  const bounds = { minX: 0, minY: 0, maxX: 10000, maxY: 10000 }
+
+  // "draw clickable bubbles" only controls the painting; the branches have to
+  // stay clickable with it off
+  function renderWithBubbles(drawNodeBubbles: boolean) {
+    const model = stateModelFactory().create({
+      type: 'MsaView',
+      data: { msa: '>a\nA\n>b\nA\n>c\nA\n>d\nA', tree: '((a,b),(c,d));' },
+    })
+    model.setWidth(1000)
+    model.setDrawLabels(false)
+    model.setDrawNodeBubbles(drawNodeBubbles)
+
+    let arcs = 0
+    const ctx = {
+      font: '12px sans-serif',
+      beginPath() {},
+      stroke() {},
+      fill() {},
+      resetTransform() {},
+      scale() {},
+      translate() {},
+      moveTo() {},
+      lineTo() {},
+      arc() {
+        arcs++
+      },
+    } as unknown as RenderCtx
+
+    const clickMap = new ClickMapIndex()
+    renderTreeCanvas({
+      model,
+      ctx,
+      clickMap,
+      offsetY: 0,
+      theme: { palette: { text: { primary: '#000' } } } as Theme,
+    })
+    return { arcs, hits: clickMap.search(bounds) }
+  }
+
+  it('indexes the internal nodes when the bubbles are drawn', () => {
+    const { arcs, hits } = renderWithBubbles(true)
+    expect(arcs).toBe(3)
+    expect(hits.filter(h => h.branch).length).toBe(3)
+  })
+
+  it('indexes them just the same when the bubbles are off', () => {
+    const { arcs, hits } = renderWithBubbles(false)
+    expect(arcs).toBe(0)
+    expect(hits.filter(h => h.branch).length).toBe(3)
+  })
+})

package/src/components/tree/renderTreeCanvas.ts

@@ -171,6 +171,8 @@ function renderCollapsedTriangles({
   })
 }
 
+// the bubbles are click targets whether or not they are painted, so this pass
+// always runs and `draw` only decides whether it also strokes the circles
 function renderNodeBubbles({
   ctx,
   clickMap,
@@ -180,6 +182,7 @@ function renderNodeBubbles({
   maxDepthToLeaf,
   blockSizeYOverride,
   collapsedSet,
+  draw,
 }: {
   ctx: RenderCtx
   clickMap?: ClickMapIndex
@@ -189,6 +192,7 @@ function renderNodeBubbles({
   maxDepthToLeaf: number
   blockSizeYOverride?: number
   collapsedSet: Set<string>
+  draw: boolean
 }) {
   const {
     hierarchy,
@@ -207,12 +211,14 @@ function renderNodeBubbles({
     const { id, name } = data
     if (node.height >= 1 && inYBlock(y, offsetY, by)) {
       const isCollapsed = collapsedSet.has(id)
-      ctx.strokeStyle = 'black'
-      ctx.fillStyle = isCollapsed ? 'black' : 'white'
-      ctx.beginPath()
-      ctx.arc(x, y, radius, 0, 2 * Math.PI)
-      ctx.fill()
-      ctx.stroke()
+      if (draw) {
+        ctx.strokeStyle = 'black'
+        ctx.fillStyle = isCollapsed ? 'black' : 'white'
+        ctx.beginPath()
+        ctx.arc(x, y, radius, 0, 2 * Math.PI)
+        ctx.fill()
+        ctx.stroke()
+      }
 
       // collapsed nodes get their click/hover target from the triangle pass,
       // which covers the apex bubble and carries a descriptive label
@@ -417,18 +423,17 @@ export function renderTreeCanvas({
       collapsedSet,
     })
 
-    if (drawNodeBubbles) {
-      renderNodeBubbles({
-        ctx,
-        offsetY,
-        clickMap,
-        model,
-        tipX,
-        maxDepthToLeaf,
-        blockSizeYOverride,
-        collapsedSet,
-      })
-    }
+    renderNodeBubbles({
+      ctx,
+      offsetY,
+      clickMap,
+      model,
+      tipX,
+      maxDepthToLeaf,
+      blockSizeYOverride,
+      collapsedSet,
+      draw: drawNodeBubbles,
+    })
   }
 
   if (showTreeText) {