420 lines
14 KiB
HTML
420 lines
14 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<!-- $Id: tvdemo_query_api.html 37150 2016-12-08 17:54:12Z lotovv $ -->
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
<head>
|
|
<title>NCBI Tree Viewer 1.11.2 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"/>
|
|
<link rel="stylesheet" type="text/css" href="css/tv_standalone.css"/>
|
|
<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 </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 using macros to change appearance of tree in Tree Viewer.
|
|
<p/>
|
|
<p>Here is <a href="../../tools/treeviewer/macros/">documentation</a> for language used to create your macros </p>
|
|
</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: 500px; _width: 600px;">
|
|
|
|
<a href="?appname=ncbi_tviewer&&btc_id=data/PDG000000001.489.asn&featnames=*&embedded=true&renderer=rect"></a>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
</p>
|
|
<p>
|
|
</p>
|
|
|
|
|
|
|
|
<div id="low_sec">
|
|
<div id="api_form" class="api_form"></div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
|
|
var customAction = function(nd)
|
|
{
|
|
var nd_desrc = (nd.l == '') ? ('Node: id' + nd.id) : nd.l;
|
|
alert('Custom action 1 call '+ nd_desrc);
|
|
};
|
|
var customAction2 = function(nd)
|
|
{
|
|
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 initTable = function()
|
|
{
|
|
|
|
Ext.define('NodesModel', {
|
|
extend: 'Ext.data.Model',
|
|
fields: [
|
|
{name: 'Isolation Type'},
|
|
{name: 'Location'},
|
|
{name: 'Isolation Source'},
|
|
{name: 'kmer_group'},
|
|
{name: 'minsame'},
|
|
{name: 'SNP_Cluster'},
|
|
{name: 'Organism Group'},
|
|
{name: 'Strain'},
|
|
{name: 'Isolate'}
|
|
]
|
|
});
|
|
|
|
|
|
var sampleMacro = 'MACRO TM "Demo" VAR color="[0 255 255]" mysize=8 FOR EACH Node WHERE (Date(target_creation_date, "Y-M-D") > Date("08/10/2014") and (isolation_source=lettuce)) DO SetColor(color); SetSize(mysize); DONE';
|
|
|
|
|
|
var sampleMacro = 'MACRO TM "Demo" VAR color="[0 255 255]" mysize=8 FOR EACH Node WHERE (isolation_source=lettuce) DO SetColor(color); SetSize(mysize); DONE MACRO TM "Demo2" VAR color="[255 0 255]" mysize=12 FOR EACH Node WHERE (isolation_source=culture) DO SetColor(color); SetSize(mysize); DONE';
|
|
|
|
|
|
var sampleMacro = 'MACRO TM1 "Demo" VAR color="[0 255 0]" FOR EACH Node WHERE (isolation_source=lettuce) DO AddToSelectionSet("lettuce", color); DONE \n';
|
|
sampleMacro += 'MACRO TM2 "Demo2" VAR color="[0 255 255]" FOR EACH Node WHERE (isolation_source=culture) DO AddToSelectionSet("culture", color); DONE \n';
|
|
sampleMacro += 'MACRO TM3 "Demo2" VAR color="[255 0 0]" FOR EACH Node WHERE (isolation_source=blood) DO AddToSelectionSet("blood", color); DONE ';
|
|
|
|
|
|
var receiveAffectedNodeIDs = function (res)
|
|
{
|
|
|
|
res.TV_MacroResults.results.forEach(function(macro) {
|
|
console.log('macro_name ', macro.macro_name);
|
|
console.log('affected node ids: ');
|
|
macro.node_ids.forEach(function (nd) {
|
|
console.log('node id:', nd);
|
|
|
|
}
|
|
)
|
|
}
|
|
)
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
var formPanel = new Ext.form.Panel({
|
|
renderTo: 'api_form',
|
|
//width: 700,
|
|
height: 300,
|
|
title: 'Macro API test',
|
|
defaultType: 'textfield',
|
|
|
|
bodyPadding: 10,
|
|
defaults: {
|
|
labelWidth: 50
|
|
},
|
|
|
|
listeners: {
|
|
'beforeshow': function (qt)
|
|
{
|
|
var qf = Ext.getCmp('macro_field');
|
|
qf.setValue(sampleMacro);
|
|
}
|
|
},
|
|
buttons: [
|
|
|
|
|
|
{
|
|
id: 'run_macro',
|
|
text: 'Execute',
|
|
handler: function() {
|
|
var tviewer = TreeView.findAppByIndex( 0 );
|
|
if( tviewer )
|
|
{
|
|
var qf = Ext.getCmp('macro_field');
|
|
var macro_txt = qf.getValue();
|
|
tviewer.applyMacros(macro_txt,receiveAffectedNodeIDs);
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: 'repopulate_macro',
|
|
text: 'Repopulate',
|
|
handler: function() {
|
|
|
|
var qf = Ext.getCmp('macro_field');
|
|
qf.setValue(sampleMacro);
|
|
}
|
|
},
|
|
{
|
|
id: 'clear_macro',
|
|
text: 'Clear Macro',
|
|
handler: function() {
|
|
var tviewer = TreeView.findAppByIndex( 0 );
|
|
if( tviewer )
|
|
{
|
|
tviewer.clearMacros();
|
|
}
|
|
}
|
|
}
|
|
],
|
|
|
|
items: [{
|
|
|
|
xtype: 'textareafield',
|
|
//grow: true,
|
|
height: 220,
|
|
id: 'macro_field',
|
|
name: 'macro',
|
|
fieldLabel: 'Macro',
|
|
anchor: '100%',
|
|
value: sampleMacro
|
|
}
|
|
]
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 );
|
|
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"
|
|
|
|
}
|
|
];
|
|
|
|
|
|
|
|
var on_selected_nodes_handler = function(selected_nodes)
|
|
{
|
|
|
|
selected_nodes.forEach(function(node)
|
|
{
|
|
|
|
if (node.feats)
|
|
node.feats.forEach(function(f)
|
|
{
|
|
if (f.n == 'seq-id')
|
|
{
|
|
//addValue('Selected seq-id: ' + f.v);
|
|
}
|
|
});
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// fireNodeEvent('subtree_from_node',node);
|
|
tviewer.on({
|
|
|
|
'node_selection_changed': function( )
|
|
{
|
|
//addValue("node_selection_changed");
|
|
// var tviewer = m_App;
|
|
if( tviewer ){
|
|
|
|
tviewer.getSelectedNodesObjects(on_selected_nodes_handler);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
else
|
|
{
|
|
Ext.Msg.alert( 'Error', 'No TreeViewer found.');
|
|
}
|
|
|
|
};
|
|
|
|
instanceInit();
|
|
}
|
|
doInit();
|
|
initTable();
|
|
} // 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>
|