react-msaview 9.2.0 → 9.4.0

package/dist/model.js

@@ -13,11 +13,11 @@ import { packDomainLanes } from './components/msa/packDomainLanes.js';
 import { visibleColRange } from './components/msa/visibleColRange.js';
 import { cladeGutterWidth } from './components/tree/cladeBrackets.js';
 import { scaleBarLength } from './components/tree/scaleBar.js';
-import { defaultAllowedGappyness, defaultColWidth, defaultColorSchemeName, defaultCurrentAlignment, defaultDrawMsaLetters, defaultHeight, defaultHideGaps, defaultRowHeight, defaultScrollX, defaultScrollY, defaultScrollZoom, defaultScrollZoomAxis, defaultShowDomainLegend, defaultShowDomains, defaultSubFeatureRows, fontSizeFor, labelFitFontSize, maxCellSize, maxFitTreeWidth, maxTreeAreaShare, maxInlineSnapshotBytes as defaultMaxInlineSnapshotBytes, maxNeighborJoiningRows, minColWidth, minLetterColWidth, minLetterRowHeight, minRowHeight, minTreeWidth, pxPerTreeDepth, rowPanelHeaderHeight, rowTintAlpha, scrollZoomAxes, segmentFeatureTypes, segmentShades, settingsPanelWidth, treeScaleBarHeight, } from './constants.js';
+import { defaultAllowedGappyness, defaultColWidth, defaultColorSchemeName, defaultCurrentAlignment, defaultDrawMsaLetters, defaultHeight, defaultHideGaps, defaultRowHeight, defaultScrollX, defaultScrollY, defaultScrollZoom, defaultScrollZoomAxis, defaultShowDomainLegend, defaultShowDomains, defaultSubFeatureRows, fontSizeFor, labelFitFontSize, maxCellSize, maxFitTreeWidth, maxTreeAreaShare, maxInlineSnapshotBytes as defaultMaxInlineSnapshotBytes, maxNeighborJoiningRows, minColWidth, minLetterColWidth, minLetterRowHeight, minRowHeight, minTreeWidth, pxPerTreeDepth, resizeHandleWidth, rowPanelHeaderHeight, rowTintAlpha, scrollZoomAxes, segmentFeatureTypes, segmentShades, settingsPanelWidth, treeScaleBarHeight, } from './constants.js';
 import { createPaletteMap } from './createPaletteMap.js';
 import { exportFileName } from './exportFileName.js';
-import { featureName } from './featureFields.js';
-import { colorByRow, featureColorMap, featureLabelMap, featurePanelSpans, resolveFeatureScale, rowPanelWidth, stringFields, } from './featurePanels.js';
+import { featureField, featureName } from './featureFields.js';
+import { colorByRow, featureColorMap, featureLabelMap, featurePanelSpans, rowPanelWidth, stringFields, } from './featurePanels.js';
 import { featuresToAnnotations } from './featuresLayer.js';
 import { installFilehandleLoader } from './filehandleLoader.js';
 import { find, hierarchy, layoutTree, leaves, nodeCoveringRows, } from './hierarchy.js';
@@ -29,7 +29,7 @@ import { calculateNeighborJoiningTree } from './neighborJoining.js';
 import { calculatePropertyConservation } from './propertyConservation.js';
 import { preorder } from './rerootTree.js';
 import { globalColToVisibleCol, seqPosOfGlobalCol, visibleColToGlobalCol, visibleColsBefore, } from './rowCoordinateCalculations.js';
-import { resolveScale } from './scales.js';
+import { colorTable, declarationKey, readColumnTrack, readEncoding, readRowPanel, resolveShared, } from './scales.js';
 import { buildSeqPosIndex } from './seqPosToGlobalCol.js';
 import { maxBitsFor } from './sequenceLogo.js';
 import { blosum62ColumnColors, identityColumnColors, } from './similarityColors.js';
