<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- $Id: demo_sv.html 46755 2021-09-28 21:41:29Z lotovv $ -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" style="overflow-y:scroll;">
<head>
<title>NCBI Multiple Sequence Alignment Viewer 1.25.3</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- applog meta tags -->
<meta name="ncbi_app" content="multialign-js" />
<link rel="stylesheet" type="text/css" href="../css/ncbi_templates.css"/>
<script type="text/javascript" src="../js/multialign.js"></script>
<script type="text/javascript" src="/projects/sviewer/js/sviewer.js"></script>
<script>
function loadSV(info, key) {
if (info.id == 'lcl|consensus') info.id = '';
var svapp = SeqView.App.findAppByDivId("sviewer_1");
if (!svapp)
svapp = new SeqView.App("sviewer_1");
params = 'appname=ncbi_sv_demo&id=' + info.id + "&v=" + info.start + ':' + info.end;
if (key) params += "&key=" + key;
svapp.reload(params);
if (!info.id) {
Ext.DomHelper.append(svapp.m_DivId, {tag: 'div', id:svapp.m_DivJSId});
new Ext.Panel({
renderTo: svapp.m_DivJSId,
height: 40,
layout: 'center',
items: [{xtype:'displayfield',
value: '<b>Consensus sequence cannot be shown, click on an alingment row</b>'}
]
})
}
}
MultiAlignViewOnReady(function() {
var app = MultiAlignView.App.findAppByIndex(0);
app.on('selection_changed', function(rows) {
if (!rows) return;
//var row = rows[0];
var info = app.getRowInfo(rows.area.d);
loadSV(info, app.m_Key);
});
app.on('visible_range_changed', function(range) {
});
/* app.on('graphical_image_loaded', function(view) {
var row = app.getRows()[0];
var info = app.getRowInfo(row);
app.selectRow(row, true);
loadSV(info, app.m_Key);
});*/
});
</script>
</head>
<body>
<noscript>
<h1>JavaScript is required.</h1>
</noscript>
<h2>Example of interaction of MSAV and SV on the same page</h2>
<p>Click on an alignment row to see it displayed in Sequence Viewer</p>
<div id="msaviewer_1" class="MultiAlignViewerApp" data-autoload style="height:400px">
<a href="?url=https://www.ncbi.nlm.nih.gov/projects/msaviewer/data/YP.13.muscle.asn&coloring=rasmol&appname=ncbi_msav_demo"></a>
</div>
<div id="sviewer_1"></div>
</body>
</html>