react-msaview 6.5.0 → 7.0.0

package/dist/components/header/TreeSettingsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeSettingsMenu.js","sourceRoot":"","sources":["../../../src/components/header/TreeSettingsMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,mBAAmB,MAAM,sCAAsC,CAAA;AACtE,OAAO,WAAW,MAAM,iCAAiC,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAI9D,MAAM,gBAAgB,GAAG,QAAQ,CAAC,UAAU,EAC1C,KAAK,GAGN;IACC,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IACtB,OAAO,CACL,oBAAC,mBAAmB,mBACN,oBAAoB,EAChC,OAAO,EAAC,eAAe,EACvB,mBAAmB,EAAE,KAAK,EAC1B,YAAY,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,EACxD,eAAe,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,EACxD,SAAS,EAAE;YACT,GAAG,qBAAqB,CAAC,KAAK,CAAC;YAC/B,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC;gBAClB,CAAC,CAAC;oBACE;wBACE,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,SAAkB;wBACxB,OAAO,EAAE;4BACP;gCACE,KAAK,EAAE,4CAA4C;gCACnD,OAAO,EAAE,GAAG,EAAE;oCACZ,IAAI,CAAC;wCACH,KAAK,CAAC,mCAAmC,EAAE,CAAA;oCAC7C,CAAC;oCAAC,OAAO,CAAC,EAAE,CAAC;wCACX,OAAO,CAAC,KAAK,CAAC,8BAA8B,EAAE,CAAC,CAAC,CAAA;wCAChD,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;oCACnB,CAAC;gCACH,CAAC;6BACF;yBACF;qBACF;iBACF;gBACH,CAAC,CAAC,EAAE,CAAC;SACR;QAED,oBAAC,WAAW,OAAG,CACK,CACvB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"TreeSettingsMenu.js","sourceRoot":"","sources":["../../../src/components/header/TreeSettingsMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,mBAAmB,MAAM,sCAAsC,CAAA;AACtE,OAAO,WAAW,MAAM,iCAAiC,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAI9D,MAAM,gBAAgB,GAAG,QAAQ,CAAC,UAAU,EAC1C,KAAK,GAGN;IACC,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IACtB,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,sBAAsB,CAAA;IACxD,OAAO,CACL,oBAAC,mBAAmB,mBACN,oBAAoB,EAChC,OAAO,EAAC,eAAe,EACvB,mBAAmB,EAAE,KAAK,EAC1B,YAAY,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,EACxD,eAAe,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,EACxD,SAAS,EAAE;YACT,GAAG,qBAAqB,CAAC,KAAK,CAAC;YAC/B,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC;gBAClB,CAAC,CAAC;oBACE;wBACE,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,SAAkB;wBACxB,OAAO,EAAE;4BACP;gCACE,wDAAwD;gCACxD,uDAAuD;gCACvD,iBAAiB;gCACjB,KAAK,EAAE,WAAW;oCAChB,CAAC,CAAC,yCAAyC,sBAAsB,sBAAsB;oCACvF,CAAC,CAAC,4CAA4C;gCAChD,QAAQ,EAAE,WAAW;gCACrB,OAAO,EAAE,GAAG,EAAE;oCACZ,IAAI,CAAC;wCACH,KAAK,CAAC,mCAAmC,EAAE,CAAA;oCAC7C,CAAC;oCAAC,OAAO,CAAC,EAAE,CAAC;wCACX,OAAO,CAAC,KAAK,CAAC,8BAA8B,EAAE,CAAC,CAAC,CAAA;wCAChD,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;oCACnB,CAAC;gCACH,CAAC;6BACF;yBACF;qBACF;iBACF;gBACH,CAAC,CAAC,EAAE,CAAC;SACR;QAED,oBAAC,WAAW,OAAG,CACK,CACvB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,gBAAgB,CAAA"}

package/dist/components/header/UnshareableDataWarning.d.ts

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

package/dist/components/header/UnshareableDataWarning.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import LinkOff from '@mui/icons-material/LinkOff';
+import { Tooltip, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+const useStyles = makeStyles()(theme => ({
+    warning: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4,
+        margin: 'auto',
+        marginLeft: 10,
+        whiteSpace: 'nowrap',
+        color: theme.palette.warning.main,
+        cursor: 'help',
+    },
+}));
+function size(bytes) {
+    return bytes < 1_000_000
+        ? `${Math.round(bytes / 1000)} kB`
+        : `${(bytes / 1_000_000).toFixed(1)} MB`;
+}
+// The viewer holds documents its own snapshot does not carry, and until this
+// existed it said nothing about it: the view worked, the URL quietly lost the
+// data, and whoever copied the link found out from the person who opened it.
+// See `unshareableData` on the model.
+const UnshareableDataWarning = observer(function ({ model, }) {
+    const { unshareableData } = model;
+    const { classes } = useStyles();
+    if (unshareableData.length === 0) {
+        return null;
+    }
+    const what = unshareableData
+        .map(({ what, bytes }) => `${what} (${size(bytes)})`)
+        .join(' and the ');
+    return (React.createElement(Tooltip, { title: `The ${what} came from this computer and is too large to travel in a URL, so a link to this page opens without it. Serve the file over HTTP and open it by URL to share the view.` },
+        React.createElement(Typography, { component: "div", className: classes.warning },
+            React.createElement(LinkOff, { fontSize: "small" }),
+            "Not in the link")));
+});
+export default UnshareableDataWarning;
+//# sourceMappingURL=UnshareableDataWarning.js.map

