<commit_before>import React, { Component } from 'react';
import { Button, ButtonGroup, ButtonToolbar, Container, Form, FormGroup, Label, Input, Row, Col } from 'reactstrap';
import { connect } from 'react-redux'

import ServiceFactory from 'services/ServiceFactory'
import JobMonitorModal from 'containers/job/JobMonitorModal'

class DataExportPage extends Component {

    constructor(props) {
        super(props)

        this.state = {
            exportFormat: null,
            jobStatusModalOpen: false,
            csvDataExportJobId: null
        }

        this.handleExportButtonClick = this.handleExportButtonClick.bind(this)
        this.handleCsvDataExportModalOkButtonClick = this.handleCsvDataExportModalOkButtonClick.bind(this)
    }

    handleExportButtonClick() {
        switch (this.state.exportFormat) {
            case 'CSV':
                const survey = this.props.survey
                const surveyId = survey.id
                const rootEntityId = survey.schema.defaultRootEntity.id
                const entityId = null
                const step = 'ENTRY'
                ServiceFactory.recordService.startCSVDataExport(surveyId, rootEntityId, entityId, step).then(job => {
                    this.setState({
                        jobStatusModalOpen: true,
                        csvDataExportJobId: job.id
                    })
                })
                break;
            case 'BACKUP':
                break;
        }
    }

    handleCsvDataExportModalOkButtonClick(job) {
        const survey = this.props.survey
        const surveyId = survey.id
        ServiceFactory.recordService.downloadCSVDataExportResult(surveyId)
        this.setState({jobStatusModalOpen: false})
    }
    
    render() {
        if (!this.props.survey) {
            return <div>Select survey first</div>
        }
        const jobStatusMonitor = this.state.jobStatusModalOpen ? <JobMonitorModal 
            title="Exporting CSV data"
            jobId={this.state.csvDataExportJobId} open={true}
            okButtonLabel={'Download'}
            handleOkButtonClick={this.handleCsvDataExportModalOkButtonClick}
            /> : null
        return (
            <Form>
                <FormGroup row>
                    <Col sm={2}>
                        <Label for="exportFormat">Export Format</Label>
                    </Col>
                    <Col sm={4}>
                        <Input type="radio" value="CSV" name="exportFormat" id="exportFormatCSVRadioButton"
                            checked={this.state.exportFormat === 'CSV'}
                            onChange={(event) => this.setState({ ...this.state, exportFormat: event.target.value })} />
                        <Label for="exportFormatCSVRadioButton">CSV</Label>
                    </Col>
                    <Col sm={4}>
                        <Input type="radio" value="BACKUP" name="exportFormat" id="exportFormatBackupRadioButton"
                            checked={this.state.exportFormat === 'BACKUP'}
                            onChange={(event) => this.setState({ ...this.state, exportFormat: event.target.value })} />
                        <Label for="exportFormatBackupRadioButton">Backup (.collect-data)</Label>
                    </Col>
                </FormGroup>
                <Row>
                    <Col sm={4} colSpan={4}>
                        <Button onClick={this.handleExportButtonClick}>Export</Button>
                    </Col>
                </Row>
                {jobStatusMonitor}
            </Form>
        )
    }
}

const mapStateToProps = state => {
    const { survey } = state.preferredSurvey

    return { survey: survey }
}

export default connect(mapStateToProps)(DataExportPage);<commit_msg>Layout improvements<commit_after>import React, { Component } from 'react';
import { Button, ButtonGroup, ButtonToolbar, Container, Form, FormGroup, Label, Input, Row, Col } from 'reactstrap';
import { connect } from 'react-redux'

import ServiceFactory from 'services/ServiceFactory'
import JobMonitorModal from 'containers/job/JobMonitorModal'

class DataExportPage extends Component {

    constructor(props) {
        super(props)

        this.state = {
            exportFormat: null,
            jobStatusModalOpen: false,
            csvDataExportJobId: null
        }

        this.handleExportButtonClick = this.handleExportButtonClick.bind(this)
        this.handleCsvDataExportModalOkButtonClick = this.handleCsvDataExportModalOkButtonClick.bind(this)
    }

    handleExportButtonClick() {
        switch (this.state.exportFormat) {
            case 'CSV':
                const survey = this.props.survey
                const surveyId = survey.id
                const rootEntityId = survey.schema.defaultRootEntity.id
                const entityId = null
                const step = 'ENTRY'
                ServiceFactory.recordService.startCSVDataExport(surveyId, rootEntityId, entityId, step).then(job => {
                    this.setState({
                        jobStatusModalOpen: true,
                        csvDataExportJobId: job.id
                    })
                })
                break;
            case 'BACKUP':
                break;
        }
    }

    handleCsvDataExportModalOkButtonClick(job) {
        const survey = this.props.survey
        const surveyId = survey.id
        ServiceFactory.recordService.downloadCSVDataExportResult(surveyId)
        this.setState({jobStatusModalOpen: false})
    }
    
    render() {
        if (!this.props.survey) {
            return <div>Select survey first</div>
        }
        const jobStatusMonitor = this.state.jobStatusModalOpen ? <JobMonitorModal 
            title="Exporting CSV data"
            jobId={this.state.csvDataExportJobId} open={true}
            okButtonLabel={'Download'}
            handleOkButtonClick={this.handleCsvDataExportModalOkButtonClick}
            /> : null
        return (
            <Form>
                <FormGroup tag="fieldset">
                    <legend>Export Format</legend>
                    <FormGroup check>
                        <Label check>
                            <Input type="radio" value="CSV" name="exportFormat" id="exportFormatCSVRadioButton"
                                checked={this.state.exportFormat === 'CSV'}
                                onChange={(event) => this.setState({ ...this.state, exportFormat: event.target.value })} />{' '}
                            CSV
                        </Label>
                    </FormGroup>
                    <FormGroup check>
                        <Label check>
                            <Input type="radio" value="BACKUP" name="exportFormat" id="exportFormatBackupRadioButton"
                                checked={this.state.exportFormat === 'BACKUP'}
                                onChange={(event) => this.setState({ ...this.state, exportFormat: event.target.value })} />{' '}
                            Backup (.collect-data)
                        </Label>
                    </FormGroup>
                </FormGroup>
                <Row>
                    <Col sm={4} colSpan={4}>
                        <Button onClick={this.handleExportButtonClick}>Export</Button>
                    </Col>
                </Row>
                {jobStatusMonitor}
            </Form>
        )
    }
}

const mapStateToProps = state => {
    const { survey } = state.preferredSurvey

    return { survey: survey }
}

export default connect(mapStateToProps)(DataExportPage);
{'fraction_non_alphanumeric': 0.09858596537597462, 'fraction_numerical': 0.0009250693802035153, 'mean_word_length': 1.6638507567757832, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 63, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6544794', 'n_tokens_mistral': 1917, 'n_tokens_neox': 1846, 'n_words': 354}