diff options
| -rw-r--r-- | src/api/dashboard/dashboard.html | 21 |
1 files changed, 16 insertions, 5 deletions
diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html index 5d49311..e5ed7a7 100644 --- a/src/api/dashboard/dashboard.html +++ b/src/api/dashboard/dashboard.html @@ -828,8 +828,16 @@ function layout(nodes, pairs, width, height, only) { y: height / 2 + (Math.random() - .5) * height / 2 }); } } - for (let round = 0; round < 120; round++) relax(nodes, pairs, width, height, 1, 10, only); + // Each round is as long as there are pairs of nodes: with many members, fewer rounds + // than 120 rather than a page that stops for seconds (`LAYOUT_FOR_MS`). + const until = performance.now() + LAYOUT_FOR_MS; + for (let round = 0; round < 120 && performance.now() < until; round++) { + relax(nodes, pairs, width, height, 1, 10, only); + } } +// How long a layout may hold the page up at once, in ms; what it leaves, the map +// settles into while shown (`settle`). +const LAYOUT_FOR_MS = 150; // One round of the layout: every node moved by `gain` of the forces on it, at most // `most` px. Returns how far the furthest moved. A gain of 1 overshoots where a node // has several links (the pulls add up): it gets close fast, then swings about its @@ -1073,12 +1081,15 @@ function renderGraph() { const fresh = new Set(nodes.filter(id => !positions.has(id))); if (relayout) { layout(nodes, pairs, width, height); - // Dynamic: settled at once, not moving into place before one's eyes. + // Dynamic: settled at once, not moving into place before one's eyes; as far as + // `LAYOUT_FOR_MS` allows (with many members), the rest frame by frame (`settle`). if (byRtt) { - for (let round = 0; round < 3000; round++) { - if (relax(nodes, pairs, width, height, .15, 2) <= .1) break; + const until = performance.now() + LAYOUT_FOR_MS; + let settled = false; + for (let round = 0; round < 3000 && performance.now() < until; round++) { + if (relax(nodes, pairs, width, height, .15, 2) <= .1) { settled = true; break; } } - lastLengths = pairs.map(pair => pair.join(" ")).join(","); + if (settled) lastLengths = pairs.map(pair => pair.join(" ")).join(","); } } else if (fresh.size > 0) { layout(nodes, pairs, width, height, fresh); |