Add error alert type for non-catastrophic errors

package.json

@@ -194,6 +194,7 @@
     "jquery": "3.6.0",
     "jquery-migrate": "3.0.0",
     "js-combinatorics": "^0.5.2",
+    "js-event-bus": "^1.1.1",
     "json-fn": "^1.1.1",
     "jsonpath": "^1.1.1",
     "jspdf": "^1.3.3",

src/AppStore.ts

@@ -10,11 +10,13 @@ import client from 'shared/api/cbioportalClientInstance';
 import { sendSentryMessage } from './shared/lib/tracking';
 import { FeatureFlagStore } from 'shared/FeatureFlagStore';
 
-export type SiteError = {
-    errorObj: any;
-    dismissed: boolean;
-    title?: string;
-};
+export class SiteError {
+    constructor(
+        public errorObj: any,
+        public displayType: 'alert' | 'site' = 'site',
+        public title?: string
+    ) {}
+}
 
 export class AppStore {
     constructor(
@@ -29,7 +31,7 @@ export class AppStore {
 
             if (error.status && /400|500|403/.test(error.status)) {
                 sendSentryMessage('ERROR DIALOG SHOWN:' + error);
-                this.siteErrors.push({ errorObj: error, dismissed: false });
+                this.siteErrors.push(new SiteError(new Error(error)));
             }
         });
     }
@@ -44,7 +46,9 @@ export class AppStore {
 
     @observable private _appReady = false;
 
-    @observable siteErrors: SiteError[] = [];
+    siteErrors = observable.array<SiteError>();
+
+    alertErrors = observable.array<SiteError>();
 
     @observable.ref userName: string | undefined = undefined;
 
@@ -76,30 +80,29 @@ export class AppStore {
         }
     }
 
-    @computed get undismissedSiteErrors() {
-        return _.filter(this.siteErrors.slice(), err => !err.dismissed);
-    }
-
     @computed get isErrorCondition() {
-        return this.undismissedSiteErrors.length > 0;
+        return this.siteErrors.length > 0;
     }
 
     @action
     public dismissErrors() {
-        this.siteErrors = this.siteErrors.map(err => {
-            err.dismissed = true;
-            return err;
-        });
+        this.siteErrors.clear();
     }
 
-    @action public addError(err: String | SiteError) {
-        if (_.isString(err)) {
-            this.siteErrors.push({
-                errorObj: { message: err },
-                dismissed: false,
-            });
+    @action
+    public dismissError(err: SiteError) {
+        this.siteErrors.remove(err);
+    }
+
+    @action public addError(err: SiteError | string) {
+        if (typeof err === 'string') {
+            this.siteErrors.push(new SiteError(new Error(err)));
         } else {
-            this.siteErrors.push({ errorObj: err, dismissed: false });
+            if (err.displayType === 'alert') {
+                this.alertErrors.push(err);
+            } else {
+                this.siteErrors.push(err);
+            }
         }
     }
 

src/appBootstrapper.tsx

@@ -33,6 +33,7 @@ import Container from 'appShell/App/Container';
 import { IServerConfig } from 'config/IAppConfig';
 import { initializeGenericAssayServerConfig } from 'shared/lib/GenericAssayUtils/GenericAssayConfig';
 import { FeatureFlagStore } from 'shared/FeatureFlagStore';
+import eventBus from 'shared/events/eventBus';
 
 export interface ICBioWindow {
     globalStores: {
@@ -163,6 +164,10 @@ const stores = {
 
 browserWindow.globalStores = stores;
 
+eventBus.on('error', err => {
+    stores.appStore.addError(err);
+});
+
 //@ts-ignore
 const end = superagent.Request.prototype.end;
 

src/appShell/App/Container.tsx

@@ -30,6 +30,7 @@ import {
 import makeRoutes from 'routes';
 import { AppContext } from 'cbioportal-frontend-commons';
 import { IAppContext } from 'cbioportal-frontend-commons';
+import { ErrorAlert } from 'shared/components/errorScreen/ErrorAlert';
 
 interface IContainerProps {
     location: Location;
@@ -123,7 +124,7 @@ export default class Container extends React.Component<IContainerProps, {}> {
                                 <ErrorScreen
                                     title={
                                         formatErrorTitle(
-                                            this.appStore.undismissedSiteErrors
+                                            this.appStore.siteErrors
                                         ) ||
                                         'Oops. There was an error retrieving data.'
                                     }
@@ -133,16 +134,19 @@ export default class Container extends React.Component<IContainerProps, {}> {
                                         </a>
                                     }
                                     errorLog={formatErrorLog(
-                                        this.appStore.undismissedSiteErrors
+                                        this.appStore.siteErrors
                                     )}
                                     errorMessages={formatErrorMessages(
-                                        this.appStore.undismissedSiteErrors
+                                        this.appStore.siteErrors
                                     )}
                                 />
                             </div>
                         </Then>
                         <Else>
-                            <div className="contentWrapper">{makeRoutes()}</div>
+                            <div className="contentWrapper">
+                                <ErrorAlert appStore={this.appStore} />
+                                {makeRoutes()}
+                            </div>
                         </Else>
                     </If>
                 </div>

src/pages/groupComparison/GroupComparisonStore.ts

@@ -10,11 +10,9 @@ import {
     SampleFilter,
     CancerStudy,
     MutationMultipleStudyFilter,
-    SampleMolecularIdentifier,
     GenePanelDataMultipleStudyFilter,
     Mutation,
     Gene,
-    GenePanelData,
 } from 'cbioportal-ts-api-client';
 import { action, observable, makeObservable, computed } from 'mobx';
 import client from '../../shared/api/cbioportalClientInstance';

src/pages/patientView/clinicalInformation/PatientViewPageStore.ts

@@ -754,11 +754,7 @@ export class PatientViewPageStore {
                     this.sampleId
                 ),
             onError: (err: Error) => {
-                this.appStore.siteErrors.push({
-                    errorObj: err,
-                    dismissed: false,
-                    title: 'Samples / Patients not valid',
-                } as SiteError);
+                this.appStore.siteErrors.push(new SiteError(err));
             },
         },
         []
@@ -1668,6 +1664,7 @@ export class PatientViewPageStore {
                     return Promise.resolve([]);
                 }
             },
+            onError: () => {},
         },
         []
     );
@@ -1715,6 +1712,7 @@ export class PatientViewPageStore {
                     return Promise.resolve({});
                 }
             },
+            onError: () => {},
         },
         {}
     );
@@ -2437,6 +2435,7 @@ export class PatientViewPageStore {
                     this.oncoKbAnnotatedGenes,
                     this.mutationData
                 ),
+            onError: () => {},
         },
         ONCOKB_DEFAULT
     );
@@ -2698,5 +2697,6 @@ export class PatientViewPageStore {
                 .value();
         },
         default: {},
+        onError: () => {},
     });
 }

src/pages/resultsView/ResultsViewPageStore.ts

@@ -197,10 +197,9 @@ import {
     makeProfiledInClinicalAttributes,
 } from '../../shared/components/oncoprint/ResultsViewOncoprintUtils';
 import { annotateAlterationTypes } from '../../shared/lib/oql/annotateAlterationTypes';
-import { ErrorMessages } from '../../shared/enums/ErrorEnums';
 import sessionServiceClient from '../../shared/api/sessionServiceInstance';
 import comparisonClient from '../../shared/api/comparisonGroupClientInstance';
-import { AppStore } from '../../AppStore';
+import { AppStore, SiteError } from '../../AppStore';
 import { getNumSamples } from '../groupComparison/GroupComparisonUtils';
 import autobind from 'autobind-decorator';
 import {
@@ -300,6 +299,8 @@ import { getAlterationData } from 'shared/components/oncoprint/OncoprintUtils';
 import { PageUserSession } from 'shared/userSession/PageUserSession';
 import { PageType } from 'shared/userSession/PageType';
 import { ClinicalTrackConfig } from 'shared/components/oncoprint/Oncoprint';
+import eventBus from 'shared/events/eventBus';
+import { ErrorMessages } from 'shared/errorMessages';
 
 type Optional<T> =
     | { isApplicable: true; value: T }
@@ -3997,7 +3998,11 @@ export class ResultsViewPageStore
                 }
                 return _.flatten(await Promise.all(promises));
             },
+            onError: e => {
+                eventBus.emit('error', null, new SiteError(e));
+            },
         },
+
         []
     );
 
@@ -4596,7 +4601,7 @@ export class ResultsViewPageStore
             ) {
                 return genes;
             } else {
-                throw new Error(ErrorMessages.InvalidGenes);
+                throw new Error(ErrorMessages.INVALID_GENES);
             }
         },
         onResult: (genes: Gene[]) => {
@@ -5426,11 +5431,12 @@ export class ResultsViewPageStore
     readonly oncoKbDataForOncoprint = remoteData<IOncoKbData | Error>(
         {
             await: () => [this.mutations, this.oncoKbAnnotatedGenes],
-            invoke: async () =>
-                fetchOncoKbDataForOncoprint(
+            invoke: async () => {
+                return await fetchOncoKbDataForOncoprint(
                     this.oncoKbAnnotatedGenes,
                     this.mutations
-                ),
+                );
+            },
             onError: (err: Error) => {
                 // fail silently, leave the error handling responsibility to the data consumer
             },

src/shared/components/errorScreen/ErrorAlert.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { AppStore } from 'AppStore';
+import { observer } from 'mobx-react';
+import styles from './errorScreen.module.scss';
+import classNames from 'classnames';
+import _ from 'lodash';
+
+export const ErrorAlert: React.FunctionComponent<{
+    appStore: AppStore;
+}> = observer(function({ appStore }) {
+    const errorGroups = _.groupBy(
+        appStore.alertErrors,
+        e => e.errorObj.message
+    );
+
+    return appStore.alertErrors.length ? (
+        <div className={styles.errorAlert}>
+            {_.map(errorGroups, (errors, message) => {
+                return <p>{message}</p>;
+            })}
+            <i
+                className={classNames(styles.dismissButton, 'fa', 'fa-close')}
+                onClick={() => appStore.alertErrors.clear()}
+            />
+        </div>
+    ) : null;
+});

src/shared/components/errorScreen/ErrorScreen.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import _ from 'lodash';
 import { getBrowserWindow } from 'cbioportal-frontend-commons';
 import { observer } from 'mobx-react';
-import './errorScreen.scss';
+import styles from './errorScreen.module.scss';
 import { getServerConfig } from 'config/config';
 import { buildCBioPortalPageUrl } from 'shared/api/urls';
 import { computed, makeObservable } from 'mobx';
@@ -57,8 +57,11 @@ export default class ErrorScreen extends React.Component<
         const subject = 'cBioPortal user reported error';
 
         return (
-            <div className={'errorScreen'}>
-                <a className={'errorLogo'} href={buildCBioPortalPageUrl('/')}>
+            <div className={styles.errorScreen}>
+                <a
+                    className={styles.errorLogo}
+                    href={buildCBioPortalPageUrl('/')}
+                >
                     <img
                         src={require('../../../globalStyles/images/cbioportal_logo.png')}
                         alt="cBioPortal Logo"

src/shared/components/errorScreen/errorScreen.scss → src/shared/components/errorScreen/errorScreen.module.scss

@@ -32,3 +32,25 @@
         margin: 0 auto;
     }
 }
+
+.errorAlert {
+    padding: 10px 30px 10px 10px;
+    background: $brand-danger;
+    color: #fff;
+    position: relative;
+
+    .dismissButton {
+        position: absolute;
+        right: 5px;
+        top: 10px;
+        cursor: pointer;
+
+        &:hover {
+            color: #eee;
+        }
+    }
+
+    p:last-of-type {
+        margin-bottom: 0 !important;
+    }
+}

src/shared/components/errorScreen/errorScreen.module.scss.d.ts

@@ -0,0 +1,8 @@
+declare const styles: {
+  readonly "dismissButton": string;
+  readonly "errorAlert": string;
+  readonly "errorLogo": string;
+  readonly "errorScreen": string;
+};
+export = styles;
+

src/shared/errorMessages.ts

@@ -0,0 +1,5 @@
+export const ErrorMessages = {
+    ONCOKB_LOAD_ERROR:
+        'Error loading OncoKB annotation data. UI may not accurately reflect Oncogenic status.',
+    INVALID_GENES: 'INVALID GENE SYMBOLS',
+};

src/shared/events/eventBus.js

@@ -0,0 +1,5 @@
+import EventBus from 'js-event-bus';
+
+const eventBus = new EventBus();
+
+export default eventBus;