From b05733b602b72cb1abfef3027934c613b3f372d0 Mon Sep 17 00:00:00 2001 From: Michael Quigley Date: Wed, 21 Dec 2022 15:08:24 -0500 Subject: [PATCH] better merge algorithm (#107) --- ui/src/console/visualizer/Network.js | 2 +- ui/src/console/visualizer/Visualizer.js | 2 +- ui/src/console/visualizer/graph.js | 26 ++++++++++++------------- 3 files changed, 14 insertions(+), 16 deletions(-) diff --git a/ui/src/console/visualizer/Network.js b/ui/src/console/visualizer/Network.js index 349c856e..d001388d 100644 --- a/ui/src/console/visualizer/Network.js +++ b/ui/src/console/visualizer/Network.js @@ -11,7 +11,7 @@ const Network = (props) => { useEffect(() => { const fg = targetRef.current; - fg.d3Force('collide', d3.forceCollide(32)); + fg.d3Force('collide', d3.forceCollide(22)); }, []); const paintNode = (node, ctx) => { diff --git a/ui/src/console/visualizer/Visualizer.js b/ui/src/console/visualizer/Visualizer.js index 559b19fe..2181aa86 100644 --- a/ui/src/console/visualizer/Visualizer.js +++ b/ui/src/console/visualizer/Visualizer.js @@ -8,7 +8,7 @@ const Visualizer = (props) => { useEffect(() => { setNetworkGraph(mergeGraph(networkGraph, props.overview)); - }, [props.overview]); + }, [props]); // fgRef to access force graph controls from this component let fgRef = () => { }; diff --git a/ui/src/console/visualizer/graph.js b/ui/src/console/visualizer/graph.js index 2e743973..a93bd52c 100644 --- a/ui/src/console/visualizer/graph.js +++ b/ui/src/console/visualizer/graph.js @@ -1,10 +1,10 @@ export const mergeGraph = (oldGraph, newOverview) => { - let graph = { + let newGraph = { nodes: [], links: [] } newOverview.forEach(env => { - graph.nodes.push({ + newGraph.nodes.push({ id: env.environment.zId, label: env.environment.description, type: "environment" @@ -15,13 +15,13 @@ export const mergeGraph = (oldGraph, newOverview) => { if(svc.backendProxyEndpoint !== "") { svcLabel = svc.backendProxyEndpoint; } - graph.nodes.push({ + newGraph.nodes.push({ id: svc.token, label: svcLabel, type: "service", val: 10 }); - graph.links.push({ + newGraph.links.push({ target: env.environment.zId, source: svc.token, color: "#777" @@ -29,14 +29,12 @@ export const mergeGraph = (oldGraph, newOverview) => { }); } }); - graph.nodes.forEach(newNode => { - let found = oldGraph.nodes.find(oldNode => oldNode.id === newNode.id); - if(found) { - newNode.vx = found.vx; - newNode.vy = found.vy; - newNode.x = found.x; - newNode.y = found.y; - } - }) - return graph; + // we want to preserve nodes that exist in the new graph, and remove those that don't. + oldGraph.nodes = oldGraph.nodes.filter(oldNode => newGraph.nodes.find(newNode => newNode.id === oldNode.id)); + // and then do the opposite; add any nodes that are in newGraph that are missing from oldGraph. + oldGraph.nodes.push(...newGraph.nodes.filter(newNode => !oldGraph.nodes.find(oldNode => oldNode.id === newNode.id))); + return { + nodes: oldGraph.nodes, + links: newGraph.links, + }; }; \ No newline at end of file