<commit_before>import React, {Component, PropTypes} from 'react';
import styles from './EngineSelector.css';
import classnames from 'classnames';
import {ENGINES} from '../Constants/SupportedEngines.react';

/*
    Displays interactive database engine logos and alters
    the chosen `configuration` engine parameter.
    TODO: take out the selectedEngine variable and use
    `configuration.get('engine')` inestead?
*/

const LOGOS = {
    POSTGRES: './images/postgresLogo.png',
    MYSQL: './images/mysqlLogo.png',
    MARIADB: './images/mariadbLogo.png',
    MSSQL: './images/mssqlLogo.png',
    SQLITE: './images/sqliteLogo.png'
};

export default class EngineSelector extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedEngine: props.configuration.get('engine')
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            selectedEngine: nextProps.configuration.get('engine')
        });
    }

	render() {
        const {configActions} = this.props;
        const {merge} = configActions;

        const resetAllToNull = () => {
            merge({
                username: null,
                password: <PASSWORD>,
                database: null,
                portNumber: null,
                databasePath: null,
                server: null
            });
        };

		const logos = Object.keys(ENGINES).map(engine => (
            <div>
                <div className={classnames(
                        styles.logo, {
                            [styles.logoSelected]:
                                this.state.selectedEngine === ENGINES[engine]<commit_msg>:two: duplicate, not required since `onChange` does it<commit_after>import React, {Component, PropTypes} from 'react';
import styles from './EngineSelector.css';
import classnames from 'classnames';
import {ENGINES} from '../Constants/SupportedEngines.react';

/*
    Displays interactive database engine logos and alters
    the chosen `configuration` engine parameter.
    TODO: take out the selectedEngine variable and use
    `configuration.get('engine')` inestead?
*/

const LOGOS = {
    POSTGRES: './images/postgresLogo.png',
    MYSQL: './images/mysqlLogo.png',
    MARIADB: './images/mariadbLogo.png',
    MSSQL: './images/mssqlLogo.png',
    SQLITE: './images/sqliteLogo.png'
};

export default class EngineSelector extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedEngine: props.configuration.get('engine')
        };
    }

	render() {
        const {configActions} = this.props;
        const {merge} = configActions;

        const resetAllToNull = () => {
            merge({
                username: null,
                password: <PASSWORD>,
                database: null,
                portNumber: null,
                databasePath: null,
                server: null
            });
        };

		const logos = Object.keys(ENGINES).map(engine => (
            <div>
                <div className={classnames(
                        styles.logo, {
                            [styles.logoSelected]:
                                this.state.selectedEngine === ENGINES[engine]
{'fraction_non_alphanumeric': 0.11499227202472952, 'fraction_numerical': 0.0, 'mean_word_length': 1.9879963065558632, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 11, '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': '5999145', 'n_tokens_mistral': 883, 'n_tokens_neox': 845, 'n_words': 200}