react-msaview 9.0.0 → 9.1.1

package/src/components/tree/TreeMenu.tsx

@@ -30,7 +30,7 @@ const TreeMenu = observer(function ({
   const { name, id, leaf } = node
   const isCollapsed = collapsed.includes(id)
   const isRoot = id === model.tree.id
-  const noun = leaf ? 'subtree' : 'this node'
+  const noun = leaf ? 'subtree' : 'clade'
   return (
     <Menu
       anchorReference="anchorPosition"
@@ -73,9 +73,7 @@ const TreeMenu = observer(function ({
             onClose()
           }}
         >
-          {showOnly === id
-            ? 'Disable show only this node'
-            : 'Show only this node'}
+          {showOnly === id ? 'Show all rows' : 'Show only this clade'}
         </MenuItem>
       )}
       {leaf || isCollapsed ? null : (
@@ -86,7 +84,7 @@ const TreeMenu = observer(function ({
             onClose()
           }}
         >
-          Rotate this node
+          Rotate clade
         </MenuItem>
       )}
       {isRoot ? null : (
@@ -108,7 +106,7 @@ const TreeMenu = observer(function ({
             onClose()
           }}
         >
-          Indicate differences from this row
+          Use as reference row
         </MenuItem>
       ) : null}
       {leaf && relativeTo ? (

package/src/components/tree/TreeOverview.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 
-import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import { useCanvasTheme } from '../../darkReader.ts'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import {
   drawTreeOverview,
@@ -22,7 +22,7 @@ import type { MsaViewModel } from '../../model.ts'
  */
 const TreeOverview = observer(function ({ model }: { model: MsaViewModel }) {
   const { effectiveTreeAreaWidth, overviewHeight, highResScaleFactor } = model
-  const theme = useTheme()
+  const theme = useCanvasTheme()
   const [hover, setHover] = useState<{ id: string; rows: [number, number] }>()
   const width = Math.round(effectiveTreeAreaWidth * highResScaleFactor)
   const height = Math.round(overviewHeight * highResScaleFactor)

package/src/components/tree/cladeBrackets.ts

@@ -1,6 +1,7 @@
 import { labelFitFontSize } from '../../constants.ts'
 import { measureTextCanvas } from '../../measureTextCanvas.ts'
 
+import type { MsaViewModel } from '../../model.ts'
 import type { Clade, ResolvedClade } from '../../types.ts'
 
 // The bar of the bracket mark and the space around it, in px.
@@ -19,7 +20,7 @@ export function cladeInGutter(clade: Pick<Clade, 'mark' | 'label'>) {
 }
 
 /** the pixel height of the rows a clade covers */
-export function cladeHeight(clade: ResolvedClade, rowHeight: number) {
+function cladeHeight(clade: ResolvedClade, rowHeight: number) {
   return (clade.rows[1] - clade.rows[0] + 1) * rowHeight
 }
 
@@ -27,7 +28,7 @@ export function cladeHeight(clade: ResolvedClade, rowHeight: number) {
  * Whether a label reads across the rows. It does where they are taller than the
  * font, and runs up the bar where they are not.
  */
-export function cladeLabelHorizontal(
+function cladeLabelHorizontal(
   clade: ResolvedClade,
   rowHeight: number,
   fontSize: number,
@@ -36,7 +37,7 @@ export function cladeLabelHorizontal(
 }
 
 /** the px between the left edge of the gutter and the label's own column */
-export function cladeLabelOffset(clade: Pick<Clade, 'mark'>) {
+function cladeLabelOffset(clade: Pick<Clade, 'mark'>) {
   return clade.mark === 'bracket'
     ? bracketGap + bracketBarWidth + bracketGap
     : bracketGap
@@ -64,3 +65,49 @@ export function cladeGutterWidth(clades: Pick<Clade, 'mark' | 'label'>[]) {
   // the measurement here sized the gutter for
   return Math.min(maxCladeGutterWidth, Math.ceil(widest))
 }
+
+/**
+ * The box each gutter label takes, in unscrolled tree-area px: from the
+ * label's column to the right edge of the gutter, across the clade's rows. The
+ * live view sets DOM text in it, and the SVG export a `<text>`.
+ */
+export function cladeLabelBoxes(
+  model: Pick<
+    MsaViewModel,
+    | 'resolvedClades'
+    | 'cladeGutterWidth'
+    | 'rowHeight'
+    | 'effectiveTreeAreaWidth'
+    | 'fontSize'
+  >,
+) {
+  const {
+    resolvedClades,
+    cladeGutterWidth,
+    rowHeight,
+    effectiveTreeAreaWidth,
+    fontSize,
+  } = model
+  const gutterLeft = effectiveTreeAreaWidth - cladeGutterWidth
+  return cladeGutterWidth === 0
+    ? []
+    : resolvedClades.flatMap((clade, index) => {
+        const { label, markColor, rows } = clade
+        if (!label || !cladeInGutter(clade)) {
+          return []
+        }
+        const left = gutterLeft + cladeLabelOffset(clade)
+        return [
+          {
+            key: `${rows[0]}-${rows[1]}-${index}`,
+            label,
+            color: markColor,
+            left,
+            top: rows[0] * rowHeight,
+            width: effectiveTreeAreaWidth - left - bracketGap,
+            height: cladeHeight(clade, rowHeight),
+            horizontal: cladeLabelHorizontal(clade, rowHeight, fontSize),
+          },
+        ]
+      })
+}

package/src/components/tree/renderTreeCanvas.ts

@@ -36,7 +36,7 @@ function inYBlock(y: number, offsetY: number, by: number, pad: number) {
 /**
  * Every node whose subtree reaches into the block, skipping the subtrees that
  * do not. A subtree's leaves are one contiguous run of rows, recorded by
- * clusterLayout as xMin/xMax, so a block of a 200k-tip tree visits a few dozen
+ * layoutTree as xMin/xMax, so a block of a 200k-tip tree visits a few dozen
  * nodes.
  *
  * A link out of a visited node is drawn even when its child is pruned, so a
@@ -706,18 +706,7 @@ export function renderTreeCanvas({
 
   // memoized on the model and shared across the tree/bubble/label passes (and
   // across all tree blocks) rather than re-traversing the hierarchy in each
-  const {
-    maxBranchLength,
-    maxDepthToLeaf,
-    showBranchLenEffective,
-    effectiveTreeWidth,
-  } = model
-  // pixel x of the tips. A phylogram scales branch lengths so the longest
-  // root-to-tip path lands at maxBranchLength; a cladogram ignores lengths and
-  // spreads topological depth across the whole tree area instead. Reusing
-  // maxBranchLength for the cladogram would pin every node to x=0 for a tree
-  // with no branch lengths -- which is exactly what forces cladogram mode.
-  const tipX = showBranchLenEffective ? maxBranchLength : effectiveTreeWidth
+  const { maxDepthToLeaf, effectiveTreeWidth: tipX } = model
   // built once for all three passes: each of them asks about a different node on
   // every block of every redraw, and `collapsed` is a list
   const collapsedSet = new Set(model.collapsed)

package/src/components/tree/renderTreeOverview.ts

@@ -1,4 +1,5 @@
 import { descendants } from '../../hierarchy.ts'
+import { makeOffscreenCanvas } from '../msa/msaRaster.ts'
 import { getNodeX } from './renderTreeCanvas.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
@@ -62,10 +63,10 @@ export function drawTreeOverview({
       continue
     }
     const sx = nodeX(source)
-    const sy = rowY(source.x!)
+    const sy = rowY(source.x)
     for (const target of source.children) {
       const tx = nodeX(target)
-      const ty = rowY(target.x!)
+      const ty = rowY(target.x)
       if (Math.abs(tx - sx) < 1 && Math.abs(ty - sy) < 1) {
         continue
       }
@@ -158,17 +159,8 @@ function overviewKeys({
   ]
 }
 
-function makeCanvas(width: number, height: number) {
-  const canvas =
-    typeof OffscreenCanvas !== 'undefined'
-      ? new OffscreenCanvas(width, height)
-      : typeof document !== 'undefined'
-        ? Object.assign(document.createElement('canvas'), { width, height })
-        : undefined
-  const ctx = canvas?.getContext('2d')
-  return ctx && typeof (ctx as CanvasRenderingContext2D).stroke === 'function'
-    ? { canvas: canvas as RasterCanvas, ctx: ctx as CanvasRenderingContext2D }
-    : undefined
+function canStroke(ctx: unknown): ctx is CanvasRenderingContext2D {
+  return typeof (ctx as CanvasRenderingContext2D | null)?.stroke === 'function'
 }
 
 /**
@@ -198,9 +190,10 @@ export function treeOverviewImage({
   if (prev && keys.every((key, i) => key === prev.keys[i])) {
     return prev.canvas
   }
-  const made = makeCanvas(
+  const made = makeOffscreenCanvas(
     Math.max(1, Math.round(width * scale)),
     Math.max(1, Math.round(height * scale)),
+    canStroke,
   )
   if (made) {
     made.ctx.scale(scale, scale)

package/src/constants.ts

@@ -50,6 +50,10 @@ export const defaultScrollZoomAxis: ScrollZoomAxis = 'both'
 export const minLetterRowHeight = 8
 export const minLetterColWidth = 5
 
+// A wheel-zoom frame draws a block's letters only when the block holds at most
+// this many cells; the settle redraw after the gesture draws the rest
+export const zoomFrameMaxLetters = 2000
+
 // A feature span draws its label at two pixels under its height, capped at 11,
 // so a span shorter than this holds no readable text: an underline bar, a
 // sub-row band or a features panel over small rows
@@ -68,9 +72,12 @@ export const labelFitFontSize = fontSizeFor(defaultRowHeight)
 // zoom-in buttons (which otherwise grow unbounded). minColWidth/minRowHeight are
 // the smooth-zoom floors.
 export const minColWidth = 0.2
-export const minRowHeight = 1
+export const minRowHeight = 0.2
 export const maxCellSize = 80
 
+// the settings panel's width, which it takes out of the view's
+export const settingsPanelWidth = 280
+
 // MSA model defaults
 export const defaultBgColor = true
 export const defaultColorSchemeName = 'maeditor'
@@ -99,6 +106,7 @@ export const defaultDrawTree = true
 export const defaultDrawNodeBubbles = true
 export const defaultDrawNodeLabels = false
 export const defaultShowTreeOverview = false
+export const defaultShowTreeScaleBar = false
 export const defaultOverviewHeight = 120
 
 // Neighbor joining does not run above this many rows. The distance matrix is

package/src/darkReader.ts

@@ -0,0 +1,57 @@
+import { useSyncExternalStore } from 'react'
+
+import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
+import { useTheme } from '@mui/material'
+
+import type { Theme } from '@mui/material'
+
+// Dark Reader's Dynamic mode rewrites the page's CSS and leaves canvas pixels
+// alone, so a light theme's black letters land on the dark page it paints.
+// Inlined from @jbrowse/core/util/systemColorScheme, which an older host core
+// lacks (see CLAUDE.md on externals).
+const DARK_READER_ATTRIBUTE = 'data-darkreader-scheme'
+
+function darkReaderIsDark() {
+  return (
+    typeof document !== 'undefined' &&
+    document.documentElement.getAttribute(DARK_READER_ATTRIBUTE) === 'dark'
+  )
+}
+
+function onDarkReaderChange(listener: () => void) {
+  if (
+    typeof MutationObserver !== 'function' ||
+    typeof document === 'undefined'
+  ) {
+    return () => {}
+  }
+  const observer = new MutationObserver(listener)
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: [DARK_READER_ATTRIBUTE],
+  })
+  return () => {
+    observer.disconnect()
+  }
+}
+
+let darkTheme: Theme | undefined
+
+/**
+ * The theme a canvas draws in: the surrounding MUI theme, or a dark one while
+ * Dark Reader darkens a light page. The DOM keeps the surrounding theme, which
+ * Dark Reader restyles itself, and the SVG export keeps it too.
+ */
+export function useCanvasTheme() {
+  const theme = useTheme()
+  const darkReader = useSyncExternalStore(
+    onDarkReaderChange,
+    darkReaderIsDark,
+    () => false,
+  )
+  if (darkReader && theme.palette.mode !== 'dark') {
+    darkTheme ??= createJBrowseTheme({ palette: { mode: 'dark' } })
+    return darkTheme
+  }
+  return theme
+}

package/src/element.ts

@@ -5,16 +5,7 @@ import { mount } from './mount.tsx'
 import type { MSAViewerProps } from './components/MSAViewer.tsx'
 import type { MsaViewModel } from './model.ts'
 import type { MountedViewer } from './mount.tsx'
-import type {
-  Cell,
-  ColorScheme,
-  ColumnTrackSpec,
-  Feature,
-  Highlight,
-  MsaSelection,
-  ResidueMapping,
-  Viewport,
-} from './types.ts'
+import type { Cell, Highlight, MsaSelection, Viewport } from './types.ts'
 
 type ElementData = Pick<
   MSAViewerProps,
@@ -29,6 +20,17 @@ type ElementData = Pick<
   | 'selection'
 >
 
+const dataProperties = [
+  'msa',
+  'tree',
+  'gff',
+  'features',
+  'colorScheme',
+  'highlights',
+  'columnTracks',
+  'residueMappings',
+] as const satisfies (keyof ElementData)[]
+
 interface NightingaleManager extends HTMLElement {
   register: (element: HTMLElement) => void
   unregister: (element: HTMLElement) => void
@@ -49,10 +51,6 @@ const ownAttributes = [
 // the attributes a <nightingale-manager> writes on the elements it holds
 const nightingaleAttributes = ['display-start', 'display-end', 'highlight']
 
-function location(uri: string | null) {
-  return uri ? { uri, locationType: 'UriLocation' as const } : undefined
-}
-
 function numberAttribute(value: string | null | undefined) {
   const n = value ? Number(value) : Number.NaN
   return Number.isFinite(n) ? n : undefined
@@ -119,54 +117,29 @@ export function defineMsaElement(tagName = 'jbrowse-msa') {
     #reported?: { start: number; end: number }
     #data: ElementData = {}
 
-    get msa() {
-      return this.#data.msa
-    }
-    set msa(value: string | undefined) {
-      this.#setData({ msa: value })
-    }
-    get tree() {
-      return this.#data.tree
-    }
-    set tree(value: string | undefined) {
-      this.#setData({ tree: value })
-    }
-    get gff() {
-      return this.#data.gff
-    }
-    set gff(value: string | undefined) {
-      this.#setData({ gff: value })
-    }
-    get features() {
-      return this.#data.features
-    }
-    set features(value: Feature[] | undefined) {
-      this.#setData({ features: value })
-    }
-    get colorScheme() {
-      return this.#data.colorScheme
-    }
-    set colorScheme(value: ColorScheme | undefined) {
-      this.#setData({ colorScheme: value })
-    }
-    get highlights() {
-      return this.#data.highlights
-    }
-    set highlights(value: Highlight[] | undefined) {
-      this.#setData({ highlights: value })
-    }
-    get columnTracks() {
-      return this.#data.columnTracks
-    }
-    set columnTracks(value: ColumnTrackSpec[] | undefined) {
-      this.#setData({ columnTracks: value })
-    }
-    get residueMappings() {
-      return this.#data.residueMappings
-    }
-    set residueMappings(value: ResidueMapping[] | undefined) {
-      this.#setData({ residueMappings: value })
+    declare msa: ElementData['msa']
+    declare tree: ElementData['tree']
+    declare gff: ElementData['gff']
+    declare features: ElementData['features']
+    declare colorScheme: ElementData['colorScheme']
+    declare highlights: ElementData['highlights']
+    declare columnTracks: ElementData['columnTracks']
+    declare residueMappings: ElementData['residueMappings']
+
+    static {
+      for (const key of dataProperties) {
+        Object.defineProperty(MsaElement.prototype, key, {
+          configurable: true,
+          get(this: MsaElement) {
+            return this.#data[key]
+          },
+          set(this: MsaElement, value: ElementData[typeof key]) {
+            this.#setData({ [key]: value })
+          },
+        })
+      }
     }
+
     // the viewer's selection, which the reader's drags change
     get selection() {
       return this.#model ? this.#model.selection : this.#data.selection
@@ -188,9 +161,9 @@ export function defineMsaElement(tagName = 'jbrowse-msa') {
       const theme = this.getAttribute('theme')
       return {
         ...this.#data,
-        msaFilehandle: location(this.getAttribute('msa-url')),
-        treeFilehandle: location(this.getAttribute('tree-url')),
-        gffFilehandle: location(this.getAttribute('gff-url')),
+        msaUrl: this.getAttribute('msa-url') ?? undefined,
+        treeUrl: this.getAttribute('tree-url') ?? undefined,
+        gffUrl: this.getAttribute('gff-url') ?? undefined,
         colorScheme:
           this.#data.colorScheme ??
           this.getAttribute('color-scheme') ??

package/src/exportLayout.ts

@@ -0,0 +1,134 @@
+import { legendRows } from './components/msa/legendRows.ts'
+import { treeScaleBarHeight } from './constants.ts'
+
+import type { LegendRow } from './components/msa/legendRows.ts'
+import type { MsaViewModel } from './model.ts'
+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
+export const LEGEND_PAD = 8
+export const LEGEND_ROW_H = 16
+export const LEGEND_SWATCH = 12
+export const LEGEND_FONT = 12
+export const LEGEND_CHAR_W = 7
+
+export const LEGEND_MAX_W = 360
+export const LEGEND_TEXT_X = LEGEND_PAD + LEGEND_SWATCH + 6
+
+export 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))
+}
+
+export 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
+export 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
+}
+
+export function getLayout(model: MsaViewModel, opts: ExportSvgOptions): Layout {
+  const {
+    scrollX,
+    scrollY,
+    totalWidth,
+    totalHeight,
+    effectiveTreeAreaWidth,
+    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 = effectiveTreeAreaWidth + 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,
+      }
+}
+
+/**
+ * the exported page's size: the layout plus the legend column, and as tall as
+ * the legend where the key outgrows a short alignment
+ */
+export function exportPageSize(model: MsaViewModel, layout: Layout) {
+  const { width, height, legendWidth, topHeight } = layout
+  return {
+    width: width + legendWidth,
+    height:
+      legendWidth > 0
+        ? Math.max(height, topHeight + legendHeight(legendRows(model.legends)))
+        : height,
+  }
+}