Rational Docs

Appearance

On this page

Understanding Inputs in Rational Notebooks ​

The use of inputs in Rational notebooks provides a way to create dynamic and interactive data products. Inputs allow users to control parameters, filter data, and directly manipulate visualizations. This guide will discuss the usage of inputs, their role in reactivity, and how they work under the hood.

Inputs: Adding Interactivity to Your Notebook ​

Inputs in Rational notebooks are interactive elements, such as sliders, checkboxes, dropdowns, or text fields, that users can manipulate to control the behavior of the notebook.

Usage of Inputs ​

Inputs are typically created using Rational's built-in input functions or custom HTML forms. The value of an input can be used just like the value of any other cell. When the value of the input changes, any cells that depend on it will automatically update.

javascript
inputValue = html`<input type="text" value="">`

In the example above, inputValue is an input cell that contains a text field. The value of the text field can be accessed from other cells.

Using the Value of an Input Cell ​

The value of an input cell can be used in other cells just like the value of any regular cell. When the user changes the input, the value of the cell changes, and any dependent cells will automatically update.

javascript
filteredData = data.filter(d => d.value === inputValue.value)

In this example, filteredData is a cell that depends on the input cell inputValue. When the user types into the text field, filteredData will automatically update.

Inputs and Reactivity ​

Inputs play a significant role in the reactivity system of Rational notebooks. When a user interacts with an input, changing its value, this change propagates through the notebook, triggering re-evaluation of any cells that depend on the input.

Automatic Updates with Inputs ​

As with regular and mutable cells, changes in the value of an input will trigger automatic updates in any dependent cells. This allows you to create interactive notebooks that respond directly to user inputs.

Under the Hood: How Inputs Work ​

When you create an input, Rational creates a cell that includes both the code for rendering the input and the current value of the input. The value is updated every time the user interacts with the input.

The input essentially serves as a bridge between Rational's reactivity system and the DOM events generated by the input. When a DOM event changes the input's value, the input cell detects this change, updates its value, and triggers reactivity.

Using Inputs for User Interactions ​

Inputs are a powerful tool for creating interactive and dynamic Rational notebooks. By using inputs, you can allow users to directly manipulate the state of the notebook, creating a more engaging and interactive experience.

javascript
viewof dateInput = date({value: new Date()})
javascript
filteredData = data.filter(d => d.date === dateInput.value)

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

By understanding and using inputs, 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.