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 listfetchResults 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.