enumeratio

Components ​

Every symbol that draws — a plot, a chart, a control, a layout — as a custom element, named for its symbol (Slider is <slider-box>, BarChart3D a <graphics-3d-box>), its attributes read straight out of the element source, so these tables cannot drift from the code. Import @enumeratio/components for the registration. The playground shows each one working; this reference is for reading the dials.

Expressions are written in Epsil ​

A prop that holds an expression — value, expr, u/v — is written in Epsil: Sin(x) * Cos(y), with products spelled out (x y is a parse error, though 3x is not). LaTeX is read only inside a $…$ island: value="$x\sin(x)$".

That includes the editable components: a <Notebook>'s or <Worksheet>'s seed is Epsil, converted to LaTeX only for the MathLive field that edits it; inForm="latex" hands the field LaTeX as written. A seed may bind with := — a cell is an expression plus one binding. <Cell> is different: its value is written in the syntax its format names (epsil by default, or latex, mathjson, wolfram), and its inForm instead picks which editor shows it.

Two components keep LaTeX as their own form. <In> is the math field, so its value is the field's LaTeX. <Out> renders an encoding it is handed rather than input someone authored, so it keeps a format prop naming the encoding — latex (the default), mathjson or epsil. The formats reference covers those.

A value that fails to parse renders nothing at all, silently. To find out why, name the component's namespace and reload:

js
localStorage["notatio:debug"] = "plot3d"; // or "plot*", or "*"

