Tree based algorithms and DS

README.md

@@ -15,11 +15,14 @@ So far there are these segments
 - Graph Traversal (BFS / DFS)
 - Shortest Path
 - Minimum Spanning Tree
+- Connectivity
+- Network Flow
 - Prime Numbers
 - Sorting Algorithms
 - N Queen
 - Convex Hull
 - Binary Search Game
+- Binary Search Tree
 - Recursion Tree
 - Turing Machine
 - Game of Life
@@ -37,6 +40,8 @@ I have implemented a total of `30+ algorithms` so far. And will try to add more
   - Recursive Maze Creation
 - Data Structures
   - Linked List (insert, delete, search, reverse — singly & doubly)
+- Trees
+  - Binary Search Tree (insert, delete, search with animated re-layout)
 - Graph Traversal
   - BFS
   - DFS
@@ -46,6 +51,14 @@ I have implemented a total of `30+ algorithms` so far. And will try to add more
 - Minimum Spanning Tree 
   - Kruskal
   - Prim
+- Connectivity
+  - Connected Components
+  - Strongly Connected Components (Tarjan)
+  - Weakly Connected Components
+- Network Flow
+  - Edmonds-Karp
+  - Ford-Fulkerson
+  - Min Cut
 - Sorting
   - Bubble sort
   - Selection sort
@@ -83,6 +96,8 @@ I am not sure if anyone would like to contribute to this project or not. But any
 - Jun 2026: Added Linked List visualizer (singly & doubly) with staged insert/delete animations
 - Jun 2026: Added interactive Graph Traversal (BFS / DFS) built on React Flow
 - Jun 2026: Added Shortest Path (Dijkstra / Bellman-Ford) and Minimum Spanning Tree (Kruskal / Prim) on a shared, reusable graph workspace
+- Jun 2026: Added Connectivity (components / SCC / WCC) and Network Flow (Edmonds-Karp / Ford-Fulkerson, max flow / min cut)
+- Jun 2026: Added a reusable SVG tree component with a Binary Search Tree visualizer, and migrated the Recursion Tree onto it
 
 ### Acknowledgement
 

src/app/about/page.jsx

@@ -15,12 +15,20 @@ const algorithms = [
             "Linked List — insert, delete, search, reverse (singly & doubly)",
         ],
     },
