JBrowse React App

@jbrowse/react-app2 embeds the full multi-view JBrowse 2 app — menu bar, view manager, drawer widgets, and every view type — in a single React component. If you only need a single track view, the lighter @jbrowse/react-linear-genome-view2 component is a better fit, and the Build your own examples keep the engine and rebuild the chrome from scratch.

Live demo

A real-world hg38 session at the SHH locus — genes, repeats, exome alignments, variants, and conservation.

View source — 113 lines

import { JBrowse } from '@jbrowse/react-app2'

// { name, uri } shorthand + a refNameAliases file so tracks using `1`/`chr1`
// both resolve. Core infers BgzipFastaAdapter from the .fa.gz extension.
const assemblies = [
  {
    name: 'GRCh38',
    aliases: ['hg38'],
    uri: 'https://jbrowse.org/genomes/GRCh38/fasta/hg38.prefix.fa.gz',
    refNameAliases: {
      uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/hg38_aliases.txt',
    },
  },
]

const tracks = [
  {
    type: 'FeatureTrack',
    trackId: 'genes',
    name: 'NCBI RefSeq Genes',
    assemblyNames: ['GRCh38'],
    category: ['Genes'],
    adapter: {
      type: 'Gff3TabixAdapter',
      uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/ncbi_refseq/GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff.gz',
    },
    textSearching: {
      textSearchAdapter: {
        type: 'TrixTextSearchAdapter',
        textSearchAdapterId: 'gff3tabix_genes-index',
        ixFilePath: {
          uri: 'https://jbrowse.org/genomes/GRCh38/ncbi_refseq/trix/GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff.gz.ix',
        },
        ixxFilePath: {
          uri: 'https://jbrowse.org/genomes/GRCh38/ncbi_refseq/trix/GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff.gz.ixx',
        },
        metaFilePath: {
          uri: 'https://jbrowse.org/genomes/GRCh38/ncbi_refseq/trix/GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff.gz_meta.json',
        },
        assemblyNames: ['GRCh38'],
      },
    },
  },
  {
    type: 'FeatureTrack',
    trackId: 'repeats_hg38',
    name: 'Repeats',
    assemblyNames: ['GRCh38'],
    category: ['Annotation'],
    adapter: {
      type: 'BigBedAdapter',
      uri: 'https://jbrowse.org/genomes/GRCh38/repeats.bb',
    },
  },
  {
    type: 'AlignmentsTrack',
    trackId: 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome',
    name: 'NA12878 Exome',
    assemblyNames: ['GRCh38'],
    category: ['1000 Genomes', 'Alignments'],
    adapter: {
      type: 'CramAdapter',
      uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/alignments/NA12878/NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome.cram',
    },
  },
  {
    type: 'VariantTrack',
    trackId:
      'ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf',
    name: '1000 Genomes Variant Calls',
    assemblyNames: ['GRCh38'],
    category: ['1000 Genomes', 'Variants'],
    adapter: {
      type: 'VcfTabixAdapter',
      uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/variants/ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf.gz',
    },
  },
  {
    type: 'QuantitativeTrack',
    trackId: 'hg38.100way.phyloP100way',
    name: 'hg38.100way.phyloP100way',
    category: ['Conservation'],
    assemblyNames: ['GRCh38'],
    adapter: {
      type: 'BigWigAdapter',
      uri: 'https://hgdownload.soe.ucsc.edu/goldenpath/hg38/phyloP100way/hg38.phyloP100way.bw',
    },
  },
]

export default function HumanDemo() {
  return (
    <JBrowse
      assemblies={assemblies}
      tracks={tracks}
      views={[
        {
          type: 'LinearGenomeView',
          init: {
            loc: 'chr7:155,799,529..155,812,871',
            assembly: 'hg38',
            tracks: [
              'genes',
              'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome',
              'ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf',
              'hg38.100way.phyloP100way',
            ],
          },
        },
      ]}
    />
  )
}

Install

Add the component and its React peer dependencies:

npm install @jbrowse/react-app2 react react-dom

Quick start

Render the JBrowse component with your assemblies, tracks, and the views to open on load:

import { JBrowse } from '@jbrowse/react-app2'

// The flattest assembly form: a name and a sequence-file URL. JBrowse picks the
// adapter (TwoBit/BgzipFasta/IndexedFasta) from the file extension.
const assemblies = [
  {
    name: 'volvox',
    uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
  },
]

const tracks = [
  {
    type: 'AlignmentsTrack',
    trackId: 'volvox_cram',
    name: 'volvox-sorted.cram',
    assemblyNames: ['volvox'],
    adapter: {
      type: 'CramAdapter',
      uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox-sorted.cram',
    },
  },
]

export default function BasicExample() {
  return (
    <JBrowse
      assemblies={assemblies}
      tracks={tracks}
      views={[
        {
          type: 'LinearGenomeView',
          init: {
            assembly: 'volvox',
            loc: 'ctgA:1..50000',
            tracks: ['volvox_cram'],
            tracklist: true,
          },
        },
      ]}
    />
  )
}

For production, offload data parsing and rendering to a web worker so the main thread stays responsive. The examples in the sidebar cover the rest: theming, loading a config.json, the other view types, and plugins. Full API and configuration reference lives in the embedding docs.