jbrowse-plugin-graphgenomeviewer 1.0.0 → 3.0.3

package/src/GraphGenomeView/referenceSpan.test.ts

@@ -0,0 +1,84 @@
+import { convertGFAToGraph } from './gfa/gfaConverter'
+import { buildNeighbors, nodeReferenceSpan } from './referenceSpan'
+import { parseGFA } from '../gfa-core/index'
+
+// The worked example from gfatools/doc/rGFA.md, the same fixture the anchored
+// layout tests use: chr1 runs v1->v2->v3->v4, and foo carries an alternate
+// allele (v5,v6) leaving after v2 and rejoining at v4.
+const RGFA = `S\tv1\tAAAAA\tLN:i:5\tSN:Z:chr1\tSO:i:0\tSR:i:0
+S\tv2\tCCC\tLN:i:3\tSN:Z:chr1\tSO:i:5\tSR:i:0
+S\tv3\tGG\tLN:i:2\tSN:Z:chr1\tSO:i:8\tSR:i:0
+S\tv4\tTTTTTTT\tLN:i:7\tSN:Z:chr1\tSO:i:10\tSR:i:0
+S\tv5\tAC\tLN:i:2\tSN:Z:foo\tSO:i:8\tSR:i:1
+S\tv6\tGTA\tLN:i:3\tSN:Z:foo\tSO:i:10\tSR:i:1
+L\tv1\t+\tv2\t+\t0M
+L\tv2\t+\tv3\t+\t0M
+L\tv3\t+\tv4\t+\t0M
+L\tv2\t+\tv5\t+\t0M
+L\tv5\t+\tv6\t+\t0M
+L\tv6\t+\tv4\t+\t0M`
+
+function setup(gfa: string) {
+  const graph = convertGFAToGraph(parseGFA(gfa))
+  const nodeById = new Map(graph.nodes.map(n => [n.id, n]))
+  const neighbors = buildNeighbors(graph)
+  return (nodeId: string) => nodeReferenceSpan({ nodeId, nodeById, neighbors })
+}
+
+test('a backbone node states its own reference span', () => {
+  const span = setup(RGFA)
+  expect(span('v1+')).toEqual({ start: 0, end: 5 })
+  expect(span('v2+')).toEqual({ start: 5, end: 8 })
+  expect(span('v4+')).toEqual({ start: 10, end: 17 })
+})
+
+// v5/v6's SO is an offset on `foo`, not on chr1, so it has no reference span of
+// its own. The allele leaves after v2 (ends at 8) and rejoins at v4 (starts at
+// 10), so what it replaces on chr1 is 8-10 — which is v3's span, the reference
+// allele of the same bubble.
+test('an off-reference allele resolves to the interval it branches into', () => {
+  const span = setup(RGFA)
+  expect(span('v5+')).toEqual({ start: 8, end: 10 })
+  expect(span('v6+')).toEqual({ start: 8, end: 10 })
+})
+
+// A pure insertion's flanks abut, so there is exactly one reference point to
+// mark. The span collapses to it rather than covering either flank; the linear
+// view floors the drawn width so it stays visible.
+test('an insertion collapses to the reference point it is inserted at', () => {
+  const insertion = `S\tv1\tAAAAA\tLN:i:5\tSN:Z:chr1\tSO:i:0\tSR:i:0
+S\tv2\tCCCCC\tLN:i:5\tSN:Z:chr1\tSO:i:5\tSR:i:0
+S\tins\tGGG\tLN:i:3\tSN:Z:alt\tSO:i:0\tSR:i:1
+L\tv1\t+\tv2\t+\t0M
+L\tv1\t+\tins\t+\t0M
+L\tins\t+\tv2\t+\t0M`
+  expect(setup(insertion)('ins+')).toEqual({ start: 5, end: 5 })
+})
+
+// At the edge of a fetched window a bubble can have only one flank present.
+// Falling back to that flank's own span keeps the highlight in the right place
+// instead of dropping it.
+test('an allele with one flank in the window takes that flank span', () => {
+  const clipped = `S\tv1\tAAAAA\tLN:i:5\tSN:Z:chr1\tSO:i:0\tSR:i:0
+S\talt\tGGG\tLN:i:3\tSN:Z:alt\tSO:i:0\tSR:i:1
+L\tv1\t+\talt\t+\t0M`
+  expect(setup(clipped)('alt+')).toEqual({ start: 0, end: 5 })
+})
+
+test('a node with no backbone anywhere in reach has no reference span', () => {
+  const plain = `S\t1\tACGT
+S\t2\tGGCC
+L\t1\t+\t2\t+\t0M`
+  expect(setup(plain)('1+')).toBeUndefined()
+})
+
+test('an unknown node id has no reference span', () => {
+  expect(setup(RGFA)('nope+')).toBeUndefined()
+})
+
+test('neighbors are undirected, so a bubble is reachable from either flank', () => {
+  const neighbors = buildNeighbors(convertGFAToGraph(parseGFA(RGFA)))
+  expect(neighbors.get('v2+')).toContain('v1+')
+  expect(neighbors.get('v2+')).toContain('v5+')
+  expect(neighbors.get('v4+')).toContain('v6+')
+})

