View setup

Render the component and give it a starting state.

The simplest example

npm install @jbrowse/react-linear-genome-view2

The view renders on the client only: in Next.js, load it through next/dynamic with { ssr: false }. Add @fontsource/roboto, or the chrome falls back to the host page’s font.

View source — 25 lines

import { LinearGenomeView } from '@jbrowse/react-linear-genome-view2'

export default function OneLinearGenomeView() {
  return (
    <LinearGenomeView
      assembly={{
        name: 'volvox',
        uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
      }}
      tracks={[
        {
          type: 'FeatureTrack',
          trackId: 'volvox_gff3',
          name: 'Volvox genes',
          assemblyNames: ['volvox'],
          adapter: {
            type: 'Gff3TabixAdapter',
            uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox.sort.gff3.gz',
          },
        },
      ]}
      init={{ loc: 'ctgA:1105..1221', tracks: ['volvox_gff3'] }}
    />
  )
}

Tracks as an id and a uri

Supported file types lists what each extension resolves to. Spell type and adapter out when the file name does not decide the format, or to set an adapter slot such as csi: true.

View source — 28 lines

import { LinearGenomeView } from '@jbrowse/react-linear-genome-view2'

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

export default function WithTrackShorthand() {
  return (
    <LinearGenomeView
      assembly={{
        name: 'volvox',
        uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
      }}
      tracks={[
        { trackId: 'genes', uri: `${base}/volvox.sort.gff3.gz` },
        { trackId: 'microarray', uri: `${base}/volvox_microarray.bw` },
        {
          trackId: 'duplications',
          uri: `${base}/volvox.dup.vcf.gz`,
          name: 'Duplications',
          displayDefaults: { color: 'purple' },
        },
      ]}
      init={{
        loc: 'ctgA:1..50,000',
        tracks: ['genes', 'microarray', 'duplications'],
      }}
    />
  )
}

Declarative init

init is read once, when the view is created: re-rendering with a different loc does not move it. To drive the view afterwards, take a ref and call its navigation actions.

View source — 36 lines

import { LinearGenomeView } from '@jbrowse/react-linear-genome-view2'

export default function WithInit() {
  return (
    <LinearGenomeView
      assembly={{
        name: 'hg38',
        uri: 'https://jbrowse.org/genomes/GRCh38/fasta/hg38.prefix.fa.gz',
        refNameAliases: {
          uri: 'https://jbrowse.org/genomes/GRCh38/hg38_aliases.txt',
        },
        cytobands: {
          uri: 'https://jbrowse.org/genomes/GRCh38/cytoBand.txt',
        },
        geneticCodes: { chrM: 2 },
      }}
      tracks={[
        {
          type: 'FeatureTrack',
          trackId: 'hg38-ncbi-refseq-curated',
          name: 'NCBI RefSeq Curated',
          assemblyNames: ['hg38'],
          adapter: {
            type: 'Gff3TabixAdapter',
            uri: 'https://jbrowse.org/ucsc/hg38/ncbiRefSeqCurated.gff.gz',
            csi: true,
          },
        },
      ]}
      init={{
        loc: 'chr7:155,799,529..155,812,871',
        tracks: ['hg38-ncbi-refseq-curated'],
      }}
    />
  )
}

useCreateViewState

View source — 50 lines

import { useState } from 'react'

import {
  JBrowseLinearGenomeView,
  useCreateViewState,
} from '@jbrowse/react-linear-genome-view2'

function GenomeView() {
  const state = useCreateViewState({
    assembly: {
      name: 'volvox',
      uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
    },
    tracks: [
      {
        type: 'FeatureTrack',
        trackId: 'volvox_gff3',
        name: 'Volvox genes',
        assemblyNames: ['volvox'],
        adapter: {
          type: 'Gff3TabixAdapter',
          uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox.sort.gff3.gz',
        },
      },
    ],
    location: 'ctgA:1105..1221',
  })
  return state ? <JBrowseLinearGenomeView viewState={state} /> : null
}

export default function UseCreateViewState() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>
        Parent render count: {count} — clicking the button triggers a parent
        re-render, but the genome view state is preserved because{' '}
        <code>useCreateViewState</code> creates the state only once.
      </p>
      <button
        onClick={() => {
          setCount(c => c + 1)
        }}
      >
        Re-render parent
      </button>
      <GenomeView />
    </div>
  )
}