Politur: Reheat-Schleifen bei Mausbewegungen in GraphView behoben (D3-Simulation stabilisiert)

This commit is contained in:
Hitonabi
2026-07-09 12:46:07 +02:00
parent 1983d70805
commit c0586c3fad
4 changed files with 16 additions and 18 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -7,7 +7,7 @@
<link rel="manifest" href="/manifest.webmanifest" /> <link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>Mission Control 2.0</title> <title>Mission Control 2.0</title>
<script type="module" crossorigin src="/assets/index-D663kYCx.js"></script> <script type="module" crossorigin src="/assets/index-C1WKhrF6.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index--2fz5jZz.css"> <link rel="stylesheet" crossorigin href="/assets/index--2fz5jZz.css">
</head> </head>
<body> <body>
+6 -8
View File
@@ -94,7 +94,8 @@ export function GraphView({ data, selectedNodeId, onNodeSelect }: {
}[category] || 0 }[category] || 0
} }
// D3 Force Engine tunen (Luftige Struktur, kein Überlappen, Clustering) // D3 Force Engine initialisieren NUR wenn sich die Daten tatsächlich ändern!
// Entfernt hovered/selectedNodeId aus den Dependencies, um Reheat-Zucken und CPU-Spikes bei Mausbewegung zu eliminieren.
useEffect(() => { useEffect(() => {
const fg = fgRef.current const fg = fgRef.current
if (!fg) return if (!fg) return
@@ -110,19 +111,16 @@ export function GraphView({ data, selectedNodeId, onNodeSelect }: {
const charge = fg.d3Force("charge") const charge = fg.d3Force("charge")
if (charge) charge.strength(-380) if (charge) charge.strength(-380)
// 4. Kollisionskraft (Sicherer Radius, verhindert Überlappung) // 4. Konstanter, stabiler Kollisionsradius (verhindert Reheat-Zucken bei Mausbewegung)
fg.d3Force("collide", forceCollide().radius((node: any) => { fg.d3Force("collide", forceCollide().radius(28).iterations(2))
const isLarge = node.id === hovered || node.id === selectedNodeId
return isLarge ? 50 : 25
}).iterations(2))
// 5. Federkraft (Links) // 5. Federkraft (Links)
const link = fg.d3Force("link") const link = fg.d3Force("link")
if (link) link.distance(85) if (link) link.distance(85)
// Simulation neu starten (Reheat) // Simulation einmalig heiss starten für die neuen Daten
fg.d3ReheatSimulation() fg.d3ReheatSimulation()
}, [graphData, hovered, selectedNodeId]) }, [graphData])
const activeNode = hovered || selectedNodeId const activeNode = hovered || selectedNodeId