Merge pull request #742 from HumanBrainProject/feat_receptorPreviewNewUI

feat: reimplemented receptor preview UI

deploy/csp/index.js

@@ -85,7 +85,8 @@ module.exports = (app) => {
         'cdn.jsdelivr.net/npm/vue@2.5.16/', // plugin load external lib -> vue 2
         'cdn.jsdelivr.net/npm/preact@8.4.2/', // plugin load external lib -> preact
         'unpkg.com/react@16/umd/', // plugin load external lib -> react
-        'unpkg.com/kg-dataset-previewer@1.0.6/', // preview component
+        'unpkg.com/kg-dataset-previewer@1.1.4/', // preview component
+        'cdnjs.cloudflare.com/ajax/libs/mathjax/', // math jax
         (req, res) => res.locals.nonce ? `'nonce-${res.locals.nonce}'` : null,
         ...SCRIPT_SRC,
         ...WHITE_LIST_SRC,

src/atlasViewer/pluginUnit/pluginFactory.directive.ts

@@ -24,6 +24,9 @@ export const SUPPORT_LIBRARY_MAP: Map<string, Map<string, string>> = new Map([
   ['d3', new Map([
     ['5.7.0', 'https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js']
   ])],
+  ['mathjax', new Map([
+    ['3.1.2', 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.1.2/es5/tex-svg.js']
+  ])]
 ])
 
 export const parseLibrary = (libVer: string) => {

src/index.html

@@ -12,7 +12,7 @@
   <link rel="stylesheet" href="theme.css">
   <link rel="stylesheet" href="version.css">
   
-  <script src="https://unpkg.com/kg-dataset-previewer@1.0.6/dist/kg-dataset-previewer/kg-dataset-previewer.js" defer>
+  <script src="https://unpkg.com/kg-dataset-previewer@1.1.4/dist/kg-dataset-previewer/kg-dataset-previewer.js" defer>
   </script>
 
   <title>Interactive Atlas Viewer</title>

src/ui/regionalFeatures/regionalFeature.service.ts

 import { HttpClient } from "@angular/common/http";
-import { Injectable, OnDestroy } from "@angular/core";
+import { Inject, Injectable, OnDestroy, Optional } from "@angular/core";
 import { PureContantService } from "src/util";
 import { getIdFromFullId, getRegionHemisphere, getStringIdsFromRegion, flattenReducer } from 'common/util'
-import { forkJoin, Subject, Subscription } from "rxjs";
-import { map, switchMap } from "rxjs/operators";
+import { forkJoin, from, Observable, of, Subject, Subscription } from "rxjs";
+import { catchError, map, mapTo, shareReplay, switchMap, tap } from "rxjs/operators";
 import { IHasId } from "src/util/interfaces";
 import { select, Store } from "@ngrx/store";
 import { viewerStateSelectedTemplateSelector } from "src/services/state/viewerState/selectors";
 import { viewerStateAddUserLandmarks, viewreStateRemoveUserLandmarks } from "src/services/state/viewerState/actions";
 import { uiStateMouseoverUserLandmark } from "src/services/state/uiState/selectors";
+import { APPEND_SCRIPT_TOKEN } from "src/util/constants";
+
+const libraries = [
+  'https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js',
+  'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.1.2/es5/tex-svg.js'
+]
 
 export interface IFeature extends IHasId{
   type: string
@@ -22,18 +28,31 @@ export interface IFeature extends IHasId{
 
 export class RegionalFeaturesService implements OnDestroy{
 
+  public depScriptLoaded$: Observable<boolean>
+
   private subs: Subscription[] = []
   private templateSelected: any
   constructor(
     private http: HttpClient,
     private pureConstantService: PureContantService,
-    private store$: Store<any>
+    private store$: Store<any>,
+    @Optional() @Inject(APPEND_SCRIPT_TOKEN) private appendScript: (src: string) => Promise<HTMLScriptElement>
   ){
     this.subs.push(
       this.store$.pipe(
         select(viewerStateSelectedTemplateSelector)
       ).subscribe(val => this.templateSelected = val)
     )
+
+    this.depScriptLoaded$ = this.appendScript
+      ? from(
+        libraries.map(this.appendScript)
+      ).pipe(
+        mapTo(true),
+        catchError(() => of(false)),
+        shareReplay(1),
+      )
+      : of(false)
   }
 
   public mapFeatToCmp = new Map<string, any>()

src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.component.ts

-import { Component, EventEmitter, OnDestroy } from "@angular/core";
-import { Subscription } from "rxjs";
+import { Component, EventEmitter, OnDestroy, Optional } from "@angular/core";
+import { Observable, of, Subscription } from "rxjs";
 import { RegionalFeaturesService } from "src/ui/regionalFeatures/regionalFeature.service";
+import { PureContantService } from "src/util";
 import { RegionFeatureBase } from "../../base/regionFeature.base";
 import { ISingleFeature } from "../../interfaces";
 
@@ -15,12 +16,21 @@ export class ReceptorDensityFeatureCmp extends RegionFeatureBase implements ISin
   public DS_PREVIEW_URL = DATASET_PREVIEW_URL
   viewChanged: EventEmitter<null> = new EventEmitter()
 
-  private subs: Subscription[] = []
+  public darktheme$: Observable<boolean>
 
+  private subs: Subscription[] = []
+  public depScriptLoaded$: Observable<boolean>
   constructor(
-    regService: RegionalFeaturesService
+    regService: RegionalFeaturesService,
+    @Optional() pureConstantService: PureContantService
   ){
     super(regService)
+    this.depScriptLoaded$ = regService.depScriptLoaded$
+    if (pureConstantService) {
+      this.darktheme$ = pureConstantService.darktheme$
+    } else {
+      this.darktheme$ = of(false)
+    }
   }
 
   public selectedReceptor: string

src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.template.html

 <label for="fingerprint-cmp" class="d-block mat-h4 mt-4 text-muted">
   Fingerprint
 </label>
-<kg-dataset-previewer
-  *ngFor="let datum of (data$ | async | filterReceptorByType : '_fp_')"
-  id="fingerprint-cmp"
-  (renderEvent)="viewChanged.emit()"
-  [backendUrl]="DS_PREVIEW_URL"
-  [kgId]="feature['@id'] | getId"
-  [filename]="datum['@id']">
-</kg-dataset-previewer>
+
+<ng-container *ngFor="let datum of (data$ | async | filterReceptorByType : '_fp_')">
+  <ng-container *ngTemplateOutlet="datasetPreviewTmpl; context: {
+    id: 'fingerprint-cmp',
+    kgId: (feature['@id'] | getId),
+    filename: datum['@id']
+  }">
+  
+  </ng-container>
+</ng-container>
 
 <mat-form-field class="mt-2">
   <mat-label>
@@ -39,12 +41,33 @@
       </label>
     </ng-template>
 
+    <ng-container *ngTemplateOutlet="datasetPreviewTmpl; context: {
+      id: label + '-cmp',
+      kgId: (feature['@id'] | getId),
+      filename: datum['@id']
+    }">
+    </ng-container>
+  </ng-container>
+</ng-template>
+
+<ng-template #datasetPreviewTmpl let-id="id" let-kgId="kgId" let-filename="filename">
+  <kg-ds-prv-regional-feature-view
+    *ngIf="depScriptLoaded$ | async; else fallbackTmpl"
+    [attr.id]="id"
+    [darkmode]="darktheme$ | async"
+    (renderEvent)="viewChanged.emit()"
+    [backendUrl]="DS_PREVIEW_URL"
+    [kgId]="kgId"
+    [filename]="filename">
+  </kg-ds-prv-regional-feature-view>
+
+  <ng-template #fallbackTmpl>
     <kg-dataset-previewer
-      [attr.id]="label + '-cmp'"
+      [attr.id]="id"
       (renderEvent)="viewChanged.emit()"
       [backendUrl]="DS_PREVIEW_URL"
-      [kgId]="feature['@id'] | getId"
-      [filename]="datum['@id']">
+      [kgId]="kgId"
+      [filename]="filename">
     </kg-dataset-previewer>
-  </ng-container>
-</ng-template>
+  </ng-template>
+</ng-template>
\ No newline at end of file