react-msaview 9.0.0 → 9.1.1

package/src/neighborJoining.ts

@@ -1,48 +1,7 @@
 // Neighbor Joining tree construction using BLOSUM62 distances
 // Based on Saitou & Nei (1987) "The neighbor-joining method"
 
-// prettier-ignore
-const BLOSUM62_KEYS = 'ARNDCQEGHILKMFPSTWYVBZX*'
-// prettier-ignore
-const BLOSUM62_DATA = [
-  [ 4,-1,-2,-2, 0,-1,-1, 0,-2,-1,-1,-1,-1,-2,-1, 1, 0,-3,-2, 0,-2,-1, 0,-4],
-  [-1, 5, 0,-2,-3, 1, 0,-2, 0,-3,-2, 2,-1,-3,-2,-1,-1,-3,-2,-3,-1, 0,-1,-4],
-  [-2, 0, 6, 1,-3, 0, 0, 0, 1,-3,-3, 0,-2,-3,-2, 1, 0,-4,-2,-3, 3, 0,-1,-4],
-  [-2,-2, 1, 6,-3, 0, 2,-1,-1,-3,-4,-1,-3,-3,-1, 0,-1,-4,-3,-3, 4, 1,-1,-4],
-  [ 0,-3,-3,-3, 9,-3,-4,-3,-3,-1,-1,-3,-1,-2,-3,-1,-1,-2,-2,-1,-3,-3,-2,-4],
-  [-1, 1, 0, 0,-3, 5, 2,-2, 0,-3,-2, 1, 0,-3,-1, 0,-1,-2,-1,-2, 0, 3,-1,-4],
-  [-1, 0, 0, 2,-4, 2, 5,-2, 0,-3,-3, 1,-2,-3,-1, 0,-1,-3,-2,-2, 1, 4,-1,-4],
-  [ 0,-2, 0,-1,-3,-2,-2, 6,-2,-4,-4,-2,-3,-3,-2, 0,-2,-2,-3,-3,-1,-2,-1,-4],
-  [-2, 0, 1,-1,-3, 0, 0,-2, 8,-3,-3,-1,-2,-1,-2,-1,-2,-2, 2,-3, 0, 0,-1,-4],
-  [-1,-3,-3,-3,-1,-3,-3,-4,-3, 4, 2,-3, 1, 0,-3,-2,-1,-3,-1, 3,-3,-3,-1,-4],
-  [-1,-2,-3,-4,-1,-2,-3,-4,-3, 2, 4,-2, 2, 0,-3,-2,-1,-2,-1, 1,-4,-3,-1,-4],
-  [-1, 2, 0,-1,-3, 1, 1,-2,-1,-3,-2, 5,-1,-3,-1, 0,-1,-3,-2,-2, 0, 1,-1,-4],
-  [-1,-1,-2,-3,-1, 0,-2,-3,-2, 1, 2,-1, 5, 0,-2,-1,-1,-1,-1, 1,-3,-1,-1,-4],
-  [-2,-3,-3,-3,-2,-3,-3,-3,-1, 0, 0,-3, 0, 6,-4,-2,-2, 1, 3,-1,-3,-3,-1,-4],
-  [-1,-2,-2,-1,-3,-1,-1,-2,-2,-3,-3,-1,-2,-4, 7,-1,-1,-4,-3,-2,-2,-1,-2,-4],
-  [ 1,-1, 1, 0,-1, 0, 0, 0,-1,-2,-2, 0,-1,-2,-1, 4, 1,-3,-2,-2, 0, 0, 0,-4],
-  [ 0,-1, 0,-1,-1,-1,-1,-2,-2,-1,-1,-1,-1,-2,-1, 1, 5,-2,-2, 0,-1,-1, 0,-4],
-  [-3,-3,-4,-4,-2,-2,-3,-2,-2,-3,-2,-3,-1, 1,-4,-3,-2,11, 2,-3,-4,-3,-2,-4],
-  [-2,-2,-2,-3,-2,-1,-2,-3, 2,-1,-1,-2,-1, 3,-3,-2,-2, 2, 7,-1,-3,-2,-1,-4],
-  [ 0,-3,-3,-3,-1,-2,-2,-3,-3, 3, 1,-2, 1,-1,-2,-2, 0,-3,-1, 4,-3,-2,-1,-4],
-  [-2,-1, 3, 4,-3, 0, 1,-1, 0,-3,-4, 0,-3,-3,-2, 0,-1,-4,-3,-3, 4, 1,-1,-4],
-  [-1, 0, 0, 1,-3, 3, 4,-2, 0,-3,-3, 1,-1,-3,-1, 0,-1,-3,-2,-2, 1, 4,-1,-4],
-  [ 0,-1,-1,-1,-2,-1,-1,-1,-1,-1,-1,-1,-1,-1,-2, 0, 0,-2,-1,-1,-1,-1,-1,-4],
-  [-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4,-4, 1],
-]
-
-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.
-// 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]!
-  symbolOfCode[key.charCodeAt(0)] = i
-  symbolOfCode[key.toLowerCase().charCodeAt(0)] = i
-}
+import { BLOSUM62, NUM_SYMBOLS, symbolOfCode } from './blosum62.ts'
 
 // gap, or past the end of a row shorter than the alignment
 const GAP = -2