package/dist/components/header/UnshareableDataWarning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnshareableDataWarning.js","sourceRoot":"","sources":["../../../src/components/header/UnshareableDataWarning.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAA;AACzD,OAAO,OAAO,MAAM,6BAA6B,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACvC,OAAO,EAAE;QACP,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,CAAC;QACN,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,EAAE;QACd,UAAU,EAAE,QAAQ;QACpB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;QACjC,MAAM,EAAE,MAAM;KACf;CACF,CAAC,CAAC,CAAA;AAEH,SAAS,IAAI,CAAC,KAAa;IACzB,OAAO,KAAK,GAAG,SAAS;QACtB,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;QAClC,CAAC,CAAC,GAAG,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAA;AAC5C,CAAC;AAED,6EAA6E;AAC7E,8EAA8E;AAC9E,6EAA6E;AAC7E,sCAAsC;AACtC,MAAM,sBAAsB,GAAG,QAAQ,CAAC,UAAU,EAChD,KAAK,GAGN;IACC,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,CAAA;IACjC,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,IAAI,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACjC,OAAO,IAAI,CAAA;IACb,CAAC;IACD,MAAM,IAAI,GAAG,eAAe;SACzB,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;SACpD,IAAI,CAAC,WAAW,CAAC,CAAA;IACpB,OAAO,CACL,oBAAC,OAAO,IACN,KAAK,EAAE,OAAO,IAAI,uKAAuK;QAEzL,oBAAC,UAAU,IAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAE,OAAO,CAAC,OAAO;YACpD,oBAAC,OAAO,IAAC,QAAQ,EAAC,OAAO,GAAG;8BAEjB,CACL,CACX,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,sBAAsB,CAAA"}

package/dist/components/header/getAnnotationsMenu.js

@@ -1,22 +1,22 @@
 import { lazy } from 'react';
 import FilterAlt from '@mui/icons-material/FilterAlt';
 import FolderOpen from '@mui/icons-material/FolderOpen';
-import Search from '@mui/icons-material/Search';
+import MenuBook from '@mui/icons-material/MenuBook';
 import Sort from '@mui/icons-material/Sort';
 import Visibility from '@mui/icons-material/Visibility';
 const FeatureFilterDialog = lazy(() => import('../dialogs/FeatureDialog.js'));
