[zzylol]

Summary

Implements #186: two new view modes for tools/dag-viewer, reachable via a
Single / Compare / Union toggle next to the drop zone. Single stays the
default and is behaviorally unchanged; Compare and Union only activate once
two or more loaded queries are checked.

The issue text predates a couple of renames — corrected as I went:
dag_export.rs lives at crates/types/src/dag_export.rs, not
crates/ir/..., and asap_plan::cse::dedupe_subtrees was deleted in #192.
The real CSE pass today, asap_types::pre_asap::cse::share_common_subtrees
(landed via #235), still isn't wired into any caller that would give this
viewer real CSE output to render, so both new modes build on the same
hash-based structural-match proxy the existing single-view ring
highlighting already used — not real Rc identity. #244 (structural-hash
unification, not yet merged as of this PR) wasn't rebased in; this targets
main as-is.

Interaction model

• Compare — every checked query gets its own lane: a dashed compound
  box titled with the query's name, using cytoscape.js's built-in
  compound-node grouping. A dashed line connects a node in one lane to the
  nearest earlier lane containing a node with the same structural hash, so
  "what recurs across these queries" is a line you trace instead of a ring
  you hunt for node by node. The link edges are added to the graph after
  the per-lane dagre layout call returns — they're purely decorative and
  never influence dagre's ranking, so lanes stay exactly one-per-query no
  matter how much cross-lane sharing there is.

• Union — the checked queries merge into one graph. Any node whose hash
  is shared by ≥ 2 of them collapses into a single node (double border in
  the graph, and the side panel lists which queries it's present in, plus
  which of them it's the root of — a node can be the root of more than one
  query if two queries are fully identical). Edges from every query that
  reaches a shared node converge onto it instead of each query drawing a
  disconnected copy of the same subtree.

• A small header note (""Shared" = same structural hash across independent exports, not live Rc identity"), shown only while in Compare/Union,
  plus an expanded README section, keep the UI honest about what "shared"
  means here — see the "Shared-subtree highlighting is a proxy, not real
  CSE" section for the two concrete reasons a hash match isn't a real-CSE
  guarantee (no PartialEq/legality re-check, no Rc identity crossing
  the tool's process boundary).

Handling branching DAGs

QueryExpr graphs branch at arbitrary depth (Merge/Concat with N
children, Join/SetOp/BinaryOp with two, LetBinding with two
structurally different children) — Union mode's merge is exactly the case
where this matters: a merged node can end up with several parents at
once (e.g. two queries whose Aggregate differs but whose Scan is
identical both point at that one merged Scan). dagre lays out
multi-parent DAGs natively — it's a general layered-DAG algorithm, not a
tree layout — so no special-cased layout logic was needed for this beyond
building the merged node/edge set correctly (dedupe nodes and edges by a
merge key, keep every distinct incoming edge). Compare mode's lanes don't
need this since each lane is internally still a plain per-query tree/DAG,
identical in shape to what single-view already renders.

What didn't need to change

WorkloadGraph / DagGraph / DagNode in
crates/types/src/dag_export.rs already carry everything both modes
need — each node's hash, children, and each query's root — confirmed
by reading the exporter before writing any JS. No Rust changes.

Validation

No browser is available in this environment, so I went further than
eyeballing: the real inline script from index.html (plus node-style.js,
completely unmodified) was loaded into an actual V8 context via
py_mini_racer, with minimal DOM stubs for the handful of document/
window APIs it touches, and exercised against real dag_export output:

• A freshly cargo run -p asap-devtools --bin dag_export-generated
  multi-query file (4 queries, deliberately overlapping: two SQL queries
  differing only in aggregate function, an exact duplicate of one of them,
  and a fully disjoint PromQL query) plus the committed dag.example.json.
• Captured the exact elements arrays that would be handed to
  cytoscape/dagre (via a capturing stub in place of the real
  cytoscape() call) and asserted on them: no duplicate node/edge ids,
  every edge references a node that exists, no Compare-mode structural
  edge ever crosses a lane boundary, Union-mode's merge groups exactly
  match hand-computed expected sharing — including the merged Scan node
  ending up with two structurally different parents (the multi-parent
  branching case) and a node correctly tracked as root of more than one
  merged query.
• Exercised the <2-selected path (must show the hint and never call
  cytoscape()), the mode-toggle's default-select-all-on-first-switch
  behavior and that the checkbox selection survives switching back to
  Single, and confirmed single-view's generated element shape is
  byte-for-byte unchanged from before the refactor (regression check).
• Separately, loaded dagre.min.js standalone (no cytoscape, no DOM
  needed — it's a pure graph-layout library) and fed it a small
  compound/lane graph directly, confirming dagre's compound-node support
  does lay disconnected lanes out side by side without overlap, in
  insertion order — the load-bearing assumption behind Compare mode's lane
  layout.
• JS syntax additionally checked with esprima.

Two small pre-existing doc bugs fixed in passing: the empty-state
instructions referenced the old asap-lower crate name (now
asap-devtools, matching the rest of the docs), and a JS comment pointed
at the old crates/ir/src/dag_export.rs path.

Docs

tools/dag-viewer/README.md's "Future work" section (which pointed at
this issue) is replaced with a real "Compare and Union mode" section
describing how to use both modes and what "shared" means, matching the
rest of the README's style. RUNNING.md gets a short pointer to it.

Closes #186

🤖 Generated with Claude Code