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

fix(dashboard): draw jobq tree connectors with CSS lines instead of box-drawing chars

Browse source 
Replace the Unicode prefix string approach (└─ / ├─ / │  built up as text
in a single <span class="rqe-tree-indent">) with positioned DOM elements
that draw real lines:

- rqe-tree-guide: fixed-width ancestor column, optionally draws a full
  vertical border-left when the ancestor has siblings below it
  (.rqe-tree-guide-line).
- rqe-tree-connector: draws the L/T shape via ::before (vertical stem,
  top→center for last child, full height for mid child) and ::after
  (horizontal spur, center→right). .rqe-tree-connector-last vs
  .rqe-tree-connector-mid controls stem length.

renderTreeNode() now takes ancestorLines: boolean[] instead of a prefix
string. Each entry is true when the ancestor at that depth was not the
last child (so a vertical guide is still needed through that column).
childAncestorLines propagates depth === 0 correctly (root nodes have no
guide columns, so their children start with an empty array).

Lines are drawn with var(--border) so they follow the theme and work at
any font size without alignment drift. Addresses the review note on PR 2686.
This commit is contained in:
iris 2026-07-25 21:21:46 +02:00 • committed by mara
commit ffb2d78a56
2 changed files with 74 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

53
frontend/packages/dashboard/src/system-sections.css
View file

@ -142,6 +142,59 @@
align-items: baseline;
gap: 0.15em;
}
/* ─── jobq node tree (replaces .rqe-nodes for tree-structured payloads) ──── */
.rqe-nodes-tree {
flex-basis: 100%;
margin: 0.25em 0 0 1.8em;
font-size: 0.85em;
display: flex;
flex-direction: column;
gap: 3px;
}
.rqe-tree-row {
display: flex;
align-items: center;
gap: 0;
min-height: 1.6em;
}
/* Guide column: fixed-width spacer that optionally draws a vertical guide
line through rows where a sibling of an ancestor continues below. */
.rqe-tree-guide,
.rqe-tree-connector {
flex-shrink: 0;
width: 1.1em;
align-self: stretch;
position: relative;
}
.rqe-tree-guide-line::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
border-left: 1px solid var(--border);
}
/* Connector: vertical stem from top, horizontal spur to the right.
Last child (└): stem goes top→center. Mid child (├): stem is full height. */
.rqe-tree-connector::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 50%;
border-left: 1px solid var(--border);
}
.rqe-tree-connector-mid::before {
bottom: 0;
}
.rqe-tree-connector::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
right: 0;
border-top: 1px solid var(--border);
}
.rqe-node {
padding: 0.05em 0.45em;
border: 1px solid var(--border);