react-msaview 8.0.0 → 8.2.0

package/dist/model.js

@@ -2,7 +2,7 @@ import { clamp, groupBy, notEmpty, sum } from '@jbrowse/core/util';
 import { openLocation } from '@jbrowse/core/util/io';
 import { ElementId, FileLocation } from '@jbrowse/core/util/types/mst';
 import { addDisposer, applySnapshot, cast, getSnapshot, isAlive, types, } from '@jbrowse/mobx-state-tree';
-import { autorun, transaction } from 'mobx';
+import { autorun, computed, transaction } from 'mobx';
 import { generateNodeIds, gffToAnnotations, interProScanToAnnotations, parseEmfTree, parseGFF, parseMSA, parseNewick, } from 'msa-parsers';
 import { calculateBlocks } from './calculateBlocks.js';
 import { clustalXColumnColors } from './clustalX.js';
@@ -34,7 +34,7 @@ import { resolveScale } from './scales.js';
 import { buildSeqPosIndex } from './seqPosToGlobalCol.js';
 import { maxBitsFor } from './sequenceLogo.js';
 import { stripDefault } from './stripDefault.js';
-import { computeRowInsertions, dropBlanks, len, outlineColor, skipBlanks, transform, withAlpha, } from './util.js';
+import { computeRowInsertions, dropBlanks, len, outlineColor, skipBlanks, withAlpha, } from './util.js';
 import { saveAs } from './vendor/fileSaver.js';
 import { parseWuss } from './wuss.js';
 function parseTreeText(text) {
@@ -114,6 +114,37 @@ function featureLabelMap(annotations, field) {
     }
     return labels;
 }
+/**
+ * Lanes for `position: "strandpile"`, gggenomes' `position_strandpile`: the
+ * forward features stack above the line and the reverse below it, each strand
+ * packing on its own. The deepest row on each side sets the grid every row lays
+ * out on, so the line between the strands sits at one height down the panel and
+ * a reader can scan it. A feature with no strand piles with the forward ones.
+ */
+function strandpileLanes(rows) {
+    const piled = rows.map(([name, bands]) => {
+        const reverse = packDomainLanes(bands.filter(b => b.annotation.strand === -1));
+        const forward = packDomainLanes(bands.filter(b => b.annotation.strand !== -1));
+        return { name, forward, reverse };
+    });
+    const up = Math.max(0, ...piled.map(p => p.forward[0]?.laneCount ?? 0));
+    const down = Math.max(0, ...piled.map(p => p.reverse[0]?.laneCount ?? 0));
+    const laneCount = up + down;
+    return new Map(piled.map(({ name, forward, reverse }) => [
+        name,
+        [
+            // forward level 0 is the lane just above the line, stacking upward
+            ...forward.map(b => ({ ...b, lane: up - 1 - b.lane, laneCount })),
+            ...reverse.map(b => ({ ...b, lane: up + b.lane, laneCount })),
+        ],
+    ]));
+}
+/** one row's spans laid out by the panel's `position` */
+function panelLanes(panel, rows) {
+    return panel.position === 'strandpile'
+        ? strandpileLanes(rows)
+        : new Map(rows.map(([name, bands]) => [name, packDomainLanes(bands)]));
+}
 /**
  * The spans a `features` panel draws, keyed by row name and measured in the
  * panel's own pixels. `column` takes the bands the overlay draws, at the
@@ -122,9 +153,9 @@ function featureLabelMap(annotations, field) {
  * cover across every row onto the panel width, so a row with no alignment
  * still has an x.
  */
