react-msaview 6.0.0 → 6.1.1

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

package/src/renderSequenceLogoSvg.test.tsx

@@ -0,0 +1,176 @@
+// @vitest-environment jsdom
+//
+// The logo track is the first track kind whose letters are drawn under a
+// per-letter transform rather than at a fixed size, so it is also the first that
+// can silently draw nothing if the export context loses that transform. These
+// tests go through the real SVG export to pin the whole path: the track is off
+// until asked for, the stack is ordered and scaled, and the glyphs land inside
+// the track's own band.
+import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
+import { enableStaticRendering } from 'mobx-react'
+import { beforeAll, expect, test } from 'vitest'
+
+import MSAModelF from './model.ts'
+import { TEST_CHAR_WIDTH_RATIO, installRenderTestEnv } from './renderTestEnv.ts'
+import { renderToSvg } from './renderToSvg.tsx'
+
+beforeAll(() => {
+  enableStaticRendering(true)
+  installRenderTestEnv()
+})
+
+// column 0 is fully conserved A, column 1 is a 3:1 split of C over G, and
+// column 2 is an even four-way split carrying no information at all
+const msa = `>s1\nACA\n>s2\nACC\n>s3\nACG\n>s4\nAGT\n`
+const colWidth = 40
+
+function makeModel() {
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    msaFormat: 'fasta',
+    height: 400,
+    colWidth,
+    data: { msa },
+  })
+  model.setWidth(1000)
+  return model
+}
+
+async function exportSvg(model: ReturnType<typeof makeModel>) {
+  return renderToSvg(model, {
+    theme: createJBrowseTheme(),
+    exportType: 'entire',
+    includeTracks: true,
+  })
+}
+
+// The logo's glyphs are the only <text> drawn at the track's own font size, and
+// the only ones carrying a non-unit vertical scale, which is what separates them
+// from the alignment letters and tree labels in the same document.
+function logoGlyphs(svg: string, fontSize: number) {
+  return [
+    ...svg.matchAll(
+      /<text[^>]*font-size="([\d.]+)px"[^>]*transform="matrix\(([^)]*)\)"[^>]*>([A-Z])<\/text>/g,
+    ),
+  ]
+    .filter(m => Number(m[1]) === fontSize)
+    .map(m => {
+      const [sx, , , sy, tx, ty] = m[2]!.split(/[\s,]+/).map(Number)
+      return { letter: m[3]!, sx: sx!, sy: sy!, x: tx!, y: ty! }
+    })
+}
+
+async function glyphsOf(model: ReturnType<typeof makeModel>) {
+  return logoGlyphs(await exportSvg(model), model.sequenceLogoTrackHeight)
+}
+
+test('the logo track is hidden until it is asked for', () => {
+  const model = makeModel()
+  expect(model.tracks.map(t => t.model.id)).toContain('sequence-logo')
+  expect(model.turnedOnTracks.map(t => t.model.id)).not.toContain(
+    'sequence-logo',
+  )
+  // and being default-off writes nothing into the shareable snapshot
+  expect(model.turnedOffTracks.size).toBe(0)
+})
+
+test('toggling it on shows it, and off again hides it', () => {
+  const model = makeModel()
+  model.toggleTrack('sequence-logo')
+  expect(model.turnedOnTracks.map(t => t.model.id)).toContain('sequence-logo')
+  model.toggleTrack('sequence-logo')
+  expect(model.turnedOnTracks.map(t => t.model.id)).not.toContain(
+    'sequence-logo',
+  )
+})
+
+test('an on-by-default track still toggles off and back on', () => {
+  const model = makeModel()
+  expect(model.turnedOnTracks.map(t => t.model.id)).toContain('conservation')
+  model.toggleTrack('conservation')
+  expect(model.turnedOnTracks.map(t => t.model.id)).not.toContain(
+    'conservation',
+  )
+  model.toggleTrack('conservation')
+  expect(model.turnedOnTracks.map(t => t.model.id)).toContain('conservation')
+})
+
+test('the conserved column draws one full-height letter', async () => {
+  const model = makeModel()
+  model.toggleTrack('sequence-logo')
+  const col0 = (await glyphsOf(model)).filter(g => g.x === 0)
+
+  expect(col0.map(g => g.letter)).toEqual(['A'])
+  // a fully conserved nucleotide column is 2 of 2 bits, so the glyph stretches
+  // to the whole track height over the cap height of the reference font
+  expect(col0[0]!.sy).toBeCloseTo(1 / 0.72, 5)
+})
+
+test('a split column stacks the minor letter below the major one', async () => {
+  const model = makeModel()
+  model.toggleTrack('sequence-logo')
+  const col1 = (await glyphsOf(model)).filter(g => g.x === colWidth)
+
+  // ascending order means C (3 of 4) is drawn last, so it ends up on top
+  expect(col1.map(g => g.letter)).toEqual(['G', 'C'])
+  const [g, c] = col1
+  expect(c!.sy).toBeGreaterThan(g!.sy)
+  // and the taller letter sits higher up the track (smaller y is nearer the top)
+  expect(c!.y).toBeLessThan(g!.y)
+})
+
+test('the uninformative column draws nothing', async () => {
+  const model = makeModel()
+  model.toggleTrack('sequence-logo')
+  const glyphs = await glyphsOf(model)
+  expect(glyphs.filter(g => g.x === colWidth * 2)).toEqual([])
+  // the other two columns did draw, so an empty column 2 is the logo's own
+  // verdict rather than the whole track missing
+  expect(glyphs).toHaveLength(3)
+})
+
+test('every glyph stays inside the track band', async () => {
+  const model = makeModel()
+  model.toggleTrack('sequence-logo')
+
+  // the export stacks the tracks, so the logo's band is offset by whatever is
+  // drawn above it -- assert against that band rather than against 0..height,
+  // which would pass only while the logo happened to be the first track
+  const above = model.turnedOnTracks
+    .slice(
+      0,
+      model.turnedOnTracks.findIndex(t => t.model.id === 'sequence-logo'),
+    )
+    .reduce((a, t) => a + t.model.height, 0)
+  const bandTop = above
+  const bandBottom = above + model.sequenceLogoTrackHeight
+
+  const glyphs = await glyphsOf(model)
+  expect(glyphs.length).toBeGreaterThan(0)
+  for (const glyph of glyphs) {
+    // baselines run from the band's bottom edge upward, never past either end
+    expect(glyph.y).toBeGreaterThan(bandTop)
+    expect(glyph.y).toBeLessThanOrEqual(bandBottom)
+  }
+})
+
+test('letters are stretched to fill their column', async () => {
+  const model = makeModel()
+  model.toggleTrack('sequence-logo')
+  const glyphs = await glyphsOf(model)
+
+  const expected =
+    colWidth / (model.sequenceLogoTrackHeight * TEST_CHAR_WIDTH_RATIO)
+  for (const glyph of glyphs) {
+    expect(glyph.sx).toBeCloseTo(expected, 5)
+  }
+})
+
+test('the logo appears in the export only when the track is on', async () => {
+  const off = makeModel()
+  expect(await glyphsOf(off)).toEqual([])
+
+  const on = makeModel()
+  on.toggleTrack('sequence-logo')
+  expect((await glyphsOf(on)).length).toBeGreaterThan(0)
+})

