Fix bug in print statement controller session grouping; add scroll to (#118)

backup

Author: phrdang

src/snapshots-app/app/controllers/api/debugging/print_statements_controller.rb

@@ -102,17 +102,19 @@ def show
     end
 
     # Identify the indices of backups that contain prints
-    print_indices = all_data.each_index.select { |i| all_data[i][:has_print] }
+    # TODO investigate why problem name can be empty. perhaps they just ran `python3 ok` without specifying a problem?
+    print_indices = all_data.each_index.select { |i| all_data[i][:has_print] and all_data[i][:problem] != "" }
 
     return render json: [] if print_indices.empty?
 
-    # Group consecutive print indices into sessions
+    # Group consecutive print indices and same problem name into sessions
     # e.g., [1, 2, 5, 6, 7] -> [[1, 2], [5, 6, 7]]
     sessions = []
     if print_indices.any?
       current_session = [ print_indices.first ]
       print_indices[1..].each do |idx|
-        if idx == current_session.last + 1
+        prev_idx = current_session.last
+        if idx == prev_idx + 1 and all_data[prev_idx][:problem] == all_data[idx][:problem]
           current_session << idx
         else
           sessions << current_session
@@ -122,15 +124,19 @@ def show
       sessions << current_session
     end
 
-    # Expand sessions to include +/- 5 backups and flatten/deduplicate
+    # Expand sessions to include +/- 5 backups with the same problem and flatten/deduplicate
     # Use a Set to ensure that if sessions overlap (within 10 backups of each other),
     # we don't include the same backup twice.
     final_indices = Set.new
     sessions.each do |session_range|
       start_idx = [ 0, session_range.min - 5 ].max
       end_idx = [ all_data.length - 1, session_range.max + 5 ].min
 
-      (start_idx..end_idx).each { |i| final_indices.add(i) }
+      (start_idx..end_idx).each do |i|
+        if all_data[i][:problem] == all_data[session_range[0]][:problem]
+          final_indices.add(i)
+        end
+      end
     end
 
     # Extract the data for the final indices and sort by timestamp

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

@@ -17,7 +17,7 @@ import { useCopyToClipboard } from "react-use";
 
 import { getOkpyCommand, areArraysEqual } from "../../utils";
 
-function TimelineButton({ backup, selected, index, handleBackupSelect }) {
+function TimelineButton({ backup, selected, index, handleBackupSelect, ref }) {
   function getQuestionsWorkedOn() {
     return backup.question_display_names.join(" ");
   }
@@ -106,6 +106,7 @@ function TimelineButton({ backup, selected, index, handleBackupSelect }) {
   return (
     <Tooltip title={getTooltipTitle()} placement="right">
       <Button
+        ref={ref}
         key={backup.id}
         variant={selected ? "contained" : "outlined"}
         onClick={() => handleBackupSelect(index)}
@@ -123,6 +124,7 @@ function TimelineButtonGroup({
   handleBackupSelect,
   absoluteStartIndex,
   setIsSnackbarOpen,
+  selectedRef,
 }) {
   const [_, copyOkpyCommand] = useCopyToClipboard();
   const okpyCommand = getOkpyCommand(
@@ -169,14 +171,17 @@ function TimelineButtonGroup({
         aria-label="Vertical button group"
         style={{ width: "100%" }}
       >
-        {backups.map((backup, relativeIndex) => (
-          <TimelineButton
+        {backups.map((backup, relativeIndex) => {
+          const isSelected = relativeIndex + absoluteStartIndex === selectedBackup;
+
+          return (<TimelineButton
             backup={backup}
-            selected={relativeIndex + absoluteStartIndex === selectedBackup}
+            selected={isSelected}
             index={relativeIndex + absoluteStartIndex}
             handleBackupSelect={handleBackupSelect}
-          />
-        ))}
+            ref={isSelected ? selectedRef : null}
+          />);
+})}
       </ButtonGroup>
     </div>
   );
@@ -187,6 +192,18 @@ function Timeline({ backups, selectedBackup, handleBackupSelect }) {
     "A timeline of this student's OkPy backups, most recent backup first. A backup is formed every time they run unlocking or coding tests for a particular question.";
 
   const [isSnackbarOpen, setIsSnackbarOpen] = React.useState(false);
+  const selectedRef = React.useRef(null);
+
+  // Add an effect that scrolls when selectedBackup changes or on initial load
+  // TODO only scroll left sidebar, not entire page
+  useEffect(() => {
+    if (selectedRef.current) {
+      selectedRef.current.scrollIntoView({
+        behavior: "smooth", // Use "auto" for instant jump on page load
+        block: "center",    // Centers the button in the viewport
+      });
+    }
+  }, [selectedBackup]); // Re-run if the selection changes
 
   const handleSnackbarClose = (event, reason) => {
     if (reason === "clickaway") {
@@ -269,6 +286,7 @@ function Timeline({ backups, selectedBackup, handleBackupSelect }) {
           handleBackupSelect={handleBackupSelect}
           absoluteStartIndex={absoluteStartIndex}
           setIsSnackbarOpen={setIsSnackbarOpen}
+          selectedRef={selectedRef}
         />,
       );
       absoluteStartIndex += backupGroup.length;