react-msaview 8.4.1 → 9.1.0

package/src/renderToSvg.tsx

@@ -6,7 +6,7 @@ import { when } from 'mobx'
 import { visibleRowRange } from './components/getVisibleLeaves.ts'
 import MinimapSVG from './components/minimap/MinimapSVG.tsx'
 import { legendRows } from './components/msa/legendRows.ts'
-import { rasterImageHref, rasterSupported } from './components/msa/msaRaster.ts'
+import { rasterApplies, rasterImageHref } from './components/msa/msaRaster.ts'
 import { renderBoxFeatureCanvasBlock } from './components/msa/renderBoxFeatureCanvasBlock.ts'
 import { renderPersistentHighlights } from './components/msa/renderHighlights.ts'
 import { renderMSABlock } from './components/msa/renderMSABlock.ts'
@@ -15,141 +15,32 @@ import { headerRunsAcross } from './components/rowpanels/headerLayout.ts'
 import { renderRowPanels } from './components/rowpanels/renderRowPanel.ts'
 import { renderAllTracks } from './components/tracks/drawTracks.ts'
 import ScaleBarSVG from './components/tree/ScaleBarSVG.tsx'
-import {
-  bracketGap,
-  cladeHeight,
-  cladeInGutter,
-  cladeLabelHorizontal,
-  cladeLabelOffset,
-} from './components/tree/cladeBrackets.ts'
+import { cladeLabelBoxes } from './components/tree/cladeBrackets.ts'
+import { ellipsize } from './components/tree/ellipsize.ts'
 import { renderTreeCanvas } from './components/tree/renderTreeCanvas.ts'
 import { renderTreeOverview } from './components/tree/renderTreeOverview.ts'
 import { treeScaleBarHeight } from './constants.ts'
+import {
+  LEGEND_CHAR_W,
+  LEGEND_FONT,
+  LEGEND_PAD,
+  LEGEND_ROW_H,
+  LEGEND_SWATCH,
+  LEGEND_TEXT_X,
+  exportPageSize,
+  getLayout,
+  legendHeight,
+} from './exportLayout.ts'
 import { measureTextCanvas } from './measureTextCanvas.ts'
 import { renderToStaticMarkup, svgSafeColors } from './renderToStaticMarkup.ts'
 import { outlineColor } from './util.ts'
 
-import type { LegendRow } from './components/msa/legendRows.ts'
+import type { ExportSvgOptions, Layout } from './exportLayout.ts'
 import type { MsaViewModel } from './model.ts'
 import type { Context as ContextType } from '@jbrowse/svgcanvas'
 import type { Theme } from '@mui/material'
 
