diff --git a/src/webcomponents/commons/grid-commons.js b/src/webcomponents/commons/grid-commons.js index 72acf5f34..27c129302 100644 --- a/src/webcomponents/commons/grid-commons.js +++ b/src/webcomponents/commons/grid-commons.js @@ -181,12 +181,11 @@ export default class GridCommons { } // Add events for displaying genes and roles list - // const gridElement = document.querySelector(`#${this.gridId}`); - ["genes", "roles"].forEach(key => { + ["genes", "roles", "gene-feature-overlaps"].forEach(key => { Array.from(document.querySelectorAll(`#${this.gridId} div[data-role="${key}-list"]`)).forEach(el => { - const extraList = el.querySelector(`span[data-role="${key}-list-extra"]`); - const showLink = el.querySelector(`a[data-role="${key}-list-show"]`); - const hideLink = el.querySelector(`a[data-role="${key}-list-hide"]`); + const extraList = el.querySelector(`[data-role="${key}-list-extra"]`); + const showLink = el.querySelector(`[data-role="${key}-list-show"]`); + const hideLink = el.querySelector(`[data-role="${key}-list-hide"]`); showLink.addEventListener("click", () => { showLink.style.display = "none"; diff --git a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js index bc1926b03..80a697642 100644 --- a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js +++ b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js @@ -195,7 +195,6 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { return; } const variantRegion = this.variantAnnotation.chromosome + ":" + this.variantAnnotation.start + "-" + this.variantAnnotation.start; - const variantId = this.variantAnnotation.id ? this.variantAnnotation.id : `${this.variantAnnotation.chromosome}:${this.variantAnnotation.start}:${this.variantAnnotation.reference}:${this.variantAnnotation.alternate}`; return html` diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-cancer.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-cancer.js index 79943d356..4d00edef0 100644 --- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-cancer.js +++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-cancer.js @@ -568,7 +568,7 @@ class VariantInterpreterBrowserCancer extends LitElement { active: true, render: variant => html` @@ -580,7 +580,7 @@ class VariantInterpreterBrowserCancer extends LitElement { name: "Consequence Type", render: (variant, active) => html` `, @@ -590,7 +590,7 @@ class VariantInterpreterBrowserCancer extends LitElement { name: "Population Frequencies", render: (variant, active) => html` `, @@ -600,8 +600,8 @@ class VariantInterpreterBrowserCancer extends LitElement { name: "Clinical", render: variant => html` + .traitAssociation="${variant?.annotation?.traitAssociation}" + .geneTraitAssociation="${variant?.annotation?.geneTraitAssociation}"> `, }, @@ -655,7 +655,7 @@ class VariantInterpreterBrowserCancer extends LitElement { name: "Beacon", render: (variant, active, opencgaSession) => html` diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-cnv.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-cnv.js index f092630f9..c163fb4b6 100644 --- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-cnv.js +++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-cnv.js @@ -456,7 +456,7 @@ class VariantInterpreterBrowserCNV extends LitElement { active: true, render: variant => html` @@ -513,7 +513,7 @@ class VariantInterpreterBrowserCNV extends LitElement { name: "Beacon", render: (variant, active, opencgaSession) => html` diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-rd.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-rd.js index 1bae76ad4..b7b33922b 100644 --- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-rd.js +++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-rd.js @@ -583,7 +583,7 @@ class VariantInterpreterBrowserRd extends LitElement { active: true, render: variant => html` @@ -595,7 +595,7 @@ class VariantInterpreterBrowserRd extends LitElement { name: "Consequence Type", render: (variant, active) => html` `, @@ -605,7 +605,7 @@ class VariantInterpreterBrowserRd extends LitElement { name: "Population Frequencies", render: (variant, active) => html` `, @@ -615,8 +615,8 @@ class VariantInterpreterBrowserRd extends LitElement { name: "Clinical", render: variant => html` + .traitAssociation="${variant?.annotation?.traitAssociation}" + .geneTraitAssociation="${variant?.annotation?.geneTraitAssociation}"> `, }, @@ -648,7 +648,7 @@ class VariantInterpreterBrowserRd extends LitElement { render: (variant, active, opencgaSession) => html` `, diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-rearrangement.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-rearrangement.js index c4d43f56f..8d9eb95a5 100644 --- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-rearrangement.js +++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-rearrangement.js @@ -445,7 +445,7 @@ class VariantInterpreterBrowserRearrangement extends LitElement { }, detail: { title: variants => { - return `Selected Variants: ${variants[0].id} - ${variants[1].id}`; + return `Selected Variants: ${variants?.[0]?.id} - ${variants?.[1]?.id}`; }, showTitle: true, items: [ @@ -468,7 +468,7 @@ class VariantInterpreterBrowserRearrangement extends LitElement { name: "Variant 1 JSON Data", render: (variants, active) => html` `, @@ -478,7 +478,7 @@ class VariantInterpreterBrowserRearrangement extends LitElement { name: "Variant 2 JSON Data", render: (variants, active) => html` `, diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js index e57e4b357..df74b2016 100644 --- a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js +++ b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js @@ -1015,7 +1015,81 @@ export default class VariantInterpreterGridFormatter { ` : ""} `; + } + + static geneFeatureOverlapFormatter(variant, opencgaSession) { + if (variant?.annotation?.consequenceTypes) { + const overlaps = []; + (variant.annotation.consequenceTypes || []).forEach(ct => { + if (Array.isArray(ct.exonOverlap) && ct.exonOverlap?.length > 0) { + ct.exonOverlap.map(exon => { + overlaps.push({ + geneName: ct.geneName || "", + transcript: ct.transcript || ct.ensemblTranscriptId || "", + feature: `exon (${exon.number || "-"})`, + }); + }); + } else if (Array.isArray(ct.sequenceOntologyTerms) && ct.sequenceOntologyTerms?.length > 0) { + ct.sequenceOntologyTerms.forEach(term => { + if (term.name === "intron_variant") { + overlaps.push({ + geneName: ct.geneName || "", + transcript: ct.transcript || ct.ensemblTranscriptId || "", + feature: "intron", + }); + } else if (term.name === "5_prime_UTR_variant" || term.name === "3_prime_UTR_variant") { + overlaps.push({ + geneName: ct.geneName || "", + transcript: ct.transcript || ct.ensemblTranscriptId || "", + feature: `${term.name.charAt(0)}'-UTR`, + }); + } + }); + } + }); + if (overlaps.length > 0) { + const maxDisplayedOverlaps = 3; + const separator = `
`; + const displayedOverlaps = overlaps.map(overlap => { + let geneHtml = "-"; + if (overlap.geneName) { + const tooltip = VariantGridFormatter.getGeneTooltip(overlap.geneName, opencgaSession?.project?.organism?.assembly); + geneHtml = ` + + ${overlap.geneName} + + `; + } + return ` +
+
Gene: ${geneHtml}
+
Transcript: ${overlap.transcript || "-"}
+
Feature: ${overlap.feature || "-"}
+
+ `; + }); + return ` +
+ ${displayedOverlaps.slice(0, maxDisplayedOverlaps).join(separator)} +
+ ${separator} + ${displayedOverlaps.slice(maxDisplayedOverlaps).join(separator)} +
+ +
+ `; + } + } + // Nothing to display + return "-"; } } diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-rearrangement-grid.js b/src/webcomponents/variant/interpretation/variant-interpreter-rearrangement-grid.js index 74242c716..fbcc9bb73 100644 --- a/src/webcomponents/variant/interpretation/variant-interpreter-rearrangement-grid.js +++ b/src/webcomponents/variant/interpretation/variant-interpreter-rearrangement-grid.js @@ -524,6 +524,13 @@ export default class VariantInterpreterRearrangementGrid extends LitElement { halign: "center", visible: this.clinicalAnalysis.type?.toUpperCase() === "CANCER" && this.gridCommons.isColumnVisible("evidences"), }, + { + id: "geneFeatureOverlap", + title: "Gene Feature Overlap", + rowspan: 1, + colspan: 2, + halign: "center", + }, { id: "vcfData1", title: "VCF Data 1", @@ -595,6 +602,30 @@ export default class VariantInterpreterRearrangementGrid extends LitElement { } ], [ + { + id: "geneFeatureOverlapVariant1", + title: "Variant 1", + colspan: 1, + rowspan: 1, + formatter: (value, rows) => { + return VariantInterpreterGridFormatter.geneFeatureOverlapFormatter(rows[0], this.opencgaSession); + }, + halign: "center", + valign: "top", + visible: this.gridCommons.isColumnVisible("geneFeatureOverlapVariant1"), + }, + { + id: "geneFeatureOverlapVariant2", + title: "Variant 2", + colspan: 1, + rowspan: 1, + formatter: (value, rows) => { + return VariantInterpreterGridFormatter.geneFeatureOverlapFormatter(rows[1], this.opencgaSession); + }, + halign: "center", + valign: "top", + visible: this.gridCommons.isColumnVisible("geneFeatureOverlapVariant2"), + }, ...vcfDataColumns.vcf1, ...vcfDataColumns.vcf2, {