+    {
+        category: "Trees",
+        items: [
+            "Binary Search Tree — insert, delete, search with animated re-layout",
+        ],
+    },
     {
         category: "Interactive Graphs",
         items: [
             "Graph Traversal — BFS / DFS",
             "Shortest Path — Dijkstra & Bellman-Ford (with negative-cycle detection)",
             "Minimum Spanning Tree — Kruskal & Prim",
+            "Connectivity — Connected Components, Strongly & Weakly Connected",
+            "Network Flow — max flow / min cut (Edmonds-Karp & Ford-Fulkerson)",
         ],
     },
     {

src/app/bst/page.jsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from 'react';
+import Navbar from '@/components/navbar';
+import { fromValues, insertActions, deleteActions, searchActions } from '@/lib/algorithms/bst';
+import { binaryLayout } from '@/components/tree/layout';
+import { useTreeEditor } from '@/components/tree/use-tree-editor';
+import TreeCanvas from '@/components/tree/tree-canvas';
+import TreeMenu from '@/components/tree/tree-menu';
+
+export default function Bst() {
+    const [initialTree] = useState(() => fromValues([50, 30, 70, 20, 40, 60, 80]));
+    const g = useTreeEditor({ initialTree });
+
+    return (
+        <div className="flex flex-col h-screen">
+            <Navbar />
+            <div className="flex flex-1 overflow-hidden">
+                <TreeMenu
+                    title="Binary Search Tree"
+                    disabled={g.isRunning}
+                    onInsert={(v) => g.run(insertActions(g.getContext().tree, v))}
+                    onDelete={(v) => g.run(deleteActions(g.getContext().tree, v))}
+                    onSearch={(v) => g.run(searchActions(g.getContext().tree, v))}
+                    onClear={g.clear}
+                    onSpeedChange={g.setSpeed}
+                />
+                <div className="relative flex-1 p-6">
+                    {g.status && (
+                        <div className="absolute top-3 left-3 z-10 rounded-md bg-slate-800 px-3 py-1.5 text-xs font-semibold text-white shadow">
+                            {g.status}
+                        </div>
+                    )}
+                    <TreeCanvas
+                        tree={g.tree}
+                        layout={binaryLayout}
+                        nodeState={g.nodeState}
+                        edgeState={g.edgeState}
+                        labels={g.labels}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}

src/app/components/algorithm-cards.jsx

@@ -25,6 +25,21 @@ const algorithms = [
     title: 'Minimum Spanning Tree',
     description: "Build a weighted graph and watch Kruskal and Prim grow the minimum spanning tree",
     image: '/AlgorithmVisualizer/images/mst.png?height=200&width=300'
+  },{
+    id: 'connectivity',
+    title: 'Connectivity',
+    description: "Build a graph and color its connected components and strongly connected components",
+    image: '/AlgorithmVisualizer/images/connectivity.png?height=200&width=300'
+  },{
+    id: 'network-flow',
+    title: 'Network Flow',
+    description: "Compute max flow / min cut with Edmonds-Karp and Ford-Fulkerson on a capacity network",
+    image: '/AlgorithmVisualizer/images/network-flow.png?height=200&width=300'
+  },{
+    id: 'bst',
+    title: 'Binary Search Tree',
+    description: "Insert, delete, and search on a BST with animated tree restructuring",
+    image: '/AlgorithmVisualizer/images/bst.png?height=200&width=300'
   },
   {
     id: 'recursion-tree',

src/app/connectivity/page.jsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useState } from 'react';
+import { ReactFlowProvider } from '@xyflow/react';
+import Navbar from '@/components/navbar';
+import { adjacency } from '@/lib/algorithms/graph';
+import { CONNECTIVITY_PRESETS, connectedComponentsActions, sccActions } from '@/lib/algorithms/connectivity';
+import { useGraphEditor } from '@/components/graph/use-graph-editor';
+import GraphCanvas from '@/components/graph/graph-canvas';
+import GraphMenu from '@/components/graph/graph-menu';
+
+function ConnectivityInner() {
+    const g = useGraphEditor({ initialPreset: CONNECTIVITY_PRESETS[0] });
+    const [algo, setAlgo] = useState(0);
+
+    // Undirected: just Connected Components. Directed: SCC (strongly) + WCC (weakly).
+    const algorithms = g.directed
+        ? ['Strongly Connected (SCC)', 'Weakly Connected (WCC)']
+        : ['Connected Components'];
+
+    const onDirectedChange = (val) => { g.setDirected(val); setAlgo(0); };
+
+    const onVisualize = () => {
+        const { nodes, edges, directed } = g.getContext();
+        const ids = nodes.map((n) => n.id);
+        // SCC only when directed + first option; everything else is the
+        // (undirected) connected-components computation — i.e. CC or WCC.
+        g.run(directed && algo === 0
+            ? sccActions(adjacency(edges, true), ids)
+            : connectedComponentsActions(adjacency(edges, false), ids));
+    };
+
+    return (
+        <div className="flex flex-col h-screen">
+            <Navbar />
+            <div className="flex flex-1 overflow-hidden">
+                <GraphMenu
+                    title="Connectivity"
+                    algorithms={algorithms}
+                    presets={CONNECTIVITY_PRESETS}
+                    disabled={g.isRunning}
+                    onAlgorithmChange={setAlgo}
+                    onDirectedChange={onDirectedChange}
+                    onPresetChange={(i) => g.loadPreset(CONNECTIVITY_PRESETS[i])}
+                    onSpeedChange={g.setSpeed}
+                    onVisualize={onVisualize}
+                    onClear={g.clear}
+                />
+                <GraphCanvas editor={g} />
+            </div>
+        </div>
+    );
+}
+
+export default function Connectivity() {
+    return (
+        <ReactFlowProvider>
+            <ConnectivityInner />
+        </ReactFlowProvider>
+    );
+}

src/app/network-flow/page.jsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useState } from 'react';
+import { ReactFlowProvider } from '@xyflow/react';
+import Navbar from '@/components/navbar';
+import { FLOW_PRESETS, maxFlowActions } from '@/lib/algorithms/networkFlow';
+import { useGraphEditor } from '@/components/graph/use-graph-editor';
+import GraphCanvas from '@/components/graph/graph-canvas';
+import GraphMenu from '@/components/graph/graph-menu';
+
+function NetworkFlowInner() {
+    const g = useGraphEditor({ weighted: true, initialDirected: true, initialPreset: FLOW_PRESETS[0] });
+    const [algo, setAlgo] = useState(0); // 0 = Edmonds-Karp, 1 = Ford-Fulkerson
+
+    const onVisualize = () => {
+        const { edges, startId, finishId } = g.getContext();
+        g.run(maxFlowActions(edges, startId, finishId, algo === 1 ? 'ff' : 'ek'));
+    };
+
+    return (
+        <div className="flex flex-col h-screen">
+            <Navbar />
+            <div className="flex flex-1 overflow-hidden">
+                <GraphMenu
+                    title="Network Flow"
+                    algorithms={['Edmonds-Karp', 'Ford-Fulkerson']}
+                    presets={FLOW_PRESETS}
+                    weighted
+                    hideDirected
+                    disabled={g.isRunning}
+                    onAlgorithmChange={setAlgo}
+                    onDirectedChange={g.setDirected}
+                    onPresetChange={(i) => g.loadPreset(FLOW_PRESETS[i])}
+                    onSpeedChange={g.setSpeed}
+                    onVisualize={onVisualize}
+                    onClear={g.clear}
+                />
+                <GraphCanvas editor={g} />
+            </div>
+        </div>
+    );
+}
+
+export default function NetworkFlow() {
+    return (
+        <ReactFlowProvider>
+            <NetworkFlowInner />
+        </ReactFlowProvider>
+    );
+}