Skip to content

Commit e15836c

Browse files
gamcilgamcil
committed
add sequence colorschemes to foldmason MSA viewer
1 parent aa9a3eb commit e15836c

2 files changed

Lines changed: 135 additions & 63 deletions

File tree

‎frontend/MSA.vue‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -112,10 +112,11 @@
112112
title="Toggle between per-column LDDT and 3Di score matrix-based colorschemes"
113113
class="input-label"
114114
>Colours</label>
115-
<v-btn-toggle dense mandatory color="primary" v-model="colorScheme">
116-
<v-btn x-small value="lddt" style="width: 40px;">LDDT</v-btn>
117-
<v-btn x-small value="3di" style="width: 40px;">3Di</v-btn>
118-
</v-btn-toggle>
115+
<v-select dense flat hide-details solo
116+
style="max-width: 140px; max-height: 32px;"
117+
v-model="colorScheme"
118+
:items="schemes"
119+
/>
119120
</div>
120121
</div>
121122
<div style="position: relative; display: flex; justify-content: center; align-items: center; width: fit-content; height: 80px;">
@@ -366,6 +367,24 @@ export default {
366367
blockIndex: 0,
367368
alphabet: 'aa',
368369
colorScheme: 'lddt',
370+
schemes: [
371+
{ header: "Structure-based" },
372+
{ text: "LDDT", value: "lddt" },
373+
{ text: "3Di", value: "3di" },
374+
{ header: "Sequence-based" },
375+
{ text: "Clustal", value: "clustal" },
376+
{ text: "Clustal2", value: "clustal2" },
377+
{ text: "Buried", value: "buried" },
378+
{ text: "Cinema", value: "cinema" },
379+
{ text: "Helix", value: "helix" },
380+
{ text: "Hydrophobicity", value: "hydrophobicity" },
381+
{ text: "Lesk", value: "lesk" },
382+
{ text: "MAE", value: "mae" },
383+
{ text: "Strand", value: "strand" },
384+
{ text: "Taylor", value: "taylor" },
385+
{ text: "Turn", value: "turn" },
386+
{ text: "Zappo", value: "zappo" },
387+
],
369388
matchRatioInner: 0.0,
370389
structureViewerSelection: [],
371390
structureViewerReference: 0,

‎frontend/MSAView.vue‎

Lines changed: 112 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -54,57 +54,106 @@
5454
import SequenceLogo from './SequenceLogo.vue';
5555
import { debounce } from './Utilities.js';
5656
57-
const colorsAa = {
58-
"A": "#80A0F0FF",
59-
"R": "#F01505FF",
60-
"N": "#00FF00FF",
61-
"D": "#C048C0FF",
62-
"C": "#F08080FF",
63-
"Q": "#00FF00FF",
64-
"E": "#C048C0FF",
65-
"G": "#F09048FF",
66-
"H": "#15A4A4FF",
67-
"I": "#80A0F0FF",
68-
"L": "#80A0F0FF",
69-
"K": "#F01505FF",
70-
"M": "#80A0F0FF",
71-
"F": "#80A0F0FF",
72-
"P": "#FFD700FF",
73-
"S": "#00FF00FF",
74-
"T": "#00FF00FF",
75-
"W": "#80A0F0FF",
76-
"Y": "#15A4A4FF",
77-
"V": "#80A0F0FF",
78-
"B": "#FFFFFFFF",
79-
"X": "#FFFFFFFF",
80-
"Z": "#FFFFFFFF",
81-
"-": "#ffffff"
82-
}
83-
84-
const colors3di = {
85-
"A": "#df9a8c",
86-
"C": "#fb72c5",
87-
"D": "#b4a3d8",
88-
"E": "#ff5701",
89-
"F": "#d99e81",
90-
"G": "#7491c5",
91-
"H": "#94abe1",
92-
"I": "#609d7b",
93-
"K": "#d7a304",
94-
"L": "#fe4c8b",
95-
"M": "#12a564",
96-
"N": "#d570fd",
97-
"P": "#cb99c4",
98-
"Q": "#da8e99",
99-
"R": "#9487d0",
100-
"S": "#e842fe",
101-
"T": "#42a299",
102-
"V": "#fb7edd",
103-
"W": "#d1a368",
104-
"Y": "#17a8fd",
105-
"X": "#c0c0c0",
106-
"-": "#ffffff"
107-
}
57+
const colorsAaByPalette = {
58+
"3di": {
59+
A: "#3563D4", R: "#91D435", N: "#D435C0", D: "#35D4B9", C: "#D48B35",
60+
Q: "#5C35D4", E: "#3BD435", G: "#D4356A", H: "#3598D4", I: "#C7D435",
61+
L: "#B235D4", K: "#35D484", M: "#D45535", F: "#3542D4", P: "#71D435",
62+
S: "#D4359F", T: "#35CDD4", W: "#D4AC35", Y: "#7D35D4", V: "#35D44F",
63+
B: "#D43549", X: "#3577D4", Z: "#A6D435", "-": "#D335D4"
64+
},
65+
clustal: {
66+
A: "#FFA500", R: "#FF0000", N: "#FFFFFF", D: "#FF0000", C: "#008000",
67+
Q: "#FFFFFF", E: "#FF0000", G: "#FFA500", H: "#FF0000", I: "#008000",
68+
L: "#008000", K: "#FF0000", M: "#008000", F: "#2555D9", P: "#FFA500",
69+
S: "#FFA500", T: "#FFA500", W: "#2555D9", Y: "#2555D9", V: "#008000",
70+
B: "#FFFFFF", X: "#FFFFFF", Z: "#FFFFFF", "-": "#ffffff"
71+
},
72+
clustal2: {
73+
A: "#80A0F0", R: "#F01505", N: "#00FF00", D: "#C048C0", C: "#F08080",
74+
Q: "#00FF00", E: "#C048C0", G: "#F09048", H: "#15A4A4", I: "#80A0F0",
75+
L: "#80A0F0", K: "#F01505", M: "#80A0F0", F: "#80A0F0", P: "#FFD700",
76+
S: "#00FF00", T: "#00FF00", W: "#80A0F0", Y: "#15A4A4", V: "#80A0F0",
77+
B: "#FFFFFF", X: "#FFFFFF", Z: "#FFFFFF", "-": "#ffffff",
78+
},
79+
buried: {
80+
A: "#00A35C", R: "#00FC03", N: "#00EB14", D: "#00EB14", C: "#2555D9",
81+
Q: "#00F10E", E: "#00F10E", G: "#009D62", H: "#00D52A", I: "#0054AB",
82+
L: "#007B84", K: "#00FF00", M: "#009768", F: "#008778", P: "#00E01F",
83+
S: "#00D52A", T: "#00DB24", W: "#00A857", Y: "#00E619", V: "#005FA0",
84+
B: "#00EB14", X: "#00B649", Z: "#00F10E", "-": "#ffffff",
85+
},
86+
cinema: {
87+
A: "#BBBBBB", R: "#00FFFF", N: "#008000", D: "#FF0000", C: "#FFD700",
88+
Q: "#008000", E: "#FF0000", G: "#A52A2A", H: "#00FFFF", I: "#BBBBBB",
89+
L: "#BBBBBB", K: "#00FFFF", M: "#BBBBBB", F: "#FF00FF", P: "#A52A2A",
90+
S: "#008000", T: "#008000", W: "#FF00FF", Y: "#FF00FF", V: "#BBBBBB",
91+
B: "#808080", X: "#808080", Z: "#808080", "-": "#ffffff",
92+
},
93+
clustal: {
94+
A: "#FFA500", R: "#FF0000", N: "#FFFFFF", D: "#FF0000", C: "#008000",
95+
Q: "#FFFFFF", E: "#FF0000", G: "#FFA500", H: "#FF0000", I: "#008000",
96+
L: "#008000", K: "#FF0000", M: "#008000", F: "#2555D9", P: "#FFA500",
97+
S: "#FFA500", T: "#FFA500", W: "#2555D9", Y: "#2555D9", V: "#008000",
98+
B: "#FFFFFF", X: "#FFFFFF", Z: "#FFFFFF", "-": "#ffffff",
99+
},
100+
helix: {
101+
A: "#E718E7", R: "#6F906F", N: "#1BE41B", D: "#778877", C: "#23DC23",
102+
Q: "#926D92", E: "#FF00FF", G: "#00FF00", H: "#758A75", I: "#8A758A",
103+
L: "#AE51AE", K: "#A05FA0", M: "#EF10EF", F: "#986798", P: "#00FF00",
104+
S: "#36C936", T: "#47B847", W: "#8A758A", Y: "#21DE21", V: "#857A85",
105+
B: "#49B649", X: "#758A75", Z: "#C936C9", "-": "#ffffff",
106+
},
107+
hydrophobicity: {
108+
A: "#AD0052", R: "#2555D9", N: "#0C00F3", D: "#0C00F3", C: "#C2003D",
109+
Q: "#0C00F3", E: "#0C00F3", G: "#6A0095", H: "#1500EA", I: "#FF0000",
110+
L: "#EA0015", K: "#2555D9", M: "#B0004F", F: "#CB0034", P: "#4600B9",
111+
S: "#5E00A1", T: "#61009E", W: "#5B00A4", Y: "#4F00B0", V: "#F60009",
112+
B: "#0C00F3", X: "#680097", Z: "#0C00F3", "-": "#ffffff",
113+
},
114+
lesk: {
115+
A: "#FFA500", R: "#FF0000", N: "#FF00FF", D: "#FF0000", C: "#008000",
116+
Q: "#FF00FF", E: "#FF0000", G: "#FFA500", H: "#FF00FF", I: "#008000",
117+
L: "#008000", K: "#FF0000", M: "#008000", F: "#008000", P: "#008000",
118+
S: "#FFA500", T: "#FFA500", W: "#008000", Y: "#008000", V: "#008000",
119+
B: "#FFFFFF", X: "#FFFFFF", Z: "#FFFFFF", "-": "#ffffff",
120+
},
121+
mae: {
122+
A: "#77DD88", R: "#FFCC77", N: "#55BB33", D: "#55BB33", C: "#99EE66",
123+
Q: "#55BB33", E: "#55BB33", G: "#77DD88", H: "#5555FF", I: "#66BBFF",
124+
L: "#66BBFF", K: "#FFCC77", M: "#66BBFF", F: "#9999FF", P: "#EEAAAA",
125+
S: "#FF4455", T: "#FF4455", W: "#9999FF", Y: "#9999FF", V: "#66BBFF",
126+
B: "#FFFFFF", X: "#FFFFFF", Z: "#FFFFFF", "-": "#ffffff",
127+
},
128+
strand: {
129+
A: "#5858A7", R: "#6B6B94", N: "#64649B", D: "#2121DE", C: "#9D9D62",
130+
Q: "#8C8C73", E: "#2555D9", G: "#4949B6", H: "#60609F", I: "#ECEC13",
131+
L: "#B2B24D", K: "#4747B8", M: "#82827D", F: "#C2C23D", P: "#2323DC",
132+
S: "#4949B6", T: "#9D9D62", W: "#C0C03F", Y: "#D3D32C", V: "#FFD700",
133+
B: "#4343BC", X: "#797986", Z: "#4747B8", "-": "#ffffff",
134+
},
135+
taylor: {
136+
A: "#CCFF00", R: "#2555d9", N: "#CC00FF", D: "#FF0000", C: "#FFD700",
137+
Q: "#FF00CC", E: "#FF0066", G: "#FF9900", H: "#7d98e8", I: "#66FF00",
138+
L: "#33FF00", K: "#6600FF", M: "#00FF00", F: "#00FF66", P: "#FFCC00",
139+
S: "#FF3300", T: "#FF6600", W: "#00CCFF", Y: "#00FFCC", V: "#99FF00",
140+
B: "#FFFFFF", X: "#FFFFFF", Z: "#FFFFFF", "-": "#ffffff",
141+
},
142+
turn: {
143+
A: "#2CD3D3", R: "#708F8F", N: "#FF0000", D: "#E81717", C: "#A85757",
144+
Q: "#3FC0C0", E: "#778888", G: "#FF0000", H: "#708F8F", I: "#00FFFF",
145+
L: "#1CE3E3", K: "#7E8181", M: "#1EE1E1", F: "#1EE1E1", P: "#F60909",
146+
S: "#E11E1E", T: "#738C8C", W: "#738C8C", Y: "#9D6262", V: "#07F8F8",
147+
B: "#F30C0C", X: "#7C8383", Z: "#5BA4A4", "-": "#ffffff",
148+
},
149+
zappo: {
150+
A: "#FFAFAF", R: "#6464FF", N: "#00FF00", D: "#FF0000", C: "#FFD700",
151+
Q: "#00FF00", E: "#FF0000", G: "#FF00FF", H: "#6464FF", I: "#FFAFAF",
152+
L: "#FFAFAF", K: "#6464FF", M: "#FFAFAF", F: "#FFC800", P: "#FF00FF",
153+
S: "#00FF00", T: "#00FF00", W: "#FFC800", Y: "#FFC800", V: "#FFAFAF",
154+
B: "#FFFFFF", X: "#FFFFFF", Z: "#FFFFFF", "-": "#ffffff",
155+
},
156+
};
108157
109158
export default {
110159
components: { SequenceLogo, SequenceLogo },
@@ -297,7 +346,7 @@ export default {
297346
result.seqStart++;
298347
}
299348
if (makeGradients) {
300-
result.css = this.generateCSSGradient(start, end, result.ss);
349+
result.css = this.generateCSSGradient(start, end, result.aa, result.ss);
301350
}
302351
return result;
303352
},
@@ -308,22 +357,26 @@ export default {
308357
let gaps = sequence.split('-').length - 1;
309358
return start + this.lineLen - gaps;
310359
},
311-
generateCSSGradient(start, end, sequence) {
360+
generateCSSGradient(start, end, aaSequence, ssSequence) {
312361
if (!this.scores) {
313362
return null;
314363
}
315364
let colors = [];
316-
if (this.colorScheme === '3di') {
317-
for (const residue of sequence) {
318-
colors.push(colors3di[residue]);
365+
const palette = colorsAaByPalette[this.colorScheme];
366+
if (palette) {
367+
const paletteSequence = (this.colorScheme === "3di" && ssSequence) ? ssSequence : aaSequence;
368+
const fallbackColor = palette.X || "#ffffff";
369+
for (const residue of paletteSequence) {
370+
const key = residue ? residue.toUpperCase() : residue;
371+
colors.push(palette[key] || fallbackColor);
319372
}
320373
} else {
321374
colors = this.scores
322375
.slice(start, end)
323376
.map(score => this.percentageToColor(parseFloat(score)));
324377
}
325-
for (let i = 0; i < sequence.length; i++) {
326-
if (sequence[i] === '-') {
378+
for (let i = 0; i < aaSequence.length; i++) {
379+
if (aaSequence[i] === '-') {
327380
colors[i] = this.$vuetify.theme.dark ? "rgba(100, 100, 100, 0.4)" : "rgba(0, 0, 0, 0)";
328381
}
329382
}
@@ -630,4 +683,4 @@ export default {
630683
.theme--dark .column-box.active-column::before {
631684
opacity: 1;
632685
}
633-
</style>
686+
</style>

0 commit comments

Comments
 (0)