From 6e4da9b10a4b4b9b60de1a1cb44204f6865c212c Mon Sep 17 00:00:00 2001 From: Francisco Lopez Date: Thu, 18 Jan 2024 22:21:57 -0500 Subject: [PATCH 1/2] Cleaned out all of the unused dependencies and separated functionality from view file and put functionality into flowBuilder.js --- src/webview/Flow.tsx | 97 ++----------------- src/webview/flowBuilder.tsx | 180 ++++++++++-------------------------- 2 files changed, 60 insertions(+), 217 deletions(-) diff --git a/src/webview/Flow.tsx b/src/webview/Flow.tsx index 799a8aa..270a86f 100644 --- a/src/webview/Flow.tsx +++ b/src/webview/Flow.tsx @@ -1,27 +1,17 @@ -import React, { useCallback, useEffect, useRef } from "react"; +import React, { useEffect, useRef } from "react"; import ReactFlow, { - addEdge, MiniMap, Panel, Controls, Background, useNodesState, useEdgesState, - ReactFlowInstance, Node, Edge } from "reactflow"; import "reactflow/dist/style.css"; -import { ConnectionLineType } from "../types/connection"; -import FlowBuilder from './flowBuilder'; -import * as d3 from 'd3'; +import FlowBuilder from "./flowBuilder"; import { Tree } from "../types/tree"; -import { hierarchyData } from "../types/hierarchyData"; -import { getNonce } from "../getNonce"; -import { FlowNode } from "typescript"; - -const onInit = (reactFlowInstance: ReactFlowInstance) => - console.log("flow loaded:", reactFlowInstance); const OverviewFlow = () => { const reactFlowWrapper = useRef(null); @@ -31,22 +21,21 @@ const OverviewFlow = () => { 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: MessageEvent) => { - // object containing type prop and value prop - const msg : MessageEvent = e; - console.log(e) + + // Object containing type prop and value prop + const msg : MessageEvent = e; + const flowBuilder = new FlowBuilder switch (msg.data.type) { case 'parsed-data': { let data : Tree | undefined = msg.data.value; - mappedData(data) + + // Creates our Tree structure + flowBuilder.mappedData(data, initialNodes, initialEdges) + setEdges(initialEdges); setNodes(initialNodes) break; @@ -56,70 +45,6 @@ const OverviewFlow = () => { }, []); - // Function that creates Tree Structure - function mappedData (data: Tree) : void { - - // Create a holder for the heirarchical data (msg.value), data comes in an object of all the Trees - const root : d3.HierarchyNode = d3.hierarchy(data) - - // 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 = d3.tree() - .size([ width, height ]) - .separation((a: d3.HierarchyPointNode, b: d3.HierarchyPointNode) => (a.parent == b.parent ? 2 : 2.5)) - - - treeLayout(root); - // Iterate through each Tree and create a node - root.each((node: any) : void => { - console.log('Node', node) - // Create a Node from the current Root and add it to our nodes array - initialNodes.push({ - id: node.data.id, - position: { x: node.x ? node.x : 0, y: node.y ? node.y : 0 }, - type: 'default', - data: { label: node.data.name }, - 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 : Edge = { - 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 : boolean = 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 (
@@ -128,8 +53,6 @@ const OverviewFlow = () => { edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} - onConnect={onConnect} - onInit={onInit} fitView attributionPosition="top-right" style={{ width: '100%', height: '100%' }} diff --git a/src/webview/flowBuilder.tsx b/src/webview/flowBuilder.tsx index 1db07e8..ad44053 100644 --- a/src/webview/flowBuilder.tsx +++ b/src/webview/flowBuilder.tsx @@ -1,81 +1,39 @@ -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 +import { ConnectionLineType, Edge, Node } from 'reactflow'; +import { Tree } from '../types/tree'; +import { getNonce } from '../getNonce'; +import * as d3 from 'd3' -interface Node { - id: string; - data: { - label: React.ReactNode; - }; - type: string; - position: { x: number, y: number }; - style: { - borderRadius: string; - borderWidth: string; - borderColor: string; - display: string; - justifyContent: string; - placeItems: string; - backgroundColor: string; - }; -} +// Contructs our family tree for React application root file that was selected -interface Edge { - id: string; - source: string; - target: string; - type: string; - animated: boolean; -} +class FlowBuilder { -interface ParsedDataItem { - fileName: string; - isClientComponent: boolean; - children?: ParsedDataItem[]; - thirdParty?: boolean; - reactRouter?: boolean; -} + public mappedData (data: Tree, nodes: Node[], edges: Edge[]) : void { -interface Settings { - thirdParty: boolean; - reactRouter: boolean; -} + // Create a holder for the heirarchical data (msg.value), data comes in an object of all the Trees + const root : d3.HierarchyNode = d3.hierarchy(data) -class FlowBuilder { - private parsedData: ParsedDataItem[]; - private viewData: ParsedDataItem[]; - private id: number; - private x: number; - private y: number; - private edgeId: number; - public initialEdges: Edge[]; - public initialNodes: Node[]; + // 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) + - constructor(data: ParsedDataItem) { - this.parsedData = [data]; - this.id = 0; - this.x = 0; - this.y = 0; - this.initialNodes = []; - this.initialEdges = []; - this.viewData = []; - this.edgeId = 0; - } + //create tree layout and give nodes their positions and + const treeLayout : d3.TreeLayout = d3.tree() + .size([ width, height ]) + .separation((a: d3.HierarchyPointNode, b: d3.HierarchyPointNode) => (a.parent == b.parent ? 2 : 2.5)) - private buildNodesArray(parsedData: ParsedDataItem[] | undefined, x: number = this.x, y: number = this.y): void { - if (!parsedData) return; - parsedData.forEach((item) => { - const node: Node = { - id: (++this.id).toString(), - data: { - label: ( -
{item.fileName}
- ) - }, - // type: item.depth === 0 ? 'input' : '', + 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 + nodes.push({ + id: node.data.id, + position: { x: node.x ? node.x : 0, y: node.y ? node.y : 0 }, type: 'default', - position: { x: (x += 40), y: (y += 30) }, + data: { label: node.data.name }, style: { borderRadius: '6px', borderWidth: '2px', @@ -83,72 +41,34 @@ class FlowBuilder { display: 'flex', justifyContent: 'center', placeItems: 'center', - backgroundColor: `${(item.isClientComponent) ? '#fdba74' : '#93C5FD'}`, - }, - }; - this.initialNodes.push(node); - if (item.children) { - this.buildNodesArray(item.children, (this.x += 40), (this.y += 30)); - } - }); - }; - - private buildEdgesArray(parsedData: ParsedDataItem[] | undefined, parentID?: number): void { - if (!parsedData) return; - - parsedData.forEach((item) => { - const nodeID = ++this.edgeId; - if (parentID) { - const edge: Edge = { - id: `e${parentID}-${nodeID}`, - source: parentID.toString(), - target: nodeID.toString(), - type: 'bezier', - animated: false, + 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 : Edge = { + id: `${getNonce()}`, + source: node.data.parent, + target: node.data.id, + type: ConnectionLineType.Bezier, + animated: true, }; - this.initialEdges.push(edge); - } - if (item.children) { - this.buildEdgesArray(item.children, nodeID); - } - }); - } - - public build(settings: Settings): void { - const treeParsed = JSON.parse(JSON.stringify(this.parsedData[0])); - // console.log('settings: ', settings); - const traverse = (node: ParsedDataItem): void => { - let validChildren: ParsedDataItem[] = []; - 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]); + + // Check if the edge already exists before adding + const edgeExists : boolean = edges.some( + edge => edge.source === newEdge.source && edge.target === newEdge.target + ); + + // If edge does not exist, add to our edges array + if (!edgeExists) { + edges.push(newEdge) } } - - // Update children with only valid nodes, and recurse through each node - node.children = validChildren; - node.children.forEach((child) => { - traverse(child); - }); } - traverse(treeParsed); - // Update the viewData state - this.viewData = ([treeParsed]); - console.log('viewData:', this.viewData); - this.buildNodesArray(this.viewData); - this.buildEdgesArray(this.viewData); + ) + } } From 47508b3439e926f3810d2341007319fb9d1dc6b5 Mon Sep 17 00:00:00 2001 From: Francisco Lopez Date: Thu, 18 Jan 2024 22:33:19 -0500 Subject: [PATCH 2/2] removed unused variable --- src/webview/Flow.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/webview/Flow.tsx b/src/webview/Flow.tsx index 270a86f..dae75b5 100644 --- a/src/webview/Flow.tsx +++ b/src/webview/Flow.tsx @@ -13,8 +13,11 @@ import "reactflow/dist/style.css"; import FlowBuilder from "./flowBuilder"; import { Tree } from "../types/tree"; + + + const OverviewFlow = () => { - const reactFlowWrapper = useRef(null); + const initialNodes : Node[] = []; const initialEdges : Edge[] = []; @@ -35,7 +38,7 @@ const OverviewFlow = () => { // Creates our Tree structure flowBuilder.mappedData(data, initialNodes, initialEdges) - + setEdges(initialEdges); setNodes(initialNodes) break;