1. Sequence-Viewer

SequenceViewer is a package to use in order to:

1. highlight repeated units in tandem reapet proteins
2. align sequences

Both type of representations allow to add indexes and symbols to add information about the sequence.

1.1 Sequence-Viewer color by region

Demo

Input

          seq.options = {
          
            
            colorBy: 'region',
          
            /** Rows of indexes and residues */
            rows: [
              {type: 'chars', chars: this.chars2},
          
              {type: 'chars', chars: { 1 : '★', 2: '★', 100 : '★', 102: '★'}},
          
              {type: 'chars', chars: {  2: 'alp', 3: 'alp', 4: 'alp', 5 : 'alp',
                  6: 'alp', 7: 'alp', 8 : 'alp', 9: 'alp', 30: 'bet;', 31: 'bet;',
                  32: 'bet;', 101: 'alp', 102: 'alp', 103 : 'alp', 104: 'alp', 106: 'bet',
                  150: 'alp', 152: 'alp', 153 : 'alp', 154: 'alp'
              }},
         
          
              {type: 'sequence', chars: this.chars}
                  ],
          
            /** Number of alternating index to show */
            setIndex: 7,
          
            /** Number of residues per line */
            chunkSize: 50,
          
            /** Color choice for units */
            /** Customizable, opposite or adjacent */
            colorChoice: 'adjacent',
          
            /** Customizable: Es. colors: ['hsl(60,100%,60%,0.4)', 'hsl(80,100%,60%,0.4)'] */
            colors: null,
          
          
            /** Color choice for insertions */
            colorIns: 'hsl(0,22%,16%, 0.5)',
          
            /** Color choice for Alignment */
            paletteAa: null,
          
            /** Info about start end of the units and insertions */
            unitsStartEnd: this.unitsStartEnd,
            insStartEnd: this.insStartEnd,
          
            /** Number of units/insertions */
            unitsNum: this.unitsNum,
            insNum: this.insNum
          };

Usage

• Choose region mode.
• In sequence viewer each row is intended as a row of characters. Sequence and indexes are differentiated by type (‘sequence’, ‘chars’). In region mode, the input must be a single sequence, instead there can be either none or countless lines of indexes. Indexes can be both, numbers and symbols, so that also secondary structure or post-transcriptional modification can be indicated.
• Decide how many alternating indexes to show. If setIndex is set to null, all indexes will be showed
• Decide how many residues per line to show. If chunkSize is set to null, residues will be showed on a single line.
• It is possible to set the colorChoice in 3 different modes. adjacent: color units with adjacent colors of the color spectrum, opposite: color units with opposite colors of the color spectrum, customizable: allows the user to choose his own colors for unit. In the case, besides setting the colorChoice to customizable, colors has to be set with the specific colors option. It is necessary to insert a color for each unit.
• colorIns is the color choice for insertions.
• Other options (unitsNum, insNum ...) are information to provide, which are useful to color units and insertions. If the input contains more than one sequences, an error message will be displayed:

Errors handling

Region mode is meant for showing one sequence and highlight its units. If the input contains more than one sequences, an error message will be displayed:

‘Sorry, in region mode you can input only one sequence.’

1.2 Sequence-Viewer color by alignment

Demo

