Build your own genome browser
Each example mounts JBrowse tracks in a React component and builds the controls around them from @jbrowse/display-ui/embed and plain HTML. For the same tracks inside the completeJBrowseLinearGenomeView component, see the Linear Genome View examples.
First view
Navigation
- Location box, zoom and track togglesA location box, zoom buttons and track toggles call methods on the view.
- Searching by nameA location box looks up gene names in a text index and navigates to the match.
- Search results as a listview.search returns the matches, and the page lists them as buttons.
- Scalebar and gridlinesDrag across the scalebar to zoom, hover to read the base.
- Highlighting a regionMark the region a link points at, and keep it marked while panning.
Tracks
- Track labels and resize barsLabels beside the tracks, and a bar to resize each.
- A track selector sidebarA sidebar groups session.tracks by category, with a checkbox per track.
- Track settingsA Color by menu, a legend toggle and a read-height slider.
- Feature details on clickA panel lists the attributes of the feature in session.selection.
Loading, errors and theme
Data sources
- A hosted genomejbrowseHub fetches a genome, its tracks and its gene search by name.
- Local filesA file picker opens a data file and its index from disk.
- Your own data sourceA plugin in the page adds an adapter that reads genes from Ensembl's REST API.
- Navigating from a table of callsClick a structural variant call to open and mark it.
Custom plots
Several regions and genomes
Workers, links and export
- Web workerFetch and parse off the main thread with one option.
- A picture first, then the viewA screenshot paints with the page; the engine loads near the viewport.
- Session in the URLSave the view to a link and restore it on load.
- SVG figuresThe page redraws an SVG figure of the view after each navigation.