From e0694bef4131ac567d276ed824695ddcf1aa4138 Mon Sep 17 00:00:00 2001 From: zzylol <50204836+zzylol@users.noreply.github.com> Date: Mon, 5 Oct 2026 12:45:18 +0000 Subject: [PATCH] feat(dag-viewer): stack the stage lanes top to bottom Stage 0, Stage 1 and Stage 2 now sit one below the other, each as wide as the page allows, so a wide DAG is readable without squeezing three lanes side by side. The Stage 3 list stays beside them and sticks while the page scrolls; on a phone it stacks above as before. Co-Authored-By: Claude Opus 5.5 --- tools/dag-viewer/README.md | 3 ++- tools/dag-viewer/app.js | 3 ++- tools/dag-viewer/index.html | 17 +++++++++-------- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/tools/dag-viewer/README.md b/tools/dag-viewer/README.md index 6d911977b..e283e78bc 100644 --- a/tools/dag-viewer/README.md +++ b/tools/dag-viewer/README.md @@ -30,7 +30,8 @@ To run it, see [RUNNING.md](RUNNING.md). valid but costlier, or invalid with the reason. Clicking one shows it in the lanes. When a document carries only the cheapest plans, the list says how many of how many. -- **Three lanes**: Stage 0, the chosen Stage 1 candidate, and the chosen +- **Three lanes**, stacked top to bottom so each is as wide as the page: + Stage 0, the chosen Stage 1 candidate below it, and the chosen Stage 2 candidate with each node's timing and Stage 3 cost. Nodes are data sources, relational operators, or summary operators; summary builds print their configuration (for example `CmsWithHeap · depth 7 · heap 100 · width diff --git a/tools/dag-viewer/app.js b/tools/dag-viewer/app.js index cfd4ded30..458387435 100644 --- a/tools/dag-viewer/app.js +++ b/tools/dag-viewer/app.js @@ -1,5 +1,6 @@ // ASAPPlanner Stage Viewer: an asap-stage-pipeline/v1 document as a ranked -// Stage 3 list beside three DAG lanes (Stage 0 → 1 → 2), details below. +// Stage 3 list beside three DAG lanes stacked top to bottom (Stage 0, then 1, +// then 2), details below. // Document parsing, ranking and labels live in stages.js (tested); // node-style.js groups operator kinds. The same files run in the published // artifact. diff --git a/tools/dag-viewer/index.html b/tools/dag-viewer/index.html index 92864db43..b143c040a 100644 --- a/tools/dag-viewer/index.html +++ b/tools/dag-viewer/index.html @@ -47,7 +47,7 @@ } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 14px; line-height: 1.45; } -.wrap { padding-inline: 16px; padding-block: 18px 32px; max-width: 1680px; margin-inline: auto; display: grid; gap: 16px; } +.wrap { padding-inline: 16px; padding-block: 18px 32px; max-width: 1920px; margin-inline: auto; display: grid; gap: 16px; } header { display: grid; gap: 10px; } h1 { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: 0.01em; margin: 0; text-wrap: balance; } .lede { margin: 0; color: var(--muted); max-width: 78ch; } @@ -63,7 +63,8 @@ .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .eyebrow { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; font-size: 12px; color: var(--muted); } .panel-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 0; } -.rank { list-style: none; margin: 0; padding: 6px; max-height: 760px; overflow-y: auto; display: grid; gap: 4px; } +.rank-panel { position: sticky; top: 12px; } +.rank { list-style: none; margin: 0; padding: 6px; max-height: calc(100vh - 120px); overflow-y: auto; display: grid; gap: 4px; } .rank button { width: 100%; text-align: left; font: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 8px 10px; cursor: pointer; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 2px 8px; align-items: baseline; } .rank button:hover { background: var(--panel-2); } .rank button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); } @@ -76,12 +77,13 @@ .chip.selected { color: var(--ok); background: var(--ok-soft); } .chip.invalid { color: var(--bad); background: var(--bad-soft); } .chip.costlier { color: var(--warn); background: var(--warn-soft); } -.lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; } -.lane .panel-head { min-height: 64px; } +/* Stage 0, 1 and 2 stack top to bottom, each as wide as the page allows. */ +.lanes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; } +.lane .panel-head { align-items: center; } .lane select { font: inherit; font-size: 13px; color: var(--fg); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; max-width: 100%; min-width: 0; } .lane-meta { padding: 6px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); min-height: 30px; overflow-wrap: anywhere; } .lane-meta b { color: var(--fg); font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; } -.cy { height: 640px; width: 100%; } +.cy { height: 560px; width: 100%; } .legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); padding: 2px 2px; } .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; border: 1.5px solid; } .details { padding: 12px; display: grid; gap: 10px; } @@ -108,8 +110,7 @@ .status { color: var(--muted); } .error { color: var(--bad); } footer { color: var(--muted); font-size: 12px; max-width: 100ch; } -@media (max-width: 1280px) { .lanes { grid-template-columns: minmax(0, 1fr); } .cy { height: 520px; } } -@media (max-width: 820px) { .main { grid-template-columns: minmax(0, 1fr); } .rank { max-height: 340px; } .cy { height: 460px; } } +@media (max-width: 820px) { .main { grid-template-columns: minmax(0, 1fr); } .rank-panel { position: static; } .rank { max-height: 340px; } .cy { height: 460px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } .toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .btn { font: inherit; font-size: 13px; padding: 5px 11px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); cursor: pointer; } @@ -167,7 +168,7 @@

ASAPPlanner Stage Viewer

-
+

Stage 3 · plans by cost