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>