From eb22db6dc0d28dfa1989056d18fa7bef125aac44 Mon Sep 17 00:00:00 2001
From: el-rabies <eleoraby@gmail.com>
Date: Wed, 8 Apr 2026 11:33:50 -0400
Subject: [PATCH 1/6] feat: Added Optional Refrence Search Mode

---
 .../description-tab.component.html            |   8 +-
 .../search-bar/search-bar.component.html      |   4 +-
 .../search/search-bar/search-bar.component.ts |   8 +-
 .../src/app/search/search.component.html      | 193 +++++++++++++++--
 .../src/app/search/search.component.scss      | 105 +++++++++
 .../src/app/search/search.component.ts        | 199 +++++++++++++++++-
 .../src/services/search.service.ts            |   1 +
 7 files changed, 485 insertions(+), 33 deletions(-)

diff --git a/projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.html b/projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.html
index a7cc73e..15d2421 100644
--- a/projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.html
+++ b/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>
diff --git a/projects/website-angular/src/app/search/search-bar/search-bar.component.html b/projects/website-angular/src/app/search/search-bar/search-bar.component.html
index c664b90..396ea77 100644
--- a/projects/website-angular/src/app/search/search-bar/search-bar.component.html
+++ b/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
diff --git a/projects/website-angular/src/app/search/search-bar/search-bar.component.ts b/projects/website-angular/src/app/search/search-bar/search-bar.component.ts
index 54d2801..5441246 100644
--- a/projects/website-angular/src/app/search/search-bar/search-bar.component.ts
+++ b/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,
     };
 
diff --git a/projects/website-angular/src/app/search/search.component.html b/projects/website-angular/src/app/search/search.component.html
index 8e11300..e0c9ce7 100644
--- a/projects/website-angular/src/app/search/search.component.html
+++ b/projects/website-angular/src/app/search/search.component.html
@@ -4,20 +4,24 @@
       <!-- Search bar + filters above the two-column layout -->
       <div class="search-top">
         <div class="search-mode-tabs">
-          <button class="mode-tab" [class.active]="!advancedMode" (click)="advancedMode && toggleAdvancedMode()">
+          <button class="mode-tab" [class.active]="currentMode === 'simple'" (click)="currentMode = 'simple'">
             <span class="material-symbols-rounded">search</span>
             Simple Search
           </button>
-          <button class="mode-tab" [class.active]="advancedMode" (click)="!advancedMode && toggleAdvancedMode()">
+          <button class="mode-tab" [class.active]="currentMode === 'advanced'" (click)="currentMode = 'advanced'">
             <span class="material-symbols-rounded">tune</span>
             Advanced Search
           </button>
+          <button class="mode-tab" [class.active]="currentMode === 'reference'" (click)="currentMode = 'reference'">
+            <span class="material-symbols-rounded">menu_book</span>
+            Reference Search
+          </button>
         </div>
 
-        @if (advancedMode) {
-          <app-search-bar [query]="query" (queryChange)="onQueryInput($event)" [advancedMode]="true"/>
+        @if (currentMode === 'advanced') {
+          <app-search-bar [query]="query" (queryChange)="onQueryInput($event)" [currentMode]="currentMode"/>
         } @else {
-          <app-search-bar [query]="query" (queryChange)="onQueryInput($event)"/>
+          <app-search-bar [query]="query" (queryChange)="onQueryInput($event)" [currentMode]="currentMode"/>
         }
       </div>
 
@@ -273,11 +277,108 @@ <h2>Please report to us and we will get back shortly.</h2>
                   <app-tile variant="light">
                     <div class="result-group">
                       <button class="group-header" (click)="toggleGroup(group.typeName)">
-                        <h2>{{ group.typeName }} ({{ group.entriesCount }})</h2>
+                        @if (currentMode === 'reference') {
+                          @if (group.typeName === 'Protein' && !proteinLoading && uniqueProteins.length) {
+                            <h2>{{ group.typeName }} — {{ uniqueProteins.length }} protein{{ uniqueProteins.length === 1 ? '' : 's' }}, {{ proteinTotalForms }} form{{ proteinTotalForms === 1 ? '' : 's' }}</h2>
+                          } @else {
+                            <h2>{{ group.typeName }} ({{ group.entriesCount }})</h2>
+                          }
+                        } @else {
+                          <h2>{{ group.typeName }} ({{ group.entriesCount }})</h2>
+                        }
                         <span class="group-toggle">{{ collapsedGroups[group.typeName] ? '+' : '−' }}</span>
                       </button>
                       @if (!collapsedGroups[group.typeName]) {
-                        <div class="group-entries">
+                        @if (currentMode === 'reference') {
+                          <div class="group-entries" [class.loading]="groupLoading[group.typeName] || (group.typeName === 'Protein' && proteinLoading)">
+                          @if (group.typeName === 'Protein' && proteinLoading) {
+                            <div class="protein-loading-msg">Loading all protein forms...</div>
+                          }
+                          @for (entry of getGroupPageEntries(group); track entry.dbId) {
+                            <div class="search-entry">
+                              <div class="entry-header">
+                                <a class="entry-name" [routerLink]="getDetailLink(entry)" [innerHTML]="entry.referenceName || entry.name"></a>
+                                <span class="entry-id">{{ entry.id || entry.stId }}</span>
+                              </div>
+                              @if (entry.species?.length) {
+                                <div class="entry-species">
+                                  @for (sp of entry.species; track sp; let last = $last) {
+                                    <span class="species-tag">{{ sp }}</span>
+                                  }
+                                </div>
+                              }
+                              @if (entry.compartmentNames?.length) {
+                                <div class="entry-compartments">
+                                  Compartments: {{ entry.compartmentNames.join(', ') }}
+                                </div>
+                              }
+                              @if (entry.summation) {
+                                <p class="entry-summation" [innerHTML]="entry.summation"></p>
+                              }
+                              @if (entry.referenceName) {
+                                <div class="entry-reference">
+                                  Reference: <a [href]="entry.referenceURL" target="_blank" rel="noopener"><span [innerHTML]="entry.referenceName"></span> ({{ entry.referenceIdentifier }})</a>
+                                </div>
+                              }
+                              @if (entry.type === 'Protein' && entry.referenceIdentifier && getProteinFormCount(entry) > 1) {
+                                <button class="forms-toggle" (click)="toggleForms(entry)">
+                                  <span class="material-symbols-rounded">{{ isFormsExpanded(entry) ? 'expand_less' : 'expand_more' }}</span>
+                                  {{ getProteinFormCount(entry) }} modified form{{ getProteinFormCount(entry) === 1 ? '' : 's' }}
+                                </button>
+                                @if (isFormsExpanded(entry)) {
+                                  <div class="protein-forms">
+                                    @for (form of getProteinForms(entry); track form.dbId) {
+                                      <div class="protein-form-entry">
+                                        <a class="form-name" [routerLink]="getDetailLink(form)" [innerHTML]="form.name"></a>
+                                        <span class="form-id">{{ form.id || form.stId }}</span>
+                                        @if (form.compartmentNames?.length) {
+                                          <span class="form-compartment">{{ form.compartmentNames.join(', ') }}</span>
+                                        }
+                                      </div>
+                                    }
+                                  </div>
+                                }
+                              }
+                            </div>
+                            @if (getGroupTotalPages(group) > 1 && !(group.typeName === 'Protein' && proteinLoading)) {
+                          <nav class="group-pagination">
+                            <button
+                              class="page-btn"
+                              [disabled]="getGroupPage(group) === 0"
+                              (click)="goToGroupPage(group, 0)"
+                            >First</button>
+                            <button
+                              class="page-btn"
+                              [disabled]="getGroupPage(group) === 0"
+                              (click)="goToGroupPage(group, getGroupPage(group) - 1)"
+                            >Prev</button>
+                            @for (p of getGroupPageNumbers(group); track $index) {
+                              @if (p === '...') {
+                                <span class="page-ellipsis">...</span>
+                              } @else {
+                                <button
+                                  class="page-btn"
+                                  [class.active]="p === getGroupPage(group)"
+                                  (click)="goToGroupPage(group, +p)"
+                                >{{ +p + 1 }}</button>
+                              }
+                            }
+                            <button
+                              class="page-btn"
+                              [disabled]="getGroupPage(group) === getGroupTotalPages(group) - 1"
+                              (click)="goToGroupPage(group, getGroupPage(group) + 1)"
+                            >Next</button>
+                            <button
+                              class="page-btn"
+                              [disabled]="getGroupPage(group) === getGroupTotalPages(group) - 1"
+                              (click)="goToGroupPage(group, getGroupTotalPages(group) - 1)"
+                            >Last</button>
+                          </nav>
+                        }
+                          }
+                        </div>
+                        } @else {
+                          <div class="group-entries">
                           @for (entry of group.entries; track entry.dbId) {
                             <div class="search-entry">
                               <div class="type-icon">
@@ -300,9 +401,9 @@ <h2>{{ group.typeName }} ({{ group.entriesCount }})</h2>
                                 } @else {
                                   <a class="entry-name"
                                     [routerLink]="getDetailLink(entry)"
-                                    [innerHTML]="entry.name">
+                                    [innerHTML]="entry.name || entry.referenceName">
                                   </a>
-                                  <span class="entry-id" [innerHTML]="entry.stId"></span>
+                                  <span class="entry-id" [innerHTML]="entry.stId || entry.id"></span>
                                 }
 
                               </div>
@@ -351,6 +452,7 @@ <h2>{{ group.typeName }} ({{ group.entriesCount }})</h2>
                             </div>
                            }
                         </div>
+                        }
                       }
                     </div>
                   </app-tile>
