InterLink: Linking Text with Code and Output in Computational Notebooks

2025-02-22

AI Summary

Contemporary computational notebooks employ linear layouts, spatially separating text, code, and outputs—obscuring semantic relationships and severely impeding comprehension efficiency. To address this, we propose InterLink: an interactive augmentation framework featuring a split dual-column interface and dynamic SVG-based visual links. InterLink automatically identifies cross-cell semantic relationships via heuristic rules and supports user-action-driven navigation of these relationships. Its core innovation lies in the first explicit externalization of text–code–output ternary associations as interactive visual cues, thereby transcending the unidimensional reading paradigm of traditional notebooks. A controlled user study demonstrates that, on complex analytical tasks, InterLink improves information localization and integration accuracy by 13.6%, while significantly reducing cognitive load and enhancing task completion efficiency.

Technology Category

• Natural Language Processing: Interpretability, Analysis, and Evaluation of NLP Models
• Data Mining & Knowledge Management: Linked Open Data, Knowledge Graphs & KB Completion
• Humans and AI: Intelligent User Interfaces

Application Category

• Semantics and Knowledge: Methods to enhance, augment, integrate or synergize semantic models such as knowledge graphs and LLMs
• Graph Algorithms and Modeling for the Web: Foundation models and LLMs for Web-related graphs
• Search and Retrieval-Augmented AI: Web query analysis, representation and understanding

Abstract

Computational notebooks, widely used for ad-hoc analysis and often shared with others, can be difficult to understand because the standard linear layout is not optimized for reading. In particular, related text, code, and outputs may be spread across the UI making it difficult to draw connections. In response, we introduce InterLink, a plugin designed to present the relationships between text, code, and outputs, thereby making notebooks easier to understand. In a formative study, we identify pain points and derive design requirements for identifying and navigating relationships among various pieces of information within notebooks. Based on these requirements, InterLink features a new layout that separates text from code and outputs into two columns. It uses visual links to signal relationships between text and associated code and outputs and offers interactions for navigating related pieces of information. In a user study with 12 participants, those using InterLink were 13.6% more accurate at finding and integrating information from complex analyses in computational notebooks. These results show the potential of notebook layouts that make them easier to understand.

Problem

• Enhances notebook readability
• Links text, code, outputs
• Improves information integration accuracy

Innovation

• Plugin links text, code, outputs
• Two-column layout separates elements
• Visual links enhance information navigation