From d78f439c0f9d468d8ba5cc9f799c389823ff8a81 Mon Sep 17 00:00:00 2001
From: sagely1 <114952739+sagely1@users.noreply.github.com>
Date: Wed, 27 Nov 2024 13:39:19 -0800
Subject: [PATCH] adding uniprotkb_accessions links

---
 .../gene-hero/gene-hero.component.html        | 28 +++++++++++--------
 .../gene-hero/gene-hero.component.scss        |  4 +++
 .../gene-hero/gene-hero.component.ts          |  9 +++++-
 src/app/models/genes.ts                       |  1 +
 src/server/models/genes.ts                    |  1 +
 5 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/app/features/genes/components/gene-hero/gene-hero.component.html b/src/app/features/genes/components/gene-hero/gene-hero.component.html
index 78fef743..ed60ff50 100644
--- a/src/app/features/genes/components/gene-hero/gene-hero.component.html
+++ b/src/app/features/genes/components/gene-hero/gene-hero.component.html
@@ -14,33 +14,39 @@ <h2 class="gene-hero-name">
       <p class="gene-hero-provider">
         {{ getSummary() }}
       </p>
-      <ng-container *ngIf="gene.bio_domains || getAlias() || getEnsemblUrl() !== ''">
+      <ng-container *ngIf="gene.bio_domains || getAliases() || getEnsemblUrl() !== ''">
         <hr />
         <div *ngIf="gene.bio_domains" class="gene-hero-biodomains">
           <h4 class="gene-hero-biodomains-heading">Biological Domains</h4>
           <p>
-            {{ getBiodomains() }}
+            &nbsp; {{ getBiodomains() }}
           </p>
         </div>
         <div class="gene-hero-aliases">
           <h4 class="gene-hero-aliases-heading">Also known as</h4>
           <ng-container *ngIf="getEnsemblUrl() !== ''">
-            <p>
-              <a [href]="getEnsemblUrl()" target="_blank">{{ gene.ensembl_gene_id }}</a>
+            <p class="aliases">
+              &nbsp;  <a [href]="getEnsemblUrl()" target="_blank">{{ gene.ensembl_gene_id }}</a>
               <span *ngIf="gene.ensembl_info.ensembl_release">
                 (Ensembl Release {{ gene.ensembl_info.ensembl_release }})
               </span>
             </p>
           </ng-container>
-          <ng-container *ngIf="getEnsemblUrl() === ''">
-            <span *ngIf="getEnsemblUrl() === ''">{{ gene.ensembl_gene_id }}</span>
-          </ng-container>
-          <p *ngIf="gene.ensembl_info.ensembl_possible_replacements.length > 0">
-            <a [href]="getPossibleReplacementsURL()">Possible replacement value<span *ngIf="gene.ensembl_info.ensembl_possible_replacements.length > 1">s</span></a>:
+          <p *ngIf="getEnsemblUrl() === ''">
+            &nbsp; <span *ngIf="getEnsemblUrl() === ''">{{ gene.ensembl_gene_id }}</span>
+          </p>
+          <p *ngIf="gene.ensembl_info.ensembl_possible_replacements.length > 0" class="aliases">
+            &nbsp; <a [href]="getPossibleReplacementsURL()">Possible replacement value<span *ngIf="gene.ensembl_info.ensembl_possible_replacements.length > 1">s</span></a>:
             {{ gene.ensembl_info.ensembl_possible_replacements.join(', ')}}
           </p>
-          <p *ngIf="getAlias() !== ''">
-            {{ getAlias() }}
+          <p *ngIf="gene.uniprotkb_accessions" class="aliases">
+            &nbsp; UNIPROTKB 
+            <ng-container *ngFor="let accession of gene.uniprotkb_accessions; let isLast = last" class="aliases">
+              <a [href]="getUniProtKBLink(accession)" target="_blank">{{ accession }}</a><span *ngIf="!isLast">, </span>
+            </ng-container>
+          </p>
+          <p *ngIf="gene.alias.length > 0" class="aliases">
+            &nbsp; {{ getAliases() }}
           </p>
         </div>
       </ng-container>
diff --git a/src/app/features/genes/components/gene-hero/gene-hero.component.scss b/src/app/features/genes/components/gene-hero/gene-hero.component.scss
index f2c8c354..0532e164 100644
--- a/src/app/features/genes/components/gene-hero/gene-hero.component.scss
+++ b/src/app/features/genes/components/gene-hero/gene-hero.component.scss
@@ -54,6 +54,10 @@ hr {
   margin-bottom: 15px;
 }
 
+.aliases {
+  margin-bottom: 0;
+}
+
 .possible-replacements {
   margin-bottom: 15px;
 }
\ No newline at end of file
diff --git a/src/app/features/genes/components/gene-hero/gene-hero.component.ts b/src/app/features/genes/components/gene-hero/gene-hero.component.ts
index dd47d840..8d56fabb 100644
--- a/src/app/features/genes/components/gene-hero/gene-hero.component.ts
+++ b/src/app/features/genes/components/gene-hero/gene-hero.component.ts
@@ -85,13 +85,20 @@ export class GeneHeroComponent {
     }
   }
 
-  getAlias(): string {
+  getAliases(): string {
     if (this.gene?.alias && this.gene.alias.length > 0) {
       return this.gene.alias.join(', ');
     }
     return '';
   }
 
+  getUniProtKBLink(uniProtId: string) {
+    if (uniProtId) {
+      return `https://www.uniprot.org/uniprotkb/${uniProtId}/entry`;
+    }
+    return '';
+  }
+
   getBiodomains(): string {
     if (!this.gene || !this.gene.bio_domains)
       return '';
diff --git a/src/app/models/genes.ts b/src/app/models/genes.ts
index 6f8e5939..f153a8a5 100644
--- a/src/app/models/genes.ts
+++ b/src/app/models/genes.ts
@@ -55,6 +55,7 @@ export interface Gene {
   summary: string;
   hgnc_symbol: string;
   alias: string[];
+  uniprotkb_accessions: string[];
   is_igap: boolean;
   is_eqtl: boolean;
   is_any_rna_changed_in_ad_brain: boolean;
diff --git a/src/server/models/genes.ts b/src/server/models/genes.ts
index a4fe82b2..aea8b9e3 100644
--- a/src/server/models/genes.ts
+++ b/src/server/models/genes.ts
@@ -67,6 +67,7 @@ const GeneSchema = new Schema<Gene>(
     summary: { type: String, required: true },
     hgnc_symbol: { type: String, required: true },
     alias: [{ type: String, required: true }],
+    uniprotkb_accessions: [{ type: String, required: true }],
     is_igap: { type: Boolean, required: true },
     is_eqtl: { type: Boolean, required: true },
     is_any_rna_changed_in_ad_brain: { type: Boolean, required: true },