@@ -385,6 +487,25 @@ <h2>{{ group.typeName }} ({{ group.entriesCount }})</h2>
                             Reference: <a [href]="entry.referenceURL" target="_blank" rel="noopener"><span [innerHTML]="entry.referenceName"></span> ({{ entry.referenceIdentifier }})</a>
                           </div>
                         }
+                        @if (currentMode === 'reference' && entry.type === 'Protein' && entry.referenceIdentifier && getProteinFormCount(entry) > 1) {
+                          <button class="forms-toggle" (click)="toggleForms(entry)">
+                            <span class="material-symbols-rounded">{{ isFormsExpanded(entry) ? 'expand_less' : 'expand_more' }}</span>
+                            {{ getProteinFormCount(entry) }} modified form{{ getProteinFormCount(entry) === 1 ? '' : 's' }}
+                          </button>
+                          @if (isFormsExpanded(entry)) {
+                            <div class="protein-forms">
+                              @for (form of getProteinForms(entry); track form.dbId) {
+                                <div class="protein-form-entry">
+                                  <a class="form-name" [routerLink]="getDetailLink(form)" [innerHTML]="form.name"></a>
+                                  <span class="form-id">{{ form.id || form.stId }}</span>
+                                  @if (form.compartmentNames?.length) {
+                                    <span class="form-compartment">{{ form.compartmentNames.join(', ') }}</span>
+                                  }
+                                </div>
+                              }
+                            </div>
+                          }
+                        }
                       </div>
                     }
                   </div>
@@ -394,7 +515,44 @@ <h2>{{ group.typeName }} ({{ group.entriesCount }})</h2>
 
             <!-- Pagination -->
             @if (totalPages > 1) {
-              <nav class="pagination">
+              @if (currentMode === 'reference') {
+                <nav class="pagination">
+                    <button
+                      class="page-btn"
+                      [disabled]="currentPage === 0"
+                      (click)="goToPage(0)"
+                    >First</button>
+                    <button
+                      class="page-btn"
+                      [disabled]="currentPage === 0"
+                      (click)="goToPage(currentPage - 1)"
+                    >Prev</button>
+
+                    @for (p of getPageNumbers(); track $index) {
+                      @if (p === '...') {
+                        <span class="page-ellipsis">...</span>
+                      } @else {
+                        <button
+                          class="page-btn"
+                          [class.active]="p === currentPage"
+                          (click)="goToPage(+p)"
+                        >{{ +p + 1 }}</button>
+                      }
+                    }
+
+                    <button
+                      class="page-btn"
+                      [disabled]="currentPage === totalPages - 1"
+                      (click)="goToPage(currentPage + 1)"
+                    >Next</button>
+                    <button
+                      class="page-btn"
+                      [disabled]="currentPage === totalPages - 1"
+                      (click)="goToPage(totalPages - 1)"
+                    >Last</button>
+                  </nav>
+              } @else {
+                <nav class="pagination">
                 <button
                   class="page-btn"
                   [disabled]="currentPage === 0"
@@ -426,6 +584,7 @@ <h2>{{ group.typeName }} ({{ group.entriesCount }})</h2>
                 >Last</button>
               </nav>
             }
+            }
           }
         </div>
       </div>
@@ -435,23 +594,27 @@ <h1>Search Reactome</h1>
         <p>Enter a search term to find pathways, reactions, proteins, and more.</p>
 
         <div class="search-mode-tabs">
-          <button class="mode-tab" [class.active]="!advancedMode" (click)="advancedMode && toggleAdvancedMode()">
+          <button class="mode-tab" [class.active]="currentMode === 'simple'" (click)="currentMode = 'simple'">
             <span class="material-symbols-rounded">search</span>
             Simple Search
           </button>
-          <button class="mode-tab" [class.active]="advancedMode" (click)="!advancedMode && toggleAdvancedMode()">
+          <button class="mode-tab" [class.active]="currentMode === 'advanced'" (click)="currentMode = 'advanced'">
             <span class="material-symbols-rounded">tune</span>
             Advanced Search
           </button>
+          <button class="mode-tab" [class.active]="currentMode === 'reference'" (click)="currentMode = 'reference'">
+            <span class="material-symbols-rounded">menu_book</span>
+            Reference Search
+          </button>
         </div>
 
-        @if (advancedMode) {
+        @if (currentMode === 'advanced') {
           <div class="advanced-panel">
-            <app-search-bar [query]="query" (queryChange)="onQueryInput($event)" [advancedMode]="true" [filters]="true" [showSuggestions]="true"/>
+            <app-search-bar [query]="query" (queryChange)="onQueryInput($event)" [currentMode]="currentMode" [filters]="true" [showSuggestions]="true"/>
           </div>
         } @else {
           <div class="empty-search-bar">
-            <app-search-bar [query]="query" (queryChange)="onQueryInput($event)" [filters]="true" [showSuggestions]="true"/>
+            <app-search-bar [query]="query" (queryChange)="onQueryInput($event)" [currentMode]="currentMode" [filters]="true" [showSuggestions]="true"/>
           </div>
         }
       </div>
diff --git a/projects/website-angular/src/app/search/search.component.scss b/projects/website-angular/src/app/search/search.component.scss
index d86b058..e818232 100644
--- a/projects/website-angular/src/app/search/search.component.scss
+++ b/projects/website-angular/src/app/search/search.component.scss
@@ -241,6 +241,11 @@ $border-radius: 8px;
 
 .group-entries {
   margin-top: 16px;
+
+    &.loading {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 }
 
 .type-icon {
@@ -527,6 +532,84 @@ $border-radius: 8px;
   }
 }
 
+// Collapsible protein forms
+.forms-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-top: 6px;
+  padding: 2px 8px 2px 2px;
+  border: none;
+  background: none;
+  color: var(--on-surface-variant);
+  font-size: 0.8rem;
+  cursor: pointer;
+  border-radius: 4px;
+
+  .material-symbols-rounded {
+    font-size: 18px;
+  }
+
+  &:hover {
+    color: var(--primary);
+    background: rgba(0, 0, 0, 0.04);
+
+    :host-context(.dark) & {
+      background: rgba(255, 255, 255, 0.06);
+    }
+  }
+}
+
+.protein-forms {
+  margin-top: 4px;
+  margin-left: 16px;
+  padding-left: 12px;
+  border-left: 2px solid rgba(0, 0, 0, 0.1);
+  max-height: 400px;
+  overflow-y: auto;
+
+  :host-context(.dark) & {
+    border-left-color: rgba(255, 255, 255, 0.1);
+  }
+}
+
+.protein-form-entry {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 4px 0;
+  font-size: 0.85rem;
+}
+
+.form-name {
+  color: var(--primary);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.form-id {
+  font-size: 0.75rem;
+  color: var(--on-surface-variant);
+  font-family: monospace;
+}
+
+.form-compartment {
+  font-size: 0.75rem;
+  color: var(--on-surface-variant);
+  font-style: italic;
+}
+
+.protein-loading-msg {
+  padding: 12px 0;
+  color: var(--on-surface-variant);
+  font-size: 0.85rem;
+  font-style: italic;
+}
+
 .entry-info {
   flex: 1;
 }
@@ -1229,6 +1312,21 @@ $border-radius: 8px;
 
 
 // Pagination
+
+// Per-group pagination
+.group-pagination {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+
+  :host-context(.dark) & {
+    border-top-color: rgba(255, 255, 255, 0.06);
+  }
+}
+
 .pagination {
   display: flex;
   justify-content: center;
@@ -1268,6 +1366,13 @@ $border-radius: 8px;
   }
 }
 
