@gmod/jbrowse
Version:
JBrowse - client-side genome browser
1,345 lines • 171 kB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>JBrowse FAQ · JBrowse</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## General"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="JBrowse FAQ · JBrowse"/><meta property="og:type" content="website"/><meta property="og:url" content="https://jbrowse.org/index.html"/><meta property="og:description" content="## General"/><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>FAQ</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 navListItemActive"><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"><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">JBrowse FAQ</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="general"></a><a href="#general" 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>General</h2>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-get-started-with-jbrowse-quickly"></a><a href="#how-do-i-get-started-with-jbrowse-quickly" 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>How do I get started with JBrowse quickly</h3>
<pre><code class="hljs">git clone https://github.com/gmod/jbrowse
./setup.sh
npm run start
</code></pre>
<p>See <a href="https://github.com/gmod/jbrowse#install-jbrowse-from-github-for-developers">https://github.com/gmod/jbrowse#install-jbrowse-from-github-for-developers</a> for details</p>
<p>Using <code>npm run start</code> launches an express.js server on port 8082</p>
<p>You can also just copy and paste your entire jbrowse directory that you cloned into your webserver folder if you have an existing apache or nginx server</p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-use-plugins-with-jbrowse"></a><a href="#how-do-i-use-plugins-with-jbrowse" 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>How do I use plugins with JBrowse</h3>
<p>In JBrowse 1.13.0 and later, you must rebuild JBrowse</p>
<ul>
<li>download the "-dev" version of JBrowse (or use a git clone, this is equivalent)</li>
<li>put the plugin(s) in the plugins folder</li>
<li>run ./setup.sh</li>
</ul>
<p>This will build the plugins properly. The ./setup.sh automatically downloads the npm modules needed for building the codebase.</p>
<p>Reason: JBrowse switched to a webpack based build system in 1.13.0 which bundles all dependencies at build time so there is no notion of run-time module resolution</p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-modify-jbrowse-source-code"></a><a href="#how-do-i-modify-jbrowse-source-code" 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>How do I modify JBrowse source code</h3>
<p>In modify JBrowse source code you must use <code>npm run watch</code> (equivalently <code>yarn watch</code>) to watch for changes to the codebase</p>
<p>This uses <code>webpack -w</code> in the background to dynamically include your changes as you are developing.</p>
<p>When you are done modifying the source code, use ./setup.sh to create a minified final build.</p>
<p>Note: this applies to JBrowse core and for plugins, as plugins will also be watched by this process.</p>
<p>Also note: if you add or remove files, you should kill the watch process and restart</p>
<h3><a class="anchor" aria-hidden="true" id="what-webserver-is-needed-for-jbrowse"></a><a href="#what-webserver-is-needed-for-jbrowse" 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>What webserver is needed for JBrowse</h3>
<p>Most established HTTP servers such as Apache or nginx can work. You can
just unpack JBrowse into your http web directory (/var/www/html, or
htdocs, or similar) and follow the setup instructions
<a href="http://jbrowse.org/code/JBrowse-1.12.1/docs/tutorial/">http://jbrowse.org/code/JBrowse-1.12.1/docs/tutorial/</a>.</p>
<p>JBrowse also comes bundled with an express.js server that works for most
purposes. You can use <code>npm run start</code> to start the server on port 8082.</p>
<p>Other configuration about your server will depend on your needs, but
generally no special setup is needed for the http server, and there is
no "server side" code used by JBrowse (cgi, php, etc).</p>
<p>Note: servers like "SimpleHTTPServer" from Python or "http-server" from
NPM are generally not full featured enough to run all JBrowse features
correctly (SimpleHTTPServer does not support Range queries, and
http-server interprets tabix files incorrectly). RangeHTTPServer does
pass the test suite for jbrowse though, so it should work for tests
<a href="https://github.com/danvk/RangeHTTPServer">https://github.com/danvk/RangeHTTPServer</a> (but not for compressed json
files).</p>
<p>Also note: sometimes, people will download JBrowse and double click the
html file and open up <file:///c/myfolder/jbrowse/index.html> in the
webbrowser, however, running JBrowse like this is not recommended. This
may appear to work for some limited cases but will fail on many others.
You can use JBrowse Desktop if you want to use jbrowse locally without a
webserver.</p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-run-the-code-using-the-github-clone"></a><a href="#how-do-i-run-the-code-using-the-github-clone" 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>How do I run the code using the github clone</h3>
<p>Running code off github is fairly straightforward, and you can actually
run it on your webserver without any build steps</p>
<pre><code class="hljs"> git clone <http<span class="hljs-variable">s:</span>//github.<span class="hljs-keyword">com</span>/gmod/jbrowse>
<span class="hljs-keyword">cd</span> jbrowse
./setup.<span class="hljs-keyword">sh</span>
</code></pre>
<p>Then move that directory into your web server root and you are ready to
go.</p>
<p>Note: If you want to make your own custom build you can use</p>
<p><code>make -f build/Makefile release</code></p>
<p>Also also note: post 1.13.0 releases of JBrowse will automatically
create a minified custom build when you run ./setup.sh if you have a
-dev release or a github clone.</p>
<h3><a class="anchor" aria-hidden="true" id="what-are-the-different-config-file-formats"></a><a href="#what-are-the-different-config-file-formats" 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>What are the different config file formats?</h3>
<p>JBrowse uses both json and ".conf" files for configuration (the .conf is
a custom format that is parsed on the client side), and both file types
can contain the same types of information</p>
<p>Examples of JSON format</p>
<ul>
<li>trackList.json</li>
<li>jbrowse_conf.json</li>
</ul>
<p>Examples of conf format</p>
<ul>
<li>tracks.conf</li>
<li>jbrowse.conf</li>
</ul>
<p>If you wonder why you would use the .conf format, some benefits include:
easy to edit, easy to append to with text file tools, can define
multi-line functions (JSON doesn't allow newlines, so callbacks are
specified on a single line).</p>
<p>All the config files are combined using a system of "includes" at
runtime. The "order" behind loading all the config files is something
like this:</p>
<ol>
<li>The index.html initializes a global Browser object, and the
paramaters to the constructor are used as the start of the config</li>
<li>The Browser class "includes" both jbrowse_config.json and
jbrowse.conf using defaultConfig</li>
<li>The jbrowse.conf by default includes both {dataRoot}/trackList.json
and {dataRoot}/tracks.conf, which resolves to whatever data
directory is currently being used</li>
<li>The trackList.json or tracks.conf files can themselves include other
files, such as a "functions.conf" file</li>
</ol>
<h3><a class="anchor" aria-hidden="true" id="what-type-of-coordinate-system-does-jbrowse-use"></a><a href="#what-type-of-coordinate-system-does-jbrowse-use" 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>What type of coordinate system does JBrowse use</h3>
<p>Internally it uses 0-based coordinates</p>
<p>When you view the data (like in the view details popups, and in their
position on the browser) it is 1-based.</p>
<p>The functions like feature.get('start') would return 0-based.</p>
<h3><a class="anchor" aria-hidden="true" id="what-is-the-difference-between-canvasfeatures-and-htmlfeatures"></a><a href="#what-is-the-difference-between-canvasfeatures-and-htmlfeatures" 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>What is the difference between CanvasFeatures and HTMLFeatures?</h3>
<p>There are a lot of differences!</p>
<ul>
<li>CanvasFeatures are newer.</li>
<li>CanvasFeatures can support Gene glyphs, i.e., a gene with multiple
transcripts are grouped together on the screen. In HTMLFeatures, you
have to load at the "transcript" level, so this loses the gene level
info (if you do try to load the --type gene, it will just load "gene
spans", but then it doesn't display the transcript subfeatures. not
terrible, but not as cool as CanvasFeatures).</li>
<li>CanvasFeatures are faster if your have a lot of data.</li>
<li>They can support more dynamic shapes (See the SashimiPlot plugin
<a href="https://github.com/cmdcolin/sashimiplot">https://github.com/cmdcolin/sashimiplot</a> for example of Arc track,
or NeatCanvasFeatures for example of "intron hats")</li>
<li>They have different configuration functions. All the "style" methods
on CanvasFeatures can be callback functions, so you can have a
dynamic callback for the feature color, label, etc. The "glyph" can
also be a callback, so you can make a function to change to a box or
diamond glyph depending on feature attributes.</li>
<li>CanvasFeatures have better mouseovers. The HTMLFeatures mouseovers
use the HTML title attribute which can only display plain text. On
CanvasFeatures tracks, the mouseover it is a real tooltip that you
can embed arbitrary HTML inside of.</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="what-is-a-glyph"></a><a href="#what-is-a-glyph" 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>What is a glyph?</h3>
<p>Glyphs are a "unit" of drawing in a CanvasFeatures track. The glyph is
just code that is responsible for drawing a feature on the screen.</p>
<h3><a class="anchor" aria-hidden="true" id="what-does-generate-namespl-do"></a><a href="#what-does-generate-namespl-do" 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>What does generate-names.pl do?</h3>
<p>Generate-names.pl will create a "search index" on, by default, the
"names, IDs, and Alias" fields for tracks loaded with
flatfile-to-json.pl or biodb-to-json.pl. It will not try to index ids
from BAM files or bigwigs, but it does index names from VCF files too.</p>
<p>You can select specific tracks that you want to index with --tracks
arguments to generate-names.pl. You can disable "autocomplete" by
setting --completetionLimit 0 on generate-names.pl. You can "update"
your search index by using --incremental</p>
<p>Also note: you can index additional fields of a GFF file with
generate-names.pl by specifying the --nameAttributes flag to
flatfile-to-json.pl. E.g. flatfile-to-json.pl --nameAttributes
"my_custom_field,name,id". The default value for this flag is
"name,alias,id". Note that the flag is passed to flatfile-to-json.pl and
then these values are automatically indexed by generate-names.pl later.</p>
<h3><a class="anchor" aria-hidden="true" id="what-is-the-label-in-tracklistjson-and-what-is-the-key"></a><a href="#what-is-the-label-in-tracklistjson-and-what-is-the-key" 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>What is the "label" in trackList.json and what is the key?</h3>
<p>The track "label" is more like the track "identifier", it should be
unique! The key is actually more like the name that is displayed for
the track. It might sound counter intuitive to have label and key this
way. Key is not a required attribute, but label is. The label can be
specified by --trackLabel on command line tools. The key can be
specified by --key.</p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-search-for-a-feature-in-jbrowse"></a><a href="#how-do-i-search-for-a-feature-in-jbrowse" 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>How do I search for a feature in JBrowse</h3>
<p>Some people don't know this, but the box that shows your current
location, e.g. "chr10:1..1000 (1.0 Kb)" is also a search box! You can
search for things that generate-names.pl indexed here.</p>
<p>Also, the search index can be used to "link" to features, for example,
if you construct a link such as <a href="http://localhost/jbrowse/?loc=GENE1234">http://localhost/jbrowse/?loc=GENE1234</a></p>
<p>Then the search index will resolve the location of that gene and jump to
it automatically.</p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-get-full-text-descriptions-to-be-searched"></a><a href="#how-do-i-get-full-text-descriptions-to-be-searched" 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>How do I get full text descriptions to be searched?</h3>
<p>Try out
<a href="https://github.com/cmdcolin/jbrowse_elasticsearch">jbrowse_elasticsearch</a>,
it is still experimental but it allows this. Or, implement your own
JBrowse REST names API. The default generate-names.pl is not built for
searching full text descriptions.</p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-set-up-multiple-genomes-in-a-single-jbrowse-instance"></a><a href="#how-do-i-set-up-multiple-genomes-in-a-single-jbrowse-instance" 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>How do I set up multiple genomes in a single jbrowse instance?</h3>
<p>By default, the scripts will output to a subdirectory called "data" in
the jbrowse folder</p>
<p>You can control that output with most scripts using the --out parameter.
This enables you to have "multiple data directories".</p>
<p>Once the data directories are ready then use the URL bar to select which
data directory to use with ?data=my_data_dir e.g.</p>
<p><a href="http://mysite.org/jbrowse/?data=data1">http://mysite.org/jbrowse/?data=data1</a>
<a href="http://mysite.org/jbrowse/?data=data2">http://mysite.org/jbrowse/?data=data2</a></p>
<p>Note that with <a href="http://genomearchitect.org">Apollo</a>, you can output the
data directories to some given directory and add the directories via the
user interface.</p>
<p>You can also setup the "dataset selector" see <a href="dataset_selector.html">dataset selector</a> and <a href="#what-is-the-dataset-selector">below</a></p>
<h3><a class="anchor" aria-hidden="true" id="what-is-the-dataset-selector"></a><a href="#what-is-the-dataset-selector" 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>What is the dataset selector</h3>
<p>The dataset selector is a dropdown that can list all the genomes that
are in your jbrowse instance</p>
<p>To configure the dataset selector, set a dataset_id inside your
trackList.json or tracks.conf on your data directory, and then in
jbrowse.conf, add a list of all your datasets with the dataset_ids that
you listed in the genome's data directory.</p>
<p>See <a href="dataset_selector.html">dataset selector</a></p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-change-the-name-that-is-displayed-on-my-features"></a><a href="#how-do-i-change-the-name-that-is-displayed-on-my-features" 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>How do I change the name that is displayed on my features</h3>
<p>If you don't like the names in the "Name" or "ID" column of your GFF,
and you instead want to use some other field as the name to be
displayed, then you can add this to your trackList.json</p>
<p><code>"style": {"label": "my_custom_field"}</code></p>
<p>Note: you can also index "my_custom_field" with generate-names.pl too
by supplying my_custom_field to the --nameAttributes argument from
flatfile-to-json.pl. After loading it from flatfile-to-json.pl in that
manner, it will be indexed by generate-names.pl.</p>
<p>Also note: you can make the description a custom field too in a similar
way</p>
<p><code>"style": {"description": "my_custom_description_field"}</code></p>
<h3><a class="anchor" aria-hidden="true" id="can-i-speed-up-jbrowse-load-time-with-vcf-and-bam-files"></a><a href="#can-i-speed-up-jbrowse-load-time-with-vcf-and-bam-files" 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>Can I speed up JBrowse load time with VCF and BAM files</h3>
<p>If the BAM and VCF files you have are large, the BAM index or TABIX
index files can become large as well. Since the indexes must be fully
downloaded before any of the data can be displayed, you can break your
files up by chromosomes, and use {refseq} in a urlTemplate to break it
up into manageable chunks.</p>
<p>E.g.</p>
<p><code>"urlTemplate": "myfile_{refseq}.bam"</code></p>
<p>That would search for myfile_chr1.bam and myfile_chr1.bam.bai when you
open that track while browsing chr1</p>
<h3><a class="anchor" aria-hidden="true" id="can-i-speed-up-generate-namespl"></a><a href="#can-i-speed-up-generate-namespl" 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>Can I speed up generate-names.pl?</h3>
<p>Try using --completionLimit 0 with the command. It will disable
autocompletion but still allow you to search exact matches.</p>
<p>Note that you can use generate-names with --completionLimit 20 on some
tracks and then generate-names with both --incremental and
--completionLimit 0 flags on very information dense tracks.</p>
<h2><a class="anchor" aria-hidden="true" id="customization"></a><a href="#customization" 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>Customization</h2>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-customize-feature-colors-with-canvasfeatures"></a><a href="#how-do-i-customize-feature-colors-with-canvasfeatures" 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>How do I customize feature colors (with CanvasFeatures)</h3>
<p>In CanvasFeatures, this is done with the style->color parameter. The
style->color parameter can be a function, so for example, if you have a
track like this in trackList.json</p>
<pre><code class="hljs"> {
<span class="hljs-attr">"label"</span>: <span class="hljs-string">"test"</span>,
<span class="hljs-attr">"type"</span>: <span class="hljs-string">"CanvasFeatures"</span>,
<span class="hljs-attr">"storeClass"</span>: <span class="hljs-string">"JBrowse/Store/SeqFeature/NCList"</span>,
<span class="hljs-attr">"style"</span> : {
<span class="hljs-attr">"className"</span> : <span class="hljs-string">"feature"</span>
}
}
</code></pre>
<p>Then you can add a color like this</p>
<pre><code class="hljs"> {
<span class="hljs-attr">"label"</span>: <span class="hljs-string">"test"</span>,
<span class="hljs-attr">"type"</span>: <span class="hljs-string">"CanvasFeatures"</span>,
<span class="hljs-attr">"storeClass"</span>: <span class="hljs-string">"JBrowse/Store/SeqFeature/NCList"</span>,
<span class="hljs-attr">"style"</span>: {
<span class="hljs-attr">"color"</span>: <span class="hljs-string">"function(feature) { return 'red'; }"</span>,
<span class="hljs-attr">"className"</span>: <span class="hljs-string">"feature"</span>
}
}
</code></pre>
<p>This will make your features red. You can also hardcode a color instead
of a callback</p>
<pre><code class="hljs"> <span class="hljs-string">"style"</span>: {
<span class="hljs-string">"color"</span>: <span class="hljs-string">"red"</span>
}
</code></pre>
<p>It can be dynamic too though</p>
<pre><code class="hljs"> <span class="hljs-string">"style"</span>: <span class="hljs-type"></span>{
<span class="hljs-string">"color"</span>: <span class="hljs-type"></span>"<span class="hljs-function"><span class="hljs-keyword">function</span></span>(feature) { <span class="hljs-keyword">return</span> feature.<span class="hljs-keyword">get</span>(<span class="hljs-string">'score'</span>)><span class="hljs-number">50</span> ?<span class="hljs-string">'blue'</span>:<span class="hljs-type"></span>'red<span class="hljs-string">'; }"
}
</span></code></pre>
<p>The color can be a name or rgb(...) or hsl(...). rgba works too</p>
<p>Note: if you get a very complex function, consider putting it in a
separate functions.conf file and include it, see config guide "Including
external functions in trackList.json"</p>
<p>Note: with HTMLFeatures, it is similar, but you have to use
hooks->modify instead of style->color.</p>
<p>Also note: you cannot create the functions via the UI in "Edit config".
You have to specify the callback functions via the config files
themselves.</p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-add-a-legend-to-the-track-in-the-about-this-track-dialog"></a><a href="#how-do-i-add-a-legend-to-the-track-in-the-about-this-track-dialog" 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>How do I add a legend to the track in the "About this track" dialog?</h3>
<p>You can add custom info to the "About this track" dialog boxes by
specifying metadata for the track in trackList.json, e.g.</p>
<p><code>"metadata": {"legend": "Red means this, green means that"}</code></p>
<p>This will create a box called "legend" inside the "About this track"
box.</p>
<p>All the "metadata" fields are added to the "About this track" dialog
box, and it can also support HTML,
e.g</p>
<p><code>"metadata": {"randominfo": "<p style='color:green'>Green text</p>", "otherrandominfo": "<p style='color:red'>Red text</p>"}</code></p>
<p>You can also use the fmtDetailMeta and fmtFieldMeta callback functions
to change pre-existing values
<a href="http://gmod.org/wiki/JBrowse_Configuration_Guide#Additional_customizations_to_the_pop-up_boxes">http://gmod.org/wiki/JBrowse_Configuration_Guide#Additional_customizations_to_the_pop-up_boxes</a></p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-customize-the-dialog-boxes-for-the-features"></a><a href="#how-do-i-customize-the-dialog-boxes-for-the-features" 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>How do I customize the dialog boxes for the features?</h3>
<p>There are many ways to do so.</p>
<ol>
<li>To customize the default 'View details' type popups, you can
override fields by adding a function to your track config like
fmtDetailValue_Name: "function(value, feature) { return value + '
is the original name'; }"</li>
<li>To make a different custom action for a dialog, make
onClick->action a javascript callback and make it popup your own
custom dialog box, made using dijit or any other javascript type
language. The function would have the format function(clickEvent)
but you can access feature information from this.feature inside the
callback</li>
<li>Set action: "newWindow" and url:
"<a href="http://google.com/?q=%7Bname%7D">http://google.com/?q={name}</a>" can
redirect to search google for the feature's name (note: the {name}
is a template parameter that is automatically filled out when a
feature is clicked)</li>
<li>Set action: "iframeDialog" and url:
"<a href="http://google.com?q=%7Bname%7D">http://google.com?q={name}</a>"</li>
<li>Set onClick->action to contentDialog and then set onClick->content
to a string or a functioning returning a string or a "promise". A
promise can come from calling dojo.xhrGet or similar so it can
retrieve dynamic content. The function would have the parameters
function(track, feature)</li>
</ol>
<p>Those are just a couple examples</p>
<p>More straightforwardly, basically any field that exists for the feature
(e.g. all the things in column 9 for a GFF) will be added to the default
"View details" boxes, so it you add more details to the GFF3 column 9,
then your popups will have more information.</p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-customize-the-main-menu-bar"></a><a href="#how-do-i-customize-the-main-menu-bar" 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>How do I customize the main menu bar</h3>
<p>Typically this is done using a plugin. You can make your plugin add new
menu items. See the RegexSequenceSearch plugin for an example
<a href="https://github.com/GMOD/jbrowse/blob/master/plugins/RegexSequenceSearch/js/main.js#L23-L30">https://github.com/GMOD/jbrowse/blob/master/plugins/RegexSequenceSearch/js/main.js#L23-L30</a></p>
<p>You can also create a new "menu" i.e. (default says file, view, help)
and you can extend it to use (file, view, tools, help) or similar. The
GMOD/Apollo codebase does this
<a href="https://github.com/GMOD/Apollo/blob/master/client/apollo/js/main.js#L368-L379">https://github.com/GMOD/Apollo/blob/master/client/apollo/js/main.js#L368-L379</a></p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-customize-the-track-menu-on-a-track"></a><a href="#how-do-i-customize-the-track-menu-on-a-track" 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>How do I customize the "track menu" on a track?</h3>
<p>In general, you would want to make a new "track type", you can override
_trackMenuOptions on your custom track type. See
<a href="https://github.com/cmdcolin/gccontent/blob/master/js/View/Track/GCContentXY.js">https://github.com/cmdcolin/gccontent/blob/master/js/View/Track/GCContentXY.js</a>
for example</p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-customize-the-right-click-menus-on-features"></a><a href="#how-do-i-customize-the-right-click-menus-on-features" 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>How do I customize the right-click menus on features</h3>
<p>You can edit the menuTemplate parameters on the trackList.json.</p>
<p>Note: when you add 1 method to menuTemplate, it overwrites 1 of the
default elements in the default right-click menu. This is sort of a bug.
If you want to "add" your method to the list, then create a "blank"
menuTemplate items for the View details, etc. See
<a href="mouse_configs.html#customizing-right-click-context-menus">customizing right click context menus</a>
for more details.</p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-access-data-about-my-features-in-my-callback-or-plugin"></a><a href="#how-do-i-access-data-about-my-features-in-my-callback-or-plugin" 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>How do I access data about my features in my callback or plugin</h3>
<p>Each feature is based on what is called a feature Model. The
JBrowse/Model/SimpleFeature is an example of this, and it allows you to
call feature.get('variable_of_interest') on many different variables</p>
<p>Common types of requests</p>
<ul>
<li>feature.get('subfeatures') - to get all subfeatures of a feature.</li>
<li>feature.get('parent') - for the parent of a feature</li>
<li>feature.get('id') - for the ID</li>
<li>feature.get('name') - for the name</li>
<li>feature.get('my_gff_field') - to get any given field from your
GFF3 column 9</li>
<li>feature.get('genotypes') - to get the genotypes of a VCF feature, it
returns a complex object that you can inspect. See
"variantIsHeterozygous" in the jbrowse configuration guide for an
example of parsing the genotype</li>
<li>feature.get('start') - to get start position</li>
<li>feature.get('end') - to get end position</li>
<li>feature.get('seq_id') - to get the chromosome name</li>
<li>feature.get('seq') - to get the sequence, only works on BAM data
since it includes sequence data in data file. In general, you must
use getReferenceSequence over a region to get a feature's sequence</li>
</ul>
<p>Note that if you have multiple values for a value in column 9 (specified
by comma separated values), then feature.get('your_value') will return
an array (except for for Note which turns into Note, Note2, Note3, etc)</p>
<p>For reference JBrowse/Model/SimpleFeature is a widely used feature
class. The BAM features for example use a different model because they
must be smaller and quicker to operate at speed (they are called Lazy
features, so not all their info is evaluated unless it is needed
on-demand). BAM features also have things like feature.get('seq'), to
get the sequence of the alignments, but normal features like genes do
not have
feature.get('seq')</p>
<h3><a class="anchor" aria-hidden="true" id="how-to-get-default-tracks-to-display-every-time-a-user-opens-the-browser"></a><a href="#how-to-get-default-tracks-to-display-every-time-a-user-opens-the-browser" 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>How to get default tracks to display every time a user opens the browser?</h3>
<p>There are several config variables which you can define in any of your
config files (trackList.json for example can have config items like
this, just put it outside of the track section of tracklist.json, or
under a [general] section of tracks.conf) as a comma separated list of
track labels</p>
<ul>
<li>alwaysOnTracks: Track always come up</li>
<li>forceTracks: Overridden by URL bar</li>
<li>defaultTracks: Overridden by URL bar and cookies</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="how-can-i-embed-jbrowse-on-a-page"></a><a href="#how-can-i-embed-jbrowse-on-a-page" 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>How can I embed JBrowse on a page</h3>
<p>The easiest way to "embed jbrowse" on another page would be to use an
iframe to link to the jbrowse instance of choice e.g.
<a href="http://gmod.org/wiki/JBrowse_Configuration_Guide#Embedded_mode">http://gmod.org/wiki/JBrowse_Configuration_Guide#Embedded_mode</a></p>
<p>Note that it is also possible in theory (and sometimes in practice) to
embed JBrowse without an iframe. For example, you can take the
index.html of JBrowse and customize it for your purposes. You can for
example change the GenomeBrowser div to not have 100% width and height,
and instead make it have width 1000px and height 800px for example and
put it in a specific part of your webpage.</p>
<p>The problem with embedding without iframe is typically that you can
easily run into issues with "CSS collisions" where the CSS from your
specific page collides with jbrowse elements, of CSS from jbrowse
elements collides with your outside
page.</p>
<h3><a class="anchor" aria-hidden="true" id="can-i-change-the-color-of-bases-in-the-sequence-alignments2-snpcoverage-tracks"></a><a href="#can-i-change-the-color-of-bases-in-the-sequence-alignments2-snpcoverage-tracks" 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>Can I change the color of bases in the Sequence/Alignments2/SNPCoverage tracks?</h3>
<p>Yes. It is sort of a "hidden setting", but you can actually change
colors on the Sequence/Alignments2/SNPCoverage track using CSS</p>
<p>See
css/sequence.css:</p>
<pre><code class="hljs"><span class="hljs-comment">/* colors for bases must be specified as hex or rgb/hsl strings, no named colors such as 'red' */</span>
<span class="hljs-selector-class">.base_n</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#C6C6C6</span>;
}
<span class="hljs-selector-class">.base_a</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#00BF00</span>;
}
<span class="hljs-selector-class">.base_c</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#4747ff</span>;
}
<span class="hljs-selector-class">.base_t</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f00</span>;
}
<span class="hljs-selector-class">.base_g</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#d5bb04</span>;
}
<span class="hljs-selector-class">.base_reference</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#a33</span>;
}
<span class="hljs-selector-class">.base_deletion</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#999</span>;
}
</code></pre>
<p>If you change those, it will be reflected in your
Sequence/Alignments2/SNPCoverage track.</p>
<p>The .base_reference is the background grey of the SNPCoverage plot, and
if you actually add to the list and make .base_skip you can make the
intron grey change color SNPCoverage.</p>
<h3><a class="anchor" aria-hidden="true" id="how-can-i-link-blast-results-to-jbrowse"></a><a href="#how-can-i-link-blast-results-to-jbrowse" 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>How can I link BLAST results to JBrowse</h3>
<p>If you use sequenceserver, you create a custom JBrowse link by creating
a links.rb file and running</p>
<p><code>sequenceserver -D database_dir -r links.rb</code></p>
<p>The links.rb is then a file that gets included by sequenceserver to
generate new links to external resources automatically. In our case, we
parse all the HSPs (high scoring pairs) from the hits from BLAST and
string them together into a single feature (e.g. by taking the min and
max of all hsps)</p>
<p>Note: The links.rb passes us the accession and hsps variables
implicitely. The notation for the query start/end and subject start/end
are shortened as qend, send, sstart, and qstart</p>
<p>We use the addFeatures URL parameter of JBrowse to make the features
appear. For reference, see
<a href="http://gmod.org/wiki/JBrowse_Configuration_Guide#Controlling_JBrowse_with_the_URL_Query_String">http://gmod.org/wiki/JBrowse_Configuration_Guide#Controlling_JBrowse_with_the_URL_Query_String</a></p>
<pre><code class="hljs"><span class="hljs-keyword">require</span> <span class="hljs-string">'json'</span>
<span class="hljs-class"><span class="hljs-keyword">module</span> <span class="hljs-title">SequenceServer</span></span>
<span class="hljs-class"><span class="hljs-keyword">module</span> <span class="hljs-title">Links</span></span>
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">jbrowse</span></span>
qstart = hsps.map(&<span class="hljs-symbol">:qstart</span>).min
sstart = hsps.map(&<span class="hljs-symbol">:sstart</span>).min
qend = hsps.map(&<span class="hljs-symbol">:qend</span>).max
send = hsps.map(&<span class="hljs-symbol">:send</span>).max
first_hit_start = hsps.map(&<span class="hljs-symbol">:sstart</span>).at(<span class="hljs-number">0</span>)
first_hit_end = hsps.map(&<span class="hljs-symbol">:send</span>).at(<span class="hljs-number">0</span>)
my_features = ERB::Util.url_encode(JSON.generate([{
<span class="hljs-symbol">:seq_id</span> => accession,
<span class="hljs-symbol">:start</span> => sstart,
<span class="hljs-symbol">:end</span> => send,
<span class="hljs-symbol">:type</span> => <span class="hljs-string">"match"</span>,
<span class="hljs-symbol">:subfeatures</span> => hsps.map {
<span class="hljs-params">|hsp|</span> {
<span class="hljs-symbol">:start</span> => hsp.send < hsp.sstart ? hsp.send : hsp.sstart,
<span class="hljs-symbol">:end</span> => hsp.send < hsp.sstart ? hsp.sstart : hsp.send,
<span class="hljs-symbol">:type</span> => <span class="hljs-string">"match_part"</span>
}
}
}]))
my_track = ERB::Util.url_encode(JSON.generate([
{
<span class="hljs-symbol">:label</span> => <span class="hljs-string">"BLAST"</span>,
<span class="hljs-symbol">:key</span> => <span class="hljs-string">"BLAST hits"</span>,
<span class="hljs-symbol">:type</span> => <span class="hljs-string">"JBrowse/View/Track/CanvasFeatures"</span>,
<span class="hljs-symbol">:store</span> => <span class="hljs-string">"url"</span>,
<span class="hljs-symbol">:glyph</span> => <span class="hljs-string">"JBrowse/View/FeatureGlyph/Segments"</span>
}
]))
url = <span class="hljs-string">"<http://yourwebsite.com/jbrowse/>"</span> \
<span class="hljs-string">"?loc=<span class="hljs-subst">#{accession}</span>:<span class="hljs-subst">#{first_hit_start-<span class="hljs-number">500</span>}</span>..<span class="hljs-subst">#{first_hit_start+<span class="hljs-number">500</span>}</span>"</span> \
<span class="hljs-string">"&addFeatures=<span class="hljs-subst">#{my_features}</span>"</span> \
<span class="hljs-string">"&addTracks=<span class="hljs-subst">#{my_track}</span>"</span> \
<span class="hljs-string">"&tracks=BLAST"</span> \
<span class="hljs-string">"&highlight=<span class="hljs-subst">#{accession}</span>:<span class="hljs-subst">#{first_hit_start}</span>..<span class="hljs-subst">#{first_hit_end}</span>"</span>
{
<span class="hljs-symbol">:order</span> => <span class="hljs-number">2</span>,
<span class="hljs-symbol">:title</span> => <span class="hljs-string">'JBrowse'</span>,
<span class="hljs-symbol">:url</span> => url,
<span class="hljs-symbol">:icon</span> => <span class="hljs-string">'fa-external-link'</span>
}
<span class="hljs-keyword">end</span>
<span class="hljs-keyword">end</span>
<span class="hljs-keyword">end</span>
</code></pre>
<p>Important note: if you have multiple organisms, then you should encode
your FASTA files to contain the organism name, e.g.</p>
<p><code>>Human-chr1</code>
<code>ACCGAATCAGCTATCGA...</code></p>
<p>This is because BLAST does not tell you which database your hits come
from.</p>
<p>Then you must modify your links.rb use this information by parsing the
"accession"
variable.</p>
<pre><code class="hljs"><span class="hljs-keyword">require</span> <span class="hljs-string">'json'</span>
<span class="hljs-class"><span class="hljs-keyword">module</span> <span class="hljs-title">SequenceServer</span></span>
<span class="hljs-class"><span class="hljs-keyword">module</span> <span class="hljs-title">Links</span></span>
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">jbrowse</span></span>
qstart = hsps.map(&<span class="hljs-symbol">:qstart</span>).min
sstart = hsps.map(&<span class="hljs-symbol">:sstart</span>).min
qend = hsps.map(&<span class="hljs-symbol">:qend</span>).max
send = hsps.map(&<span class="hljs-symbol">:send</span>).max
first_hit_start = hsps.map(&<span class="hljs-symbol">:sstart</span>).at(<span class="hljs-number">0</span>)
first_hit_end = hsps.map(&<span class="hljs-symbol">:send</span>).at(<span class="hljs-number">0</span>)
organism = accession.partition(<span class="hljs-string">'-'</span>).first
sequence_id = accession.partition(<span class="hljs-string">'-'</span>).last
my_features = ERB::Util.url_encode(JSON.generate([{
<span class="hljs-symbol">:seq_id</span> => sequence_id,
<span class="hljs-symbol">:start</span> => sstart,
<span class="hljs-symbol">:end</span> => send,
<span class="hljs-symbol">:type</span> => <span class="hljs-string">"match"</span>,
<span class="hljs-symbol">:subfeatures</span> => hsps.map {
<span class="hljs-params">|hsp|</span> {
<span class="hljs-symbol">:start</span> => hsp.send < hsp.sstart ? hsp.send : hsp.sstart,
<span class="hljs-symbol">:end</span> => hsp.send < hsp.sstart ? hsp.sstart : hsp.send,
<span class="hljs-symbol">:type</span> => <span class="hljs-string">"match_part"</span>
}
}
}]))
my_track = ERB::Util.url_encode(JSON.generate([
{
<span class="hljs-symbol">:label</span> => <span class="hljs-string">"BLAST"</span>,
<span class="hljs-symbol">:key</span> => <span class="hljs-string">"BLAST hits"</span>,
<span class="hljs-symbol">:type</span> => <span class="hljs-string">"JBrowse/View/Track/CanvasFeatures"</span>,
<span class="hljs-symbol">:store</span> => <span class="hljs-string">"url"</span>,
<span class="hljs-symbol">:glyph</span> => <span class="hljs-string">"JBrowse/View/FeatureGlyph/Segments"</span>
}
]))
url = <span class="hljs-string">"<http://yourwebsite.com/jbrowse/>"</span> \
<span class="hljs-string">"?data=<span class="hljs-subst">#{organism}</span>"</span> \
<span class="hljs-string">"&loc=<span class="hljs-subst">#{sequence_id}</span>:<span class="hljs-subst">#{first_hit_start-<span class="hljs-number">500</span>}</span>..<span class="hljs-subst">#{first_hit_start+<span class="hljs-number">500</span>}</span>"</span> \
<span class="hljs-string">"&addFeatures=<span class="hljs-subst">#{my_features}</span>"</span> \
<span class="hljs-string">"&addTracks=<span class="hljs-subst">#{my_track}</span>"</span> \
<span class="hljs-string">"&tracks=BLAST"</span> \
<span class="hljs-string">"&highlight=<span class="hljs-subst">#{accession}</span>:<span class="hljs-subst">#{first_hit_start}</span>..<span class="hljs-subst">#{first_hit_end}</span>"</span>
{
<span class="hljs-symbol">:order</span> => <span class="hljs-number">2</span>,
<span class="hljs-symbol">:title</span> => <span class="hljs-string">'JBrowse'</span>,
<span class="hljs-symbol">:url</span> => url,
<span class="hljs-symbol">:icon</span> => <span class="hljs-string">'fa-external-link'</span>
}
<span class="hljs-keyword">end</span>
<span class="hljs-keyword">end</span>
<span class="hljs-keyword">end</span>
</code></pre>
<p>Another important note: you should BLAST the actual genome sequence if
you are linking to genomic coordinates of JBrowse. If you BLAST a CDS
database, you may need to load CDS sequences into JBrowse, or translate
the CDS coordinates into genomic coordinates</p>
<p>Also also note: if you are running sequenceserver through apache e.g.
with Passenger Phusion, then you can modify the config.ru to have a
"require './links.rb'" line and keep the links.rb in that same directory
as config.ru
e.g.</p>
<pre><code class="hljs"><span class="hljs-built_in">require</span> <span class="hljs-string">'sequenceserver'</span>
<span class="hljs-built_in">require</span> <span class="hljs-string">'./links.rb'</span>
SequenceServer.init(:<span class="hljs-function"><span class="hljs-params">config_file</span> =></span> <span class="hljs-string">".sequenceserver.conf"</span>)
run SequenceServer
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="data-loading-tips"></a><a href="#data-loading-tips" 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>Data loading tips</h2>
<h3><a class="anchor" aria-hidden="true" id="how-can-i-only-load-a-specific-type-of-feature-from-my-gff-file"></a><a href="#how-can-i-only-load-a-specific-type-of-feature-from-my-gff-file" 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>How can I only load a specific type of feature from my GFF file?</h3>
<p>You can use the --type argument for flatfile-to-json.pl</p>
<p>E.g.</p>
<p><code>flatfile-to-json.pl --type mRNA —gff mygff.gff</code></p>
<p>This will only load mRNAs from the GFF. Additionally, if you want to
filter on the source column of the GFF, you can augment the --type
argument with an extra formatted parameter for source --type
mRNA:augustus</p>
<p>The --type argument can also be a commas separated list of filters like
this.</p>
<h3><a class="anchor" aria-hidden="true" id="what-if-i-dont-want-to-load-the-sequence-data-for-the-genome-but-i-want-to-display-the-features"></a><a href="#what-if-i-dont-want-to-load-the-sequence-data-for-the-genome-but-i-want-to-display-the-features" 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>What if I dont want to load the sequence data for the genome, but I want to display the features?</h3>
<p>prepare-refseqs.pl accepts a --sizes parameter, which takes a
"chrom.sizes" file which is just a tab separated file with two columns,
refseq names and their lengths</p>
<p>This let's you view the genome and the features on the genome without
loading the sequence data.</p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-convert-gtf-to-gff"></a><a href="#how-do-i-convert-gtf-to-gff" 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>How do I convert GTF to GFF</h3>
<p>Since flatfile-to-json.pl does not accept GTF, you can convert your GTF
to GFF3. Tools like gffread or gtf2gff3.pl are available</p>
<p>The gffread tool is packaged with cufflinks so simply install cufflinks,
then you can run</p>
<p><code>gffread -E merged.gtf -o- > merged.gff3</code></p>
<h2><a class="anchor" aria-hidden="true" id="other"></a><a href="#other" 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</h2>
<h3><a class="anchor" aria-hidden="true" id="can-i-get-started-with-jbrowse-without-all-the-fuss-of-setupsh-and-what-not"></a><a href="#can-i-get-started-with-jbrowse-without-all-the-fuss-of-setupsh-and-what-not" 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>Can I get started with JBrowse without all the fuss of setup.sh and what-not</h3>
<p>Yes! Try the jbrowse desktop versions, built with electron!</p>
<p>The Windows and OSX versions are easy to use, and all you need is to
open your fasta file (ideally: indexed fasta).</p>
<p>You can also open BAM tracks, BigWig, VCF.gz, GFF3, BED, BigBed, and
more!</p>
<h3><a class="anchor" aria-hidden="true" id="can-i-install-the-perl-packages-using-cpanm"></a><a href="#can-i-install-the-perl-packages-using-cpanm" 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>Can I install the perl packages using cpanm?</h3>
<p>Yes! The packages are not hosted on cpan, but you can install them from
github using cpanm</p>
<p><code>cpanm git://github.com/GMOD/jbrowse.git</code></p>
<p>This will install jbrowse scripts such as prepare-refseqs.pl and
flatfile-to-json.pl to, commonly, a folder like ~/perl5/bin if you are
using local::lib, or simply a system folder like /usr/local/bin if using
sudo.</p>
<p>There are a couple scripts that don't work with this such as
maker2jbrowse, but it is otherwise fine to install the perl scripts this
way.</p>
<p>Note: you might also use --notest option to avoid testing all
dependencies</p>
<h3><a class="anchor" aria-hidden="true" id="why-does-my-tracklistjson-contain-classname-even-on-canvasfeatures"></a><a href="#why-does-my-tracklistjson-contain-classname-even-on-canvasfeatures" 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>Why does my trackList.json contain "className" (even on CanvasFeatures?)</h3>
<p>className refers to a CSS class for your features.</p>
<p>If you are using CanvasFeatures, this is an unused artifact.</p>
<p>If you are using HTMLFeatures, then you can add custom CSS to make your
feature have a custom class. Note that the "subfeatureClasses" is a
related variable: it is a CSS class for subfeatures.</p>
<p>By default, it would just use the "exon" class for exons or whatnot, but
subfeatureClasses allows you to create a map e.g.</p>
<p><code>"subfeatureClasses": {"exon": "myCustomExonCSSClass"}</code></p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-create-a-tabix-indexed-gff"></a><a href="#how-do-i-create-a-tabix-indexed-gff" 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>How do I create a Tabix indexed GFF</h3>
<p>The most reliable way to do this is to use gff3sort from
<a href="https://github.com/billzt/gff3sort">https://github.com/billzt/gff3sort</a></p>
<p>See <a href="http://biorxiv.org/content/early/2017/06/04/145938">http://biorxiv.org/content/early/2017/06/04/145938</a> for a
description of their algorithm</p>
<p>Note that you can try and use GNU sort (sort -k1,1 -k4,4n) or
genometools (gt gff3 -sortlines) but these both have problems where it
will place child features behind the parent features in the GFF</p>
<p>In JBrowse 1.14, the problem of child features being behind their
parents was fixed so the full GFF3Sort algorithm from @billzt is now not
necessary and a simple GNU sort does work.</p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-create-a-indexed-fasta"></a><a href="#how-do-i-create-a-indexed-fasta" 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>How do I create a Indexed FASTA?</h3>
<p>JBrowse 1.12+ allow opening FASTA files directly in the browser or via
JBrowse Desktop. Indexed FASTA is however much more efficient as it does
not require being read into memory.</p>
<p>To create an Indexed FASTA, install samtools and run</p>
<p><code>samtools faidx yourfile.fa</code></p>
<p>This will create a file called yourfile.fa.fai. When you want to open up
your own sequence file in JBrowse, you can then use the "Open sequence
file" option, and drag and drop both the .fa and the .fai in the file
area. JBrowse will understand that these are to be used together, and
will open it.</p>
<p>Note: you can also open unindexed FASTA, but it requires parsing the
whole FASTA up front, so this is slow and memory intensive with the
current setup. Indexed FASTA is quite efficient though.</p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-install-a-plugin"></a><a href="#how-do-i-install-a-plugin" 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>How do I install a plugin</h3>
<h4><a class="anchor" aria-hidden="true" id="important-note"></a><a href="#important-note" 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>Important note</h4>
<p><strong>After version 1.13 which introduced webpack to JBrowse, then you must
re-run "setup.sh" after adding or removing a plugin.</strong></p>
<p><strong>Also, you must use the JBrowse-1.x.x-dev.zip instead of just
JBrowse-1.x.x.zip</strong></p>
<h4><a class="anchor" aria-hidden="true" id="configuration"></a><a href="#configuration" 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>Configuration</h4>
<p>To install a JBrowse plugin, generally the easiest thing to do is to put
the code in the plugins directory (e.g. clone the repo to
plugins/GCContent or plugins/SashimiPlot), and then just say this in
your jbrowse.conf (or tracks.conf</p>
<pre><code class="hljs">[GENERAL]
plugins += GCContent
plugins += SashimiPlot
</code></pre>
<p>Equivalently, in jbrowse_conf.json (or trackList.json), that would mean
just having</p>
<p><code>"plugins": ["GCContent", "SashimiPlot"]</code></p>
<p>Essentially, you are just giving the configuration an array of folder
names to look for in the plugins directory</p>
<p>Alternatively, you can also add the "name" and "location" of the plugin
too.</p>
<pre><code class="hljs"><span class="hljs-string">"plugins"</span>: [{
<span class="hljs-string">"name"</span>: <span class="hljs-string">"GCContent"</span>,
<span class="hljs-string">"location"</span>: <span class="hljs-string">"plugins/gccontent"</span>
}]
</code></pre>
<p>Here "plugins.GCContent" means that the "name" of your plugin is
"GCContent". This is slightly important, because the "name" is used for
the purposes of the "namespace" that the plugin has i.e., when you
specify a track with the "type": "GCContent/View/Track/GCContentXY" in
trackList.json, then that means the "name" of the plugin should be
GCContent, not lowercase gccontent.</p>
<p>Note that the above config would be equivalent to this in the
jbrowse.conf format</p>
<pre><code class="hljs">[ plugins.GCContent ]
<span class="hljs-keyword">location</span> <span class="hljs-title">= plugins</span>/gccontent
</code></pre>
<p>Again, you don't need to use this format if the name of the directory is
as expected e.g. plugins+=GCContent looks for a folder named GCContent</p>
<p>Note: "location" is a relative URL to the jbrowse root directory.
Normally when a plugin is successfully installed, you will get a
console.log message from the plugin saying that it has started up (that
depends on the plugin but most jbrowse plugins just do that by
convention)</p>
<p>Another note: you can add plugins declarations to trackList.json or
tracks.conf instead of jbrowse_conf.json or jbrowse.conf too. In
tracks.conf just put it at the top of the file or underneath a line that
says [GENERAL]</p>
<p>Final note: it is best to only include plugins in one file, e.g. put all
the includes in jbrowse.conf or all configs in tracks.conf, not mix them
in different config files.</p>
<h3><a class="anchor" aria-hidden="true" id="can-i-create-an-adaptor-for-an-existing-web-service"></a><a href="#can-i-create-an-adaptor-for-an-existing-web-service" 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>Can I create an adaptor for an existing web service?</h3>
<p>If your web service doesn't exactly match the requirements for the
JBrowse REST API tracks, then you can create your own "store class" as a
plugin. This basically just requires one thing:</p>
<pre><code class="hljs">bin/new-plugin.pl MyPlugin
</code></pre>
<p>Then, simply make a dojo class (using "dojo declare") in your plugin
that implements a "getFeatures" function. The getFeatures function
receives a query object with query.start, query.end, query.ref e.g. chr1
along with 3 callbacks: featureCallback, finishCallback, and
errorCallback. If there is an error, than call the error callback
obviously. Otherwise, for each feature that you want to display, call
featureCallback with that (use JBrowse/Model/SimpleFeature to represent
the feature). When you are out of features for the query region, call
finishCallback.</p>
<p>Check out the genes store class from the myvariantviewer plugin for an
example of a simple custom adaptor
<a href="https://github.com/cmdcolin/myvariantviewer/blob/master/js/Store/SeqFeature/Genes.js">https://github.com/cmdcolin/myvariantviewer/blob/master/js/Store/SeqFeature/Genes.js</a></p>
<h3><a class="anchor" aria-hidden="true" id="what-is-a-plugin-useful-for"></a><a href="#what-is-a-plugin-useful-for" 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>What is a plugin useful for?</h3>
<p>A JBrowse plugin can do a wide variety of things. Some common use-cases
would be</p>
<ul>
<li>making a custom track type or visualization</li>
<li>making an adapter for a new file type or "store class"</li>
<li>adding new pieces to the user interface</li>
</ul>
<p>Other things that are extensible include</p>
<ul>
<li>accessing custom search backends (the so called "Names API")</li>
<li>accessing custom filter functions
<a href="https://github.com/cmdcolin/filterplugin">https://github.com/cmdcolin/filterplugin</a></li>
<li>making custom "Save track data" export formats</li>
</ul>
<p>One cool thing is that when you create a plugin, you can simply
reference it textually in your config file e.g. trackList.json, and then
JBrowse will load the "class" from your plugin and initialize it</p>
<h3><a class="anchor" aria-hidden="true" id="what-background-should-i-have-for-creating-a-plugin"></a><a href="#what-background-should-i-have-for-creating-a-plugin" 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>What background should I have for creating a plugin</h3>
<p>Make sure to review this link describing dojo declare, the way dojo
declares new object types
<a href="http://dojotoolkit.org/reference-guide/1.10/dojo/_base/declare.html">http://dojotoolkit.org/reference-guide/1.10/dojo/_base/declare.html</a></p>
<p>Also review
<a href="http://dojotoolkit.org/documentation/tutorials/1.9/modules/">http://dojotoolkit.org/documentation/tutorials/1.9/modules/</a></p>
<p>Understanding "*dojo declare*" and *asynchronous module definition
(AMD)* will help you understand the “preamble” on the top of every file
that jbrowse uses, and which you can use in your plugin</p>
<p>In version 1.13 and forward, the plugin system also relies on
re-building JBrowse using webpack. This actually allows you to use ES6
javascript and node js modules in your browser code. Therefore, you
might want to review webpack, babel, and node js module systems</p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-create-a-plugin"></a><a href="#how-do-i-create-a-plugin" 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>How do I create a plugin?</h3>
<p>Let's walk through a simple plugin with the goal of adding something to
the track menu (e.g. where the "About this track" and "Save track data"
options are)</p>
<p>To do this, we can use object- oriented principles to “inherit” from
some existing track type like CanvasFeatures and then extend its
functionality by overriding the functions in a new track type</p>
<p>We can inherit a new track type by using the “define” function to
include the dependencies needed in a file, and they are listed in an
array at the top of your file.</p>
<p>First initialize a new plugin using</p>
<p><code>bin/new-plugin.pl MyPlugin</code></p>
<p>Then edit a new file, say
plugins/MyPlugin/js/MyTrack.js</p>
<pre><code class="hljs">define( [<span class="hljs-string">"dojo/_base/declare"</span>, <span class="hljs-string">"JBrowse/View/Track/CanvasFeatures"</span>],
<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">declare,CanvasFeatures</span>) </span>{
<span class="hljs-keyword">return</span> declare(CanvasFeatures, {
<span class="hljs-attr">_trackMenuOptions</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">var</span> opts=<span class="hljs-keyword">this</span>.inherited(<span class="hljs-built_in">arguments</span>); <span class="hljs-comment">//call the parent classes function</span>
opts.push( <span class="hljs-comment">// add an extra menu item to the array returned from parent class function</span>
{
<span class="hljs-attr">label</span>: <span class="hljs-string">"Custom item"</span>,
<span class="hljs-attr">type</span>: <span class="hljs-string">'dijit/CheckedMenuItem'</span>,
<span class="hljs-attr">onClick</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Clicked'</span>);
},
<span class="hljs-attr">iconClass</span>: <span class="hljs-string">"dijitIconPackage"</span>
}
);
<span class="hljs-keyword">return</span> opts;
}
});
}
);
</code></pre>
<p>Code listing 1. an example custom track type,
plugin/MyPlugin/js/MyTrack.js, that adds an extra track menu item</p>
<p>After this, we will have the plugin directory structure like this</p>
<pre><code class="hljs">jbrowse<span class="hljs-meta-keyword">/plugins/</span>MyPlugin
jbrowse<span class="hljs-meta-keyword">/plugins/</span>MyPlugin/js
jbrowse<span class="hljs-meta-keyword">/plugins/</span>MyPlugin<span class="hljs-meta-keyword">/js/</span>main.js
jbrowse<span class="hljs-meta-keyword">/plugins/</span>MyPlugin<span class="hljs-meta-keyword">/js/</span>MyTrack.js
</code></pre>
<p>The bin/new-plugin.pl helps create the skeleton main.js</p>
<p>Then we can use our new plugin to a config file like jbrowse_conf.json
as "plugins": ["MyPlugin"]</p>
<p>Then edit the trackList.json for an existing track and change `"type":
"CanvasFeatures"` to `"type": "MyPlugin/MyTrack"`.</p>
<p>That will tell jbrowse to load the MyTrack class from your plugin
instead of the normal CanvasFeatures class.</p>
<h2><a class="anchor" aria-hidden="true" id="setup"></a><a href="#setup" 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>Setup</h2>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-get-started-with-installing-jbrowse"></a><a href="#how-do-i-get-started-with-installing-jbrowse" 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>How do I get started with installing JBrowse?</h3>
<p>Check out the quick start guide <a href="/docs/tutorial.html">indexed file formats</a> or the <a href="/docs/tutorial_classic.html">classic quick start guide</a></p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-load-my-genome-as-a-fasta-file"></a><a href="#how-do-i-load-my-genome-as-a-fasta-file" 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>How do I load my genome as a FASTA file?</h3>
<p>If you have JBrowse installed to your web folder and have run setup.sh,
then you can download a FASTA file for your genome and run</p>
<p><code>bin/prepare-refseqs.pl --fasta yourfile.fasta</code></p>
<p>If you want to use it as a Indexed FASTA instead, please see the <a href="/docs/tutorial.html">indexed file formats</a> tutorial.</p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-setup-a-gff-track"></a><a href="#how-do-i-setup-a-gff-track" 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>How do I setup a GFF track?</h3>
<p>The most common feature track to use is a GFF file</p>
<p>Using flatfile-to-json.pl is the easiest and most optimal way to load a
GFF file for jbrowse</p>
<p>You can run</p>
<p><code>bin/flatfile-to-json.pl --gff myfile.gff --trackLabel trackLabel --trackType CanvasFeatures</code></p>
<p>Alternatively, you can use GNU sort and Tabix to create a GFF3Tabix track</p>
<p>sort -k1,1 -k4,4n myfile.gff > myfile.sorted.gff
bgzip myfile.sorted.gff
tabix -p gff myfile.sorted.gff.gz</p>
<p>See <a href="/docs/tutorial.html">indexed file formats</a> tutorial for more details.</p>
<p>Note: the CanvasFeatures track type is recommended even though it is not currently the default as it is more flexible and easy to configure</p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-set-up-a-bam-file"></a><a href="#how-do-i-set-up-a-bam-file" 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>How do I set up a BAM file?</h3>
<p>You will want to</p>
<ul>
<li><p>Put the BAM and BAI (or CSI) index in the JBrowse data directory</p></li>
<li><p>Add a section to your tracks.conf</p>
<p>[tracks.mytrack]
storeClass=JBrowse/Store/SeqFeature/BAM
urlTemplate=myfile.bam
type=Alignments2
key=My BAM experiment</p></li>
</ul>
<p>If this does not work feel free to ask <a href="mailto:gmod-ajax@lists.sourceforge.net">gmod-ajax@lists.sourceforge.net</a></p>
<p>Other notes</p>
<ul>
<li>Don't use bam-to-json.pl, it is old and you do not need to convert BAM to JSON</li>
<li>Your BAI should be the same as the BAM with .bai on the end, otherwise use the baiUrlTemplate paramter to point to it's location</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-set-up-a-bigwig-file"></a><a href="#how-do-i-set-up-a-bigwig-file" 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>How do I set up a BigWig file?</h3>
<p>When you set up a BigWig file in jbrowse, the best way to do it is as
follows</p>
<ul>
<li><p>Put the BigWig file in your data directory</p></li>
<li><p>Add a section to your tracks.conf</p>
<p>[tracks.mybigwig]
urlTemplate=file.bw
type=JBrowse/View/Track/Wiggle/XYPlot
storeClass=JBrowse/Store/SeqFeature/BigWig
key=My BigWig experiment</p></li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-set-up-a-vcf-file"></a><a href="#how-do-i-set-up-a-vcf-file" 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>How do I set up a VCF file?</h3>
<p>First bgzip and tabix your vcf file</p>
<pre><code class="hljs">bgzip myfile.vcf
tabix -p vcf myfile.vcf.gz
</code></pre>
<p>If your VCF isn't sorted for any reason and these steps give you an error, just use the GNU sort utility
to sort it by chromosome and coordinate or get vcf-sort from vcftools</p>
<p>GNU sort command from <a href="https://www.biostars.org/p/133487/">https://www.biostars.org/p/133487/</a></p>
<pre><code class="hljs">grep '^#' in.vcf > out.vcf && grep -v '^#' in.vcf | LC_ALL=C sort -t $'\t' -k1,1 -k2,2n >> out.vcf
</code></pre>
<p>Now that your VCF is indexed, follow these steps</p>
<ul>
<li>Put the myfile.vcf.gz and myfile.vcf.gz.tbi in your data directory</li>
<li>Edit data/trackList.json</li>
<li>Put the following in there:</li>
</ul>
<pre><code class="hljs">[tracks.myvcf]
urlTemplate=myfile.vcf.gz
storeClass=JBrowse/Store/SeqFeature/VCFTabix
type=CanvasVariants
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-get-indexedfasta-track-to-work-in-jbrowse"></a><a href="#how-do-i-get-indexedfasta-track-to-work-in-jbrowse" 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>How do I get IndexedFasta track to work in JBrowse</h3>
<p>You can manually edit the config to use IndexedFasta as a reference sequence like this</p>
<pre><code class="hljs">[tracks.refseqs]
key= Reference sequence
storeClass=JBrowse/Store/SeqFeature/IndexedFasta
urlTemplate=SOAPdenovo-genome.fa
useAsRefSeqStore=true
type=Sequence
[GENERAL]
refSeqs=SOAPdenovo-genome.fa.fai
</code></pre>
<p>The equivalent thing can also be in trackList.json as</p>
<pre><code class="hljs">{
"tracks" : [
{
"label" : "refseqs",
"key": "Reference sequence",
"storeClass" : "JBrowse/Store/SeqFeature/IndexedFasta",
"urlTemplate" : "SOAPdenovo-genome.fa",
"useAsRefSeqStore" : true,
"type" : "Sequence"
}
],
"refSeqs" : "SOAPdenovo-genome.fa.fai"
}
</code></pre>
<p>Note that prepare-refseqs.pl also can use --indexed_fasta as an argument, but is not required for indexed FASTA</p>
<p>You can see from this that a couple things are needed</p>
<ul>
<li>useAsRefSeqStore set to true</li>
<li>making label: refseqs is important when the storeClass is not the
normal SequenceChunks class</li>
<li>the refSeqs attribute refers to the FASTA index file (normally it
points to the refSeqs.json file)</li>
</ul>
<p>With this setup, you do not need to have run prepare-refseqs.pl on a
FASTA file. Instead you can simply use the "samtools faidx" program to
index your fasta file in a data directory, and set trackList.json up in
this format.</p>
<h2><a class="anchor" aria-hidden="true" id="tips-and-tricks"></a><a href="#tips-and-tricks" 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>Tips and tricks</h2>
<h3><a class="anchor" aria-hidden="true" id="how-can-i-get-jbrowse-to-update-the-url-of-a-parent-page-when-jbrowse-is-inside-of-an-iframe"></a><a href="#how-can-i-get-jbrowse-to-update-the-url-of-a-parent-page-when-jbrowse-is-inside-of-an-iframe" 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>How can I get jbrowse to update the URL of a parent page when jbrowse is inside of an iframe</h3>
<p>You can use code such as
this</p>
<pre><code class="hljs"><span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"jbrowse_iframe"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/jbrowse/"</span> <span class="hljs-attr">scrolling</span>=<span class="hljs-string">"no"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:100%;height:800px;"</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
<span class="hljs-comment">//https://stackoverflow.com/questions/2090551/parse-query-string-in-javascript</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getQueryVariable</span>(<span class="hljs-params">variable</span>) </span>{
<span class="hljs-keyword">var</span> query = <span class="hljs-built_in">window</span>.location.search.substring(<span class="hljs-number">1</span>);
<span class="hljs-keyword">var</span> vars = query.split(<span class="hljs-string">'&'</span>);
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < vars.length; i++) {
<span class="hljs-keyword">var</span> pair = vars[i].split(<span class="hljs-string">'='</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">decodeURIComponent</span>(pair[<span class="hljs-number">0</span>]) == variable) {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">decodeURIComponent</span>(pair[<span class="hljs-number">1</span>]);
}
}
}
<span class="hljs-comment">// subscribe to jbrowse movements inside of the iframe and update parent page url</span>
<span class="hljs-keyword">var</span> datadir = getQueryVariable(<span class="hljs-string">'data'</span>);
<span class="hljs-keyword">var</span> iframe = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'jbrowse_iframe'</span>);
iframe.addEventListener(<span class="hljs-string">'load'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">var</span> JBrowse = iframe.contentWindow.JBrowse;
JBrowse.subscribe( <span class="hljs-string">'/jbrowse/v1/n/navigate'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">obj</span>) </span>{
<span class="hljs-keyword">var</span> shareURL = JBrowse.makeCurrentViewURL();
<span class="hljs-keyword">var</span> parser = <span class="hljs-keyword">new</span> URL(shareURL);
<span class="hljs-built_in">window</span>.history.replaceState( {}, <span class="hljs-string">""</span>, parser.search );
});
});
<span class="hljs-comment">// pass the parameters from the parent page into the iframe</span>
iframe.src = iframe.src + <span class="hljs-built_in">window</span>.location.search;
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</code></pre>
<p>With this setup, you can pass URL parameters from the URL of the parent
page e.g. <a href="http://localhost/parent_page/?data=mydata&loc=chr1:1">http://localhost/parent_page/?data=mydata&loc=chr1:1</a>..10000
and it will forward those URL params to the jbrowse instance (located at
<a href="http://localhost/jbrowse">http://localhost/jbrowse</a>) and the URL will be autoupdated when you
change locations</p>
<h3><a class="anchor" aria-hidden="true" id="can-i-use-jbrowse-with-phantomjs"></a><a href="#can-i-use-jbrowse-with-phantomjs" 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>Can I use JBrowse with phantomJS?</h3>
<p>Yes! See
<a href="http://gmod.org/wiki/JBrowse_Configuration_Guide#Rendering_high_resolution_screenshots_using_PhantomJS">http://gmod.org/wiki/JBrowse_Configuration_Guide#Rendering_high_resolution_screenshots_using_PhantomJS</a>
for an example</p>
<p>Puppeteer also works</p>
<h3><a class="anchor" aria-hidden="true" id="can-i-run-jbrowse-on-github-pages"></a><a href="#can-i-run-jbrowse-on-github-pages" 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>Can I run JBrowse on GitHub pages?</h3>
<p>Yes! Upload jbrowse to a gh-pages branch on a github repo, and also put
a .nojekyll file in the root directory.</p>
<p>This bypasses the normal jekyll parser of github and allows jbrowse to
load <a href="https://github.com/blog/572-bypassing-jekyll-on-github-pages">https://github.com/blog/572-bypassing-jekyll-on-github-pages</a></p>
<h3><a class="anchor" aria-hidden="true" id="what-is-the-benefit-of-using-biodb-to-jsonpl"></a><a href="#what-is-the-benefit-of-using-biodb-to-jsonpl" 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>What is the benefit of using biodb-to-json.pl?</h3>
<ul>
<li>You can store more advanced creation in the biodb-to-json.pl conf
file, allowing for more advanced and reproducible builds of your
data directory</li>
<li>You can load data from different sources like Chado, GFF, etc.</li>
</ul>
<p>In general, using normal commands like flatfile-to-json,
prepare-refseqs, etc work fine though. See setup.sh for how the volvox
sample data combines using biodb-to-json and other techniques.</p>
<h3><a class="anchor" aria-hidden="true" id="can-i-make-an-ultra-compact-setting-on-my-features"></a><a href="#can-i-make-an-ultra-compact-setting-on-my-features" 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>Can I make an ultra-compact setting on my features?</h3>
<p>Yes you can!</p>
<p>The styles on "CanvasFeatures" include normal, compact, and collapse</p>
<p>By default, compact divides the height of glyphs by 4, so if you make
the height of your features smaller with style->height then when you
set compact it will be ultra compact.</p>
<h3><a class="anchor" aria-hidden="true" id="can-i-disable-the-histograms-on-a-track"></a><a href="#can-i-disable-the-histograms-on-a-track" 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>Can I disable the histograms on a track?</h3>
<p>Yes! Try setting style.featureScale to a very small number like
0.0000000001 (but greater than 0)</p>
<h3><a class="anchor" aria-hidden="true" id="can-i-visualize-junctions-from-rna-seq-data"></a><a href="#can-i-visualize-junctions-from-rna-seq-data" 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>Can I visualize junctions from RNA-seq data</h3>
<p>Yes, try out the SashimiPlot plugin!
<a href="https://github.com/cmdcolin/sashimiplot">https://github.com/cmdcolin/sashimiplot</a></p>
<p>It dynamically calculates the splicing coverage of a track or uses
junctions.bed files for junctions</p>
<h3><a class="anchor" aria-hidden="true" id="can-i-view-gccontent-on-my-sequence-data"></a><a href="#can-i-view-gccontent-on-my-sequence-data" 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>Can I view GCContent on my sequence data?</h3>
<p>Yes, the GCContent plugin will calculate the GCContent from your
sequence data automatically. See <a href="https://github.com/cmdcolin/gccontent">https://github.com/cmdcolin/gccontent</a></p>
<p>It works fairly well on mid-size genomes. If you have very large
megabase scale assemblies, then you might consider pre-calculating the
GCContent.</p>
<h3><a class="anchor" aria-hidden="true" id="can-i-view-gwas-results-in-jbrowse"></a><a href="#can-i-view-gwas-results-in-jbrowse" 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>Can I view GWAS results in JBrowse?</h3>
<p>Yes, the GWASViewer plugin does this.
<a href="https://github.com/cmdcolin/gwasviewer/">https://github.com/cmdcolin/gwasviewer/</a></p>
<h3><a class="anchor" aria-hidden="true" id="what-do-the-colors-mean-on-the-bam-files-for-jbrowse"></a><a href="#what-do-the-colors-mean-on-the-bam-files-for-jbrowse" 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>What do the colors mean on the BAM files for JBrowse</h3>
<ul>
<li>Light red is a forward read that is paired</li>
<li>Super light red is a forward read that is badly paired</li>
<li>Dark red is a forward read that is missing a pair</li>
<li>Light blue is a reverse read that is paired</li>
<li>Super light blue is a reverse read that is badly paired</li>
<li>Dark blue is a reverse read that is missing a pair</li>
<li>Grey/black is a read whose pair is on another chromosome</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="can-i-use-rna-seq-with-jbrowse"></a><a href="#can-i-use-rna-seq-with-jbrowse" 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>Can I use RNA-seq with JBrowse</h3>
<p>Yep! The regular alignments track types (e.g.
JBrowse/View/Track/Alignments2) supports RNA-seq and will show spliced
alignments.</p>
<p>Also, there are two special options for RNA-seq that can help decipher
the reads.</p>
<ul>
<li>The "Use XS" option is a RNA-seq specific flag that aligners output
which detects the strand that a read came from according to
canonical splice site. Enable in config using useXS: true</li>
<li>The "Use reversed template" option is flag normally used for
"stranded paired-end RNA-seq" data and it will make both reads in a
pair look like they are in the same direction, so for example, reads
from a plus-strand gene will all appear red, even when one of the
reads in the pair would normally be blue. Enable in config with
useReverseTemplate: true</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="can-i-use-long-reads-with-jbrowse"></a><a href="#can-i-use-long-reads-with-jbrowse" 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>Can I use long reads with JBrowse?</h3>
<p>Long reads from platforms like nanopore and pacbio pose some challenges
but will work if it is in BAM format. The JBrowse 1.12.3 release also
includes an optimization, cacheMismatches, to enhance speed on long read
tracks. This must be enabled manually in the config at the moment.</p>
<h3><a class="anchor" aria-hidden="true" id="can-i-have-subtracks-in-jbrowse"></a><a href="#can-i-have-subtracks-in-jbrowse" 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>Can I have subtracks in JBrowse?</h3>
<p>You can make a custom plugin to do this. The "multibigwig" plugin is an
example of this <a href="https://github.com/cmdcolin/multibigwig">https://github.com/cmdcolin/multibigwig</a></p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-get-coverage-for-a-bam-file"></a><a href="#how-do-i-get-coverage-for-a-bam-file" 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>How do I get coverage for a BAM file?</h3>
<ol>
<li>Use the SNPCoverage track</li>
<li>Use the FeatureCoverage track type</li>
<li>Make a bigwig for your BAM file (recommend: use "bedtools genomecov"
to convert the BAM to bedgraph, and the convert bedgraph to bigwig
with UCSC bedGraphToBigWig)</li>
</ol>
<p>Also note: with the third option, you can make it so that your BAM track
has a bigwig when zoomed out, but then shows the reads when zoomed in.
Any CanvasFeatures track can use a bigwig for summary histograms. The
Alignments2 volvox-sorted.bam track is an example of this. See
<a href="http://gmod.org/wiki/JBrowse_Configuration_Guide#Configuring_Summary_Histograms">http://gmod.org/wiki/JBrowse_Configuration_Guide#Configuring_Summary_Histograms</a></p>
<h3><a class="anchor" aria-hidden="true" id="can-i-zoom-even-closer-to-the-base-level"></a><a href="#can-i-zoom-even-closer-to-the-base-level" 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>Can I zoom even closer to the base level?</h3>
<p>Yes. You can set the config variable view.maxPxPerBp to a higher value.
To increase, try setting this in jbrowse.conf</p>
<p><code>view.maxPxPerBp=50</code></p>
<p>Note sometimes the "translations" will appear wrong at high zoom levels,
so don't depend on this for the protein translations</p>
<p>By default, the max zoom level is 25, so setting it to 50 makes you able
to zoom in twice as much.</p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-change-the-color-of-bigwig-dynamically"></a><a href="#how-do-i-change-the-color-of-bigwig-dynamically" 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>How do I change the color of bigwig dynamically</h3>
<p>The pos_color and neg_color config variables for BigWig tracks accept
callback functions. The phytozome browser has good examples of this with
the VISTA plot tool</p>
<h2><a class="anchor" aria-hidden="true" id="track-selector"></a><a href="#track-selector" 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>Track selector</h2>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-add-categories-to-the-hierarchical-data-selector"></a><a href="#how-do-i-add-categories-to-the-hierarchical-data-selector" 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>How do I add categories to the Hierarchical data selector?</h3>
<p>The hierarchical data selector can support multiple levels of drop down
categories. To use this, set the "category" variable on your track, and
use a "/" to represent a subcategory. Use multiple / for multiple
subcategories.</p>
<p>Example</p>
<pre><code class="hljs"> {
<span class="hljs-string">"category"</span>: <span class="hljs-string">"ParentCatgory / DiseaseBAM"</span>,
<span class="hljs-string">"label"</span>: <span class="hljs-string">"myTrack"</span>,
<span class="hljs-string">"storeClass"</span>: <span class="hljs-string">"JBrowse/Store/SeqFeature/BAM"</span>,
<span class="hljs-string">"type"</span>: <span class="hljs-string">"Alignments2"</span><span class="hljs-comment">;</span>
},
{
<span class="hljs-string">"category"</span>: <span class="hljs-string">"ParentCatgory / NonDiseaseBAM"</span>,
<span class="hljs-string">"label"</span>: <span class="hljs-string">"myTrack2"</span>,
<span class="hljs-string">"storeClass"</span>: <span class="hljs-string">"JBrowse/Store/SeqFeature/BAM"</span>,
<span class="hljs-string">"type"</span>: <span class="hljs-string">"Alignments2"</span><span class="hljs-comment">;</span>
}
</code></pre>
<p>In tracks.conf
form</p>
<pre><code class="hljs"><span class="hljs-section">[tracks.myTrack]</span>
<span class="hljs-attr">category</span>=ParentCategory / DiseaseBAM
<span class="hljs-attr">type</span>=Alignments2
<span class="hljs-attr">storeClass</span>=JBrowse/Store/SeqFeature/BAM
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-collapse-categories-in-the-hierarchical-data-selector-by-default"></a><a href="#how-do-i-collapse-categories-in-the-hierarchical-data-selector-by-default" 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>How do I collapse categories in the Hierarchical data selector by default?</h3>
<p>You can set the following
config</p>
<p><code>collapsedCategories=ParentCategory1/ChildCategory,ParentCategory2/ChildCategory</code></p>
<p>etc. to your jbrowse.conf. This is a comma separated list (don't include
spaces around the slashes though). Remember, don't quote the values in
the jbrowse.conf file :)</p>
<h2><a class="anchor" aria-hidden="true" id="troubleshooting"></a><a href="#troubleshooting" 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>Troubleshooting</h2>
<h3><a class="anchor" aria-hidden="true" id="setupsh-installing-perl-prerequisites-fails-for-me-why"></a><a href="#setupsh-installing-perl-prerequisites-fails-for-me-why" 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>Setup.sh "Installing perl prerequisites" fails for me, why?</h3>
<p>Inspect your setup.log</p>
<p>If for example it says</p>
<p><code>version.c:30:16: fatal error: db.h: No such file or directory</code></p>
<p>Then run</p>
<p><code>sudo apt-get install libdb-dev</code></p>
<p>Then re-run setup.sh</p>
<p>If you see errors for XML::Parser</p>
<p><code>sudo apt-get install libexpat1-dev</code></p>
<p>Then re-run setup.sh</p>
<p>Also make sure you use "./setup.sh" or "bash setup.sh", do not use "sh
setup.sh"</p>
<h3><a class="anchor" aria-hidden="true" id="should-i-be-worried-about-the-error-building-and-installing-legacy-wiggle-format-superceded-by-bigwig-tracks-failed"></a><a href="#should-i-be-worried-about-the-error-building-and-installing-legacy-wiggle-format-superceded-by-bigwig-tracks-failed" 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>Should I be worried about the error "Building and installing legacy wiggle format (superceded by BigWig tracks)...failed"?</h3>
<p>This error is often due to some system issues about compiling libraries
like libpng, and for all intents and purposes can be ignored, as it is
only used in wig-to-json.pl and this is superceded by directly reading
BigWig files (no conversion step needed)</p>
<p>You can follow these instructions for how to setup a BigWig file if
needed
<a href="http://gmod.org/wiki/JBrowse_FAQ#How_do_I_set_up_a_BigWig_file.3F">http://gmod.org/wiki/JBrowse_FAQ#How_do_I_set_up_a_BigWig_file.3F</a></p>
<h3><a class="anchor" aria-hidden="true" id="i-see-a-message-that-says-congratulations-jbrowse-is-on-the-web-but-i-don-t-see-my-genome"></a><a href="#i-see-a-message-that-says-congratulations-jbrowse-is-on-the-web-but-i-don-t-see-my-genome" 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>I see a message that says "Congratulations, JBrowse is on the web" but I don't see my genome</h3>
<p>This message normally means that jbrowse is setup but a genome hasn't
been loaded or located correctly</p>
<p>You can continue by running</p>
<p><code>bin/prepare-refseqs.pl --fasta yourfile.fa</code></p>
<p>Then reload the page and your genome should be available.</p>
<p>Note: If the red box on the "Congratulations page" shows a different
message than just 404 on seq/refSeqs.json, then report the error to
github or the mailing list with as much detail about your setup as
possible.</p>
<h3><a class="anchor" aria-hidden="true" id="what-is-this-error-during-setupsh-no-such-file-or-directory-at-loader-0x13517b30-app-cpanminus-scriptpm-line-224"></a><a href="#what-is-this-error-during-setupsh-no-such-file-or-directory-at-loader-0x13517b30-app-cpanminus-scriptpm-line-224" 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>What is this error during setup.sh "No such file or directory at /loader/0x13517b30/App/cpanminus/script.pm line 224."</h3>
<p>This can normally be fixed by deleting ~/.cpanm</p>
<p>It may be due to conflict between jbrowse's own cpanm and your system
cpanm, but it should not be too problematic.</p>
<p>Generally deleting ~/.cpanm is harmless, it is a "build" directory
(generally ~/perl5 is the local::lib directory, and in jbrowse's case,
it actually uses an alternate local::lib directory named extlib inside
the jbrowse directory to ensure ease-of-install)</p>
<h3><a class="anchor" aria-hidden="true" id="what-is-integer-overflow-error"></a><a href="#what-is-integer-overflow-error" 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>What is "Integer overflow error"?</h3>
<p>From what we have seen, the "Integer overflow error" sometimes appears
on BigWig tracks when your webserver is not configured correctly. It
seems to be due to errors with a "reverse proxy" or something not
forwarding the data properly.</p>
<p>Therefore, it is most likely not due to corrupted bigwig files or
jbrowse bugs, but more probably, due to your server's configuration.</p>
<h3><a class="anchor" aria-hidden="true" id="why-do-i-get-a-popup-saying-error-reading-from-name-store"></a><a href="#why-do-i-get-a-popup-saying-error-reading-from-name-store" 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>Why do I get a popup saying "Error reading from name store"?</h3>
<p>This error basically says the "search function" from generate-names.pl
isn't working. You can try a couple things to fix the error</p>
<ol>
<li>Refresh your browser (especially in Apollo, where session can
expire)</li>
<li>Re-run generate-names.pl</li>
<li>Re-run generate-names.pl --hashBits 16 (manually specifying the
hashBits can fix error sometimes)</li>
<li>Re-run generate-names.pl with --completionLimit 0 which disables
autocomplete and makes index smaller</li>
<li>Make sure that the fields you are indexing (e.g. Name or ID) don't
contain full text descriptions (they should be symbols or
identifiers, the default hash search won't index keywords but rather
match prefixes)</li>
</ol>
<p>Note if there are continued troubles, you can try an alternative search
engine, such as jbrowse_elasticsearch (an experimental plugin)
<a href="https://github.com/cmdcolin/jbrowse_elasticsearch/">https://github.com/cmdcolin/jbrowse_elasticsearch/</a></p>
<h3><a class="anchor" aria-hidden="true" id="what-is-this-error-message-argument-isn-t-numeric-in-addition-loading-gff3"></a><a href="#what-is-this-error-message-argument-isn-t-numeric-in-addition-loading-gff3" 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>What is this error message "Argument isn't numeric in addition (+)" loading GFF3?</h3>
<p>If you get an error similar to this:</p>
<pre><code class="hljs">_Argument <span class="hljs-string">"-"</span> isn<span class="hljs-symbol">'t</span> numeric <span class="hljs-keyword">in</span> addition (+) at
/<span class="hljs-keyword">Library</span>/WebServer/Documents/scbrowse/JBrowse-<span class="hljs-number">1.12</span>.<span class="hljs-number">0</span>/bin/../src/perl5/Bio/JBrowse/FeatureStream/GFF3_LowLevel.pm
<span class="hljs-literal">line</span> <span class="hljs-number">32</span>, <$f> <span class="hljs-literal">line</span> <span class="hljs-number">44611</span>._
</code></pre>
<p>Make sure your GFF3 is tab delimited</p>
<h3><a class="anchor" aria-hidden="true" id="it-keeps-showing-too-much-data-on-my-track-how-do-i-fix-it-and-make-my-track-display"></a><a href="#it-keeps-showing-too-much-data-on-my-track-how-do-i-fix-it-and-make-my-track-display" 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>It keeps showing "too much data" on my track. How do I fix it and make my track display?</h3>
<p>Increase maxFeatureScreenDensity to a higher value. This value is by
default 0.5 but if you allow a higher "density" of features, set it to 6
for example and the message should
disappear.</p>
<h3><a class="anchor" aria-hidden="true" id="i-get-the-error-too-much-datachunk-size-xxxxx-exceeds-chunksizelimit"></a><a href="#i-get-the-error-too-much-datachunk-size-xxxxx-exceeds-chunksizelimit" 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>I get the error "Too much data...chunk size xxxxx exceeds chunkSizeLimit"</h3>
<p>Several things can happen to cause this (generally on VCF of BAM tracks)</p>
<ol>
<li>You actually have exceeded the chunkSize during regular loading of
data. You might see one specific block/region out of your whole
track is giving this error. In this case, simply increase it.</li>
<li>Your data is actually fairly sparse so when it first starts up, the
"stats estimation routine", which "doubles" the region it searches
in until it gets enough data, is failing. If it doubles too many
times, then the chunk will become large and then hit the limit. In
JBrowse 1.12.3 a "statsTimeout" configuration was introduced to
avoid these doublings from consuming too much area.</li>
</ol>
<h3><a class="anchor" aria-hidden="true" id="i-set-a-value-in-my-config-file-but-it-isn-t-working-why-not"></a><a href="#i-set-a-value-in-my-config-file-but-it-isn-t-working-why-not" 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>I set a value in my config file but it isn't working. Why not?</h3>
<p>Some things to check:</p>
<ul>
<li>Don't add quotes around numerical values in your JSON config files
e.g. trackList.json. Numbers can remain unquoted. Booleans can too.
Functions are included in quotes though, because those are evaluated
at runtime.</li>
<li>Also don't add quotes around even the strings in the .conf config
files e.g. jbrowse.conf or tracks.conf files. So use
<code>defaultTracks=mytrack1,mytrack2</code> not
<code>defaultTracks="mytrack1,mytrack2"</code></li>
<li>Clear your cache. JSON is often cached pretty strongly. The .conf
are cached even more. And, additionally, if there is a syntax issue
with your JSON, it will try and use an older version oftentimes
until you clear cache.</li>
</ul>
<p>Also note: specifically with regards to the "defaultTracks" parameter,
defaultTracks is overridden by the users cookies and the &tracks=
parameter in the URL, so to test whether defaultTracks works, clear you
cookies and visit without &tracks in the url. Use alwaysOnTracks or
forceTracks if you want to have it turn on despite
cookies/URL.</p>
<h3><a class="anchor" aria-hidden="true" id="i-get-the-error-too-many-open-files-opening-bucket-log-with-generate-namespl"></a><a href="#i-get-the-error-too-many-open-files-opening-bucket-log-with-generate-namespl" 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>I get the error "Too many open files opening bucket log" with generate-names.pl</h3>
<p>If you get the error such as
this</p>
<p><code>Too many open files opening bucket log /path/to/your/data/names/00f/6.json.log at perl5/lib/perl5/Bio/JBrowse/HashStore.pm line 197, <$fh> line 85.</code></p>
<p>Then try increasing number of files available</p>
<p><code>ulimit -n 1000</code></p>
<p>The default can sometimes be as low as 256 (view with ulimit -a)</p>
<h3><a class="anchor" aria-hidden="true" id="how-do-i-fix-the-not-a-bam-file-issue"></a><a href="#how-do-i-fix-the-not-a-bam-file-issue" 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>How do I fix the "Not a BAM file" issue?</h3>
<p>This is normally due to a module called mime_magic being enabled on
your Apache server. Two options for fixing this are 1. disable
mime_magic or 2. configuring custom file types with AddType in your
apache configuration. See
<a href="alignments.html#apache-configuration-note">this Apache configuration note</a>
for recommended fixes.</p>
<h3><a class="anchor" aria-hidden="true" id="what-is-the-error-invalid-bgzf-header-on-my-vcf-files"></a><a href="#what-is-the-error-invalid-bgzf-header-on-my-vcf-files" 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>What is the error "invalid BGZF header" on my VCF files?</h3>
<p>Your server is misconfigured for VCF.GZ files, and this can be due to it
thinking that it should set "Content-Encoding: gzip" on the your .vcf.gz
files. Your webserver should actually NOT put "Content-Encoding: gzip"
on your VCF.GZ files. If you think you have this problem, can try using
"curl -I" to view the headers that your server is putting on your VCF.GZ
file.</p>
<p>Note: this issue can be confusing to research about, especially the
"Content-Encoding: gzip" issue, because most information on the web
typically says that it should put "Content-Encoding: gzip" on gzip data,
and this header implies that the client should decompress the content
itself, however JBrowse does not want this to happen because VCF.gz
files are a special type of gzip, specifically, bgzip, so it is manually
decompressed by JBrowse javascript
code.</p>
<h3><a class="anchor" aria-hidden="true" id="my-track-doesn-t-display-the-gene-names-but-i-expected-it-to-why-not"></a><a href="#my-track-doesn-t-display-the-gene-names-but-i-expected-it-to-why-not" 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>My track doesn't display the gene names, but I expected it to. Why not?</h3>
<p>If you have a very dense track with many features, JBrowse might decide
to hide the labels to save space, but you can force them to display
again by adding this to your trackList.json</p>
<p><code>"style":{"labelScale": 0.01}</code></p>
<p>This says that the label will be displayed when the zoom level is
greater than 0.01 regardless of how many features are there. The value
0.01 is measured in pixels per base pair, at max zoom level, there are
25 pixels per base pair for example, and when zoomed out farther, each
base takes up less space, hence 0.01 will display the feature names
always if you are reasonably zoomed in.</p>
<p>You can also change maxHeight to a larger value to make the track taller
and see more features.</p>
<h3><a class="anchor" aria-hidden="true" id="why-does-my-track-keep-saying-loading"></a><a href="#why-does-my-track-keep-saying-loading" 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>Why does my track keep saying "Loading"?</h3>
<p>This normally means some javascript code for handling the track has
crashed. Check your javascript console for clues on how to fix it. Add a
github issue if it represents a real bug!</p>
<p>Note: you should use the "-dev" packages for debugging, i.e.
JBrowse-1.11.6-dev.zip as opposed to for example JBrowse-1.11.6.zip,
because the -dev package contains "un-minified" source code and more
readable javascript console messages</p>
<h3><a class="anchor" aria-hidden="true" id="my-canvasfeatures-don-t-show-up-with-subfeatures-why-not"></a><a href="#my-canvasfeatures-don-t-show-up-with-subfeatures-why-not" 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>My CanvasFeatures don't show up with subfeatures, why not?</h3>
<p>If your GFF does not follow this structure</p>
<p><code>gene->mRNA->exon+CDS</code></p>
<p>Then you need to add extra configuration</p>
<p>Specifically, if it is "transcript" instead of "mRNA" (which is common
for Ensembl GFF for example), then you must set</p>
<p><code>"transcriptType": "transcript"</code></p>
<p>Also, if you only have "exon" and no "CDS", then you need to set the
subParts config (the default settings assumes that both exons and CDS
exist, so if there are only exons, like in a cufflinks output file, then
you need this)</p>
<p><code>"subParts": "exon"</code></p>
<p>If your GFF does not include UTR, but the UTR can be "implied" from the
difference between the exon and CDS boundaries, then you can use this on
your track type to enable them</p>
<p><code>"impliedUTRs": true</code></p>
<p>If your GFF file has features with this structure</p>
<p><code>match -> match_part</code></p>
<p>This only has two levels, you might consider just setting the "Segments"
glyph</p>
<p><code>"glyph": "JBrowse/View/FeatureGlyph/Segments"</code></p>
<p>The segments glyph accepts all subfeatures, so match and match_part
structure is fine.</p>
<p>Note: the tips above only apply for CanvasFeatures tracks</p>
<h3><a class="anchor" aria-hidden="true" id="my-htmlfeatures-don-t-show-up-with-subfeatures-why-not"></a><a href="#my-htmlfeatures-don-t-show-up-with-subfeatures-why-not" 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>My HTMLFeatures don't show up with subfeatures, why not?</h3>
<p>HTMLFeatures generally load data at the "transcript" level. This means
that they should be loaded with something similar to --type mRNA when
using flatfile-to-json.pl in order to see the transcript
subfeatures</p>
<p><code>flatfile-to-json.pl --type mRNA --gff your_genes.gff --trackLabel MyTrack</code></p>
<p>This means that it loads the features where mRNA would be in column 3 of
your GFF. If it was an Ensembl GFF, you might use instead --type
transcript</p>
<p>Note that this also loses the information about the "parent" gene
feature however, so it might be worth loading an additional track at the
gene level like</p>
<p><code>flatfile-to-json.pl --type gene --gff your_genes.gff</code></p>
<p>This track will not display the transcript and exon subfeatures, but
instead just show a box where the gene is, so this is commonly called a
"gene spans" track</p>
<p>Note: If you would like a track that displays with the transcript
subfeatures, you can use the CanvasFeatures type track (i.e. load with
flatfile-to-json.pl --type gene --trackType CanvasFeatures ...)</p>
<h3><a class="anchor" aria-hidden="true" id="why-are-my-subfeatures-being-displayed-as-separate-features"></a><a href="#why-are-my-subfeatures-being-displayed-as-separate-features" 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>Why are my subfeatures being displayed as separate features?</h3>
<p>Your GFF should use proper ID and Parent relations. Your subfeatures do
not need to themselves have IDs if they have no further subfeatures, but
they must have a Parent pointing to the Parent's ID</p>
<p>Note that it should be spelled Parent, not
PARENT</p>
<h3><a class="anchor" aria-hidden="true" id="i-get-the-error-building-and-installing-legacy-bam-to-jsonpl-support-superseded-by-direct-bam-tracks-failed-"></a><a href="#i-get-the-error-building-and-installing-legacy-bam-to-jsonpl-support-superseded-by-direct-bam-tracks-failed-" 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>I get the error "Building and installing legacy bam-to-json.pl support (superseded by direct BAM tracks) ... failed"</h3>
<p>If you get the error "Building and installing legacy bam-to-json.pl
support (superseded by direct BAM tracks) ... failed. See setup.log file
for error messages. If you really need bam-to-json.pl (most users
don't), try reading the Bio-SamTools troubleshooting guide at
<a href="https://metacpan.org/source/LDS/Bio-SamTools-1.33/README">https://metacpan.org/source/LDS/Bio-SamTools-1.33/README</a> for help
getting Bio::DB::Sam installed."</p>
<p>Then note:</p>
<ul>
<li>This error message can be ignored. It refers only to not being able
to run a small outdated feature of jbrowse.</li>
<li>If you want to fix it, the issue might refer to a conflict with the
system version of samtools. Uninstall your system samtools and then
re-run setup.sh (notably homebrew samtools causes this step to fail)</li>
<li>Again, this only refers to bam-to-json.pl, which converts entire BAM
files to json. It is better to use the add-bam-track.pl which simply
can read BAM files directly from the server with no
conversion.</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="after-i-load-my-track-it-appears-in-the-tracklist-but-the-track-appears-empty"></a><a href="#after-i-load-my-track-it-appears-in-the-tracklist-but-the-track-appears-empty" 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>After I load my track it appears in the tracklist, but the track appears empty</h3>
<p>This can happen if the chromosome names from your track don't match the
names from your reference genome.</p>
<p>Try and make sure the chromosome names from your evidence tracks match
the chromosome names from the reference genome fasta.</p>
<h3><a class="anchor" aria-hidden="true" id="my-bigwig-file-is-producing-an-error-related-to-dataview-or-jdataview"></a><a href="#my-bigwig-file-is-producing-an-error-related-to-dataview-or-jdataview" 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>My BigWig file is producing an error related to DataView or jDataView</h3>
<p>Examples of error messages</p>
<ul>
<li>RangeError: Offset is outside the bounds of the DataView (Chrome)</li>
<li>Error: jDataView length or (byteOffset+length) value is out of
bounds (Firefox)</li>
<li>RangeError: Out of bounds access (Safari)</li>
<li>RangeError: Argument 1 accesses an index that is out of range
(Firefox)</li>
</ul>
<p>Check that</p>
<ul>
<li>The file that you are using is actually the right filetype (i.e.
maybe it is a textfile, but you are giving it a bigwig file
extension)</li>
<li>The webserver you are using allows Range HTTP headers (apache,
nginx, etc should allow this by default)</li>
<li>That you aren't simply opening up your index.html without a
webserver i.e. using <file:///> protocol (which will not allow
accessing byte-range Range HTTP requests and cause this
error)</li>
</ul>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/jbrowse_desktop.html">← JBrowse Desktop</a><a class="docs-next button" href="/docs/url_strings.html">JBrowse URL parameters →</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#general">General</a><ul class="toc-headings"><li><a href="#how-do-i-get-started-with-jbrowse-quickly">How do I get started with JBrowse quickly</a></li><li><a href="#how-do-i-use-plugins-with-jbrowse">How do I use plugins with JBrowse</a></li><li><a href="#how-do-i-modify-jbrowse-source-code">How do I modify JBrowse source code</a></li><li><a href="#what-webserver-is-needed-for-jbrowse">What webserver is needed for JBrowse</a></li><li><a href="#how-do-i-run-the-code-using-the-github-clone">How do I run the code using the github clone</a></li><li><a href="#what-are-the-different-config-file-formats">What are the different config file formats?</a></li><li><a href="#what-type-of-coordinate-system-does-jbrowse-use">What type of coordinate system does JBrowse use</a></li><li><a href="#what-is-the-difference-between-canvasfeatures-and-htmlfeatures">What is the difference between CanvasFeatures and HTMLFeatures?</a></li><li><a href="#what-is-a-glyph">What is a glyph?</a></li><li><a href="#what-does-generate-namespl-do">What does generate-names.pl do?</a></li><li><a href="#what-is-the-label-in-tracklistjson-and-what-is-the-key">What is the "label" in trackList.json and what is the key?</a></li><li><a href="#how-do-i-search-for-a-feature-in-jbrowse">How do I search for a feature in JBrowse</a></li><li><a href="#how-do-i-get-full-text-descriptions-to-be-searched">How do I get full text descriptions to be searched?</a></li><li><a href="#how-do-i-set-up-multiple-genomes-in-a-single-jbrowse-instance">How do I set up multiple genomes in a single jbrowse instance?</a></li><li><a href="#what-is-the-dataset-selector">What is the dataset selector</a></li><li><a href="#how-do-i-change-the-name-that-is-displayed-on-my-features">How do I change the name that is displayed on my features</a></li><li><a href="#can-i-speed-up-jbrowse-load-time-with-vcf-and-bam-files">Can I speed up JBrowse load time with VCF and BAM files</a></li><li><a href="#can-i-speed-up-generate-namespl">Can I speed up generate-names.pl?</a></li></ul></li><li><a href="#customization">Customization</a><ul class="toc-headings"><li><a href="#how-do-i-customize-feature-colors-with-canvasfeatures">How do I customize feature colors (with CanvasFeatures)</a></li><li><a href="#how-do-i-add-a-legend-to-the-track-in-the-about-this-track-dialog">How do I add a legend to the track in the "About this track" dialog?</a></li><li><a href="#how-do-i-customize-the-dialog-boxes-for-the-features">How do I customize the dialog boxes for the features?</a></li><li><a href="#how-do-i-customize-the-main-menu-bar">How do I customize the main menu bar</a></li><li><a href="#how-do-i-customize-the-track-menu-on-a-track">How do I customize the "track menu" on a track?</a></li><li><a href="#how-do-i-customize-the-right-click-menus-on-features">How do I customize the right-click menus on features</a></li><li><a href="#how-do-i-access-data-about-my-features-in-my-callback-or-plugin">How do I access data about my features in my callback or plugin</a></li><li><a href="#how-to-get-default-tracks-to-display-every-time-a-user-opens-the-browser">How to get default tracks to display every time a user opens the browser?</a></li><li><a href="#how-can-i-embed-jbrowse-on-a-page">How can I embed JBrowse on a page</a></li><li><a href="#can-i-change-the-color-of-bases-in-the-sequence-alignments2-snpcoverage-tracks">Can I change the color of bases in the Sequence/Alignments2/SNPCoverage tracks?</a></li><li><a href="#how-can-i-link-blast-results-to-jbrowse">How can I link BLAST results to JBrowse</a></li></ul></li><li><a href="#data-loading-tips">Data loading tips</a><ul class="toc-headings"><li><a href="#how-can-i-only-load-a-specific-type-of-feature-from-my-gff-file">How can I only load a specific type of feature from my GFF file?</a></li><li><a href="#what-if-i-dont-want-to-load-the-sequence-data-for-the-genome-but-i-want-to-display-the-features">What if I dont want to load the sequence data for the genome, but I want to display the features?</a></li><li><a href="#how-do-i-convert-gtf-to-gff">How do I convert GTF to GFF</a></li></ul></li><li><a href="#other">Other</a><ul class="toc-headings"><li><a href="#can-i-get-started-with-jbrowse-without-all-the-fuss-of-setupsh-and-what-not">Can I get started with JBrowse without all the fuss of setup.sh and what-not</a></li><li><a href="#can-i-install-the-perl-packages-using-cpanm">Can I install the perl packages using cpanm?</a></li><li><a href="#why-does-my-tracklistjson-contain-classname-even-on-canvasfeatures">Why does my trackList.json contain "className" (even on CanvasFeatures?)</a></li><li><a href="#how-do-i-create-a-tabix-indexed-gff">How do I create a Tabix indexed GFF</a></li><li><a href="#how-do-i-create-a-indexed-fasta">How do I create a Indexed FASTA?</a></li><li><a href="#how-do-i-install-a-plugin">How do I install a plugin</a></li><li><a href="#can-i-create-an-adaptor-for-an-existing-web-service">Can I create an adaptor for an existing web service?</a></li><li><a href="#what-is-a-plugin-useful-for">What is a plugin useful for?</a></li><li><a href="#what-background-should-i-have-for-creating-a-plugin">What background should I have for creating a plugin</a></li><li><a href="#how-do-i-create-a-plugin">How do I create a plugin?</a></li></ul></li><li><a href="#setup">Setup</a><ul class="toc-headings"><li><a href="#how-do-i-get-started-with-installing-jbrowse">How do I get started with installing JBrowse?</a></li><li><a href="#how-do-i-load-my-genome-as-a-fasta-file">How do I load my genome as a FASTA file?</a></li><li><a href="#how-do-i-setup-a-gff-track">How do I setup a GFF track?</a></li><li><a href="#how-do-i-set-up-a-bam-file">How do I set up a BAM file?</a></li><li><a href="#how-do-i-set-up-a-bigwig-file">How do I set up a BigWig file?</a></li><li><a href="#how-do-i-set-up-a-vcf-file">How do I set up a VCF file?</a></li><li><a href="#how-do-i-get-indexedfasta-track-to-work-in-jbrowse">How do I get IndexedFasta track to work in JBrowse</a></li></ul></li><li><a href="#tips-and-tricks">Tips and tricks</a><ul class="toc-headings"><li><a href="#how-can-i-get-jbrowse-to-update-the-url-of-a-parent-page-when-jbrowse-is-inside-of-an-iframe">How can I get jbrowse to update the URL of a parent page when jbrowse is inside of an iframe</a></li><li><a href="#can-i-use-jbrowse-with-phantomjs">Can I use JBrowse with phantomJS?</a></li><li><a href="#can-i-run-jbrowse-on-github-pages">Can I run JBrowse on GitHub pages?</a></li><li><a href="#what-is-the-benefit-of-using-biodb-to-jsonpl">What is the benefit of using biodb-to-json.pl?</a></li><li><a href="#can-i-make-an-ultra-compact-setting-on-my-features">Can I make an ultra-compact setting on my features?</a></li><li><a href="#can-i-disable-the-histograms-on-a-track">Can I disable the histograms on a track?</a></li><li><a href="#can-i-visualize-junctions-from-rna-seq-data">Can I visualize junctions from RNA-seq data</a></li><li><a href="#can-i-view-gccontent-on-my-sequence-data">Can I view GCContent on my sequence data?</a></li><li><a href="#can-i-view-gwas-results-in-jbrowse">Can I view GWAS results in JBrowse?</a></li><li><a href="#what-do-the-colors-mean-on-the-bam-files-for-jbrowse">What do the colors mean on the BAM files for JBrowse</a></li><li><a href="#can-i-use-rna-seq-with-jbrowse">Can I use RNA-seq with JBrowse</a></li><li><a href="#can-i-use-long-reads-with-jbrowse">Can I use long reads with JBrowse?</a></li><li><a href="#can-i-have-subtracks-in-jbrowse">Can I have subtracks in JBrowse?</a></li><li><a href="#how-do-i-get-coverage-for-a-bam-file">How do I get coverage for a BAM file?</a></li><li><a href="#can-i-zoom-even-closer-to-the-base-level">Can I zoom even closer to the base level?</a></li><li><a href="#how-do-i-change-the-color-of-bigwig-dynamically">How do I change the color of bigwig dynamically</a></li></ul></li><li><a href="#track-selector">Track selector</a><ul class="toc-headings"><li><a href="#how-do-i-add-categories-to-the-hierarchical-data-selector">How do I add categories to the Hierarchical data selector?</a></li><li><a href="#how-do-i-collapse-categories-in-the-hierarchical-data-selector-by-default">How do I collapse categories in the Hierarchical data selector by default?</a></li></ul></li><li><a href="#troubleshooting">Troubleshooting</a><ul class="toc-headings"><li><a href="#setupsh-installing-perl-prerequisites-fails-for-me-why">Setup.sh "Installing perl prerequisites" fails for me, why?</a></li><li><a href="#should-i-be-worried-about-the-error-building-and-installing-legacy-wiggle-format-superceded-by-bigwig-tracks-failed">Should I be worried about the error "Building and installing legacy wiggle format (superceded by BigWig tracks)...failed"?</a></li><li><a href="#i-see-a-message-that-says-congratulations-jbrowse-is-on-the-web-but-i-don-t-see-my-genome">I see a message that says "Congratulations, JBrowse is on the web" but I don't see my genome</a></li><li><a href="#what-is-this-error-during-setupsh-no-such-file-or-directory-at-loader-0x13517b30-app-cpanminus-scriptpm-line-224">What is this error during setup.sh "No such file or directory at /loader/0x13517b30/App/cpanminus/script.pm line 224."</a></li><li><a href="#what-is-integer-overflow-error">What is "Integer overflow error"?</a></li><li><a href="#why-do-i-get-a-popup-saying-error-reading-from-name-store">Why do I get a popup saying "Error reading from name store"?</a></li><li><a href="#what-is-this-error-message-argument-isn-t-numeric-in-addition-loading-gff3">What is this error message "Argument isn't numeric in addition (+)" loading GFF3?</a></li><li><a href="#it-keeps-showing-too-much-data-on-my-track-how-do-i-fix-it-and-make-my-track-display">It keeps showing "too much data" on my track. How do I fix it and make my track display?</a></li><li><a href="#i-get-the-error-too-much-datachunk-size-xxxxx-exceeds-chunksizelimit">I get the error "Too much data...chunk size xxxxx exceeds chunkSizeLimit"</a></li><li><a href="#i-set-a-value-in-my-config-file-but-it-isn-t-working-why-not">I set a value in my config file but it isn't working. Why not?</a></li><li><a href="#i-get-the-error-too-many-open-files-opening-bucket-log-with-generate-namespl">I get the error "Too many open files opening bucket log" with generate-names.pl</a></li><li><a href="#how-do-i-fix-the-not-a-bam-file-issue">How do I fix the "Not a BAM file" issue?</a></li><li><a href="#what-is-the-error-invalid-bgzf-header-on-my-vcf-files">What is the error "invalid BGZF header" on my VCF files?</a></li><li><a href="#my-track-doesn-t-display-the-gene-names-but-i-expected-it-to-why-not">My track doesn't display the gene names, but I expected it to. Why not?</a></li><li><a href="#why-does-my-track-keep-saying-loading">Why does my track keep saying "Loading"?</a></li><li><a href="#my-canvasfeatures-don-t-show-up-with-subfeatures-why-not">My CanvasFeatures don't show up with subfeatures, why not?</a></li><li><a href="#my-htmlfeatures-don-t-show-up-with-subfeatures-why-not">My HTMLFeatures don't show up with subfeatures, why not?</a></li><li><a href="#why-are-my-subfeatures-being-displayed-as-separate-features">Why are my subfeatures being displayed as separate features?</a></li><li><a href="#i-get-the-error-building-and-installing-legacy-bam-to-jsonpl-support-superseded-by-direct-bam-tracks-failed-">I get the error "Building and installing legacy bam-to-json.pl support (superseded by direct BAM tracks) ... failed"</a></li><li><a href="#after-i-load-my-track-it-appears-in-the-tracklist-but-the-track-appears-empty">After I load my track it appears in the tracklist, but the track appears empty</a></li><li><a href="#my-bigwig-file-is-producing-an-error-related-to-dataview-or-jdataview">My BigWig file is producing an error related to DataView or jDataView</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>