Merge branch 'release-3.x.x' into TASK-5769

opencb · Sep 24, 2024 · eafc35b · eafc35b
2 parents 8b2e3e5 + 378b095
commit eafc35b
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 51 deletions.
diff --git 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")

diff --git 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>

diff --git a/src/webcomponents/clinical/clinical-analysis-grid.js b/src/webcomponents/clinical/clinical-analysis-grid.js
@@ -19,10 +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.js";
+import "../commons/opencb-grid-toolbar.js";
 
 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: "text-bg-danger",
-            HIGH: "text-bg-warning",
-            MEDIUM: "text-bg-primary",
-            LOW: "text-bg-info"
-        };
-        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 +314,12 @@ export default class ClinicalAnalysisGrid extends LitElement {
 
         // Current priority
         const currentPriorityText = value?.id ?? value ?? "-";
-        const currentPriorityLabel = priorityRankToColor[value?.rank ?? ""] ?? priorityMap[value ?? ""] ?? "";
+        const currentPriorityColor = WebUtils.getClinicalAnalysisPriorityColour(value?.rank);
 
         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 +329,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 ${WebUtils.getClinicalAnalysisPriorityColour(priority?.rank)}">
                                                 ${priority.id}
                                             </span>
                                         </div>

diff --git 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.js";
+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,23 +158,6 @@ 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"
-        ];
-
-        if (typeof data?.priority?.rank === "number") {
-            return priorityRankToColor[data?.priority?.rank - 1] || "";
-        } else {
-            return "";
-        }
-    }
-
     #setLoading(value) {
         this.isLoading = value;
         this.requestUpdate();
@@ -296,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/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>
         `;
 

diff --git a/src/webcomponents/commons/utils/web-utils.js b/src/webcomponents/commons/utils/web-utils.js
@@ -97,4 +97,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] ?? "";
+    }
+
 }