react-msaview 5.4.1 → 5.5.0

package/src/createPaletteMap.ts

@@ -1,11 +1,24 @@
+import { colord } from 'colord'
+
 import palettes from './ggplotPalettes.ts'
 
 /**
- * Creates a map from keys to colors using ggplot-style palettes.
- * The palette is selected based on the number of keys.
+ * Creates a map from keys to colors. Up to the largest ggplot palette (8 keys)
+ * we use the hand-picked ggplot colors; beyond that — e.g. a gene-structure
+ * overlay with one feature per exon — we generate evenly spaced HSL hues so
+ * every key still gets a distinct, stable color instead of running off the end
+ * of the palette.
  */
 export function createPaletteMap(keys: string[]) {
-  const k = Math.min(keys.length - 1, palettes.length - 1)
-  const palette = palettes[k]!
-  return Object.fromEntries(keys.map((key, i) => [key, palette[i]!]))
+  const n = keys.length
+  if (n <= palettes.length) {
+    const palette = palettes[n - 1]!
+    return Object.fromEntries(keys.map((key, i) => [key, palette[i]!]))
+  }
+  return Object.fromEntries(
+    keys.map((key, i) => [
+      key,
+      colord({ h: (i * 360) / n, s: 60, l: 60 }).toHex(),
+    ]),
+  )
 }

package/src/launchInterProScan.ts

@@ -13,9 +13,11 @@ export interface InterProScanResults {
         name: string
         description: string
         accession: string
+        // original GFF feature type (exon, CDS, ...) when sourced from GFF
+        featureType?: string
       }
     }
-    locations: { start: number; end: number }[]
+    locations: { start: number; end: number; strand?: number }[]
   }[]
   xref: { id: string }[]
 }

package/src/model.ts

@@ -43,6 +43,8 @@ import {
   maxCellSize,
   minColWidth,
   minRowHeight,
+  segmentFeatureTypes,
+  segmentShades,
 } from './constants.ts'
 import { createPaletteMap } from './createPaletteMap.ts'
 import { fetchTextWithProgress, isAbortError } from './fetchUtils.ts'
