<commit_before>      var Processes = React.createClass({
        loadFromServer: function() {
            $.ajax({
              url: this.props.url,
              dataType: 'json',
              cache: false,
              success: function(data) {
                this.setState({data: data});
              }.bind(this),
              error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
              }.bind(this)
            });
          },
        getInitialState: function() {
            return {data: []};
        },
        componentDidMount: function() {
            this.loadFromServer();
            setInterval(this.loadFromServer, this.props.pollInterval);
        },
        render: function() {

         return (<div><h3>Processes</h3>
         {this.state.data.map(function(process ,i){
            return <div key={i}>{process.pid}, {process.name}, {process.cpu_percentage}</div>;
          })}

        </div>
         );

        }
      });


    ReactDOM.render(
      <Processes url={document.getElementById('processes').getAttribute('url')} pollInterval={5000} />,
      document.getElementById('processes')
    );<commit_msg>layout for process table also limited to the top 5<commit_after>      var Processes = React.createClass({
        loadFromServer: function() {
            $.ajax({
              url: this.props.url,
              dataType: 'json',
              cache: false,
              success: function(data) {
                this.setState({data: data});
              }.bind(this),
              error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
              }.bind(this)
            });
          },
        getInitialState: function() {
            return {data: []};
        },
        componentDidMount: function() {
            this.loadFromServer();
            setInterval(this.loadFromServer, this.props.pollInterval);
        },
        render: function() {

         return (<div><h3>Processes</h3>
         <table className="table table-striped">
         <thead>
         <tr>
         <th>PID</th><th>Name</th><th>CPU %</th></tr></thead>
         <tbody>
         {this.state.data.slice(0,5).map(function(process ,i){
            return <tr key={i}><td>{process.pid}</td><td>{process.name}</td><td>{process.cpu_percentage}</td></tr>;
          })}
          </tbody>
        </table>
        </div>
         );

        }
      });


    ReactDOM.render(
      <Processes url={document.getElementById('processes').getAttribute('url')} pollInterval={5000} />,
      document.getElementById('processes')
    );
{'fraction_non_alphanumeric': 0.15439252336448597, 'fraction_numerical': 0.005607476635514018, 'mean_word_length': 1.7139959432048681, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 37, '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': '232143', 'n_tokens_mistral': 750, 'n_tokens_neox': 724, 'n_words': 121}