<commit_before>// TODO generalize sort tables to accept arbitrary columns and attributes
// (combine aa-table-index.js and aa-table-vromms.js into single component)
import React from 'react';
import {
  compose,
  getContext,
  withHandlers
} from 'recompose';
import { connect } from 'react-redux';
import _ from 'lodash';
import classnames from 'classnames';
import { api } from '../config';
import { Link } from 'react-router';
import T from './t';


const TableColumnHeader = withHandlers({
  sortLink: ({ columnKey, sortLinkHandler }) => () => sortLinkHandler(columnKey)
})
  (({ columnKey, label, sortField, sortOrder, sortLink }) => (
    <th
      onClick={sortLink}
    >
      <i
        className={classnames({
          'collecticon-sort-none': sortField !== columnKey,
          'collecticon-sort-asc': sortField === columnKey && sortOrder === 'asc',
          'collecticon-sort-desc': sortField === columnKey && sortOrder === 'desc'
        })}
      />
      <T>{label}</T>
    </th>
  ));


const TableRow = withHandlers({
  propertiesButtonClick: ({ vpromm, toggleProperties }) => () => toggleProperties(vpromm)
})
  (({
    vpromm, fieldRoads, adminRoadProperties, adminRoadPropertiesFetched,
    vprommFieldInDB, expandedId, language, propertiesButtonClick
  }) => {
    // TODO - properly render props dropdown
    const roadPropDropDown = [];

    if (adminRoadPropertiesFetched) {
      if (adminRoadProperties.length !== 0) {
        const adminProp = adminRoadProperties.find((prop) => prop.id === vpromm);
        if (adminProp) {
          _.forEach(adminProp.properties, (prop, key, j) => {
            roadPropDropDown.push(<dt key={`${vpromm}-${key}-${j}-key`}>{key}</dt>);
            roadPropDropDown.push(<dd key={`${vpromm}-${key}-${j}-prop`}>{prop}</dd>);
          });
        } else {
          roadPropDropDown.push(<dt key={`${vpromm}-key`}></dt>);
          roadPropDropDown.push(<dd key={`${vpromm}-prop`}></dd>);
        }
      } else {
        roadPropDropDown.push(<p><T>Loading</T></p>);
      }
    }

    return (
      <tr>
        <td className="table-properties-cell-edit-delete">
          <button
            type="button"
            className="collecticon-trash-bin"
          />
          <button
            type="button"
            className="collecticon-pencil"
          />
        </td>
        <td>
          {vprommFieldInDB ?
            <Link to={`/${language}/explore`}>
              <strong>{vpromm}</strong>
            </Link> :
            vpromm
          }
        </td>
        <td className={vprommFieldInDB ? 'added' : 'not-added'}>
          { vprommFieldInDB &&
            <div className='a-table-actions'>
              <Link
                className='a-table-action'
                to={`/${language}/assets/road/${vpromm}/`}
              >
                <T>Explore</T>
              </Link>
              <a
                className='a-table-action'
                href={`${api}/field/geometries/${vpromm}?grouped=false&download=true`}
              >
                <T>Download</T>
              </a>
            </div>
          }
        </td>
        {
          adminRoadProperties.length !== 0 ?
            <td className='table-properties-cell'>
              <button
                type='button'
                className={`button-table-expand ${expandedId ? 'button-table-expand--show' : 'button-table-expand--hide'}`}
                onClick={propertiesButtonClick}
              >
                <span>{expandedId === vpromm ? <T>Hide</T> : <T>Show</T>}</span>
              </button>
              <div
                className={`table-properties ${expandedId !== vpromm ? 'table-properties--hidden' : ''}`}
              >
                <dl className='table-properties-list'>{roadPropDropDown}</dl>
              </div>
            </td> :
            <td/>
        }
      </tr>
    );
  });


