JBrowse 2 · React App examples

Comparative views

Synteny and dotplot views.

On this page: Linear synteny view · Dotplot view · Synteny via the imperative mount · Multi-way linear synteny view

Linear synteny view

Two assemblies and a PAF.

To align your own genomes, see the synteny visualization tutorial.

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

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

const assemblies = [
  { name: 'volvox', uri: `${base}/volvox.2bit` },
  { name: 'volvox_del', uri: `${base}/volvox_del.fa` },
]

const tracks = [
  {
    type: 'SyntenyTrack',
    trackId: 'volvox_del.paf',
    name: 'volvox_del.paf',
    assemblyNames: ['volvox', 'volvox_del'],
    category: ['Synteny'],
    adapter: {
      type: 'PAFAdapter',
      uri: `${base}/volvox_del.paf`,
      targetAssembly: 'volvox',
      queryAssembly: 'volvox_del',
    },
  },
]

export default function SyntenyExample() {
  return (
    <JBrowse
      assemblies={assemblies}
      tracks={tracks}
      views={[
        {
          type: 'LinearSyntenyView',
          views: [{ assembly: 'volvox' }, { assembly: 'volvox_del' }],
          tracks: ['volvox_del.paf'],
        },
      ]}
    />
  )
}

Dotplot view

A self-vs-self volvox dotplot.

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

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

const assemblies = [{ name: 'volvox', uri: `${base}/volvox.2bit` }]

const tracks = [
  {
    type: 'SyntenyTrack',
    trackId: 'volvox_fake_synteny',
    name: 'volvox_fake_synteny',
    assemblyNames: ['volvox', 'volvox'],
    category: ['Synteny'],
    adapter: {
      type: 'PAFAdapter',
      uri: `${base}/volvox_fake_synteny.paf`,
      assemblyNames: ['volvox', 'volvox'],
    },
  },
]

export default function DotplotExample() {
  return (
    <JBrowse
      assemblies={assemblies}
      tracks={tracks}
      views={[
        {
          type: 'DotplotView',
          views: [{ assembly: 'volvox' }, { assembly: 'volvox' }],
          tracks: ['volvox_fake_synteny'],
        },
      ]}
    />
  )
}

Synteny via the imperative mount

createApp, the mount non-React hosts wrap.

createApp takes no JSX, but react and react-dom are still peer dependencies and the @jbrowse/react-app2/styles.css import is still required.

View source — 54 lines
import { createApp } from '@jbrowse/react-app2'

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

const assemblies = [
  { name: 'volvox', uri: `${base}/volvox.2bit` },
  { name: 'volvox_del', uri: `${base}/volvox_del.fa` },
]

const tracks = [
  {
    type: 'SyntenyTrack',
    trackId: 'volvox_del.paf',
    name: 'volvox_del.paf',
    assemblyNames: ['volvox', 'volvox_del'],
    category: ['Synteny'],
    adapter: {
      type: 'PAFAdapter',
      uri: `${base}/volvox_del.paf`,
      targetAssembly: 'volvox',
      queryAssembly: 'volvox_del',
    },
  },
]

export default function CreateAppSynteny() {
  return (
    <div
      ref={el => {
        if (el) {
          const pending = createApp(el, {
            assemblies,
            tracks,
            views: [
              {
                type: 'LinearSyntenyView',
                views: [{ assembly: 'volvox' }, { assembly: 'volvox_del' }],
                tracks: ['volvox_del.paf'],
              },
            ],
          }).catch((e: unknown) => {
            console.error(e)
            return undefined
          })
          return () => {
            void pending.then(controller => {
              controller?.destroy()
            })
          }
        }
      }}
    />
  )
}

Multi-way linear synteny view

Four E. coli strains from one all-vs-all PAF.

tracks[i] is the band between views[i] and views[i+1], so N assemblies take N−1 entries. The data comes from the all-vs-all synteny tutorial.

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

const base = 'https://jbrowse.org/demos/ecoli_pangenome'

const strains = [
  { name: 'K12', displayName: 'E. coli K12' },
  { name: 'Sakai', displayName: 'E. coli Sakai' },
  { name: 'CFT073', displayName: 'E. coli CFT073' },
  { name: 'NCTC86', displayName: 'E. coli NCTC86' },
]

const assemblies = strains.map(({ name, displayName }) => ({
  name,
  displayName,
  sequence: {
    type: 'ReferenceSequenceTrack',
    trackId: `${name}-ref`,
    adapter: { type: 'BgzipFastaAdapter', uri: `${base}/${name}.fa.gz` },
  },
}))

const tracks = [
  {
    type: 'SyntenyTrack',
    trackId: 'ecoli_ava',
    name: 'E. coli pangenome (all-vs-all PAF)',
    assemblyNames: strains.map(s => s.name),
    category: ['Synteny'],
    adapter: {
      type: 'MultiGenomePAFAdapter',
      pafLocation: { uri: `${base}/all_vs_all.paf.gz` },
      assemblyNames: strains.map(s => s.name),
    },
  },
]

export default function MultiwaySyntenyExample() {
  return (
    <JBrowse
      assemblies={assemblies}
      tracks={tracks}
      views={[
        {
          type: 'LinearSyntenyView',
          views: strains.map(s => ({ assembly: s.name })),
          tracks: [['ecoli_ava'], ['ecoli_ava'], ['ecoli_ava']],
          drawCurves: true,
          minAlignmentLength: 10000,
        },
      ]}
    />
  )
}