BST visual display

src/components/DSPlaygrounds/BinarySearchTree/BinaryNode.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { TreeNode } from "../../../entities";
+
+type BinaryNodeProps = {
+  node: TreeNode;
+  x: number;
+  y: number;
+  level: number;
+};
+
+const VERTICAL_SPACING = 60;
+const HORIZONTAL_SPACING = 40;
+
+function BinaryNode({ node, x, y, level }: BinaryNodeProps) {
+  const leftChildX = x - HORIZONTAL_SPACING / (level + 1);
+  const rightChildX = x + HORIZONTAL_SPACING / (level + 1);
+  const childY = y + VERTICAL_SPACING;
+
+  return (
+    <g>
+      <circle cx={x} cy={y} r="20" fill="black" />
+      <text x={x} y={y} textAnchor="middle" dy=".3em" fill="white">
+        {node.value}
+      </text>
+
+      {node.left && (
+        <>
+          <line
+            x1={x}
+            y1={y + 20}
+            x2={leftChildX}
+            y2={childY - 20}
+            stroke="black"
+            strokeWidth="1"
+          />
+          <BinaryNode
+            node={node.left}
+            x={leftChildX}
+            y={childY}
+            level={level + 1}
+          />
+        </>
+      )}
+
+      {node.right && (
+        <>
+          <line
+            x1={x}
+            y1={y + 20}
+            x2={rightChildX}
+            y2={childY - 20}
+            stroke="black"
+            strokeWidth="1"
+          />
+          <BinaryNode
+            node={node.right}
+            x={rightChildX}
+            y={childY}
+            level={level + 1}
+          />
+        </>
+      )}
+    </g>
+  );
+}
+
+export default BinaryNode;

src/components/DSPlaygrounds/BinarySearchTreePG.tsx → src/components/DSPlaygrounds/BinarySearchTree/BinarySearchTreePG.tsx

@@ -1,14 +1,9 @@
 import { useState } from "react";
-import { PlaygroundProps } from "../../entities";
+import { PlaygroundProps, TreeNode } from "../../../entities";
 import { Link } from "react-router-dom";
-import PencilIcon from "../Icons/PencilIcon";
-import map from "../../data/data-structures";
-
-interface TreeNode {
-  value: number;
-  left: TreeNode | null;
-  right: TreeNode | null;
-}
+import PencilIcon from "../../Icons/PencilIcon";
+import map from "../../../data/data-structures";
+import BinaryNode from "./BinaryNode";
 
 function BinarySearchTreePG({ className }: PlaygroundProps) {
   const ds = map.get("binary-search-tree")!;
@@ -122,8 +117,12 @@ function BinarySearchTreePG({ className }: PlaygroundProps) {
       </div>
 
       {/* Visualization Window - To be implemented */}
-      <div className="relative p-4 grow w-full border border-black rounded-md">
-        {/* Tree visualization will go here */}
+      <div className="relative p-4 grow w-full border border-black rounded-md overflow-auto">
+        <svg width="100%" height="100%" viewBox="0 0 800 600">
+          <g transform="translate(400, 40)">
+            {root && <BinaryNode node={root} x={0} y={0} level={0} />}
+          </g>
+        </svg>
       </div>
 
       {/* Error Messages */}

src/entities.ts

@@ -25,3 +25,11 @@ export type DynamicArrayState = {
 export type PlaygroundProps = {
   className?: string;
 };
+
+export type TreeNode = {
+  value: number;
+  left: TreeNode | null;
+  right: TreeNode | null;
+  x?: number;
+  y?: number;
+};

src/pages/BinarySearchTree.tsx

@@ -1,6 +1,6 @@
 import map from "../data/data-structures";
 import Heading from "../components/Heading";
-import BinarySearchTreePG from "../components/DSPlaygrounds/BinarySearchTreePG";
+import BinarySearchTreePG from "../components/DSPlaygrounds/BinarySearchTree/BinarySearchTreePG";
 
 function BinarySearchTree() {
   const binarySearchTree = map.get("binary-search-tree")!;