TASK-6052 - Returned events by variant query endpoint are not displayed in Variant Browser and Sample Variant Browser

src/webcomponents/commons/grid-commons.js

@@ -324,4 +324,30 @@ export default class GridCommons {
         return columns;
     }
 
+    displayResponseWarningEvents(response) {
+        const eventsContainer = this.context.querySelector(`div#${this.gridId}WarningEvents`);
+        if (eventsContainer && (response?.events?.length > 0 || response?.responses?.[0]?.events?.length > 0)) {
+            const events = [...(response?.events || []), ...(response?.responses?.[0]?.events || [])]
+                .filter(event => event && event.type === "WARNING" && !!event.message);
+            if (events.length > 0) {
+                const eventsMessages = events.map(event => {
+                    return `
+                        <div class="alert alert-warning" style="margin-bottom:8px;">
+                            <i class="fas fa-exclamation-triangle icon-padding"></i>
+                            <span>${event.message}</span>
+                        </div>
+                    `;
+                });
+                eventsContainer.replaceChildren(UtilsNew.renderHTML(eventsMessages.join("")));
+            }
+        }
+    }
+
+    clearResponseWarningEvents() {
+        const eventsContainer = this.context.querySelector(`div#${this.gridId}WarningEvents`);
+        if (eventsContainer) {
+            eventsContainer.replaceChildren();
+        }
+    }
+
 }

src/webcomponents/variant/interpretation/variant-interpreter-grid.js

@@ -224,6 +224,7 @@ export default class VariantInterpreterGrid extends LitElement {
                 variantGrid: this,
 
                 ajax: params => {
+                    this.gridCommons.clearResponseWarningEvents();
                     // Make a deep clone object to manipulate the query sent to OpenCGA
                     const internalQuery = JSON.parse(JSON.stringify(this.query));
 
@@ -307,6 +308,7 @@ export default class VariantInterpreterGrid extends LitElement {
                         });
                 },
                 responseHandler: response => {
+                    this.gridCommons.displayResponseWarningEvents(response);
                     const result = this.gridCommons.responseHandler(response, $(this.table).bootstrapTable("getOptions"));
                     return result.response;
                 },
@@ -1456,6 +1458,8 @@ export default class VariantInterpreterGrid extends LitElement {
                 }
             </style>
 
+            <div id="${this.gridId}WarningEvents"></div>
+
             <opencb-grid-toolbar
                 .config="${this.toolbarConfig}"
                 .settings="${this.toolbarSetting}"

src/webcomponents/variant/interpretation/variant-interpreter-rearrangement-grid.js

@@ -295,6 +295,7 @@ export default class VariantInterpreterRearrangementGrid extends LitElement {
                 variantGrid: this,
 
                 ajax: params => {
+                    this.gridCommons.clearResponseWarningEvents();
                     let rearrangementResponse = null;
 
                     // Make a deep clone object to manipulate the query sent to OpenCGA
@@ -343,6 +344,7 @@ export default class VariantInterpreterRearrangementGrid extends LitElement {
                         });
                 },
                 responseHandler: response => {
+                    this.gridCommons.displayResponseWarningEvents(response);
                     const result = this.gridCommons.responseHandler(response, $(this.table).bootstrapTable("getOptions"));
                     return result.response;
                 },
@@ -1025,6 +1027,8 @@ export default class VariantInterpreterRearrangementGrid extends LitElement {
                 }
             </style>
 
+            <div id="${this.gridId}WarningEvents"></div>
+
             <opencb-grid-toolbar
                 .config="${this.toolbarConfig}"
                 .settings="${this.toolbarSetting}"

src/webcomponents/variant/variant-browser-grid.js

@@ -195,6 +195,7 @@ export default class VariantBrowserGrid extends LitElement {
                 // this makes the variant-browser-grid properties available in the bootstrap-table detail formatter
                 variantGrid: this,
                 ajax: params => {
+                    this.gridCommons.clearResponseWarningEvents();
                     const tableOptions = $(this.table).bootstrapTable("getOptions");
                     this.filters = {
                         study: this.opencgaSession.study.fqn,
@@ -291,12 +292,17 @@ export default class VariantBrowserGrid extends LitElement {
                             }
                             params.success(res);
                         })
-                        .catch(e => params.error(e))
+                        .catch(error => {
+                            console.error(error);
+                            params.error(error);
+                        })
                         .finally(() => {
                             LitUtils.dispatchCustomEvent(this, "queryComplete", null);
                         });
                 },
                 responseHandler: response => {
+                    this.gridCommons.displayResponseWarningEvents(response);
+
                     const result = this.gridCommons.responseHandler(response, $(this.table).bootstrapTable("getOptions"));
 
                     // Only the first 1M pages must be shown
@@ -1056,6 +1062,7 @@ export default class VariantBrowserGrid extends LitElement {
 
     render() {
         return html`
+            <div id="${this.gridId}WarningEvents"></div>
             ${this._config?.showToolbar ? html`
                 <opencb-grid-toolbar
                     .query="${this.query}"