JBrowse 2 · React App examples

Breakpoint split view

Visualize a structural variant across two regions.

BreakpointSplitView stacks two (or more) linear genome views and draws curves between the breakpoints of split/translocated reads. init.views is an array of { loc, assembly, tracks }, one per stacked panel:

{
  type: 'BreakpointSplitView',
  init: {
    views: [
      { loc: 'ctgA:1-5000', assembly: 'volvox', tracks: ['volvox_sv_cram'] },
      { loc: 'ctgB:1-5000', assembly: 'volvox', tracks: ['volvox_sv_cram'] },
    ],
  },
}

Like every view type, this is declared as a defaultSession.views entry (see Linear synteny view for the general pattern). The fields init accepts come from the BreakpointSplitView model docs.

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

import { volvoxConfig } from '../volvoxConfig.ts'

// the volvox config includes a 'volvox_sv_cram' alignments track with SV reads
export default function BreakpointSplitExample() {
  return (
    <JBrowse
      assemblies={volvoxConfig.assemblies}
      tracks={volvoxConfig.tracks}
      views={[
        {
          type: 'BreakpointSplitView',
          init: [
            {
              loc: 'ctgA:1-5000',
              assembly: 'volvox',
              tracks: ['volvox_sv_cram'],
            },
            {
              loc: 'ctgB:1-5000',
              assembly: 'volvox',
              tracks: ['volvox_sv_cram'],
            },
          ],
        },
      ]}
    />
  )
}