diff --git a/packages/client/src/composables/graph.ts b/packages/client/src/composables/graph.ts index 61f7f7474..28f3091d5 100644 --- a/packages/client/src/composables/graph.ts +++ b/packages/client/src/composables/graph.ts @@ -138,6 +138,17 @@ const graphNodesTotalMap = new Map() const modulesMap = new Map() const moduleReferences = new Map() +const uniqueNodes = (nodes: Node[]) => nodes.reduce((prev, node) => { + if (!prev.some(n => n.id === node.id)) + prev.push(node) + return prev +}, []) +const uniqueEdges = (edges: Edge[]) => edges.reduce((prev, edge) => { + if (!prev.some(e => e.from === edge.from && e.to === edge.to)) + prev.push(edge) + return prev +}, []) + export function cleanupGraphRelatedStates() { graphNodesTotal.value = [] graphNodesTotalMap.clear() @@ -209,8 +220,8 @@ function updateGraph() { } } - graphNodes.add(matchedNodes) - graphEdges.add(matchedEdges) + graphNodes.add(uniqueNodes(matchedNodes)) + graphEdges.add(uniqueEdges(matchedEdges)) } function recursivelyGetNodeByDep(node: SearcherNode[]) { @@ -314,6 +325,8 @@ export function parseGraphRawData(modules: ModuleInfo[], root: string) { edges.push(getEdge(mod.id, dep)) }) const incrementalDeps = uniqueDeps.filter(dep => !nodeData.mod.deps.includes(dep)) + if (!incrementalDeps.length) + return nodeData.mod.deps.push(...incrementalDeps) totalEdges.push(...edges) return @@ -367,8 +380,9 @@ export function parseGraphRawData(modules: ModuleInfo[], root: string) { } }) // set initial data + // nodes has been unique in `modules.forEach` graphNodes.add(totalNode.slice()) - graphEdges.add(totalEdges.slice()) + graphEdges.add(uniqueEdges(totalEdges)) } // #endregion @@ -449,17 +463,23 @@ export function getGraphFilterDataset() { return dataset } -function recursivelyGetGraphNodeData(nodeId: string): GraphNodesTotalData[] { +// max depth is 20 +function recursivelyGetGraphNodeData(nodeId: string, depth = 0): GraphNodesTotalData[] { const node = modulesMap.get(nodeId) - if (!node) + depth += 1 + if (!node || depth > 20) return [] const result = [node] node.mod.deps.forEach((dep) => { const node = modulesMap.get(dep) if (node) - result.push(...recursivelyGetGraphNodeData(node.mod.id)) + result.push(...recursivelyGetGraphNodeData(node.mod.id, depth)) }) // unique result - return Array.from(new Set(result)) + return result.reduce((prev, node) => { + if (!prev.some(n => n.mod.id === node.mod.id)) + prev.push(node) + return prev + }, []) } // #endregion diff --git a/packages/client/src/pages/graph.vue b/packages/client/src/pages/graph.vue index 86c744d8b..873c002ed 100644 --- a/packages/client/src/pages/graph.vue +++ b/packages/client/src/pages/graph.vue @@ -31,6 +31,11 @@ function mountNetwork() { network.on('deselectNode', () => { toggleGraphDrawer(false) }) + + watch(() => graphFilterNodeId.value, (id) => { + if (id) + network.moveTo({ position: { x: 0, y: 0 } }) + }) } onMounted(() => {