From 08236d374a5f542e83e75f827992f9feb38ee965 Mon Sep 17 00:00:00 2001 From: Edward Lu <36934022+edlu77@users.noreply.github.com> Date: Mon, 5 Feb 2024 11:58:56 -0500 Subject: [PATCH] Add configurations for donors label and button urls (#1223) * Add configurations for donors label and button urls * Update embedding documentation for organ info component --- EMBEDDING.md | 62 ++++++++++++++----- .../src/app/app-web-component.component.ts | 8 +++ .../ccf-organ-info/src/app/app.component.html | 10 ++- .../ccf-organ-info/src/app/app.component.ts | 36 +++++++++-- .../link-cards/link-cards.component.ts | 18 +++++- projects/ccf-organ-info/src/index.html | 1 + 6 files changed, 112 insertions(+), 23 deletions(-) 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" > +