jbrowse-plugin-graphgenomeviewer 7.4.3 → 7.5.0

package/src/GraphGenomeView/pane/loadActions.ts

@@ -9,6 +9,7 @@ import {
 import { walkRowLayoutOf } from '@jbrowse/bandage-core/layout/walkRowLayout'
 import { walkRowsOf } from '@jbrowse/bandage-core/layout/walkRowRuns'
 import { layoutModeByValue } from '@jbrowse/bandage-core/layoutModes'
+import { panSNHaplotype, panSNSample } from '@jbrowse/bandage-core/pansn'
 import {
   anchorFromPaths,
   chooseReferencePath,
@@ -93,6 +94,15 @@ export const withLoadActions = withEngineSettings.actions(self => {
     }) as Promise<{ result: LayoutResult; duration: number }>
   }
 
+  // the node cap is a drawing's cost
+  function assertDrawable(graph: Graph) {
+    if (graph.nodes.length > self.maxGraphNodes) {
+      throw new Error(
+        `Graph too large to draw: ${graph.nodes.length.toLocaleString()} nodes (limit ${self.maxGraphNodes.toLocaleString()}). Pick Layout → Walk rows, zoom in to a smaller region, or raise the node limit in Graph settings.`,
+      )
+    }
+  }
+
   // Single dispatch point for every layout mode. A mode that returns a
   // result computed it locally; one that returns undefined can't draw this
   // graph and hands off to the remote FMMM engine, which is also how
@@ -150,6 +160,8 @@ export const withLoadActions = withEngineSettings.actions(self => {
         mode: self.chosenLayoutMode,
       }
     }
+    // walk rows and tube maps fall back here for a graph with no walks
+    assertDrawable(graph)
     const settings = self.engineSettings
     const hit = forceLayouts.ready(graph, settings)
     if (hit) {
@@ -209,11 +221,9 @@ export const withLoadActions = withEngineSettings.actions(self => {
     const signal = loadController?.signal
     let computed
     try {
-      // the node cap is a drawing's cost, and walk rows draw a bar per walk
-      if (self.modeDrawsNodes && graph.nodes.length > self.maxGraphNodes) {
-        throw new Error(
-          `Graph too large to draw: ${graph.nodes.length.toLocaleString()} nodes (limit ${self.maxGraphNodes.toLocaleString()}). Pick Layout → Walk rows, zoom in to a smaller region, or raise the node limit in Graph settings.`,
-        )
+      // walk rows draw a bar per walk, not a node each
+      if (self.modeDrawsNodes) {
+        assertDrawable(graph)
       }
       computed = yield* computeLayout(graph)
     } catch (e) {
@@ -314,6 +324,7 @@ export const withLoadActions = withEngineSettings.actions(self => {
     self.indexBubbles = undefined
     self.geneTrackFeatures = undefined
     self.walkGeneFeatures = undefined
+    self.ownGeneFeatures = undefined
     walkGeneCache.clear()
     self.repeatArrays = undefined
     self.clearInteractionState()
@@ -478,11 +489,18 @@ export const withLoadActions = withEngineSettings.actions(self => {
         { adapterConfig, regions: [region], signal },
       )) as Feature[]
     } catch (e) {
-      console.warn(`[GraphGenomeView] no ${what} for this graph`, e)
+      // a cut the next one replaced aborts its reads, which is not a failure
+      if (!signal?.aborted) {
+        console.warn(`[GraphGenomeView] no ${what} for this graph`, e)
+      }
       return undefined
     }
   }
 
+  // Bubble indexes a read failed on, so a graph without one, the ordinary
+  // case, is not asked again on every re-cut of a pan
+  const missingBubbleIndexes = new Set<string>()
+
   // The bubble index that the hosted HPRC build keeps beside its segments,
   // `<prefix>.bubbles.bed.gz`, read through the bubble adapter over the same
   // window. A graph whose source has no such file, the ordinary case for a
@@ -499,13 +517,18 @@ export const withLoadActions = withEngineSettings.actions(self => {
     // The track config arrives as written, so the prefix is either the
     // `uri` shorthand or the segments location it expands to.
     const prefix = bubblePrefix(adapterConfig)
-    if (adapterConfig.type !== 'RgfaTabixAdapter' || prefix === undefined) {
+    const uri = `${prefix}.bubbles.bed.gz`
+    if (
+      adapterConfig.type !== 'RgfaTabixAdapter' ||
+      prefix === undefined ||
+      missingBubbleIndexes.has(uri)
+    ) {
       return
     }
     const features = yield* readFeatures(
       {
         type: 'MinigraphBubbleAdapter',
-        uri: `${prefix}.bubbles.bed.gz`,
+        uri,
         baseUri: adapterConfig.baseUri,
         assemblyNameToPanSN: adapterConfig.assemblyNameToPanSN,
       },
@@ -513,6 +536,9 @@ export const withLoadActions = withEngineSettings.actions(self => {
       'bubble index',
       signal,
     )
+    if (features === undefined && !signal?.aborted) {
+      missingBubbleIndexes.add(uri)
+    }
     if (features && isLive()) {
       self.indexBubbles = features.flatMap(f => {
         const start = f.get('start')
@@ -559,6 +585,25 @@ export const withLoadActions = withEngineSettings.actions(self => {
     )
   }
 
+  // A haplotype assembly's genes over a span of its own contig, named for
+  // that contig whatever the track calls it, read once per cut
+  function* haplotypeGenes(trackId: string, region: SubgraphRegion) {
+    const cacheKey = `${trackId} ${region.refName}:${region.start}-${region.end}`
+    let genes = walkGeneCache.get(cacheKey)
+    if (!genes) {
+      const features = yield* trackFeatures(trackId, region, 'haplotype genes')
+      if (!features) {
+        return undefined
+      }
+      genes = geneModelsFrom(features).map(g => ({
+        ...g,
+        refName: region.refName,
+      }))
+      walkGeneCache.set(cacheKey, genes)
+    }
+    return genes
+  }
+
   // The annotation tracks read over the cut: genes, which `geneFeatures`
   // makes genes of for the backbone to carry, and tandem repeat arrays, for
   // the walk rows to measure between and tile by
@@ -860,24 +905,10 @@ export const withLoadActions = withEngineSettings.actions(self => {
       yield Promise.all(
         reads.map(({ row, trackId, region }) =>
           flow(function* () {
-            const cacheKey = `${trackId} ${region.refName}:${region.start}-${region.end}`
-            let genes = walkGeneCache.get(cacheKey)
-            if (!genes) {
-              const features = yield* trackFeatures(
-                trackId,
-                region,
-                'haplotype genes',
-              )
-              if (!features) {
-                return
-              }
-              genes = geneModelsFrom(features).map(g => ({
-                ...g,
-                refName: region.refName,
-              }))
-              walkGeneCache.set(cacheKey, genes)
+            const genes = yield* haplotypeGenes(trackId, region)
+            if (genes) {
+              fetched.set(row, genes)
             }
-            fetched.set(row, genes)
           })(),
         ),
       )
@@ -889,6 +920,35 @@ export const withLoadActions = withEngineSettings.actions(self => {
         self.walkGeneFeatures = reads.length ? fetched : undefined
       }
     }),
+    // Each loaded haplotype's genes on its own off-reference nodes, renamed
+    // to those nodes' stable sequence so genePins lands them there
+    loadOwnGenes: flow(function* () {
+      const reads = self.ownGeneReads
+      const key = JSON.stringify(reads)
+      const graph = self.graph
+      const fetched = (yield Promise.all(
+        reads.map(({ stableRefName, trackId, region }) =>
+          flow(function* () {
+            const genes = yield* haplotypeGenes(trackId, region)
+            // a chip reading LPA twice would not say whose copy each is
+            const whose =
+              panSNHaplotype(stableRefName) ?? panSNSample(stableRefName)
+            return (genes ?? []).map(g => ({
+              ...g,
+              name: `${g.name} · ${whose}`,
+              refName: stableRefName,
+            }))
+          })(),
+        ),
+      )) as GeneModel[][]
+      if (
+        isAlive(self) &&
+        self.graph === graph &&
+        JSON.stringify(self.ownGeneReads) === key
+      ) {
+        self.ownGeneFeatures = reads.length ? fetched.flat() : undefined
+      }
+    }),
     // Open a bubble in place: it keeps its colour, the rest of the drawing
     // greys, and the bubbles inside it get labels of their own. Opening an
     // open one closes it and those inside it.

package/src/GraphGenomeView/pane/morph.test.ts

@@ -1,5 +1,5 @@
 import { abgrAlpha, packAbgr } from '@jbrowse/bandage-core/renderer/colorBits'
-import { expect, test } from 'vitest'
+import { expect, test, vi } from 'vitest'
 
 import {
   blendInto,
@@ -7,6 +7,7 @@ import {
   fadeEntering,
   morphStarts,
   routeStarts,
+  runMorph,
 } from './morph'
 
 import type { RenderBatch } from '@jbrowse/bandage-core/renderer/types'
@@ -248,3 +249,26 @@ test('a graph past the frame budget snaps', () => {
   expect(canMorph(free, free, 3000, false)).toBe(true)
   expect(canMorph(free, free, 3001, false)).toBe(false)
 })
+
+// The layout cache holds the positions a morph blends, so a morph abandoned
+// half way would leave a cached layout half blended for the next cache hit
+test('a morph cut short lands its last frame', () => {
+  const frames: FrameRequestCallback[] = []
+  vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) =>
+    frames.push(cb),
+  )
+  const blends: number[] = []
+  let live = true
+  const ended = vi.fn()
+  runMorph(
+    t => blends.push(t),
+    () => live,
+    ended,
+  )
+  frames.shift()!(0)
+  live = false
+  frames.shift()!(0)
+  expect(blends.at(-1)).toBe(1)
+  expect(ended).toHaveBeenCalledTimes(1)
+  vi.unstubAllGlobals()
+})

package/src/GraphGenomeView/pane/morph.ts

@@ -314,7 +314,8 @@ export function motionAllowed() {
 }
 
 // Calls `blend` with the eased progress once a frame for MORPH_MS while
-// `isLive` holds, then `onEnd`. `finish` jumps to the last frame.
+// `isLive` holds, then `onEnd`. `finish` jumps to the last frame, as does a
+// morph cut short, since the layout cache keeps the positions it blends.
 export function runMorph(
   blend: (t: number) => void,
   isLive: () => boolean,
@@ -330,6 +331,7 @@ export function runMorph(
   let last = performance.now()
   const step = () => {
     if (!isLive()) {
+      blend(1)
       onEnd()
       return
     }

package/src/GraphGenomeView/pane/paneBase.ts

@@ -95,6 +95,8 @@ export const VIEWPORT_DEBOUNCE_MS = 150
 export const VIEWPORT_PANES_BUILT = 1
 // How many walk rows read their haplotype's genes, the first rows down
 export const WALK_GENE_ROWS = 40
+// How many off-reference contigs read their haplotype's genes
+export const OWN_GENE_CONTIGS = 40
 
 // What the canvas draws under the tube map, whose ink is all TubeMapOverlay's
 export type TubeMapRoutes = 'each' | 'grouped' | 'bundled'
@@ -177,13 +179,6 @@ export function fileName(location: FileLocation) {
   return path.split(/[\\/]/).at(-1) ?? ''
 }
 
-// A url bandage-figure can read again, or undefined for a local file
-export function uriOf(location: FileLocation | undefined) {
-  return location && 'uri' in location && location.uri
-    ? new URL(location.uri, location.baseUri ?? window.location.href).href
-    : undefined
-}
-
 type ViewportOwner = 'fit' | 'user' | 'host'
 
 interface BuiltViewport {
@@ -366,6 +361,9 @@ export const paneBase = types
     // each walk row's genes, read from its haplotype's own assembly, by walk
     // name
     walkGeneFeatures: undefined as Map<string, GeneModel[]> | undefined,
+    // each loaded haplotype's genes on its own nodes off the reference, under
+    // those nodes' stable names (ownGeneReads)
+    ownGeneFeatures: undefined as GeneModel[] | undefined,
     // the source track's samples TSV, which walk rows group by
     walkRowSampleTable: undefined as SampleRow[] | undefined,
     // the tandem repeat arrays over the cut window, from the repeat track

package/src/GraphGenomeView/pane/renderingActions.ts

@@ -1,3 +1,4 @@
+import { sameBubble } from '@jbrowse/bandage-core/bubbles/bubbleLine'
 import { contains } from '@jbrowse/bandage-core/viewport'
 import { getSession } from '@jbrowse/core/util'
 import { addDisposer } from '@jbrowse/mobx-state-tree'
@@ -11,11 +12,16 @@ import {
   paneViewportOf,
 } from './paneBase'
 import {
+  bubbleForLgvHover,
+  hoverFromPair,
   hoverInRegion,
   nodeForLgvHover,
   readLgvHover,
+  readSelectedFeature,
 } from '../../hoverSync/lgvHover'
 import { walksForRow } from '../../hoverSync/rowWalks'
+import { isRecord } from '../../isRecord'
+import { withRows } from '../../launchFromGraph/linearViewTarget'
 import { trackedDpr } from '../trackedDpr'
 
 import type { LayoutEngineKind } from '@jbrowse/bandage-core/layoutEngines'
@@ -88,6 +94,23 @@ export const withRenderingActions = withLoadActions
             },
           ),
         )
+        // and the haplotypes' own genes on their nodes off the reference
+        addDisposer(
+          self,
+          reaction(
+            () => ({
+              graph: self.graph,
+              reads: JSON.stringify(self.ownGeneReads),
+            }),
+            () => {
+              void self.loadOwnGenes()
+            },
+            {
+              fireImmediately: true,
+              equals: (a, b) => a.graph === b.graph && a.reads === b.reads,
+            },
+          ),
+        )
         // Walk rows and tube map panels read the source track's samples
         // TSV, to group by its columns, again for a graph after a dropped one
         addDisposer(
@@ -145,8 +168,16 @@ export const withRenderingActions = withLoadActions
             untracked(() => {
               const region = self.graphRegion
               const graph = self.graph
+              const liveViewIds = new Set(
+                withRows([...getSession(self).views]).flatMap(v =>
+                  isRecord(v) && typeof v.id === 'string' ? [v.id] : [],
+                ),
+              )
               const inRegion =
-                hover && region && hoverInRegion(hover, region)
+                hover &&
+                region &&
+                hoverInRegion(hover, region) &&
+                hoverFromPair(hover, self.pairedViewId, liveViewIds)
                   ? hover
                   : undefined
               // a row naming a walk is the hover, not the node at its bp,
@@ -155,9 +186,14 @@ export const withRenderingActions = withLoadActions
                 inRegion?.featureName && graph?.paths
                   ? walksForRow(inRegion.featureName, graph.paths)
                   : []
+              // a bubble track's feature, or a graph-derived VCF record,
+              // names a whole bubble, which lights whatever the setting
+              const bubble =
+                inRegion && bubbleForLgvHover(inRegion, self.bubbles)
               if (region && graph && !self.pointerInPane) {
+                self.setHoveredBubble(bubble ?? null)
                 self.setHoveredNode(
-                  inRegion && lightsNode && rowWalks.length === 0
+                  inRegion && lightsNode && rowWalks.length === 0 && !bubble
                     ? nodeForLgvHover({ hover: inRegion, nodes: graph.nodes })
                     : null,
                 )
@@ -167,6 +203,29 @@ export const withRenderingActions = withLoadActions
           }),
         )
 
+        // A click on a bubble feature or graph-derived variant in a linear
+        // view opens its bubble here, as clicking its label would
+        addDisposer(
+          self,
+          reaction(
+            () => readSelectedFeature(getSession(self).selection),
+            selected => {
+              const region = self.graphRegion
+              const bubble =
+                selected &&
+                region &&
+                hoverInRegion(selected, region) &&
+                bubbleForLgvHover(selected, self.bubbles)
+              if (
+                bubble &&
+                !self.openBubbles.some(open => sameBubble(open, bubble))
+              ) {
+                self.toggleBubble(bubble)
+              }
+            },
+          ),
+        )
+
         // Reaction: drop a hover the pointer cannot still be over.
         //
         // A hover is set by a mousemove on the canvas, and here the drawing

package/src/GraphGenomeView/pane/settingActions.ts

@@ -20,7 +20,7 @@ import { nodeOwnLocation } from '../../launchFromGraph/contributors'
 import { withRows } from '../../launchFromGraph/linearViewTarget'
 import { withLayer } from '../graphLayers'
 import { colorOfScheme } from '../nodeColor'
-import { sizeOfNodeWidth } from '../nodeSize'
+import { sizeOf } from '../nodeSize'
 
 import type { GraphGrammar } from './graphViews'
 import type { ScreenTransform } from './keepInView'
@@ -32,6 +32,7 @@ import type { WalkRowGroupBy } from '../walkRowGroups'
 import type { BubbleSpread } from '@jbrowse/bandage-core/bubbleSpreads'
 import type { MinigraphBubble } from '@jbrowse/bandage-core/bubbles/bubbleLine'
 import type { ColorScheme } from '@jbrowse/bandage-core/colorSchemes'
+import type { EdgeWidth } from '@jbrowse/bandage-core/edgeWidths'
 import type { FacetSetting } from '@jbrowse/bandage-core/facetGrid'
 import type { LayoutEngineKind } from '@jbrowse/bandage-core/layoutEngines'
 import type { LayoutModeValue } from '@jbrowse/bandage-core/layoutModes'
@@ -44,6 +45,8 @@ import type {
   WalkLayer,
 } from '@jbrowse/bandage-core/walkEncoding'
 
+const ROW_HOVER_SETTLE_MS = 80
+
 export const withSettingActions = withTubeMapViews
   .actions(() => ({
     // each host overrides: a view assigns its props, a track display writes
@@ -166,7 +169,20 @@ export const withSettingActions = withTubeMapViews
     },
     setNodeWidth(width: NodeWidth) {
       self.writeGrammar({
-        size: sizeOfNodeWidth(width, self.contigThickness),
+        size: sizeOf({
+          width,
+          px: self.contigThickness,
+          links: self.linkWidth,
+        }),
+      })
+    },
+    setLinkWidth(links: EdgeWidth) {
+      self.writeGrammar({
+        size: sizeOf({
+          width: self.nodeWidth,
+          px: self.contigThickness,
+          links,
+        }),
       })
     },
     setTubeMapFold(bp: number) {
@@ -237,7 +253,19 @@ export const withSettingActions = withTubeMapViews
       )
     },
     setWalkRowSamples(samples: string[] | undefined) {
-      self.writeGrammar({ rows: samples ? { kept: samples } : {} })
+      const order = self.walkRowOrder
+      self.writeGrammar({
+        rows: {
+          ...(samples ? { kept: samples } : {}),
+          ...(order ? { order } : {}),
+        },
+      })
+    },
+    setWalkRowOrder(order: 'shared' | undefined) {
+      const kept = self.walkRowSamples
+      self.writeGrammar({
+        rows: { ...(kept ? { kept } : {}), ...(order ? { order } : {}) },
+      })
     },
     setWalkRowGroupBy(groupBy: WalkRowGroupBy | undefined) {
       if (groupBy || self.walkRowGroupBy) {
@@ -276,7 +304,7 @@ export const withSettingActions = withTubeMapViews
         self.hoveredTube = tube
       }
     },
-    setHoveredRowWalks(walks: string[]) {
+    applyHoveredRowWalks(walks: string[]) {
       if (walks.join('\n') !== self.hoveredRowWalks.join('\n')) {
         self.hoveredRowWalks = walks
       }
@@ -469,6 +497,36 @@ export const withSettingActions = withTubeMapViews
       self.builtViewport = undefined
     },
   }))
+  .actions(self => {
+    let settle: ReturnType<typeof setTimeout> | undefined
+    let pending: string | undefined
+    return {
+      // A lane row's lift rebuilds the drawing (43 ms at 10k nodes), and a
+      // sweep down a lane crosses a row every few px, so a move from one row
+      // to the next lifts once the pointer has stayed on a row a moment.
+      // Entering and leaving the rows apply at once.
+      setHoveredRowWalks(walks: string[]) {
+        const key = walks.join('\n')
+        if (key === pending) {
+          return
+        }
+        clearTimeout(settle)
+        pending = undefined
+        if (walks.length > 0 && self.hoveredRowWalks.length > 0) {
+          pending = key
+          settle = setTimeout(() => {
+            pending = undefined
+            // a hover cleared meanwhile, by a pan, stays cleared
+            if (isAlive(self) && self.hoveredRowWalks.length > 0) {
+              self.applyHoveredRowWalks(walks)
+            }
+          }, ROW_HOVER_SETTLE_MS)
+        } else {
+          self.applyHoveredRowWalks(walks)
+        }
+      },
+    }
+  })
   .actions(self => ({
     // The frame clock. Unclamped, since clampZoom's floor is there to keep a
     // scale finite and 1 / bpPerPx already is; clamped, a whole-chromosome

package/src/GraphGenomeView/pane/walkRowViews.ts

@@ -18,6 +18,7 @@ import { resolveLocationAssembly } from '../../launchFromGraph/contributors'
 
 import type { SubgraphRegion } from '../../GetSubgraph'
 import type { WalkAxis, WalkRow } from '@jbrowse/bandage-core/layout/walkRows'
+import type { LayoutModeValue } from '@jbrowse/bandage-core/layoutModes'
 
 export const withWalkRowViews = withLaunchViews
   .views(self => ({
@@ -47,13 +48,23 @@ export const withWalkRowViews = withLaunchViews
       }
       return walkStripFrame(bars, { width: self.paneWidth })
     },
-    // Whether a cut must follow every snarl a walk leaves the window by, so
-    // walks come back whole: walk rows measure them, and so does the strip
+    // Whether a cut under `mode` must follow every snarl a walk leaves the
+    // window by, so walks come back whole: walk rows measure them, and so does
+    // the strip under a layout that draws nodes. Only a GBZ cut follows
+    // snarls; a walk file cuts the same either way, so asking would re-fetch
+    // an identical graph.
+    cutsWholeWalksIn(mode: LayoutModeValue, walkStrip = self.walkStrip) {
+      const m = layoutModeByValue(mode)
+      return (
+        self.sourceAdapter?.type === 'GbzBaseSyntenyAdapter' &&
+        wholeWalksRule(m, {
+          walkStrip: walkStrip && m.drawsNodes,
+          host: !!self.host,
+        })
+      )
+    },
     get cutsWholeWalks() {
-      return wholeWalksRule(layoutModeByValue(self.chosenLayoutMode), {
-        walkStrip: self.walkStrip,
-        host: !!self.host,
-      })
+      return this.cutsWholeWalksIn(self.chosenLayoutMode)
     },
     // Where each walk passes the hovered node, or the selected one
     get walkStripMarks() {

package/src/GraphGenomeView/tubeMapPanels.ts

@@ -215,9 +215,10 @@ export function walksThrough(graph: Graph, box: string) {
   for (const p of graph.paths ?? []) {
     const walk = walkOf(p.name)
     if (walk !== graph.referencePath) {
+      const through = p.nodeIds.includes(box)
       for (const member of p.members ?? [walk]) {
         all.add(member)
-        if (p.nodeIds.includes(box)) {
+        if (through) {
           here.add(member)
         }
       }

package/src/GraphGenomeView/viewModel.ts

@@ -1,7 +1,4 @@
-import {
-  LAYOUT_MODE_VALUES,
-  layoutModeByValue,
-} from '@jbrowse/bandage-core/layoutModes'
+import { LAYOUT_MODE_VALUES } from '@jbrowse/bandage-core/layoutModes'
 import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models'
 import { getSession } from '@jbrowse/core/util'
 import { addDisposer, isAlive, types } from '@jbrowse/mobx-state-tree'
@@ -93,9 +90,6 @@ export default function stateModelFactory() {
       get paneMeasured() {
         return self.widthMeasured
       },
-      get sourceGfaLocation() {
-        return self.gfaLocation
-      },
       get sourceTrack(): AnyConfigurationModel | undefined {
         return self.loadedTrackId
           ? self.sessionTrack(self.loadedTrackId)
@@ -225,10 +219,11 @@ export default function stateModelFactory() {
           self,
           reaction(
             () => self.walkStrip,
-            () => {
+            on => {
               if (
                 self.loadedTrackId &&
-                !layoutModeByValue(self.chosenLayoutMode).wholeWalks
+                self.cutsWholeWalks !==
+                  self.cutsWholeWalksIn(self.chosenLayoutMode, !on)
               ) {
                 void self.load()
               }

package/src/GraphGenomeView/walkRowBlocks.ts

@@ -0,0 +1,50 @@
+import type { WalkRowBlock } from '@jbrowse/bandage-core/layout/walkRowLinks'
+
+// ggbandage's: the three biggest blocks in colour, the rest a pale grey that
+// still carries its letter
+const BLOCK_COLORS = ['#d4735e', '#d8a94a', '#c98aa4']
+const OTHER_BLOCK = '#e6e6e6'
+const BLOCK_EDGE = '#555'
+const LETTER_FONT = 'bold 11px sans-serif'
+const MIN_LETTER_PX = 12
+const MIN_LETTER_BAR_PX = 9
+
+export const blockFill = (block: number) => BLOCK_COLORS[block] ?? OTHER_BLOCK
+
+// A, B, ... Z, then AA, AB, ...
+export function blockLetter(block: number): string {
+  const letter = String.fromCharCode(65 + (block % 26))
+  return block < 26 ? letter : blockLetter(Math.floor(block / 26) - 1) + letter
+}
+
+// How many blocks get a colour of their own, for the key
+export const COLORED_BLOCKS = BLOCK_COLORS.length
+
+// Each stretch as a box over its row's bar, lettered where it is wide enough
+export function paintWalkRowBlocks(
+  ctx: CanvasRenderingContext2D,
+  blocks: WalkRowBlock[],
+  f: {
+    x: (offset: number) => number
+    rowCentre: (row: number) => number
+    barPx: number
+  },
+) {
+  ctx.font = LETTER_FONT
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  for (const { row, start, bp, block } of blocks) {
+    const left = f.x(start)
+    const width = f.x(start + bp) - left
+    const top = f.rowCentre(row) - f.barPx / 2
+    ctx.fillStyle = blockFill(block)
+    ctx.fillRect(left, top, width, f.barPx)
+    ctx.strokeStyle = BLOCK_EDGE
+    ctx.lineWidth = 1
+    ctx.strokeRect(left + 0.5, top + 0.5, width - 1, f.barPx - 1)
+    if (width >= MIN_LETTER_PX && f.barPx >= MIN_LETTER_BAR_PX) {
+      ctx.fillStyle = '#111'
+      ctx.fillText(blockLetter(block), left + width / 2, f.rowCentre(row))
+    }
+  }
+}