From dcf5ba497f5f384d6af8d16e03d4d7ddaddb4dd1 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Mon, 8 May 2023 18:28:48 +0200
Subject: [PATCH 01/39] wc: added new button for pharmacogenomics in
 browser-toolbar

---
 .../variant-interpreter-browser-toolbar.js        | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-toolbar.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-toolbar.js
index aa34410a38..f289c58202 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-toolbar.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-toolbar.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {LitElement, html} from "lit";
+import {LitElement, html, nothing} from "lit";
 import UtilsNew from "../../../core/utils-new.js";
 import LitUtils from "../../commons/utils/lit-utils.js";
 
@@ -174,6 +174,15 @@ class VariantInterpreterBrowserToolbar extends LitElement {
         return html`
             <div class="btn-toolbar" role="toolbar" aria-label="toolbar" style="margin: 0 5px 20px 0">
                 <div class="pull-right" role="group">
+                    ${this._config?.showPharmacogenomicsFilter ? html`
+                        <div class="btn-group" style="margin-right: 2px">
+                            <button type="button" class="btn btn-primary" title="Pharmacogenomics Variants">
+                                <i class="fas fa-pills icon-padding" aria-hidden="true"></i>
+                                <strong>Pharmacogenomics Variants</strong>
+                            </button>
+                        </div>
+                    ` : nothing}
+
                     <div class="btn-group" style="margin-right: 2px">
                         <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                                 aria-expanded="false" title="Show inclusion list of variants">
@@ -350,7 +359,9 @@ class VariantInterpreterBrowserToolbar extends LitElement {
     }
 
     getDefaultConfig() {
-        return {};
+        return {
+            showPharmacogenomicsFilter: true,
+        };
     }
 
 }

From 143d9d9bf8f1b7b536cfe0ffc862d4dd2e4ce369 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Mon, 8 May 2023 18:29:44 +0200
Subject: [PATCH 02/39] wc: minor style fixes in interpreter browser toolbar

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

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-toolbar.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-toolbar.js
index f289c58202..a74c729ed7 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-toolbar.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-toolbar.js
@@ -23,8 +23,6 @@ class VariantInterpreterBrowserToolbar extends LitElement {
 
     constructor() {
         super();
-
-        // Set status and init private properties
         this._init();
     }
 
@@ -58,16 +56,15 @@ class VariantInterpreterBrowserToolbar extends LitElement {
     _init() {
         this._prefix = UtilsNew.randomString(8);
         this.write = false;
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-        this._config = {...this.getDefaultConfig(), ...this.config};
+        this._config = this.getDefaultConfig();
     }
 
     updated(changedProperties) {
         if (changedProperties.has("config")) {
-            this._config = {...this.getDefaultConfig(), ...this.config};
+            this._config = {
+                ...this.getDefaultConfig(),
+                ...this.config,
+            };
         }
     }
 

From 6c0981ed77263e5080e6c70a167c032593289e4a Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Mon, 8 May 2023 18:31:46 +0200
Subject: [PATCH 03/39] wc: dispatch event when clicking on pharmacogenomics
 variants button

---
 .../interpretation/variant-interpreter-browser-toolbar.js   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-toolbar.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-toolbar.js
index a74c729ed7..5aaba180fe 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-toolbar.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-toolbar.js
@@ -68,6 +68,10 @@ class VariantInterpreterBrowserToolbar extends LitElement {
         }
     }
 
+    onFilterPharmacogenomicsVariants() {
+        LitUtils.dispatchCustomEvent(this, "filterPharmacogenomicsVariants", null);
+    }
+
     onFilterInclusionVariants() {
         const variants = [];
         this.variantInclusionState.map(inclusion => variants.push(...inclusion.variants));
@@ -173,7 +177,7 @@ class VariantInterpreterBrowserToolbar extends LitElement {
                 <div class="pull-right" role="group">
                     ${this._config?.showPharmacogenomicsFilter ? html`
                         <div class="btn-group" style="margin-right: 2px">
-                            <button type="button" class="btn btn-primary" title="Pharmacogenomics Variants">
+                            <button type="button" class="btn btn-primary" @click="${this.onFilterPharmacogenomicsVariants}">
                                 <i class="fas fa-pills icon-padding" aria-hidden="true"></i>
                                 <strong>Pharmacogenomics Variants</strong>
                             </button>

From a154b6f94235f7ef31de32669220a7f9cab81ff5 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Mon, 8 May 2023 18:34:00 +0200
Subject: [PATCH 04/39] wc: added listener in interpreter browser template for
 PGx variants filter

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

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
index 3c1175c46e..0ac5e0d394 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
@@ -362,6 +362,10 @@ class VariantInterpreterBrowserTemplate extends LitElement {
         }
     }
 
