jbrowse-plugin-graphgenomeviewer 7.4.4 → 7.6.0

package/src/LinearGraphDisplay/LinearGraphDisplay.test.ts

@@ -16,7 +16,12 @@ import {
 } from '@jbrowse/core/pluggableElementTypes/models'
 import { LAUNCH_LABEL } from '@jbrowse/core/ui'
 import SimpleFeature from '@jbrowse/core/util/simpleFeature'
-import { applyPatch, getType, types } from '@jbrowse/mobx-state-tree'
+import {
+  applyPatch,
+  getSnapshot,
+  getType,
+  types,
+} from '@jbrowse/mobx-state-tree'
 import { linearGenomeViewStateModelFactory } from '@jbrowse/plugin-linear-genome-view'
 import RocketLaunchIcon from '@mui/icons-material/RocketLaunch'
 import { reaction } from 'mobx'
@@ -868,8 +873,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 +895,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)
@@ -967,7 +990,7 @@ test("a launch names the pane's props without its type, and opens in that layout
     {
       type: 'LinearGraphDisplay',
       layoutMode: 'force',
-      color: 'uniform',
+      encoding: { color: { value: 'uniform' } },
     },
   )
   const display = view.tracks[0]!.displays[0] as LinearGraphDisplayModel
@@ -979,6 +1002,51 @@ test("a launch names the pane's props without its type, and opens in that layout
   expect(display.hostPlacesX).toBe(false)
 })
 
