react-msaview 6.5.0 → 8.0.0

package/src/mount.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import { createRoot } from 'react-dom/client'
+
+import MSAViewer from './components/MSAViewer.tsx'
+
+import type { MSAViewerProps } from './components/MSAViewer.tsx'
+
+export interface MountedViewer {
+  /** merge new props over the current ones */
+  update: (props: Partial<MSAViewerProps>) => void
+  destroy: () => void
+}
+
+/**
+ * Render MSAViewer into an element, for a host that is not a React app: a
+ * script tag, an R htmlwidget, a notebook widget, a custom element.
+ */
+export function mount(el: HTMLElement, props: MSAViewerProps): MountedViewer {
+  const root = createRoot(el)
+  let current = props
+  root.render(<MSAViewer {...current} />)
+  return {
+    update(next) {
+      current = { ...current, ...next }
+      root.render(<MSAViewer {...current} />)
+    },
+    destroy() {
+      root.unmount()
+    },
+  }
+}

package/src/neighborJoining.ts

@@ -35,11 +35,8 @@ const NUM_SYMBOLS = BLOSUM62_KEYS.length
 const BLOSUM62 = Int8Array.from(BLOSUM62_DATA.flat())
 
 // charCode -> row/column in BLOSUM62, -1 for anything the matrix does not name.
