feat(agora): migrate GCT (AG-1602) (#2953)

.vscode/launch.json

@@ -0,0 +1,22 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Attach to Chrome",
+      "port": 4200,
+      "request": "attach",
+      "type": "chrome",
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

apps/agora/api/src/components/distribution.ts

@@ -15,7 +15,6 @@ import {
 import {
   RnaDistribution,
   Distribution,
-  OverallScores,
   OverallScoresDistribution,
   ProteomicsDistribution,
 } from '@sagebionetworks/agora/api-client-angular';

apps/agora/api/src/models/overall-scores.ts

@@ -6,10 +6,7 @@ import { Schema, model } from 'mongoose';
 // -------------------------------------------------------------------------- //
 // Internal
 // -------------------------------------------------------------------------- //
-import {
-  OverallScores,
-  OverallScoresDistribution,
-} from '@sagebionetworks/agora/api-client-angular';
+import { OverallScores } from '@sagebionetworks/agora/api-client-angular';
 
 // -------------------------------------------------------------------------- //
 // Schemas

apps/agora/app/project.json

@@ -57,12 +57,12 @@
             {
               "type": "initial",
               "maximumWarning": "1mb",
-              "maximumError": "2mb"
+              "maximumError": "3mb"
             },
             {
               "type": "anyComponentStyle",
               "maximumWarning": "2kb",
-              "maximumError": "10kb"
+              "maximumError": "20kb"
             }
           ],
           "outputHashing": "all"

apps/agora/app/src/app/app.component.html

@@ -1,3 +1,9 @@
-<agora-header></agora-header>
-<router-outlet></router-outlet>
-<agora-footer></agora-footer>
+<div id="container">
+  <agora-header></agora-header>
+  <div id="main-content">
+    <router-outlet></router-outlet>
+  </div>
+  <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.scss

@@ -0,0 +1,9 @@
+#container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+#main-content {
+  flex: 1;
+}

apps/agora/app/src/app/app.component.ts

@@ -1,12 +1,19 @@
 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 } from '@sagebionetworks/agora/ui';
+import {
+  FooterComponent,
+  HeaderComponent,
+  LoadingOverlayComponent,
+} 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],
+  imports: [RouterModule, HeaderComponent, FooterComponent, LoadingOverlayComponent, ToastModule],
+  providers: [MessageService],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',

apps/agora/app/src/app/app.routes.ts

@@ -27,6 +27,16 @@ export const routes: Route[] = [
       description: "See what's new in Agora, from new features to our latest data updates.",
     },
   },
+  {
+    path: 'genes/comparison',
+    loadChildren: () =>
+      import('@sagebionetworks/agora/gene-comparison-tool').then((routes) => routes.routes),
+    data: {
+      title: 'Gene Comparison | Visual comparison tool for AD genes',
+      description:
+        'Explore high-dimensional omics data with our visual gene comparison tool, then build, share, and download visualizations for your own custom gene lists.',
+    },
+  },
   {
     path: 'genes/nominated-targets',
     loadChildren: () =>
@@ -50,6 +60,25 @@ export const routes: Route[] = [
       description: 'Nominate a gene as a new candidate for AD treatment or prevention.',
     },
   },
