react-msaview 9.0.0 → 9.1.1

package/dist/viewerSnapshot.js

@@ -0,0 +1,100 @@
+import { createJBrowseTheme } from '@jbrowse/core/ui/theme';
+export function colorSchemeSnapshot(scheme) {
+    return typeof scheme === 'string'
+        ? { colorSchemeName: scheme }
+        : scheme
+            ? { customColorScheme: scheme.map }
+            : {};
+}
+/**
+ * The `highlightColumns` prop as `highlights`: one `{start, end}` per run of
+ * adjacent 1-based alignment columns
+ */
+export function columnHighlights(columns = []) {
+    const sorted = [...new Set(columns)].sort((a, b) => a - b);
+    const runs = [];
+    for (const column of sorted) {
+        const last = runs.at(-1);
+        if (last?.end === column - 1) {
+            last.end = column;
+        }
+        else {
+            runs.push({ start: column, end: column });
+        }
+    }
+    return runs;
+}
+export function viewerHighlights({ highlights = [], highlightColumns, }) {
+    return [...highlights, ...columnHighlights(highlightColumns)];
+}
+function urlLocation(uri) {
+    return uri ? { uri, locationType: 'UriLocation' } : undefined;
+}
+/** each filehandle prop, or the URL prop standing in for it */
+export function fileLocations({ msaFilehandle, treeFilehandle, gffFilehandle, msaUrl, treeUrl, gffUrl, }) {
+    return {
+        msaFilehandle: msaFilehandle ?? urlLocation(msaUrl),
+        treeFilehandle: treeFilehandle ?? urlLocation(treeUrl),
+        gffFilehandle: gffFilehandle ?? urlLocation(gffUrl),
+    };
+}
+export function resolveTheme(theme) {
+    return createJBrowseTheme(theme === 'dark'
+        ? { palette: { mode: 'dark' } }
+        : typeof theme === 'object'
+            ? theme
+            : undefined);
+}
+/**
+ * The model snapshot `MSAViewer` creates from its props. The CLI's `--props`
+ * reads the same JSON the R and Python widgets send, so a figure exported
+ * headlessly draws what the widget drew.
+ */
+export function viewerSnapshot(props) {
+    const { msa, tree, gff, rowData, colorScheme, height, colWidth, rowHeight, allowedGappyness, highlightColumns, highlights, features, selection, clades, relativeTo, columnTracks, residueMappings, encodings, rowPanels, drawTree, treeAreaWidth, showBranchLen, treeOrder, treeRoot, region, residueEncoding, } = props;
+    const { msaFilehandle, treeFilehandle, gffFilehandle } = fileLocations(props);
+    return {
+        type: 'MsaView',
+        ...(msa || tree || gff || rowData
+            ? {
+                data: {
+                    msa: msa ?? '',
+                    tree: tree ?? '',
+                    gff,
+                    // the row table is stored as this JSON string, which is what a
+                    // shared URL and the size limit already cover
+                    ...(rowData ? { treeMetadata: JSON.stringify(rowData) } : {}),
+                },
+            }
+            : {}),
+        ...(msaFilehandle ? { msaFilehandle } : {}),
+        ...(treeFilehandle ? { treeFilehandle } : {}),
+        ...(gffFilehandle ? { gffFilehandle } : {}),
+        ...colorSchemeSnapshot(colorScheme),
+        ...(height ? { height } : {}),
+        ...(colWidth ? { colWidth } : {}),
+        ...(rowHeight ? { rowHeight } : {}),
+        ...(allowedGappyness !== undefined ? { allowedGappyness } : {}),
+        ...(highlights || highlightColumns
+            ? { highlights: viewerHighlights({ highlights, highlightColumns }) }
+            : {}),
+        ...(features ? { features } : {}),
+        ...(selection ? { selection } : {}),
+        ...(clades ? { clades } : {}),
+        ...(relativeTo ? { relativeTo } : {}),
+        ...(columnTracks ? { columnTracks } : {}),
+        ...(residueMappings ? { residueMappings } : {}),
+        ...(encodings ? { encodings } : {}),
+        ...(rowPanels ? { rowPanels } : {}),
+        ...(drawTree !== undefined ? { drawTree } : {}),
+        ...(treeAreaWidth ? { treeAreaWidth } : {}),
+        ...(showBranchLen !== undefined ? { showBranchLen } : {}),
+        ...(treeOrder ? { treeOrder } : {}),
+        ...(treeRoot ? { treeRoot } : {}),
+        ...(region ? { region } : {}),
+        ...(residueEncoding !== undefined
+            ? { bgColor: residueEncoding === 'fill' }
+            : {}),
+    };
+}
+//# sourceMappingURL=viewerSnapshot.js.map

