From b003a62c1c1dc09b9fee0725d3a46d896581a90c Mon Sep 17 00:00:00 2001
From: Jason Kulatunga <jason@thesparktree.com>
Date: Sat, 2 Mar 2024 12:47:48 -0800
Subject: [PATCH] make sure we can display alias values in search

fixes #299
---
 .../medical-sources-card.component.html       |  5 +++++
 .../lighthouse/lighthouse-source-search.ts    |  3 +++
 .../medical-sources.component.ts              |  6 +++++-
 frontend/src/app/pipes/pipes.module.ts        |  5 ++++-
 frontend/src/app/pipes/safe-html.pipe.spec.ts |  9 ++++++++
 frontend/src/app/pipes/safe-html.pipe.ts      | 21 +++++++++++++++++++
 6 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/app/pipes/safe-html.pipe.spec.ts
 create mode 100644 frontend/src/app/pipes/safe-html.pipe.ts

diff --git a/frontend/src/app/components/medical-sources-card/medical-sources-card.component.html b/frontend/src/app/components/medical-sources-card/medical-sources-card.component.html
index eedbbd1e..474fdec3 100644
--- a/frontend/src/app/components/medical-sources-card/medical-sources-card.component.html
+++ b/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>
diff --git a/frontend/src/app/models/lighthouse/lighthouse-source-search.ts b/frontend/src/app/models/lighthouse/lighthouse-source-search.ts
index 0f397d62..2a378e69 100644
--- a/frontend/src/app/models/lighthouse/lighthouse-source-search.ts
+++ b/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 {
diff --git a/frontend/src/app/pages/medical-sources/medical-sources.component.ts b/frontend/src/app/pages/medical-sources/medical-sources.component.ts
index aeec583f..c49b92eb 100644
--- a/frontend/src/app/pages/medical-sources/medical-sources.component.ts
+++ b/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.
diff --git a/frontend/src/app/pipes/pipes.module.ts b/frontend/src/app/pipes/pipes.module.ts
index 745e3a5e..7ee7af32 100644
--- a/frontend/src/app/pipes/pipes.module.ts
+++ b/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 {}
diff --git a/frontend/src/app/pipes/safe-html.pipe.spec.ts b/frontend/src/app/pipes/safe-html.pipe.spec.ts
new file mode 100644
index 00000000..6e820811
--- /dev/null
+++ b/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();
+//   });
+// });
diff --git a/frontend/src/app/pipes/safe-html.pipe.ts b/frontend/src/app/pipes/safe-html.pipe.ts
new file mode 100644
index 00000000..f05f6a38
--- /dev/null
+++ b/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}`);
+    }
+  }
+
+}