jbrowse-plugin-graphgenomeviewer 6.9.0 → 6.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jbrowse-plugin-graphgenomeviewer",
-  "version": "6.9.0",
+  "version": "6.9.2",
   "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": {
@@ -31,6 +31,7 @@
     "@jbrowse/cigar-utils": "5.0.0-beta.11",
     "@jbrowse/core": "5.0.0-beta.11",
     "@jbrowse/display-kit": "5.0.0-beta.11",
+    "@jbrowse/display-ui": "5.0.0-beta.11",
     "@jbrowse/render-core": "5.0.0-beta.11",
     "@jbrowse/synteny-core": "5.0.0-beta.11"
   },

package/src/LinearGraphDisplay/components/GraphStatusChrome.test.tsx

@@ -0,0 +1,78 @@
+import { render, screen } from '@testing-library/react'
+
+import GraphStatusChrome from './GraphStatusChrome'
+
+import type { LinearGraphDisplayModel } from '../model'
+
+function model(over: Record<string, unknown> = {}) {
+  return {
+    configuration: { displayId: 'graph-LinearGraphDisplay' },
+    height: 300,
+    error: undefined,
+    regionTooLargeReason: '',
+    zoomCanReleaseGate: true,
+    statusMessage: undefined,
+    statusProgress: undefined,
+    fetchCanceled: false,
+    reload: vi.fn(),
+    ...over,
+  } as unknown as LinearGraphDisplayModel
+}
+
+test('a drawn graph sits in the chrome with its readiness attributes', () => {
+  render(
+    <GraphStatusChrome
+      model={model()}
+      phase="ready"
+      drawn
+      testid="linear-graph-display"
+      data-layout="auto"
+    >
+      <canvas data-testid="graph-canvas" />
+    </GraphStatusChrome>,
+  )
+  const chrome = screen.getByTestId('linear-graph-display')
+  expect(chrome.dataset.displayPhase).toBe('ready')
+  expect(chrome.dataset.displayDrawn).toBe('true')
+  expect(chrome.dataset.layout).toBe('auto')
+  expect(screen.getByTestId('graph-canvas')).toBeTruthy()
+})
+
+test('a refused cut shows its notice over the graph', () => {
+  const error = Object.assign(
+    new Error('Zoom in to about 54Kbp to see the graph'),
+    { name: 'NodeLimitError', regionTooLarge: true },
+  )
+  render(
+    <GraphStatusChrome
+      model={model({ error })}
+      phase="error"
+      drawn={false}
+      testid="linear-graph-display"
+    >
+      <canvas />
+    </GraphStatusChrome>,
+  )
+  expect(
+    screen.getByText(/Zoom in to about 54Kbp to see the graph/),
+  ).toBeTruthy()
+})
+
+test('a window past the bp cap replaces the graph with the zoom-in notice', () => {
+  render(
+    <GraphStatusChrome
+      model={model({
+        regionTooLargeReason:
+          'Region too large for a graph cut (6 Mb, max 5 Mb)',
+      })}
+      phase="tooLarge"
+      drawn={false}
+      testid="linear-graph-display"
+    >
+      <canvas data-testid="graph-canvas" />
+    </GraphStatusChrome>,
+  )
+  expect(screen.queryByTestId('graph-canvas')).toBeNull()
+  expect(screen.getByText(/Region too large for a graph cut/)).toBeTruthy()
+  expect(screen.getByText('Force load')).toBeTruthy()
+})

package/src/LinearGraphDisplay/components/GraphStatusChrome.tsx

