Skip to content

Commit f137f24

Browse files
sblivensbliven
committed
Add MSAViewer to other CE-Symm page
Also switches to NGL master, since the alpha stopped working.
1 parent 9cb199a commit f137f24

4 files changed

Lines changed: 51 additions & 29 deletions

File tree

‎src/main/java/org/biojava/http/models/NGLParams.java‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ public class NGLParams {
3131

3232
public NGLParams(String structUrl) {
3333
url = "https://cdn.rawgit.com/arose/ngl/v0.7.1a/js/build/ngl.embedded.min.js";
34+
url = "https://rawgit.com/arose/ngl/master/dist/ngl.js";
3435
this.structUrl = structUrl;
3536
this.setSize(500);
3637
}

‎src/main/resources/static/js/ngl_ui.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,19 @@ function screenshot(stage,factor) {
4949
function defaultNGLRepr(stage) {
5050
stage.addRepresentation("cartoon", {sele:""});
5151
stage.addRepresentation("ball+stick",{sele:"hetero and not ( water or ion )"});
52+
}
53+
54+
/**
55+
* Returns a dynamic color scheme function that colors letters by their row
56+
*/
57+
function repeatScheme(numrows){
58+
var colors = palette('cb-Dark2', numrows);
59+
return function(letter,opts) {
60+
if(/[A-Z]/.exec(letter) && /[^a-z]/.exec(m.g.seqs.models[opts.y].attributes.seq[opts.pos]) ){
61+
return "#"+colors[opts.y];
62+
//return "#0f0";
63+
} else {
64+
return "#fff";
65+
}
66+
}
5267
}

‎src/main/resources/templates/cesymm.html.hbs‎

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,18 @@
33
<head>
44
<meta charset='utf-8'>
55
<title>{{structureId}} CE-Symm Analysis</title>
6+
<script src='//code.jquery.com/jquery-1.11.0.min.js'></script>
7+
<script src="{{url}}"></script>
68
</head>
79
<body>
810

911
<h1>CE-Symm Analysis of {{structureId}}</h1>
1012

11-
<script src='//code.jquery.com/jquery-1.11.0.min.js'></script>
12-
13-
<script src="{{url}}"></script>
13+
<div id="viewport" style="width: 100vw; height: 500px; display:block;"></div>
14+
<div id="messages"></div>
15+
<p><a href="/cesymm/{{structureId}}/multi">Multiple Superposition</a></p>
16+
<div id="msa">Loading Multiple Alignment...</div>
1417

15-
<script src="https://cdn.rawgit.com/google/palette.js/master/palette.js"></script>
16-
<!--script src="{{pallete_url}}"></script-->
1718
<script src="/js/ngl_ui.js"></script>
1819
<script>
1920
NGL.mainScriptFilePath = "{{url}}";
@@ -70,11 +71,28 @@ document.addEventListener( "DOMContentLoaded", function() {
7071
});
7172
} );
7273
74+
</script>
75+
<script src="https://cdn.bio.sh/msa/latest/msa.min.gz.js"></script>
76+
77+
<script src="https://cdn.rawgit.com/google/palette.js/master/palette.js"></script>
78+
<!--script src="{{pallete_url}}"></script-->
79+
<script>
80+
var opts = {
81+
el: document.getElementById("msa"),
82+
vis: {
83+
conserv: false,
84+
overviewbox: false
85+
}
86+
};
87+
88+
var m = new msa.msa(opts);
89+
m.u.file.importURL("/cesymm/{{structureId}}/fasta", function(){
90+
var numrows = m.g.seqs.length;
91+
m.g.colorscheme.addDynScheme("Repeats", repeatScheme(numrows) );
92+
m.g.colorscheme.set("scheme", "Repeats");
93+
m.render();
94+
});
7395
</script>
7496

75-
<div id="viewport" style="width: 100vw; height: 100vh; display:block;"></div>
76-
<div id="messages"></div>
77-
<p><a href="/cesymm/{{structureId}}/multi">Multiple Superposition</a>
78-
</p>
7997
</body>
8098
</html>

‎src/main/resources/templates/cesymm_multi.html.hbs‎

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@
1010

1111
<h1>CE-Symm Analysis of {{structureId}}: Multiple Superposition</h1>
1212

13+
<div id="viewport" style="width: 100vw; height: 500px; display:block;"></div>
14+
<div id="messages"></div>
15+
<p><a href="/cesymm/{{structureId}}">CE-Symm Alignment</a></p>
16+
<div id="msa">Loading Multiple Alignment...</div>
17+
18+
<script src="/js/ngl_ui.js"></script>
1319
<script>
1420
NGL.mainScriptFilePath = "{{url}}";
1521
var stage;
@@ -69,13 +75,11 @@ document.addEventListener( "DOMContentLoaded", function() {
6975
7076
</script>
7177

72-
<div id="viewport" style="width: 100vw; height: 100vh; display:block;"></div>
73-
<div id="messages"></div>
74-
<p><a href="/cesymm/{{structureId}}">CE-Symm Alignment</a></p>
7578

7679
<script src="https://cdn.bio.sh/msa/latest/msa.min.gz.js"></script>
77-
<div id="msa">Loading Multiple Alignment...</div>
7880

81+
<script src="https://cdn.rawgit.com/google/palette.js/master/palette.js"></script>
82+
<!--script src="{{pallete_url}}"></script-->
7983
<script>
8084
var opts = {
8185
el: document.getElementById("msa"),
@@ -87,28 +91,12 @@ var opts = {
8791
8892
var m = new msa.msa(opts);
8993
m.u.file.importURL("/cesymm/{{structureId}}/fasta", function(){
90-
/* Returns a dynamic color scheme function that colors letters by their row
91-
*/
92-
function repeatScheme(numrows){
93-
var colors = palette('cb-Dark2', numrows);
94-
return function(letter,opts) {
95-
if(/[A-Z]/.exec(letter) && /[^a-z]/.exec(m.g.seqs.models[opts.y].attributes.seq[opts.pos]) ){
96-
return "#"+colors[opts.y];
97-
//return "#0f0";
98-
} else {
99-
return "#fff";
100-
}
101-
}
102-
}
10394
var numrows = m.g.seqs.length;
10495
m.g.colorscheme.addDynScheme("Repeats", repeatScheme(numrows) );
10596
m.g.colorscheme.set("scheme", "Repeats");
10697
m.render();
10798
});
10899
</script>
109-
<script src="https://cdn.rawgit.com/google/palette.js/master/palette.js"></script>
110-
<!--script src="{{pallete_url}}"></script-->
111-
<script src="/js/ngl_ui.js"></script>
112100

113101

114102
</body>

0 commit comments

Comments
 (0)