From 6ceff4297843e24366698008c06a072d3776a37c Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 3 Oct 2024 16:29:11 +0200
Subject: [PATCH 01/22] wc: Remove unnecessary margin bottom in
 select-field-filter #TASK-6866

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

diff --git a/src/webcomponents/commons/forms/select-field-filter.js b/src/webcomponents/commons/forms/select-field-filter.js
index 1b67ae6ed..bdc57aed7 100644
--- a/src/webcomponents/commons/forms/select-field-filter.js
+++ b/src/webcomponents/commons/forms/select-field-filter.js
@@ -357,7 +357,6 @@ export default class SelectFieldFilter extends LitElement {
                 .select-field-filter .select2-results__options {
                     max-height: 600px !important;
                 }
-
                 .select-field-filter .select2-results__option--selected {
                     background-color: #fff !important;
                     color: #000 !important;
@@ -379,7 +378,7 @@ export default class SelectFieldFilter extends LitElement {
     render() {
         return html`
             ${this.renderStyle()}
-            <div class="input-group mb-1 select-field-filter">
+            <div class="input-group select-field-filter">
                 <select
                     class="form-select"
                     id="${this._prefix}"

From 3e5ea9a5d2509b01469e25ba145075fda1e42c1b Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 3 Oct 2024 18:08:27 +0200
Subject: [PATCH 02/22] wc: Keep selected genotypes state after clicking on
 search #TASK-6866

---
 src/webcomponents/variant/variant-samples.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/webcomponents/variant/variant-samples.js b/src/webcomponents/variant/variant-samples.js
index 0bc989db4..9cede4287 100644
--- a/src/webcomponents/variant/variant-samples.js
+++ b/src/webcomponents/variant/variant-samples.js
@@ -69,6 +69,7 @@ export default class VariantSamples extends LitElement {
         this.gridCommons = new GridCommons(this.gridId, this, this.config);
 
         // Nacho: to be more consistent with the rest of the application we are NOT selecting all genotypes by default
+        this.genotypeFilter = "";
         this.selectedGenotypes = "";
         // const selectedGenotypesArray = [];
         // for (const genotype of this.config.genotypes) {
@@ -396,12 +397,15 @@ export default class VariantSamples extends LitElement {
     }
 
     onSelectFilterChange(e) {
-        this._genotypeFilter = e.detail?.value;
+        this.selectedGenotypes = e.detail?.value;
+        this.requestUpdate();
     }
 
     onSearch() {
-        this.genotypeFilter = this._genotypeFilter;
-        this.renderTable();
+        if (this.selectedGenotypes !== this.genotypeFilter) {
+            this.genotypeFilter = this.selectedGenotypes;
+            this.renderTable();
+        }
     }
 
     render() {

From 0cd6bd920e964baaaa6f5525eb8655989ddd2fb0 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 3 Oct 2024 18:10:45 +0200
Subject: [PATCH 03/22] wc: Fix style of genotypes search dropdown and button
 #TASK-6866

---
 src/webcomponents/variant/variant-samples.js | 26 +++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/webcomponents/variant/variant-samples.js b/src/webcomponents/variant/variant-samples.js
index 9cede4287..006cd7556 100644
--- a/src/webcomponents/variant/variant-samples.js
+++ b/src/webcomponents/variant/variant-samples.js
@@ -431,21 +431,17 @@ export default class VariantSamples extends LitElement {
                         <div class="col-md-4"><label>Select Genotypes:</label></div>
                     </div>
                     <div class="col-md-12">
-                        <div class="col-md-4">
-                            <div class="input-group">
-                                <select-field-filter
-                                    .data="${this.config.genotypes}"
-                                    .value="${this.selectedGenotypes}"
-                                    .selectedTextFormat="${"count > 3"}"
-                                    .config="${{multiple: true}}"
-                                    @filterChange="${this.onSelectFilterChange}">
-                                </select-field-filter>
-                                <span class="input-group-btn">
-                                <button class="btn btn-default" type="button" @click="${this.onSearch}">
-                                    <i class="fas fa-search"></i> Search
-                                </button>
-                            </span>
-                            </div>
+                        <div class="d-flex gap-1">
+                            <select-field-filter
+                                .data="${this.config.genotypes}"
+                                .value="${this.selectedGenotypes}"
+                                .selectedTextFormat="${"count > 3"}"
+                                .config="${{multiple: true}}"
+                                @filterChange="${this.onSelectFilterChange}">
+                            </select-field-filter>
+                            <button class="btn btn-light" type="button" @click="${this.onSearch}">
+                                <i class="fas fa-search me-1"></i> Search
+                            </button>
                         </div>
                     </div>
                 </div>

From d09d1e4e51c277b6a20da45e6bc7ad3f882748cf Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 3 Oct 2024 18:13:12 +0200
Subject: [PATCH 04/22] wc: Display a warning message after changing genotypes
 in variant-samples #TAKS-6866

---
 src/webcomponents/variant/variant-samples.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/webcomponents/variant/variant-samples.js b/src/webcomponents/variant/variant-samples.js
index 006cd7556..d9852b765 100644
--- a/src/webcomponents/variant/variant-samples.js
+++ b/src/webcomponents/variant/variant-samples.js
@@ -426,6 +426,13 @@ export default class VariantSamples extends LitElement {
                     </div>
                 ` : nothing}
 
+                ${this.selectedGenotypes !== this.genotypeFilter ? html`
+                    <div class="alert alert-warning">
+                        <i class="fas fa-exclamation-triangle align-middle me-1"></i>
+                        <span>The selected genotypes have been updated. Please click the <b>Search</b> button to refresh the table with the updated results.</span>
+                    </div>    
+                ` : nothing}
+
                 <div class="row" style="margin-top: 20px">
                     <div class="col-md-12">
                         <div class="col-md-4"><label>Select Genotypes:</label></div>

From 4ee7556144b610b572b793c7d2ada7e8b6c580b5 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 3 Oct 2024 18:13:37 +0200
Subject: [PATCH 05/22] wc: Remove commented code in variant-samples #TASK-6866

---
 src/webcomponents/variant/variant-samples.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/webcomponents/variant/variant-samples.js b/src/webcomponents/variant/variant-samples.js
index d9852b765..ad11cd806 100644
--- a/src/webcomponents/variant/variant-samples.js
+++ b/src/webcomponents/variant/variant-samples.js
@@ -71,13 +71,6 @@ export default class VariantSamples extends LitElement {
         // Nacho: to be more consistent with the rest of the application we are NOT selecting all genotypes by default
         this.genotypeFilter = "";
         this.selectedGenotypes = "";
-        // const selectedGenotypesArray = [];
-        // for (const genotype of this.config.genotypes) {
-        //     if (genotype.fields) {
-        //         selectedGenotypesArray.push(genotype.fields.filter(gt => gt.id).map(gt => gt.id).join(","));
-        //     }
-        // }
-        // this.selectedGenotypes = selectedGenotypesArray.join(",");
     }
 
     updated(changedProperties) {

From 1b8846df16cbe56cf87d38059390a61a1be9382d Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 3 Oct 2024 18:19:49 +0200
Subject: [PATCH 06/22] wc: Minor style fixes in warning message of
 variant-samples #TASK-6866

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

diff --git a/src/webcomponents/variant/variant-samples.js b/src/webcomponents/variant/variant-samples.js
index ad11cd806..b04d6c03e 100644
--- a/src/webcomponents/variant/variant-samples.js
+++ b/src/webcomponents/variant/variant-samples.js
@@ -411,7 +411,7 @@ export default class VariantSamples extends LitElement {
             <div>
                 ${this.numSamples !== this.numUserTotalSamples ? html`
                     <div class="alert alert-warning">
-                        <i class="fas fa-3x fa-exclamation-circle align-middle"></i>
+                        <i class="fas fa-exclamation-circle"></i>
                         Number of samples found is <span style="font-weight: bold">${this.numSamples}</span>
                         ${this.approximateCount === true ? html` (<i>please note this is an estimated number</i>)` : ""}, and
                         your user account has permission to view <span style="font-weight: bold">${this.numUserTotalSamples} samples</span>.

From 23a7626594781a885b8a09798ed8c065ca7ec16d Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 3 Oct 2024 18:21:17 +0200
Subject: [PATCH 07/22] wc: Add missing spacing in warning message icon of
 variant-samples #TASK-6866

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

diff --git a/src/webcomponents/variant/variant-samples.js b/src/webcomponents/variant/variant-samples.js
index b04d6c03e..9608d385e 100644
--- a/src/webcomponents/variant/variant-samples.js
+++ b/src/webcomponents/variant/variant-samples.js
@@ -411,7 +411,7 @@ export default class VariantSamples extends LitElement {
             <div>
                 ${this.numSamples !== this.numUserTotalSamples ? html`
                     <div class="alert alert-warning">
-                        <i class="fas fa-exclamation-circle"></i>
+                        <i class="fas fa-exclamation-circle me-1"></i>
                         Number of samples found is <span style="font-weight: bold">${this.numSamples}</span>
                         ${this.approximateCount === true ? html` (<i>please note this is an estimated number</i>)` : ""}, and
                         your user account has permission to view <span style="font-weight: bold">${this.numUserTotalSamples} samples</span>.

From 34f35e26164592854ccf7eda6a3f320c636c7901 Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Tue, 15 Oct 2024 14:49:38 +0200
Subject: [PATCH 08/22] wc - Clean and improve code #TASK-7033

Signed-off-by: gpveronica <veronica.zettagenomics@gmail.com>
---
 .../commons/opencga-browser-filter.js         | 27 +++++--------------
 1 file changed, 7 insertions(+), 20 deletions(-)

diff --git a/src/webcomponents/commons/opencga-browser-filter.js b/src/webcomponents/commons/opencga-browser-filter.js
index 27d17839b..e956dc2dc 100644
--- a/src/webcomponents/commons/opencga-browser-filter.js
+++ b/src/webcomponents/commons/opencga-browser-filter.js
@@ -14,7 +14,7 @@
  * 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 "./utils/lit-utils.js";
 import "./filters/catalog-search-autocomplete.js";
@@ -34,7 +34,7 @@ export default class OpencgaBrowserFilter extends LitElement {
     constructor() {
         super();
 
-        this._init();
+        this.#init();
 
     }
     createRenderRoot() {
@@ -67,15 +67,9 @@ export default class OpencgaBrowserFilter extends LitElement {
         };
     }
 
-    _init() {
+    #init() {
         this._prefix = UtilsNew.randomString(8);
 
-        this.annotationFilterConfig = {
-            class: "small",
-            buttonClass: "btn-sm",
-            inputClass: "input-sm"
-        };
-
         this.query = {};
         this.preparedQuery = {};
         this.searchButton = true;
@@ -112,12 +106,6 @@ export default class OpencgaBrowserFilter extends LitElement {
         };
     }
 
-    connectedCallback() {
-        super.connectedCallback();
-
-        this.preparedQuery = {...this.query}; // propagates here the iva-app query object
-    }
-
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
 
@@ -141,17 +129,18 @@ export default class OpencgaBrowserFilter extends LitElement {
 
     queryObserver() {
         this.preparedQuery = this.query || {};
-        this.requestUpdate();
     }
 
     onFilterChange(key, value) {
         if (value && value !== "") {
-            this.preparedQuery = {...this.preparedQuery, ...{[key]: value}};
+            this.preparedQuery[key] = value;
         } else {
             delete this.preparedQuery[key];
-            this.preparedQuery = {...this.preparedQuery};
         }
+        this.preparedQuery = {...this.preparedQuery};
         this.notifyQuery(this.preparedQuery);
+        // Note 20241015 Vero: I believe this.requestUpdate() is not needed, but removing it requires further investigation
+        // (see variant-browser-filter.js, onFilterChange())
         this.requestUpdate();
     }
 
@@ -163,7 +152,6 @@ export default class OpencgaBrowserFilter extends LitElement {
         }
         this.preparedQuery = {...this.preparedQuery};
         this.notifyQuery(this.preparedQuery);
-        this.requestUpdate();
     }
 
     notifyQuery(query) {
@@ -289,7 +277,6 @@ export default class OpencgaBrowserFilter extends LitElement {
                             .opencgaSession="${this.opencgaSession}"
                             .opencgaClient="${this.opencgaSession.opencgaClient}"
                             .resource="${this.resource}"
-                            .config="${this.annotationFilterConfig}"
                             .selectedVariablesText="${this.preparedQuery.annotation}"
                             @annotationChange="${this.onAnnotationChange}">
                         </opencga-annotation-filter-modal>

From 993e947359eaacb44de274578b23729221567971 Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Tue, 15 Oct 2024 15:31:37 +0200
Subject: [PATCH 09/22] wc - Fix modal size, #TASK-7033

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

diff --git a/src/webcomponents/commons/modal/modal-utils.js b/src/webcomponents/commons/modal/modal-utils.js
index 191d5c43e..15bc022a3 100644
--- a/src/webcomponents/commons/modal/modal-utils.js
+++ b/src/webcomponents/commons/modal/modal-utils.js
@@ -38,7 +38,7 @@ export default class ModalUtils {
                 aria-hidden="true"
                 data-cy="${modalCyDataName}"
             >
-                <div class="modal-dialog ${modalSize}" style="width: ${modalWidth}">
+                <div class="modal-dialog ${modalSize}" style="width: ${modalSize ? "": modalWidth}">
                     <div class="modal-content">
                         <div class="modal-header">
                             ${ModalUtils.#getTitleHeader(modalTitleHeader, modalTitle, "modal-title " + modalTitleClassName, modalTitleStyle)}

From 55b0e16840a0f86116ebb31ad3e6788f28907d1b Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Tue, 15 Oct 2024 15:32:33 +0200
Subject: [PATCH 10/22] wc - Fix categorical filter and clean, #TASK-7033

Signed-off-by: gpveronica <veronica.zettagenomics@gmail.com>
---
 .../opencga-annotation-filter-modal.js        | 375 ++++++++++--------
 1 file changed, 200 insertions(+), 175 deletions(-)

diff --git a/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js b/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js
index b0a4160c7..f34063cb9 100644
--- a/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js
+++ b/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js
@@ -17,6 +17,8 @@
 import {LitElement, html} from "lit";
 import {classMap} from "lit/directives/class-map.js";
 import UtilsNew from "../../../../core/utils-new.js";
+import ModalUtils from "../../../commons/modal/modal-utils.js";
+import LitUtils from "../../../commons/utils/lit-utils.js";
 import "./../../../commons/forms/select-field-filter.js";
 
 export default class OpencgaAnnotationFilterModal extends LitElement {
@@ -43,9 +45,6 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
             selectedVariablesText: {
                 type: String
             },
-            config: {
-                type: Object
-            }
         };
     }
 
@@ -56,38 +55,45 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
         this.variableMap = {};
     }
 
-    connectedCallback() {
-        super.connectedCallback();
-        this._config = {...this.getDefaultConfig(), ...this.config};
-    }
-
-    updated(changedProperties) {
+    update(changedProperties) {
         if (changedProperties.has("opencgaSession")) {
             this.opencgaSessionObserver();
         }
         if (changedProperties.has("selectedVariablesText")) {
             this.selectedVariablesTextObserver();
         }
+
+        super.update(changedProperties);
     }
 
-    /**
-     * It builds this.selectedVariables from the serialized string this.selectedVariablesText
-     */
-    async selectedVariablesTextObserver() {
+    opencgaSessionObserver() {
+        this.variableSets = [];
+        if (typeof this.opencgaSession.study.variableSets !== "undefined") {
+            this._updateVariableSets(this.opencgaSession.study);
+        } else {
+            this.opencgaClient.studies()
+                .info(this.opencgaSession.study.id, {include: "variableSets"})
+                .then(response => {
+                    this._updateVariableSets(response.getResult(0));
+                })
+                .catch(() => {
+                    // this.dispatchEvent(new CustomEvent("variablesetselected", {detail: {id: null}}));
+                    console.error("Could not obtain the variable sets of the study " + this.opencgaSession.study);
+                });
+        }
+    }
+
+    // It builds this.selectedVariables from the serialized string this.selectedVariablesText
+    selectedVariablesTextObserver() {
         this.selectedVariables = {};
         if (this.selectedVariablesText) {
             const variables = this.selectedVariablesText.split(";");
-            this.requestUpdate();
-            await this.updateComplete;
             for (const v of variables) {
-                const [, variableSetId, variableId, operator, value] = [...v.matchAll(/(\w+):(\w+\.?\w+)(<=?|>=?|=)(\w+)/g)][0];
+                const [, variableSetId, variableId, operator, value] = [...v.matchAll(/(\w+):(\w+\.?\w+)(<=?|>=?|=)(\w+[\s+\w+]*)/g)][0];
                 this.selectedVariables[variableSetId] = {...this.selectedVariables[variableSetId] ?? {}, [variableId]: {operator, value}};
             }
-
         }
         this.selectedVariables = {...this.selectedVariables};
-        this.requestUpdate();
-
     }
 
     /**
@@ -104,60 +110,24 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                 .join(";");
             selected.push(singleVariableSetvariables);
         }
-        const event = new CustomEvent("annotationChange", {
-            detail: {
-                value: selected.join(";")
-            }
-        });
-        this.dispatchEvent(event);
+        LitUtils.dispatchCustomEvent(this, "annotationChange", selected.join(";"));
     }
 
-    opencgaSessionObserver() {
-
-        this.variableSets = [];
-
-        /* if (typeof this.opencgaSession.study === "undefined") {
-            this.dispatchEvent(new CustomEvent("variablesetselected", {detail: {id: null}}));
-            return;
-        }*/
-
-        if (typeof this.opencgaSession.study.variableSets !== "undefined") {
-            this._updateVariableSets(this.opencgaSession.study);
-        } else {
-            const _this = this;
-
-            this.opencgaClient.studies().info(this.opencgaSession.study.id, {include: "variableSets"})
-                .then(response => {
-                    this._updateVariableSets(response.getResult(0));
-                })
-                .catch(function () {
-                    // this.dispatchEvent(new CustomEvent("variablesetselected", {detail: {id: null}}));
-                    console.error("Could not obtain the variable sets of the study " + _this.opencgaSession.study);
-                });
-        }
-
-    }
-
-    async _updateVariableSets(study) {
+    _updateVariableSets(study) {
+        // CAUTION: MAP_BOOLEAN MISSING
         const sort = ["TEXT", "STRING", "NUMERIC", "INTEGER", "DOUBLE", "CATEGORICAL", "BOOLEAN", "OBJECT", "MAP_STRING", "MAP_DOUBLE", "MAP_INTEGER"];
-        if (typeof study.variableSets === "undefined") {
-            this.variableSets = [];
-        } else {
-            const _variableSets = [];
-            for (const variableSet of study.variableSets) {
+        this.variableSets = [];
+        if (typeof study.variableSets !== "undefined") {
+            this.variableSets = study.variableSets.filter(variableSet => {
                 if (UtilsNew.isEmpty(this.resource) || variableSet.entities.includes(this.resource)) {
-                    variableSet.variables.sort((a, b) => {
-                        return sort.indexOf(a.type) - sort.indexOf(b.type);
-                    });
-                    _variableSets.push({
+                    variableSet.variables.sort((a, b) => sort.indexOf(a.type) - sort.indexOf(b.type));
+                    return {
                         name: variableSet.name || variableSet.id,
                         ...variableSet
-                    });
+                    };
                 }
-            }
-            this.variableSets = _variableSets;
+            });
         }
-        this.requestUpdate();
     }
 
     changeOperator(e) {
@@ -197,7 +167,24 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
 
         const value = e.target.value.trim();
         if (value) {
-            this.selectedVariables[variableSetId] = {...this.selectedVariables[variableSetId] ?? {}, [variableId]: {value, operator: "="}};
+            this.selectedVariables[variableSetId] = {
+                ...this.selectedVariables[variableSetId] ?? {},
+                [variableId]: {value, operator: "="}
+            };
+        } else {
+            delete this.selectedVariables[variableSetId][variableId];
+        }
+        this.selectedVariables = {...this.selectedVariables};
+        this.selectedVariablesSerializer();
+    }
+
+    addCategoricalFilter(variableSetId, variableId, key) {
+        const value = key.trim();
+        if (value) {
+            this.selectedVariables[variableSetId] = {
+                ...this.selectedVariables[variableSetId] ?? {},
+                [variableId]: {value, operator: "="}
+            };
         } else {
             delete this.selectedVariables[variableSetId][variableId];
         }
@@ -208,7 +195,10 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
     addBooleanFilter(e) {
         const {variableId, variableSetId, value} = e.target.dataset;
         console.log(variableId, variableSetId, value);
-        this.selectedVariables[variableSetId] = {...this.selectedVariables[variableSetId] ?? {}, [variableId]: {value, operator: "="}};
+        this.selectedVariables[variableSetId] = {
+            ...this.selectedVariables[variableSetId] ?? {},
+            [variableId]: {value, operator: "="}
+        };
         this.selectedVariables = {...this.selectedVariables};
         this.selectedVariablesSerializer();
     }
@@ -270,25 +260,26 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                                 .data="${variable?.allowedKeys}"
                                 .value="${this.variableMap?.[variableSet.id]?.[variable.id] ?? []}"
                                 .config="${{
-                                    multiple: true,
-                                    liveSearch: false
-                                }}"
+                    multiple: true,
+                    liveSearch: false
+                }}"
                                 @filterChange="${e => this.changeMap(variableSet.id, variable.id, e.detail.value)}">
                             </select-field-filter>
                             <!-- form-inline -->
                             <div class="row row-cols-lg-auto g-1 align-items-center">
                                 ${this.variableMap?.[variableSet.id]?.[variable.id]?.map(key => {
-                                    return html`
+                    return html`
                                         <div class="col-md-3">
                                             <label class="form-label fw-bold" for="${variable.id}Input">${key}</label>
                                             <input class="form-control" type="text" placeholder="${key}" id="${variable.id}Input"
                                                 data-variable-id="${variable.id + "." + key}"
                                                 data-variable-set-id="${variableSet.id}"
-                                                @input="${this.addInputFilter}" .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
+                                                @input="${this.addInputFilter}"
+                                                .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
                                         </div>
                                         `;
-                                })
-                                }
+                })
+                }
                             </div>
                         </div>
                     ` : html`
@@ -309,7 +300,8 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
             case "MAP_INTEGER":
                 content = html`
                     <!--<pre> \${JSON.stringify(variable)}</pre>-->
-                    ${variable?.allowedKeys?.length ? html`
+                    ${variable?.allowedKeys?.length ?
+                    html`
                         <div class="col-md-12">
                             <label class="form-label fw-bold">
                                 <a tooltip-title="${variable.id}" tooltip-text="${variable.description}">
@@ -320,14 +312,14 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                                 .data="${variable?.allowedKeys}"
                                 .value=${this.variableMap?.[variableSet.id]?.[variable.id] ?? []}
                                 .config="${{
-                                    multiple: true,
-                                    liveSearch: false
-                                }}"
+                        multiple: true,
+                        liveSearch: false
+                    }}"
                                 @filterChange="${e => this.changeMap(variableSet.id, variable.id, e.detail.value)}">
                             </select-field-filter>
                             <div class="row">
                                 ${this.variableMap?.[variableSet.id]?.[variable.id]?.map(key => {
-                                    return html`
+                        return html`
                                         <div class="col-md-3">
                                             <label class="form-label fw-bold"  for="${variable.id}Input">
                                                 ${key}
@@ -338,39 +330,43 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                                                         data-variable-id="${variable.id + "." + key}" data-variable-set-id="${variableSet.id}"
                                                         @change="${this.changeOperator}">
                                                             <option value="=">=</option>
-                                                            <option value="<">&lt;</option>
-                                                            <option value="<=">&le;</option>
-                                                            <option value=">" selected>&gt;</option>
-                                                            <option value=">=">&ge;</option>
+                                                            <option value="&lt;">&lt;</option>
+                                                            <option value="&le;">&le;</option>
+                                                            <option value="&gt;" selected>&gt;</option>
+                                                            <option value="&ge;">&ge;</option>
                                                     </select>
                                                 </div>
                                                 <div class="col-6">
-                                                    <input type="text" class="form-control" placeholder="${key}"
-                                                    data-variable-id="${variable.id + "." + key}" data-variable-set-id="${variableSet.id}" data-operator=">"
-                                                    @input="${this.addNumericFilter}" .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
+                                                    <input
+                                                        type="text"
+                                                        class="form-control"
+                                                        placeholder="${key}"
+                                                        data-variable-id="${variable.id + "." + key}"
+                                                        data-variable-set-id="${variableSet.id}" data-operator="&lt;"
+                                                        @input="${this.addNumericFilter}"
+                                                        .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
                                                 </div>
                                             </div>
                                         </div>
-                                        `;
-                                    })
-                                }
+                                    `;
+                    })}
                             </div>
                         </div>
-                    ` : html`
-                        <div class="col-md-3">
-                            <label class="form-label fw-bold" for="${variable.id}Input">
-                                <a tooltip-title="${variable.id}" tooltip-text="${variable.description}">
-                                    <i class="fa fa-info-circle" aria-hidden="true"></i>
-                                </a> ${variable.id}
-                            </label>
-                            <input class="form-control" type="text" id="${variable.id}Input"
-                                placeholder="${variable.id}" data-variable-id="${variable.id}" data-variable-set-id="${variableSet.id}"
-                                pattern="${variable?.attributes?.pattern ?? null}" aria-describedby="basic-addon1" @input="${this.addInputFilter}"
-                                .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
-                        </div>`}
-
-
-                    `;
+                    ` :
+                    html`
+                            <div class="col-md-3">
+                                <label class="form-label fw-bold" for="${variable.id}Input">
+                                    <a tooltip-title="${variable.id}" tooltip-text="${variable.description}">
+                                        <i class="fa fa-info-circle" aria-hidden="true"></i>
+                                    </a> ${variable.id}
+                                </label>
+                                <input class="form-control" type="text" id="${variable.id}Input"
+                                    placeholder="${variable.id}" data-variable-id="${variable.id}" data-variable-set-id="${variableSet.id}"
+                                    pattern="${variable?.attributes?.pattern ?? null}" aria-describedby="basic-addon1" @input="${this.addInputFilter}"
+                                    .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
+                            </div>
+                        `}
+                `;
                 break;
             case "TEXT":
             case "STRING":
@@ -401,25 +397,47 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                             <div class="col-6">
                                 <select class="form-select" id="${variable.id}Select" data-variable-id="${variable.id}" data-variable-set-id="${variableSet.id}" @change="${this.changeOperator}">
                                     <option value="=">=</option>
-                                    <option value="<">&lt;</option>
-                                    <option value="<=">&le;</option>
-                                    <option value=">" selected>&gt;</option>
-                                    <option value=">=">&ge;</option>
+                                    <option value="&lt;">&lt;</option>
+                                    <option value="&le;">&le;</option>
+                                    <option value="&gt;" selected>&gt;</option>
+                                    <option value="&ge;">&ge;</option>
                                 </select>
                             </div>
                             <div class="col-6">
-                                <input type="text" class="form-control" id="${variable.id}Input" placeholder="${variable.id}" pattern="${variable?.attributes?.pattern ?? null}"
-                                    data-variable-id="${variable.id}" data-variable-set-id="${variableSet.id}" data-operator=">"
-                                    @input="${this.addNumericFilter}" .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
+                                <input
+                                    type="text"
+                                    class="form-control"
+                                    id="${variable.id}Input"
+                                    placeholder="${variable.id}"
+                                    pattern="${variable?.attributes?.pattern ?? null}"
+                                    data-variable-id="${variable.id}"
+                                    data-variable-set-id="${variableSet.id}" data-operator="&gt;"
+                                    @input="${this.addNumericFilter}"
+                                    .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
                             </div>
                         </div>
-                    </div>`;
+                    </div>
+                `;
                 break;
             case "CATEGORICAL":
                 content = html`
-                    <select class="selectpicker ${variable.id} form-select" id="${this._prefix}-categorical-selector"  multiple @change="${this.addCategoricalFilter}" data-variable-set-id="${variableSet.id}" data-width="100%">
-                        ${variable.allowedValues && variable.allowedValues.length && variable.allowedValues.map(item => html`<option value="${item}">${item}</option>`)}
-                    </select>`;
+                    <div class="col-md-3">
+                        <label class="form-label fw-bold">
+                            <a tooltip-title="${variable.id}" tooltip-text="${variable.description}">
+                                <i class="fa fa-info-circle" aria-hidden="true"></i>
+                            </a> ${variable.id}
+                        </label>
+                        <select-field-filter
+                            .data="${variable.allowedValues}"
+                            .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"
+                            .config="${{
+                                multiple: !!variable.multiValue,
+                                liveSearch: false,
+                            }}"
+                            @filterChange="${e => this.addCategoricalFilter(variableSet.id, variable.id, e.detail.value)}">
+                        </select-field-filter>
+                    </div>
+                `;
                 break;
             case "BOOLEAN":
                 content = html`
@@ -431,16 +449,31 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                             </a> ${variable.id}
                         </label>
                         <div class="form-control">
-                            <input class="form-check-input" data-variable-id="${variable.id}" id="${this._prefix}${variable.id}yes"
-                                data-variable-set-id="${variableSet.id}" type="radio" name="${variable.id}Options" data-value="True"
-                                .checked="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value === "true"}" @input="${this.addBooleanFilter}">
+                            <input
+                                class="form-check-input"
+                                data-variable-id="${variable.id}"
+                                id="${this._prefix}${variable.id}yes"
+                                data-variable-set-id="${variableSet.id}"
+                                type="radio"
+                                name="${variable.id}Options"
+                                data-value="True"
+                                .checked="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value === "true"}"
+                                @input="${this.addBooleanFilter}">
                             True
-                            <input class="form-check-input" id="${this._prefix}${variable.id}no"
-                            data-variable-id="${variable.id}" data-variable-set-id="${variableSet.id}"
-                            type="radio" name="${variable.id}Options" data-value="False" .checked="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value === "false"}" @input="${this.addBooleanFilter}">
+                            <input
+                                class="form-check-input"
+                                id="${this._prefix}${variable.id}no"
+                                data-variable-id="${variable.id}"
+                                data-variable-set-id="${variableSet.id}"
+                                type="radio"
+                                name="${variable.id}Options"
+                                data-value="False"
+                                .checked="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value === "false"}"
+                                @input="${this.addBooleanFilter}">
                             False
                         </div>
-                    </div>`;
+                    </div>
+                `;
                 break;
             default:
                 throw new Error("Type not recognized " + variable.type + "(" + variable.id + ")");
@@ -448,68 +481,60 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
         return html`${content}`;
     }
 
-    filterChange() {
-
-    }
-
     showModal() {
-        const annotationModal = new bootstrap.Modal(`#${this._prefix}annotation-modal`);
+        const annotationModal = new bootstrap.Modal(`#${this._prefix}AnnotationFilterModal`);
         annotationModal.show();
         UtilsNew.initTooltip(this);
     }
 
-    getDefaultConfig() {
-        return {
-
-        };
-    }
-
-    render() {
+    renderBody() {
         return html`
-            ${this.variableSets?.length ? html`
-                <button type="button" class="btn btn-light" @click="${this.showModal}">Annotation</button>
-
-                <div class="modal fade annotation-modal" id="${this._prefix}annotation-modal" role="dialog"
-                    tabindex="-1" aria-labelledby="annotation-modal" data-keyboard="false">
-                <div class="modal-dialog modal-xl" role="document">
-                    <div class="modal-content container">
-                        <div class="modal-header">
-                            <h4 class="modal-title">Annotation filter</h4>
-                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                        </div>
-                        <div class="modal-body">
-                            <ul class="nav nav-tabs mb-3" role="tablist">
-                                ${this.variableSets.map((variableSet, i) => html`
-                                    <li class="nav-item" role="presentation">
-                                        <a class="nav-link ${classMap({"active": i === 0})}"
-                                            id="${variableSet.id}_tab" data-bs-toggle="tab" data-bs-target="#${variableSet.id}_tabpanel"
-                                            href="javascript: void 0" aria-controls="${variableSet.id}_tab"
-                                            role="tab" data-cy="variable-set-tab">${variableSet.name}</a>
-                                    </li>
-                                `)}
-                            </ul>
-
-                            <div class="tab-content">
-                                ${this.variableSets.map((variableSet, i) => html`
-                                    <div class="tab-pane ${classMap({"active": i === 0})}" id="${variableSet.id}_tabpanel"
-                                        role="tabpanel" tabindex="0"  aria-labelledby="${variableSet.id}_tab">
-                                        ${variableSet.description ? html`
-                                        <h4 class="mb-3">${variableSet.description}</h4>` : null}
-                                    <div class="row g-3">
-                                        ${variableSet.variables.map(variable => html`${this.renderVariable(variable, variableSet)}`)}
-                                    </div>
-                                </div>
-                                `)}
-                            </div>
-                        </div>
-
-                        <div class="modal-footer">
-                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">OK</button>
-                        </div>
+            <ul class="nav nav-tabs mb-3" role="tablist">
+                ${this.variableSets.map((variableSet, i) => html`
+                    <li class="nav-item" role="presentation">
+                        <a class="nav-link ${classMap({"active": i === 0})}"
+                           id="${variableSet.id}_tab"
+                           data-bs-toggle="tab"
+                           data-bs-target="#${variableSet.id}_tabpanel"
+                           href="javascript: void 0"
+                           aria-controls="${variableSet.id}_tab"
+                           role="tab"
+                           data-cy="variable-set-tab">${variableSet.name}</a>
+                    </li>
+                `)}
+            </ul>
+            <div class="tab-content">
+                ${this.variableSets.map((variableSet, i) => html`
+                    <div class="tab-pane ${classMap({"active": i === 0})}"
+                         id="${variableSet.id}_tabpanel"
+                         role="tabpanel"
+                         tabindex="0"
+                         aria-labelledby="${variableSet.id}_tab">
+                        ${variableSet.description ? html`
+                        <h4 class="mb-3">${variableSet.description}</h4>` : null}
+                    <div class="row g-3">
+                        ${variableSet.variables.map(variable => this.renderVariable(variable, variableSet))}
                     </div>
                 </div>
+                `)}
             </div>
-            ` : html`<p>No variableSets defined in the study</p>`}
+        `;
+    }
+
+    render() {
+        return this.variableSets?.length ? html`
+            <button type="button" class="btn btn-light" @click="${this.showModal}">Annotation</button>
+            ${ModalUtils.create(this, this._prefix + "AnnotationFilterModal", {
+            display: {
+                modalTitle: "Annotation Filter",
+                modalDraggable: true,
+                modalCyDataName: "modal-annotation-filter",
+                modalSize: "modal-xl"
+            },
+            render: () => this.renderBody(),
+        })}
+        ` : html`
+            <p>No variableSets defined in the study</p>
         `;
     }
 

From f89547843e2e291eb1aa537bc7c95c61602f344b Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Wed, 16 Oct 2024 12:38:27 +0200
Subject: [PATCH 11/22] wc - Add and fix visibility of footer buttons,
 #TASK-7033

Signed-off-by: gpveronica <veronica.zettagenomics@gmail.com>
---
 .../commons/modal/modal-utils.js              | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/webcomponents/commons/modal/modal-utils.js b/src/webcomponents/commons/modal/modal-utils.js
index 15bc022a3..a4162909f 100644
--- a/src/webcomponents/commons/modal/modal-utils.js
+++ b/src/webcomponents/commons/modal/modal-utils.js
@@ -17,15 +17,17 @@ export default class ModalUtils {
 
     static create(self, id, config) {
         // Parse modal parameters, all of them must start with prefix 'modal'
-        const modalWidth = config.display?.modalWidth || "768px";
-        const modalSize = config.display?.modalSize || "";
-        const modalTitle = config.display?.modalTitle || "";
-        const modalTitleHeader = config.display?.modalTitleHeader || "h4";
-        const modalTitleClassName = config.display?.modalTitleClassName || "";
-        const modalTitleStyle = config.display?.modalTitleStyle || "";
-        const btnsVisible = config.display?.modalbtnsVisible;
-        const modalDraggable = config.display?.modalDraggable || false;
-        const modalCyDataName = config.display?.modalCyDataName || "";
+        const modalWidth = config.display?.modalWidth ?? "768px";
+        const modalSize = config.display?.modalSize ?? "";
+        const modalTitle = config.display?.modalTitle ?? "";
+        const modalTitleHeader = config.display?.modalTitleHeader ?? "h4";
+        const modalTitleClassName = config.display?.modalTitleClassName ?? "";
+        const modalTitleStyle = config.display?.modalTitleStyle ?? "";
+        const btnsVisible = config.display?.modalbtnsVisible ?? true;
+        const btnCancelVisible = config.display?.btnCancelVisible ?? true;
+        const btnSaveVisible = config.display?.btnOkVisible ?? true;
+        const modalDraggable = config.display?.modalDraggable ?? false;
+        const modalCyDataName = config.display?.modalCyDataName ?? "";
 
         return html`
             <div
@@ -53,6 +55,7 @@ export default class ModalUtils {
                         </div>
                         ${btnsVisible? html`
                             <div class="modal-footer">
+                                ${btnCancelVisible ? html`
                                 <button
                                     type="button"
                                     class="btn btn-light"
@@ -61,6 +64,8 @@ export default class ModalUtils {
                                 >
                                     ${config?.display?.cancelButtonText || "Cancel"}
                                 </button>
+                                ` : nothing}
+                                ${btnSaveVisible ? html`
                                 <button
                                     type="button"
                                     class="btn btn-primary"
@@ -69,6 +74,7 @@ export default class ModalUtils {
                                 >
                                     ${config?.display?.okButtonText || "Save"}
                                 </button>
+                                ` : nothing}
                             </div>
                         `: nothing}
                     </div>

From aee35259ef391f1940dc2ee399a33624fdf4b510 Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Wed, 16 Oct 2024 20:37:15 +0200
Subject: [PATCH 12/22] wc - Fix prepared query on map delete selection,
 #TASK-7033

Signed-off-by: gpveronica <veronica.zettagenomics@gmail.com>
---
 .../opencga-annotation-filter-modal.js        | 126 ++++++++++--------
 1 file changed, 67 insertions(+), 59 deletions(-)

diff --git a/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js b/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js
index f34063cb9..30d3efac8 100644
--- a/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js
+++ b/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js
@@ -110,6 +110,7 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                 .join(";");
             selected.push(singleVariableSetvariables);
         }
+        debugger
         LitUtils.dispatchCustomEvent(this, "annotationChange", selected.join(";"));
     }
 
@@ -156,6 +157,7 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
             }*/
             this.selectedVariables[variableSetId] = {...this.selectedVariables[variableSetId] ?? {}, [variableId]: {value, operator}};
         } else {
+            debugger
             delete this.selectedVariables[variableSetId][variableId];
         }
         this.selectedVariables = {...this.selectedVariables};
@@ -203,17 +205,28 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
         this.selectedVariablesSerializer();
     }
 
-    changeMap(variableSetId, variableId, key) {
-        console.log(variableSetId, variableId, key);
+    changeMap(e, variableSetId, variableId, key) {
         if (key) {
             this.variableMap[variableSetId] = {
                 ...this.variableMap[variableSetId],
-                [variableId]: key.split(",")
+                [variableId]: key.split(","),
             };
         } else {
             delete this.variableMap[variableSetId][variableId];
         }
+        if (this.selectedVariables?.[variableSetId]) {
+            Object.keys(this.selectedVariables[variableSetId])
+                .forEach(key => {
+                    const [keyVariableId, keyOption] = key.split('.');
+                    if (!this.variableMap[variableSetId][keyVariableId]?.includes(keyOption)) {
+                        delete this.selectedVariables[variableSetId][key];
+                        this.selectedVariables = {...this.selectedVariables};
+                        this.selectedVariablesSerializer();
+                    }
+                });
+        }
         this.variableMap = {...this.variableMap};
+        // Get the ones that are in this.variableMap
         this.requestUpdate();
     }
 
@@ -259,27 +272,21 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                             <select-field-filter
                                 .data="${variable?.allowedKeys}"
                                 .value="${this.variableMap?.[variableSet.id]?.[variable.id] ?? []}"
-                                .config="${{
-                    multiple: true,
-                    liveSearch: false
-                }}"
-                                @filterChange="${e => this.changeMap(variableSet.id, variable.id, e.detail.value)}">
+                                .config="${{multiple: true, liveSearch: false}}"
+                                @filterChange="${e => this.changeMap(e, variableSet.id, variable.id, e.detail.value)}">
                             </select-field-filter>
                             <!-- form-inline -->
                             <div class="row row-cols-lg-auto g-1 align-items-center">
-                                ${this.variableMap?.[variableSet.id]?.[variable.id]?.map(key => {
-                    return html`
-                                        <div class="col-md-3">
-                                            <label class="form-label fw-bold" for="${variable.id}Input">${key}</label>
-                                            <input class="form-control" type="text" placeholder="${key}" id="${variable.id}Input"
-                                                data-variable-id="${variable.id + "." + key}"
-                                                data-variable-set-id="${variableSet.id}"
-                                                @input="${this.addInputFilter}"
-                                                .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
-                                        </div>
-                                        `;
-                })
-                }
+                                ${this.variableMap?.[variableSet.id]?.[variable.id]?.map(key => html`
+                                    <div class="col-md-3">
+                                        <label class="form-label fw-bold" for="${variable.id}Input">${key}</label>
+                                        <input class="form-control" type="text" placeholder="${key}" id="${variable.id}Input"
+                                            data-variable-id="${variable.id + "." + key}"
+                                            data-variable-set-id="${variableSet.id}"
+                                            @input="${this.addInputFilter}"
+                                            .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
+                                    </div>
+                                `)}
                             </div>
                         </div>
                     ` : html`
@@ -300,8 +307,7 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
             case "MAP_INTEGER":
                 content = html`
                     <!--<pre> \${JSON.stringify(variable)}</pre>-->
-                    ${variable?.allowedKeys?.length ?
-                    html`
+                    ${variable?.allowedKeys?.length ? html`
                         <div class="col-md-12">
                             <label class="form-label fw-bold">
                                 <a tooltip-title="${variable.id}" tooltip-text="${variable.description}">
@@ -311,45 +317,44 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                             <select-field-filter
                                 .data="${variable?.allowedKeys}"
                                 .value=${this.variableMap?.[variableSet.id]?.[variable.id] ?? []}
-                                .config="${{
-                        multiple: true,
-                        liveSearch: false
-                    }}"
-                                @filterChange="${e => this.changeMap(variableSet.id, variable.id, e.detail.value)}">
+                                .config="${{multiple: true, liveSearch: false}}"
+                                @filterChange="${e => this.changeMap(e, variableSet.id, variable.id, e.detail.value)}">
                             </select-field-filter>
                             <div class="row">
-                                ${this.variableMap?.[variableSet.id]?.[variable.id]?.map(key => {
-                        return html`
-                                        <div class="col-md-3">
-                                            <label class="form-label fw-bold"  for="${variable.id}Input">
-                                                ${key}
-                                            </label>
-                                            <div class="row row-cols-lg-auto g-1 align-items-center">
-                                                <div class="col-6">
-                                                    <select class="form-select form-select-sm"  id="${variable.id}Input"
-                                                        data-variable-id="${variable.id + "." + key}" data-variable-set-id="${variableSet.id}"
-                                                        @change="${this.changeOperator}">
-                                                            <option value="=">=</option>
-                                                            <option value="&lt;">&lt;</option>
-                                                            <option value="&le;">&le;</option>
-                                                            <option value="&gt;" selected>&gt;</option>
-                                                            <option value="&ge;">&ge;</option>
-                                                    </select>
-                                                </div>
-                                                <div class="col-6">
-                                                    <input
-                                                        type="text"
-                                                        class="form-control"
-                                                        placeholder="${key}"
-                                                        data-variable-id="${variable.id + "." + key}"
-                                                        data-variable-set-id="${variableSet.id}" data-operator="&lt;"
-                                                        @input="${this.addNumericFilter}"
-                                                        .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
-                                                </div>
+                                ${this.variableMap?.[variableSet.id]?.[variable.id]?.map(key => html`
+                                    <div class="col-md-3">
+                                        <label class="form-label fw-bold"  for="${variable.id}Input">
+                                            ${key}
+                                        </label>
+                                        <div class="row row-cols-lg-auto g-1 align-items-center">
+                                            <div class="col-6">
+                                                <select
+                                                    class="form-select"
+                                                    id="${variable.id}Input"
+                                                    data-variable-id="${variable.id + "." + key}"
+                                                    data-variable-set-id="${variableSet.id}"
+                                                    @change="${this.changeOperator}">
+                                                        <option value="=">=</option>
+                                                        <option value="<">&lt;</option>
+                                                        <option value="<=">&le;</option>
+                                                        <option value=">" selected>&gt;</option>
+                                                        <option value=">=">&ge;</option>
+                                                </select>
+                                            </div>
+                                            <div class="col-6">
+                                                <input
+                                                    type="text"
+                                                    class="form-control"
+                                                    placeholder="${key}"
+                                                    data-variable-id="${variable.id + "." + key}"
+                                                    data-variable-set-id="${variableSet.id}"
+                                                    data-operator=">"
+                                                    @input="${this.addNumericFilter}"
+                                                    .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
                                             </div>
                                         </div>
-                                    `;
-                    })}
+                                    </div>
+                                `)}
                             </div>
                         </div>
                     ` :
@@ -529,7 +534,10 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                 modalTitle: "Annotation Filter",
                 modalDraggable: true,
                 modalCyDataName: "modal-annotation-filter",
-                modalSize: "modal-xl"
+                modalSize: "modal-xl",
+                modalbtnsVisible: true,
+                btnCancelVisible: false,
+                okButtonText: "OK",
             },
             render: () => this.renderBody(),
         })}

From 9f2a5c4f2109f313c7b24164c84282be02889c89 Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Wed, 16 Oct 2024 20:37:36 +0200
Subject: [PATCH 13/22] wc - Fix modal default buttons, #TASK-7033

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

diff --git a/src/webcomponents/commons/modal/modal-utils.js b/src/webcomponents/commons/modal/modal-utils.js
index a4162909f..4cde87899 100644
--- a/src/webcomponents/commons/modal/modal-utils.js
+++ b/src/webcomponents/commons/modal/modal-utils.js
@@ -23,7 +23,7 @@ export default class ModalUtils {
         const modalTitleHeader = config.display?.modalTitleHeader ?? "h4";
         const modalTitleClassName = config.display?.modalTitleClassName ?? "";
         const modalTitleStyle = config.display?.modalTitleStyle ?? "";
-        const btnsVisible = config.display?.modalbtnsVisible ?? true;
+        const btnsVisible = config.display?.modalbtnsVisible ?? false;
         const btnCancelVisible = config.display?.btnCancelVisible ?? true;
         const btnSaveVisible = config.display?.btnOkVisible ?? true;
         const modalDraggable = config.display?.modalDraggable ?? false;

From daf0b14a7e5717ba62534b40334d43c0389454c8 Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Thu, 17 Oct 2024 20:13:55 +0200
Subject: [PATCH 14/22] wc - Fix remove filter and update modal, clean code,
 #TASK-7033

Signed-off-by: gpveronica <veronica.zettagenomics@gmail.com>
---
 .../opencga-annotation-filter-modal.js        | 218 +++++++++++-------
 1 file changed, 129 insertions(+), 89 deletions(-)

diff --git a/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js b/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js
index 30d3efac8..665d3b2a8 100644
--- a/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js
+++ b/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js
@@ -83,34 +83,66 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
         }
     }
 
-    // It builds this.selectedVariables from the serialized string this.selectedVariablesText
+    /**
+     * It builds the two variables involved in the visualization of the annotation variables from the serialized string
+     * this.selectedVariablesText: (1) this.selectedVariables, (2) this.variableMap
+     */
     selectedVariablesTextObserver() {
         this.selectedVariables = {};
+        this.variableMap = {};
+
         if (this.selectedVariablesText) {
             const variables = this.selectedVariablesText.split(";");
+
             for (const v of variables) {
-                const [, variableSetId, variableId, operator, value] = [...v.matchAll(/(\w+):(\w+\.?\w+)(<=?|>=?|=)(\w+[\s+\w+]*)/g)][0];
-                this.selectedVariables[variableSetId] = {...this.selectedVariables[variableSetId] ?? {}, [variableId]: {operator, value}};
+                const match = [...v.matchAll(/(\w+):(\w+\.?\w+)(<=?|>=?|=)(\w+[\s+\w+]*)/g)][0];
+                if (!match) {
+                    // TODO 20241017: Handle potential match failures
+                    console.log(`Annotation variable ${v} failed at matching regular expression`);
+                } else {
+                    const [, variableSetId, variableId, operator, value] = match;
+                    // If variableId in this.selectedVariablesText is a map, the variableId key will follow the format:
+                    // - variableId.option: {operator: ">", value: "whatever"}
+                    const [variableIdClean, option] = variableId.split(".");
+
+                    // 1. Update the  variable this.selectedVariables
+                    this.selectedVariables[variableSetId] = {
+                        ...this.selectedVariables[variableSetId] ?? {},
+                        [variableId]: {operator, value},
+                    };
+
+                    // 2. Update the  variable this.variableMap if there are variables type MAP_* in the prepared query.
+                    if (option) {
+                        // Init variable options
+                        const variableOptions = this.variableMap[variableSetId]?.[variableIdClean] ?? [];
+                        // Add the option selected if not already pushed
+                        if (!variableOptions.includes(option)) {
+                            variableOptions.push(option);
+                        }
+                        // Update the variable this.variableMap
+                        this.variableMap[variableSetId] = {
+                            ...this.variableMap[variableSetId],
+                            [variableIdClean]: variableOptions
+                        };
+                    }
+                }
             }
         }
-        this.selectedVariables = {...this.selectedVariables};
     }
 
     /**
      * It serializes this.selectedVariables in a single string and fire the event
      */
-    // fire in case of selectedVariables change
     selectedVariablesSerializer() {
         const selected = [];
         for (const [variableSetId, variables] of Object.entries(this.selectedVariables)) {
-            // value is not defined iff an operator (<=, >=, ...) has been selected before setting the value. In that case we filter out that entry.
-            const singleVariableSetvariables = Object.entries(variables)
+            // Value is not defined iff an operator (<=, >=, ...) has been selected before setting the value. In that case we filter out that entry.
+            const singleVariableSetVariables = Object.entries(variables)
                 .filter(([, {value}]) => Boolean(value))
                 .map(([variableId, {operator, value}]) => `${variableSetId}:${variableId}${operator}${value}`)
                 .join(";");
-            selected.push(singleVariableSetvariables);
+            selected.push(singleVariableSetVariables);
         }
-        debugger
         LitUtils.dispatchCustomEvent(this, "annotationChange", selected.join(";"));
     }
 
@@ -218,7 +250,7 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
             Object.keys(this.selectedVariables[variableSetId])
                 .forEach(key => {
                     const [keyVariableId, keyOption] = key.split('.');
-                    if (!this.variableMap[variableSetId][keyVariableId]?.includes(keyOption)) {
+                    if (keyOption && !this.variableMap[variableSetId][keyVariableId]?.includes(keyOption)) {
                         delete this.selectedVariables[variableSetId][key];
                         this.selectedVariables = {...this.selectedVariables};
                         this.selectedVariablesSerializer();
@@ -237,31 +269,30 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
             case "OBJECT":
                 content = html`
                     ${variable?.variableSet?.length ? html`
-                            <div class="col-md-12">
-                                <label class="form-label fw-bold">
-                                    ${variable.id}
-                                </label>
-                                ${variable.variableSet.map(v => this.renderVariable(v, variableSet))}
-                            </div>
-                        ` : html`
-                            <div class="col-md-3">
-                                <label class="form-label fw-bold" for="${variable.id}Textarea">
-                                    <a tooltip-title="${variable.id}" tooltip-text="${variable.description}">
-                                        <i class="fa fa-info-circle" aria-hidden="true"></i>
-                                    </a> ${variable.id}
-                                </label>
-                                <textarea class="form-control" id="${variable.id}Textarea" rows="1"
-                                    data-variable-id="${variable.id}" data-variable-set-id="${variableSet.id}"
-                                    @input="${this.addInputFilter}" .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}">
-                                </textarea>
-                            </div>
-                        `}
+                        <div class="col-md-12">
+                            <label class="form-label fw-bold">
+                                ${variable.id}
+                            </label>
+                            ${variable.variableSet.map(v => this.renderVariable(v, variableSet))}
+                        </div>
+                    ` : html`
+                        <div class="col-md-3">
+                            <label class="form-label fw-bold" for="${variable.id}Textarea">
+                                <a tooltip-title="${variable.id}" tooltip-text="${variable.description}">
+                                    <i class="fa fa-info-circle" aria-hidden="true"></i>
+                                </a> ${variable.id}
+                            </label>
+                            <textarea class="form-control" id="${variable.id}Textarea" rows="1"
+                                data-variable-id="${variable.id}" data-variable-set-id="${variableSet.id}"
+                                @input="${this.addInputFilter}" .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}">
+                            </textarea>
+                        </div>
+                    `}
                     </div>`;
                 break;
             case "MAP_STRING":
-                // copy of MAP_INTEGER without operator select
+                // TODO Vero 20241017: Find an example and test
                 content = html`
-                    <!--<pre> \${JSON.stringify(variable)}</pre>-->
                     ${variable?.allowedKeys?.length ? html`
                         <div class="col-md-12">
                             <label class="form-label fw-bold">
@@ -296,10 +327,17 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                                     <i class="fa fa-info-circle" aria-hidden="true"></i>
                                 </a> ${variable.id}
                             </label>
-                            <input class="form-control" type="text" id="${variable.id}Input" placeholder="${variable.id}"
-                                data-variable-id="${variable.id}" data-variable-set-id="${variableSet.id}"
+                            <input
+                                class="form-control"
+                                type="text"
+                                id="${variable.id}Input"
+                                placeholder="${variable.id}"
+                                data-variable-id="${variable.id}"
+                                data-variable-set-id="${variableSet.id}"
                                 pattern="${variable?.attributes?.pattern ?? null}"
-                                aria-describedby="basic-addon1" @input="${this.addInputFilter}" .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
+                                aria-describedby="basic-addon1"
+                                @input="${this.addInputFilter}"
+                                .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
                         </div>`}
                     `;
                 break;
@@ -321,56 +359,61 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                                 @filterChange="${e => this.changeMap(e, variableSet.id, variable.id, e.detail.value)}">
                             </select-field-filter>
                             <div class="row">
-                                ${this.variableMap?.[variableSet.id]?.[variable.id]?.map(key => html`
-                                    <div class="col-md-3">
-                                        <label class="form-label fw-bold"  for="${variable.id}Input">
-                                            ${key}
-                                        </label>
-                                        <div class="row row-cols-lg-auto g-1 align-items-center">
-                                            <div class="col-6">
-                                                <select
-                                                    class="form-select"
-                                                    id="${variable.id}Input"
-                                                    data-variable-id="${variable.id + "." + key}"
-                                                    data-variable-set-id="${variableSet.id}"
-                                                    @change="${this.changeOperator}">
-                                                        <option value="=">=</option>
-                                                        <option value="<">&lt;</option>
-                                                        <option value="<=">&le;</option>
-                                                        <option value=">" selected>&gt;</option>
-                                                        <option value=">=">&ge;</option>
-                                                </select>
+                                ${
+                                    this.variableMap?.[variableSet.id]?.[variable.id]?.map(key => {
+                                        const operator = this.selectedVariables?.[variableSet.id]?.[variable.id + "." + key]?.operator || ">";
+                                        const value = this.selectedVariables?.[variableSet.id]?.[variable.id + "." + key]?.value || "";
+                                        return html`
+                                            <div class="col-md-3">
+                                                <label class="form-label fw-bold"  for="${variable.id}Input">
+                                                    ${key}
+                                                </label>
+                                                <div class="row row-cols-lg-auto g-1 align-items-center">
+                                                    <div class="col-6">
+                                                        <select
+                                                            class="form-select"
+                                                            id="${variable.id}Input"
+                                                            data-variable-id="${variable.id + "." + key}"
+                                                            data-variable-set-id="${variableSet.id}"
+                                                            @change="${this.changeOperator}">
+                                                                <option value="=">=</option>
+                                                                <option value="<">&lt;</option>
+                                                                <option value="<=">&le;</option>
+                                                                <option value=">" selected>&gt;</option>
+                                                                <option value=">=">&ge;</option>
+                                                        </select>
+                                                    </div>
+                                                    <div class="col-6">
+                                                        <input
+                                                            type="text"
+                                                            class="form-control"
+                                                            placeholder="${key}"
+                                                            .value="${value}"
+                                                            data-variable-id="${variable.id + "." + key}"
+                                                            data-variable-set-id="${variableSet.id}"
+                                                            data-operator="${operator}"
+                                                            @input="${this.addNumericFilter}"/>
+                                                    </div>
+                                                </div>
                                             </div>
-                                            <div class="col-6">
-                                                <input
-                                                    type="text"
-                                                    class="form-control"
-                                                    placeholder="${key}"
-                                                    data-variable-id="${variable.id + "." + key}"
-                                                    data-variable-set-id="${variableSet.id}"
-                                                    data-operator=">"
-                                                    @input="${this.addNumericFilter}"
-                                                    .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
-                                            </div>
-                                        </div>
-                                    </div>
-                                `)}
+                                        `;
+                                    })
+                                }
                             </div>
                         </div>
-                    ` :
-                    html`
-                            <div class="col-md-3">
-                                <label class="form-label fw-bold" for="${variable.id}Input">
-                                    <a tooltip-title="${variable.id}" tooltip-text="${variable.description}">
-                                        <i class="fa fa-info-circle" aria-hidden="true"></i>
-                                    </a> ${variable.id}
-                                </label>
-                                <input class="form-control" type="text" id="${variable.id}Input"
-                                    placeholder="${variable.id}" data-variable-id="${variable.id}" data-variable-set-id="${variableSet.id}"
-                                    pattern="${variable?.attributes?.pattern ?? null}" aria-describedby="basic-addon1" @input="${this.addInputFilter}"
-                                    .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
-                            </div>
-                        `}
+                    ` : html`
+                        <div class="col-md-3">
+                            <label class="form-label fw-bold" for="${variable.id}Input">
+                                <a tooltip-title="${variable.id}" tooltip-text="${variable.description}">
+                                    <i class="fa fa-info-circle" aria-hidden="true"></i>
+                                </a> ${variable.id}
+                            </label>
+                            <input class="form-control" type="text" id="${variable.id}Input"
+                                placeholder="${variable.id}" data-variable-id="${variable.id}" data-variable-set-id="${variableSet.id}"
+                                pattern="${variable?.attributes?.pattern ?? null}" aria-describedby="basic-addon1" @input="${this.addInputFilter}"
+                                .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
+                        </div>
+                    `}
                 `;
                 break;
             case "TEXT":
@@ -402,10 +445,10 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                             <div class="col-6">
                                 <select class="form-select" id="${variable.id}Select" data-variable-id="${variable.id}" data-variable-set-id="${variableSet.id}" @change="${this.changeOperator}">
                                     <option value="=">=</option>
-                                    <option value="&lt;">&lt;</option>
-                                    <option value="&le;">&le;</option>
-                                    <option value="&gt;" selected>&gt;</option>
-                                    <option value="&ge;">&ge;</option>
+                                    <option value="<">&lt;</option>
+                                    <option value="<=">&le;</option>
+                                    <option value=">" selected>&gt;</option>
+                                    <option value=">=">&ge;</option>
                                 </select>
                             </div>
                             <div class="col-6">
@@ -435,10 +478,7 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                         <select-field-filter
                             .data="${variable.allowedValues}"
                             .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"
-                            .config="${{
-                                multiple: !!variable.multiValue,
-                                liveSearch: false,
-                            }}"
+                            .config="${{multiple: !!variable.multiValue, liveSearch: false}}"
                             @filterChange="${e => this.addCategoricalFilter(variableSet.id, variable.id, e.detail.value)}">
                         </select-field-filter>
                     </div>

From 592594cc1d91018996cf9f3d28317f6a2ce21b0f Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Thu, 17 Oct 2024 22:10:15 +0200
Subject: [PATCH 15/22] wc - Fix remove filter and update modal, clean code,
 #TASK-7033

Signed-off-by: gpveronica <veronica.zettagenomics@gmail.com>
---
 .../opencga-annotation-filter-modal.js        | 46 ++++++++++---------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js b/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js
index 665d3b2a8..6fd25da0e 100644
--- a/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js
+++ b/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js
@@ -164,32 +164,35 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
     }
 
     changeOperator(e) {
+        debugger
         const {variableId, variableSetId} = e.target.dataset;
         const operator = e.target.value;
-        // TODO remove this line and use the this.selectedVariables[variableSetId][variableId].operator in addNumericFilter
-        $(`.annotation-modal input[type=text][data-variable-id="${variableId}"][data-variable-set-id="${variableSetId}"]`).attr("data-operator", e.target.value);
-        if (this.selectedVariables[variableSetId]?.[variableId]) {
-            this.selectedVariables[variableSetId][variableId] = {...this.selectedVariables[variableSetId][variableId], operator};
-        } else {
-            // the value hasn't been set yet
-            this.selectedVariables[variableSetId] = {...this.selectedVariables[variableSetId] ?? {}, [variableId]: {operator}};
-        }
+
+        this.selectedVariables[variableSetId] = {
+            ...this.selectedVariables[variableSetId] ?? {},
+            [variableId]: {
+                ...this.selectedVariables[variableSetId]?.[variableId], // Spread existing variableId if present
+                operator,
+            },
+        };
+
         this.selectedVariables = {...this.selectedVariables};
         this.selectedVariablesSerializer();
 
     }
 
     addNumericFilter(e) {
-        const {variableId, variableSetId, operator = ""} = e.target.dataset; // numericOperator is defined only for INTEGER and DOUBLE types
+        const {variableId, variableSetId} = e.target.dataset; // numericOperator is defined only for INTEGER and DOUBLE types
 
         const value = e.target.value.trim();
+        const operator = this.selectedVariables[variableSetId]?.[variableId]?.operator || ">";
+
         if (value) {
-            /* if (this.selectedVariables[variableSetId][variableId].operator) {
-               // TODO continue
-            }*/
-            this.selectedVariables[variableSetId] = {...this.selectedVariables[variableSetId] ?? {}, [variableId]: {value, operator}};
+            this.selectedVariables[variableSetId] = {
+                ...this.selectedVariables[variableSetId] ?? {},
+                [variableId]: {value, operator}
+            };
         } else {
-            debugger
             delete this.selectedVariables[variableSetId][variableId];
         }
         this.selectedVariables = {...this.selectedVariables};
@@ -252,13 +255,12 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                     const [keyVariableId, keyOption] = key.split('.');
                     if (keyOption && !this.variableMap[variableSetId][keyVariableId]?.includes(keyOption)) {
                         delete this.selectedVariables[variableSetId][key];
-                        this.selectedVariables = {...this.selectedVariables};
-                        this.selectedVariablesSerializer();
                     }
                 });
         }
         this.variableMap = {...this.variableMap};
-        // Get the ones that are in this.variableMap
+        this.selectedVariables = {...this.selectedVariables};
+        this.selectedVariablesSerializer();
         this.requestUpdate();
     }
 
@@ -361,8 +363,9 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                             <div class="row">
                                 ${
                                     this.variableMap?.[variableSet.id]?.[variable.id]?.map(key => {
-                                        const operator = this.selectedVariables?.[variableSet.id]?.[variable.id + "." + key]?.operator || ">";
+                                        const operator = this.selectedVariables?.[variableSet.id]?.[variable.id + "." + key]?.operator || "";
                                         const value = this.selectedVariables?.[variableSet.id]?.[variable.id + "." + key]?.value || "";
+                                        debugger
                                         return html`
                                             <div class="col-md-3">
                                                 <label class="form-label fw-bold"  for="${variable.id}Input">
@@ -376,9 +379,9 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                                                             data-variable-id="${variable.id + "." + key}"
                                                             data-variable-set-id="${variableSet.id}"
                                                             @change="${this.changeOperator}">
-                                                                <option value="=">=</option>
                                                                 <option value="<">&lt;</option>
                                                                 <option value="<=">&le;</option>
+                                                                <option value="=">&equals;</option>
                                                                 <option value=">" selected>&gt;</option>
                                                                 <option value=">=">&ge;</option>
                                                         </select>
@@ -391,7 +394,6 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                                                             .value="${value}"
                                                             data-variable-id="${variable.id + "." + key}"
                                                             data-variable-set-id="${variableSet.id}"
-                                                            data-operator="${operator}"
                                                             @input="${this.addNumericFilter}"/>
                                                     </div>
                                                 </div>
@@ -444,7 +446,7 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                         <div class="row row-cols-lg-auto g-1 align-items-center">
                             <div class="col-6">
                                 <select class="form-select" id="${variable.id}Select" data-variable-id="${variable.id}" data-variable-set-id="${variableSet.id}" @change="${this.changeOperator}">
-                                    <option value="=">=</option>
+                                    <option value="=">&equals;</option>
                                     <option value="<">&lt;</option>
                                     <option value="<=">&le;</option>
                                     <option value=">" selected>&gt;</option>
@@ -459,7 +461,7 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                                     placeholder="${variable.id}"
                                     pattern="${variable?.attributes?.pattern ?? null}"
                                     data-variable-id="${variable.id}"
-                                    data-variable-set-id="${variableSet.id}" data-operator="&gt;"
+                                    data-variable-set-id="${variableSet.id}"
                                     @input="${this.addNumericFilter}"
                                     .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
                             </div>

From e277892245afb884302e2c9d5414aa19c511cc77 Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Fri, 18 Oct 2024 17:26:06 +0200
Subject: [PATCH 16/22] wc - Fix maintain options, tiny improvement, tiny code
 clean, #TASK-7033

Signed-off-by: gpveronica <veronica.zettagenomics@gmail.com>
---
 .../opencga-annotation-filter-modal.js        | 137 +++++++++---------
 1 file changed, 70 insertions(+), 67 deletions(-)

diff --git a/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js b/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js
index 6fd25da0e..37f5b7500 100644
--- a/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js
+++ b/src/webcomponents/opencga/catalog/variableSets/opencga-annotation-filter-modal.js
@@ -27,7 +27,7 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
         super();
 
         // Set status and init private properties
-        this._init();
+        this.#init();
     }
 
     createRenderRoot() {
@@ -48,7 +48,7 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
         };
     }
 
-    _init() {
+    #init() {
         this._prefix = "oafm-" + UtilsNew.randomString(6) + "_";
         this.selectedVariables = {};
         this.selectedVariablesText = "";
@@ -84,47 +84,26 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
     }
 
     /**
-     * It builds the two variables involved in the visualization of the annotation variables from the serialized string
-     * this.selectedVariablesText: (1) this.selectedVariables, (2) this.variableMap
+     * It builds the variable this.selectedVariables from the serialized string this.selectedVariablesText
      */
     selectedVariablesTextObserver() {
         this.selectedVariables = {};
-        this.variableMap = {};
 
         if (this.selectedVariablesText) {
             const variables = this.selectedVariablesText.split(";");
 
             for (const v of variables) {
-                const match = [...v.matchAll(/(\w+):(\w+\.?\w+)(<=?|>=?|=)(\w+[\s+\w+]*)/g)][0];
+                const match = [...v.matchAll(/(\w+):(\w+\.?\w+)(<=?|>=?|=)(\w+(?:\s+\w+)*)/g)][0];
                 if (!match) {
                     // TODO 20241017: Handle potential match failures
                     console.log(`Annotation variable ${v} failed at matching regular expression`);
                 } else {
                     const [, variableSetId, variableId, operator, value] = match;
-                    // If variableId in this.selectedVariablesText is a map, the variableId key will follow the format:
-                    // - variableId.option: {operator: ">", value: "whatever"}
-                    const [variableIdClean, option] = variableId.split(".");
-
-                    // 1. Update the  variable this.selectedVariables
+                    // Update the  variable this.selectedVariables
                     this.selectedVariables[variableSetId] = {
                         ...this.selectedVariables[variableSetId] ?? {},
                         [variableId]: {operator, value},
                     };
-
-                    // 2. Update the  variable this.variableMap if there are variables type MAP_* in the prepared query.
-                    if (option) {
-                        // Init variable options
-                        const variableOptions = this.variableMap[variableSetId]?.[variableIdClean] ?? [];
-                        // Add the option selected if not already pushed
-                        if (!variableOptions.includes(option)) {
-                            variableOptions.push(option);
-                        }
-                        // Update the variable this.variableMap
-                        this.variableMap[variableSetId] = {
-                            ...this.variableMap[variableSetId],
-                            [variableIdClean]: variableOptions
-                        };
-                    }
                 }
             }
         }
@@ -135,6 +114,7 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
      */
     selectedVariablesSerializer() {
         const selected = [];
+
         for (const [variableSetId, variables] of Object.entries(this.selectedVariables)) {
             // Value is not defined iff an operator (<=, >=, ...) has been selected before setting the value. In that case we filter out that entry.
             const singleVariableSetVariables = Object.entries(variables)
@@ -143,6 +123,7 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                 .join(";");
             selected.push(singleVariableSetVariables);
         }
+
         LitUtils.dispatchCustomEvent(this, "annotationChange", selected.join(";"));
     }
 
@@ -164,7 +145,6 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
     }
 
     changeOperator(e) {
-        debugger
         const {variableId, variableSetId} = e.target.dataset;
         const operator = e.target.value;
 
@@ -178,7 +158,6 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
 
         this.selectedVariables = {...this.selectedVariables};
         this.selectedVariablesSerializer();
-
     }
 
     addNumericFilter(e) {
@@ -252,7 +231,7 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
         if (this.selectedVariables?.[variableSetId]) {
             Object.keys(this.selectedVariables[variableSetId])
                 .forEach(key => {
-                    const [keyVariableId, keyOption] = key.split('.');
+                    const [keyVariableId, keyOption] = key.split(".");
                     if (keyOption && !this.variableMap[variableSetId][keyVariableId]?.includes(keyOption)) {
                         delete this.selectedVariables[variableSetId][key];
                     }
@@ -265,7 +244,6 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
     }
 
     renderVariable(variable, variableSet) {
-        // console.log("going to render", variable, "of", variableSet.id)
         let content = "";
         switch (variable.type) {
             case "OBJECT":
@@ -281,7 +259,7 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                         <div class="col-md-3">
                             <label class="form-label fw-bold" for="${variable.id}Textarea">
                                 <a tooltip-title="${variable.id}" tooltip-text="${variable.description}">
-                                    <i class="fa fa-info-circle" aria-hidden="true"></i>
+                                    <i class="fa fa-info-circle me-2" aria-hidden="true"></i>
                                 </a> ${variable.id}
                             </label>
                             <textarea class="form-control" id="${variable.id}Textarea" rows="1"
@@ -290,7 +268,8 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                             </textarea>
                         </div>
                     `}
-                    </div>`;
+                    </div>
+                `;
                 break;
             case "MAP_STRING":
                 // TODO Vero 20241017: Find an example and test
@@ -299,7 +278,7 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                         <div class="col-md-12">
                             <label class="form-label fw-bold">
                                 <a tooltip-title="${variable.id}" tooltip-text="${variable.description}">
-                                    <i class="fa fa-info-circle" aria-hidden="true"></i>
+                                    <i class="fa fa-info-circle me-2" aria-hidden="true"></i>
                                 </a> ${variable.id}
                             </label>
                             <select-field-filter
@@ -313,11 +292,15 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                                 ${this.variableMap?.[variableSet.id]?.[variable.id]?.map(key => html`
                                     <div class="col-md-3">
                                         <label class="form-label fw-bold" for="${variable.id}Input">${key}</label>
-                                        <input class="form-control" type="text" placeholder="${key}" id="${variable.id}Input"
+                                        <input
+                                            class="form-control"
+                                            type="text"
+                                            placeholder="${key}"
+                                            id="${variable.id}Input"
                                             data-variable-id="${variable.id + "." + key}"
                                             data-variable-set-id="${variableSet.id}"
-                                            @input="${this.addInputFilter}"
-                                            .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
+                                            .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"
+                                            @input="${this.addInputFilter}"/>
                                     </div>
                                 `)}
                             </div>
@@ -326,7 +309,7 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                         <div class="col-md-3">
                             <label class="form-label fw-bold" for="${variable.id}Input">
                                 <a tooltip-title="${variable.id}" tooltip-text="${variable.description}">
-                                    <i class="fa fa-info-circle" aria-hidden="true"></i>
+                                    <i class="fa fa-info-circle me-2" aria-hidden="true"></i>
                                 </a> ${variable.id}
                             </label>
                             <input
@@ -338,20 +321,20 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                                 data-variable-set-id="${variableSet.id}"
                                 pattern="${variable?.attributes?.pattern ?? null}"
                                 aria-describedby="basic-addon1"
-                                @input="${this.addInputFilter}"
-                                .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
-                        </div>`}
-                    `;
+                                .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"
+                                @input="${this.addInputFilter}"/>
+                        </div>
+                    `}
+                `;
                 break;
             case "MAP_DOUBLE":
             case "MAP_INTEGER":
                 content = html`
-                    <!--<pre> \${JSON.stringify(variable)}</pre>-->
                     ${variable?.allowedKeys?.length ? html`
                         <div class="col-md-12">
                             <label class="form-label fw-bold">
                                 <a tooltip-title="${variable.id}" tooltip-text="${variable.description}">
-                                    <i class="fa fa-info-circle" aria-hidden="true"></i>
+                                    <i class="fa fa-info-circle me-2" aria-hidden="true"></i>
                                 </a> ${variable.id}
                             </label>
                             <select-field-filter
@@ -363,9 +346,8 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                             <div class="row">
                                 ${
                                     this.variableMap?.[variableSet.id]?.[variable.id]?.map(key => {
-                                        const operator = this.selectedVariables?.[variableSet.id]?.[variable.id + "." + key]?.operator || "";
+                                        const operator = this.selectedVariables?.[variableSet.id]?.[variable.id + "." + key]?.operator || ">";
                                         const value = this.selectedVariables?.[variableSet.id]?.[variable.id + "." + key]?.value || "";
-                                        debugger
                                         return html`
                                             <div class="col-md-3">
                                                 <label class="form-label fw-bold"  for="${variable.id}Input">
@@ -378,11 +360,12 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                                                             id="${variable.id}Input"
                                                             data-variable-id="${variable.id + "." + key}"
                                                             data-variable-set-id="${variableSet.id}"
+                                                            .value="${operator}"
                                                             @change="${this.changeOperator}">
                                                                 <option value="<">&lt;</option>
                                                                 <option value="<=">&le;</option>
                                                                 <option value="=">&equals;</option>
-                                                                <option value=">" selected>&gt;</option>
+                                                                <option value=">">&gt;</option>
                                                                 <option value=">=">&ge;</option>
                                                         </select>
                                                     </div>
@@ -391,9 +374,9 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                                                             type="text"
                                                             class="form-control"
                                                             placeholder="${key}"
-                                                            .value="${value}"
                                                             data-variable-id="${variable.id + "." + key}"
                                                             data-variable-set-id="${variableSet.id}"
+                                                            .value="${value}"
                                                             @input="${this.addNumericFilter}"/>
                                                     </div>
                                                 </div>
@@ -407,13 +390,20 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                         <div class="col-md-3">
                             <label class="form-label fw-bold" for="${variable.id}Input">
                                 <a tooltip-title="${variable.id}" tooltip-text="${variable.description}">
-                                    <i class="fa fa-info-circle" aria-hidden="true"></i>
+                                    <i class="fa fa-info-circle me-2" aria-hidden="true"></i>
                                 </a> ${variable.id}
                             </label>
-                            <input class="form-control" type="text" id="${variable.id}Input"
-                                placeholder="${variable.id}" data-variable-id="${variable.id}" data-variable-set-id="${variableSet.id}"
-                                pattern="${variable?.attributes?.pattern ?? null}" aria-describedby="basic-addon1" @input="${this.addInputFilter}"
-                                .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
+                            <input
+                                class="form-control"
+                                type="text" id="${variable.id}Input"
+                                placeholder="${variable.id}"
+                                data-variable-id="${variable.id}"
+                                data-variable-set-id="${variableSet.id}"
+                                pattern="${variable?.attributes?.pattern ?? null}"
+                                aria-describedby="basic-addon1"
+                                .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"
+                                @input="${this.addInputFilter}"/>
+
                         </div>
                     `}
                 `;
@@ -424,14 +414,22 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                     <div class="col-md-3">
                         <label class="form-label fw-bold" for="${variable.id}Input">
                             <a tooltip-title="${variable.id}" tooltip-text="${variable.description}">
-                                <i class="fa fa-info-circle" aria-hidden="true"></i>
+                                <i class="fa fa-info-circle me-2" aria-hidden="true"></i>
                             </a> ${variable.id}
                         </label>
-                        <input type="text" class="form-control" id="${variable.id}Input"
-                            placeholder="${variable.id}" data-variable-id="${variable.id}" data-variable-set-id="${variableSet.id}"
-                            pattern="${variable?.attributes?.pattern ?? null}" aria-describedby="basic-addon1" @input="${this.addInputFilter}"
-                            .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"/>
-                    </div>`;
+                        <input
+                            type="text"
+                            class="form-control"
+                            id="${variable.id}Input"
+                            placeholder="${variable.id}"
+                            data-variable-id="${variable.id}"
+                            data-variable-set-id="${variableSet.id}"
+                            pattern="${variable?.attributes?.pattern ?? null}"
+                            aria-describedby="basic-addon1"
+                            .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"
+                            @input="${this.addInputFilter}"/>
+                    </div>
+                `;
                 break;
             case "NUMERIC":
             case "INTEGER":
@@ -440,17 +438,22 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                     <div class="col-md-3">
                         <label class="form-label fw-bold" for="${variable.id}Select ${variable.id}Input">
                             <a tooltip-title="${variable.id}" tooltip-text="${variable.description}">
-                                <i class="fa fa-info-circle" aria-hidden="true"></i>
+                                <i class="fa fa-info-circle me-2" aria-hidden="true"></i>
                             </a> ${variable.id}
                         </label>
                         <div class="row row-cols-lg-auto g-1 align-items-center">
                             <div class="col-6">
-                                <select class="form-select" id="${variable.id}Select" data-variable-id="${variable.id}" data-variable-set-id="${variableSet.id}" @change="${this.changeOperator}">
-                                    <option value="=">&equals;</option>
-                                    <option value="<">&lt;</option>
-                                    <option value="<=">&le;</option>
-                                    <option value=">" selected>&gt;</option>
-                                    <option value=">=">&ge;</option>
+                                <select
+                                    class="form-select"
+                                    id="${variable.id}Select"
+                                    data-variable-id="${variable.id}"
+                                    data-variable-set-id="${variableSet.id}"
+                                    @change="${this.changeOperator}">
+                                        <option value="=">&equals;</option>
+                                        <option value="<">&lt;</option>
+                                        <option value="<=">&le;</option>
+                                        <option value=">" selected>&gt;</option>
+                                        <option value=">=">&ge;</option>
                                 </select>
                             </div>
                             <div class="col-6">
@@ -474,7 +477,7 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                     <div class="col-md-3">
                         <label class="form-label fw-bold">
                             <a tooltip-title="${variable.id}" tooltip-text="${variable.description}">
-                                <i class="fa fa-info-circle" aria-hidden="true"></i>
+                                <i class="fa fa-info-circle me-2" aria-hidden="true"></i>
                             </a> ${variable.id}
                         </label>
                         <select-field-filter
@@ -492,7 +495,7 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
                     <div class="row row-cols-lg-auto g-1 align-items-center">
                         <label class="form-check-label fw-bold" for="${this._prefix}${variable.id}yes ${this._prefix}${variable.id}no">
                             <a tooltip-title="${variable.id}" tooltip-text="${variable.description}">
-                                <i class="fa fa-info-circle" aria-hidden="true"></i>
+                                <i class="fa fa-info-circle me-2" aria-hidden="true"></i>
                             </a> ${variable.id}
                         </label>
                         <div class="form-control">

From 517d2f159b1f4def79d47a3be8cbf4e75975de9b Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Fri, 18 Oct 2024 19:01:46 +0200
Subject: [PATCH 17/22] wc - Tiny fix, #TASK-7033

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

diff --git a/src/webcomponents/commons/modal/modal-utils.js b/src/webcomponents/commons/modal/modal-utils.js
index 4cde87899..f9d0a1b77 100644
--- a/src/webcomponents/commons/modal/modal-utils.js
+++ b/src/webcomponents/commons/modal/modal-utils.js
@@ -25,7 +25,7 @@ export default class ModalUtils {
         const modalTitleStyle = config.display?.modalTitleStyle ?? "";
         const btnsVisible = config.display?.modalbtnsVisible ?? false;
         const btnCancelVisible = config.display?.btnCancelVisible ?? true;
-        const btnSaveVisible = config.display?.btnOkVisible ?? true;
+        const btnSaveVisible = config.display?.btnSaveVisible ?? true;
         const modalDraggable = config.display?.modalDraggable ?? false;
         const modalCyDataName = config.display?.modalCyDataName ?? "";
 

From 6897ce25443270c2ac5cfcb6e42648d0e76460dc Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Mon, 21 Oct 2024 13:56:15 +0200
Subject: [PATCH 18/22] wc - Fix text-danger in data-form error messages
 #TASK-6759

Signed-off-by: gpveronica <veronica.zettagenomics@gmail.com>
---
 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 7177f8905..0af472e5b 100644
--- a/src/webcomponents/commons/forms/data-form.js
+++ b/src/webcomponents/commons/forms/data-form.js
@@ -807,7 +807,7 @@ export default class DataForm extends LitElement {
         }
 
         return html`
-            <div class="${hasErrorMessages ? "text-danger" : nothing}">
+            <div>
                 <div data-testid="${this.config.test?.active ? `${this.config.test.prefix || "test"}-${element.field}` : nothing}">
                     ${contentHtml}
                 </div>
@@ -815,7 +815,7 @@ export default class DataForm extends LitElement {
                     <div class="form-text">${helpMessage}</div>
                 ` : nothing}
                 ${hasErrorMessages ? html`
-                    <div class="d-flex mt-2 text-body-secondary">
+                    <div class="d-flex mt-2 text-danger">
                         <div class="me-2">
                             <i class="${this._getErrorIcon(element)}"></i>
                         </div>

From 1f441291e38c0a796ebf6823a3414f8045492909 Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Mon, 21 Oct 2024 15:01:45 +0200
Subject: [PATCH 19/22] wc - Maintain study or project input on submit
 operation, #TASK-6930

Signed-off-by: gpveronica <veronica.zettagenomics@gmail.com>
---
 src/webcomponents/study/admin/variant/operations-admin.js  | 7 +++----
 .../operation/variant-annotation-index-operation.js        | 1 +
 .../variant/operation/variant-index-operation.js           | 1 +
 .../variant-secondary-annotation-index-operation.js        | 1 +
 .../operation/variant-secondary-sample-index-operation.js  | 1 +
 5 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/webcomponents/study/admin/variant/operations-admin.js b/src/webcomponents/study/admin/variant/operations-admin.js
index 0744dba60..d9d1ecf54 100644
--- a/src/webcomponents/study/admin/variant/operations-admin.js
+++ b/src/webcomponents/study/admin/variant/operations-admin.js
@@ -194,7 +194,7 @@ export default class OperationsAdmin extends LitElement {
                                 }
                                 return html`
                                     <variant-annotation-index-operation
-                                        .toolParams="${{project: opencgaSession.project.id}}"
+                                        .toolParams="${{project: opencgaSession.project.fqn}}"
                                         .opencgaSession="${opencgaSession}">
                                     </variant-annotation-index-operation>
                                 `;
@@ -217,7 +217,7 @@ export default class OperationsAdmin extends LitElement {
                                 }
                                 return html`
                                     <variant-secondary-annotation-index-operation
-                                        .toolParams="${{project: opencgaSession.project.id}}"
+                                        .toolParams="${{project: opencgaSession.project.fqn}}"
                                         .opencgaSession="${opencgaSession}">
                                     </variant-secondary-annotation-index-operation>
                                 `;
@@ -265,10 +265,9 @@ export default class OperationsAdmin extends LitElement {
                             visibility: "private",
                             type: "navitem",
                             render: (opencgaSession, study) => {
-                                // CAUTION: no .fqn? in toolParams property?
                                 return html`
                                     <variant-secondary-sample-index-operation
-                                        .toolParams="${{study: study.id}}"
+                                        .toolParams="${{study: study.fqn}}"
                                         .opencgaSession="${opencgaSession}">
                                     </variant-secondary-sample-index-operation>
                                 `;
diff --git a/src/webcomponents/variant/operation/variant-annotation-index-operation.js b/src/webcomponents/variant/operation/variant-annotation-index-operation.js
index 526703cf1..f736f47b8 100644
--- a/src/webcomponents/variant/operation/variant-annotation-index-operation.js
+++ b/src/webcomponents/variant/operation/variant-annotation-index-operation.js
@@ -118,6 +118,7 @@ export default class VariantAnnotationIndexOperation extends LitElement {
     onClear() {
         this.toolParams = {
             ...UtilsNew.objectClone(this.DEFAULT_TOOLPARAMS),
+            project: this.toolParams.project || "",
         };
         this.config = this.getDefaultConfig();
     }
diff --git a/src/webcomponents/variant/operation/variant-index-operation.js b/src/webcomponents/variant/operation/variant-index-operation.js
index 272a80b28..0f06887dc 100644
--- a/src/webcomponents/variant/operation/variant-index-operation.js
+++ b/src/webcomponents/variant/operation/variant-index-operation.js
@@ -122,6 +122,7 @@ export default class VariantIndexOperation extends LitElement {
     onClear() {
         this.toolParams = {
             ...UtilsNew.objectClone(this.DEFAULT_TOOLPARAMS),
+            study: this.toolParams.study || "",
         };
         this.config = this.getDefaultConfig();
     }
diff --git a/src/webcomponents/variant/operation/variant-secondary-annotation-index-operation.js b/src/webcomponents/variant/operation/variant-secondary-annotation-index-operation.js
index 282ee38a3..d8bf74c2c 100644
--- a/src/webcomponents/variant/operation/variant-secondary-annotation-index-operation.js
+++ b/src/webcomponents/variant/operation/variant-secondary-annotation-index-operation.js
@@ -118,6 +118,7 @@ export default class VariantSecondaryAnnotationIndexOperation extends LitElement
     onClear() {
         this.toolParams = {
             ...UtilsNew.objectClone(this.DEFAULT_TOOLPARAMS),
+            project: this.toolParams.project || "",
         };
         this.config = this.getDefaultConfig();
     }
diff --git a/src/webcomponents/variant/operation/variant-secondary-sample-index-operation.js b/src/webcomponents/variant/operation/variant-secondary-sample-index-operation.js
index 14c82bc04..eb0f06105 100644
--- a/src/webcomponents/variant/operation/variant-secondary-sample-index-operation.js
+++ b/src/webcomponents/variant/operation/variant-secondary-sample-index-operation.js
@@ -125,6 +125,7 @@ export default class VariantSecondarySampleIndexOperation extends LitElement {
     onClear() {
         this.toolParams = {
             ...UtilsNew.objectClone(this.DEFAULT_TOOLPARAMS),
+            study: this.toolParams.study || "",
         };
         this.config = this.getDefaultConfig();
     }

From bd98273f762eefbf266d6390043a62fbabc356a6 Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Mon, 21 Oct 2024 15:04:44 +0200
Subject: [PATCH 20/22] wc - Add parameter cohort and maintain study or project
 input on submit operation, #TASK-6930

Signed-off-by: gpveronica <veronica.zettagenomics@gmail.com>
---
 .../variant-stats-index-operation.js          | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/webcomponents/variant/operation/variant-stats-index-operation.js b/src/webcomponents/variant/operation/variant-stats-index-operation.js
index e164d2ad8..a93b40d8a 100644
--- a/src/webcomponents/variant/operation/variant-stats-index-operation.js
+++ b/src/webcomponents/variant/operation/variant-stats-index-operation.js
@@ -56,7 +56,6 @@ export default class VariantStatsIndexOperation extends LitElement {
             ...UtilsNew.objectClone(this.DEFAULT_TOOLPARAMS),
         };
 
-        this.study = "";
         this.config = this.getDefaultConfig();
     }
 
@@ -84,6 +83,11 @@ export default class VariantStatsIndexOperation extends LitElement {
                 message: "Study is a mandatory parameter, please select one."
             };
         }
+        if (!this.toolParams.cohort) {
+            return {
+                message: "Cohort IDs is a mandatory parameter, please select some cohorts."
+            };
+        }
         return null;
     }
 
@@ -98,6 +102,7 @@ export default class VariantStatsIndexOperation extends LitElement {
 
     onSubmit() {
         const toolParams = {
+            cohort: this.toolParams.cohort?.split(",") || [],
             overwriteStats: this.toolParams.overwriteStats || false,
             resume: this.toolParams.resume || false,
         };
@@ -116,6 +121,7 @@ export default class VariantStatsIndexOperation extends LitElement {
     onClear() {
         this.toolParams = {
             ...UtilsNew.objectClone(this.DEFAULT_TOOLPARAMS),
+            study: this.toolParams.study || "",
         };
         this.config = this.getDefaultConfig();
     }
@@ -160,6 +166,22 @@ export default class VariantStatsIndexOperation extends LitElement {
             {
                 title: "Configuration Parameters",
                 elements: [
+                    {
+                        title: "Cohort IDs",
+                        type: "custom",
+                        required: true,
+                        display: {
+                            render: toolParams => html `
+                                <catalog-search-autocomplete
+                                    .value="${toolParams?.cohort}"
+                                    .resource="${"COHORT"}"
+                                    .opencgaSession="${this.opencgaSession}"
+                                    .config="${{multiple: true}}"
+                                    @filterChange="${e => this.onFieldChange(e, "cohort")}">
+                                </catalog-search-autocomplete>
+                            `,
+                        },
+                    },
                     {
                         title: "Overwrite Stats",
                         field: "overwriteStats",

From 1da8721688605f80d5e4eb4220d0ea16516d43d1 Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Mon, 21 Oct 2024 15:06:18 +0200
Subject: [PATCH 21/22] wc - Tiny fix in label, #TASK-6930

Signed-off-by: gpveronica <veronica.zettagenomics@gmail.com>
---
 .../operation/variant-secondary-sample-index-operation.js       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webcomponents/variant/operation/variant-secondary-sample-index-operation.js b/src/webcomponents/variant/operation/variant-secondary-sample-index-operation.js
index eb0f06105..25a9eb2b2 100644
--- a/src/webcomponents/variant/operation/variant-secondary-sample-index-operation.js
+++ b/src/webcomponents/variant/operation/variant-secondary-sample-index-operation.js
@@ -169,7 +169,7 @@ export default class VariantSecondarySampleIndexOperation extends LitElement {
                 title: "Configuration Parameters",
                 elements: [
                     {
-                        title: "Sample",
+                        title: "Sample IDs",
                         type: "custom",
                         required: true,
                         display: {

From f1c4e35cbbdbbe702c05e228f9bfa7b320e6ac37 Mon Sep 17 00:00:00 2001
From: gpveronica <veronica.zettagenomics@gmail.com>
Date: Tue, 22 Oct 2024 14:41:25 +0200
Subject: [PATCH 22/22] wc - Manage event onClear in grid settings, #TASK-4846

Signed-off-by: gpveronica <veronica.zettagenomics@gmail.com>
---
 src/webcomponents/commons/catalog-browser-grid-config.js | 9 ++++++++-
 .../interpretation/variant-interpreter-grid-config.js    | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/webcomponents/commons/catalog-browser-grid-config.js b/src/webcomponents/commons/catalog-browser-grid-config.js
index 717a42b06..def7090a5 100644
--- a/src/webcomponents/commons/catalog-browser-grid-config.js
+++ b/src/webcomponents/commons/catalog-browser-grid-config.js
@@ -139,6 +139,11 @@ export default class CatalogBrowserGridConfig extends LitElement {
         LitUtils.dispatchCustomEvent(this, "configChange", this.config);
     }
 
+    onClear() {
+        this.onConfigObserver();
+        this.requestUpdate();
+    }
+
     async onSubmit() {
         try {
             // Update user configuration
@@ -168,6 +173,7 @@ export default class CatalogBrowserGridConfig extends LitElement {
                 .data="${this.config}"
                 .config="${this.getConfigForm()}"
                 @fieldChange="${e => this.onFieldChange(e)}"
+                @clear="${e=>this.onClear(e)}"
                 @submit="${e => this.onSubmit(e)}">
             </data-form>
         `;
@@ -187,7 +193,8 @@ export default class CatalogBrowserGridConfig extends LitElement {
                 titleAlign: "left",
                 titleWidth: 4,
                 defaultLayout: "vertical",
-                buttonsVisible: true
+                buttonsVisible: true,
+                buttonClearText: "Discard",
             },
             sections: [
                 {
diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-grid-config.js b/src/webcomponents/variant/interpretation/variant-interpreter-grid-config.js
index 560bd6485..85cd39f62 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-grid-config.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-grid-config.js
@@ -149,6 +149,11 @@ export default class VariantInterpreterGridConfig extends LitElement {
         LitUtils.dispatchCustomEvent(this, "configChange", this.config);
     }
 
+    onClear() {
+        this.onConfigObserver();
+        this.requestUpdate();
+    }
+
     async onSubmit() {
         // const newGridConfig = {...this.config};
         //
@@ -192,6 +197,7 @@ export default class VariantInterpreterGridConfig extends LitElement {
                 .data="${this.config}"
                 .config="${this.getConfigForm()}"
                 @fieldChange="${e => this.onFieldChange(e)}"
+                @clear="${e=>this.onClear(e)}"
                 @submit="${e => this.onSubmit(e)}">
             </data-form>
         `;
@@ -221,7 +227,8 @@ export default class VariantInterpreterGridConfig extends LitElement {
                 titleAlign: "left",
                 titleWidth: 4,
                 defaultLayout: "vertical",
-                buttonsVisible: true
+                buttonsVisible: true,
+                buttonClearText: "Discard",
             },
             sections: [
                 {