CodeStream: Augmenting Timelines with Code Annotation for Navigating Large Coding Histories

Paper Title

CodeStream: Augmenting Timelines with Code Annotation for Navigating Large Coding Histories

Publication Info

• Topic area: Visualization of coding histories for educational purposes
• Keywords: Code annotation, timeline visualization, programming education, coding history, keystroke-level edits, cumulative effort, real-time visualization, teaching tools, semantic zooming, code summarization

Background and Problem

• Problem / challenge: Existing timeline visualizations of coding histories show when and where edits occurred but lack direct integration with code content, requiring instructors to cross-reference timelines with code snapshots. This separation introduces context-switching overhead and makes it difficult to interpret students' coding processes.
• Significance: Understanding students' coding processes is critical for identifying misconceptions, providing timely feedback, and supporting conceptual growth. Without effective tools, instructors may overlook struggling students or fail to interpret their problem-solving strategies.
• Motivation and related work: Prior work on code history visualization has explored timelines, flow views, and clustering but often lacks fine-grained integration with code content. Tools like Eliph and BlockLens provide some insights but struggle with generalizability, readability, and scalability for large codebases or real-time settings. This paper addresses these gaps by integrating semantic code annotations into timeline visualizations.

Solution

• Proposed approach: CodeStream, a system that augments timeline visualizations with semantic code annotations and cumulative effort indicators to provide context-aware navigation of coding histories.
• Novelty:
  1. Introduction of a layout algorithm for scalable, zoomable code annotations that balance detail and readability.
  2. Integration of cumulative effort heatmaps to visualize where students invested time in their code.
  3. Dynamic structural alignment and clustering of edits to reduce clutter and improve interpretability.
  4. Evaluation of CodeStream's effectiveness in improving instructors' understanding of coding histories compared to a baseline system.
• Procedure and key techniques:
  • Code annotations dynamically adapt to zoom levels, summarizing edits with semantic labels and interactive previews.
  • A layout algorithm resolves vertical and horizontal clutter by clustering, merging, and aligning code snippets.
  • Cumulative effort is visualized as a heatmap, with darker regions indicating more time spent editing.
  • Multi-file support is provided through a tab-based interface, and the system is implemented as a VSCode extension and web application.

Results

• Concrete findings:
  • Quiz accuracy was significantly higher with CodeStream (M = 0.84, SD = 0.21) compared to the baseline (M = 0.68, SD = 0.10, p < 0.05).
  • Participants reported better understanding of students' coding histories, problem-solving patterns, and edit intentions with CodeStream (e.g., M = 5.17 for edit intentions vs. M = 3.92 for the baseline, p < 0.05).
  • CodeStream enabled more accurate identification of code areas with high editing effort (p < 0.05) and edit content/change types (p < 0.05).
• Advantage over baselines: CodeStream reduced context-switching by integrating code annotations directly into timelines, enabling faster and more accurate interpretation of coding histories. Participants found it more helpful for identifying students needing intervention and understanding how effort was distributed.
• Experiments / evaluation:
  • Dataset: Keystroke-level coding histories from 20 participants solving two Python tasks (188–319 lines of code, up to 2,610 edits).
  • Participants: 12 instructors with 2–10+ years of Python experience.
  • Method: Within-subject comparison of CodeStream and a baseline system, with quiz questions, surveys, and think-aloud protocols.
  • Metrics: Quiz accuracy, time spent, self-reported understanding, and usability feedback.
• Limitations and future work:
  • Current visualizations do not fully capture students' intent behind edits.
  • Need for smoother zooming interactions and more granular code summarization.
  • Potential to integrate LLMs for semantic interpretation of edits and to expand multi-file visualizations.

Summary

CodeStream is a visualization system that integrates semantic code annotations and cumulative effort indicators into timeline views to help instructors interpret students' coding histories. By reducing context-switching and improving readability, CodeStream enables more accurate identification of coding patterns, problem-solving strategies, and areas requiring intervention. A user study demonstrated its effectiveness in improving instructors' understanding compared to a baseline system. Future work will focus on enhancing summarization granularity, integrating LLMs for intent interpretation, and scaling the system for larger codebases and classrooms.