@@ -0,0 +1,104 @@
+import { useState } from 'react'
+import type { CSSProperties, ReactNode } from 'react'
+
+import DisplayBackgroundProgress from '@jbrowse/display-kit/DisplayBackgroundProgress'
+import DisplayErrorBar from '@jbrowse/display-kit/DisplayErrorBar'
+import DisplayLoadingOverlay from '@jbrowse/display-kit/DisplayLoadingOverlay'
+import TooLargeMessage from '@jbrowse/display-kit/TooLargeMessage'
+import {
+  BottomRightCornerContext,
+  TrackOverlayPortal,
+  useChromeOverlayOverride,
+} from '@jbrowse/display-ui'
+
+import type { LinearGraphDisplayModel } from '../model'
+import type { DisplayStatusPhase } from '@jbrowse/render-core/displayPhase'
+
+const muiOverlays = {
+  TooLarge: TooLargeMessage,
+  ErrorBar: DisplayErrorBar,
+  Loading: DisplayLoadingOverlay,
+  BackgroundProgress: DisplayBackgroundProgress,
+}
+
+/**
+ * The status chrome of a display that owns its canvas: the zoom-in notice in
+ * place of the display, and the error bar, loading overlay and progress chip
+ * over it in the track's overlay layer. Core's `DisplayStatusChrome` drew this
+ * until jbrowse-web main removed it on 2026-10-08 (d8db736896), and its named
+ * import came back undefined there, failing the track with React error #130.
+ * Built here from the overlays every host from 5.0.0-beta.11 serves.
+ */
+export default function GraphStatusChrome({
+  model,
+  phase,
+  drawn,
+  testid,
+  style,
+  children,
+  ...dataProps
+}: {
+  model: LinearGraphDisplayModel
+  phase: DisplayStatusPhase
+  drawn: boolean
+  testid: string
+  style?: CSSProperties
+  children: ReactNode
+} & Record<`data-${string}`, unknown>) {
+  const { TooLarge, ErrorBar, Loading, BackgroundProgress } =
+    useChromeOverlayOverride() ?? muiOverlays
+  const [corner, setCorner] = useState<HTMLDivElement | null>(null)
+  const { displayId } = model.configuration
+  if (phase === 'tooLarge') {
+    return (
+      <div
+        style={{ display: 'contents' }}
+        data-display-id={displayId}
+        data-display-phase={phase}
+      >
+        <TrackOverlayPortal>
+          <div style={{ pointerEvents: 'auto' }}>
+            <TooLarge model={model} />
+          </div>
+        </TrackOverlayPortal>
+      </div>
+    )
+  }
+  return (
+    <div
+      {...dataProps}
+      style={{ position: 'relative', height: model.height, ...style }}
+      data-testid={testid}
+      data-display-id={displayId}
+      data-display-drawn={drawn}
+      data-display-phase={phase}
+    >
+      <BottomRightCornerContext value={corner}>
+        {children}
+      </BottomRightCornerContext>
+      <TrackOverlayPortal>
+        <ErrorBar model={model} visible={phase === 'error'} />
+        <Loading
+          model={model}
+          visible={phase === 'loading' || phase === 'canceled'}
+          immediate={!drawn}
+        />
+        <div
+          ref={setCorner}
+          style={{
+            position: 'absolute',
+            bottom: 2,
+            right: 2,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+            gap: 4,
+            pointerEvents: 'none',
+          }}
+        >
+          <BackgroundProgress model={model} visible={phase === 'ready'} />
+        </div>
+      </TrackOverlayPortal>
+    </div>
+  )
+}

package/src/LinearGraphDisplay/components/LinearGraphDisplay.tsx

@@ -1,6 +1,6 @@
-import { DisplayStatusChrome } from '@jbrowse/display-kit/DisplayChrome'
 import { observer } from 'mobx-react'
 
+import GraphStatusChrome from './GraphStatusChrome'
 import GraphCanvas from '../../GraphGenomeView/components/GraphCanvas'
 
 import type { LinearGraphDisplayModel } from '../model'
