<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import styled from 'styled-components';

import formatCoordinates from '../functions/format/formatCoordinates';

const Arrow = styled.span`
  position: absolute;
  transform: rotate(${props => props.azimuth - 90}deg);
`;
const Azimuth = styled.span`
  margin-left: 1.2em;
`;

const OutputTable = props => {
  return (
    <table>
      <thead>
        <tr>
          <th>Coordinates</th>
          <th>Distance</th>
          <th>Azimuth</th>
          <th>Description</th>
          <th>Map</th>
        </tr>
      </thead>
      <tbody>
        {props.data.map((row, index) => {
          return (
            <tr key={index}>
              <td className="coordinates">{formatCoordinates(row.latitude, row.longitude)}</td>
              <td className="distance">{row.distance} km</td>
              <td className="azimuth">
                <Arrow azimuth={row.azimuth}>&#10140;</Arrow>
                <Azimuth>{row.azimuth}</Azimuth>
              </td>
              <td className="description">{row.description}</td>
              <td className="map"></td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

OutputTable.propTypes = {
  data: PropTypes.array,
};

const mapStateToProps = state => {
  return {<commit_msg>When distance is more than 50 km, just round it<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import styled from 'styled-components';

import formatCoordinates from '../functions/format/formatCoordinates';

const Arrow = styled.span`
  position: absolute;
  transform: rotate(${props => props.azimuth - 90}deg);
`;
const Azimuth = styled.span`
  margin-left: 1.2em;
`;

const OutputTable = props => {
  return (
    <table>
      <thead>
        <tr>
          <th>Coordinates</th>
          <th>Distance</th>
          <th>Azimuth</th>
          <th>Description</th>
          <th>Map</th>
        </tr>
      </thead>
      <tbody>
        {props.data.map((row, index) => {
          return (
            <tr key={index}>
              <td className="coordinates">{formatCoordinates(row.latitude, row.longitude)}</td>
              <td className="distance">
                {row.distance > 50 ? parseInt(row.distance, 10) : row.distance} km
              </td>
              <td className="azimuth">
                <Arrow azimuth={row.azimuth}>&#10140;</Arrow>
                <Azimuth>{row.azimuth}</Azimuth>
              </td>
              <td className="description">{row.description}</td>
              <td className="map"></td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

OutputTable.propTypes = {
  data: PropTypes.array,
};

const mapStateToProps = state => {
  return {
{'fraction_non_alphanumeric': 0.15634837355718784, 'fraction_numerical': 0.008394543546694649, 'mean_word_length': 2.078579117330463, 'pattern_counts': {'":': 0, '<': 71, '<?xml version=': 0, '>': 80, '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': '5501183', 'n_tokens_mistral': 907, 'n_tokens_neox': 860, 'n_words': 175}