Initialise Graph visualiser using reagraph

Author: A-Georgiou

package-lock.json

@@ -16,6 +16,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
+    "reagraph": "^4.19.2",
     "zustand": "^4.5.4"
   },
   "devDependencies": {

package.json

@@ -14,10 +14,10 @@ function App() {
     <HashRouter>
       <Routes>
         <Route path="/" element={<Navbar />}>
-          <Route index element={<SortingVisualiser />} />
+          <Route index element={<PathfindingVisualiser />} />
+          <Route path="/pathfinding" element={<PathfindingVisualiser />} />
           <Route path="/sorting" element={<SortingVisualiser />} />
           <Route path="/search" element={<SearchVisualiser />} />
-          <Route path="/pathfinding" element={<PathfindingVisualiser />} />
           <Route path="/graph" element={<GraphVisualiser />} />
           <Route path="*" element={<NotFoundPage />} />
         </Route>

src/App.tsx

@@ -0,0 +1,10 @@
+export default function GenerateRandomGraph(numNodes: number, setNodes: (nodes: { id: string }[]) => void) {
+    const nodeTemp = [];
+    for (let i = 0; i < numNodes; i++) {
+        nodeTemp.push({
+            id: i.toString(),
+            fill: 'slateblue',
+        });
+    }
+    setNodes(nodeTemp);
+}

src/algorithms/graphs/GenerateRandomGraph.ts

@@ -1,50 +1,22 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
+import { GraphCanvas } from 'reagraph';
+import GenerateRandomGraph from '../algorithms/graphs/GenerateRandomGraph';
+import '../styles/graph.css';
 
 const GraphVisualiser: React.FC = () => {
+    const [edges, setEdges] = useState([]);
+    const [nodes, setNodes] = useState<{ id: string }[]>([]); // Specify the type of the nodes state variable
 
-    let graph = {
-        nodes: [
-            { id: '1', label: 'Node 1' },
-            { id: '2', label: 'Node 2' },
-            { id: '3', label: 'Node 3' },
-            { id: '4', label: 'Node 4' },
-            { id: '5', label: 'Node 5' },
-            { id: '6', label: 'Node 6' },
-            { id: '7', label: 'Node 7' },
-            { id: '8', label: 'Node 8' },
-            { id: '9', label: 'Node 9' },
-            { id: '10', label: 'Node 10' }
-        ],
-        edges: [
-            { source: '1', target: '2' },
-            { source: '1', target: '3' },
-            { source: '2', target: '4' },
-            { source: '2', target: '5' },
-            { source: '3', target: '6' },
-            { source: '3', target: '7' },
-            { source: '4', target: '8' },
-            { source: '4', target: '9' },
-            { source: '5', target: '10' }
-        ]
-    }
+    useEffect(() => {
+        GenerateRandomGraph(10, setNodes);
+    }, []);
 
     return (
-        <div>
-            <h1>Network Graph Visualiser</h1>
-            <div>
-                {/* Render nodes */}
-                {graph.nodes.map((node) => (
-                    <div key={node.id}>{node.label}</div>
-                ))}
-            </div>
-            <div>
-                {/* Render edges */}
-                {graph.edges.map((edge) => (
-                    <div key={`${edge.source}-${edge.target}`}>
-                        {edge.source} -{'>'} {edge.target}
-                    </div>
-                ))}
-            </div>
+        <div className="graph-canvas">
+                    <GraphCanvas
+            nodes={nodes}
+            edges={edges}
+        />
         </div>
     );
 };

src/pages/GraphVisualiser.tsx

@@ -9,9 +9,9 @@ const Navbar: React.FC = () => {
                 <h2>Algorithm Visualiser</h2>
             </div>
             <ul>
+                <li><Link to="/pathfinding">Pathfinding Algorithms</Link></li>
                 <li><Link to="/sorting">Sorting Algorithms</Link></li>
                 <li><Link to="/search">Search Algorithms</Link></li>
-                <li><Link to="/pathfinding">Pathfinding Algorithms</Link></li>
                 <li><Link to="/graph">Graph Algorithms</Link></li>
             </ul>
         </nav>

src/pages/Navbar.tsx

@@ -0,0 +1,11 @@
+.graph-canvas {
+    width: 100%;
+    height: 100svh;
+}
+
+
+.graph-canvas > div {
+    position: relative;
+    width:100%;
+    height: 100%;
+}

src/styles/graph.css

@@ -6,6 +6,7 @@
     color: rgba(255, 255, 255, 0.87);
     background-color: #131313;
     text-align: left;
+    z-index: 1;
 }
 
 .navbar > div > h2 {