chore: release v1.7.86-alpha

neode-ui/src/components/federation/NetworkMap.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import * as d3 from 'd3'
 
 interface MapNode {
@@ -36,6 +36,11 @@ type SimLink = d3.SimulationLinkDatum<SimNode> & { source: string | SimNode; tar
 let simulation: d3.Simulation<SimNode, SimLink> | null = null
 let resizeObserver: ResizeObserver | null = null
 
+const graphSignature = computed(() => JSON.stringify({
+  nodes: props.nodes.map(n => [n.did, n.label, n.trust_level, n.online, n.app_count, n.is_self]),
+  links: props.links.map(l => [l.source, l.target]),
+}))
+
 function trustColor(level: string): string {
   switch (level) {
     case 'trusted': return '#4ade80'
@@ -50,6 +55,7 @@ function nodeRadius(n: MapNode): number {
 }
 
 function render() {
+  simulation?.stop()
   const svg = d3.select(svgRef.value!)
   svg.selectAll('*').remove()
 
@@ -160,7 +166,7 @@ onUnmounted(() => {
   resizeObserver?.disconnect()
 })
 
-watch(() => [props.nodes, props.links], () => render(), { deep: true })
+watch(graphSignature, () => render())
 </script>
 
 <style scoped>