Revamp verdict: expand verdict code and make general info compact

ia-toki · Oct 12, 2023 · 368157d · 368157d
1 parent 26f6b71
commit 368157d
Show file tree

Hide file tree

Showing 17 changed files with 154 additions and 176 deletions.
diff --git a/judgels-client/src/components/GradingVerdictTag/GradingVerdictTag.jsx b/judgels-client/src/components/GradingVerdictTag/GradingVerdictTag.jsx
@@ -0,0 +1,37 @@
+import { Tag } from '@blueprintjs/core';
+import classNames from 'classnames';
+
+import { VerdictTag } from '../VerdictTag/VerdictTag';
+import { VerdictCode } from '../../modules/api/gabriel/verdict';
+
+import './GradingVerdictTag.scss';
+
+export function GradingVerdictTag({ grading, wide }) {
+  const verdict = grading.verdict;
+
+  const getScore = () => {
+    if (verdict.code === VerdictCode.PND || verdict.code === VerdictCode.CE || verdict.code === VerdictCode.ERR) {
+      return null;
+    } else if (verdict.code === VerdictCode.AC) {
+      return grading.score !== 100 ? grading.score : null;
+    } else {
+      return grading.score !== 0 ? grading.score : null;
+    }
+  };
+
+  const renderScore = () => {
+    const score = getScore();
+    if (score === null) {
+      return null;
+    }
+
+    return <Tag className="grading-verdict-tag__score">{score}</Tag>;
+  };
+
+  return (
+    <div className={classNames('grading-verdict-tag', { 'grading-verdict-tag--wide': wide })}>
+      {verdict && <VerdictTag verdictCode={verdict.code} />}
+      {renderScore()}
+    </div>
+  );
+}
diff --git a/judgels-client/src/components/GradingVerdictTag/GradingVerdictTag.scss b/judgels-client/src/components/GradingVerdictTag/GradingVerdictTag.scss
@@ -0,0 +1,12 @@
+.grading-verdict-tag {
+  display: inline-flex;
+  gap: 10px;
+
+  .grading-verdict-tag__score {
+    margin-left: auto;
+  }
+
+  &--wide {
+    width: 100%;
+  }
+}
diff --git a/judgels-client/src/components/SubmissionDetails/Programming/SubmissionDetails.jsx b/judgels-client/src/components/SubmissionDetails/Programming/SubmissionDetails.jsx
@@ -7,6 +7,7 @@ import { FormattedDate } from '../../FormattedDate/FormattedDate';
 import { UserRef } from '../../UserRef/UserRef';
 import { ContentCard } from '../../ContentCard/ContentCard';
 import { VerdictTag } from '../../VerdictTag/VerdictTag';
