@gmod/jbrowse
Version:
JBrowse - client-side genome browser
131 lines (127 loc) • 25.9 kB
HTML
<html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Paired read viewing · JBrowse</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="In JBrowse 1.16.0, paired read viewing was introduced to help visualize alignments data. Paired reads are enabled on Alignments2 tracks. Note that this incurs some high memory usage especially on high coverage data files so please use carefully."/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Paired read viewing · JBrowse"/><meta property="og:type" content="website"/><meta property="og:url" content="https://jbrowse.org/index.html"/><meta property="og:description" content="In JBrowse 1.16.0, paired read viewing was introduced to help visualize alignments data. Paired reads are enabled on Alignments2 tracks. Note that this incurs some high memory usage especially on high coverage data files so please use carefully."/><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>Advanced configuration</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 navListItemActive"><a class="navItem" href="/docs/paired_reads.html">Paired read viewing</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Command line</h3><ul><li class="navListItem"><a class="navItem" href="/docs/flatfile-to-json.pl.html">flatfile-to-json.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/remove-track.pl.html">remove-track.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/ucsc-to-json.pl.html">ucsc-to-json.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/generate-names.pl.html">generate-names.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/prepare-refseqs.pl.html">prepare-refseqs.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/biodb-to-json.pl.html">biodb-to-json.pl</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">JBrowse Desktop</h3><ul><li class="navListItem"><a class="navItem" href="/docs/jbrowse_desktop.html">JBrowse Desktop</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">FAQ</h3><ul><li class="navListItem"><a class="navItem" href="/docs/faq.html">JBrowse FAQ</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Other topics</h3><ul><li class="navListItem"><a class="navItem" href="/docs/url_strings.html">JBrowse URL parameters</a></li><li class="navListItem"><a class="navItem" href="/docs/image_tracks.html">Pre-rendered Image Tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/feature_coverage.html">Feature Coverage Tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/screenshots.html">Automating screenshots of JBrowse</a></li><li class="navListItem"><a class="navItem" href="/docs/events.html">JBrowse Subscribe/Publish events</a></li><li class="navListItem"><a class="navItem" href="/docs/perl_config.html">Sample configuration bash script</a></li><li class="navListItem"><a class="navItem" href="/docs/data_formats.html">JBrowse REST API and Data APIs</a></li><li class="navListItem"><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">Paired read viewing</h1></header><article><div><span><p>In JBrowse 1.16.0, paired read viewing was introduced to help visualize alignments data. Paired reads are enabled on Alignments2 tracks. Note that this incurs some high memory usage especially on high coverage data files so please use carefully.</p>
<h2><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</h2>
<p>The paired read visualizations are enabled on Alignments2 track types. By changing the glyph, you can enable the different paired visualizations on the Alignments2 tracks</p>
<table>
<thead>
<tr><th>Option</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><code>JBrowse/View/FeatureGlyph/PairedArc</code></td><td>This plots arcs connecting read pairs</td></tr>
<tr><td><code>JBrowse/View/FeatureGlyph/PairedReadCloud</code></td><td>This plots reads according to their insert size on the Y-axis</td></tr>
<tr><td><code>JBrowse/View/FeatureGlyph/PairedAlignment</code></td><td>This enables a pileup view of paired alignments</td></tr>
</tbody>
</table>
<p>Note that the <code>PairedReadCloud</code> and <code>PairedAlignment</code> use a config parameter <code>maxInsertSize</code> which only resolves read pairs within a specific insert size. The default <code>maxInsertSize</code> is 50,000bp. For larger insert sizes, the <code>PairedArc</code> track can be used, which is able to plot larger information. The reason for this is the <code>PairedArc</code> view does not need to actually resolve both reads, but can use information from one read to draw towards the other one. The <code>PairedReadCloud</code> and <code>PairedAlignment</code> both need to resolve the read information before it can be plotted.</p>
<h2><a class="anchor" aria-hidden="true" id="algorithm-explanation"></a><a href="#algorithm-explanation" 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>Algorithm explanation</h2>
<p>For paired read pileup and read cloud views, a window of size <code>maxInsertSize</code> needs to be fetched surrounding the current view in order to properly resolve the pairs.</p>
<p>For the arc view, a window size corresponding to the current viewed window must be fetched, but proper resolution of the read pairs is not needed.</p>
<p>The reason things can become complicated is because JBrowse has small "block sizes" in the view area (several blocks exist on a single visible window) and if a read is paired on either side of a block, then without any extra information it will not be rendered in the in-between block.</p>
<h2><a class="anchor" aria-hidden="true" id="insert-size-estimation"></a><a href="#insert-size-estimation" 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>Insert size estimation</h2>
<p>Insert size is estimated from reads in the current view, and max insert size and min insert size are estimated as 3 standard deviations from normal. It is done at track startup and then is not changed dynamically, so that it remains a constant value for consistent drawing purposes.</p>
<p>There is a track menu option to "Re-estimate insert size stats" from features in your current view. It only enables if more than <code>insertStatsCacheMin=400</code> features are detected that have insert sizes in the range <code>insertStatsMaxSize</code> and <code>insertStatsMinSize</code>. It depends on <code>template_length</code> being defined on the feature (TLEN).</p>
<p>Several params specific for insert size estimation can be applied</p>
<table>
<thead>
<tr><th>Option</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><code>insertStatsCacheMin</code></td><td>Minimum number of reads to estimate insert size</td></tr>
<tr><td><code>insertStatsMaxSize</code></td><td>The maximum insert size to consider for stats estimation</td></tr>
<tr><td><code>insertStatsMinSize</code></td><td>The minimum insert size to consider for stats estimation</td></tr>
</tbody>
</table>
<h2><a class="anchor" aria-hidden="true" id="color-options"></a><a href="#color-options" 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>Color options</h2>
<table>
<thead>
<tr><th>Option</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><code>colorByOrientation</code></td><td>Plots pair colors according to their orientation</td></tr>
<tr><td><code>colorByOrientationAndSize</code></td><td>Plots pair colors according to their orientation along with insert size</td></tr>
<tr><td><code>colorBySize</code></td><td>Plots pair colors according to their insert size</td></tr>
<tr><td><code>colorByMAPQ</code></td><td>Plots reads according to the mapped quality</td></tr>
</tbody>
</table>
<p>Note that style.color can also still be a callback function</p>
<p>Also note that the <code>colorByOrientation</code>, <code>colorBySize</code>, and <code>colorByOrientationAndSize</code> all depend on paired read data being viewed, and can be used in both unpaired and paired alignments views.</p>
<h2><a class="anchor" aria-hidden="true" id="feature-colors"></a><a href="#feature-colors" 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>Feature colors</h2>
<table>
<thead>
<tr><th>Option</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><code>style→color_pair_lr</code></td><td>Default: grey</td></tr>
<tr><td><code>style→color_pair_rr</code></td><td>Default: navy</td></tr>
<tr><td><code>style→color_pair_rl</code></td><td>Default: teal</td></tr>
<tr><td><code>style→color_pair_ll</code></td><td>Default: green</td></tr>
<tr><td><code>style→color_interchrom</code></td><td>Default: orange</td></tr>
<tr><td><code>style→color_longinsert</code></td><td>Default: red</td></tr>
<tr><td><code>style→color_shortinsert</code></td><td>Default: pink</td></tr>
</tbody>
</table>
<h2><a class="anchor" aria-hidden="true" id="more-configuration"></a><a href="#more-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>More configuration</h2>
<table>
<thead>
<tr><th>Option</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><code>orientationType</code></td><td>Different sequencing technologies generate pairs of different orientations. Default <code>fr</code> for paired end sequencing. Mate pair is <code>rf</code>. Solexa is <code>ff</code>. See <a href="https://software.broadinstitute.org/software/igv/interpreting_pair_orientations">https://software.broadinstitute.org/software/igv/interpreting_pair_orientations</a></td></tr>
<tr><td><code>maxInsertSize</code></td><td>Default: 50,000bp. Corresponds to the maximum range to fetch pairs across. Affects the store class algorithm for pairing reads together, and larger values can slow down the browser. Consider using airedArc tracks to view longer range pairings as this does not affect the store class algorithm as significantly.</td></tr>
</tbody>
</table>
<h2><a class="anchor" aria-hidden="true" id="paired-arc-specific"></a><a href="#paired-arc-specific" 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>Paired arc specific</h2>
<table>
<thead>
<tr><th>Option</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><code>showLargeArcs</code></td><td>Draws arcs larger than <code>maxInsertSize</code>. Default true, the only reason to turn off perhaps is if the alignments are too cluttered and slowed down by many long range arcs.</td></tr>
<tr><td><code>showInterchromosomal</code></td><td>Draws vertical lines indicating a interchromosomal pairing</td></tr>
</tbody>
</table>
<h2><a class="anchor" aria-hidden="true" id="read-cloud-specific"></a><a href="#read-cloud-specific" 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>Read cloud specific</h2>
<table>
<thead>
<tr><th>Option</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><code>readCloudLogScale</code></td><td>Boolean for drawing the insert size distribution on a log scale or not. Default: true. Can be changed via the track menu. Linear can sometimes help distinguish more nuance in the insert sizes.</td></tr>
<tr><td><code>readCloudYScaleMax</code></td><td>Sets a maximum value based on the insert size units, can be changed via the track menu</td></tr>
</tbody>
</table>
<h2><a class="anchor" aria-hidden="true" id="for-developers"></a><a href="#for-developers" 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>For developers</h2>
<p>The paired read visualizations have been tested on both BAM and CRAM data types. If you are implementing your own custom store class with paired read data support, you must implement for your feature types:</p>
<ul>
<li>a method that can be called as yourfeature.pairedFeature() method that returns true</li>
<li>data attributes the reads called yourfeature.read1 and yourfeature.read2</li>
</ul>
<p>Furthermore store class must implement usage of the <code>InsertSizeCache</code> for insert size stats estimation, <code>SpanCache</code> for the PairedArc visualization, and <code>PairCache</code> for the <code>PairedAlignment</code> and <code>PairedReadCloud</code> visualizations. See the BAM and CRAM store class implementations for these.</p>
<h2><a class="anchor" aria-hidden="true" id="screenshots"></a><a href="#screenshots" 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>Screenshots</h2>
<p><img src="/docs/assets/config/JBrowse_paired_reads.png" alt="center|1124px|border|JBrowse displaying paired-read pileup and arc"></p>
<p>Figure 1. Mate pair libraries showing the pileup view and arc view of the same data. The pileup view has <code>colorByOrientationAndSize</code> turned on, and the below has only <code>colorByOrientation</code> turned on. The red lines indicate abnormally large insert size.</p>
<p><img src="/docs/assets/config/JBrowse_paired_read_cloud.png" alt="center|1124px|border|JBrowse displaying paired-read cloud"></p>
<p>Figure 2. The read cloud view of the same data, using on top the linear-scale and on the bottom the log-scale. The configuration option is <code>readCloudLogScale: true</code> but can be enabled via the track menu also</p>
<p><img src="/docs/assets/config/JBrowse_paired_read_menu.png" alt="center|1124px|border|JBrowse displaying paired-read menu"></p>
<p>Figure 3. The track menu shows the ability to toggle different track visualizations by the user easily</p>
<p><img src="/docs/assets/config/JBrowse_paired_read_overlap.png" alt="center|1124px|border|JBrowse displaying paired-read menu"></p>
<p>Figure 4. When reads are overlapping, the overlap is drawn as a grey box (or what is given by <code>overlapColor</code>) and then SNPs that disagree in the overlap are drawn as black where as others are drawn as normal. Pictured is a SNP that agrees and is drawn normally, and one that disagrees and is black</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/authentication.html">← HTTP authentication for JBrowse</a><a class="docs-next button" href="/docs/flatfile-to-json.pl.html">flatfile-to-json.pl →</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#configuration">Configuration</a></li><li><a href="#algorithm-explanation">Algorithm explanation</a></li><li><a href="#insert-size-estimation">Insert size estimation</a></li><li><a href="#color-options">Color options</a></li><li><a href="#feature-colors">Feature colors</a></li><li><a href="#more-configuration">More configuration</a></li><li><a href="#paired-arc-specific">Paired arc specific</a></li><li><a href="#read-cloud-specific">Read cloud specific</a></li><li><a href="#for-developers">For developers</a></li><li><a href="#screenshots">Screenshots</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>