jbrowse-plugin-graphgenomeviewer 4.0.11 → 4.0.13

package/src/GraphGenomeView/model.ts

@@ -18,6 +18,7 @@ import {
 } from '@jbrowse/bandage-core/colorSchemes'
 import { deletionEdges } from '@jbrowse/bandage-core/deletionEdges'
 import { genePins } from '@jbrowse/bandage-core/genes/genePins'
+import { rowLabelBox } from '@jbrowse/bandage-core/graphLabels'
 import { layoutLabels } from '@jbrowse/bandage-core/labelLayout'
 import { ROW_HEIGHT_PX } from '@jbrowse/bandage-core/layout/rowSpacing'
 import { walkRowsExtent } from '@jbrowse/bandage-core/layout/walkRowLayout'
@@ -29,7 +30,10 @@ import {
   modeUsesLayoutEngine,
 } from '@jbrowse/bandage-core/layoutModes'
 import { NODE_WIDTH_VALUES, nodeInk } from '@jbrowse/bandage-core/nodeWidths'
-import { anchorFromPaths } from '@jbrowse/bandage-core/pathAnchoring'
+import {
+  anchorFromPaths,
+  chooseReferencePath,
+} from '@jbrowse/bandage-core/pathAnchoring'
 import { pathColorsLegible, pathLegend } from '@jbrowse/bandage-core/pathColors'
 import {
   FIT_PADDING,
@@ -41,6 +45,12 @@ import {
   forceLayout,
   loadGraph,
 } from '@jbrowse/bandage-core/pipeline'
+import {
+  assemblyWalk,
+  backboneAssembly,
+  featuresOnBackbone,
+  graphBackbone,
+} from '@jbrowse/bandage-core/reference'
 import {
   buildNeighbors,
   nodeReferenceSpan,
@@ -49,11 +59,28 @@ import {
   buildGeometry,
   computeReferenceRamp,
 } from '@jbrowse/bandage-core/renderer/GeometryBuilder'
+import {
+  referenceBoxes,
+  rulerBoxes,
+  rulerMarks,
+} from '@jbrowse/bandage-core/tubeMap/axis'
+import { coarsenTubeMap } from '@jbrowse/bandage-core/tubeMap/coarsen'
+import {
+  connectorAt,
+  referenceNodes,
+  tubeMapConnectors,
+} from '@jbrowse/bandage-core/tubeMap/connectors'
+import { deviationMarks } from '@jbrowse/bandage-core/tubeMap/deviations'
 import { tubeMapPicture } from '@jbrowse/bandage-core/tubeMap/draw'
 import {
   tubeMapFrame,
   tubeMapNodeAt,
 } from '@jbrowse/bandage-core/tubeMap/frame'
+import {
+  GENE_ROW_PX,
+  tubeMapGeneRows,
+  tubeMapGenes,
+} from '@jbrowse/bandage-core/tubeMap/genes'
 import {
   axisScaleOf,
   contains,
@@ -130,6 +157,7 @@ import type { GeneModel } from '@jbrowse/bandage-core/genes/genePins'
 import type { LayoutModeValue } from '@jbrowse/bandage-core/layoutModes'
 import type { NodeWidth } from '@jbrowse/bandage-core/nodeWidths'
 import type { Bounds, EngineRequest } from '@jbrowse/bandage-core/pipeline'
+import type { AssemblyNames } from '@jbrowse/bandage-core/reference'
 import type {
   RenderBatch,
   Renderer,
@@ -155,6 +183,21 @@ const MAX_CANVAS_HEIGHT = 600
 // leaves room to hover a node and read its tooltip.
 const MIN_CANVAS_HEIGHT = 160
 const VARIANT_MAP_HEIGHT = 340
+// The thinnest a fit draws a tube map's tubes
+const MIN_FIT_TUBE_PX = 5
+
+const TUBE_MAP_MODES = new Set<string>(['tubemap', 'tubemapref'])
+
+// The sizes a tube map folds variants under. MICB's 22 kb cut draws 475
+// columns whole, 34 under 3 bp and one under 50, where only its structural
+// variants would stand: human windows are mostly SNPs.
+const TUBE_MAP_FOLDS = [
+  { bp: 0, label: 'None' },
+  { bp: 3, label: 'Under 3 bp' },
+  { bp: 10, label: 'Under 10 bp' },
+  { bp: 50, label: 'Under 50 bp, leaving structural variants' },
+  { bp: 1000, label: 'Under 1 kb' },
+]
 
 const SEGMENTS_SUFFIX = '.segs.bed.gz'
 
@@ -374,6 +417,10 @@ export function GraphPaneMixin() {
         // The session's genes drawn onto the backbone: exons along the nodes
         // that carry them, names pinned at their midpoints. See genes/.
         showGenes: types.optional(types.boolean, true),
+        // Variants under this many bp fold into the reference before a tube map
+        // is laid out, each kept as a tick on its walk's tube (coarsen.ts); 0
+        // draws every one
+        tubeMapFold: types.optional(types.number, 0),
         // Which track the genes come from; empty picks the assembly's
         // annotation track (pickGeneTrack).
         geneTrackId: types.optional(types.string, ''),
@@ -441,6 +488,11 @@ export function GraphPaneMixin() {
       graph: undefined as Graph | undefined,
       // the reference window the graph on screen was cut for, set with it
       graphRegion: undefined as SubgraphRegion | undefined,
+      // The walk the track's graph lies on for the region's assembly, which
+      // the track's config declares; x starts along it unless the user chose
+      // another. Undefined for an rGFA, whose backbone is fixed, and for a
+      // graph with no region.
+      loadedReferencePath: undefined as string | undefined,
       layoutResult: undefined as LayoutResult | undefined,
       // what the legends in the pane's top-right corner measure, so no label
       // is placed under them
@@ -552,10 +604,18 @@ export function GraphPaneMixin() {
       get paneWidth() {
         return getContainingView(self).width
       },
+      // The graph the drawing's node ids address: a folded tube map's coarse
+      // graph, the cut otherwise. Hover, details and labels read it, so a
+      // merged node reports its own span and length.
+      get drawnGraph() {
+        return self.layoutResult?.tubeMap?.coarse?.graph ?? self.graph
+      },
+    }))
+    .views(self => ({
       get nodeById() {
-        if (self.graph) {
+        if (self.drawnGraph) {
           const m = new Map<string, GraphNode>()
-          for (const n of self.graph.nodes) {
+          for (const n of self.drawnGraph.nodes) {
             m.set(n.id, n)
           }
           return m
@@ -568,7 +628,7 @@ export function GraphPaneMixin() {
       // allocation on a 30k-node cut).
       get nodeLengths() {
         const m = new Map<string, number>()
-        for (const n of self.graph?.nodes ?? []) {
+        for (const n of self.drawnGraph?.nodes ?? []) {
           m.set(n.id, n.length)
         }
         return m
@@ -805,14 +865,71 @@ export function GraphPaneMixin() {
       get selectedRepeat() {
         return self.repeatChoices.find(r => r.key === self.repeatKey)
       },
+      get backbone() {
+        return self.graph ? graphBackbone(self.graph) : undefined
+      },
+      // An assembly by each name a backbone may spell it with: the session's
+      // name and aliases, and the PanSN prefix the source track maps each of
+      // those to.
+      assemblySpellings(assemblyName: string): AssemblyNames {
+        const { assemblyManager } = getSession(self)
+        const assembly = assemblyManager.has(assemblyName)
+          ? assemblyManager.get(assemblyName)
+          : undefined
+        const panSN = (self.sourceAdapter?.assemblyNameToPanSN ?? {}) as Record<
+          string,
+          string
+        >
+        const names = [
+          assemblyName,
+          ...(assembly ? [assembly.name, ...assembly.aliases] : []),
+        ]
+        return {
+          name: assemblyName,
+          aliases: [...names, ...names.flatMap(n => panSN[n] ?? [])],
+        }
+      },
+      // Whether x lies along the reference the track's graph came with, not a
+      // walk "Draw x along" picked. An rGFA's backbone is fixed.
+      get drawsLoadedReference() {
+        const graph = self.graph
+        return (
+          graph?.anchoredBy === 'tags' ||
+          (graph?.referencePath !== undefined &&
+            graph.referencePath === self.loadedReferencePath)
+        )
+      },
+    }))
+    .views(self => ({
+      // the assembly the genes were read for
+      get geneAssembly() {
+        const region = self.graphRegion
+        return region ? self.assemblySpellings(region.assemblyName) : undefined
+      },
+    }))
+    .views(self => ({
+      // The genes on the drawn backbone under its own refNames. The track's
+      // config puts its reference on the cut's assembly, whatever the walk's
+      // name. After "Draw x along" another walk, the backbone takes the genes
+      // only where its PanSN prefix names their assembly.
+      get backboneGenes() {
+        const { backbone, geneAssembly, geneFeatures } = self
+        const binds =
+          self.drawsLoadedReference ||
+          (geneAssembly !== undefined &&
+            backboneAssembly(backbone, [geneAssembly]) !== undefined)
+        return backbone && geneFeatures && binds
+          ? featuresOnBackbone(geneFeatures, backbone)
+          : undefined
+      },
     }))
     .views(self => ({
       get nodeNeighbors() {
-        return self.graph ? buildNeighbors(self.graph) : undefined
+        return self.drawnGraph ? buildNeighbors(self.drawnGraph) : undefined
       },
       get nodeInk(): NodeInk {
         return nodeInk(
-          self.graph,
+          self.drawnGraph,
           self.nodeById,
           self.contigThickness,
           self.nodeWidth,
@@ -853,7 +970,20 @@ export function GraphPaneMixin() {
                   a.label.localeCompare(b.label),
               )
           : bars.rows
-        return { ...bars, rows: withCalls(rows, repeat?.calls) }
+        const [reference, ...paired] = withCalls(
+          [bars.reference, ...rows],
+          repeat?.calls,
+        )
+        return { ...bars, reference: reference!, rows: paired }
+      },
+      // The units walk rows paint every bar by, once the selected repeat's
+      // record states a drawn walk's runs.
+      get walkRowUnits() {
+        const bars = this.walkRowBars
+        return bars &&
+          [bars.reference, ...bars.rows].some(row => row.call?.sequences)
+          ? self.selectedRepeat?.units
+          : undefined
       },
       // The labels drawn beside the rows. Walk rows label from the bars
       // themselves, which follow the selected repeat and sample filter that
@@ -867,6 +997,14 @@ export function GraphPaneMixin() {
             }))
           : self.rowLabels
       },
+      // The row labels are pinned to the pane's left edge, so the fit starts
+      // the drawing past the widest one.
+      get fitPadLeft() {
+        return Math.max(
+          FIT_PADDING,
+          ...this.drawnRowLabels.map(r => rowLabelBox(r.label, 0).x1 + 6),
+        )
+      },
       // Each bubble in the window with what it is, for the variant map's
       // glyphs on the reference line.
       get bubbleGlyphs() {
@@ -886,9 +1024,9 @@ export function GraphPaneMixin() {
           self.chosenLayoutMode !== 'walkrows' &&
           !self.layoutResult?.tubeMap &&
           self.graph &&
-          self.geneFeatures &&
+          self.backboneGenes &&
           positions
-          ? genePins(self.graph, self.geneFeatures, positions)
+          ? genePins(self.graph, self.backboneGenes, positions)
           : []
       },
       // The same bubbles over every other layout, as halos along their nodes.
@@ -990,54 +1128,6 @@ export function GraphPaneMixin() {
             })
           : undefined
       },
-      // The pane is as tall as the drawing, rather than a fixed box the drawing
-      // floats in the middle of.
-      //
-      // A row layout says how tall it is outright: rows are px, so the drawing's
-      // height is the row count times the pitch and this is a sum, not a
-      // derivation. It used to be derived from the drawing's ASPECT RATIO
-      // against the x-fit scale, because y was in bp and a height in px did not
-      // exist until a scale was chosen — which is also why a ceiling had to be
-      // put on the row pitch to stop tall graphs from binding the fit on the
-      // wrong axis. Both are gone with the unit.
-      //
-      // An isotropic layout still has no height of its own and keeps the aspect
-      // derivation. It reads neither `scale` nor the height it is replacing, so
-      // zoomToFit consumes this without feeding back into it.
-      get canvasHeight() {
-        const bounds = this.layoutBounds
-        const usableWidth = self.paneWidth - FIT_PADDING * 2
-        // `paneHeight` replaces the built-in ceiling rather than adding a
-        // second clamp under it, and the floor still wins: a pane shorter than
-        // MIN_CANVAS_HEIGHT leaves no room to hover a node and read its
-        // tooltip, which is the reason that floor exists.
-        const ceiling = Math.max(
-          MIN_CANVAS_HEIGHT,
-          self.paneHeight ?? MAX_CANVAS_HEIGHT,
-        )
-        if (!bounds) {
-          return ceiling
-        }
-        if (self.pixelRows) {
-          // The variant map's drawing is one line; its glyphs and labels are
-          // painted above it by the overlay and need the room a row layout
-          // would give to rows.
-          const floor =
-            self.chosenLayoutMode === 'variants'
-              ? VARIANT_MAP_HEIGHT
-              : MIN_CANVAS_HEIGHT
-          return Math.min(ceiling, Math.max(floor, bounds.h + FIT_PADDING * 2))
-        }
-        return bounds.w > 0 && usableWidth > 0
-          ? Math.min(
-              ceiling,
-              Math.max(
-                MIN_CANVAS_HEIGHT,
-                (bounds.h * usableWidth) / bounds.w + FIT_PADDING * 2,
-              ),
-            )
-          : ceiling
-      },
     }))
     .views(self => ({
       get geneTrack() {
@@ -1067,7 +1157,7 @@ export function GraphPaneMixin() {
       // neighbour walk to say what the first one already worked out.
       get referenceRampDomain() {
         const ramp = self.referenceRamp
-        return ramp
+        return ramp && !self.walkRowUnits
           ? { start: ramp.start, end: ramp.start + ramp.span }
           : undefined
       },
@@ -1235,18 +1325,29 @@ export function GraphPaneMixin() {
         return isLinearHost(view) ? view : undefined
       },
     }))
+    .views(self => ({
+      // Whether the drawing's x is reference bp a host can place. Walk rows
+      // put the backbone at its bp too, but their bars are lengths, so the
+      // mode's `cutMargins` is what says the drawing is a picture.
+      get xIsReferenceBp() {
+        return (
+          self.layoutResult?.referenceAxis === true &&
+          layoutModeByValue(self.chosenLayoutMode).cutMargins
+        )
+      },
+    }))
     .views(self => ({
       // Whether the host places x. Only a layout whose x is reference bp can
       // take the window's transform; force, ordered and walk rows draw in
       // their own coordinates inside the track, and a popped bubble is a
       // picture of its own.
       get hostPlacesX() {
-        const { host, graphRegion: region, layoutResult: layout } = self
+        const { host, graphRegion: region } = self
         return (
           host !== undefined &&
           host.initialized &&
           region !== undefined &&
-          layout?.referenceAxis === true &&
+          self.xIsReferenceBp &&
           self.popStack.length === 0 &&
           !host.dynamicBlocks.contentBlocks.some(
             b => b.refName === region.refName && b.reversed,
@@ -1255,9 +1356,6 @@ export function GraphPaneMixin() {
       },
     }))
     .views(self => ({
-      get overlayLabels() {
-        return layoutLabels(self)
-      },
       get hostFrame() {
         const { host, graphRegion } = self
         return self.hostPlacesX && host && graphRegion
@@ -1268,6 +1366,127 @@ export function GraphPaneMixin() {
         const drawing = self.layoutResult?.tubeMap
         return drawing ? tubeMapPicture(drawing.layout) : undefined
       },
+      get tubeMapReference() {
+        const drawing = self.layoutResult?.tubeMap
+        return drawing && self.drawnGraph
+          ? referenceBoxes(self.drawnGraph, drawing.layout)
+          : undefined
+      },
+      // the folded variants, as ticks on the tubes of the walks carrying them
+      get tubeMapDeviations() {
+        const coarse = self.layoutResult?.tubeMap?.coarse
+        const layout = self.layoutResult?.tubeMap?.layout
+        return coarse && layout
+          ? deviationMarks(coarse.graph, layout, coarse.deviations)
+          : []
+      },
+      // the reference boxes a linear view's connectors tie to its bp, which
+      // the reference axis already puts under that bp
+      get tubeMapReferenceNodes() {
+        const layout = self.layoutResult
+        return layout?.tubeMap && !layout.referenceAxis && self.drawnGraph
+          ? referenceNodes(self.drawnGraph, layout.tubeMap.layout)
+          : undefined
+      },
+    }))
+    .views(self => ({
+      // A linear view has the genes in a track of their own, at their bp
+      get tubeMapGenes() {
+        const reference = self.tubeMapReference
+        return self.showGenes && !self.host && reference && self.backboneGenes
+          ? tubeMapGenes(reference, self.backboneGenes)
+          : []
+      },
+    }))
+    .views(self => ({
+      // `paneHeight` replaces the built-in ceiling rather than adding a second
+      // clamp under it, and the floor still wins: a pane shorter than
+      // MIN_CANVAS_HEIGHT leaves no room to hover a node and read its tooltip,
+      // which is the reason that floor exists.
+      get paneCeiling() {
+        return Math.max(MIN_CANVAS_HEIGHT, self.paneHeight ?? MAX_CANVAS_HEIGHT)
+      },
+      // Room over a tube map for the rows its genes need, one inside the
+      // padding and one more for each further gene that overlaps it
+      get fitPadTop() {
+        const rows = tubeMapGeneRows(self.tubeMapGenes)
+        return FIT_PADDING + Math.max(0, rows - 1) * GENE_ROW_PX
+      },
+      // A tube map on its own axis reads by panning along it, as in
+      // sequenceTubeMap. Rather than shrink a long cut to a strip, the fit
+      // stops where its tubes are MIN_FIT_TUBE_PX wide, or at whatever fits
+      // the tallest pane, with the cut's left end on screen.
+      get minFitScale() {
+        const bounds = self.layoutBounds
+        const layout = self.layoutResult
+        const tubePx = layout?.tubeMap?.layout.tracks[0]?.width
+        return bounds && bounds.h > 0 && tubePx && !layout.referenceAxis
+          ? Math.min(
+              MIN_FIT_TUBE_PX / tubePx,
+              (this.paneCeiling - this.fitPadTop - FIT_PADDING) / bounds.h,
+            )
+          : 0
+      },
+      // The pane is as tall as the drawing, rather than a fixed box the drawing
+      // floats in. A row layout's rows are px, so its height is a sum; an
+      // isotropic layout has no height of its own and takes its aspect ratio
+      // at the width's fit. Neither reads `scale`, so the fit reads this
+      // without feeding back into it.
+      get canvasHeight() {
+        const bounds = self.layoutBounds
+        const usableWidth = self.paneWidth - FIT_PADDING * 2
+        const ceiling = this.paneCeiling
+        if (!bounds) {
+          return ceiling
+        }
+        if (self.pixelRows) {
+          // The variant map's drawing is one line; its glyphs and labels are
+          // painted above it by the overlay and need the room a row layout
+          // would give to rows.
+          const floor =
+            self.chosenLayoutMode === 'variants'
+              ? VARIANT_MAP_HEIGHT
+              : MIN_CANVAS_HEIGHT
+          return Math.min(
+            ceiling,
+            Math.max(floor, bounds.h + this.fitPadTop + FIT_PADDING),
+          )
+        }
+        return bounds.w > 0 && usableWidth > 0
+          ? Math.min(
+              ceiling,
+              Math.max(
+                MIN_CANVAS_HEIGHT,
+                bounds.h * Math.max(usableWidth / bounds.w, this.minFitScale) +
+                  this.fitPadTop +
+                  FIT_PADDING,
+              ),
+            )
+          : ceiling
+      },
+      // Where the fit puts the drawing, or undefined until there is a layout
+      // and a measured canvas to fit it into
+      get fittedTransform() {
+        const bounds = self.layoutBounds
+        return bounds
+          ? fitTransform(
+              bounds,
+              self.paneWidth,
+              this.canvasHeight,
+              self.pixelRows,
+              {
+                minScale: this.minFitScale,
+                padLeft: self.fitPadLeft,
+                padTop: this.fitPadTop,
+              },
+            )
+          : undefined
+      },
+    }))
+    .views(self => ({
+      get overlayLabels() {
+        return layoutLabels(self)
+      },
       get tubeMapFrame() {
         const drawing = self.layoutResult?.tubeMap
         return drawing
@@ -1276,16 +1495,75 @@ export function GraphPaneMixin() {
               translateX: self.translateX,
               scaleY: self.scaleY,
               translateY: self.translateY,
-              usableHeight: self.canvasHeight - FIT_PADDING * 2,
+              usableHeight: self.canvasHeight - self.fitPadTop - FIT_PADDING,
             })
           : undefined
       },
     }))
     .views(self => ({
+      // the reference ruler under the tubes, unless the linear view's ruler
+      // is already the axis
+      get tubeMapRulerBoxes() {
+        const reference = self.tubeMapReference
+        return reference && !self.hostPlacesX
+          ? rulerBoxes(reference)
+          : undefined
+      },
+      // The connectors run from the top of the pane down to the tubes' top
+      get connectorZoneBottom() {
+        const picture = self.tubeMapPicture
+        const frame = self.tubeMapFrame
+        return picture && frame ? frame.y(picture.bounds.minY) - 2 : 0
+      },
+      // Read off the live blocks, so the bands' tops follow every frame of a
+      // pan in the linear view and their bottoms every pan of the tubes
+      get tubeMapConnectors() {
+        const nodes = self.tubeMapReferenceNodes
+        const frame = self.tubeMapFrame
+        const { host, graphRegion } = self
+        const bp =
+          nodes && frame && host?.initialized && graphRegion
+            ? hostFrame(host, graphRegion)
+            : undefined
+        return nodes && frame && bp
+          ? tubeMapConnectors(
+              nodes,
+              b => b * bp.scale + bp.translateX,
+              frame.x,
+              self.paneWidth,
+            )
+          : []
+      },
+    }))
+    .views(self => ({
+      // What the tube map's legend has to explain: a zigzag where the ruler
+      // squeezes a box on screen, and the fold its walks' ticks stand for
+      get tubeMapKeys() {
+        const boxes = self.tubeMapRulerBoxes
+        const frame = self.tubeMapFrame
+        const marks =
+          boxes && frame
+            ? rulerMarks(boxes, frame.x, self.paneWidth, () => 0)
+            : undefined
+        return {
+          squeezed: (marks?.squeezed.length ?? 0) > 0,
+          foldBp:
+            self.tubeMapDeviations.length > 0 ? self.tubeMapFold : undefined,
+        }
+      },
       tubeMapNodeAt(sx: number, sy: number) {
         const drawing = self.layoutResult?.tubeMap
         const frame = self.tubeMapFrame
-        return drawing && frame ? tubeMapNodeAt(drawing, frame, sx, sy) : null
+        return (
+          (drawing && frame ? tubeMapNodeAt(drawing, frame, sx, sy) : null) ??
+          connectorAt(
+            self.tubeMapConnectors,
+            self.connectorZoneBottom,
+            sx,
+            sy,
+          ) ??
+          null
+        )
       },
     }))
     .actions(self => ({
@@ -1366,6 +1644,9 @@ export function GraphPaneMixin() {
       setShowGenes(show: boolean) {
         self.showGenes = show
       },
+      setTubeMapFold(bp: number) {
+        self.tubeMapFold = bp
+      },
       setGeneTrackId(trackId: string) {
         self.geneTrackId = trackId
       },
@@ -1523,10 +1804,10 @@ export function GraphPaneMixin() {
         self.positionsVersion++
       },
       zoomToFit() {
-        const bounds = self.layoutBounds
-        const usableHeight = self.canvasHeight - FIT_PADDING * 2
         // A host owns x, so a fit while hosted places the rows only.
         if (self.viewportOwner === 'host') {
+          const bounds = self.layoutBounds
+          const usableHeight = self.canvasHeight - FIT_PADDING * 2
           if (bounds && usableHeight > 0) {
             self.translateY = fittedTranslateY(
               bounds,
@@ -1536,17 +1817,10 @@ export function GraphPaneMixin() {
           }
           return
         }
-        // Nothing to fit into before the canvas is measured. The autorun re-runs
-        // once width lands, so skipping beats persisting a negative scale into
-        // the session snapshot.
-        const fit = bounds
-          ? fitTransform(
-              bounds,
-              self.paneWidth,
-              self.canvasHeight,
-              self.pixelRows,
-            )
-          : undefined
+        // Nothing to fit into before the canvas is measured. The fit autorun
+        // runs again once width lands, so skipping beats persisting a negative
+        // scale into the session snapshot.
+        const fit = self.fittedTransform
         if (fit) {
           self.scale = fit.scale
           self.translateX = fit.translateX
@@ -1580,7 +1854,7 @@ export function GraphPaneMixin() {
       // whose x no longer means bp is refit.
       releaseHost() {
         if (self.viewportOwner === 'host') {
-          if (self.layoutResult?.referenceAxis) {
+          if (self.xIsReferenceBp) {
             self.viewportOwner = 'user'
           } else {
             self.viewportOwner = 'fit'
@@ -1688,13 +1962,24 @@ export function GraphPaneMixin() {
       // 'force' is expressed. See LAYOUT_MODES.
       function* computeLayout(graph: Graph) {
         const start = performance.now()
+        // reads are placed by the cut's segment names, which a fold renames
+        const coarse =
+          TUBE_MAP_MODES.has(self.chosenLayoutMode) &&
+          self.tubeMapFold > 0 &&
+          !graph.reads
+            ? coarsenTubeMap(graph, self.tubeMapFold)
+            : undefined
         const local = layoutModeByValue(self.chosenLayoutMode).run(
-          graph,
+          coarse?.graph ?? graph,
           self.graphRegion,
           self.host ? self.layoutResult?.sampleRows : undefined,
         )
         if (local) {
-          return { result: local, duration: performance.now() - start }
+          const result =
+            coarse && local.tubeMap
+              ? { ...local, tubeMap: { ...local.tubeMap, coarse } }
+              : local
+          return { result, duration: performance.now() - start }
         }
         const cache = forceLayoutsOf(graph)
         const key = forceLayoutKey(graph)
@@ -1761,6 +2046,20 @@ export function GraphPaneMixin() {
         return live
       }
 
+      // The walk a path graph's track puts on the region's assembly: the one
+      // that names it, else the one chooseReferencePath infers
+      function loadedReference(graph: Graph, region: SubgraphRegion) {
+        const paths = graph.anchorPaths
+        return graph.anchoredBy === 'paths' && paths
+          ? (
+              assemblyWalk(
+                graph,
+                self.assemblySpellings(region.assemblyName),
+              ) ?? chooseReferencePath(paths, region.assemblyName)
+            )?.name
+          : undefined
+      }
+
       // `keepSelection` for a re-cut of the same source: node ids survive one
       // where edge indexes do not, so the selection is found again by id.
       // `readsOf` fetches the reads over the parsed graph before its one
@@ -1774,10 +2073,17 @@ export function GraphPaneMixin() {
       ) {
         const signal = loadController?.signal
         self.setStatusMessage('Parsing GFA')
-        const graph = loadGraph(text, name, {
+        const parsed = loadGraph(text, name, {
           referencePath: self.referencePath || region?.assemblyName,
           maxNodes: self.maxGraphNodes,
         })
+        const loaded = region ? loadedReference(parsed, region) : undefined
+        const graph =
+          !self.referencePath &&
+          loaded !== undefined &&
+          loaded !== parsed.referencePath
+            ? anchorFromPaths(parsed, loaded)
+            : parsed
         if (readsOf) {
           self.setStatusMessage('Reading alignments')
           try {
@@ -1800,6 +2106,7 @@ export function GraphPaneMixin() {
         const selected = keepSelection ? self.selectedNode : null
         self.graph = graph
         self.graphRegion = region
+        self.loadedReferencePath = loaded
         self.indexBubbles = undefined
         self.geneFeatures = undefined
         self.repeatArrays = undefined
@@ -1987,6 +2294,7 @@ export function GraphPaneMixin() {
           abortLoad()
           self.graph = undefined
           self.graphRegion = undefined
+          self.loadedReferencePath = undefined
           self.layoutResult = undefined
           self.indexBubbles = undefined
           self.geneFeatures = undefined
@@ -2225,16 +2533,16 @@ export function GraphPaneMixin() {
       startRenderingBackend(backend: Renderer) {
         if (!self.autorunsInstalled) {
           // Autorun: keep the view fitted to the graph until the user moves it.
-          // Reads layoutResult plus (via zoomToFit) width/canvasHeight, so it
-          // re-fires — and re-fits — as the layout arrives and the canvas is
-          // measured, rather than firing once against not-yet-known dimensions.
-          // A manual pan/zoom (or a restored-session transform) makes the
-          // viewport the user's, and a host makes it the linear view's.
+          // Reading fittedTransform tracks everything the fit depends on, so
+          // it re-fits as the layout arrives, the canvas is measured and the
+          // genes over a tube map claim their rows. A manual pan/zoom (or a
+          // restored-session transform) makes the viewport the user's, and a
+          // host makes it the linear view's.
           addDisposer(
             self,
             autorun(() => {
               if (
-                self.layoutResult &&
+                self.fittedTransform &&
                 untracked(() => self.viewportOwner === 'fit')
               ) {
                 self.zoomToFit()
@@ -2595,6 +2903,23 @@ export function GraphPaneMixin() {
                 },
               ]
             : []),
+          ...(TUBE_MAP_MODES.has(self.chosenLayoutMode)
+            ? [
+                {
+                  label: 'Fold variants',
+                  subMenu: TUBE_MAP_FOLDS.map(({ bp, label }) => ({
+                    type: 'radio' as const,
+                    label,
+                    checked: self.tubeMapFold === bp,
+                    disabled: bp > 0 && self.graph?.reads !== undefined,
+                    onClick: () => {
+                      self.setTubeMapFold(bp)
+                      void self.recomputeLayout()
+                    },
+                  })),
+                },
+              ]
+            : []),
           ...(self.chosenLayoutMode === 'walkrows' &&
           self.repeatChoices.length > 0
             ? [