Set up baseUrl + add test wc

projects/ccf-eui/src/app/app-web-component.component.ts

@@ -94,6 +94,7 @@ function parseFilter(value: unknown): string | Partial<Filter> {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppWebComponent extends BaseWebComponent {
+  @Input() baseHref: string;
   @Input() dataSources: string | string[];
   @Input() selectedOrgans: string[];
 

projects/ccf-eui/src/app/app.component.html

@@ -1,7 +1,7 @@
 <div class="ccf-app mat-app-background">
   <ccf-spinner-overlay [text]="loadingMessage$ | async" [active]="spinnerActive$ | async">
   </ccf-spinner-overlay>
-  <ccf-header [class.hide]="(header$ | async) === false" [logoTooltip]="logoTooltip$ | async" [homeUrl]="homeUrl$ | async" [loggedIn]="loggedIn" [loginDisabled]="(loginDisabled$ | async)" *ngIf="(spinnerActive$ | async) === false">
+  <ccf-header [class.hide]="(header$ | async) === false" [logoTooltip]="logoTooltip$ | async" [homeUrl]="homeUrl$ | async" [loggedIn]="loggedIn" [loginDisabled]="(loginDisabled$ | async)" [baseRef]="baseHref$ | async" *ngIf="(spinnerActive$ | async) === false">
   </ccf-header>
 
   <ccf-drawer-container class="main-drawers" [class.header-hidden]="(header$ | async) === false">
@@ -94,7 +94,7 @@
             </mat-icon>
           </button>
         </div>
-        <ccf-info-button videoID="YAHJqvD3Q_8" infoTitle="HRA Exploration User Interface" documentationUrl="assets/docs/README.md" matTooltip="Open Info">
+        <ccf-info-button videoID="YAHJqvD3Q_8" infoTitle="HRA Exploration User Interface" [documentationUrl]="(baseHref$ | async) + 'assets/docs/README.md'" matTooltip="Open Info">
         </ccf-info-button>
       </div>
       <ccf-results-browser

projects/ccf-eui/src/app/app.component.spec.ts

@@ -129,6 +129,7 @@ describe('AppComponent', () => {
         config$: new Observable<Immutable<unknown>>(),
         patchConfig: () => undefined,
         getOption: () => of(undefined),
+        patchState: () => undefined
       });
   });
 

projects/ccf-eui/src/app/app.component.ts

@@ -42,6 +42,7 @@ interface AppOptions extends CCFDatabaseOptions {
   logoTooltip?: string;
   selectedOrgans?: string[];
   loginEnabled?: boolean;
+  baseHref?: string;
 }
 
 
