JBrowse 2 · Linear Genome View examples

Alignments

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

Initialize an alignments display

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

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

const tracks = [
  {
    type: 'AlignmentsTrack',
    trackId: cramTrackId,
    name: 'NA12878 Exome',
    assemblyNames: ['GRCh38'],
    adapter: {
      type: 'CramAdapter',
      uri: 'https://s3.amazonaws.com/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://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/fasta/GRCh38.fa.gz',
        refNameAliases: {
          uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/hg38_aliases.txt',
        },
        geneticCodes: { MT: 2 },
      }}
      tracks={tracks}
      init={{
        loc: '1:100,987,200..100,987,450',
        tracks: [
          {
            trackId: cramTrackId,
            displaySnapshot: {
              type: 'LinearAlignmentsDisplay',
              height: 250,
              showSoftClipping: true,
              colorBy: { type: 'pairOrientation' },
            },
          },
        ],
      }}
    />
  )
}

Group alignments by tag

View source — 38 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={[
        {
          type: 'AlignmentsTrack',
          trackId: 'volvox_bam',
          name: 'volvox-sorted.bam',
          assemblyNames: ['volvox'],
          adapter: {
            type: 'BamAdapter',
            uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox-sorted.bam',
          },
        },
      ]}
      init={{
        loc: 'ctgA:39,728..40,459',
        tracks: [
          {
            trackId: 'volvox_bam',
            displaySnapshot: {
              type: 'LinearAlignmentsDisplay',
              height: 400,
              colorBy: { type: 'tag', tag: 'HP' },
              facet: 'tags.HP',
            },
          },
        ],
      }}
    />
  )
}

Custom alignments display options

Every slot is on the LinearAlignmentsDisplay config page. These reads also carry 5mC calls: see the DNA methylation tutorial.

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

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

const tracks = [
  {
    type: 'AlignmentsTrack',
    trackId: 'hg002_snrpn_5mc',
    name: 'HG002 SNRPN 5mC (haplotagged nanopore)',
    assemblyNames: ['GRCh38'],
    adapter: {
      type: 'BamAdapter',
      uri: 'https://jbrowse.org/demos/methylation/HG002_SNRPN_5mC_haplotagged.bam',
    },
  },
]

export default function WithAlignmentsDisplayOptions() {
  return (
    <LinearGenomeView
      assembly={assembly}
      tracks={tracks}
      init={{
        loc: 'chr15:24,954,000..24,972,000',
        tracks: [
          {
            trackId: 'hg002_snrpn_5mc',
            displaySnapshot: {
              type: 'LinearAlignmentsDisplay',
              height: 500,
              colorBy: { type: 'tag', tag: 'HP' },
              facet: 'tags.HP',
            },
          },
        ],
      }}
    />
  )
}