jbrowse-plugin-graphgenomeviewer 7.1.2 → 7.1.4

package/src/GraphGenomeView/components/PaneSvg.tsx

@@ -3,24 +3,23 @@ import { LEGEND_INSET_PX } from '@jbrowse/bandage-core/labelLayout'
 import { LABEL_CHAR_PX } from '@jbrowse/bandage-core/overlayLabels'
 import { Canvas2DRenderer } from '@jbrowse/bandage-core/renderer/Canvas2DRenderer'
 import { svgCanvas } from '@jbrowse/bandage-core/renderer/svgCanvas'
-import { rulerInk } from '@jbrowse/bandage-core/tubeMap/axis'
 import { PaintLayer } from '@jbrowse/core/util/paintLayer'
 
 import BubbleHalos from './BubbleHalos'
 import GenePins from './GenePins'
 import LabelLayer from './LabelLayer'
+import { SvgSwatch } from './LegendSwatch'
 import { paintReferenceStrip } from './ReferenceStripOverlay'
 import { paintTubeMap } from './TubeMapOverlay'
 import WalkRowsOverlay from './WalkRowsOverlay'
 import {
-  SWATCH_PX,
   facetKeyRows,
   legendSections,
   swatchWidth,
   walkKeyRow,
 } from '../legendSections'
 
-import type { LegendRow, LegendSwatch, Stop } from '../legendSections'
+import type { LegendRow } from '../legendSections'
 import type { GraphPaneModel } from '../model'
 import type { WalkLift } from '@jbrowse/bandage-core/walkHighlight'
 import type { Ctx2D } from '@jbrowse/core/util/paintLayer'
@@ -79,192 +78,6 @@ function Body({
   )
 }
 
