<commit_before>import React from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { Tabs, Tab } from 'material-ui/Tabs';
import MenuItem from 'material-ui/MenuItem';
import composeDescribedDataCard from '../../common/DescribedDataCard';
import DataCard from '../../common/DataCard';
import composeAsyncContainer from '../../common/AsyncContainer';
import { DownloadButton } from '../../common/IconButton';
import ActionMenu from '../../common/ActionMenu';
import StoryTable from '../../common/StoryTable';
import { fetchQuerySampleStories, fetchDemoQuerySampleStories } from '../../../actions/explorerActions';
import messages from '../../../resources/messages';
import { getUserRoles, hasPermissions, PERMISSION_LOGGED_IN } from '../../../lib/auth';

// const NUM_TO_SHOW = 20;
const DEFAULT_SOURCES = '';
const DEFAULT_COLLECTION = 9139487;
// TODO check all these messages

const localMessages = {
  title: { id: 'explorer.stories.title', defaultMessage: 'Story Samples' },
  helpTitle: { id: 'explorer.stories.help.title', defaultMessage: 'About Story Samples' },
  helpText: { id: 'explorer.stories.help.text',
    defaultMessage: '<p>This chart shows you estimated coverage of your seed query</p>',
  },
  descriptionIntro: { id: 'explorer.stories.help.title', defaultMessage: 'This is a random sample of stories.' },
  tabStory: { id: 'explorer.stories.tab', defaultMessage: 'Tab for Query' },
  downloadCSV: { id: 'explorer.attention.downloadcsv', defaultMessage: 'Download {name}' },
};

class StorySamplePreview extends React.Component {
  componentWillReceiveProps(nextProps) {
    const { urlQueryString, lastSearchTime, fetchData } = this.props;
    if (nextProps.lastSearchTime !== lastSearchTime ||
      nextProps.urlQueryString !== urlQueryString) {
    // TODO also check for name and color changes
      fetchData(nextProps.urlQueryString, nextProps.queries);
    }
  }
  downloadCsv = (query) => {
    let url = null;
    if (parseInt(query.searchId, 10) >= 0) {
      url = `/api/explorer/stories/samples.csv/${query.searchId}/${query.index}`;
    } else {
      url = `/api/explorer/stories/samples.csv/[{"q":"${query.q}"}]/${query.index}`;
    }
    window.location = url;
  }
  render() {
    const { results, queries, handleStorySelection } = this.props;
    const { formatMessage } = this.props.intl;
    return (
      <DataCard>
        <div className="actions">
          <ActionMenu>
            {queries.map((q, idx) =>
              <MenuItem
                key={idx}
                className="action-icon-menu-item"
                primaryText={formatMessage(localMessages.downloadCSV, { name: q.label })}
                rightIcon={<DownloadButton />}
                onTouchTap={() => this.downloadCsv(q)}
              />
            )}
          </ActionMenu>
        </div>
        <h2><FormattedMessage {...localMessages.title} /></h2>
        <br />
        <Tabs>
          {results.map((storySet, idx) =>
            (<Tab label={queries && queries.length > idx ? queries[idx].q : 'empty'} key={idx}>
              <StoryTable
                className="story-table"
                stories={storySet}
                index={idx}
                onChangeFocusSelection={handleStorySelection}
                maxTitleLength={50}
              />
            </Tab>
            )
          )}
        </Tabs>
      </DataCard>
    );
  }
}

