jbrowse-plugin-graphgenomeviewer 6.2.0 → 6.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jbrowse-plugin-graphgenomeviewer",
-  "version": "6.2.0",
+  "version": "6.3.1",
   "description": "JBrowse 2 graph genome (pangenome) view: rGFA reference-anchored layouts, the Bandage force-directed engine, and haplotype lanes read from a gbz-base database",
   "license": "GPL-3.0-or-later",
   "repository": {
@@ -28,7 +28,6 @@
     "@gmod/bgzf-filehandle": "^6.7.0",
     "@gmod/gbz-base": "^7.1.0",
     "@gmod/tabix": "^3.9.1",
-    "@gmod/tubemap-core": "^0.1.0",
     "@jbrowse/cigar-utils": "5.0.0-beta.11",
     "@jbrowse/core": "5.0.0-beta.11",
     "@jbrowse/display-kit": "5.0.0-beta.11",
@@ -40,7 +39,7 @@
     "@emotion/styled": "^11.14.1",
     "@eslint/js": "^10.0.1",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
-    "@jbrowse/bandage-core": "^7.5.1",
+    "@jbrowse/bandage-core": "^8.0.1",
     "@jbrowse/cli": "^4.3.0",
     "@jbrowse/mobx-state-tree": "^6.7.0",
     "@jbrowse/plugin-canvas": "5.0.0-beta.11",

package/src/GbzBaseSyntenyAdapter/configSchema.ts

@@ -115,7 +115,7 @@ const GbzBaseSyntenyAdapter = ConfigurationSchema(
     /**
      * #slot
      * A tab-separated table of per-sample metadata, which the graph view's
-     * walk rows group by ("Group by…"). Its header row names the columns
+     * walk rows group by ("Group by..."). Its header row names the columns
      * (`population`, `superpopulation`, ...), and its first column is the
      * walk's sample (`HG00097`) or haplotype (`HG00097#1`). Empty means no
      * grouping.

package/src/GraphGenomeView/components/ChooseWalksDialog.tsx

@@ -19,7 +19,7 @@ type WalkPicker = Pick<
   'walkChoices' | 'walkLayers' | 'walkLabel' | 'liftWalks'
 >
 
-// Which walks to lift, searched by name, for a graph with more walks than a
+// Which haplotypes to highlight, searched by name, for a graph with more walks than a
 // menu can list
 const ChooseWalksDialog = observer(function ChooseWalksDialog({
   model,
@@ -34,7 +34,7 @@ const ChooseWalksDialog = observer(function ChooseWalksDialog({
     model.walkLayers.map(l => l.walk).filter(name => names.has(name)),
   )
   return (
-    <Dialog open onClose={onClose} title="Choose walks">
+    <Dialog open onClose={onClose} title="Choose haplotypes">
       <DialogContent>
         <Autocomplete
           multiple
@@ -56,15 +56,14 @@ const ChooseWalksDialog = observer(function ChooseWalksDialog({
             <TextField
               {...params}
               autoFocus
-              label="Walks"
+              label="Haplotypes"
               placeholder="type to search"
             />
           )}
         />
         <Typography variant="caption" color="text.secondary">
-          {walkChoices.length.toLocaleString()} walks in this cut. The ones
-          picked are lifted out of the drawing in this order, and the rest
-          fades.
+          {walkChoices.length.toLocaleString()} haplotypes in this cut. The ones
+          picked are highlighted in this order, and the rest fades.
         </Typography>
       </DialogContent>
       <DialogActions>
@@ -76,7 +75,7 @@ const ChooseWalksDialog = observer(function ChooseWalksDialog({
             onClose()
           }}
         >
-          Lift these walks
+          Highlight these
         </Button>
       </DialogActions>
     </Dialog>

package/src/GraphGenomeView/components/HighlightColorDialog.tsx

@@ -0,0 +1,117 @@
+import { WALK_FIELDS, WALK_SCHEMES } from '@jbrowse/bandage-core/walkEncoding'
+import { Dialog } from '@jbrowse/core/ui'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  MenuItem,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+
+import type { GraphPaneModel } from '../model'
+
+type HighlightColors = Pick<
+  GraphPaneModel,
+  'drawnWalks' | 'walkLabel' | 'setWalkColor'
+>
+
+const HighlightColorDialog = observer(function HighlightColorDialog({
+  model,
+  onClose,
+}: {
+  model: HighlightColors
+  onClose: () => void
+}) {
+  return (
+    <Dialog open onClose={onClose} title="Color highlighted haplotypes">
+      <DialogContent
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: 'auto 1fr 1fr',
+          alignItems: 'center',
+          gap: 1.5,
+        }}
+      >
+        <Typography variant="subtitle2">Haplotype</Typography>
+        <Typography variant="subtitle2">Color by</Typography>
+        <Typography variant="subtitle2">Palette</Typography>
+        {model.drawnWalks.map(({ name, encoding }) => (
+          <Row
+            key={name}
+            label={model.walkLabel(name)}
+            field={encoding.field}
+            scheme={encoding.scheme}
+            onField={field => {
+              model.setWalkColor(name, { field })
+            }}
+            onScheme={scheme => {
+              model.setWalkColor(name, { scheme })
+            }}
+          />
+        ))}
+      </DialogContent>
+      <DialogActions>
+        <Button variant="contained" onClick={onClose}>
+          Done
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+})
+
+type Field = (typeof WALK_FIELDS)[number]['value']
+type Scheme = (typeof WALK_SCHEMES)[number]['value']
+
+function Row({
+  label,
+  field,
+  scheme,
+  onField,
+  onScheme,
+}: {
+  label: string
+  field: Field
+  scheme: Scheme
+  onField: (field: Field) => void
+  onScheme: (scheme: Scheme) => void
+}) {
+  return (
+    <>
+      <Typography variant="body2">{label}</Typography>
+      <TextField
+        select
+        size="small"
+        value={field}
+        onChange={e => {
+          onField(e.target.value as Field)
+        }}
+      >
+        {WALK_FIELDS.map(f => (
+          <MenuItem key={f.value} value={f.value}>
+            {f.label}
+          </MenuItem>
+        ))}
+      </TextField>
+      <TextField
+        select
+        size="small"
+        value={scheme}
+        onChange={e => {
+          onScheme(e.target.value as Scheme)
+        }}
+      >
+        {WALK_SCHEMES.filter(
+          s => s.value !== 'rainbow' || field === 'reference',
+        ).map(s => (
+          <MenuItem key={s.value} value={s.value}>
+            {s.label}
+          </MenuItem>
+        ))}
+      </TextField>
+    </>
+  )
+}
+
+export default HighlightColorDialog

package/src/GraphGenomeView/components/TubeMapOverlay.tsx

@@ -61,7 +61,7 @@ const TubeMapOverlay = observer(function TubeMapOverlay({
           const tubeFrame = {
             ...frame,
             width,
-            highlightNode: model.hoveredNode ?? model.selectedNode,
+            highlightNode: model.litNode ?? model.selectedNode,
             darkMode: model.darkMode,
             tubeColors: model.tubeMapTubeColors,
             nodeColors: model.tubeMapNodeColors,

package/src/GraphGenomeView/model.test.ts

@@ -1522,6 +1522,20 @@ describe('hoverHighlight', () => {
     expect(model.hoverHighlight).toMatchObject({ start: 0, end: 4 })
   })
 
+  test('turning hover highlighting off lights nothing', async () => {
+    const model = await loadedFromTrack()
+    model.setHighlightOnHover(false)
+    model.setHoveredNode('2+')
+    expect(model.hoverHighlight).toBeUndefined()
+    expect(model.litNode).toBeNull()
+    const lit: ReadonlyMap<string, number>[] = []
+    model.applyHighlights({
+      ...fakeRenderer(),
+      setNodeHighlights: (m: ReadonlyMap<string, number>) => lit.push(m),
+    })
+    expect(lit).toEqual([new Map()])
+  })
+
   // A whole-file import has no region, so its stable names need not name anything
   // in a loaded assembly and there is nothing to project onto.
   test('a whole-file import publishes no highlight', async () => {
@@ -2682,10 +2696,8 @@ interface MenuItem {
   subMenu?: MenuItem[]
 }
 
-function walkMenu(model: { graphMenuItems: () => unknown }) {
-  return (model.graphMenuItems() as MenuItem[]).find(
-    item => item.label === 'Walk',
-  )!
+function highlightMenu(model: { highlightMenuItems: () => unknown }) {
+  return model.highlightMenuItems() as MenuItem[]
 }
 
 describe('walk rows', () => {
@@ -2793,7 +2805,7 @@ describe('walk rows', () => {
     await model.loadGFA(WALKS_GFA, 'walks')
     const samples = () =>
       (
-        (model.graphMenuItems() as MenuItem[]).find(
+        (model.layoutOptionMenuItems() as MenuItem[]).find(
           item => item.label === 'Samples',
         ) as { subMenu: (MenuItem & { onClick: () => void })[] }
       ).subMenu
@@ -2934,13 +2946,9 @@ describe('walk rows', () => {
     // lifted together, each walk is one flat colour
     const ref = model.walkLift!.walks[0]!
     expect(new Set(ref.colors.values()).size).toBe(1)
-    const menu = walkMenu(model)
-    const colour = menu.subMenu!.find(item => item.label === 'Colour B#1')!
     expect(
-      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.drawnWalks.find(w => w.name === 'B#1#ctg')!.encoding,
+    ).toMatchObject({ field: 'walk', scheme: 'green' })
     model.liftWalks(['B#1#ctg'])
     expect(model.walkLayers).toEqual([
       { walk: 'B#1#ctg', color: { field: 'walk', scheme: 'green' } },
@@ -2978,8 +2986,7 @@ describe('walk rows', () => {
     })
     await model.loadGFA(WALKS_GFA, 'walks')
     model.liftWalks(['B#1#ctg', 'A#1#ctg'])
-    const menu = walkMenu(model)
-    expect(menu.subMenu!.some(item => item.label === 'Side by side')).toBe(
+    expect(highlightMenu(model).some(item => item.label === 'Arrange')).toBe(
       false,
     )
     model.setFacet('walk')
@@ -3048,13 +3055,9 @@ describe('walk rows', () => {
     expect(model.canvasHeight).toBe(Math.max(160, grid.total))
     expect(model.scale).toBeCloseTo(grid.scale, 10)
     expect(model.scale).not.toBeCloseTo(whole, 10)
-    const menu = walkMenu(model)
-    const colour = menu.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 = menu.subMenu!.find(item => item.label === 'Columns')!
-    expect(columns.subMenu!.map(item => item.label)).toEqual(['Auto', '1', '2'])
+      model.drawnWalks.find(w => w.name === 'B#1#ctg')!.encoding,
+    ).toMatchObject({ field: 'progress', scheme: 'red' })
   })
 
   test('by sample, a sample takes a row and its haplotypes the columns', async () => {
@@ -3126,11 +3129,7 @@ describe('walk rows', () => {
     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)
+    expect(model.highlightMenuItems()).toEqual([])
   })
 
   test('a lane reads the reference ramp only when it is coloured by it', async () => {
@@ -3841,12 +3840,12 @@ describe('walk rows grouped by a sample column', () => {
     expect(stale.walkRowPlacement!.headers).toEqual([])
   })
 
-  test('Group by… lists None and each column, and the SVG export waits for None', async () => {
+  test('Group by... lists None and each column, and the SVG export waits for None', async () => {
     const model = await groupedModel()
     const groupBy = () =>
       (
-        (model.graphMenuItems() as MenuItem[]).find(
-          item => item.label === 'Group by…',
+        (model.layoutOptionMenuItems() as MenuItem[]).find(
+          item => item.label === 'Group by...',
         ) as { subMenu: (MenuItem & { onClick: () => void })[] }
       ).subMenu
     expect(groupBy().map(item => [item.label, item.checked])).toEqual([
@@ -3857,19 +3856,96 @@ describe('walk rows grouped by a sample column', () => {
     groupBy()[2]!.onClick()
     expect(model.walkRowGroupBy).toEqual({ field: 'superpopulation' })
     expect(groupBy()[2]!.checked).toBe(true)
-    expect(model.figureUnavailable).toContain('Group by…')
+    expect(model.figureUnavailable).toContain('Group by...')
     groupBy()[0]!.onClick()
     expect(model.walkRowGroupBy).toBeUndefined()
     expect(model.figureUnavailable).toBeUndefined()
   })
 
-  test('no samples table, no Group by…', async () => {
+  test('no samples table, no Group by...', async () => {
     mockSession.tracks = []
     const model = await groupedModel()
     expect(
-      (model.graphMenuItems() as MenuItem[]).some(
-        item => item.label === 'Group by…',
+      (model.layoutOptionMenuItems() as MenuItem[]).some(
+        item => item.label === 'Group by...',
       ),
     ).toBe(false)
   })
 })
+
+describe('keeping the drawing on screen', () => {
+  function screenBox(model: ReturnType<typeof createModel>) {
+    const b = model.layoutBounds!
+    const left = b.minX * model.scaleX + model.translateX
+    const top = b.minY * model.scaleY + model.translateY
+    return {
+      left,
+      top,
+      right: left + b.w * model.scaleX,
+      bottom: top + b.h * model.scaleY,
+    }
+  }
+
+  async function forceModel() {
+    rpcRespond()
+    const model = createModel()
+    await model.loadGFA(SIMPLE_GFA, 'simple')
+    model.startRenderingBackend(fakeRenderer())
+    model.setWidth(800)
+    return model
+  }
+
+  test('a pan stops with some of the drawing still in the pane', async () => {
+    const model = await forceModel()
+    model.setTransform(model.scale, model.translateX + 10_000, -10_000)
+    const box = screenBox(model)
+    expect(box.left).toBeLessThanOrEqual(model.viewBox.width - 48 + 1e-6)
+    expect(box.bottom).toBeGreaterThanOrEqual(48 - 1e-6)
+  })
+
+  test('a zoom about a point far from the drawing keeps it in the pane', async () => {
+    const model = await forceModel()
+    model.zoom(50, model.viewBox.width, model.viewBox.height)
+    const box = screenBox(model)
+    expect(box.right).toBeGreaterThan(0)
+    expect(box.left).toBeLessThan(model.viewBox.width)
+    expect(box.bottom).toBeGreaterThan(0)
+    expect(box.top).toBeLessThan(model.viewBox.height)
+  })
+
+  // A fresh force run, or a new cut as a linear view moves, lands in
+  // coordinates of its own; the old zoom showed empty paper
+  test('a new force layout refits a drawing the user had moved', async () => {
+    const model = await forceModel()
+    model.zoom(4, 0, 0)
+    expect(model.viewportOwner).toBe('user')
+    const shifted = {
+      nodePositions: Object.fromEntries(
+        Object.entries(MOCK_LAYOUT.nodePositions).map(([k, segs]) => [
+          k,
+          segs.map(p => ({ x: p.x + 5000, y: p.y - 3000 })),
+        ]),
+      ),
+    }
+    mockRpcCall.mockImplementation((_sid: unknown, method: string) =>
+      method === 'GraphComputeLayout'
+        ? Promise.resolve({ result: shifted, duration: 5 })
+        : Promise.reject(new Error(`Unexpected RPC: ${method}`)),
+    )
+    await model.toggleDeletionEdges()
+
+    expect(model.viewportOwner).toBe('fit')
+    expect(model.scale).toBeCloseTo(model.fittedTransform!.scale, 10)
+    expect(model.translateX).toBeCloseTo(model.fittedTransform!.translateX, 10)
+  })
+
+  test('a layout handed back unchanged keeps the user’s zoom', async () => {
+    const model = await forceModel()
+    model.zoom(4, 100, 50)
+    const { scale, translateX } = model
+    await model.recomputeLayout()
+    expect(model.viewportOwner).toBe('user')
+    expect(model.scale).toBe(scale)
+    expect(model.translateX).toBe(translateX)
+  })
+})

package/src/GraphGenomeView/pane/fitViews.ts

@@ -438,16 +438,19 @@ export const withFitViews = withHostViews
     // there is nothing to restore and nothing to go stale when a rebuild
     // renumbers the batch
     applyHighlights(b: Renderer) {
-      const { hoveredNode, hoveredEdge, selectedNode } = self
+      const { litNode, hoveredEdge, selectedNode } = self
       const nodes = new Map<string, number>()
       if (selectedNode !== null) {
         nodes.set(selectedNode, SELECT_BRIGHTEN)
       }
-      if (hoveredNode !== null && hoveredNode !== selectedNode) {
-        nodes.set(hoveredNode, HOVER_BRIGHTEN)
+      if (litNode !== null && litNode !== selectedNode) {
+        nodes.set(litNode, HOVER_BRIGHTEN)
       }
       b.setNodeHighlights(nodes)
-      b.setEdgeHighlight(hoveredEdge, HOVER_BRIGHTEN)
+      b.setEdgeHighlight(
+        self.chosenHighlightOnHover ? hoveredEdge : null,
+        HOVER_BRIGHTEN,
+      )
     },
     // Draws the uploaded batch through the pane's transform
     paint(b: Renderer) {
@@ -627,7 +630,7 @@ export const withFitViews = withHostViews
       return !self.layoutResult
         ? 'Nothing is drawn yet'
         : self.walkRowGroups
-          ? 'The SVG export cannot group walk rows yet: set Group by… to None first'
+          ? 'The SVG export cannot group walk rows yet: set Group by... to None first'
           : self.drawsNodes || self.walkRowBars
             ? undefined
             : `${layoutModeByValue(self.chosenLayoutMode).label} draws a picture of its own, which the SVG export does not`

package/src/GraphGenomeView/pane/graphViews.ts

@@ -79,6 +79,9 @@ export const withGraphViews = paneBase
     get defaultColorScheme(): ColorScheme {
       return 'auto'
     },
+    get defaultHighlightOnHover(): boolean {
+      return true
+    },
     // a source declared but not yet loaded
     get hasPendingSource() {
       return false
@@ -102,6 +105,13 @@ export const withGraphViews = paneBase
     get chosenColorScheme() {
       return self.colorScheme ?? self.defaultColorScheme
     },
+    get chosenHighlightOnHover() {
+      return self.highlightOnHover ?? self.defaultHighlightOnHover
+    },
+    // the hovered node, where hovering is to light it
+    get litNode() {
+      return this.chosenHighlightOnHover ? self.hoveredNode : null
+    },
   }))
   .views(self => ({
     get paneWidth() {
@@ -877,7 +887,7 @@ export const withGraphViews = paneBase
     get hoverHighlight() {
       const region = self.graphRegion
       const span = self.hoveredSpan
-      return region && span
+      return region && span && self.chosenHighlightOnHover
         ? {
             refName: region.refName,
             assemblyName: region.assemblyName,

package/src/GraphGenomeView/pane/hostViews.ts

@@ -57,7 +57,7 @@ export const withHostViews = withWalkRowViews
     },
     get tubeMapPicture() {
       const drawing = self.layoutResult?.tubeMap
-      return drawing ? tubeMapPicture(drawing.layout) : undefined
+      return drawing ? tubeMapPicture(drawing) : undefined
     },
     get tubeMapReference() {
       const drawing = self.layoutResult?.tubeMap

package/src/GraphGenomeView/pane/keepInView.ts

@@ -0,0 +1,62 @@
+// How much of the drawing a pan or zoom leaves on screen in each axis, or
+// all of it when it is smaller
+export const KEEP_IN_VIEW_PX = 48
+
+// The shift that brings a span starting at `lo`, `size` px long, back to
+// overlapping [0, extent] by `margin` px
+function shiftIntoView(lo: number, size: number, extent: number) {
+  const margin = Math.min(KEEP_IN_VIEW_PX, size, extent)
+  return Math.max(0, margin - (lo + size)) - Math.max(0, lo - (extent - margin))
+}
+
+interface DrawingBox {
+  minX: number
+  minY: number
+  w: number
+  h: number
+}
+
+interface Placement {
+  scaleX: number
+  scaleY: number
+  translateX: number
+  translateY: number
+}
+
+export function keepInView(
+  bounds: DrawingBox,
+  t: Placement,
+  view: { width: number; height: number },
+) {
+  return {
+    translateX:
+      t.translateX +
+      shiftIntoView(
+        bounds.minX * t.scaleX + t.translateX,
+        bounds.w * t.scaleX,
+        view.width,
+      ),
+    translateY:
+      t.translateY +
+      shiftIntoView(
+        bounds.minY * t.scaleY + t.translateY,
+        bounds.h * t.scaleY,
+        view.height,
+      ),
+  }
+}
+
+export function onScreen(
+  bounds: DrawingBox,
+  t: Placement,
+  view: { width: number; height: number },
+) {
+  const left = bounds.minX * t.scaleX + t.translateX
+  const top = bounds.minY * t.scaleY + t.translateY
+  return (
+    left < view.width &&
+    left + bounds.w * t.scaleX > 0 &&
+    top < view.height &&
+    top + bounds.h * t.scaleY > 0
+  )
+}