-function Gradient({
-  id,
-  x,
-  y,
-  stops,
-  width,
-  height,
-  square,
-}: {
-  id: string
-  x: number
-  y: number
-  stops: readonly Stop[]
-  width: number
-  height: number
-  square?: boolean
-}) {
-  const rect = (fill: string) => (
-    <rect
-      x={x}
-      y={y}
-      width={width}
-      height={height}
-      rx={square ? 0 : 2}
-      fill={fill}
-    />
-  )
-  return stops.length > 1 ? (
-    <>
-      <defs>
-        <linearGradient id={id}>
-          {stops.map((s, i) => (
-            <stop key={i} offset={s.offset} stopColor={s.color} />
-          ))}
-        </linearGradient>
-      </defs>
-      {rect(`url(#${id})`)}
-    </>
-  ) : (
-    rect(stops[0]!.color)
-  )
-}
-
-// A row's swatch with its left edge at x, centred on the row's text 5 px
-// above the baseline, as the screen centres it
-function SvgSwatch({
-  swatch,
-  x,
-  id,
-}: {
-  swatch: LegendSwatch
-  x: number
-  id: string
-}) {
-  const mid = -5
-  switch (swatch.kind) {
-    case 'fill': {
-      const height = swatch.height ?? 8
-      return (
-        <Gradient
-          id={id}
-          x={x}
-          y={mid - height / 2}
-          stops={swatch.stops}
-          width={swatchWidth(swatch)}
-          height={height}
-          square={swatch.square}
-        />
-      )
-    }
-    case 'bands': {
-      const band = swatch.bands.length > 1 ? 3 : 4
-      const top = mid - (band * swatch.bands.length) / 2
-      return (
-        <>
-          {swatch.bands.map((stops, i) => (
-            <Gradient
-              key={i}
-              id={`${id}-${i}`}
-              x={x}
-              y={top + i * band}
-              stops={stops}
-              width={SWATCH_PX}
-              height={band}
-              square
-            />
-          ))}
-        </>
-      )
-    }
-    case 'line':
-      return (
-        <rect
-          x={x}
-          y={mid - 1.5}
-          width={SWATCH_PX}
-          height={3}
-          rx={2}
-          fill={swatch.color}
-        />
-      )
-    case 'halo':
-      return (
-        <line
-          x1={x + 5}
-          x2={x + 13}
-          y1={mid}
-          y2={mid}
-          stroke={swatch.color}
-          strokeOpacity={0.35}
-          strokeWidth={8}
-          strokeLinecap="round"
-        />
-      )
-    case 'outline': {
-      const inset = swatch.stroke / 2
-      return (
-        <rect
-          x={x + inset}
-          y={mid - swatch.height / 2 + inset}
-          width={SWATCH_PX - swatch.stroke}
-          height={swatch.height - swatch.stroke}
-          rx={Math.max(0, swatch.radius - inset)}
-          fill="none"
-          stroke={swatch.color}
-          strokeWidth={swatch.stroke}
-        />
-      )
-    }
-    case 'overhang':
-      return (
-        <path
-          transform={`translate(${x} ${mid - 5})`}
-          d="M0,5 L8,0 L8,10 Z M18,5 L10,0 L10,10 Z"
-          fill="#18181c"
-        />
-      )
-    case 'glyph':
-      return (
-        <text
-          x={x + SWATCH_PX / 2}
-          y={0}
-          textAnchor="middle"
-          fontFamily="monospace"
-          fontSize={12}
-        >
-          {swatch.char}
-        </text>
-      )
-    case 'tick': {
-      const y = mid - swatch.height / 2
-      return (
-        <>
-          {swatch.backing ? (
-            <rect
-              x={x}
-              y={y}
-              width={SWATCH_PX}
-              height={swatch.height}
-              fill={swatch.backing}
-            />
-          ) : null}
-          <rect
-            x={x + SWATCH_PX / 2 - 1}
-            y={y}
-            width={2}
-            height={swatch.height}
-            fill={swatch.color}
-          />
-        </>
-      )
-    }
-    case 'bracket':
-      return (
-        <path
-          transform={`translate(${x} ${mid - 4})`}
-          d={`M0.5,6 V1.5 H5.5 V6 M8.5,6 V1.5 H${SWATCH_PX - 0.5} V6`}
-          fill="none"
-          stroke={rulerInk()}
-        />
-      )
-    case 'blank':
-      return null
-  }
-}
-
 interface KeyRow {
   key: string
   width: number
@@ -542,7 +355,7 @@ export default function PaneSvg({
       ) : (
         <Body
           model={model}
-          lift={model.walkLift}
+          lift={model.drawnHighlight}
           drawPaths={model.effectiveDrawPaths}
           width={width}
           height={height}

package/src/GraphGenomeView/components/WalkStrip.tsx

@@ -16,7 +16,7 @@ import { isAlive } from '@jbrowse/mobx-state-tree'
 import { observer } from 'mobx-react'
 
 import ElTree, { useSvgId } from './ElTree'
-import { LegendSwatchView } from './Legend'
+import { LegendSwatchView } from './LegendSwatch'
 import PaneContextMenu from './PaneContextMenu'
 import { legendRowStyle } from './legendStyles'
 import { walkRowSwatch } from '../legendSections'

package/src/GraphGenomeView/model.test.ts

@@ -25,7 +25,12 @@ import { recordingCanvas } from '@jbrowse/bandage-core/renderer/recordingCanvas'
 import { walkHighlight } from '@jbrowse/bandage-core/walkHighlight'
 import { readConfObject } from '@jbrowse/core/configuration'
 import { LAUNCH_LABEL, resolveSubMenu } from '@jbrowse/core/ui'
-import { applySnapshot, getSnapshot, types } from '@jbrowse/mobx-state-tree'
+import {
+  applyPatch,
+  applySnapshot,
+  getSnapshot,
+  types,
+} from '@jbrowse/mobx-state-tree'
 import { autorun } from 'mobx'
 
 import { facetKeyRows } from './legendSections'
@@ -626,7 +631,7 @@ describe('performance instrumentation', () => {
     consoleSpy.mockRestore()
   })
 
-  test('a stop before a new graph is laid out draws nothing of the last one', async () => {
+  test('a stop before a new graph is laid out draws nothing of the last one, and stops loading', async () => {
     const { answers, layouts, holdLayouts } = heldCuts()
     const model = createModel()
     const first = model.cutSubgraph({ type: 'RgfaTabixAdapter' }, TEST_REGION)
@@ -642,10 +647,13 @@ describe('performance instrumentation', () => {
     })
     model.stopLoad()
     expect(model.layoutResult).toBeUndefined()
+    expect(model.graph).toBeUndefined()
     expect(model.loadCanceled).toBe(true)
+    expect(model.showLoading).toBe(false)
     layouts[0]!()
     await second
     expect(model.layoutResult).toBeUndefined()
+    expect(model.showLoading).toBe(false)
   })
 })
 
@@ -1616,7 +1624,7 @@ describe('canvas height follows the drawing', () => {
     await model.loadGFA(SIMPLE_GFA, 'square')
     expect(model.canvasHeight).toBe(600)
 
-    model.setPaneHeight(420)
+    applyPatch(model, { op: 'replace', path: '/paneHeight', value: 420 })
     expect(model.canvasHeight).toBe(420)
     model.zoomToFit()
     expect(extent(model).h * model.scale).toBeLessThanOrEqual(420 - 80 + 1e-6)
@@ -1682,7 +1690,7 @@ describe('canvas height follows the drawing', () => {
     const model = createModel()
     await model.loadGFA(RGFA_FOUR_RANKS, 'four ranks')
 
-    model.setPaneHeight(40)
+    applyPatch(model, { op: 'replace', path: '/paneHeight', value: 40 })
     expect(model.canvasHeight).toBe(160)
   })
 
@@ -1695,7 +1703,7 @@ describe('canvas height follows the drawing', () => {
     await model.loadGFA(RGFA_FOUR_RANKS, 'four ranks')
     const fitted = model.canvasHeight
 
-    model.setPaneHeight(900)
+    applyPatch(model, { op: 'replace', path: '/paneHeight', value: 900 })
     expect(model.canvasHeight).toBe(fitted)
   })
 })

package/src/GraphGenomeView/pane/graphViews.ts

@@ -305,6 +305,11 @@ export const withGraphViews = paneBase
     get pathCount() {
       return self.graph?.paths?.length ?? 0
     },
+    // No hover is changing the legend, so its size is the one to fit the
+    // drawing around
+    get legendAtRest() {
+      return self.hoveredNode === null && self.hoveredRowWalks.length === 0
+    },
     get hasGraph() {
       return self.graph !== undefined
     },
@@ -602,6 +607,11 @@ export const withGraphViews = paneBase
       })
       return { walks: [], nodeIds, edgeIndexes, names: new Set() }
     },
