react-msaview 5.4.0 → 5.5.0

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 }}
+      />
+    </>
   )
 }

package/src/segmentOverlay.test.ts

@@ -0,0 +1,70 @@
+// Verifies that ordinal segment features (exons) from a GFF overlay are treated
+// as a numbered gene model — alternating two shades, labeled by number, and
+// kept out of the categorical color-key legend — while real domains keep a
+// distinct color + legend entry.
+import { expect, test } from 'vitest'
+
+import { segmentShades } from './constants.ts'
+import MSAModelF from './model.ts'
+
+const msa = `>human
+ACDEFGHIKLMNPQRSTVWYACDEFGHIKLMNPQRSTVWYACDEFGHIKLMNPQRSTVWY
+>mouse
+ACDEFGHIKLMNPQRSTVWYACDEFGHIKLMNPQRSTVWYACDEFGHIKLMNPQRSTVWY`
+
+// three exons in CDS coordinates plus one real domain, deliberately out of
+// start order in the file to prove ordering is by position not file/length
+const gff = `##gff-version 3
+human	src	exon	41	60	.	.	.	ID=human.exon3;Name=exon-3
+human	src	exon	1	20	.	.	.	ID=human.exon1;Name=exon-1
+human	src	exon	21	40	.	.	.	ID=human.exon2;Name=exon-2
+human	Pfam	protein_match	5	35	.	.	.	Name=PF00069;signature_desc=Kinase`
+
+function makeModel() {
+  const model = MSAModelF().create({
+    id: 'segment-overlay-test',
+    type: 'MsaView',
+    height: 400,
+    msaFormat: 'fasta',
+    data: { msa },
+  })
+  model.setWidth(800)
+  model.applyGFFText(gff)
+  return model
+}
+
+test('exons are ordered by sequence position, domains kept separate', () => {
+  const model = makeModel()
+  expect(model.segmentDomainTypes.map(d => d.accession)).toEqual([
+    'exon-1',
+    'exon-2',
+    'exon-3',
+  ])
+  expect(model.categoricalDomainTypes.map(d => d.accession)).toEqual([
+    'PF00069',
+  ])
+})
+
+test('exons alternate two shades; domain gets its own color', () => {
+  const { fillPalette } = makeModel()
+  expect(fillPalette['exon-1']).toBe(segmentShades[0])
+  expect(fillPalette['exon-2']).toBe(segmentShades[1])
+  expect(fillPalette['exon-3']).toBe(segmentShades[0])
+  expect(fillPalette.PF00069).not.toBe(segmentShades[0])
+  expect(fillPalette.PF00069).not.toBe(segmentShades[1])
+})
+
+test('exons are labeled by their number', () => {
+  const { segmentLabels } = makeModel()
+  expect(segmentLabels.get('exon-1')).toBe('1')
+  expect(segmentLabels.get('exon-2')).toBe('2')
+  expect(segmentLabels.get('exon-3')).toBe('3')
+})
+
+test('legend lists only categorical domains, not exons', () => {
+  const model = makeModel()
+  for (const acc of ['exon-1', 'exon-2', 'exon-3', 'PF00069']) {
+    model.setFilter(acc, true)
+  }
+  expect(model.visibleDomainTypes.map(d => d.accession)).toEqual(['PF00069'])
+})

package/src/version.ts

@@ -1 +1 @@
-export const version = '5.4.0'
+export const version = '5.5.0'

package/bundle/index.js.LICENSE.txt

@@ -1,100 +0,0 @@
-/*!
- * escape-html
- * Copyright(c) 2012-2013 TJ Holowaychuk
- * Copyright(c) 2015 Andreas Lubbe
- * Copyright(c) 2015 Tiancheng "Timothy" Gu
- * MIT Licensed
- */
-
-/*! @license DOMPurify 3.4.8 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.8/LICENSE */
-
-/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
-
-/**
- * @license React
- * react-dom-client.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react-dom.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react-is.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * scheduler.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * use-sync-external-store-shim.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * use-sync-external-store-shim/with-selector.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

package/dist/components/util.d.ts

@@ -1 +0,0 @@
-export declare function mathPower(num: number): string;

package/dist/components/util.js

@@ -1,7 +0,0 @@
-export function mathPower(num) {
-    if (num < 999) {
-        return String(num);
-    }
-    return `${mathPower(~~(num / 1000))},${`00${~~(num % 1000)}`.slice(-3, -3 + 3)}`;
-}
-//# sourceMappingURL=util.js.map

package/dist/components/util.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"util.js","sourceRoot":"","sources":["../../src/components/util.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,SAAS,CAAC,GAAW;IACnC,IAAI,GAAG,GAAG,GAAG,EAAE,CAAC;QACd,OAAO,MAAM,CAAC,GAAG,CAAC,CAAA;IACpB,CAAC;IACD,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC,KAAK,CAChE,CAAC,CAAC,EACF,CAAC,CAAC,GAAG,CAAC,CACP,EAAE,CAAA;AACL,CAAC"}

package/dist/webpack.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"webpack.js","sourceRoot":"","sources":["../src/webpack.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"}

package/src/components/util.ts

@@ -1,9 +0,0 @@
-export function mathPower(num: number): string {
-  if (num < 999) {
-    return String(num)
-  }
-  return `${mathPower(~~(num / 1000))},${`00${~~(num % 1000)}`.slice(
-    -3,
-    -3 + 3,
-  )}`
-}