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

function cleanBoolean (value) {
    if (typeof value === "string") {
        if (value.toLowerCase() === "true") {
            value = true;
        } else if (value.toLowerCase() === "false") {
            value = false;
        }
    }
    return value;
}

var chartDefinitions = require('./ChartDefinitions.js');

/*
sqlpad                  taucharts               label
line                    line                    Line
bubble                  scatterplot             Scatterplot
bar                     horizontalBar           Bar - Horizontal
verticalbar             bar                     Bar - Vertical 
stacked-bar-vertical    stacked-bar             Stacked Bar - Vertical
stacked-bar-horizontal  horizontal-stacked-bar  Stacked Bar - Horizontal

*/

var FormGroup = require('react-bootstrap/lib/FormGroup');
var FormControl = require('react-bootstrap/lib/FormControl');
var ControlLabel = require('react-bootstrap/lib/ControlLabel');
var Checkbox = require('react-bootstrap/lib/Checkbox');

var ChartInputs = React.createClass({
    changeChartConfigurationField: function (chartFieldId, queryResultField) {
        this.props.onChartConfigurationFieldsChange(chartFieldId, queryResultField);
    },
    render: function () {
        var queryChartConfigurationFields = this.props.queryChartConfigurationFields || {};
        var queryResult = this.props.queryResult;
        var queryResultFields = (queryResult && queryResult.fields ? queryResult.fields : []);
        var chartInputDefinition = _.findWhere(chartDefinitions, {chartType: this.props.chartType});

        if (chartInputDefinition && chartInputDefinition.fields) {
            
            var dropdownNodes = chartInputDefinition.fields.map((field) => {

                var onCheckboxChange = (e) => {
                    this.changeChartConfigurationField(field.fieldId, e.target.checked)
                }

                if (field.inputType == 'field-dropdown') {
                    var optionNodes = queryResultFields.map(function (qrfield) {
                        return (
                            <option key={qrfield} value={qrfield}>{qrfield}</option>
                        )
                    });
                    var selectedQueryResultField = queryChartConfigurationFields[field.fieldId];
                    if (queryResultFields.indexOf(selectedQueryResultField) == -1) { 
                        optionNodes.push(function () {
                            return (
                                <option key={'selectedQueryResultField'} value={selectedQueryResultField}>{selectedQueryResultField}</option>
                            )
                        }());
                    }
                    return (
                        <FormGroup key={field.fieldId} controlId={field.fieldId} bsSize="small">
                            <ControlLabel>{field.label}</ControlLabel>
                            <FormControl 
                                value={selectedQueryResultField}
                                onChange={(e) => {
                                    this.changeChartConfigurationField(field.fieldId, e.target.value);
                                }}  
                                componentClass="select" 
                                className="input-small">
                                    <option value=""></option>
                                    {optionNodes}
                            </FormControl>
                        </FormGroup>
                    )
                } else if (field.inputType == 'checkbox') {
                    var checked = cleanBoolean(queryChartConfigurationFields[field.fieldId]) || false;
                    return (
                        <FormGroup key={field.fieldId} controlId={field.fieldId} bsSize="small">
                            <Checkbox checked={checked} onChange={onCheckboxChange}>
                                {field.label}
                            </Checkbox>
                        </FormGroup>
                    )
                } else if (field.inputType == 'textbox') {
                    var value = queryChartConfigurationFields[field.fieldId];
                    return (
                        <FormGroup key={field.fieldId} controlId={field.fieldId} bsSize="small">
                            <ControlLabel>{field.label}</ControlLabel>
                            <FormControl 
                                value={(value == null ? '' : value)}
                                onChange={(e) => {
                                    this.changeChartConfigurationField(field.fieldId, e.target.value);
                                }}  
                                type="text" <commit_msg>inline checked config field change handler<commit_after>var React = require('react');
var _ = require('_');

function cleanBoolean (value) {
    if (typeof value === "string") {
        if (value.toLowerCase() === "true") {
            value = true;
        } else if (value.toLowerCase() === "false") {
            value = false;
        }
    }
    return value;
}

var chartDefinitions = require('./ChartDefinitions.js');

/*
sqlpad                  taucharts               label
line                    line                    Line
bubble                  scatterplot             Scatterplot
bar                     horizontalBar           Bar - Horizontal
verticalbar             bar                     Bar - Vertical 
stacked-bar-vertical    stacked-bar             Stacked Bar - Vertical
stacked-bar-horizontal  horizontal-stacked-bar  Stacked Bar - Horizontal

*/

var FormGroup = require('react-bootstrap/lib/FormGroup');
var FormControl = require('react-bootstrap/lib/FormControl');
var ControlLabel = require('react-bootstrap/lib/ControlLabel');
var Checkbox = require('react-bootstrap/lib/Checkbox');

var ChartInputs = React.createClass({
    changeChartConfigurationField: function (chartFieldId, queryResultField) {
        this.props.onChartConfigurationFieldsChange(chartFieldId, queryResultField);
    },
    render: function () {
        var queryChartConfigurationFields = this.props.queryChartConfigurationFields || {};
        var queryResult = this.props.queryResult;
        var queryResultFields = (queryResult && queryResult.fields ? queryResult.fields : []);
        var chartInputDefinition = _.findWhere(chartDefinitions, {chartType: this.props.chartType});

        if (chartInputDefinition && chartInputDefinition.fields) {
            
            var dropdownNodes = chartInputDefinition.fields.map((field) => {

                if (field.inputType == 'field-dropdown') {
                    var optionNodes = queryResultFields.map(function (qrfield) {
                        return (
                            <option key={qrfield} value={qrfield}>{qrfield}</option>
                        )
                    });
                    var selectedQueryResultField = queryChartConfigurationFields[field.fieldId];
                    if (queryResultFields.indexOf(selectedQueryResultField) == -1) { 
                        optionNodes.push(function () {
                            return (
                                <option key={'selectedQueryResultField'} value={selectedQueryResultField}>{selectedQueryResultField}</option>
                            )
                        }());
                    }
                    return (
                        <FormGroup key={field.fieldId} controlId={field.fieldId} bsSize="small">
                            <ControlLabel>{field.label}</ControlLabel>
                            <FormControl 
                                value={selectedQueryResultField}
                                onChange={(e) => {
                                    this.changeChartConfigurationField(field.fieldId, e.target.value);
                                }}  
                                componentClass="select" 
                                className="input-small">
                                    <option value=""></option>
                                    {optionNodes}
                            </FormControl>
                        </FormGroup>
                    )
                } else if (field.inputType == 'checkbox') {
                    var checked = cleanBoolean(queryChartConfigurationFields[field.fieldId]) || false;
                    return (
                        <FormGroup key={field.fieldId} controlId={field.fieldId} bsSize="small">
                            <Checkbox checked={checked} onChange={(e) => {
                                this.changeChartConfigurationField(field.fieldId, e.target.checked);
                            }}>
                                {field.label}
                            </Checkbox>
                        </FormGroup>
                    )
                } else if (field.inputType == 'textbox') {
                    var value = queryChartConfigurationFields[field.fieldId];
                    return (
                        <FormGroup key={field.fieldId} controlId={field.fieldId} bsSize="small">
                            <ControlLabel>{field.label}</ControlLabel>
                            <FormControl 
                                value={(value == null ? '' : value)}
                                onChange={(e) => {
                                    this.changeChartConfigurationField(field.fieldId, e.target.value);
                                }}  
                                type="text" 
{'fraction_non_alphanumeric': 0.09642819952098303, 'fraction_numerical': 0.0002082682495053629, 'mean_word_length': 1.3544986516303015, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 49, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 10, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4858224', 'n_tokens_mistral': 2162, 'n_tokens_neox': 2044, 'n_words': 372}