in client/client/modules/render/variant-render/renderers/structural-variant-renderer.js [1224:1360]
_renderTranscriptsStructure(config, gene) {
if (!gene) {
return;
}
const localContainer = new PIXI.Container();
const graphics = new PIXI.Graphics();
localContainer.addChild(graphics);
this.container.addChild(localContainer);
this._renderTranscriptsBlock(config, gene);
if (gene.empty || !gene.transcripts || !this.variantZonesManager.isExpanded(`${gene.name} transcripts`, 'transcriptsZone')) {
return;
}
for (let t = 0; t < gene.transcripts.length; t++) {
const transcript = gene.transcripts[t];
const name = `${gene.name}_transcript_${t}`.toUpperCase();
const viewport = this.viewports.get(name)[0];
const radioPositionX = this._mainOffset + 5 + this.config.transcript.radio.margin;
const radioPositionY = this.variantZonesManager.getCenter(`${gene.name} transcripts`, 'transcriptsZone',
`${gene.name}_transcript_${t}`, 'transcript');
this._addRadioButton({
x: radioPositionX, y: radioPositionY
}, localContainer, transcript.name === gene.selectedTranscript.name, () => {
if (this._affectedGeneTranscriptChanged) {
this._affectedGeneTranscriptChanged(transcript);
}
});
for (let i = 0; i < transcript.canonicalCds.length; i++) {
const exon = transcript.canonicalCds[i];
if (exon.positionFromStart.end <= viewport.chromosome.start || exon.positionFromStart.start > viewport.chromosome.end)
continue;
let alphaRatio = 1;
if (this._hoveredDomain) {
alphaRatio = .25;
if (exon.domains && exon.domains.length > 0) {
for (let d = 0; d < exon.domains.length; d++) {
if (exon.domains[d].domain.name === this._hoveredDomain) {
alphaRatio = 1;
break;
}
}
}
}
let rect = {
x1: Math.max(viewport.project.brushBP2pixel(exon.positionFromStart.start), viewport.canvas.start),
y1: this.variantZonesManager.getStartPosition(`${gene.name} transcripts`, 'transcriptsZone',
`${gene.name}_transcript_${t}`, 'transcript') + this.config.transcript.margin,
x2: Math.min(viewport.project.brushBP2pixel(exon.positionFromStart.end), viewport.canvas.end),
y2: this.variantZonesManager.getEndPosition(`${gene.name} transcripts`, 'transcriptsZone',
`${gene.name}_transcript_${t}`, 'transcript') - this.config.transcript.margin
};
this._registerExonPosition(exon, rect);
if (i === 0) {
const transcriptLabel = new PIXI.Text(transcript.name, this.config.transcriptName.label);
transcriptLabel.resolution = drawingConfiguration.resolution;
transcriptLabel.x = Math.round(rect.x1);
transcriptLabel.y = Math.round(this.variantZonesManager.getCenter(`${gene.name} transcripts`, 'transcriptsZone',
`${gene.name}_transcript_${t}`, 'transcriptName') - transcriptLabel.height / 2);
localContainer.addChild(transcriptLabel);
}
if (exon.domains && exon.domains.length > 0) {
this.domainColorsManager.fillEmptyExon(exon.geneName, graphics, {
x: rect.x1,
y: rect.y1,
width: rect.x2 - rect.x1,
height: rect.y2 - rect.y1
}, alphaRatio);
graphics.lineStyle(1, 0x000000, alphaRatio);
graphics.drawRect(Math.round(rect.x1) - .5,
Math.round(rect.y1) - .5,
Math.round(rect.x2 - rect.x1),
Math.round(rect.y2 - rect.y1));
for (let j = 0; j < exon.domains.length; j++) {
const exonDomain = exon.domains[j];
const x1 = Math.max(viewport.project.brushBP2pixel(exonDomain.rangeFromStart.start), viewport.canvas.start);
const x2 = Math.min(viewport.project.brushBP2pixel(exonDomain.rangeFromStart.end), viewport.canvas.end);
if (x1 >= x2) {
continue;
}
let domainAlphaRatio = 1;
if (this._hoveredDomain && exonDomain.domain.name !== this._hoveredDomain) {
domainAlphaRatio = .25;
}
const domainColor = this.domainColorsManager.getDomainColor(exonDomain.domain.name);
graphics.beginFill(domainColor.fill, domainColor.alpha * domainAlphaRatio);
graphics.lineStyle(0, 0x000000, 0);
const innerRect = {
x1: Math.max(viewport.project.brushBP2pixel(exonDomain.rangeFromStart.start), viewport.canvas.start),
y1: this.variantZonesManager.getStartPosition(`${gene.name} transcripts`, 'transcriptsZone',
`${gene.name}_transcript_${t}`, 'transcript') + this.config.transcript.margin + .5,
x2: Math.min(viewport.project.brushBP2pixel(exonDomain.rangeFromStart.end), viewport.canvas.end),
y2: this.variantZonesManager.getEndPosition(`${gene.name} transcripts`, 'transcriptsZone',
`${gene.name}_transcript_${t}`, 'transcript') - this.config.transcript.margin - .5
};
graphics.drawRect(innerRect.x1, innerRect.y1, innerRect.x2 - innerRect.x1, innerRect.y2 - innerRect.y1);
graphics.endFill();
}
}
else {
rect = {
x1: Math.max(viewport.project.brushBP2pixel(exon.positionFromStart.start), viewport.canvas.start),
y1: this.variantZonesManager.getStartPosition(`${gene.name} transcripts`, 'transcriptsZone',
`${gene.name}_transcript_${t}`, 'transcript') + this.config.transcript.margin,
x2: Math.min(viewport.project.brushBP2pixel(exon.positionFromStart.end), viewport.canvas.end),
y2: this.variantZonesManager.getEndPosition(`${gene.name} transcripts`, 'transcriptsZone',
`${gene.name}_transcript_${t}`, 'transcript') - this.config.transcript.margin
};
this.domainColorsManager.fillEmptyExon(exon.geneName, graphics, {
x: rect.x1,
y: rect.y1,
width: rect.x2 - rect.x1,
height: rect.y2 - rect.y1
}, alphaRatio);
graphics.lineStyle(1, 0x000000, alphaRatio);
graphics.drawRect(Math.round(rect.x1) - .5,
Math.round(rect.y1) - .5,
Math.round(rect.x2 - rect.x1),
Math.round(rect.y2 - rect.y1));
}
if (exon.index !== null && exon.index !== undefined) {
const exonLabel = new PIXI.Text(exon.index + 1, this.config.transcript.label);
exonLabel.resolution = 2;
exonLabel.alpha = alphaRatio;
if (exonLabel.width < (rect.x2 - rect.x1)) {
exonLabel.x = Math.round((rect.x1 + rect.x2) / 2 - exonLabel.width / 2);
exonLabel.y = Math.round((rect.y2 + rect.y1) / 2 - exonLabel.height / 2);
localContainer.addChild(exonLabel);
}
}
}
}
}