Fix bug in computing diff with previous backup

src/snapshots-app/client/bundles/components/submission/tabs/debugging/PrintStatements.jsx

@@ -47,8 +47,6 @@ const PrintStatements = () => {
       .then((responseData) => setDiffData(responseData));
   }, [routeParams]);
 
-
-
   // Sort by timestamp, descending order (Newest first)
   const sortedData = useMemo(
     () =>
@@ -61,15 +59,14 @@ const PrintStatements = () => {
   const [selectedId, setSelectedId] = useState(null);
   const [selectedFileName, setSelectedFileName] = useState(
     // sortedData[0]?.files[0]?.name || "",
-    "ants.py"
+    "ants.py",
   );
 
   // Default to the most recent event (first in sorted array)
   useEffect(() => {
     if (sortedData.length > 0) {
-      setSelectedId(sortedData[0].id)
+      setSelectedId(sortedData[0].id);
     }
-
   }, [sortedData]);
 
   // Group by problem (this maintains the descending order from sortedData)
@@ -86,8 +83,6 @@ const PrintStatements = () => {
     [selectedId, sortedData],
   );
 
-
-
   // Auto-select first file
   // useMemo(() => {
   //   if (

src/snapshots-app/client/bundles/components/submission/tabs/summary/BackupCalendarChart.jsx

@@ -31,33 +31,32 @@ const BackupCalendarChart = () => {
   }, [routeParams]);
 
   const startDate = useMemo(() => {
-  const keys = Object.keys(rawCalendarData);
-  if (keys.length === 0) return null;
-  // Sort alphabetically to get the earliest string
-  return keys.sort()[0];
-}, [rawCalendarData]);
-
-const endDate = useMemo(() => {
-  const keys = Object.keys(rawCalendarData);
-  if (keys.length === 0) return null;
-  // Sort alphabetically to get the latest string
-  return keys.sort()[keys.length - 1];
-}, [rawCalendarData]);
+    const keys = Object.keys(rawCalendarData);
+    if (keys.length === 0) return null;
+    // Sort alphabetically to get the earliest string
+    return keys.sort()[0];
+  }, [rawCalendarData]);
 
+  const endDate = useMemo(() => {
+    const keys = Object.keys(rawCalendarData);
+    if (keys.length === 0) return null;
+    // Sort alphabetically to get the latest string
+    return keys.sort()[keys.length - 1];
+  }, [rawCalendarData]);
 
   const calendarData = useMemo(() => {
-  if (!startDate || !endDate) return [];
-  const data = [];
-  let curr = new Date(startDate + "T00:00:00"); // Force local time start
-  const last = new Date(endDate + "T00:00:00");
+    if (!startDate || !endDate) return [];
+    const data = [];
+    let curr = new Date(startDate + "T00:00:00"); // Force local time start
+    const last = new Date(endDate + "T00:00:00");
 
-  while (curr <= last) {
-    const dateString = echarts.time.format(curr, "{yyyy}-{MM}-{dd}", false);
-    data.push([dateString, rawCalendarData[dateString] || 0]);
-    curr.setDate(curr.getDate() + 1); // Native way to increment day
-  }
-  return data;
-}, [rawCalendarData, startDate, endDate]);
+    while (curr <= last) {
+      const dateString = echarts.time.format(curr, "{yyyy}-{MM}-{dd}", false);
+      data.push([dateString, rawCalendarData[dateString] || 0]);
+      curr.setDate(curr.getDate() + 1); // Native way to increment day
+    }
+    return data;
+  }, [rawCalendarData, startDate, endDate]);
 
   const option = useMemo(
     () => ({

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

@@ -172,16 +172,19 @@ function TimelineButtonGroup({
         style={{ width: "100%" }}
       >
         {backups.map((backup, relativeIndex) => {
-          const isSelected = relativeIndex + absoluteStartIndex === selectedBackup;
-
-          return (<TimelineButton
-            backup={backup}
-            selected={isSelected}
-            index={relativeIndex + absoluteStartIndex}
-            handleBackupSelect={handleBackupSelect}
-            ref={isSelected ? selectedRef : null}
-          />);
-})}
+          const isSelected =
+            relativeIndex + absoluteStartIndex === selectedBackup;
+
+          return (
+            <TimelineButton
+              backup={backup}
+              selected={isSelected}
+              index={relativeIndex + absoluteStartIndex}
+              handleBackupSelect={handleBackupSelect}
+              ref={isSelected ? selectedRef : null}
+            />
+          );
+        })}
       </ButtonGroup>
     </div>
   );
@@ -200,7 +203,7 @@ function Timeline({ backups, selectedBackup, handleBackupSelect }) {
     if (selectedRef.current) {
       selectedRef.current.scrollIntoView({
         behavior: "smooth", // Use "auto" for instant jump on page load
-        block: "center",    // Centers the button in the viewport
+        block: "center", // Centers the button in the viewport
       });
     }
   }, [selectedBackup]); // Re-run if the selection changes

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

@@ -241,14 +241,15 @@ function TimelineTab() {
 
   // Fetch previous backup file contents
   React.useEffect(() => {
-    if (selectedBackup === 0 || backups.length === 0 || file === "") {
+    if (backups.length === 0 || file === "") {
       return;
     }
 
     const queryParams = new URLSearchParams();
+    const prevBackupIndex = Math.min(selectedBackup + 1, backups.length - 1);
     queryParams.append(
       "object_key",
-      `${backups[selectedBackup - 1].file_contents_location}/${file}`,
+      `${backups[prevBackupIndex].file_contents_location}/${file}`,
     );
 
     fetch(`/api/files?${queryParams}`, {
@@ -265,14 +266,6 @@ function TimelineTab() {
       });
   }, [backups, selectedBackup, file]);
 
-  const backupCreatedTimestamps = React.useMemo(() => {
-    if (backups.length === 0) {
-      return [];
-    }
-
-    return backups.map((backup) => backup.created);
-  }, [backups]);
-
   function getTotalQuestionsSolved(history) {
     return history.reduce(
       (total, currQuestion) => total + (currQuestion.solved ? 1 : 0),
@@ -580,8 +573,7 @@ function TimelineTab() {
                   height: "100%",
                 }}
               >
-                {selectedBackup === 0 ||
-                code === "" ||
+                {code === "" ||
                 prevFileContents === "" ||
                 prevFileContents === code ? (
                   <BasicFileViewer
@@ -594,7 +586,6 @@ function TimelineTab() {
                   <DiffViewer
                     open={true}
                     onClose={() => setDiffViewerOpen(false)}
-                    prevBackup={backups[selectedBackup - 1]}
                     currentFileContents={code}
                     selectedFile={file}
                     prevFileContents={prevFileContents}
@@ -644,15 +635,6 @@ function TimelineTab() {
       />
 
       {getOutputDialog()}
-
-      {/* <DiffViewer
-        open={diffViewerOpen}
-        onClose={() => setDiffViewerOpen(false)}
-        prevBackup={backups[selectedBackup - 1]}
-        currentFileContents={code}
-        selectedFile={file}
-        prevFileContents={prevFileContents}
-      /> */}
     </Box>
   );
 }