fix(agora): updating PrimeNG, fixing toast (AG-1607)

apps/agora/app/project.json

@@ -45,11 +45,7 @@
             "output": ""
           }
         ],
-        "styles": [
-          "apps/agora/app/src/styles.scss",
-          "node_modules/primeicons/primeicons.css",
-          "node_modules/primeng/resources/primeng.min.css"
-        ],
+        "styles": ["apps/agora/app/src/styles.scss", "node_modules/primeicons/primeicons.css"],
         "scripts": []
       },
       "configurations": {

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

@@ -4,11 +4,9 @@ import { ActivatedRoute, NavigationEnd, Router, RouterModule } from '@angular/ro
 import { FooterComponent, HeaderComponent } from '@sagebionetworks/agora/ui';
 import { filter } from 'rxjs';
 import { ToastModule } from 'primeng/toast';
-import { MessageService } from 'primeng/api';
 
 @Component({
   imports: [RouterModule, HeaderComponent, FooterComponent, ToastModule],
-  providers: [MessageService],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',

apps/agora/app/src/app/app.config.ts

@@ -4,13 +4,19 @@ import {
   withEnabledBlockingInitialNavigation,
   withInMemoryScrolling,
 } from '@angular/router';
-import { withInterceptorsFromDi, provideHttpClient } from '@angular/common/http';
-import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { BASE_PATH as API_CLIENT_BASE_PATH } from '@sagebionetworks/agora/api-client-angular';
 import { BASE_PATH as SYNAPSE_API_CLIENT_BASE_PATH } from '@sagebionetworks/synapse/api-client-angular';
 import { configFactory, ConfigService } from '@sagebionetworks/agora/config';
 
 import { routes } from './app.routes';
+import {
+  httpErrorInterceptor,
+  rollbarFactory,
+  RollbarService,
+} from '@sagebionetworks/agora/services';
+import { MessageService } from 'primeng/api';
 
 // This index is used to remove the corresponding provider in app.config.server.ts.
 // TODO: This index could be out of sync if we are not careful. Find a more elegant way.
@@ -42,14 +48,19 @@ export const appConfig: ApplicationConfig = {
           : configService.config.csrApiUrl,
       deps: [ConfigService],
     },
-    provideAnimations(),
-    provideHttpClient(withInterceptorsFromDi()),
+    provideAnimationsAsync(),
+    provideHttpClient(withInterceptors([httpErrorInterceptor])),
+    {
+      provide: RollbarService,
+      useFactory: rollbarFactory,
+    },
     provideRouter(
       routes,
       withEnabledBlockingInitialNavigation(),
       withInMemoryScrolling({
         scrollPositionRestoration: 'enabled',
       }),
     ),
+    MessageService,
   ],
 };

libs/agora/genes/src/lib/components/download-dom-image/download-dom-image.component.html

@@ -14,9 +14,10 @@
     <div *ngFor="let type of types">
       <p-radioButton
         value="{{ type.value }}"
-        label="{{ type.label }}"
+        inputId="download-radio"
         [(ngModel)]="selectedType"
       ></p-radioButton>
+      <label for="download-radio">{{ type.label }}</label>
     </div>
     <div>
       <button

libs/agora/services/src/index.ts

@@ -2,5 +2,6 @@ export * from './lib/error.service';
 export * from './lib/gene.service';
 export * from './lib/github.service';
 export * from './lib/helper.service';
+export * from './lib/http-interceptor';
 export * from './lib/rollbar.service';
 export * from './lib/synapse-api.service';

libs/agora/services/src/lib/http-interceptor.ts

@@ -0,0 +1,70 @@
+import {
+  HttpInterceptorFn,
+  HttpRequest,
+  HttpHandlerFn,
+  HttpErrorResponse,
+} from '@angular/common/http';
+import { retry, catchError } from 'rxjs/operators';
+import { Observable, throwError } from 'rxjs';
+import { RollbarService } from './rollbar.service';
+import { MessageService } from 'primeng/api';
+import { inject } from '@angular/core';
+
+export const httpErrorInterceptor: HttpInterceptorFn = (
+  req: HttpRequest<any>,
+  next: HttpHandlerFn,
+): Observable<any> => {
+  const rollbar = inject(RollbarService);
+  const messageService = inject(MessageService);
+
+  return next(req).pipe(
+    retry(1),
+    catchError((error: HttpErrorResponse) => {
+      let errorMessage = '';
+      let errorSummary = '';
+      let errorDetail = '';
+      let tmpError = '';
+
+      if (error.error instanceof ErrorEvent) {
+        // Client-side error
+        errorDetail = `Error: ${error.error.message}`;
+        errorSummary = 'Error';
+      } else {
+        // Server-side error
+        errorSummary = `Error Code: ${error.status}`;
+        tmpError = `Message: ${error.message}`;
+        const tmpSlashArray = tmpError.split('/');
+        if (tmpSlashArray.length > 0) {
+          // Extract the last part of the error message
+          const tmpString = tmpSlashArray[tmpSlashArray.length - 1];
+          const tmpSpaceArray: string[] = tmpString.split(' ');
+          const finalString = tmpSpaceArray[0].slice(0, -1);
+          if (tmpSpaceArray.length > 0) {
+            tmpError = `Message: Gene ${finalString} not found!`;
+          }
+        }
+        errorDetail = tmpError;
+      }
+      errorMessage += '\n' + errorSummary;
+
+      // Displays error message on screen
+      messageService.clear();
+      messageService.add({
+        severity: 'warn',
+        sticky: true,
+        summary: errorSummary,
+        detail: errorDetail,
+        life: 3000,
+      });
+
+      setTimeout(() => {
+        messageService.clear();
+      }, 3000);
+
+      // Send the error message to Rollbar
+      rollbar.error(error);
+
+      return throwError(() => ({ errorSummary, errorMessage }));
+    }),
+  );
+};

libs/agora/services/src/lib/rollbar.service.ts

@@ -1,22 +1,14 @@
-import { Injectable } from '@angular/core';
+import { InjectionToken } from '@angular/core';
 import Rollbar from 'rollbar';
-import { ConfigService } from '@sagebionetworks/agora/config';
 
-@Injectable({
-  providedIn: 'root',
-})
-export class RollbarService {
-  private rollbarConfig = {
-    accessToken: '',
-    captureUncaught: true,
-    captureUnhandledRejections: true,
-  };
+const rollbarConfig = {
+  accessToken: 'e788198867474855a996485580b08d03',
+  captureUncaught: true,
+  captureUnhandledRejections: true,
+};
 
-  constructor(private configService: ConfigService) {
-    this.rollbarConfig.accessToken = configService.config.rollbarToken;
-  }
-
-  getInstance() {
-    return new Rollbar(this.rollbarConfig);
-  }
+export function rollbarFactory() {
+  return new Rollbar(rollbarConfig);
 }
+
+export const RollbarService = new InjectionToken<Rollbar>('rollbar');

libs/agora/styles/src/lib/_general.scss

@@ -66,7 +66,6 @@ body {
 
   .p-toast-message-icon {
     transform: translateY(2px);
-    color: #fff;
   }
 
   .p-toast-icon {

package.json

@@ -54,6 +54,7 @@
     "ngx-typed-js": "2.1.1",
     "node-cache": "5.1.2",
     "normalize.css": "8.0.1",
+    "primeng": "19.0.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-router-dom": "6.26.2",
@@ -178,7 +179,6 @@
     "prettier-plugin-sql": "0.18.1",
     "prettier-plugin-tailwindcss": "0.6.8",
     "primeicons": "7.0.0",
-    "primeng": "17.18.8",
     "pyright": "1.1.381",
     "serverless": "3.22.0",
     "serverless-plugin-typescript": "2.1.4",