+test.each([
+  ['uniform', 'uniform'],
+  [{ field: 'id', scale: 'categorical' }, 'random'],
+  [{ field: 'id', scheme: 'rainbow' }, 'rainbow'],
+  [{ field: 'depth' }, 'depth'],
+])('a flat color %j in a saved config is read as %s', async (color, scheme) => {
+  const { view } = createEnvironment()
+  view.showTrack('graph', {}, { type: 'LinearGraphDisplay', color })
+  const display = view.tracks[0]!.displays[0] as LinearGraphDisplayModel
+  expect(display.chosenColorScheme).toBe(scheme)
+  expect(getSnapshot(display.configuration)).not.toHaveProperty('color')
+})
+
+test('a flat color lifts to encoding.color', async () => {
+  const { view } = createEnvironment()
+  view.showTrack(
+    'graph',
+    {},
+    {
+      type: 'LinearGraphDisplay',
+      color: { field: 'position', domainMin: 5, domainMax: 50 },
+    },
+  )
+  const lifted = view.tracks[0]!.displays[0] as LinearGraphDisplayModel
+  expect(readConfObject(lifted.configuration, 'encoding')).toEqual({
+    color: { field: 'position', scale: { domainMin: 5, domainMax: 50 } },
+  })
+  expect(lifted.statedColorDomain).toEqual({ start: 5, end: 50 })
+})
+
+test('an encoding beside a flat color wins', () => {
+  const { view } = createEnvironment()
+  view.showTrack(
+    'graph',
+    {},
+    {
+      type: 'LinearGraphDisplay',
+      color: { field: 'depth', domainMin: 1 },
+      encoding: { color: { field: 'length' } },
+    },
+  )
+  const display = view.tracks[0]!.displays[0] as LinearGraphDisplayModel
+  expect(display.chosenColorScheme).toBe('node-length')
+})
+
 test.each([
   ['force', false],
   ['auto', true],
@@ -1000,7 +1068,14 @@ test('a launch that states one choice takes the rest from the config', async ()
   const { view, cuts } = createEnvironment()
   view.zoomTo(60_000 / WIDTH_PX)
   view.scrollTo(1_000_000 / view.bpPerPx)
-  view.showTrack('graph', {}, { type: 'LinearGraphDisplay', color: 'uniform' })
+  view.showTrack(
+    'graph',
+    {},
+    {
+      type: 'LinearGraphDisplay',
+      encoding: { color: { value: 'uniform' } },
+    },
+  )
   const display = view.tracks[0]!.displays[0] as LinearGraphDisplayModel
   display.startRenderingBackend(fakeRenderer())
   await wait(SETTLE_MS)
@@ -1018,13 +1093,15 @@ 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',
-    'color',
+    'encoding',
     'size',
     'layers',
     'facet',
@@ -1039,22 +1116,32 @@ test('each grammar setter writes the track config, and the pane reads it back',
     ),
   ).toEqual({
     layoutMode: 'ordered',
-    color: { field: 'depth' },
-    size: 6,
+    encoding: { color: { field: 'depth' } },
+    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

@@ -4,6 +4,7 @@ import { trackHeightConfigSchemaFields } from '@jbrowse/display-kit/trackHeightC
 import { types } from '@jbrowse/mobx-state-tree'
 
 import { HOVER_HIGHLIGHT_VALUES } from '../GraphGenomeView/hoverHighlight'
+import { retiredGraphColor } from '../GraphGenomeView/retiredNodeColor'
 
 /**
  * #config LinearGraphDisplay
@@ -27,15 +28,17 @@ export function configSchemaFactory() {
       },
       /**
        * #slot
-       * the node color: `grey` or `uniform`, or the field nodes are colored
-       * by, `depth`, `length`, `rank`, `position` or `id` (`scale:
-       * 'categorical'` or `scheme: 'rainbow'`). `domainMin`/`domainMax` span
-       * the position ramp. `{}` colors an anchored graph by position.
+       * the channels the nodes are painted through, as core's `encoding`.
+       * `color` is `{ value: 'grey' }` or `{ value: 'uniform' }`, or the
+       * `field` nodes are colored by, `depth`, `length`, `rank`, `position` or
+       * `id` (`scale: { type: 'ordinal' }` or `scale: { scheme: 'rainbow' }`).
+       * `scale.domainMin` and `scale.domainMax` span the position ramp. `{}`
+       * colors an anchored graph by position.
        * ```js
-       * { color: { field: 'depth' } }
+       * { encoding: { color: { field: 'depth' } } }
        * ```
        */
-      color: {
+      encoding: {
         type: 'frozen',
         defaultValue: {},
         plot: true,
@@ -44,7 +47,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 +58,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 } }
        * ```
@@ -101,7 +105,11 @@ export function configSchemaFactory() {
         height: 'the height of the track the graph is drawn in',
       }),
     },
-    { explicitlyTyped: true, explicitIdentifier: 'displayId' },
+    {
+      explicitlyTyped: true,
+      explicitIdentifier: 'displayId',
+      retired: retiredGraphColor,
+    },
   )
 }
 

package/src/LinearGraphDisplay/model.ts

@@ -129,7 +129,7 @@ export function stateModelFactory(configSchema: LinearGraphDisplayConfigModel) {
       get grammar(): GraphGrammar {
         return {
           layoutMode: getConf(self, 'layoutMode'),
-          color: getConf(self, 'color'),
+          encoding: getConf(self, 'encoding'),
           size: getConf(self, 'size'),
           layers: getConf(self, 'layers') as GraphLayers,
           facet: getConf(self, 'facet'),
@@ -590,6 +590,7 @@ export function stateModelFactory(configSchema: LinearGraphDisplayConfigModel) {
         }
         const start = Math.floor(seen.start)
         const end = Math.ceil(seen.end)
+        const { encoding, ...grammar } = self.grammar
         return {
           ...paneSettings(self),
           loadedTrackId: trackId,
@@ -601,7 +602,8 @@ export function stateModelFactory(configSchema: LinearGraphDisplayConfigModel) {
           },
           subgraphHaplotypes: self.cutHaplotypes,
           maxRegionBp: Math.max(self.maxRegionBp, end - start),
-          ...self.grammar,
+          ...grammar,
+          color: encoding?.color,
           layoutMode: self.chosenLayoutMode,
           connectedViewId: self.host?.id,
         } satisfies GraphViewSpec

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)
     }

package/src/WalkTabixSyntenyAdapter/WalkTabixSyntenyAdapter.ts

@@ -101,12 +101,9 @@ export default class WalkTabixSyntenyAdapter extends ComparativeAdapterBase<Walk
    * asks for, and the nodes and links they visit
    */
   async getSubgraph(region: Region, opts: SubgraphAdapterOptions = {}) {
-    const refName = await this.refNames.resolve(region, { signal: opts.signal })
-    if (refName === undefined) {
-      throw new Error(
-        `${region.assemblyName} ${region.refName} is not in this graph's index; the graph is cut on ${this.anchor}, mapped to its PanSN prefix in assemblyNameToPanSN`,
-      )
-    }
+    const refName = await this.refNames.resolveForCut(region, {
+      signal: opts.signal,
+    })
     return this.walks.subgraph(refName, region, opts)
   }
 

package/src/hoverSync/graphViewHighlights.test.ts

@@ -200,3 +200,56 @@ describe("the drawing view has to be on the highlight's assembly", () => {
     expect(graphViewHighlights(noAssembly, 'lgv1', ['Sakai'])).toHaveLength(1)
   })
 })
