Skip to content

Widget Playground: interactive controls driving the DAG

A two-cell notebook: a widget cell (a control panel) feeding a Python cell that renders a DataFrame. Drag a control and the downstream cell goes stale; run it and the grid updates.

What it shows

  • A widget cell with three controls:
  • alpha: a slider (0–1)
  • n: a number input (row count)
  • curve: a dropdown (linear / sqrt / square)
  • A downstream Python cell that reads alpha, n, curve and builds a DataFrame, which renders in the interactive data viewer. So the two features compose: a widget drives the grid.
  • Content-addressed values: drag alpha to a new value and back, the second time is a cache hit, no recompute.

Cells

Cell What it does
controls A widget cell declaring the slider / number / dropdown.
preview Reads the control values, builds a DataFrame, displays it.

Running

From the project root:

uv run strata-notebook

Open examples/widget_playground from the Strata home page.

Try this

  1. Run the preview cell, it materializes the widget defaults and shows a 20-row table in the data viewer.
  2. Drag the alpha slider. preview turns yellow (stale).
  3. Run preview: the y column reflects the new alpha.
  4. Switch curve to square and re-run, the shape changes.
  5. Drag alpha back to its previous value and run, a cache hit.

Widget cells render in the web UI. Edit the control declaration with the ✎ Edit controls toggle on the cell.

Open as an app

Click App in the notebook header to open this notebook as a read-only interactive app, just the controls + the table, no editor. Turn on the widget cell's ⚡ Live toggle first, and dragging alpha in the app updates the table live.

Controls

kind widget

# @live
# @name Controls
alpha = slider(0, 1, step=0.05, default=0.5)
n     = number(default=20, min=5, max=100)
curve = dropdown(["linear", "sqrt", "square"], default="linear")

Preview

kind python

# @name Preview
# Downstream of the widget cell: drag `alpha` / change `curve` and re-run
# (or run in the live cascade) and the table updates. It renders in the
# interactive data viewer, so widgets drive the grid.
import numpy as np
import pandas as pd

x = np.arange(n)
base = {"linear": x, "sqrt": np.sqrt(x), "square": x**2}[curve]
df = pd.DataFrame({"x": x, "y": np.round(alpha * base, 3)})

print(f"alpha={alpha}  n={n}  curve={curve}")
df

Plot

kind python

# @name Plot
# A second downstream cell: the same controls drive a matplotlib chart.
# The Controls cell ships with ⚡ Live on, so dragging `alpha` (or changing
# `curve`) updates this plot live, in the notebook or the app view.
import matplotlib

matplotlib.use("Agg")
import matplotlib.pyplot as plt
import numpy as np

x = np.arange(n)
base = {"linear": x, "sqrt": np.sqrt(x), "square": x.astype(float) ** 2}[curve]
y = alpha * base

fig, ax = plt.subplots(figsize=(6, 3.2))
ax.plot(x, y, marker="o", color="#89b4fa")
ax.fill_between(x, y, alpha=0.15, color="#89b4fa")
ax.set_title(f"alpha={alpha}  curve={curve}")
ax.set_xlabel("x")
ax.set_ylabel("y")
fig.tight_layout()
fig