@@ -391,7 +391,9 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * tracks supplied as data: per-column values drawn as bars, or a
          * per-column string drawn as a text track. See docs/layers.md
          */
-        columnTracks: stripDefault(types.array(types.frozen()), []),
+        columnTracks: stripDefault(types.array(types.snapshotProcessor(types.frozen(), {
+            preProcessor: readColumnTrack,
+        })), []),
         /**
          * #property
          * row-to-structure residue correspondence, computed outside the viewer
@@ -471,20 +473,25 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         clades: stripDefault(types.array(types.frozen()), []),
         /**
          * #property
-         * what the viewer's own marks read from `rowData`:
-         * `{channel, field, scale?}` per channel, where `channel` is
-         * `tipLabel` or `rowTint`. See docs/layers.md
+         * what the viewer's own marks read from `rowData` or the feature
+         * table: `{channel, field, range?, domain?, title?}` per channel. The
+         * earlier `scale: {palette}` and `scale: {map}` read as `range` and
+         * `domain`. See docs/layers.md
          */
-        encodings: stripDefault(types.array(types.frozen()), []),
+        encodings: stripDefault(types.array(types.snapshotProcessor(types.frozen(), {
+            preProcessor: readEncoding,
+        })), []),
         /**
          * #property
          * panels drawn between the tree and the alignment:
-         * `{kind: "strip", field, scale?, width?, header?}` colors one cell
-         * per row from a `rowData` field, and
+         * `{kind: "strip", field, range?, domain?, title?, width?, header?}`
+         * colors one cell per row from a `rowData` field, and
          * `{kind: "features", x, encoding?, transform?, width?, header?}`
          * draws the spans the GFF carries. See docs/layers.md
          */
