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

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

29
frontend/packages/dashboard/src/builds.js
View file

@ -325,13 +325,24 @@ function renderQueueEntry(entry) {
if (nodes.length) {
const treeRoot = el('div', { class: 'rqe-nodes-tree' });
const treeNodes = buildNodeTree(nodes);
function renderTreeNode(n, depth, isLast, prefix) {
function renderTreeNode(n, depth, isLast, ancestorLines) {
// ancestorLines: boolean[] where true = draw a vertical guide line at
// that ancestor depth level (the ancestor was not the last sibling, so
// its remaining siblings need a guide column below it).
const row = el('div', { class: 'rqe-tree-row' });
if (depth > 0) {
// prefix: the inherited connector string for ancestor columns
// isLast: whether this node is the last sibling (use └ vs ├)
row.append(el('span', { class: 'rqe-tree-indent' },
prefix + (isLast ? '└─ ' : '├─ ')));
// One guide column per ancestor level — draws a vertical line through
// columns where the ancestor still has siblings below it.
for (const hasLine of ancestorLines) {
row.append(el('span', {
class: 'rqe-tree-guide' + (hasLine ? ' rqe-tree-guide-line' : ''),
}));
}
// Connector: L-shaped for last child, T-shaped for mid child.
row.append(el('span', {
class: 'rqe-tree-connector'
+ (isLast ? ' rqe-tree-connector-last' : ' rqe-tree-connector-mid'),
}));
}
const chip = el('span', {
class: 'rqe-node rqe-node-' + n.state,
@ -351,12 +362,14 @@ function renderQueueEntry(entry) {
}, '⎙'));
}
treeRoot.append(row);
const childPrefix = depth > 0 ? prefix + (isLast ? ' ' : '│ ') : '';
// Propagate ancestor lines to children: inherit this node's columns,
// plus whether this node itself continues below (not the last sibling).
const childAncestorLines = depth === 0 ? [] : [...ancestorLines, !isLast];
n._children.forEach((child, i) => {
renderTreeNode(child, depth + 1, i === n._children.length - 1, childPrefix);
renderTreeNode(child, depth + 1, i === n._children.length - 1, childAncestorLines);
});
}
treeNodes.forEach((n, i) => renderTreeNode(n, 0, i === treeNodes.length - 1, ''));
treeNodes.forEach((n, i) => renderTreeNode(n, 0, i === treeNodes.length - 1, []));
li.append(treeRoot);
}
const failed = firstFailedNode(entry);