react-msaview 8.2.0 → 8.3.0

package/dist/useMsaSvgFigure.js

@@ -1,12 +1,13 @@
 import { useEffect, useState } from 'react';
 import { createJBrowseTheme } from '@jbrowse/core/ui/theme';
 import { getSnapshot } from '@jbrowse/mobx-state-tree';
-import { compareStructural, reaction } from 'mobx';
+import { compareShallow, reaction } from 'mobx';
 import { renderToSvg } from './renderToSvg.js';
 /**
  * The viewer's SVG export of its viewport, as markup for the page to insert.
  * It redraws after the view settles: `delay` ms after the last scroll, zoom,
- * resize or change to the snapshot. A draw a later one overtakes is dropped.
+ * resize, highlight or change to the snapshot. A draw a later one overtakes is
+ * dropped.
  *
  * The figure's row names and letters are SVG text, so the browser's find
  * locates them, a reader can select them, and print stylesheets apply.
@@ -16,7 +17,13 @@ export function useMsaSvgFigure(model, { theme, includeTracks = false, delay = 3
     useEffect(() => {
         let latest = 0;
         const dispose = reaction(() => model.viewInitialized && model.dataInitialized
-            ? [getSnapshot(model), model.width, model.height]
+            ? [
+                getSnapshot(model),
+                model.width,
+                model.height,
+                model.resolvedHighlights,
+                model.highlightedColumnRuns,
+            ]
             : undefined, key => {
             if (!key) {
                 return;
@@ -35,7 +42,7 @@ export function useMsaSvgFigure(model, { theme, includeTracks = false, delay = 3
                     setFigure({ error });
                 }
             });
-        }, { delay, fireImmediately: true, equals: compareStructural });
+        }, { delay, fireImmediately: true, equals: compareShallow });
         return () => {
             latest = -1;
             dispose();

package/dist/useMsaSvgFigure.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMsaSvgFigure.js","sourceRoot":"","sources":["../src/useMsaSvgFigure.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAA;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAA;AAW/C;;;;;;;GAOG;AACH,MAAM,UAAU,eAAe,CAC7B,KAAmB,EACnB,EACE,KAAK,EACL,aAAa,GAAG,KAAK,EACrB,KAAK,GAAG,GAAG,GACZ,GAA+D,EAAE;IAElE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAe,EAAE,CAAC,CAAA;IACtD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,GAAG,CAAC,CAAA;QACd,MAAM,OAAO,GAAG,QAAQ,CACtB,GAAG,EAAE,CACH,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,eAAe;YAC5C,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC;YACjD,CAAC,CAAC,SAAS,EACf,GAAG,CAAC,EAAE;YACJ,IAAI,CAAC,GAAG,EAAE,CAAC;gBACT,OAAM;YACR,CAAC;YACD,MAAM,IAAI,GAAG,EAAE,MAAM,CAAA;YACrB,WAAW,CAAC,KAAK,EAAE;gBACjB,KAAK,EAAE,KAAK,IAAI,kBAAkB,EAAE;gBACpC,UAAU,EAAE,UAAU;gBACtB,aAAa;aACd,CAAC,CAAC,IAAI,CACL,GAAG,CAAC,EAAE;gBACJ,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;oBACpB,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC,CAAA;gBACpB,CAAC;YACH,CAAC,EACD,CAAC,KAAc,EAAE,EAAE;gBACjB,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;oBACpB,SAAS,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;gBACtB,CAAC;YACH,CAAC,CACF,CAAA;QACH,CAAC,EACD,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAC5D,CAAA;QACD,OAAO,GAAG,EAAE;YACV,MAAM,GAAG,CAAC,CAAC,CAAA;YACX,OAAO,EAAE,CAAA;QACX,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,CAAA;IACxC,OAAO,MAAM,CAAA;AACf,CAAC"}
+{"version":3,"file":"useMsaSvgFigure.js","sourceRoot":"","sources":["../src/useMsaSvgFigure.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAA;AAW/C;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAC7B,KAAmB,EACnB,EACE,KAAK,EACL,aAAa,GAAG,KAAK,EACrB,KAAK,GAAG,GAAG,GACZ,GAA+D,EAAE;IAElE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAe,EAAE,CAAC,CAAA;IACtD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,GAAG,CAAC,CAAA;QACd,MAAM,OAAO,GAAG,QAAQ,CACtB,GAAG,EAAE,CACH,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,eAAe;YAC5C,CAAC,CAAC;gBACE,WAAW,CAAC,KAAK,CAAC;gBAClB,KAAK,CAAC,KAAK;gBACX,KAAK,CAAC,MAAM;gBACZ,KAAK,CAAC,kBAAkB;gBACxB,KAAK,CAAC,qBAAqB;aAC5B;YACH,CAAC,CAAC,SAAS,EACf,GAAG,CAAC,EAAE;YACJ,IAAI,CAAC,GAAG,EAAE,CAAC;gBACT,OAAM;YACR,CAAC;YACD,MAAM,IAAI,GAAG,EAAE,MAAM,CAAA;YACrB,WAAW,CAAC,KAAK,EAAE;gBACjB,KAAK,EAAE,KAAK,IAAI,kBAAkB,EAAE;gBACpC,UAAU,EAAE,UAAU;gBACtB,aAAa;aACd,CAAC,CAAC,IAAI,CACL,GAAG,CAAC,EAAE;gBACJ,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;oBACpB,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC,CAAA;gBACpB,CAAC;YACH,CAAC,EACD,CAAC,KAAc,EAAE,EAAE;gBACjB,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;oBACpB,SAAS,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;gBACtB,CAAC;YACH,CAAC,CACF,CAAA;QACH,CAAC,EACD,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,CACzD,CAAA;QACD,OAAO,GAAG,EAAE;YACV,MAAM,GAAG,CAAC,CAAC,CAAA;YACX,OAAO,EAAE,CAAA;QACX,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,CAAA;IACxC,OAAO,MAAM,CAAA;AACf,CAAC"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "8.2.0";
+export declare const version = "8.3.0";

package/dist/version.js

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

package/dist/writeNewick.d.ts

@@ -0,0 +1,8 @@
+import type { HierarchyNode } from './hierarchy.ts';
+/**
+ * The tree as Newick, in the order it is drawn. An internal node whose name is
+ * only its generated id goes unnamed. Each subtree's string is dropped once its
+ * parent takes it in, since a caterpillar tree is as deep as it has tips and
+ * keeping every one is quadratic.
+ */
+export declare function writeNewick(root: HierarchyNode): string;

