react-msaview 7.0.0 → 8.1.0

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -1,13 +1,16 @@
-import { subFeatureRowHeight } from '../../constants.ts'
+import { domainUnderlineHeight, subFeatureRowHeight } from '../../constants.ts'
+import { contrastTextFn } from '../../util.ts'
 import { getVisibleLeaves } from '../getVisibleLeaves.ts'
+import { drawFeatureSpans, spanRows } from './drawFeatureSpans.ts'
 
-import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
-import type { NodeWithIdsAndLength } from '../../types.ts'
+import type { DomainBand } from '../../types.ts'
 import type { RenderCtx } from '../renderCtx.ts'
+import type { Theme } from '@mui/material'
 
 export function renderBoxFeatureCanvasBlock({
   model,
+  theme,
   offsetX,
   offsetY,
   ctx,
@@ -18,144 +21,85 @@ export function renderBoxFeatureCanvasBlock({
   offsetX: number
   offsetY: number
   model: MsaViewModel
+  theme: Theme
   ctx: RenderCtx
   highResScaleFactorOverride?: number
   blockSizeXOverride?: number
   blockSizeYOverride?: number
-}) {
-  const { blockSize, rowHeight, highResScaleFactor, actuallyShowDomains } =
-    model
-  if (actuallyShowDomains) {
-    const k = highResScaleFactorOverride ?? highResScaleFactor
-    const bx = blockSizeXOverride ?? blockSize
-    const by = blockSizeYOverride ?? blockSize
-    ctx.resetTransform()
-    ctx.scale(k, k)
-    ctx.translate(-offsetX, rowHeight / 2 - offsetY)
-
-    drawTiles({
-      model,
-      ctx,
-      visibleLeaves: getVisibleLeaves({ model, offsetY, blockSizeY: by }),
-      offsetX,
-      blockWidth: bx,
-    })
-  }
-}
-
-function drawTiles({
-  model,
-  ctx,
-  visibleLeaves,
-  offsetX,
-  blockWidth,
-}: {
-  model: MsaViewModel
-  ctx: RenderCtx
-  visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
-  offsetX: number
-  blockWidth: number
 }) {
   const {
+    blockSize,
+    rowHeight,
+    highResScaleFactor,
+    actuallyShowDomains,
     subFeatureRows,
     colWidth,
-    rowHeight,
-    fillPalette,
-    strokePalette,
+    featureColors,
+    featureLabels,
     segmentLabels,
     showMsaLetters,
+    domainUnderline,
     domainBands,
   } = model
-  const h = subFeatureRows ? subFeatureRowHeight : rowHeight
+  if (!actuallyShowDomains) {
+    return
+  }
+  const k = highResScaleFactorOverride ?? highResScaleFactor
+  const bx = blockSizeXOverride ?? blockSize
+  const by = blockSizeYOverride ?? blockSize
+  ctx.resetTransform()
+  ctx.scale(k, k)
+  ctx.translate(-offsetX, rowHeight / 2 - offsetY)
+
+  // the plain and underline modes give every band the same height; a sub-row
+  // band is thinner, and how thin depends on how many lanes its row needs
+  const barHeight = domainUnderline
+    ? Math.min(domainUnderlineHeight, rowHeight)
+    : rowHeight
   // exon numbers label the bands only when residue letters aren't drawn (zoomed
   // out); when letters show, the alternating shades alone mark the boundaries
-  // and a number would collide with the sequence
-  const drawSegmentLabels = !showMsaLetters && !subFeatureRows && h >= 9
-  // gene arrow heads stick out one row-height past the band, so pad the cull
-  // window enough that a band just outside the block still draws its head
-  const cull = h + colWidth
-  const xMin = offsetX - cull
-  const xMax = offsetX + blockWidth + cull
-
+  // and a number would collide with the sequence. A featureLabel encoding names
+  // what every span carries instead
+  const drawSegmentLabels = !featureLabels && !showMsaLetters && !subFeatureRows
   // a segment (exon) number labels its band once per block, on the topmost
   // visible row carrying that segment, so it reads as a column header for the
   // whole band. Keyed by accession rather than drawn on row 0, because the rows
   // carrying the gene model are often not the first ones in the alignment
   const labelled = drawSegmentLabels ? new Set<string>() : undefined
 
-  for (const node of visibleLeaves) {
-    const y = node.x!
-    const bands = domainBands.get(node.data.name)
-
-    if (bands) {
-      for (const { annotation, startCol, endCol, stackIndex } of bands) {
-        const { accession, strand } = annotation
-        const x = startCol * colWidth
-        const lw = colWidth * (endCol - startCol)
-        if (x + lw >= xMin && x <= xMax) {
-          const t = y - rowHeight + (subFeatureRows ? stackIndex * h : 0)
-          ctx.fillStyle = fillPalette[accession]!
-          ctx.strokeStyle = strokePalette[accession]!
-          if (strand === undefined) {
-            ctx.fillRect(x, t, lw, h)
-            ctx.strokeRect(x, t, lw, h)
-            const label =
-              labelled && !labelled.has(accession)
-                ? segmentLabels.get(accession)
-                : undefined
-            if (label !== undefined) {
-              const fontSize = Math.min(h - 2, 11)
-              ctx.font = `${fontSize}px sans-serif`
-              if (ctx.measureText(label).width + 2 <= lw) {
-                labelled!.add(accession)
-                ctx.fillStyle = '#222'
-                ctx.textAlign = 'center'
-                ctx.textBaseline = 'middle'
-                ctx.fillText(label, x + lw / 2, t + h / 2)
-              }
-            }
-          } else {
-            drawGeneArrow({ ctx, x, t, w: lw, h, strand })
-          }
-        }
-      }
-    }
-  }
-}
-
-// A gene arrow: a full-width rectangular body spanning the feature's
-// start..end columns, plus a triangular head that points *beyond* that end in
-// the strand direction (right for +, left for -). Keeping the body aligned to
-// the exact start/end columns means + and - strand features read as having the
-// same boundaries; the arrow lives outside them purely to show transcription
-// direction, preserving the column-by-column homology down the rows.
-function drawGeneArrow({
-  ctx,
-  x,
-  t,
-  w,
-  h,
-  strand,
-}: {
-  ctx: RenderCtx
-  x: number
-  t: number
-  w: number
-  h: number
-  strand: number
-}) {
-  // body spans bodyStart..bodyEnd (the exact columns); the head extends one
-  // row-height past bodyEnd in the strand direction
-  const dir = strand > 0 ? 1 : -1
-  const bodyStart = strand > 0 ? x : x + w
-  const bodyEnd = strand > 0 ? x + w : x
-  ctx.beginPath()
-  ctx.moveTo(bodyStart, t)
-  ctx.lineTo(bodyEnd, t)
-  ctx.lineTo(bodyEnd + dir * h, t + h / 2)
-  ctx.lineTo(bodyEnd, t + h)
-  ctx.lineTo(bodyStart, t + h)
-  ctx.closePath()
-  ctx.fill()
-  ctx.stroke()
+  drawFeatureSpans<DomainBand>({
+    ctx,
+    rows: spanRows(
+      getVisibleLeaves({ model, offsetY, blockSizeY: by }),
+      domainBands,
+    ),
+    layout: {
+      // sub-rows are thin, but a row whose lanes would spill onto the row below
+      // shares out the row height between them instead
+      height: laneCount =>
+        subFeatureRows
+          ? Math.min(subFeatureRowHeight, rowHeight / laneCount)
+          : barHeight,
+      top: (y, lane, h) =>
+        y -
+        rowHeight +
+        (subFeatureRows ? lane * h : domainUnderline ? rowHeight - h : 0),
+      headLength: h => (domainUnderline ? rowHeight / 2 : h),
+      // a head only as tall as an underline bar tapers over ten pixels of
+      // three, which reads as nothing; it takes the lower two fifths of the
+      // row instead, leaving the letters above it
+      headRise: h => (domainUnderline ? Math.max(0, rowHeight * 0.4 - h) : 0),
+    },
+    xOf: band => [band.startCol * colWidth, band.endCol * colWidth],
+    colors: featureColors,
+    labelOf: band =>
+      featureLabels?.get(band.annotation) ??
+      (labelled && !labelled.has(band.annotation.accession)
+        ? segmentLabels.get(band.annotation.accession)
+        : undefined),
+    labelDrawn: band => labelled?.add(band.annotation.accession),
+    contrastText: contrastTextFn(theme),
+    xMin: offsetX,
+    xMax: offsetX + bx,
+  })
 }

package/src/components/msa/renderHighlights.ts

@@ -5,17 +5,16 @@ import type { MsaViewModel } from '../../model.ts'
 import type { RenderCtx } from '../renderCtx.ts'
 import type { Theme } from '@mui/material'
 
-// a stronger fill plus a solid border, so a domain/motif band reads clearly over
-// the colored alignment cells (the faint hover-style wash alone is invisible
-// against clustalx coloring)
+// a fill plus a solid border; the hover wash alone is invisible over clustalx
+// coloring
 export const highlightFill = 'rgba(255,140,0,0.28)'
 export const highlightBorder = 'rgba(210,90,0,0.95)'
 export const highlightRowFill = 'rgba(255,140,0,0.18)'
 
 export const labelFontSize = 11
 const labelPad = 3
-// the label box a highlight draws above its band, and the reason a tree block
-// has to consider rows a little outside itself
+// the label box above a highlight band; tree blocks also check rows this far
+// outside themselves
 export const highlightLabelHeight = labelFontSize + labelPad * 2
 
 export interface LabelBox {
@@ -29,11 +28,9 @@ export interface LabelBox {
  * A highlight's label, over its band where it fits and beside it where it does
  * not, kept inside `bounds` and out of the way of the labels already placed.
  *
- * Two single-residue highlights a column apart both want the same few pixels to
- * the right of their bands, and a band scrolled off the left edge wants its
- * label off-frame with it: the first overdrew two labels into an unreadable
- * smudge, the second left the visible band untitled. Pass `placed` and each
- * later label steps down a row instead of over the one before.
+ * `bounds` keeps the label of a band scrolled partly off the left edge visible.
+ * With `placed`, a label that would overlap an earlier one, as two
+ * single-residue highlights a column apart do, steps down a row.
  */
 export function drawHighlightLabel({
   ctx,
@@ -81,11 +78,16 @@ export function drawHighlightLabel({
 }
 
 /**
- * The persistent `highlights` overlay on the alignment: row tints, bordered
- * column bands, and a label above each band. `offsetX`/`offsetY` are the
- * content coordinates at the canvas origin, the convention renderMSABlock
+ * The persistent overlay on the alignment: the band behind each clade of
+ * `clades`, the `rowTint` encoding's wash, the row tints and bordered column
+ * bands of `highlights`, and a label above each band. `offsetX`/`offsetY` are
+ * the content coordinates at the canvas origin, the convention renderMSABlock
  * uses, so the live overlay passes -scrollX/-scrollY and the export passes its
  * layout offsets.
+ *
+ * Rows are culled to the ones this block covers. A tint over every row of a
+ * large alignment would otherwise draw the whole column of rects in each block,
+ * and again on every pointer move through renderMouseover.
  */
 export function renderHighlights({
   ctx,
@@ -104,13 +106,45 @@ export function renderHighlights({
   width: number
   height: number
 }) {
-  const { resolvedHighlights, colWidth, rowHeight } = model
+  const { resolvedClades, resolvedHighlights, rowTints, colWidth, rowHeight } =
+    model
   const placed: LabelBox[] = []
   ctx.lineWidth = 2
+  const firstRow = Math.max(0, Math.floor(offsetY / rowHeight))
+  const lastRow = Math.ceil((offsetY + height) / rowHeight)
+  const fillRow = (index: number) => {
+    ctx.fillRect(0, index * rowHeight - offsetY, width, rowHeight)
+  }
+  for (const { rows, color, mark } of resolvedClades) {
+    if (mark === 'highlight' && rows[1] >= firstRow && rows[0] <= lastRow) {
+      ctx.fillStyle = color
+      ctx.fillRect(
+        0,
+        rows[0] * rowHeight - offsetY,
+        width,
+        (rows[1] - rows[0] + 1) * rowHeight,
+      )
+    }
+  }
+  if (rowTints) {
+    for (
+      let index = firstRow;
+      index <= Math.min(lastRow, rowTints.length - 1);
+      index++
+    ) {
+      const color = rowTints[index]
+      if (color) {
+        ctx.fillStyle = color
+        fillRow(index)
+      }
+    }
+  }
   for (const { rowIndices, color } of resolvedHighlights) {
     ctx.fillStyle = color ?? highlightRowFill
     for (const index of rowIndices) {
-      ctx.fillRect(0, index * rowHeight - offsetY, width, rowHeight)
+      if (index >= firstRow && index <= lastRow) {
+        fillRow(index)
+      }
     }
   }
   for (const { startCol, endCol, label, color } of resolvedHighlights) {
@@ -139,11 +173,10 @@ export function renderHighlights({
 }
 
 /**
- * Everything the alignment overlay owes to the document rather than to the
- * mouse: the reference row's tint, a bordered band per run of highlighted
- * columns, and the `highlights` layer. The live overlay canvas draws these
- * under its hover and click bands, and the SVG export draws them and stops --
- * a shared link that opens with columns highlighted exports with them too.
+ * The overlay parts that come from the snapshot: the reference row's tint, a
+ * bordered band per run of highlighted columns, and the `highlights` layer. The
+ * live overlay draws these under its hover and click bands; the SVG export
+ * draws only these.
  */
 export function renderPersistentHighlights({
   ctx,

package/src/components/msa/renderMSABlock.ts

@@ -113,18 +113,18 @@ function drawTilesAndText({
     columns,
     colWidth,
     rowHeight,
+    fontSize,
     relativeTo,
     showMsaLetters,
     subFeatureRows,
+    domainUnderline,
     domainBandsByStart,
+    featureColors,
   } = model
 
   const tiles = drawTiles && bgColor
   const paintTiles = tiles && !rasterTiles
   if (paintTiles || showMsaLetters) {
-    // a letter takes its color from the cell it lands on, so the scheme lookup
-    // is only waste when nothing draws letters
-    const needsColor = paintTiles || showMsaLetters
     const tileColor = tileColorFn(model)
     // Domain fills come from a categorical palette with no fixed lightness, and
     // a dynamic scheme colors a cell from its column, so a readable letter color
@@ -132,12 +132,15 @@ function drawTilesAndText({
     const contrastText = contrastTextFn(theme)
     const offsetXAligned = xStart * colWidth
     const halfColWidth = colWidth / 2
-    // note: -rowHeight/4 matches +rowHeight/4 in tree
-    const quarterRowHeight = rowHeight / 4
+    // the context is translated by rowHeight/2, so `y` is the row's bottom
+    // edge and the baseline lands fontSize/4 below the row center, where the
+    // tree puts its tip labels
+    const baselineOffset = rowHeight / 2 - fontSize / 4
     // with the tiles coming from the domain overlay instead, letters sit either
     // on a domain box or on the plain background; sub-row layout stacks the boxes
-    // above the letters, so those rows are all plain background
-    const overDomains = !drawTiles && !subFeatureRows
+    // above the letters and letter-color mode shrinks them to a bar under the
+    // row, so neither leaves anything behind a letter
+    const overDomains = !drawTiles && !subFeatureRows && !domainUnderline
 
     for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
       const node = visibleLeaves[i]!
@@ -146,7 +149,7 @@ function drawTilesAndText({
       const str = columns.get(name)?.slice(xStart, xEnd)
       if (str) {
         const tileY = y - rowHeight
-        const textY = y - quarterRowHeight
+        const textY = y - baselineOffset
         const bandAt = domainBandCursor(
           overDomains ? domainBandsByStart.get(name) : undefined,
         )
@@ -157,7 +160,7 @@ function drawTilesAndText({
           const x = j * colWidth + offsetXAligned
           const isMatchingReference =
             referenceSeq && name !== relativeTo && letter === referenceSeq[j]
-          const color = needsColor ? tileColor(col, letter) : undefined
+          const color = tileColor(col, letter)
 
           if (paintTiles) {
             ctx.fillStyle = isMatchingReference
@@ -170,7 +173,7 @@ function drawTilesAndText({
             const covering = bandAt(col)
             ctx.fillStyle = covering
               ? // on top of a domain box: contrast against the box fill
-                contrastText(model.fillPalette[covering.annotation.accession])
+                contrastText(featureColors.get(covering.annotation)?.fill)
               : isMatchingReference
                 ? // the dot sits on the faint reference-match wash, which is
                   // the theme's background with a little of its text color in it
@@ -179,7 +182,7 @@ function drawTilesAndText({
                   ? // on top of a colored tile, or on the background where the
                     // scheme gives that cell no color
                     contrastText(color)
-                  : !drawTiles || !color
+                  : bgColor || !color
                     ? // plain background, uncolored letters
                       theme.palette.text.primary
                     : // letter-color mode: darken/lighten to stay readable

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/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