jbrowse-plugin-msaview 5.5.0 → 5.7.0

package/dist/MsaViewPanel/afterCreateAutoruns.js

@@ -393,7 +393,7 @@ export function runCleanup() {
 export function showDomainsOnGenomeIfAsked(self) {
     if (self.domainsOnGenome &&
         self.connectedView &&
-        self.connectedDomains.length > 0) {
+        self.connectedDomains.features.length > 0) {
         self.showDomainsOnGenome();
         self.setDomainsOnGenome(false);
     }

package/dist/MsaViewPanel/connectedDomains.d.ts

@@ -1,15 +1,16 @@
 import type { GenomeRegion, SeqPosModel } from './msaCoordToGenomeCoord';
 import type { Annotation } from 'react-msaview';
-/**
- * One accession the alignment draws on the query row, on the genome. A
- * cross-plugin contract: jbrowse-plugin-protein3d reads it off the view.
- */
+export type DomainKind = 'domain' | 'site';
+/** One accession the alignment draws on the query row. */
 export interface ConnectedDomain {
-    /** the label the alignment's legend shows for the domain's accession */
+    /** the label the alignment's legend shows for the accession */
     name: string;
     accession: string;
-    /** the fill the alignment draws the domain in */
-    color: string;
+    /**
+     * `site` for a set of functional residues (a CDD Site, a GFF `*_site`),
+     * `domain` for anything else
+     */
+    kind: DomainKind;
     /**
      * 0-based half-open, ascending, contiguous bases merged: one region per exon
      * piece of a domain, or per run of a site's scattered residues, in the
@@ -17,6 +18,24 @@ export interface ConnectedDomain {
      */
     regions: GenomeRegion[];
 }
+/** A categorical color object, spelt as a JBrowse display's `color` config. */
+export interface DomainColor {
+    field: 'accession';
+    domain: string[];
+    range: string[];
+    labels: string[];
+}
+export interface ConnectedDomains {
+    /** largest first by residues covered */
+    features: ConnectedDomain[];
+    color: DomainColor;
+}
+/**
+ * `site` for CDD's GenPept `Site` key, a Sequence Ontology `*_site` type,
+ * InterPro's `Binding_site`, `Active_site` and `Conserved_site`, and UniProt's
+ * spelled-out `Binding site`
+ */
+export declare function annotationKind(featureType: string | undefined): DomainKind;
 export interface DomainSource extends SeqPosModel {
     showDomains: boolean;
     querySeqName: string;
@@ -33,8 +52,7 @@ export interface DomainSource extends SeqPosModel {
 export declare function residuesToGenomeRegions(model: SeqPosModel, positions: Iterable<number>): GenomeRegion[];
 /**
  * The query row's domains as the alignment shows them, one per accession, so
- * a CDD site's scattered residues are one entry. Largest first by residues
- * covered, so a site painted later lands on the domain it sits in. Empty
- * while the domain overlay is off.
+ * a CDD site's scattered residues are one feature. Empty while the domain
+ * overlay is off.
  */
-export declare function connectedDomains(model: DomainSource): ConnectedDomain[];
+export declare function connectedDomains(model: DomainSource): ConnectedDomains;

package/dist/MsaViewPanel/connectedDomains.js

@@ -1,4 +1,24 @@
+/**
+ * The query row's domains on the genome, as data plus one color object. A
+ * cross-plugin contract: jbrowse-plugin-protein3d reads it off the view.
+ *
+ * In grammar-of-graphics terms, `features` is the data and `kind` the field a
+ * consumer filters its layers on (protein3d draws `domain` as cartoon and
+ * `site` as side chains). `color` is the color channel: a categorical scale
+ * over `accession`, whose `domain` lists the accessions, `range` the fills
+ * the alignment draws them in, and `labels` what a guide (a legend) names
+ * them. Every surface reads that one object: the genome track's display, the
+ * structure's layers, its overview rows and each legend.
+ */
 import { seqPosToGenomeRegions } from './msaCoordToGenomeCoord';
+/**
+ * `site` for CDD's GenPept `Site` key, a Sequence Ontology `*_site` type,
+ * InterPro's `Binding_site`, `Active_site` and `Conserved_site`, and UniProt's
+ * spelled-out `Binding site`
+ */
+export function annotationKind(featureType) {
+    return featureType && /(^|[_ ])site$/i.test(featureType) ? 'site' : 'domain';
+}
 function mergeAdjacent(regions) {
     const merged = [];
     for (const region of regions.toSorted((a, b) => a.start - b.start)) {
@@ -25,25 +45,23 @@ export function residuesToGenomeRegions(model, positions) {
 }
 /**
  * The query row's domains as the alignment shows them, one per accession, so
- * a CDD site's scattered residues are one entry. Largest first by residues
- * covered, so a site painted later lands on the domain it sits in. Empty
- * while the domain overlay is off.
+ * a CDD site's scattered residues are one feature. Empty while the domain
+ * overlay is off.
  */
 export function connectedDomains(model) {
-    if (!model.showDomains) {
-        return [];
-    }
     const byAccession = new Map();
-    for (const annotation of model.annotationsByRow[model.querySeqName] ?? []) {
-        const list = byAccession.get(annotation.accession);
-        if (list) {
-            list.push(annotation);
-        }
-        else {
-            byAccession.set(annotation.accession, [annotation]);
+    if (model.showDomains) {
+        for (const annotation of model.annotationsByRow[model.querySeqName] ?? []) {
+            const list = byAccession.get(annotation.accession);
+            if (list) {
+                list.push(annotation);
+            }
+            else {
+                byAccession.set(annotation.accession, [annotation]);
+            }
         }
     }
-    return [...byAccession]
+    const placed = [...byAccession]
         .flatMap(([accession, annotations]) => {
         // annotations count residues 1-based inclusive
         const positions = new Set();
@@ -53,22 +71,31 @@ export function connectedDomains(model) {
             }
         }
         const first = annotations[0];
-        const color = model.featureColors.get(first)?.fill;
+        const fill = model.featureColors.get(first)?.fill;
         const regions = residuesToGenomeRegions(model, positions);
-        return color && regions.length > 0
+        return fill && regions.length > 0
             ? [
                 {
-                    domain: {
+                    feature: {
                         name: model.annotationTypes.get(accession)?.name ?? first.name,
                         accession,
-                        color,
+                        kind: annotationKind(first.featureType),
                         regions,
                     },
+                    fill,
                     residues: positions.size,
                 },
             ]
             : [];
     })
-        .toSorted((a, b) => b.residues - a.residues)
-        .map(({ domain }) => domain);
+        .toSorted((a, b) => b.residues - a.residues);
+    return {
+        features: placed.map(p => p.feature),
+        color: {
+            field: 'accession',
+            domain: placed.map(p => p.feature.accession),
+            range: placed.map(p => p.fill),
+            labels: placed.map(p => p.feature.name),
+        },
+    };
 }

package/dist/MsaViewPanel/connectedDomains.test.js

@@ -1,6 +1,6 @@
 import { genomeToTranscriptSeqMapping } from 'g2p_mapper';
 import { describe, expect, test } from 'vitest';
-import { connectedDomains } from './connectedDomains';
+import { annotationKind, connectedDomains } from './connectedDomains';
 // five codons read from 207 down: 207-205, 204-202, 201-200 then 106 across
 // the intron, 105-103, 102-100
 const reverseTranscript = genomeToTranscriptSeqMapping({
@@ -39,38 +39,48 @@ function source(annotations, overrides = {}) {
 }
 describe('connectedDomains on a reverse-strand transcript', () => {
     test('a domain crossing the exon boundary is one region per exon piece', () => {
-        expect(connectedDomains(source([annotation('site', 2, 4)]))).toEqual([
-            {
-                name: 'legend site',
-                accession: 'site',
-                color: 'fill-site',
-                regions: [
-                    { refName: 'chr1', start: 103, end: 107 },
-                    { refName: 'chr1', start: 200, end: 205 },
-                ],
+        expect(connectedDomains(source([annotation('site', 2, 4)]))).toEqual({
+            features: [
+                {
+                    name: 'legend site',
+                    accession: 'site',
+                    kind: 'domain',
+                    regions: [
+                        { refName: 'chr1', start: 103, end: 107 },
+                        { refName: 'chr1', start: 200, end: 205 },
+                    ],
+                },
+            ],
+            color: {
+                field: 'accession',
+                domain: ['site'],
+                range: ['fill-site'],
+                labels: ['legend site'],
             },
-        ]);
+        });
     });
-    test('the longest comes first, so a nested site paints over it', () => {
-        const domains = connectedDomains(source([annotation('site', 2, 4), annotation('domain', 1, 5)]));
-        expect(domains.map(d => d.accession)).toEqual(['domain', 'site']);
-        expect(domains[0].regions).toEqual([
+    test('the longest comes first, in the features and the color domain alike', () => {
+        const { features, color } = connectedDomains(source([annotation('site', 2, 4), annotation('domain', 1, 5)]));
+        expect(features.map(d => d.accession)).toEqual(['domain', 'site']);
+        expect(color.domain).toEqual(['domain', 'site']);
+        expect(color.range).toEqual(['fill-domain', 'fill-site']);
+        expect(features[0].regions).toEqual([
             { refName: 'chr1', start: 100, end: 107 },
             { refName: 'chr1', start: 200, end: 208 },
         ]);
     });
     test('a scattered site is one entry, its residues merged where they touch', () => {
-        const domains = connectedDomains(source([
+        const { features } = connectedDomains(source([
             annotation('small', 4, 5),
             annotation('heme', 1, 1),
             annotation('heme', 3, 3),
             annotation('heme', 4, 4),
         ]));
-        expect(domains.map(d => d.accession)).toEqual(['heme', 'small']);
-        expect(domains[0]).toEqual({
+        expect(features.map(d => d.accession)).toEqual(['heme', 'small']);
+        expect(features[0]).toEqual({
             name: 'legend heme',
             accession: 'heme',
-            color: 'fill-heme',
+            kind: 'domain',
             regions: [
                 { refName: 'chr1', start: 103, end: 107 },
                 { refName: 'chr1', start: 200, end: 202 },
@@ -79,14 +89,14 @@ describe('connectedDomains on a reverse-strand transcript', () => {
         });
     });
     test('a trimmed query row shifts by querySeqOffset', () => {
-        const [domain] = connectedDomains(source([annotation('site', 1, 2)], { querySeqOffset: 1 }));
+        const [domain] = connectedDomains(source([annotation('site', 1, 2)], { querySeqOffset: 1 })).features;
         expect(domain.regions).toEqual([
             { refName: 'chr1', start: 106, end: 107 },
             { refName: 'chr1', start: 200, end: 205 },
         ]);
     });
     test('residues past the transcript drop out, and a domain with none left', () => {
-        expect(connectedDomains(source([annotation('tail', 5, 9), annotation('off', 7, 9)]))).toEqual([
+        expect(connectedDomains(source([annotation('tail', 5, 9), annotation('off', 7, 9)])).features).toEqual([
             expect.objectContaining({
                 accession: 'tail',
                 regions: [{ refName: 'chr1', start: 100, end: 103 }],
@@ -95,14 +105,43 @@ describe('connectedDomains on a reverse-strand transcript', () => {
     });
     test('only the query row, and nothing while the overlay is off', () => {
         const annotations = [annotation('other', 1, 5, 'Mouse')];
-        expect(connectedDomains(source(annotations))).toEqual([]);
-        expect(connectedDomains(source([annotation('domain', 1, 5)], { showDomains: false }))).toEqual([]);
+        expect(connectedDomains(source(annotations)).features).toEqual([]);
+        expect(connectedDomains(source([annotation('domain', 1, 5)], { showDomains: false }))).toEqual({
+            features: [],
+            color: { field: 'accession', domain: [], range: [], labels: [] },
+        });
     });
 });
 test('a MAF row maps one base per residue', () => {
     const [domain] = connectedDomains(source([annotation('d', 3, 6)], {
         transcriptToMsaMap: undefined,
         mafRegion: { refName: 'chr2', start: 50, end: 100, assemblyName: 'hg38' },
-    }));
+    })).features;
     expect(domain.regions).toEqual([{ refName: 'chr2', start: 52, end: 56 }]);
 });
+test('an entry is a site when its featureType names one', () => {
+    const { features } = connectedDomains(source([
+        { ...annotation('heme', 2, 2), featureType: 'Site' },
+        { ...annotation('globin', 1, 5), featureType: 'Region' },
+        annotation('gff', 1, 4),
+    ]));
+    expect(features.map(d => [d.accession, d.kind])).toEqual([
+        ['globin', 'domain'],
+        ['gff', 'domain'],
+        ['heme', 'site'],
+    ]);
+});
+test.each([
+    ['Site', 'site'],
+    ['binding_site', 'site'],
+    ['Active_site', 'site'],
+    ['Conserved_site', 'site'],
+    ['Binding site', 'site'],
+    ['Region', 'domain'],
+    ['protein_match', 'domain'],
+    ['Domain', 'domain'],
+    ['siteless', 'domain'],
+    [undefined, 'domain'],
+])('annotationKind(%s) is %s', (featureType, kind) => {
+    expect(annotationKind(featureType)).toBe(kind);
+});

package/dist/MsaViewPanel/domainTrack.d.ts

@@ -1,17 +1,18 @@
-import type { ConnectedDomain } from './connectedDomains';
+import type { ConnectedDomains } from './connectedDomains';
 export declare function domainTrackId(viewId: string): string;
 /**
  * A session FeatureTrack drawing `domains` on the genome: one feature per
  * domain, one subfeature per region, so a domain spanning exons draws as boxes
- * joined across the intron. Each feature paints the `color` it carries, and
- * the key names each color with its domain.
+ * joined across the intron. The display's color is the domains' color object,
+ * a categorical scale over each feature's `accession`, so its key names each
+ * color with its domain.
  */
 export declare function domainTrackConf({ viewId, assemblyName, name, strand, domains, }: {
     viewId: string;
     assemblyName: string;
     name: string;
     strand?: number;
-    domains: ConnectedDomain[];
+    domains: ConnectedDomains;
 }): {
     type: string;
     trackId: string;
@@ -23,7 +24,6 @@ export declare function domainTrackConf({ viewId, assemblyName, name, strand, do
             type: string;
             name: string;
             accession: string;
-            color: string;
             subfeatures: ({
                 type: string;
                 strand?: undefined;
@@ -48,7 +48,6 @@ export declare function domainTrackConf({ viewId, assemblyName, name, strand, do
             type: string;
             name: string;
             accession: string;
-            color: string;
             subfeatures: ({
                 type: string;
                 strand?: undefined;
@@ -75,11 +74,11 @@ export declare function domainTrackConf({ viewId, assemblyName, name, strand, do
         type: string;
         displayId: string;
         color: {
-            field: string;
+            title: string;
+            field: "accession";
             domain: string[];
             range: string[];
             labels: string[];
-            title: string;
         };
     }[];
 };

package/dist/MsaViewPanel/domainTrack.js

@@ -4,18 +4,12 @@ export function domainTrackId(viewId) {
 /**
  * A session FeatureTrack drawing `domains` on the genome: one feature per
  * domain, one subfeature per region, so a domain spanning exons draws as boxes
- * joined across the intron. Each feature paints the `color` it carries, and
- * the key names each color with its domain.
+ * joined across the intron. The display's color is the domains' color object,
+ * a categorical scale over each feature's `accession`, so its key names each
+ * color with its domain.
  */
 export function domainTrackConf({ viewId, assemblyName, name, strand, domains, }) {
     const trackId = domainTrackId(viewId);
-    const labelOf = new Map();
-    for (const { color, name } of domains) {
-        if (!labelOf.has(color)) {
-            labelOf.set(color, name);
-        }
-    }
-    const colors = [...labelOf.keys()];
     const stranded = strand === undefined ? {} : { strand };
     return {
         type: 'FeatureTrack',
@@ -24,7 +18,7 @@ export function domainTrackConf({ viewId, assemblyName, name, strand, domains, }
         assemblyNames: [assemblyName],
         adapter: {
             type: 'FromConfigAdapter',
-            features: domains.map(({ name, accession, color, regions }, i) => {
+            features: domains.features.map(({ name, accession, regions }, i) => {
                 const uniqueId = `${trackId}-${i}`;
                 return {
                     uniqueId,
@@ -35,7 +29,6 @@ export function domainTrackConf({ viewId, assemblyName, name, strand, domains, }
                     type: 'protein_domain',
                     name,
                     accession,
-                    color,
                     subfeatures: regions.map((r, j) => ({
                         uniqueId: `${uniqueId}-${j}`,
                         refName: r.refName,
@@ -51,13 +44,7 @@ export function domainTrackConf({ viewId, assemblyName, name, strand, domains, }
             {
                 type: 'LinearBasicDisplay',
                 displayId: `${trackId}-LinearBasicDisplay`,
-                color: {
-                    field: 'color',
-                    domain: colors,
-                    range: colors,
-                    labels: colors.map(c => labelOf.get(c)),
-                    title: 'Domains',
-                },
+                color: { ...domains.color, title: 'Domains' },
             },
         ],
     };

package/dist/MsaViewPanel/domainTrack.test.js

@@ -1,28 +1,30 @@
 import { expect, test } from 'vitest';
 import { domainTrackConf } from './domainTrack';
-const domains = [
-    {
-        name: 'Hb beta-like',
-        accession: 'cd1',
-        color: '#1b9e77',
-        regions: [
-            { refName: 'chr11', start: 100, end: 107 },
-            { refName: 'chr11', start: 200, end: 208 },
-        ],
-    },
-    {
-        name: 'heme binding site',
-        accession: 'cd2',
-        color: '#d95f02',
-        regions: [{ refName: 'chr11', start: 103, end: 107 }],
-    },
-    {
-        name: 'Hb beta-like',
-        accession: 'cd1',
-        color: '#1b9e77',
-        regions: [{ refName: 'chr11', start: 300, end: 330 }],
+const domains = {
+    features: [
+        {
+            name: 'Hb beta-like',
+            accession: 'cd1',
+            kind: 'domain',
+            regions: [
+                { refName: 'chr11', start: 100, end: 107 },
+                { refName: 'chr11', start: 200, end: 208 },
+            ],
+        },
+        {
+            name: 'heme binding site',
+            accession: 'cd2',
+            kind: 'site',
+            regions: [{ refName: 'chr11', start: 103, end: 107 }],
+        },
+    ],
+    color: {
+        field: 'accession',
+        domain: ['cd1', 'cd2'],
+        range: ['#1b9e77', '#d95f02'],
+        labels: ['Hb beta-like', 'heme binding site'],
     },
-];
+};
 const conf = domainTrackConf({
     viewId: 'msa1',
     assemblyName: 'hg38',
@@ -33,24 +35,24 @@ const conf = domainTrackConf({
 test('one feature per domain, one subfeature per region, spanning them all', () => {
     const [first] = conf.adapter.features;
     expect(conf.trackId).toBe('msaview-domains-msa1');
-    expect(conf.adapter.features).toHaveLength(3);
+    expect(conf.adapter.features).toHaveLength(2);
     expect(first).toMatchObject({
         refName: 'chr11',
         start: 100,
         end: 208,
         strand: -1,
         name: 'Hb beta-like',
-        color: '#1b9e77',
+        accession: 'cd1',
     });
     expect(first.subfeatures.map(s => [s.start, s.end])).toEqual([
         [100, 107],
         [200, 208],
     ]);
 });
-test('the display paints each feature its own color and names it in the key', () => {
+test('the display paints through the domains color object and names each in the key', () => {
     expect(conf.displays[0].color).toEqual({
-        field: 'color',
-        domain: ['#1b9e77', '#d95f02'],
+        field: 'accession',
+        domain: ['cd1', 'cd2'],
         range: ['#1b9e77', '#d95f02'],
         labels: ['Hb beta-like', 'heme binding site'],
         title: 'Domains',

package/dist/MsaViewPanel/loadProteinDomains.js

@@ -11,12 +11,13 @@ export async function loadProteinDomains(self, signal) {
         throw new Error('No NCBI accessions found in alignment rows');
     }
     const byAccession = await fetchProteinDomains(rowAccessions.map(r => r.accession), signal);
-    const annotations = rowAccessions.flatMap(({ rowName, accession }) => (byAccession.get(accession) ?? []).flatMap(({ signature, locations }) => signature.entry
+    const annotations = rowAccessions.flatMap(({ rowName, accession }) => (byAccession.get(accession) ?? []).flatMap(({ signature, locations, featureType }) => signature.entry
         ? locations.map(({ start, end }) => ({
             id: rowName,
             accession: signature.entry.accession,
             name: signature.entry.name,
             description: signature.entry.description,
+            featureType,
             start,
             end,
         }))

package/dist/MsaViewPanel/loadProteinDomains.test.js

@@ -7,6 +7,7 @@ const MATCH = {
         entry: { accession: 'cd00093', name: 'HTH_XRE', description: 'a domain' },
     },
     locations: [{ start: 5, end: 40 }],
+    featureType: 'Region',
 };
 function model(treeMetadata) {
     return {
@@ -27,6 +28,7 @@ test('an accession row becomes one annotation per location, keyed by row name',
             accession: 'cd00093',
             name: 'HTH_XRE',
             description: 'a domain',
+            featureType: 'Region',
             start: 5,
             end: 40,
         },