<commit_before>// @flow
import React, { Component } from 'react';
import { connect } from 'react-redux';
// import hljs from 'highlightjs';
import { Link } from 'react-router-dom';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import List from 'react-virtualized/dist/commonjs/List';

import { send } from '../../../sockets';
import * as actions from '../actions';
import 'highlightjs/styles/default.css';
import 'highlightjs/styles/atom-one-dark.css';
import './style.css';

class Component_ extends Component {
  code: any;
  header: any;
  state: {
    add: string
  };

  constructor(props) {
    super(props);
    this.state = {
      add: ''
    };
  }

  changeByArrows(e: any) {
    const current = this.props.timelines.find(t => t.pid === this.props.pid);
    const currentTimeline = current ? current.timeline : [];
    if (e.which === 40 && this.props.msg < currentTimeline.length - 1) {
      //down
      e.preventDefault();
      this.props.setCurrentMsg(this.props.msg + 1);
    } else if (e.which === 38 && this.props.msg > 0) {
      //up
      e.preventDefault();
      this.props.setCurrentMsg(this.props.msg - 1);
    }
  }

  componentDidMount() {
    document.body &&
      document.body.addEventListener(
        'keydown',
        this.changeByArrows.bind(this),
        false
      );

    const pid = this.props.match.params.pid;
    if (pid) return this.props.setCurrentPid(pid);

    if (this.props.pid === null && this.props.timelines.length)
      return this.props.setCurrentPid(this.props.timelines[0].pid);
  }

  componentWillUnmount() {
    document.body &&
      document.body.removeEventListener(
        'keydown',
        this.changeByArrows.bind(this),
        false
      );
  }

  // this can cause perf issues
  componentDidUpdate() {
    // this.code && hljs.highlightBlock(this.code);
  }

  addPid(event: any) {
    if (event.which === 13) {
      send('epl_timeline_EPL', JSON.stringify(['add', this.state.add.trim()]));
      this.props.pushTimelinePid(this.state.add);
      this.setState({ add: '' });
    }
  }

  handlePidClick(pid: string) {
    this.props.setCurrentPid(pid);
  }

  handlePidRemove(pid: string) {
    send('epl_timeline_EPL', JSON.stringify(['remove', pid]));
    this.props.removePid(pid);
  }

