<commit_before>import React from 'react';

import PusherStore from '../../stores/PusherStore';

import { formatNumber } from '../../lib/number';

class BuildCountsBreakdown extends React.Component {
  static propTypes = {
    viewer: React.PropTypes.shape({
      builds: React.PropTypes.shape({
        count: React.PropTypes.number.isRequired
      }),
      scheduledBuilds: React.PropTypes.shape({
        count: React.PropTypes.number.isRequired
      }),
      runningBuilds: React.PropTypes.shape({
        count: React.PropTypes.number.isRequired
      })
    })
  };

  state = {
    buildsCount: this.props.viewer.builds.count,
    scheduledBuildsCount: this.props.viewer.scheduledBuilds.count,
    runningBuildsCount: this.props.viewer.runningBuilds.count
  };

  componentDidMount() {
    PusherStore.on("user_stats:change", this._onStoreChange.bind(this));
  }

  componentWillUnmount() {
    PusherStore.off("user_stats:change", this._onStoreChange.bind(this));
  }

  render() {
    return (
      <div className="flex">
        <div className="rounded-left border-left border-top border-bottom border-gray flex items-center" style={{ lineHeight: "1.8" }}>
          <a href="/builds" className="py1 px3 dark-gray hover-black">{formatNumber(this.state.buildsCount)} Builds</a>
        </div>
        <div className="border-left border-top border-bottom border-gray flex items-center">
          <a href="/builds?state=running" className="py1 px3 dark-gray hover-black">{formatNumber(this.state.runningBuildsCount)} Running</a>
        </div>
        <div className="rounded-right border border-gray flex items-center">
          <a href="/builds?state=scheduled" className="py1 px3 dark-gray hover-black">{formatNumber(this.state.scheduledBuildsCount)} Scheduled</a>
        </div>
      </div>
    );<commit_msg>If a state has builds, show it in a darker color<commit_after>import React from 'react';
import classNames from 'classnames';

import PusherStore from '../../stores/PusherStore';

import { formatNumber } from '../../lib/number';

class BuildCountsBreakdown extends React.Component {
  static propTypes = {
    viewer: React.PropTypes.shape({
      builds: React.PropTypes.shape({
        count: React.PropTypes.number.isRequired
      }),
      scheduledBuilds: React.PropTypes.shape({
        count: React.PropTypes.number.isRequired
      }),
      runningBuilds: React.PropTypes.shape({
        count: React.PropTypes.number.isRequired
      })
    })
  };

  state = {
    buildsCount: this.props.viewer.builds.count,
    scheduledBuildsCount: this.props.viewer.scheduledBuilds.count,
    runningBuildsCount: this.props.viewer.runningBuilds.count
  };

  componentDidMount() {
    PusherStore.on("user_stats:change", this._onStoreChange.bind(this));
  }

  componentWillUnmount() {
    PusherStore.off("user_stats:change", this._onStoreChange.bind(this));
  }

  renderLink(label, state, count) {
    let url = state ? `/builds?state=${state}` : "/builds";
    let classes = classNames("py1 px3 hover-black hover-bg-silver text-decoration-none", {
      "dark-gray": (count == 0),
      "black": (count > 0),
    });

    return (
      <a href={url} className={classes} style={{ lineHeight: "1.8" }}>{formatNumber(count)} {label}</a>
    )
  }

  render() {
    return (
      <div className="flex">
        <div className="rounded-left border-left border-top border-bottom border-gray flex items-center">
          {this.renderLink("Builds", null, this.state.buildsCount)}
        </div>
        <div className="border-left border-top border-bottom border-gray flex items-center">
          {this.renderLink("Running", "running", this.state.runningBuildsCount)}
        </div>
        <div className="rounded-right border border-gray flex items-center">
          {this.renderLink("Scheduled", "scheduled", this.state.scheduledBuildsCount)}
        </div>
      </div>
    );
{'fraction_non_alphanumeric': 0.1419800460475825, 'fraction_numerical': 0.003581478639038117, 'mean_word_length': 3.2639040348964015, 'pattern_counts': {'":': 2, '<': 27, '<?xml version=': 0, '>': 28, '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': '5440097', 'n_tokens_mistral': 1190, 'n_tokens_neox': 1197, 'n_words': 225}