diff --git a/deploy/csp/index.js b/deploy/csp/index.js
index b194ff12e7879ed94c7bdbb832732abbfb4c1c0f..5c11e142c406619f9f08df70220e568c69f4b9ac 100644
--- a/deploy/csp/index.js
+++ b/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,
diff --git a/src/atlasViewer/pluginUnit/pluginFactory.directive.ts b/src/atlasViewer/pluginUnit/pluginFactory.directive.ts
index fbc76ac7bf830258620539a0301a4cac71778713..28e0de95a724b0a0d06452d91bdf6f529b05dbf8 100644
--- a/src/atlasViewer/pluginUnit/pluginFactory.directive.ts
+++ b/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) => {
diff --git a/src/index.html b/src/index.html
index 96c74ac49e440c5a7da8dc195ceb5e6f38837aeb..3fce358392e951472c13d4b67c4edd4d58ffb887 100644
--- a/src/index.html
+++ b/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>
diff --git a/src/ui/regionalFeatures/regionalFeature.service.ts b/src/ui/regionalFeatures/regionalFeature.service.ts
index e10a5390ba9d3dac1c68fcacc9b7b351686e5a1e..3151f329660b047def9fe630e4a294da0768dd1b 100644
--- a/src/ui/regionalFeatures/regionalFeature.service.ts
+++ b/src/ui/regionalFeatures/regionalFeature.service.ts
@@ -1,14 +1,20 @@
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>()
diff --git a/src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.component.ts b/src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.component.ts
index 77aad9acc9a4b057464ba003d48d97c46153965c..533e5ea2818a13d8655fcad988a243dda4141e6e 100644
--- a/src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.component.ts
+++ b/src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.component.ts
@@ -1,6 +1,7 @@
-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
diff --git a/src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.template.html b/src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.template.html
index a061700c4a95b5e1ee3dab4ed0d6d5c32ffb0a1e..90ac2e367b2e7112948ab4c613cab2a0481cd89c 100644
--- a/src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.template.html
+++ b/src/ui/regionalFeatures/singleFeatures/receptorDensity/receptorDensity/receptorDensity.template.html
@@ -1,14 +1,16 @@
<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