201 lines
11 KiB
HTML
201 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<!-- $Id: embedded.html 47770 2024-07-25 18:40:49Z evgeniev $ -->
|
|
<html lang="en" >
|
|
<head >
|
|
<title>NCBI Sequence Viewer 3.50.0</title>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
<!-- Mobile properties -->
|
|
<meta name="HandheldFriendly" content="True">
|
|
<meta name="MobileOptimized" content="320">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/cgv/static/django_uswds/uswds/css/uswds.css" />
|
|
|
|
<link rel="stylesheet" href="/cgv/static/nwds/css/nwds.css" />
|
|
<link rel="stylesheet" href="/cgv/static/nwds/css/header.css" />
|
|
<link rel="stylesheet" href="/cgv/static/nwds/css/footer.css" />
|
|
<link rel="stylesheet" href="/cgv/static/nwds/css/form.css" />
|
|
|
|
<link rel="stylesheet" href="css/uswds-fix.css" />
|
|
|
|
<style>
|
|
main { font-size: 1.4em; padding-left: 2rem;}
|
|
html { font-size: 10px; font-family: Roboto,sans-serif; }
|
|
h2 {
|
|
color: #336699;
|
|
font-family: Verdana, Georgia;
|
|
font-size: 108%;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
<style type="text/css">
|
|
.content {margin: 1em; font-size:13px;}
|
|
.content h1 {
|
|
font-family: Verdana,sans-serif;
|
|
font-size: 153.9%;
|
|
font-weight: 400;
|
|
}
|
|
.content p { margin-top: 1em; }
|
|
.content strong { font-weight: bold; }
|
|
</style>
|
|
<script>
|
|
var loadSV = function(idx) {
|
|
var id = 'SeqViewer0';
|
|
var params = [
|
|
'embedded=true&appname=svdemo&id=AC_000020&v=1k:2000&mk=1500:1700|TestMarker|00ff00',
|
|
'id=nt_011515&embedded=minimal&appname=svdemo&mk=26000|Marker1&v=10k..60k'];
|
|
var app = SeqView.App.findAppByDivId(id) || new SeqView.App(id);
|
|
app.reload(params[idx || 0]);
|
|
}
|
|
SeqViewOnReady(loadSV);
|
|
</script>
|
|
<!-- Favicons -->
|
|
<link rel="shortcut icon" type="image/ico" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon.ico" />
|
|
<link rel="icon" type="image/png" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon.png" />
|
|
|
|
<link rel="icon" type="image/png" sizes="192x192" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon-192.png" />
|
|
|
|
<!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices -->
|
|
<link rel="apple-touch-icon-precomposed" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon-57.png">
|
|
<!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
|
|
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon-72.png">
|
|
<!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch -->
|
|
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon-114.png">
|
|
<!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
|
|
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon-144.png">
|
|
|
|
<meta name="robots" content="index, follow"/>
|
|
<meta name="description" content="NCBI Sequence Viewer"/>
|
|
<!-- applog meta tags -->
|
|
<meta name="ncbi_app" content="sviewer-js" />
|
|
<script src="/cgv/static/js/jquery.js"></script>
|
|
<script src="js/sviewer.js"></script>
|
|
|
|
</head>
|
|
<body >
|
|
<div id="header"></div>
|
|
|
|
<nav class="ncbi-topnav">
|
|
<ul class="ncbi-topnav-list">
|
|
<li><a href="." target="_self">NCBI Sequence Viewer Home</a></li>
|
|
<li><a href="/tools/sviewer" target="_blank">Help</a></li>
|
|
<li><a href="/tools/sviewer/release-notes" target="_blank">Release Notes</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<main id="main_content" accesskey="3">
|
|
|
|
<div class="content">
|
|
|
|
<h1>Embedding the NCBI Sequence View in Web Content</h1>
|
|
|
|
<h2>Introduction</h2>
|
|
<p/>
|
|
The NCBI Graphical Sequence Viewer (SV) is a general purpose tool for
|
|
viewing biological sequence data. The Sequence Viewer has a very rich
|
|
set of options and can display virtually any sequence. It can be
|
|
embedded in a wide variety of web pages serving many different needs.
|
|
This page has examples showing best practice for embedding Sequence
|
|
Viewer with several different sets of options.
|
|
|
|
<p/>
|
|
The <a href='https://www.ncbi.nlm.nih.gov/tools/sviewer/embedding-api/'>API Reference</a> should be consulted for the full suite of options and
|
|
parameters. Additional documentation can be found here:
|
|
<a href='https://www.ncbi.nlm.nih.gov/tools/sviewer/'>https://www.ncbi.nlm.nih.gov/tools/sviewer/</a>
|
|
|
|
<p/>
|
|
Questions should be addressed to: <strong>sviewer-service AT ncbi.nlm.nih.gov</strong>
|
|
|
|
<p/>
|
|
For users that want to embed the sequence viewer on their page, please
|
|
pay attention to the cross-domain scripting section of the <a href='https://www.ncbi.nlm.nih.gov/tools/sviewer/embedding-api/'>API Reference</a>.
|
|
Sequence Viewer makes use of AJAX and the EXTjs library and is tied to
|
|
the infrastructure at NCBI; if you fail to adjust for cross-domain
|
|
scripting, your embedding will not work.
|
|
<p/>
|
|
<h2>List of separate pages with embedding examples</h2>
|
|
<p/>
|
|
1. <a href="BAMDemo.html">Remote BAM files visualization</a><br>
|
|
2. <a href="BAMhaplotypeDemo.html">BAM file display with haplotype grouping</a><br>
|
|
3. <a href="MarkerDemo.html">Marker demo</a><br>
|
|
4. <a href="HGVSDemo.html">HGVS and SNP Search demo</a><br>
|
|
5. <a href="graphDemo.html">Graph Overlay demo</a><br>
|
|
6. <a href="event_demo.html">Sequence Viewer event listening demo</a><br>
|
|
7. <a href="TV_SV_demo.html">Tree Viewer embeds Sequence Viewer</a><br>
|
|
8. <a href="embedded_big_wig_bed.html">BigBED and BigWIG files visualization</a><br>
|
|
9. <a href="VCFDemo.html">VCFtabix and plain VCF files visualization</a><br>
|
|
|
|
<p/>
|
|
|
|
<p/>
|
|
<h2>View of single sequence with full and minimal frame decoration</h2>
|
|
<p/>
|
|
These examples demonstrate a way of loading and switching Sequence Viewer instances dynamicaly.
|
|
<p/>
|
|
<ul>
|
|
<input type="radio" name="radiodemo" id="demo_0" checked="checked" onclick="loadSV(0)"/>
|
|
<label for="demo_0"><b>View with full frame decoration</b></label>
|
|
<br/>
|
|
<input type="radio" name="radiodemo" id="demo_1" onclick="loadSV(1)"/>
|
|
<label for="demo_1"><b>View with minimal frame decoration</b></label>
|
|
</ul>
|
|
</p>
|
|
<div class"seqviewer">
|
|
<div id="SeqViewer0Title" class="SeqViewerTitle"></div>
|
|
<div id="SeqViewer0TitleID" class="SeqViewerTitleID"></div>
|
|
<div id="SeqViewer0" class="SeqViewerApp"></div>
|
|
</div>
|
|
<p/>
|
|
<h2>View of single sequence with initial tracks configuration and with external file upload</h2>
|
|
<p/>
|
|
<div class="seqviewer">
|
|
<div id="SeqViewer1" class="SeqViewerApp" data-autoload>
|
|
<a href="?embedded=true&appname=svdemo&id=NC_000001&tracks=[key:sequence_track,name:Sequence,display_name:Sequence,id:STD1,category:Sequence,annots:Sequence,ShowLabel:false][key:gene_model_track,name:Genes,display_name:Genes,id:STD12,category:Genes,annots:Unnamed,Options:MergeAll,SNPs:false,CDSProductFeats:false,ShowLabelsForAllFeatures:false,HighlightMode:2]&appname=svdemo&color=0&label=0&decor=0&spacing=0&v=1:249250621&c=008080&gflip=false&select=null&url=https://ftp.ncbi.nlm.nih.gov/toolbox/gbench/samples/bed_chr_human_one_track_many_chromosomes.txt"></a>
|
|
</div>
|
|
</div>
|
|
<!-- p/>
|
|
<h2>Alignment View</h2>
|
|
<div class="seqviewer" style="padding:10px;">
|
|
<div id="SeqViewer2" class="SeqViewerApp" data-autoload>
|
|
<a href="?id=19568015&embedded=true&align=1&v=1..zs&appname=svdemo"></a>
|
|
</div>
|
|
</div -->
|
|
<p/>
|
|
<h2>View in slim mode (tracks w/o title bars)</h2>
|
|
<p/>
|
|
<div class="seqviewer">
|
|
<div id="SeqViewer3" class="SeqViewerApp" data-autoload>
|
|
<a href="?id=224589800&embedded=full&slim=true&appname=svdemo&v=1:249250621&tracks=[key:sequence_track,name:Sequence,display_name:Sequence,id:STD1,category:Sequence,annots:Sequence,ShowLabel:false][key:gene_model_track,name:Genes,display_name:Genes,id:STD13,category:Genes,annots:Unnamed,Options:MergeAll,SNPs:false,CDSProductFeats:false,ShowLabelsForAllFeatures:false,HighlightMode:2][key:graph_track,name:Graphs---NA000011422_1,display_name:GSM923418 HudsonAlpha_RnaSeq_A549_DEX_100pM_longPolyA,id:STD14,category:GEO,annots:NA000011422.1,fixed_scale:false,height:20,style:smear bar][key:graph_track,name:Graphs---NA000011424_1,display_name:GSM923419 HudsonAlpha_RnaSeq_SK-N-SH_longPolyA,id:STD16,category:GEO,annots:NA000011424.1,fixed_scale:false,height:20,style:smear bar][key:graph_track,name:Graphs---NA000011426_1,display_name:GSM923420 HudsonAlpha_RnaSeq_A549_DEX_100nM_longPolyA,id:STD18,category:GEO,annots:NA000011426.1,fixed_scale:false,height:20,style:smear bar][key:graph_track,name:Graphs---NA000011428_1,display_name:GSM923421 HudsonAlpha_RnaSeq_PANC-1_longPolyA,id:STD20,category:GEO,annots:NA000011428.1,fixed_scale:false,height:20,style:smear bar][key:graph_track,name:Graphs---NA000011430_1,display_name:GSM923422 HudsonAlpha_RnaSeq_ECC-1_BPA_100nM_4hr_longPolyA,id:STD22,category:GEO,annots:NA000011430.1,fixed_scale:false,height:20,style:smear bar][key:graph_track,name:Graphs---NA000011432_1,display_name:GSM923423 HudsonAlpha_RnaSeq_ECC-1_DMSO_4hr_longPolyA,id:STD24,category:GEO,annots:NA000011432.1,fixed_scale:false,height:20,style:smear bar]"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<p/>
|
|
<h2>Iframed Sequence View</h2>
|
|
<p/>
|
|
Example below illustrates iframe embedding.
|
|
In this case, the Sequence Viewer instance is put into an iframe to avoid possible CSS and JavaScript
|
|
interference with the main page. Sequence Viewer implements automatic iframe resizing to maintain
|
|
vertical size budget and avoid unnecessary vertical scrolling. All user actions (zoom in and out,
|
|
track reconfigurations, etc.) should automatically recalculate vertical size.
|
|
<p/>
|
|
|
|
<iframe id="theiframe" width="900" src="https://www.ncbi.nlm.nih.gov/projects/sviewer/embedded_iframe.html?iframe=theiframe&embedded=true&id=AC_000020" onload="if(!window._SViFrame){_SViFrame=true;window.addEventListener('message',function(e){if(e.origin=='https://www.ncbi.nlm.nih.gov' && !isNaN(e.data.h))document.getElementById(e.data.f).height=parseInt(e.data.h);});}">
|
|
<p>Your browser does not support iframes.</p>
|
|
</iframe>
|
|
<p/>
|
|
|
|
</div>
|
|
</main>
|
|
<div id="footer"></div>
|
|
<script>
|
|
$(document).ready(function(){
|
|
$('#header').load("header.html");
|
|
$('#footer').load("footer.html");
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|