wc: replace formatLoadingMessage by loadingTemplate function #TASK-5060

opencb · Oct 2, 2023 · 2c9f3d0 · 2c9f3d0
1 parent 2300657
commit 2c9f3d0
Show file tree

Hide file tree

Showing 36 changed files with 105 additions and 68 deletions.
diff --git a/src/webcomponents/alignment/gene-coverage-grid.js b/src/webcomponents/alignment/gene-coverage-grid.js
@@ -112,7 +112,7 @@ export default class GeneCoverageGrid extends LitElement {
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
             gridContext: this,
-            formatLoadingMessage: () =>"<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement, field) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             onPageChange: (page, size) => {
                 const result = this.gridCommons.onPageChange(page, size);
@@ -149,7 +149,7 @@ export default class GeneCoverageGrid extends LitElement {
                     pageList: this._config.pageList,
                     showExport: this._config.showExport,
                     // detailView: this._config.detailView,
-                    formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                    loadingTemplate: () => this.gridCommons.loadingFormatter(),
                     ajax: params => {
                         this.opencgaSession.opencgaClient.alignments().statsCoverage(this.file, this.geneIds, {study: this.opencgaSession.study.fqn})
                             .then(restResponse => {

diff --git a/src/webcomponents/clinical/clinical-analysis-audit-browser.js b/src/webcomponents/clinical/clinical-analysis-audit-browser.js
@@ -236,7 +236,8 @@ class ClinicalAnalysisAuditBrowser extends LitElement {
             paginationVAlign: "both",
             formatShowingRows: this.gridCommons.formatShowingRows,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement)
         });
     }

diff --git a/src/webcomponents/clinical/clinical-analysis-grid.js b/src/webcomponents/clinical/clinical-analysis-grid.js
@@ -139,7 +139,8 @@ export default class ClinicalAnalysisGrid extends LitElement {
                 showExport: this._config.showExport,
                 detailView: this._config.detailView,
                 gridContext: this,
-                formatLoadingMessage: () =>"<div><loading-spinner></loading-spinner></div>",
+                // formatLoadingMessage: () =>"<div><loading-spinner></loading-spinner></div>",
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 ajax: params => {
                     let response = null;
                     this.filters = {

diff --git a/src/webcomponents/clinical/interpretation/clinical-interpretation-manager.js b/src/webcomponents/clinical/interpretation/clinical-interpretation-manager.js
@@ -227,7 +227,8 @@ export default class ClinicalInterpretationManager extends LitElement {
             sidePagination: "local",
             pagination: true,
             formatNoMatches: () => "No previous versions",
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
         });
     }

diff --git a/src/webcomponents/clinical/rga/rga-gene-view.js b/src/webcomponents/clinical/rga/rga-gene-view.js
@@ -127,7 +127,8 @@ export default class RgaGeneView extends LitElement {
             showExport: this._config.showExport,
             detailView: this._config.detailView,
             detailFormatter: this._config.detailFormatter,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             ajax: async params => {
                 const _filters = {
                     study: this.opencgaSession.study.fqn,

diff --git a/src/webcomponents/clinical/rga/rga-individual-family.js b/src/webcomponents/clinical/rga/rga-individual-family.js
@@ -165,7 +165,8 @@ export default class RgaIndividualFamily extends LitElement {
             showExport: this._config.showExport,
             detailView: this._config.detailView,
             detailFormatter: this._config.detailFormatter,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             ajax: async params => {
                 const _filters = {
                     study: this.opencgaSession.study.fqn,

diff --git a/src/webcomponents/clinical/rga/rga-individual-view.js b/src/webcomponents/clinical/rga/rga-individual-view.js
@@ -155,7 +155,8 @@ export default class RgaIndividualView extends LitElement {
             showExport: this._config.showExport,
             detailView: this._config.detailView,
             detailFormatter: this._config.detailFormatter,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             ajax: async params => {
                 const _filters = {
                     study: this.opencgaSession.study.fqn,

diff --git a/src/webcomponents/clinical/rga/rga-variant-allele-pairs.js b/src/webcomponents/clinical/rga/rga-variant-allele-pairs.js
@@ -155,7 +155,8 @@ export default class RgaVariantAllelePairs extends LitElement {
             paginationVAlign: "both",
             // formatShowingRows: this.gridCommons.formatShowingRows,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             ajax: async params => {
                 try {
                     const pageNumber = this.table.bootstrapTable("getOptions").pageNumber || this.table.bootstrapTable("getOptions").pageNumber === 1;

diff --git a/src/webcomponents/clinical/rga/rga-variant-individual.js b/src/webcomponents/clinical/rga/rga-variant-individual.js
@@ -117,7 +117,8 @@ export default class RgaVariantIndividual extends LitElement {
             paginationVAlign: "both",
             formatShowingRows: (pageFrom, pageTo, totalRows) => this.formatShowingRows(pageFrom, pageTo, totalRows),
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             ajax: async params => {
                 try {
                     const _filters = {

diff --git a/src/webcomponents/clinical/rga/rga-variant-view.js b/src/webcomponents/clinical/rga/rga-variant-view.js
@@ -491,7 +491,8 @@ export default class RgaVariantView extends LitElement {
             paginationVAlign: "both",
             formatShowingRows: (pageFrom, pageTo, totalRows) => this.formatShowingRows(pageFrom, pageTo, totalRows),
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             ajax: params => {
                 const _filters = {
                     study: this.opencgaSession.study.fqn,

diff --git a/src/webcomponents/cohort/cohort-grid.js b/src/webcomponents/cohort/cohort-grid.js
@@ -163,7 +163,8 @@ export default class CohortGrid extends LitElement {
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             onPostBody: data => {
                 // We call onLoadSuccess to select first row
@@ -209,7 +210,8 @@ export default class CohortGrid extends LitElement {
                 showExport: this._config.showExport,
                 detailView: this._config.detailView,
                 detailFormatter: this._config.detailFormatter,
-                formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 ajax: params => {
                     const sort = this.table.bootstrapTable("getOptions").sortName ? {
                         sort: this.table.bootstrapTable("getOptions").sortName,

diff --git a/src/webcomponents/commons/grid-commons.js b/src/webcomponents/commons/grid-commons.js
@@ -18,7 +18,6 @@ import UtilsNew from "../../core/utils-new.js";
 import CustomActions from "./custom-actions.js";
 import ExtensionsManager from "../extensions-manager.js";
 
-
 export default class GridCommons {
 
     static GRID_ICONS_PREFIX = "fas";
@@ -307,4 +306,8 @@ export default class GridCommons {
         return columns;
     }
 
+    loadingFormatter() {
+        return "<div style='margin-top:5%'><loading-spinner></loading-spinner></div>";
+    }
+
 }
diff --git a/src/webcomponents/commons/opencga-browser.js b/src/webcomponents/commons/opencga-browser.js
@@ -362,7 +362,7 @@ export default class OpencgaBrowser extends LitElement {
                     .icon="${this._config.icon}">
                 </tool-header>
             ` : null}
-            <div class="row">
+            <div class="d-flex gap-4">
                 <div class="col-2">
                     <div class="d-grid gap-2 pb-3">
                         <button type="button" class="btn btn-primary" @click="${this.onRun}">
@@ -403,7 +403,7 @@ export default class OpencgaBrowser extends LitElement {
                         ${this.renderAggregation()}
                     </div>
                 </div>
-                <div class="col-10">
+                <div class="flex-grow-1">
                     ${this.renderButtonViews()}
                     <div>
                         <opencga-active-filters

diff --git a/src/webcomponents/disease-panel/disease-panel-gene-view.js b/src/webcomponents/disease-panel/disease-panel-gene-view.js
@@ -101,7 +101,8 @@ export default class DiseasePanelGeneView extends LitElement {
             showExport: this._config.showExport,
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             // onPageChange: (page, size) => {
             //     const result = this.gridCommons.onPageChange(page, size);

diff --git a/src/webcomponents/disease-panel/disease-panel-grid.js b/src/webcomponents/disease-panel/disease-panel-grid.js
@@ -177,7 +177,8 @@ export default class DiseasePanelGrid extends LitElement {
                 detailView: this._config.detailView,
                 detailFormatter: this._config.detailFormatter,
                 gridContext: this,
-                formatLoadingMessage: () => String.raw`<div><loading-spinner></loading-spinner></div>`,
+                // formatLoadingMessage: () => String.raw`<div><loading-spinner></loading-spinner></div>`,
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 ajax: async params => {
                     this.filters = {
                         study: this.opencgaSession.study.fqn,
@@ -263,7 +264,8 @@ export default class DiseasePanelGrid extends LitElement {
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             // onPageChange: (page, size) => {
             //     const result = this.gridCommons.onPageChange(page, size);

diff --git a/src/webcomponents/disease-panel/disease-panel-region-view.js b/src/webcomponents/disease-panel/disease-panel-region-view.js
@@ -98,7 +98,8 @@ export default class DiseasePanelRegionView extends LitElement {
             showExport: this._config.showExport,
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             // onPageChange: (page, size) => {
             //     const result = this.gridCommons.onPageChange(page, size);

diff --git a/src/webcomponents/family/family-grid.js b/src/webcomponents/family/family-grid.js
@@ -176,7 +176,8 @@ export default class FamilyGrid extends LitElement {
                 detailView: this._config.detailView,
                 detailFormatter: this._config.detailFormatter,
                 gridContext: this,
-                formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 ajax: params => {
                     const sort = this.table.bootstrapTable("getOptions").sortName ? {
                         sort: this.table.bootstrapTable("getOptions").sortName,
@@ -292,7 +293,8 @@ export default class FamilyGrid extends LitElement {
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement, field) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             onPostBody: data => {
                 // We call onLoadSuccess to select first row

diff --git a/src/webcomponents/file/file-grid.js b/src/webcomponents/file/file-grid.js
@@ -151,7 +151,8 @@ export default class OpencgaFileGrid extends LitElement {
                 detailView: this._config.detailView,
                 detailFormatter: this._config.detailFormatter,
                 gridContext: this,
-                formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 ajax: params => {
                     this.filters = {
                         study: this.opencgaSession.study.fqn,
@@ -241,7 +242,8 @@ export default class OpencgaFileGrid extends LitElement {
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             onPageChange: (page, size) => {
                 const result = this.gridCommons.onPageChange(page, size);

diff --git a/src/webcomponents/individual/individual-grid.js b/src/webcomponents/individual/individual-grid.js
@@ -176,7 +176,8 @@ export default class IndividualGrid extends LitElement {
                 detailView: this._config.detailView,
                 detailFormatter: this._config.detailFormatter,
                 gridContext: this,
-                formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 ajax: params => {
                     const sort = this.table.bootstrapTable("getOptions").sortName ? {
                         sort: this.table.bootstrapTable("getOptions").sortName,
@@ -291,7 +292,8 @@ export default class IndividualGrid extends LitElement {
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             onPostBody: data => {
                 // We call onLoadSuccess to select first row

diff --git a/src/webcomponents/job/job-grid.js b/src/webcomponents/job/job-grid.js
@@ -172,7 +172,8 @@ export default class JobGrid extends LitElement {
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             onPostBody: data => {
                 // We call onLoadSuccess to select first row
@@ -231,7 +232,8 @@ export default class JobGrid extends LitElement {
                 sortName: "Creation",
                 sortOrder: "asc",
                 gridContext: this,
-                formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 ajax: params => {
                     document.getElementById(this._prefix + "refreshIcon").style.visibility = "visible";
                     this.filters = {

diff --git a/src/webcomponents/sample/sample-grid.js b/src/webcomponents/sample/sample-grid.js
@@ -175,7 +175,8 @@ export default class SampleGrid extends LitElement {
                 detailView: this._config.detailView,
                 detailFormatter: this._config.detailFormatter,
                 gridContext: this,
-                formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 ajax: params => {
                     this.filters = {
                         study: this.opencgaSession.study.fqn,
@@ -288,7 +289,8 @@ export default class SampleGrid extends LitElement {
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
             gridContext: this,
-            formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+            loadingTemplate: () => this.gridCommons.loadingFormatter(),
             onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             onPostBody: data => {
                 // We call onLoadSuccess to select first row

diff --git a/src/webcomponents/study/admin/study-admin-audit.js b/src/webcomponents/study/admin/study-admin-audit.js
@@ -146,7 +146,8 @@ export default class StudyAdminAudit extends LitElement {
                 detailView: this._config.detailView,
                 detailFormatter: this._config.detailFormatter,
                 gridContext: this,
-                formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                // formatLoadingMessage: () => "<div><loading-spinner></loading-spinner></div>",
+                loadingTemplate: () => this.gridCommons.loadingFormatter(),
                 ajax: params => {
                     const query = {
                         study: this.study.fqn,