react-msaview 5.4.1 → 5.6.0

package/src/propertyConservation.ts

@@ -0,0 +1,73 @@
+// Disjoint physicochemical classes for the 20 standard amino acids. Property
+// conservation asks a different question than identity conservation: a column
+// can vary in exact residue yet stay within one property class (a conservative
+// substitution), which often marks a functionally constrained site that plain
+// identity conservation reports as variable.
+//
+// Histidine is grouped with the aromatics (it is only weakly/conditionally
+// positive at physiological pH); this mirrors common substitution-class schemes.
+const aminoPropertyClass: Record<string, string> = {
+  A: 'hydrophobic',
+  V: 'hydrophobic',
+  L: 'hydrophobic',
+  I: 'hydrophobic',
+  M: 'hydrophobic',
+  C: 'hydrophobic',
+  F: 'aromatic',
+  W: 'aromatic',
+  Y: 'aromatic',
+  H: 'aromatic',
+  K: 'positive',
+  R: 'positive',
+  D: 'negative',
+  E: 'negative',
+  S: 'polar',
+  T: 'polar',
+  N: 'polar',
+  Q: 'polar',
+  G: 'special',
+  P: 'special',
+}
+
+const numPropertyClasses = new Set(Object.values(aminoPropertyClass)).size
+const maxPropertyEntropy = Math.log2(numPropertyClasses)
+
+/**
+ * Per-column property conservation using Shannon entropy over physicochemical
+ * classes rather than exact residues. Returns 0-1 where 1 = every non-gap
+ * residue shares one property class. Mirrors the identity-conservation formula
+ * so the two tracks are directly comparable: (1 - H/Hmax) * (1 - gapFraction).
+ */
+export function calculatePropertyConservation(
+  colStats: Record<string, number>[],
+  colStatsSums: number[],
+) {
+  return colStats.map((stats, i) => {
+    const total = colStatsSums[i]
+    if (!total) {
+      return 0
+    }
+
+    let nonGapTotal = 0
+    const classCounts: Record<string, number> = {}
+    for (const [letter, count] of Object.entries(stats)) {
+      const cls = aminoPropertyClass[letter]
+      if (cls) {
+        classCounts[cls] = (classCounts[cls] ?? 0) + count
+        nonGapTotal += count
+      }
+    }
+    if (nonGapTotal === 0) {
+      return 0
+    }
+
+    let entropy = 0
+    for (const count of Object.values(classCounts)) {
+      const freq = count / nonGapTotal
+      entropy -= freq * Math.log2(freq)
+    }
+
+    const gapFraction = (total - nonGapTotal) / total
+    return Math.max(0, 1 - entropy / maxPropertyEntropy) * (1 - gapFraction)
+  })
+}

package/src/renderDomainLegendSvg.test.tsx

@@ -0,0 +1,134 @@
+// @vitest-environment jsdom
+//
+// Verifies the domain color-key legend is drawn as a reserved column on the
+// right of the SVG export when domains are shown. Polyfills mirror
+// impgRender.test.tsx (svgcanvas needs DOMMatrix/DOMPoint + a measureText).
+import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
+import { enableStaticRendering } from 'mobx-react'
+import { beforeAll, expect, test } from 'vitest'
+
+import MSAModelF from './model.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
+})
+
+const msa = `>seq1
+ACDEFGHIKL
+>seq2
+ACDE-GHIKL`
+
+function makeModel() {
+  const model = MSAModelF().create({
+    id: 'domain-legend-test',
+    type: 'MsaView',
+    height: 400,
+    msaFormat: 'fasta',
+    data: { msa },
+  })
+  model.setWidth(800)
+  model.setDomains({
+    seq1: {
+      xref: [{ id: 'seq1' }],
+      matches: [
+        {
+          signature: {
+            entry: {
+              name: 'Kinase',
+              accession: 'PF00069',
+              description: 'Protein kinase domain',
+            },
+          },
+          locations: [{ start: 1, end: 5 }],
+        },
+      ],
+    },
+  })
+  return model
+}
+
+test('domain legend is drawn in the svg export when domains are shown', async () => {
+  const model = makeModel()
+  expect(model.actuallyShowDomains).toBe(true)
+  expect(model.visibleDomainTypes.map(d => d.accession)).toEqual(['PF00069'])
+
+  const svg = await renderToSvg(model, {
+    theme: createJBrowseTheme(),
+    exportType: 'entire',
+    includeMinimap: false,
+    includeTracks: false,
+  })
+  expect(svg).toContain('Kinase')
+})
+
+test('no legend column when domains are hidden', async () => {
+  const model = makeModel()
+  model.setShowDomains(false)
+  expect(model.actuallyShowDomains).toBe(false)
+
+  const svg = await renderToSvg(model, {
+    theme: createJBrowseTheme(),
+    exportType: 'entire',
+    includeMinimap: false,
+    includeTracks: false,
+  })
+  expect(svg).not.toContain('Kinase')
+})

