feat(devtools): add interactive SQL/PromQL Pre/Post-ASAP workload planner and DAG viewer

[zzylol]

Summary

Adds an interactive SQL/PromQL workload planner and DAG viewer for comparing the original pre-ASAP IR with the selected post-ASAP plan.

The browser can edit queries and table schemas, run the real planner pipeline, visualize one query or a multi-query workload union, and inspect the exported IR, schemas, sharing decisions, and replacement strategies without reconstructing planner intent in JavaScript.

Purpose of the demo

This demo is intended to serve three related purposes:

1. Develop new replacement strategies. Strategy authors can add representative SQL/PromQL workloads, run the complete planner, and verify where a new strategy matches, what candidate it produces, how it composes with other replacements, and whether workload sharing is preserved in the final post-ASAP DAG.
2. Debug planning and mapping. Developers can compare pre-ASAP and post-ASAP IR, inspect exact node and edge schemas, follow explicit target/decision mappings, read the selected strategy rationale and cost, and see phase timings without guessing from logs or frontend-generated signatures.
3. Explain ASAP mappings to users. The same visualization can potentially be used as a user-facing explanation of which parts of a query are mapped to ASAP primitives—such as sketches, shared summaries, rollups, grouping structures, and semantic rewrites—and why the planner selected those implementations.

Planner and export model

• Adds dag_export --post-asap and runs parsing/lowering, pre-ASAP DAG generation, ASAP-aware replacement search and cost selection, and post-ASAP DAG generation.
• Exports a complete graph and post_graph for every named query, plus ranked per-target replacements for diagnostics.
• Preserves concrete IR content in JSON: sources and predicates, projections, aggregate measures and reductions/group-by keys, sort keys, limits, schemas, and post-ASAP summary details.
• Attaches an explicit decision to every post-ASAP node produced or carried by a selected replacement. It contains the real strategy name, rationale, rank, estimated cost, role, and workload-level decision ID.
• Links post-ASAP nodes to pre-ASAP targets through exported decision.id / replacement.decision_id metadata. The viewer does not infer a replacement from labels, hashes, or client-side node signatures.
• Assigns workload_node_id in the exporter. Pre/post workload unions and shared-node highlighting consume this ID directly, so shared work is represented by one workload node.
• Preserves shared scans and replacement sub-DAGs when constructing the merged post-ASAP graph.
• Reports elapsed time for parsing/lowering, pre-ASAP generation, ASAP-aware mapping, post-ASAP generation, and the complete planner run.

Replacement strategies

• Uses the names declared by the actual replacement implementations, including SketchAlgorithmStrategy, SharedSubtreeStrategy, HydraGroupingStrategy, AvgToSumOverCountStrategy, RollupStrategy, and TopKLimitReuseStrategy.
• Adds TopKLimitReuseStrategy for compatible top-k queries over the same ordered input. A smaller result can be derived from a larger selected limit, such as Limit(5) -> Limit(10), while retaining the shared ordered/summary input.
• Skips trivial top-level KeepPreAsap winners when splicing the post-ASAP graph, preventing recursive no-op substitution.

Interactive viewer

• Adds a local Python HTTP server with a real /api/plan backend; it invokes dag_export with an argv array rather than a shell command.
• Adds an editable query and table-schema UI with built-in metrics and hosts schemas, per-query schema selection, custom tables/columns/nullability/time indexes, SQL binding, and inferred PromQL metric schemas.
• Uses one Pre/Post-ASAP visualization:
  • selecting one query shows that query's complete pre/post DAGs;
  • selecting multiple queries shows the unioned pre/post workload DAGs.
• Keeps pre-ASAP nodes limited to the original IR. Strategy explanations appear only on post-ASAP nodes.
• Shows compact, text-first DAG cards without symbolic operator icons. Aggregate cards retain measures and grouping reductions; Project cards retain output columns; the sidebar shows the lossless node detail.
• Clicking a post-ASAP node shows its selected strategy, role, rationale, rank/cost, and explicit pre-ASAP target mapping.
• Clicking an edge shows its schema, source and target nodes, target operation, and how the operation derives its output schema.
• Shows human-readable input schemas for the selected workload and provides a horizontally resizable detail sidebar.
• Loads the real-planner demo at startup and preselects a root node so DAG and schema details are immediately visible.
• Removes the obsolete Single/Compare/Union code paths and legacy icon/schema-label code. Merged workload nodes aggregate explicit decision metadata from every owning query.
• Supports standalone HTML generation through tools/dag-viewer/render.py.

Bundled workload

The generated demo covers five queries:

• q1: grouped COUNT(*) over metrics.
• q2: grouped AVG(latency), exercising AvgToSumOverCountStrategy and sketch mapping while sharing the metrics input with q1.
• q3: topk(5, rate(http_requests_total[5m])).
• q4: topk(10, rate(http_requests_total[5m])); q3 derives its smaller limit from q4's larger limit, and both share the ordered summary sub-DAG.
• q6: a real metrics JOIN hosts grouped-count query whose exported workload mapping shares Scan(metrics) with the other compatible SQL queries.

dag.example.json is generated from these real queries through dag_export; it is not manually edited viewer output.

Run

python3 tools/dag-viewer/server.py

Open the URL printed by the server, normally http://127.0.0.1:8000. When the server runs on a remote host, forward that port over SSH or through the editor's Ports panel.

To produce a directly-openable standalone page:

python3 tools/dag-viewer/render.py tools/dag-viewer/dag.example.json -o /tmp/asap-dag.html

Verification

• ASAP-aware mapping and exporter unit tests, including post-ASAP substitution, workload IDs, join sharing, and top-k reuse.
• Python renderer tests for semantic node labels, embedded workloads, and standalone HTML generation.
• Rust formatting and Clippy checks.
• Browser tests covering startup, single-query and multi-query unions, node/edge details, sidebar resizing, and interactive /api/plan submission.