514 lines
22 KiB
HTML
514 lines
22 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<!-- $Id: event_demo_dynamic_loader.html 37598 2017-01-25 20:38:47Z lotovv $ -->
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
<head>
|
|
<title>NCBI Tree Viewer 1.12.1 Event Demo</title>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<style type="text/css">
|
|
html {overflow:-moz-scrollbars-vertical;overflow-y:scroll;overflow-x:auto;}
|
|
</style>
|
|
|
|
<!-- added for applog -->
|
|
<meta name="ncbi_app" content="sviewer-js" />
|
|
<!-- end of applog code -->
|
|
|
|
|
|
<!--script type="text/javascript" src="/core/jquery/jquery-1.4.2.js"></script-->
|
|
<link rel="stylesheet" type="text/css" href="css/ncbi_templates.css"/>
|
|
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen, projection, print"/>
|
|
<script type="text/javascript" src="js/treeviewer.js"></script>
|
|
<!--script src="https://apis.google.com/js/client.js" type="text/javascript"> </script-->
|
|
|
|
|
|
<!-- reset some setting that were overwritten by ncbi_templates.css -->
|
|
<style type="text/css">
|
|
h2 {margin: 4;}
|
|
a.x-menu-item { color:#222222; }
|
|
</style>
|
|
|
|
<style type="text/css">
|
|
.top_part {padding:10px;}
|
|
</style>
|
|
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="ncbiheader">
|
|
<h1><a title="NCBI Home Page" href="http://www.ncbi.nlm.nih.gov">NCBI</a></h1>
|
|
|
|
<ul class="hidden_for_print">
|
|
<li><a href="http://www.ncbi.nlm.nih.gov/"
|
|
title="NCBI Home Page">Home</a></li>
|
|
<li><a href="http://www.ncbi.nlm.nih.gov/sites/entrez/"
|
|
title="PubMed: Biomedical Abstracts Database">PubMed</a></li>
|
|
<li><a href="http://www.ncbi.nlm.nih.gov/Genbank/"
|
|
title="GenBank: Repository of public sequence data">GenBank</a></li>
|
|
<li><a href="http://www.ncbi.nlm.nih.gov/BLAST/"
|
|
title="BLAST: Basic Local Alignment Search Tool">BLAST</a></li>
|
|
</ul>
|
|
|
|
<div id="app_name">
|
|
<h1 id="app_name_h1" onclick="location.href='index.html'"> Tree Viewer</h1>
|
|
<h1 id="app_ver_h1" onclick="location.href='//www.ncbi.nlm.nih.gov/tools/treeviewer/releasenotes/'">1.12.1 </h1>
|
|
<a id="treeviewer-help" title="Tree Viewer Help" href="#" onClick="TreeView.showHelp();">Help</a>
|
|
</div>
|
|
|
|
</div>
|
|
<noscript>
|
|
<h1>JavaScript is required.</h1>
|
|
</noscript>
|
|
|
|
<div class="content">
|
|
|
|
|
|
<div class="top_part">
|
|
<h2>Introduction</h2>
|
|
<p/>
|
|
This demo shows techniques of Tree Viewer event listening for embedding Web page. To see how showNode function works, mouse over any node label.
|
|
Show node button will change name to show corresponding node. Upon clicking on this button, corresponding node will be highlighted.
|
|
<p/>
|
|
</div>
|
|
|
|
<div id="event-log" class="top_part"></div>
|
|
|
|
|
|
<div id="TreeViewerFrame" class="TreeViewerFrame">
|
|
<div id="TreeViewerTitle" class="TreeViewerTitle"></div>
|
|
<div id="TreeViewerTitleID" class="TreeViewerTitleID"></div>
|
|
<div id="TreeViewer0" class="TreeViewerApp" style="_height: 100%; _width: 600px;">
|
|
<a href="?appname=ncbi_tviewer&btc_id=data/sample_tree.asn&featnames=*&embedded=true&clickablelabels=true"></a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
var customAction = function(nd)
|
|
{
|
|
// var tviewer = TreeView.findAppByIndex(0);
|
|
// tviewer.setMultipleSelectionMode(true);
|
|
|
|
var nd_desrc = (nd.l == '') ? ('Node: id' + nd.id) : nd.l;
|
|
alert('Custom action 1 call '+ nd_desrc);
|
|
};
|
|
var customAction2 = function(nd)
|
|
{
|
|
// var tviewer = TreeView.findAppByIndex(0);
|
|
// tviewer.setMultipleSelectionMode(false);
|
|
var nd_desrc = (nd.l == '') ? ('Node: id' + nd.id) : nd.l;
|
|
alert('Custom action 2 call '+ nd_desrc);
|
|
|
|
};
|
|
|
|
var afterLoadCallback = function()
|
|
{
|
|
alert('After Load Callback ');
|
|
|
|
};
|
|
|
|
var latestMouseOverNodeID = '';
|
|
|
|
var DemoApp = function() {
|
|
// do NOT access DOM from here; elements don't exist yet
|
|
|
|
// private variables
|
|
var initTimeout;
|
|
|
|
|
|
|
|
// private functions
|
|
|
|
|
|
// public space
|
|
return {
|
|
// public properties, e.g. strings to translate
|
|
|
|
// public methods
|
|
init: function() {
|
|
var tviewer = TreeView.findAppByIndex( 0 );
|
|
var addValue = function( line ){
|
|
var textarea = Ext.getCmp( 'log-entry' );
|
|
var value = textarea.getValue();
|
|
value += line + "\n";
|
|
textarea.setValue( value );
|
|
textarea.getEl().dom.scrollTop = 99999;
|
|
};
|
|
var form = new Ext.Panel({
|
|
renderTo: 'event-log',
|
|
labelAlign: 'top',
|
|
frame: true,
|
|
title: 'Event Log',
|
|
//iconCls: 'icon-basket',
|
|
width: 800,
|
|
labelWidth: 17,
|
|
collapsible:true,
|
|
titleCollapse: true,
|
|
style: 'padding: 10px',
|
|
items: [
|
|
{
|
|
xtype: 'textarea',
|
|
id: 'log-entry',
|
|
name: 'text',
|
|
fieldLabel: 'Message',
|
|
//maxLength: 160,
|
|
//maxLengthText: 'max 160 characters',
|
|
width: 800,
|
|
height: 300,
|
|
autoScroll: true,
|
|
readOnly: true
|
|
}
|
|
], // itmes
|
|
buttons: [
|
|
|
|
/* {
|
|
id: 'update-label',
|
|
text: 'Update label',
|
|
handler: function() {
|
|
var tviewer = m_App;
|
|
if( tviewer )
|
|
{
|
|
tviewer.updateParameter('labelformat','$(seq-id)',true);
|
|
}
|
|
}
|
|
},
|
|
*/
|
|
{
|
|
id: 'reload-tree',
|
|
text: 'Load new tree',
|
|
handler: function() {
|
|
var tviewer = m_App;
|
|
if( tviewer )
|
|
{
|
|
tviewer.reloadTree('?appname=ncbi_tviewer\u0026btc_id=data/tree_txt.asn\u0026toolbar=azopth\u0026panx=30\u0026pany=30\u0026renderer=slanted\u0026width=1000\u0026height=1000\u0026renderscale=false\u0026featnames=*',afterLoadCallback);
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: 'select-node',
|
|
text: 'Select Node',
|
|
handler: function() {
|
|
//var tviewer = m_App;
|
|
if( tviewer )
|
|
{
|
|
tviewer.selectNode(latestMouseOverNodeID);
|
|
var resultsCallback = function(res)
|
|
{
|
|
res.forEach(function(nd)
|
|
{
|
|
var nd_desrc = (nd.l == '') ? ('Node: id' + nd.id) : nd.l;
|
|
//addValue(nd_desrc);
|
|
})
|
|
};
|
|
|
|
res = tviewer.getChildrenNodes(latestMouseOverNodeID,resultsCallback);
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: 'show-node',
|
|
text: 'Show Node',
|
|
handler: function() {
|
|
// var tviewer = m_App;
|
|
if( tviewer )
|
|
{
|
|
tviewer.showNode(latestMouseOverNodeID);
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: 'select-by-feature',
|
|
text: 'Select by feature',
|
|
handler: function() {
|
|
//var tviewer = m_App;
|
|
if( tviewer )
|
|
{
|
|
// var arr = ["PDT000008289.1","PDT000024473.2", "PDT000024482.2", "PDT000024507.2", "PDT000024508.2", "PDT000024543.2", "PDT000024548.2", "PDT000031737.2", "PDT000031738.2"]
|
|
|
|
var resultsCallback = function(res)
|
|
{
|
|
//alert(res);
|
|
};
|
|
|
|
var arr = [
|
|
"-0.00688",
|
|
"-0.15075"
|
|
|
|
];
|
|
|
|
/*
|
|
var arr = [
|
|
"0.43825",
|
|
"0.34751",
|
|
"0.13667",
|
|
"-0.15075",
|
|
"0.15075"
|
|
|
|
];
|
|
*/
|
|
|
|
|
|
/* var arr = [
|
|
"0.43825",
|
|
"0.34751",
|
|
"0",
|
|
"0.13667",
|
|
"-0.15075",
|
|
"0.15075",
|
|
"-0.00688",
|
|
"0.00688"];
|
|
*/
|
|
// tviewer.selectNodeByFeature("dist", "0.43825",resultsCallback,true,true);
|
|
|
|
tviewer.selectNodesByFeature("dist",arr,resultsCallback,false,true);
|
|
|
|
|
|
//tviewer.m_tv.setCenter(1877,698);
|
|
//tviewer.m_tv.setCenter(1233,526);
|
|
//tviewer.selectNodeByFeature("dist", "0.43825",true,false);
|
|
|
|
/*
|
|
var nodeSet = [0,1];
|
|
//var nodeSet= {0:true};
|
|
tviewer.selectNodesByFeature('dist',nodeSet);*/
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: 'selected_nodes',
|
|
text: 'Selected nodes',
|
|
handler: function() {
|
|
// var tviewer = m_App;
|
|
if( tviewer )
|
|
{
|
|
var resultsCallback = function(res)
|
|
{
|
|
res.forEach(function(nd)
|
|
{
|
|
var nd_desrc = (nd.l == '') ? ('Node: id' + nd.id) : nd.l;
|
|
addValue(nd_desrc);
|
|
})
|
|
};
|
|
|
|
var nodes = tviewer.getSelectedNodesObjects(resultsCallback);
|
|
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: 'visible-nodes',
|
|
text: 'Visible Nodes',
|
|
handler: function() {
|
|
//var tviewer = m_App;
|
|
if( tviewer ){
|
|
|
|
var nodes = tviewer.getVisibleNodes();
|
|
nodes.forEach(function(nd)
|
|
{
|
|
var nd_desrc = (nd.l == '') ? ('Node: id' + nd.id) : nd.ll;
|
|
addValue(nd_desrc);
|
|
})
|
|
}
|
|
}
|
|
}
|
|
,
|
|
{
|
|
id: 'clear-log',
|
|
text: 'Clear Log',
|
|
handler: function() {
|
|
var textarea = Ext.getCmp( 'log-entry' );
|
|
textarea.setValue( '' );
|
|
}
|
|
}
|
|
]
|
|
});
|
|
function doInit()
|
|
{
|
|
var updateButtonsWithLatestMouseOver = function(lmo_id)
|
|
{
|
|
latestMouseOverNodeID = lmo_id;
|
|
var showNodeBtn = Ext.get('show-node');
|
|
if(showNodeBtn)
|
|
{
|
|
//showNodeBtn.text = 'Show node '+latestMouseOverNodeID;
|
|
showNodeBtn.setText('Show node '+latestMouseOverNodeID);
|
|
form.updateLayout();
|
|
|
|
}
|
|
|
|
var selectNodeBtn = Ext.get('select-node');
|
|
if(selectNodeBtn)
|
|
{
|
|
//showNodeBtn.text = 'Show node '+latestMouseOverNodeID;
|
|
selectNodeBtn.setText('Select node '+latestMouseOverNodeID);
|
|
form.updateLayout();
|
|
|
|
}
|
|
}
|
|
|
|
|
|
if (typeof TreeView === 'undefined')
|
|
{
|
|
setTimeout(doInit, 50);//wait 50 millisecnds then recheck
|
|
return;
|
|
}
|
|
var instanceInit = function (params) {
|
|
if (TreeView.findAppByIndex(0) === null) {
|
|
setTimeout(instanceInit, 150); //wait 150 millisecnds then recheck
|
|
return;
|
|
}
|
|
var tviewer = TreeView.findAppByIndex(0);
|
|
|
|
if (tviewer)
|
|
{
|
|
//real action
|
|
tviewer.customnodeactions = [
|
|
{
|
|
name : "Custom Action 1",
|
|
action : customAction
|
|
|
|
},
|
|
{
|
|
name : "Custom Action 2",
|
|
action : customAction2,
|
|
condition: "branch"
|
|
|
|
}
|
|
];
|
|
|
|
|
|
|
|
|
|
// fireNodeEvent('subtree_from_node',node);
|
|
tviewer.on({
|
|
|
|
'user_label_update': function(lab_form,max_len )
|
|
{
|
|
addValue("user_label_update: format="+lab_form+ ', max len='+max_len);
|
|
},
|
|
|
|
'node_label_mouseover': function(nd )
|
|
{
|
|
var nd_desrc = (nd.l == '') ? ('Node: id' + nd.id) : nd.l;
|
|
updateButtonsWithLatestMouseOver(nd.id);
|
|
|
|
|
|
|
|
addValue("node_label_mouseover "+nd_desrc);
|
|
},
|
|
'node_label_mouseout': function(nd )
|
|
{
|
|
var nd_desrc = (nd.l == '') ? ('Node: id' + nd.id) : nd.l;
|
|
addValue("node_label_mouseout "+nd_desrc);
|
|
var retr_nd = tviewer.getNode(nd.id);
|
|
},
|
|
'node_label_click': function(nd )
|
|
{
|
|
var nd_desrc = (nd.l == '') ? ('Node: id' + nd.id) : nd.l;
|
|
addValue("node_label_click "+nd_desrc);
|
|
},
|
|
|
|
'node_mouseover': function(nd )
|
|
{
|
|
var nd_desrc = (nd.l == '') ? ('Node: id' + nd.id) : nd.l;
|
|
updateButtonsWithLatestMouseOver(nd.id);
|
|
addValue("node_mouseover "+nd_desrc);
|
|
},
|
|
'node_mouseout': function(nd )
|
|
{
|
|
var nd_desrc = (nd.l == '') ? ('Node: id' + nd.id) : nd.l;
|
|
addValue("node_mouseout "+nd_desrc);
|
|
|
|
},
|
|
'nodes_changed': function( )
|
|
{
|
|
addValue("nodes_changed");
|
|
},
|
|
'node_selection_changed': function( )
|
|
{
|
|
addValue("node_selection_changed");
|
|
// var tviewer = m_App;
|
|
if( tviewer ){
|
|
|
|
var selected_nodes = tviewer.getSelectedNodes();
|
|
var node1;
|
|
for (var node in selected_nodes)
|
|
{
|
|
addValue('Selected Node id: ' + node);
|
|
if (!node1)
|
|
node1 = node;
|
|
else
|
|
{
|
|
var nd1 = tviewer.getNode(node1);
|
|
var nd2 = tviewer.getNode(node);
|
|
var dist = tviewer.getDistance(nd1, nd2);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
},
|
|
'custom_event': function( )
|
|
{
|
|
addValue("custom_event");
|
|
|
|
|
|
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
else
|
|
{
|
|
Ext.Msg.alert( 'Error', 'No TreeViewer found.');
|
|
}
|
|
|
|
};
|
|
|
|
instanceInit();
|
|
}
|
|
doInit();
|
|
} // end of init
|
|
};
|
|
}(); // end of app
|
|
|
|
|
|
//window.onload = function ()
|
|
{
|
|
TreeViewOnReady( DemoApp.init, DemoApp );
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</div>
|
|
|
|
<!-- NCBI Footer -->
|
|
<div id="ncbifooter" class="hidden_for_print">
|
|
<div id="footer-contents-right">
|
|
<a class="nih_img_link" title="NIH" href="https://www.nih.gov">NIH</a>
|
|
<a class="nlm_img_link" title="NLM" href="https://www.nlm.nih.gov">NLM</a>
|
|
<a class="dhhs_img_link" title="DHHS" href="https://www.dhhs.gov">DHHS</a>
|
|
<a class="usagov_img_link" title="USA.gov" href="https://www.usa.gov">USA.gov</a>
|
|
</div>
|
|
|
|
<div id="footer-contents-left">
|
|
<a href="https://www.ncbi.nlm.nih.gov/About/glance/contact_info.html">Contact</a> |
|
|
<a href="https://www.ncbi.nlm.nih.gov/About/disclaimer.html">Copyright</a> |
|
|
<a href="https://www.ncbi.nlm.nih.gov/About/disclaimer.html#disclaimer">Disclaimer</a> |
|
|
<a href="https://www.nlm.nih.gov/privacy.html">Privacy</a> |
|
|
<a href="https://www.ncbi.nlm.nih.gov/About/accessibility.html">Accessibility</a>
|
|
<p class="address">National Center for Biotechnology Information, US National Library of Medicine <br />
|
|
8600 Rockville Pike, Rockville, MD USA 20894</p>
|
|
</div>
|
|
</div>
|
|
<!-- NCBI Footer Ends -->
|
|
<!-- NCBI client-side logging -->
|
|
<!--script type="text/javascript" src="/portal/portal3rc.fcgi/rlib/js/InstrumentOmnitureBaseJS/InstrumentNCBIBaseJS/InstrumentPageStarterJS.js"></script-->
|
|
</body>
|
|
</html>
|