package/dist/viewerSnapshot.js.map

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

package/dist/wheelZoom.d.ts

@@ -1,4 +1,9 @@
-export declare const SCROLL_ZOOM_DIVISOR = 500;
+export declare const NOTCH_ZOOM = 1.25;
 export declare function normalizeWheelDelta(delta: number, mode: number): number;
-export declare function getZoomNormalizer(deltaY: number): 25 | 75 | 150 | 500;
-export declare function zoomFactorFromAccum(zoomAccum: number, elapsedMs: number): number;
+export declare class WheelZoomSmoother {
+    private continuous;
+    private pending;
+    add(deltaY: number, deltaMode: number, isPinch: boolean): void;
+    get idle(): boolean;
+    step(elapsedMs: number): number;
+}

package/dist/wheelZoom.js

@@ -1,43 +1,55 @@
-// Wheel / trackpad-pinch delta handling, adapted from @jbrowse/core's
-// util/wheelZoom (not yet in our pinned @jbrowse/core). Turns raw wheel deltas
-// into a per-frame zoom factor that feels consistent across fine trackpad
-// pinches and coarse mouse notches.
-// Fixed divisor for plain-wheel scroll-zoom mode, where deltas are big notches.
-export const SCROLL_ZOOM_DIVISOR = 500;
-// Cap the zoom change per millisecond so a burst of momentum-scroll events
-// coalesced into one frame can't jump the zoom level (0.2 per ~60fps frame).
-const MAX_ZOOM_RATE_PER_MS = 0.2 / 16.67;
-// Convert a wheel delta to pixels regardless of the browser's deltaMode; some
-// browsers/mice report lines or pages instead of pixels.
+// Chrome and Firefox encode a trackpad pinch as ctrl+wheel with
+// deltaY = -100 * ln(scale), so dividing by 100 tracks the fingers 1:1
+const PINCH_PX_PER_LOG = 100;
+// a plain scroll covers more pixels than a pinch for the same intent
+const SCROLL_PX_PER_LOG = 400;
+// a pixel delta at least this large counts as a wheel notch
+const NOTCH_MIN_PX = 40;
+export const NOTCH_ZOOM = 1.25;
+// the time constant a notch eases in over
+const NOTCH_TAU_MS = 60;
+// a burst of continuous events coalesced into one frame applies at most 2x
+const MAX_FRAME_LOG = Math.log(2);
+// the queue holds at most four notches, which caps a fast spin
+const MAX_PENDING_LOG = 4 * Math.log(NOTCH_ZOOM);
 export function normalizeWheelDelta(delta, mode) {
     if (mode === 1) {
-        return delta * 16; // DOM_DELTA_LINE
+        return delta * 16;
     }
     if (mode === 2) {
-        return delta * 100; // DOM_DELTA_PAGE
+        return delta * 100;
     }
-    return delta; // DOM_DELTA_PIXEL
+    return delta;
 }
