wc - Removed and refactored config header

opencb · Nov 24, 2023 · 23b2ea2 · 23b2ea2
1 parent e04b5e5
commit 23b2ea2
Show file tree

Hide file tree

Showing 21 changed files with 105 additions and 140 deletions.
diff --git a/src/sites/test-app/webcomponents/variant-interpreter-grid-test.js b/src/sites/test-app/webcomponents/variant-interpreter-grid-test.js
@@ -71,11 +71,6 @@ class VariantInterpreterGridTest extends LitElement {
             nucleotideGenotype: true,
             alleleStringLengthMax: 10,
 
-            header: {
-                horizontalAlign: "center",
-                verticalAlign: "bottom"
-            },
-
             quality: {
                 qual: 30,
                 dp: 20

diff --git a/src/webcomponents/alignment/gene-coverage-grid.js b/src/webcomponents/alignment/gene-coverage-grid.js
@@ -319,10 +319,6 @@ export default class GeneCoverageGrid extends LitElement {
             nucleotideGenotype: true,
             alleleStringLengthMax: 15,
             showToolbar: true,
-            header: {
-                horizontalAlign: "center",
-                verticalAlign: "bottom"
-            }
         };
     }
 

diff --git a/src/webcomponents/clinical/clinical-analysis-grid.js b/src/webcomponents/clinical/clinical-analysis-grid.js
@@ -62,6 +62,12 @@ export default class ClinicalAnalysisGrid extends LitElement {
         this.gridId = this._prefix + this.COMPONENT_ID;
         this.active = true;
         this._config = this.getDefaultConfig();
+        this.displayConfigDefault = {
+            header: {
+                horizontalAlign: "center",
+                verticalAlign: "bottom",
+            },
+        };
     }
 
     updated(changedProperties) {
@@ -612,7 +618,7 @@ export default class ClinicalAnalysisGrid extends LitElement {
                 id: "caseId",
                 title: "Case",
                 field: "id",
-                halign: this._config.header.horizontalAlign,
+                halign: this.displayConfigDefault.header.horizontalAlign,
                 valign: "middle",
                 formatter: (value, row) => this.caseFormatter(value, row),
                 visible: this.gridCommons.isColumnVisible("caseId")
@@ -621,7 +627,7 @@ export default class ClinicalAnalysisGrid extends LitElement {
                 id: "probandId",
                 title: "Proband (Sample) and Family",
                 field: "proband",
-                halign: this._config.header.horizontalAlign,
+                halign: this.displayConfigDefault.header.horizontalAlign,
                 valign: "middle",
                 formatter: (value, row) => this.probandFormatter(value, row),
                 visible: this.gridCommons.isColumnVisible("probandId")
@@ -630,7 +636,7 @@ export default class ClinicalAnalysisGrid extends LitElement {
                 id: "disorderId",
                 title: "Clinical Condition / Panel",
                 field: "disorder",
-                halign: this._config.header.horizontalAlign,
+                halign: this.displayConfigDefault.header.horizontalAlign,
                 valign: "middle",
                 formatter: (value, row) => {
                     const panelHtml = row.panels?.length > 0 ? CatalogGridFormatter.panelFormatter(row.panels) : "-";
@@ -645,7 +651,7 @@ export default class ClinicalAnalysisGrid extends LitElement {
                 id: "interpretation",
                 title: "Interpretation",
                 field: "interpretation",
-                halign: this._config.header.horizontalAlign,
+                halign: this.displayConfigDefault.header.horizontalAlign,
                 valign: "middle",
                 formatter: (value, row) => this.interpretationFormatter(value, row),
                 visible: this.gridCommons.isColumnVisible("interpretation")
@@ -654,7 +660,7 @@ export default class ClinicalAnalysisGrid extends LitElement {
                 id: "status",
                 title: "Status",
                 field: "status",
-                halign: this._config.header.horizontalAlign,
+                halign: this.displayConfigDefault.header.horizontalAlign,
                 valign: "middle",
                 formatter: this.statusFormatter.bind(this),
                 events: {
@@ -668,7 +674,7 @@ export default class ClinicalAnalysisGrid extends LitElement {
                 title: "Priority",
                 field: "priority",
                 align: "center",
-                halign: this._config.header.horizontalAlign,
+                halign: this.displayConfigDefault.header.horizontalAlign,
                 valign: "middle",
                 formatter: this.priorityFormatter.bind(this),
                 events: {
@@ -682,15 +688,15 @@ export default class ClinicalAnalysisGrid extends LitElement {
                 title: "Analyst",
                 field: "analyst.id",
                 align: "center",
-                halign: this._config.header.horizontalAlign,
+                halign: this.displayConfigDefault.header.horizontalAlign,
                 valign: "middle",
                 visible: this.gridCommons.isColumnVisible("Analyst")
             },
             {
                 id: "dates",
                 title: "Due / Creation Date",
                 field: "Dates",
-                halign: this._config.header.horizontalAlign,
+                halign: this.displayConfigDefault.header.horizontalAlign,
                 valign: "middle",
                 formatter: (field, clinicalAnalysis) => {
                     const dueDateString = UtilsNew.dateFormatter(clinicalAnalysis.dueDate);
@@ -715,7 +721,7 @@ export default class ClinicalAnalysisGrid extends LitElement {
                 id: "actions",
                 title: "Actions",
                 field: "actions",
-                halign: this._config.header.horizontalAlign,
+                halign: this.displayConfigDefault.header.horizontalAlign,
                 valign: "middle",
                 formatter: (value, row) => {
                     const session = this.opencgaSession;
@@ -889,10 +895,6 @@ export default class ClinicalAnalysisGrid extends LitElement {
             showSelectCheckbox: false,
             multiSelection: false,
             detailView: false,
-            header: {
-                horizontalAlign: "center",
-                verticalAlign: "bottom"
-            },
 
             showToolbar: true,
             showActions: true,

diff --git a/src/webcomponents/cohort/cohort-grid.js b/src/webcomponents/cohort/cohort-grid.js
@@ -65,6 +65,12 @@ export default class CohortGrid extends LitElement {
         this.gridId = this._prefix + this.COMPONENT_ID;
         this.active = true;
         this._config = this.getDefaultConfig();
+        this.displayConfigDefault = {
+            header: {
+                horizontalAlign: "center",
+                verticalAlign: "bottom",
+            },
+        };
     }
 
     updated(changedProperties) {
@@ -298,23 +304,23 @@ export default class CohortGrid extends LitElement {
                             ${cohort.name ? `<span class="help-block" style="margin: 5px 0">${cohort.name}</span>` : ""}
                         </div>`;
                 },
-                halign: this._config.header.horizontalAlign,
+                halign: this.displayConfigDefault.header.horizontalAlign,
                 visible: this.gridCommons.isColumnVisible("id")
             },
             {
                 id: "numSamples",
                 title: "Number of Samples",
                 field: "numSamples",
                 // formatter: (value, row) => row.numSamples ?? 0,
-                halign: this._config.header.horizontalAlign,
+                halign: this.displayConfigDefault.header.horizontalAlign,
                 visible: this.gridCommons.isColumnVisible("numSamples")
             },
             {
                 id: "creationDate",
                 title: "Creation Date",
                 field: "creationDate",
                 formatter: CatalogGridFormatter.dateFormatter,
-                halign: this._config.header.horizontalAlign,
+                halign: this.displayConfigDefault.header.horizontalAlign,
                 visible: this.gridCommons.isColumnVisible("creationDate")
             },
         ];
@@ -470,10 +476,6 @@ export default class CohortGrid extends LitElement {
             multiSelection: false,
             showSelectCheckbox: false,
             detailView: false,
-            header: {
-                horizontalAlign: "center",
-                verticalAlign: "bottom"
-            },
 
             showToolbar: true,
             showActions: true,

diff --git a/src/webcomponents/disease-panel/disease-panel-gene-view.js b/src/webcomponents/disease-panel/disease-panel-gene-view.js
@@ -51,9 +51,14 @@ export default class DiseasePanelGeneView extends LitElement {
         this.genePanels = {};
         this._prefix = UtilsNew.randomString(8);
         this.gridId = this._prefix + "GenePanelBrowserGrid";
-        this.displayConfigDefault = {};
         this._config = this.getDefaultConfig();
         this.gridCommons = new GridCommons(this.gridId, this, this._config);
+        this.displayConfigDefault = {
+            header: {
+                horizontalAlign: "center",
+                verticalAlign: "bottom",
+            },
+        };
     }
 
     // connectedCallback() {
@@ -163,7 +168,7 @@ export default class DiseasePanelGeneView extends LitElement {
                     title: "Gene",
                     field: "name",
                     formatter: (value, row) => this.geneFormatter(row, this.opencgaSession),
-                    halign: this._config.header.horizontalAlign
+                    halign: this.displayConfigDefault.header.horizontalAlign
                 },
                 {
                     id: "modesOfInheritance",
@@ -200,7 +205,7 @@ export default class DiseasePanelGeneView extends LitElement {
                             return "-";
                         }
                     },
-                    halign: this._config.header.horizontalAlign
+                    halign: this.displayConfigDefault.header.horizontalAlign
                 },
                 {
                     id: "phenotypes",
@@ -261,10 +266,6 @@ export default class DiseasePanelGeneView extends LitElement {
             detailView: false,
             multiSelection: false,
             showToolbar: false,
-            header: {
-                horizontalAlign: "center",
-                verticalAlign: "bottom"
-            }
         };
     }
 

diff --git a/src/webcomponents/disease-panel/disease-panel-grid.js b/src/webcomponents/disease-panel/disease-panel-grid.js
@@ -67,6 +67,12 @@ export default class DiseasePanelGrid extends LitElement {
         this.gridId = this._prefix + this.COMPONENT_ID;
         this.active = true;
         this._config = this.getDefaultConfig();
+        this.displayConfigDefault = {
+            header: {
+                horizontalAlign: "center",
+                verticalAlign: "bottom",
+            },
+        };
     }
 
     updated(changedProperties) {
@@ -374,7 +380,7 @@ export default class DiseasePanelGrid extends LitElement {
                             <div style="margin: 5px 0">${idLinkHtml}</div>
                         </div>`;
                 },
-                halign: this._config.header.horizontalAlign,
+                halign: this.displayConfigDefault.header.horizontalAlign,
                 visible: this.gridCommons.isColumnVisible("name")
             },
             // {
@@ -392,15 +398,15 @@ export default class DiseasePanelGrid extends LitElement {
             //         }
             //         return row?.id ?? "-";
             //     },
-            //     halign: this._config.header.horizontalAlign,
+            //     halign: this.displayConfigDefault.header.horizontalAlign,
             //     visible: this.gridCommons.isColumnVisible("id")
             // },
             {
                 id: "disorders",
                 title: "Disorders",
                 field: "disorders",
                 formatter: disorders => CatalogGridFormatter.disorderFormatter(disorders),
-                halign: this._config.header.horizontalAlign,
+                halign: this.displayConfigDefault.header.horizontalAlign,
                 visible: this.gridCommons.isColumnVisible("disorders")
             },
             {
@@ -455,7 +461,7 @@ export default class DiseasePanelGrid extends LitElement {
                 id: "actions",
                 title: "Actions",
                 field: "actions",
-                halign: this._config.header.horizontalAlign,
+                halign: this.displayConfigDefault.header.horizontalAlign,
                 formatter: (value, row) => `
                     <div class="dropdown" style="display: flex; justify-content: center;">
                         <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
@@ -590,10 +596,6 @@ export default class DiseasePanelGrid extends LitElement {
             showSelectCheckbox: false,
             multiSelection: false,
             detailView: false,
-            header: {
-                horizontalAlign: "center",
-                verticalAlign: "bottom"
-            },
 
             showToolbar: true,
             showActions: true,

diff --git a/src/webcomponents/disease-panel/disease-panel-region-view.js b/src/webcomponents/disease-panel/disease-panel-region-view.js
@@ -47,9 +47,14 @@ export default class DiseasePanelRegionView extends LitElement {
         this.regions = {};
         this._prefix = UtilsNew.randomString(8);
         this.gridId = this._prefix + "GenePanelBrowserGrid";
-        this.displayConfigDefault = {};
         this._config = this.getDefaultConfig();
         this.gridCommons = new GridCommons(this.gridId, this, this._config);
+        this.displayConfigDefault = {
+            header: {
+                horizontalAlign: "center",
+                verticalAlign: "bottom",
+            },
+        };
     }
 
     // connectedCallback() {
@@ -128,7 +133,7 @@ export default class DiseasePanelRegionView extends LitElement {
                     title: "Region",
                     field: "name",
                     formatter: (value, row) => `${row.id}`,
-                    halign: this._config.header.horizontalAlign,
+                    halign: this.displayConfigDefault.header.horizontalAlign,
                 },
                 {
                     id: "modesOfInheritance",
@@ -165,7 +170,7 @@ export default class DiseasePanelRegionView extends LitElement {
                             return "-";
                         }
                     },
-                    halign: this._config.header.horizontalAlign,
+                    halign: this.displayConfigDefault.header.horizontalAlign,
                 },
                 {
                     id: "phenotypes",
@@ -225,10 +230,6 @@ export default class DiseasePanelRegionView extends LitElement {
             detailView: false,
             multiSelection: false,
             showToolbar: false,
-            header: {
-                horizontalAlign: "center",
-                verticalAlign: "bottom"
-            }
         };
     }