From 55d1e222554ef5f5ec8ffcaa6992dce0bf1fcb86 Mon Sep 17 00:00:00 2001
From: sagely1 <114952739+sagely1@users.noreply.github.com>
Date: Fri, 3 Jan 2025 23:49:18 +0000
Subject: [PATCH 1/8] fix loading animation for gct, cards in details page,
 shortened sha

---
 apps/agora/app/src/app/app.component.html     |  1 -
 apps/agora/app/src/app/app.component.ts       |  8 +-
 .../lib/gene-comparison-tool.component.html   | 49 ++++++-----
 .../lib/gene-comparison-tool.component.scss   | 19 +++++
 .../src/lib/gene-comparison-tool.component.ts | 46 +++++++----
 .../download-dom-image.component.html         |  4 +-
 .../download-dom-image.component.scss         |  1 +
 .../download-dom-image.component.ts           | 23 +++++-
 .../gene-resources.component.html             | 42 ++++------
 .../gene-resources.component.scss             | 82 +++++--------------
 libs/agora/services/src/lib/error.service.ts  |  4 +-
 libs/agora/services/src/lib/github.service.ts | 14 ++--
 libs/agora/services/src/lib/helper.service.ts |  4 +-
 libs/agora/shared/src/index.ts                |  1 +
 .../loading-icon/loading-icon.component.ts    |  3 +-
 .../loading-overlay.component.html            |  5 ++
 .../loading-overlay.component.scss            |  0
 .../loading-overlay.component.spec.ts         |  0
 .../loading-overlay.component.ts              |  4 +-
 libs/agora/ui/src/index.ts                    |  1 -
 20 files changed, 164 insertions(+), 147 deletions(-)
 rename libs/agora/{ui/src/lib/components => shared/src/lib}/loading-overlay/loading-overlay.component.html (72%)
 rename libs/agora/{ui/src/lib/components => shared/src/lib}/loading-overlay/loading-overlay.component.scss (100%)
 rename libs/agora/{ui/src/lib/components => shared/src/lib}/loading-overlay/loading-overlay.component.spec.ts (100%)
 rename libs/agora/{ui/src/lib/components => shared/src/lib}/loading-overlay/loading-overlay.component.ts (82%)

diff --git a/apps/agora/app/src/app/app.component.html b/apps/agora/app/src/app/app.component.html
index ede758841c..3331936a4c 100644
--- a/apps/agora/app/src/app/app.component.html
+++ b/apps/agora/app/src/app/app.component.html
@@ -6,4 +6,3 @@
   <agora-footer></agora-footer>
 </div>
 <p-toast class="global-toast" position="bottom-center"></p-toast>
-<agora-loading-overlay [isGlobal]="true"></agora-loading-overlay>
diff --git a/apps/agora/app/src/app/app.component.ts b/apps/agora/app/src/app/app.component.ts
index e0d484a7fb..55b5f8961c 100644
--- a/apps/agora/app/src/app/app.component.ts
+++ b/apps/agora/app/src/app/app.component.ts
@@ -1,18 +1,14 @@
 import { Component, inject, OnInit } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
 import { ActivatedRoute, NavigationEnd, Router, RouterModule } from '@angular/router';
