InterLink: Linking Text with Code and Output in Computational Notebooks

Research Background and Problem Statement

• Issues or Challenges:

  1. Traditional computational notebooks (e.g., Jupyter Notebook) use a linear layout, which disperses text, code, and output, making it difficult for readers to understand the relationships between these elements.
  2. Understanding the complex many-to-many relationships between code, output, and text is challenging, especially when related content is distributed across different granularities (e.g., cells or paragraphs).
  3. Readers often need to scroll back and forth to locate related content, further increasing cognitive load.
  4. Due to the mixed layout, users find it difficult to focus on analyzing specific types of content (e.g., focusing solely on text or code and output).

• Importance of the Problem: Computational notebooks are core tools in data science and research fields, combining executable code, code outputs, and explanatory text. However, due to the aforementioned issues, their readability and comprehensibility are limited, particularly in team collaboration and knowledge sharing scenarios.

• Research Motivation and Related Work:

  1. Existing studies primarily focus on improving code organization, generating descriptive text, and enhancing nonlinear analysis workflows, but they do not adequately address the complex interactions between text, code, and output.
  2. Some efforts have attempted to improve notebook readability through graphical interfaces or slide-based presentations, but they lack comprehensive support for multi-granularity relationships.
  3. The motivation for this research is to fill this gap by designing new tools to improve the experience of reading and understanding shared computational notebooks.

Solution

• Method or Solution: The authors propose InterLink, a plugin for computational notebooks that visualizes and interacts with the relationships between text, code, and output, thereby enhancing notebook readability and comprehensibility.

• Innovations:

  1. Introduction of a dual-column layout: Separates text from code and output, facilitating alignment and cross-referencing, and enabling quick focus switching.
  2. Provision of relationship visualization:
     • Connection lines to display cell-level relationship summaries.
     • Fine-grained relationships highlighted using colored underlines, dashed borders, and clickable areas for intuitive content association.
  3. Interactive features to support relationship exploration:
     • Hovering to highlight related content.
     • Click-to-fix functionality to keep selected cells visible on the screen.
     • Focus mode to filter distractions, retaining only relevant content.
  4. System implementation compatible with JupyterLab, making it easy to integrate with existing platforms.

• Implementation Steps and Key Technologies:

  1. Relationship Framework Construction:
     • Construct 27 types of relationships based on type (text, code, output) and granularity (cell, paragraph, specific fragment).
     • Focused visualization of key "text-code" and "text-output" relationships.
  2. Visualization Design:
     • Optimize alignment between text and computational content using a dual-column layout.
     • Provide multi-level relationship cues through colors and borders.
  3. Layout Calculation and Adjustment:
     • Use heuristic algorithms to maximize layout compactness, ensuring related content is displayed closely.
     • Limit text height based on the height of associated code and output cells to minimize excessive scrolling.
  4. Support for Interaction Methods:
     • Hover-triggered tooltips and content highlighting.
     • Focus mode or click-to-fix functionality for detailed analysis.

Research Outcomes

• Specific Outcomes:

  1. InterLink implements a plugin for computational notebooks that optimizes readability by clearly presenting relationships between text, code, and output.
  2. User study results demonstrate that InterLink improves users' accuracy (+13.6%) in locating and integrating information during complex analyses and enhances the overall reading experience.

• Advantages Over Existing Solutions:

  1. Compared to traditional linear layouts, the dual-column layout clearly displays content associations, improving efficiency in discovering and synthesizing information.
  2. Unlike previous tools that only support simple relationships, InterLink supports multi-granularity and complex many-to-many relationships.
  3. Interactive relationship exploration (e.g., hover highlighting and click-to-fix functionality) reduces users' cognitive load while providing flexibility.

• Experimental or Evaluation Results:

  1. Users completing test tasks with InterLink achieved an accuracy improvement from 81% to 92%, with a significant reduction in Inverse Efficiency Score (IES), and task completion time was also optimized.
  2. Submodules (e.g., focus mode and sidebar visual cues) were widely recognized by users, with the overall tool achieving a System Usability Score (SUS) of 76.5, surpassing 80% of typical software.
  3. Users reported that the tool significantly simplified the process of navigating relationships, allowing them to focus more on content comprehension rather than information retrieval.

• Limitations and Future Directions:

  1. Current module relationships rely on manual definitions; future tools should integrate automatic relationship extraction and generation technologies (e.g., text summarization provided by GPT-4).
  2. Currently limited to standard JupyterLab, the tool's adaptability to other platforms (e.g., RStudio) has not yet been evaluated.
  3. User experiments were primarily short-term tests; future research should conduct long-term validations in real-world scenarios, covering a broader user base.