Merge pull request #22 from oslabs-beta/FL-JA/D3-visualization

Fl ja/d3 visualization

Author: Louka3

package-lock.json

@@ -101,6 +101,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,38 +12,108 @@ 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";
+import { getNonce } from "../getNonce";
 
 const onInit = (reactFlowInstance: ReactFlowInstance) =>
   console.log("flow loaded:", reactFlowInstance);
 
 const OverviewFlow = () => {
+  const reactFlowWrapper = useRef<HTMLDivElement>(null);
   const initialNodes = [];
   const initialEdges = [];
-
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+ 
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
   const onConnect = useCallback(
     (params) => setEdges((eds) => addEdge({ ...params, type: ConnectionLineType.Bezier, animated: true }, eds)),
     []
   );
 
+
   useEffect(() => {
     window.addEventListener('message', (e) => {
-      const msg = e.data; // object containing type prop and value prop
+      // object containing type prop and value prop
+      const msg = e.data; 
+
       switch (msg.type) {
         case 'parsed-data': {
-          const results = new FlowBuilder(msg.value);
-          results.build(msg.settings)
-          setNodes(results.initialNodes);
-          setEdges(results.initialEdges);
+          let data : object | undefined = msg.value;
+          console.log('data', data)
+          mappedData(data)
+          console.log('nodes', initialNodes)
+          setEdges(initialEdges);
+          setNodes(initialNodes)
+          console.log('edges: ', edges);
           break;
         }
       }
     });
   }, []);
 
+
+  // Function that creates Tree Structure 
+  function mappedData (data) {
+
+    // 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().size([800, 500])
+    treeLayout(root);
+
+    // Iterate through each Tree and create a node
+    root.each((node: any) : void => {
+      
+      // Create a Node from the current Root and add it to our nodes array
+      initialNodes.push({
+        id: node.data.id,
+        type: 'default',
+        data: { label: node.data.name },
+        position: { x: node.x ? node.x : 0, y: node.y ? node.y : 0 },
+        style: {
+          borderRadius: '6px',
+          borderWidth: '2px',
+          borderColor: '#6b7280',
+          display: 'flex',
+          justifyContent: 'center',
+          placeItems: 'center',
+          backgroundColor: `${(node.data.isClientComponent) ? '#fdba74' : '#93C5FD'}`,
+        }
+      });
+      
+      // If the current node has a parent, create an edge to show relationship
+      if (node.data.parent) {
+        const newEdge = {
+          id: `${getNonce()}`,
+          source: node.data.parent,
+          target: node.data.id,
+          type: ConnectionLineType.Bezier,
+          animated: true,
+        };
+
+        
+        // Check if the edge already exists before adding
+        const edgeExists = initialEdges.some(
+          edge => edge.source === newEdge.source && edge.target === newEdge.target
+        );
+        
+        // If edge does not exist, add to our edges array
+        if (!edgeExists) {
+          initialEdges.push(newEdge)
+        }
+      }
+    }
+    )
+  
+  }
+
   return (
+  <div style={{ height: '600px', width: '100%' }}>
     <ReactFlow
       nodes={nodes}
       edges={edges}
@@ -53,6 +123,7 @@ const OverviewFlow = () => {
       onInit={onInit}
       fitView
       attributionPosition="top-right"
+      style={{ width: '100%', height: '100%' }}
     >
       <MiniMap
         nodeStrokeColor={(n): string => {
@@ -80,6 +151,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"
+}