<commit_before>import React, { Component } from 'react'
import { Table, Column, InfiniteLoader } from 'react-virtualized'
import 'react-virtualized/styles.css'
import '../../styles/index.css'

const BASE_ROW_HEIGHT = 30;
const MAX_NAME_CHARS_PER_LINE = 20;

export default class All extends Component {
    state = { 
        comments: []
     }

    componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/comments')
            .then(res => res.json())
            .then(comments => this.setState({ comments }))
    }

    getRowHeight = ({ index }) => {
        const data = this.state.comments[index]
    
        const numLines = Math.ceil(data.name.length / MAX_NAME_CHARS_PER_LINE)

        // if (numLines > MAX_NAME_CHARS_PER_LINE) {
        //     return numLines * BASE_ROW_HEIGHT
        // } else {
        //     return BASE_ROW_HEIGHT
        // }
    
        return numLines * BASE_ROW_HEIGHT
      }

    getRowStyle = ({ index }) => {
        const data = this.state.comments
        if (index === -1) {
            return {
                margin: '0 auto',
                borderTop: '1px solid #efefef',
                borderBottom: '1px solid #efefef'
            }
        } else if (index === data.length) {
            return {}
        } else if (index % 2 > 0) {
            return {
                borderBottom: '1px solid #efefef',
                backgroundColor: '#eaf2ff'
            }
        } else if (index % 2 === 0) {
            return {
                borderBottom: '1px solid #efefef'
            }
        }
    }

    isRowLoaded = ({ index }) => {
        return !!this.state.comments[index]
    }

    loadMoreRows = ({ startIndex, stopIndex }) => {
        return fetch(`/data?startIndex=${startIndex}&stopIndex=${stopIndex}`)
            .then(res => res.json())
            .then(comments => this.setState({ comments }))
    }

    rowGetter = ({ index }) => {
        const data = this.state.comments
        if (data[index]) {
            return data[index]
        }
    }

    render() {
        const rowCount = this.state.comments.length
        const { cellWidth, height } = this.props

        return (
            <div className="wrapper">
                {/* <h2>{this.props.params.id}</h2> */}
                <InfiniteLoader
                    isRowLoaded={this.isRowLoaded}
                    rowCount={rowCount}
                    loadMoreRows={this.loadMoreRows}
                    threshold={10}
                >        
                {({onRowsRendered, registerChild}) =>
                <Table
                    ref={ registerChild }
                    headerHeight={50}
                    height={height}
                    width={cellWidth * 6 + 100}
                    rowCount={rowCount}
                    rowGetter={this.rowGetter}
                    rowHeight={this.getRowHeight}
                    rowStyle={this.getRowStyle}
                    onRowsRendered={onRowsRendered}
                >
                    <Column
                        label="GO term + Extension"
                        dataKey="name"
                        width={ 250 }
                    />
                    <Column
                        label="Evidence"
                        dataKey="postId"
                        width={ 100 }
                    />
                    <Column
                        label="With"
                        dataKey="email"
                        width={ 100 }
                    />
                    <Column
                        label="Reference"
                        dataKey="name"
                        width={ 250 }
                    />
                    <Column
                        label="Date"
                        dataKey="id"
                        width={ 75 }
                    />
                    <Column
                        label="Source"
                        dataKey="postId"
                        width={ 75 }
                    />
                </Table>
            }
            </InfiniteLoader>
            </div>
        )
    }
}

