JBrowse 2 · Linear Genome View examples

Alignments

BAM/CRAM tracks with their display options set up front.

Initialize an alignments display

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

const cramTrackId = 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome'

const tracks = [
  {
    trackId: cramTrackId,
    name: 'NA12878 Exome',
    uri: 'https://jbrowse.org/genomes/GRCh38/alignments/NA12878/NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome.cram',
  },
]

export default function WithInitAlignmentsDisplay() {
  return (
    <LinearGenomeView
      assembly={{
        name: 'GRCh38',
        aliases: ['hg38'],
        uri: 'https://jbrowse.org/genomes/GRCh38/fasta/GRCh38.fa.gz',
        refNameAliases: {
          uri: 'https://jbrowse.org/genomes/GRCh38/hg38_aliases.txt',
        },
        geneticCodes: { MT: 2 },
      }}
      tracks={tracks}
      view={{
        loc: '1:100,987,200..100,987,450',
        tracks: [
          {
            trackId: cramTrackId,
            displaySnapshot: {
              type: 'LinearAlignmentsDisplay',
              height: 250,
              showSoftClipping: true,
              color: { field: 'pairOrientation' },
            },
          },
        ],
      }}
    />
  )
}

Group alignments by tag

color and facet are the grammar of graphics’ colour scale and facet over one field, ggplot2’s aes(colour = HP) and facet_grid(rows = vars(HP)). Each takes { field, domain }, and a domain lists the values that come first, in order. Grouping and lane order covers every display that takes a facet.

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

export default function WithGroupByTag() {
  return (
    <LinearGenomeView
      assembly={{
        name: 'volvox',
        uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
      }}
      tracks={[
        {
          trackId: 'volvox_bam',
          name: 'volvox-sorted.bam',
          uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox-sorted.bam',
        },
      ]}
      view={{
        loc: 'ctgA:39,728..40,459',
        tracks: [
          {
            trackId: 'volvox_bam',
            displaySnapshot: {
              type: 'LinearAlignmentsDisplay',
              height: 400,
              color: { field: 'tags.HP' },
              facet: 'tags.HP',
            },
          },
        ],
      }}
    />
  )
}

The same reads, declared as marks

The picture above, as a grammar of graphics: the formula step is ggplot2’s mutate(), lifting the HP tag into a field; facet is facet_grid(rows); pileup packs each section into rows; and span is a geom_rect coloured by the field. The mark display guide maps every name, and the methylation tutorial reads these reads’ 5mC calls.

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

const assembly = {
  name: 'GRCh38',
  aliases: ['hg38'],
  uri: 'https://jbrowse.org/genomes/GRCh38/fasta/GRCh38.fa.gz',
  refNameAliases: {
    uri: 'https://jbrowse.org/genomes/GRCh38/hg38_aliases.txt',
  },
  geneticCodes: { MT: 2 },
}

const tracks = [
  {
    trackId: 'hg002_snrpn',
    name: 'HG002 SNRPN reads by haplotype',
    uri: 'https://jbrowse.org/demos/methylation/HG002_SNRPN_5mC_haplotagged.bam',
    type: 'AlignmentsTrack',
    displays: [
      {
        type: 'LinearMarkDisplay',
        displayId: 'hg002_snrpn-LinearMarkDisplay',
        height: 400,
        transform: [
          { type: 'formula', expr: "jexl:getTag(feature,'HP')", as: 'HP' },
        ],
        facet: 'HP',
        marks: [
          {
            mark: 'span',
            transform: [{ type: 'pileup' }],
            encoding: {
              row: 'row',
              color: { field: 'HP', scale: 'categorical', title: 'Haplotype' },
            },
          },
        ],
      },
    ],
  },
]

export default function ReadsAsMarks() {
  return (
    <LinearGenomeView
      assembly={assembly}
      tracks={tracks}
      view={{ loc: 'chr15:24,954,000..24,972,000', tracks: ['hg002_snrpn'] }}
    />
  )
}