jbrowse-plugin-graphgenomeviewer 7.4.3 → 7.5.0

package/src/GraphGenomeView/pane/fitViews.ts

@@ -5,7 +5,6 @@ import {
   facetGrid,
 } from '@jbrowse/bandage-core/facetGrid'
 import { figureSvg } from '@jbrowse/bandage-core/figure'
-import { figureSpecSettings } from '@jbrowse/bandage-core/figureSettings'
 import { rowLabelBox } from '@jbrowse/bandage-core/graphLabels'
 import {
   LEGEND_INSET_PX,
@@ -34,10 +33,6 @@ import {
 } from '@jbrowse/bandage-core/tubeMap/genes'
 import { padded } from '@jbrowse/bandage-core/viewport'
 import { walkPosition } from '@jbrowse/bandage-core/walkKey'
-import {
-  expandTabixShorthand,
-  readConfObject,
-} from '@jbrowse/core/configuration'
 import { untracked } from 'mobx'
 
 import { SECTION_HEADER_PX, sectionPlacement } from '../walkRowGroups'
@@ -52,7 +47,6 @@ import {
   VIEWPORT_PANES_BUILT,
   dependOn,
   paneViewportOf,
-  uriOf,
 } from './paneBase'
 import { trackedDpr } from '../trackedDpr'
 
@@ -63,7 +57,6 @@ import type {
 } from '@jbrowse/bandage-core/layout/walkRowDraw'
 import type { Renderer } from '@jbrowse/bandage-core/renderer/types'
 import type { LiftedWalk, WalkLift } from '@jbrowse/bandage-core/walkHighlight'
-import type { FileLocation } from '@jbrowse/core/util/types'
 
 export const TOOLTIP_INSET_PX = 8
 export const FACET_KEY_ROW_PX = 19
@@ -527,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
@@ -557,96 +551,6 @@ export const withFitViews = withHostViews
         ? (walkPosition(walk, node.id, node.length) ?? 'not on this walk')
         : undefined
     },
-    // The spec bandage-figure makes this drawing from with no browser, or
-    // undefined for a graph it cannot read again: one cut from a gbz-base
-    // track or read from a GFA url, with the genes of a GFF3 tabix track
-    figureSpec() {
-      const region = self.graphRegion
-      const adapter = self.sourceAdapter
-      const panSN = adapter?.assemblyNameToPanSN as
-        Record<string, string> | undefined
-      const window = region && `${region.refName}:${region.start}-${region.end}`
-      const gfa = uriOf(self.sourceGfaLocation)
-      const db =
-        adapter?.type === 'GbzBaseSyntenyAdapter'
-          ? uriOf(adapter.gbzDbLocation as FileLocation)
-          : undefined
-      const source = gfa
-        ? { gfa, region: window }
-        : db && region && window
-          ? {
-              gbz: {
-                db,
-                index: uriOf(adapter!.haplotypeIndexLocation as FileLocation),
-                region: window,
-                // the adapter cuts a lane by its PanSN prefix
-                haplotypes: self.cutHaplotypes?.map(
-                  lane => panSN?.[lane] ?? lane,
-                ),
-                referenceSample:
-                  (adapter!.referenceSample as string | undefined) ||
-                  panSN?.[region.assemblyName] ||
-                  region.assemblyName,
-                context: adapter!.context as number | undefined,
-                snarls: self.cutsWholeWalks
-                  ? 'overlapping'
-                  : (adapter!.subgraphSnarls as string | undefined),
-              },
-            }
-          : undefined
-      if (!source) {
-        return undefined
-      }
-      const geneTrack = self.showGenes ? self.geneTrack : undefined
-      const geneConf = geneTrack
-        ? self.sessionTrack(geneTrack.trackId)
-        : undefined
-      const geneAdapter = geneConf
-        ? expandTabixShorthand(
-            readConfObject(geneConf, 'adapter') as Record<string, unknown>,
-            'gffGzLocation',
-          )
-        : undefined
-      const genes =
-        geneAdapter?.type === 'Gff3TabixAdapter'
-          ? {
-              file: uriOf(geneAdapter.gffGzLocation as FileLocation),
-              index: uriOf(
-                (geneAdapter.index as { location?: FileLocation } | undefined)
-                  ?.location,
-              ),
-              format: 'gff3',
-            }
-          : undefined
-      return JSON.parse(
-        JSON.stringify({
-          ...source,
-          genes: genes?.file && genes.index ? genes : undefined,
-          referencePath: self.referencePath || undefined,
-          layout: self.chosenLayoutMode,
-          ...figureSpecSettings({
-            engine: self.layoutEngine,
-            quality: self.layoutQuality,
-            linearLayout: self.linearLayout,
-            bubbleSpread: self.bubbleSpread,
-            showDeletionEdges: self.showDeletionEdges,
-            colorScheme: self.chosenColorScheme,
-            nodeWidth: self.nodeWidth,
-            contigThickness: self.contigThickness,
-            connectorThickness: self.connectorThickness,
-            colorDomain: self.statedColorDomain,
-          }),
-          walks: self.walkLayers.length
-            ? self.walkLayers.map(l => (l.color ? l : l.walk))
-            : undefined,
-          facet: self.walkLayers.length > 1 ? self.facetSpec : undefined,
-          walkStrip: self.walkStripShown || undefined,
-          walkRowSamples: self.walkStripShown ? self.walkRowSamples : undefined,
-          width: self.paneWidth,
-          height: self.paneCeiling,
-        }),
-      ) as Record<string, unknown>
-    },
     // Why the drawing cannot be written as SVG, which draws the canvas's
     // nodes, or walk rows' bars
     get figureUnavailable() {
@@ -658,15 +562,6 @@ export const withFitViews = withHostViews
             ? undefined
             : `${layoutModeByValue(self.chosenLayoutMode).label} draws a picture of its own, which the SVG export does not`
     },
