@jazzmind/busibox-app 3.0.18

package/dist/components/documents/KnowledgeGraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KnowledgeGraph.d.ts","sourceRoot":"","sources":["../../../src/components/documents/KnowledgeGraph.tsx"],"names":[],"mappings":"AAuTA,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,iBAAiB,EAAE,EAAE,mBAAmB,2CAszBjH"}

package/dist/components/documents/KnowledgeGraph.js

@@ -0,0 +1,570 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * KnowledgeGraph - Interactive force-directed graph visualization
+ *
+ * Renders knowledge graph data from the data-api /data/graph endpoints.
+ * Uses react-force-graph-2d for Canvas-based rendering (performant with large graphs).
+ *
+ * Features:
+ * - Interactive force-directed layout with tuned forces
+ * - Node color-coding and sizing by entity type
+ * - Click to expand neighbors with camera tracking
+ * - Search and filter by entity type / library
+ * - Floating zoom/pan controls
+ * - Animated detail panel overlay on click
+ * - Dark mode support throughout
+ * - Subtle dot-grid background with depth
+ */
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import dynamic from 'next/dynamic';
+import { Search, Filter, ZoomIn, ZoomOut, Maximize2, RotateCcw, Loader2, AlertCircle, Network, X, ChevronDown, ExternalLink, Maximize, Minimize, } from 'lucide-react';
+import { useCrossAppApiPath } from '../../contexts/ApiContext';
+const ForceGraph2D = dynamic(() => import('react-force-graph-2d'), { ssr: false });
+// =============================================================================
+// Constants
+// =============================================================================
+const ENTITY_COLORS = {
+    Person: '#4f46e5',
+    Organization: '#059669',
+    Technology: '#d97706',
+    Document: '#2563eb',
+    Location: '#dc2626',
+    Event: '#7c3aed',
+    Concept: '#0891b2',
+    Product: '#ea580c',
+    DataDocument: '#6366f1',
+    Project: '#16a34a',
+    Task: '#ca8a04',
+    Keyword: '#0d9488',
+    Entity: '#6b7280',
+    Default: '#9ca3af',
+};
+const NODE_SIZES = {
+    Document: 8,
+    DataDocument: 8,
+    Person: 5,
+    Organization: 5,
+    Project: 6,
+    Technology: 3,
+    Concept: 3,
+    Location: 3,
+    Event: 3,
+    Product: 3,
+    Task: 3,
+    Keyword: 2,
+    Entity: 2,
+    Default: 2,
+};
+function getNodeColor(node) {
+    const entityType = node.entity_type ||
+        (node.labels && node.labels.find(l => l !== 'GraphNode' && l !== 'Entity')) ||
+        'Default';
+    return ENTITY_COLORS[entityType] || ENTITY_COLORS.Default;
+}
+function getEntityType(node) {
+    return node.entity_type ||
+        (node.labels && node.labels.find(l => l !== 'GraphNode' && l !== 'Entity')) ||
+        'Unknown';
+}
+function getNodeSize(node) {
+    return NODE_SIZES[getEntityType(node)] || NODE_SIZES.Default;
+}
+function DetailPanel({ node, graphData, onClose, onNodeNavigate, onDocumentClick }) {
+    const entityType = getEntityType(node);
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        requestAnimationFrame(() => setVisible(true));
+    }, []);
+    const connections = useMemo(() => {
+        return graphData.links
+            .filter(l => {
+            const sourceId = typeof l.source === 'string' ? l.source : l.source?.id;
+            const targetId = typeof l.target === 'string' ? l.target : l.target?.id;
+            return sourceId === node.id || targetId === node.id;
+        })
+            .slice(0, 20)
+            .map((link) => {
+            const sourceId = typeof link.source === 'string' ? link.source : link.source?.id;
+            const targetId = typeof link.target === 'string' ? link.target : link.target?.id;
+            const otherId = sourceId === node.id ? targetId : sourceId;
+            const otherNode = graphData.nodes.find(n => n.id === otherId);
+            const direction = sourceId === node.id ? 'out' : 'in';
+            return { link, otherId, otherNode, direction };
+        });
+    }, [graphData, node.id]);
+    const connectionsByType = useMemo(() => {
+        const grouped = new Map();
+        for (const conn of connections) {
+            const type = conn.link.label;
+            if (!grouped.has(type))
+                grouped.set(type, []);
+            grouped.get(type).push(conn);
+        }
+        return grouped;
+    }, [connections]);
+    return (_jsxs("div", { className: "absolute top-4 right-4 z-10 w-96 max-w-[calc(100%-2rem)] overflow-hidden rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700", style: {
+            opacity: visible ? 1 : 0,
+            transform: visible ? 'translateX(0)' : 'translateX(20px)',
+            transition: 'opacity 0.3s ease-out, transform 0.3s ease-out',
+        }, children: [_jsxs("div", { className: "px-5 py-4 text-white relative overflow-hidden", style: { backgroundColor: node.color || '#6b7280' }, children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-white/10 to-black/10" }), _jsx("div", { className: "relative", children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 mb-1", children: [_jsx("span", { className: "inline-block w-2.5 h-2.5 rounded-full bg-white/30" }), _jsx("span", { className: "text-xs font-medium text-white/70 uppercase tracking-wider", children: entityType })] }), _jsx("h3", { className: "text-lg font-bold leading-tight truncate", children: node.name || node.id })] }), _jsx("button", { onClick: onClose, className: "text-white/60 hover:text-white transition-colors ml-2 mt-0.5", children: _jsx(X, { className: "w-4 h-4" }) })] }) })] }), _jsxs("div", { className: "bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm max-h-[60vh] overflow-y-auto", children: [_jsxs("div", { className: "px-5 pt-4 pb-2", children: [_jsx("span", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase", children: "ID" }), _jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 font-mono break-all mt-0.5", children: node.id })] }), _jsx("div", { className: "px-5 pb-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase", children: "Connections" }), _jsxs("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: ["(", connections.length, ")"] })] }) }), _jsx("div", { className: "px-5 pb-4 space-y-3", children: Array.from(connectionsByType.entries()).map(([type, conns]) => (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 mb-1.5", children: [_jsx("span", { className: "text-[10px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider", children: type.replace(/_/g, ' ') }), _jsx("div", { className: "flex-1 h-px bg-gray-100 dark:bg-gray-700" }), _jsx("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: conns.length })] }), _jsx("div", { className: "space-y-0.5", children: conns.map((conn, i) => (_jsxs("div", { className: "flex items-center gap-2 py-1 px-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors", children: [_jsx("span", { className: "text-gray-400 dark:text-gray-500 text-xs flex-shrink-0", children: conn.direction === 'out' ? '→' : '←' }), conn.otherNode ? (_jsx("button", { onClick: () => onNodeNavigate(conn.otherNode), className: "text-sm text-blue-600 dark:text-blue-400 hover:underline truncate text-left", children: conn.otherNode.name || conn.otherId })) : (_jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400 truncate", children: conn.otherId })), conn.otherNode && (_jsx("span", { className: "flex-shrink-0 inline-block w-2 h-2 rounded-full ml-auto", style: { backgroundColor: conn.otherNode.color || ENTITY_COLORS.Default } }))] }, i))) })] }, type))) }), (entityType === 'Document' || entityType === 'DataDocument') && onDocumentClick && (_jsx("div", { className: "px-5 pt-2 pb-4 border-t border-gray-100 dark:border-gray-700", children: _jsxs("button", { onClick: () => onDocumentClick(node.id), className: "w-full px-3 py-2.5 bg-gray-900 dark:bg-white text-white dark:text-gray-900 text-sm font-medium rounded-lg hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors inline-flex items-center justify-center gap-2", children: [_jsx(ExternalLink, { className: "w-3.5 h-3.5" }), "View Document"] }) }))] })] }));
+}
+export function KnowledgeGraph({ documentId, onDocumentClick, libraryIds: initialLibraryIds }) {
+    const [graphData, setGraphData] = useState({ nodes: [], links: [] });
+    const [stats, setStats] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [selectedNode, setSelectedNode] = useState(null);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [filterType, setFilterType] = useState('all');
+    const [showFilterMenu, setShowFilterMenu] = useState(false);
+    const [showLibraryMenu, setShowLibraryMenu] = useState(false);
+    const [libraries, setLibraries] = useState([]);
+    const [selectedLibraryIds, setSelectedLibraryIds] = useState(new Set(initialLibraryIds || []));
+    const [expandedNodes, setExpandedNodes] = useState(new Set());
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const graphRef = useRef(null);
+    const containerRef = useRef(null);
+    const hasAutoFitRef = useRef(false);
+    const hasTunedRef = useRef(false);
+    const resolve = useCrossAppApiPath();
+    // Escape key exits fullscreen
+    useEffect(() => {
+        if (!isFullscreen)
+            return;
+        const onKeyDown = (e) => {
+            if (e.key === 'Escape')
+                setIsFullscreen(false);
+        };
+        window.addEventListener('keydown', onKeyDown);
+        return () => window.removeEventListener('keydown', onKeyDown);
+    }, [isFullscreen]);
+    // ==========================================================================
+    // Data Fetching
+    // ==========================================================================
+    const fetchGraphData = useCallback(async (center) => {
+        try {
+            setLoading(true);
+            setError(null);
+            const params = new URLSearchParams();
+            if (center)
+                params.set('center', center);
+            if (filterType !== 'all')
+                params.set('label', filterType);
+            if (selectedLibraryIds.size > 0) {
+                params.set('library_ids', Array.from(selectedLibraryIds).join(','));
+            }
+            params.set('depth', '2');
+            params.set('limit', '200');
+            const endpoint = documentId
+                ? resolve('graph', `/api/graph/document/${encodeURIComponent(documentId)}?${params.toString()}`)
+                : resolve('graph', `/api/graph?${params.toString()}`);
+            const response = await fetch(endpoint);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch graph data: ${response.status}`);
+            }
+            const data = await response.json();
+            if (!data.graph_available) {
+                setError('Graph database is not available. Neo4j may not be running or NEO4J_URI is not configured.');
+                setGraphData({ nodes: [], links: [] });
+                return;
+            }
+            const nodeMap = new Map();
+            for (const node of data.nodes) {
+                nodeMap.set(node.node_id, {
+                    ...node,
+                    id: node.node_id,
+                    val: getNodeSize(node),
+                    color: getNodeColor(node),
+                });
+            }
+            const links = data.edges
+                .filter(edge => nodeMap.has(edge.from) && nodeMap.has(edge.to))
+                .map(edge => ({
+                source: edge.from,
+                target: edge.to,
+                label: edge.type,
+            }));
+            setGraphData({
+                nodes: Array.from(nodeMap.values()),
+                links,
+            });
+            // Reset tuning/fit refs so they re-apply on new data
+            hasTunedRef.current = false;
+            hasAutoFitRef.current = false;
+        }
+        catch (err) {
+            console.error('[KnowledgeGraph] Fetch error:', err);
+            setError(err instanceof Error ? err.message : 'Failed to load graph');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [documentId, filterType, selectedLibraryIds, resolve]);
+    const fetchStats = useCallback(async () => {
+        try {
+            const response = await fetch(resolve('graph', '/api/graph/stats'));
+            if (response.ok) {
+                const data = await response.json();
+                setStats(data);
+            }
+        }
+        catch (err) {
+            console.error('[KnowledgeGraph] Stats fetch error:', err);
+        }
+    }, [resolve]);
+    useEffect(() => {
+        fetchGraphData();
+        fetchStats();
+    }, [fetchGraphData, fetchStats]);
+    useEffect(() => {
+        async function fetchLibraries() {
+            try {
+                const response = await fetch(resolve('libraries', '/api/libraries'));
+                if (!response.ok)
+                    return;
+                const result = await response.json();
+                const libs = result?.data?.libraries || result?.libraries || [];
+                setLibraries(libs.map((lib) => ({
+                    id: lib.id,
+                    name: lib.name,
+                    isPersonal: lib.isPersonal,
+                })));
+            }
+            catch {
+                // Silently fail
+            }
+        }
+        fetchLibraries();
+    }, [resolve]);
+    // ==========================================================================
+    // Node Expansion
+    // ==========================================================================
+    const expandNode = useCallback(async (nodeId) => {
+        if (expandedNodes.has(nodeId))
+            return;
+        try {
+            const response = await fetch(resolve('graph', `/api/graph/entity/${encodeURIComponent(nodeId)}?depth=1&limit=20`));
+            if (!response.ok)
+                return;
+            const data = await response.json();
+            const neighbors = data.neighbors || [];
+            const relationships = data.relationships || [];
+            if (neighbors.length === 0)
+                return;
+            setGraphData(prev => {
+                const existingIds = new Set(prev.nodes.map(n => n.id));
+                const newNodes = [];
+                for (const neighbor of neighbors) {
+                    if (!existingIds.has(neighbor.node_id)) {
+                        newNodes.push({
+                            ...neighbor,
+                            id: neighbor.node_id,
+                            val: getNodeSize(neighbor),
+                            color: getNodeColor(neighbor),
+                        });
+                    }
+                }
+                const newLinks = [];
+                for (const rel of relationships) {
+                    const from = rel.from || rel.source;
+                    const to = rel.to || rel.target;
+                    if (from && to) {
+                        newLinks.push({
+                            source: from,
+                            target: to,
+                            label: rel.type || 'RELATED_TO',
+                        });
+                    }
+                }
+                return {
+                    nodes: [...prev.nodes, ...newNodes],
+                    links: [...prev.links, ...newLinks],
+                };
+            });
+            setExpandedNodes(prev => new Set([...prev, nodeId]));
+        }
+        catch (err) {
+            console.error('[KnowledgeGraph] Expand error:', err);
+        }
+    }, [expandedNodes, resolve]);
+    // ==========================================================================
+    // Event Handlers
+    // ==========================================================================
+    const handleNodeClick = useCallback((node) => {
+        setSelectedNode(node);
+        expandNode(node.id);
+        // Pan camera to center node, offset right for the detail panel overlay
+        const graph = graphRef.current;
+        if (graph && typeof node.x === 'number' && typeof node.y === 'number') {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const g = graph;
+            const currentZoom = typeof g.zoom === 'function' ? g.zoom() : 1;
+            const canvasW = containerRef.current?.clientWidth || window.innerWidth;
+            const panelScreenPx = Math.min(420, canvasW * 0.4);
+            const worldOffsetX = (panelScreenPx / 2) / currentZoom;
+            g.centerAt?.(node.x + worldOffsetX, node.y, 600);
+        }
+    }, [expandNode]);
+    const handleZoomIn = useCallback(() => {
+        if (graphRef.current) {
+            graphRef.current.zoom(graphRef.current.zoom() * 1.5, 300);
+        }
+    }, []);
+    const handleZoomOut = useCallback(() => {
+        if (graphRef.current) {
+            graphRef.current.zoom(graphRef.current.zoom() / 1.5, 300);
+        }
+    }, []);
+    const handleFitToView = useCallback(() => {
+        if (graphRef.current) {
+            graphRef.current.zoomToFit(400, 60);
+        }
+    }, []);
+    const handleReset = useCallback(() => {
+        setExpandedNodes(new Set());
+        setSelectedNode(null);
+        setSearchQuery('');
+        setFilterType('all');
+        setSelectedLibraryIds(new Set(initialLibraryIds || []));
+        hasAutoFitRef.current = false;
+        hasTunedRef.current = false;
+        fetchGraphData();
+    }, [fetchGraphData, initialLibraryIds]);
+    // ==========================================================================
+    // Search & Filter
+    // ==========================================================================
+    const filteredData = useMemo(() => {
+        if (!searchQuery)
+            return graphData;
+        const query = searchQuery.toLowerCase();
+        const matchingNodeIds = new Set(graphData.nodes
+            .filter(n => (n.name || '').toLowerCase().includes(query))
+            .map(n => n.id));
+        return {
+            nodes: graphData.nodes.filter(n => matchingNodeIds.has(n.id)),
+            links: graphData.links.filter(l => {
+                const sourceId = typeof l.source === 'string' ? l.source : l.source?.id;
+                const targetId = typeof l.target === 'string' ? l.target : l.target?.id;
+                return matchingNodeIds.has(sourceId) && matchingNodeIds.has(targetId);
+            }),
+        };
+    }, [graphData, searchQuery]);
+    const entityTypes = useMemo(() => {
+        const types = new Set();
+        graphData.nodes.forEach(n => {
+            const type = getEntityType(n);
+            if (type !== 'Unknown')
+                types.add(type);
+        });
+        return Array.from(types).sort();
+    }, [graphData.nodes]);
+    // ==========================================================================
+    // Canvas Rendering
+    // ==========================================================================
+    const nodeCanvasObject = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (node, ctx, globalScale) => {
+        const label = node.name || node.id || '';
+        const fontSize = Math.max(10 / globalScale, 2);
+        const baseRadius = Math.max(5 * Math.sqrt(node.val || 1), 3);
+        const nodeColor = node.color || '#9ca3af';
+        const isDark = typeof window !== 'undefined' && document.documentElement.classList.contains('dark');
+        // Outer glow for larger nodes
+        if (node.val >= 5) {
+            ctx.beginPath();
+            ctx.arc(node.x, node.y, baseRadius + 4 / globalScale, 0, 2 * Math.PI);
+            ctx.fillStyle = `${nodeColor}18`;
+            ctx.fill();
+        }
+        // Node circle
+        ctx.beginPath();
+        ctx.arc(node.x, node.y, baseRadius, 0, 2 * Math.PI);
+        ctx.fillStyle = nodeColor;
+        ctx.fill();
+        // Inner highlight (gives 3D depth)
+        ctx.beginPath();
+        ctx.arc(node.x - baseRadius * 0.2, node.y - baseRadius * 0.2, baseRadius * 0.5, 0, 2 * Math.PI);
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.25)';
+        ctx.fill();
+        // Selection ring
+        if (selectedNode && node.id === selectedNode.id) {
+            ctx.beginPath();
+            ctx.arc(node.x, node.y, baseRadius + 2 / globalScale, 0, 2 * Math.PI);
+            ctx.strokeStyle = isDark ? '#e5e7eb' : '#ffffff';
+            ctx.lineWidth = 3 / globalScale;
+            ctx.stroke();
+            ctx.strokeStyle = nodeColor;
+            ctx.lineWidth = 1.5 / globalScale;
+            ctx.stroke();
+        }
+        // Label
+        if (globalScale > 0.5) {
+            const maxChars = globalScale > 2 ? 30 : globalScale > 1 ? 20 : 12;
+            const displayLabel = label.length > maxChars ? label.substring(0, maxChars) + '...' : label;
+            const isLargeNode = node.val >= 5;
+            ctx.font = `${isLargeNode ? 'bold ' : ''}${fontSize}px sans-serif`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'top';
+            const textWidth = ctx.measureText(displayLabel).width;
+            const bgPadX = 3;
+            const bgPadY = 1.5;
+            ctx.fillStyle = isDark ? 'rgba(31, 41, 55, 0.9)' : 'rgba(255, 255, 255, 0.92)';
+            ctx.fillRect(node.x - textWidth / 2 - bgPadX, node.y + baseRadius + 2, textWidth + bgPadX * 2, fontSize + bgPadY * 2);
+            ctx.fillStyle = isDark ? '#e5e7eb' : '#374151';
+            ctx.fillText(displayLabel, node.x, node.y + baseRadius + 2 + bgPadY);
+        }
+    }, [selectedNode]);
+    // ==========================================================================
+    // Container Dimensions (ResizeObserver + double-rAF)
+    // ==========================================================================
+    const [dimensions, setDimensions] = useState(() => {
+        if (typeof window !== 'undefined') {
+            return {
+                width: Math.floor(window.innerWidth * 0.95) || 900,
+                height: Math.max(Math.floor(window.innerHeight * 0.7), 600),
+            };
+        }
+        return { width: 900, height: 600 };
+    });
+    useEffect(() => {
+        const measure = () => {
+            const el = containerRef.current;
+            if (!el)
+                return;
+            const w = el.clientWidth || 900;
+            const h = el.clientHeight || 600;
+            setDimensions(prev => {
+                if (prev.width === w && prev.height === h)
+                    return prev;
+                return { width: w, height: h };
+            });
+        };
+        const raf = requestAnimationFrame(() => requestAnimationFrame(measure));
+        window.addEventListener('resize', measure);
+        let ro;
+        if (typeof ResizeObserver !== 'undefined' && containerRef.current) {
+            ro = new ResizeObserver(measure);
+            ro.observe(containerRef.current);
+        }
+        return () => {
+            cancelAnimationFrame(raf);
+            window.removeEventListener('resize', measure);
+            ro?.disconnect();
+        };
+    }, []);
+    // ==========================================================================
+    // Force Simulation Tuning (applied once per data load)
+    // ==========================================================================
+    useEffect(() => {
+        if (!graphRef.current || filteredData.nodes.length === 0)
+            return;
+        if (hasTunedRef.current)
+            return;
+        hasTunedRef.current = true;
+        const tuneForces = async () => {
+            const graph = graphRef.current;
+            if (!graph)
+                return;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const linkForce = graph.d3Force('link');
+            if (linkForce && typeof linkForce.distance === 'function') {
+                linkForce.distance((link) => {
+                    if (link.label === 'MENTIONED_IN')
+                        return 100;
+                    if (link.label === 'RELATED_TO')
+                        return 85;
+                    if (link.label === 'HAS_KEYWORD')
+                        return 60;
+                    return 80;
+                });
+            }
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const chargeForce = graph.d3Force('charge');
+            if (chargeForce && typeof chargeForce.strength === 'function') {
+                chargeForce.strength(-110);
+            }
+            try {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const d3 = await (Function('return import("d3-force")')());
+                if (d3?.forceCollide) {
+                    graph.d3Force('collision', d3.forceCollide((node) => {
+                        const size = node.val || 2;
+                        return Math.max(5 * Math.sqrt(size), 3) + 8;
+                    }));
+                }
+            }
+            catch {
+                // d3-force not available — skip collision force
+            }
+            graph.d3ReheatSimulation();
+        };
+        void tuneForces();
+    }, [filteredData.nodes.length, filteredData.links.length]);
+    // ==========================================================================
+    // Render
+    // ==========================================================================
+    if (loading && graphData.nodes.length === 0) {
+        return (_jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-12 text-center", children: [_jsx(Loader2, { className: "w-10 h-10 text-blue-500 mx-auto mb-4 animate-spin" }), _jsx("p", { className: "text-gray-600 dark:text-gray-300", children: "Loading knowledge graph..." })] }));
+    }
+    if (error) {
+        return (_jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-12 text-center", children: [_jsx(AlertCircle, { className: "w-10 h-10 text-amber-500 mx-auto mb-4" }), _jsx("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100 mb-2", children: "Graph Unavailable" }), _jsx("p", { className: "text-gray-600 dark:text-gray-400 max-w-md mx-auto mb-4", children: error }), _jsxs("button", { onClick: handleReset, className: "inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700", children: [_jsx(RotateCcw, { className: "w-4 h-4 mr-2" }), "Retry"] })] }));
+    }
+    if (graphData.nodes.length === 0) {
+        return (_jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-12 text-center", children: [_jsx(Network, { className: "w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4" }), _jsx("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100 mb-2", children: "No Graph Data Yet" }), _jsx("p", { className: "text-gray-600 dark:text-gray-400 max-w-md mx-auto", children: "Entities and relationships are extracted during document processing. Ensure entity extraction is enabled in Admin \u2192 Ingestion Settings, then reprocess documents using \"Re-extract Keywords & Entities\" from the document menu." })] }));
+    }
+    return (_jsxs("div", { className: isFullscreen
+            ? 'fixed inset-0 z-50 flex flex-col bg-gray-50 dark:bg-gray-900'
+            : 'space-y-3', children: [stats && stats.available && (_jsx("div", { className: `bg-white dark:bg-gray-800 ${isFullscreen ? 'border-b' : 'rounded-lg shadow-sm border'} border-gray-200 dark:border-gray-700 px-4 py-3`, children: _jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Network, { className: "w-4 h-4 text-blue-500" }), _jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Nodes:" }), _jsx("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: stats.total_nodes.toLocaleString() })] }), _jsx("div", { className: "text-gray-300 dark:text-gray-600", children: "|" }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Relationships:" }), _jsx("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: stats.total_relationships.toLocaleString() })] }), !isFullscreen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-gray-300 dark:text-gray-600", children: "|" }), _jsx("div", { className: "flex items-center gap-2 flex-wrap", children: Object.entries(stats.labels).slice(0, 8).map(([label, count]) => (_jsxs("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium", style: {
+                                            backgroundColor: `${ENTITY_COLORS[label] || ENTITY_COLORS.Default}20`,
+                                            color: ENTITY_COLORS[label] || ENTITY_COLORS.Default,
+                                        }, children: [label, ": ", count] }, label))) })] }))] }) })), _jsx("div", { className: `bg-white dark:bg-gray-800 ${isFullscreen ? 'border-b' : 'rounded-lg shadow-sm border'} border-gray-200 dark:border-gray-700 px-4 py-3`, children: _jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-3", children: [_jsxs("div", { className: "relative flex-1 min-w-0", children: [_jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" }), _jsx("input", { type: "text", value: searchQuery, onChange: e => setSearchQuery(e.target.value), placeholder: "Search entities...", className: "w-full pl-9 pr-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" }), searchQuery && (_jsx("button", { onClick: () => setSearchQuery(''), className: "absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600", children: _jsx(X, { className: "w-4 h-4" }) }))] }), libraries.length > 0 && !documentId && (_jsxs("div", { className: "relative", children: [_jsxs("button", { onClick: () => setShowLibraryMenu(!showLibraryMenu), className: "inline-flex items-center px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700", children: [_jsx(Network, { className: "w-4 h-4 mr-1.5" }), selectedLibraryIds.size === 0
+                                            ? 'All Libraries'
+                                            : `${selectedLibraryIds.size} library${selectedLibraryIds.size === 1 ? '' : 'ies'}`, _jsx(ChevronDown, { className: "w-3 h-3 ml-1.5" })] }), showLibraryMenu && (_jsxs("div", { className: "absolute left-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-20 max-h-64 overflow-y-auto", children: [_jsx("div", { className: "p-2 border-b border-gray-200 dark:border-gray-700", children: _jsx("span", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: "Filter by library" }) }), libraries.map(lib => (_jsxs("label", { className: "flex items-center gap-2 px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer text-sm text-gray-700 dark:text-gray-300", children: [_jsx("input", { type: "checkbox", checked: selectedLibraryIds.has(lib.id), onChange: e => {
+                                                        setSelectedLibraryIds(prev => {
+                                                            const next = new Set(prev);
+                                                            if (e.target.checked)
+                                                                next.add(lib.id);
+                                                            else
+                                                                next.delete(lib.id);
+                                                            return next;
+                                                        });
+                                                    }, className: "rounded border-gray-300 dark:border-gray-600" }), _jsx("span", { className: "truncate", children: lib.name })] }, lib.id))), _jsx("div", { className: "p-2 border-t border-gray-200 dark:border-gray-700", children: _jsx("button", { type: "button", onClick: () => {
+                                                    setShowLibraryMenu(false);
+                                                    fetchGraphData();
+                                                }, className: "w-full px-3 py-1.5 text-sm bg-blue-600 text-white rounded hover:bg-blue-700", children: "Apply" }) })] }))] })), _jsxs("div", { className: "relative", children: [_jsxs("button", { onClick: () => setShowFilterMenu(!showFilterMenu), className: "inline-flex items-center px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700", children: [_jsx(Filter, { className: "w-4 h-4 mr-1.5" }), filterType === 'all' ? 'All Types' : filterType, _jsx(ChevronDown, { className: "w-3 h-3 ml-1.5" })] }), showFilterMenu && (_jsxs("div", { className: "absolute right-0 mt-1 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-20", children: [_jsx("button", { onClick: () => { setFilterType('all'); setShowFilterMenu(false); }, className: `block w-full text-left px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 ${filterType === 'all' ? 'font-semibold text-blue-600 dark:text-blue-400' : 'text-gray-700 dark:text-gray-300'}`, children: "All Types" }), entityTypes.map(type => (_jsxs("button", { onClick: () => { setFilterType(type); setShowFilterMenu(false); }, className: `block w-full text-left px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 ${filterType === type ? 'font-semibold text-blue-600 dark:text-blue-400' : 'text-gray-700 dark:text-gray-300'}`, children: [_jsx("span", { className: "inline-block w-2.5 h-2.5 rounded-full mr-2", style: { backgroundColor: ENTITY_COLORS[type] || ENTITY_COLORS.Default } }), type] }, type)))] }))] })] }) }), _jsxs("div", { className: isFullscreen ? 'flex-1 relative min-h-0' : 'relative', children: [_jsxs("div", { ref: containerRef, className: `w-full overflow-hidden relative ${isFullscreen
+                            ? 'h-full'
+                            : 'h-[70vh] min-h-[600px] rounded-lg shadow-sm border border-gray-200 dark:border-gray-700'}`, children: [_jsx("div", { className: "absolute inset-0 dark:hidden", style: {
+                                    backgroundColor: '#f8fafc',
+                                    backgroundImage: 'radial-gradient(circle, rgba(203,213,225,0.4) 1px, transparent 1px)',
+                                    backgroundSize: '24px 24px',
+                                } }), _jsx("div", { className: "absolute inset-0 dark:hidden", style: {
+                                    background: 'radial-gradient(ellipse at 60% 40%, rgba(59,130,246,0.04) 0%, transparent 60%)',
+                                } }), _jsx("div", { className: "absolute inset-0 hidden dark:block", style: {
+                                    backgroundColor: '#0f172a',
+                                    backgroundImage: 'radial-gradient(circle, rgba(51,65,85,0.5) 1px, transparent 1px)',
+                                    backgroundSize: '24px 24px',
+                                } }), _jsx("div", { className: "absolute inset-0 hidden dark:block", style: {
+                                    background: 'radial-gradient(ellipse at 30% 30%, rgba(99,102,241,0.06) 0%, transparent 50%), radial-gradient(ellipse at 70% 70%, rgba(139,92,246,0.05) 0%, transparent 50%)',
+                                } }), _jsx("div", { className: "absolute inset-0 z-[1]", children: _jsx(ForceGraph2D, { ref: graphRef, graphData: filteredData, nodeId: "id", nodeLabel: (node) => {
+                                        const graphNode = node;
+                                        return `${graphNode.name || graphNode.id} (${getEntityType(graphNode)})`;
+                                    }, nodeCanvasObject: nodeCanvasObject, nodePointerAreaPaint: (node, color, ctx) => {
+                                        const graphNode = node;
+                                        const r = Math.max(5 * Math.sqrt(graphNode.val || 1), 3) + 2;
+                                        ctx.beginPath();
+                                        ctx.arc(graphNode.x ?? 0, graphNode.y ?? 0, r, 0, 2 * Math.PI);
+                                        ctx.fillStyle = color;
+                                        ctx.fill();
+                                    }, linkDirectionalArrowLength: 4, linkDirectionalArrowRelPos: 1, linkColor: () => {
+                                        const isDark = typeof window !== 'undefined' && document.documentElement.classList.contains('dark');
+                                        return isDark ? '#4b5563' : '#d1d5db';
+                                    }, linkWidth: 0.8, onNodeClick: (node) => handleNodeClick(node), width: dimensions.width, height: dimensions.height, cooldownTicks: 200, d3AlphaDecay: 0.015, d3VelocityDecay: 0.3, onEngineStop: () => {
+                                        if (graphRef.current && !hasAutoFitRef.current) {
+                                            graphRef.current.zoomToFit(600, 80);
+                                            hasAutoFitRef.current = true;
+                                        }
+                                    }, backgroundColor: "transparent" }) }), _jsxs("div", { className: "absolute bottom-4 left-4 z-10 flex items-center gap-1 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-lg shadow-md border border-gray-200 dark:border-gray-700 p-1", children: [_jsx("button", { onClick: handleZoomIn, className: "p-1.5 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors", title: "Zoom In", children: _jsx(ZoomIn, { className: "w-4 h-4" }) }), _jsx("button", { onClick: handleZoomOut, className: "p-1.5 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors", title: "Zoom Out", children: _jsx(ZoomOut, { className: "w-4 h-4" }) }), _jsx("div", { className: "w-px h-5 bg-gray-200 dark:bg-gray-600" }), _jsx("button", { onClick: handleFitToView, className: "p-1.5 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors", title: "Fit to View", children: _jsx(Maximize2, { className: "w-4 h-4" }) }), _jsx("button", { onClick: handleReset, className: "p-1.5 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors", title: "Reset", children: _jsx(RotateCcw, { className: "w-4 h-4" }) }), _jsx("div", { className: "w-px h-5 bg-gray-200 dark:bg-gray-600" }), _jsx("button", { onClick: () => setIsFullscreen(f => !f), className: "p-1.5 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors", title: isFullscreen ? 'Exit Fullscreen' : 'Fullscreen', children: isFullscreen ? _jsx(Minimize, { className: "w-4 h-4" }) : _jsx(Maximize, { className: "w-4 h-4" }) })] }), _jsxs("div", { className: "absolute top-4 left-4 z-10 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 px-3 py-1.5 text-xs text-gray-600 dark:text-gray-400", children: [_jsx("span", { className: "font-medium text-gray-900 dark:text-gray-100", children: filteredData.nodes.length }), " nodes \u00B7 ", _jsx("span", { className: "font-medium text-gray-900 dark:text-gray-100", children: filteredData.links.length }), " edges"] })] }), selectedNode && (_jsx(DetailPanel, { node: selectedNode, graphData: graphData, onClose: () => setSelectedNode(null), onNodeNavigate: handleNodeClick, onDocumentClick: onDocumentClick }, selectedNode.id))] }), !isFullscreen && (_jsx("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 px-4 py-3", children: _jsxs("div", { className: "flex flex-wrap items-center gap-3 text-xs text-gray-600 dark:text-gray-400", children: [_jsx("span", { className: "font-medium text-gray-700 dark:text-gray-300", children: "Legend:" }), entityTypes.map(type => (_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx("span", { className: "inline-block w-2.5 h-2.5 rounded-full", style: { backgroundColor: ENTITY_COLORS[type] || ENTITY_COLORS.Default } }), type] }, type))), _jsx("span", { className: "ml-auto text-gray-400 dark:text-gray-500", children: "Click nodes to expand \u00B7 Scroll to zoom \u00B7 Drag to pan" })] }) }))] }));
+}
+//# sourceMappingURL=KnowledgeGraph.js.map