-// A flat table rather than a Map of Maps keyed by an upper-cased character, for
-// the reason columnCounts.ts gives: the distance matrix is O(rows^2 * columns)
-// lookups, and on a 120x800 alignment the Map form spent nearly all of its time
-// allocating one-character strings in toUpperCase: 2.6s to build a tree, versus
-// 0.34s here for a byte-identical newick.
+// On a 120x800 alignment a Map keyed by upper-cased character took 2.6s to
+// build a tree, against 0.34s for this table.
 const symbolOfCode = new Int8Array(128).fill(-1)
 for (let i = 0; i < NUM_SYMBOLS; i++) {
   const key = BLOSUM62_KEYS[i]!
@@ -50,10 +47,7 @@ for (let i = 0; i < NUM_SYMBOLS; i++) {
 // gap, or past the end of a row shorter than the alignment
 const GAP = -2
 
-// stockholm and a3m write gaps as '.', not just '-'. Scoring a '.' as a residue
-// charges the pair the unknown-symbol penalty on every padded column, so two
-// sequences that differ only in where an unrelated row forced padding come out
-// as divergent.
+// stockholm and a3m also write gaps as '.'
 function symbolAt(seq: string, i: number) {
   if (i >= seq.length) {
     return GAP
@@ -71,10 +65,8 @@ function blosumScore(a: number, b: number) {
 }
 
 function computePairwiseDistance(seq1: string, seq2: string) {
-  // ragged input is real -- a3m and hand-edited fasta both produce rows shorter
-  // than the alignment -- so a row that stops early counts as gapped for the
-  // remainder, the same rule the model's `blanks` getter applies. Requiring
-  // equal lengths here instead made "build tree from MSA" throw on those files.
+  // a3m and hand-edited fasta produce short rows; past its end a row counts as
+  // gapped, as in the model's `blanks` getter
   const len = Math.max(seq1.length, seq2.length)
   let compared = 0
   let totalScore = 0
@@ -103,17 +95,14 @@ function computePairwiseDistance(seq1: string, seq2: string) {
     return 1
   }
 
-  // Convert similarity to distance using normalized BLOSUM62 score
-  // Higher scores mean more similar, so we invert
   if (maxPossibleScore <= 0) {
     return 1
   }
 
   const normalizedScore = totalScore / maxPossibleScore
-  // Clamp to valid range and convert to distance
   const clampedScore = Math.max(0.01, Math.min(1, normalizedScore))
 
-  // Use Kimura-like correction: d = -ln(similarity)
+  // Kimura-like correction: d = -ln(similarity)
   return -Math.log(clampedScore)
 }
 
@@ -160,7 +149,6 @@ function neighborJoining(distances: number[][], names: string[]): NJNode {
     }
   }
 
-  // Work with copies that we'll modify
   const D: number[][] = []
   for (let i = 0; i < n; i++) {
     D[i] = [...distances[i]!]
@@ -170,7 +158,6 @@ function neighborJoining(distances: number[][], names: string[]): NJNode {
   let remaining = n
 
   while (remaining > 2) {
-    // Find active indices
     const active: number[] = []
     for (let i = 0; i < nodes.length; i++) {
       if (nodes[i] !== undefined) {
@@ -178,7 +165,6 @@ function neighborJoining(distances: number[][], names: string[]): NJNode {
       }
     }
 
-    // Compute r values (sum of distances for each node)
     const r = new Map<number, number>()
     for (const i of active) {
       let sum = 0
@@ -190,7 +176,6 @@ function neighborJoining(distances: number[][], names: string[]): NJNode {
       r.set(i, sum)
     }
 
-    // Find pair with minimum Q value
     let minQ = Infinity
     let minI = -1
     let minJ = -1
@@ -209,21 +194,16 @@ function neighborJoining(distances: number[][], names: string[]): NJNode {
       }
     }
 
-    // Calculate branch lengths
     const dij = D[minI]![minJ]!
     const ri = r.get(minI)!
     const rj = r.get(minJ)!
 
-    // 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)
     limbJ = Math.max(0, limbJ)
 
-    // Create new node
     const newNode: NJNode = {
       left: nodes[minI],
       right: nodes[minJ],
@@ -231,7 +211,7 @@ function neighborJoining(distances: number[][], names: string[]): NJNode {
       rightLength: limbJ,
     }
 
-    // Update distance matrix, reusing minI's slot for the merged node
+    // the merged node reuses minI's slot
     for (const k of active) {
       if (k !== minI && k !== minJ) {
         const newDist = (D[minI]![k]! + D[minJ]![k]! - dij) / 2
@@ -240,14 +220,12 @@ function neighborJoining(distances: number[][], names: string[]): NJNode {
       }
     }
 
-    // Mark minJ as removed
     nodes[minJ] = undefined
     nodes[minI] = newNode
 
     remaining--
   }
 
-  // Connect final two nodes
   const finalActive: number[] = []
   for (let i = 0; i < nodes.length; i++) {
     if (nodes[i] !== undefined) {
@@ -276,9 +254,7 @@ function withBranchLength(newick: string, branchLength?: number) {
     : `${newick}:${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).
+// iterative: an NJ tree of N leaves can be a caterpillar of depth ~N
 function nodeToNewick(root: NJNode): string {
   const postOrder: NJNode[] = []
   const stack: NJNode[] = [root]

package/src/rawImports.d.ts

@@ -0,0 +1,9 @@
+// Vite resolves a `?raw` import to the file's text. The lib does not build with
+// Vite, but realResidueMapping.test.ts reads the examples package's alignment
+// files that way (they are files, not string constants), so tsc has to be told
+// what the suffix means. tsconfig.build.json excludes this, and tsc emits
+// nothing for a .d.ts anyway, so it stays out of the published types.
+declare module '*?raw' {
+  const content: string
+  export default content
+}

package/src/renderToStaticMarkup.ts

@@ -1,3 +1,4 @@
+import { colord } from 'colord'
 import { flushSync } from 'react-dom'
 import { createRoot } from 'react-dom/client'
 
@@ -6,19 +7,11 @@ import type React from 'react'
 /**
  * Render a React element to a static markup string, for the SVG export.
  *
- * Inlined rather than imported from `@jbrowse/core/util` on purpose, and this
- * one is the removal direction of the rule in CLAUDE.md rather than the
- * addition direction. Core dropped `renderToStaticMarkup` from that barrel in
- * jbrowse-components 0d034e2bd8 -- deliberately, because it was the barrel's
- * only reach into react-dom and the barrel is loaded in the RPC worker, which
- * never renders. The export path is the only caller, so nothing here or in
- * jbrowse-plugin-msaview/-tview failed to build, lint, typecheck, or boot; the
- * published 3.4.0 and 2.2.1 bundles simply threw the first time a user asked
- * for an SVG on a v5 host.
- *
- * A rendering library asking its host for a renderer was the odd coupling. Both
- * `react-dom` and `react-dom/client` are long-established host externals, so
- * this costs a few hundred bytes in the plugin bundle and no duplicate react.
+ * Inlined because core removed `renderToStaticMarkup` from the
+ * `@jbrowse/core/util` barrel in jbrowse-components 0d034e2bd8; see the
+ * `@jbrowse/core` note in CLAUDE.md. `react-dom` and `react-dom/client` are
+ * host externals, so this adds a few hundred bytes to the plugin bundle and no
+ * duplicate react.
  */
 export function renderToStaticMarkup(node: React.ReactElement) {
   const div = document.createElement('div')
@@ -30,18 +23,41 @@ export function renderToStaticMarkup(node: React.ReactElement) {
     })
     html = div.innerHTML
   } finally {
-    // A real client root, not a server render: effects run, so every `observer`
-    // in the tree gets a live MobX reaction. Left mounted, an export of a large
-    // alignment keeps tens of thousands of detached nodes subscribed to the
-    // model and re-rendering into a dead div on every pan and zoom, once per
-    // export ever taken. The markup is a string by here and needs no DOM.
+    // effects run in a client root, so every `observer` holds a MobX reaction;
+    // a mounted export of a large alignment would keep tens of thousands of
+    // detached nodes re-rendering on every pan and zoom
     root.unmount()
   }
-  // SVG 1.1 presentation attributes (`fill`, `stroke`) take a <color>, which
-  // excludes rgba() -- alpha belongs in a separate fill-opacity. Illustrator and
-  // older Inkscape drop an element whose fill they cannot parse, so alpha is
-  // stripped rather than left to break the shape. MUI palette values are the
-  // usual source. Dropping rather than converting is what the figure snapshots
-  // encode.
-  return html.replaceAll(/\brgba\((.+?),[^,]+?\)/g, 'rgb($1)')
+  return html
+}
+
+const tag = /<[a-zA-Z][^>]*>/g
+const colorAttr = /\b(fill|stroke|stop-color)="([^"]+)"/g
+
+/**
+ * Rewrites every color an SVG 1.1 presentation attribute cannot hold.
+ *
+ * `fill`, `stroke` and `stop-color` take a keyword, a hex triplet or rgb(). MUI
+ * palette values use rgba() and the percent-identity scheme uses hsl(), and
+ * Illustrator and older Inkscape drop an element whose fill they cannot parse.
+ * Alpha moves to the matching -opacity attribute unless the element already
+ * carries one.
+ */
+export function svgSafeColors(html: string) {
+  return html.replaceAll(tag, el =>
+    el.replaceAll(colorAttr, (match, attr: string, value: string) => {
+      if (!/^(rgba|hsl)/i.test(value)) {
+        return match
+      }
+      const color = colord(value)
+      if (!color.isValid()) {
+        return match
+      }
+      const alpha = color.alpha()
+      const hex = color.alpha(1).toHex()
+      return alpha === 1 || el.includes(`${attr}-opacity=`)
+        ? `${attr}="${hex}"`
+        : `${attr}="${hex}" ${attr}-opacity="${alpha}"`
+    }),
+  )
 }