package/src/renderToSvg.tsx

@@ -6,8 +6,7 @@ import { when } from 'mobx'
 import { visibleRowRange } from './components/getVisibleLeaves.ts'
 import MinimapSVG from './components/minimap/MinimapSVG.tsx'
 import { legendRows } from './components/msa/legendRows.ts'
-import { rasterImageHref, rasterSupported } from './components/msa/msaRaster.ts'
-import { renderBoxFeatureCanvasBlock } from './components/msa/renderBoxFeatureCanvasBlock.ts'
+import { rasterApplies, rasterImageHref } from './components/msa/msaRaster.ts'
 import { renderPersistentHighlights } from './components/msa/renderHighlights.ts'
 import { renderMSABlock } from './components/msa/renderMSABlock.ts'
 import { visibleColRange } from './components/msa/visibleColRange.ts'
@@ -15,141 +14,32 @@ import { headerRunsAcross } from './components/rowpanels/headerLayout.ts'
 import { renderRowPanels } from './components/rowpanels/renderRowPanel.ts'
 import { renderAllTracks } from './components/tracks/drawTracks.ts'
 import ScaleBarSVG from './components/tree/ScaleBarSVG.tsx'
-import {
-  bracketGap,
-  cladeHeight,
-  cladeInGutter,
-  cladeLabelHorizontal,
-  cladeLabelOffset,
-} from './components/tree/cladeBrackets.ts'
+import { cladeLabelBoxes } from './components/tree/cladeBrackets.ts'
+import { ellipsize } from './components/tree/ellipsize.ts'
 import { renderTreeCanvas } from './components/tree/renderTreeCanvas.ts'
 import { renderTreeOverview } from './components/tree/renderTreeOverview.ts'
 import { treeScaleBarHeight } from './constants.ts'
+import {
+  LEGEND_CHAR_W,
+  LEGEND_FONT,
+  LEGEND_PAD,
+  LEGEND_ROW_H,
+  LEGEND_SWATCH,
+  LEGEND_TEXT_X,
+  exportPageSize,
+  getLayout,
+  legendHeight,
+} from './exportLayout.ts'
 import { measureTextCanvas } from './measureTextCanvas.ts'
 import { renderToStaticMarkup, svgSafeColors } from './renderToStaticMarkup.ts'
 import { outlineColor } from './util.ts'
 
-import type { LegendRow } from './components/msa/legendRows.ts'
+import type { ExportSvgOptions, Layout } from './exportLayout.ts'
 import type { MsaViewModel } from './model.ts'
 import type { Context as ContextType } from '@jbrowse/svgcanvas'
 import type { Theme } from '@mui/material'
 
