Merge branch 'main' of https://github.com/BioComputingUP/ngx-biocomp-up

angular.json

@@ -217,12 +217,12 @@
           "configurations": {
             "production": {
               "tsConfig": "projects/ngx-sequence-viewer/tsconfig.lib.prod.json"
-            },
+            }, 
             "development": {
               "tsConfig": "projects/ngx-sequence-viewer/tsconfig.lib.json"
             }
           },
-          "defaultConfiguration": "production"
+          "defaultConfiguration": "development"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",

projects/ngx-sequence-viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-sequence-viewer",
-  "version": "0.0.6",
+  "version": "0.0.9",
   "peerDependencies": {
     "@angular/common": "^17.3.0",
     "@angular/core": "^17.3.0"

projects/ngx-sequence-viewer/src/lib/ngx-sequence-viewer.component.html

@@ -9,7 +9,7 @@
     <!-- First label is empty (index) -->
     <div class="label">Index</div>
     <!-- Case there is more than one sequence -->
-    @if(sequences.length > 1) {
+    @if(sequences!.length > 1) {
       <!-- Then, show consensus -->
       <div class="label">Consensus</div>
     }
@@ -30,7 +30,7 @@
             <!-- Add index (and placeholder) -->
             <ng-container *ngTemplateOutlet="indexCellTemplate; context: { j: chunk.start + j }"></ng-container>
             <!-- Case there is more than one sequence -->
-            @if(sequences.length > 1) {
+            @if(sequences!.length > 1) {
               <!-- Then, show consensus -->
               <ng-container *ngTemplateOutlet="consensusCellTemplate; context: { j: chunk.start + j }"></ng-container>
             }
@@ -81,7 +81,7 @@
       [style.color]="style['color']"
       (mouseenter)="onMouseEnter($event, indexService.keys[j])"
       (mousedown)="onMouseDown($event, indexService.keys[j])">
-      {{ value ? value : sequences[i][j] }}
+      {{ value ? value : sequences![i][j] }}
     </div>
   }
 }

projects/ngx-sequence-viewer/src/lib/ngx-sequence-viewer.component.ts

@@ -7,7 +7,7 @@ import { CommonModule } from '@angular/common';
 import { ColorMap, ZAPPO } from './colors';
 import { SelectionService } from './services/selection.service';
 import { IndexService } from './services/index.service';
-import { parseFasta } from './utils';
+import { FASTA } from './utils';
 
 // export interface Locus<T> {
 //   // Define start position (for both point and range loci)
@@ -133,11 +133,12 @@ export class NgxSequenceViewerComponent implements OnChanges {
   @Input()
   public sequence?: string;
 
-  public sequences!: string[];
+  @Input()
+  public sequences?: string[];
 
   public get first(): string {
     // Just return first sequence
-    return this.sequences[0];
+    return (this.sequences as string[])[0];
   }
 
   public get length(): number {
@@ -178,7 +179,7 @@ export class NgxSequenceViewerComponent implements OnChanges {
       const styles: Record<string, Array<{ 'background-color'?: string, 'border-color'?: string, 'color'?: string }>> = {};
       // Define sequences: index, consensus, input sequences
       const consensus = this.consensus.map(([aa]) => aa).join('');
-      const sequences = [consensus, ...this.sequences];
+      const sequences = [consensus, ...this.sequences || []];
       // Loop through each row (sequence)
       for (let i = 0; i < sequences.length; i++) {
         // Update index
@@ -328,10 +329,18 @@ export class NgxSequenceViewerComponent implements OnChanges {
    * If expectations are not met, then an error is thrown.
    */
   public setSequences(): void {
+    // Case sequences are provided
+    if (this.sequences && this.labels) {
+      // Check whether the size of sequences and labels match
+      if (this.sequences.length !== this.labels.length) {
+        // Otherwise, throw an error
+        throw new Error('Number of sequences does not match number of labels');
+      }
+    }
     // Case fasta file is provided
-    if (this.fasta) {
+    else if (this.fasta) {
       // Attempt to parse fasta file
-      const parsed = parseFasta(this.fasta);
+      const parsed = FASTA.parse(this.fasta);
       // Set sequences and labels
       this.sequences = parsed.map((entry) => entry.sequence);
       this.labels = this.labels || parsed.map((entry) => entry.label);
@@ -401,14 +410,16 @@ export class NgxSequenceViewerComponent implements OnChanges {
   public setLogo(): void {
     // Initialize logo
     this.logo = [];
+    // define sequences
+    const sequences = this.sequences || [];
     // Define number of sequences
-    const count = this.sequences.length;
+    const count = sequences.length;
     // Loop through each position in the alignment
     for (let i = 0; i < this.length; i++) {
       // Define a position in the logo
       let position: { [aa: string]: number } = {};
       // Loop through each sequence in the alignment
-      for (const sequence of this.sequences) {
+      for (const sequence of sequences) {
         // Get amino acid in current position
         const aa = sequence[i];
         // Update count of amino acid in position

projects/ngx-sequence-viewer/src/lib/utils.ts

@@ -1,9 +1,39 @@
-/** Parse fasta file
-* 
-* @param {string} text - Input text, in fasta format.
-* @returns {{ sequence: string, label: string }[]} - Parsed sequences and labels.
-*/
-export function parseFasta(text: string): { sequence: string, label: string }[] {
+export abstract class Parser<T> {
+
+  protected abstract parseText(text: string): T;
+
+  protected parseFile(file: Blob): Promise<T> {
+    // Cast input file to string
+    const reader = new FileReader();
+    // Read file as text
+    reader.readAsText(file, 'utf-8');
+    // Return promise
+    return new Promise((resolve, reject) => {
+      // Resolve promise with parsed text
+      reader.onload = () => resolve(this.parseText('' + reader.result));
+      // Reject promise with error
+      reader.onerror = error => reject(error);
+    });
+
+  }
+
+  public parse(input: string): T;
+  public parse(input: Blob): Promise<T>;
+  public parse(input: Blob | string): T | Promise<T> {
+    // Case input is not a string
+    if (typeof input !== 'string') {
+      // Then parse file
+      return this.parseFile(input);
+    }
+    // Otherwise, just parse text
+    return this.parseText('' + input);
+  }
+}
+
+export type Sequence = { sequence: string, label: string };
+
+class FastaParser extends Parser<Sequence[]> {
+  protected override parseText(text: string): Sequence[] {
     // Split line by newline character
     const lines = text.split(/[\n\r]+/);
     // Define output
@@ -28,4 +58,8 @@ export function parseFasta(text: string): { sequence: string, label: string }[]
     }
     // Return parsed sequences and labels
     return parsed;
-   }
+  }
+}
+
+// Export single instance of fasta parser
+export const FASTA = new FastaParser();

projects/ngx-sequence-viewer/tsconfig.lib.prod.json

@@ -2,7 +2,8 @@
 {
   "extends": "./tsconfig.lib.json",
   "compilerOptions": {
-    "declarationMap": false
+    "declarationMap": false,
+
   },
   "angularCompilerOptions": {
     "compilationMode": "partial"