<commit_before>'use strict';

import React, { Component } from 'react/addons';
import { Link }             from 'react-router';
import Radium               from 'radium';
import _                    from 'lodash'
import { RaisedButton, DropDownMenu }     from 'material-ui'
import Histogram            from 'app/client/components/Histogram/histogram'
import { PieChart, BarChart, AreaChart }         from 'react-d3-components'
import moment               from 'moment'

const barchartTooltip = header => (x, y0, y, total) => {
  return `${header.column_name}: count=${y}\n(${x})`
}

// @Radium
class DataTable extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedDataset: 'sales',
      datasets: [
        {payload: 'airline', text: 'Airline 2008'},
        {payload: 'sales', text: 'Sales'},
        {payload: 'claim', text: 'Claims'},
        {payload: 'smurf_smartapp', text: 'Smurf SmartApp'},
        {payload: 'smurf_aws_table', text: 'Smurf AWS'},
        {payload: 'smurf_hub', text: 'Smurf Hub'},
        {payload: 'smurf_order_details', text: 'Smurf Order Detail'}
      ]
    }

    this.changeDataset = this.changeDataset.bind(this)
  }

  changeDataset(e) {
    const selectedIndex = e.target.selectedIndex
    const selectedDataset = this.state.datasets[selectedIndex]
    if (!selectedDataset) {
      return
    }

    this.setState({selectedDataset:selectedDataset.payload})
  }

  render() {
    console.log('COMPONENT: DataTable.render()');
    const dataset = this.props.store.get('dataset')
    const {selectedDataset} = this.state
    const menuItems = this.state.datasets
    const loadDataset = this.props.loadDataset

    // const selector = <DropDownMenu menuItems={menuItems} onChange={this.changeDataset} />
    const selector = <div>
      {this.state.datasets.map(d => {
        return  <RaisedButton onClick={() => loadDataset(d.payload)}
                              label={`load ${ d.text }`}
                              style={{margin: '6px'}} />
      })}
    </div>

    return (
      <div>
        {selector}
        { this.renderMaterialUITable(dataset) }
      </div>

    );

  }

  renderMaterialUITable(dataset) {
    if (!dataset) {
      return <strong>Empty!</strong>
    }

    const {headers, rows} = dataset;
    console.log(' - render table %s x %s', headers.length, rows.length);


    //
    //   {this.renderHeaders(headers)}
    //   {this.renderSummaryRow(headers)}
    //   {this.renderProfilingRow(headers)}
    //
    return <table style={styles.table}>
      <thead style={{fontFamily: 'arial'}}>
        <tr>
          <th style={styles.cell_linenum}></th>
          {headers.map(header => this.renderHeader(header))}
        </tr>
      </thead>
      <tbody style={{fontFamily: 'monospace'}}>
        {rows.map(this.renderRow)}
      </tbody>

    </table>
  }

  renderHeader(header) {
    console.log(' - rendering column ... %c%s%c (type=%s,role=%s)', 'font-weight: bold', header.column_name, 'font-weight: normal; color: lightgray', header.type, header.role);

    const qualityBar = this.getQualityBar(header)
    const chart = this.getChart(header)
    const summary = this.getSummary(header)

    return <th style={styles.cell}>
      <div style={{height: '20px', fontSize: '18px'}}><strong>{ header.column_name }</strong></div>
      <div style={{color: 'darkgray', fontSize: '14px', float: 'right', paddingTop: '24px'}}><em>{ header.role }</em></div>
      <div style={{clear:'both'}}></div>
      { qualityBar }
      <div style={{height: '50px', marginTop: '24px'}}>
        { chart }
      </div>
      <div style={{height: '14px'}}>
        { summary }
      </div>
    </th>
  }

  getSummary(header) {
    const { summary } = header
    let   {min, max}  = summary

    const baseStyle = {
      overflow: 'hidden',
      fontFamily: 'monospace',
      fontSize: '12px'
    }

    if (summary.isEnum) {
      return <div style={baseStyle}>{ summary.categoriesCount } { summary.categoriesCount > 1 ? 'categories' : 'category'}</div>
    }

    if (!_.isNaN(max) && !_.isNaN(min)) {
      let getStyle = position => {
        return {
          width: '45%',
          textAlign: position,
          float: position,
          ...baseStyle
        }
      }

      if (header.type == 'date') {
        min = moment(min).format('MM/DD/YY')
        max = moment(max).format('MM/DD/YY')
      }

      if (header.type == 'string') {
        if (max == min && min == 1) {
          min = 'unique'
          max = ''
        } else {
          min = min + (min > 1 ? ` occur.` : ` occur.`)
          max = max + (max > 1 ? ` occur.` : ` occur.`)
        }
      }

      return <div>
        <div style={getStyle('left')}>{ min }</div>
        <div style={getStyle('right')}>{ max }</div>
      </div>
    }


  }

  getQualityBar(header) {
    const {type, role, total, summary} = header
    const {normal, missing, break_type, break_role} = summary

    const normalStyle = {
      width: `${ normal / total * 100}%`,
      backgroundColor: 'green'
    }

    const breakRoleStyle = {
      width: `${ break_role / total * 100}%`,
      backgroundColor: 'yellow'
    }

    const breakTypeStyle = {
      width: `${ break_type / total * 100}%`,
      backgroundColor: 'red'
    }

    const missingStyle = {
      width: `${ missing / total * 100}%`,
      backgroundColor: 'gray'
    }

    return (<div style={{margin: '6px 0'}}>
      <div style={{ ...styles.summary.bar, ...normalStyle }}></div>
      <div style={{ ...styles.summary.bar, ...breakRoleStyle }}></div>
      <div style={{ ...styles.summary.bar, ...breakTypeStyle }}></div>
      <div style={{ ...styles.summary.bar, ...missingStyle }}></div>
    </div>)
  }

  getChart(header) {
    var data
    const {categories, isEnum} = header.summary
    const categoriesCount = categories ? Object.keys(categories).length : false
    const chartHeight = 50
    const chartWidth  = 180

    if (isEnum) {
      data = {
        label: header.column_name,
        values: []<commit_msg>add title for qualityBar<commit_after>'use strict';

import React, { Component } from 'react/addons';
import { Link }             from 'react-router';
import Radium               from 'radium';
import _                    from 'lodash'
import { RaisedButton, DropDownMenu }     from 'material-ui'
import Histogram            from 'app/client/components/Histogram/histogram'
import { PieChart, BarChart, AreaChart }         from 'react-d3-components'
import moment               from 'moment'

const barchartTooltip = header => (x, y0, y, total) => {
  return `${header.column_name}: count=${y}\n(${x})`
}

// @Radium
class DataTable extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedDataset: 'sales',
      datasets: [
        {payload: 'airline', text: 'Airline 2008'},
        {payload: 'sales', text: 'Sales'},
        {payload: 'claim', text: 'Claims'},
        {payload: 'smurf_smartapp', text: 'Smurf SmartApp'},
        {payload: 'smurf_aws_table', text: 'Smurf AWS'},
        {payload: 'smurf_hub', text: 'Smurf Hub'},
        {payload: 'smurf_order_details', text: 'Smurf Order Detail'}
      ]
    }

    this.changeDataset = this.changeDataset.bind(this)
  }

  changeDataset(e) {
    const selectedIndex = e.target.selectedIndex
    const selectedDataset = this.state.datasets[selectedIndex]
    if (!selectedDataset) {
      return
    }

    this.setState({selectedDataset:selectedDataset.payload})
  }

  render() {
    console.log('COMPONENT: DataTable.render()');
    const dataset = this.props.store.get('dataset')
    const {selectedDataset} = this.state
    const menuItems = this.state.datasets
    const loadDataset = this.props.loadDataset

    // const selector = <DropDownMenu menuItems={menuItems} onChange={this.changeDataset} />
    const selector = <div>
      {this.state.datasets.map(d => {
        return  <RaisedButton onClick={() => loadDataset(d.payload)}
                              label={`load ${ d.text }`}
                              style={{margin: '6px'}} />
      })}
    </div>

    return (
      <div>
        {selector}
        { this.renderMaterialUITable(dataset) }
      </div>

    );

  }

  renderMaterialUITable(dataset) {
    if (!dataset) {
      return <strong>Empty!</strong>
    }

    const {headers, rows} = dataset;
    console.log(' - render table %s x %s', headers.length, rows.length);

    return <table style={styles.table}>
      <thead style={{fontFamily: 'arial'}}>
        <tr>
          <th style={styles.cell_linenum}></th>
          {headers.map(header => this.renderHeader(header))}
        </tr>
      </thead>
      <tbody style={{fontFamily: 'monospace'}}>
        {rows.map(this.renderRow)}
      </tbody>

    </table>
  }

  renderHeader(header) {
    console.log(' - rendering column ... %c%s%c (type=%s,role=%s)', 'font-weight: bold', header.column_name, 'font-weight: normal; color: lightgray', header.type, header.role);

    const qualityBar = this.getQualityBar(header)
    const chart = this.getChart(header)
    const summary = this.getSummary(header)

    return <th style={styles.cell}>
      <div style={{height: '20px', fontSize: '18px'}}><strong>{ header.column_name }</strong></div>
      <div style={{color: 'darkgray', fontSize: '14px', float: 'right', paddingTop: '24px'}}><em>{ header.role }</em></div>
      <div style={{clear:'both'}}></div>
      { qualityBar }
      <div style={{height: '50px', marginTop: '24px'}}>
        { chart }
      </div>
      <div style={{height: '14px'}}>
        { summary }
      </div>
    </th>
  }

  getSummary(header) {
    const { summary } = header
    let   {min, max}  = summary

    const baseStyle = {
      overflow: 'hidden',
      fontFamily: 'monospace',
      fontSize: '12px'
    }

    if (summary.isEnum) {
      return <div style={baseStyle}>{ summary.categoriesCount } { summary.categoriesCount > 1 ? 'categories' : 'category'}</div>
    }

    if (!_.isNaN(max) && !_.isNaN(min)) {
      let getStyle = position => {
        return {
          width: '45%',
          textAlign: position,
          float: position,
          ...baseStyle
        }
      }

      if (header.type == 'date') {
        min = moment(min).format('MM/DD/YY')
        max = moment(max).format('MM/DD/YY')
      }

      if (header.type == 'string') {
        if (max == min && min == 1) {
          min = 'unique'
          max = ''
        } else {
          min = min + (min > 1 ? ` occur.` : ` occur.`)
          max = max + (max > 1 ? ` occur.` : ` occur.`)
        }
      }

      return <div>
        <div style={getStyle('left')}>{ min }</div>
        <div style={getStyle('right')}>{ max }</div>
      </div>
    }


  }

  getQualityBar(header) {
    const {type, role, total, summary} = header
    const {normal, missing, break_type, break_role} = summary

    const normalStyle = {
      width: `${ normal / total * 100}%`,
      backgroundColor: 'green'
    }

    const breakRoleStyle = {
      width: `${ break_role / total * 100}%`,
      backgroundColor: 'yellow'
    }

    const breakTypeStyle = {
      width: `${ break_type / total * 100}%`,
      backgroundColor: 'red'
    }

    const missingStyle = {
      width: `${ missing / total * 100}%`,
      backgroundColor: 'gray'
    }

    const title = `Total: ${ total}\nCorrect: ${normal}\nSemantically incorrect: ${break_role}\nSyntactically incorrect: ${break_type}\nMissing: ${missing}`

    return (<div style={{margin: '6px 0'}} title={title}>
      <div style={{ ...styles.summary.bar, ...normalStyle }}></div>
      <div style={{ ...styles.summary.bar, ...breakRoleStyle }}></div>
      <div style={{ ...styles.summary.bar, ...breakTypeStyle }}></div>
      <div style={{ ...styles.summary.bar, ...missingStyle }}></div>
    </div>)
  }

  getChart(header) {
    var data
    const {categories, isEnum} = header.summary
    const categoriesCount = categories ? Object.keys(categories).length : false
    const chartHeight = 50
    const chartWidth  = 180

    if (isEnum) {
      data = {
        label: header.column_name,
        values: []
{'fraction_non_alphanumeric': 0.16380373140461904, 'fraction_numerical': 0.007890194789183859, 'mean_word_length': 2.376248612652608, 'pattern_counts': {'":': 0, '<': 107, '<?xml version=': 0, '>': 125, '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': '360010', 'n_tokens_mistral': 3927, 'n_tokens_neox': 3810, 'n_words': 851}