Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TASK-5114 - Include overlapping exon/intron/UTR for rearrangement breakpoints in sample variant browsers #832

Merged
merged 11 commits into from
Nov 30, 2023
Merged

TASK-5114 - Include overlapping exon/intron/UTR for rearrangement breakpoints in sample variant browsers #832

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
0bc404c
wc: add feature overlap formatter #TASK-5285
jmjuanes Nov 23, 2023
11ae9c4
wc: add new column for gene overlap in rearrangement browser #TASK-5285
jmjuanes Nov 23, 2023
78ed656
wc: enable show less and more links in overlap column of rearrangemen…
jmjuanes Nov 23, 2023
18d5cbc
wc: fix gene-feature-overlaps role name #TASK-5285
jmjuanes Nov 23, 2023
da7519a
wc: fix variant object provided to detailed tabs items in interpreter…
jmjuanes Nov 23, 2023
1d0c6c7
wc: fix generating variant region in cellbase annotation summary #TAS…
jmjuanes Nov 23, 2023
89965c4
Merge branch 'release-2.12.x' into TASK-5114
jmjuanes Nov 23, 2023
09c43c2
Merge branch 'release-2.12.x' into TASK-5114
jmjuanes Nov 24, 2023
270fa23
Merge branch 'release-2.12.x' into TASK-5114
jmjuanes Nov 29, 2023
d000842
wc: fix displaying missing separator between overlapped features #TAS…
jmjuanes Nov 29, 2023
d3cc0d5
wc: fix vertical align of feature overlap columns in rearrangements g…
jmjuanes Nov 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions src/webcomponents/commons/grid-commons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
3 changes: 1 addition & 2 deletions src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
12 changes: 6 additions & 6 deletions src/webcomponents/variant/interpretation/variant-interpreter-browser-cancer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -568,7 +568,7 @@ class VariantInterpreterBrowserCancer extends LitElement {
active: true,
render: variant => html`
<cellbase-variant-annotation-summary
.variantAnnotation="${variant.annotation}"
.variantAnnotation="${variant?.annotation}"
.consequenceTypes="${CONSEQUENCE_TYPES}"
.proteinSubstitutionScores="${PROTEIN_SUBSTITUTION_SCORE}"
.assembly=${this.opencgaSession.project.organism.assembly}>
Expand All @@ -580,7 +580,7 @@ class VariantInterpreterBrowserCancer extends LitElement {
name: "Consequence Type",
render: (variant, active) => html`
<variant-consequence-type-view
.consequenceTypes="${variant.annotation.consequenceTypes}"
.consequenceTypes="${variant?.annotation?.consequenceTypes}"
.active="${active}">
</variant-consequence-type-view>
`,
Expand All @@ -590,7 +590,7 @@ class VariantInterpreterBrowserCancer extends LitElement {
name: "Population Frequencies",
render: (variant, active) => html`
<cellbase-population-frequency-grid
.populationFrequencies="${variant.annotation.populationFrequencies}"
.populationFrequencies="${variant?.annotation?.populationFrequencies}"
.active="${active}">
</cellbase-population-frequency-grid>
`,
Expand All @@ -600,8 +600,8 @@ class VariantInterpreterBrowserCancer extends LitElement {
name: "Clinical",
render: variant => html`
<variant-annotation-clinical-view
.traitAssociation="${variant.annotation.traitAssociation}"
.geneTraitAssociation="${variant.annotation.geneTraitAssociation}">
.traitAssociation="${variant?.annotation?.traitAssociation}"
.geneTraitAssociation="${variant?.annotation?.geneTraitAssociation}">
</variant-annotation-clinical-view>
`,
},
Expand Down Expand Up @@ -655,7 +655,7 @@ class VariantInterpreterBrowserCancer extends LitElement {
name: "Beacon",
render: (variant, active, opencgaSession) => html`
<variant-beacon-network
.variant="${variant.id}"
.variant="${variant?.id}"
.assembly="${opencgaSession.project.organism.assembly}"
.config="${this.beaconConfig}"
.active="${active}">
Expand Down
4 changes: 2 additions & 2 deletions src/webcomponents/variant/interpretation/variant-interpreter-browser-cnv.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -456,7 +456,7 @@ class VariantInterpreterBrowserCNV extends LitElement {
active: true,
render: variant => html`
<cellbase-variant-annotation-summary
.variantAnnotation="${variant.annotation}"
.variantAnnotation="${variant?.annotation}"
.consequenceTypes="${CONSEQUENCE_TYPES}"
.proteinSubstitutionScores="${PROTEIN_SUBSTITUTION_SCORE}"
.assembly=${this.opencgaSession.project.organism.assembly}>
Expand Down Expand Up @@ -513,7 +513,7 @@ class VariantInterpreterBrowserCNV extends LitElement {
name: "Beacon",
render: (variant, active, opencgaSession) => html`
<variant-beacon-network
.variant="${variant.id}"
.variant="${variant?.id}"
.assembly="${opencgaSession.project.organism.assembly}"
.config="${this.beaconConfig}"
.active="${active}">
Expand Down
12 changes: 6 additions & 6 deletions src/webcomponents/variant/interpretation/variant-interpreter-browser-rd.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -583,7 +583,7 @@ class VariantInterpreterBrowserRd extends LitElement {
active: true,
render: variant => html`
<cellbase-variant-annotation-summary
.variantAnnotation="${variant.annotation}"
.variantAnnotation="${variant?.annotation}"
.consequenceTypes="${CONSEQUENCE_TYPES}"
.proteinSubstitutionScores="${PROTEIN_SUBSTITUTION_SCORE}"
.assembly=${this.opencgaSession.project.organism.assembly}>
Expand All @@ -595,7 +595,7 @@ class VariantInterpreterBrowserRd extends LitElement {
name: "Consequence Type",
render: (variant, active) => html`
<variant-consequence-type-view
.consequenceTypes="${variant.annotation.consequenceTypes}"
.consequenceTypes="${variant?.annotation?.consequenceTypes}"
.active="${active}">
</variant-consequence-type-view>
`,
Expand All @@ -605,7 +605,7 @@ class VariantInterpreterBrowserRd extends LitElement {
name: "Population Frequencies",
render: (variant, active) => html`
<cellbase-population-frequency-grid
.populationFrequencies="${variant.annotation.populationFrequencies}"
.populationFrequencies="${variant?.annotation?.populationFrequencies}"
.active="${active}">
</cellbase-population-frequency-grid>
`,
Expand All @@ -615,8 +615,8 @@ class VariantInterpreterBrowserRd extends LitElement {
name: "Clinical",
render: variant => html`
<variant-annotation-clinical-view
.traitAssociation="${variant.annotation.traitAssociation}"
.geneTraitAssociation="${variant.annotation.geneTraitAssociation}">
.traitAssociation="${variant?.annotation?.traitAssociation}"
.geneTraitAssociation="${variant?.annotation?.geneTraitAssociation}">
</variant-annotation-clinical-view>
`,
},
Expand Down Expand Up @@ -648,7 +648,7 @@ class VariantInterpreterBrowserRd extends LitElement {
render: (variant, active, opencgaSession) => html`
<variant-samples
.opencgaSession="${opencgaSession}"
.variantId="${variant.id}"
.variantId="${variant?.id}"
.active="${active}">
</variant-samples>
`,
Expand Down
6 changes: 3 additions & 3 deletions src/webcomponents/variant/interpretation/variant-interpreter-browser-rearrangement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand All @@ -468,7 +468,7 @@ class VariantInterpreterBrowserRearrangement extends LitElement {
name: "Variant 1 JSON Data",
render: (variants, active) => html`
<json-viewer
.data="${variants[0]}"
.data="${variants?.[0]}"
.active="${active}">
</json-viewer>
`,
Expand All @@ -478,7 +478,7 @@ class VariantInterpreterBrowserRearrangement extends LitElement {
name: "Variant 2 JSON Data",
render: (variants, active) => html`
<json-viewer
.data="${variants[1]}"
.data="${variants?.[1]}"
.active="${active}">
</json-viewer>
`,
Expand Down
73 changes: 73 additions & 0 deletions src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1015,7 +1015,80 @@ export default class VariantInterpreterGridFormatter {
` : ""}
</div>
`;
}

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 = `<div style="background-color:currentColor;height:1px;margin-top:6px;margin-bottom:6px;opacity:0.2"></div>`;
const displayedOverlaps = overlaps.map(overlap => {
let geneHtml = "-";
if (overlap.geneName) {
const tooltip = VariantGridFormatter.getGeneTooltip(overlap.geneName, opencgaSession?.project?.organism?.assembly);
geneHtml = `
<a class="gene-tooltip" tooltip-title="Links" tooltip-text="${tooltip}" style="margin-left: 2px">
${overlap.geneName}
</a>
`;
}
return `
<div>
<div><b>Gene</b>: ${geneHtml}</div>
<div><b>Transcript</b>: ${overlap.transcript || "-"}</div>
<div><b>Feature</b>: ${overlap.feature || "-"}</div>
</div>
`;
});
return `
<div data-role="gene-feature-overlaps-list">
${displayedOverlaps.slice(0, maxDisplayedOverlaps).join(separator)}
<div data-role="gene-feature-overlaps-list-extra" style="display:none">
${displayedOverlaps.slice(maxDisplayedOverlaps).join(separator)}
</div>
<div style="margin-top:8px;display:${overlaps.length > maxDisplayedOverlaps ? "block" : "none"}">
<a data-role="gene-feature-overlaps-list-show" style="cursor:pointer;font-size:13px;font-weight:bold;display:block;">
... show more (${(overlaps.length - maxDisplayedOverlaps)})
</a>
<a data-role="gene-feature-overlaps-list-hide" style="cursor:pointer;font-size:13px;font-weight:bold;display:none;">
show less
</a>
</div>
</div>
`;
}
}
// Nothing to display
return "-";
}

}
29 changes: 29 additions & 0 deletions src/webcomponents/variant/interpretation/variant-interpreter-rearrangement-grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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,
{
Expand Down