react-msaview 5.9.0 → 5.10.0

package/dist/seqPosToGlobalCol.js

@@ -1,24 +1,14 @@
-import { isBlank } from './util.js';
 /**
- * Convert a sequence position (ungapped, 0-based) to a global column index.
- * This finds the global column that contains the Nth non-gap character.
+ * The global column of every ungapped sequence position in a row, i.e.
+ * index[seqPos] is the column holding the seqPos-th non-gap character.
  *
- * @param row - The row's sequence string (including gaps)
- * @param seqPos - The sequence position (0-based count of non-gap characters)
- * @returns The global column index containing the seqPos-th non-gap character
+ * A row is indexed once and then answers seqPos -> column by lookup, which is
+ * what makes the domain overlay affordable: it resolves one position per feature
+ * per row on every redraw, and scanning the row for each would be quadratic.
  *
  * @example
  * // Row: "A-TG-C" (A at 0, T at 2, G at 3, C at 5)
- * seqPosToGlobalCol({ row: "A-TG-C", seqPos: 0 }) // → 0 (A)
- * seqPosToGlobalCol({ row: "A-TG-C", seqPos: 1 }) // → 2 (T)
- * seqPosToGlobalCol({ row: "A-TG-C", seqPos: 2 }) // → 3 (G)
- * seqPosToGlobalCol({ row: "A-TG-C", seqPos: 3 }) // → 5 (C)
- */
-/**
- * The global column of every ungapped sequence position in a row, i.e.
- * index[seqPos] is the column holding the seqPos-th non-gap character. Amortizes
- * repeated seqPosToGlobalCol lookups (the domain overlay does one per feature
- * per row) into a single pass per row.
+ * buildSeqPosIndex('A-TG-C') // → [0, 2, 3, 5]
  */
 export function buildSeqPosIndex(row) {
     const index = new Int32Array(row.length);
@@ -31,21 +21,4 @@ export function buildSeqPosIndex(row) {
     }
     return index.subarray(0, n);
 }
-export function seqPosToGlobalCol({ row, seqPos, }) {
-    let nonGapCount = 0;
-    let globalCol = 0;
-    // Find the seqPos-th non-gap character
-    while (globalCol < row.length) {
-        if (!isBlank(row[globalCol])) {
-            if (nonGapCount === seqPos) {
-                return globalCol;
-            }
-            nonGapCount++;
-        }
-        globalCol++;
-    }
-    // If seqPos is 0 and we didn't find any non-gap character, return 0
-    // Otherwise return globalCol (which is row.length at this point)
-    return seqPos === 0 ? 0 : globalCol;
-}
 //# sourceMappingURL=seqPosToGlobalCol.js.map

package/dist/seqPosToGlobalCol.js.map

