Data inspector: input/resolved rows below the chart, with a resizable divider

A collapsible Data panel under the Live Preview and Chart Builder charts shows the rows the chart actually uses, switching between Input (parsed source) and Resolved (post-transform) views read from the live Vega view. Collapsed by default; the open-state and a draggable height divider persist.

Rows come through a new RenderHandle.inspectData() accessor, so no component touches the view: core/result-data picks the most-upstream source and most-downstream result from the compiled dataflow, read lazily. The divider reuses the window-splitter pattern (horizontal variant).

Consolidations: a shared DataTable primitive replaces the inspector's and the builder's duplicate read-only tables; useResizeDrag merges the col/row drag-gesture twins.

Docs: spec 04/06 and arch 05/10 updated; the now-shipped exploration memo removed.
This commit is contained in:
2026-06-18 02:22:03 +03:00
parent 223646398e
commit efb5a9bbe0
35 changed files with 1210 additions and 184 deletions
@@ -40,12 +40,28 @@ above it is data; everything below it is a Vega `View` we own and must tear down
`subscribe` listener), not as reactive state itself.
- **Don't** scatter `vegaEmbed(...)` calls across components.
> **Forward note — data inspector.** A planned vega-editor-style inspector (show the
> _resolved, post-transform_ data tables, in the builder and as a togglable panel below
> the main Live Preview) reads runtime rows via `view.data(name)`. It rides this same
> boundary: a `RenderHandle.data()` accessor wraps the view (like `toImageURL`), so no
> component touches the raw view. Parked, not built — see
> [`docs/exploration/data-inspector-exploration.md`](../exploration/data-inspector-exploration.md).
### The data inspector rides the boundary too
The data inspector (the Live Preview and Chart Builder panel showing the chart's input
vs. resolved rows — spec §04) reads runtime rows through the handle, never the raw view:
`RenderHandle.inspectData()` returns the input + resolved tables (`{ input, resolved }`,
or `null` when no chart is up), wrapping the view exactly like `toImageURL`. It works in
two layers:
- **Enumerate + pick (`view.getState` + `core/result-data`).** A compiled Vega dataflow
holds many named datasets; Vega-Lite names them by convention — `source_<n>` per parsed
source, `data_<n>` per transform stage. The pure `pickSourceDataset` / `pickResultDataset`
choose the **most-upstream source** (the input) and **most-downstream output** (what the
marks draw), skipping dataflow internals (`marks`, `root`, layout, selection `*_store`s).
A spec with no transforms resolves both to the same table. The picking is pure (in `core`,
unit-tested); only the enumeration touches the view.
- **Read lazily.** `getState` serializes the datasets it lists, so it is **only called while
the panel is open** — a collapsed inspector costs nothing, which is why the panel reads on
demand rather than on every render.
Limitation: one name per direction can't represent a multi-view spec (layer/concat/facet
produce several `data_<n>`); the most-downstream/upstream ones are returned, and a full
dataset selector is left as a future option.
---