@@ -143,6 +144,8 @@ export class AppComponent implements OnInit {
   readonly loginDisabled$ = this.globalConfig.getOption('loginDisabled');
   readonly filter$ = this.globalConfig.getOption('filter');
   readonly selectedOrgans$ = this.globalConfig.getOption('selectedOrgans');
+  readonly baseHref$ = this.globalConfig.getOption('baseHref');
+
   /**
    * Creates an instance of app component.
    *
@@ -177,6 +180,7 @@ export class AppComponent implements OnInit {
     this.cellTypeTerms$ = data.filter$.pipe(map(x => x?.cellTypeTerms));
     this.biomarkerTerms$ = data.filter$.pipe(map(x => x?.biomarkerTerms));
     this.filter$.subscribe((filter: Partial<Filter>)=> data.updateFilter(filter));
+    this.baseHref$.subscribe(ref => this.globalConfig.patchState({ baseHref: ref ?? '' }));
 
     combineLatest([scene.referenceOrgans$, this.selectedOrgans$]).subscribe(
       ([refOrgans, selected]: [OrganInfo[], string[]]) => {

projects/ccf-eui/src/app/core/header/header.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 /**
  * Header which is always displayed on the site; contains current filter info,
@@ -10,7 +10,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
   styleUrls: ['./header.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class HeaderComponent {
+export class HeaderComponent implements OnInit {
 
   /**
    * URL to Portal site
@@ -31,6 +31,8 @@ export class HeaderComponent {
    */
   @Input() filters: Record<string, unknown[] | unknown>;
 
+  @Input() baseRef = '';
+
   /**
    * Emitted when refresh button is clicked
    */
@@ -40,4 +42,18 @@ export class HeaderComponent {
    * Emitted when download button is clicked
    */
   @Output() readonly downloadClicked = new EventEmitter<void>();
+
+  ngOnInit() {
+    const theme = document.getElementsByTagName('ccf-root')[0].classList[0];
+    const logo = document.getElementsByClassName('logo')[0] as HTMLElement;
+    if (['hubmap-theme-dark', 'hubmap-theme-light'].includes(theme)) {
+      logo.style.backgroundImage = `url(${this.baseRef}assets/icons/app/hubmap-logo.svg)`;
+    } else if (['sennet-theme-dark', 'sennet-theme-light'].includes(theme)) {
+      logo.style.backgroundImage = `url(${this.baseRef}assets/icons/app/sennet-logo.svg)`;
+    } else if (['gtex-theme-dark', 'gtex-theme-light'].includes(theme)) {
+      logo.style.backgroundImage = `url(${this.baseRef}assets/icons/app/gtex-logo.png)`;
+    } else {
+      logo.style.backgroundImage = `url(${this.baseRef}assets/icons/app/default-logo.svg)`;
+    }
+  }
 }

projects/ccf-eui/src/app/core/store/icon-registry/icon-registry.state.ts

@@ -6,6 +6,8 @@ import { NgxsDataRepository } from '@angular-ru/ngxs/repositories';
 import { State } from '@ngxs/store';
 
 import { DEFAULT_ICONS } from './default-icons';
+import { AppOptions } from 'ccf-api';
+import { GlobalConfigState } from 'ccf-shared';
 
 
 /**
@@ -49,19 +51,21 @@ export class IconRegistryState extends NgxsDataRepository<void> {
    */
   constructor(
     @Optional() private readonly registry: MatIconRegistry | null,
-    sanitizer: DomSanitizer
+    sanitizer: DomSanitizer,
+    private readonly globalConfig: GlobalConfigState<AppOptions>
   ) {
     super();
-
-    for (const { name, namespace, url, html } of DEFAULT_ICONS) {
-      const safeDef: IconDefinition = {
-        name, namespace,
-        url: url && sanitizer.bypassSecurityTrustResourceUrl(url),
-        html: html && sanitizer.bypassSecurityTrustHtml(html)
-      };
-
-      this.registerIconImpl(safeDef);
-    }
+    this.globalConfig.getOption('baseHref').subscribe((ref: string) => {
+      for (const { name, namespace, url, html } of DEFAULT_ICONS) {
+        const safeDef: IconDefinition = {
+          name, namespace,
+          url: ref + url && sanitizer.bypassSecurityTrustResourceUrl(ref + url),
+          html: html && sanitizer.bypassSecurityTrustHtml(html)
+        };
+
+        this.registerIconImpl(safeDef);
+      }
+    });
   }
 
   /**

projects/ccf-eui/src/app/shared/components/spatial-search-config-behavior/spatial-search-config-behavior.component.spec.ts

@@ -8,6 +8,7 @@ import { SceneState } from '../../../core/store/scene/scene.state';
 
 import { SpatialSearchConfigBehaviorComponent } from './spatial-search-config-behavior.component';
 import { SpatialSearchConfigBehaviorModule } from './spatial-search-config-behavior.module';
+import { GlobalConfigState } from 'ccf-shared';
 
 function wait(duration: number): Promise<void> {
   return new Promise(resolve => {
@@ -27,7 +28,8 @@ describe('SpatialSearchConfigBehaviorComponent', () => {
     shallow = new Shallow(SpatialSearchConfigBehaviorComponent, SpatialSearchConfigBehaviorModule)
       .mock(MatDialogRef, { close(): void { /* Empty */ } })
       .mock(SceneState, { referenceOrgans$: of([]) })
