jbrowse-plugin-graphgenomeviewer 4.3.0 → 4.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jbrowse-plugin-graphgenomeviewer",
-  "version": "4.3.0",
+  "version": "4.4.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.3.0"
+    "@jbrowse/bandage-core": "4.4.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/src/GraphGenomeView/components/WalkStrip.tsx

@@ -6,8 +6,10 @@ import {
   walkRowsTree,
 } from '@jbrowse/bandage-core/layout/walkRowDraw'
 import {
+  stripGeneGaps,
   stripRowAt,
   walkMarksTree,
+  walkStripLabelsTree,
 } from '@jbrowse/bandage-core/layout/walkStrip'
 import { RAMP_GRADIENT_CSS } from '@jbrowse/bandage-core/referenceRampCss'
 import { isAlive } from '@jbrowse/mobx-state-tree'
@@ -19,6 +21,7 @@ import { Swatch } from './WalkRowsOverlay'
 import { legendRowStyle } from './legendStyles'
 
 import type { GraphPaneModel } from '../model'
+import type { RowGene } from '@jbrowse/bandage-core/layout/walkRowDraw'
 import type { WalkRows } from '@jbrowse/bandage-core/layout/walkRows'
 import type { StripFrame } from '@jbrowse/bandage-core/layout/walkStrip'
 
@@ -50,20 +53,23 @@ const tipStyle = {
   zIndex: 4,
 }
 
-// The bars, built once per rows, frame and colouring rather than per hover
+// The bars, built once per rows, frame, colouring and genes rather than per
+// hover
 const StripBars = observer(function StripBars({
   bars,
   frame,
   ramp,
+  rowGenes,
 }: {
   bars: WalkRows
   frame: StripFrame
   ramp: { start: number; end: number } | undefined
+  rowGenes: Map<string, RowGene[]> | undefined
 }) {
   const idPrefix = useId().replace(/[^\w-]/g, '')
   const tree = useMemo(
-    () => walkRowsTree(bars, frame, { ramp, idPrefix }),
-    [bars, frame, ramp, idPrefix],
+    () => walkRowsTree(bars, frame, { ramp, rowGenes, idPrefix }),
+    [bars, frame, ramp, rowGenes, idPrefix],
   )
   return <ElTree el={tree} />
 })
