react-msaview 6.2.2 → 6.3.0

package/dist/svgTestUtil.js

@@ -0,0 +1,28 @@
+// Shared setup for the tests that drive renderToSvg headlessly.
+import { enableStaticRendering } from 'mobx-react';
+import { installHeadlessRenderEnv } from './headlessRenderEnv.js';
+import MSAModelF from './model.js';
+export function installSvgTestEnv(contextExtras) {
+    enableStaticRendering(true);
+    installHeadlessRenderEnv(globalThis, contextExtras);
+}
+export function createTestModel(snapshot, width = 800) {
+    const model = MSAModelF().create({
+        type: 'MsaView',
+        msaFormat: 'fasta',
+        height: 400,
+        ...snapshot,
+    });
+    model.setWidth(width);
+    return model;
+}
+// a protein alignment with no two neighbouring cells alike, so any color or
+// letter landing in the wrong cell shows up
+export function syntheticProteinMsa(rows, cols) {
+    const letters = 'ACDEFGHIKLMNPQRSTVWY';
+    return Array.from({ length: rows }, (_, r) => {
+        const seq = Array.from({ length: cols }, (_, c) => letters[(r * 7 + c * 3) % letters.length]).join('');
+        return `>seq${r}\n${seq}`;
+    }).join('\n');
+}
+//# sourceMappingURL=svgTestUtil.js.map

package/dist/svgTestUtil.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svgTestUtil.js","sourceRoot":"","sources":["../src/svgTestUtil.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAA;AAElD,OAAO,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAA;AACjE,OAAO,SAAS,MAAM,YAAY,CAAA;AAMlC,MAAM,UAAU,iBAAiB,CAC/B,aAAiD;IAEjD,qBAAqB,CAAC,IAAI,CAAC,CAAA;IAC3B,wBAAwB,CAAC,UAAU,EAAE,aAAa,CAAC,CAAA;AACrD,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,QAAgC,EAAE,KAAK,GAAG,GAAG;IAC3E,MAAM,KAAK,GAAG,SAAS,EAAE,CAAC,MAAM,CAAC;QAC/B,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,OAAO;QAClB,MAAM,EAAE,GAAG;QACX,GAAG,QAAQ;KACZ,CAAC,CAAA;IACF,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACrB,OAAO,KAAK,CAAA;AACd,CAAC;AAED,4EAA4E;AAC5E,4CAA4C;AAC5C,MAAM,UAAU,mBAAmB,CAAC,IAAY,EAAE,IAAY;IAC5D,MAAM,OAAO,GAAG,sBAAsB,CAAA;IACtC,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QAC3C,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CACpB,EAAE,MAAM,EAAE,IAAI,EAAE,EAChB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CACpD,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;QACV,OAAO,OAAO,CAAC,KAAK,GAAG,EAAE,CAAA;IAC3B,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACf,CAAC"}

package/dist/types.d.ts

@@ -23,6 +23,18 @@ export interface BasicTrack {
     ReactComponent: React.FC<any>;
     model: TextTrackModel & BarTrackModel;
 }
