<commit_before>import './fileViewer.scss';
import React, { Component } from 'react';
import { string, object, bool } from 'prop-types';
import { BaseEntityQuery } from 'utils/genny';
import prettierBytes from 'prettier-bytes';
import { IconSmall } from 'views/components';

class FileViewer extends Component {

    static defaultProps = {
        displayColumn: false,
    }

    static propTypes = {
        className: string,
        style: object,
        root: string,
        attribute: string,
        displayColumn: bool,
        items: string,
    }

    state = {
    }

    getIconByFileType = fileType => {
        if (fileType.includes('image'))
            return 'image';

        if (fileType.includes('video'))
            return 'videocam';

        if (fileType.includes('audio'))
            return 'audiotrack';

        if (fileType.includes('pdf'))
            return 'picture_as_pdf';

        return 'insert_drive_file';
    }

    isValidFile = file => {
        if (!file.type) {
            return false;
        }

        if (!file.id) {
            return false;
        }

        if (!file.uploadURL) {
            return false;
        }

        if (!file.name) {
            return false;
        }

        if (!file.uploaded) {
            return false;
        }

        if (!file.size) {
            return false;
        }

        return true;
    }

    render() {

        const { className, root, attribute, style, displayColumn, items } = this.props;
        const componentStyle = {
            ...style,
            flexDirection: displayColumn ? 'column' : 'row'
        };

        let filesArray = null;
        let validFiles = [];

        if (
            root != null &&
            typeof root === 'string' &&
            root.length > 0 &&
            attribute != null &&
            typeof attribute === 'string' &&
            attribute.length > 0
        ) {
            const attributeObject = BaseEntityQuery.getBaseEntityAttribute(root, attribute);
            const attributeValue = attributeObject ? attributeObject.value : null;


            if(attributeValue != null && attributeValue.startsWith('[')) {
                filesArray = JSON.parse(attributeValue);
            }

            validFiles = filesArray && filesArray.length ? filesArray.filter(file => this.isValidFile(file)) : [];
        }

        if (
            items != null &&
            typeof items === 'string'
        ) {
            if(items != null && items.startsWith('[')) {
                filesArray = JSON.parse(items);
            }

            validFiles = filesArray && filesArray.length ? filesArray.filter(file => this.isValidFile(file)) : [];
        }

        return (
            <div className={`file-viewer ${className}`} style={componentStyle}>
                {
                    validFiles &&
                    validFiles.length > 0 && (
                        validFiles.map(file => {
                            return (
                                <a
                                    className="file-tile"
                                    key={ file.id }
                                    href={ file.uploadURL }
                                    target="_blank"
                                    rel="noopener"
                                    style={{
                                        flexBasis: displayColumn ? '80px' : '200px',
                                    }}
                                >
                                    {
                                        (
                                            file.type.includes('image') &&
                                            (
                                                !!file.preview ||
                                                !!file.uploadURL
                                            )
                                        ) ? (
                                            <img
                                            className="file-image"
                                                src={ file.uploadURL || file.preview }
                                                role="presentation"
                                            />
                                        ) : (
                                            <div className="file-preview">
                                                <IconSmall
                                                    className="file-icon"
                                                    name={this.getIconByFileType(file.type)}
                                                />
                                            </div>
                                        )
                                    }

                                    <div className="file-details">
                                        <span className="file-name" >{ file.name }</span>
                                        <span className="file-size">{ prettierBytes(file.size) }</span>
                                    </div>
                                </a>
                            );
                        })
                    )
                }

            </div>
        );
    }
}

export default FileViewer;
<commit_msg>added compatibility for pdf uploaded from backend stored as an image URL<commit_after>import './fileViewer.scss';
import React, { Component } from 'react';
import { string, object, bool } from 'prop-types';
import { BaseEntityQuery } from 'utils/genny';
import prettierBytes from 'prettier-bytes';
import { IconSmall } from 'views/components';

class FileViewer extends Component {

    static defaultProps = {
        displayColumn: false,
    }

    static propTypes = {
        className: string,
        style: object,
        root: string,
        attribute: string,
        displayColumn: bool,
        items: string,
    }

    state = {
    }

    getIconByFileType = fileType => {
        if (fileType.includes('image'))
            return 'image';

        if (fileType.includes('video'))
            return 'videocam';

        if (fileType.includes('audio'))
            return 'audiotrack';

        if (fileType.includes('pdf'))
            return 'picture_as_pdf';

        return 'insert_drive_file';
    }

    isValidFile = file => {
        if (!file.type) {
            return false;
        }

        if (!file.id) {
            return false;
        }

        if (!file.uploadURL) {
            return false;
        }

        if (!file.name) {
            return false;
        }

        if (!file.uploaded) {
            return false;
        }

        if (!file.size) {
            return false;
        }

        return true;
    }

    render() {

        const { className, root, attribute, style, displayColumn, items } = this.props;
        const componentStyle = {
            ...style,
            flexDirection: displayColumn ? 'column' : 'row'
        };

        let filesArray = null;
        let validFiles = [];

        if (
            root != null &&
            typeof root === 'string' &&
            root.length > 0 &&
            attribute != null &&
            typeof attribute === 'string' &&
            attribute.length > 0
        ) {
            const attributeObject = BaseEntityQuery.getBaseEntityAttribute(root, attribute);
            const attributeValue = attributeObject ? attributeObject.value : null;


            if(attributeValue != null && attributeValue.startsWith('[')) {
                filesArray = JSON.parse(attributeValue);
            }

            validFiles = filesArray && filesArray.length ? filesArray.filter(file => this.isValidFile(file)) : [];
        }

        if (
            items != null &&
            typeof items === 'string'
        ) {
            if(items != null && items.startsWith('[')) {
                filesArray = JSON.parse(items);
            }
            else {
                ///single file as string, from backend PDF upload
                filesArray = [
                    {
                        type: '.pdf',
                        id: items,
                        uploadURL: items,
                        name: items,
                        uploaded: items,
                        size: '-',
                    }
                ];
            }

            validFiles = filesArray && filesArray.length ? filesArray.filter(file => this.isValidFile(file)) : [];
            
        }

        return (
            <div className={`file-viewer ${className}`} style={componentStyle}>
                {
                    validFiles &&
                    validFiles.length > 0 && (
                        validFiles.map(file => {
                            return (
                                <a
                                    className="file-tile"
                                    key={ file.id }
                                    href={ file.uploadURL }
                                    target="_blank"
                                    rel="noopener"
                                    style={{
                                        flexBasis: displayColumn ? '80px' : '200px',
                                    }}
                                >
                                    {
                                        (
                                            file.type.includes('image') &&
                                            (
                                                !!file.preview ||
                                                !!file.uploadURL
                                            )
                                        ) ? (
                                            <img
                                            className="file-image"
                                                src={ file.uploadURL || file.preview }
                                                role="presentation"
                                            />
                                        ) : (
                                            <div className="file-preview">
                                                <IconSmall
                                                    className="file-icon"
                                                    name={this.getIconByFileType(file.type)}
                                                />
                                            </div>
                                        )
                                    }

                                    <div className="file-details">
                                        <span className="file-name" >{ file.name }</span>
                                        <span className="file-size">{ prettierBytes(file.size) }</span>
                                    </div>
                                </a>
                            );
                        })
                    )
                }

            </div>
        );
    }
}

export default FileViewer;

{'fraction_non_alphanumeric': 0.09351024460691398, 'fraction_numerical': 0.0014441736618828415, 'mean_word_length': 0.8060309698451508, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 102, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4890034', 'n_tokens_mistral': 2309, 'n_tokens_neox': 2184, 'n_words': 474}