@@ -1 +1 @@
-{"version":3,"file":"seqPosToGlobalCol.js","sourceRoot":"","sources":["../src/seqPosToGlobalCol.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC;;;;;;;;;;;;;;GAcG;AACH;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAC,GAAW;IAC1C,MAAM,KAAK,GAAG,IAAI,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IACxC,IAAI,CAAC,GAAG,CAAC,CAAA;IACT,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC;QAC1C,oEAAoE;QACpE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;YAC7C,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,GAAG,CAAA;QAClB,CAAC;IACH,CAAC;IACD,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAC7B,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,EAChC,GAAG,EACH,MAAM,GAIP;IACC,IAAI,WAAW,GAAG,CAAC,CAAA;IACnB,IAAI,SAAS,GAAG,CAAC,CAAA;IACjB,uCAAuC;IACvC,OAAO,SAAS,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC;QAC9B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;YAC7B,IAAI,WAAW,KAAK,MAAM,EAAE,CAAC;gBAC3B,OAAO,SAAS,CAAA;YAClB,CAAC;YACD,WAAW,EAAE,CAAA;QACf,CAAC;QACD,SAAS,EAAE,CAAA;IACb,CAAC;IACD,oEAAoE;IACpE,iEAAiE;IACjE,OAAO,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;AACrC,CAAC"}
+{"version":3,"file":"seqPosToGlobalCol.js","sourceRoot":"","sources":["../src/seqPosToGlobalCol.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,gBAAgB,CAAC,GAAW;IAC1C,MAAM,KAAK,GAAG,IAAI,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IACxC,IAAI,CAAC,GAAG,CAAC,CAAA;IACT,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC;QAC1C,oEAAoE;QACpE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;YAC7C,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,GAAG,CAAA;QAClB,CAAC;IACH,CAAC;IACD,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAC7B,CAAC"}

package/dist/useCanvasAutorun.d.ts

@@ -1,2 +1,24 @@
 import type React from 'react';
-export declare function useCanvasAutorun(draw: (ctx: CanvasRenderingContext2D) => void, deps: React.DependencyList): React.RefObject<HTMLCanvasElement | null>;
+/**
+ * Wires a canvas ref to a mobx autorun: grabs the 2d context once the canvas
+ * mounts and re-runs `draw` whenever any observable it reads changes. Collapses
+ * the getContext/null-guard/autorun-dispose boilerplate repeated by every canvas
+ * block host.
+ *
+ * `width`/`height` are the canvas *backing store* size the caller renders onto
+ * the element (logical size times the high-res scale factor), and they are load
+ * bearing rather than informational. Assigning either resets the canvas bitmap,
+ * and React assigns them on every commit where they changed -- which lands
+ * *after* the mobx reaction that already redrew at the old size. Without a redraw
+ * on the far side of that commit the canvas is left blank: it is what blanked the
+ * tree on a tree-area resize and the consensus tracks on a vertical zoom.
+ *
+ * `deps` covers everything else the effect should re-subscribe on, matching a
+ * normal useEffect dep array.
+ */
+export declare function useCanvasAutorun({ draw, width, height, deps, }: {
+    draw: (ctx: CanvasRenderingContext2D) => void;
+    width: number;
+    height: number;
+    deps: React.DependencyList;
+}): React.RefObject<HTMLCanvasElement | null>;

package/dist/useCanvasAutorun.js

@@ -1,14 +1,26 @@
 import { useEffect, useRef } from 'react';
 import { autorun } from 'mobx';
-// Wires a canvas ref to a mobx autorun: grabs the 2d context once the canvas
-// mounts and re-runs `draw` whenever any observable it reads changes. Collapses
-// the getContext/null-guard/autorun-dispose boilerplate repeated by every
-// canvas block host. `deps` controls when the effect (and thus the context
-// lookup) is torn down and re-created, matching a normal useEffect dep array.
-export function useCanvasAutorun(draw, deps) {
+/**
+ * Wires a canvas ref to a mobx autorun: grabs the 2d context once the canvas
+ * mounts and re-runs `draw` whenever any observable it reads changes. Collapses
+ * the getContext/null-guard/autorun-dispose boilerplate repeated by every canvas
+ * block host.
+ *
+ * `width`/`height` are the canvas *backing store* size the caller renders onto
+ * the element (logical size times the high-res scale factor), and they are load
+ * bearing rather than informational. Assigning either resets the canvas bitmap,
+ * and React assigns them on every commit where they changed -- which lands
+ * *after* the mobx reaction that already redrew at the old size. Without a redraw
+ * on the far side of that commit the canvas is left blank: it is what blanked the
+ * tree on a tree-area resize and the consensus tracks on a vertical zoom.
+ *
+ * `deps` covers everything else the effect should re-subscribe on, matching a
+ * normal useEffect dep array.
+ */
+export function useCanvasAutorun({ draw, width, height, deps, }) {
     const ref = useRef(null);
     // the autorun tracks its own observable reads, so `draw` is intentionally not
-    // a dependency; `deps` alone controls when the effect re-subscribes
+    // a dependency; `deps` plus the canvas size control when it re-subscribes
     useEffect(() => {
         const ctx = ref.current?.getContext('2d');
         return ctx
@@ -17,7 +29,7 @@ export function useCanvasAutorun(draw, deps) {
             })
             : undefined;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
+    }, [...deps, width, height]);
     return ref;
 }
 //# sourceMappingURL=useCanvasAutorun.js.map

package/dist/useCanvasAutorun.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCanvasAutorun.js","sourceRoot":"","sources":["../src/useCanvasAutorun.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAA;AAI9B,6EAA6E;AAC7E,gFAAgF;AAChF,0EAA0E;AAC1E,2EAA2E;AAC3E,8EAA8E;AAC9E,MAAM,UAAU,gBAAgB,CAC9B,IAA6C,EAC7C,IAA0B;IAE1B,MAAM,GAAG,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IAC3C,8EAA8E;IAC9E,oEAAoE;IACpE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,CAAA;QACzC,OAAO,GAAG;YACR,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE;gBACX,IAAI,CAAC,GAAG,CAAC,CAAA;YACX,CAAC,CAAC;YACJ,CAAC,CAAC,SAAS,CAAA;QACb,uDAAuD;IACzD,CAAC,EAAE,IAAI,CAAC,CAAA;IACR,OAAO,GAAG,CAAA;AACZ,CAAC"}
+{"version":3,"file":"useCanvasAutorun.js","sourceRoot":"","sources":["../src/useCanvasAutorun.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAA;AAI9B;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,MAAM,EACN,IAAI,GAML;IACC,MAAM,GAAG,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IAC3C,8EAA8E;IAC9E,0EAA0E;IAC1E,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,CAAA;QACzC,OAAO,GAAG;YACR,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE;gBACX,IAAI,CAAC,GAAG,CAAC,CAAA;YACX,CAAC,CAAC;YACJ,CAAC,CAAC,SAAS,CAAA;QACb,uDAAuD;IACzD,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;IAC5B,OAAO,GAAG,CAAA;AACZ,CAAC"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "5.9.0";
+export declare const version = "5.10.0";

package/dist/version.js

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

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAA"}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "5.9.0",
+  "version": "5.10.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -43,8 +43,8 @@
     "@gmod/newick": "^1.0.0",
     "colord": "^2.9.3",
     "flatbush": "^4.6.2",
-    "@jbrowse/svgcanvas": "5.9.0",
-    "msa-parsers": "5.9.0"
+    "@jbrowse/svgcanvas": "5.10.0",
+    "msa-parsers": "5.10.0"
   },
   "scripts": {
     "clean": "rimraf dist bundle",

package/src/components/ConservationTrack.tsx

@@ -25,9 +25,9 @@ const ConservationBlock = observer(function ({
 }) {
   const { blockSize, scrollX, highResScaleFactor } = model
 
-  const ref = useCanvasAutorun(
-    ctx => {
-      const { blockSize, colWidth, highResScaleFactor } = model
+  const ref = useCanvasAutorun({
+    draw: ctx => {
+      const { colWidth } = model
       ctx.resetTransform()
       ctx.scale(highResScaleFactor, highResScaleFactor)
       ctx.clearRect(0, 0, blockSize, trackHeight)
@@ -43,8 +43,10 @@ const ConservationBlock = observer(function ({
         blockSize,
       })
     },
-    [model, track, offsetX, trackHeight],
-  )
+    width: blockSize * highResScaleFactor,
+    height: trackHeight * highResScaleFactor,
+    deps: [model, track, offsetX, trackHeight],
+  })
 
   return (
     <canvas

package/src/components/MSAView.tsx

@@ -11,6 +11,7 @@ import VerticalScrollbar from './VerticalScrollbar.tsx'
 import Header from './header/Header.tsx'
 import Minimap from './minimap/Minimap.tsx'
 import MSAPanel from './msa/MSAPanel.tsx'
+import { clickColor, hoverColor } from './overlayColors.ts'
 import TreePanel from './tree/TreePanel.tsx'
 import TreeRuler from './tree/TreeRuler.tsx'
 
@@ -43,47 +44,40 @@ const TrackColumnIndicator = observer(function ({
     verticalScrollbarWidth,
   } = model
 
-  const left = treeAreaWidth + resizeHandleWidth
-  const clipWidth = msaAreaWidth - verticalScrollbarWidth
+  // hovered column, then the pinned one, matching the alignment's own overlay
+  const bands = [
+    { col: mouseCol, color: hoverColor },
+    { col: mouseClickCol, color: clickColor },
+  ]
 
   return (
     <div
       style={{
         position: 'absolute',
-        left,
+        left: treeAreaWidth + resizeHandleWidth,
         top: 0,
-        width: clipWidth,
+        width: msaAreaWidth - verticalScrollbarWidth,
         height: totalTrackAreaHeight,
         overflow: 'hidden',
         pointerEvents: 'none',
       }}
     >
-      {mouseCol !== undefined ? (
-        <div
-          style={{
-            position: 'absolute',
-            left: mouseCol * colWidth + scrollX,
-            top: 0,
-            width: colWidth,
-            height: totalTrackAreaHeight,
-            backgroundColor: 'rgba(0,0,0,0.15)',
-            zIndex: 100,
-          }}
-        />
-      ) : null}
-      {mouseClickCol !== undefined ? (
-        <div
-          style={{
-            position: 'absolute',
-            left: mouseClickCol * colWidth + scrollX,
-            top: 0,
-            width: colWidth,
-            height: totalTrackAreaHeight,
-            backgroundColor: 'rgba(128,128,0,0.2)',
-            zIndex: 100,
-          }}
-        />
-      ) : null}
+      {bands.map(({ col, color }) =>
+        col === undefined ? null : (
+          <div
+            key={color}
+            style={{
+              position: 'absolute',
+              left: col * colWidth + scrollX,
+              top: 0,
+              width: colWidth,
+              height: totalTrackAreaHeight,
+              backgroundColor: color,
+              zIndex: 100,
+            }}
+          />
+        ),
+      )}
     </div>
   )
 })

package/src/components/TextTrack.tsx

@@ -32,16 +32,9 @@ const AnnotationBlock = observer(function ({
 
   const colorScheme = customColorScheme ?? modelColorScheme
   const { theme, contrastScheme } = useColorContrast(colorScheme)
-  const ref = useCanvasAutorun(
-    ctx => {
-      const {
-        blockSize,
-        bgColor,
-        colWidth,
-        fontSize,
-        rowHeight,
-        highResScaleFactor,
-      } = model
+  const ref = useCanvasAutorun({
+    draw: ctx => {
+      const { bgColor, colWidth, fontSize } = model
       ctx.resetTransform()
       ctx.scale(highResScaleFactor, highResScaleFactor)
       ctx.clearRect(0, 0, blockSize, rowHeight)
@@ -62,8 +55,10 @@ const AnnotationBlock = observer(function ({
         blockSize,
       })
     },
-    [model, offsetX, theme, contrastScheme, colorScheme, data],
-  )
+    width: blockSize * highResScaleFactor,
+    height: rowHeight * highResScaleFactor,
+    deps: [model, offsetX, theme, contrastScheme, colorScheme, data],
+  })
   return (
     <canvas
       ref={ref}

package/src/components/header/settingsMenuItems.ts

@@ -1,41 +1,34 @@
 import type { MsaViewModel } from '../../model.ts'
 import type { MenuItem } from '@jbrowse/core/ui/Menu'
 
+function toggle(label: string, checked: boolean, set: (arg: boolean) => void) {
+  return {
+    label,
+    type: 'checkbox' as const,
+    checked,
+    onClick: () => {
+      set(!checked)
+    },
+  }
+}
+
 export function msaSettingsMenuItems(model: MsaViewModel): MenuItem[] {
   const { drawMsaLetters, hideGaps, bgColor, showColumnStats } = model
   return [
-    {
-      label: 'Show column statistics on hover',
-      type: 'checkbox',
-      checked: showColumnStats,
-      onClick: () => {
-        model.setShowColumnStats(!showColumnStats)
-      },
-    },
-    {
-      label: 'Draw letters',
-      type: 'checkbox',
-      checked: drawMsaLetters,
-      onClick: () => {
-        model.setDrawMsaLetters(!drawMsaLetters)
-      },
-    },
-    {
-      label: 'Color letters instead of background of tiles',
-      type: 'checkbox',
-      checked: !bgColor,
-      onClick: () => {
-        model.setBgColor(!bgColor)
-      },
-    },
-    {
-      label: 'Enable hiding gappy columns?',
-      type: 'checkbox',
-      checked: hideGaps,
-      onClick: () => {
-        model.setHideGaps(!hideGaps)
-      },
-    },
+    toggle('Show column statistics on hover', showColumnStats, arg => {
+      model.setShowColumnStats(arg)
+    }),
+    toggle('Draw letters', drawMsaLetters, arg => {
+      model.setDrawMsaLetters(arg)
+    }),
+    // the checkbox reads as the inverse of the property it sets: bgColor draws
+    // the tile, and turning it off is what leaves the letter itself colored
+    toggle('Color letters instead of background of tiles', !bgColor, arg => {
+      model.setBgColor(!arg)
+    }),
+    toggle('Enable hiding gappy columns?', hideGaps, arg => {
+      model.setHideGaps(arg)
+    }),
   ]
 }
 
@@ -48,45 +41,20 @@ export function treeSettingsMenuItems(model: MsaViewModel): MenuItem[] {
     drawLabels,
   } = model
   return [
-    {
-      label: 'Show branch length',
-      type: 'checkbox',
-      checked: showBranchLen,
-      onClick: () => {
-        model.setShowBranchLen(!showBranchLen)
-      },
-    },
-    {
-      label: 'Show tree',
-      type: 'checkbox',
-      checked: drawTree,
-      onClick: () => {
-        model.setDrawTree(!drawTree)
-      },
-    },
-    {
-      label: 'Draw clickable bubbles on tree branches',
-      type: 'checkbox',
-      checked: drawNodeBubbles,
-      onClick: () => {
-        model.setDrawNodeBubbles(!drawNodeBubbles)
-      },
-    },
-    {
-      label: 'Tree labels align right',
-      type: 'checkbox',
-      checked: labelsAlignRight,
-      onClick: () => {
-        model.setLabelsAlignRight(!labelsAlignRight)
-      },
-    },
-    {
-      label: 'Draw labels',
-      type: 'checkbox',
-      checked: drawLabels,
-      onClick: () => {
-        model.setDrawLabels(!drawLabels)
-      },
-    },
+    toggle('Show branch length', showBranchLen, arg => {
+      model.setShowBranchLen(arg)
+    }),
+    toggle('Show tree', drawTree, arg => {
+      model.setDrawTree(arg)
+    }),
+    toggle('Draw clickable bubbles on tree branches', drawNodeBubbles, arg => {
+      model.setDrawNodeBubbles(arg)
+    }),
+    toggle('Tree labels align right', labelsAlignRight, arg => {
+      model.setLabelsAlignRight(arg)
+    }),
+    toggle('Draw labels', drawLabels, arg => {
+      model.setDrawLabels(arg)
+    }),
   ]
 }

package/src/components/msa/MSACanvasBlock.tsx

@@ -31,24 +31,17 @@ const MSACanvasBlock = observer(function ({
     },
   )
 
-  const ref = useCanvasAutorun(
-    ctx => {
-      const { blockSize, highResScaleFactor, actuallyShowDomains } = model
+  const canvasSize = blockSize * highResScaleFactor
+  const ref = useCanvasAutorun({
+    draw: ctx => {
       ctx.resetTransform()
-      ctx.clearRect(
-        0,
-        0,
-        blockSize * highResScaleFactor,
-        blockSize * highResScaleFactor,
-      )
-      if (actuallyShowDomains) {
-        renderBoxFeatureCanvasBlock({
-          ctx,
-          offsetX,
-          offsetY,
-          model,
-        })
-      }
+      ctx.clearRect(0, 0, canvasSize, canvasSize)
+      renderBoxFeatureCanvasBlock({
+        ctx,
+        offsetX,
+        offsetY,
+        model,
+      })
       renderMSABlock({
         ctx,
         theme,
@@ -58,8 +51,10 @@ const MSACanvasBlock = observer(function ({
         model,
       })
     },
-    [model, offsetX, offsetY, theme, contrastScheme],
-  )
+    width: canvasSize,
+    height: canvasSize,
+    deps: [model, offsetX, offsetY, theme, contrastScheme],
+  })
 
   const { hoveredInsertion, mouseOverDomains, showColumnStats } = model
 
@@ -80,8 +75,8 @@ const MSACanvasBlock = observer(function ({
         onMouseLeave={() => {
           onMouseLeave()
         }}
-        width={blockSize * highResScaleFactor}
-        height={blockSize * highResScaleFactor}
+        width={canvasSize}
+        height={canvasSize}
         style={{
           position: 'absolute',
           top: scrollY + offsetY,

package/src/components/msa/MSAMouseoverCanvas.tsx

@@ -16,21 +16,25 @@ const MSAMouseoverCanvas = observer(function ({
   const { height, msaAreaWidth, verticalScrollbarWidth, highResScaleFactor } =
     model
   const width = msaAreaWidth - verticalScrollbarWidth
-  const ref = useCanvasAutorun(
-    ctx => {
+  const canvasWidth = width * highResScaleFactor
+  const canvasHeight = height * highResScaleFactor
+  const ref = useCanvasAutorun({
+    draw: ctx => {
       if (isAlive(model)) {
         renderMouseover({ ctx, model })
       }
     },
-    [model],
-  )
+    width: canvasWidth,
+    height: canvasHeight,
+    deps: [model],
+  })
 
   return (
     <canvas
       ref={ref}
       id="mouseover"
-      width={width * highResScaleFactor}
-      height={height * highResScaleFactor}
+      width={canvasWidth}
+      height={canvasHeight}
       style={{
         position: 'absolute',
         top: 0,

package/src/components/msa/renderBoxFeatureCanvasBlock.test.ts

@@ -0,0 +1,51 @@
+import { expect, test } from 'vitest'
+
+import stateModelFactory from '../../model.ts'
+import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.ts'
+
+import type { RenderCtx } from '../renderCtx.ts'
+
+const row = 'ACDEFGHIKLMNPQRSTVWY'.repeat(3)
+
+// only `human` carries the gene model; `mouse` is there to push it off the top
+// of the block
+const msa = `>mouse\n${row}\n>human\n${row}`
+
+const gff = `##gff-version 3
+human	src	exon	1	20	.	.	.	ID=human.exon1;Name=exon-1
+human	src	exon	21	40	.	.	.	ID=human.exon2;Name=exon-2
+human	src	exon	41	60	.	.	.	ID=human.exon3;Name=exon-3`
+
+function drawnLabels() {
+  const model = stateModelFactory().create({
+    type: 'MsaView',
+    data: { msa },
+  })
+  model.setWidth(1000)
+  model.setRowHeight(20)
+  // segment numbers are drawn in place of residue letters, never on top of them
+  model.setDrawMsaLetters(false)
+  model.applyGFFText(gff)
+  expect(model.rowNames).toEqual(['mouse', 'human'])
+
+  const labels: string[] = []
+  const ctx = {
+    font: '12px sans-serif',
+    resetTransform() {},
+    scale() {},
+    translate() {},
+    fillRect() {},
+    strokeRect() {},
+    measureText: (text: string) => ({ width: text.length * 6 }),
+    fillText(text: string) {
+      labels.push(text)
+    },
+  } as unknown as RenderCtx
+
+  renderBoxFeatureCanvasBlock({ model, ctx, offsetX: 0, offsetY: 0 })
+  return labels
+}
+
+test('segment numbers are drawn once each, even when row 0 has no gene model', () => {
+  expect(drawnLabels()).toEqual(['1', '2', '3'])
+})

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -77,8 +77,13 @@ function drawTiles({
   const xMin = offsetX - cull
   const xMax = offsetX + blockWidth + cull
 
-  for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
-    const node = visibleLeaves[i]!
+  // a segment (exon) number labels its band once per block, on the topmost
+  // visible row carrying that segment, so it reads as a column header for the
+  // whole band. Keyed by accession rather than drawn on row 0, because the rows
+  // carrying the gene model are often not the first ones in the alignment
+  const labelled = drawSegmentLabels ? new Set<string>() : undefined
+
+  for (const node of visibleLeaves) {
     const y = node.x!
     const bands = domainBands.get(node.data.name)
 
@@ -94,15 +99,15 @@ function drawTiles({
           if (strand === undefined) {
             ctx.fillRect(x, t, lw, h)
             ctx.strokeRect(x, t, lw, h)
-            // segment (exon) number drawn once per band, on the top visible row,
-            // so it reads as a column header for the whole band
-            const label = drawSegmentLabels
-              ? segmentLabels.get(accession)
-              : undefined
-            if (label !== undefined && i === 0) {
+            const label =
+              labelled && !labelled.has(accession)
+                ? segmentLabels.get(accession)
+                : undefined
+            if (label !== undefined) {
               const fontSize = Math.min(h - 2, 11)
               ctx.font = `${fontSize}px sans-serif`
               if (ctx.measureText(label).width + 2 <= lw) {
+                labelled!.add(accession)
                 ctx.fillStyle = '#222'
                 ctx.textAlign = 'center'
                 ctx.textBaseline = 'middle'