@@ -95,6 +97,14 @@ function parseTreeText(text: string) {
 
 /**
  * #stateModel MsaView
+ *
+ * The main MSAView state model. Holds the loaded alignment, tree, and optional
+ * InterProScan domain annotations, plus all display state (color scheme, zoom,
+ * scroll, collapsed clades). It composes in members from `DialogQueueSessionMixin`,
+ * `Tree`, and `MSAModel` (see Inherited members below). Data is loaded reactively
+ * from the `msaFilehandle` / `treeFilehandle` / `gffFilehandle` properties, or set
+ * directly with `setData`. Most state is persisted into the shareable URL.
+ *
  * #example
  * ```js
  * import { MSAModelF } from 'react-msaview'
@@ -373,12 +383,15 @@ function stateModelFactory() {
     .actions(self => ({
       /**
        * #action
+       * draw the alignment with positions numbered relative to the given row's
+       * sequence (its node id), instead of in raw MSA-column coordinates
        */
       drawRelativeTo(id: string | undefined) {
         self.relativeTo = id
       },
       /**
        * #action
+       * hide columns that are entirely (or mostly, see allowedGappyness) gaps
        */
       setHideGaps(arg: boolean) {
         self.hideGaps = arg
@@ -457,6 +470,7 @@ function stateModelFactory() {
       },
       /**
        * #action
+       * toggle the InterProScan protein-domain overlay on the alignment
        */
       setShowDomains(arg: boolean) {
         self.showDomains = arg
@@ -510,6 +524,7 @@ function stateModelFactory() {
 
       /**
        * #action
+       * collapse or un-collapse the subtree rooted at the given tree node id
        */
       toggleCollapsed(node: string) {
         if (self.collapsed.includes(node)) {
@@ -521,6 +536,8 @@ function stateModelFactory() {
 
       /**
        * #action
+       * show only the subtree rooted at the given node id (pass undefined to
+       * show the whole tree again)
        */
       setShowOnly(node?: string) {
         self.showOnly = node
@@ -528,6 +545,8 @@ function stateModelFactory() {
 
       /**
        * #action
+       * set the alignment/tree/metadata/domain data directly from strings,
+       * bypassing the filehandle loaders
        */
       setData(data: {
         msa?: string
@@ -1232,6 +1251,7 @@ function stateModelFactory() {
 
       /**
        * #action
+       * restore the default column width and row height
        */
       resetZoom() {
         self.setColWidth(defaultColWidth)
@@ -1592,13 +1612,15 @@ function stateModelFactory() {
                 val.matches.flatMap(({ signature, locations }) => {
                   const { entry } = signature
                   return entry
-                    ? locations.map(({ start, end }) => ({
+                    ? locations.map(({ start, end, strand }) => ({
                         id,
                         name: entry.name,
                         accession: entry.accession,
                         description: entry.description,
+                        featureType: entry.featureType,
                         start,
                         end,
+                        strand,
                       }))
                     : []
                 }),
@@ -1630,8 +1652,38 @@ function stateModelFactory() {
       get verticalScrollbarWidth() {
         return self.showVerticalScrollbar ? 20 : 0
       },
+      /**
+       * #getter
+       * ordinal segment types (exons etc.), ordered by sequence position so
+       * exon-1..exon-14 read left-to-right; colored by alternating shade and
+       * labeled by number rather than each getting a distinct hue + legend row
+       */
+      get segmentDomainTypes() {
+        return [...self.tidyInterProAnnotationTypes.values()]
+          .filter(d => segmentFeatureTypes.has(d.featureType ?? ''))
+          .toSorted((a, b) => a.start - b.start)
+      },
+      /**
+       * #getter
+       * categorical feature types (InterPro domains and the like) that each get
+       * their own color and a legend entry
+       */
+      get categoricalDomainTypes() {
+        return [...self.tidyInterProAnnotationTypes.values()].filter(
+          d => !segmentFeatureTypes.has(d.featureType ?? ''),
+        )
+      },
       get fillPalette() {
-        return createPaletteMap([...self.tidyInterProAnnotationTypes.keys()])
+        const segments = Object.fromEntries(
+          this.segmentDomainTypes.map((d, i) => [
+            d.accession,
+            segmentShades[i % segmentShades.length]!,
+          ]),
+        )
+        const categorical = createPaletteMap(
+          this.categoricalDomainTypes.map(d => d.accession),
+        )
+        return { ...segments, ...categorical }
       },
       get strokePalette() {
         return transform(this.fillPalette, ([key, val]) => [
@@ -1640,6 +1692,57 @@ function stateModelFactory() {
         ])
       },
 
+      /**
+       * #getter
+       * accession -> number drawn on each segment band: the trailing number of
+       * the feature name ("exon-3" -> "3"), else its 1-based position
+       */
+      get segmentLabels() {
+        return new Map(
+          this.segmentDomainTypes.map((d, i) => {
+            const m = /(\d+)\s*$/.exec(d.name)
+            return [d.accession, m ? m[1]! : `${i + 1}`]
+          }),
+        )
+      },
+
+      /**
+       * #getter
+       * the domain types currently drawn on the alignment (filtered-on), shared
+       * by the on-screen legend and the SVG export legend. Ordinal segments
+       * (exons) are excluded — they read as a numbered gene model, not a color
+       * key — so this is the categorical types ordered by sequence position
+       */
+      get visibleDomainTypes() {
+        return this.categoricalDomainTypes
+          .filter(d => self.featureFilters.get(d.accession))
+          .toSorted((a, b) => a.start - b.start)
+      },
+
+      /**
+       * #getter
+       * domain annotations under the mouse, hit-tested against the exact visible
+       * column span each box is drawn at (so it matches the overlay across gaps)
+       */
+      get mouseOverDomains() {
+        const { mouseCol } = self
+        const name = self.mouseOverRowName
+        if (name !== undefined && mouseCol !== undefined) {
+          const entry = self.tidyFilteredGatheredInterProAnnotations[name] ?? []
+          return entry.filter(d => {
+            const m1 = self.seqPosToVisibleCol(name, d.start - 1)
+            const m2 = self.seqPosToVisibleCol(name, d.end)
+            return (
+              m1 !== undefined &&
+              m2 !== undefined &&
+              mouseCol >= m1 &&
+              mouseCol < m2
+            )
+          })
+        }
+        return []
+      },
+
       /**
        * #method
        */

package/src/renderDomainLegendSvg.test.tsx

@@ -0,0 +1,134 @@
+// @vitest-environment jsdom
+//
+// Verifies the domain color-key legend is drawn as a reserved column on the
+// right of the SVG export when domains are shown. Polyfills mirror
+// impgRender.test.tsx (svgcanvas needs DOMMatrix/DOMPoint + a measureText).
+import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
+import { enableStaticRendering } from 'mobx-react'
+import { beforeAll, expect, test } from 'vitest'
+
+import MSAModelF from './model.ts'
+import { renderToSvg } from './renderToSvg.tsx'
+
+class Mat {
+  constructor(
+    public a = 1,
+    public b = 0,
+    public c = 0,
+    public d = 1,
+    public e = 0,
+    public f = 0,
+  ) {}
+  multiply(o: Mat) {
+    return new Mat(
+      this.a * o.a + this.c * o.b,
+      this.b * o.a + this.d * o.b,
+      this.a * o.c + this.c * o.d,
+      this.b * o.c + this.d * o.d,
+      this.a * o.e + this.c * o.f + this.e,
+      this.b * o.e + this.d * o.f + this.f,
+    )
+  }
+  translate(x: number, y = 0) {
+    return this.multiply(new Mat(1, 0, 0, 1, x, y))
+  }
+  scale(x: number, y = x) {
+    return this.multiply(new Mat(x, 0, 0, y, 0, 0))
+  }
+}
+class Pt {
+  constructor(
+    public x = 0,
+    public y = 0,
+  ) {}
+  matrixTransform(m: Mat) {
+    return new Pt(
+      m.a * this.x + m.c * this.y + m.e,
+      m.b * this.x + m.d * this.y + m.f,
+    )
+  }
+}
+
+beforeAll(() => {
+  enableStaticRendering(true)
+  const g = globalThis as Record<string, unknown>
+  g.DOMMatrix = Mat
+  g.DOMPoint = Pt
+  HTMLCanvasElement.prototype.getContext = function () {
+    let font = '10px sans-serif'
+    return {
+      get font() {
+        return font
+      },
+      set font(v: string) {
+        font = v
+      },
+      measureText(t: string) {
+        const size = Number.parseFloat(font) || 10
+        return { width: t.length * size * 0.6 } as TextMetrics
+      },
+    } as unknown as CanvasRenderingContext2D
+  } as unknown as typeof HTMLCanvasElement.prototype.getContext
+})
+
+const msa = `>seq1
+ACDEFGHIKL
+>seq2
+ACDE-GHIKL`
+
+function makeModel() {
+  const model = MSAModelF().create({
+    id: 'domain-legend-test',
+    type: 'MsaView',
+    height: 400,
+    msaFormat: 'fasta',
+    data: { msa },
+  })
+  model.setWidth(800)
+  model.setDomains({
+    seq1: {
+      xref: [{ id: 'seq1' }],
+      matches: [
+        {
+          signature: {
+            entry: {
+              name: 'Kinase',
+              accession: 'PF00069',
+              description: 'Protein kinase domain',
+            },
+          },
+          locations: [{ start: 1, end: 5 }],
+        },
+      ],
+    },
+  })
+  return model
+}
+
+test('domain legend is drawn in the svg export when domains are shown', async () => {
+  const model = makeModel()
+  expect(model.actuallyShowDomains).toBe(true)
+  expect(model.visibleDomainTypes.map(d => d.accession)).toEqual(['PF00069'])
+
+  const svg = await renderToSvg(model, {
+    theme: createJBrowseTheme(),
+    exportType: 'entire',
+    includeMinimap: false,
+    includeTracks: false,
+  })
+  expect(svg).toContain('Kinase')
+})
+
+test('no legend column when domains are hidden', async () => {
+  const model = makeModel()
+  model.setShowDomains(false)
+  expect(model.actuallyShowDomains).toBe(false)
+
+  const svg = await renderToSvg(model, {
+    theme: createJBrowseTheme(),
+    exportType: 'entire',
+    includeMinimap: false,
+    includeTracks: false,
+  })
+  expect(svg).not.toContain('Kinase')
+})