<commit_before>import React from 'react';
import JSONTree from './JSONTree';

const styles = {
  wrapper: {
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderTopStyle: 'solid',
    borderBottomStyle: 'solid'
  },
  actionBar: {
    paddingTop: 4,
    paddingBottom: 4,
    paddingLeft: 10,
    marginBottom: 1
  },
  payload: {
    backgroundColor: '#252c33',
    paddingLeft: 15
  }
};

export default class LogMonitorAction extends React.Component {

  renderPayload(payload) {
    return (
      <div style={styles.payload}>
        { Object.keys(payload).length > 0 ? <JSONTree theme={this.props.theme} keyName={'payload'} data={payload}/> : '' }
      </div>
    );
  }

  render() {
    const { type, ...payload } = this.props.action;
    return (
      <div style={{
        ...styles.wrapper,
        backgroundColor: this.props.theme.base01,
        borderTopColor: this.props.theme.base00,
        borderBottomColor: this.props.theme.base02,
        ...this.props.style
      }} onClick={this.props.onClick}>
        <div style={styles.actionBar}>{type}</div>
        {!this.props.collapsed ? '' : ''}
      </div>
    );
  }
}<commit_msg>fixed typo that forced payload never to appear<commit_after>import React from 'react';
import JSONTree from './JSONTree';

const styles = {
  wrapper: {
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderTopStyle: 'solid',
    borderBottomStyle: 'solid'
  },
  actionBar: {
    paddingTop: 4,
    paddingBottom: 4,
    paddingLeft: 10,
    marginBottom: 1
  },
  payload: {
    paddingLeft: 15
  }
};

export default class LogMonitorAction extends React.Component {

  renderPayload(payload) {
    return (
      <div style={{
        ...styles.payload,
        backgroundColor: this.props.theme.base01
      }}>
        { Object.keys(payload).length > 0 ? <JSONTree theme={this.props.theme} keyName={'payload'} data={payload}/> : '' }
      </div>
    );
  }

  render() {
    const { type, ...payload } = this.props.action;
    return (
      <div style={{
        ...styles.wrapper,
        backgroundColor: this.props.theme.base02,
        borderTopColor: this.props.theme.base00,
        borderBottomColor: this.props.theme.base03,
        ...this.props.style
      }} onClick={this.props.onClick}>
        <div style={styles.actionBar}>{type}</div>
        {!this.props.collapsed ? this.renderPayload(payload) : ''}
      </div>
    );
  }
}
{'fraction_non_alphanumeric': 0.1475341898052217, 'fraction_numerical': 0.016162453377538334, 'mean_word_length': 2.5657311669128506, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 19, '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': '4606976', 'n_tokens_mistral': 783, 'n_tokens_neox': 752, 'n_words': 151}