Plugins

Plugins defined inline or loaded from a URL.

Embedded (inline) plugin

Drag across the ruler, then pick Console log selected region. Writing your own: the plugin development guide.

View source — 73 lines

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

import type PluginManager from '@jbrowse/core/PluginManager'

const base = 'https://jbrowse.org/code/jb2/main/test_data/volvox'

const assemblies = [
  { name: 'volvox', uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit' },
]

const tracks = [
  {
    trackId: 'volvox_cram',
    name: 'volvox-sorted.cram',
    uri: `${base}/volvox-sorted.cram`,
  },
]

class HighlightRegionPlugin extends Plugin {
  name = 'HighlightRegionPlugin'

  install(pluginManager: PluginManager) {
    extendViewType(pluginManager, 'LinearGenomeView', stateModel =>
      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),
                      ),
                    )
                  },
                },
              ]
            },
          },
        }
      }),
    )
  }

  configure() {}
}

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

External plugin

Pass the records loadPlugins returns through unchanged. The RPC worker loads its own copy from each record’s definition, so mapping to p.plugin leaves the plugin on the main thread only. The plugin store lists published plugins.

View source — 55 lines

import {
  JBrowseApp,
  createViewStateAsync,
  loadPlugins,
  useCreateViewState,
} from '@jbrowse/react-app2'

const config = {
  assemblies: [
    {
      name: 'hg19',
      aliases: ['GRCh37'],
      uri: 'https://jbrowse.org/genomes/hg19/fasta/hg19.fa.gz',
      refNameAliases: {
        uri: 'https://jbrowse.org/genomes/hg19/hg19_aliases.txt',
      },
    },
  ],
  tracks: [
    {
      type: 'FeatureTrack',
      trackId: 'segdups_ucsc_hg19',
      name: 'UCSC SegDups',
      assemblyNames: ['hg19'],
      adapter: { type: 'UCSCAdapter', track: 'genomicSuperDups' },
    },
  ],
  defaultSession: {
    name: 'External plugin example',
    views: [
      {
        id: 'view1',
        type: 'LinearGenomeView',
        assembly: 'hg19',
        loc: '1:2,467,681..2,667,681',
        tracks: ['segdups_ucsc_hg19'],
      },
    ],
  },
}

export default function WithExternalPlugin() {
  const state = useCreateViewState(async () =>
    createViewStateAsync({
      config,
      plugins: await loadPlugins([
        {
          name: 'UCSC',
          url: 'https://unpkg.com/jbrowse-plugin-ucsc@^1/dist/jbrowse-plugin-ucsc.umd.production.min.js',
        },
      ]),
    }),
  )
  return state ? <JBrowseApp viewState={state} /> : null
}