<commit_before>var React = require('react');
var Slider = require('./Slider.jsx');

var InstructionUI = React.createClass({
  getInitialState: function() {
    var instruction = this.props.data.instructions[this.props.id];
    var distance = (instruction.hasOwnProperty('distance')) ? instruction.distance : 0;
    var angle = (instruction.hasOwnProperty('angle')) ? instruction.angle : 0;
    var branch = (instruction.hasOwnProperty('branch')) ? instruction.branch : 0;
    return ({
      distance: distance,
      angle: angle,
      branch: branch
    });
  },
  handleChange: function() {
    this.props.update();
    this.props.data.needsRender = true;
  },
  removeProperty: function(propName) {
    var instruction = this.props.data.instructions[this.props.id];
    var keys = Object.keys(instruction);
    this.props.data.instructions[this.props.id] = keys.reduce(function(newInstruction, prop) {
      if (prop !== propName) {
        newInstruction[prop] = instruction[prop];
      }
      return newInstruction;
    }, {});
  },
  toggleProperty: function(event, propName) {
    var instruction = this.props.data.instructions[this.props.id];
    var propChecked = event.currentTarget.checked;
    if (propChecked) {
      instruction[propName] = this.state[propName];
    } else {
      this.removeProperty(propName);
    }
    this.handleChange();
  },
  toggleDistance: function(event) {
    this.toggleProperty(event, 'distance');
  },
  toggleAngle: function(event) {
    this.toggleProperty(event, 'angle');
  },
  toggleBranch: function(event) {
    this.toggleProperty(event, 'branch');
  },
  updateRule: function(event) {
    var instruction = this.props.data.instructions[this.props.id];
    instruction.rule = event.currentTarget.value;
    this.handleChange();
  },
  updateDistance: function(event) {
    var instruction = this.props.data.instructions[this.props.id];
    this.setState({
      distance: instruction.distance
    });
    this.handleChange();
  },
  updateAngle: function(event) {
    var instruction = this.props.data.instructions[this.props.id];
    this.setState({
      angle: instruction.angle
    });
    this.handleChange();
  },
  updateBranchType: function(event) {
    var instruction = this.props.data.instructions[this.props.id];
    instruction.branch = Number(event.currentTarget.id);
    console.log('updateBranchType', instruction.branch);
    this.setState({
      branch: instruction.branch
    });
    this.handleChange();
  },
  render: function() {
    var distanceSlider;
    var angleSlider;
    var branch;
    var instruction = this.props.data.instructions[this.props.id];
    var distanceEnabled = instruction.hasOwnProperty('distance');
    var angleEnabled = instruction.hasOwnProperty('angle');
    var branchEnabled = instruction.hasOwnProperty('branch');
    if (distanceEnabled) {
      distanceSlider = (
        <Slider
          ref="distanceSlider"
          name="distance"
          value={this.state.distance}
          min="-20"
          max="20"
          step="0.1"
          update={this.updateDistance}
          model={instruction}
        />
      );
    }
    if (angleEnabled) {
      angleSlider = (
        <Slider
          ref="angleSlider"
          name="angle"
          value={this.state.angle}
          min="-360"
          max="360"
          step="0.01"
          update={this.updateAngle}
          model={instruction}
        />
      );
    }
    if (branchEnabled) {
      branch = (
        <div>
          <label>push</label>
          <input
            id="0"
            className="branchPush-input"
            type="radio"
            checked={this.state.branch === 0}
            onChange={this.updateBranchType}
          />
          <label>pop</label>
          <input
            id="1"
            className="branchPush-input"
            type="radio"
            checked={this.state.branch === 1}
            onChange={this.updateBranchType}
          />
        </div>
      );
    }
    return (
      <div>
        <div className="check-container">
          <input
            className="rule-input"
            value={instruction.rule}
            onChange={this.updateRule}
          />
          <label className="check-label">distance</label>
          <input
            ref="distanceCheck"
            type="checkbox"
            value="distance"
            checked={distanceEnabled}
            onChange={this.toggleDistance}
          />
          <label className="check-label">angle</label>
          <input
            ref="angleCheck"
            type="checkbox"
            value="angle"
            checked={angleEnabled}
            onChange={this.toggleAngle}
          />
          <label className="check-label">branch</label>
          <input
            ref="branchCheck"
            type="checkbox"
            value="branch"
            checked={branchEnabled}
            onChange={this.toggleBranch}
          />
        </div>
        {distanceSlider}
        {angleSlider}
        {branch}
      </div>
    );
  }
});

module.exports = InstructionUI;<commit_msg>remove confusing linespacing<commit_after>var React = require('react');
var Slider = require('./Slider.jsx');

