jbrowse-plugin-graphgenomeviewer 7.4.3 → 7.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jbrowse-plugin-graphgenomeviewer",
-  "version": "7.4.3",
+  "version": "7.5.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": {
@@ -32,7 +32,7 @@
     "@jbrowse/core": "5.0.0-beta.11",
     "@jbrowse/display-kit": "5.0.0-beta.11",
     "@jbrowse/display-ui": "5.0.0-beta.11",
-    "@jbrowse/graph-walks": "^4.0.0",
+    "@jbrowse/graph-walks": "^4.2.0",
     "@jbrowse/render-core": "5.0.0-beta.11",
     "@jbrowse/synteny-core": "5.0.0-beta.11"
   },
@@ -40,7 +40,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@eslint/js": "^10.0.1",
-    "@jbrowse/bandage-core": "^11.7.3",
+    "@jbrowse/bandage-core": "^11.11.0",
     "@jbrowse/cli": "^4.3.0",
     "@jbrowse/mobx-state-tree": "^6.9.0",
     "@jbrowse/plugin-linear-genome-view": "5.0.0-beta.11",

package/src/GraphComputeLayout.test.ts

@@ -0,0 +1,24 @@
+import { layoutEngine } from '@jbrowse/bandage-core/layoutEngines'
+import PluginManager from '@jbrowse/core/PluginManager'
+
+import GraphComputeLayout from './GraphComputeLayout'
+
+vi.mock('@jbrowse/bandage-core/layoutEngines', () => ({
+  layoutEngine: vi.fn(() => Promise.resolve({ result: {}, duration: 0 })),
+}))
+
+// A layout the user moved on from while it waited behind another in the
+// worker's queue
+test('a layout aborted before it starts never reaches the engine', async () => {
+  const method = new GraphComputeLayout(new PluginManager([]))
+  const gone = new AbortController()
+  gone.abort()
+  await expect(
+    method.execute({
+      graph: { name: 'g', nodes: [], edges: [] },
+      options: {},
+      signal: gone.signal,
+    } as never),
+  ).rejects.toMatchObject({ name: 'AbortError' })
+  expect(layoutEngine).not.toHaveBeenCalled()
+})

package/src/GraphComputeLayout.ts

@@ -24,8 +24,10 @@ export default class GraphComputeLayout extends RpcMethodType<'GraphComputeLayou
   name = 'GraphComputeLayout' as const
 
   async execute(args: RpcExecuteArgs<'GraphComputeLayout'>) {
-    const { graph, options, statusCallback } = args
-
+    const { graph, options, signal, statusCallback } = args
+    // The engine takes no signal, so a layout superseded while it queued
+    // behind another is dropped here rather than holding up the next cut
+    signal?.throwIfAborted()
     statusCallback?.('Computing layout')
     return layoutEngine({ graph, options })
   }

package/src/GraphGenomeView/components/GraphSettingsDialog.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 
 import { BUBBLE_SPREADS } from '@jbrowse/bandage-core/bubbleSpreads'
+import { EDGE_WIDTHS } from '@jbrowse/bandage-core/edgeWidths'
 import { LAYOUT_ENGINES } from '@jbrowse/bandage-core/layoutEngines'
 import { LAYOUT_QUALITIES } from '@jbrowse/bandage-core/layoutQualities'
 import { NODE_WIDTHS } from '@jbrowse/bandage-core/nodeWidths'