+    // What the drawing keeps in colour while the rest greys, on screen and
+    // in the SVG export alike
+    get drawnHighlight(): WalkLift | undefined {
+      return self.walkLift ?? this.openBubbleFocus
+    },
     bubbleIsOpen(bubble: MinigraphBubble) {
       return self.openBubbles.some(o => sameBubble(o, bubble))
     },

package/src/GraphGenomeView/pane/loadActions.ts

@@ -687,10 +687,14 @@ export const withLoadActions = withEngineSettings.actions(self => {
         self.loadCanceled = true
       }
     },
-    // The user's stop, leaving whatever is drawn under it
+    // The user's stop, leaving whatever is drawn under it, and dropping a
+    // swapped-in graph whose layout never landed
     stopLoad() {
       abortLoad()
       dropLayoutOfReplacedGraph()
+      if (!self.layoutResult) {
+        resetCut()
+      }
       self.isLoading = false
       self.statusMessage = ''
       self.loadCanceled = true

package/src/GraphGenomeView/pane/morph.test.ts

@@ -1,9 +1,16 @@
 import { abgrAlpha, packAbgr } from '@jbrowse/bandage-core/renderer/colorBits'
 import { expect, test } from 'vitest'
 
-import { blendInto, fadeEntering, morphStarts, routeStarts } from './morph'
+import {
+  blendInto,
+  canMorph,
+  fadeEntering,
+  morphStarts,
+  routeStarts,
+} from './morph'
 
 import type { RenderBatch } from '@jbrowse/bandage-core/renderer/types'
+import type { LayoutResult } from '@jbrowse/bandage-core/types'
 
 const identity = { scaleX: 1, scaleY: 1, translateX: 0, translateY: 0 }
 
@@ -215,3 +222,29 @@ test('a node a morph brings in fades with every link touching it', () => {
   expect(alphas(batch.edgeCurves)).toEqual([128, 255])
   expect(alphas(batch.arrows)).toEqual([128])
 })
+
+const free: LayoutResult = { nodePositions: {} }
+
+test('a change between two free-placed layouts morphs', () => {
+  expect(canMorph(free, free, 100, false)).toBe(true)
+})
+
+test('a layout placed by rule on either side snaps', () => {
+  const ruled: LayoutResult[] = [
+    { ...free, referenceAxis: true },
+    { ...free, pixelRows: true },
+  ]
+  for (const r of ruled) {
+    expect(canMorph(r, free, 100, false)).toBe(false)
+    expect(canMorph(free, r, 100, false)).toBe(false)
+  }
+  expect(canMorph(free, { ...free, tubeMap: {} as never }, 100, false)).toBe(
+    false,
+  )
+  expect(canMorph(free, free, 100, true)).toBe(false)
+})
+
+test('a graph past the frame budget snaps', () => {
+  expect(canMorph(free, free, 3000, false)).toBe(true)
+  expect(canMorph(free, free, 3001, false)).toBe(false)
+})

package/src/GraphGenomeView/pane/morph.ts

@@ -3,7 +3,11 @@ import { strandSides } from '@jbrowse/bandage-core/util/geometry'
 
 import type { ScreenTransform } from './keepInView'
 import type { RenderBatch, Run } from '@jbrowse/bandage-core/renderer/types'
-import type { Graph, NodeSegment } from '@jbrowse/bandage-core/types'
+import type {
+  Graph,
+  LayoutResult,
+  NodeSegment,
+} from '@jbrowse/bandage-core/types'
 import type { EdgeSides } from '@jbrowse/bandage-core/util/geometry'
 
 type Positions = Record<string, NodeSegment[]>
@@ -17,11 +21,11 @@ interface Attachment {
 
 // Morphs above this many nodes snap instead: each frame rebuilds the
 // geometry, which past it no longer fits a frame (GRAPH_SCALE_AND_LOD.md)
-export const MORPH_MAX_NODES = 3000
-export const MORPH_MS = 350
+const MORPH_MAX_NODES = 3000
+const MORPH_MS = 350
 // the most of the morph one frame may take, so a busy main thread delays
 // the motion rather than skipping it
-export const MORPH_MAX_STEP_MS = 34
+const MORPH_MAX_STEP_MS = 34
 
 function arcPrefix(line: NodeSegment[]) {
   const arc = [0]
@@ -275,10 +279,75 @@ export function fadeEntering(
   })
 }
 
-export function easeInOut(t: number) {
+function easeInOut(t: number) {
   return t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2
 }
 
+// A layout change slides only between two free-placed drawings: a reference
+// axis, walk rows, a tube map or a facet grid places nodes by rule, and past
+// MORPH_MAX_NODES a frame's geometry rebuild no longer fits in a frame
+export function canMorph(
+  previous: LayoutResult,
+  next: LayoutResult,
+  nodeCount: number,
+  faceted: boolean,
+) {
+  return !(
+    previous.referenceAxis ||
+    next.referenceAxis ||
+    previous.pixelRows ||
+    next.pixelRows ||
+    next.tubeMap ||
+    faceted ||
+    nodeCount > MORPH_MAX_NODES
+  )
+}
+
+export function motionAllowed() {
+  return (
+    typeof requestAnimationFrame !== 'undefined' &&
+    !(
+      'matchMedia' in window &&
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    )
+  )
+}
+
+// Calls `blend` with the eased progress once a frame for MORPH_MS while
+// `isLive` holds, then `onEnd`. `finish` jumps to the last frame.
+export function runMorph(
+  blend: (t: number) => void,
+  isLive: () => boolean,
+  onEnd: () => void,
+) {
+  const run = {
+    frame: 0,
+    finish: () => {
+      blend(1)
+    },
+  }
+  let elapsed = 0
+  let last = performance.now()
+  const step = () => {
+    if (!isLive()) {
+      onEnd()
+      return
+    }
+    const now = performance.now()
+    elapsed += Math.min(now - last, MORPH_MAX_STEP_MS)
+    last = now
+    const t = Math.min(1, elapsed / MORPH_MS)
+    blend(easeInOut(t))
+    if (t < 1) {
+      run.frame = requestAnimationFrame(step)
+    } else {
+      onEnd()
+    }
+  }
+  run.frame = requestAnimationFrame(step)
+  return run
+}
+
 // Writes the blend of `starts` and `ends` at `t` into `into` IN PLACE, the
 // way a node drag moves positions (settingActions' moveNode)
 export function blendInto(

package/src/GraphGenomeView/pane/renderingActions.ts

@@ -252,7 +252,7 @@ export const withRenderingActions = withLoadActions
           }
           const geometryStart = performance.now()
           const built = self.buildDrawing(
-            self.walkLift ?? self.openBubbleFocus,
+            self.drawnHighlight,
             self.effectiveDrawPaths,
           )
           if (built) {

package/src/GraphGenomeView/pane/settingActions.ts

@@ -7,13 +7,12 @@ import { isAlive } from '@jbrowse/mobx-state-tree'
 
 import { keepInView, onScreen } from './keepInView'
 import {
-  MORPH_MAX_NODES,
-  MORPH_MAX_STEP_MS,
-  MORPH_MS,
   blendInto,
-  easeInOut,
+  canMorph,
   morphStarts,
+  motionAllowed,
   routeStarts,
+  runMorph,
 } from './morph'
 import { VIEWPORT_DEBOUNCE_MS, forceLayouts } from './paneBase'
 import { withTubeMapViews } from './tubeMapViews'
@@ -228,13 +227,6 @@ export const withSettingActions = withTubeMapViews
         l.walk === walk ? { ...l, color: { ...l.color, ...color } } : l,
       )
     },
-
-    // Undefined restores the built-in ceiling. Nothing recomputes: the pane
-    // reads canvasHeight and the drawing is placed by zoomToFit, which the
-    // caller runs if it wants the drawing refitted into the new pane.
-    setPaneHeight(px: number | undefined) {
-      self.paneHeight = px
-    },
     setWalkRowSamples(samples: string[] | undefined) {
       self.writeGrammar({ rows: samples ? { kept: samples } : {} })
     },
@@ -601,16 +593,8 @@ export const withSettingActions = withTubeMapViews
           !shown ||
           !next ||
           !graph ||
-          previous.referenceAxis ||
-          next.referenceAxis ||
-          previous.pixelRows ||
-          next.pixelRows ||
-          next.tubeMap ||
-          self.facetGrid ||
-          graph.nodes.length > MORPH_MAX_NODES ||
-          typeof requestAnimationFrame === 'undefined' ||
-          ('matchMedia' in window &&
-            window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+          !canMorph(previous, next, graph.nodes.length, !!self.facetGrid) ||
+          !motionAllowed()
         ) {
           return
         }
@@ -646,30 +630,13 @@ export const withSettingActions = withTubeMapViews
           }
         }
         blend(0)
