@sandeepsj0000/react-graph-visualizer 1.0.0

package/dist/types.d.ts

@@ -0,0 +1,94 @@
+export interface GraphNode {
+    id: string;
+    label?: string;
+    color?: string;
+    size?: number;
+    metadata?: Record<string, unknown>;
+}
+export interface GraphEdge {
+    source: string;
+    target: string;
+    label?: string;
+    weight?: number;
+    metadata?: Record<string, unknown>;
+}
+export interface GraphData {
+    nodes: GraphNode[];
+    edges: GraphEdge[];
+    directed?: boolean;
+}
+export interface GraphVisualizerProps {
+    data: GraphData;
+    width?: number;
+    height?: number;
+    /** Called when node selection changes */
+    onSelectionChange?: (selectedIds: string[], connectedIds: string[]) => void;
+    /** Custom node color (default: #4f46e5) */
+    nodeColor?: string;
+    /** Highlight color for selected/connected nodes (default: #f59e0b) */
+    highlightColor?: string;
+    /** Color for dimmed (non-selected) nodes (default: #d1d5db) */
+    dimColor?: string;
+    /** Color for inverted selection highlight (default: #ef4444) */
+    invertColor?: string;
+    /** Node radius (default: 20) */
+    nodeRadius?: number;
+    /** Show edge labels */
+    showEdgeLabels?: boolean;
+    /** Show edge direction arrows for directed graphs */
+    showArrows?: boolean;
+    /** Custom CSS class for the container */
+    className?: string;
+}
+export type SelectionMode = "connected" | "inverted" | "paths";
+export interface PathResult {
+    /** Ordered array of node ids forming the path */
+    path: string[];
+    /** Ordered array of node labels forming the path */
+    labels: string[];
+}
+export interface NodeInfo {
+    id: string;
+    label: string;
+    metadata?: Record<string, unknown>;
+    /** Number of outgoing edges */
+    outDegree: number;
+    /** Number of incoming edges */
+    inDegree: number;
+    /** Total unique neighbors */
+    degree: number;
+    /** Nodes this node points to */
+    outgoingNeighbors: {
+        id: string;
+        label: string;
+    }[];
+    /** Nodes that point to this node */
+    incomingNeighbors: {
+        id: string;
+        label: string;
+    }[];
+    /** All unique neighbors */
+    allNeighbors: {
+        id: string;
+        label: string;
+    }[];
+}
+export interface GraphStats {
+    nodeCount: number;
+    edgeCount: number;
+    directed: boolean;
+    /** Edge density (0-1) */
+    density: number;
+    avgDegree: number;
+    maxDegree: number;
+    minDegree: number;
+    /** Number of weakly connected components */
+    connectedComponents: number;
+    /** Nodes with zero connections */
+    isolatedNodes: string[];
+}
+export interface SubgraphResult {
+    nodes: GraphNode[];
+    edges: GraphEdge[];
+    directed: boolean;
+}

package/dist/useGraphEngine.d.ts

@@ -0,0 +1,82 @@
+import { GraphData, PathResult, NodeInfo, GraphStats, SubgraphResult } from "./types";
+import { GraphEngine } from "./graphEngine";
+export interface UseGraphEngineReturn {
+    /** The underlying engine instance */
+    engine: GraphEngine;
+    /** Currently selected node ids */
+    selectedNodes: string[];
+    /** Select a single node (replaces selection) */
+    selectNode: (id: string) => void;
+    /** Toggle a node in/out of the multi-selection */
+    toggleNode: (id: string) => void;
+    /** Select multiple nodes at once */
+    selectNodes: (ids: string[]) => void;
+    /** Clear all selections */
+    clearSelection: () => void;
+    /** Nodes connected to the current selection */
+    connectedNodes: {
+        id: string;
+        label: string;
+    }[];
+    /** Nodes NOT connected to the current selection (inverted) */
+    invertedNodes: {
+        id: string;
+        label: string;
+    }[];
+    /** All paths between currently selected nodes (when 2+ selected) */
+    paths: PathResult[];
+    /** Get rich info about any node */
+    getNodeInfo: (id: string) => NodeInfo | null;
+    /** Find all paths between two nodes */
+    findAllPaths: (from: string, to: string, maxDepth?: number) => PathResult[];
+    /** Find shortest path between two nodes */
+    findShortestPath: (from: string, to: string) => PathResult | null;
+    /** Find all paths between multiple nodes */
+    findAllPathsBetweenMultiple: (ids: string[]) => PathResult[];
+    /** Check reachability */
+    areConnected: (from: string, to: string) => boolean;
+    /** Get the inverted selection for any node */
+    getInvertedSelection: (id: string) => {
+        id: string;
+        label: string;
+    }[];
+    /** Get connected nodes for any node */
+    getConnectedNodes: (id: string) => {
+        id: string;
+        label: string;
+    }[];
+    /** Extract a subgraph of specific node ids */
+    getSubgraph: (ids: string[]) => SubgraphResult;
+    /** Get a node's neighborhood subgraph */
+    getNeighborhoodSubgraph: (id: string) => SubgraphResult;
+    /** Get nodes ranked by degree */
+    getNodesByDegree: () => {
+        id: string;
+        label: string;
+        degree: number;
+    }[];
+    /** Get graph statistics */
+    getStats: () => GraphStats;
+    /** Serialize connected/inverted node list to CSV string */
+    toCSV: (nodes?: {
+        id: string;
+        label: string;
+    }[]) => string;
+    /** Serialize connected/inverted node list to JSON string */
+    toJSON: (nodes?: {
+        id: string;
+        label: string;
+    }[]) => string;
+    /** Serialize current paths to CSV string */
+    pathsToCSV: (paths?: PathResult[]) => string;
+    /** Serialize current paths to JSON string */
+    pathsToJSON: (paths?: PathResult[]) => string;
+    /** Export full graph as JSON string */
+    toGraphJSON: () => string;
+}
+/**
+ * React hook for headless graph operations.
+ * Provides all graph querying, selection state, and serialization
+ * without rendering any UI.
+ */
+export declare function useGraphEngine(data: GraphData): UseGraphEngineReturn;

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@sandeepsj0000/react-graph-visualizer",
+  "version": "1.0.0",
+  "description": "React component for interactive graph visualization with node selection, path finding, and export capabilities",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "demo": "vite demo",
+    "type-check": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-typescript": "^12.1.0",
+    "@types/d3": "^7.4.3",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.24.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0"
+  },
+  "dependencies": {
+    "d3": "^7.9.0"
+  },
+  "keywords": [
+    "react",
+    "graph",
+    "visualization",
+    "network",
+    "d3",
+    "directed-graph",
+    "path-finding",
+    "interactive"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  }
+}