StorySamplePreview.propTypes = {
  lastSearchTime: React.PropTypes.number.isRequired,
  queries: React.PropTypes.array.isRequired,
  // from composition
  intl: React.PropTypes.object.isRequired,
  // from dispatch<commit_msg>only show story sample tabs on explorer demo if more than one query<commit_after>import React from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { Tabs, Tab } from 'material-ui/Tabs';
import MenuItem from 'material-ui/MenuItem';
import composeDescribedDataCard from '../../common/DescribedDataCard';
import DataCard from '../../common/DataCard';
import composeAsyncContainer from '../../common/AsyncContainer';
import { DownloadButton } from '../../common/IconButton';
import ActionMenu from '../../common/ActionMenu';
import StoryTable from '../../common/StoryTable';
import { fetchQuerySampleStories, fetchDemoQuerySampleStories } from '../../../actions/explorerActions';
import messages from '../../../resources/messages';
import { getUserRoles, hasPermissions, PERMISSION_LOGGED_IN } from '../../../lib/auth';

// const NUM_TO_SHOW = 20;
const DEFAULT_SOURCES = '';
const DEFAULT_COLLECTION = 9139487;
// TODO check all these messages

const localMessages = {
  title: { id: 'explorer.stories.title', defaultMessage: 'Story Samples' },
  helpTitle: { id: 'explorer.stories.help.title', defaultMessage: 'About Story Samples' },
  helpText: { id: 'explorer.stories.help.text',
    defaultMessage: '<p>This chart shows you estimated coverage of your seed query</p>',
  },
  descriptionIntro: { id: 'explorer.stories.help.title', defaultMessage: 'This is a random sample of stories.' },
  tabStory: { id: 'explorer.stories.tab', defaultMessage: 'Tab for Query' },
  downloadCSV: { id: 'explorer.attention.downloadcsv', defaultMessage: 'Download {name}' },
};

class StorySamplePreview extends React.Component {
  componentWillReceiveProps(nextProps) {
    const { urlQueryString, lastSearchTime, fetchData } = this.props;
    if (nextProps.lastSearchTime !== lastSearchTime ||
      nextProps.urlQueryString !== urlQueryString) {
    // TODO also check for name and color changes
      fetchData(nextProps.urlQueryString, nextProps.queries);
    }
  }
  downloadCsv = (query) => {
    let url = null;
    if (parseInt(query.searchId, 10) >= 0) {
      url = `/api/explorer/stories/samples.csv/${query.searchId}/${query.index}`;
    } else {
      url = `/api/explorer/stories/samples.csv/[{"q":"${query.q}"}]/${query.index}`;
    }
    window.location = url;
  }
  render() {
    const { results, queries, handleStorySelection } = this.props;
    const { formatMessage } = this.props.intl;
    let storyListContent;
    // if there is only one query, don't show tabs
    if (queries.length === 1) {
      storyListContent = (
        <StoryTable
          className="story-table"
          stories={results[0]}
          onChangeFocusSelection={handleStorySelection}
          maxTitleLength={50}
        />
      );
    } else {
      storyListContent = (
        <Tabs>
          {results.map((storySet, idx) => (
            <Tab label={queries && queries.length > idx ? queries[idx].q : 'empty'} key={idx}>
              <StoryTable
                className="story-table"
                stories={storySet}
                index={idx}
                onChangeFocusSelection={handleStorySelection}
                maxTitleLength={50}
              />
            </Tab>
          ))}
        </Tabs>
      );
    }
    return (
      <DataCard>
        <div className="actions">
          <ActionMenu>
            {queries.map((q, idx) =>
              <MenuItem
                key={idx}
                className="action-icon-menu-item"
                primaryText={formatMessage(localMessages.downloadCSV, { name: q.label })}
                rightIcon={<DownloadButton />}
                onTouchTap={() => this.downloadCsv(q)}
              />
            )}
          </ActionMenu>
        </div>
        <h2><FormattedMessage {...localMessages.title} /></h2>
        <br />
        {storyListContent}
      </DataCard>
    );
  }
}

StorySamplePreview.propTypes = {
  lastSearchTime: React.PropTypes.number.isRequired,
  queries: React.PropTypes.array.isRequired,
  // from composition
  intl: React.PropTypes.object.isRequired,
  // from dispatch
{'fraction_non_alphanumeric': 0.14322349019105013, 'fraction_numerical': 0.004615976407231696, 'mean_word_length': 2.6862003780718338, 'pattern_counts': {'":': 2, '<': 42, '<?xml version=': 0, '>': 54, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 16, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3627850', 'n_tokens_mistral': 2292, 'n_tokens_neox': 2241, 'n_words': 492}