+import { GradingVerdictTag } from '../../GradingVerdictTag/GradingVerdictTag';
 import { constructProblemName } from '../../../modules/api/sandalphon/problem';
 import {
   getGradingLanguageName,
@@ -26,7 +27,6 @@ export function SubmissionDetails({
   problemName,
   problemAlias,
   problemUrl,
-  containerTitle,
   containerName,
   onDownload,
 }) {
@@ -60,66 +60,26 @@ export function SubmissionDetails({
   };
 
   const renderGeneralInfo = () => {
+    const separator = <>&nbsp;&#9679;&nbsp;</>;
+
     const grading = latestGrading;
 
     return (
-      <>
-        <h4>General Info</h4>
-        <ContentCard>
-          <HTMLTable striped className="programming-submission-details">
-            <thead>
-              <tr>
-                <th className="col-info">Info</th>
-                <th>Value</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>Author</td>
-                <td>
-                  <UserRef profile={profile} />
-                </td>
-              </tr>
-              {problemName && (
-                <tr>
-                  <td>Problem</td>
-                  <td>
-                    {!!problemUrl ? (
-                      <Link to={problemUrl}>{constructProblemName(problemName, problemAlias)}</Link>
-                    ) : (
-                      constructProblemName(problemName, problemAlias)
-                    )}
-                  </td>
-                </tr>
-              )}
-              {containerName && (
-                <tr>
-                  <td>{containerTitle}</td>
-                  <td>{containerName}</td>
-                </tr>
-              )}
-              <tr>
-                <td>Language</td>
-                <td>{getGradingLanguageName(gradingLanguage)}</td>
-              </tr>
-              <tr>
-                <td>Verdict</td>
-                <td>{grading && <VerdictTag verdictCode={grading.verdict.code} />}</td>
-              </tr>
-              <tr>
-                <td>Score</td>
-                <td>{grading && grading.score}</td>
-              </tr>
-              <tr>
-                <td>Time</td>
-                <td>
-                  <FormattedDate value={time} showSeconds />
-                </td>
-              </tr>
-            </tbody>
-          </HTMLTable>
-        </ContentCard>
-      </>
+      <div className="general-info">
+        {grading && <GradingVerdictTag grading={grading} />} {separator} <UserRef profile={profile} />
+        {(containerName || problemName) && (
+          <>
+            {' '}
+            {separator} {containerName && <>{containerName} / </>}
+            {problemName && !!problemUrl ? (
+              <Link to={problemUrl}>{constructProblemName(problemName, problemAlias)}</Link>
+            ) : (
+              constructProblemName(problemName, problemAlias)
+            )}
+          </>
+        )}{' '}
+        {separator} {getGradingLanguageName(gradingLanguage)} {separator} <FormattedDate value={time} showSeconds />
+      </div>
     );
   };
 
@@ -131,7 +91,7 @@ export function SubmissionDetails({
     const results = latestGrading.details.subtaskResults.map(({ verdict, score }, idx) => (
       <tr key={idx}>
         <td>{idx + 1}</td>
-        <td className="col-centered">
+        <td>
           <VerdictTag verdictCode={verdict.code} />
         </td>
         <td>{score}</td>
@@ -166,7 +126,7 @@ export function SubmissionDetails({
     const results = details.testDataResults[0].testCaseResults.map((result, idx) => (
       <tr key={idx}>
         <td>{idx + 1}</td>
-        <td className="col-centered">
+        <td>
           <VerdictTag verdictCode={result.verdict.code} />
         </td>
         <td>{renderExecutionTime(result)}</td>
@@ -212,7 +172,7 @@ export function SubmissionDetails({
       const results = group.testCaseResults.map((result, idx2) => (
         <tr key={idx2}>
           <td>{idx2 + 1}</td>
-          <td className="col-centered">
+          <td>
             <VerdictTag verdictCode={result.verdict.code} />
           </td>
           <td>{renderExecutionTime(result)}</td>

diff --git a/judgels-client/src/components/SubmissionDetails/Programming/SubmissionDetails.scss b/judgels-client/src/components/SubmissionDetails/Programming/SubmissionDetails.scss
@@ -25,8 +25,7 @@
   }
 
   .col-verdict {
-    width: 100px;
-    text-align: center;
+    width: 160px;
   }
 
   .col-tc-info {
@@ -42,6 +41,10 @@
     text-align: center;
   }
 
+  .general-info {
+    margin-bottom: 25px;
+  }
+
   .test-group__id {
     float: left;
   }

diff --git a/judgels-client/src/components/SubmissionsTable/Programming/SubmissionsTable.scss b/judgels-client/src/components/SubmissionsTable/Programming/SubmissionsTable.scss
@@ -1,38 +1,6 @@
 @import '../../../styles/table';
 
 .submissions-table {
-  .col-regrade {
-    width: 7px;
-  }
-
-  .col-id {
-    width: 106px;
-  }
-
-  .col-prob {
-    width: 80px;
-  }
-
-  .col-lang {
-    width: 90px;
-  }
-
-  .col-verdict {
-    width: 60px;
-  }
-
-  .col-pts {
-    width: 60px;
-  }
-
-  .col-actions {
-    width: 50px;
-  }
-
-  .cell-centered {
-    text-align: center;
-  }
-
   .action {
     cursor: pointer;
   }

diff --git a/judgels-client/src/components/VerdictTag/VerdictTag.jsx b/judgels-client/src/components/VerdictTag/VerdictTag.jsx
@@ -1,13 +1,11 @@
 import { Tag } from '@blueprintjs/core';
-import { Time } from '@blueprintjs/icons';
 
-import { getVerdictDisplayCode, getVerdictIntent, VerdictCode } from '../../modules/api/gabriel/verdict';
+import { getVerdictDisplayName, getVerdictIntent } from '../../modules/api/gabriel/verdict';
 
 export const VerdictTag = ({ verdictCode }) => {
-  const tag = verdictCode === VerdictCode.PND ? <Time /> : getVerdictDisplayCode(verdictCode);
   return (
     <Tag round intent={getVerdictIntent(verdictCode)}>
-      {tag}
+      {getVerdictDisplayName(verdictCode)}
     </Tag>
   );
 };
diff --git a/judgels-client/src/modules/api/gabriel/verdict.js b/judgels-client/src/modules/api/gabriel/verdict.js
@@ -19,15 +19,21 @@ const verdictIntentsMap = {
   [VerdictCode.SKP]: Intent.NONE,
 };
 
-const verdictDisplayCodeMap = {
-  [VerdictCode.ERR]: 'ERR',
-  [VerdictCode.SKP]: 'SKIPPED',
+const verdictDisplayNamesMap = {
+  [VerdictCode.AC]: 'Accepted',
+  [VerdictCode.WA]: 'Wrong Answer',
+  [VerdictCode.TLE]: 'Time Limit Exceeded',
+  [VerdictCode.RTE]: 'Runtime Error',
+  [VerdictCode.CE]: 'Compilation Error',
+  [VerdictCode.PND]: 'Pending',
+  [VerdictCode.ERR]: 'Internal Error',
+  [VerdictCode.SKP]: 'Skipped',
 };
 
 export function getVerdictIntent(code) {
   return verdictIntentsMap[code] || Intent.WARNING;
 }
 
-export function getVerdictDisplayCode(code) {
-  return verdictDisplayCodeMap[code] || code;
+export function getVerdictDisplayName(code) {
+  return verdictDisplayNamesMap[code] || code;
 }
diff --git a/...sts/single/submissions/Programming/ContestSubmissionsPage/ContestSubmissionsPage.test.jsx b/...sts/single/submissions/Programming/ContestSubmissionsPage/ContestSubmissionsPage.test.jsx
@@ -107,8 +107,8 @@ describe('ContestSubmissionsPage', () => {
       it('shows the submissions', () => {
         expect(wrapper.find('tr').map(tr => tr.find('td').map(td => td.text().trim()))).toEqual([
           [],
-          ['20', 'A', 'C++17', '', '', '1 day ago', 'search'],
-          ['10', 'B', 'C++17', 'WA', '70', '2 days ago', 'search'],
+          ['20', 'A', 'C++17', '', '1 day ago', 'search'],
+          ['10', 'B', 'C++17', 'Wrong Answer70', '2 days ago', 'search'],
         ]);
       });
     });
@@ -123,8 +123,8 @@ describe('ContestSubmissionsPage', () => {
       it('shows the submissions', () => {
         expect(wrapper.find('tr').map(tr => tr.find('td').map(td => td.text().trim()))).toEqual([
           [],
-          ['20', 'user1', 'A', 'C++17', '', '', '1 day ago', 'search'],
-          ['10', 'user2', 'B', 'C++17', 'WA', '70', '2 days ago', 'search'],
+          ['20', 'user1', 'A', 'C++17', '', '1 day ago', 'search'],
+          ['10', 'user2', 'B', 'C++17', 'Wrong Answer70', '2 days ago', 'search'],
         ]);
       });
     });
@@ -148,8 +148,8 @@ describe('ContestSubmissionsPage', () => {
           )
         ).toEqual([
           [],
-          ['20 refresh', 'user1', 'A', 'C++17', '', '', '1 day ago', 'search'],
-          ['10 refresh', 'user2', 'B', 'C++17', 'WA', '70', '2 days ago', 'search'],
+          ['20 refresh', 'user1', 'A', 'C++17', '', '1 day ago', 'search'],
+          ['10 refresh', 'user2', 'B', 'C++17', 'Wrong Answer70', '2 days ago', 'search'],
         ]);
       });
     });

diff --git a/...ntests/single/submissions/Programming/ContestSubmissionsTable/ContestSubmissionsTable.jsx b/...ntests/single/submissions/Programming/ContestSubmissionsTable/ContestSubmissionsTable.jsx
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 
 import { FormattedRelative } from '../../../../../../../components/FormattedRelative/FormattedRelative';
 import { UserRef } from '../../../../../../../components/UserRef/UserRef';
-import { VerdictTag } from '../../../../../../../components/VerdictTag/VerdictTag';
+import { GradingVerdictTag } from '../../../../../../../components/GradingVerdictTag/GradingVerdictTag';
 import { getGradingLanguageName } from '../../../../../../../modules/api/gabriel/language.js';
 
 import '../../../../../../../components/SubmissionsTable/Programming/SubmissionsTable.scss';
@@ -22,14 +22,13 @@ export function ContestSubmissionsTable({
     return (
       <thead>
         <tr>
-          <th className="col-id">ID</th>
-          {canSupervise && <th className="col-user">User</th>}
-          <th className="col-prob">Prob</th>
-          <th className="col-lang">Lang</th>
-          <th className="col-verdict">Verdict</th>
-          <th className="col-pts">Pts</th>
+          <th className="col-fit">ID</th>
+          {canSupervise && <th>User</th>}
+          <th className="col-fit">Prob</th>
+          <th className="col-fit">Lang</th>
+          <th className="col-fit">Verdict</th>
           <th>Time</th>
-          <th className="col-actions" />
+          <th className="col-fit" />
         </tr>
       </thead>
     );
@@ -38,7 +37,7 @@ export function ContestSubmissionsTable({
   const renderRows = () => {
     const rows = submissions.map(submission => (
       <tr key={submission.jid}>
-        <td>
+        <td className="col-fit">
           {submission.id}
           {canManage && (
             <>
@@ -52,16 +51,15 @@ export function ContestSubmissionsTable({
             <UserRef profile={profilesMap[submission.userJid]} />
           </td>
         )}
-        <td>{problemAliasesMap[submission.problemJid]}</td>
-        <td>{getGradingLanguageName(submission.gradingLanguage)}</td>
-        <td className="cell-centered">
-          {submission.latestGrading && <VerdictTag verdictCode={submission.latestGrading.verdict.code} />}
+        <td className="col-fit">{problemAliasesMap[submission.problemJid]}</td>
+        <td className="col-fit">{getGradingLanguageName(submission.gradingLanguage)}</td>
+        <td className="col-fit">
+          {submission.latestGrading && <GradingVerdictTag wide grading={submission.latestGrading} />}
         </td>
-        <td>{submission.latestGrading && submission.latestGrading.score}</td>
         <td>
-          <FormattedRelative value={submission.time} />{' '}
+          <FormattedRelative value={submission.time} />
         </td>
-        <td className="cell-centered">
+        <td className="col-fit">
           <Link className="action" to={`/contests/${contest.slug}/submissions/${submission.id}`}>
             <Search />
           </Link>

diff --git a/...sts/single/submissions/Programming/single/ContestSubmissionPage/ContestSubmissionPage.jsx b/...sts/single/submissions/Programming/single/ContestSubmissionPage/ContestSubmissionPage.jsx
@@ -65,7 +65,6 @@ export class ContestSubmissionPage extends Component {
         problemName={problemName}
         problemAlias={problemAlias}
         problemUrl={`/contests/${contest.slug}/problems/${problemAlias}`}
-        containerTitle="Contest"
         containerName={containerName}
         onDownload={this.downloadSubmission}
       />