@gmod/jbrowse

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Installing and writing plugins · JBrowse</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="# Plugins"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Installing and writing plugins · JBrowse"/><meta property="og:type" content="website"/><meta property="og:url" content="https://jbrowse.org/index.html"/><meta property="og:description" content="# Plugins"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/img/favicon.ico"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><link rel="alternate" type="application/atom+xml" href="https://jbrowse.org/blog/atom.xml" title="JBrowse Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://jbrowse.org/blog/feed.xml" title="JBrowse Blog RSS Feed"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><link rel="stylesheet" href="/css/main.css"/></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><h2 class="headerTitle">JBrowse</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/blog" target="_self">Blog</a></li><li class="siteNavGroupActive"><a href="/docs/installation.html" target="_self">Documentation</a></li><li class=""><a href="/en/demos.html" target="_self">Demos</a></li><li class=""><a href="/en/developers.html" target="_self">Developers</a></li><li class=""><a href="/en/contact.html" target="_self">Contact</a></li><li class=""><a href="/en/references.html" target="_self">References</a></li><li class=""><a href="/en/help.html" target="_self">Help</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Other topics</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">Tutorial</h3><ul><li class="navListItem"><a class="navItem" href="/docs/installation.html">Installation</a></li><li class="navListItem"><a class="navItem" href="/docs/tutorial.html">Indexed file formats tutorial</a></li><li class="navListItem"><a class="navItem" href="/docs/tutorial_classic.html">Classic quick-start guide</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Configuring tracks</h3><ul><li class="navListItem"><a class="navItem" href="/docs/reference_sequence.html">Reference sequence configuration</a></li><li class="navListItem"><a class="navItem" href="/docs/canvas_features.html">CanvasFeatures</a></li><li class="navListItem"><a class="navItem" href="/docs/html_features.html">HTMLFeatures</a></li><li class="navListItem"><a class="navItem" href="/docs/alignments.html">Alignments tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/bigwig.html">Wiggle/BigWig Tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/variants.html">VCF tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/minimal.html">Minimal JBrowse configurations</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Advanced configuration</h3><ul><li class="navListItem"><a class="navItem" href="/docs/embedding.html">Embedding JBrowse</a></li><li class="navListItem"><a class="navItem" href="/docs/mouse_configs.html">Mouse clicks, menus, and popups</a></li><li class="navListItem"><a class="navItem" href="/docs/configuration_file_formats.html">Configuration File Formats</a></li><li class="navListItem"><a class="navItem" href="/docs/dataset_selector.html">Dataset Selector</a></li><li class="navListItem"><a class="navItem" href="/docs/track_selectors.html">Track Selectors</a></li><li class="navListItem"><a class="navItem" href="/docs/track_metadata.html">Track Metadata</a></li><li class="navListItem"><a class="navItem" href="/docs/global_options.html">Global configuration options</a></li><li class="navListItem"><a class="navItem" href="/docs/compression.html">Compressing JBrowse data</a></li><li class="navListItem"><a class="navItem" href="/docs/authentication.html">HTTP authentication for JBrowse</a></li><li class="navListItem"><a class="navItem" href="/docs/paired_reads.html">Paired read viewing</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Command line</h3><ul><li class="navListItem"><a class="navItem" href="/docs/flatfile-to-json.pl.html">flatfile-to-json.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/remove-track.pl.html">remove-track.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/ucsc-to-json.pl.html">ucsc-to-json.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/generate-names.pl.html">generate-names.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/prepare-refseqs.pl.html">prepare-refseqs.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/biodb-to-json.pl.html">biodb-to-json.pl</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">JBrowse Desktop</h3><ul><li class="navListItem"><a class="navItem" href="/docs/jbrowse_desktop.html">JBrowse Desktop</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">FAQ</h3><ul><li class="navListItem"><a class="navItem" href="/docs/faq.html">JBrowse FAQ</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Other topics</h3><ul><li class="navListItem"><a class="navItem" href="/docs/url_strings.html">JBrowse URL parameters</a></li><li class="navListItem"><a class="navItem" href="/docs/image_tracks.html">Pre-rendered Image Tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/feature_coverage.html">Feature Coverage Tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/screenshots.html">Automating screenshots of JBrowse</a></li><li class="navListItem"><a class="navItem" href="/docs/events.html">JBrowse Subscribe/Publish events</a></li><li class="navListItem"><a class="navItem" href="/docs/perl_config.html">Sample configuration bash script</a></li><li class="navListItem"><a class="navItem" href="/docs/data_formats.html">JBrowse REST API and Data APIs</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/plugins.html">Installing and writing plugins</a></li><li class="navListItem"><a class="navItem" href="/docs/cors.html">Cross-origin resource sharing (CORS)</a></li><li class="navListItem"><a class="navItem" href="/docs/sparql.html">SPARQL configuration</a></li><li class="navListItem"><a class="navItem" href="/docs/data_export.html">Data export</a></li><li class="navListItem"><a class="navItem" href="/docs/usage_stats.html">Usage Statistics</a></li></ul></div></div></section></div><script> document.addEventListener('DOMContentLoaded', function() { createToggler('#navToggler', '#docsNav', 'docsSliderActive'); createToggler('#tocToggler', 'body', 'tocActive'); const headings = document.querySelector('.toc-headings'); headings && headings.addEventListener('click', function(event) { if (event.target.tagName === 'A') { document.body.classList.remove('tocActive'); } }, false); function createToggler(togglerSelector, targetSelector, className) { var toggler = document.querySelector(togglerSelector); var target = document.querySelector(targetSelector); toggler.onclick = function(event) { event.preventDefault(); target.classList.toggle(className); }; } }); </script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle">Installing and writing plugins</h1></header><article><div><span><h1><a class="anchor" aria-hidden="true" id="plugins"></a><a href="#plugins" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Plugins</h1> <p>More than 40 third-party plugins are available that extend or change JBrowse's functionality. For a list of them, see <a href="https://gmod.github.io/jbrowse-registry/">https://gmod.github.io/jbrowse-registry/</a>.</p> <h2><a class="anchor" aria-hidden="true" id="installing-plugins"></a><a href="#installing-plugins" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Installing Plugins</h2> <p>Plugins can be manually copied into the JBrowse `plugins` directory. For example, if you had a plugin called MyAwesomePlugin, you would install it by copying it into the JBrowse-1.x.x/plugins/MyAwesomePlugin directory.</p> <p><strong>Note:</strong> Beginning in JBrowse 1.13.0, you need to use the `*-dev.zip` build of JBrowse if you use any plugins beyond the default ones, and any time you add or change a plugin, you must re-run <code>setup.sh</code> to build the plugin's code into JBrowse.</p> <p>Also note that plugins that are installed are not necessarily activated for every configuration in a JBrowse installation, they are just available.</p> <h2><a class="anchor" aria-hidden="true" id="activating-plugins"></a><a href="#activating-plugins" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Activating Plugins</h2> <p>To activate a plugin, add a <code>plugins</code> configuration variable in your <code>jbrowse_conf.json</code> file in the top-level JBrowse directory, and add an entry telling JBrowse the names of the plugins to load.</p> <p>Example:</p> <pre><code class="hljs"> // array of strings (will look in JBrowse-1.x.x/plugins/MyAwesomePlugin) "plugins": [ 'MyAwesomePlugin' ] </code></pre> <p>or in the text .conf format:</p> <pre><code class="hljs">plugins = + MyAwesomePlugin + PubAnnotation </code></pre> <h2><a class="anchor" aria-hidden="true" id="writing-jbrowse-plugins"></a><a href="#writing-jbrowse-plugins" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Writing JBrowse Plugins</h2> <p>The JBrowse plugin system allows users to write their own JavaScript classes and <a href="https://github.com/amdjs/amdjs-api/wiki/AMD">AMD</a> modules to extend JBrowse in nearly any way imaginable. Just a few things that can be done by plugins:</p> <ul> <li>Add new data store adapters to allow JBrowse to read data from existing web services.</li> <li>Add new track classes for custom track displays and behavior (<a href="http://gmod.org/wiki/WebApollo">WebApollo</a> is one well-known plugin that does this).</li> <li>Add (or remove) options in the JBrowse dropdown menus.</li> <li>Add new types of track selectors.</li> </ul> <p>Also see this FAQ entry <a href="http://gmod.org/wiki/JBrowse_FAQ#How_do_I_create_a_plugin.3F">http://gmod.org/wiki/JBrowse_FAQ#How_do_I_create_a_plugin.3F</a> and <a href="http://gmod.org/wiki/JBrowse_FAQ#What_is_a_plugin_useful_for.3F">http://gmod.org/wiki/JBrowse_FAQ#What_is_a_plugin_useful_for.3F</a></p> <h3><a class="anchor" aria-hidden="true" id="plugin-components"></a><a href="#plugin-components" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Plugin Components</h3> <p>For an example plugin named MyPlugin, all of its files should be located in <code>plugins/MyPlugin</code> in the main JBrowse directory. There are no restrictions on what a plugin directory may contain.</p> <p>A plugin is required to have a <code>plugins/MyPlugin/js/main.js</code> file, which is an AMD module that returns a JavaScript "class" that inherits from the JBrowse/Plugin class. JBrowse will create one instance of this class, which will persist during the entire time JBrowse is running. This class's constructor function is the entry point for your plugin's JavaScript code.</p> <p>If a plugin contains custom CSS rules, it can optionally have a <code>plugins/MyPlugin/css/main.css</code> file as well, which JBrowse will load asynchronously. If your plugin code needs to know when the CSS is finished loading, the <code>cssLoaded</code> property of the plugin object contains a <a href="http://dojotoolkit.org/api/1.8/dojo/Deferred">Dojo Deferred</a> that is resolved when the CSS load is complete. Multiple CSS files can be loaded using <code>@import</code> statements in the <code>main.css</code>.</p> <p>JBrowse also defines an AMD namespace that maps to your plugin's <code>js</code> directory, which your plugin code (and JBrowse itself) can use to load additional AMD modules and JavaScript classes. For example, our MyPlugin example could have a data-store adaptor in the file <code>plugins/MyPlugin/js/Store/SeqFeature/FooBaseServices.js</code>, which would be loaded with the module name <code>"MyPlugin/Store/SeqFeature/FooBaseServices"</code>.</p> <h4><a class="anchor" aria-hidden="true" id="example-mainjs"></a><a href="#example-mainjs" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example <code>main.js</code></h4> <p>Here is an example plugin <code>main.js</code>, implemented using the <a href="http://dojotoolkit.org/documentation/tutorials/1.8/declare/">Dojo declare</a> class system.</p> <pre><code class="hljs css languages- {.javascript}">define([ <span class="hljs-string">'dojo/_base/declare'</span>, <span class="hljs-string">'JBrowse/Plugin'</span> ], <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> <span class="hljs-keyword">declare</span>, JBrowsePlugin </span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-keyword">declare</span>( JBrowsePlugin, { <span class="hljs-keyword">constructor</span>: function(<span class="hljs-params"> args </span>) { <span class="hljs-keyword">var</span> browser = <span class="hljs-keyword">this</span>.browser; <span class="hljs-comment">/* do anything you need to initialize your plugin here */</span> } }); }); </code></pre> <h4><a class="anchor" aria-hidden="true" id="example-plugin-directory-contents"></a><a href="#example-plugin-directory-contents" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example plugin directory contents</h4> <p>plugins/MyPlugin/js plugins/MyPlugin/js/main.js plugins/MyPlugin/js/MyPlugin.profile.js plugins/MyPlugin/css plugins/MyPlugin/css/main.css plugins/MyPlugin/img plugins/MyPlugin/img/myimage.png plugins/MyPlugin/js</p> <p>The bin/new-plugin.pl will initialize a directory structure for you, e.g. run</p> <pre><code class="hljs">bin/new-plugin.pl MyPlugin </code></pre> <h3><a class="anchor" aria-hidden="true" id="distributing-plugins-via-npm"></a><a href="#distributing-plugins-via-npm" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Distributing plugins via npm</h3> <p>Distributing a plugin via npm JBrowse 1.13.0 and higher can also use plugins that are distributed via npm. To distribute your plugin on npmjs.org, you just need to add a package.json file to the top-level directory of your plugin, and your plugin's npm package name must end in '-jbrowse-plugin'. Note that the plugin is named "my-jbrowse-plugin" on npm, and includes a "jbrowsePlugin"</p> <p>Here is an example package.json file for MyPlugin:</p> <pre><code class="hljs">{ "name": "my-jbrowse-plugin", "version": "1.0.0", "description": "JBrowse client plugin for adding amazing things", "main": "js/main.js", "author": "Josephina Example", "license": "SEE LICENSE FILE IN LICENSE.md", "dependencies": { }, "devDependencies": { }, "repository": { "type": "git", "url": "git+https://github.com/josephina/myplugin.git" }, "keywords": [ "genome", "jbrowse" ], "bugs": { "url": "https://github.com/josephina/myplugin/issues" }, "homepage": "https://github.com/josephina/myplugin#readme", "jbrowsePlugin": { "name": "MyPlugin" } } </code></pre> <h3><a class="anchor" aria-hidden="true" id="other-useful-classes"></a><a href="#other-useful-classes" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Other useful classes</h3> <p>Implementers of plugins can extend different parts of JBrowse. Three track lists are currently implemented: <code>JBrowse/View/TrackList/Simple</code>, <code>JBrowse/View/TrackList/Hierarchical</code>, and <code>JBrowse/View/TrackList/Faceted</code>.</p> <p>The Hierarchical and Faceted track lists use the track metadata store (<code>JBrowse/Store/TrackMetaData</code>), which is instantiated and kept by the Browser object, for access to track metadata (defined as specified in the “Data Sources” section). In particular, the category used by the hierarchical track selector is a piece of track metadata called “category”.</p> <p>The <code>JBrowse/GenomeView</code> class manages the main genome view, where the tracks are displayed (see Figure 1). It manages showing and hiding tracks, reordering them, scrolling and zooming, and so forth.</p> <p>Track objects query data from a feature store, and draw it in the GenomeView pane. The implementations are in <code>JBrowse/View/Track/</code> for which the base class is <code>JBrowse/View/Track/BlockBased</code>.</p> <p>CanvasFeatures tracks use various glyph subclasses, locatable in the <code>JBrowse/View/FeatureGlyph/</code> directory and inheriting from the base class <code>JBrowse/View/FeatureGlyph</code>.</p> </span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/data_formats.html">← JBrowse REST API and Data APIs</a><a class="docs-next button" href="/docs/cors.html">Cross-origin resource sharing (CORS) →</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#installing-plugins">Installing Plugins</a></li><li><a href="#activating-plugins">Activating Plugins</a></li><li><a href="#writing-jbrowse-plugins">Writing JBrowse Plugins</a><ul class="toc-headings"><li><a href="#plugin-components">Plugin Components</a></li><li><a href="#distributing-plugins-via-npm">Distributing plugins via npm</a></li><li><a href="#other-useful-classes">Other useful classes</a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/blog">Blog</a><a href="/docs/tutorial.html">Getting Started</a></div><div><h5>Community</h5><a href="https://gitter.im/GMOD/jbrowse">Project Chat</a><a href="https://twitter.com/JBrowseGossip" target="_blank" rel="noreferrer noopener">Twitter</a></div><div><h5>More</h5><a href="https://github.com/GMOD/jbrowse">GitHub</a><a class="github-button" href="https://github.com/GMOD/jbrowse" data-icon="octicon-star" data-count-href="/GMOD/jbrowse/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><section class="copyright">Copyright © 2019 Evolutionary Software Foundation</section></footer></div></body></html>