jbrowse-plugin-graphgenomeviewer 7.1.0 → 7.1.2

package/src/GraphGenomeView/repeats/walkCalls.test.ts

@@ -143,3 +143,21 @@ test('a phased allele pairs with its own haplotype, not by length', () => {
   })
   expect(lone[0]!.call).toBeUndefined()
 })
+
+// A haplotype's walk broken across two contigs makes two rows of one
+// haplotype, and its phased allele goes to the one walk across the array.
+test("a phased allele goes to one of its haplotype's walks", () => {
+  const piece = (bp: number, complete: boolean) => ({
+    ...walk('HG1', bp, complete),
+    haplotype: 1,
+  })
+  const call = { bp: 3100, spanningReads: 4, haplotype: 1 }
+  const rows = withCalls([piece(900, false), piece(3161, true)], {
+    HG1: calls(call),
+  })
+  expect(rows.map(r => r.call?.bp)).toEqual([undefined, 3100])
+  const both = withCalls([piece(400, true), piece(3161, true)], {
+    HG1: calls(call),
+  })
+  expect(both.map(r => r.call?.agrees)).toEqual([undefined, true])
+})

package/src/GraphGenomeView/repeats/walkCalls.ts

@@ -14,7 +14,7 @@ import type { RepeatCall } from './repeatFeatures'
 // the array take the allele that fit one spanning it, and the spanning walk
 // then read as a disagreement.
 
-export interface WalkCall extends RepeatCall {
+interface WalkCall extends RepeatCall {
   // undefined where the walk and the allele are not both measurements
   agrees?: boolean
 }
@@ -74,50 +74,53 @@ function scored(row: { bp: number; complete: boolean }, call: RepeatCall) {
   }
 }
 
