feat: change auto-refresh interval with pause/play toggle#168
Merged
rajsinghtech merged 3 commits intorajsinghtech:mainfrom Apr 16, 2026
Merged
feat: change auto-refresh interval with pause/play toggle#168rajsinghtech merged 3 commits intorajsinghtech:mainfrom
rajsinghtech merged 3 commits intorajsinghtech:mainfrom
Conversation
- Increase auto-refresh interval from 60s to 5min (300s) - Add pause/play toggle button in header (P keyboard shortcut) - Centralize refresh interval constant across all callsites - Keep SvelteFlow mounted during layout recalculations to preserve viewport pan/zoom state across data refreshes - Use node-only topology key so edge churn doesn't trigger re-layout - Preserve existing node positions on incremental topology changes - Add layout versioning to prevent stale async results from applying - Show non-destructive overlay indicator during layout updates Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
When SvelteFlow stays mounted across refreshes (our viewport preservation change), xyflow's internal ResizeObservers don't re-fire for existing DOM elements. This means new node objects without measured/width/height cause nodeHasDimensions() to return false, making the MiniMap render empty. Fix: capture existing node state (measured, width, height) from the flow store before creating replacement nodes, and carry these properties forward in all code paths (ELK layout, merge, removal, fallback). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Reverts all NetworkGraph.svelte changes (viewport preservation, layout versioning, topology key, conditional rendering) back to upstream. Remaining changes: - Auto-refresh interval increased from 60s to 5 minutes - Pause/Play toggle button in header (+ P keyboard shortcut) - Centralized AUTO_REFRESH_INTERVAL constant - TimelineSlider uses centralized interval Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Owner
|
Thank you! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On larger tailnets (100+ nodes, 300+ flows), the hardcoded 60-second auto-refresh interval causes the network graph
to reset too frequently. Each refresh triggers a full ELK re-layout which destroys and rebuilds the entire
SvelteFlow component, resetting the user's viewport (zoom/pan position). This makes the graph essentially unusable
for exploration on busy networks.
Solution
Two targeted changes:
between refreshes
I experimented with preserving node dimensions between refreshes, but it led to some unintended behavior and overlaps. I'll revisit this later.
Changes (5 files, +37/-15 lines)
network-store.tsAUTO_REFRESH_INTERVALconstant (300s),toggleAutoRefresh()functionstores/index.ts+page.sveltePkeyboard shortcutHeader.svelteTimelineSlider.svelteAUTO_REFRESH_INTERVALinstead of hardcoded60_000UI
No breaking changes