feat / fix: Added missing fields to search results

Author: el-rabies

projects/website-angular/src/app/community/icon-lib/icon-lib.component.ts

@@ -49,7 +49,7 @@ interface ParsedReference {
 
 @Component({
   selector: 'app-icon-lib',
-  imports: [PageLayoutComponent, RouterLink],
+  imports: [PageLayoutComponent],
   templateUrl: './icon-lib.component.html',
   styleUrl: './icon-lib.component.scss'
 })

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

@@ -280,7 +280,11 @@ <h2>{{ group.typeName }} ({{ group.entriesCount }})</h2>
                         <div class="group-entries">
                           @for (entry of group.entries; track entry.dbId) {
                             <div class="search-entry">
-                              <div class="entry-header">
+                              <div class="type-icon">
+                                TODO: Add type icons
+                              </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>
@@ -298,7 +302,7 @@ <h2>{{ group.typeName }} ({{ group.entriesCount }})</h2>
                                     [routerLink]="getDetailLink(entry)"
                                     [innerHTML]="entry.name">
                                   </a>
-                                  <span class="entry-id">{{ entry.stId }}</span>
+                                  <span class="entry-id" [innerHTML]="entry.stId"></span>
                                 }
 
                               </div>
@@ -320,16 +324,33 @@ <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>
                               }
+                              <button (click)="printEntry(entry)">O</button>
+                              </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>
                       }
                     </div>
@@ -343,12 +364,12 @@ <h2>{{ group.typeName }} ({{ group.entriesCount }})</h2>
                       <div class="search-entry">
                         <div class="entry-header">
                           <a class="entry-name" [routerLink]="getDetailLink(entry)" [innerHTML]="entry.name"></a>
-                          <span class="entry-id">{{ entry.stId }}</span>
+                          <span class="entry-id" [innerHTML]="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>
+                              <span class="species-tag" [innerHTML]="sp"></span>
                             }
                           </div>
                         }

projects/website-angular/src/app/search/search.component.scss

@@ -243,7 +243,15 @@ $border-radius: 8px;
   margin-top: 16px;
 }
 
+.type-icon {
+  width: 10px;
+}
+
 .search-entry {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
   padding: 12px 0;
   border-top: 1px solid rgba(0, 0, 0, 0.08);
 
@@ -252,6 +260,10 @@ $border-radius: 8px;
   }
 }
 
+.entry-info {
+  flex: 1;
+}
+
 .entry-header {
   display: flex;
   align-items: baseline;

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

@@ -17,6 +17,7 @@ import {
 } 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',
@@ -257,6 +258,14 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
     return of(null);
   }
 
+  printEntry(entry: SearchEntry): void {
+    console.log('Entry details:', entry);
+  }
+
+  iconSvgUrl(entry: SearchEntry): string {
+      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));
@@ -341,6 +350,9 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   getDetailLink(entry: SearchEntry): string {
+    //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 === 'Icon') return '/content/detail/icon/' + entry.stId;
     return '/content/detail/' + entry.stId;