<commit_before>import React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter';
// hacky for now until we run tests in browser
if (process.env.NODE_ENV !== 'test') {
  require('highlight.js/styles/docco.css');
}

const onXClick = (e, close) => {
  e.preventDefault();
  close();
};

const DisplayTest = ({ getTest, shouldShowTest, onKeyPress, hideTest }) => {
  if (!shouldShowTest()) {
    return <noscript />;
  }
  const style = {
    position: 'absolute',
    width: 500,
    height: 600,
    right: 25,
    bottom: 80,
    backgroundColor: 'gainsboro',
    color: 'black',
    boxShadow: '2px 2px 5px #888888',
    overflowY: 'auto'
  };
  const xStyle = {
    float: 'right',
    fontSize: 22,
    fontWeight: 700,
    marginRight: 5,
    cursor: 'pointer'
  };
  return (
    <div style={style}>
      <span style={xStyle} onClick={e => onXClick(e, hideTest)}>X</span>
      <div contentEditable={true} onKeyUp={onKeyPress} style={{outline: 'none'}}>
        <pre>
          <code>
            <SyntaxHighlighter language="javascript">
              {getTest()}
            </SyntaxHighlighter>
          </code>
        </pre>
      </div>
    </div>
  );<commit_msg>add zINdex to test display<commit_after>import React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter';
// hacky for now until we run tests in browser
if (process.env.NODE_ENV !== 'test') {
  require('highlight.js/styles/docco.css');
}

const onXClick = (e, close) => {
  e.preventDefault();
  close();
};

const DisplayTest = ({ getTest, shouldShowTest, onKeyPress, hideTest }) => {
  if (!shouldShowTest()) {
    return <noscript />;
  }
  const style = {
    position: 'absolute',
    width: 500,
    height: 600,
    right: 25,
    bottom: 80,
    backgroundColor: 'gainsboro',
    color: 'black',
    boxShadow: '2px 2px 5px #888888',
    overflowY: 'auto',
    zIndex: 99
  };
  const xStyle = {
    float: 'right',
    fontSize: 22,
    fontWeight: 700,
    marginRight: 5,
    cursor: 'pointer'
  };
  return (
    <div style={style}>
      <span style={xStyle} onClick={e => onXClick(e, hideTest)}>X</span>
      <div contentEditable={true} onKeyUp={onKeyPress} style={{outline: 'none'}}>
        <pre>
          <code>
            <SyntaxHighlighter language="javascript">
              {getTest()}
            </SyntaxHighlighter>
          </code>
        </pre>
      </div>
    </div>
  );
{'fraction_non_alphanumeric': 0.156262918561389, 'fraction_numerical': 0.02149648615130219, 'mean_word_length': 2.705972434915773, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 35, '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': '3175897', 'n_tokens_mistral': 855, 'n_tokens_neox': 810, 'n_words': 196}