jbrowse-plugin-graphgenomeviewer 7.4.4 → 7.6.0

package/src/GraphGenomeView/pane/morph.ts

@@ -314,7 +314,8 @@ export function motionAllowed() {
 }
 
 // Calls `blend` with the eased progress once a frame for MORPH_MS while
-// `isLive` holds, then `onEnd`. `finish` jumps to the last frame.
+// `isLive` holds, then `onEnd`. `finish` jumps to the last frame, as does a
+// morph cut short, since the layout cache keeps the positions it blends.
 export function runMorph(
   blend: (t: number) => void,
   isLive: () => boolean,
@@ -330,6 +331,7 @@ export function runMorph(
   let last = performance.now()
   const step = () => {
     if (!isLive()) {
+      blend(1)
       onEnd()
       return
     }

package/src/GraphGenomeView/pane/paneBase.ts

@@ -95,6 +95,8 @@ export const VIEWPORT_DEBOUNCE_MS = 150
 export const VIEWPORT_PANES_BUILT = 1
 // How many walk rows read their haplotype's genes, the first rows down
 export const WALK_GENE_ROWS = 40
+// How many off-reference contigs read their haplotype's genes
+export const OWN_GENE_CONTIGS = 40
 
 // What the canvas draws under the tube map, whose ink is all TubeMapOverlay's
 export type TubeMapRoutes = 'each' | 'grouped' | 'bundled'
@@ -359,6 +361,9 @@ export const paneBase = types
     // each walk row's genes, read from its haplotype's own assembly, by walk
     // name
     walkGeneFeatures: undefined as Map<string, GeneModel[]> | undefined,
+    // each loaded haplotype's genes on its own nodes off the reference, under
+    // those nodes' stable names (ownGeneReads)
+    ownGeneFeatures: undefined as GeneModel[] | undefined,
     // the source track's samples TSV, which walk rows group by
     walkRowSampleTable: undefined as SampleRow[] | undefined,
     // the tandem repeat arrays over the cut window, from the repeat track

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
@@ -85,7 +88,9 @@ export const withSettingActions = withTubeMapViews
         ) {
           keptDomain = self.statedColorDomain
         }
-        self.writeGrammar({ color: colorOfScheme(scheme, keptDomain) })
+        self.writeGrammar({
+          encoding: { color: colorOfScheme(scheme, keptDomain) },
+        })
       },
     }
   })
@@ -166,7 +171,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 +255,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 +306,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 +499,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/retiredNodeColor.test.ts

@@ -0,0 +1,46 @@
+import { liftFlatNodeColor } from './retiredNodeColor'
+
+test('a bare constant becomes a value', () => {
+  expect(liftFlatNodeColor('grey')).toEqual({ value: 'grey' })
+  expect(liftFlatNodeColor('uniform')).toEqual({ value: 'uniform' })
+})
+
+test('categorical becomes an ordinal scale', () => {
+  expect(liftFlatNodeColor({ field: 'id', scale: 'categorical' })).toEqual({
+    field: 'id',
+    scale: { type: 'ordinal' },
+  })
+})
+
+test('scheme and the domain move under scale', () => {
+  expect(liftFlatNodeColor({ field: 'id', scheme: 'rainbow' })).toEqual({
+    field: 'id',
+    scale: { scheme: 'rainbow' },
+  })
+  expect(
+    liftFlatNodeColor({ field: 'position', domainMin: 5, domainMax: 50 }),
+  ).toEqual({ field: 'position', scale: { domainMin: 5, domainMax: 50 } })
+})
+
+test('labels and title move to scale.names and legend.title', () => {
+  expect(
+    liftFlatNodeColor({ field: 'id', labels: ['a'], title: 'Node' }),
+  ).toEqual({ field: 'id', scale: { names: ['a'] }, legend: { title: 'Node' } })
+})
+
+test('a member the channel object already nests wins over its flat twin', () => {
+  expect(
+    liftFlatNodeColor({
+      field: 'position',
+      domainMin: 1,
+      scale: { domainMin: 7 },
+    }),
+  ).toEqual({ field: 'position', scale: { domainMin: 7 } })
+})
+
+test('a channel object is the object it was', () => {
+  const color = { field: 'position', scale: { domainMin: 1, domainMax: 2 } }
+  expect(liftFlatNodeColor(color)).toBe(color)
+  expect(liftFlatNodeColor({ field: 'depth' })).toEqual({ field: 'depth' })
+  expect(liftFlatNodeColor(undefined)).toBeUndefined()
+})

package/src/GraphGenomeView/retiredNodeColor.ts

