jbrowse-plugin-graphgenomeviewer 7.4.4 → 7.6.0

package/src/GraphGenomeView/pane/fitViews.ts

@@ -520,6 +520,7 @@ export const withFitViews = withHostViews
         connectorThickness: self.connectorThickness,
         drawPaths,
         nodeWidth: self.nodeWidth,
+        edgeWidth: self.linkWidth,
         highlight,
         // Untracked, so a zoom does not eagerly rebuild geometry — the
         // debounced viewportDirty bump drives the scale-dependent rebuild
@@ -573,13 +574,16 @@ export const withFitViews = withHostViews
             facet: self.facetSpec,
             colorScheme: self.effectiveColorScheme,
             nodeWidth: self.nodeWidth,
+            edgeWidth: self.linkWidth,
             showDeletionEdges: self.showDeletionEdges,
             linearLayout: self.linearLayout,
             contigThickness: self.contigThickness,
             connectorThickness: self.connectorThickness,
             region: self.graphRegion,
             colorDomain: self.statedColorDomain,
-            genes: self.showGenes ? self.backboneGenes : undefined,
+            genes: self.showGenes
+              ? [...(self.backboneGenes ?? []), ...(self.ownGeneFeatures ?? [])]
+              : undefined,
             walkRows: self.walkRowBars,
             walkRowPitch: self.walkRowPitch,
             rowGenes: self.walkRowGenes,

package/src/GraphGenomeView/pane/graphViews.ts

