JBrowse 2 · Circular Genome View examples

Web worker

Move data parsing off the main thread.

Under webpack, import @jbrowse/react-circular-genome-view2/esm/makeWorkerInstance instead of the ?worker entry, and set output.publicPath: 'auto' so the worker finds its own URL. Vite needs worker: { format: 'es' }, because the worker splits into chunks.

View source — 24 lines
import {
  JBrowseCircularGenomeView,
  useCreateViewState,
} from '@jbrowse/react-circular-genome-view2'
import RpcWorker from '@jbrowse/react-circular-genome-view2/esm/rpcWorker?worker'

export default function WebWorker() {
  const state = useCreateViewState({
    assembly: {
      name: 'volvox',
      uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
    },
    tracks: [
      {
        trackId: 'volvox_sv',
        name: 'Volvox duplications',
        uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox.dup.vcf.gz',
      },
    ],
    view: { tracks: ['volvox_sv'] },
    makeWorkerInstance: () => new RpcWorker(),
  })
  return state ? <JBrowseCircularGenomeView viewState={state} /> : null
}