-        let elapsed = 0
-        let last = performance.now()
-        const step = () => {
-          if (!isAlive(self) || self.layoutResult !== next) {
-            morph = undefined
-            return
-          }
-          const now = performance.now()
-          elapsed += Math.min(now - last, MORPH_MAX_STEP_MS)
-          last = now
-          const t = Math.min(1, elapsed / MORPH_MS)
-          blend(easeInOut(t))
-          if (t < 1) {
-            morph!.frame = requestAnimationFrame(step)
-          } else {
+        morph = runMorph(
+          blend,
+          () => isAlive(self) && self.layoutResult === next,
+          () => {
             morph = undefined
-          }
-        }
-        morph = {
-          frame: requestAnimationFrame(step),
-          finish: () => {
-            blend(1)
           },
-        }
+        )
       },
       finishMorph,
       // Moves the position objects IN PLACE, which is the one thing

package/src/GraphGenomeView/subgraphLoad.test.ts

@@ -1,14 +1,24 @@
 import stateModelFactory from './viewModel'
+import { hoverInRegion } from '../hoverSync/lgvHover'
 
 import type { readConfObject } from '@jbrowse/core/configuration'
 
+interface MockAssembly {
+  name: string
+  aliases?: string[]
+  initialized?: boolean
+  getCanonicalRefName2?: (refName: string) => string
+}
+
 const mockRpcCall = vi.fn()
 const mockSession = {
   tracks: [] as Record<string, unknown>[],
   rpcManager: { call: mockRpcCall },
   assemblyManager: {
     has: (_name: string) => false,
-    get: (_name: string) => undefined as { name: string } | undefined,
+    get: (_name: string) => undefined as MockAssembly | undefined,
+    waitForAssembly: undefined as
+      ((name: string) => Promise<MockAssembly | undefined>) | undefined,
     assemblyList: [] as { name: string; aliases: string[] }[],
   },
 }
