<commit_before>import React from 'react';
import {TextEncoder} from 'text-encoding';
import base64 from 'base64-js';
import bindAll from 'lodash/bindAll';
import classnames from 'classnames';

import PreviewFrame from './PreviewFrame';
import generatePreview from '../util/generatePreview';

class Preview extends React.Component {
  constructor() {
    super();
    bindAll(this, '_handlePopOutClick');
  }

  _generateDocument(nonBlockingAlerts = false) {
    if (!this.props.isValid) {
      return '';
    }

    const project = this.props.project;

    if (project === undefined) {
      return '';
    }

    return generatePreview(
      project,
      {
        targetBaseTop: true,
        propagateErrorsToParent: true,
        breakLoops: true,
        nonBlockingAlerts,
      }
    ).documentElement.outerHTML;
  }

  _handlePopOutClick() {
    this._popOut();
  }

  _popOut() {
    const doc = this._generateDocument();
    const uint8array = new TextEncoder('utf-8').encode(doc);
    const base64encoded = base64.fromByteArray(uint8array);
    const url = `data:text/html;charset=utf-8;base64,${base64encoded}`;
    window.open(url, 'preview');
  }

  render() {
    return (
      <div
        className={classnames(
          'preview',
          'output-item',
          {'u-hidden': !this.props.isValid}
        )}
      ><commit_msg>Minimal modification to pop-out preview<commit_after>import React from 'react';
import {TextEncoder} from 'text-encoding';
import base64 from 'base64-js';
import bindAll from 'lodash/bindAll';
import classnames from 'classnames';

import PreviewFrame from './PreviewFrame';
import generatePreview from '../util/generatePreview';

class Preview extends React.Component {
  constructor() {
    super();
    bindAll(this, '_handlePopOutClick');
  }

  _generateDocument(isLivePreview = false) {
    if (!this.props.isValid) {
      return '';
    }

    const project = this.props.project;

    if (project === undefined) {
      return '';
    }

    return generatePreview(
      project,
      {
        targetBaseTop: isLivePreview,
        propagateErrorsToParent: isLivePreview,
        breakLoops: isLivePreview,
        nonBlockingAlerts: isLivePreview,
      }
    ).documentElement.outerHTML;
  }

  _handlePopOutClick() {
    this._popOut();
  }

  _popOut() {
    const doc = this._generateDocument();
    const uint8array = new TextEncoder('utf-8').encode(doc);
    const base64encoded = base64.fromByteArray(uint8array);
    const url = `data:text/html;charset=utf-8;base64,${base64encoded}`;
    window.open(url, 'preview');
  }

  render() {
    return (
      <div
        className={classnames(
          'preview',
          'output-item',
          {'u-hidden': !this.props.isValid}
        )}
      >
{'fraction_non_alphanumeric': 0.12626262626262627, 'fraction_numerical': 0.011544011544011544, 'mean_word_length': 2.9111424541607898, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, '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': '6784762', 'n_tokens_mistral': 854, 'n_tokens_neox': 826, 'n_words': 175}