react-msaview 6.1.1 → 6.2.0

package/src/renderToSvg.tsx

@@ -4,9 +4,12 @@ import React from 'react'
 import { renderToStaticMarkup } from '@jbrowse/core/util'
 import { when } from 'mobx'
 
+import { visibleRowRange } from './components/getVisibleLeaves.ts'
 import MinimapSVG from './components/minimap/MinimapSVG.tsx'
+import { rasterImageHref, rasterSupported } from './components/msa/msaRaster.ts'
 import { renderBoxFeatureCanvasBlock } from './components/msa/renderBoxFeatureCanvasBlock.ts'
 import { renderMSABlock } from './components/msa/renderMSABlock.ts'
+import { visibleColRange } from './components/msa/visibleColRange.ts'
 import { renderAllTracks } from './components/tracks/drawTracks.ts'
 import { renderTreeCanvas } from './components/tree/renderTreeCanvas.ts'
 import { colorContrast } from './util.ts'
@@ -30,11 +33,16 @@ const LEGEND_SWATCH = 12
 const LEGEND_FONT = 12
 const LEGEND_CHAR_W = 7
 
+const LEGEND_MAX_W = 360
+const LEGEND_TEXT_X = LEGEND_PAD + LEGEND_SWATCH + 6
+
 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))
+  const maxLen = model.visibleDomainTypes.reduce(
+    (a, d) => Math.max(a, d.name.length),
+    0,
+  )
+  const w = LEGEND_TEXT_X + LEGEND_PAD + maxLen * LEGEND_CHAR_W
+  return Math.min(LEGEND_MAX_W, Math.max(120, w))
 }
 
 // resolved sizes/offsets (in svg user units) for the chosen export, shared by