+export interface ColumnTrackSpec {
+    id: string;
+    name: string;
+    kind: 'bar' | 'text';
+    values?: number[];
+    data?: string;
+    max?: number;
+    color?: string;
+    colors?: Record<string, string>;
+    row?: string;
+    height?: number;
+}
 export type { Annotation };
 export type TidyDomainAnnotation = Annotation;
 export interface DomainBand {
@@ -31,6 +43,27 @@ export interface DomainBand {
     endCol: number;
     stackIndex: number;
 }
+/**
+ * A persistent, labeled highlight. Coordinates are 1-based and inclusive, as
+ * GFF's are. `row` makes `start`/`end` residues of that row; without it they
+ * are alignment columns. `rows` marks whole rows instead.
+ */
+export interface Highlight {
+    row?: string;
+    rows?: string[];
+    start?: number;
+    end?: number;
+    label?: string;
+    color?: string;
+}
+/** a Highlight resolved to visible column indices and row indices */
+export interface ResolvedHighlight {
+    startCol?: number;
+    endCol?: number;
+    rowIndices: number[];
+    label?: string;
+    color?: string;
+}
 export interface Node {
     children?: Node[];
     name?: string;

package/dist/umd.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+export { destroy } from '@jbrowse/mobx-state-tree';
 export { default as MSAView } from './components/Loading.tsx';
 export { type MsaViewModel, default as MSAModelF } from './model.ts';
 export * from 'react-dom/client';

package/dist/umd.js

@@ -1,4 +1,7 @@
 import * as React from 'react';
+// a host that swaps models (the R htmlwidget on re-render) has to destroy the
+// old one, or the disposers its autoruns registered never run
+export { destroy } from '@jbrowse/mobx-state-tree';
 export { default as MSAView } from './components/Loading.js';
 export { default as MSAModelF } from './model.js';
 export * from 'react-dom/client';

package/dist/umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"umd.js","sourceRoot":"","sources":["../src/umd.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,yBAA0B,CAAA;AAC7D,OAAO,EAAqB,OAAO,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAEpE,cAAc,kBAAkB,CAAA;AAEhC,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"umd.js","sourceRoot":"","sources":["../src/umd.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,8EAA8E;AAC9E,8DAA8D;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,yBAA0B,CAAA;AAC7D,OAAO,EAAqB,OAAO,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAEpE,cAAc,kBAAkB,CAAA;AAEhC,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/util.d.ts

@@ -6,6 +6,7 @@ export declare function transform<T>(obj: Record<string, T>, cb: (arg0: [string,
 export declare function colorContrast(colorScheme: Record<string, string>, theme: Theme): {
     [k: string]: string;
 };
+export declare function dropBlanks<T>(blanks: number[], arr: T[]): T[];
 export declare function skipBlanks(blanks: number[], str: string): string;
 export declare function computeRowInsertions(blanks: number[], seq: string): {
     pos: number;

package/dist/util.js

@@ -32,6 +32,13 @@ export function colorContrast(colorScheme, theme) {
         theme.palette.getContrastText(colord(color).toHex()),
     ]);
 }
+export function dropBlanks(blanks, arr) {
+    if (blanks.length === 0) {
+        return arr;
+    }
+    const set = new Set(blanks);
+    return arr.filter((_, i) => !set.has(i));
+}
 export function skipBlanks(blanks, str) {
     if (blanks.length === 0) {
         return str;

package/dist/util.js.map

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

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "6.2.2";
+export declare const version = "6.3.0";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '6.2.2';
+export const version = '6.3.0';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "6.2.2",
+  "version": "6.3.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -43,8 +43,8 @@
     "@gmod/newick": "^1.0.0",
     "colord": "^2.9.3",
     "flatbush": "^4.6.2",
-    "@jbrowse/svgcanvas": "6.2.2",
-    "msa-parsers": "6.2.2"
+    "@jbrowse/svgcanvas": "6.3.0",
+    "msa-parsers": "6.3.0"
   },
   "scripts": {
     "clean": "rimraf dist bundle",

package/src/columnTracks.test.ts

@@ -0,0 +1,97 @@
+import { getSnapshot } from '@jbrowse/mobx-state-tree'
+import { expect, test } from 'vitest'
+
+import stateModelFactory from './model.ts'
+
+import type { ColumnTrackSpec } from './types.ts'
+
+const MsaView = stateModelFactory()
+
+// s1 has a gap at column 1 and s2 a gap at column 3, and every row is gapped at
+// column 5, so hiding gappy columns drops that one
+const msa = '>s1\nA-CDE-F\n>s2\nAB-DE-F\n>s3\nABCDE-F\n'
+
+function makeModel(columnTracks: ColumnTrackSpec[]) {
+  return MsaView.create({
+    type: 'MsaView',
+    msaFormat: 'fasta',
+    data: { msa },
+    columnTracks,
+  })
+}
+
+test('column-indexed values normalize by max and clamp to 0..1', () => {
+  const model = makeModel([
+    { id: 't', name: 'T', kind: 'bar', values: [1, 2, 4, -1], max: 2 },
+  ])
+  expect(model.columnTrackContent.get('t')?.values).toEqual([0.5, 1, 1, 0])
+})
+
+test('row-indexed values land on the residues of that row', () => {
+  const model = makeModel([
+    { id: 't', name: 'T', kind: 'bar', values: [0.1, 0.2, 0.3], row: 's1' },
+  ])
+  // residues 1..3 of s1 are A, C, D at global columns 0, 2, 3
+  expect(model.columnTrackContent.get('t')?.values).toEqual([
+    0.1, 0, 0.2, 0.3, 0, 0, 0,
+  ])
+})
+
+test('a row-indexed text track spreads its letters the same way', () => {
+  const model = makeModel([
+    { id: 'f', name: 'Frame', kind: 'text', data: '123', row: 's2' },
+  ])
+  // residues of s2 sit at columns 0, 1, 3
+  expect(model.columnTrackContent.get('f')?.data).toBe('12 3   ')
+})
+
+test('hiding gappy columns drops them from the values and the text', () => {
+  const model = makeModel([
+    { id: 't', name: 'T', kind: 'bar', values: [1, 2, 3, 4, 5, 6, 7], max: 7 },
+    { id: 'f', name: 'F', kind: 'text', data: 'abcdefg' },
+  ])
+  model.setHideGaps(true)
+  model.setAllowedGappyness(99)
+  expect(model.blanks).toEqual([5])
+  expect(model.columnTrackContent.get('t')?.values).toHaveLength(6)
+  expect(model.columnTrackContent.get('f')?.data).toBe('abcdeg')
+})
+
+test('data tracks join the track list with their own color and height', () => {
+  const model = makeModel([
+    { id: 't', name: 'dN/dS', kind: 'bar', values: [1], color: 'red' },
+    { id: 'f', name: 'Frame', kind: 'text', data: '1', colors: { 1: 'blue' } },
+  ])
+  const ids = model.tracks.map(t => t.model.id)
+  expect(ids).toContain('t')
+  expect(ids).toContain('f')
+  const bar = model.tracks.find(t => t.model.id === 't')!.model
+  expect(bar.barColor).toBe('red')
+  expect(bar.height).toBe(model.conservationTrackHeight)
+  const text = model.tracks.find(t => t.model.id === 'f')!.model
+  expect(text.customColorScheme).toEqual({ 1: 'blue' })
+  expect(text.height).toBe(model.rowHeight)
+  expect(text.data).toBe('1')
+
+  expect(model.turnedOnTracks.map(t => t.model.id)).toContain('t')
+  model.toggleTrack('t')
+  expect(model.turnedOnTracks.map(t => t.model.id)).not.toContain('t')
+})
+
+test('setColumnTracks replaces the set and the snapshot carries it', () => {
+  const model = makeModel([])
+  expect(getSnapshot(model)).not.toHaveProperty('columnTracks')
+  model.setColumnTracks([{ id: 't', name: 'T', kind: 'bar', values: [0.5] }])
+  expect(getSnapshot(model).columnTracks).toEqual([
+    { id: 't', name: 'T', kind: 'bar', values: [0.5] },
+  ])
+})
+
+test('a track too large to share leaves the snapshot but keeps drawing', () => {
+  const model = makeModel([
+    { id: 'big', name: 'Big', kind: 'bar', values: Array(20_000).fill(0.5) },
+    { id: 'small', name: 'Small', kind: 'bar', values: [0.5] },
+  ])
+  expect(model.columnTrackContent.get('big')?.values).toHaveLength(20_000)
+  expect(getSnapshot(model).columnTracks?.map(t => t.id)).toEqual(['small'])
+})

package/src/components/MSAViewer.tsx

@@ -7,6 +7,7 @@ import { ThemeProvider } from '@mui/material/styles'
 import MSAModelF from '../model.ts'
 import Loading from './Loading.tsx'
 
+import type { ColumnTrackSpec, Highlight } from '../types.ts'
 import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
 
 const theme = createJBrowseTheme()
@@ -26,8 +27,16 @@ interface MSAViewerProps {
   rowHeight?: number
   /** alignment columns (0-based) to highlight with a persistent overlay */
   highlightColumns?: number[]
+  /**
+   * labeled highlights in 1-based inclusive coordinates: `{start, end}` for
+   * alignment columns, `{row, start, end}` for residues of that row, `{rows}`
+   * for whole rows, each with an optional `label` and `color`
+   */
+  highlights?: Highlight[]
   /** row name to diff every other row against (matches render as ".") */
   relativeTo?: string
+  /** tracks supplied as data: per-column bar values or a text row (see docs/layers.md) */
+  columnTracks?: ColumnTrackSpec[]
   /** draw the phylogenetic tree (default true); false leaves a labels-only gutter */
   drawTree?: boolean
   /** fixed width (px) of the tree/label area */
@@ -48,7 +57,9 @@ export default function MSAViewer({
   colWidth,
   rowHeight,
   highlightColumns,
+  highlights,
   relativeTo,
+  columnTracks,
   drawTree,
   treeAreaWidth,
   autoTreeAreaWidth,
@@ -69,7 +80,9 @@ export default function MSAViewer({
       ...(colWidth ? { colWidth } : {}),
       ...(rowHeight ? { rowHeight } : {}),
       ...(highlightColumns ? { highlightColumns } : {}),
+      ...(highlights ? { highlights } : {}),
       ...(relativeTo ? { relativeTo } : {}),
+      ...(columnTracks ? { columnTracks } : {}),
       ...(drawTree !== undefined ? { drawTree } : {}),
       ...(treeAreaWidth ? { treeAreaWidth } : {}),
       ...(autoTreeAreaWidth ? { autoTreeAreaWidth } : {}),

package/src/components/minimap/Minimap.tsx

@@ -76,7 +76,7 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
           width: msaCanvasWidth,
           height: MINIMAP_BAR_HEIGHT,
           boxSizing: 'border-box',
-          border: '1px solid #555',
+          border: `1px solid ${theme.palette.text.secondary}`,
         }}
       />
       <DragHandle

package/src/components/minimap/MinimapSVG.tsx

@@ -42,7 +42,7 @@ export default function MinimapSVG({
         y={0}
         width={msaCanvasWidth}
         height={MINIMAP_BAR_HEIGHT}
-        stroke="#555"
+        stroke={theme.palette.text.secondary}
         fill="none"
       />
       <rect
@@ -51,7 +51,7 @@ export default function MinimapSVG({
         width={w}
         height={MINIMAP_BAR_HEIGHT}
         fill={scrollbarThumbFill}
-        stroke="#555"
+        stroke={theme.palette.text.secondary}
       />
       <g transform={`translate(0 ${MINIMAP_BAR_HEIGHT})`}>
         <polygon fill={scrollbarThumbFill} points={polygonPoints} />

package/src/components/msa/MSAMouseoverCanvas.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { isAlive } from '@jbrowse/mobx-state-tree'
+import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
@@ -14,17 +15,18 @@ const MSAMouseoverCanvas = observer(function ({
   model: MsaViewModel
 }) {
   const { height, msaCanvasWidth: width, highResScaleFactor } = model
+  const theme = useTheme()
   const canvasWidth = width * highResScaleFactor
   const canvasHeight = height * highResScaleFactor
   const ref = useCanvasAutorun({
     draw: ctx => {
       if (isAlive(model)) {
-        renderMouseover({ ctx, model })
+        renderMouseover({ ctx, model, theme })
       }
     },
     width: canvasWidth,
     height: canvasHeight,
-    deps: [model],
+    deps: [model, theme],
   })
 
   return (

package/src/components/msa/msaRaster.ts

@@ -320,20 +320,24 @@ export function drawMsaRaster({
 /**
  * A raster canvas as a PNG data URI, for embedding in the SVG export.
  *
- * toDataURL is the synchronous read-back and only the DOM canvas has it, so an
+ * toDataURL is the synchronous read-back. The DOM canvas has it, and so does a
+ * node canvas standing in for OffscreenCanvas headlessly; a browser
  * OffscreenCanvas -- which is what the tile and thumbnail caches hold wherever
- * it exists -- gets copied onto one first. Returns undefined wherever the
- * read-back is unavailable (jsdom) rather than throwing, which is the signal to
- * fall back to drawing the thing in vector.
+ * it exists -- gets copied onto a DOM canvas first. Returns undefined wherever
+ * the read-back is unavailable (jsdom) rather than throwing, which is the
+ * signal to fall back to drawing the thing in vector.
  */
 export function canvasHref(canvas: RasterCanvas | undefined) {
-  if (!canvas || typeof document === 'undefined') {
+  if (!canvas) {
     return undefined
   }
   try {
-    if (canvas instanceof HTMLCanvasElement) {
+    if ('toDataURL' in canvas && typeof canvas.toDataURL === 'function') {
       return canvas.toDataURL('image/png')
     }
+    if (typeof document === 'undefined') {
+      return undefined
+    }
     const out = document.createElement('canvas')
     out.width = canvas.width
     out.height = canvas.height

package/src/components/msa/renderHighlights.ts

@@ -0,0 +1,86 @@
+import { setFontSize } from '../../setFontSize.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+import type { RenderCtx } from '../renderCtx.ts'
+import type { Theme } from '@mui/material'
+
+export const highlightFill = 'rgba(255,140,0,0.28)'
+export const highlightBorder = 'rgba(210,90,0,0.95)'
+export const highlightRowFill = 'rgba(255,140,0,0.18)'
+
+export const labelFontSize = 11
+const labelPad = 3
+
+export function drawHighlightLabel({
+  ctx,
+  theme,
+  label,
+  x,
+  y,
+  spanWidth,
+}: {
+  ctx: RenderCtx
+  theme: Theme
+  label: string
+  x: number
+  y: number
+  spanWidth: number
+}) {
+  setFontSize(ctx, labelFontSize)
+  ctx.textAlign = 'start'
+  const boxWidth = ctx.measureText(label).width + labelPad * 2
+  const boxHeight = labelFontSize + labelPad * 2
+  const left = boxWidth <= spanWidth ? x : x + spanWidth + 2
+  ctx.fillStyle = theme.palette.background.paper
+  ctx.fillRect(left, y, boxWidth, boxHeight)
+  ctx.fillStyle = theme.palette.text.primary
+  ctx.fillText(label, left + labelPad, y + labelPad + labelFontSize - 2)
+}
+
+/**
+ * The persistent `highlights` overlay on the alignment: row tints, bordered
+ * column bands, and a label above each band. `offsetX`/`offsetY` are the
+ * content coordinates at the canvas origin, the convention renderMSABlock
+ * uses, so the live overlay passes -scrollX/-scrollY and the export passes its
+ * layout offsets.
+ */
+export function renderHighlights({
+  ctx,
+  model,
+  theme,
+  offsetX,
+  offsetY,
+  width,
+  height,
+}: {
+  ctx: RenderCtx
+  model: MsaViewModel
+  theme: Theme
+  offsetX: number
+  offsetY: number
+  width: number
+  height: number
+}) {
+  const { resolvedHighlights, colWidth, rowHeight } = model
+  ctx.lineWidth = 2
+  for (const { rowIndices, color } of resolvedHighlights) {
+    ctx.fillStyle = color ?? highlightRowFill
+    for (const index of rowIndices) {
+      ctx.fillRect(0, index * rowHeight - offsetY, width, rowHeight)
+    }
+  }
+  for (const { startCol, endCol, label, color } of resolvedHighlights) {
+    if (startCol === undefined || endCol === undefined) {
+      continue
+    }
+    const x = startCol * colWidth - offsetX
+    const spanWidth = (endCol - startCol + 1) * colWidth
+    ctx.fillStyle = color ?? highlightFill
+    ctx.fillRect(x, 0, spanWidth, height)
+    ctx.strokeStyle = color ?? highlightBorder
+    ctx.strokeRect(x, 0, spanWidth, height)
+    if (label) {
+      drawHighlightLabel({ ctx, theme, label, x, y: 0, spanWidth })
+    }
+  }
+}

package/src/components/msa/renderMSAMouseover.ts

@@ -4,8 +4,10 @@ import {
   multiRowHoverColor,
   referenceColor,
 } from '../overlayColors.ts'
+import { renderHighlights } from './renderHighlights.ts'
 
 import type { MsaViewModel } from '../../model.ts'
+import type { Theme } from '@mui/material'
 
 // the persistent highlightColumns overlay: a stronger fill plus a solid border
 // so a domain/motif band reads clearly over the colored alignment cells (the
@@ -16,9 +18,11 @@ const highlightColumnsBorder = 'rgba(210,90,0,0.95)'
 export function renderMouseover({
   ctx,
   model,
+  theme,
 }: {
   ctx: CanvasRenderingContext2D
   model: MsaViewModel
+  theme: Theme
 }) {
   const {
     mouseCol,
@@ -72,6 +76,16 @@ export function renderMouseover({
     ctx.strokeRect(x, 0, w, height)
   }
 
+  renderHighlights({
+    ctx,
+    model,
+    theme,
+    offsetX: -scrollX,
+    offsetY: -scrollY,
+    width,
+    height,
+  })
+
   ctx.fillStyle = hoverColor
   if (mouseCol !== undefined) {
     colBand(mouseCol)

package/src/components/tracks/drawTracks.ts

@@ -43,6 +43,10 @@ export function drawConservationBars({
 // the bar-track values live on model getters (kept off the plain track object so
 // the live canvas autorun stays reactive); select the right one by track id
 export function barTrackValues(model: MsaViewModel, trackId: string) {
+  const supplied = model.columnTrackContent.get(trackId)?.values
+  if (supplied) {
+    return supplied
+  }
   return trackId === 'property-conservation'
     ? model.propertyConservation
     : model.conservation

package/src/components/tree/renderTreeCanvas.ts

@@ -5,6 +5,10 @@ import {
 } from '../../hierarchy.ts'
 import { setFontSize } from '../../setFontSize.ts'
 import { getVisibleLeaves } from '../getVisibleLeaves.ts'
+import {
+  drawHighlightLabel,
+  highlightRowFill,
+} from '../msa/renderHighlights.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
@@ -349,6 +353,55 @@ function renderTreeLabels({
   ctx.setLineDash([])
 }
 
+// the row sets of `highlights`, tinted across the tree area under the labels
+// with the label in the gutter at the first row of each set
+function renderRowHighlights({
+  ctx,
+  model,
+  theme,
+  offsetY,
+  blockSizeYOverride,
+}: {
+  ctx: RenderCtx
+  model: MsaViewModel
+  theme: Theme
+  offsetY: number
+  blockSizeYOverride?: number
+}) {
+  const {
+    resolvedHighlights,
+    rowHeight,
+    treeAreaWidth,
+    marginLeft,
+    blockSize,
+  } = model
+  const by = blockSizeYOverride ?? blockSize
+  for (const { rowIndices, label, color } of resolvedHighlights) {
+    ctx.fillStyle = color ?? highlightRowFill
+    for (const index of rowIndices) {
+      const y = index * rowHeight
+      if (inYBlock(y + rowHeight / 2, offsetY, by)) {
+        ctx.fillRect(-marginLeft, y, treeAreaWidth, rowHeight)
+      }
+    }
+    const first = Math.min(...rowIndices)
+    if (
+      label &&
+      rowIndices.length &&
+      inYBlock(first * rowHeight, offsetY, by)
+    ) {
+      drawHighlightLabel({
+        ctx,
+        theme,
+        label,
+        x: -marginLeft + 2,
+        y: first * rowHeight,
+        spanWidth: treeAreaWidth,
+      })
+    }
+  }
+}
+
 export function renderTreeCanvas({
   model,
   clickMap,
@@ -403,6 +456,9 @@ export function renderTreeCanvas({
   // every block of every redraw, and `collapsed` is a list
   const collapsedSet = new Set(model.collapsed)
 
+  renderRowHighlights({ ctx, model, theme, offsetY, blockSizeYOverride })
+  setFontSize(ctx, fontSize)
+
   if (!noTree && drawTree) {
     renderTree({
       ctx,

package/src/exportFileName.test.ts

@@ -0,0 +1,40 @@
+import { expect, test } from 'vitest'
+
+import { exportFileName } from './exportFileName.ts'
+
+test('takes the alignment file name and swaps the extension', () => {
+  expect(
+    exportFileName(
+      {
+        uri: 'https://example.org/data/PF00069.stock?dl=1',
+        locationType: 'UriLocation',
+      },
+      'svg',
+    ),
+  ).toBe('PF00069.svg')
+  expect(
+    exportFileName(
+      {
+        localPath: 'C:\\aligns\\hemoglobin.fa',
+        locationType: 'LocalPathLocation',
+      },
+      'svg',
+    ),
+  ).toBe('hemoglobin.svg')
+  expect(
+    exportFileName(
+      { blobId: 'b1', name: 'pasted.aln', locationType: 'BlobLocation' },
+      'svg',
+    ),
+  ).toBe('pasted.svg')
+})
+
+test('falls back to a plain name without a file', () => {
+  expect(exportFileName(undefined, 'svg')).toBe('image.svg')
+  expect(
+    exportFileName(
+      { uri: 'https://example.org/', locationType: 'UriLocation' },
+      'svg',
+    ),
+  ).toBe('image.svg')
+})