InterLink: Linking Text with Code and Output in Computational Notebooks

TL;DR

InterLink tackles the readability challenge of computational notebooks by introducing a reading-optimized, two-column plugin that explicitly links descriptive text with related code and outputs. It defines a relationship space of 27 relation types, a formal specification for these relations, and a heuristic layout with visual cues and interactive exploration to reduce cognitive load and improve information integration. A formative study informs five design requirements, and a user study with 12 participants demonstrates a 13.6% gain in task accuracy and improved efficiency in identifying and synthesizing information compared to a baseline notebook interface. The work highlights the potential of reading-oriented notebook layouts to enhance comprehension and collaboration, with implications for integrating literate programming principles into practical notebook tools.

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.

Figures (10)

• Figure 1: The relationship space in computational notebooks, categorized by content types (i.e., text, code, and output) and granularity (entire cell and segments). It identifies 27 distinct relationship types: 12 stemming from inter-category and 15 from intra-category relationships. Specifically, 8 inter-category relationship types highlighted in red are the primary focus of InterLink.
• Figure 2: Screenshot of the InterLink interface, with text cells on the left, code and output cells on the right, and lines in the middle denoting aggregated relationships between them.
• Figure 3: This figure shows the relationship formulation and its example. (A) describes the formulation of a relationship and the corresponding aggregated relationship. (B) provides an example of how relationships are represented. (a) shows four examples of how the components in a relationship are represented according to the defined formulation. (b) shows a relationship set $R$, consisting of two relationships formed from these four components. (c) shows the corresponding aggregated relationship set $R'$.
• Figure 4: An example of repositioning and resizing text cells while respecting their original order and relationships with associated code and output cells, as described by the six objectives in \ref{['sec:layout_computation']}.
• Figure 5: Demonstration of how InterLink uses visual cues to indicate relationships within the notebook, tailored specifically to the content type, granularity, and interaction status.