Build your own genome browser
JBrowse's engine — assemblies, adapters, workers, coordinates — with your own UI around it. Drag to pan, wheel to zoom, drag the scalebar to zoom to a range.
That is the scalebar example, running its own source. Every page below is one file like it.
Only one of them renders any Material UI: Multiple tracks is left stock, so you can see a display before you swap anything. Everywhere else a track's chrome — its loading, error and too-large states, the controls in its corner — comes from @jbrowse/display-ui, which is 38 KB gzipped and depends on no UI toolkit at all.
That redirects what JBrowse's own displays draw; it does not unship what they import, so Material UI is still in the bundle on every page here —140 KB of chrome that no longer renders. Writing your own display component over DisplayChromeBase is what removes it: 39 KB gzipped for the same five states. The pages below take the first route, which is the one that needs no display of your own.
Most examples import three published packages, all on the same version:@jbrowse/react-linear-genome-view2 for the engine, @jbrowse/core for the hooks and the palette, and @jbrowse/display-ui for the display seams. The three that reach further say why they do:Track settings takes its colour-scheme labels from @jbrowse/plugin-alignments, Search by name calls the search helpers in @jbrowse/plugin-linear-genome-view, and Comparing two genomes needs a session whose views are an array, which is @jbrowse/react-app2.
Basics
Your own UI
- Removing Material UIWrite the components that draw a track's status states, and JBrowse's own displays render no Material UI at all.
- Loading and error statesThe three view states that are not ready, plus the notification channel a host drawing its own chrome renders nothing for.
- Scalebar and track labelsDraw the parts around the tracks yourself: a scalebar with gridlines, region names and drag-to-zoom, plus labels and resize bars down the side.
- Controlling the viewNavigate, zoom and show tracks from your own UI, and read the click back out of the session.
- Searching by namePoint the view at a text index and a location box takes gene names, plus the ambiguous-hit case a host drawing its own chrome renders nothing for.
- Track settingsDrive a display rather than the view: a Color by menu and a read-height slider, built from the same registry the track menu uses.
- Local filesOpen a file off the reader's own disk with your own picker, and say why one whose contig names disagree with the genome draws nothing.
- Highlighting a regionArrive from a search hit or a variant table with the region marked, and keep it marked while the reader pans.
Going further
- Web workersMove fetching, parsing and layout off the main thread with one option to createViewState.
- Comparing two genomesHuman and mouse at BRCA1: a synteny view is two ordinary linear views plus a ribbon band, so every page above applies to each row.
- SVG figuresJBrowse's SVG export is React components, so they mount in your page: a figure of the current view in DOM nodes, redrawn as the reader navigates.