<commit_before>// @flow
import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import styles from './Content.sass';
import cx from 'classnames';
import PackageCard from 'components/PackageCard/PackageCard';
//import jsonfile from 'jsonfile';
import parseJson from 'parse-json';
//import cp from 'child_process';
import npmManager from 'utils/npmManager';
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';

import { Spin } from 'antd';
import { Checkbox } from 'antd';
import { Table, Icon, Switch, Radio, Form } from 'antd';
import { Doughnut } from 'react-chartjs-2';

@observer
class Content extends Component {

  @observable loading = true;

  // get dependencies() {
  //   console.log(this.state.dependencies);
  //   return this.state.dependencies.map(item => {
  //     return <PackageCard {...{item}} key={item._id} />;
  //   });
  // }

  componentDidMount() {

  }

  // componentDidUpdate(nextProps) {
  //   // Start async loading
  //   console.log(this.props.packagesStore.loading, nextProps.packagesStore.loading);
  //   if (!this.props.packagesStore.loading && nextProps.packagesStore.loading) {
  //     this.fetchMessage = message.loading('Fetch installed packages info...', 0);
  //     return;
  //   }
  //
  //   // Stop async loading
  //   if (this.props.packagesStore.loading && !nextProps.packagesStore.loading) {
  //     this.fetchMessage();
  //   }
  // }

  get tableColumns() {
    return [{
      title: 'NAME',
      dataIndex: 'name',
      key: 'name',
      width: 150,
      //onFilter: (value, record) => record.name.indexOf(value) === 0,
      sorter: (a, b) => {
        return a.name.toLowerCase().localeCompare(b.name.toLowerCase())
      }
    }, {
      title: 'CURRENT VERSION',
      dataIndex: 'current',
      key: 'current',
      width: 70,
    }, {
      title: 'WANTED VERSION',
      dataIndex: 'wanted',
      key: 'wanted',
      width: 70,
    }, {
      title: 'LATEST VERSION',
      dataIndex: 'latest',
      key: 'latest',
      width: 70,
    }, {
      title: 'ENVIRONMENT',
      dataIndex: 'environment',
      key: 'environment',
      width: 70,
    }, {
      title: 'ACTIONS',
      key: 'actions',
      width: 70,
      render: (text, record) => (
        <span>
          <a href="#" className="ant-dropdown-link">
            More actions <Icon type="down" />
          </a>
        </span>
      ),
    }];
  }

  get tableSettings() {
    return {
      bordered: true,
      loading: this.props.packagesStore.loading,
      pagination: false,
      size: 'small',
      showHeader: true,
      rowSelection: {},
      scroll: undefined,
      locale: {
        emptyText: 'No Data'
      }
    }
  }

  @observable showOnlyDevDependencies = false;

