<commit_before>/**
 * Created by dat on 9/16/16.
 */
var igv = (function (igv) {

    igv.Viewport = function (trackView, locusIndex) {
        this.initializationHelper(trackView, locusIndex);
    };

    igv.Viewport.prototype.initializationHelper = function (trackView, locusIndex) {

        var self = this,
            description,
            $trackLabel,
            $spinner,
            dimen,
            genomicState = igv.browser.genomicStateList[ locusIndex ],
            $rulerContent;

        this.trackView = trackView;
        this.locusIndex = locusIndex;
        this.viewportContainerPercentage = genomicState.viewportContainerPercentage;

        this.$viewport = $('<div class="igv-viewport-div">');
        addViewportBorders(this.$viewport, this.locusIndex, _.size(igv.browser.genomicStateList));

        // TODO diagnostic coloring
        // this.$viewport.css("background-color", igv.randomRGBConstantAlpha(200, 255, 0.75));

        this.id = _.uniqueId('viewport_');
        this.$viewport.data( "viewport", this.id );

        this.$viewport.data( "locusindex", this.locusIndex );

        this.$viewport.width( genomicState.viewportWidth );

        trackView.$viewportContainer.append( this.$viewport );

        this.contentDiv = $('<div class="igv-viewport-content-div">')[0];
        this.$viewport.append(this.contentDiv);

        // track content canvas
        this.canvas = $('<canvas class = "igv-viewport-canvas">')[0];
        $(this.contentDiv).append(this.canvas);
        this.canvas.setAttribute('width', this.contentDiv.clientWidth);
        this.canvas.setAttribute('height', this.contentDiv.clientHeight);
        this.ctx = this.canvas.getContext("2d");

        // additional content for ruler track
        if (trackView.track instanceof igv.RulerTrack) {
            // $rulerContent = $('<div class = "igv-viewport-content-ruler-div">');
            // $rulerContent.css("background-color", igv.randomRGBConstantAlpha(200, 255, 0.75));
            // $(this.contentDiv).append($rulerContent);

            $(this.contentDiv).append(igv.browser.rulerTrack.lengthWidgetWithGenomicState(genomicState));
        }

        // zoom in to see features
        if (trackView.track.visibilityWindow !== undefined) {
            self.$zoomInNotice = $('<div class="zoom-in-notice">');
            self.$zoomInNotice.text('Zoom in to see features');
            $(this.contentDiv).append(self.$zoomInNotice);
            self.$zoomInNotice.hide();
        }

        // TODO: dat - move scrollbars to $viewportContainer
        // scrollbar,  default is to set overflow ot hidden and use custom scrollbar, but this can be overriden so check
        // if ("hidden" === this.$viewport.css("overflow-y")) {
        //     this.scrollbar = new TrackScrollbar(this.$viewport.get(0), this.contentDiv);
        //     this.scrollbar.update();
        //     this.$viewport.append(this.scrollbar.outerScrollDiv);
        // }

        if (trackView.track.name) {

            description = trackView.track.description || trackView.track.name;
            $trackLabel = $('<div class="igv-track-label">');

            $trackLabel.html(trackView.track.name);

            $trackLabel.click(function (e) {
                igv.popover.presentTrackPopup(e.pageX, e.pageY, description, false);
            });

            this.$viewport.append($trackLabel);
        }

        this.addMouseHandlers(trackView);

        if (trackView.track instanceof igv.RulerTrack) {

            // do nothing
        } else {
            dimen = this.$viewport.height();
            if (dimen > 32) {
                dimen = 32;
            }

            $spinner = $('<div class="igv-viewport-spinner">');
            $spinner.css({ 'font-size' : dimen + 'px'});

            // $spinner.append($('<i class="fa fa-cog fa-spin fa-fw">'));
            $spinner.append($('<i class="fa fa-spinner fa-spin fa-fw">'));
            this.$viewport.append($spinner);
            this.stopSpinner();
        }

        this.viewportContainerPercentage = (this.$viewport.width()/this.$viewport.outerWidth()) * (1.0/_.size(igv.browser.genomicStateList));
        genomicState.viewportContainerPercentage = this.viewportContainerPercentage;
        genomicState.viewportWidth = Math.floor( genomicState.viewportContainerPercentage * igv.browser.syntheticViewportContainerWidth() );
        this.$viewport.width( genomicState.viewportWidth );


        // console.log('viewport width ' + this.$viewport.width() + ' outer width ' + this.$viewport.outerWidth());
<commit_msg>TODO: Multi-locus viewport must account for border size.<commit_after>/**
 * Created by dat on 9/16/16.
 */
var igv = (function (igv) {

    igv.Viewport = function (trackView, locusIndex) {
        this.initializationHelper(trackView, locusIndex);
    };

    igv.Viewport.prototype.initializationHelper = function (trackView, locusIndex) {

        var self = this,
            description,
            $trackLabel,
            $spinner,
            dimen,
            genomicState = igv.browser.genomicStateList[ locusIndex ],
            $rulerContent;

        this.trackView = trackView;
        this.locusIndex = locusIndex;
        this.viewportContainerPercentage = genomicState.viewportContainerPercentage;

        this.$viewport = $('<div class="igv-viewport-div">');
        // addViewportBorders(this.$viewport, this.locusIndex, _.size(igv.browser.genomicStateList));

        // TODO diagnostic coloring
        this.$viewport.css("background-color", igv.randomRGBConstantAlpha(200, 255, 0.75));

        this.id = _.uniqueId('viewport_');
        this.$viewport.data( "viewport", this.id );

        this.$viewport.data( "locusindex", this.locusIndex );

        this.$viewport.width( genomicState.viewportWidth );

        trackView.$viewportContainer.append( this.$viewport );

        this.contentDiv = $('<div class="igv-viewport-content-div">')[0];
        this.$viewport.append(this.contentDiv);

        // track content canvas
        this.canvas = $('<canvas class = "igv-viewport-canvas">')[0];
        $(this.contentDiv).append(this.canvas);
        this.canvas.setAttribute('width', this.contentDiv.clientWidth);
        this.canvas.setAttribute('height', this.contentDiv.clientHeight);
        this.ctx = this.canvas.getContext("2d");

        // additional content for ruler track
        if (trackView.track instanceof igv.RulerTrack) {
            // $rulerContent = $('<div class = "igv-viewport-content-ruler-div">');
            // $rulerContent.css("background-color", igv.randomRGBConstantAlpha(200, 255, 0.75));
            // $(this.contentDiv).append($rulerContent);

            $(this.contentDiv).append(igv.browser.rulerTrack.lengthWidgetWithGenomicState(genomicState));
        }

        // zoom in to see features
        if (trackView.track.visibilityWindow !== undefined) {
            self.$zoomInNotice = $('<div class="zoom-in-notice">');
            self.$zoomInNotice.text('Zoom in to see features');
            $(this.contentDiv).append(self.$zoomInNotice);
            self.$zoomInNotice.hide();
        }

        // TODO: dat - move scrollbars to $viewportContainer
        // scrollbar,  default is to set overflow ot hidden and use custom scrollbar, but this can be overriden so check
        // if ("hidden" === this.$viewport.css("overflow-y")) {
        //     this.scrollbar = new TrackScrollbar(this.$viewport.get(0), this.contentDiv);
        //     this.scrollbar.update();
        //     this.$viewport.append(this.scrollbar.outerScrollDiv);
        // }

        if (trackView.track.name) {

            description = trackView.track.description || trackView.track.name;
            $trackLabel = $('<div class="igv-track-label">');

            $trackLabel.html(trackView.track.name);

            $trackLabel.click(function (e) {
                igv.popover.presentTrackPopup(e.pageX, e.pageY, description, false);
            });

            this.$viewport.append($trackLabel);
        }

        this.addMouseHandlers(trackView);

        if (trackView.track instanceof igv.RulerTrack) {

            // do nothing
        } else {
            dimen = this.$viewport.height();
            if (dimen > 32) {
                dimen = 32;
            }

            $spinner = $('<div class="igv-viewport-spinner">');
            $spinner.css({ 'font-size' : dimen + 'px'});

            // $spinner.append($('<i class="fa fa-cog fa-spin fa-fw">'));
            $spinner.append($('<i class="fa fa-spinner fa-spin fa-fw">'));
            this.$viewport.append($spinner);
            this.stopSpinner();
        }

{'fraction_non_alphanumeric': 0.14386248269497, 'fraction_numerical': 0.007383479464697739, 'mean_word_length': 2.3705287713841368, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7169940', 'n_tokens_mistral': 2593, 'n_tokens_neox': 2460, 'n_words': 426}