Politur: Praeziserer Klickbereich (nodeVal) fuer Graphen-Knoten und Entkoppelung der Detail-Sicht von Listen-Filtern

This commit is contained in:
Hitonabi
2026-07-09 12:33:22 +02:00
parent 90d8a7d56d
commit 64f45ed0ff
5 changed files with 42 additions and 37 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-i5uFkghh.js"></script> <script type="module" crossorigin src="/assets/index-y2RCBnMu.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index--2fz5jZz.css"> <link rel="stylesheet" crossorigin href="/assets/index--2fz5jZz.css">
</head> </head>
<body> <body>
+5 -1
View File
@@ -152,9 +152,13 @@ export function GraphView({ data, selectedNodeId, onNodeSelect }: {
height={dimensions.height} height={dimensions.height}
graphData={graphData} graphData={graphData}
backgroundColor="rgba(0,0,0,0)" backgroundColor="rgba(0,0,0,0)"
nodeRelSize={4}
cooldownTicks={120} cooldownTicks={120}
// Hit-Detection an die gezeichnete Knotengröße anpassen
nodeVal={(node: any) => {
return 6 + Math.min(degree[node.id] || 0, 15) * 0.8
}}
// Hover- und Klick-Logik // Hover- und Klick-Logik
onNodeClick={(node: any) => onNodeSelect(node.id)} onNodeClick={(node: any) => onNodeSelect(node.id)}
onBackgroundClick={() => onNodeSelect(null)} onBackgroundClick={() => onNodeSelect(null)}
+4 -3
View File
@@ -152,15 +152,16 @@ export function MemoryView() {
} }
} }
const sel = useMemo(() => items.find((m) => m.id === selected), [items, selected]) // Suche in ALLEN Elementen, damit Klicks auf dem Graphen nicht durch lokale Filter der linken Liste blockiert werden.
const sel = useMemo(() => allItems.find((m) => m.id === selected), [allItems, selected])
const neighbors = useMemo(() => { const neighbors = useMemo(() => {
if (!sel || !graph) return [] if (!sel || !graph) return []
const connectedIds = new Set([ const connectedIds = new Set([
...graph.edges.filter((e) => e.source === sel.id).map((e) => e.target), ...graph.edges.filter((e) => e.source === sel.id).map((e) => e.target),
...graph.edges.filter((e) => e.target === sel.id).map((e) => e.source) ...graph.edges.filter((e) => e.target === sel.id).map((e) => e.source)
]) ])
return items.filter((m) => connectedIds.has(m.id)) return allItems.filter((m) => connectedIds.has(m.id))
}, [sel, graph, items]) }, [sel, graph, allItems])
const CAT_COLOR_MAP: Record<string, string> = { const CAT_COLOR_MAP: Record<string, string> = {
identity: "#00f5ff", knowledge: "#3b82f6", rules: "#d946ef", events: "#fbbf24", identity: "#00f5ff", knowledge: "#3b82f6", rules: "#d946ef", events: "#fbbf24",