package/src/GraphGenomeView/referenceSpan.ts

@@ -0,0 +1,133 @@
+import { isBackbone } from './anchoredNodes'
+
+import type { Graph, GraphNode } from './types'
+
+// How long an allele chain can be and still be located from both ends. An
+// allele is a run of off-reference segments between two backbone flanks, so the
+// two flanks sit at *different* hop depths from any segment in the middle and
+// the walk has to keep going after it finds the first one. Minigraph alleles are
+// short runs, so this reaches both flanks throughout the fixtures; a longer run
+// degrades to the flanks it did reach rather than to nothing.
+const MAX_BACKBONE_HOPS = 4
+
+export interface ReferenceSpan {
+  start: number
+  end: number
+}
+
+// Undirected adjacency over node ids. Edges carry the topology in both
+// directions for this purpose: finding the backbone a node hangs off doesn't
+// care which way the L line was written.
+export function buildNeighbors(graph: Graph) {
+  const neighbors = new Map<string, string[]>()
+  function add(from: string, to: string) {
+    const list = neighbors.get(from)
+    if (list) {
+      list.push(to)
+    } else {
+      neighbors.set(from, [to])
+    }
+  }
+  for (const edge of graph.edges) {
+    add(edge.from, edge.to)
+    add(edge.to, edge.from)
+  }
+  return neighbors
+}
+
+// The reference interval an allele branches into: between the end of the
+// backbone segment upstream of it and the start of the one downstream.
+// `[min(ends), max(starts)]` picks those two out of the reached flanks without
+// needing to know which is which, and it degrades usefully in both directions —
+// a pure insertion, whose flanks abut, collapses to the single reference point
+// it is inserted at, and a bubble with only one flank inside the window yields
+// that flank's own span.
+function flankingSpan({
+  nodeId,
+  nodeById,
+  neighbors,
+}: {
+  nodeId: string
+  nodeById: Map<string, GraphNode>
+  neighbors: Map<string, string[]>
+}) {
+  const seen = new Set([nodeId])
+  let frontier = [nodeId]
+  let minEnd = Infinity
+  let maxStart = -Infinity
+
+  // Backbone nodes are terminal — they are collected, never queued — so the walk
+  // cannot cross the reference into a neighbouring bubble. It stays inside the
+  // allele it started in and stops on its own at the flanks.
+  for (let hop = 0; hop < MAX_BACKBONE_HOPS && frontier.length > 0; hop++) {
+    const next: string[] = []
+    for (const id of frontier) {
+      const adjacent = neighbors.get(id)
+      if (adjacent) {
+        for (const neighborId of adjacent) {
+          if (!seen.has(neighborId)) {
+            seen.add(neighborId)
+            const neighbor = nodeById.get(neighborId)
+            if (neighbor && isBackbone(neighbor)) {
+              minEnd = Math.min(minEnd, neighbor.stable.start + neighbor.length)
+              maxStart = Math.max(maxStart, neighbor.stable.start)
+            } else {
+              next.push(neighborId)
+            }
+          }
+        }
+      }
+    }
+    frontier = next
+  }
+
+  return minEnd === Infinity
+    ? undefined
+    : {
+        start: Math.min(minEnd, maxStart),
+        end: Math.max(minEnd, maxStart),
+      }
+}
+
+// The reference interval to highlight for a node, in the coordinates of the
+// stable sequence the subgraph was cut from.
+//
+// A rank-0 node states its own, so the interval is exact. A rank>0 allele has
+// none: its SO is an offset on a *different* stable sequence and is not
+// comparable to the reference axis (see the axis note in
+// layout/anchoredLayout.ts), so it is located by the backbone it branches from
+// instead.
+export function nodeReferenceSpan({
+  nodeId,
+  nodeById,
+  neighbors,
+}: {
+  nodeId: string
+  nodeById: Map<string, GraphNode>
+  neighbors: Map<string, string[]>
+}): ReferenceSpan | undefined {
+  const node = nodeById.get(nodeId)
+  return node === undefined
+    ? undefined
+    : isBackbone(node)
+      ? { start: node.stable.start, end: node.stable.start + node.length }
+      : flankingSpan({ nodeId, nodeById, neighbors })
+}
+
+// Every node's midpoint on the reference, keyed by id: what a position-based
+// colour scheme ramps over. Alleles come through the same flanking walk hover
+// sync uses, so a bubble takes the colour of the reference interval it branches
+// from instead of dropping out of the ramp — which is the whole point, since an
+// allele is exactly what a linear view cannot draw at a position of its own.
+export function referenceMidpoints(graph: Graph) {
+  const nodeById = new Map(graph.nodes.map(node => [node.id, node]))
+  const neighbors = buildNeighbors(graph)
+  const midpoints = new Map<string, number>()
+  for (const node of graph.nodes) {
+    const span = nodeReferenceSpan({ nodeId: node.id, nodeById, neighbors })
+    if (span) {
+      midpoints.set(node.id, (span.start + span.end) / 2)
+    }
+  }
+  return midpoints
+}

