Skip to content

Commit

Permalink
Merge pull request #978 from opencb/TASK-5769
Browse files Browse the repository at this point in the history 
TASK-5769 - Lollipops are displaced in variants track in genome browser
  • Loading branch information
@jmjuanes
jmjuanes authored Sep 24, 2024
2 parents 378b095 + eafc35b commit a0346ae
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 50 deletions.
33 changes: 28 additions & 5 deletions src/genome-browser/renderers/variant-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,21 @@ export default class VariantRenderer extends Renderer {
const lollipopStickHeight = this.config.lollipopHeight - this.config.lollipopFocusWidth - this.config.lollipopMaxWidth / 2;
let lollipopStickStart = this.config.lollipopFocusWidth + this.config.lollipopMaxWidth / 2;
let lollipopPositions = [];
let lollipopIndex = 0;
let topPosition = this.config.lollipopVisible ? this.config.lollipopHeight : this.config.headerHeight;

// We have to filter features and consider only the ones that are in the current region
// this is important because when we request for breakends to OpenCGA it returns both variants of the breakend
const region = options.requestedRegion;
const featuresToDisplay = (features || []).filter(feature => {
return feature.chromosome === region.chromosome && feature.start <= region.end && region.start <= feature.end;
});

if (this.config.lollipopVisible) {
lollipopPositions = LollipopLayout.fromFeaturesList(features || [], options.requestedRegion, lollipopRegionWidth, {
const featuresForLollipops = featuresToDisplay.filter(feature => {
return this.config.lollipopVariantTypes.includes(feature.type);
});
lollipopPositions = LollipopLayout.fromFeaturesList(featuresForLollipops, options.requestedRegion, lollipopRegionWidth, {
minSeparation: this.config.lollipopMaxWidth,
});
}
Expand All @@ -60,7 +71,16 @@ export default class VariantRenderer extends Renderer {
lollipopStickStart = lollipopStickStart + this.config.highlightHeight;
}

(features || []).forEach((feature, featureIndex) => {
featuresToDisplay.forEach((feature, featureIndex) => {
// Check if this variant has been previously rendered
if (options?.renderedFeatures && feature?.id) {
if (options.renderedFeatures.has(feature.id)) {
return;
}
// Prevent rendering this variant in next calls of this renderer
options.renderedFeatures.add(feature.id);
}

const group = SVG.addChild(options.svgCanvasFeatures, "g", {
"data-cy": "gb-variant",
"data-id": feature.id || "-",
Expand All @@ -86,9 +106,9 @@ export default class VariantRenderer extends Renderer {

let variantElement = null;

// Check if lollipops are visible
if (this.config.lollipopVisible) {
const lollipopX = lollipopStartX + lollipopPositions[featureIndex];
// Check if lollipops are visible and the feature type is one of the allowed types for lollipops
if (this.config.lollipopVisible && this.config.lollipopVariantTypes?.includes?.(feature?.type)) {
const lollipopX = lollipopStartX + lollipopPositions[lollipopIndex];
const lollipopWidth = Math.min(1, Math.max(0, this.getValueFromConfig("lollipopWidth", [feature])));
const lollipopPath = [
`M ${lollipopX},${lollipopStickStart}`,
Expand Down Expand Up @@ -130,6 +150,8 @@ export default class VariantRenderer extends Renderer {
variantElement.setAttribute("stroke-width", 0);
});
}
// increment lollipop index
lollipopIndex = lollipopIndex + 1;
} else {
variantElement = SVG.addChild(group, "rect", {
"data-cy": "gb-variant-lollipop-shape",
Expand Down Expand Up @@ -296,6 +318,7 @@ export default class VariantRenderer extends Renderer {
lollipopMaxWidth: 15,
lollipopShape: GenomeBrowserUtils.lollipopShapeFormatter,
lollipopWidth: GenomeBrowserUtils.lollipopWidthFormatter,
lollipopVariantTypes: ["SNV", "INDEL", "BREAKEND"],
// Lollipop focus
lollipopFocusEnabled: true,
lollipopFocusWidth: 2,
Expand Down
8 changes: 4 additions & 4 deletions src/genome-browser/tracks/feature-track.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,17 +229,17 @@ export default class FeatureTrack {

hideContent() {
this.contentVisible = false;
this.content.classList.add("hidden");
this.resize.classList.add("hidden");
this.content.classList.add("d-none");
this.resize.classList.add("d-none");

this.titleToggleIcon.classList.remove("fa-minus");
this.titleToggleIcon.classList.add("fa-plus");
}

showContent() {
this.contentVisible = true;
this.content.classList.remove("hidden");
this.resize.classList.remove("hidden");
this.content.classList.remove("d-none");
this.resize.classList.remove("d-none");

this.titleToggleIcon.classList.remove("fa-plus");
this.titleToggleIcon.classList.add("fa-minus");
Expand Down
39 changes: 39 additions & 0 deletions src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -564,13 +564,52 @@ class VariantInterpreterBrowserTemplate extends LitElement {
},
{
type: "opencga-variant",
visible: ["SINGLE", "FAMILY"].includes(this.clinicalAnalysis?.type),
config: {
title: "Variants",
query: {
sample: this.clinicalAnalysis.proband.samples.map(s => s.id).join(","),
},
},
},
{
type: "opencga-variant",
visible: this.clinicalAnalysis?.type === "CANCER",
config: {
title: "Small Variants",
query: {
sample: this.clinicalAnalysis.proband.samples.map(s => s.id).join(","),
type: "SNV,INDEL",
},
headerHeight: 0,
},
},
{
type: "opencga-variant",
visible: this.clinicalAnalysis?.type === "CANCER",
config: {
title: "Copy Number Variants",
query: {
sample: this.clinicalAnalysis.proband.samples.map(s => s.id).join(","),
type: "COPY_NUMBER",
},
lollipopVisible: false,
highlightVisible: false,
headerHeight: 0,
},
},
{
type: "opencga-variant",
visible: this.clinicalAnalysis?.type === "CANCER",
config: {
title: "Structural Variants",
query: {
sample: this.clinicalAnalysis.proband.samples.map(s => s.id).join(","),
type: "BREAKEND,INSERTION,DELETION,DUPLICATION",
},
headerHeight: 0,
},
},
...(this.clinicalAnalysis.proband?.samples || []).map(sample => ({
type: "opencga-alignment",
config: {
Expand Down
86 changes: 45 additions & 41 deletions src/webcomponents/visualization/genome-browser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,47 +139,51 @@ export default class GenomeBrowserComponent extends LitElement {
}

parseTracks(tracks) {
return tracks.map(track => {
switch (track.type) {
case "sequence":
return new SequenceTrack({
cellBaseClient: this.config.cellBaseClient,
...track.config,
});
case "gene":
return new GeneTrack({
cellBaseClient: this.config.cellBaseClient,
...track.config,
});
case "gene-overview":
return new GeneOverviewTrack({
cellBaseClient: this.config.cellBaseClient,
...track.config,
});
case "variant":
return new VariantTrack({
cellBaseClient: this.config.cellBaseClient,
...track.config,
});
case "opencga-variant":
return new OpenCGAVariantTrack({
opencgaClient: this.opencgaSession.opencgaClient,
opencgaStudy: this.opencgaSession.study.fqn,
...track.config,
});
case "opencga-alignment":
return new OpenCGAAlignmentTrack({
opencgaClient: this.opencgaSession.opencgaClient,
opencgaStudy: this.opencgaSession.study.fqn,
...track.config,
});
default:
return new FeatureTrack({
cellBaseClient: this.config.cellBaseClient,
...track.config,
});
}
});
return (tracks || [])
.filter(track => {
return typeof track.visible !== "boolean" || track.visible;
})
.map(track => {
switch (track.type) {
case "sequence":
return new SequenceTrack({
cellBaseClient: this.config.cellBaseClient,
...track.config,
});
case "gene":
return new GeneTrack({
cellBaseClient: this.config.cellBaseClient,
...track.config,
});
case "gene-overview":
return new GeneOverviewTrack({
cellBaseClient: this.config.cellBaseClient,
...track.config,
});
case "variant":
return new VariantTrack({
cellBaseClient: this.config.cellBaseClient,
...track.config,
});
case "opencga-variant":
return new OpenCGAVariantTrack({
opencgaClient: this.opencgaSession.opencgaClient,
opencgaStudy: this.opencgaSession.study.fqn,
...track.config,
});
case "opencga-alignment":
return new OpenCGAAlignmentTrack({
opencgaClient: this.opencgaSession.opencgaClient,
opencgaStudy: this.opencgaSession.study.fqn,
...track.config,
});
default:
return new FeatureTrack({
cellBaseClient: this.config.cellBaseClient,
...track.config,
});
}
});
}

render() {
Expand Down

0 comments on commit a0346ae

Please sign in to comment.