Skip to content

Instantly share code, notes, and snippets.

@alexmasselot

alexmasselot/index.html

Last active August 29, 2015 13:57
Show Gist options
  • Save alexmasselot/9399553 to your computer and use it in GitHub Desktop.
Save alexmasselot/9399553 to your computer and use it in GitHub Desktop.
Download ZIP
pViz.js interactions
Raw
index.html
<html>
<head>
<title>pViz.js interactions</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://research-pub.gene.com/pviz/examples/deps/pviz-core.css">
<script src="http://research-pub.gene.com/pviz/examples/deps/pviz-bundle.min.js"></script>
</head>
<body class="container">
<div class="row">
<h2>pViz customizing interaction</h2>
</div>
<!-- min-width is for http://bl.ocks.org/ iframe (doc width sometimes 0 at init time)-->
<div id="main" class="row" style="min-width:720px"></div>
<div class="row">
<div class="span2" >
<strong>mouseover</strong>
</div><div class="span10" id="output-mouse-over"></div>
</div>
<div class="row">
<div class="span2" >
<strong>xchange</strong>
</div><div class="span10" id="output-x-change"></div>
</div>
<div class="row">
<h3>Comments</h3>
<h4>Mouse over features</h4>
Mousing over features can launch some more interactive experience.
We demonstrate here how to display secondary structure feature details in a box.
Any JavaScript code can be launched based on the feature.
<p>
Mouse over secondary structure to see it happen.
</p>
<h4>change mouse position</h4>
The second type of interaction is to move the mouse (on the x axis). It will trigger a callback with the mouse coordinate into the sequence one.
In fact, a start and an end position are passed to the callback (1 pixel can mean larger position in case of long sequence)
</div>
<div class="row">
<h4>Way more examples and demo apps with pViz <a href="http://research-pub.gene.com/pviz/examples/" target="_TOP_">here</a></h4>
</div>
<script class="example">
var pviz = this.pviz;
/*
* for the sake of the demo, we keep track of the mousover ft
*/
var mouseOveredFT;
/*
* add a mouseover/mouseout call back based on the feature type
*/
pviz.FeatureDisplayer.addMouseoverCallback(['helix', 'turn', 'beta_strand'], function(ft) {
mouseOveredFT = ft;
var el = $('#output-mouse-over');
el.empty();
el.html('<pre>' + JSON.stringify(ft) + '</pre>')
}).addMouseoutCallback(['helix', 'turn', 'beta_strand'], function(ft) {
mouseOveredFT = undefined;
});
var seq = 'MELAALCRWGLLLALLPPGAASTQVCTGTDMKLRLPASPETHLDMLRHLYQGCQVVQGNLELTYLPTNASLSFLQDIQEVQGYVLIAHNQVRQVPLQRLRIVRGTQLFEDNYALAVLDNGDPLNNTTPVTGASPGGLRELQLRSLTEILKGGVLIQRNPQLCYQDTILWKDIFHKNNQLA';
var seqEntry = new pviz.SeqEntry({
sequence : seq
});
var view = new pviz.SeqEntryAnnotInteractiveView({
model : seqEntry,
el : '#main',
/** adding a xChange callback. It is called whenever the x position is fired
*
*/
xChangeCallback : function(pStart, pEnd) {
var str = 'cursor at ' + pStart.toFixed(1) + ' - ' + pEnd.toFixed(1);
if (mouseOveredFT !== undefined) {
str += '<strong> -> on FT</strong>'
}
$('#output-x-change').html(str);
}
})
view.render();
seqEntry.addFeatures([{
category : 'regions',
type : 'topological domain',
text : 'extra cellular',
start : 22,
end : 650
}, {
category : 'secondary structure',
type : 'beta_strand',
start : 24,
end : 26
}, {
category : 'secondary structure',
type : 'helix',
start : 38,
end : 49
}, {
category : 'secondary structure',
type : 'beta_strand',
start : 53,
end : 57
}, {
category : 'secondary structure',
type : 'beta_strand',
start : 59,
end : 63
}, {
category : 'secondary structure',
type : 'helix',
start : 71,
end : 73
}, {
category : 'secondary structure',
type : 'beta_strand',
start : 78,
end : 81
}, {
category : 'secondary structure',
type : 'beta_strand',
start : 83,
end : 87
}, {
category : 'secondary structure',
type : 'beta_strand',
start : 91,
end : 94
}, {
category : 'secondary structure',
type : 'turn',
start : 108,
end : 110
}, {
category : 'secondary structure',
type : 'beta_strand',
start : 111,
end : 116
}, {
category : 'secondary structure',
type : 'turn',
start : 129,
end : 131
}, {
category : 'secondary structure',
type : 'beta_strand',
start : 138,
end : 140
}, {
category : 'secondary structure',
type : 'beta_strand',
start : 150,
end : 155
}]);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment