Skip to content

feat(dag-viewer): stack the stage lanes top to bottom #638

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
zzylol wants to merge 1 commit into
base: stack/cleanup-11-docs
Choose a base branch
from
Draft

feat(dag-viewer): stack the stage lanes top to bottom #638

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion tools/dag-viewer/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion tools/dag-viewer/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
17 changes: 9 additions & 8 deletions tools/dag-viewer/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand All @@ -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); }
Expand All @@ -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; }
Expand All @@ -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; }
Expand Down Expand Up @@ -167,7 +168,7 @@ <h1>ASAPPlanner Stage Viewer</h1>
</header>

<div class="main">
<section class="panel" aria-labelledby="rank-title">
<section class="panel rank-panel" aria-labelledby="rank-title">
<div class="panel-head"><h2 id="rank-title">Stage 3 · plans by cost</h2><span class="eyebrow" id="cost-unit"></span></div>
<div class="lane-meta" id="shown-of" hidden></div>
<ol class="rank" id="rank"></ol>
Expand Down