-export interface ExportSvgOptions {
-  theme: Theme
-  includeMinimap?: boolean
-  includeTracks?: boolean
-  exportType: 'entire' | 'viewport'
-}
-
-// legend geometry, shared by the width calculation and the renderer so the
-// reserved column on the right exactly fits the drawn legends
-const LEGEND_PAD = 8
-const LEGEND_ROW_H = 16
-const LEGEND_SWATCH = 12
-const LEGEND_FONT = 12
-const LEGEND_CHAR_W = 7
-
-// the width of a character as a fraction of the font size, close enough for a
-// sans-serif average
-const CHAR_WIDTH = 0.6
-
-const LEGEND_MAX_W = 360
-const LEGEND_TEXT_X = LEGEND_PAD + LEGEND_SWATCH + 6
-
-function getLegendWidth(rows: LegendRow[]) {
-  const maxLen = rows.reduce((a, r) => Math.max(a, r.label.length), 0)
-  const w = LEGEND_TEXT_X + LEGEND_PAD + maxLen * LEGEND_CHAR_W
-  return Math.min(LEGEND_MAX_W, Math.max(120, w))
-}
-
-function legendHeight(rows: LegendRow[]) {
-  return LEGEND_PAD * 2 + rows.length * LEGEND_ROW_H
-}
-
-// 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
-  msaAreaWidth: number
-  height: number
-  contentHeight: number
-  trackHeight: number
-  // the band the minimap, the row panel headers and the tree overview stacked
-  // on the scale bar share across the top
-  topHeight: number
-  offsetX: number
-  offsetY: number
-  includeMinimap: boolean
-  legendWidth: number
-}
-
-function getLayout(model: MsaViewModel, opts: ExportSvgOptions): Layout {
-  const {
-    scrollX,
-    scrollY,
-    totalWidth,
-    totalHeight,
-    treeAreaWidth,
-    rowPanelsWidth,
-    rowPanelsHeaderHeight,
-    totalTrackAreaHeight,
-    minimapHeight,
-    msaAreaHeight,
-    msaCanvasWidth,
-    showHorizontalScrollbar,
-    treeOverviewHeight,
-    treeScaleBar,
-  } = 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 -- 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 rows = legendRows(model.legends)
-  const legendWidth = rows.length > 0 ? getLegendWidth(rows) : 0
-  const topHeight = Math.max(
-    includeMinimap ? minimapHeight : 0,
-    rowPanelsHeaderHeight,
-    treeOverviewHeight + (treeScaleBar ? treeScaleBarHeight : 0),
-  )
-  const gutterWidth = treeAreaWidth + rowPanelsWidth
-
-  // 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 + gutterWidth,
-        msaAreaWidth: totalWidth,
-        height: totalHeight + trackHeight + topHeight,
-        contentHeight: totalHeight,
-        trackHeight,
-        topHeight,
-        offsetX: 0,
-        offsetY: 0,
-        includeMinimap,
-        legendWidth,
-      }
-    : {
-        width: msaCanvasWidth + gutterWidth,
-        msaAreaWidth: msaCanvasWidth,
-        height: msaAreaHeight + topHeight + trackHeight,
-        contentHeight: msaAreaHeight,
-        trackHeight,
-        topHeight,
-        offsetX: -scrollX,
-        offsetY: -scrollY,
-        includeMinimap,
-        legendWidth,
-      }
-}
+export type { ExportSvgOptions } from './exportLayout.ts'
 
 export async function renderToSvg(model: MsaViewModel, opts: ExportSvgOptions) {
   // dataInitialized stays false while the model holds a load error, so waiting
@@ -173,12 +64,13 @@ export async function renderToSvg(model: MsaViewModel, opts: ExportSvgOptions) {
       layers={layers}
     />,
   )
+  // innerHTML serializes as HTML, and an XML parser rejects its  
   return svgSafeColors(
     markup.replaceAll(/<g data-layer="([^"]+)"><\/g>/g, (match, id: string) => {
       const ctx = layers.get(id)
       return ctx ? `<g id="${id}">${ctx.getSvg().innerHTML}</g>` : match
     }),
