jbrowse-plugin-graphgenomeviewer 4.0.11 → 4.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jbrowse-plugin-graphgenomeviewer",
-  "version": "4.0.11",
+  "version": "4.0.13",
   "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": {
@@ -26,8 +26,8 @@
   "private": false,
   "dependencies": {
     "@gmod/bgzf-filehandle": "^6.7.0",
-    "@gmod/gbz-base": "^2.8.0",
-    "@gmod/tabix": "^3.8.3",
+    "@gmod/gbz-base": "^3.0.0",
+    "@gmod/tabix": "^3.9.0",
     "@gmod/tubemap-core": "^0.1.0",
     "@jbrowse/cigar-utils": "5.0.0-beta.9",
     "@jbrowse/core": "5.0.0-beta.9",
@@ -76,7 +76,7 @@
     "typescript-eslint": "^8.70.1",
     "typescript7": "npm:typescript@^7.0.2",
     "vitest": "^5.0.2",
-    "@jbrowse/bandage-core": "0.1.3"
+    "@jbrowse/bandage-core": "0.1.8"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/src/GbzBaseSyntenyAdapter/configSchema.ts

@@ -13,10 +13,9 @@ import type { Instance } from '@jbrowse/mobx-state-tree'
  * graph's reference path, every haplotype's walk through the nodes it covers
  * is recovered and named, and each haplotype becomes one alignment record with
  * a CIGAR, so the graph is read through HTTP range requests with no offline
- * conversion. The database has to carry the `HaplotypeSamples` and
- * `HaplotypeLengths` side tables that `gbz-haplotype-index` (shipped with
- * `@gmod/gbz-base`) writes into an upstream-built database; without them the
- * graph cannot say which haplotype a walk belongs to.
+ * conversion. Naming the walks takes the companion haplotype index that
+ * `gbz-haplotype-index` writes; without it the graph cannot say which
+ * 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

package/src/GraphGenomeView/components/GraphCanvas.tsx

@@ -2,7 +2,6 @@ import { useEffect, useRef, useState } from 'react'
 
 import { formatBp } from '@jbrowse/bandage-core/graphLabels'
 import { LEGEND_INSET_PX } from '@jbrowse/bandage-core/labelLayout'
-import { REFERENCE_RAMP_MAX_HUE } from '@jbrowse/bandage-core/renderer/GeometryBuilder'
 import {
   findHoveredEdge,
   findHoveredNode,
@@ -19,8 +18,9 @@ import BubbleOverlay from './BubbleOverlay'
 import GenePins from './GenePins'
 import GraphToolbar from './GraphToolbar'
 import LabelLayer from './LabelLayer'
-import TubeMapOverlay from './TubeMapOverlay'
+import TubeMapOverlay, { TubeMapLegend } from './TubeMapOverlay'
 import WalkRowsOverlay, { WalkRowsLegend } from './WalkRowsOverlay'
+import { RAMP_GRADIENT_CSS } from './referenceRampCss'
 import { locLabel, nodeOwnLocation } from '../../launchFromGraph/contributors'
 import { nodeLaunchMenuItems } from '../../launchFromGraph/graphMenuItems'
 import { createGraphRenderer } from '../renderer/GraphRenderer'
@@ -203,19 +203,11 @@ const WalkReadout = observer(function WalkReadout({
 // over. Nothing on screen used to say that red-to-magenta means left-to-right of
 // the cut window, so two tutorials carried that sentence in prose and a reader
 // arriving at a figure had no way to know it at all.
-//
-// The gradient is built from the same three numbers `getNodeColor` paints with
-// (hue 0 to REFERENCE_RAMP_MAX_HUE at 70%/50%), rather than from a picked pair
-// of hex stops, so it cannot come to describe a ramp the drawing stopped using.
 const rampStripStyle = {
   minWidth: 90,
   height: 8,
   borderRadius: 2,
-  background: `linear-gradient(to right, ${Array.from(
-    { length: 7 },
-    (_, i) =>
-      `hsl(${(i / 6) * REFERENCE_RAMP_MAX_HUE}, 70%, 50%) ${(i / 6) * 100}%`,
-  ).join(', ')})`,
+  background: RAMP_GRADIENT_CSS,
 }
 
 const rampEndsStyle = {
@@ -302,6 +294,7 @@ const Legends = observer(function Legends({
     <div ref={ref} style={legendStackStyle}>
       <ReferenceRampLegend model={model} />
       <PathLegend model={model} />
+      <TubeMapLegend model={model} />
       <WalkRowsLegend model={model} />
       <WalkReadout model={model} />
     </div>

package/src/GraphGenomeView/components/TubeMapOverlay.tsx

@@ -1,6 +1,19 @@
 import { useEffect, useRef } from 'react'
 
+import { formatBp } from '@jbrowse/bandage-core/graphLabels'
+import {
+  ZIGZAG_AMPLITUDE_PX,
+  ZIGZAG_PX,
+  drawTubeMapRuler,
+  rulerInk,
+} from '@jbrowse/bandage-core/tubeMap/axis'
+import { drawTubeMapConnectors } from '@jbrowse/bandage-core/tubeMap/connectors'
+import {
+  deviationInk,
+  drawDeviationMarks,
+} from '@jbrowse/bandage-core/tubeMap/deviations'
 import { drawTubeMap } from '@jbrowse/bandage-core/tubeMap/draw'
+import { drawTubeMapGenes } from '@jbrowse/bandage-core/tubeMap/genes'
 import { getDpr } from '@jbrowse/render-core/canvas2dUtils'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
@@ -16,8 +29,11 @@ const canvasStyle = {
 }
 
 // The tube map's ink, over the canvas, which draws nothing under a tube map
-// layout. Repainted by an autorun on every change of transform, so a pan in
-// the linear view above moves the tubes in the same frame as its other tracks.
+// layout. Above the tubes go the session's genes in a view of its own, or in
+// a linear view the bands tying each reference box to its bp there; under
+// them a reference ruler, unless the linear view's is already the axis.
+// Repainted by an autorun on every change of transform, so a pan in the linear
+// view above moves the tubes in the same frame as its other tracks.
 const TubeMapOverlay = observer(function TubeMapOverlay({
   model,
 }: {
@@ -40,12 +56,31 @@ const TubeMapOverlay = observer(function TubeMapOverlay({
           canvas.height = Math.round(height * dpr)
           ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
           ctx.clearRect(0, 0, width, height)
-          drawTubeMap(ctx, picture, {
+          const tubeFrame = {
             ...frame,
             width,
             highlightNode: model.hoveredNode ?? model.selectedNode,
             darkMode: model.darkMode,
-          })
+          }
+          drawTubeMap(ctx, picture, tubeFrame)
+          drawDeviationMarks(ctx, model.tubeMapDeviations, tubeFrame)
+          drawTubeMapConnectors(
+            ctx,
+            model.tubeMapConnectors,
+            model.connectorZoneBottom,
+            tubeFrame,
+          )
+          const { bounds } = picture
+          drawTubeMapGenes(
+            ctx,
+            model.tubeMapGenes,
+            tubeFrame,
+            frame.y(bounds.minY) - 2,
+          )
+          const boxes = model.tubeMapRulerBoxes
+          if (boxes) {
+            drawTubeMapRuler(ctx, boxes, tubeFrame, frame.y(bounds.maxY) + 4)
+          }
         }
       }),
     [model],
@@ -67,3 +102,81 @@ const TubeMapOverlay = observer(function TubeMapOverlay({
 })
 
 export default TubeMapOverlay
+
+const legendBoxStyle = {
+  background: 'rgba(255,255,255,0.82)',
+  padding: '4px 6px',
+  borderRadius: 3,
+  fontSize: 11,
+  lineHeight: '15px',
+  whiteSpace: 'nowrap' as const,
+}
+const legendRowStyle = { display: 'flex', alignItems: 'center', gap: 5 }
+const SWATCH_PX = 18
+
+// The ruler's own zigzag, tooth for tooth
+function ZigzagSwatch() {
+  const teeth = Math.round(SWATCH_PX / ZIGZAG_PX)
+  const dx = SWATCH_PX / teeth
+  const mid = ZIGZAG_AMPLITUDE_PX + 1
+  const points = [`0,${mid}`]
+  for (let i = 0; i < teeth; i++) {
+    points.push(
+      `${(i + 0.5) * dx},${mid + (i % 2 ? 1 : -1) * ZIGZAG_AMPLITUDE_PX}`,
+    )
+  }
+  points.push(`${SWATCH_PX},${mid}`)
+  return (
+    <svg width={SWATCH_PX} height={mid * 2} style={{ flex: 'none' }}>
+      <polyline
+        points={points.join(' ')}
+        fill="none"
+        stroke={rulerInk()}
+        strokeWidth={1}
+      />
+    </svg>
+  )
+}
+
+const tubeSwatchStyle = {
+  width: SWATCH_PX,
+  height: 7,
+  flex: 'none',
+  display: 'flex',
+  justifyContent: 'center',
+  backgroundColor: '#b8b8c0',
+}
+
+function TickSwatch() {
+  return (
+    <div style={tubeSwatchStyle}>
+      <div style={{ width: 2, backgroundColor: deviationInk() }} />
+    </div>
+  )
+}
+
+// The two marks a tube map draws that nothing else on screen explains, each
+// listed only while it is drawn
+export const TubeMapLegend = observer(function TubeMapLegend({
+  model,
+}: {
+  model: GraphPaneModel
+}) {
+  const { squeezed, foldBp } = model.tubeMapKeys
+  return squeezed || foldBp !== undefined ? (
+    <div style={legendBoxStyle} data-testid="graph-tube-map-legend">
+      {foldBp !== undefined ? (
+        <div style={legendRowStyle}>
+          <TickSwatch />
+          <span>a haplotype's variant under {formatBp(foldBp)}</span>
+        </div>
+      ) : null}
+      {squeezed ? (
+        <div style={legendRowStyle}>
+          <ZigzagSwatch />
+          <span>ruler not to scale, box length below</span>
+        </div>
+      ) : null}
+    </div>
+  ) : null
+})

package/src/GraphGenomeView/components/WalkRowsOverlay.tsx

@@ -1,20 +1,34 @@
+import { useId } from 'react'
+
 import { ROW_HEIGHT_PX } from '@jbrowse/bandage-core/layout/rowSpacing'
 import { LABEL_CHAR_PX } from '@jbrowse/bandage-core/overlayLabels'
+import { REFERENCE_RAMP_ALT_CSS } from '@jbrowse/bandage-core/renderer/GeometryBuilder'
 import { observer } from 'mobx-react'
 
+import { RAMP_GRADIENT_CSS, rampHueCss, rampStops } from './referenceRampCss'
 import { CALL_TOLERANCE } from '../repeats/walkCalls'
 
 import type { GraphPaneModel } from '../model'
+import type { RepeatSequence, RepeatUnit } from '../repeats/repeatFeatures'
+import type { WalkCall } from '../repeats/walkCalls'
+import type { WalkRun } from '@jbrowse/bandage-core/layout/walkRows'
 
 // The walk-rows layout's bars: one per haplotype walk under the reference line
 // the canvas draws, each on its own bp axis from the window's left edge. Blue
-// is sequence the reference walk also carries, purple is sequence it does not,
-// and the readout at the end of a bar is what it carries against the
+// marks sequence shared with the reference walk and purple sequence only the
+// haplotypes carry. Under the reference-position ramp, shared sequence takes
+// the hue of the reference it is threaded through and haplotype-only sequence
+// the charcoal the ramp reserves for rGFA's off-reference ranks. In a tandem
+// array the threading is the aligner's pick among near-identical copies, so
+// the hue there says which reference copy the graph used, not which one a copy
+// resembles. The readout at the end of a bar is what it carries against the
 // reference, which for a repeat array is the expansion.
 //
-// A tick is the genotyped allele length paired with THAT walk, and the walk
-// rows pair them — see repeats/walkCalls.ts, which also holds the threshold
-// this reads a red readout off.
+// A repeat record that states each allele's runs (VCF 4.5 <CNV:TR> RN, RUS,
+// RUC, RB) paints every bar by unit instead: the allele paired with THAT walk,
+// one colour per unit the record names. A record stating only a length marks
+// it with a tick. The walk rows pair them — see repeats/walkCalls.ts, which
+// also holds the threshold this reads a red readout off.
 
 const svgStyle = {
   position: 'absolute' as const,
@@ -32,6 +46,29 @@ const DISAGREES = '#c62828'
 const OFF_REFERENCE = '#8e3fbf'
 const BAR_PX = 12
 
+// Tableau 10, whose leading hues stay apart in lightness as well as hue
+const UNIT_COLORS = [
+  '#4e79a7',
+  '#f28e2b',
+  '#59a14f',
+  '#e15759',
+  '#76b7b2',
+  '#edc948',
+  '#b07aa1',
+  '#ff9da7',
+  '#9c755f',
+  '#bab0ac',
+]
+const NO_ALLELE = '#d0d0d0'
+// the canvas's grey scheme, for the backbone past the array when no ramp is
+// drawn anywhere else
+const BACKBONE = 'rgb(160, 160, 160)'
+
+function unitColor(units: RepeatUnit[], unit: string) {
+  const i = units.findIndex(u => u.unit === unit)
+  return i < 0 ? NO_ALLELE : UNIT_COLORS[i % UNIT_COLORS.length]!
+}
+
 const legendBoxStyle = {
   background: 'rgba(255,255,255,0.82)',
   padding: '4px 6px',
@@ -69,17 +106,58 @@ export const WalkRowsLegend = observer(function WalkRowsLegend({
   if (!bars) {
     return null
   }
-  const calls = bars.rows.flatMap(row => row.call ?? [])
+  const ramp = model.referenceRampDomain
+  const units = model.walkRowUnits
+  const drawn = [bars.reference, ...bars.rows]
+  const calls = drawn.flatMap(row =>
+    row.call && !row.call.sequences ? row.call : [],
+  )
   return (
     <div style={legendBoxStyle} data-testid="graph-walk-rows-legend">
-      <div style={legendRowStyle}>
-        <div style={{ ...swatchStyle, backgroundColor: ON_REFERENCE }} />
-        <span>sequence {bars.reference.label} also carries</span>
-      </div>
-      <div style={legendRowStyle}>
-        <div style={{ ...swatchStyle, backgroundColor: OFF_REFERENCE }} />
-        <span>sequence it does not</span>
-      </div>
+      {units ? (
+        <>
+          {units.map((unit, i) => (
+            <div key={unit.unit} style={legendRowStyle}>
+              <div
+                style={{
+                  ...swatchStyle,
+                  backgroundColor: unitColor(units, unit.unit),
+                }}
+              />
+              <span>
+                unit {i + 1} · {unit.unitLength.toLocaleString()} bp
+              </span>
+            </div>
+          ))}
+          {drawn.some(row => !row.call?.sequences) ? (
+            <div style={legendRowStyle}>
+              <div style={{ ...swatchStyle, backgroundColor: NO_ALLELE }} />
+              <span>no allele in the repeat track</span>
+            </div>
+          ) : null}
+        </>
+      ) : (
+        <>
+          <div style={legendRowStyle}>
+            <div
+              style={{
+                ...swatchStyle,
+                background: ramp ? RAMP_GRADIENT_CSS : ON_REFERENCE,
+              }}
+            />
+            <span>shared with {bars.reference.label}</span>
+          </div>
+          <div style={legendRowStyle}>
+            <div
+              style={{
+                ...swatchStyle,
+                backgroundColor: ramp ? REFERENCE_RAMP_ALT_CSS : OFF_REFERENCE,
+              }}
+            />
+            <span>carried by haplotypes only</span>
+          </div>
+        </>
+      )}
       {calls.some(call => call.spanningReads !== 0) ? (
         <div style={legendRowStyle}>
           <TickSwatch color={CALL_TICK} />
@@ -112,16 +190,27 @@ function units(bp: number, unit: number | undefined) {
   return unit ? ` ≈ ${Math.round(bp / unit)} units` : ''
 }
 
+// A call stating its runs counts its copies outright; otherwise the bar's
+// length in units is the estimate.
+function copies(bp: number, unit: number | undefined, call?: WalkCall) {
+  if (!call?.sequences) {
+    return units(bp, unit)
+  }
+  const n = call.sequences.reduce((sum, run) => sum + run.count, 0)
+  return ` · ${Number.isInteger(n) ? n : n.toFixed(1)} copies`
+}
+
 function readout(
-  bp: number,
+  row: { bp: number; complete: boolean; call?: WalkCall },
   referenceBp: number,
-  complete: boolean,
   unit: number | undefined,
 ) {
+  const { bp, complete, call } = row
   const delta = bp - referenceBp
   const against =
     delta === 0 ? '' : ` (${delta > 0 ? '+' : '−'}${kb(Math.abs(delta))})`
-  return `${kb(bp)}${units(bp, unit)}${against}${complete ? '' : ' · partial walk'}`
+  const called = call && !call.sequences ? calledReadout(call) : ''
+  return `${kb(bp)}${copies(bp, unit, call)}${against}${complete ? '' : ' · partial walk'}${called}`
 }
 
 function calledReadout(call: { bp: number; spanningReads?: number }) {
@@ -129,6 +218,26 @@ function calledReadout(call: { bp: number; spanningReads?: number }) {
   return ` · called ${kb(call.bp)}${unbacked}`
 }
 
+// Each run's extent from the bar's left end, and where each of its copies
+// starts: RUB's lengths where the record gives them, else the unit's.
+function runsOf(sequences: RepeatSequence[]) {
+  let at = 0
+  return sequences.map(run => {
+    const start = at
+    const lengths =
+      run.copyBp ??
+      Array.from({ length: Math.ceil(run.count) }, () => run.unitLength)
+    const copyStarts: number[] = []
+    let copy = start
+    for (const bp of lengths) {
+      copyStarts.push(copy)
+      copy += bp
+    }
+    at += run.bp
+    return { start, bp: run.bp, unit: run.unit, copyStarts }
+  })
+}
+
 // One separator per unit along a bar, so copies are countable, dropped when a
 // unit is under a few px. The reference bar is the canvas's, so it gets none.
 const MIN_TILE_PX = 3
@@ -144,12 +253,46 @@ function tileSeparators(bp: number, unit: number, X: (bp: number) => number) {
   return xs
 }
 
+// A shared run covers its reference contiguously, so a gradient along it
+// paints the hue of every base.
+function runFill(
+  run: WalkRun,
+  ramp: { start: number; end: number } | undefined,
+  gradientId: string,
+) {
+  if (!ramp) {
+    return { fill: run.onReference ? ON_REFERENCE : OFF_REFERENCE }
+  }
+  if (run.referenceStart === undefined) {
+    return { fill: REFERENCE_RAMP_ALT_CSS }
+  }
+  const stops = rampStops({ ...run, start: run.referenceStart }, ramp)
+  if (stops.length === 1) {
+    return { fill: rampHueCss(stops[0]!) }
+  }
+  return {
+    fill: `url(#${gradientId})`,
+    gradient: (
+      <linearGradient id={gradientId}>
+        {stops.map((hue, i) => (
+          <stop
+            key={i}
+            offset={i / (stops.length - 1)}
+            stopColor={rampHueCss(hue)}
+          />
+        ))}
+      </linearGradient>
+    ),
+  }
+}
+
 const WalkRowsOverlay = observer(function WalkRowsOverlay({
   model,
 }: {
   model: GraphPaneModel
 }) {
-  const { walkRowBars } = model
+  const idPrefix = useId().replace(/[^\w-]/g, '')
+  const { walkRowBars, referenceRampDomain: ramp } = model
   if (!walkRowBars) {
     return null
   }
@@ -164,8 +307,10 @@ const WalkRowsOverlay = observer(function WalkRowsOverlay({
   const X = (bp: number) => bp * scaleX + translateX
   const Y = (row: number) => row * ROW_HEIGHT_PX * scaleY + translateY
   const { origin, unit, reference, rows } = walkRowBars
+  const units = model.walkRowUnits
   // The backbone the canvas draws spans the cut window, which reaches past a
   // selected array on both sides, so the reference readout sits after it.
+  const backboneStart = Math.min(origin, model.graphRegion?.start ?? origin)
   const backboneEnd = Math.max(
     origin + reference.bp,
     model.graphRegion?.end ?? 0,
@@ -190,6 +335,62 @@ const WalkRowsOverlay = observer(function WalkRowsOverlay({
       </text>
     )
   }
+  const separators = (starts: number[], bp: number, y: number) =>
+    starts
+      .filter(k => k > 0 && k < bp)
+      .map(k => (
+        <line
+          key={k}
+          x1={X(origin + k)}
+          x2={X(origin + k)}
+          y1={y - BAR_PX / 2}
+          y2={y + BAR_PX / 2}
+          stroke="white"
+          strokeWidth={1}
+        />
+      ))
+  const rect = (start: number, bp: number, y: number, fill: string) => (
+    <rect
+      key={start}
+      x={X(origin + start)}
+      y={y - BAR_PX / 2}
+      width={Math.max(1, bp * scaleX)}
+      height={BAR_PX}
+      fill={fill}
+    />
+  )
+  // The paired allele's runs, cut at the end of the walk, over grey where it
+  // states none.
+  const unitBar = (
+    row: { bp: number; call?: WalkCall },
+    y: number,
+    painted: RepeatUnit[],
+  ) => {
+    const runs = row.call?.sequences ? runsOf(row.call.sequences) : []
+    const tiled = unit !== undefined && unit * scaleX >= MIN_TILE_PX
+    return (
+      <>
+        {rect(0, row.bp, y, NO_ALLELE)}
+        {runs
+          .filter(run => run.start < row.bp)
+          .map(run =>
+            rect(
+              run.start,
+              Math.min(run.bp, row.bp - run.start),
+              y,
+              unitColor(painted, run.unit),
+            ),
+          )}
+        {tiled
+          ? separators(
+              runs.flatMap(run => run.copyStarts),
+              row.bp,
+              y,
+            )
+          : null}
+      </>
+    )
+  }
   return (
     <svg
       style={svgStyle}
@@ -197,8 +398,21 @@ const WalkRowsOverlay = observer(function WalkRowsOverlay({
       height={canvasHeight}
       data-testid="graph-walk-rows"
     >
+      {units ? (
+        <>
+          <rect
+            x={X(backboneStart) - BAR_PX / 2}
+            y={Y(0) - BAR_PX / 2}
+            width={(backboneEnd - backboneStart) * scaleX + BAR_PX}
+            height={BAR_PX}
+            rx={BAR_PX / 2}
+            fill={BACKBONE}
+          />
+          {unitBar(reference, Y(0), units)}
+        </>
+      ) : null}
       {label(
-        `${kb(reference.bp)}${units(reference.bp, unit)}`,
+        `${kb(reference.bp)}${copies(reference.bp, unit, reference.call)}`,
         backboneEnd,
         Y(0),
       )}
@@ -210,30 +424,33 @@ const WalkRowsOverlay = observer(function WalkRowsOverlay({
         const { call } = row
         return (
           <g key={row.name} data-testid="graph-walk-row">
-            {row.runs.map(run => (
-              <rect
-                key={run.start}
-                x={X(origin + run.start)}
-                y={y - BAR_PX / 2}
-                width={Math.max(1, run.bp * scaleX)}
-                height={BAR_PX}
-                fill={run.onReference ? ON_REFERENCE : OFF_REFERENCE}
-              />
-            ))}
-            {unit
-              ? tileSeparators(row.bp, unit, bp => bp * scaleX).map(k => (
-                  <line
-                    key={k}
-                    x1={X(origin + k)}
-                    x2={X(origin + k)}
-                    y1={y - BAR_PX / 2}
-                    y2={y + BAR_PX / 2}
-                    stroke="white"
-                    strokeWidth={1}
-                  />
-                ))
-              : null}
-            {call ? (
+            {units ? (
+              unitBar(row, y, units)
+            ) : (
+              <>
+                {row.runs.map(run => {
+                  const { fill, gradient } = runFill(
+                    run,
+                    ramp,
+                    `${idPrefix}-${i}-${run.start}`,
+                  )
+                  return (
+                    <g key={run.start}>
+                      {gradient}
+                      {rect(run.start, run.bp, y, fill)}
+                    </g>
+                  )
+                })}
+                {unit
+                  ? separators(
+                      tileSeparators(row.bp, unit, bp => bp * scaleX),
+                      row.bp,
+                      y,
+                    )
+                  : null}
+              </>
+            )}
+            {call && !call.sequences ? (
               <rect
                 data-testid="graph-walk-call"
                 x={X(origin + call.bp) - 1}
@@ -244,7 +461,7 @@ const WalkRowsOverlay = observer(function WalkRowsOverlay({
               />
             ) : null}
             {label(
-              `${readout(row.bp, reference.bp, row.complete, unit)}${call ? calledReadout(call) : ''}`,
+              readout(row, reference.bp, unit),
               origin + row.bp,
               y,
               call?.agrees === false ? DISAGREES : undefined,

package/src/GraphGenomeView/components/referenceRampCss.test.ts

@@ -0,0 +1,27 @@
+import { rampHue, rampStops } from './referenceRampCss'
+
+const domain = { start: 1000, end: 2000 }
+
+test('the hue runs 0 to 300 across the domain and holds past its ends', () => {
+  expect(rampHue(1000, domain)).toBe(0)
+  expect(rampHue(1500, domain)).toBe(150)
+  expect(rampHue(2000, domain)).toBe(300)
+  expect(rampHue(0, domain)).toBe(0)
+  expect(rampHue(9000, domain)).toBe(300)
+})
+
+test('a span under a degree of hue reads as one flat hue', () => {
+  expect(rampStops({ start: 1500, bp: 2 }, domain)).toEqual([150.3])
+})
+
+test('stops step at most 30 degrees, from the far end when reversed', () => {
+  const forward = rampStops({ start: 1000, bp: 500 }, domain)
+  expect(forward).toEqual([0, 30, 60, 90, 120, 150])
+  expect(rampStops({ start: 1000, bp: 500, reversed: true }, domain)).toEqual(
+    [...forward].reverse(),
+  )
+})
+
+test('a span reaching past the domain holds its last hue there', () => {
+  expect(rampStops({ start: 1800, bp: 400 }, domain)).toEqual([240, 300, 300])
+})