Skip to content

Plugin Developer's Guide

Robert Buels edited this page Nov 20, 2019 · 10 revisions

This is an overview of how JBrowse 2 plugins work, and how to write them.

Plugins and the Plugin System

A plugin is primarily a bundle of "pluggable element types", which are the fundamental building blocks of JBrowse applications (such as JBrowse Desktop, JBrowse Embedded, etc).

Plugins all share a common architecture and plugin loading system, but a given plugin does not have to be designed to work in all JBrowse applications. JBrowse plugins are reusable packages that can be integrated in different ways to build applications.

Pluggable Element Types

Views

A View is a self-contained visualization of data. Many views have tracks (LinearGenomeView, CircularView), but some do not (SpreadsheetView). Some views contain other views within themselves. For example, BreakpointSplitView contains two or more LinearGenomeViews and displays connections between them.

Examples of views

  • LinearGenomeView
  • CircularView
  • BreakpointSplitView
  • SpreadsheetView
  • SvInspectorView

Adapters

A data adapter produces data (usually genome features, but not necessarily) that is consumed by other things. Examples of data adapters include the VcfTabixAdapter that reads features from Tabix-indexed VCF files, the BamAdapter that reads features from BAM files, and the SPARQLAdapter that reads features from SPARQL endpoints.

Examples of data adapters

  • VcfTabixAdapter
  • BamAdapter
  • BigBedAdapter
  • SPARQLAdapter

Connections

A connection is a package of track configurations, usually loaded from a remote source of configuration information such as a UCSC Track Hub or a JBrowse v1 installation.

Examples of connections

  • JBrowse1Connection
  • UCSCTrackHubConnection
  • TheTrackHubRegistryConnection

Renderers

A renderer produces a visualization of a set of data. It fetches data from a data adapter and produces a React element that visualizes that data.

Many of the renderers in JBrowse 2 are ServerSideRenderers, which do their data fetching and visualization work outside the main JavaScript process in a worker process (most often a Web Worker, but other worker types are supported).

Examples of renderers

  • PileupRenderer
  • SvgFeatureRenderer
  • LollipopRenderer
  • DivSequenceRenderer
  • Wiggle track renderers: DensityRenderer, LinePlotRenderer, XYPlotRenderer

Tracks

A track is a visualization of the data in a data adapter, drawn with a certain renderer. It is basically the "glue" that allows the results of a renderer to be displayed inside a view. Most tracks have a fixed kind of renderer and are configurable to use many different data adapters.

Examples of tracks

  • BasicTrack for LinearGenomeView
  • StructuralVariantChordTrack for CircularView

Drawer Widgets

A drawer widget is a UI element that lives in the "side drawer" of some JBrowse apps, such as JBrowse Desktop.

Examples of drawer widgets

  • BaseFeatureDrawerWidget - displays basic feature details
  • VariantFeatureDrawerWidget - variant-specific version of feature details
  • AlignmentsFeatureDrawerWidget - alignment-specific version of feature details
  • HierarchicalTrackSelectorDrawerWidget - turns tracks on and off in the view it's bound to
  • AddTrackDrawerWidget - wizard-like stepper UI for adding tracks to a dataset
  • AddConnectionDrawerWidget - wizard-like stepper UI for adding connections to a dataset

Menu Bars

Structure of a Plugin

TODO