@sandeepsj0000/react-graph-visualizer 1.0.0 → 1.1.0

package/dist/graphEngine.d.ts

@@ -18,6 +18,8 @@ export declare class GraphEngine {
     getNodes(): GraphNode[];
     /** Get all edges */
     getEdges(): GraphEdge[];
+    /** Search nodes by label or id (case-insensitive substring match) */
+    searchNodes(query: string): GraphNode[];
     /** Check if a node exists */
     hasNode(id: string): boolean;
     /** Check if an edge exists between source and target */

package/dist/index.cjs.js

@@ -4485,6 +4485,17 @@ class GraphEngine {
     getEdges() {
         return [...this.edges];
     }
+    /** Search nodes by label or id (case-insensitive substring match) */
+    searchNodes(query) {
+        if (!query.trim())
+            return [];
+        const q = query.toLowerCase();
+        return this.nodes.filter((n) => {
+            var _a;
+            return ((_a = n.label) !== null && _a !== void 0 ? _a : n.id).toLowerCase().includes(q) ||
+                n.id.toLowerCase().includes(q);
+        });
+    }
     /** Check if a node exists */
     hasNode(id) {
         return this.adjacency.has(id);
@@ -4896,6 +4907,9 @@ const GraphVisualizer = ({ data, width = 900, height = 600, onSelectionChange, n
     const [invertedNodes, setInvertedNodes] = react.useState([]);
     const [paths, setPaths] = react.useState([]);
     const [hoveredNode, setHoveredNode] = react.useState(null);
+    const [searchQuery, setSearchQuery] = react.useState("");
+    const [searchFocused, setSearchFocused] = react.useState(false);
+    const searchRef = react.useRef(null);
     const engine = react.useMemo(() => new GraphEngine(data), [data]);
     const directed = (_a = data.directed) !== null && _a !== void 0 ? _a : false;
     // Build simulation data
@@ -5265,6 +5279,34 @@ const GraphVisualizer = ({ data, width = 900, height = 600, onSelectionChange, n
         }
         return [];
     }, [selectedArray, mode, connectedNodes, invertedNodes, engine]);
+    const searchResults = react.useMemo(() => {
+        if (!searchQuery.trim())
+            return [];
+        const q = searchQuery.toLowerCase();
+        return data.nodes.filter((n) => {
+            var _a;
+            return ((_a = n.label) !== null && _a !== void 0 ? _a : n.id).toLowerCase().includes(q) ||
+                n.id.toLowerCase().includes(q);
+        });
+    }, [searchQuery, data.nodes]);
+    const handleSearchSelect = react.useCallback((nodeId, event) => {
+        var _a;
+        if (event.ctrlKey || event.metaKey) {
+            setSelectedNodes((prev) => {
+                const next = new Set(prev);
+                if (next.has(nodeId))
+                    next.delete(nodeId);
+                else
+                    next.add(nodeId);
+                return next;
+            });
+        }
+        else {
+            setSelectedNodes(new Set([nodeId]));
+        }
+        setSearchQuery("");
+        (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    }, []);
     const handleExportCSV = () => {
         if (mode === "paths" && paths.length > 0) {
             exportPathsAsCSV(paths);
@@ -5306,7 +5348,42 @@ const GraphVisualizer = ({ data, width = 900, height = 600, onSelectionChange, n
                     flexDirection: "column",
                     gap: 12,
                     fontSize: 13,
-                }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [jsxRuntime.jsx("label", { style: { fontWeight: 600, fontSize: 12, color: "#475569" }, children: "Selection Mode" }), jsxRuntime.jsx("div", { style: { display: "flex", gap: 4 }, children: [
+                }, children: [jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [jsxRuntime.jsx("label", { style: { fontWeight: 600, fontSize: 12, color: "#475569", display: "block", marginBottom: 4 }, children: "Search Nodes" }), jsxRuntime.jsx("input", { ref: searchRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onFocus: () => setSearchFocused(true), onBlur: () => setTimeout(() => setSearchFocused(false), 150), placeholder: "Type to search...", style: {
+                                    width: "100%",
+                                    padding: "7px 10px",
+                                    border: "1px solid #d1d5db",
+                                    borderRadius: 6,
+                                    fontSize: 12,
+                                    outline: "none",
+                                    boxSizing: "border-box",
+                                    transition: "border-color 0.15s",
+                                    borderColor: searchFocused ? "#4f46e5" : "#d1d5db",
+                                } }), searchFocused && searchQuery.trim() && (jsxRuntime.jsx("div", { style: {
+                                    position: "absolute",
+                                    top: "100%",
+                                    left: 0,
+                                    right: 0,
+                                    marginTop: 4,
+                                    background: "#fff",
+                                    border: "1px solid #e2e8f0",
+                                    borderRadius: 6,
+                                    boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
+                                    maxHeight: 200,
+                                    overflow: "auto",
+                                    zIndex: 10,
+                                }, children: searchResults.length === 0 ? (jsxRuntime.jsx("div", { style: { padding: "8px 10px", color: "#94a3b8", fontSize: 12 }, children: "No nodes found" })) : (searchResults.map((n, i) => {
+                                    var _a;
+                                    return (jsxRuntime.jsxs("div", { onMouseDown: (e) => handleSearchSelect(n.id, e), style: {
+                                            padding: "6px 10px",
+                                            cursor: "pointer",
+                                            display: "flex",
+                                            justifyContent: "space-between",
+                                            alignItems: "center",
+                                            borderBottom: i < searchResults.length - 1 ? "1px solid #f1f5f9" : "none",
+                                            background: selectedNodes.has(n.id) ? "#f0f0ff" : "#fff",
+                                            fontSize: 12,
+                                        }, onMouseEnter: (e) => (e.currentTarget.style.background = selectedNodes.has(n.id) ? "#e8e8ff" : "#f8fafc"), onMouseLeave: (e) => (e.currentTarget.style.background = selectedNodes.has(n.id) ? "#f0f0ff" : "#fff"), children: [jsxRuntime.jsx("span", { style: { fontWeight: 500 }, children: (_a = n.label) !== null && _a !== void 0 ? _a : n.id }), jsxRuntime.jsx("span", { style: { color: "#94a3b8", fontSize: 11 }, children: n.id })] }, n.id));
+                                })) }))] }), jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [jsxRuntime.jsx("label", { style: { fontWeight: 600, fontSize: 12, color: "#475569" }, children: "Selection Mode" }), jsxRuntime.jsx("div", { style: { display: "flex", gap: 4 }, children: [
                                     ["connected", "Connected"],
                                     ["inverted", "Inverted"],
                                     ["paths", "Paths"],