react-msaview 6.0.0 → 6.1.0

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.0'

package/dist/components/ConservationTrack.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import type { MsaViewModel } from '../model.ts';
-import type { BasicTrack } from '../types.ts';
-declare const ConservationTrack: ({ model, track, }: {
-    model: MsaViewModel;
-    track: BasicTrack;
-}) => React.JSX.Element;
-export default ConservationTrack;

package/dist/components/ConservationTrack.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import { observer } from 'mobx-react';
-import { useCanvasAutorun } from '../useCanvasAutorun.js';
-import { ConservationTrackResizeHandle } from './ResizeHandles.js';
-import { barTrackValues, drawConservationBars, } from './tracks/renderTracksSvg.js';
-const ConservationBlock = observer(function ({ model, track, offsetX, trackHeight, }) {
-    const { blockSize, scrollX, highResScaleFactor } = model;
-    const ref = useCanvasAutorun({
-        draw: ctx => {
-            const { colWidth } = model;
-            ctx.resetTransform();
-            ctx.scale(highResScaleFactor, highResScaleFactor);
-            ctx.clearRect(0, 0, blockSize, trackHeight);
-            ctx.translate(-offsetX, 0);
-            drawConservationBars({
-                ctx,
-                values: barTrackValues(model, track.model.id),
-                color: track.model.barColor ?? 'gray',
-                colWidth,
-                trackHeight,
-                offsetX,
-                blockSize,
-            });
-        },
-        width: blockSize * highResScaleFactor,
-        height: trackHeight * highResScaleFactor,
-        deps: [model, track, offsetX, trackHeight],
-    });
-    return (React.createElement("canvas", { ref: ref, height: trackHeight * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
-            position: 'absolute',
-            left: scrollX + offsetX,
-            width: blockSize,
-            height: trackHeight,
-        } }));
-});
-const ConservationTrack = observer(function ({ model, track, }) {
-    const { blocksX, msaAreaWidth } = model;
-    const trackHeight = track.model.height;
-    return (React.createElement("div", { style: {
-            position: 'relative',
-            height: trackHeight,
-            width: msaAreaWidth,
-            overflow: 'hidden',
-        } },
-        blocksX.map(bx => (React.createElement(ConservationBlock, { key: bx, model: model, track: track, offsetX: bx, trackHeight: trackHeight }))),
-        React.createElement(ConservationTrackResizeHandle, { model: model })));
-});
-export default ConservationTrack;
-//# sourceMappingURL=ConservationTrack.js.map

package/dist/components/ConservationTrack.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ConservationTrack.js","sourceRoot":"","sources":["../../src/components/ConservationTrack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,6BAA6B,EAAE,MAAM,oBAAqB,CAAA;AACnE,OAAO,EACL,cAAc,EACd,oBAAoB,GACrB,MAAM,6BAA6B,CAAA;AAKpC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,UAAU,EAC3C,KAAK,EACL,KAAK,EACL,OAAO,EACP,WAAW,GAMZ;IACC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAA;IAExD,MAAM,GAAG,GAAG,gBAAgB,CAAC;QAC3B,IAAI,EAAE,GAAG,CAAC,EAAE;YACV,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;YAC1B,GAAG,CAAC,cAAc,EAAE,CAAA;YACpB,GAAG,CAAC,KAAK,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,CAAA;YACjD,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,WAAW,CAAC,CAAA;YAC3C,GAAG,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAA;YAE1B,oBAAoB,CAAC;gBACnB,GAAG;gBACH,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC7C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,IAAI,MAAM;gBACrC,QAAQ;gBACR,WAAW;gBACX,OAAO;gBACP,SAAS;aACV,CAAC,CAAA;QACJ,CAAC;QACD,KAAK,EAAE,SAAS,GAAG,kBAAkB;QACrC,MAAM,EAAE,WAAW,GAAG,kBAAkB;QACxC,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,CAAC;KAC3C,CAAC,CAAA;IAEF,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,WAAW,GAAG,kBAAkB,EACxC,KAAK,EAAE,SAAS,GAAG,kBAAkB,EACrC,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,OAAO,GAAG,OAAO;YACvB,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,WAAW;SACpB,GACD,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,iBAAiB,GAAG,QAAQ,CAAC,UAAU,EAC3C,KAAK,EACL,KAAK,GAIN;IACC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,KAAK,CAAA;IACvC,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAA;IAEtC,OAAO,CACL,6BACE,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,WAAW;YACnB,KAAK,EAAE,YAAY;YACnB,QAAQ,EAAE,QAAQ;SACnB;QAEA,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CACjB,oBAAC,iBAAiB,IAChB,GAAG,EAAE,EAAE,EACP,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,EAAE,EACX,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;QACF,oBAAC,6BAA6B,IAAC,KAAK,EAAE,KAAK,GAAI,CAC3C,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,iBAAiB,CAAA"}

package/dist/components/ScrollbarThumb.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-export declare const scrollbarThumbFill = "rgba(66,119,127,0.3)";
-/**
- * The draggable thumb shared by the horizontal Minimap and the
- * VerticalScrollbar. `getStart` is read at mousedown and handed back to
- * `onDrag` alongside the pixel delta since, so a caller only supplies the
- * scroll offset it drives and where the thumb sits.
- */
-export default function ScrollbarThumb({ axis, getStart, onDrag, style, }: {
-    axis: 'x' | 'y';
-    getStart: () => number;
-    onDrag: (delta: number, startValue: number) => void;
-    style: React.CSSProperties;
-}): React.JSX.Element;

