<commit_before>import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import QueryBuilder from '../components/QueryBuilder';
import Visualization from '../components/Visualization';
import Header from '../containers/Header';

import {
  setTimeRange as setTimeRangeAction,
} from '../actions/view';

const {
  func,
  shape,
  string,
} = PropTypes;

const DataExplorer = React.createClass({
  propTypes: {
    source: shape({
      links: shape({
        proxy: string.isRequired,
        self: string.isRequired,
      }).isRequired,
    }).isRequired,
    queryConfigs: PropTypes.shape({}),
    timeRange: shape({
      upper: string,
      lower: string,
    }).isRequired,
    activePanel: string,
    setTimeRange: func.isRequired,
  },

  childContextTypes: {
    source: shape({
      links: shape({
        proxy: string.isRequired,
        self: string.isRequired,
      }).isRequired,
    }).isRequired,
  },

  getChildContext() {
    return {source: this.props.source};
  },

  getInitialState() {
    return {
      activeQueryID: null,
    };
  },

  handleSetActiveQuery(id) {
    this.setState({activeQueryID: id});
  },

  render() {
    const {timeRange, setTimeRange, activePanel, queryConfigs} = this.props;
    const queries = Object.keys(queryConfigs).map((q) => queryConfigs[q]);

    return (
      <div className="data-explorer">
        <Header
          actions={{setTimeRange}}
          timeRange={timeRange}
        />
        <Visualization
          timeRange={timeRange}
          queryConfigs={queries}
          activePanelID={activePanel}
          activeQueryID={this.state.activeQueryID}
          activeQueryIndex={0}
        />
        <QueryBuilder
          queries={queries}
          timeRange={timeRange}
          setActiveQuery={this.handleSetActiveQuery}
        />
      </div>
    );
  },
});

function mapStateToProps(state) {
  const {timeRange, queryConfigs, dataExplorerUI} = state;

  return {
    timeRange,
    queryConfigs,
    activePanel: dataExplorerUI.activePanel,
  };
}

export default connect(mapStateToProps, {
  setTimeRange: setTimeRangeAction,
})(DataExplorer);
<commit_msg>Use QueryBuilder and Visualization in DE<commit_after>import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import QueryBuilder from '../components/QueryBuilder';
import Visualization from '../components/Visualization';
import Header from '../containers/Header';

import {
  setTimeRange as setTimeRangeAction,
} from '../actions/view';

const {
  func,
  shape,
  string,
} = PropTypes;

const DataExplorer = React.createClass({
  propTypes: {
    source: shape({
      links: shape({
        proxy: string.isRequired,
        self: string.isRequired,
      }).isRequired,
    }).isRequired,
    queryConfigs: PropTypes.shape({}),
    timeRange: shape({
      upper: string,
      lower: string,
    }).isRequired,
    setTimeRange: func.isRequired,
  },

  childContextTypes: {
    source: shape({
      links: shape({
        proxy: string.isRequired,
        self: string.isRequired,
      }).isRequired,
    }).isRequired,
  },

  getChildContext() {
    return {source: this.props.source};
  },

  getInitialState() {
    return {
      activeQueryID: null,
    };
  },

  handleSetActiveQuery(id) {
    this.setState({activeQueryID: id});
  },

  render() {
    const {timeRange, setTimeRange, queryConfigs} = this.props;
    const {activeQueryID} = this.state;
    const queries = Object.keys(queryConfigs).map((q) => queryConfigs[q]);

    return (
      <div className="data-explorer">
        <Header
          actions={{setTimeRange}}
          timeRange={timeRange}
        />
        <div className="page-contents">
          <Visualization
            timeRange={timeRange}
            queryConfigs={queries}
            activeQueryID={this.state.activeQueryID}
            activeQueryIndex={0}
          />
          <QueryBuilder
            queries={queries}
            timeRange={timeRange}
            setActiveQuery={this.handleSetActiveQuery}
            activeQueryID={activeQueryID}
          />
        </div>
      </div>
    );
  },
});

function mapStateToProps(state) {
  const {timeRange, queryConfigs, dataExplorerUI} = state;

  return {
    timeRange,
    queryConfigs,
    activePanel: dataExplorerUI.activePanel,
  };
}

export default connect(mapStateToProps, {
  setTimeRange: setTimeRangeAction,
})(DataExplorer);

{'fraction_non_alphanumeric': 0.12629446195407473, 'fraction_numerical': 0.00045024763619990995, 'mean_word_length': 2.711779448621554, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 17, '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': '3099854', 'n_tokens_mistral': 1323, 'n_tokens_neox': 1308, 'n_words': 262}