vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

jobq-graph: render Node-kind dep edges between siblings

Browse source 
<hive-jobq-graph> only ever drew the parent/child containment tree --
a dependency between two sibling nodes (same parent, e.g.
prebuild.after_ok(meta_sync)) was invisible on screen. Confirmed with
the operator that a Node-kind dep never crosses a group boundary
(always a sibling under the same parent), so this is a purely local
problem per sibling list, not a whole-graph layout question.

Each sibling list is reordered dependency-first (stable topo sort,
falls back to original order on ties or an unexpected cycle) and gets
a small connecting rail in its left gutter marking dep edges, with a
tooltip naming what a waiting node is blocked on. Groups with no deps
render exactly as before -- no extra markup, no cost.

Verified the ordering + rail-classification logic standalone against
constructed fixtures (9 + 12 checks) before trusting it in the real
component.
This commit is contained in:
iris 2026-08-04 00:57:25 +02:00 • committed by mara
commit 86a7a62519
2 changed files with 125 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

31
frontend/packages/shared/src/jobq-graph/hive-jobq-graph.css
View file

@ -36,6 +36,37 @@
flex-wrap: wrap;
}
/* Dependency-edge gutter (only present on rows in a sibling list that has
at least one `Node`-kind dep among it — see hive-jobq-graph.js
`renderGroup`). A plain rail (no line, no dot) on every other row in
that list keeps the state glyph aligned; rows outside such a list carry
no rail element at all, so the common case is untouched. */
.jg-edge-rail {
position: relative;
align-self: stretch;
flex: none;
width: 0.7em;
}
.jg-edge-rail.jg-edge-on::after {
content: '';
position: absolute;
left: 50%;
top: var(--jg-rail-top, 50%);
bottom: var(--jg-rail-bottom, 50%);
width: 0;
border-left: 2px solid var(--cyan);
}
.jg-edge-rail.jg-edge-dot::before {
content: '';
position: absolute;
left: calc(50% - 0.19em);
top: calc(50% - 0.19em);
width: 0.38em;
height: 0.38em;
border-radius: 50%;
background: var(--cyan);
}
.jg-state {
font-weight: bold;
min-width: 1.2em;