package/dist/components/ScrollbarThumb.js

@@ -1,28 +0,0 @@
-import React, { useState } from 'react';
-import { useDragScroll } from '../useDragScroll.js';
-export const scrollbarThumbFill = 'rgba(66,119,127,0.3)';
-const scrollbarThumbFillHovered = 'rgba(66,119,127,0.6)';
-/**
- * The draggable thumb shared by the horizontal Minimap and the
- * VerticalScrollbar. `getStart` is read at mousedown and handed back to
- * `onDrag` alongside the pixel delta since, so a caller only supplies the
- * scroll offset it drives and where the thumb sits.
- */
-export default function ScrollbarThumb({ axis, getStart, onDrag, style, }) {
-    const [hovered, setHovered] = useState(false);
-    const { startDrag } = useDragScroll(axis, onDrag);
-    return (React.createElement("div", { onMouseOver: () => {
-            setHovered(true);
-        }, onMouseOut: () => {
-            setHovered(false);
-        }, onMouseDown: event => {
-            startDrag(event, getStart());
-        }, style: {
-            position: 'absolute',
-            zIndex: 100,
-            cursor: 'pointer',
-            background: hovered ? scrollbarThumbFillHovered : scrollbarThumbFill,
-            ...style,
-        } }));
-}
-//# sourceMappingURL=ScrollbarThumb.js.map

package/dist/components/ScrollbarThumb.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrollbarThumb.js","sourceRoot":"","sources":["../../src/components/ScrollbarThumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAEnD,MAAM,CAAC,MAAM,kBAAkB,GAAG,sBAAsB,CAAA;AACxD,MAAM,yBAAyB,GAAG,sBAAsB,CAAA;AAExD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,KAAK,GAMN;IACC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;IAEjD,OAAO,CACL,6BACE,WAAW,EAAE,GAAG,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,CAAA;QAClB,CAAC,EACD,UAAU,EAAE,GAAG,EAAE;YACf,UAAU,CAAC,KAAK,CAAC,CAAA;QACnB,CAAC,EACD,WAAW,EAAE,KAAK,CAAC,EAAE;YACnB,SAAS,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAA;QAC9B,CAAC,EACD,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,SAAS;YACjB,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,kBAAkB;YACpE,GAAG,KAAK;SACT,GACD,CACH,CAAA;AACH,CAAC"}

package/dist/components/TextTrack.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import type { MsaViewModel } from '../model.ts';
-import type { BasicTrack } from '../types.ts';
-declare const AnnotationTrack: ({ track, model, }: {
-    track: BasicTrack;
-    model: MsaViewModel;
-}) => React.JSX.Element | null;
-export default AnnotationTrack;

package/dist/components/TextTrack.js

@@ -1,58 +0,0 @@
-import React from 'react';
-import { observer } from 'mobx-react';
-import { setFontSize } from '../setFontSize.js';
-import { useCanvasAutorun } from '../useCanvasAutorun.js';
-import { useColorContrast } from '../useColorContrast.js';
-import { drawTextTrackContent } from './tracks/renderTracksSvg.js';
-const AnnotationBlock = observer(function ({ track, model, offsetX, }) {
-    const { blockSize, scrollX, colorScheme: modelColorScheme, rowHeight, highResScaleFactor, } = model;
-    const { model: { customColorScheme, data }, } = track;
-    const colorScheme = customColorScheme ?? modelColorScheme;
-    const { theme, contrastScheme } = useColorContrast(colorScheme);
-    const ref = useCanvasAutorun({
-        draw: ctx => {
-            const { bgColor, colWidth, fontSize } = model;
-            ctx.resetTransform();
-            ctx.scale(highResScaleFactor, highResScaleFactor);
-            ctx.clearRect(0, 0, blockSize, rowHeight);
-            ctx.translate(-offsetX, 0);
-            ctx.textAlign = 'center';
-            setFontSize(ctx, fontSize);
-            drawTextTrackContent({
-                ctx,
-                data,
-                colorScheme,
-                contrastScheme,
-                bgColor,
-                textColor: theme.palette.text.primary,
-                colWidth,
-                rowHeight,
-                offsetX,
-                blockSize,
-            });
-        },
-        width: blockSize * highResScaleFactor,
-        height: rowHeight * highResScaleFactor,
-        deps: [model, offsetX, theme, contrastScheme, colorScheme, data],
-    });
-    return (React.createElement("canvas", { ref: ref, height: rowHeight * highResScaleFactor, width: blockSize * highResScaleFactor, style: {
-            position: 'absolute',
-            left: scrollX + offsetX,
-            width: blockSize,
-            height: rowHeight,
-        } }));
-});
-const AnnotationTrack = observer(function ({ track, model, }) {
-    const { blocksX, msaAreaWidth, rowHeight } = model;
-    if (!track.model.data) {
-        return null;
-    }
-    return (React.createElement("div", { style: {
-            position: 'relative',
-            height: rowHeight,
-            width: msaAreaWidth,
-            overflow: 'hidden',
-        } }, blocksX.map(bx => (React.createElement(AnnotationBlock, { key: bx, track: track, model: model, offsetX: bx })))));
-});
-export default AnnotationTrack;
-//# sourceMappingURL=TextTrack.js.map

package/dist/components/TextTrack.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextTrack.js","sourceRoot":"","sources":["../../src/components/TextTrack.tsx"],"names":[],"mappings":"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"}