jbrowse-plugin-graphgenomeviewer 4.0.21 → 4.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jbrowse-plugin-graphgenomeviewer",
-  "version": "4.0.21",
+  "version": "4.0.22",
   "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.17"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/src/GraphGenomeView/components/FacetPanels.tsx

@@ -0,0 +1,204 @@
+import { useEffect, useRef } from 'react'
+
+import { formatBp } from '@jbrowse/bandage-core/graphLabels'
+import { fitTransform } from '@jbrowse/bandage-core/pipeline'
+import { Canvas2DRenderer } from '@jbrowse/bandage-core/renderer/Canvas2DRenderer'
+import { buildGeometry } from '@jbrowse/bandage-core/renderer/GeometryBuilder'
+import { axisScaleOf } from '@jbrowse/bandage-core/viewport'
+import { encodingSwatchCss } from '@jbrowse/bandage-core/walkEncoding'
+import { getDpr } from '@jbrowse/render-core/canvas2dUtils'
+import { observer } from 'mobx-react'
+
+import { FACET_GAP_PX, FACET_PAD_PX, FACET_TITLE_PX } from '../model'
+
+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. A panel's title is its
+// scale, and clicking it lifts that walk alone in the whole pane.
+
+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,
+  fontSize: 11,
+  cursor: 'pointer',
+  border: 'none',
+  background: 'none',
+  textAlign: 'left' as const,
+  width: '100%',
+}
+
+const barRowStyle = { display: 'flex', alignItems: 'center', gap: 5 }
+const barStyle = { flex: 1, height: 8, borderRadius: 2 }
+
+const FacetPanel = observer(function FacetPanel({
+  model,
+  lift,
+  width,
+  height,
+}: {
+  model: GraphPaneModel
+  lift: WalkLift
+  width: number
+  height: number
+}) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const { graph, nodePositions, nodeById, layoutBounds, pixelRows } = model
+  const walk = lift.walks[0]!
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas || !graph || !nodePositions || !nodeById || !layoutBounds) {
+      return
+    }
+    const renderer = new Canvas2DRenderer(canvas)
+    renderer.resize(width, height)
+    const fit = fitTransform(layoutBounds, width, height, pixelRows, {
+      padLeft: FACET_PAD_PX,
+      padTop: FACET_PAD_PX,
+      padRight: FACET_PAD_PX,
+      padBottom: FACET_PAD_PX,
+    })
+    if (fit) {
+      const axis = axisScaleOf(fit.scale, pixelRows)
+      renderer.uploadGeometry(
+        buildGeometry({
+          nodePositions,
+          graph,
+          nodeById,
+          colorScheme: model.effectiveColorScheme,
+          contigThickness: model.contigThickness,
+          connectorThickness: model.connectorThickness,
+          drawPaths: false,
+          nodeWidth: model.nodeWidth,
+          highlight: lift,
+          axis,
+          linearLayout: model.linearLayout,
+          referenceRamp: model.referenceRamp,
+          deletions: model.deletionEdgeIndexes,
+          hiddenEdges: model.hiddenEdgeIndexes,
+          version: model.positionsVersion,
+        }),
+      )
+      const dpr = getDpr()
+      renderer.updateTransform({
+        scaleX: axis.scaleX * dpr,
+        scaleY: axis.scaleY * dpr,
+        translateX: fit.translateX * dpr,
+        translateY: fit.translateY * dpr,
+        dpr,
+      })
+      renderer.render(model.darkMode ? [0.12, 0.12, 0.12, 1] : [1, 1, 1, 1])
+    }
+    return () => {
+      renderer.dispose()
+    }
+  }, [
+    model,
+    lift,
+    width,
+    height,
+    graph,
+    nodePositions,
+    nodeById,
+    layoutBounds,
+    pixelRows,
+  ])
+
+  const label =
+    model.walkChoices.find(c => c.name === walk.name)?.label ?? walk.name
+  const delta =
+    walk.referenceBp === undefined || walk.bp === walk.referenceBp
+      ? ''
+      : ` ${walk.bp > walk.referenceBp ? '+' : '−'}${formatBp(Math.abs(walk.bp - walk.referenceBp))}`
+  const range = walk.range
+  return (
+    <div>
+      <button
+        type="button"
+        style={titleStyle}
+        data-testid="graph-facet-title"
+        title={
+          range
+            ? `${range.contig}:${range.start.toLocaleString()}-${range.end.toLocaleString()} · click to lift ${label} alone`
+            : `click to lift ${label} alone`
+        }
+        onClick={() => {
+          model.liftWalks([walk.name])
+          model.setFacet('none')
+        }}
+      >
+        <div>
+          <strong>{label}</strong>
+          {delta}
+          {walk.reversedBp > 0 ? `, ${formatBp(walk.reversedBp)} reversed` : ''}
+        </div>
+        <div style={barRowStyle}>
+          {range ? <span>{range.start.toLocaleString()}</span> : null}
+          <div
+            style={{
+              ...barStyle,
+              background: encodingSwatchCss(walk.encoding),
+            }}
+          />
+          {range ? <span>{range.end.toLocaleString()}</span> : null}
+        </div>
+      </button>
+      <canvas
+        ref={canvasRef}
+        data-testid="graph-facet-canvas"
+        style={{ width, height, display: 'block' }}
+      />
+    </div>
+  )
+})
+
+const FacetPanels = observer(function FacetPanels({
+  model,
+}: {
+  model: GraphPaneModel
+}) {
+  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}
+        />
+      ))}
+    </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

