<commit_before>class ComponentArea extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    var classes =  this.props.availableAreas.prosthesis.selected ? 'accordion-head active' : 'accordion-head';
    const componentOptions = [];
    if (this.props.components != undefined){
      this.props.components.map((option) => {
        componentOptions.push(
          <div className="device"  onClick={() => this.props.updateMeasurementsAndTds(option.id)} value={option.id} key={option.name}>
            <div className="device-img" style={{ backgroundImage: 'url(' + option.icon + ")" }}></div>
            <h2>{option.name}</h2>
            <p className="description">{option.description}</p>
            <div className="meta">
              <p><strong>by:</strong> {option.creator} </p>
              <p><strong>uses:</strong> {option.uses} </p>
              <p><strong>type:</strong> {option.component_type} </p>
              <p><strong>weight:</strong> {option.weight} </p>
              <p><strong>printTime:</strong> {option.print_time} </p>
            </div>
          </div>
        );
      });
    }
    var components = <div></div>;
    if (this.props.availableAreas.prosthesis.selected){
      components = this.props.components == undefined ? "" :
        <div className="row">
          <div className="col-xs-12 tab-padding">
            <p className="label">Select a Component</p>
            {componentOptions}
          </div>
        </div>;
    };

    return(
      <div className={classes}>
        <h2>Prosthesis</h2>
        <span className="arrow"></span>
        <span className="line"></span>
        {components}
      </div>
    )
  }
};<commit_msg>added toggleability to prosthesis aka components area<commit_after>class ComponentArea extends React.Component {
  constructor(props) {
    super(props);
  }

  renderComponents() {
    const componentOptions = [];
    if (this.props.components != undefined){
      this.props.components.map((option) => {
        componentOptions.push(
          <div className="device"  onClick={() => this.props.updateMeasurementsAndTds(option.id)} value={option.id} key={option.name}>
            <div className="device-img" style={{ backgroundImage: 'url(' + option.icon + ")" }}></div>
            <h2>{option.name}</h2>
            <p className="description">{option.description}</p>
            <div className="meta">
              <p><strong>by:</strong> {option.creator} </p>
              <p><strong>uses:</strong> {option.uses} </p>
              <p><strong>type:</strong> {option.component_type} </p>
              <p><strong>weight:</strong> {option.weight} </p>
              <p><strong>printTime:</strong> {option.print_time} </p>
            </div>
          </div>
        );
      });
    }

    return (
      <div className="row">
        <div className="col-xs-12 tab-padding">
          <p className="label">Select a Component</p>
          {componentOptions}
        </div>
      </div>
    );
  }

  render() {
    var classes =  this.props.availableAreas.prosthesis.selected ? 'accordion-head active' : 'accordion-head';

    return(
      <div>
        <div onClick={()=>this.props.updateSelectedArea('prosthesis')} className={classes}>
          <h2>Prosthesis</h2>
          <span className="arrow"></span>
          <span className="line"></span>
        </div>
        {this.props.availableAreas.prosthesis.selected ? this.renderComponents() : ''}
      </div>
    )
  }
};
{'fraction_non_alphanumeric': 0.17271947383471548, 'fraction_numerical': 0.0034315127251930227, 'mean_word_length': 2.3764478764478763, 'pattern_counts': {'":': 0, '<': 95, '<?xml version=': 0, '>': 100, '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': '1468664', 'n_tokens_mistral': 1031, 'n_tokens_neox': 1023, 'n_words': 174}