@gmod/jbrowse

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>JBrowse URL parameters · JBrowse</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="# Controlling JBrowse with the URL Query String"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="JBrowse URL parameters · JBrowse"/><meta property="og:type" content="website"/><meta property="og:url" content="https://jbrowse.org/index.html"/><meta property="og:description" content="# Controlling JBrowse with the URL Query String"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/img/favicon.ico"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><link rel="alternate" type="application/atom+xml" href="https://jbrowse.org/blog/atom.xml" title="JBrowse Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://jbrowse.org/blog/feed.xml" title="JBrowse Blog RSS Feed"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><link rel="stylesheet" href="/css/main.css"/></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><h2 class="headerTitle">JBrowse</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/blog" target="_self">Blog</a></li><li class="siteNavGroupActive"><a href="/docs/installation.html" target="_self">Documentation</a></li><li class=""><a href="/en/demos.html" target="_self">Demos</a></li><li class=""><a href="/en/developers.html" target="_self">Developers</a></li><li class=""><a href="/en/contact.html" target="_self">Contact</a></li><li class=""><a href="/en/references.html" target="_self">References</a></li><li class=""><a href="/en/help.html" target="_self">Help</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Other topics</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">Tutorial</h3><ul><li class="navListItem"><a class="navItem" href="/docs/installation.html">Installation</a></li><li class="navListItem"><a class="navItem" href="/docs/tutorial.html">Indexed file formats tutorial</a></li><li class="navListItem"><a class="navItem" href="/docs/tutorial_classic.html">Classic quick-start guide</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Configuring tracks</h3><ul><li class="navListItem"><a class="navItem" href="/docs/reference_sequence.html">Reference sequence configuration</a></li><li class="navListItem"><a class="navItem" href="/docs/canvas_features.html">CanvasFeatures</a></li><li class="navListItem"><a class="navItem" href="/docs/html_features.html">HTMLFeatures</a></li><li class="navListItem"><a class="navItem" href="/docs/alignments.html">Alignments tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/bigwig.html">Wiggle/BigWig Tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/variants.html">VCF tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/minimal.html">Minimal JBrowse configurations</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Advanced configuration</h3><ul><li class="navListItem"><a class="navItem" href="/docs/embedding.html">Embedding JBrowse</a></li><li class="navListItem"><a class="navItem" href="/docs/mouse_configs.html">Mouse clicks, menus, and popups</a></li><li class="navListItem"><a class="navItem" href="/docs/configuration_file_formats.html">Configuration File Formats</a></li><li class="navListItem"><a class="navItem" href="/docs/dataset_selector.html">Dataset Selector</a></li><li class="navListItem"><a class="navItem" href="/docs/track_selectors.html">Track Selectors</a></li><li class="navListItem"><a class="navItem" href="/docs/track_metadata.html">Track Metadata</a></li><li class="navListItem"><a class="navItem" href="/docs/global_options.html">Global configuration options</a></li><li class="navListItem"><a class="navItem" href="/docs/compression.html">Compressing JBrowse data</a></li><li class="navListItem"><a class="navItem" href="/docs/authentication.html">HTTP authentication for JBrowse</a></li><li class="navListItem"><a class="navItem" href="/docs/paired_reads.html">Paired read viewing</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Command line</h3><ul><li class="navListItem"><a class="navItem" href="/docs/flatfile-to-json.pl.html">flatfile-to-json.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/remove-track.pl.html">remove-track.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/ucsc-to-json.pl.html">ucsc-to-json.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/generate-names.pl.html">generate-names.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/prepare-refseqs.pl.html">prepare-refseqs.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/biodb-to-json.pl.html">biodb-to-json.pl</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">JBrowse Desktop</h3><ul><li class="navListItem"><a class="navItem" href="/docs/jbrowse_desktop.html">JBrowse Desktop</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">FAQ</h3><ul><li class="navListItem"><a class="navItem" href="/docs/faq.html">JBrowse FAQ</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Other topics</h3><ul><li class="navListItem navListItemActive"><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 URL parameters</h1></header><article><div><span><h1><a class="anchor" aria-hidden="true" id="controlling-jbrowse-with-the-url-query-string"></a><a href="#controlling-jbrowse-with-the-url-query-string" 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>Controlling JBrowse with the URL Query String</h1> <h2><a class="anchor" aria-hidden="true" id="overview-of-url-query-string-params"></a><a href="#overview-of-url-query-string-params" 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>Overview of URL Query String params</h2> <p>List of default available JBrowse URL params, more details below</p> <table> <thead> <tr><th>Option</th><th>Value</th></tr> </thead> <tbody> <tr><td>data</td><td>Set the data directory being used. If you have multiple data directories, then you can select the active one using <a href="http://mysite/jbrowse/?data=rice">http://mysite/jbrowse/?data=rice</a> or <a href="http://mysite/jbrowse/?loc=soybean">http://mysite/jbrowse/?loc=soybean</a> (also see <a href="#configuration-loading-details" title="wikilink">Configuration_loading_details</a> and <a href="http://gmod.org/wiki/JBrowse_FAQ#How_do_I_set_up_multiple_genomes_in_a_single_jbrowse_instance.3F" title="wikilink">Multiple_genomes</a>)</td></tr> <tr><td>loc</td><td>A location, specified as "<a href="chr:start..end">chr:start..end</a>" or gene identifier (which is searched from a name store generated by <a href="http://generate-names.pl">generate-names.pl</a>) e.g. <a href="http://mysite/jbrowse/?loc=chr1:0..1000">http://mysite/jbrowse/?loc=chr1:0..1000</a></td></tr> <tr><td>highres</td><td>A configuration for highResolutionMode. Available since JBrowse 1.12.3. Can be auto,disabled, or a specific scaling ratio such as 2,3</td></tr> <tr><td>fullviewlink,menu,nav,overview,tracklist</td><td>Boolean to add or remove different components of the UI. Can be set to false to remove</td></tr> <tr><td>tracks</td><td>Set a list of active tracks, comma separated list of *track labels* e.g. <a href="http://mysite/jbrowse/?tracks=DNA,GeneTrack">http://mysite/jbrowse/?tracks=DNA,GeneTrack</a></td></tr> <tr><td>highlight</td><td>Set a highlighted region, same format as loc param</td></tr> <tr><td>addFeatures,addStores,addTracks,addBookmarks</td><td>A JSON configuration for extra track info. See below for detailed descriptions</td></tr> </tbody> </table> <p>JBrowse's default index.html file provides a number of options for changing the current view in the browser by adding query parameters to the URL. Developers' note: these URL parameters are handled only in the default index.html that ships with JBrowse; the JBrowse code itself does not pay attention to URL parameters.</p> <p>Basic syntax:</p> <pre><code class="hljs">http://<span class="hljs-symbol"><server></span>/<path <span class="hljs-keyword">to</span> jbrowse>?<span class="hljs-keyword">loc</span>=<location <span class="hljs-built_in">string</span>>&tracks=<tracks <span class="hljs-keyword">to</span> show> </code></pre> <h2><a class="anchor" aria-hidden="true" id="data"></a><a href="#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>data</h2> <p>Optional relative (or absolute) URL of the base directory from which JBrowse will load data. Defaults to 'data'.</p> <h2><a class="anchor" aria-hidden="true" id="loc"></a><a href="#loc" 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>loc</h2> <p>The initial genomic position which will be visible in the viewing field. Possible input strings are:</p> <p><strong>"Chromosome"+":"+ start point + ".." + end point</strong></p> <p>A chromosome name/ID followed by “:”, starting position, “..” and end position of the genome to be viewed in the browser is used as an input. Chromosome ID can be either a string or a mix of string and numbers. “CHR” to indicate chromosome may or may not be used. Strings are not case-sensitive. If the chromosome ID is found in the database reference sequence (RefSeq), the chromosome will be shown from the starting position to the end position given in URL.</p> <p><code>example) ctgA:100..200</code> <code>Chromosome ctgA will be displayed from position 100 to 200.</code></p> <p>OR <strong>start point + ".." + end point</strong></p> <p>A string of numerical value, “..” and another numerical value is given with the loc option. JBrowse navigates through the currently selected chromosome from the first numerical value, start point, to the second numerical value, end point.</p> <p><code>example) 200..600</code></p> <p>OR <strong>center base</strong></p> <p>If only one numerical value is given as an input, JBrowse treats the input as the center position. Then an arbitrary region of the currently selected gene is displayed in the viewing field with the given input position as basepair position on which to center the view.</p> <p>OR <strong>feature name/ID</strong></p> <p>If a string or a mix of string and numbers are entered as an input, JBrowser treats the input as a feature name/ID of a gene. If the ID exists in the database RefSeq, JBrowser displays an arbitrary region of the feature from the the position 0, starting position of the gene, to a certain end point.</p> <p><code>example) ctgA</code></p> <h2><a class="anchor" aria-hidden="true" id="tracks"></a><a href="#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>tracks</h2> <p>parameters are comma-delimited strings containing track names, each of which should correspond to the "label" element of the track information dictionaries that are currently viewed in the viewing field. Names for the tracks can be found in data/trackInfo.js in jbrowse-1.2.1 folder.</p> <p>Example:</p> <p><code>tracks=DNA,knownGene,ccdsGene,snp131,pgWatson,simpleRepeat</code></p> <h2><a class="anchor" aria-hidden="true" id="highlight"></a><a href="#highlight" 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>highlight</h2> <p>location string to highlight. Example:</p> <p><code>highlight=ctgA:100..200</code></p> <h2><a class="anchor" aria-hidden="true" id="addfeatures"></a><a href="#addfeatures" 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>addFeatures</h2> <p>Available in JBrowse 1.10.0 and above. This variable accepts feature data in JSON format in the form:</p> <p><code>[{ "seq_id":"ctgA", "start": 123, "end": 456, "name": "MyBLASTHit"},...}]</code></p> <p>which, when URI-escaped and put in the query string, looks like:</p> <p><code>addFeatures=%5B%7B%20%22seq_id%22%3A%22ctgA%22%2C%20%22start%22%3A%20123%2C%20%22end%22%3A%20456%2C%20%22name%22%3A%20%22MyBLASTHit%22%7D%5D</code></p> <p>in dot-notation, the second number is the order of the feature object in the JSONArray:</p> <p><code>addFeatures.<featurenumber>.<values></code></p> <p>e.g.</p> <p><code>addFeatures.1.seq_id=ctgA&addFeatures.1.start=123&addFeatures.1.start=456&addFeatures.1.name=MyBLASTHit&addFeatures.2.seq_id=...</code></p> <p>Developers integrating JBrowse into larger project may find this feature useful for displaying results from other non-JavaScript-based applications (such as web BLAST tools) in JBrowse.</p> <p>Features added to JBrowse in this way are available in a special data store named <code>url</code>, which can be specified in a track configuration by adding <code>"store":"url"</code>.</p> <h2><a class="anchor" aria-hidden="true" id="addtracks"></a><a href="#addtracks" 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>addTracks</h2> <p>This variable accepts track configurations in JSON format to be added to the tracks already in the JBrowse configuration, in the form:</p> <p><code>[{"label":"mytrack","type":"JBrowse/View/Track/HTMLFeatures","store":"myUniqueStore"}]</code></p> <p>which, when URI-escaped and put in the query string, looks like:</p> <p><code>addTracks=%5B%7B%22label%22%3A%22mytrack%22%2C%22type%22%3A%22JBrowse%2FView%2FTrack%2FHTMLFeatures%22%2C%22store%22%3A%22myUniqueStore%22%7D%5D</code></p> <p>using <a href="https://github.com/rhalff/dot-object">dot notation</a>. See release-notes.txt for more details:</p> <p><code>addTracks.myUniqueStore.label=mytrack&addTracks.myUniqueStore.myUniqueStore.type=JBrowse/View/Track/HTMLFeatures</code></p> <p>If you are not adding a store, make the store name 'none' (addTracks.none.label).</p> <h2><a class="anchor" aria-hidden="true" id="addstores"></a><a href="#addstores" 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>addStores</h2> <p>This variable accepts store configurations in JSON format to be added to the stores already in the JBrowse configuration, in the form:</p> <pre><code class="hljs"> { <span class="hljs-attr">"uniqueStoreName"</span>: { <span class="hljs-attr">"type"</span>:<span class="hljs-string">"JBrowse/Store/SeqFeature/GFF3"</span>, <span class="hljs-attr">"urlTemplate"</span>: <span class="hljs-string">"url/of/my/file.gff3"</span> } } </code></pre> <p>which, when URI-escaped and put in the query string, looks like:</p> <p><code>addStores=%7B%22uniqueStoreName%22%3A%7B%22type%22%3A%22JBrowse%2FStore%2FSeqFeature%2FGFF3%22%2C%22urlTemplate%22%3A%22url%2Fof%2Fmy%2Ffile.gff3%22%7D%7D</code></p> <p>using <a href="https://github.com/rhalff/dot-object">dot notation</a>. See release-notes.txt for more details:</p> <p><code>addStores.uniqueStoreName.type=JBrowse/Store/SeqFeature/GFF3&addStores.uniqueStoreName.urlTemplate=url/of/my/file.gff3</code></p> <p>One example is to use addStores combined with addTracks to dynamically load a remote file. Thanks to vkrishna for the example</p> <p><code>addStores={"url":{"type":"JBrowse/Store/SeqFeature/GFF3","urlTemplate":"http://host/genes.gff"}}&addTracks=[{"label":"genes","type":"JBrowse/View/Track/CanvasFeatures","store":"url"}]</code></p> <p>Another example if you want to not provide the entire URL to the store (e.g. provide a path relative to data directory instead of <a href="http://host/genes.gff">http://host/genes.gff</a>) is to use a combination of the baseUrl and the {dataRoot} variables. This example adds a VCF track:</p> <p><code>addStores={"mystore":{"type":"JBrowse/Store/SeqFeature/VCFTabix","baseUrl":".","urlTemplate":"{dataRoot}/combined.vcf.gz"}}&addTracks=[{"label":"variants","type":"JBrowse/View/Track/CanvasVariants","store":"mystore"}]</code></p> <p>In dot-notation:</p> <p><code>addStores.mystore.type=JBrowse/Store/SeqFeature/VCFTabix&addStores.mystore.baseUrl=.&addStores.mystore.urlTemplate="{dataRoot}/combined.vcf.gz"&addTracks.mystore.label=variants&addTracks.mystore.type=Browse/View/Track/CanvasVariants</code></p> <p>Thanks to biojiangke for inquiring about the above example.</p> <h2><a class="anchor" aria-hidden="true" id="addbookmarks"></a><a href="#addbookmarks" 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>addBookmarks</h2> <p>Bookmarks are available in JBrowse starting in 1.12.2, which allows you to add static coloured overlays to specific regions of the genome.</p> <p>This variable accepts <a href="#bookmarking-regions" title="wikilink">track bookmarks</a> (similar to highlights) in JSON format to be added to the tracks already in the JBrowse configuration, in the form:</p> <p><code>[{"start":5500,"end":6000,"color": "rgba(190,50,50,0.5)","ref": "ctgB"}]</code></p> <p>which, when URI-escaped and put in the query string, looks like:</p> <p><code>addBookmarks=%5B%7B%22start%22%3A5500%2C%22end%22%3A6000%2C%22color%22%3A%20%22rgba(190%2C50%2C50%2C0.5)%22%2C%22ref%22%3A%20%22ctgB%22%7D%5D</code></p> <p>using <a href="https://github.com/rhalff/dot-object">dot notation</a>. See release-notes.txt for more details:</p> <p><code>addBookmarks.start=5500&addBookmarks.end=6000&addBookmarks.color="rgba(190,50,50,0.5)"&addBookmarks.ref=ctgB</code></p> <p>Bookmarks can also be manually added to the configuration, e.g. tracks.conf:</p> <pre><code class="hljs"> [ bookmarks ] features+= <span class="hljs-string">json:</span>{<span class="hljs-string">"start"</span>:<span class="hljs-number">5000</span>,<span class="hljs-string">"end"</span>:<span class="hljs-number">5750</span>,<span class="hljs-string">"color"</span>: <span class="hljs-string">"rgba(190,50,50,0.5)"</span>,<span class="hljs-string">"ref"</span>: <span class="hljs-string">"ctgB"</span>} features+= <span class="hljs-string">json:</span>{<span class="hljs-string">"start"</span>:<span class="hljs-number">5500</span>,<span class="hljs-string">"end"</span>:<span class="hljs-number">6000</span>,<span class="hljs-string">"color"</span>: <span class="hljs-string">"rgba(190,50,50,0.5)"</span>,<span class="hljs-string">"ref"</span>: <span class="hljs-string">"ctgB"</span>} </code></pre> <p>They can also be retrieved from a remote "bookmark API", which receives a query parameter "sequence" for the current refseq and returns data in the JSON format similar to above</p> <p><code>bookmarkService=http://yourbookmarkservice.com/jbrowseBookmark</code></p> <p>An example appears in the Volvox example, on ctgB.</p> <p><img src="http://gmod.org/mediawiki/images/6/68/JBrowse_bookmarks_example_a.png" alt="JBrowse_bookmarks_example_a.png>"></p> <h1><a class="anchor" aria-hidden="true" id="embedded-mode"></a><a href="#embedded-mode" 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>Embedded mode</h1> <p>JBrowse's included <code>index.html</code> file supports three URL query arguments that can turn off the JBrowse track list, navigation bar, and overview bar, respectively. When all three of these are turned off, the only thing visible are the displayed tracks themselves, and JBrowse could be said to be running in a kind of "embedded mode".</p> <p>The three parameters used for this are <code>nav</code>, <code>tracklist</code>, <code>menu</code> and <code>overview</code>. If any of these are set to 0, that part of the JBrowse interface is hidden.</p> <p>For example, you could put the embedded-mode JBrowse in an iframe, like this:</p> <pre><code class="hljs"><span class="hljs-tag"><<span class="hljs-name">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">title</span>></span> JBrowse Embedded <span class="hljs-tag"></<span class="hljs-name">title</span>></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">body</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span> Embedded Volvox JBrowse <span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 400px; margin: 0 auto;"</span>></span> <span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"border: 1px solid black"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../../index.html?data=sample_data/json/volvox&tracklist=0&nav=0&overview=0&tracks=DNA%2CExampleFeatures%2CNameTest%2CMotifs%2CAlignments%2CGenes%2CReadingFrame%2CCDS%2CTranscript%2CClones%2CEST"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"300"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"300"</span>></span> <span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> </code></pre> <p>Note that if you are embedding with an iframe, it can be useful to keep the functionality that jbrowse has to update the URL bar in the parent frame. See this FAQ entry for details <a href="http://gmod.org/wiki/JBrowse_FAQ#How_can_I_get_jbrowse_to_update_the_URL_of_a_parent_page_when_jbrowse_is_inside_of_an_iframe">http://gmod.org/wiki/JBrowse_FAQ#How_can_I_get_jbrowse_to_update_the_URL_of_a_parent_page_when_jbrowse_is_inside_of_an_iframe</a></p> </span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/faq.html">← JBrowse FAQ</a><a class="docs-next button" href="/docs/image_tracks.html">Pre-rendered Image Tracks →</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#overview-of-url-query-string-params">Overview of URL Query String params</a></li><li><a href="#data">data</a></li><li><a href="#loc">loc</a></li><li><a href="#tracks">tracks</a></li><li><a href="#highlight">highlight</a></li><li><a href="#addfeatures">addFeatures</a></li><li><a href="#addtracks">addTracks</a></li><li><a href="#addstores">addStores</a></li><li><a href="#addbookmarks">addBookmarks</a></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>