Embedded (inline) plugin

JBrowse plugins extend the app with new track types, adapters, renderers, view types, and menu items. The simplest pattern: define a Plugin subclass in your own source and pass it directly to <JBrowse> via the plugins prop:

import Plugin from '@jbrowse/core/Plugin'

class MyPlugin extends Plugin {
  name = 'MyPlugin'
  install(pluginManager) {
    /* add track types, extension points, etc. */
  }
  configure() {}
}
;<JBrowse assemblies={assemblies} tracks={tracks} plugins={[MyPlugin]} />

This example registers a plugin that adds a “console.log the selected region” item to the linear genome view’s rubber-band menu — click and drag on the ruler to see it. NPM-published plugins look identical from your app’s perspective: import the class and pass it the same way.

Plugins can also be loaded from a URL at runtime. See the plugin development guide for authoring. Note: if you enable the web worker RPC, plugins must be registered in both the main thread and the worker.

Live demo

View source

import Plugin from '@jbrowse/core/Plugin'
import { JBrowse } from '@jbrowse/react-app2'

import { volvoxConfig } from '../volvoxConfig.ts'

import type PluginManager from '@jbrowse/core/PluginManager'
import type { PluggableElementType } from '@jbrowse/core/pluggableElementTypes'
import type ViewType from '@jbrowse/core/pluggableElementTypes/ViewType'

class HighlightRegionPlugin extends Plugin {
  name = 'HighlightRegionPlugin'

  install(pluginManager: PluginManager) {
    pluginManager.addToExtensionPoint<PluggableElementType>(
      'Core-extendPluggableElement',
      pluggableElement => {
        if (pluggableElement.name === 'LinearGenomeView') {
          const view = pluggableElement as ViewType
          const newStateModel = view.stateModel.extend(self => {
            const superItems = self.rubberBandMenuItems
            return {
              views: {
                rubberBandMenuItems() {
                  return [
                    ...superItems(),
                    {
                      label: 'Console log selected region',
                      onClick: () => {
                        const { leftOffset, rightOffset } = self
                        console.log(
                          JSON.stringify(
                            self.getSelectedRegions(leftOffset, rightOffset),
                          ),
                        )
                      },
                    },
                  ]
                },
              },
            }
          })
          view.stateModel = newStateModel
        }
        return pluggableElement
      },
    )
  }

  configure() {}
}

export default function EmbeddedPlugin() {
  return (
    <JBrowse
      assemblies={volvoxConfig.assemblies}
      tracks={volvoxConfig.tracks}
      plugins={[HighlightRegionPlugin]}
      views={[
        {
          type: 'LinearGenomeView',
          init: {
            assembly: 'volvox',
            loc: 'ctgA:1..50000',
            tracks: ['volvox_cram'],
          },
        },
      ]}
    />
  )
}