Input

          seq.options = {
          
          
            colorBy: 'alignment',
          
            /** Rows of indexes and residues */
            rows: [
              {type: 'chars', chars: this.chars2},
          
              {type: 'chars', chars: { 1 : '★', 2: '★', 100 : '★', 102: '★'}},
          
              {type: 'chars', chars: {  2: 'α', 3: 'α', 4: 'α', 5 : 'α', 6: 'α', 7: 'α', 8 : 'α', 9: 'α', 33: 'β', 302: 'β', 101: 'α', 102: 'α', 103 : 'α', 104: 'α', 105: 'β', 106: 'β', 150: 'α', 152: 'α', 153 : 'α', 154: 'α', 155: 'β', 156: 'β'}},
          
              {type: 'chars', chars: { 1 : '1', 2: '2', 3: '3', 4: '4', 35 : '35',  36: '36', 37 : '37', 6: '6', 7: '7', 8 : '8', 9: '9', 10: '10', 11: '11', 40 : '40',  177: '177', 178 : '178', 179: '179', 180: '180', 181: '181'}},
          
              {type: 'sequence', chars: this.chars},
              {type: 'sequence', chars: this.chars},
              {type: 'sequence', chars: this.chars},
              {type: 'sequence', chars: this.chars},
              {type: 'sequence', chars: this.chars},
              {type: 'sequence', chars: this.chars}
                  ],
          
            /** Number of alternating index to show */
            setIndex: 7,
            /** Number of residues per line */
            chunkSize: 50,
           
            /** Color choice for units */
            colorChoice: null,
            /** customizable option for units */
            colors: null,
            /** Color choice for insertions */
            colorIns: null,
          
            /** Color choice for Alignment */
            paletteAa: {
              A: 'rgba(204, 255, 0, 0.4)',
              R: 'rgba(0, 0, 255, 0.4)',
              N: 'rgba(204, 0, 255, 0.4)',
              D: 'rgba(255, 0, 0, 0.4)',
              C: 'rgba(255, 255, 0, 0.4)',
              Q: 'rgba(255, 0, 204, 0.4)',
              E: 'rgba(255, 0, 102, 0.4)',
              G: 'rgba(255, 153, 0, 0.4)',
              H: 'rgba(0, 102, 255, 0.4)',
              I: 'rgba(102, 35, 0, 0.4)',
              L: 'rgba(51, 255, 0, 0.4)',
              K: 'rgba(102, 0, 255, 0.4)',
              M: 'rgba(0, 65, 0, 0.4)',
              F: 'rgba(0, 255, 102, 0.4)',
              P: 'rgba(255, 204, 0, 0.4)',
              S: 'rgba(255, 51, 0, 0.4)',
              T: 'rgba(255, 102, 0, 0.4)',
              W: 'rgba(0, 204, 255, 0.4)',
              Y: 'rgba(0, 255, 204, 0.4)',
              V: 'rgba(153, 255, 0, 0.4)',
              B: 'rgba(255, 255, 255, 0.4)',
              X: 'rgba(125, 100, 255, 0.4)',
              Z: 'rgba(255, 125, 255, 0.4)',
            },
          
            /** Info about start end of the units and insertions */
            unitsStartEnd: this.unitsStartEnd,
            insStartEnd: this.insStartEnd,
          
            /** Number of units/insertions */
            unitsNum: this.unitsNum,
            insNum: this.insNum
          };

Usage

• Choose alignment mode.
• In sequence viewer each row is intended as a row of characters. Sequence and indexes are differentiated by type. In alignment mode, the input can be either none or countless lines of indexes and either one or countless lines of sequences.
• Other options do not differ from the region mode (setIndex, insNum..).
• Colors options (colorChoice, colorIns, chunkSize) are not necessary in this mode and can be set to null.
• paletteAa gives the possibility to set a color for each residue.

Errors handling

Alignment mode is meant for a visual representations of sequences, in order to show differences and similarities between them. If the input contains sequences of different length, an error message will be displayed:

‘Sorry, sequences must have the same length.’

Options: a summary

• colorBy (string): ‘region’, ‘alignment’.
• rows (array of objects): An array of objects, each containing:
      type (string): ‘chars’, ‘sequence’.
      chars (object):
          position (integer): position of the sequence where to display the associated symbol. E.g.: 0.
         symbol (string): symbol or index to display. E.g. 0. To display a symbol, a unicode char can be used.
• setIndex (integer): number of alternating indexes to show.
• chunkSize (integer): number of residues per line.
• colorChoice (string): ‘adjacent’, ‘opposite’, ‘customizable’. Choice of color for units.
• colors (array of string): this option allows to select customizable colors for the units and must be filled if colorChoice is set to ‘customizable’, otherwise it can be set to null. Colors must be in hsl format. E.g. ['hsl(60,100%,60%,0.4)', 'hsl(80,100%,60%,0.4)', ...].
• colorIns (string): color for insertions. E.g.: 'hsl(60,100%,60%,0.4)'.
• paletteAa (object): residue (string): letter representing the residue (single letter amino acid code). color (string): hsl color. E.g.: 'hsl(60,100%,60%,0.4)'.
• unitsNum (integer): total number of units.
• insNum (integer): total number of insertions.
• unitsStartEnd (array of integer): initial and final position of each unit. E.g. [70, 90, 100, 110, ...] where the first unit has 70 as initial position and 90 as final position, the second unit has 100 as initial position and 110 as final etc.
• insStartEnd (array of string): initial and final position of each insertion.

Installation

1. Include the library into the project using npn
2. Update app.module.ts

         import { SequenceViewerComponent } from './sequence-viewer/sequence-viewer.component';
          
          
          @NgModule({
            declarations: [

              SequenceViewerComponent

            ],
          
            ...
          
          })
          
          export class AppModule { }

It is now possible to use the Sequence-Viewer component in app.component.ts, setting the options.

Then, in template file app.component.html add the following:

         <lib-sqv *ngIf="this.prot" [op]="this.options"></lib-sqv>