Last active
August 29, 2015 13:57
-
-
Save alexmasselot/9399553 to your computer and use it in GitHub Desktop.
pViz.js interactions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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