react-msaview 5.9.0 → 6.0.0

package/dist/rowCoordinateCalculations.js

@@ -16,6 +16,25 @@ import { isBlank } from './util.js';
  *    This counts only non-gap characters ('-' and '.' are gaps).
  *    Each row can have different seqPos values for the same globalCol due to gaps.
  */
+/**
+ * Index of the first element in `[0, len)` for which `pred` holds, over a range
+ * where `pred` is false up to some point and true from there on. Both
+ * conversions below are that shape, since `blanks` is sorted ascending.
+ */
+function partitionPoint(len, pred) {
+    let left = 0;
+    let right = len;
+    while (left < right) {
+        const mid = (left + right) >>> 1;
+        if (pred(mid)) {
+            right = mid;
+        }
+        else {
+            left = mid + 1;
+        }
+    }
+    return left;
+}
 /**
  * Convert a visible column index to a global column index.
  * This is used when translating mouse/screen coordinates to MSA coordinates.
@@ -25,26 +44,10 @@ import { isBlank } from './util.js';
  * @returns The corresponding global column index in the full MSA
  */
 export function visibleColToGlobalCol(blanks, visibleCol) {
-    let currentVisibleCol = 0;
-    let blankArrayIndex = 0;
-    let globalCol = 0;
-    const blanksLen = blanks.length;
-    // Skip any leading blank columns (blanks at the very beginning)
-    while (blankArrayIndex < blanksLen && blanks[blankArrayIndex] === globalCol) {
-        blankArrayIndex++;
-        globalCol++;
-    }
-    while (currentVisibleCol < visibleCol) {
-        currentVisibleCol++;
-        globalCol++;
-        // Skip any blank columns after incrementing
-        while (blankArrayIndex < blanksLen &&
-            blanks[blankArrayIndex] === globalCol) {
-            blankArrayIndex++;
-            globalCol++;
-        }
-    }
-    return globalCol;
+    // `blanks[i] - i` counts the visible columns before the i-th blank, so the
+    // first blank with more than visibleCol of them in front of it is the first
+    // one sitting past this column. Its index is how many blanks shift it right.
+    return (visibleCol + partitionPoint(blanks.length, i => blanks[i] - i > visibleCol));
 }
 /**
  * Convert a global column index to a visible column index.
@@ -55,25 +58,28 @@ export function visibleColToGlobalCol(blanks, visibleCol) {
  * @returns The visible column index, or undefined if the column is hidden
  */
 export function globalColToVisibleCol(blanks, globalCol) {
-    // Check if this column is hidden
-    // Use binary search since blanks is sorted
-    let left = 0;
-    let right = blanks.length - 1;
-    while (left <= right) {
-        const mid = Math.floor((left + right) / 2);
-        if (blanks[mid] === globalCol) {
-            return undefined; // Column is hidden
-        }
-        if (blanks[mid] < globalCol) {
-            left = mid + 1;
-        }
-        else {
-            right = mid - 1;
-        }
-    }
-    // Count blanks before this column (left is now the insertion point)
-    const blanksBefore = left;
-    return globalCol - blanksBefore;
+    const blanksBefore = countBlanksBefore(blanks, globalCol);
+    return blanks[blanksBefore] === globalCol
+        ? undefined // Column is hidden
+        : globalCol - blanksBefore;
+}
+function countBlanksBefore(blanks, globalCol) {
+    return partitionPoint(blanks.length, i => blanks[i] >= globalCol);
+}
+/**
+ * How many visible columns come before a global column. For a visible column
+ * that is its own visible index; for a hidden one it is the index of the next
+ * visible column, i.e. where the hidden column collapses to.
+ *
+ * That total answer is what spans want: resolving both ends of a span through
+ * globalColToVisibleCol instead loses the whole span whenever either end lands
+ * in a hidden column.
+ *
+ * @param blanks - Sorted array of global column indices that are hidden
+ * @param globalCol - The global column index in the full MSA
+ */
+export function visibleColsBefore(blanks, globalCol) {
+    return globalCol - countBlanksBefore(blanks, globalCol);
 }
 /**
  * Convert a visible column to a row-specific sequence position.

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/seqPosToGlobalCol.d.ts

@@ -1,26 +1,13 @@
 /**
- * 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 declare function buildSeqPosIndex(row: string): Int32Array<ArrayBuffer>;
-export declare function seqPosToGlobalCol({ row, seqPos, }: {
-    row: string;
-    seqPos: number;
-}): number;

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/types.d.ts

@@ -1,3 +1,4 @@
+import type { Annotation } from 'msa-parsers';
 export interface Accession {
     accession: string;
     name: string;
@@ -20,18 +21,10 @@ export interface BasicTrack {
     ReactComponent: React.FC<any>;
     model: TextTrackModel & BarTrackModel;
 }
-export interface TidyDomainAnnotation {
-    id: string;
-    name: string;
-    accession: string;
-    description: string;
-    featureType?: string;
-    start: number;
-    end: number;
-    strand?: number;
-}
+export type { Annotation };
+export type TidyDomainAnnotation = Annotation;
 export interface DomainBand {
-    annotation: TidyDomainAnnotation;
+    annotation: Annotation;
     startCol: number;
     endCol: number;
     stackIndex: number;

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 = "6.0.0";

package/dist/version.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "5.9.0",
+  "version": "6.0.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": "6.0.0",
+    "msa-parsers": "6.0.0"
   },
   "scripts": {
     "clean": "rimraf dist bundle",
@@ -53,8 +53,8 @@
     "build:esm": "tsc --project tsconfig.build.json",
     "build:umd": "node esbuild.mjs",
     "build": "pnpm clean && pnpm build:esm && pnpm build:umd",
-    "statedocs": "rm -rf apidocs && mkdir apidocs && node --experimental-strip-types docgen/generateStateModelDocs.ts",
-    "poststatedocs": "pnpm format",
+    "statedocs": "node --experimental-strip-types docgen/generateStateModelDocs.ts",
+    "poststatedocs": "oxfmt apidocs",
     "test": "vitest"
   },
   "main": "dist/index.js"

package/src/clustalX.ts

@@ -20,34 +20,34 @@ const CYAN = 'rgb(26, 179, 179)'
  */
 export function clustalXColumnColors(counts: ColumnCounts, col: number) {
   const total = counts.total(col)
-  const n = (letter: string) => counts.count(col, letter)
-  const W = n('W')
-  const L = n('L')
-  const V = n('V')
-  const I = n('I')
-  const M = n('M')
-  const A = n('A')
-  const F = n('F')
-  const C = n('C')
-  const H = n('H')
-  const P = n('P')
-  const R = n('R')
-  const K = n('K')
-  const Q = n('Q')
-  const E = n('E')
-  const D = n('D')
-  const T = n('T')
-  const S = n('S')
-  const G = n('G')
-  const Y = n('Y')
-  const N = n('N')
+  const count = (letter: string) => counts.count(col, letter)
+  const W = count('W')
+  const L = count('L')
+  const V = count('V')
+  const I = count('I')
+  const M = count('M')
+  const A = count('A')
+  const F = count('F')
+  const C = count('C')
+  const H = count('H')
+  const P = count('P')
+  const R = count('R')
+  const K = count('K')
+  const Q = count('Q')
+  const E = count('E')
+  const D = count('D')
+  const T = count('T')
+  const S = count('S')
+  const G = count('G')
+  const Y = count('Y')
+  const N = count('N')
 
   const hydrophobic = W + L + V + I + M + A + F + C + H + P + Y
   const KR = K + R
   const QE = Q + E
   const ED = E + D
   const TS = T + S
-  const p = (n: number) => n / total
+  const p = (subtotal: number) => subtotal / total
 
   const colors: Record<string, string> = {}
 

package/src/colSpace.test.ts

@@ -38,3 +38,30 @@ test('the last column agrees with the column statistics', () => {
   expect(model.mouseOverColumnStats?.col).toBe(9)
   expect(model.visibleColToRowLetter('b', 9)).toBe('C')
 })
+
+// enough rows to force the vertical scrollbar, which eats into the width the
+// alignment canvas actually gets
+function makeTallModel() {
+  const names = Array.from({ length: 60 }, (_, i) => `seq${i}`)
+  const model = MSAModelF().create({
+    id: 'col-fit-test',
+    type: 'MsaView',
+    msaFormat: 'fasta',
+    height: 300,
+    data: { msa: names.map(n => `>${n}\n${'ACGT'.repeat(50)}`).join('\n') },
+  })
+  model.setWidth(800)
+  return model
+}
+
+test('fit horizontally leaves every column on screen', () => {
+  const model = makeTallModel()
+  expect(model.showVerticalScrollbar).toBe(true)
+
+  model.fitHorizontally()
+  // the canvas is the msa area minus the scrollbar; fitting to the msa area
+  // alone pushed the last columns past the right edge, with no minimap to
+  // show that anything was cut off
+  expect(model.totalWidth).toBeLessThanOrEqual(model.msaCanvasWidth)
+  expect(model.showHorizontalScrollbar).toBe(false)
+})

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/CopyButton.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef, useState } from 'react'
+
+import { Button } from '@mui/material'
+
+import copy from '../vendor/copyToClipboard.ts'
+
+/**
+ * Copy-to-clipboard button that confirms on the label for a moment. The timer is
+ * cleared on unmount, since these live in dialogs the copy itself often closes.
+ */
+export default function CopyButton({
+  text,
+  label = 'Copy to clipboard',
+}: {
+  text: string
+  label?: string
+}) {
+  const [copied, setCopied] = useState(false)
+  const timer = useRef<ReturnType<typeof setTimeout>>(undefined)
+
+  useEffect(
+    () => () => {
+      clearTimeout(timer.current)
+    },
+    [],
+  )
+
+  return (
+    <Button
+      variant="contained"
+      color="primary"
+      onClick={() => {
+        copy(text)
+        setCopied(true)
+        clearTimeout(timer.current)
+        timer.current = setTimeout(() => {
+          setCopied(false)
+        }, 500)
+      }}
+    >
+      {copied ? 'Copied!' : label}
+    </Button>
+  )
+}

