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>
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}"
diff --git a/src/webcomponents/commons/layouts/custom-navbar.js b/src/webcomponents/commons/layouts/custom-navbar.js
index 34fdecec5..18e545dfa 100644
--- a/src/webcomponents/commons/layouts/custom-navbar.js
+++ b/src/webcomponents/commons/layouts/custom-navbar.js
@@ -240,7 +240,7 @@ export default class CustomNavBar extends LitElement {
                         <div class="navbar-brand d-flex justify-content-center align-items-center me-n1" style="height: 2.5rem;">
                             <!-- Application logo provided -->
                             ${this.app?.logo ? html`
-                                <img class="d-inline-block" src="${this.app?.logo}" alt="App logo">
+                                <img class="d-inline-block" src="${this.app?.logo}" alt="App logo" style="height:1.3em;">
                             ` : nothing}
                             <!-- No application logo provided -->
                             ${!this.app?.logo && this.app?.name ? html`
diff --git a/src/webcomponents/commons/modal/modal-utils.js b/src/webcomponents/commons/modal/modal-utils.js
index 191d5c43e..f9d0a1b77 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 ?? false;
+        const btnCancelVisible = config.display?.btnCancelVisible ?? true;
+        const btnSaveVisible = config.display?.btnSaveVisible ?? true;
+        const modalDraggable = config.display?.modalDraggable ?? false;
+        const modalCyDataName = config.display?.modalCyDataName ?? "";
 
         return html`
             <div
@@ -38,7 +40,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)}
@@ -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>
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>
diff --git a/src/webcomponents/job/job-monitor.js b/src/webcomponents/job/job-monitor.js
index 54a247f48..0cfcf0f58 100644
--- a/src/webcomponents/job/job-monitor.js
+++ b/src/webcomponents/job/job-monitor.js
@@ -46,8 +46,8 @@ export class JobMonitor extends LitElement {
     #init() {
         this.JOBS_TYPES = {
             ALL: {
-                title: "All",
-                jobsTypes: [],
+                title: "Latest",
+                jobsTypes: ["PENDING", "QUEUED", "RUNNING", "DONE", "ERROR", "ABORTED"],
             },
             RUNNING: {
                 title: "Running",
@@ -59,9 +59,9 @@ export class JobMonitor extends LitElement {
             },
         };
         this._interval = -1;
-        this._jobs = [];
-        this._addedJobs= new Set(); // Used for displaying the NEW label in each new job
-        this._updatedJobsCount = 0; // To store the number of changes (new jobs, state changes)
+        this._jobs = null;
+        this._latestJobs = []; // To store the latest updated jobs
+        this._updatedJobs= new Set(); // Used for displaying the NEW label in each new job
         this._visibleJobsType = "ALL"; // Current visible jobs types (one of JOB_TYPES)
         this._config = this.getDefaultConfig();
     }
@@ -74,9 +74,9 @@ export class JobMonitor extends LitElement {
 
     update(changedProperties) {
         if (changedProperties.has("opencgaSession")) {
-            this._jobs = [];
-            this._updatedJobsCount = 0;
-            this._addedJobs = new Set();
+            this._jobs = null;
+            this._latestJobs = [];
+            this._updatedJobs = new Set();
             this._visibleJobsType = "ALL";
         }
         if (changedProperties.has("config")) {
@@ -111,22 +111,28 @@ export class JobMonitor extends LitElement {
     }
 
     fetchLastJobs() {
-        this.opencgaSession.opencgaClient.jobs()
-            .search({
-                study: this.opencgaSession.study.fqn,
-                internalStatus: "PENDING,QUEUED,RUNNING,DONE,ERROR,ABORTED",
-                limit: this._config.limit || 10,
-                sort: "creationDate",
-                include: "id,internal.status,tool,creationDate",
-                order: -1,
-            })
-            .then(response => {
-                const newJobsList = response?.responses?.[0]?.results || [];
+        // generate the list of job types to fetch. Note that if the visible jobs type is "ALL",
+        // we will prevent requesting for the same job types multiple times
+        const jobsTypesToFetch = Array.from(new Set(["ALL", this._visibleJobsType]));
+        const jobsPromises = jobsTypesToFetch.map(jobType => {
+            return this.opencgaSession.opencgaClient.jobs()
+                .search({
+                    study: this.opencgaSession.study.fqn,
+                    internalStatus: this.JOBS_TYPES[jobType].jobsTypes.join(","),
+                    limit: this._config.limit || 10,
+                    sort: "creationDate",
+                    include: "id,internal.status,tool,creationDate",
+                    order: -1,
+                });
+        });
+        Promise.all(jobsPromises)
+            .then(responses => {
+                const newJobsList = responses[0]?.responses?.[0]?.results || [];
                 // 1. Process the list of new jobs returned by OpenCGA
                 // Note: we check if the previous list of jobs is not empty, to prevent marking all jobs as new jobs
-                if (this._jobs.length > 0) {
+                if (this._latestJobs?.length > 0) {
                     newJobsList.forEach(job => {
-                        const oldJob = this._jobs.find(j => j.id === job.id);
+                        const oldJob = this._latestJobs.find(j => j.id === job.id);
                         if (oldJob) {
                             const statusId = job?.internal?.status?.id || "-";
                             const oldStatusId = oldJob?.internal?.status?.id || "-";
@@ -135,20 +141,20 @@ export class JobMonitor extends LitElement {
                                 NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_INFO, {
                                     message: `The job <b>${job?.id}</b> has now status ${statusId}.`,
                                 });
-                                this._updatedJobsCount = this._updatedJobsCount + 1;
                             }
                         } else {
                             // This is a new job, so we display an info notification to the user
                             NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_INFO, {
                                 message: `The job <b>${job?.id}</b> has been added.`,
                             });
-                            this._updatedJobsCount = this._updatedJobsCount + 1;
-                            this._addedJobs.add(job.id);
+                            this._updatedJobs.add(job.id);
                         }
                     });
                 }
                 // 2. Save the new jobs list
-                this._jobs = newJobsList;
+                this._latestJobs = newJobsList;
+                // 3. save the visible jobs list
+                this._jobs = responses[1]?.responses?.[0]?.results || newJobsList;
                 this.requestUpdate();
             })
             .catch(response => {
@@ -162,12 +168,16 @@ export class JobMonitor extends LitElement {
 
     onRefresh(event) {
         event.stopPropagation();
+        this._jobs = null;
         this.fetchLastJobs();
+        this.requestUpdate();
     }
 
     onJobTypeChange(event, newJobType) {
         event.stopPropagation();
+        this._jobs = null;
         this._visibleJobsType = newJobType;
+        this.fetchLastJobs();
         this.requestUpdate();
     }
 
@@ -180,12 +190,9 @@ export class JobMonitor extends LitElement {
     }
 
     renderVisibleJobsList() {
-        // Get the list of visible jobs with the selected type
-        const visibleJobs = this._jobs.filter(job => {
-            return this._visibleJobsType === "ALL" || this.JOBS_TYPES[this._visibleJobsType].jobsTypes.includes(job?.internal?.status?.id);
-        });
-        if (visibleJobs.length > 0) {
-            return visibleJobs.map(job => html`
+        // Display jobs list
+        if (this._jobs && this._jobs.length > 0) {
+            return this._jobs.map(job => html`
                 <li>
                     <a href="${this.getJobUrl(job.id)}" class="dropdown-item border-top">
                         <div class="d-flex align-items-center overflow-hidden">
@@ -193,7 +200,7 @@ export class JobMonitor extends LitElement {
                                 <i class="text-secondary fas fa-rocket"></i>
                             </div>
                             <div class="flex-grow-1 ms-3">
-                                ${this._addedJobs.has(job?.id) ? html`
+                                ${this._updatedJobs.has(job?.id) ? html`
                                     <span class="badge bg-primary rounded-pill">NEW</span>
                                 ` : nothing}
                                 <div class="mt-0 text-truncate" style="max-width:275px">
@@ -212,11 +219,21 @@ export class JobMonitor extends LitElement {
                     </a>
                 </li>
             `);
+        } else if (this._jobs && this._jobs.length === 0) {
+            return html`
+                <li>
+                    <div class="d-flex flex-column justify-content-center align-items-center py-3 gap-1">
+                        <i class="fas fa-tasks"></i>
+                        <div class="fw-bold small">No jobs on this category</div>
+                    </div>
+                </li>
+            `;
         } else {
             return html`
                 <li>
-                    <div class="pt-2 pb-1 text-center fw-bold border-top">
-                        No jobs on this category.
+                    <div class="d-flex flex-column justify-content-center align-items-center py-3 gap-1">
+                        <i class="fas fa-sync-alt anim-rotate"></i>
+                        <div class="fw-bold small">Loading jobs...</div>
                     </div>
                 </li>
             `;
@@ -231,9 +248,9 @@ export class JobMonitor extends LitElement {
                         <div class="dropdown-button-icon">
                             <i class="fas fa-rocket"></i>
                         </div>
-                        ${this._updatedJobsCount > 0 ? html`
+                        ${this._updatedJobs.size > 0 ? html`
                             <span class="position-absolute top-0 start-100 mt-1 translate-middle badge bg-danger rounded-pill">
-                                ${this._updatedJobsCount}
+                                ${this._updatedJobs.size}
                             </span>
                         ` : nothing}
                     </a>
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..37f5b7500 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 {
@@ -25,7 +27,7 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
         super();
 
         // Set status and init private properties
-        this._init();
+        this.#init();
     }
 
     createRenderRoot() {
@@ -43,148 +45,132 @@ export default class OpencgaAnnotationFilterModal extends LitElement {
             selectedVariablesText: {
                 type: String
             },
-            config: {
-                type: Object
-            }
         };
     }
 
-    _init() {
+    #init() {
         this._prefix = "oafm-" + UtilsNew.randomString(6) + "_";
         this.selectedVariables = {};
         this.selectedVariablesText = "";
         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);
+    }
+
+    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
+     * It builds the variable this.selectedVariables from the serialized string this.selectedVariablesText
      */
-    async selectedVariablesTextObserver() {
+    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];
-                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;
+                    // Update the  variable this.selectedVariables
+                    this.selectedVariables[variableSetId] = {
+                        ...this.selectedVariables[variableSetId] ?? {},
+                        [variableId]: {operator, value},
+                    };
+                }
             }
-
         }
-        this.selectedVariables = {...this.selectedVariables};
-        this.requestUpdate();
-
     }
 
     /**
      * 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);
-        }
-        const event = new CustomEvent("annotationChange", {
-            detail: {
-                value: selected.join(";")
-            }
-        });
-        this.dispatchEvent(event);
-    }
-
-    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);
-                });
+            selected.push(singleVariableSetVariables);
         }
 
+        LitUtils.dispatchCustomEvent(this, "annotationChange", selected.join(";"));
     }
 
-    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) {
         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 {
             delete this.selectedVariables[variableSetId][variableId];
         }
@@ -197,7 +183,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,149 +211,176 @@ 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();
     }
 
-    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 (keyOption && !this.variableMap[variableSetId][keyVariableId]?.includes(keyOption)) {
+                        delete this.selectedVariables[variableSetId][key];
+                    }
+                });
+        }
         this.variableMap = {...this.variableMap};
+        this.selectedVariables = {...this.selectedVariables};
+        this.selectedVariablesSerializer();
         this.requestUpdate();
     }
 
     renderVariable(variable, variableSet) {
-        // console.log("going to render", variable, "of", variableSet.id)
         let content = "";
         switch (variable.type) {
             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>`;
+                        <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 me-2" 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">
                                 <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
                                 .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}"
+                                            .value="${this.selectedVariables?.[variableSet.id]?.[variable.id]?.value || ""}"
+                                            @input="${this.addInputFilter}"/>
+                                    </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>
+                                    <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}"
+                            <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>`}
-                    `;
+                                aria-describedby="basic-addon1"
+                                .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
                                 .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;</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 || ""}"/>
+                                ${
+                                    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}"
+                                                            .value="${operator}"
+                                                            @change="${this.changeOperator}">
+                                                                <option value="<">&lt;</option>
+                                                                <option value="<=">&le;</option>
+                                                                <option value="=">&equals;</option>
+                                                                <option value=">">&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}"
+                                                            .value="${value}"
+                                                            @input="${this.addNumericFilter}"/>
+                                                    </div>
                                                 </div>
                                             </div>
-                                        </div>
                                         `;
                                     })
                                 }
@@ -360,17 +390,23 @@ 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 || ""}"/>
-                        </div>`}
-
+                            <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>
+                    `}
+                `;
                 break;
             case "TEXT":
             case "STRING":
@@ -378,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":
@@ -394,32 +438,56 @@ 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="=">=</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">
-                                <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}"
+                                    @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 me-2" 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`
@@ -427,20 +495,35 @@ 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">
-                            <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 +531,63 @@ 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",
+                modalbtnsVisible: true,
+                btnCancelVisible: false,
+                okButtonText: "OK",
+            },
+            render: () => this.renderBody(),
+        })}
+        ` : html`
+            <p>No variableSets defined in the study</p>
         `;
     }
 
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/annotation/cellbase-variant-annotation-summary.js b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js
index 4e3b9c2d0..7f8ab6303 100644
--- a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js
+++ b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js
@@ -17,13 +17,12 @@
 import {LitElement, html, nothing} from "lit";
 import UtilsNew from "../../../core/utils-new.js";
 import BioinfoUtils from "../../../core/bioinfo/bioinfo-utils.js";
-import Types from "../../commons/types.js";
 
 export default class CellbaseVariantAnnotationSummary extends LitElement {
 
     constructor() {
         super();
-        this._init();
+        this.#init();
     }
 
     createRenderRoot() {
@@ -50,27 +49,29 @@ export default class CellbaseVariantAnnotationSummary extends LitElement {
         };
     }
 
-    _init() {
-        this._prefix = UtilsNew.randomString(8);
-        this.variantAnnotation = {};
+    #init() {
+        this.variantAnnotation = null;
+
+        this._proteinSubScore = null;
+        this._caddScaled = null;
+        this._consequenceTypeGene = null;
+        this._consequenceTypeTranscript = null;
+        this._consequenceTypeToColor = null;
+
         this._config = this.getDefaultConfig();
     }
 
     update(changedProperties) {
-        if (changedProperties.has("variantAnnotation")) {
-            this.variantAnnotationChanged();
+        if (changedProperties.has("consequenceTypes")) {
+            this.consequenceTypesObserver();
         }
-        if (changedProperties.has("consequenceTypes") || changedProperties.has("proteinSubstitutionScores")) {
-            this.setColors();
+        if (changedProperties.has("variantAnnotation")) {
+            this.variantAnnotationObserver();
         }
         super.update(changedProperties);
     }
 
-    isTranscriptAvailable(item) {
-        return item !== "";
-    }
-
-    setColors() {
+    consequenceTypesObserver() {
         if (this.consequenceTypes) {
             const consequenceTypeToColor = {};
             for (const category of this.consequenceTypes.categories) {
@@ -84,253 +85,249 @@ export default class CellbaseVariantAnnotationSummary extends LitElement {
                     }
                 }
             }
-            this.consequenceTypeToColor = consequenceTypeToColor;
-        }
-
-        if (typeof this.proteinSubstitutionScores !== "undefined") {
-            const pssColor = new Map();
-            for (const i in this.proteinSubstitutionScores) {
-                const obj = this.proteinSubstitutionScores[i];
-                Object.keys(obj).forEach(key => {
-                    pssColor.set(key, obj[key]);
-                });
-            }
-            this.pssColor = pssColor;
+            this._consequenceTypeToColor = consequenceTypeToColor;
         }
     }
 
-    variantAnnotationChanged() {
-        const _this = this;
-        if (typeof this.variantAnnotation !== "undefined") {
-            if (UtilsNew.isEmpty(_this.variantAnnotation.reference)) {
-                _this.variantAnnotation.reference = "-";
-            }
-
-            if (UtilsNew.isEmpty(_this.variantAnnotation.alternate)) {
-                _this.variantAnnotation.alternate = "-";
+    variantAnnotationObserver() {
+        if (this.variantAnnotation) {
+            if (!this.variantAnnotation.reference) {
+                this.variantAnnotation.reference = "-";
             }
 
-            // Consequence type
-            // Color the consequence type
-            if (typeof _this.consequenceTypeToColor !== "undefined" && typeof _this.consequenceTypeToColor[_this.variantAnnotation.displayConsequenceType] !== "undefined") {
-                $("#" + _this._prefix + "CT").css("color", _this.consequenceTypeToColor[_this.variantAnnotation.displayConsequenceType]);
+            if (!this.variantAnnotation.alternate) {
+                this.variantAnnotation.alternate = "-";
             }
 
             // Find the gene and transcript that exhibit the display consequence type
-            if (typeof _this.variantAnnotation.consequenceTypes !== "undefined") {
-                for (let i = 0; i < _this.variantAnnotation.consequenceTypes.length; i++) {
-                    for (let j = 0; j < _this.variantAnnotation.consequenceTypes[i].sequenceOntologyTerms.length; j++) {
-                        if (_this.variantAnnotation.displayConsequenceType === _this.variantAnnotation.consequenceTypes[i].sequenceOntologyTerms[j].name) {
-                            _this.ctGene = _this.variantAnnotation.consequenceTypes[i].geneName;
-                            _this.ctTranscript = _this.variantAnnotation.consequenceTypes[i].transcriptId;
+            this._consequenceTypeGene = null;
+            this._consequenceTypeTranscript = null;
+            if (typeof this.variantAnnotation.consequenceTypes !== "undefined") {
+                for (let i = 0; i < this.variantAnnotation.consequenceTypes.length; i++) {
+                    for (let j = 0; j < this.variantAnnotation.consequenceTypes[i].sequenceOntologyTerms.length; j++) {
+                        if (this.variantAnnotation.displayConsequenceType === this.variantAnnotation.consequenceTypes[i].sequenceOntologyTerms[j].name) {
+                            this._consequenceTypeGene = this.variantAnnotation.consequenceTypes[i].geneName;
+                            this._consequenceTypeTranscript = this.variantAnnotation.consequenceTypes[i].transcriptId;
                             break;
                         }
                     }
                 }
             }
 
-            // PSS
+            // Protein substitution scores
             const proteinSubScore = {};
-            // debugger
-            if (typeof _this.variantAnnotation.consequenceTypes !== "undefined") {
+
+            if (typeof this.variantAnnotation.consequenceTypes !== "undefined") {
                 let min = 10;
                 let max = 0;
-                for (let i = 0; i < _this.variantAnnotation.consequenceTypes.length; i++) {
-                    if (typeof _this.variantAnnotation.consequenceTypes[i].proteinVariantAnnotation !== "undefined") {
-                        const gene = _this.variantAnnotation.consequenceTypes[i].geneName;
-                        const transcript = _this.variantAnnotation.consequenceTypes[i].ensemblTranscriptId;
-                        const scores = _this.variantAnnotation.consequenceTypes[i].proteinVariantAnnotation.substitutionScores;
+                for (let i = 0; i < this.variantAnnotation.consequenceTypes.length; i++) {
+                    if (typeof this.variantAnnotation.consequenceTypes[i].proteinVariantAnnotation !== "undefined") {
+                        const gene = this.variantAnnotation.consequenceTypes[i].geneName;
+                        const transcript = this.variantAnnotation.consequenceTypes[i].ensemblTranscriptId;
+                        const scores = this.variantAnnotation.consequenceTypes[i].proteinVariantAnnotation.substitutionScores;
 
                         if (typeof scores !== "undefined") {
                             for (let j = 0; j < scores.length; j++) {
                                 if (scores[j].source === "sift" && scores[j].score <= min) {
                                     min = scores[j].score;
-                                    proteinSubScore.sift = {score: scores[j].score, description: scores[j].description, gene: gene, transcript: transcript};
-                                    // if (typeof _this.pssColor !== "undefined" && typeof _this.pssColor.get(scores[j].description) !== "undefined") {
-                                    //     $("#" + _this._prefix + "Sift").css("color", _this.pssColor.get(scores[j].description));
-                                    // }
+                                    proteinSubScore.sift = {
+                                        score: scores[j].score,
+                                        description: scores[j].description,
+                                        gene: gene,
+                                        transcript: transcript,
+                                    };
                                 } else if (scores[j].source === "polyphen" && scores[j].score >= max) {
                                     max = scores[j].score;
-                                    proteinSubScore.polyphen = {score: scores[j].score, description: scores[j].description, gene: gene, transcript: transcript};
-                                    // if (typeof _this.pssColor !== "undefined" && typeof _this.pssColor.get(scores[j].description) !== "undefined") {
-                                    //     $("#" + _this._prefix + "Polyphen").css("color", _this.pssColor.get(scores[j].description));
-                                    // }
+                                    proteinSubScore.polyphen = {
+                                        score: scores[j].score,
+                                        description: scores[j].description,
+                                        gene: gene,
+                                        transcript: transcript,
+                                    };
                                 }
                             }
                         }
                     }
                 }
             }
-            if (Object.keys(proteinSubScore).length === 0 && proteinSubScore.constructor === Object) {
+
+            // Check if SIFT score is not defined
+            if (typeof proteinSubScore.sift === "undefined") {
                 proteinSubScore.sift = {score: "NA", description: "NA", transcript: ""};
+            }
+            // Check if Polyphen score is not defined
+            if (typeof proteinSubScore.polyphen === "undefined") {
                 proteinSubScore.polyphen = {score: "NA", description: "NA", transcript: ""};
-                $("#" + _this._prefix + "Sift").css("color", "black");
-                $("#" + _this._prefix + "Polyphen").css("color", "black");
             }
-            _this.proteinSubScore = proteinSubScore;
-            // debugger
+
+            // Save the protein substitution scores
+            this._proteinSubScore = proteinSubScore;
+
             // CADD
-            if (typeof _this.variantAnnotation.functionalScore !== "undefined") {
-                for (const i in _this.variantAnnotation.functionalScore) {
-                    const value = Number(_this.variantAnnotation.functionalScore[i].score).toFixed(2);
-                    if (_this.variantAnnotation.functionalScore[i].source === "cadd_scaled") {
-                        if (value > 15) {
-                            $("#" + _this._prefix + "Cadd").css("color", "red");
-                            _this.caddScaled = value;
-                        } else {
-                            $("#" + _this._prefix + "Cadd").css("color", "black");
-                            _this.caddScaled = value;
-                        }
-                    }
+            this._caddScaled = "NA"; // default value
+            (this.variantAnnotation.functionalScore || []).forEach(functionalScore => {
+                if (functionalScore?.source === "cadd_scaled") {
+                    this._caddScaled = Number(functionalScore.score).toFixed(2);
                 }
-            } else {
-                $("#" + _this._prefix + "Cadd").css("color", "black");
-                _this.caddScaled = "NA";
-            }
-
-            // this.requestUpdate();
+            });
         }
     }
 
+    getProteinSubstitutionScoresColor(source, description) {
+        return this.proteinSubstitutionScores?.style?.[source]?.[description] || "black";
+    }
+
     render() {
-        if (this.variantAnnotation === undefined || this.variantAnnotation === "" || this.proteinSubScore === undefined) {
-            return;
+        if (!this.variantAnnotation) {
+            return nothing;
         }
-        const variantRegion = this.variantAnnotation.chromosome + ":" + this.variantAnnotation.start + "-" + this.variantAnnotation.start;
-        const variantId = this.variantAnnotation.id ? this.variantAnnotation.id : `${this.variantAnnotation.chromosome}:${this.variantAnnotation.start}:${this.variantAnnotation.reference}:${this.variantAnnotation.alternate}`;
+
         return html`
             <data-form
                 .data="${this.variantAnnotation}"
                 .config="${this._config}">
             </data-form>
         `;
-
     }
 
     getDefaultConfig() {
-        return Types.dataFormConfig({
-            // title: "Summary",
-            sections: [{
-                title: "General",
-                elements: [{
-                    title: "Id",
-                    type: "custom",
-                    display: {
-                        render: data => {
-                            const variantRegion = data.chromosome + ":" + data.start + "-" + data.start;
-                            const variantId = data.id ? data.id : `${data.chromosome}:${data.start}:${data.reference}:${data.alternate}`;
-                            return html `
-                                <a class="text-decoration-none" target="_blank" href="${BioinfoUtils.getVariantLink(variantId, variantRegion, "ensembl_genome_browser", this.assembly)}">
-                                    ${variantId}
-                                </a>
-                            `;
-                        }
-                    }
-                },
-                {
-                    title: "HGVS",
-                    type: "custom",
-                    display: {
-                        visible: data => data?.hgvs.length > 0,
-                        render: data => html `
-                        ${data.hgvs.map(item => html` ${item}<br> `)}
-                        `
-                    }
-                },
-                {
-                    title: "Alleles",
-                    type: "custom",
-                    display: {
-                        render: data => html `
-                        ${data.reference}/${data.alternate}
-                        `
-                    }
-                },
-                {
-                    title: "Location",
-                    type: "custom",
-                    display: {
-                        render: data => html `
-                            ${data.chromosome}:${data.start}
-                            ${data.end ? html`<div>-${data.end}</div>`: nothing}
-                        `
-                    }
-                },
-                {
-                    title: "Type",
-                    type: "custom",
-                    field: "type",
-                    display: {
-                        visible: data => !UtilsNew.isEmpty(data.type),
-                    }
-                },
-                {
-                    title: "Ancestral Allele",
-                    field: "ancestralAllele",
-                    display: {
-                        visible: data => !UtilsNew.isEmpty(data.ancestralAllele),
-                    }
-                },
-                {
-                    title: "MAF",
-                    type: "custom",
-                    display: {
-                        visible: data => UtilsNew.isNotEmpty(data.minorAlleleFreq),
-                        render: data => html `${data.minorAlleleFreq} (${data.minorAllele})`
-                    }
-                },
-                {
-                    title: "Most Severe Consequence Type",
-                    type: "custom",
-                    display: {
-                        render: data => html `
-                            <span id="${this._prefix}CT">${data.displayConsequenceType}</span>
-                            ${this.ctGene ? html`
-                                <span>
-                                    (<b>Gene</b> : ${this.ctGene}, <b>Transcript</b> : ${this.ctTranscript})
-                                </span>
-                            ` : nothing }
-                        `
-                    }
-                },
-                {
-                    title: "Most Severe Deleterious Score",
-                    type: "custom",
-                    display: {
-                        render: data => html `
-                            <span id="${this._prefix}Sift" title="${this.proteinSubScore.sift.score}">
-                                ${this.proteinSubScore.sift.description}
-                            </span>
-                            ${this.isTranscriptAvailable(this.proteinSubScore.sift.transcript) ? html`
-                                (<b>Gene:</b>${this.proteinSubScore.sift.gene}, <b>Transcript: </b>${this.proteinSubScore.sift.transcript})
-                            ` : nothing }
-                        `
-                    }
-                },
+        return {
+            sections: [
                 {
-                    title: "Polyphen",
-                    type: "custom",
-                    display: {
-                        render: data => html `
-                            <span id="${this._prefix}Polyphen" title="${this.proteinSubScore.polyphen.score}">${this.proteinSubScore.polyphen.description}</span>
-                                ${this.isTranscriptAvailable(this.proteinSubScore.polyphen.transcript) ? html`
-                                (<b>Gene:</b>${this.proteinSubScore.polyphen.gene}, <b>Transcript: </b>${this.proteinSubScore.polyphen.transcript})
-                            ` : nothing}
-                        `
-                    }
+                    title: "General",
+                    elements: [
+                        {
+                            title: "Id",
+                            type: "custom",
+                            display: {
+                                render: data => {
+                                    const variantRegion = data.chromosome + ":" + data.start + "-" + data.start;
+                                    const variantId = data.id ? data.id : `${data.chromosome}:${data.start}:${data.reference}:${data.alternate}`;
+                                    const url = BioinfoUtils.getVariantLink(variantId, variantRegion, "ensembl_genome_browser", this.assembly);
+                                    return html `
+                                        <a class="text-decoration-none" target="_blank" href="${url}">
+                                            ${variantId}
+                                        </a>
+                                    `;
+                                }
+                            }
+                        },
+                        {
+                            title: "HGVS",
+                            type: "custom",
+                            display: {
+                                visible: data => data?.hgvs.length > 0,
+                                render: data => {
+                                    return data.hgvs.map(item => html`${item}<br>`);
+                                },
+                            },
+                        },
+                        {
+                            title: "Alleles",
+                            type: "custom",
+                            display: {
+                                render: data => html`${data.reference}/${data.alternate}`,
+                            },
+                        },
+                        {
+                            title: "Location",
+                            type: "custom",
+                            display: {
+                                render: data => html`${data.chromosome}:${data.start}${data.end ? html`<div>-${data.end}</div>`: nothing}`,
+                            }
+                        },
+                        {
+                            title: "Type",
+                            type: "custom",
+                            field: "type",
+                            display: {
+                                visible: data => !UtilsNew.isEmpty(data.type),
+                            },
+                        },
+                        {
+                            title: "Ancestral Allele",
+                            field: "ancestralAllele",
+                            display: {
+                                visible: data => !UtilsNew.isEmpty(data.ancestralAllele),
+                            },
+                        },
+                        {
+                            title: "MAF",
+                            type: "custom",
+                            display: {
+                                visible: data => UtilsNew.isNotEmpty(data.minorAlleleFreq),
+                                render: data => html`${data.minorAlleleFreq} (${data.minorAllele})`,
+                            },
+                        },
+                        {
+                            title: "Most Severe Consequence Type",
+                            type: "custom",
+                            display: {
+                                render: data => {
+                                    const consequenceTypeColor = this._consequenceTypeToColor?.[data.displayConsequenceType] || "black";
+                                    return html`
+                                        <span style="color:${consequenceTypeColor};">
+                                            ${data.displayConsequenceType}
+                                        </span>
+                                        ${this._consequenceTypeGene ? html`
+                                            <span>
+                                                (<b>Gene</b> : ${this._consequenceTypeGene}, <b>Transcript</b> : ${this._consequenceTypeTranscript})
+                                            </span>
+                                        ` : nothing}
+                                    `;
+                                },
+                            },
+                        },
+                        {
+                            title: "Most Severe Deleterious Score",
+                            type: "custom",
+                            display: {
+                                render: () => {
+                                    const color = this.getProteinSubstitutionScoresColor("sift", this._proteinSubScore.sift.description);
+                                    return html`
+                                        <span title="${this._proteinSubScore.sift.score}" style="color:${color};">
+                                            ${this._proteinSubScore.sift.description || "-"}
+                                        </span>
+                                        ${this._proteinSubScore.sift?.transcript ? html`
+                                            (<b>Gene:</b>${this._proteinSubScore.sift.gene}, <b>Transcript: </b>${this._proteinSubScore.sift.transcript})
+                                        ` : nothing }
+                                    `;
+                                },
+                            },
+                        },
+                        {
+                            title: "Polyphen",
+                            type: "custom",
+                            display: {
+                                render: () => {
+                                    const color = this.getProteinSubstitutionScoresColor("polyphen", this._proteinSubScore.polyphen.description);
+                                    return html`
+                                        <span title="${this._proteinSubScore.polyphen.score}" style="color:${color};">
+                                            ${this._proteinSubScore.polyphen.description || "-"}
+                                        </span>
+                                        ${this._proteinSubScore.polyphen?.transcript ? html`
+                                            (<b>Gene:</b>${this._proteinSubScore.polyphen.gene}, <b>Transcript: </b>${this._proteinSubScore.polyphen.transcript})
+                                        ` : nothing}
+                                    `;
+                                },
+                            },
+                        },
+                        {
+                            title: "CADD Scaled",
+                            type: "custom",
+                            display: {
+                                render: () => {
+                                    const colorClassName = (this._caddScaled !== "NA" && this._caddScaled > 15) ? "text-danger" : "text-body";
+                                    return html `
+                                        <span class="${colorClassName}">${this._caddScaled}</span>
+                                    `;
+                                },
+                            },
+                        },
+                    ],
                 },
-                {
-                    title: "CADD Scaled",
-                    type: "custom",
-                    display: {
-                        render: data => html `
-                            ${this.caddScaled}
-                        `
-                    }
-                }
-                ]
-            }]
-        });
+            ],
+        };
     }
 
 }
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..25a9eb2b2 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();
     }
@@ -168,7 +169,7 @@ export default class VariantSecondarySampleIndexOperation extends LitElement {
                 title: "Configuration Parameters",
                 elements: [
                     {
-                        title: "Sample",
+                        title: "Sample IDs",
                         type: "custom",
                         required: true,
                         display: {
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",
diff --git a/src/webcomponents/variant/variant-samples.js b/src/webcomponents/variant/variant-samples.js
index 268e7e3bc..256018c5f 100644
--- a/src/webcomponents/variant/variant-samples.js
+++ b/src/webcomponents/variant/variant-samples.js
@@ -68,14 +68,8 @@ 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) {
-        //     if (genotype.fields) {
-        //         selectedGenotypesArray.push(genotype.fields.filter(gt => gt.id).map(gt => gt.id).join(","));
-        //     }
-        // }
-        // this.selectedGenotypes = selectedGenotypesArray.join(",");
     }
 
     updated(changedProperties) {
@@ -421,12 +415,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() {
@@ -439,7 +436,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 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>.
@@ -447,26 +444,29 @@ 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>
                     </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>