The components ​

  • Animator — Wolfram's Animator: a <Slider> that plays. The play button and the readout are on by default and the sweep cycles unless told otherwise -- an animator's job is to run, not to stop at the end. Hold the button for the speed and loop.12 attributes
  • Button — a ButtonBox whose ButtonFunction is Set(_e, "twindragon"): a click on the anchor sets the variable in the scope it sits in. The anchor is drawn by the renderer, so the element only listens; a link needs no element.0 attributes
  • Checkbox — a box that is ticked or not, Wolfram's Checkbox. The binding _on is True or False; value="True" starts it ticked. Put the words beside it in the prose -- the box is the control, the sentence is the label -- or give it a label of its own.3 attributes
  • ColorSetter — a swatch that opens the colour picker, Wolfram's ColorSlider. The binding _c is RGBColor(r, g, b) with the parts in 0..1, which is what a plot's colour attribute or a template can read.2 attributes
  • Dynamic — a derived readout in running prose, after Wolfram's Dynamic. It typesets whatever its value evaluates to and nothing else: no editor, no assertion, no In/Out row.3 attributes
  • DynamicModule — a reactive document, after Bret Victor's [Tangle](http://worrydream.com/Tangle/): prose whose numbers you can grab, and whose other numbers follow.5 attributes
  • Graphics3D — a figure in space, the Graphics3DBox its expression lowers to. The element holds the expression (options and all, as a 2-D plot does), the page's kernel samples it, and the samples lower to boxes that graphics3dSvg draws. Drag rotates (Azimuth, Elevation), ⌘/Ctrl + wheel or a pinch zooms (Zoom), double-click returns to the first view. Its wildcards (_k) are a surrounding Manipulate's controls, and moving one samples the compiled code again.7 attributes
  • Graphics — Wolfram's Show: layers in one coordinate frame, sharing one view, each on its own canvas. LatticeTiles(ring, …) draws a lattice's faces: ColorRules -> [test -> color, …] colors them (a color, Opacity(a, color), or ColorData(scheme, value, Band -> w)), ColorMixing combines the colors of matching rules (Wolfram's first match by default; "Normal", or the order-free "Screen", "Add" and "Multiply"), and BoundaryStyle -> [test -> directive, …] draws their edges, nested in rule order.10 attributes
  • InputField — a field you type a value into, Wolfram's InputField. The text is Epsil, parsed when you press Enter or leave the field, and the binding _x is the expression it parses to: a number, a symbol, Sin(t), whatever was typed. Text that does not parse leaves the binding where it was and marks the field. type="number" accepts only a number, and size is the width in characters.4 attributes
  • IntervalSlider — a track with two thumbs, Wolfram's IntervalSlider. The binding _r is the List [lo, hi]; the thumbs cannot cross. Each thumb takes the arrows in a knob's gears; readout shows the interval beside the track.6 attributes
  • Knob — a number you drag inside a sentence, after Bret Victor's [Tangle](http://worrydream.com/Tangle/). It is not a slider and not a field: it renders exactly what the value looks like when typeset, marked as interactive with a dotted underline, and you change it by dragging across it.14 attributes
  • ListPicker — a list in view, with any number of entries selected: Wolfram's ListPicker. Click toggles an entry; arrows move, Space toggles. The binding _s is the List of selected values in list order. single allows one selection only (Wolfram's Multiselection -> False), and then binds the value itself. rows is how many entries show before scrolling.5 attributes
  • Locator — <Locator name="p" value="1,0.5"> inside a <Plot> -- a point ON the picture that you drag about it, Wolfram's Locator. It sits over the plot area in the plot's own coordinates, so the binding _p is the List [x, y] where the dot is (or the complex x + y i, with complex), and a template that reads _p gets a point on the curve's axes. The arrows nudge it by a hundredth of the window, Shift ten times that, Alt a tenth.3 attributes
  • Cell — one In/Out pair: an editable input over a live read-only <Out> of the result. Renders in light DOM so the nested output inherits the page's MathLive styles.19 attributes
  • Clock — play, pause and scrub the page's shared clock.5 attributes
  • Code — a small code box for source in a named language (wolfram, python, javascript, latex, json, glsl, …). Read-only by default (a <pre>), or an editable <textarea> that emits notatio-code-change with { value }. Syntax highlighting is a planned enhancement -- #render is the single seam where a highlighter would turn the value into markup.5 attributes
  • CollectionTable — the chrome around a <table-view-box>: the editors for the collection, its columns and a filter, and the table they drive. The table asks the page's kernel only for the rows in view, so SymmetricGroup(25) scrolls as cheaply as Subsets(4) and NonNegativeIntegers scrolls without end. The # column is the index that reproduces each row, At(expr, #).15 attributes
  • ComplexPlot — domain-coloring of a complex-valued expression over the complex plane, one GPU invocation per pixel: color is the argument on a gradient (default phase, the hue wheel; any cyclic one such as sinebow has no seam at the negative real axis; reverse turns it round), brightness a compressed log-magnitude, poles white and zeros black.10 attributes
  • ComplexPlot3D — Wolfram's ComplexPlot3D: |f(z)| as a surface over the complex plane, each face colored by arg f(z) on the same gradient <ComplexPlot> paints (gradient, default phase, the hue wheel; reverse turns it round). A pole is a spike that rises to max-height with every hue winding round it; a zero is a dimple the hues wind round the other way.14 attributes
  • Gradient — choose a color gradient: a swatch that opens the presets, each drawn, with a reverse toggle. Given band, it also sets the band — the distance in value between the gradient's two ends — and mode, how values past it meet the gradient (reflect, sweeping up and back; wrap; clamp).6 attributes
  • In — a LaTeX math field wrapping MathLive's <math-field>. Emits notatio-change with { latex } on each edit, live as the reader types, and notatio-commit with the same shape when MathLive itself considers the edit committed -- its native change event, which it fires on Enter and on blur (only if the value actually changed since focus). A consumer that only cares about finished edits -- a cell inside a transcript, where Wolfram evaluates on Shift+Enter, not on every keystroke -- listens for notatio-commit instead. It shows the value typeset (KaTeX, selectable) until clicked, and only then loads MathLive's (heavy) editor; when readonly, it never does.13 attributes
  • Manipulate — a generic Wolfram-style Manipulate: it renders a slider (or setter) per parameter and re-binds those parameters into its slotted content live. Any descendant attribute that is a Epsil expression containing a named wildcard (_a) is treated as a template: the wildcard is compute-engine's slot notation, filled from the control a and re-evaluated on every change. So the same wrapper drives a plot, a glyph, several elements at once, or plain markup:5 attributes
  • Notebook — a thin shell around a reactive <DynamicModule tracked-symbols="all"> of <Cell>s: the unified cell owns editing and evaluation, this element owns the notebook-specific chrome (add/remove, drag to reorder) and the seed.3 attributes
  • Out — read-only typeset rendering of a compute-engine expression. Accepts LaTeX (the default: it renders an encoding it is handed, and the cell hands it the editor's LaTeX), MathJSON or Epsil; optionally evaluates first. Renders in light DOM so the host page's MathLive static stylesheet applies. compute-engine is loaded only when the input is MathJSON or Epsil, or evaluation or an assertion is requested.19 attributes
  • Palette — one menu for a plot's colors. Each palette is drawn as it paints: its gradient, for values, and its first category colors, for kinds of point. Below the palettes, the gradient and the category colors can be swapped on their own, the gradient reversed, and — given band — the band set: the distance in value between the gradient's two ends, and how values past it meet the gradient (mode).9 attributes
  • Terminal — an in-browser terminal. mode is repl (default), cli or show. seed is a JSON array of lines to run on mount; examples (default on) shows the dropdown + Play/Clear toolbar. In show mode, value is the expression and env the environment it is shown for (tty by default).5 attributes
  • TestResultObject — VerificationTest's TestResultObject (https://github.com/enumeratio/enumeratio/wiki/Computation §5.4): the held input as an In row, the actual output as an Out row, and a badge for the outcome (Success ✓ / Failure ≠, expected shown / Error ! / Aborted ∅), plus the time used and, when set, the TestID. Reuses <Out> (label/label-menu) for both rows rather than re-typesetting anything itself.6 attributes
  • Worksheet — a set of named expressions and a shared view of what they draw.6 attributes
  • PaneSelector — Wolfram's PaneSelectorBox: alternatives, of which the one whose key is the selector's value shows. A value with no pane shows nothing, so a phrase that appears only under a condition is a pane under True alone.1 attributes
  • PopupMenu — the selected entry, and a menu of the rest when clicked: Wolfram's PopupMenu. Arrows step it without opening. Entries are |-separated and may be value -> label. The binding is the entry's value.3 attributes
  • RadioButtonBar — Wolfram's RadioButtonBar: a <SetterBar> whose entries are radio buttons, one of which is on. The entries, the arrows and the binding are the setter bar's.3 attributes
  • RadioButton — Wolfram's RadioButtonBox: one radio button, on when the variable holds its entry. A row of them is a <radio-button-bar-box>; this is a bar of one.3 attributes
  • SetterBar — a row of buttons of which one is down, Wolfram's SetterBar. Click one to set it; arrows move the selection along the bar. Entries are |-separated and may be value -> label; a value that looks like mathematics is typeset. Inside a scope the binding _k is the entry's value (a number, a named value) or its index for a bare word.3 attributes
  • Setter — Wolfram's SetterBox: one button, down when the variable holds its entry. A bar of them is a <setter-bar-box>; this is a bar of one.3 attributes
  • Slider2D — a square with a dot you drag about it, Wolfram's Slider2D. min/max are x,y pairs (default the unit square), step one step for both axes or dx,dy. The arrows nudge the dot in the same gears as a knob (Shift coarse, Alt fine, held arrows accelerate).8 attributes
  • Slider — a track with a thumb, Wolfram's Slider. Drag the thumb or click the track to set it; the arrows step it, accelerating when held, Shift or PageUp/PageDown step coarse and Alt fine (the same gears as a <Knob>), Home/End go to the ends. readout shows the value beside the track; axis="y" stands it up (Wolfram's VerticalSlider, which is also <VerticalSlider>).12 attributes
  • Stepper — an integer in a sentence, with ◀ ▶ to step to the next value its domain admits and, with random, a die for a random one. A tangle-style control: it reads as the number, and binds _d like any other. A StringTemplate hole sets domain from the variable's declaration, Where included.6 attributes
  • TableView — 0 attributes
  • TogglerBar — a row of buttons of which any number are down, Wolfram's TogglerBar. Click one to toggle it; the binding _s is the List of the selected entries' values, in bar order, so Length(_s) and Sum(_s) mean what they say. Entries are |-separated and may be value -> label; value names the entries down at first, |-separated.3 attributes
  • Toggler — a word in the prose that cycles when you click it, Wolfram's Toggler and Tangle's toggle in one.8 attributes
  • BarChart3D — a figure in space, the Graphics3DBox its expression lowers to. The element holds the expression (options and all, as a 2-D plot does), the page's kernel samples it, and the samples lower to boxes that graphics3dSvg draws. Drag rotates (Azimuth, Elevation), ⌘/Ctrl + wheel or a pinch zooms (Zoom), double-click returns to the first view. Its wildcards (_k) are a surrounding Manipulate's controls, and moving one samples the compiled code again.7 attributes
  • Chart — Wolfram's Show: layers in one coordinate frame, sharing one view, each on its own canvas. LatticeTiles(ring, …) draws a lattice's faces: ColorRules -> [test -> color, …] colors them (a color, Opacity(a, color), or ColorData(scheme, value, Band -> w)), ColorMixing combines the colors of matching rules (Wolfram's first match by default; "Normal", or the order-free "Screen", "Add" and "Multiply"), and BoundaryStyle -> [test -> directive, …] draws their edges, nested in rule order.10 attributes
  • ContourPlot — Wolfram's Show: layers in one coordinate frame, sharing one view, each on its own canvas. LatticeTiles(ring, …) draws a lattice's faces: ColorRules -> [test -> color, …] colors them (a color, Opacity(a, color), or ColorData(scheme, value, Band -> w)), ColorMixing combines the colors of matching rules (Wolfram's first match by default; "Normal", or the order-free "Screen", "Add" and "Multiply"), and BoundaryStyle -> [test -> directive, …] draws their edges, nested in rule order.10 attributes
  • DensityPlot — Wolfram's Show: layers in one coordinate frame, sharing one view, each on its own canvas. LatticeTiles(ring, …) draws a lattice's faces: ColorRules -> [test -> color, …] colors them (a color, Opacity(a, color), or ColorData(scheme, value, Band -> w)), ColorMixing combines the colors of matching rules (Wolfram's first match by default; "Normal", or the order-free "Screen", "Add" and "Multiply"), and BoundaryStyle -> [test -> directive, …] draws their edges, nested in rule order.10 attributes
  • GraphPlot — Wolfram's Show: layers in one coordinate frame, sharing one view, each on its own canvas. LatticeTiles(ring, …) draws a lattice's faces: ColorRules -> [test -> color, …] colors them (a color, Opacity(a, color), or ColorData(scheme, value, Band -> w)), ColorMixing combines the colors of matching rules (Wolfram's first match by default; "Normal", or the order-free "Screen", "Add" and "Multiply"), and BoundaryStyle -> [test -> directive, …] draws their edges, nested in rule order.10 attributes
  • ListPlot3D — a figure in space, the Graphics3DBox its expression lowers to. The element holds the expression (options and all, as a 2-D plot does), the page's kernel samples it, and the samples lower to boxes that graphics3dSvg draws. Drag rotates (Azimuth, Elevation), ⌘/Ctrl + wheel or a pinch zooms (Zoom), double-click returns to the first view. Its wildcards (_k) are a surrounding Manipulate's controls, and moving one samples the compiled code again.7 attributes
  • Plot — Wolfram's Show: layers in one coordinate frame, sharing one view, each on its own canvas. LatticeTiles(ring, …) draws a lattice's faces: ColorRules -> [test -> color, …] colors them (a color, Opacity(a, color), or ColorData(scheme, value, Band -> w)), ColorMixing combines the colors of matching rules (Wolfram's first match by default; "Normal", or the order-free "Screen", "Add" and "Multiply"), and BoundaryStyle -> [test -> directive, …] draws their edges, nested in rule order.10 attributes
  • Plot3D — a figure in space, the Graphics3DBox its expression lowers to. The element holds the expression (options and all, as a 2-D plot does), the page's kernel samples it, and the samples lower to boxes that graphics3dSvg draws. Drag rotates (Azimuth, Elevation), ⌘/Ctrl + wheel or a pinch zooms (Zoom), double-click returns to the first view. Its wildcards (_k) are a surrounding Manipulate's controls, and moving one samples the compiled code again.7 attributes
  • PolarPlot — Wolfram's Show: layers in one coordinate frame, sharing one view, each on its own canvas. LatticeTiles(ring, …) draws a lattice's faces: ColorRules -> [test -> color, …] colors them (a color, Opacity(a, color), or ColorData(scheme, value, Band -> w)), ColorMixing combines the colors of matching rules (Wolfram's first match by default; "Normal", or the order-free "Screen", "Add" and "Multiply"), and BoundaryStyle -> [test -> directive, …] draws their edges, nested in rule order.10 attributes
  • TorusSquare — Wolfram's Show: layers in one coordinate frame, sharing one view, each on its own canvas. LatticeTiles(ring, …) draws a lattice's faces: ColorRules -> [test -> color, …] colors them (a color, Opacity(a, color), or ColorData(scheme, value, Band -> w)), ColorMixing combines the colors of matching rules (Wolfram's first match by default; "Normal", or the order-free "Screen", "Add" and "Multiply"), and BoundaryStyle -> [test -> directive, …] draws their edges, nested in rule order.10 attributes
  • VectorPlot — Wolfram's Show: layers in one coordinate frame, sharing one view, each on its own canvas. LatticeTiles(ring, …) draws a lattice's faces: ColorRules -> [test -> color, …] colors them (a color, Opacity(a, color), or ColorData(scheme, value, Band -> w)), ColorMixing combines the colors of matching rules (Wolfram's first match by default; "Normal", or the order-free "Screen", "Add" and "Multiply"), and BoundaryStyle -> [test -> directive, …] draws their edges, nested in rule order.10 attributes