JBrowse 2 · React App examples

Tracks as an id and a uri

Three tracks written as a trackId and a data file, with the track type and the adapter read off each extension.

tracks is the JBrowse Web config.json tracks array, so an entry written this short is what you save to a file and hand to a whole instance. What each extension resolves to is listed in supported file types, and jbrowse validate accepts the form.

The app is the product that holds several assemblies, and that is where assemblyNames stops being implied: JBrowse fills it in only for a config declaring exactly one. Nothing fills it in for a track added later either — a config handed to addTrackConf, or arriving through &sessionTracks=, keeps the empty list it was built with and belongs to no assembly.

Spell type and adapter out when the file name does not decide the format — a .txt.gz that is not Pan-UKBB GWAS summary statistics — or when an adapter slot has to be set. A key written beside uri lands on the track rather than inside the adapter, so csi: true for a CSI index needs the full form. index is the exception, for an index that is not the sibling the guess would derive.

View source — 46 lines
import { JBrowse } from '@jbrowse/react-app2'

const base = 'https://jbrowse.org/code/jb2/main/test_data/volvox'

// The assembly is a name and a sequence file; each track is an id and a data
// file. JBrowse reads the track type and the adapter off the extension —
// .cram an AlignmentsTrack over CramAdapter, .gff3.gz a FeatureTrack over
// Gff3TabixAdapter, .bw a QuantitativeTrack over BigWigAdapter — and derives
// each index sibling. This config declares one assembly, so the tracks belong
// to it without naming it; with two, each track states its own assemblyNames.
const assemblies = [
  { name: 'volvox', uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit' },
]

const tracks = [
  { trackId: 'reads', uri: `${base}/volvox-sorted.cram` },
  { trackId: 'genes', uri: `${base}/volvox.sort.gff3.gz` },
  // a key beside uri wins over the guess, so a track that wants a name, a
  // folder in the track selector or a color of its own still fits the shorthand
  {
    trackId: 'microarray',
    uri: `${base}/volvox_microarray.bw`,
    name: 'Microarray signal',
    category: ['Quantitative'],
  },
]

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