  render() {
    const { packagesStore } = this.props;

    const selectedPackage = packagesStore.selectedPackage;

    const selectedPackageName = selectedPackage.name || '-';
    const selectedPackageDescription = selectedPackage.description || '-';
    const selectedPackageLicense = selectedPackage.license || '-';
    const selectedPackageHomepage = selectedPackage.homepage || '-';
    const selectedPackageAuthor = (selectedPackage.author && `${selectedPackage.author.name} (${selectedPackage.author.email})`) || '-';
    const selectedPackageRepository = (selectedPackage.repository && selectedPackage.repository.url) || '-';
    const selectedPackageIssues = (selectedPackage.bugs && selectedPackage.bugs.url) || '-';

    const data = [];

    packagesStore.packages.map(item => {
      data.push({
        key: item._id,
        name: item.name,
        current: item.version,
        wanted: item.version,
        latest: item.version,
        environment: `dev`
      });
    });


    const chartData = {
      labels: ["Dev dependencies", "Non dev dependencies"],
      datasets: [{
        //label: '# of Votes',
        data: [12, 19],
        // backgroundColor: [
        //   'rgba(255, 99, 132, 0.2)',
        //   'rgba(54, 162, 235, 0.2)',
        //   //'rgba(255, 206, 86, 0.2)',
        //   //'rgba(75, 192, 192, 0.2)',
        //   //'rgba(153, 102, 255, 0.2)',
        //   //'rgba(255, 159, 64, 0.2)'
        // ],
        // borderColor: [
        //   'rgba(255,99,132,1)',
        //   'rgba(54, 162, 235, 1)',
        //   //'rgba(255, 206, 86, 1)',
        //   //'rgba(75, 192, 192, 1)',
        //   //'rgba(153, 102, 255, 1)',
        //   //'rgba(255, 159, 64, 1)'
        // ],
        // borderWidth: 1
        backgroundColor: [
          "#36A2EB",
          "#FFCE56"
        ],
        hoverBackgroundColor: [
          "#36A2EB",
          "#FFCE56"
        ]
      }],
      animation: {
        animateRotate: true,
        animateScale: true
      }
    };


    return (
      <div className={styles.content}>
        <div className={styles.top}>
          <div className={styles.installPackagesButton}>
            <i className="fa fa-cloud-download" />
            Install packages...
          </div>
        </div>
        {/*<div className={cx(styles.dependenciesContainer, styles.cardView)}>
          {this.dependencies}
        </div>*/}

        <Doughnut
          data={chartData}
          height={50}
        />

        <div className={cx(styles.dependenciesContainer, styles.tableView)}>
          <div className={styles.packagesListTop}>
            <div className={styles.packagesListTitle}>{`Packages (${this.props.packagesStore.packages.length})`}</div>
            <div className={styles.devDependenciesSwitcher}>
              <div className={styles.devDependenciesText}>Show only dev dependencies</div>
              <Switch
                defaultChecked={this.showOnlyDevDependencies}
                onChange={() => { this.showOnlyDevDependencies = !this.showOnlyDevDependencies }}
              />
            </div>
          </div>

          <Table
            {...this.tableSettings}
            columns={this.tableColumns}
            dataSource={data}
            scroll={{ y: window.innerHeight - 390 }}
            onRowClick={(record, index) => packagesStore.selectPackage(record.key)}
          />

          {/*<table className={styles.packagesTable}>*/}
            {/*<thead>*/}
              {/*<tr>*/}<commit_msg>Modify content view<commit_after>// @flow
import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import styles from './Content.sass';
import cx from 'classnames';
import PackageCard from 'components/PackageCard/PackageCard';
//import jsonfile from 'jsonfile';
import parseJson from 'parse-json';
//import cp from 'child_process';
import npmManager from 'utils/npmManager';
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';

import { Spin } from 'antd';
import { Checkbox } from 'antd';
import { Table, Icon, Switch, Radio, Form } from 'antd';
import { Doughnut } from 'react-chartjs-2';

@observer
class Content extends Component {

  @observable loading = true;

  // get dependencies() {
  //   console.log(this.state.dependencies);
  //   return this.state.dependencies.map(item => {
  //     return <PackageCard {...{item}} key={item._id} />;
  //   });
  // }

  componentDidMount() {

  }

  // componentDidUpdate(nextProps) {
  //   // Start async loading
  //   console.log(this.props.packagesStore.loading, nextProps.packagesStore.loading);
  //   if (!this.props.packagesStore.loading && nextProps.packagesStore.loading) {
  //     this.fetchMessage = message.loading('Fetch installed packages info...', 0);
  //     return;
  //   }
  //
  //   // Stop async loading
  //   if (this.props.packagesStore.loading && !nextProps.packagesStore.loading) {
  //     this.fetchMessage();
  //   }
  // }

  get tableColumns() {
    return [{
      title: 'NAME',
      dataIndex: 'name',
      key: 'name',
      width: 150,
      //onFilter: (value, record) => record.name.indexOf(value) === 0,
      sorter: (a, b) => {
        return a.name.toLowerCase().localeCompare(b.name.toLowerCase())
      },
      render: (text, record) => (
        <b>{text}</b>
      )
    }, {
      title: 'CURRENT VERSION',
      dataIndex: 'current',
      key: 'current',
      width: 70,
    }, {
      title: 'WANTED VERSION',
      dataIndex: 'wanted',
      key: 'wanted',
      width: 70,
      render: (text, record) => (
        <i className="fa fa-check" style={{ color: '#2ecc71' }} />
      )
    }, {
      title: 'LATEST VERSION',
      dataIndex: 'latest',
      key: 'latest',
      width: 70,
      render: (text, record) => (
        <i className="fa fa-check" style={{ color: '#2ecc71' }} />
      )
    }, {
      title: 'ENVIRONMENT',
      dataIndex: 'environment',
      key: 'environment',
      width: 70,
    }, {
      title: 'ACTIONS',
      key: 'actions',
      width: 70,
      render: (text, record) => (
        <span>
          <a href="#" className="ant-dropdown-link">
            More actions <Icon type="down" />
          </a>
        </span>
      ),
    }];
  }

  get tableSettings() {
    return {
      bordered: true,
      loading: this.props.packagesStore.loading,
      pagination: false,
      size: 'small',
      showHeader: true,
      rowSelection: {},
      scroll: undefined,
      locale: {
        emptyText: 'No Data'
      }
    }
  }

  @observable showOnlyDevDependencies = false;

  render() {
    const { packagesStore } = this.props;

    const selectedPackage = packagesStore.selectedPackage;

    const selectedPackageName = selectedPackage.name || '-';
    const selectedPackageDescription = selectedPackage.description || '-';
    const selectedPackageLicense = selectedPackage.license || '-';
    const selectedPackageHomepage = selectedPackage.homepage || '-';
    const selectedPackageAuthor = (selectedPackage.author && `${selectedPackage.author.name} (${selectedPackage.author.email})`) || '-';
    const selectedPackageRepository = (selectedPackage.repository && selectedPackage.repository.url) || '-';
    const selectedPackageIssues = (selectedPackage.bugs && selectedPackage.bugs.url) || '-';

    const data = [];

    packagesStore.packages.map(item => {
      data.push({
        key: item._id,
        name: item.name,
        current: item.version,
        wanted: item.version,
        latest: item.version,
        environment: `dev`
      });
    });


    const chartData = {
      labels: ["Dev dependencies", "Non dev dependencies"],
      datasets: [{
        //label: '# of Votes',
        data: [12, 19],
        // backgroundColor: [
        //   'rgba(255, 99, 132, 0.2)',
        //   'rgba(54, 162, 235, 0.2)',
        //   //'rgba(255, 206, 86, 0.2)',
        //   //'rgba(75, 192, 192, 0.2)',
        //   //'rgba(153, 102, 255, 0.2)',
        //   //'rgba(255, 159, 64, 0.2)'
        // ],
        // borderColor: [
        //   'rgba(255,99,132,1)',
        //   'rgba(54, 162, 235, 1)',
        //   //'rgba(255, 206, 86, 1)',
        //   //'rgba(75, 192, 192, 1)',
        //   //'rgba(153, 102, 255, 1)',
        //   //'rgba(255, 159, 64, 1)'
        // ],
        // borderWidth: 1
        backgroundColor: [
          "#36A2EB",
          "#FFCE56"
        ],
        hoverBackgroundColor: [
          "#36A2EB",
          "#FFCE56"
        ]
      }],
      animation: {
        animateRotate: true,
        animateScale: true
      }
    };


    return (
      <div className={styles.content}>
        <div className={styles.top}>
          <div className={styles.installPackagesButton}>
            <i className="fa fa-cloud-download" />
            Install packages...
          </div>
        </div>
        {/*<div className={cx(styles.dependenciesContainer, styles.cardView)}>
          {this.dependencies}
        </div>*/}

        {/*<Doughnut*/}
          {/*data={chartData}*/}
          {/*height={50}*/}
        {/*/>*/}

        <div className={cx(styles.dependenciesContainer, styles.tableView)}>
          <div className={styles.packagesListTop}>
            <div className={styles.packagesListTitle}>{`Packages (${this.props.packagesStore.packages.length})`}</div>
            <div className={styles.devDependenciesSwitcher}>
              <div className={styles.devDependenciesText}>Show only dev dependencies</div>
              <Switch
                defaultChecked={this.showOnlyDevDependencies}
                onChange={() => { this.showOnlyDevDependencies = !this.showOnlyDevDependencies }}
              />
            </div>
          </div>

          <Table
            {...this.tableSettings}
            columns={this.tableColumns}
            dataSource={data}
            scroll={{ y: window.innerHeight - 390 }}
            onRowClick={(record, index) => packagesStore.selectPackage(record.key)}
          />

          {/*<table className={styles.packagesTable}>*/}
            {/*<thead>*/}
              {/*<tr>*/}
{'fraction_non_alphanumeric': 0.16169751413304423, 'fraction_numerical': 0.024006814837760397, 'mean_word_length': 2.0798950632005724, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 82, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5917146', 'n_tokens_mistral': 4128, 'n_tokens_neox': 3827, 'n_words': 803}