Implement unified, collapsed diff by default and jump to problem line (#115)

* Display unified, collapsed diff by default; otherwise show basic file viewer

* Implement jumping to problem

* Run prettier

Author: phrdang

src/snapshots-app/client/bundles/components/submission/tabs/timeline/BasicFileViewer.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+import Editor from "@monaco-editor/react";
+
+import "./FileViewer.css";
+
+function BasicFileViewer({ code, language, lightMode, editorRef }) {
+  return (
+    <>
+      <Editor
+        onMount={(editor) => {
+          editorRef.current = editor;
+        }}
+        defaultLanguage={language}
+        defaultValue={code}
+        theme={lightMode ? "light" : "vs-dark"}
+        options={{
+          renderValidationDecorations: "on",
+          domReadOnly: true,
+          readOnly: true,
+          renderLineHighlight: "all",
+          renderWhitespace: "all",
+          rulers: [80],
+          scrollBeyondLastLine: false,
+        }}
+      />
+    </>
+  );
+}
+
+export default BasicFileViewer;

src/snapshots-app/client/bundles/components/submission/tabs/timeline/DiffViewer.jsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React from "react";
 
 import Dialog from "@mui/material/Dialog";
 import DialogContent from "@mui/material/DialogContent";
@@ -13,9 +13,16 @@ import { DiffEditor } from "@monaco-editor/react";
 // TODO I have been accidentally relying on this import for styling the entire website
 import "@git-diff-view/react/styles/diff-view.css";
 
-function DiffViewer({ open, onClose, prevFileContents, currentFileContents }) {
-  const editorRef = useRef(null);
-
+// TODO refactor properly
+function DiffViewer({
+  open,
+  onClose,
+  editorRef,
+  prevFileContents,
+  currentFileContents,
+  lightMode = false,
+  renderSideBySide = false,
+}) {
   const onDiffEditorMount = (editor, monaco) => {
     editorRef.current = editor;
 
@@ -34,58 +41,71 @@ function DiffViewer({ open, onClose, prevFileContents, currentFileContents }) {
   };
 
   return (
-    <Dialog
-      open={open}
-      onClose={onClose}
-      aria-labelledby="diff-viewer-dialog-title"
-      aria-describedby="diff-viewer-dialog-description"
-      maxWidth="xl"
-      fullWidth
-    >
-      <DialogTitle id="diff-viewer-dialog-title">Diff Viewer</DialogTitle>
-      <DialogContent>
-        <ButtonGroup
-          sx={{
-            marginBottom: "1rem",
-          }}
+    // <Dialog
+    //   open={open}
+    //   onClose={onClose}
+    //   aria-labelledby="diff-viewer-dialog-title"
+    //   aria-describedby="diff-viewer-dialog-description"
+    //   maxWidth="xl"
+    //   fullWidth
+    // >
+    //   <DialogTitle id="diff-viewer-dialog-title">Diff Viewer</DialogTitle>
+    //   <DialogContent>
+    <>
+      <ButtonGroup
+        sx={{
+          marginBottom: "1rem",
+          position: "sticky",
+        }}
+      >
+        <Button
+          size="small"
+          variant="outlined"
+          startIcon={<ArrowUpwardIcon />}
+          onClick={goToPreviousDiff}
+        >
+          Previous Change
+        </Button>
+        <Button
+          size="small"
+          variant="outlined"
+          endIcon={<ArrowDownwardIcon />}
+          onClick={goToNextDiff}
         >
-          <Button
-            size="small"
-            variant="outlined"
-            startIcon={<ArrowUpwardIcon />}
-            onClick={goToPreviousDiff}
-          >
-            Previous Change
-          </Button>
-          <Button
-            size="small"
-            variant="outlined"
-            endIcon={<ArrowDownwardIcon />}
-            onClick={goToNextDiff}
-          >
-            Next Change
-          </Button>
-        </ButtonGroup>
-        <DiffEditor
-          height="100vh"
-          original={prevFileContents}
-          modified={currentFileContents}
-          language="python"
-          onMount={onDiffEditorMount}
-          // https://github.com/suren-atoyan/monaco-react/issues/647#issuecomment-2897027817
-          keepCurrentOriginalModel={true}
-          keepCurrentModifiedModel={true}
-          options={{
-            readOnly: true,
-            domReadOnly: true,
-            renderLineHighlight: "all",
-            renderWhitespace: "all",
-            rulers: [80],
-            scrollBeyondLastLine: false,
-          }}
-        />
-      </DialogContent>
-    </Dialog>
+          Next Change
+        </Button>
+      </ButtonGroup>
+      <DiffEditor
+        height="100vh"
+        original={prevFileContents}
+        modified={currentFileContents}
+        language="python"
+        theme={lightMode ? "light" : "vs-dark"}
+        onMount={onDiffEditorMount}
+        // https://github.com/suren-atoyan/monaco-react/issues/647#issuecomment-2897027817
+        keepCurrentOriginalModel={true}
+        keepCurrentModifiedModel={true}
+        options={{
+          readOnly: true,
+          domReadOnly: true,
+          renderLineHighlight: "all",
+          renderWhitespace: "all",
+          rulers: [80],
+          scrollBeyondLastLine: false,
+          renderSideBySide: renderSideBySide,
+          // Enable the auto-collapse feature
+          hideUnchangedRegions: {
+            enabled: true,
+            contextLineCount: 5, // Lines of unchanged code to show around a diff
+            minimumLineCount: 3, // Minimum unchanged lines required to trigger a collapse
+            // TODO this isn't working properly
+            revealLineCount: 20, // How many lines to reveal when clicking the "expand" button
+          },
+        }}
+      />
+    </>
+    //   {/* </DialogContent>
+    // </Dialog> */}
   );
 }
 

src/snapshots-app/client/bundles/components/submission/tabs/timeline/Graphs.jsx

@@ -6,6 +6,8 @@ import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import { Tooltip } from "@mui/material";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
+import { Link } from "@mui/material";
+import { List, ListItem } from "@mui/material";
 
 function LinearProgressWithLabel(props) {
   return (
@@ -27,7 +29,67 @@ function LinearProgressWithLabel(props) {
   );
 }
 
-function AssignmentProblems({ history, allProblemDisplayNames, numSolved }) {
+const ProblemJumpLink = ({ lineNumber, editorRef, label }) => {
+  const handleJump = (event) => {
+    // Prevent default link behavior if necessary
+    event.preventDefault();
+
+    const editorInstance = editorRef.current;
+    if (!editorInstance) return;
+
+    const targetEditor = editorInstance.getModifiedEditor
+      ? editorInstance.getModifiedEditor()
+      : editorInstance;
+
+    targetEditor.revealLineInCenter(lineNumber);
+    targetEditor.setPosition({ lineNumber: lineNumber, column: 1 });
+    targetEditor.focus();
+  };
+
+  return (
+    <Link
+      component="button"
+      variant="body2"
+      onClick={handleJump}
+      sx={{
+        textAlign: "left",
+        verticalAlign: "baseline",
+        textDecoration: "none",
+        "&:hover": {
+          textDecoration: "underline",
+        },
+        cursor: "pointer",
+        color: "primary.main",
+        fontWeight: 500,
+      }}
+    >
+      {label || `Line ${lineNumber}`}
+    </Link>
+  );
+};
+
+function AssignmentProblems({
+  history,
+  allProblemDisplayNames,
+  numSolved,
+  editorRef,
+  problemLines,
+}) {
+  function goToLine(lineNumber) {
+    const editor = editorRef.current;
+    if (!editor) return;
+
+    // 1. Check if it's a Diff Editor (has getModifiedEditor method)
+    // 2. Otherwise treat as a standard editor
+    const targetEditor = editor.getModifiedEditor
+      ? editor.getModifiedEditor()
+      : editor;
+
+    targetEditor.revealLineInCenter(lineNumber);
+    targetEditor.setPosition({ lineNumber: lineNumber, column: 1 });
+    targetEditor.focus();
+  }
+
   function getIcon(problemDisplayName) {
     const problemData = history.find(
       (p) => p.display_name === problemDisplayName,
@@ -51,11 +113,72 @@ function AssignmentProblems({ history, allProblemDisplayNames, numSolved }) {
     return (numSolved / allProblemDisplayNames.length) * 100;
   }
 
-  const problems = allProblemDisplayNames.map((problemDisplayName) => (
-    <div>
-      {getIcon(problemDisplayName)} {problemDisplayName}
-    </div>
-  ));
+  // TODO span styling and improve accessibility?
+  const problems = allProblemDisplayNames.map((problemDisplayName) => {
+    const lines = problemLines[problemDisplayName];
+
+    if (problemLines[problemDisplayName].length === 0) {
+      return (
+        <Box
+          key={problemDisplayName}
+          sx={{ display: "flex", alignItems: "center", my: 0.5 }}
+        >
+          {getIcon(problemDisplayName)}
+          <Typography variant="body2" sx={{ ml: 1, color: "text.disabled" }}>
+            {problemDisplayName} (Not found)
+          </Typography>
+        </Box>
+      );
+    } else if (problemLines[problemDisplayName].length === 1) {
+      return (
+        <Box
+          key={problemDisplayName}
+          sx={{ display: "flex", alignItems: "center", my: 0.5 }}
+        >
+          {getIcon(problemDisplayName)}
+          <Box sx={{ ml: 1 }}>
+            <ProblemJumpLink
+              lineNumber={lines[0]}
+              editorRef={editorRef}
+              label={problemDisplayName}
+            />
+          </Box>
+        </Box>
+      );
+    } else {
+      return (
+        <Box key={problemDisplayName} sx={{ my: 1 }}>
+          <Box sx={{ display: "flex", alignItems: "center" }}>
+            {getIcon(problemDisplayName)}
+            <Typography variant="body2" sx={{ ml: 1 }}>
+              {problemDisplayName}
+            </Typography>
+          </Box>
+          <Box
+            sx={{
+              pl: 4,
+              display: "flex",
+              flexDirection: "column",
+              flexWrap: "wrap",
+            }}
+          >
+            <List sx={{ listStyleType: "disc", pl: "1rem" }}>
+              {lines.map((lineNumber) => (
+                <ListItem disablePadding sx={{ display: "list-item" }}>
+                  <ProblemJumpLink
+                    key={`${problemDisplayName}-${lineNumber}`}
+                    lineNumber={lineNumber}
+                    editorRef={editorRef}
+                    label={`Line ${lineNumber}`}
+                  />
+                </ListItem>
+              ))}
+            </List>
+          </Box>
+        </Box>
+      );
+    }
+  });
 
   return (
     <div style={{ paddingTop: "1rem", paddingBottom: "1rem" }}>
@@ -71,6 +194,8 @@ function Graphs({
   currBackupHistory,
   allProblemDisplayNames,
   selectedBackup,
+  problemLines,
+  editorRef,
 }) {
   return (
     <div>
@@ -79,6 +204,8 @@ function Graphs({
         history={currBackupHistory}
         allProblemDisplayNames={allProblemDisplayNames}
         numSolved={numQuestionsSolved[selectedBackup]}
+        problemLines={problemLines}
+        editorRef={editorRef}
       />
     </div>
   );