Merge pull request #64 from reactome/add-optional-search-by-refrence

Add optional search by refrence

Author: el-rabies

projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.html

@@ -32,7 +32,7 @@
           </span>
       </div>
       <div class="details-button">
-        <a mat-button [href]="`${CONTENT_DETAIL}/${obj().stId}`" target="_blank">
+        <a mat-button [routerLink]="`${CONTENT_DETAIL}/${obj().stId}`" target="_blank">
           <mat-icon class="custom-icon double-arrow" [svgIcon]="'double-arrow-right'"></mat-icon>
           <span class="details-label"> Details page</span>
         </a>
@@ -163,7 +163,7 @@
         <div class="label-container">{{ item.key }}</div>
         <div class="composition-container">
           @for (pe of item.value; let i = $index; track pe.dbId) {
-            <a [href]="`${CONTENT_DETAIL}/${pe.stId}`">{{ pe.name[0] }}</a>
+            <a [routerLink]="`${CONTENT_DETAIL}/${pe.stId}`">{{ pe.name[0] }}</a>
             <!-- Add separator except for last item -->
             @if (i < item.value.length - 1) {
               <span class="margin-right">,</span>
@@ -183,7 +183,7 @@
         <div class="label-container">{{ item.key }}</div>
         <div class="composition-container">
           @for (pe of item.value; let i = $index; track pe.dbId) {
-            <a [href]="`${CONTENT_DETAIL}/${pe.stId}`">{{ pe.name[0] }}</a>
+            <a [routerLink]="`${CONTENT_DETAIL}/${pe.stId}`">{{ pe.name[0] }}</a>
             <!-- Add separator except for last item -->
             @if (i < item.value.length - 1) {
               <span class="margin-right">,</span>
@@ -251,7 +251,7 @@
           @for (ie of item.data; track $index) {
             <div class="authorship-item">
               @for (author of ie.author; let i = $index; track $index) {
-                <a [href]="`${CONTENT_DETAIL}/${author.dbId}`"
+                <a [routerLink]="`${CONTENT_DETAIL}/${author.dbId}`"
                    [ngClass]="{'margin-right': !author.orcidId}">
                   {{ author.firstname }} {{ author.surname }}
                 </a>

projects/website-angular/src/app/search/search-bar/search-bar.component.html

@@ -1,4 +1,4 @@
-@if (!advancedMode) {
+@if (currentMode === 'simple' || currentMode === 'reference') {
 <form class="search-bar-container" (submit)="onSubmit($event)">
   <input
     type="text"
@@ -47,7 +47,7 @@
     }
   </ul>
 </div>
-} @if (advancedMode) {
+} @if (currentMode === 'advanced') {
 <button class="syntax-help-toggle" (click)="syntaxHelpOpen = !syntaxHelpOpen">
   <span class="material-symbols-rounded">help_outline</span>
   Syntax Help

projects/website-angular/src/app/search/search-bar/search-bar.component.ts

@@ -28,7 +28,7 @@ export class SearchBarComponent implements OnChanges {
   private router = inject(Router);
   private searchService = inject(SearchService);
   @Input() query: string = '';
-  @Input() advancedMode = false;
+  @Input() currentMode: 'advanced' | 'reference' | 'simple' = 'simple';
   @Input() filters = false;
   @Output() queryChange = new EventEmitter<string>();
 
@@ -72,7 +72,8 @@ export class SearchBarComponent implements OnChanges {
 
     const params: Record<string, string | string[] | null> = {
       q: q,
-      advanced: this.advancedMode ? 'true' : null,
+      advanced: this.currentMode === 'advanced' ? 'true' : null,
+      reference: this.currentMode === 'reference' ? 'true' : null,
       page: null,
     };
 
@@ -114,7 +115,8 @@ export class SearchBarComponent implements OnChanges {
 
     const params: Record<string, string | string[] | null> = {
       q: s,
-      advanced: this.advancedMode ? 'true' : null,
+      advanced: this.currentMode === 'advanced' ? 'true' : null,
+      reference: this.currentMode === 'reference' ? 'true' : null,
       page: null,
     };