JBrowse Linear Genome View
A genome browser as a React component. For your own UI around the same engine, see Build your own.
Getting started
- The simplest exampleOne component, three props: assembly, tracks, view.
- Tracks as an id and a uriThe extension picks the track type and the adapter.
- The view to openThe view prop against a real assembly (hg38).
- useCreateViewStateHold the view state yourself, stable across re-renders.
- A hosted genomejbrowseHub fetches a genome, its tracks and its gene search by name.
Layout and chrome
- Open on a default sessionA session carries what view cannot: a track of its own.
- Disable the add-track UIHide the "add track" UI for a locked-down embed.
- Widgets in a side drawerPut the track selector and feature details in a drawer.
- Fitting the view in a fixed-height boxThe height prop, or a host box of your own.
Navigation and search
- External navigationnavToLocString for a locstring, navToLocations for coordinates.
- Disable zoom and side scrollLock the view so users cannot zoom or pan.
- Show a track programmaticallyShow and hide a track from your own button.
- Flipped regionsSeveral regions, some reversed, and a horizontallyFlip() button.
- Aggregate text searchingOne trix index spanning every track.
- Per-track text searchingAn index attached to one track config.
Tracks
- Jexl feature colors and labelsColor and re-label each feature from its own attributes.
- Track sizing: grow & fitheightMode, with the same crowded locus opened twice.
- Highlight a feature, and sort it to the topfeatureHighlights boxes one feature and pins its row.
- Initialize an alignments displayA displaySnapshot on a view.tracks entry.
- Group alignments by tagfacet splits the pileup into labeled lanes.
- Haplotagged reads, declared as marksA formula, a facet and a span mark over haplotagged reads.
- Quantitative (BigWig) trackA wiggle display, configured through displayDefaults.
- GTF gene model trackGenes and transcripts built from per-feature lines.
- Multi-sample variant displayOne row per sample, colored by a samples TSV column.
Theming
Sessions
- A view spelled outdisplaySnapshot, tracklist, nav, and labeled highlights.
- Persist & restore the sessiononSnapshot out, session back in.
- Put the session in the URLencodeSession / decodeSession, for a sharable link.
- Observe the visible viewAn observer reading the regions currently on screen.
- Observe the selected featureMirror session.selection into your own panel.
- Two linear genome viewsTwo independent views on one page.
Integration
- Export the view (SVG/PNG)The exportSvg action, through a ref.
- Custom error handlingcreateViewState throws on a config it cannot build.
- External pluginloadPlugins fetches a bundle at runtime.
- Inline pluginPass a Plugin subclass from your own source.
- Internet accounts (authentication)A per-track fetch override, usually a bearer token.
- Web workerMove parsing and rendering off the main thread.
- Files from your host processOpen a track on bytes your host process holds, with no web server.
- Without ReactcreateLinearGenomeView mounts into an element and hands back a controller.
Real-world demos
- Methylation by haplotypeNanopore reads at SNRPN: one haplotype methylated, the other not.
- Nextstrain pathogensGenes, diversity and genotypes for five viral genomes.
- LocusZoom-style LDGWAS summary statistics colored by LD to the lead SNP.
- Single-cell UMAPSelect clusters to filter coverage rows; click a gene to color cells.
- Pan-UKB GWASPan-UK Biobank GWAS summary statistics across phenotypes.