Skip to content
Snippets Groups Projects
Commit 77e6cb19 authored by Michal Petrovič's avatar Michal Petrovič
Browse files

Merge branch '21-pripomienky08022024' into 'main'

Resolve "pripomienky08022024"

Closes #21

See merge request !14
parents 01992710 2e209a88
Branches
1 merge request!14Resolve "pripomienky08022024"
Pipeline #180838 passed with stage
in 30 seconds
......@@ -95,6 +95,9 @@
<b-dropdown-item :to="{ name: 'help.zdna' }" v-if="config.analysis.zdna">
Z-DNA tracker
</b-dropdown-item>
<b-dropdown-item :to="{ name: 'help.cpg' }" v-if="config.analysis.cpg">
CpX tracker
</b-dropdown-item>
<b-dropdown-item :to="{ name: 'help.faq' }">
FAQ
</b-dropdown-item>
......
<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 = {
'GC': 'gc', // Definícia štýlu pre sekvenciu "GC"
'default': 'other', // Predvolený štýl pre ostatné nukleotidy
}
let ret = []
let sequence = this.sequence.toUpperCase()
for (var i = 0; i < sequence.length; i++) {
if (sequence.substring(i, i + 2) === "GC") {
ret.push({
styleClass: styleClass['GC'] + (this.mask && this.mask[i] === 'W' ? ' mutation' : ''),
nuclide: "G",
})
ret.push({
styleClass: styleClass['GC'] + (this.mask && this.mask[i + 1] === 'W' ? ' mutation' : ''),
nuclide: "C",
})
i++; // Preskočíme ďalší znak, keďže sme už zvýraznili "GC"
} else {
ret.push({
styleClass: styleClass['default'] + (this.mask && this.mask[i] === 'W' ? ' mutation' : ''),
nuclide: sequence[i],
})
}
}
return ret
},
},
}
</script>
<style scoped>
.gc {
/* Definujte štýly pre zvýraznenie "GC" */
color: #dd0000; /* Príklad: zelená farba pre "GC" */
}
.other {
color: #0000dd;
}
.highlight {
display: block;
word-wrap: break-word;
white-space: normal;
padding: 0;
margin: 0;
line-height: 1;
font-size: 1.3rem;
}
</style>
\ No newline at end of file
<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>
......@@ -143,7 +143,7 @@
</td>
<td class="sequence text-monospace">
{{ cpg.gcPerc | number(3) }}
{{ cpg.gcPerc * 100 | number(3) }} %
</td>
<td class="sequence text-monospace">
{{ cpg.observedToExpectedCpG | number(3) }}
......
<template>
<div class="container">
<h1>CpX Islands Analysis Tool Help</h1>
<p>This tool is a prototype implementation of an algorithm to find CpX islands within DNA sequences, where "X" can be any nucleotide (G, A, T, or C). The tool is based on <a href="https://www.pnas.org/doi/10.1073/pnas.052410099">Takai and Jones’ algorithm</a> and the prototype implementation, which can be found here: <a href="https://github.com/antroit47/cpg_islands">https://github.com/antroit47/cpg_islands</a></p>
<h2>What are CpX Islands?</h2>
<p>CpX islands are regions with a high frequency of CpX dinucleotides in genomic DNA, where "X" represents any nucleotide. These regions can be associated with gene promoters and are crucial in the regulation of gene expression.</p>
<h2>How to Use the Tool</h2>
<p>To analyze your DNA sequences for CpX islands, follow these steps:</p>
<ol>
<li>Adjust the analysis parameters as needed (see below for details).</li>
<li>Select your DNA sequence(s) in the provided field.</li>
<li>Review the output results displayed on the screen.</li>
</ol>
<h2>Input Parameters</h2>
<p>The tool allows you to customize the analysis through various parameters:</p>
<ul>
<li><strong>Minimal Window Size:</strong> The smallest bp size of the window that can be considered an island (default 200).</li>
<li><strong>Minimal CX Percentage:</strong> The minimum required nucleotide content of C and G (default 50%), where "X" is the nucleotide of interest (default 0.6).</li>
<li><strong>Minimal Observed/Expected CpX:</strong> The minimum required value of observed to expected CpX dinucleotides, where "X" is the nucleotide of interest (default 0.6).</li>
<li><strong>Minimal Island Merge Gap:</strong> The smallest bp gap between two islands which will cause them to merge into one (default 100).</li>
<li><strong>First Nucleotide:</strong> The first nucleotide of the island (always "C").</li>
<li><strong>Second Nucleotide:</strong> The second nucleotide of the island, which can be "G", "A", "T", or "C" (default "G").</li>
</ul>
<h2>Output Parameters</h2>
<p>Upon completion of the analysis, the CpX islands tracker presents the results in an intuitive format, including:</p>
<ul>
<li><strong>Heatmap</strong>: The heatmap shows the amount of hits in precalculated segments.</li>
<li><strong>Analysis Settings</strong></li>
<li><strong>Analysis Results</strong>:
<ul>
<li>Islands found</li>
<li>Frequency</li>
</ul>
</li>
<li><strong>Export Options</strong>: Results can be exported in CSV and Bedgraph formats for further analysis or record-keeping.</li>
<li><strong>Sequence Info</strong></li>
</ul>
<p>The output of the tool includes detailed information about the identified CpX islands:</p>
<ul>
<li><strong>Island Start and End Positions:</strong> The genomic coordinates of each identified CpX island.</li>
<li><strong>Sequence</strong>: The actual nucleotide sequence of the CpX island.</li>
<li><strong>CX Percentage:</strong> The percentage of selected base pair within the island.</li>
<li><strong>Observed/Expected CpX Ratio:</strong> The ratio of observed to expected CpX dinucleotides in the island. Calculated as <math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>expCpg</mi>
<mo>=</mo>
<mfrac>
<msup>
<mrow>
<mo>(</mo>
<mfrac>
<mi>C_Count + X_Count</mi>
<mn>2</mn>
</mfrac>
<mo>)</mo>
</mrow>
<mn>2</mn>
</msup>
<mi>windowSize</mi>
</mfrac>
<mo>;</mo>
</math>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>obsExp</mi>
<mo>=</mo>
<mfrac>
<mi>CpX_Count</mi>
<mi>expCpg</mi>
</mfrac>
<mo>;</mo>
</math>
</li>
<li><strong>Island Length:</strong> The total base pair length of the CpX island.</li>
</ul>
</div>
</template>
<script>
export default {}
</script>
<style scoped>
pre {
font-size: 1.2rem;
display: inline;
}
</style>
\ No newline at end of file
......@@ -48,6 +48,7 @@
<li><strong>Z-DNA GC Richness</strong>: The GC content within the Z-DNA region, indicative of its stability and propensity for Z-DNA formation.</li>
<li><strong>Z-DNA GT Richness</strong>: The GT content within the Z-DNA region, which can also influence Z-DNA formation.</li>
<li><strong>Z-DNA Score</strong>: The overall score calculated based on the specific base pairings and their propensities for Z-DNA formation.</li>
<li><strong>Z-DNA score/10bp</strong>: The overall score normalized to 10 bp length.</li>
</ul>
</div>
</template>
......
......@@ -8,7 +8,7 @@
type="number"
class="form-control"
step="1"
min="10"
min="6"
max="100"
v-model="minSequenceSize"
@input="updateValue($event.target.value, 'minSequenceSize')"
......@@ -25,8 +25,7 @@
type="number"
class="form-control"
step="0.1"
min="0.1"
max="4"
min="7.5"
v-model="threshold"
@input="updateValue($event.target.value, 'threshold')"
/>
......@@ -60,7 +59,7 @@ export default {
},
threshold: {
type: [Number, String],
default: 0.0
default: 7.5
}
},
created() {
......@@ -71,12 +70,12 @@ export default {
minSequenceSize: {
required,
numeric,
minValue: minValue(10)
minValue: minValue(6)
},
threshold: {
required,
decimal,
minValue: minValue(0)
minValue: minValue(7.5)
},
},
......
......@@ -82,6 +82,9 @@
<th class="text-center">
<sort-toggle @sort="sortSequences" crit="score" :current="currentSort">Z-DNA score</sort-toggle>
</th>
<th class="text-center">
<sort-toggle @sort="sortSequences" crit="score10bp" :current="currentSort">Z-DNA score/10bp</sort-toggle>
</th>
</tr>
<template v-for="zdna in zdnaList">
<tr>
......@@ -99,6 +102,9 @@
<td class="text-right">
{{ zdna.score | number }}
</td>
<td class="text-right">
{{ zdna.score10bp | number }}
</td>
</tr>
</template>
</tbody>
......@@ -122,7 +128,7 @@ import SequenceStats from '@/components/sequence/helpers/sequence-stats'
import Helpers from '@/helpers'
import Heatchart from '@/components/core/visualisation/heatchart'
import Heatmap from '@/components/core/visualisation/heatmap'
import Highlight from '@/components/core/visualisation/highlight'
import HighlightZDNA from '@/components/core/visualisation/highlight-zdna'
/**
* list of results for sequence analysis
......@@ -246,7 +252,7 @@ export default {
},
},
components: {
highlight: Highlight,
highlight: HighlightZDNA,
'sort-toggle': SortToggle,
pagination: Pagination,
heatmap: Heatmap,
......
......@@ -16,6 +16,7 @@ import HelpStatus from './components/help/status'
import HelpQuadruplex from './components/help/help-quadruplex'
import HelpRloopr from './components/help/help-rloopr'
import HelpZdna from './components/help/help-zdna'
import HelpCpg from './components/help/help-cpg'
import AnalyseCruciform from './components/cruciform/cruciform'
import SequenceTools from './components/sequence/sequence'
import AnalyseQuadruplex from './components/quadruplex/quadruplex'
......@@ -248,6 +249,12 @@ var router = new Router({
component: HelpZdna,
meta: {},
},
{
name: 'help.cpg',
path: '/help/cpg',
component: HelpCpg,
meta: {},
},
{
name: 'help.about',
path: '/help/about',
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment