<commit_before>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { grey200 } from 'material-ui/styles/colors';

import WideComments from './WideComments';
import AddCommentIcon from './AddCommentIcon';
import { AnnotationProp } from '../../propTypes';

const styles = {
  layout: {
    display: 'flex',
    justifyContent: 'flex-end',
  },
  editorContainer: {
    borderStyle: 'solid',
    borderWidth: 1,
    borderColor: grey200,
    borderRadius: 5,
    overflow: 'auto',
  },
  editor: {
    borderStyle: 'solid',
    borderWidth: 1,
    borderColor: grey200,
    borderRadius: 5,
    padding: 5,
    width: '100%',
    overflow: 'hidden',
  },
  editorLine: {
    height: 20,
    paddingLeft: 5,
    whiteSpace: 'nowrap',
  },
  editorLineNumber: {
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'space-between',
    borderRightWidth: 1,
    borderRightStyle: 'solid',
    borderRightColor: grey200,
    padding: '0 5px',
  },
};

export default class WideEditor extends Component {
  renderLineNumberColumn(lineNumber) {
    const { expandLine } = this.props;
    return (
      <div style={styles.editorLineNumber}>
        {lineNumber}
        <AddCommentIcon onClick={() => expandLine(lineNumber)} />
      </div>
    );
  }

  renderComments() {
    const { answerId, fileId, expanded, annotations, expandLine, collapseLine } = this.props;
    return (
      <WideComments
        answerId={answerId}
        fileId={fileId}
        annotations={annotations}
        expanded={expanded}
        expandLine={lineNumber => expandLine(lineNumber)}
        collapseLine={lineNumber => collapseLine(lineNumber)}
      />
    );
  }

  renderEditor() {
    /* eslint-disable react/no-array-index-key */
    /* eslint-disable react/no-danger */
    const { content } = this.props;
    return (
      <div style={styles.editorContainer}>
        <table className="codehilite" style={styles.editor}>
          <tbody>
            <tr>
              <td style={{ width: 75 }}>
                {content.map((line, index) =>
                  <div key={`${index}-${line}`}>
                    {this.renderLineNumberColumn(index + 1)}
                  </div>
                )}
              </td>
              <td>
                {content.map((line, index) => (
                  <div
                    key={`${index}-${line}`}
                    style={styles.editorLine}
                    dangerouslySetInnerHTML={{ __html: line }}
                  />
                ))}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    );
    /* eslint-enable react/no-danger */
    /* eslint-enable react/no-array-index-key */
  }

  render() {
    return (
      <div>
        <table>
          <tbody>
            <tr>
              <td style={{ width: '50%' }}>{this.renderComments()}</td>
              <td style={{ width: '50%' }}>{this.renderEditor()}</td>
            </tr>
          </tbody>
        </table>
      </div><commit_msg>Adjust annotation and editor width to 40:60<commit_after>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { grey200 } from 'material-ui/styles/colors';

import WideComments from './WideComments';
import AddCommentIcon from './AddCommentIcon';
import { AnnotationProp } from '../../propTypes';

const styles = {
  layout: {
    display: 'flex',
    justifyContent: 'flex-end',
  },
  editorContainer: {
    borderStyle: 'solid',
    borderWidth: 1,
    borderColor: grey200,
    borderRadius: 5,
    overflow: 'auto',
  },
  editor: {
    borderStyle: 'solid',
    borderWidth: 1,
    borderColor: grey200,
    borderRadius: 5,
    padding: 5,
    width: '100%',
    overflow: 'hidden',
  },
  editorLine: {
    height: 20,
    paddingLeft: 5,
    whiteSpace: 'nowrap',
  },
  editorLineNumber: {
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'space-between',
    borderRightWidth: 1,
    borderRightStyle: 'solid',
    borderRightColor: grey200,
    padding: '0 5px',
  },
};

export default class WideEditor extends Component {
  renderLineNumberColumn(lineNumber) {
    const { expandLine } = this.props;
    return (
      <div style={styles.editorLineNumber}>
        {lineNumber}
        <AddCommentIcon onClick={() => expandLine(lineNumber)} />
      </div>
    );
  }

  renderComments() {
    const { answerId, fileId, expanded, annotations, expandLine, collapseLine } = this.props;
    return (
      <WideComments
        answerId={answerId}
        fileId={fileId}
        annotations={annotations}
        expanded={expanded}
        expandLine={lineNumber => expandLine(lineNumber)}
        collapseLine={lineNumber => collapseLine(lineNumber)}
      />
    );
  }

  renderEditor() {
    /* eslint-disable react/no-array-index-key */
    /* eslint-disable react/no-danger */
    const { content } = this.props;
    return (
      <div style={styles.editorContainer}>
        <table className="codehilite" style={styles.editor}>
          <tbody>
            <tr>
              <td style={{ width: 75 }}>
                {content.map((line, index) =>
                  <div key={`${index}-${line}`}>
                    {this.renderLineNumberColumn(index + 1)}
                  </div>
                )}
              </td>
              <td>
                {content.map((line, index) => (
                  <div
                    key={`${index}-${line}`}
                    style={styles.editorLine}
                    dangerouslySetInnerHTML={{ __html: line }}
                  />
                ))}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    );
    /* eslint-enable react/no-danger */
    /* eslint-enable react/no-array-index-key */
  }

  render() {
    return (
      <div>
        <table>
          <tbody>
            <tr>
              <td style={{ width: '40%' }}>{this.renderComments()}</td>
              <td style={{ width: '60%' }}>{this.renderEditor()}</td>
            </tr>
          </tbody>
        </table>
      </div>
{'fraction_non_alphanumeric': 0.14704918032786884, 'fraction_numerical': 0.011475409836065573, 'mean_word_length': 1.9149546106067845, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 75, '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': '6350393', 'n_tokens_mistral': 1870, 'n_tokens_neox': 1781, 'n_words': 373}