JBrowse 2 · React App examples

Customizing the app

Theme, sizing and the web worker.

Dark theme

Every palette option is in the theming guide.

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

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

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

const tracks = [
  {
    trackId: 'volvox_cram',
    name: 'volvox-sorted.cram',
    uri: `${base}/volvox-sorted.cram`,
  },
]

export default function DarkTheme() {
  return (
    <JBrowse
      assemblies={assemblies}
      tracks={tracks}
      configuration={{ theme: { palette: { mode: 'dark' } } }}
      views={[
        {
          type: 'LinearGenomeView',
          assembly: 'volvox',
          loc: 'ctgA:1..50000',
          tracks: ['volvox_cram'],
        },
      ]}
    />
  )
}

Fit the app to a container

--jbrowse-app-height defaults to 100vh. A percentage resolves only inside a container with a definite height, which here is the flex child with minHeight: 0.

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

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

const tracks = [
  {
    trackId: 'volvox_cram',
    name: 'volvox-sorted.cram',
    uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox-sorted.cram',
    category: ['Alignments'],
  },
]

export default function FitToContainer() {
  return (
    <>
      <style>{`.jbrowseFitDemo { --jbrowse-app-height: 100%; }`}</style>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <div
          style={{
            padding: '8px 12px',
            fontSize: 14,
            background: 'color-mix(in srgb, CanvasText 8%, Canvas)',
            borderBottom:
              '1px solid color-mix(in srgb, CanvasText 20%, Canvas)',
          }}
        >
          Your own app chrome lives here. The embedded JBrowse below fills the
          remaining space instead of forcing the full viewport height.
        </div>
        <div className="jbrowseFitDemo" style={{ flex: 1, minHeight: 0 }}>
          <JBrowse
            assemblies={assemblies}
            tracks={tracks}
            views={[
              {
                type: 'LinearGenomeView',
                assembly: 'volvox',
                loc: 'ctgA:1..50000',
                tracks: ['volvox_cram'],
                tracklist: true,
              },
            ]}
          />
        </div>
      </div>
    </>
  )
}

Web worker RPC

Under webpack, import @jbrowse/react-app2/esm/makeWorkerInstance instead of the ?worker entry, and set output.publicPath: 'auto' so the worker finds its own URL. A module worker, which Vite builds here, cannot load a UMD plugin; a classic worker can.

View source — 32 lines
import { JBrowse } from '@jbrowse/react-app2'
import RpcWorker from '@jbrowse/react-app2/esm/rpcWorker?worker'

const assemblies = [
  { 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 WithWebWorker() {
  return (
    <JBrowse
      assemblies={assemblies}
      tracks={tracks}
      makeWorkerInstance={() => new RpcWorker()}
      views={[
        {
          type: 'LinearGenomeView',
          assembly: 'volvox',
          loc: 'ctgA:1..50000',
          tracks: ['volvox_gff3'],
        },
      ]}
    />
  )
}