Add configurations for donors label and button urls (#1223)

* Add configurations for donors label and button urls * Update embedding documentation for organ info component
hubmapconsortium · Feb 5, 2024 · 08236d3 · 08236d3
1 parent 3c6b5b6
commit 08236d3
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 23 deletions.
diff --git 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://...."
 ></ccf-organ-info>
 ````
 
@@ -341,41 +364,52 @@ Full ORGAN-INFO Example
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>HuBMAP CCF Organ Info</title>
-  <base href="./">
+  <title>HuBMAP CCF Organ Info Component</title>
+  <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&amp;display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
-  <link href="styles.css" rel="stylesheet">
-  <script src="wc.js" async></script>
 </head>
+
 <body class="mat-typography">
-  <ccf-eui
+  <ccf-organ-info
     organ-iri="http://purl.obolibrary.org/obo/UBERON_0004538"
     sex="Female"
     side="Right"
     hubmap-data-service="search-api"
     hubmap-portal-url="https://portal.test.hubmapconsortium.org/"
     hubmap-data-url="https://search.api.hubmapconsortium.org/v3/entities/search"
     hubmap-asset-url="https://assets.test.hubmapconsortium.org"
-  ></ccf-eui>
+    highlight-providers="TMC-Vanderbilt"
+    use-remote-api="true"
+    donor-label="Sources"
+  ></ccf-organ-info>
 </body>
+
 </html>
 ````
 
 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
@@ -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
@@ -7,6 +7,14 @@
   <div class="right" #right>
     <ccf-stats-list [statsLabel]="statsLabel$ | async" [stats]="stats$ | async">
     </ccf-stats-list>
-    <ccf-link-cards></ccf-link-cards>
+    <ccf-link-cards
+      [ruiUrl]="ruiUrl$ | async"
+      [euiUrl]="euiUrl$ | async"
+      [asctbUrl]="asctbUrl$ | async"
+      [hraPortalUrl]="hraPortalUrl$ | async"
+      [onlineCourseUrl]="onlineCourseUrl$ | async"
+      [paperUrl]="paperUrl$ | async"
+      >
+    </ccf-link-cards>
   </div>
 </div>
diff --git 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,13 +46,23 @@ 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<OrganInfo | undefined>;
   readonly organ$: Observable<SpatialEntity | undefined>;
   readonly scene$: Observable<SpatialSceneNode[]>;
   readonly stats$: Observable<AggregateResult[]>;
   readonly statsLabel$: Observable<string>;
   readonly blocks$: Observable<TissueBlockResult[]>;
 
+  stats: AggregateResult[] = [];
+
   private latestConfig: Immutable<GlobalConfig> = {};
   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
@@ -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
@@ -16,6 +16,7 @@
     use-remote-api="true"
     highlight-providers="TMC-Vanderbilt"
   ></ccf-organ-info>
+
   <!-- <ccf-organ-info
     organ-iri="http://purl.obolibrary.org/obo/UBERON_0004538"
     hubmap-data-service="search-api"