<commit_before>import React from "react";
import { connect } from "react-redux";
import { push } from "react-router-redux";
import { find } from "lodash-es";
import { RelativeTime, ProgressBar } from "../../base";
import { Panel, Table, Row, ListGroup } from "react-bootstrap";

const ReferenceHeader = ({ name, createdAt, user }) => (
    <div style={{ marginLeft: "5px" }}>
        <Row>
            <strong>{name}</strong>
        </Row>
        <Row>
            <small>
                Created <RelativeTime time={createdAt} /> by {user}
            </small>
        </Row>
    </div>
);

const ReferenceMetadata = ({ data_type, organism }) => (
    <Table bordered>
        <tbody>
            <tr>
                <th>Data Type</th>
                <td className="text-capitalize">
                    {data_type}
                </td>
            </tr>
            <tr>
                <th>Organism</th>
                <td className="text-capitalize">
                    {organism || "unknown"}
                </td>
            </tr>
        </tbody>
    </Table>
);

const ReferenceItem = (props) => {

    let progress = 0;

    if (props.process && props.processes.length) {
        progress = find(props.processes, ["id", props.process.id]).progress;
        progress *= 100;
    }

    const barStyle = { backgroundColor: "#f5f5f5" };

    return (
        <Panel className="reference-item" onClick={props.onClick}>
            <Panel.Heading>
                <ReferenceHeader name={props.name} createdAt={props.created_at} user={props.user.id} />
            </Panel.Heading>

            <ReferenceMetadata {...props} />
            <ListGroup>
                <ProgressBar
                    bsStyle={progress === 100 ? "success" : "warning"}
                    now={progress}
                    style={barStyle}
                    affixed
                />
            </ListGroup>
        </Panel>
    );
};

const mapStateToProps = state => ({
    processes: state.processes.documents
});

const mapDispatchToProps = (dispatch, ownProps) => ({
    onClick: () => {
        dispatch(push(`/refs/${ownProps.id}`));
    }
});

export default connect(mapStateToProps, mapDispatchToProps)(ReferenceItem);<commit_msg>Add ref card creation description<commit_after>import React from "react";
import { connect } from "react-redux";
import { push } from "react-router-redux";
import { find, get } from "lodash-es";
import { RelativeTime, ProgressBar } from "../../base";
import { Panel, Table, Row, ListGroup } from "react-bootstrap";

const ReferenceHeader = ({ name, createdAt, user }) => (
    <div style={{ marginLeft: "5px" }}>
        <Row>
            <strong>{name}</strong>
        </Row>
        <Row>
            <small>
                Created <RelativeTime time={createdAt} /> by {user}
            </small>
        </Row>
    </div>
);

const ReferenceMetadata = ({ data_type, organism, origin }) => (
    <Table bordered>
        <tbody>
            <tr>
                <th>Data Type</th>
                <td className="text-capitalize">
                    {data_type}
                </td>
            </tr>
            <tr>
                <th>Organism</th>
                <td className="text-capitalize">
                    {organism || "unknown"}
                </td>
            </tr>
            <tr>
                <th>{origin.method}</th>
                <td>
                    {origin.fileName}
                </td>
            </tr>
        </tbody>
    </Table>
);

const getOrigin = (props) => {
    let origin;

    if (get(props, "imported_from", null)) {
        origin = {
            method: "Imported from file",
            fileName: props.imported_from.name
        };
    } else if (get(props, "cloned_from", null)) {
        origin = {
            method: "Cloned from",
            fileName: props.cloned_from.name
        };
    } else if (get(props, "remote_from", null)) {
        origin = {
            method: "Remote update from",
            fileName: props.remote_from.name
        };
    } else {
        origin = {
            method: "Created",
            fileName: "No File"
        };
    }

    return origin;
};

const ReferenceItem = (props) => {

    const origin = getOrigin(props);

    let progress = 0;

    if (props.process && props.processes.length) {
        progress = find(props.processes, ["id", props.process.id]).progress;
        progress *= 100;
    }

    const barStyle = { backgroundColor: "#f5f5f5" };

    return (
        <Panel className="reference-item" onClick={props.onClick}>
            <Panel.Heading>
                <ReferenceHeader name={props.name} createdAt={props.created_at} user={props.user.id} />
            </Panel.Heading>

            <ReferenceMetadata {...props} origin={origin} />
            <ListGroup>
                <ProgressBar
                    bsStyle={progress === 100 ? "success" : "warning"}
                    now={progress}
                    style={barStyle}
                    affixed
                />
            </ListGroup>
        </Panel>
    );
};

const mapStateToProps = state => ({
    processes: state.processes.documents
});

const mapDispatchToProps = (dispatch, ownProps) => ({
    onClick: () => {
        dispatch(push(`/refs/${ownProps.id}`));
    }
});

export default connect(mapStateToProps, mapDispatchToProps)(ReferenceItem);
{'fraction_non_alphanumeric': 0.14494902687673772, 'fraction_numerical': 0.004077849860982391, 'mean_word_length': 1.6594381468703796, 'pattern_counts': {'":': 0, '<': 81, '<?xml version=': 0, '>': 94, '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': '5007031', 'n_tokens_mistral': 1557, 'n_tokens_neox': 1494, 'n_words': 327}