Example SV not working

BioComputingUP · Aug 1, 2024 · 6041f5e · 6041f5e
1 parent 6b9438c
commit 6041f5e
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 57 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
     "@angular/cli": "^17.3.8",
     "@angular/compiler-cli": "^17.3.11",
     "@types/jasmine": "~5.1.4",
-    "@types/node": "^20.14.10",
+    "@types/node": "^20.14.13",
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "6.21.0",

diff --git a/projects/demo-showcase/src/app/page-structure-viewer/page-structure-viewer.component.html b/projects/demo-showcase/src/app/page-structure-viewer/page-structure-viewer.component.html
@@ -1,34 +1,32 @@
 <div class="container placeholder-glow pt-3">
-    <!-- Section: introduction -->
-    <div class="mb-3">
-        <h1>Structure viewer</h1>
-        <p>
-            The <b>ngx-structure-viewer</b> is a Mol* wrapper for Angular. It is a viewer for molecular structures and
-            can be used to visualize and interact with 3D molecular structures. It works out of the box with the latest
-            releases of Angular and automatized the most common features of Mol*.
-        </p>
-    </div>
-    <!-- TODO Remove this -->
-    <div class="row">
-        <!-- Sequence viewer -->
-        <div class="col-6">
-            <!-- Define squared container -->
-            <div class="position-relative overflow-hidden squared rounded">
-                <!-- Define placeholder -->
-                <div class="position-absolute left-0 top-0 w-100 h-100 placeholder"></div>
-                <!-- Define the viewer -->
-                <ngx-structure-viewer [loci]="loci" [settings]="settings$ | async" [source]="{
-                    link: 'https://files.rcsb.org/download/1crn.pdb',
-                    format: 'pdb',
-                    type: 'remote',
-                    label: '1CRN',
-                    binary: false
-                }"></ngx-structure-viewer>
-        </div>
-        <!-- Change settings -->
-        <div class="col-3">
-            <!--  -->
-        </div>
+  <!-- Section: introduction -->
+  <div class="mb-3">
+    <h1>Structure viewer</h1>
+    <p>
+      The <b>ngx-structure-viewer</b> is a Mol* wrapper for Angular. It is a viewer for molecular structures and
+      can be used to visualize and interact with 3D molecular structures. It works out of the box with the latest
+      releases of Angular and automatized the most common features of Mol*.
+    </p>
+  </div>
+  <!-- TODO Remove this -->
+  <div class="row">
+    <button class="btn btn-primary" (click)="changeSource()">
+      Change source
+    </button>
+    <!-- Sequence viewer -->
+    <div class="col-6">
+      <!-- Define squared container -->
+      <div class="position-relative overflow-hidden squared rounded">
+        <!-- Define placeholder -->
+        <div class="position-absolute left-0 top-0 w-100 h-100 placeholder"></div>
+        <!-- Define the viewer -->
+        <ngx-structure-viewer [loci]="loci" [settings]="settings$ | async"
+                              [source]="source$ | async"/>
+      </div>
+      <!-- Change settings -->
+      <div class="col-3">
+        <!--  -->
+      </div>
     </div>
     <!-- Section: choose sources -->
     <!-- <app-section-sources></app-section-sources> -->
@@ -38,5 +36,5 @@ <h1>Structure viewer</h1>
     <!-- <app-section-interactions></app-section-interactions> -->
     <!-- Section: show highlights -->
     <!-- <app-section-highlights></app-section-highlights> -->
+  </div>
 </div>
-
diff --git a/projects/demo-showcase/src/app/page-structure-viewer/page-structure-viewer.component.ts b/projects/demo-showcase/src/app/page-structure-viewer/page-structure-viewer.component.ts
@@ -1,14 +1,15 @@
 import { ThemeSelectorService } from '../theme-selector/theme-selector.service';
-import { Locus, Settings } from '@ngx-structure-viewer';
-import { Component } from '@angular/core';
-import { map, Observable, shareReplay } from 'rxjs';
+import { Locus, Settings, Source } from '@ngx-structure-viewer';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { BehaviorSubject, map, Observable, shareReplay } from 'rxjs';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'page-structure-viewer',
   // Handle representation
   templateUrl: './page-structure-viewer.component.html',
   styleUrl: './page-structure-viewer.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PageStructureViewerComponent {
 
@@ -22,13 +23,23 @@ export class PageStructureViewerComponent {
     'backbone-color': '#dee2e680',
   };
 
+  // Define source
+  source$ = new BehaviorSubject<Source>({
+    link: 'https://files.rcsb.org/download/1UBQ.cif',
+    format: 'mmcif',
+    type: 'remote',
+    label: '3HHR',
+    binary: false
+  });
+
   // NOTE Used the IBM colorblind palette
