react-msaview 5.10.0 → 6.0.0

package/src/model.ts

@@ -6,7 +6,8 @@ import { colord } from 'colord'
 import { autorun, transaction } from 'mobx'
 import {
   generateNodeIds,
-  gffToInterProResults,
+  gffToAnnotations,
+  interProScanToAnnotations,
   parseEmfTree,
   parseGFF,
   parseMSA,
@@ -47,7 +48,7 @@ import {
   calcDepthToLeaf,
   clusterLayout,
   collapse,
-  collapsedSubtreeLengthExtent,
+  collapsedSubtreeMaxLength,
   find,
   findMaxBranchLen,
   forEachDescendant,
@@ -71,6 +72,7 @@ import {
   globalColToVisibleCol,
   visibleColToGlobalCol,
   visibleColToSeqPosForRow,
+  visibleColsBefore,
 } from './rowCoordinateCalculations.ts'
 import { buildSeqPosIndex } from './seqPosToGlobalCol.ts'
 import { stripDefault } from './stripDefault.ts'
@@ -78,8 +80,8 @@ import { computeRowInsertions, len, skipBlanks, transform } from './util.ts'
 import { saveAs } from './vendor/fileSaver.ts'
 
 import type { HierarchyNode } from './hierarchy.ts'
-import type { InterProScanResults } from './launchInterProScan.ts'
 import type {
+  Annotation,
   BasicTrack,
   DomainBand,
   NodeWithIds,
@@ -88,6 +90,7 @@ import type {
 import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
 import type { Instance } from '@jbrowse/mobx-state-tree'
 import type { Theme } from '@mui/material'
+import type { InterProScanResults } from 'msa-parsers'
 
 function parseTreeText(text: string) {
   if (text.startsWith('BioTreeContainer')) {
@@ -100,7 +103,7 @@ function parseTreeText(text: string) {
  * #stateModel MsaView
  *
  * The main MSAView state model. Holds the loaded alignment, tree, and optional
- * InterProScan domain annotations, plus all display state (color scheme, zoom,
+ * overlay annotations, plus all display state (color scheme, zoom,
  * scroll, collapsed clades). It composes in members from `DialogQueueSessionMixin`,
  * `Tree`, and `MSAModel` (see Inherited members below). Data is loaded reactively
  * from the `msaFilehandle` / `treeFilehandle` / `gffFilehandle` properties, or set
@@ -223,7 +226,7 @@ function stateModelFactory() {
 
         /**
          * #property
-         * filehandle object for InterProScan GFF file
+         * filehandle object for a GFF file of overlay annotations
          */
         gffFilehandle: types.maybe(FileLocation),
 
@@ -385,10 +388,12 @@ function stateModelFactory() {
 
       /**
        * #volatile
+       * overlay annotations drawn on the alignment, whatever their source.
+       * Every source -- InterProScan, GFF, a user upload -- converts to this
+       * flat list before it reaches the model, so nothing downstream of here
+       * knows which one it came from
        */
-      interProAnnotations: undefined as
-        | undefined
-        | Record<string, InterProScanResults>,
+      annotations: [] as Annotation[],
     }))
     .actions(self => ({
       /**
@@ -480,7 +485,7 @@ function stateModelFactory() {
       },
       /**
        * #action
-       * toggle the InterProScan protein-domain overlay on the alignment
+       * toggle the annotation overlay on the alignment
        */
       setShowDomains(arg: boolean) {
         self.showDomains = arg
@@ -523,14 +528,6 @@ function stateModelFactory() {
         self.colWidth = n
       },
 
-      /**
-       * #action
-       * set scroll Y-offset (px)
-       */
-      setScrollY(n: number) {
-        self.scrollY = n
-      },
-
       /**
        * #action
        *
@@ -638,7 +635,7 @@ function stateModelFactory() {
        * #getter
        */
       get actuallyShowDomains() {
-        return self.showDomains && !!self.interProAnnotations
+        return self.showDomains && self.annotations.length > 0
       },
       get viewInitialized() {
         return self.volatileWidth !== undefined
@@ -693,7 +690,7 @@ function stateModelFactory() {
         return !!this.tree.noTree
       },
       get noDomains() {
-        return !self.interProAnnotations
+        return self.annotations.length === 0
       },
       menuItems() {
         return []
@@ -883,12 +880,6 @@ function stateModelFactory() {
         }
         return blanks
       },
-      /**
-       * #getter
-       */
-      get blanksSet() {
-        return new Set(this.blanks)
-      },
       /**
        * #getter
        * Returns a map of row name to array of insertions with display position and letters
@@ -981,14 +972,6 @@ function stateModelFactory() {
         return columnCountsFromRows(this.columns2d)
       },
 
-      /**
-       * #getter
-       * per-column residue totals (gaps included)
-       */
-      get colStatsSums() {
-        return this.colStats.totals
-      },
-
       /**
        * #getter
        * Detects sequence type based on letters present in the alignment.
@@ -1096,14 +1079,13 @@ function stateModelFactory() {
         const max = maxLength(r)
         const k = max ? self.treeWidth / max : 0
         setBrLength(r, 0, k)
-        // for each collapsed clade, record the pixel x-positions of its
-        // nearest/farthest tips so the renderer can draw a triangle that spans
-        // the branch-length extent of the hidden subtree
+        // for each collapsed clade, record the pixel x-position of its farthest
+        // tip so the renderer can draw a triangle spanning the branch-length
+        // extent of the hidden subtree
         forEachDescendant(r, node => {
           if (node._children) {
-            const { min, max: mx } = collapsedSubtreeLengthExtent(node)
-            node.collapsedTipXNear = (node.len ?? 0) + min * k
-            node.collapsedTipXFar = (node.len ?? 0) + mx * k
+            node.collapsedTipXFar =
+              (node.len ?? 0) + collapsedSubtreeMaxLength(node) * k
           }
         })
         return r as HierarchyNode<NodeWithIdsAndLength>
@@ -1265,17 +1247,24 @@ function stateModelFactory() {
        * set hovered tree node and its descendants
        */
       setHoveredTreeNode(nodeId?: string) {
-        if (nodeId) {
-          const node = find(self.hierarchy, n => n.data.id === nodeId)
-          self.hoveredTreeNode = node
-            ? {
-                nodeId,
-                descendantNames: leaves(node).map(leaf => leaf.data.name),
-              }
-            : undefined
-        } else {
+        // the tree's mousemove handler calls this on every event, and both the
+        // lookup and the write are expensive: `find` walks the whole hierarchy,
+        // and a fresh object here invalidates hoveredRowIndices and redraws the
+        // tree and MSA overlays. Re-hovering the same node is the common case
+        if (nodeId === self.hoveredTreeNode?.nodeId) {
+          return
+        }
+        if (!nodeId) {
           self.hoveredTreeNode = undefined
+          return
         }
+        const node = find(self.hierarchy, n => n.data.id === nodeId)
+        self.hoveredTreeNode = node
+          ? {
+              nodeId,
+              descendantNames: leaves(node).map(leaf => leaf.data.name),
+            }
+          : undefined
       },
 
       /**
@@ -1394,23 +1383,40 @@ function stateModelFactory() {
        * #action
        */
       doScrollY(deltaY: number) {
-        self.scrollY = clamp(self.scrollY + deltaY, self.maxScrollY, 0)
+        this.setScrollY(self.scrollY + deltaY)
       },
 
       /**
        * #action
-       * Set domain annotations and reveal the overlay in a single step (or clear
-       * both when passed undefined). Shared by every domain source: InterProScan,
-       * GFF, user-provided uploads, and NCBI CDD.
+       * set scroll Y-offset (px), clamped to keep the alignment in view
+       */
+      setScrollY(n: number) {
+        self.scrollY = clamp(n, self.maxScrollY, 0)
+      },
+
+      /**
+       * #action
+       * Set the overlay annotations and reveal the overlay in a single step (an
+       * empty list clears both). Every source funnels through here after its
+       * own adapter has flattened it: InterProScan, GFF, user uploads, NCBI CDD.
+       */
+      setAnnotations(annotations: Annotation[]) {
+        self.annotations = annotations
+        self.setShowDomains(annotations.length > 0)
+      },
+
+      /**
+       * #action
+       * set the overlay from raw InterProScan results keyed by row name. Kept
+       * for downstream plugins that hold the EBI wire format; new code should
+       * adapt to Annotation[] and call setAnnotations.
        */
       setDomains(data?: Record<string, InterProScanResults>) {
-        self.interProAnnotations = data
-        self.setShowDomains(!!data)
+        this.setAnnotations(data ? interProScanToAnnotations(data) : [])
       },
 
       applyGFFText(gffText: string) {
-        const gffRecords = parseGFF(gffText)
-        this.setDomains(gffToInterProResults(gffRecords))
+        this.setAnnotations(gffToAnnotations(parseGFF(gffText)))
       },
 
       /**
@@ -1449,10 +1455,12 @@ function stateModelFactory() {
        * #getter
        */
       get labelWidthMap() {
-        const { rowHeight, leaves, treeMetadata, fontSize } = self
-        return rowHeight <= 5
-          ? new Map<string, number>()
-          : new Map(
+        const { showTreeText, leaves, treeMetadata, fontSize } = self
+        // gated on the same condition the renderer draws labels under, so the
+        // gutter labelsWidth reserves and the labels actually drawn cannot
+        // disagree -- and so turning labels off hands their space to the tree
+        return showTreeText
+          ? new Map(
               leaves.map(node => {
                 const { name } = node.data
                 // `||`, matching renderTreeLabels: an empty genome falls back
@@ -1462,6 +1470,7 @@ function stateModelFactory() {
                 return [name, measureTextCanvas(displayName, fontSize)] as const
               }),
             )
+          : new Map<string, number>()
       },
 
       get labelsWidth() {
@@ -1674,41 +1683,29 @@ function stateModelFactory() {
       get totalTrackAreaHeight() {
         return sum(self.turnedOnTracks.map(r => r.model.height))
       },
-      get tidyInterProAnnotationTypes() {
-        return new Map(
-          this.tidyInterProAnnotations.map(annot => [annot.accession, annot]),
-        )
-      },
-      get tidyInterProAnnotations() {
-        return self.interProAnnotations
-          ? Object.entries(self.interProAnnotations)
-              .flatMap(([id, val]) =>
-                val.matches.flatMap(({ signature, locations }) => {
-                  const { entry } = signature
-                  return entry
-                    ? locations.map(({ start, end, strand }) => ({
-                        id,
-                        name: entry.name,
-                        accession: entry.accession,
-                        description: entry.description,
-                        featureType: entry.featureType,
-                        start,
-                        end,
-                        strand,
-                      }))
-                    : []
-                }),
-              )
-              .toSorted((a, b) => len(b) - len(a))
-          : []
+      /**
+       * one representative annotation per accession, which is what the legend,
+       * the filter dialog and the palettes key off
+       */
+      get annotationTypes() {
+        // first occurrence wins. The representative supplies only the name,
+        // description and -- for ordinal segments -- the start that orders
+        // them, and those agree across an accession's instances
+        const types = new Map<string, Annotation>()
+        for (const annot of self.annotations) {
+          if (!types.has(annot.accession)) {
+            types.set(annot.accession, annot)
+          }
+        }
+        return types
       },
-      get tidyFilteredInterProAnnotations() {
-        return this.tidyInterProAnnotations.filter(r =>
+      get filteredAnnotations() {
+        return self.annotations.filter(r =>
           self.featureFilters.get(r.accession),
         )
       },
-      get tidyFilteredGatheredInterProAnnotations() {
-        return groupBy(this.tidyFilteredInterProAnnotations, r => r.id)
+      get annotationsByRow() {
+        return groupBy(this.filteredAnnotations, r => r.id)
       },
     }))
     .views(self => ({
@@ -1726,6 +1723,15 @@ function stateModelFactory() {
       get verticalScrollbarWidth() {
         return self.showVerticalScrollbar ? 20 : 0
       },
+      /**
+       * #getter
+       * width of the alignment canvas itself: the msa area less the vertical
+       * scrollbar sitting in it. Not usable from showHorizontalScrollbar, which
+       * feeds msaAreaHeight -> showVerticalScrollbar and would close a cycle
+       */
+      get msaCanvasWidth() {
+        return self.msaAreaWidth - this.verticalScrollbarWidth
+      },
       /**
        * #getter
        * ordinal segment types (exons etc.), ordered by sequence position so
@@ -1733,7 +1739,7 @@ function stateModelFactory() {
        * labeled by number rather than each getting a distinct hue + legend row
        */
       get segmentDomainTypes() {
-        return [...self.tidyInterProAnnotationTypes.values()]
+        return [...self.annotationTypes.values()]
           .filter(d => segmentFeatureTypes.has(d.featureType ?? ''))
           .toSorted((a, b) => a.start - b.start)
       },
@@ -1743,7 +1749,7 @@ function stateModelFactory() {
        * their own color and a legend entry
        */
       get categoricalDomainTypes() {
-        return [...self.tidyInterProAnnotationTypes.values()].filter(
+        return [...self.annotationTypes.values()].filter(
           d => !segmentFeatureTypes.has(d.featureType ?? ''),
         )
       },
@@ -1795,34 +1801,47 @@ function stateModelFactory() {
 
       /**
        * #getter
-       * every filtered-on domain annotation resolved to the visible column span
-       * it is drawn across, keyed by row name and in draw order (largest first,
-       * as tidyInterProAnnotations orders them). Resolving these once here rather
-       * than inside each canvas block removes a per-feature, per-block sequence
-       * position conversion from every redraw, and gives the letter renderer the
-       * band colors it needs to keep residues readable on top of the boxes.
+       * every filtered-on annotation resolved to the visible column span it is
+       * drawn across, keyed by row name. Each row is ordered longest-first so a
+       * short domain nested inside a long one draws on top of it rather than
+       * under it. Resolving these once here rather than inside each canvas
+       * block removes a per-feature, per-block sequence position conversion
+       * from every redraw, and gives the letter renderer the band colors it
+       * needs to keep residues readable on top of the boxes.
        */
       get domainBands() {
         const bands = new Map<string, DomainBand[]>()
         for (const [name, annotations] of Object.entries(
-          self.tidyFilteredGatheredInterProAnnotations,
+          self.annotationsByRow,
         )) {
+          const { blanks } = self
           const rowBands = annotations
-            .map((annotation, stackIndex) => {
-              // InterPro positions are 1-based and inclusive; endCol is the
-              // exclusive column *after* the last residue, taken from that
-              // residue rather than from the next one, so a band stops at its own
-              // last residue instead of stretching across a following gap run
-              const startCol = self.seqPosToVisibleCol(
-                name,
-                annotation.start - 1,
+            .toSorted((a, b) => len(b) - len(a))
+            .map(annotation => {
+              // annotation positions are 1-based and inclusive. Both ends count
+              // the visible columns in front of a global column, so endCol is
+              // the exclusive column after the last residue's own column --
+              // the band stops there rather than stretching across a following
+              // gap run -- and a residue whose column is itself hidden
+              // collapses onto the neighbouring boundary instead of dropping
+              // the band. A band whose every column is hidden spans nothing
+              // and is left out.
+              const startCol = visibleColsBefore(
+                blanks,
+                self.seqPosToGlobalCol(name, annotation.start - 1),
+              )
+              const endCol = visibleColsBefore(
+                blanks,
+                self.seqPosToGlobalCol(name, annotation.end - 1) + 1,
               )
-              const lastCol = self.seqPosToVisibleCol(name, annotation.end - 1)
-              return startCol !== undefined && lastCol !== undefined
-                ? { annotation, startCol, endCol: lastCol + 1, stackIndex }
+              return endCol > startCol
+                ? { annotation, startCol, endCol }
                 : undefined
             })
             .filter(notEmpty)
+            // numbered after the drop, so a band that resolved to nothing does
+            // not leave an empty sub-row behind it
+            .map((band, stackIndex) => ({ ...band, stackIndex }))
           if (rowBands.length > 0) {
             bands.set(name, rowBands)
           }
@@ -1985,7 +2004,7 @@ function stateModelFactory() {
         self.setTreeFilehandle(undefined)
         self.setMSAFilehandle(undefined)
         self.setGFFFilehandle(undefined)
-        self.setDomains(undefined)
+        self.setAnnotations([])
       },
       /**
        * #action
@@ -2035,8 +2054,11 @@ function stateModelFactory() {
        */
       fitHorizontally() {
         if (self.numColumns > 0) {
+          // fitting to msaAreaWidth instead left the last ~20px of columns off
+          // the right edge -- and short of the width that shows a minimap, so
+          // nothing on screen said they were there
           self.colWidth = clamp(
-            self.msaAreaWidth / self.numColumns,
+            self.msaCanvasWidth / self.numColumns,
             minColWidth,
             maxCellSize,
           )
@@ -2055,7 +2077,7 @@ function stateModelFactory() {
         addDisposer(
           self,
           autorun(() => {
-            for (const key of self.tidyInterProAnnotationTypes.keys()) {
+            for (const key of self.annotationTypes.keys()) {
               this.initFilter(key)
             }
           }),
@@ -2195,7 +2217,7 @@ function stateModelFactory() {
           }),
         )
 
-        // gffFilehandle carries InterProScan domains
+        // gffFilehandle carries overlay annotations
         loadOnFilehandleChange({
           getFilehandle: () => self.gffFilehandle,
           onLoad: text => {

package/src/renderMinimapSvg.test.tsx

@@ -0,0 +1,109 @@
+// @vitest-environment jsdom
+//
+// The viewport export draws a minimap by default, and nothing covered it. The
+// export lays the figure out on its own grid rather than the on-screen one, so
+// the minimap has to be told how wide to draw -- reading a width off the model
+// puts its trapezoid short of the alignment column beside it.
+import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
+import { enableStaticRendering } from 'mobx-react'
+import { beforeAll, expect, test } from 'vitest'
+
+import MSAModelF from './model.ts'
+import { renderToSvg } from './renderToSvg.tsx'
+
+class Mat {
+  constructor(
+    public a = 1,
+    public b = 0,
+    public c = 0,
+    public d = 1,
+    public e = 0,
+    public f = 0,
+  ) {}
+  multiply(o: Mat) {
+    return new Mat(
+      this.a * o.a + this.c * o.b,
+      this.b * o.a + this.d * o.b,
+      this.a * o.c + this.c * o.d,
+      this.b * o.c + this.d * o.d,
+      this.a * o.e + this.c * o.f + this.e,
+      this.b * o.e + this.d * o.f + this.f,
+    )
+  }
+  translate(x: number, y = 0) {
+    return this.multiply(new Mat(1, 0, 0, 1, x, y))
+  }
+  scale(x: number, y = x) {
+    return this.multiply(new Mat(x, 0, 0, y, 0, 0))
+  }
+}
+class Pt {
+  constructor(
+    public x = 0,
+    public y = 0,
+  ) {}
+  matrixTransform(m: Mat) {
+    return new Pt(
+      m.a * this.x + m.c * this.y + m.e,
+      m.b * this.x + m.d * this.y + m.f,
+    )
+  }
+}
+
+beforeAll(() => {
+  enableStaticRendering(true)
+  const g = globalThis as Record<string, unknown>
+  g.DOMMatrix = Mat
+  g.DOMPoint = Pt
+  HTMLCanvasElement.prototype.getContext = function () {
+    let font = '10px sans-serif'
+    return {
+      get font() {
+        return font
+      },
+      set font(v: string) {
+        font = v
+      },
+      measureText: (t: string) => ({
+        width: t.length * (Number.parseFloat(font) || 10) * 0.6,
+      }),
+    } as unknown as CanvasRenderingContext2D
+  } as unknown as typeof HTMLCanvasElement.prototype.getContext
+})
+
+const width = 1000
+
+function makeModel() {
+  const row = 'ACDEFGHIKL'.repeat(40)
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    msaFormat: 'fasta',
+    height: 300,
+    data: { msa: `>seq1\n${row}\n>seq2\n${row}` },
+  })
+  model.setWidth(width)
+  return model
+}
+
+test('the exported minimap spans the exported alignment column', async () => {
+  const model = makeModel()
+  expect(model.showHorizontalScrollbar).toBe(true)
+
+  const svg = await renderToSvg(model, {
+    theme: createJBrowseTheme(),
+    exportType: 'viewport',
+    includeMinimap: true,
+    includeTracks: false,
+  })
+
+  // the minimap column runs from the tree area to the right edge of the figure
+  const minimapWidth = width - model.treeAreaWidth
+  const polygon = /<polygon[^>]*points="([^"]*)"/.exec(svg)?.[1]
+  expect(polygon).toBeDefined()
+  // bottom edge of the trapezoid reaches the full width it was given
+  expect(polygon!.endsWith(`${minimapWidth},${model.minimapHeight - 12}`)).toBe(
+    true,
+  )
+  // and the bar outline is drawn to the same width
+  expect(svg).toContain(`width="${minimapWidth}"`)
+})

package/src/renderToSvg.tsx

@@ -161,7 +161,7 @@ function MsaSvg({
       {includeMinimap ? (
         <>
           <g transform={`translate(${treeAreaWidth} 0)`}>
-            <MinimapSVG model={model} />
+            <MinimapSVG model={model} width={width - treeAreaWidth} />
           </g>
           <g transform={`translate(0 ${minimapHeight})`}>{body}</g>
         </>
@@ -178,7 +178,7 @@ function MsaSvg({
 }
 
 // the domain color key drawn as a reserved column to the right of the
-// alignment, mirroring the on-screen DomainLegend overlay
+// alignment, mirroring the on-screen AnnotationLegend overlay
 function LegendSVG({ model, width }: { model: MsaViewModel; width: number }) {
   const { visibleDomainTypes, fillPalette, strokePalette } = model
   const boxHeight = LEGEND_PAD * 2 + visibleDomainTypes.length * LEGEND_ROW_H