@@ -42,6 +50,7 @@ function getLegendWidth(model: MsaViewModel) {
 // mirrors the live scroll position
 interface Layout {
   width: number
+  msaAreaWidth: number
   height: number
   contentHeight: number
   trackHeight: number
@@ -53,8 +62,6 @@ interface Layout {
 
 function getLayout(model: MsaViewModel, opts: ExportSvgOptions): Layout {
   const {
-    width,
-    height,
     scrollX,
     scrollY,
     totalWidth,
@@ -62,21 +69,33 @@ function getLayout(model: MsaViewModel, opts: ExportSvgOptions): Layout {
     treeAreaWidth,
     totalTrackAreaHeight,
     minimapHeight,
+    msaAreaHeight,
+    msaCanvasWidth,
+    showHorizontalScrollbar,
   } = model
   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 = opts.exportType === 'viewport' && !!opts.includeMinimap
+  // meaningful for a viewport export, never for the entire alignment -- and
+  // only when the live view shows one at all, since a minimap over an alignment
+  // that already fits marks a viewport wider than the bar
+  const includeMinimap =
+    opts.exportType === 'viewport' &&
+    !!opts.includeMinimap &&
+    showHorizontalScrollbar
   const legendWidth =
     model.actuallyShowDomains && model.visibleDomainTypes.length > 0
       ? getLegendWidth(model)
       : 0
 
-  // width stays content-only (the renderers derive msaAreaWidth from it); the
-  // legend occupies an extra column added at the svg root in MsaSvg
+  // width stays content-only; the legend occupies an extra column added at the
+  // svg root in MsaSvg. The viewport export takes the alignment canvas's own
+  // size rather than the widget's -- the widget box also covers the header, the
+  // resize handle and the scrollbars, and rendering that box exports rows and
+  // columns the scrollbars hide on screen
   return opts.exportType === 'entire'
     ? {
         width: totalWidth + treeAreaWidth,
+        msaAreaWidth: totalWidth,
         height: totalHeight + trackHeight,
         contentHeight: totalHeight,
         trackHeight,
@@ -86,9 +105,11 @@ function getLayout(model: MsaViewModel, opts: ExportSvgOptions): Layout {
         legendWidth,
       }
     : {
-        width,
-        height: height + (includeMinimap ? minimapHeight : 0) + trackHeight,
-        contentHeight: height,
+        width: msaCanvasWidth + treeAreaWidth,
+        msaAreaWidth: msaCanvasWidth,
+        height:
+          msaAreaHeight + (includeMinimap ? minimapHeight : 0) + trackHeight,
+        contentHeight: msaAreaHeight,
         trackHeight,
         offsetX: -scrollX,
         offsetY: -scrollY,
@@ -125,26 +146,16 @@ function MsaSvg({
   const { treeAreaWidth, minimapHeight } = model
   const totalWidth = width + legendWidth
   const legendTop = includeMinimap ? minimapHeight : 0
+  const contrastScheme = colorContrast(model.colorScheme, theme)
+  const props = { Context, model, theme, layout, contrastScheme }
 
   const body = (
     <>
-      {trackHeight > 0 ? (
-        <TrackRendering
-          Context={Context}
-          model={model}
-          theme={theme}
-          layout={layout}
-        />
-      ) : null}
+      {trackHeight > 0 ? <TrackRendering {...props} /> : null}
       <g
         transform={trackHeight > 0 ? `translate(0 ${trackHeight})` : undefined}
       >
-        <CoreRendering
-          Context={Context}
-          model={model}
-          theme={theme}
-          layout={layout}
-        />
+        <CoreRendering {...props} />
       </g>
     </>
   )
@@ -157,11 +168,18 @@ function MsaSvg({
       xmlnsXlink="http://www.w3.org/1999/xlink"
       viewBox={`0 0 ${totalWidth} ${height}`}
     >
-      <rect width="100%" height="100%" fill="white" />
+      {/* every layer below draws in the theme's colors, so the page has to be
+          the theme's background too -- a hardcoded white one turns a dark-theme
+          export into white text on white */}
+      <rect
+        width="100%"
+        height="100%"
+        fill={theme.palette.background.default}
+      />
       {includeMinimap ? (
         <>
           <g transform={`translate(${treeAreaWidth} 0)`}>
-            <MinimapSVG model={model} width={width - treeAreaWidth} />
+            <MinimapSVG model={model} theme={theme} />
           </g>
           <g transform={`translate(0 ${minimapHeight})`}>{body}</g>
         </>
@@ -170,7 +188,7 @@ function MsaSvg({
       )}
       {legendWidth > 0 ? (
         <g transform={`translate(${width} ${legendTop})`}>
-          <LegendSVG model={model} width={legendWidth} />
+          <LegendSVG model={model} theme={theme} width={legendWidth} />
         </g>
       ) : null}
     </svg>
@@ -179,9 +197,22 @@ function MsaSvg({
 
 // the domain color key drawn as a reserved column to the right of the
 // alignment, mirroring the on-screen AnnotationLegend overlay
-function LegendSVG({ model, width }: { model: MsaViewModel; width: number }) {
+function LegendSVG({
+  model,
+  theme,
+  width,
+}: {
+  model: MsaViewModel
+  theme: Theme
+  width: number
+}) {
   const { visibleDomainTypes, fillPalette, strokePalette } = model
   const boxHeight = LEGEND_PAD * 2 + visibleDomainTypes.length * LEGEND_ROW_H
+  // the column is capped at LEGEND_MAX_W, so a name too long for it has to be
+  // clipped here -- text that overruns the reserved width runs off the figure
+  const maxChars = Math.floor(
+    (width - LEGEND_TEXT_X - LEGEND_PAD) / LEGEND_CHAR_W,
+  )
   return (
     <g>
       <rect
@@ -189,7 +220,7 @@ function LegendSVG({ model, width }: { model: MsaViewModel; width: number }) {
         y={0}
         width={width - 4}
         height={boxHeight}
-        fill="white"
+        fill={theme.palette.background.paper}
         stroke="#ccc"
         rx={2}
       />
@@ -206,11 +237,14 @@ function LegendSVG({ model, width }: { model: MsaViewModel; width: number }) {
               stroke={strokePalette[d.accession]}
             />
             <text
-              x={LEGEND_PAD + LEGEND_SWATCH + 6}
+              x={LEGEND_TEXT_X}
               y={y + LEGEND_SWATCH - 1}
               fontSize={LEGEND_FONT}
+              fill={theme.palette.text.primary}
             >
-              {d.name}
+              {d.name.length > maxChars
+                ? `${d.name.slice(0, Math.max(1, maxChars - 1))}…`
+                : d.name}
             </text>
           </g>
         )
@@ -219,21 +253,23 @@ function LegendSVG({ model, width }: { model: MsaViewModel; width: number }) {
   )
 }
 
+interface LayerProps {
+  model: MsaViewModel
+  theme: Theme
+  layout: Layout
+  Context: typeof ContextType
+  contrastScheme: Record<string, string>
+}
+
 function CoreRendering({
   model,
   theme,
   layout,
   Context,
-}: {
-  model: MsaViewModel
-  theme: Theme
-  layout: Layout
-  Context: typeof ContextType
-}) {
-  const { contentHeight, offsetX, offsetY, width } = layout
-  const { treeAreaWidth, colorScheme, id } = model
-  const msaAreaWidth = width - treeAreaWidth
-  const contrastScheme = colorContrast(colorScheme, theme)
+  contrastScheme,
+}: LayerProps) {
+  const { contentHeight, offsetX, offsetY, msaAreaWidth } = layout
+  const { treeAreaWidth, id } = model
 
   const treeCtx = new Context(treeAreaWidth, contentHeight)
   renderTreeCanvas({
@@ -245,6 +281,8 @@ function CoreRendering({
     highResScaleFactorOverride: 1,
   })
 
+  const raster = rasterBackground({ model, theme, layout })
+
   const msaCtx = new Context(msaAreaWidth, contentHeight)
   renderBoxFeatureCanvasBlock({
     model,
@@ -267,6 +305,7 @@ function CoreRendering({
     blockSizeXOverride: msaAreaWidth,
     blockSizeYOverride: contentHeight,
     highResScaleFactorOverride: 1,
+    rasterTiles: !!raster,
   })
 
   return (
@@ -283,26 +322,79 @@ function CoreRendering({
         height={contentHeight}
         transform={`translate(${treeAreaWidth} 0)`}
         ctx={msaCtx}
+        underlay={raster}
       />
     </>
   )
 }
 
-function TrackRendering({
+/**
+ * The alignment background as a single <image>, on the same terms the live
+ * canvas uses it: no domain overlay painting its own boxes, background coloring
+ * on, and a canvas we can actually read back.
+ *
+ * One node replaces the <rect>-per-cell the vector path emits, which is what
+ * lets an export of a real alignment finish at all. The image is one pixel per
+ * cell drawn across the cells' own rectangle, so it upscales by whole cells --
+ * image-rendering keeps those edges hard rather than smearing them, making it
+ * pixel-for-pixel what the rects drew.
+ */
+function rasterBackground({
   model,
   theme,
   layout,
-  Context,
 }: {
   model: MsaViewModel
   theme: Theme
   layout: Layout
-  Context: typeof ContextType
 }) {
-  const { trackHeight, offsetX, width } = layout
-  const { treeAreaWidth, colorScheme, id } = model
-  const msaAreaWidth = width - treeAreaWidth
-  const contrastScheme = colorContrast(colorScheme, theme)
+  const { contentHeight, offsetX, offsetY, msaAreaWidth } = layout
+  const { colWidth, rowHeight, actuallyShowDomains, bgColor } = model
+  if (actuallyShowDomains || !bgColor || !rasterSupported()) {
+    return undefined
+  }
+  const { xStart, xEnd } = visibleColRange({
+    offsetX,
+    blockWidth: msaAreaWidth,
+    colWidth,
+  })
+  const { yStart, yEnd } = visibleRowRange({
+    model,
+    offsetY,
+    blockSizeY: contentHeight,
+  })
+  const numCols = Math.min(xEnd, model.numColumns) - xStart
+  const numRows = Math.min(yEnd, model.leaves.length) - yStart
+  const href = rasterImageHref({
+    model,
+    theme,
+    col0: xStart,
+    row0: yStart,
+    numCols,
+    numRows,
+  })
+  return href ? (
+    <image
+      href={href}
+      x={xStart * colWidth - offsetX}
+      y={yStart * rowHeight - offsetY}
+      width={numCols * colWidth}
+      height={numRows * rowHeight}
+      imageRendering="pixelated"
+      preserveAspectRatio="none"
+    />
+  ) : undefined
+}
+
+function TrackRendering({
+  model,
+  theme,
+  layout,
+  Context,
+  contrastScheme,
+}: LayerProps) {
+  const { trackHeight, offsetX, msaAreaWidth } = layout
+  const { treeAreaWidth, id } = model
 
   const ctx = new Context(msaAreaWidth, trackHeight)
   renderAllTracks({
@@ -316,31 +408,76 @@ function TrackRendering({
   })
 
   return (
-    <g transform={`translate(${treeAreaWidth} 0)`}>
-      <ClipGroup
-        clipId={`tracks-${id}`}
-        width={msaAreaWidth}
-        height={trackHeight}
-        ctx={ctx}
-      />
-    </g>
+    <>
+      <TrackLabelsSVG model={model} theme={theme} />
+      <g transform={`translate(${treeAreaWidth} 0)`}>
+        <ClipGroup
+          clipId={`tracks-${id}`}
+          width={msaAreaWidth}
+          height={trackHeight}
+          ctx={ctx}
+        />
+      </g>
+    </>
+  )
+}
+
+// Each track's name in the tree-width column beside it, where the live view puts
+// it (see TrackLabel). Without these the figure has an unlabeled bar chart and
+// an unlabeled logo, and nothing says which is which.
+function TrackLabelsSVG({
+  model,
+  theme,
+}: {
+  model: MsaViewModel
+  theme: Theme
+}) {
+  const { turnedOnTracks, treeAreaWidth, fontSize, drawLabels } = model
+  if (!drawLabels) {
+    return null
+  }
+  let y = 0
+  return (
+    <>
+      {turnedOnTracks.map(track => {
+        const { id, name, height } = track.model
+        const size = Math.min(height, fontSize)
+        const baseline = y + height / 2 + size / 3
+        y += height
+        return size < 5 ? null : (
+          <text
+            key={id}
+            x={treeAreaWidth - 4}
+            y={baseline}
+            fontSize={size}
+            textAnchor="end"
+            fill={theme.palette.text.primary}
+          >
+            {name}
+          </text>
+        )
+      })}
+    </>
   )
 }
 
 // Clips a svgcanvas Context to its box and injects its markup verbatim (it is
-// already serialized SVG, not React).
+// already serialized SVG, not React). `underlay` draws beneath that markup,
+// inside the same clip, for the parts of a layer React emits directly.
 function ClipGroup({
   clipId,
   width,
   height,
   transform,
   ctx,
+  underlay,
 }: {
   clipId: string
   width: number
   height: number
   transform?: string
   ctx: ContextType
+  underlay?: React.ReactNode
 }) {
   return (
     <>
@@ -349,11 +486,10 @@ function ClipGroup({
           <rect x={0} y={0} width={width} height={height} />
         </clipPath>
       </defs>
-      <g
-        clipPath={`url(#${clipId})`}
-        transform={transform}
-        dangerouslySetInnerHTML={{ __html: ctx.getSvg().innerHTML }}
-      />
+      <g clipPath={`url(#${clipId})`} transform={transform}>
+        {underlay}
+        <g dangerouslySetInnerHTML={{ __html: ctx.getSvg().innerHTML }} />
+      </g>
     </>
   )
 }

package/src/version.ts

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

package/dist/renderTestEnv.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"renderTestEnv.js","sourceRoot":"","sources":["../src/renderTestEnv.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,aAAa;IACxB,CAAC,CAAQ;IACT,CAAC,CAAQ;IACT,CAAC,CAAQ;IACT,CAAC,CAAQ;IACT,CAAC,CAAQ;IACT,CAAC,CAAQ;IAET,YAAY,IAAe;QACzB,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,IAAI,EAAE,CAAA;QAC7D,IAAI,CAAC,CAAC,GAAG,CAAC,CAAA;QACV,IAAI,CAAC,CAAC,GAAG,CAAC,CAAA;QACV,IAAI,CAAC,CAAC,GAAG,CAAC,CAAA;QACV,IAAI,CAAC,CAAC,GAAG,CAAC,CAAA;QACV,IAAI,CAAC,CAAC,GAAG,CAAC,CAAA;QACV,IAAI,CAAC,CAAC,GAAG,CAAC,CAAA;IACZ,CAAC;IAED,QAAQ,CAAC,CAAgB;QACvB,OAAO,IAAI,aAAa,CAAC;YACvB,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;YAC3B,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;YAC3B,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;YAC3B,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;YAC3B,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YACpC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;SACrC,CAAC,CAAA;IACJ,CAAC;IAED,SAAS,CAAC,CAAS,EAAE,CAAC,GAAG,CAAC;QACxB,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;IAC7D,CAAC;IAED,KAAK,CAAC,CAAS,EAAE,CAAC,GAAG,CAAC;QACpB,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;IAC7D,CAAC;CACF;AAED,MAAM,OAAO,YAAY;IAEd,CAAC;IACD,CAAC;IAFV,YACS,CAAC,GAAG,CAAC,EACL,CAAC,GAAG,CAAC;iBADL,CAAC;iBACD,CAAC;IACP,CAAC;IAEJ,eAAe,CAAC,CAAgB;QAC9B,OAAO,IAAI,YAAY,CACrB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EACjC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAClC,CAAA;IACH,CAAC;CACF;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,oBAAoB;IAClC,MAAM,CAAC,GAAG,UAAqC,CAAA;IAC/C,CAAC,CAAC,SAAS,GAAG,aAAa,CAAA;IAC3B,CAAC,CAAC,QAAQ,GAAG,YAAY,CAAA;IACzB,iBAAiB,CAAC,SAAS,CAAC,UAAU,GAAG;QACvC,IAAI,IAAI,GAAG,iBAAiB,CAAA;QAC5B,OAAO;YACL,IAAI,IAAI;gBACN,OAAO,IAAI,CAAA;YACb,CAAC;YACD,IAAI,IAAI,CAAC,CAAS;gBAChB,IAAI,GAAG,CAAC,CAAA;YACV,CAAC;YACD,WAAW,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC;gBAC3B,KAAK,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,GAAG;aACxD,CAAC;SACoC,CAAA;IAC1C,CAA6D,CAAA;AAC/D,CAAC;AAED,iEAAiE;AACjE,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA"}