<commit_before>import React from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import Elements from '../../../api/elements/elements.js';
import ElementName from '../element-name.jsx';
import ElementTypeNameLabel from '../element-type-name-label.jsx';
import Children from './children.jsx';
import TreeToggler from './toggle-button.jsx';
import Buttons from './buttons.jsx';

class Element extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      childrenVisible: true,
      buttonsVisible: false,
    };
    this.removeElement = this.removeElement.bind(this);
  }

  removeElement() {
    Elements.remove(this.props.element._id, this.props.element.parentId);
  }

  render() {
    const makeButtonsVisible = () => {
      this.setState({ buttonsVisible: true });
    };

    const makeButtonsNotVisible = () => {
      this.setState({ buttonsVisible: false });
    };

    const elementItselfStyle = () => {
      const style = {
        border: '1px solid #ddd',
        padding: '10px',
        borderRadius: '4px',
      };
      if (this.props.element._id === this.props.selectedElementId) {
        style.backgroundColor = '#337ab7';
        style.color = 'white';
        style.border = '1px solid transparent';
      }
      return style;
    };


    return (
      <div className="element" style={{ paddingTop: '5px' }}>
        <div
          onClick={() => this.props.setSelectedElementId(this.props.element._id)}
          onMouseEnter={makeButtonsVisible}
          onMouseLeave={makeButtonsNotVisible}
          style={elementItselfStyle()}
        >
          <TreeToggler
            toggleChildrenVisible={() =>
              this.setState({ childrenVisible: !this.state.childrenVisible })}
            childIds={this.props.element.childIds}
            childrenVisible={this.state.childrenVisible}
          />
          <div style={{ display: 'inline', paddingRight: '10px' }}>
            <ElementTypeNameLabel typeName={this.props.element.typeName} />
          </div>
          <ElementName elementName={this.props.element.name} elementId={this.props.element._id} />
          <Buttons
            buttonsVisible={this.state.buttonsVisible}
            element={this.props.element}
          />
        </div>
        <Children
          element={this.props.element}
          setSelectedElementId={this.props.setSelectedElementId}
          selectedElementId={this.props.selectedElementId}
          childrenVisible={this.state.childrenVisible}
        />
      </div>
    );
  }
}

Element.propTypes = {
  element: React.PropTypes.object.isRequired,
  subElements: React.PropTypes.array,
  setSelectedElementId: React.PropTypes.func.isRequired,
  selectedElementId: React.PropTypes.string,
};

export default createContainer(() => {
  return {
    elements: Elements.collection.find().fetch(),
  };
}, Element);
<commit_msg>Move buttons toggling right into component<commit_after>import React from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import Elements from '../../../api/elements/elements.js';
import ElementName from '../element-name.jsx';
import ElementTypeNameLabel from '../element-type-name-label.jsx';
import Children from './children.jsx';
import TreeToggler from './toggle-button.jsx';
import Buttons from './buttons.jsx';

class Element extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      childrenVisible: true,
      buttonsVisible: false,
    };
  }

  render() {
    const elementItselfStyle = () => {
      const style = {
        border: '1px solid #ddd',
        padding: '10px',
        borderRadius: '4px',
      };
      if (this.props.element._id === this.props.selectedElementId) {
        style.backgroundColor = '#337ab7';
        style.color = 'white';
        style.border = '1px solid transparent';
      }
      return style;
    };

    return (
      <div className="element" style={{ paddingTop: '5px' }}>
        <div
          onClick={() => this.props.setSelectedElementId(this.props.element._id)}
          onMouseEnter={() => this.setState({ buttonsVisible: true })}
          onMouseLeave={() => this.setState({ buttonsVisible: false })}
          style={elementItselfStyle()}
        >
          <TreeToggler
            toggleChildrenVisible={() =>
              this.setState({ childrenVisible: !this.state.childrenVisible })}
            childIds={this.props.element.childIds}
            childrenVisible={this.state.childrenVisible}
          />
          <div style={{ display: 'inline', paddingRight: '10px' }}>
            <ElementTypeNameLabel typeName={this.props.element.typeName} />
          </div>
          <ElementName elementName={this.props.element.name} elementId={this.props.element._id} />
          <Buttons
            buttonsVisible={this.state.buttonsVisible}
            element={this.props.element}
          />
        </div>

        <Children
          element={this.props.element}
          setSelectedElementId={this.props.setSelectedElementId}
          selectedElementId={this.props.selectedElementId}
          childrenVisible={this.state.childrenVisible}
        />
      </div>
    );
  }
}

Element.propTypes = {
  element: React.PropTypes.object.isRequired,
  subElements: React.PropTypes.array,
  setSelectedElementId: React.PropTypes.func.isRequired,
  selectedElementId: React.PropTypes.string,
};

export default createContainer(() => {
  return {
    elements: Elements.collection.find().fetch(),
  };
}, Element);
{'fraction_non_alphanumeric': 0.13701099693528032, 'fraction_numerical': 0.004326663061114116, 'mean_word_length': 2.6404199475065617, 'pattern_counts': {'":': 0, '<': 25, '<?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': '3827591', 'n_tokens_mistral': 1548, 'n_tokens_neox': 1550, 'n_words': 278}