JBrowse 2 · Linear Genome View examples

Signal, gene, variant

BigWig signal, GTF gene models and a multi-sample VCF.

Quantitative (BigWig) track

View source — 32 lines
import { LinearGenomeView } from '@jbrowse/react-linear-genome-view2'

export default function WithWiggleTrack() {
  return (
    <LinearGenomeView
      assembly={{
        name: 'volvox',
        uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
      }}
      tracks={[
        {
          type: 'QuantitativeTrack',
          trackId: 'volvox_microarray',
          name: 'Microarray (BigWig)',
          assemblyNames: ['volvox'],
          adapter: {
            type: 'BigWigAdapter',
            uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox_microarray.bw',
          },
          displayDefaults: {
            defaultRendering: 'xyplot',
            height: 150,
            color: '#a05195',
            minScore: 0,
            maxScore: 1000,
          },
        },
      ]}
      init={{ loc: 'ctgA:1..50,000', tracks: ['volvox_microarray'] }}
    />
  )
}

GTF gene model track

For a large file, sort and index it, and use GtfTabixAdapter:

jbrowse sort-gff genes.gtf | bgzip > genes.gtf.gz
tabix -p gff genes.gtf.gz
View source — 26 lines
import { LinearGenomeView } from '@jbrowse/react-linear-genome-view2'

export default function WithGtfTrack() {
  return (
    <LinearGenomeView
      assembly={{
        name: 'volvox',
        uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
      }}
      tracks={[
        {
          type: 'FeatureTrack',
          trackId: 'volvox_genes_gtf',
          name: 'Genes (GTF)',
          assemblyNames: ['volvox'],
          adapter: {
            type: 'GtfAdapter',
            uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox_genes.gtf',
            aggregateField: 'gene_name',
          },
        },
      ]}
      init={{ loc: 'ctgA:500..20,500', tracks: ['volvox_genes_gtf'] }}
    />
  )
}

Multi-sample variant display

colorBy is a config slot, read once when sources load, so it goes on the display config rather than a displaySnapshot. A track opens its first configured display, so LinearMultiSampleVariantDisplay has to come first in displays.

View source — 39 lines
import { LinearGenomeView } from '@jbrowse/react-linear-genome-view2'

export default function WithMultiSampleVariantDisplay() {
  return (
    <LinearGenomeView
      assembly={{
        name: 'volvox',
        uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
      }}
      tracks={[
        {
          type: 'VariantTrack',
          trackId: 'volvox_multisample_sv',
          name: 'volvox multi-sample SV',
          assemblyNames: ['volvox'],
          adapter: {
            type: 'VcfTabixAdapter',
            uri: 'https://raw.githubusercontent.com/GMOD/jbrowse-components/main/test_data/volvox/volvox.sv.vcf.gz',
            samplesTsvLocation: {
              uri: 'https://raw.githubusercontent.com/GMOD/jbrowse-components/main/test_data/volvox/volvox.sv.samples.tsv',
            },
          },
          displays: [
            {
              type: 'LinearMultiSampleVariantDisplay',
              displayId:
                'volvox_multisample_sv-LinearMultiSampleVariantDisplay',
              rowColor: 'population',
            },
          ],
        },
      ]}
      init={{
        loc: 'ctgA:1..50,000',
        tracks: ['volvox_multisample_sv'],
      }}
    />
  )
}