JBrowse 2 · Circular Genome View examples

Volvox structural variants

A structural-variant VCF on the volvox assembly.

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

Volvox structural variants

assembly, tracks and init as props.

npm install @jbrowse/react-circular-genome-view2

The props are read once, on mount; to drive the view afterwards, see show a track. It renders on the client only, so in Next.js load it through next/dynamic with { ssr: false }.

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.

Supported file types lists what each extension resolves to. Spell type and adapter out when the file name does not decide the format, or to set an adapter slot such as csi: true.

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

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'] }}
    />
  )
}