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

2026-07-09 12:33:22 +02:00
parent 90d8a7d56d
commit 64f45ed0ff
5 changed files with 42 additions and 37 deletions
@@ -7,7 +7,7 @@
    <link rel="manifest" href="/manifest.webmanifest" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <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">
  </head>
  <body>
@@ -152,9 +152,13 @@ export function GraphView({ data, selectedNodeId, onNodeSelect }: {
        height={dimensions.height}
        graphData={graphData}
        backgroundColor="rgba(0,0,0,0)"
-        nodeRelSize={4}
        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
        onNodeClick={(node: any) => onNodeSelect(node.id)}
        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(() => {
    if (!sel || !graph) return []
    const connectedIds = new Set([
      ...graph.edges.filter((e) => e.source === sel.id).map((e) => e.target),
      ...graph.edges.filter((e) => e.target === sel.id).map((e) => e.source)
    ])
-    return items.filter((m) => connectedIds.has(m.id))
-  }, [sel, graph, items])
+    return allItems.filter((m) => connectedIds.has(m.id))
+  }, [sel, graph, allItems])

  const CAT_COLOR_MAP: Record<string, string> = {
    identity: "#00f5ff", knowledge: "#3b82f6", rules: "#d946ef", events: "#fbbf24",