Signal, gene, variant

Quantitative signal from a BigWig, gene models from a GTF, and a multi-sample VCF as a matrix.

Quantitative (BigWig) track

Quantitative data — coverage, signal, microarray intensity — is a QuantitativeTrack over a BigWigAdapter, drawn by a LinearWiggleDisplay.

The displayDefaults shorthand configures it without naming the display: defaultRendering picks among xyplot, density and line, and minScore/maxScore pin the axis instead of autoscaling.

scaleType (linear/log), summaryScoreMode and the bicolor pivots are in the config docs; the quantitative track guide is the full walkthrough.

View source — 35 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',
          },
          // the `displayDefaults` shorthand routes these settings to the track's
          // LinearWiggleDisplay — pick the renderer, pin the score axis, set colors
          // and height without naming the display
          displayDefaults: {
            defaultRendering: 'xyplot',
            height: 150,
            color: '#a05195',
            minScore: 0,
            maxScore: 1000,
          },
        },
      ]}
      init={{ loc: 'ctgA:1..50,000', tracks: ['volvox_microarray'] }}
    />
  )
}

GTF gene model track

Gene models from a GTF are a FeatureTrack over a GtfAdapter (plain text, read into memory) or a GtfTabixAdapter (bgzipped and indexed, for large files). This demo is a real GENCODE record — TP53 — remapped onto volvox ctgA.

Unlike GFF3, GTF has no spanning gene line and often no transcript line either, so JBrowse builds the model from the exon/CDS lines: lines sharing a transcript_id group under a transcript (synthesized if absent, per the Cufflinks/StringTie convention), and transcripts sharing a gene_id group into a gene.

The gene label comes from aggregateField (default gene_name), falling back to gene_id — so a UCSC genePredToGtf or AUGUSTUS file, which carries only gene_id, still gets a gene model. Point it wherever your display name lives.

For a large file, index it first — jbrowse sort-gff works on GTF, which shares GFF’s column layout:

jbrowse sort-gff genes.gtf | bgzip > genes.gtf.gz
tabix -p gff genes.gtf.gz

View source — 33 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: {
            // a real GENCODE record (TP53), remapped into volvox ctgA coordinates. A
            // plain (un-indexed) GTF; the `uri` shorthand also accepts a gzipped
            // file. For large files use a GtfTabixAdapter on a bgzipped,
            // tabix-indexed GTF instead (sort + index with `jbrowse sort-gff`)
            type: 'GtfAdapter',
            uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox_genes.gtf',
            // GTF has no spanning gene line, so transcripts are grouped into a gene
            // via this attribute (default 'gene_name'); set it to whatever your file
            // keys genes on, e.g. 'gene_id'
            aggregateField: 'gene_name',
          },
        },
      ]}
      init={{ loc: 'ctgA:500..20,500', tracks: ['volvox_genes_gtf'] }}
    />
  )
}

Multi-sample variant display

A multi-sample VCF renders one row per sample, grouped and colored by sample metadata. The metadata comes from a samples TSV on the adapter (samplesTsvLocation): first column the sample name, the rest (population, phenotype, …) groupable attributes.

Two things are easy to get wrong:

colorBy is a config slot, read once when sources load — put it on the display configuration, not on a session displaySnapshot.
a track opens its first configured display, so LinearMultiSampleVariantDisplay has to come first in displays for opening the track by trackId to land on it.

Reference: VcfTabixAdapter, LinearMultiSampleVariantDisplay. The 1000 Genomes SVs tutorial works through population SVs and a family trio end to end.

View source — 47 lines

import { LinearGenomeView } from '@jbrowse/react-linear-genome-view2'

// managed API: props are initial values, the component owns the engine
export default function WithMultiSampleVariantDisplay() {
  return (
    <LinearGenomeView
      assembly={{
        name: 'volvox',
        uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
      }}
      // A multi-sample VCF (one genotype column per sample) plus a samples TSV
      // that maps each sample to metadata. The TSV's first column is the sample
      // name; the remaining columns (here "population") become
      // groupable/colorable attributes.
      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',
              // colorBy names a samples-TSV column to group/color by. Swap
              // `type` to 'LinearMultiSampleVariantMatrixDisplay' for the matrix
              // view, or add renderingMode: 'phased' (phased VCFs) for haplotypes
              colorBy: 'population',
            },
          ],
        },
      ]}
      init={{
        loc: 'ctgA:1..50,000',
        tracks: ['volvox_multisample_sv'],
      }}
    />
  )
}