-const InterProScanFileDialog = lazy(() => import('../dialogs/InterProScanFileDialog.js'));
-const InterProScanDialog = lazy(() => import('../dialogs/InterProScanDialog.js'));
+const AnnotationFileDialog = lazy(() => import('../dialogs/AnnotationFileDialog.js'));
+const domainsTutorial = 'https://gmod.org/JBrowseMSA/tutorials/protein_family';
 export function getAnnotationsMenu({ model }) {
     const { showDomains, actuallyShowDomains, subFeatureRows, noDomains } = model;
     const noneLoaded = noDomains ? ' (none loaded)' : '';
     return [
         {
-            label: 'Open InterProScan results...',
+            label: 'Open annotation file...',
             icon: FolderOpen,
             onClick: () => {
                 model.queueDialog(handleClose => [
-                    InterProScanFileDialog,
+                    AnnotationFileDialog,
                     {
                         handleClose,
                         model,
@@ -24,17 +24,17 @@ export function getAnnotationsMenu({ model }) {
                 ]);
             },
         },
+        // The viewer used to submit the whole alignment to the EBI iprscan5 queue
+        // and poll it for about fifteen minutes, capped at 140 rows and under a
+        // hardcoded email address. `react-msaview-cli interpro` answers the same
+        // question from InterPro's precomputed matches in seconds, and
+        // `interproscan` covers rows InterPro has not seen. Neither belongs in a
+        // browser tab, so this points at the page that walks through them.
         {
-            label: 'Query InterProScan...',
-            icon: Search,
+            label: 'How to get a domain file...',
+            icon: MenuBook,
             onClick: () => {
-                model.queueDialog(handleClose => [
-                    InterProScanDialog,
-                    {
-                        handleClose,
-                        model,
-                    },
-                ]);
+                window.open(domainsTutorial, '_blank', 'noopener,noreferrer');
             },
         },
         {

package/dist/components/header/getAnnotationsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"getAnnotationsMenu.js","sourceRoot":"","sources":["../../../src/components/header/getAnnotationsMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAE5B,OAAO,SAAS,MAAM,+BAA+B,CAAA;AACrD,OAAO,UAAU,MAAM,gCAAgC,CAAA;AACvD,OAAO,MAAM,MAAM,4BAA4B,CAAA;AAC/C,OAAO,IAAI,MAAM,0BAA0B,CAAA;AAC3C,OAAO,UAAU,MAAM,gCAAgC,CAAA;AAIvD,MAAM,mBAAmB,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,6BAA8B,CAAC,CAAC,CAAA;AAC9E,MAAM,sBAAsB,GAAG,IAAI,CACjC,GAAG,EAAE,CAAC,MAAM,CAAC,sCAAuC,CAAC,CACtD,CAAA;AACD,MAAM,kBAAkB,GAAG,IAAI,CAC7B,GAAG,EAAE,CAAC,MAAM,CAAC,kCAAmC,CAAC,CAClD,CAAA;AAED,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,EAA2B;IACnE,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAC7E,MAAM,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAA;IACpD,OAAO;QACL;YACE,KAAK,EAAE,8BAA8B;YACrC,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,CAAC;oBAC/B,sBAAsB;oBACtB;wBACE,WAAW;wBACX,KAAK;qBACN;iBACF,CAAC,CAAA;YACJ,CAAC;SACF;QACD;YACE,KAAK,EAAE,uBAAuB;YAC9B,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,CAAC;oBAC/B,kBAAkB;oBAClB;wBACE,WAAW;wBACX,KAAK;qBACN;iBACF,CAAC,CAAA;YACJ,CAAC;SACF;QACD;YACE,KAAK,EAAE,mBAAmB,UAAU,EAAE;YACtC,QAAQ,EAAE,SAAS;YACnB,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,mBAAmB;YAC5B,IAAI,EAAE,UAAmB;YACzB,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,CAAA;YACpC,CAAC;SACF;QACD;YACE,KAAK,EAAE,qBAAqB,UAAU,EAAE;YACxC,QAAQ,EAAE,SAAS;YACnB,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK;YACrD,IAAI,EAAE,IAAI;YACV,IAAI,EAAE,UAAmB;YACzB,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAAA;YAC1C,CAAC;SACF;QACD;YACE,KAAK,EAAE,qBAAqB,UAAU,EAAE;YACxC,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,SAAS;YACnB,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;oBAC3B,mBAAmB;oBACnB;wBACE,OAAO;wBACP,KAAK;qBACN;iBACF,CAAC,CAAA;YACJ,CAAC;SACF;KACF,CAAA;AACH,CAAC"}
+{"version":3,"file":"getAnnotationsMenu.js","sourceRoot":"","sources":["../../../src/components/header/getAnnotationsMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAE5B,OAAO,SAAS,MAAM,+BAA+B,CAAA;AACrD,OAAO,UAAU,MAAM,gCAAgC,CAAA;AACvD,OAAO,QAAQ,MAAM,8BAA8B,CAAA;AACnD,OAAO,IAAI,MAAM,0BAA0B,CAAA;AAC3C,OAAO,UAAU,MAAM,gCAAgC,CAAA;AAIvD,MAAM,mBAAmB,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,6BAA8B,CAAC,CAAC,CAAA;AAC9E,MAAM,oBAAoB,GAAG,IAAI,CAC/B,GAAG,EAAE,CAAC,MAAM,CAAC,oCAAqC,CAAC,CACpD,CAAA;AAED,MAAM,eAAe,GAAG,sDAAsD,CAAA;AAE9E,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,EAA2B;IACnE,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAC7E,MAAM,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAA;IACpD,OAAO;QACL;YACE,KAAK,EAAE,yBAAyB;YAChC,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,CAAC;oBAC/B,oBAAoB;oBACpB;wBACE,WAAW;wBACX,KAAK;qBACN;iBACF,CAAC,CAAA;YACJ,CAAC;SACF;QACD,0EAA0E;QAC1E,wEAAwE;QACxE,yEAAyE;QACzE,+DAA+D;QAC/D,yEAAyE;QACzE,mEAAmE;QACnE;YACE,KAAK,EAAE,6BAA6B;YACpC,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,IAAI,CAAC,eAAe,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAA;YAC/D,CAAC;SACF;QACD;YACE,KAAK,EAAE,mBAAmB,UAAU,EAAE;YACtC,QAAQ,EAAE,SAAS;YACnB,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,mBAAmB;YAC5B,IAAI,EAAE,UAAmB;YACzB,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,CAAA;YACpC,CAAC;SACF;QACD;YACE,KAAK,EAAE,qBAAqB,UAAU,EAAE;YACxC,QAAQ,EAAE,SAAS;YACnB,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK;YACrD,IAAI,EAAE,IAAI;YACV,IAAI,EAAE,UAAmB;YACzB,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAAA;YAC1C,CAAC;SACF;QACD;YACE,KAAK,EAAE,qBAAqB,UAAU,EAAE;YACxC,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,SAAS;YACnB,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;oBAC3B,mBAAmB;oBACnB;wBACE,OAAO;wBACP,KAAK;qBACN;iBACF,CAAC,CAAA;YACJ,CAAC;SACF;KACF,CAAA;AACH,CAAC"}

package/dist/components/import/ImportForm.js

@@ -12,7 +12,7 @@ const ImportForm = observer(function ({ model }) {
     return (React.createElement(Container, null,
         React.createElement("div", { style: { width: '50%' } },
             error ? React.createElement(ErrorMessage, { error: error }) : null,
-            React.createElement(Typography, null, "Open an MSA file (stockholm or clustal format) and/or a tree file (newick format)."),
+            React.createElement(Typography, null, "Open an MSA file (FASTA, Stockholm, Clustal, A3M or EMF format) and/or a tree file (Newick format)."),
             React.createElement(Typography, { color: "error" }, "Note: you can open up just an MSA or just a tree, both are not required. Some MSA files e.g. stockholm format have an embedded tree also and this is fine, and opening a separate tree file is not required.")),
         React.createElement("div", { style: {
                 display: 'flex',

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

@@ -1 +1 @@
-{"version":3,"file":"ImportForm.js","sourceRoot":"","sources":["../../../src/components/import/ImportForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC7D,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,kBAAkB,MAAM,yBAA0B,CAAA;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAKhC,MAAM,UAAU,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACtE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAgB,CAAA;IACtD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAgB,CAAA;IACxD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAgB,CAAA;IACtD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IAEvB,OAAO,CACL,oBAAC,SAAS;QACR,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;YACzB,KAAK,CAAC,CAAC,CAAC,oBAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,IAAI;YAC9C,oBAAC,UAAU,6FAGE;YACb,oBAAC,UAAU,IAAC,KAAK,EAAC,OAAO,mNAKZ,CACT;QAEN,6BACE,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,QAAQ;gBACxB,UAAU,EAAE,QAAQ;gBACpB,GAAG,EAAE,EAAE;aACR;YAED;gBACE;oBACE,oBAAC,UAAU,0BAA6B;oBACxC,oBAAC,YAAY,IAAC,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,GAAI,CACxD;gBACN;oBACE,oBAAC,UAAU,2BAA8B;oBACzC,oBAAC,YAAY,IAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,GAAI,CAC1D;gBACN;oBACE,oBAAC,UAAU,gDAAmD;oBAC9D,oBAAC,YAAY,IAAC,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,GAAI,CACxD,CACF;YACN;gBACE,oBAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,CAAC;4BACH,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;wBACzC,CAAC;wBAAC,OAAO,CAAC,EAAE,CAAC;4BACX,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;4BAChB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;wBACnB,CAAC;oBACH,CAAC,EACD,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,SAAS,EACf,QAAQ,EAAE,CAAC,OAAO,IAAI,CAAC,QAAQ,WAGxB,CACL;YAEN;gBACE,oBAAC,UAAU,mBAAsB;gBACjC,oBAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,GAAI,CAChC,CACF,CACI,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"ImportForm.js","sourceRoot":"","sources":["../../../src/components/import/ImportForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC7D,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,kBAAkB,MAAM,yBAA0B,CAAA;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAKhC,MAAM,UAAU,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACtE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAgB,CAAA;IACtD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAgB,CAAA;IACxD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAgB,CAAA;IACtD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IAEvB,OAAO,CACL,oBAAC,SAAS;QACR,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;YACzB,KAAK,CAAC,CAAC,CAAC,oBAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,IAAI;YAC9C,oBAAC,UAAU,8GAGE;YACb,oBAAC,UAAU,IAAC,KAAK,EAAC,OAAO,mNAKZ,CACT;QAEN,6BACE,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,QAAQ;gBACxB,UAAU,EAAE,QAAQ;gBACpB,GAAG,EAAE,EAAE;aACR;YAED;gBACE;oBACE,oBAAC,UAAU,0BAA6B;oBACxC,oBAAC,YAAY,IAAC,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,GAAI,CACxD;gBACN;oBACE,oBAAC,UAAU,2BAA8B;oBACzC,oBAAC,YAAY,IAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,GAAI,CAC1D;gBACN;oBACE,oBAAC,UAAU,gDAAmD;oBAC9D,oBAAC,YAAY,IAAC,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,GAAI,CACxD,CACF;YACN;gBACE,oBAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,CAAC;4BACH,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAA;wBACzC,CAAC;wBAAC,OAAO,CAAC,EAAE,CAAC;4BACX,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;4BAChB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;wBACnB,CAAC;oBACH,CAAC,EACD,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,SAAS,EACf,QAAQ,EAAE,CAAC,OAAO,IAAI,CAAC,QAAQ,WAGxB,CACL;YAEN;gBACE,oBAAC,UAAU,mBAAsB;gBACjC,oBAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,GAAI,CAChC,CACF,CACI,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,UAAU,CAAA"}

package/dist/components/import/ImportFormExamples.js

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
 import { smallMSA, smallMSAOnly, smallTree } from './data/seq2.js';
 import { load } from './util.js';
 const BASE = 'https://jbrowse.org/genomes/multiple_sequence_alignments';
-const TREES = 'https://jbrowse.org/genomes/newicktrees';
+const TREES = 'https://jbrowse.org/genomes/newick_trees';
 const examples = [
     {
         label: '230k COVID-19 samples (tree only)',
@@ -19,11 +19,7 @@ const examples = [
         inline: { msa: smallMSAOnly },
     },
     {
-        label: 'PFAM SARS-CoV2 multi-stockholm',
-        msa: `${BASE}/pfam-cov2.stock`,
-    },
-    {
-        label: 'PFAM SARS-CoV2 multi-stockholm w/ domains loaded',
+        label: 'PFAM SARS-CoV2 multi-stockholm with domains',
         msa: `${BASE}/pfam-cov2.stock`,
         gff: `${BASE}/pfam-cov2-domains.gff`,
     },

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,0CAA0C,CAAA;AAYxD,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,6CAA6C;QACpD,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/import/util.js

@@ -8,6 +8,9 @@ export function load(model, msaFile, treeFile, gffFile) {
     }
     if (gffFile) {
         model.setGFFFilehandle(gffFile);
+        // asked for by hand, so drawn -- even if the reader hid the overlay
+        // earlier in this view
+        model.setShowDomains(true);
     }
 }
 //# sourceMappingURL=util.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/components/import/util.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,IAAI,CAClB,KAAmB,EACnB,OAAsB,EACtB,QAAuB,EACvB,OAAsB;IAEtB,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;IACzB,IAAI,OAAO,EAAE,CAAC;QACZ,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAA;IACjC,CAAC;IACD,IAAI,QAAQ,EAAE,CAAC;QACb,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAA;IACnC,CAAC;IACD,IAAI,OAAO,EAAE,CAAC;QACZ,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAA;IACjC,CAAC;AACH,CAAC"}
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/components/import/util.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,IAAI,CAClB,KAAmB,EACnB,OAAsB,EACtB,QAAuB,EACvB,OAAsB;IAEtB,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;IACzB,IAAI,OAAO,EAAE,CAAC;QACZ,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAA;IACjC,CAAC;IACD,IAAI,QAAQ,EAAE,CAAC;QACb,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAA;IACnC,CAAC;IACD,IAAI,OAAO,EAAE,CAAC;QACZ,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAA;QAC/B,oEAAoE;QACpE,uBAAuB;QACvB,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;IAC5B,CAAC;AACH,CAAC"}

package/dist/components/msa/MSACanvasBlock.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+import { useTheme } from '@mui/material';
 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 { colorScheme, blockSize, highResScaleFactor } = model;
-    const { theme, contrastScheme } = useColorContrast(colorScheme);
+    const { blockSize, highResScaleFactor } = model;
+    const theme = useTheme();
     const { tooltipPoint, onMouseMove, onClick, onMouseLeave } = useMsaBlockMouse({
         model,
         offsetX,
@@ -39,14 +39,13 @@ const MSACanvasBlock = observer(function ({ model, offsetX, offsetY, }) {
                 theme,
                 offsetX,
                 offsetY,
-                contrastScheme,
                 model,
                 rasterTiles,
             });
         },
         width: canvasSize,
         height: canvasSize,
-        deps: [model, offsetX, offsetY, theme, contrastScheme],
+        deps: [model, offsetX, offsetY, theme],
     });
     const { hoveredInsertion, mouseOverDomains, showColumnStats } = model;
     return (React.createElement(React.Fragment, null,

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

@@ -24,9 +24,11 @@ export declare function cssColorToPixel(css: string): number;
  * also leaves behind.
  *
  * `colStep`/`rowStep` sample instead of covering, which is how the minimap fits
- * a whole alignment into a 12px bar.
+ * a whole alignment into a 12px bar. `colSpan`/`rowSpan` average each block of
+ * that many cells into one pixel instead, so a zoom below a device pixel per
+ * column still shows every column's color without blending neighbouring rows.
  */
-export declare function rasterPixels({ spec, col0, row0, width, height, colStep, rowStep, toPixel, }: {
+export declare function rasterPixels({ spec, col0, row0, width, height, colStep, rowStep, colSpan, rowSpan, toPixel, out, }: {
     spec: RasterSpec;
     col0: number;
     row0: number;
@@ -34,14 +36,22 @@ export declare function rasterPixels({ spec, col0, row0, width, height, colStep,
     height: number;
     colStep?: number;
     rowStep?: number;
+    colSpan?: number;
+    rowSpan?: number;
     toPixel?: (css: string) => number;
-}): Uint32Array<ArrayBuffer>;
+    out?: Uint32Array;
+}): Uint32Array<ArrayBufferLike>;
 export declare function rasterSupported(): boolean;
 /**
  * Paints the alignment background of one MSA block from cached
  * one-pixel-per-cell tiles. The tiles do not depend on the zoom level, so a zoom
  * frame costs a handful of drawImage calls instead of a fillRect per visible
  * cell -- which ran to 885ms per block at the minimum column width.
+ *
+ * Below a device pixel per cell the tiles average cells together instead, and
+ * only along the axis that needs it. Leaving the downsampling to the browser's
+ * image smoothing blurred both axes at once: at fit-to-width, where only the
+ * columns are narrow, every row boundary turned into a gradient.
  */
 export declare function drawMsaRaster({ ctx, model, theme, offsetX, offsetY, }: {
     ctx: CanvasRenderingContext2D;

package/dist/components/msa/msaRaster.js

@@ -42,6 +42,19 @@ export function cssColorToPixel(css) {
     colorCache.set(css, packed);
     return packed;
 }
+function cellPixelFn(spec, toPixel) {
+    const { columns, relativeTo, colorAt, bg, hover } = spec;
+    const bgPixel = toPixel(bg);
+    const hoverPixel = toPixel(hover);
+    const reference = relativeTo ? columns.get(relativeTo) : undefined;
+    return (name, col, letter) => {
+        if (reference && name !== relativeTo && letter === reference[col]) {
+            return hoverPixel;
+        }
+        const color = colorAt(col, letter);
+        return color === undefined ? bgPixel : toPixel(color);
+    };
+}
 /**
  * Packs a rectangle of the alignment into one pixel per cell, in `rowNames`
  * order, ready to hand to putImageData. Cells past the end of a row, and rows
@@ -49,14 +62,27 @@ export function cssColorToPixel(css) {
  * also leaves behind.
  *
  * `colStep`/`rowStep` sample instead of covering, which is how the minimap fits
- * a whole alignment into a 12px bar.
+ * a whole alignment into a 12px bar. `colSpan`/`rowSpan` average each block of
+ * that many cells into one pixel instead, so a zoom below a device pixel per
+ * column still shows every column's color without blending neighbouring rows.
  */
-export function rasterPixels({ spec, col0, row0, width, height, colStep = 1, rowStep = 1, toPixel = cssColorToPixel, }) {
-    const { rowNames, columns, relativeTo, colorAt, bg, hover } = spec;
-    const out = new Uint32Array(width * height);
-    const bgPixel = toPixel(bg);
-    const hoverPixel = toPixel(hover);
-    const reference = relativeTo ? columns.get(relativeTo) : undefined;
+export function rasterPixels({ spec, col0, row0, width, height, colStep = 1, rowStep = 1, colSpan = 1, rowSpan = 1, toPixel = cssColorToPixel, out = new Uint32Array(width * height), }) {
+    if (colSpan > 1 || rowSpan > 1) {
+        averagePixels({
+            spec,
+            col0,
+            row0,
+            width,
+            height,
+            colSpan,
+            rowSpan,
+            toPixel,
+            out,
+        });
+        return out;
+    }
+    const { rowNames, columns } = spec;
+    const cellPixel = cellPixelFn(spec, toPixel);
     for (let r = 0; r < height; r++) {
         const name = rowNames[row0 + r * rowStep];
         if (name === undefined) {
@@ -66,7 +92,6 @@ export function rasterPixels({ spec, col0, row0, width, height, colStep = 1, row
         if (!str) {
             continue;
         }
-        const isReference = name === relativeTo;
         const base = r * width;
         for (let c = 0; c < width; c++) {
             const col = col0 + c * colStep;
@@ -74,21 +99,64 @@ export function rasterPixels({ spec, col0, row0, width, height, colStep = 1, row
             if (letter === undefined) {
                 break;
             }
-            if (reference && !isReference && letter === reference[col]) {
-                out[base + c] = hoverPixel;
+            out[base + c] = cellPixel(name, col, letter);
+        }
+    }
+    return out;
+}
+function averagePixels({ spec, col0, row0, width, height, colSpan, rowSpan, toPixel, out, }) {
+    const { rowNames, columns } = spec;
+    const cellPixel = cellPixelFn(spec, toPixel);
+    const cells = colSpan * rowSpan;
+    const rShift = littleEndian ? 0 : 24;
+    const gShift = littleEndian ? 8 : 16;
+    const bShift = littleEndian ? 16 : 8;
+    const aShift = littleEndian ? 24 : 0;
+    const names = [];
+    const strs = [];
+    for (let r = 0; r < height; r++) {
+        names.length = 0;
+        strs.length = 0;
+        for (let dr = 0; dr < rowSpan; dr++) {
+            const name = rowNames[row0 + r * rowSpan + dr];
+            const str = name === undefined ? undefined : columns.get(name);
+            if (name !== undefined && str) {
+                names.push(name);
+                strs.push(str);
             }
-            else {
-                const color = colorAt(col, letter);
-                out[base + c] = color === undefined ? bgPixel : toPixel(color);
+        }
+        const base = r * width;
+        for (let c = 0; c < width; c++) {
+            // premultiplied, so a cell past the end of a row dilutes the alpha of its
+            // pixel rather than darkening its color
+            let sumR = 0;
+            let sumG = 0;
+            let sumB = 0;
+            let sumA = 0;
+            for (let i = 0; i < strs.length; i++) {
+                const str = strs[i];
+                const name = names[i];
+                for (let dc = 0; dc < colSpan; dc++) {
+                    const col = col0 + c * colSpan + dc;
+                    const letter = str[col];
+                    if (letter === undefined) {
+                        break;
+                    }
+                    const p = cellPixel(name, col, letter);
+                    const a = (p >>> aShift) & 255;
+                    sumR += ((p >>> rShift) & 255) * a;
+                    sumG += ((p >>> gShift) & 255) * a;
+                    sumB += ((p >>> bShift) & 255) * a;
+                    sumA += a;
+                }
             }
+            out[base + c] =
+                sumA === 0
+                    ? 0
+                    : packRgba(Math.round(sumR / sumA), Math.round(sumG / sumA), Math.round(sumB / sumA), Math.round(sumA / cells));
         }
     }
-    return out;
 }
-// Getting a context object back is not the same as getting one that can do
-// this: the headless render shim hands back a context carrying only measureText,
-// which a truthiness test accepts and putImageData then does not survive. Name
-// the methods the raster actually calls, so every caller degrades together.
 function usableRasterCtx(ctx) {
     const c = ctx;
     return (!!c &&
@@ -109,13 +177,13 @@ function makeRasterCanvas(width, height) {
         ? { canvas: canvas, ctx }
         : undefined;
 }
-function paint(pixels, width, height) {
+function paint(width, height, fill) {
     const made = makeRasterCanvas(width, height);
     if (!made) {
         return undefined;
     }
     const image = made.ctx.createImageData(width, height);
-    new Uint32Array(image.data.buffer).set(pixels);
+    fill(new Uint32Array(image.data.buffer));
     made.ctx.putImageData(image, 0, 0);
     return made.canvas;
 }
@@ -163,8 +231,16 @@ function getCache(model, theme) {
     caches.set(model, next);
     return next;
 }
-function getTile(cache, tileRow, tileCol) {
-    const key = `${tileRow}_${tileCol}`;
+// Cells averaged into one tile pixel along an axis: the smallest power of two
+// that brings a pixel back to at least one device pixel. Powers of two keep the
+// number of distinct tile sets a zoom sweep builds to a handful.
+function cellsPerPixel(devicePixelsPerCell) {
+    return devicePixelsPerCell >= 1
+        ? 1
+        : 2 ** Math.ceil(Math.log2(1 / devicePixelsPerCell));
+}
+function getTile({ cache, tileRow, tileCol, colSpan, rowSpan, }) {
+    const key = `${colSpan}_${rowSpan}_${tileRow}_${tileCol}`;
     const hit = cache.tiles.get(key);
     if (hit) {
         // re-inserting makes this the newest entry: a Map iterates in insertion
@@ -173,14 +249,25 @@ function getTile(cache, tileRow, tileCol) {
         cache.tiles.set(key, hit);
         return hit;
     }
-    const col0 = tileCol * rasterTileSize;
-    const row0 = tileRow * rasterTileSize;
-    const width = Math.min(rasterTileSize, cache.numColumns - col0);
-    const height = Math.min(rasterTileSize, cache.numRows - row0);
+    const col0 = tileCol * rasterTileSize * colSpan;
+    const row0 = tileRow * rasterTileSize * rowSpan;
+    const width = Math.min(rasterTileSize, Math.ceil((cache.numColumns - col0) / colSpan));
+    const height = Math.min(rasterTileSize, Math.ceil((cache.numRows - row0) / rowSpan));
     if (width <= 0 || height <= 0) {
         return undefined;
     }
-    const canvas = paint(rasterPixels({ spec: cache.spec, col0, row0, width, height }), width, height);
+    const canvas = paint(width, height, out => {
+        rasterPixels({
+            spec: cache.spec,
+            col0,
+            row0,
+            width,
+            height,
+            colSpan,
+            rowSpan,
+            out,
+        });
+    });
     if (!canvas) {
         return undefined;
     }
@@ -198,28 +285,34 @@ function getTile(cache, tileRow, tileCol) {
  * one-pixel-per-cell tiles. The tiles do not depend on the zoom level, so a zoom
  * frame costs a handful of drawImage calls instead of a fillRect per visible
  * cell -- which ran to 885ms per block at the minimum column width.
+ *
+ * Below a device pixel per cell the tiles average cells together instead, and
+ * only along the axis that needs it. Leaving the downsampling to the browser's
+ * image smoothing blurred both axes at once: at fit-to-width, where only the
+ * columns are narrow, every row boundary turned into a gradient.
  */
 export function drawMsaRaster({ ctx, model, theme, offsetX, offsetY, }) {
     const { colWidth, rowHeight, blockSize, highResScaleFactor } = model;
     const cache = getCache(model, theme);
+    const colSpan = cellsPerPixel(colWidth * highResScaleFactor);
+    const rowSpan = cellsPerPixel(rowHeight * highResScaleFactor);
     ctx.resetTransform();
     ctx.scale(highResScaleFactor, highResScaleFactor);
     ctx.translate(-offsetX, -offsetY);
-    // below a pixel per cell a tile carries more cells than the block has room
-    // for, so let the browser downsample it rather than letting whichever cell
-    // landed last win
-    ctx.imageSmoothingEnabled = colWidth < 1 || rowHeight < 1;
-    const tileWidth = rasterTileSize * colWidth;
-    const tileHeight = rasterTileSize * rowHeight;
+    ctx.imageSmoothingEnabled = false;
+    const pixelWidth = colWidth * colSpan;
+    const pixelHeight = rowHeight * rowSpan;
+    const tileWidth = rasterTileSize * pixelWidth;
+    const tileHeight = rasterTileSize * pixelHeight;
     const firstCol = Math.max(0, Math.floor(offsetX / tileWidth));
     const lastCol = Math.floor((offsetX + blockSize) / tileWidth);
     const firstRow = Math.max(0, Math.floor(offsetY / tileHeight));
     const lastRow = Math.floor((offsetY + blockSize) / tileHeight);
     for (let tileRow = firstRow; tileRow <= lastRow; tileRow++) {
         for (let tileCol = firstCol; tileCol <= lastCol; tileCol++) {
-            const tile = getTile(cache, tileRow, tileCol);
+            const tile = getTile({ cache, tileRow, tileCol, colSpan, rowSpan });
             if (tile) {
-                ctx.drawImage(tile, 0, 0, tile.width, tile.height, tileCol * tileWidth, tileRow * tileHeight, tile.width * colWidth, tile.height * rowHeight);
+                ctx.drawImage(tile, 0, 0, tile.width, tile.height, tileCol * tileWidth, tileRow * tileHeight, tile.width * pixelWidth, tile.height * pixelHeight);
             }
         }
     }
@@ -262,7 +355,9 @@ export function canvasHref(canvas) {
     }
 }
 // A canvas much past this many pixels fails to allocate, and the browser's own
-// per-side limit is lower still, so a raster bigger than either samples down.
+// per-side limit is lower still, so a raster bigger than either averages down,
+// per axis: an alignment wide enough to hit the limit on columns alone keeps
+// every row.
 // The result is still drawn across the same rectangle -- it loses cell-exact
 // detail at a size where no figure could show it anyway.
 const maxImagePixels = 64e6;
@@ -285,23 +380,37 @@ export function rasterImageHref({ model, theme, col0, row0, numCols, numRows, })
         return undefined;
     }
     const cache = getCache(model, theme);
-    let step = 1;
-    while (Math.ceil(numCols / step) * Math.ceil(numRows / step) > maxImagePixels ||
-        Math.ceil(numCols / step) > maxImageSide ||
-        Math.ceil(numRows / step) > maxImageSide) {
-        step *= 2;
+    let colSpan = 1;
+    let rowSpan = 1;
+    while (Math.ceil(numCols / colSpan) > maxImageSide) {
+        colSpan *= 2;
     }
-    const width = Math.ceil(numCols / step);
-    const height = Math.ceil(numRows / step);
-    return canvasHref(paint(rasterPixels({
-        spec: cache.spec,
-        col0,
-        row0,
-        width,
-        height,
-        colStep: step,
-        rowStep: step,
-    }), width, height));
+    while (Math.ceil(numRows / rowSpan) > maxImageSide) {
+        rowSpan *= 2;
+    }
+    while (Math.ceil(numCols / colSpan) * Math.ceil(numRows / rowSpan) >
+        maxImagePixels) {
+        if (numCols / colSpan >= numRows / rowSpan) {
+            colSpan *= 2;
+        }
+        else {
+            rowSpan *= 2;
+        }
+    }
+    const width = Math.ceil(numCols / colSpan);
+    const height = Math.ceil(numRows / rowSpan);
+    return canvasHref(paint(width, height, out => {
+        rasterPixels({
+            spec: cache.spec,
+            col0,
+            row0,
+            width,
+            height,
+            colSpan,
+            rowSpan,
+            out,
+        });
+    }));
 }
 /**
  * The whole alignment sampled down to a strip small enough to sit behind the
@@ -323,15 +432,18 @@ export function msaThumbnail({ model, theme, height, }) {
         const h = Math.ceil(numRows / rowStep);
         cache.thumbnail = {
             height,
-            canvas: paint(rasterPixels({
-                spec: cache.spec,
-                col0: 0,
-                row0: 0,
-                width: w,
-                height: h,
-                colStep,
-                rowStep,
-            }), w, h),
+            canvas: paint(w, h, out => {
+                rasterPixels({
+                    spec: cache.spec,
+                    col0: 0,
+                    row0: 0,
+                    width: w,
+                    height: h,
+                    colStep,
+                    rowStep,
+                    out,
+                });
+            }),
         };
     }
     return cache.thumbnail.canvas;