var InstructionUI = React.createClass({
  getInitialState: function() {
    var instruction = this.props.data.instructions[this.props.id];
    var distance = (instruction.hasOwnProperty('distance')) ? instruction.distance : 0;
    var angle = (instruction.hasOwnProperty('angle')) ? instruction.angle : 0;
    var branch = (instruction.hasOwnProperty('branch')) ? instruction.branch : 0;
    return ({
      distance: distance,
      angle: angle,
      branch: branch
    });
  },
  handleChange: function() {
    this.props.update();
    this.props.data.needsRender = true;
  },
  removeProperty: function(propName) {
    var instruction = this.props.data.instructions[this.props.id];
    var keys = Object.keys(instruction);
    this.props.data.instructions[this.props.id] = keys.reduce(function(newInstruction, prop) {
      if (prop !== propName) {
        newInstruction[prop] = instruction[prop];
      }
      return newInstruction;
    }, {});
  },
  toggleProperty: function(event, propName) {
    var instruction = this.props.data.instructions[this.props.id];
    var propChecked = event.currentTarget.checked;
    if (propChecked) {
      instruction[propName] = this.state[propName];
    } else {
      this.removeProperty(propName);
    }
    this.handleChange();
  },
  toggleDistance: function(event) {
    this.toggleProperty(event, 'distance');
  },
  toggleAngle: function(event) {
    this.toggleProperty(event, 'angle');
  },
  toggleBranch: function(event) {
    this.toggleProperty(event, 'branch');
  },
  updateRule: function(event) {
    var instruction = this.props.data.instructions[this.props.id];
    instruction.rule = event.currentTarget.value;
    this.handleChange();
  },
  updateDistance: function(event) {
    var instruction = this.props.data.instructions[this.props.id];
    this.setState({distance: instruction.distance});
    this.handleChange();
  },
  updateAngle: function(event) {
    var instruction = this.props.data.instructions[this.props.id];
    this.setState({angle: instruction.angle});
    this.handleChange();
  },
  updateBranchType: function(event) {
    var instruction = this.props.data.instructions[this.props.id];
    instruction.branch = Number(event.currentTarget.id);
    console.log('updateBranchType', instruction.branch);
    this.setState({branch: instruction.branch});
    this.handleChange();
  },
  render: function() {
    var distanceSlider;
    var angleSlider;
    var branch;
    var instruction = this.props.data.instructions[this.props.id];
    var distanceEnabled = instruction.hasOwnProperty('distance');
    var angleEnabled = instruction.hasOwnProperty('angle');
    var branchEnabled = instruction.hasOwnProperty('branch');
    if (distanceEnabled) {
      distanceSlider = (
        <Slider
          ref="distanceSlider"
          name="distance"
          value={this.state.distance}
          min="-20"
          max="20"
          step="0.1"
          update={this.updateDistance}
          model={instruction}
        />
      );
    }
    if (angleEnabled) {
      angleSlider = (
        <Slider
          ref="angleSlider"
          name="angle"
          value={this.state.angle}
          min="-360"
          max="360"
          step="0.01"
          update={this.updateAngle}
          model={instruction}
        />
      );
    }
    if (branchEnabled) {
      branch = (
        <div>
          <label>push</label>
          <input
            id="0"
            className="branchPush-input"
            type="radio"
            checked={this.state.branch === 0}
            onChange={this.updateBranchType}
          />
          <label>pop</label>
          <input
            id="1"
            className="branchPush-input"
            type="radio"
            checked={this.state.branch === 1}
            onChange={this.updateBranchType}
          />
        </div>
      );
    }
    return (
      <div>
        <div className="check-container">
          <input
            className="rule-input"
            value={instruction.rule}
            onChange={this.updateRule}
          />
          <label className="check-label">distance</label>
          <input
            ref="distanceCheck"
            type="checkbox"
            value="distance"
            checked={distanceEnabled}
            onChange={this.toggleDistance}
          />
          <label className="check-label">angle</label>
          <input
            ref="angleCheck"
            type="checkbox"
            value="angle"
            checked={angleEnabled}
            onChange={this.toggleAngle}
          />
          <label className="check-label">branch</label>
          <input
            ref="branchCheck"
            type="checkbox"
            value="branch"
            checked={branchEnabled}
            onChange={this.toggleBranch}
          />
        </div>
        {distanceSlider}
        {angleSlider}
        {branch}
      </div>
    );
  }
});

module.exports = InstructionUI;
{'fraction_non_alphanumeric': 0.13170014698677118, 'fraction_numerical': 0.004311611954924056, 'mean_word_length': 2.218543046357616, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 51, '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': '3674019', 'n_tokens_mistral': 2803, 'n_tokens_neox': 2827, 'n_words': 458}