package/src/components/Loading.tsx

@@ -83,7 +83,8 @@ const Reset = observer(function ({
 })
 
 const Loading = observer(function ({ model }: { model: MsaViewModel }) {
-  const { isLoading, dataInitialized, msaFilehandle, treeFilehandle } = model
+  const { isLoading, dataInitialized, error, msaFilehandle, treeFilehandle } =
+    model
   const hasPendingFilehandle = !!(msaFilehandle || treeFilehandle)
 
   return (
@@ -97,6 +98,14 @@ const Loading = observer(function ({ model }: { model: MsaViewModel }) {
           ) : (
             <MSAView model={model} />
           )
+        ) : error ? (
+          // Ahead of the spinner, because a failed load KEEPS its filehandle --
+          // only an abort clears it. So hasPendingFilehandle stays true, this
+          // fell to the spinner below, and the ImportForm that renders
+          // `model.error` was never reached: the reader got "Downloading file"
+          // and a Cancel button for as long as they were willing to watch it.
+          // Found on AlphaFold's files/msa/ prefix answering 403 to every key.
+          <Reset model={model} error={error} />
         ) : hasPendingFilehandle || isLoading ? (
           <LoadingSpinner model={model} />
         ) : (

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'
 
@@ -39,51 +40,43 @@ const TrackColumnIndicator = observer(function ({
     treeAreaWidth,
     resizeHandleWidth,
     totalTrackAreaHeight,
-    msaAreaWidth,
-    verticalScrollbarWidth,
+    msaCanvasWidth,
   } = 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: msaCanvasWidth,
         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>
   )
 })