-function featurePanelSpans({ panel, width, rowHeight, colWidth, domainBands, annotationsByRow, shifts, }) {
+function featurePanelSpans({ panel, width, colWidth, domainBands, annotationsByRow, shifts, }) {
     if (panel.x === 'column') {
-        return new Map([...domainBands].map(([name, bands]) => [
+        return panelLanes(panel, [...domainBands].map(([name, bands]) => [
             name,
             bands.map(band => ({
                 ...band,
@@ -152,23 +183,23 @@ function featurePanelSpans({ panel, width, rowHeight, colWidth, domainBands, ann
             max = Math.max(max, end);
         }
     }
-    // the arrowhead on the rightmost feature reaches a row height past its end,
-    // so the extent maps onto the panel less that much
-    const drawable = Math.max(1, width - rowHeight);
+    // a gene arrow ends where its feature does, so the extent maps onto the whole
+    // panel less the pixel the rightmost stroke needs
+    const drawable = Math.max(1, width - 1);
     const scale = max > min ? drawable / (max - min) : 0;
     // a lane opens where a span covers more than a tenth of the one before it,
     // which keeps the genes of an operon on one lane: adjacent genes commonly
     // share a few bases, and a stop codon overlapping the next start reads as a
     // second lane over the whole row
-    return new Map(shifted.map(([name, features]) => [
+    return panelLanes(panel, shifted.map(([name, features]) => [
         name,
-        packDomainLanes(features.map(({ annotation, start, end }) => ({
+        features.map(({ annotation, start, end }) => ({
             annotation,
             xStart: (start - min) * scale,
             xEnd: (end - min) * scale,
             startCol: start,
             endCol: end - (end - start) * laneOverlap,
-        }))),
+        })),
     ]));
 }
 // a scale over the values a field takes across the features drawn
@@ -545,11 +576,7 @@ function stateModelFactory() {
          * data from the loaded tree/msa/treeMetadata, generally loaded by
          * autorun
          */
-        data: types.optional(DataModelF(), {
-            tree: '',
-            msa: '',
-            treeMetadata: '',
-        }),
+        data: types.optional(DataModelF(), {}),
         /**
          * #property
          * the user's explicit hide choices per annotation accession, keyed by
@@ -579,6 +606,14 @@ function stateModelFactory() {
          * Persists in the snapshot and the URL.
          */
         highlights: stripDefault(types.array(types.frozen()), []),
+        /**
+         * #property
+         * where the view opens, in `highlights` coordinates: `{row, start,
+         * end}` zooms onto residues of that row, `{start, end}` onto alignment
+         * columns. Applied once the alignment and any tree file have loaded,
+         * then cleared, so a reloaded session keeps the reader's own scroll.
+         */
+        region: types.frozen(),
         /**
          * #property
          * clades of the tree with a mark drawn over them. `mrca` names tips
@@ -788,10 +823,12 @@ function stateModelFactory() {
         /**
          * #action
          * record a non-fatal load problem: a layer that failed to load, a file
-         * that failed to parse
+         * that failed to parse. A message already on the list is not added again
          */
         addWarning(warning) {
-            self.warnings = [...self.warnings, warning];
+            if (!self.warnings.includes(warning)) {
+                self.warnings = [...self.warnings, warning];
+            }
         },
         /**
          * #action
@@ -830,6 +867,12 @@ function stateModelFactory() {
         setHighlightedColumns(columns) {
             self.highlightedColumns = columns;
         },
+        /**
+         * #action
+         */
+        setRegion(region) {
+            self.region = region;
+        },
         /**
          * #action
          */
@@ -1440,7 +1483,7 @@ function stateModelFactory() {
          */
         get insertionPositions() {
             const { blanks, rows } = this;
-            if (blanks.length === 0 || !self.hideGapsEffective) {
+            if (blanks.length === 0) {
                 return new Map();
             }
             const result = new Map();
@@ -1682,7 +1725,7 @@ function stateModelFactory() {
          * cladogram mode. The tree's scale bar uses it.
          */
         get pxPerBranchLength() {
-            const max = maxLength(this.root);
+            const max = this.rootToTipLength;
             return this.showBranchLenEffective && max ? self.treeWidth / max : 0;
         },
         /**
@@ -1731,6 +1774,125 @@ function stateModelFactory() {
             return self.drawLabels && self.rowHeight >= minLetterRowHeight;
         },
     }))
+        .views(self => {
+        // a spec is a frozen value, so it keys its computed until setColumnTracks
+        // replaces it
+        const columnTrackModels = new WeakMap();
+        return {
+            /**
+             * #getter
+             * a data track's values or string, projected from its row's residues
+             * onto alignment columns when it names a row
+             */
+            get columnTrackContent() {
+                const { MSA, blanks, hideGapsEffective } = self;
+                const width = MSA?.getWidth() ?? 0;
+                const project = (track, items, fill) => {
+                    if (!track.row) {
+                        return items;
+                    }
+                    const out = Array.from({ length: width }, () => fill);
+                    const index = self.seqPosIndex(track.row);
+                    items.forEach((item, seqPos) => {
+                        const col = index?.[seqPos];
+                        if (col !== undefined) {
+                            out[col] = item;
+                        }
+                    });
+                    return out;
+                };
+                const skip = (items) => hideGapsEffective ? dropBlanks(blanks, items) : items;
+                // an arc endpoint maps row residue -> column -> visible column.
+                // visibleColsBefore, not globalColToVisibleCol, so an endpoint in a
+                // hidden column moves to the neighboring visible one and the arc stays
+                const resolve = (track, pos) => {
+                    const col = track.row
+                        ? self.seqPosIndex(track.row)?.[pos - 1]
+                        : pos - 1;
+                    if (col === undefined || col < 0 || col >= width) {
+                        return undefined;
+                    }
+                    return hideGapsEffective ? visibleColsBefore(blanks, col) : col;
+                };
+                return new Map(self.columnTracks.map(track => {
+                    if (track.kind === 'arc') {
+                        const arcs = (track.arcs ?? [])
+                            .map(arc => {
+                            const start = resolve(track, Math.min(arc.start, arc.end));
+                            const end = resolve(track, Math.max(arc.start, arc.end));
+                            return start !== undefined &&
+                                end !== undefined &&
+                                start < end
+                                ? { start, end, color: arc.color }
+                                : undefined;
+                        })
+                            .filter(notEmpty);
+                        return [track.id, { arcs }];
+                    }
+                    if (track.kind === 'bar') {
+                        const max = track.max ?? 1;
+                        const values = skip(project(track, track.values ?? [], 0)).map(v => Math.min(1, Math.max(0, v / max)));
+                        return [track.id, { values }];
+                    }
+                    const data = skip(project(track, (track.data ?? '').split(''), ' '));
+                    return [track.id, { data: data.join('') }];
+                }));
+            },
+            /**
+             * #method
+             * the height a track draws at: what the user dragged its divider to,
+             * then the height its snapshot asked for, then its kind's default. Only
+             * a text track falls through to rowHeight
+             */
+            trackHeight(kind, heightKey = kind, given) {
+                return (self.trackHeights.get(heightKey) ??
+                    given ??
+                    defaultTrackHeights[kind] ??
+                    self.rowHeight);
+            },
+            /**
+             * #method
+             * the track a column track spec draws as, computed once per spec. A
+             * text track's height falls through to rowHeight, and its own computed
+             * confines the vertical zoom to it, so a sibling keeps its object and
+             * its canvas skips the redraw
+             */
+            columnTrackModel(track) {
+                let computedModel = columnTrackModels.get(track);
+                if (!computedModel) {
+                    computedModel = computed(() => {
+                        const heightKey = resizableKinds.has(track.kind)
+                            ? ownHeightKey(track.id)
+                            : undefined;
+                        const content = this.columnTrackContent.get(track.id);
+                        return {
+                            model: {
+                                id: track.id,
+                                name: track.name,
+                                kind: track.kind,
+                                heightKey,
+                                height: this.trackHeight(track.kind, heightKey, track.height),
+                                barColor: track.color,
+                                arcColor: track.color,
+                                customColorScheme: track.colors,
+                                data: content?.data,
+                                arcs: content?.arcs,
+                            },
+                            ReactComponent: TrackBlocks,
+                        };
+                    });
+                    columnTrackModels.set(track, computedModel);
+                }
+                return computedModel.get();
+            },
+            /**
+             * #getter
+             */
+            get columnTrackModels() {
+                return self.columnTracks.map(track => this.columnTrackModel(track));
+            },
+        };
+    })
         .views(self => ({
         /**
          * #getter
@@ -1825,101 +1987,6 @@ function stateModelFactory() {
                 ReactComponent: TrackBlocks,
             }));
         },
-        /**
-         * #getter
-         * a data track's values or string, projected from its row's residues
-         * onto alignment columns when it names a row
-         */
-        get columnTrackContent() {
-            const { MSA, blanks, hideGapsEffective } = self;
-            const width = MSA?.getWidth() ?? 0;
-            const project = (track, items, fill) => {
-                if (!track.row) {
-                    return items;
-                }
-                const out = Array.from({ length: width }, () => fill);
-                const index = self.seqPosIndex(track.row);
-                items.forEach((item, seqPos) => {
-                    const col = index?.[seqPos];
-                    if (col !== undefined) {
-                        out[col] = item;
-                    }
-                });
-                return out;
-            };
-            const skip = (items) => hideGapsEffective ? dropBlanks(blanks, items) : items;
-            // an arc endpoint maps row residue -> column -> visible column.
-            // visibleColsBefore, not globalColToVisibleCol, so an endpoint in a
-            // hidden column moves to the neighboring visible one and the arc stays
-            const resolve = (track, pos) => {
-                const col = track.row
-                    ? self.seqPosIndex(track.row)?.[pos - 1]
-                    : pos - 1;
-                if (col === undefined || col < 0 || col >= width) {
-                    return undefined;
-                }
-                return hideGapsEffective ? visibleColsBefore(blanks, col) : col;
-            };
-            return new Map(self.columnTracks.map(track => {
-                if (track.kind === 'arc') {
-                    const arcs = (track.arcs ?? [])
-                        .map(arc => {
-                        const start = resolve(track, Math.min(arc.start, arc.end));
-                        const end = resolve(track, Math.max(arc.start, arc.end));
-                        return start !== undefined && end !== undefined && start < end
-                            ? { start, end, color: arc.color }
-                            : undefined;
-                    })
-                        .filter(notEmpty);
-                    return [track.id, { arcs }];
-                }
-                if (track.kind === 'bar') {
-                    const max = track.max ?? 1;
-                    const values = skip(project(track, track.values ?? [], 0)).map(v => Math.min(1, Math.max(0, v / max)));
-                    return [track.id, { values }];
-                }
-                const data = skip(project(track, (track.data ?? '').split(''), ' '));
-                return [track.id, { data: data.join('') }];
-            }));
-        },
-        /**
-         * #method
-         * the height a track draws at: what the user dragged its divider to,
-         * then the height its snapshot asked for, then its kind's default. Only
-         * a text track falls through to rowHeight, and `??` short-circuits
-         * before reading it, so vertical zoom does not rebuild the other tracks
-         */
-        trackHeight(kind, heightKey = kind, given) {
-            return (self.trackHeights.get(heightKey) ??
-                given ??
-                defaultTrackHeights[kind] ??
-                self.rowHeight);
-        },
-        /**
-         * #getter
-         */
-        get columnTrackModels() {
-            return self.columnTracks.map(track => {
-                const heightKey = resizableKinds.has(track.kind)
-                    ? ownHeightKey(track.id)
-                    : undefined;
-                return {
-                    model: {
-                        id: track.id,
-                        name: track.name,
-                        kind: track.kind,
-                        heightKey,
-                        height: this.trackHeight(track.kind, heightKey, track.height),
-                        barColor: track.color,
-                        arcColor: track.color,
-                        customColorScheme: track.colors,
-                        data: this.columnTrackContent.get(track.id)?.data,
-                        arcs: this.columnTrackContent.get(track.id)?.arcs,
-                    },
-                    ReactComponent: TrackBlocks,
-                };
-            });
-        },
         /**
          * #getter
          * the consensus secondary structure as a track, when there is one. A
@@ -1936,7 +2003,7 @@ function stateModelFactory() {
                             name: 'Base pairs',
                             kind: 'arc',
                             heightKey: 'arc',
-                            height: this.trackHeight('arc'),
+                            height: self.trackHeight('arc'),
                             arcs,
                         },
                         ReactComponent: TrackBlocks,
@@ -1984,7 +2051,7 @@ function stateModelFactory() {
                 model: {
                     ...model,
                     heightKey: resizableKinds.has(model.kind) ? model.kind : undefined,
-                    height: this.trackHeight(model.kind),
+                    height: self.trackHeight(model.kind),
                 },
                 ReactComponent: TrackBlocks,
             }));
@@ -1993,7 +2060,7 @@ function stateModelFactory() {
             return [
                 ...this.adapterTrackModels,
                 ...this.basePairTrackModels,
-                ...this.columnTrackModels,
+                ...self.columnTrackModels,
                 // every computed track reads the alignment's columns, and a tree, a
                 // GFF and a features panel draw a figure with none
                 ...(self.numColumns > 0 ? this.computedTrackModels : []),
@@ -2778,12 +2845,6 @@ function stateModelFactory() {
             const categorical = createPaletteMap(this.categoricalDomainTypes.map(d => d.accession));
             return { ...segments, ...categorical };
         },
-        get strokePalette() {
-            return transform(this.fillPalette, ([key, val]) => [
-                key,
-                outlineColor(val),
-            ]);
-        },
         /**
          * #getter
          * the encoding coloring the overlay's spans, undefined when none does,
@@ -3017,6 +3078,23 @@ function stateModelFactory() {
             }
             return runs;
         },
+        /**
+         * #method
+         * a highlight label with `{residue}` and `{position}` filled in from the
+         * row's letter at `start`, which is how the `175` shorthand draws "R175"
+         */
+        fillHighlightLabel(label, row, start) {
+            if (!label.includes('{')) {
+                return label;
+            }
+            const col = row && start !== undefined
+                ? self.seqPosIndex(row)?.[start - 1]
+                : undefined;
+            const residue = row && col !== undefined ? (self.MSA?.getRow(row)[col] ?? '') : '';
+            return label
+                .replaceAll('{residue}', residue)
+                .replaceAll('{position}', start === undefined ? '' : String(start));
+        },
         /**
          * #getter
          * `highlights` projected onto what is on screen: residue spans go
@@ -3032,7 +3110,10 @@ function stateModelFactory() {
                 ...Object.values(transientHighlights).flat(),
             ];
             return all.flatMap(({ row, rows, start, end, label, color }) => {
-                const base = { label, color };
+                const base = {
+                    label: label && this.fillHighlightLabel(label, row, start),
+                    color,
+                };
                 if (rows) {
                     const rowIndices = rows
                         .map(name => rowNamesSet.get(name))
@@ -3062,22 +3143,6 @@ function stateModelFactory() {
                 propertyConservation,
             });
         },
-        /**
-         * #getter
-         * `columnStatsAt` for the hovered column, undefined when nothing is
-         * hovered
-         */
-        get mouseOverColumnStats() {
-            const { mouseCol, colStats, conservation, propertyConservation } = self;
-            return mouseCol === undefined
-                ? undefined
-                : columnStats({
-                    col: mouseCol,
-                    colStats,
-                    conservation,
-                    propertyConservation,
-                });
-        },
         /**
          * #method
          */
@@ -3139,7 +3204,6 @@ function stateModelFactory() {
                         spans: featurePanelSpans({
                             panel,
                             width,
-                            rowHeight: self.rowHeight,
                             colWidth: self.colWidth,
                             domainBands: this.domainBands,
                             annotationsByRow: self.annotationsByRow,
@@ -3406,11 +3470,14 @@ function stateModelFactory() {
             // alignment all read. The tree arrives with the model for inline data
             // and later for a filehandle, so the seeding waits for it and then runs
             // once: expanding a seeded clade sticks, and the record collapses it
-            // again only on reload.
+            // again only on reload. `dataInitialized` is true once the MSA alone
+            // has loaded, when the tree is still the flat stub, so a tree
+            // filehandle holds the seeding until its text lands.
             let cladesSeeded = false;
             addDisposer(self, autorun(() => {
                 if (cladesSeeded ||
                     !self.dataInitialized ||
+                    (self.treeFilehandle && !self.data.tree) ||
                     self.clades.length === 0) {
                     return;
                 }
@@ -3427,6 +3494,19 @@ function stateModelFactory() {
                     }
                 }
             }));
+            // zoomToRegion needs a width and resolves residues through the visible
+            // columns, so this waits for both, and for a tree file whose collapsed
+            // clades would hide columns and move the target after the zoom
+            addDisposer(self, autorun(() => {
+                const { region } = self;
+                if (region &&
+                    self.viewInitialized &&
+                    self.numColumns > 0 &&
+                    !(self.treeFilehandle && !self.data.tree)) {
+                    this.zoomToRegion(region);
+                    self.setRegion(undefined);
+                }
+            }));
             // the matchMedia query is pinned to the current device pixel ratio, so
             // each change re-registers against the new one
             if (typeof window !== 'undefined' &&
@@ -3566,6 +3646,16 @@ function stateModelFactory() {
                     self.setAnnotations([]);
                 }
             }));
+            // a GFF whose first column names rows of some other alignment parses
+            // without error and draws nothing
+            addDisposer(self, autorun(() => {
+                const { annotations, rowNamesSet } = self;
+                if (annotations.length > 0 &&
+                    rowNamesSet.size > 0 &&
+                    !annotations.some(a => rowNamesSet.has(a.id))) {
+                    self.addWarning(`0 of ${annotations.length} annotations name a row in this alignment`);
+                }
+            }));
             // gffFilehandle loads into data.gff, which the autorun above parses
             loadOnFilehandleChange({
                 what: 'annotations',