package/src/GraphGenomeView/renderPasses.bench.ts

@@ -0,0 +1,172 @@
+import { describe, test } from 'vitest'
+
+import { deletionEdges } from './deletionEdges'
+import { graphLabels } from './graphLabels'
+import { buildGeometry, computeReferenceRamp } from './renderer/GeometryBuilder'
+import { EdgeSpatialIndex, SpatialIndex } from './util/SpatialIndex'
+
+import type { Graph, GraphNode, NodeSegment } from './types'
+
+// `pnpm bench`. Not part of `pnpm test`: these assert nothing, they report the
+// cost of the four passes that run while a user is holding the mouse down.
+//
+// Which pass runs when, because the difference is the whole point of the
+// numbers:
+//
+//   graphLabels     every mousemove of a pan, undebounced — it places labels in
+//                   screen space, so a translate genuinely moves them
+//   buildGeometry   once per debounced pan/zoom, and once per frame of a drag
+//   the two indexes lazily, on the first mousemove after the positions move
+//
+// So a millisecond in `graphLabels` costs about ten times what a millisecond in
+// `buildGeometry` does, and both are budgeted against the ~10 ms that
+// agent-docs/GRAPH_SCALE_AND_LOD.md measures a redraw of a 1-2k node cut at.
+//
+// Vitest 5 moved `bench` from a top-level export to a test-context fixture:
+// each measurement is a `test()` that awaits `bench(name, fn).run()`.
+
+// A bubble-chain rGFA: a rank-0 backbone with an alt allele and a bare deletion
+// edge hanging off every other segment. Both anchored layouts draw this shape,
+// and it is what the scale notes above were measured on.
+function benchGraph(backboneCount: number) {
+  const nodes: GraphNode[] = []
+  const edges: Graph['edges'] = []
+  let pos = 0
+  for (let i = 0; i < backboneCount; i++) {
+    const length = 300 + (i % 17) * 40
+    nodes.push({
+      id: `b${i}+`,
+      name: `b${i}`,
+      length,
+      depth: 5,
+      stable: { refName: 'chr1', start: pos, rank: 0 },
+    })
+    pos += length
+    if (i > 0) {
+      edges.push({ from: `b${i - 1}+`, to: `b${i}+` })
+    }
+    if (i % 2 === 1 && i > 1) {
+      nodes.push({
+        id: `a${i}+`,
+        name: `a${i}`,
+        length: 40 + (i % 7) * 11,
+        depth: 2,
+        stable: { refName: `HG${i % 40}#1#chr1`, start: i * 100, rank: 1 },
+      })
+      edges.push({ from: `b${i - 2}+`, to: `a${i}+` })
+      edges.push({ from: `a${i}+`, to: `b${i}+` })
+      edges.push({ from: `b${i - 2}+`, to: `b${i}+` })
+    }
+  }
+  return { name: 'bench', nodes, edges, anchoredBy: 'tags' } satisfies Graph
+}
+
+// The anchored layout's shape: one row per rank, y already in screen px, so the
+// two axes are in different units — the case every `yToX` conversion is for.
+function benchLayout(graph: Graph) {
+  const nodePositions: Record<string, NodeSegment[]> = {}
+  for (const node of graph.nodes) {
+    const { start, rank } = node.stable!
+    nodePositions[node.id] = [
+      { x: start, y: rank * 20 },
+      { x: start + node.length, y: rank * 20 },
+    ]
+  }
+  return nodePositions
+}
+
+const AXIS = { scaleX: 0.01, scaleY: 1 }
+const VIEWPORT = { translateX: 40, translateY: 40, width: 900, height: 600 }
+
+for (const backbone of [1000, 5000]) {
+  const graph = benchGraph(backbone)
+  const nodePositions = benchLayout(graph)
+  const nodeById = new Map(graph.nodes.map(n => [n.id, n]))
+  const nodeLengths = new Map(graph.nodes.map(n => [n.id, n.length]))
+  const deletions = deletionEdges(graph)
+  const bypassed = new Map(deletions.map(d => [d.edgeIndex, d.bypassed]))
+  const referenceRamp = computeReferenceRamp(graph, {
+    start: 0,
+    end: pos(graph),
+  })
+
+  describe(`${graph.nodes.length} nodes / ${graph.edges.length} edges`, () => {
+    // The pan case: same layout, same zoom, a new translate. Everything a frame
+    // can reuse is reused, so this is the number that has to stay small.
+    let tx = VIEWPORT.translateX
+    test('graphLabels (pan)', async ({ bench }) => {
+      await bench('graphLabels (pan)', () => {
+        graphLabels({
+          nodePositions,
+          nodeLengths,
+          deletions,
+          axis: AXIS,
+          ...VIEWPORT,
+          translateX: tx++ % 80,
+        })
+      }).run()
+    })
+
+    // The drag case: the positions moved in place, so nothing carries over.
+    let version = 0
+    test('graphLabels (drag)', async ({ bench }) => {
+      await bench('graphLabels (drag)', () => {
+        graphLabels({
+          nodePositions,
+          nodeLengths,
+          deletions,
+          axis: AXIS,
+          ...VIEWPORT,
+          version: ++version,
+        })
+      }).run()
+    })
+
+    test('buildGeometry', async ({ bench }) => {
+      await bench('buildGeometry', () => {
+        buildGeometry({
+          nodePositions,
+          graph,
+          nodeById,
+          colorScheme: 'reference-position',
+          contigThickness: 10,
+          connectorThickness: 4,
+          drawPaths: false,
+          axis: AXIS,
+          referenceRamp,
+          deletions: bypassed,
+        })
+      }).run()
+    })
+
+    // Once per graph, feeding the pass above.
+    test('computeReferenceRamp', async ({ bench }) => {
+      await bench('computeReferenceRamp', () => {
+        computeReferenceRamp(graph, { start: 0, end: pos(graph) })
+      }).run()
+    })
+
+    test('SpatialIndex (nodes)', async ({ bench }) => {
+      await bench('SpatialIndex (nodes)', () => {
+        new SpatialIndex(nodePositions)
+      }).run()
+    })
+
+    test('EdgeSpatialIndex', async ({ bench }) => {
+      await bench('EdgeSpatialIndex', () => {
+        new EdgeSpatialIndex(
+          nodePositions,
+          graph,
+          false,
+          AXIS,
+          undefined,
+          bypassed,
+        )
+      }).run()
+    })
+  })
+}
+
+function pos(graph: Graph) {
+  return graph.nodes.reduce((sum, n) => sum + n.length, 0)
+}

