shieldcortex 2.1.1 → 2.1.3

package/dashboard/src/components/debug/RelationshipGraph.tsx

@@ -1,403 +0,0 @@
-'use client';
-
-/**
- * Relationship Graph Component - Focus Mode
- *
- * Clean visualization: click a memory to see its direct connections.
- * Unselected state shows all nodes dimmed, selected shows focus view.
- */
-
-import { useEffect, useRef, useState, useMemo } from 'react';
-import { useMemoryLinks, useMemories } from '@/hooks/useMemories';
-// Memory and MemoryLink types used implicitly via hooks
-
-interface Node {
-  id: number;
-  title: string;
-  category: string;
-  salience: number;
-  x: number;
-  y: number;
-}
-
-interface Edge {
-  source: number;
-  target: number;
-  relationship: string;
-  strength: number;
-}
-
-const RELATIONSHIP_COLORS: Record<string, string> = {
-  related: '#6366f1',
-  extends: '#22c55e',
-  references: '#3b82f6',
-  contradicts: '#ef4444',
-};
-
-const CATEGORY_COLORS: Record<string, string> = {
-  architecture: '#8b5cf6',
-  pattern: '#3b82f6',
-  error: '#ef4444',
-  learning: '#22c55e',
-  preference: '#f59e0b',
-  context: '#6366f1',
-  todo: '#ec4899',
-  note: '#64748b',
-  relationship: '#14b8a6',
-  custom: '#64748b',
-};
-
-export function RelationshipGraph() {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const [selectedNodeId, setSelectedNodeId] = useState<number | null>(null);
-  const [hoveredNodeId, setHoveredNodeId] = useState<number | null>(null);
-  const [relationshipFilter, setRelationshipFilter] = useState<string | null>(null);
-
-  const { data: links = [] } = useMemoryLinks();
-  const { data: memories = [] } = useMemories({ limit: 200 });
-
-  // Build graph data with stable positions
-  const { nodes, edges, nodeMap } = useMemo(() => {
-    const linkedIds = new Set<number>();
-    for (const link of links) {
-      linkedIds.add(link.source_id);
-      linkedIds.add(link.target_id);
-    }
-
-    const linkedMemories = memories.filter((m) => linkedIds.has(m.id));
-
-    // Create stable grid layout
-    const cols = Math.ceil(Math.sqrt(linkedMemories.length));
-    const cellWidth = 100;
-    const cellHeight = 80;
-
-    const nodes: Node[] = linkedMemories.map((m, i) => ({
-      id: m.id,
-      title: m.title,
-      category: m.category,
-      salience: m.salience,
-      x: (i % cols) * cellWidth + cellWidth / 2 + 50,
-      y: Math.floor(i / cols) * cellHeight + cellHeight / 2 + 50,
-    }));
-
-    const edges: Edge[] = links.map((l) => ({
-      source: l.source_id,
-      target: l.target_id,
-      relationship: l.relationship,
-      strength: l.strength,
-    }));
-
-    const nodeMap = new Map(nodes.map((n) => [n.id, n]));
-
-    return { nodes, edges, nodeMap };
-  }, [memories, links]);
-
-  // Filter edges
-  const filteredEdges = relationshipFilter
-    ? edges.filter((e) => e.relationship === relationshipFilter)
-    : edges;
-
-  // Get connections for selected node
-  const selectedConnections = useMemo(() => {
-    if (!selectedNodeId) return { connectedIds: new Set<number>(), connectedEdges: [] };
-
-    const connectedIds = new Set<number>();
-    const connectedEdges: Edge[] = [];
-
-    for (const edge of filteredEdges) {
-      if (edge.source === selectedNodeId) {
-        connectedIds.add(edge.target);
-        connectedEdges.push(edge);
-      } else if (edge.target === selectedNodeId) {
-        connectedIds.add(edge.source);
-        connectedEdges.push(edge);
-      }
-    }
-
-    return { connectedIds, connectedEdges };
-  }, [selectedNodeId, filteredEdges]);
-
-  // Get unique relationship types
-  const relationshipTypes = [...new Set(edges.map((e) => e.relationship))];
-
-  // Get selected node details
-  const selectedNode = selectedNodeId ? nodeMap.get(selectedNodeId) : null;
-
-  // Canvas rendering
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    const rect = canvas.getBoundingClientRect();
-    canvas.width = rect.width * window.devicePixelRatio;
-    canvas.height = rect.height * window.devicePixelRatio;
-    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-
-    const width = rect.width;
-    const height = rect.height;
-
-    // Clear
-    ctx.fillStyle = '#0f172a';
-    ctx.fillRect(0, 0, width, height);
-
-    if (nodes.length === 0) return;
-
-    // Calculate layout to fit in canvas
-    const padding = 60;
-    const cols = Math.ceil(Math.sqrt(nodes.length));
-    const rows = Math.ceil(nodes.length / cols);
-    const cellWidth = (width - padding * 2) / cols;
-    const cellHeight = (height - padding * 2) / rows;
-
-    // Update positions to fit canvas
-    nodes.forEach((node, i) => {
-      node.x = (i % cols) * cellWidth + cellWidth / 2 + padding;
-      node.y = Math.floor(i / cols) * cellHeight + cellHeight / 2 + padding;
-    });
-
-    const { connectedIds, connectedEdges } = selectedConnections;
-
-    // Draw edges (only for selected node, or all dimmed if none selected)
-    if (selectedNodeId) {
-      // Draw connected edges prominently
-      ctx.lineWidth = 2;
-      for (const edge of connectedEdges) {
-        const source = nodeMap.get(edge.source);
-        const target = nodeMap.get(edge.target);
-        if (!source || !target) continue;
-
-        ctx.strokeStyle = RELATIONSHIP_COLORS[edge.relationship] || '#475569';
-        ctx.globalAlpha = 0.8;
-        ctx.beginPath();
-        ctx.moveTo(source.x, source.y);
-        ctx.lineTo(target.x, target.y);
-        ctx.stroke();
-
-        // Draw relationship label at midpoint
-        const midX = (source.x + target.x) / 2;
-        const midY = (source.y + target.y) / 2;
-        ctx.font = '10px system-ui';
-        ctx.fillStyle = RELATIONSHIP_COLORS[edge.relationship] || '#94a3b8';
-        ctx.globalAlpha = 1;
-        ctx.textAlign = 'center';
-        ctx.fillText(edge.relationship, midX, midY - 4);
-      }
-    } else {
-      // Show all edges very dimmed when nothing selected
-      ctx.lineWidth = 1;
-      ctx.globalAlpha = 0.15;
-      for (const edge of filteredEdges) {
-        const source = nodeMap.get(edge.source);
-        const target = nodeMap.get(edge.target);
-        if (!source || !target) continue;
-
-        ctx.strokeStyle = RELATIONSHIP_COLORS[edge.relationship] || '#475569';
-        ctx.beginPath();
-        ctx.moveTo(source.x, source.y);
-        ctx.lineTo(target.x, target.y);
-        ctx.stroke();
-      }
-    }
-    ctx.globalAlpha = 1;
-
-    // Draw nodes
-    for (const node of nodes) {
-      const isSelected = node.id === selectedNodeId;
-      const isConnected = connectedIds.has(node.id);
-      const isHovered = node.id === hoveredNodeId;
-      const isHighlighted = isSelected || isConnected || !selectedNodeId;
-
-      const baseRadius = 6 + node.salience * 6;
-      const radius = isSelected ? baseRadius + 4 : isHovered ? baseRadius + 2 : baseRadius;
-
-      // Determine opacity
-      const opacity = isHighlighted ? 1 : 0.2;
-
-      // Draw node
-      ctx.beginPath();
-      ctx.arc(node.x, node.y, radius, 0, Math.PI * 2);
-      ctx.fillStyle = CATEGORY_COLORS[node.category] || '#64748b';
-      ctx.globalAlpha = opacity;
-      ctx.fill();
-
-      // Selection/hover ring
-      if (isSelected || isHovered) {
-        ctx.strokeStyle = isSelected ? '#f472b6' : '#94a3b8';
-        ctx.lineWidth = isSelected ? 3 : 2;
-        ctx.globalAlpha = 1;
-        ctx.stroke();
-      }
-
-      // Draw label for highlighted nodes
-      if (isHighlighted && (isSelected || isConnected || isHovered || node.salience > 0.5)) {
-        ctx.globalAlpha = opacity;
-        const label = node.title.length > 20 ? node.title.slice(0, 20) + '...' : node.title;
-        ctx.font = isSelected ? 'bold 11px system-ui' : '10px system-ui';
-        ctx.textAlign = 'center';
-
-        // Background
-        const textWidth = ctx.measureText(label).width;
-        ctx.fillStyle = 'rgba(15, 23, 42, 0.9)';
-        ctx.fillRect(node.x - textWidth / 2 - 4, node.y + radius + 4, textWidth + 8, 16);
-
-        // Text
-        ctx.fillStyle = isSelected ? '#f472b6' : isConnected ? '#e2e8f0' : '#94a3b8';
-        ctx.fillText(label, node.x, node.y + radius + 16);
-      }
-    }
-
-    ctx.globalAlpha = 1;
-  }, [nodes, nodeMap, filteredEdges, selectedNodeId, hoveredNodeId, selectedConnections]);
-
-  // Mouse handling
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-
-    const getNodeAt = (x: number, y: number): Node | null => {
-      for (const node of nodes) {
-        const radius = 6 + node.salience * 6 + 4;
-        const dx = node.x - x;
-        const dy = node.y - y;
-        if (dx * dx + dy * dy < radius * radius) {
-          return node;
-        }
-      }
-      return null;
-    };
-
-    const handleClick = (e: MouseEvent) => {
-      const rect = canvas.getBoundingClientRect();
-      const x = e.clientX - rect.left;
-      const y = e.clientY - rect.top;
-      const node = getNodeAt(x, y);
-
-      if (node) {
-        setSelectedNodeId(node.id === selectedNodeId ? null : node.id);
-      } else {
-        setSelectedNodeId(null);
-      }
-    };
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const rect = canvas.getBoundingClientRect();
-      const x = e.clientX - rect.left;
-      const y = e.clientY - rect.top;
-      const node = getNodeAt(x, y);
-      setHoveredNodeId(node?.id || null);
-      canvas.style.cursor = node ? 'pointer' : 'default';
-    };
-
-    canvas.addEventListener('click', handleClick);
-    canvas.addEventListener('mousemove', handleMouseMove);
-
-    return () => {
-      canvas.removeEventListener('click', handleClick);
-      canvas.removeEventListener('mousemove', handleMouseMove);
-    };
-  }, [nodes, selectedNodeId]);
-
-  return (
-    <div className="h-full flex flex-col">
-      {/* Controls */}
-      <div className="p-2 border-b border-slate-700 flex items-center gap-3">
-        <span className="text-xs text-slate-400">Filter:</span>
-        <button
-          onClick={() => setRelationshipFilter(null)}
-          className={`px-2 py-0.5 text-xs rounded ${
-            relationshipFilter === null
-              ? 'bg-slate-600 text-white'
-              : 'text-slate-400 hover:text-white'
-          }`}
-        >
-          All
-        </button>
-        {relationshipTypes.map((type) => (
-          <button
-            key={type}
-            onClick={() => setRelationshipFilter(type)}
-            className={`px-2 py-0.5 text-xs rounded ${
-              relationshipFilter === type ? 'text-white' : 'text-slate-400 hover:text-white'
-            }`}
-            style={{
-              backgroundColor: relationshipFilter === type ? RELATIONSHIP_COLORS[type] : 'transparent',
-            }}
-          >
-            {type}
-          </button>
-        ))}
-
-        <div className="flex-1" />
-
-        {/* Instructions */}
-        <span className="text-xs text-slate-500">
-          {selectedNodeId ? 'Click elsewhere to deselect' : 'Click a node to focus'}
-        </span>
-
-        {/* Legend */}
-        <div className="flex items-center gap-2 text-xs border-l border-slate-700 pl-3">
-          {Object.entries(RELATIONSHIP_COLORS).map(([type, color]) => (
-            <div key={type} className="flex items-center gap-1">
-              <div className="w-3 h-0.5" style={{ backgroundColor: color }} />
-              <span className="text-slate-500">{type}</span>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Graph */}
-      <div className="flex-1 relative min-h-0">
-        <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" />
-
-        {/* Selected Node Details */}
-        {selectedNode && (
-          <div className="absolute top-3 left-3 p-3 bg-slate-800/95 border border-slate-700 rounded-lg max-w-xs">
-            <div className="flex items-center gap-2 mb-2">
-              <div
-                className="w-3 h-3 rounded-full"
-                style={{ backgroundColor: CATEGORY_COLORS[selectedNode.category] }}
-              />
-              <span className="text-white font-medium text-sm">{selectedNode.title}</span>
-            </div>
-            <div className="text-xs text-slate-400 space-y-1">
-              <div>Category: {selectedNode.category}</div>
-              <div>Salience: {(selectedNode.salience * 100).toFixed(0)}%</div>
-              <div>Connections: {selectedConnections.connectedIds.size}</div>
-            </div>
-            {selectedConnections.connectedEdges.length > 0 && (
-              <div className="mt-2 pt-2 border-t border-slate-700">
-                <div className="text-xs text-slate-500 mb-1">Connected to:</div>
-                <div className="space-y-1 max-h-24 overflow-y-auto">
-                  {selectedConnections.connectedEdges.map((edge, i) => {
-                    const otherId = edge.source === selectedNodeId ? edge.target : edge.source;
-                    const other = nodeMap.get(otherId);
-                    return (
-                      <div key={i} className="text-xs flex items-center gap-1">
-                        <span
-                          className="w-2 h-2 rounded-full shrink-0"
-                          style={{ backgroundColor: RELATIONSHIP_COLORS[edge.relationship] }}
-                        />
-                        <span className="text-slate-400">{edge.relationship}:</span>
-                        <span className="text-slate-300 truncate">{other?.title || 'Unknown'}</span>
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Empty state */}
-        {nodes.length === 0 && (
-          <div className="absolute inset-0 flex items-center justify-center text-slate-500">
-            No relationships to display
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}