Got spacing to where we wanted it to be, still considering moving mapped data function into separate file to keep Flow.tsx clean

Author: Ponch49

src/types/hierarchyData.ts

@@ -2,9 +2,17 @@ import { Tree } from "./tree"
 
 
 export interface hierarchyData {
-    children?: hierarchyData[],
-    data: Tree,
-    depth: number,
-    height: number,
-    parent: hierarchyData | null
-}
+    id: string,
+    position: { x: number, y: number },
+    type: string,
+    data: { label: string },
+    style: {
+      borderRadius: string,
+      borderWidth: string,
+      borderColor: string,
+      display: string,
+      justifyContent: string,
+      placeItems: string,
+      backgroundColor: string,
+    }
+  }

src/webview/Flow.tsx

@@ -61,10 +61,19 @@ const OverviewFlow = () => {
 
     // Create a holder for the heirarchical data (msg.value), data comes in an object of all the Trees
     const root : d3.HierarchyNode<Tree> = d3.hierarchy(data)
-    
 
-    //create tree layout and give nodes their positions
-    const treeLayout : d3.TreeLayout<unknown> = d3.tree().size([800, 500])
+    // Dynamically adjust height and width of display depending on the amount of nodes
+    const totalNodes : number = root.descendants().length;
+    const width : number = Math.max(totalNodes * 100, 800);
+    const height = Math.max(totalNodes * 20, 500)
+ 
+
+    //create tree layout and give nodes their positions and 
+    const treeLayout : d3.TreeLayout<unknown> = d3.tree()
+      .size([ width, height ])
+      .separation((a: d3.HierarchyPointNode<Node>, b: d3.HierarchyPointNode<Node>) => (a.parent == b.parent ? 2 : 2.5))
+
+
     treeLayout(root);
     // Iterate through each Tree and create a node
     root.each((node: any) : void => {