feat(agora): agora fixes (AG-1604) and Q4 2024 changes (AG-1605)

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

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>

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',

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: () =>

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"
 }

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}"
 }

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"

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;

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;

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

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'

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

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();
   }

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;

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>

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;