<commit_before>import React from 'react';
import {render} from 'react-dom';
import ReactTable from 'react-table';
import treeTableHOC from 'react-table/lib/hoc/treeTable';

const TreeTable = treeTableHOC(ReactTable);


class TestScriptResultTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      expanded: {},
      resized: [],
      sorted: [],
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData = () => {
    let ajaxDetails = {};
    if (this.props.instructor_run) {
      if (this.props.instructor_view) {
        ajaxDetails = {
          url: Routes.get_test_runs_instructors_assignment_submission_result_path(
            this.props.assignment_id,
            this.props.submission_id,
            this.props.result_id),
          dataType: 'json',
        }
      } else {
        ajaxDetails = {
          url: Routes.get_test_runs_instructors_released_assignment_submission_result_path(
            this.props.assignment_id,
            this.props.submission_id,
            this.props.result_id),
          dataType: 'json',
        }
      }
    } else {
      ajaxDetails = {
        url: Routes.get_test_runs_students_assignment_automated_tests_path(
          this.props.assignment_id),
        dataType: 'json',
      }
    }
    $.ajax(ajaxDetails).then(res => {
      let sub_row_map = {};
      for (let i = 0; i < res.length; i++) {
        sub_row_map[i] = true;
      }
      this.setState({
        data: res,
        expanded: {0: sub_row_map},
      });
    });
  };

  // Custom getTdProps function to highlight submissions that have been collected.
  getTdProps = (state, rowInfo, colInfo) => {
    if (rowInfo) {
      return {
        className: 'test-result-' + rowInfo.row.completion_status
      }
    }
    return {};
  };

  render() {
    const {data} = this.state;

    return (
      <div>
        <TreeTable
          data={data}
          columns={[
            {
              id: 'created_at_user_name',
              accessor: row => `${row['test_runs.created_at']} (${row['users.user_name']})`
            },
            {
              id: 'file_name_description',
              accessor: row => `${row['test_scripts.file_name']} - ${row['test_scripts.description']}`,
            }
          ]}
          SubComponent={ row => {
            let columns = [
              {
                Header: I18n.t('automated_tests.test_results_table.test_name'),
                accessor: 'test_scripts.name'
              },
              {
                Header: I18n.t('automated_tests.test_results_table.status'),
                accessor: 'test_results.completion_status',
                minWidth: 50
              },
              {
                Header: I18n.t('automated_tests.test_results_table.marks_earned'),
                accessor: 'test_results.marks_earned',
                minWidth: 40,
                className: 'number'
              },
              {
                Header: I18n.t('automated_tests.test_results_table.marks_total'),
                accessor: 'test_results.marks_total',
                minWidth: 40,
                className: 'number'
              }
            ];
            const rowData = row.original['test_data'];
            const extraInfo = row.original['test_data'][0]['extra_info'] || '';
            if ('actual_output' in rowData[0]) {
              columns.splice(1, 0, {
                id: 'actual_output',<commit_msg>react-table: make this table work again<commit_after>import React from 'react';
import {render} from 'react-dom';
import ReactTable from 'react-table';
import treeTableHOC from 'react-table/lib/hoc/treeTable';

const TreeTable = treeTableHOC(ReactTable);


class TestScriptResultTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      expanded: {},
      resized: [],
      sorted: [],
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData = () => {
    let ajaxDetails = {};
    if (this.props.instructor_run) {
      if (this.props.instructor_view) {
        ajaxDetails = {
          url: Routes.get_test_runs_instructors_assignment_submission_result_path(
            this.props.assignment_id,
            this.props.submission_id,
            this.props.result_id),
          dataType: 'json',
        }
      } else {
        ajaxDetails = {
          url: Routes.get_test_runs_instructors_released_assignment_submission_result_path(
            this.props.assignment_id,
            this.props.submission_id,
            this.props.result_id),
          dataType: 'json',
        }
      }
    } else {
      ajaxDetails = {
        url: Routes.get_test_runs_students_assignment_automated_tests_path(
          this.props.assignment_id),
        dataType: 'json',
      }
    }
    $.ajax(ajaxDetails).then(res => {
      let sub_row_map = {};
      for (let i = 0; i < res.length; i++) {
        sub_row_map[i] = true;
      }
      this.setState({
        data: res,
        expanded: {0: sub_row_map},
      });
    });
  };

  // Custom getTdProps function to highlight submissions that have been collected.
  getTdProps = (state, rowInfo, colInfo) => {
    if (rowInfo) {
      return {
        className: 'test-result-' + rowInfo.row['test_results.completion_status']
      }
    }
    return {};
  };

  render() {
    const {data} = this.state;

    return (
      <div>
        <TreeTable
          data={data}
          columns={[
            {
              id: 'created_at_user_name',
              accessor: row => `${row['test_runs.created_at']} (${row['users.user_name']})`,
              maxWidth: 0
            },
            {
              id: 'file_name_description',
              accessor: row => `${row['test_scripts.file_name']} - ${row['test_scripts.description']}`
            }
          ]}
          SubComponent={ row => {
            let columns = [
              {
                Header: I18n.t('automated_tests.test_results_table.test_name'),
                id: 'test_scripts.name',
                accessor: row => row['test_results.name']
              },
              {
                Header: I18n.t('automated_tests.test_results_table.status'),
                id: 'test_results.completion_status',
                accessor: row => row['test_results.completion_status'],
                minWidth: 50
              },
              {
                Header: I18n.t('automated_tests.test_results_table.marks_earned'),
                id: 'test_results.marks_earned',
                accessor: row => row['test_results.marks_earned'],
                minWidth: 40,
                className: 'number'
              },
              {
                Header: I18n.t('automated_tests.test_results_table.marks_total'),
                id: 'test_results.marks_total',
                accessor: row => row['test_results.marks_total'],
                minWidth: 40,
                className: 'number'
              }
            ];
            const rowData = row.original['test_data'];
            const extraInfo = row.original['test_data'][0]['extra_info'] || '';
            if ('test_results.actual_output' in rowData[0]) {
              columns.splice(1, 0, {
                id: 'actual_output',
{'fraction_non_alphanumeric': 0.12242109577811176, 'fraction_numerical': 0.005601858177346632, 'mean_word_length': 1.7539503386004516, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 21, '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': '5935101', 'n_tokens_mistral': 2232, 'n_tokens_neox': 2156, 'n_words': 352}