<commit_before>'use strict';

import React from 'react';
import DOM from 'react-dom';
import io from 'socket.io-client';

import guid from './guid';

const App = React.createClass({
    getInitialState () {
        return {
            entries: [],
            displayedEntries: [],
            selected: null
        };
    },

    componentDidMount () {
        const socket = io();
        socket.on('newLogEntry', (newEntry) => {
            console.log(newEntry);
            this.setState(oldState => {
                if (!oldState.selected && oldState.displayedEntries.length >= 50) {
                    oldState.displayedEntries.shift();
                }

                const entryWithGuid = {
                    ...newEntry,
                    guid: guid()
                };

                return {
                    entries: [...oldState.entries, entryWithGuid],
                    displayedEntries: [...oldState.displayedEntries, entryWithGuid]
                };
            });
        });
    },

    getNamespaces () {
        const namespaces = this.state.entries.map(entry => entry.namespace);
        return namespaces.filter((value, index, array) => {
            return array.indexOf(value) === index;
        });
    },

    renderTabs (namespaces) {
        return (
            <ul className="nav nav-tabs" role="tablist">
                {namespaces.map((namespace, index) => (
                    <li
                        className={index === 0 ? 'active' : ''}
                        key={namespace}
                        role="presentation"
                    >
                        <a
                            data-toggle="tab"
                            href={`#${namespace}`}
                            role="tab"
                        >
                            {namespace}
                        </a>
                    </li>
                ))}
            </ul>
        );
    },

    renderTabPanes (namespaces) {
        return (
            <div className="tab-content">
                {name}
                {namespaces.map((namespace, index) => (
                    <div
                        className={index === 0 ? 'tab-pane active' : 'tab-pane'}
                        id={namespace}
                        key={namespace}
                        role="tabpanel"
                    >
                        {this.renderLog(namespace)}
                    </div>
                ))}
            </div>
        );
    },

    toggleSelected (logEntry) {
        if (!this.state.selected) {
            this.setState({
                selected: logEntry
            });

            return;
        }

        this.setState({
            selected: null
        });
    },

    renderLog () {
        return (
            <div className="panel-group">
                {this.state.displayedEntries.length}<br />
                <button onClick={this.loadPrevious}>previous</button>
                <button onClick={this.reset}>reset to real time</button>
                {this.state.displayedEntries.map(logEntry => (
                    <div className="panel panel-default">
                        <div className="panel-heading">
                            <h4 className="panel-title">
                                <a
                                    data-target={`#${logEntry.guid}`}
                                    data-toggle="collapse"
                                    href="#"
                                    onClick={this.toggleSelected.bind(null, logEntry)}
                                >
                                    {logEntry.timestamp} {logEntry.type}
                                </a>
                            </h4>
                        </div>
                        <div className="panel-collapse collapse" id={`${logEntry.guid}`}>
                            <div className="panel-body">
                                <pre>{JSON.stringify(logEntry, null, 4)}</pre>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        );
    },

    loadPrevious () {
        this.setState(oldState => {
            const firstDisplayedIndex = oldState.entries.indexOf(oldState.displayedEntries[0]);
            const firstPreviousIndex = firstDisplayedIndex - 50 > 0 ? firstDisplayedIndex - 50 : 0;
            const previousCount = firstDisplayedIndex - 50 > 0 ? 50 : firstDisplayedIndex - 50;
            const previousEntries = oldState.entries.slice(firstPreviousIndex, previousCount);

            return {
                displayedEntries: [...previousEntries, oldState.displayedEntries]
            };
        });<commit_msg>fixed loading previous results<commit_after>'use strict';

import React from 'react';
import DOM from 'react-dom';
import io from 'socket.io-client';

import guid from './guid';

const App = React.createClass({
    getInitialState () {
        return {
            entries: [],
            displayedEntries: [],
            selected: null
        };
    },

    componentDidMount () {
        const socket = io();
        socket.on('newLogEntry', (newEntry) => {
            console.log(newEntry);
            this.setState(oldState => {
                if (!oldState.selected && oldState.displayedEntries.length >= 50) {
                    oldState.displayedEntries.shift();
                }

                const entryWithGuid = {
                    ...newEntry,
                    guid: guid()
                };

                return {
                    entries: [...oldState.entries, entryWithGuid],
                    displayedEntries: [...oldState.displayedEntries, entryWithGuid]
                };
            });
        });
    },

    getNamespaces () {
        const namespaces = this.state.entries.map(entry => entry.namespace);
        return namespaces.filter((value, index, array) => {
            return array.indexOf(value) === index;
        });
    },

    renderTabs (namespaces) {
        return (
            <ul className="nav nav-tabs" role="tablist">
                {namespaces.map((namespace, index) => (
                    <li
                        className={index === 0 ? 'active' : ''}
                        key={namespace}
                        role="presentation"
                    >
                        <a
                            data-toggle="tab"
                            href={`#${namespace}`}
                            role="tab"
                        >
                            {namespace}
                        </a>
                    </li>
                ))}
            </ul>
        );
    },

    renderTabPanes (namespaces) {
        return (
            <div className="tab-content">
                {name}
                {namespaces.map((namespace, index) => (
                    <div
                        className={index === 0 ? 'tab-pane active' : 'tab-pane'}
                        id={namespace}
                        key={namespace}
                        role="tabpanel"
                    >
                        {this.renderLog(namespace)}
                    </div>
                ))}
            </div>
        );
    },

    toggleSelected (logEntry) {
        if (!this.state.selected) {
            this.setState({
                selected: logEntry
            });

            return;
        }

        this.setState({
            selected: null
        });
    },

    renderLog () {
        return (
            <div className="panel-group">
                {this.state.displayedEntries.length}<br />
                <button onClick={this.loadPrevious}>previous</button>
                <button onClick={this.reset}>reset to real time</button>
                {this.state.displayedEntries.map(logEntry => (
                    <div className="panel panel-default">
                        <div className="panel-heading">
                            <h4 className="panel-title">
                                <a
                                    data-target={`#${logEntry.guid}`}
                                    data-toggle="collapse"
                                    href="#"
                                    onClick={this.toggleSelected.bind(null, logEntry)}
                                >
                                    {logEntry.timestamp} {logEntry.type}
                                </a>
                            </h4>
                        </div>
                        <div className="panel-collapse collapse" id={`${logEntry.guid}`}>
                            <div className="panel-body">
                                <pre>{JSON.stringify(logEntry, null, 4)}</pre>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        );
    },

    loadPrevious () {
        this.setState(oldState => {
            const firstDisplayedIndex = oldState.entries.indexOf(oldState.displayedEntries[0]);
            const displayedElements = oldState.entries.length - firstDisplayedIndex;

            return {
                displayedEntries: oldState.entries.slice(-(displayedElements + 50))
            };
        });
{'fraction_non_alphanumeric': 0.11441179636207083, 'fraction_numerical': 0.0033365622645570984, 'mean_word_length': 1.0121264616717194, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 85, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 10, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '781672', 'n_tokens_mistral': 2225, 'n_tokens_neox': 2090, 'n_words': 369}