<commit_before>###* @jsx React.DOM ###

window.CwbSimpleInput = React.createClass
  propTypes:
    hasPhoneticForm: React.PropTypes.bool.isRequired
    searchQuery: React.PropTypes.object.isRequired
    handleQueryChanged: React.PropTypes.func.isRequired
    handleSearch: React.PropTypes.func.isRequired

  componentDidMount: ->
    @refs.searchfield.getDOMNode().focus()

  displayedQuery: ->
    # Convert the CQP expression into a pure text search phrase
    @props.searchQuery.query.replace(/\[\(?\w+="(.+?)"(?:\s+%c)?\)?\]/g, '$1')
      .replace(/"([^\s=]+)"/g, '$1')

  isPhonetic: ->
    @props.searchQuery.query.indexOf('phon=') isnt -1


  handleTextChanged: (e) ->
    # Convert the search phrase to CQP
    if e.target.value is ''
      query = ''
    else
      attr = if @isPhonetic() then 'phon' else 'word'
      terms = for term in e.target.value.split(/\s/)
        if term is '' then '' else "[#{attr}=\"#{term}\" %c]"
      query = terms.join(' ')

    @props.handleQueryChanged
      lang: @props.searchQuery.lang
      query: query


  handlePhoneticChanged: (e) ->
    query = if e.target.checked
              @props.searchQuery.query.replace(/word=/g, 'phon=')
            else
              @props.searchQuery.query.replace(/phon=/g, 'word=')
    @props.handleQueryChanged
      lang: @props.searchQuery.lang
      query: query

  handleKeyDown: (e) ->
    if e.key is 'Enter'
      e.preventDefault()
      @props.handleSearch()

  render: ->
    `<div className="row-fluid">
      <form className="form-inline span12">
        <div className="span10">
          <input ref="searchfield" type="text" className="span12" value={this.displayedQuery()}
            onChange={this.handleTextChanged} onKeyDown={this.handleKeyDown} />
          {this.props.hasPhoneticForm && <label style={{marginTop: 5}}><input name="phonetic" type="checkbox" style={{marginTop: -3}} checked={this.isPhonetic()} onChange={this.handlePhoneticChanged}/>&nbsp;Phonetic form</label>}
        </div>
      </form>
    </div>`<commit_msg>Temporarily surround every Chinese character by spaces to make sure that they are always split one by one (no word segmentation in the corpus for now)<commit_after>###* @jsx React.DOM ###

window.CwbSimpleInput = React.createClass
  propTypes:
    hasPhoneticForm: React.PropTypes.bool.isRequired
    searchQuery: React.PropTypes.object.isRequired
    handleQueryChanged: React.PropTypes.func.isRequired
    handleSearch: React.PropTypes.func.isRequired

  componentDidMount: ->
    @refs.searchfield.getDOMNode().focus()

  displayedQuery: ->
    # Convert the CQP expression into a pure text search phrase
    @props.searchQuery.query.replace(/\[\(?\w+="(.+?)"(?:\s+%c)?\)?\]/g, '$1')
      .replace(/"([^\s=]+)"/g, '$1')

  isPhonetic: ->
    @props.searchQuery.query.indexOf('phon=') isnt -1


  handleTextChanged: (e) ->
    # Convert the search phrase to CQP
    if e.target.value is ''
      query = ''
    else
      attr = if @isPhonetic() then 'phon' else 'word'
      # Surround every Chinese character by space when constructing a cqp query,
      # to treat it as if it was an individual word:
      chineseCharsRange = '[\u4E00-\u9FFF\u3400-\u4DFF\uF900-\uFAFF]'
      terms = for term in e.target.value.replace(///(#{chineseCharsRange})///g, ' $1 ').split(/\s/)
        if term is '' then '' else "[#{attr}=\"#{term}\" %c]"
      query = terms.join(' ').replace(///\s(\[\w+="#{chineseCharsRange}"(?:\s+%c)?\])\s///g, "$1")

    @props.handleQueryChanged
      lang: @props.searchQuery.lang
      query: query


  handlePhoneticChanged: (e) ->
    query = if e.target.checked
              @props.searchQuery.query.replace(/word=/g, 'phon=')
            else
              @props.searchQuery.query.replace(/phon=/g, 'word=')
    @props.handleQueryChanged
      lang: @props.searchQuery.lang
      query: query

  handleKeyDown: (e) ->
    if e.key is 'Enter'
      e.preventDefault()
      @props.handleSearch()

  render: ->
    `<div className="row-fluid">
      <form className="form-inline span12">
        <div className="span10">
          <input ref="searchfield" type="text" className="span12" value={this.displayedQuery()}
            onChange={this.handleTextChanged} onKeyDown={this.handleKeyDown} />
          {this.props.hasPhoneticForm && <label style={{marginTop: 5}}><input name="phonetic" type="checkbox" style={{marginTop: -3}} checked={this.isPhonetic()} onChange={this.handlePhoneticChanged}/>&nbsp;Phonetic form</label>}
        </div>
      </form>
    </div>`
{'fraction_non_alphanumeric': 0.16648291069459759, 'fraction_numerical': 0.007938257993384785, 'mean_word_length': 3.039180765805877, 'pattern_counts': {'":': 0, '<': 23, '<?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': '7396213', 'n_tokens_mistral': 1504, 'n_tokens_neox': 1454, 'n_words': 303}