Merge pull request #14 from oslabs-beta/LK/visualizingParsedData

Lk/visualizing parsed data

Author: ChristinaRaether

extension.js

@@ -22,7 +22,7 @@ function activate(context) {
 		const tree = new Parser(fileArray[0].path);
 		tree.parse();
 		const data = tree.getTree();
-		// console.log('Data sent back: ', data);
+		console.log('Data sent back: \n', data);
 		createPanel(context, data);
 	});
 	context.subscriptions.push(disposable, result);

src/panel.js

@@ -34,12 +34,14 @@ function createPanel(context, data) {
             switch (msg.type) {
                 case 'onData':
                     if (!msg.value) break;
-                    // context.workspaceState.update('reactLabyrinth', msg.value);
+                    context.workspaceState = context.workspaceState || {};
+                    context.workspaceState.update('reactLabyrinth', msg.value);
+                    // console.log('msg.value from panel.js: ', msg.value);
                     panel.webview.postMessage(
                         {
                             type: 'parsed-data',
                             value: msg.value, // tree object
-                            // settings: await vscode.workspace.getConfiguration('reactLabyrinth')
+                            settings: await vscode.workspace.getConfiguration('reactLabyrinth')
                         });
                     break;
 

src/webview/Flow.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import ReactFlow, {
   addEdge,
   MiniMap,
@@ -9,30 +9,35 @@ import ReactFlow, {
 } from "reactflow";
 import "reactflow/dist/style.css"
 
-import {
-  nodes as initialNodes,
-  edges as initialEdges
-} from "./initial";
+import FlowBuilder from './flowBuilder.js';
 
 const onInit = (reactFlowInstance) =>
   console.log("flow loaded:", reactFlowInstance);
 
 const OverviewFlow = () => {
+  const initialNodes = [];
+  const initialEdges = [];
+
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
   const onConnect = useCallback(
-    (params) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
+    (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
       switch (msg.type) {
         case 'parsed-data': {
-          // this is where we would set state of msg for tree data, root file, and other info
-          console.log('msg.value: ', msg.value);
-          console.log('testing from flow.jsx');
+          const results = new FlowBuilder(msg.value);
+          results.build(msg.settings)
+          console.log('results: ', results);
+          console.log('results.initialNodes: ', results.initialNodes);
+          console.log('results.initialEdges: ', results.initialEdges);
+          setNodes(results.initialNodes);
+          setEdges(results.initialEdges);
           break;
         }
       }

src/webview/flowBuilder.js

@@ -0,0 +1,109 @@
+import React from 'react';
+// will create a build func and then call the helper funcs to return an object
+// make a new instance of this class in flow, call the build method, and pass this as state
+class FlowBuilder {
+  constructor(data) {
+    this.parsedData = [data];
+    this.id = 0;
+    this.initialNodes = [];
+    this.viewData;
+    this.edgeId = 0;
+    this.initialEdges = [];
+  }
+
+  buildNodesArray(parsedData) {
+    if (!parsedData) return;
+
+    parsedData.forEach((item) => {
+      const node = {
+        id: (++this.id).toString(),
+        data: {
+          label: (
+            <div key={this.id}>
+              <ul>
+                <li>{item.fileName}</li>
+                <li>Client Component: {item.isClientComponent.toString()}</li>
+              </ul>
+            </div>
+          )
+        },
+        type: item.depth === 0 ? 'input' : '',
+        position: { x: 0, y: 0 },
+        style: {
+          backgroundColor: "var(--vscode-dropdown-background)",
+          borderRadius: "15px",
+          width: '265px',
+          boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+          border: 'none',
+          padding: '10px 10px 3px 10px'
+        },
+      };
+      this.initialNodes.push(node);
+      if (item.children) {
+        this.buildNodesArray(item.children);
+      }
+    });
+    // console.log('initialNodes', this.initialNodes);
+  };
+
+  buildEdgesArray(parsedData, parentID) {
+    if (!parsedData) return;
+
+    parsedData.forEach((item) => {
+      const nodeID = ++this.edgeId;
+      if (parentID) {
+        const edge = {
+          id: `e${parentID}-${nodeID}`,
+          source: parentID.toString(),
+          target: nodeID.toString(),
+          type: 'bezier',
+          animated: false,
+        };
+        this.initialEdges.push(edge);
+      }
+      if (item.children) {
+        this.buildEdgesArray(item.children, nodeID);
+      }
+    });
+    // console.log('initialEdges', this.initialEdges);
+  }
+
+  build(settings) {
+    const treeParsed = JSON.parse(JSON.stringify(this.parsedData[0]));
+    console.log('settings: ', settings);
+    const traverse = (node) => {
+      let validChildren = [];
+
+      for (let i = 0; i < node.children.length; i++) {
+        if (
+          node.children[i].thirdParty &&
+          settings.thirdParty &&
+          !node.children[i].reactRouter
+        ) {
+          validChildren.push(node.children[i]);
+        } else if (node.children[i].reactRouter && settings.reactRouter) {
+          validChildren.push(node.children[i]);
+        } else if (
+          !node.children[i].thirdParty &&
+          !node.children[i].reactRouter
+        ) {
+          validChildren.push(node.children[i]);
+        }
+      }
+
+      // Update children with only valid nodes, and recurse through each node
+      node.children = validChildren;
+      node.children.forEach((child) => {
+        traverse(child);
+      });
+    }
+    traverse(treeParsed);
+    // Update the vewData state
+    this.viewData = ([treeParsed]);
+    console.log('viewData:', this.viewData);
+    this.buildNodesArray(this.viewData);
+    this.buildEdgesArray(this.viewData);
+  }
+}
+
+export default FlowBuilder;