Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<template>
<div class="highlight">
<span v-for="part of sequenceHighlight" :class="part.styleClass">{{ part.nuclide }}</span>
</div>
</template>
<script>
export default {
props: ['sequence', 'mask'],
data() {
return {}
},
computed: {
sequenceHighlight() {
const styleClass = {
'0': 'other',
'1': 'len1 Gs',
'2': 'len2 Gs',
'3': 'len3 Gs',
'4': 'len4 Gs',
'5': 'len1 Cs',
'6': 'len2 Cs',
'7': 'len3 Cs',
'8': 'len4 Cs',
'GC': 'gc-highlight', // Pridanie špeciálneho štýlu pre "GC"
}
let codes = this.sequence
.toUpperCase()
.replace(/[ATU]/g, '0')
.replace(/G+/g, x =>
Math.min(4, x.length)
.toString()
.repeat(x.length)
)
.replace(/C+/g, x => (Math.min(4, x.length) + 4).toString().repeat(x.length))
var ret = []
for (var i = 0; i < this.sequence.length; i++) {
if (this.sequence.substring(i, i + 2).toUpperCase() === "GC") {
// Priradenie špeciálneho štýlu pre "G" v "GC"
ret.push({
styleClass: styleClass['GC'] + (this.mask && this.mask[i] === 'W' ? ' mutation' : ''),
nuclide: 'G',
})
// Priradenie špeciálneho štýlu pre "C" v "GC"
ret.push({
styleClass: styleClass['GC'] + (this.mask && this.mask[i + 1] === 'W' ? ' mutation' : ''),
nuclide: 'C',
})
i++; // Preskočiť ďalší znak, pretože "GC" je už spracované
} else {
var code = codes[i]
ret.push({
styleClass: styleClass[code] + (this.mask && this.mask[i] === 'W' ? ' mutation' : ''),
nuclide: this.sequence[i].toUpperCase(),
})
}
}
return ret
},
},
}
</script>
<style scoped>
.gc-highlight {
background-color: yellow; /* Žlté pozadie pre "GC" */
}
.mutation {
background-color: gold;
padding: 0.1rem;
border: 1px solid darkgoldenrod;
border-radius: 0.2rem;
}
.other {
color: #666666;
}
.len1.Gs {
color: #990000;
}
.len1.Cs {
color: #000099;
}
.len2.Gs {
color: #bb0000;
}
.len2.Cs {
color: #0000bb;
}
.len3.Gs {
color: #dd0000;
}
.len3.Cs {
color: #0000dd;
}
.len4.Gs {
color: #ff0000;
}
.len4.Cs {
color: #0000ff;
}
.highlight {
display: block;
word-wrap: break-word;
white-space: normal;
padding: 0;
margin: 0;
line-height: 1;
font-size: 1.3rem;
}
</style>