178 lines
8.4 KiB
HTML
178 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<!-- $Id: TV_SV_demo.html 47770 2024-07-25 18:40:49Z evgeniev $ -->
|
|
|
|
<html lang="en" >
|
|
<head >
|
|
<title>NCBI Tree and Sequence Viewers Demo</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;
|
|
}
|
|
.content {margin: 1em; font-size:13px;}
|
|
.content h1 { font-size: 2em; }
|
|
</style>
|
|
|
|
<!-- 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 type="text/javascript" src="/projects/treeview/js/treeviewer.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">
|
|
<h2>Introduction</h2>
|
|
<p>
|
|
This demo shows a technique of communication between Tree Viewer and Sequence Viewer applications using event listening for embedding Web page.
|
|
</p>
|
|
|
|
<div id="TreeViewerFrame" class="TreeViewerFrame" style="padding-left:unset;">
|
|
<div id="TreeViewerTitle" class="TreeViewerTitle"></div>
|
|
<div id="TreeViewerTitleID" class="TreeViewerTitleID"></div>
|
|
<div id="TreeViewer0" class="TreeViewerApp" style="height: 400px; _width: 800px;">
|
|
<a href="?appname=tv_svdemo&url=https://ftp.ncbi.nlm.nih.gov/toolbox/gbench/samples/tree-sample-withseqids.asn&featnames=*&embedded=true&renderer=rect"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
<table style="margin-left:-3px;">
|
|
<tr>
|
|
<td style="width: 100px; vertical-align: top;">
|
|
<div id="SVselector"></div>
|
|
</td>
|
|
<td style="width:100%;">
|
|
<div id="SeqViewerFrame" class="SeqViewerFrame">
|
|
<div id="SeqViewerTitle" class="SeqViewerTitle"></div>
|
|
<div id="SeqViewerTitleID" class="SeqViewerTitleID"></div>
|
|
<div id="SeqViewer" class="SeqViewerApp"></div>
|
|
</div>
|
|
<td>
|
|
</tr>
|
|
</table>
|
|
|
|
<script type="text/javascript">
|
|
TreeViewOnReady(function() {
|
|
var tries = 130;
|
|
var instanceInit = function () {
|
|
if (!tries--) {
|
|
Ext.Msg.alert( 'Error', 'No TreeViewer found.');
|
|
return;
|
|
}
|
|
var selector = {};
|
|
var tviewer = TreeView.findAppByIndex(0);
|
|
if (!tviewer) { setTimeout(instanceInit, 150); return; }
|
|
var on_selected_nodes_handler = function(selected_nodes) {
|
|
var seqIDs = []
|
|
selected_nodes.forEach(function(node) {
|
|
var seqID = node.seq_id;
|
|
if (!seqID && node.feats)
|
|
node.feats.forEach(function(f) {
|
|
if (f.n == 'seq-id') seqID = f.v;
|
|
});
|
|
if (!seqID) return;
|
|
seqIDs.push([seqID]);
|
|
});
|
|
if (selector.selModel) selector.selModel.store.setData(seqIDs);
|
|
else selector = createIDSelector(seqIDs);
|
|
selector.selModel.select(0);
|
|
}
|
|
tviewer.on({'node_selection_changed': function() {
|
|
this.getSelectedNodesObjects(on_selected_nodes_handler);
|
|
}});
|
|
tviewer.on({'treeloaded': function selectNode() {
|
|
tviewer.un({'treeloaded': selectNode});
|
|
SeqViewOnReady(function(){ tviewer.selectNode('37'); });
|
|
}});
|
|
}();
|
|
});
|
|
var createIDSelector = function(seqIDs) {
|
|
var sel = Ext.create('Ext.grid.Panel', {
|
|
store: Ext.create('Ext.data.ArrayStore', {
|
|
fields: [{name: 'IDs'}],
|
|
data: seqIDs
|
|
}),
|
|
columns: [{
|
|
flex: 1,
|
|
dataIndex: 'IDs'
|
|
}],
|
|
height: 250,
|
|
width: 100,
|
|
renderTo: 'SVselector',
|
|
viewConfig: {stripeRows: true}
|
|
});
|
|
sel.getSelectionModel().on('selectionchange', reloadSV);
|
|
sel.show();
|
|
return sel;
|
|
}
|
|
var reloadSV = function(sm, rec) {
|
|
if (!rec.length) return;
|
|
var svapp = SeqView.App.findAppByDivId('SeqViewer');
|
|
if (!svapp) svapp = new SeqView.App('SeqViewer');
|
|
svapp.reload('id=' + rec[0].data.IDs + '&embedded=true&appname=tv_demo');
|
|
}
|
|
|
|
</script>
|
|
|
|
</div>
|
|
</main>
|
|
<div id="footer"></div>
|
|
<script>
|
|
$(document).ready(function(){
|
|
$('#header').load("header.html");
|
|
$('#footer').load("footer.html");
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|