<commit_before>import {QueryBuilder} from 'react-querybuilder';
import React from 'react';
import { Button, Glyphicon, Well } from 'react-bootstrap';


const fields = [
    { name: 'firstName', label: '<NAME>' },
    { name: 'lastName', label: '<NAME>' },
    { name: 'age', label: 'Age' },
    { name: 'address', label: 'Address' },
    { name: 'phone', label: 'Phone' },
    { name: 'email', label: 'Email' },
    { name: 'twitter', label: 'Twitter' },
    { name: 'isDev', label: 'Is a Developer?', value: false },
    { name: 'spatial', label: 'Spatial Custom Type', value: {} }
];




function getEditor({field, operator, value, onChange}) {
    if (field == 'isDev' && operator !== '=') {
        const hasValue = !!value;
        return (
            <span>
                <input type="checkbox"
                    value={hasValue}
                    onChange={event => onChange(event.target.checked) }/>
            </span>
        );
    }
    if (field == 'spatial' ) {
        const hasValue = !!value;
        return (
            <span>
                I am a custom Value
            </span>
        );
    }
}

function getOperators(field) {
    if (field !== 'spatial') {
        return null;
    }
    return [{ name: 'InRadius', label: 'Inside Radius' }, { name: 'OutRadius', label: 'Outside Radius' }];
}


const dom = () => {
    return (
        <div style={{ width: '100%', height: '100%', position: 'relative' }}>
            <Well >
                <strong>Create your search query</strong>
                <QueryBuilder fields={fields}
                    onQueryChange={logQuery} getEditor={getEditor} getOperators={getOperators}/>
            </Well>


            <div style={{ position: 'absolute', bottom: 0, right: 0 }}>
                <Button bsStyle='danger'><Glyphicon glyph="alert" />  Create Alert </Button>
                <Button bsStyle='primary'><Glyphicon glyph="eye-open" /> Show in Data View  </Button>
            </div>


        </div>)
}

export default dom;


function logQuery(query) {
    console.log(query);
}<commit_msg>#4 - Added Default Rule This rule can be changed.<commit_after>import {QueryBuilder} from 'react-querybuilder';
import React from 'react';
import { Button, Glyphicon, Well } from 'react-bootstrap';


const fields = [
    { name: 'firstName', label: '<NAME>' },
    { name: 'lastName', label: '<NAME>' },
    { name: 'age', label: 'Age' },
    { name: 'address', label: 'Address' },
    { name: 'phone', label: 'Phone' },
    { name: 'email', label: 'Email' },
    { name: 'twitter', label: 'Twitter' },
    { name: 'isDev', label: 'Is a Developer?', value: false },
    { name: 'spatial', label: 'Spatial Custom Type', value: {} }
];




function getEditor({field, operator, value, onChange}) {
    if (field == 'isDev' && operator !== '=') {
        const hasValue = !!value;
        return (
            <span>
                <input type="checkbox"
                    value={hasValue}
                    onChange={event => onChange(event.target.checked) }/>
            </span>
        );
    }
    if (field == 'spatial') {
        const hasValue = !!value;
        return (
            <span>
                I am a custom Value
            </span>
        );
    }
}

function getOperators(field) {
    if (field !== 'spatial') {
        return null;
    }
    return [{ name: 'InRadius', label: 'Inside Radius' }, { name: 'OutRadius', label: 'Outside Radius' }];
}

const startQuery = {
    combinator: 'and',
    rules: [
        {
            field: 'firstName',
            operator: 'null',
            value: ''
        }
    ]
}

const dom = () => {
    return (
        <div style={{ width: '100%', height: '100%', position: 'relative' }}>
            <Well >
                <strong>Create your search query</strong>
                <QueryBuilder query= {startQuery} fields={fields}
                    onQueryChange={logQuery} getEditor={getEditor} getOperators={getOperators}/>
            </Well>


            <div style={{ position: 'absolute', bottom: 0, right: 0 }}>
                <Button bsStyle='danger'><Glyphicon glyph="alert" />  Create Alert </Button>
                <Button bsStyle='primary'><Glyphicon glyph="eye-open" /> Show in Data View  </Button>
            </div>


        </div>)
}


export default dom;

function logQuery(query) {
    console.log(query);
}
{'fraction_non_alphanumeric': 0.16521937842778794, 'fraction_numerical': 0.0038848263254113347, 'mean_word_length': 2.093286219081272, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 51, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2756138', 'n_tokens_mistral': 1353, 'n_tokens_neox': 1281, 'n_words': 346}