Politur: Praeziserer Klickbereich (nodeVal) fuer Graphen-Knoten und Entkoppelung der Detail-Sicht von Listen-Filtern
This commit is contained in:
+2
-2
File diff suppressed because one or more lines are too long
+30
-30
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -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>
|
||||||
|
|||||||
@@ -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)}
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
Reference in New Issue
Block a user