fix(agora): change boxplot to handle summaries without any points, ad…

…d metabolomics types (AG-1653, AG-1654) (#2997)
Sage-Bionetworks · Feb 7, 2025 · 764bfcb · 764bfcb
1 parent 797ac54
commit 764bfcb
Show file tree

Hide file tree

Showing 17 changed files with 194 additions and 51 deletions.
diff --git a/apps/agora/api/src/components/metabolomics.ts b/apps/agora/api/src/components/metabolomics.ts
@@ -1,9 +1,9 @@
 // -------------------------------------------------------------------------- //
 // Internal
 // -------------------------------------------------------------------------- //
+import { Metabolomics } from 'libs/agora/models';
 import { cache } from '../helpers';
 import { MetabolomicsCollection } from '../models';
-import { Metabolomics } from 'libs/agora/models';
 
 // -------------------------------------------------------------------------- //
 // Functions
@@ -23,5 +23,5 @@ export async function getMetabolomics(ensg: string) {
     .exec();
 
   cache.set(cacheKey, result);
-  return result;
+  return result ?? undefined;
 }
diff --git a/libs/agora/api-client-angular/src/lib/.openapi-generator/FILES b/libs/agora/api-client-angular/src/lib/.openapi-generator/FILES
@@ -28,6 +28,7 @@ model/gene.ts
 model/geneNetworkLinks.ts
 model/genesList.ts
 model/medianExpression.ts
+model/metabolomics.ts
 model/models.ts
 model/neuropathologicCorrelation.ts
 model/nominatedGenesList.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
@@ -9,16 +9,17 @@
  * https://openapi-generator.tech
  * Do not edit the class manually.
  */
-import { MedianExpression } from './medianExpression';
+import { Metabolomics } from './metabolomics';
 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';
 import { Druggability } from './druggability';
+import { MedianExpression } from './medianExpression';
+import { EnsemblInfo } from './ensemblInfo';
+import { RnaDifferentialExpression } from './rnaDifferentialExpression';
+import { GeneNetworkLinks } from './geneNetworkLinks';
+import { NeuropathologicCorrelation } from './neuropathologicCorrelation';
 import { OverallScores } from './overallScores';
 import { ProteinDifferentialExpression } from './proteinDifferentialExpression';
 
@@ -50,7 +51,7 @@ export interface Gene {
   proteomics_LFQ?: Array<ProteinDifferentialExpression> | null;
   proteomics_SRM?: Array<ProteinDifferentialExpression> | null;
   proteomics_TMT?: Array<ProteinDifferentialExpression> | null;
-  metabolomics?: { [key: string]: any } | null;
+  metabolomics?: Metabolomics;
   overall_scores?: OverallScores;
   neuropathologic_correlations?: Array<NeuropathologicCorrelation> | null;
   experimental_validation?: Array<ExperimentalValidation> | null;

diff --git a/libs/agora/api-client-angular/src/lib/model/metabolomics.ts b/libs/agora/api-client-angular/src/lib/model/metabolomics.ts
@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+
+/**
+ * Metabolomics
+ */
+export interface Metabolomics {
+  _id: string;
+  associated_gene_name: string;
+  ensembl_gene_id: string;
+  metabolite_id: string;
+  metabolite_full_name: string;
+  association_p: number;
+  gene_wide_p_threshold_1kgp: number;
+  n_per_group: Array<number>;
+  boxplot_group_names: Array<string>;
+  ad_diagnosis_p_value: Array<number>;
+  transposed_boxplot_stats: Array<Array<number>>;
+}
diff --git a/libs/agora/api-client-angular/src/lib/model/models.ts b/libs/agora/api-client-angular/src/lib/model/models.ts
@@ -15,6 +15,7 @@ export * from './gene';
 export * from './geneNetworkLinks';
 export * from './genesList';
 export * from './medianExpression';
+export * from './metabolomics';
 export * from './neuropathologicCorrelation';
 export * from './nominatedGenesList';
 export * from './overallScores';

diff --git a/libs/agora/api-description/build/openapi.yaml b/libs/agora/api-description/build/openapi.yaml
@@ -517,6 +517,57 @@ components:
         - ci_lwr
         - pval
         - cor_pval
+    Metabolomics:
+      type: object
+      description: Metabolomics
+      properties:
+        _id:
+          type: string
+        associated_gene_name:
+          type: string
+          example: VGF
+        ensembl_gene_id:
+          type: string
+        metabolite_id:
+          type: string
+        metabolite_full_name:
+          type: string
+        association_p:
+          type: number
+        gene_wide_p_threshold_1kgp:
+          type: number
+        n_per_group:
+          type: array
+          items:
+            type: number
+        boxplot_group_names:
+          type: array
+          items:
+            type: string
+        ad_diagnosis_p_value:
+          type: array
+          items:
+            type: number
+        transposed_boxplot_stats:
+          type: array
+          items:
+            type: array
+            items:
+              type: number
+            minItems: 5
+            maxItems: 5
+      required:
+        - _id
+        - associated_gene_name
+        - ensembl_gene_id
+        - metabolite_id
+        - metabolite_full_name
+        - association_p
+        - gene_wide_p_threshold_1kgp
+        - n_per_group
+        - boxplot_group_names
+        - ad_diagnosis_p_value
+        - transposed_boxplot_stats
     OverallScores:
       type: object
       description: OverallScores
@@ -814,9 +865,7 @@ components:
             $ref: '#/components/schemas/ProteinDifferentialExpression'
           nullable: true
         metabolomics:
-          type: object
-          additionalProperties: true
-          nullable: true
+          $ref: '#/components/schemas/Metabolomics'
         overall_scores:
           $ref: '#/components/schemas/OverallScores'
           nullable: true

diff --git a/libs/agora/api-description/src/components/schemas/Gene.yaml b/libs/agora/api-description/src/components/schemas/Gene.yaml
@@ -73,9 +73,7 @@ properties:
       $ref: ProteinDifferentialExpression.yaml
     nullable: true
   metabolomics:
-    type: object
-    additionalProperties: true
-    nullable: true
+    $ref: Metabolomics.yaml
   overall_scores:
     $ref: OverallScores.yaml
     nullable: true

diff --git a/libs/agora/api-description/src/components/schemas/Metabolomics.yaml b/libs/agora/api-description/src/components/schemas/Metabolomics.yaml
@@ -0,0 +1,50 @@
+type: object
+description: Metabolomics
+properties:
+  _id:
+    type: string
+  associated_gene_name:
+    type: string
+    example: 'VGF'
+  ensembl_gene_id:
+    type: string
+  metabolite_id:
+    type: string
+  metabolite_full_name:
+    type: string
+  association_p:
+    type: number
+  gene_wide_p_threshold_1kgp:
+    type: number
+  n_per_group:
+    type: array
+    items:
+      type: number
+  boxplot_group_names:
+    type: array
+    items:
+      type: string
+  ad_diagnosis_p_value:
+    type: array
+    items:
+      type: number
+  transposed_boxplot_stats:
+    type: array
+    items:
+      type: array
+      items:
+        type: number
+      minItems: 5
+      maxItems: 5
+required:
+  - _id
+  - associated_gene_name
+  - ensembl_gene_id
+  - metabolite_id
+  - metabolite_full_name
+  - association_p
+  - gene_wide_p_threshold_1kgp
+  - n_per_group
+  - boxplot_group_names
+  - ad_diagnosis_p_value
+  - transposed_boxplot_stats
diff --git a/libs/agora/charts/src/lib/box-plot-chart/box-plot-chart.component.spec.ts b/libs/agora/charts/src/lib/box-plot-chart/box-plot-chart.component.spec.ts
@@ -22,7 +22,7 @@ describe('Component: Chart - Box Plot', () => {
 
     // keys are sorted alphabetically
     const tooltipTextRegExp = new RegExp(
-      `${boxPlotChartItemsMock[1].circle.tooltip}.*${boxPlotChartItemsMock[0].circle.tooltip}`,
+      `${boxPlotChartItemsMock[1].circle?.tooltip}.*${boxPlotChartItemsMock[0].circle?.tooltip}`,
     );
     expect(screen.getByLabelText(tooltipTextRegExp)).toBeVisible();
   });

diff --git a/libs/agora/charts/src/lib/box-plot-chart/box-plot-chart.component.ts b/libs/agora/charts/src/lib/box-plot-chart/box-plot-chart.component.ts
@@ -58,12 +58,14 @@ export class BoxPlotComponent {
     this._data.forEach((item) => {
       const xAxisCategory = item.key;
 
-      const point: CategoryPoint = {
-        xAxisCategory: xAxisCategory,
-        value: item.circle.value,
-        text: item.circle.tooltip,
-      };
-      this.points.push(point);
+      if (item.circle) {
+        const point: CategoryPoint = {
+          xAxisCategory: xAxisCategory,
+          value: item.circle.value,
+          text: item.circle.tooltip,
+        };
+        this.points.push(point);
+      }
 
       const summary: CategoryBoxplotSummary = {
         xAxisCategory: xAxisCategory,
@@ -90,6 +92,10 @@ export class BoxPlotComponent {
     this.points.sort((a, b) => {
       return a.xAxisCategory.localeCompare(b.xAxisCategory);
     });
+
+    this.summaries.sort((a, b) => {
+      return a.xAxisCategory.localeCompare(b.xAxisCategory);
+    });
   }
 
   getXAxisTooltipText(text: string) {

diff --git a/...s/src/lib/components/gene-evidence-metabolomics/gene-evidence-metabolomics.component.html b/...s/src/lib/components/gene-evidence-metabolomics/gene-evidence-metabolomics.component.html
@@ -24,17 +24,16 @@ <h3>
           Mapping of Metabolites to
           {{ _gene?.hgnc_symbol || _gene?.ensembl_gene_id }}
         </h3>
-        @if (_gene?.metabolomics || boxPlotData.length < 1) {
+        @if (!_gene?.metabolomics || boxPlotData.length < 1) {
           <p>
             <i>No metabolomic data is currently available.</i>
           </p>
-        }
-        @if (_gene?.metabolomics && boxPlotData.length > 0) {
+        } @else {
           <p>
             Genetic mapping revealed that the top metabolite associated with
             {{ _gene?.hgnc_symbol || _gene?.ensembl_gene_id }} is
-            {{ _gene?.metabolomics?.['metabolite_full_name'] }}, with a p-value of
-            {{ getSignificantFigures(_gene?.metabolomics?.['gene_wide_p_threshold_1kgp'], 2) }}.
+            {{ _gene?.metabolomics?.metabolite_full_name }}, with a p-value of
+            {{ getSignificantFigures(_gene?.metabolomics?.gene_wide_p_threshold_1kgp, 2) }}.
           </p>
         }
       </div>
@@ -53,21 +52,21 @@ <h3>Levels of Metabolite by Disease Status</h3>
         </p>
       }
 
-      @if (boxPlotData.length > 0) {
+      @if (boxPlotData.length > 0 && _gene && _gene.metabolomics) {
         <div class="mb-xl">
           <h3>
-            Levels of {{ _gene?.metabolomics?.['metabolite_full_name'] }} by Disease Status
+            Levels of {{ _gene.metabolomics.metabolite_full_name }} by Disease Status
             <agora-download-dom-image
               [target]="mdeChart"
-              [filename]="_gene?.ensembl_gene_id + '_metabolomics'"
+              [filename]="_gene.ensembl_gene_id + '_metabolomics'"
             ></agora-download-dom-image>
           </h3>
           <p class="mb-0">
             This plot shows differences in metabolite levels in AD cases (AD) and cognitively-normal
             individuals (CN). This comparison
-            {{ getSignificantText(_gene?.metabolomics?.['ad_diagnosis_p_value'][0]) }}
+            {{ getSignificantText(_gene.metabolomics.ad_diagnosis_p_value[0]) }}
             significantly different with a p-value of
-            {{ getSignificantFigures(_gene?.metabolomics?.['ad_diagnosis_p_value'][0], 2) }}.
+            {{ getSignificantFigures(_gene.metabolomics.ad_diagnosis_p_value[0], 2) }}.
           </p>
         </div>
       }
@@ -81,7 +80,7 @@ <h3>
       <div #mdeChart>
         <agora-box-plot-chart
           xAxisLabel="DIAGNOSIS"
-          [yAxisLabel]="_gene?.metabolomics?.['metabolite_full_name'] + ' LEVELS'"
+          [yAxisLabel]="_gene?.metabolomics?.metabolite_full_name + ' LEVELS'"
           [data]="boxPlotData"
         ></agora-box-plot-chart>
       </div>

diff --git a/...nes/src/lib/components/gene-evidence-metabolomics/gene-evidence-metabolomics.component.ts b/...nes/src/lib/components/gene-evidence-metabolomics/gene-evidence-metabolomics.component.ts
@@ -1,9 +1,10 @@
 import { Component, inject, Input } from '@angular/core';
 import { Gene } from '@sagebionetworks/agora/api-client-angular';
 import { BoxPlotComponent } from '@sagebionetworks/agora/charts';
+import { boxPlotChartItem } from '@sagebionetworks/agora/models';
 import { HelperService } from '@sagebionetworks/agora/services';
-import { DownloadDomImageComponent } from '../download-dom-image/download-dom-image.component';
 import { ModalLinkComponent } from '@sagebionetworks/agora/shared';
+import { DownloadDomImageComponent } from '../download-dom-image/download-dom-image.component';
 
 @Component({
   selector: 'agora-gene-evidence-metabolomics',
@@ -24,7 +25,7 @@ export class GeneEvidenceMetabolomicsComponent {
     this.init();
   }
 
-  boxPlotData: any = [];
+  boxPlotData: boxPlotChartItem[] = [];
 
   reset() {
     this.boxPlotData = [];
@@ -33,17 +34,18 @@ export class GeneEvidenceMetabolomicsComponent {
   init() {
     this.reset();
 
-    if (!this._gene?.metabolomics?.['transposed_boxplot_stats']) {
+    if (!this._gene?.metabolomics?.transposed_boxplot_stats) {
       this.boxPlotData = [];
       return;
     }
 
-    const boxPlotData: any = [];
+    const boxPlotData: boxPlotChartItem[] = [];
 
-    this._gene.metabolomics['transposed_boxplot_stats'].forEach((item: string, index: number) => {
+    this._gene.metabolomics.transposed_boxplot_stats.forEach((item: number[], index: number) => {
       boxPlotData.push({
-        key: this._gene?.metabolomics?.['boxplot_group_names'][index],
-        value: item,
+        key: this._gene?.metabolomics?.boxplot_group_names[index] ?? '',
+        value: [item[0], item[2], item[4]],
+        quartiles: [item[1], item[2], item[3]],
       });
     });
 

diff --git a/libs/agora/models/charts.ts b/libs/agora/models/charts.ts
@@ -6,7 +6,7 @@ export interface boxPlotChartItemCircle {
 export interface boxPlotChartItem {
   key: string;
   value: number[];
-  circle: boxPlotChartItemCircle;
+  circle?: boxPlotChartItemCircle;
   quartiles: number[];
 }