<commit_before>import React, { Component } from 'react'
import {
  Panel,
  FormGroup,
  Checkbox,
} from 'react-bootstrap'
import Slider from 'rc-slider'

import { EquipmentTable } from './equipment-table'
import { NewEquipmentPanel } from './new-equipment-panel'
import { ResultsTable } from './results-table'

const emptyMark = {
  label: '',
  style: {display: 'none'},
}

class DlcLab extends Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }
  render() {
    return (
      <div style={{display: 'flex'}}>
        <Panel
          className="dlc-lab-control-panel"
          style={{
            width: '60%',
            marginRight: 10,
          }}
          header="Expedition"
        >
          <FormGroup>
            <Checkbox inline>Include Kinu K2</Checkbox>
          </FormGroup>
          <div style={{display: 'flex'}}>
            <div>
              Great Success: 0%
            </div>
            <Slider
              style={{flex: 1, marginLeft: '1.2em', marginRight: '1em'}}
              marks={{0: emptyMark, 50: emptyMark, 100: emptyMark}} />
          </div>
          <EquipmentTable style={{marginTop: '1.2em', marginBottom: 5}} />
          <NewEquipmentPanel />
        </Panel>
        <Panel
          className="dlc-lab-control-panel"
          style={{flex: 1}}
          header="Results"
        >
          <ResultsTable />
        </Panel>
      </div>
    )
  }
}

export { DlcLab }<commit_msg>connect to store & rework gs input<commit_after>import _ from 'lodash'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
  Panel,
  FormGroup,
  Checkbox,
  Button,
  FormControl,
} from 'react-bootstrap'

import { EquipmentTable } from './equipment-table'
import { NewEquipmentPanel } from './new-equipment-panel'
import { ResultsTable } from './results-table'
import { dlcLabSelector } from '../../selectors'
import { mapDispatchToProps } from '../../store/reducer/ui/dlc-lab'
import { PTyp } from '../../ptyp'
import { modifyObject } from '../../utils'

class DlcLabImpl extends Component {
  static propTypes = {
    kinuK2: PTyp.bool.isRequired,
    gsPercent: PTyp.number.isRequired,
    modifyDlcLabUI: PTyp.func.isRequired,
  }

  constructor(props) {
    super(props)
    this.state = {
      gsPercentStr: String(props.gsPercent),
    }
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.gsPercent !== nextProps.gsPercent) {
      this.setState({gsPercentStr: String(nextProps.gsPercent)})
    }
  }

  handleToggleKinuK2 = e => {
    const {modifyDlcLabUI} = this.props
    const kinuK2 = e.target.checked
    modifyDlcLabUI(
      modifyObject(
        'kinuK2',
        () => kinuK2))
  }

  handleGsPercentChange = gsPercent => () => {
    const {modifyDlcLabUI} = this.props
    modifyDlcLabUI(
      modifyObject(
        'gsPercent',
        () => gsPercent))
  }

  debouncedGsPercentUpdate = _.debounce(
    () => {
      const gsPercent = Number(this.state.gsPercentStr)
      if (_.isInteger(gsPercent) &&
          gsPercent >= 0 &&
          gsPercent <= 100) {
        this.handleGsPercentChange(gsPercent)()
      } else {
        this.setState({gsPercentStr: String(this.props.gsPercent)})
      }
    },
    500)

  handleGsPercentTextChange = e =>
    this.setState(
      {gsPercentStr: e.target.value},
      this.debouncedGsPercentUpdate)

  render() {
    const {kinuK2} = this.props
    const {gsPercentStr} = this.state
    return (
      <div style={{display: 'flex'}}>
        <Panel
          className="dlc-lab-control-panel"
          style={{
            width: '60%',
            marginRight: 10,
          }}
          header="Expedition"
        >
          <FormGroup style={{marginBottom: 5}}>
            <Checkbox
              onChange={this.handleToggleKinuK2}
              checked={kinuK2} inline>
              Include Kinu K2
            </Checkbox>
          </FormGroup>
          <div style={{display: 'flex', alignItems: 'center'}}>
            <div style={{marginRight: 5, flex: 1}}>Great Success:</div>
            <Button
              onClick={this.handleGsPercentChange(0)}
              bsSize="small" style={{minWidth: '6em'}}>
              0%
            </Button>
            <FormControl
              style={{
                width: '40%',
                marginLeft: 5,
                marginRight: 5,
              }}
              onChange={this.handleGsPercentTextChange}
              value={gsPercentStr}
              type="text" />
            <Button
              onClick={this.handleGsPercentChange(100)}
              bsSize="small" style={{minWidth: '6em'}}>
              100%
            </Button>
          </div>
          <EquipmentTable style={{marginTop: 8, marginBottom: 5}} />
          <NewEquipmentPanel />
        </Panel>
        <Panel
          className="dlc-lab-control-panel"
          style={{flex: 1}}
          header="Results"
        >
          <ResultsTable />
        </Panel>
      </div>
    )
  }
}

const DlcLab = connect(
  state => {
    const {kinuK2, gsPercent} = dlcLabSelector(state)
    return {kinuK2, gsPercent}
  },
  mapDispatchToProps,
)(DlcLabImpl)

export { DlcLab }
{'fraction_non_alphanumeric': 0.13543065413389602, 'fraction_numerical': 0.011893343564166508, 'mean_word_length': 1.9625, 'pattern_counts': {'":': 0, '<': 44, '<?xml version=': 0, '>': 52, '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': '7522694', 'n_tokens_mistral': 1661, 'n_tokens_neox': 1604, 'n_words': 315}