-    // Why bandage-figure can't make this drawing again: it draws only
-    // layouts with nodes, from a graph it can read for itself
-    get figureSpecUnavailable() {
-      return !self.drawsNodes
-        ? `bandage-figure draws no ${layoutModeByValue(self.chosenLayoutMode).label} layout`
-        : this.figureSpec()
-          ? undefined
-          : 'bandage-figure reads a graph cut from a gbz-base track or a GFA url'
-    },
     // The drawing as a standalone SVG, fitted, with its genes, its lifted
     // walks' keys, facet panels and the strip of walk rows; see figureSvg
     figure() {
@@ -679,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,
@@ -695,9 +593,6 @@ export const withFitViews = withHostViews
               rowGenes: self.walkRowGenes,
               rowGeneGaps: self.walkRowGeneGaps,
             },
-            // the SVG carries the spec only where the spec draws this same
-            // picture: one of nodes (figureSpecUnavailable)
-            spec: self.drawsNodes ? this.figureSpec() : undefined,
           })
         : undefined
     },

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,
@@ -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
 }
 
@@ -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
@@ -227,6 +241,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 +266,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 +286,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'
       },
@@ -666,10 +690,6 @@ export const withGraphViews = paneBase
     get cutHaplotypes(): string[] | undefined {
       return undefined
     },
-    // the GFA the graph on screen was read from, where a host says
-    get sourceGfaLocation(): FileLocation | undefined {
-      return undefined
-    },
     get sourceAdapter() {
       const track = self.sourceTrack
       return track ? trackAdapterConfig(self, track) : undefined
@@ -744,12 +764,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
@@ -856,10 +890,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
@@ -933,10 +968,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
@@ -956,6 +999,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.
@@ -971,12 +1035,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.
@@ -984,10 +1053,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

@@ -5,7 +5,6 @@ import {
   layoutModeByValue,
 } from '@jbrowse/bandage-core/layoutModes'
 import { getSession } from '@jbrowse/core/util'
-import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import HubIcon from '@mui/icons-material/Hub'
 import PaletteIcon from '@mui/icons-material/Palette'
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera'
@@ -23,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'
 
@@ -68,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
@@ -80,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)
@@ -283,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 &&
@@ -338,27 +381,6 @@ export const withLaunchActions = withRenderingActions
             }
           },
         },
-        {
-          label: 'Copy figure spec',
-          icon: ContentCopyIcon,
-          disabled: self.figureSpecUnavailable !== undefined,
-          disabledHelpText: self.figureSpecUnavailable,
-          onClick: () => {
-            const spec = self.figureSpec()
-            const session = getSession(self)
-            navigator.clipboard
-              .writeText(`${JSON.stringify(spec, null, 2)}\n`)
-              .then(() => {
-                session.notify(
-                  'Figure spec copied. Save it as spec.json and run: npx -p @jbrowse/bandage-core bandage-figure spec.json -o figure.svg',
-                  'info',
-                )
-              })
-              .catch((e: unknown) => {
-                session.notify(`Could not copy the figure spec: ${String(e)}`)
-              })
-          },
-        },
       ]
     },
     // `picks` false where a toolbar already picks the walks, leaving what is

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,
+          )
+        : []
+    },
   }))