package/src/renderToSvg.tsx

@@ -21,86 +21,119 @@ export interface ExportSvgOptions {
   includeTracks?: boolean
   exportType: 'entire' | 'viewport'
 }
-export async function renderToSvg(model: MsaViewModel, opts: ExportSvgOptions) {
-  await when(() => model.dataInitialized)
+
+// domain-legend geometry, shared by the width calculation and the renderer so
+// the reserved column on the right exactly fits the drawn legend
+const LEGEND_PAD = 8
+const LEGEND_ROW_H = 16
+const LEGEND_SWATCH = 12
+const LEGEND_FONT = 12
+const LEGEND_CHAR_W = 7
+
+function getLegendWidth(model: MsaViewModel) {
+  const names = model.visibleDomainTypes.map(d => d.name)
+  const maxLen = Math.max(0, ...names.map(n => n.length))
+  const w = LEGEND_PAD * 2 + LEGEND_SWATCH + 6 + maxLen * LEGEND_CHAR_W
+  return Math.min(360, Math.max(120, w))
+}
+
+// resolved sizes/offsets (in svg user units) for the chosen export, shared by
+// every layer; 'entire' renders the whole alignment unscrolled, 'viewport'
+// mirrors the live scroll position
+interface Layout {
+  width: number
+  height: number
+  contentHeight: number
+  trackHeight: number
+  offsetX: number
+  offsetY: number
+  includeMinimap: boolean
+  legendWidth: number
+}
+
+function getLayout(model: MsaViewModel, opts: ExportSvgOptions): Layout {
   const {
     width,
     height,
     scrollX,
     scrollY,
+    totalWidth,
+    totalHeight,
+    treeAreaWidth,
     totalTrackAreaHeight,
     minimapHeight,
   } = model
-  const { exportType, theme, includeTracks } = opts
-  const trackHeight = includeTracks ? totalTrackAreaHeight : 0
+  const trackHeight = opts.includeTracks ? totalTrackAreaHeight : 0
   // the minimap reflects the live viewport scroll position, so it's only
   // meaningful for a viewport export, never for the entire alignment
-  const includeMinimap = exportType === 'viewport' && !!opts.includeMinimap
+  const includeMinimap = opts.exportType === 'viewport' && !!opts.includeMinimap
+  const legendWidth =
+    model.actuallyShowDomains && model.visibleDomainTypes.length > 0
+      ? getLegendWidth(model)
+      : 0
 
-  if (exportType === 'entire') {
-    return render({
-      width: model.totalWidth + model.treeAreaWidth,
-      height: model.totalHeight + trackHeight,
-      contentHeight: model.totalHeight,
-      trackHeight,
-      theme,
-      model,
-      offsetY: 0,
-      offsetX: 0,
-      includeMinimap,
-      includeTracks,
-    })
-  }
-  return render({
-    width,
-    height: height + (includeMinimap ? minimapHeight : 0) + trackHeight,
-    contentHeight: height,
-    trackHeight,
-    theme,
-    model,
-    offsetY: -scrollY,
-    offsetX: -scrollX,
-    includeMinimap,
-    includeTracks,
-  })
+  // width stays content-only (the renderers derive msaAreaWidth from it); the
+  // legend occupies an extra column added at the svg root in MsaSvg
+  return opts.exportType === 'entire'
+    ? {
+        width: totalWidth + treeAreaWidth,
+        height: totalHeight + trackHeight,
+        contentHeight: totalHeight,
+        trackHeight,
+        offsetX: 0,
+        offsetY: 0,
+        includeMinimap,
+        legendWidth,
+      }
+    : {
+        width,
+        height: height + (includeMinimap ? minimapHeight : 0) + trackHeight,
+        contentHeight: height,
+        trackHeight,
+        offsetX: -scrollX,
+        offsetY: -scrollY,
+        includeMinimap,
+        legendWidth,
+      }
 }
 
-async function render({
-  width,
-  height,
-  contentHeight,
-  trackHeight,
-  offsetX,
-  offsetY,
-  theme,
+export async function renderToSvg(model: MsaViewModel, opts: ExportSvgOptions) {
+  await when(() => model.dataInitialized)
+  const { Context } = await import('@jbrowse/svgcanvas')
+  return renderToStaticMarkup(
+    <MsaSvg
+      model={model}
+      theme={opts.theme}
+      Context={Context}
+      layout={getLayout(model, opts)}
+    />,
+  )
+}
+
+function MsaSvg({
   model,
-  includeMinimap,
-  includeTracks,
+  theme,
+  Context,
+  layout,
 }: {
-  width: number
-  height: number
-  contentHeight: number
-  trackHeight: number
-  offsetX: number
-  offsetY: number
-  theme: Theme
   model: MsaViewModel
-  includeMinimap?: boolean
-  includeTracks?: boolean
+  theme: Theme
+  Context: typeof ContextType
+  layout: Layout
 }) {
-  const { Context } = await import('@jbrowse/svgcanvas')
+  const { width, height, trackHeight, includeMinimap, legendWidth } = layout
   const { treeAreaWidth, minimapHeight } = model
+  const totalWidth = width + legendWidth
+  const legendTop = includeMinimap ? minimapHeight : 0
 
-  const content = (
+  const body = (
     <>
-      {includeTracks && trackHeight > 0 ? (
+      {trackHeight > 0 ? (
         <TrackRendering
           Context={Context}
           model={model}
           theme={theme}
-          offsetX={offsetX}
-          msaAreaWidth={width - treeAreaWidth}
-          trackHeight={trackHeight}
+          layout={layout}
         />
       ) : null}
       <g
@@ -110,184 +143,214 @@ async function render({
           Context={Context}
           model={model}
           theme={theme}
-          offsetX={offsetX}
-          offsetY={offsetY}
-          msaAreaWidth={width - treeAreaWidth}
-          contentHeight={contentHeight}
+          layout={layout}
         />
       </g>
     </>
   )
 
-  return renderToStaticMarkup(
-    <SvgWrapper width={width} height={height}>
+  return (
+    <svg
+      width={totalWidth}
+      height={height}
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      viewBox={`0 0 ${totalWidth} ${height}`}
+    >
+      <rect width="100%" height="100%" fill="white" />
       {includeMinimap ? (
         <>
           <g transform={`translate(${treeAreaWidth} 0)`}>
             <MinimapSVG model={model} />
           </g>
-          <g transform={`translate(0 ${minimapHeight})`}>{content}</g>
+          <g transform={`translate(0 ${minimapHeight})`}>{body}</g>
         </>
       ) : (
-        content
+        body
       )}
-    </SvgWrapper>,
+      {legendWidth > 0 ? (
+        <g transform={`translate(${width} ${legendTop})`}>
+          <LegendSVG model={model} width={legendWidth} />
+        </g>
+      ) : null}
+    </svg>
+  )
+}
+
+// the domain color key drawn as a reserved column to the right of the
+// alignment, mirroring the on-screen DomainLegend overlay
+function LegendSVG({ model, width }: { model: MsaViewModel; width: number }) {
+  const { visibleDomainTypes, fillPalette, strokePalette } = model
+  const boxHeight = LEGEND_PAD * 2 + visibleDomainTypes.length * LEGEND_ROW_H
+  return (
+    <g>
+      <rect
+        x={0}
+        y={0}
+        width={width - 4}
+        height={boxHeight}
+        fill="white"
+        stroke="#ccc"
+        rx={2}
+      />
+      {visibleDomainTypes.map((d, i) => {
+        const y = LEGEND_PAD + i * LEGEND_ROW_H
+        return (
+          <g key={d.accession}>
+            <rect
+              x={LEGEND_PAD}
+              y={y}
+              width={LEGEND_SWATCH}
+              height={LEGEND_SWATCH}
+              fill={fillPalette[d.accession]}
+              stroke={strokePalette[d.accession]}
+            />
+            <text
+              x={LEGEND_PAD + LEGEND_SWATCH + 6}
+              y={y + LEGEND_SWATCH - 1}
+              fontSize={LEGEND_FONT}
+            >
+              {d.name}
+            </text>
+          </g>
+        )
+      })}
+    </g>
   )
 }
 
 function CoreRendering({
   model,
   theme,
-  msaAreaWidth,
-  contentHeight,
-  offsetX,
-  offsetY,
+  layout,
   Context,
 }: {
   model: MsaViewModel
   theme: Theme
-  msaAreaWidth: number
-  contentHeight: number
-  offsetX: number
-  offsetY: number
+  layout: Layout
   Context: typeof ContextType
 }) {
+  const { contentHeight, offsetX, offsetY, width } = layout
   const { treeAreaWidth, colorScheme, id } = model
-  const clipId1 = `tree-${id}`
-  const clipId2 = `msa-${id}`
+  const msaAreaWidth = width - treeAreaWidth
   const contrastScheme = colorContrast(colorScheme, theme)
 
-  const ctx1 = new Context(treeAreaWidth, contentHeight)
-  const ctx2 = new Context(msaAreaWidth, contentHeight)
-  renderBoxFeatureCanvasBlock({
-    ctx: ctx2,
-    offsetX,
-    offsetY,
+  const treeCtx = new Context(treeAreaWidth, contentHeight)
+  renderTreeCanvas({
     model,
+    theme,
+    ctx: treeCtx,
+    offsetY,
     blockSizeYOverride: contentHeight,
     highResScaleFactorOverride: 1,
   })
-  renderTreeCanvas({
+
+  const msaCtx = new Context(msaAreaWidth, contentHeight)
+  renderBoxFeatureCanvasBlock({
     model,
+    ctx: msaCtx,
+    offsetX,
     offsetY,
-    ctx: ctx1,
-    theme,
     blockSizeYOverride: contentHeight,
     highResScaleFactorOverride: 1,
   })
   renderMSABlock({
     model,
     theme,
-    offsetY,
-    offsetX,
+    ctx: msaCtx,
     contrastScheme,
-    ctx: ctx2,
+    offsetX,
+    offsetY,
     blockSizeXOverride: msaAreaWidth,
     blockSizeYOverride: contentHeight,
     highResScaleFactorOverride: 1,
   })
+
   return (
     <>
-      <defs>
-        <clipPath id={clipId1}>
-          <rect x={0} y={0} width={treeAreaWidth} height={contentHeight} />
-        </clipPath>
-        <clipPath id={clipId2}>
-          <rect x={0} y={0} width={msaAreaWidth} height={contentHeight} />
-        </clipPath>
-      </defs>
-
-      <ClipGroup clipId={clipId1} html={ctx1.getSvg().innerHTML} />
       <ClipGroup
-        clipId={clipId2}
+        clipId={`tree-${id}`}
+        width={treeAreaWidth}
+        height={contentHeight}
+        ctx={treeCtx}
+      />
+      <ClipGroup
+        clipId={`msa-${id}`}
+        width={msaAreaWidth}
+        height={contentHeight}
         transform={`translate(${treeAreaWidth} 0)`}
-        html={ctx2.getSvg().innerHTML}
+        ctx={msaCtx}
       />
     </>
   )
 }
 
-// Wraps SVG markup produced by a svgcanvas Context in a clipped group. The
-// markup is injected verbatim since it's already serialized SVG, not React.
-function ClipGroup({
-  clipId,
-  html,
-  transform,
-}: {
-  clipId: string
-  html: string
-  transform?: string
-}) {
-  return (
-    <g
-      clipPath={`url(#${clipId})`}
-      transform={transform}
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
-  )
-}
-
 function TrackRendering({
   model,
   theme,
-  msaAreaWidth,
-  trackHeight,
-  offsetX,
+  layout,
   Context,
 }: {
   model: MsaViewModel
   theme: Theme
-  msaAreaWidth: number
-  trackHeight: number
-  offsetX: number
+  layout: Layout
   Context: typeof ContextType
 }) {
+  const { trackHeight, offsetX, width } = layout
   const { treeAreaWidth, colorScheme, id } = model
-  const clipId = `tracks-${id}`
+  const msaAreaWidth = width - treeAreaWidth
   const contrastScheme = colorContrast(colorScheme, theme)
 
   const ctx = new Context(msaAreaWidth, trackHeight)
-
   renderAllTracks({
     model,
     ctx,
-    offsetX,
     contrastScheme,
+    offsetX,
     blockSizeXOverride: msaAreaWidth,
     highResScaleFactorOverride: 1,
   })
 
   return (
     <g transform={`translate(${treeAreaWidth} 0)`}>
-      <defs>
-        <clipPath id={clipId}>
-          <rect x={0} y={0} width={msaAreaWidth} height={trackHeight} />
-        </clipPath>
-      </defs>
-      <ClipGroup clipId={clipId} html={ctx.getSvg().innerHTML} />
+      <ClipGroup
+        clipId={`tracks-${id}`}
+        width={msaAreaWidth}
+        height={trackHeight}
+        ctx={ctx}
+      />
     </g>
   )
 }
 
-function SvgWrapper({
+// Clips a svgcanvas Context to its box and injects its markup verbatim (it is
+// already serialized SVG, not React).
+function ClipGroup({
+  clipId,
   width,
   height,
-  children,
+  transform,
+  ctx,
 }: {
+  clipId: string
   width: number
   height: number
-  children: React.ReactNode
+  transform?: string
+  ctx: ContextType
 }) {
   return (
-    <svg
-      width={width}
-      height={height}
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      viewBox={`0 0 ${width} ${height}`}
-    >
-      <rect width="100%" height="100%" fill="white" />
-      {children}
-    </svg>
+    <>
+      <defs>
+        <clipPath id={clipId}>
+          <rect x={0} y={0} width={width} height={height} />
+        </clipPath>
+      </defs>
+      <g
+        clipPath={`url(#${clipId})`}
+        transform={transform}
+        // eslint-disable-next-line @eslint-react/dom-no-dangerously-set-innerhtml
+        dangerouslySetInnerHTML={{ __html: ctx.getSvg().innerHTML }}
+      />
+    </>
   )
 }