Add baseHref to more urls

hubmapconsortium · Jan 9, 2024 · 7557bdb · 7557bdb
1 parent 9047d88
commit 7557bdb
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/...ts/ccf-eui/src/app/shared/components/thumbnail-carousel/thumbnail-carousel.component.html b/...ts/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)">

diff --git a/...ccf-eui/src/app/shared/components/thumbnail-carousel/thumbnail-carousel.component.spec.ts b/...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)', () => {

diff --git a/...ects/ccf-eui/src/app/shared/components/thumbnail-carousel/thumbnail-carousel.component.ts b/...ects/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})`;
+  }
 }
diff --git a/projects/ccf-eui/src/assets/docs/SPATIAL_SEARCH_README.md b/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)