<commit_before>'use strict';
var React = require('react');
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({

    render: function() {
        return (
            <div>
                <div className="homepage-banner">
                    <div className="home-page-banner-title">
                        ENCYCLOPEDIA of DNA ELEMENTS
                    </div>
                </div>
                <div className="row">
                    <TabPanel tabs={{panel1: 'Human', panel2: 'Mouse', panel3: 'Worm', panel4: 'Fly'}}>
                        <TabPanelPane key="panel1">
                            <div>
                                <div className="col-sm-6">
                                    <div className="title">
                                        Project: Human
                                    </div>
                                    <center> <hr width="80%" position="static"></hr> </center>
                                    <TestLoaderHuman />
                                </div>
                            </div>
                        </TabPanelPane>
                        <TabPanelPane key="panel2">
                            <div>
                                <div className="col-sm-6">
                                    <div className="title">
                                        Project: Mouse
                                    </div>
                                    <center> <hr width="80%" position="static"></hr> </center>
                                    <TestLoaderMouse />
                                </div>
                            </div>
                        </TabPanelPane>
                        <TabPanelPane key="panel3">
                            <div>
                                <div className="col-sm-6">
                                    <div className="title">
                                        Project: Worm
                                    </div>
                                    <center> <hr width="80%" position="static"></hr> </center>
                                    <TestLoaderWorm />
                                </div>
                            </div>
                        </TabPanelPane>
                        <TabPanelPane key="panel4">
                            <div>
                                <div className="col-sm-6">
                                    <div className="title">
                                        Project: Fly
                                    </div>
                                    <center> <hr width="80%" position="static"></hr> </center>
                                    <TestLoaderFly />
                                </div>
                            </div>
                        </TabPanelPane>
                    </TabPanel>
                    

                    <div className="col-sm-6">
                        <div className="title">
                            Biosample Type
                        </div>
                        <center> <hr width="80%"></hr> </center>
                        <HomepageChartLoader2 />
                    </div>
                
                </div>
                
            </div>
        );
    }

});


