Basic example

The whole app, one assembly, one track.

npm install @jbrowse/react-app2

import '@jbrowse/react-app2/styles.css'

Without the stylesheet the view manager’s tabs render unstyled. The props are read once, on mount; to drive the app afterwards, render <JBrowseApp> over useCreateViewState, as Observe the session does.

View source — 39 lines

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

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',
          assembly: 'volvox',
          loc: 'ctgA:1..50000',
          tracks: ['volvox_cram'],
          tracklist: true,
        },
      ]}
    />
  )
}