implement angular flow control, fix some linting

ncats · Jan 24, 2024 · 6af745e · 6af745e
1 parent 0c4105c
commit 6af745e
Show file tree

Hide file tree

Showing 216 changed files with 3,979 additions and 3,535 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -6,3 +6,5 @@
 /.idea
 /node_modules
 /.nx/cache
+
+.angular
diff --git a/apps/ramp-client-e2e/project.json b/apps/ramp-client-e2e/project.json
@@ -18,7 +18,7 @@
       }
     },
     "lint": {
-          "executor": "@nx/eslint:lint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/ramp-client-e2e/**/*.{js,ts}"]

diff --git a/apps/ramp-client-e2e/tsconfig.json b/apps/ramp-client-e2e/tsconfig.json
@@ -8,12 +8,12 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
   },
   "include": ["src/**/*.ts", "src/**/*.js"],
   "angularCompilerOptions": {
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  }
+    "strictTemplates": true,
+  },
 }
diff --git a/apps/ramp-client/.eslintrc.json b/apps/ramp-client/.eslintrc.json
@@ -5,7 +5,7 @@
     {
       "files": ["*.ts"],
       "extends": [
-  "plugin:@nx/angular",
+        "plugin:@nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {

diff --git a/apps/ramp-client/project.json b/apps/ramp-client/project.json
@@ -92,7 +92,7 @@
       }
     },
     "lint": {
-          "executor": "@nx/eslint:lint",
+      "executor": "@nx/eslint:lint",
       "options": {
         "lintFilePatterns": [
           "apps/ramp-client/src/**/*.ts",

diff --git a/apps/ramp-client/server.ts b/apps/ramp-client/server.ts
@@ -27,7 +27,7 @@ export function app(): express.Express {
     '*.*',
     express.static(distFolder, {
       maxAge: '1y',
-    })
+    }),
   );
 
   // All regular routes use the Angular engine

diff --git a/apps/ramp-client/src/app/app.component.html b/apps/ramp-client/src/app/app.component.html
@@ -13,12 +13,17 @@
       </div>
       <div class="right-options"></div>
     </ramp-header>
-<!--
+    <!--
     <ramp-header [links]="links"></ramp-header>
 -->
   </header>
   <main role="ncats-main">
     <div class="main-content">
+      <div class="row space-around-row">
+        <div class="width-95">
+          <ramp-full-banner [showBanner]="isProd"></ramp-full-banner>
+        </div>
+      </div>
       <ramp-loading [isLoading]="loading"></ramp-loading>
       <router-outlet></router-outlet>
     </div>

diff --git a/apps/ramp-client/src/app/app.component.scss b/apps/ramp-client/src/app/app.component.scss
@@ -1,4 +1,3 @@
-
 .toolbar-template button {
   color: #ffffff !important;
   padding: 0 1vw 0 1vw;

diff --git a/apps/ramp-client/src/app/app.component.ts b/apps/ramp-client/src/app/app.component.ts
@@ -1,44 +1,50 @@
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Component, DestroyRef, inject,
+  Component,
+  DestroyRef,
+  inject,
   OnInit,
-  ViewEncapsulation
-} from "@angular/core";
-import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+  ViewEncapsulation,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatDialog } from '@angular/material/dialog';
-import { select, Store } from "@ngrx/store";
-import { LinkTemplateProperty, RampHeaderComponent } from "@ramp/features/ramp/ramp-header";
-import { NcatsFooterComponent } from "@ramp/shared/ncats/ncats-footer";
-import { LoadingComponent } from "@ramp/shared/ui/loading-spinner";
-import { map } from "rxjs";
+import { select, Store } from '@ngrx/store';
+import {
+  LinkTemplateProperty,
+  RampHeaderComponent,
+} from '@ramp/features/ramp/ramp-header';
+import { NcatsFooterComponent } from '@ramp/shared/ncats/ncats-footer';
+import { LoadingComponent } from '@ramp/shared/ui/loading-spinner';
+import { map } from 'rxjs';
+import { RampFullBannerComponent } from '@ramp/shared/ramp/full-banner';
 import { environment } from '../environments/environment';
 import { RouterOutlet } from '@angular/router';
