<commit_before>import PropTypes from 'prop-types';
import React from 'react';
import { injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import composeSummarizedVisualization from './SummarizedVizualization';
import withAsyncFetch from '../../common/hocs/AsyncContainer';
import { fetchQueryTopWords, fetchDemoQueryTopWords, resetTopWords, selectWord }
from '../../../actions/explorerActions';
import { postToDownloadUrl, slugifiedQueryLabel } from '../../../lib/explorerUtil';
import messages from '../../../resources/messages';
import composeQueryResultsSelector from './QueryResultsSelector';
import EditableWordCloudDataCard from '../../common/EditableWordCloudDataCard';

const localMessages = {
  title: { id: 'explorer.topWords.title', defaultMessage: 'Top Words' },
  descriptionIntro: { id: 'explorer.topWords.help.title', defaultMessage: '<p>Here are the top words used with each query. Looking at the language used can help you identify how this issue is talked about in the media online.</p>' },
  menuHeader: { id: 'explorer.topWords.menuHeader', defaultMessage: 'Query: {queryName}' },
};

const WORD_CLOUD_DOM_ID = 'query-word-cloud-wrapper';

class QueryWordsResultsContainer extends React.Component {
  handleDownload = (query, ngramSize) => {
    postToDownloadUrl('/api/explorer/words/wordcount.csv', query, { ngramSize });
  }
  handleWordClick = (wordDataPoint) => {
    const { handleSelectedWord, selectedQuery } = this.props;
    handleSelectedWord(selectedQuery, wordDataPoint.stem);
  }
  render() {
    const { results, queries, tabSelector, selectedQueryIndex } = this.props;
    const { formatMessage } = this.props.intl;
    const selectedQuery = queries[selectedQueryIndex];
    return (
      <EditableWordCloudDataCard
        actionMenuHeaderText={formatMessage(localMessages.menuHeader, { queryName: selectedQuery.label })}
        subHeaderContent={tabSelector}
        words={results[selectedQueryIndex].list}
        onViewModeClick={this.handleWordClick}
        border={false}
        domId={WORD_CLOUD_DOM_ID}
        width={585}
        onDownload={ngramSize => this.handleDownload(selectedQuery, ngramSize)}
        svgDownloadPrefix={`${slugifiedQueryLabel(selectedQuery.label)}-ngram-1`}
        textColor={selectedQuery.color}
        actionsAsLinksUnderneath
        hideGoogleWord2Vec<commit_msg>Switch Explorer KWIC to term, not stem #1147<commit_after>import PropTypes from 'prop-types';
import React from 'react';
import { injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import composeSummarizedVisualization from './SummarizedVizualization';
import withAsyncFetch from '../../common/hocs/AsyncContainer';
import { fetchQueryTopWords, fetchDemoQueryTopWords, resetTopWords, selectWord }
from '../../../actions/explorerActions';
import { postToDownloadUrl, slugifiedQueryLabel } from '../../../lib/explorerUtil';
import messages from '../../../resources/messages';
import composeQueryResultsSelector from './QueryResultsSelector';
import EditableWordCloudDataCard from '../../common/EditableWordCloudDataCard';

const localMessages = {
  title: { id: 'explorer.topWords.title', defaultMessage: 'Top Words' },
  descriptionIntro: { id: 'explorer.topWords.help.title', defaultMessage: '<p>Here are the top words used with each query. Looking at the language used can help you identify how this issue is talked about in the media online.</p>' },
  menuHeader: { id: 'explorer.topWords.menuHeader', defaultMessage: 'Query: {queryName}' },
};

const WORD_CLOUD_DOM_ID = 'query-word-cloud-wrapper';

class QueryWordsResultsContainer extends React.Component {
  handleDownload = (query, ngramSize) => {
    postToDownloadUrl('/api/explorer/words/wordcount.csv', query, { ngramSize });
  }
  handleWordClick = (wordDataPoint) => {
    const { handleSelectedWord, selectedQuery } = this.props;
    handleSelectedWord(selectedQuery, wordDataPoint.term);
  }
  render() {
    const { results, queries, tabSelector, selectedQueryIndex } = this.props;
    const { formatMessage } = this.props.intl;
    const selectedQuery = queries[selectedQueryIndex];
    return (
      <EditableWordCloudDataCard
        actionMenuHeaderText={formatMessage(localMessages.menuHeader, { queryName: selectedQuery.label })}
        subHeaderContent={tabSelector}
        words={results[selectedQueryIndex].list}
        onViewModeClick={this.handleWordClick}
        border={false}
        domId={WORD_CLOUD_DOM_ID}
        width={585}
        onDownload={ngramSize => this.handleDownload(selectedQuery, ngramSize)}
        svgDownloadPrefix={`${slugifiedQueryLabel(selectedQuery.label)}-ngram-1`}
        textColor={selectedQuery.color}
        actionsAsLinksUnderneath
        hideGoogleWord2Vec
{'fraction_non_alphanumeric': 0.12014282713715606, 'fraction_numerical': 0.0029405587061541692, 'mean_word_length': 4.576112412177986, 'pattern_counts': {'":': 0, '<': 9, '<?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': 12, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5042925', 'n_tokens_mistral': 1333, 'n_tokens_neox': 1314, 'n_words': 298}