jbrowse-plugin-graphgenomeviewer 7.1.2 → 7.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jbrowse-plugin-graphgenomeviewer",
-  "version": "7.1.2",
+  "version": "7.1.3",
   "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": {

package/src/GbzBaseSyntenyAdapter/configSchema.ts

@@ -22,8 +22,8 @@ import type { Instance } from '@jbrowse/mobx-state-tree'
  * haplotype a walk belongs to.
  *
  * Only the fine tier exists: a whole-chromosome view stays on a PIF's coarse
- * tier. A query on a haplotype lane answers nothing, so the multi-way display
- * composes its lane-to-lane links through the reference.
+ * tier. A window of the anchor answers any two lanes' alignment, so the
+ * multi-way display fetches each adjacent lane pair directly.
  *
  * #example
  * ```js

package/src/GetSubgraph.ts

@@ -65,7 +65,7 @@ declare module '@jbrowse/core/rpc/RpcRegistry' {
 }
 
 // Adapters that can cut a local subgraph out of a graph file implement this:
-// RgfaTabixAdapter and GbzBaseSyntenyAdapter today.
+// RgfaTabixAdapter, WalkTabixSyntenyAdapter and GbzBaseSyntenyAdapter.
 interface SubgraphAdapter {
   getSubgraph(
     region: Region,

package/src/GraphGenomeView/components/Legend.tsx

@@ -1,132 +1,14 @@
 import type { ReactNode } from 'react'
 
-import { rulerInk } from '@jbrowse/bandage-core/tubeMap/axis'
 import { observer } from 'mobx-react'
 
-import { SWATCH_PX, legendSections, swatchWidth } from '../legendSections'
+import { LegendSwatchView } from './LegendSwatch'
 import { legendBoxStyle, legendNoteStyle, legendRowStyle } from './legendStyles'
+import { legendSections } from '../legendSections'
 
-import type { LegendRow, LegendSwatch, Stop } from '../legendSections'
+import type { LegendRow } from '../legendSections'
 import type { GraphPaneModel } from '../model'
 
-function stopsCss(stops: readonly Stop[]) {
-  return stops.length === 1
-    ? stops[0]!.color
-    : `linear-gradient(to right, ${stops.map(s => `${s.color} ${s.offset * 100}%`).join(', ')})`
-}
-
-const glyphStyle = {
-  width: SWATCH_PX,
-  flex: 'none',
-  textAlign: 'center' as const,
-  fontFamily: 'monospace',
-  fontSize: 12,
-}
-
-export function LegendSwatchView({ swatch }: { swatch: LegendSwatch }) {
-  const width = swatchWidth(swatch)
-  const box = { width, flex: 'none' }
-  switch (swatch.kind) {
-    case 'fill':
-      return (
-        <div
-          style={{
-            ...box,
-            height: swatch.height ?? 8,
-            borderRadius: swatch.square ? 0 : 2,
-            background: stopsCss(swatch.stops),
-          }}
-        />
-      )
-    case 'bands':
-      return (
-        <div style={box}>
-          {swatch.bands.map((stops, i) => (
-            <div
-              key={i}
-              style={{
-                height: swatch.bands.length > 1 ? 3 : 4,
-                background: stopsCss(stops),
-              }}
-            />
-          ))}
-        </div>
-      )
-    case 'line':
-      return (
-        <div
-          style={{
-            ...box,
-            height: 3,
-            borderRadius: 2,
-            background: swatch.color,
-          }}
-        />
-      )
-    case 'halo':
-      return (
-        <svg width={width} height={10} style={{ flex: 'none' }}>
-          <line
-            x1={5}
-            y1={5}
-            x2={13}
-            y2={5}
-            stroke={swatch.color}
-            strokeOpacity={0.35}
-            strokeWidth={8}
-            strokeLinecap="round"
-          />
-        </svg>
-      )
-    case 'outline':
-      return (
-        <div
-          style={{
-            ...box,
-            height: swatch.height,
-            boxSizing: 'border-box',
-            border: `${swatch.stroke}px solid ${swatch.color}`,
-            borderRadius: swatch.radius,
-          }}
-        />
-      )
-    case 'overhang':
-      return (
-        <svg width={width} height={10} style={{ flex: 'none' }}>
-          <path d="M0,5 L8,0 L8,10 Z M18,5 L10,0 L10,10 Z" fill="#18181c" />
-        </svg>
-      )
-    case 'glyph':
-      return <span style={glyphStyle}>{swatch.char}</span>
-    case 'tick':
-      return (
-        <div
-          style={{
-            ...box,
-            height: swatch.height,
-            display: 'flex',
-            justifyContent: 'center',
-            background: swatch.backing,
-          }}
-        >
-          <div style={{ width: 2, backgroundColor: swatch.color }} />
-        </div>
-      )
-    case 'bracket':
-      return (
-        <svg width={width} height={7} style={{ flex: 'none' }}>
-          <path
-            d={`M0.5,6 V1.5 H5.5 V6 M8.5,6 V1.5 H${SWATCH_PX - 0.5} V6`}
-            fill="none"
-            stroke={rulerInk()}
-          />
-        </svg>
-      )
-    case 'blank':
-      return <span style={box} />
-  }
-}
-
 // One row: its swatch then its words, or a note with neither. `at`, where
 // the hovered node sits on a walk, stands in for the line under it.
 export function LegendRowView({

package/src/GraphGenomeView/components/LegendSwatch.tsx

@@ -0,0 +1,237 @@
+import { rulerInk } from '@jbrowse/bandage-core/tubeMap/axis'
+
+import { useSvgId } from './ElTree'
+import { SWATCH_PX, swatchWidth } from '../legendSections'
+
+import type { LegendSwatch, Stop } from '../legendSections'
+
+function Gradient({
+  id,
+  x,
+  y,
+  stops,
+  width,
+  height,
+  square,
+}: {
+  id: string
+  x: number
+  y: number
+  stops: readonly Stop[]
+  width: number
+  height: number
+  square?: boolean
+}) {
+  const rect = (fill: string) => (
+    <rect
+      x={x}
+      y={y}
+      width={width}
+      height={height}
+      rx={square ? 0 : 2}
+      fill={fill}
+    />
+  )
+  return stops.length > 1 ? (
+    <>
+      <defs>
+        <linearGradient id={id}>
+          {stops.map((s, i) => (
+            <stop key={i} offset={s.offset} stopColor={s.color} />
+          ))}
+        </linearGradient>
+      </defs>
+      {rect(`url(#${id})`)}
+    </>
+  ) : (
+    rect(stops[0]!.color)
+  )
+}
+
+const bandPx = (bands: readonly unknown[]) => (bands.length > 1 ? 3 : 4)
+
+function swatchHeight(swatch: LegendSwatch) {
+  switch (swatch.kind) {
+    case 'fill':
+      return swatch.height ?? 8
+    case 'bands':
+      return bandPx(swatch.bands) * swatch.bands.length
+    case 'line':
+      return 3
+    case 'halo':
+    case 'overhang':
+      return 10
+    case 'outline':
+    case 'tick':
+      return swatch.height
+    case 'glyph':
+      return 15
+    case 'bracket':
+      return 7
+    case 'blank':
+      return 0
+  }
+}
+
+// A row's swatch with its left edge at x, centred on the row's text 5 px
+// above the baseline
+export function SvgSwatch({
+  swatch,
+  x,
+  id,
+}: {
+  swatch: LegendSwatch
+  x: number
+  id: string
+}) {
+  const mid = -5
+  switch (swatch.kind) {
+    case 'fill': {
+      const height = swatchHeight(swatch)
+      return (
+        <Gradient
+          id={id}
+          x={x}
+          y={mid - height / 2}
+          stops={swatch.stops}
+          width={swatchWidth(swatch)}
+          height={height}
+          square={swatch.square}
+        />
+      )
+    }
+    case 'bands': {
+      const band = bandPx(swatch.bands)
+      const top = mid - swatchHeight(swatch) / 2
+      return (
+        <>
+          {swatch.bands.map((stops, i) => (
+            <Gradient
+              key={i}
+              id={`${id}-${i}`}
+              x={x}
+              y={top + i * band}
+              stops={stops}
+              width={SWATCH_PX}
+              height={band}
+              square
+            />
+          ))}
+        </>
+      )
+    }
+    case 'line':
+      return (
+        <rect
+          x={x}
+          y={mid - 1.5}
+          width={SWATCH_PX}
+          height={3}
+          rx={2}
+          fill={swatch.color}
+        />
+      )
+    case 'halo':
+      return (
+        <line
+          x1={x + 5}
+          x2={x + 13}
+          y1={mid}
+          y2={mid}
+          stroke={swatch.color}
+          strokeOpacity={0.35}
+          strokeWidth={8}
+          strokeLinecap="round"
+        />
+      )
+    case 'outline': {
+      const inset = swatch.stroke / 2
+      return (
+        <rect
+          x={x + inset}
+          y={mid - swatch.height / 2 + inset}
+          width={SWATCH_PX - swatch.stroke}
+          height={swatch.height - swatch.stroke}
+          rx={Math.max(0, swatch.radius - inset)}
+          fill="none"
+          stroke={swatch.color}
+          strokeWidth={swatch.stroke}
+        />
+      )
+    }
+    case 'overhang':
+      return (
+        <path
+          transform={`translate(${x} ${mid - 5})`}
+          d="M0,5 L8,0 L8,10 Z M18,5 L10,0 L10,10 Z"
+          fill="#18181c"
+        />
+      )
+    case 'glyph':
+      return (
+        <text
+          x={x + SWATCH_PX / 2}
+          y={mid + 4}
+          textAnchor="middle"
+          fontFamily="monospace"
+          fontSize={12}
+          fill="currentColor"
+        >
+          {swatch.char}
+        </text>
+      )
+    case 'tick': {
+      const y = mid - swatch.height / 2
+      return (
+        <>
+          {swatch.backing ? (
+            <rect
+              x={x}
+              y={y}
+              width={SWATCH_PX}
+              height={swatch.height}
+              fill={swatch.backing}
+            />
+          ) : null}
+          <rect
+            x={x + SWATCH_PX / 2 - 1}
+            y={y}
+            width={2}
+            height={swatch.height}
+            fill={swatch.color}
+          />
+        </>
+      )
+    }
+    case 'bracket':
+      return (
+        <path
+          transform={`translate(${x} ${mid - 3.5})`}
+          d={`M0.5,6 V1.5 H5.5 V6 M8.5,6 V1.5 H${SWATCH_PX - 0.5} V6`}
+          fill="none"
+          stroke={rulerInk()}
+        />
+      )
+    case 'blank':
+      return null
+  }
+}
+
+// The same swatch on screen, in a box as tall as the swatch so the row
+// centres it on its words
+export function LegendSwatchView({ swatch }: { swatch: LegendSwatch }) {
+  const id = useSvgId()
+  const height = swatchHeight(swatch)
+  return (
+    <svg
+      width={swatchWidth(swatch)}
+      height={height}
+      overflow="visible"
+      style={{ flex: 'none' }}
+    >
+      <g transform={`translate(0 ${height / 2 + 5})`}>
+        <SvgSwatch swatch={swatch} x={0} id={id} />
+      </g>
+    </svg>
+  )
+}