-        rowPanels: stripDefault(types.array(types.frozen()), []),
+        rowPanels: stripDefault(types.array(types.snapshotProcessor(types.frozen(), {
+            preProcessor: readRowPanel,
+        })), []),
     }))
         .volatile(() => ({
         /**
@@ -545,9 +552,10 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         volatileWidth: undefined,
         /**
          * #volatile
-         * resize handle width between tree and msa area, px
+         * thickness of the dividers, between the tree and the alignment and under
+         * the view, px
          */
-        resizeHandleWidth: 5,
+        resizeHandleWidth,
         /**
          * #volatile
          * size of blocks of content to be drawn, px
@@ -1943,7 +1951,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                         return [track.id, { arcs }];
                     }
                     if (track.kind === 'bar') {
-                        const max = track.max ?? 1;
+                        const max = track.scales?.y?.domainMax ?? 1;
                         const values = skip(project(track, track.values ?? [], 0)).map(v => Math.min(1, Math.max(0, v / max)));
                         return [track.id, { values }];
                     }
@@ -1987,7 +1995,12 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                                 height: this.trackHeight(track.kind, heightKey, track.height),
                                 barColor: track.color,
                                 arcColor: track.color,
-                                customColorScheme: track.colors,
+                                customColorScheme: track.encoding?.color
+                                    ? colorTable(track.encoding.color, [
+                                        ...(track.encoding.color.domain ?? []),
+                                        ...new Set(track.data),
+                                    ])
+                                    : undefined,
                                 data: content?.data,
                                 arcs: content?.arcs,
                             },
@@ -2911,7 +2924,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * #action
          */
         setColumnTracks(tracks) {
-            self.columnTracks.replace(tracks);
+            self.columnTracks.replace(tracks.map(readColumnTrack));
         },
         /**
          * #action
@@ -2926,14 +2939,14 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * replace what the viewer's marks read from the row table
          */
         setEncodings(encodings) {
-            self.encodings.replace(encodings);
+            self.encodings.replace(encodings.map(readEncoding));
         },
         /**
          * #action
          * replace the panels drawn between the tree and the alignment
          */
         setRowPanels(panels) {
-            self.rowPanels.replace(panels);
+            self.rowPanels.replace(panels.map(readRowPanel));
         },
         /**
          * #action
@@ -3046,10 +3059,15 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         /**
          * #getter
          * categorical feature types (InterPro domains and the like) that each get
-         * their own color and a legend entry
+         * their own color and a legend entry, in palette order: grouped by
+         * feature type, types in the order they first appear. A GenPept
+         * record's CDD Sites follow every Region, so the palette spends the
+         * colors after the domains' on the sites inside them
          */
         get categoricalDomainTypes() {
-            return [...self.annotationTypes.values()].filter(d => !segmentFeatureTypes.has(d.featureType ?? ''));
+            const types = [...self.annotationTypes.values()].filter(d => !segmentFeatureTypes.has(d.featureType ?? ''));
+            const typeOrder = [...new Set(types.map(d => d.featureType))];
+            return types.toSorted((a, b) => typeOrder.indexOf(a.featureType) - typeOrder.indexOf(b.featureType));
         },
         get fillPalette() {
             const segments = Object.fromEntries(this.segmentDomainTypes.map((d, i) => [
@@ -3116,52 +3134,47 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * the categorical color keys drawn for this view, shared by the on-screen
          * legend overlay and the SVG export's reserved column. The domain overlay
          * produces the first, listing the `featureFill` scale where an encoding
-         * names one. Every field a row-table encoding or a row panel reads
-         * produces one more, so two channels over one field, or two strips over
-         * it, list that field once. A strip's `legend` names the title it lists
-         * under, so strips over eight fields with one set of colors list one
-         * legend between them
+         * names one. Every scale a row-table encoding or a row panel reads
+         * produces one more, keyed by its declaration, so two channels or two
+         * strips declaring one scale list it once, and strips over eight fields
+         * naming one `title` list one legend between them
          */
         get legends() {
             const { featureFillEncoding, fillPalette, visibleDomainTypes } = this;
             const byKey = new Map();
+            const ids = new Set();
             // the accession palette keys on no field, so it takes a key of its own
-            const add = (field, entries, id) => {
-                if (entries.length === 0) {
+            const add = (key, title, entries, overlay = false) => {
+                const k = key ?? 'domains';
+                if (entries.length === 0 || byKey.has(k)) {
                     return;
                 }
-                const key = field === undefined ? 'domains' : `field:${field}`;
-                const legend = byKey.get(key);
-                if (legend) {
-                    const seen = new Set(legend.entries.map(e => e.id));
-                    legend.entries.push(...entries.filter(e => !seen.has(e.id)));
-                }
-                else {
-                    byKey.set(key, {
-                        id: id ?? (field === undefined ? 'domains' : `rowData-${field}`),
-                        title: field ?? 'Domains',
-                        entries: [...entries],
-                    });
+                const base = overlay || key === undefined ? 'domains' : `rowData-${title}`;
+                let id = base;
+                for (let n = 2; ids.has(id); n++) {
+                    id = `${base}-${n}`;
                 }
+                ids.add(id);
+                byKey.set(k, { id, title: title ?? 'Domains', entries });
             };
             // the overlay draws the domain key; with no columns it draws nothing,
             // and a features panel taking the same colors lists them instead
             if (self.actuallyShowDomains && self.numColumns > 0) {
-                add(featureFillEncoding?.field, featureFillEncoding
+                add(featureFillEncoding?.key, featureFillEncoding?.title, featureFillEncoding
                     ? featureFillEncoding.legend
                     : visibleDomainTypes.map(d => ({
                         id: d.accession,
                         label: d.name,
                         color: d.color ?? fillPalette[d.accession],
-                    })), 'domains');
+                    })), true);
             }
-            for (const { channel, field, legend } of this.resolvedEncodings) {
+            for (const { channel, key, title, legend } of this.resolvedEncodings) {
                 if (!featureChannels.has(channel)) {
-                    add(field, legend);
+                    add(key, title, legend);
                 }
             }
-            for (const { legendTitle, legend } of this.rowPanelScales) {
-                add(legendTitle, legend);
+            for (const { legendKey, legendTitle, legend } of this.rowPanelScales) {
+                add(legendKey, legendTitle, legend);
             }
             return [...byKey.values()];
         },
@@ -3435,14 +3448,52 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * table or the encodings, never per row per frame.
          */
         get resolvedEncodings() {
-            const rows = Object.values(self.rowData);
             return self.encodings.map(encoding => ({
                 ...encoding,
-                ...(featureChannels.has(encoding.channel)
-                    ? resolveFeatureScale(encoding.field, encoding.scale, self.allAnnotations, self.filteredAnnotations)
-                    : resolveScale(encoding.scale, rows.map(row => row?.[encoding.field]).filter(notEmpty))),
+                ...this.scaleOf(encoding, featureChannels.has(encoding.channel) ? 'features' : 'rows'),
             }));
         },
+        /**
+         * #getter
+         * every color object the encodings and the row panels declare, keyed
+         * by declaration (`declarationKey`) and resolved once over the union
+         * of the values its records' fields take, so a value two strips share
+         * takes one color in both. A feature field reads every feature loaded,
+         * so hiding a type in the filter dialog leaves the rest in their
+         * colors, and its legend lists the values of the drawn features.
+         */
+        get resolvedScales() {
+            const rows = Object.values(self.rowData);
+            const featureValues = (list, field) => list.map(a => featureField(a, field)).filter(notEmpty);
+            const use = (channel, table) => ({
+                spec: channel,
+                field: channel.field,
+                table,
+                ...(table === 'rows'
+                    ? {
+                        values: rows.map(row => row?.[channel.field]).filter(notEmpty),
+                    }
+                    : {
+                        values: featureValues(self.allAnnotations, channel.field),
+                        shown: featureValues(self.filteredAnnotations, channel.field),
+                    }),
+            });
+            return resolveShared([
+                ...self.encodings.map(encoding => use(encoding, featureChannels.has(encoding.channel) ? 'features' : 'rows')),
+                ...self.rowPanels.flatMap(panel => panel.kind === 'strip'
+                    ? [use(panel, 'rows')]
+                    : panel.encoding?.color
+                        ? [use(panel.encoding.color, 'features')]
+                        : []),
+            ]);
+        },
+        /**
+         * #method
+         * the shared scale a record's color object resolves to
+         */
+        scaleOf(channel, table) {
+            return this.resolvedScales.get(declarationKey({ spec: channel, field: channel.field, table }));
+        },
         /**
          * #getter
          * each row panel's scale resolved against the values its field takes,
@@ -3457,7 +3508,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                 if (panel.kind === 'features') {
                     const color = panel.encoding?.color;
                     const encoding = color
-                        ? resolveFeatureScale(color.field, color.scale, self.allAnnotations, annotations)
+                        ? { field: color.field, ...this.scaleOf(color, 'features') }
                         : featureFillEncoding;
                     const label = panel.encoding?.label;
                     return {
@@ -3465,7 +3516,8 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                         x: panel.x,
                         header: panel.header ?? '',
                         field: encoding?.field,
-                        legendTitle: encoding?.field,
+                        legendKey: encoding?.key,
+                        legendTitle: encoding?.title,
                         colors: color
                             ? featureColorMap(annotations, encoding, fillPalette)
                             : this.featureColors,
@@ -3480,14 +3532,13 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                             })),
                     };
                 }
-                const { colorOf, legend } = resolveScale(panel.scale, Object.values(rowData)
-                    .map(row => row?.[panel.field])
-                    .filter(notEmpty));
+                const { colorOf, legend, key, title } = this.scaleOf(panel, 'rows');
                 return {
                     kind: panel.kind,
                     field: panel.field,
                     header: panel.header ?? panel.field,
-                    legendTitle: panel.legend ?? panel.field,
+                    legendKey: key,
+                    legendTitle: title,
                     colors: colorByRow(rowData, panel.field, colorOf),
                     legend,
                 };