@@ -12,6 +12,12 @@ import {
 import { facetSettingOf } from '@jbrowse/bandage-core/facetGrid'
 import { genePins } from '@jbrowse/bandage-core/genes/genePins'
 import { formatBp } from '@jbrowse/bandage-core/graphLabels'
+import {
+  ribbonJoin,
+  sharedRowOrder,
+  walkRowBlocks,
+  walkRowLinks,
+} from '@jbrowse/bandage-core/layout/walkRowLinks'
 import {
   walkRowRuns,
   walkRowsOf,
@@ -89,7 +95,7 @@ import type { ScreenTransform } from './keepInView'
 import type { WalkCut } from '../../RgfaTabixAdapter/walkCut.ts'
 import type { GraphLayers } from '../graphLayers'
 import type { HoverHighlight } from '../hoverHighlight'
-import type { NodeColor } from '../nodeColor'
+import type { GraphEncoding } from '../nodeColor'
 import type { NodeSize } from '../nodeSize'
 import type { TubeMapPanelSplit } from '../tubeMapPanels'
 import type { WalkRowGroupBy } from '../walkRowGroups'
@@ -98,6 +104,7 @@ import type {
   ColorScheme,
   ResolvedColorScheme,
 } from '@jbrowse/bandage-core/colorSchemes'
+import type { EdgeWidth } from '@jbrowse/bandage-core/edgeWidths'
 import type { FacetInput, FacetSetting } from '@jbrowse/bandage-core/facetGrid'
 import type { LayoutModeValue } from '@jbrowse/bandage-core/layoutModes'
 import type { NodeWidth } from '@jbrowse/bandage-core/nodeWidths'
@@ -110,12 +117,16 @@ import type { AnyConfigurationModel } from '@jbrowse/core/configuration'
 import type { FileLocation } from '@jbrowse/core/util/types'
 
 // A repeat pick slices the cut's walks again, by the repeat's own array
+// The rows again from the cut's tables: for a repeat pick, by the repeat's
+// own array, or with each row's visits, which ribbons need and the worker's
+// runs leave out
 function walkRowsFromCut(
   cut: WalkCut,
   region: { start: number; end: number },
   unit?: number,
+  visits?: boolean,
 ) {
-  const runs = walkRowRuns(cut, region)
+  const runs = walkRowRuns(cut, region, { visits })
   return runs ? walkRowsOf(runs, unit) : undefined
 }
 
@@ -151,7 +162,7 @@ function spanIn(
 // as props, a track display in its config
 export interface GraphGrammar {
   layoutMode?: LayoutModeValue
-  color?: NodeColor
+  encoding?: GraphEncoding
   size?: NodeSize
   layers?: GraphLayers
   facet?: FacetInput
@@ -162,9 +173,12 @@ export interface GraphGrammar {
 type TubeColorKind = 'value' | 'tinted' | 'role' | 'path'
 
 // The rows walk rows draw: `kept` names the samples whose walks show, by the
-// name before the haplotype number; unset shows every walk the cut holds
+// name before the haplotype number; unset shows every walk the cut holds.
+// `order: 'shared'` stacks each row under the one it shares the most sequence
+// with, so ribbons stay short and shared blocks line up.
 export interface GraphRows {
   kept?: string[]
+  order?: 'shared'
 }
 
 export const withGraphViews = paneBase
@@ -199,7 +213,9 @@ export const withGraphViews = paneBase
       computed(derive, {
         equals: (a, b) => JSON.stringify(a) === JSON.stringify(b),
       })
-    const colorDomain = byValue(() => domainOfColor(self.grammar.color))
+    const colorDomain = byValue(() =>
+      domainOfColor(self.grammar.encoding?.color),
+    )
     const facet = byValue(() => facetSettingOf(self.grammar.facet))
     const groupBy = byValue(() => {
       const g = groupByOf(self.grammar.facet)
@@ -210,7 +226,7 @@ export const withGraphViews = paneBase
         return self.grammar.layoutMode ?? 'force'
       },
       get chosenColorScheme(): ColorScheme {
-        return schemeOfColor(self.grammar.color)
+        return schemeOfColor(self.grammar.encoding?.color)
       },
       // the reference span the reference-position ramp runs over, for a graph
       // with no region of its own to span it
@@ -227,6 +243,10 @@ export const withGraphViews = paneBase
       get contigThickness() {
         return nodeSizeOf(self.grammar.size).px
       },
+      // Link thickness by the walks taking it; see EDGE_WIDTHS
+      get linkWidth(): EdgeWidth {
+        return nodeSizeOf(self.grammar.size).links
+      },
       get layerSet() {
         return layersOf(self.grammar.layers)
       },
@@ -248,6 +268,9 @@ export const withGraphViews = paneBase
       get walkStrip() {
         return this.layerSet.has('walkStrip')
       },
+      get walkRibbons() {
+        return this.layerSet.has('walkRibbons')
+      },
       // One section per value of a field, as a grammar of graphics splits a
       // plot. A node layout draws a panel per `walk` (each lifted walk alone,
       // on the same layout) or per `sample` (a sample's haplotypes in a row);
@@ -265,6 +288,9 @@ export const withGraphViews = paneBase
         const kept = self.grammar.rows?.kept
         return Array.isArray(kept) ? kept : undefined
       },
+      get walkRowOrder() {
+        return self.grammar.rows?.order === 'shared' ? 'shared' : undefined
+      },
       get hoverLightsEverything() {
         return this.chosenHover === 'everything'
       },
@@ -740,12 +766,26 @@ export const withGraphViews = paneBase
     // Each walk sliced to the window, for walk rows and the strip; a repeat
     // pick slices again by its own array
     get cutWalkRows() {
-      const runs = self.walkCut?.walkRowRuns
-      return runs
-        ? walkRowsOf(runs)
-        : self.graph
-          ? walkRows(self.graph, self.graphRegion)
-          : undefined
+      const cut = self.walkCut
+      const runs = cut?.walkRowRuns
+      const visits = this.rowVisitsNeeded
+      return cut && runs && visits && self.graphRegion
+        ? walkRowsFromCut(cut, self.graphRegion, undefined, true)
+        : runs
+          ? walkRowsOf(runs)
+          : self.graph
+            ? walkRows(self.graph, self.graphRegion, undefined, { visits })
+            : undefined
+    },
+    // Ribbons, shared blocks and the shared order compare the rows node by
+    // node, so the rows carry their visits
+    get rowVisitsNeeded() {
+      return (
+        self.chosenLayoutMode === 'walkrows' &&
+        (self.walkRibbons ||
+          self.layerSet.has('walkBlocks') ||
+          self.walkRowOrder === 'shared')
+      )
     },
     // 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
@@ -852,10 +892,11 @@ export const withGraphViews = paneBase
       }
       const repeat = self.selectedRepeat
       const cut = self.walkCut
+      const visits = self.rowVisitsNeeded
       const bars = repeat
         ? cut
-          ? walkRowsFromCut(cut, repeat, repeat.unit)
-          : walkRows(self.graph, repeat, repeat.unit)
+          ? walkRowsFromCut(cut, repeat, repeat.unit, visits)
+          : walkRows(self.graph, repeat, repeat.unit, { visits })
         : self.cutWalkRows
       if (!bars) {
         return undefined
@@ -929,10 +970,18 @@ export const withGraphViews = paneBase
           ? { by: 'column', ...grouped.groupBy, table: grouped.table }
           : undefined
     },
-    // the cohort's rows the sample filter keeps
+    // The cohort's rows the sample filter keeps, in the shared order where
+    // asked; a grouping then keeps that order within each section
     get keptCohortRows() {
       const bars = this.cohortWalkRows
-      return bars && filterSamples(bars.rows, self.walkRowSamples)
+      const rows = bars && filterSamples(bars.rows, self.walkRowSamples)
+      if (!bars || !rows || self.walkRowOrder !== 'shared') {
+        return rows
+      }
+      const all = [bars.reference, ...rows]
+      return sharedRowOrder(all)
+        .filter(i => i > 0)
+        .map(i => all[i]!)
     },
     // The kept rows in a section per value of the grouped column, or
     // undefined while ungrouped or the table lacks that column
@@ -952,6 +1001,27 @@ export const withGraphViews = paneBase
         ? { ...bars, rows: this.walkRowGroups?.rows ?? rows }
         : undefined
     },
+    // Where each row walks the same nodes as the row below it, as bar
+    // offsets on both, the reference row first
+    get walkRowRibbons() {
+      const bars = this.walkRowBars
+      if (!self.walkRibbons || !self.rowVisitsNeeded || !bars) {
+        return undefined
+      }
+      const rows = [bars.reference, ...bars.rows]
+      return walkRowLinks(rows, ribbonJoin(rows))
+    },
+    // The stretches of each row through a block of nodes off the
+    // reference's path that two or more rows walk, block 0 the one with the
+    // most bp, which the bars letter A, B, C...
+    get sharedBlocks() {
+      const bars = this.walkRowBars
+      if (!self.layerSet.has('walkBlocks') || !self.rowVisitsNeeded || !bars) {
+        return undefined
+      }
+      const rows = [bars.reference, ...bars.rows]
+      return walkRowBlocks(rows, ribbonJoin(rows))
+    },
     // Whether the canvas draws the graph's nodes. A tube map and walk rows
     // draw a picture of their own over it, so what sits on nodes (genes,
     // bubble halos, deletion arcs, the reference strip) has nowhere to go.
@@ -967,12 +1037,17 @@ export const withGraphViews = paneBase
     get genePins() {
       dependOn(self.positionsVersion)
       const positions = self.layoutResult?.nodePositions
+      // each haplotype's own genes ride its nodes off the reference
+      const genes = [
+        ...(self.backboneGenes ?? []),
+        ...(self.ownGeneFeatures ?? []),
+      ]
       return self.showGenes &&
         this.drawsNodes &&
         self.graph &&
-        self.backboneGenes &&
+        genes.length > 0 &&
         positions
-        ? genePins(self.graph, self.backboneGenes, positions)
+        ? genePins(self.graph, genes, positions)
         : []
     },
     // The bubbles as halos along their nodes.
@@ -980,10 +1055,17 @@ export const withGraphViews = paneBase
     get bubbleHalos() {
       dependOn(self.positionsVersion)
       const positions = self.layoutResult?.nodePositions
-      if (!self.showBubbles || !this.drawsNodes || !self.graph || !positions) {
+      // with the layer off, a bubble hovered from a linear view's bubble or
+      // variant track still rings
+      const shown = self.showBubbles
+        ? self.bubbles
+        : self.hoveredBubble
+          ? [self.hoveredBubble]
+          : []
+      if (shown.length === 0 || !this.drawsNodes || !self.graph || !positions) {
         return []
       }
-      return bubbleHalos(self.graph, self.bubbles, positions, self.repeatArrays)
+      return bubbleHalos(self.graph, shown, positions, self.repeatArrays)
     },
     // What `reference-position` paints from, which is also what `auto`
     // resolves to on any anchored graph

package/src/GraphGenomeView/pane/launchActions.ts

@@ -22,14 +22,15 @@ import {
 import { withRenderingActions } from './renderingActions'
 import { graphLaunchMenuItems } from '../../launchFromGraph/graphMenuItems'
 import {
+  canonicalAssemblyName,
   highlightInLinearView,
   launchSyntenyView,
   showInLinearView,
 } from '../../launchFromGraph/launchFromGraph'
-import { launchTracks } from '../../launchFromGraph/launchTracks'
 import { pushLaunchItem } from '../../launchFromGraph/pushLaunchItem'
 import { launchableSyntenyTracks } from '../../launchFromGraph/syntenyTracks'
 import { downloadText } from '../download'
+import { GENE_ADAPTER_TYPES } from '../genes/geneFeatures'
 import { HOVER_HIGHLIGHT_VALUES } from '../hoverHighlight'
 import { TUBE_MAP_PANELS, tubeMapPanelGroups } from '../tubeMapPanels'
 
@@ -67,10 +68,10 @@ function radioItems<T>(
 export const withLaunchActions = withRenderingActions
   .actions(self => ({
     // Move the linear view already on screen, or open one if there is none,
-    // and pair with whichever it was. A view being created gets the session's
-    // annotation for the assembly it opens on (see launchTracks), led by the
-    // graph's own segments track when the launch is on the reference — the one
-    // assembly that track is configured for.
+    // and pair with whichever it was. A view being created gets the graph's
+    // own track when the launch is on the reference, plus the one gene track
+    // the graph reads for that assembly: a hub config can hold hundreds of
+    // FeatureTracks per assembly, and a launch is a jump to a locus.
     //
     // Only a view on the reference is paired with. A node's hover band is on
     // that assembly, so paired with a view on another the band fails that
@@ -79,16 +80,31 @@ export const withLaunchActions = withRenderingActions
     showInLinearView(target: { location: GraphLocation; assembly: string }) {
       const session = getSession(self)
       const onReference = target.assembly === self.graphRegion?.assemblyName
+      const assembly = canonicalAssemblyName(session, target.assembly)
+      // an assembly whose annotation nothing names as genes, a strain's BED,
+      // still opens on its first feature track rather than on none
+      const geneTrack =
+        (onReference
+          ? self.geneTrack
+          : self.geneTracksByAssembly.get(assembly)) ??
+        self.sessionTracks.find(
+          t =>
+            t.assemblies.includes(assembly) &&
+            GENE_ADAPTER_TYPES.has(t.adapterType),
+        )
       const viewId = showInLinearView({
         session,
         location: target.location,
         assembly: target.assembly,
         connectedViewId: self.pairedViewId,
-        tracks: launchTracks({
-          session,
-          assemblyName: target.assembly,
-          first: onReference ? self.sourceTrackId : undefined,
-        }),
+        tracks: [
+          ...new Set(
+            [
+              onReference ? self.sourceTrackId : undefined,
+              geneTrack?.trackId,
+            ].filter(id => id !== undefined),
+          ),
+        ],
       })
       if (onReference) {
         self.pairWithLinearView(viewId)
@@ -282,7 +298,35 @@ export const withLaunchActions = withRenderingActions
             ]
           : []),
         ...(self.chosenLayoutMode === 'walkrows' && self.walkRowBars
-          ? [{ label: 'Samples', subMenu: this.walkRowSampleMenuItems() }]
+          ? [
+              { label: 'Samples', subMenu: this.walkRowSampleMenuItems() },
+              {
+                type: 'checkbox' as const,
+                label: 'Ribbons between rows',
+                checked: self.walkRibbons,
+                onClick: () => {
+                  self.setLayer('walkRibbons', !self.walkRibbons)
+                },
+              },
+              {
+                type: 'checkbox' as const,
+                label: 'Letter shared blocks',
+                checked: self.layerSet.has('walkBlocks'),
+                onClick: () => {
+                  self.setLayer('walkBlocks', !self.layerSet.has('walkBlocks'))
+                },
+              },
+              {
+                type: 'checkbox' as const,
+                label: 'Order rows by shared sequence',
+                checked: self.walkRowOrder === 'shared',
+                onClick: () => {
+                  self.setWalkRowOrder(
+                    self.walkRowOrder === 'shared' ? undefined : 'shared',
+                  )
+                },
+              },
+            ]
           : []),
         ...(self.chosenLayoutMode === 'walkrows' &&
         self.walkRowBars &&

package/src/GraphGenomeView/pane/launchViews.ts

@@ -5,9 +5,12 @@ import {
 import { getSession } from '@jbrowse/core/util'
 
 import { withGraphViews } from './graphViews'
+import { OWN_GENE_CONTIGS } from './paneBase'
 import {
   contributingAssemblies,
+  nodeAssemblySpans,
   nodeOwnLocation,
+  offReferenceContigs,
   resolveContributors,
   resolveLocationAssembly,
 } from '../../launchFromGraph/contributors'
@@ -170,4 +173,47 @@ export const withLaunchViews = withGraphViews
             : undefined,
       }
     },
+    // The gene reads that put each loaded haplotype's own genes on its nodes
+    // off the reference: its assembly's gene track over the span those nodes
+    // cover, the first OWN_GENE_CONTIGS contigs of them
+    get ownGeneReads() {
+      const { graph } = self
+      if (!graph || !self.showGenes || !self.modeDrawsNodes) {
+        return []
+      }
+      return offReferenceContigs(
+        graph,
+        self.assemblyResolver,
+        self.graphRegion?.assemblyName,
+      )
+        .flatMap(({ stableRefName, assemblyName, refName, start, end }) => {
+          const track = self.geneTracksByAssembly.get(assemblyName)
+          return track
+            ? [
+                {
+                  stableRefName,
+                  trackId: track.trackId,
+                  region: { assemblyName, refName, start, end },
+                },
+              ]
+            : []
+        })
+        .slice(0, OWN_GENE_CONTIGS)
+    },
+    // The hovered node's own sequence on every loaded assembly but the
+    // reference, for linear views of those assemblies to band: an allele off
+    // the reference is a few hundred bp "instead of" on GRCh38, and here it
+    // is where it actually lives on each haplotype
+    get assemblyHoverHighlights() {
+      const id = self.hoveredNode
+      const node = id === null ? undefined : self.nodeById?.get(id)
+      return node && self.graph && self.chosenHover !== 'off'
+        ? nodeAssemblySpans(
+            self.graph,
+            node,
+            self.assemblyResolver,
+            self.graphRegion?.assemblyName,
+          )
+        : []
+    },
   }))

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()
+})