From a6c5ca61ba2a18487074ded7126bd1c566082cd2 Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Wed, 18 Sep 2024 11:32:31 +0200
Subject: [PATCH 1/8] wc: Fix label and input unique id, #TASK-6854

Signed-off-by: gpveronica <veronica.zettagenomics@gmail.com>
---
 src/webcomponents/commons/forms/data-form.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/webcomponents/commons/forms/data-form.js b/src/webcomponents/commons/forms/data-form.js
index 09516c5ab6..e5764016aa 100644
--- a/src/webcomponents/commons/forms/data-form.js
+++ b/src/webcomponents/commons/forms/data-form.js
@@ -930,14 +930,16 @@ export default class DataForm extends LitElement {
 
         const content = html`
             <div class="form-check">
-                <input
-                    id="${this._prefix}FilterCheckbox"
-                    type="checkbox"
-                    class="${this._prefix}FilterCheckbox form-check-input"
-                    .checked="${value}"
-                    ?disabled="${disabled}"
-                    @click="${e => this.onFilterChange(element, e.currentTarget.checked)}">
-                <label class="form-check-label" for="${this._prefix}FilterCheckbox">${element.text}</label>
+                <label class="form-check label">
+                    <input
+                        id="${this._prefix}${element.field}"
+                        type="checkbox"
+                        class="form-check-input"
+                        .checked="${value}"
+                        ?disabled="${disabled}"
+                        @click="${e => this.onFilterChange(element, e.currentTarget.checked)}">
+                        ${element.text}
+                </label>
             </div>
         `;
 

From 86f5676617ff15e3ce991b51937700dd73abc9a6 Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Wed, 18 Sep 2024 13:17:52 +0200
Subject: [PATCH 2/8] wc: Fix class in label, #TASK-6854

Signed-off-by: gpveronica <veronica.zettagenomics@gmail.com>
---
 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 e5764016aa..7177f89055 100644
--- a/src/webcomponents/commons/forms/data-form.js
+++ b/src/webcomponents/commons/forms/data-form.js
@@ -930,7 +930,7 @@ export default class DataForm extends LitElement {
 
         const content = html`
             <div class="form-check">
-                <label class="form-check label">
+                <label class="form-check-label">
                     <input
                         id="${this._prefix}${element.field}"
                         type="checkbox"

From 530c8cb777a526ee0b90ac0b51f5a1e768080bba Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 20 Sep 2024 14:07:24 +0200
Subject: [PATCH 3/8] gb: Make navigation bar always visible at the top of the
 viewport #TASK-6941 #TASK-6694

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

diff --git a/src/genome-browser/genome-browser.js b/src/genome-browser/genome-browser.js
index 4ae1893fb1..2015a73a19 100644
--- a/src/genome-browser/genome-browser.js
+++ b/src/genome-browser/genome-browser.js
@@ -68,7 +68,7 @@ export default class GenomeBrowser {
         // Generate GB template
         const template = UtilsNew.renderHTML(`
             <div id="${this.prefix}" data-cy="gb-parent" class="card text-bg-light mb-3">
-                <div id="${this.prefix}Navigation" data-cy="gb-navigation" class="card-header"></div>
+                <div id="${this.prefix}Navigation" data-cy="gb-navigation" class="card-header bg-light sticky-top"></div>
                 <ul class="list-group rounded-0">
                     <li id="${this.prefix}Karyotype" data-cy="gb-karyotype" class="list-group-item" style="display:none;"></li>
                     <li id="${this.prefix}Chromosome" data-cy="gb-chromosome" class="list-group-item" style="display:none;"></li>

From 4319c7f5ae95c21159977c6b7567092582251030 Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Fri, 20 Sep 2024 20:36:08 +0200
Subject: [PATCH 4/8] wc: Fix priority badge colours, #TASK-5245

Signed-off-by: gpveronica <veronica.zettagenomics@gmail.com>
---
 .../clinical/clinical-analysis-grid.js        | 32 +++++++++----------
 .../clinical/clinical-analysis-view.js        | 21 +++++-------
 2 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/src/webcomponents/clinical/clinical-analysis-grid.js b/src/webcomponents/clinical/clinical-analysis-grid.js
index bd670c9114..336a2bda20 100644
--- a/src/webcomponents/clinical/clinical-analysis-grid.js
+++ b/src/webcomponents/clinical/clinical-analysis-grid.js
@@ -306,19 +306,19 @@ export default class ClinicalAnalysisGrid extends LitElement {
 
         // Priorities classes
         const priorityMap = {
-            URGENT: "text-bg-danger",
-            HIGH: "text-bg-warning",
-            MEDIUM: "text-bg-primary",
-            LOW: "text-bg-info"
+            URGENT: "bg-danger",
+            HIGH: "bg-warning",
+            MEDIUM: "bg-primary",
+            LOW: "bg-info",
+            UNKNOWN: "text-bg-light",
+        };
+        const priorityRankToColor = {
+            1: "bg-danger", // URGENT
+            2: "bg-warning", // HIGH
+            3: "bg-primary", // NORMAL
+            4: "bg-info", // LOW
+            5: "bg-light text-dark", // UNKNOWN
         };
-        const priorityRankToColor = [
-            "text-bg-danger",
-            "text-bg-warning",
-            "text-bg-primary",
-            "text-bg-info",
-            "text-bg-success",
-            "text-bg-light"
-        ];
 
         const hasWriteAccess = OpencgaCatalogUtils.checkPermissions(this.opencgaSession.study, this.opencgaSession.user.id, "WRITE_CLINICAL_ANALYSIS");
         const isEditable = !this._config.readOnlyMode && hasWriteAccess && !row.locked; // priority is editable
@@ -329,12 +329,12 @@ export default class ClinicalAnalysisGrid extends LitElement {
 
         // Current priority
         const currentPriorityText = value?.id ?? value ?? "-";
-        const currentPriorityLabel = priorityRankToColor[value?.rank ?? ""] ?? priorityMap[value ?? ""] ?? "";
+        const currentPriorityColor = priorityRankToColor[value?.rank] ?? priorityMap[value ?? ""] ?? "";
 
         return `
             <div class="dropdown">
                 <button class="${btnClassName}" type="button" data-bs-toggle="dropdown" style="${btnStyle}" ${!isEditable ? "disabled=\"disabled\"" : ""}>
-                    <span class="badge ${currentPriorityLabel} me-auto top-0">
+                    <span class="badge ${currentPriorityColor} me-2 top-0">
                         ${currentPriorityText}
                     </span>
                 </button>
@@ -344,8 +344,8 @@ export default class ClinicalAnalysisGrid extends LitElement {
                             <li>
                                 <a class="d-flex dropdown-item py-2" data-action="priorityChange" data-priority="${priority.id}" style="cursor:pointer;">
                                     <div class="flex-grow-1">
-                                        <div class="">
-                                            <span class="badge ${priorityRankToColor[priority?.rank ?? ""] ?? ""}">
+                                        <div>
+                                            <span class="badge ${priorityRankToColor[priority?.rank] ?? ""}">
                                                 ${priority.id}
                                             </span>
                                         </div>
diff --git a/src/webcomponents/clinical/clinical-analysis-view.js b/src/webcomponents/clinical/clinical-analysis-view.js
index 30aaedbb84..7a1d3a05d4 100644
--- a/src/webcomponents/clinical/clinical-analysis-view.js
+++ b/src/webcomponents/clinical/clinical-analysis-view.js
@@ -158,20 +158,15 @@ export default class ClinicalAnalysisView extends LitElement {
     }
 
     #priorityFormatter(id, data) {
-        const priorityRankToColor = [
-            "text-bg-danger",
-            "text-bg-warning",
-            "text-bg-primary",
-            "text-bg-info",
-            "text-bg-success",
-            "text-bg-light"
-        ];
+        const priorityRankToColor = {
+            1: "bg-danger", // URGENT
+            2: "bg-warning", // HIGH
+            3: "bg-primary", // NORMAL
+            4: "bg-info", // LOW
+            5: "bg-light text-dark", // UNKNOWN
+        };
 
-        if (typeof data?.priority?.rank === "number") {
-            return priorityRankToColor[data?.priority?.rank - 1] || "";
-        } else {
-            return "";
-        }
+        return priorityRankToColor[data?.priority?.rank] ?? "";
     }
 
     #setLoading(value) {

From 76b473a6265b8eed981a1fe5107ba226c262453d Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Mon, 23 Sep 2024 11:43:27 +0200
Subject: [PATCH 5/8] wc: Factorize priority rank map into web utils method,
 #TASK-6867

Signed-off-by: gpveronica <veronica.zettagenomics@gmail.com>
---
 .../clinical/clinical-analysis-grid.js        | 23 ++++---------------
 .../clinical/clinical-analysis-view.js        | 19 ++++-----------
 src/webcomponents/commons/utils/web-utils.js  | 12 ++++++++++
 3 files changed, 20 insertions(+), 34 deletions(-)

diff --git a/src/webcomponents/clinical/clinical-analysis-grid.js b/src/webcomponents/clinical/clinical-analysis-grid.js
index 336a2bda20..68ca38a3b3 100644
--- a/src/webcomponents/clinical/clinical-analysis-grid.js
+++ b/src/webcomponents/clinical/clinical-analysis-grid.js
@@ -23,6 +23,7 @@ import "../commons/opencb-grid-toolbar.js";
 import LitUtils from "../commons/utils/lit-utils.js";
 import NotificationUtils from "../commons/utils/notification-utils.js";
 import ModalUtils from "../commons/modal/modal-utils.js";
+import WebUtils from "../commons/utils/web-utils";
 
 export default class ClinicalAnalysisGrid extends LitElement {
 
@@ -304,22 +305,6 @@ export default class ClinicalAnalysisGrid extends LitElement {
         // TODO remove this code as soon as new OpenCGA configuration is in place
         const _priorities = this.opencgaSession?.study?.internal?.configuration?.clinical?.priorities || [];
 
-        // Priorities classes
-        const priorityMap = {
-            URGENT: "bg-danger",
-            HIGH: "bg-warning",
-            MEDIUM: "bg-primary",
-            LOW: "bg-info",
-            UNKNOWN: "text-bg-light",
-        };
-        const priorityRankToColor = {
-            1: "bg-danger", // URGENT
-            2: "bg-warning", // HIGH
-            3: "bg-primary", // NORMAL
-            4: "bg-info", // LOW
-            5: "bg-light text-dark", // UNKNOWN
-        };
-
         const hasWriteAccess = OpencgaCatalogUtils.checkPermissions(this.opencgaSession.study, this.opencgaSession.user.id, "WRITE_CLINICAL_ANALYSIS");
         const isEditable = !this._config.readOnlyMode && hasWriteAccess && !row.locked; // priority is editable
 
@@ -329,7 +314,7 @@ export default class ClinicalAnalysisGrid extends LitElement {
 
         // Current priority
         const currentPriorityText = value?.id ?? value ?? "-";
-        const currentPriorityColor = priorityRankToColor[value?.rank] ?? priorityMap[value ?? ""] ?? "";
+        const currentPriorityColor = WebUtils.getClinicalAnalysisPriorityColour(value?.rank);
 
         return `
             <div class="dropdown">
@@ -345,7 +330,7 @@ export default class ClinicalAnalysisGrid extends LitElement {
                                 <a class="d-flex dropdown-item py-2" data-action="priorityChange" data-priority="${priority.id}" style="cursor:pointer;">
                                     <div class="flex-grow-1">
                                         <div>
-                                            <span class="badge ${priorityRankToColor[priority?.rank] ?? ""}">
+                                            <span class="badge ${WebUtils.getClinicalAnalysisPriorityColour(priority?.rank)}">
                                                 ${priority.id}
                                             </span>
                                         </div>
@@ -372,7 +357,7 @@ export default class ClinicalAnalysisGrid extends LitElement {
         // const btnClassName = "d-inline-flex align-items-center btn btn-light dropdown-toggle";
         const btnClassName = "d-flex justify-content-between align-items-center btn btn-light dropdown-toggle w-100";
         // const btnStyle = "display:inline-flex;align-items:center;";
-debugger
+
         return `
             <div class="dropdown">
                 <button class="${btnClassName}" type="button" data-bs-toggle="dropdown" ${!isEditable ? "disabled=\"disabled\"" : ""}>
diff --git a/src/webcomponents/clinical/clinical-analysis-view.js b/src/webcomponents/clinical/clinical-analysis-view.js
index 7a1d3a05d4..c3bf8ef410 100644
--- a/src/webcomponents/clinical/clinical-analysis-view.js
+++ b/src/webcomponents/clinical/clinical-analysis-view.js
@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 
-import {LitElement, html, nothing} from "lit";
+import {LitElement, html} from "lit";
 import UtilsNew from "../../core/utils-new.js";
 import LitUtils from "../commons/utils/lit-utils";
 import CatalogGridFormatter from "../commons/catalog-grid-formatter.js";
+import BioinfoUtils from "../../core/bioinfo/bioinfo-utils";
+import WebUtils from "../commons/utils/web-utils.js";
 import "../commons/forms/data-form.js";
 import "../commons/image-viewer.js";
-import BioinfoUtils from "../../core/bioinfo/bioinfo-utils";
 
 export default class ClinicalAnalysisView extends LitElement {
 
@@ -157,18 +158,6 @@ export default class ClinicalAnalysisView extends LitElement {
         }
     }
 
-    #priorityFormatter(id, data) {
-        const priorityRankToColor = {
-            1: "bg-danger", // URGENT
-            2: "bg-warning", // HIGH
-            3: "bg-primary", // NORMAL
-            4: "bg-info", // LOW
-            5: "bg-light text-dark", // UNKNOWN
-        };
-
-        return priorityRankToColor[data?.priority?.rank] ?? "";
-    }
-
     #setLoading(value) {
         this.isLoading = value;
         this.requestUpdate();
@@ -291,7 +280,7 @@ export default class ClinicalAnalysisView extends LitElement {
                             display: {
                                 template: "${priority.id}",
                                 className: {
-                                    "priority.id": (id, data) => `badge ${this.#priorityFormatter(id, data)}`,
+                                    "priority.id": (id, data) => `badge ${WebUtils.getClinicalAnalysisPriorityColour(data?.priority?.rank)}`,
                                 },
                             }
                         },
diff --git a/src/webcomponents/commons/utils/web-utils.js b/src/webcomponents/commons/utils/web-utils.js
index 1656f2941a..f45a41f968 100644
--- a/src/webcomponents/commons/utils/web-utils.js
+++ b/src/webcomponents/commons/utils/web-utils.js
@@ -96,4 +96,16 @@ export default class WebUtils {
         return "-";
     }
 
+    static getClinicalAnalysisPriorityColour(rank) {
+        const priorityRankToColor = {
+            1: "bg-danger", // URGENT
+            2: "bg-warning", // HIGH
+            3: "bg-primary", // NORMAL
+            4: "bg-info", // LOW
+            5: "bg-light text-dark", // UNKNOWN
+        };
+
+        return priorityRankToColor[rank] ?? "";
+    }
+
 }

From fdea43ad5156875f3b2ef0edbb32fc503bdf11e1 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Mon, 23 Sep 2024 12:09:05 +0200
Subject: [PATCH 6/8] test: fix test for karyotype panel #TASK-6694

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

diff --git a/cypress/e2e/iva/genome-browser.cy.js b/cypress/e2e/iva/genome-browser.cy.js
index 71e2f9f054..52c926dfd5 100644
--- a/cypress/e2e/iva/genome-browser.cy.js
+++ b/cypress/e2e/iva/genome-browser.cy.js
@@ -97,7 +97,7 @@ context("GenomeBrowser", () => {
 
             cy.get("@karyotype")
                 .find(`div[data-cy="gb-karyotype-toggle"]`)
-                .trigger("click");
+                .trigger("click", {force: true});
 
             cy.get("@karyotypeContent")
                 .invoke("css", "display")

From cfccd7ab7152b6e5dc9cca911db914b8efdfc7b2 Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Mon, 23 Sep 2024 12:50:50 +0200
Subject: [PATCH 7/8] wc: Tiny code fixes, #TASK-6312

Signed-off-by: gpveronica <veronica.zettagenomics@gmail.com>
---
 src/webcomponents/clinical/clinical-analysis-grid.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/webcomponents/clinical/clinical-analysis-grid.js b/src/webcomponents/clinical/clinical-analysis-grid.js
index 68ca38a3b3..7b57558deb 100644
--- a/src/webcomponents/clinical/clinical-analysis-grid.js
+++ b/src/webcomponents/clinical/clinical-analysis-grid.js
@@ -19,11 +19,11 @@ import OpencgaCatalogUtils from "../../core/clients/opencga/opencga-catalog-util
 import UtilsNew from "../../core/utils-new.js";
 import GridCommons from "../commons/grid-commons.js";
 import CatalogGridFormatter from "../commons/catalog-grid-formatter.js";
-import "../commons/opencb-grid-toolbar.js";
 import LitUtils from "../commons/utils/lit-utils.js";
 import NotificationUtils from "../commons/utils/notification-utils.js";
 import ModalUtils from "../commons/modal/modal-utils.js";
-import WebUtils from "../commons/utils/web-utils";
+import WebUtils from "../commons/utils/web-utils.js";
+import "../commons/opencb-grid-toolbar.js";
 
 export default class ClinicalAnalysisGrid extends LitElement {
 

From 724ec687c12e8b219f33d97e938859e6cec10960 Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Mon, 23 Sep 2024 18:18:12 +0200
Subject: [PATCH 8/8] wc: Tiny code fixe, #TASK-6312

Signed-off-by: gpveronica <veronica.zettagenomics@gmail.com>
---
 src/webcomponents/clinical/clinical-analysis-view.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webcomponents/clinical/clinical-analysis-view.js b/src/webcomponents/clinical/clinical-analysis-view.js
index c3bf8ef410..dd820fdd24 100644
--- a/src/webcomponents/clinical/clinical-analysis-view.js
+++ b/src/webcomponents/clinical/clinical-analysis-view.js
@@ -18,7 +18,7 @@ import {LitElement, html} from "lit";
 import UtilsNew from "../../core/utils-new.js";
 import LitUtils from "../commons/utils/lit-utils";
 import CatalogGridFormatter from "../commons/catalog-grid-formatter.js";
-import BioinfoUtils from "../../core/bioinfo/bioinfo-utils";
+import BioinfoUtils from "../../core/bioinfo/bioinfo-utils.js";
 import WebUtils from "../commons/utils/web-utils.js";
 import "../commons/forms/data-form.js";
 import "../commons/image-viewer.js";