fix: resolve issue #1025

[samiamjidkhan]

Motivation

The TopologyGraph component used D3.js to imperatively rebuild the entire SVG DOM (ported from old dashboard) on every 1-second poll, causing high GPU usage. This violated Svelte's core principle of fine-grained reactivity. #1025

Changes

• Rewrote TopologyGraph.svelte from D3 imperative style to pure declarative Svelte
• Replaced d3.select().append() DOM manipulation with {#each} blocks and reactive bindings
• Removed D3 dependency from this component
• Replaced ResizeObserver with Svelte's bind:clientWidth/clientHeight

Why It Works

Svelte's compiler generates code that diffs individual attribute values. With keyed {#each} blocks ({#each nodes as node (node.id)}), DOM elements persist across updates—only changed attributes (e.g., RAM percentage) are repainted, not the entire graph.

Test Plan

Manual Testing

Hardware: MacBook Pro
The topology looks and behaves exactly the same, with lesser GPU usage. Please test on more real nodes @AlexCheema

Automated Testing

N/A

[AlexCheema]

GPU usage seems to be slightly better now in the default view.

However when a model is selected in the launch instance menu, GPU usage goes from 2-3% idle up to 13-14% idle.

[AlexCheema]

Could you test if this fixed the high GPU usage?

[samiamjidkhan]

Could you test if this fixed the high GPU usage?

yes it did