@gmod/jbrowse
Version:
JBrowse - client-side genome browser
79 lines (75 loc) • 22.8 kB
HTML
<html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>CanvasFeatures · JBrowse</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="CanvasFeatures are an alternative to HTMLFeatures and display features on the genome, including genes using HTML5 canvases. They are faster than HTML features and are somewhat easier to configure since it can be done in the config instead of via CSS styling."/><meta name="docsearch:language" content="en"/><meta property="og:title" content="CanvasFeatures · JBrowse"/><meta property="og:type" content="website"/><meta property="og:url" content="https://jbrowse.org/index.html"/><meta property="og:description" content="CanvasFeatures are an alternative to HTMLFeatures and display features on the genome, including genes using HTML5 canvases. They are faster than HTML features and are somewhat easier to configure since it can be done in the config instead of via CSS styling."/><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>Configuring tracks</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 navListItemActive"><a class="navItem" href="/docs/canvas_features.html">CanvasFeatures</a></li><li class="navListItem"><a class="navItem" href="/docs/html_features.html">HTMLFeatures</a></li><li class="navListItem"><a class="navItem" href="/docs/alignments.html">Alignments tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/bigwig.html">Wiggle/BigWig Tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/variants.html">VCF tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/minimal.html">Minimal JBrowse configurations</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Advanced configuration</h3><ul><li class="navListItem"><a class="navItem" href="/docs/embedding.html">Embedding JBrowse</a></li><li class="navListItem"><a class="navItem" href="/docs/mouse_configs.html">Mouse clicks, menus, and popups</a></li><li class="navListItem"><a class="navItem" href="/docs/configuration_file_formats.html">Configuration File Formats</a></li><li class="navListItem"><a class="navItem" href="/docs/dataset_selector.html">Dataset Selector</a></li><li class="navListItem"><a class="navItem" href="/docs/track_selectors.html">Track Selectors</a></li><li class="navListItem"><a class="navItem" href="/docs/track_metadata.html">Track Metadata</a></li><li class="navListItem"><a class="navItem" href="/docs/global_options.html">Global configuration options</a></li><li class="navListItem"><a class="navItem" href="/docs/compression.html">Compressing JBrowse data</a></li><li class="navListItem"><a class="navItem" href="/docs/authentication.html">HTTP authentication for JBrowse</a></li><li class="navListItem"><a class="navItem" href="/docs/paired_reads.html">Paired read viewing</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Command line</h3><ul><li class="navListItem"><a class="navItem" href="/docs/flatfile-to-json.pl.html">flatfile-to-json.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/remove-track.pl.html">remove-track.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/ucsc-to-json.pl.html">ucsc-to-json.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/generate-names.pl.html">generate-names.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/prepare-refseqs.pl.html">prepare-refseqs.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/biodb-to-json.pl.html">biodb-to-json.pl</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">JBrowse Desktop</h3><ul><li class="navListItem"><a class="navItem" href="/docs/jbrowse_desktop.html">JBrowse Desktop</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">FAQ</h3><ul><li class="navListItem"><a class="navItem" href="/docs/faq.html">JBrowse FAQ</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Other topics</h3><ul><li class="navListItem"><a class="navItem" href="/docs/url_strings.html">JBrowse URL parameters</a></li><li class="navListItem"><a class="navItem" href="/docs/image_tracks.html">Pre-rendered Image Tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/feature_coverage.html">Feature Coverage Tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/screenshots.html">Automating screenshots of JBrowse</a></li><li class="navListItem"><a class="navItem" href="/docs/events.html">JBrowse Subscribe/Publish events</a></li><li class="navListItem"><a class="navItem" href="/docs/perl_config.html">Sample configuration bash script</a></li><li class="navListItem"><a class="navItem" href="/docs/data_formats.html">JBrowse REST API and Data APIs</a></li><li class="navListItem"><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">CanvasFeatures</h1></header><article><div><span><p>CanvasFeatures are an alternative to HTMLFeatures and display features on the genome, including genes using HTML5 canvases. They are faster than HTML features and are somewhat easier to configure since it can be done in the config instead of via CSS styling.</p>
<p>The flatfile-to-json.pl by can output CanvasFeatures using the --trackType CanvasFeatures option</p>
<p>For more info on loading with flatfile-to-json.pl see the<a href="flatfile-to-json.pl.html">flatfile-to-json.pl</a> docs.</p>
<h2><a class="anchor" aria-hidden="true" id="canvasfeatures-configuration-options"></a><a href="#canvasfeatures-configuration-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>CanvasFeatures Configuration Options</h2>
<p>Introduced in JBrowse 1.10.0, the new JBrowse CanvasFeatures tracks are faster and easier to configure than HTMLFeatures tracks.</p>
<table>
<thead>
<tr><th>Option</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><code>maxHeight</code></td><td>Maximum height, in pixels, that the track is allowed to grow to. When it reaches this height, features that stack higher than this will not be shown, and a "Max height reached" message will be displayed. Default 600 pixels.</td></tr>
<tr><td><code>style→showLabels</code></td><td>If true, allows feature labels to be shown if features are not too dense on the screen. Default <code>true</code>.</td></tr>
<tr><td><code>style→showTooltips</code></td><td>If true, allows feature name tooltips to be shown. Default true.</td></tr>
<tr><td><code>displayMode</code></td><td>'normal', 'compact', or 'collapsed'. Sets the initial display mode of the track. Default 'normal'.</td></tr>
<tr><td><code>style→featureScale</code></td><td>Minimum zoom scale (pixels/basepair) for displaying individual features in the track. Not set by default, and overrides the <code>maxFeatureScreenDensity</code>.</td></tr>
<tr><td><code>maxFeatureScreenDensity</code></td><td>Maximum density of features to display on the screen. If this is exceeded, will display either feature density histograms (if available), or a "too many features to show" or "too much data to show" message. The units of this number are features per screen width in pixels. Defaults to 0.5. If increased to ~6 then it should pretty much always go away</td></tr>
<tr><td><code>glyph</code></td><td>JS class name of the glyph to use for each feature. By default, it tries to guess for each feature based on its <code>type</code> attribute, and uses JBrowse/View/FeatureGlyph/Box if it cannot find something better. Can be a callback with signature (feature), returning a string class name.</td></tr>
<tr><td><code>menuTemplate</code></td><td>Optional menu configuration for right-click menus on features. Can be as large and complicated as you want. See <a href="#right-click-context-menus" title="wikilink">Right-click_Context_Menus</a> below. If set to null or false, disables feature right-click menus.</td></tr>
<tr><td><code>style→maxDescriptionLength</code></td><td>Maximum length, in characters, of long feature descriptions, for glyphs that support them. Default 70.</td></tr>
<tr><td><code>style→color</code></td><td>Basic color of features. Most glyphs interpret this as the fill color of the rectangle they draw. Color syntax is the same as that used for CSS, specified at <a href="http://dev.w3.org/csswg/css-color/">http://dev.w3.org/csswg/css-color/</a>. Default 'goldenrod'.</td></tr>
<tr><td><code>style→mouseovercolor</code></td><td>Color of the overlay drawn on top of features when the mouse hovers over them. Color syntax is the same as that used for CSS, specified at <a href="http://dev.w3.org/csswg/css-color/">http://dev.w3.org/csswg/css-color/</a>. Default rgba(0,0,0,0.3), which is semi-transparent black.</td></tr>
<tr><td><code>style→borderColor</code></td><td>Color of the borders drawn around boxes in glyphs. Color syntax is the same as that used for CSS, specified at <a href="http://dev.w3.org/csswg/css-color/">http://dev.w3.org/csswg/css-color/</a>. Default varies from glyph to glyph.</td></tr>
<tr><td><code>style→borderWidth</code></td><td>Width of the borders drawn around boxes in glyphs. Default 0.5 if borderColor specified</td></tr>
<tr><td><code>style→height</code></td><td>Height in pixels of glyphs. Default value varies from glyph to glyph.</td></tr>
<tr><td><code>style→marginBottom</code></td><td>Margin space to leave below each feature when arranging them in the view. Default 2 pixels.</td></tr>
<tr><td><code>style→strandArrow</code></td><td>If true, allow glyphs to draw strand arrowheads on features that are stranded. Default <code>true</code>.</td></tr>
<tr><td><code>style→label</code></td><td>Comma-separated list of case-insensitive feature tags to use for showing the feature's label. The first one found will be used. Default 'name,id'.</td></tr>
<tr><td><code>style→textFont</code></td><td>Font used for feature labels. Same format as CSS font rules. Default 'normal 12px Univers,Helvetica,Arial,sans-serif'.</td></tr>
<tr><td><code>style→textColor</code></td><td>Color of feature labels. Color syntax is the same as that used for CSS, specified at <a href="http://dev.w3.org/csswg/css-color/">http://dev.w3.org/csswg/css-color/</a>. Default 'black'.</td></tr>
<tr><td><code>style→text2Color</code></td><td>Color of feature descriptions. Color syntax is the same as that used for CSS, specified at <a href="http://dev.w3.org/csswg/css-color/">http://dev.w3.org/csswg/css-color/</a>. Default 'blue'.</td></tr>
<tr><td><code>style→text2Font</code></td><td>Font used for feature descriptions. Same format as CSS font rules. Default 'normal 12px Univers,Helvetica,Arial,sans-serif'.</td></tr>
<tr><td><code>style→description</code></td><td>Comma-separated list of case-insensitive feature tags to check for the feature's long description. The first one found will be used. Default 'note,description'. If blank no description is used.</td></tr>
<tr><td><code>style→connectorColor</code></td><td>Color of the connecting line drawn between boxes in glyphs that draw segments (like the Segments, ProcessedTranscript, and Gene glyphs). Color syntax is the same as that used for CSS, specified at <a href="http://dev.w3.org/csswg/css-color/">http://dev.w3.org/csswg/css-color/</a>. Default '#333'.</td></tr>
<tr><td><code>style→connectorThickness</code></td><td>Thickness in pixels of the connecting line drawn between boxes in glyphs that draw segments (like the Segments, ProcessedTranscript, and Gene glyphs). Default 1.</td></tr>
<tr><td><code>style→utrColor</code></td><td>Color of UTR regions drawn by ProcessedTranscript and Gene glyphs. Color syntax is the same as that used for CSS, specified at <a href="http://dev.w3.org/csswg/css-color/">http://dev.w3.org/csswg/css-color/</a>. Defaults to be a color that complements the current <code>style→color</code> value (calculated using a bit of color theory).</td></tr>
<tr><td><code>subParts</code></td><td>Comma-separated list of feature <code>type</code> tags that will be drawn as subparts of parent features. Defaults to all features for Segments glyphs, and 'CDS, UTR, five_prime_UTR, three_prime_UTR' for ProcessedTranscript glyphs.</td></tr>
<tr><td><code>transcriptType</code></td><td>For Gene glyphs, the feature <code>type</code> tag that indicates that a subfeature is a processed transcript. Defaults to 'mRNA'.</td></tr>
<tr><td><code>labelTranscripts</code></td><td>For Gene glyphs, if true, draw a label with the transcript's name beside each transcript, if space permits. Default true.</td></tr>
<tr><td><code>style→transcriptLabelColor</code></td><td>For Gene glyphs, the color of transcript name labels. Color syntax is the same as that used for CSS, specified at <a href="http://dev.w3.org/csswg/css-color/">http://dev.w3.org/csswg/css-color/</a>. Default 'black'.</td></tr>
<tr><td><code>style→transcriptLabelFont</code></td><td>For Gene glyphs, the font used for transcript name labels. Same format as CSS font rules. Default 'normal 10px Univers,Helvetica,Arial,sans-serif'.</td></tr>
<tr><td><code>impliedUTRs</code></td><td>Introduced in JBrowse 1.10.5. If true, indicates that UTRs are not present in the feature data, but should be inferred from the overlap of exon and CDS features in ProcessedTranscript and Gene glyphs. Default false. Can be a callback.</td></tr>
<tr><td><code>maxFeatureGlyphExpansion</code></td><td>A factor to expand the glyphs by so that if subfeatures go outside the bounds of the parent feature, they will still be rendered. Default: 500bp/current scale.</td></tr>
<tr><td><code>inferCdsParts</code></td><td>If a single CDS span covers the whole gene except the UTRs, then it is drawn as though it only covers the exon parts (not the introns). Default: false. Added in 1.12.3</td></tr>
<tr><td><code>disableCollapsedClick</code></td><td>Disables the click action when track is collapsed. Default: false. Added in 1.13.0</td></tr>
<tr><td><code>enableCollapsedMouseover</code></td><td>Enables the mouseover action when track is collapsed. Default: false. Added in 1.13.0. See the ChromHMM track in volvox sample browser for example of mouseover on the collapsed track</td></tr>
<tr><td><code>topLevelFeatures</code></td><td>Specifies which feature types should be considered "top-level" for this track. For example, if you have a track with gene->mRNA->CDS features, but for some reason want to only display the mRNA features, you can set topLevelFeatures=mRNA. Can also be an array of string types, or a function callback that returns an array of types. Default: all features are displayed. Added in 1.14.0</td></tr>
<tr><td><code>topLevelFeaturesPercent</code></td><td>Approximate percentage of features in the store that are top-level. Used to correct feature statistics estimates, which are used by JBrowse to decide when to display feature labels, and when to show feature density histograms. For example, topLevelFeaturesPercent=10 would say that only about 10% of features in the store are top-level, so adjust statistics estimates accordingly. Default 100, adding in 1.15.4.</td></tr>
<tr><td><code>ItemRgb</code></td><td>If set to true, the RGB colors specified in BigBed or BED files will be used for the feature's background color. Default true. Added in 1.14.0</td></tr>
<tr><td><code>style→unprocessedTranscriptColor</code></td><td>A color for the unprocessed transcript glyph. This is used when there is a mix of coding and non-coding transcripts in your GFF</td></tr>
<tr><td><code>noncodingType</code></td><td>An array of non-coding feature types from column 3 of your GFF, default: ['ncRNA', 'lnc_RNA', 'lncRNA', 'miRNA']</td></tr>
</tbody>
</table>
<p>Note: the "compact" displayMode for CanvasFeatures tracks uses style->height and multiplies it by 0.35 to create the compact view. Therefore, if you adjust style->height to a smaller default value, then you can create "ultra compact" visualizations.</p>
<h3><a class="anchor" aria-hidden="true" id="customizing-canvasfeatures-tracks-with-callbacks"></a><a href="#customizing-canvasfeatures-tracks-with-callbacks" 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>Customizing CanvasFeatures tracks with callbacks</h3>
<p>Unlike HTML-based feature tracks, canvas-based feature tracks don't use modify and create hooks. Instead, the <code>glyph</code> variable, and all of the <code>style</code> variables, support customization callbacks.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/reference_sequence.html">← Reference sequence configuration</a><a class="docs-next button" href="/docs/html_features.html">HTMLFeatures →</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#canvasfeatures-configuration-options">CanvasFeatures Configuration Options</a><ul class="toc-headings"><li><a href="#customizing-canvasfeatures-tracks-with-callbacks">Customizing CanvasFeatures tracks with callbacks</a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/blog">Blog</a><a href="/docs/tutorial.html">Getting Started</a></div><div><h5>Community</h5><a href="https://gitter.im/GMOD/jbrowse">Project Chat</a><a href="https://twitter.com/JBrowseGossip" target="_blank" rel="noreferrer noopener">Twitter</a></div><div><h5>More</h5><a href="https://github.com/GMOD/jbrowse">GitHub</a><a class="github-button" href="https://github.com/GMOD/jbrowse" data-icon="octicon-star" data-count-href="/GMOD/jbrowse/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><section class="copyright">Copyright © 2019 Evolutionary Software Foundation</section></footer></div></body></html>