jbrowse-plugin-graphgenomeviewer 4.0.21 → 4.0.23

package/src/GraphGenomeView/components/GraphToolbar.tsx

@@ -48,7 +48,7 @@ const GraphToolbar = observer(function GraphToolbar({
         <IconButton
           size="small"
           onClick={() => {
-            model.zoom(1.5, model.paneWidth / 2, model.canvasHeight / 2)
+            model.zoom(1.5, model.viewBox.width / 2, model.viewBox.height / 2)
           }}
         >
           <ZoomInIcon />
@@ -58,7 +58,11 @@ const GraphToolbar = observer(function GraphToolbar({
         <IconButton
           size="small"
           onClick={() => {
-            model.zoom(1 / 1.5, model.paneWidth / 2, model.canvasHeight / 2)
+            model.zoom(
+              1 / 1.5,
+              model.viewBox.width / 2,
+              model.viewBox.height / 2,
+            )
           }}
         >
           <ZoomOutIcon />

package/src/GraphGenomeView/components/ReferenceStripOverlay.tsx

@@ -1,10 +1,13 @@
 import { useEffect, useRef } from 'react'
 
 import { drawReferenceStrip } from '@jbrowse/bandage-core/referenceStrip'
+import { encodingSwatchCss } from '@jbrowse/bandage-core/walkEncoding'
 import { getDpr } from '@jbrowse/render-core/canvas2dUtils'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
+import { legendBoxStyle, legendRowStyle } from './legendStyles'
+
 import type { GraphPaneModel } from '../model'
 
 const canvasStyle = {
@@ -64,27 +67,29 @@ const ReferenceStripOverlay = observer(function ReferenceStripOverlay({
 
 export default ReferenceStripOverlay
 
-const legendBoxStyle = {
-  background: 'rgba(255,255,255,0.82)',
-  padding: '4px 6px',
-  borderRadius: 3,
-  fontSize: 11,
-  lineHeight: '15px',
-  whiteSpace: 'nowrap' as const,
-}
-const legendRowStyle = { display: 'flex', alignItems: 'center', gap: 5 }
 const SWATCH_PX = 18
 
-function StripSwatch() {
+// the strip's own colours: the reference lane's under lifted walks, grey
+// when the reference is not one of them, else the node scheme's ramp
+function StripSwatch({ background }: { background: string }) {
   return (
-    <svg width={SWATCH_PX} height={4} style={{ flex: 'none' }}>
-      <rect x={0} y={0} width={6} height={4} fill="hsl(0, 70%, 50%)" />
-      <rect x={6} y={0} width={5} height={4} fill="hsl(120, 70%, 50%)" />
-      <rect x={11} y={0} width={7} height={4} fill="hsl(240, 70%, 50%)" />
-    </svg>
+    <div style={{ width: SWATCH_PX, height: 4, flex: 'none', background }} />
   )
 }
 
+const RAMP_SWATCH =
+  'linear-gradient(to right, hsl(0, 70%, 50%) 0 33%, hsl(120, 70%, 50%) 33% 61%, hsl(240, 70%, 50%) 61%)'
+
+function stripBackground(model: GraphPaneModel) {
+  const lift = model.walkLift
+  const reference = lift?.walks.find(w => w.reference)
+  return reference
+    ? encodingSwatchCss(reference.encoding)
+    : lift
+      ? 'rgb(160, 160, 160)'
+      : RAMP_SWATCH
+}
+
 function OverhangSwatch() {
   return (
     <svg width={SWATCH_PX} height={8} style={{ flex: 'none' }}>
@@ -102,7 +107,7 @@ export const ReferenceStripLegend = observer(function ReferenceStripLegend({
   return model.referenceStripShown ? (
     <div style={legendBoxStyle} data-testid="graph-reference-strip-legend">
       <div style={legendRowStyle}>
-        <StripSwatch />
+        <StripSwatch background={stripBackground(model)} />
         <span>top strip: reference segments at their bp</span>
       </div>
       {model.referenceStripOverhangs ? (

package/src/GraphGenomeView/components/TubeMapOverlay.tsx

@@ -18,6 +18,8 @@ import { getDpr } from '@jbrowse/render-core/canvas2dUtils'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
+import { legendBoxStyle, legendRowStyle } from './legendStyles'
+
 import type { GraphPaneModel } from '../model'
 
 const canvasStyle = {
@@ -109,15 +111,6 @@ const TubeMapOverlay = observer(function TubeMapOverlay({
 
 export default TubeMapOverlay
 
-const legendBoxStyle = {
-  background: 'rgba(255,255,255,0.82)',
-  padding: '4px 6px',
-  borderRadius: 3,
-  fontSize: 11,
-  lineHeight: '15px',
-  whiteSpace: 'nowrap' as const,
-}
-const legendRowStyle = { display: 'flex', alignItems: 'center', gap: 5 }
 const SWATCH_PX = 18
 
 // Two boxes' brackets, as the ruler draws them under every box

package/src/GraphGenomeView/components/UnpopButton.tsx

@@ -6,7 +6,6 @@ import type { GraphPaneModel } from '../model'
 const style = {
   position: 'absolute' as const,
   left: 8,
-  top: 8,
   zIndex: 5,
   background: 'rgba(255,255,255,0.9)',
   textTransform: 'none' as const,
@@ -22,7 +21,7 @@ const UnpopButton = observer(function UnpopButton({
     <Button
       size="small"
       variant="outlined"
-      style={style}
+      style={{ ...style, ...(model.facetPanels ? { bottom: 8 } : { top: 8 }) }}
       data-testid="graph-unpop-bubble"
       onClick={() => {
         void model.unpopBubble()

package/src/GraphGenomeView/components/WalkKey.tsx

@@ -0,0 +1,52 @@
+import { encodingSwatchCss } from '@jbrowse/bandage-core/walkEncoding'
+import { walkKey } from '@jbrowse/bandage-core/walkKey'
+
+import { legendRowStyle } from './legendStyles'
+
+import type { LiftedWalk } from '@jbrowse/bandage-core/walkHighlight'
+
+export const walkSwatchStyle = {
+  width: 18,
+  height: 8,
+  borderRadius: 2,
+  flex: 'none',
+}
+const walkBlockStyle = { marginBottom: 2 }
+const walkBarStyle = { ...walkSwatchStyle, width: 48 }
+
+// One walk's key: a swatch, or a short bar of the scale its lane shades by,
+// then its name; see walkKey for the words
+export default function WalkKey({
+  walk,
+  label,
+  reference,
+  hint,
+}: {
+  walk: LiftedWalk
+  label: string
+  reference?: { name?: string; start: number; end: number }
+  hint?: string
+}) {
+  const key = walkKey(walk, reference)
+  return (
+    <div
+      style={walkBlockStyle}
+      title={[key.hover, hint].filter(Boolean).join(' · ') || undefined}
+    >
+      <div style={legendRowStyle}>
+        <div
+          style={{
+            ...(key.shades ? walkBarStyle : walkSwatchStyle),
+            background: encodingSwatchCss(walk.encoding),
+          }}
+        />
+        <span>
+          <strong>{label}</strong>
+          {key.delta}
+          {key.reversed}
+        </span>
+      </div>
+      {key.scale ? <div>{key.scale}</div> : null}
+    </div>
+  )
+}

package/src/GraphGenomeView/components/WalkRowsOverlay.tsx

@@ -5,6 +5,7 @@ import { LABEL_CHAR_PX } from '@jbrowse/bandage-core/overlayLabels'
 import { REFERENCE_RAMP_ALT_CSS } from '@jbrowse/bandage-core/renderer/GeometryBuilder'
 import { observer } from 'mobx-react'
 
+import { legendBoxStyle, legendRowStyle } from './legendStyles'
 import { RAMP_GRADIENT_CSS, rampHueCss, rampStops } from './referenceRampCss'
 import { CALL_TOLERANCE } from '../repeats/walkCalls'
 
@@ -44,15 +45,6 @@ const DISAGREES = '#c62828'
 const OFF_REFERENCE = '#8e3fbf'
 const BAR_PX = 12
 
-const legendBoxStyle = {
-  background: 'rgba(255,255,255,0.82)',
-  padding: '4px 6px',
-  borderRadius: 3,
-  fontSize: 11,
-  lineHeight: '15px',
-  whiteSpace: 'nowrap' as const,
-}
-const legendRowStyle = { display: 'flex', alignItems: 'center', gap: 5 }
 const swatchStyle = { width: 18, height: BAR_PX - 4, borderRadius: 2 }
 const tickSwatchStyle = {
   ...swatchStyle,

package/src/GraphGenomeView/components/WalkSelect.tsx

@@ -20,7 +20,7 @@ const useStyles = makeStyles()({
 
 // Which walks to lift out of the drawing: Bandage's path highlight, for as many
 // of the haplotypes a GBZ cut carries as the reader picks. Absent from a graph
-// with no walks.
+// with no walks, and from a tube map, whose tubes are the walks.
 const WalkSelect = observer(function WalkSelect({
   model,
 }: {
@@ -28,7 +28,7 @@ const WalkSelect = observer(function WalkSelect({
 }) {
   const { classes } = useStyles()
   const { walkChoices } = model
-  if (walkChoices.length === 0) {
+  if (walkChoices.length === 0 || !model.liftsWalks) {
     return null
   }
   const names = new Set(walkChoices.map(c => c.name))

package/src/GraphGenomeView/components/legendStyles.ts

@@ -0,0 +1,11 @@
+// A key's box over the drawing, and one row in it: a swatch beside its words
+export const legendBoxStyle = {
+  background: 'rgba(255,255,255,0.82)',
+  padding: '4px 6px',
+  borderRadius: 3,
+  fontSize: 11,
+  lineHeight: '15px',
+  whiteSpace: 'nowrap' as const,
+}
+
+export const legendRowStyle = { display: 'flex', alignItems: 'center', gap: 5 }

package/src/GraphGenomeView/components/usePaneGestures.ts

@@ -0,0 +1,274 @@
+import { useEffect, useRef, useState } from 'react'
+
+import {
+  findHoveredEdge,
+  findHoveredNode,
+} from '@jbrowse/bandage-core/util/hitDetection'
+import { wheelZoomFactor } from '@jbrowse/bandage-core/util/wheelZoom'
+import { isAlive } from '@jbrowse/mobx-state-tree'
+
+import type { GraphPaneModel } from '../model'
+
+// wheel events need passive:false to call preventDefault — React registers
+// wheel listeners as passive, so we must add this imperatively
+export function useWheelZoom(
+  canvas: HTMLCanvasElement | null | undefined,
+  model: GraphPaneModel,
+) {
+  useEffect(() => {
+    if (!canvas) {
+      return undefined
+    }
+    const c = canvas
+    function handleWheel(e: WheelEvent) {
+      if (model.hostPlacesX) {
+        return
+      }
+      if (model.host) {
+        e.stopPropagation()
+      }
+      e.preventDefault()
+      const rect = c.getBoundingClientRect()
+      model.zoom(
+        wheelZoomFactor(e),
+        e.clientX - rect.left,
+        e.clientY - rect.top,
+      )
+    }
+    c.addEventListener('wheel', handleWheel, { passive: false })
+    return () => {
+      c.removeEventListener('wheel', handleWheel)
+    }
+  }, [canvas, model])
+}
+
+// The pointer on a canvas drawing the pane's transform: the pane's own, or any
+// facet panel, since the panels share it. Coordinates are read against the
+// canvas the event is on.
+export function usePaneGestures(model: GraphPaneModel) {
+  // Where the pointer was last, and whether it has travelled since mousedown —
+  // per-gesture scratch that nothing renders from, which is what a ref is for.
+  // Whether a drag is in progress is model state (`isPanning`/`draggingNode`),
+  // because the cursor renders from it.
+  const lastMouseRef = useRef({ x: 0, y: 0 })
+  const hasMovedRef = useRef(false)
+  // A pan and a hover are applied once per frame, not once per mousemove:
+  // mousemove fires in bursts well above the frame rate, and each pan step
+  // repainted the canvas and re-placed every overlay label, while each hover
+  // step ran both hit indexes. The pending pan is the summed delta; the pending
+  // hover is the last pointer position, since only the last one can be right.
+  const pendingRef = useRef<{
+    frame: number
+    pan: { dx: number; dy: number } | null
+    hover: { x: number; y: number } | null
+  }>({ frame: 0, pan: null, hover: null })
+  useEffect(
+    () => () => {
+      cancelAnimationFrame(pendingRef.current.frame)
+    },
+    [],
+  )
+  const [contextNode, setContextNode] = useState<
+    { nodeId: string; top: number; left: number } | undefined
+  >(undefined)
+
+  function screenToGraph(screenX: number, screenY: number) {
+    return {
+      x: (screenX - model.translateX) / model.scaleX,
+      y: (screenY - model.translateY) / model.scaleY,
+    }
+  }
+
+  function getMouseCoord(e: React.MouseEvent) {
+    const rect = (e.currentTarget as HTMLCanvasElement).getBoundingClientRect()
+    return screenToGraph(e.clientX - rect.left, e.clientY - rect.top)
+  }
+
+  // The node at a graph coordinate, which mousedown, mousemove and click all
+  // need. Takes the coordinate rather than the event so a caller that already
+  // has one does not pay for a second getBoundingClientRect.
+  function nodeAt(x: number, y: number) {
+    const { nodePositions } = model
+    const sx = x * model.scaleX + model.translateX
+    const sy = y * model.scaleY + model.translateY
+    if (model.layoutResult?.tubeMap) {
+      return model.tubeMapNodeAt(sx, sy)
+    }
+    const onStrip = model.referenceStripNodeAt(sx, sy)
+    if (onStrip) {
+      return onStrip
+    }
+    return nodePositions
+      ? findHoveredNode(
+          nodePositions,
+          x,
+          y,
+          model.axisScale,
+          model.positionsVersion,
+          model.nodeInk,
+        )
+      : null
+  }
+
+  function onMouseDown(e: React.MouseEvent) {
+    if (e.button === 0) {
+      hasMovedRef.current = false
+      if (model.hostPlacesX) {
+        return
+      }
+      if (model.host) {
+        e.stopPropagation()
+      }
+      const { x, y } = getMouseCoord(e)
+      // a tube map's boxes are the layout's, and the strip's are bp, not
+      // positions to drag
+      const node =
+        model.layoutResult?.tubeMap ||
+        e.nativeEvent.offsetY < model.referenceStripZonePx
+          ? null
+          : nodeAt(x, y)
+      if (node) {
+        model.setDraggingNode(node)
+      } else {
+        model.setPanning(true)
+      }
+      lastMouseRef.current = { x: e.clientX, y: e.clientY }
+    }
+  }
+
+  function applyPending() {
+    const pending = pendingRef.current
+    pending.frame = 0
+    if (pending.pan) {
+      model.setTransform(
+        model.scale,
+        model.translateX + pending.pan.dx,
+        model.translateY + pending.pan.dy,
+      )
+      pending.pan = null
+    }
+    if (pending.hover && model.nodePositions && model.graph) {
+      const { x, y } = screenToGraph(pending.hover.x, pending.hover.y)
+      pending.hover = null
+      const node = nodeAt(x, y)
+      model.setHoveredNode(node)
+      model.setHoveredEdge(
+        node || model.layoutResult?.tubeMap
+          ? null
+          : findHoveredEdge(
+              model.nodePositions,
+              model.graph,
+              x,
+              y,
+              model.axisScale,
+              // resolved, so the hit index bounds the ribbons that are
+              // actually drawn — see effectiveDrawPaths. Facet panels draw
+              // none.
+              model.effectiveDrawPaths && !model.facetPanels,
+              model.positionsVersion,
+              model.deletionEdgeIndexes,
+              model.hiddenEdgeIndexes,
+            ),
+      )
+    }
+  }
+
+  function scheduleFrame() {
+    if (!pendingRef.current.frame) {
+      pendingRef.current.frame = requestAnimationFrame(applyPending)
+    }
+  }
+
+  function dropPending() {
+    const pending = pendingRef.current
+    cancelAnimationFrame(pending.frame)
+    pending.frame = 0
+    pending.pan = null
+    pending.hover = null
+  }
+
+  function onMouseMove(e: React.MouseEvent) {
+    const dx = e.clientX - lastMouseRef.current.x
+    const dy = e.clientY - lastMouseRef.current.y
+    lastMouseRef.current = { x: e.clientX, y: e.clientY }
+
+    if (Math.abs(dx) > 1 || Math.abs(dy) > 1) {
+      hasMovedRef.current = true
+    }
+
+    const pending = pendingRef.current
+    if (model.draggingNode) {
+      model.moveNode(model.draggingNode, dx / model.scaleX, dy / model.scaleY)
+    } else if (model.isPanning) {
+      pending.pan = {
+        dx: (pending.pan?.dx ?? 0) + dx,
+        dy: (pending.pan?.dy ?? 0) + dy,
+      }
+      scheduleFrame()
+    } else {
+      const rect = (
+        e.currentTarget as HTMLCanvasElement
+      ).getBoundingClientRect()
+      pending.hover = { x: e.clientX - rect.left, y: e.clientY - rect.top }
+      scheduleFrame()
+    }
+  }
+
+  function onMouseUp() {
+    model.stopDragging()
+  }
+
+  // also fired by the canvas unmounting under a resting pointer, after the
+  // view closing it has destroyed the model
+  function onMouseLeave() {
+    dropPending()
+    if (!isAlive(model)) {
+      return
+    }
+    model.stopDragging()
+    model.setHoveredNode(null)
+    model.setHoveredEdge(null)
+  }
+
+  // Right-clicking a node is the gesture that asks "where is this?", and until
+  // now the graph had no answer: a node named an assembly and an offset in its
+  // tags that nothing surfaced. The items come from the model's launch targets,
+  // so what is offered is what can actually be opened.
+  function onContextMenu(e: React.MouseEvent) {
+    const { x, y } = getMouseCoord(e)
+    const node = nodeAt(x, y)
+    if (node) {
+      e.preventDefault()
+      setContextNode({ nodeId: node, top: e.clientY, left: e.clientX })
+    }
+  }
+
+  function onClick(e: React.MouseEvent) {
+    // a click that ended a drag selects nothing
+    if (!hasMovedRef.current) {
+      const { x, y } = getMouseCoord(e)
+      const node = nodeAt(x, y)
+      model.setSelectedNode(node)
+      if (node) {
+        model.showNodeDetails(node)
+      }
+    }
+  }
+
+  return {
+    handlers: {
+      onMouseDown,
+      onMouseMove,
+      onMouseUp,
+      onMouseLeave,
+      onClick,
+      onContextMenu,
+    },
+    contextNode,
+    closeContextMenu: () => {
+      setContextNode(undefined)
+    },
+  }
+}
+
+export type PaneHandlers = ReturnType<typeof usePaneGestures>['handlers']

package/src/GraphGenomeView/model.test.ts

@@ -2494,17 +2494,17 @@ describe('walk rows', () => {
     })
     await model.loadGFA(WALKS_GFA, 'walks')
     model.liftWalks(['B#1#ctg', 'GRCh38#0#chr1'])
-    model.setWalkColor('B#1#ctg', { field: 'strand' })
-    model.setWalkColor('B#1#ctg', { scheme: 'greens' })
+    model.setWalkColor('B#1#ctg', { field: 'walk' })
+    model.setWalkColor('B#1#ctg', { scheme: 'green' })
     model.toggleWalk('A#1#ctg')
     expect(model.walkLift!.walks.map(w => [w.name, w.encoding])).toEqual([
-      ['GRCh38#0#chr1', { field: 'reference', scheme: 'rainbow' }],
-      ['B#1#ctg', { field: 'strand', scheme: 'greens' }],
-      ['A#1#ctg', { field: 'progress', scheme: 'reds' }],
+      ['GRCh38#0#chr1', { field: 'walk', scheme: 'grey' }],
+      ['B#1#ctg', { field: 'walk', scheme: 'green' }],
+      ['A#1#ctg', { field: 'walk', scheme: 'red' }],
     ])
-    // the reference is coloured by position whatever the node colour scheme
+    // lifted together, each walk is one flat colour
     const ref = model.walkLift!.walks[0]!
-    expect(new Set(ref.colors.values()).size).toBe(2)
+    expect(new Set(ref.colors.values()).size).toBe(1)
     interface Item {
       label?: string
       checked?: boolean
@@ -2515,16 +2515,108 @@ describe('walk rows', () => {
     )!
     const colour = walkMenu.subMenu!.find(item => item.label === 'Colour B#1')!
     expect(
-      colour.subMenu.filter(item => item.checked).map(item => item.label),
-    ).toEqual(['Strand against the reference', 'Greens'])
+      colour.subMenu!.filter(item => item.checked).map(item => item.label),
+    ).toEqual(['One colour for the walk', 'Lime to forest'])
+    // the rainbow is offered for reference position only
+    expect(colour.subMenu!.some(item => item.label === 'Rainbow')).toBe(false)
     model.liftWalks(['B#1#ctg'])
     expect(model.walkLayers).toEqual([
-      { walk: 'B#1#ctg', color: { field: 'strand', scheme: 'greens' } },
+      { walk: 'B#1#ctg', color: { field: 'walk', scheme: 'green' } },
     ])
     model.toggleWalk('B#1#ctg')
     expect(model.walkLift).toBeUndefined()
   })
 
+  test('faceted by walk, the pane draws one panel per lifted walk on one scale', async () => {
+    rpcRespond()
+    const model = stateModelFactory().create({
+      type: 'GraphGenomeView',
+      layoutMode: 'auto',
+    })
+    await model.loadGFA(WALKS_GFA, 'walks')
+    model.liftWalks(['GRCh38#0#chr1'])
+    model.setFacet('walk')
+    // one walk needs no facet
+    expect(model.facetPanels).toBeUndefined()
+    model.liftWalks(['GRCh38#0#chr1', 'B#1#ctg', 'A#1#ctg'])
+    expect(
+      model.facetPanels!.map(p => [p.walks[0]!.name, p.walks[0]!.encoding]),
+    ).toEqual([
+      ['GRCh38#0#chr1', { field: 'progress', scheme: 'red' }],
+      ['B#1#ctg', { field: 'progress', scheme: 'red' }],
+      ['A#1#ctg', { field: 'progress', scheme: 'red' }],
+    ])
+    // a row layout's x is bp, so its panels stack full width
+    expect(model.facetGrid!.columns).toBe(1)
+    model.setFacetColumns(2)
+    expect(model.facetGrid!.columns).toBe(2)
+    model.setFacet('none')
+    expect(model.facetPanels).toBeUndefined()
+  })
+
+  test("faceted, the transform is each panel's and the menu keys what the panels draw", async () => {
+    rpcRespond()
+    const model = stateModelFactory().create({
+      type: 'GraphGenomeView',
+      layoutMode: 'auto',
+    })
+    await model.loadGFA(WALKS_GFA, 'walks')
+    model.startRenderingBackend(fakeRenderer())
+    model.liftWalks(['GRCh38#0#chr1', 'B#1#ctg'])
+    const whole = model.scale
+    model.setFacet('walk')
+    const grid = model.facetGrid!
+    expect(model.viewBox).toEqual({ width: grid.width, height: grid.height })
+    expect(model.canvasHeight).toBe(Math.max(160, grid.total))
+    expect(model.scale).toBeCloseTo(grid.scale, 10)
+    expect(model.scale).not.toBeCloseTo(whole, 10)
+    interface Item {
+      label?: string
+      checked?: boolean
+      subMenu?: Item[]
+    }
+    const walkMenu = (model.graphMenuItems() as Item[]).find(
+      item => item.label === 'Walk',
+    )!
+    const colour = walkMenu.subMenu!.find(item => item.label === 'Colour B#1')!
+    expect(
+      colour.subMenu!.filter(item => item.checked).map(item => item.label),
+    ).toEqual(['Progress along the walk', 'Yellow to red'])
+    const columns = walkMenu.subMenu!.find(item => item.label === 'Columns')!
+    expect(columns.subMenu!.map(item => item.label)).toEqual(['Auto', '1', '2'])
+  })
+
+  test('a tube map lifts no walk: its tubes are the walks', async () => {
+    rpcRespond()
+    const model = stateModelFactory().create({
+      type: 'GraphGenomeView',
+      layoutMode: 'tubemap',
+      walkLayers: [{ walk: 'GRCh38#0#chr1' }, { walk: 'B#1#ctg' }],
+      facet: 'walk',
+    })
+    await model.loadGFA(WALKS_GFA, 'walks')
+    expect(model.walkLift).toBeUndefined()
+    expect(model.facetPanels).toBeUndefined()
+    expect(
+      (model.graphMenuItems() as { label?: string }[]).some(
+        item => item.label === 'Walk',
+      ),
+    ).toBe(false)
+  })
+
+  test('a lane reads the reference ramp only when it is coloured by it', async () => {
+    rpcRespond()
+    const model = stateModelFactory().create({
+      type: 'GraphGenomeView',
+      layoutMode: 'auto',
+    })
+    await model.loadGFA(WALKS_GFA, 'walks')
+    model.liftWalks(['B#1#ctg'])
+    expect(model.walkRamp).toBeUndefined()
+    model.setWalkColor('B#1#ctg', { field: 'reference' })
+    expect(model.walkLift!.referenceDomain).toBeDefined()
+  })
+
   test('a session naming the one walk the old field lifted opens with none', () => {
     const model = stateModelFactory().create({
       type: 'GraphGenomeView',