react-msaview 5.4.0 → 5.5.0

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'
@@ -249,6 +259,15 @@ function stateModelFactory() {
          * #property
          */
         relativeTo: types.maybe(types.string),
+        /**
+         * #property
+         * declarative seed for the highlighted-columns overlay (visible column
+         * indices). Unlike the volatile `highlightedColumns` (driven by
+         * transient genome-hover sync), this persists in the snapshot/URL so a
+         * shared link can open with specific columns highlighted. Applied once
+         * in afterCreate.
+         */
+        highlightColumns: types.frozen<number[] | undefined>(),
       }),
     )
     .volatile(() => ({
@@ -364,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
@@ -448,6 +470,7 @@ function stateModelFactory() {
       },
       /**
        * #action
+       * toggle the InterProScan protein-domain overlay on the alignment
        */
       setShowDomains(arg: boolean) {
         self.showDomains = arg
@@ -501,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)) {
@@ -512,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
@@ -519,6 +545,8 @@ function stateModelFactory() {
 
       /**
        * #action
+       * set the alignment/tree/metadata/domain data directly from strings,
+       * bypassing the filehandle loaders
        */
       setData(data: {
         msa?: string
@@ -944,7 +972,10 @@ function stateModelFactory() {
       get colConsensus() {
         const { colStats, colStatsSums } = this
         return colStats.map((stats, i) => {
-          const total = colStatsSums[i]!
+          const total = colStatsSums[i]
+          if (!total) {
+            return { letter: '', color: undefined }
+          }
           let maxCount = 0
           let letter = ''
           for (const [key, val] of Object.entries(stats)) {
@@ -1220,6 +1251,7 @@ function stateModelFactory() {
 
       /**
        * #action
+       * restore the default column width and row height
        */
       resetZoom() {
         self.setColWidth(defaultColWidth)
@@ -1259,12 +1291,8 @@ function stateModelFactory() {
        */
       zoomIn() {
         transaction(() => {
-          self.colWidth = Math.min(maxCellSize, Math.ceil(self.colWidth * 1.5))
-          self.rowHeight = Math.min(
-            maxCellSize,
-            Math.ceil(self.rowHeight * 1.5),
-          )
-          self.scrollX = clamp(self.scrollX, self.maxScrollX, 0)
+          this.zoomInHorizontal()
+          this.zoomInVertical()
         })
       },
       /**
@@ -1272,15 +1300,8 @@ function stateModelFactory() {
        */
       zoomOut() {
         transaction(() => {
-          self.colWidth = Math.max(
-            minColWidth,
-            Math.floor(self.colWidth * 0.75),
-          )
-          self.rowHeight = Math.max(
-            minRowHeight,
-            Math.floor(self.rowHeight * 0.75),
-          )
-          self.scrollX = clamp(self.scrollX, self.maxScrollX, 0)
+          this.zoomOutHorizontal()
+          this.zoomOutVertical()
         })
       },
       /**
@@ -1314,9 +1335,13 @@ function stateModelFactory() {
           )
 
           const anchoredScrollY = offsetY - rowInView * self.rowHeight
-          const overflow = Math.max(0, self.totalHeight - self.height)
+          // maxScrollY is -(totalHeight - visibleMsaHeight) when the alignment
+          // overflows, so -maxScrollY is exactly that overflow past the
+          // scrollable MSA viewport (0 when it fits)
+          const overflow = Math.max(0, -self.maxScrollY)
+          const visibleHeight = self.totalHeight - overflow
           const topBias =
-            self.height > 0 ? clamp(1 - overflow / self.height, 0, 1) : 0
+            visibleHeight > 0 ? clamp(1 - overflow / visibleHeight, 0, 1) : 1
           self.scrollY = clamp(
             anchoredScrollY * (1 - topBias),
             self.maxScrollY,
@@ -1587,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,
                       }))
                     : []
                 }),
@@ -1625,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]) => [
@@ -1635,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
        */
@@ -1703,22 +1811,8 @@ function stateModelFactory() {
        * #action
        */
       fit() {
-        if (self.numRows > 0) {
-          self.rowHeight = clamp(
-            self.msaAreaHeight / self.numRows,
-            minRowHeight,
-            maxCellSize,
-          )
-        }
-        if (self.numColumns > 0) {
-          self.colWidth = clamp(
-            self.msaAreaWidth / self.numColumns,
-            minColWidth,
-            maxCellSize,
-          )
-        }
-        self.scrollX = 0
-        self.scrollY = 0
+        this.fitVertically()
+        this.fitHorizontally()
       },
       /**
        * #action
@@ -1748,6 +1842,13 @@ function stateModelFactory() {
       },
 
       afterCreate() {
+        // seed the highlighted-columns overlay from the declarative property so
+        // a shared snapshot/URL opens with those columns highlighted (the
+        // volatile highlightedColumns can later be driven by genome-hover sync)
+        if (self.highlightColumns?.length) {
+          self.setHighlightedColumns(self.highlightColumns)
+        }
+
         addDisposer(
           self,
           autorun(() => {

package/src/neighborJoining.ts

@@ -194,16 +194,10 @@ function neighborJoining(distances: number[][], names: string[]): NJNode {
     const ri = r.get(minI)!
     const rj = r.get(minJ)!
 
-    let limbI: number
-    let limbJ: number
-
-    if (remaining > 2) {
-      limbI = dij / 2 + (ri - rj) / (2 * (remaining - 2))
-      limbJ = dij - limbI
-    } else {
-      limbI = dij / 2
-      limbJ = dij / 2
-    }
+    // remaining is always > 2 inside this loop; the final two nodes are
+    // connected after it
+    let limbI = dij / 2 + (ri - rj) / (2 * (remaining - 2))
+    let limbJ = dij - limbI
 
     // Ensure non-negative branch lengths
     limbI = Math.max(0, limbI)
@@ -217,19 +211,18 @@ function neighborJoining(distances: number[][], names: string[]): NJNode {
       rightLength: limbJ,
     }
 
-    // Update distance matrix
-    const newIdx = minI
+    // Update distance matrix, reusing minI's slot for the merged node
     for (const k of active) {
       if (k !== minI && k !== minJ) {
         const newDist = (D[minI]![k]! + D[minJ]![k]! - dij) / 2
-        D[newIdx]![k] = Math.max(0, newDist)
-        D[k]![newIdx] = Math.max(0, newDist)
+        D[minI]![k] = Math.max(0, newDist)
+        D[k]![minI] = Math.max(0, newDist)
       }
     }
 
     // Mark minJ as removed
     nodes[minJ] = undefined
-    nodes[newIdx] = newNode
+    nodes[minI] = newNode
 
     remaining--
   }
@@ -257,25 +250,45 @@ function neighborJoining(distances: number[][], names: string[]): NJNode {
   return nodes[finalActive[0]!]!
 }
 
-function nodeToNewick(node: NJNode, branchLength?: number): string {
-  let result: string
-
-  if (node.name !== undefined && !node.left && !node.right) {
-    const quotedName = node.name.replaceAll("'", "''")
-    result = `'${quotedName}'`
-  } else {
-    const leftNewick = node.left ? nodeToNewick(node.left, node.leftLength) : ''
-    const rightNewick = node.right
-      ? nodeToNewick(node.right, node.rightLength)
-      : ''
-    result = `(${leftNewick},${rightNewick})`
-  }
+function withBranchLength(newick: string, branchLength?: number) {
+  return branchLength === undefined
+    ? newick
+    : `${newick}:${branchLength.toFixed(6)}`
+}
 
-  if (branchLength !== undefined) {
-    result += `:${branchLength.toFixed(6)}`
+// Emit Newick iteratively rather than recursively: an NJ tree of N leaves can
+// be a caterpillar of depth ~N, so recursion risks a stack overflow on large
+// alignments (matching the iterative-traversal convention in hierarchy.ts).
+function nodeToNewick(root: NJNode): string {
+  const postOrder: NJNode[] = []
+  const stack: NJNode[] = [root]
+  while (stack.length > 0) {
+    const node = stack.pop()!
+    postOrder.push(node)
+    if (node.left) {
+      stack.push(node.left)
+    }
+    if (node.right) {
+      stack.push(node.right)
+    }
   }
 
-  return result
+  const newickByNode = new Map<NJNode, string>()
+  for (let i = postOrder.length - 1; i >= 0; i--) {
+    const node = postOrder[i]!
+    if (node.name !== undefined && !node.left && !node.right) {
+      newickByNode.set(node, `'${node.name.replaceAll("'", "''")}'`)
+    } else {
+      const left = node.left
+        ? withBranchLength(newickByNode.get(node.left)!, node.leftLength)
+        : ''
+      const right = node.right
+        ? withBranchLength(newickByNode.get(node.right)!, node.rightLength)
+        : ''
+      newickByNode.set(node, `(${left},${right})`)
+    }
+  }
+  return newickByNode.get(root)!
 }
 
 export function calculateNeighborJoiningTree(

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')
+})