finish UI for new online judge

thecodingwizard · thecodingwizard · commit 47bbe58eb5c2 · 2021-12-04T19:11:00.000-08:00
diff --git a/src/components/Groups/OnlineJudgeSubmission/OnlineJudgeSubmission.tsx b/src/components/Groups/OnlineJudgeSubmission/OnlineJudgeSubmission.tsx
@@ -1,47 +1,58 @@
 import React from 'react';
+import { ProblemSubmissionResult } from '../../../models/groups/problem';
+import TestCaseResult from './TestCaseResult';
 
 const OnlineJudgeSubmission = ({
   submission,
 }: {
-  submission: any;
+  submission: ProblemSubmissionResult;
 }): JSX.Element => {
   return (
-    <pre>{JSON.stringify(submission, null, 2)}</pre>
-    // <div>
-    //   <div>
-    //     {submission.gradingStatus === 'waiting' &&
-    //       'Waiting for an available grading server...'}
-    //     {submission.gradingStatus === 'in_progress' && 'Grading in progress'}
-    //     {submission.gradingStatus === 'done' &&
-    //       (submission.compilationError ? 'Compilation Error' : 'Done')}
-    //     {submission.gradingStatus === 'error' &&
-    //       (submission.errorMessage
-    //         ? 'Error: ' + submission.errorMessage
-    //         : 'Error')}
-    //   </div>
-    //   {submission.gradingStatus === 'done' &&
-    //     submission.status !== ExecutionStatus.AC && (
-    //       <p>
-    //         Common issues: Java users should name their class Main. Remember to
-    //         use standard input/output instead of file input/output. Finally, our
-    //         grader currently has an issue that requires you to output an endline
-    //         (ex. \n or endl) at the end of the output. This is a bug (it works
-    //         on USACO without the endline) that we're working on fixing.
-    //       </p>
-    //     )}
-    //   {submission.compilationError === true && (
-    //     <pre className="text-red-800 dark:text-red-200 overflow-auto">
-    //       {submission.compilationErrorMessage}
-    //     </pre>
-    //   )}
-    //   {submission.compilationError === false && (
-    //     <div>
-    //       {submission.testCases.map(tc => (
-    //         <TestCaseResult data={tc} key={tc.caseId} />
-    //       ))}
-    //     </div>
-    //   )}
-    // </div>
+    <div>
+      <div>
+        {submission.status === 'compiling' && 'Compiling in progress...'}
+        {submission.status === 'executing' && 'Grading in progress...'}
+        {submission.status === 'done' &&
+          (submission.verdict === 'CE'
+            ? 'Compilation Error'
+            : submission.verdict === 'IE'
+            ? 'Internal Error: ' +
+              submission.message +
+              ' ' +
+              submission.debugData
+            : 'Done')}
+      </div>
+      {submission.verdict !== 'IE' && (
+        <>
+          {submission.status === 'done' && submission.verdict !== 'AC' && (
+            <p>
+              Common issues: Java users should name their class Main. Remember
+              to use standard input/output instead of file input/output.
+              Finally, our grader currently has an issue that requires you to
+              output an endline (ex. \n or endl) at the end of the output. This
+              is a bug (it works on USACO without the endline) that we're
+              working on fixing.
+            </p>
+          )}
+          {submission.verdict === 'CE' && (
+            <pre className="text-red-800 dark:text-red-200 overflow-auto">
+              {submission.message}
+            </pre>
+          )}
+          {submission.verdict !== 'CE' && (
+            <div>
+              {submission.testCases.map((tc, i) => (
+                <TestCaseResult
+                  data={tc}
+                  tcNum={i + 1}
+                  key={submission.submissionID + '_' + i}
+                />
+              ))}
+            </div>
+          )}
+        </>
+      )}
+    </div>
   );
 };
 
