react-msaview 5.10.0 → 6.1.0

package/dist/components/import/ImportFormExamples.js

@@ -3,65 +3,74 @@ import { Link, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
 import { smallMSA, smallMSAOnly, smallTree } from './data/seq2.js';
 import { load } from './util.js';
-function ListItem({ onClick, model, children, }) {
-    return (React.createElement("li", null,
-        React.createElement(Link, { onClick: event => {
-                model.setError(undefined);
-                event.preventDefault();
-                onClick();
-            }, href: "#" },
-            React.createElement(Typography, { component: "span" }, children))));
-}
 const BASE = 'https://jbrowse.org/genomes/multiple_sequence_alignments';
+const TREES = 'https://jbrowse.org/genomes/newicktrees';
+const examples = [
+    {
+        label: '230k COVID-19 samples (tree only)',
+        tree: `${TREES}/sarscov2phylo.pub.ft.nh`,
+    },
+    {
+        label: 'Small protein MSA+tree',
+        inline: { msa: smallMSA, tree: smallTree },
+    },
+    {
+        label: 'Small MSA only',
+        inline: { msa: smallMSAOnly },
+    },
+    {
+        label: 'PFAM SARS-CoV2 multi-stockholm',
+        msa: `${BASE}/pfam-cov2.stock`,
+    },
+    {
+        label: 'PFAM SARS-CoV2 multi-stockholm w/ domains loaded',
+        msa: `${BASE}/pfam-cov2.stock`,
+        gff: `${BASE}/pfam-cov2-domains.gff`,
+    },
+    {
+        label: 'Lysine stockholm file',
+        msa: `${BASE}/Lysine.stock`,
+    },
+    {
+        label: 'PF01601 stockholm file (SARS-CoV2 spike protein)',
+        msa: `${BASE}/PF01601_full.txt`,
+    },
+    {
+        label: 'Europe COVID full genomes (LR883044.1 and 199 other sequences)',
+        msa: `${BASE}/europe_covid.fa`,
+    },
+    {
+        label: 'MAFFT+VeryFastTree(17.9k samples)',
+        msa: `${BASE}/rhv_test-only.aligned_with_mafft_auto.fa`,
+        tree: `${BASE}/rhv_test-only.aligned_with_mafft_auto.nh`,
+    },
+    {
+        label: 'Human BLAST results mfa',
+        msa: 'https://jbrowse.org/demos/ttc39a.mfa',
+    },
+];
+function uri(url) {
+    return url ? { uri: url, locationType: 'UriLocation' } : undefined;
+}
 const ImportFormExamples = observer(function ({ model, }) {
-    function loadUris({ msa, tree, gff, }) {
-        try {
-            load(model, msa ? { uri: msa, locationType: 'UriLocation' } : undefined, tree ? { uri: tree, locationType: 'UriLocation' } : undefined, gff ? { uri: gff, locationType: 'UriLocation' } : undefined);
-        }
-        catch (e) {
-            console.error(e);
-            model.setError(e);
-        }
-    }
-    return (React.createElement("ul", null,
-        React.createElement(ListItem, { model: model, onClick: () => {
-                loadUris({
-                    tree: 'https://jbrowse.org/genomes/newicktrees/sarscov2phylo.pub.ft.nh',
-                });
-            } }, "230k COVID-19 samples (tree only)"),
-        React.createElement(ListItem, { model: model, onClick: () => {
-                model.setData({ msa: smallMSA, tree: smallTree });
-            } }, "Small protein MSA+tree"),
-        React.createElement(ListItem, { model: model, onClick: () => {
-                model.setData({ msa: smallMSAOnly });
-            } }, "Small MSA only"),
-        React.createElement(ListItem, { model: model, onClick: () => {
-                loadUris({ msa: `${BASE}/pfam-cov2.stock` });
-            } }, "PFAM SARS-CoV2 multi-stockholm"),
-        React.createElement(ListItem, { model: model, onClick: () => {
-                loadUris({
-                    msa: `${BASE}/pfam-cov2.stock`,
-                    gff: `${BASE}/pfam-cov2-domains.gff`,
-                });
-            } }, "PFAM SARS-CoV2 multi-stockholm w/ domains loaded"),
-        React.createElement(ListItem, { model: model, onClick: () => {
-                loadUris({ msa: `${BASE}/Lysine.stock` });
-            } }, "Lysine stockholm file"),
-        React.createElement(ListItem, { model: model, onClick: () => {
-                loadUris({ msa: `${BASE}/PF01601_full.txt` });
-            } }, "PF01601 stockholm file (SARS-CoV2 spike protein)"),
-        React.createElement(ListItem, { model: model, onClick: () => {
-                loadUris({ msa: `${BASE}/europe_covid.fa` });
-            } }, "Europe COVID full genomes (LR883044.1 and 199 other sequences)"),
-        React.createElement(ListItem, { model: model, onClick: () => {
-                loadUris({
-                    msa: `${BASE}/rhv_test-only.aligned_with_mafft_auto.fa`,
-                    tree: `${BASE}/rhv_test-only.aligned_with_mafft_auto.nh`,
-                });
-            } }, "MAFFT+VeryFastTree(17.9k samples)"),
-        React.createElement(ListItem, { model: model, onClick: () => {
-                loadUris({ msa: 'https://jbrowse.org/demos/ttc39a.mfa' });
-            } }, "Human BLAST results mfa")));
+    return (React.createElement("ul", null, examples.map(({ label, msa, tree, gff, inline }) => (React.createElement("li", { key: label },
+        React.createElement(Link, { href: "#", onClick: event => {
+                event.preventDefault();
+                model.setError(undefined);
+                try {
+                    if (inline) {
+                        model.setData(inline);
+                    }
+                    else {
+                        load(model, uri(msa), uri(tree), uri(gff));
+                    }
+                }
+                catch (e) {
+                    console.error(e);
+                    model.setError(e);
+                }
+            } },
+            React.createElement(Typography, { component: "span" }, label)))))));
 });
 export default ImportFormExamples;
 //# sourceMappingURL=ImportFormExamples.js.map

package/dist/components/import/ImportFormExamples.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImportFormExamples.js","sourceRoot":"","sources":["../../../src/components/import/ImportFormExamples.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ImportFormExamples.js","sourceRoot":"","sources":["../../../src/components/import/ImportFormExamples.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAIhC,MAAM,IAAI,GAAG,0DAA0D,CAAA;AACvE,MAAM,KAAK,GAAG,yCAAyC,CAAA;AAYvD,MAAM,QAAQ,GAAc;IAC1B;QACE,KAAK,EAAE,mCAAmC;QAC1C,IAAI,EAAE,GAAG,KAAK,0BAA0B;KACzC;IACD;QACE,KAAK,EAAE,wBAAwB;QAC/B,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE;KAC3C;IACD;QACE,KAAK,EAAE,gBAAgB;QACvB,MAAM,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE;KAC9B;IACD;QACE,KAAK,EAAE,gCAAgC;QACvC,GAAG,EAAE,GAAG,IAAI,kBAAkB;KAC/B;IACD;QACE,KAAK,EAAE,kDAAkD;QACzD,GAAG,EAAE,GAAG,IAAI,kBAAkB;QAC9B,GAAG,EAAE,GAAG,IAAI,wBAAwB;KACrC;IACD;QACE,KAAK,EAAE,uBAAuB;QAC9B,GAAG,EAAE,GAAG,IAAI,eAAe;KAC5B;IACD;QACE,KAAK,EAAE,kDAAkD;QACzD,GAAG,EAAE,GAAG,IAAI,mBAAmB;KAChC;IACD;QACE,KAAK,EAAE,gEAAgE;QACvE,GAAG,EAAE,GAAG,IAAI,kBAAkB;KAC/B;IACD;QACE,KAAK,EAAE,mCAAmC;QAC1C,GAAG,EAAE,GAAG,IAAI,2CAA2C;QACvD,IAAI,EAAE,GAAG,IAAI,2CAA2C;KACzD;IACD;QACE,KAAK,EAAE,yBAAyB;QAChC,GAAG,EAAE,sCAAsC;KAC5C;CACF,CAAA;AAED,SAAS,GAAG,CAAC,GAAY;IACvB,OAAO,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,YAAY,EAAE,aAAsB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAA;AAC7E,CAAC;AAED,MAAM,kBAAkB,GAAG,QAAQ,CAAC,UAAU,EAC5C,KAAK,GAGN;IACC,OAAO,CACL,gCACG,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACnD,4BAAI,GAAG,EAAE,KAAK;QACZ,oBAAC,IAAI,IACH,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,KAAK,CAAC,EAAE;gBACf,KAAK,CAAC,cAAc,EAAE,CAAA;gBACtB,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;gBACzB,IAAI,CAAC;oBACH,IAAI,MAAM,EAAE,CAAC;wBACX,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;oBACvB,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;oBAC5C,CAAC;gBACH,CAAC;gBAAC,OAAO,CAAC,EAAE,CAAC;oBACX,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;oBAChB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;gBACnB,CAAC;YACH,CAAC;YAED,oBAAC,UAAU,IAAC,SAAS,EAAC,MAAM,IAAE,KAAK,CAAc,CAC5C,CACJ,CACN,CAAC,CACC,CACN,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,kBAAkB,CAAA"}

package/dist/components/minimap/Minimap.js

@@ -1,43 +1,60 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
+import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-import { useDragScroll } from '../../useDragScroll.js';
+import { useCanvasAutorun } from '../../useCanvasAutorun.js';
+import DragHandle, { scrollbarThumbFill } from '../DragHandle.js';
+import { msaThumbnail } from '../msa/msaRaster.js';
 import { MINIMAP_BAR_HEIGHT, getMinimapLayout } from './minimapLayout.js';
 const Minimap = observer(function ({ model }) {
-    const [hovered, setHovered] = useState(false);
-    const { minimapHeight } = model;
-    const { unit, s, w, polygonHeight, polygonPoints } = getMinimapLayout(model);
-    const fill = 'rgba(66, 119, 127, 0.3)';
-    const { startDrag } = useDragScroll('x', useCallback((delta, startScroll) => {
+    const { minimapHeight, msaCanvasWidth, highResScaleFactor } = model;
+    const theme = useTheme();
+    const { unit, s, w, polygonHeight, polygonPoints } = getMinimapLayout(model, msaCanvasWidth);
+    // the whole alignment, sampled down to the bar: it says where the conserved
+    // blocks and the gappy stretches are, which is what a scroll aims at
+    const barWidth = Math.round(msaCanvasWidth * highResScaleFactor);
+    const barHeight = Math.round(MINIMAP_BAR_HEIGHT * highResScaleFactor);
+    const ref = useCanvasAutorun({
+        draw: ctx => {
+            ctx.resetTransform();
+            ctx.clearRect(0, 0, barWidth, barHeight);
+            const thumbnail = msaThumbnail({
+                model,
+                theme,
+                height: MINIMAP_BAR_HEIGHT,
+            });
+            if (thumbnail) {
+                ctx.imageSmoothingEnabled = true;
+                ctx.drawImage(thumbnail, 0, 0, thumbnail.width, thumbnail.height, 0, 0, barWidth, barHeight);
+            }
+        },
+        width: barWidth,
+        height: barHeight,
+        deps: [model, theme],
+    });
+    const onDrag = useCallback((delta, startScroll) => {
         model.setScrollX(startScroll - delta / unit);
-    }, [model, unit]));
+    }, [model, unit]);
     return (React.createElement("div", { style: {
             position: 'relative',
             height: minimapHeight,
-            width: '100%',
+            width: msaCanvasWidth,
+            flexShrink: 0,
         } },
-        React.createElement("div", { style: {
+        React.createElement("canvas", { ref: ref, width: barWidth, height: barHeight, style: {
+                display: 'block',
+                width: msaCanvasWidth,
                 height: MINIMAP_BAR_HEIGHT,
                 boxSizing: 'border-box',
                 border: '1px solid #555',
             } }),
-        React.createElement("div", { style: {
-                position: 'absolute',
+        React.createElement(DragHandle, { axis: "x", variant: "thumb", getStart: () => model.scrollX, onDrag: onDrag, style: {
                 top: 0,
                 left: Math.max(0, s),
-                background: hovered ? 'rgba(66,119,127,0.6)' : fill,
-                cursor: 'pointer',
                 height: MINIMAP_BAR_HEIGHT,
                 width: w,
-                zIndex: 100,
-            }, onMouseOver: () => {
-                setHovered(true);
-            }, onMouseOut: () => {
-                setHovered(false);
-            }, onMouseDown: event => {
-                startDrag(event, model.scrollX);
             } }),
-        React.createElement("svg", { height: polygonHeight, style: { width: '100%' } },
-            React.createElement("polygon", { fill: fill, points: polygonPoints }))));
+        React.createElement("svg", { height: polygonHeight, width: msaCanvasWidth },
+            React.createElement("polygon", { fill: scrollbarThumbFill, points: polygonPoints }))));
 });
 export default Minimap;
 //# sourceMappingURL=Minimap.js.map

package/dist/components/minimap/Minimap.js.map

@@ -1 +1 @@
-{"version":3,"file":"Minimap.js","sourceRoot":"","sources":["../../../src/components/minimap/Minimap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACtD,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAIzE,MAAM,OAAO,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACnE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;IAC/B,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAA;IAC5E,MAAM,IAAI,GAAG,yBAAyB,CAAA;IAEtC,MAAM,EAAE,SAAS,EAAE,GAAG,aAAa,CACjC,GAAG,EACH,WAAW,CACT,CAAC,KAAa,EAAE,WAAmB,EAAE,EAAE;QACrC,KAAK,CAAC,UAAU,CAAC,WAAW,GAAG,KAAK,GAAG,IAAI,CAAC,CAAA;IAC9C,CAAC,EACD,CAAC,KAAK,EAAE,IAAI,CAAC,CACd,CACF,CAAA;IAED,OAAO,CACL,6BACE,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,aAAa;YACrB,KAAK,EAAE,MAAM;SACd;QAED,6BACE,KAAK,EAAE;gBACL,MAAM,EAAE,kBAAkB;gBAC1B,SAAS,EAAE,YAAY;gBACvB,MAAM,EAAE,gBAAgB;aACzB,GACD;QACF,6BACE,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;gBACpB,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,IAAI;gBACnD,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,kBAAkB;gBAC1B,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,GAAG;aACZ,EACD,WAAW,EAAE,GAAG,EAAE;gBAChB,UAAU,CAAC,IAAI,CAAC,CAAA;YAClB,CAAC,EACD,UAAU,EAAE,GAAG,EAAE;gBACf,UAAU,CAAC,KAAK,CAAC,CAAA;YACnB,CAAC,EACD,WAAW,EAAE,KAAK,CAAC,EAAE;gBACnB,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAA;YACjC,CAAC,GACD;QAEF,6BAAK,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;YAClD,iCAAS,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,aAAa,GAAI,CAC1C,CACF,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,OAAO,CAAA"}
+{"version":3,"file":"Minimap.js","sourceRoot":"","sources":["../../../src/components/minimap/Minimap.tsx"],"names":[],"mappings":"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"}

package/dist/components/minimap/MinimapSVG.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { MsaViewModel } from '../../model.ts';
-declare const MinimapSVG: ({ model }: {
+declare const MinimapSVG: ({ model, width }: {
     model: MsaViewModel;
+    width: number;
 }) => React.JSX.Element;
 export default MinimapSVG;

package/dist/components/minimap/MinimapSVG.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import { MINIMAP_BAR_HEIGHT, getMinimapLayout } from './minimapLayout.js';
-const MinimapSVG = observer(({ model }) => {
-    const { msaAreaWidth } = model;
-    const { s, w, polygonPoints } = getMinimapLayout(model);
+const MinimapSVG = observer(({ model, width }) => {
+    const { s, w, polygonPoints } = getMinimapLayout(model, width);
     const fillColor = 'rgb(66, 119, 127)';
     const fillOpacity = 0.3;
     return (React.createElement(React.Fragment, null,
-        React.createElement("rect", { x: 0, y: 0, width: msaAreaWidth, height: MINIMAP_BAR_HEIGHT, stroke: "#555", fill: "none" }),
+        React.createElement("rect", { x: 0, y: 0, width: width, height: MINIMAP_BAR_HEIGHT, stroke: "#555", fill: "none" }),
         React.createElement("rect", { x: Math.max(0, s), y: 0, width: w, height: MINIMAP_BAR_HEIGHT, fill: fillColor, fillOpacity: fillOpacity, stroke: "#555" }),
         React.createElement("g", { transform: `translate(0 ${MINIMAP_BAR_HEIGHT})` },
             React.createElement("polygon", { fill: fillColor, fillOpacity: fillOpacity, points: polygonPoints }))));

package/dist/components/minimap/MinimapSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"MinimapSVG.js","sourceRoot":"","sources":["../../../src/components/minimap/MinimapSVG.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAIzE,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,EAAE,KAAK,EAA2B,EAAE,EAAE;IACjE,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAA;IAC9B,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAA;IACvD,MAAM,SAAS,GAAG,mBAAmB,CAAA;IACrC,MAAM,WAAW,GAAG,GAAG,CAAA;IAEvB,OAAO,CACL;QACE,8BACE,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,kBAAkB,EAC1B,MAAM,EAAC,MAAM,EACb,IAAI,EAAC,MAAM,GACX;QACF,8BACE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EACjB,CAAC,EAAE,CAAC,EACJ,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,kBAAkB,EAC1B,IAAI,EAAE,SAAS,EACf,WAAW,EAAE,WAAW,EACxB,MAAM,EAAC,MAAM,GACb;QACF,2BAAG,SAAS,EAAE,eAAe,kBAAkB,GAAG;YAChD,iCACE,IAAI,EAAE,SAAS,EACf,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,aAAa,GACrB,CACA,CACH,CACJ,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"MinimapSVG.js","sourceRoot":"","sources":["../../../src/components/minimap/MinimapSVG.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAIzE,MAAM,UAAU,GAAG,QAAQ,CACzB,CAAC,EAAE,KAAK,EAAE,KAAK,EAA0C,EAAE,EAAE;IAC3D,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IAC9D,MAAM,SAAS,GAAG,mBAAmB,CAAA;IACrC,MAAM,WAAW,GAAG,GAAG,CAAA;IAEvB,OAAO,CACL;QACE,8BACE,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,kBAAkB,EAC1B,MAAM,EAAC,MAAM,EACb,IAAI,EAAC,MAAM,GACX;QACF,8BACE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EACjB,CAAC,EAAE,CAAC,EACJ,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,kBAAkB,EAC1B,IAAI,EAAE,SAAS,EACf,WAAW,EAAE,WAAW,EACxB,MAAM,EAAC,MAAM,GACb;QACF,2BAAG,SAAS,EAAE,eAAe,kBAAkB,GAAG;YAChD,iCACE,IAAI,EAAE,SAAS,EACf,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,aAAa,GACrB,CACA,CACH,CACJ,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/components/minimap/minimapLayout.d.ts

@@ -1,6 +1,15 @@
 import type { MsaViewModel } from '../../model.ts';
 export declare const MINIMAP_BAR_HEIGHT = 12;
-export declare function getMinimapLayout(model: MsaViewModel): {
+/**
+ * Viewport-rectangle and trapezoid geometry for a minimap drawn `minimapWidth`
+ * pixels wide, shared by the interactive Minimap and the static MinimapSVG.
+ *
+ * The width is a parameter rather than read off the model because the two
+ * differ: on screen the minimap sits over the alignment canvas, while the SVG
+ * export lays the whole figure out on its own grid. What the rectangle *marks*
+ * is always the on-screen viewport, so that part comes from the model.
+ */
+export declare function getMinimapLayout(model: MsaViewModel, minimapWidth: number): {
     unit: number;
     s: number;
     w: number;

package/dist/components/minimap/minimapLayout.js

@@ -1,15 +1,20 @@
 export const MINIMAP_BAR_HEIGHT = 12;
-// viewport-rectangle and trapezoid geometry shared by the interactive Minimap
-// and the static MinimapSVG (used for SVG export)
-export function getMinimapLayout(model) {
-    const { scrollX, msaAreaWidth, minimapHeight, colWidth, numColumns } = model;
-    const unit = msaAreaWidth / numColumns / colWidth;
-    const left = -scrollX;
-    const s = left * unit;
-    const e = (left + msaAreaWidth) * unit;
-    const w = Math.max(e - s, 20);
+/**
+ * Viewport-rectangle and trapezoid geometry for a minimap drawn `minimapWidth`
+ * pixels wide, shared by the interactive Minimap and the static MinimapSVG.
+ *
+ * The width is a parameter rather than read off the model because the two
+ * differ: on screen the minimap sits over the alignment canvas, while the SVG
+ * export lays the whole figure out on its own grid. What the rectangle *marks*
+ * is always the on-screen viewport, so that part comes from the model.
+ */
+export function getMinimapLayout(model, minimapWidth) {
+    const { scrollX, minimapHeight, totalWidth, msaCanvasWidth } = model;
+    const unit = totalWidth > 0 ? minimapWidth / totalWidth : 0;
+    const s = -scrollX * unit;
+    const w = Math.max(msaCanvasWidth * unit, 20);
     const polygonHeight = minimapHeight - MINIMAP_BAR_HEIGHT;
-    const polygonPoints = `${s + w},0 ${s},0 0,${polygonHeight} ${msaAreaWidth},${polygonHeight}`;
+    const polygonPoints = `${s + w},0 ${s},0 0,${polygonHeight} ${minimapWidth},${polygonHeight}`;
     return { unit, s, w, polygonHeight, polygonPoints };
 }
 //# sourceMappingURL=minimapLayout.js.map

package/dist/components/minimap/minimapLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"minimapLayout.js","sourceRoot":"","sources":["../../../src/components/minimap/minimapLayout.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,CAAA;AAEpC,8EAA8E;AAC9E,kDAAkD;AAClD,MAAM,UAAU,gBAAgB,CAAC,KAAmB;IAClD,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IAC5E,MAAM,IAAI,GAAG,YAAY,GAAG,UAAU,GAAG,QAAQ,CAAA;IACjD,MAAM,IAAI,GAAG,CAAC,OAAO,CAAA;IACrB,MAAM,CAAC,GAAG,IAAI,GAAG,IAAI,CAAA;IACrB,MAAM,CAAC,GAAG,CAAC,IAAI,GAAG,YAAY,CAAC,GAAG,IAAI,CAAA;IACtC,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAA;IAC7B,MAAM,aAAa,GAAG,aAAa,GAAG,kBAAkB,CAAA;IACxD,MAAM,aAAa,GAAG,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,QAAQ,aAAa,IAAI,YAAY,IAAI,aAAa,EAAE,CAAA;IAC7F,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,aAAa,EAAE,aAAa,EAAE,CAAA;AACrD,CAAC"}
+{"version":3,"file":"minimapLayout.js","sourceRoot":"","sources":["../../../src/components/minimap/minimapLayout.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,CAAA;AAEpC;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAmB,EAAE,YAAoB;IACxE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,KAAK,CAAA;IACpE,MAAM,IAAI,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;IAC3D,MAAM,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAA;IACzB,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,GAAG,IAAI,EAAE,EAAE,CAAC,CAAA;IAC7C,MAAM,aAAa,GAAG,aAAa,GAAG,kBAAkB,CAAA;IACxD,MAAM,aAAa,GAAG,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,QAAQ,aAAa,IAAI,YAAY,IAAI,aAAa,EAAE,CAAA;IAC7F,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,aAAa,EAAE,aAAa,EAAE,CAAA;AACrD,CAAC"}

package/dist/components/msa/{DomainLegend.d.ts → AnnotationLegend.d.ts}

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { MsaViewModel } from '../../model.ts';
-declare const DomainLegend: ({ model }: {
+declare const AnnotationLegend: ({ model, }: {
     model: MsaViewModel;
 }) => React.JSX.Element | null;
-export default DomainLegend;
+export default AnnotationLegend;

package/dist/components/msa/{DomainLegend.js → AnnotationLegend.js}

@@ -3,7 +3,7 @@ import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import { IconButton, Paper, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-const DomainLegend = observer(function ({ model }) {
+const AnnotationLegend = observer(function ({ model, }) {
     const { actuallyShowDomains, visibleDomainTypes: visible, fillPalette, showDomainLegend: expanded, } = model;
     const ExpandIcon = expanded ? ExpandLess : ExpandMore;
     return actuallyShowDomains && visible.length > 0 ? (React.createElement(Paper, { elevation: 3, style: {
@@ -23,7 +23,7 @@ const DomainLegend = observer(function ({ model }) {
                 justifyContent: 'flex-end',
                 padding: '2px 4px 2px 8px',
             } },
-            React.createElement(IconButton, { size: "small", title: expanded ? 'Collapse domain key' : 'Expand domain key', onClick: () => {
+            React.createElement(IconButton, { size: "small", title: expanded ? 'Collapse key' : 'Expand key', onClick: () => {
                     model.setShowDomainLegend(!expanded);
                 } },
                 React.createElement(ExpandIcon, { fontSize: "small" }))),
@@ -36,5 +36,5 @@ const DomainLegend = observer(function ({ model }) {
                 } }),
             React.createElement(Typography, { variant: "caption", noWrap: true }, name)))))) : null)) : null;
 });
-export default DomainLegend;
-//# sourceMappingURL=DomainLegend.js.map
+export default AnnotationLegend;
+//# sourceMappingURL=AnnotationLegend.js.map

package/dist/components/msa/AnnotationLegend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationLegend.js","sourceRoot":"","sources":["../../../src/components/msa/AnnotationLegend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,UAAU,MAAM,gCAAgC,CAAA;AACvD,OAAO,UAAU,MAAM,gCAAgC,CAAA;AACvD,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,UAAU,EAC1C,KAAK,GAGN;IACC,MAAM,EACJ,mBAAmB,EACnB,kBAAkB,EAAE,OAAO,EAC3B,WAAW,EACX,gBAAgB,EAAE,QAAQ,GAC3B,GAAG,KAAK,CAAA;IACT,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAA;IAErD,OAAO,mBAAmB,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACjD,oBAAC,KAAK,IACJ,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,GAAG;YACX,QAAQ,EAAE,GAAG;YACb,SAAS,EAAE,KAAK;YAChB,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,OAAO,EAAE,IAAI;SACd;QAED,6BACE,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,UAAU;gBAC1B,OAAO,EAAE,iBAAiB;aAC3B;YAED,oBAAC,UAAU,IACT,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,EAC/C,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,mBAAmB,CAAC,CAAC,QAAQ,CAAC,CAAA;gBACtC,CAAC;gBAED,oBAAC,UAAU,IAAC,QAAQ,EAAC,OAAO,GAAG,CACpB,CACT;QACL,QAAQ,CAAC,CAAC,CAAC,CACV,6BAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,IACnD,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACpC,6BACE,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EACxD,KAAK,EAAE,SAAS;YAEhB,6BACE,KAAK,EAAE;oBACL,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,EAAE;oBACV,UAAU,EAAE,CAAC;oBACb,UAAU,EAAE,WAAW,CAAC,SAAS,CAAC;iBACnC,GACD;YACF,oBAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,MAAM,UACjC,IAAI,CACM,CACT,CACP,CAAC,CACE,CACP,CAAC,CAAC,CAAC,IAAI,CACF,CACT,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAC,CAAA;AAEF,eAAe,gBAAgB,CAAA"}

package/dist/components/msa/MSACanvas.js

@@ -4,7 +4,7 @@ import { useWheelScroll } from '../../useWheelScroll.js';
 import Loading from './Loading.js';
 import MSACanvasBlock from './MSACanvasBlock.js';
 const MSACanvas = observer(function ({ model }) {
-    const { MSA, verticalScrollbarWidth, msaFilehandle, height, msaAreaWidth, blocks2d, scrollZoom, } = model;
+    const { MSA, msaFilehandle, height, msaCanvasWidth, blocks2d, scrollZoom, scrollX, scrollY, } = model;
     const ref = useRef(null);
     const onScrollX = useCallback((d) => {
         model.doScrollX(d);
@@ -27,9 +27,15 @@ const MSACanvas = observer(function ({ model }) {
         }, style: {
             position: 'relative',
             height,
-            width: msaAreaWidth - verticalScrollbarWidth,
+            width: msaCanvasWidth,
             overflow: 'hidden',
-        } }, !MSA && !msaFilehandle ? null : MSA ? (blocks2d.map(([bx, by]) => (React.createElement(MSACanvasBlock, { key: `${bx}_${by}`, model: model, offsetX: bx, offsetY: by })))) : (React.createElement(Loading, null))));
+        } }, !MSA && !msaFilehandle ? null : MSA ? (React.createElement("div", { style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            transform: `translate(${scrollX}px, ${scrollY}px)`,
+            willChange: 'transform',
+        } }, blocks2d.map(([bx, by]) => (React.createElement(MSACanvasBlock, { key: `${bx}_${by}`, model: model, offsetX: bx, offsetY: by }))))) : (React.createElement(Loading, null))));
 });
 export default MSACanvas;
 //# sourceMappingURL=MSACanvas.js.map

package/dist/components/msa/MSACanvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"MSACanvas.js","sourceRoot":"","sources":["../../../src/components/msa/MSACanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,OAAO,MAAM,cAAe,CAAA;AACnC,OAAO,cAAc,MAAM,qBAAsB,CAAA;AAIjD,MAAM,SAAS,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACrE,MAAM,EACJ,GAAG,EACH,sBAAsB,EACtB,aAAa,EACb,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,UAAU,GACX,GAAG,KAAK,CAAA;IACT,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAS,EAAE,EAAE;QACZ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA;IACpB,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAA;IACD,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAS,EAAE,EAAE;QACZ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA;IACpB,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAA;IACD,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,WAAmB,EAAE,OAAe,EAAE,OAAe,EAAE,EAAE;QACxD,KAAK,CAAC,SAAS,CAAC,WAAW,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;IAChD,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAA;IACD,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,cAAc,CAAC;QAChD,GAAG;QACH,SAAS;QACT,SAAS;QACT,MAAM;QACN,UAAU;KACX,CAAC,CAAA;IAEF,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,iBAKI,YAAY,EACxB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,KAAK,CAAC,EAAE;YACpB,KAAK,CAAC,cAAc,EAAE,CAAA;QACxB,CAAC,EACD,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,MAAM;YACN,KAAK,EAAE,YAAY,GAAG,sBAAsB;YAC5C,QAAQ,EAAE,QAAQ;SACnB,IAEA,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CACrC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CACzB,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,EAClB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,EAAE,EACX,OAAO,EAAE,EAAE,GACX,CACH,CAAC,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,OAAO,OAAG,CACZ,CACG,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"MSACanvas.js","sourceRoot":"","sources":["../../../src/components/msa/MSACanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,OAAO,MAAM,cAAe,CAAA;AACnC,OAAO,cAAc,MAAM,qBAAsB,CAAA;AAIjD,MAAM,SAAS,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACrE,MAAM,EACJ,GAAG,EACH,aAAa,EACb,MAAM,EACN,cAAc,EACd,QAAQ,EACR,UAAU,EACV,OAAO,EACP,OAAO,GACR,GAAG,KAAK,CAAA;IACT,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAS,EAAE,EAAE;QACZ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA;IACpB,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAA;IACD,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAS,EAAE,EAAE;QACZ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA;IACpB,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAA;IACD,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,WAAmB,EAAE,OAAe,EAAE,OAAe,EAAE,EAAE;QACxD,KAAK,CAAC,SAAS,CAAC,WAAW,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;IAChD,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAA;IACD,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,cAAc,CAAC;QAChD,GAAG;QACH,SAAS;QACT,SAAS;QACT,MAAM;QACN,UAAU;KACX,CAAC,CAAA;IAEF,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,iBAKI,YAAY,EACxB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,KAAK,CAAC,EAAE;YACpB,KAAK,CAAC,cAAc,EAAE,CAAA;QACxB,CAAC,EACD,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,MAAM;YACN,KAAK,EAAE,cAAc;YACrB,QAAQ,EAAE,QAAQ;SACnB,IAEA,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAGrC,6BACE,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,SAAS,EAAE,aAAa,OAAO,OAAO,OAAO,KAAK;YAClD,UAAU,EAAE,WAAW;SACxB,IAEA,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAC1B,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,EAClB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,EAAE,EACX,OAAO,EAAE,EAAE,GACX,CACH,CAAC,CACE,CACP,CAAC,CAAC,CAAC,CACF,oBAAC,OAAO,OAAG,CACZ,CACG,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/components/msa/MSACanvasBlock.js

@@ -4,11 +4,12 @@ import { observer } from 'mobx-react';
 import { useCanvasAutorun } from '../../useCanvasAutorun.js';
 import { useColorContrast } from '../../useColorContrast.js';
 import ColumnStats from './ColumnStats.js';
+import { drawMsaRaster, rasterSupported } from './msaRaster.js';
 import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.js';
 import { renderMSABlock } from './renderMSABlock.js';
 import { useMsaBlockMouse } from './useMsaBlockMouse.js';
 const MSACanvasBlock = observer(function ({ model, offsetX, offsetY, }) {
-    const { scrollY, scrollX, colorScheme, blockSize, highResScaleFactor } = model;
+    const { colorScheme, blockSize, highResScaleFactor } = model;
     const { theme, contrastScheme } = useColorContrast(colorScheme);
     const { tooltipPoint, onMouseMove, onClick, onMouseLeave } = useMsaBlockMouse({
         model,
@@ -26,6 +27,13 @@ const MSACanvasBlock = observer(function ({ model, offsetX, offsetY, }) {
                 offsetY,
                 model,
             });
+            // the alignment background comes from zoom-independent raster tiles; the
+            // domain overlay paints its own boxes instead, and letter-color mode has
+            // no background to paint
+            const rasterTiles = !model.actuallyShowDomains && model.bgColor && rasterSupported();
+            if (rasterTiles) {
+                drawMsaRaster({ ctx, model, theme, offsetX, offsetY });
+            }
             renderMSABlock({
                 ctx,
                 theme,
@@ -33,6 +41,7 @@ const MSACanvasBlock = observer(function ({ model, offsetX, offsetY, }) {
                 offsetY,
                 contrastScheme,
                 model,
+                rasterTiles,
             });
         },
         width: canvasSize,
@@ -53,8 +62,8 @@ const MSACanvasBlock = observer(function ({ model, offsetX, offsetY, }) {
                 onMouseLeave();
             }, width: canvasSize, height: canvasSize, style: {
                 position: 'absolute',
-                top: scrollY + offsetY,
-                left: scrollX + offsetX,
+                top: offsetY,
+                left: offsetX,
                 width: blockSize,
                 height: blockSize,
             } }),

package/dist/components/msa/MSACanvasBlock.js.map

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

package/dist/components/msa/MSAMouseoverCanvas.js

@@ -4,8 +4,7 @@ import { observer } from 'mobx-react';
 import { useCanvasAutorun } from '../../useCanvasAutorun.js';
 import { renderMouseover } from './renderMSAMouseover.js';
 const MSAMouseoverCanvas = observer(function ({ model, }) {
-    const { height, msaAreaWidth, verticalScrollbarWidth, highResScaleFactor } = model;
-    const width = msaAreaWidth - verticalScrollbarWidth;
+    const { height, msaCanvasWidth: width, highResScaleFactor } = model;
     const canvasWidth = width * highResScaleFactor;
     const canvasHeight = height * highResScaleFactor;
     const ref = useCanvasAutorun({

package/dist/components/msa/MSAMouseoverCanvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"MSAMouseoverCanvas.js","sourceRoot":"","sources":["../../../src/components/msa/MSAMouseoverCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAIzD,MAAM,kBAAkB,GAAG,QAAQ,CAAC,UAAU,EAC5C,KAAK,GAGN;IACC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,GACxE,KAAK,CAAA;IACP,MAAM,KAAK,GAAG,YAAY,GAAG,sBAAsB,CAAA;IACnD,MAAM,WAAW,GAAG,KAAK,GAAG,kBAAkB,CAAA;IAC9C,MAAM,YAAY,GAAG,MAAM,GAAG,kBAAkB,CAAA;IAChD,MAAM,GAAG,GAAG,gBAAgB,CAAC;QAC3B,IAAI,EAAE,GAAG,CAAC,EAAE;YACV,IAAI,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;gBACnB,eAAe,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAA;YACjC,CAAC;QACH,CAAC;QACD,KAAK,EAAE,WAAW;QAClB,MAAM,EAAE,YAAY;QACpB,IAAI,EAAE,CAAC,KAAK,CAAC;KACd,CAAC,CAAA;IAEF,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,EAAE,EAAC,WAAW,EACd,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,YAAY,EACpB,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK;YACL,MAAM;YACN,MAAM,EAAE,IAAI;YACZ,aAAa,EAAE,MAAM;SACtB,GACD,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"MSAMouseoverCanvas.js","sourceRoot":"","sources":["../../../src/components/msa/MSAMouseoverCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAIzD,MAAM,kBAAkB,GAAG,QAAQ,CAAC,UAAU,EAC5C,KAAK,GAGN;IACC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAA;IACnE,MAAM,WAAW,GAAG,KAAK,GAAG,kBAAkB,CAAA;IAC9C,MAAM,YAAY,GAAG,MAAM,GAAG,kBAAkB,CAAA;IAChD,MAAM,GAAG,GAAG,gBAAgB,CAAC;QAC3B,IAAI,EAAE,GAAG,CAAC,EAAE;YACV,IAAI,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;gBACnB,eAAe,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAA;YACjC,CAAC;QACH,CAAC;QACD,KAAK,EAAE,WAAW;QAClB,MAAM,EAAE,YAAY;QACpB,IAAI,EAAE,CAAC,KAAK,CAAC;KACd,CAAC,CAAA;IAEF,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,EAAE,EAAC,WAAW,EACd,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,YAAY,EACpB,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK;YACL,MAAM;YACN,MAAM,EAAE,IAAI;YACZ,aAAa,EAAE,MAAM;SACtB,GACD,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,kBAAkB,CAAA"}

package/dist/components/msa/MSAPanel.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-import DomainLegend from './DomainLegend.js';
+import AnnotationLegend from './AnnotationLegend.js';
 import MSACanvas from './MSACanvas.js';
 import MSAMouseoverCanvas from './MSAMouseoverCanvas.js';
 const MSAPanel = observer(function ({ model }) {
     return (React.createElement("div", { style: { position: 'relative' } },
         React.createElement(MSACanvas, { model: model }),
         React.createElement(MSAMouseoverCanvas, { model: model }),
-        React.createElement(DomainLegend, { model: model })));
+        React.createElement(AnnotationLegend, { model: model })));
 });
 export default MSAPanel;
 //# sourceMappingURL=MSAPanel.js.map

package/dist/components/msa/MSAPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"MSAPanel.js","sourceRoot":"","sources":["../../../src/components/msa/MSAPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,YAAY,MAAM,mBAAoB,CAAA;AAC7C,OAAO,SAAS,MAAM,gBAAiB,CAAA;AACvC,OAAO,kBAAkB,MAAM,yBAA0B,CAAA;AAKzD,MAAM,QAAQ,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACpE,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE;QAClC,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,GAAI;QAC3B,oBAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,GAAI;QACpC,oBAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,CAC1B,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"MSAPanel.js","sourceRoot":"","sources":["../../../src/components/msa/MSAPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,gBAAgB,MAAM,uBAAwB,CAAA;AACrD,OAAO,SAAS,MAAM,gBAAiB,CAAA;AACvC,OAAO,kBAAkB,MAAM,yBAA0B,CAAA;AAKzD,MAAM,QAAQ,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACpE,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE;QAClC,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,GAAI;QAC3B,oBAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,GAAI;QACpC,oBAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,GAAI,CAC9B,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/components/msa/domainBandCursor.d.ts

@@ -0,0 +1,17 @@
+import type { DomainBand } from '../../types.ts';
+/**
+ * Left-to-right cursor over one row's domain bands, answering "which band is
+ * drawn on top at this column" — the fill a letter there has to contrast
+ * against.
+ *
+ * Not simply the first band covering the column. The overlay paints in
+ * `domainBands` order, largest first, so where signatures nest — a family
+ * enclosing a domain, which InterProScan emits routinely — the box a reader
+ * actually sees is the last one painted over that column. `stackIndex` is that
+ * paint order.
+ *
+ * `bands` must be sorted by start column (`domainBandsByStart`), and columns
+ * must be visited in increasing order, which is what the block renderer does.
+ * Both keep this to one pass over the bands per row rather than a scan per cell.
+ */
+export declare function domainBandCursor(bands: DomainBand[] | undefined): (col: number) => DomainBand | undefined;

package/dist/components/msa/domainBandCursor.js

@@ -0,0 +1,39 @@
+/**
+ * Left-to-right cursor over one row's domain bands, answering "which band is
+ * drawn on top at this column" — the fill a letter there has to contrast
+ * against.
+ *
+ * Not simply the first band covering the column. The overlay paints in
+ * `domainBands` order, largest first, so where signatures nest — a family
+ * enclosing a domain, which InterProScan emits routinely — the box a reader
+ * actually sees is the last one painted over that column. `stackIndex` is that
+ * paint order.
+ *
+ * `bands` must be sorted by start column (`domainBandsByStart`), and columns
+ * must be visited in increasing order, which is what the block renderer does.
+ * Both keep this to one pass over the bands per row rather than a scan per cell.
+ */
+export function domainBandCursor(bands) {
+    let next = 0;
+    let active = [];
+    return (col) => {
+        if (!bands) {
+            return undefined;
+        }
+        while (next < bands.length && bands[next].startCol <= col) {
+            active.push(bands[next]);
+            next++;
+        }
+        if (active.some(band => band.endCol <= col)) {
+            active = active.filter(band => band.endCol > col);
+        }
+        let top;
+        for (const band of active) {
+            if (!top || band.stackIndex > top.stackIndex) {
+                top = band;
+            }
+        }
+        return top;
+    };
+}
+//# sourceMappingURL=domainBandCursor.js.map

package/dist/components/msa/domainBandCursor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"domainBandCursor.js","sourceRoot":"","sources":["../../../src/components/msa/domainBandCursor.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA+B;IAC9D,IAAI,IAAI,GAAG,CAAC,CAAA;IACZ,IAAI,MAAM,GAAiB,EAAE,CAAA;IAE7B,OAAO,CAAC,GAAW,EAAE,EAAE;QACrB,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,SAAS,CAAA;QAClB,CAAC;QACD,OAAO,IAAI,GAAG,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,CAAE,CAAC,QAAQ,IAAI,GAAG,EAAE,CAAC;YAC3D,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAE,CAAC,CAAA;YACzB,IAAI,EAAE,CAAA;QACR,CAAC;QACD,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,CAAC;YAC5C,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,CAAA;QACnD,CAAC;QACD,IAAI,GAA2B,CAAA;QAC/B,KAAK,MAAM,IAAI,IAAI,MAAM,EAAE,CAAC;YAC1B,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,UAAU,EAAE,CAAC;gBAC7C,GAAG,GAAG,IAAI,CAAA;YACZ,CAAC;QACH,CAAC;QACD,OAAO,GAAG,CAAA;IACZ,CAAC,CAAA;AACH,CAAC"}