<commit_before>import PropTypes from 'prop-types';
import React from 'react';
import { injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import withHelp from '../../common/hocs/HelpfulContainer';
import FocusSelector from './FocusSelector';

const localMessages = {
  title: { id: 'subtopic.title', defaultMessage: 'Subtopic' },
  helpTitle: { id: 'subtopic.help.title', defaultMessage: 'About Subtopic' },
  helpText: { id: 'subtopic.help.text',
    defaultMessage: '<p>subtopic info {this.props.selectedFocus}</p>',
  },
  close: { id: 'subtopic.close', defaultMessage: 'Close' },
};

class FocusSelectorContainer extends React.Component {
  componentWillMount() {
    const { setCustomContent, selectedFocus } = this.props;
    if (setCustomContent && selectedFocus) {
      setCustomContent(
        <div>
          <label>{selectedFocus.name}</label>
          <label>{selectedFocus.description}</label>
          <label>{selectedFocus.query}</label>
        </div><commit_msg>#1559 UI updates<commit_after>import PropTypes from 'prop-types';
import React from 'react';
import { injectIntl, FormattedHTMLMessage } from 'react-intl';
import { connect } from 'react-redux';
import withHelp from '../../common/hocs/HelpfulContainer';
import FocusSelector from './FocusSelector';

const localMessages = {
  set: { id: 'focus.set', defaultMessage: '<b>Set</b>: {set}' },
  type: { id: 'focus.type', defaultMessage: '<b>Set Description</b>: {type}' },
  name: { id: 'focus.name', defaultMessage: '<b>Definition Name</b>: {name}' },
  description: { id: 'focus.description', defaultMessage: '<b>Description</b>: {description}' },
};

class FocusSelectorContainer extends React.Component {
  componentWillMount() {
    const { setCustomContent, selectedFocus } = this.props;
    if (setCustomContent && selectedFocus) {
      setCustomContent(
        <div>
          <FormattedHTMLMessage {...localMessages.set} values={{ set: selectedFocus.focalSet.name }} />
          <br />
          <FormattedHTMLMessage {...localMessages.type} values={{ type: selectedFocus.focalSet.description }} />
          <br />
          <FormattedHTMLMessage {...localMessages.name} values={{ name: selectedFocus.name }} />
          <br />
          <FormattedHTMLMessage {...localMessages.description} values={{ description: selectedFocus.description }} />
        </div>
{'fraction_non_alphanumeric': 0.1554993678887484, 'fraction_numerical': 0.001685630004214075, 'mean_word_length': 3.8647540983606556, 'pattern_counts': {'":': 0, '<': 30, '<?xml version=': 0, '>': 30, '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': '4041016', 'n_tokens_mistral': 668, 'n_tokens_neox': 672, 'n_words': 159}