jbrowse-plugin-graphgenomeviewer 4.0.21 → 4.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jbrowse-plugin-graphgenomeviewer",
-  "version": "4.0.21",
+  "version": "4.0.23",
   "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.16"
+    "@jbrowse/bandage-core": "0.1.19"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/src/GraphGenomeView/components/BubbleHalos.tsx

@@ -6,6 +6,8 @@ import {
 import { HALO_FACTOR } from '@jbrowse/bandage-core/labelLayout'
 import { observer } from 'mobx-react'
 
+import { legendBoxStyle, legendRowStyle } from './legendStyles'
+
 import type { GraphPaneModel } from '../model'
 import type { BubbleHalo } from '@jbrowse/bandage-core/bubbles/bubbleHalos'
 
@@ -83,16 +85,6 @@ 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' }}>

package/src/GraphGenomeView/components/FacetPanels.tsx

@@ -0,0 +1,159 @@
+import { useEffect, useState } from 'react'
+
+import { FACET_GAP_PX, FACET_TITLE_PX } from '@jbrowse/bandage-core/facetGrid'
+import { Canvas2DRenderer } from '@jbrowse/bandage-core/renderer/Canvas2DRenderer'
+import { autorun, computed } from 'mobx'
+import { observer } from 'mobx-react'
+
+import WalkKey from './WalkKey'
+import { useWheelZoom } from './usePaneGestures'
+
+import type { PaneHandlers } from './usePaneGestures'
+import type { GraphPaneModel } from '../model'
+import type { WalkLift } from '@jbrowse/bandage-core/walkHighlight'
+
+// The pane faceted by walk: the same layout drawn once per lifted walk, each
+// panel with that walk alone shading along itself, so walks compare by where
+// they go rather than by which lane is which colour. The panels share the
+// pane's transform, so a pan, zoom or hover in one is in all of them.
+
+const gridStyle = {
+  position: 'absolute' as const,
+  left: 0,
+  top: 0,
+  zIndex: 4,
+  display: 'grid',
+  gap: FACET_GAP_PX,
+  lineHeight: 'normal',
+}
+
+const titleStyle = {
+  height: FACET_TITLE_PX,
+  padding: '2px 6px',
+  boxSizing: 'border-box' as const,
+  fontFamily: 'inherit',
+  fontSize: 11,
+  color: 'inherit',
+  cursor: 'pointer',
+  border: 'none',
+  background: 'none',
+  textAlign: 'left' as const,
+  display: 'block',
+}
+
+const FacetPanel = observer(function FacetPanel({
+  model,
+  lift,
+  width,
+  height,
+  handlers,
+}: {
+  model: GraphPaneModel
+  lift: WalkLift
+  width: number
+  height: number
+  handlers: PaneHandlers
+}) {
+  const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null)
+  const walk = lift.walks[0]!
+  useWheelZoom(canvas, model)
+
+  useEffect(() => {
+    if (!canvas) {
+      return undefined
+    }
+    const renderer = new Canvas2DRenderer(canvas)
+    renderer.resize(width, height)
+    const drawing = computed(() => model.buildDrawing(lift, false))
+    let uploaded: ReturnType<typeof model.buildDrawing>
+    const dispose = autorun(() => {
+      const built = drawing.get()
+      if (!built) {
+        return
+      }
+      if (built !== uploaded) {
+        renderer.uploadGeometry(built.batch)
+        uploaded = built
+      }
+      model.applyHighlights(renderer)
+      model.paint(renderer)
+    })
+    return () => {
+      dispose()
+      renderer.dispose()
+    }
+  }, [canvas, model, lift, width, height])
+
+  const label = model.walkLabel(walk.name)
+  return (
+    <div>
+      <button
+        type="button"
+        style={titleStyle}
+        data-testid="graph-facet-title"
+        onClick={() => {
+          model.liftWalks([walk.name])
+          model.setFacet('none')
+        }}
+      >
+        <WalkKey
+          walk={walk}
+          label={label}
+          reference={model.walkReference}
+          hint={`click to lift ${label} alone`}
+        />
+      </button>
+      <canvas
+        ref={setCanvas}
+        data-testid="graph-facet-canvas"
+        style={{
+          width,
+          height,
+          display: 'block',
+          cursor: model.isPanning || model.draggingNode ? 'grabbing' : 'grab',
+        }}
+        {...handlers}
+      />
+    </div>
+  )
+})
+
+const FacetPanels = observer(function FacetPanels({
+  model,
+  handlers,
+}: {
+  model: GraphPaneModel
+  handlers: PaneHandlers
+}) {
+  const panels = model.facetPanels
+  const grid = model.facetGrid
+  if (!panels || !grid) {
+    return null
+  }
+  const { columns, width, height } = grid
+  return (
+    <div
+      data-testid="graph-facet-panels"
+      style={{
+        ...gridStyle,
+        width: model.paneWidth,
+        minHeight: model.canvasHeight,
+        gridTemplateColumns: `repeat(${columns}, ${width}px)`,
+        background: model.darkMode ? '#1f1f1f' : 'white',
+      }}
+    >
+      {panels.map(lift => (
+        <FacetPanel
+          key={lift.walks[0]!.name}
+          model={model}
+          lift={lift}
+          width={width}
+          height={height}
+          handlers={handlers}
+        />
+      ))}
+    </div>
+  )
+})
+
+export default FacetPanels

