react-msaview 8.0.0 → 8.2.0

package/src/components/msa/renderMSABlock.ts

@@ -113,19 +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
@@ -133,8 +132,10 @@ 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 and letter-color mode shrinks them to a bar under the
@@ -148,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,
         )
@@ -159,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
@@ -172,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

package/src/components/tracks/drawTracks.ts

@@ -309,18 +309,9 @@ export function drawTrackBlock({
   blockSizeXOverride?: number
   highResScaleFactorOverride?: number
 }) {
-  const {
-    blockSize,
-    bgColor,
-    colWidth,
-    colStats,
-    colorScheme: modelColorScheme,
-    fontSize,
-    rowHeight,
-    showMsaLetters,
-    alphabetMaxBits,
-    highResScaleFactor,
-  } = model
+  // an autorun tracks every model read here, so each kind reads only what it
+  // draws and a vertical zoom leaves the bar and arc canvases alone
+  const { blockSize, colWidth, highResScaleFactor } = model
   const {
     id,
     kind,
@@ -367,9 +358,9 @@ export function drawTrackBlock({
     case 'logo': {
       drawSequenceLogo({
         ctx,
-        colStats,
-        colorScheme: modelColorScheme,
-        maxBits: alphabetMaxBits,
+        colStats: model.colStats,
+        colorScheme: model.colorScheme,
+        maxBits: model.alphabetMaxBits,
         textColor,
         colWidth,
         trackHeight,
@@ -399,13 +390,14 @@ export function drawTrackBlock({
       break
     }
     case 'text': {
+      const { bgColor, fontSize, rowHeight, showMsaLetters } = model
       ctx.textAlign = 'center'
       ctx.textBaseline = 'middle'
       setFontSize(ctx, fontSize)
       drawTextTrackContent({
         ctx,
         data,
-        colorScheme: customColorScheme ?? modelColorScheme,
+        colorScheme: customColorScheme ?? model.colorScheme,
         contrastText: contrastTextFn(theme),
         bgColor,
         drawLetters: showMsaLetters,

package/src/components/tree/TreeBranchMenu.tsx

@@ -29,8 +29,7 @@ const TreeBranchMenu = observer(function ({
         top: node.y,
       }}
       transitionDuration={0}
-      keepMounted
-      open={Boolean(node)}
+      open
       onClose={onClose}
     >
       <MenuItem dense disabled>

package/src/components/tree/TreeCanvas.tsx

@@ -71,9 +71,6 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
       ref={ref}
       onMouseDown={onMouseDown}
       onMouseUp={onMouseUp}
-      onMouseLeave={event => {
-        event.preventDefault()
-      }}
       style={{
         height,
         position: 'relative',

package/src/components/tree/TreeCanvasBlock.tsx

@@ -13,12 +13,12 @@ import { useTreeHover } from './useTreeHover.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   hover: {
     position: 'absolute',
     pointerEvents: 'none',
     zIndex: 100,
-    background: 'rgba(0,0,0,0.1)',
+    background: theme.palette.action.hover,
   },
 }))
 

package/src/components/tree/TreeNodeMenu.tsx

@@ -35,8 +35,7 @@ const TreeMenu = observer(function ({
         left: node.x,
       }}
       transitionDuration={0}
-      keepMounted
-      open={Boolean(node)}
+      open
       onClose={onClose}
     >
       <MenuItem dense disabled>

package/src/components/tree/renderTreeCanvas.ts

@@ -402,7 +402,8 @@ function renderTreeLabels({
     // label when the "name" is just the auto-generated internal-node id
     const isAnonymousCollapsed = collapsedSet.has(id) && name === id
     if (!isAnonymousCollapsed && inYBlock(y, offsetY, by, pad)) {
-      // note: +rowHeight/4 matches with -rowHeight/4 in msa
+      // fontSize/4 below the row center, the baseline the alignment letters
+      // share
       const yp = y + fontSize / 4
       let xp = 0
       if (!noTree) {

package/src/constants.ts

@@ -48,6 +48,11 @@ export const defaultScrollZoomAxis: ScrollZoomAxis = 'both'
 export const minLetterRowHeight = 8
 export const minLetterColWidth = 5
 
+// 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
+export const minFeatureLabelHeight = 9
+
 // Tree labels are measured once at this size and scaled to the current font
 // size, so a vertical zoom never re-measures the tree.
 export const labelReferenceFontSize = 16

package/src/expandSpec.ts

@@ -0,0 +1,196 @@
+import type { ColumnTrackSpec, Highlight, Region } from './types.ts'
+
+/**
+ * `row: null` opts one entry out of the spec's `query` row, back to alignment
+ * columns.
+ */
+type RowChoice = { row?: string | null }
+
+export type HighlightShorthand =
+  | number
+  | string
+  | (Omit<Highlight, 'row'> & RowChoice)
+
+export type RegionShorthand = string | (Omit<Region, 'row'> & RowChoice)
+
+export type ColumnTrackShorthand = Omit<
+  ColumnTrackSpec,
+  'id' | 'kind' | 'row'
+> &
+  RowChoice & {
+    id?: string
+    kind?: ColumnTrackSpec['kind']
+    /** the 1-based position `values` or `data` begins at */
+    start?: number
+  }
+
+/**
+ * The short forms a hand-written or generated link can use. Every long form
+ * passes through unchanged, so a snapshot is also a valid spec.
+ */
+export interface MsaSpec {
+  /**
+   * The row the spec is about: sets `relativeTo`, and is the `row` of every
+   * highlight, region and column track that names none
+   */
+  query?: string
+  /** a url, or the alignment itself when it spans more than one line */
+  msa?: string
+  /** a url, or a newick string when it starts with "(" */
+  tree?: string
+  highlights?: HighlightShorthand[]
+  region?: RegionShorthand
+  columnTracks?: ColumnTrackShorthand[]
+  [key: string]: unknown
+}
+
+/**
+ * The label a single-residue shorthand highlight gets, filled in from the
+ * sequence when drawn: `175` on a row reading R there becomes "R175".
+ */
+export const residueLabel = '{residue}{position}'
+
+const span = /^(\d+)(?:-(\d+))?(?:\s+(.+))?$/
+
+function parseSpan(text: string, what: string) {
+  const match = span.exec(text.trim())
+  if (!match) {
+    throw new Error(
+      `${what} "${text}" is not "start", "start-end" or either followed by a label`,
+    )
+  }
+  const start = Number(match[1])
+  const end = match[2] === undefined ? start : Number(match[2])
+  return { start, end, label: match[3] }
+}
+
+function withRow<T extends RowChoice>(entry: T, query?: string) {
+  const { row, ...rest } = entry
+  const resolved = row === undefined ? query : (row ?? undefined)
+  return resolved === undefined ? rest : { ...rest, row: resolved }
+}
+
+function expandHighlight(entry: HighlightShorthand, query?: string) {
+  if (typeof entry === 'object') {
+    return (
+      entry.rows
+        ? entry
+        : withRow(entry, entry.start === undefined ? undefined : query)
+    ) as Highlight
+  }
+  const { start, end, label } = parseSpan(String(entry), 'highlight')
+  const single = start === end && query !== undefined
+  return {
+    ...(query === undefined ? {} : { row: query }),
+    start,
+    end,
+    ...(label ? { label } : single ? { label: residueLabel } : {}),
+  }
+}
+
+function expandRegion(region: RegionShorthand, query?: string) {
+  if (typeof region === 'string') {
+    const { start, end } = parseSpan(region, 'region')
+    const parsed: Omit<Region, 'row'> & RowChoice = { start, end }
+    return withRow(parsed, query) as Region
+  }
+  return withRow(region, query) as Region
+}
+
+function slug(name: string) {
+  return name
+    .toLowerCase()
+    .replaceAll(/[^a-z0-9]+/g, '-')
+    .replaceAll(/^-|-$/g, '')
+}
+
+function kindOf(track: ColumnTrackShorthand) {
+  if (track.kind) {
+    return track.kind
+  }
+  if (track.values) {
+    return 'bar'
+  }
+  if (track.data !== undefined) {
+    return 'text'
+  }
+  if (track.arcs) {
+    return 'arc'
+  }
+  throw new Error(
+    `column track "${track.name}" has no values, data or arcs to take its kind from`,
+  )
+}
+
+function expandTrack(
+  track: ColumnTrackShorthand,
+  query: string | undefined,
+  ids: Set<string>,
+): ColumnTrackSpec {
+  const { start, ...rest } = track
+  const pad = start && start > 1 ? start - 1 : 0
+  let id = track.id ?? (slug(track.name) || 'track')
+  for (let n = 2; !track.id && ids.has(id); n++) {
+    id = `${slug(track.name) || 'track'}-${n}`
+  }
+  ids.add(id)
+  return {
+    ...(withRow(rest, query) as Omit<ColumnTrackSpec, 'id' | 'kind'>),
+    id,
+    kind: kindOf(track),
+    ...(pad && track.values
+      ? { values: [...Array<number>(pad).fill(0), ...track.values] }
+      : {}),
+    ...(pad && track.data !== undefined
+      ? { data: ' '.repeat(pad) + track.data }
+      : {}),
+  }
+}
+
+function isInlineMsa(msa: string) {
+  return msa.includes('\n')
+}
+
+function isInlineTree(tree: string) {
+  return tree.trimStart().startsWith('(')
+}
+
+function uri(location: string) {
+  return { uri: location, locationType: 'UriLocation' as const }
+}
+
+/**
+ * Expand the short forms of an MsaView spec into the snapshot the model takes.
+ * Idempotent, and a no-op on a spec that uses none of them.
+ */
+export function expandSpec(spec: MsaSpec): Record<string, unknown> {
+  const { query, msa, tree, highlights, region, columnTracks, ...rest } = spec
+  const data = {
+    ...(rest.data as Record<string, unknown> | undefined),
+    ...(msa !== undefined && isInlineMsa(msa) ? { msa } : {}),
+    ...(tree !== undefined && isInlineTree(tree) ? { tree } : {}),
+  }
+  const ids = new Set(
+    (columnTracks ?? []).map(t => t.id).filter(id => id !== undefined),
+  )
+  return {
+    ...rest,
+    ...(msa !== undefined && !isInlineMsa(msa)
+      ? { msaFilehandle: uri(msa) }
+      : {}),
+    ...(tree !== undefined && !isInlineTree(tree)
+      ? { treeFilehandle: uri(tree) }
+      : {}),
+    ...(Object.keys(data).length > 0 ? { data } : {}),
+    ...(query !== undefined && rest.relativeTo === undefined
+      ? { relativeTo: query }
+      : {}),
+    ...(highlights
+      ? { highlights: highlights.map(h => expandHighlight(h, query)) }
+      : {}),
+    ...(region === undefined ? {} : { region: expandRegion(region, query) }),
+    ...(columnTracks
+      ? { columnTracks: columnTracks.map(t => expandTrack(t, query, ids)) }
+      : {}),
+  }
+}

package/src/index.ts

@@ -18,6 +18,14 @@ export {
 // the row count above which calculateNeighborJoiningTreeFromMSA throws, for
 // hosts gating their own menu item
 export { maxNeighborJoiningRows } from './constants.ts'
+// the short forms a link or a script can write a view in; see docs/layers.md
+export { expandSpec, residueLabel } from './expandSpec.ts'
+export type {
+  ColumnTrackShorthand,
+  HighlightShorthand,
+  MsaSpec,
+  RegionShorthand,
+} from './expandSpec.ts'
 export { default as MSAView } from './components/Loading.tsx'
 export { default as MSAViewer } from './components/MSAViewer.tsx'
 export type { MSAViewerProps } from './components/MSAViewer.tsx'