JBrowse 2 · Linear Genome View examples

Session & drawer

Session snapshots, a locked-down UI, a drawer and a fixed height.

Open on a default session

A config slot such as height or color written on a session’s display node is dropped without a word. Put it on the track’s displays entry instead. To get a session, build the view in JBrowse Web and use File → Export session.

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

export default function DefaultSession() {
  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',
        },
      },
      {
        type: 'AlignmentsTrack',
        trackId: 'volvox-long-reads-sv-bam',
        name: 'volvox-long reads with SV',
        assemblyNames: ['volvox'],
        adapter: {
          type: 'BamAdapter',
          uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox-long-reads-sv.bam',
        },
      },
    ],
    defaultSession: {
      name: 'My session',
      view: {
        type: 'LinearGenomeView',
        loc: 'ctgA:1105..1221',
        assembly: 'volvox',
        tracks: ['volvox-long-reads-sv-bam'],
      },
    },
  })
  return state ? <JBrowseLinearGenomeView viewState={state} /> : null
}

Disable the add-track UI

disableAddTracks also turns off sequence search and multi-wiggle track creation, and removes the File menu that menuBar would add.

View source — 25 lines
import { LinearGenomeView } from '@jbrowse/react-linear-genome-view2'

export default function DisableAddTrack() {
  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',
          },
        },
      ]}
      disableAddTracks
    />
  )
}

Widgets in a side drawer

Open the track selector with init.tracklist rather than calling activateTrackSelector on the built engine: init waits for the view to resize around the drawer before navigating. Without height, an open drawer bounds the view to drawerViewHeight, '100vh' by default.

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

export default function WithDrawerWidget() {
  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',
        },
      },
    ],
    height: '100vh',
    menuBar: true,
    init: {
      loc: 'ctgA:1105..1221',
      tracks: ['volvox_gff3'],
      tracklist: true,
    },
  })
  return state ? <JBrowseLinearGenomeView viewState={state} /> : null
}

Fitting the view in a fixed-height box

height keeps the header pinned and scrolls only the tracks. A host box with a height of its own bounds the view too, but scrolls the whole component, header included. drawerViewHeight is the older spelling, honored only without height.

View source — 55 lines
import { LinearGenomeView } from '@jbrowse/react-linear-genome-view2'

export default function FixedHeight() {
  return (
    <LinearGenomeView
      height="400px"
      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',
          },
        },
        {
          type: 'QuantitativeTrack',
          trackId: 'volvox_microarray',
          name: 'Microarray (BigWig)',
          assemblyNames: ['volvox'],
          adapter: {
            type: 'BigWigAdapter',
            uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox_microarray.bw',
          },
          displayDefaults: { height: 150 },
        },
        {
          type: 'AlignmentsTrack',
          trackId: 'volvox-long-reads-sv-bam',
          name: 'volvox-long reads with SV',
          assemblyNames: ['volvox'],
          adapter: {
            type: 'BamAdapter',
            uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox-long-reads-sv.bam',
          },
          displayDefaults: { height: 200 },
        },
      ]}
      init={{
        loc: 'ctgA:1..50,000',
        tracks: [
          'volvox_gff3',
          'volvox_microarray',
          'volvox-long-reads-sv-bam',
        ],
      }}
    />
  )
}