Skip to content

Commit cf8d088

Browse files
rocreguantrocreguant
committed
added clustal coloring on the main page and coarse view
1 parent 307cc17 commit cf8d088

File tree

6 files changed

+153
-217
lines changed

6 files changed

+153
-217
lines changed

‎MultipleSequenceAlignment.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -299,8 +299,8 @@ class MultipleSequenceAlignment {
299299
const ent = (this.entropyPerCol[col] - this.entropyRange.min) / this.entropyRange.width;
300300
consQ = ent >= this.colorThresh;
301301
}
302-
if (consQ && clrQ && aaclr.mview.hasOwnProperty(ch)) {
303-
const news = aaclr.mview[ch];
302+
if (consQ && clrQ && aaclr.defaultClasses.hasOwnProperty(ch)) {
303+
const news = aaclr.defaultClasses[ch];
304304
if (news !== last) {
305305
this.hseqs += last.length ? '</span>' : '';
306306
last = news;
@@ -915,7 +915,7 @@ class MultipleSequenceAlignment {
915915
if (ch1 === '-' || ch2 === '-') {
916916
continue;
917917
}
918-
if (!aaclr.mview.hasOwnProperty(ch1) || !aaclr.mview.hasOwnProperty(ch2)) {
918+
if (!aaclr.defaultClasses.hasOwnProperty(ch1) || !aaclr.defaultClasses.hasOwnProperty(ch2)) {
919919
continue; // both are valid AA
920920
}
921921
if (ch1 === ch2) {

‎SequenceLogoDiagramD3.js‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ class SequenceLogoDiagramD3 {
7272
.append('path')
7373
.attr('id', 'A')
7474
.attr('d', 'M 10 99 L 45 0 h 10 L 90 99 h -18 L 66 80 h -32 L 28 99 Z M 40 60 h 20 L 50 30 Z')
75-
.attr('class', 'c1');
75+
.attr('class', 'aaa');
7676
this.defs
7777
.append('path')
7878
.attr('id', 'B')
@@ -81,30 +81,30 @@ class SequenceLogoDiagramD3 {
8181
// tslint:disable-next-line: max-line-length
8282
'M 10 99 v -99 h 50 A 25,25 0 0,1 75,50 A 25,25 0 0,1 60,99 Z M 25 31 v 10 h 35 A 15,11 0 0,0 60,15 h -35 Z M 25 75 v 10 h 35 A 15,11 0 0,0 60,60 h -35 Z',
8383
)
84-
.attr('class', 'c8');
84+
.attr('class', 'aab');
8585
this.defs
8686
.append('path')
8787
.attr('id', 'C')
8888
.attr(
8989
'd',
9090
'M 10 50 v -15 A 46,46 0 0,1 85,12 L 72 25 A 31,31 0 0,0 25,40 v 25 A 31,31 0 0,0 72,75 L 85 88 A 46,46 0 0,1 10,70 Z',
9191
)
92-
.attr('class', 'c3');
92+
.attr('class', 'aac');
9393
this.defs
9494
.append('path')
9595
.attr('id', 'D')
9696
.attr('d', 'M 10 99 v -99 h 40 A 20,25 0 0,1 50,99 Z M 25 20 v 60 h 10 A 18,17 0 0,0 35,20 Z')
97-
.attr('class', 'c5');
97+
.attr('class', 'aad');
9898
this.defs
9999
.append('path')
100100
.attr('id', 'E')
101101
.attr('d', 'M 10 99 v -99 h 80 v 20 h -65 v 20 h 65 v 20 h -65 v 20 h 65 v 19 Z')
102-
.attr('class', 'c5');
102+
.attr('class', 'aae');
103103
this.defs
104104
.append('path')
105105
.attr('id', 'F')
106106
.attr('d', 'M 10 99 v -99 h 80 v 20 h -65 v 20 h 55 v 20 h -55 v 39 Z')
107-
.attr('class', 'c2');
107+
.attr('class', 'aaf');
108108
this.defs
109109
.append('path')
110110
.attr('id', 'G')
@@ -113,52 +113,52 @@ class SequenceLogoDiagramD3 {
113113
// tslint:disable-next-line: max-line-length
114114
'M 10 50 v -15 A 46,46 0 0,1 85,12 L 72 25 A 31,31 0 0,0 25,40 v 25 A 28,28 0 0,0 75,60 h -20 v -20 h 35 v 20 A 41,41 0 0,1 10,70 Z',
115115
)
116-
.attr('class', 'c1');
116+
.attr('class', 'aag');
117117
this.defs
118118
.append('path')
119119
.attr('id', 'H')
120120
.attr('d', 'M 10 99 v -99 h 15 v 40 h 50 v -40 h 15 v 99 h -15 v -40 h -50 v 40 Z')
121-
.attr('class', 'c2');
121+
.attr('class', 'aah');
122122
this.defs
123123
.append('path')
124124
.attr('id', 'I')
125125
.attr('d', 'M 25 99 v -19 h 17 v -60 h -17 v -20 h 50 v 20 h -17 v 60 h 17 v 19 Z')
126-
.attr('class', 'c1');
126+
.attr('class', 'aai');
127127
this.defs
128128
.append('path')
129129
.attr('id', 'J')
130130
.attr('d', 'M 57 50 v -30 h -17 v -20 h 50 v 20 h -17 v 30 A 0.6,1 0 0,1 15,50 h 15 A 0.5,1 0 0,0 57,50 Z')
131-
.attr('class', 'c8');
131+
.attr('class', 'aaj');
132132
this.defs
133133
.append('path')
134134
.attr('id', 'K')
135135
.attr('d', 'M 10 99 v -99 h 15 v 40 L 70 0 h 20 L 35 50 L 85 99 h -20 L 25 60 v 39 Z')
136-
.attr('class', 'c4');
136+
.attr('class', 'aak');
137137
this.defs
138138
.append('path')
139139
.attr('id', 'L')
140140
.attr('d', 'M 10 99 v -99 h 15 v 80 h 65 v 19 Z')
141-
.attr('class', 'c1');
141+
.attr('class', 'aal');
142142
this.defs
143143
.append('path')
144144
.attr('id', 'M')
145145
.attr('d', 'M 10 99 L 22 0 h 17 L 50 70 L 61 0 h 17 L 90 99 h -15 L 69 30 L 60 99 h -20 L 31 30 L 25 99 Z')
146-
.attr('class', 'c1');
146+
.attr('class', 'aam');
147147
this.defs
148148
.append('path')
149149
.attr('id', 'N')
150150
.attr('d', 'M 10 99 v -99 h 20 L 75 70 v -70 h 15 v 99 h -20 L 25 30 v 70 Z')
151-
.attr('class', 'c6');
151+
.attr('class', 'aan');
152152
this.defs
153153
.append('path')
154154
.attr('id', 'O')
155155
.attr('d', 'M 10 40 A 15,15 0 0,1 90 40 v 20 A 15,15 0 0,1 10 60 Z M 25 60 A 10,10 0 0,0 75,60 v -20 A 10,10 0 0,0 25,40 Z')
156-
.attr('class', 'c1');
156+
.attr('class', 'aao');
157157
this.defs
158158
.append('path')
159159
.attr('id', 'P')
160160
.attr('d', 'M 10 99 v -99 h 55 A 12,15 0 0,1 65 60 h -40 v 40 Z M 25 20 v 20 h 35 A 15,11 0 0,0 60,20 h -35 Z')
161-
.attr('class', 'c1');
161+
.attr('class', 'aap');
162162
this.defs
163163
.append('path')
164164
.attr('id', 'Q')
@@ -167,7 +167,7 @@ class SequenceLogoDiagramD3 {
167167
// tslint:disable-next-line: max-line-length
168168
'M 10 40 A 15,15 0 0,1 90 40 v 20 A 15,15 0 0,1 10 60 Z M 25 60 A 10,10 0 0,0 75,60 v -20 A 10,10 0 0,0 25,40 Z M 65 65 l 30 25 l -15 9 l -30 -24 Z',
169169
)
170-
.attr('class', 'c6');
170+
.attr('class', 'aaq');
171171
this.defs
172172
.append('path')
173173
.attr('id', 'R')
@@ -176,50 +176,50 @@ class SequenceLogoDiagramD3 {
176176
// tslint:disable-next-line: max-line-length
177177
'M 10 99 v -99 h 55 A 12,15 0 0,1 65 60 h -15 L 90 99 h -23 L 30 65 h -5 v 34 Z M 25 20 v 20 h 35 A 15,11 0 0,0 60,20 h -35 Z',
178178
)
179-
.attr('class', 'c4');
179+
.attr('class', 'aar');
180180
this.defs
181181
.append('path')
182182
.attr('id', 'S')
183183
.attr(
184184
'd',
185185
'M 10 78 l 15 -12 A 8,5 0 0,0 65 63 l -48 -12 A 8,7 0 0,1 90 22 l -15 12 A 8,5 0 0,0 35 37 l 48 12 A 8,7 0 0,1 10 78 Z',
186186
)
187-
.attr('class', 'c7');
187+
.attr('class', 'aas');
188188
this.defs
189189
.append('path')
190190
.attr('id', 'T')
191191
.attr('d', 'M 43 99 v -79 h -33 v -20 h 80 v 20 h -33 v 79 Z')
192-
.attr('class', 'c7');
192+
.attr('class', 'aat');
193193
this.defs
194194
.append('path')
195195
.attr('id', 'U')
196196
.attr('d', 'M 10 0 h 15 v 50 A 15,15 0 0,0 75 50 v -50 h 15 v 50 A 12,15 0 0,1 10 50 Z')
197-
.attr('class', 'c9');
197+
.attr('class', 'aau');
198198
this.defs
199199
.append('path')
200200
.attr('id', 'V')
201201
.attr('d', 'M 10 0 h 18 L 50 68 L 72 0 h 18 L 60 99 h -20 Z')
202-
.attr('class', 'c1');
202+
.attr('class', 'aav');
203203
this.defs
204204
.append('path')
205205
.attr('id', 'W')
206206
.attr('d', 'M 10 0 L 22 99 h 17 L 50 30 L 61 99 h 17 L 90 0 h -15 L 69 70 L 60 0 h -20 L 31 70 L 25 0 Z')
207-
.attr('class', 'c2');
207+
.attr('class', 'aaw');
208208
this.defs
209209
.append('path')
210210
.attr('id', 'X')
211211
.attr('d', 'M 10 0 h 18 L 50 40 L 72 0 h 18 L 59 50 L 90 99 h -18 L 50 60 L 28 99 h -18 L 41 50 Z')
212-
.attr('class', 'c8');
212+
.attr('class', 'aax');
213213
this.defs
214214
.append('path')
215215
.attr('id', 'Y')
216216
.attr('d', 'M 10 0 h 18 L 50 40 L 72 0 h 18 L 58 55 v 44 h -16 v -44 Z')
217-
.attr('class', 'c2');
217+
.attr('class', 'aay');
218218
this.defs
219219
.append('path')
220220
.attr('id', 'Z')
221221
.attr('d', 'M 10 20 v -20 h 80 v 20 L 28 80 h 62 v 19 h -80 v -19 L 72 20 Z')
222-
.attr('class', 'c8');
222+
.attr('class', 'aaz');
223223
}
224224
// addcolumnToPlot()
225225
// given a plot group (g) element, add a column to it

‎index.html‎

Lines changed: 7 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -281,8 +281,9 @@
281281
Generate msa image using
282282
<select id="msaImgClrSelect">
283283
<option value="1">mview</option>
284-
<option value="2">hydrophobicity</option>
285-
<option value="3">Mutations</option>
284+
<option value="2">clustal</option>
285+
<option value="3">hydrophobicity</option>
286+
<!--<option value="4">Mutations</option>-->
286287
</select>
287288
coloring :
288289
</td>
@@ -454,8 +455,8 @@
454455

455456
&nbsp;Coloring Scheme:
456457
<select id="colorScheme">
457-
<option value="original" style="background-color: blue">Original</option>
458-
<option value="clustal" style="background-color: green">Clustal</option>
458+
<option value="original" style="background-color: blue">mview (default)</option>
459+
<option value="clustal" style="background-color: green">clustal</option>
459460
</select>
460461
<br/>
461462

@@ -707,118 +708,11 @@ <h4><b>Privacy Policy</b></h4>
707708

708709
<div id="progress"></div>
709710
<script>
710-
//PART 1 in javascript:
711-
//$("#colorScheme").change(function() { document.body.className = $('option:selected', this).text(); });
712-
// console.log('A .......');
713-
// elem = document.querySelectorAll('.c0');
714-
// for(var i=0; i<elem.length; i++){
715-
// elem[i].style.setProperty('color', "#ffff00");
716-
// }
717-
// elem = document.querySelectorAll('.c1');
718-
// for(var i=0; i<elem.length; i++){
719-
// elem[i].style.setProperty('color', "#ffff00");
720-
// }
721-
// elem = document.querySelectorAll('.c2');
722-
// for(var i=0; i<elem.length; i++){
723-
// elem[i].style.setProperty('color', "#ffff00");
724-
// }
725-
// elem = document.querySelectorAll('.c3');
726-
// for(var i=0; i<elem.length; i++){
727-
// elem[i].style.setProperty('color', "#ffff00");
728-
// }
729-
// elem = document.querySelectorAll('.c7');
730-
// for(var i=0; i<elem.length; i++){
731-
// elem[i].style.setProperty('color', "#ffff00");
732-
// }
733-
// console.log('B .......');
734-
// }
735-
// document.getElementById("colorScheme").onchange = colorlist;
736711

737712
$(document).ready(function () {
738713
$('body').on('change','#colorScheme', function() {
739-
740-
var dict = {'.c0' :'#33cc00',
741-
'.c1' :'#009900',
742-
'.c2' :'#ffff00',
743-
'.c3' :'#33cc00',
744-
'.c4' :'#cc0000',
745-
'.c5' :'#0033ff',
746-
'.c6' :'#6600cc',
747-
'.c7' :'#0099ff',
748-
'.c8' :'#666666',
749-
'.c9' :'#999999',
750-
'.t0' :'#5858a7',
751-
'.t1' :'#6b6b94',
752-
'.t2' :'#64649b',
753-
'.t3' :'#2121de',
754-
'.t4' :'#9d9d62',
755-
'.t5' :'#8c8c73',
756-
'.t6' :'#0000ff',
757-
'.t7' :'#4949b6',
758-
'.t8' :'#60609f',
759-
'.t9' :'#ecec13',
760-
'.t10':'#b2b24d',
761-
'.t11':'#4747b8',
762-
'.t12':'#82827d',
763-
'.t13':'#c2c23d',
764-
'.t14':'#2323dc',
765-
'.t15':'#4949b6',
766-
'.t16':'#9d9d62',
767-
'.t17':'#c0c03f',
768-
'.t18':'#d3d32c',
769-
'.t19':'#ffff00'};
770-
771-
if (this.value == 'clustal'){
772-
// http://www.jalview.org/help/html/colourSchemes/clustal.html
773-
var dict = {'.c0' :'#f09048',
774-
'.c1' :'#15a4a4',
775-
'.c2' :'#f08080',
776-
'.c3' :'#c0c000',
777-
'.c4' :'#f01505',
778-
'.c5' :'#c048c0',
779-
'.c6' :'#15c015',
780-
'.c7' :'#15c015',
781-
'.c8' :'#666666',
782-
'.c9' :'#999999',
783-
'.t0' :'#5858a7',
784-
'.t1' :'#6b6b94',
785-
'.t2' :'#64649b',
786-
'.t3' :'#2121de',
787-
'.t4' :'#9d9d62',
788-
'.t5' :'#8c8c73',
789-
'.t6' :'#0000ff',
790-
'.t7' :'#15c015',
791-
'.t8' :'#60609f',
792-
'.t9' :'#ecec13',
793-
'.t10':'#b2b24d',
794-
'.t11':'#4747b8',
795-
'.t12':'#82827d',
796-
'.t13':'#c2c23d',
797-
'.t14':'#2323dc',
798-
'.t15':'#4949b6',
799-
'.t16':'#9d9d62',
800-
'.t17':'#c0c03f',
801-
'.t18':'#d3d32c',
802-
'.t19':'#ffff00'};
803-
}
804-
805-
806-
console.log('B .......');
807-
console.log(this.value);
808-
809-
810-
for(var key in dict) {
811-
var color = dict[key];
812-
813-
//get the elements with the color
814-
elem = document.querySelectorAll(key);
815-
for(var i=0; i<elem.length; i++){
816-
//Set the color
817-
elem[i].style.setProperty('color', color);
818-
}
819-
}
820-
821-
714+
document.getElementById("seqlogo").className = this.value;
715+
document.getElementById("MSAseqs").className = 'ali ' + this.value;
822716
});
823717
});
824718

‎index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -609,8 +609,10 @@ function asyncDrawMsaImage() {
609609
if (msaImgColorType === 1) {
610610
clr = getResidColor('mview', aa);
611611
} else if (msaImgColorType === 2) {
612-
clr = getResidHydroColor(aa);
612+
clr = getResidColor('clustal', aa);
613613
} else if (msaImgColorType === 3) {
614+
clr = getResidHydroColor(aa);
615+
}else if (msaImgColorType === 4) {
614616
clr = getResidColor('mview', aa);
615617

616618
if (msa.seqs[sequenceIndex].charAt(col) === msa.seqs[0].charAt(col)) {

0 commit comments

Comments
 (0)