<commit_before>var Icon = React.createClass({
    getInitialState: function() {
        return {active: false};
    },
    className: function() {
        var classes = ["icon", this.props.type];
        if (this.state.active) {
            classes.push("active");
        }
        return classes.join(" ");
    },
    toggle: function(e) {
        e.preventDefault();
        this.setState({active: !this.state.active});
    },
    render: function() {
        return <span className={this.className()} onClick={this.toggle}></span>;
    }
});


var Rating = React.createClass({
    getIcons: function(colours) {
        return colours.map(function(colour) { 
            return <Icon type={colour} />;
        });
    },
    /*
        I currently don't have any logic to implement the fact that only
        one icone can be active at a time. this is potentially better 
        managed at the model/collection level
    */
    render: function() {
        return <div className="rating">
            <span className="type">{this.props.type}: </span>{this.getIcons(["red", "green", "blue"])}
        </div>;
    }
});

var Ratings = React.createClass({
    getRatings: function(types) {
        return types.map(function(type) { 
            return <Rating type={type} />;
        });
    },
    render: function() {<commit_msg>Keep active icon on the Rating component instead of individual icons. Implement the logic required to only have one acive icon at a time.<commit_after>var Icon = React.createClass({
    getInitialState: function() {
        return {active: false};
    },
    className: function() {
        var classes = ["icon", this.props.type];
        if (this.state.active) {
            classes.push("active");
        }
        return classes.join(" ");
    },
    toggle: function(e) {
        e.preventDefault();
        
        var active = !this.state.active;
        this.setState({active: active});
        if (active) {
            this.props.activeCallBack();
        }
    },
    clear: function() {
        this.setState({active: false});
    },
    render: function() {
        return <span className={this.className()} onClick={this.toggle}></span>;
    }
});


var Rating = React.createClass({
    getInitialState: function(){
        return {activeRating: "none"};
    },
    iconActivated: function(colour) {
        for(refKey in this.refs) {
            if (refKey !== colour) {
                this.refs[refKey].clear();
            }
        }
    },
    getIcons: function(colours) {
        return colours.map(function(colour, i) { 
            return <Icon type={colour} ref={colour} activeCallBack={this.iconActivated.bind(this, colour)} key={i} />;
        }, this);
    },
    render: function() {
        return <div className="rating">
            <span className="type">{this.props.type}: </span>{this.getIcons(["red", "green", "blue"])}
        </div>;
    }
});

var Ratings = React.createClass({
    getRatings: function(types) {
        return types.map(function(type, i) { 
            return <Rating type={type} key={i} />;
        });
    },
    render: function() {
{'fraction_non_alphanumeric': 0.15232, 'fraction_numerical': 0.0, 'mean_word_length': 2.2160493827160495, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, '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': '3774964', 'n_tokens_mistral': 901, 'n_tokens_neox': 884, 'n_words': 210}