make sure we can display alias values in search

fixes #299

frontend/src/app/components/medical-sources-card/medical-sources-card.component.html

@@ -15,5 +15,10 @@
     <small class="tx-gray-700">
       {{getSourceDisplayName(sourceInfo)}}
     </small>
+    <ng-container *ngIf="sourceInfo?.searchHighlights?.length > 0">
+      <br/>
+      <small class="tx-gray-700"><strong>Also: </strong><span [innerHTML]="sourceInfo?.searchHighlights.join(', ') | safeHtml:'html'"></span></small>
+    </ng-container>
+
   </div>
 </div>

frontend/src/app/models/lighthouse/lighthouse-source-search.ts

@@ -23,6 +23,9 @@ export class LighthouseSourceSearchResult {
   _score: number;
   _source: LighthouseBrandListDisplayItem;
   sort: string[];
+  highlight?: {
+    aliases?: string[];
+  }
 }
 
 export class LighthouseSourceSearchAggregation {

frontend/src/app/pages/medical-sources/medical-sources.component.ts

@@ -24,6 +24,7 @@ export const sourceConnectWindowTimeout = 24*5000 //wait 2 minutes (5 * 24 = 120
 export class SourceListItem {
   source?: Source
   brand: LighthouseBrandListDisplayItem | PatientAccessBrand
+  searchHighlights?: string[]
 }
 
 @Component({
@@ -165,7 +166,10 @@ export class MedicalSourcesComponent implements OnInit {
       this.resultLimits.totalItems = wrapper.hits.total.value;
 
       this.availableLighthouseBrandList = this.availableLighthouseBrandList.concat(wrapper.hits.hits.map((result) => {
-        return {brand: result._source}
+        return {
+          brand: result._source,
+          searchHighlights: result?.highlight?.aliases || []
+        }
       }))
 
       //check if scroll is complete.

frontend/src/app/pipes/pipes.module.ts

@@ -9,6 +9,7 @@ import { DatasetLatestEntryPipe } from './dataset-latest-entry.pipe';
 import { HumanNamePipe } from './human-name.pipe';
 import { ReferenceUriPipe } from './reference-uri.pipe';
 import { FastenDisplayModelPipe } from './fasten-display-model.pipe';
+import { SafeHtmlPipe } from './safe-html.pipe';
 
 @NgModule({
   declarations: [
@@ -20,6 +21,7 @@ import { FastenDisplayModelPipe } from './fasten-display-model.pipe';
     HumanNamePipe,
     ReferenceUriPipe,
     FastenDisplayModelPipe,
+    SafeHtmlPipe,
   ],
   imports: [
 
@@ -31,7 +33,8 @@ import { FastenDisplayModelPipe } from './fasten-display-model.pipe';
     DatasetLatestEntryPipe,
     HumanNamePipe,
     ReferenceUriPipe,
-    FastenDisplayModelPipe
+    FastenDisplayModelPipe,
+    SafeHtmlPipe
   ]
 })
 export class PipesModule {}

frontend/src/app/pipes/safe-html.pipe.spec.ts

@@ -0,0 +1,9 @@
+import { SafeHtmlPipe } from './safe-html.pipe';
+import {DomSanitizer} from '@angular/platform-browser';
+
+// describe('SafeHtmlPipe', () => {
+//   it('create an instance', () => {
+//     const pipe = new SafeHtmlPipe(new DomSanitizer());
+//     expect(pipe).toBeTruthy();
+//   });
+// });

frontend/src/app/pipes/safe-html.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {DomSanitizer, SafeHtml, SafeResourceUrl, SafeScript, SafeStyle, SafeUrl} from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safeHtml'
+})
+export class SafeHtmlPipe implements PipeTransform {
+  constructor(private sanitized: DomSanitizer) {}
+
+  transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
+    switch (type) {
+      case 'html': return this.sanitized.bypassSecurityTrustHtml(value);
+      case 'style': return this.sanitized.bypassSecurityTrustStyle(value);
+      case 'script': return this.sanitized.bypassSecurityTrustScript(value);
+      case 'url': return this.sanitized.bypassSecurityTrustUrl(value);
+      case 'resourceUrl': return this.sanitized.bypassSecurityTrustResourceUrl(value);
+      default: throw new Error(`Invalid safe type specified: ${type}`);
+    }
+  }
+
+}