const AATable = React.createClass({
  displayName: 'AATable',

  propTypes: {
    data: React.PropTypes.array,
    fieldRoads: React.PropTypes.array,
    language: React.PropTypes.string,
    adminRoadProperties: React.PropTypes.array,
    adminRoadPropertiesFetched: React.PropTypes.bool
  },<commit_msg>bugfix: correctly render vpromms tabel show properties icon<commit_after>// TODO generalize sort tables to accept arbitrary columns and attributes
// (combine aa-table-index.js and aa-table-vromms.js into single component)
import React from 'react';
import {
  compose,
  getContext,
  withHandlers
} from 'recompose';
import { connect } from 'react-redux';
import _ from 'lodash';
import classnames from 'classnames';
import { api } from '../config';
import { Link } from 'react-router';
import T from './t';


const TableColumnHeader = withHandlers({
  sortLink: ({ columnKey, sortLinkHandler }) => () => sortLinkHandler(columnKey)
})
  (({ columnKey, label, sortField, sortOrder, sortLink }) => (
    <th
      onClick={sortLink}
    >
      <i
        className={classnames({
          'collecticon-sort-none': sortField !== columnKey,
          'collecticon-sort-asc': sortField === columnKey && sortOrder === 'asc',
          'collecticon-sort-desc': sortField === columnKey && sortOrder === 'desc'
        })}
      />
      <T>{label}</T>
    </th>
  ));


const TableRow = withHandlers({
  propertiesButtonClick: ({ vpromm, toggleProperties }) => () => toggleProperties(vpromm)
})
  (({
    vpromm, fieldRoads, adminRoadProperties, adminRoadPropertiesFetched,
    vprommFieldInDB, expandedId, language, propertiesButtonClick
  }) => {
    // TODO - properly render props dropdown
    const roadPropDropDown = [];

    if (adminRoadPropertiesFetched) {
      if (adminRoadProperties.length !== 0) {
        const adminProp = adminRoadProperties.find((prop) => prop.id === vpromm);
        if (adminProp) {
          _.forEach(adminProp.properties, (prop, key, j) => {
            roadPropDropDown.push(<dt key={`${vpromm}-${key}-${j}-key`}>{key}</dt>);
            roadPropDropDown.push(<dd key={`${vpromm}-${key}-${j}-prop`}>{prop}</dd>);
          });
        } else {
          roadPropDropDown.push(<dt key={`${vpromm}-key`}></dt>);
          roadPropDropDown.push(<dd key={`${vpromm}-prop`}></dd>);
        }
      } else {
        roadPropDropDown.push(<p><T>Loading</T></p>);
      }
    }

    return (
      <tr>
        <td className="table-properties-cell-edit-delete">
          <button
            type="button"
            className="collecticon-trash-bin"
          />
          <button
            type="button"
            className="collecticon-pencil"
          />
        </td>
        <td>
          {vprommFieldInDB ?
            <Link to={`/${language}/explore`}>
              <strong>{vpromm}</strong>
            </Link> :
            vpromm
          }
        </td>
        <td className={vprommFieldInDB ? 'added' : 'not-added'}>
          { vprommFieldInDB &&
            <div className='a-table-actions'>
              <Link
                className='a-table-action'
                to={`/${language}/assets/road/${vpromm}/`}
              >
                <T>Explore</T>
              </Link>
              <a
                className='a-table-action'
                href={`${api}/field/geometries/${vpromm}?grouped=false&download=true`}
              >
                <T>Download</T>
              </a>
            </div>
          }
        </td>
        {
          adminRoadProperties.length !== 0 ?
            <td className='table-properties-cell'>
              <button
                type='button'
                className={`button-table-expand ${expandedId === vpromm ? 'button-table-expand--show' : 'button-table-expand--hide'}`}
                onClick={propertiesButtonClick}
              >
                <span>{expandedId === vpromm ? <T>Hide</T> : <T>Show</T>}</span>
              </button>
              <div
                className={`table-properties ${expandedId !== vpromm ? 'table-properties--hidden' : ''}`}
              >
                <dl className='table-properties-list'>{roadPropDropDown}</dl>
              </div>
            </td> :
            <td/>
        }
      </tr>
    );
  });


const AATable = React.createClass({
  displayName: 'AATable',

  propTypes: {
    data: React.PropTypes.array,
    fieldRoads: React.PropTypes.array,
    language: React.PropTypes.string,
    adminRoadProperties: React.PropTypes.array,
    adminRoadPropertiesFetched: React.PropTypes.bool
  },
{'fraction_non_alphanumeric': 0.15724235627434777, 'fraction_numerical': 0.00047219926809113444, 'mean_word_length': 1.9894142554693013, 'pattern_counts': {'":': 0, '<': 115, '<?xml version=': 0, '>': 131, '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': '7242636', 'n_tokens_mistral': 2569, 'n_tokens_neox': 2496, 'n_words': 432}