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
-1
View File
@@ -15,4 +15,3 @@ snapshots, not live numbers.
- `chart-builder-enhancement-scope.md` — consolidated Tier-B → Tier-C forward plan for the Chart Builder.
- `chart-theming-scope.md` — chart theming plan and slice breakdown.
- `monetization-and-sync-exploration.md` — monetization + BYO-cloud-sync direction memo.
- `data-inspector-exploration.md` — transform-aware data-inspector direction.
@@ -223,10 +223,10 @@ the quick "where are we" — read it first.
smoke tests) + `eslint` + `build` (PWA, 45 precache entries). **Owed:** a manual/visual
pass against the live builder (filter shelf, calc → channel, expr errors, preview
table) — tests don't cover what the surface looks/feels like.
- **Surfaced direction (now parked):** the 1D preview shows **raw source** rows; a
transform-aware **data inspector** (resolved rows, à la vega-editor, in the builder
_and_ below the main Live Preview) is the wanted evolution — documented in
**[`docs/data-inspector-exploration.md`](./data-inspector-exploration.md)**, deferred.
- **Surfaced direction (since shipped):** the 1D preview shows **raw source** rows; a
transform-aware **data inspector** (input vs. resolved rows, à la vega-editor, in the
builder _and_ below the main Live Preview) was the wanted evolution — now shipped
(spec §04 → _Data Inspector_).
- **2026-06-10** — **Up next: 1C (filter + calculate transforms), paired with 1D (data preview).**
- **1B · Per-chart export** shipped: an **Export** disclosure in the Live Preview header
@@ -580,12 +580,10 @@ guardrail: _promote a control only when it is **both common AND awkward in JSON*
is short-lived; the smart default already gives a sane start).
- **Lookup / join a second dataset** — Lyra §3.12; data-model change (multi-dataset
snippets). Larger, separate effort.
- **Transform-aware data inspector** — evolve 1D from raw-source rows to the _resolved,
post-transform_ data (filtered rows + calculated columns), and generalize it to a
togglable data panel below the **main** Live Preview (vega-editor's "Data Viewer", a
debugging aid for any snippet, not only builder output). Reads runtime rows via
`view.data(name)` through the `RenderHandle`. Cross-cutting (editor + builder), so it
has its own home: **[`docs/data-inspector-exploration.md`](./data-inspector-exploration.md)**.
- ~~**Transform-aware data inspector**~~ ✅ shipped — an Input | Resolved data panel below
the **main** Live Preview and the builder preview (vega-editor's "Data Viewer", a
debugging aid for any snippet), reading runtime rows through the `RenderHandle`. Spec §04
→ _Data Inspector_; arch 05 → "the data inspector rides the boundary".
---
@@ -1,64 +0,0 @@
# Data Inspector — exploration (future direction)
> **Status:** parked idea (2026-06-11). A deliberate divergence from the Phase-1
> chart-builder scope, recorded here so it isn't lost. **Not built.** The shipped
> seed is the builder's 1D data preview (raw source rows); this is its transform-aware
> evolution, generalized to the main editor.
## What
A vega-editor-style **data inspector**: show the data tables the chart actually uses at
runtime — _after_ the spec's transforms run — not just the raw source rows. Two homes:
1. **Chart Builder** — make the existing data preview (1D) transform-aware: show the
filtered rows and any calculated columns, so the preview reflects the `transform`
block the builder emits. (Today 1D shows the **raw dataset rows**, pre-transform — an
"inspect the source" view. This adds the "inspect the result" view alongside it.)
2. **Main window** — a **togglable data panel below the Live Preview** in the editor,
for any snippet (not only builder-made ones): inspect each named dataset / the
post-transform rows while authoring a spec by hand.
## Why
vega-editor surfaces every internal data table below the chart (its "Data Viewer"), and
it is the primary way to debug "why is my chart empty / wrong" — you look at what the
transforms produced. Astrolabe has no equivalent today: the only data views are of the
**raw source** (the Datasets manager, and builder 1D). Seeing the **resolved** data
closes that debugging gap and is useful well beyond the builder.
## Technique
Vega exposes runtime datasets via `view.data(name)` — the rows of any named dataset in
the compiled dataflow, including the root data _after_ transforms. The renderer already
owns the only `view` reference behind `RenderHandle` (`src/app/services/chart-renderer.ts`);
add a `RenderHandle.listData()` / `data(name)` accessor that wraps `view.data(...)`,
mirroring how `toImageURL` wraps `view.toImageURL` — so no component touches the raw
view and the embedding boundary holds (architecture/05 §1–§2).
Vega-Lite compiles user transforms into named datasets (e.g. `source_0`, `data_0`);
mapping those to friendly labels and choosing which to expose is the main design work.
## Scope notes / open questions
- **Read-only**, like 1D — it inspects, never mutates (the "moderately capable" ceiling:
a debugging aid, not a data editor).
- **Big datasets** — cap the rows shown (reuse the 50-row preview cap). The view holds
every row; the table must not.
- **Which tables to list** — just the post-transform root/result, or every internal
dataset (the vega-editor dropdown)? Start with the result; expose the rest behind a
selector if it earns its place.
- **Main-window placement** — a third stacked region inside the preview pane (toggle +
persisted visibility, like the existing pane toggles) vs. a tab over the chart. Wants a
small interaction pass (architecture/10) before building.
- **Refresh timing** — the data is only available once a view has rendered; the panel
reads from the live `RenderHandle` and updates when a new render resolves (it must not
read a finalized view — same generation discipline as the preview).
## Relationship to shipped work
- Seed: builder **1D** data preview — see
[`chart-builder-enhancement-scope.md`](./chart-builder-enhancement-scope.md) (§3 1D).
- Renderer/preview home: [`architecture/05`](../architecture/05-rendering-theming-preview.md)
(the `RenderHandle` boundary the `view.data` accessor extends).
- Behaviour, once built, is specified in `docs/spec/04` (Live Preview) and `docs/spec/06`
(the builder preview), per "spec follows code".