diff --git a/src/components/Groups/OnlineJudgeSubmission/TestCaseResult.tsx b/src/components/Groups/OnlineJudgeSubmission/TestCaseResult.tsx
@@ -1,42 +1,48 @@
 import React from 'react';
 import {
-  getTestCaseSymbol,
-  TestCaseResult as TestCaseResultType,
+  ProblemSubmissionTestCaseResult,
+  verdictToSymbol,
 } from '../../../models/groups/problem';
 
 const TestCaseResult = ({
   data,
+  tcNum,
 }: {
-  data: TestCaseResultType;
+  data: ProblemSubmissionTestCaseResult | null;
+  tcNum: number;
 }): JSX.Element => {
-  const containerClasses = data.pass
-    ? 'bg-green-100 border-green-200 dark:bg-green-700 dark:border-green-700'
-    : 'bg-red-100 border-red-200 dark:bg-red-700 dark:border-red-700';
-  const textColor = data.pass
-    ? 'text-green-800 dark:text-green-100'
-    : 'text-red-800 dark:text-red-100';
+  const containerClasses = data
+    ? data.verdict === 'AC'
+      ? 'bg-green-100 border-green-200 dark:bg-green-700 dark:border-green-700'
+      : 'bg-red-100 border-red-200 dark:bg-red-700 dark:border-red-700'
+    : 'bg-gray-100 border-gray-200 dark:bg-gray-700 dark:border-gray-700';
+  const textColor = data
+    ? data.verdict === 'AC'
+      ? 'text-green-800 dark:text-green-100'
+      : 'text-red-800 dark:text-red-100'
+    : 'text-transparent';
   return (
     <div
       className={`m-1 inline-block w-[70px] h-[60px] dark:bg-opacity-50 border ${containerClasses} relative`}
-      title={data.pass === true ? 'Correct answer' : data.error}
+      title={data ? data.verdict : 'Loading...'}
     >
       <div
         className={`font-bold text-center text-[2.5rem] ${textColor} leading-10`}
       >
-        {getTestCaseSymbol(data)}
+        {data ? verdictToSymbol[data.verdict] : '.'}
       </div>
       <span
         className={`absolute bottom-0 left-[4px] ${textColor} text-[0.8125rem] font-bold`}
       >
-        {data.caseId + 1}
+        {tcNum}
       </span>
-      {data.pass && (
+      {data?.verdict === 'AC' && (
         <span
           className={`absolute bottom-0 right-0 text-right ${textColor} leading-3 p-[2px] text-[0.625rem]`}
         >
-          {/* {data.memory}kb
-          <br /> */}
-          {data.time}ms
+          {data.memory}kb
+          <br />
+          {data.time}s
         </span>
       )}
     </div>
diff --git a/src/components/Groups/ProblemPage/ProblemSidebar.tsx b/src/components/Groups/ProblemPage/ProblemSidebar.tsx
@@ -86,7 +86,7 @@ export default function ProblemSidebar({
             Source: {problem.source}
           </span>
         </div>
-        {problem.usacoGuideId && (
+        {/* {problem.usacoGuideId && (
           <div className="flex items-center space-x-2">
             <LinkIcon className="h-5 w-5 text-gray-400 dark:text-gray-400" />
             <span className="text-gray-900 dark:text-gray-300 text-sm font-medium">
@@ -99,7 +99,7 @@ export default function ProblemSidebar({
               </TextTooltip>
             </span>
           </div>
-        )}
+        )} */}
         <SidebarDueDate post={post} />
       </div>
       <div className="mt-6 border-t border-gray-200 dark:border-gray-700 py-6 space-y-8">
diff --git a/src/components/Groups/ProblemPage/ProblemSubmissionInterface.tsx b/src/components/Groups/ProblemPage/ProblemSubmissionInterface.tsx
@@ -10,7 +10,6 @@ import {
   ExecutionStatus,
   GroupProblemData,
   Submission,
-  SubmissionType,
 } from '../../../models/groups/problem';
 import ButtonGroup from '../../ButtonGroup';
 import TabIndentableTextarea from '../../elements/TabIndentableTextarea';
@@ -35,11 +34,6 @@ export default function ProblemSubmissionInterface({
   problem: GroupProblemData;
 }) {
   const { lang, firebaseUser } = React.useContext(UserDataContext);
-  if (problem.submissionType !== SubmissionType.SELF_GRADED) {
-    throw new Error(
-      "Problem submission interface doesn't support CCC problems yet"
-    );
-  }
   const emptySubmission: Partial<Submission> = {
     problemId: problem.id,
     type: problem.submissionType,
@@ -87,18 +81,11 @@ export default function ProblemSubmissionInterface({
     );
   }
 
-  // todo remove
-  const isCPIClass =
-    '2i0ZZTfYhlxGi9OEIjy2' === activeGroup.activeGroupId ||
-    'd7eYGfddXq3m2trXG2xt' === activeGroup.activeGroupId;
-  // 'UyefpawGOgGFh14ptihn' === activeGroup.activeGroupId; // todo remove (mvcpc club)
   // todo add ys?
-  const cannotSubmit =
-    isCPIClass &&
-    !(
-      problem.usacoGuideId?.startsWith('usaco') ||
-      problem.usacoGuideId?.startsWith('cses')
-    );
+  const cannotSubmit = !(
+    problem.usacoGuideId?.startsWith('usaco') ||
+    problem.usacoGuideId?.startsWith('cses')
+  );
 
   if (cannotSubmit) {
     return (
@@ -143,37 +130,28 @@ export default function ProblemSubmissionInterface({
         </h2>
       </div>
       <div className="text-sm mt-1 text-gray-900 dark:text-gray-300">
-        {isCPIClass ? (
-          <>
-            All problems submitted through this website use standard
-            input/output. When using Java, make sure to name your class Main.
-            You can use{' '}
-            <a
-              href="https://ide.usaco.guide/"
-              target="_blank"
-              rel="noreferrer"
-              className="underline"
-            >
-              ide.usaco.guide
-            </a>{' '}
-            to test your code online. Report any issues to{' '}
-            <a
-              href="mailto:classes@joincpi.org"
-              target="_blank"
-              rel="noreferrer"
-              className="underline"
-            >
-              classes@joincpi.org
-            </a>
-            .
-          </>
-        ) : (
-          <>
-            <b>Self-graded problem:</b> Use the Problem Statement link above to
-            test your code. Submit your <i>working</i> code below. Group admins
-            will manually verify your code to ensure that your code works.
-          </>
-        )}
+        <>
+          All problems submitted through this website use standard input/output.
+          When using Java, make sure to name your class Main. You can use{' '}
+          <a
+            href="https://ide.usaco.guide/"
+            target="_blank"
+            rel="noreferrer"
+            className="underline"
+          >
+            ide.usaco.guide
+          </a>{' '}
+          to test your code online. Report any issues to{' '}
+          <a
+            href="mailto:classes@joincpi.org"
+            target="_blank"
+            rel="noreferrer"
+            className="underline"
+          >
+            classes@joincpi.org
+          </a>
+          .
+        </>
       </div>
       {submissionResult && (
         <div className="mt-4">
diff --git a/src/context/UserDataContext/UserDataContext.tsx b/src/context/UserDataContext/UserDataContext.tsx
@@ -261,7 +261,7 @@ export const UserDataProvider = ({
   // If the user is signed in, sync remote data with local data
   React.useEffect(() => {
     if (firebaseUser) {
-      firebaseUser.getIdToken(true).then(token => console.log(token));
+      // firebaseUser.getIdToken(true).then(token => console.log(token));
 
       const userDoc = doc(getFirestore(firebaseApp), 'users', firebaseUser.uid);
       return onSnapshot(userDoc, {
diff --git a/src/hooks/groups/usePostActions.ts b/src/hooks/groups/usePostActions.ts
@@ -31,9 +31,8 @@ export interface ProblemSubmissionRequestData {
 
 export function usePostActions(groupId: string) {
   const firebaseApp = useFirebaseApp();
-  const { firebaseUser, setUserProgressOnProblems } = useContext(
-    UserDataContext
-  );
+  const { firebaseUser, setUserProgressOnProblems } =
+    useContext(UserDataContext);
 
   const updatePost = async (postId: string, updatedData: Partial<PostData>) => {
     await updateDoc(
diff --git a/src/hooks/useProblemSubmissionResult.ts b/src/hooks/useProblemSubmissionResult.ts
@@ -16,12 +16,13 @@ export default function useProblemSubmissionResult() {
 
       setResult(data);
 
-      if (res.ok && data.status === 'executing') {
+      if (res.ok && data.status !== 'done') {
         setTimeout(() => queryResult(curSubmission, submissionID), 1000);
       }
     };
 
     if (submissionID) {
+      setResult(null);
       queryResult(++currentSubmission.current, submissionID);
     }
   }, [submissionID]);
diff --git a/src/models/groups/problem.ts b/src/models/groups/problem.ts
@@ -119,25 +119,51 @@ export type TestCaseResult = { caseId: number } & (
     }
 );
 
-export const getTestCaseSymbol = (testCase: TestCaseResult): string => {
-  if (testCase.pass === true) {
-    return '*';
-  }
-  switch (testCase.error) {
-    case TestResultError.COMPILE_TIMEOUT:
-    case TestResultError.COMPILE_ERROR:
-      return 'c';
-    case TestResultError.RUNTIME_ERROR:
-      return '!';
-    case TestResultError.TIME_LIMIT_EXCEEDED:
-      return 't';
-    case TestResultError.EMPTY_MISSING_OUTPUT:
-      return 'e';
-    case TestResultError.WRONG_ANSWER:
-      return 'x';
-    case TestResultError.INTERNAL_ERROR:
-      return '?';
-  }
+
+// Temporarily taken from online-judge repo
+export interface ProblemSubmissionResult {
+  submissionID: string;
+  status: "compiling" | "executing" | "done";
+  verdict?: ExecutionVerdict;
+  testCases: (ProblemSubmissionTestCaseResult | null)[];
+
+  problemID: string;
+  language: string;
+  filename: string;
+  sourceCode: string; // gzipped in dynamodb
+  message?: string; // gzipped in dynamodb. used either for compiling or internal error.
+  debugData?: string; // gzipped in dynamodb. optionally provided for internal_error
+}
+
+export interface ProblemSubmissionTestCaseResult {
+  verdict: ExecutionVerdict;
+  time: string;
+  memory: string;
+
+  // each of these is truncated to 4kb then gzipped in dynamodb
+  input: string;
+  expectedOutput: string;
+  stdout: string;
+  stderr: string;
+}
+
+export type ExecutionVerdict =
+  | "AC"
+  | "WA"
+  | "RTE"
+  | "MLE"
+  | "TLE"
+  | "CE"
+  | "IE"; // IE is internal error
+
+export const verdictToSymbol: {[key in ExecutionVerdict]: string} = {
+  "AC": "*",
+  "WA": "x",
+  "RTE": "!",
+  "MLE": "m",
+  "TLE": "t",
+  "CE": "c",
+  "IE": "?",
 };
 
 export const submissionTextColor: { [key in ExecutionStatus]: string } = {

Original file line number	Diff line number	Diff line change
`@@ -16,12 +16,13 @@ export default function useProblemSubmissionResult() {`
`16`	`16`
`17`	`17`	`setResult(data);`
`18`	`18`
`19`		`- if (res.ok && data.status === 'executing') {`
	`19`	`+ if (res.ok && data.status !== 'done') {`
`20`	`20`	`setTimeout(() => queryResult(curSubmission, submissionID), 1000);`
`21`	`21`	`}`
`22`	`22`	`};`
`23`	`23`
`24`	`24`	`if (submissionID) {`
	`25`	`+ setResult(null);`
`25`	`26`	`queryResult(++currentSubmission.current, submissionID);`
`26`	`27`	`}`
`27`	`28`	`}, [submissionID]);`