Add Graph utils to start handling basic traversals.

* Breadth First Search
* Depth First Search
* Generate Random Graph
* Populate Graph from Nodes

Author: A-Georgiou

src/algorithms/graphs/BreadthFirstSearch.ts

@@ -0,0 +1,30 @@
+import { Node } from '../utils/GraphUtils';
+
+export default function BreadthFirstSearch(nodeMap: Node[], setNodes: (nodes: any) => void, selectedId: string) {
+    let queue: Node[] = [];
+    let visited: Node[] = [];
+
+    for (let i = 0; i < nodeMap.length; i++) {
+        if (nodeMap[i].id === selectedId) {
+            queue.push(nodeMap[i]);
+            visited.push(nodeMap[i]);
+        }
+    }
+
+    function processQueue() {
+        if (queue.length > 0) {
+            let currentNode: Node = queue.shift()!;
+            currentNode.fill = 'darkseagreen';
+            for (let i = 0; i < currentNode.children.length; i++) {
+                if (!visited.includes(currentNode.children[i])) {
+                    queue.push(currentNode.children[i]);
+                    visited.push(currentNode.children[i]);
+                }
+            }
+            setNodes([...nodeMap]);
+            setTimeout(processQueue, 1000); // 1 second delay
+        }
+    }
+
+    setTimeout(processQueue, 1000); // 1 second delay
+}

src/algorithms/graphs/DepthFirstSearch.ts

@@ -0,0 +1,30 @@
+import { Node } from '../utils/GraphUtils';
+
+export default function DepthFirstSearch(nodeMap: Node[], setNodes: (nodes: any) => void, selectedId: string) {
+    let queue: Node[] = [];
+    let visited: Node[] = [];
+
+    for (let i = 0; i < nodeMap.length; i++) {
+        if (nodeMap[i].id === selectedId) {
+            queue.push(nodeMap[i]);
+            visited.push(nodeMap[i]);
+        }
+    }
+
+    function processQueue() {
+        if (queue.length > 0) {
+            let currentNode: Node = queue.pop()!;
+            currentNode.fill = 'darkseagreen';
+            for (let i = 0; i < currentNode.children.length; i++) {
+                if (!visited.includes(currentNode.children[i])) {
+                    queue.push(currentNode.children[i]);
+                    visited.push(currentNode.children[i]);
+                }
+            }
+            setNodes([...nodeMap]);
+            setTimeout(processQueue, 1000); // 1 second delay
+        }
+    }
+
+    setTimeout(processQueue, 1000); // 1 second delay
+}

src/algorithms/graphs/GenerateRandomGraph.ts