+.page-ellipsis {
+  padding: 6px 4px;
+  color: var(--on-surface-variant);
+  font-size: 0.85rem;
+  user-select: none;
+}
+
 // Responsive
 @media (max-width: 1024px) {
   .search-layout {
diff --git a/projects/website-angular/src/app/search/search.component.ts b/projects/website-angular/src/app/search/search.component.ts
index 3ebcc39..283fa36 100644
--- a/projects/website-angular/src/app/search/search.component.ts
+++ b/projects/website-angular/src/app/search/search.component.ts
@@ -14,10 +14,10 @@ import {
   FacetResponse,
   SearchFilters,
   FacetCount,
+  ResultGroup,
 } from '../../services/search.service';
 import { DatePipe } from '@angular/common';
 import { MatIcon } from "@angular/material/icon";
-import { IconEntry } from '../../services/icon.service';
 
 @Component({
   selector: 'app-search',
@@ -63,8 +63,19 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
 
   collapsedFacets: Record<string, boolean> = {};
   collapsedGroups: Record<string, boolean> = {};
+  expandedForms: Record<string, boolean> = {};
+  groupPages: Record<string, number> = {};
+  groupPageSize = 10;
+  groupPageEntries: Record<string, SearchEntry[]> = {};
+  groupLoading: Record<string, boolean> = {};
 
-  advancedMode = false;
+  // Protein deduplication: all forms grouped by referenceIdentifier
+  proteinForms = new Map<string, SearchEntry[]>();
+  uniqueProteins: SearchEntry[] = [];
+  proteinTotalForms = 0;
+  proteinLoading = false;
+
+  currentMode: 'simple' | 'advanced' | 'reference' = "simple";
 
   private paramsSub!: Subscription;
 
@@ -89,10 +100,12 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
         keywords: toArray(params['keywords']),
       };
 
-      if (params['advanced'] === 'true' && !this.advancedMode) {
-        this.toggleAdvancedMode();
-      } else if (params['advanced'] !== 'true' && this.advancedMode) {
-        this.advancedMode = false;
+      if (params['advanced'] === 'true' && this.currentMode !== 'advanced') {
+        this.currentMode = 'advanced';
+      } else if (params['reference'] === 'true' && this.currentMode !== 'reference') {
+        this.currentMode = 'reference';
+      } else {
+        this.currentMode = 'simple';
       }
 
       if (this.query) {
@@ -231,10 +244,27 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
           );
           this.hasNoResults = ((results as SearchResult).numberOfMatches || 0) === 0;
           this.error = '';
+
+          // Reset per-group pagination state
+          this.groupPages = {};
+          this.groupPageEntries = {};
+          this.groupLoading = {};
+          this.expandedForms = {};
+
+          // If there's a Protein group, fetch ALL protein entries for deduplication
+          const proteinGroup = this.results.results.find(g => g.typeName === 'Protein');
+          if (proteinGroup && proteinGroup.entriesCount > 0) {
+            this.fetchAllProteins(proteinGroup.entriesCount);
+          } else {
+            this.proteinForms = new Map();
+            this.uniqueProteins = [];
+            this.proteinTotalForms = 0;
+          }
         }
         this.loading = false;
       },
       error: (err) => {
+        console.error('Search error:', err);
         this.error = 'An error occurred while searching. Please try again.';
         this.hasNoResults = false;
         this.results = null;
@@ -258,6 +288,74 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
     return of(null);
   }
 
+  private fetchAllProteins(totalCount: number): void {
+    this.proteinLoading = true;
+    this.proteinForms = new Map();
+    this.uniqueProteins = [];
+    this.proteinTotalForms = 0;
+
+    const batchSize = 500;
+    const proteinFilters = { ...this.filters, types: ['Protein'] };
+
+    const batchRequests: Observable<SearchResult | null>[] = [];
+    for (let offset = 0; offset < totalCount; offset += batchSize) {
+      const batchPage = Math.floor(offset / batchSize);
+      batchRequests.push(
+        this.searchService.search(this.query, proteinFilters, batchPage, batchSize).pipe(
+          catchError(() => of(null))
+        )
+      );
+    }
+
+    forkJoin(batchRequests).subscribe((results) => {
+      const allProteins: SearchEntry[] = [];
+      for (const result of results) {
+        if (!result?.results?.length) continue;
+        const group = result.results.find(g => g.typeName === 'Protein');
+        if (group) allProteins.push(...group.entries);
+      }
+
+      // Group by referenceIdentifier
+      const formsMap = new Map<string, SearchEntry[]>();
+      const representativeMap = new Map<string, SearchEntry>();
+
+      for (const entry of allProteins) {
+        const key = entry.referenceIdentifier || entry.id || entry.stId;
+        if (!formsMap.has(key)) {
+          formsMap.set(key, []);
+          representativeMap.set(key, entry);
+        }
+        formsMap.get(key)!.push(entry);
+      }
+
+      this.proteinForms = formsMap;
+      this.uniqueProteins = [...representativeMap.values()];
+      this.proteinTotalForms = allProteins.length;
+      this.proteinLoading = false;
+    });
+  }
+
+  toggleForms(entry: SearchEntry): void {
+    const key = entry.referenceIdentifier || entry.id || entry.stId;
+    this.expandedForms[key] = !this.expandedForms[key];
+  }
+
+  getProteinForms(entry: SearchEntry): SearchEntry[] {
+    const key = entry.referenceIdentifier || entry.id || entry.stId;
+    return this.proteinForms.get(key) || [];
+  }
+
+  getProteinFormCount(entry: SearchEntry): number {
+    return this.getProteinForms(entry).length;
+  }
+
+  isFormsExpanded(entry: SearchEntry): boolean {
+    const key = entry.referenceIdentifier || entry.id || entry.stId;
+    return !!this.expandedForms[key];
+  }
+
+
+
   getSpriteClass(entry: SearchEntry): string {
     const reactionSubtypes = new Set([
       'association',
@@ -316,9 +414,9 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
     this.collapsedGroups[group] = !this.collapsedGroups[group];
   }
 
-  toggleAdvancedMode(): void {
-    this.advancedMode = !this.advancedMode;
-  }
+  // toggleAdvancedMode(): void {
+  //   this.advancedMode = !this.advancedMode;
+  // }
 
   private filterDeletedEntries(entries: SearchEntry[]): SearchEntry[] {
     if (!entries?.length) return [];
@@ -363,6 +461,12 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   getDetailLink(entry: SearchEntry): string {
+    if (this.currentMode === 'reference') {
+      const id = entry.id || entry.stId;
+      if (entry.exactType === 'Interactor') return '/content/detail/interactor/' + id;
+      if (entry.exactType === 'Icon') return '/content/detail/icon/' + id;
+      return '/content/detail/' + id;
+    }
     //Remove HTML tags from entry.stId if present
     entry.stId = entry.stId?.replace(/<[^>]*>/g, '');
 
@@ -387,6 +491,83 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
     return pages;
   }
 
+    getReferencePageNumbers(): (number | '...')[] {
+    return this.buildPageNumbers(this.currentPage, this.totalPages);
+  }
+
+  private buildPageNumbers(current: number, total: number): (number | '...')[] {
+    if (total <= 7) {
+      return Array.from({ length: total }, (_, i) => i);
+    }
+
+    const pages: (number | '...')[] = [0];
+
+    if (current > 2) {
+      pages.push('...');
+    }
+
+    const start = Math.max(1, current - 1);
+    const end = Math.min(total - 2, current + 1);
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
+
+    if (current < total - 3) {
+      pages.push('...');
+    }
+
+    pages.push(total - 1);
+    return pages;
+  }
+
+    // Per-group pagination
+  getGroupPage(group: ResultGroup): number {
+    return this.groupPages[group.typeName] || 0;
+  }
+
+  getGroupTotalPages(group: ResultGroup): number {
+    if (group.typeName === 'Protein') {
+      return Math.ceil(this.uniqueProteins.length / this.groupPageSize) || 1;
+    }
+    return Math.ceil(group.entriesCount / this.groupPageSize);
+  }
+
+  getGroupPageEntries(group: ResultGroup): SearchEntry[] {
+    if (group.typeName === 'Protein') {
+      // While still loading all proteins, show nothing (loading message is displayed)
+      if (this.proteinLoading) return [];
+      const page = this.groupPages['Protein'] || 0;
+      const start = page * this.groupPageSize;
+      return this.uniqueProteins.slice(start, start + this.groupPageSize);
+    }
+    return this.groupPageEntries[group.typeName] || group.entries.slice(0, this.groupPageSize);
+  }
+
+  goToGroupPage(group: ResultGroup, page: number): void {
+    const total = this.getGroupTotalPages(group);
+    if (page < 0 || page >= total) return;
+    this.groupPages[group.typeName] = page;
+
+    // Protein group is paginated client-side — no server call needed
+    if (group.typeName === 'Protein') return;
+
+    this.groupLoading[group.typeName] = true;
+    this.searchService
+      .search(this.query, { ...this.filters, types: [group.typeName] }, page, this.groupPageSize)
+      .pipe(catchError(() => of(null)))
+      .subscribe((result) => {
+        this.groupLoading[group.typeName] = false;
+        if (!result?.results?.length) return;
+        this.groupPageEntries[group.typeName] = result.results[0].entries;
+      });
+  }
+
+  getGroupPageNumbers(group: ResultGroup): (number | '...')[] {
+    return this.buildPageNumbers(this.getGroupPage(group), this.getGroupTotalPages(group));
+  }
+
+
+
   submitContactForm(event: Event): void {
     event.preventDefault();
     event.stopPropagation();
diff --git a/projects/website-angular/src/services/search.service.ts b/projects/website-angular/src/services/search.service.ts
index 0c35f90..33bc195 100644
--- a/projects/website-angular/src/services/search.service.ts
+++ b/projects/website-angular/src/services/search.service.ts
@@ -5,6 +5,7 @@ import { Observable } from 'rxjs';
 export interface SearchEntry {
   dbId: number;
   stId: string;
+  id: string;
   name: string;
   type: string;
   exactType: string;

From 534b5e85c9714ff578965feabf2fc02ddbcaa7ff Mon Sep 17 00:00:00 2001
From: el-rabies <eleoraby@gmail.com>
Date: Wed, 8 Apr 2026 11:36:19 -0400
Subject: [PATCH 2/6] fix: Go to refrence search tab from empty search when
 option is selected

---
 projects/website-angular/src/app/search/search.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/website-angular/src/app/search/search.component.ts b/projects/website-angular/src/app/search/search.component.ts
index 283fa36..4202ea6 100644
--- a/projects/website-angular/src/app/search/search.component.ts
+++ b/projects/website-angular/src/app/search/search.component.ts
@@ -100,9 +100,9 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
         keywords: toArray(params['keywords']),
       };
 
-      if (params['advanced'] === 'true' && this.currentMode !== 'advanced') {
+      if (params['advanced'] === 'true') {
         this.currentMode = 'advanced';
-      } else if (params['reference'] === 'true' && this.currentMode !== 'reference') {
+      } else if (params['reference'] === 'true') {
         this.currentMode = 'reference';
       } else {
         this.currentMode = 'simple';

From 8b1bb1cfcfc89e41ab11be9fce6f161978177434 Mon Sep 17 00:00:00 2001
From: el-rabies <eleoraby@gmail.com>
Date: Wed, 8 Apr 2026 11:42:29 -0400
Subject: [PATCH 3/6] fix: group pagination

---
 .../website-angular/src/app/search/search.component.html    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/website-angular/src/app/search/search.component.html b/projects/website-angular/src/app/search/search.component.html
index e0c9ce7..97dce53 100644
--- a/projects/website-angular/src/app/search/search.component.html
+++ b/projects/website-angular/src/app/search/search.component.html
@@ -340,7 +340,9 @@ <h2>{{ group.typeName }} ({{ group.entriesCount }})</h2>
                                 }
                               }
                             </div>
-                            @if (getGroupTotalPages(group) > 1 && !(group.typeName === 'Protein' && proteinLoading)) {
+                          }
+                        </div>
+                        @if (getGroupTotalPages(group) > 1 && !(group.typeName === 'Protein' && proteinLoading)) {
                           <nav class="group-pagination">
                             <button
                               class="page-btn"
@@ -375,8 +377,6 @@ <h2>{{ group.typeName }} ({{ group.entriesCount }})</h2>
                             >Last</button>
                           </nav>
                         }
-                          }
-                        </div>
                         } @else {
                           <div class="group-entries">
                           @for (entry of group.entries; track entry.dbId) {

From eaad8fed3ff43ee0f3599d55cd0feaa271ce44d1 Mon Sep 17 00:00:00 2001
From: el-rabies <eleoraby@gmail.com>
Date: Wed, 8 Apr 2026 11:51:57 -0400
Subject: [PATCH 4/6] fix: Refrence search styles and search result info

---
 .../src/app/search/search.component.html      | 53 +++++++++++++++++--
 1 file changed, 48 insertions(+), 5 deletions(-)

diff --git a/projects/website-angular/src/app/search/search.component.html b/projects/website-angular/src/app/search/search.component.html
index 97dce53..dd18e0e 100644
--- a/projects/website-angular/src/app/search/search.component.html
+++ b/projects/website-angular/src/app/search/search.component.html
@@ -296,10 +296,37 @@ <h2>{{ group.typeName }} ({{ group.entriesCount }})</h2>
                           }
                           @for (entry of getGroupPageEntries(group); track entry.dbId) {
                             <div class="search-entry">
-                              <div class="entry-header">
-                                <a class="entry-name" [routerLink]="getDetailLink(entry)" [innerHTML]="entry.referenceName || entry.name"></a>
-                                <span class="entry-id">{{ entry.id || entry.stId }}</span>
+                              <div class="type-icon">
+                                <i [class]="getSpriteClass(entry)" title="Icon"></i>
+                              </div>
+                              <div class="entry-info">
+                                <div class="entry-header">
+                                @if (entry.deleted) {
+                                  <mat-icon class="deleted-icon">delete</mat-icon>
+                                  <span class="deleted" [innerHTML]="entry.stId"></span>
+                                  @if (entry.replacementStIds?.length) {
+                                    ⇒
+                                    <a
+                                      [routerLink]="['/content/detail', entry.replacementStIds[0]]"
+                                      title="Go to replacement">
+                                      {{ entry.replacementStIds[0] }}
+                                    </a>
+                                  }
+
+                                } @else {
+                                  <a class="entry-name"
+                                    [routerLink]="getDetailLink(entry)"
+                                    [innerHTML]="entry.name || entry.referenceName">
+                                  </a>
+                                  <span class="entry-id" [innerHTML]="entry.stId || entry.id"></span>
+                                }
                               </div>
+                              @if (entry.deleted && entry.date) {
+                                <div class="deleted-date">
+                                  <b>Deleted on</b>
+                                  {{ entry.date | date:'MMM d, y, h:mm:ss a' }}
+                                </div>
+                              }
                               @if (entry.species?.length) {
                                 <div class="entry-species">
                                   @for (sp of entry.species; track sp; let last = $last) {
@@ -312,12 +339,22 @@ <h2>{{ group.typeName }} ({{ group.entriesCount }})</h2>
                                   Compartments: {{ entry.compartmentNames.join(', ') }}
                                 </div>
                               }
+                              @if (entry.iconCuratorName) {
+                                <div class="entry-compartments">Curator: <a  [href]="'https://orcid.org/' + entry.iconCuratorOrcidId" target="_blank" rel="noopener">
+                                  {{ entry.iconCuratorName }}
+                                </a></div>
+                              }
+                              @if (entry.iconDesignerName) {
+                                <div class="entry-compartments">Designer: <a  [href]="entry.iconDesignerUrl" target="_blank" rel="noopener">
+                                  {{ entry.iconDesignerName }}
+                                </a></div>
+                              }
                               @if (entry.summation) {
                                 <p class="entry-summation" [innerHTML]="entry.summation"></p>
                               }
-                              @if (entry.referenceName) {
+                              @if (entry.referenceName || entry.databaseName) {
                                 <div class="entry-reference">
-                                  Reference: <a [href]="entry.referenceURL" target="_blank" rel="noopener"><span [innerHTML]="entry.referenceName"></span> ({{ entry.referenceIdentifier }})</a>
+                                  Reference: <a [href]="entry.referenceURL" target="_blank" rel="noopener"><span [innerHTML]="entry.referenceName ?? entry.databaseName"></span> ({{ entry.referenceIdentifier }})</a>
                                 </div>
                               }
                               @if (entry.type === 'Protein' && entry.referenceIdentifier && getProteinFormCount(entry) > 1) {
@@ -339,6 +376,12 @@ <h2>{{ group.typeName }} ({{ group.entriesCount }})</h2>
                                   </div>
                                 }
                               }
+                              </div>
+                              @if (entry.exactType == "Icon") {
+                              <div class="icon-preview">
+                                <img [src]="iconSvgUrl(entry)" [alt]="entry.stId" loading="lazy" (error)="onImgError($event)" width="100" height="auto"/>
+                              </div>
+                            }
                             </div>
                           }
                         </div>

From 9f70a92a264d213cd6e542ef280fae765ff90317 Mon Sep 17 00:00:00 2001
From: el-rabies <eleoraby@gmail.com>
Date: Wed, 8 Apr 2026 11:54:26 -0400
Subject: [PATCH 5/6] chore: removed ungroup option from reference search

---
 projects/website-angular/src/app/search/search.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/website-angular/src/app/search/search.component.html b/projects/website-angular/src/app/search/search.component.html
index dd18e0e..c89f26f 100644
--- a/projects/website-angular/src/app/search/search.component.html
+++ b/projects/website-angular/src/app/search/search.component.html
@@ -40,7 +40,7 @@
       }
 
       <!-- Result count + group toggle -->
-      @if (results && !loading) {
+      @if (results && !loading && currentMode !== "reference") {
         <div class="results-toolbar">
           <p class="result-count">{{ results.numberOfMatches }} results found for "{{ query }}"</p>
           @if (!hasNoResults) {

From 412bbec374bbeba45952f4424af4eccdc450b4bc Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 8 Apr 2026 15:58:55 +0000
Subject: [PATCH 6/6] chore: Apply Prettier formatting

---
 .../src/app/search/search.component.scss      | 277 +++++++++---------
 .../src/app/search/search.component.ts        | 230 +++++++++------
 .../src/services/search.service.ts            |  35 ++-
 3 files changed, 308 insertions(+), 234 deletions(-)

diff --git a/projects/website-angular/src/app/search/search.component.scss b/projects/website-angular/src/app/search/search.component.scss
index e818232..dae843e 100644
--- a/projects/website-angular/src/app/search/search.component.scss
+++ b/projects/website-angular/src/app/search/search.component.scss
@@ -86,7 +86,6 @@ $border-radius: 8px;
   color: var(--error);
 }
 
-
 // Facet sidebar
 .facet-sidebar {
   width: 260px;
@@ -173,7 +172,7 @@ $border-radius: 8px;
     }
   }
 
-  input[type='checkbox'] {
+  input[type="checkbox"] {
     flex-shrink: 0;
     accent-color: var(--primary);
   }
@@ -242,7 +241,7 @@ $border-radius: 8px;
 .group-entries {
   margin-top: 16px;
 
-    &.loading {
+  &.loading {
     opacity: 0.5;
     pointer-events: none;
   }
@@ -255,270 +254,269 @@ $border-radius: 8px;
 
 /** START - Sprite base configuration **/
 .sprite {
-    background: url('/assets/spritesheet.png') no-repeat;
-    display: inline-block;
+  background: url("/assets/spritesheet.png") no-repeat;
+  display: inline-block;
 }
 
 .sprite-resize {
-    zoom: .75;
-    transform: scale(.75);
-    -moz-transform: scale(.75);
+  zoom: 0.75;
+  transform: scale(0.75);
+  -moz-transform: scale(0.75);
 }
 
 .sprite-resize-small {
-    zoom: .6;
-    transform: scale(.6);
-    -moz-transform: scale(.6);
+  zoom: 0.6;
+  transform: scale(0.6);
+  -moz-transform: scale(0.6);
 }
 
 .sprite-position {
-    vertical-align: middle;
-    padding: 2px;
+  vertical-align: middle;
+  padding: 2px;
 }
 /** END - Sprite base configuration **/
 
 /** PASTE NEW CSS HERE **/
 .sprite-BlackBoxEvent {
-    width: 16px;
-    height: 16px;
-    background-position: -5px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -5px -5px;
 }
 
 .sprite-CandidateSet {
-    width: 16px;
-    height: 16px;
-    background-position: -31px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -31px -5px;
 }
 
 .sprite-Cell {
-    width: 16px;
-    height: 16px;
-    background-position: -57px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -57px -5px;
 }
 
 .sprite-CellDevelopmentStep {
-    width: 16px;
-    height: 16px;
-    background-position: -83px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -83px -5px;
 }
 
 .sprite-CellLineagePath {
-    width: 16px;
-    height: 16px;
-    background-position: -109px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -109px -5px;
 }
 
 .sprite-ChemicalDrug {
-    width: 16px;
-    height: 16px;
-    background-position: -135px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -135px -5px;
 }
 
 .sprite-Complex {
-    width: 16px;
-    height: 16px;
-    background-position: -161px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -161px -5px;
 }
 
 .sprite-ConceptualEvent {
-    width: 16px;
-    height: 16px;
-    background-position: -187px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -187px -5px;
 }
 
 .sprite-DefinedSet {
-    width: 16px;
-    height: 16px;
-    background-position: -213px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -213px -5px;
 }
 
 .sprite-Depolymerization {
-    width: 16px;
-    height: 16px;
-    background-position: -239px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -239px -5px;
 }
 
 .sprite-EntitySet {
-    width: 16px;
-    height: 16px;
-    background-position: -265px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -265px -5px;
 }
 
 .sprite-EntityWithAccessionedSequence {
-    width: 16px;
-    height: 16px;
-    background-position: -291px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -291px -5px;
 }
 
 .sprite-EquivalentEventSet {
-    width: 16px;
-    height: 16px;
-    background-position: -317px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -317px -5px;
 }
 
 .sprite-FailedReaction {
-    width: 16px;
-    height: 16px;
-    background-position: -343px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -343px -5px;
 }
 
 .sprite-GenomeEncodedEntity {
-    width: 16px;
-    height: 16px;
-    background-position: -369px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -369px -5px;
 }
 
 .sprite-Icon {
-    width: 16px;
-    height: 16px;
-    background-position: -395px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -395px -5px;
 }
 
 .sprite-Interactor {
-    width: 16px;
-    height: 16px;
-    background-position: -421px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -421px -5px;
 }
 
 .sprite-NegativeRegulation {
-    width: 16px;
-    height: 16px;
-    background-position: -447px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -447px -5px;
 }
 
 .sprite-OpenSet {
-    width: 16px;
-    height: 16px;
-    background-position: -473px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -473px -5px;
 }
 
 .sprite-OtherEntity {
-    width: 16px;
-    height: 16px;
-    background-position: -499px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -499px -5px;
 }
 
 .sprite-Pathway {
-    width: 16px;
-    height: 16px;
-    background-position: -525px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -525px -5px;
 }
 
 .sprite-Person {
-    width: 16px;
-    height: 16px;
-    background-position: -551px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -551px -5px;
 }
 
 .sprite-Polymer {
-    width: 16px;
-    height: 16px;
-    background-position: -577px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -577px -5px;
 }
 
 .sprite-Polymerisation {
-    width: 16px;
-    height: 16px;
-    background-position: -603px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -603px -5px;
 }
 
 .sprite-PositiveRegulation {
-    width: 16px;
-    height: 16px;
-    background-position: -629px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -629px -5px;
 }
 
 .sprite-ProteinDrug {
-    width: 16px;
-    height: 16px;
-    background-position: -655px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -655px -5px;
 }
 
 .sprite-Reaction {
-    width: 16px;
-    height: 16px;
-    background-position: -681px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -681px -5px;
 }
 
 .sprite-ReferenceDNASequence {
-    width: 16px;
-    height: 16px;
-    background-position: -707px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -707px -5px;
 }
 
 .sprite-ReferenceGeneProduct {
-    width: 16px;
-    height: 16px;
-    background-position: -733px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -733px -5px;
 }
 
 .sprite-ReferenceGroup {
-    width: 16px;
-    height: 16px;
-    background-position: -759px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -759px -5px;
 }
 
 .sprite-ReferenceIsoform {
-    width: 16px;
-    height: 16px;
-    background-position: -785px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -785px -5px;
 }
 
 .sprite-ReferenceMolecule {
-    width: 16px;
-    height: 16px;
-    background-position: -811px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -811px -5px;
 }
 
 .sprite-ReferenceRNASequence {
-    width: 16px;
-    height: 16px;
-    background-position: -837px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -837px -5px;
 }
 
 .sprite-Requirement {
-    width: 16px;
-    height: 16px;
-    background-position: -863px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -863px -5px;
 }
 
 .sprite-SimpleEntity {
-    width: 16px;
-    height: 16px;
-    background-position: -889px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -889px -5px;
 }
 
 .sprite-TopLevelPathway {
-    width: 16px;
-    height: 16px;
-    background-position: -915px -5px;
+  width: 16px;
+  height: 16px;
+  background-position: -915px -5px;
 }
 
 .sprite-deleted {
-    width: 20px;
-    height: 20px;
-    background-position: -941px -5px;
+  width: 20px;
+  height: 20px;
+  background-position: -941px -5px;
 }
 
 .sprite-isDisease {
-    width: 10px;
-    height: 16px;
-    background-position: -971px -5px;
+  width: 10px;
+  height: 16px;
+  background-position: -971px -5px;
 }
 
 .sprite-minus {
-    width: 21px;
-    height: 20px;
-    background-position: -991px -5px;
+  width: 21px;
+  height: 20px;
+  background-position: -991px -5px;
 }
 
 .sprite-plus {
-    width: 20px;
-    height: 20px;
-    background-position: -1022px -5px;
+  width: 20px;
+  height: 20px;
+  background-position: -1022px -5px;
 }
 
-
 .search-entry {
   display: flex;
   flex-direction: row;
@@ -747,7 +745,7 @@ $border-radius: 8px;
   }
 
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     bottom: -2px;
     left: 0;
@@ -827,7 +825,7 @@ $border-radius: 8px;
   padding: 12px 16px;
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: $border-radius;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
   font-size: 0.9rem;
   line-height: 1.5;
   color: var(--on-surface);
@@ -1183,7 +1181,7 @@ $border-radius: 8px;
   textarea.favth-form-control {
     resize: vertical;
     min-height: 150px;
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
   }
 
   .checkbox {
@@ -1198,7 +1196,7 @@ $border-radius: 8px;
       font-weight: normal;
       color: var(--on-surface);
 
-      input[type='checkbox'] {
+      input[type="checkbox"] {
         cursor: pointer;
         accent-color: var(--primary);
 
@@ -1310,7 +1308,6 @@ $border-radius: 8px;
   }
 }
 
-
 // Pagination
 
 // Per-group pagination
@@ -1400,4 +1397,4 @@ $border-radius: 8px;
   .advanced-facet-grid {
     grid-template-columns: 1fr;
   }
-}
\ No newline at end of file
+}
diff --git a/projects/website-angular/src/app/search/search.component.ts b/projects/website-angular/src/app/search/search.component.ts
index 4202ea6..40c2c0b 100644
--- a/projects/website-angular/src/app/search/search.component.ts
+++ b/projects/website-angular/src/app/search/search.component.ts
@@ -1,4 +1,13 @@
-import { Component, inject, OnInit, OnDestroy, AfterViewInit, ViewChild, ElementRef, NgZone } from '@angular/core';
+import {
+  Component,
+  inject,
+  OnInit,
+  OnDestroy,
+  AfterViewInit,
+  ViewChild,
+  ElementRef,
+  NgZone,
+} from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { Subscription, forkJoin, catchError, Observable } from 'rxjs';
@@ -17,12 +26,20 @@ import {
   ResultGroup,
 } from '../../services/search.service';
 import { DatePipe } from '@angular/common';
-import { MatIcon } from "@angular/material/icon";
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
   selector: 'app-search',
   standalone: true,
-  imports: [PageLayoutComponent, TileComponent, RouterLink, SearchBarComponent, FormsModule, DatePipe, MatIcon],
+  imports: [
+    PageLayoutComponent,
+    TileComponent,
+    RouterLink,
+    SearchBarComponent,
+    FormsModule,
+    DatePipe,
+    MatIcon,
+  ],
   templateUrl: './search.component.html',
   styleUrl: './search.component.scss',
 })
@@ -40,11 +57,11 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
 
   query = '';
   searchSubmitted = false;
-    onQueryInput(newQuery: string): void {
-      this.query = newQuery;
-      this.getSuggestions(newQuery);
-      this.searchSubmitted = false;
-    }
+  onQueryInput(newQuery: string): void {
+    this.query = newQuery;
+    this.getSuggestions(newQuery);
+    this.searchSubmitted = false;
+  }
   suggestedTerms: string[] = [];
   results: SearchResult | null = null;
   facets: FacetResponse | null = null;
@@ -75,7 +92,7 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
   proteinTotalForms = 0;
   proteinLoading = false;
 
-  currentMode: 'simple' | 'advanced' | 'reference' = "simple";
+  currentMode: 'simple' | 'advanced' | 'reference' = 'simple';
 
   private paramsSub!: Subscription;
 
@@ -85,8 +102,13 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
       let q = params['q'] || '';
       if (!q) {
         const pathSegments = this.route.snapshot.url;
-        if (pathSegments.length === 2 && pathSegments[1].path.startsWith('query=')) {
-          q = decodeURIComponent(pathSegments[1].path.substring('query='.length));
+        if (
+          pathSegments.length === 2 &&
+          pathSegments[1].path.startsWith('query=')
+        ) {
+          q = decodeURIComponent(
+            pathSegments[1].path.substring('query='.length)
+          );
         }
       }
 
@@ -125,19 +147,19 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   private getSuggestions(query: string): void {
-      if (!query) {
-        this.suggestedTerms = [];
-        return;
-      }
-      this.searchService.getSpellCheckTerms(query).subscribe({
-        next: (terms) => {
-          this.suggestedTerms = terms || [];
-        },
-        error: () => {
-          this.suggestedTerms = [];
-        },
-      });
+    if (!query) {
+      this.suggestedTerms = [];
+      return;
     }
+    this.searchService.getSpellCheckTerms(query).subscribe({
+      next: (terms) => {
+        this.suggestedTerms = terms || [];
+      },
+      error: () => {
+        this.suggestedTerms = [];
+      },
+    });
+  }
 
   private renderCaptchaWhenReady(): void {
     // Wait until the captcha container is available in the DOM
@@ -170,19 +192,28 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
     const hcaptcha = (window as any).hcaptcha;
     if (!hcaptcha || !this.captchaContainer?.nativeElement) return;
 
-    this.captchaWidgetId = hcaptcha.render(this.captchaContainer.nativeElement, {
-      sitekey: 'a7e45eb1-ba7a-47a7-95da-5c67d948dd4f',
-      theme: 'light',
-      callback: (token: string) => {
-        this.ngZone.run(() => { this.captchaToken = token; });
-      },
-      'expired-callback': () => {
-        this.ngZone.run(() => { this.captchaToken = null; });
-      },
-      'error-callback': () => {
-        this.ngZone.run(() => { this.captchaToken = null; });
-      },
-    });
+    this.captchaWidgetId = hcaptcha.render(
+      this.captchaContainer.nativeElement,
+      {
+        sitekey: 'a7e45eb1-ba7a-47a7-95da-5c67d948dd4f',
+        theme: 'light',
+        callback: (token: string) => {
+          this.ngZone.run(() => {
+            this.captchaToken = token;
+          });
+        },
+        'expired-callback': () => {
+          this.ngZone.run(() => {
+            this.captchaToken = null;
+          });
+        },
+        'error-callback': () => {
+          this.ngZone.run(() => {
+            this.captchaToken = null;
+          });
+        },
+      }
+    );
   }
 
   private resetCaptcha(): void {
@@ -199,12 +230,12 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
     this.hasNoResults = false;
 
     forkJoin({
-      results: this.searchService.search(this.query, this.filters, this.currentPage, this.pageSize).pipe(
-        catchError((err) => this.handleSearchError(err))
-      ),
-      facets: this.searchService.getFacets(this.query, this.filters).pipe(
-        catchError(() => of(null))
-      ),
+      results: this.searchService
+        .search(this.query, this.filters, this.currentPage, this.pageSize)
+        .pipe(catchError((err) => this.handleSearchError(err))),
+      facets: this.searchService
+        .getFacets(this.query, this.filters)
+        .pipe(catchError(() => of(null))),
     }).subscribe({
       next: ({ results, facets }) => {
         // If either API call failed, show error
@@ -216,20 +247,23 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
         } else {
           // Successful API response - check if we have results
           const res = results as SearchResult;
-          const hasNonDeleted = res.results?.some(group =>
-            group.entries.some(e => !e.deleted)
+          const hasNonDeleted = res.results?.some((group) =>
+            group.entries.some((e) => !e.deleted)
           );
-          res.results = res.results?.map(group => {
-            const entries = hasNonDeleted
-              ? group.entries.filter(e => !e.deleted)
-              : group.entries;
-
-            return {
-              ...group,
-              entries,
-              entriesCount: entries.length
-            };
-          }).filter(group => group.entries.length > 0) || [];
+          res.results =
+            res.results
+              ?.map((group) => {
+                const entries = hasNonDeleted
+                  ? group.entries.filter((e) => !e.deleted)
+                  : group.entries;
+
+                return {
+                  ...group,
+                  entries,
+                  entriesCount: entries.length,
+                };
+              })
+              .filter((group) => group.entries.length > 0) || [];
           res.numberOfMatches = res.results.reduce(
             (sum, g) => sum + g.entries.length,
             0
@@ -237,12 +271,13 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
           this.results = res;
           this.facets = facets;
           this.totalPages = this.totalPages = Math.max(
-            ...(results.results || []).map(group =>
+            ...(results.results || []).map((group) =>
               Math.ceil((group.entriesCount || 0) / this.pageSize)
             ),
             0
           );
-          this.hasNoResults = ((results as SearchResult).numberOfMatches || 0) === 0;
+          this.hasNoResults =
+            ((results as SearchResult).numberOfMatches || 0) === 0;
           this.error = '';
 
           // Reset per-group pagination state
@@ -252,7 +287,9 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
           this.expandedForms = {};
 
           // If there's a Protein group, fetch ALL protein entries for deduplication
-          const proteinGroup = this.results.results.find(g => g.typeName === 'Protein');
+          const proteinGroup = this.results.results.find(
+            (g) => g.typeName === 'Protein'
+          );
           if (proteinGroup && proteinGroup.entriesCount > 0) {
             this.fetchAllProteins(proteinGroup.entriesCount);
           } else {
@@ -276,7 +313,10 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
 
   private handleSearchError(err: any): Observable<SearchResult | null> {
     // Check if this is a 404 with "No entries found" message
-    if (err.status === 404 && err.error?.messages?.[0]?.includes('No entries found')) {
+    if (
+      err.status === 404 &&
+      err.error?.messages?.[0]?.includes('No entries found')
+    ) {
       // Return empty results instead of throwing error
       return of({
         results: [],
@@ -301,9 +341,9 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
     for (let offset = 0; offset < totalCount; offset += batchSize) {
       const batchPage = Math.floor(offset / batchSize);
       batchRequests.push(
-        this.searchService.search(this.query, proteinFilters, batchPage, batchSize).pipe(
-          catchError(() => of(null))
-        )
+        this.searchService
+          .search(this.query, proteinFilters, batchPage, batchSize)
+          .pipe(catchError(() => of(null)))
       );
     }
 
@@ -311,7 +351,7 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
       const allProteins: SearchEntry[] = [];
       for (const result of results) {
         if (!result?.results?.length) continue;
-        const group = result.results.find(g => g.typeName === 'Protein');
+        const group = result.results.find((g) => g.typeName === 'Protein');
         if (group) allProteins.push(...group.entries);
       }
 
@@ -354,8 +394,6 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
     return !!this.expandedForms[key];
   }
 
-
-
   getSpriteClass(entry: SearchEntry): string {
     const reactionSubtypes = new Set([
       'association',
@@ -365,21 +403,25 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
       'transition',
       'uncertain',
       'depolymerisation',
-      'polymerisation'
+      'polymerisation',
     ]);
 
     const rawType = (entry.exactType || entry.type || '').trim();
-    const spriteType = reactionSubtypes.has(rawType.toLowerCase()) ? 'Reaction' : (rawType || 'Pathway');
+    const spriteType = reactionSubtypes.has(rawType.toLowerCase())
+      ? 'Reaction'
+      : rawType || 'Pathway';
     return `sprite sprite-resize sprite-${spriteType}`;
   }
 
   iconSvgUrl(entry: SearchEntry): string {
-      return `https://dev.reactome.org/icon/${entry.stId}.svg`;
+    return `https://dev.reactome.org/icon/${entry.stId}.svg`;
   }
 
   get allEntries(): SearchEntry[] {
     if (!this.results?.results) return [];
-    return this.results.results.flatMap(g => this.filterDeletedEntries(g.entries));
+    return this.results.results.flatMap((g) =>
+      this.filterDeletedEntries(g.entries)
+    );
   }
 
   toggleFacet(category: string, value: string): void {
@@ -393,7 +435,10 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
       current.push(value);
     }
 
-    this.updateQueryParams({ [category]: current.length ? current : null, page: null });
+    this.updateQueryParams({
+      [category]: current.length ? current : null,
+      page: null,
+    });
   }
 
   isFacetSelected(category: string, value: string): boolean {
@@ -421,7 +466,7 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
   private filterDeletedEntries(entries: SearchEntry[]): SearchEntry[] {
     if (!entries?.length) return [];
 
-    const nonDeleted = entries.filter(e => !e.deleted);
+    const nonDeleted = entries.filter((e) => !e.deleted);
     if (nonDeleted.length > 0) {
       return nonDeleted;
     }
@@ -429,7 +474,9 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
     return entries;
   }
 
-  private updateQueryParams(params: Record<string, string | string[] | null>): void {
+  private updateQueryParams(
+    params: Record<string, string | string[] | null>
+  ): void {
     this.router.navigate([], {
       relativeTo: this.route,
       queryParams: params,
@@ -437,7 +484,9 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
     });
   }
 
-  getFacetItems(facet: { selected: FacetCount[]; available: FacetCount[] } | undefined): FacetCount[] {
+  getFacetItems(
+    facet: { selected: FacetCount[]; available: FacetCount[] } | undefined
+  ): FacetCount[] {
     if (!facet) return [];
     return [...(facet.selected || []), ...(facet.available || [])];
   }
@@ -463,14 +512,16 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
   getDetailLink(entry: SearchEntry): string {
     if (this.currentMode === 'reference') {
       const id = entry.id || entry.stId;
-      if (entry.exactType === 'Interactor') return '/content/detail/interactor/' + id;
+      if (entry.exactType === 'Interactor')
+        return '/content/detail/interactor/' + id;
       if (entry.exactType === 'Icon') return '/content/detail/icon/' + id;
       return '/content/detail/' + id;
     }
     //Remove HTML tags from entry.stId if present
     entry.stId = entry.stId?.replace(/<[^>]*>/g, '');
 
-    if (entry.exactType === 'Interactor') return '/content/detail/interactor/' + entry.stId;
+    if (entry.exactType === 'Interactor')
+      return '/content/detail/interactor/' + entry.stId;
     if (entry.exactType === 'Icon') return '/content/detail/icon/' + entry.stId;
     return '/content/detail/' + entry.stId;
   }
@@ -491,7 +542,7 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
     return pages;
   }
 
-    getReferencePageNumbers(): (number | '...')[] {
+  getReferencePageNumbers(): (number | '...')[] {
     return this.buildPageNumbers(this.currentPage, this.totalPages);
   }
 
@@ -520,7 +571,7 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
     return pages;
   }
 
-    // Per-group pagination
+  // Per-group pagination
   getGroupPage(group: ResultGroup): number {
     return this.groupPages[group.typeName] || 0;
   }
@@ -540,7 +591,10 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
       const start = page * this.groupPageSize;
       return this.uniqueProteins.slice(start, start + this.groupPageSize);
     }
-    return this.groupPageEntries[group.typeName] || group.entries.slice(0, this.groupPageSize);
+    return (
+      this.groupPageEntries[group.typeName] ||
+      group.entries.slice(0, this.groupPageSize)
+    );
   }
 
   goToGroupPage(group: ResultGroup, page: number): void {
@@ -553,7 +607,12 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
 
     this.groupLoading[group.typeName] = true;
     this.searchService
-      .search(this.query, { ...this.filters, types: [group.typeName] }, page, this.groupPageSize)
+      .search(
+        this.query,
+        { ...this.filters, types: [group.typeName] },
+        page,
+        this.groupPageSize
+      )
       .pipe(catchError(() => of(null)))
       .subscribe((result) => {
         this.groupLoading[group.typeName] = false;
@@ -563,11 +622,12 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   getGroupPageNumbers(group: ResultGroup): (number | '...')[] {
-    return this.buildPageNumbers(this.getGroupPage(group), this.getGroupTotalPages(group));
+    return this.buildPageNumbers(
+      this.getGroupPage(group),
+      this.getGroupTotalPages(group)
+    );
   }
 
-
-
   submitContactForm(event: Event): void {
     event.preventDefault();
     event.stopPropagation();
@@ -580,7 +640,8 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
     const formData = new FormData(form);
     formData.set('h-captcha-response', this.captchaToken);
 
-    this.http.post('/content/contact', formData).subscribe({ //TODO: Post to the actual route
+    this.http.post('/content/contact', formData).subscribe({
+      //TODO: Post to the actual route
       next: () => {
         this.formSubmitted = true;
         this.resetCaptcha();
@@ -594,8 +655,7 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 }
 
-
 function toArray(value: string | string[] | undefined): string[] {
   if (!value) return [];
   return Array.isArray(value) ? value : [value];
-}
\ No newline at end of file
+}
diff --git a/projects/website-angular/src/services/search.service.ts b/projects/website-angular/src/services/search.service.ts
index 33bc195..8e0a3ad 100644
--- a/projects/website-angular/src/services/search.service.ts
+++ b/projects/website-angular/src/services/search.service.ts
@@ -66,14 +66,24 @@ export class SearchService {
   private http = inject(HttpClient);
   private baseUrl = 'https://reactome.org/ContentService/search'; //TODO: alter in prod or make environment variable
 
-  search(query: string, filters: SearchFilters = {}, page: number = 0, rows: number = 30): Observable<SearchResult> {
+  search(
+    query: string,
+    filters: SearchFilters = {},
+    page: number = 0,
+    rows: number = 30
+  ): Observable<SearchResult> {
     const params = this.buildParams(query, filters, page, rows);
     return this.http.get<SearchResult>(`${this.baseUrl}/query`, { params });
   }
 
-  getFacets(query: string, filters: SearchFilters = {}): Observable<FacetResponse> {
+  getFacets(
+    query: string,
+    filters: SearchFilters = {}
+  ): Observable<FacetResponse> {
     const params = this.buildParams(query, filters);
-    return this.http.get<FacetResponse>(`${this.baseUrl}/facet_query`, { params });
+    return this.http.get<FacetResponse>(`${this.baseUrl}/facet_query`, {
+      params,
+    });
   }
 
   getAllFacets(): Observable<FacetResponse> {
@@ -81,17 +91,24 @@ export class SearchService {
   }
 
   getSuggestedTerms(query: string): Observable<string[]> {
-    return this.http.get<string[]>(`${this.baseUrl}/suggest?query=${encodeURIComponent(query)}`);
+    return this.http.get<string[]>(
+      `${this.baseUrl}/suggest?query=${encodeURIComponent(query)}`
+    );
   }
 
   getSpellCheckTerms(query: string): Observable<string[]> {
-    return this.http.get<string[]>(`${this.baseUrl}/spellcheck?query=${encodeURIComponent(query)}`);
+    return this.http.get<string[]>(
+      `${this.baseUrl}/spellcheck?query=${encodeURIComponent(query)}`
+    );
   }
 
-  private buildParams(query: string, filters: SearchFilters, page?: number, rows?: number): HttpParams {
-    let params = new HttpParams()
-      .set('query', query)
-      .set('cluster', 'true');
+  private buildParams(
+    query: string,
+    filters: SearchFilters,
+    page?: number,
+    rows?: number
+  ): HttpParams {
+    let params = new HttpParams().set('query', query).set('cluster', 'true');
 
     if (filters.species?.length) {
       for (const s of filters.species) {