package/src/GraphGenomeView/components/GenePins.tsx

@@ -4,7 +4,8 @@ import type { GraphPaneModel } from '../model'
 
 // The session's genes drawn onto the graph: exons as dark stretches along the
 // backbone nodes that carry them, in layout units, moved by the same transform
-// the halos use. Their names are LabelLayer's.
+// the halos use. Their names are LabelLayer's. Over lifted walks an exon is a
+// faint band across all the lanes, so no lane reads as broken by it.
 
 const svgStyle = {
   position: 'absolute' as const,
@@ -16,13 +17,15 @@ const svgStyle = {
 }
 
 export const EXON_COLOR = '#1c1c22'
+// a lane's width at the least, for the band an exon draws across them
+const EXON_BAND_LANE_PX = 4
 
 const GenePins = observer(function GenePins({
   model,
 }: {
   model: GraphPaneModel
 }) {
-  const { genePins } = model
+  const { genePins, walkLift } = model
   if (genePins.length === 0) {
     return null
   }
@@ -52,9 +55,13 @@ const GenePins = observer(function GenePins({
               d={pin.exons}
               fill="none"
               stroke={EXON_COLOR}
-              strokeOpacity={0.9}
-              strokeWidth={contigThickness * 0.55}
-              strokeLinecap="round"
+              strokeOpacity={walkLift ? 0.2 : 0.9}
+              strokeWidth={
+                walkLift
+                  ? walkLift.walks.length * EXON_BAND_LANE_PX + 6
+                  : contigThickness * 0.55
+              }
+              strokeLinecap={walkLift ? 'butt' : 'round'}
               vectorEffect="non-scaling-stroke"
             />
           ) : null,

package/src/GraphGenomeView/components/GraphCanvas.tsx

@@ -1,17 +1,7 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef } from 'react'
 
 import { formatBp } from '@jbrowse/bandage-core/graphLabels'
 import { LEGEND_INSET_PX } from '@jbrowse/bandage-core/labelLayout'
-import {
-  findHoveredEdge,
-  findHoveredNode,
-} from '@jbrowse/bandage-core/util/hitDetection'
-import { wheelZoomFactor } from '@jbrowse/bandage-core/util/wheelZoom'
-import {
-  WALK_FIELDS,
-  encodingSwatchCss,
-  fieldLegend,
-} from '@jbrowse/bandage-core/walkEncoding'
 import { ErrorBanner, LoadingOverlay, Menu } from '@jbrowse/core/ui'
 import { isAlive } from '@jbrowse/mobx-state-tree'
 import { useRenderingBackend } from '@jbrowse/render-core/useRenderingBackend'
@@ -19,6 +9,7 @@ import InfoIcon from '@mui/icons-material/Info'
 import { observer } from 'mobx-react'
 
 import BubbleHalos, { HaloLegend } from './BubbleHalos'
+import FacetPanels from './FacetPanels'
 import GenePins from './GenePins'
 import GraphToolbar from './GraphToolbar'
 import LabelLayer from './LabelLayer'
@@ -27,8 +18,11 @@ import ReferenceStripOverlay, {
 } from './ReferenceStripOverlay'
 import TubeMapOverlay, { TubeMapLegend } from './TubeMapOverlay'
 import UnpopButton from './UnpopButton'
+import WalkKey, { walkSwatchStyle } from './WalkKey'
 import WalkRowsOverlay, { WalkRowsLegend } from './WalkRowsOverlay'
+import { legendBoxStyle, legendRowStyle } from './legendStyles'
 import { RAMP_GRADIENT_CSS } from './referenceRampCss'
+import { usePaneGestures, useWheelZoom } from './usePaneGestures'
 import { locLabel, nodeOwnLocation } from '../../launchFromGraph/contributors'
 import { nodeLaunchMenuItems } from '../../launchFromGraph/graphMenuItems'
 import { createGraphRenderer } from '../renderer/GraphRenderer'
@@ -49,6 +43,7 @@ const tooltipStyle = {
   borderRadius: 4,
   fontSize: 12,
   pointerEvents: 'none' as const,
+  zIndex: 6,
 }
 
 const wrapperStyle = { position: 'relative' as const }
@@ -147,17 +142,6 @@ const legendStackStyle = {
   zIndex: 4,
 }
 
-const legendBoxStyle = {
-  background: 'rgba(255,255,255,0.82)',
-  padding: '4px 6px',
-  borderRadius: 3,
-  fontSize: 11,
-  lineHeight: '15px',
-  whiteSpace: 'nowrap' as const,
-}
-
-const pathLegendRowStyle = { display: 'flex', alignItems: 'center', gap: 5 }
-
 const pathSwatchStyle = { width: 18, height: 3, borderRadius: 2 }
 
 // Which haplotype each ribbon colour is. The ribbons are one stroke per path
@@ -172,7 +156,7 @@ const PathLegend = observer(function PathLegend({
   return pathLegend.length > 0 ? (
     <div style={legendBoxStyle} data-testid="graph-path-legend">
       {pathLegend.map(({ name, label, color }) => (
-        <div key={name} style={pathLegendRowStyle}>
+        <div key={name} style={legendRowStyle}>
           <div style={{ ...pathSwatchStyle, backgroundColor: color }} />
           <span>{label}</span>
         </div>
@@ -181,15 +165,10 @@ const PathLegend = observer(function PathLegend({
   ) : null
 })
 
-const walkSwatchStyle = { width: 26, height: 8, borderRadius: 2, flex: 'none' }
-
-// What each lifted walk carries through the window, against the reference
-// walk where the graph has one, beside the scale its lane is coloured by, and
-// what each field in use means
-function fieldName(field: string) {
-  return WALK_FIELDS.find(f => f.value === field)!.label.toLowerCase()
-}
+// a faded node: grey at the fade's alpha
+const FADED_SWATCH = 'rgba(160, 160, 160, 0.18)'
 
+// Each lifted walk's key, then what the faded rest is
 const WalkReadout = observer(function WalkReadout({
   model,
 }: {
@@ -199,42 +178,22 @@ const WalkReadout = observer(function WalkReadout({
   if (!lift) {
     return null
   }
-  const labelOf = (name: string) =>
-    model.walkChoices.find(c => c.name === name)?.label ?? name
+  const alone = lift.walks.length === 1
   return (
     <div style={legendBoxStyle} data-testid="graph-walk-readout">
-      {lift.walks.map(w => {
-        const delta =
-          w.referenceBp === undefined
-            ? ''
-            : w.bp === w.referenceBp
-              ? ', the reference length'
-              : `, ${w.bp > w.referenceBp ? '+' : '−'}${Math.abs(w.bp - w.referenceBp).toLocaleString()} bp against the reference`
-        return (
-          <div key={w.name} style={pathLegendRowStyle}>
-            <div
-              style={{
-                ...walkSwatchStyle,
-                background: encodingSwatchCss(w.encoding),
-              }}
-            />
-            <span>
-              <strong>{labelOf(w.name)}</strong>: {w.bp.toLocaleString()} bp
-              {delta} · {fieldName(w.encoding.field)}
-            </span>
-          </div>
-        )
-      })}
-      {WALK_FIELDS.filter(f =>
-        lift.walks.some(w => w.encoding.field === f.value),
-      ).map(f => (
-        <div key={f.value}>
-          {fieldName(f.value)}: {fieldLegend(f.value)}
-        </div>
+      {lift.walks.map(w => (
+        <WalkKey
+          key={w.name}
+          walk={w}
+          label={model.walkLabel(w.name)}
+          reference={model.walkReference}
+        />
       ))}
-      <div>
-        paler nodes: on none of{' '}
-        {lift.walks.length > 1 ? 'these walks' : 'this walk'}
+      <div style={legendRowStyle}>
+        <div style={{ ...walkSwatchStyle, background: FADED_SWATCH }} />
+        <span>
+          not on {alone ? model.walkLabel(lift.walks[0]!.name) : 'these walks'}
+        </span>
       </div>
     </div>
   )
@@ -262,7 +221,8 @@ const ReferenceRampLegend = observer(function ReferenceRampLegend({
 }: {
   model: GraphPaneModel
 }) {
-  const domain = model.referenceRampDomain
+  // under lifted walks each lane states its own scale, and the rest is grey
+  const domain = model.walkLift ? undefined : model.referenceRampDomain
   return domain ? (
     <div style={legendBoxStyle} data-testid="graph-ramp-legend">
       <div style={rampStripStyle} />
@@ -542,241 +502,9 @@ const GraphCanvas = observer(function GraphCanvas({
     error: renderError,
     retry: retryRender,
   } = useRenderingBackend(createGraphRenderer, model)
-  // Where the pointer was last, and whether it has travelled since mousedown —
-  // per-gesture scratch that nothing renders from, which is what a ref is for.
-  // Whether a drag is in progress is model state (`isPanning`/`draggingNode`),
-  // because the cursor renders from it.
-  const lastMouseRef = useRef({ x: 0, y: 0 })
-  const hasMovedRef = 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
-  // repainted the canvas and re-placed every overlay label, while each hover
-  // step ran both hit indexes. The pending pan is the summed delta; the pending
-  // hover is the last pointer position, since only the last one can be right.
-  const pendingRef = useRef<{
-    frame: number
-    pan: { dx: number; dy: number } | null
-    hover: { x: number; y: number } | null
-  }>({ frame: 0, pan: null, hover: null })
-  useEffect(
-    () => () => {
-      cancelAnimationFrame(pendingRef.current.frame)
-    },
-    [],
-  )
-  const [contextNode, setContextNode] = useState<
-    { nodeId: string; top: number; left: number } | undefined
-  >(undefined)
-
-  // wheel events need passive:false to call preventDefault — React registers
-  // wheel listeners as passive, so we must add this imperatively
-  useEffect(() => {
-    if (canvas) {
-      const c = canvas
-      function handleWheel(e: WheelEvent) {
-        if (model.hostPlacesX) {
-          return
-        }
-        if (model.host) {
-          e.stopPropagation()
-        }
-        e.preventDefault()
-        const rect = c.getBoundingClientRect()
-        model.zoom(
-          wheelZoomFactor(e),
-          e.clientX - rect.left,
-          e.clientY - rect.top,
-        )
-      }
-      c.addEventListener('wheel', handleWheel, { passive: false })
-      return () => {
-        c.removeEventListener('wheel', handleWheel)
-      }
-    }
-    return undefined
-  }, [canvas, model])
-
-  function screenToGraph(screenX: number, screenY: number) {
-    return {
-      x: (screenX - model.translateX) / model.scaleX,
-      y: (screenY - model.translateY) / model.scaleY,
-    }
-  }
-
-  function getMouseCoord(e: React.MouseEvent) {
-    const rect = (e.currentTarget as HTMLCanvasElement).getBoundingClientRect()
-    return screenToGraph(e.clientX - rect.left, e.clientY - rect.top)
-  }
-
-  // The node at a graph coordinate, which mousedown, mousemove and click all
-  // need. Takes the coordinate rather than the event so a caller that already
-  // 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(sx, sy)
-    }
-    const onStrip = model.referenceStripNodeAt(sx, sy)
-    if (onStrip) {
-      return onStrip
-    }
-    return nodePositions
-      ? findHoveredNode(
-          nodePositions,
-          x,
-          y,
-          model.axisScale,
-          model.positionsVersion,
-          model.nodeInk,
-        )
-      : null
-  }
-
-  function handleMouseDown(e: React.MouseEvent) {
-    if (e.button === 0) {
-      hasMovedRef.current = false
-      if (model.hostPlacesX) {
-        return
-      }
-      if (model.host) {
-        e.stopPropagation()
-      }
-      const { x, y } = getMouseCoord(e)
-      // 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 {
-        model.setPanning(true)
-      }
-      lastMouseRef.current = { x: e.clientX, y: e.clientY }
-    }
-  }
-
-  function applyPending() {
-    const pending = pendingRef.current
-    pending.frame = 0
-    if (pending.pan) {
-      model.setTransform(
-        model.scale,
-        model.translateX + pending.pan.dx,
-        model.translateY + pending.pan.dy,
-      )
-      pending.pan = null
-    }
-    if (pending.hover && model.nodePositions && model.graph) {
-      const { x, y } = screenToGraph(pending.hover.x, pending.hover.y)
-      pending.hover = null
-      const node = nodeAt(x, y)
-      model.setHoveredNode(node)
-      model.setHoveredEdge(
-        node || model.layoutResult?.tubeMap
-          ? null
-          : findHoveredEdge(
-              model.nodePositions,
-              model.graph,
-              x,
-              y,
-              model.axisScale,
-              // resolved, so the hit index bounds the ribbons that are
-              // actually drawn — see effectiveDrawPaths
-              model.effectiveDrawPaths,
-              model.positionsVersion,
-              model.deletionEdgeIndexes,
-              model.hiddenEdgeIndexes,
-            ),
-      )
-    }
-  }
-
-  function scheduleFrame() {
-    if (!pendingRef.current.frame) {
-      pendingRef.current.frame = requestAnimationFrame(applyPending)
-    }
-  }
-
-  function dropPending() {
-    const pending = pendingRef.current
-    cancelAnimationFrame(pending.frame)
-    pending.frame = 0
-    pending.pan = null
-    pending.hover = null
-  }
-
-  function handleMouseMove(e: React.MouseEvent) {
-    const dx = e.clientX - lastMouseRef.current.x
-    const dy = e.clientY - lastMouseRef.current.y
-    lastMouseRef.current = { x: e.clientX, y: e.clientY }
-
-    if (Math.abs(dx) > 1 || Math.abs(dy) > 1) {
-      hasMovedRef.current = true
-    }
-
-    const pending = pendingRef.current
-    if (model.draggingNode) {
-      model.moveNode(model.draggingNode, dx / model.scaleX, dy / model.scaleY)
-    } else if (model.isPanning) {
-      pending.pan = {
-        dx: (pending.pan?.dx ?? 0) + dx,
-        dy: (pending.pan?.dy ?? 0) + dy,
-      }
-      scheduleFrame()
-    } else {
-      const rect = (
-        e.currentTarget as HTMLCanvasElement
-      ).getBoundingClientRect()
-      pending.hover = { x: e.clientX - rect.left, y: e.clientY - rect.top }
-      scheduleFrame()
-    }
-  }
-
-  function handleMouseUp() {
-    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)
-  }
-
-  // Right-clicking a node is the gesture that asks "where is this?", and until
-  // now the graph had no answer: a node named an assembly and an offset in its
-  // tags that nothing surfaced. The items come from the model's launch targets,
-  // so what is offered is what can actually be opened.
-  function handleContextMenu(e: React.MouseEvent) {
-    const { x, y } = getMouseCoord(e)
-    const node = nodeAt(x, y)
-    if (node) {
-      e.preventDefault()
-      setContextNode({ nodeId: node, top: e.clientY, left: e.clientX })
-    }
-  }
-
-  function handleClick(e: React.MouseEvent) {
-    // a click that ended a drag selects nothing
-    if (!hasMovedRef.current) {
-      const { x, y } = getMouseCoord(e)
-      const node = nodeAt(x, y)
-      model.setSelectedNode(node)
-      if (node) {
-        model.showNodeDetails(node)
-      }
-    }
-  }
+  const { handlers, contextNode, closeContextMenu } = usePaneGestures(model)
+  useWheelZoom(canvas, model)
+  const faceted = model.facetPanels !== undefined
 
   return (
     <div style={wrapperStyle}>
@@ -802,24 +530,25 @@ const GraphCanvas = observer(function GraphCanvas({
             cursor: model.isPanning || model.draggingNode ? 'grabbing' : 'grab',
             display: 'block',
           }}
-          onMouseDown={handleMouseDown}
-          onMouseMove={handleMouseMove}
-          onMouseUp={handleMouseUp}
-          onMouseLeave={handleMouseLeave}
-          onClick={handleClick}
-          onContextMenu={handleContextMenu}
+          {...handlers}
         />
 
-        <TubeMapOverlay model={model} />
-        <ReferenceStripOverlay model={model} />
-        <RowLabels model={model} />
-        <GraphSizeLabels model={model} />
-        <BubbleHalos model={model} />
-        <GenePins model={model} />
-        <LabelLayer model={model} />
+        {faceted ? (
+          <FacetPanels model={model} handlers={handlers} />
+        ) : (
+          <>
+            <TubeMapOverlay model={model} />
+            <ReferenceStripOverlay model={model} />
+            <RowLabels model={model} />
+            <GraphSizeLabels model={model} />
+            <BubbleHalos model={model} />
+            <GenePins model={model} />
+            <LabelLayer model={model} />
+            <WalkRowsOverlay model={model} />
+            <Legends model={model} />
+          </>
+        )}
         <UnpopButton model={model} />
-        <WalkRowsOverlay model={model} />
-        <Legends model={model} />
 
         {ownChrome ? (
           <div style={loadingLayerStyle}>
@@ -847,9 +576,7 @@ const GraphCanvas = observer(function GraphCanvas({
           nodeId={contextNode.nodeId}
           top={contextNode.top}
           left={contextNode.left}
-          onClose={() => {
-            setContextNode(undefined)
-          }}
+          onClose={closeContextMenu}
         />
       ) : null}