@@ -0,0 +1,76 @@
+import { isRecord } from '../isRecord'
+
+// Where each member of the flat color object sits in the channel object, as
+// display-kit's `liftFlatColor` places it
+const FLAT_MEMBERS: Readonly<
+  Record<string, readonly ['scale' | 'legend', string]>
+> = {
+  scale: ['scale', 'type'],
+  domain: ['scale', 'domain'],
+  range: ['scale', 'range'],
+  labels: ['scale', 'names'],
+  scheme: ['scale', 'scheme'],
+  reverse: ['scale', 'reverse'],
+  domainMin: ['scale', 'domainMin'],
+  domainMax: ['scale', 'domainMax'],
+  domainMid: ['scale', 'domainMid'],
+  domainQuantile: ['scale', 'domainQuantile'],
+  unknown: ['scale', 'unknown'],
+  title: ['legend', 'title'],
+  descending: ['legend', 'descending'],
+}
+
+function isFlat(color: Record<string, unknown>) {
+  return Object.entries(color).some(
+    ([key, value]) =>
+      key in FLAT_MEMBERS && !(key === 'scale' && isRecord(value)),
+  )
+}
+
+/**
+ * @deprecated The node color through 7.5.0, a bare `'grey'` or `'uniform'` or a
+ * flat object (`scale: 'categorical'`, `scheme`, `domainMin`, `domainMax`
+ * beside `field`), lifted to the channel object: the constants become
+ * `value`, scale members go under `scale` and `categorical` becomes
+ * `ordinal`. Covers a LinearGraphDisplay's `color` and a GraphGenomeView's
+ * saved `color`. Goes once no saved session or hosted config predates `encoding.color`.
+ */
+export function liftFlatNodeColor(color: unknown): unknown {
+  if (typeof color === 'string') {
+    return { value: color }
+  }
+  if (!isRecord(color) || !isFlat(color)) {
+    return color
+  }
+  const out: Record<string, unknown> = {}
+  const parts: Record<'scale' | 'legend', Record<string, unknown>> = {
+    scale: {},
+    legend: {},
+  }
+  for (const [key, value] of Object.entries(color)) {
+    const at = FLAT_MEMBERS[key]
+    if (!at || (key === 'scale' && isRecord(value))) {
+      out[key] = value
+    } else if (value !== undefined) {
+      parts[at[0]][at[1]] =
+        key === 'scale' && value === 'categorical' ? 'ordinal' : value
+    }
+  }
+  for (const part of ['scale', 'legend'] as const) {
+    if (Object.keys(parts[part]).length > 0) {
+      const nested = out[part]
+      out[part] = { ...parts[part], ...(isRecord(nested) ? nested : {}) }
+    }
+  }
+  return out
+}
+
+/**
+ * @deprecated A LinearGraphDisplay's flat `color` as `encoding.color`, for
+ * the schema's `retired`. Goes with `liftFlatNodeColor`.
+ */
+export const retiredGraphColor = {
+  color: (color: unknown) => ({
+    encoding: { color: liftFlatNodeColor(color) },
+  }),
+}

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'
@@ -10,6 +7,7 @@ import { reaction } from 'mobx'
 import { HOVER_HIGHLIGHT_VALUES } from './hoverHighlight'
 import { lenientMaybeEnum } from './lenientEnum'
 import { GraphPane, fileName, formatSpanBp } from './model'
+import { liftFlatNodeColor } from './retiredNodeColor'
 import { canonicalRegion } from '../launchFromGraph/launchFromGraph'
 
 import type { GraphLayers } from './graphLayers'
@@ -51,11 +49,16 @@ export default function stateModelFactory() {
         hover: lenientMaybeEnum(HOVER_HIGHLIGHT_VALUES),
       }),
     )
+    .preProcessSnapshot(snap =>
+      snap.color === undefined
+        ? snap
+        : { ...snap, color: liftFlatNodeColor(snap.color) as NodeColor },
+    )
     .views(self => ({
       get grammar(): GraphGrammar {
         return {
           layoutMode: self.layoutMode,
-          color: self.color,
+          encoding: { color: self.color },
           size: self.size,
           layers: self.layers,
           facet: self.facet,
@@ -65,8 +68,11 @@ export default function stateModelFactory() {
       },
     }))
     .actions(self => ({
-      writeGrammar(settings: GraphGrammar) {
-        Object.assign(self, settings)
+      writeGrammar({ encoding, ...settings }: GraphGrammar) {
+        Object.assign(
+          self,
+          encoding ? { ...settings, color: encoding.color } : settings,
+        )
       },
     }))
     .volatile(() => ({
@@ -222,10 +228,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))
+    }
+  }
+}