react-msaview 6.0.0 → 6.1.1

package/src/components/tree/renderTreeCanvas.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest'
 
 import { calcDepthToLeaf, findMaxBranchLen } from '../../hierarchy.ts'
 import stateModelFactory from '../../model.ts'
+import { ClickMapIndex } from './clickMap.ts'
 import { getNodeX, renderTreeCanvas } from './renderTreeCanvas.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
@@ -174,3 +175,57 @@ describe('renderTreeCanvas horizontal extent', () => {
     expect(model.treeWidth).toBe(model.treeAreaWidth - 10 - model.marginLeft)
   })
 })
+
+describe('node bubble click targets', () => {
+  const bounds = { minX: 0, minY: 0, maxX: 10000, maxY: 10000 }
+
+  // "draw clickable bubbles" only controls the painting; the branches have to
+  // stay clickable with it off
+  function renderWithBubbles(drawNodeBubbles: boolean) {
+    const model = stateModelFactory().create({
+      type: 'MsaView',
+      data: { msa: '>a\nA\n>b\nA\n>c\nA\n>d\nA', tree: '((a,b),(c,d));' },
+    })
+    model.setWidth(1000)
+    model.setDrawLabels(false)
+    model.setDrawNodeBubbles(drawNodeBubbles)
+
+    let arcs = 0
+    const ctx = {
+      font: '12px sans-serif',
+      beginPath() {},
+      stroke() {},
+      fill() {},
+      resetTransform() {},
+      scale() {},
+      translate() {},
+      moveTo() {},
+      lineTo() {},
+      arc() {
+        arcs++
+      },
+    } as unknown as RenderCtx
+
+    const clickMap = new ClickMapIndex()
+    renderTreeCanvas({
+      model,
+      ctx,
+      clickMap,
+      offsetY: 0,
+      theme: { palette: { text: { primary: '#000' } } } as Theme,
+    })
+    return { arcs, hits: clickMap.search(bounds) }
+  }
+
+  it('indexes the internal nodes when the bubbles are drawn', () => {
+    const { arcs, hits } = renderWithBubbles(true)
+    expect(arcs).toBe(3)
+    expect(hits.filter(h => h.branch).length).toBe(3)
+  })
+
+  it('indexes them just the same when the bubbles are off', () => {
+    const { arcs, hits } = renderWithBubbles(false)
+    expect(arcs).toBe(0)
+    expect(hits.filter(h => h.branch).length).toBe(3)
+  })
+})

package/src/components/tree/renderTreeCanvas.ts

@@ -171,6 +171,8 @@ function renderCollapsedTriangles({
   })
 }
 