-import { NgIf } from '@angular/common';
-import { RampSelectors } from "@ramp/stores/ramp-store";
+
+import { RampSelectors } from '@ramp/stores/ramp-store';
 
 @Component({
-    selector: 'ramp-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss'],
-    encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
-    imports: [
-      NgIf,
-      RouterOutlet,
-      NcatsFooterComponent,
-      LoadingComponent,
-      RampHeaderComponent
-    ],
+  selector: 'ramp-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    RouterOutlet,
+    NcatsFooterComponent,
+    LoadingComponent,
+    RampHeaderComponent,
+    RampFullBannerComponent,
+  ],
 })
 export class AppComponent implements OnInit {
   private readonly store = inject(Store);
   destroyRef = inject(DestroyRef);
 
   title = 'ramp-client';
   loading = true;
-  showBanner = false;
+  isProd = false;
   links: LinkTemplateProperty[] = [
     {
       link: 'Biological Pathways',
@@ -119,8 +125,8 @@ export class AppComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.showBanner = !environment.production;
-/*    this.error$.subscribe((error) => {
+    this.isProd = !environment.production;
+    /*    this.error$.subscribe((error) => {
       if (error) {
         // console.log(error);
         /!* this.dialog.open(ErrorDialogComponent, {
@@ -135,10 +141,11 @@ export class AppComponent implements OnInit {
       .pipe(
         select(RampSelectors.getRampLoaded),
         takeUntilDestroyed(this.destroyRef),
-      map((res: boolean) => {
-      this.loading = res;
-      this.changeRef.markForCheck();
-    })
-      ).subscribe();
+        map((res: boolean) => {
+          this.loading = res;
+          this.changeRef.markForCheck();
+        }),
+      )
+      .subscribe();
   }
 }
diff --git a/apps/ramp-client/src/app/app.config.ts b/apps/ramp-client/src/app/app.config.ts
@@ -1,30 +1,31 @@
 import {
-  provideHttpClient, withFetch,
-  withInterceptorsFromDi
-} from "@angular/common/http";
-import { APP_INITIALIZER, ApplicationConfig, inject } from "@angular/core";
-import {
-  provideClientHydration,
-} from '@angular/platform-browser';
+  provideHttpClient,
+  withFetch,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
+import { APP_INITIALIZER, ApplicationConfig, inject } from '@angular/core';
+import { provideClientHydration } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import {
   PreloadAllModules,
-  provideRouter, withComponentInputBinding,
+  provideRouter,
+  withComponentInputBinding,
   withEnabledBlockingInitialNavigation,
   withInMemoryScrolling,
-  withPreloading, withViewTransitions
-} from "@angular/router";
-import { provideEffects } from "@ngrx/effects";
-import { provideState, provideStore, Store } from "@ngrx/store";
-import { provideStoreDevtools } from "@ngrx/store-devtools";
+  withPreloading,
+  withViewTransitions,
+} from '@angular/router';
+import { provideEffects } from '@ngrx/effects';
+import { provideState, provideStore, Store } from '@ngrx/store';
+import { provideStoreDevtools } from '@ngrx/store-devtools';
 import {
   LoadRampActions,
   RampService,
   RampEffects,
   rampReducer,
-  RAMP_STORE_FEATURE_KEY
-} from "@ramp/stores/ramp-store";
+  RAMP_STORE_FEATURE_KEY,
+} from '@ramp/stores/ramp-store';
 import { environment } from '../environments/environment';
 
 import { routes } from './app.routes';
@@ -38,6 +39,7 @@ export function set_url(rampService: RampService) {
 export function rampInit(store = inject(Store)) {
   return () => {
     store.dispatch(LoadRampActions.loadRamp());
+    store.dispatch(LoadRampActions.loadRampStats());
   };
 }
 
@@ -61,19 +63,19 @@ export const appConfig: ApplicationConfig = {
       withComponentInputBinding(),
       withEnabledBlockingInitialNavigation(),
       withInMemoryScrolling({
-        anchorScrolling: "enabled",
-        scrollPositionRestoration: "enabled"
+        anchorScrolling: 'enabled',
+        scrollPositionRestoration: 'enabled',
       }),
-      withPreloading(PreloadAllModules)
+      withPreloading(PreloadAllModules),
     ),
-    provideStore({rampStore: rampReducer}),
-  //  provideRouterStore(),
+    provideStore({ rampStore: rampReducer }),
+    //  provideRouterStore(),
     provideStoreDevtools(),
     provideEffects([RampEffects]),
     provideState(RAMP_STORE_FEATURE_KEY, rampReducer),
     provideAnimations(),
     provideAnimationsAsync(),
     provideHttpClient(withInterceptorsFromDi(), withFetch()),
-    provideClientHydration()
-  ]
+    provideClientHydration(),
+  ],
 };
diff --git a/apps/ramp-client/src/app/app.routes.ts b/apps/ramp-client/src/app/app.routes.ts
@@ -1,6 +1,6 @@
 import { Routes } from '@angular/router';
-import { StructureViewerComponent } from "@ramp/shared/ui/ncats-structure-viewer";
-import rFunctions from "../assets/data/rFunctions.json";
+import { StructureViewerComponent } from '@ramp/shared/ui/ncats-structure-viewer';
+import rFunctions from '../assets/data/rFunctions.json';
 import { environment } from '../environments/environment';
 
 export const routes: Routes = [
@@ -9,38 +9,32 @@ export const routes: Routes = [
     pathMatch: 'full',
     runGuardsAndResolvers: 'paramsOrQueryParamsChange',
     loadComponent: () =>
-      import('@ramp/features/ramp/ramp-home').then(
-        (m) => m.HomeComponent)
+      import('@ramp/features/ramp/ramp-home').then((m) => m.HomeComponent),
   },
   {
     path: 'home',
     pathMatch: 'full',
     runGuardsAndResolvers: 'paramsOrQueryParamsChange',
     loadComponent: () =>
-      import('@ramp/features/ramp/ramp-home').then(
-        (m) => m.HomeComponent)
+      import('@ramp/features/ramp/ramp-home').then((m) => m.HomeComponent),
   },
   {
     path: 'about',
     pathMatch: 'full',
     runGuardsAndResolvers: 'paramsOrQueryParamsChange',
     providers: [
-  //    provideEffects([RampEffects]),
-  //    provideState(RAMP_STORE_FEATURE_KEY, rampReducer)
+      //    provideEffects([RampEffects]),
+      //    provideState(RAMP_STORE_FEATURE_KEY, rampReducer)
     ],
     loadComponent: () =>
-      import('@ramp/features/ramp/ramp-about').then(
-        (m) => m.AboutComponent,
-      ),
+      import('@ramp/features/ramp/ramp-about').then((m) => m.AboutComponent),
   },
   {
     path: 'api',
     pathMatch: 'full',
     runGuardsAndResolvers: 'paramsOrQueryParamsChange',
     loadComponent: () =>
-      import('@ramp/features/ramp/ramp-api').then(
-        (m) => m.RampApiComponent,
-      ),
+      import('@ramp/features/ramp/ramp-api').then((m) => m.RampApiComponent),
   },
   {
     path: 'ontologies-from-metabolites',
@@ -70,10 +64,6 @@ export const routes: Routes = [
     path: 'analytes-from-pathways',
     pathMatch: 'full',
     runGuardsAndResolvers: 'paramsOrQueryParamsChange',
-    providers: [
-    //  provideEffects([RampEffects]),
-    //  provideState(RAMP_STORE_FEATURE_KEY, rampReducer)
-    ],
     loadComponent: () =>
       import('@ramp/features/ramp/analytes-from-pathways').then(
         (m) => m.AnalytesFromPathwaysComponent,
@@ -86,10 +76,6 @@ export const routes: Routes = [
     path: 'pathways-from-analytes',
     pathMatch: 'full',
     runGuardsAndResolvers: 'paramsOrQueryParamsChange',
-    providers: [
-    //  provideEffects([RampEffects]),
-    //  provideState(RAMP_STORE_FEATURE_KEY, rampReducer)
-    ],
     loadComponent: () =>
       import('@ramp/features/ramp/pathways-from-analytes').then(
         (m) => m.PathwaysFromAnalytesComponent,

diff --git a/apps/ramp-client/src/assets/data/rFunctions.json b/apps/ramp-client/src/assets/data/rFunctions.json
@@ -37,7 +37,7 @@
     "input": "analytes",
     "supportedIdTypes": ["Metabolites", "Genes/Proteins"],
     "examples": "ensembl:ENSG00000135679, hmdb:HMDB0000064, hmdb:HMDB0000148, ensembl:ENSG00000141510",
-    "description": "Retrieve Analytes Involved in the Same Reaction. IDs should be prepended by ID source (e.g. <strong>hmdb</strong>:HMDB0000122). See below for supported sources.."
+    "description": "Retrieve Analytes Involved in the Same Reaction. IDs should be prepended by ID source (e.g. <strong>hmdb</strong>:HMDB0000122). See below for supported sources."
   },
   "classes-from-metabolites": {
     "title": "Retrieve Chemical Classes from Input Metabolites",

diff --git a/apps/ramp-client/src/styles.scss b/apps/ramp-client/src/styles.scss
@@ -6,8 +6,14 @@ html,
 body {
   height: 100%;
   margin: 0 !important;
-  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial,
-  Lucida Grande, sans-serif;
+  font-family:
+    Roboto,
+    Helvetica Neue Light,
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    Lucida Grande,
+    sans-serif;
 }
 
 a {
@@ -166,6 +172,7 @@ a {
 @include utils.width-sm(75);
 @include utils.width-md(100);
 
+@include utils.width(95);
 @include utils.width(90);
 @include utils.width(80);
 @include utils.width(75);
@@ -190,11 +197,10 @@ a {
   width: 100%;
 }
 
-
 .navigation-menu-panel {
   width: 25%;
   position: fixed !important;
-  top: calc(60px + 17vh) !important
+  top: calc(60px + 17vh) !important;
 }
 
 @media only screen and (max-width: 1024px) {

diff --git a/apps/ramp-client/tsconfig.app.json b/apps/ramp-client/tsconfig.app.json
@@ -2,7 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": ["node"],
+    "types": ["node"]
   },
   "files": ["src/main.ts", "src/main.server.ts", "server.ts"],
   "include": ["src/**/*.d.ts"],
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,7 +27,7 @@ export function app(): express.Express { @@
         '*.*',
         express.static(distFolder, {
           maxAge: '1y',
-        })
+        }),
       );
       // All regular routes use the Angular engine
@@ Expand Down @@