fixing chemical enrichment, ui layout

.github/workflows/build.yml

@@ -5,13 +5,12 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ "master", "development" ]
+    branches: ['master', 'development']
   pull_request:
-    branches: [ "master", "development" ]
+    branches: ['master', 'development']
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
@@ -20,14 +19,14 @@ jobs:
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm i -g @angular/cli
-    - run: npm i -g nx
-    - run: npm ci
-    - run: ng lint
-    - run: ng run-many --all --target=test -- --no-watch --no-progress --browsers=ChromeHeadlessCI
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm i -g @angular/cli
+      - run: npm i -g nx
+      - run: npm i
+      - run: ng lint
+      - run: ng run-many --all --target=test -- --no-watch --no-progress --browsers=ChromeHeadlessCI

apps/ramp-client/src/styles.scss

@@ -179,6 +179,7 @@ a {
 @include utils.width(70);
 @include utils.width(66);
 @include utils.width(60);
+@include utils.width(55);
 @include utils.width(50);
 @include utils.width(45);
 @include utils.width(40);
@@ -203,6 +204,11 @@ a {
   top: calc(60px + 17vh) !important;
 }
 
+.banner-title {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
 @media only screen and (max-width: 1024px) {
   .navigation-menu-panel {
     width: 50%;

libs/features/ramp/chemical-enrichment/src/lib/chemical-enrichment/chemical-enrichment.component.html

@@ -140,7 +140,7 @@ <h1 class="page-title">
           [position]="'right'"
         ></ramp-loading>
       </ng-template>
-      <div class="row space-around-row" class="additional-params">
+      <div class="row centered-row additional-params">
         <div class="width-40">
           <h3>Filter Results</h3>
           <div class="row centered-row">

libs/features/ramp/chemical-enrichment/src/lib/chemical-enrichment/chemical-enrichment.component.ts

@@ -14,6 +14,7 @@ import { select } from '@ngrx/store';
 import {
   ChemicalEnrichment,
   Classes,
+  RampChemicalEnrichmentResponse,
   RampResponse,
 } from '@ramp/models/ramp-models';
 import { InputRowComponent } from '@ramp/shared/ramp/input-row';
@@ -25,7 +26,6 @@ import { FeedbackPanelComponent } from '@ramp/shared/ui/feedback-panel';
 import { LoadingComponent } from '@ramp/shared/ui/loading-spinner';
 import { DataProperty } from '@ramp/shared/ui/ncats-datatable';
 import {
-  ClassesFromMetabolitesActions,
   MetaboliteEnrichmentsActions,
   RampSelectors,
 } from '@ramp/stores/ramp-store';
@@ -192,51 +192,48 @@ export class ChemicalEnrichmentComponent
       .pipe(
         select(RampSelectors.getChemicalEnrichment),
         takeUntilDestroyed(this.destroyRef),
-        map(
-          (
-            res:
-              | { data: ChemicalEnrichment[]; openModal?: boolean }
-              | undefined,
-          ) => {
-            if (res && res.data) {
-              this.dataAsDataProperty = res.data.map(
-                (enrichment: ChemicalEnrichment) => {
-                  const newObj: { [key: string]: DataProperty } = {};
-                  Object.entries(enrichment).map((value: any) => {
-                    newObj[value[0]] = new DataProperty({
-                      name: value[0],
-                      label: value[0],
-                      value: value[1],
-                    });
+        map((res: RampChemicalEnrichmentResponse | undefined) => {
+          console.log(res);
+          if (res && res.enriched_chemical_class_list) {
+            this.dataAsDataProperty = res.enriched_chemical_class_list.map(
+              (enrichment: ChemicalEnrichment) => {
+                const newObj: { [key: string]: DataProperty } = {};
+                Object.entries(enrichment).map((value: any) => {
+                  newObj[value[0]] = new DataProperty({
+                    name: value[0],
+                    label: value[0],
+                    value: value[1],
                   });
-                  return newObj;
-                },
-              );
-              this.enrichmentLoading = false;
+                });
+                return newObj;
+              },
+            );
+            this.enrichmentLoading = false;
 
-              if (res.openModal) {
-                const ref: MatDialogRef<CompleteDialogComponent> =
-                  this.dialog.open(CompleteDialogComponent, {
-                    data: {
-                      title: 'Chemical Class',
-                      tabs: ['Chemical Classes', 'Enriched Chemical Classes'],
-                    },
-                  });
+            //     if (res.openModal) {
+            const ref: MatDialogRef<CompleteDialogComponent> = this.dialog.open(
+              CompleteDialogComponent,
+              {
+                data: {
+                  title: 'Chemical Class',
+                  tabs: ['Chemical Classes', 'Enriched Chemical Classes'],
+                },
+              },
+            );
 
-                ref.afterClosed().subscribe((res) => {
-                  if (res) {
-                    this.resultsTabs.selectedIndex = res;
-                    this.ref.markForCheck();
-                  }
-                });
+            ref.afterClosed().subscribe((res) => {
+              if (res) {
+                this.resultsTabs.selectedIndex = res;
+                this.ref.markForCheck();
               }
-              this.ref.markForCheck();
-            }
-            /*if (res && res.dataframe) {
+            });
+            //   }
+            this.ref.markForCheck();
+          }
+          /*if (res && res.dataframe) {
           this.enrichmentDataFrame = res.dataframe;
         }*/
-          },
-        ),
+        }),
       )
       .subscribe();
 
@@ -275,7 +272,7 @@ export class ChemicalEnrichmentComponent
     this.enrichmentLoading = true;
     if (this.file) {
       this.store.dispatch(
-        ClassesFromMetabolitesActions.fetchClassesFromMetabolites({
+        MetaboliteEnrichmentsActions.fetchClassesFromMetabolites({
           metabolites: event,
           biospecimen: this.biospecimenCtrl.value,
           background: this.file,
@@ -290,7 +287,7 @@ export class ChemicalEnrichmentComponent
       );
     } else {
       this.store.dispatch(
-        ClassesFromMetabolitesActions.fetchClassesFromMetabolites({
+        MetaboliteEnrichmentsActions.fetchClassesFromMetabolites({
           metabolites: event,
           biospecimen: this.biospecimenCtrl.value,
         }),

libs/features/ramp/pathway-enrichment/src/lib/pathway-enrichment/pathway-enrichment.component.html

@@ -149,7 +149,7 @@ <h1 class="page-title">
       <div class="row space-around-row additional-params">
         <div class="width-40">
           <h3>Filter Results</h3>
-          <div class="row centered-row">
+          <div class="row centered">
             <div class="width-40">
               <mat-form-field
                 appearance="outline"
@@ -190,7 +190,6 @@ <h3>Filter Results</h3>
         </div>
         <div class="width-55">
           <h3>Cluster Results</h3>
-          {{ analyteType }}
           <div class="row centered-row">
             <div class="width-90">
               <mat-checkbox

libs/models/ramp-models/src/lib/_utils.ts

@@ -24,7 +24,6 @@ export interface RampPathwayEnrichmentAPIResponse {
     pathway_matrix?: { [key: string]: string }[];
     result_type?: string[];
   };
-  query?: RampQuery;
   function_call?: string[];
 }
 
@@ -42,17 +41,18 @@ export interface RampChemicalEnrichmentAPIResponse {
     ClassyFire_super_class?: ChemicalEnrichment[];
     result_type?: string[];
   };
-  query?: RampQuery;
   function_call?: string[];
 }
 
 export interface RampChemicalEnrichmentResponse {
-  data: ChemicalEnrichment[];
-  query: RampQuery;
-  enriched_chemical_class: {
+  //  data: ChemicalEnrichment[];
+  data: {
     ClassyFire_class?: ChemicalEnrichment[];
     ClassyFire_sub_class?: ChemicalEnrichment[];
     ClassyFire_super_class?: ChemicalEnrichment[];
     result_type?: string[];
   };
+  enriched_chemical_class_list: ChemicalEnrichment[];
+  query?: RampQuery;
+  openModal?: boolean;
 }

libs/shared/ramp/full-banner/src/lib/full-banner/full-banner.component.scss

@@ -4,8 +4,3 @@
   background-color: #f1f1f1;
   padding: 0 1rem;
 }
-
-.banner-title {
-  font-size: 1.5rem;
-  font-weight: bold;
-}

libs/shared/ui/complete-dialog/src/lib/complete-dialog/complete-dialog.component.html

@@ -1,26 +1,30 @@
-<div matDialogTitle class="row space-around-row">
-  <span mat-dialog-title>Analysis Complete</span>
-  <mat-icon matRipple (click)="close()" class="close-button">close</mat-icon>
-</div>
-<div mat-dialog-content>
-  @if (!data.message) {
-    <p>
-      {{ data.title }} analysis is now complete. Click on the tabs or below
-      buttons to view the data.
-    </p>
-  }
-  @if (data.message) {
-    <p>{{ data.message }}</p>
-  }
+<div class="dialog-content">
+  <div class="row space-between-row">
+    <span class="banner-title">Analysis Complete</span>
+    <mat-icon matRipple (click)="close()" class="close-button">close</mat-icon>
+  </div>
+  <div mat-dialog-content>
+    @if (!data.message) {
+      <p>
+        {{ data.title }} analysis is now complete. Click on the tabs or below
+        buttons to view the data.
+      </p>
+    }
+    @if (data.message) {
+      <p>{{ data.message }}</p>
+    }
+    <br />
+    <br />
+  </div>
+  <div class="row space-around-row">
+    @for (tab of data.tabs; track tab; let i = $index) {
+      <div>
+        <button mat-flat-button (click)="close(i + 1)" [color]="'accent'">
+          {{ tab }}
+        </button>
+      </div>
+    }
+  </div>
   <br />
   <br />
 </div>
-<div mat-dialog-actions class="row space-around-row">
-  @for (tab of data.tabs; track tab; let i = $index) {
-    <button mat-flat-button (click)="close(i + 1)" [color]="'accent'">
-      {{ tab }}
-    </button>
-  }
-</div>
-<br />
-<br />

libs/shared/ui/complete-dialog/src/lib/complete-dialog/complete-dialog.component.scss

@@ -1,3 +1,7 @@
+.dialog-content {
+  padding: 1rem;
+}
+
 .close-button {
   cursor: pointer;
 }

libs/shared/ui/ncats-datatable/src/lib/ncats-datatable/ncats-datatable.component.html

@@ -1,8 +1,5 @@
 @if (showPaginator && pageData) {
-  <div
-    class="row right-justified-row centered-row"
-    class="body-row paginator-row"
-  >
+  <div class="row right-justified-row body-row paginator-row">
     <div class="width-55">
       <mat-paginator
         #paginatorTop

libs/stores/ramp-store/src/lib/+state/ramp-store/ramp.actions.ts

@@ -10,6 +10,7 @@ import {
   OntologyList,
   Pathway,
   Properties,
+  RampChemicalEnrichmentResponse,
   RampQuery,
   RampResponse,
   Reaction,
@@ -209,28 +210,35 @@ export const PathwayEnrichmentsActions = createActionGroup({
 export const MetaboliteEnrichmentsActions = createActionGroup({
   source: 'Metabolite Enrichment',
   events: {
+    fetchClassesFromMetabolites: props<{
+      metabolites: string[];
+      biospecimen?: string;
+      background?: File;
+    }>(),
+    fetchClassesFromMetabolitesSuccess: props<{
+      data: Classes[];
+      query: RampQuery;
+      dataframe?: FishersDataframe;
+    }>(),
+    fetchClassesFromMetabolitesFailure: props<{ error: any }>(),
     fetchEnrichmentFromMetabolites: props<{
       metabolites: string[];
       biospecimen?: string;
       background?: File;
     }>(),
     fetchEnrichmentFromMetabolitesFile: emptyProps(),
     fetchEnrichmentFromMetabolitesSuccess: props<{
-      data: ChemicalEnrichment[];
-      enriched_chemical_class?: any;
+      data: RampChemicalEnrichmentResponse;
       pval_type?: string;
       pval_cutoff?: number;
-      dataframe?: FishersDataframe;
     }>(),
     fetchEnrichmentFromMetabolitesFailure: props<{ error: any }>(),
     filterEnrichmentFromMetabolites: props<{
       pval_type: string;
       pval_cutoff: number;
     }>(),
     filterEnrichmentFromMetabolitesSuccess: props<{
-      data: ChemicalEnrichment[];
-      enriched_chemical_class?: any;
-      openModal?: boolean;
+      data: RampChemicalEnrichmentResponse;
     }>(),
     filterEnrichmentFromMetabolitesFailure: props<{ error: any }>(),
   },