+  {
+    path: 'genes/:id/:tab/:subtab',
+    loadChildren: () =>
+      import('@sagebionetworks/agora/gene-details').then((routes) => routes.routes),
+  },
+  {
+    path: 'genes/:id/:tab',
+    loadChildren: () =>
+      import('@sagebionetworks/agora/gene-details').then((routes) => routes.routes),
+  },
+  {
+    path: 'genes/:id',
+    loadChildren: () =>
+      import('@sagebionetworks/agora/gene-details').then((routes) => routes.routes),
+    data: {
+      title: 'Agora | Gene Details',
+      description: "View information and evidence about genes in Alzheimer's disease.",
+    },
+  },
   {
     path: 'not-found',
     loadChildren: () => import('@sagebionetworks/agora/not-found').then((routes) => routes.routes),
@@ -60,7 +89,7 @@ export const routes: Route[] = [
   },
   {
     path: 'teams',
-    loadChildren: () => import('@sagebionetworks/agora/teams').then((routes) => routes.teamsRoutes),
+    loadChildren: () => import('@sagebionetworks/agora/teams').then((routes) => routes.routes),
     data: {
       title: 'Contributing Teams',
       description:

apps/agora/app/src/types/dom-to-image-more.d.ts

@@ -0,0 +1,4 @@
+declare module 'dom-to-image-more' {
+  import domToImage = require('dom-to-image-more');
+  export = domToImage;
+}

libs/agora/about/src/lib/about.component.html

@@ -13,3 +13,11 @@ <h1 class="h2">About</h1>
     </div>
   </div>
 </div>
+
+<agora-score-barchart
+  [shouldResize]="false"
+  [score]="20"
+  [barColor]="'#8B8AD1'"
+  [data]="scoreDistribution"
+>
+</agora-score-barchart>

libs/agora/about/src/lib/about.component.ts

@@ -1,15 +1,40 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { WikiComponent } from 'libs/agora/wiki/src/lib/wiki.component';
+import { ScoreBarChartComponent } from '@sagebionetworks/agora/charts';
+import { WikiComponent } from '@sagebionetworks/agora/shared';
 
 @Component({
   selector: 'agora-about',
   standalone: true,
-  imports: [CommonModule, WikiComponent],
+  imports: [CommonModule, WikiComponent, ScoreBarChartComponent],
   templateUrl: './about.component.html',
   styleUrls: ['./about.component.scss'],
 })
 export class AboutComponent {
   wikiId = '612058';
   className = 'about-page-content';
+
+  scoreDistribution = {
+    distribution: [766, 4804, 4198, 4001, 3172, 2880, 3097, 1562, 323, 19],
+    bins: [
+      [0, 0.5],
+      [0.5, 1],
+      [1, 1.5],
+      [1.5, 2],
+      [2, 2.5],
+      [2.5, 3],
+      [3, 3.5],
+      [3.5, 4],
+      [4, 4.5],
+      [4.5, 5],
+    ],
+    min: 0,
+    max: 4.7438,
+    mean: 1.9484,
+    first_quartile: 1,
+    third_quartile: 3,
+    name: 'Target Risk Score',
+    syn_id: 'syn25913473',
+    wiki_id: '621071',
+  };
 }

libs/agora/api-client-angular/src/lib/model/similarGenesNetwork.ts

@@ -16,8 +16,8 @@ import { SimilarGenesNetworkNode } from './similarGenesNetworkNode';
  * SimilarGenesNetwork
  */
 export interface SimilarGenesNetwork {
-  nodes?: Array<SimilarGenesNetworkNode>;
-  links?: Array<SimilarGenesNetworkLink>;
-  min?: number;
-  max?: number;
+  nodes: Array<SimilarGenesNetworkNode>;
+  links: Array<SimilarGenesNetworkLink>;
+  min: number;
+  max: number;
 }

libs/agora/api-client-angular/src/lib/model/similarGenesNetworkLink.ts

@@ -14,9 +14,9 @@
  * SimilarGenesNetworkLink
  */
 export interface SimilarGenesNetworkLink {
-  source?: string;
-  target?: string;
-  source_hgnc_symbol?: string;
-  target_hgnc_symbol?: string;
-  brain_regions?: Array<string>;
+  source: string;
+  target: string;
+  source_hgnc_symbol: string;
+  target_hgnc_symbol: string;
+  brain_regions: Array<string>;
 }

libs/agora/api-client-angular/src/lib/model/similarGenesNetworkNode.ts

@@ -14,7 +14,7 @@
  * SimilarGenesNetworkNode
  */
 export interface SimilarGenesNetworkNode {
-  ensembl_gene_id?: string;
-  hgnc_symbol?: string;
-  brain_regions?: Array<string>;
+  ensembl_gene_id: string;
+  hgnc_symbol: string;
+  brain_regions: Array<string>;
 }

libs/agora/api-description/build/openapi.yaml

@@ -634,6 +634,10 @@ components:
           type: array
           items:
             type: string
+      required:
+        - ensembl_gene_id
+        - hgnc_symbol
+        - brain_regions
     SimilarGenesNetworkLink:
       type: object
       description: SimilarGenesNetworkLink
@@ -650,6 +654,12 @@ components:
           type: array
           items:
             type: string
+      required:
+        - source
+        - target
+        - source_hgnc_symbol
+        - target_hgnc_symbol
+        - brain_regions
     SimilarGenesNetwork:
       type: object
       description: SimilarGenesNetwork
@@ -666,6 +676,11 @@ components:
           type: number
         max:
           type: number
+      required:
+        - nodes
+        - links
+        - min
+        - max
     BioDomains:
       type: object
       description: BioDomains

libs/agora/api-description/src/components/schemas/SimilarGenesNetwork.yaml

@@ -13,3 +13,8 @@ properties:
     type: number
   max:
     type: number
+required:
+  - nodes
+  - links
+  - min
+  - max

libs/agora/api-description/src/components/schemas/SimilarGenesNetworkLink.yaml

@@ -13,3 +13,9 @@ properties:
     type: array
     items:
       type: string
+required:
+  - source
+  - target
+  - source_hgnc_symbol
+  - target_hgnc_symbol
+  - brain_regions

libs/agora/api-description/src/components/schemas/SimilarGenesNetworkNode.yaml

@@ -9,3 +9,7 @@ properties:
     type: array
     items:
       type: string
+required:
+  - ensembl_gene_id
+  - hgnc_symbol
+  - brain_regions

libs/agora/wiki/README.md → libs/agora/charts/README.md

@@ -1,7 +1,7 @@
-# agora-wiki
+# agora-charts
 
 This library was generated with [Nx](https://nx.dev).
 
 ## Running unit tests
 
-Run `nx test agora-wiki` to execute the unit tests.
+Run `nx test agora-charts` to execute the unit tests.