renderSubmissionTable()

in frontend/src/Leaderboard.tsx [349:412]


  renderSubmissionTable() {
    const submission_rows = [];
    var idx = 1;
    const columns = [
      { field: "rank", headerName: "Rank", width: 70 },
      { field: "name", headerName: "Name", width: 200 },
      { field: "devEM", headerName: "Dev EM", width: 110 },
      { field: "devF1", headerName: "Dev F1", width: 110 },
      { field: "devSkill", headerName: "Dev Skill", width: 120 },
      { field: "testEM", headerName: "Test EM", width: 110 },
      { field: "testF1", headerName: "Test F1", width: 110 },
      {
        field: "diffEM",
        headerName: "Diff EM",
        type: "number",
        cellClassName: diffToColor,
        width: 120,
      },
      {
        field: "diffF1",
        headerName: "Diff F1",
        type: "number",
        cellClassName: diffToColor,
        width: 120,
      },
    ];
    for (let row of this.props.submissions) {
      submission_rows.push({
        id: row.submission_id,
        rank: idx,
        name: row.name,
        submission_id: row.submission_id,
        bundle_id: row.bundle_id,
        devEM: (100 * row.dev_scores[MetricType.EM]).toPrecision(3),
        devF1: (100 * row.dev_scores[MetricType.F1]).toPrecision(3),
        devSkill: row.dev_skill.toPrecision(3),
        testEM: row.test_scores[MetricType.EM].toPrecision(3),
        testF1: row.test_scores[MetricType.F1].toPrecision(3),
        diffEM: (
          row.test_scores[MetricType.EM] -
          100 * row.dev_scores[MetricType.EM]
        ).toPrecision(3),
        diffF1: (
          row.test_scores[MetricType.F1] -
          100 * row.dev_scores[MetricType.F1]
        ).toPrecision(3),
      });
      idx += 1;
    }
    return (
      <DataGrid
        rows={submission_rows}
        columns={columns}
        onSelectionChange={(newSelection) => {
          this.updateSelectedSubmissions(
            newSelection.rowIds.map((k) => k.toString())
          );
        }}
        sortingOrder={["desc", "asc", null]}
        rowsPerPageOptions={[500, 100, 50, 25]}
        checkboxSelection
      />
    );
  }