@@ -11,7 +11,7 @@ const LinearGraphDisplay = observer(function LinearGraphDisplay({
   model: LinearGraphDisplayModel
 }) {
   return (
-    <DisplayStatusChrome
+    <GraphStatusChrome
       model={model}
       phase={model.displayPhase}
       drawn={model.painted && model.geometryPainted}
@@ -28,7 +28,7 @@ const LinearGraphDisplay = observer(function LinearGraphDisplay({
       }}
     >
       <GraphCanvas model={model} ownChrome={false} />
-    </DisplayStatusChrome>
+    </GraphStatusChrome>
   )
 })
 

package/src/RgfaTabixAdapter/RgfaTabixAdapter.test.ts

@@ -1,6 +1,7 @@
 import { readFileSync } from 'node:fs'
 import { gunzipSync } from 'node:zlib'
 
+import { TabixIndexedFile } from '@gmod/tabix'
 import { parseGFA } from '@jbrowse/bandage-core/gfa-core/index'
 import { readConfObject } from '@jbrowse/core/configuration'
 import { firstValueFrom } from 'rxjs'
@@ -243,6 +244,17 @@ const is5 = {
 // The lane this exists for: color a linear track by how many haplotypes carry
 // each segment. Before this the tag column reached the graph view's node popup
 // and stopped there, so a feature could say its rank but not its carriage.
+test('getSubgraph refuses a range that is not finite before querying', async () => {
+  const getLines = vi
+    .spyOn(TabixIndexedFile.prototype, 'getLines')
+    .mockResolvedValue()
+  await expect(
+    makeAdapter().getSubgraph({ ...k12, end: Number.NaN }, { hops: 1 }),
+  ).rejects.toThrow(/K12#1#chr:993236-NaN is not a finite range/)
+  expect(getLines).not.toHaveBeenCalled()
+  getLines.mockRestore()
+})
+
 test('getFeatures carries SM:Z: onto the feature', async () => {
   const features = await firstValueFrom(
     makePggbAdapter().getFeatures(is5).pipe(toArray()),

package/src/RgfaTabixAdapter/RgfaTabixAdapter.ts

@@ -22,6 +22,7 @@ import {
   byteBudgetError,
   chunkQueryStart,
   joinPieces,
+  lookbackChunks,
   parseWalkRow,
   stepBudgetError,
   walkCut,
@@ -77,6 +78,28 @@ function offReference(segments: RgfaSegment[]) {
   return segments.filter(segment => segment.rank > 0)
 }
 
+// tabix-js loops forever on a NaN end and reads nothing for a NaN start
+// (GMOD/tabix-js#157), so every query the adapter makes refuses a range that
+// is not finite first
+function checkRange(refName: string, start: number, end: number) {
+  if (!Number.isFinite(start) || !Number.isFinite(end)) {
+    throw new Error(
+      `${refName}:${start}-${end} is not a finite range to query the graph's index for`,
+    )
+  }
+}
+
+async function getLines(
+  file: TabixIndexedFile,
+  refName: string,
+  start: number,
+  end: number,
+  opts: { signal?: AbortSignal; lineCallback: (line: string) => void },
+) {
+  checkRange(refName, start, end)
+  return file.getLines(refName, start, end, opts)
+}
+
 interface GraphIndex {
   segments: TabixIndexedFile
   links: TabixIndexedFile
@@ -130,18 +153,25 @@ export default class RgfaTabixAdapter extends BaseFeatureDataAdapter<RgfaTabixAd
   }
 
   // A walk-indexed graph's header: the chunk its rows are filed under, else
-  // the walkChunk slot, and the haplotypes it names
+  // the walkChunk slot, how many chunks before a window a cut reads, and the
+  // haplotypes it names
   private walkHeader = cachedSetup({
     setup: async opts => {
       const walks = this.fine.walks
       const header = walkHeader(walks ? await walks.getHeaderLines(opts) : [])
       const slot: number = this.getConf('walkChunk')
-      return { ...header, chunk: header.chunk ?? slot }
+      const chunk = header.chunk ?? slot
+      return {
+        ...header,
+        chunk,
+        lookback: lookbackChunks(header.maxNode, chunk),
+      }
     },
   })
 
-  private async walkChunk(opts: BaseOptions) {
-    return (await this.walkHeader(opts)).chunk
+  private async walkQueryStart(start: number, opts: BaseOptions) {
+    const { chunk, lookback } = await this.walkHeader(opts)
+    return chunkQueryStart(start, chunk, lookback)
   }
 
   /**
@@ -178,12 +208,12 @@ export default class RgfaTabixAdapter extends BaseFeatureDataAdapter<RgfaTabixAd
       const tabixRefName = await this.fine.refNames.resolve(query, opts)
       if (tabixRefName !== undefined) {
         // a walk-indexed node row names only its chunk's first base, and a
-        // node crossing in from the chunk before is filed there
-        const chunk = this.fine.walks ? await this.walkChunk(opts) : 0
-        const start =
-          chunk > 0 ? chunkQueryStart(query.start, chunk) : query.start
+        // node crossing in from a chunk before is filed there
+        const start = this.fine.walks
+          ? await this.walkQueryStart(query.start, opts)
+          : query.start
         await updateStatus('Downloading segments', statusCallback, () =>
-          this.fine.segments.getLines(tabixRefName, start, query.end, {
+          getLines(this.fine.segments, tabixRefName, start, query.end, {
             signal,
             lineCallback: line => {
               const { segment, anchored } = parseSegmentRow(line)
@@ -246,7 +276,7 @@ export default class RgfaTabixAdapter extends BaseFeatureDataAdapter<RgfaTabixAd
       end: number,
     ) => {
       const reached: RgfaSegment[] = []
-      await index.links.getLines(refName, start, end, {
+      await getLines(index.links, refName, start, end, {
         signal,
         lineCallback: line => {
           const link = parseLinkLine(line)
@@ -271,7 +301,7 @@ export default class RgfaTabixAdapter extends BaseFeatureDataAdapter<RgfaTabixAd
       return this.walkSubgraph(index, index.walks, tabixRefName, region, opts)
     }
     const layout = { anchored: false }
-    await index.segments.getLines(tabixRefName, region.start, region.end, {
+    await getLines(index.segments, tabixRefName, region.start, region.end, {
       signal,
       lineCallback: line => {
         const row = parseSegmentRow(line)
@@ -284,7 +314,7 @@ export default class RgfaTabixAdapter extends BaseFeatureDataAdapter<RgfaTabixAd
     // graph under the region and there is nothing to hop to or close.
     if (layout.anchored) {
       const found: RgfaLink[] = []
-      await index.links.getLines(tabixRefName, region.start, region.end, {
+      await getLines(index.links, tabixRefName, region.start, region.end, {
         signal,
         lineCallback: line => {
           found.push(parseLinkLine(line))
@@ -322,7 +352,7 @@ export default class RgfaTabixAdapter extends BaseFeatureDataAdapter<RgfaTabixAd
       const found: RgfaLink[] = []
       await Promise.all(
         spans.map(span =>
-          index.links.getLines(span.refName, span.start, span.end, {
+          getLines(index.links, span.refName, span.start, span.end, {
             signal,
             lineCallback: line => {
               found.push(parseLinkLine(line))
@@ -344,11 +374,11 @@ export default class RgfaTabixAdapter extends BaseFeatureDataAdapter<RgfaTabixAd
   }
 
   // A walk-indexed graph's cut: one read of each file over whole chunks, from
-  // the chunk before the window to its end. The indexes first estimate the
-  // bytes those reads fetch, and a window past walkByteBudget reads no row.
-  // Only the walks `haplotypes` asks for, and the reference's, are decoded,
-  // and none is past walkStepBudget: the three reads go out together and a
-  // walk read over budget stops the other two.
+  // the lookback chunks before the window to its end. The indexes first
+  // estimate the bytes those reads fetch, and a window past walkByteBudget
+  // reads no row. Only the walks `haplotypes` asks for, and the reference's,
+  // are decoded, and none is past walkStepBudget: the three reads go out
+  // together and a walk read over budget stops the other two.
   private async walkSubgraph(
     index: GraphIndex,
     walks: TabixIndexedFile,
@@ -357,16 +387,17 @@ export default class RgfaTabixAdapter extends BaseFeatureDataAdapter<RgfaTabixAd
     opts: SubgraphAdapterOptions,
   ) {
     const { signal, haplotypes } = opts
-    const chunk = await this.walkChunk({ signal })
+    const { chunk, lookback } = await this.walkHeader({ signal })
     const budget: number = this.getConf('walkStepBudget')
     const keep = walkNameFilter(
       haplotypes?.map(lane => resolvePanSNPrefix(this, lane)),
       panSNHaplotype(refName),
     )
-    const from = chunkQueryStart(region.start, chunk)
+    const from = chunkQueryStart(region.start, chunk, lookback)
     const files = [walks, index.segments, index.links]
     const tooLarge = await byteBudgetError(
       async end => {
+        checkRange(refName, from, end)
         const sizes = await Promise.all(
           files.map(file =>
             file.bytesForRegions([{ refName, start: from, end }], { signal }),
@@ -397,7 +428,7 @@ export default class RgfaTabixAdapter extends BaseFeatureDataAdapter<RgfaTabixAd
       file: TabixIndexedFile,
       lineCallback: (line: string) => void,
     ) =>
-      file.getLines(refName, from, region.end, {
+      getLines(file, refName, from, region.end, {
         signal: reads.signal,
         lineCallback,
       })

package/src/RgfaTabixAdapter/configSchema.ts

@@ -19,11 +19,13 @@ import type { Instance } from '@jbrowse/mobx-state-tree'
  * `build_bubble_tier.sh` in jbrowse-components, plus the zoom past which a
  * graph view following a linear view cuts it.
  *
- * `walksUri` takes the prefix `gfa-to-tabix --walks -o <prefix>` was given, in
- * place of `uri`, and resolves `<prefix>.walks.bed.gz`, `<prefix>.nodes.bed.gz`,
- * `<prefix>.links.bed.gz` and their `.tbi` indexes. Such a graph's cut carries
- * the haplotypes' walks, and `defaultHaplotypes` names the ones it is cut for
- * until the user picks others.
+ * `walksUri` takes the prefix of a walk-indexed file set in place of `uri`, and
+ * resolves `<walksUri>.walks.bed.gz`, `<walksUri>.nodes.bed.gz`,
+ * `<walksUri>.links.bed.gz` and their `.tbi` indexes. `gfa-to-tabix --walks -o
+ * <prefix>` writes a set per reference sample from 0.5.0, so a track names one
+ * as `<prefix>.<sample>`; a set from 0.4.0 holds every reference, and the track
+ * names `<prefix>`. Such a graph's cut carries the haplotypes' walks, and
+ * `defaultHaplotypes` names the ones it is cut for until the user picks others.
  *
  * #example
  * ```js
@@ -38,8 +40,8 @@ import type { Instance } from '@jbrowse/mobx-state-tree'
  * ```js
  * {
  *   type: 'RgfaTabixAdapter',
- *   walksUri: 'https://example.com/hprc-v2.1.chr22',
- *   assemblyNameToPanSN: { hg38: 'GRCh38', hs1: 'CHM13' },
+ *   walksUri: 'https://jbrowse.org/demos/hprc/hprc-v2.1-mc-grch38.GRCh38',
+ *   assemblyNameToPanSN: { hg38: 'GRCh38' },
  *   defaultHaplotypes: ['HG002', 'HG00733', 'HG02257', 'NA19240'],
  * }
  * ```
@@ -294,9 +296,10 @@ const RgfaTabixAdapter = ConfigurationSchema(
      * ```json
      * { "type": "RgfaTabixAdapter", "uri": "graph.rgfa" }
      * ```
-     * or, for a graph built by `gfa-to-tabix --walks -o chr22`,
+     * or, for the GRCh38 set of a graph built by `gfa-to-tabix --walks -o
+     * chr22`,
      * ```json
-     * { "type": "RgfaTabixAdapter", "walksUri": "chr22" }
+     * { "type": "RgfaTabixAdapter", "walksUri": "chr22.GRCh38" }
      * ```
      */
     preProcessSnapshot: normalizeSnapshot,

package/src/RgfaTabixAdapter/walkFiles.test.ts

@@ -34,6 +34,14 @@ const fixturePrefix = require
   .resolve('./test_data/walks_header.walks.bed.gz')
   .replace(/\.walks\.bed\.gz$/, '')
 
+// An unchopped graph, built by gfa-to-tabix --walks --refs GRCh38 --chunk 1000
+// (0.4.0), with the first header line 0.5.0 writes put in by hand:
+//   W GRCh38 0 chr1 >1>2>4   node 1 spans 0-2600, filed under chunk 0 alone
+//   W HG002  1 chr1 >1>3>4   3 replaces 2
+const maxNodePrefix = require
+  .resolve('./test_data/walks_maxnode.walks.bed.gz')
+  .replace(/\.walks\.bed\.gz$/, '')
+
 function makeAdapter(prefix = spikePrefix, slots = {}) {
   const local = (path: string) => ({
     localPath: path,
@@ -273,3 +281,85 @@ test.skipIf(!rustPresent)(
     })
   },
 )
+
+test.skipIf(!rustPresent)(
+  'a cut for every haplotype past the step budget offers fewer haplotypes',
+  async () => {
+    const cut = makeAdapter(rustPrefix).getSubgraph({
+      ...window,
+      end: 20_260_000,
+    })
+    await expect(cut).rejects.toMatchObject({
+      name: 'NodeLimitError',
+      message: expect.stringMatching(
+        /^Zoom in to about \d+Kbp, or choose fewer haplotypes, to see the graph$/,
+      ),
+    })
+  },
+)
+
+// tabix-js's getLines spins forever on a NaN end, so these mock it: a
+// regression fails here instead of hanging the suite
+test('a cut or a feature read over a range that is not finite queries nothing', async () => {
+  const getLines = vi
+    .spyOn(TabixIndexedFile.prototype, 'getLines')
+    .mockResolvedValue()
+  const bytes = vi
+    .spyOn(TabixIndexedFile.prototype, 'bytesForRegions')
+    .mockResolvedValue(0)
+  const adapter = makeAdapter(fixturePrefix, {
+    assemblyNameToPanSN: { hg38: 'GRCh38' },
+  })
+  const region = {
+    refName: 'chr1',
+    assemblyName: 'hg38',
+    start: Number.NaN,
+    end: 2600,
+  }
+  await expect(adapter.getSubgraph(region)).rejects.toThrow(
+    "GRCh38#0#chr1:NaN-2600 is not a finite range to query the graph's index for",
+  )
+  await expect(
+    firstValueFrom(adapter.getFeatures(region).pipe(toArray())),
+  ).rejects.toThrow(/not a finite range/)
+  expect(getLines).not.toHaveBeenCalled()
+  expect(bytes).not.toHaveBeenCalled()
+  getLines.mockRestore()
+  bytes.mockRestore()
+})
+
+test("a node longer than a chunk is read back as far as the header's maxnode reaches", async () => {
+  const adapter = makeAdapter(maxNodePrefix, {
+    assemblyNameToPanSN: { hg38: 'GRCh38' },
+  })
+  const region = {
+    refName: 'chr1',
+    assemblyName: 'hg38',
+    start: 2100,
+    end: 2500,
+  }
+  const features = await firstValueFrom(
+    adapter.getFeatures(region).pipe(toArray()),
+  )
+  expect(features.map(f => f.get('name'))).toContain('1')
+  const gfa = await adapter.getSubgraph(region)
+  expect(gfa).toMatch(/^S\t1\t/m)
+  expect(gfa).toMatch(/^W\tGRCh38\t0\tchr1\t0\t3200\t>1>2$/m)
+  expect(walkNames(gfa)).toEqual(['GRCh38#0#chr1', 'HG002#1#chr1'])
+})
+
+test('a header without maxnode reads from the chunk before the window', async () => {
+  const getLines = vi.spyOn(TabixIndexedFile.prototype, 'getLines')
+  await makeAdapter(fixturePrefix, {
+    assemblyNameToPanSN: { hg38: 'GRCh38' },
+  }).getSubgraph({
+    refName: 'chr1',
+    assemblyName: 'hg38',
+    start: 2100,
+    end: 2600,
+  })
+  expect(new Set(getLines.mock.calls.map(call => call[1]))).toEqual(
+    new Set([1000]),
+  )
+  getLines.mockRestore()
+})

package/src/RgfaTabixAdapter/walkRows.test.ts

@@ -3,6 +3,7 @@ import {
   byteBudgetError,
   chunkQueryStart,
   joinPieces,
+  lookbackChunks,
   parseWalkRow,
   stepBudgetError,
   walkCut,
@@ -139,6 +140,29 @@ describe('the step budget', () => {
     expect(error.message).toBe('Zoom in to about 150bp to see the graph')
   })
 
+  test('offers a cut for every haplotype fewer as well as a zoom', () => {
+    // four walks, the reference's among them, with these steps each per chunk
+    const each: [number, number][] = [
+      [100, 1],
+      [200, 1],
+      [300, 2],
+      [400, 1],
+    ]
+    const four = [
+      'GRCh38#0#chr1',
+      'HG002#1#chr1',
+      'HG002#2#chr1',
+      'NA19240#1#chr1',
+    ].flatMap(name => rows(each).map(row => ({ ...row, name })))
+    const window = { start: 250, end: 480 }
+    expect(stepBudgetError(four, 10, window, chunk, false)!.message).toBe(
+      'Zoom in to about 50bp, or choose fewer haplotypes, to see the graph',
+    )
+    expect(stepBudgetError(four, 10, window, chunk, true)!.message).toBe(
+      'Zoom in to about 50bp to see the graph',
+    )
+  })
+
   test('asks for fewer haplotypes where no zoom fits', () => {
     const error = stepBudgetError(
       rows([
@@ -184,6 +208,35 @@ test("a walk file's header states its chunk, references and haplotypes", () => {
   })
 })
 
+test("a 0.5.0 header's first line gives the longest node beside the chunk", () => {
+  expect(
+    walkHeader([
+      '#walks\tchunk:i:65536\tmaxnode:i:1024\tcap:i:8192',
+      '#reference\tGRCh38',
+    ]),
+  ).toEqual({
+    chunk: 65_536,
+    maxNode: 1024,
+    references: ['GRCh38'],
+    haplotypes: [],
+  })
+  expect(walkHeader(['#walks\tmaxnode:i:300000\tchunk:i:1000'])).toMatchObject({
+    chunk: 1000,
+    maxNode: 300_000,
+  })
+})
+
+test('a cut looks back as many chunks as the longest node spans', () => {
+  expect(lookbackChunks(undefined, 65_536)).toBe(1)
+  expect(lookbackChunks(0, 65_536)).toBe(1)
+  expect(lookbackChunks(1024, 65_536)).toBe(1)
+  expect(lookbackChunks(65_536, 65_536)).toBe(1)
+  expect(lookbackChunks(65_537, 65_536)).toBe(2)
+  expect(lookbackChunks(300_000, 65_536)).toBe(5)
+  expect(chunkQueryStart(20_000_000, 65_536, 5)).toBe(19_660_800)
+  expect(chunkQueryStart(200_000, 65_536, 5)).toBe(0)
+})
+
 describe('the byte budget', () => {
   const chunk = 100
   // bytes a read from the query start to `end` fetches, 10 per chunk row