@gmod/jbrowse

<!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