.md →
TangleLatex API#
TangleLatex renders a KaTeX formula in which named numbers are draggable. Mark
them with \tangle{name} inside latex and configure each name in parameters; a
parameter can show its formatted number or stay symbolic until it is dragged or
edited, and repeated markers share one value. The live numbers land in values
while you drag, so downstream cells recompute as the equation changes.
To explain what the symbols mean, wrap any part of the formula in
\note{name}{...} and describe it in notes. The note is drawn above or below
the formula with an arrow to exactly that part, and hovering a note (or
dragging the parameter it explains) fades the others:
TangleLatex(
latex=r"p(x) = \frac{1}{\tangle{sigma}\sqrt{2\pi}}"
r"\exp\left(-\frac{(x-\note{center}{\tangle{mu}})^2}{2\note{width}{\tangle{sigma}}^2}\right)",
parameters={"mu": {"value": 0}, "sigma": {"value": 1, "min_value": 0.1}},
notes={
"center": "**mean**: where the bell is centered",
"width": "**standard deviation**: how wide the bell is",
},
)
See also: Tangle widgets for the same drag gesture in plain prose, Matrix for editing numbers as a grid, and Slider2D for two coupled parameters on one canvas.
Bases: AnyWidget
Render a KaTeX formula with draggable named numeric parameters.
Put \tangle{name} markers in latex and configure each name in
parameters. A parameter can display its formatted number directly or
remain symbolic until it is dragged or edited. Repeated markers share one
value and update together.
values follows a drag live. committed_values keeps the values from
before the drag until it is released, so the notebook can compare the old
formula with the new one while you scrub; dragging is True in between.
Outside a drag the two are equal.
Examples:
import marimo as mo
from wigglystuff import TangleLatex
formula = mo.ui.anywidget(
TangleLatex(
latex=r"f(x) = angle{a}x^2 + angle{b}x + angle{a}",
parameters={
"a": {
"value": 2.5,
"min_value": -5,
"max_value": 5,
"step": 0.1,
"display": "symbol",
},
"b": {
"value": 1,
"min_value": -10,
"max_value": 10,
"step": 0.5,
"display": "symbol",
},
},
reveal_all_on_drag=True,
)
)
formula
Create a TangleLatex widget.
Parameters:
| Name | Type | Description | Default |
|---|---|---|---|
latex
|
str
|
KaTeX source containing one or more |
required |
parameters
|
Mapping[str, Mapping[str, Any]]
|
Mapping from marker name to its numeric configuration.
|
required |
notes
|
Mapping[str, Any] | None
|
Plain-language explanations drawn next to the formula with
an arrow to the part they explain. Wrap the part in
|
None
|
display_mode
|
bool
|
Render using KaTeX display mode. |
True
|
editor
|
str
|
Numeric click editor style: |
'popover'
|
reveal_all_on_drag
|
bool
|
Reveal every symbolic parameter as a number while any parameter is actively dragged. When false, reveal only the selected parameter. |
False
|
theme
|
str
|
Color theme: |
'auto'
|
**kwargs
|
Any
|
Forwarded to |
{}
|
Source code in wigglystuff/tangle_latex.py
248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 | |
Synced traitlets#
| Traitlet | Type | Notes |
|---|---|---|
latex |
str |
LaTeX source containing \tangle{name} markers. |
parameters |
dict |
Per-parameter config (value, bounds, step, digits, color, symbol, ...). |
values |
dict |
Live current value for each parameter; updates while dragging. |
committed_values |
dict |
Values from before the current drag; catch up on release. |
dragging |
bool |
True while a drag is in progress. |
display_mode |
bool |
Render the formula in display mode. |
editor |
str |
Exact-value editor style: "popover" or "inline". |
reveal_all_on_drag |
bool |
Reveal every tangle value while dragging any one of them. |
notes |
dict |
Normalized notes for \note{name}{...} parts (text, side, color). |
hovered |
str |
Name of the note under the pointer, or "". |
theme |
str |
"auto", "light", or "dark". |
error |
str |
Validation/render error surfaced from the widget. |