-// Adaptive divisor: tiny pinch deltas zoom in larger steps, big mouse notches
-// in finer steps, so a trackpad pinch and a mouse wheel feel similar.
-export function getZoomNormalizer(deltaY) {
-    const abs = Math.abs(deltaY);
-    if (abs < 6) {
-        return 25;
+const clampAbs = (x, max) => Math.max(-max, Math.min(max, x));
+// Positive log zooms in. Feed every wheel event to add() and call step() once
+// per animation frame with the time since the last frame; step() returns the
+// multiplier for colWidth/rowHeight.
+export class WheelZoomSmoother {
+    continuous = 0;
+    pending = 0;
+    add(deltaY, deltaMode, isPinch) {
+        const px = normalizeWheelDelta(deltaY, deltaMode);
+        if (deltaMode !== 0 || Math.abs(px) >= NOTCH_MIN_PX) {
+            const notches = deltaMode !== 0 ? 1 : Math.min(Math.max(Math.abs(px) / 100, 1), 3);
+            this.pending = clampAbs(this.pending - Math.sign(px) * notches * Math.log(NOTCH_ZOOM), MAX_PENDING_LOG);
+        }
+        else {
+            this.continuous -= px / (isPinch ? PINCH_PX_PER_LOG : SCROLL_PX_PER_LOG);
+        }
     }
-    if (abs > 150) {
-        return 500;
+    get idle() {
+        return this.continuous === 0 && this.pending === 0;
     }
-    if (abs > 30) {
-        return 150;
+    step(elapsedMs) {
+        let eased = this.pending * (1 - Math.exp(-elapsedMs / NOTCH_TAU_MS));
+        if (Math.abs(this.pending - eased) < 0.005) {
+            eased = this.pending;
+        }
+        this.pending -= eased;
+        const log = clampAbs(this.continuous + eased, MAX_FRAME_LOG);
+        this.continuous = 0;
+        return Math.exp(log);
     }
-    return 75;
-}
-// Turn accumulated, normalized zoom intent into a colWidth/rowHeight multiplier.
-// Positive accum (wheel toward user) zooms out (factor < 1); negative zooms in.
-export function zoomFactorFromAccum(zoomAccum, elapsedMs) {
-    const max = MAX_ZOOM_RATE_PER_MS * elapsedMs;
-    const d = Math.max(-max, Math.min(max, zoomAccum));
-    return d > 0 ? 1 / (1 + d) : 1 - d;
 }
 //# sourceMappingURL=wheelZoom.js.map

package/dist/wheelZoom.js.map

@@ -1 +1 @@
-{"version":3,"file":"wheelZoom.js","sourceRoot":"","sources":["../src/wheelZoom.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,+EAA+E;AAC/E,0EAA0E;AAC1E,oCAAoC;AAEpC,gFAAgF;AAChF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;AAEtC,2EAA2E;AAC3E,6EAA6E;AAC7E,MAAM,oBAAoB,GAAG,GAAG,GAAG,KAAK,CAAA;AAExC,8EAA8E;AAC9E,yDAAyD;AACzD,MAAM,UAAU,mBAAmB,CAAC,KAAa,EAAE,IAAY;IAC7D,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC;QACf,OAAO,KAAK,GAAG,EAAE,CAAA,CAAC,iBAAiB;IACrC,CAAC;IACD,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC;QACf,OAAO,KAAK,GAAG,GAAG,CAAA,CAAC,iBAAiB;IACtC,CAAC;IACD,OAAO,KAAK,CAAA,CAAC,kBAAkB;AACjC,CAAC;AAED,8EAA8E;AAC9E,sEAAsE;AACtE,MAAM,UAAU,iBAAiB,CAAC,MAAc;IAC9C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IAC5B,IAAI,GAAG,GAAG,CAAC,EAAE,CAAC;QACZ,OAAO,EAAE,CAAA;IACX,CAAC;IACD,IAAI,GAAG,GAAG,GAAG,EAAE,CAAC;QACd,OAAO,GAAG,CAAA;IACZ,CAAC;IACD,IAAI,GAAG,GAAG,EAAE,EAAE,CAAC;QACb,OAAO,GAAG,CAAA;IACZ,CAAC;IACD,OAAO,EAAE,CAAA;AACX,CAAC;AAED,iFAAiF;AACjF,gFAAgF;AAChF,MAAM,UAAU,mBAAmB,CAAC,SAAiB,EAAE,SAAiB;IACtE,MAAM,GAAG,GAAG,oBAAoB,GAAG,SAAS,CAAA;IAC5C,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC,CAAA;IAClD,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;AACpC,CAAC"}
+{"version":3,"file":"wheelZoom.js","sourceRoot":"","sources":["../src/wheelZoom.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,uEAAuE;AACvE,MAAM,gBAAgB,GAAG,GAAG,CAAA;AAE5B,qEAAqE;AACrE,MAAM,iBAAiB,GAAG,GAAG,CAAA;AAE7B,4DAA4D;AAC5D,MAAM,YAAY,GAAG,EAAE,CAAA;AAEvB,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAA;AAE9B,0CAA0C;AAC1C,MAAM,YAAY,GAAG,EAAE,CAAA;AAEvB,2EAA2E;AAC3E,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;AAEjC,+DAA+D;AAC/D,MAAM,eAAe,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,CAAA;AAEhD,MAAM,UAAU,mBAAmB,CAAC,KAAa,EAAE,IAAY;IAC7D,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC;QACf,OAAO,KAAK,GAAG,EAAE,CAAA;IACnB,CAAC;IACD,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC;QACf,OAAO,KAAK,GAAG,GAAG,CAAA;IACpB,CAAC;IACD,OAAO,KAAK,CAAA;AACd,CAAC;AAED,MAAM,QAAQ,GAAG,CAAC,CAAS,EAAE,GAAW,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAA;AAE7E,8EAA8E;AAC9E,6EAA6E;AAC7E,qCAAqC;AACrC,MAAM,OAAO,iBAAiB;IACpB,UAAU,GAAG,CAAC,CAAA;IACd,OAAO,GAAG,CAAC,CAAA;IAEnB,GAAG,CAAC,MAAc,EAAE,SAAiB,EAAE,OAAgB;QACrD,MAAM,EAAE,GAAG,mBAAmB,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;QACjD,IAAI,SAAS,KAAK,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,YAAY,EAAE,CAAC;YACpD,MAAM,OAAO,GACX,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;YACpE,IAAI,CAAC,OAAO,GAAG,QAAQ,CACrB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,EAC7D,eAAe,CAChB,CAAA;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAA;QAC1E,CAAC;IACH,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,UAAU,KAAK,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,CAAC,CAAA;IACpD,CAAC;IAED,IAAI,CAAC,SAAiB;QACpB,IAAI,KAAK,GAAG,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,GAAG,YAAY,CAAC,CAAC,CAAA;QACpE,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,KAAK,EAAE,CAAC;YAC3C,KAAK,GAAG,IAAI,CAAC,OAAO,CAAA;QACtB,CAAC;QACD,IAAI,CAAC,OAAO,IAAI,KAAK,CAAA;QACrB,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,EAAE,aAAa,CAAC,CAAA;QAC5D,IAAI,CAAC,UAAU,GAAG,CAAC,CAAA;QACnB,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACtB,CAAC;CACF"}

package/dist/zoomSnapshot.d.ts

@@ -0,0 +1,29 @@
+export interface ZoomSnapshot {
+    colWidth: number;
+    rowHeight: number;
+    blocksX: number[];
+    blocksY: number[];
+}
+interface Viewport {
+    colWidth: number;
+    rowHeight: number;
+    scrollX: number;
+    scrollY: number;
+    msaAreaWidth: number;
+    msaAreaHeight: number;
+    totalWidth: number;
+    totalHeight: number;
+    blockSize: number;
+}
+export declare function takeZoomSnapshot(view: Viewport, withMargin: boolean): {
+    colWidth: number;
+    rowHeight: number;
+    blocksX: number[];
+    blocksY: number[];
+};
+export declare function zoomSnapshotScale(view: Viewport, snap: ZoomSnapshot): {
+    sx: number;
+    sy: number;
+};
+export declare function zoomSnapshotCovers(view: Viewport, snap: ZoomSnapshot): boolean;
+export {};

package/dist/zoomSnapshot.js

@@ -0,0 +1,47 @@
+import { calculateBlocks } from './calculateBlocks.js';
+// past this stretch the scaled letters blur enough to redraw
+const maxStretch = 2;
+// a redraw covers this fraction of the viewport again on each side, so a zoom
+// out shrinks it for a few frames before it runs out of picture
+const margin = 0.2;
+function blocksAt(view, axis, scale, marginFraction) {
+    const size = axis === 'x' ? view.msaAreaWidth : view.msaAreaHeight;
+    const pos = -(axis === 'x' ? view.scrollX : view.scrollY);
+    const map = axis === 'x' ? view.totalWidth : view.totalHeight;
+    const pad = size * marginFraction;
+    return calculateBlocks({
+        viewportSize: (size + 2 * pad) / scale,
+        viewportPos: (pos - pad) / scale,
+        mapSize: map / scale,
+        blockSize: view.blockSize,
+    });
+}
+const within = (need, have) => need.length === 0 ||
+    (have.length > 0 && need[0] >= have[0] && need.at(-1) <= have.at(-1));
+// a gesture starts from the blocks already drawn, and each redraw during it
+// adds the margin
+export function takeZoomSnapshot(view, withMargin) {
+    const m = withMargin ? margin : 0;
+    return {
+        colWidth: view.colWidth,
+        rowHeight: view.rowHeight,
+        blocksX: blocksAt(view, 'x', 1, m),
+        blocksY: blocksAt(view, 'y', 1, m),
+    };
+}
+export function zoomSnapshotScale(view, snap) {
+    return {
+        sx: view.colWidth / snap.colWidth,
+        sy: view.rowHeight / snap.rowHeight,
+    };
+}
+// whether the blocks drawn at the snapshot, stretched to the current cell
+// size, still fill the viewport sharply enough
+export function zoomSnapshotCovers(view, snap) {
+    const { sx, sy } = zoomSnapshotScale(view, snap);
+    return (sx <= maxStretch &&
+        sy <= maxStretch &&
+        within(blocksAt(view, 'x', sx, 0), snap.blocksX) &&
+        within(blocksAt(view, 'y', sy, 0), snap.blocksY));
+}
+//# sourceMappingURL=zoomSnapshot.js.map

package/dist/zoomSnapshot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoomSnapshot.js","sourceRoot":"","sources":["../src/zoomSnapshot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAqBtD,6DAA6D;AAC7D,MAAM,UAAU,GAAG,CAAC,CAAA;AAEpB,8EAA8E;AAC9E,gEAAgE;AAChE,MAAM,MAAM,GAAG,GAAG,CAAA;AAElB,SAAS,QAAQ,CACf,IAAc,EACd,IAAe,EACf,KAAa,EACb,cAAsB;IAEtB,MAAM,IAAI,GAAG,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAA;IAClE,MAAM,GAAG,GAAG,CAAC,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IACzD,MAAM,GAAG,GAAG,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAA;IAC7D,MAAM,GAAG,GAAG,IAAI,GAAG,cAAc,CAAA;IACjC,OAAO,eAAe,CAAC;QACrB,YAAY,EAAE,CAAC,IAAI,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK;QACtC,WAAW,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,KAAK;QAChC,OAAO,EAAE,GAAG,GAAG,KAAK;QACpB,SAAS,EAAE,IAAI,CAAC,SAAS;KAC1B,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,CAAC,IAAc,EAAE,IAAc,EAAE,EAAE,CAChD,IAAI,CAAC,MAAM,KAAK,CAAC;IACjB,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,CAAC,CAAE,IAAI,IAAI,CAAC,CAAC,CAAE,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAE,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAE,CAAC,CAAA;AAE3E,4EAA4E;AAC5E,kBAAkB;AAClB,MAAM,UAAU,gBAAgB,CAAC,IAAc,EAAE,UAAmB;IAClE,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;IACjC,OAAO;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,OAAO,EAAE,QAAQ,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;QAClC,OAAO,EAAE,QAAQ,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;KACZ,CAAA;AAC1B,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,IAAc,EAAE,IAAkB;IAClE,OAAO;QACL,EAAE,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;QACjC,EAAE,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS;KACpC,CAAA;AACH,CAAC;AAED,0EAA0E;AAC1E,+CAA+C;AAC/C,MAAM,UAAU,kBAAkB,CAAC,IAAc,EAAE,IAAkB;IACnE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IAChD,OAAO,CACL,EAAE,IAAI,UAAU;QAChB,EAAE,IAAI,UAAU;QAChB,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC;QAChD,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CACjD,CAAA;AACH,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "9.0.0",
+  "version": "9.1.1",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -37,23 +37,23 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@jbrowse/core": "^5.0.0-beta.9",
-    "@jbrowse/mobx-state-tree": "^6.6.1",
-    "@mui/icons-material": "^9.4.0",
-    "@mui/material": "^9.4.0",
-    "@types/node": "^26.6.2",
+    "@jbrowse/core": "^5.0.0-beta.15",
+    "@jbrowse/mobx-state-tree": "^6.9.0",
+    "@mui/icons-material": "^9.5.0",
+    "@mui/material": "^9.5.0",
+    "@types/node": "^26.6.5",
     "esbuild": "^0.28.2",
-    "mobx": "^7.0.3",
+    "mobx": "^7.0.6",
     "mobx-react": "^10.0.2",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0"
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1"
   },
   "dependencies": {
     "@gmod/newick": "^1.0.3",
-    "@jbrowse/svgcanvas": "9.0.0",
+    "@jbrowse/svgcanvas": "9.1.1",
     "colord": "^2.10.0",
     "flatbush": "^4.6.2",
-    "msa-parsers": "9.0.0"
+    "msa-parsers": "9.1.1"
   },
   "scripts": {
     "clean": "rimraf dist bundle",

package/src/blosum62.ts

@@ -0,0 +1,45 @@
+// BLOSUM62 (Henikoff & Henikoff 1992), shared by the neighbor-joining tree and
+// the blosum62_dynamic color scheme
+
+// prettier-ignore
+const BLOSUM62_KEYS = 'ARNDCQEGHILKMFPSTWYVBZX*'
+// prettier-ignore
+const BLOSUM62_DATA = [
+  [ 4,-1,-2,-2, 0,-1,-1, 0,-2,-1,-1,-1,-1,-2,-1, 1, 0,-3,-2, 0,-2,-1, 0,-4],
+  [-1, 5, 0,-2,-3, 1, 0,-2, 0,-3,-2, 2,-1,-3,-2,-1,-1,-3,-2,-3,-1, 0,-1,-4],
+  [-2, 0, 6, 1,-3, 0, 0, 0, 1,-3,-3, 0,-2,-3,-2, 1, 0,-4,-2,-3, 3, 0,-1,-4],
+  [-2,-2, 1, 6,-3, 0, 2,-1,-1,-3,-4,-1,-3,-3,-1, 0,-1,-4,-3,-3, 4, 1,-1,-4],
+  [ 0,-3,-3,-3, 9,-3,-4,-3,-3,-1,-1,-3,-1,-2,-3,-1,-1,-2,-2,-1,-3,-3,-2,-4],
+  [-1, 1, 0, 0,-3, 5, 2,-2, 0,-3,-2, 1, 0,-3,-1, 0,-1,-2,-1,-2, 0, 3,-1,-4],
+  [-1, 0, 0, 2,-4, 2, 5,-2, 0,-3,-3, 1,-2,-3,-1, 0,-1,-3,-2,-2, 1, 4,-1,-4],
+  [ 0,-2, 0,-1,-3,-2,-2, 6,-2,-4,-4,-2,-3,-3,-2, 0,-2,-2,-3,-3,-1,-2,-1,-4],
+  [-2, 0, 1,-1,-3, 0, 0,-2, 8,-3,-3,-1,-2,-1,-2,-1,-2,-2, 2,-3, 0, 0,-1,-4],
+  [-1,-3,-3,-3,-1,-3,-3,-4,-3, 4, 2,-3, 1, 0,-3,-2,-1,-3,-1, 3,-3,-3,-1,-4],
+  [-1,-2,-3,-4,-1,-2,-3,-4,-3, 2, 4,-2, 2, 0,-3,-2,-1,-2,-1, 1,-4,-3,-1,-4],
+  [-1, 2, 0,-1,-3, 1, 1,-2,-1,-3,-2, 5,-1,-3,-1, 0,-1,-3,-2,-2, 0, 1,-1,-4],
+  [-1,-1,-2,-3,-1, 0,-2,-3,-2, 1, 2,-1, 5, 0,-2,-1,-1,-1,-1, 1,-3,-1,-1,-4],
+  [-2,-3,-3,-3,-2,-3,-3,-3,-1, 0, 0,-3, 0, 6,-4,-2,-2, 1, 3,-1,-3,-3,-1,-4],
+  [-1,-2,-2,-1,-3,-1,-1,-2,-2,-3,-3,-1,-2,-4, 7,-1,-1,-4,-3,-2,-2,-1,-2,-4],
+  [ 1,-1, 1, 0,-1, 0, 0, 0,-1,-2,-2, 0,-1,-2,-1, 4, 1,-3,-2,-2, 0, 0, 0,-4],
+  [ 0,-1, 0,-1,-1,-1,-1,-2,-2,-1,-1,-1,-1,-2,-1, 1, 5,-2,-2, 0,-1,-1, 0,-4],
+  [-3,-3,-4,-4,-2,-2,-3,-2,-2,-3,-2,-3,-1, 1,-4,-3,-2,11, 2,-3,-4,-3,-2,-4],
+  [-2,-2,-2,-3,-2,-1,-2,-3, 2,-1,-1,-2,-1, 3,-3,-2,-2, 2, 7,-1,-3,-2,-1,-4],
+  [ 0,-3,-3,-3,-1,-2,-2,-3,-3, 3, 1,-2, 1,-1,-2,-2, 0,-3,-1, 4,-3,-2,-1,-4],
+  [-2,-1, 3, 4,-3, 0, 1,-1, 0,-3,-4, 0,-3,-3,-2, 0,-1,-4,-3,-3, 4, 1,-1,-4],
+  [-1, 0, 0, 1,-3, 3, 4,-2, 0,-3,-3, 1,-1,-3,-1, 0,-1,-3,-2,-2, 1, 4,-1,-4],
+  [ 0,-1,-1,-1,-2,-1,-1,-1,-1,-1,-1,-1,-1,-1,-2, 0, 0,-2,-1,-1,-1,-1,-1,-4],
+  [-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4, 1],
+]
+
+export const NUM_SYMBOLS = BLOSUM62_KEYS.length
+export const BLOSUM62 = Int8Array.from(BLOSUM62_DATA.flat())
+
+// charCode -> row/column in BLOSUM62, -1 for anything the matrix does not name.
+// On a 120x800 alignment a Map keyed by upper-cased character took 2.6s to
+// build a tree, against 0.34s for this table.
+export const symbolOfCode = new Int8Array(128).fill(-1)
+for (let i = 0; i < NUM_SYMBOLS; i++) {
+  const key = BLOSUM62_KEYS[i]!
+  symbolOfCode[key.charCodeAt(0)] = i
+  symbolOfCode[key.toLowerCase().charCodeAt(0)] = i
+}

package/src/colorSchemes.ts

@@ -1,11 +1,8 @@
 import { blue, green, orange, red } from '@mui/material/colors'
-import { colord, extend } from 'colord'
-import namesPlugin from 'colord/plugins/names'
+import { colord } from 'colord'
 
 import { transform } from './util.ts'
 
-extend([namesPlugin])
-
 // standard A/C/G/T(/U) coloring, shared by the `jbrowse_dna` and `nucleotide`
 // scheme names
 const dna = {
@@ -82,6 +79,7 @@ const colorSchemes: Record<string, Record<string, string>> = {
   },
 
   percent_identity_dynamic: {},
+  blosum62_dynamic: {},
   // https://github.com/biotite-dev/biotite/blob/8c460972f8ab904312f130dfb80f3efc8c9bd7c5/src/biotite/sequence/graphics/color_schemes/flower.json
   flower: {
     A: '#b18a51',

package/src/columnCounts.ts

@@ -44,7 +44,7 @@ function slotOf(code: number) {
   return code < 128 ? slotOfCode[code]! : OTHER
 }
 
-export function isGapSlot(slot: number) {
+function isGapSlot(slot: number) {
   return slot === DASH || slot === DOT
 }
 

package/src/components/Loading.tsx

@@ -10,6 +10,7 @@ import StatusMessage from './StatusMessage.tsx'
 import ImportForm from './import/ImportForm.tsx'
 
 import type { MsaViewModel } from '../model.ts'
+import type { ToolbarSlots } from './header/Header.tsx'
 
 const Reset = observer(function ({
   model,
@@ -21,20 +22,25 @@ const Reset = observer(function ({
   return (
     <div>
       <ErrorMessage error={error} />
-      <Button
-        variant="contained"
-        color="primary"
-        onClick={() => {
-          model.reset()
-        }}
-      >
-        Return to import form
-      </Button>
+      {model.importForm ? (
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => {
+            model.reset()
+          }}
+        >
+          Return to import form
+        </Button>
+      ) : null}
     </div>
   )
 })
 
-const Loading = observer(function ({ model }: { model: MsaViewModel }) {
+const Loading = observer(function ({
+  model,
+  ...slots
+}: { model: MsaViewModel } & ToolbarSlots) {
   const {
     isLoading,
     dataInitialized,
@@ -43,6 +49,7 @@ const Loading = observer(function ({ model }: { model: MsaViewModel }) {
     resetCount,
     msaFilehandle,
     treeFilehandle,
+    importForm,
   } = model
   const hasData = !!(data.msa || data.tree)
   // a failed load keeps its filehandle, so the error outranks the spinner
@@ -61,16 +68,20 @@ const Loading = observer(function ({ model }: { model: MsaViewModel }) {
           isLoading ? (
             <StatusMessage model={model} variant="page" />
           ) : (
-            <MSAView model={model} />
+            <MSAView model={model} {...slots} />
           )
         ) : hasData ? (
           <Reset model={model} error={error} />
         ) : (
           <>
             {loading ? <StatusMessage model={model} variant="page" /> : null}
-            <div style={{ display: loading ? 'none' : undefined }}>
-              <ImportForm model={model} />
-            </div>
+            {importForm ? (
+              <div style={{ display: loading ? 'none' : undefined }}>
+                <ImportForm model={model} />
+              </div>
+            ) : error ? (
+              <ErrorMessage error={error} />
+            ) : null}
           </>
         )}
       </ErrorBoundary>

package/src/components/MSAView.tsx

@@ -14,11 +14,13 @@ import MSAPanel from './msa/MSAPanel.tsx'
 import { clickColor, hoverColor, selectionFill } from './overlayColors.ts'
 import RowPanelHeaders from './rowpanels/RowPanelHeaders.tsx'
 import RowPanels from './rowpanels/RowPanels.tsx'
+import SettingsPanel from './settings/SettingsPanel.tsx'
 import TreeOverview from './tree/TreeOverview.tsx'
 import TreePanel from './tree/TreePanel.tsx'
 import TreeRuler from './tree/TreeRuler.tsx'
 
 import type { MsaViewModel } from '../model.ts'
+import type { ToolbarSlots } from './header/Header.tsx'
 
 // The band above the panels: the tree overview and scale bar, the strip
 // headers, and the minimap over the alignment. The spacer stands in for the
@@ -139,17 +141,32 @@ const View = observer(function ({ model }: { model: MsaViewModel }) {
   )
 })
 
-const MSAView = observer(function ({ model }: { model: MsaViewModel }) {
-  const { height, hideHeader, viewInitialized, DialogComponent, DialogProps } =
-    model
+const MSAView = observer(function ({
+  model,
+  ...slots
+}: { model: MsaViewModel } & ToolbarSlots) {
+  const {
+    height,
+    headerHeight,
+    hideHeader,
+    settingsOpen,
+    viewInitialized,
+    DialogComponent,
+    DialogProps,
+  } = model
 
   return (
     <div>
       {viewInitialized ? (
         <>
           <div style={{ height, overflow: 'clip' }}>
-            {hideHeader ? null : <Header model={model} />}
-            <View model={model} />
+            {hideHeader ? null : <Header model={model} {...slots} />}
+            <div style={{ display: 'flex' }}>
+              <View model={model} />
+              {settingsOpen ? (
+                <SettingsPanel model={model} height={height - headerHeight} />
+              ) : null}
+            </div>
           </div>
           <HorizontalResizeHandle model={model} />