<commit_before>import React from 'react';
import { connect } from 'react-redux';
import { Tabs } from 'react-bootstrap';
import { Tab } from 'react-bootstrap';
import Query from './query/Query.jsx';

export default class ContainerTabs extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    
    return <Tabs defaultActiveKey={"STATE"} id="controlled-tabs">
      <Tab eventKey={"STATE"} title="STATE">What are people complaining about in <Query param="STATE"/> ?</Tab>
      <Tab eventKey={"POP"} title="POPULATION">How many people were born in <Query param="YEAR" /> in all the states that <Query param="BANK" />received a consumer complaint in ?</Tab>
      <Tab eventKey={"GROWTH"} title="GROWTH">How many complaints about <Query param="PRODUCT" /> are there in the fastest growing state ?</Tab>
    </Tabs>
  }

}

// map the portion of the state tree desired
const mapStateToProps = (store) => {
  return {
    fetching: store.fincensusReducer.fetching,
    active: store.fincensusReducer.active,
  };
};

// connect the desired state to the relevant component
export default connect(mapStateToProps)(ContainerTabs);<commit_msg>(refactor) Restructure Tabs component to distribute props<commit_after>import React from 'react';
import { connect } from 'react-redux';
import { loadParams, setActive } from '../../data_flow/ACTIONS.jsx';

import { Tabs } from 'react-bootstrap';
import { Tab } from 'react-bootstrap';
import Query from './query/Query.jsx';

export default class ContainerTabs extends React.Component {
  constructor(props) {
    super(props);
    this._handleSelect = this._handleSelect.bind(this);
  }
  
  componentWillMount() {
    this.props.dispatch(loadParams());
  }
  
  _handleSelect(key) {
    this.props.dispatch(setActive(key));
  }

  render() {
    
    return <Tabs defaultActiveKey={this.props.active} onSelect={this._handleSelect} id="controlled-tabs">
      <Tab eventKey={"STATE"} title="STATE">
        What is the <strong>RANK</strong> most complained about product in <strong>STATE</strong>?
        <Query params={["STATE", "RANK"]}/>
      </Tab>
      <Tab eventKey={"POPULATION"} title="POPULATION">
        How many people were born in states where <strong>BANK</strong> had a complaint in <strong>YEAR</strong>.
        <Query params={["YEAR", "BANK"]} />
      </Tab>
      <Tab eventKey={"GROWTH"} title="GROWTH">
        Number of complaints about <strong>PRODUCT</strong> in the <strong>RANK</strong> fastest growing state.
        <Query params={["PRODUCT", "RANK"]} />
      </Tab>
    </Tabs>
  }

}

// map the portion of the state tree desired
const mapStateToProps = (store) => {
  return {
    fetching: store.fincensusReducer.fetching,
    active: store.fincensusReducer.active,
  };
};

// connect the desired state to the relevant component
export default connect(mapStateToProps)(ContainerTabs);
{'fraction_non_alphanumeric': 0.1384083044982699, 'fraction_numerical': 0.0, 'mean_word_length': 3.9503424657534247, 'pattern_counts': {'":': 0, '<': 38, '<?xml version=': 0, '>': 40, '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': '5198000', 'n_tokens_mistral': 872, 'n_tokens_neox': 863, 'n_words': 245}