@@ -7,11 +7,7 @@ import {
   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 { encodingSwatchCss } 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 +15,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'
@@ -34,6 +31,7 @@ import { nodeLaunchMenuItems } from '../../launchFromGraph/graphMenuItems'
 import { createGraphRenderer } from '../renderer/GraphRenderer'
 
 import type { GraphPaneModel } from '../model'
+import type { LiftedWalk } from '@jbrowse/bandage-core/walkHighlight'
 
 // Bottom RIGHT, not bottom left: the row labels of a row-structured layout are
 // pinned to the left edge, so a bottom-left tooltip lands on top of them and
@@ -181,14 +179,16 @@ const PathLegend = observer(function PathLegend({
   ) : null
 })
 
-const walkSwatchStyle = { width: 26, height: 8, borderRadius: 2, flex: 'none' }
+const walkBlockStyle = { marginBottom: 2 }
+const walkSwatchStyle = { width: 18, height: 8, borderRadius: 2, flex: 'none' }
+// a faded node: grey at the fade's alpha
+const FADED_SWATCH = 'rgba(160, 160, 160, 0.18)'
+const walkBarRowStyle = { display: 'flex', alignItems: 'center', gap: 5 }
+const walkBarStyle = { flex: 1, minWidth: 60, height: 8, borderRadius: 2 }
 
 // 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()
-}
 
 const WalkReadout = observer(function WalkReadout({
   model,
@@ -196,50 +196,92 @@ const WalkReadout = observer(function WalkReadout({
   model: GraphPaneModel
 }) {
   const lift = model.walkLift
-  if (!lift) {
+  // faceted, each panel's title is its walk's key
+  if (!lift || model.facetPanels) {
     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 => (
+        <WalkRow
+          key={w.name}
+          walk={w}
+          label={labelOf(w.name)}
+          referenceDomain={lift.referenceDomain}
+          referenceName={model.graphRegion?.refName}
+        />
       ))}
-      <div>
-        paler nodes: on none of{' '}
-        {lift.walks.length > 1 ? 'these walks' : 'this walk'}
+      <div style={pathLegendRowStyle}>
+        <div style={{ ...walkSwatchStyle, background: FADED_SWATCH }} />
+        <span>
+          not on {alone ? labelOf(lift.walks[0]!.name) : 'these walks'}
+        </span>
       </div>
     </div>
   )
 })
 
+// One walk's key: its swatch, its name and its length against the reference.
+// A lane shading along the walk shows its scale, the walk's first and last
+// coordinate either side of the bar; where it sits hovers on the row.
+function WalkRow({
+  walk: w,
+  label,
+  referenceDomain,
+  referenceName,
+}: {
+  walk: LiftedWalk
+  label: string
+  referenceDomain?: { start: number; end: number }
+  referenceName?: string
+}) {
+  const delta =
+    w.referenceBp === undefined || w.bp === w.referenceBp
+      ? ''
+      : ` ${w.bp > w.referenceBp ? '+' : '−'}${formatBp(Math.abs(w.bp - w.referenceBp))}`
+  const ends =
+    w.encoding.field === 'progress'
+      ? w.range
+      : w.encoding.field === 'reference'
+        ? referenceDomain
+        : undefined
+  const where = w.range
+    ? `${w.range.contig}:${w.range.start.toLocaleString()}-${w.range.end.toLocaleString()}`
+    : w.encoding.field === 'reference' && referenceName
+      ? referenceName
+      : undefined
+  const bar = (
+    <div
+      style={{
+        ...(ends ? walkBarStyle : walkSwatchStyle),
+        background: encodingSwatchCss(w.encoding),
+      }}
+    />
+  )
+  return (
+    <div style={walkBlockStyle} title={where}>
+      <div style={pathLegendRowStyle}>
+        {ends ? null : bar}
+        <span>
+          <strong>{label}</strong>
+          {delta}
+          {w.reversedBp > 0 ? `, ${formatBp(w.reversedBp)} reversed` : ''}
+        </span>
+      </div>
+      {ends ? (
+        <div style={walkBarRowStyle}>
+          <span>{Math.round(ends.start).toLocaleString()}</span>
+          {bar}
+          <span>{Math.round(ends.end).toLocaleString()}</span>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
 // The reference-position ramp, as a strip labelled with the interval it runs
 // over. Nothing on screen used to say that red-to-magenta means left-to-right of
 // the cut window, so two tutorials carried that sentence in prose and a reader
@@ -262,7 +304,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} />
@@ -819,6 +862,7 @@ const GraphCanvas = observer(function GraphCanvas({
         <LabelLayer model={model} />
         <UnpopButton model={model} />
         <WalkRowsOverlay model={model} />
+        <FacetPanels model={model} />
         <Legends model={model} />
 
         {ownChrome ? (

package/src/GraphGenomeView/components/ReferenceStripOverlay.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react'
 
 import { drawReferenceStrip } from '@jbrowse/bandage-core/referenceStrip'
+import { encodingSwatchCss } from '@jbrowse/bandage-core/walkEncoding'
 import { getDpr } from '@jbrowse/render-core/canvas2dUtils'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
@@ -75,16 +76,27 @@ const legendBoxStyle = {
 const legendRowStyle = { display: 'flex', alignItems: 'center', gap: 5 }
 const SWATCH_PX = 18
 
-function StripSwatch() {
+// the strip's own colours: the reference lane's under lifted walks, grey
+// when the reference is not one of them, else the node scheme's ramp
+function StripSwatch({ background }: { background: string }) {
   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>
+    <div style={{ width: SWATCH_PX, height: 4, flex: 'none', background }} />
   )
 }
 
+const RAMP_SWATCH =
+  'linear-gradient(to right, hsl(0, 70%, 50%) 0 33%, hsl(120, 70%, 50%) 33% 61%, hsl(240, 70%, 50%) 61%)'
+
+function stripBackground(model: GraphPaneModel) {
+  const lift = model.walkLift
+  const reference = lift?.walks.find(w => w.reference)
+  return reference
+    ? encodingSwatchCss(reference.encoding)
+    : lift
+      ? 'rgb(160, 160, 160)'
+      : RAMP_SWATCH
+}
+
 function OverhangSwatch() {
   return (
     <svg width={SWATCH_PX} height={8} style={{ flex: 'none' }}>
@@ -102,7 +114,7 @@ export const ReferenceStripLegend = observer(function ReferenceStripLegend({
   return model.referenceStripShown ? (
     <div style={legendBoxStyle} data-testid="graph-reference-strip-legend">
       <div style={legendRowStyle}>
-        <StripSwatch />
+        <StripSwatch background={stripBackground(model)} />
         <span>top strip: reference segments at their bp</span>
       </div>
       {model.referenceStripOverhangs ? (

package/src/GraphGenomeView/model.test.ts

@@ -2494,17 +2494,17 @@ describe('walk rows', () => {
     })
     await model.loadGFA(WALKS_GFA, 'walks')
     model.liftWalks(['B#1#ctg', 'GRCh38#0#chr1'])
-    model.setWalkColor('B#1#ctg', { field: 'strand' })
-    model.setWalkColor('B#1#ctg', { scheme: 'greens' })
+    model.setWalkColor('B#1#ctg', { field: 'walk' })
+    model.setWalkColor('B#1#ctg', { scheme: 'green' })
     model.toggleWalk('A#1#ctg')
     expect(model.walkLift!.walks.map(w => [w.name, w.encoding])).toEqual([
-      ['GRCh38#0#chr1', { field: 'reference', scheme: 'rainbow' }],
-      ['B#1#ctg', { field: 'strand', scheme: 'greens' }],
-      ['A#1#ctg', { field: 'progress', scheme: 'reds' }],
+      ['GRCh38#0#chr1', { field: 'walk', scheme: 'grey' }],
+      ['B#1#ctg', { field: 'walk', scheme: 'green' }],
+      ['A#1#ctg', { field: 'walk', scheme: 'red' }],
     ])
-    // the reference is coloured by position whatever the node colour scheme
+    // lifted together, each walk is one flat colour
     const ref = model.walkLift!.walks[0]!
-    expect(new Set(ref.colors.values()).size).toBe(2)
+    expect(new Set(ref.colors.values()).size).toBe(1)
     interface Item {
       label?: string
       checked?: boolean
@@ -2515,16 +2515,42 @@ describe('walk rows', () => {
     )!
     const colour = walkMenu.subMenu!.find(item => item.label === 'Colour B#1')!
     expect(
-      colour.subMenu.filter(item => item.checked).map(item => item.label),
-    ).toEqual(['Strand against the reference', 'Greens'])
+      colour.subMenu!.filter(item => item.checked).map(item => item.label),
+    ).toEqual(['One colour for the walk', 'Lime to forest'])
+    // the rainbow is offered for reference position only
+    expect(colour.subMenu!.some(item => item.label === 'Rainbow')).toBe(false)
     model.liftWalks(['B#1#ctg'])
     expect(model.walkLayers).toEqual([
-      { walk: 'B#1#ctg', color: { field: 'strand', scheme: 'greens' } },
+      { walk: 'B#1#ctg', color: { field: 'walk', scheme: 'green' } },
     ])
     model.toggleWalk('B#1#ctg')
     expect(model.walkLift).toBeUndefined()
   })
 
+  test('faceted by walk, the pane draws one panel per lifted walk on one scale', async () => {
+    rpcRespond()
+    const model = stateModelFactory().create({
+      type: 'GraphGenomeView',
+      layoutMode: 'auto',
+    })
+    await model.loadGFA(WALKS_GFA, 'walks')
+    model.liftWalks(['GRCh38#0#chr1'])
+    model.setFacet('walk')
+    // one walk needs no facet
+    expect(model.facetPanels).toBeUndefined()
+    model.liftWalks(['GRCh38#0#chr1', 'B#1#ctg', 'A#1#ctg'])
+    expect(
+      model.facetPanels!.map(p => [p.walks[0]!.name, p.walks[0]!.encoding]),
+    ).toEqual([
+      ['GRCh38#0#chr1', { field: 'progress', scheme: 'red' }],
+      ['B#1#ctg', { field: 'progress', scheme: 'red' }],
+      ['A#1#ctg', { field: 'progress', scheme: 'red' }],
+    ])
+    expect(model.facetGrid!.columns).toBe(3)
+    model.setFacet('none')
+    expect(model.facetPanels).toBeUndefined()
+  })
+
   test('a session naming the one walk the old field lifted opens with none', () => {
     const model = stateModelFactory().create({
       type: 'GraphGenomeView',