package/src/GraphGenomeView/components/PaneSvg.tsx

@@ -3,24 +3,23 @@ import { LEGEND_INSET_PX } from '@jbrowse/bandage-core/labelLayout'
 import { LABEL_CHAR_PX } from '@jbrowse/bandage-core/overlayLabels'
 import { Canvas2DRenderer } from '@jbrowse/bandage-core/renderer/Canvas2DRenderer'
 import { svgCanvas } from '@jbrowse/bandage-core/renderer/svgCanvas'
-import { rulerInk } from '@jbrowse/bandage-core/tubeMap/axis'
 import { PaintLayer } from '@jbrowse/core/util/paintLayer'
 
 import BubbleHalos from './BubbleHalos'
 import GenePins from './GenePins'
 import LabelLayer from './LabelLayer'
+import { SvgSwatch } from './LegendSwatch'
 import { paintReferenceStrip } from './ReferenceStripOverlay'
 import { paintTubeMap } from './TubeMapOverlay'
 import WalkRowsOverlay from './WalkRowsOverlay'
 import {
-  SWATCH_PX,
   facetKeyRows,
   legendSections,
   swatchWidth,
   walkKeyRow,
 } from '../legendSections'
 
-import type { LegendRow, LegendSwatch, Stop } from '../legendSections'
+import type { LegendRow } from '../legendSections'
 import type { GraphPaneModel } from '../model'
 import type { WalkLift } from '@jbrowse/bandage-core/walkHighlight'
 import type { Ctx2D } from '@jbrowse/core/util/paintLayer'