  render() {
    const current = this.props.timelines.find(t => t.pid === this.props.pid);
    const currentTimeline = current ? current.timeline : [];
    const currentState = currentTimeline[this.props.msg];
    return (
      <div className="Timeline">
        <ul className="Dashboard-navigation nav nav-tabs">
          <li className="nav-item">
            <input
              placeholder="Pid to add"
              value={this.state.add}
              onKeyDown={this.addPid.bind(this)}
              onChange={event => this.setState({ add: event.target.value })}
            />
          </li>
          {this.props.timelines.map(({ pid, timeline }) => (
            <li
              key={pid}
              className={`nav-item ${pid === this.props.pid ? 'Dashboard-active' : ''}`}
              onClick={this.handlePidClick.bind(this, pid)}
            >
              <Link to={`/timeline/${pid}`}>
                <span className="badge">
                  {timeline.length < 1000 ? timeline.length : '999+'}
                </span>
                {pid}
                <i
                  className="fa fa-times"
                  onClick={() => this.handlePidRemove(pid)}
                />
              </Link>
            </li>
          ))}
        </ul>

        {currentState
          ? <div className="pane">
              <div className="messages">
                <AutoSizer>
                  {({ height, width }) => (
                    <List
                      scrollToIndex={this.props.msg}
                      width={width}
                      height={height}
                      rowCount={currentTimeline.length}
                      rowHeight={35}
                      rowRenderer={({ index, key, style }) => {
                        const t = currentTimeline[index];

                        return (
                          <div
                            style={style}
                            key={key}
                            className={`message ${index === this.props.msg ? 'active' : ''}`}
                            onClick={() => this.props.setCurrentMsg(index)}
                          >
                            <span className="content">{t.message}</span>
                            <span className="index">
                              {index}
                            </span>
                          </div>
                        );
                      }}
                    />
                  )}
                </AutoSizer>
              </div>
              <div className="state">
                <h3 ref={node => (this.header = node)}>
                  {currentTimeline[this.props.msg].message +
                    currentTimeline[this.props.msg].message +
                    currentTimeline[this.props.msg].message +
                    currentTimeline[this.props.msg].message +
                    currentTimeline[this.props.msg].message}
                </h3>
                <pre
                  style={{
                    // 30px because thats header margin
                    height: `calc(100% - ${this.header ? this.header.clientHeight : '0'}px - 30px)`,
                    textAlign: currentState ? 'left' : 'center'
                  }}
                >
                  <code className="erlang" ref={node => (this.code = node)}>
                    {Array.from({ length: 100 }).reduce(
                      (acc, a) => acc + currentState.state + '\n',
                      ''
                    )}
                  </code>
                </pre>
              </div>
            </div>
          : <div
              className="pane"
              style={{ textAlign: 'center', marginTop: '20px' }}
            ><commit_msg>Remove dummy message and state<commit_after>// @flow
import React, { Component } from 'react';
import { connect } from 'react-redux';
// import hljs from 'highlightjs';
import { Link } from 'react-router-dom';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import List from 'react-virtualized/dist/commonjs/List';

import { send } from '../../../sockets';
import * as actions from '../actions';
import 'highlightjs/styles/default.css';
import 'highlightjs/styles/atom-one-dark.css';
import './style.css';

class Component_ extends Component {
  code: any;
  header: any;
  state: {
    add: string
  };

  constructor(props) {
    super(props);
    this.state = {
      add: ''
    };
  }

  changeByArrows(e: any) {
    const current = this.props.timelines.find(t => t.pid === this.props.pid);
    const currentTimeline = current ? current.timeline : [];
    if (e.which === 40 && this.props.msg < currentTimeline.length - 1) {
      //down
      e.preventDefault();
      this.props.setCurrentMsg(this.props.msg + 1);
    } else if (e.which === 38 && this.props.msg > 0) {
      //up
      e.preventDefault();
      this.props.setCurrentMsg(this.props.msg - 1);
    }
  }

  componentDidMount() {
    document.body &&
      document.body.addEventListener(
        'keydown',
        this.changeByArrows.bind(this),
        false
      );

    const pid = this.props.match.params.pid;
    if (pid) return this.props.setCurrentPid(pid);

    if (this.props.pid === null && this.props.timelines.length)
      return this.props.setCurrentPid(this.props.timelines[0].pid);
  }

  componentWillUnmount() {
    document.body &&
      document.body.removeEventListener(
        'keydown',
        this.changeByArrows.bind(this),
        false
      );
  }

  // this can cause perf issues
  componentDidUpdate() {
    // this.code && hljs.highlightBlock(this.code);
  }

  addPid(event: any) {
    if (event.which === 13) {
      send('epl_timeline_EPL', JSON.stringify(['add', this.state.add.trim()]));
      this.props.pushTimelinePid(this.state.add);
      this.setState({ add: '' });
    }
  }

  handlePidClick(pid: string) {
    this.props.setCurrentPid(pid);
  }

  handlePidRemove(pid: string) {
    send('epl_timeline_EPL', JSON.stringify(['remove', pid]));
    this.props.removePid(pid);
  }

  render() {
    const current = this.props.timelines.find(t => t.pid === this.props.pid);
    const currentTimeline = current ? current.timeline : [];
    const currentState = currentTimeline[this.props.msg];
    return (
      <div className="Timeline">
        <ul className="Dashboard-navigation nav nav-tabs">
          <li className="nav-item">
            <input
              placeholder="Pid to add"
              value={this.state.add}
              onKeyDown={this.addPid.bind(this)}
              onChange={event => this.setState({ add: event.target.value })}
            />
          </li>
          {this.props.timelines.map(({ pid, timeline }) => (
            <li
              key={pid}
              className={`nav-item ${pid === this.props.pid ? 'Dashboard-active' : ''}`}
              onClick={this.handlePidClick.bind(this, pid)}
            >
              <Link to={`/timeline/${pid}`}>
                <span className="badge">
                  {timeline.length < 1000 ? timeline.length : '999+'}
                </span>
                {pid}
                <i
                  className="fa fa-times"
                  onClick={() => this.handlePidRemove(pid)}
                />
              </Link>
            </li>
          ))}
        </ul>

        {currentState
          ? <div className="pane">
              <div className="messages">
                <AutoSizer>
                  {({ height, width }) => (
                    <List
                      scrollToIndex={this.props.msg}
                      width={width}
                      height={height}
                      rowCount={currentTimeline.length}
                      rowHeight={35}
                      rowRenderer={({ index, key, style }) => {
                        const t = currentTimeline[index];

                        return (
                          <div
                            style={style}
                            key={key}
                            className={`message ${index === this.props.msg ? 'active' : ''}`}
                            onClick={() => this.props.setCurrentMsg(index)}
                          >
                            <span className="content">{t.message}</span>
                            <span className="index">
                              {index}
                            </span>
                          </div>
                        );
                      }}
                    />
                  )}
                </AutoSizer>
              </div>
              <div className="state">
                <h3 ref={node => (this.header = node)}>
                  {currentTimeline[this.props.msg].message}
                </h3>
                <pre
                  style={{
                    // 30px because thats header margin
                    height: `calc(100% - ${this.header ? this.header.clientHeight : '0'}px - 30px)`,
                    textAlign: currentState ? 'left' : 'center'
                  }}
                >
                  <code className="erlang" ref={node => (this.code = node)}>
                    {currentState.state}
                  </code>
                </pre>
              </div>
            </div>
          : <div
              className="pane"
              style={{ textAlign: 'center', marginTop: '20px' }}
            >
{'fraction_non_alphanumeric': 0.14061165214419954, 'fraction_numerical': 0.00572356056723048, 'mean_word_length': 1.4425203421656583, 'pattern_counts': {'":': 0, '<': 77, '<?xml version=': 0, '>': 96, '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': '3013355', 'n_tokens_mistral': 3331, 'n_tokens_neox': 3192, 'n_words': 586}