@@ -227,6 +228,21 @@ const GraphSettingsDialog = observer(function GraphSettingsDialog(props: {
             </Caption>
           </SettingSelect>
 
+          <SettingSelect
+            label="Link width"
+            value={model.linkWidth}
+            options={EDGE_WIDTHS}
+            testId="graph-link-width-select"
+            onChange={links => {
+              model.setLinkWidth(links)
+            }}
+          >
+            <Caption>
+              Walks as width, so a common route reads heavy and a private one
+              thin.
+            </Caption>
+          </SettingSelect>
+
           <SettingSwitch
             label="Draw paths"
             checked={model.drawPaths}

package/src/GraphGenomeView/components/WalkRowsOverlay.tsx

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react'
 
 import ElTree, { useSvgId } from './ElTree'
 import { PaneOverlayCanvas, PaneSvgLayer } from './PaneLayer'
+import { paintWalkRowBlocks } from '../walkRowBlocks'
 import { SECTION_HEADER_PX, walkRowTrees } from '../walkRowGroups'
 import { paintWalkRowSpans, walkRowSpans } from '../walkRowSpans'
 
@@ -83,6 +84,82 @@ function WalkRowSpansCanvas({ model }: { model: GraphPaneModel }) {
   )
 }
 
+const RIBBON_FORWARD = 'rgba(160, 196, 232, 0.55)'
+const RIBBON_REVERSED = 'rgba(160, 140, 220, 0.55)'
+
+// Under the bars, a ribbon from each stretch of a row to where the row below
+// walks the same nodes, lavender where it walks them backwards, as ggbandage
+// draws them: neighbours that share a copy, an inversion or a duplication
+// read off the ribbons' shape
+function WalkRowRibbonsCanvas({ model }: { model: GraphPaneModel }) {
+  const paint = useCallback(
+    (ctx: CanvasRenderingContext2D) => {
+      const links = model.walkRowRibbons
+      const bars = model.walkRowBars
+      const place = model.walkRowPlacement
+      const pitch = model.walkRowPitch
+      if (!links || !bars || !place || !pitch) {
+        return
+      }
+      const { scaleX, scaleY, translateX, translateY } = model.screenTransform
+      const x = (offset: number) => (bars.origin + offset) * scaleX + translateX
+      const half = pitch.barPx / 2
+      for (const { row, a0, a1, b0, b1 } of links) {
+        const top = place.rowY(row) * scaleY + translateY + half
+        const bottom = place.rowY(row + 1) * scaleY + translateY - half
+        ctx.fillStyle = b0 > b1 ? RIBBON_REVERSED : RIBBON_FORWARD
+        ctx.beginPath()
+        ctx.moveTo(x(a0), top)
+        ctx.lineTo(x(a1), top)
+        ctx.lineTo(x(b1), bottom)
+        ctx.lineTo(x(b0), bottom)
+        ctx.closePath()
+        ctx.fill()
+      }
+    },
+    [model],
+  )
+  return (
+    <PaneOverlayCanvas
+      model={model}
+      zIndex={2}
+      testId="graph-walk-rows-ribbons"
+      paint={paint}
+    />
+  )
+}
+
+// Over the bars, the lettered blocks: copy A on two rows, and C where another
+// row has A, read at a glance
+function WalkRowBlocksCanvas({ model }: { model: GraphPaneModel }) {
+  const paint = useCallback(
+    (ctx: CanvasRenderingContext2D) => {
+      const blocks = model.sharedBlocks
+      const bars = model.walkRowBars
+      const place = model.walkRowPlacement
+      const pitch = model.walkRowPitch
+      if (!blocks || !bars || !place || !pitch) {
+        return
+      }
+      const { scaleX, scaleY, translateX, translateY } = model.screenTransform
+      paintWalkRowBlocks(ctx, blocks, {
+        x: offset => (bars.origin + offset) * scaleX + translateX,
+        rowCentre: row => place.rowY(row) * scaleY + translateY,
+        barPx: pitch.barPx,
+      })
+    },
+    [model],
+  )
+  return (
+    <PaneOverlayCanvas
+      model={model}
+      zIndex={3}
+      testId="graph-walk-rows-blocks"
+      paint={paint}
+    />
+  )
+}
+
 // Its own observer, so moving between rows redraws this rect and not every row
 const HoveredWalkRow = observer(function HoveredWalkRow({
   model,
@@ -142,7 +219,13 @@ const WalkRowsOverlay = observer(function WalkRowsOverlay({
   }
   return (
     <>
+      {vector || !model.walkRowRibbons ? null : (
+        <WalkRowRibbonsCanvas model={model} />
+      )}
       {vector ? null : <WalkRowSpansCanvas model={model} />}
+      {vector || !model.sharedBlocks ? null : (
+        <WalkRowBlocksCanvas model={model} />
+      )}
       <PaneSvgLayer
         model={model}
         zIndex={3}

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

@@ -136,7 +136,7 @@ test('a hosted pane that pans itself claims presses from the linear view; one th
 })
 
 // A pane mid-drag, whose transform moves as the model's would
-function panModel() {
+function panModel(state: Record<string, unknown> = {}) {
   const model: Record<string, unknown> = fakeModel({
     isPanning: false,
     draggingNode: null,
@@ -155,6 +155,7 @@ function panModel() {
       model.isPanning = false
     },
     clearHover: vi.fn(),
+    ...state,
   })
   return model
 }
@@ -382,11 +383,12 @@ describe('a press on a bubble label', () => {
     window.dispatchEvent(e)
   }
 
-  function pressLabel() {
-    const model = panModel()
-    const { result } = renderHook(() =>
+  function pressLabel(
+    model = panModel(),
+    { result } = renderHook(() =>
       usePaneGestures(model as unknown as GraphPaneModel),
-    )
+    ),
+  ) {
     const layer = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
     layer.setAttribute(PANS_WITH_DRAWING, '')
     const chip = document.createElementNS('http://www.w3.org/2000/svg', 'g')
@@ -402,6 +404,7 @@ describe('a press on a bubble label', () => {
     const click = { stopPropagation: vi.fn() }
     return {
       model,
+      result,
       click: () => {
         onClickCapture(click as unknown as React.MouseEvent)
         return click.stopPropagation.mock.calls.length === 0
@@ -428,6 +431,75 @@ describe('a press on a bubble label', () => {
     expect(click()).toBe(false)
   })
 
+  // The pointer leaves a 3px tick at once, so the canvas under it sees the
+  // same moves the window listener pans by
+  test('pans once, not again through the canvas under the pointer', () => {
+    const frames: FrameRequestCallback[] = []
+    vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) =>
+      frames.push(cb),
+    )
+    const { model, result } = pressLabel()
+    act(() => {
+      pointer('pointermove', 110)
+      result.current.handlers.onPointerMove(at(110, 20))
+      pointer('pointermove', 140)
+      result.current.handlers.onPointerMove(at(140, 20))
+      frames.splice(0).forEach(f => {
+        f(0)
+      })
+    })
+    expect(model.translateX).toBe(40)
+  })
+
+  test('after a drag on the reference strip still pans the graph', () => {
+    const frames: FrameRequestCallback[] = []
+    vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) =>
+      frames.push(cb),
+    )
+    const horizontalScroll = vi.fn()
+    const model = panModel({
+      referenceStripZonePx: 30,
+      host: { horizontalScroll },
+      followsHostView: false,
+    })
+    const hook = renderHook(() =>
+      usePaneGestures(model as unknown as GraphPaneModel),
+    )
+    const canvas = Object.assign(document.createElement('canvas'), {
+      setPointerCapture: vi.fn(),
+      getBoundingClientRect: () => ({ left: 0, top: 0 }),
+    })
+    const press = (x: number) =>
+      ({
+        clientX: x,
+        clientY: 10,
+        button: 0,
+        pointerId: 1,
+        pointerType: 'mouse',
+        currentTarget: canvas,
+      }) as unknown as React.PointerEvent
+    const h = hook.result.current.handlers
+    act(() => {
+      h.onPointerDown(press(50))
+      h.onPointerMove(press(80))
+      frames.splice(0).forEach(f => {
+        f(0)
+      })
+      h.onPointerUp(press(80))
+    })
+    horizontalScroll.mockClear()
+    pressLabel(model, hook)
+    act(() => {
+      pointer('pointermove', 140)
+      frames.splice(0).forEach(f => {
+        f(0)
+      })
+      pointer('pointerup', 140)
+    })
+    expect(horizontalScroll).not.toHaveBeenCalled()
+    expect(model.translateX).toBe(40)
+  })
+
   test('that stays put is a click on the label', () => {
     const { model, click } = pressLabel()
     act(() => {
@@ -439,6 +511,11 @@ describe('a press on a bubble label', () => {
   })
 })
 
+test('a frame that began before the wheel event never zooms backwards', () => {
+  expect(easeZoom(0.2, -5)).toBeGreaterThanOrEqual(0)
+  expect(easeZoom(-0.2, -5)).toBeLessThanOrEqual(0)
+})
+
 test('a wheel notch eases in over a few frames and lands the whole zoom', () => {
   const owed = Math.log(1.21)
   let left = owed

package/src/GraphGenomeView/components/usePaneGestures.ts

@@ -27,9 +27,11 @@ const ZOOM_ACTIVE_MS = 100
 const ZOOM_EASE_MS = 24
 const MAX_ZOOM_BACKLOG = Math.log(16)
 
-// how much of the owed zoom, in log(scale), to apply this frame
+// How much of the owed zoom, in log(scale), to apply this frame. A frame's
+// timestamp is when it began, so a wheel handled late in one leaves elapsedMs
+// negative, which would ease the zoom backwards.
 export function easeZoom(backlog: number, elapsedMs: number) {
-  const rest = backlog * Math.exp(-elapsedMs / ZOOM_EASE_MS)
+  const rest = backlog * Math.exp(-Math.max(0, elapsedMs) / ZOOM_EASE_MS)
   return Math.abs(rest) < 1e-3 ? backlog : backlog - rest
 }
 
@@ -173,6 +175,9 @@ export function usePaneGestures(model: GraphPaneModel) {
   const dragCanvasRef = useRef<Element | null>(null)
   const pinchRef = useRef<ReturnType<typeof pinchOf> | null>(null)
   const stripPanRef = useRef(false)
+  // a press on a bubble label pans through window listeners, so the canvas
+  // under the pointer leaves those moves alone
+  const labelPanRef = useRef<{ end: () => void; moved: boolean } | null>(null)
   const verticalPanRef = useRef(false)
   // A pan and a hover are applied once per frame, not once per mousemove:
   // mousemove fires in bursts well above the frame rate, and each pan step
@@ -428,7 +433,7 @@ export function usePaneGestures(model: GraphPaneModel) {
       scheduleFrame()
       return
     }
-    if (isOtherPointer(e)) {
+    if (isOtherPointer(e) || labelPanRef.current) {
       return
     }
     const dx = e.clientX - lastMouseRef.current.x
@@ -542,7 +547,6 @@ export function usePaneGestures(model: GraphPaneModel) {
   // the drawing does, rather than leaving a patch of the graph that will not
   // drag; one that stays put is a click on the label. The click that ends a
   // pan is swallowed before the label sees it.
-  const labelPanRef = useRef<{ end: () => void; moved: boolean } | null>(null)
   useEffect(
     () => () => {
       labelPanRef.current?.end()
@@ -560,6 +564,8 @@ export function usePaneGestures(model: GraphPaneModel) {
       return
     }
     labelPanRef.current?.end()
+    stripPanRef.current = false
+    verticalPanRef.current = false
     const id = e.pointerId
     const start = pointOf(e)
     let last = start

package/src/GraphGenomeView/graphLayers.ts

@@ -9,8 +9,19 @@ import { isRecord } from '../isRecord'
 // - `referenceStrip`: reference segments at their bp, over a drawing in its
 //   own coordinates inside a linear view
 // - `walkStrip`: walk rows under a node layout, linked to the drawing
+// - `walkRibbons`: between neighbouring walk rows, a ribbon joining the
+//   stretches both walk through the same nodes
+// - `walkBlocks`: on walk rows, a lettered box round each stretch of nodes off
+//   the reference's path that two or more rows walk
 export type GraphLayer =
-  'paths' | 'bubbles' | 'deletions' | 'genes' | 'referenceStrip' | 'walkStrip'
+  | 'paths'
+  | 'bubbles'
+  | 'deletions'
+  | 'genes'
+  | 'referenceStrip'
+  | 'walkStrip'
+  | 'walkRibbons'
+  | 'walkBlocks'
 
 const DEFAULTS: Record<GraphLayer, boolean> = {
   paths: false,
@@ -19,6 +30,8 @@ const DEFAULTS: Record<GraphLayer, boolean> = {
   genes: true,
   referenceStrip: true,
   walkStrip: false,
+  walkRibbons: false,
+  walkBlocks: false,
 }
 
 // A config or session states only what differs from the defaults, as

package/src/GraphGenomeView/legendSections.ts

@@ -28,6 +28,7 @@ import { walkKey } from '@jbrowse/bandage-core/walkKey'
 
 import { CALL_TOLERANCE } from './repeats/walkCalls'
 import { PANEL_REFERENCE_TUBE } from './tubeMapPanels'
+import { COLORED_BLOCKS, blockFill, blockLetter } from './walkRowBlocks'
 
 import type { GraphPaneModel } from './model'
 import type { KeySwatch } from '@jbrowse/bandage-core/layout/walkRowDraw'
@@ -399,6 +400,36 @@ export function walkRowSwatch(swatch: KeySwatch): LegendSwatch {
       }
 }
 
+// The shared blocks the rows draw: each coloured one by its letter, then one
+// row for the grey rest
+function blockRows(model: GraphPaneModel): LegendRow[] {
+  const present = new Set(model.sharedBlocks?.map(b => b.block))
+  const swatch = (block: number) => ({
+    kind: 'fill' as const,
+    stops: flat(blockFill(block)),
+    height: WALK_ROW_SWATCH_PX,
+  })
+  return [
+    ...[...present]
+      .filter(block => block < COLORED_BLOCKS)
+      .sort((a, b) => a - b)
+      .map(block => ({
+        key: `block-${block}`,
+        label: `${blockLetter(block)}: off the reference, walked by several rows`,
+        swatch: swatch(block),
+      })),
+    ...([...present].some(block => block >= COLORED_BLOCKS)
+      ? [
+          {
+            key: 'block-more',
+            label: 'more shared blocks',
+            swatch: swatch(COLORED_BLOCKS),
+          },
+        ]
+      : []),
+  ]
+}
+
 // The walk rows' bar colours, genes and ticks; each tick row appears once
 // the rows hold one, so a catalogue with no genotypes keeps the plain key
 function walkRowsRows(model: GraphPaneModel): LegendRow[] {
@@ -421,6 +452,7 @@ function walkRowsRows(model: GraphPaneModel): LegendRow[] {
       label: entry.label,
       swatch: entry.note ? undefined : walkRowSwatch(entry.swatch),
     })),
+    ...blockRows(model),
     ...(calls.some(call => call.spanningReads !== 0)
       ? [tick('call', CALL_TICK, 'allele length called for this walk')]
       : []),