<commit_before>/**
 * @license
 * The MIT License (MIT)
 * Copyright 2015 Government of Canada
 *
 * @author
 * <NAME>
 *
 * @exports SubtractionDetail
 */

import React from "react";
import PropTypes from "prop-types";
import Numeral from "numeral";
import { connect } from "react-redux";
import { LinkContainer } from "react-router-bootstrap";
import { ListGroup, ListGroupItem, Row, Col, Badge, Table } from "react-bootstrap";

import { getSubtraction } from "../actions";
import { Button, Icon } from "virtool/js/components/Base";

const calculateGC = (nucleotides) => {
    return Numeral(1 - nucleotides.a - nucleotides.t - nucleotides.n).format("0.000")
};

class SubtractionDetail extends React.Component {

    componentDidMount () {
        this.props.onGet(this.props.match.params.subtractionId);
    }

    render () {

        if (this.props.detail === null) {
            return <div />;
        }

        const data = this.props.detail;

        let linkedSamples;

        if (data.linked_samples.length) {
            const linkedSampleComponents = data.linked_samples.map(sample =>
                <Col key={sample.id} className="linked-sample-button" xs={6} sm={4} md={3} lg={2}>
                    <LinkContainer  to={`/samples/${sample.id}`}>
                        <Button  block>
                            {sample.name}
                        </Button>
                    </LinkContainer>
                </Col>
            );

            linkedSamples = (
                <Row>
                    {linkedSampleComponents}
                </Row>
            );
        } else {
            linkedSamples = (
                <ListGroup>
                    <ListGroupItem className="text-center">
                        <Icon name="info" /> No linked samples found.
                    </ListGroupItem>
                </ListGroup>
            );
        }

        return (
            <div>
                <h3 className="view-header">
                    <strong>{data.id}</strong>
                </h3>

                <Table bordered>
                    <tbody>
                        <tr>
                            <th>File</th>
                            <td>{data.file.name}</td>
                        </tr>

                        <tr>
                            <th>GC Estimate</th>
                            <td>{calculateGC(data.gc)}</td>
                        </tr>
                    </tbody>
                </Table>

                <h4 className="section-header">
                    <strong>Linked Samples</strong> <Badge>{data.linked_samples.length}</Badge>
                </h4>

                {linkedSamples}
            </div>
        )
    }
}
<commit_msg>Fix error on subtraction detail render<commit_after>/**
 * @license
 * The MIT License (MIT)
 * Copyright 2015 Government of Canada
 *
 * @author
 * <NAME>
 *
 * @exports SubtractionDetail
 */

import React from "react";
import PropTypes from "prop-types";
import Numeral from "numeral";
import { connect } from "react-redux";
import { LinkContainer } from "react-router-bootstrap";
import { ScaleLoader } from "halogen";
import { ListGroup, ListGroupItem, Row, Col, Badge, Table } from "react-bootstrap";

import { getSubtraction } from "../actions";
import { Button, Icon } from "../../components/Base";

const calculateGC = (nucleotides) => {
    return Numeral(1 - nucleotides.a - nucleotides.t - nucleotides.n).format("0.000")
};

class SubtractionDetail extends React.Component {

    componentDidMount () {
        this.props.onGet(this.props.match.params.subtractionId);
    }

    render () {

        if (this.props.detail === null) {
            return (
                <div className="text-center" style={{marginTop: "220px"}}>
                    <ScaleLoader color="#3c8786" />
                </div>
            );
        }

        const data = this.props.detail;

        let linkedSamples;

        if (data.linked_samples.length) {
            const linkedSampleComponents = data.linked_samples.map(sample =>
                <Col key={sample.id} className="linked-sample-button" xs={6} sm={4} md={3} lg={2}>
                    <LinkContainer  to={`/samples/${sample.id}`}>
                        <Button  block>
                            {sample.name}
                        </Button>
                    </LinkContainer>
                </Col>
            );

            linkedSamples = (
                <Row>
                    {linkedSampleComponents}
                </Row>
            );
        } else {
            linkedSamples = (
                <ListGroup>
                    <ListGroupItem className="text-center">
                        <Icon name="info" /> No linked samples found.
                    </ListGroupItem>
                </ListGroup>
            );
        }

        return (
            <div>
                <h3 className="view-header">
                    <strong>{data.id}</strong>
                </h3>

                <Table bordered>
                    <tbody>
                        <tr>
                            <th>File</th>
                            <td>{data.file.id}</td>
                        </tr>

                        <tr>
                            <th>GC Estimate</th>
                            <td>{calculateGC(data.nucleotides)}</td>
                        </tr>
                    </tbody>
                </Table>

                <h4 className="section-header">
                    <strong>Linked Samples</strong> <Badge>{data.linked_samples.length}</Badge>
                </h4>

                {linkedSamples}
            </div>
        )
    }
}

{'fraction_non_alphanumeric': 0.12323943661971831, 'fraction_numerical': 0.007394366197183098, 'mean_word_length': 1.2742193755004003, 'pattern_counts': {'":': 0, '<': 91, '<?xml version=': 0, '>': 95, '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': '2971128', 'n_tokens_mistral': 1565, 'n_tokens_neox': 1431, 'n_words': 301}