react-msaview 5.10.0 → 6.1.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":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;GAOG;AACH,MAAM,UAAU,qBAAqB,CAAC,MAAgB,EAAE,UAAkB;IACxE,IAAI,iBAAiB,GAAG,CAAC,CAAA;IACzB,IAAI,eAAe,GAAG,CAAC,CAAA;IACvB,IAAI,SAAS,GAAG,CAAC,CAAA;IACjB,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAA;IAE/B,gEAAgE;IAChE,OAAO,eAAe,GAAG,SAAS,IAAI,MAAM,CAAC,eAAe,CAAC,KAAK,SAAS,EAAE,CAAC;QAC5E,eAAe,EAAE,CAAA;QACjB,SAAS,EAAE,CAAA;IACb,CAAC;IAED,OAAO,iBAAiB,GAAG,UAAU,EAAE,CAAC;QACtC,iBAAiB,EAAE,CAAA;QACnB,SAAS,EAAE,CAAA;QAEX,4CAA4C;QAC5C,OACE,eAAe,GAAG,SAAS;YAC3B,MAAM,CAAC,eAAe,CAAC,KAAK,SAAS,EACrC,CAAC;YACD,eAAe,EAAE,CAAA;YACjB,SAAS,EAAE,CAAA;QACb,CAAC;IACH,CAAC;IAED,OAAO,SAAS,CAAA;AAClB,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,qBAAqB,CACnC,MAAgB,EAChB,SAAiB;IAEjB,iCAAiC;IACjC,2CAA2C;IAC3C,IAAI,IAAI,GAAG,CAAC,CAAA;IACZ,IAAI,KAAK,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAA;IAC7B,OAAO,IAAI,IAAI,KAAK,EAAE,CAAC;QACrB,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAA;QAC1C,IAAI,MAAM,CAAC,GAAG,CAAC,KAAK,SAAS,EAAE,CAAC;YAC9B,OAAO,SAAS,CAAA,CAAC,mBAAmB;QACtC,CAAC;QACD,IAAI,MAAM,CAAC,GAAG,CAAE,GAAG,SAAS,EAAE,CAAC;YAC7B,IAAI,GAAG,GAAG,GAAG,CAAC,CAAA;QAChB,CAAC;aAAM,CAAC;YACN,KAAK,GAAG,GAAG,GAAG,CAAC,CAAA;QACjB,CAAC;IACH,CAAC;IAED,oEAAoE;IACpE,MAAM,YAAY,GAAG,IAAI,CAAA;IACzB,OAAO,SAAS,GAAG,YAAY,CAAA;AACjC,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAAC,EACjC,GAAG,EACH,MAAM,EACN,UAAU,GAKX;IACC,oDAAoD;IACpD,MAAM,SAAS,GAAG,qBAAqB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;IAC3D,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAA;IAEzB,iDAAiD;IACjD,IAAI,SAAS,GAAG,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;QAClD,OAAO,SAAS,CAAA;IAClB,CAAC;IAED,qDAAqD;IACrD,IAAI,MAAM,GAAG,CAAC,CAAA;IACd,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,IAAI,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACjD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACrB,MAAM,EAAE,CAAA;QACV,CAAC;IACH,CAAC;IAED,OAAO,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAA;AAChD,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,wBAAwB,CAAC,EACvC,OAAO,EACP,UAAU,EACV,MAAM,EACN,MAAM,GAMP;IACC,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;IAC/B,OAAO,GAAG,KAAK,SAAS;QACtB,CAAC,CAAC,kBAAkB,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC;QACjD,CAAC,CAAC,SAAS,CAAA;AACf,CAAC"}
+{"version":3,"file":"rowCoordinateCalculations.js","sourceRoot":"","sources":["../src/rowCoordinateCalculations.ts"],"names":[],"mappings":"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"}

package/dist/sequenceLogo.d.ts

@@ -0,0 +1,28 @@
+import type { ColumnCounts } from './columnCounts.ts';
+export interface LogoLetter {
+    letter: string;
+    /** height of this letter's slice of the stack, in bits */
+    bits: number;
+}
+/** the y-axis ceiling of a logo: the information content of a fully conserved
+ * column, log2 of the alphabet size */
+export declare function maxBitsFor(sequenceType: 'dna' | 'rna' | 'amino'): number;
+/**
+ * One column of a sequence logo, tallest letter last so a caller can draw the
+ * stack bottom-up in array order.
+ *
+ * Heights follow Schneider & Stephens: the column's information content is
+ * `log2(alphabet) - H` bits, and each residue takes the share of that its own
+ * frequency earns. Frequencies come from the non-gap residues only, so a column
+ * of two residues and eight gaps is read as a two-way choice rather than a
+ * ten-way one -- otherwise every gappy column would look uninformative for the
+ * wrong reason.
+ *
+ * The whole stack is then scaled by the non-gap fraction, which plain WebLogo
+ * does not do. Here it earns its place: the track sits directly under an
+ * alignment where the gaps are visible, and a column that is 90% gap drawing a
+ * full-height stack off its one remaining pair of residues reads as a conserved
+ * site. Scaling makes stack height mean "how much this column tells you about
+ * the family", matching what the conservation track above it already plots.
+ */
+export declare function columnLogoStack(colStats: ColumnCounts, col: number, maxBits: number): LogoLetter[];