+
+describe("a hovered node's span on a haplotype's own assembly", () => {
+  const onHap = {
+    refName: 'CM094351.1',
+    start: 1200,
+    end: 1500,
+    assemblyName: 'HG002.1',
+  }
+
+  // the stack's rows and a view opened beside are not the graph's pair
+  test('draws in a view of that assembly, paired or not', () => {
+    const views = [
+      graphView({
+        connectedViewId: 'lgv-ref',
+        assemblyHoverHighlights: [onHap],
+      }),
+      linearView('lgv-ref'),
+      linearView('lgv-hap'),
+    ]
+    expect(graphViewHighlights(views, 'lgv-hap', ['HG002.1'])).toEqual([
+      { key: 'graph1-0', region: onHap },
+    ])
+  })
+
+  test('draws nowhere else, nor where the view states no assemblies', () => {
+    const views = [graphView({ assemblyHoverHighlights: [onHap] })]
+    expect(graphViewHighlights(views, 'lgv1', ['hg38'])).toEqual([])
+    expect(graphViewHighlights(views, 'lgv1')).toEqual([])
+  })
+
+  test("comes from a graph track's display too", () => {
+    const views = [
+      {
+        ...linearView('lgv-ref'),
+        tracks: [
+          {
+            displays: [
+              {
+                id: 'display1',
+                type: 'LinearGraphDisplay',
+                assemblyHoverHighlights: [onHap],
+              },
+            ],
+          },
+        ],
+      },
+      linearView('lgv-hap'),
+    ]
+    expect(graphViewHighlights(views, 'lgv-hap', ['HG002.1'])).toEqual([
+      { key: 'display1-0', region: onHap },
+    ])
+  })
+})

package/src/hoverSync/graphViewHighlights.ts

@@ -124,6 +124,31 @@ export function graphViewHighlights(
         }
       }
     }
+    // A hovered node's span on each haplotype's own assembly goes to any
+    // view of that assembly, paired or not: the assembly name says where it
+    // belongs, and those views are a synteny stack's rows or opened beside
+    for (const graph of isRecord(view)
+      ? [
+          ...trackGraphs(view),
+          ...(view.type === 'GraphGenomeView' ? [view] : []),
+        ]
+      : []) {
+      const spans = Array.isArray(graph.assemblyHoverHighlights)
+        ? graph.assemblyHoverHighlights
+        : []
+      spans.forEach((value: unknown, i) => {
+        const region = readRegion(value)
+        if (
+          region?.assemblyName !== undefined &&
+          linearAssemblyNames?.includes(region.assemblyName)
+        ) {
+          highlights.push({
+            key: `${typeof graph.id === 'string' ? graph.id : 'graph'}-${i}`,
+            region,
+          })
+        }
+      })
+    }
     if (
       isRecord(view) &&
       view.type === 'GraphGenomeView' &&