<commit_before>import React from 'react';
import Parameters from './Parameters.jsx';
import MultiplicationTable from './MultiplicationTable.jsx';
import findPrimes from '../helpers/find-primes.js';

class PrimalMultiplication extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentWillMount() {
        this.updateParameters(this.props.initialPrimesLength);
    }

    requestParametersUpdate(primesLength) {
        // Debounce updates
        if (this._updateParametersTimeout) {
            window.clearTimeout(this._updateParametersTimeout);
        }
        this._updateParametersTimeout = window.setTimeout(() => {
            this.updateParameters(primesLength);
        }, 250);
    }

    updateParameters(primesLength) {
        let primes;
        if (this.state.tableProps && this.state.tableProps.primesLength === primesLength) {
            primes = this.state.tableProps.primes;
        } else {
            primes = findPrimes(primesLength);
        }
        this.setState({
            tableProps: {
                primes,
                primesLength,
                maxTableLength : this.props.maxTableLength,
                maxWidth       : this.calculateChildDimensions('width'),
                maxHeight      : this.calculateChildDimensions('height')
            }
		});
    }

    componentDidMount() {
        // Force state update on initial mount
        this.readComponentDimensions(true);
    }

    componentDidUpdate() {
        this.readComponentDimensions();
    }

    readComponentDimensions(forceUpdate = false) {
        this._offsetTop = React.findDOMNode(this).offsetTop;
        if (forceUpdate) {
            let tableProps       = this.state.tableProps;
            tableProps.maxWidth  = this.calculateChildDimensions('width');
            tableProps.maxHeight = this.calculateChildDimensions('height');
            this.setState({ tableProps });
        }
    }

    calculateChildDimensions(dimension) {
        let calculated;
        if (dimension === 'width') {
            const container = document.querySelector('.container--primary');
            calculated = container ? container.clientWidth : document.body.clientWidth;
        } else {
            calculated = window.innerHeight - (this._offsetTop || 123) - 50;
        }
        return calculated;
    }

    render() {
        return (
			<div className="primal-multiplication">
                <Parameters onValueChange={this.requestParametersUpdate.bind(this)} initialValue={this.props.initialPrimesLength} />
                <MultiplicationTable {...this.state.tableProps} />
			</div>
		);
	}
}

PrimalMultiplication.propTypes = {
    initialPrimesLength : React.PropTypes.number,
    maxTableLength      : React.PropTypes.number
};
PrimalMultiplication.defaultProps = {
    initialPrimesLength : 10,
    maxTableLength      : 20
};

export default PrimalMultiplication;<commit_msg>Bump the max table length up to 100<commit_after>import React from 'react';
import Parameters from './Parameters.jsx';
import MultiplicationTable from './MultiplicationTable.jsx';
import findPrimes from '../helpers/find-primes.js';

class PrimalMultiplication extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentWillMount() {
        this.updateParameters(this.props.initialPrimesLength);
    }

    requestParametersUpdate(primesLength) {
        // Debounce updates
        if (this._updateParametersTimeout) {
            window.clearTimeout(this._updateParametersTimeout);
        }
        this._updateParametersTimeout = window.setTimeout(() => {
            this.updateParameters(primesLength);
        }, 250);
    }

    updateParameters(primesLength) {
        let primes;
        if (this.state.tableProps && this.state.tableProps.primesLength === primesLength) {
            primes = this.state.tableProps.primes;
        } else {
            primes = findPrimes(primesLength);
        }
        this.setState({
            tableProps: {
                primes,
                primesLength,
                maxTableLength : this.props.maxTableLength,
                maxWidth       : this.calculateChildDimensions('width'),
                maxHeight      : this.calculateChildDimensions('height')
            }
		});
    }

    componentDidMount() {
        // Force state update on initial mount
        this.readComponentDimensions(true);
    }

    componentDidUpdate() {
        this.readComponentDimensions();
    }

    readComponentDimensions(forceUpdate = false) {
        this._offsetTop = React.findDOMNode(this).offsetTop;
        if (forceUpdate) {
            let tableProps       = this.state.tableProps;
            tableProps.maxWidth  = this.calculateChildDimensions('width');
            tableProps.maxHeight = this.calculateChildDimensions('height');
            this.setState({ tableProps });
        }
    }

    calculateChildDimensions(dimension) {
        let calculated;
        if (dimension === 'width') {
            const container = document.querySelector('.container--primary');
            calculated = container ? container.clientWidth : document.body.clientWidth;
        } else {
            calculated = window.innerHeight - (this._offsetTop || 123) - 50;
        }
        return calculated;
    }

    render() {
        return (
			<div className="primal-multiplication">
                <Parameters onValueChange={this.requestParametersUpdate.bind(this)} initialValue={this.props.initialPrimesLength} />
                <MultiplicationTable {...this.state.tableProps} />
			</div>
		);
	}
}

PrimalMultiplication.propTypes = {
    initialPrimesLength : React.PropTypes.number,
    maxTableLength      : React.PropTypes.number
};
PrimalMultiplication.defaultProps = {
    initialPrimesLength : 10,
    maxTableLength      : 100
};

export default PrimalMultiplication;
{'fraction_non_alphanumeric': 0.10388300554715078, 'fraction_numerical': 0.004706673390485796, 'mean_word_length': 2.335201793721973, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 13, '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': '1997025', 'n_tokens_mistral': 1593, 'n_tokens_neox': 1527, 'n_words': 258}