All.defaultProps = {
    cellWidth: 130,
    cellHeight: 90,
    height: 630<commit_msg>add white spacing in cells to show full data<commit_after>import React, { Component } from 'react'
import { Table, Column, InfiniteLoader } from 'react-virtualized'
import 'react-virtualized/styles.css'
import '../../styles/index.css'

const BASE_ROW_HEIGHT = 30
const MAX_NAME_CHARS_PER_LINE = 20

export default class All extends Component {
    state = {
        comments: []
    }
    componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/comments')
            .then(res => res.json())
            .then(comments => this.setState({ comments }))
    }
    getRowHeight = ({ index }) => {
        const data = this.state.comments[index]
        const numLines = Math.ceil(data.name.length / MAX_NAME_CHARS_PER_LINE)

        // if (numLines > MAX_NAME_CHARS_PER_LINE) {
        //     return numLines * BASE_ROW_HEIGHT
        // } else {
        //     return BASE_ROW_HEIGHT
        // }

        return numLines * BASE_ROW_HEIGHT
    }
    getRowStyle = ({ index }) => {
        const data = this.state.comments
        if (index === -1) {
            return {
                margin: '0 auto',
                borderTop: '1px solid #efefef',
                borderBottom: '1px solid #efefef'
            }
        } else if (index === data.length) {
            return {}
        } else if (index % 2 > 0) {
            return {
                borderBottom: '1px solid #efefef',
                backgroundColor: '#eaf2ff'
            }
        } else if (index % 2 === 0) {
            return {
                borderBottom: '1px solid #efefef'
            }
        }
    }
    isRowLoaded = ({ index }) => {
        return !!this.state.comments[index]
    }
    loadMoreRows = ({ startIndex, stopIndex }) => {
        return fetch(`/data?startIndex=${startIndex}&stopIndex=${stopIndex}`)
            .then(res => res.json())
            .then(comments => this.setState({ comments }))
    }
    rowGetter = ({ index }) => {
        const data = this.state.comments
        if (data[index]) {
            return data[index]
        }
    }
    cellDataGetter = ({ rowData, dataKey }) => {
        if (rowData) {
            return rowData[dataKey]
        }
    }
    descriptorRenderer = ({ rowData, cellData }) => {
        if (rowData) {
            return <div style={{ whiteSpace: 'normal' }}>{cellData}</div>
        }
    }

    render() {
        const rowCount = this.state.comments.length
        const { cellWidth, cellHeight } = this.props

        return (
            <div className="wrapper">
                {/* <h2>{this.props.params.id}</h2> */}
                <InfiniteLoader
                    isRowLoaded={this.isRowLoaded}
                    rowCount={rowCount}
                    loadMoreRows={this.loadMoreRows}
                    threshold={10}>
                    {({ onRowsRendered, registerChild }) => (
                        <Table
                            ref={registerChild}
                            headerHeight={50}
                            height={cellHeight * 7}
                            width={cellWidth * 3 + 250 + 250}
                            rowCount={rowCount}
                            rowGetter={this.rowGetter}
                            rowHeight={this.getRowHeight}
                            rowStyle={this.getRowStyle}
                            onRowsRendered={onRowsRendered}>
                            <Column
                                label="GO term + Extension"
                                dataKey="name"
                                width={250}
                                cellDataGetter={this.attributeGetter}
                                cellRenderer={this.descriptorRenderer}
                            />
                            <Column
                                label="Evidence"
                                dataKey="postId"
                                width={100}
                            />
                            <Column
                                label="With"
                                dataKey="email"
                                width={150}
                                cellDataGetter={this.attributeGetter}
                                cellRenderer={this.descriptorRenderer}
                            />
                            <Column
                                label="Reference"
                                dataKey="name"
                                width={250}
                                cellDataGetter={this.attributeGetter}
                                cellRenderer={this.descriptorRenderer}
                            />
                            <Column label="Date" dataKey="id" width={75} />
                            <Column
                                label="Source"
                                dataKey="postId"
                                width={75}
                            />
                        </Table>
                    )}
                </InfiniteLoader>
            </div>
        )
    }
}

All.defaultProps = {
    cellWidth: 130,
    cellHeight: 90,
    height: 630
{'fraction_non_alphanumeric': 0.10448080419206501, 'fraction_numerical': 0.010907924286172602, 'mean_word_length': 1.0481822163819536, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 59, 'https://': 2, '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': '2939744', 'n_tokens_mistral': 2424, 'n_tokens_neox': 2254, 'n_words': 428}