feat(dashboard): drag the Network page's boxes around; links coloured against the busiest link

The layout the viewer makes is kept in the browser, with a Reset layout button. A link's colour now
compares it with the busiest link right now instead of its own recent peak, which made steady links
look saturated.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Aaron Kimbrell
2026-09-29 18:41:35 -05:00
parent 6a59da1748
commit a824ff9914
3 changed files with 65 additions and 11 deletions

View File

@@ -86,6 +86,14 @@ same(G.speed(1e6) < G.speed(1), true, 'busier moves faster');
// Layout: columns left to right, every link a path each way
const L = G.layout(graph, 1000);
same(L.nodes.clients.x < L.nodes.auth.x && L.nodes.auth.x < L.nodes.master.x && L.nodes.master.x < L.nodes.dashboard.x && L.nodes.dashboard.x < L.nodes.web.x, true, 'columns, web clients right of the dashboard');
// A dragged box goes where it was put, its links follow, and the box grows the canvas if needed
{
const M = G.layout(graph, 1000, { master: { fx: 0.5, y: 900 } });
same(M.nodes.master.x === 500 && M.nodes.master.y === 900, true, 'dragged node placed');
same(M.height >= 900 + M.nodeHeight / 2, true, 'canvas grows for a dragged node');
same(Object.keys(M.paths).length === Object.keys(L.paths).length, true, 'links still drawn');
}
same(graph.edges.every((e) => L.paths[e.id] && /^M/.test(L.paths[e.id].fwd) && /^M/.test(L.paths[e.id].back)), true, 'paths');
same(G.layout(graph, 1000), L, 'the same layout every time');