Updates sequence viewer to take into account dnon-numeric indices. Up…

…dates single sequence example
BioComputingUP · Sep 12, 2024 · 8475e6d · 8475e6d
1 parent 3292c9c
commit 8475e6d
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 71 deletions.
diff --git a/projects/demo-showcase/src/app/app.component.html b/projects/demo-showcase/src/app/app.component.html
@@ -4,8 +4,8 @@
     <div class="container-fluid">
       <!-- Main icon -->
       <a class="navbar-brand d-flex flex-row align-items-center gap-3" href="#">
-        <img src="assets/ngx-biocomp-up-white.png" alt="ngx-biocomp-up" height="38">
-        <h1 class="h2 text-white m-0">ngx-biocomp-up</h1>
+        <img src="assets/ngx-biocomp-up.png" alt="ngx-biocomp-up" height="38">
+        <h1 class="h2 text-white m-0">ngx-mol-viewers</h1>
       </a>
       <!-- Right side -->
       <ul class="navbar-nav">

diff --git a/projects/demo-showcase/src/app/page-sequence-viewer/single-sequence-viewer.component.html b/projects/demo-showcase/src/app/page-sequence-viewer/single-sequence-viewer.component.html
@@ -4,7 +4,7 @@
   <h2>Single sequence viewer</h2>
   <!-- Show single sequence viewer -->
   <div class="mb-3">
-    <ngx-sequence-viewer [sequence]="sequence" [index]="index" [settings]="settings$ | async"></ngx-sequence-viewer>
+    <ngx-sequence-viewer [sequence]="sequence" [index]="index" [loci]="loci" [settings]="settings$ | async"></ngx-sequence-viewer>
   </div>
   <!-- Explain example -->
   <div class="mb-3">

diff --git a/projects/demo-showcase/src/app/page-sequence-viewer/single-sequence-viewer.component.ts b/projects/demo-showcase/src/app/page-sequence-viewer/single-sequence-viewer.component.ts
@@ -40,6 +40,12 @@ export class SingleSequenceViewerComponent {
       return index;
     });
 
+    // Define loci
+    readonly loci = [
+      { start: '-1', end: '10E', 'background-color': '#648FFF', text: 'Region 1' },
+      { start: '-23', end: '36A', 'background-color': '#DC267F', text: 'Region 2' },
+    ];
+
     // Define the sequence viewer configuration
     public settings$: Observable<Partial<Settings>>;
 

diff --git a/projects/demo-showcase/src/assets/ngx-biocomp-up.png b/projects/demo-showcase/src/assets/ngx-biocomp-up.png
diff --git a/projects/demo-showcase/src/assets/ngx-biocomp-up.svg b/projects/demo-showcase/src/assets/ngx-biocomp-up.svg
diff --git a/projects/demo-showcase/src/styles/_background.scss b/projects/demo-showcase/src/styles/_background.scss
@@ -1,9 +1,9 @@
 // $gradient: linear-gradient(45deg, #648FFF, #DC267F);
 
 .navbar {
-  background: #648FFF;
+  background: linear-gradient(45deg, #648FFF, #DC267F);
 }
 
 .bg-primary {
-  background: #648FFF;
+  background: linear-gradient(45deg, #648FFF, #DC267F);
 }
diff --git a/projects/ngx-sequence-viewer/package.json b/projects/ngx-sequence-viewer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-sequence-viewer",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "peerDependencies": {
     "@angular/common": "^17.3.0",
     "@angular/core": "^17.3.0"

diff --git a/projects/ngx-sequence-viewer/src/lib/ngx-sequence-viewer.component.ts b/projects/ngx-sequence-viewer/src/lib/ngx-sequence-viewer.component.ts
@@ -239,6 +239,7 @@ export class NgxSequenceViewerComponent implements OnChanges {
       for (let j = 0; j < this.length; j++) {
         // Initialize background color
         let backgroundColor = this.settings['background-color'];
+        // Define text color
         const textColor = this.settings['text-color'];
         // Case residue is within locus
         if (j in loci) {
@@ -472,7 +473,7 @@ export class NgxSequenceViewerComponent implements OnChanges {
       // Loop through each position in locus
       for (let i = start; i <= end; i++) {
         // Get current index as string
-        const index = this.indexService.keys[i];
+        const index = this.indexService.values[i];
         // Update color map
         cmap[index] = locus;
       }