Implement jumping to problem

phrdang · phrdang · commit 60927d8784c7 · 2026-04-16T12:54:20.000-07:00
diff --git a/src/snapshots-app/client/bundles/components/submission/tabs/timeline/BasicFileViewer.jsx b/src/snapshots-app/client/bundles/components/submission/tabs/timeline/BasicFileViewer.jsx
@@ -4,11 +4,15 @@ import Editor from "@monaco-editor/react";
 
 import "./FileViewer.css";
 
-function BasicFileViewer({ code, language, lightMode }) {
+function BasicFileViewer({ code, language, lightMode, editorRef }) {
+
 
   return (
     <>
       <Editor
+      onMount={(editor) => {
+    editorRef.current = editor;
+  }}
         defaultLanguage={language}
         defaultValue={code}
         theme={lightMode ? "light" : "vs-dark"}
diff --git a/src/snapshots-app/client/bundles/components/submission/tabs/timeline/DiffViewer.jsx b/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";
@@ -17,12 +17,12 @@ import "@git-diff-view/react/styles/diff-view.css";
 function DiffViewer({
   open,
   onClose,
+  editorRef,
   prevFileContents,
   currentFileContents,
   lightMode = false,
   renderSideBySide = false,
 }) {
-  const editorRef = useRef(null);
 
   const onDiffEditorMount = (editor, monaco) => {
     editorRef.current = editor;
diff --git a/src/snapshots-app/client/bundles/components/submission/tabs/timeline/Graphs.jsx b/src/snapshots-app/client/bundles/components/submission/tabs/timeline/Graphs.jsx
@@ -6,6 +6,9 @@ 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 +30,68 @@ 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 +115,61 @@ 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 +185,8 @@ function Graphs({
   currBackupHistory,
   allProblemDisplayNames,
   selectedBackup,
+  problemLines,
+  editorRef,
 }) {
   return (
     <div>
@@ -79,6 +195,8 @@ function Graphs({
         history={currBackupHistory}
         allProblemDisplayNames={allProblemDisplayNames}
         numSolved={numQuestionsSolved[selectedBackup]}
+        problemLines={problemLines}
+        editorRef={editorRef}
       />
     </div>
   );
diff --git a/src/snapshots-app/client/bundles/components/submission/tabs/timeline/TimelineTab.jsx b/src/snapshots-app/client/bundles/components/submission/tabs/timeline/TimelineTab.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import { styled } from "@mui/material/styles";
 import Toolbar from "@mui/material/Toolbar";
 import Box from "@mui/material/Box";
@@ -91,6 +91,8 @@ function TimelineTab() {
   const routeParams = useParams();
   const navigate = useNavigate();
 
+  const editorRef = useRef(null);
+
   // Fetch backups
   React.useEffect(() => {
     fetch(
@@ -413,6 +415,43 @@ function TimelineTab() {
     return null;
   }
 
+  function goToLine(lineNumber) {
+    if (editorRef.current) {
+      // Centers the line in the viewport
+      editorRef.current.revealLineInCenter(lineNumber);
+
+      // Moves the cursor to that line
+      editorRef.current.setPosition({ lineNumber: lineNumber, column: 1 });
+
+      // Focuses the editor
+      editorRef.current.focus();
+    }
+  }
+
+  function getProblemLines(code, problemNames) {
+    const result = {};
+    problemNames.forEach((name) => {
+      result[name] = [];
+    });
+
+    const lines = code.split("\n");
+
+    lines.forEach((lineText, index) => {
+      const trimmedLine = lineText.trim();
+
+      if (trimmedLine.startsWith("# BEGIN ")) {
+        const problemName = trimmedLine.replace("# BEGIN ", "").trim();
+
+        // If this name is in our target list, add the line number (1-indexed)
+        if (result.hasOwnProperty(problemName)) {
+          result[problemName].push(index + 1);
+        }
+      }
+    });
+
+    return result;
+  }
+
   return (
     <Box sx={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
       {backups.length === 0 ? (
@@ -534,15 +573,22 @@ function TimelineTab() {
             {code === "" ? (
               <CircularProgress />
             ) : (
-              <div style={{ paddingLeft: "1rem", paddingRight: "1rem", height: "100%" }}>
+              <div
+                style={{
+                  paddingLeft: "1rem",
+                  paddingRight: "1rem",
+                  height: "100%",
+                }}
+              >
                 {selectedBackup === 0 ||
                 code === "" ||
                 prevFileContents === "" ||
                 prevFileContents === code ? (
                   <BasicFileViewer
                     code={code}
-                    language={"python"}
+                    language={getLanguage(file)}
                     lightMode={lightMode}
+                    editorRef={editorRef}
                   />
                 ) : (
                   <DiffViewer
@@ -553,6 +599,7 @@ function TimelineTab() {
                     selectedFile={file}
                     prevFileContents={prevFileContents}
                     lightMode={lightMode}
+                    editorRef={editorRef}
                   />
                 )}
               </div>
@@ -581,6 +628,8 @@ function TimelineTab() {
                 currBackupHistory={backups[selectedBackup].history}
                 allProblemDisplayNames={allProblemDisplayNames}
                 selectedBackup={selectedBackup}
+                problemLines={getProblemLines(code, allProblemDisplayNames)}
+                editorRef={editorRef}
               />
             )}
           </RightSidebar>
