react-msaview 6.0.0 → 6.1.0

package/src/model.ts

@@ -18,8 +18,7 @@ import { calculateBlocks } from './calculateBlocks.ts'
 import { clustalXColumnColors } from './clustalX.ts'
 import colorSchemes from './colorSchemes.ts'
 import { columnCountsFromRows, letterOfResidueSlot } from './columnCounts.ts'
-import ConservationTrack from './components/ConservationTrack.tsx'
-import TextTrack from './components/TextTrack.tsx'
+import TrackBlocks from './components/tracks/TrackBlocks.tsx'
 import {
   defaultAllowedGappyness,
   defaultColWidth,
@@ -35,8 +34,11 @@ import {
   defaultShowDomainLegend,
   defaultShowDomains,
   defaultSubFeatureRows,
+  labelReferenceFontSize,
   maxCellSize,
   minColWidth,
+  minLetterColWidth,
+  minLetterRowHeight,
   minRowHeight,
   segmentFeatureTypes,
   segmentShades,
@@ -75,6 +77,7 @@ import {
   visibleColsBefore,
 } from './rowCoordinateCalculations.ts'
 import { buildSeqPosIndex } from './seqPosToGlobalCol.ts'
+import { maxBitsFor } from './sequenceLogo.ts'
 import { stripDefault } from './stripDefault.ts'
 import { computeRowInsertions, len, skipBlanks, transform } from './util.ts'
 import { saveAs } from './vendor/fileSaver.ts'
@@ -99,6 +102,22 @@ function parseTreeText(text: string) {
   return parseNewick(text.startsWith('SEQ') ? parseEmfTree(text).tree : text)
 }
 
+// Tracks that start hidden. The sequence logo answers a narrower question than
+// conservation does and costs three times the vertical space, so it waits to be
+// asked for.
+const defaultOffTracks = new Set(['sequence-logo'])
+
+// `turnedOffTracks` records the user's explicit choices only: an id is absent
+// until they touch that track, and then its value is whether the track is OFF.
+// Reading the default through this is what lets a track ship hidden without
+// writing an entry into every snapshot and shared URL.
+function trackIsOff(
+  turnedOffTracks: { get: (id: string) => boolean | undefined },
+  id: string,
+) {
+  return turnedOffTracks.get(id) ?? defaultOffTracks.has(id)
+}
+
 /**
  * #stateModel MsaView
  *
@@ -249,7 +268,10 @@ function stateModelFactory() {
         showOnly: types.maybe(types.string),
         /**
          * #property
-         * turned off tracks
+         * the user's explicit show/hide choice per track id, keyed by id with
+         * the value meaning "off". A track the user has never touched is absent
+         * and falls back to its own default (see `defaultOffTracks`), so a
+         * hidden-by-default track adds nothing to the shared URL.
          */
         turnedOffTracks: stripDefault(types.map(types.boolean), {}),
 
@@ -375,6 +397,14 @@ function stateModelFactory() {
        */
       conservationTrackHeight: 40,
 
+      /**
+       * #volatile
+       * taller than the conservation track by default: the logo spends its
+       * height on stacked glyphs, and a 40px stack of four residues leaves each
+       * one too short to identify
+       */
+      sequenceLogoTrackHeight: 80,
+
       /**
        * #volatile
        */
@@ -1036,27 +1066,25 @@ function stateModelFactory() {
        * Returns values 0-1 where 1 = fully conserved, 0 = no conservation.
        */
       get conservation() {
-        const { colStats, sequenceType } = this
-        const alphabetSize = sequenceType === 'amino' ? 20 : 4
-        const maxEntropy = Math.log2(alphabetSize)
-
+        const { colStats, alphabetMaxBits } = this
         return Array.from({ length: colStats.numColumns }, (_, col) => {
           const total = colStats.total(col)
           const gapCount = colStats.gapCount(col)
-          const nonGapTotal = total - gapCount
-          let score = 0
-          if (nonGapTotal > 0) {
-            let entropy = 0
-            colStats.forEachResidue(col, (_slot, count) => {
-              const freq = count / nonGapTotal
-              entropy -= freq * Math.log2(freq)
-            })
-            score =
-              Math.max(0, 1 - entropy / maxEntropy) * (1 - gapCount / total)
-          }
-          return score
+          return total > gapCount
+            ? Math.max(0, 1 - colStats.entropy(col) / alphabetMaxBits) *
+                (1 - gapCount / total)
+            : 0
         })
       },
+      /**
+       * #getter
+       * The information content of a fully conserved column, in bits, which
+       * depends on the alphabet. Both the entropy ceiling `conservation`
+       * normalizes against and the y-axis ceiling of the sequence logo track.
+       */
+      get alphabetMaxBits() {
+        return maxBitsFor(this.sequenceType)
+      },
       /**
        * #getter
        * Per-column conservation of physicochemical property class (amino acids
@@ -1168,12 +1196,24 @@ function stateModelFactory() {
        */
       get blocksY() {
         return calculateBlocks({
-          viewportSize: self.height,
+          viewportSize: this.visibleMsaHeight,
           viewportPos: -self.scrollY,
           blockSize: self.blockSize,
           mapSize: self.totalHeight,
         })
       },
+      /**
+       * #getter
+       * height of the alignment viewport, px. The same subtraction as
+       * msaAreaHeight, which is defined later in the views chain
+       */
+      get visibleMsaHeight() {
+        return (
+          self.height -
+          self.headerHeight -
+          (self.msaAreaWidth < self.totalWidth ? self.minimapHeight : 0)
+        )
+      },
     }))
     .views(self => ({
       /**
@@ -1200,15 +1240,10 @@ function stateModelFactory() {
       /**
        * #getter
        * most-negative allowed scrollY, keeping the last row in view rather than
-       * letting the whole alignment scroll off the top. visible MSA height is
-       * computed inline here because msaAreaHeight is defined later in the chain.
+       * letting the whole alignment scroll off the top.
        */
       get maxScrollY() {
-        const visibleHeight =
-          self.height -
-          self.headerHeight -
-          (self.msaAreaWidth < self.totalWidth ? self.minimapHeight : 0)
-        return Math.min(-self.totalHeight + visibleHeight, 0)
+        return Math.min(-self.totalHeight + self.visibleMsaHeight, 0)
       },
       /**
        * #getter
@@ -1216,7 +1251,8 @@ function stateModelFactory() {
       get showMsaLetters() {
         return (
           self.drawMsaLetters &&
-          self.rowHeight >= 5 &&
+          self.rowHeight >= minLetterRowHeight &&
+          self.colWidth >= minLetterColWidth &&
           self.colWidth > self.rowHeight / 2
         )
       },
@@ -1224,7 +1260,7 @@ function stateModelFactory() {
        * #getter
        */
       get showTreeText() {
-        return self.drawLabels && self.rowHeight >= 5
+        return self.drawLabels && self.rowHeight >= minLetterRowHeight
       },
     }))
     .actions(self => ({
@@ -1437,11 +1473,9 @@ function stateModelFactory() {
        * #action
        */
       toggleTrack(id: string) {
-        if (self.turnedOffTracks.has(id)) {
-          self.turnedOffTracks.delete(id)
-        } else {
-          self.turnedOffTracks.set(id, true)
-        }
+        // the stored value is "is off", so the current shown state is exactly
+        // what the flipped entry should hold
+        self.turnedOffTracks.set(id, !trackIsOff(self.turnedOffTracks, id))
       },
       /**
        * #action
@@ -1455,10 +1489,13 @@ function stateModelFactory() {
        * #getter
        */
       get labelWidthMap() {
-        const { showTreeText, leaves, treeMetadata, fontSize } = self
+        const { showTreeText, leaves, treeMetadata } = self
         // gated on the same condition the renderer draws labels under, so the
         // gutter labelsWidth reserves and the labels actually drawn cannot
-        // disagree -- and so turning labels off hands their space to the tree
+        // disagree -- and so turning labels off hands their space to the tree.
+        // Measured at a fixed reference size and scaled by labelWidthScale:
+        // re-measuring every leaf on every vertical-zoom frame cost ~200ms on a
+        // 50k-leaf tree
         return showTreeText
           ? new Map(
               leaves.map(node => {
@@ -1467,12 +1504,24 @@ function stateModelFactory() {
                 // to the row name, and measuring '' would size the gutter (and
                 // the label's click target) to nothing
                 const displayName = treeMetadata[name]?.genome || name
-                return [name, measureTextCanvas(displayName, fontSize)] as const
+                return [
+                  name,
+                  measureTextCanvas(displayName, labelReferenceFontSize),
+                ] as const
               }),
             )
           : new Map<string, number>()
       },
 
+      /**
+       * #getter
+       * factor turning a labelWidthMap entry into its width at the current
+       * font size
+       */
+      get labelWidthScale() {
+        return self.fontSize / labelReferenceFontSize
+      },
+
       get labelsWidth() {
         // a loop, not Math.max(...widths.values()): spreading a map of every
         // leaf passes one argument per row, and the argument limit is somewhere
@@ -1485,7 +1534,7 @@ function stateModelFactory() {
             max = width
           }
         }
-        return max
+        return max * this.labelWidthScale
       },
 
       /**
@@ -1513,10 +1562,11 @@ function stateModelFactory() {
           .map(t => ({
             model: {
               ...t,
+              kind: 'text' as const,
               data: hideGapsEffective ? skipBlanks(blanks, t.data!) : t.data,
               height: rowHeight,
             },
-            ReactComponent: TextTrack,
+            ReactComponent: TrackBlocks,
           }))
       },
 
@@ -1524,28 +1574,35 @@ function stateModelFactory() {
        * #getter
        */
       get tracks(): BasicTrack[] {
-        const conservationTrack: BasicTrack = {
-          model: {
-            id: 'conservation',
-            name: 'Conservation',
-            height: self.conservationTrackHeight,
-            barColor: 'gray',
-          },
-          ReactComponent: ConservationTrack,
+        const conservationTrack = {
+          id: 'conservation',
+          name: 'Conservation',
+          kind: 'bar' as const,
+          height: self.conservationTrackHeight,
+          barColor: 'gray',
         }
-        const propertyConservationTrack: BasicTrack = {
-          model: {
-            id: 'property-conservation',
-            name: 'Property conservation',
-            height: self.conservationTrackHeight,
-            barColor: '#6a51a3',
-          },
-          ReactComponent: ConservationTrack,
+        const propertyConservationTrack = {
+          id: 'property-conservation',
+          name: 'Property conservation',
+          kind: 'bar' as const,
+          height: self.conservationTrackHeight,
+          barColor: '#6a51a3',
+        }
+        const sequenceLogoTrack = {
+          id: 'sequence-logo',
+          name: 'Sequence logo',
+          kind: 'logo' as const,
+          height: self.sequenceLogoTrackHeight,
         }
         return [
           ...this.adapterTrackModels,
-          conservationTrack,
-          ...(self.sequenceType === 'amino' ? [propertyConservationTrack] : []),
+          ...[
+            conservationTrack,
+            ...(self.sequenceType === 'amino'
+              ? [propertyConservationTrack]
+              : []),
+            sequenceLogoTrack,
+          ].map(model => ({ model, ReactComponent: TrackBlocks })),
         ]
       },
 
@@ -1553,7 +1610,9 @@ function stateModelFactory() {
        * #getter
        */
       get turnedOnTracks() {
-        return this.tracks.filter(f => !self.turnedOffTracks.has(f.model.id))
+        return this.tracks.filter(
+          f => !trackIsOff(self.turnedOffTracks, f.model.id),
+        )
       },
 
       /**
@@ -1810,11 +1869,11 @@ function stateModelFactory() {
        * needs to keep residues readable on top of the boxes.
        */
       get domainBands() {
+        const { blanks } = self
         const bands = new Map<string, DomainBand[]>()
         for (const [name, annotations] of Object.entries(
           self.annotationsByRow,
         )) {
-          const { blanks } = self
           const rowBands = annotations
             .toSorted((a, b) => len(b) - len(a))
             .map(annotation => {
@@ -1942,8 +2001,11 @@ function stateModelFactory() {
           return undefined
         }
         const { colStats } = self
+        if (mouseCol >= colStats.numColumns) {
+          return undefined
+        }
         const total = colStats.total(mouseCol)
-        if (mouseCol >= colStats.numColumns || !total) {
+        if (!total) {
           return undefined
         }
         const gaps = colStats.gapCount(mouseCol)
@@ -1988,6 +2050,12 @@ function stateModelFactory() {
       setConservationTrackHeight(arg: number) {
         self.conservationTrackHeight = arg
       },
+      /**
+       * #action
+       */
+      setSequenceLogoTrackHeight(arg: number) {
+        self.sequenceLogoTrackHeight = arg
+      },
       /**
        * #action
        */

package/src/neighborJoining.ts

@@ -31,25 +31,43 @@ const BLOSUM62_DATA = [
   [-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 BLOSUM62 = new Map<string, Map<string, number>>()
-for (let i = 0; i < BLOSUM62_KEYS.length; i++) {
-  const row = new Map<string, number>()
-  for (let j = 0; j < BLOSUM62_KEYS.length; j++) {
-    row.set(BLOSUM62_KEYS[j]!, BLOSUM62_DATA[i]![j]!)
-  }
-  BLOSUM62.set(BLOSUM62_KEYS[i]!, row)
+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.
+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
 }
 
-function getBlosum62Score(a: string, b: string) {
-  return BLOSUM62.get(a.toUpperCase())?.get(b.toUpperCase()) ?? -4
-}
+// 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.
-function isGap(c: string) {
-  return c === '-' || c === '.'
+function symbolAt(seq: string, i: number) {
+  if (i >= seq.length) {
+    return GAP
+  }
+  const code = seq.charCodeAt(i)
+  // bit trick: (code - 45) >>> 0 <= 1 checks for '-' (45) or '.' (46)
+  if ((code - 45) >>> 0 <= 1) {
+    return GAP
+  }
+  return code < 128 ? symbolOfCode[code]! : -1
+}
+
+function blosumScore(a: number, b: number) {
+  return a < 0 || b < 0 ? -4 : BLOSUM62[a * NUM_SYMBOLS + b]!
 }
 
 function computePairwiseDistance(seq1: string, seq2: string) {
@@ -63,11 +81,11 @@ function computePairwiseDistance(seq1: string, seq2: string) {
   let maxPossibleScore = 0
 
   for (let i = 0; i < len; i++) {
-    const a = seq1[i] ?? '-'
-    const b = seq2[i] ?? '-'
+    const a = symbolAt(seq1, i)
+    const b = symbolAt(seq2, i)
 
-    const aGap = isGap(a)
-    const bGap = isGap(b)
+    const aGap = a === GAP
+    const bGap = b === GAP
     if (aGap && bGap) {
       continue
     }
@@ -77,8 +95,8 @@ function computePairwiseDistance(seq1: string, seq2: string) {
       continue
     }
 
-    totalScore += getBlosum62Score(a, b)
-    maxPossibleScore += Math.max(getBlosum62Score(a, a), getBlosum62Score(b, b))
+    totalScore += blosumScore(a, b)
+    maxPossibleScore += Math.max(blosumScore(a, a), blosumScore(b, b))
   }
 
   if (compared === 0) {

package/src/renderDomainsSvg.test.tsx

@@ -9,67 +9,12 @@ import { enableStaticRendering } from 'mobx-react'
 import { beforeAll, expect, test } from 'vitest'
 
 import MSAModelF from './model.ts'
+import { installRenderTestEnv } from './renderTestEnv.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
+  installRenderTestEnv()
 })
 
 const msa = `>seq1

package/src/renderMinimapSvg.test.tsx

@@ -9,66 +9,12 @@ import { enableStaticRendering } from 'mobx-react'
 import { beforeAll, expect, test } from 'vitest'
 
 import MSAModelF from './model.ts'
+import { installRenderTestEnv } from './renderTestEnv.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) => ({
-        width: t.length * (Number.parseFloat(font) || 10) * 0.6,
-      }),
-    } as unknown as CanvasRenderingContext2D
-  } as unknown as typeof HTMLCanvasElement.prototype.getContext
+  installRenderTestEnv()
 })
 
 const width = 1000