jbrowse-plugin-graphgenomeviewer 4.0.13 → 4.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jbrowse-plugin-graphgenomeviewer",
-  "version": "4.0.13",
+  "version": "4.0.14",
   "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": "0.1.8"
+    "@jbrowse/bandage-core": "0.1.9"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/src/GraphGenomeView/components/BubbleHalos.tsx

@@ -1,4 +1,8 @@
-import { BUBBLE_KIND_COLORS } from '@jbrowse/bandage-core/bubbles/classifyBubble'
+import { sameBubble } from '@jbrowse/bandage-core/bubbles/bubbleLine'
+import {
+  BUBBLE_KIND_COLORS,
+  BUBBLE_KIND_NAMES,
+} from '@jbrowse/bandage-core/bubbles/classifyBubble'
 import { HALO_FACTOR } from '@jbrowse/bandage-core/labelLayout'
 import { observer } from 'mobx-react'
 
@@ -24,7 +28,7 @@ const BubbleHalos = observer(function BubbleHalos({
 }: {
   model: GraphPaneModel
 }) {
-  const { bubbleHalos, walkHighlight } = model
+  const { bubbleHalos, walkHighlight, hoveredBubble } = model
   if (bubbleHalos.length === 0) {
     return null
   }
@@ -60,7 +64,13 @@ const BubbleHalos = observer(function BubbleHalos({
               d={h.path}
               fill="none"
               stroke={BUBBLE_KIND_COLORS[h.kind]}
-              strokeOpacity={dimmedBubble(h) ? 0.06 : 0.22}
+              strokeOpacity={
+                hoveredBubble && sameBubble(h.bubble, hoveredBubble)
+                  ? 0.45
+                  : dimmedBubble(h)
+                    ? 0.06
+                    : 0.22
+              }
               strokeWidth={halo}
               strokeLinecap="round"
               strokeLinejoin="round"
@@ -73,3 +83,57 @@ const BubbleHalos = observer(function BubbleHalos({
 })
 
 export default BubbleHalos
+
+const legendBoxStyle = {
+  background: 'rgba(255,255,255,0.82)',
+  padding: '4px 6px',
+  borderRadius: 3,
+  fontSize: 11,
+  lineHeight: '15px',
+  whiteSpace: 'nowrap' as const,
+}
+const legendRowStyle = { display: 'flex', alignItems: 'center', gap: 5 }
+
+function HaloSwatch({ color }: { color: string }) {
+  return (
+    <svg width={18} height={10} style={{ flex: 'none' }}>
+      <line
+        x1={5}
+        y1={5}
+        x2={13}
+        y2={5}
+        stroke={color}
+        strokeOpacity={0.35}
+        strokeWidth={8}
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}
+
+// One row per halo colour on screen, naming the kinds it stands for
+export const HaloLegend = observer(function HaloLegend({
+  model,
+}: {
+  model: GraphPaneModel
+}) {
+  const kindsByColor = new Map<string, Set<string>>()
+  for (const h of model.bubbleHalos) {
+    if (!h.whole) {
+      const color = BUBBLE_KIND_COLORS[h.kind]
+      const kinds = kindsByColor.get(color) ?? new Set<string>()
+      kinds.add(BUBBLE_KIND_NAMES[h.kind])
+      kindsByColor.set(color, kinds)
+    }
+  }
+  return kindsByColor.size > 0 ? (
+    <div style={legendBoxStyle} data-testid="graph-halo-legend">
+      {[...kindsByColor].map(([color, kinds]) => (
+        <div key={color} style={legendRowStyle}>
+          <HaloSwatch color={color} />
+          <span>bubble: {[...kinds].join(', ')}</span>
+        </div>
+      ))}
+    </div>
+  ) : null
+})

package/src/GraphGenomeView/components/BubbleOverlay.tsx

@@ -111,6 +111,12 @@ const BubbleOverlay = observer(function BubbleOverlay({
                 onClick={() => {
                   void model.popBubble(bubble)
                 }}
+                onMouseEnter={() => {
+                  model.setHoveredBubble(bubble)
+                }}
+                onMouseLeave={() => {
+                  model.setHoveredBubble(null)
+                }}
               >
                 <title>{`${label}\n${bubble.segmentCount} segments · click to open`}</title>
               </path>

package/src/GraphGenomeView/components/GraphCanvas.tsx

@@ -13,11 +13,14 @@ import { useRenderingBackend } from '@jbrowse/render-core/useRenderingBackend'
 import InfoIcon from '@mui/icons-material/Info'
 import { observer } from 'mobx-react'
 
-import BubbleHalos from './BubbleHalos'
+import BubbleHalos, { HaloLegend } from './BubbleHalos'
 import BubbleOverlay from './BubbleOverlay'
 import GenePins from './GenePins'
 import GraphToolbar from './GraphToolbar'
 import LabelLayer from './LabelLayer'
+import ReferenceStripOverlay, {
+  ReferenceStripLegend,
+} from './ReferenceStripOverlay'
 import TubeMapOverlay, { TubeMapLegend } from './TubeMapOverlay'
 import WalkRowsOverlay, { WalkRowsLegend } from './WalkRowsOverlay'
 import { RAMP_GRADIENT_CSS } from './referenceRampCss'
@@ -195,6 +198,8 @@ const WalkReadout = observer(function WalkReadout({
     <div style={legendBoxStyle} data-testid="graph-walk-readout">
       <strong>{label}</strong>: {h.steps.toLocaleString()} steps,{' '}
       {h.bp.toLocaleString()} bp{delta}
+      <br />
+      paler: what {label} does not carry
     </div>
   )
 })
@@ -291,8 +296,16 @@ const Legends = observer(function Legends({
     }
   }, [model])
   return (
-    <div ref={ref} style={legendStackStyle}>
+    <div
+      ref={ref}
+      style={{
+        ...legendStackStyle,
+        top: LEGEND_INSET_PX + model.referenceStripZonePx,
+      }}
+    >
       <ReferenceRampLegend model={model} />
+      <ReferenceStripLegend model={model} />
+      <HaloLegend model={model} />
       <PathLegend model={model} />
       <TubeMapLegend model={model} />
       <WalkRowsLegend model={model} />
@@ -564,11 +577,14 @@ const GraphCanvas = observer(function GraphCanvas({
   // has one does not pay for a second getBoundingClientRect.
   function nodeAt(x: number, y: number) {
     const { nodePositions } = model
+    const sx = x * model.scaleX + model.translateX
+    const sy = y * model.scaleY + model.translateY
     if (model.layoutResult?.tubeMap) {
-      return model.tubeMapNodeAt(
-        x * model.scaleX + model.translateX,
-        y * model.scaleY + model.translateY,
-      )
+      return model.tubeMapNodeAt(sx, sy)
+    }
+    const onStrip = model.referenceStripNodeAt(sx, sy)
+    if (onStrip) {
+      return onStrip
     }
     return nodePositions
       ? findHoveredNode(
@@ -592,8 +608,13 @@ const GraphCanvas = observer(function GraphCanvas({
         e.stopPropagation()
       }
       const { x, y } = getMouseCoord(e)
-      // a tube map's boxes are the layout's, not positions to drag
-      const node = model.layoutResult?.tubeMap ? null : nodeAt(x, y)
+      // a tube map's boxes are the layout's, and the strip's are bp, not
+      // positions to drag
+      const node =
+        model.layoutResult?.tubeMap ||
+        e.nativeEvent.offsetY < model.referenceStripZonePx
+          ? null
+          : nodeAt(x, y)
       if (node) {
         model.setDraggingNode(node)
       } else {
@@ -684,8 +705,13 @@ const GraphCanvas = observer(function GraphCanvas({
     model.stopDragging()
   }
 
+  // also fired by the canvas unmounting under a resting pointer, after the
+  // view closing it has destroyed the model
   function handleMouseLeave() {
     dropPending()
+    if (!isAlive(model)) {
+      return
+    }
     model.stopDragging()
     model.setHoveredNode(null)
     model.setHoveredEdge(null)
@@ -720,7 +746,17 @@ const GraphCanvas = observer(function GraphCanvas({
     <div style={wrapperStyle}>
       {ownChrome ? <GraphToolbar model={model} /> : null}
 
-      <div style={canvasAreaStyle}>
+      <div
+        style={canvasAreaStyle}
+        onMouseEnter={() => {
+          model.setPointerInPane(true)
+        }}
+        onMouseLeave={() => {
+          if (isAlive(model)) {
+            model.setPointerInPane(false)
+          }
+        }}
+      >
         <canvas
           ref={canvasRef}
           data-testid="graph-genome-canvas"
@@ -739,6 +775,7 @@ const GraphCanvas = observer(function GraphCanvas({
         />
 
         <TubeMapOverlay model={model} />
+        <ReferenceStripOverlay model={model} />
         <RowLabels model={model} />
         <GraphSizeLabels model={model} />
         <BubbleHalos model={model} />

package/src/GraphGenomeView/components/LabelChip.tsx

@@ -14,6 +14,7 @@ export default function LabelChip({
   title,
   testId,
   onClick,
+  onHover,
 }: {
   x: number
   y: number
@@ -26,16 +27,23 @@ export default function LabelChip({
   title?: string
   testId?: string
   onClick?: () => void
+  onHover?: (hovered: boolean) => void
 }) {
   return (
     <g
       style={{
-        pointerEvents: onClick ? 'auto' : 'none',
+        pointerEvents: onClick || onHover ? 'auto' : 'none',
         cursor: onClick ? 'pointer' : undefined,
         opacity: dimmed ? 0.35 : 1,
       }}
       data-testid={testId}
       onClick={onClick}
+      onMouseEnter={() => {
+        onHover?.(true)
+      }}
+      onMouseLeave={() => {
+        onHover?.(false)
+      }}
     >
       {title ? <title>{title}</title> : null}
       <rect

package/src/GraphGenomeView/components/LabelLayer.tsx

@@ -100,6 +100,9 @@ const LabelLayer = observer(function LabelLayer({
           onClick={() => {
             void model.popBubble(h.bubble)
           }}
+          onHover={hovered => {
+            model.setHoveredBubble(hovered ? h.bubble : null)
+          }}
         />
       ))}
     </svg>

package/src/GraphGenomeView/components/ReferenceStripOverlay.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useRef } from 'react'
+
+import { drawReferenceStrip } from '@jbrowse/bandage-core/referenceStrip'
+import { getDpr } from '@jbrowse/render-core/canvas2dUtils'
+import { autorun } from 'mobx'
+import { observer } from 'mobx-react'
+
+import type { GraphPaneModel } from '../model'
+
+const canvasStyle = {
+  position: 'absolute' as const,
+  left: 0,
+  top: 0,
+  pointerEvents: 'none' as const,
+  zIndex: 5,
+}
+
+// Each reference segment at its bp in the linear view, over a drawing that
+// has no bp axis of its own. Repainted by an autorun, so a pan in the linear
+// view moves the strip in the same frame as its other tracks.
+const ReferenceStripOverlay = observer(function ReferenceStripOverlay({
+  model,
+}: {
+  model: GraphPaneModel
+}) {
+  const ref = useRef<HTMLCanvasElement>(null)
+  const { referenceStripShown, paneWidth, canvasHeight } = model
+  useEffect(
+    () =>
+      autorun(() => {
+        const canvas = ref.current
+        const frame = model.referenceStripFrame
+        const ctx = canvas?.getContext('2d')
+        if (canvas && ctx && frame && model.referenceStripShown) {
+          const dpr = getDpr()
+          const width = model.paneWidth
+          const height = model.canvasHeight
+          canvas.width = Math.round(width * dpr)
+          canvas.height = Math.round(height * dpr)
+          ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+          ctx.clearRect(0, 0, width, height)
+          drawReferenceStrip(ctx, model.referenceStripBlocks, frame, {
+            width,
+            lit: model.referenceStripLit,
+            darkMode: model.darkMode,
+          })
+        }
+      }),
+    [model],
+  )
+  return (
+    <canvas
+      ref={ref}
+      data-testid={referenceStripShown ? 'graph-reference-strip' : undefined}
+      style={{
+        ...canvasStyle,
+        width: paneWidth,
+        height: canvasHeight,
+        display: referenceStripShown ? 'block' : 'none',
+      }}
+    />
+  )
+})
+
+export default ReferenceStripOverlay
+
+const legendBoxStyle = {
+  background: 'rgba(255,255,255,0.82)',
+  padding: '4px 6px',
+  borderRadius: 3,
+  fontSize: 11,
+  lineHeight: '15px',
+  whiteSpace: 'nowrap' as const,
+}
+const legendRowStyle = { display: 'flex', alignItems: 'center', gap: 5 }
+const SWATCH_PX = 18
+
+function StripSwatch() {
+  return (
+    <svg width={SWATCH_PX} height={4} style={{ flex: 'none' }}>
+      <rect x={0} y={0} width={6} height={4} fill="hsl(0, 70%, 50%)" />
+      <rect x={6} y={0} width={5} height={4} fill="hsl(120, 70%, 50%)" />
+      <rect x={11} y={0} width={7} height={4} fill="hsl(240, 70%, 50%)" />
+    </svg>
+  )
+}
+
+function OverhangSwatch() {
+  return (
+    <svg width={SWATCH_PX} height={8} style={{ flex: 'none' }}>
+      <path d="M0,4 L5,0.5 L5,7.5 Z M18,4 L13,0.5 L13,7.5 Z" fill="#18181c" />
+    </svg>
+  )
+}
+
+// Hovering a node boxes its span on the strip and draws a leader to it
+export const ReferenceStripLegend = observer(function ReferenceStripLegend({
+  model,
+}: {
+  model: GraphPaneModel
+}) {
+  return model.referenceStripShown ? (
+    <div style={legendBoxStyle} data-testid="graph-reference-strip-legend">
+      <div style={legendRowStyle}>
+        <StripSwatch />
+        <span>top strip: reference segments at their bp</span>
+      </div>
+      {model.referenceStripOverhangs ? (
+        <div style={legendRowStyle}>
+          <OverhangSwatch />
+          <span>the graph runs past this edge</span>
+        </div>
+      ) : null}
+    </div>
+  ) : null
+})

package/src/GraphGenomeView/components/TubeMapOverlay.tsx

@@ -1,12 +1,8 @@
 import { useEffect, useRef } from 'react'
+import type { ReactNode } from 'react'
 
 import { formatBp } from '@jbrowse/bandage-core/graphLabels'
-import {
-  ZIGZAG_AMPLITUDE_PX,
-  ZIGZAG_PX,
-  drawTubeMapRuler,
-  rulerInk,
-} from '@jbrowse/bandage-core/tubeMap/axis'
+import { drawTubeMapRuler, rulerInk } from '@jbrowse/bandage-core/tubeMap/axis'
 import { drawTubeMapConnectors } from '@jbrowse/bandage-core/tubeMap/connectors'
 import {
   deviationInk,
@@ -14,6 +10,10 @@ import {
 } from '@jbrowse/bandage-core/tubeMap/deviations'
 import { drawTubeMap } from '@jbrowse/bandage-core/tubeMap/draw'
 import { drawTubeMapGenes } from '@jbrowse/bandage-core/tubeMap/genes'
+import {
+  FORWARD_READ_COLORS,
+  REVERSE_READ_COLORS,
+} from '@jbrowse/bandage-core/tubeMap/reads'
 import { getDpr } from '@jbrowse/render-core/canvas2dUtils'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
@@ -79,7 +79,13 @@ const TubeMapOverlay = observer(function TubeMapOverlay({
           )
           const boxes = model.tubeMapRulerBoxes
           if (boxes) {
-            drawTubeMapRuler(ctx, boxes, tubeFrame, frame.y(bounds.maxY) + 4)
+            drawTubeMapRuler(
+              ctx,
+              boxes,
+              tubeFrame,
+              frame.y(bounds.maxY) + 4,
+              model.layoutResult?.referenceAxis,
+            )
           }
         }
       }),
@@ -114,22 +120,16 @@ const legendBoxStyle = {
 const legendRowStyle = { display: 'flex', alignItems: 'center', gap: 5 }
 const SWATCH_PX = 18
 
-// The ruler's own zigzag, tooth for tooth
-function ZigzagSwatch() {
-  const teeth = Math.round(SWATCH_PX / ZIGZAG_PX)
-  const dx = SWATCH_PX / teeth
-  const mid = ZIGZAG_AMPLITUDE_PX + 1
-  const points = [`0,${mid}`]
-  for (let i = 0; i < teeth; i++) {
-    points.push(
-      `${(i + 0.5) * dx},${mid + (i % 2 ? 1 : -1) * ZIGZAG_AMPLITUDE_PX}`,
-    )
-  }
-  points.push(`${SWATCH_PX},${mid}`)
+// Two boxes' brackets, as the ruler draws them under every box
+function BracketSwatch() {
+  const brackets = [
+    [0.5, 5.5],
+    [8.5, SWATCH_PX - 0.5],
+  ]
   return (
-    <svg width={SWATCH_PX} height={mid * 2} style={{ flex: 'none' }}>
-      <polyline
-        points={points.join(' ')}
+    <svg width={SWATCH_PX} height={7} style={{ flex: 'none' }}>
+      <path
+        d={brackets.map(([x0, x1]) => `M${x0},6 V1.5 H${x1} V6`).join(' ')}
         fill="none"
         stroke={rulerInk()}
         strokeWidth={1}
@@ -138,10 +138,10 @@ function ZigzagSwatch() {
   )
 }
 
+const barSwatchStyle = { width: SWATCH_PX, height: 7, flex: 'none' }
+
 const tubeSwatchStyle = {
-  width: SWATCH_PX,
-  height: 7,
-  flex: 'none',
+  ...barSwatchStyle,
   display: 'flex',
   justifyContent: 'center',
   backgroundColor: '#b8b8c0',
@@ -155,28 +155,96 @@ function TickSwatch() {
   )
 }
 
-// The two marks a tube map draws that nothing else on screen explains, each
-// listed only while it is drawn
+// A read takes one shade of its strand's palette, varied so neighbours differ
+function ReadSwatch({ colors }: { colors: readonly string[] }) {
+  const step = 100 / colors.length
+  const stops = colors.map((c, i) => `${c} ${i * step}% ${(i + 1) * step}%`)
+  return (
+    <div
+      style={{
+        ...barSwatchStyle,
+        background: `linear-gradient(to right, ${stops.join(', ')})`,
+      }}
+    />
+  )
+}
+
+const glyphSwatchStyle = {
+  width: SWATCH_PX,
+  flex: 'none',
+  textAlign: 'center' as const,
+  fontFamily: 'monospace',
+  fontSize: 12,
+}
+
+function DeletionSwatch() {
+  return <div style={{ ...barSwatchStyle, backgroundColor: 'grey' }} />
+}
+
+function LegendRow({
+  swatch,
+  children,
+}: {
+  swatch: ReactNode
+  children: ReactNode
+}) {
+  return (
+    <div style={legendRowStyle}>
+      {swatch}
+      <span>{children}</span>
+    </div>
+  )
+}
+
+// What a tube map draws that nothing else on screen explains, each listed
+// only while it applies
 export const TubeMapLegend = observer(function TubeMapLegend({
   model,
 }: {
   model: GraphPaneModel
 }) {
-  const { squeezed, foldBp } = model.tubeMapKeys
-  return squeezed || foldBp !== undefined ? (
+  const { logWidths, foldBp, forwardReads, reverseReads, mismatches } =
+    model.tubeMapKeys
+  const rows = [
+    forwardReads && (
+      <LegendRow key="fwd" swatch={<ReadSwatch colors={FORWARD_READ_COLORS} />}>
+        read on the forward strand
+      </LegendRow>
+    ),
+    reverseReads && (
+      <LegendRow key="rev" swatch={<ReadSwatch colors={REVERSE_READ_COLORS} />}>
+        read on the reverse strand
+      </LegendRow>
+    ),
+    mismatches.has('substitution') && (
+      <LegendRow key="sub" swatch={<span style={glyphSwatchStyle}>A</span>}>
+        a read's base unlike the node's
+      </LegendRow>
+    ),
+    mismatches.has('insertion') && (
+      <LegendRow key="ins" swatch={<span style={glyphSwatchStyle}>*</span>}>
+        bases a read inserts
+      </LegendRow>
+    ),
+    mismatches.has('deletion') && (
+      <LegendRow key="del" swatch={<DeletionSwatch />}>
+        bases a read skips
+      </LegendRow>
+    ),
+    foldBp !== undefined && (
+      <LegendRow key="fold" swatch={<TickSwatch />}>
+        a haplotype's variant under {formatBp(foldBp)}
+      </LegendRow>
+    ),
+    logWidths && (
+      <LegendRow key="log" swatch={<BracketSwatch />}>
+        width grows with log of length
+      </LegendRow>
+    ),
+  ].filter(Boolean)
+  return rows.length > 0 ? (
     <div style={legendBoxStyle} data-testid="graph-tube-map-legend">
-      {foldBp !== undefined ? (
-        <div style={legendRowStyle}>
-          <TickSwatch />
-          <span>a haplotype's variant under {formatBp(foldBp)}</span>
-        </div>
-      ) : null}
-      {squeezed ? (
-        <div style={legendRowStyle}>
-          <ZigzagSwatch />
-          <span>ruler not to scale, box length below</span>
-        </div>
-      ) : null}
+      {rows}
     </div>
   ) : null
 })

package/src/GraphGenomeView/model.test.ts

@@ -2398,6 +2398,9 @@ describe('popping a bubble', () => {
     model.setLayoutMode('ordered')
     await model.loadGFA(RGFA_BUBBLE, 'rgfa')
     expect(model.bubbleGlyphs).toEqual([])
+    // off by default
+    expect(model.bubbleHalos).toEqual([])
+    model.setShowBubbles(true)
     expect(
       model.bubbleHalos.map(h => [h.label, h.members, h.path.startsWith('M')]),
     ).toEqual([['≤4 bp ins', 1, true]])