<commit_before>'use strict';
var React = require('react');
var _ = require('underscore');
var globals = require('./globals');
var {FetchedData, Param} = require('./fetched');
var cloneWithProps = require('react/lib/cloneWithProps');




// Main page component to render the home page
var Home = module.exports.Home = React.createClass({

    getInitialState: function(){
        return {
            current: "?type=Experiment&status=released",
            newtabs: []
        };
    },

    //  componentDidMount: function(){
   

    // TwitterWidget({
    //     widget: {
    //         id: "your-widget-id",
    //         title: "Your Twitts",
    //         path: "widget/path"
    //     }
    // });



    //     window.twttr = (function(d, s, id) {
    //         var js, fjs = d.getElementsByTagName(s)[0],
    //         t = window.twttr || {};
    //         if (d.getElementById(id)) return t;
    //         js = d.createElement(s);
    //         js.id = id;
    //         js.src = "https://platform.twitter.com/widgets.js";
    //         fjs.parentNode.insertBefore(js, fjs);
 
    //         t._e = [];
    //         t.ready = function(f) {
    //             t._e.push(f);
    //         };
 
    //         return t;x
    //     }(document, "div", "twitter-timeline"));
    // },

     handleTabClick: function(tab){ // pass in string with organism query
        console.log("AT HANDLETABCLICK HERE IS TAB PASSED IN: " + tab);
        var tempArray = _.clone(this.state.newtabs); // creates a copy of this.state.newtabs
        var finalLink = _.clone(this.state.current); // clone current
        console.log("this should be -1: " + tempArray.indexOf(tab));
        if (tempArray.indexOf(tab) == -1) { // if tab isn't already in array, then add it
            tempArray.push(tab);
            console.log("this is tab: " + tab);
            console.log("TEMP ARRAY SHOULD BE PUSHED HERE: " + tempArray);
        }
        else{
            console.log("SHOULD BE HERE ");
            var indexToRemoveArray = tempArray.indexOf(tab); // if it is in array, remove it from array and from link
            tempArray.splice(indexToRemoveArray, 1);
            var indexToRemoveLink = finalLink.indexOf(tab);
            finalLink = finalLink.substr(0, indexToRemoveLink) + finalLink.substr(indexToRemoveLink + tab.length)
        }
        console.log("TEMP ARRAY SHOULD HAVE HUMAN: " + tempArray);
        
        

        var organismString = ""; // create empty string with all organisms selected
        for(var x = 0; x < tempArray.length; x++){ // add all organisms selected to string
            if(finalLink.indexOf(tempArray[x]) == -1){
                organismString = organismString + tempArray[x];
            }
        }

        
        finalLink = finalLink + organismString; // add organism queries to link

        this.setState({ 
            newtabs: tempArray // update newtabs
        });

        this.callback(finalLink); // updated current, updating charts
        
    },

    callback: function(newUrl){
        this.setState({
            current: newUrl

        });
        console.log("this.state.current: " + this.state.current);
    },

    render: function() {
        return (
            <div>
                <div className="homepage-banner">
                    <div className="home-page-banner-title">
                        ENCYCLOPEDIA of DNA ELEMENTS
                    </div>
                </div>

                <div className="row">
                    <div className="col-md-9">
                        <AssayClicking current={this.state.current} callback={this.callback}/>
                        <TabClicking handleTabClick={this.handleTabClick} newtabs={this.state.newtabs}/>
                        <div className="col-sm-6">
                        <div className="title">
                            Project
                        </div>
                        <center> <hr width="80%" position="static"></hr> </center>
                        <HomepageChartLoader searchBase={this.state.current} 
                                            callback={this.callback}/>
                        
                    </div>
                    <div className="col-sm-6">
                        <div className="title">
                            Biosample Type
                        </div>
                        <center> <hr width="80%"></hr> </center>
                        <HomepageChartLoader2 searchBase={this.state.current}
                                         callback={this.callback}/>
                    </div>
                    </div>
                    <TwitterWidget/>
                    
                    
                </div>
                
                
                
                
                
            </div>
        );
    }

});

var TwitterWidget = React.createClass({
        componentDidMount: function() {
                var js, link;
                link = this.refs.link.getDOMNode();
                if (!this.initialized) {
                    this.initialized = true;
                    js = document.createElement("script");
                    js.id = "twitter-wjs";
                    js.src = "//platform.twitter.com/widgets.js";
                    return link.parentNode.appendChild(js);
                }
            },
        render: function() {
            var content, ref2, title, widget;
            //ref2 = this.props, title = ref2.title, content = ref2.content, widget = ref2.widget;
            return (
                <a
                ref= "link"
                className= "twitter-timeline"
                href= "https://twitter.com/encodedcc"
                widget-id= "encodedcc" 
                data-tweet-limit = "6"
                data-width = "450"
                //data-height = "600"
                ></a>
            );
        }
});


