manageViewports()

in client/client/modules/render/variant-render/renderers/short-variant-renderer.js [86:201]


    manageViewports(config) {
        super.manageViewports(config);
        this._detailedMode = false;
        const maximumBasePairsRange = (config.width - 2 * this.config.reference.width) / this._config.nucleotide.size.width.minimum;
        const minimumBasePairsRange = (config.width - 2 * this.config.reference.width) / this._config.nucleotide.size.width.maximum;
        const aminoacidLengthInBasePairs = 3;
        const extraBasePairsPerSide = aminoacidLengthInBasePairs * 2;
        const alternativeAlleleInfo = this.variant.selectedAltField;
        this._detailedMode = (alternativeAlleleInfo.info.length || 0) + 2 * extraBasePairsPerSide > maximumBasePairsRange;
        let subZones = [{name: 'aminoacid'}, {name: 'sequence'}];
        let displayStrand = true;
        if (alternativeAlleleInfo.affectedFeaturesStructure.affectedGenesData === null || alternativeAlleleInfo.affectedFeaturesStructure.affectedGenesData === undefined || alternativeAlleleInfo.affectedFeaturesStructure.affectedGenesData.length === 0) {
            displayStrand = false;
        }
        if (alternativeAlleleInfo.affectedFeaturesStructure.affectedTranscripts === null || alternativeAlleleInfo.affectedFeaturesStructure.affectedTranscripts === undefined || alternativeAlleleInfo.affectedFeaturesStructure.affectedTranscripts.length === 0) {
            subZones = [{name: 'sequence'}];
        }
        if (!this._detailedMode) {
            let zonesConfiguration = [
                {name: 'reference', zones: subZones},
                {name: 'alternative', zones: subZones}
            ];
            if (displayStrand) {
                zonesConfiguration = [{name: 'strand'}, ...zonesConfiguration];
            }
            this.variantZonesManager.configureZones(zonesConfiguration);
            const pointOfInterest = this.variant.variantInfo.startIndexCorrected + (alternativeAlleleInfo.info.length || 0) / 2 - 0.5;
            const rangeOfInterest = Math.min(maximumBasePairsRange, Math.max(minimumBasePairsRange, (alternativeAlleleInfo.info.length || 0) + 2 * extraBasePairsPerSide));
            let start = pointOfInterest - rangeOfInterest / 2;
            const end = Math.min(this.variant.chromosome.size, start + rangeOfInterest);
            start = Math.max(1, end - rangeOfInterest);
            const viewportArgs = {
                chromosome: {start: 1, end: this.variant.chromosome.size},
                brush: {start: start, end: end},
                canvas: {start: this.config.reference.width, end: config.width - this.config.reference.width}
            };
            const viewport = new BaseViewport(viewportArgs);
            this.viewports.set(alternativeAlleleInfo, viewport);
        }
        else {
            let zonesConfiguration = [
                {name: 'reference', zones: subZones},
                {name: 'alternative', zones: subZones},
                {name: 'modified', zones: subZones}
            ];
            if (this.variant.variantInfo.type.toLowerCase() === 'del') {
                zonesConfiguration = [
                    {name: 'modified', zones: subZones},
                    {name: 'reference', zones: subZones},
                    {name: 'alternative', zones: subZones}
                ];
            }
            if (displayStrand) {
                zonesConfiguration = [{name: 'strand'}, ...zonesConfiguration];
            }
            this.variantZonesManager.configureZones(zonesConfiguration);
            const factor = this._config.nucleotide.size.width.maximum;
            const modifiedSequenceLengthInPixels = (alternativeAlleleInfo.info.length || 0) * factor;
            const mainCanvasSize = Math.min(config.width - this.config.reference.width - 2 * this._config.sequences.margin.horizontal, modifiedSequenceLengthInPixels);
            const canvases = {
                main: {
                    start: config.width / 2 - mainCanvasSize / 2,
                    end: config.width / 2 + mainCanvasSize / 2
                },
                subLeft: {
                    start: this.config.reference.width,
                    end: config.width / 2 - this._config.sequences.modifiedRange.width / 2
                },
                subRight: {
                    start: config.width / 2 + this._config.sequences.modifiedRange.width / 2,
                    end: config.width - this.config.reference.width - this._config.sequences.margin.horizontal
                }
            };

            const modifiedSequenceRange = {
                start: this.variant.variantInfo.startIndexCorrected - 0.5,
                end: this.variant.variantInfo.startIndexCorrected + (alternativeAlleleInfo.info.length || 0) - 0.5
            };
            const mainViewport:BaseViewport = new BaseViewport(
                {
                    chromosome: modifiedSequenceRange,
                    brush: {
                        start: this.variant.variantInfo.startIndexCorrected - 0.5
                    },
                    canvas: canvases.main,
                    factor: factor
                });
            const subLeftViewport:BaseViewport = new BaseViewport(
                {
                    chromosome: {
                        start: 1,
                        end: this.variant.chromosome.size
                    },
                    brush: {
                        end: this.variant.variantInfo.startIndexCorrected - 0.5
                    },
                    canvas: canvases.subLeft,
                    factor: factor
                });
            const subRightViewport:BaseViewport = new BaseViewport(
                {
                    chromosome: {
                        start: 1,
                        end: this.variant.chromosome.size
                    },
                    brush: {
                        start: this.variant.variantInfo.startIndexCorrected + ((alternativeAlleleInfo.info.length || 0)) - 0.5
                    },
                    canvas: canvases.subRight,
                    factor: factor
                });
            this.viewports.set('main', mainViewport);
            this.viewports.set('sub-left', subLeftViewport);
            this.viewports.set('sub-right', subRightViewport);
        }
    }