-import {
-  FooterComponent,
-  HeaderComponent,
-  LoadingOverlayComponent,
-} from '@sagebionetworks/agora/ui';
+import { FooterComponent, HeaderComponent } from '@sagebionetworks/agora/ui';
 import { filter } from 'rxjs';
 import { ToastModule } from 'primeng/toast';
 import { MessageService } from 'primeng/api';
 
 @Component({
   standalone: true,
-  imports: [RouterModule, HeaderComponent, FooterComponent, LoadingOverlayComponent, ToastModule],
+  imports: [RouterModule, HeaderComponent, FooterComponent, ToastModule],
   providers: [MessageService],
   selector: 'app-root',
   templateUrl: './app.component.html',
diff --git a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.html b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.html
index 6a3ddd629a..888dabfc31 100644
--- a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.html
+++ b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.html
@@ -1,3 +1,8 @@
+@if (isLoading) {
+  <div id="loading">
+    <agora-loading-icon></agora-loading-icon>
+  </div>
+}
 <div #gct class="gct" (window:resize)="onResize()">
   <div class="gct-inner">
     <div class="gct-header">
@@ -53,7 +58,7 @@ <h1 class="gct-heading h2">Gene Comparison Tool</h1>
 
     <div class="gct-body">
       <div class="gct-body-inner">
-        <div class="gct-controls">
+        <div class="gct-controls" [hidden]="isLoading">
           <div class="gct-controls-inner">
             <div class="gct-controls-left">
               <div class="gene-label">DISPLAYED GENES</div>
@@ -479,6 +484,8 @@ <h1 class="gct-heading h2">Gene Comparison Tool</h1>
               breakpoint="0"
               (sortFunction)="sortCallback($event)"
               [customSort]="true"
+              [loading]="isLoading"
+              loadingIcon=""
             >
               <ng-template pTemplate="emptymessage" let-gene>
                 <div class="no-results">No results found...</div>
@@ -615,7 +622,7 @@ <h1 class="gct-heading h2">Gene Comparison Tool</h1>
               </ng-template>
             </p-table>
 
-            <div class="gct-help-links">
+            <div class="gct-help-links" [hidden]="isLoading">
               <div class="gct-help-links-inner">
                 <div>
                   <a class="gct-help-link" (click)="legendPanel.toggle()">Legend</a>
@@ -635,24 +642,24 @@ <h1 class="gct-heading h2">Gene Comparison Tool</h1>
         </div>
       </div>
     </div>
-
-    <agora-gene-comparison-tool-details-panel
-      #detailsPanel
-      (onShowLegend)="legendPanel.toggle()"
-      (onNavigateToConsistencyOfChange)="navigateToConsistencyOfChange($event)"
-    ></agora-gene-comparison-tool-details-panel>
-    <agora-gene-comparison-tool-score-panel #scorePanel></agora-gene-comparison-tool-score-panel>
-    <agora-gene-comparison-tool-how-to-panel #howToPanel></agora-gene-comparison-tool-how-to-panel>
-    <agora-gene-comparison-tool-legend-panel
-      #legendPanel
-      (howToClick)="legendPanel.toggle(); howToPanel.toggle()"
-    ></agora-gene-comparison-tool-legend-panel>
-    <agora-gene-comparison-tool-pinned-genes-modal
-      #pinnedGenesModal
-      (onChange)="onPinnedGenesModalChange($event)"
-      [pinnedGenes]="pinnedItems"
-      [pendingPinnedGenes]="pendingPinnedItems"
-      [maxPinnedGenes]="maxPinnedGenes"
-    ></agora-gene-comparison-tool-pinned-genes-modal>
   </div>
+
+  <agora-gene-comparison-tool-details-panel
+    #detailsPanel
+    (onShowLegend)="legendPanel.toggle()"
+    (onNavigateToConsistencyOfChange)="navigateToConsistencyOfChange($event)"
+  ></agora-gene-comparison-tool-details-panel>
+  <agora-gene-comparison-tool-score-panel #scorePanel></agora-gene-comparison-tool-score-panel>
+  <agora-gene-comparison-tool-how-to-panel #howToPanel></agora-gene-comparison-tool-how-to-panel>
+  <agora-gene-comparison-tool-legend-panel
+    #legendPanel
+    (howToClick)="legendPanel.toggle(); howToPanel.toggle()"
+  ></agora-gene-comparison-tool-legend-panel>
+  <agora-gene-comparison-tool-pinned-genes-modal
+    #pinnedGenesModal
+    (onChange)="onPinnedGenesModalChange($event)"
+    [pinnedGenes]="pinnedItems"
+    [pendingPinnedGenes]="pendingPinnedItems"
+    [maxPinnedGenes]="maxPinnedGenes"
+  ></agora-gene-comparison-tool-pinned-genes-modal>
 </div>
diff --git a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.scss b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.scss
index aec2741bc0..cf6c867f6f 100644
--- a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.scss
+++ b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.scss
@@ -3,6 +3,25 @@
 @import 'libs/agora/styles/src/lib/variables';
 @import 'libs/agora/styles/src/lib/mixins';
 
+#loading {
+  position: absolute;
+  inset: calc(var(--header-height)) 0 0;
+  background: rgb(255 255 255 / 100%);
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(100vh - var(--footer-height) - var(--header-height));
+}
+
+.loading-icon-size {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(100vh - var(--footer-height) - var(--header-height) - 20px);
+  font-size: 50px !important;
+}
+
 .gct-tooltip-filter {
   max-width: 350px;
 
diff --git a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts
index ca61b947f4..9a739fa07f 100644
--- a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts
+++ b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts
@@ -1,5 +1,13 @@
 import { CommonModule } from '@angular/common';
-import { AfterViewInit, Component, inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  inject,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import {
   DistributionService,
@@ -25,19 +33,6 @@ import { combineLatest, Subscription } from 'rxjs';
 import * as variables from './gene-comparison-tool.variables';
 import * as helpers from './gene-comparison-tool.helpers';
 
-// import {
-//   GeneComparisonToolScorePanelComponent as ScorePanelComponent,
-//   GeneComparisonToolDetailsPanelComponent as DetailsPanelComponent,
-//   GeneComparisonToolFilterPanelComponent as FilterPanelComponent,
-//   GeneComparisonToolPinnedGenesModalComponent as PinnedGenesModalComponent,
-//   GeneComparisonToolFilterListComponent,
-//   GeneComparisonToolFilterPanelComponent,
-//   GeneComparisonToolDetailsPanelComponent,
-//   GeneComparisonToolScorePanelComponent,
-//   GeneComparisonToolHowToPanelComponent,
-//   GeneComparisonToolLegendPanelComponent,
-//   GeneComparisonToolPinnedGenesModalComponent,
-// } from './components';
 import { GeneComparisonToolScorePanelComponent as ScorePanelComponent } from './components/gene-comparison-tool-score-panel/gene-comparison-tool-score-panel.component';
 import { GeneComparisonToolDetailsPanelComponent as DetailsPanelComponent } from './components/gene-comparison-tool-details-panel/gene-comparison-tool-details-panel.component';
 import { GeneComparisonToolFilterPanelComponent as FilterPanelComponent } from './components/gene-comparison-tool-filter-panel/gene-comparison-tool-filter-panel.component';
@@ -56,7 +51,7 @@ import { GeneComparisonToolHowToPanelComponent } from './components/gene-compari
 import { GeneComparisonToolLegendPanelComponent } from './components/gene-comparison-tool-legend-panel/gene-comparison-tool-legend-panel.component';
 import { GeneComparisonToolFilterListComponent } from './components/gene-comparison-tool-filter-list/gene-comparison-tool-filter-list.component';
 import { OverlayPanelLinkComponent } from '@sagebionetworks/agora/genes';
-import { SvgIconComponent } from '@sagebionetworks/agora/shared';
+import { LoadingIconComponent, SvgIconComponent } from '@sagebionetworks/agora/shared';
 
 @Component({
   selector: 'agora-gene-comparison-tool',
@@ -79,10 +74,12 @@ import { SvgIconComponent } from '@sagebionetworks/agora/shared';
     GeneComparisonToolDetailsPanelComponent,
     GeneComparisonToolFilterPanelComponent,
     GeneComparisonToolPinnedGenesModalComponent,
+    LoadingIconComponent,
   ],
   providers: [GenesService, DistributionService, HelperService, MessageService, FilterService],
   templateUrl: './gene-comparison-tool.component.html',
   styleUrls: ['./gene-comparison-tool.component.scss'],
+  encapsulation: ViewEncapsulation.None,
 })
 export class GeneComparisonToolComponent implements OnInit, AfterViewInit, OnDestroy {
   router = inject(Router);
@@ -93,6 +90,8 @@ export class GeneComparisonToolComponent implements OnInit, AfterViewInit, OnDes
   messageService = inject(MessageService);
   filterService = inject(FilterService);
 
+  isLoading = true;
+
   /* Genes ----------------------------------------------------------------- */
   genes: GCTGene[] = [];
 
@@ -204,7 +203,7 @@ export class GeneComparisonToolComponent implements OnInit, AfterViewInit, OnDes
   ngAfterViewInit() {
     setTimeout(() => {
       this.updateColumnWidth();
-    }, 1);
+    }, 50);
   }
 
   ngOnDestroy() {
@@ -254,7 +253,9 @@ export class GeneComparisonToolComponent implements OnInit, AfterViewInit, OnDes
   }
 
   loadGenes() {
-    this.helperService.setLoading(true);
+    // this.helperService.setLoading(true);
+    this.isLoading = true;
+    // this.genesTable.showLoader = true;
     this.genes = [];
 
     const genesApi$ = this.geneService.getComparisonGenes(this.category, this.subCategory);
@@ -262,13 +263,16 @@ export class GeneComparisonToolComponent implements OnInit, AfterViewInit, OnDes
 
     combineLatest([genesApi$, distributionApi$]).subscribe(([genesResult, distributionResult]) => {
       if (genesResult.items) {
+        console.log('# of items', genesResult.items.length);
         this.initData(genesResult.items);
         this.sortTable(this.headerTable);
         this.refresh();
 
         this.scoresDistribution = distributionResult.overall_scores;
 
-        this.helperService.setLoading(false);
+        this.isLoading = false;
+        // console.log('calling setLoading false');
+        // this.helperService.setLoading(false);
       }
     });
   }
@@ -1291,8 +1295,14 @@ export class GeneComparisonToolComponent implements OnInit, AfterViewInit, OnDes
 
   updateColumnWidth() {
     const count = this.columns.length < 5 ? 5 : this.columns.length;
+    console.log('count is: ', count);
+
     const width = this.headerTable?.containerViewChild?.nativeElement?.offsetWidth || 0;
+    console.log('ht', this.headerTable?.containerViewChild?.nativeElement?.offsetWidth);
+    console.log('width is: ', width);
+
     this.columnWidth = Math.ceil((width - 300) / count) + 'px';
+    console.log('column width is: ', this.columnWidth);
   }
 
   onResize() {
diff --git a/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.html b/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.html
index 7753dab5a9..da793bf809 100644
--- a/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.html
+++ b/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.html
@@ -1,5 +1,5 @@
 <button type="button" class="btn btn-rounded btn-primary" (click)="op.toggle($event)">
-  <i class="fa-solid fa-download"></i>
+  <fa-icon [icon]="downloadIcon"></fa-icon>
 </button>
 <p-overlayPanel
   #op
@@ -26,7 +26,7 @@
         class="btn-rounded btn-primary"
         (click)="download()"
       >
-        <i *ngIf="isLoading" class="fas fa-spinner fa-spin"></i>
+        <fa-icon *ngIf="isLoading" [icon]="spinnerIcon" animation="spin"></fa-icon>
       </button>
       <div *ngIf="error" class="download-dom-image-error">{{ error }}</div>
     </div>
diff --git a/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.scss b/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.scss
index a32f45d182..2863d66ebc 100644
--- a/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.scss
+++ b/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.scss
@@ -29,6 +29,7 @@
 
   .p-button {
     width: 100%;
+    height: 100%;
 
     i {
       position: absolute;
diff --git a/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.ts b/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.ts
index dd04db462d..1d481edbe1 100644
--- a/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.ts
+++ b/libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.ts
@@ -7,6 +7,9 @@ import { saveAs } from 'file-saver';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { ButtonModule } from 'primeng/button';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faDownload, faSpinner } from '@fortawesome/free-solid-svg-icons';
 
 interface Type {
   value: string;
@@ -16,7 +19,14 @@ interface Type {
 @Component({
   selector: 'agora-download-dom-image',
   standalone: true,
-  imports: [CommonModule, FormsModule, OverlayPanelModule, RadioButtonModule],
+  imports: [
+    CommonModule,
+    FormsModule,
+    OverlayPanelModule,
+    RadioButtonModule,
+    ButtonModule,
+    FontAwesomeModule,
+  ],
   templateUrl: './download-dom-image.component.html',
   styleUrls: ['./download-dom-image.component.scss'],
   encapsulation: ViewEncapsulation.None,
@@ -26,6 +36,9 @@ export class DownloadDomImageComponent {
   @Input() heading = 'Download this plot as:';
   @Input() filename = 'agora';
 
+  downloadIcon = faDownload;
+  spinnerIcon = faSpinner;
+
   selectedType = '.png';
   types: Type[] = [
     {
@@ -53,8 +66,14 @@ export class DownloadDomImageComponent {
     this.error = '';
     this.isLoading = true;
 
+    // width and height need to be specified
+    // known issue: https://github.com/1904labs/dom-to-image-more/issues/198
     domtoimage
-      .toBlob(this.target, { bgcolor: '#fff' })
+      .toBlob(this.target, {
+        bgcolor: '#fff',
+        width: this.target.offsetWidth,
+        height: this.target.offsetHeight,
+      })
       .then((blob: any) => {
         saveAs(blob, this.filename + this.selectedType);
         this.isLoading = false;
diff --git a/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.html b/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.html
index 803d38d641..aa52e909e9 100644
--- a/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.html
+++ b/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.html
@@ -9,11 +9,11 @@ <h2 id="target-enabling-resources-header">Target Enabling Resources</h2>
             {{ gene.hgnc_symbol || gene.ensembl_gene_id }} that are currently available, under
             development, or planned.
           </p>
-          <div class="row tab-row last-row">
-            <div id="target-enabling-resources-card1" class="col-md-3 col-sm-8 col-8 header-title">
+          <div class="row">
+            <div id="target-enabling-resources-card1" class="card card-title">
               Target Enabling Resources
             </div>
-            <div class="col-md-3 col-sm-4 col-4 header-link text-center">
+            <div class="card card-link">
               <a
                 id="target-enabling-resources-url"
                 class="link no-bold"
@@ -22,20 +22,17 @@ <h2 id="target-enabling-resources-header">Target Enabling Resources</h2>
                 >View Available Resources</a
               >
             </div>
-            <div class="col-md-6 col-sm-12 col-12 header-description">
+            <div class="card card-description">
               View the openly available TREAT-AD resources for experimental validation of
               {{ gene.hgnc_symbol || gene.ensembl_gene_id }} in the AD Knowledge Portal.
             </div>
           </div>
           @if (gene.is_tep) {
-            <div class="row tab-row last-row">
-              <div
-                id="target-enabling-resources-card2"
-                class="col-md-3 col-sm-8 col-8 header-title"
-              >
+            <div class="row">
+              <div id="target-enabling-resources-card2" class="card card-title">
                 Target Portfolio
               </div>
-              <div class="col-md-3 col-sm-4 col-4 header-link text-center">
+              <div class="card card-link">
                 <a
                   class="link no-bold"
                   href="https://treatad.org/data-tools/target-dashboard"
@@ -44,21 +41,18 @@ <h2 id="target-enabling-resources-header">Target Enabling Resources</h2>
                   >View Resource Status</a
                 >
               </div>
-              <div class="col-md-6 col-sm-12 col-12 header-description">
+              <div class="card card-description">
                 View the status of TEP resource development on the TREAT-AD Target Portfolio and
                 Progress Dashboard.
               </div>
             </div>
           }
           @if (gene.is_adi) {
-            <div class="row tab-row last-row">
-              <div
-                id="target-enabling-resources-card3"
-                class="col-md-3 col-sm-8 col-8 header-title"
-              >
+            <div class="row">
+              <div id="target-enabling-resources-card3" class="card card-title">
                 AD Informer Set
               </div>
-              <div class="col-md-3 col-sm-4 col-4 header-link text-center">
+              <div class="card card-link">
                 <a
                   class="link no-bold"
                   href="https://treatad.org/data-tools/ad-informer-set"
@@ -67,7 +61,7 @@ <h2 id="target-enabling-resources-header">Target Enabling Resources</h2>
                   >View AD Informer Set</a
                 >
               </div>
-              <div class="col-md-6 col-sm-12 col-12 header-description">
+              <div class="card card-description">
                 View information about the development and distribution of the AD Informer Set.
               </div>
             </div>
@@ -84,14 +78,12 @@ <h2 id="target-enabling-resources-header">Target Enabling Resources</h2>
       <div class="container-sm">
         <h2>Additional Resources</h2>
         <p>These external sites provide additional useful information for exploring AD targets.</p>
-        <div *ngFor="let r of additionalResources; let i = index" class="row tab-row last-row">
-          <div class="col-md-3 col-sm-8 col-8 header-title">{{ r.title }}</div>
-          <div class="col-md-3 col-sm-4 col-4 header-link text-center">
-            <a class="additional-resource-links link no-bold" href="{{ r.link }}" target="_blank">{{
-              r.linkText
-            }}</a>
+        <div *ngFor="let r of additionalResources; let i = index" class="row">
+          <div class="card card-title">{{ r.title }}</div>
+          <div class="card card-link">
+            <a class="link no-bold" href="{{ r.link }}" target="_blank">{{ r.linkText }}</a>
           </div>
-          <div class="col-md-6 col-sm-12 col-12 header-description">
+          <div class="card card-description">
             {{ r.description }}
           </div>
         </div>
diff --git a/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.scss b/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.scss
index 4ed250f6db..c4e5052302 100644
--- a/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.scss
+++ b/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.scss
@@ -1,73 +1,35 @@
 @import 'libs/agora/styles/src/lib/variables';
 @import 'libs/agora/styles/src/lib/mixins';
 
-.tab-row {
-  padding: var(--spacing-xl) 144px var(--spacing-xl) var(--spacing-xl);
+.row {
+  display: flex;
+  flex-wrap: nowrap;
   border: 1px solid var(--color-gray-300);
   margin: 0 0 var(--spacing-lg) 0;
+}
 
-  .last-row {
-    margin-top: 15px;
-  }
-
-  a {
-    display: flex;
-    vertical-align: middle;
-    margin-top: auto;
-    margin-bottom: auto;
-    padding: 0;
-  }
-
-  .header-title {
-    line-height: var(--font-size-xxl);
-    font-size: var(--font-size-lg);
-  }
-
-  .header-title,
-  .header-link,
-  .header-description {
-    @include respond-to('ex-small') {
-      min-height: 43px;
-      margin-top: 25.5px !important;
-    }
-
-    @include respond-to('small') {
-      min-height: 43px;
-      margin-top: 25.5px !important;
-    }
-
-    @include respond-to('medium') {
-      margin-top: auto !important;
-      min-height: 0;
-    }
-
-    @include respond-to('large') {
-      margin-top: auto !important;
-      min-height: 0;
-    }
-
-    @include respond-to('ex-large') {
-      margin-top: auto !important;
-      min-height: 0;
-    }
-  }
+.card {
+  display: flex;
+  align-items: center;
+  margin: 50px;
+}
 
-  .header-link {
-    text-align: center;
+.card-title,
+.card-link {
+  flex: 1 1 25%; /* Fixed 25% width */
+}
 
-    a {
-      display: block;
-    }
-  }
+.card-description {
+  flex: 1 1 50%; /* Fixed 50% width */
+}
 
-  .header-description {
-    line-height: var(--font-size-xl);
-    font-size: var(--font-size-md);
+/* Responsive adjustment for mobile screens */
+@media (width <= 768px) {
+  .row {
+    flex-wrap: wrap;
   }
 
-  > [class*='col-'] {
-    vertical-align: middle;
-    margin-top: auto;
-    margin-bottom: auto;
+  .card {
+    flex: 1 1 100%; /* Full width for each child on small screens */
   }
 }
diff --git a/libs/agora/services/src/lib/error.service.ts b/libs/agora/services/src/lib/error.service.ts
index 9cab2f15a0..4b915f8fcd 100644
--- a/libs/agora/services/src/lib/error.service.ts
+++ b/libs/agora/services/src/lib/error.service.ts
@@ -7,7 +7,9 @@ import { MessageService } from 'primeng/api';
 // -------------------------------------------------------------------------- //
 // Service
 // -------------------------------------------------------------------------- //
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class ErrorService implements ErrorHandler {
   constructor(private messageService: MessageService) {}
 
diff --git a/libs/agora/services/src/lib/github.service.ts b/libs/agora/services/src/lib/github.service.ts
index a0e8c18acb..fde3c4f62a 100644
--- a/libs/agora/services/src/lib/github.service.ts
+++ b/libs/agora/services/src/lib/github.service.ts
@@ -10,19 +10,19 @@ export class GitHubService {
   http = inject(HttpClient);
 
   private apiUrl = 'https://api.github.com/repos/Sage-Bionetworks/sage-monorepo/tags';
-  // private token = 'your_github_token'; // Optional for private repos or higher rate limit
 
   getCommitSHA(tagName: string): Observable<string> {
-    // const headers = new HttpHeaders({
-    //   Authorization: `Bearer ${this.token}`,
-    // });
-
-    // return this.http.get<any[]>(this.apiUrl, { headers }).pipe(
     return this.http.get<any[]>(this.apiUrl).pipe(
       map((tags) => {
         const tag = tags.find((t) => t.name === tagName);
-        return tag ? tag.commit.sha : 'Tag not found';
+        return tag ? this.getShortSHA(tag.commit.sha) : '';
       }),
     );
   }
+
+  getShortSHA(fullSHA: string) {
+    if (!fullSHA || fullSHA.length !== 40) return '';
+
+    return fullSHA.slice(0, 7);
+  }
 }
diff --git a/libs/agora/services/src/lib/helper.service.ts b/libs/agora/services/src/lib/helper.service.ts
index 2206c010a7..dbe557f96d 100644
--- a/libs/agora/services/src/lib/helper.service.ts
+++ b/libs/agora/services/src/lib/helper.service.ts
@@ -19,7 +19,9 @@ declare global {
 // -------------------------------------------------------------------------- //
 // Service
 // -------------------------------------------------------------------------- //
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class HelperService {
   loading = false;
 
diff --git a/libs/agora/shared/src/index.ts b/libs/agora/shared/src/index.ts
index 65c8a9857a..9cb907b00a 100644
--- a/libs/agora/shared/src/index.ts
+++ b/libs/agora/shared/src/index.ts
@@ -1,5 +1,6 @@
 export * from './lib/helpers/functions';
 export * from './lib/loading-icon/loading-icon.component';
+export * from './lib/loading-overlay/loading-overlay.component';
 export * from './lib/modal-link/modal-link.component';
 export * from './lib/svg-icon/svg-icon.component';
 export * from './lib/wiki/wiki.component';
diff --git a/libs/agora/shared/src/lib/loading-icon/loading-icon.component.ts b/libs/agora/shared/src/lib/loading-icon/loading-icon.component.ts
index ea89c82276..d021a9246f 100644
--- a/libs/agora/shared/src/lib/loading-icon/loading-icon.component.ts
+++ b/libs/agora/shared/src/lib/loading-icon/loading-icon.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector: 'agora-loading-icon',
@@ -7,5 +7,6 @@ import { Component } from '@angular/core';
   imports: [CommonModule],
   templateUrl: './loading-icon.component.html',
   styleUrls: ['./loading-icon.component.scss'],
+  encapsulation: ViewEncapsulation.None,
 })
 export class LoadingIconComponent {}
diff --git a/libs/agora/ui/src/lib/components/loading-overlay/loading-overlay.component.html b/libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.html
similarity index 72%
rename from libs/agora/ui/src/lib/components/loading-overlay/loading-overlay.component.html
rename to libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.html
index 0f77ede2fa..1415a66a71 100644
--- a/libs/agora/ui/src/lib/components/loading-overlay/loading-overlay.component.html
+++ b/libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.html
@@ -1,3 +1,8 @@
+<pre>
+  isActive: {{ isActive }} 
+  isGlobal: {{ isGlobal }}
+</pre>
+
 <div class="loading-overlay" [ngClass]="{ global: isGlobal, active: isActive }">
   <div class="loading-overlay-inner">
     <agora-loading-icon></agora-loading-icon>
diff --git a/libs/agora/ui/src/lib/components/loading-overlay/loading-overlay.component.scss b/libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.scss
similarity index 100%
rename from libs/agora/ui/src/lib/components/loading-overlay/loading-overlay.component.scss
rename to libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.scss
diff --git a/libs/agora/ui/src/lib/components/loading-overlay/loading-overlay.component.spec.ts b/libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.spec.ts
similarity index 100%
rename from libs/agora/ui/src/lib/components/loading-overlay/loading-overlay.component.spec.ts
rename to libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.spec.ts
diff --git a/libs/agora/ui/src/lib/components/loading-overlay/loading-overlay.component.ts b/libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.ts
similarity index 82%
rename from libs/agora/ui/src/lib/components/loading-overlay/loading-overlay.component.ts
rename to libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.ts
index ea7221ee6a..a628b1a844 100644
--- a/libs/agora/ui/src/lib/components/loading-overlay/loading-overlay.component.ts
+++ b/libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.ts
@@ -1,7 +1,7 @@
 import { Component, inject, Input, OnInit } from '@angular/core';
 import { HelperService } from '@sagebionetworks/agora/services';
 import { CommonModule } from '@angular/common';
-import { LoadingIconComponent } from '@sagebionetworks/agora/shared';
+import { LoadingIconComponent } from '../loading-icon/loading-icon.component';
 
 @Component({
   selector: 'agora-loading-overlay',
@@ -18,9 +18,11 @@ export class LoadingOverlayComponent implements OnInit {
   @Input() isActive = false;
 
   ngOnInit() {
+    console.log('global', this.isGlobal);
     if (this.isGlobal) {
       this.helperService.loadingChange.subscribe(() => {
         this.isActive = this.helperService.getLoading();
+        console.log('active', this.isActive);
       });
     }
   }
diff --git a/libs/agora/ui/src/index.ts b/libs/agora/ui/src/index.ts
index ed2d1610fc..731c87a55f 100644
--- a/libs/agora/ui/src/index.ts
+++ b/libs/agora/ui/src/index.ts
@@ -1,4 +1,3 @@
 export * from './lib/components/header/header.component';
 export * from './lib/components/footer/footer.component';
-export * from './lib/components/loading-overlay/loading-overlay.component';
 export * from './lib/components/svg-image/svg-image.component';

From 69d2e2aa07dfd1905266260ee456d81679cb8527 Mon Sep 17 00:00:00 2001
From: sagely1 <114952739+sagely1@users.noreply.github.com>
Date: Sat, 4 Jan 2025 00:21:36 +0000
Subject: [PATCH 2/8] code cleanup

---
 .../lib/components/gene-resources/gene-resources.component.ts | 4 +---
 libs/agora/services/src/lib/github.service.ts                 | 2 +-
 libs/agora/ui/src/lib/components/footer/footer.component.ts   | 4 +++-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.ts b/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.ts
index 9871360980..b158b6e160 100644
--- a/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.ts
+++ b/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.ts
@@ -1,15 +1,13 @@
 import { Component, Input, OnInit } from '@angular/core';
 
-import { GeneDruggabilityComponent } from '../gene-druggability/gene-druggability.component';
 import { Gene } from '@sagebionetworks/agora/api-client-angular';
 import { AdditionalResource } from '@sagebionetworks/agora/models';
 import { CommonModule } from '@angular/common';
-import { ModalLinkComponent } from '@sagebionetworks/agora/shared';
 
 @Component({
   selector: 'agora-gene-resources',
   standalone: true,
-  imports: [CommonModule, GeneDruggabilityComponent, ModalLinkComponent],
+  imports: [CommonModule],
   templateUrl: './gene-resources.component.html',
   styleUrls: ['./gene-resources.component.scss'],
 })
diff --git a/libs/agora/services/src/lib/github.service.ts b/libs/agora/services/src/lib/github.service.ts
index fde3c4f62a..d46c0c0f18 100644
--- a/libs/agora/services/src/lib/github.service.ts
+++ b/libs/agora/services/src/lib/github.service.ts
@@ -1,5 +1,5 @@
 import { inject, Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
diff --git a/libs/agora/ui/src/lib/components/footer/footer.component.ts b/libs/agora/ui/src/lib/components/footer/footer.component.ts
index e5248787f0..d7c896d873 100644
--- a/libs/agora/ui/src/lib/components/footer/footer.component.ts
+++ b/libs/agora/ui/src/lib/components/footer/footer.component.ts
@@ -27,6 +27,8 @@ export class FooterComponent implements OnInit {
   dataVersion$!: Observable<Dataversion>;
   sha$!: Observable<string>;
 
+  tag = 'agora/v0.0.2';
+
   navItems: Array<NavigationLink> = [
     {
       label: 'About',
@@ -50,7 +52,7 @@ export class FooterComponent implements OnInit {
 
   ngOnInit(): void {
     this.dataVersion$ = this.dataVersionService.getDataversion();
-    this.sha$ = this.gitHubService.getCommitSHA('agora/v0.0.2');
+    this.sha$ = this.gitHubService.getCommitSHA(this.tag);
   }
 
   getSiteVersion() {

From 980166ff456fc6eaba02cbaaec9289a482cf3ae5 Mon Sep 17 00:00:00 2001
From: sagely1 <114952739+sagely1@users.noreply.github.com>
Date: Sun, 5 Jan 2025 01:07:37 +0000
Subject: [PATCH 3/8] syncing changes from Q4 2024 and code cleanup

---
 apps/agora/api/src/models/genes.ts            |   5 +-
 apps/agora/app/src/app/app.routes.ts          |   5 +
 apps/agora/data/.env.example                  |   2 +-
 .../src/lib/model/druggability.ts             |   2 +-
 .../api-client-angular/src/lib/model/gene.ts  |   5 +-
 libs/agora/api-description/build/openapi.yaml |  17 ++-
 .../src/components/schemas/Druggability.yaml  |   5 +-
 .../src/components/schemas/Gene.yaml          |  12 +-
 .../score-barchart.component.ts               |   5 -
 .../src/lib/gene-comparison-tool.component.ts |   9 --
 libs/agora/genes/src/index.ts                 |   1 +
 .../gene-druggability.component.ts            |  22 ++-
 .../gene-hero/gene-hero.component.html        |  35 +++--
 .../gene-hero/gene-hero.component.scss        |  19 ++-
 .../gene-hero/gene-hero.component.ts          |  19 +--
 .../gene-resources.component.html             |  33 ++++-
 .../gene-resources.component.ts               | 121 ++++++++++++----
 .../gene-similar/gene-similar.component.html  |  47 ++++++
 .../gene-similar/gene-similar.component.scss  |  29 ++++
 .../gene-similar.component.spec.ts.off        |  59 ++++++++
 .../gene-similar/gene-similar.component.ts    | 120 ++++++++++++++++
 .../gene-table/gene-table.component.ts        |  17 +--
 libs/agora/genes/tsconfig.lib.json            |   2 +-
 libs/agora/genes/tsconfig.spec.json           |   8 +-
 libs/agora/models/ResourceCard.ts             |   6 +
 libs/agora/models/additional-resource.ts      |   6 -
 libs/agora/models/genes.ts                    |  11 +-
 libs/agora/models/index.ts                    |   2 +-
 .../nominated-targets.component.ts            |  43 ++----
 .../agora/testing/src/lib/mocks/gene-mocks.ts | 135 +++++++++---------
 tsconfig.base.json                            |   1 +
 31 files changed, 576 insertions(+), 227 deletions(-)
 create mode 100644 libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.html
 create mode 100644 libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.scss
 create mode 100644 libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.spec.ts.off
 create mode 100644 libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.ts
 create mode 100644 libs/agora/models/ResourceCard.ts
 delete mode 100644 libs/agora/models/additional-resource.ts

diff --git a/apps/agora/api/src/models/genes.ts b/apps/agora/api/src/models/genes.ts
index d706e66618..c86a51871b 100644
--- a/apps/agora/api/src/models/genes.ts
+++ b/apps/agora/api/src/models/genes.ts
@@ -53,7 +53,7 @@ const DruggabilitySchema = new Schema<Druggability>({
   sm_druggability_bucket: { type: Number, required: true },
   safety_bucket: { type: Number, required: true },
   abability_bucket: { type: Number, required: true },
-  pharos_class: { type: String, required: true },
+  pharos_class: { type: [String], required: true },
   classification: { type: String, required: true },
   safety_bucket_definition: { type: String, required: true },
   abability_bucket_definition: { type: String, required: true },
@@ -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 },
@@ -75,7 +76,7 @@ const GeneSchema = new Schema<Gene>(
     protein_brain_change_studied: { type: Boolean, required: true },
     target_nominations: { type: [TargetNominationSchema], required: true },
     median_expression: { type: [MedianExpressionSchema], required: true },
-    druggability: { type: [DruggabilitySchema], required: true },
+    druggability: { type: DruggabilitySchema, required: true },
     total_nominations: { type: Number, required: true },
     ensembl_info: { type: EnsemblInfoSchema, required: true },
   },
diff --git a/apps/agora/app/src/app/app.routes.ts b/apps/agora/app/src/app/app.routes.ts
index 5edb4d2f16..3dae949037 100644
--- a/apps/agora/app/src/app/app.routes.ts
+++ b/apps/agora/app/src/app/app.routes.ts
@@ -60,6 +60,11 @@ export const routes: Route[] = [
       description: 'Nominate a gene as a new candidate for AD treatment or prevention.',
     },
   },
+  {
+    path: 'genes/:id/similar',
+    loadChildren: () =>
+      import('@sagebionetworks/agora/gene-similar').then((routes) => routes.routes),
+  },
   {
     path: 'genes/:id/:tab/:subtab',
     loadChildren: () =>
diff --git a/apps/agora/data/.env.example b/apps/agora/data/.env.example
index 816c6eb0ac..a9ecb1712f 100644
--- a/apps/agora/data/.env.example
+++ b/apps/agora/data/.env.example
@@ -7,6 +7,6 @@ DB_HOST="agora-mongo" # must match mongo service name
 
 # specifies data release manifest and team images folder
 DATA_FILE="syn13363290"
-DATA_VERSION="68"
+DATA_VERSION="71"
 TEAM_IMAGES_ID="syn12861877"
 SYNAPSE_AUTH_TOKEN="agora-service-user-pat-here"
\ No newline at end of file
diff --git a/libs/agora/api-client-angular/src/lib/model/druggability.ts b/libs/agora/api-client-angular/src/lib/model/druggability.ts
index 20d0e4a3a5..3b17537dbb 100644
--- a/libs/agora/api-client-angular/src/lib/model/druggability.ts
+++ b/libs/agora/api-client-angular/src/lib/model/druggability.ts
@@ -17,7 +17,7 @@ export interface Druggability {
   sm_druggability_bucket: number;
   safety_bucket: number;
   abability_bucket: number;
-  pharos_class: string;
+  pharos_class: Array<string>;
   classification: string;
   safety_bucket_definition: string;
   abability_bucket_definition: string;
diff --git a/libs/agora/api-client-angular/src/lib/model/gene.ts b/libs/agora/api-client-angular/src/lib/model/gene.ts
index 377938232d..5824d42f23 100644
--- a/libs/agora/api-client-angular/src/lib/model/gene.ts
+++ b/libs/agora/api-client-angular/src/lib/model/gene.ts
@@ -31,6 +31,7 @@ export interface Gene {
   summary: string;
   hgnc_symbol: string;
   alias: Array<string>;
+  uniprotkb_accessions?: Array<string>;
   is_igap: boolean;
   is_eqtl: boolean;
   is_any_rna_changed_in_ad_brain: boolean;
@@ -39,7 +40,7 @@ export interface Gene {
   protein_brain_change_studied: boolean;
   target_nominations: Array<TargetNomination> | null;
   median_expression: Array<MedianExpression>;
-  druggability: Array<Druggability>;
+  druggability: Druggability;
   total_nominations: number | null;
   is_adi?: boolean;
   is_tep?: boolean;
@@ -57,7 +58,7 @@ export interface Gene {
   ab_modality_display_value?: string | null;
   safety_rating_display_value?: string | null;
   sm_druggability_display_value?: string | null;
-  pharos_class_display_value?: string | null;
+  pharos_class_display_value?: Array<string> | null;
   is_any_rna_changed_in_ad_brain_display_value?: string | null;
   is_any_protein_changed_in_ad_brain_display_value?: string | null;
   nominated_target_display_value?: boolean | null;
diff --git a/libs/agora/api-description/build/openapi.yaml b/libs/agora/api-description/build/openapi.yaml
index 600450d266..47c75e2c44 100644
--- a/libs/agora/api-description/build/openapi.yaml
+++ b/libs/agora/api-description/build/openapi.yaml
@@ -421,8 +421,9 @@ components:
           type: integer
           example: 3
         pharos_class:
-          type: string
-          example: Tclin
+          type: array
+          items:
+            type: string
         classification:
           type: string
           example: Enzyme
@@ -730,6 +731,10 @@ components:
           type: array
           items:
             type: string
+        uniprotkb_accessions:
+          type: array
+          items:
+            type: string
         is_igap:
           type: boolean
         is_eqtl:
@@ -752,9 +757,7 @@ components:
           items:
             $ref: '#/components/schemas/MedianExpression'
         druggability:
-          type: array
-          items:
-            $ref: '#/components/schemas/Druggability'
+          $ref: '#/components/schemas/Druggability'
         total_nominations:
           type: integer
           nullable: true
@@ -820,7 +823,9 @@ components:
           type: string
           nullable: true
         pharos_class_display_value:
-          type: string
+          type: array
+          items:
+            type: string
           nullable: true
         is_any_rna_changed_in_ad_brain_display_value:
           type: string
diff --git a/libs/agora/api-description/src/components/schemas/Druggability.yaml b/libs/agora/api-description/src/components/schemas/Druggability.yaml
index c4f0db0e06..96568e21e6 100644
--- a/libs/agora/api-description/src/components/schemas/Druggability.yaml
+++ b/libs/agora/api-description/src/components/schemas/Druggability.yaml
@@ -11,8 +11,9 @@ properties:
     type: integer
     example: 3
   pharos_class:
-    type: string
-    example: 'Tclin'
+    type: array
+    items:
+      type: string
   classification:
     type: string
     example: 'Enzyme'
diff --git a/libs/agora/api-description/src/components/schemas/Gene.yaml b/libs/agora/api-description/src/components/schemas/Gene.yaml
index 7a7cff7ab9..cc652d1cae 100644
--- a/libs/agora/api-description/src/components/schemas/Gene.yaml
+++ b/libs/agora/api-description/src/components/schemas/Gene.yaml
@@ -15,6 +15,10 @@ properties:
     type: array
     items:
       type: string
+  uniprotkb_accessions:
+    type: array
+    items:
+      type: string
   is_igap:
     type: boolean
   is_eqtl:
@@ -37,9 +41,7 @@ properties:
     items:
       $ref: MedianExpression.yaml
   druggability:
-    type: array
-    items:
-      $ref: Druggability.yaml
+    $ref: Druggability.yaml
   total_nominations:
     type: integer
     nullable: true
@@ -105,7 +107,9 @@ properties:
     type: string
     nullable: true
   pharos_class_display_value:
-    type: string
+    type: array
+    items:
+      type: string
     nullable: true
   is_any_rna_changed_in_ad_brain_display_value:
     type: string
diff --git a/libs/agora/charts/src/lib/score-barchart/score-barchart.component.ts b/libs/agora/charts/src/lib/score-barchart/score-barchart.component.ts
index dbf54b7c54..a6a47304af 100644
--- a/libs/agora/charts/src/lib/score-barchart/score-barchart.component.ts
+++ b/libs/agora/charts/src/lib/score-barchart/score-barchart.component.ts
@@ -68,7 +68,6 @@ export class ScoreBarChartComponent implements OnChanges, AfterViewInit, OnDestr
 
   @HostListener('window:resize', ['$event.target'])
   onResize() {
-    console.log('sbc-onresize');
     if (this.shouldResize && this.initialized) {
       const divSize = this.scoreBarChartContainer.nativeElement.getBoundingClientRect().width;
       clearTimeout(this.resizeTimer);
@@ -79,8 +78,6 @@ export class ScoreBarChartComponent implements OnChanges, AfterViewInit, OnDestr
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    console.log('sbc-changes', changes);
-
     if (
       (changes['data'] && !changes['data'].firstChange) ||
       (changes['score'] && !changes['score'].firstChange) ||
@@ -98,8 +95,6 @@ export class ScoreBarChartComponent implements OnChanges, AfterViewInit, OnDestr
   }
 
   ngAfterViewInit(): void {
-    console.log('ngAfterViewInit');
-
     if (this.score === null) this.hideChart();
     else this.createChart();
   }
diff --git a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts
index 9a739fa07f..1c92c3c3c8 100644
--- a/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts
+++ b/libs/agora/gene-comparison-tool/src/lib/gene-comparison-tool.component.ts
@@ -263,7 +263,6 @@ export class GeneComparisonToolComponent implements OnInit, AfterViewInit, OnDes
 
     combineLatest([genesApi$, distributionApi$]).subscribe(([genesResult, distributionResult]) => {
       if (genesResult.items) {
-        console.log('# of items', genesResult.items.length);
         this.initData(genesResult.items);
         this.sortTable(this.headerTable);
         this.refresh();
@@ -271,8 +270,6 @@ export class GeneComparisonToolComponent implements OnInit, AfterViewInit, OnDes
         this.scoresDistribution = distributionResult.overall_scores;
 
         this.isLoading = false;
-        // console.log('calling setLoading false');
-        // this.helperService.setLoading(false);
       }
     });
   }
@@ -1295,14 +1292,8 @@ export class GeneComparisonToolComponent implements OnInit, AfterViewInit, OnDes
 
   updateColumnWidth() {
     const count = this.columns.length < 5 ? 5 : this.columns.length;
-    console.log('count is: ', count);
-
     const width = this.headerTable?.containerViewChild?.nativeElement?.offsetWidth || 0;
-    console.log('ht', this.headerTable?.containerViewChild?.nativeElement?.offsetWidth);
-    console.log('width is: ', width);
-
     this.columnWidth = Math.ceil((width - 300) / count) + 'px';
-    console.log('column width is: ', this.columnWidth);
   }
 
   onResize() {
diff --git a/libs/agora/genes/src/index.ts b/libs/agora/genes/src/index.ts
index d3639ced7e..1f78ba7bb3 100644
--- a/libs/agora/genes/src/index.ts
+++ b/libs/agora/genes/src/index.ts
@@ -12,6 +12,7 @@ export * from './lib/components/gene-nominations/gene-nominations.component';
 export * from './lib/components/gene-protein-selector/gene-protein-selector.component';
 export * from './lib/components/gene-resources/gene-resources.component';
 export * from './lib/components/gene-search/gene-search.component';
+export * from './lib/components/gene-similar/gene-similar.component';
 export * from './lib/components/gene-soe/gene-soe.component';
 export * from './lib/components/gene-soe-charts/gene-soe-charts.component';
 export * from './lib/components/gene-soe-list/gene-soe-list.component';
diff --git a/libs/agora/genes/src/lib/components/gene-druggability/gene-druggability.component.ts b/libs/agora/genes/src/lib/components/gene-druggability/gene-druggability.component.ts
index 3bc04d6a8b..a0cdca5432 100644
--- a/libs/agora/genes/src/lib/components/gene-druggability/gene-druggability.component.ts
+++ b/libs/agora/genes/src/lib/components/gene-druggability/gene-druggability.component.ts
@@ -45,20 +45,18 @@ export class GeneDruggabilityComponent {
     // Update the initial buckets
     if (this.gene) {
       if (!this.gene.druggability) {
-        this.gene.druggability = [
-          {
-            sm_druggability_bucket: this.getDefaultBucketNumber(),
-            safety_bucket: this.getDefaultBucketNumber(),
-            abability_bucket: this.getDefaultBucketNumber(),
-            pharos_class: '',
-            classification: this.getDefaultText(),
-            safety_bucket_definition: this.getDefaultText(),
-            abability_bucket_definition: this.getDefaultText(),
-          },
-        ];
+        this.gene.druggability = {
+          sm_druggability_bucket: this.getDefaultBucketNumber(),
+          safety_bucket: this.getDefaultBucketNumber(),
+          abability_bucket: this.getDefaultBucketNumber(),
+          pharos_class: [],
+          classification: this.getDefaultText(),
+          safety_bucket_definition: this.getDefaultText(),
+          abability_bucket_definition: this.getDefaultText(),
+        };
       }
 
-      this.druggability = this.gene.druggability[0];
+      this.druggability = this.gene.druggability;
       this.currentBucketSM = this.druggability.sm_druggability_bucket;
       this.currentBucketAB = this.druggability.abability_bucket;
       this.currentBucketSF = this.druggability.safety_bucket;
diff --git a/libs/agora/genes/src/lib/components/gene-hero/gene-hero.component.html b/libs/agora/genes/src/lib/components/gene-hero/gene-hero.component.html
index d4641a34fa..cdc6363231 100644
--- a/libs/agora/genes/src/lib/components/gene-hero/gene-hero.component.html
+++ b/libs/agora/genes/src/lib/components/gene-hero/gene-hero.component.html
@@ -19,7 +19,7 @@ <h2 class="gene-hero-name">
         <p class="gene-hero-provider">
           {{ getSummary() }}
         </p>
-        @if (gene.bio_domains || getAlias() || getEnsemblUrl() !== '') {
+        @if (gene.bio_domains || getAliases() || getEnsemblUrl() !== '') {
           <hr />
           @if (gene.bio_domains) {
             <div class="gene-hero-biodomains">
@@ -29,10 +29,16 @@ <h4 class="gene-hero-biodomains-heading">Biological Domains</h4>
               </p>
             </div>
           }
+          @if (gene.druggability && gene.druggability.pharos_class) {
+            <div class="gene-hero-pharos">
+              <h4 class="gene-hero-pharos-heading">Pharos Class</h4>
+              <p>{{ gene.druggability.pharos_class.join(', ') }}</p>
+            </div>
+          }
           <div class="gene-hero-aliases">
             <h4 class="gene-hero-aliases-heading">Also known as</h4>
-            @if (getEnsemblUrl() !== '') {
-              <p>
+            @if (getEnsemblUrl()) {
+              <p class="aliases">
                 <a [href]="getEnsemblUrl()" target="_blank">{{ gene.ensembl_gene_id }}</a>
                 @if (gene.ensembl_info.ensembl_release) {
                   <span> (Ensembl Release {{ gene.ensembl_info.ensembl_release }}) </span>
@@ -40,11 +46,12 @@ <h4 class="gene-hero-aliases-heading">Also known as</h4>
               </p>
             }
             @if (getEnsemblUrl() === '') {
-              <span>{{ gene.ensembl_gene_id }}</span>
+              <p class="aliases">
+                <span>{{ gene.ensembl_gene_id }}</span>
+              </p>
             }
-
             @if (gene.ensembl_info.ensembl_possible_replacements.length > 0) {
-              <p>
+              <p class="aliases">
                 <a [href]="getPossibleReplacementsURL()"
                   >Possible replacement value<span
                     *ngIf="gene.ensembl_info.ensembl_possible_replacements.length > 1"
@@ -54,8 +61,20 @@ <h4 class="gene-hero-aliases-heading">Also known as</h4>
                 {{ gene.ensembl_info.ensembl_possible_replacements.join(', ') }}
               </p>
             }
-            @if (alias !== '') {
-              <p>{{ alias }}</p>
+            @if (gene.uniprotkb_accessions) {
+              <p 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>
         }
diff --git a/libs/agora/genes/src/lib/components/gene-hero/gene-hero.component.scss b/libs/agora/genes/src/lib/components/gene-hero/gene-hero.component.scss
index 6f9f580dc9..7cec8a91c8 100644
--- a/libs/agora/genes/src/lib/components/gene-hero/gene-hero.component.scss
+++ b/libs/agora/genes/src/lib/components/gene-hero/gene-hero.component.scss
@@ -38,7 +38,17 @@ hr {
 }
 
 .gene-hero-biodomains {
-  margin-bottom: 30px;
+  margin-bottom: 15px;
+
+  p {
+    margin-left: 10px;
+  }
+}
+
+.gene-hero-pharos {
+  p {
+    margin-left: 10px;
+  }
 }
 
 .gene-hero-summary {
@@ -50,11 +60,16 @@ hr {
 }
 
 .gene-hero-aliases-heading,
-.gene-hero-biodomains-heading {
+.gene-hero-biodomains-heading,
+.gene-hero-pharos-heading {
   text-transform: uppercase;
   margin-bottom: 15px;
 }
 
+.aliases {
+  margin: 0 0 0 10px;
+}
+
 .possible-replacements {
   margin-bottom: 15px;
 }
diff --git a/libs/agora/genes/src/lib/components/gene-hero/gene-hero.component.ts b/libs/agora/genes/src/lib/components/gene-hero/gene-hero.component.ts
index 6b70bf60f2..f2faa98418 100644
--- a/libs/agora/genes/src/lib/components/gene-hero/gene-hero.component.ts
+++ b/libs/agora/genes/src/lib/components/gene-hero/gene-hero.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { Gene } from '@sagebionetworks/agora/api-client-angular';
 import { ascending } from 'd3';
 
@@ -10,15 +10,9 @@ import { ascending } from 'd3';
   templateUrl: './gene-hero.component.html',
   styleUrls: ['./gene-hero.component.scss'],
 })
-export class GeneHeroComponent implements OnInit {
+export class GeneHeroComponent {
   @Input() gene: Gene | undefined;
 
-  alias = '';
-
-  ngOnInit() {
-    this.alias = this.getAlias();
-  }
-
   showNominationsOrTEP() {
     if (!this.gene) return false;
     return this.gene.total_nominations || this.gene.is_adi || this.gene.is_tep;
@@ -91,13 +85,20 @@ export class GeneHeroComponent implements OnInit {
     }
   }
 
-  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 '';
     const biodomains = this.gene.bio_domains.gene_biodomains
diff --git a/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.html b/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.html
index aa52e909e9..ca2bd56a9f 100644
--- a/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.html
+++ b/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.html
@@ -72,16 +72,45 @@ <h2 id="target-enabling-resources-header">Target Enabling Resources</h2>
   }
 }
 
+@if (gene) {
+  <div class="section">
+    <div class="section-inner">
+      <div class="container-sm">
+        <h2>Drug Development Resources</h2>
+        <p class="druggability-description">
+          These external sites provide information and resources related to drug development.
+        </p>
+        <div *ngFor="let r of drugDevelopmentResources; let i = index" class="row">
+          <div class="card card-title">{{ r.title }}</div>
+          <div class="card card-link">
+            <a class="additional-resource-links link no-bold" href="{{ r.link }}" target="_blank">{{
+              r.linkText
+            }}</a>
+          </div>
+          <div class="card card-description">
+            {{ r.description }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+}
+
 @if (additionalResources) {
   <div class="section">
     <div class="section-inner">
       <div class="container-sm">
         <h2>Additional Resources</h2>
-        <p>These external sites provide additional useful information for exploring AD targets.</p>
+        <p>
+          These external sites provide additional information about therapeutic targets for AD and
+          related dementias.
+        </p>
         <div *ngFor="let r of additionalResources; let i = index" class="row">
           <div class="card card-title">{{ r.title }}</div>
           <div class="card card-link">
-            <a class="link no-bold" href="{{ r.link }}" target="_blank">{{ r.linkText }}</a>
+            <a class="additional-resource-links link no-bold" href="{{ r.link }}" target="_blank">
+              {{ r.linkText }}
+            </a>
           </div>
           <div class="card card-description">
             {{ r.description }}
diff --git a/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.ts b/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.ts
index b158b6e160..4f80ef2f27 100644
--- a/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.ts
+++ b/libs/agora/genes/src/lib/components/gene-resources/gene-resources.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 
 import { Gene } from '@sagebionetworks/agora/api-client-angular';
-import { AdditionalResource } from '@sagebionetworks/agora/models';
+import { ResourceCard } from '@sagebionetworks/agora/models';
 import { CommonModule } from '@angular/common';
 
 @Component({
@@ -14,7 +14,8 @@ import { CommonModule } from '@angular/common';
 export class GeneResourcesComponent implements OnInit {
   @Input() gene: Gene | undefined;
 
-  additionalResources: AdditionalResource[] = [];
+  additionalResources: ResourceCard[] = [];
+  drugDevelopmentResources: ResourceCard[] = [];
 
   ngOnInit(): void {
     this.init();
@@ -33,66 +34,130 @@ export class GeneResourcesComponent implements OnInit {
       return;
     }
 
-    this.additionalResources = [
+    this.drugDevelopmentResources = [
+      {
+        title: 'Chemical Probes',
+        description:
+          'View expert reviews and evaluations of any chemical probes that are available for this target.',
+        linkText: 'Visit Chemical Probes',
+        link: `https://www.chemicalprobes.org/?q=${this.gene?.hgnc_symbol}`,
+      },
       {
         title: 'Open Targets',
         description:
-          'View this gene on Open Targets, a resource that provides evidence on the validity of therapeutic targets based on genome-scale experiments and analysis.',
+          'View evidence on the validity of this therapeutic target based on genome-scale experiments and analysis.',
         linkText: 'Visit Open Targets',
         link: `https://platform.opentargets.org/target/${this.gene?.ensembl_gene_id}`,
       },
+      {
+        title: 'PharmGKB',
+        description: 'Search for information on gene-drug and gene-phenotype relationships.',
+        linkText: 'Visit PharmGKB',
+        link: 'https://www.pharmgkb.org',
+      },
       {
         title: 'Pharos',
         description:
-          'View this gene on Pharos, a resource that provides access to the integrated knowledge-base from the Illuminating the Druggable Genome program.',
+          'View information about this target in the Knowledge Management Center for the Illuminating the Druggable Genome program.',
         linkText: 'Visit Pharos',
         link: `https://pharos.nih.gov/targets?q=${this.gene?.ensembl_gene_id}`,
       },
       {
-        title: 'Brain RNAseq',
+        title: 'Probe Miner',
         description:
-          'Search for this gene on the Brain RNAseq site, which hosts single-cell RNAseq data.',
-        linkText: 'Visit BrainRNAseq',
-        link: 'http://www.brainrnaseq.org/',
+          'Search for information on chemical probes based on large-scale, publicly available, medicinal chemistry data.',
+        linkText: 'Visit Probe Miner',
+        link: 'https://probeminer.icr.ac.uk/#/',
       },
       {
-        title: 'Genomics DB',
-        description:
-          "View this gene on the National Institute on Aging Genetics of Alzheimer's Disease Data Storage Site (NIAGADS) Genomics Database.",
-        linkText: 'Visit Genomics DB',
-        link: `https://www.niagads.org/genomics/app/record/gene/${this.gene?.ensembl_gene_id}`,
+        title: 'Protein Data Bank',
+        description: 'Search for experimental and computed 3D protein structure information.',
+        linkText: 'Visit PDB',
+        link: 'https://www.rcsb.org',
       },
+    ];
+
+    this.additionalResources = [
       {
         title: 'AD Atlas',
         description:
-          'View this gene on the AD Atlas site, a network-based resource for investigating AD in a multi-omic context.',
+          'Perform interactive network and enrichment analyses on this target using a heterogenous network of multiomic, association, and endophenotypic data.',
         linkText: 'Visit AD Atlas',
-        link: `https://adatlas.org/?geneID=${this.gene?.ensembl_gene_id}`,
+        link: `https://adatlas.org/?type=geneEnsembl&ids=${this.gene?.ensembl_gene_id}`,
       },
       {
-        title: 'Pub AD',
-        description: 'View dementia-related publication information for this gene on PubAD.',
-        linkText: 'Visit PubAD',
-        link: `${this.getPubADLink()}`,
+        title: 'Alzforum',
+        description:
+          'Visit Alzforum for news and information resources about AD and related disorders.',
+        linkText: 'Visit Alzforum',
+        link: 'https://www.alzforum.org',
+      },
+      {
+        title: 'AlzPED',
+        description:
+          'Search for information on preclinical efficacy studies of candidate AD therapeutics.',
+        linkText: 'Visit AlzPED',
+        link: 'https://alzped.nia.nih.gov',
+      },
+      {
+        title: 'AMP-PD Target Explorer',
+        description:
+          "View evidence about whether this target is associated with Parkinson's Disease.",
+        linkText: 'Visit AMP-PD',
+        link: `https://target-explorer.amp-pd.org/genes/target-search?gene=${this.gene?.ensembl_gene_id}`,
+      },
+      {
+        title: 'Brain Knowledge Platform',
+        description:
+          'View single nucleus RNAseq results for this target using the Allen Institute SEA-AD Comparative Viewer.',
+        linkText: 'Visit Brain Knowledge Platform',
+        link: `https://knowledge.brain-map.org/data/5IU4U8BP711TR6KZ843/2CD0HDC5PS6A58T0P6E/compare?geneOption=${this.gene?.hgnc_symbol ?? this.gene?.ensembl_gene_id}`,
       },
       {
         title: 'Gene Ontology',
-        description: 'View the gene ontology information for this gene on Ensembl.',
-        linkText: 'Visit Ensembl',
-        link: `https://www.ensembl.org/Homo_sapiens/Gene/Ontologies/molecular_function?g=${this.gene?.ensembl_gene_id}`,
+        description:
+          'View the GO terms associated with this target and explore ontology-related tools.',
+        linkText: 'Visit AmiGO 2',
+        link: `https://amigo.geneontology.org/amigo/search/annotation?q=${this.gene?.hgnc_symbol ?? this.gene?.ensembl_gene_id}`,
+      },
+      {
+        title: 'GeneCards',
+        description:
+          'View integrated information about this target gathered from a comprehensive collection of public sources.',
+        linkText: 'Visit GeneCards',
+        link: `https://www.genecards.org/cgi-bin/carddisp.pl?gene=${this.gene?.hgnc_symbol ?? this.gene?.ensembl_gene_id}`,
+      },
+      {
+        title: 'Genomics DB',
+        description:
+          "View information about this target on the National Institute on Aging Genetics of Alzheimer's Disease Data Storage Site (NIAGADS) Genomics Database.",
+        linkText: 'Visit Genomics DB',
+        link: `https://www.niagads.org/genomics/app/record/gene/${this.gene?.ensembl_gene_id}`,
+      },
+      {
+        title: 'Pub AD',
+        description: 'View dementia-related publication information for this target.',
+        linkText: 'Visit PubAD',
+        link: `${this.getPubADLink()}`,
       },
       {
         title: 'Reactome Pathways',
-        description: 'View the reactome pathway information for this gene on Ensembl.',
+        description: 'View the reactome pathway information for this target on Ensembl.',
         linkText: 'Visit Ensembl',
         link: `https://www.ensembl.org/Homo_sapiens/Gene/Pathway?g=${this.gene?.ensembl_gene_id}`,
       },
       {
-        title: 'AMP-PD Target Explorer',
+        title: 'SEA-AD',
         description:
-          "View this gene in the AMP-PD Target Explorer, a resource that hosts evidence about whether genes are associated with Parkinson's Disease.",
-        linkText: 'Visit AMP-PD',
-        link: `https://target-explorer.amp-pd.org/genes/target-search?gene=${this.gene?.ensembl_gene_id}`,
+          'Explore the Seattle Alzheimer’s Disease Brain Cell Atlas resources from the Allen Institute.',
+        linkText: 'Visit SEA-AD',
+        link: 'https://portal.brain-map.org/explore/seattle-alzheimers-disease',
+      },
+      {
+        title: 'UniProtKB',
+        description: 'View protein sequence and functional information about this target.',
+        linkText: 'Visit UniProtKB',
+        link: `https://www.uniprot.org/uniprotkb?query=${this.gene?.ensembl_gene_id}`,
       },
     ];
   }
diff --git a/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.html b/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.html
new file mode 100644
index 0000000000..d7294137f5
--- /dev/null
+++ b/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.html
@@ -0,0 +1,47 @@
+<div class="section section-hero">
+  <div class="section-inner">
+    <div class="container-sm">
+      <h1 class="h2">Similar Genes</h1>
+      @if (gene?.ensembl_gene_id) {
+        <p>
+          Genes that are similar to
+          <a class="link" [routerLink]="'/genes/' + gene?.ensembl_gene_id">{{
+            gene.hgnc_symbol || gene.ensembl_gene_id
+          }}</a>
+          based on network coexpression.
+        </p>
+      }
+      @if (!gene?.ensembl_gene_id) {
+        <p>Genes that are similar based on network coexpression.</p>
+      }
+      <agora-modal-link text="Learn more about this table" header="Similar genes" wikiId="612974">
+      </agora-modal-link>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <div class="section-inner">
+    <div class="container-lg">
+      <div class="mb-lg">
+        <agora-gene-table
+          className="similar-gene-table"
+          [exportFilename]="'genes-similar-' + gene?.ensembl_gene_id"
+          [genes]="genes"
+          [columns]="tableColumns"
+          sortField="hgnc_symbol"
+          [sortOrder]="1"
+          heading="Similar Genes"
+          [gctLink]="true"
+          gctLinkTooltip="Use Agora's Gene Comparison Tool to compare similar genes in this list"
+        ></agora-gene-table>
+      </div>
+      <div>
+        <agora-svg-icon name="info-circle" class="mr-xs text-gray-600"></agora-svg-icon>
+        Use
+        <a class="link" (click)="navigateToGeneComparisonTool()">Agora's Gene Comparison Tool</a>
+        to compare similar genes in this list.
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.scss b/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.scss
new file mode 100644
index 0000000000..6eb98715ac
--- /dev/null
+++ b/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.scss
@@ -0,0 +1,29 @@
+// Most of the table styling in styles.scss to avoid repeating
+// code
+
+.small-margin-left {
+  margin-left: 15px;
+}
+
+.search-box {
+  position: relative;
+
+  .search-box-icon {
+    display: flex;
+    width: 60px;
+    height: 100%;
+    position: absolute;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-gray-300);
+  }
+
+  input {
+    padding: 20px 25px 20px 60px;
+    border-radius: 5px;
+    width: 100%;
+    border: 1px solid var(--color-gray-400);
+    outline: none;
+    box-sizing: border-box;
+  }
+}
diff --git a/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.spec.ts.off b/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.spec.ts.off
new file mode 100644
index 0000000000..00fc7a9563
--- /dev/null
+++ b/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.spec.ts.off
@@ -0,0 +1,59 @@
+// -------------------------------------------------------------------------- //
+// External
+// -------------------------------------------------------------------------- //
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+// -------------------------------------------------------------------------- //
+// Internal
+// -------------------------------------------------------------------------- //
+import { GeneSimilarComponent } from './gene-similar.component';
+import { geneMock1, geneMock2, geneMock3 } from '@sagebionetworks/agora/testing';
+import { GenesService } from '@sagebionetworks/agora/api-client-angular';
+import { HelperService } from '@sagebionetworks/agora/services';
+
+// -------------------------------------------------------------------------- //
+// Tests
+// -------------------------------------------------------------------------- //
+describe('Component: Gene Similar', () => {
+  let fixture: ComponentFixture<GeneSimilarComponent>;
+  let component: GeneSimilarComponent;
+  let element: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [GeneSimilarComponent],
+      imports: [RouterTestingModule, HttpClientTestingModule],
+      providers: [GenesService, HelperService],
+    }).compileComponents();
+  });
+
+  beforeEach(async () => {
+    fixture = TestBed.createComponent(GeneSimilarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    element = fixture.nativeElement;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should order by hgnc-symbol ascending', () => {
+    const expectedHgnc = [geneMock1.hgnc_symbol, geneMock2.hgnc_symbol, geneMock3.hgnc_symbol];
+    expectedHgnc.sort();
+
+    component.genes = [geneMock1, geneMock2, geneMock3];
+    fixture.detectChanges();
+
+    const table = element.querySelector('.similar-gene-table');
+    expect(table).not.toBeNull();
+
+    const rows = Array.from(table?.querySelectorAll('tbody tr') || []) as HTMLTableRowElement[];
+    expect(rows.length).toBe(3);
+
+    const actualHgnc = rows.map((row) => row.cells[0].textContent?.trim());
+    expect(actualHgnc).toEqual(expectedHgnc);
+  });
+});
diff --git a/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.ts b/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.ts
new file mode 100644
index 0000000000..f407bad551
--- /dev/null
+++ b/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.ts
@@ -0,0 +1,120 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { Router, ActivatedRoute, ParamMap, RouterLink } from '@angular/router';
+import { Gene, GenesService } from '@sagebionetworks/agora/api-client-angular';
+import { HelperService } from '@sagebionetworks/agora/services';
+import { GeneTableComponent } from '../gene-table/gene-table.component';
+import { ModalLinkComponent, SvgIconComponent } from '@sagebionetworks/agora/shared';
+
+interface TableColumn {
+  field: string;
+  header: string;
+  selected?: boolean;
+}
+
+@Component({
+  selector: 'agora-gene-similar',
+  standalone: true,
+  imports: [ModalLinkComponent, GeneTableComponent, RouterLink, SvgIconComponent],
+  providers: [GenesService],
+  templateUrl: './gene-similar.component.html',
+  styleUrls: ['./gene-similar.component.scss'],
+})
+export class GeneSimilarComponent implements OnInit {
+  route = inject(ActivatedRoute);
+  router = inject(Router);
+  genesService = inject(GenesService);
+  helperService = inject(HelperService);
+
+  gene: Gene = {} as Gene;
+  genes: Gene[] = [];
+
+  tableColumns: TableColumn[] = [
+    { field: 'hgnc_symbol', header: 'Gene name', selected: true },
+    {
+      field: 'nominated_target_display_value',
+      header: 'Nominated Target',
+      selected: true,
+    },
+    {
+      field: 'is_igap',
+      header: 'Genetic Association with LOAD',
+      selected: true,
+    },
+    { field: 'is_eqtl', header: 'Brain eQTL', selected: true },
+    {
+      field: 'is_any_rna_changed_in_ad_brain_display_value',
+      header: 'RNA Expression Change',
+      selected: true,
+    },
+    {
+      field: 'is_any_protein_changed_in_ad_brain_display_value',
+      header: 'Protein Expression Change',
+    },
+    { field: 'pharos_class_display_value', header: 'Pharos Class' },
+  ];
+
+  gctLink: { [key: string]: string } | undefined;
+
+  ngOnInit() {
+    this.route.paramMap.subscribe((params: ParamMap) => {
+      if (params.get('id')) {
+        this.helperService.setLoading(true);
+        this.genesService.getGene(params.get('id') as string).subscribe((gene: Gene | null) => {
+          if (!gene) {
+            this.helperService.setLoading(false);
+            // https://github.com/angular/angular/issues/45202
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            this.router.navigateByUrl('/404-not-found', { skipLocationChange: true });
+          } else {
+            this.gene = gene;
+            this.init();
+          }
+        });
+      }
+    });
+  }
+
+  init() {
+    if (!this.gene?.similar_genes_network?.nodes?.length) {
+      return;
+    }
+
+    const ids: any = [];
+    this.gene.similar_genes_network.nodes.forEach((obj: any) => {
+      ids.push(obj.ensembl_gene_id);
+    });
+
+    this.genesService.getGenes(ids).subscribe((response) => {
+      const genes = response;
+
+      genes.forEach((de: Gene) => {
+        // Populate display fields & set default values
+        de.is_any_rna_changed_in_ad_brain_display_value = de.rna_brain_change_studied
+          ? de.is_any_rna_changed_in_ad_brain.toString()
+          : 'No data';
+        de.is_any_protein_changed_in_ad_brain_display_value = de.protein_brain_change_studied
+          ? de.is_any_protein_changed_in_ad_brain.toString()
+          : 'No data';
+        if (de.total_nominations) de.nominated_target_display_value = de.total_nominations > 0;
+        else de.nominated_target_display_value = false;
+
+        // Populate Druggability display fields
+        if (de.druggability) {
+          de.pharos_class_display_value = de.druggability.pharos_class;
+        }
+      });
+
+      this.genes = genes;
+    });
+
+    this.helperService.setLoading(false);
+  }
+
+  navigateToGeneComparisonTool() {
+    const ids: string[] = this.genes.map((g: Gene) => g.ensembl_gene_id);
+    this.helperService.setGCTSelection(ids);
+    // https://github.com/angular/angular/issues/45202
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    this.router.navigate(['/genes/comparison']);
+  }
+}
diff --git a/libs/agora/genes/src/lib/components/gene-table/gene-table.component.ts b/libs/agora/genes/src/lib/components/gene-table/gene-table.component.ts
index 12833a8f46..f97d151879 100644
--- a/libs/agora/genes/src/lib/components/gene-table/gene-table.component.ts
+++ b/libs/agora/genes/src/lib/components/gene-table/gene-table.component.ts
@@ -124,22 +124,7 @@ export class GeneTableComponent {
       } else if (a == null && b == null) {
         result = 0;
       } else if (typeof a === 'string' && typeof b === 'string') {
-        // Natural sorting for this score type, which can be >= 10
-        if (
-          event.field === 'sm_druggability_display_value' ||
-          event.field === 'safety_rating_display_value' ||
-          event.field === 'ab_modality_display_value'
-        ) {
-          let nA = parseInt(a.split(':')[0], 10);
-          let nB = parseInt(b.split(':')[0], 10);
-
-          nA = !isNaN(nA) ? nA : 999 * event.order;
-          nB = !isNaN(nB) ? nB : 999 * event.order;
-
-          result = nA < nB ? -1 : nA > nB ? 1 : 0;
-        } else {
-          result = a.localeCompare(b);
-        }
+        result = a.localeCompare(b);
       } else {
         result = a < b ? -1 : a > b ? 1 : 0;
       }
diff --git a/libs/agora/genes/tsconfig.lib.json b/libs/agora/genes/tsconfig.lib.json
index b228a1a081..4f08aa6032 100644
--- a/libs/agora/genes/tsconfig.lib.json
+++ b/libs/agora/genes/tsconfig.lib.json
@@ -8,5 +8,5 @@
     "types": []
   },
   "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"],
-  "include": ["**/*.ts"]
+  "include": ["**/*.ts", "src/lib/components/gene-similar/gene-similar.component.spec.ts"]
 }
diff --git a/libs/agora/genes/tsconfig.spec.json b/libs/agora/genes/tsconfig.spec.json
index d3889a9881..42ad3758ea 100644
--- a/libs/agora/genes/tsconfig.spec.json
+++ b/libs/agora/genes/tsconfig.spec.json
@@ -6,5 +6,11 @@
     "types": ["jest", "node"]
   },
   "files": ["src/test-setup.ts"],
-  "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts", "jest.config.ts"]
+  "include": [
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.d.ts",
+    "jest.config.ts",
+    "src/lib/components/gene-similar/gene-similar.component.spec.ts"
+  ]
 }
diff --git a/libs/agora/models/ResourceCard.ts b/libs/agora/models/ResourceCard.ts
new file mode 100644
index 0000000000..eaf0842c74
--- /dev/null
+++ b/libs/agora/models/ResourceCard.ts
@@ -0,0 +1,6 @@
+export interface ResourceCard {
+  title: string;
+  description: string;
+  linkText: string;
+  link: string;
+}
diff --git a/libs/agora/models/additional-resource.ts b/libs/agora/models/additional-resource.ts
deleted file mode 100644
index 35d2aa8203..0000000000
--- a/libs/agora/models/additional-resource.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface AdditionalResource {
-    title: string;
-    description: string;
-    linkText: string;
-    link: string;
-}
diff --git a/libs/agora/models/genes.ts b/libs/agora/models/genes.ts
index a69134818e..e120ea399d 100644
--- a/libs/agora/models/genes.ts
+++ b/libs/agora/models/genes.ts
@@ -23,7 +23,6 @@ export interface TargetNomination {
   input_data: string;
   validation_study_details: string;
   initial_nomination: number;
-  //
   team_data?: Team;
 }
 
@@ -41,7 +40,7 @@ export interface Druggability {
   sm_druggability_bucket: number;
   safety_bucket: number;
   abability_bucket: number;
-  pharos_class: string;
+  pharos_class?: string[];
   // classification should really be named sm_druggability_bucket_definition
   classification: string;
   safety_bucket_definition: string;
@@ -55,6 +54,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;
@@ -63,7 +63,7 @@ export interface Gene {
   protein_brain_change_studied: boolean;
   target_nominations: TargetNomination[] | null;
   median_expression: MedianExpression[];
-  druggability: Druggability[];
+  druggability: Druggability;
   total_nominations: number | null;
   is_adi: boolean;
   is_tep: boolean;
@@ -84,10 +84,7 @@ export interface Gene {
   similar_genes_network?: SimilarGenesNetwork;
 
   // Similar table (not in mongo document)
-  ab_modality_display_value?: string;
-  safety_rating_display_value?: string;
-  sm_druggability_display_value?: string;
-  pharos_class_display_value?: string;
+  pharos_class_display_value?: string[];
   is_any_rna_changed_in_ad_brain_display_value?: string;
   is_any_protein_changed_in_ad_brain_display_value?: string;
   nominated_target_display_value?: boolean;
diff --git a/libs/agora/models/index.ts b/libs/agora/models/index.ts
index 3e1bfde560..c92124d194 100644
--- a/libs/agora/models/index.ts
+++ b/libs/agora/models/index.ts
@@ -1,4 +1,3 @@
-export * from './additional-resource';
 export * from './biodomains';
 export * from './chart-range';
 export * from './charts';
@@ -14,6 +13,7 @@ export * from './misc';
 export * from './neuropathologic-correlations';
 export * from './overall-scores';
 export * from './proteomics';
+export * from './ResourceCard';
 export * from './rna';
 export * from './scores';
 export * from './synapse-wiki';
diff --git a/libs/agora/nominated-targets/src/lib/nominated-targets/nominated-targets.component.ts b/libs/agora/nominated-targets/src/lib/nominated-targets/nominated-targets.component.ts
index 1953cb5400..760884b205 100644
--- a/libs/agora/nominated-targets/src/lib/nominated-targets/nominated-targets.component.ts
+++ b/libs/agora/nominated-targets/src/lib/nominated-targets/nominated-targets.component.ts
@@ -56,39 +56,27 @@ export class NominatedTargetsComponent implements OnInit {
       header: 'Pharos Class',
       selected: false,
     },
-    {
-      field: 'sm_druggability_display_value',
-      header: 'Small Molecule Druggability',
-      selected: false,
-    },
-    {
-      field: 'safety_rating_display_value',
-      header: 'Safety Rating',
-      selected: false,
-    },
-    {
-      field: 'ab_modality_display_value',
-      header: 'Antibody Modality',
-      selected: false,
-    },
   ];
 
   ngOnInit() {
     this.apiService.getNominatedGenes().subscribe((response) => {
       if (!response.items) return;
       const genes = response.items;
+
       genes.forEach((de: Gene) => {
         let teamsArray: string[] = [];
         let studyArray: string[] = [];
         let programsArray: string[] = [];
         let inputDataArray: string[] = [];
         let initialNominationArray: number[] = [];
+
         if (de.total_nominations) {
           if (!this.nominations.includes(de.total_nominations)) {
             this.nominations.push(de.total_nominations);
             this.nominations.sort();
           }
         }
+
         // Handle TargetNomination fields
         // First map all entries nested in the data to a new array
         if (de.target_nominations?.length) {
@@ -98,45 +86,36 @@ export class NominatedTargetsComponent implements OnInit {
           );
           programsArray = de.target_nominations.map((nt: TargetNomination) => nt.source);
           inputDataArray = de.target_nominations.map((nt: TargetNomination) => nt.input_data);
+
           initialNominationArray = de.target_nominations
             .map((nt: TargetNomination) => nt.initial_nomination)
             .filter((item) => item !== undefined);
         }
+
         // Check if there are any strings with commas inside,
         // if there are separate those into new split strings
         teamsArray = this.commaFlattenArray(teamsArray);
         studyArray = this.commaFlattenArray(studyArray);
         programsArray = this.commaFlattenArray(programsArray);
         inputDataArray = this.commaFlattenArray(inputDataArray);
+
         // Populate targetNomination display fields
         de.teams_display_value = this.getCommaSeparatedStringOfUniqueSortedValues(teamsArray);
         de.study_display_value = this.getCommaSeparatedStringOfUniqueSortedValues(studyArray);
         de.programs_display_value = this.getCommaSeparatedStringOfUniqueSortedValues(programsArray);
         de.input_data_display_value =
           this.getCommaSeparatedStringOfUniqueSortedValues(inputDataArray);
+
         de.initial_nomination_display_value = initialNominationArray.length
           ? Math.min(...initialNominationArray)
           : undefined;
+
         // Populate Druggability display fields
-        if (de.druggability && de.druggability.length) {
-          de.pharos_class_display_value = de.druggability[0].pharos_class
-            ? de.druggability[0].pharos_class
-            : 'No value';
-          de.sm_druggability_display_value =
-            de.druggability[0].sm_druggability_bucket + ': ' + de.druggability[0].classification;
-          de.safety_rating_display_value =
-            de.druggability[0].safety_bucket + ': ' + de.druggability[0].safety_bucket_definition;
-          de.ab_modality_display_value =
-            de.druggability[0].abability_bucket +
-            ': ' +
-            de.druggability[0].abability_bucket_definition;
-        } else {
-          de.pharos_class_display_value = 'No value';
-          de.sm_druggability_display_value = 'No value';
-          de.safety_rating_display_value = 'No value';
-          de.ab_modality_display_value = 'No value';
+        if (de.druggability) {
+          de.pharos_class_display_value = de.druggability.pharos_class;
         }
       });
+
       this.genes = genes;
     });
   }
diff --git a/libs/agora/testing/src/lib/mocks/gene-mocks.ts b/libs/agora/testing/src/lib/mocks/gene-mocks.ts
index 97752ab619..811dda26cb 100644
--- a/libs/agora/testing/src/lib/mocks/gene-mocks.ts
+++ b/libs/agora/testing/src/lib/mocks/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,
@@ -203,20 +204,18 @@ export const geneMock1: Gene = {
       tissue: 'STG',
     },
   ],
-  druggability: [
-    {
-      sm_druggability_bucket: 3,
-      safety_bucket: 4,
-      abability_bucket: 3,
-      pharos_class: 'Tbio',
-      classification:
-        'Targetable by structure: Structurally druggable protein, based on the presence of a druggable pocket in the protein (DrugEBIlity/CanSAR).',
-      safety_bucket_definition:
-        'More than two of: high off target gene expression, cancer driver, essential gene, associated deleterious genetic disorder, HPO phenotype associated gene, or black box warning on clinically used drug.',
-      abability_bucket_definition:
-        'Cell membrane-bound proteins. Highly accessible to antibody-based therapies, but potentially less so than secreted proteins or ECM components.',
-    },
-  ],
+  druggability: {
+    sm_druggability_bucket: 3,
+    safety_bucket: 4,
+    abability_bucket: 3,
+    pharos_class: ['Tbio'],
+    classification:
+      'Targetable by structure: Structurally druggable protein, based on the presence of a druggable pocket in the protein (DrugEBIlity/CanSAR).',
+    safety_bucket_definition:
+      'More than two of: high off target gene expression, cancer driver, essential gene, associated deleterious genetic disorder, HPO phenotype associated gene, or black box warning on clinically used drug.',
+    abability_bucket_definition:
+      'Cell membrane-bound proteins. Highly accessible to antibody-based therapies, but potentially less so than secreted proteins or ECM components.',
+  },
   total_nominations: 5,
   rna_differential_expression: [
     {
@@ -2978,6 +2977,7 @@ export const geneMock2: Gene = {
     'PLEC1b',
     'PLTN',
   ],
+  uniprotkb_accessions: [],
   is_igap: false,
   is_eqtl: true,
   is_any_rna_changed_in_ad_brain: true,
@@ -3117,20 +3117,18 @@ export const geneMock2: Gene = {
       tissue: 'STG',
     },
   ],
-  druggability: [
-    {
-      sm_druggability_bucket: 3,
-      safety_bucket: 4,
-      abability_bucket: 3,
-      pharos_class: 'Tbio',
-      classification:
-        'Targetable by structure: Structurally druggable protein, based on the presence of a druggable pocket in the protein (DrugEBIlity/CanSAR).',
-      safety_bucket_definition:
-        'More than two of: high off target gene expression, cancer driver, essential gene, associated deleterious genetic disorder, HPO phenotype associated gene, or black box warning on clinically used drug.',
-      abability_bucket_definition:
-        'Cell membrane-bound proteins. Highly accessible to antibody-based therapies, but potentially less so than secreted proteins or ECM components.',
-    },
-  ],
+  druggability: {
+    sm_druggability_bucket: 3,
+    safety_bucket: 4,
+    abability_bucket: 3,
+    pharos_class: ['Tbio'],
+    classification:
+      'Targetable by structure: Structurally druggable protein, based on the presence of a druggable pocket in the protein (DrugEBIlity/CanSAR).',
+    safety_bucket_definition:
+      'More than two of: high off target gene expression, cancer driver, essential gene, associated deleterious genetic disorder, HPO phenotype associated gene, or black box warning on clinically used drug.',
+    abability_bucket_definition:
+      'Cell membrane-bound proteins. Highly accessible to antibody-based therapies, but potentially less so than secreted proteins or ECM components.',
+  },
   total_nominations: 3,
   is_adi: false,
   is_tep: true,
@@ -3152,6 +3150,7 @@ export const geneMock3: Gene = {
     'The protein encoded by this gene is a member of the Src family of tyrosine kinases. This protein is primarily hemopoietic, particularly in cells of the myeloid and B-lymphoid lineages. It may help couple the Fc receptor to the activation of the respiratory burst. In addition, it may play a role in neutrophil migration and in the degranulation of neutrophils. Multiple isoforms with different subcellular distributions are produced due to both alternative splicing and the use of alternative translation initiation codons, including a non-AUG (CUG) codon. [provided by RefSeq, Feb 2010].',
   hgnc_symbol: 'HCK',
   alias: ['JTK9', 'p59Hck', 'p61Hck'],
+  uniprotkb_accessions: [],
   is_igap: false,
   is_eqtl: true,
   is_any_rna_changed_in_ad_brain: true,
@@ -3242,20 +3241,18 @@ export const geneMock3: Gene = {
       tissue: 'STG',
     },
   ],
-  druggability: [
-    {
-      sm_druggability_bucket: 3,
-      safety_bucket: 4,
-      abability_bucket: 3,
-      pharos_class: 'Tbio',
-      classification:
-        'Targetable by structure: Structurally druggable protein, based on the presence of a druggable pocket in the protein (DrugEBIlity/CanSAR).',
-      safety_bucket_definition:
-        'More than two of: high off target gene expression, cancer driver, essential gene, associated deleterious genetic disorder, HPO phenotype associated gene, or black box warning on clinically used drug.',
-      abability_bucket_definition:
-        'Cell membrane-bound proteins. Highly accessible to antibody-based therapies, but potentially less so than secreted proteins or ECM components.',
-    },
-  ],
+  druggability: {
+    sm_druggability_bucket: 3,
+    safety_bucket: 4,
+    abability_bucket: 3,
+    pharos_class: ['Tbio'],
+    classification:
+      'Targetable by structure: Structurally druggable protein, based on the presence of a druggable pocket in the protein (DrugEBIlity/CanSAR).',
+    safety_bucket_definition:
+      'More than two of: high off target gene expression, cancer driver, essential gene, associated deleterious genetic disorder, HPO phenotype associated gene, or black box warning on clinically used drug.',
+    abability_bucket_definition:
+      'Cell membrane-bound proteins. Highly accessible to antibody-based therapies, but potentially less so than secreted proteins or ECM components.',
+  },
   total_nominations: null,
   is_adi: false,
   is_tep: true,
@@ -3358,6 +3355,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,
@@ -3423,20 +3421,18 @@ export const nominatedGeneMock1: Gene = {
     },
   ],
   median_expression: [],
-  druggability: [
-    {
-      sm_druggability_bucket: 3,
-      safety_bucket: 4,
-      abability_bucket: 3,
-      pharos_class: 'Tbio',
-      classification:
-        'Targetable by structure: Structurally druggable protein, based on the presence of a druggable pocket in the protein (DrugEBIlity/CanSAR).',
-      safety_bucket_definition:
-        'More than two of: high off target gene expression, cancer driver, essential gene, associated deleterious genetic disorder, HPO phenotype associated gene, or black box warning on clinically used drug.',
-      abability_bucket_definition:
-        'Cell membrane-bound proteins. Highly accessible to antibody-based therapies, but potentially less so than secreted proteins or ECM components.',
-    },
-  ],
+  druggability: {
+    sm_druggability_bucket: 3,
+    safety_bucket: 4,
+    abability_bucket: 3,
+    pharos_class: ['Tbio'],
+    classification:
+      'Targetable by structure: Structurally druggable protein, based on the presence of a druggable pocket in the protein (DrugEBIlity/CanSAR).',
+    safety_bucket_definition:
+      'More than two of: high off target gene expression, cancer driver, essential gene, associated deleterious genetic disorder, HPO phenotype associated gene, or black box warning on clinically used drug.',
+    abability_bucket_definition:
+      'Cell membrane-bound proteins. Highly accessible to antibody-based therapies, but potentially less so than secreted proteins or ECM components.',
+  },
   total_nominations: 4,
   is_adi: false,
   is_tep: false,
@@ -3456,6 +3452,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,
@@ -3526,20 +3523,18 @@ export const noHGNCgeneMock: Gene = {
     },
   ],
   median_expression: [],
-  druggability: [
-    {
-      sm_druggability_bucket: 3,
-      safety_bucket: 4,
-      abability_bucket: 3,
-      pharos_class: 'Tbio',
-      classification:
-        'Targetable by structure: Structurally druggable protein, based on the presence of a druggable pocket in the protein (DrugEBIlity/CanSAR).',
-      safety_bucket_definition:
-        'More than two of: high off target gene expression, cancer driver, essential gene, associated deleterious genetic disorder, HPO phenotype associated gene, or black box warning on clinically used drug.',
-      abability_bucket_definition:
-        'Cell membrane-bound proteins. Highly accessible to antibody-based therapies, but potentially less so than secreted proteins or ECM components.',
-    },
-  ],
+  druggability: {
+    sm_druggability_bucket: 3,
+    safety_bucket: 4,
+    abability_bucket: 3,
+    pharos_class: ['Tbio'],
+    classification:
+      'Targetable by structure: Structurally druggable protein, based on the presence of a druggable pocket in the protein (DrugEBIlity/CanSAR).',
+    safety_bucket_definition:
+      'More than two of: high off target gene expression, cancer driver, essential gene, associated deleterious genetic disorder, HPO phenotype associated gene, or black box warning on clinically used drug.',
+    abability_bucket_definition:
+      'Cell membrane-bound proteins. Highly accessible to antibody-based therapies, but potentially less so than secreted proteins or ECM components.',
+  },
   total_nominations: 4,
   is_adi: false,
   is_tep: false,
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 1201276f64..b205fee496 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -25,6 +25,7 @@
         "libs/agora/gene-comparison-tool/src/index.ts"
       ],
       "@sagebionetworks/agora/gene-details": ["libs/agora/genes/src/index.ts"],
+      "@sagebionetworks/agora/gene-similar": ["libs/agora/genes/src/index.ts"],
       "@sagebionetworks/agora/genes": ["libs/agora/genes/src/index.ts"],
       "@sagebionetworks/agora/home": ["libs/agora/home/src/index.ts"],
       "@sagebionetworks/agora/models": ["libs/agora/models/index.ts"],

From 5eaf8ab416c2b1a52e1056fa32c2f7b02ab5da46 Mon Sep 17 00:00:00 2001
From: sagely1 <114952739+sagely1@users.noreply.github.com>
Date: Sun, 5 Jan 2025 02:16:25 +0000
Subject: [PATCH 4/8] fixing warnings

---
 .../components/gene-similar/gene-similar.component.html   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.html b/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.html
index d7294137f5..3138d02b59 100644
--- a/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.html
+++ b/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.html
@@ -2,16 +2,16 @@
   <div class="section-inner">
     <div class="container-sm">
       <h1 class="h2">Similar Genes</h1>
-      @if (gene?.ensembl_gene_id) {
+      @if (gene.ensembl_gene_id) {
         <p>
           Genes that are similar to
-          <a class="link" [routerLink]="'/genes/' + gene?.ensembl_gene_id">{{
+          <a class="link" [routerLink]="'/genes/' + gene.ensembl_gene_id">{{
             gene.hgnc_symbol || gene.ensembl_gene_id
           }}</a>
           based on network coexpression.
         </p>
       }
-      @if (!gene?.ensembl_gene_id) {
+      @if (!gene.ensembl_gene_id) {
         <p>Genes that are similar based on network coexpression.</p>
       }
       <agora-modal-link text="Learn more about this table" header="Similar genes" wikiId="612974">
@@ -26,7 +26,7 @@ <h1 class="h2">Similar Genes</h1>
       <div class="mb-lg">
         <agora-gene-table
           className="similar-gene-table"
-          [exportFilename]="'genes-similar-' + gene?.ensembl_gene_id"
+          [exportFilename]="'genes-similar-' + gene.ensembl_gene_id"
           [genes]="genes"
           [columns]="tableColumns"
           sortField="hgnc_symbol"

From 9bb4a68c6fb4f1dc930d98014fdc9e9cf5b4df6f Mon Sep 17 00:00:00 2001
From: sagely1 <114952739+sagely1@users.noreply.github.com>
Date: Sun, 5 Jan 2025 02:17:47 +0000
Subject: [PATCH 5/8] moving github tag logic into config

---
 apps/agora/app/src/config/config.json                       | 3 ++-
 apps/agora/app/src/config/config.json.template              | 3 ++-
 libs/agora/config/src/lib/app.config.ts                     | 1 +
 libs/agora/ui/src/lib/components/footer/footer.component.ts | 3 ++-
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/agora/app/src/config/config.json b/apps/agora/app/src/config/config.json
index 93529eaf14..966efbcbb6 100644
--- a/apps/agora/app/src/config/config.json
+++ b/apps/agora/app/src/config/config.json
@@ -3,5 +3,6 @@
   "appVersion": "4.0.0",
   "csrApiUrl": "http://localhost:3333/v1",
   "ssrApiUrl": "http://agora-api:3333/v1",
-  "rollbarToken": "e788198867474855a996485580b08d03"
+  "rollbarToken": "e788198867474855a996485580b08d03",
+  "tagName": "agora/v0.0.2"
 }
diff --git a/apps/agora/app/src/config/config.json.template b/apps/agora/app/src/config/config.json.template
index df9875448f..c853400a4f 100644
--- a/apps/agora/app/src/config/config.json.template
+++ b/apps/agora/app/src/config/config.json.template
@@ -3,5 +3,6 @@
   "appVersion": "${APP_VERSION}",
   "csrApiUrl": "${CSR_API_URL}",
   "ssrApiUrl": "${SSR_API_URL}",
-  "rollbarToken": "${ROLLBAR_TOKEN}"
+  "rollbarToken": "${ROLLBAR_TOKEN}",
+  "tagName": "${TAG_NAME}"
 }
\ No newline at end of file
diff --git a/libs/agora/config/src/lib/app.config.ts b/libs/agora/config/src/lib/app.config.ts
index 4dd498a475..d6c60e5ea1 100644
--- a/libs/agora/config/src/lib/app.config.ts
+++ b/libs/agora/config/src/lib/app.config.ts
@@ -6,6 +6,7 @@ export interface AppConfig {
   ssrApiUrl: string;
   apiDocsUrl: string;
   rollbarToken: string;
+  tagName: string;
 }
 
 export const EMPTY_APP_CONFIG = {} as AppConfig;
diff --git a/libs/agora/ui/src/lib/components/footer/footer.component.ts b/libs/agora/ui/src/lib/components/footer/footer.component.ts
index d7c896d873..286bcea29a 100644
--- a/libs/agora/ui/src/lib/components/footer/footer.component.ts
+++ b/libs/agora/ui/src/lib/components/footer/footer.component.ts
@@ -27,7 +27,7 @@ export class FooterComponent implements OnInit {
   dataVersion$!: Observable<Dataversion>;
   sha$!: Observable<string>;
 
-  tag = 'agora/v0.0.2';
+  tag = '';
 
   navItems: Array<NavigationLink> = [
     {
@@ -48,6 +48,7 @@ export class FooterComponent implements OnInit {
 
   constructor() {
     this.footerLogoPath = this.sanitizer.sanitize('/agora-assets/images/footer-logo.svg');
+    this.tag = this.configService.config.tagName;
   }
 
   ngOnInit(): void {

From 0a70efa700bb7f67192220e9060c6014a1cdd518 Mon Sep 17 00:00:00 2001
From: sagely1 <114952739+sagely1@users.noreply.github.com>
Date: Thu, 9 Jan 2025 19:54:15 +0000
Subject: [PATCH 6/8] fixing similar component

---
 apps/agora/api/src/components/genes.ts        |   2 +-
 apps/agora/app/src/app/app.routes.ts          |   8 +-
 .../src/lib/.openapi-generator/FILES          |   1 +
 .../api-client-angular/src/lib/model/gene.ts  |   3 +-
 .../src/lib/model/geneNetworkLinks.ts         |  37 +++
 .../src/lib/model/models.ts                   |   1 +
 libs/agora/api-description/build/openapi.yaml |  27 ++-
 .../src/components/schemas/Gene.yaml          |   2 +-
 .../components/schemas/GeneNetworkLinks.yaml  |  24 ++
 libs/agora/genes/src/index.ts                 |   2 +-
 .../gene-details/gene-details.routes.ts       |   2 +-
 .../gene-similar/gene-similar.component.ts    |  14 +-
 .../gene-similar/gene-similar.routes.ts       |   4 +
 libs/agora/services/src/index.ts              |   1 +
 .../services/src/lib/gene.service.spec.ts.off | 118 ++++++++++
 libs/agora/services/src/lib/gene.service.ts   | 214 ++++++++++++++++++
 16 files changed, 442 insertions(+), 18 deletions(-)
 create mode 100644 libs/agora/api-client-angular/src/lib/model/geneNetworkLinks.ts
 create mode 100644 libs/agora/api-description/src/components/schemas/GeneNetworkLinks.yaml
 create mode 100644 libs/agora/genes/src/lib/components/gene-similar/gene-similar.routes.ts
 create mode 100644 libs/agora/services/src/lib/gene.service.spec.ts.off
 create mode 100644 libs/agora/services/src/lib/gene.service.ts

diff --git a/apps/agora/api/src/components/genes.ts b/apps/agora/api/src/components/genes.ts
index f79f135cec..c2cf8cdf5d 100644
--- a/apps/agora/api/src/components/genes.ts
+++ b/apps/agora/api/src/components/genes.ts
@@ -164,7 +164,7 @@ export async function genesRoute(req: Request, res: Response, next: NextFunction
   try {
     const result = await getGenes(<string | string[]>req.query.ids);
     setHeaders(res);
-    res.json({ items: result });
+    res.json(result);
   } catch (err) {
     next(err);
   }
diff --git a/apps/agora/app/src/app/app.routes.ts b/apps/agora/app/src/app/app.routes.ts
index 3dae949037..17c2e2b5f2 100644
--- a/apps/agora/app/src/app/app.routes.ts
+++ b/apps/agora/app/src/app/app.routes.ts
@@ -63,22 +63,22 @@ export const routes: Route[] = [
   {
     path: 'genes/:id/similar',
     loadChildren: () =>
-      import('@sagebionetworks/agora/gene-similar').then((routes) => routes.routes),
+      import('@sagebionetworks/agora/gene-similar').then((routes) => routes.similarRoute),
   },
   {
     path: 'genes/:id/:tab/:subtab',
     loadChildren: () =>
-      import('@sagebionetworks/agora/gene-details').then((routes) => routes.routes),
+      import('@sagebionetworks/agora/gene-details').then((routes) => routes.detailsRoute),
   },
   {
     path: 'genes/:id/:tab',
     loadChildren: () =>
-      import('@sagebionetworks/agora/gene-details').then((routes) => routes.routes),
+      import('@sagebionetworks/agora/gene-details').then((routes) => routes.detailsRoute),
   },
   {
     path: 'genes/:id',
     loadChildren: () =>
-      import('@sagebionetworks/agora/gene-details').then((routes) => routes.routes),
+      import('@sagebionetworks/agora/gene-details').then((routes) => routes.detailsRoute),
     data: {
       title: 'Agora | Gene Details',
       description: "View information and evidence about genes in Alzheimer's disease.",
diff --git a/libs/agora/api-client-angular/src/lib/.openapi-generator/FILES b/libs/agora/api-client-angular/src/lib/.openapi-generator/FILES
index 12e2b866df..b1eb0500b1 100644
--- a/libs/agora/api-client-angular/src/lib/.openapi-generator/FILES
+++ b/libs/agora/api-client-angular/src/lib/.openapi-generator/FILES
@@ -25,6 +25,7 @@ model/gCTGeneNominations.ts
 model/gCTGeneTissue.ts
 model/gCTGenesList.ts
 model/gene.ts
+model/geneNetworkLinks.ts
 model/genesList.ts
 model/medianExpression.ts
 model/models.ts
diff --git a/libs/agora/api-client-angular/src/lib/model/gene.ts b/libs/agora/api-client-angular/src/lib/model/gene.ts
index 5824d42f23..88a592af14 100644
--- a/libs/agora/api-client-angular/src/lib/model/gene.ts
+++ b/libs/agora/api-client-angular/src/lib/model/gene.ts
@@ -14,6 +14,7 @@ import { ExperimentalValidation } from './experimentalValidation';
 import { EnsemblInfo } from './ensemblInfo';
 import { RnaDifferentialExpression } from './rnaDifferentialExpression';
 import { BioDomains } from './bioDomains';
+import { GeneNetworkLinks } from './geneNetworkLinks';
 import { TargetNomination } from './targetNomination';
 import { NeuropathologicCorrelation } from './neuropathologicCorrelation';
 import { SimilarGenesNetwork } from './similarGenesNetwork';
@@ -53,7 +54,7 @@ export interface Gene {
   overall_scores?: OverallScores;
   neuropathologic_correlations?: Array<NeuropathologicCorrelation> | null;
   experimental_validation?: Array<ExperimentalValidation> | null;
-  links?: { [key: string]: object } | null;
+  links?: { [key: string]: GeneNetworkLinks } | null;
   similar_genes_network?: SimilarGenesNetwork;
   ab_modality_display_value?: string | null;
   safety_rating_display_value?: string | null;
diff --git a/libs/agora/api-client-angular/src/lib/model/geneNetworkLinks.ts b/libs/agora/api-client-angular/src/lib/model/geneNetworkLinks.ts
new file mode 100644
index 0000000000..5e15003b83
--- /dev/null
+++ b/libs/agora/api-client-angular/src/lib/model/geneNetworkLinks.ts
@@ -0,0 +1,37 @@
+/**
+ * Agora REST API
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1.0.0
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+/**
+ * Gene Network Links
+ */
+export interface GeneNetworkLinks {
+  /**
+   * Ensembl gene ID for gene A
+   */
+  geneA_ensembl_gene_id: string;
+  /**
+   * Ensembl gene ID for gene B
+   */
+  geneB_ensembl_gene_id: string;
+  /**
+   * External gene name for gene A
+   */
+  geneA_external_gene_name: string;
+  /**
+   * External gene name for gene B
+   */
+  geneB_external_gene_name: string;
+  /**
+   * Associated brain region
+   */
+  brainRegion: string;
+}
diff --git a/libs/agora/api-client-angular/src/lib/model/models.ts b/libs/agora/api-client-angular/src/lib/model/models.ts
index 3491bc9305..6a4a50220e 100644
--- a/libs/agora/api-client-angular/src/lib/model/models.ts
+++ b/libs/agora/api-client-angular/src/lib/model/models.ts
@@ -12,6 +12,7 @@ export * from './gCTGeneNominations';
 export * from './gCTGeneTissue';
 export * from './gCTGenesList';
 export * from './gene';
+export * from './geneNetworkLinks';
 export * from './genesList';
 export * from './medianExpression';
 export * from './neuropathologicCorrelation';
diff --git a/libs/agora/api-description/build/openapi.yaml b/libs/agora/api-description/build/openapi.yaml
index 47c75e2c44..0a4db77e34 100644
--- a/libs/agora/api-description/build/openapi.yaml
+++ b/libs/agora/api-description/build/openapi.yaml
@@ -623,6 +623,31 @@ components:
         - reference_doi
         - date_report
         - abability_bucket_definition
+    GeneNetworkLinks:
+      type: object
+      description: Gene Network Links
+      properties:
+        geneA_ensembl_gene_id:
+          type: string
+          description: Ensembl gene ID for gene A
+        geneB_ensembl_gene_id:
+          type: string
+          description: Ensembl gene ID for gene B
+        geneA_external_gene_name:
+          type: string
+          description: External gene name for gene A
+        geneB_external_gene_name:
+          type: string
+          description: External gene name for gene B
+        brainRegion:
+          type: string
+          description: Associated brain region
+      required:
+        - geneA_ensembl_gene_id
+        - geneB_ensembl_gene_id
+        - geneA_external_gene_name
+        - geneB_external_gene_name
+        - brainRegion
     SimilarGenesNetworkNode:
       type: object
       description: SimilarGenesNetworkNode
@@ -808,7 +833,7 @@ components:
         links:
           type: object
           additionalProperties:
-            type: object
+            $ref: '#/components/schemas/GeneNetworkLinks'
           nullable: true
         similar_genes_network:
           $ref: '#/components/schemas/SimilarGenesNetwork'
diff --git a/libs/agora/api-description/src/components/schemas/Gene.yaml b/libs/agora/api-description/src/components/schemas/Gene.yaml
index cc652d1cae..e3cfbee2e4 100644
--- a/libs/agora/api-description/src/components/schemas/Gene.yaml
+++ b/libs/agora/api-description/src/components/schemas/Gene.yaml
@@ -92,7 +92,7 @@ properties:
   links:
     type: object
     additionalProperties:
-      type: object
+      $ref: GeneNetworkLinks.yaml
     nullable: true
   similar_genes_network:
     $ref: SimilarGenesNetwork.yaml
diff --git a/libs/agora/api-description/src/components/schemas/GeneNetworkLinks.yaml b/libs/agora/api-description/src/components/schemas/GeneNetworkLinks.yaml
new file mode 100644
index 0000000000..2f8db22943
--- /dev/null
+++ b/libs/agora/api-description/src/components/schemas/GeneNetworkLinks.yaml
@@ -0,0 +1,24 @@
+type: object
+description: Gene Network Links
+properties:
+  geneA_ensembl_gene_id:
+    type: string
+    description: 'Ensembl gene ID for gene A'
+  geneB_ensembl_gene_id:
+    type: string
+    description: 'Ensembl gene ID for gene B'
+  geneA_external_gene_name:
+    type: string
+    description: 'External gene name for gene A'
+  geneB_external_gene_name:
+    type: string
+    description: 'External gene name for gene B'
+  brainRegion:
+    type: string
+    description: 'Associated brain region'
+required:
+  - geneA_ensembl_gene_id
+  - geneB_ensembl_gene_id
+  - geneA_external_gene_name
+  - geneB_external_gene_name
+  - brainRegion
diff --git a/libs/agora/genes/src/index.ts b/libs/agora/genes/src/index.ts
index 1f78ba7bb3..a0ae9fe241 100644
--- a/libs/agora/genes/src/index.ts
+++ b/libs/agora/genes/src/index.ts
@@ -12,7 +12,7 @@ export * from './lib/components/gene-nominations/gene-nominations.component';
 export * from './lib/components/gene-protein-selector/gene-protein-selector.component';
 export * from './lib/components/gene-resources/gene-resources.component';
 export * from './lib/components/gene-search/gene-search.component';
-export * from './lib/components/gene-similar/gene-similar.component';
+export * from './lib/components/gene-similar/gene-similar.routes';
 export * from './lib/components/gene-soe/gene-soe.component';
 export * from './lib/components/gene-soe-charts/gene-soe-charts.component';
 export * from './lib/components/gene-soe-list/gene-soe-list.component';
diff --git a/libs/agora/genes/src/lib/components/gene-details/gene-details.routes.ts b/libs/agora/genes/src/lib/components/gene-details/gene-details.routes.ts
index 3f44758a55..4d8024c6d4 100644
--- a/libs/agora/genes/src/lib/components/gene-details/gene-details.routes.ts
+++ b/libs/agora/genes/src/lib/components/gene-details/gene-details.routes.ts
@@ -1,4 +1,4 @@
 import { Routes } from '@angular/router';
 import { GeneDetailsComponent } from './gene-details.component';
 
-export const routes: Routes = [{ path: '', component: GeneDetailsComponent }];
+export const detailsRoute: Routes = [{ path: '', component: GeneDetailsComponent }];
diff --git a/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.ts b/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.ts
index f407bad551..4e30c90447 100644
--- a/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.ts
+++ b/libs/agora/genes/src/lib/components/gene-similar/gene-similar.component.ts
@@ -1,7 +1,7 @@
 import { Component, inject, OnInit } from '@angular/core';
 import { Router, ActivatedRoute, ParamMap, RouterLink } from '@angular/router';
-import { Gene, GenesService } from '@sagebionetworks/agora/api-client-angular';
-import { HelperService } from '@sagebionetworks/agora/services';
+import { Gene } from '@sagebionetworks/agora/api-client-angular';
+import { GeneService, HelperService } from '@sagebionetworks/agora/services';
 import { GeneTableComponent } from '../gene-table/gene-table.component';
 import { ModalLinkComponent, SvgIconComponent } from '@sagebionetworks/agora/shared';
 
@@ -15,14 +15,14 @@ interface TableColumn {
   selector: 'agora-gene-similar',
   standalone: true,
   imports: [ModalLinkComponent, GeneTableComponent, RouterLink, SvgIconComponent],
-  providers: [GenesService],
+  providers: [GeneService],
   templateUrl: './gene-similar.component.html',
   styleUrls: ['./gene-similar.component.scss'],
 })
 export class GeneSimilarComponent implements OnInit {
   route = inject(ActivatedRoute);
   router = inject(Router);
-  genesService = inject(GenesService);
+  geneService = inject(GeneService);
   helperService = inject(HelperService);
 
   gene: Gene = {} as Gene;
@@ -59,7 +59,7 @@ export class GeneSimilarComponent implements OnInit {
     this.route.paramMap.subscribe((params: ParamMap) => {
       if (params.get('id')) {
         this.helperService.setLoading(true);
-        this.genesService.getGene(params.get('id') as string).subscribe((gene: Gene | null) => {
+        this.geneService.getGene(params.get('id') as string).subscribe((gene: Gene | null) => {
           if (!gene) {
             this.helperService.setLoading(false);
             // https://github.com/angular/angular/issues/45202
@@ -84,9 +84,7 @@ export class GeneSimilarComponent implements OnInit {
       ids.push(obj.ensembl_gene_id);
     });
 
-    this.genesService.getGenes(ids).subscribe((response) => {
-      const genes = response;
-
+    this.geneService.getGenes(ids).subscribe((genes) => {
       genes.forEach((de: Gene) => {
         // Populate display fields & set default values
         de.is_any_rna_changed_in_ad_brain_display_value = de.rna_brain_change_studied
diff --git a/libs/agora/genes/src/lib/components/gene-similar/gene-similar.routes.ts b/libs/agora/genes/src/lib/components/gene-similar/gene-similar.routes.ts
new file mode 100644
index 0000000000..0e8d0e4d6f
--- /dev/null
+++ b/libs/agora/genes/src/lib/components/gene-similar/gene-similar.routes.ts
@@ -0,0 +1,4 @@
+import { Routes } from '@angular/router';
+import { GeneSimilarComponent } from './gene-similar.component';
+
+export const similarRoute: Routes = [{ path: '', component: GeneSimilarComponent }];
diff --git a/libs/agora/services/src/index.ts b/libs/agora/services/src/index.ts
index 0fbabd3ca1..dd993dd359 100644
--- a/libs/agora/services/src/index.ts
+++ b/libs/agora/services/src/index.ts
@@ -1,4 +1,5 @@
 export * from './lib/error.service';
+export * from './lib/gene.service';
 export * from './lib/github.service';
 export * from './lib/helper.service';
 export * from './lib/rollbar.service';
diff --git a/libs/agora/services/src/lib/gene.service.spec.ts.off b/libs/agora/services/src/lib/gene.service.spec.ts.off
new file mode 100644
index 0000000000..19153d182c
--- /dev/null
+++ b/libs/agora/services/src/lib/gene.service.spec.ts.off
@@ -0,0 +1,118 @@
+// -------------------------------------------------------------------------- //
+// External
+// -------------------------------------------------------------------------- //
+import { TestBed } from '@angular/core/testing';
+import {
+  HttpClientTestingModule,
+  HttpTestingController,
+} from '@angular/common/http/testing';
+
+// -------------------------------------------------------------------------- //
+// Internal
+// -------------------------------------------------------------------------- //
+import { GeneService } from '.';
+import { ApiService } from '../../../core/services';
+import { geneMock1, gctGeneMock1, distributionMock, bioDomainsMock, bioDomainInfoMock } from '../../../testing';
+
+// -------------------------------------------------------------------------- //
+// Tests
+// -------------------------------------------------------------------------- //
+describe('Service: Gene', () => {
+  let geneService: GeneService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [GeneService, ApiService],
+    });
+
+    geneService = TestBed.inject(GeneService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  it('should create', () => {
+    expect(geneService).toBeDefined();
+  });
+
+  it('should get gene', () => {
+    const mockResponse = geneMock1;
+
+    geneService.getGene(geneMock1.ensembl_gene_id).subscribe((response) => {
+      expect(response).toEqual(mockResponse);
+    });
+
+    const req = httpMock.expectOne('/api/genes/' + geneMock1.ensembl_gene_id);
+    expect(req.request.method).toBe('GET');
+    req.flush(mockResponse);
+  });
+
+  it('should get statistical models', () => {
+    expect(geneService.getStatisticalModels(geneMock1).length).not.toEqual(0);
+  });
+
+  it('should get similar genes network', () => {
+    expect(
+      geneService.getSimilarGenesNetwork(geneMock1)?.nodes?.length
+    ).not.toEqual(0);
+  });
+
+  it('should get distribution', () => {
+    const mockResponse = distributionMock;
+
+    geneService.getDistribution().subscribe((response) => {
+      expect(response).toEqual(mockResponse);
+    });
+
+    const req = httpMock.expectOne('/api/distribution');
+    expect(req.request.method).toBe('GET');
+    req.flush(mockResponse);
+  });
+
+  it('should get comparison genes', () => {
+    const mockResponse = { items: [gctGeneMock1] };
+
+    geneService
+      .getComparisonGenes(
+        'RNA - Differential Expression',
+        'AD Diagnosis (males and females)'
+      )
+      .subscribe((response) => {
+        expect(response).toEqual(mockResponse);
+      });
+
+    const req = httpMock.expectOne(
+      '/api/genes/comparison?category=RNA%20-%20Differential%20Expression&subCategory=AD%20Diagnosis%20(males%20and%20females)'
+    );
+    expect(req.request.method).toBe('GET');
+    req.flush(mockResponse);
+  });
+
+  it('should get biodomains', () => {
+    const mockResponse = bioDomainsMock.gene_biodomains;
+
+    geneService.getBiodomains(bioDomainsMock.ensembl_gene_id).subscribe((response) => {
+      expect(response).toEqual(mockResponse);
+    });
+
+    const req = httpMock.expectOne('/api/biodomains/' + bioDomainsMock.ensembl_gene_id);
+    expect(req.request.method).toBe('GET');
+    req.flush(mockResponse);
+  });
+
+  it('should get all biodomains', () => {
+    const mockResponse = bioDomainInfoMock;
+
+    geneService.getAllBiodomains().subscribe((response) => {
+      expect(response).toEqual(mockResponse);
+    });
+
+    const req = httpMock.expectOne('/api/biodomains');
+    expect(req.request.method).toBe('GET');
+    req.flush(mockResponse);
+  });
+});
diff --git a/libs/agora/services/src/lib/gene.service.ts b/libs/agora/services/src/lib/gene.service.ts
new file mode 100644
index 0000000000..71965ad689
--- /dev/null
+++ b/libs/agora/services/src/lib/gene.service.ts
@@ -0,0 +1,214 @@
+import { inject, Injectable } from '@angular/core';
+import {
+  BioDomain,
+  BioDomainInfo,
+  BioDomainsService,
+  Distribution,
+  DistributionService,
+  Gene,
+  GenesService,
+  SimilarGenesNetwork,
+  SimilarGenesNetworkLink,
+  SimilarGenesNetworkNode,
+} from '@sagebionetworks/agora/api-client-angular';
+import { of, Observable } from 'rxjs';
+import { map, tap, share, finalize } from 'rxjs/operators';
+
+@Injectable()
+export class GeneService {
+  genes: { [key: string]: Gene } = {};
+  distribution: Distribution | undefined = undefined;
+  distributionObservable: Observable<Distribution> | undefined;
+  comparisonData: any = {};
+
+  bioDomains: { [key: string]: BioDomain[] } = {};
+  allBioDomains: BioDomainInfo[] = [];
+
+  genesService = inject(GenesService);
+  bioDomainsService = inject(BioDomainsService);
+  distributionService = inject(DistributionService);
+
+  getGene(id: string): Observable<Gene | null> {
+    if (this.genes[id]) {
+      return of(this.genes[id]);
+    }
+
+    return this.genesService.getGene(id).pipe(
+      map((gene: Gene | null) => {
+        if (!gene) return null;
+        gene.similar_genes_network = this.getSimilarGenesNetwork(gene);
+        return (this.genes[id] = gene);
+      }),
+    );
+  }
+
+  // ------------------------------------------------------------------------ //
+
+  getGenes(ids: string | string[]): Observable<Gene[]> {
+    if (typeof ids === 'object') {
+      ids = ids.join(',');
+    }
+
+    return this.genesService.getGenes(ids);
+  }
+
+  getStatisticalModels(gene: Gene) {
+    const models: string[] = [];
+
+    gene.rna_differential_expression?.forEach((item: any) => {
+      if (!models.includes(item.model)) {
+        models.push(item.model);
+      }
+    });
+
+    return models;
+  }
+
+  getSimilarGenesNetwork(gene: Gene): SimilarGenesNetwork {
+    const nodes: { [key: string]: SimilarGenesNetworkNode } = {};
+    const links: { [key: string]: SimilarGenesNetworkLink } = {};
+    const response: SimilarGenesNetwork = {
+      nodes: [],
+      links: [],
+      min: 0,
+      max: 0,
+    };
+
+    if (gene.links) {
+      Object.values(gene.links).forEach((link) => {
+        const a: string = link.geneA_ensembl_gene_id;
+        const b: string = link.geneB_ensembl_gene_id;
+        const key = a + b;
+        const rKey = b + a;
+
+        // Check if a reverse link already exists
+        if (links[rKey] && !links[rKey].brain_regions.includes(link['brainRegion'])) {
+          links[rKey].brain_regions.push(link['brainRegion']);
+          return;
+        }
+
+        if (!links[key]) {
+          links[key] = {
+            source: a,
+            target: b,
+            source_hgnc_symbol: link?.geneA_external_gene_name,
+            target_hgnc_symbol: link?.geneB_external_gene_name,
+            brain_regions: [link.brainRegion],
+          };
+        } else if (!links[key].brain_regions.includes(link['brainRegion'])) {
+          links[key].brain_regions.push(link['brainRegion']);
+        }
+      });
+    }
+
+    response.links = Object.values(links).sort((a: any, b: any) => {
+      return a.brain_regions?.length - b.brain_regions?.length;
+    });
+
+    response.links.forEach((link: any) => {
+      link.brain_regions.sort();
+
+      ['source', 'target'].forEach((key: any) => {
+        if (!nodes[link[key]]) {
+          nodes[link[key]] = {
+            ensembl_gene_id: link[key],
+            hgnc_symbol: link[key + '_hgnc_symbol'],
+            brain_regions: link.brain_regions,
+          };
+        } else {
+          link.brain_regions.forEach((brainRegion: any) => {
+            if (!nodes[link[key]].brain_regions.includes(brainRegion)) {
+              nodes[link[key]].brain_regions.push(brainRegion);
+            }
+          });
+        }
+      });
+    });
+
+    response.nodes = Object.values(nodes)
+      .sort((a: any, b: any) => {
+        return a.brain_regions?.length - b.brain_regions?.length;
+      })
+      .reverse();
+
+    response.nodes.forEach((node: any, i: number) => {
+      node.brain_regions.sort();
+
+      if (node.brain_regions.length < response.min) {
+        response.min = node.brain_regions.length;
+      }
+
+      if (node.brain_regions.length > response.max) {
+        response.max = node.brain_regions.length;
+      }
+
+      // Insert current node to the beginning of the array
+      if (node.ensembl_gene_id === gene.ensembl_gene_id) {
+        const currentNode = node;
+        response.nodes.splice(i, 1);
+        response.nodes.unshift(currentNode);
+      }
+    });
+
+    return response;
+  }
+
+  // ------------------------------------------------------------------------ //
+
+  getBiodomains(ensg: string): Observable<BioDomain[]> {
+    if (this.bioDomains[ensg]) {
+      return of(this.bioDomains[ensg]);
+    }
+
+    return this.bioDomainsService.getBioDomain(ensg).pipe(
+      map((data: BioDomain[]) => {
+        return (this.bioDomains[ensg] = data);
+      }),
+    );
+  }
+
+  // ------------------------------------------------------------------------ //
+
+  getAllBiodomains(): Observable<BioDomainInfo[]> {
+    if (this.allBioDomains.length > 0) {
+      return of(this.allBioDomains);
+    }
+
+    return this.bioDomainsService.listBioDomains();
+  }
+
+  // ------------------------------------------------------------------------ //
+
+  getDistribution(): Observable<Distribution> {
+    if (this.distribution) {
+      return of(this.distribution);
+    } else if (this.distributionObservable) {
+      return this.distributionObservable;
+    } else {
+      this.distributionObservable = this.distributionService.getDistribution().pipe(
+        tap((data: any) => (this.distribution = data)),
+        share(),
+        finalize(() => (this.distributionObservable = undefined)),
+      );
+      return this.distributionObservable;
+    }
+  }
+
+  // ------------------------------------------------------------------------ //
+
+  getComparisonGenes(
+    category: 'RNA - Differential Expression' | 'Protein - Differential Expression',
+    subCategory: string,
+  ) {
+    const key = category + subCategory;
+    if (this.comparisonData[key]) {
+      return of(this.comparisonData[key]);
+    } else {
+      return this.genesService.getComparisonGenes(category, subCategory).pipe(
+        tap((data) => {
+          this.comparisonData[key] = data;
+        }),
+      );
+    }
+  }
+}

From 67de6777c86603e258cafea161255d54f7db1fe9 Mon Sep 17 00:00:00 2001
From: sagely1 <114952739+sagely1@users.noreply.github.com>
Date: Thu, 9 Jan 2025 22:04:04 +0000
Subject: [PATCH 7/8] remove overlay component

---
 .../loading-overlay.component.html            | 10 ------
 .../loading-overlay.component.scss            | 33 -----------------
 .../loading-overlay.component.spec.ts         | 36 -------------------
 .../loading-overlay.component.ts              | 29 ---------------
 4 files changed, 108 deletions(-)
 delete mode 100644 libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.html
 delete mode 100644 libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.scss
 delete mode 100644 libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.spec.ts
 delete mode 100644 libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.ts

diff --git a/libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.html b/libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.html
deleted file mode 100644
index 1415a66a71..0000000000
--- a/libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<pre>
-  isActive: {{ isActive }} 
-  isGlobal: {{ isGlobal }}
-</pre>
-
-<div class="loading-overlay" [ngClass]="{ global: isGlobal, active: isActive }">
-  <div class="loading-overlay-inner">
-    <agora-loading-icon></agora-loading-icon>
-  </div>
-</div>
diff --git a/libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.scss b/libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.scss
deleted file mode 100644
index 101671d7b8..0000000000
--- a/libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@import 'libs/agora/styles/src/lib/variables';
-@import 'libs/agora/styles/src/lib/mixins';
-
-.loading-overlay {
-  background-color: #fff;
-  opacity: 0;
-  visibility: hidden;
-  transition: var(--transition-duration);
-
-  .loading-overlay-inner {
-    display: flex;
-    padding: 30px;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-  }
-
-  &.global {
-    position: fixed;
-    inset: 0;
-    z-index: 9999;
-
-    .loading-overlay-inner {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &.active {
-    opacity: 1;
-    visibility: visible;
-  }
-}
diff --git a/libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.spec.ts b/libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.spec.ts
deleted file mode 100644
index d6d24abb52..0000000000
--- a/libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.spec.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-// -------------------------------------------------------------------------- //
-// External
-// -------------------------------------------------------------------------- //
-import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { provideRouter } from '@angular/router';
-
-// -------------------------------------------------------------------------- //
-// Internal
-// -------------------------------------------------------------------------- //
-import { LoadingOverlayComponent } from './loading-overlay.component';
-import { HelperService } from '@sagebionetworks/agora/services';
-
-// -------------------------------------------------------------------------- //
-// Tests
-// -------------------------------------------------------------------------- //
-describe('Component: Loading Overlay', () => {
-  let component: LoadingOverlayComponent;
-  let fixture: ComponentFixture<LoadingOverlayComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [],
-      providers: [HelperService, provideRouter([])],
-    }).compileComponents();
-  });
-
-  beforeEach(async () => {
-    fixture = TestBed.createComponent(LoadingOverlayComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.ts b/libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.ts
deleted file mode 100644
index a628b1a844..0000000000
--- a/libs/agora/shared/src/lib/loading-overlay/loading-overlay.component.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Component, inject, Input, OnInit } from '@angular/core';
-import { HelperService } from '@sagebionetworks/agora/services';
-import { CommonModule } from '@angular/common';
-import { LoadingIconComponent } from '../loading-icon/loading-icon.component';
-
-@Component({
-  selector: 'agora-loading-overlay',
-  standalone: true,
-  imports: [CommonModule, LoadingIconComponent],
-  providers: [HelperService],
-  templateUrl: './loading-overlay.component.html',
-  styleUrls: ['./loading-overlay.component.scss'],
-})
-export class LoadingOverlayComponent implements OnInit {
-  helperService = inject(HelperService);
-
-  @Input() isGlobal = false;
-  @Input() isActive = false;
-
-  ngOnInit() {
-    console.log('global', this.isGlobal);
-    if (this.isGlobal) {
-      this.helperService.loadingChange.subscribe(() => {
-        this.isActive = this.helperService.getLoading();
-        console.log('active', this.isActive);
-      });
-    }
-  }
-}

From df594cc9834717bf00ba84610952623d6246b0d8 Mon Sep 17 00:00:00 2001
From: sagely1 <114952739+sagely1@users.noreply.github.com>
Date: Thu, 9 Jan 2025 23:27:16 +0000
Subject: [PATCH 8/8] strongly typing GitHub tag response, adding code review
 suggestions

---
 apps/agora/app/src/app/app.routes.ts                     | 8 ++++----
 .../lib/components/gene-hero/gene-hero.component.html    | 4 ++--
 libs/agora/genes/tsconfig.spec.json                      | 8 +-------
 libs/agora/services/src/lib/github.service.ts            | 9 ++++++++-
 libs/agora/shared/src/index.ts                           | 1 -
 .../ui/src/lib/components/footer/footer.component.ts     | 5 +++++
 tsconfig.base.json                                       | 2 --
 7 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/apps/agora/app/src/app/app.routes.ts b/apps/agora/app/src/app/app.routes.ts
index 17c2e2b5f2..bbc568a890 100644
--- a/apps/agora/app/src/app/app.routes.ts
+++ b/apps/agora/app/src/app/app.routes.ts
@@ -63,22 +63,22 @@ export const routes: Route[] = [
   {
     path: 'genes/:id/similar',
     loadChildren: () =>
-      import('@sagebionetworks/agora/gene-similar').then((routes) => routes.similarRoute),
+      import('@sagebionetworks/agora/genes').then((routes) => routes.similarRoute),
   },
   {
     path: 'genes/:id/:tab/:subtab',
     loadChildren: () =>
-      import('@sagebionetworks/agora/gene-details').then((routes) => routes.detailsRoute),
+      import('@sagebionetworks/agora/genes').then((routes) => routes.detailsRoute),
   },
   {
     path: 'genes/:id/:tab',
     loadChildren: () =>
-      import('@sagebionetworks/agora/gene-details').then((routes) => routes.detailsRoute),
+      import('@sagebionetworks/agora/genes').then((routes) => routes.detailsRoute),
   },
   {
     path: 'genes/:id',
     loadChildren: () =>
-      import('@sagebionetworks/agora/gene-details').then((routes) => routes.detailsRoute),
+      import('@sagebionetworks/agora/genes').then((routes) => routes.detailsRoute),
     data: {
       title: 'Agora | Gene Details',
       description: "View information and evidence about genes in Alzheimer's disease.",
diff --git a/libs/agora/genes/src/lib/components/gene-hero/gene-hero.component.html b/libs/agora/genes/src/lib/components/gene-hero/gene-hero.component.html
index cdc6363231..a8733547af 100644
--- a/libs/agora/genes/src/lib/components/gene-hero/gene-hero.component.html
+++ b/libs/agora/genes/src/lib/components/gene-hero/gene-hero.component.html
@@ -37,9 +37,9 @@ <h4 class="gene-hero-pharos-heading">Pharos Class</h4>
           }
           <div class="gene-hero-aliases">
             <h4 class="gene-hero-aliases-heading">Also known as</h4>
-            @if (getEnsemblUrl()) {
+            @if (getEnsemblUrl(); as ensemblUrl) {
               <p class="aliases">
-                <a [href]="getEnsemblUrl()" target="_blank">{{ gene.ensembl_gene_id }}</a>
+                <a [href]="ensemblUrl" target="_blank">{{ gene.ensembl_gene_id }}</a>
                 @if (gene.ensembl_info.ensembl_release) {
                   <span> (Ensembl Release {{ gene.ensembl_info.ensembl_release }}) </span>
                 }
diff --git a/libs/agora/genes/tsconfig.spec.json b/libs/agora/genes/tsconfig.spec.json
index 42ad3758ea..d3889a9881 100644
--- a/libs/agora/genes/tsconfig.spec.json
+++ b/libs/agora/genes/tsconfig.spec.json
@@ -6,11 +6,5 @@
     "types": ["jest", "node"]
   },
   "files": ["src/test-setup.ts"],
-  "include": [
-    "**/*.test.ts",
-    "**/*.spec.ts",
-    "**/*.d.ts",
-    "jest.config.ts",
-    "src/lib/components/gene-similar/gene-similar.component.spec.ts"
-  ]
+  "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts", "jest.config.ts"]
 }
diff --git a/libs/agora/services/src/lib/github.service.ts b/libs/agora/services/src/lib/github.service.ts
index d46c0c0f18..f08c504aac 100644
--- a/libs/agora/services/src/lib/github.service.ts
+++ b/libs/agora/services/src/lib/github.service.ts
@@ -3,6 +3,13 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
+export interface GitHubTag {
+  name: string;
+  commit: {
+    sha: string;
+  };
+}
+
 @Injectable({
   providedIn: 'root',
 })
@@ -12,7 +19,7 @@ export class GitHubService {
   private apiUrl = 'https://api.github.com/repos/Sage-Bionetworks/sage-monorepo/tags';
 
   getCommitSHA(tagName: string): Observable<string> {
-    return this.http.get<any[]>(this.apiUrl).pipe(
+    return this.http.get<GitHubTag[]>(this.apiUrl).pipe(
       map((tags) => {
         const tag = tags.find((t) => t.name === tagName);
         return tag ? this.getShortSHA(tag.commit.sha) : '';
diff --git a/libs/agora/shared/src/index.ts b/libs/agora/shared/src/index.ts
index 9cb907b00a..65c8a9857a 100644
--- a/libs/agora/shared/src/index.ts
+++ b/libs/agora/shared/src/index.ts
@@ -1,6 +1,5 @@
 export * from './lib/helpers/functions';
 export * from './lib/loading-icon/loading-icon.component';
-export * from './lib/loading-overlay/loading-overlay.component';
 export * from './lib/modal-link/modal-link.component';
 export * from './lib/svg-icon/svg-icon.component';
 export * from './lib/wiki/wiki.component';
diff --git a/libs/agora/ui/src/lib/components/footer/footer.component.ts b/libs/agora/ui/src/lib/components/footer/footer.component.ts
index 286bcea29a..80536dbfef 100644
--- a/libs/agora/ui/src/lib/components/footer/footer.component.ts
+++ b/libs/agora/ui/src/lib/components/footer/footer.component.ts
@@ -27,6 +27,11 @@ export class FooterComponent implements OnInit {
   dataVersion$!: Observable<Dataversion>;
   sha$!: Observable<string>;
 
+  /*
+   TODO find out what the final tag format should be and potentially eliminate the 
+   environmental variable for the tag since it can be deterministically generated
+   from the site version
+   */
   tag = '';
 
   navItems: Array<NavigationLink> = [
diff --git a/tsconfig.base.json b/tsconfig.base.json
index b205fee496..7e18115cee 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -24,8 +24,6 @@
       "@sagebionetworks/agora/gene-comparison-tool": [
         "libs/agora/gene-comparison-tool/src/index.ts"
       ],
-      "@sagebionetworks/agora/gene-details": ["libs/agora/genes/src/index.ts"],
-      "@sagebionetworks/agora/gene-similar": ["libs/agora/genes/src/index.ts"],
       "@sagebionetworks/agora/genes": ["libs/agora/genes/src/index.ts"],
       "@sagebionetworks/agora/home": ["libs/agora/home/src/index.ts"],
       "@sagebionetworks/agora/models": ["libs/agora/models/index.ts"],