-      .mock(HttpClient, http);
+      .mock(HttpClient, http)
+      .mock(GlobalConfigState, { getOption: () => of(undefined) });
   });
 
   it('should close the dialog when the close() method is called', async () => {

projects/ccf-eui/src/app/shared/components/spatial-search-config-behavior/spatial-search-config-behavior.component.ts

@@ -2,14 +2,15 @@ import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Dispatch } from '@ngxs-labs/dispatch-decorator';
 import { Select } from '@ngxs/store';
-import { InfoButtonService, InfoDialogComponent, OrganInfo, PanelData } from 'ccf-shared';
+import { GlobalConfigState, InfoButtonService, InfoDialogComponent, OrganInfo, PanelData } from 'ccf-shared';
 import { Observable, Subscription } from 'rxjs';
 
 import { actionAsFn } from '../../../core/store/action-as-fn';
 import { SetOrgan, SetSex } from '../../../core/store/spatial-search-ui/spatial-search-ui.actions';
 import { SpatialSearchUiSelectors } from '../../../core/store/spatial-search-ui/spatial-search-ui.selectors';
 import { Sex, SpatialSearchConfigComponent } from '../spatial-search-config/spatial-search-config.component';
 import { SpatialSearchUiBehaviorComponent } from '../spatial-search-ui-behavior/spatial-search-ui-behavior.component';
+import { AppOptions } from 'ccf-api';
 
 
 @Component({
@@ -35,6 +36,8 @@ export class SpatialSearchConfigBehaviorComponent implements OnDestroy {
 
   panelData: PanelData;
 
+  baseHref = '';
+
   private readonly subscriptions = new Subscription();
 
   private readonly dialogSubs = new Subscription();
@@ -43,8 +46,13 @@ export class SpatialSearchConfigBehaviorComponent implements OnDestroy {
     public dialog: MatDialog,
     private readonly dialogRef: MatDialogRef<SpatialSearchConfigComponent>,
     private readonly spatialSearchDialog: MatDialog,
-    private readonly infoService: InfoButtonService
-  ) { }
+    private readonly infoService: InfoButtonService,
+    private readonly globalConfig: GlobalConfigState<AppOptions>
+  ) {
+    this.globalConfig.getOption('baseHref').subscribe((ref: string) => {
+      this.baseHref = ref;
+    });
+  }
 
   buttonClicked(): void {
     this.spatialSearchDialog.open(SpatialSearchUiBehaviorComponent);
@@ -70,7 +78,7 @@ export class SpatialSearchConfigBehaviorComponent implements OnDestroy {
   }
 
   onDialogButtonClick(): void {
-    this.infoService.updateData('assets/docs/SPATIAL_SEARCH_README.md', 'UfxMpzatowE', 'Spatial Search');
+    this.infoService.updateData(this.baseHref + 'assets/docs/SPATIAL_SEARCH_README.md', 'UfxMpzatowE', 'Spatial Search');
     const panelContent$ = this.infoService.panelContent.asObservable();
     this.dialogSubs.add(panelContent$.subscribe(data => {
       if (data.content.length) {

projects/ccf-eui/src/app/shared/components/spatial-search-ui-behavior/spatial-search-ui-behavior.component.spec.ts

@@ -5,6 +5,8 @@ import { Shallow } from 'shallow-render';
 
 import { SpatialSearchUiBehaviorComponent } from './spatial-search-ui-behavior.component';
 import { SpatialSearchUiBehaviorModule } from './spatial-search-ui-behavior.module';
+import { of } from 'rxjs/internal/observable/of';
+import { GlobalConfigState } from 'ccf-shared';
 
 function wait(duration: number): Promise<void> {
   return new Promise(resolve => {
@@ -21,7 +23,8 @@ describe('SpatialSearchUiBehaviorComponent', () => {
     });
 
     shallow = new Shallow(SpatialSearchUiBehaviorComponent, SpatialSearchUiBehaviorModule)
-      .mock(MatDialogRef, { close(): void { /* Empty */ } });
+      .mock(MatDialogRef, { close(): void { /* Empty */ } })
+      .mock(GlobalConfigState, { getOption: () => of(undefined) });
   });
 
   it('should close the dialog when the close() method is called', async () => {

projects/ccf-eui/src/app/shared/components/spatial-search-ui-behavior/spatial-search-ui-behavior.component.ts

@@ -3,7 +3,7 @@ import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Dispatch } from '@ngxs-labs/dispatch-decorator';
 import { Select } from '@ngxs/store';
 import { SpatialSceneNode, TissueBlockResult } from 'ccf-database';
-import { InfoButtonService, InfoDialogComponent, OrganInfo, PanelData } from 'ccf-shared';
+import { GlobalConfigState, InfoButtonService, InfoDialogComponent, OrganInfo, PanelData } from 'ccf-shared';
 import { Observable, Subscription } from 'rxjs';
 
 import { actionAsFn } from '../../../core/store/action-as-fn';
@@ -22,6 +22,7 @@ import {
 } from '../spatial-search-config-behavior/spatial-search-config-behavior.component';
 import { Sex } from '../spatial-search-config/spatial-search-config.component';
 import { SpatialSearchUiComponent } from '../spatial-search-ui/spatial-search-ui.component';
+import { AppOptions } from 'ccf-api';
 
 
 /**
@@ -88,14 +89,21 @@ export class SpatialSearchUiBehaviorComponent {
   /** Data to be displayed in the info panel */
   panelData: PanelData;
 
+  baseHref = '';
+
   /** Subscriptions for the info panel data */
   private readonly subscriptions = new Subscription();
 
   constructor(
     private readonly dialogRef: MatDialogRef<SpatialSearchUiComponent>,
     public dialog: MatDialog,
-    private readonly infoService: InfoButtonService
-  ) { }
+    private readonly infoService: InfoButtonService,
+    private readonly globalConfig: GlobalConfigState<AppOptions>
+  ) {
+    this.globalConfig.getOption('baseHref').subscribe((ref: string) => {
+      this.baseHref = ref;
+    });
+  }
 
   /**
    * Launchs info dialog with the input data
@@ -119,7 +127,7 @@ export class SpatialSearchUiBehaviorComponent {
    * Updates dialog with spatial search information
    */
   onDialogButtonClick(): void {
-    this.infoService.updateData('assets/docs/SPATIAL_SEARCH_README.md', 'UfxMpzatowE', 'Spatial Search');
+    this.infoService.updateData(this.baseHref + 'assets/docs/SPATIAL_SEARCH_README.md', 'UfxMpzatowE', 'Spatial Search');
     const panelContent$ = this.infoService.panelContent.asObservable();
     this.subscriptions.add(panelContent$.subscribe(data => {
       if (data.content.length) {

projects/ccf-eui/src/app/shared/components/thumbnail-carousel/thumbnail-carousel.component.html

@@ -8,7 +8,7 @@
   <ng-container *ngFor="let item of data; trackBy: itemId">
     <ng-template swiperSlide>
       <div class="slide">
-        <div class="thumbnail" [style.background-image]="'url(' + item.thumbnail + ')'">
+        <div class="thumbnail" [style.background-image]="thumbnailUrl(item)">
           {{ item.technology }}
         </div>
         <a class="link" (click)="linkClicked.emit(item)">

projects/ccf-eui/src/app/shared/components/thumbnail-carousel/thumbnail-carousel.component.spec.ts

@@ -3,6 +3,8 @@ import { Shallow } from 'shallow-render';
 
 import { ThumbnailCarouselComponent } from './thumbnail-carousel.component';
 import { ThumbnailCarouselModule } from './thumbnail-carousel.module';
+import { GlobalConfigState } from 'ccf-shared';
+import { of } from 'rxjs/internal/observable/of';
 
 
 function castPartial<T>(partial: Partial<T>): T {
@@ -14,7 +16,8 @@ describe('ThumbnailCarouselComponent', () => {
   let shallow: Shallow<ThumbnailCarouselComponent>;
 
   beforeEach(() => {
-    shallow = new Shallow(ThumbnailCarouselComponent, ThumbnailCarouselModule);
+    shallow = new Shallow(ThumbnailCarouselComponent, ThumbnailCarouselModule)
+      .mock(GlobalConfigState, { getOption: () => of(undefined) });
   });
 
   describe('itemId(index, item)', () => {

projects/ccf-eui/src/app/shared/components/thumbnail-carousel/thumbnail-carousel.component.ts

@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
+import { AppOptions } from 'ccf-api';
 import { DatasetResult } from 'ccf-database';
+import { GlobalConfigState } from 'ccf-shared';
 import { SwiperOptions } from 'swiper';
 import { NavigationOptions } from 'swiper/types';
 
@@ -79,6 +81,14 @@ export class ThumbnailCarouselComponent {
     nextEl: '#' + this.nextButtonId
   };
 
+  readonly baseHref$ = this.globalConfig.getOption('baseHref');
+
+  baseHref = '';
+
+  constructor(private readonly globalConfig: GlobalConfigState<AppOptions>) {
+    this.baseHref$.subscribe((ref: string) => this.setUrl(ref));
+  }
+
   /**
    * Extract a unique identifier for an item
    *
@@ -89,4 +99,12 @@ export class ThumbnailCarouselComponent {
   itemId(_index: number, item: DatasetResult): string {
     return item.thumbnail;
   }
+
+  setUrl(url: string) {
+    this.baseHref = url;
+  }
+
+  thumbnailUrl(item: DatasetResult): string {
+    return `url(${this.baseHref + item.thumbnail})`;
+  }
 }

projects/ccf-eui/src/assets/docs/SPATIAL_SEARCH_README.md

@@ -18,4 +18,4 @@
 - Rotate: Modify the camera view by using the mouse or trackpad to click and drag in the desired direction.
 - Reset: Click the Reset Camera View button or the Reset Probing Sphere button to start fresh.
 
-![Image](assets/images/spatial_search.gif)
+![Image](https://cdn.jsdelivr.net/gh/hubmapconsortium/ccf-ui@gh-pages/assets/images/spatial_search.gif)

projects/ccf-eui/src/assets/wc-test/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>HuBMAP HRA Exploration User Interface (CCF-EUI)</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/hubmapconsortium/ccf-ui@gh-pages/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/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/gh/hubmapconsortium/ccf-ui@gh-pages/styles.css" rel="stylesheet">
+  <script src="../../wc.js" defer></script>
+</head>
+<body class="mat-typography">
+  <ccf-eui use-remote-api="true" base-href="https://cdn.jsdelivr.net/gh/hubmapconsortium/ccf-ui@gh-pages/"></ccf-eui>
+</body>
+</html>

projects/ccf-eui/src/index.html

@@ -3,7 +3,6 @@
 <head>
   <meta charset="utf-8">
   <title>HuBMAP HRA Exploration User Interface (CCF-EUI)</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">