package/src/GraphGenomeView/renderPipeline.test.ts

@@ -0,0 +1,226 @@
+import stateModelFactory from './model'
+import { MAX_PATH_COLORS } from './pathColors'
+
+import type { RenderBatch, Renderer } from './renderer/types'
+
+const mockRpcCall = vi.fn()
+const mockSession = {
+  tracks: [] as { trackId: string; [key: string]: unknown }[],
+  rpcManager: { call: mockRpcCall },
+  assemblyNames: [] as string[],
+  views: [] as unknown[],
+  addView() {
+    return { id: 'view-1' }
+  },
+}
+
+vi.mock('@jbrowse/core/util', () => ({
+  getSession: () => mockSession,
+  isSessionModelWithWidgets: () => false,
+  parseLocString: () => ({}),
+  getEnv: () => ({}),
+  useWidthSetter: () => {},
+  measureText: () => 0,
+  IntervalTree: class {},
+  getSnapshot: () => ({}),
+  applySnapshot: () => {},
+  objectHash: () => '',
+}))
+
+// Partial, not wholesale: core modules pulled in transitively (BaseFeatureWidget's
+// config schema) call ConfigurationSchema at module-eval time.
+vi.mock(import('@jbrowse/core/configuration'), async importOriginal => ({
+  ...(await importOriginal()),
+  readConfObject: vi.fn(),
+}))
+
+const GFA = 'H\tVN:Z:1.0\nS\t1\tACGT\nS\t2\tGGCC\nL\t1\t+\t2\t+\t0M\n'
+
+// A layout whose extent dwarfs the pane, which is what every real force layout
+// produces: bandageAutoScale sizes a drawing in tens of thousands of FMMM units
+// and zoom-to-fit is what brings it on screen.
+const WIDE_LAYOUT = {
+  nodePositions: {
+    '1+': [
+      { x: 0, y: 0 },
+      { x: 40000, y: 0 },
+    ],
+    '1-': [
+      { x: 0, y: 30000 },
+      { x: 40000, y: 30000 },
+    ],
+    '2+': [
+      { x: 50000, y: 0 },
+      { x: 90000, y: 0 },
+    ],
+    '2-': [
+      { x: 50000, y: 30000 },
+      { x: 90000, y: 30000 },
+    ],
+  },
+}
+
+function fakeRenderer(uploads: RenderBatch[]) {
+  const renderer: Renderer = {
+    resize: () => {},
+    uploadGeometry: (batch: RenderBatch) => {
+      uploads.push(batch)
+    },
+    updateTransform: () => {},
+    render: () => {},
+    setNodeHighlights: () => {},
+    setEdgeHighlight: () => {},
+    destroy: () => {},
+  } as unknown as Renderer
+  return renderer
+}
+
+// Regression: a graph whose layout is much larger than the pane drew a blank
+// canvas on the whole-file import path. buildGeometry culls to a viewport
+// derived from the *current* transform, read untracked, so the build that runs
+// before zoom-to-fit lands sees a pane-sized window of a 90,000-unit drawing
+// and discards every node. Whether anything rebuilt afterwards decided whether
+// the user saw the graph or an empty white pane, and on the 4,749-node HPRC
+// chrM pggb graph they saw the pane.
+test('a layout larger than the pane still uploads geometry', async () => {
+  mockRpcCall.mockImplementation((_id: string, method: string) =>
+    method === 'GraphComputeLayout'
+      ? Promise.resolve({ result: WIDE_LAYOUT, duration: 5 })
+      : Promise.reject(new Error(`Unexpected RPC: ${method}`)),
+  )
+  const model = stateModelFactory().create({ type: 'GraphGenomeView' })
+  const uploads: RenderBatch[] = []
+  // The mount order the app actually has: the canvas is rendered only once
+  // `hasGraph` is true, so the graph and its layout exist *before* any autorun
+  // is installed, and the width lands after the canvas is measured.
+  await model.loadGFA(GFA, 'wide')
+  model.startRenderingBackend(fakeRenderer(uploads))
+  model.setWidth(1000)
+  // past the pan/zoom debounce, so any rebuild it would have scheduled has run
+  await new Promise(resolve => setTimeout(resolve, 400))
+
+  expect(uploads.length).toBeGreaterThan(0)
+  expect(uploads.at(-1)!.nodeStrokes.length).toBeGreaterThan(0)
+})
+
+const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+
+async function drawnModel() {
+  mockRpcCall.mockImplementation((_id: string, method: string) =>
+    method === 'GraphComputeLayout'
+      ? Promise.resolve({ result: WIDE_LAYOUT, duration: 5 })
+      : Promise.reject(new Error(`Unexpected RPC: ${method}`)),
+  )
+  const model = stateModelFactory().create({ type: 'GraphGenomeView' })
+  await model.loadGFA(GFA, 'wide')
+  model.startRenderingBackend(fakeRenderer([]))
+  model.setWidth(1000)
+  // past the zoom-to-fit autorun and the pan/zoom debounce, so the transform
+  // has stopped moving on its own before a test moves it
+  await sleep(400)
+  return model
+}
+
+// jbrowse-components' `installClearHoverOnViewportChange` rule, on this view's
+// own three axes. A hover is set by a mousemove; a wheel zoom, a toolbar zoom
+// and a pan all move the drawing under a stationary cursor and fire no pointer
+// event, so without this the tooltip goes on naming a node that has moved away
+// and `hoverHighlight` goes on publishing its span to the paired linear view.
+test('a zoom drops a hover the pointer can no longer be over', async () => {
+  const model = await drawnModel()
+  model.setHoveredNode('1+')
+  model.setHoveredEdge(0)
+  model.setSelectedNode('1+')
+
+  model.zoom(1.5, 100, 100)
+
+  expect(model.hoveredNode).toBeNull()
+  expect(model.hoveredEdge).toBeNull()
+  // A click is a choice, and the content moving does not unmake it.
+  expect(model.selectedNode).toBe('1+')
+})
+
+test('a pan drops it too', async () => {
+  const model = await drawnModel()
+  model.setHoveredNode('1+')
+  model.setTransform(model.scale, model.translateX + 40, model.translateY)
+  expect(model.hoveredNode).toBeNull()
+})
+
+// The two signals name different events and are read by different consumers:
+// `viewportDirty` says the window onto the drawing moved past what was built,
+// `positionsVersion` says the drawing itself did. Conflating them rebuilt a
+// 12k-edge hit index on the first mousemove after every pan, for an index that
+// is in layout units and had not changed.
+test('a pan past the built window moves the viewport signal and a node drag moves the positions one', async () => {
+  const model = await drawnModel()
+  const dirty = model.viewportDirty
+  const positions = model.positionsVersion
+
+  model.setTransform(model.scale, model.translateX + 5 * model.width, 0)
+  await sleep(300)
+  expect(model.viewportDirty).toBeGreaterThan(dirty)
+  expect(model.positionsVersion).toBe(positions)
+
+  model.moveNode('1+', 10, 10)
+  await sleep(100)
+  expect(model.positionsVersion).toBe(positions + 1)
+})
+
+// A build covers a pane on every side of the one shown, so an ordinary pan is
+// a repaint of strokes already uploaded: no debounce, no blank margin, no
+// rebuild. A zoom changes what the strokes are and rebuilds however small.
+test('a pan inside the built window rebuilds nothing, a zoom always does', async () => {
+  const model = await drawnModel()
+  const dirty = model.viewportDirty
+
+  model.setTransform(model.scale, model.translateX + 40, model.translateY + 40)
+  await sleep(300)
+  expect(model.viewportDirty).toBe(dirty)
+
+  model.zoom(1.01, 100, 100)
+  await sleep(300)
+  expect(model.viewportDirty).toBe(dirty + 1)
+})
+
+// The three consumers of a path colour disagreed about how many paths is too
+// many: only the node stripes stopped. A Minigraph-Cactus cut writes one W
+// record per haplotype and walks every backbone link with all of them, so the
+// two that did not stop drew a stroke per path per edge — measured at 99,800
+// strokes and 64 ms of geometry for 200 paths over 499 links — under a key
+// hundreds of rows tall, naming stripes that were not drawn.
+function pathGFA(count: number) {
+  const paths = Array.from(
+    { length: count },
+    (_, i) => `P\tHG${i}#1#chr\t1+,2+\t*`,
+  ).join('\n')
+  return `H\tVN:Z:1.0\nS\t1\tACGT\nS\t2\tGGCC\nL\t1\t+\t2\t+\t0M\n${paths}\n`
+}
+
+async function pathModel(count: number) {
+  mockRpcCall.mockImplementation((_id: string, method: string) =>
+    method === 'GraphComputeLayout'
+      ? Promise.resolve({ result: WIDE_LAYOUT, duration: 5 })
+      : Promise.reject(new Error(`Unexpected RPC: ${method}`)),
+  )
+  const model = stateModelFactory().create({ type: 'GraphGenomeView' })
+  await model.loadGFA(pathGFA(count), 'paths')
+  model.setDrawPaths(true)
+  return model
+}
+
+test('at the colour cap the paths are drawn and named', async () => {
+  const model = await pathModel(MAX_PATH_COLORS)
+  expect(model.pathCount).toBe(MAX_PATH_COLORS)
+  expect(model.effectiveDrawPaths).toBe(true)
+  expect(model.pathLegend).toHaveLength(MAX_PATH_COLORS)
+})
+
+test('past it the whole of drawPaths resolves off, key included', async () => {
+  const model = await pathModel(MAX_PATH_COLORS + 1)
+  expect(model.pathCount).toBe(MAX_PATH_COLORS + 1)
+  // the switch keeps the user's choice; what the drawing does with it is here
+  expect(model.drawPaths).toBe(true)
+  expect(model.effectiveDrawPaths).toBe(false)
+  expect(model.pathLegend).toEqual([])
+})