// Component to display the D3-based chart
var HomepageChart = React.createClass({

    contextTypes: {
        location_href: React.PropTypes.string,
        navigate: React.PropTypes.func
    },

    componentDidMount: function() {
        // Draw the chart of search results given in this.props.data.facets. Since D3 doesn't work
        // with the React virtual DOM, we have to load it separately using the webpack .ensure
        // mechanism. Once the callback is called, it's loaded and can be referenced through
        // require.
        require.ensure(['chart.js'], function(require) {
            var Chart = require('chart.js');
            var colorList = [
                '#871F78',
                '#FFB90F',
                '#003F87',
                '#3D9140',
                '#E5E4E2'
            ];
            var colorList2 = [
                '#bf2e25',
                '#bf2e25',
                '#bf2e25',
                '#bf2e25',
                '#bf2e25'
            ];
            var data = [];
            var labels = [];
            var colors = [];
            var tempColors = ['0000FF'];

            // Get the assay_title counts from the facets
            var facets = this.props.data.facets;
            var assayFacet = facets.find(facet => facet.field === 'award.project');

            // Collect up the experiment assay_title counts to our local arrays to prepare for
            // the charts.
            var totalDocCount = 0;
            assayFacet.terms.forEach(function(term, i) {
                data[i] = term.doc_count;
                totalDocCount += term.doc_count;
                labels[i] = term.key;
                colors[i] = colorList[i % colorList.length];
            });


            // Pass the assay_title counts to the charting library to render it.

            var canvas = document.getElementById("myChart");
            var ctx = canvas.getContext("2d")


            // var width = 400,
            //     height = 400;

            // var text = "Total: " + totalDocCount,
            //     textX = Math.round((width - ctx.measureText(text).width) / 2),
            //     textY = height / 2;

            // ctx.fillText(text, textX, textY);
            // ctx.save();


<commit_msg>matrix, released, project, biosample<commit_after>'use strict';
var React = require('react');
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({

    render: function() {
        return (
            <div>
                <div className="homepage-banner">
                    <div className="home-page-banner-title">
                        ENCYCLOPEDIA of DNA ELEMENTS
                    </div>
                </div>
                <div className="row">
                    <TabPanel tabs={{panel1: 'Human', panel2: 'Mouse', panel3: 'Worm', panel4: 'Fly'}}>
                        <TabPanelPane key="panel1">
                            <div>
                                <div className="col-sm-6">
                                    <div className="title">
                                        Project: Human
                                    </div>
                                    <center> <hr width="80%" position="static"></hr> </center>
                                    <TestLoaderHuman />
                                </div>
                            </div>
                        </TabPanelPane>
                        <TabPanelPane key="panel2">
                            <div>
                                <div className="col-sm-6">
                                    <div className="title">
                                        Project: Mouse
                                    </div>
                                    <center> <hr width="80%" position="static"></hr> </center>
                                    <TestLoaderMouse />
                                </div>
                            </div>
                        </TabPanelPane>
                        <TabPanelPane key="panel3">
                            <div>
                                <div className="col-sm-6">
                                    <div className="title">
                                        Project: Worm
                                    </div>
                                    <center> <hr width="80%" position="static"></hr> </center>
                                    <TestLoaderWorm />
                                </div>
                            </div>
                        </TabPanelPane>
                        <TabPanelPane key="panel4">
                            <div>
                                <div className="col-sm-6">
                                    <div className="title">
                                        Project: Fly
                                    </div>
                                    <center> <hr width="80%" position="static"></hr> </center>
                                    <TestLoaderFly />
                                </div>
                            </div>
                        </TabPanelPane>
                    </TabPanel>
                    

                    <div className="col-sm-6">
                        <div className="title">
                            Biosample Type
                        </div>
                        <center> <hr width="80%"></hr> </center>
                        <HomepageChartLoader2 />
                    </div>
                
                </div>
                
            </div>
        );
    }

});


// Component to display the D3-based chart
var HomepageChart = React.createClass({

    contextTypes: {
        location_href: React.PropTypes.string,
        navigate: React.PropTypes.func
    },

    componentDidMount: function() {
        // Draw the chart of search results given in this.props.data.facets. Since D3 doesn't work
        // with the React virtual DOM, we have to load it separately using the webpack .ensure
        // mechanism. Once the callback is called, it's loaded and can be referenced through
        // require.
        require.ensure(['chart.js'], function(require) {
            var Chart = require('chart.js');
            var colorList = [
                '#871F78',
                '#FFB90F',
                '#003F87',
                '#3D9140',
                '#E5E4E2'
            ];
            var colorList2 = [
                '#bf2e25',
                '#bf2e25',
                '#bf2e25',
                '#bf2e25',
                '#bf2e25'
            ];
            var data = [];
            var labels = [];
            var colors = [];
            var tempColors = ['0000FF'];

            // Get the assay_title counts from the facets
            var facets = this.props.data.facets;
            var assayFacet = facets.find(facet => facet.field === 'award.project');

            // Collect up the experiment assay_title counts to our local arrays to prepare for
            // the charts.
            var totalDocCount = 0;
            assayFacet.terms.forEach(function(term, i) {
                data[i] = term.doc_count;
                totalDocCount += term.doc_count;
                labels[i] = term.key;
                colors[i] = colorList[i % colorList.length];
            });


            // Pass the assay_title counts to the charting library to render it.

            var canvas = document.getElementById("myChart");
            var ctx = canvas.getContext("2d")


            // var width = 400,
            //     height = 400;

            // var text = "Total: " + totalDocCount,
            //     textX = Math.round((width - ctx.measureText(text).width) / 2),
            //     textY = height / 2;

            // ctx.fillText(text, textX, textY);
            // ctx.save();


{'fraction_non_alphanumeric': 0.10660031430068098, 'fraction_numerical': 0.013270473197136371, 'mean_word_length': 0.8999834135014099, 'pattern_counts': {'":': 0, '<': 145, '<?xml version=': 0, '>': 147, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 48, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4424841', 'n_tokens_mistral': 2792, 'n_tokens_neox': 2554, 'n_words': 625}