@@ -84,7 +90,6 @@ const WalkStrip = observer(function WalkStrip({
   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
@@ -94,6 +99,9 @@ const WalkStrip = observer(function WalkStrip({
   const key = walkRowsKey(bars, {
     ramp: model.referenceRampDomain,
     rampCss: RAMP_GRADIENT_CSS,
+    genes: model.walkRowGenes?.size
+      ? stripGeneGaps(frame, model.walkRowGeneGaps)
+      : undefined,
   })
   return (
     <div
@@ -149,25 +157,20 @@ const WalkStrip = observer(function WalkStrip({
           }
         }}
       >
-        <StripBars bars={bars} frame={frame} ramp={model.referenceRampDomain} />
+        <StripBars
+          bars={bars}
+          frame={frame}
+          ramp={model.referenceRampDomain}
+          rowGenes={model.walkRowGenes}
+        />
         <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}
+        <ElTree
+          el={walkStripLabelsTree(
+            bars,
+            frame,
+            new Set(model.walkLayers.map(l => l.walk)),
+          )}
+        />
       </svg>
       {tip ? (
         <div style={{ ...tipStyle, left: tip.x + 12, top: tip.y - 18 }}>

package/src/GraphGenomeView/model.ts

@@ -52,7 +52,6 @@ import {
   modeUsesLayoutEngine,
 } from '@jbrowse/bandage-core/layoutModes'
 import { NODE_WIDTH_VALUES, nodeInk } from '@jbrowse/bandage-core/nodeWidths'
-import { LABEL_CHAR_PX } from '@jbrowse/bandage-core/overlayLabels'
 import {
   anchorFromPaths,
   chooseReferencePath,
@@ -303,9 +302,6 @@ const VIEWPORT_DEBOUNCE_MS = 150
 const VIEWPORT_PANES_BUILT = 1
 // How many walk rows read their haplotype's genes, the first rows down
 const WALK_GENE_ROWS = 40
-// The most of the pane's height the strip of walk rows under a node layout
-// takes; past it rows shrink, down to a dense overview
-const WALK_STRIP_CEILING = 260
 
 // The rows a sample filter keeps, in the order it names them
 function filterSamples<R extends { sample: string; label: string }>(
@@ -1550,131 +1546,6 @@ export function GraphPaneMixin() {
         )
       },
     }))
-    .views(self => ({
-      // The gene reads walk rows need: for each row whose haplotype
-      // (`HG00097#1`) names an assembly with a gene track, that track over the
-      // span of its own contig the row's bar covers. The first WALK_GENE_ROWS
-      // such rows are read, and the rest counted for the key.
-      get walkGeneReads() {
-        const bars = self.walkRowBars
-        if (!bars || !self.showGenes) {
-          return undefined
-        }
-        const reads: {
-          row: string
-          trackId: string
-          region: SubgraphRegion
-        }[] = []
-        let untracked = 0
-        let unplaced = 0
-        for (const row of bars.rows) {
-          if (!row.axis) {
-            unplaced++
-            continue
-          }
-          const assemblyName = resolveLocationAssembly(self.assemblyResolver, {
-            sample: row.sample,
-            haplotype:
-              row.haplotype === undefined
-                ? undefined
-                : `${row.sample}#${row.haplotype}`,
-          })
-          const track = assemblyName
-            ? self.geneTracksByAssembly.get(assemblyName)
-            : undefined
-          if (!assemblyName || !track) {
-            untracked++
-            continue
-          }
-          reads.push({
-            row: row.name,
-            trackId: track.trackId,
-            region: {
-              assemblyName,
-              refName: row.axis.contig,
-              ...rowSpan(row.axis, row.bp),
-            },
-          })
-        }
-        return {
-          reads: reads.slice(0, WALK_GENE_ROWS),
-          gaps: {
-            untracked,
-            unplaced,
-            unread: Math.max(0, reads.length - WALK_GENE_ROWS),
-          },
-        }
-      },
-      get walkRowGeneGaps() {
-        return this.walkGeneReads?.gaps
-      },
-      // The walk row under a pane point, as its index among the reference row
-      // and the rows below it, where the point is on its bar
-      walkRowAt(screenX: number, screenY: number) {
-        const bars = self.walkRowBars
-        if (!bars) {
-          return undefined
-        }
-        const i = Math.round(
-          (screenY - self.translateY) / (ROW_HEIGHT_PX * self.scaleY),
-        )
-        const row = [bars.reference, ...bars.rows][i]
-        const y = i * ROW_HEIGHT_PX * self.scaleY + self.translateY
-        const bp = (screenX - self.translateX) / self.scaleX - bars.origin
-        return row &&
-          Math.abs(screenY - y) <= WALK_BAR_PX / 2 + 2 &&
-          bp >= 0 &&
-          bp <= row.bp
-          ? i
-          : undefined
-      },
-      // Where a walk row's bar lies in its own assembly, for a linear view to
-      // open: the span of its contig the bar covers, on the session assembly
-      // its haplotype names (the cut's own assembly for the reference row).
-      // The label names the haplotype when no assembly is loaded for it.
-      walkRowLaunchTarget(index: number, bars = self.walkRowBars) {
-        const row = bars ? [bars.reference, ...bars.rows][index] : undefined
-        if (!row?.axis) {
-          return undefined
-        }
-        const haplotype =
-          row.haplotype === undefined
-            ? undefined
-            : `${row.sample}#${row.haplotype}`
-        const assembly =
-          index === 0
-            ? self.graphRegion?.assemblyName
-            : resolveLocationAssembly(self.assemblyResolver, {
-                sample: row.sample,
-                haplotype,
-              })
-        return {
-          label: row.label,
-          assembly,
-          location: {
-            sample: row.sample,
-            haplotype,
-            refName: row.axis.contig,
-            ...rowSpan(row.axis, row.bp),
-          },
-        }
-      },
-      // Each row's genes as offsets along its bar: the reference row's from
-      // the backbone's gene track, every other row's from its own assembly
-      get walkRowGenes() {
-        const bars = self.walkRowBars
-        if (!bars || !self.showGenes) {
-          return undefined
-        }
-        const byRow = new Map(self.walkGeneFeatures ?? [])
-        if (self.geneFeatures) {
-          byRow.set(bars.reference.name, self.geneFeatures)
-        }
-        return byRow.size
-          ? placeRowGenes([bars.reference, ...bars.rows], byRow)
-          : undefined
-      },
-    }))
     .views(self => ({
       // The contributors a view can actually be opened on: those naming an
       // assembly this session has loaded. Every strain of an E. coli pangenome
@@ -1795,14 +1666,7 @@ export function GraphPaneMixin() {
         if (!bars) {
           return undefined
         }
-        const longest = Math.max(
-          ...[bars.reference, ...bars.rows].map(r => r.label.length),
-        )
-        return walkStripFrame(bars, {
-          width: self.paneWidth,
-          maxHeight: WALK_STRIP_CEILING,
-          labelPx: longest * LABEL_CHAR_PX + 16,
-        })
+        return walkStripFrame(bars, { width: self.paneWidth })
       },
       // Whether a cut must follow every snarl a walk leaves the window by, so
       // walks come back whole: walk rows measure them, and so does the strip
@@ -1833,6 +1697,131 @@ export function GraphPaneMixin() {
             }))
       },
     }))
+    .views(self => ({
+      // The gene reads walk rows need, as the layout or the strip: for each row whose haplotype
+      // (`HG00097#1`) names an assembly with a gene track, that track over the
+      // span of its own contig the row's bar covers. The first WALK_GENE_ROWS
+      // such rows are read, and the rest counted for the key.
+      get walkGeneReads() {
+        const bars = self.walkRowBars ?? self.walkStripRows
+        if (!bars || !self.showGenes) {
+          return undefined
+        }
+        const reads: {
+          row: string
+          trackId: string
+          region: SubgraphRegion
+        }[] = []
+        let untracked = 0
+        let unplaced = 0
+        for (const row of bars.rows) {
+          if (!row.axis) {
+            unplaced++
+            continue
+          }
+          const assemblyName = resolveLocationAssembly(self.assemblyResolver, {
+            sample: row.sample,
+            haplotype:
+              row.haplotype === undefined
+                ? undefined
+                : `${row.sample}#${row.haplotype}`,
+          })
+          const track = assemblyName
+            ? self.geneTracksByAssembly.get(assemblyName)
+            : undefined
+          if (!assemblyName || !track) {
+            untracked++
+            continue
+          }
+          reads.push({
+            row: row.name,
+            trackId: track.trackId,
+            region: {
+              assemblyName,
+              refName: row.axis.contig,
+              ...rowSpan(row.axis, row.bp),
+            },
+          })
+        }
+        return {
+          reads: reads.slice(0, WALK_GENE_ROWS),
+          gaps: {
+            untracked,
+            unplaced,
+            unread: Math.max(0, reads.length - WALK_GENE_ROWS),
+          },
+        }
+      },
+      get walkRowGeneGaps() {
+        return this.walkGeneReads?.gaps
+      },
+      // The walk row under a pane point, as its index among the reference row
+      // and the rows below it, where the point is on its bar
+      walkRowAt(screenX: number, screenY: number) {
+        const bars = self.walkRowBars
+        if (!bars) {
+          return undefined
+        }
+        const i = Math.round(
+          (screenY - self.translateY) / (ROW_HEIGHT_PX * self.scaleY),
+        )
+        const row = [bars.reference, ...bars.rows][i]
+        const y = i * ROW_HEIGHT_PX * self.scaleY + self.translateY
+        const bp = (screenX - self.translateX) / self.scaleX - bars.origin
+        return row &&
+          Math.abs(screenY - y) <= WALK_BAR_PX / 2 + 2 &&
+          bp >= 0 &&
+          bp <= row.bp
+          ? i
+          : undefined
+      },
+      // Where a walk row's bar lies in its own assembly, for a linear view to
+      // open: the span of its contig the bar covers, on the session assembly
+      // its haplotype names (the cut's own assembly for the reference row).
+      // The label names the haplotype when no assembly is loaded for it.
+      walkRowLaunchTarget(index: number, bars = self.walkRowBars) {
+        const row = bars ? [bars.reference, ...bars.rows][index] : undefined
+        if (!row?.axis) {
+          return undefined
+        }
+        const haplotype =
+          row.haplotype === undefined
+            ? undefined
+            : `${row.sample}#${row.haplotype}`
+        const assembly =
+          index === 0
+            ? self.graphRegion?.assemblyName
+            : resolveLocationAssembly(self.assemblyResolver, {
+                sample: row.sample,
+                haplotype,
+              })
+        return {
+          label: row.label,
+          assembly,
+          location: {
+            sample: row.sample,
+            haplotype,
+            refName: row.axis.contig,
+            ...rowSpan(row.axis, row.bp),
+          },
+        }
+      },
+      // Each row's genes as offsets along its bar: the reference row's from
+      // the backbone's gene track, every other row's from its own assembly
+      get walkRowGenes() {
+        const bars = self.walkRowBars ?? self.walkStripRows
+        if (!bars || !self.showGenes) {
+          return undefined
+        }
+        const byRow = new Map(self.walkGeneFeatures ?? [])
+        if (self.geneFeatures) {
+          byRow.set(bars.reference.name, self.geneFeatures)
+        }
+        return byRow.size
+          ? placeRowGenes([bars.reference, ...bars.rows], byRow)
+          : undefined
+      },
+    }))
     .views(self => ({
       // Whether the drawing's x is reference bp a host can place. Walk rows
       // put the backbone at its bp too, but their bars are lengths, so the
@@ -2395,6 +2384,7 @@ export function GraphPaneMixin() {
               ? self.walkLayers.map(l => (l.color ? l : l.walk))
               : undefined,
             facet: self.walkLayers.length > 1 ? self.facetSpec : undefined,
+            walkStrip: self.walkStripShown || undefined,
             width: self.paneWidth,
             height: self.paneCeiling,
             colorScheme: self.chosenColorScheme,
@@ -2413,7 +2403,7 @@ export function GraphPaneMixin() {
             : `${layoutModeByValue(self.chosenLayoutMode).label} draws a picture of its own, which the SVG export does not`
       },
       // The drawing as a standalone SVG, fitted, with its genes, its lifted
-      // walks' keys and facet panels; see figureSvg
+      // walks' keys, facet panels and the strip of walk rows; see figureSvg
       figure() {
         const { graph, layoutResult } = self
         return graph && layoutResult && !this.figureUnavailable
@@ -2434,6 +2424,11 @@ export function GraphPaneMixin() {
               walkRows: self.walkRowBars,
               rowGenes: self.walkRowGenes,
               rowGeneGaps: self.walkRowGeneGaps,
+              walkStrip: self.walkStripRows && {
+                rows: self.walkStripRows,
+                rowGenes: self.walkRowGenes,
+                rowGeneGaps: self.walkRowGeneGaps,
+              },
               spec: this.figureSpec(),
             })
           : undefined

package/src/version.ts

@@ -1 +1 @@
-export const version = '4.3.0'
+export const version = '4.4.0'