Understanding viewof in Rational Notebooks ​

The viewof keyword in Rational notebooks allows you to create interactive widgets that can be used as input for other cells. This guide will explore the usage and benefits of viewof, how it interacts with the reactivity system in Rational, and how it works under the hood.

viewof: Creating Interactive Inputs ​

In Rational notebooks, you often need a way to let users interactively provide inputs. This is where the viewof keyword comes in. It allows you to create an interactive widget that can be used as an input for other cells.

Usage of viewof ​

To create an interactive widget with viewof, you simply prepend the cell declaration with the viewof keyword.

viewof selection = {
// Code for creating an interactive widget
}

In the example above, selection is a cell that contains an interactive widget. The widget's current value can be accessed from other cells.

Using the Value of a viewof Cell ​

The value of a viewof cell can be used just like the value of any other cell. When the value of the viewof cell changes, any cells that depend on it will automatically update.

dataForSelection = data[selection]

In this example, dataForSelection is a cell that depends on the viewof cell selection. When the user changes the selection in the widget, dataForSelection will automatically update.

viewof and Reactivity ​

The viewof keyword integrates seamlessly with Rational's reactivity system. When the value of a viewof cell changes, the change propagates to any dependent cells, causing them to re-evaluate.

Automatic Updates with viewof ​

Just like with regular and mutable cells, changes in the value of a viewof cell will trigger automatic updates in any dependent cells. This allows you to create dynamic and interactive notebooks where user inputs can directly affect the notebook's state.

Under the Hood: How viewof Works ​

When you declare a viewof cell, Rational creates a special cell that holds the widget's current value. This value is updated every time the user interacts with the widget. The cell also includes code for rendering the widget and handling user interactions.

The viewof keyword essentially creates a bridge between Rational's reactivity system and the DOM events generated by the widget. When a DOM event changes the widget's value, the viewof cell detects this change and updates its value, triggering reactivity.

Using viewof for User Interactions ​

The viewof keyword is a powerful tool for creating notebooks with rich user interactions. By using viewof, you can create widgets like sliders, dropdowns, or date pickers that let users interactively control the notebook's state.

viewof date = {
// Code for creating a date picker widget
}
filteredData = data.filter(d => d.date === date)

In this example, date is a viewof cell that contains a date picker widget. The filteredData cell depends on date and updates every time the user picks a new date.

By understanding and using viewof, you can create Rational notebooks that are not just reactive and dynamic, but also highly interactive, giving your users a powerful tool to explore and manipulate the data.