@@ -106,6 +116,7 @@ beforeEach(() => {
   mockSession.tracks = [TRACK]
   mockSession.assemblyManager.has = () => false
   mockSession.assemblyManager.get = () => undefined
+  mockSession.assemblyManager.waitForAssembly = undefined
   mockSession.assemblyManager.assemblyList = []
 })
 
@@ -135,6 +146,50 @@ test("a track naming its reference by an alias of the region's assembly cuts it"
   expect(model.nodeCount).toBe(3)
 })
 
+describe('a region named by aliases', () => {
+  const ALIASED = { ...ON_HG38, assemblyName: 'GRCh38', refName: '6' }
+
+  function sessionKnowsHg38(initialized = true) {
+    const hg38: MockAssembly = {
+      name: 'hg38',
+      aliases: ['GRCh38'],
+      initialized,
+      getCanonicalRefName2: refName =>
+        hg38.initialized && refName === '6' ? 'chr6' : refName,
+    }
+    const known = (name: string) => name === 'hg38' || name === 'GRCh38'
+    mockSession.assemblyManager.has = known
+    mockSession.assemblyManager.get = name => (known(name) ? hg38 : undefined)
+    return hg38
+  }
+
+  function cutRegion() {
+    return (mockRpcCall.mock.calls[0]![2] as { region: unknown }).region
+  }
+
+  test('is cut and kept by canonical names, so hover sync and pairing match', async () => {
+    sessionKnowsHg38()
+    const model = await cut(ALIASED)
+    expect(model.error).toBeUndefined()
+    expect(cutRegion()).toEqual(ON_HG38)
+    expect(model.graphRegion).toEqual(ON_HG38)
+    const hover = { refName: 'chr6', assemblyName: 'hg38', coord: 32_000_500 }
+    expect(hoverInRegion(hover, model.graphRegion!)).toBe(true)
+    expect(model.nodeLaunchTargets('s1+').reference?.assembly).toBe('hg38')
+  })
+
+  test('waits for its assembly to load before resolving the refName', async () => {
+    const hg38 = sessionKnowsHg38(false)
+    mockSession.assemblyManager.waitForAssembly = async () => {
+      hg38.initialized = true
+      return hg38
+    }
+    const model = await cut(ALIASED)
+    expect(cutRegion()).toEqual(ON_HG38)
+    expect(model.graphRegion).toEqual(ON_HG38)
+  })
+})
+
 test('a cut that finds no segments is an error, not an empty graph', async () => {
   const model = await cut(ON_HG38, 'H\tVN:Z:1.0')
   expect(String(model.error)).toMatch(/No graph segments/)