-  )
+  ).replaceAll('&nbsp;', '&#160;')
 }
 
 function MsaSvg({
@@ -195,18 +87,9 @@ function MsaSvg({
   layers: LayerMap
 }) {
   const { width, trackHeight, includeMinimap, legendWidth, topHeight } = layout
-  const { treeAreaWidth, rowPanelsWidth } = model
-  const totalWidth = width + legendWidth
+  const { effectiveTreeAreaWidth, rowPanelsWidth } = model
+  const { width: totalWidth, height } = exportPageSize(model, layout)
   const legendTop = topHeight
-  // a short alignment with many legend entries has a key taller than its rows,
-  // and the page has to hold the whole key
-  const height =
-    legendWidth > 0
-      ? Math.max(
-          layout.height,
-          legendTop + legendHeight(legendRows(model.legends)),
-        )
-      : layout.height
   const props = { Context, model, theme, layout, layers }
 
   const body = (
@@ -227,6 +110,9 @@ function MsaSvg({
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       viewBox={`0 0 ${totalWidth} ${height}`}
+      // the canvas layers name sans-serif on each glyph; the legend, labels
+      // and headers inherit it here instead of an editor's default serif
+      fontFamily="sans-serif"
     >
       {/* 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
@@ -241,7 +127,7 @@ function MsaSvg({
           {includeMinimap ? (
             <g
               id="minimap-panel"
-              transform={`translate(${treeAreaWidth + rowPanelsWidth} 0)`}
+              transform={`translate(${effectiveTreeAreaWidth + rowPanelsWidth} 0)`}
             >
               <MinimapSVG model={model} theme={theme} />
             </g>
@@ -288,20 +174,20 @@ function TreeOverviewSVG({
   Context: typeof ContextType
   layers: LayerMap
 }) {
-  const { treeAreaWidth, overviewHeight, id } = model
-  const ctx = new Context(treeAreaWidth, overviewHeight)
+  const { effectiveTreeAreaWidth, overviewHeight, id } = model
+  const ctx = new Context(effectiveTreeAreaWidth, overviewHeight)
   renderTreeOverview({
     model,
     ctx,
     theme,
-    width: treeAreaWidth,
+    width: effectiveTreeAreaWidth,
     height: overviewHeight,
   })
   return (
     <ClipGroup
       panelId="tree-overview"
       clipId={`tree-overview-${id}`}
-      width={treeAreaWidth}
+      width={effectiveTreeAreaWidth}
       height={overviewHeight}
       ctx={ctx}
       layers={layers}
@@ -349,17 +235,16 @@ function RowPanelHeadersSVG({
   theme: Theme
   bandHeight: number
 }) {
-  const { resolvedRowPanels, treeAreaWidth, fontSize } = model
+  const { resolvedRowPanels, effectiveTreeAreaWidth, fontSize } = model
   const y = bandHeight - 4
   return resolvedRowPanels.length === 0 ? null : (
     <g id="rowpanel-headers">
       {resolvedRowPanels.map(panel => {
         const across = headerRunsAcross(panel.width)
         const size = across ? fontSize : Math.min(fontSize, panel.width)
-        const center = treeAreaWidth + panel.offsetX + panel.width / 2
+        const center = effectiveTreeAreaWidth + panel.offsetX + panel.width / 2
         const x = across ? center : center + size / 3
         const room = across ? panel.width : y - LEGEND_PAD
-        const maxChars = Math.floor(room / (size * CHAR_WIDTH))
         return size < 5 ? null : (
           <text
             key={panel.id}
@@ -371,9 +256,10 @@ function RowPanelHeadersSVG({
             fontSize={size}
             fill={theme.palette.text.primary}
           >
-            {panel.header.length > maxChars
-              ? `${panel.header.slice(0, Math.max(1, maxChars - 1))}…`
-              : panel.header}
+            {
+              ellipsize(t => measureTextCanvas(t, size), panel.header, room)
+                .text
+            }
           </text>
         )
       })}
@@ -381,21 +267,11 @@ function RowPanelHeadersSVG({
   )
 }
 
-// A label past the room it has, cut to what fits with an ellipsis. The measure
-// is the one cladeGutterWidth sizes the gutter with, so a label the gutter
-// holds keeps every character.
-function clipCladeLabel(label: string, room: number, fontSize: number) {
-  const width = measureTextCanvas(label, fontSize)
-  if (width <= room) {
-    return label
-  }
-  const fits = Math.floor((label.length * room) / width)
-  return `${label.slice(0, Math.max(1, fits - 1))}…`
-}
-
 // Each bracket's label in the gutter beside its bar, where the live view puts
 // it (see CladeLabels). The canvas layer draws the bar; a label longer than the
 // gutter or the clade is clipped, since text that overruns runs off the figure.
+// cladeGutterWidth sizes the gutter with the same measureTextCanvas, so a label
+// the gutter holds keeps every character.
 function CladeLabelsSVG({
   model,
   theme,
@@ -405,41 +281,32 @@ function CladeLabelsSVG({
   theme: Theme
   offsetY: number
 }) {
-  const {
-    resolvedClades,
-    cladeGutterWidth,
-    rowHeight,
-    treeAreaWidth,
-    fontSize,
-  } = model
-  if (cladeGutterWidth === 0) {
-    return null
-  }
-  const gutterLeft = treeAreaWidth - cladeGutterWidth
-  return (
+  const { fontSize } = model
+  const boxes = cladeLabelBoxes(model)
+  return boxes.length === 0 ? null : (
     <g id="clade-labels">
-      {resolvedClades.map((clade, index) => {
-        const { label, markColor, rows } = clade
-        if (!label || !cladeInGutter(clade)) {
-          return null
-        }
-        const left = gutterLeft + cladeLabelOffset(clade)
-        const top = rows[0] * rowHeight - offsetY
-        const height = cladeHeight(clade, rowHeight)
-        const horizontal = cladeLabelHorizontal(clade, rowHeight, fontSize)
-        const room = horizontal ? treeAreaWidth - left - bracketGap : height
-        const x = horizontal ? left : left + fontSize
-        const y = horizontal ? top + height / 2 + fontSize / 3 : top + height
+      {boxes.map(box => {
+        const top = box.top - offsetY
+        const x = box.horizontal ? box.left : box.left + fontSize
+        const y = box.horizontal
+          ? top + box.height / 2 + fontSize / 3
+          : top + box.height
         return (
           <text
-            key={`${rows[0]}-${rows[1]}-${index}`}
+            key={box.key}
             x={x}
             y={y}
-            transform={horizontal ? undefined : `rotate(-90 ${x} ${y})`}
+            transform={box.horizontal ? undefined : `rotate(-90 ${x} ${y})`}
             fontSize={fontSize}
-            fill={markColor ?? theme.palette.text.primary}
+            fill={box.color ?? theme.palette.text.primary}
           >
-            {clipCladeLabel(label, room, fontSize)}
+            {
+              ellipsize(
+                t => measureTextCanvas(t, fontSize),
+                box.label,
+                box.horizontal ? box.width : box.height,
+              ).text
+            }
           </text>
         )
       })}
@@ -462,9 +329,7 @@ function LegendSVG({
   const boxHeight = legendHeight(rows)
   // 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,
-  )
+  const room = width - LEGEND_TEXT_X - LEGEND_PAD
   return (
     <g>
       <rect
@@ -497,9 +362,7 @@ function LegendSVG({
               fontWeight={row.color ? undefined : 'bold'}
               fill={theme.palette.text.primary}
             >
-              {row.label.length > maxChars
-                ? `${row.label.slice(0, Math.max(1, maxChars - 1))}…`
-                : row.label}
+              {ellipsize(t => t.length * LEGEND_CHAR_W, row.label, room).text}
             </text>
           </g>
         )
@@ -520,9 +383,9 @@ interface LayerProps {
 
 function CoreRendering({ model, theme, layout, Context, layers }: LayerProps) {
   const { contentHeight, offsetX, offsetY, msaAreaWidth } = layout
-  const { treeAreaWidth, rowPanelsWidth, id } = model
+  const { effectiveTreeAreaWidth, rowPanelsWidth, id } = model
 
-  const treeCtx = new Context(treeAreaWidth, contentHeight)
+  const treeCtx = new Context(effectiveTreeAreaWidth, contentHeight)
   renderTreeCanvas({
     model,
     theme,
@@ -588,7 +451,7 @@ function CoreRendering({ model, theme, layout, Context, layers }: LayerProps) {
       <ClipGroup
         panelId="tree-panel"
         clipId={`tree-${id}`}
-        width={treeAreaWidth}
+        width={effectiveTreeAreaWidth}
         height={contentHeight}
         ctx={treeCtx}
         layers={layers}
@@ -600,7 +463,7 @@ function CoreRendering({ model, theme, layout, Context, layers }: LayerProps) {
           clipId={`rowpanels-${id}`}
           width={rowPanelsWidth}
           height={contentHeight}
-          transform={`translate(${treeAreaWidth} 0)`}
+          transform={`translate(${effectiveTreeAreaWidth} 0)`}
           ctx={rowPanelsCtx}
           layers={layers}
         />
@@ -610,7 +473,7 @@ function CoreRendering({ model, theme, layout, Context, layers }: LayerProps) {
         clipId={`msa-${id}`}
         width={msaAreaWidth}
         height={contentHeight}
-        transform={`translate(${treeAreaWidth + rowPanelsWidth} 0)`}
+        transform={`translate(${effectiveTreeAreaWidth + rowPanelsWidth} 0)`}
         ctx={msaCtx}
         layers={layers}
         underlay={raster}
@@ -620,9 +483,8 @@ function CoreRendering({ model, theme, layout, Context, layers }: LayerProps) {
 }
 
 /**
- * The alignment background as a single <image>, under the live canvas's
- * conditions: no domain overlay boxes, background coloring on, and a canvas
- * that reads back.
+ * The alignment background as a single <image>, wherever the live canvas
+ * draws the raster.
  *
  * The vector path's <rect> per cell exhausts the heap on a real alignment. The
  * image is one pixel per cell, and image-rendering keeps the upscaled cell
@@ -638,8 +500,8 @@ function rasterBackground({
   layout: Layout
 }) {
   const { contentHeight, offsetX, offsetY, msaAreaWidth } = layout
-  const { colWidth, rowHeight, actuallyShowDomains, bgColor } = model
-  if (actuallyShowDomains || !bgColor || !rasterSupported()) {
+  const { colWidth, rowHeight } = model
+  if (!rasterApplies(model)) {
     return undefined
   }
   const { xStart, xEnd } = visibleColRange({
@@ -677,7 +539,7 @@ function rasterBackground({
 
 function TrackRendering({ model, theme, layout, Context, layers }: LayerProps) {
   const { trackHeight, offsetX, msaAreaWidth } = layout
-  const { treeAreaWidth, rowPanelsWidth, id } = model
+  const { effectiveTreeAreaWidth, rowPanelsWidth, id } = model
 
   const ctx = new Context(msaAreaWidth, trackHeight)
   renderAllTracks({
@@ -692,7 +554,7 @@ function TrackRendering({ model, theme, layout, Context, layers }: LayerProps) {
   return (
     <>
       <TrackLabelsSVG model={model} theme={theme} />
-      <g transform={`translate(${treeAreaWidth + rowPanelsWidth} 0)`}>
+      <g transform={`translate(${effectiveTreeAreaWidth + rowPanelsWidth} 0)`}>
         <ClipGroup
           panelId="tracks-panel"
           clipId={`tracks-${id}`}
@@ -716,7 +578,7 @@ function TrackLabelsSVG({
   model: MsaViewModel
   theme: Theme
 }) {
-  const { turnedOnTracks, treeAreaWidth, fontSize, drawLabels } = model
+  const { turnedOnTracks, effectiveTreeAreaWidth, fontSize, drawLabels } = model
   if (!drawLabels) {
     return null
   }
@@ -726,7 +588,8 @@ function TrackLabelsSVG({
     const top = turnedOnTracks
       .slice(0, i)
       .reduce((acc, t) => acc + t.model.height, 0)
-    return { id, name, size, baseline: top + height / 2 + size / 3 }
+    // pinned to the top of the track, as the live view's flex row pins it
+    return { id, name, size, baseline: top + size * 0.8 }
   })
   return (
     <>
@@ -734,7 +597,7 @@ function TrackLabelsSVG({
         return size < 5 ? null : (
           <text
             key={id}
-            x={treeAreaWidth - 4}
+            x={effectiveTreeAreaWidth - 4}
             y={baseline}
             fontSize={size}
             textAnchor="end"

package/src/tipLabels.ts

@@ -0,0 +1,51 @@
+import { measureTextCanvas } from './measureTextCanvas.ts'
+
+import type { NodeWithIds } from './types.ts'
+
+// A label's width follows its length closely enough that the widest one is
+// among the longest few, so a 230k-tip tree measures this many strings.
+const measuredLabels = 100
+
+/** the leaf names of a tree, and its depth in levels from the root */
+export function treeTips(tree: NodeWithIds) {
+  const names: string[] = []
+  let depth = 0
+  const stack: [NodeWithIds, number][] = [[tree, 0]]
+  for (let entry = stack.pop(); entry; entry = stack.pop()) {
+    const [node, level] = entry
+    const { children } = node
+    if (children.length > 0) {
+      for (const child of children) {
+        stack.push([child, level + 1])
+      }
+    } else {
+      names.push(node.name)
+      depth = Math.max(depth, level)
+    }
+  }
+  return { names, depth }
+}
+
+/** the width of the widest label at `fontSize`, measuring the longest few */
+export function widestLabel(labels: string[], fontSize: number) {
+  const counts: number[] = []
+  for (const label of labels) {
+    counts[label.length] = (counts[label.length] ?? 0) + 1
+  }
+  let shortest = counts.length
+  for (let seen = 0; shortest > 0 && seen < measuredLabels;) {
+    shortest--
+    seen += counts[shortest] ?? 0
+  }
+  let widest = 0
+  let ties = 0
+  for (const label of labels) {
+    if (
+      label.length > shortest ||
+      (label.length === shortest && ties++ < measuredLabels)
+    ) {
+      widest = Math.max(widest, measureTextCanvas(label, fontSize))
+    }
+  }
+  return widest
+}

package/src/types.ts

@@ -64,7 +64,6 @@ export interface ArcTrackModel extends BasicTrackModel {
 }
 
 export interface BasicTrack {
-  ReactComponent: React.FC<any>
   model: TextTrackModel & BarTrackModel & ArcTrackModel
 }
 

package/src/version.ts

@@ -1 +1 @@
-export const version = '8.4.1'
+export const version = '9.1.0'