diff --git a/EMBEDDING.md b/EMBEDDING.md
index cf2351393..de5d6ab57 100644
--- a/EMBEDDING.md
+++ b/EMBEDDING.md
@@ -312,10 +312,21 @@ window.addEventListener('DOMContentLoaded', () => {
organInfo.sex = 'Female';
organInfo.side = 'Right';
organInfo.dataSources = ['https://.....jsonld', 'https://.....jsonld'];
+ organInfo.highlightProviders: ["Provider1", "Provider2"]
organInfo.hubmapDataService = 'search-api';
- organInfo.hubmapPortalUrl = 'https://.....';
organInfo.hubmapDataUrl = 'https://.....';
organInfo.hubmapAssetUrl = 'https://.....';
+ organInfo.hubmapToken = 'token';
+ organInfo.hubmapPortalUrl = 'https://.....';
+ organInfo.useRemoteApi = true;
+ organInfo.remoteApiEndpoint = 'https://.....';
+ organInfo.donorLabel="Sources"
+ organInfo.ruiUrl="https://...."
+ organInfo.euiUrl="https://...."
+ organInfo.asctbUrl="https://...."
+ organInfo.hra-portalUrl="https://...."
+ organInfo.online-courseUrl="https://...."
+ organInfo.paperUrl="https://...."
});
```
@@ -327,10 +338,22 @@ This format of configuration only works with certain data types, namely strings
organ-iri="http://purl.obolibrary.org/obo/UBERON_0004538"
sex="Female"
side="Right"
+ data-sources="['https://.....jsonld', 'https://.....jsonld']"
+ highlight-providers="['Provider1', 'Provider2']"
hubmap-data-service="search-api"
- hubmap-portal-url="https://...."
hubmap-data-url="https://...."
hubmap-asset-url="https://...."
+ hubmap-portal-url="https://...."
+ hubmap-token="token"
+ use-remote-api="true"
+ remote-api-endpoint="https://....."
+ donor-label="Sources"
+ rui-url="https://...."
+ eui-url="https://...."
+ asctb-url="https://...."
+ hra-portal-url="https://...."
+ online-course-url="https://...."
+ paper-url="https://...."
>
````
@@ -341,17 +364,16 @@ Full ORGAN-INFO Example
- HuBMAP CCF Organ Info
-
+ HuBMAP CCF Organ Info Component
+
-
+
-
-
+
-
+ highlight-providers="TMC-Vanderbilt"
+ use-remote-api="true"
+ donor-label="Sources"
+ >
+
````
The following options are available for configuration
- `organIri: string` - A url to load data from.
-- `sex: 'Female' | 'Male'` - The sex of the selected organ.
+- `sex: 'Both' | 'Female' | 'Male'` - The sex of the selected organ.
- `side: 'Left' | 'Right'` - The selected organ side.
-- `dataSources: string[]` - A list of data sources (in .jsonld format)
+- `dataSources: string | string[]` - A list of data sources (in .jsonld format).
+- `highlightProviders: string | string[]` - List of provider(s) to highlight samples from.
- `hubmapDataService: 'static' | 'search-api'` - Data service type.
-- `hubmapPortalUrl: string` - Hubmap Portal url.
- `hubmapDataUrl: string` - Hubmap data url.
-- `hubmapAssetsUrl: string` - Hubmap assets api url.
+- `hubmapAssetUrl: string` - Hubmap assets api url.
- `hubmapToken: string` - Hubmap service token.
-
+- `useRemoteApi: string | boolean` - Whether to use a remote api.
+- `remoteApiEndpoint: string` - Remote api url endpoint.
+- `donorLabel: string` - Label for Donors entry in organ statistics.
+- `ruiUrl: string` - Url for Register Tissue button.
+- `euiUrl: string` - Url for Explore Tissue button.
+- `asctbUrl: string` - Url for ASCT+B Reporter button.
+- `hraPortalUrl: string` - Url for HRA Portal button.
+- `onlineCourseUrl: string` - Url for Online Course button.
+- `paperUrl: string` - Url for Paper button.
# Embedding the CCF-BODY-UI-WC
diff --git a/projects/ccf-organ-info/src/app/app-web-component.component.ts b/projects/ccf-organ-info/src/app/app-web-component.component.ts
index f5326c630..9be192211 100644
--- a/projects/ccf-organ-info/src/app/app-web-component.component.ts
+++ b/projects/ccf-organ-info/src/app/app-web-component.component.ts
@@ -62,6 +62,14 @@ export class AppWebComponent extends BaseWebComponent {
@Input() useRemoteApi: string | boolean;
@Input() remoteApiEndpoint: string;
+ @Input() donorLabel: string;
+ @Input() ruiUrl: string;
+ @Input() euiUrl: string;
+ @Input() asctbUrl: string;
+ @Input() hraPortalUrl: string;
+ @Input() onlineCourseUrl: string;
+ @Input() paperUrl: string;
+
@Output() readonly sexChange = new EventEmitter<'Male' | 'Female'>();
@Output() readonly sideChange = new EventEmitter<'Left' | 'Right'>();
@Output() nodeClicked = new EventEmitter();
diff --git a/projects/ccf-organ-info/src/app/app.component.html b/projects/ccf-organ-info/src/app/app.component.html
index 0ba772fa9..1a50a9d3a 100644
--- a/projects/ccf-organ-info/src/app/app.component.html
+++ b/projects/ccf-organ-info/src/app/app.component.html
@@ -7,6 +7,14 @@
-
+
+
diff --git a/projects/ccf-organ-info/src/app/app.component.ts b/projects/ccf-organ-info/src/app/app.component.ts
index 8af4f3361..d53622b5a 100644
--- a/projects/ccf-organ-info/src/app/app.component.ts
+++ b/projects/ccf-organ-info/src/app/app.component.ts
@@ -4,7 +4,7 @@ import { SpatialSceneNode } from 'ccf-body-ui';
import { AggregateResult, SpatialEntity, TissueBlockResult } from 'ccf-database';
import { GlobalConfigState, OrganInfo } from 'ccf-shared';
import { GoogleAnalyticsService } from 'ngx-google-analytics';
-import { Observable, of } from 'rxjs';
+import { Observable, combineLatest, of } from 'rxjs';
import { map, shareReplay, startWith, switchMap, tap } from 'rxjs/operators';
import { OrganLookupService } from './core/services/organ-lookup/organ-lookup.service';
@@ -15,6 +15,13 @@ interface GlobalConfig {
side?: string;
sex?: 'Both' | 'Male' | 'Female';
highlightProviders?: string[];
+ donorLabel?: string;
+ ruiUrl?: string;
+ euiUrl?: string;
+ asctbUrl?: string;
+ hraPortalUrl?: string;
+ onlineCourseUrl?: string;
+ paperUrl?: string;
}
const EMPTY_SCENE = [
@@ -39,6 +46,14 @@ export class AppComponent implements AfterViewInit {
readonly side$ = this.configState.getOption('side');
readonly filter$ = this.configState.getOption('highlightProviders')
.pipe(map((providers: string[]) => ({ tmc: providers })));
+ readonly donorLabel$ = this.configState.getOption('donorLabel');
+ readonly ruiUrl$ = this.configState.getOption('ruiUrl');
+ readonly euiUrl$ = this.configState.getOption('euiUrl');
+ readonly asctbUrl$ = this.configState.getOption('asctbUrl');
+ readonly hraPortalUrl$ = this.configState.getOption('hraPortalUrl');
+ readonly onlineCourseUrl$ = this.configState.getOption('onlineCourseUrl');
+ readonly paperUrl$ = this.configState.getOption('paperUrl');
+
readonly organInfo$: Observable;
readonly organ$: Observable;
readonly scene$: Observable;
@@ -46,6 +61,8 @@ export class AppComponent implements AfterViewInit {
readonly statsLabel$: Observable;
readonly blocks$: Observable;
+ stats: AggregateResult[] = [];
+
private latestConfig: Immutable = {};
private latestOrganInfo?: OrganInfo;
@@ -92,11 +109,18 @@ export class AppComponent implements AfterViewInit {
) : of(EMPTY_SCENE as SpatialSceneNode[]))
);
- this.stats$ = this.organ$.pipe(
- switchMap(organ => organ && this.latestOrganInfo ? lookup.getOrganStats(
- this.latestOrganInfo,
- organ.sex
- ) : of([]))
+ this.stats$ = combineLatest([this.organ$, this.donorLabel$]).pipe(
+ switchMap(([organ, donorLabel]) =>
+ organ && this.latestOrganInfo ?
+ lookup.getOrganStats(this.latestOrganInfo, organ.sex).pipe(
+ map(agg =>
+ agg.map(result =>
+ donorLabel && result.label === 'Donors' ?
+ { ...result, label: donorLabel } : result
+ )
+ )
+ ) : of([])
+ )
);
this.statsLabel$ = this.organ$.pipe(
diff --git a/projects/ccf-organ-info/src/app/modules/link-cards/link-cards.component.ts b/projects/ccf-organ-info/src/app/modules/link-cards/link-cards.component.ts
index 682b94249..08c688bd4 100644
--- a/projects/ccf-organ-info/src/app/modules/link-cards/link-cards.component.ts
+++ b/projects/ccf-organ-info/src/app/modules/link-cards/link-cards.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
interface LinkCard {
body: string;
@@ -12,7 +12,14 @@ interface LinkCard {
styleUrls: ['./link-cards.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
-export class LinkCardsComponent {
+export class LinkCardsComponent implements OnInit {
+ @Input() ruiUrl: string;
+ @Input() euiUrl: string;
+ @Input() asctbUrl: string;
+ @Input() hraPortalUrl: string;
+ @Input() onlineCourseUrl: string;
+ @Input() paperUrl: string;
+
linkCards: LinkCard[] = [
{
body: 'Add tissue blocks using the HRA Registration User Interface (RUI).',
@@ -49,6 +56,13 @@ export class LinkCardsComponent {
}
];
+ ngOnInit() {
+ const linkUrls = [this.ruiUrl, this.euiUrl, this.asctbUrl];
+ const deepDivesUrls = [this.hraPortalUrl, this.onlineCourseUrl, this.paperUrl];
+ this.linkCards = this.linkCards.map((card, index) => ({ ...card, buttonUrl: linkUrls[index] ?? card.buttonUrl }));
+ this.deepDives = this.deepDives.map((card, index) => ({ ...card, buttonUrl: deepDivesUrls[index] ?? card.buttonUrl }));
+ }
+
goToURL(url: string): void {
window.open(url, '_blank');
}
diff --git a/projects/ccf-organ-info/src/index.html b/projects/ccf-organ-info/src/index.html
index bbb6f89bf..c379ab03d 100644
--- a/projects/ccf-organ-info/src/index.html
+++ b/projects/ccf-organ-info/src/index.html
@@ -16,6 +16,7 @@
use-remote-api="true"
highlight-providers="TMC-Vanderbilt"
>
+