<commit_before>/*
 * Copyright 2018 Crown Copyright
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { splitAt } from 'ramda';
import { compose, withProps } from 'recompose';
// eslint-disable-next-line
import brace from 'brace';
import 'brace/mode/xml';
import 'brace/theme/github';
import 'brace/keybinding/vim';

import ReactTable from 'react-table';
import 'react-table/react-table.css';

import Tooltip from 'components/Tooltip';

const enhance = compose(
  connect(
    () => ({}),
    {},
  ),
  withProps(({ errors }) => ({
    tableColumns: [
      {
        Header: '',
        accessor: 'severity',
        Cell: (row) => {
          const location = (
            <React.Fragment>
              <p>Stream: {row.original.stream}</p>
              <p>Line: {row.original.line}</p>
              <p>Column: {row.original.col}</p>
            </React.Fragment>
          );

          const position = 'right center';
          if (row.value === 'INFO') {
            return (
              <Tooltip
                trigger={<Icon color="blue" name="info circle" />}
                content={location}
                position={position}
              />
            );
          } else if (row.value === 'WARNING') {
            return (
              <Tooltip
                trigger={<Icon color="orange" name="warning circle" />}
                content={location}
                position={position}
              />
            );
          } else if (row.value === 'ERROR') {
            return (
              <Tooltip
                trigger={<Icon color="red" name="warning circle" />}
                content={location}
                position={position}
              />
            );
          } else if (row.value === 'FATAL') {
            return (
              <Tooltip
                trigger={<Icon color="red" name="bomb" />}
                content={location}
                position={position}
              />
            );
          }
        },
        width: 35,
      },
      {
        Header: 'Element',
        accessor: 'elementId',
        maxWidth: 120,
      },
      {
        Header: 'Message',
        accessor: 'message',
      },
    ],
    metaAndErrors: splitAt(1, errors),
  })),
);

const ErrorTable = ({ tableColumns, errors }) => {
  // const tableColumns = [
  //   {
  //     Header: '',
  //     accessor: 'severity',
  //     Cell: (row) => {
  //       const location = (
  //         <React.Fragment>
  //           <p>Stream: {row.original.stream}</p>
  //           <p>Line: {row.original.line}</p>
  //           <p>Column: {row.original.col}</p>
  //         </React.Fragment>
  //       );

  //       const position = 'right center';
  //       if (row.value === 'INFO') {
  //         return (
  //           <Tooltip
  //             trigger={<Icon color="blue" name="info circle" />}
  //             content={location}
  //             position={position}
  //           />
  //         );
  //       } else if (row.value === 'WARNING') {
  //         return (
  //           <Tooltip
  //             trigger={<Icon color="orange" name="warning circle" />}
  //             content={location}
  //             position={position}
  //           />
  //         );
  //       } else if (row.value === 'ERROR') {
  //         return (
  //           <Tooltip
  //             trigger={<Icon color="red" name="warning circle" />}
  //             content={location}
  //             position={position}
  //           />
  //         );
  //       } else if (row.value === 'FATAL') {
  //         return (
  //           <Tooltip
  //             trigger={<Icon color="red" name="bomb" />}
  //             content={location}
  //             position={position}
  //           />
  //         );
  //       }
  //     },
  //     width: 35,
  //   },
  //   {
  //     Header: 'Element',
  //     accessor: 'elementId',
  //     maxWidth: 120,
  //   },
  //   {
  //     Header: 'Message',
  //     accessor: 'message',
  //   },
  // ];

  // const metaAndErrors = splitAt(1, errors);

  const tableData = metaAndErrors[1].map(error => ({
    elementId: error.elementId,
    stream: error.location.streamNo,
    line: error.location.lineNo,
    col: error.location.colNo,
    message: error.message,
    severity: error.severity,
  }));

  return (
    <div className="ErrorTable__container">
      <div className="ErrorTable__reactTable__container">
        <ReactTable
          sortable={false}
          showPagination={false}
          className="ErrorTable__reactTable"
          data={tableData}
          columns={tableColumns}
        />
      </div>
    </div>
  );
};

ErrorTable.propTypes = {
  errors: PropTypes.array.isRequired,
};

export default enhance(ErrorTable);<commit_msg>Recomposeify<commit_after>/*
 * Copyright 2018 Crown Copyright
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from 'semantic-ui-react';
import { splitAt } from 'ramda';
import { compose, withProps } from 'recompose';
// eslint-disable-next-line
import brace from 'brace';
import 'brace/mode/xml';
import 'brace/theme/github';
import 'brace/keybinding/vim';

import ReactTable from 'react-table';
import 'react-table/react-table.css';

import Tooltip from 'components/Tooltip';

const enhance = compose(
  withProps(({ errors }) => ({
    tableColumns: [
      {
        Header: '',
        accessor: 'severity',
        Cell: (row) => {
          const location = (
            <React.Fragment>
              <p>Stream: {row.original.stream}</p>
              <p>Line: {row.original.line}</p>
              <p>Column: {row.original.col}</p>
            </React.Fragment>
          );

          const position = 'right center';
          if (row.value === 'INFO') {
            return (
              <Tooltip
                trigger={<Icon color="blue" name="info circle" />}
                content={location}
                position={position}
              />
            );
          } else if (row.value === 'WARNING') {
            return (
              <Tooltip
                trigger={<Icon color="orange" name="warning circle" />}
                content={location}
                position={position}
              />
            );
          } else if (row.value === 'ERROR') {
            return (
              <Tooltip
                trigger={<Icon color="red" name="warning circle" />}
                content={location}
                position={position}
              />
            );
          } else if (row.value === 'FATAL') {
            return (
              <Tooltip
                trigger={<Icon color="red" name="bomb" />}
                content={location}
                position={position}
              />
            );
          }
        },
        width: 35,
      },
      {
        Header: 'Element',
        accessor: 'elementId',
        maxWidth: 120,
      },
      {
        Header: 'Message',
        accessor: 'message',
      },
    ],
    metaAndErrors: splitAt(1, errors),
  })),
  withProps(({ metaAndErrors }) => ({
    tableData: metaAndErrors[1].map(error => ({
      elementId: error.elementId,
      stream: error.location.streamNo,
      line: error.location.lineNo,
      col: error.location.colNo,
      message: error.message,
      severity: error.severity,
    })),
  })),
);

const ErrorTable = ({ tableColumns, tableData, errors, metaAndErrors }) => (
  <div className="ErrorTable__container">
    <div className="ErrorTable__reactTable__container">
      <ReactTable
        sortable={false}
        showPagination={false}
        className="ErrorTable__reactTable"
        data={tableData}
        columns={tableColumns}
      />
    </div>
  </div>
);

ErrorTable.propTypes = {
  errors: PropTypes.array.isRequired,
};

export default enhance(ErrorTable);
{'fraction_non_alphanumeric': 0.1428886925795053, 'fraction_numerical': 0.003975265017667844, 'mean_word_length': 1.679585798816568, 'pattern_counts': {'":': 0, '<': 61, '<?xml version=': 0, '>': 72, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 2}, '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': '138475', 'n_tokens_mistral': 2548, 'n_tokens_neox': 2507, 'n_words': 587}