package/dist/sequenceLogo.js

@@ -0,0 +1,47 @@
+import { letterOfResidueSlot } from './columnCounts.js';
+/** the y-axis ceiling of a logo: the information content of a fully conserved
+ * column, log2 of the alphabet size */
+export function maxBitsFor(sequenceType) {
+    return Math.log2(sequenceType === 'amino' ? 20 : 4);
+}
+/**
+ * One column of a sequence logo, tallest letter last so a caller can draw the
+ * stack bottom-up in array order.
+ *
+ * Heights follow Schneider & Stephens: the column's information content is
+ * `log2(alphabet) - H` bits, and each residue takes the share of that its own
+ * frequency earns. Frequencies come from the non-gap residues only, so a column
+ * of two residues and eight gaps is read as a two-way choice rather than a
+ * ten-way one -- otherwise every gappy column would look uninformative for the
+ * wrong reason.
+ *
+ * The whole stack is then scaled by the non-gap fraction, which plain WebLogo
+ * does not do. Here it earns its place: the track sits directly under an
+ * alignment where the gaps are visible, and a column that is 90% gap drawing a
+ * full-height stack off its one remaining pair of residues reads as a conserved
+ * site. Scaling makes stack height mean "how much this column tells you about
+ * the family", matching what the conservation track above it already plots.
+ */
+export function columnLogoStack(colStats, col, maxBits) {
+    const total = colStats.total(col);
+    const nonGapTotal = total - colStats.gapCount(col);
+    if (nonGapTotal === 0) {
+        return [];
+    }
+    const informationContent = Math.max(0, maxBits - colStats.entropy(col)) * (nonGapTotal / total);
+    if (informationContent === 0) {
+        return [];
+    }
+    const stack = [];
+    colStats.forEachResidue(col, (slot, count) => {
+        stack.push({
+            letter: letterOfResidueSlot(slot),
+            bits: (count / nonGapTotal) * informationContent,
+        });
+    });
+    // ascending, so drawing in order stacks the tallest letter on top. Ties break
+    // on letter to keep the stack order stable between redraws.
+    stack.sort((a, b) => a.bits - b.bits || a.letter.localeCompare(b.letter));
+    return stack;
+}
+//# sourceMappingURL=sequenceLogo.js.map

package/dist/sequenceLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sequenceLogo.js","sourceRoot":"","sources":["../src/sequenceLogo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAUvD;uCACuC;AACvC,MAAM,UAAU,UAAU,CAAC,YAAqC;IAC9D,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AACrD,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,eAAe,CAC7B,QAAsB,EACtB,GAAW,EACX,OAAe;IAEf,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IACjC,MAAM,WAAW,GAAG,KAAK,GAAG,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;IAClD,IAAI,WAAW,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,EAAE,CAAA;IACX,CAAC;IAED,MAAM,kBAAkB,GACtB,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC,CAAA;IACtE,IAAI,kBAAkB,KAAK,CAAC,EAAE,CAAC;QAC7B,OAAO,EAAE,CAAA;IACX,CAAC;IAED,MAAM,KAAK,GAAiB,EAAE,CAAA;IAC9B,QAAQ,CAAC,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC3C,KAAK,CAAC,IAAI,CAAC;YACT,MAAM,EAAE,mBAAmB,CAAC,IAAI,CAAC;YACjC,IAAI,EAAE,CAAC,KAAK,GAAG,WAAW,CAAC,GAAG,kBAAkB;SACjD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IACF,8EAA8E;IAC9E,4DAA4D;IAC5D,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;IACzE,OAAO,KAAK,CAAA;AACd,CAAC"}

package/dist/types.d.ts

@@ -1,13 +1,16 @@
+import type { Annotation } from 'msa-parsers';
 export interface Accession {
     accession: string;
     name: string;
     description: string;
 }