-export interface ExportSvgOptions {
-  theme: Theme
-  includeMinimap?: boolean
-  includeTracks?: boolean
-  exportType: 'entire' | 'viewport'
-}
-
-// legend geometry, shared by the width calculation and the renderer so the
-// reserved column on the right exactly fits the drawn legends
-const LEGEND_PAD = 8
-const LEGEND_ROW_H = 16
-const LEGEND_SWATCH = 12
-const LEGEND_FONT = 12
-const LEGEND_CHAR_W = 7
-
-// the width of a character as a fraction of the font size, close enough for a
-// sans-serif average
-const CHAR_WIDTH = 0.6
-
-const LEGEND_MAX_W = 360
-const LEGEND_TEXT_X = LEGEND_PAD + LEGEND_SWATCH + 6
-
-function getLegendWidth(rows: LegendRow[]) {
-  const maxLen = rows.reduce((a, r) => Math.max(a, r.label.length), 0)
-  const w = LEGEND_TEXT_X + LEGEND_PAD + maxLen * LEGEND_CHAR_W
-  return Math.min(LEGEND_MAX_W, Math.max(120, w))
-}
-
-function legendHeight(rows: LegendRow[]) {
-  return LEGEND_PAD * 2 + rows.length * LEGEND_ROW_H
-}
-
-// resolved sizes/offsets (in svg user units) for the chosen export, shared by
-// every layer; 'entire' renders the whole alignment unscrolled, 'viewport'
-// mirrors the live scroll position
-interface Layout {
-  width: number
-  msaAreaWidth: number
-  height: number
-  contentHeight: number
-  trackHeight: number
-  // the band the minimap, the row panel headers and the tree overview stacked
-  // on the scale bar share across the top
-  topHeight: number
-  offsetX: number
-  offsetY: number
-  includeMinimap: boolean
-  legendWidth: number
-}
-
-function getLayout(model: MsaViewModel, opts: ExportSvgOptions): Layout {
-  const {
-    scrollX,
-    scrollY,
-    totalWidth,
-    totalHeight,
-    effectiveTreeAreaWidth,
-    rowPanelsWidth,
-    rowPanelsHeaderHeight,
-    totalTrackAreaHeight,
-    minimapHeight,
-    msaAreaHeight,
-    msaCanvasWidth,
-    showHorizontalScrollbar,
-    treeOverviewHeight,
-    treeScaleBar,
-  } = model
-  const trackHeight = opts.includeTracks ? totalTrackAreaHeight : 0
-  // the minimap reflects the live viewport scroll position, so it's only
-  // meaningful for a viewport export, never for the entire alignment -- and
-  // only when the live view shows one at all, since a minimap over an alignment
-  // that already fits marks a viewport wider than the bar
-  const includeMinimap =
-    opts.exportType === 'viewport' &&
-    !!opts.includeMinimap &&
-    showHorizontalScrollbar
-  const rows = legendRows(model.legends)
-  const legendWidth = rows.length > 0 ? getLegendWidth(rows) : 0
-  const topHeight = Math.max(
-    includeMinimap ? minimapHeight : 0,
-    rowPanelsHeaderHeight,
-    treeOverviewHeight + (treeScaleBar ? treeScaleBarHeight : 0),
-  )
-  const gutterWidth = effectiveTreeAreaWidth + rowPanelsWidth
-
-  // width stays content-only; the legend occupies an extra column added at the
-  // svg root in MsaSvg. The viewport export takes the alignment canvas's own
-  // size rather than the widget's -- the widget box also covers the header, the
-  // resize handle and the scrollbars, and rendering that box exports rows and
-  // columns the scrollbars hide on screen
-  return opts.exportType === 'entire'
-    ? {
-        width: totalWidth + gutterWidth,
-        msaAreaWidth: totalWidth,
-        height: totalHeight + trackHeight + topHeight,
-        contentHeight: totalHeight,
-        trackHeight,
-        topHeight,
-        offsetX: 0,
-        offsetY: 0,
-        includeMinimap,
-        legendWidth,
-      }
-    : {
-        width: msaCanvasWidth + gutterWidth,
-        msaAreaWidth: msaCanvasWidth,
-        height: msaAreaHeight + topHeight + trackHeight,
-        contentHeight: msaAreaHeight,
-        trackHeight,
-        topHeight,
-        offsetX: -scrollX,
-        offsetY: -scrollY,
-        includeMinimap,
-        legendWidth,
-      }
-}
+export type { ExportSvgOptions } from './exportLayout.ts'
 
 export async function renderToSvg(model: MsaViewModel, opts: ExportSvgOptions) {
   // dataInitialized stays false while the model holds a load error, so waiting
@@ -173,12 +63,13 @@ export async function renderToSvg(model: MsaViewModel, opts: ExportSvgOptions) {
       layers={layers}
     />,
   )
+  // innerHTML serializes as HTML, and an XML parser rejects its  
   return svgSafeColors(
     markup.replaceAll(/<g data-layer="([^"]+)"><\/g>/g, (match, id: string) => {
       const ctx = layers.get(id)
       return ctx ? `<g id="${id}">${ctx.getSvg().innerHTML}</g>` : match
     }),