-  readonly loci: Locus[] = [
+  loci: Locus[] = [
     // { chain: 'A',                           color: '#ff000080' },  // Color chain A (only chain available)
-    { start: '1',   end: '4',   chain: 'A', color: '#648FFF80' },  // Color first beta strand
-    { start: '32',  end: '35',  chain: 'A', color: '#785EF080' },  // Color second beta strand
-    { start: '23',  end: '30',  chain: 'A', color: '#DC267F80' },  // Color first alpha helix
-    { start: '7',   end: '19',  chain: 'A', color: '#FE610080' },  // Color second alpha helix
+    { start: '43',   end: '43',   chain: 'A', color: '#648fff' },  // Color first beta strand
+    { start: '43',   end: '43',   chain: 'B', color: '#ff048b' },  // Color first beta strand
+    // { start: '32',  end: '35',  chain: 'A', color: '#785EF080' },  // Color second beta strand
+    // { start: '23',  end: '30',  chain: 'A', color: '#DC267F80' },  // Color first alpha helix
+    // { start: '7',   end: '19',  chain: 'A', color: '#FE610080' },  // Color second alpha helix
   ];
 
   public settings$: Observable<Partial<Settings>>;
@@ -43,4 +54,25 @@ export class PageStructureViewerComponent {
     );
   }
 
+  changeSource() {
+    this.source$.next({
+      link: 'https://files.rcsb.org/download/3HHR.cif',
+      format: 'mmcif',
+      type: 'remote',
+      label: '3HHR',
+      binary: false
+    });  // Change source
+
+
+    const locis = [
+      { start: '1',   end: '10',   chain: 'A', color: '#2fe500' },  // Color first beta strand
+      { start: '10',   end: '20',   chain: 'A', color: '#5e46c7' },  // Color first beta strand
+      { start: '20',   end: '30',   chain: 'A', color: '#b71db0' },  // Color first beta strand
+    ]
+
+    const idx = Math.random() * locis.length | 0;
+
+    this.loci = [locis[idx]];
+    console.log("changing loci", this.loci)
+  }
 }
diff --git a/projects/ngx-structure-viewer/package.json b/projects/ngx-structure-viewer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-structure-viewer",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "license": "MIT",
   "author": {
     "name": "Damiano Clementel",

diff --git a/projects/ngx-structure-viewer/src/lib/services/representation.service.ts b/projects/ngx-structure-viewer/src/lib/services/representation.service.ts
@@ -1,17 +1,16 @@
 import { Injectable, OnDestroy } from '@angular/core';
 import { Structure } from 'molstar/lib/mol-model/structure';
 import {
-  BehaviorSubject,
-  combineLatestWith,
+  BehaviorSubject, combineLatest, combineLatestWith, concatMap,
   filter,
   from,
   map,
   Observable,
   ReplaySubject,
   shareReplay,
   Subscription,
-  switchMap,
-  withLatestFrom,
+  switchMap, tap,
+  withLatestFrom, zip,
 } from 'rxjs';
 // Custom dependencies
 // import { Interaction, Interactor } from '../interfaces/interaction';
@@ -60,16 +59,18 @@ export class RepresentationService implements OnDestroy {
       withLatestFrom(source$),
       // Generate structure
       switchMap(([structure]) => from(this.createRepresentation(structure))),
+      tap(() => console.log('Created representation')),
       // Cache result
       shareReplay(1),
     );
 
-    // Apply settings to represenatation
+    // Apply settings to representation
     this.representation$ = component$.pipe(
+      tap(() => console.log('component changed')),
       // Combine with settings emission
       combineLatestWith(this.settingsService.settings$),
       // Combine with loci emission
-      combineLatestWith(this.loci$),
+      withLatestFrom(this.loci$),
       // Define color / alpha layers to be applied to structure
       map(([[, settings], loci]) => {
         // Define locus for backbone color
@@ -82,7 +83,7 @@ export class RepresentationService implements OnDestroy {
       // Apply colors to representation
       switchMap((bundleLayers) => from(this.colorRepresentation(this.structureService.structure, bundleLayers))),
       // Cache results
-      shareReplay(1),
+      //shareReplay(1),
     );
 
 

diff --git a/projects/ngx-structure-viewer/src/lib/services/structure.service.ts b/projects/ngx-structure-viewer/src/lib/services/structure.service.ts
@@ -51,12 +51,11 @@ export class StructureService {
     this.structure$ = this.pluginService.plugin$.pipe(
       // Subscribe to source changes
       combineLatestWith(this.source$),
-      // TODO Remove this
-      tap(([plugin, source]) => console.log('plugin', plugin, 'source', source)),
+      // tap(([plugin, source]) => console.log('plugin', plugin, 'source', source)),
       // Join source and plugin
       switchMap(([, source]) => from(this.parseSource(source))),
       // Case data is defined
-      filter((data): data is DataStateObject => data ? true : false),
+      filter((data): data is DataStateObject => !!data),
       // Generate trajectory
       switchMap((data) => from(this.createStructure(data, this.source!))),
       // Store structure wrapper
@@ -179,6 +178,8 @@ export class StructureService {
         index++;
       }
     }));
+
+    console.log('Residues set')
   }
 
-}
+}
diff --git a/projects/ngx-structure-viewer/tsconfig.lib.json b/projects/ngx-structure-viewer/tsconfig.lib.json
@@ -6,7 +6,7 @@
     "declaration": true,
     "declarationMap": true,
     "inlineSources": true,
-    "types": []
+    "types": ["node"]
   },
   "exclude": [
     "**/*.spec.ts"