Hitonabi/mission-control-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Politur: Gedaechtnis-Graph Performance + Treffsicherheit grundsaniert

Browse Source 
- Doppel-Mount behoben: GraphView lief unsichtbar doppelt (Desktop+Mobile), jetzt nur eine Instanz via matchMedia
- ctx.shadowBlur pro Knoten/Frame durch billigen Halo-Kreis ersetzt (Blur nur fuer aktiven Knoten)
- Kantenfarben beim Datenaufbau vorberechnet statt nodes.find() pro Kante pro Frame
- Knoten-Objekte ueber Daten-Updates wiederverwendet: Positionen ueberleben Refetch/Suche, Reheat nur bei Strukturaenderung
- Hit-Zone zoom-kompensiert (min. ~14 Bildschirm-Pixel) - Knoten sind rausgezoomt jetzt klick- und hoverbar
- Suche via useDeferredValue vom Graph-Umbau entkoppelt

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Hitonabi
2026-07-09 13:07:31 +02:00
parent 6ad6c09cc0
commit dfcf86902a
5 changed files with 298 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/GraphView.tsx
+190 -159
View File
@@ -1,4 +1,4 @@
import { useEffect, useMemo, useRef, useState } from "react"
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import ForceGraph2D from "react-force-graph-2d"
import { forceCollide, forceX, forceY } from "d3-force"
import { RefreshCw } from "lucide-react"
@@ -12,13 +12,17 @@ const CAT_LABEL: Record<string, string> = {
}
const EDGE_HI = "rgba(99, 102, 241, 0.9)"
const DIM_EDGE = "rgba(255, 255, 255, 0.02)"
const FALLBACK_EDGE = "rgba(100, 116, 139, 0.25)"
// Hilfsfunktion zur Konvertierung von Hex in RGBA für farbkodierte Verbindungen
function hexToRgba(hex: string, alpha: number): string {
const r = parseInt(hex.slice(1, 3), 16)
const g = parseInt(hex.slice(3, 5), 16)
const b = parseInt(hex.slice(5, 7), 16)
return `rgba(${r}, ${g}, ${b}, ${alpha})`
// Ruhefarben der Kanten je Kategorie EINMAL vorberechnen — niemals pro Frame rechnen.
const CAT_EDGE_COLOR: Record<string, string> = {
identity: "rgba(0, 245, 255, 0.25)", knowledge: "rgba(59, 130, 246, 0.25)",
rules: "rgba(217, 70, 239, 0.25)", events: "rgba(251, 191, 36, 0.25)",
}
// Halo-Farben (billiger Glow-Ersatz für ctx.shadowBlur, das pro Knoten/Frame unbezahlbar ist)
const CAT_HALO_COLOR: Record<string, string> = {
identity: "rgba(0, 245, 255, 0.16)", knowledge: "rgba(59, 130, 246, 0.16)",
rules: "rgba(217, 70, 239, 0.16)", events: "rgba(251, 191, 36, 0.16)",
}
export function GraphView({ data, selectedNodeId, onNodeSelect }: {
@@ -49,28 +53,50 @@ export function GraphView({ data, selectedNodeId, onNodeSelect }: {
return () => resizeObserver.disconnect()
}, [])
// Graphology-Daten in react-force-graph-2d-kompatibles Format konvertieren
// Knoten-Objekte über Daten-Updates hinweg WIEDERVERWENDEN: D3 behält x/y auf dem
// Objekt — nur so überleben die Positionen Refetches und Suchfilter, statt dass der
// ganze Graph bei jedem Update neu explodiert (und Knoten unterm Cursor wegwandern).
const nodeCacheRef = useRef(new Map<string, any>())
const graphData = useMemo(() => {
return {
nodes: data.nodes.map((n) => ({ ...n })),
links: data.edges.map((e) => ({
source: e.source,
target: e.target,
weight: e.weight || 0,
})),
const cache = nodeCacheRef.current
const seen = new Set<string>()
const nodes = data.nodes.map((n) => {
seen.add(n.id)
let node = cache.get(n.id)
if (!node) {
node = { ...n }
cache.set(n.id, node)
} else if (node.content !== n.content || node.category !== n.category) {
node.content = n.content
node.category = n.category
node.__baseTextWidth = undefined
}
return node
})
for (const id of Array.from(cache.keys())) {
if (!seen.has(id)) cache.delete(id)
}
const catById = new Map(data.nodes.map((n) => [n.id, n.category]))
const links = data.edges.map((e) => ({
source: e.source,
target: e.target,
weight: e.weight || 0,
// Stabile String-IDs behalten (D3 ersetzt source/target durch Objektreferenzen)
__sid: e.source,
__tid: e.target,
__restColor: CAT_EDGE_COLOR[catById.get(e.source) ?? ""] ?? FALLBACK_EDGE,
}))
return { nodes, links }
}, [data])
// Grad (Degree) berechnen – fängt D3-Objektmutationen robust ab
// Grad (Degree) berechnen
const degree = useMemo(() => {
const d: Record<string, number> = {}
data.edges.forEach((e) => {
const sId = typeof e.source === "object" ? (e.source as any).id : e.source
const tId = typeof e.target === "object" ? (e.target as any).id : e.target
if (sId && tId) {
d[sId] = (d[sId] || 0) + 1
d[tId] = (d[tId] || 0) + 1
}
d[e.source] = (d[e.source] || 0) + 1
d[e.target] = (d[e.target] || 0) + 1
})
return d
}, [data])
@@ -94,33 +120,37 @@ export function GraphView({ data, selectedNodeId, onNodeSelect }: {
}[category] || 0
}
// D3 Force Engine initialisieren – NUR wenn sich die Daten tatsächlich ändern!
// Minimiert CPU-Zyklen und verhindert Reheat-Zucken bei Mausbewegung.
// Reheat nur, wenn sich die STRUKTUR ändert (Knoten-/Kantenmenge) — nicht bei jeder
// neuen Objekt-Identität der Daten. Verhindert Layout-Neustarts bei blossen Refetches.
const structureKey = useMemo(() => {
return `${data.nodes.map((n) => n.id).sort().join(",")}#${data.edges.length}`
}, [data])
useEffect(() => {
const fg = fgRef.current
if (!fg) return
// 1. Standard-Zentrumskraft entfernen
fg.d3Force("center", null)
// 2. Clustering-Kräfte
fg.d3Force("x", forceX().x((node: any) => getClusterX(node.category)).strength(0.07))
fg.d3Force("y", forceY().y((node: any) => getClusterY(node.category)).strength(0.07))
// 3. Starke Abstoßung (Charge) für ein weit gefächertes, luftiges Netz
const charge = fg.d3Force("charge")
if (charge) charge.strength(-380)
// 4. Konstanter, stabiler Kollisionsradius (verhindert Reheat-Zucken bei Mausbewegung)
// 4. Konstanter, stabiler Kollisionsradius
fg.d3Force("collide", forceCollide().radius(28).iterations(2))
// 5. Federkraft (Links)
const link = fg.d3Force("link")
if (link) link.distance(85)
// Simulation einmalig heiss starten für die neuen Daten
// Simulation einmalig heiss starten für die neue Struktur
fg.d3ReheatSimulation()
}, [graphData])
}, [structureKey])
const activeNode = hovered || selectedNodeId
@@ -129,24 +159,139 @@ export function GraphView({ data, selectedNodeId, onNodeSelect }: {
if (!fgRef.current) return
fgRef.current.zoomToFit(400, 40)
}
// Nachbarmenge für extrem schnellen Lookup – fängt D3-Objektmutationen robust ab
// Nachbarmenge für extrem schnellen Lookup
const connectedNodes = useMemo(() => {
if (!activeNode) return new Set<string>()
const set = new Set<string>()
data.edges.forEach((e) => {
const sId = typeof e.source === "object" ? (e.source as any).id : e.source
const tId = typeof e.target === "object" ? (e.target as any).id : e.target
if (sId === activeNode) set.add(tId)
if (tId === activeNode) set.add(sId)
if (e.source === activeNode) set.add(e.target)
if (e.target === activeNode) set.add(e.source)
})
return set
}, [activeNode, data])
// Stabile Accessor-Identitäten: nur neu, wenn sich der aktive Knoten ändert.
// Nutzt die vorberechneten __sid/__tid/__restColor — KEIN nodes.find() pro Frame mehr.
const linkColor = useCallback((link: any) => {
if (activeNode) {
return (link.__sid === activeNode || link.__tid === activeNode) ? EDGE_HI : DIM_EDGE
}
return link.__restColor
}, [activeNode])
const linkWidth = useCallback((link: any) => {
return (activeNode && (link.__sid === activeNode || link.__tid === activeNode)) ? 2.5 : 1.4
}, [activeNode])
const linkParticles = useCallback((link: any) => {
return (activeNode && (link.__sid === activeNode || link.__tid === activeNode)) ? 4 : 0
}, [activeNode])
const handleNodeHover = useCallback((node: any) => {
setHovered(node ? node.id : null)
if (containerRef.current) {
containerRef.current.style.cursor = node ? "pointer" : "default"
}
}, [])
// Hit-Map: Trefferfläche wird mit dem Zoom NICHT beliebig klein — mindestens ~14
// Bildschirm-Pixel Radius, sonst sind Knoten rausgezoomt unmöglich zu treffen.
const nodePointerAreaPaint = useCallback((node: any, color: string, ctx: CanvasRenderingContext2D, globalScale: number) => {
const size = 6 + Math.min(degree[node.id] || 0, 15) * 0.8
const r = Math.max(size + 5, 14 / Math.max(globalScale || 1, 0.01))
ctx.fillStyle = color
ctx.beginPath()
ctx.arc(node.x ?? 0, node.y ?? 0, r, 0, 2 * Math.PI, false)
ctx.fill()
}, [degree])
const nodeCanvasObject = useCallback((node: any, ctx: CanvasRenderingContext2D, globalScale: number) => {
const x = node.x ?? 0
const y = node.y ?? 0
const size = 6 + Math.min(degree[node.id] || 0, 15) * 0.8
const color = CAT_COLOR[node.category] || "#64748b"
const isHovered = node.id === hovered
const isSelected = node.id === selectedNodeId
const isDimmed = activeNode && node.id !== activeNode && !connectedNodes.has(node.id)
const finalColor = isDimmed ? "#1e293b" : color
// 1. Billiger Glow: transparenter Halo-Kreis statt ctx.shadowBlur (das kostet bei
// hunderten Knoten pro Frame die gesamte Framerate). Echter Blur nur für den
// EINEN aktiven Knoten.
if (!isDimmed) {
ctx.beginPath()
ctx.arc(x, y, size * 1.9, 0, 2 * Math.PI, false)
ctx.fillStyle = CAT_HALO_COLOR[node.category] || "rgba(100, 116, 139, 0.14)"
ctx.fill()
}
if (isHovered || isSelected) {
ctx.shadowColor = color
ctx.shadowBlur = 15
}
ctx.beginPath()
ctx.arc(x, y, size, 0, 2 * Math.PI, false)
ctx.fillStyle = finalColor
ctx.fill()
ctx.shadowBlur = 0
if (isHovered || isSelected) {
ctx.beginPath()
ctx.arc(x, y, size + 2.5, 0, 2 * Math.PI, false)
ctx.strokeStyle = isSelected ? "#ffffff" : "rgba(255, 255, 255, 0.7)"
ctx.lineWidth = 1.5
ctx.stroke()
}
// 2. Label nur für den aktiven Fokus (Hovered, Selected & direkte Nachbarn)
const showLabel = isHovered || isSelected || (activeNode && connectedNodes.has(node.id))
if (showLabel) {
const label = node.content.length > 35 ? node.content.slice(0, 34) + "…" : node.content
// Textbreite EINMALIG auf dem Objekt cachen (ctx.measureText ist teuer)
if (node.__baseTextWidth === undefined) {
const prevFont = ctx.font
ctx.font = '500 10px "Space Grotesk", sans-serif'
node.__baseTextWidth = ctx.measureText(label).width
ctx.font = prevFont
}
const baseFontSize = isHovered || isSelected ? 10.5 : 9.5
const fontSize = baseFontSize / Math.max(0.5, globalScale)
ctx.font = `${isHovered || isSelected ? "bold" : "500"} ${fontSize}px "Space Grotesk", sans-serif`
// Breite linear zur geänderten FontSize skalieren — kein measureText pro Frame
const textWidth = node.__baseTextWidth * (fontSize / 10)
const bpad = 4.5 / Math.max(0.5, globalScale)
const rx = x - textWidth / 2 - bpad
const ry = y + size + (6 / Math.max(0.5, globalScale))
const rw = textWidth + bpad * 2
const rh = fontSize + bpad * 1.6
ctx.fillStyle = isDimmed ? "rgba(10, 15, 25, 0.45)" : "rgba(8, 12, 20, 0.88)"
ctx.fillRect(rx, ry, rw, rh)
ctx.strokeStyle = isHovered || isSelected ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.08)"
ctx.lineWidth = 0.6 / Math.max(0.5, globalScale)
ctx.strokeRect(rx, ry, rw, rh)
ctx.textAlign = "center"
ctx.textBaseline = "top"
ctx.fillStyle = isDimmed ? "#475569" : (isHovered || isSelected ? "#ffffff" : "#cbd5e1")
ctx.fillText(label, x, y + size + (7 / Math.max(0.5, globalScale)))
}
}, [degree, hovered, selectedNodeId, activeNode, connectedNodes])
return (
<div className="absolute inset-0" ref={containerRef}
style={{ background: "radial-gradient(circle at center, rgba(59, 130, 246, 0.08) 0%, #030712 100%)" }}>
<ForceGraph2D
ref={fgRef}
width={dimensions.width}
@@ -154,130 +299,16 @@ export function GraphView({ data, selectedNodeId, onNodeSelect }: {
graphData={graphData}
backgroundColor="rgba(0,0,0,0)"
cooldownTicks={120}
// Exakte Hit-Map auf unsichtbarem Canvas proportional zur visuellen Knotengröße zeichnen (inkl. 5px Puffer)
nodePointerAreaPaint={(node: any, color: string, ctx: CanvasRenderingContext2D) => {
ctx.fillStyle = color
ctx.beginPath()
const nId = typeof node === "object" ? node.id : node
const size = 6 + Math.min(degree[nId] || 0, 15) * 0.8
ctx.arc(node.x ?? 0, node.y ?? 0, size + 5, 0, 2 * Math.PI, false)
ctx.fill()
}}
// Hover- und Klick-Logik
nodePointerAreaPaint={nodePointerAreaPaint}
onNodeClick={(node: any) => onNodeSelect(node.id)}
onBackgroundClick={() => onNodeSelect(null)}
onNodeHover={(node: any) => {
setHovered(node ? node.id : null)
if (containerRef.current) {
containerRef.current.style.cursor = node ? "pointer" : "default"
}
}}
// Kanten-Animationen & Partikelfluss
linkColor={(link: any) => {
const sId = typeof link.source === "object" ? link.source.id : link.source
const tId = typeof link.target === "object" ? link.target.id : link.target
if (activeNode === sId || activeNode === tId) return EDGE_HI
if (activeNode) return DIM_EDGE
const sourceNode = graphData.nodes.find(n => n.id === sId)
const catColor = sourceNode ? CAT_COLOR[sourceNode.category] : "#64748b"
return hexToRgba(catColor, 0.25)
}}
linkWidth={(link: any) => {
const sId = typeof link.source === "object" ? link.source.id : link.source
const tId = typeof link.target === "object" ? link.target.id : link.target
return (activeNode === sId || activeNode === tId) ? 2.5 : 1.4
}}
// Daten-Partikel fließen auf den aktiven Verbindungen
linkDirectionalParticles={(link: any) => {
const sId = typeof link.source === "object" ? link.source.id : link.source
const tId = typeof link.target === "object" ? link.target.id : link.target
return (activeNode === sId || activeNode === tId) ? 4 : 0
}}
onNodeHover={handleNodeHover}
linkColor={linkColor}
linkWidth={linkWidth}
linkDirectionalParticles={linkParticles}
linkDirectionalParticleWidth={2.2}
linkDirectionalParticleSpeed={0.006}
// Custom Canvas Rendering für glühende Knoten und 100% lesbare Text-Pillen
nodeCanvasObject={(node: any, ctx: CanvasRenderingContext2D, globalScale: number) => {
const x = node.x ?? 0
const y = node.y ?? 0
const size = 6 + Math.min(degree[node.id] || 0, 15) * 0.8
const color = CAT_COLOR[node.category] || "#64748b"
const isHovered = node.id === hovered
const isSelected = node.id === selectedNodeId
const isDimmed = activeNode && node.id !== activeNode && !connectedNodes.has(node.id)
const finalColor = isDimmed ? "#1e293b" : color
// 1. Zeichne den farbigen Knotenpunkt (Kreis)
if (!isDimmed) {
ctx.shadowColor = color
ctx.shadowBlur = isHovered || isSelected ? 15 : 6
}
ctx.beginPath()
ctx.arc(x, y, size, 0, 2 * Math.PI, false)
ctx.fillStyle = finalColor
ctx.fill()
ctx.shadowBlur = 0
if (isHovered || isSelected) {
ctx.beginPath()
ctx.arc(x, y, size + 2.5, 0, 2 * Math.PI, false)
ctx.strokeStyle = isSelected ? "#ffffff" : "rgba(255, 255, 255, 0.7)"
ctx.lineWidth = 1.5
ctx.stroke()
}
// 2. Zeichne das Label nur für den aktiven Fokus (Hovered, Selected & direkte Nachbarn)
// Verhindert massives Laggen bei Zoom, da niemals Hunderte Labels gleichzeitig gerastert werden!
const showLabel = isHovered || isSelected || (activeNode && connectedNodes.has(node.id))
if (showLabel) {
const label = node.content.length > 35 ? node.content.slice(0, 34) + "…" : node.content
// Textbreite EINMALIG auf dem Objekt cachen (verhindert massive Frame-Einbrüche durch ctx.measureText)
if (node.__baseTextWidth === undefined) {
const prevFont = ctx.font
ctx.font = '500 10px "Space Grotesk", sans-serif'
node.__baseTextWidth = ctx.measureText(label).width
ctx.font = prevFont
}
const baseFontSize = isHovered || isSelected ? 10.5 : 9.5
const fontSize = baseFontSize / Math.max(0.5, globalScale)
ctx.font = `${isHovered || isSelected ? "bold" : "500"} ${fontSize}px "Space Grotesk", sans-serif`
// Breite linear zur geänderten FontSize skalieren – KEIN ctx.measureText Aufruf mehr pro Frame!
const textWidth = node.__baseTextWidth * (fontSize / 10)
const bpad = 4.5 / Math.max(0.5, globalScale)
// Schnelle, hochperformante rechteckige Sci-Fi-Pille zeichnen (Faktor 10x schneller als abgerundete Pfade)
const rx = x - textWidth / 2 - bpad
const ry = y + size + (6 / Math.max(0.5, globalScale))
const rw = textWidth + bpad * 2
const rh = fontSize + bpad * 1.6
ctx.fillStyle = isDimmed ? "rgba(10, 15, 25, 0.45)" : "rgba(8, 12, 20, 0.88)"
ctx.fillRect(rx, ry, rw, rh)
ctx.strokeStyle = isHovered || isSelected ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.08)"
ctx.lineWidth = 0.6 / Math.max(0.5, globalScale)
ctx.strokeRect(rx, ry, rw, rh)
ctx.textAlign = "center"
ctx.textBaseline = "top"
ctx.fillStyle = isDimmed ? "#475569" : (isHovered || isSelected ? "#ffffff" : "#cbd5e1")
ctx.fillText(label, x, y + size + (7 / Math.max(0.5, globalScale)))
}
}}
nodeCanvasObject={nodeCanvasObject}
/>
<button onClick={relayout} title="Zentrieren"