+// the bubbles are click targets whether or not they are painted, so this pass
+// always runs and `draw` only decides whether it also strokes the circles
 function renderNodeBubbles({
   ctx,
   clickMap,
@@ -180,6 +182,7 @@ function renderNodeBubbles({
   maxDepthToLeaf,
   blockSizeYOverride,
   collapsedSet,
+  draw,
 }: {
   ctx: RenderCtx
   clickMap?: ClickMapIndex
@@ -189,6 +192,7 @@ function renderNodeBubbles({
   maxDepthToLeaf: number
   blockSizeYOverride?: number
   collapsedSet: Set<string>
+  draw: boolean
 }) {
   const {
     hierarchy,
@@ -207,12 +211,14 @@ function renderNodeBubbles({
     const { id, name } = data
     if (node.height >= 1 && inYBlock(y, offsetY, by)) {
       const isCollapsed = collapsedSet.has(id)
-      ctx.strokeStyle = 'black'
-      ctx.fillStyle = isCollapsed ? 'black' : 'white'
-      ctx.beginPath()
-      ctx.arc(x, y, radius, 0, 2 * Math.PI)
-      ctx.fill()
-      ctx.stroke()
+      if (draw) {
+        ctx.strokeStyle = 'black'
+        ctx.fillStyle = isCollapsed ? 'black' : 'white'
+        ctx.beginPath()
+        ctx.arc(x, y, radius, 0, 2 * Math.PI)
+        ctx.fill()
+        ctx.stroke()
+      }
 
       // collapsed nodes get their click/hover target from the triangle pass,
       // which covers the apex bubble and carries a descriptive label
@@ -264,6 +270,7 @@ function renderTreeLabels({
     marginLeft,
     noTree,
     labelWidthMap,
+    labelWidthScale,
   } = model
   const by = blockSizeYOverride ?? blockSize
   // labels only exist for leaves, which are laid out top to bottom, so take the
@@ -295,8 +302,11 @@ function renderTreeLabels({
         xp = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf) ?? 0
       }
 
+      const measured = labelWidthMap.get(name)
       const width =
-        labelWidthMap.get(name) ?? ctx.measureText(displayName).width
+        measured === undefined
+          ? ctx.measureText(displayName).width
+          : measured * labelWidthScale
 
       ctx.fillStyle = theme.palette.text.primary
       if (labelsAlignRight) {
@@ -413,18 +423,17 @@ export function renderTreeCanvas({
       collapsedSet,
     })
 
-    if (drawNodeBubbles) {
-      renderNodeBubbles({
-        ctx,
-        offsetY,
-        clickMap,
-        model,
-        tipX,
-        maxDepthToLeaf,
-        blockSizeYOverride,
-        collapsedSet,
-      })
-    }
+    renderNodeBubbles({
+      ctx,
+      offsetY,
+      clickMap,
+      model,
+      tipX,
+      maxDepthToLeaf,
+      blockSizeYOverride,
+      collapsedSet,
+      draw: drawNodeBubbles,
+    })
   }
 
   if (showTreeText) {

package/src/constants.ts

@@ -31,6 +31,16 @@ export const segmentShades = ['#9fb6d4', '#d4dcea']
 export const defaultDrawMsaLetters = true
 export const defaultScrollZoom = false
 
+// Cell size floors for drawing residue letters and tree labels. Below these a
+// 500px block holds thousands of glyphs, and fillText -- which no sprite atlas
+// beats, measured -- dominates every zoom frame.
+export const minLetterRowHeight = 8
+export const minLetterColWidth = 5
+
+// Tree labels are measured once at this size and scaled to the current font
+// size, so a vertical zoom never re-measures the tree.
+export const labelReferenceFontSize = 16
+
 // Zoom limits, px per cell. maxCellSize caps both smooth zoom and the stepwise
 // zoom-in buttons (which otherwise grow unbounded). minColWidth/minRowHeight are
 // the smooth-zoom floors.

package/src/impgRender.test.tsx

@@ -12,67 +12,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()
 })
 
 // representative `impg query -o fasta-aln` block: PanSN names with region

package/src/largeTree.test.ts

@@ -26,8 +26,9 @@ test('a tree far past the argument limit still lays out', () => {
   model.setWidth(1000)
 
   expect(model.numRows).toBe(200_000)
-  // 's199999' is the longest name, at 7 chars * 7px
-  expect(model.labelsWidth).toBe(49)
+  // 's199999' is the longest name, at 7 chars * 7px, scaled from the reference
+  // font size the labels are measured at down to the current one (13/16)
+  expect(model.labelsWidth).toBeCloseTo((49 * 13) / 16)
   expect(model.treeWidth).toBeGreaterThan(0)
 })
 
@@ -51,3 +52,16 @@ test('re-hovering the same tree node does not re-walk the tree', () => {
   model.setHoveredTreeNode(undefined)
   expect(model.hoveredTreeNode).toBeUndefined()
 })
+
+test('a vertical zoom does not re-measure every label', () => {
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    data: { tree: flatNewick(200_000) },
+  })
+  model.setWidth(1000)
+
+  const before = model.labelWidthMap
+  model.setRowHeight(24)
+  expect(model.labelWidthMap).toBe(before)
+  expect(model.labelsWidth).toBeCloseTo((49 * 18) / 16)
+})

package/src/model/DataModel.ts

@@ -53,15 +53,15 @@ export function DataModelF() {
         self.gff = gff
       },
     }))
-    .postProcessSnapshot(snap => {
-      const { tree, msa, treeMetadata, gff } = snap
-      const max = 50_000
-      return {
-        tree: tree && tree.length > max ? undefined : tree,
-        msa: msa && msa.length > max ? undefined : msa,
-        treeMetadata:
-          treeMetadata && treeMetadata.length > max ? undefined : treeMetadata,
-        gff: gff && gff.length > max ? undefined : gff,
-      }
-    })
+    .postProcessSnapshot(snap =>
+      // a large document is dropped from the snapshot rather than inlined
+      // into a session or a shared URL, and every field here holds one, so
+      // the rule is the same for all of them
+      Object.fromEntries(
+        Object.entries(snap).map(([key, text]) => [
+          key,
+          text && text.length > 50_000 ? undefined : text,
+        ]),
+      ),
+    )
 }

package/src/model/treeModel.ts

@@ -56,7 +56,7 @@ export function TreeModelF() {
 
       /**
        * #property
-       * draw clickable node bubbles on the tree
+       * draw node bubbles on the tree; the branches stay clickable either way
        */
       drawNodeBubbles: stripDefault(types.boolean, defaultDrawNodeBubbles),
 

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
        */