@@ -79,192 +78,6 @@ function Body({
   )
 }
 
-function Gradient({
-  id,
-  x,
-  y,
-  stops,
-  width,
-  height,
-  square,
-}: {
-  id: string
-  x: number
-  y: number
-  stops: readonly Stop[]
-  width: number
-  height: number
-  square?: boolean
-}) {
-  const rect = (fill: string) => (
-    <rect
-      x={x}
-      y={y}
-      width={width}
-      height={height}
-      rx={square ? 0 : 2}
-      fill={fill}
-    />
-  )
-  return stops.length > 1 ? (
-    <>
-      <defs>
-        <linearGradient id={id}>
-          {stops.map((s, i) => (
-            <stop key={i} offset={s.offset} stopColor={s.color} />
-          ))}
-        </linearGradient>
-      </defs>
-      {rect(`url(#${id})`)}
-    </>
-  ) : (
-    rect(stops[0]!.color)
-  )
-}
-
-// A row's swatch with its left edge at x, centred on the row's text 5 px
-// above the baseline, as the screen centres it
-function SvgSwatch({
-  swatch,
-  x,
-  id,
-}: {
-  swatch: LegendSwatch
-  x: number
-  id: string
-}) {
-  const mid = -5
-  switch (swatch.kind) {
-    case 'fill': {
-      const height = swatch.height ?? 8
-      return (
-        <Gradient
-          id={id}
-          x={x}
-          y={mid - height / 2}
-          stops={swatch.stops}
-          width={swatchWidth(swatch)}
-          height={height}
-          square={swatch.square}
-        />
-      )
-    }
-    case 'bands': {
-      const band = swatch.bands.length > 1 ? 3 : 4
-      const top = mid - (band * swatch.bands.length) / 2
-      return (
-        <>
-          {swatch.bands.map((stops, i) => (
-            <Gradient
-              key={i}
-              id={`${id}-${i}`}
-              x={x}
-              y={top + i * band}
-              stops={stops}
-              width={SWATCH_PX}
-              height={band}
-              square
-            />
-          ))}
-        </>
-      )
-    }
-    case 'line':
-      return (
-        <rect
-          x={x}
-          y={mid - 1.5}
-          width={SWATCH_PX}
-          height={3}
-          rx={2}
-          fill={swatch.color}
-        />
-      )
-    case 'halo':
-      return (
-        <line
-          x1={x + 5}
-          x2={x + 13}
-          y1={mid}
-          y2={mid}
-          stroke={swatch.color}
-          strokeOpacity={0.35}
-          strokeWidth={8}
-          strokeLinecap="round"
-        />
-      )
-    case 'outline': {
-      const inset = swatch.stroke / 2
-      return (
-        <rect
-          x={x + inset}
-          y={mid - swatch.height / 2 + inset}
-          width={SWATCH_PX - swatch.stroke}
-          height={swatch.height - swatch.stroke}
-          rx={Math.max(0, swatch.radius - inset)}
-          fill="none"
-          stroke={swatch.color}
-          strokeWidth={swatch.stroke}
-        />
-      )
-    }
-    case 'overhang':
-      return (
-        <path
-          transform={`translate(${x} ${mid - 5})`}
-          d="M0,5 L8,0 L8,10 Z M18,5 L10,0 L10,10 Z"
-          fill="#18181c"
-        />
-      )
-    case 'glyph':
-      return (
-        <text
-          x={x + SWATCH_PX / 2}
-          y={0}
-          textAnchor="middle"
-          fontFamily="monospace"
-          fontSize={12}
-        >
-          {swatch.char}
-        </text>
-      )
-    case 'tick': {
-      const y = mid - swatch.height / 2
-      return (
-        <>
-          {swatch.backing ? (
-            <rect
-              x={x}
-              y={y}
-              width={SWATCH_PX}
-              height={swatch.height}
-              fill={swatch.backing}
-            />
-          ) : null}
-          <rect
-            x={x + SWATCH_PX / 2 - 1}
-            y={y}
-            width={2}
-            height={swatch.height}
-            fill={swatch.color}
-          />
-        </>
-      )
-    }
-    case 'bracket':
-      return (
-        <path
-          transform={`translate(${x} ${mid - 4})`}
-          d={`M0.5,6 V1.5 H5.5 V6 M8.5,6 V1.5 H${SWATCH_PX - 0.5} V6`}
-          fill="none"
-          stroke={rulerInk()}
-        />
-      )
-    case 'blank':
-      return null
-  }
-}
-
 interface KeyRow {
   key: string
   width: number

package/src/GraphGenomeView/components/WalkStrip.tsx

@@ -16,7 +16,7 @@ import { isAlive } from '@jbrowse/mobx-state-tree'
 import { observer } from 'mobx-react'
 
 import ElTree, { useSvgId } from './ElTree'
-import { LegendSwatchView } from './Legend'
+import { LegendSwatchView } from './LegendSwatch'
 import PaneContextMenu from './PaneContextMenu'
 import { legendRowStyle } from './legendStyles'
 import { walkRowSwatch } from '../legendSections'

package/src/GraphTrack/index.ts

@@ -8,8 +8,8 @@ import {
 import type PluginManager from '@jbrowse/core/PluginManager'
 import type DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
 
-// core's synteny displays, copied to ask for headerLanes so only gbz-base
-// offers lanes or opens in a synteny, dotplot or circular view
+// core's synteny displays, copied to ask for headerLanes so only the gbz-base
+// and walk-tabix adapters open in a synteny, dotplot or circular view
 export const SYNTENY_DISPLAYS = [
   'MultiWaySyntenyDisplay',
   'LinearSyntenyDisplay',

package/src/LinearGraphDisplay/denseWindow.ts

@@ -1,20 +1,6 @@
 import type { SubgraphRegion } from '../GetSubgraph'
 import type { HostWindow } from '../GraphGenomeView/host'
 
-// A cut refused for its node count: the GBZ adapter's own error, marked
-// regionTooLarge so core shows it as a zoom-in notice, or gbz-base's when it
-// reaches the display unwrapped
-export function isNodeLimitError(error: unknown) {
-  return (
-    error instanceof Error &&
-    (error.name === 'NodeLimitError' ||
-      (error as { regionTooLarge?: unknown }).regionTooLarge === true ||
-      /reads more than nodeLimit|^Subgraph size limit of \d+ nodes exceeded/.test(
-        error.message,
-      ))
-  )
-}
-
 // Whether `seen` is near where a cut came back over its node limit. The graph
 // is as dense as that only near it, so the refusal stands for windows as wide
 // or wider on the same contig within one window-width of it.

package/src/LinearGraphDisplay/model.ts

@@ -23,7 +23,8 @@ import RouteIcon from '@mui/icons-material/Route'
 import SettingsIcon from '@mui/icons-material/Settings'
 import { reaction } from 'mobx'
 
-import { denseCovers, isNodeLimitError } from './denseWindow'
+import { isNodeLimitError } from '../nodeLimitError'
+import { denseCovers } from './denseWindow'
 import { cutHolds, hostCut, hostWindow } from '../GraphGenomeView/host'
 import { lenientOptionalEnum } from '../GraphGenomeView/lenientEnum'
 import { GraphPane, formatSpanBp } from '../GraphGenomeView/model'

package/src/WalkTabixSyntenyAdapter/WalkTabixSyntenyAdapter.ts

@@ -11,8 +11,8 @@ import { ObservableCreate } from '@jbrowse/core/util/rxjs'
 import { walksKept } from '@jbrowse/graph-walks'
 
 import { chainFeature, referenceAligner, walkAligner } from './walkLanes.ts'
-import { isNodeLimitError } from '../LinearGraphDisplay/denseWindow.ts'
 import { WalkIndex } from '../RgfaTabixAdapter/walkReader.ts'
+import { isNodeLimitError } from '../nodeLimitError.ts'
 import { PanSNRefNames, openTabixSlot } from '../panSNTabix.ts'
 import { ComparativeAdapterBase } from '../synteny/ComparativeAdapterBase.ts'
 import {

package/src/nodeLimitError.ts

@@ -0,0 +1,12 @@
+// The GBZ adapter's own refusal, marked regionTooLarge so core shows it as a
+// zoom-in notice, or gbz-base's when it reaches the display unwrapped
+export function isNodeLimitError(error: unknown) {
+  return (
+    error instanceof Error &&
+    (error.name === 'NodeLimitError' ||
+      (error as { regionTooLarge?: unknown }).regionTooLarge === true ||
+      /reads more than nodeLimit|^Subgraph size limit of \d+ nodes exceeded/.test(
+        error.message,
+      ))
+  )
+}