<commit_before>Observable = React.createClass

  handleAddOperator: (type) ->
    currentOperators = @props.observable.operators
    last = R.last(currentOperators)
    newOperators = currentOperators.concat([type: type, id: "#{last.id}o"])
    @props.onChange(root: @props.observable.root, operators: newOperators)

  render: ->
    {root, operators} = @props.observable

    rootNode = <ObservableRoot type={root.type} id={root.id} />

    operatorNodes = operators.map ({type, id}) ->
      <ObservableOperator type={type} id={id}/>

    <div className="observable">
     {rootNode}
     {operatorNodes}
     <AddOperator rootId={root.id} onSelect={@handleAddOperator}/>
    </div>

AddOperator = React.createClass
  handleChange: ->
    select = @refs.selectOperatorInput.getDOMNode()
    val = select.options[select.selectedIndex].value
    @props.onSelect(val) if val?

  render: ->
    options = R.keys(opClasses).map (op) ->
      <option value={op}>{op}</option>
    <span>
      {'Add Operator'}
      <select id={@props.rootId}{'addOperator'} className='addOperators' onChange={@handleChange} ref="selectOperatorInput">
        <option value="">{'Select'}</option>
        {options}
      </select>
    </span>

ObservableRoot = React.createClass
  render: ->
    simulationArea = <SimulationArea />
    rootEl = React.createElement(rootClasses[@props.type], id: @props.id, simulationArea)
    <div className="observableRoot">
      {rootEl}
    </div>

ObservableOperator = React.createClass
  render: ->
    simulationArea = <SimulationArea />
    opEl = React.createElement(opClasses[@props.type], id: @props.id, simulationArea)

    <div className="observableOperator">
      {opEl}
    </div>

FunctionArea = React.createClass
  render: ->
    <span className="functionArea">
      {'function(value) {'}
      <textarea type="text" style={height: 30, width: 300} defaultValue={@props.defaultValue}/>
      {'}'}
    </span>

VarargsArea = React.createClass
  render: ->
    <span className="varargsArea">
      <textarea type="text" style={height: 30, width: 300} defaultValue={@props.defaultValue}>
      </textarea>
    </span>

SimulationArea = React.createClass
  render: ->
    <span className="simulationArea" style={float: 'right'} >
      <SimulationValueArea />
      <SimulationErrorArea /><commit_msg>Add removing operator<commit_after>Observable = React.createClass

  handleAddOperator: (type) ->
    {root, operators} = @props.observable
    last = R.last(operators)
    newOperators = operators.concat([type: type, id: "#{last.id}o"])
    @props.onChange(root: root, operators: newOperators)

  removeOperator: (operator) ->
    {root, operators} = @props.observable
    newOperators = R.clone(operators)
    newOperators.splice(operators.indexOf(operator), 1)
    @props.onChange(root: root, operators: newOperators)

  render: ->
    {root, operators} = @props.observable

    operatorNodes = operators.map (operator) =>
      <ObservableOperator operator={operator} onRemove={@removeOperator} />

    <div className="observable">
     <ObservableRoot type={root.type} id={root.id} />
     {operatorNodes}
     <AddOperator rootId={root.id} onSelect={@handleAddOperator}/>
    </div>

AddOperator = React.createClass
  handleChange: ->
    select = @refs.selectOperatorInput.getDOMNode()
    val = select.options[select.selectedIndex].value
    @props.onSelect(val) if val?

  render: ->
    options = R.keys(opClasses).map (op) ->
      <option value={op}>{op}</option>
    <span>
      {'Add Operator'}
      <select id={@props.rootId}{'addOperator'} className='addOperators' onChange={@handleChange} ref="selectOperatorInput">
        <option value="">{'Select'}</option>
        {options}
      </select>
    </span>

ObservableRoot = React.createClass
  render: ->
    simulationArea = <SimulationArea />
    rootEl = React.createElement(rootClasses[@props.type], id: @props.id, simulationArea)
    <div className="observableRoot">
      {rootEl}
    </div>

ObservableOperator = React.createClass
  handleRemove: ->
    @props.onRemove(@props.operator)

  render: ->
    {id, type} = @props.operator
    opEl = React.createElement(opClasses[type], id: id)

    <div className={type} id={id} style={width: '50%'}>
      {".#{type}("} {opEl} {')'}
      <RemoveOperator onRemove={@handleRemove}/>
      <SimulationArea />
    </div>

RemoveOperator = React.createClass
  handleClick: ->
    @props.onRemove()
  render: ->
    <button className='remove' onClick={@handleClick}>-</button>

FunctionArea = React.createClass
  render: ->
    <span className="functionArea">
      {'function(value) {'}
      <textarea type="text" style={height: 30, width: 300} defaultValue={@props.defaultValue}/>
      {'}'}
    </span>

VarargsArea = React.createClass
  render: ->
    <span className="varargsArea">
      <textarea type="text" style={height: 30, width: 300} defaultValue={@props.defaultValue}>
      </textarea>
    </span>

SimulationArea = React.createClass
  render: ->
    <span className="simulationArea" style={float: 'right'} >
      <SimulationValueArea />
      <SimulationErrorArea />
{'fraction_non_alphanumeric': 0.1559150263106607, 'fraction_numerical': 0.004482557006431495, 'mean_word_length': 3.7125803489439853, 'pattern_counts': {'":': 0, '<': 64, '<?xml version=': 0, '>': 90, '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': '2485766', 'n_tokens_mistral': 1614, 'n_tokens_neox': 1568, 'n_words': 298}