<commit_before>import React, { Component } from 'react';
import Immutable, { Map } from 'immutable';

import SelectField from 'material-ui/lib/select-field';
import MenuItem from 'material-ui/lib/menus/menu-item';
import DropDownMenu from 'material-ui/lib/DropDownMenu';
import CircularProgress from 'material-ui/lib/circular-progress';

import Chart from './Chart';
import Slider from './Slider';

import API from '../services/api';
import FIPS from '../services/data';

function* rangeGen(from, to, step = 1) {
  for (let i = from; i <= to; i += step) {
    yield i;
  }
}

const settings = {
    minYear: 1980,
    maxYear: 2040,
}

export default class Main extends Component {
    
    constructor(props) {
        super(props);
        
        this.fips1 = this.fips1.bind(this);
        this.fips2 = this.fips2.bind(this);
        this.getAPI = this.getAPI.bind(this);
        this.onSliderChange = this.onSliderChange.bind(this);
        this.onAnimate = this.onAnimate.bind(this);
        
        
        this.FIPSData = FIPS
        .map( (c,i) => <MenuItem value={c.FIPS} key={i} primaryText={c.name} /> );
        
        this.state = {
            year: (new Date()).getFullYear(),
            fips1: 'NI',
            fips2: 'QA',
            fipsData1: Map(),
            fipsData2: Map(),
            interval: -1,
            wating1: false,
            wating2: false,
        };
        
    }
    
    fips1(event, index, value) {
        this.setState({ fips1: value});
        this.getAPI('wating1', 'fipsData1', FIPS[index].FIPS);
    }
    
    fips2(event, index, value) {
        this.setState({ fips2: value});
        this.getAPI('wating2', 'fipsData2', FIPS[index].FIPS);
    }
    
    onSliderChange(value) {
        this.setState({ year: value});
    }
    
    Loading(active) {
        if(active) {
            return <CircularProgress hidden={false} size={0.5} />
        }
        else {
            false;
        }
    }
    
    render() {
        
        //TODO Year
        const { fips1, fips2 } = this.state;
        const year = this.state.year;
        
        console.log("asfd", year, fips1, fips2);
        
        const max = Math.max(this.state.fipsData1.get('maxYear'), this.state.fipsData2.get('maxYear'));
        
        console.log("State", this.state);
        
        return (
            <div>
            
                <div>
                    <Slider
                        animate={this.state.interval===-1}
                        year={year}
                        min={settings.minYear}
                        max={settings.maxYear}
                        onChange={this.onSliderChange}
                        onAnimate={ this.onAnimate }
                    />
                </div>
                
                <div className="row">
                    <div className="col-xs-12 col-sm-6">
                        <SelectField value={this.state.fips1} onChange={ this.fips1 }>
                            {this.FIPSData}
                        </SelectField>
                        {this.Loading(this.state.wating1)}
                        <Chart year={year} country={this.state.fipsData1} scale={0.1*this.state.fipsData1.get('maxYear')} />
                    </div>
                    
                    <div className="col-xs-12 col-sm-6">
                        <SelectField value={this.state.fips2} onChange={ this.fips2 } >
                            {this.FIPSData}
                        </SelectField>
                        {this.Loading(this.state.wating2)}
                        <Chart year={year}  country={this.state.fipsData2} scale={0.1*this.state.fipsData2.get('maxYear')}/>
                    </div><commit_msg>Improvments<commit_after>import React, { Component } from 'react';
import Immutable, { Map } from 'immutable';

import SelectField from 'material-ui/lib/select-field';
import MenuItem from 'material-ui/lib/menus/menu-item';
import DropDownMenu from 'material-ui/lib/DropDownMenu';
import CircularProgress from 'material-ui/lib/circular-progress';

import Chart from './Chart';
import Slider from './Slider';

import API from '../services/api';
import FIPS from '../services/data';

function* rangeGen(from, to, step = 1) {
  for (let i = from; i <= to; i += step) {
    yield i;
  }
}

const settings = {
    minYear: 1980,
    maxYear: 2040,
}

export default class Main extends Component {
    
    constructor(props) {
        super(props);
        
        this.fips1 = this.fips1.bind(this);
        this.fips2 = this.fips2.bind(this);
        this.getAPI = this.getAPI.bind(this);
        this.onSliderChange = this.onSliderChange.bind(this);
        this.onAnimate = this.onAnimate.bind(this);
        
        
        this.FIPSData = FIPS
        .map( (c,i) => <MenuItem value={c.FIPS} key={i} primaryText={c.name} /> );
        
        this.state = {
            year: (new Date()).getFullYear(),
            fips1: 'NI',
            fips2: 'QA',
            fipsData1: Map(),
            fipsData2: Map(),
            interval: -1,
            wating1: false,
            wating2: false,
        };
        
    }
    
    fips1(event, index, value) {
        this.setState({ fips1: value});
        this.getAPI('wating1', 'fipsData1', FIPS[index].FIPS);
    }
    
    fips2(event, index, value) {
        this.setState({ fips2: value});
        this.getAPI('wating2', 'fipsData2', FIPS[index].FIPS);
    }
    
    onSliderChange(value) {
        this.setState({ year: value});
    }
    
    Loading(active) {
        if(active) {
            return <CircularProgress hidden={false} size={0.5} />
        }
        else {
            false;
        }
    }
    
    render() {
        
        //TODO Year
        const { fips1, fips2 } = this.state;
        const year = this.state.year;
        
        console.log("asfd", year, fips1, fips2);
        
        const max = Math.max(this.state.fipsData1.get('maxYear'), this.state.fipsData2.get('maxYear'));
        
        console.log("State", this.state);
        
        return (
            <div>
            
                <div>
                    <Slider
                        animate={this.state.interval===-1}
                        year={year}
                        min={settings.minYear}
                        max={settings.maxYear}
                        onChange={this.onSliderChange}
                        onAnimate={ this.onAnimate }
                    />
                </div>
                
                <div className="row">
                    <div className="col-xs-12 col-md-6">
                        <SelectField value={this.state.fips1} onChange={ this.fips1 }>
                            {this.FIPSData}
                        </SelectField>
                        {this.Loading(this.state.wating1)}
                        <Chart year={year} country={this.state.fipsData1} scale={0.1*this.state.fipsData1.get('maxYear')} />
                    </div>
                    
                    <div className="col-xs-12 col-md-6">
                        <SelectField value={this.state.fips2} onChange={ this.fips2 } >
                            {this.FIPSData}
                        </SelectField>
                        {this.Loading(this.state.wating2)}
                        <Chart year={year}  country={this.state.fipsData2} scale={0.1*this.state.fipsData2.get('maxYear')}/>
                    </div>
{'fraction_non_alphanumeric': 0.13324396782841824, 'fraction_numerical': 0.015281501340482574, 'mean_word_length': 1.4567006914718472, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 39, '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': '1170035', 'n_tokens_mistral': 2264, 'n_tokens_neox': 2215, 'n_words': 401}