TASK-4438 - Improve Pharmacogenomics IVA user interfaces

cypress/e2e/iva/variant-interpreter-grid-cancer-cnv.cy.js

@@ -168,11 +168,9 @@ context("Variant Interpreter Grid Cancer CNV", () => {
 
         it("should display Cohort Stats (Population Frequencies) tooltip", () => {
             cy.get("tbody tr:first > td")
-                .eq(10)
-                .within(() => {
-                    cy.get("a")
-                        .trigger("mouseover");
-                });
+                .eq(13)
+                .find("a")
+                .trigger("mouseover");
             cy.get(".qtip-content")
                 .should("be.visible");
         });

cypress/e2e/iva/variant-interpreter-grid-cancer.cy.js

@@ -208,23 +208,20 @@ context("Variant Interpreter Grid Cancer", () => {
             });
         });
 
-        it("should display cohort stats (population frequencies) tooltip", () => {
+        it("should display cohort stats tooltip", () => {
             cy.get("tbody tr:first > td")
-                .eq(10)
-                .within(() => {
-                    cy.get("a").trigger("mouseover");
-                });
+                .eq(13)
+                .find("a")
+                .trigger("mouseover");
             cy.get(".qtip-content")
                 .should("be.visible");
         });
 
-        it("should reference population frequencies tooltip", () => {
+        it("should display reference population frequencies tooltip", () => {
             cy.get("tbody tr:first > td")
-                .eq(11)
-                .within(() => {
-                    cy.get("a")
-                        .trigger("mouseover");
-                });
+                .eq(14)
+                .find("a")
+                .trigger("mouseover");
             cy.get(".qtip-content")
                 .should("be.visible");
         });

cypress/e2e/iva/variant-interpreter-grid-germline.cy.js

@@ -168,51 +168,23 @@ context("Variant Interpreter Grid Germiline", () => {
             });
         });
 
-        it("should display cohort stats (Population Frequencies) tooltip", () => {
+        it("should display cohort stats tooltip", () => {
             cy.get("tbody tr:first > td")
-                .eq(9)
-                .within(() => {
-                    cy.get("a")
-                        .trigger("mouseover");
-                });
+                .eq(12)
+                .find("a")
+                .trigger("mouseover");
             cy.get(".qtip-content")
                 .should("be.visible");
         });
 
         it("should display reference population frequencies tooltip", () => {
             cy.get("tbody tr:first > td")
-                .eq(10)
-                .within(() => {
-                    cy.get("a")
-                        .trigger("mouseover");
-                });
-            cy.get(".qtip-content")
-                .should("be.visible");
-        });
-
-        it("should display ACMG Prediction (Classification) tooltip", () => {
-            cy.get("tbody tr:first > td")
-                .eq(16)
-                .within(() => {
-                    cy.get("a")
-                        .trigger("mouseover");
-                });
-            cy.get(".qtip-content")
-                .should("be.visible");
-        });
-
-        it("should display OMIM Prediction (Classification) tooltip", () => {
-            UtilsTest.changePage(browserInterpreterGrid,2);
-
-            cy.get("tbody tr:nth-child(6) > td:nth-child(15)")
-                .within(() => {
-                    cy.get("a")
-                        .trigger("mouseover");
-                });
+                .eq(13)
+                .find("a")
+                .trigger("mouseover");
             cy.get(".qtip-content")
                 .should("be.visible");
         });
-
     });
 
     context("Helpers", () => {

src/core/bioinfo/bioinfo-utils.js

@@ -262,7 +262,7 @@ export default class BioinfoUtils {
                 case "GO":
                     return this.getGeneOntologyLink(ontologyTermId);
                 case "OMIM":
-                    return this.getOmimLink(id);
+                    return this.getOmimOntologyLink(id);
                 case "ORPHA":
                     return this.getOrphanetLink(id);
                 case "MONDO":
@@ -293,16 +293,24 @@ export default class BioinfoUtils {
         return `https://hpo.jax.org/app/browse/term/${hpoTerm}`;
     }
 
+    // static getOmimLink(omimEntry) {
+    //     return `https://www.omim.org/entry/${omimEntry}`;
+    // }
+
     static getSequenceOntologyLink(soTerm) {
         return `http://www.sequenceontology.org/browser/current_svn/term/${soTerm}`;
     }
 
-    static getOmimLink(soTerm) {
-        return `https://omim.org/entry/${soTerm}"`;
+    static getOmimOntologyLink(soTerm) {
+        return `https://www.omim.org/entry/${soTerm}"`;
     }
 
     static getOrphanetLink(orphaId) {
         return `https://www.orpha.net/consor/cgi-bin/OC_Exp.php?lng=EN&Expert=${orphaId}`;
     }
 
+    static getPharmGKBLink(pharmGKBId) {
+        return `https://www.pharmgkb.org/chemical/${pharmGKBId}`;
+    }
+
 }

src/core/utils-new.js

@@ -265,7 +265,7 @@ export default class UtilsNew {
     }
 
     static initTooltip(scope) {
-        $("a[tooltip-title], span[tooltip-title]", scope).each(function () {
+        $("a[tooltip-title], span[tooltip-title], table[tooltip-title], td[tooltip-title]", scope).each(function () {
             $(this).qtip({
                 content: {
                     title: $(this).attr("tooltip-title"),
@@ -1077,4 +1077,14 @@ export default class UtilsNew {
                 .filter(item => !!item);
     }
 
+    // Group elements in array by the value in the given key
+    static groupBy(array, key) {
+        return array.reduce((result, currentValue) => {
+            const objectValue = UtilsNew.getObjectValue(currentValue, key);
+            // eslint-disable-next-line no-param-reassign
+            (result[objectValue] = result[objectValue] || []).push(currentValue);
+            return result;
+        }, {});
+    }
+
 }

src/sites/iva/conf/browsers.settings.js

@@ -293,7 +293,7 @@ const CATALOG_SETTINGS = {
         },
         // merge criterium: uses this array as filter for internal 1D array.
         // It is supported either details[] or hiddenDetails[].
-        details: ["annotationSummary", "annotationConsType", "annotationPropFreq", "annotationClinical", "cohortStats", "samples", "beacon", "json-view"]
+        details: ["annotationSummary", "annotationConsType", "annotationPropFreq", "annotationClinical", "annotationPharmacogenomics", "cohortStats", "samples", "beacon", "json-view"]
         // hiddenDetails: ["json-view"]
     },
     DISEASE_PANEL_BROWSER: {

src/sites/iva/conf/opencga-variant-browser.settings.js

@@ -88,6 +88,6 @@ const OPENCGA_VARIANT_BROWSER_SETTINGS = {
     },
     // merge criterium: uses this array as filter for internal 1D array.
     // It is supported either details[] or hiddenDetails[].
-    details: ["annotationSummary", "annotationConsType", "annotationPropFreq", "annotationClinical", "cohortStats", "samples", "beacon", "json-view"]
+    details: ["annotationSummary", "annotationConsType", "annotationPropFreq", "annotationClinical", "annotationPharmacogenomics", "cohortStats", "samples", "beacon", "json-view"]
     // hiddenDetails: ["json-view"]
 };

src/webcomponents/clinical/clinical-analysis-grid.js

@@ -372,7 +372,7 @@ export default class ClinicalAnalysisGrid extends LitElement {
         // const btnClassName = "d-inline-flex align-items-center btn btn-light dropdown-toggle";
         const btnClassName = "d-flex justify-content-between align-items-center btn btn-light dropdown-toggle w-100";
         // const btnStyle = "display:inline-flex;align-items:center;";
-
+debugger
         return `
             <div class="dropdown">
                 <button class="${btnClassName}" type="button" data-bs-toggle="dropdown" ${!isEditable ? "disabled=\"disabled\"" : ""}>
@@ -651,7 +651,7 @@ export default class ClinicalAnalysisGrid extends LitElement {
                     const session = this.opencgaSession;
                     const url = `#interpreter/${session.project.id}/${session.study.id}/${row.id}`;
                     const hasWriteAccess = OpencgaCatalogUtils.checkPermissions(session.study, session.user.id, "WRITE_CLINICAL_ANALYSIS");
-                    const hasAdminAccess = hasWriteAccess || "disabled";
+                    const hasAdminAccess = hasWriteAccess ? "" : "disabled";
                     const lockActionIcon = row.locked ? "fa-unlock" : "fa-lock";
                     const lockActionText = row.locked ? "Unlock" : "Lock";
                     const isOwnOrIsLocked = row.locked || !row.analysts?.some(analyst => analyst.id === this.opencgaSession?.user?.id) ? "disabled" : "";
@@ -687,7 +687,7 @@ export default class ClinicalAnalysisGrid extends LitElement {
                                     <!-- Edit the case -->
                                     <li>
                                         <a data-action="edit" class="btn force-text-left ${hasAdminAccess}">
-                                            <i class="fas fa-edit icon-padding" aria-hidden="true"></i> Edit ...
+                                            <i class="fas fa-edit me-1" aria-hidden="true"></i> Edit ...
                                         </a>
                                     </li>
                                     <!-- Delete the case -->

src/webcomponents/clinical/clinical-analysis-view.js

@@ -372,7 +372,7 @@ export default class ClinicalAnalysisView extends LitElement {
                                 template: "${disorder.name} (${disorder.id})",
                                 link: {
                                     "disorder.id": id => id.startsWith("OMIM:") ?
-                                        BioinfoUtils.getOmimLink(id) :
+                                        BioinfoUtils.getOmimOntologyLink(id) :
                                         "",
                                 },
                             },

src/webcomponents/cohort/cohort-grid.js

@@ -354,13 +354,14 @@ export default class CohortGrid extends LitElement {
                         </button>
                         <ul class="dropdown-menu dropdown-menu-end">
                             <li>
-                                <a data-action="edit" class="dropdown-item ${OpencgaCatalogUtils.checkPermissions(this.opencgaSession.study, this.opencgaSession.user.id, this.permissionID) || "disabled" }">
-                                    <i class="fas fa-edit icon-padding" aria-hidden="true"></i> Edit ...
+                                <a data-action="edit" class="dropdown-item ${OpencgaCatalogUtils.checkPermissions(this.opencgaSession.study, this.opencgaSession.user.id, this.permissionID) ? "" : "disabled"}"
+                                        href="javascript: void 0">
+                                    <i class="fas fa-edit me-1" aria-hidden="true"></i> Edit ...
                                 </a>
                             </li>
                             <li>
                                 <a data-action="delete" href="javascript: void 0" class="dropdown-item btn force-text-left disabled">
-                                    <i class="fas fa-trash icon-padding" aria-hidden="true"></i> Delete
+                                    <i class="fas fa-trash me-1" aria-hidden="true"></i> Delete
                                 </a>
                             </li>
                         </ul>

src/webcomponents/commons/filters/clinical-annotation-filter.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {LitElement, html} from "lit";
+import {html, LitElement} from "lit";
 import "../../commons/forms/select-field-filter.js";
 import "../../commons/forms/checkbox-field-filter.js";
 
@@ -24,7 +24,7 @@ export default class ClinicalAnnotationFilter extends LitElement {
         super();
 
         // Set status and init private properties
-        this._init();
+        this.#init();
     }
 
     createRenderRoot() {
@@ -48,7 +48,7 @@ export default class ClinicalAnnotationFilter extends LitElement {
         };
     }
 
-    _init() {
+    #init() {
         this.query = {};
     }
 
@@ -98,7 +98,7 @@ export default class ClinicalAnnotationFilter extends LitElement {
 
     render() {
         return html`
-            <div class="mb-2">
+            <div class="mb-3">
                 <label class="form-label">
                     Select Clinical Database
                 </label>
@@ -112,7 +112,7 @@ export default class ClinicalAnnotationFilter extends LitElement {
                 </div>
             </div>
 
-            <div class="mb-2">
+            <div class="mb-3">
                 <label class="form-label">
                     Select Clinical Significance
                 </label>
@@ -126,7 +126,7 @@ export default class ClinicalAnnotationFilter extends LitElement {
                 </div>
             </div>
 
-            <div class="mb-2">
+            <div class="mb-3">
                 <label class="form-label">
                     Check Status
                 </label>

src/webcomponents/commons/filters/disease-panel-filter.js

@@ -48,7 +48,7 @@ export default class DiseasePanelFilter extends LitElement {
         super();
 
         // Set status and init private properties
-        this._init();
+        this.#init();
     }
 
     createRenderRoot() {
@@ -97,7 +97,7 @@ export default class DiseasePanelFilter extends LitElement {
         };
     }
 
-    _init() {
+    #init() {
         this.query = {};
         this.genes = [];
         // this.panelFeatureType = "";
@@ -203,7 +203,7 @@ export default class DiseasePanelFilter extends LitElement {
         return html`
             <!-- Only show the title when all filters are displayed -->
             <div class="mb-3">
-                <div class="mb-2">
+                <div class="mb-3">
                     ${this.showExtendedFilters ? html`
                         <label class="form-label">
                             Select Disease Panels
@@ -233,7 +233,7 @@ export default class DiseasePanelFilter extends LitElement {
             }
 
             ${this.showExtendedFilters ? html`
-                <div class="mb-2">
+                <div class="mb-3">
                     <label class="form-label">
                         Panel Intersection
                     </label>
@@ -250,7 +250,7 @@ export default class DiseasePanelFilter extends LitElement {
                     </div>
                 </div>
 
-                <div class="mb-2">
+                <div class="mb-3">
                     <label class="form-label">
                         Filter by Feature Type
                     </label>
@@ -265,7 +265,7 @@ export default class DiseasePanelFilter extends LitElement {
                     </select-field-filter>
                 </div>
 
-                <div class="mb-2">
+                <div class="mb-3">
                     <label class="form-label">
                         Filter Genes by Mode of Inheritance
                     </label>
@@ -280,7 +280,7 @@ export default class DiseasePanelFilter extends LitElement {
                     </select-field-filter>
                 </div>
 
-                <div class="mb-2">
+                <div class="mb-3">
                     <label class="form-label">
                         Filter Genes by Confidence
                     </label>
@@ -295,7 +295,7 @@ export default class DiseasePanelFilter extends LitElement {
                     </select-field-filter>
                 </div>
 
-                <div class="mb-2">
+                <div class="mb-3">
                     <label class="form-label">
                         Filter Genes by Role in Cancer
                     </label>

src/webcomponents/commons/opencb-grid-toolbar.js

@@ -132,7 +132,7 @@ export default class OpencbGridToolbar extends LitElement {
 
         return html`
             <div class="opencb-grid-toolbar">
-                <div class="row mb-3">
+                <div class="row mb-2">
                     <div id="${this._prefix}ToolbarLeft" class="col-md-6">
                         <!-- Display components on the LEFT -->
                     </div>