+export type TrackKind = 'text' | 'bar' | 'logo';
 export interface BasicTrackModel {
     id: string;
     name: string;
     associatedRowName?: string;
     height: number;
+    kind: TrackKind;
 }
 export interface TextTrackModel extends BasicTrackModel {
     customColorScheme?: Record<string, string>;
@@ -20,18 +23,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/version.d.ts

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

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '5.10.0';
+export const version = '6.1.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,QAAQ,CAAA"}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "5.10.0",
+  "version": "6.1.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.10.0",
-    "msa-parsers": "5.10.0"
+    "@jbrowse/svgcanvas": "6.1.0",
+    "msa-parsers": "6.1.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/columnCounts.test.ts

@@ -47,6 +47,21 @@ describe('columnCounts', () => {
     expect(counts.total(3)).toBe(1)
   })
 
+  test('entropy is taken over the non-gap residues only', () => {
+    const counts = columnCountsFromColumns(['AAAA', 'AACC', 'ACGT', 'AC--'])
+    // fully conserved: no choice left to make
+    expect(counts.entropy(0)).toBeCloseTo(0, 10)
+    // even two-way and four-way splits
+    expect(counts.entropy(1)).toBeCloseTo(1, 10)
+    expect(counts.entropy(2)).toBeCloseTo(2, 10)
+    // the two gaps do not turn a 1-bit choice into a 2-bit one
+    expect(counts.entropy(3)).toBeCloseTo(1, 10)
+  })
+
+  test('an all-gap column has no entropy rather than NaN', () => {
+    expect(columnCountsFromColumns(['----']).entropy(0)).toBe(0)
+  })
+
   test('residue slots round-trip to their letters', () => {
     const counts = columnCountsFromColumns(['WY'])
     const slots: number[] = []

package/src/columnCounts.ts

@@ -109,6 +109,25 @@ export class ColumnCounts {
     }
   }
 
+  /**
+   * Shannon entropy of a column in bits, taken over its non-gap residues only:
+   * a column of two residues and eight gaps is a two-way choice, not a ten-way
+   * one, and gap occupancy is accounted for separately by every caller. 0 for
+   * an all-gap column.
+   */
+  entropy(col: number) {
+    const nonGapTotal = this.total(col) - this.gapCount(col)
+    if (nonGapTotal === 0) {
+      return 0
+    }
+    let entropy = 0
+    this.forEachResidue(col, (_slot, count) => {
+      const freq = count / nonGapTotal
+      entropy -= freq * Math.log2(freq)
+    })
+    return entropy
+  }
+
   /** non-gap [letter, count] pairs for one column, for display */
   residueEntries(col: number) {
     const entries: [string, number][] = []

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

@@ -0,0 +1,81 @@
+import React, { useState } from 'react'
+
+import { useDragScroll } from '../useDragScroll.ts'
+
+export const scrollbarThumbFill = 'rgba(66,119,127,0.3)'
+
+// The scroll thumbs (minimap, vertical scrollbar) and the resize dividers are
+// one widget -- press, drag along an axis, report the pixel delta -- differing
+// only in the affordance they present, so the variant carries the whole
+// difference rather than a second copy of the drag wiring.
+const variants: Record<
+  'thumb' | 'resizer',
+  {
+    fill: string
+    fillHovered: string
+    cursor: (axis: 'x' | 'y') => string
+    position: React.CSSProperties['position']
+    zIndex?: number
+  }
+> = {
+  thumb: {
+    fill: scrollbarThumbFill,
+    fillHovered: 'rgba(66,119,127,0.6)',
+    cursor: () => 'pointer',
+    position: 'absolute',
+    zIndex: 100,
+  },
+  resizer: {
+    fill: 'rgba(200,200,200)',
+    fillHovered: 'rgba(150,150,150)',
+    cursor: axis => (axis === 'x' ? 'ew-resize' : 'ns-resize'),
+    position: 'relative',
+  },
+}
+
+/**
+ * A handle dragged along a single axis. `getStart` is read at mousedown and
+ * handed back to `onDrag` alongside the pixel delta since, so a caller only
+ * supplies the dimension it drives and where the handle sits.
+ *
+ * Memoize `onDrag` (useCallback) so the document listeners are not re-attached
+ * on every render.
+ */
+export default function DragHandle({
+  axis,
+  variant,
+  getStart,
+  onDrag,
+  style,
+}: {
+  axis: 'x' | 'y'
+  variant: keyof typeof variants
+  getStart: () => number
+  onDrag: (delta: number, startValue: number) => void
+  style: React.CSSProperties
+}) {
+  const [hovered, setHovered] = useState(false)
+  const { startDrag } = useDragScroll(axis, onDrag)
+  const { fill, fillHovered, cursor, position, zIndex } = variants[variant]
+
+  return (
+    <div
+      onMouseEnter={() => {
+        setHovered(true)
+      }}
+      onMouseLeave={() => {
+        setHovered(false)
+      }}
+      onMouseDown={event => {
+        startDrag(event, getStart())
+      }}
+      style={{
+        position,
+        zIndex,
+        cursor: cursor(axis),
+        background: hovered ? fillHovered : fill,
+        ...style,
+      }}
+    />
+  )
+}

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

@@ -40,8 +40,7 @@ const TrackColumnIndicator = observer(function ({
     treeAreaWidth,
     resizeHandleWidth,
     totalTrackAreaHeight,
-    msaAreaWidth,
-    verticalScrollbarWidth,
+    msaCanvasWidth,
   } = model
 
   // hovered column, then the pinned one, matching the alignment's own overlay
@@ -56,7 +55,7 @@ const TrackColumnIndicator = observer(function ({
         position: 'absolute',
         left: treeAreaWidth + resizeHandleWidth,
         top: 0,
-        width: msaAreaWidth - verticalScrollbarWidth,
+        width: msaCanvasWidth,
         height: totalTrackAreaHeight,
         overflow: 'hidden',
         pointerEvents: 'none',