// Component to display the D3-based chart
var AssayClicking = React.createClass({
    propTypes: {
        current: React.PropTypes.string,
        callback: React.PropTypes.func
    },

    getInitialState: function(){
        return {
            updatedLink: this.props.current
        };
    },

    sortByAssay: function(category) {
        // var temp = category;<commit_msg>after mini demo<commit_after>'use strict';
var React = require('react');
var _ = require('underscore');
var globals = require('./globals');
var {FetchedData, Param} = require('./fetched');
var cloneWithProps = require('react/lib/cloneWithProps');




// Main page component to render the home page
var Home = module.exports.Home = React.createClass({

    getInitialState: function(){
        return {
            current: "?type=Experiment&status=released",
            newtabs: []
        };
    },

    //  componentDidMount: function(){
   

    // TwitterWidget({
    //     widget: {
    //         id: "your-widget-id",
    //         title: "Your Twitts",
    //         path: "widget/path"
    //     }
    // });



    //     window.twttr = (function(d, s, id) {
    //         var js, fjs = d.getElementsByTagName(s)[0],
    //         t = window.twttr || {};
    //         if (d.getElementById(id)) return t;
    //         js = d.createElement(s);
    //         js.id = id;
    //         js.src = "https://platform.twitter.com/widgets.js";
    //         fjs.parentNode.insertBefore(js, fjs);
 
    //         t._e = [];
    //         t.ready = function(f) {
    //             t._e.push(f);
    //         };
 
    //         return t;x
    //     }(document, "div", "twitter-timeline"));
    // },

     handleTabClick: function(tab){ // pass in string with organism query
        console.log("AT HANDLETABCLICK HERE IS TAB PASSED IN: " + tab);
        var tempArray = _.clone(this.state.newtabs); // creates a copy of this.state.newtabs
        var finalLink = _.clone(this.state.current); // clone current
        console.log("this should be -1: " + tempArray.indexOf(tab));
        if (tempArray.indexOf(tab) == -1) { // if tab isn't already in array, then add it
            tempArray.push(tab);
            console.log("this is tab: " + tab);
            console.log("TEMP ARRAY SHOULD BE PUSHED HERE: " + tempArray);
        }
        else{
            console.log("SHOULD BE HERE ");
            var indexToRemoveArray = tempArray.indexOf(tab); // if it is in array, remove it from array and from link
            tempArray.splice(indexToRemoveArray, 1);
            var indexToRemoveLink = finalLink.indexOf(tab);
            finalLink = finalLink.substr(0, indexToRemoveLink) + finalLink.substr(indexToRemoveLink + tab.length)
        }
        console.log("TEMP ARRAY SHOULD HAVE HUMAN: " + tempArray);
        
        

        var organismString = ""; // create empty string with all organisms selected
        for(var x = 0; x < tempArray.length; x++){ // add all organisms selected to string
            if(finalLink.indexOf(tempArray[x]) == -1){
                organismString = organismString + tempArray[x];
            }
        }

        
        finalLink = finalLink + organismString; // add organism queries to link

        this.setState({ 
            newtabs: tempArray // update newtabs
        });

        this.callback(finalLink); // updated current, updating charts
        
    },

    callback: function(newUrl){
        this.setState({
            current: newUrl

        });
        console.log("this.state.current: " + this.state.current);
    },

    render: function() {
        return (
            <div>
                <div className="homepage-banner">
                    <div className="home-page-banner-title">
                        ENCYCLOPEDIA of DNA ELEMENTS
                    </div>
                </div>

                <div className="row">
                    <div className="col-md-9">
                        <AssayClicking current={this.state.current} callback={this.callback}/>
                        <TabClicking handleTabClick={this.handleTabClick} newtabs={this.state.newtabs}/>
                        <div className="col-sm-6">
                        <div className="title">
                            Project
                        </div>
                        <center> <hr width="80%" position="static"></hr> </center>
                        <HomepageChartLoader searchBase={this.state.current} 
                                            callback={this.callback}/>
                        
                    </div>
                    <div className="col-sm-6">
                        <div className="title">
                            Biosample Type
                        </div>
                        <center> <hr width="80%"></hr> </center>
                        <HomepageChartLoader2 searchBase={this.state.current}
                                         callback={this.callback}/>
                    </div>
                    </div>
                    <TwitterWidget/>
                    
                    
                </div>
                
                
                
                
                
            </div>
        );
    }

});

var TwitterWidget = React.createClass({
        componentDidMount: function() {
                var js, link;
                link = this.refs.link.getDOMNode();
                if (!this.initialized) {
                    this.initialized = true;
                    js = document.createElement("script");
                    js.id = "twitter-wjs";
                    js.src = "//platform.twitter.com/widgets.js";
                    return link.parentNode.appendChild(js);
                }
            },
        render: function() {
            var content, ref2, title, widget;
            //ref2 = this.props, title = ref2.title, content = ref2.content, widget = ref2.widget;
            return (
                <a
                ref= "link"
                className= "twitter-timeline"
                href= "https://twitter.com/encodedcc"
                widget-id= "encodedcc" 
                data-tweet-limit = "6"
                data-width = "300"
                //data-height = "600"
                ></a>
            );
        }
});


// Component to display the D3-based chart
var AssayClicking = React.createClass({
    propTypes: {
        current: React.PropTypes.string,
        callback: React.PropTypes.func
    },

    getInitialState: function(){
        return {
            updatedLink: this.props.current
        };
    },

    sortByAssay: function(category) {
        // var temp = category;
{'fraction_non_alphanumeric': 0.12325507614213198, 'fraction_numerical': 0.004441624365482234, 'mean_word_length': 1.3165533713025905, 'pattern_counts': {'":': 0, '<': 71, '<?xml version=': 0, '>': 69, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4894988', 'n_tokens_mistral': 3429, 'n_tokens_neox': 3225, 'n_words': 715}