JBrowse 2 · Circular Genome View examples

Volvox structural variants

A structural-variant VCF on the volvox assembly, via the managed CircularGenomeView component.

On this page: Volvox structural variants · The same view, in shorthand

Volvox structural variants

assembly, tracks and init as props.

An assembly, a list of tracks and an init for what to open go straight to <CircularGenomeView> as props — no createViewState. The config reuses the JBrowse format with one difference: a single assembly rather than an assemblies array.

The props are initial values, read once on mount. To open a track in response to a runtime event, or to reach the engine imperatively, use the unmanaged createViewState flow — see show a track.

Config fields are under docs/config, view snapshot properties under CircularView.

View source — 46 lines
import { CircularGenomeView } from '@jbrowse/react-circular-genome-view2'

const assembly = {
  name: 'volvox',
  aliases: ['vvx'],
  sequence: {
    adapter: {
      type: 'TwoBitAdapter',
      uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
    },
  },
  refNameAliases: {
    adapter: {
      type: 'FromConfigAdapter',
      adapterId: 'W6DyPGJ0UU',
      features: [
        { refName: 'ctgA', uniqueId: 'alias1', aliases: ['A', 'contigA'] },
        { refName: 'ctgB', uniqueId: 'alias2', aliases: ['B', 'contigB'] },
      ],
    },
  },
}

const tracks = [
  {
    type: 'VariantTrack',
    trackId: 'volvox_sv_test',
    name: 'volvox structural variant test',
    category: ['VCF'],
    assemblyNames: ['volvox'],
    adapter: {
      type: 'VcfTabixAdapter',
      uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox.dup.vcf.gz',
    },
  },
]

export default function Volvox() {
  return (
    <CircularGenomeView
      assembly={assembly}
      tracks={tracks}
      init={{ tracks: ['volvox_sv_test'] }}
    />
  )
}

The same view, in shorthand

The extension picks the track type and the adapter.

A tracks entry can be an id and a uri. JBrowse reads the track type and the adapter off the file’s extension, derives the index sibling, and takes name from the file name unless the entry gives one — the guess the app’s “Add track” dialog runs, listed per format under supported file types.

A circular view draws whichever of a track’s displays is a chord display, so what makes this a ring rather than a row of features is the view it is mounted in, not anything the track config says.

assemblyNames is what the shorthand cannot always supply: this component stamps on its one assembly, and a config.json supplies it wherever the file declares exactly one — but a track handed to session.addTrackConf keeps the empty list it was built with and belongs to no assembly, so name it there. Spell type and adapter out when the file name does not decide the format, or when an adapter slot has to be set, such as csi: true for a CSI index.

View source — 25 lines
import { CircularGenomeView } from '@jbrowse/react-circular-genome-view2'

// The same volvox structural variants, written as short as the config goes: the
// assembly is a name and a sequence file, and the track is an id and a data
// file. A .vcf.gz resolves to a VariantTrack over VcfTabixAdapter, whose chord
// display is the one a circular view draws, and the `.tbi` sibling comes with
// it. This embed has one assembly, so the track is on it without saying so.
export default function WithTrackShorthand() {
  return (
    <CircularGenomeView
      assembly={{
        name: 'volvox',
        uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
      }}
      tracks={[
        {
          trackId: 'volvox_sv',
          uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox.dup.vcf.gz',
          name: 'Volvox duplications',
        },
      ]}
      init={{ tracks: ['volvox_sv'] }}
    />
  )
}