react-msaview 5.1.0 → 5.2.0

package/src/components/tree/renderTreeCanvas.ts

@@ -1,7 +1,12 @@
-import { calcDepthToLeaf, descendants, links } from '../../hierarchy.ts'
+import {
+  calcDepthToLeaf,
+  forEachDescendant,
+  forEachLink,
+} from '../../hierarchy.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
+import type { RenderCtx } from '../renderCtx.ts'
 import type { Theme } from '@mui/material'
 
 export const padding = 600
@@ -59,7 +64,7 @@ export function renderTree({
   blockSizeYOverride,
 }: {
   offsetY: number
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
   model: MsaViewModel
   theme: Theme
   maxBranchLen: number
@@ -67,16 +72,15 @@ export function renderTree({
   blockSizeYOverride?: number
 }) {
   const { hierarchy, showBranchLenEffective: showBranchLen, blockSize } = model
-  const by = blockSizeYOverride || blockSize
+  const by = blockSizeYOverride ?? blockSize
   ctx.strokeStyle = theme.palette.text.primary
-  for (const link of links(hierarchy)) {
-    const { source, target } = link
+  forEachLink(hierarchy, (source, target) => {
     const sy = source.x!
     const ty = target.x!
     const tx = getNodeX(target, showBranchLen, maxBranchLen, maxDepthToLeaf)
     const sx = getNodeX(source, showBranchLen, maxBranchLen, maxDepthToLeaf)
     if (tx === undefined || sx === undefined) {
-      continue
+      return
     }
 
     const y1 = Math.min(sy, ty)
@@ -91,7 +95,7 @@ export function renderTree({
       ctx.lineTo(tx, ty)
       ctx.stroke()
     }
-  }
+  })
 }
 
 export function renderNodeBubbles({
@@ -103,7 +107,7 @@ export function renderNodeBubbles({
   maxDepthToLeaf,
   blockSizeYOverride,
 }: {
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
   clickMap?: ClickMapIndex
   offsetY: number
   model: MsaViewModel
@@ -118,11 +122,11 @@ export function renderNodeBubbles({
     blockSize,
     marginLeft: ml,
   } = model
-  const by = blockSizeYOverride || blockSize
-  for (const node of descendants(hierarchy)) {
+  const by = blockSizeYOverride ?? blockSize
+  forEachDescendant(hierarchy, node => {
     const x = getNodeX(node, showBranchLen, maxBranchLen, maxDepthToLeaf)
     if (x === undefined) {
-      continue
+      return
     }
     const { data } = node
     const y = node.x!
@@ -149,7 +153,7 @@ export function renderNodeBubbles({
         name,
       })
     }
-  }
+  })
 }
 
 export function renderTreeLabels({
@@ -164,7 +168,7 @@ export function renderTreeLabels({
 }: {
   model: MsaViewModel
   offsetY: number
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
   clickMap?: ClickMapIndex
   theme: Theme
   maxBranchLen: number
@@ -183,8 +187,9 @@ export function renderTreeLabels({
     marginLeft,
     leaves,
     noTree,
+    labelWidthMap,
   } = model
-  const by = blockSizeYOverride || blockSize
+  const by = blockSizeYOverride ?? blockSize
   const emHeight = ctx.measureText('M').width
   if (labelsAlignRight) {
     ctx.textAlign = 'right'
@@ -204,10 +209,11 @@ export function renderTreeLabels({
       const yp = y + fontSize / 4
       let xp = 0
       if (!noTree) {
-        xp = getNodeX(node, showBranchLen, maxBranchLen, maxDepthToLeaf) || 0
+        xp = getNodeX(node, showBranchLen, maxBranchLen, maxDepthToLeaf) ?? 0
       }
 
-      const { width } = ctx.measureText(displayName)
+      const width =
+        labelWidthMap.get(name) ?? ctx.measureText(displayName).width
 
       ctx.fillStyle = theme.palette.text.primary
       if (labelsAlignRight) {
@@ -255,7 +261,7 @@ export function renderTreeCanvas({
 }: {
   model: MsaViewModel
   offsetY: number
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
   clickMap?: ClickMapIndex
   theme: Theme
   highResScaleFactorOverride?: number
@@ -272,22 +278,13 @@ export function renderTreeCanvas({
     fontSize,
     showTreeText,
     marginLeft,
-    nref,
     // eslint-disable-next-line  @typescript-eslint/no-unused-vars
-    rowHeight: _rowHeight, // this is needed for redrawing after zoom change
+    rowHeight: _rowHeight, // read so the draw autorun re-fires after a zoom change
   } = model
 
   ctx.resetTransform()
 
-  // this is a bogus use of nref, it is never less than 0. we just are using
-  // it in this statement because otherwise it would be an unused variable,
-  // we just need to use nref to indicate a redraw in an autorun when canvas
-  // ref is updated and in order to convince bundlers like not to delete
-  // unused usage with propertyReadSideEffects
-  const k =
-    nref < 0
-      ? Number.NEGATIVE_INFINITY
-      : highResScaleFactorOverride || highResScaleFactor
+  const k = highResScaleFactorOverride ?? highResScaleFactor
   ctx.scale(k, k)
   ctx.translate(marginLeft, -offsetY)
 

package/src/components/util.ts

@@ -1,84 +1,3 @@
-/**
- * Given a scale ( bp/px ) and minimum distances (px) between major and minor
- * gridlines, return an object like `{ majorPitch: bp, minorPitch: bp }` giving
- * the gridline pitches to use.
- */
-export function chooseGridPitch(
-  scale: number,
-  minMajorPitchPx: number,
-  minMinorPitchPx: number,
-) {
-  scale = Math.abs(scale)
-  const minMajorPitchBp = minMajorPitchPx * scale
-  const majorMagnitude = Number.parseInt(
-    minMajorPitchBp.toExponential().split(/e/i)[1]!,
-    10,
-  )
-
-  let majorPitch = 10 ** majorMagnitude
-  while (majorPitch < minMajorPitchBp) {
-    majorPitch *= 2
-    if (majorPitch >= minMajorPitchBp) {
-      break
-    }
-    majorPitch *= 2.5
-  }
-
-  majorPitch = Math.max(majorPitch, 5)
-
-  const majorPitchPx = majorPitch / scale
-
-  let minorPitch = 0
-  if (!(majorPitch % 10) && majorPitchPx / 10 >= minMinorPitchPx) {
-    minorPitch = majorPitch / 10
-  } else if (!(majorPitch % 5) && majorPitchPx / 5 >= minMinorPitchPx) {
-    minorPitch = majorPitch / 5
-  } else if (!(majorPitch % 2) && majorPitchPx / 2 >= minMinorPitchPx) {
-    minorPitch = majorPitch / 2
-  }
-
-  return { majorPitch, minorPitch }
-}
-export function makeTicks(
-  start: number,
-  end: number,
-  bpPerPx: number,
-  emitMajor = true,
-  emitMinor = true,
-) {
-  const gridPitch = chooseGridPitch(bpPerPx, 60, 15)
-
-  let minBase = start
-  let maxBase = end
-
-  if (bpPerPx < 0) {
-    ;[minBase, maxBase] = [maxBase, minBase]
-  }
-
-  // add 20px additional on the right and left to allow us to draw the ends of
-  // labels that lie a little outside our region
-  minBase -= Math.abs(20 * bpPerPx)
-  maxBase += Math.abs(20 * bpPerPx) + 1
-
-  const iterPitch = gridPitch.minorPitch || gridPitch.majorPitch
-  let index = 0
-  const ticks = []
-  for (
-    let base = Math.ceil(minBase / iterPitch) * iterPitch;
-    base < maxBase;
-    base += iterPitch
-  ) {
-    if (emitMinor && base % (gridPitch.majorPitch * 2)) {
-      ticks.push({ type: 'minor', base: base - 1, index })
-      index += 1
-    } else if (emitMajor && !(base % (gridPitch.majorPitch * 2))) {
-      ticks.push({ type: 'major', base: base - 1, index })
-      index += 1
-    }
-  }
-  return ticks
-}
-
 export function mathPower(num: number): string {
   if (num < 999) {
     return String(num)

package/src/hierarchy.ts

@@ -157,6 +157,33 @@ export function links<T>(node: HierarchyNode<T>): HierarchyLink<T>[] {
   return result
 }
 
+export function forEachLink<T>(
+  node: HierarchyNode<T>,
+  cb: (source: HierarchyNode<T>, target: HierarchyNode<T>) => void,
+) {
+  function visit(n: HierarchyNode<T>) {
+    if (n.children) {
+      for (const child of n.children) {
+        cb(n, child)
+        visit(child)
+      }
+    }
+  }
+  visit(node)
+}
+
+export function forEachDescendant<T>(
+  node: HierarchyNode<T>,
+  cb: (n: HierarchyNode<T>) => void,
+) {
+  cb(node)
+  if (node.children) {
+    for (const child of node.children) {
+      forEachDescendant(child, cb)
+    }
+  }
+}
+
 export function clusterLayout<T>(
   root: HierarchyNode<T>,
   sizeX: number,

package/src/index.ts

@@ -1,3 +1,10 @@
+// PUBLIC API — consumed by external JBrowse 2 plugins. Changing or removing any
+// export here is a breaking change for downstream repos:
+//   - jbrowse-plugin-msaview   (wraps MSAModelF + MSAView into a JBrowse view)
+//   - jbrowse-plugin-protein3d (drives MSA<->structure hover/highlight sync)
+// Those plugins also reach into the MsaViewModel instance at runtime; the model
+// members they rely on (e.g. mouseCol/setMousePos, setHighlightedColumns,
+// seqPosToVisibleCol/visibleColToSeqPos) are flagged inline in model.ts.
 export { default as MSAView } from './components/Loading.tsx'
 export { default as MSAViewer } from './components/MSAViewer.tsx'
 export { type MsaViewModel, default as MSAModelF } from './model.ts'

package/src/model.ts

@@ -19,7 +19,7 @@ import {
   parseNewick,
 } from 'msa-parsers'
 
-import { blocksX, blocksY } from './calculateBlocks.ts'
+import { calculateBlocks } from './calculateBlocks.ts'
 import { clustalXColumnColors } from './clustalX.ts'
 import colorSchemes from './colorSchemes.ts'
 import ConservationTrack from './components/ConservationTrack.tsx'
@@ -317,13 +317,6 @@ function stateModelFactory() {
        */
       highlightedColumns: undefined as number[] | undefined,
 
-      /**
-       * #volatile
-       * a dummy variable that is incremented when ref changes so autorun for
-       * drawing canvas commands will run
-       */
-      nref: 0,
-
       /**
        * #volatile
        */
@@ -408,6 +401,10 @@ function stateModelFactory() {
       /**
        * #action
        * set mouse position (row, column) in the MSA
+       *
+       * CROSS-REPO CONTRACT: jbrowse-plugin-protein3d calls this (and reads the
+       * `mouseCol` volatile) to sync MSA<->3D-structure hover. Keep the name and
+       * signature stable; see that repo's ProteinToMsaHoverSync.tsx.
        */
       setMousePos(col?: number, row?: number) {
         self.mouseCol = col
@@ -440,6 +437,10 @@ function stateModelFactory() {
       /**
        * #action
        * set highlighted columns
+       *
+       * CROSS-REPO CONTRACT: called by jbrowse-plugin-msaview
+       * (afterCreateAutoruns.ts) to highlight alignment columns. It has no
+       * in-repo caller, so do not flag it as dead code — it is public API.
        */
       setHighlightedColumns(columns?: number[]) {
         self.highlightedColumns = columns
@@ -625,14 +626,14 @@ function stateModelFactory() {
        * #getter
        */
       get header() {
-        return (this.MSA?.getHeader() || {}) as Record<string, unknown>
+        return (this.MSA?.getHeader() ?? {}) as Record<string, unknown>
       },
 
       /**
        * #getter
        */
       get alignmentNames() {
-        return this.MSA?.alignmentNames || []
+        return this.MSA?.alignmentNames ?? []
       },
       /**
        * #getter
@@ -665,7 +666,7 @@ function stateModelFactory() {
        * #getter
        */
       get numColumns() {
-        return (this.MSA?.getWidth() || 0) - this.blanks.length
+        return (this.MSA?.getWidth() ?? 0) - this.blanks.length
       },
 
       /**
@@ -693,15 +694,32 @@ function stateModelFactory() {
       /**
        * #getter
        */
+      /**
+       * #getter
+       * Returns the list of row (sequence) names in display order.
+       * Part of the public API used by downstream consumers (e.g. jbrowse plugins).
+       */
       get rowNames(): string[] {
         return this.leaves.map(n => n.data.name)
       },
+      /**
+       * #getter
+       */
+      get rowNamesSet() {
+        const map = new Map<string, number>()
+        this.leaves.forEach((leaf, index) => {
+          map.set(leaf.data.name, index)
+        })
+        return map
+      },
       /**
        * #getter
        */
       get mouseOverRowName() {
         const { mouseRow } = self
-        return mouseRow === undefined ? undefined : this.rowNames[mouseRow]
+        return mouseRow === undefined
+          ? undefined
+          : this.leaves[mouseRow]?.data.name
       },
       /**
        * #getter
@@ -712,7 +730,7 @@ function stateModelFactory() {
         if (mouseCol === undefined || mouseRow === undefined) {
           return undefined
         }
-        const rowName = this.rowNames[mouseRow]
+        const rowName = this.leaves[mouseRow]?.data.name
         if (!rowName) {
           return undefined
         }
@@ -898,7 +916,7 @@ function stateModelFactory() {
        * #getter
        */
       get columns() {
-        return Object.fromEntries(
+        return new Map(
           this.rows.map(
             (row, index) => [row[0], this.columns2d[index]!] as const,
           ),
@@ -911,7 +929,12 @@ function stateModelFactory() {
         const { hideGapsEffective } = self
         return this.rows
           .map(r => r[1])
-          .map(str => (hideGapsEffective ? skipBlanks(this.blanks, str) : str))
+          .map(str =>
+            (hideGapsEffective
+              ? skipBlanks(this.blanks, str)
+              : str
+            ).toUpperCase(),
+          )
       },
       /**
        * #getter
@@ -939,7 +962,13 @@ function stateModelFactory() {
        * #getter
        */
       get colStatsSums() {
-        return this.colStats.map(val => sum(Object.values(val)))
+        return this.colStats.map(col => {
+          let s = 0
+          for (const k in col) {
+            s += col[k]!
+          }
+          return s
+        })
       },
 
       /**
@@ -951,9 +980,8 @@ function stateModelFactory() {
         const letters = new Set<string>()
         for (const stats of this.colStats) {
           for (const letter of Object.keys(stats)) {
-            const upper = letter.toUpperCase()
-            if (upper !== '-' && upper !== '.') {
-              letters.add(upper)
+            if (letter !== '-' && letter !== '.') {
+              letters.add(letter)
             }
           }
         }
@@ -1029,24 +1057,18 @@ function stateModelFactory() {
             return 0
           }
 
-          const gapCount = (stats['-'] || 0) + (stats['.'] || 0)
+          const gapCount = (stats['-'] ?? 0) + (stats['.'] ?? 0)
           const nonGapTotal = total - gapCount
           if (nonGapTotal === 0) {
             return 0
           }
 
-          const merged: Record<string, number> = {}
+          let entropy = 0
           for (const letter of Object.keys(stats)) {
             if (letter === '-' || letter === '.') {
               continue
             }
-            const upper = letter.toUpperCase()
-            merged[upper] = (merged[upper] || 0) + stats[letter]!
-          }
-
-          let entropy = 0
-          for (const key of Object.keys(merged)) {
-            const freq = merged[key]! / nonGapTotal
+            const freq = stats[letter]! / nonGapTotal
             if (freq > 0) {
               entropy -= freq * Math.log2(freq)
             }
@@ -1134,22 +1156,22 @@ function stateModelFactory() {
        * #getter
        */
       get blocksX() {
-        return blocksX({
-          viewportWidth: self.msaAreaWidth,
-          viewportX: -self.scrollX,
+        return calculateBlocks({
+          viewportSize: self.msaAreaWidth,
+          viewportPos: -self.scrollX,
           blockSize: self.blockSize,
-          mapWidth: self.totalWidth,
+          mapSize: self.totalWidth,
         })
       },
       /**
        * #getter
        */
       get blocksY() {
-        return blocksY({
-          viewportHeight: self.height,
-          viewportY: -self.scrollY,
+        return calculateBlocks({
+          viewportSize: self.height,
+          viewportPos: -self.scrollY,
           blockSize: self.blockSize,
-          mapHeight: self.totalHeight,
+          mapSize: self.totalHeight,
         })
       },
     }))
@@ -1272,7 +1294,7 @@ function stateModelFactory() {
         self.scrollY = clamp(self.scrollY + deltaY, -self.totalHeight + 10, 0)
       },
 
-      setInterProAnnotations(data: Record<string, InterProScanResults>) {
+      setInterProAnnotations(data?: Record<string, InterProScanResults>) {
         self.interProAnnotations = data
       },
 
@@ -1318,24 +1340,25 @@ function stateModelFactory() {
       /**
        * #getter
        */
-      get labelsWidth() {
+      get labelWidthMap() {
         const { rowHeight, leaves, treeMetadata, fontSize } = self
         if (rowHeight <= 5) {
-          return 0
+          return new Map<string, number>()
         }
-        return leaves.reduce(
-          (max, node) =>
-            Math.max(
-              max,
-              measureTextCanvas(
-                treeMetadata[node.data.name]?.genome || node.data.name,
-                fontSize,
-              ),
-            ),
-          0,
+        return new Map(
+          leaves.map(node => {
+            const { name } = node.data
+            const displayName = treeMetadata[name]?.genome || name
+            return [name, measureTextCanvas(displayName, fontSize)] as const
+          }),
         )
       },
 
+      get labelsWidth() {
+        const widths = this.labelWidthMap
+        return widths.size === 0 ? 0 : Math.max(...widths.values())
+      },
+
       /**
        * #getter
        */
@@ -1402,13 +1425,6 @@ function stateModelFactory() {
         return self.msaAreaWidth < self.totalWidth
       },
 
-      /**
-       * #getter
-       */
-      get rowNamesSet() {
-        return new Map(self.rowNames.map((r, idx) => [r, idx]))
-      },
-
       /**
        * #method
        * Return a row-specific letter at a visible column, or undefined if gap.
@@ -1427,6 +1443,11 @@ function stateModelFactory() {
        * Convert a visible column to a row-specific sequence position (0-based).
        * Returns undefined if the position is a gap in the sequence.
        *
+       * CROSS-REPO CONTRACT: this and the sibling coordinate converters
+       * (seqPosToVisibleCol, globalColToVisibleCol, seqPosToGlobalCol) are used
+       * by jbrowse-plugin-protein3d to translate between alignment columns and
+       * structure/sequence residue positions across gaps. Keep them stable.
+       *
        * @param rowName - The name of the row
        * @param visibleCol - The visible column index
        * @returns The sequence position (0-based), or undefined if it's a gap
@@ -1480,14 +1501,8 @@ function stateModelFactory() {
        * @returns The global column index in the full MSA
        */
       seqPosToGlobalCol(rowName: string, seqPos: number) {
-        const { rows } = self
-        const index = this.rowNamesSet.get(rowName)
-        return index !== undefined && rows[index]
-          ? seqPosToGlobalCol({
-              row: rows[index][1],
-              seqPos,
-            })
-          : 0
+        const seq = self.rowMap.get(rowName)
+        return seq ? seqPosToGlobalCol({ row: seq, seqPos }) : 0
       },
 
       /**
@@ -1506,30 +1521,6 @@ function stateModelFactory() {
     }))
 
     .views(self => ({
-      /**
-       * #getter
-       * Returns information about the currently hovered cell
-       */
-      get hoveredCell() {
-        const { mouseCol, mouseRow } = self
-        if (mouseCol === undefined || mouseRow === undefined) {
-          return undefined
-        }
-        const rowName = self.rowNames[mouseRow]
-        if (!rowName) {
-          return undefined
-        }
-        const seq = self.columns[rowName]
-        const base = seq?.[mouseCol]
-        const seqPos = self.visibleColToSeqPosOneBased(rowName, mouseCol)
-        return {
-          rowName,
-          col: mouseCol,
-          base,
-          seqPos,
-        }
-      },
-
       /**
        * #getter
        * widget width minus the tree area gives the space for the MSA
@@ -1650,7 +1641,7 @@ function stateModelFactory() {
         self.setTreeFilehandle(undefined)
         self.setMSAFilehandle(undefined)
         self.setGFFFilehandle(undefined)
-        self.setInterProAnnotations({})
+        self.setInterProAnnotations(undefined)
         self.setShowDomains(false)
       },
       /**
@@ -1660,21 +1651,13 @@ function stateModelFactory() {
         theme: Theme
         includeMinimap?: boolean
         includeTracks?: boolean
-        exportType: string
+        exportType: 'entire' | 'viewport'
       }) {
         const { renderToSvg } = await import('./renderToSvg.tsx')
         const html = await renderToSvg(self as MsaViewModel, opts)
         const blob = new Blob([html], { type: 'image/svg+xml' })
         saveAs(blob, 'image.svg')
       },
-      /**
-       * #action
-       * internal, used for drawing to canvas
-       */
-      incrementRef() {
-        self.nref++
-      },
-
       initFilter(arg: string) {
         if (!self.featureFilters.has(arg)) {
           self.featureFilters.set(arg, true)