<commit_before>var Keys = {
    ENTER: 13,
    TAB: 9,
    BACKSPACE: 8,
    UP_ARROW: 38,
    DOWN_ARROW: 40
};

var Tags = React.createClass({
    componentDidMount: function() {
        this.refs.input.getDOMNode().focus();
    },
    getInitialState: function() {
        return {
            tags: this.props.tags,
            suggestions: this.props.suggestions,
            query: "",
            selectedIndex: -1,
            selectionMode: false
        }
    },
    handleDelete: function(i, e) {
        var tags = this.state.tags;
        tags.splice(i, 1);
        this.setState({
            tags: tags,
            query: ""
        });
    },
    markIt: function(input, query) {
        var escapedRegex = query.trim().replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&");
        var r = RegExp(escapedRegex, "gi");
        return {
          __html: input.replace(r, "<mark>$&</mark>")
        }
    },
    handleChange: function(e) {
        var query = e.target.value.trim();
        var suggestions = this.props.suggestions.filter(function(item) {
            return (item.toLowerCase()).search(query.toLowerCase()) === 0;
        });

        this.setState({
            query: query,
            suggestions: suggestions,
        });
    },
    handleKeyDown: function(e) {
        var tags = this.state.tags;
        var input = this.refs.input.getDOMNode();
        var query = this.state.query;
        var selectedIndex = this.state.selectedIndex;

        // when enter or tab is pressed add query to tags
        if ((e.keyCode === Keys.ENTER || e.keyCode === Keys.TAB) && query != "") {
            e.preventDefault();
            if (this.state.selectionMode) {
                query = this.state.suggestions[this.state.selectedIndex];               
            }
            tags.push(query);
            input.value = "";
            this.setState({ 
              tags: tags, 
              query: "",
              selectionMode: false,
              selectedIndex: -1
            });
        }

        // when backspace key is pressed and query is blank, delete tag
        if (e.keyCode === 8 && query == "") { //
            this.handleDelete(tags.length - 1);
        }

        // up arrow
        if (e.keyCode === Keys.UP_ARROW) {
            e.preventDefault();
            var selectedIndex = this.state.selectedIndex;
            // last item, cycle to the top
            if (selectedIndex <= 0) {
                this.setState({
                  selectedIndex: this.state.suggestions.length - 1,
                  selectionMode: true
                });
            } else {
                this.setState({
                  selectedIndex: selectedIndex - 1,
                  selectionMode: true
                });
            }
        }

        // down arrow
        if (e.keyCode === Keys.DOWN_ARROW) {
            e.preventDefault();
            var selectedIndex = this.state.selectedIndex;
            // last item, cycle to the top
            if (selectedIndex === this.state.suggestions.length - 1) {
                this.setState({
                  selectedIndex: 0,
                  selectionMode: true
                });
            } else {
                this.setState({
                  selectedIndex: selectedIndex + 1,
                  selectionMode: true
                });
            }
        }
    },
    render: function() {
        var tagItems = this.state.tags.map(function(item, i) {
            return (
                <span key={i} className="tag">{item}
                   <a className="remove" 
                       onClick={this.handleDelete.bind(this, i)}>x</a>
                </span>
            )
        }.bind(this));

        // get the suggestions for the given query
        var query = this.state.query.trim(),
            selectedIndex = this.state.selectedIndex,
            suggestions = [];

        if (query.length > 1) {
            suggestions = this.state.suggestions.map(function(item, i) {
                return (
                    <li key={i} 
                        className={i == selectedIndex ? "active" : ""}>
                        <span dangerouslySetInnerHTML={this.markIt(item, query)} />
                     </li>
                )
            }.bind(this));
        }

        return ( 
            <div className="tags"><commit_msg>changed min length of query<commit_after>var Keys = {
    ENTER: 13,
    TAB: 9,
    BACKSPACE: 8,
    UP_ARROW: 38,
    DOWN_ARROW: 40
};

var Tags = React.createClass({
    componentDidMount: function() {
        this.refs.input.getDOMNode().focus();
    },
    getInitialState: function() {
        return {
            tags: this.props.tags,
            suggestions: this.props.suggestions,
            query: "",
            selectedIndex: -1,
            selectionMode: false
        }
    },
    handleDelete: function(i, e) {
        var tags = this.state.tags;
        tags.splice(i, 1);
        this.setState({
            tags: tags,
            query: ""
        });
    },
    markIt: function(input, query) {
        var escapedRegex = query.trim().replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&");
        var r = RegExp(escapedRegex, "gi");
        return {
          __html: input.replace(r, "<mark>$&</mark>")
        }
    },
    handleChange: function(e) {
        var query = e.target.value.trim();
        var suggestions = this.props.suggestions.filter(function(item) {
            return (item.toLowerCase()).search(query.toLowerCase()) === 0;
        });

        this.setState({
            query: query,
            suggestions: suggestions,
        });
    },
    handleKeyDown: function(e) {
        var tags = this.state.tags;
        var input = this.refs.input.getDOMNode();
        var query = this.state.query;
        var selectedIndex = this.state.selectedIndex;

        // when enter or tab is pressed add query to tags
        if ((e.keyCode === Keys.ENTER || e.keyCode === Keys.TAB) && query != "") {
            e.preventDefault();
            if (this.state.selectionMode) {
                query = this.state.suggestions[this.state.selectedIndex];               
            }
            tags.push(query);
            input.value = "";
            this.setState({ 
              tags: tags, 
              query: "",
              selectionMode: false,
              selectedIndex: -1
            });
        }

        // when backspace key is pressed and query is blank, delete tag
        if (e.keyCode === 8 && query == "") { //
            this.handleDelete(tags.length - 1);
        }

        // up arrow
        if (e.keyCode === Keys.UP_ARROW) {
            e.preventDefault();
            var selectedIndex = this.state.selectedIndex;
            // last item, cycle to the top
            if (selectedIndex <= 0) {
                this.setState({
                  selectedIndex: this.state.suggestions.length - 1,
                  selectionMode: true
                });
            } else {
                this.setState({
                  selectedIndex: selectedIndex - 1,
                  selectionMode: true
                });
            }
        }

        // down arrow
        if (e.keyCode === Keys.DOWN_ARROW) {
            e.preventDefault();
            var selectedIndex = this.state.selectedIndex;
            // last item, cycle to the top
            if (selectedIndex === this.state.suggestions.length - 1) {
                this.setState({
                  selectedIndex: 0,
                  selectionMode: true
                });
            } else {
                this.setState({
                  selectedIndex: selectedIndex + 1,
                  selectionMode: true
                });
            }
        }
    },
    render: function() {
        var tagItems = this.state.tags.map(function(item, i) {
            return (
                <span key={i} className="tag">{item}
                   <a className="remove" 
                       onClick={this.handleDelete.bind(this, i)}>x</a>
                </span>
            )
        }.bind(this));

        // get the suggestions for the given query
        var query = this.state.query.trim(),
            selectedIndex = this.state.selectedIndex,
            suggestions = [];

        // min-length of search query that is required
        if (query.length > 0) {
            suggestions = this.state.suggestions.map(function(item, i) {
                return (
                    <li key={i} 
                        className={i == selectedIndex ? "active" : ""}>
                        <span dangerouslySetInnerHTML={this.markIt(item, query)} />
                     </li>
                )
            }.bind(this));
        }

        return ( 
            <div className="tags">
{'fraction_non_alphanumeric': 0.1260676460539802, 'fraction_numerical': 0.004783054321831227, 'mean_word_length': 1.3086225026288119, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 25, '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': '5163218', 'n_tokens_mistral': 2408, 'n_tokens_neox': 2285, 'n_words': 500}