Merge branch '21-pripomienky08022024' into 'main'

Resolve "pripomienky08022024"

Closes #21

See merge request !14

src/components/core/app-menu.vue

@@ -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>

src/components/core/visualisation/highlight-zdna.vue

+<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

src/components/core/visualisation/highlight-zdna2.vue

+<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>

src/components/cpg/cpg-results.vue

@@ -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) }}

src/components/help/help-cpg.vue

+<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

src/components/help/help-zdna.vue

@@ -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>

src/components/zdna/zdna-form.vue

@@ -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)
     },
 
   },

src/components/zdna/zdna-results.vue

@@ -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,

src/router.js

@@ -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',