Merge pull request #1337 from sagely1/AG-1539-surface-uniprot-links-i…

…n-gene-hero AG-1539: adding uniprotkb_accessions links
Sage-Bionetworks · Nov 28, 2024 · 4b67ad9 · 4b67ad9
2 parents 9ef59c6 + a2ff72b
commit 4b67ad9
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 9 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
@@ -14,11 +14,11 @@ <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>
+          <p class="aliases">
             {{ getBiodomains() }}
           </p>
         </div>
@@ -29,22 +29,28 @@ <h4 class="gene-hero-pharos-heading">Pharos Class</h4>
         <div class="gene-hero-aliases">
           <h4 class="gene-hero-aliases-heading">Also known as</h4>
           <ng-container *ngIf="getEnsemblUrl() !== ''">
-            <p>
+            <p class="aliases">
               <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() === ''">
+          <p *ngIf="getEnsemblUrl() === ''" class="aliases">
             <span *ngIf="getEnsemblUrl() === ''">{{ gene.ensembl_gene_id }}</span>
-          </ng-container>
-          <p *ngIf="gene.ensembl_info.ensembl_possible_replacements.length > 0">
+          </p>
+          <p *ngIf="gene.ensembl_info.ensembl_possible_replacements.length > 0" class="aliases">
             <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">
+            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">
+            {{ 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
@@ -64,6 +64,10 @@ hr {
   margin-bottom: 15px;
 }
 
+.aliases {
+  margin: 0 0 0 10px;
+}
+
 .possible-replacements {
   margin-bottom: 15px;
 }
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
@@ -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
@@ -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/app/testing/gene-mocks.ts b/src/app/testing/gene-mocks.ts
@@ -28,6 +28,7 @@ export const geneMock1: Gene = {
     'Moesin (for membrane-organizing extension spike protein) is a member of the ERM family which includes ezrin and radixin. ERM proteins appear to function as cross-linkers between plasma membranes and actin-based cytoskeletons. Moesin is localized to filopodia and other membranous protrusions that are important for cell-cell recognition and signaling and for cell movement. [provided by RefSeq, Jul 2008].',
   hgnc_symbol: 'MSN',
   alias: ['HEL70', 'IMD50'],
+  uniprotkb_accessions: [],
   is_igap: false,
   is_eqtl: false,
   is_any_rna_changed_in_ad_brain: true,
@@ -2986,6 +2987,7 @@ export const geneMock2: Gene = {
     'PLEC1b',
     'PLTN',
   ],
+  uniprotkb_accessions: [],
   is_igap: false,
   is_eqtl: true,
   is_any_rna_changed_in_ad_brain: true,
@@ -3164,6 +3166,7 @@ export const geneMock3: Gene = {
     'p59Hck',
     'p61Hck',
   ],
+  uniprotkb_accessions: [],
   is_igap: false,
   is_eqtl: true,
   is_any_rna_changed_in_ad_brain: true,
@@ -3372,6 +3375,7 @@ export const nominatedGeneMock1: Gene = {
   summary: '',
   hgnc_symbol: 'MSN',
   alias: [],
+  uniprotkb_accessions: [],
   is_igap: false,
   is_eqtl: false,
   is_any_rna_changed_in_ad_brain: false,
@@ -3469,6 +3473,7 @@ export const noHGNCgeneMock: Gene = {
   summary: '',
   hgnc_symbol: '',
   alias: [],
+  uniprotkb_accessions: [],
   is_igap: false,
   is_eqtl: false,
   is_any_rna_changed_in_ad_brain: false,

diff --git 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 },