<commit_before>var _ = require('lodash');
var classnames = require('classnames');
var React = require('react');


var ImageComparator = React.createClass({
    getInitialState: function() {
        return {
            animated: false,
            dragging: false,
            originalLabelVisible: false,
            resizeLabelVisible: true,
            resizePercentage: '0%',
        };
    },
    animateIfVisible: function() {
        // Check until comparator is in the viewport to animate it.
        var root = this;

        var comparator = React.findDOMNode(root);
        var comparatorTop = comparator.getBoundingClientRect().top;

        var viewportHalf = document.body.scrollTop +
                           document.body.offsetHeight * 0.5;
        if (viewportHalf > comparatorTop) {
            root.setState({
                animated: true,
                resizePercentage: '100%',
            });

            window.removeEventListener('scroll', this.animateIfVisible);
        }
    },
    componentDidMount: function() {
        if (!this.props.originalSrc || !this.props.modifiedSrc) {
            return;
        }

        window.addEventListener('scroll', this.animateIfVisible);
        window.addEventListener('resize', this.resizeContainer);

        this.animateIfVisible();
        this.resizeContainer();
    },
    componentWillUnmount: function() {
        if (!this.state.animated) {
            window.removeEventListener('scroll', this.animateIfVisible);
        }
        window.removeEventListener('resize', this.resizeContainer);
    },
    dragEndHandler: function(e) {
        // Remove the drag handlers once done dragging.
        if (!this.state.dragging) {
            return;<commit_msg>use an interval to make sure we set width of bgs<commit_after>var _ = require('lodash');
var classnames = require('classnames');
var React = require('react');


var ImageComparator = React.createClass({
    getInitialState: function() {
        return {
            animated: false,
            dragging: false,
            originalLabelVisible: false,
            resizeLabelVisible: true,
            resizePercentage: '0%',
        };
    },
    animateIfVisible: function() {
        // Check until comparator is in the viewport to animate it.
        var root = this;

        var comparator = React.findDOMNode(root);
        var comparatorTop = comparator.getBoundingClientRect().top;

        var viewportHalf = document.body.scrollTop +
                           document.body.offsetHeight * 0.5;
        if (viewportHalf > comparatorTop) {
            root.setState({
                animated: true,
                resizePercentage: '100%',
            });

            window.removeEventListener('scroll', this.animateIfVisible);
        }
    },
    componentDidMount: function() {
        if (!this.props.originalSrc || !this.props.modifiedSrc) {
            return;
        }

        window.addEventListener('scroll', this.animateIfVisible);
        window.addEventListener('resize', this.resizeContainer);

        this.animateIfVisible();

        var root = this;
        var resizeInterval = setInterval(function() {
            if (!root.state.containerWidth) {
                root.resizeContainer();
            } else {
                clearInterval(resizeInterval);
            }
        }, 500);
    },
    componentWillUnmount: function() {
        if (!this.state.animated) {
            window.removeEventListener('scroll', this.animateIfVisible);
        }
        window.removeEventListener('resize', this.resizeContainer);
    },
    dragEndHandler: function(e) {
        // Remove the drag handlers once done dragging.
        if (!this.state.dragging) {
            return;
{'fraction_non_alphanumeric': 0.10752401280683031, 'fraction_numerical': 0.00400213447171825, 'mean_word_length': 2.0554197229013855, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '3803060', 'n_tokens_mistral': 981, 'n_tokens_neox': 920, 'n_words': 204}