jbrowse-plugin-graphgenomeviewer 3.0.4 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jbrowse-plugin-graphgenomeviewer",
-  "version": "3.0.4",
+  "version": "3.1.0",
   "description": "JBrowse 2 graph genome (pangenome) view: rGFA reference-anchored layouts, the Bandage force-directed engine, and haplotype lanes read from a gbz-base database",
   "license": "GPL-3.0-or-later",
   "repository": {
@@ -25,12 +25,12 @@
   ],
   "private": false,
   "dependencies": {
-    "@gmod/gbz-base": "^2.7.0",
-    "@gmod/tabix": "^3.8.2",
-    "@jbrowse/cigar-utils": "^5.0.0-beta.9",
-    "@jbrowse/core": "^5.0.0-beta.9",
-    "@jbrowse/render-core": "^5.0.0-beta.9",
-    "@jbrowse/synteny-core": "^5.0.0-beta.9"
+    "@gmod/gbz-base": "^2.8.0",
+    "@gmod/tabix": "^3.8.3",
+    "@jbrowse/cigar-utils": "5.0.0-beta.9",
+    "@jbrowse/core": "5.0.0-beta.9",
+    "@jbrowse/render-core": "5.0.0-beta.9",
+    "@jbrowse/synteny-core": "5.0.0-beta.9"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
@@ -38,30 +38,30 @@
     "@eslint/js": "^10.0.1",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
     "@jbrowse/cli": "^4.3.0",
-    "@jbrowse/mobx-state-tree": "^6.5.2",
-    "@jbrowse/plugin-canvas": "^5.0.0-beta.9",
-    "@jbrowse/plugin-linear-genome-view": "^5.0.0-beta.9",
+    "@jbrowse/mobx-state-tree": "^6.6.1",
+    "@jbrowse/plugin-canvas": "5.0.0-beta.9",
+    "@jbrowse/plugin-linear-genome-view": "5.0.0-beta.9",
     "@mui/icons-material": "^9.4.0",
     "@mui/material": "^9.4.0",
     "@mui/system": "^9.4.0",
     "@testing-library/react": "^16.3.3",
-    "@types/node": "^26.5.1",
+    "@types/node": "^26.6.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.70.0",
-    "@typescript-eslint/parser": "^8.70.0",
+    "@typescript-eslint/eslint-plugin": "^8.70.1",
+    "@typescript-eslint/parser": "^8.70.1",
     "esbuild": "^0.28.2",
-    "eslint": "^10.10.0",
+    "eslint": "^10.11.0",
     "eslint-plugin-import-x": "^4.17.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "git-cliff": "^2.13.1",
-    "jsdom": "^30.0.1",
-    "mobx": "^7.0.3",
+    "git-cliff": "^2.14.2",
+    "jsdom": "^30.1.1",
+    "mobx": "^7.0.4",
     "mobx-react": "^10.0.2",
-    "prettier": "^3.9.6",
+    "prettier": "^3.9.9",
     "pretty-bytes": "^7.1.3",
-    "puppeteer": "^25.10.0",
+    "puppeteer": "^25.12.0",
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "rimraf": "^6.1.3",
@@ -69,9 +69,9 @@
     "serve": "^14.2.6",
     "tss-react": "^4.9.21",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.70.0",
+    "typescript-eslint": "^8.70.1",
     "typescript7": "npm:typescript@^7.0.2",
-    "vitest": "^5.0.0"
+    "vitest": "^5.0.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -93,7 +93,6 @@
     "bench:layout": "node scripts/bench-layout.mjs",
     "layout-digest": "node scripts/layout-digest.mjs",
     "build:bundle": "NODE_ENV=production node esbuild.mjs",
-    "betabuild": "bash scripts/betabuild.sh",
     "typecheck": "node node_modules/typescript7/bin/tsc --noEmit",
     "host-compat": "node scripts/host-compat-probe.mjs",
     "lint": "eslint --report-unused-disable-directives --max-warnings 0",

package/src/GbzBaseSyntenyAdapter/GbzBaseSyntenyAdapter.test.ts

@@ -1,3 +1,6 @@
+import { Subgraph } from '@gmod/gbz-base'
+import { numericCigarToString } from '@jbrowse/cigar-utils'
+import PluginManager from '@jbrowse/core/PluginManager'
 import { firstValueFrom } from 'rxjs'
 import { toArray } from 'rxjs/operators'
 
@@ -7,6 +10,7 @@ import Adapter, {
   laneAssemblyName,
 } from './GbzBaseSyntenyAdapter.ts'
 import configSchema from './configSchema.ts'
+import GbzBaseSyntenyAdapterF from './index.ts'
 
 import type { SyntenyMate } from '@jbrowse/synteny-core'
 
@@ -459,6 +463,15 @@ const spanOf = (intervals: { start: number; end: number }[]) => ({
   end: Math.max(...intervals.map(i => i.end)),
 })
 
+test('the adapter type declares that a window of its anchor answers any lane pair', () => {
+  const pluginManager = new PluginManager()
+  GbzBaseSyntenyAdapterF(pluginManager)
+  pluginManager.createPluggableElements()
+  expect(
+    pluginManager.getAdapterType('GbzBaseSyntenyAdapter').adapterCapabilities,
+  ).toContain('lanePairsOnAnchor')
+})
+
 // HG00673#1's insertion is 16 bp longer than HG01361#2's, so that pair holds
 // an indel, which pins which side of the record its CIGAR walks. HG00438#1 is
 // assembled reverse to GRCh38. Each pair covers the stretch of each haplotype
@@ -476,6 +489,7 @@ test.each(['HG02145#2', 'HG00673#1', 'HG00438#1'])(
       expect(f.get('assemblyName')).toBe('HG01361#2')
       const mate = mateOf(f)
       expect(mate.assemblyName).toBe(lower)
+      expect(f.get('CIGAR')).toMatch(/^(\d+[=ID])+$/)
       expect(cigarSpans(f.get('CIGAR'))).toEqual({
         feature: f.get('end') - f.get('start'),
         mate: mate.end - mate.start,
@@ -520,6 +534,61 @@ test('a reverse-strand pair writes its CIGAR along the query lane', async () =>
   expect(reverse.get('CIGAR')).toBe(forward.get('CIGAR'))
 })
 
+// HG01361#2 and HG00673#1 differ by one SNP in this window, which the graph
+// holds as a bubble: an insertion and a deletion, where comparing the bases
+// would write 1X
+const snpPair = {
+  queryAssemblyName: 'HG01361#2',
+  targetAssemblyName: 'HG00673#1',
+}
+
+test('a SNP between two lanes is the bubble the graph holds, an insertion and a deletion', async () => {
+  const records = await feats(anchoredAdapter(), window, snpPair)
+  expect(records.map(f => [f.get('CIGAR'), f.get('numMatches')])).toEqual([
+    ['800=1I1D413=', 1213],
+  ])
+})
+
+test('a lane pair fetched the way MultiWaySyntenyDisplay fetches it hands over those ops', async () => {
+  const records = await firstValueFrom(
+    anchoredAdapter()
+      .getFeaturesInMultipleRegions([window] as never, {
+        ...snpPair,
+        clipToRegion: true,
+        splitAtGapBp: 10_000,
+        keepAlignment: true,
+      })
+      .pipe(toArray()),
+  )
+  expect(
+    records.map(f =>
+      numericCigarToString(f.get('alignmentOps') as Uint32Array),
+    ),
+  ).toEqual(['800=1I1D413='])
+})
+
+// HG00673#2 differs from HG01361#2 in a 4 bp bubble whose middle two bases
+// agree, which comparing bases would count as matches. Nowhere in the slice
+// would it find an inversion inside a gap, so the option alone keeps one out
+test('a lane pair asks gbz-base to compare no base, and every match it answers is a shared node', async () => {
+  const read = vi.spyOn(Subgraph.prototype, 'pairAlignments')
+  await feats(anchoredAdapter(), window, {
+    queryAssemblyName: 'HG01361#2',
+    targetAssemblyName: 'HG00673#2',
+  })
+  const answered = read.mock.results.flatMap(result =>
+    result.type === 'return' ? result.value : [],
+  )
+  expect(answered.length).toBeGreaterThan(0)
+  for (const [opts] of read.mock.calls) {
+    expect(opts.bases).toBe(false)
+  }
+  for (const pair of answered) {
+    expect(pair.matches).toBe(pair.sharedBases)
+  }
+  read.mockRestore()
+})
+
 test('the pair with an indel between its lanes writes it', async () => {
   const records = await feats(anchoredAdapter(), insertionWindow, {
     queryAssemblyName: 'HG01361#2',

package/src/GbzBaseSyntenyAdapter/GbzBaseSyntenyAdapter.ts

@@ -546,8 +546,9 @@ export default class GbzBaseSyntenyAdapter extends ComparativeAdapterBase<GbzBas
 
   /**
    * The two lanes' walks cut out of the anchor window alone, and each walk
-   * of the query lane aligned to each walk of the target lane. The records
-   * sit on the query lane's contigs, the lane the display draws on top.
+   * of the query lane aligned to each walk of the target lane on the nodes
+   * both visit, with no base compared. The records sit on the query lane's
+   * contigs, the lane the display draws on top.
    *
    * Only a cut walked from the haplotype index's anchor rows holds each walk
    * whole. The sampled cut leaves a walk in pieces wherever it strays past the
@@ -593,7 +594,7 @@ export default class GbzBaseSyntenyAdapter extends ComparativeAdapterBase<GbzBas
       query && anchored && featureSide.length > 0 && mateSide.length > 0
         ? (
             await updateStatus(
-              `Aligning ${queryAssemblyName} to ${targetAssemblyName}`,
+              `Reading ${queryAssemblyName} against ${targetAssemblyName}`,
               opts.statusCallback,
               async () =>
                 Promise.all(
@@ -612,13 +613,15 @@ export default class GbzBaseSyntenyAdapter extends ComparativeAdapterBase<GbzBas
       ? subgraphs.flatMap(subgraph =>
           featureSide.flatMap(target =>
             mateSide.flatMap(mate =>
-              subgraph.pairAlignments({ target, query: mate }).map(pair =>
-                pairFeature({
-                  pair,
-                  lane: queryAssemblyName,
-                  mateLane: targetAssemblyName,
-                }),
-              ),
+              subgraph
+                .pairAlignments({ target, query: mate, bases: false })
+                .map(pair =>
+                  pairFeature({
+                    pair,
+                    lane: queryAssemblyName,
+                    mateLane: targetAssemblyName,
+                  }),
+                ),
             ),
           ),
         )

package/src/GetSubgraph.ts

@@ -12,10 +12,14 @@ import type { Region } from '@jbrowse/core/util'
 // cut reads; the GBZ cut has its own bp `context` slot. `haplotypes` is the
 // set the cut is for, lane assembly names or PanSN prefixes, which only the GBZ
 // cut reads: it keeps those walks and the nodes they visit. Undefined or empty
-// is every haplotype.
+// is every haplotype. `tier` picks which of an rGFA track's two index pairs the
+// cut reads, the adapter's own or its `coarse` one; fine when absent.
+export type SubgraphTier = 'fine' | 'coarse'
+
 export interface SubgraphCutOptions {
   hops?: number
   haplotypes?: string[]
+  tier?: SubgraphTier
 }
 
 // What an adapter's cut is handed: the payload, plus the call's own signal so

package/src/GraphGenomeView/components/FollowControl.test.tsx

@@ -0,0 +1,69 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+
+import FollowControl from './FollowControl'
+
+import type { GraphGenomeViewModel } from '../model'
+
+function control(state: Partial<GraphGenomeViewModel>) {
+  const model = {
+    loadedTrackId: 'graph',
+    followLinearView: true,
+    followState: { active: true },
+    followNote: undefined,
+    cutTier: 'fine',
+    setFollowLinearView: vi.fn(),
+    ...state,
+  }
+  render(<FollowControl model={model as unknown as GraphGenomeViewModel} />)
+  return model
+}
+
+function status() {
+  return screen.queryByTestId('graph-follow-status')?.textContent
+}
+
+test('a following graph offers Pin, and says it is following', () => {
+  const model = control({})
+  expect(status()).toBe('Following the linear view')
+  fireEvent.click(screen.getByText('Pin'))
+  expect(model.setFollowLinearView).toHaveBeenCalledWith(false)
+})
+
+test('a pinned graph offers Follow, and says it is pinned', () => {
+  const model = control({
+    followLinearView: false,
+    followState: { active: false, reason: undefined },
+  })
+  expect(status()).toBe('Pinned')
+  fireEvent.click(screen.getByText('Follow'))
+  expect(model.setFollowLinearView).toHaveBeenCalledWith(true)
+})
+
+test('a follow that cannot run says why', () => {
+  control({
+    followState: {
+      active: false,
+      reason: 'Not following: x is not reference bp (Force-directed layout)',
+    },
+  })
+  expect(status()).toMatch(/Force-directed layout/)
+  expect(screen.getByText('Pin')).toBeTruthy()
+})
+
+test('a coarse cut says so', () => {
+  control({ cutTier: 'coarse' })
+  expect(status()).toBe('Following the linear view, coarse tier')
+})
+
+test('a held cut says what it is holding', () => {
+  control({
+    followNote: 'Holding the last cut: 6 Mb is past the 5 Mb a cut may span',
+  })
+  expect(status()).toMatch(/^Holding the last cut/)
+})
+
+test('a graph from a whole file has no follow control', () => {
+  control({ loadedTrackId: '' })
+  expect(screen.queryByText('Pin')).toBeNull()
+  expect(status()).toBeUndefined()
+})

package/src/GraphGenomeView/components/FollowControl.tsx

@@ -0,0 +1,42 @@
+import { Button, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import type { GraphGenomeViewModel } from '../model'
+
+const FollowControl = observer(function FollowControl({
+  model,
+}: {
+  model: GraphGenomeViewModel
+}) {
+  const { followLinearView, followState } = model
+  const note = followState.active ? model.followNote : undefined
+  const state = !followLinearView
+    ? 'Pinned'
+    : followState.active
+      ? (note ??
+        `Following the linear view${model.cutTier === 'coarse' ? ', coarse tier' : ''}`)
+      : followState.reason
+  return model.loadedTrackId ? (
+    <>
+      <Button
+        size="small"
+        onClick={() => {
+          model.setFollowLinearView(!followLinearView)
+        }}
+      >
+        {followLinearView ? 'Pin' : 'Follow'}
+      </Button>
+      {state ? (
+        <Typography
+          variant="caption"
+          color={note ? 'warning.main' : 'text.secondary'}
+          data-testid="graph-follow-status"
+        >
+          {state}
+        </Typography>
+      ) : null}
+    </>
+  ) : null
+})
+
+export default FollowControl

package/src/GraphGenomeView/components/GraphStats.tsx

@@ -69,6 +69,7 @@ const GraphStats = observer(function GraphStats({
       data-layout-ms={model.lastLayoutMs ?? ''}
       data-geometry-ms={model.lastGeometryMs ?? ''}
       data-geometry-strokes={model.lastGeometryStrokeCount ?? ''}
+      data-follow-recuts={model.followRecuts}
     >
       <Typography variant="body2" component="span">
         {model.nodeCount} nodes, {model.edgeCount} edges

package/src/GraphGenomeView/components/GraphToolbar.tsx

@@ -6,6 +6,7 @@ import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
 import ColorSchemeSelect from './ColorSchemeSelect'
+import FollowControl from './FollowControl'
 import GraphStats from './GraphStats'
 import LayoutSelect from './LayoutSelect'
 import RepeatSelect from './RepeatSelect'
@@ -75,6 +76,7 @@ const GraphToolbar = observer(function GraphToolbar({
         </IconButton>
       </Tooltip>
       <ZoomDisplay model={model} />
+      <FollowControl model={model} />
       <GraphStats model={model} />
       <SettingsMenu model={model} />
     </div>