<commit_before>import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { Icon } from "@blueprintjs/core";
import Waypoint from 'react-waypoint';
import _ from 'lodash';

import Query from 'src/app/Query';
import Fragment from 'src/app/Fragment';
import { queryEntities } from 'src/actions/index';
import { selectEntitiesResult } from 'src/selectors';
import { SectionLoading, Property } from 'src/components/common';
import ensureArray from 'src/util/ensureArray';

import './EntityReferencesTable.css';

class EntityReferencesTable extends Component {
  constructor(props) {
    super(props);
    this.fetchData = this.fetchData.bind(this);
    this.getMoreResults = this.getMoreResults.bind(this);
  }

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (!this.props.query.sameAs(prevProps.query)) {
      this.fetchData();
    }
  }

  fetchData() {
    const { query, result } = this.props;
    if (result.total === undefined) {
      this.props.queryEntities({ query });
    }
  }

  getMoreResults() {
    const { query, result, queryEntities } = this.props;
    if (result && !result.isLoading && result.next) {
      queryEntities({ query, next: result.next });
    }
  }

  onShowDetails(entity) {
    const { history } = this.props;
    return (event) => {
      event.preventDefault();
      const fragment = new Fragment(history);
      if(fragment.state['preview:id']) {
        fragment.update({'preview:id': null});
      } else {
        fragment.update({
          'preview:type': 'entity',
          'preview:id': entity.id
        });
      }
    }
  }

  render() {
    const { model, result, property } = this.props;
    const results = ensureArray(result.results);
    const counts = {};

    for (let res of results) {
      _.keys(res.properties).forEach((key) => {
        counts[key] = counts[key] ? counts[key] + 1 : 1;
      });
    }

    const columns = _.values(model.properties).filter((prop) => {
      if (prop.name === property.name || prop.caption) {
        return false;
      }
      return (
        (Array.isArray(model.featured) && model.featured.includes(prop.name))
        || !!counts[prop.name]
      );
    });

    columns.sort((a, b) =>  {
      return (counts[b.name] || 0) - (counts[a.name] || 0);
    });

    return (
      <section className="EntityReferencesTable">
        <table className="data-table references-data-table">
          <thead>
            <tr>
              {columns.map(prop => (
                <th key={prop.name} className={prop.type}>
                  <Property.Name model={prop} />
                </th>
              ))}
              <th key="details" className="narrow"/>
            </tr>
          </thead>
          <tbody>
            {results.map((entity) => (
              <tr key={entity.id}>
                {columns.map(prop => (
                  <td key={prop.name} className={prop.type}>
                    <Property.Values model={prop} values={entity.properties[prop.name]} />
                  </td>
                ))}
                <td key="details" className="narrow">
                  <a onClick={this.onShowDetails(entity)}>
                    <Icon icon="list-detail-view" />
                  </a>
                </td>
              </tr>
            ))}
          </tbody><commit_msg>changed icon for opening preview to Details<commit_after>import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { Icon } from "@blueprintjs/core";
import Waypoint from 'react-waypoint';
import _ from 'lodash';

import Query from 'src/app/Query';
import Fragment from 'src/app/Fragment';
import { queryEntities } from 'src/actions/index';
import { selectEntitiesResult } from 'src/selectors';
import { SectionLoading, Property } from 'src/components/common';
import ensureArray from 'src/util/ensureArray';

import './EntityReferencesTable.css';

class EntityReferencesTable extends Component {
  constructor(props) {
    super(props);
    this.fetchData = this.fetchData.bind(this);
    this.getMoreResults = this.getMoreResults.bind(this);
  }

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (!this.props.query.sameAs(prevProps.query)) {
      this.fetchData();
    }
  }

  fetchData() {
    const { query, result } = this.props;
    if (result.total === undefined) {
      this.props.queryEntities({ query });
    }
  }

  getMoreResults() {
    const { query, result, queryEntities } = this.props;
    if (result && !result.isLoading && result.next) {
      queryEntities({ query, next: result.next });
    }
  }

  onShowDetails(entity) {
    const { history } = this.props;
    return (event) => {
      event.preventDefault();
      const fragment = new Fragment(history);
      if(fragment.state['preview:id']) {
        fragment.update({'preview:id': null});
      } else {
        fragment.update({
          'preview:type': 'entity',
          'preview:id': entity.id
        });
      }
    }
  }

  render() {
    const { model, result, property } = this.props;
    const results = ensureArray(result.results);
    const counts = {};

    for (let res of results) {
      _.keys(res.properties).forEach((key) => {
        counts[key] = counts[key] ? counts[key] + 1 : 1;
      });
    }

    const columns = _.values(model.properties).filter((prop) => {
      if (prop.name === property.name || prop.caption) {
        return false;
      }
      return (
        (Array.isArray(model.featured) && model.featured.includes(prop.name))
        || !!counts[prop.name]
      );
    });

    columns.sort((a, b) =>  {
      return (counts[b.name] || 0) - (counts[a.name] || 0);
    });

    return (
      <section className="EntityReferencesTable">
        <table className="data-table references-data-table">
          <thead>
            <tr>
              {columns.map(prop => (
                <th key={prop.name} className={prop.type}>
                  <Property.Name model={prop} />
                </th>
              ))}
              <th key="details" className="narrow"/>
            </tr>
          </thead>
          <tbody>
            {results.map((entity) => (
              <tr key={entity.id}>
                {columns.map(prop => (
                  <td key={prop.name} className={prop.type}>
                    <Property.Values model={prop} values={entity.properties[prop.name]} />
                  </td>
                ))}
                <td key="details" className="narrow">
                  <a onClick={this.onShowDetails(entity)}>
                    <span>Details</span>
                  </a>
                </td>
              </tr>
            ))}
          </tbody>
{'fraction_non_alphanumeric': 0.1524408067816428, 'fraction_numerical': 0.001169248757673195, 'mean_word_length': 2.106218792555606, 'pattern_counts': {'":': 0, '<': 48, '<?xml version=': 0, '>': 62, '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': '6339782', 'n_tokens_mistral': 2024, 'n_tokens_neox': 1969, 'n_words': 396}