jbrowse-plugin-graphgenomeviewer 4.2.0 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jbrowse-plugin-graphgenomeviewer",
-  "version": "4.2.0",
+  "version": "4.3.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": {
@@ -76,7 +76,7 @@
     "typescript-eslint": "^8.70.1",
     "typescript7": "npm:typescript@^7.0.2",
     "vitest": "^5.0.2",
-    "@jbrowse/bandage-core": "4.2.0"
+    "@jbrowse/bandage-core": "4.3.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/src/GraphGenomeView/components/GraphCanvas.tsx

@@ -11,7 +11,6 @@ import { ErrorBanner, LoadingOverlay, Menu } from '@jbrowse/core/ui'
 import { isAlive } from '@jbrowse/mobx-state-tree'
 import { useRenderingBackend } from '@jbrowse/render-core/useRenderingBackend'
 import InfoIcon from '@mui/icons-material/Info'
-import LineStyleIcon from '@mui/icons-material/LineStyle'
 import { observer } from 'mobx-react'
 
 import BubbleHalos, { HaloLegend } from './BubbleHalos'
@@ -25,7 +24,10 @@ import ReferenceStripOverlay, {
 import TubeMapOverlay, { TubeMapLegend } from './TubeMapOverlay'
 import UnpopButton from './UnpopButton'
 import WalkKey, { walkSwatchStyle } from './WalkKey'
+import { WalkRowContextMenu } from './WalkRowContextMenu'
 import WalkRowsOverlay, { WalkRowsLegend } from './WalkRowsOverlay'
+import WalkStrip from './WalkStrip'
+import WalkStripLocator from './WalkStripLocator'
 import { legendBoxStyle, legendRowStyle } from './legendStyles'
 import { usePaneGestures, useWheelZoom } from './usePaneGestures'
 import { locLabel, nodeOwnLocation } from '../../launchFromGraph/contributors'
@@ -552,58 +554,6 @@ const NodeContextMenu = observer(function NodeContextMenu({
   )
 })
 
-// A walk row's bar stands for a span of its haplotype's own contig, so the
-// question a right-click asks is answered by a linear view on that assembly,
-// with its genes
-const WalkRowContextMenu = observer(function WalkRowContextMenu({
-  model,
-  row,
-  top,
-  left,
-  onClose,
-}: {
-  model: GraphPaneModel
-  row: number
-  top: number
-  left: number
-  onClose: () => void
-}) {
-  const target = model.walkRowLaunchTarget(row)
-  const assembly = target?.assembly
-  return (
-    <Menu
-      open
-      anchorReference="anchorPosition"
-      anchorPosition={{ top, left }}
-      onClose={() => {
-        onClose()
-      }}
-      onMenuItemClick={callback => {
-        callback()
-      }}
-      menuItems={[
-        target && assembly
-          ? {
-              label: `Linear genome view — ${assembly} ${locLabel(target.location)}`,
-              icon: LineStyleIcon,
-              onClick: () => {
-                model.showInLinearView({ location: target.location, assembly })
-              },
-            }
-          : {
-              label: 'Linear genome view',
-              icon: LineStyleIcon,
-              disabled: true,
-              disabledHelpText: target
-                ? `No assembly in this session is ${target.location.haplotype ?? target.label}`
-                : 'This walk states no contig coordinates',
-              onClick: () => {},
-            },
-      ]}
-    />
-  )
-})
-
 // `ownChrome` false for a pane inside a track, whose controls, loading state
 // and errors are the track's. A hosted pane whose x the host places takes no pan or wheel of its
 // own: those are the linear view's, as on any other track. One drawing its
@@ -676,6 +626,7 @@ const GraphCanvas = observer(function GraphCanvas({
             <GenePins model={model} />
             <LabelLayer model={model} />
             <WalkRowsOverlay model={model} />
+            <WalkStripLocator model={model} />
             <Legends model={model} />
           </>
         )}
@@ -699,6 +650,8 @@ const GraphCanvas = observer(function GraphCanvas({
         ) : null}
       </div>
 
+      {model.walkStripShown ? <WalkStrip model={model} /> : null}
+
       <HoverTooltips model={model} />
 
       {contextNode ? (

package/src/GraphGenomeView/components/WalkRowContextMenu.tsx

@@ -0,0 +1,63 @@
+import { Menu } from '@jbrowse/core/ui'
+import LineStyleIcon from '@mui/icons-material/LineStyle'
+import { observer } from 'mobx-react'
+
+import { locLabel } from '../../launchFromGraph/contributors'
+
+import type { GraphPaneModel } from '../model'
+import type { WalkRows } from '@jbrowse/bandage-core/layout/walkRows'
+
+// A walk row's bar stands for a span of its haplotype's own contig, so the
+// question a right-click asks is answered by a linear view on that assembly,
+// with its genes
+export const WalkRowContextMenu = observer(function WalkRowContextMenu({
+  model,
+  row,
+  bars,
+  top,
+  left,
+  onClose,
+}: {
+  model: GraphPaneModel
+  row: number
+  // the rows `row` indexes, walk rows' own unless a strip's
+  bars?: WalkRows
+  top: number
+  left: number
+  onClose: () => void
+}) {
+  const target = model.walkRowLaunchTarget(row, bars ?? model.walkRowBars)
+  const assembly = target?.assembly
+  return (
+    <Menu
+      open
+      anchorReference="anchorPosition"
+      anchorPosition={{ top, left }}
+      onClose={() => {
+        onClose()
+      }}
+      onMenuItemClick={callback => {
+        callback()
+      }}
+      menuItems={[
+        target && assembly
+          ? {
+              label: `Linear genome view — ${assembly} ${locLabel(target.location)}`,
+              icon: LineStyleIcon,
+              onClick: () => {
+                model.showInLinearView({ location: target.location, assembly })
+              },
+            }
+          : {
+              label: 'Linear genome view',
+              icon: LineStyleIcon,
+              disabled: true,
+              disabledHelpText: target
+                ? `No assembly in this session is ${target.location.haplotype ?? target.label}`
+                : 'This walk states no contig coordinates',
+              onClick: () => {},
+            },
+      ]}
+    />
+  )
+})

package/src/GraphGenomeView/components/WalkRowsOverlay.tsx

@@ -59,7 +59,7 @@ function TickSwatch({ color }: { color: string }) {
   )
 }
 
-function Swatch({ swatch }: { swatch: KeySwatch }) {
+export function Swatch({ swatch }: { swatch: KeySwatch }) {
   return swatch.kind === 'gene' ? (
     <div
       style={{

package/src/GraphGenomeView/components/WalkStrip.tsx

@@ -0,0 +1,207 @@
+import { useId, useMemo, useState } from 'react'
+
+import {
+  walkRowReadout,
+  walkRowsKey,
+  walkRowsTree,
+} from '@jbrowse/bandage-core/layout/walkRowDraw'
+import {
+  stripRowAt,
+  walkMarksTree,
+} from '@jbrowse/bandage-core/layout/walkStrip'
+import { RAMP_GRADIENT_CSS } from '@jbrowse/bandage-core/referenceRampCss'
+import { isAlive } from '@jbrowse/mobx-state-tree'
+import { observer } from 'mobx-react'
+
+import ElTree from './ElTree'
+import { WalkRowContextMenu } from './WalkRowContextMenu'
+import { Swatch } from './WalkRowsOverlay'
+import { legendRowStyle } from './legendStyles'
+
+import type { GraphPaneModel } from '../model'
+import type { WalkRows } from '@jbrowse/bandage-core/layout/walkRows'
+import type { StripFrame } from '@jbrowse/bandage-core/layout/walkStrip'
+
+// Walk rows under a layout that draws nodes, each haplotype's walk on its own
+// bp, linked to the drawing above: the hovered node ticks every bar where its
+// walk passes it, and a point on a bar lights its node, ringed, above. The
+// bars share the drawing's colours, so under the reference-position ramp a hue
+// in the drawing is the same hue on each bar. Every row is shown; rows too
+// thin to letter say who they are on hover.
+
+const keyStyle = {
+  display: 'flex',
+  flexWrap: 'wrap' as const,
+  gap: '2px 14px',
+  padding: '2px 8px 6px',
+  fontSize: 11,
+  color: '#333',
+}
+
+const tipStyle = {
+  position: 'absolute' as const,
+  pointerEvents: 'none' as const,
+  background: 'rgba(255,255,255,0.92)',
+  border: '1px solid #ccc',
+  borderRadius: 3,
+  padding: '1px 6px',
+  fontSize: 11,
+  whiteSpace: 'nowrap' as const,
+  zIndex: 4,
+}
+
+// The bars, built once per rows, frame and colouring rather than per hover
+const StripBars = observer(function StripBars({
+  bars,
+  frame,
+  ramp,
+}: {
+  bars: WalkRows
+  frame: StripFrame
+  ramp: { start: number; end: number } | undefined
+}) {
+  const idPrefix = useId().replace(/[^\w-]/g, '')
+  const tree = useMemo(
+    () => walkRowsTree(bars, frame, { ramp, idPrefix }),
+    [bars, frame, ramp, idPrefix],
+  )
+  return <ElTree el={tree} />
+})
+
+const WalkStrip = observer(function WalkStrip({
+  model,
+}: {
+  model: GraphPaneModel
+}) {
+  const bars = model.walkStripRows
+  const frame = model.walkStripFrame
+  const [menu, setMenu] = useState<
+    { row: number; top: number; left: number } | undefined
+  >(undefined)
+  const [tip, setTip] = useState<
+    { text: string; x: number; y: number } | undefined
+  >(undefined)
+  if (!bars || !frame) {
+    return null
+  }
+  const rows = [bars.reference, ...bars.rows]
+  const hit = (e: React.MouseEvent<SVGSVGElement>) => {
+    const box = e.currentTarget.getBoundingClientRect()
+    const x = e.clientX - box.left
+    const y = e.clientY - box.top
+    return { ...stripRowAt(bars, frame, x, y), x, y }
+  }
+  const key = walkRowsKey(bars, {
+    ramp: model.referenceRampDomain,
+    rampCss: RAMP_GRADIENT_CSS,
+  })
+  return (
+    <div
+      data-testid="graph-walk-strip"
+      style={{ position: 'relative', borderTop: '1px solid #ddd' }}
+      onMouseEnter={() => {
+        model.setPointerInPane(true)
+      }}
+      onMouseLeave={() => {
+        if (isAlive(model)) {
+          model.setPointerInPane(false)
+          model.setStripHover(null)
+        }
+        setTip(undefined)
+      }}
+    >
+      <svg
+        width={frame.width}
+        height={frame.height}
+        style={{ display: 'block', cursor: 'pointer' }}
+        onMouseMove={e => {
+          const at = hit(e)
+          if (at.row) {
+            model.setStripHover({ row: at.row.name, offset: at.offset! })
+            setTip(
+              frame.labelled
+                ? undefined
+                : {
+                    text: `${at.row.label} · ${walkRowReadout(
+                      at.row,
+                      at.index === 0 ? undefined : bars.reference,
+                    )}`,
+                    x: at.x,
+                    y: at.y,
+                  },
+            )
+          } else {
+            model.setStripHover(null)
+            setTip(undefined)
+          }
+        }}
+        onClick={e => {
+          const at = hit(e)
+          if (at.row && at.index! > 0) {
+            model.toggleWalk(at.row.name)
+          }
+        }}
+        onContextMenu={e => {
+          const at = hit(e)
+          if (at.row) {
+            e.preventDefault()
+            setMenu({ row: at.index!, top: e.clientY, left: e.clientX })
+          }
+        }}
+      >
+        <StripBars bars={bars} frame={frame} ramp={model.referenceRampDomain} />
+        <ElTree el={walkMarksTree(bars, frame, model.walkStripMarks)} />
+        {frame.labelled
+          ? rows.map((row, i) => (
+              <text
+                key={row.name}
+                x={6}
+                y={i * frame.rowPx + frame.translateY + 4}
+                fontSize={11}
+                fontFamily="sans-serif"
+                fill="#333"
+                fontWeight={
+                  model.walkLayers.some(l => l.walk === row.name) ? 600 : 400
+                }
+              >
+                {row.label}
+              </text>
+            ))
+          : null}
+      </svg>
+      {tip ? (
+        <div style={{ ...tipStyle, left: tip.x + 12, top: tip.y - 18 }}>
+          {tip.text}
+        </div>
+      ) : null}
+      <div style={keyStyle} data-testid="graph-walk-strip-key">
+        {key.map(entry => (
+          <div key={entry.label} style={legendRowStyle}>
+            <Swatch swatch={entry.swatch} />
+            <span>{entry.label}</span>
+          </div>
+        ))}
+        <div style={legendRowStyle}>
+          <span>
+            ▮ ticks: where each walk passes the node under the pointer · click a
+            bar to lift its walk
+          </span>
+        </div>
+      </div>
+      {menu ? (
+        <WalkRowContextMenu
+          model={model}
+          row={menu.row}
+          bars={bars}
+          top={menu.top}
+          left={menu.left}
+          onClose={() => {
+            setMenu(undefined)
+          }}
+        />
+      ) : null}
+    </div>
+  )
+})
+
+export default WalkStrip

package/src/GraphGenomeView/components/WalkStripLocator.tsx

@@ -0,0 +1,49 @@
+import { observer } from 'mobx-react'
+
+import type { GraphPaneModel } from '../model'
+
+const svgStyle = {
+  position: 'absolute' as const,
+  left: 0,
+  top: 0,
+  pointerEvents: 'none' as const,
+  overflow: 'visible' as const,
+  zIndex: 4,
+}
+
+// A ring round the node a point on the walk strip lights, so a one-bp node
+// can be found in a hairball
+const WalkStripLocator = observer(function WalkStripLocator({
+  model,
+}: {
+  model: GraphPaneModel
+}) {
+  const at = model.walkStripLocator
+  return at ? (
+    <svg
+      style={svgStyle}
+      width={model.paneWidth}
+      height={model.canvasHeight}
+      data-testid="graph-walk-strip-locator"
+    >
+      <circle
+        cx={at.x}
+        cy={at.y}
+        r={11}
+        fill="none"
+        stroke="white"
+        strokeWidth={4}
+      />
+      <circle
+        cx={at.x}
+        cy={at.y}
+        r={11}
+        fill="none"
+        stroke="#111"
+        strokeWidth={1.75}
+      />
+    </svg>
+  ) : null
+})
+
+export default WalkStripLocator

package/src/GraphGenomeView/components/usePaneGestures.ts

@@ -171,6 +171,7 @@ export function usePaneGestures(model: GraphPaneModel) {
               model.positionsVersion,
               model.deletionEdgeIndexes,
               model.hiddenEdgeIndexes,
+              model.deletionRoutes,
             ),
       )
     }

package/src/GraphGenomeView/model.test.ts

@@ -2335,12 +2335,11 @@ describe('what the row axis draws, in pixels', () => {
   })
 
   test('a deletion edge draws only in a view that shows it', async () => {
-    const hidden = await fitted()
-    expect(hidden.showDeletionEdges).toBe(false)
+    const hidden = await fitted({ showDeletionEdges: false })
     expect([...hidden.hiddenEdgeIndexes]).toEqual(
       hidden.deletions.map(d => d.edgeIndex),
     )
-    const shown = await fitted({ showDeletionEdges: true })
+    const shown = await fitted()
     expect(getSnapshot(shown).showDeletionEdges).toBe(true)
     expect(shown.hiddenEdgeIndexes.size).toBe(0)
 
@@ -2654,6 +2653,46 @@ describe('walk rows', () => {
     '',
   ].join('\n')
 
+  test('the walk strip shows under a node layout, and links bars and nodes both ways', async () => {
+    rpcRespond()
+    const model = stateModelFactory().create({
+      type: 'GraphGenomeView',
+      layoutMode: 'ordered',
+      walkStrip: true,
+      referencePath: 'GRCh38',
+    })
+    await model.loadGFA(WALKS_GFA, 'walks')
+    model.setWidth(800)
+    expect(model.walkStripShown).toBe(true)
+    // the layout keeps its own drawing: walk rows' bars are not the strip's
+    expect(model.walkRowBars).toBeUndefined()
+    const bars = model.walkStripRows!
+    expect(bars.rows.map(r => r.label).sort()).toEqual(['A#1', 'A#2', 'B#1'])
+    const two = model.graph!.nodes.find(n => n.name === '2')!
+    // a point on B#1's bar inside node 2 lights it
+    model.setStripHover({ row: 'B#1#ctg', offset: 6 })
+    expect(model.hoveredNode).toBe(two.id)
+    // and node 2 ticks the bars of the walks through it, not A#2's
+    const marked = new Set(model.walkStripMarks.map(m => m.row))
+    expect([...marked].sort()).toEqual(['A#1#ctg', 'B#1#ctg'])
+    model.setStripHover(null)
+    expect(model.hoveredNode).toBeNull()
+    model.setWalkStrip(false)
+    expect(model.walkStripShown).toBe(false)
+    expect(model.walkStripRows).toBeUndefined()
+  })
+
+  test('walk rows and tube maps take no strip', async () => {
+    rpcRespond()
+    const model = stateModelFactory().create({
+      type: 'GraphGenomeView',
+      layoutMode: 'walkrows',
+      walkStrip: true,
+    })
+    await model.loadGFA(WALKS_GFA, 'walks')
+    expect(model.walkStripShown).toBe(false)
+  })
+
   test('a sample filter keeps its walks, paired in the order named, and labels follow', async () => {
     rpcRespond()
     const model = stateModelFactory().create({