From e4f9abfc0166b70583da0e1b4849eb17d915498f Mon Sep 17 00:00:00 2001
From: imedina <igmecas@gmail.com>
Date: Tue, 28 May 2024 01:49:00 +0100
Subject: [PATCH 01/41] style: set font-size to 13px

---
 styles/css/global.css   | 9 ++++-----
 styles/scss/custom.scss | 7 ++-----
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/styles/css/global.css b/styles/css/global.css
index 5bd6798b9..de5f2cdc1 100644
--- a/styles/css/global.css
+++ b/styles/css/global.css
@@ -43,8 +43,9 @@
 }
 
 html {
-    /* 14px use this size by default*/
-    font-size: 0.875rem;
+    /* 13px use this size by default*/
+    /*font-size: 0.875rem;*/
+    font-size: 0.8125rem;
 }
 
 body,
@@ -129,7 +130,6 @@ a:visited {
     text-overflow: ellipsis;
     background-color: transparent;
     user-select: none;
-
 }
 
 /*********** data-table *****************/
@@ -143,7 +143,6 @@ a:visited {
     min-height: 135px;
 }
 
-
 /* Custom pagination-detail on top of the boostrap-table grids.
    This removes the pager buttons on top pf the grids leaving only the counter of records.
    nth-child(2) is the top pager while nth-child(4) would the bottom pager.
@@ -205,7 +204,7 @@ a:visited {
 }
 
 /********** interpreter side-nav & opencga-project side-nav ************/