-// A phased genotype names its walk's haplotype outright. The rest go by
-// length: the walks that span the array against the alleles reads spanned,
-// then everything else against what those two left. That decides the
-// ambiguous cases on merit: which walk carries the one allele a lone spanning
-// read supports, and which allele a walk that stops inside the array is drawn
-// against.
+// A phased genotype names its walk's haplotype outright, though a contig
+// break can give that haplotype two walks. Within a haplotype, and among the
+// unphased alleles, pairing goes by length: the walks that span the array
+// against the alleles reads spanned, then everything else against what those
+// two left. That decides the ambiguous cases on merit: which walk takes the
+// one allele a lone spanning read supports, and which allele a walk that stops
+// inside the array is drawn against.
 function pairSample<
   R extends { bp: number; complete: boolean; haplotype?: number },
 >(rows: R[], calls: RepeatCall[]) {
   const out = new Map<number, WalkCall>()
   const taken = new Set<RepeatCall>()
-  rows.forEach((row, i) => {
-    const call = calls.find(
-      c => c.haplotype !== undefined && c.haplotype === row.haplotype,
-    )
-    if (call) {
-      taken.add(call)
-      out.set(i, scored(row, call))
-    }
-  })
-  const unphased = calls.filter(call => call.haplotype === undefined)
   const ranked = byLength(rows, r => r.bp)
-  const stages = [
-    [ranked.filter(r => r.item.complete), unphased.filter(backed)],
-    [ranked, unphased],
-  ] as const
-  for (const [pool, group] of stages) {
-    const free = pool.filter(r => !out.has(r.i))
-    const open = byLength(
-      group.filter(call => !taken.has(call)),
-      call => call.bp,
+  const pair = (pool: typeof ranked, group: RepeatCall[]) => {
+    const stages = [
+      [pool.filter(r => r.item.complete), group.filter(backed)],
+      [pool, group],
+    ] as const
+    for (const [walks, alleles] of stages) {
+      const free = walks.filter(r => !out.has(r.i))
+      const open = byLength(
+        alleles.filter(call => !taken.has(call)),
+        call => call.bp,
+      )
+      nearest(
+        free.map(r => r.item.bp),
+        open.map(c => c.item.bp),
+      ).forEach((pick, k) => {
+        if (pick !== undefined) {
+          const row = free[k]!
+          const call = open[pick]!.item
+          taken.add(call)
+          out.set(row.i, scored(row.item, call))
+        }
+      })
+    }
+  }
+  for (const haplotype of new Set(calls.flatMap(c => c.haplotype ?? []))) {
+    pair(
+      ranked.filter(r => r.item.haplotype === haplotype),
+      calls.filter(c => c.haplotype === haplotype),
     )
-    nearest(
-      free.map(r => r.item.bp),
-      open.map(c => c.item.bp),
-    ).forEach((pick, k) => {
-      if (pick !== undefined) {
-        const row = free[k]!
-        const call = open[pick]!.item
-        taken.add(call)
-        out.set(row.i, scored(row.item, call))
-      }
-    })
   }
+  pair(
+    ranked,
+    calls.filter(c => c.haplotype === undefined),
+  )
   return out
 }
 
@@ -135,7 +138,12 @@ export function withCalls<
   const paired = new Map<R, WalkCall>()
   const bySample = new Map<string, R[]>()
   for (const row of rows) {
-    bySample.set(row.sample, [...(bySample.get(row.sample) ?? []), row])
+    const group = bySample.get(row.sample)
+    if (group) {
+      group.push(row)
+    } else {
+      bySample.set(row.sample, [row])
+    }
   }
   for (const [sample, group] of bySample) {
     const called = calls[sample]

package/src/GraphGenomeView/subgraphLoad.test.ts

@@ -7,7 +7,8 @@ const mockSession = {
   tracks: [] as Record<string, unknown>[],
   rpcManager: { call: mockRpcCall },
   assemblyManager: {
-    has: () => false,
+    has: (_name: string) => false,
+    get: (_name: string) => undefined as { name: string } | undefined,
     assemblyList: [] as { name: string; aliases: string[] }[],
   },
 }
@@ -41,6 +42,11 @@ vi.mock(import('@jbrowse/core/configuration'), async importOriginal => ({
     ),
 }))
 
+const mockReadFile = vi.hoisted(() => vi.fn())
+vi.mock('@jbrowse/core/util/io', () => ({
+  openLocation: () => ({ readFile: mockReadFile }),
+}))
+
 // pangenome_hprc's segments track once NA20809 haplotype 2 is loaded
 const TRACK = {
   trackId: 'segments',
@@ -98,6 +104,8 @@ async function cut(region: typeof ON_HG38, gfa = GFA) {
 beforeEach(() => {
   mockRpcCall.mockReset()
   mockSession.tracks = [TRACK]
+  mockSession.assemblyManager.has = () => false
+  mockSession.assemblyManager.get = () => undefined
   mockSession.assemblyManager.assemblyList = []
 })
 
@@ -116,6 +124,17 @@ test('a cut on another assembly the track names is refused, naming the reference
   expect(mockRpcCall).not.toHaveBeenCalled()
 })
 
+test("a track naming its reference by an alias of the region's assembly cuts it", async () => {
+  mockSession.tracks = [{ ...TRACK, assemblyNames: ['GRCh38', 'NA20809.2'] }]
+  const hg38 = { name: 'hg38', aliases: ['GRCh38'] }
+  const known = (name: string) => name === 'hg38' || name === 'GRCh38'
+  mockSession.assemblyManager.has = known
+  mockSession.assemblyManager.get = name => (known(name) ? hg38 : undefined)
+  const model = await cut(ON_HG38)
+  expect(model.error).toBeUndefined()
+  expect(model.nodeCount).toBe(3)
+})
+
 test('a cut that finds no segments is an error, not an empty graph', async () => {
   const model = await cut(ON_HG38, 'H\tVN:Z:1.0')
   expect(String(model.error)).toMatch(/No graph segments/)
@@ -300,11 +319,11 @@ describe('reads', () => {
     secondary: false,
   }
 
-  async function cutWithReads(reads: () => Promise<unknown>) {
+  async function cutWithReads(reads: () => Promise<unknown>, gfa = PATHS) {
     mockSession.tracks = [READS_TRACK]
     mockRpcCall.mockImplementation((_sid: unknown, method: string) =>
       method === 'GetSubgraph'
-        ? Promise.resolve(PATHS)
+        ? Promise.resolve(gfa)
         : method === 'GetGraphReads'
           ? reads()
           : Promise.reject(new Error(`Unexpected RPC: ${method}`)),
@@ -343,6 +362,51 @@ describe('reads', () => {
     expect(model.colorSchemeLock?.value).toBe('By strand')
   })
 
+  // the panels draw no reads, so the boxes take the scheme picked
+  test('a tube map split into panels colours its boxes beside reads', async () => {
+    const model = await cutWithReads(
+      () => Promise.resolve({ records: [READ], total: 1 }),
+      PATHS.replace('P\talt', 'P\tA#1#c').concat('\nP\tB#1#c\t1+,2+,4+\t*'),
+    )
+    expect(model.tubeMapReads).toBe(true)
+    model.setFacet('sample')
+    await model.recomputeLayout()
+    model.setColorScheme('reference-position')
+    expect(model.layoutResult?.tubeMapPanels).toHaveLength(2)
+    expect(model.tubeMapReads).toBe(false)
+    expect(model.colorSchemeLock).toBeUndefined()
+    expect(model.effectiveColorScheme).toBe('reference-position')
+  })
+
+  // the reads take the reds and blues, so the tubes keep their greys, which
+  // the key names walk by walk
+  test('beside reads a tube colour column leaves the key naming each walk', async () => {
+    const model = await cutWithReads(() =>
+      Promise.resolve({ records: [READ], total: 1 }),
+    )
+    mockSession.tracks = [
+      {
+        ...READS_TRACK,
+        adapter: {
+          ...READS_TRACK.adapter,
+          samplesTsvLocation: {
+            uri: 'samples.tsv',
+            locationType: 'UriLocation',
+          },
+        },
+      },
+    ]
+    mockReadFile.mockResolvedValue('name\tpopulation\nalt\tYRI\n')
+    await model.loadWalkRowSampleTable()
+    model.setTubeMapColorBy('population')
+    expect(model.tubeMapColoring?.field).toBe('population')
+    expect(model.tubeMapKeys.values).toBeUndefined()
+    expect(model.pathLegend.map(e => [e.name, e.color])).toEqual([
+      ['hg38', model.tubeMapTubeColors![0]],
+      ['alt', model.tubeMapTubeColors![1]],
+    ])
+  })
+
   // A tube map draws the window alone, so its ramp key speaks for its boxes:
   // h0 is an allele before the window that the tube map trims away
   test("a tube map's ramp key names no node the window trimmed away", async () => {

package/src/GraphGenomeView/trackFeatures.ts

@@ -0,0 +1,24 @@
+import type { Feature } from '@jbrowse/core/util'
+
+export type FeatureLike = Feature | Record<string, unknown>
+
+export function ownField(f: FeatureLike, name: string): unknown {
+  return typeof (f as Feature).get === 'function'
+    ? (f as Feature).get(name)
+    : (f as Record<string, unknown>)[name]
+}
+
+export interface TrackChoice {
+  trackId: string
+  name?: string
+  adapterType: string
+}
+
+export function namedTrack<T extends TrackChoice>(tracks: T[], named: string) {
+  return tracks.find(t => t.trackId === named)
+}
+
+// what a track-name hint such as /repeat|tandem/ is matched against
+export function trackLabel(t: TrackChoice) {
+  return `${t.trackId} ${t.name ?? ''}`
+}

package/src/GraphGenomeView/tubeMapPanels.ts

@@ -4,6 +4,8 @@ import { pathOrigin } from '@jbrowse/bandage-core/pathAnchoring'
 import { drawTubeMapHighlight } from '@jbrowse/bandage-core/tubeMap/draw'
 import { groupKeyComparator } from '@jbrowse/core/util/groupKeys'
 
+import { columnValueOf, groupsByColumn, plural } from './walkRowGroups'
+
 import type { SampleRow } from './walkRowGroups'
 import type { FacetBy } from '@jbrowse/bandage-core/facetGrid'
 import type { TubeMapDrawing } from '@jbrowse/bandage-core/layout/tubeMapLayout'
@@ -115,57 +117,47 @@ export function valueTubeColors(
   })
 }
 
-// A walk's value in a column: its haplotype's row (`HG00097#1`), else its
-// sample's, as groupWalkRows reads it
+// A PanSN walk's value in a column
 export function columnKeyOf(field: string, table: SampleRow[]) {
-  const valueOf = new Map(table.map(row => [row.name, row[field] ?? '']))
+  const valueOf = columnValueOf(field, table)
   return (walk: string) => {
     const { sample, haplotype } = parsePanSN(walk)
-    return valueOf.get(`${sample}#${haplotype}`) || valueOf.get(sample) || ''
+    return valueOf(`${sample}#${haplotype}`, sample)
   }
 }
 
-function plural(n: number, noun: string) {
-  return `${n} ${noun}${n === 1 ? '' : 's'}`
-}
-
 // Each non-reference walk's group
 export function tubeMapPanelGroups(
   graph: Graph,
   split: TubeMapPanelSplit,
 ): TubeMapPanelGroup[] {
+  const names = (graph.paths ?? [])
+    .map(p => p.name)
+    .filter(name => walkOf(name) !== graph.referencePath)
+  if (split.by === 'column') {
+    const keyOf = columnKeyOf(split.field, split.table)
+    return groupsByColumn(
+      names,
+      name => keyOf(walkOf(name)),
+      split,
+      'sample',
+      name => parsePanSN(walkOf(name)).sample,
+    ).map(({ key, members, title }) => ({ key, paths: members, label: title }))
+  }
   const keyOf =
-    split.by === 'column'
-      ? columnKeyOf(split.field, split.table)
-      : split.by === 'sample'
-        ? (walk: string) => parsePanSN(walk).sample
-        : (walk: string) => walk
+    split.by === 'sample'
+      ? (walk: string) => parsePanSN(walk).sample
+      : (walk: string) => walk
   const groups = new Map<string, string[]>()
-  for (const { name } of graph.paths ?? []) {
-    const walk = walkOf(name)
-    if (walk !== graph.referencePath) {
-      const key = keyOf(walk)
-      const list = groups.get(key)
-      if (list) {
-        list.push(name)
-      } else {
-        groups.set(key, [name])
-      }
+  for (const name of names) {
+    const key = keyOf(walkOf(name))
+    const list = groups.get(key)
+    if (list) {
+      list.push(name)
+    } else {
+      groups.set(key, [name])
     }
   }
-  if (split.by === 'column') {
-    return [...groups.keys()]
-      .sort(groupKeyComparator(split.domain))
-      .map(key => {
-        const paths = groups.get(key)!
-        const samples = new Set(paths.map(p => parsePanSN(walkOf(p)).sample))
-        return {
-          key,
-          paths,
-          label: `${key || `${split.field}: none`} · ${plural(samples.size, 'sample')}`,
-        }
-      })
-  }
   const domain = split.domain ?? []
   const rank = new Map(domain.map((key, i) => [key, i]))
   const listed = (key: string) => rank.get(key) ?? domain.length

package/src/GraphGenomeView/viewModel.ts

@@ -1,4 +1,3 @@
-import { cutsWholeWalks as wholeWalksRule } from '@jbrowse/bandage-core/layout/walkStrip'
 import {
   LAYOUT_MODE_VALUES,
   layoutModeByValue,
@@ -8,20 +7,9 @@ import { getSession } from '@jbrowse/core/util'
 import { addDisposer, types } from '@jbrowse/mobx-state-tree'
 import { reaction } from 'mobx'
 
-import {
-  GraphPaneMixin,
-  MAX_GRAPH_REGION_BP,
-  fileName,
-  formatSpanBp,
-} from './model'
-import {
-  configHaplotypes,
-  graphReferenceAssembly,
-  offReferenceProblem,
-} from '../graphTrackConfig'
 import { HOVER_HIGHLIGHT_VALUES } from './hoverHighlight'
 import { lenientMaybeEnum } from './lenientEnum'
-import { trackAdapterConfig } from '../panSNAliases/trackAdapterConfig'
+import { GraphPane, fileName, formatSpanBp } from './model'
 
 import type { GraphLayers } from './graphLayers'
 import type { NodeColor } from './nodeColor'
@@ -39,7 +27,7 @@ export default function stateModelFactory() {
     .compose(
       'GraphGenomeView',
       BaseViewModel,
-      GraphPaneMixin(),
+      GraphPane,
       types.model({
         type: types.literal('GraphGenomeView'),
         // a whole GFA the view loads on attach, kept so the source round-trips
@@ -51,9 +39,6 @@ export default function stateModelFactory() {
         // sessions and the docs' figure specs state it. Following the linear
         // view is the track's job (LinearGraphDisplay).
         loadedTrackId: types.optional(types.string, ''),
-        subgraphContext: types.optional(types.number, 1),
-        subgraphHaplotypes: types.maybe(types.frozen<string[]>()),
-        maxRegionBp: types.optional(types.number, MAX_GRAPH_REGION_BP),
         // unset is force
         layoutMode: lenientMaybeEnum(LAYOUT_MODE_VALUES),
         color: types.maybe(types.frozen<NodeColor>()),
@@ -107,16 +92,6 @@ export default function stateModelFactory() {
       get paneMeasured() {
         return self.widthMeasured
       },
-      // the set stated, else the source track's defaultHaplotypes
-      get cutHaplotypes() {
-        const track = this.sourceTrack
-        return (
-          self.subgraphHaplotypes ??
-          (track
-            ? configHaplotypes(trackAdapterConfig(self, track))
-            : undefined)
-        )
-      },
       get sourceGfaLocation() {
         return self.gfaLocation
       },
@@ -163,15 +138,10 @@ export default function stateModelFactory() {
           if (!self.loadedTrackId || !region) {
             return
           }
-          const track = self.sourceTrack
+          const adapter = self.sourceAdapter
           const span = region.end - region.start
-          const problem = track
-            ? offReferenceProblem(
-                graphReferenceAssembly(track),
-                region.assemblyName,
-              )
-            : undefined
-          if (!track) {
+          const problem = self.offReference(region)
+          if (!adapter) {
             self.setError(
               new Error(
                 `The track this graph was cut from, "${self.loadedTrackId}", is not in this session`,
@@ -186,16 +156,7 @@ export default function stateModelFactory() {
               ),
             )
           } else {
-            return self.cutSubgraph(trackAdapterConfig(self, track), region, {
-              hops: self.subgraphContext,
-              haplotypes: self.cutHaplotypes,
-              ...(self.chosenLayoutMode === 'walkrows'
-                ? { walkRows: true }
-                : {}),
-              ...(self.cutsWholeWalks
-                ? { snarls: 'overlapping' as const }
-                : {}),
-            })
+            return self.cutSubgraph(adapter, region, self.cutOptions)
           }
           return undefined
         },
@@ -205,18 +166,9 @@ export default function stateModelFactory() {
       retryLoad() {
         void self.load()
       },
-      // walk rows, and the strip of them under a node layout, measure whole
-      // walks, which a GBZ cut only follows when asked, so a change in whether
-      // the drawing needs them cuts the track again; the strip's toggle does
-      // the same (afterAttach)
+      // the strip's toggle cuts the track again too (afterAttach)
       relayoutFrom(from: LayoutModeValue) {
-        const before = wholeWalksRule(layoutModeByValue(from), {
-          walkStrip: self.walkStrip,
-          host: !!self.host,
-        })
-        return self.loadedTrackId &&
-          (self.cutsWholeWalks !== before ||
-            (from === 'walkrows') !== (self.chosenLayoutMode === 'walkrows'))
+        return self.loadedTrackId && self.cutChangedFrom(from)
           ? self.load()
           : self.recomputeLayout()
       },

package/src/GraphGenomeView/walkRowGroups.ts

@@ -1,5 +1,12 @@
+import { walkRowsTree } from '@jbrowse/bandage-core/layout/walkRowDraw'
 import { groupKeyComparator } from '@jbrowse/core/util/groupKeys'
 
+import type { El } from '@jbrowse/bandage-core/el'
+import type {
+  WalkRowsFrame,
+  WalkRowsWithCalls,
+} from '@jbrowse/bandage-core/layout/walkRowDraw'
+
 // Walk rows stacked into one section per value of a sample table's column,
 // as jbrowse-plugin-tandem-repeat's "Group by…" stacks its alleles. Placement
 // here, not in bandage-core's walkRowsTree, which puts row i at i * rowPx.
@@ -71,46 +78,71 @@ export function groupByOf(value: unknown): WalkRowGroupBy | undefined {
     : { field }
 }
 
-function haplotypes(rows: { label: string }[]) {
-  const n = new Set(rows.map(r => r.label)).size
-  return `${n} haplotype${n === 1 ? '' : 's'}`
+export function plural(n: number, noun: string) {
+  return `${n} ${noun}${n === 1 ? '' : 's'}`
 }
 
-// The rows reordered section by section, each keeping the order it came in.
-// A row's value is its table row's, looked up by haplotype (`HG00097#1`)
-// and then by sample (`HG00097`); rows with none stack last.
-export function groupWalkRows<R extends { sample: string; label: string }>(
-  rows: R[],
-  table: SampleRow[],
-  { field, domain }: WalkRowGroupBy,
-) {
+// A walk's value in a column: its haplotype's row (`HG00097#1`), else its
+// sample's (`HG00097`), else ''
+export function columnValueOf(field: string, table: SampleRow[]) {
   const valueOf = new Map(table.map(row => [row.name, row[field] ?? '']))
-  const groups = new Map<string, R[]>()
-  for (const row of rows) {
-    const key = valueOf.get(row.label) || valueOf.get(row.sample) || ''
+  return (haplotype: string, sample: string) =>
+    valueOf.get(haplotype) || valueOf.get(sample) || ''
+}
+
+// Items grouped by their value in a column, each group in the order its items
+// came in, the groups in the order a JBrowse Group by sorts them, and each
+// titled with its value and how many distinct `noun`s its items are
+export function groupsByColumn<T>(
+  items: readonly T[],
+  valueOf: (item: T) => string,
+  { field, domain }: { field: string; domain?: readonly string[] },
+  noun: string,
+  nounOf: (item: T) => string,
+) {
+  const groups = new Map<string, T[]>()
+  for (const item of items) {
+    const key = valueOf(item)
     const group = groups.get(key)
     if (group) {
-      group.push(row)
+      group.push(item)
     } else {
-      groups.set(key, [row])
+      groups.set(key, [item])
     }
   }
+  return [...groups.keys()].sort(groupKeyComparator(domain)).map(key => {
+    const members = groups.get(key)!
+    const n = new Set(members.map(nounOf)).size
+    return {
+      key,
+      members,
+      title: `${key || `${field}: none`} · ${plural(n, noun)}`,
+    }
+  })
+}
+
+// The rows reordered section by section; rows with no value stack last
+export function groupWalkRows<R extends { sample: string; label: string }>(
+  rows: R[],
+  table: SampleRow[],
+  groupBy: WalkRowGroupBy,
+) {
+  const valueOf = columnValueOf(groupBy.field, table)
+  const groups = groupsByColumn(
+    rows,
+    row => valueOf(row.label, row.sample),
+    groupBy,
+    'haplotype',
+    row => row.label,
+  )
   let first = 1
-  const sections: WalkRowSection[] = [...groups.keys()]
-    .sort(groupKeyComparator(domain))
-    .map(key => {
-      const members = groups.get(key)!
-      const section = {
-        key,
-        title: `${key || `${field}: none`} · ${haplotypes(members)}`,
-        first,
-        count: members.length,
-      }
-      first += members.length
-      return section
-    })
+  const sections: WalkRowSection[] = groups.map(({ key, members, title }) => {
+    const section = { key, title, first, count: members.length }
+    first += members.length
+    return section
+  })
   return {
-    rows: sections.flatMap(s => groups.get(s.key)!),
+    rows: groups.flatMap(g => g.members),
     sections,
   }
 }
@@ -156,3 +188,45 @@ export function sectionPlacement(sections: WalkRowSection[], rowPx: number) {
     },
   }
 }
+
+// The rows' trees, a section at a time while grouped. walkRowsTree puts its
+// i-th row at i * rowPx below its reference row and draws that row too, so
+// each section is drawn shifted down to its place with its reference row
+// dropped.
+export function walkRowTrees(
+  bars: WalkRowsWithCalls,
+  sections: WalkRowSection[],
+  rowY: (i: number) => number,
+  frame: WalkRowsFrame & { rowPx: number },
+  o: Parameters<typeof walkRowsTree>[2] & { idPrefix: string },
+): El[] {
+  if (sections.length === 0) {
+    return [walkRowsTree(bars, frame, o)]
+  }
+  return [
+    walkRowsTree({ ...bars, rows: [] }, frame, o),
+    ...sections.flatMap((section, k) => {
+      const tree = walkRowsTree(
+        {
+          ...bars,
+          rows: bars.rows.slice(
+            section.first - 1,
+            section.first - 1 + section.count,
+          ),
+        },
+        {
+          ...frame,
+          translateY:
+            frame.translateY +
+            (rowY(section.first) - frame.rowPx) * frame.scaleY,
+        },
+        { ...o, idPrefix: `${o.idPrefix}-s${k}` },
+      )
+      return tree.children.filter(
+        (c): c is El =>
+          typeof c !== 'string' &&
+          c.attrs['data-testid'] !== 'graph-walk-reference',
+      )
+    }),
+  ]
+}

package/src/GraphGenomeView/walkRowSpans.test.ts

@@ -121,3 +121,9 @@ test('a solid run under the ramp is one piece in its own hue', () => {
   const off = bars.rows[0]!.runs[1]!
   expect(runPieces(off, ramp, frame.scaleX)).toHaveLength(1)
 })
+
+test('the spans state how far the longest row reaches', () => {
+  const all = [bars.reference, ...bars.rows]
+  expect(walkRowSpans(all, frame.scaleX).longest).toBe(3500)
+  expect(walkRowSpans([], frame.scaleX).longest).toBe(1)
+})