@@ -3,7 +3,7 @@ export default function GenerateRandomGraph(numNodes: number, setNodes: (nodes:
     for (let i = 0; i < numNodes; i++) {
         nodeTemp.push({
             id: i.toString(),
-            fill: 'slateblue',
+            fill: 'purple',
         });
     }
     setNodes(nodeTemp);

src/algorithms/graphs/PopulateGraphMap.ts

@@ -0,0 +1,31 @@
+
+import { Node } from '../utils/GraphUtils';
+
+export default function PopulateGraphMap(nodeMap: Node[], setNodes: (nodes: any) => void, setEdges: (edges: any) => void) {
+    const nodes = [];
+    const edges = [];
+    for (let i = 0; i < nodeMap.length; i++) {
+        nodes.push({
+            id: nodeMap[i].id,
+            label: nodeMap[i].label,
+        });
+        for (let j = 0; j < nodeMap[i].children.length; j++) {
+            edges.push({
+                id: nodeMap[i].id + '-' + nodeMap[i].children[j].id,
+                source: nodeMap[i].id,
+                target: nodeMap[i].children[j].id,
+                label: nodeMap[i].id + '-' + nodeMap[i].children[j].id,
+            });
+        }
+        for (let j = 0; j < nodeMap[i].parents.length; j++) {
+            edges.push({
+                id: nodeMap[i].parents[j].id + '-' + nodeMap[i].id,
+                source: nodeMap[i].parents[j].id,
+                target: nodeMap[i].id,
+                label: nodeMap[i].parents[j].id + '-' + nodeMap[i].id,
+            });
+        }
+    }
+    setNodes(nodes);
+    setEdges(edges);
+}

src/algorithms/utils/GraphUtils.ts

@@ -0,0 +1,16 @@
+// Define a class to represent a cell in the maze
+export class Node {
+    id: string;
+    label: string;
+    fill: string;
+    children: Node[];
+    parents: Node[];
+
+    constructor(id: string, label: string, fill: string) {
+        this.id = id;
+        this.label = label;
+        this.fill = fill;
+        this.children = [];
+        this.parents = [];
+    }
+}

src/pages/GraphVisualiser.tsx

@@ -1,22 +1,63 @@
 import React, {useState, useEffect} from 'react';
 import { GraphCanvas } from 'reagraph';
 import GenerateRandomGraph from '../algorithms/graphs/GenerateRandomGraph';
+import BreadthFirstSearch from '../algorithms/graphs/BreadthFirstSearch';
+import DepthFirstSearch from '../algorithms/graphs/DepthFirstSearch';
+import { Node } from '../algorithms/utils/GraphUtils';
+import PopulateGraphMap from '../algorithms/graphs/PopulateGraphMap';
 import '../styles/graph.css';
+import { GraphAlgorithm } from '../utils/GraphEnum';
 
 const GraphVisualiser: React.FC = () => {
-    const [edges, _] = useState([]);
+    const [edges, setEdges] = useState([]);
     const [nodes, setNodes] = useState<{ id: string }[]>([]); // Specify the type of the nodes state variable
+    const [algorithm, setAlgorithm] = useState(GraphAlgorithm.BFS);
+
+    const nodeMap: Node[] = [
+        new Node('0', '0', 'slateblue'),
+        new Node('1', '1', 'slateblue'),
+        new Node('2', '2', 'slateblue'),
+        new Node('3', '3', 'slateblue'),
+        new Node('4', '4', 'slateblue'),
+        new Node('5', '5', 'slateblue'),
+        new Node('6', '6', 'slateblue'),
+        new Node('7', '7', 'slateblue'),
+        new Node('8', '8', 'slateblue'),
+        new Node('9', '9', 'slateblue'),
+    ];
+
+    nodeMap[0].children.push(nodeMap[1]);
+    nodeMap[1].children.push(nodeMap[2]);
+    nodeMap[2].children.push(nodeMap[3]);
+    nodeMap[3].children.push(nodeMap[4]);
+    nodeMap[3].children.push(nodeMap[7]);
+    nodeMap[4].children.push(nodeMap[8]);
+    nodeMap[4].children.push(nodeMap[5]);
+    nodeMap[4].children.push(nodeMap[6]);
+    nodeMap[1].children.push(nodeMap[0]);
+    nodeMap[5].children.push(nodeMap[9]);
 
     useEffect(() => {
-        GenerateRandomGraph(10, setNodes);
+        PopulateGraphMap(nodeMap, setNodes, setEdges);
     }, []);
 
+
     return (
         <div className="graph-canvas">
-                    <GraphCanvas
-            nodes={nodes}
-            edges={edges}
-        />
+            <div className="graph-canvas-control-panel">
+                <h4>Double Click Node to run algorithm.</h4>
+            <select className="graph-canvas-control" onChange={(event) => {setAlgorithm(event.target.value as GraphAlgorithm)}}>
+                <option value={GraphAlgorithm.DFS}>Depth First Search</option>
+                <option value={GraphAlgorithm.BFS}>Breadth First Search</option>
+            </select>
+            </div>
+            <div className="graph-canvas-art">
+            <GraphCanvas
+                nodes={nodes}
+                edges={edges}
+                onNodeDoubleClick={node => DepthFirstSearch(nodeMap, setNodes, node.id)} 
+            />
+            </div>
         </div>
     );
 };

src/styles/graph.css

@@ -1,11 +1,44 @@
 .graph-canvas {
     width: 100%;
     height: 100svh;
+    display:flex;
+    flex-direction: column;
 }
 
-
-.graph-canvas > div {
+.graph-canvas > .graph-canvas-art {
     position: relative;
     width:100%;
     height: 100%;
+}
+
+.graph-canvas-control-panel{
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    height: 64px;
+    background-color: #6A0DAD;
+    opacity: 80%;
+    transition: .5s;
+}
+
+.graph-canvas-control-panel > h4 {
+    margin: auto;
+}
+
+.graph-canvas-control {
+    z-index: 100;
+    position: relative;
+    top: 0;
+    height: 24px;
+    width: 200px;
+    margin: auto;
+    display: flex;
+    justify-content: center; /** X-axis align **/
+    color: black;
+    background-color: white;
+}
+
+.graph-outer{
+    height: 100svh;
+    width: 100%;
 }

src/utils/GraphEnum.ts

@@ -0,0 +1,4 @@
+export enum GraphAlgorithm {
+    BFS = 'bfs',
+    DFS = 'dfs',
+}