<commit_before>import React from 'react'
import injectSheet from 'react-jss'
import classNames from 'classnames'
import PropTypes from 'prop-types'

import Form from '../../components/Form'
import sharedFormStyles from '../../components/Form/sharedFormStyles'

const MorphForm = props => {
  const join = data => data.join('\n')

  return (
    <Form>
      <div className={props.styles.section}>
        <div
          className={classNames(
            props.styles.categories,
            props.styles.inputSection,
            props.classes.part
          )}
        >
          <h5 className={props.classes.sectionTitle}>Categories</h5>
          <div className={props.styles.container}>
            <textarea
              id='categories'
              name='categories'
              className={classNames(
                props.styles.categoriesInput,
                props.styles.dataInput
              )}
              value={join(props.data.categories)}
              readOnly
            />
            <div className={props.styles.textAreaSpacer}>
              {join(props.data.categories)}
            </div>
          </div>
        </div>
        <div
          className={classNames(
            props.styles.rewriteRules,
            props.styles.inputSection,
            props.classes.part
          )}
        >
          <h5 className={props.classes.sectionTitle}>Rewrite Rules</h5>
          <div className={props.styles.container}>
            <textarea
              id='rewriteRules'
              name='rewriteRules'
              className={classNames(
                props.styles.rewriteRulesInput,
                props.styles.dataInput
              )}
              value={join(props.data.rewriteRules)}
              readOnly
            />
            <div className={props.styles.textAreaSpacer}>
              {join(props.data.rewriteRules)}
            </div>
          </div>
        </div>
        <div
          className={classNames(
            props.styles.soundChanges,
            props.styles.inputSection,
            props.classes.part
          )}
        >
          <h5 className={props.classes.sectionTitle}>Sound Changes</h5>
          <div className={props.styles.container}>
            <textarea
              id='soundChanges'
              name='soundChanges'
              className={classNames(
                props.styles.soundChangesInput,
                props.styles.dataInput
              )}
              value={join(props.data.soundChanges)}
              readOnly
            />
            <div className={props.styles.textAreaSpacer}>
              {join(props.data.soundChanges)}
            </div>
          </div>
        </div>
        <div
          className={classNames(
            props.styles.lexicon,
            props.styles.inputSection,
            props.classes.part
          )}
        >
          <h5 className={props.classes.sectionTitle}>Lexicon</h5>
          <div className={props.styles.container}>
            <textarea
              id='lexicon'
              name='lexicon'
              className={classNames(
                props.styles.lexiconInput,
                props.styles.dataInput
              )}
              value={join(props.data.lexicon)}
              readOnly
            />
            <div className={props.styles.textAreaSpacer}>
              {join(props.data.lexicon)}
            </div>
          </div>
        </div>
      </div>
      {JSON.stringify(props.data.outputFormat)}
      {JSON.stringify(props.data.showDiff)}
      {JSON.stringify(props.data.ruleReport)}
      {JSON.stringify(props.data.rewriteOutput)}<commit_msg>Add MorphForm controls<commit_after>import React from 'react'
import injectSheet from 'react-jss'
import classNames from 'classnames'
import PropTypes from 'prop-types'

import Button from '../../components/Button'
import Form from '../../components/Form'
import sharedFormStyles from '../../components/Form/sharedFormStyles'
import Control from '../../components/Control'
import ControlSide from '../../components/Control/Side'
import ControlPiece from '../../components/Control/Piece'

const MorphForm = props => {
  const filePicker = React.createRef()

  const join = data => data.join('\n')

  return (
    <Form>
      <div className={props.styles.section}>
        <div
          className={classNames(
            props.styles.categories,
            props.styles.inputSection,
            props.classes.part
          )}
        >
          <h5 className={props.classes.sectionTitle}>Categories</h5>
          <div className={props.styles.container}>
            <textarea
              id='categories'
              name='categories'
              className={classNames(
                props.styles.categoriesInput,
                props.styles.dataInput
              )}
              value={join(props.data.categories)}
              readOnly
            />
            <div className={props.styles.textAreaSpacer}>
              {join(props.data.categories)}
            </div>
          </div>
        </div>
        <div
          className={classNames(
            props.styles.rewriteRules,
            props.styles.inputSection,
            props.classes.part
          )}
        >
          <h5 className={props.classes.sectionTitle}>Rewrite Rules</h5>
          <div className={props.styles.container}>
            <textarea
              id='rewriteRules'
              name='rewriteRules'
              className={classNames(
                props.styles.rewriteRulesInput,
                props.styles.dataInput
              )}
              value={join(props.data.rewriteRules)}
              readOnly
            />
            <div className={props.styles.textAreaSpacer}>
              {join(props.data.rewriteRules)}
            </div>
          </div>
        </div>
        <div
          className={classNames(
            props.styles.soundChanges,
            props.styles.inputSection,
            props.classes.part
          )}
        >
          <h5 className={props.classes.sectionTitle}>Sound Changes</h5>
          <div className={props.styles.container}>
            <textarea
              id='soundChanges'
              name='soundChanges'
              className={classNames(
                props.styles.soundChangesInput,
                props.styles.dataInput
              )}
              value={join(props.data.soundChanges)}
              readOnly
            />
            <div className={props.styles.textAreaSpacer}>
              {join(props.data.soundChanges)}
            </div>
          </div>
        </div>
        <div
          className={classNames(
            props.styles.lexicon,
            props.styles.inputSection,
            props.classes.part
          )}
        >
          <h5 className={props.classes.sectionTitle}>Lexicon</h5>
          <div className={props.styles.container}>
            <textarea
              id='lexicon'
              name='lexicon'
              className={classNames(
                props.styles.lexiconInput,
                props.styles.dataInput
              )}
              value={join(props.data.lexicon)}
              readOnly
            />
            <div className={props.styles.textAreaSpacer}>
              {join(props.data.lexicon)}
            </div>
          </div>
        </div>
      </div>
      <Control addedClasses={props.classes.part}>
        <ControlSide side='left'>
          <ControlPiece>
            <Button type='submit' ver='neutral' onClick={props.change}>
              Change
            </Button>
          </ControlPiece>
          <ControlPiece>
            <label htmlFor='outputFormat'>output format:</label>
            <select
              id='outputFormat'
              name='outputFormat'
              value={props.data.outputFormat}
              onChange={props.change}
            >
              <option value='oo'>output</option>
              <option value='io'>input &rarr; output</option>
              <option value='oi'>output &larr; input</option>
            </select>
          </ControlPiece>
          <ControlPiece>
            <label>
              <input
                type='checkbox'
                id='showDiff'
                name='options'
                value='showDiff'
                checked={props.data.showDiff}
                onChange={props.change}
              />{' '}
              show differences
            </label>
          </ControlPiece>
          <ControlPiece>
            <label>
              <input
                type='checkbox'
                id='ruleReport'
                name='options'
                value='ruleReport'
                checked={props.data.ruleReport}
                onChange={props.change}
              />{' '}
              report applied rules
            </label>
          </ControlPiece>
          <ControlPiece>
            <label>
              <input
                type='checkbox'
                id='rewriteOutput'
                name='options'
                value='rewriteOutput'
                checked={props.data.rewriteOutput}
                onChange={props.change}
              />{' '}
              rewrite on output
            </label>
          </ControlPiece>
        </ControlSide>
        <ControlSide side='right'>
          <ControlPiece>
            <Button
              id='save'
              ver='success'
              onClick={props.change}
              type='button'
            >
              Save
            </Button>
          </ControlPiece>
          <ControlPiece>
            <Button
              id='open'
              onClick={/*invokeFilePicker*/ e => e.preventDefault()}
              type='button'
            >
              Open
            </Button>
            <input
              id='file'
              name='file'
              className={props.classes.hidden}
              type='file'
              ref={filePicker}
              onChange={props.change}
            />
          </ControlPiece>
        </ControlSide>
      </Control>
{'fraction_non_alphanumeric': 0.11117711117711118, 'fraction_numerical': 0.001584001584001584, 'mean_word_length': 1.340593141797961, 'pattern_counts': {'":': 0, '<': 127, '<?xml version=': 0, '>': 132, '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': '3602164', 'n_tokens_mistral': 2499, 'n_tokens_neox': 2450, 'n_words': 389}