package/src/renderTestEnv.ts

@@ -0,0 +1,96 @@
+/**
+ * jsdom shims for the SVG-export tests. Test-only -- nothing in the viewer
+ * imports this.
+ *
+ * jsdom implements neither DOMMatrix nor a canvas 2D context, and
+ * `@jbrowse/svgcanvas` needs both: it tracks the current transform as a real
+ * matrix, and the renderers ask a throwaway canvas to measure text.
+ *
+ * The matrix stub has to accept the ARRAY constructor. svgcanvas normalizes
+ * every transform through `new DOMMatrix([a, b, c, d, e, f])`, so a stub that
+ * only takes six positional arguments silently binds the whole array to `a` and
+ * leaves the rest undefined -- every emitted transform then carries `NaN` in its
+ * x components, which no assertion on a drawn x-position can survive.
+ */
+export class TestDOMMatrix {
+  a: number
+  b: number
+  c: number
+  d: number
+  e: number
+  f: number
+
+  constructor(init?: number[]) {
+    const [a = 1, b = 0, c = 0, d = 1, e = 0, f = 0] = init ?? []
+    this.a = a
+    this.b = b
+    this.c = c
+    this.d = d
+    this.e = e
+    this.f = f
+  }
+
+  multiply(o: TestDOMMatrix) {
+    return new TestDOMMatrix([
+      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 TestDOMMatrix([1, 0, 0, 1, x, y]))
+  }
+
+  scale(x: number, y = x) {
+    return this.multiply(new TestDOMMatrix([x, 0, 0, y, 0, 0]))
+  }
+}
+
+export class TestDOMPoint {
+  constructor(
+    public x = 0,
+    public y = 0,
+  ) {}
+
+  matrixTransform(m: TestDOMMatrix) {
+    return new TestDOMPoint(
+      m.a * this.x + m.c * this.y + m.e,
+      m.b * this.x + m.d * this.y + m.f,
+    )
+  }
+}
+
+/**
+ * Install the shims. Call from `beforeAll` in any test that exports SVG.
+ *
+ * `measureText` reports 0.6em per character, close enough to a real sans-serif
+ * average for layout assertions and, more usefully, exactly predictable: a test
+ * can compute the width a renderer will see rather than hardcoding a number
+ * measured from one machine's fonts.
+ */
+export function installRenderTestEnv() {
+  const g = globalThis as Record<string, unknown>
+  g.DOMMatrix = TestDOMMatrix
+  g.DOMPoint = TestDOMPoint
+  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
+}
+
+/** the per-character width factor `measureText` above reports */
+export const TEST_CHAR_WIDTH_RATIO = 0.6

package/src/renderToSvg.tsx

@@ -7,7 +7,7 @@ import { when } from 'mobx'
 import MinimapSVG from './components/minimap/MinimapSVG.tsx'
 import { renderBoxFeatureCanvasBlock } from './components/msa/renderBoxFeatureCanvasBlock.ts'
 import { renderMSABlock } from './components/msa/renderMSABlock.ts'
-import { renderAllTracks } from './components/tracks/renderTracksSvg.ts'
+import { renderAllTracks } from './components/tracks/drawTracks.ts'
 import { renderTreeCanvas } from './components/tree/renderTreeCanvas.ts'
 import { colorContrast } from './util.ts'
 

package/src/sequenceLogo.test.ts

@@ -0,0 +1,88 @@
+import { expect, test } from 'vitest'
+
+import { columnCountsFromColumns } from './columnCounts.ts'
+import { columnLogoStack, maxBitsFor } from './sequenceLogo.ts'
+
+const dnaBits = maxBitsFor('dna')
+const aminoBits = maxBitsFor('amino')
+
+function stackOf(column: string, maxBits = dnaBits) {
+  return columnLogoStack(columnCountsFromColumns([column]), 0, maxBits)
+}
+
+test('maxBits is log2 of the alphabet', () => {
+  expect(maxBitsFor('dna')).toBe(2)
+  expect(maxBitsFor('rna')).toBe(2)
+  expect(maxBitsFor('amino')).toBeCloseTo(4.3219, 4)
+})
+
+test('a fully conserved column is one letter at the full height', () => {
+  const stack = stackOf('AAAA')
+  expect(stack).toHaveLength(1)
+  expect(stack[0]!.letter).toBe('A')
+  expect(stack[0]!.bits).toBeCloseTo(2, 10)
+})
+
+test('an even four-way column carries no information', () => {
+  expect(stackOf('ACGT')).toEqual([])
+})
+
+test('a two-way split is half the height, shared evenly', () => {
+  const stack = stackOf('AACC')
+  expect(stack.map(s => s.letter)).toEqual(['A', 'C'])
+  // entropy 1 bit, so information content is 2 - 1 = 1, split evenly
+  expect(stack[0]!.bits).toBeCloseTo(0.5, 10)
+  expect(stack[1]!.bits).toBeCloseTo(0.5, 10)
+})
+
+test('letters are ordered ascending so the tallest draws last, on top', () => {
+  const stack = stackOf('AAAC')
+  expect(stack.map(s => s.letter)).toEqual(['C', 'A'])
+  expect(stack[0]!.bits).toBeLessThan(stack[1]!.bits)
+})
+
+test('ties break on letter so redraws are stable', () => {
+  expect(stackOf('GGCC').map(s => s.letter)).toEqual(['C', 'G'])
+  expect(stackOf('CCGG').map(s => s.letter)).toEqual(['C', 'G'])
+})
+
+test('gaps scale the stack down without skewing the frequencies', () => {
+  // 'A' is the only residue, so it takes the whole stack either way; the height
+  // is what the gaps change
+  const clean = stackOf('AAAA')
+  const gappy = stackOf('AA--')
+  expect(gappy[0]!.letter).toBe('A')
+  expect(gappy[0]!.bits).toBeCloseTo(clean[0]!.bits / 2, 10)
+})
+
+test('gaps do not make a two-residue column look like a four-way one', () => {
+  // frequencies come from the two real residues, so this is a 1-bit choice
+  // scaled by the half-gap occupancy, not a 4-way split
+  const stack = stackOf('AC--')
+  expect(stack.map(s => s.letter)).toEqual(['A', 'C'])
+  expect(stack[0]!.bits + stack[1]!.bits).toBeCloseTo(0.5, 10)
+})
+
+test('an all-gap column has no stack', () => {
+  expect(stackOf('----')).toEqual([])
+  expect(stackOf('....')).toEqual([])
+})
+
+test('the protein ceiling is higher than the nucleotide one', () => {
+  const protein = stackOf('WWWW', aminoBits)
+  expect(protein[0]!.bits).toBeCloseTo(aminoBits, 10)
+  expect(protein[0]!.bits).toBeGreaterThan(stackOf('AAAA')[0]!.bits)
+})
+
+test('stack height never exceeds the ceiling', () => {
+  const columns = ['AAAA', 'AACG', 'A-C-', 'ACGT', 'AAAT']
+  for (const column of columns) {
+    const total = stackOf(column).reduce((a, b) => a + b.bits, 0)
+    expect(total).toBeLessThanOrEqual(dnaBits + 1e-9)
+  }
+})
+
+test('a column past the end of a ragged alignment is empty, not a crash', () => {
+  const counts = columnCountsFromColumns(['AC'])
+  expect(columnLogoStack(counts, 5, dnaBits)).toEqual([])
+})

package/src/sequenceLogo.ts

@@ -0,0 +1,63 @@
+import { letterOfResidueSlot } from './columnCounts.ts'
+
+import type { ColumnCounts } from './columnCounts.ts'
+
+export interface LogoLetter {
+  letter: string
+  /** height of this letter's slice of the stack, in bits */
+  bits: number
+}
+
+/** the y-axis ceiling of a logo: the information content of a fully conserved
+ * column, log2 of the alphabet size */
+export function maxBitsFor(sequenceType: 'dna' | 'rna' | 'amino') {
+  return Math.log2(sequenceType === 'amino' ? 20 : 4)
+}
+
+/**
+ * One column of a sequence logo, tallest letter last so a caller can draw the
+ * stack bottom-up in array order.
+ *
+ * Heights follow Schneider & Stephens: the column's information content is
+ * `log2(alphabet) - H` bits, and each residue takes the share of that its own
+ * frequency earns. Frequencies come from the non-gap residues only, so a column
+ * of two residues and eight gaps is read as a two-way choice rather than a
+ * ten-way one -- otherwise every gappy column would look uninformative for the
+ * wrong reason.
+ *
+ * The whole stack is then scaled by the non-gap fraction, which plain WebLogo
+ * does not do. Here it earns its place: the track sits directly under an
+ * alignment where the gaps are visible, and a column that is 90% gap drawing a
+ * full-height stack off its one remaining pair of residues reads as a conserved
+ * site. Scaling makes stack height mean "how much this column tells you about
+ * the family", matching what the conservation track above it already plots.
+ */
+export function columnLogoStack(
+  colStats: ColumnCounts,
+  col: number,
+  maxBits: number,
+): LogoLetter[] {
+  const total = colStats.total(col)
+  const nonGapTotal = total - colStats.gapCount(col)
+  if (nonGapTotal === 0) {
+    return []
+  }
+
+  const informationContent =
+    Math.max(0, maxBits - colStats.entropy(col)) * (nonGapTotal / total)
+  if (informationContent === 0) {
+    return []
+  }
+
+  const stack: LogoLetter[] = []
+  colStats.forEachResidue(col, (slot, count) => {
+    stack.push({
+      letter: letterOfResidueSlot(slot),
+      bits: (count / nonGapTotal) * informationContent,
+    })
+  })
+  // ascending, so drawing in order stacks the tallest letter on top. Ties break
+  // on letter to keep the stack order stable between redraws.
+  stack.sort((a, b) => a.bits - b.bits || a.letter.localeCompare(b.letter))
+  return stack
+}

package/src/types.ts

@@ -5,11 +5,17 @@ export interface Accession {
   name: string
   description: string
 }
+// which renderer draws a track's content. Every track kind draws into the same
+// per-column coordinate space, so the kind picks the draw function rather than
+// the geometry -- see drawTracks.ts, which dispatches on it.
+export type TrackKind = 'text' | 'bar' | 'logo'
+
 export interface BasicTrackModel {
   id: string
   name: string
   associatedRowName?: string
   height: number
+  kind: TrackKind
 }
 
 export interface TextTrackModel extends BasicTrackModel {
@@ -18,7 +24,7 @@ export interface TextTrackModel extends BasicTrackModel {
 }
 
 // a track that draws a per-column bar chart (conservation, property
-// conservation). `barColor` doubles as the marker that a track is a bar track.
+// conservation)
 export interface BarTrackModel extends BasicTrackModel {
   barColor?: string
 }

package/src/version.ts

@@ -1 +1 @@
-export const version = '6.0.0'
+export const version = '6.1.1'