Structural variant views

Circular, breakpoint-split, spreadsheet and SV-inspector views over a volvox SV VCF.

On this page: Circular view · Breakpoint split view · Spreadsheet view · SV inspector · Multiple views in one session

Circular view

Show structural variants in a circular view.

CircularView draws structural variants as arcs around a circular ideogram. init takes one assembly and the tracks to show.

Fields: CircularView. The general { type, init } pattern is on Linear synteny view.

View source — 34 lines

import { JBrowse } from '@jbrowse/react-app2'

const base = 'https://jbrowse.org/code/jb2/main/test_data/volvox'

const assemblies = [{ name: 'volvox', uri: `${base}/volvox.2bit` }]

const tracks = [
  {
    type: 'VariantTrack',
    trackId: 'volvox_sv',
    name: 'volvox structural variants',
    assemblyNames: ['volvox'],
    category: ['Variants'],
    adapter: { type: 'VcfTabixAdapter', uri: `${base}/volvox.dup.vcf.gz` },
  },
]

export default function CircularExample() {
  return (
    <JBrowse
      assemblies={assemblies}
      tracks={tracks}
      views={[
        {
          type: 'CircularView',
          init: {
            assembly: 'volvox',
            tracks: ['volvox_sv'],
          },
        },
      ]}
    />
  )
}

Breakpoint split view

Visualize a structural variant across two regions.

BreakpointSplitView stacks two or more linear genome views and draws curves between the breakpoints of split and translocated reads. init.views is one { loc, assembly, tracks } per stacked panel.

Fields: BreakpointSplitView. For this on real data, see the cancer SV tutorial.

View source — 43 lines

import { JBrowse } from '@jbrowse/react-app2'

const base = 'https://jbrowse.org/code/jb2/main/test_data/volvox'

const assemblies = [{ name: 'volvox', uri: `${base}/volvox.2bit` }]

// a CRAM of reads spanning a structural variant between ctgA and ctgB
const tracks = [
  {
    type: 'AlignmentsTrack',
    trackId: 'volvox_sv_cram',
    name: 'volvox-sv (cram)',
    assemblyNames: ['volvox'],
    category: ['Alignments'],
    adapter: { type: 'CramAdapter', uri: `${base}/volvox-sv.cram` },
  },
]

export default function BreakpointSplitExample() {
  return (
    <JBrowse
      assemblies={assemblies}
      tracks={tracks}
      views={[
        {
          type: 'BreakpointSplitView',
          init: [
            {
              loc: 'ctgA:1-5000',
              assembly: 'volvox',
              tracks: ['volvox_sv_cram'],
            },
            {
              loc: 'ctgB:1-5000',
              assembly: 'volvox',
              tracks: ['volvox_sv_cram'],
            },
          ],
        },
      ]}
    />
  )
}

Spreadsheet view

Load a VCF into a sortable, filterable spreadsheet.

SpreadsheetView opens a tabular file — a VCF here — as a sortable, filterable spreadsheet. Note that uri goes on init, not in a track config.

Fields: SpreadsheetView. To pair a spreadsheet with a circular view that highlights breakends, see the SV inspector.

View source — 24 lines

import { JBrowse } from '@jbrowse/react-app2'

const base = 'https://jbrowse.org/code/jb2/main/test_data/volvox'

const assemblies = [{ name: 'volvox', uri: `${base}/volvox.2bit` }]

// the spreadsheet view loads the file straight from `init.uri` — no track config
export default function SpreadsheetExample() {
  return (
    <JBrowse
      assemblies={assemblies}
      tracks={[]}
      views={[
        {
          type: 'SpreadsheetView',
          init: {
            assembly: 'volvox',
            uri: `${base}/volvox.filtered.vcf.gz`,
          },
        },
      ]}
    />
  )
}

SV inspector

Inspect a structural-variant VCF with a paired spreadsheet + circular view.

SvInspectorView pairs a spreadsheet of structural variants with a circular view, so clicking a row highlights that variant’s breakend loci. Same init shape as the spreadsheet view.

Fields: SvInspectorView.

View source — 24 lines

import { JBrowse } from '@jbrowse/react-app2'

const base = 'https://jbrowse.org/code/jb2/main/test_data/volvox'

const assemblies = [{ name: 'volvox', uri: `${base}/volvox.2bit` }]

// the SV inspector loads the VCF straight from `init.uri` — no track config
export default function SvInspectorExample() {
  return (
    <JBrowse
      assemblies={assemblies}
      tracks={[]}
      views={[
        {
          type: 'SvInspectorView',
          init: {
            assembly: 'volvox',
            uri: `${base}/volvox.dup.vcf.gz`,
          },
        },
      ]}
    />
  )
}

Multiple views in one session

Stack a circular SV overview and a linear detail view — the app manages both at once.

The full app holds multiple views in one session — the thing the lighter @jbrowse/react-linear-genome-view2 can’t do. Each views entry becomes its own stacked view with an independent toolbar and track selector, and the menu bar’s Add menu opens more at runtime.

Here a whole-genome CircularView overviews the structural-variant calls and a LinearGenomeView below shows read-level detail — the same <JBrowse> as the basic example with two entries instead of one.

Views stack vertically by default. There is also a workspaces mode (session.setUseWorkspaces(true)) that tiles them into a tabbed dockview layout; its session-spec layout syntax is under Tiled views / Workspaces.

View source — 54 lines

import { JBrowse } from '@jbrowse/react-app2'

const base = 'https://jbrowse.org/code/jb2/main/test_data/volvox'

const assemblies = [{ name: 'volvox', uri: `${base}/volvox.2bit` }]

const tracks = [
  {
    type: 'VariantTrack',
    trackId: 'volvox_sv',
    name: 'volvox structural variants',
    assemblyNames: ['volvox'],
    category: ['Variants'],
    adapter: { type: 'VcfTabixAdapter', uri: `${base}/volvox.dup.vcf.gz` },
  },
  {
    type: 'AlignmentsTrack',
    trackId: 'volvox_cram',
    name: 'volvox-sorted.cram',
    assemblyNames: ['volvox'],
    category: ['Alignments'],
    adapter: { type: 'CramAdapter', uri: `${base}/volvox-sorted.cram` },
  },
]

// The react-app manages many views at once — the thing the single-view
// react-linear-genome-view component can't do. Pass more than one entry in
// `views` and the app stacks them, each with its own toolbar and track
// selector: here a whole-genome circular SV overview above a linear detail view.
export default function MultiViewSession() {
  return (
    <JBrowse
      assemblies={assemblies}
      tracks={tracks}
      views={[
        {
          type: 'CircularView',
          init: {
            assembly: 'volvox',
            tracks: ['volvox_sv'],
          },
        },
        {
          type: 'LinearGenomeView',
          init: {
            assembly: 'volvox',
            loc: 'ctgA:1..50000',
            tracks: ['volvox_cram'],
          },
        },
      ]}
    />
  )
}