react-msaview 6.5.0 → 8.0.0

package/src/components/msa/tileColor.ts

@@ -1,10 +1,8 @@
 import type { MsaViewModel } from '../../model.ts'
 
-// Per-cell tile color for the active scheme. The scheme is fixed for the whole
-// block, so resolve which rule applies once rather than re-testing the scheme
-// name inside the innermost loop. Reading only the column table the active
-// scheme needs also keeps the other one -- a per-column map for every column of
-// the alignment -- from being computed at all.
+// Per-cell tile color for the active scheme, resolved once per block. Reading
+// only the active scheme's column table leaves the other per-column table
+// uncomputed.
 export function tileColorFn(model: MsaViewModel) {
   const { colorSchemeName } = model
   if (colorSchemeName === 'clustalx_protein_dynamic') {
@@ -23,8 +21,7 @@ export function tileColorFn(model: MsaViewModel) {
 }
 
 // The column table the active scheme colors from, or undefined for the static
-// schemes. Identity of this plus the scheme name is what a cache of rendered
-// colors has to key on.
+// schemes. A cache of rendered colors keys on its identity plus the scheme name.
 export function tileColorTable(model: MsaViewModel) {
   const { colorSchemeName } = model
   if (colorSchemeName === 'clustalx_protein_dynamic') {

package/src/components/msa/useMsaBlockMouse.ts

@@ -29,9 +29,11 @@ function eventToColRow({
  * Translates pointer events over one MSA block into model column/row hover and
  * click state, and reports where a tooltip should be anchored.
  *
- * The anchor is only tracked when there is something to show (an insertion, a
- * domain under the cursor, or column stats), so plain mouse movement over the
- * alignment updates the canvas overlay without re-rendering this component.
+ * The anchor is only tracked when there is something to show (an insertion or a
+ * domain under the cursor), so plain mouse movement over the alignment updates
+ * the canvas overlay without re-rendering this component. Each track tooltips
+ * its own column statistics, and the header reads out the hovered row, residue
+ * and position.
  */
 export function useMsaBlockMouse({
   model,
@@ -62,9 +64,7 @@ export function useMsaBlockMouse({
     model.setMousePos(hit ? pos.col : undefined, hit ? pos.row : undefined)
 
     const hasTooltip =
-      !!model.hoveredInsertion ||
-      model.mouseOverDomains.length > 0 ||
-      (model.showColumnStats && !!model.mouseOverColumnStats)
+      !!model.hoveredInsertion || model.mouseOverDomains.length > 0
     setTooltipPoint(
       hasTooltip ? { x: event.clientX, y: event.clientY } : undefined,
     )

package/src/components/renderCtx.ts

@@ -19,6 +19,7 @@ export type RenderCtx = Pick<
   | 'lineWidth'
   | 'measureText'
   | 'moveTo'
+  | 'quadraticCurveTo'
   | 'resetTransform'
   | 'restore'
   | 'save'

package/src/components/rowpanels/RowPanelBlock.tsx

@@ -0,0 +1,139 @@
+import React, { useState } from 'react'
+
+import { useTheme } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import { featureField, featureName } from '../../featureFields.ts'
+import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
+import PortalTooltip from '../PortalTooltip.tsx'
+import { renderRowPanel } from './renderRowPanel.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+import type { ResolvedRowPanel } from '../../types.ts'
+
+interface Hover {
+  name: string
+  lines: string[]
+  clientX: number
+  clientY: number
+}
+
+// what the cell or span under the pointer reads, which is the field a strip
+// colors by, and a span's name, its coordinates and its encoded field
+function hoverLines({
+  model,
+  panel,
+  name,
+  x,
+}: {
+  model: MsaViewModel
+  panel: ResolvedRowPanel
+  name: string
+  x: number
+}) {
+  if (panel.kind === 'strip') {
+    return [
+      `${panel.header}: ${model.rowDataOf(name)?.[panel.field] ?? '(none)'}`,
+    ]
+  }
+  const span = panel.spans
+    .get(name)
+    ?.findLast(s => x >= s.xStart && x <= s.xEnd)
+  if (!span) {
+    return []
+  }
+  const { annotation } = span
+  const strand =
+    annotation.strand === undefined
+      ? ''
+      : annotation.strand < 0
+        ? ' (-)'
+        : ' (+)'
+  const value = panel.field ? featureField(annotation, panel.field) : undefined
+  return [
+    featureName(annotation) ?? annotation.accession,
+    `${annotation.start}-${annotation.end}${strand}`,
+    ...(value === undefined ? [] : [`${panel.field}: ${value}`]),
+  ]
+}
+
+const RowPanelBlock = observer(function ({
+  model,
+  panel,
+  offsetY,
+}: {
+  model: MsaViewModel
+  panel: ResolvedRowPanel
+  offsetY: number
+}) {
+  const [hovered, setHovered] = useState<Hover>()
+  const theme = useTheme()
+  const { blockSize, highResScaleFactor, rowHeight } = model
+  const width = panel.width
+  const height = blockSize
+  const canvasWidth = width * highResScaleFactor
+  const canvasHeight = height * highResScaleFactor
+
+  const ref = useCanvasAutorun({
+    draw: ctx => {
+      ctx.resetTransform()
+      ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+      renderRowPanel({ ctx, model, theme, panel, x: 0, offsetY })
+    },
+    width: canvasWidth,
+    height: canvasHeight,
+    deps: [model, theme, panel, offsetY],
+  })
+
+  return (
+    <>
+      <canvas
+        ref={ref}
+        width={canvasWidth}
+        height={canvasHeight}
+        style={{ position: 'absolute', top: offsetY, left: 0, width, height }}
+        onMouseMove={event => {
+          // the blocks are laid out in row space and scrolled by a transform
+          // on their container, so the pointer's row comes off the canvas box
+          const { left, top } = event.currentTarget.getBoundingClientRect()
+          const row = Math.floor((event.clientY - top + offsetY) / rowHeight)
+          const name = model.leaves[row]?.data.name
+          const lines =
+            name === undefined
+              ? []
+              : hoverLines({
+                  model,
+                  panel,
+                  name,
+                  x: event.clientX - left,
+                })
+          setHovered(
+            name === undefined || lines.length === 0
+              ? undefined
+              : {
+                  name,
+                  lines,
+                  clientX: event.clientX,
+                  clientY: event.clientY,
+                },
+          )
+          model.setMousePos(undefined, name === undefined ? undefined : row)
+        }}
+        onMouseLeave={() => {
+          setHovered(undefined)
+          model.setMousePos(undefined, undefined)
+        }}
+      />
+      {hovered ? (
+        <PortalTooltip clientX={hovered.clientX} clientY={hovered.clientY}>
+          <div>{hovered.name}</div>
+          {hovered.lines.map(line => (
+            <div key={line}>{line}</div>
+          ))}
+        </PortalTooltip>
+      ) : null}
+    </>
+  )
+})
+
+export default RowPanelBlock

package/src/components/rowpanels/RowPanelHeaders.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+
+import { observer } from 'mobx-react'
+
+import { headerRunsAcross } from './headerLayout.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+
+/**
+ * The row panel headers, in a band above the panels beside the tree ruler and
+ * the minimap. A narrow strip's name is DOM text turned on its side, since the
+ * canvas layer has no rotation, and the SVG export draws it with a
+ * `rotate(-90)`. A panel wider than the band is tall writes its name across.
+ */
+const RowPanelHeaders = observer(function ({ model }: { model: MsaViewModel }) {
+  const { resolvedRowPanels, rowPanelsHeaderHeight, fontSize } = model
+  return resolvedRowPanels.length > 0 ? (
+    <div
+      style={{
+        display: 'flex',
+        flexShrink: 0,
+        height: rowPanelsHeaderHeight,
+        alignItems: 'flex-end',
+      }}
+    >
+      {resolvedRowPanels.map(panel => {
+        const across = headerRunsAcross(panel.width)
+        return (
+          <div
+            key={panel.id}
+            title={panel.header}
+            style={{
+              width: panel.width,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              ...(across
+                ? { fontSize, textAlign: 'center' }
+                : {
+                    height: rowPanelsHeaderHeight,
+                    fontSize: Math.min(fontSize, panel.width),
+                    // vertical-rl reads top to bottom, and the half turn makes
+                    // it read upwards from the strip, as rotate(-90) exports
+                    writingMode: 'vertical-rl',
+                    transform: 'rotate(180deg)',
+                  }),
+            }}
+          >
+            {panel.header}
+          </div>
+        )
+      })}
+    </div>
+  ) : null
+})
+
+export default RowPanelHeaders

package/src/components/rowpanels/RowPanels.tsx

@@ -0,0 +1,77 @@
+import React, { useCallback, useRef } from 'react'
+
+import { observer } from 'mobx-react'
+
+import { useWheelScroll } from '../../useWheelScroll.ts'
+import RowPanelBlock from './RowPanelBlock.tsx'
+
+import type { MsaViewModel } from '../../model.ts'
+import type { ResolvedRowPanel } from '../../types.ts'
+
+const RowPanel = observer(function ({
+  model,
+  panel,
+}: {
+  model: MsaViewModel
+  panel: ResolvedRowPanel
+}) {
+  const ref = useRef<HTMLDivElement>(null)
+  const { height, blocksY, scrollY } = model
+  const onScrollY = useCallback(
+    (d: number) => {
+      model.doScrollY(d)
+    },
+    [model],
+  )
+  const { onMouseDown, onMouseUp } = useWheelScroll({ ref, onScrollY })
+
+  return (
+    <div
+      ref={ref}
+      data-testid={`rowpanel_${panel.id}`}
+      onMouseDown={onMouseDown}
+      onMouseUp={onMouseUp}
+      style={{
+        height,
+        width: panel.width,
+        flexShrink: 0,
+        overflow: 'hidden',
+        position: 'relative',
+      }}
+    >
+      {/* one transform for the whole block set, matching TreeCanvas: the
+      strips scroll in lockstep with the tree and the alignment */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          transform: `translateY(${scrollY}px)`,
+          willChange: 'transform',
+        }}
+      >
+        {blocksY.map(block => (
+          <RowPanelBlock
+            key={block}
+            model={model}
+            panel={panel}
+            offsetY={block}
+          />
+        ))}
+      </div>
+    </div>
+  )
+})
+
+const RowPanels = observer(function ({ model }: { model: MsaViewModel }) {
+  const { resolvedRowPanels } = model
+  return resolvedRowPanels.length > 0 ? (
+    <div style={{ display: 'flex', flexShrink: 0 }}>
+      {resolvedRowPanels.map(panel => (
+        <RowPanel key={panel.id} model={model} panel={panel} />
+      ))}
+    </div>
+  ) : null
+})
+
+export default RowPanels

package/src/components/rowpanels/headerLayout.ts

@@ -0,0 +1,5 @@
+import { rowPanelHeaderHeight } from '../../constants.ts'
+
+export function headerRunsAcross(panelWidth: number) {
+  return panelWidth > rowPanelHeaderHeight
+}

package/src/components/rowpanels/renderFeaturePanel.ts

@@ -0,0 +1,66 @@
+import { contrastTextFn } from '../../util.ts'
+import { getVisibleLeaves } from '../getVisibleLeaves.ts'
+import { drawFeatureSpans, spanRows } from '../msa/drawFeatureSpans.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+import type { ResolvedFeaturePanel, RowPanelSpan } from '../../types.ts'
+import type { RenderCtx } from '../renderCtx.ts'
+import type { Theme } from '@mui/material'
+
+// a span keeps a pixel clear above and below it, so stacked lanes and adjacent
+// rows read apart
+const rowPadding = 2
+
+/**
+ * The spans of a `features` panel, drawn with the mark the alignment overlay
+ * draws: an arrow where the feature carries a strand, a box otherwise, labeled
+ * where the text fits. The x mapping is the panel's own, resolved in
+ * `resolvedRowPanels`; a row needing several lanes divides its height between
+ * them.
+ */
+export function renderFeaturePanel({
+  ctx,
+  model,
+  theme,
+  panel,
+  x,
+  offsetY,
+  blockSizeYOverride,
+  highResScaleFactorOverride,
+}: {
+  ctx: RenderCtx
+  model: MsaViewModel
+  theme: Theme
+  panel: ResolvedFeaturePanel
+  x: number
+  offsetY: number
+  blockSizeYOverride?: number
+  highResScaleFactorOverride?: number
+}) {
+  const { rowHeight, blockSize, highResScaleFactor } = model
+  const by = blockSizeYOverride ?? blockSize
+  const k = highResScaleFactorOverride ?? highResScaleFactor
+  ctx.resetTransform()
+  ctx.scale(k, k)
+  ctx.translate(x, rowHeight / 2 - offsetY)
+
+  drawFeatureSpans<RowPanelSpan>({
+    ctx,
+    rows: spanRows(
+      getVisibleLeaves({ model, offsetY, blockSizeY: by }),
+      panel.spans,
+    ),
+    layout: {
+      height: laneCount => Math.max(1, rowHeight / laneCount - rowPadding),
+      top: (y, lane, h) =>
+        y - rowHeight + lane * (h + rowPadding) + rowPadding / 2,
+      headLength: h => h,
+    },
+    xOf: span => [span.xStart, span.xEnd],
+    colors: panel.colors,
+    labelOf: span => panel.labels?.get(span.annotation),
+    contrastText: contrastTextFn(theme),
+    xMin: 0,
+    xMax: panel.width,
+  })
+}

package/src/components/rowpanels/renderRowPanel.ts

@@ -0,0 +1,41 @@
+import { renderFeaturePanel } from './renderFeaturePanel.ts'
+import { renderStrip } from './renderStrip.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+import type { ResolvedRowPanel } from '../../types.ts'
+import type { RenderCtx } from '../renderCtx.ts'
+import type { Theme } from '@mui/material'
+
+interface PanelArgs {
+  ctx: RenderCtx
+  model: MsaViewModel
+  theme: Theme
+  panel: ResolvedRowPanel
+  x: number
+  offsetY: number
+  blockSizeYOverride?: number
+  highResScaleFactorOverride?: number
+}
+
+/**
+ * One row panel, by kind. `x` is the panel's left edge in the context: the
+ * live view gives each panel a canvas of its own and passes 0, and the export
+ * packs every panel into one context and passes the panel's own offset.
+ */
+export function renderRowPanel({ panel, ...rest }: PanelArgs) {
+  if (panel.kind === 'features') {
+    renderFeaturePanel({ panel, ...rest })
+  } else {
+    renderStrip({ panel, ...rest })
+  }
+}
+
+/** every row panel side by side in one context, for the SVG export */
+export function renderRowPanels({
+  model,
+  ...rest
+}: Omit<PanelArgs, 'panel' | 'x'>) {
+  for (const panel of model.resolvedRowPanels) {
+    renderRowPanel({ model, panel, x: panel.offsetX, ...rest })
+  }
+}

package/src/components/rowpanels/renderStrip.ts

@@ -0,0 +1,46 @@
+import { getVisibleLeaves } from '../getVisibleLeaves.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+import type { ResolvedStripPanel } from '../../types.ts'
+import type { RenderCtx } from '../renderCtx.ts'
+
+/**
+ * One cell per row of a `strip` panel, in the color its field takes through
+ * the panel's scale. A row the table has no value for leaves the cell empty.
+ *
+ * `x` is the panel's left edge in the context: the live view gives each panel
+ * a canvas of its own and passes 0, and the export packs every panel into one
+ * context and passes the panel's own offset.
+ */
+export function renderStrip({
+  ctx,
+  model,
+  panel,
+  x,
+  offsetY,
+  blockSizeYOverride,
+  highResScaleFactorOverride,
+}: {
+  ctx: RenderCtx
+  model: MsaViewModel
+  panel: ResolvedStripPanel
+  x: number
+  offsetY: number
+  blockSizeYOverride?: number
+  highResScaleFactorOverride?: number
+}) {
+  const { rowHeight, blockSize, highResScaleFactor } = model
+  const by = blockSizeYOverride ?? blockSize
+  ctx.resetTransform()
+  const k = highResScaleFactorOverride ?? highResScaleFactor
+  ctx.scale(k, k)
+  ctx.translate(x, -offsetY)
+  for (const leaf of getVisibleLeaves({ model, offsetY, blockSizeY: by })) {
+    const color = panel.colors.get(leaf.data.name)
+    if (color) {
+      ctx.fillStyle = color
+      // leaf.x is the row's center, at rowHeight*(index+0.5)
+      ctx.fillRect(0, leaf.x! - rowHeight / 2, panel.width, rowHeight)
+    }
+  }
+}

package/src/components/tracks/TrackBlocks.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
+import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
-import { useColorContrast } from '../../useColorContrast.ts'
 import { TrackResizeHandle } from '../ResizeHandles.tsx'
 import { drawTrackBlock } from './drawTracks.ts'
 
@@ -19,11 +19,9 @@ const TrackBlock = observer(function ({
   track: BasicTrack
   offsetX: number
 }) {
-  const { blockSize, colorScheme, highResScaleFactor } = model
-  const { height, customColorScheme } = track.model
-  const { theme, contrastScheme } = useColorContrast(
-    customColorScheme ?? colorScheme,
-  )
+  const { blockSize, highResScaleFactor } = model
+  const { height } = track.model
+  const theme = useTheme()
   const canvasWidth = blockSize * highResScaleFactor
   const canvasHeight = height * highResScaleFactor
 
@@ -31,11 +29,11 @@ const TrackBlock = observer(function ({
     draw: ctx => {
       ctx.resetTransform()
       ctx.clearRect(0, 0, canvasWidth, canvasHeight)
-      drawTrackBlock({ model, ctx, track, offsetX, theme, contrastScheme })
+      drawTrackBlock({ model, ctx, track, offsetX, theme })
     },
     width: canvasWidth,
     height: canvasHeight,
-    deps: [model, track, offsetX, theme, contrastScheme],
+    deps: [model, track, offsetX, theme],
   })
 
   return (
@@ -66,17 +64,14 @@ const TrackBlocks = observer(function ({
   model: MsaViewModel
   track: BasicTrack
 }) {
-  // msaCanvasWidth, not msaAreaWidth: a track row is a legend for the columns
-  // directly below it, so it has to stop where the alignment canvas does rather
-  // than running on another 20px under the vertical scrollbar -- otherwise the
-  // last columns appear in the tracks but not in the alignment, and the hovered
-  // -column indicator (sized to the canvas) stops short of the track it crosses
+  // msaCanvasWidth, not msaAreaWidth: tracks stop where the alignment canvas
+  // does, not 20px further under the vertical scrollbar, so their columns and
+  // the hover indicator line up with the alignment
   const { blocksX, msaCanvasWidth, scrollX } = model
-  const { kind, height, data } = track.model
+  const { kind, height, data, arcs } = track.model
 
-  // a text track with no data draws nothing, and an empty row of its own would
-  // still take up vertical space
-  if (kind === 'text' && !data) {
+  // a track with nothing to draw would still take up its vertical space
+  if ((kind === 'text' && !data) || (kind === 'arc' && !arcs?.length)) {
     return null
   }
 
@@ -103,7 +98,7 @@ const TrackBlocks = observer(function ({
           <TrackBlock key={bx} model={model} track={track} offsetX={bx} />
         ))}
       </div>
-      <TrackResizeHandle model={model} kind={kind} />
+      <TrackResizeHandle model={model} track={track} />
     </div>
   )
 })