<commit_before>/** @jsx React.DOM */
'use strict';

var React = require('react/addons');

var cx = React.addons.classSet;


var VariablesTree = React.createClass({
  propTypes: {
    expandedSubtotalColor: React.PropTypes.string.isRequired,
    formatNumber: React.PropTypes.func.isRequired,
    highlightedVariableCode: React.PropTypes.string,
    noColorFill: React.PropTypes.string.isRequired,
    onHover: React.PropTypes.func.isRequired,
    onToggle: React.PropTypes.func,
    variables: React.PropTypes.array.isRequired,
  },
  getDefaultProps: function() {
    return {
      expandedSubtotalColor: 'lightGray',
      noColorFill: 'gray',
    };
  },
  render: function() {
    return (
      <div className='table-responsive'>
        <table className='table table-condensed'>
          <tbody>
            {
              this.props.variables.map(function(variable) {
                return this.renderVariable(variable);
              }.bind(this))
            }
          </tbody>
        </table>
      </div>
    );
  },
  renderVariable: function(variable) {
    var isSubtotal = variable.hasChildren && variable.depth > 0;
    var variableName = variable.name;
    if (isSubtotal) {
      variableName = (variable.collapsed ? '▶' : '▼') + ' ' + variableName;
    }
    var displayColor = ! isSubtotal || variable.collapsed;
    return (
      <tr
        className={cx({active: variable.code === this.props.highlightedVariableCode})}
        key={variable.code}
        onMouseOut={this.props.onHover.bind(null, null)}
        onMouseOver={this.props.onHover.bind(null, variable)}>
        <td style={{width: 20}}>
          {
            displayColor && (
              <div style={{
                backgroundColor: variable.color ? 'rgb(' + variable.color.join(',') + ')' : this.props.noColorFill,
                border: '1px solid gray',
                width: 20,
              }}>
                { /* jshint ignore:line */}
              </div>
            )
          }
        </td>
        <td>
          <span
            onClick={isSubtotal && this.props.onToggle.bind(null, variable)}
            style={{
              cursor: isSubtotal ? 'pointer' : 'auto',
              marginLeft: variable.depth > 0 ? (variable.depth - 1) * 20 : 0,
              fontWeight: variable.depth === 0 ? 'bold' : 'normal',
            }}>
            {variableName}
          </span>
          {
            variable.url && (
              <a
                className='btn btn-default btn-xs'
                href={variable.url}
                style={{marginLeft: '1em'}}
                target='_blank'
                title={'Explication sur ' + variable.name}>
                ?
              </a>
            )
          }
        </td>
        <td
          className='text-right'
          style={{
            color: isSubtotal && ! variable.collapsed && this.props.expandedSubtotalColor,
            fontStyle: isSubtotal && 'italic',
            fontWeight: variable.depth === 0 ? 'bold' : 'normal',
          }}>
          {this.props.formatNumber(variable.value) + ' €' /* jshint ignore:line */}
        </td>
      </tr>
    );
  },
});

module.exports = VariablesTree;<commit_msg>Move colors column, display value only if there is one.<commit_after>/** @jsx React.DOM */
'use strict';

var React = require('react/addons');

var cx = React.addons.classSet;


var VariablesTree = React.createClass({
  propTypes: {
    expandedSubtotalColor: React.PropTypes.string.isRequired,
    formatNumber: React.PropTypes.func.isRequired,
    highlightedVariableCode: React.PropTypes.string,
    noColorFill: React.PropTypes.string.isRequired,
    onHover: React.PropTypes.func.isRequired,
    onToggle: React.PropTypes.func,
    variables: React.PropTypes.array.isRequired,
  },
  getDefaultProps: function() {
    return {
      expandedSubtotalColor: 'lightGray',
      noColorFill: 'gray',
    };
  },
  render: function() {
    return (
      <div className='table-responsive'>
        <table className='table table-condensed'>
          <tbody>
            {
              this.props.variables.map(function(variable) {
                return this.renderVariable(variable);
              }.bind(this))
            }
          </tbody>
        </table>
      </div>
    );
  },
  renderVariable: function(variable) {
    var isSubtotal = variable.hasChildren && variable.depth > 0;
    var variableName = variable.name;
    if (isSubtotal) {
      variableName = (variable.collapsed ? '▶' : '▼') + ' ' + variableName;
    }
    var displayColor = ! isSubtotal || variable.collapsed;
    return (
      <tr
        className={cx({active: variable.code === this.props.highlightedVariableCode})}
        key={variable.code}
        onMouseOut={this.props.onHover.bind(null, null)}
        onMouseOver={this.props.onHover.bind(null, variable)}>
        <td>
          <span
            onClick={isSubtotal && this.props.onToggle.bind(null, variable)}
            style={{
              cursor: isSubtotal ? 'pointer' : 'auto',
              marginLeft: variable.depth > 0 ? (variable.depth - 1) * 20 : 0,
              fontWeight: variable.depth === 0 ? 'bold' : 'normal',
            }}>
            {variableName}
          </span>
          {
            variable.url && (
              <a
                className='btn btn-default btn-xs'
                href={variable.url}
                style={{marginLeft: '1em'}}
                target='_blank'
                title={'Explication sur ' + variable.name}>
                ?
              </a>
            )
          }
        </td>
        {
          variable.value && (
            <td
              className='text-right'
              style={{
                color: isSubtotal && ! variable.collapsed && this.props.expandedSubtotalColor,
                fontStyle: isSubtotal && 'italic',
                fontWeight: variable.depth === 0 ? 'bold' : 'normal',
              }}>
              {this.props.formatNumber(variable.value) + ' €' /* jshint ignore:line */}
            </td>
          )
        }
        <td style={{width: 20}}>
          {
            displayColor && (
              <div style={{
                backgroundColor: variable.color ? 'rgb(' + variable.color.join(',') + ')' : this.props.noColorFill,
                border: '1px solid gray',
                width: 20,
              }}>
                { /* jshint ignore:line */}
              </div>
            )
          }
        </td>
      </tr>
    );
  },
});

module.exports = VariablesTree;
{'fraction_non_alphanumeric': 0.13677950594693505, 'fraction_numerical': 0.004269594388533089, 'mean_word_length': 1.7193200663349917, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 47, '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': '259569', 'n_tokens_mistral': 1892, 'n_tokens_neox': 1853, 'n_words': 339}