-  )
+  ).replaceAll('&nbsp;', '&#160;')
 }
 
 function MsaSvg({
@@ -196,17 +87,8 @@ function MsaSvg({
 }) {
   const { width, trackHeight, includeMinimap, legendWidth, topHeight } = layout
   const { effectiveTreeAreaWidth, rowPanelsWidth } = model
-  const totalWidth = width + legendWidth
+  const { width: totalWidth, height } = exportPageSize(model, layout)
   const legendTop = topHeight
-  // a short alignment with many legend entries has a key taller than its rows,
-  // and the page has to hold the whole key
-  const height =
-    legendWidth > 0
-      ? Math.max(
-          layout.height,
-          legendTop + legendHeight(legendRows(model.legends)),
-        )
-      : layout.height
   const props = { Context, model, theme, layout, layers }
 
   const body = (
@@ -227,6 +109,9 @@ function MsaSvg({
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       viewBox={`0 0 ${totalWidth} ${height}`}
+      // the canvas layers name sans-serif on each glyph; the legend, labels
+      // and headers inherit it here instead of an editor's default serif
+      fontFamily="sans-serif"
     >
       {/* every layer below draws in the theme's colors, so the page has to be
           the theme's background too -- a hardcoded white one turns a dark-theme
@@ -359,7 +244,6 @@ function RowPanelHeadersSVG({
         const center = effectiveTreeAreaWidth + panel.offsetX + panel.width / 2
         const x = across ? center : center + size / 3
         const room = across ? panel.width : y - LEGEND_PAD
-        const maxChars = Math.floor(room / (size * CHAR_WIDTH))
         return size < 5 ? null : (
           <text
             key={panel.id}
@@ -371,9 +255,10 @@ function RowPanelHeadersSVG({
             fontSize={size}
             fill={theme.palette.text.primary}
           >
-            {panel.header.length > maxChars
-              ? `${panel.header.slice(0, Math.max(1, maxChars - 1))}…`
-              : panel.header}
+            {
+              ellipsize(t => measureTextCanvas(t, size), panel.header, room)
+                .text
+            }
           </text>
         )
       })}
@@ -381,21 +266,11 @@ function RowPanelHeadersSVG({
   )
 }
 
-// A label past the room it has, cut to what fits with an ellipsis. The measure
-// is the one cladeGutterWidth sizes the gutter with, so a label the gutter
-// holds keeps every character.
-function clipCladeLabel(label: string, room: number, fontSize: number) {
-  const width = measureTextCanvas(label, fontSize)
-  if (width <= room) {
-    return label
-  }
-  const fits = Math.floor((label.length * room) / width)
-  return `${label.slice(0, Math.max(1, fits - 1))}…`
-}
-
 // Each bracket's label in the gutter beside its bar, where the live view puts
 // it (see CladeLabels). The canvas layer draws the bar; a label longer than the
 // gutter or the clade is clipped, since text that overruns runs off the figure.
+// cladeGutterWidth sizes the gutter with the same measureTextCanvas, so a label
+// the gutter holds keeps every character.
 function CladeLabelsSVG({
   model,
   theme,
@@ -405,43 +280,32 @@ function CladeLabelsSVG({
   theme: Theme
   offsetY: number
 }) {
-  const {
-    resolvedClades,
-    cladeGutterWidth,
-    rowHeight,
-    effectiveTreeAreaWidth,
-    fontSize,
-  } = model
-  if (cladeGutterWidth === 0) {
-    return null
-  }
-  const gutterLeft = effectiveTreeAreaWidth - cladeGutterWidth
-  return (
+  const { fontSize } = model
+  const boxes = cladeLabelBoxes(model)
+  return boxes.length === 0 ? null : (
     <g id="clade-labels">
-      {resolvedClades.map((clade, index) => {
-        const { label, markColor, rows } = clade
-        if (!label || !cladeInGutter(clade)) {
-          return null
-        }
-        const left = gutterLeft + cladeLabelOffset(clade)
-        const top = rows[0] * rowHeight - offsetY
-        const height = cladeHeight(clade, rowHeight)
-        const horizontal = cladeLabelHorizontal(clade, rowHeight, fontSize)
-        const room = horizontal
-          ? effectiveTreeAreaWidth - left - bracketGap
-          : height
-        const x = horizontal ? left : left + fontSize
-        const y = horizontal ? top + height / 2 + fontSize / 3 : top + height
+      {boxes.map(box => {
+        const top = box.top - offsetY
+        const x = box.horizontal ? box.left : box.left + fontSize
+        const y = box.horizontal
+          ? top + box.height / 2 + fontSize / 3
+          : top + box.height
         return (
           <text
-            key={`${rows[0]}-${rows[1]}-${index}`}
+            key={box.key}
             x={x}
             y={y}
-            transform={horizontal ? undefined : `rotate(-90 ${x} ${y})`}
+            transform={box.horizontal ? undefined : `rotate(-90 ${x} ${y})`}
             fontSize={fontSize}
-            fill={markColor ?? theme.palette.text.primary}
+            fill={box.color ?? theme.palette.text.primary}
           >
-            {clipCladeLabel(label, room, fontSize)}
+            {
+              ellipsize(
+                t => measureTextCanvas(t, fontSize),
+                box.label,
+                box.horizontal ? box.width : box.height,
+              ).text
+            }
           </text>
         )
       })}
@@ -464,9 +328,7 @@ function LegendSVG({
   const boxHeight = legendHeight(rows)
   // the column is capped at LEGEND_MAX_W, so a name too long for it has to be
   // clipped here -- text that overruns the reserved width runs off the figure
-  const maxChars = Math.floor(
-    (width - LEGEND_TEXT_X - LEGEND_PAD) / LEGEND_CHAR_W,
-  )
+  const room = width - LEGEND_TEXT_X - LEGEND_PAD
   return (
     <g>
       <rect
@@ -499,9 +361,7 @@ function LegendSVG({
               fontWeight={row.color ? undefined : 'bold'}
               fill={theme.palette.text.primary}
             >
-              {row.label.length > maxChars
-                ? `${row.label.slice(0, Math.max(1, maxChars - 1))}…`
-                : row.label}
+              {ellipsize(t => t.length * LEGEND_CHAR_W, row.label, room).text}
             </text>
           </g>
         )
@@ -551,18 +411,6 @@ function CoreRendering({ model, theme, layout, Context, layers }: LayerProps) {
   const raster = rasterBackground({ model, theme, layout })
 
   const msaCtx = new Context(msaAreaWidth, contentHeight)
-  renderBoxFeatureCanvasBlock({
-    model,
-    theme,
-    ctx: msaCtx,
-    offsetX,
-    offsetY,
-    // the overlay culls bands to this width; without it the export falls back
-    // to the on-screen 500px block size and drops every band past it
-    blockSizeXOverride: msaAreaWidth,
-    blockSizeYOverride: contentHeight,
-    highResScaleFactorOverride: 1,
-  })
   renderMSABlock({
     model,
     theme,
@@ -573,6 +421,7 @@ function CoreRendering({ model, theme, layout, Context, layers }: LayerProps) {
     blockSizeYOverride: contentHeight,
     highResScaleFactorOverride: 1,
     rasterTiles: !!raster,
+    domains: true,
   })
   msaCtx.resetTransform()
   renderPersistentHighlights({
@@ -622,9 +471,8 @@ function CoreRendering({ model, theme, layout, Context, layers }: LayerProps) {
 }
 
 /**
- * The alignment background as a single <image>, under the live canvas's
- * conditions: no domain overlay boxes, background coloring on, and a canvas
- * that reads back.
+ * The alignment background as a single <image>, wherever the live canvas
+ * draws the raster.
  *
  * The vector path's <rect> per cell exhausts the heap on a real alignment. The
  * image is one pixel per cell, and image-rendering keeps the upscaled cell
@@ -640,8 +488,8 @@ function rasterBackground({
   layout: Layout
 }) {
   const { contentHeight, offsetX, offsetY, msaAreaWidth } = layout
-  const { colWidth, rowHeight, actuallyShowDomains, bgColor } = model
-  if (actuallyShowDomains || !bgColor || !rasterSupported()) {
+  const { colWidth, rowHeight } = model
+  if (!rasterApplies(model)) {
     return undefined
   }
   const { xStart, xEnd } = visibleColRange({
@@ -728,7 +576,8 @@ function TrackLabelsSVG({
     const top = turnedOnTracks
       .slice(0, i)
       .reduce((acc, t) => acc + t.model.height, 0)
-    return { id, name, size, baseline: top + height / 2 + size / 3 }
+    // pinned to the top of the track, as the live view's flex row pins it
+    return { id, name, size, baseline: top + size * 0.8 }
   })
   return (
     <>

package/src/rerootTree.ts

@@ -13,19 +13,18 @@ export interface TreeNode {
   children?: TreeNode[]
 }
 
-function preorder<N extends TreeNode>(root: N) {
+export function preorder<N extends TreeNode>(root: N, parents?: Map<N, N>) {
   const order: N[] = []
-  const parents = new Map<N, N>()
   const stack = [root]
   while (stack.length > 0) {
     const node = stack.pop()!
     order.push(node)
     for (const child of (node.children ?? []) as N[]) {
-      parents.set(child, node)
+      parents?.set(child, node)
       stack.push(child)
     }
   }
-  return { order, parents }
+  return order
 }
 
 function hasLengths(order: TreeNode[]) {
@@ -56,7 +55,8 @@ export function rerootTree<N extends TreeNode>(
   target: N,
   offset?: number,
 ): TreeNode {
-  const { order, parents } = preorder(root)
+  const parents = new Map<N, N>()
+  const order = preorder(root, parents)
   if (!parents.has(target)) {
     return root
   }
@@ -112,7 +112,8 @@ export function rerootTree<N extends TreeNode>(
  * counts branches.
  */
 export function midpointRoot<N extends TreeNode>(root: N): TreeNode {
-  const { order, parents } = preorder(root)
+  const parents = new Map<N, N>()
+  const order = preorder(root, parents)
   const tips = order.filter(n => !n.children?.length)
   if (tips.length < 2) {
     return root

package/src/schemeResidueColor.ts

@@ -0,0 +1,37 @@
+import { colord } from 'colord'
+
+import { tileColorFn } from './components/msa/tileColor.ts'
+
+import type { MsaViewModel } from './model.ts'
+
+/**
+ * A reader for the color the active scheme gives a row's residue, as hex, for a
+ * host that paints another view, such as a structure, with the alignment's own
+ * colors. `seqPos` is 1-based, like `structureResidue`. The reader returns
+ * undefined where the scheme leaves the residue uncolored, the row lacks it, or
+ * its column is hidden.
+ *
+ * Build it inside a reaction: a new scheme, a hidden gap column or a collapsed
+ * clade then re-runs the caller.
+ */
+export function schemeResidueColor(model: MsaViewModel) {
+  const colorAt = tileColorFn(model)
+  const { columns } = model
+  const hexes = new Map<string, string | undefined>()
+  const toHex = (color: string) => {
+    if (!hexes.has(color)) {
+      const parsed = colord(color)
+      hexes.set(color, parsed.isValid() ? parsed.toHex() : undefined)
+    }
+    return hexes.get(color)
+  }
+  return (rowName: string, seqPos: number) => {
+    const col = model.seqPosToVisibleCol(rowName, seqPos - 1)
+    const letter = col === undefined ? undefined : columns.get(rowName)?.[col]
+    const color =
+      col === undefined || letter === undefined
+        ? undefined
+        : colorAt(col, letter)
+    return color === undefined ? undefined : toHex(color)
+  }
+}

package/src/similarityColors.ts

@@ -0,0 +1,112 @@
+// Similarity shading, after biotite's plot_alignment_similarity_based and
+// Jalview's BLOSUM62 score scheme. Each residue takes a shade of one hue by how
+// similar it is, on average, to the other residues of its column.
+
+import { BLOSUM62, NUM_SYMBOLS, symbolOfCode } from './blosum62.ts'
+import { letterOfResidueSlot, numResidueSlots } from './columnCounts.ts'
+
+import type { ColumnCounts } from './columnCounts.ts'
+
+const AMINO_ACIDS = 20
+const HUE = 240
+const SATURATION = 50
+const LIGHTEST = 96
+const DARKEST = 40
+
+// BLOSUM62 scaled per row to 0..1 over the twenty amino acids, so a residue's
+// own score is 1 and its worst substitution 0. Not symmetric, like biotite's.
+const normalized = new Float32Array(NUM_SYMBOLS * NUM_SYMBOLS)
+for (let a = 0; a < NUM_SYMBOLS; a++) {
+  let min = Infinity
+  let max = -Infinity
+  for (let b = 0; b < AMINO_ACIDS; b++) {
+    const score = BLOSUM62[a * NUM_SYMBOLS + b]!
+    min = Math.min(min, score)
+    max = Math.max(max, score)
+  }
+  for (let b = 0; b < NUM_SYMBOLS; b++) {
+    const scaled = (BLOSUM62[a * NUM_SYMBOLS + b]! - min) / (max - min)
+    normalized[a * NUM_SYMBOLS + b] = Math.min(Math.max(scaled, 0), 1)
+  }
+}
+
+// residue slot -> row of the matrix, -1 for a letter the matrix does not name
+const symbolOfSlot = Int8Array.from({ length: numResidueSlots }, (_, slot) => {
+  const letter = letterOfResidueSlot(slot)
+  return letter.length === 1 ? symbolOfCode[letter.charCodeAt(0)]! : -1
+})
+
+function shade(similarity: number) {
+  const lightness = Math.round(LIGHTEST - (LIGHTEST - DARKEST) * similarity)
+  return `hsl(${HUE}, ${SATURATION}%, ${lightness}%)`
+}
+
+interface Measure {
+  /** whether a residue counts toward the means at all */
+  counted: (slot: number) => boolean
+  /** whether a residue takes a shade, given it is counted */
+  shaded: (slot: number) => boolean
+  /** similarity of residue `a` to residue `b`, 0..1 */
+  score: (a: number, b: number) => number
+}
+
+/**
+ * Shades each residue of one column by its mean similarity to the column's
+ * other residues, gaps left out of the mean. A column of fewer than two counted
+ * residues has nothing to compare and colors nothing.
+ */
+function shadeColumn(counts: ColumnCounts, col: number, measure: Measure) {
+  const { counted, shaded, score } = measure
+  const present: [slot: number, count: number][] = []
+  let total = 0
+  counts.forEachResidue(col, (slot, count) => {
+    if (counted(slot)) {
+      present.push([slot, count])
+      total += count
+    }
+  })
+
+  const colors: Record<string, string> = {}
+  if (total < 2) {
+    return colors
+  }
+  for (const [a] of present) {
+    if (shaded(a)) {
+      let sum = -score(a, a)
+      for (const [b, count] of present) {
+        sum += count * score(a, b)
+      }
+      colors[letterOfResidueSlot(a)] = shade(sum / (total - 1))
+    }
+  }
+  return colors
+}
+
+const blosum62: Measure = {
+  counted: slot => symbolOfSlot[slot]! >= 0,
+  shaded: slot => symbolOfSlot[slot]! < AMINO_ACIDS,
+  score: (a, b) =>
+    normalized[symbolOfSlot[a]! * NUM_SYMBOLS + symbolOfSlot[b]!]!,
+}
+
+const identity: Measure = {
+  counted: () => true,
+  shaded: () => true,
+  score: (a, b) => (a === b ? 1 : 0),
+}
+
+/**
+ * The amino acids of a column shaded by BLOSUM62 similarity. Letters the matrix
+ * does not name, such as U, O and J, count for nothing and take no shade.
+ */
+export function blosum62ColumnColors(counts: ColumnCounts, col: number) {
+  return shadeColumn(counts, col, blosum62)
+}
+
+/**
+ * Nucleotides and anything else without a substitution matrix: a residue's
+ * similarity is the fraction of the rest of its column that equals it.
+ */
+export function identityColumnColors(counts: ColumnCounts, col: number) {
+  return shadeColumn(counts, col, identity)
+}