+    onFilterPharmacogenomicsVariants() {
+        // TODO
+    }
+
     render() {
         // Check Project exists
         if (!this.opencgaSession?.study) {
@@ -459,6 +463,7 @@ class VariantInterpreterBrowserTemplate extends LitElement {
                             .variantInclusionState="${this.variantInclusionState}"
                             .write="${OpencgaCatalogUtils.checkPermissions(this.opencgaSession.study, this.opencgaSession.user.id, "WRITE_CLINICAL_ANALYSIS")}"
                             @filterVariants="${this.onFilterVariants}"
+                            @filterPharmacogenomicsVariants="${this.onFilterPharmacogenomicsVariants}"
                             @resetVariants="${this.onResetVariants}"
                             @saveInterpretation="${this.onSaveVariants}">
                         </variant-interpreter-browser-toolbar>

From 392b40bce9016bb30f8e8c0ccece7e7cdf0653a0 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Mon, 8 May 2023 18:43:08 +0200
Subject: [PATCH 05/39] wc: add new step for pharmacogenomics in interpreter

---
 .../variant/interpretation/variant-interpreter.js  | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter.js b/src/webcomponents/variant/interpretation/variant-interpreter.js
index 4ae9dc9aab..5a64e069fb 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {LitElement, html} from "lit";
+import {LitElement, html, nothing} from "lit";
 import UtilsNew from "../../../core/utils-new.js";
 import ClinicalAnalysisManager from "../../clinical/clinical-analysis-manager.js";
 import "../../commons/tool-header.js";
@@ -247,6 +247,12 @@ class VariantInterpreter extends LitElement {
                     description: "",
                     icon: "fa fa-search"
                 },
+                {
+                    id: "pharmacogenomics",
+                    title: "Pharmacogenomics",
+                    description: "",
+                    icon: "fas fa-pills",
+                },
                 {
                     id: "review",
                     title: "Interpretation Review",
@@ -496,6 +502,12 @@ class VariantInterpreter extends LitElement {
                                 </div>
                             ` : null}
 
+                            ${this.activeTab["pharmacogenomics"] ? html`
+                                <div id="${this._prefix}pharmacogenomics" >
+                                    <div align="center"><b>WIP</b></div>
+                                </div>
+                            ` : nothing}
+
                             ${this.activeTab["review"] ? html`
                                 <div id="${this._prefix}review" class="clinical-portal-content">
                                     <variant-interpreter-review

From cbd2300bfe71cc7daf975dcb1d0d1c67e79d618e Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Tue, 9 May 2023 12:25:33 +0200
Subject: [PATCH 06/39] wc: initialize pharmacogenomics components

---
 .../pharmacogenomics/pharmacogenomics-grid.js | 42 ++++++++++++
 .../pharmacogenomics-report.js                | 64 +++++++++++++++++++
 .../pharmacogenomics-summary.js               | 49 ++++++++++++++
 3 files changed, 155 insertions(+)
 create mode 100644 src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js
 create mode 100644 src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
 create mode 100644 src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-summary.js

diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js
new file mode 100644
index 0000000000..e49118fb92
--- /dev/null
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js
@@ -0,0 +1,42 @@
+import {LitElement, html} from "lit";
+
+export default class PharmacogenomicsGrid extends LitElement {
+
+    constructor() {
+        super();
+        this.#init();
+    }
+
+    createRenderRoot() {
+        return this;
+    }
+
+    static get properties() {
+        return {
+            opencgaSession: {
+                type: Object,
+            },
+        };
+    }
+
+    #init() {
+        this.config = this.getDefaultConfig();
+    }
+
+    update(changedProperties) {
+        super.update(changedProperties);
+    }
+
+    render() {
+        return html`
+            <div>Pharmacogenomics Grid</div>
+        `;
+    }
+
+    getDefaultConfig() {
+        return {};
+    }
+
+}
+
+customElements.define("pharmacogenomics-grid", PharmacogenomicsGrid);
diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
new file mode 100644
index 0000000000..d1264e327a
--- /dev/null
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
@@ -0,0 +1,64 @@
+import {LitElement, html, nothing} from "lit";
+import "../../commons/tool-header.js";
+
+export default class PharmacogenomicsReport extends LitElement {
+
+    constructor() {
+        super();
+        this.#init();
+    }
+
+    createRenderRoot() {
+        return this;
+    }
+
+    static get properties() {
+        return {
+            sampleId: {
+                type: String,
+            },
+            sample: {
+                type: Object,
+            },
+            opencgaSession: {
+                type: Object,
+            },
+        };
+    }
+
+    #init() {
+        this.config = this.getDefaultConfig();
+    }
+
+    update(changedProperties) {
+        if (changedProperties.has("sampleId")) {
+            this.sampleIdObserver();
+        }
+        super.update(changedProperties);
+    }
+
+    sampleIdObserver() {
+        if (this.opencgaSession && this.sampleId) {
+            // TODO
+        }
+    }
+
+    render() {
+        return html`
+            <div class="col-md-10 col-md-offset-1">
+                ${this.config.showToolTitle ? html`
+                    <tool-header class="bg-white" title="${"Pharmacogenomics"}"></tool-header>
+                ` : nothing}
+            </div>
+        `;
+    }
+
+    getDefaultConfig() {
+        return {
+            showToolTitle: true,
+        };
+    }
+
+}
+
+customElements.define("pharmacogenomics-report", PharmacogenomicsReport);
diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-summary.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-summary.js
new file mode 100644
index 0000000000..df1469be03
--- /dev/null
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-summary.js
@@ -0,0 +1,49 @@
+import {LitElement, html} from "lit";
+
+export default class PharmacogenomicsSummary extends LitElement {
+
+    constructor() {
+        super();
+        this.#init();
+    }
+
+    createRenderRoot() {
+        return this;
+    }
+
+    static get properties() {
+        return {
+            variant: {
+                type: String,
+            },
+            active: {
+                type: Boolean,
+            },
+            opencgaSession: {
+                type: Object,
+            },
+        };
+    }
+
+    #init() {
+        this.active = true;
+        this.config = this.getDefaultConfig();
+    }
+
+    update(changedProperties) {
+        super.update(changedProperties);
+    }
+
+    render() {
+        return html`
+            <div>Pharmacogenomics Summary</div>
+        `;
+    }
+
+    getDefaultConfig() {
+        return {};
+    }
+
+}
+
+customElements.define("pharmacogenomics-summary", PharmacogenomicsSummary);

From 73abf91f2ee9958a027c17737f6c6ed8e6104b68 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Tue, 9 May 2023 12:26:20 +0200
Subject: [PATCH 07/39] wc: added pharmacogenomics tab to interpreter browser
 RD

---
 .../interpretation/variant-interpreter-browser-rd.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-rd.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-rd.js
index c03faa0a5d..3f61c1ec32 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-rd.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-rd.js
@@ -20,6 +20,7 @@ import "./variant-interpreter-browser-template.js";
 import "./exomiser/variant-interpreter-exomiser-view.js";
 import "../variant-samples.js";
 import "../../visualization/protein-lollipop-variant-view.js";
+import "../../clinical/pharmacogenomics/pharmacogenomics-summary.js";
 
 class VariantInterpreterBrowserRd extends LitElement {
 
@@ -689,6 +690,17 @@ class VariantInterpreterBrowserRd extends LitElement {
                                 </variant-interpreter-exomiser-view>
                             `,
                         },
+                        {
+                            id: "pharmacogenomics",
+                            name: "Pharmacogenomics",
+                            render: (variant, active, opencgaSession) => html`
+                                <pharmacogenomics-summary
+                                    .variant="${variant.id}"
+                                    .active="${active}"
+                                    .opencgaSession="${opencgaSession}">
+                                </pharmacogenomics-summary>
+                            `,
+                        },
                         {
                             id: "json-view",
                             name: "JSON Data",

From 81b1965711c661134d16f3c489d6e645598ff507 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Tue, 9 May 2023 12:26:44 +0200
Subject: [PATCH 08/39] wc: using pharmacogenomics-report component in
 interpreter step

---
 .../variant/interpretation/variant-interpreter.js          | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter.js b/src/webcomponents/variant/interpretation/variant-interpreter.js
index 5a64e069fb..9d846cfec6 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter.js
@@ -26,6 +26,7 @@ import "./variant-interpreter-browser-rd.js";
 import "./variant-interpreter-browser-cancer.js";
 import "./variant-interpreter-review.js";
 import "./variant-interpreter-methods.js";
+import "../../clinical/pharmacogenomics/pharmacogenomics-report.js";
 import "../../commons/opencga-active-filters.js";
 import "../../download-button.js";
 import "../../loading-spinner.js";
@@ -504,7 +505,11 @@ class VariantInterpreter extends LitElement {
 
                             ${this.activeTab["pharmacogenomics"] ? html`
                                 <div id="${this._prefix}pharmacogenomics" >
-                                    <div align="center"><b>WIP</b></div>
+                                    <pharmacogenomics-report
+                                        .opencgaSession="${this.opencgaSession}"
+                                        .sampleId="${(this.clinicalAnalysis?.proband?.samples || [])[0]?.id || ""}"
+                                        >
+                                    </pharmacogenomics-report>
                                 </div>
                             ` : nothing}
 

From 73a9e9f8ca84cc17a7c55e8d107ebfb337ed833b Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Tue, 9 May 2023 17:59:10 +0200
Subject: [PATCH 09/39] wc: minor fixes in pharmacogenomics report component

---
 .../clinical/pharmacogenomics/pharmacogenomics-report.js       | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
index d1264e327a..b6ac8a69ae 100644
--- a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
@@ -17,9 +17,6 @@ export default class PharmacogenomicsReport extends LitElement {
             sampleId: {
                 type: String,
             },
-            sample: {
-                type: Object,
-            },
             opencgaSession: {
                 type: Object,
             },

From 2ea4321bd2fe47c16f75034be7dede5676ef99bc Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Wed, 10 May 2023 11:39:25 +0200
Subject: [PATCH 10/39] wc: added listener to filter for pgx variants in
 browser template

---
 .../variant-interpreter-browser-template.js   | 51 ++++++++++++++++++-
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
index 0ac5e0d394..833770bc0b 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
@@ -20,6 +20,7 @@ import ClinicalAnalysisManager from "../../clinical/clinical-analysis-manager.js
 import LitUtils from "../../commons/utils/lit-utils.js";
 import NotificationUtils from "../../commons/utils/notification-utils.js";
 import OpencgaCatalogUtils from "../../../core/clients/opencga/opencga-catalog-utils.js";
+import {CellBaseClient} from "../../../core/clients/cellbase/cellbase-client.js";
 import UtilsNew from "../../../core/utils-new.js";
 import "./variant-interpreter-browser-toolbar.js";
 import "./variant-interpreter-grid.js";
@@ -362,8 +363,54 @@ class VariantInterpreterBrowserTemplate extends LitElement {
         }
     }
 
-    onFilterPharmacogenomicsVariants() {
-        // TODO
+    async onFilterPharmacogenomicsVariants() {
+        // 0. Initialize Cellbase client instance
+        const cellbaseClient = new CellBaseClient({
+            // host: this.opencgaSession?.project?.cellbase?.url || this.opencgaSession?.project?.internal?.cellbase?.url,
+            host: "https://ws.zettagenomics.com/cellbase",
+            version: "v5.5-SNAPSHOT",
+            species: "hsapiens",
+        });
+
+        // 1. Import all PGx variants from Cellbase
+        const pgxVariantsResponse = cellbaseClient.get("clinical", "pharmacogenomics", null, "distinct", {
+            field: "location",
+            assembly: "grch38",
+            dataRelease: "4",
+        });
+
+        // 2. Get the list of variants available in OpenCGA
+        const pgxVariants = pgxVariantsResponse.responses[0].results;
+        const chunkSize = 1000;
+        const promises = [];
+        for (let i = 0; i < pgxVariants.length; i = i + chunkSize) {
+            const chunk = pgxVariants.slice(i, i + chunkSize);
+            const query = {
+                region: chunk.join(","),
+                sample: this.clinicalAnalysis.proband.samples[0].id,
+                include: "id",
+                study: this.opencgaSession.study.fqn,
+            };
+            promises.push(this.opencgaSession.opencgaClient.clinical().queryVariant(query));
+        }
+        const variantsResponses = await Promise.all(promises);
+
+        // 3. Generate the list of unique variants to filter
+        const variantIds = new Set();
+        variantsResponses.forEach(variantResponse => {
+            variantResponse.responses[0].results.forEach(variant => {
+                variantIds.add(variant.id);
+            });
+        });
+
+        // 4. Update the query
+        // const lockedFields = [...this._config?.filter?.activeFilters?.lockedFields.map(key => key.id), "study"];
+        this.query = {
+            // ...UtilsNew.filterKeys(this.executedQuery, lockedFields),
+            id: Array.from(variantIds).join(","),
+        };
+        this.notifyQueryChange();
+        this.requestUpdate();
     }
 
     render() {

From c9ae798056964cc41a968c9e7265fb4df7ce3d8c Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Wed, 10 May 2023 16:15:57 +0200
Subject: [PATCH 11/39] wc: fix pgx filter in interpreter browser template

---
 .../variant-interpreter-browser-template.js        | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
index 833770bc0b..94b3c8c49f 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
@@ -368,20 +368,20 @@ class VariantInterpreterBrowserTemplate extends LitElement {
         const cellbaseClient = new CellBaseClient({
             // host: this.opencgaSession?.project?.cellbase?.url || this.opencgaSession?.project?.internal?.cellbase?.url,
             host: "https://ws.zettagenomics.com/cellbase",
-            version: "v5.5-SNAPSHOT",
+            version: "v5.5",
             species: "hsapiens",
         });
 
         // 1. Import all PGx variants from Cellbase
-        const pgxVariantsResponse = cellbaseClient.get("clinical", "pharmacogenomics", null, "distinct", {
-            field: "location",
+        const pgxVariantsResponse = await cellbaseClient.get("clinical", "pharmacogenomics", null, "distinct", {
+            field: "variants.location",
             assembly: "grch38",
-            dataRelease: "4",
+            dataRelease: "5",
         });
 
         // 2. Get the list of variants available in OpenCGA
         const pgxVariants = pgxVariantsResponse.responses[0].results;
-        const chunkSize = 1000;
+        const chunkSize = 100;
         const promises = [];
         for (let i = 0; i < pgxVariants.length; i = i + chunkSize) {
             const chunk = pgxVariants.slice(i, i + chunkSize);
@@ -404,9 +404,9 @@ class VariantInterpreterBrowserTemplate extends LitElement {
         });
 
         // 4. Update the query
-        // const lockedFields = [...this._config?.filter?.activeFilters?.lockedFields.map(key => key.id), "study"];
+        const lockedFields = [...this._config?.filter?.activeFilters?.lockedFields.map(key => key.id), "study"];
         this.query = {
-            // ...UtilsNew.filterKeys(this.executedQuery, lockedFields),
+            ...UtilsNew.filterKeys(this.executedQuery, lockedFields),
             id: Array.from(variantIds).join(","),
         };
         this.notifyQueryChange();

From c832af8890bb28dff261e86debd7d88fe4ee5bd7 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Wed, 10 May 2023 17:58:36 +0200
Subject: [PATCH 12/39] wc: import pgx variants from cellbase in pgx-report
 component

---
 .../pharmacogenomics-report.js                | 64 +++++++++++++++++--
 1 file changed, 60 insertions(+), 4 deletions(-)

diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
index b6ac8a69ae..ef17535f36 100644
--- a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
@@ -1,4 +1,5 @@
 import {LitElement, html, nothing} from "lit";
+import {CellBaseClient} from "../../../core/clients/cellbase/cellbase-client.js";
 import "../../commons/tool-header.js";
 
 export default class PharmacogenomicsReport extends LitElement {
@@ -17,6 +18,9 @@ export default class PharmacogenomicsReport extends LitElement {
             sampleId: {
                 type: String,
             },
+            active: {
+                type: Boolean,
+            },
             opencgaSession: {
                 type: Object,
             },
@@ -24,19 +28,71 @@ export default class PharmacogenomicsReport extends LitElement {
     }
 
     #init() {
+        this.active = true;
+        this.variants = [];
         this.config = this.getDefaultConfig();
     }
 
     update(changedProperties) {
-        if (changedProperties.has("sampleId")) {
+        if (changedProperties.has("sampleId") || changedProperties.has("opencgaSession") || changedProperties.has("active")) {
             this.sampleIdObserver();
         }
         super.update(changedProperties);
     }
 
-    sampleIdObserver() {
-        if (this.opencgaSession && this.sampleId) {
-            // TODO
+    async sampleIdObserver() {
+        this.variants = [];
+        if (this.opencgaSession && this.sampleId && this.active) {
+            // 0. Initialize Cellbase client instance
+            const cellbaseClient = new CellBaseClient({
+                // host: this.opencgaSession?.project?.cellbase?.url || this.opencgaSession?.project?.internal?.cellbase?.url,
+                host: "https://ws.zettagenomics.com/cellbase",
+                version: "v5.5",
+                species: "hsapiens",
+            });
+
+            // 1. Import all PGx variants from Cellbase
+            const pgxVariantsResponse = await cellbaseClient.get("clinical", "pharmacogenomics", null, "distinct", {
+                field: "variants.location",
+                assembly: "grch38",
+                dataRelease: "5",
+            });
+
+            // 2. Get the list of variants available in OpenCGA
+            const pgxVariants = pgxVariantsResponse.responses[0].results;
+            const chunkSize = 200;
+            const promises = [];
+            for (let i = 0; i < pgxVariants.length; i = i + chunkSize) {
+                const chunk = pgxVariants.slice(i, i + chunkSize);
+                const query = {
+                    region: chunk.join(","),
+                    sample: this.sampleId,
+                    include: "id",
+                    study: this.opencgaSession.study.fqn,
+                };
+                promises.push(this.opencgaSession.opencgaClient.clinical().queryVariant(query));
+            }
+            const variantsResponses = await Promise.all(promises);
+
+            // 3. Generate the list of unique variants to filter
+            const variantIds = new Set();
+            variantsResponses.forEach(variantResponse => {
+                variantResponse.responses[0].results.forEach(variant => {
+                    variantIds.add(variant.id);
+                });
+            });
+
+            // 4. Import variants info from CellBase
+            // const variantsInfoResponse = await cellbaseClient.get("clinical", "pharmacogenomics", null, "search", {
+            const variantIdsStr = Array.from(variantIds).join(",");
+            const variantsInfoResponse = await cellbaseClient.get("genomic", "variant", variantIdsStr, "annotation", {
+                assembly: "grch38",
+                dataRelease: "5",
+            });
+
+            // 5. Save variants and request update
+            this.variants = variantsInfoResponse.responses.map(response => response.results[0]);
+            this.requestUpdate();
         }
     }
 

From cc6a8a7452bb152052a74b43ada72551793c85ea Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Wed, 10 May 2023 17:59:16 +0200
Subject: [PATCH 13/39] wc: increase chunk size in pgx variants of
 browser-template

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

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
index 94b3c8c49f..4b662ae672 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
@@ -381,7 +381,7 @@ class VariantInterpreterBrowserTemplate extends LitElement {
 
         // 2. Get the list of variants available in OpenCGA
         const pgxVariants = pgxVariantsResponse.responses[0].results;
-        const chunkSize = 100;
+        const chunkSize = 200;
         const promises = [];
         for (let i = 0; i < pgxVariants.length; i = i + chunkSize) {
             const chunk = pgxVariants.slice(i, i + chunkSize);

From 92fb0020f1f5939c5921cbafe4a200b39f5ee80f Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 11 May 2023 10:27:02 +0200
Subject: [PATCH 14/39] iva: remove enabledComponents print in iva-app

---
 src/sites/iva/iva-app.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/sites/iva/iva-app.js b/src/sites/iva/iva-app.js
index b3cac438fc..bedf508cf0 100644
--- a/src/sites/iva/iva-app.js
+++ b/src/sites/iva/iva-app.js
@@ -1257,7 +1257,6 @@ class IvaApp extends LitElement {
             }
 
             <!-- This is where main IVA application is rendered -->
-            ${console.log("Enabled components", Object.keys(this.config.enabledComponents).filter(key => this.config.enabledComponents[key])) }
             <div class="container-fluid" style="min-height:calc(100vh - 100px);">
                 ${this.config.enabledComponents.home ? html`
                     <div class="content" id="home">

From 350c4ef5fb59c59fab6ef0b424d94df324de8ac7 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 11 May 2023 11:02:51 +0200
Subject: [PATCH 15/39] wc: remove pharmacogenomics step in interpreter

---
 .../interpretation/variant-interpreter.js       | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter.js b/src/webcomponents/variant/interpretation/variant-interpreter.js
index 9d846cfec6..56333da53d 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter.js
@@ -26,7 +26,6 @@ import "./variant-interpreter-browser-rd.js";
 import "./variant-interpreter-browser-cancer.js";
 import "./variant-interpreter-review.js";
 import "./variant-interpreter-methods.js";
-import "../../clinical/pharmacogenomics/pharmacogenomics-report.js";
 import "../../commons/opencga-active-filters.js";
 import "../../download-button.js";
 import "../../loading-spinner.js";
@@ -248,12 +247,6 @@ class VariantInterpreter extends LitElement {
                     description: "",
                     icon: "fa fa-search"
                 },
-                {
-                    id: "pharmacogenomics",
-                    title: "Pharmacogenomics",
-                    description: "",
-                    icon: "fas fa-pills",
-                },
                 {
                     id: "review",
                     title: "Interpretation Review",
@@ -503,16 +496,6 @@ class VariantInterpreter extends LitElement {
                                 </div>
                             ` : null}
 
-                            ${this.activeTab["pharmacogenomics"] ? html`
-                                <div id="${this._prefix}pharmacogenomics" >
-                                    <pharmacogenomics-report
-                                        .opencgaSession="${this.opencgaSession}"
-                                        .sampleId="${(this.clinicalAnalysis?.proband?.samples || [])[0]?.id || ""}"
-                                        >
-                                    </pharmacogenomics-report>
-                                </div>
-                            ` : nothing}
-
                             ${this.activeTab["review"] ? html`
                                 <div id="${this._prefix}review" class="clinical-portal-content">
                                     <variant-interpreter-review

From 1868d3d27d8be186c6c867c93b3cd06eac0713bd Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 11 May 2023 11:03:17 +0200
Subject: [PATCH 16/39] wc: add new tab in variant interpreter brwoser for pgx

---
 .../variant-interpreter-browser.js               | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser.js
index 3c1c31acae..b01bc1ecfd 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser.js
@@ -23,6 +23,7 @@ import "./variant-interpreter-browser-cnv.js";
 import "./variant-interpreter-browser-rearrangement.js";
 import "../../visualization/genome-browser.js";
 import "../../commons/view/detail-tabs.js";
+import "../../clinical/pharmacogenomics/pharmacogenomics-report.js";
 
 class VariantInterpreterBrowser extends LitElement {
 
@@ -454,6 +455,21 @@ class VariantInterpreterBrowser extends LitElement {
                 }
             }
 
+            // TODO: we would need to check if pharmacogenomics tab is enabled or not
+            items.push({
+                id: "pharmacogenomics",
+                name: "Pharmacogenomics",
+                render: (clinicalAnalysis, active, opencgaSession) => html`
+                    <div>
+                        <pharmacogenomics-report
+                            .sampleId="${clinicalAnalysis?.proband?.samples?.[0]?.id || ""}"
+                            .active="${active}"
+                            .opencgaSession="${opencgaSession}">
+                        </pharmacogenomics-report>
+                    </div>
+                `,
+            });
+
             // Append genome browser
             if (this.settings.hideGenomeBrowser === undefined || this.settings.hideGenomeBrowser === false) {
                 items.push({

From 664d760c715cbfba7d6e12c37f0671438bed485e Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 11 May 2023 11:59:25 +0200
Subject: [PATCH 17/39] wc: fix getting pgx drugs info in
 pharmacogenomics-report component

---
 .../pharmacogenomics/pharmacogenomics-report.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
index ef17535f36..274fbaf2d1 100644
--- a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
@@ -78,20 +78,25 @@ export default class PharmacogenomicsReport extends LitElement {
             const variantIds = new Set();
             variantsResponses.forEach(variantResponse => {
                 variantResponse.responses[0].results.forEach(variant => {
-                    variantIds.add(variant.id);
+                    variantIds.add(variant.id.split(":").slice(0, 2).join(":"));
                 });
             });
 
             // 4. Import variants info from CellBase
-            // const variantsInfoResponse = await cellbaseClient.get("clinical", "pharmacogenomics", null, "search", {
-            const variantIdsStr = Array.from(variantIds).join(",");
-            const variantsInfoResponse = await cellbaseClient.get("genomic", "variant", variantIdsStr, "annotation", {
+            const variantsInfoResponse = await cellbaseClient.get("clinical", "pharmacogenomics", null, "search", {
+                location: Array.from(variantIds).join(","),
                 assembly: "grch38",
                 dataRelease: "5",
             });
 
             // 5. Save variants and request update
-            this.variants = variantsInfoResponse.responses.map(response => response.results[0]);
+            this.variants = variantsInfoResponse.responses[0].results.map(result => {
+                return {
+                    ...result,
+                    variants: result.variants.filter(v => variantIds.has(v.location)),
+                };
+            });
+            console.log(this.variants);
             this.requestUpdate();
         }
     }
@@ -100,7 +105,7 @@ export default class PharmacogenomicsReport extends LitElement {
         return html`
             <div class="col-md-10 col-md-offset-1">
                 ${this.config.showToolTitle ? html`
-                    <tool-header class="bg-white" title="${"Pharmacogenomics"}"></tool-header>
+                    <tool-header class="bg-white" title="${`Pharmacogenomics ${this.sampleId || ""}`}"></tool-header>
                 ` : nothing}
             </div>
         `;

From 58b0695432eb0d1ecba4cba3d14399f418aebab7 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 11 May 2023 11:59:44 +0200
Subject: [PATCH 18/39] wc: work in progress in pharmacogenomics grid

---
 .../pharmacogenomics/pharmacogenomics-grid.js | 89 ++++++++++++++++++-
 1 file changed, 86 insertions(+), 3 deletions(-)

diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js
index e49118fb92..6c851bfc95 100644
--- a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js
@@ -1,4 +1,8 @@
 import {LitElement, html} from "lit";
+import UtilsNew from "../../../core/utils-new.js";
+import GridCommons from "../../commons/grid-commons.js";
+import "../../commons/opencb-grid-toolbar.js";
+import "../../loading-spinner.js";
 
 export default class PharmacogenomicsGrid extends LitElement {
 
@@ -16,25 +20,104 @@ export default class PharmacogenomicsGrid extends LitElement {
             opencgaSession: {
                 type: Object,
             },
+            variants: {
+                type: Array,
+            },
+            config: {
+                type: Object,
+            },
         };
     }
 
     #init() {
-        this.config = this.getDefaultConfig();
+        this._prefix = UtilsNew.randomString(8);
+        this._rows = [];
+        this._columns = this.getDefaultColumns();
+        this._config = this.getDefaultConfig();
     }
 
     update(changedProperties) {
+        if (changedProperties.has("opencgaSession") || changedProperties.has("config")) {
+            this._config = {
+                ...this.getDefaultConfig(),
+                ...this.config,
+            };
+            this.gridCommons = new GridCommons(this._prefix + "PgxTable", this, this._config);
+        }
+
         super.update(changedProperties);
     }
 
+    updated(changedProperties) {
+        if (changedProperties.has("variants") || changedProperties.has("config") || changedProperties.has("opencgaSession")) {
+            this.renderVariants();
+        }
+    }
+
+    renderVariants() {
+        this.table = $(`#${this._prefix}PgxTable`);
+        this.table.bootstrapTable("destroy");
+        this.table.bootstrapTable({
+            data: this.variants,
+            columns: this._columns,
+            sidePagination: "local",
+            iconsPrefix: GridCommons.GRID_ICONS_PREFIX,
+            icons: GridCommons.GRID_ICONS,
+            uniqueId: "id",
+            pagination: this._config.pagination,
+            pageSize: this._config.pageSize,
+            pageList: this._config.pageList,
+            paginationVAlign: "both",
+            formatShowingRows: this.gridCommons.formatShowingRows,
+            detailView: this._config.detailView,
+            detailFormatter: (value, row) => this.detailFormatter(value, row),
+            // onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
+            onDblClickRow: (row, element) => {
+                if (this._config.detailView) {
+                    if (element[0].innerHTML.includes("fa-plus")) {
+                        $("#" + this.gridId).bootstrapTable("expandRow", element[0].dataset.index);
+                    } else {
+                        $("#" + this.gridId).bootstrapTable("collapseRow", element[0].dataset.index);
+                    }
+                }
+            },
+            // onExpandRow: (index, row) => {
+            //     this.gridCommons.onClickRow(row.id, row, this.querySelector(`tr[data-index="${index}"]`));
+            // },
+            onPostBody: data => {
+                this.gridCommons.onLoadSuccess({rows: data, total: data.length}, 2);
+                this._rows = data;
+            },
+        });
+    }
+
+    detailFormatter(value, row) {
+        return `
+            <div style='padding:20px;'>
+                ${row.sentence}
+            </div>
+        `;
+    }
+
     render() {
         return html`
-            <div>Pharmacogenomics Grid</div>
+            <div class="force-overflow">
+                <table id="${this._prefix}PgxTable"></table>
+            </div>
         `;
     }
 
+    getDefaultColumns() {
+        return [];
+    }
+
     getDefaultConfig() {
-        return {};
+        return {
+            pagination: true,
+            pageSize: 10,
+            pageList: [5, 10, 25],
+            detailView: true,
+        };
     }
 
 }

From 55b2c141df21b612bae3af14c40d7c8f83908f6e Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 11 May 2023 13:25:59 +0200
Subject: [PATCH 19/39] wc: keep previous filters when filtering by
 pharmacogenomics

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

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
index 4b662ae672..ca7b4c018c 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
@@ -404,9 +404,10 @@ class VariantInterpreterBrowserTemplate extends LitElement {
         });
 
         // 4. Update the query
-        const lockedFields = [...this._config?.filter?.activeFilters?.lockedFields.map(key => key.id), "study"];
+        // const lockedFields = [...this._config?.filter?.activeFilters?.lockedFields.map(key => key.id), "study"];
         this.query = {
-            ...UtilsNew.filterKeys(this.executedQuery, lockedFields),
+            ...this.query,
+            // ...UtilsNew.filterKeys(this.executedQuery, lockedFields),
             id: Array.from(variantIds).join(","),
         };
         this.notifyQueryChange();

From c82d60e307763849693d46ef38eb72578fa8b91d Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 11 May 2023 13:58:33 +0200
Subject: [PATCH 20/39] wc: keep previous ids when filtering by
 pharmacogenomics

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

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
index ca7b4c018c..f0499506d0 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
@@ -404,11 +404,10 @@ class VariantInterpreterBrowserTemplate extends LitElement {
         });
 
         // 4. Update the query
-        // const lockedFields = [...this._config?.filter?.activeFilters?.lockedFields.map(key => key.id), "study"];
+        const joinedVariantIds = Array.from(variantIds).join(",");
         this.query = {
             ...this.query,
-            // ...UtilsNew.filterKeys(this.executedQuery, lockedFields),
-            id: Array.from(variantIds).join(","),
+            id: this.query.id ? [this.query.id, joinedVariantIds].join(",") : joinedVariantIds,
         };
         this.notifyQueryChange();
         this.requestUpdate();

From a2277e5e30372c4ebb777cabf78c83bb9b6822a5 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 11 May 2023 15:52:57 +0200
Subject: [PATCH 21/39] wc: change endpoint to obtain pgx annotation in
 pharmacogenomics-report

---
 .../pharmacogenomics-report.js                | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
index 274fbaf2d1..ccc241a6c5 100644
--- a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
@@ -78,23 +78,30 @@ export default class PharmacogenomicsReport extends LitElement {
             const variantIds = new Set();
             variantsResponses.forEach(variantResponse => {
                 variantResponse.responses[0].results.forEach(variant => {
-                    variantIds.add(variant.id.split(":").slice(0, 2).join(":"));
+                    variantIds.add(variant.id);
                 });
             });
 
             // 4. Import variants info from CellBase
-            const variantsInfoResponse = await cellbaseClient.get("clinical", "pharmacogenomics", null, "search", {
-                location: Array.from(variantIds).join(","),
-                assembly: "grch38",
-                dataRelease: "5",
-            });
+            const ids = Array.from(variantIds);
+            const variantsPromises = [];
+            for (let i = 0; i < ids.length; i = i + 50) {
+                const chunk = ids.slice(i, i + 50);
+                const query = {
+                    assembly: "grch38",
+                    dataRelease: "5",
+                    include: "pharmacogenomics",
+                };
+                variantsPromises.push(cellbaseClient.get("genomic", "variant", chunk.join(","), "annotation", query));
+            }
+            const variantsInfoResponse = await Promise.all(variantsPromises);
 
             // 5. Save variants and request update
-            this.variants = variantsInfoResponse.responses[0].results.map(result => {
-                return {
-                    ...result,
-                    variants: result.variants.filter(v => variantIds.has(v.location)),
-                };
+            this.variants = [];
+            variantsInfoResponse.forEach(response => {
+                response.responses.forEach(res => {
+                    this.variants.push(res.results[0]);
+                });
             });
             console.log(this.variants);
             this.requestUpdate();

From 804a20db7748af0676cc498a3793a766ad3a4e1c Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 11 May 2023 15:58:58 +0200
Subject: [PATCH 22/39] wc: display a loading indicator in
 pharmacogenomics-report

---
 .../pharmacogenomics/pharmacogenomics-report.js       | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
index ccc241a6c5..a6f39c0fc1 100644
--- a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
@@ -1,6 +1,7 @@
 import {LitElement, html, nothing} from "lit";
 import {CellBaseClient} from "../../../core/clients/cellbase/cellbase-client.js";
 import "../../commons/tool-header.js";
+import "../../loading-spinner.js";
 
 export default class PharmacogenomicsReport extends LitElement {
 
@@ -29,6 +30,7 @@ export default class PharmacogenomicsReport extends LitElement {
 
     #init() {
         this.active = true;
+        this.isLoading = false;
         this.variants = [];
         this.config = this.getDefaultConfig();
     }
@@ -43,6 +45,8 @@ export default class PharmacogenomicsReport extends LitElement {
     async sampleIdObserver() {
         this.variants = [];
         if (this.opencgaSession && this.sampleId && this.active) {
+            this.isLoading = true;
+            this.requestUpdate();
             // 0. Initialize Cellbase client instance
             const cellbaseClient = new CellBaseClient({
                 // host: this.opencgaSession?.project?.cellbase?.url || this.opencgaSession?.project?.internal?.cellbase?.url,
@@ -104,11 +108,18 @@ export default class PharmacogenomicsReport extends LitElement {
                 });
             });
             console.log(this.variants);
+            this.isLoading = false;
             this.requestUpdate();
         }
     }
 
     render() {
+        if (this.isLoading) {
+            return html`
+                <loading-spinner></loading-spinner>
+            `;
+        }
+
         return html`
             <div class="col-md-10 col-md-offset-1">
                 ${this.config.showToolTitle ? html`

From 7aeb0028ad9f93998acbebbcc0fead3d6fd6cf2f Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 11 May 2023 16:15:58 +0200
Subject: [PATCH 23/39] wc: minor style fixes in loading view of
 pharmacogenomics-report

---
 .../clinical/pharmacogenomics/pharmacogenomics-report.js      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
index a6f39c0fc1..c981ab3020 100644
--- a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
@@ -116,7 +116,9 @@ export default class PharmacogenomicsReport extends LitElement {
     render() {
         if (this.isLoading) {
             return html`
-                <loading-spinner></loading-spinner>
+                <div style="padding-top:32px">
+                    <loading-spinner></loading-spinner>
+                </div>
             `;
         }
 

From b4d226687cdbd5d61193e4f144415fad60a1a8c8 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 11 May 2023 16:25:11 +0200
Subject: [PATCH 24/39] wc: initialize pharmacogenomics grid and add basic
 columns

---
 .../pharmacogenomics/pharmacogenomics-grid.js | 38 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js
index 6c851bfc95..6140563378 100644
--- a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js
@@ -94,7 +94,7 @@ export default class PharmacogenomicsGrid extends LitElement {
     detailFormatter(value, row) {
         return `
             <div style='padding:20px;'>
-                ${row.sentence}
+                -
             </div>
         `;
     }
@@ -108,7 +108,41 @@ export default class PharmacogenomicsGrid extends LitElement {
     }
 
     getDefaultColumns() {
-        return [];
+        return [
+            {
+                id: "position",
+                title: "Chr:Pos",
+                field: "chromosome",
+                formatter: (value, row) => `${row.chromosome}:${row.start}`,
+            },
+            {
+                id: "id",
+                title: "Variant",
+                formatter: () => "-",
+            },
+            {
+                id: "genotype",
+                title: "Genotype",
+                formatter: (value, row) => {
+                    return `${row.reference}/${row.alternate}`;
+                },
+            },
+            {
+                id: "gene",
+                title: "Gene",
+                formatter: () => "-",
+            },
+            {
+                id: "drugs",
+                title: "Drugs",
+                formatter: () => "-",
+            },
+            {
+                id: "phenotypeCategory",
+                title: "Phenotype Category",
+                formatter: () => "-",
+            },
+        ];
     }
 
     getDefaultConfig() {

From 774fcca56de87f40e553d04dbec36543513b3a97 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 11 May 2023 16:25:29 +0200
Subject: [PATCH 25/39] wc: include pharmacogenomics grid in pgx-report
 component

---
 .../clinical/pharmacogenomics/pharmacogenomics-report.js     | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
index c981ab3020..20b257ace1 100644
--- a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
@@ -1,5 +1,6 @@
 import {LitElement, html, nothing} from "lit";
 import {CellBaseClient} from "../../../core/clients/cellbase/cellbase-client.js";
+import "./pharmacogenomics-grid.js";
 import "../../commons/tool-header.js";
 import "../../loading-spinner.js";
 
@@ -126,6 +127,10 @@ export default class PharmacogenomicsReport extends LitElement {
             <div class="col-md-10 col-md-offset-1">
                 ${this.config.showToolTitle ? html`
                     <tool-header class="bg-white" title="${`Pharmacogenomics ${this.sampleId || ""}`}"></tool-header>
+                    <pharmacogenomics-grid
+                        .variants="${this.variants}"
+                        .opencgaSession="${this.opencgaSession}">
+                    </pharmacogenomics-grid>
                 ` : nothing}
             </div>
         `;

From 0e186412017fa3f531a267b08c2e80badfce4eb8 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 11 May 2023 17:08:10 +0200
Subject: [PATCH 26/39] wc: some improvements in pharmacogenomics-grid

---
 .../pharmacogenomics/pharmacogenomics-grid.js   | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js
index 6140563378..ded3a7e157 100644
--- a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js
@@ -31,8 +31,6 @@ export default class PharmacogenomicsGrid extends LitElement {
 
     #init() {
         this._prefix = UtilsNew.randomString(8);
-        this._rows = [];
-        this._columns = this.getDefaultColumns();
         this._config = this.getDefaultConfig();
     }
 
@@ -50,16 +48,20 @@ export default class PharmacogenomicsGrid extends LitElement {
 
     updated(changedProperties) {
         if (changedProperties.has("variants") || changedProperties.has("config") || changedProperties.has("opencgaSession")) {
-            this.renderVariants();
+            this.renderTable();
         }
     }
 
-    renderVariants() {
+    renderTable() {
+        return this.renderLocalTable();
+    }
+
+    renderLocalTable() {
         this.table = $(`#${this._prefix}PgxTable`);
         this.table.bootstrapTable("destroy");
         this.table.bootstrapTable({
             data: this.variants,
-            columns: this._columns,
+            columns: this.getDefaultColumns(),
             sidePagination: "local",
             iconsPrefix: GridCommons.GRID_ICONS_PREFIX,
             icons: GridCommons.GRID_ICONS,
@@ -67,10 +69,8 @@ export default class PharmacogenomicsGrid extends LitElement {
             pagination: this._config.pagination,
             pageSize: this._config.pageSize,
             pageList: this._config.pageList,
-            paginationVAlign: "both",
-            formatShowingRows: this.gridCommons.formatShowingRows,
             detailView: this._config.detailView,
-            detailFormatter: (value, row) => this.detailFormatter(value, row),
+            detailFormatter: this.detailFormatter,
             // onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             onDblClickRow: (row, element) => {
                 if (this._config.detailView) {
@@ -86,7 +86,6 @@ export default class PharmacogenomicsGrid extends LitElement {
             // },
             onPostBody: data => {
                 this.gridCommons.onLoadSuccess({rows: data, total: data.length}, 2);
-                this._rows = data;
             },
         });
     }

From 6f9d02f4d2b0fd9e625f7f51e35e7f1507b034d8 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 11 May 2023 17:41:58 +0200
Subject: [PATCH 27/39] wc: overwrite id field in query after applying
 pharmacogenomics filter

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

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
index f0499506d0..9109564ff8 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
@@ -404,10 +404,9 @@ class VariantInterpreterBrowserTemplate extends LitElement {
         });
 
         // 4. Update the query
-        const joinedVariantIds = Array.from(variantIds).join(",");
         this.query = {
             ...this.query,
-            id: this.query.id ? [this.query.id, joinedVariantIds].join(",") : joinedVariantIds,
+            id: Array.from(variantIds).join(","),
         };
         this.notifyQueryChange();
         this.requestUpdate();

From 80788e861899e874a505fb05a8cd78f0e7e37603 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 12 May 2023 13:10:53 +0200
Subject: [PATCH 28/39] wc: fix importing variants and annotation in
 pharmacogenomics-report component

---
 .../pharmacogenomics-report.js                | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
index 20b257ace1..550bb327c8 100644
--- a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
@@ -72,24 +72,25 @@ export default class PharmacogenomicsReport extends LitElement {
                 const query = {
                     region: chunk.join(","),
                     sample: this.sampleId,
-                    include: "id",
+                    // include: "id",
                     study: this.opencgaSession.study.fqn,
+                    includeSampleId: true,
                 };
                 promises.push(this.opencgaSession.opencgaClient.clinical().queryVariant(query));
             }
             const variantsResponses = await Promise.all(promises);
 
-            // 3. Generate the list of unique variants to filter
-            const variantIds = new Set();
+            // 3. Generate the list of variants
+            const variants = new Map();
             variantsResponses.forEach(variantResponse => {
                 variantResponse.responses[0].results.forEach(variant => {
-                    variantIds.add(variant.id);
+                    variants.set(variant.id, variant);
                 });
             });
 
-            // 4. Import variants info from CellBase
-            const ids = Array.from(variantIds);
-            const variantsPromises = [];
+            // 4. Import pharmacogenomics annotation from cellbase
+            const ids = Array.from(variants.keys());
+            const pgxAnnotationPromises = [];
             for (let i = 0; i < ids.length; i = i + 50) {
                 const chunk = ids.slice(i, i + 50);
                 const query = {
@@ -97,17 +98,21 @@ export default class PharmacogenomicsReport extends LitElement {
                     dataRelease: "5",
                     include: "pharmacogenomics",
                 };
-                variantsPromises.push(cellbaseClient.get("genomic", "variant", chunk.join(","), "annotation", query));
+                pgxAnnotationPromises.push(cellbaseClient.get("genomic", "variant", chunk.join(","), "annotation", query));
             }
-            const variantsInfoResponse = await Promise.all(variantsPromises);
-
-            // 5. Save variants and request update
-            this.variants = [];
-            variantsInfoResponse.forEach(response => {
-                response.responses.forEach(res => {
-                    this.variants.push(res.results[0]);
+            const pgxAnnotationResponses = await Promise.all(pgxAnnotationPromises);
+
+            // 5. Merge pgx annotation with variants
+            pgxAnnotationResponses.forEach(pgxAnnotationResponse => {
+                pgxAnnotationResponse.responses.forEach(response => {
+                    if (variants.has(response.id)) {
+                        variants.get(response.id).annotation.pharmacogenomics = response.results[0].pharmacogenomics;
+                    }
                 });
             });
+
+            // 5. Save variants and request update
+            this.variants = Array.from(variants.values());
             console.log(this.variants);
             this.isLoading = false;
             this.requestUpdate();
@@ -128,6 +133,7 @@ export default class PharmacogenomicsReport extends LitElement {
                 ${this.config.showToolTitle ? html`
                     <tool-header class="bg-white" title="${`Pharmacogenomics ${this.sampleId || ""}`}"></tool-header>
                     <pharmacogenomics-grid
+                        .sampleId="${this.sampleId}"
                         .variants="${this.variants}"
                         .opencgaSession="${this.opencgaSession}">
                     </pharmacogenomics-grid>

From 865543844555a11c3e4d77fedac4196057ec3e27 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 12 May 2023 13:11:12 +0200
Subject: [PATCH 29/39] wc: added initial variant ccolumns in
 pharmacogenomics-grid

---
 .../pharmacogenomics/pharmacogenomics-grid.js | 159 ++++++++++++++----
 1 file changed, 127 insertions(+), 32 deletions(-)

diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js
index ded3a7e157..ebb7915168 100644
--- a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js
@@ -1,6 +1,8 @@
 import {LitElement, html} from "lit";
 import UtilsNew from "../../../core/utils-new.js";
 import GridCommons from "../../commons/grid-commons.js";
+import VariantGridFormatter from "../../variant/variant-grid-formatter.js";
+import VariantInterpreterGridFormatter from "../../variant/interpretation/variant-interpreter-grid-formatter.js";
 import "../../commons/opencb-grid-toolbar.js";
 import "../../loading-spinner.js";
 
@@ -20,6 +22,9 @@ export default class PharmacogenomicsGrid extends LitElement {
             opencgaSession: {
                 type: Object,
             },
+            sampleId: {
+                type: String,
+            },
             variants: {
                 type: Array,
             },
@@ -71,6 +76,10 @@ export default class PharmacogenomicsGrid extends LitElement {
             pageList: this._config.pageList,
             detailView: this._config.detailView,
             detailFormatter: this.detailFormatter,
+
+            // This has been added to make the grid properties in all bootstrap table formatters, as some grid formattes needs them
+            variantGrid: this,
+
             // onClickRow: (row, selectedElement) => this.gridCommons.onClickRow(row.id, row, selectedElement),
             onDblClickRow: (row, element) => {
                 if (this._config.detailView) {
@@ -108,39 +117,93 @@ export default class PharmacogenomicsGrid extends LitElement {
 
     getDefaultColumns() {
         return [
-            {
-                id: "position",
-                title: "Chr:Pos",
-                field: "chromosome",
-                formatter: (value, row) => `${row.chromosome}:${row.start}`,
-            },
-            {
-                id: "id",
-                title: "Variant",
-                formatter: () => "-",
-            },
-            {
-                id: "genotype",
-                title: "Genotype",
-                formatter: (value, row) => {
-                    return `${row.reference}/${row.alternate}`;
+            [
+                {
+                    id: "id",
+                    title: "Variant",
+                    field: "id",
+                    rowspan: 2,
+                    colspan: 1,
+                    formatter: (value, row, index) => {
+                        return VariantGridFormatter.variantFormatter(value, row, index, this.opencgaSession.project.organism.assembly, this._config);
+                    },
                 },
-            },
-            {
-                id: "gene",
-                title: "Gene",
-                formatter: () => "-",
-            },
-            {
-                id: "drugs",
-                title: "Drugs",
-                formatter: () => "-",
-            },
-            {
-                id: "phenotypeCategory",
-                title: "Phenotype Category",
-                formatter: () => "-",
-            },
+                {
+                    id: "genotype",
+                    title: "Genotype",
+                    rowspan: 2,
+                    colspan: 1,
+                    field: {
+                        sampleId: this.sampleId,
+                        quality: this._config.quality,
+                        config: this._config,
+                    },
+                    formatter: VariantInterpreterGridFormatter.sampleGenotypeFormatter,
+                    align: "center",
+                    nucleotideGenotype: true,
+                    visible: !!this.sampleId,
+                },
+                {
+                    id: "gene",
+                    title: "Gene",
+                    field: "gene",
+                    rowspan: 2,
+                    colspan: 1,
+                    formatter: (value, row, index) => VariantGridFormatter.geneFormatter(row, index, {}, this.opencgaSession, this._config),
+                },
+                {
+                    id: "consequenceType",
+                    title: "Consequence Type",
+                    field: "consequenceType",
+                    rowspan: 2,
+                    colspan: 1,
+                    formatter: (value, row) => VariantGridFormatter.consequenceTypeFormatter(value, row, null, this._config),
+                },
+                {
+                    id: "populationFrequencies",
+                    title: "Reference Population Frequencies",
+                    field: "populationFrequencies",
+                    rowspan: 2,
+                    colspan: 1,
+                    formatter: VariantInterpreterGridFormatter.clinicalPopulationFrequenciesFormatter.bind(this),
+                },
+                {
+                    id: "clinicalInfo",
+                    title: "Clinical Info",
+                    rowspan: 1,
+                    colspan: 3,
+                    align: "center"
+                },
+            ],
+            [
+                {
+                    id: "clinvar",
+                    title: "ClinVar",
+                    field: "clinvar",
+                    colspan: 1,
+                    rowspan: 1,
+                    formatter: VariantGridFormatter.clinicalTraitAssociationFormatter,
+                    align: "center",
+                },
+                {
+                    id: "cosmic",
+                    title: "Cosmic",
+                    field: "cosmic",
+                    colspan: 1,
+                    rowspan: 1,
+                    formatter: VariantGridFormatter.clinicalTraitAssociationFormatter,
+                    align: "center",
+                },
+                {
+                    id: "hotspots",
+                    title: "Cancer <br> Hotspots",
+                    field: "hotspots",
+                    colspan: 1,
+                    rowspan: 1,
+                    formatter: VariantGridFormatter.clinicalCancerHotspotsFormatter,
+                    align: "center",
+                },
+            ],
         ];
     }
 
@@ -150,6 +213,38 @@ export default class PharmacogenomicsGrid extends LitElement {
             pageSize: 10,
             pageList: [5, 10, 25],
             detailView: true,
+            quality: {
+                qual: 30,
+                dp: 20
+            },
+            populationFrequencies: [
+                "1000G:ALL",
+                "GNOMAD_GENOMES:ALL",
+                "GNOMAD_EXOMES:ALL",
+            ],
+            populationFrequenciesConfig: {
+                displayMode: "FREQUENCY_BOX"
+            },
+            genotype: {
+                type: "ALLELES"
+            },
+            geneSet: {
+                ensembl: true,
+                refseq: true,
+            },
+            consequenceType: {
+                // all: false,
+                maneTranscript: true,
+                gencodeBasicTranscript: false,
+                ensemblCanonicalTranscript: true,
+                refseqTranscript: true,
+                ccdsTranscript: false,
+                ensemblTslTranscript: false,
+                proteinCodingTranscript: false,
+                highImpactConsequenceTypeTranscript: false,
+
+                showNegativeConsequenceTypes: true
+            },
         };
     }
 

From 71ca5bea68df40ce5c697961a4d0e175b566250c Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 12 May 2023 13:52:34 +0200
Subject: [PATCH 30/39] wc: added detail table content in pharmacogenomics-grid
 component

---
 .../pharmacogenomics/pharmacogenomics-grid.js | 48 +++++++++++++++++--
 1 file changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js
index ebb7915168..7bb20c8628 100644
--- a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-grid.js
@@ -75,7 +75,7 @@ export default class PharmacogenomicsGrid extends LitElement {
             pageSize: this._config.pageSize,
             pageList: this._config.pageList,
             detailView: this._config.detailView,
-            detailFormatter: this.detailFormatter,
+            detailFormatter: (value, row) => this.detailFormatter(value, row),
 
             // This has been added to make the grid properties in all bootstrap table formatters, as some grid formattes needs them
             variantGrid: this,
@@ -100,10 +100,50 @@ export default class PharmacogenomicsGrid extends LitElement {
     }
 
     detailFormatter(value, row) {
+        let result = "<div style='padding-bottom:24px'>";
+        let detailHtml = "";
+        if (row?.annotation?.pharmacogenomics) {
+            detailHtml += "<div style='padding: 10px 0px 5px 25px'><h4>Drugs</h4></div>";
+            detailHtml += "<div style='padding: 5px 40px'>";
+            detailHtml += this.drugsTableFormatter(row);
+            detailHtml += "</div>";
+        }
+        result += detailHtml + "</div>";
+        return result;
+    }
+
+    drugsTableFormatter(variant) {
+        const drugsRows = variant.annotation.pharmacogenomics
+            // .filter(item => item.types.includes("Drug"))
+            .map(item => {
+                const phenotypes = item.annotations.map(annotation => `<div>${annotation.phenotypes.join(", ")}</div>`);
+                const phenotypeTypes = item.annotations.map(annotation => `<div>${annotation.phenotypeType}</div>`);
+                return `
+                    <tr>
+                        <td>${item.id}</td>
+                        <td>${item.name || "-"}</td>
+                        <td>${item.source || "-"}</td>
+                        <td>${phenotypes.join("")}</td>
+                        <td>${phenotypeTypes.join("")}</td>
+                    </tr>
+                `;
+            });
+
         return `
-            <div style='padding:20px;'>
-                -
-            </div>
+            <table id="DrugsTable" class="table table-hover table-no-bordered">
+                <thead>
+                    <tr>
+                        <th style="padding:8px;">ID</th>
+                        <th style="padding:8px;">Name</th>
+                        <th style="padding:8px;">Source</th>
+                        <th style="padding:8px;">Phenotypes</th>
+                        <th style="padding:8px;">Phenotype Types</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    ${drugsRows.join("")}
+                </tbody>
+            </table>
         `;
     }
 

From 1d2b79d42e5a3aa88d8e3bcb9bb50bb11bbe9d50 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 12 May 2023 13:54:58 +0200
Subject: [PATCH 31/39] wc: minor fixes in pharmacogenomics report component

---
 .../pharmacogenomics/pharmacogenomics-report.js      | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
index 550bb327c8..47aa03db0e 100644
--- a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
@@ -129,15 +129,15 @@ export default class PharmacogenomicsReport extends LitElement {
         }
 
         return html`
-            <div class="col-md-10 col-md-offset-1">
+            <div class="col-md-10 col-md-offset-1" style="padding-bottom:32px;">
                 ${this.config.showToolTitle ? html`
                     <tool-header class="bg-white" title="${`Pharmacogenomics ${this.sampleId || ""}`}"></tool-header>
-                    <pharmacogenomics-grid
-                        .sampleId="${this.sampleId}"
-                        .variants="${this.variants}"
-                        .opencgaSession="${this.opencgaSession}">
-                    </pharmacogenomics-grid>
                 ` : nothing}
+                <pharmacogenomics-grid
+                    .sampleId="${this.sampleId}"
+                    .variants="${this.variants}"
+                    .opencgaSession="${this.opencgaSession}">
+                </pharmacogenomics-grid>
             </div>
         `;
     }

From fe4f5f9b5cf33e33410312f89a700c1cae6010af Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Fri, 12 May 2023 17:22:17 +0200
Subject: [PATCH 32/39] wc: disable pharmacogenomics summary tab in RD browser

---
 .../interpretation/variant-interpreter-browser-rd.js | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-rd.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-rd.js
index 3f61c1ec32..c03faa0a5d 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-rd.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-rd.js
@@ -20,7 +20,6 @@ import "./variant-interpreter-browser-template.js";
 import "./exomiser/variant-interpreter-exomiser-view.js";
 import "../variant-samples.js";
 import "../../visualization/protein-lollipop-variant-view.js";
-import "../../clinical/pharmacogenomics/pharmacogenomics-summary.js";
 
 class VariantInterpreterBrowserRd extends LitElement {
 
@@ -690,17 +689,6 @@ class VariantInterpreterBrowserRd extends LitElement {
                                 </variant-interpreter-exomiser-view>
                             `,
                         },
-                        {
-                            id: "pharmacogenomics",
-                            name: "Pharmacogenomics",
-                            render: (variant, active, opencgaSession) => html`
-                                <pharmacogenomics-summary
-                                    .variant="${variant.id}"
-                                    .active="${active}"
-                                    .opencgaSession="${opencgaSession}">
-                                </pharmacogenomics-summary>
-                            `,
-                        },
                         {
                             id: "json-view",
                             name: "JSON Data",

From 7cc46140016f9529404c988715dd80c4567bb4ba Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Mon, 15 May 2023 12:15:37 +0200
Subject: [PATCH 33/39] wc: remove development code in pharmacogenomics-report
 component

---
 .../clinical/pharmacogenomics/pharmacogenomics-report.js         | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
index 47aa03db0e..115104aece 100644
--- a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
@@ -113,7 +113,6 @@ export default class PharmacogenomicsReport extends LitElement {
 
             // 5. Save variants and request update
             this.variants = Array.from(variants.values());
-            console.log(this.variants);
             this.isLoading = false;
             this.requestUpdate();
         }

From 3e44ac0f0c1ec6c3e4406829edde3d3d16f99712 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Mon, 15 May 2023 13:18:29 +0200
Subject: [PATCH 34/39] wc: added error notification in pharmacogenomics-report
 component

---
 .../pharmacogenomics-report.js                | 144 ++++++++++--------
 1 file changed, 80 insertions(+), 64 deletions(-)

diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
index 115104aece..1fca0a038a 100644
--- a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
@@ -31,7 +31,8 @@ export default class PharmacogenomicsReport extends LitElement {
 
     #init() {
         this.active = true;
-        this.isLoading = false;
+        this.loading = false;
+        this.error = false;
         this.variants = [];
         this.config = this.getDefaultConfig();
     }
@@ -46,86 +47,101 @@ export default class PharmacogenomicsReport extends LitElement {
     async sampleIdObserver() {
         this.variants = [];
         if (this.opencgaSession && this.sampleId && this.active) {
-            this.isLoading = true;
+            this.error = false;
+            this.loading = true;
             this.requestUpdate();
-            // 0. Initialize Cellbase client instance
-            const cellbaseClient = new CellBaseClient({
-                // host: this.opencgaSession?.project?.cellbase?.url || this.opencgaSession?.project?.internal?.cellbase?.url,
-                host: "https://ws.zettagenomics.com/cellbase",
-                version: "v5.5",
-                species: "hsapiens",
-            });
-
-            // 1. Import all PGx variants from Cellbase
-            const pgxVariantsResponse = await cellbaseClient.get("clinical", "pharmacogenomics", null, "distinct", {
-                field: "variants.location",
-                assembly: "grch38",
-                dataRelease: "5",
-            });
-
-            // 2. Get the list of variants available in OpenCGA
-            const pgxVariants = pgxVariantsResponse.responses[0].results;
-            const chunkSize = 200;
-            const promises = [];
-            for (let i = 0; i < pgxVariants.length; i = i + chunkSize) {
-                const chunk = pgxVariants.slice(i, i + chunkSize);
-                const query = {
-                    region: chunk.join(","),
-                    sample: this.sampleId,
-                    // include: "id",
-                    study: this.opencgaSession.study.fqn,
-                    includeSampleId: true,
-                };
-                promises.push(this.opencgaSession.opencgaClient.clinical().queryVariant(query));
-            }
-            const variantsResponses = await Promise.all(promises);
-
-            // 3. Generate the list of variants
-            const variants = new Map();
-            variantsResponses.forEach(variantResponse => {
-                variantResponse.responses[0].results.forEach(variant => {
-                    variants.set(variant.id, variant);
+            try {
+                // 0. Initialize Cellbase client instance
+                const cellbaseClient = new CellBaseClient({
+                    // host: this.opencgaSession?.project?.cellbase?.url || this.opencgaSession?.project?.internal?.cellbase?.url,
+                    host: "https://ws.zettagenomics.com/cellbase",
+                    version: "v5.5",
+                    species: "hsapiens",
                 });
-            });
-
-            // 4. Import pharmacogenomics annotation from cellbase
-            const ids = Array.from(variants.keys());
-            const pgxAnnotationPromises = [];
-            for (let i = 0; i < ids.length; i = i + 50) {
-                const chunk = ids.slice(i, i + 50);
-                const query = {
+
+                // 1. Import all PGx variants from Cellbase
+                const pgxVariantsResponse = await cellbaseClient.get("clinical", "pharmacogenomics", null, "distinct", {
+                    field: "variants.location",
                     assembly: "grch38",
                     dataRelease: "5",
-                    include: "pharmacogenomics",
-                };
-                pgxAnnotationPromises.push(cellbaseClient.get("genomic", "variant", chunk.join(","), "annotation", query));
-            }
-            const pgxAnnotationResponses = await Promise.all(pgxAnnotationPromises);
-
-            // 5. Merge pgx annotation with variants
-            pgxAnnotationResponses.forEach(pgxAnnotationResponse => {
-                pgxAnnotationResponse.responses.forEach(response => {
-                    if (variants.has(response.id)) {
-                        variants.get(response.id).annotation.pharmacogenomics = response.results[0].pharmacogenomics;
-                    }
                 });
-            });
 
-            // 5. Save variants and request update
-            this.variants = Array.from(variants.values());
-            this.isLoading = false;
+                // 2. Get the list of variants available in OpenCGA
+                const pgxVariants = pgxVariantsResponse.responses[0].results;
+                const chunkSize = 200;
+                const promises = [];
+                for (let i = 0; i < pgxVariants.length; i = i + chunkSize) {
+                    const chunk = pgxVariants.slice(i, i + chunkSize);
+                    const query = {
+                        region: chunk.join(","),
+                        sample: this.sampleId,
+                        // include: "id",
+                        study: this.opencgaSession.study.fqn,
+                        includeSampleId: true,
+                    };
+                    promises.push(this.opencgaSession.opencgaClient.clinical().queryVariant(query));
+                }
+                const variantsResponses = await Promise.all(promises);
+
+                // 3. Generate the list of variants
+                const variants = new Map();
+                variantsResponses.forEach(variantResponse => {
+                    variantResponse.responses[0].results.forEach(variant => {
+                        variants.set(variant.id, variant);
+                    });
+                });
+
+                // 4. Import pharmacogenomics annotation from cellbase
+                const ids = Array.from(variants.keys());
+                const pgxAnnotationPromises = [];
+                for (let i = 0; i < ids.length; i = i + 50) {
+                    const chunk = ids.slice(i, i + 50);
+                    const query = {
+                        assembly: "grch38",
+                        dataRelease: "5",
+                        include: "pharmacogenomics",
+                    };
+                    pgxAnnotationPromises.push(cellbaseClient.get("genomic", "variant", chunk.join(","), "annotation", query));
+                }
+                const pgxAnnotationResponses = await Promise.all(pgxAnnotationPromises);
+
+                // 5. Merge pgx annotation with variants
+                pgxAnnotationResponses.forEach(pgxAnnotationResponse => {
+                    pgxAnnotationResponse.responses.forEach(response => {
+                        if (variants.has(response.id)) {
+                            variants.get(response.id).annotation.pharmacogenomics = response.results[0].pharmacogenomics;
+                        }
+                    });
+                });
+
+                // 5. Save variants and request update
+                this.variants = Array.from(variants.values());
+            } catch (error) {
+                console.error(error);
+                this.error = true;
+            }
+            this.loading = false;
             this.requestUpdate();
         }
     }
 
     render() {
-        if (this.isLoading) {
+        if (this.loading) {
             return html`
                 <div style="padding-top:32px">
                     <loading-spinner></loading-spinner>
                 </div>
             `;
         }
+        if (this.error) {
+            return html`
+                <div class="col-md-10 col-md-offset-1" style="padding:32px 0px;">
+                    <div class="alert alert-danger">
+                        <i class="fas fa-exclamation-triangle icon-padding"></i> Error getting Pharmacogenomics info. Plase try again later.
+                    </div>
+                </div>
+            `;
+        }
 
         return html`
             <div class="col-md-10 col-md-offset-1" style="padding-bottom:32px;">

From e38507fcb0213589cc42c1549eb98fc2d73e1ada Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 18 May 2023 18:24:46 +0200
Subject: [PATCH 35/39] wc: fix queries to CellBase in pharmacogenomics-report
 #TASK-4362

---
 .../pharmacogenomics-report.js                | 53 ++++++++++---------
 1 file changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
index 1fca0a038a..144b84ff53 100644
--- a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
@@ -68,10 +68,10 @@ export default class PharmacogenomicsReport extends LitElement {
 
                 // 2. Get the list of variants available in OpenCGA
                 const pgxVariants = pgxVariantsResponse.responses[0].results;
-                const chunkSize = 200;
-                const promises = [];
-                for (let i = 0; i < pgxVariants.length; i = i + chunkSize) {
-                    const chunk = pgxVariants.slice(i, i + chunkSize);
+                const variantsChunkSize = 200;
+                const variantsPromises = [];
+                for (let i = 0; i < pgxVariants.length; i = i + variantsChunkSize) {
+                    const chunk = pgxVariants.slice(i, i + variantsChunkSize);
                     const query = {
                         region: chunk.join(","),
                         sample: this.sampleId,
@@ -79,9 +79,9 @@ export default class PharmacogenomicsReport extends LitElement {
                         study: this.opencgaSession.study.fqn,
                         includeSampleId: true,
                     };
-                    promises.push(this.opencgaSession.opencgaClient.clinical().queryVariant(query));
+                    variantsPromises.push(this.opencgaSession.opencgaClient.clinical().queryVariant(query));
                 }
-                const variantsResponses = await Promise.all(promises);
+                const variantsResponses = await Promise.all(variantsPromises);
 
                 // 3. Generate the list of variants
                 const variants = new Map();
@@ -93,26 +93,29 @@ export default class PharmacogenomicsReport extends LitElement {
 
                 // 4. Import pharmacogenomics annotation from cellbase
                 const ids = Array.from(variants.keys());
-                const pgxAnnotationPromises = [];
-                for (let i = 0; i < ids.length; i = i + 50) {
-                    const chunk = ids.slice(i, i + 50);
-                    const query = {
-                        assembly: "grch38",
-                        dataRelease: "5",
-                        include: "pharmacogenomics",
-                    };
-                    pgxAnnotationPromises.push(cellbaseClient.get("genomic", "variant", chunk.join(","), "annotation", query));
-                }
-                const pgxAnnotationResponses = await Promise.all(pgxAnnotationPromises);
-
-                // 5. Merge pgx annotation with variants
-                pgxAnnotationResponses.forEach(pgxAnnotationResponse => {
-                    pgxAnnotationResponse.responses.forEach(response => {
-                        if (variants.has(response.id)) {
-                            variants.get(response.id).annotation.pharmacogenomics = response.results[0].pharmacogenomics;
-                        }
+                const batchSize = 200;
+                for (let i = 0; i < ids.length; i = i + batchSize) {
+                    const idsBatch = ids.slice(i, i + batchSize);
+                    const promises = [];
+                    const chunkSize = 50;
+                    for (let j = 0; j < idsBatch.length; j = j + chunkSize) {
+                        const chunk = idsBatch.slice(j, j + chunkSize);
+                        const query = {
+                            assembly: "grch38",
+                            dataRelease: "5",
+                            include: "pharmacogenomics",
+                        };
+                        promises.push(cellbaseClient.get("genomic", "variant", chunk.join(","), "annotation", query));
+                    }
+                    const responses = await Promise.all(promises);
+                    responses.forEach(pgxAnnotationResponse => {
+                        pgxAnnotationResponse.responses.forEach(response => {
+                            if (variants.has(response.id)) {
+                                variants.get(response.id).annotation.pharmacogenomics = response.results[0].pharmacogenomics;
+                            }
+                        });
                     });
-                });
+                }
 
                 // 5. Save variants and request update
                 this.variants = Array.from(variants.values());

From 6ea6a7453cf79ac45f8cbe879b827b3e0f782e2f Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Mon, 22 May 2023 13:50:08 +0200
Subject: [PATCH 36/39] wc: set pharmacogenomics buggon disabled by default in
 variant browser toolbar #TASK-4362

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

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-toolbar.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-toolbar.js
index 5aaba180fe..bbac872cd3 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-toolbar.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-toolbar.js
@@ -361,7 +361,7 @@ class VariantInterpreterBrowserToolbar extends LitElement {
 
     getDefaultConfig() {
         return {
-            showPharmacogenomicsFilter: true,
+            showPharmacogenomicsFilter: false,
         };
     }
 

From 0ea4ff12ec526a978cf903e683437679f4f597ca Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Mon, 22 May 2023 13:51:12 +0200
Subject: [PATCH 37/39] wc: hide pharmacogenomics tab by default in variant
 interpreter browser #TASK-4362

---
 .../variant-interpreter-browser.js            | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser.js
index b01bc1ecfd..9fb1b6af52 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser.js
@@ -455,20 +455,22 @@ class VariantInterpreterBrowser extends LitElement {
                 }
             }
 
-            // TODO: we would need to check if pharmacogenomics tab is enabled or not
-            items.push({
-                id: "pharmacogenomics",
-                name: "Pharmacogenomics",
-                render: (clinicalAnalysis, active, opencgaSession) => html`
-                    <div>
-                        <pharmacogenomics-report
-                            .sampleId="${clinicalAnalysis?.proband?.samples?.[0]?.id || ""}"
-                            .active="${active}"
-                            .opencgaSession="${opencgaSession}">
-                        </pharmacogenomics-report>
-                    </div>
-                `,
-            });
+            // Append pharmacogenomics tab
+            if (this.settings?.hidePharmacogenomics === false) {
+                items.push({
+                    id: "pharmacogenomics",
+                    name: "Pharmacogenomics",
+                    render: (clinicalAnalysis, active, opencgaSession) => html`
+                        <div>
+                            <pharmacogenomics-report
+                                .sampleId="${clinicalAnalysis?.proband?.samples?.[0]?.id || ""}"
+                                .active="${active}"
+                                .opencgaSession="${opencgaSession}">
+                            </pharmacogenomics-report>
+                        </div>
+                    `,
+                });
+            }
 
             // Append genome browser
             if (this.settings.hideGenomeBrowser === undefined || this.settings.hideGenomeBrowser === false) {

From 0e7867be39b717a5a932efbc2961feab0d7c80a8 Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Mon, 22 May 2023 13:51:49 +0200
Subject: [PATCH 38/39] wc: fix queries to opencga in pharmacogenomics-report
 component #TASK-4362

---
 .../pharmacogenomics-report.js                | 50 +++++++++----------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
index 144b84ff53..ac4d421cef 100644
--- a/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
+++ b/src/webcomponents/clinical/pharmacogenomics/pharmacogenomics-report.js
@@ -68,38 +68,36 @@ export default class PharmacogenomicsReport extends LitElement {
 
                 // 2. Get the list of variants available in OpenCGA
                 const pgxVariants = pgxVariantsResponse.responses[0].results;
-                const variantsChunkSize = 200;
-                const variantsPromises = [];
-                for (let i = 0; i < pgxVariants.length; i = i + variantsChunkSize) {
-                    const chunk = pgxVariants.slice(i, i + variantsChunkSize);
-                    const query = {
-                        region: chunk.join(","),
-                        sample: this.sampleId,
-                        // include: "id",
-                        study: this.opencgaSession.study.fqn,
-                        includeSampleId: true,
-                    };
-                    variantsPromises.push(this.opencgaSession.opencgaClient.clinical().queryVariant(query));
-                }
-                const variantsResponses = await Promise.all(variantsPromises);
-
-                // 3. Generate the list of variants
                 const variants = new Map();
-                variantsResponses.forEach(variantResponse => {
-                    variantResponse.responses[0].results.forEach(variant => {
-                        variants.set(variant.id, variant);
+                for (let i = 0; i < pgxVariants.length; i = i + 200) {
+                    const variantsPromises = [];
+                    const variantsBatch = pgxVariants.slice(i, i + 200);
+                    for (let j = 0; j < variantsBatch.length; j = j + 50) {
+                        const chunk = variantsBatch.slice(j, j + 50);
+                        const query = {
+                            region: chunk.join(","),
+                            sample: this.sampleId,
+                            // include: "id",
+                            study: this.opencgaSession.study.fqn,
+                            includeSampleId: true,
+                        };
+                        variantsPromises.push(this.opencgaSession.opencgaClient.clinical().queryVariant(query));
+                    }
+                    const variantsResponses = await Promise.all(variantsPromises);
+                    variantsResponses.forEach(variantResponse => {
+                        variantResponse.responses[0].results.forEach(variant => {
+                            variants.set(variant.id, variant);
+                        });
                     });
-                });
+                }
 
                 // 4. Import pharmacogenomics annotation from cellbase
                 const ids = Array.from(variants.keys());
-                const batchSize = 200;
-                for (let i = 0; i < ids.length; i = i + batchSize) {
-                    const idsBatch = ids.slice(i, i + batchSize);
+                for (let i = 0; i < ids.length; i = i + 200) {
+                    const idsBatch = ids.slice(i, i + 200);
                     const promises = [];
-                    const chunkSize = 50;
-                    for (let j = 0; j < idsBatch.length; j = j + chunkSize) {
-                        const chunk = idsBatch.slice(j, j + chunkSize);
+                    for (let j = 0; j < idsBatch.length; j = j + 50) {
+                        const chunk = idsBatch.slice(j, j + 50);
                         const query = {
                             assembly: "grch38",
                             dataRelease: "5",

From 31ebb94c84f8cde15062919bdd308a9e811c155d Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Mon, 22 May 2023 13:58:21 +0200
Subject: [PATCH 39/39] wc: rename options for displaying pharmacogenomics tab
 #TASK-4362

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

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser.js
index 9fb1b6af52..91884c2d5e 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser.js
@@ -456,7 +456,7 @@ class VariantInterpreterBrowser extends LitElement {
             }
 
             // Append pharmacogenomics tab
-            if (this.settings?.hidePharmacogenomics === false) {
+            if (this.settings?.showPharmacogenomicsTab) {
                 items.push({
                     id: "pharmacogenomics",
                     name: "Pharmacogenomics",