in client/client/modules/render/variant-render/renderers/short-variant-renderer.js [344:469]
_renderModifiedSequence(container: PIXI.Container, sequence, aminoacids, alternativeAlleleInfo) {
const mainViewport:BaseViewport = this.viewports.get('main');
const leftViewport:BaseViewport = this.viewports.get('sub-left');
const rightViewport:BaseViewport = this.viewports.get('sub-right');
if (container !== null && container !== undefined && mainViewport !== null && mainViewport !== undefined && leftViewport !== null && leftViewport !== undefined && rightViewport !== null && rightViewport !== undefined) {
container.removeChildren();
const graphics = new PIXI.Graphics();
const sequenceContainer = new PIXI.Container();
container.addChild(sequenceContainer);
container.addChild(graphics);
const localCanvas = {
start: leftViewport.canvas.end + this._config.nucleotide.margin.x * 2,
end: rightViewport.canvas.start - this._config.nucleotide.margin.x * 2 - 1
};
const localCanvasSize = localCanvas.end - localCanvas.start;
const mainCanvas = mainViewport.canvas;
const mainCanvasSize = mainViewport.canvasSize;
const convertation = (value) => value / mainCanvasSize * localCanvasSize;
const projection = (x) => localCanvas.start + convertation(x - mainCanvas.start);
const gapZoneName = (this.variant.variantInfo.type.toLowerCase() === 'del') ? 'reference' : 'alternative';
const zonesDirection = this.variantZonesManager.getStartPosition(gapZoneName) > this.variantZonesManager.getStartPosition('modified') ? -1 : 1;
const calloutPosition = zonesDirection > 0 ? this.variantZonesManager.getStartPosition('modified') : this.variantZonesManager.getEndPosition('modified');
const calloutGapPosition = this.variantZonesManager.getStartPosition(gapZoneName, 'sequence') +
this.variantZonesManager.getHeight(gapZoneName, 'sequence') * (zonesDirection < 0 ? 1 : 0) +
this.config.nucleotide.margin.y * zonesDirection;
const modifiedSequenceGapBoundaries = {
x: projection(mainViewport.project.chromoBP2pixel(mainViewport.chromosome.start)),
y: this.variantZonesManager.getStartPosition(gapZoneName, 'sequence') + this.config.nucleotide.margin.y,
width: convertation(mainViewport.convert.chromoBP2pixel(mainViewport.chromosomeSize)),
height: this.config.nucleotide.size.height
};
const modifiedSequenceBoundaries = {
x: mainViewport.canvas.start,
y: this.variantZonesManager.getStartPosition('modified'),
width: mainViewport.canvasSize,
height: this.variantZonesManager.getHeight('modified')
};
let gene = null;
let exonArray = null;
if (alternativeAlleleInfo.affectedFeaturesStructure.affectedTranscripts.length > 0) {
//todo: consensus exon structure
for (let i = 0; i < alternativeAlleleInfo.affectedFeaturesStructure.affectedTranscripts.length; i++) {
exonArray = alternativeAlleleInfo.affectedFeaturesStructure.affectedTranscripts[i].transcript.value.exon;
if (exonArray !== null && exonArray !== undefined && exonArray.length > 0) {
gene = alternativeAlleleInfo.affectedFeaturesStructure.affectedTranscripts[i].gene.value;
break;
}
exonArray = null;
}
}
const render = () => {
graphics.clear();
graphics
.beginFill(0xEEEEEE, 1)
.lineStyle(1, 0x000000, 1)
.drawRect(modifiedSequenceGapBoundaries.x, modifiedSequenceGapBoundaries.y, modifiedSequenceGapBoundaries.width, modifiedSequenceGapBoundaries.height)
.endFill()
.beginFill(this._config.sequences.modifiedRange.ruler, 0.25)
.lineStyle(0, 0x000000, 0)
.drawRect(
projection(mainViewport.project.chromoBP2pixel(mainViewport.brush.start)),
modifiedSequenceGapBoundaries.y,
convertation(mainViewport.convert.chromoBP2pixel(mainViewport.brushSize + 1)),
modifiedSequenceGapBoundaries.height)
.endFill()
.lineStyle(1, this._config.sequences.modifiedRange.ruler, 1)
.moveTo(mainViewport.canvas.start, calloutPosition + 4 * zonesDirection)
.lineTo(mainViewport.canvas.start, calloutPosition)
.lineTo(projection(mainViewport.project.chromoBP2pixel(mainViewport.brush.start)), calloutPosition)
.lineTo(projection(mainViewport.project.chromoBP2pixel(mainViewport.brush.start)), calloutGapPosition)
.moveTo(mainViewport.canvas.end, calloutPosition + 4 * zonesDirection)
.lineTo(mainViewport.canvas.end, calloutPosition)
.lineTo(projection(mainViewport.project.chromoBP2pixel(mainViewport.brush.end + 1)), calloutPosition)
.lineTo(projection(mainViewport.project.chromoBP2pixel(mainViewport.brush.end + 1)), calloutGapPosition);
sequenceContainer.removeChildren();
if (exonArray && gene) {
this.exonsCoverageRenderer.renderExonsConverage(gene, exonArray, mainViewport, sequenceContainer, this.variantZonesManager.getStartPosition('modified'), this.variantZonesManager.getEndPosition('modified'));
}
this.sequenceRenderer.renderSequence(sequence, mainViewport, sequenceContainer, this.variantZonesManager.getStartPosition('modified', 'sequence'));
this.aminoacidRenderer.renderAminoacids(aminoacids, mainViewport, sequenceContainer, this.variantZonesManager.getStartPosition('modified', 'aminoacid'));
const clippingRules = {
rightClip: mainViewport.brush.end < mainViewport.chromosome.end,
leftClip: mainViewport.brush.start > mainViewport.chromosome.start
};
this.featureCutOffRenderer
.beginCuttingOff(sequenceContainer)
.cutOff(modifiedSequenceBoundaries, clippingRules)
.endCuttingOff();
};
render();
const boundaries = {
x: mainViewport.canvas.start,
y: this.variantZonesManager.getStartPosition('modified'),
width: mainViewport.canvasSize,
height: this.variantZonesManager.getHeight('modified')
};
const dragCallback = (dx) => {
let newStart = mainViewport.brush.start - dx / mainViewport.factor;
let newEnd = Math.min(mainViewport.chromosome.end, newStart + mainViewport.brushSize);
newStart = Math.max(mainViewport.chromosome.start, newEnd - mainViewport.brushSize);
newEnd = Math.min(mainViewport.chromosome.end, newStart + mainViewport.brushSize);
mainViewport.brush = {
start: newStart,
end: newEnd
};
render();
this._updateSceneFn();
};
this.dragManager.addDraggableZone(boundaries, dragCallback);
}
}