<commit_before>import React from 'react'
import Button from 'react-bootstrap/lib/Button'
import DropdownButton from 'react-bootstrap/lib/DropdownButton'
import MenuItem from 'react-bootstrap/lib/MenuItem'
import Input from 'react-bootstrap/lib/Input'
import Glyphicon from 'react-bootstrap/lib/Glyphicon'

class RouteControls extends React.Component {
    constructor(props) {
        super(props)
    }

    handleSelect = (event, id) => {
        this.props.ParkingLotActions.setActiveParkingLot(id)
    }

    handleRouteReset = () => {
        this.props.ParkingLotActions.setActiveParkingLot()
        this.props.ReportActions.setReportRouteDistance()
    }

    componentWillUnmount() {
        this.props.ParkingLotActions.setActiveParkingLot()
        this.props.ReportActions.setReportRouteDistance()
    }

    render() {
        var parkingLotItems = []
        if (this.props.ParkingLots.parkinglots) {
            parkingLotItems = this.props.ParkingLots
                .parkinglots.map(parkinglot => {
                    return <MenuItem key={parkinglot.id} eventKey={parkinglot.id}
                                >{parkinglot.name}</MenuItem>
                })
        }

        let distance = this.props.Reports.reportRouteDistance ?
                        (this.props.Reports.reportRouteDistance / 1000)
                        .toFixed(1) : 0

        return (
            <div>
            <Input>
                <DropdownButton title={'Starting Parking Lot'}
                    onSelect={this.handleSelect}
                    id={'parkingSelect'}>
                    {parkingLotItems}
                </DropdownButton>
                <Button onClick={this.handleRouteReset}>
                    <Glyphicon glyph='refresh'/> Start Again</Button>
                <span>{distance + ' KM'}</span>
            </Input>
            </div>
        )
    }
}
export default RouteControls<commit_msg>Styling changes for RouteControls.<commit_after>import React from 'react'
import Button from 'react-bootstrap/lib/Button'
import DropdownButton from 'react-bootstrap/lib/DropdownButton'
import MenuItem from 'react-bootstrap/lib/MenuItem'
import Input from 'react-bootstrap/lib/Input'
import Glyphicon from 'react-bootstrap/lib/Glyphicon'
import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar'
import ButtonGroup from 'react-bootstrap/lib/ButtonGroup'
import Fade from 'react-bootstrap/lib/Fade'
import Well from 'react-bootstrap/lib/Well'

class RouteControls extends React.Component {
    constructor(props) {
        super(props)
        this.state = { open: true }
    }

    handleSelect = (event, id) => {
        this.props.ParkingLotActions.setActiveParkingLot(id)
        this.setState({ open: false })
    }

    handleRouteReset = () => {
        this.props.ParkingLotActions.setActiveParkingLot()
        this.props.ReportActions.setReportRouteDistance()
    }

    componentWillUnmount() {
        this.props.ParkingLotActions.setActiveParkingLot()
        this.props.ReportActions.setReportRouteDistance()
    }

    render() {
        var parkingLotItems = []
        if (this.props.ParkingLots.parkinglots) {
            parkingLotItems = this.props.ParkingLots
                .parkinglots.map(parkinglot => {
                    return <MenuItem key={parkinglot.id} eventKey={parkinglot.id}
                                >{parkinglot.name}</MenuItem>
                })
        }

        let distance = this.props.Reports.reportRouteDistance ?
                        (this.props.Reports.reportRouteDistance / 1000)
                        .toFixed(1) : 0

        return (
            <div>
            <Fade in={this.state.open} unmountOnExit={true}>
                <Well>
                    Select a starting Parking Lot and then follow the directions
                    on the map to trace your ski route.
                </Well>
            </Fade>
            <Input>
                <div className={'text-center'}>
                <DropdownButton title={'Parking Lot'}
                    onSelect={this.handleSelect}
                    id={'parkingSelect'}>
                    {parkingLotItems}
                </DropdownButton>
                <Button onClick={this.handleRouteReset}>
                    <Glyphicon glyph='refresh'/> Start Again</Button>
                </div>
            </Input>
            <Input>
                <div className={'text-center'}>
                    <span>{distance + ' KM'}</span>
                </div>
            </Input>
            </div>
        )
    }
}
export default RouteControls
{'fraction_non_alphanumeric': 0.10280984534959704, 'fraction_numerical': 0.002613809627532128, 'mean_word_length': 1.8771929824561404, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 45, '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': '795663', 'n_tokens_mistral': 1289, 'n_tokens_neox': 1218, 'n_words': 223}