JBrowse 2 · Circular Genome View examples

Volvox structural variants

assembly, tracks and view 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 — 40 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',
      features: [
        { refName: 'ctgA', uniqueId: 'alias1', aliases: ['A', 'contigA'] },
        { refName: 'ctgB', uniqueId: 'alias2', aliases: ['B', 'contigB'] },
      ],
    },
  },
}

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

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