JBrowse 2 · Linear Genome View examples

Two linear genome views

Two independent views on one page.

View source — 36 lines
import {
  JBrowseLinearGenomeView,
  useCreateViewState,
} from '@jbrowse/react-linear-genome-view2'

const assembly = {
  name: 'volvox',
  uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
}

const tracks = [
  {
    trackId: 'volvox_gff3',
    name: 'Volvox genes',
    uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox.sort.gff3.gz',
  },
]

export default function TwoViews() {
  const state1 = useCreateViewState({
    assembly,
    tracks,
    location: 'ctgA:1105..1221',
  })
  const state2 = useCreateViewState({
    assembly,
    tracks,
    location: 'ctgA:5560..30589',
  })
  return (
    <div>
      {state1 ? <JBrowseLinearGenomeView viewState={state1} /> : null}
      {state2 ? <JBrowseLinearGenomeView viewState={state2} /> : null}
    </div>
  )
}