-.side-tabs.side-nav a{
+.side-tabs.side-nav a {
     cursor: pointer;
 }
 
diff --git a/styles/scss/custom.scss b/styles/scss/custom.scss
index 78f045772..d4d57c18e 100644
--- a/styles/scss/custom.scss
+++ b/styles/scss/custom.scss
@@ -1,20 +1,17 @@
 // Include any default variable overrides here (though functions won't be available)
 
 $font-family-base: 'Lato', Helvetica, Arial, sans-serif;
-$font-size-base: 0.875rem; // 14px
+//$font-size-base: 0.875rem; // 14px
+$font-size-base: 0.8125rem; // 14px
 $main-bg-color: #17224D;
 $enable-negative-margins: true;
 $enable-shadows: true;
 $btn-box-shadow: none; // enable-shadow add shadows to btn by default.
 
 
-
 // migrate global.css to global.scss (temporal)
 @import "./global.scss";
 
-
 // Include all of Bootstrap (temporal)
 // @import "../node_modules/bootstrap/scss/bootstrap";
 @import "~bootstrap/scss/bootstrap";
-
-

From e86699a96d7a2a95d00a2e5f84f5636895870919 Mon Sep 17 00:00:00 2001
From: Rodiel Martinez <10471758+Rodielm@users.noreply.github.com>
Date: Thu, 6 Jun 2024 13:04:36 +0200
Subject: [PATCH 02/41] wc: fix variant-browser layout #TASK-6133

---
 src/webcomponents/variant/variant-browser.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/webcomponents/variant/variant-browser.js b/src/webcomponents/variant/variant-browser.js
index 652e378b8..6b6ec0606 100644
--- a/src/webcomponents/variant/variant-browser.js
+++ b/src/webcomponents/variant/variant-browser.js
@@ -319,7 +319,7 @@ export default class VariantBrowser extends LitElement {
 
         return html`
             <tool-header title="${this._config.title}" icon="${this._config.icon}"></tool-header>
-            <div class="d-flex gap-4">
+            <div class="row">
                 <div class="col-2 mb-3">
                     <div class="d-grid gap-2 mb-3 cy-search-button-wrapper">
                         <button type="button" class="btn btn-primary btn-block" ?disabled="${!this.searchActive}" @click="${this.onRun}">
@@ -360,7 +360,7 @@ export default class VariantBrowser extends LitElement {
                     </div>
                 </div>
 
-                <div class="flex-grow-1">
+                <div class="col-md-10">
                     <!-- TAB buttons -->
                     <div class="content-pills mb-3" role="toolbar" aria-label="toolbar">
                         <button

From 59eb621a29185113b9cd7299f4ebd697b8caf41f Mon Sep 17 00:00:00 2001
From: Rodiel Martinez <10471758+Rodielm@users.noreply.github.com>
Date: Thu, 6 Jun 2024 14:04:43 +0200
Subject: [PATCH 03/41] wc: fix indentation in active filter layout #TASK-6133

---
 src/webcomponents/commons/opencga-active-filters.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/webcomponents/commons/opencga-active-filters.js b/src/webcomponents/commons/opencga-active-filters.js
index 735d4d6d7..411230a02 100644
--- a/src/webcomponents/commons/opencga-active-filters.js
+++ b/src/webcomponents/commons/opencga-active-filters.js
@@ -695,7 +695,7 @@ export default class OpencgaActiveFilters extends LitElement {
                 return html`
                     <!-- Render the filter option -->
                     <li>
-                        <a data-filter-id="${item.id}" class="d-flex dropdown-item ${item.active ? "text-success" : ""}"
+                        <a data-filter-id="${item.id}" class="ms-2 d-flex dropdown-item ${item.active ? "text-success" : ""}"
                             style="cursor:pointer;"
                             @click="${this.onFilterChange}">
                             <span class="flex-grow-1">${item.id}</span>
@@ -729,10 +729,10 @@ export default class OpencgaActiveFilters extends LitElement {
             <a class="dropdown-item" @click="${e => this.onFilterChange(e, item.query)}">
             <div class="d-flex align-items-center">
                 <div class="flex-grow-1">
-                    <div class="mt-0 text-truncate">
+                    <div class="ms-2 mt-0 text-truncate">
                         ${filterTitle} ${item.latest ? " (latest)" : ""}
                     </div>
-                    <div class="form-text">
+                    <div class="ms-2 form-text">
                     ${filterParams?.length > 0 ? html`
                         ${filterParams.slice(0, 2).map(key => html`
                             <div class="mx-2" title="${item.query[key]}">

From 17b01d2779ef02be9b49ce2c1c2a840ccdf6639b Mon Sep 17 00:00:00 2001
From: Rodiel Martinez <10471758+Rodielm@users.noreply.github.com>
Date: Thu, 6 Jun 2024 14:10:00 +0200
Subject: [PATCH 04/41] wc: add expansion height to select-filter for large
 view #TASK-6133

---
 src/webcomponents/commons/forms/select-field-filter.js        | 4 ++++
 .../variant/interpretation/variant-interpreter-grid-config.js | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/webcomponents/commons/forms/select-field-filter.js b/src/webcomponents/commons/forms/select-field-filter.js
index 60889f5f2..2c2473cb3 100644
--- a/src/webcomponents/commons/forms/select-field-filter.js
+++ b/src/webcomponents/commons/forms/select-field-filter.js
@@ -352,6 +352,10 @@ export default class SelectFieldFilter extends LitElement {
     renderStyle() {
         return html`
             <style>
+                .select-field-filter .select2-results__options {
+                    max-height: 500px !important;
+                }
+
                 .select-field-filter .select2-results__option--selected {
                     background-color: #fff !important;
                     color: #000 !important;
diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-grid-config.js b/src/webcomponents/variant/interpretation/variant-interpreter-grid-config.js
index 30460737f..c2c280931 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-grid-config.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-grid-config.js
@@ -257,7 +257,7 @@ export default class VariantInterpreterGridConfig extends LitElement {
                         },
                         {
                             type: "text",
-                            text: "Select the <span style='font-weight: bold'>columns</span> to be displayed",
+                            text: "Select the columns to be displayed",
                             display: {
                                 containerStyle: "margin: 20px 5px 5px 0px",
                             }

From e6348b2845caadd519b4a1dfb41b60ce4928785d Mon Sep 17 00:00:00 2001
From: Rodiel Martinez <10471758+Rodielm@users.noreply.github.com>
Date: Fri, 7 Jun 2024 09:48:51 +0200
Subject: [PATCH 05/41] wc: fix margin & padding dialog 'sample variant
 browser' #TASK-6133

---
 .../interpretation/variant-interpreter-browser-template.js  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
index f3297295f..ddfb1150e 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
@@ -420,8 +420,8 @@ class VariantInterpreterBrowserTemplate extends LitElement {
             ` : null}
 
             ${this.clinicalAnalysis.interpretation.locked ? html`
-                <div class="row">
-                    <div class="card text-bg-warning col-sm-8 offset-sm-2 p-0">
+                <div class="row ms-4">
+                    <div class="card text-bg-warning col-10 offset-2 mb-3 p-0">
                         <div class="card-header" style="font-size: 1.1em">
                             <label>Interpretation locked:</label> you cannot modify this interpretation. You can unlock the interpretation in
                             <span class="fst-italic">Case Info >> Interpretation Manager</span>.
@@ -454,7 +454,7 @@ class VariantInterpreterBrowserTemplate extends LitElement {
 
                 <div class="flex-grow-1">
                     <!-- View toolbar -->
-                    <div class="content-pills" role="toolbar" aria-label="toolbar">
+                    <div class="content-pills mb-3" role="toolbar" aria-label="toolbar">
                         ${this.renderViewButton("table", "Table Result", "table")}
                         ${!this.settings?.hideGenomeBrowser ? this.renderViewButton("genome-browser", "Genome Browser", "dna") : nothing}
                     </div>

From 5d0f48262a12e47902e3adecc6d6eb4fe1b4893c Mon Sep 17 00:00:00 2001
From: Rodiel Martinez <10471758+Rodielm@users.noreply.github.com>
Date: Mon, 10 Jun 2024 16:49:24 +0200
Subject: [PATCH 06/41] wc: fix study-filter select style #TASK-6133

---
 src/webcomponents/commons/filters/study-filter.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/webcomponents/commons/filters/study-filter.js b/src/webcomponents/commons/filters/study-filter.js
index 7ed261f9f..9614a8e4f 100644
--- a/src/webcomponents/commons/filters/study-filter.js
+++ b/src/webcomponents/commons/filters/study-filter.js
@@ -18,6 +18,7 @@ import {LitElement, html, nothing} from "lit";
 import UtilsNew from "../../../core/utils-new.js";
 import LitUtils from "../utils/lit-utils.js";
 import {guardPage} from "../html-utils.js";
+import "../forms/select-field-filter.js";
 
 export default class StudyFilter extends LitElement {
 
@@ -104,7 +105,12 @@ export default class StudyFilter extends LitElement {
         }
 
         return html`
-            <div class="mb-3" id="${this._prefix}DifferentStudies">
+            <style>
+                .select-picker .filter-option-inner-inner {
+                    white-space: normal !important;
+                }
+            </style>
+            <div class="mb-3 select-picker" id="${this._prefix}DifferentStudies">
                 <select class="form-control" id="${this.elm}" multiple
                     @change="${this.onChangeSelectedStudy}">
                     <option value="${this.opencgaSession.study.fqn}"

From 28737605557617bb212eb846c2148b77ab510054 Mon Sep 17 00:00:00 2001
From: Rodiel Martinez <10471758+Rodielm@users.noreply.github.com>
Date: Mon, 10 Jun 2024 16:50:13 +0200
Subject: [PATCH 07/41] wc: fix loading template style #TASK-6133

---
 src/webcomponents/commons/grid-commons.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webcomponents/commons/grid-commons.js b/src/webcomponents/commons/grid-commons.js
index 922213f4d..7424bdba7 100644
--- a/src/webcomponents/commons/grid-commons.js
+++ b/src/webcomponents/commons/grid-commons.js
@@ -34,7 +34,7 @@ export default class GridCommons {
     }
 
     static loadingFormatter() {
-        return "<div style='margin-top:5%'><loading-spinner></loading-spinner></div>";
+        return "<div style='width: 100%;height: 100%;padding: 0;margin: 0;'><loading-spinner></loading-spinner></div>";
     }
 
     constructor(gridId, context, config) {

From dc6417609393d8179acb0b2e2ee1bb02869af262 Mon Sep 17 00:00:00 2001
From: Rodiel Martinez <10471758+Rodielm@users.noreply.github.com>
Date: Thu, 13 Jun 2024 11:13:31 +0200
Subject: [PATCH 08/41] wc: fix dialog color for interpretation locked
 #TASK-6133

---
 .../variant-interpreter-browser-template.js               | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
index ddfb1150e..f63743c8f 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
@@ -421,11 +421,9 @@ class VariantInterpreterBrowserTemplate extends LitElement {
 
             ${this.clinicalAnalysis.interpretation.locked ? html`
                 <div class="row ms-4">
-                    <div class="card text-bg-warning col-10 offset-2 mb-3 p-0">
-                        <div class="card-header" style="font-size: 1.1em">
-                            <label>Interpretation locked:</label> you cannot modify this interpretation. You can unlock the interpretation in
-                            <span class="fst-italic">Case Info >> Interpretation Manager</span>.
-                        </div>
+                    <div class="alert alert-warning col-10 offset-2 mb-3">
+                        <label>Interpretation locked:</label> you cannot modify this interpretation. You can unlock the interpretation in
+                        <span class="fst-italic">Case Info >> Interpretation Manager</span>.
                     </div>
                 </div>` : null
             }

From 6d55d228dd2d86e9b206ff9881cc0d4e71b8c662 Mon Sep 17 00:00:00 2001
From: Rodiel Martinez <10471758+Rodielm@users.noreply.github.com>
Date: Mon, 17 Jun 2024 11:49:54 +0200
Subject: [PATCH 09/41] wc: increase the size of tab titles #TASK-6133

---
 src/webcomponents/commons/view/detail-tabs.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webcomponents/commons/view/detail-tabs.js b/src/webcomponents/commons/view/detail-tabs.js
index cba531552..e778f0ecb 100644
--- a/src/webcomponents/commons/view/detail-tabs.js
+++ b/src/webcomponents/commons/view/detail-tabs.js
@@ -149,7 +149,7 @@ export default class DetailTabs extends LitElement {
                 <li role="tablist"
                     class="nav-item"
                     style="${this._config.display?.tabTitleStyle}">
-                    <a class="nav-link fw-bold ${this._config.display?.tabTitleClass} ${isActive ? "active" : ""}"
+                    <a class="nav-link fw-bold fs-5 ${this._config.display?.tabTitleClass} ${isActive ? "active" : ""}"
                         href="#${this._prefix}${item.id}"
                         role="tab"
                         data-bs-toggle="tab" data-id="${item.id}"

From 709932ca9e30dc85bc6cfed7ee04c117d385dd81 Mon Sep 17 00:00:00 2001
From: Rodiel Martinez <10471758+Rodielm@users.noreply.github.com>
Date: Mon, 17 Jun 2024 11:53:03 +0200
Subject: [PATCH 10/41] wc: add missing plus icon to the consequenceType table
 #TASK-6133

---
 .../variant/annotation/variant-consequence-type-view.js        | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/webcomponents/variant/annotation/variant-consequence-type-view.js b/src/webcomponents/variant/annotation/variant-consequence-type-view.js
index 18b4a9f81..b0160b4c6 100644
--- a/src/webcomponents/variant/annotation/variant-consequence-type-view.js
+++ b/src/webcomponents/variant/annotation/variant-consequence-type-view.js
@@ -16,6 +16,7 @@
 
 import {LitElement, html} from "lit";
 import UtilsNew from "../../../core/utils-new.js";
+import GridCommons from "../../commons/grid-commons.js";
 
 export default class VariantConsequenceTypeView extends LitElement {
 
@@ -220,6 +221,8 @@ export default class VariantConsequenceTypeView extends LitElement {
             showExport: true,
             detailView: true,
             detailFormatter: this.detailFormatter,
+            iconsPrefix: GridCommons.GRID_ICONS_PREFIX,
+            icons: GridCommons.GRID_ICONS,
             columns: [
                 [
                     {

From 4080ab01a1739edf56166e827e40c75fed88dcc8 Mon Sep 17 00:00:00 2001
From: Rodiel Martinez <10471758+Rodielm@users.noreply.github.com>
Date: Mon, 17 Jun 2024 11:55:01 +0200
Subject: [PATCH 11/41] wc: add missing rows count to the top of the variant
 interpreter grid #TASK-6133

---
 .../variant/interpretation/variant-interpreter-grid.js          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-grid.js b/src/webcomponents/variant/interpretation/variant-interpreter-grid.js
index 501f26c12..200c63d41 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-grid.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-grid.js
@@ -220,7 +220,7 @@ export default class VariantInterpreterGrid extends LitElement {
                 pagination: this._config.pagination,
                 pageSize: this._config.pageSize,
                 pageList: this._config.pageList,
-                paginationVAlign: "bottom",
+                paginationVAlign: "both",
                 formatShowingRows: (pageFrom, pageTo, totalRows) => this.gridCommons.formatShowingRows(pageFrom, pageTo, totalRows, null, this.isApproximateCount),
                 detailView: this._config.detailView,
                 detailFormatter: (value, row) => this.detailFormatter(value, row),

From 389a6260eb2b28a83c48e49e72b86f0c5f717849 Mon Sep 17 00:00:00 2001
From: Rodiel Martinez <10471758+Rodielm@users.noreply.github.com>
Date: Mon, 17 Jun 2024 11:55:55 +0200
Subject: [PATCH 12/41] wc: fix style case interpreter steps #TASK-6133

---
 styles/css/global.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/styles/css/global.css b/styles/css/global.css
index de5f2cdc1..f2a350891 100644
--- a/styles/css/global.css
+++ b/styles/css/global.css
@@ -185,7 +185,7 @@ a:visited {
     border: 1px solid var(--main-bg-color);
     border-radius: 50% !important;
     border-width: 8px ! important;
-    padding: 36px 1px 26px 1px;
+    padding: 34px 1px 23px 1px;
     transition: border 0.1s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -194,7 +194,7 @@ a:visited {
     border: 1px solid var(--main-bg-color);
     border-radius: 50% !important;
     border-width: 8px ! important;
-    padding: 36px 1px 26px 1px;
+    padding: 34px 1px 23px 1px;
 }
 
 .icon-interpreter-step:hover {

From 02c14747b8f0c7ddf77ecc7e6c4d331197435323 Mon Sep 17 00:00:00 2001
From: Rodiel Martinez <10471758+Rodielm@users.noreply.github.com>
Date: Tue, 18 Jun 2024 10:35:40 +0200
Subject: [PATCH 13/41] wc: fix icon position in custom-welcome #TASK-6133

---
 src/webcomponents/commons/layouts/custom-welcome.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/webcomponents/commons/layouts/custom-welcome.js b/src/webcomponents/commons/layouts/custom-welcome.js
index 5217dfe8a..767170c7f 100644
--- a/src/webcomponents/commons/layouts/custom-welcome.js
+++ b/src/webcomponents/commons/layouts/custom-welcome.js
@@ -206,7 +206,7 @@ export default class CustomWelcome extends LitElement {
                 <!-- Welcome page logo -->
 
                 ${welcomePage?.logo ? html`
-                <div class="text-center">
+                <div class="text-center mt-5">
                     <img
                         alt="${welcomePage.display?.logoAlt || "logo"}"
                         class="${welcomePage.display?.logoClass}"
@@ -219,10 +219,12 @@ export default class CustomWelcome extends LitElement {
 
                 <!-- Welcome page title -->
                 ${welcomePage?.title ? html`
-                    <img src="${welcomePage.appLogo?.img}" height="${welcomePage.appLogo?.height || "40px"}"/>
-                    <h1 class="${welcomePage.display?.titleClass}" style="${welcomePage.display?.titleStyle}">
-                        ${welcomePage.title}
-                    </h1>
+                    <div class="d-flex justify-content-center my-3">
+                        <img src="${welcomePage.appLogo?.img}" height="${welcomePage.appLogo?.height || "40px"}"/>
+                        <h1 class="${welcomePage.display?.titleClass}" style="${welcomePage.display?.titleStyle}">
+                            ${welcomePage.title}
+                        </h1>
+                    </div>
                 `: nothing}
 
                 <!-- Welcome page subtitle -->

From 07b6b59bcde0103320040760d8816683afde0c86 Mon Sep 17 00:00:00 2001
From: Rodiel Martinez <10471758+Rodielm@users.noreply.github.com>
Date: Tue, 18 Jun 2024 12:21:46 +0200
Subject: [PATCH 14/41] wc: remove background to improve text logo readability
 #TASK-6133

---
 src/webcomponents/commons/layouts/custom-sidebar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webcomponents/commons/layouts/custom-sidebar.js b/src/webcomponents/commons/layouts/custom-sidebar.js
index 27fe5a2b7..8ca7f46a2 100644
--- a/src/webcomponents/commons/layouts/custom-sidebar.js
+++ b/src/webcomponents/commons/layouts/custom-sidebar.js
@@ -99,7 +99,7 @@ export default class CustomSidebar extends LitElement {
                             `)}
                         </ul>
                     </div>
-                    <div class="d-flex justify-content-end p-3" style="background-color:#efefef">
+                    <div class="d-flex justify-content-end p-3">
                         <div>
                             <img height="24px" src="${this.config.landingPage?.organisation?.logo?.img}"/>
                         </div>

From e15898aebca079867391269a4b8a4e101a191a8c Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Wed, 3 Jul 2024 15:27:31 +0100
Subject: [PATCH 15/41] wc: Fix displaying filters in variant-browser-filter
 #TASK-6133

---
 src/webcomponents/variant/variant-browser-filter.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webcomponents/variant/variant-browser-filter.js b/src/webcomponents/variant/variant-browser-filter.js
index 4bf666c4c..036391597 100644
--- a/src/webcomponents/variant/variant-browser-filter.js
+++ b/src/webcomponents/variant/variant-browser-filter.js
@@ -656,7 +656,7 @@ export default class VariantBrowserFilter extends LitElement {
 
     render() {
         return html`
-            <div class="d-grid gap-1 mb-3" id="${this._prefix}Accordion" role="tablist" aria-multiselectable="true">
+            <div class="d-flex flex-column gap-3" id="${this._prefix}Accordion" role="tablist" aria-multiselectable="true">
                 ${this.renderFilterMenu()}
             </div>
         `;

From 710f9626e8d46d7c905f6b82e307a7162e8cd81a Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 09:50:01 +0100
Subject: [PATCH 16/41] wc: Fix code indentation in genotype tooltip formatter
 #TASK-6133

---
 .../variant-interpreter-grid-formatter.js     | 112 +++++++++---------
 1 file changed, 59 insertions(+), 53 deletions(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
index b2db278c0..919b32533 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
@@ -850,10 +850,12 @@ export default class VariantInterpreterGridFormatter {
         if (file && file.data) {
             for (const key of Object.keys(file.data)) {
                 if (key !== "FILTER" && key !== "QUAL") {
-                    const html = `<div class="form-group" style="margin: 2px 2px">
-                                            <label class="col-md-5">${key}</label>
-                                            <div class="col-md-7">${file.data[key]}</div>
-                                          </div>`;
+                    const html = `
+                        <div class="form-group" style="margin: 2px 2px">
+                            <label class="col-md-5">${key}</label>
+                            <div class="col-md-7">${file.data[key]}</div>
+                        </div>
+                    `;
                     infoFields.push(html);
                 }
             }
@@ -879,59 +881,63 @@ export default class VariantInterpreterGridFormatter {
         // 3. Get SECONDARY ALTERNATES fields
         const secondaryAlternates = [];
         for (const v of variant.studies[0].secondaryAlternates) {
-            const html = `<div class="form-group" style="margin: 2px 2px">
-                                    <label class="col-md-5">${v.chromosome}:${v.start}-${v.end}</label>
-                                    <div class="col-md-7">${v.reference}/${v.alternate} ${v.type}</div>
-                                  </div>`;
+            const html = `
+                <div class="form-group" style="margin: 2px 2px">
+                    <label class="col-md-5">${v.chromosome}:${v.start}-${v.end}</label>
+                    <div class="col-md-7">${v.reference}/${v.alternate} ${v.type}</div>
+                </div>
+            `;
             secondaryAlternates.push(html);
         }
 
         // 4. Build the Tooltip text
-        const tooltipText = `<div class="zygosity-formatter">
-                                <form class="form-horizontal">
-                                    <div class="form-group" style="margin: 2px 2px">
-                                        <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">SUMMARY</label>
-                                    </div>
-                                    <div class="form-group" style="margin: 2px 2px">
-                                        <label class="col-md-4">Sample ID</label>
-                                        <div class="col-md-8">${sampleEntry?.sampleId ? sampleEntry.sampleId : "-"}</div>
-                                    </div>
-                                    <div class="form-group" style="margin: 2px 2px">
-                                        <label class="col-md-4">File Name</label>
-                                        <div class="col-md-8">${file?.fileId ? file.fileId : "-"}</div>
-                                    </div>
-                                    <div class="form-group" style="margin: 2px 2px">
-                                        <label class="col-md-4">File FILTER</label>
-                                        <div class="col-md-8">${file?.data.FILTER}</div>
-                                    </div>
-                                    <div class="form-group" style="margin: 2px 2px">
-                                        <label class="col-md-4">File QUAL</label>
-                                        <div class="col-md-8">${Number(file?.data.QUAL).toFixed(2)}</div>
-                                    </div>
-                                    <div class="form-group" style="margin: 2px 2px">
-                                        <label class="col-md-4">File VCF call</label>
-                                        <div class="col-md-8">${file?.call?.variantId ? file.call.variantId :
-            `${variant.chromosome}:${variant.start}:${variant.reference}:${variant.alternate}`}
-                                        </div>
-                                    </div>
-                                    <div class="form-group" style="margin: 2px 2px">
-                                        <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">SAMPLE DATA</label>
-                                    </div>
-                                    ${formatFields.join("")}
-                                    <div class="form-group" style="margin: 2px 2px">
-                                        <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">FILE INFO</label>
-                                    </div>
-                                    ${infoFields.join("")}
-                                    <div class="form-group" style="margin: 2px 2px">
-                                        <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">SECONDARY ALTERNATES</label>
-                                    </div>
-                                    ${secondaryAlternates?.length > 0 ? secondaryAlternates.join("") :
-            `<div class="form-group" style="margin: 2px 2px">
-                                                <label class="col-md-12">-</label>
-                                           </div>`
-        }
-                                </form>
-                             </div>`;
+        const tooltipText = `
+            <div class="zygosity-formatter">
+                <form class="form-horizontal">
+                    <div class="form-group" style="margin: 2px 2px">
+                        <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">SUMMARY</label>
+                    </div>
+                    <div class="form-group" style="margin: 2px 2px">
+                        <label class="col-md-4">Sample ID</label>
+                        <div class="col-md-8">${sampleEntry?.sampleId ? sampleEntry.sampleId : "-"}</div>
+                    </div>
+                    <div class="form-group" style="margin: 2px 2px">
+                        <label class="col-md-4">File Name</label>
+                        <div class="col-md-8">${file?.fileId ? file.fileId : "-"}</div>
+                    </div>
+                    <div class="form-group" style="margin: 2px 2px">
+                        <label class="col-md-4">File FILTER</label>
+                        <div class="col-md-8">${file?.data.FILTER}</div>
+                    </div>
+                    <div class="form-group" style="margin: 2px 2px">
+                        <label class="col-md-4">File QUAL</label>
+                        <div class="col-md-8">${Number(file?.data.QUAL).toFixed(2)}</div>
+                    </div>
+                    <div class="form-group" style="margin: 2px 2px">
+                        <label class="col-md-4">File VCF call</label>
+                        <div class="col-md-8">
+                            ${file?.call?.variantId ? file.call.variantId : `${variant.chromosome}:${variant.start}:${variant.reference}:${variant.alternate}`}
+                        </div>
+                    </div>
+                    <div class="form-group" style="margin: 2px 2px">
+                        <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">SAMPLE DATA</label>
+                    </div>
+                    ${formatFields.join("")}
+                    <div class="form-group" style="margin: 2px 2px">
+                        <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">FILE INFO</label>
+                    </div>
+                    ${infoFields.join("")}
+                    <div class="form-group" style="margin: 2px 2px">
+                        <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">SECONDARY ALTERNATES</label>
+                    </div>
+                    ${secondaryAlternates?.length > 0 ? secondaryAlternates.join("") : `
+                        <div class="form-group" style="margin: 2px 2px">
+                            <label class="col-md-12">-</label>
+                        </div>
+                    `}
+                </form>
+            </div>
+        `;
         return tooltipText;
     }
 

From aaaff31e17d03073b7237c2fc6f02d1513cbd95e Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 09:50:51 +0100
Subject: [PATCH 17/41] wc: Remove useless form wrapper in genotype tooltip
 formatter #TASK-6133

---
 .../variant-interpreter-grid-formatter.js     | 78 +++++++++----------
 1 file changed, 38 insertions(+), 40 deletions(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
index 919b32533..8b7b13eb3 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
@@ -893,49 +893,47 @@ export default class VariantInterpreterGridFormatter {
         // 4. Build the Tooltip text
         const tooltipText = `
             <div class="zygosity-formatter">
-                <form class="form-horizontal">
-                    <div class="form-group" style="margin: 2px 2px">
-                        <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">SUMMARY</label>
-                    </div>
-                    <div class="form-group" style="margin: 2px 2px">
-                        <label class="col-md-4">Sample ID</label>
-                        <div class="col-md-8">${sampleEntry?.sampleId ? sampleEntry.sampleId : "-"}</div>
-                    </div>
-                    <div class="form-group" style="margin: 2px 2px">
-                        <label class="col-md-4">File Name</label>
-                        <div class="col-md-8">${file?.fileId ? file.fileId : "-"}</div>
-                    </div>
-                    <div class="form-group" style="margin: 2px 2px">
-                        <label class="col-md-4">File FILTER</label>
-                        <div class="col-md-8">${file?.data.FILTER}</div>
-                    </div>
-                    <div class="form-group" style="margin: 2px 2px">
-                        <label class="col-md-4">File QUAL</label>
-                        <div class="col-md-8">${Number(file?.data.QUAL).toFixed(2)}</div>
-                    </div>
-                    <div class="form-group" style="margin: 2px 2px">
-                        <label class="col-md-4">File VCF call</label>
-                        <div class="col-md-8">
-                            ${file?.call?.variantId ? file.call.variantId : `${variant.chromosome}:${variant.start}:${variant.reference}:${variant.alternate}`}
-                        </div>
-                    </div>
-                    <div class="form-group" style="margin: 2px 2px">
-                        <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">SAMPLE DATA</label>
-                    </div>
-                    ${formatFields.join("")}
-                    <div class="form-group" style="margin: 2px 2px">
-                        <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">FILE INFO</label>
+                <div class="form-group" style="margin: 2px 2px">
+                    <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">SUMMARY</label>
+                </div>
+                <div class="form-group" style="margin: 2px 2px">
+                    <label class="col-md-4">Sample ID</label>
+                    <div class="col-md-8">${sampleEntry?.sampleId ? sampleEntry.sampleId : "-"}</div>
+                </div>
+                <div class="form-group" style="margin: 2px 2px">
+                    <label class="col-md-4">File Name</label>
+                    <div class="col-md-8">${file?.fileId ? file.fileId : "-"}</div>
+                </div>
+                <div class="form-group" style="margin: 2px 2px">
+                    <label class="col-md-4">File FILTER</label>
+                    <div class="col-md-8">${file?.data.FILTER}</div>
+                </div>
+                <div class="form-group" style="margin: 2px 2px">
+                    <label class="col-md-4">File QUAL</label>
+                    <div class="col-md-8">${Number(file?.data.QUAL).toFixed(2)}</div>
+                </div>
+                <div class="form-group" style="margin: 2px 2px">
+                    <label class="col-md-4">File VCF call</label>
+                    <div class="col-md-8">
+                        ${file?.call?.variantId ? file.call.variantId : `${variant.chromosome}:${variant.start}:${variant.reference}:${variant.alternate}`}
                     </div>
-                    ${infoFields.join("")}
+                </div>
+                <div class="form-group" style="margin: 2px 2px">
+                    <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">SAMPLE DATA</label>
+                </div>
+                ${formatFields.join("")}
+                <div class="form-group" style="margin: 2px 2px">
+                    <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">FILE INFO</label>
+                </div>
+                ${infoFields.join("")}
+                <div class="form-group" style="margin: 2px 2px">
+                    <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">SECONDARY ALTERNATES</label>
+                </div>
+                ${secondaryAlternates?.length > 0 ? secondaryAlternates.join("") : `
                     <div class="form-group" style="margin: 2px 2px">
-                        <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">SECONDARY ALTERNATES</label>
+                        <label class="col-md-12">-</label>
                     </div>
-                    ${secondaryAlternates?.length > 0 ? secondaryAlternates.join("") : `
-                        <div class="form-group" style="margin: 2px 2px">
-                            <label class="col-md-12">-</label>
-                        </div>
-                    `}
-                </form>
+                `}
             </div>
         `;
         return tooltipText;

From 9ba69b2d30469a2dc271c282fadf84a3c444761a Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 10:25:07 +0100
Subject: [PATCH 18/41] wc: Fix displaying sample genotype tooltip content
 #TASK-6133

---
 .../variant-interpreter-grid-formatter.js     | 68 +++++++++----------
 1 file changed, 32 insertions(+), 36 deletions(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
index 8b7b13eb3..f8f50ca28 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
@@ -893,47 +893,43 @@ export default class VariantInterpreterGridFormatter {
         // 4. Build the Tooltip text
         const tooltipText = `
             <div class="zygosity-formatter">
-                <div class="form-group" style="margin: 2px 2px">
-                    <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">SUMMARY</label>
-                </div>
-                <div class="form-group" style="margin: 2px 2px">
-                    <label class="col-md-4">Sample ID</label>
-                    <div class="col-md-8">${sampleEntry?.sampleId ? sampleEntry.sampleId : "-"}</div>
-                </div>
-                <div class="form-group" style="margin: 2px 2px">
-                    <label class="col-md-4">File Name</label>
-                    <div class="col-md-8">${file?.fileId ? file.fileId : "-"}</div>
-                </div>
-                <div class="form-group" style="margin: 2px 2px">
-                    <label class="col-md-4">File FILTER</label>
-                    <div class="col-md-8">${file?.data.FILTER}</div>
-                </div>
-                <div class="form-group" style="margin: 2px 2px">
-                    <label class="col-md-4">File QUAL</label>
-                    <div class="col-md-8">${Number(file?.data.QUAL).toFixed(2)}</div>
-                </div>
-                <div class="form-group" style="margin: 2px 2px">
-                    <label class="col-md-4">File VCF call</label>
-                    <div class="col-md-8">
-                        ${file?.call?.variantId ? file.call.variantId : `${variant.chromosome}:${variant.start}:${variant.reference}:${variant.alternate}`}
+                <div class="fw-bold text-secondary mb-2">SUMMARY</div>
+                <div class="ms-2 mb-3">
+                    <div class="row mb-1">
+                        <div class="col-4 fw-bold">Sample ID</div>
+                        <div class="col-8">${sampleEntry?.sampleId ? sampleEntry.sampleId : "-"}</div>
+                    </div>
+                    <div class="row mb-1">
+                        <div class="col-4 fw-bold">File Name</div>
+                        <div class="col-8">${file?.fileId ? file.fileId : "-"}</div>
+                    </div>
+                    <div class="row mb-1">
+                        <div class="col-4 fw-bold">File FILTER</div>
+                        <div class="col-8">${file?.data.FILTER}</div>
+                    </div>
+                    <div class="row mb-1">
+                        <div class="col-4 fw-bold">File QUAL</div>
+                        <div class="col-8">${Number(file?.data.QUAL).toFixed(2)}</div>
+                    </div>
+                    <div class="row">
+                        <div class="col-4 fw-bold">File VCF call</div>
+                        <div class="col-8">
+                            ${file?.call?.variantId ? file.call.variantId : `${variant.chromosome}:${variant.start}:${variant.reference}:${variant.alternate}`}
+                        </div>
                     </div>
                 </div>
-                <div class="form-group" style="margin: 2px 2px">
-                    <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">SAMPLE DATA</label>
+                <div class="fw-bold text-secondary mb-2">SAMPLE DATA</div>
+                <div class="ms-2 mb-3">
+                    ${formatFields.join("")}
                 </div>
-                ${formatFields.join("")}
-                <div class="form-group" style="margin: 2px 2px">
-                    <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">FILE INFO</label>
+                <div class="fw-bold text-secondary mb-2">FILE INFO</div>
+                <div class="ms-2 mb-3">
+                    ${infoFields.join("")}
                 </div>
-                ${infoFields.join("")}
-                <div class="form-group" style="margin: 2px 2px">
-                    <label class="col-md-12" style="color: darkgray;padding: 10px 0px 5px 0px">SECONDARY ALTERNATES</label>
+                <div class="fw-bold text-secondary mb-2">SECONDARY ALTERNATES</div>
+                <div class="ms-2">
+                    ${secondaryAlternates?.length > 0 ? secondaryAlternates.join("") : "-"}
                 </div>
-                ${secondaryAlternates?.length > 0 ? secondaryAlternates.join("") : `
-                    <div class="form-group" style="margin: 2px 2px">
-                        <label class="col-md-12">-</label>
-                    </div>
-                `}
             </div>
         `;
         return tooltipText;

From bd01458396c821f0cbd13d4f9c6213821da3949d Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 10:28:48 +0100
Subject: [PATCH 19/41] wc: Fix displaying file info fields in sample genotype
 tooltip #TASK-6133

---
 .../variant-interpreter-grid-formatter.js         | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
index f8f50ca28..054669699 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
@@ -848,17 +848,16 @@ export default class VariantInterpreterGridFormatter {
         // 1. Get INFO fields
         const infoFields = [];
         if (file && file.data) {
-            for (const key of Object.keys(file.data)) {
+            Object.keys(file.data).forEach(key => {
                 if (key !== "FILTER" && key !== "QUAL") {
-                    const html = `
-                        <div class="form-group" style="margin: 2px 2px">
-                            <label class="col-md-5">${key}</label>
-                            <div class="col-md-7">${file.data[key]}</div>
+                    infoFields.push(`
+                        <div class="row mb-1">
+                            <div class="col-4 fw-bold">${key}</div>
+                            <div class="col-8">${file.data[key]}</div>
                         </div>
-                    `;
-                    infoFields.push(html);
+                    `);
                 }
-            }
+            });
         } else {
             // This can happen when no ref/ref calls are loaded
             console.warn("file is undefined");

From 6bc4dd976471f52be97819104befb9e05f010a8d Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 10:32:26 +0100
Subject: [PATCH 20/41] wc: Minor code format fixes in sample genotype tooltip
 formatter #TASK-6133

---
 .../variant-interpreter-grid-formatter.js     | 28 ++++++++-----------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
index 054669699..f32c6788b 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
@@ -846,22 +846,16 @@ export default class VariantInterpreterGridFormatter {
         const sampleFormat = sampleEntry.data;
 
         // 1. Get INFO fields
-        const infoFields = [];
-        if (file && file.data) {
-            Object.keys(file.data).forEach(key => {
-                if (key !== "FILTER" && key !== "QUAL") {
-                    infoFields.push(`
-                        <div class="row mb-1">
-                            <div class="col-4 fw-bold">${key}</div>
-                            <div class="col-8">${file.data[key]}</div>
-                        </div>
-                    `);
-                }
+        const infoFields = Object.keys(file?.data || {})
+            .filter(key => key !== "FILTER" && key !== "QUAL")
+            .map(key => {
+                return `
+                    <div class="row mb-1">
+                        <div class="col-4 fw-bold">${key}</div>
+                        <div class="col-8">${file.data[key]}</div>
+                    </div>
+                `;
             });
-        } else {
-            // This can happen when no ref/ref calls are loaded
-            console.warn("file is undefined");
-        }
 
         // 2. Get FORMAT fields
         const formatFields = (variant?.studies?.[0]?.sampleDataKeys || [])
@@ -919,11 +913,11 @@ export default class VariantInterpreterGridFormatter {
                 </div>
                 <div class="fw-bold text-secondary mb-2">SAMPLE DATA</div>
                 <div class="ms-2 mb-3">
-                    ${formatFields.join("")}
+                    ${formatFields?.length > 0 ? formatFields.join("") : "-"}
                 </div>
                 <div class="fw-bold text-secondary mb-2">FILE INFO</div>
                 <div class="ms-2 mb-3">
-                    ${infoFields.join("")}
+                    ${infoFields.length > 0 ? infoFields.join("") : "-"}
                 </div>
                 <div class="fw-bold text-secondary mb-2">SECONDARY ALTERNATES</div>
                 <div class="ms-2">

From 307a3e01334096ff26c845754435edcfa0c55c5d Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 10:34:17 +0100
Subject: [PATCH 21/41] wc: Fix displaying format and secondary alternates
 fields in genotypes tooltip #TASK-6133

---
 .../variant-interpreter-grid-formatter.js            | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
index f32c6788b..7c2b76c06 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
@@ -864,9 +864,9 @@ export default class VariantInterpreterGridFormatter {
                 const key = fieldKey !== "GT" ? fieldKey : `${fieldKey} (${variant.reference || "-"}/${variant.alternate || "-"})`;
                 const value = sampleFormat[fieldIndex] ? sampleFormat[fieldIndex] : "-";
                 return `
-                    <div class="form-group" style="margin: 2px 2px">
-                        <label class="col-md-5">${key}</label>
-                        <div class="col-md-7">${value}</div>
+                    <div class="row mb-1">
+                        <div class="col-4 fw-bold">${key}</div>
+                        <div class="col-8">${value}</div>
                     </div>
                 `;
             });
@@ -875,9 +875,9 @@ export default class VariantInterpreterGridFormatter {
         const secondaryAlternates = [];
         for (const v of variant.studies[0].secondaryAlternates) {
             const html = `
-                <div class="form-group" style="margin: 2px 2px">
-                    <label class="col-md-5">${v.chromosome}:${v.start}-${v.end}</label>
-                    <div class="col-md-7">${v.reference}/${v.alternate} ${v.type}</div>
+                <div class="row mb-1">
+                    <div class="col-4 fw-bold">${v.chromosome}:${v.start}-${v.end}</div>
+                    <div class="col-8">${v.reference}/${v.alternate} ${v.type}</div>
                 </div>
             `;
             secondaryAlternates.push(html);

From 78054144a995b1da753d085b800dfad90f27bd22 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 11:42:00 +0100
Subject: [PATCH 22/41] wc: Remove col-form-label class to title column in
 data-form #TASK-6133

---
 src/webcomponents/commons/forms/data-form.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webcomponents/commons/forms/data-form.js b/src/webcomponents/commons/forms/data-form.js
index 62ad9a308..5a8602ed3 100644
--- a/src/webcomponents/commons/forms/data-form.js
+++ b/src/webcomponents/commons/forms/data-form.js
@@ -746,7 +746,7 @@ export default class DataForm extends LitElement {
             return html`
                 <div class="row mb-2 ${elementContainerClassName}" style="${elementContainerStyle}">
                     ${title && titleVisible ? html`
-                        <label class="col-md-${titleWidth} col-form-label fw-bold ${titleClassName}" style="text-align:${titleAlign};${titleStyle}">
+                        <label class="col-md-${titleWidth} fw-bold ${titleClassName}" style="text-align:${titleAlign};${titleStyle}">
                             ${title} ${titleRequiredMark}
                         </label>
                     ` : nothing}

From e3e0fc6ed9114985d87a79176aab529f9f787ca8 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 11:44:40 +0100
Subject: [PATCH 23/41] wc: Increment the separation between from elements in
 data-form #TASK-6133

---
 src/webcomponents/commons/forms/data-form.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/webcomponents/commons/forms/data-form.js b/src/webcomponents/commons/forms/data-form.js
index 5a8602ed3..8422e8304 100644
--- a/src/webcomponents/commons/forms/data-form.js
+++ b/src/webcomponents/commons/forms/data-form.js
@@ -744,7 +744,7 @@ export default class DataForm extends LitElement {
         // Check for horizontal layout
         if (layout === "horizontal") {
             return html`
-                <div class="row mb-2 ${elementContainerClassName}" style="${elementContainerStyle}">
+                <div class="row mb-3 ${elementContainerClassName}" style="${elementContainerStyle}">
                     ${title && titleVisible ? html`
                         <label class="col-md-${titleWidth} fw-bold ${titleClassName}" style="text-align:${titleAlign};${titleStyle}">
                             ${title} ${titleRequiredMark}
@@ -762,7 +762,7 @@ export default class DataForm extends LitElement {
             `;
         } else {
             return html`
-                <div class="row mb-1 ${elementContainerClassName}" style="${elementContainerStyle}">
+                <div class="row mb-3 ${elementContainerClassName}" style="${elementContainerStyle}">
                     <div class="col-md-${width}">
                         ${title && titleVisible ? html`
                             <label class="fw-bold form-label pt-0 ${titleClassName}" style="${titleStyle}">

From 1a419395770603d6c4424781460f77b7eae2eb0b Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 11:45:54 +0100
Subject: [PATCH 24/41] wc: Use a div instead of a label for rendering title
 column in data-form #TASK-6133

---
 src/webcomponents/commons/forms/data-form.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/webcomponents/commons/forms/data-form.js b/src/webcomponents/commons/forms/data-form.js
index 8422e8304..1a82c3f67 100644
--- a/src/webcomponents/commons/forms/data-form.js
+++ b/src/webcomponents/commons/forms/data-form.js
@@ -746,9 +746,9 @@ export default class DataForm extends LitElement {
             return html`
                 <div class="row mb-3 ${elementContainerClassName}" style="${elementContainerStyle}">
                     ${title && titleVisible ? html`
-                        <label class="col-md-${titleWidth} fw-bold ${titleClassName}" style="text-align:${titleAlign};${titleStyle}">
+                        <div class="col-md-${titleWidth} fw-bold ${titleClassName}" style="text-align:${titleAlign};${titleStyle}">
                             ${title} ${titleRequiredMark}
-                        </label>
+                        </div>
                     ` : nothing}
                     <div class="col-md-${(width - titleWidth)}">
                         ${content}

From 75f9eb59138cbdd5a87c9679c4e41948dc4982aa Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 12:50:52 +0100
Subject: [PATCH 25/41] wc: Align about menu to the right #TASK-6133

---
 src/webcomponents/commons/layouts/custom-navbar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webcomponents/commons/layouts/custom-navbar.js b/src/webcomponents/commons/layouts/custom-navbar.js
index 004f6fc0d..21607fdfd 100644
--- a/src/webcomponents/commons/layouts/custom-navbar.js
+++ b/src/webcomponents/commons/layouts/custom-navbar.js
@@ -378,7 +378,7 @@ export default class CustomNavBar extends LitElement {
                                         </div>
                                         <div class="dropdown-button-text">About</div>
                                     </a>
-                                    <ul class="dropdown-menu">
+                                    <ul class="dropdown-menu dropdown-menu-end">
                                         ${this.config.about?.links && this.config.about?.links.map(link => html`
                                             <li>${this.createAboutLink(link, false)}</li>
                                         `)}

From e7d5d671db017ae9bd6402a2abc7f99fd34249de Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 12:56:33 +0100
Subject: [PATCH 26/41] wc: Some code style format and improvements in navbar
 #TASK-6133

---
 .../commons/layouts/custom-navbar.js          | 41 ++++++++++---------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/webcomponents/commons/layouts/custom-navbar.js b/src/webcomponents/commons/layouts/custom-navbar.js
index 21607fdfd..674d1fa8a 100644
--- a/src/webcomponents/commons/layouts/custom-navbar.js
+++ b/src/webcomponents/commons/layouts/custom-navbar.js
@@ -19,7 +19,6 @@ import UtilsNew from "../../../core/utils-new.js";
 import LitUtils from "../utils/lit-utils.js";
 import "../../job/job-monitor.js";
 
-
 export default class CustomNavBar extends LitElement {
 
     constructor() {
@@ -83,6 +82,10 @@ export default class CustomNavBar extends LitElement {
         LitUtils.dispatchCustomEvent(this, "logout");
     }
 
+    getVisibleUserMenuItems() {
+        return (this.config?.userMenu || []).filter(item => UtilsNew.isAppVisible(item, this.opencgaSession));
+    }
+
     renderStyle() {
         return html`
             <style>
@@ -214,8 +217,7 @@ export default class CustomNavBar extends LitElement {
 
     render() {
         return html `
-                ${this.renderStyle()}
-            <!-- TODO: It'll change soon by default theme -->
+            ${this.renderStyle()}
             <nav class="navbar navbar-zetta navbar-expand-lg p-1">
                 <div class="container-fluid p-1">
 
@@ -339,14 +341,14 @@ export default class CustomNavBar extends LitElement {
                                     </ul>
                                 </li>
                                 <li class="border-end mx-1 my-1 ms-0" style="--bs-border-color: rgba(255, 255, 255, 0.3);"></li>
-                            ` : null}
+                            ` : nothing}
 
                             <!-- Jobs -->
                             ${UtilsNew.isAppVisible(this.config?.jobMonitor, this.opencgaSession) || UtilsNew.isAppVisible(this.app?.jobMonitor, this.opencgaSession) ? html`
                                 <job-monitor
                                     .opencgaSession="${this.opencgaSession}">
                                 </job-monitor>
-                            ` : null}
+                            ` : nothing}
 
                             ${UtilsNew.isAppVisible(this.config?.fileExplorer, this.opencgaSession) || UtilsNew.isAppVisible(this.app?.fileExplorer, this.opencgaSession) ? html`
                                 <li id="fileButton" >
@@ -355,7 +357,7 @@ export default class CustomNavBar extends LitElement {
                                         <div class="dropdown-button-icon"><i class="fas fa-folder-open"></i></div>
                                     </a>
                                 </li>
-                            ` : null}
+                            ` : nothing}
 
                             ${UtilsNew.isAppVisible(this.config?.restApi, this.opencgaSession) || UtilsNew.isAppVisible(this.app?.restApi, this.opencgaSession) ? html`
                                 <li id="restButton">
@@ -365,7 +367,7 @@ export default class CustomNavBar extends LitElement {
                                     </a>
                                 </li>
                                 <li class="border-end mx-1 my-1 ms-0" style="--bs-border-color: rgba(255, 255, 255, 0.3);"></li>
-                            ` : null}
+                            ` : nothing}
 
                             <!-- About dropdown menu-->
                             ${this.config?.about.dropdown ? html`
@@ -393,7 +395,7 @@ export default class CustomNavBar extends LitElement {
                                                     </span>
                                                 </a>
                                             </li>
-                                        `: null}
+                                        `: nothing}
                                     </ul>
                                 </li>
                             ` : this.config.about?.links && this.config.about?.links.map(link => html`
@@ -414,16 +416,14 @@ export default class CustomNavBar extends LitElement {
                                         </div>
                                     </a>
                                     <ul class="dropdown-menu dropdown-menu-end">
-                                        ${this.config?.userMenu?.length ? this.config.userMenu
-                                    .filter(item => UtilsNew.isAppVisible(item, this.opencgaSession))
-                                    .map(item => html`
-                                                <li>
-                                                    <a class="dropdown-item" href="${item.url}" data-user-menu="${item.id}">
-                                                        <i class="${item.icon} me-1" aria-hidden="true"></i>${item.name}
-                                                    </a>
-                                                </li>
-                                            `) : null}
-                                            <li><hr class="dropdown-divider"></li>
+                                        ${this.getVisibleUserMenuItems().map(item => html`
+                                            <li>
+                                                <a class="dropdown-item" href="${item.url}" data-user-menu="${item.id}">
+                                                    <i class="${item.icon} me-1" aria-hidden="true"></i>${item.name}
+                                                </a>
+                                            </li>
+                                        `)}
+                                        <li><hr class="dropdown-divider"></li>
                                         <li>
                                             <a  class="dropdown-item"
                                                 data-user-menu="logout" role="button"
@@ -433,12 +433,13 @@ export default class CustomNavBar extends LitElement {
                                             </a>
                                         </li>
                                     </ul>
-                                </li>` : null}
+                                </li>
+                            ` : nothing}
                         </ul>
                     </div>
                 </div>
             </nav>
-            <!-- End of navigation bar -->`;
+        `;
     }
 
 }

From 037555e2b28cdfb22e356616863b4dfd4c07a9e1 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 13:11:18 +0100
Subject: [PATCH 27/41] test: Fix cohort grid tests #TASK-6133

---
 cypress/e2e/iva/cohort-browser-grid.cy.js | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/cypress/e2e/iva/cohort-browser-grid.cy.js b/cypress/e2e/iva/cohort-browser-grid.cy.js
index 1e2c67b71..affb1ddff 100644
--- a/cypress/e2e/iva/cohort-browser-grid.cy.js
+++ b/cypress/e2e/iva/cohort-browser-grid.cy.js
@@ -31,8 +31,6 @@ context("Cohort Browser Grid", () => {
 
     // TOOLBAR
     context("Cohort Toolbar", () => {
-        const toolbarComponent = "";
-
         beforeEach(() => {
             cy.get(browserGrid)
                 .find(`div[data-cy="toolbar"]`)
@@ -59,7 +57,6 @@ context("Cohort Browser Grid", () => {
     // MODAL CREATE
     context("Modal Create", () => {
         beforeEach(() => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get(browserGrid)
                 .find(`button[data-action="create"]`)
                 .click();
@@ -69,44 +66,38 @@ context("Cohort Browser Grid", () => {
         });
         // 1. Open modal and render create
         it("should render create modal", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .find("div.modal-dialog")
                 .should("be.visible");
         });
         // 2. Render title
         it("should render create title", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .find("h4.modal-title")
                 .should("contain.text", "Cohort create");
         });
         // 3. Render button clear
         it("should render button clear", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .contains("button", "Clear")
                 .should("be.visible");
         });
         // 4. Render button create
         it("should render button create", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .contains("button", "Create")
                 .should("be.visible");
         });
         // 5. Render tabs
         it("should render form tabs", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .find("ul.nav.nav-tabs > li")
                 .should("have.length.at.least", 1);
         });
         // 6. Render Cohort ID
         it("should have form field ID", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
-                .find(`data-form div.form-horizontal div.row  label.col-form-label`)
+                .find(`data-form div.form-horizontal div.row div.col-md-3`)
                 .should("contain.text", "Cohort ID");
         });
     });

From f01adeaa9e09f0064ad110a99e5f3e8471cc9010 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 13:16:17 +0100
Subject: [PATCH 28/41] test: Fix all catalog browsers tests #TASK-6133

---
 .../e2e/iva/disease-panel-browser-grid.cy.js  | 18 ++---------------
 cypress/e2e/iva/family-browser-grid.cy.js     | 20 ++-----------------
 cypress/e2e/iva/individual-browser-grid.cy.js | 19 ++----------------
 cypress/e2e/iva/sample-browser-grid.cy.js     | 20 ++-----------------
 4 files changed, 8 insertions(+), 69 deletions(-)

diff --git a/cypress/e2e/iva/disease-panel-browser-grid.cy.js b/cypress/e2e/iva/disease-panel-browser-grid.cy.js
index 9cee16350..49744378a 100644
--- a/cypress/e2e/iva/disease-panel-browser-grid.cy.js
+++ b/cypress/e2e/iva/disease-panel-browser-grid.cy.js
@@ -32,8 +32,6 @@ context("Disease Panel Browser Grid", () => {
 
     // TOOLBAR
     context("Disease Panel Toolbar", () => {
-        const toolbarComponent = "";
-
         beforeEach(() => {
             cy.get("@container")
                 .find("div[data-cy='toolbar']")
@@ -75,37 +73,32 @@ context("Disease Panel Browser Grid", () => {
         });
         // 2. Render title
         it("should render create title", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .find("h4.modal-title")
                 .should("contain.text", "Disease panel create");
         });
         // 3. Render button clear
         it("should render button clear", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .contains("button", "Clear")
                 .should("be.visible");
         });
         // 4. Render button create
         it("should render button create", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .contains("button", "Create")
                 .should("be.visible");
         });
         // 5. Render tabs
         it("should render form tabs", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .find("ul.nav.nav-tabs > li")
                 .should("have.length.greaterThan", 1);
         });
         // 6. Render Disease Panel ID
         it("should have form field ID", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
-                .find("data-form div.form-horizontal div.row label.col-form-label")
+                .find("data-form div.form-horizontal div.row div.col-md-3")
                 .should("contain.text", "Disease Panel ID");
         });
     });
@@ -113,7 +106,6 @@ context("Disease Panel Browser Grid", () => {
     // MODAL UPDATE
     context("Modal Update", () => {
         beforeEach(() => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@container")
                 .find("table tbody tr td button.dropdown-toggle")
                 .first()
@@ -127,44 +119,38 @@ context("Disease Panel Browser Grid", () => {
         });
         // 1. Open modal and render update
         it("should render update modal", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .find("div.modal-dialog")
                 .should("be.visible");
         });
         // 2. Render title
         it("should render update title", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .find("h4.modal-title")
                 .should("contain.text", "Disease panel update");
         });
         // 3. Render button clear
         it("should render button clear", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .contains("button", "Discard Changes")
                 .should("be.visible");
         });
         // 4. Render button create
         it("should render button create", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .contains("button", "Update")
                 .should("be.visible");
         });
         // 5. Render tabs
         it("should render form tabs", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .find("ul.nav.nav-tabs > li")
                 .should("have.length.greaterThan", 1);
         });
         // 6. Render Sample ID
         it("should have form field ID equal to sample selected", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
-                .find("data-form div.row div.row label.col-form-label")
+                .find("data-form div.row div.row div.col-md-3")
                 .should("contain.text", "Disease Panel ID");
         });
     });
diff --git a/cypress/e2e/iva/family-browser-grid.cy.js b/cypress/e2e/iva/family-browser-grid.cy.js
index eaf78571d..522f5df26 100644
--- a/cypress/e2e/iva/family-browser-grid.cy.js
+++ b/cypress/e2e/iva/family-browser-grid.cy.js
@@ -31,8 +31,6 @@ context("Family Browser Grid", () => {
 
     // TOOLBAR
     context("Family Toolbar", () => {
-        const toolbarComponent = "";
-
         beforeEach(() => {
             cy.get(browserGrid)
                 .find("div[data-cy='toolbar']")
@@ -59,7 +57,6 @@ context("Family Browser Grid", () => {
     // MODAL CREATE
     context("Modal Create", () => {
         beforeEach(() => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get(browserGrid)
                 .find("button[data-action='create']")
                 .click();
@@ -69,44 +66,38 @@ context("Family Browser Grid", () => {
         });
         // 1. Open modal and render create
         it("should render create modal", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .find("div.modal-dialog")
                 .should("be.visible");
         });
         // 2. Render title
         it("should render create title", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .find("h4.modal-title")
                 .should("contain.text", "Family create");
         });
         // 3. Render button clear
         it("should render button clear", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .contains("button", "Clear")
                 .should("be.visible");
         });
         // 4. Render button create
         it("should render button create", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .contains("button", "Create")
                 .should("be.visible");
         });
         // 5. Render tabs
         it("should render form tabs", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .find("ul.nav.nav-tabs > li")
                 .should("have.length.at.least", 1);
         });
         // 6. Render Family ID
         it("should have form field ID", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
-                .find("data-form div.form-horizontal div.row label.col-form-label")
+                .find("data-form div.form-horizontal div.row div.col-md-3")
                 .should("contain.text", "Family ID");
         });
     });
@@ -114,7 +105,6 @@ context("Family Browser Grid", () => {
     // MODAL UPDATE
     context("Modal Update", () => {
         beforeEach(() => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get(browserGrid)
                 .find("table tbody tr td button.dropdown-toggle")
                 .first()
@@ -128,44 +118,38 @@ context("Family Browser Grid", () => {
         });
         // 1. Open modal and render update
         it("should render update modal", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .find("div.modal-dialog")
                 .should("be.visible");
         });
         // 2. Render title
         it("should render update title", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .find("h4.modal-title")
                 .should("contain.text", "Family update");
         });
         // 3. Render button clear
         it("should render button clear", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .contains("button", "Discard Changes")
                 .should("be.visible");
         });
         // 4. Render button create
         it("should render button create", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .contains("button", "Update")
                 .should("be.visible");
         });
         // 5. Render tabs
         it("should render form tabs", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .find("ul.nav.nav-tabs > li")
                 .should("have.length.at.least", 1);
         });
         // 6. Render Sample ID
         it("should have form field ID equal to sample selected", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
-                .find("data-form div.row div.row label.col-form-label")
+                .find("data-form div.row div.row div.col-md-3")
                 .should("contain.text", "Family ID");
         });
     });
diff --git a/cypress/e2e/iva/individual-browser-grid.cy.js b/cypress/e2e/iva/individual-browser-grid.cy.js
index 6d82f8432..df633b030 100644
--- a/cypress/e2e/iva/individual-browser-grid.cy.js
+++ b/cypress/e2e/iva/individual-browser-grid.cy.js
@@ -32,7 +32,6 @@ context("Individual Browser Grid", () => {
 
     // TOOLBAR
     context("Individual Toolbar", () => {
-
         beforeEach(() => {
             cy.get("@container")
                 .find(`div[data-cy="toolbar"]`)
@@ -59,7 +58,6 @@ context("Individual Browser Grid", () => {
     // MODAL CREATE
     context("Modal Create", () => {
         beforeEach(() => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@container")
                 .find(`button[data-action="create"]`)
                 .click();
@@ -69,44 +67,38 @@ context("Individual Browser Grid", () => {
         });
         // 1. Open modal and render create
         it("should render create modal", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .find("div.modal-dialog")
                 .should("be.visible");
         });
         // 2. Render title
         it("should render create title", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .find("h4.modal-title")
                 .should("contain.text", "Individual create");
         });
         // 3. Render button clear
         it("should render button clear", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .contains("button", "Clear")
                 .should("be.visible");
         });
         // 4. Render button create
         it("should render button create", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .contains("button", "Create")
                 .should("be.visible");
         });
         // 5. Render tabs
         it("should render form tabs", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .find("ul.nav.nav-tabs > li")
                 .should("have.length.greaterThan", 1);
         });
         // 5. Render Sample ID
         it("should have form field ID", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
-                .find(`data-form div.form-horizontal div.row label.col-form-label`)
+                .find(`data-form div.form-horizontal div.row div.col-md-3`)
                 .should("contain.text", "Individual ID");
         });
     });
@@ -157,7 +149,6 @@ context("Individual Browser Grid", () => {
     // MODAL UPDATE
     context("Modal Update", () => {
         beforeEach(() => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@container")
                 .find(`table tbody tr td button.dropdown-toggle`)
                 .first()
@@ -171,44 +162,38 @@ context("Individual Browser Grid", () => {
         });
         // 1. Open modal and render update
         it("should render update modal", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .find("div.modal-dialog")
                 .should("be.visible");
         });
         // 2. Render title
         it("should render update title", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .find("h4.modal-title")
                 .should("contain.text", "Individual update");
         });
         // 3. Render button clear
         it("should render button clear", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .contains("button", "Discard Changes")
                 .should("be.visible");
         });
         // 4. Render button create
         it("should render button create", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .contains("button", "Update")
                 .should("be.visible");
         });
         // 5. Render tabs
         it("should render form tabs", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .find("ul.nav.nav-tabs > li")
                 .should("have.length.greaterThan", 1);
         });
         // 6. Render Sample ID
         it("should have form field ID equal to sample selected", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
-                .find(`data-form div.row div.row label.col-form-label`)
+                .find(`data-form div.row div.row div.col-md-3`)
                 .should("contain.text", "Individual ID");
         });
     });
diff --git a/cypress/e2e/iva/sample-browser-grid.cy.js b/cypress/e2e/iva/sample-browser-grid.cy.js
index ccbc82345..12c976484 100644
--- a/cypress/e2e/iva/sample-browser-grid.cy.js
+++ b/cypress/e2e/iva/sample-browser-grid.cy.js
@@ -31,8 +31,6 @@ context("Sample Browser Grid", () => {
 
     // TOOLBAR
     context("Sample Toolbar", () => {
-        const toolbarComponent = "";
-
         beforeEach(() => {
             cy.get("@container")
                 .find(`div[data-cy="toolbar"]`)
@@ -59,7 +57,6 @@ context("Sample Browser Grid", () => {
     // MODAL CREATE
     context("Modal Create", () => {
         beforeEach(() => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@container")
                 .find(`button[data-action="create"]`)
                 .click();
@@ -69,44 +66,38 @@ context("Sample Browser Grid", () => {
         });
         // 1. Open modal and render create
         it("should render create modal", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .find("div.modal-dialog")
                 .should("be.visible");
         });
         // 2. Render title
         it("should render create title", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .find("h4.modal-title")
                 .should("contain.text", "Sample create");
         });
         // 3. Render button clear
         it("should render button clear", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .contains("button", "Clear")
                 .should("be.visible");
         });
         // 4. Render button create
         it("should render button create", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .contains("button", "Create")
                 .should("be.visible");
         });
         // 5. Render tabs
         it("should render form tabs", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
                 .find("ul.nav.nav-tabs > li")
                 .should("have.length.greaterThan", 1);
         });
         // 6. Render Sample ID
         it("should have form field ID", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-create")
-                .find(`data-form div.form-horizontal div.row label.col-form-label`)
+                .find(`data-form div.form-horizontal div.row div.col-md-3`)
                 .should("contain.text", "Sample ID");
         });
     });
@@ -114,7 +105,6 @@ context("Sample Browser Grid", () => {
     // MODAL UPDATE
     context("Modal Update", () => {
         beforeEach(() => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@container")
                 .find(`table tbody tr td button.dropdown-toggle`)
                 .first()
@@ -128,44 +118,38 @@ context("Sample Browser Grid", () => {
         });
         // 1. Open modal and render update
         it("should render update modal", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .find("div.modal-dialog")
                 .should("be.visible");
         });
         // 2. Render title
         it("should render update title", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .find("h4.modal-title")
                 .should("contain.text", "Sample update");
         });
         // 3. Render button clear
         it("should render button clear", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .contains("button", "Discard Changes")
                 .should("be.visible");
         });
         // 4. Render button create
         it("should render button create", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .contains("button", "Update")
                 .should("be.visible");
         });
         // 5. Render tabs
         it("should render form tabs", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
                 .find("ul.nav.nav-tabs > li")
                 .should("have.length.greaterThan", 1);
         });
         // 6. Render Sample ID
         it("should have form field ID equal to sample selected", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@modal-update")
-                .find(`data-form div.row div.row label.col-form-label`)
+                .find(`data-form div.row div.row div.col-md-3`)
                 .should("contain.text", "Sample ID");
         });
     });

From aa38db7ee4a32abe0c661e4be8f8ae23510dfbf9 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 13:17:26 +0100
Subject: [PATCH 29/41] test: Fix double quotes in sample browser tests
 #TASK-6133

---
 cypress/e2e/iva/sample-browser-grid.cy.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/cypress/e2e/iva/sample-browser-grid.cy.js b/cypress/e2e/iva/sample-browser-grid.cy.js
index 12c976484..43df49d76 100644
--- a/cypress/e2e/iva/sample-browser-grid.cy.js
+++ b/cypress/e2e/iva/sample-browser-grid.cy.js
@@ -286,9 +286,9 @@ context("Sample Browser Grid", () => {
                     .click();
 
                 BrowserTest.getElementByComponent({
-                    selector: 'sample-grid opencb-grid-toolbar',
-                    tag:'div',
-                    elementId: 'SettingModal'
+                    selector: "sample-grid opencb-grid-toolbar",
+                    tag: "div",
+                    elementId: "SettingModal",
                 }).as("settingModal");
 
                 cy.get("@settingModal")
@@ -298,14 +298,14 @@ context("Sample Browser Grid", () => {
                         // Drag the modal to a new position using Cypress's drag command
                         // eslint-disable-next-line cypress/unsafe-to-chain-command
                         cy.get("@settingModal")
-                            .find('.modal-header')
-                            .trigger('mousedown', { which: 1 }) // Trigger mouse down event
-                            .trigger('mousemove', { clientX: 100, clientY: 100 }) // Move the mouse
-                            .trigger('mouseup'); // Release the mouse
+                            .find(".modal-header")
+                            .trigger("mousedown", { which: 1 }) // Trigger mouse down event
+                            .trigger("mousemove", { clientX: 100, clientY: 100 }) // Move the mouse
+                            .trigger("mouseup"); // Release the mouse
 
                         // Get the final position of the modal
                         cy.get(`@settingModal`)
-                            .find('.modal-header')
+                            .find(".modal-header")
                             .then(($modal) => {
                                 const finalPosition = $modal.offset();
                                 cy.log("final Position:", finalPosition);

From b945a42b5834c761ab06f3e8fd401544b3263bac Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 13:17:58 +0100
Subject: [PATCH 30/41] test: Fix doublequotes in individual browser tests
 #TASK-6133

---
 cypress/e2e/iva/individual-browser-grid.cy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/e2e/iva/individual-browser-grid.cy.js b/cypress/e2e/iva/individual-browser-grid.cy.js
index df633b030..a752732a4 100644
--- a/cypress/e2e/iva/individual-browser-grid.cy.js
+++ b/cypress/e2e/iva/individual-browser-grid.cy.js
@@ -385,7 +385,7 @@ context("Individual Browser Grid", () => {
             it("should display 'Extra Column' column", () => {
                 cy.get("thead th")
                     .contains("Extra column")
-                    .should('be.visible');
+                    .should("be.visible");
             });
         });
 

From b69eebda8e155ca50f33327feac9b34d68da1c5b Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 16:21:56 +0100
Subject: [PATCH 31/41] wc: Fix indentation in active filters menu #TASK-6133

---
 src/webcomponents/commons/opencga-active-filters.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/webcomponents/commons/opencga-active-filters.js b/src/webcomponents/commons/opencga-active-filters.js
index 31b173c67..f9eceaa82 100644
--- a/src/webcomponents/commons/opencga-active-filters.js
+++ b/src/webcomponents/commons/opencga-active-filters.js
@@ -750,7 +750,7 @@ export default class OpencgaActiveFilters extends LitElement {
                     <a
                         href=""
                         data-filter-id="${item.id}"
-                        class="${`d-flex dropdown-item ${item.active ? "text-success" : ""} ${item.disabled ? "disabled" : ""}`}"
+                        class="${`d-flex dropdown-item ps-4 ${item.active ? "text-success" : ""} ${item.disabled ? "disabled" : ""}`}"
                         @click="${this.onFilterChange}">
                         <span class="flex-grow-1">${item.id}</span>
                         <span class="text-secondary cy-action-buttons ms-3">
@@ -785,7 +785,7 @@ export default class OpencgaActiveFilters extends LitElement {
         const filterTooltip = filterParams.map(key => `<b>${key}</b> = ${item.query[key]}`).join("<br>");
 
         return html`
-            <a class="dropdown-item" @click="${e => this.onFilterChange(e, item.query)}">
+            <a class="dropdown-item ps-4" @click="${e => this.onFilterChange(e, item.query)}">
             <div class="d-flex align-items-center">
                 <div class="flex-grow-1">
                     <div class="ms-2 mt-0 text-truncate">

From 446a292c12350b708b7f89a8a588f6f936be7c36 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 16:23:04 +0100
Subject: [PATCH 32/41] wc: Fix code indentation in the render history item
 method of active filters #TASK-6133

---
 .../commons/opencga-active-filters.js         | 39 +++++++++----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/webcomponents/commons/opencga-active-filters.js b/src/webcomponents/commons/opencga-active-filters.js
index f9eceaa82..96c512531 100644
--- a/src/webcomponents/commons/opencga-active-filters.js
+++ b/src/webcomponents/commons/opencga-active-filters.js
@@ -786,29 +786,27 @@ export default class OpencgaActiveFilters extends LitElement {
 
         return html`
             <a class="dropdown-item ps-4" @click="${e => this.onFilterChange(e, item.query)}">
-            <div class="d-flex align-items-center">
-                <div class="flex-grow-1">
-                    <div class="ms-2 mt-0 text-truncate">
-                        ${filterTitle} ${item.latest ? " (latest)" : ""}
+                <div class="d-flex align-items-center">
+                    <div class="flex-grow-1">
+                        <div class="ms-2 mt-0 text-truncate">
+                            ${filterTitle} ${item.latest ? " (latest)" : ""}
+                        </div>
+                        <div class="ms-2 form-text">
+                        ${filterParams?.length > 0 ? html`
+                            ${filterParams.slice(0, 2).map(key => html`
+                                <div class="mx-2" title="${item.query[key]}">
+                                    <b>${key}</b>: ${UtilsNew.substring(item.query[key], 20)}
+                                </div>
+                            `)}
+                        ` : html`Empty query.`}
+                        </div>
                     </div>
-                    <div class="ms-2 form-text">
-                    ${filterParams?.length > 0 ? html`
-                        ${filterParams.slice(0, 2).map(key => html`
-                            <div class="mx-2" title="${item.query[key]}">
-                                <b>${key}</b>: ${UtilsNew.substring(item.query[key], 20)}
-                            </div>
-                        `)}
-                    ` : html`
-                        Empty query.
-                    `}
+                    <div class="flex-shrink-0 text-secondary mb-auto">
+                        <span  class="action-buttons" tooltip-title="${filterTitle}" tooltip-text="${filterTooltip || "Empty query."}">
+                            <i class="fas fa-eye" data-action="view-filter"></i>
+                        </span>
                     </div>
                 </div>
-                <div class="flex-shrink-0 text-secondary mb-auto">
-                    <span  class="action-buttons" tooltip-title="${filterTitle}" tooltip-text="${filterTooltip || "Empty query."}">
-                        <i class="fas fa-eye" data-action="view-filter"></i>
-                    </span>
-                </div>
-            </div>
             </a>
         `;
     }
@@ -823,7 +821,6 @@ export default class OpencgaActiveFilters extends LitElement {
                     <span><strong>Warning!</strong></span>&nbsp;&nbsp;Filters have changed, please click on <strong> ${this._config.searchButtonText} </strong> to update the results.
                 </div>
             `}
-
             <div class="card mb-3">
                 <div class="card-body py-2 px-2">
                     <div class="d-flex flex-column gap-1">

From c5998ff3b93907f6429ec91b3e79aa57d4100159 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 16:23:56 +0100
Subject: [PATCH 33/41] wc: Remove useless template literal in link for filter
 items #TASK-6133

---
 src/webcomponents/commons/opencga-active-filters.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webcomponents/commons/opencga-active-filters.js b/src/webcomponents/commons/opencga-active-filters.js
index 96c512531..14c02caf9 100644
--- a/src/webcomponents/commons/opencga-active-filters.js
+++ b/src/webcomponents/commons/opencga-active-filters.js
@@ -750,7 +750,7 @@ export default class OpencgaActiveFilters extends LitElement {
                     <a
                         href=""
                         data-filter-id="${item.id}"
-                        class="${`d-flex dropdown-item ps-4 ${item.active ? "text-success" : ""} ${item.disabled ? "disabled" : ""}`}"
+                        class="d-flex dropdown-item ps-4 ${item.active ? "text-success" : ""} ${item.disabled ? "disabled" : ""}"
                         @click="${this.onFilterChange}">
                         <span class="flex-grow-1">${item.id}</span>
                         <span class="text-secondary cy-action-buttons ms-3">

From 7c21de1aea11dd7a5b1c5752ae6afdd8cdbe8797 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 16:24:20 +0100
Subject: [PATCH 34/41] wc: Fix alignment of checkbox element in data-form
 #TASK-6133

---
 src/webcomponents/commons/forms/data-form.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webcomponents/commons/forms/data-form.js b/src/webcomponents/commons/forms/data-form.js
index 1a82c3f67..e1ad63316 100644
--- a/src/webcomponents/commons/forms/data-form.js
+++ b/src/webcomponents/commons/forms/data-form.js
@@ -929,7 +929,7 @@ export default class DataForm extends LitElement {
         }
 
         const content = html`
-            <div class="form-check mt-2">
+            <div class="form-check">
                 <input
                     id="${this._prefix}FilterCheckbox"
                     type="checkbox"

From c0a074583efe53678c9b8b1981630b463953c596 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 4 Jul 2024 16:44:00 +0100
Subject: [PATCH 35/41] wc: Change maximum height of select-field-filter
 #TASK-6133

---
 src/webcomponents/commons/forms/select-field-filter.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webcomponents/commons/forms/select-field-filter.js b/src/webcomponents/commons/forms/select-field-filter.js
index 80a0e5290..701de93bd 100644
--- a/src/webcomponents/commons/forms/select-field-filter.js
+++ b/src/webcomponents/commons/forms/select-field-filter.js
@@ -362,7 +362,7 @@ export default class SelectFieldFilter extends LitElement {
         return html`
             <style>
                 .select-field-filter .select2-results__options {
-                    max-height: 500px !important;
+                    max-height: 600px !important;
                 }
 
                 .select-field-filter .select2-results__option--selected {

From c812773e4191c824a94fdbe91643ebf4b74af85c Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 5 Jul 2024 16:45:39 +0100
Subject: [PATCH 36/41] wc: Remove row wrapper in locked alert notification of
 variant interpreter #TASK-6133

---
 .../variant-interpreter-browser-template.js               | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
index 46ce66ffb..d39ba86fa 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
@@ -401,11 +401,9 @@ class VariantInterpreterBrowserTemplate extends LitElement {
             ` : null}
 
             ${this.clinicalAnalysis.interpretation.locked ? html`
-                <div class="row ms-4">
-                    <div class="alert alert-warning col-10 offset-2 mb-3">
-                        <label>Interpretation locked:</label> you cannot modify this interpretation. You can unlock the interpretation in
-                        <span class="fst-italic">Case Info >> Interpretation Manager</span>.
-                    </div>
+                <div class="alert alert-warning">
+                    <label>Interpretation locked:</label> you cannot modify this interpretation. You can unlock the interpretation in
+                    <span class="fst-italic">Case Info >> Interpretation Manager</span>.
                 </div>` : null
             }
 

From b077333a128881676b04cce6d49fcbbc32751e35 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 5 Jul 2024 16:46:19 +0100
Subject: [PATCH 37/41] wc: Minor code style fixes in interpreter browser
 template #TASK-6133

---
 .../interpretation/variant-interpreter-browser-template.js  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
index d39ba86fa..a6cde2ea3 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
@@ -398,14 +398,14 @@ class VariantInterpreterBrowserTemplate extends LitElement {
                     title="${this.clinicalAnalysis ? `${this._config.title} (${this.clinicalAnalysis.id})` : this._config.title}"
                     icon="${this._config.icon}">
                 </tool-header>
-            ` : null}
+            ` : nothing}
 
             ${this.clinicalAnalysis.interpretation.locked ? html`
                 <div class="alert alert-warning">
                     <label>Interpretation locked:</label> you cannot modify this interpretation. You can unlock the interpretation in
                     <span class="fst-italic">Case Info >> Interpretation Manager</span>.
-                </div>` : null
-            }
+                </div>
+            ` : nothing}
 
             <!-- Rodiel 27-09-23 NOTE: Using 'row' and 'col' has problems for standard resolution, so I opted for 'flex -->
             <div class="d-flex gap-4">

From 9bec537ab242014cf4c20dffb74572ee510b3034 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 5 Jul 2024 17:02:51 +0100
Subject: [PATCH 38/41] wc: Remove guardpage rendered in variant browser
 template #TASK-6133

---
 .../interpretation/variant-interpreter-browser-template.js      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
index a6cde2ea3..cfdb33ba6 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
@@ -389,7 +389,7 @@ class VariantInterpreterBrowserTemplate extends LitElement {
     render() {
         // Check Project exists
         if (!this.opencgaSession?.study) {
-            return guardPage();
+            return nothing;
         }
 
         return html`

From 50abcd836f1b8b11830b85d03d933f543b160f4b Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 5 Jul 2024 17:44:36 +0100
Subject: [PATCH 39/41] wc: Remove default styles applied to the loading
 formatter #TASK-6133

---
 src/webcomponents/commons/grid-commons.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webcomponents/commons/grid-commons.js b/src/webcomponents/commons/grid-commons.js
index 6247f443c..4c7d0a6cf 100644
--- a/src/webcomponents/commons/grid-commons.js
+++ b/src/webcomponents/commons/grid-commons.js
@@ -34,7 +34,7 @@ export default class GridCommons {
     }
 
     static loadingFormatter() {
-        return "<div style='width: 100%;height: 100%;padding: 0;margin: 0;'><loading-spinner></loading-spinner></div>";
+        return `<div><loading-spinner></loading-spinner></div>`;
     }
 
     constructor(gridId, context, config) {

From d7100d8de6d42edbd8f2fb884b5fc2a85a045499 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 5 Jul 2024 17:45:07 +0100
Subject: [PATCH 40/41] styles: Added temporal solution to fix loading overflow
 in grid components #TASK-6133

---
 styles/css/global.css | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/styles/css/global.css b/styles/css/global.css
index f2a350891..61a48b4c3 100644
--- a/styles/css/global.css
+++ b/styles/css/global.css
@@ -361,6 +361,7 @@ select.no-data + .select2-container--bootstrap-5.select2-container--open.select2
 }
 
 /****** animation ********/
+
 .anim-float {
     animation: float .5s infinite;
 }
@@ -422,7 +423,6 @@ select.no-data + .select2-container--bootstrap-5.select2-container--open.select2
     }
 }
 
-/* Animations */
 @keyframes pulse {
     0% {
         transform: scale(1);
@@ -438,6 +438,7 @@ select.no-data + .select2-container--bootstrap-5.select2-container--open.select2
 }
 
 /* Fonts */
+
 @font-face {
     font-family: 'Ubuntu';
     font-style: normal;
@@ -497,3 +498,16 @@ select.no-data + .select2-container--bootstrap-5.select2-container--open.select2
         max-width: 500px !important;
     }
 }
+
+/* Bootstrap table */
+
+/* Terrible hack to make sure that the bootstrap table has a minimum height of 200px */
+/* This is required to prevent the DNA loader exceed the table container */
+.bootstrap-table {
+    min-height: 200px;
+}
+
+/* Sets a minimum height to the loading container, to make sure that the loading DNA fits on this space */
+.bootstrap-table .fixed-table-loading {
+    min-height: 110px;
+}

From 0be1e173df67f851d35417bb3582581e3737772b Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Mon, 8 Jul 2024 11:23:46 +0100
Subject: [PATCH 41/41] wc: Fix indentation of tab element in detail-tabs
 #TASK-6133

---
 src/webcomponents/commons/view/detail-tabs.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/webcomponents/commons/view/detail-tabs.js b/src/webcomponents/commons/view/detail-tabs.js
index e778f0ecb..3825b0b9a 100644
--- a/src/webcomponents/commons/view/detail-tabs.js
+++ b/src/webcomponents/commons/view/detail-tabs.js
@@ -149,7 +149,8 @@ export default class DetailTabs extends LitElement {
                 <li role="tablist"
                     class="nav-item"
                     style="${this._config.display?.tabTitleStyle}">
-                    <a class="nav-link fw-bold fs-5 ${this._config.display?.tabTitleClass} ${isActive ? "active" : ""}"
+                    <a
+                        class="nav-link fw-bold fs-5 ${this._config.display?.tabTitleClass} ${isActive ? "active" : ""}"
                         href="#${this._prefix}${item.id}"
                         role="tab"
                         data-bs-toggle="tab" data-id="${item.id}"