From 0bc404cd597bc4ad16e16240067bce86ba9c8a39 Mon Sep 17 00:00:00 2001 From: Josemi Date: Thu, 23 Nov 2023 16:59:58 +0100 Subject: [PATCH 1/8] wc: add feature overlap formatter #TASK-5285 --- .../variant-interpreter-grid-formatter.js | 73 +++++++++++++++++++ 1 file changed, 73 insertions(+) diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js index e57e4b357..19ac5e518 100644 --- a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js +++ b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js @@ -1015,7 +1015,80 @@ 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)} +
+ ${displayedOverlaps.slice(maxDisplayedOverlaps).join(separator)} +
+
+ + ... show more (${(overlaps.length - maxDisplayedOverlaps)}) + + + show less + +
+
+ `; + } + } + // Nothing to display + return "-"; } } From 11ae9c4cac8278bcd87ec21ee92d742aba881bfa Mon Sep 17 00:00:00 2001 From: Josemi Date: Thu, 23 Nov 2023 17:00:50 +0100 Subject: [PATCH 2/8] wc: add new column for gene overlap in rearrangement browser #TASK-5285 --- .../variant-interpreter-rearrangement-grid.js | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-rearrangement-grid.js b/src/webcomponents/variant/interpretation/variant-interpreter-rearrangement-grid.js index 74242c716..88d116092 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,28 @@ 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", + 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", + visible: this.gridCommons.isColumnVisible("geneFeatureOverlapVariant2"), + }, ...vcfDataColumns.vcf1, ...vcfDataColumns.vcf2, { From 78ed656542180558581cc66a5ecff7afed750c74 Mon Sep 17 00:00:00 2001 From: Josemi Date: Thu, 23 Nov 2023 17:01:42 +0100 Subject: [PATCH 3/8] wc: enable show less and more links in overlap column of rearrangement browser #TASK-5285 --- src/webcomponents/commons/grid-commons.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/webcomponents/commons/grid-commons.js b/src/webcomponents/commons/grid-commons.js index 72acf5f34..7f072a9e6 100644 --- a/src/webcomponents/commons/grid-commons.js +++ b/src/webcomponents/commons/grid-commons.js @@ -182,11 +182,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", "exon-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"; From 18d5cbc784afe8286a5adf42e56b9caf685214cb Mon Sep 17 00:00:00 2001 From: Josemi Date: Thu, 23 Nov 2023 17:11:25 +0100 Subject: [PATCH 4/8] wc: fix gene-feature-overlaps role name #TASK-5285 --- src/webcomponents/commons/grid-commons.js | 3 +-- .../interpretation/variant-interpreter-grid-formatter.js | 8 ++++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/webcomponents/commons/grid-commons.js b/src/webcomponents/commons/grid-commons.js index 7f072a9e6..27c129302 100644 --- a/src/webcomponents/commons/grid-commons.js +++ b/src/webcomponents/commons/grid-commons.js @@ -181,8 +181,7 @@ export default class GridCommons { } // Add events for displaying genes and roles list - // const gridElement = document.querySelector(`#${this.gridId}`); - ["genes", "roles", "exon-overlaps"].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(`[data-role="${key}-list-extra"]`); const showLink = el.querySelector(`[data-role="${key}-list-show"]`); diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js index 19ac5e518..2c53a49bc 100644 --- a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js +++ b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js @@ -1070,16 +1070,16 @@ export default class VariantInterpreterGridFormatter { `; }); return ` -
+
${displayedOverlaps.slice(0, maxDisplayedOverlaps).join(separator)} -
+
${displayedOverlaps.slice(maxDisplayedOverlaps).join(separator)}
From da7519a6a8c6f52cb86512ea9e1fa53cd94bd93e Mon Sep 17 00:00:00 2001 From: Josemi Date: Thu, 23 Nov 2023 18:51:06 +0100 Subject: [PATCH 5/8] wc: fix variant object provided to detailed tabs items in interpreter browsers #TASK-5285 --- .../variant-interpreter-browser-cancer.js | 12 ++++++------ .../variant-interpreter-browser-cnv.js | 4 ++-- .../interpretation/variant-interpreter-browser-rd.js | 12 ++++++------ .../variant-interpreter-browser-rearrangement.js | 6 +++--- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-cancer.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-cancer.js index 4b0503dba..7adf83eba 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 d541f7c37..6af3d43a3 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 27ce208b1..05b06a5ad 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 cb88ff7c2..2c814de0f 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` `, From 1d0c6c75e93602054875727ea3febee8a531ff6f Mon Sep 17 00:00:00 2001 From: Josemi Date: Thu, 23 Nov 2023 18:52:38 +0100 Subject: [PATCH 6/8] wc: fix generating variant region in cellbase annotation summary #TASK-5285 --- .../variant/annotation/cellbase-variant-annotation-summary.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js index 4f8c909e2..80a697642 100644 --- a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js +++ b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js @@ -191,11 +191,10 @@ export default class CellbaseVariantAnnotationSummary extends LitElement { } render() { - const variantRegion = this.variantAnnotation.chromosome + ":" + this.variantAnnotation.start + "-" + this.variantAnnotation.start; if (this.variantAnnotation === undefined || this.variantAnnotation === "" || this.proteinSubScore === undefined) { 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` From d0008422107628e4f2032f03b154b68851fda99c Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 29 Nov 2023 11:28:39 +0100 Subject: [PATCH 7/8] wc: fix displaying missing separator between overlapped features #TASK-5144 --- .../variant/interpretation/variant-interpreter-grid-formatter.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js index 2c53a49bc..df74b2016 100644 --- a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js +++ b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js @@ -1073,6 +1073,7 @@ export default class VariantInterpreterGridFormatter {
${displayedOverlaps.slice(0, maxDisplayedOverlaps).join(separator)}
+ ${separator} ${displayedOverlaps.slice(maxDisplayedOverlaps).join(separator)}
From d3cc0d5ca75093633c498c6112a763fc5aa80bc3 Mon Sep 17 00:00:00 2001 From: Josemi Date: Wed, 29 Nov 2023 13:10:30 +0100 Subject: [PATCH 8/8] wc: fix vertical align of feature overlap columns in rearrangements grid #TASK-5114 --- .../interpretation/variant-interpreter-rearrangement-grid.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-rearrangement-grid.js b/src/webcomponents/variant/interpretation/variant-interpreter-rearrangement-grid.js index 88d116092..fbcc9bb73 100644 --- a/src/webcomponents/variant/interpretation/variant-interpreter-rearrangement-grid.js +++ b/src/webcomponents/variant/interpretation/variant-interpreter-rearrangement-grid.js @@ -611,6 +611,7 @@ export default class VariantInterpreterRearrangementGrid extends LitElement { return VariantInterpreterGridFormatter.geneFeatureOverlapFormatter(rows[0], this.opencgaSession); }, halign: "center", + valign: "top", visible: this.gridCommons.isColumnVisible("geneFeatureOverlapVariant1"), }, { @@ -622,6 +623,7 @@ export default class VariantInterpreterRearrangementGrid extends LitElement { return VariantInterpreterGridFormatter.geneFeatureOverlapFormatter(rows[1], this.opencgaSession); }, halign: "center", + valign: "top", visible: this.gridCommons.isColumnVisible("geneFeatureOverlapVariant2"), }, ...vcfDataColumns.vcf1,