package/dist/writeNewick.js

@@ -0,0 +1,34 @@
+import { descendants } from './hierarchy.js';
+// a name holding any of these reads back as grammar unless it is quoted
+const needsQuotes = /[\s(),:;[\]']/;
+function quote(name) {
+    return needsQuotes.test(name) ? `'${name.replaceAll("'", "''")}'` : name;
+}
+/**
+ * The tree as Newick, in the order it is drawn. An internal node whose name is
+ * only its generated id goes unnamed. Each subtree's string is dropped once its
+ * parent takes it in, since a caterpillar tree is as deep as it has tips and
+ * keeping every one is quadratic.
+ */
+export function writeNewick(root) {
+    const written = new Map();
+    for (const node of descendants(root).reverse()) {
+        const { id, name, length } = node.data;
+        let text = '';
+        if (node.children) {
+            text = `(${node.children.map(c => written.get(c)).join(',')})`;
+            for (const child of node.children) {
+                written.delete(child);
+            }
+        }
+        if (!(node.children && name === id)) {
+            text += quote(name);
+        }
+        if (length !== undefined) {
+            text += `:${length}`;
+        }
+        written.set(node, text);
+    }
+    return `${written.get(root)};`;
+}
+//# sourceMappingURL=writeNewick.js.map

package/dist/writeNewick.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"writeNewick.js","sourceRoot":"","sources":["../src/writeNewick.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAI5C,wEAAwE;AACxE,MAAM,WAAW,GAAG,eAAe,CAAA;AAEnC,SAAS,KAAK,CAAC,IAAY;IACzB,OAAO,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA;AAC1E,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,IAAmB;IAC7C,MAAM,OAAO,GAAG,IAAI,GAAG,EAAyB,CAAA;IAChD,KAAK,MAAM,IAAI,IAAI,WAAW,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC;QAC/C,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;QACtC,IAAI,IAAI,GAAG,EAAE,CAAA;QACb,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAA;YAC/D,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YACvB,CAAC;QACH,CAAC;QACD,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,KAAK,EAAE,CAAC,EAAE,CAAC;YACpC,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,CAAA;QACrB,CAAC;QACD,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACzB,IAAI,IAAI,IAAI,MAAM,EAAE,CAAA;QACtB,CAAC;QACD,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IACzB,CAAC;IACD,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,CAAE,GAAG,CAAA;AACjC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "8.2.0",
+  "version": "8.3.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -50,10 +50,10 @@
   },
   "dependencies": {
     "@gmod/newick": "^1.0.3",
-    "@jbrowse/svgcanvas": "8.2.0",
+    "@jbrowse/svgcanvas": "8.3.0",
     "colord": "^2.10.0",
     "flatbush": "^4.6.2",
-    "msa-parsers": "8.2.0"
+    "msa-parsers": "8.3.0"
   },
   "scripts": {
     "clean": "rimraf dist bundle",

package/src/columnCounts.ts

@@ -63,15 +63,21 @@ export class ColumnCounts {
     this.totals = new Uint32Array(numColumns)
   }
 
+  /** tallies a row, counting the columns past a short row's end as gaps */
   addRow(row: string) {
-    const { counts, totals, slotTotals } = this
-    const n = Math.min(row.length, this.numColumns)
+    const { counts, totals, slotTotals, numColumns } = this
+    const n = Math.min(row.length, numColumns)
     for (let col = 0; col < n; col++) {
       const slot = slotOf(row.charCodeAt(col))
       counts[col * SLOTS + slot]!++
       totals[col]!++
       slotTotals[slot]!++
     }
+    for (let col = n; col < numColumns; col++) {
+      counts[col * SLOTS + DASH]!++
+      totals[col]!++
+    }
+    slotTotals[DASH]! += numColumns - n
   }
 
   add(col: number, letter: string) {
@@ -161,11 +167,13 @@ export const numResidueSlots = SLOTS
 
 /**
  * Tally counts from alignment rows (gapped sequence strings, one per row). The
- * column count follows the longest row, matching what a per-column tally of
- * ragged input produces.
+ * column count defaults to the longest row, and a shorter row counts as gapped
+ * to the end.
  */
-export function columnCountsFromRows(rows: string[]) {
-  const numColumns = rows.reduce((max, row) => Math.max(max, row.length), 0)
+export function columnCountsFromRows(
+  rows: string[],
+  numColumns = rows.reduce((max, row) => Math.max(max, row.length), 0),
+) {
   const counts = new ColumnCounts(numColumns)
   for (const row of rows) {
     counts.addRow(row)

package/src/components/CopyButton.tsx

@@ -12,7 +12,7 @@ export default function CopyButton({
   text,
   label = 'Copy to clipboard',
 }: {
-  text: string
+  text: string | (() => string)
   label?: string
 }) {
   const [copied, setCopied] = useState(false)
@@ -30,7 +30,7 @@ export default function CopyButton({
       variant="contained"
       color="primary"
       onClick={() => {
-        copy(text)
+        copy(typeof text === 'string' ? text : text())
         setCopied(true)
         clearTimeout(timer.current)
         timer.current = setTimeout(() => {

package/src/components/DragHandle.tsx

@@ -8,6 +8,10 @@ import type { Theme } from '@mui/material'
 
 export const scrollbarThumbFill = 'rgba(66,119,127,0.3)'
 
+// the model's resizeHandleWidth feeds the layout, so a divider keeps its drawn
+// width and widens its target with this much invisible margin each side
+const hitSlop = 4
+
 // 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
@@ -71,6 +75,10 @@ export default function DragHandle({
 
   return (
     <div
+      {...(variant === 'resizer' && {
+        role: 'separator',
+        'aria-orientation': axis === 'x' ? 'vertical' : 'horizontal',
+      })}
       onMouseEnter={() => {
         setHovered(true)
       }}
@@ -87,6 +95,18 @@ export default function DragHandle({
         background: hovered ? fillHovered(theme) : fill(theme),
         ...style,
       }}
-    />
+    >
+      {variant === 'resizer' ? (
+        <div
+          style={{
+            position: 'absolute',
+            zIndex: 101,
+            ...(axis === 'x'
+              ? { top: 0, bottom: 0, left: -hitSlop, right: -hitSlop }
+              : { left: 0, right: 0, top: -hitSlop, bottom: -hitSlop }),
+          }}
+        />
+      ) : null}
+    </div>
   )
 }

package/src/components/Loading.tsx

@@ -2,35 +2,15 @@ import React from 'react'
 
 import { ErrorMessage } from '@jbrowse/core/ui'
 import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary'
-import { Button, CircularProgress, Typography } from '@mui/material'
+import { Button } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import MSAView from './MSAView.tsx'
+import StatusMessage from './StatusMessage.tsx'
 import ImportForm from './import/ImportForm.tsx'
 
 import type { MsaViewModel } from '../model.ts'
 
-const LoadingSpinner = observer(function ({ model }: { model: MsaViewModel }) {
-  const { status } = model
-  return (
-    <div
-      style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 20 }}
-    >
-      <CircularProgress size={24} />
-      <Typography variant="h6">{status?.msg ?? 'Loading...'}</Typography>
-      {status?.onCancel ? (
-        <Button
-          variant="outlined"
-          size="small"
-          onClick={() => status.onCancel?.()}
-        >
-          Cancel
-        </Button>
-      ) : null}
-    </div>
-  )
-})
-
 const Reset = observer(function ({
   model,
   error,
@@ -58,12 +38,15 @@ const Loading = observer(function ({ model }: { model: MsaViewModel }) {
   const {
     isLoading,
     dataInitialized,
+    data,
     error,
     resetCount,
     msaFilehandle,
     treeFilehandle,
   } = model
-  const hasPendingFilehandle = !!(msaFilehandle || treeFilehandle)
+  const hasData = !!(data.msa || data.tree)
+  // a failed load keeps its filehandle, so the error outranks the spinner
+  const loading = !error && !!(msaFilehandle || treeFilehandle || isLoading)
 
   return (
     <div>
@@ -76,18 +59,19 @@ const Loading = observer(function ({ model }: { model: MsaViewModel }) {
       >
         {dataInitialized ? (
           isLoading ? (
-            <LoadingSpinner model={model} />
+            <StatusMessage model={model} variant="page" />
           ) : (
             <MSAView model={model} />
           )
-        ) : error ? (
-          // checked before the spinner: a failed load keeps its filehandle
-          // (only an abort clears it), so hasPendingFilehandle stays true
+        ) : hasData ? (
           <Reset model={model} error={error} />
-        ) : hasPendingFilehandle || isLoading ? (
-          <LoadingSpinner model={model} />
         ) : (
-          <ImportForm model={model} />
+          <>
+            {loading ? <StatusMessage model={model} variant="page" /> : null}
+            <div style={{ display: loading ? 'none' : undefined }}>
+              <ImportForm model={model} />
+            </div>
+          </>
         )}
       </ErrorBoundary>
     </div>

package/src/components/MSAViewer.tsx

@@ -20,6 +20,8 @@ import type {
   ResidueEncoding,
   ResidueMapping,
   RowPanelSpec,
+  TreeOrder,
+  TreeRoot,
   Viewport,
 } from '../types.ts'
 import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
@@ -94,6 +96,17 @@ export interface MSAViewerProps {
   autoTreeAreaWidth?: boolean
   /** draw branch lengths (default true); false draws a cladogram */
   showBranchLen?: boolean
+  /**
+   * the order each node's children draw in: `branchLength` (default,
+   * shortest first), `input` (as the file gives them), `ladderize` (fewest
+   * tips first) or `ladderizeReverse` (most tips first)
+   */
+  treeOrder?: TreeOrder
+  /**
+   * reroot the tree: `midpoint`, or `{outgroup: [tip names]}` on the branch
+   * above those tips' common ancestor
+   */
+  treeRoot?: TreeRoot
   /**
    * which channel `colorScheme` paints: `fill` (default) colors the background
    * of the cell a residue sits in, `color` colors the letter itself and leaves
@@ -215,6 +228,8 @@ function Viewer({
   treeAreaWidth,
   autoTreeAreaWidth,
   showBranchLen,
+  treeOrder,
+  treeRoot,
   region,
   hideHeader,
   theme,
@@ -258,6 +273,8 @@ function Viewer({
       ...(treeAreaWidth ? { treeAreaWidth } : {}),
       ...(autoTreeAreaWidth ? { autoTreeAreaWidth } : {}),
       ...(showBranchLen !== undefined ? { showBranchLen } : {}),
+      ...(treeOrder ? { treeOrder } : {}),
+      ...(treeRoot ? { treeRoot } : {}),
       ...(residueEncoding !== undefined
         ? { bgColor: residueEncoding === 'fill' }
         : {}),
@@ -317,6 +334,11 @@ function Viewer({
       model.setShowBranchLen(showBranchLen)
     }
   }, [model, showBranchLen])
+  useEffect(() => {
+    if (treeOrder !== undefined) {
+      model.setTreeOrder(treeOrder)
+    }
+  }, [model, treeOrder])
   useEffect(() => {
     if (residueEncoding !== undefined) {
       model.setBgColor(residueEncoding === 'fill')
@@ -336,6 +358,10 @@ function Viewer({
   useEffect(() => {
     model.setHighlights(JSON.parse(highlightsKey))
   }, [model, highlightsKey])
+  const treeRootKey = JSON.stringify(treeRoot ?? null)
+  useEffect(() => {
+    model.setTreeRoot(JSON.parse(treeRootKey) ?? undefined)
+  }, [model, treeRootKey])
   const cladesKey = JSON.stringify(clades ?? [])
   useEffect(() => {
     model.setClades(JSON.parse(cladesKey))

package/src/components/SequenceTextArea.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react'
 
 import { makeStyles } from '@jbrowse/core/util/tss-react'
-import { TextField } from '@mui/material'
+import { Button, TextField } from '@mui/material'
 import { getUngappedSequence } from 'msa-parsers'
 
+import { saveAs } from '../vendor/fileSaver.ts'
 import Checkbox2 from './Checkbox2.tsx'
 import CopyButton from './CopyButton.tsx'
 
@@ -18,19 +19,59 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
+export const maxShownRecords = 100
+export const maxShownChars = 200_000
+
+function fastaRecord([name, seq]: [string, string], showGaps: boolean) {
+  return `>${name}\n${showGaps ? seq : getUngappedSequence(seq)}`
+}
+
+function isAllGaps(seq: string) {
+  return !/[^.-]/.test(seq)
+}
+
+/**
+ * The first records of `rows` as FASTA, up to `maxShownRecords` records or
+ * `maxShownChars` characters, whichever comes first. A textarea holding every
+ * row of a large alignment freezes the page.
+ */
+export function fastaPreview(rows: [string, string][], showGaps: boolean) {
+  const shown: string[] = []
+  let chars = 0
+  for (const row of rows) {
+    if (shown.length >= maxShownRecords || chars >= maxShownChars) {
+      break
+    }
+    const record = fastaRecord(row, showGaps)
+    shown.push(record)
+    chars += record.length + 1
+  }
+  return { text: shown.join('\n'), hidden: rows.length - shown.length }
+}
+
 export default function SequenceTextArea({ str }: { str: [string, string][] }) {
   const { classes } = useStyles()
   const [showGaps, setShowGaps] = useState(false)
   const [showEmpty, setShowEmpty] = useState(false)
 
-  const disp = str
-    .map(([s1, s2]) => [s1, showGaps ? s2 : getUngappedSequence(s2)] as const)
-    .filter(([, s2]) => showEmpty || !!s2)
-    .map(([s1, s2]) => `>${s1}\n${s2}`)
-    .join('\n')
+  const rows = showEmpty
+    ? str
+    : str.filter(([, seq]) => (showGaps ? !!seq : !isAllGaps(seq)))
+  const { text, hidden } = fastaPreview(rows, showGaps)
+  const fullText = () => rows.map(row => fastaRecord(row, showGaps)).join('\n')
   return (
     <>
-      <CopyButton text={disp} />
+      <CopyButton text={fullText} />
+      <Button
+        onClick={() => {
+          saveAs(
+            new Blob([fullText()], { type: 'text/plain' }),
+            'sequences.fasta',
+          )
+        }}
+      >
+        Download
+      </Button>
       <Checkbox2
         label="Show gaps"
         checked={showGaps}
@@ -52,7 +93,12 @@ export default function SequenceTextArea({ str }: { str: [string, string][] }) {
         minRows={5}
         maxRows={10}
         fullWidth
-        value={disp}
+        value={text}
+        helperText={
+          hidden > 0
+            ? `Showing ${rows.length - hidden} of ${rows.length.toLocaleString()} sequences. ${hidden.toLocaleString()} more are in the copy and the download.`
+            : undefined
+        }
         slotProps={{
           input: {
             readOnly: true,

package/src/components/StatusMessage.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+
+import { LoadingEllipses } from '@jbrowse/core/ui'
+import { makeStyles } from '@jbrowse/core/util/tss-react'
+import { Button, CircularProgress, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import type { MsaViewModel } from '../model.ts'
+
+const useStyles = makeStyles()({
+  page: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 12,
+    padding: 20,
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 4,
+    margin: 'auto',
+    marginLeft: 10,
+  },
+})
+
+/**
+ * The model's status line with its Cancel button: a spinner and a heading in
+ * place of the view while it loads, or a line in the header afterwards, which
+ * disappears when there is no status.
+ */
+const StatusMessage = observer(function ({
+  model,
+  variant,
+}: {
+  model: MsaViewModel
+  variant: 'page' | 'header'
+}) {
+  const { status } = model
+  const { classes } = useStyles()
+  if (variant === 'header' && !status) {
+    return null
+  }
+  const message = status?.msg ?? 'Loading...'
+  const onCancel = status?.onCancel
+  return (
+    <div className={classes[variant]}>
+      {variant === 'page' ? (
+        <>
+          <CircularProgress size={24} />
+          <Typography variant="h6">{message}</Typography>
+        </>
+      ) : (
+        <LoadingEllipses message={message} component="span" />
+      )}
+      {onCancel ? (
+        <Button
+          variant={variant === 'page' ? 'outlined' : 'text'}
+          size="small"
+          onClick={() => {
+            onCancel()
+          }}
+        >
+          Cancel
+        </Button>
+      ) : null}
+    </div>
+  )
+})
+
+export default StatusMessage

package/src/components/Track.tsx

@@ -146,7 +146,7 @@ const Track = observer(function ({
   )
   useWheelScroll({ ref, onScrollX })
   const { classes } = useStyles()
-  const { hover, onMouseMove, onMouseLeave } = useTrackHover({
+  const { anchor, onMouseMove, onMouseLeave } = useTrackHover({
     model,
     tooltip: showColumnStats,
   })
@@ -172,9 +172,13 @@ const Track = observer(function ({
         }}
       >
         <track.ReactComponent model={model} track={track} />
-        {hover ? (
-          <BaseTooltip clientPoint={{ x: hover.x, y: hover.y + 15 }}>
-            <TrackTooltipContent model={model} track={track} col={hover.col} />
+        {anchor ? (
+          <BaseTooltip clientPoint={anchor.clientPoint}>
+            <TrackTooltipContent
+              model={model}
+              track={track}
+              col={anchor.value}
+            />
           </BaseTooltip>
         ) : null}
       </div>

package/src/components/VerticalScrollbar.tsx

@@ -23,6 +23,13 @@ const VerticalScrollbar = observer(({ model }: { model: MsaViewModel }) => {
 
   return (
     <div
+      onMouseDown={event => {
+        if (event.button === 0 && event.target === event.currentTarget) {
+          const y =
+            event.clientY - event.currentTarget.getBoundingClientRect().top
+          model.setScrollY(-y / unit + msaAreaHeight / 2)
+        }
+      }}
       style={{
         position: 'relative',
         width,

package/src/components/dialogs/ExportSVGDialog.tsx

@@ -15,6 +15,7 @@ import {
   Typography,
   useTheme,
 } from '@mui/material'
+import { observer } from 'mobx-react'
 
 import Checkbox2 from '../Checkbox2.tsx'
 
@@ -30,7 +31,7 @@ function afterPaint(fn: () => void) {
   })
 }
 
-export default function ExportSVGDialog({
+const ExportSVGDialog = observer(function ({
   model,
   onClose,
 }: {
@@ -181,4 +182,6 @@ export default function ExportSVGDialog({
       </DialogActions>
     </Dialog>
   )
-}
+})
+
+export default ExportSVGDialog