Was able to get the nodes to render on the screen using d3, still working on adding edges and getting the positioning of the nodes to represent a tree shape.

Author: Ponch49

package-lock.json

@@ -98,6 +98,7 @@
     "babel": "^6.23.0",
     "babel-loader": "^9.1.3",
     "css-loader": "^6.8.1",
+    "d3": "^7.8.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "reactflow": "^11.10.1",

package.json

@@ -0,0 +1,11 @@
+function getNonce() {
+    let text = "";
+    const possible =
+      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    for (let i = 0; i < 32; i++) {
+      text += possible.charAt(Math.floor(Math.random() * possible.length));
+    }
+    return text;
+  }
+
+module.exports = { getNonce }

src/getNonce 2.js

@@ -71,6 +71,7 @@ export class Parser {
             reactRouter: false,
             reduxConnect: false,
             children: [],
+            parent: null,
             parentList: [],
             props: {},
             error: '',
@@ -180,6 +181,9 @@ export class Parser {
         if (componentTree.parentList.includes(componentTree.filePath)) {
             return;
         }
+        // if (typeof componentTree.parentList === 'string' && componentTree.parentList.includes(componentTree.filePath)) {
+        //     return;
+        // }
 
         // Create abstract syntax tree of current component tree file
         let ast: babel.ParseResult<File>;
@@ -468,6 +472,7 @@ export class Parser {
                 count: 1,
                 props: props,
                 children: [],
+                parent: parent.id,
                 // consider adding the id to the parentList array somehow for D3 integration...
                 parentList: [parent.filePath].concat(parent.parentList),
                 error: '',

src/parser.ts

@@ -0,0 +1,11 @@
+const Tree = {
+    id: undefined,
+    fileName: undefined,
+    filePath: undefined,
+    // children & parentList should be populated with other Tree objects
+    children: [],
+    parentList: [],
+    isClientComponent: false
+}
+
+module.exports = { Tree };

src/treeTemplates/tree 2.js

@@ -0,0 +1,10 @@
+import { Tree } from "./tree"
+
+
+export interface hierarchyData {
+    children?: hierarchyData[],
+    data: Tree,
+    depth: number,
+    height: number,
+    parent: hierarchyData | null
+}

src/types/hierarchyData.ts

@@ -11,6 +11,7 @@ export type Tree = {
     reactRouter: boolean;
     reduxConnect: boolean;
     children: Tree[];
+    parent: string;
     parentList: string[];
     props: { [key: string]: boolean; };
     error: string;

src/types/tree.ts

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import ReactFlow, {
   addEdge,
   MiniMap,
@@ -12,13 +12,19 @@ import ReactFlow, {
 import "reactflow/dist/style.css";
 import { ConnectionLineType } from "../types/connection";
 import FlowBuilder from './flowBuilder';
+import * as d3 from 'd3';
+import { Tree } from "../types/tree";
+import { hierarchyData } from "../types/hierarchyData";
 
 const onInit = (reactFlowInstance: ReactFlowInstance) =>
   console.log("flow loaded:", reactFlowInstance);
 
 const OverviewFlow = () => {
+  const reactFlowWrapper = useRef<HTMLDivElement>(null);
   const initialNodes = [];
   const initialEdges = [];
+  const elements = [];
+  const edge = [];
 
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
@@ -33,26 +39,74 @@ const OverviewFlow = () => {
       const msg = e.data; // object containing type prop and value prop
       switch (msg.type) {
         case 'parsed-data': {
-          const results = new FlowBuilder(msg.value);
-          results.build(msg.settings)
-          setNodes(results.initialNodes);
-          setEdges(results.initialEdges);
+          // const results = new FlowBuilder(msg.value);
+          // results.build(msg.settings)
+          let data : object | undefined = msg.value;
+          console.log('data', data)
+          // setNodes(results.initialNodes);
+          // setEdges(results.initialEdges);
+          
+          // create a holder for the heirarchical data (msg.value), data comes in an object of all the Trees
+          const root : any = d3.hierarchy(data)
+          console.log('root', root)
+          
+
+          //create tree layout and give nodes their positions
+          const treeLayout = d3.tree()
+          treeLayout(root);
+          
+          root.each((node: any) : void => {
+            // console.log('node name',Object.keys(node))
+            elements.push({
+              id: node.data.name,
+              type: 'default',
+              data: { label: node.data.name },
+              position: { x: node.x || 0, y: node.y || 0 },
+            });
+            
+            // figure out how to get edges to connect
+            if (node.data.parent) {
+              // elements.push(addEdge({ 
+              //   id: node.data.id,
+              //   source: node.data.id,
+              //   target: node.data.parent,
+              //   // sourceHandle: null,
+              //   // targetHandle: null,
+              // }))
+            }
+          })
           break;
         }
       }
     });
+
+    setNodes(elements);
+    
+    //Rendering reactFlow
+    if (reactFlowWrapper.current) {
+      // Set initial position for the nodes
+      const initialPosition = { x: 0, y: 0 };
+      // reactFlowWrapper.current?.fitView(initialPosition);
+    }
+    // assign root variable using d3.heirarchy(data[0]), this will use d3 to format our data in a easy way to visualize the heirarchy
+    // const elements: Tree[];
+
   }, []);
 
   return (
+  <div style={{ height: '600px', width: '100%' }}>
     <ReactFlow
       nodes={nodes}
-      edges={edges}
+      // edges={edges}
+      // nodes={elements}
+      // edges={edge}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onConnect={onConnect}
       onInit={onInit}
       fitView
       attributionPosition="top-right"
+      style={{ width: '100%', height: '100%' }}
     >
       <MiniMap
         nodeStrokeColor={(n): string => {
@@ -80,6 +134,7 @@ const OverviewFlow = () => {
       <Controls />
       <Background color="#aaa" gap={16} />
     </ReactFlow >
+  </div>
   );
 };
 

src/webview/Flow.tsx

@@ -0,0 +1,32 @@
+const path = require('path')
+
+
+module.exports = {
+entry: './src/webview/index.jsx',
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, './build'),
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.css'],
+  },
+  module: {
+    rules: [
+        {
+            test: /\.jsx?/,
+            exclude: /node_modules/,
+            use: {
+              loader: "babel-loader",
+              options: {
+                presets: ['@babel/preset-env', '@babel/preset-react']
+              }
+            }
+          },
+          {
+            test: /\.(scss|css)$/,
+            use: ["style-loader", "css-loader"],
+          },
+    ]
+  },
+  mode: "development"
+}