Components, one at a time

notatio, one piece at a time: a storybook for the @enumeratio/frontend web components — the notebook, the input and output, the plots, glyphs, tables and prose controls that make up the interface. One page per component, each a focused, shared place to look at the behaviour and talk about how to improve it. Some pages are experimental and move fast.

These are demos of the parts. To use the whole thing, open a worksheet.

Components

• Notebook — <notatio-notebook>, a scoped session
• Input — <notatio-in>, the live math editor (and its read-only mode)
• Output — <notatio-out>, typeset read-only rendering + display forms
• Cell — <notatio-cell>, a notebook In/Out pair
• Verification — <notatio-test-result-object>, VerificationTest's outcome as a badge over an In/Out pair
• Figure (glyphs) — combinatorial values as pictures, a Show of their frame layer
• Plot — function plots of one variable; stories moved to its component reference page
• Plot 3D — bivariate surfaces, projected and shaded in plain SVG; stories moved to its component reference page
• Contour Plot — contour lines / filled bands of a bivariate function (or a pre-sampled grid) via marching squares; stories moved to its component reference page
• Density Plot — a bivariate function (or a pre-sampled grid) as a heatmap on a sequential ramp; stories moved to its component reference page
• Vector & Stream Plot — a planar vector field as arrows, or as streamlines by fixed-step RK4; stories moved to its component reference page
• Polar Plot — r(θ) curves (and explicit point lists) on a polar grid; stories moved to its component reference page
• List Plot 3D — 3-D scatters and height-grid surfaces, orthographically projected; stories moved to its component reference page
• Bar Chart 3D — a matrix of heights as depth-sorted 3-D bars; stories moved to its component reference page
• Chart — data-driven 2-D charts (bar, histogram, pie, box-whisker, array, discrete, list); stories moved to its component reference page
• GraphPlot — graph & hierarchical layouts (tree, graph, layered graph, dendrogram), drawn by <graphics-box>; stories on its component reference page
• Complex Plot — domain-colouring of a complex expression, one WebGPU invocation per pixel; stories moved to its component reference page
• Complex Plot 3D — |f(z)| as a surface over the plane, faces coloured by arg f(z); stories moved to its component reference page
• Collection table — a scrolling table over a lazy collection (massive, unknown-sized or infinite), with statistics as columns; stories moved to its component reference page
• Worksheet — <notatio-worksheet>, named expressions whose knobs and plots fall out of the cells
• Manipulate — <notatio-manipulate>, Wolfram-style controls bound to named wildcards in any slotted content
• Terminal — <notatio-terminal>, the real CLI eval core in a browser terminal, as a session or one notatio <expr> at a time
• Polytope — PolytopeFaces, a polytope's face poset in a Show, where every mark is a clickable face under an orbiting camera
• Tangle — <dynamic-module-box> and the inline controls (<knob-box>, <toggler-box>, <dynamic-box>, <pane-selector-box>): reactive prose

Inspirations

Somebody else's idea, taken seriously enough to build — see Inspirations.

Symbols that draw

The other direction: a head that draws is its component. Plot, Histogram, Manipulate and the rest are declared on the engine and held rather than evaluated, so Plot(Sin(x), (x, 0, 10)) is an expression a cell can hold — and its Out draws it, the way a notebook does, instead of printing the word. The map from a head's arguments to the component's attributes is @enumeratio/frontend/symbols; the family head Chart leaves type unset and lets the data decide.

#An Out that evaluates to a picture

In$\mathrm{Plot}(\sin(x), (x,0,10))$Out$\mathrm{Plot}(\sin(x), (x,0,10))$In$\mathrm{Chart}(\bigl\lbrack3, 1, 4, 1, 5\bigr\rbrack)$Out$\mathrm{Chart}(\bigl\lbrack3, 1, 4, 1, 5\bigr\rbrack)$In$\mathrm{Manipulate}(\mathrm{Plot}(\sin(ax), (x,0,10)), (a,1,5))$Out$\mathrm{Manipulate}(\mathrm{Plot}(\sin(ax), (x,0,10)), (a,1,5))$

source · editable

<notatio-cell value="Plot(Sin(x), (x, 0, 10))" data-allow-mismatch="children" /> <notatio-cell value="Chart([3, 1, 4, 1, 5])" data-allow-mismatch="children" /> <notatio-cell value="Manipulate(Plot(Sin(a * x), (x, 0, 10)), (a, 1, 5))" data-allow-mismatch="children" />

Input syntax

Every expression attribute takes an expression, written in Epsil: Sin(x) * Cos(y) rather than \sin(x)\cos(y), and products need an explicit *. LaTeX is read only inside a $…$ island (value="$x\sin(x)$") — Epsil's own LaTeX hook — where implicit multiplication works as usual. That holds for the editable components too — a notebook's or worksheet's seed is Epsil, converted to LaTeX only for the MathLive field that edits it; in-form="latex" hands the field LaTeX as written, for the rare thing Epsil cannot yet say. A cell's value is written in the syntax its own format names (epsil by default, or latex, mathjson, wolfram); its in-form is a different thing again — which editor shows it (see Cell). Two components keep LaTeX as their own form: <notatio-in>is the math field, so its value is the field's LaTeX, and <notatio-out> renders a given encoding rather than taking authored input, so it keeps its format attribute (latex by default; mathjson and epsil too).

Debugging

The elements fail quietly — a value that doesn't parse renders nothing rather than an error. To see why, turn on the namespace for the element and reload:

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

Representations are Form symbols

A single expression can be shown many ways. Following Wolfram's *Form symbols, each way is a named representation you can request explicitly. The textual forms ship on <notatio-out> (the In/Out menu); the visual forms live in <graphics-box> (a value's frame layer, and the plots) and the plot components.

Representation	Kind	Status	Wolfram analogue
StandardForm	textual	shipped	StandardForm↗
TraditionalForm	textual	shipped	TraditionalForm↗
FullForm	textual	shipped	FullForm↗
TeXForm	textual	shipped	TeXForm↗
MathMLForm	textual	shipped	MathMLForm↗
Permutation matrix	picture	shipped	MatrixPlot↗
Ferrers / Young	picture	shipped	—
Composition bar	picture	shipped	—
Subset cells	picture	shipped	—
Dyck path	picture	shipped	—
Function plot	plot	shipped	Plot↗
Surface / 3-D plot	plot	shipped	Plot3D↗
MatrixForm (true matrix)	textual	roadmap	MatrixForm↗ (via TeX)
Interactive markup	structured	shipped	Manipulate↗ as a head that draws (above); Graphics↗ still roadmap

Two problems, kept separate

1. Explicit request — ask for a specific representation, with options (domain, scaling, ground-set size, …). This is what's built first, and what the stories exercise. It's the stable contract.
2. Default selection / fallback — given an expression and the graphics capabilities available, choose a good representation (a permutation might default to a matrix; a univariate function to a plot; progressively enhancing from plain text up). One case of it is shipped: a head that draws is drawn by its component, and the Chart family chooses its member from the data's shape. The general rule — what a bare permutation or a bare function defaults to — is still deferred until enough real examples accumulate here.

A future REPL will call the same representation layer to request an image and hand back a link (local file or hosted), rather than only rendering inline.