react-msaview 5.1.0 → 5.2.0

package/dist/rowCoordinateCalculations.d.ts

@@ -33,15 +33,6 @@ export declare function visibleColToGlobalCol(blanks: number[], visibleCol: numb
  * @returns The visible column index, or undefined if the column is hidden
  */
 export declare function globalColToVisibleCol(blanks: number[], globalCol: number): number | undefined;
-/**
- * Convert a global column index to a row-specific sequence position.
- * This counts non-gap characters up to the given global column.
- *
- * @param seq - The row's sequence string (including gaps)
- * @param globalCol - The global column index
- * @returns The sequence position (count of non-gap characters before this column)
- */
-export declare function globalColToSeqPos(seq: string, globalCol: number): number;
 /**
  * Convert a visible column to a row-specific sequence position.
  * Returns undefined if the position is a gap in the sequence.

package/dist/rowCoordinateCalculations.js

@@ -75,26 +75,6 @@ export function globalColToVisibleCol(blanks, globalCol) {
     const blanksBefore = left;
     return globalCol - blanksBefore;
 }
-/**
- * Convert a global column index to a row-specific sequence position.
- * This counts non-gap characters up to the given global column.
- *
- * @param seq - The row's sequence string (including gaps)
- * @param globalCol - The global column index
- * @returns The sequence position (count of non-gap characters before this column)
- */
-export function globalColToSeqPos(seq, globalCol) {
-    let seqPos = 0;
-    let currentCol = 0;
-    const seqLen = seq.length;
-    while (currentCol < globalCol && currentCol < seqLen) {
-        if (!isBlank(seq[currentCol])) {
-            seqPos++;
-        }
-        currentCol++;
-    }
-    return seqPos;
-}
 /**
  * Convert a visible column to a row-specific sequence position.
  * Returns undefined if the position is a gap in the sequence.

package/dist/rowCoordinateCalculations.js.map

@@ -1 +1 @@
-{"version":3,"file":"rowCoordinateCalculations.js","sourceRoot":"","sources":["../src/rowCoordinateCalculations.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"rowCoordinateCalculations.js","sourceRoot":"","sources":["../src/rowCoordinateCalculations.ts"],"names":[],"mappings":"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"}

package/dist/util.d.ts

@@ -1,4 +1,5 @@
 import type { Theme } from '@mui/material';
+export declare function adjustColorForContrast(color: string, bg: string): string;
 export declare function transform<T>(obj: Record<string, T>, cb: (arg0: [string, T]) => [string, T]): {
     [k: string]: T;
 };

package/dist/util.js

@@ -1,6 +1,28 @@
 import { colord, extend } from 'colord';
+import a11yPlugin from 'colord/plugins/a11y';
 import namesPlugin from 'colord/plugins/names';
-extend([namesPlugin]);
+extend([namesPlugin, a11yPlugin]);
+const contrastAdjustCache = new Map();
+// Adjusts a background-tile color until it meets WCAG AA (4.5:1) contrast
+// against `bg`, so it can be used as letter text in letter-color mode.
+// Darkens on light backgrounds, lightens on dark backgrounds.
+export function adjustColorForContrast(color, bg) {
+    const cacheKey = `${color}|${bg}`;
+    const cached = contrastAdjustCache.get(cacheKey);
+    if (cached !== undefined) {
+        return cached;
+    }
+    let c = colord(color);
+    if (!c.isReadable(bg)) {
+        const bgIsDark = colord(bg).luminance() < 0.5;
+        for (let i = 0; i < 40 && !c.isReadable(bg); i++) {
+            c = bgIsDark ? c.lighten(0.05) : c.darken(0.05);
+        }
+    }
+    const result = c.toHex();
+    contrastAdjustCache.set(cacheKey, result);
+    return result;
+}
 export function transform(obj, cb) {
     return Object.fromEntries(Object.entries(obj).map(cb));
 }

package/dist/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,WAAW,MAAM,sBAAsB,CAAA;AAI9C,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC,CAAA;AAErB,MAAM,UAAU,SAAS,CACvB,GAAsB,EACtB,EAAsC;IAEtC,OAAO,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAA;AACxD,CAAC;AAED,MAAM,UAAU,aAAa,CAC3B,WAAmC,EACnC,KAAY;IAEZ,OAAO,SAAS,CAAC,WAAW,EAAE,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC;QACjD,MAAM;QACN,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC;KACrD,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,MAAgB,EAAE,GAAW;IACtD,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACxB,OAAO,GAAG,CAAA;IACZ,CAAC;IACD,MAAM,MAAM,GAAG,EAAE,CAAA;IACjB,IAAI,OAAO,GAAG,CAAC,CAAA;IACf,KAAK,MAAM,QAAQ,IAAI,MAAM,EAAE,CAAC;QAC9B,IAAI,QAAQ,GAAG,OAAO,EAAE,CAAC;YACvB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;QAC3C,CAAC;QACD,OAAO,GAAG,QAAQ,GAAG,CAAC,CAAA;IACxB,CAAC;IACD,IAAI,OAAO,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC;QACzB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAA;IACjC,CAAC;IACD,OAAO,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxB,CAAC;AAED,MAAM,UAAU,GAAG,CAAC,CAAiC;IACnD,OAAO,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,KAAK,CAAA;AACxB,CAAC;AAED,8CAA8C;AAC9C,oCAAoC;AACpC,MAAM,UAAU,OAAO,CAAC,CAAU;IAChC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAA;AAC/B,CAAC"}
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"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"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "5.1.0";
+export declare const version = "5.2.0";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '5.1.0';
+export const version = '5.2.0';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -38,12 +38,12 @@
     "@types/node": "^25.9.1"
   },
   "dependencies": {
-    "@mui/icons-material": "^9.0.1",
-    "@mui/material": "^9.0.1",
+    "@mui/icons-material": "^7.3.11",
+    "@mui/material": "^7.3.11",
     "colord": "^2.9.3",
     "flatbush": "^4.5.1",
-    "@jbrowse/svgcanvas": "5.1.0",
-    "msa-parsers": "5.1.0"
+    "msa-parsers": "5.2.0",
+    "@jbrowse/svgcanvas": "5.2.0"
   },
   "scripts": {
     "clean": "rimraf dist bundle",

package/src/calculateBlocks.ts

@@ -1,58 +1,25 @@
-export function blocksY({
-  mapHeight,
+// Returns the block offsets (in pixels) needed to cover the viewport along one
+// axis. mapSize/viewportPos/viewportSize are all in pixels. The clamp pins the
+// block set to the content edge so an over-scroll past the end still fills the
+// viewport rather than leaving a gap.
+export function calculateBlocks({
+  mapSize,
   blockSize,
-  viewportY,
-  viewportHeight,
+  viewportPos,
+  viewportSize,
 }: {
-  mapHeight: number
+  mapSize: number
   blockSize: number
-  viewportY: number
-  viewportHeight: number
+  viewportPos: number
+  viewportSize: number
 }) {
-  const clampedViewportY = Math.max(
-    0,
-    Math.min(viewportY, mapHeight * blockSize - viewportHeight),
-  )
+  const clamped = Math.max(0, Math.min(viewportPos, mapSize - viewportSize))
+  const minTile = Math.floor(clamped / blockSize)
+  const maxTile = Math.floor((clamped + viewportSize - 1) / blockSize)
 
-  // Calculate visible tile ranges
-  const minTileY = Math.floor(clampedViewportY / blockSize)
-  const maxTileY = Math.floor(
-    (clampedViewportY + viewportHeight - 1) / blockSize,
-  )
-
-  // Generate list of visible tiles
-  const blocksY = []
-  for (let tileY = minTileY; tileY <= maxTileY; tileY++) {
-    blocksY.push(tileY * blockSize)
+  const blocks = []
+  for (let tile = minTile; tile <= maxTile; tile++) {
+    blocks.push(tile * blockSize)
   }
-
-  return blocksY
-}
-
-export function blocksX({
-  mapWidth,
-  blockSize,
-  viewportX,
-  viewportWidth,
-}: {
-  mapWidth: number
-  blockSize: number
-  viewportX: number
-  viewportWidth: number
-}) {
-  const clampedViewportX = Math.max(
-    0,
-    Math.min(viewportX, mapWidth - viewportWidth),
-  )
-
-  const minTileX = Math.floor(clampedViewportX / blockSize)
-  const maxTileX = Math.floor(
-    (clampedViewportX + viewportWidth - 1) / blockSize,
-  )
-  const blocksX = []
-  for (let tileX = minTileX; tileX <= maxTileX; tileX++) {
-    blocksX.push(tileX * blockSize)
-  }
-
-  return blocksX
+  return blocks
 }

package/src/components/ConservationTrack.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 
 import { ResizeHandle } from '@jbrowse/core/ui'
+import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
 import { drawConservationBars } from './tracks/renderTracksSvg.ts'
@@ -17,42 +18,32 @@ const ConservationBlock = observer(function ({
   offsetX: number
   trackHeight: number
 }) {
-  const { blockSize, scrollX, colWidth, highResScaleFactor, conservation } =
-    model
+  const { blockSize, scrollX, highResScaleFactor } = model
 
   const ref = useRef<HTMLCanvasElement>(null)
 
   useEffect(() => {
-    if (!ref.current) {
-      return
-    }
-
-    const ctx = ref.current.getContext('2d')
+    const ctx = ref.current?.getContext('2d')
     if (!ctx) {
       return
     }
+    return autorun(() => {
+      const { blockSize, colWidth, highResScaleFactor, conservation } = model
+      ctx.resetTransform()
+      ctx.scale(highResScaleFactor, highResScaleFactor)
+      ctx.clearRect(0, 0, blockSize, trackHeight)
+      ctx.translate(-offsetX, 0)
 
-    ctx.resetTransform()
-    ctx.scale(highResScaleFactor, highResScaleFactor)
-    ctx.clearRect(0, 0, blockSize, trackHeight)
-    ctx.translate(-offsetX, 0)
-
-    drawConservationBars({
-      ctx,
-      conservation,
-      colWidth,
-      trackHeight,
-      offsetX,
-      blockSize,
+      drawConservationBars({
+        ctx,
+        conservation,
+        colWidth,
+        trackHeight,
+        offsetX,
+        blockSize,
+      })
     })
-  }, [
-    blockSize,
-    colWidth,
-    trackHeight,
-    offsetX,
-    highResScaleFactor,
-    conservation,
-  ])
+  }, [model, offsetX, trackHeight])
 
   return (
     <canvas

package/src/components/TextTrack.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react'
 
+import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
 import { useColorContrast } from '../useColorContrast.ts'
@@ -20,10 +21,7 @@ const AnnotationBlock = observer(function ({
   const {
     blockSize,
     scrollX,
-    bgColor,
     colorScheme: modelColorScheme,
-    colWidth,
-    fontSize,
     rowHeight,
     highResScaleFactor,
   } = model
@@ -31,49 +29,43 @@ const AnnotationBlock = observer(function ({
     model: { customColorScheme, data },
   } = track
 
-  const colorScheme = customColorScheme || modelColorScheme
+  const colorScheme = customColorScheme ?? modelColorScheme
   const ref = useRef<HTMLCanvasElement>(null)
   const { contrastScheme } = useColorContrast(colorScheme)
   useEffect(() => {
-    if (!ref.current) {
-      return
-    }
-
-    const ctx = ref.current.getContext('2d')
+    const ctx = ref.current?.getContext('2d')
     if (!ctx) {
       return
     }
+    return autorun(() => {
+      const {
+        blockSize,
+        bgColor,
+        colWidth,
+        fontSize,
+        rowHeight,
+        highResScaleFactor,
+      } = model
+      ctx.resetTransform()
+      ctx.scale(highResScaleFactor, highResScaleFactor)
+      ctx.clearRect(0, 0, blockSize, rowHeight)
+      ctx.translate(-offsetX, 0)
+      ctx.textAlign = 'center'
+      ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
 
-    ctx.resetTransform()
-    ctx.scale(highResScaleFactor, highResScaleFactor)
-    ctx.clearRect(0, 0, blockSize, rowHeight)
-    ctx.translate(-offsetX, 0)
-    ctx.textAlign = 'center'
-    ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
-
-    drawTextTrackContent({
-      ctx,
-      data,
-      colorScheme,
-      contrastScheme,
-      bgColor,
-      colWidth,
-      rowHeight,
-      offsetX,
-      blockSize,
+      drawTextTrackContent({
+        ctx,
+        data,
+        colorScheme,
+        contrastScheme,
+        bgColor,
+        colWidth,
+        rowHeight,
+        offsetX,
+        blockSize,
+      })
     })
-  }, [
-    fontSize,
-    bgColor,
-    blockSize,
-    colWidth,
-    rowHeight,
-    offsetX,
-    contrastScheme,
-    colorScheme,
-    highResScaleFactor,
-    data,
-  ])
+  }, [model, offsetX, contrastScheme, colorScheme, data])
   return (
     <canvas
       ref={ref}

package/src/components/dialogs/ExportSVGDialog.tsx

@@ -28,13 +28,21 @@ export default function ExportSVGDialog({
 }) {
   const [includeMinimap, setIncludeMinimap] = useState(true)
   const [includeTracks, setIncludeTracks] = useState(true)
-  const [exportType, setExportType] = useState('viewport')
+  const [exportType, setExportType] = useState<'entire' | 'viewport'>(
+    'viewport',
+  )
   const [error, setError] = useState<unknown>()
   const theme = useTheme()
-  const { totalWidth, totalHeight, treeAreaWidth, turnedOnTracks } = model
+  const {
+    totalWidth,
+    totalHeight,
+    treeAreaWidth,
+    turnedOnTracks,
+    totalTrackAreaHeight,
+  } = model
   const hasTracks = turnedOnTracks.length > 0
   const entireWidth = totalWidth + treeAreaWidth
-  const entireHeight = totalHeight
+  const entireHeight = totalHeight + (includeTracks ? totalTrackAreaHeight : 0)
   const isLargeExport =
     exportType === 'entire' && (entireWidth > 10000 || entireHeight > 10000)
   return (
@@ -71,7 +79,10 @@ export default function ExportSVGDialog({
             <RadioGroup
               value={exportType}
               onChange={event => {
-                setExportType(event.target.value)
+                const { value } = event.target
+                if (value === 'entire' || value === 'viewport') {
+                  setExportType(value)
+                }
               }}
             >
               <FormControlLabel
@@ -99,22 +110,21 @@ export default function ExportSVGDialog({
           variant="contained"
           color="primary"
           onClick={() => {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            ;(async () => {
-              try {
-                await model.exportSVG({
-                  theme,
-                  includeMinimap:
-                    exportType === 'entire' ? false : includeMinimap,
-                  includeTracks: hasTracks && includeTracks,
-                  exportType,
-                })
+            void model
+              .exportSVG({
+                theme,
+                includeMinimap:
+                  exportType === 'entire' ? false : includeMinimap,
+                includeTracks: hasTracks && includeTracks,
+                exportType,
+              })
+              .then(() => {
                 onClose()
-              } catch (e) {
+              })
+              .catch((e: unknown) => {
                 console.error(e)
                 setError(e)
-              }
-            })()
+              })
           }}
         >
           Submit

package/src/components/dialogs/InterProScanDialog.tsx

@@ -258,7 +258,12 @@ const InterProScanDialog = observer(function ({
                   onProgress: arg => {
                     model.setStatus(
                       arg
-                        ? { ...arg, onCancel: () => { controller.abort() } }
+                        ? {
+                            ...arg,
+                            onCancel: () => {
+                              controller.abort()
+                            },
+                          }
                         : undefined,
                     )
                   },

package/src/components/header/FileMenu.tsx

@@ -3,6 +3,7 @@ import React, { lazy } from 'react'
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 import Assignment from '@mui/icons-material/Assignment'
 import FolderOpen from '@mui/icons-material/FolderOpen'
+import Menu from '@mui/icons-material/Menu'
 import PhotoCamera from '@mui/icons-material/PhotoCamera'
 import Settings from '@mui/icons-material/Settings'
 import { observer } from 'mobx-react'
@@ -76,7 +77,7 @@ const FileMenu = observer(({ model }: { model: MsaViewModel }) => {
       anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}
     >
-      <FolderOpen />
+      <Menu />
     </CascadingMenuButton>
   )
 })

package/src/components/header/Header.tsx

@@ -23,7 +23,7 @@ const AboutDialog = lazy(() => import('../dialogs/AboutDialog.tsx'))
 const Header = observer(function ({ model }: { model: MsaViewModel }) {
   const [ref, { height }] = useMeasure()
   useEffect(() => {
-    model.setHeaderHeight(height || 0)
+    model.setHeaderHeight(height ?? 0)
   }, [model, height])
   return (
     <div ref={ref} style={{ display: 'flex' }}>

package/src/components/header/settingsMenuItems.ts

@@ -8,19 +8,25 @@ export function msaSettingsMenuItems(model: MsaViewModel): MenuItem[] {
       label: 'Draw letters',
       type: 'checkbox',
       checked: drawMsaLetters,
-      onClick: () => { model.setDrawMsaLetters(!drawMsaLetters) },
+      onClick: () => {
+        model.setDrawMsaLetters(!drawMsaLetters)
+      },
     },
     {
       label: 'Color letters instead of background of tiles',
       type: 'checkbox',
       checked: !bgColor,
-      onClick: () => { model.setBgColor(!bgColor) },
+      onClick: () => {
+        model.setBgColor(!bgColor)
+      },
     },
     {
       label: 'Enable hiding gappy columns?',
       type: 'checkbox',
       checked: hideGaps,
-      onClick: () => { model.setHideGaps(!hideGaps) },
+      onClick: () => {
+        model.setHideGaps(!hideGaps)
+      },
     },
   ]
 }
@@ -38,31 +44,41 @@ export function treeSettingsMenuItems(model: MsaViewModel): MenuItem[] {
       label: 'Show branch length',
       type: 'checkbox',
       checked: showBranchLen,
-      onClick: () => { model.setShowBranchLen(!showBranchLen) },
+      onClick: () => {
+        model.setShowBranchLen(!showBranchLen)
+      },
     },
     {
       label: 'Show tree',
       type: 'checkbox',
       checked: drawTree,
-      onClick: () => { model.setDrawTree(!drawTree) },
+      onClick: () => {
+        model.setDrawTree(!drawTree)
+      },
     },
     {
       label: 'Draw clickable bubbles on tree branches',
       type: 'checkbox',
       checked: drawNodeBubbles,
-      onClick: () => { model.setDrawNodeBubbles(!drawNodeBubbles) },
+      onClick: () => {
+        model.setDrawNodeBubbles(!drawNodeBubbles)
+      },
     },
     {
       label: 'Tree labels align right',
       type: 'checkbox',
       checked: labelsAlignRight,
-      onClick: () => { model.setLabelsAlignRight(!labelsAlignRight) },
+      onClick: () => {
+        model.setLabelsAlignRight(!labelsAlignRight)
+      },
     },
     {
       label: 'Draw labels',
       type: 'checkbox',
       checked: drawLabels,
-      onClick: () => { model.setDrawLabels(!drawLabels) },
+      onClick: () => {
+        model.setDrawLabels(!drawLabels)
+      },
     },
   ]
 }

package/src/components/minimap/Minimap.tsx

@@ -69,12 +69,7 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
       <svg height={polygonHeight} style={{ width: '100%' }}>
         <polygon
           fill={fill}
-          points={[
-            [s + w, 0],
-            [s, 0],
-            [0, polygonHeight],
-            [msaAreaWidth, polygonHeight],
-          ].toString()}
+          points={`${s + w},0 ${s},0 0,${polygonHeight} ${msaAreaWidth},${polygonHeight}`}
         />
       </svg>
     </div>

package/src/components/minimap/MinimapSVG.tsx

@@ -14,13 +14,14 @@ const MinimapSVG = observer(({ model }: { model: MsaViewModel }) => {
   } = model
 
   const BAR_HEIGHT = 12
-  const H2 = H - 12
+  const H2 = H - BAR_HEIGHT
 
   const unit = W / numColumns / colWidth
   const left = -scrollX
   const right = left + W
   const s = left * unit
   const e = right * unit
+  const w = Math.max(e - s, 20)
   const fillColor = 'rgb(66, 119, 127)'
   const fillOpacity = 0.3
 
@@ -37,7 +38,7 @@ const MinimapSVG = observer(({ model }: { model: MsaViewModel }) => {
       <rect
         x={Math.max(0, s)}
         y={0}
-        width={e - s}
+        width={w}
         height={BAR_HEIGHT}
         fill={fillColor}
         fillOpacity={fillOpacity}
@@ -47,12 +48,7 @@ const MinimapSVG = observer(({ model }: { model: MsaViewModel }) => {
         <polygon
           fill={fillColor}
           fillOpacity={fillOpacity}
-          points={[
-            [e, 0],
-            [s, 0],
-            [0, H2],
-            [W, H2],
-          ].toString()}
+          points={`${s + w},0 ${s},0 0,${H2} ${W},${H2}`}
         />
       </g>
     </>

package/src/components/msa/getVisibleLeaves.ts

@@ -0,0 +1,21 @@
+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.
+export function getVisibleLeaves({
+  model,
+  offsetY,
+  blockSizeY,
+}: {
+  model: MsaViewModel
+  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)
+}