<commit_before>const React = require('react');
const h = require('react-hyperscript');
const _ = require('lodash');
const { ServerAPI } = require('../../services/');
let Textarea = require('react-textarea-autosize').default;


class TokenInput extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      tokenData: new Map(),
      query: '',
      validTokens: [],
      unrecognizedTokens: []
    };
  }

  //log input for validation onSubmit
  //dynamic input editing, remove tokens from 'tokenData' and validity arrays 'validTokens' and 'unrecognizedTokens' when token is altered or deleted from input box
  handleChange(e) {
    this.state.query = e.target.value;
    this.state.tokenData.forEach( (value, key, mapObj) => {
      if (e.target.value.includes(key) == false ) {
        this.updateValidityArrays(_.pull, key);
        mapObj.delete(key);
      }
    });
  }

  //called onClick 'submit'
  //seperate input into an array
  //send only new tokens to validation
  //****** NOTE: this method will be altered later depending on the type/format of the final input box (slate or some other library)
  parseTokenList() {
    let tokenList = this.state.query.split(/\s/g);
    this.state.tokenData.forEach( (value, key) => {
      if (tokenList.includes(key)) tokenList = _.pull(tokenList, key);
    });
    this.retrieveValidationAPIResult(tokenList);
  }

  //call validation service API to retrieve validation result in the form of []
  //****** NOTE: currently only checking for unrecognized tokens, not duplicates
  retrieveValidationAPIResult(tokensToValidate){
    ServerAPI.enrichmentAPI({genes: _.pull(tokensToValidate,"")}, "validation").then((result) => {
      this.updateMapWithNewTokens(tokensToValidate, result.unrecognized);
      });
  }

  //set new tokens in map 'tokenData' with values 'true' for valid or 'false' for unrecognized
  updateMapWithNewTokens(tokensToSet, unrecognizedTokens)
  {
    tokensToSet.forEach((element) => {
      if( unrecognizedTokens.includes(element.toUpperCase()) ) this.state.tokenData.set(element, false);
      else this.state.tokenData.set(element, true);
      this.updateValidityArrays(_.union, [element]);
    });
  }

  //store (action == _.union) and remove (action == _.pull) tokens in corresponding arrays, [unrecognizedTokens] or [validTokens]
  updateValidityArrays(action, token)
  {
      if (this.state.tokenData.get(String(token)) == false) this.setState({unrecognizedTokens: action(this.state.unrecognizedTokens, token)});
      else {this.setState({validTokens: action(this.state.validTokens, token)});}
  }


  render() {
    //lift state to index.js /enrichment
    this.props.updateValidTokenList(this.state.validTokens);

    return h('div.enrichmentInput', [
        h('h4', [
          h('span', 'Pathway Enrichment   ')
        ]),
        h('img', {
          src: '/img/humanIcon.png'
        }),
        h('div.gene-input-container', [
          h(Textarea, {
            className: 'gene-input-box',
            placeholder: 'Enter one gene per line',
            onChange: (e) => this.handleChange(e)
          })
        ]),
        h('submit-container', {
          onClick: () => {this.parseTokenList();} },
          [h('button.submit', 'Submit')]
        ),
        h('div.unrecognized-token-container',[
          h(Textarea, {
            className:'unrecognized-tokens-feedback',
            value: "Unrecognized Tokens: \n" + this.state.unrecognizedTokens.join("\n"),
            readOnly: true,
            //if unrecognizedTokens is its default value (ie no tokens have been added), feedback box not displayed
            style: {display: _.isEmpty(this.state.unrecognizedTokens) ? 'none' : 'block' }
          })
        ])
    ]);
  }
}

module.exports = TokenInput;

<commit_msg>change input-token.js to minimize number of functions, onClick 'submit' entire input will be validated<commit_after>const React = require('react');
const h = require('react-hyperscript');
const _ = require('lodash');
const { ServerAPI } = require('../../services/');
let Textarea = require('react-textarea-autosize').default;

class TokenInput extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      query: '',
      validTokens: [],
      unrecognizedTokens: []
    };
  }

  //store 'gene-input-box' contents on state
  handleChange(e) {
    this.state.query = e.target.value;
  }

  //call validation service API to retrieve validation result in the form of []
  retrieveValidationAPIResult(){
    //reset state values
    this.state.unrecognizedTokens = [];
    this.state.validTokens = [];
    let tokenList = this.state.query.split(/\s/g);
    //send all tokens to validationAPI
    ServerAPI.enrichmentAPI({genes: _.pull(tokenList,"")}, "validation").then((result) => {
      this.interpretValidationResult(tokenList, result.unrecognized);
      });
  }

  //store validation data on state as arrays [validTokens] and [unrecognizedTokens]
  //lift [validTokens] to parent file index.js
  interpretValidationResult(tokenList, unrecognizedTokens){
    tokenList.forEach((element) => {
      if (unrecognizedTokens.includes(element.toUpperCase()) ) this.setState({unrecognizedTokens: _.union(this.state.unrecognizedTokens, [element])});
      else {this.setState({validTokens: _.union(this.state.validTokens, [element])});}
    });
    this.props.updateValidTokenList(this.state.validTokens);
  }

  render() {

    return h('div.enrichmentInput', [
        h('h4', [
          h('span', 'Pathway Enrichment   ')
        ]),
        h('img', {
          src: '/img/humanIcon.png'
        }),
        h('div.gene-input-container', [
          h(Textarea, {
            className: 'gene-input-box',
            placeholder: 'Enter one gene per line',
            onChange: (e) => this.handleChange(e)
          })
        ]),
        h('submit-container', {
          onClick: () => { this.retrieveValidationAPIResult();} },
          [h('button.submit', 'Submit')]
        ),
        h('div.unrecognized-token-container',[
          h(Textarea, {
            className:'unrecognized-tokens-feedback',
            value: "Unrecognized Tokens: \n" + this.state.unrecognizedTokens.join("\n"),
            readOnly: true,
            //if unrecognizedTokens is its default value (ie no tokens have been added), feedback box not displayed
            style: {display: _.isEmpty(this.state.unrecognizedTokens) ? 'none' : 'block' }
          })
        ])
    ]);
  }
}

module.exports = TokenInput;


{'fraction_non_alphanumeric': 0.14244274809160307, 'fraction_numerical': 0.0003053435114503817, 'mean_word_length': 2.906380441264162, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, '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': '969019', 'n_tokens_mistral': 1927, 'n_tokens_neox': 1906, 'n_words': 428}