294 lines
14 KiB
HTML
294 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<!-- $Id: event_demo.html 47770 2024-07-25 18:40:49Z evgeniev $ -->
|
|
<html lang="en" >
|
|
<head >
|
|
<title>NCBI Sequence Viewer 3.50.0 Event 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 src="js/sviewer.js" id="autoload"></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 techniques of Sequence Viewer event listening for embedding Web page.
|
|
<p/>
|
|
|
|
<div id="event-log"></div>
|
|
<p/>
|
|
<button id="prepProcessTT_button" onclick=switchPP(this)>ON ToolTip Preprocessing</button>
|
|
<p/>
|
|
<div id="SeqViewerFrame" class="SeqViewerFrame" style="padding-left:unset;">
|
|
<div id="SeqViewerTitle" class="SeqViewerTitle"></div>
|
|
<div id="SeqViewerTitleID" class="SeqViewerTitleID"></div>
|
|
<div id="SeqViewer" class="SeqViewerApp"><a href="?embedded=full&appname=eventdemo&id=NC_000001&app_context=GEO"></a></div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var DemoApp = function() {
|
|
// do NOT access DOM from here; elements don't exist yet
|
|
|
|
// private variables
|
|
|
|
// private functions
|
|
|
|
// public space
|
|
return {
|
|
// public properties, e.g. strings to translate
|
|
|
|
// public methods
|
|
init: function() {
|
|
|
|
var form = new Ext.Panel({
|
|
renderTo: 'event-log',
|
|
labelAlign: 'top',
|
|
frame: true,
|
|
title: 'Event Log',
|
|
//iconCls: 'icon-basket',
|
|
width: 600,
|
|
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: 560,
|
|
height: 300,
|
|
autoScroll: true,
|
|
readOnly: true
|
|
}
|
|
], // itmes
|
|
buttons: [{
|
|
id: 'api-event',
|
|
text: 'API Event',
|
|
handler: function() {
|
|
var sviewer = SeqView.App.findAppByIndex( 0 );
|
|
if( sviewer ){
|
|
sviewer.fireEvent( 'api_visible_range_changed', sviewer );
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: 'clear-log',
|
|
text: 'Clear Log',
|
|
handler: function() {
|
|
var textarea = Ext.getCmp( 'log-entry' );
|
|
textarea.setValue( '' );
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
var sviewer = SeqView.App.findAppByIndex( 0 );
|
|
|
|
|
|
|
|
if (sviewer) {
|
|
|
|
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;
|
|
};
|
|
sviewer.on({
|
|
'visible_range_changed': function(view, flags) {
|
|
if (flags.fire == false) return;
|
|
addValue("------ Event 'visible_range_changed': new range is ["
|
|
+ view.toSeq()[0] + ", " + view.toSeq()[1] + "]");
|
|
},
|
|
'api_visible_range_changed': function(view) {
|
|
addValue("------ Event 'api_visible_range_changed'");
|
|
},
|
|
'graphical_image_loaded': function(view) {
|
|
var categories = SeqView.TM.processTracksInfo(view.m_App.m_Config.TrackConfig);
|
|
var act_tracks = SeqView.TM.collectAllTracks(categories, true);
|
|
var track_line = SeqView.TM.tracksArrayToString(act_tracks, true, '\n');
|
|
|
|
addValue(
|
|
"------ Event 'graphical_image_loaded':\n tracks are "
|
|
+ track_line + "\n new range is ["
|
|
+ view.toSeq()[0] + ", " + view.toSeq()[1] + "]"
|
|
);
|
|
|
|
},
|
|
'configuration_loaded': function(app) {
|
|
var categories = SeqView.TM.processTracksInfo(app.m_Config.TrackConfig);
|
|
var act_tracks = SeqView.TM.collectAllTracks(categories, true);
|
|
var track_line = SeqView.TM.tracksArrayToString(act_tracks, true, '\n');
|
|
|
|
addValue("------ Event 'configuration_loaded': \n active tracks are " + track_line);
|
|
},
|
|
'configuration_changed': function(app) {
|
|
var categories = SeqView.TM.processTracksInfo(app.m_Config.TrackConfig);
|
|
var act_tracks = SeqView.TM.collectAllTracks(categories, true);
|
|
var track_line = SeqView.TM.tracksArrayToString(act_tracks, true, '\n');
|
|
|
|
addValue("------ Event 'configuration_changed': \n new active tracks are " + track_line);
|
|
},
|
|
'trackSet_requested': function(tSet) {
|
|
var tList = '';
|
|
for (var i in tSet.tracks) {
|
|
tList += ' ' + i + '. ' + tSet.tracks[i].id + '\n';
|
|
}
|
|
addValue("------ Event 'trackSet_requested':\n" + tList);
|
|
},
|
|
'configuration_panel': function(app, action) {
|
|
addValue("------ Event 'configuration_panel': " + action);
|
|
},
|
|
|
|
'panorama_image_loaded': function(view) {
|
|
addValue("------ Event 'panorama_image_loaded': new panorama image loaded");
|
|
},
|
|
'marker_created': function(marker) {
|
|
addValue("------ Event 'marker_created': marker '" + marker.visible_name + "' is created.");
|
|
},
|
|
'marker_deleted': function(marker) {
|
|
addValue("------ Event 'marker_deleted': marker '" + marker.visible_name + "' is deleted.");
|
|
},
|
|
'feature_clicked': function(view, area) {
|
|
var track = view.m_App.m_Config.getObjIdTrack(area.parent_id);
|
|
var action = (view.m_SelectedSig.indexOf(area.signature) >= 0 ? '' : 'de') + 'selected';
|
|
addValue("------ Event 'feature_clicked': feature '" + area.signature + "' is " + action);
|
|
addValue(", parent track: " + track);
|
|
},
|
|
'origin_changed': function(app) {
|
|
addValue( "------ Event 'origin_changed': origin changed to " + app.m_Origin);
|
|
},
|
|
'strand_changed': function(app, view) {
|
|
addValue("------ Event 'strand_changed': strand is flipped.");
|
|
},
|
|
'selection_changed': function(view) {
|
|
addValue("------ Event 'selection_changed': selection is changed.");
|
|
},
|
|
'tracks_errors': function(tracks) {
|
|
addValue("------ Event 'tracks_errors'");
|
|
tracks.forEach(function(t){
|
|
if (!t.status || !t.status.code) return;
|
|
addValue('Track name: \"' + t.display_name + '\", Error: '
|
|
+ t.status.msg);
|
|
});
|
|
},
|
|
'user_changed_selection' : function( view ){
|
|
var range = view.getSelectedRangeSet().pop() || [];
|
|
addValue("Event 'user_changed_selection': user selected range [" + range[0] + "," + range[1] +"]");
|
|
}
|
|
});
|
|
clickButton = function(id) { console.log('TT button ID: ' + id); }
|
|
switchPP = function(butt) {
|
|
var str = butt.innerHTML;
|
|
if (str[1] == 'N') {
|
|
butt.innerHTML = str.replace('N', 'FF');
|
|
sviewer.setTooltipPreprocessor(modifyTT);
|
|
} else {
|
|
butt.innerHTML = str.replace('FF', 'N');
|
|
sviewer.setTooltipPreprocessor();
|
|
}
|
|
}
|
|
var modifyTT = function(linksList, obj_info) {
|
|
console.log('obj_info:', obj_info);
|
|
for (var j = linksList.length - 1; j >= 0; j--) {
|
|
if (j % 3 == 0) { linksList.splice(j, 1); continue; }
|
|
var arrlnk = linksList[j].links;
|
|
if (j % 2 || arrlnk.length > 1)
|
|
for (var i = 0; i < arrlnk.length; i++)
|
|
arrlnk[i].link +='#added_text#';
|
|
else
|
|
linksList[j].html ='<button id="Link#' + j + '" onclick="clickButton(this.id)" ext:qtip="ClickButton function"'
|
|
+ 'style=" font-size: 11px; border-radius: 4px; border-width: 1px; background-color: whitesmoke;">'
|
|
+ arrlnk[0].label + '</button>';
|
|
}
|
|
}
|
|
} else {
|
|
Ext.Msg.alert( 'Error', 'No SeqViewer found.');
|
|
}
|
|
|
|
} // end of init
|
|
};
|
|
}(); // end of app
|
|
|
|
// Waiting for SeqView is finaly ready
|
|
SeqViewOnReady(DemoApp.init, DemoApp);
|
|
|
|
</script>
|
|
</div>
|
|
|
|
</main>
|
|
<div id="footer"></div>
|
|
<script>
|
|
$(document).ready(function(){
|
|
$('#header').load("header.html");
|
|
$('#footer').load("footer.html");
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|