jbrowse-plugin-graphgenomeviewer 7.4.4 → 7.5.0

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'
@@ -222,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))
+    }
+  }
+}

package/src/LinearGraphDisplay/LinearGraphDisplay.test.ts

@@ -868,8 +868,14 @@ test('walk rows fit their own bars in the track, since a walk can be longer than
   expect(pane.viewportOwner).toBe('fit')
 })
 
-test('walk rows cut every snarl a walk takes past the window, so a walk comes whole', async () => {
-  const { pane, cuts } = await shownGraph({ paths: true })
+test('walk rows cut every snarl a GBZ walk takes past the window, so a walk comes whole', async () => {
+  const { view, cuts } = createEnvironment({ paths: true })
+  view.zoomTo(60_000 / WIDTH_PX)
+  view.scrollTo(1_000_000 / view.bpPerPx)
+  view.showTrack('walks')
+  const pane = view.tracks[0]!.displays[0] as LinearGraphDisplayModel
+  pane.startRenderingBackend(fakeRenderer())
+  await wait(SETTLE_MS)
   await pane.switchLayout('force')
   await wait(SETTLE_MS)
   const before = cuts.length
@@ -884,6 +890,18 @@ test('walk rows cut every snarl a walk takes past the window, so a walk comes wh
   expect(cuts.at(-1)!.snarls).toBeUndefined()
 })
 
+// A walk file cuts the same whatever the snarl option says
+test('walk rows on an rGFA track cut for the step budget, not for snarls', async () => {
+  const { pane, cuts } = await shownGraph({ paths: true })
+  await pane.switchLayout('force')
+  await wait(SETTLE_MS)
+  const before = cuts.length
+  await pane.switchLayout('walkrows')
+  await wait(SETTLE_MS)
+  expect(cuts).toHaveLength(before + 1)
+  expect(cuts.at(-1)!.snarls).toBeUndefined()
+})
+
 test('a launch in the force layout cuts the window alone', async () => {
   const { view, cuts } = createEnvironment()
   view.zoomTo(60_000 / WIDTH_PX)
@@ -1018,9 +1036,11 @@ test('each grammar setter writes the track config, and the pane reads it back',
   display.setLayoutMode('ordered')
   display.setColorScheme('depth')
   display.setNodeWidth('uniform')
+  display.setLinkWidth('walks')
   display.setLayer('bubbles', true)
   display.setFacet('walk')
   display.setWalkRowSamples(['HG1'])
+  display.setWalkRowOrder('shared')
   display.setHover('off')
   const slots = [
     'layoutMode',
@@ -1040,21 +1060,31 @@ test('each grammar setter writes the track config, and the pane reads it back',
   ).toEqual({
     layoutMode: 'ordered',
     color: { field: 'depth' },
-    size: 6,
+    size: { value: 6, links: 'walks' },
     layers: { bubbles: true },
     facet: { field: 'walk', domain: [] },
-    rows: { kept: ['HG1'] },
+    rows: { kept: ['HG1'], order: 'shared' },
     hover: 'off',
   })
   expect([
     display.chosenLayoutMode,
     display.chosenColorScheme,
     display.nodeWidth,
+    display.linkWidth,
     display.showBubbles,
     display.facetSetting.field,
     display.walkRowSamples,
     display.chosenHover,
-  ]).toEqual(['ordered', 'depth', 'uniform', true, 'walk', ['HG1'], 'off'])
+  ]).toEqual([
+    'ordered',
+    'depth',
+    'uniform',
+    'walks',
+    true,
+    'walk',
+    ['HG1'],
+    'off',
+  ])
 })
 
 // Reset track settings, undo and the config editor write the slot without

package/src/LinearGraphDisplay/components/GraphStatusChrome.test.tsx

@@ -39,6 +39,24 @@ test('a drawn graph sits in the chrome with its readiness attributes', () => {
   expect(screen.getByTestId('graph-canvas')).toBeTruthy()
 })
 
+// GraphCanvas shows it, with the retry that rebuilds the backend
+test('a render error alone is left to the canvas', () => {
+  render(
+    <GraphStatusChrome
+      model={model({ renderError: new Error('context lost') })}
+      phase="error"
+      drawn={false}
+      testid="linear-graph-display"
+    >
+      <canvas />
+    </GraphStatusChrome>,
+  )
+  expect(screen.queryByText(/context lost/)).toBeNull()
+  expect(screen.getByTestId('linear-graph-display').dataset.displayPhase).toBe(
+    'error',
+  )
+})
+
 test('a refused cut shows its notice over the graph', () => {
   const error = Object.assign(
     new Error('Zoom in to about 54Kbp to see the graph'),

package/src/LinearGraphDisplay/components/GraphStatusChrome.tsx

@@ -31,7 +31,7 @@ const FORCE_LOAD_ADVICE =
 // read `model` and `visible`; later hosts read values and callbacks. Each
 // overlay gets both, so one build runs on either.
 function overlayProps(model: LinearGraphDisplayModel) {
-  const error = model.error ?? model.renderError
+  const { error } = model
   const regionTooLarge =
     error instanceof Error &&
     (error as { regionTooLarge?: unknown }).regionTooLarge === true
@@ -128,7 +128,9 @@ export default observer(function GraphStatusChrome({
         {children}
       </BottomRightCornerContext>
       <TrackOverlayPortal>
-        {phase === 'error' ? (
+        {/* a backend's render error is the canvas's banner, whose retry
+        rebuilds the backend */}
+        {phase === 'error' && model.error !== undefined ? (
           <ErrorBar model={model} visible {...props.error} />
         ) : null}
         <Loading

package/src/LinearGraphDisplay/components/SubgraphHaplotypesField.test.tsx

@@ -1,4 +1,5 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { observable, runInAction } from 'mobx'
 
 import SubgraphHaplotypesField from './SubgraphHaplotypesField'
 
@@ -58,3 +59,42 @@ test('without names the field takes typed ones', () => {
   fireEvent.keyDown(field, { key: 'Enter' })
   expect(m.setSubgraphHaplotypes).toHaveBeenCalledWith(['HG002', 'NA19240#1'])
 })
+
+// A model whose set re-renders the field, as the display's does
+function liveModel(haplotypeNames?: string[]) {
+  const m = observable({
+    sourceAdapter: { type: 'RgfaTabixAdapter', walksUri: 'chr22' },
+    cutHaplotypes: ['HG002'],
+    haplotypeNames,
+    setSubgraphHaplotypes(haplotypes: string[]) {
+      m.cutHaplotypes = haplotypes
+    },
+    recut: vi.fn(),
+  })
+  return m as unknown as LinearGraphCutModel & { cutHaplotypes: string[] }
+}
+
+test('applying from the field keeps its focus', () => {
+  const m = liveModel()
+  render(<SubgraphHaplotypesField model={m} />)
+  const field = screen.getByTestId<HTMLInputElement>('graph-haplotypes-field')
+  field.focus()
+  fireEvent.change(field, { target: { value: 'HG002, NA19240#1' } })
+  fireEvent.keyDown(field, { key: 'Enter' })
+  expect(m.cutHaplotypes).toEqual(['HG002', 'NA19240#1'])
+  expect(screen.getByTestId('graph-haplotypes-field')).toBe(field)
+  expect(document.activeElement).toBe(field)
+})
+
+test('a set changed elsewhere resets the draft', () => {
+  const m = liveModel()
+  render(<SubgraphHaplotypesField model={m} />)
+  act(() => {
+    runInAction(() => {
+      m.cutHaplotypes = ['HG00097#1']
+    })
+  })
+  expect(
+    screen.getByTestId<HTMLInputElement>('graph-haplotypes-field').value,
+  ).toBe('HG00097#1')
+})

package/src/LinearGraphDisplay/components/SubgraphHaplotypesField.tsx

@@ -18,20 +18,39 @@ function parseHaplotypeList(text: string) {
   return text.split(/[\s,]+/).filter(name => name !== '')
 }
 
+const sameList = (a: readonly string[], b: readonly string[]) =>
+  a.join('\n') === b.join('\n')
+
+// The cut's set, and the last one this field saw: an outside change (a
+// restored session, a launch) resets the draft, while the field's own apply
+// records what it set first, so it keeps its focus and draft
+function useCutHaplotypes(model: LinearGraphCutModel, reset: () => void) {
+  const current = model.cutHaplotypes ?? []
+  const [seen, setSeen] = useState(current)
+  if (!sameList(current, seen)) {
+    setSeen(current)
+    reset()
+  }
+  return (haplotypes: string[]) => {
+    if (!sameList(haplotypes, current)) {
+      setSeen(haplotypes)
+      model.setSubgraphHaplotypes(haplotypes)
+      model.recut()
+    }
+  }
+}
+
 const HaplotypeListField = observer(function HaplotypeListField({
   model,
 }: {
   model: LinearGraphCutModel
 }) {
   const [draft, setDraft] = useState(model.cutHaplotypes?.join(', ') ?? '')
+  const setCut = useCutHaplotypes(model, () => {
+    setDraft(model.cutHaplotypes?.join(', ') ?? '')
+  })
   const apply = () => {
-    const parsed = parseHaplotypeList(draft)
-    const unchanged =
-      parsed.join('\n') === (model.cutHaplotypes ?? []).join('\n')
-    if (!unchanged) {
-      model.setSubgraphHaplotypes(parsed)
-      model.recut()
-    }
+    setCut(parseHaplotypeList(draft))
   }
   return (
     <TextField
@@ -72,12 +91,10 @@ const HaplotypePickField = observer(function HaplotypePickField({
   const draftRef = useRef(draft)
   const typed = useRef('')
   const [open, setOpen] = useState(false)
-  const apply = (haplotypes: string[]) => {
-    if (haplotypes.join('\n') !== (model.cutHaplotypes ?? []).join('\n')) {
-      model.setSubgraphHaplotypes(haplotypes)
-      model.recut()
-    }
-  }
+  const apply = useCutHaplotypes(model, () => {
+    draftRef.current = model.cutHaplotypes ?? []
+    setDraft(draftRef.current)
+  })
   return (
     <Autocomplete
       multiple
@@ -126,9 +143,7 @@ const HaplotypePickField = observer(function HaplotypePickField({
   )
 })
 
-// Only a GBZ cut and a walk-indexed rGFA cut read the set. The inner field is
-// keyed on it so an outside change (a restored session, a launch) resets the
-// draft rather than fighting it.
+// Only a GBZ cut and a walk-indexed rGFA cut read the set
 const SubgraphHaplotypesField = observer(function SubgraphHaplotypesField({
   model,
 }: {
@@ -136,14 +151,13 @@ const SubgraphHaplotypesField = observer(function SubgraphHaplotypesField({
 }) {
   const { classes } = useStyles()
   const names = model.haplotypeNames
-  const key = model.cutHaplotypes?.join(',') ?? ''
   const adapter = model.sourceAdapter
   return adapter && cutsByHaplotype(adapter) ? (
     <div className={classes.section}>
       {names ? (
-        <HaplotypePickField key={key} model={model} names={names} />
+        <HaplotypePickField model={model} names={names} />
       ) : (
-        <HaplotypeListField key={key} model={model} />
+        <HaplotypeListField model={model} />
       )}
       <Typography variant="caption" component="div" color="text.secondary">
         {names

package/src/LinearGraphDisplay/configSchema.ts

@@ -44,7 +44,8 @@ export function configSchemaFactory() {
        * #slot
        * the node thickness: a px number draws every node that thick;
        * `{ field: 'depth', value }` thickens a node the more paths carry it,
-       * around `value` px
+       * around `value` px; `links: 'walks'` thickens a link the more walks
+       * take it
        */
       size: {
         type: 'frozen',
@@ -54,8 +55,8 @@ export function configSchemaFactory() {
       /**
        * #slot
        * what the drawing adds over its nodes and edges, stated as changes to
-       * the defaults: `paths`, `bubbles` and `walkStrip` are off, `deletions`,
-       * `genes` and `referenceStrip` on
+       * the defaults: `paths`, `bubbles`, `walkStrip` and `walkRibbons` are
+       * off, `deletions`, `genes` and `referenceStrip` on
        * ```js
        * { layers: { bubbles: true, genes: false } }
        * ```

package/src/RgfaTabixAdapter/RgfaTabixAdapter.ts

@@ -4,11 +4,7 @@ import { ObservableCreate } from '@jbrowse/core/util/rxjs'
 import { parseSegmentRow, rgfaCut, segmentSamples } from '@jbrowse/graph-walks'
 
 import { locationIsSet } from '../locationName.ts'
-import {
-  PanSNRefNames,
-  openTabixSlot,
-  unmappedRegionMessage,
-} from '../panSNTabix.ts'
+import { PanSNRefNames, openTabixSlot } from '../panSNTabix.ts'
 import { getLines } from '../tabixRange.ts'
 import { WalkIndex } from './walkReader.ts'
 
@@ -194,10 +190,7 @@ export default class RgfaTabixAdapter extends BaseFeatureDataAdapter<RgfaTabixAd
   ): Promise<string | WalkCut> {
     const { hops, signal, tier } = opts
     const index = this.index(tier)
-    const tabixRefName = await index.refNames.resolve(region, { signal })
-    if (tabixRefName === undefined) {
-      throw new Error(unmappedRegionMessage(region))
-    }
+    const tabixRefName = await index.refNames.resolveForCut(region, { signal })
     if (index.walks) {
       return index.walks.subgraph(tabixRefName, region, opts)
     }