ADD diff view for the frontend

AnubisLMS · Jan 1, 2022 · bc1b8cf · bc1b8cf
1 parent 238d361
commit bc1b8cf
Show file tree

Hide file tree

Showing 5 changed files with 195 additions and 14 deletions.
diff --git a/web/package.json b/web/package.json
@@ -24,6 +24,7 @@
     "react": "^17.0.2",
     "react-ace": "^9.3.0",
     "react-device-detect": "^1.17.0",
+    "react-diff-view": "^2.4.9",
     "react-dom": "^17.0.2",
     "react-markdown": "^5.0.2",
     "react-router-dom": "^5.1.2",

diff --git a/web/src/Components/Public/SubmissionTestExpanded/SubmissionTestExpanded.jsx b/web/src/Components/Public/SubmissionTestExpanded/SubmissionTestExpanded.jsx
@@ -3,18 +3,59 @@ import {Close} from '@material-ui/icons';
 import Cancel from '@material-ui/icons/Cancel';
 import Button from '@material-ui/core/Button';
 import CheckCircle from '@material-ui/icons/CheckCircle';
-import React from 'react';
+import {parseDiff, Diff, Hunk, tokenize, markEdits} from 'react-diff-view';
+import React, {useMemo} from 'react';
+import 'react-diff-view/style/index.css';
 import {useStyles} from './SubmissionTestExpanded.styles';
 
+const renderToken = (token, defaultRender, i) => {
+  switch (token.type) {
+  case 'space':
+    return (
+      <span key={i} className="space">
+        {token.children && token.children.map((token, i) => renderToken(token, defaultRender, i))}
+      </span>
+    );
+  default:
+    return defaultRender(token, i);
+  }
+};
+
 export default function SubmissionTestExpanded({
   testName,
   submissionID,
   assignmentName,
   testSuccess,
   testResult,
+  testDiff,
   onClose,
 }) {
   const classes = useStyles();
+  const diffs = useMemo(() => {
+    if (!!!testDiff) return undefined;
+    return parseDiff(testDiff);
+  }, [testDiff]);
+  const tokens = useMemo(() => {
+    if (!!!diffs) return undefined;
+    return diffs.map((diff) => tokenize(diff.hunks, {
+      hightlight: false,
+      enhancers: [markEdits(diffs[0].hunks, {type: 'block'})],
+    }));
+  }, [diffs]);
+
+  const renderDiffs = ({oldRevision, newRevision, type, hunks, tokens}) => (
+    <Diff
+      className={classes.testDiff}
+      key={`${oldRevision}-${newRevision}`}
+      viewType='split'
+      diffType={type}
+      hunks={hunks}
+      tokens={tokens}
+      renderToken={renderToken}
+    >
+      {(hunks) => hunks.map((hunk) => <Hunk key={hunk.content} hunk={hunk} />)}
+    </Diff>
+  );
 
   return (
     <div className={classes.submissionTestExpandedContainer}>
@@ -45,6 +86,8 @@ export default function SubmissionTestExpanded({
       <div className={classes.testBody}>
         <Typography className={classes.testOutput}>
           {testResult}
+          <h2>Actual/Expected Output</h2>
+          {diffs && diffs.map((diff, index) => renderDiffs({...diff, tokens: tokens[index]}))}
         </Typography>
       </div>
     </div>

diff --git a/web/src/Components/Public/SubmissionTestExpanded/SubmissionTestExpanded.styles.jsx b/web/src/Components/Public/SubmissionTestExpanded/SubmissionTestExpanded.styles.jsx
@@ -77,5 +77,14 @@ export const useStyles = makeStyles((theme) => ({
     fontSize: '16px',
     paddingBottom: `${theme.spacing(3)}px`,
   },
+  testDiff: {
+    color: theme.palette.gray['100'],
+    borderRadius: '10px',
+  },
+  '@global': {
+    '.diff-code-delete, .diff-gutter-delete, .diff-code-insert, .diff-gutter-insert': {
+      color: 'black',
+    },
+  },
 }));
 
diff --git a/web/src/Pages/Public/Submission/Submission.jsx b/web/src/Pages/Public/Submission/Submission.jsx
@@ -180,6 +180,7 @@ export default function Submission() {
               assignmentName={submission.assignment_name}
               testSuccess={modalTest.result.passed}
               testResult={modalTest.result.stdout}
+              testDiff={modalTest.result.diff}
               onClose={() => closeModal()}
             />
           </Box>