<commit_before>import React, { Component, PropTypes } from 'react';
import shallowCompare from 'react-addons-shallow-compare';
import VirtualList from './VirtualList';

const TreeViewHeader = ({ fixedColumns, mainColumn }) => (
  <div className='treeViewHeader'>
    {
      fixedColumns.map(col =>
        <span className={`treeViewHeaderColumn treeViewFixedColumn ${col.propName}`}
              key={col.propName}>
          { col.title }
        </span>)
    }
    <span className={`treeViewHeaderColumn treeViewMainColumn ${mainColumn.propName}`}>
      { mainColumn.title }
    </span>
  </div>
);

TreeViewHeader.propTypes = {
  fixedColumns: PropTypes.arrayOf(PropTypes.shape({
    propName: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
  })).isRequired,
  mainColumn: PropTypes.shape({
    propName: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
  }).isRequired,
};

class TreeViewRow extends Component {

  constructor(props) {
    super(props);
    this._onClick = this._onClick.bind(this);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

  _onClick(event) {
    const { nodeId, isExpanded, onToggle, onClick } = this.props;
    if (event.target.classList.contains('treeRowToggleButton')) {
      onToggle(nodeId, !isExpanded, event.altKey === true);
    } else {
      onClick(nodeId, event);
    }
  }

  render() {
    const { node, depth, fixedColumns, mainColumn, index, canBeExpanded, isExpanded, selected } = this.props;
    const evenOddClassName = (index % 2) === 0 ? 'even' : 'odd';
    return (
      <div className={`treeViewRow ${evenOddClassName} ${selected ? 'selected' : ''}`} style={{height: '16px'}} onClick={this._onClick}>
        {
          fixedColumns.map(col =>
            <span className={`treeViewRowColumn treeViewFixedColumn ${col.propName}`}
                  key={col.propName}>
              { node[col.propName] }
            </span>)
        }
        <span className='treeRowIndentSpacer' style={{ width: `${depth * 10}px` }}/>
        <span className={`treeRowToggleButton ${isExpanded ? 'expanded' : 'collapsed'} ${canBeExpanded ? 'canBeExpanded' : 'leaf'}`} />
        <span className={`treeViewRowColumn treeViewMainColumn ${mainColumn.propName}`}>
          { node[mainColumn.propName] }
        </span>
      </div>
    );
  }
}

TreeViewRow.propTypes = {
  node: PropTypes.object.isRequired,
  nodeId: PropTypes.number.isRequired,
  depth: PropTypes.number.isRequired,
  fixedColumns: PropTypes.arrayOf(PropTypes.shape({
    propName: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
  })).isRequired,
  mainColumn: PropTypes.shape({
    propName: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
  }).isRequired,
  index: PropTypes.number.isRequired,
  canBeExpanded: PropTypes.bool.isRequired,
  isExpanded: PropTypes.bool.isRequired,
  onToggle: PropTypes.func.isRequired,
  selected: PropTypes.bool.isRequired,
  onClick: PropTypes.func.isRequired,
};

class TreeView extends Component {

  constructor(props) {
    super(props);
    this._renderRow = this._renderRow.bind(this);
    this._toggle = this._toggle.bind(this);
    this._onKeyDown = this._onKeyDown.bind(this);
    this._onRowClicked = this._onRowClicked.bind(this);
    this._specialItems = [];
    this._visibleRows = [];
  }

  scrollSelectionIntoView() {
    if (this.refs.list) {
      const { selectedNodeId, tree } = this.props;<commit_msg>Make VirtualList use the props it's constructed with.<commit_after>import React, { Component, PropTypes } from 'react';
import shallowCompare from 'react-addons-shallow-compare';
import VirtualList from './VirtualList';

const TreeViewHeader = ({ fixedColumns, mainColumn }) => (
  <div className='treeViewHeader'>
    {
      fixedColumns.map(col =>
        <span className={`treeViewHeaderColumn treeViewFixedColumn ${col.propName}`}
              key={col.propName}>
          { col.title }
        </span>)
    }
    <span className={`treeViewHeaderColumn treeViewMainColumn ${mainColumn.propName}`}>
      { mainColumn.title }
    </span>
  </div>
);

TreeViewHeader.propTypes = {
  fixedColumns: PropTypes.arrayOf(PropTypes.shape({
    propName: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
  })).isRequired,
  mainColumn: PropTypes.shape({
    propName: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
  }).isRequired,
};

class TreeViewRow extends Component {

  constructor(props) {
    super(props);
    this._onClick = this._onClick.bind(this);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

  _onClick(event) {
    const { nodeId, isExpanded, onToggle, onClick } = this.props;
    if (event.target.classList.contains('treeRowToggleButton')) {
      onToggle(nodeId, !isExpanded, event.altKey === true);
    } else {
      onClick(nodeId, event);
    }
  }

  render() {
    const { node, depth, fixedColumns, mainColumn, index, canBeExpanded, isExpanded, selected } = this.props;
    const evenOddClassName = (index % 2) === 0 ? 'even' : 'odd';
    return (
      <div className={`treeViewRow ${evenOddClassName} ${selected ? 'selected' : ''}`} style={{height: '16px'}} onClick={this._onClick}>
        {
          fixedColumns.map(col =>
            <span className={`treeViewRowColumn treeViewFixedColumn ${col.propName}`}
                  key={col.propName}>
              { node[col.propName] }
            </span>)
        }
        <span className='treeRowIndentSpacer' style={{ width: `${depth * 10}px` }}/>
        <span className={`treeRowToggleButton ${isExpanded ? 'expanded' : 'collapsed'} ${canBeExpanded ? 'canBeExpanded' : 'leaf'}`} />
        <span className={`treeViewRowColumn treeViewMainColumn ${mainColumn.propName}`}>
          { node[mainColumn.propName] }
        </span>
      </div>
    );
  }
}

TreeViewRow.propTypes = {
  node: PropTypes.object.isRequired,
  nodeId: PropTypes.number.isRequired,
  depth: PropTypes.number.isRequired,
  fixedColumns: PropTypes.arrayOf(PropTypes.shape({
    propName: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
  })).isRequired,
  mainColumn: PropTypes.shape({
    propName: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
  }).isRequired,
  index: PropTypes.number.isRequired,
  canBeExpanded: PropTypes.bool.isRequired,
  isExpanded: PropTypes.bool.isRequired,
  onToggle: PropTypes.func.isRequired,
  selected: PropTypes.bool.isRequired,
  onClick: PropTypes.func.isRequired,
};

class TreeView extends Component {

  constructor(props) {
    super(props);
    this._renderRow = this._renderRow.bind(this);
    this._toggle = this._toggle.bind(this);
    this._onKeyDown = this._onKeyDown.bind(this);
    this._onRowClicked = this._onRowClicked.bind(this);
    this._specialItems = [props.selectedNodeId];
    this._visibleRows = this._getAllVisibleRows(props);
  }

  scrollSelectionIntoView() {
    if (this.refs.list) {
      const { selectedNodeId, tree } = this.props;
{'fraction_non_alphanumeric': 0.13692480359147025, 'fraction_numerical': 0.0016835016835016834, 'mean_word_length': 3.5786769428387926, 'pattern_counts': {'":': 0, '<': 31, '<?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': '2854255', 'n_tokens_mistral': 2171, 'n_tokens_neox': 2208, 'n_words': 392}