jbrowse-plugin-graphgenomeviewer 7.1.2 → 7.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jbrowse-plugin-graphgenomeviewer",
-  "version": "7.1.2",
+  "version": "7.1.4",
   "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": {
@@ -98,7 +98,7 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:e2e": "vitest run --config vitest.e2e.config.ts",
-    "preversion": "node scripts/ci-green.mjs && pnpm lint && pnpm format:check && pnpm typecheck && pnpm typecheck:tests && pnpm test && pnpm build && pnpm host-names && pnpm host-compat",
+    "preversion": "node scripts/ci-green.mjs && pnpm build && pnpm host-names && pnpm host-compat",
     "version": "node scripts/version.mjs",
     "postversion": "git push --atomic --follow-tags"
   }

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/GraphAddTrackWorkflow/buildTrackConfig.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 
 import { buildTrackConfig } from './buildTrackConfig'
-import { withGbzAnchor } from '../graphTrackDefaults/index'
+import { withLaneAnchor } from '../graphTrackDefaults/index'
 
 const segs = {
   uri: 'https://example.com/hprc.segs.bed.gz',
@@ -225,7 +225,7 @@ describe('buildTrackConfig', () => {
       name: 'HPRC graph',
     })
     expect(conf.type).toBe('GraphTrack')
-    expect(withGbzAnchor(conf).adapter).toEqual({
+    expect(withLaneAnchor(conf).adapter).toEqual({
       type: 'GbzBaseSyntenyAdapter',
       gbzDbLocation: uri('hprc.gbz.db'),
       assemblyNames: ['hg38'],

package/src/GraphGenomeView/components/GraphCanvas.test.tsx

@@ -0,0 +1,108 @@
+import { types } from '@jbrowse/mobx-state-tree'
+import { act, render } from '@testing-library/react'
+
+import { Legends } from './GraphCanvas'
+
+import type { GraphPaneModel } from '../model'
+
+vi.mock('./Legend', () => ({ LegendPanel: () => null }))
+
+const Pane = types
+  .model({
+    hoveredNode: types.maybeNull(types.string),
+    hoveredRowWalks: types.array(types.string),
+    legendSize: types.frozen({ width: 0, height: 0 }),
+  })
+  .views(self => ({
+    get legendAtRest() {
+      return self.hoveredNode === null && self.hoveredRowWalks.length === 0
+    },
+    get referenceStripZonePx() {
+      return 0
+    },
+  }))
+  .actions(self => ({
+    setLegendSize(size: { width: number; height: number }) {
+      self.legendSize = size
+    },
+    setHoveredNode(id: string | null) {
+      self.hoveredNode = id
+    },
+    setHoveredRowWalks(walks: string[]) {
+      self.hoveredRowWalks.replace(walks)
+    },
+  }))
+
+let size = { width: 0, height: 0 }
+let resized = () => {}
+
+beforeEach(() => {
+  vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockImplementation(
+    () => size.width,
+  )
+  vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(
+    () => size.height,
+  )
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      constructor(callback: () => void) {
+        resized = callback
+      }
+      observe() {}
+      disconnect() {
+        resized = () => {}
+      }
+    },
+  )
+})
+
+afterEach(() => {
+  vi.restoreAllMocks()
+  vi.unstubAllGlobals()
+})
+
+function shown() {
+  size = { width: 120, height: 40 }
+  const model = Pane.create({})
+  render(<Legends model={model as unknown as GraphPaneModel} />)
+  act(() => {
+    resized()
+  })
+  return model
+}
+
+function resize(width: number, height: number) {
+  size = { width, height }
+  act(() => {
+    resized()
+  })
+}
+
+test('a lane-row hover leaves the measured legend as it was', () => {
+  const model = shown()
+  expect(model.legendSize).toEqual({ width: 120, height: 40 })
+  act(() => {
+    model.setHoveredRowWalks(['HG00097#1'])
+  })
+  resize(120, 72)
+  expect(model.legendSize).toEqual({ width: 120, height: 40 })
+  act(() => {
+    model.setHoveredRowWalks([])
+  })
+  resize(120, 40)
+  expect(model.legendSize).toEqual({ width: 120, height: 40 })
+})
+
+test('a legend that grows during a node hover is measured when the hover ends', () => {
+  const model = shown()
+  act(() => {
+    model.setHoveredNode('1+')
+  })
+  resize(120, 90)
+  expect(model.legendSize).toEqual({ width: 120, height: 40 })
+  act(() => {
+    model.setHoveredNode(null)
+  })
+  expect(model.legendSize).toEqual({ width: 120, height: 90 })
+})

package/src/GraphGenomeView/components/GraphCanvas.tsx

@@ -152,30 +152,33 @@ const deletionLabelStyle = {
 // Measures itself for the model, so no label is placed under a legend and
 // none gives way to one that is not drawn.
 //
-// At rest only: the walk keys' hover readout would otherwise refit the view,
-// and the refit clears the hover that grew it
-const Legends = observer(function Legends({
+// At rest only, and again on returning to rest: a hover's walk keys would
+// otherwise refit the view, and the refit clears the hover that grew them
+export const Legends = observer(function Legends({
   model,
 }: {
   model: GraphPaneModel
 }) {
   const ref = useRef<HTMLDivElement>(null)
+  const atRest = model.legendAtRest
   useEffect(() => {
     const el = ref.current
-    if (!el) {
+    if (!el || !atRest) {
       return
     }
     // the last callback can land after the track is closed
-    const observer = new ResizeObserver(() => {
-      if (isAlive(model) && model.hoveredNode === null) {
+    const measure = () => {
+      if (isAlive(model) && model.legendAtRest) {
         model.setLegendSize({ width: el.offsetWidth, height: el.offsetHeight })
       }
-    })
+    }
+    measure()
+    const observer = new ResizeObserver(measure)
     observer.observe(el)
     return () => {
       observer.disconnect()
     }
-  }, [model])
+  }, [model, atRest])
   return (
     <div
       ref={ref}

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>
+  )
+}