From 7cba0647a6082caa0df38b0c83d9cf414c80c583 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Thu, 23 Nov 2023 15:30:53 +0800
Subject: [PATCH] feat: update layout

---
 .../related/topology/components/Graph.vue     | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index 3e732ba4..d38e2c36 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -239,10 +239,9 @@ limitations under the License. -->
     setNodeTools(settings.value.nodeDashboard);
   }
 
-  function draw() {
-    const node = findMostFrequent(topologyStore.calls);
-    const levels = [];
-    const nodes = JSON.parse(JSON.stringify(topologyStore.nodes)).sort((a: Node, b: Node) => {
+  function computeLevels(calls: Call[], nodeList: Node[], levels: any[]) {
+    const node = findMostFrequent(calls);
+    const nodes = JSON.parse(JSON.stringify(nodeList)).sort((a: Node, b: Node) => {
       if (a.name.toLowerCase() < b.name.toLowerCase()) {
         return -1;
       }
@@ -254,15 +253,14 @@ limitations under the License. -->
     const index = nodes.findIndex((n: Node) => n.type === "USER");
     let key = index;
     if (index < 0) {
-      const idx = nodes.findIndex((n: Node) => n.id === node.id);
-      key = idx;
+      key = nodes.findIndex((n: Node) => n.id === node.id);
     }
     levels.push([nodes[key]]);
     nodes.splice(key, 1);
     for (const level of levels) {
       const a = [];
       for (const l of level) {
-        for (const n of topologyStore.calls) {
+        for (const n of calls) {
           if (n.target === l.id) {
             const i = nodes.findIndex((d: Node) => d.id === n.source);
             if (i > -1) {
@@ -283,6 +281,18 @@ limitations under the License. -->
         levels.push(a);
       }
     }
+    if (nodes.length) {
+      const ids = nodes.map((d: Node) => d.id);
+      const links = calls.filter((item: Call) => ids.includes(item.source) || ids.includes(item.target));
+      const list = computeLevels(links, nodes, []);
+      levels = list.map((subArrayA, index) => subArrayA.concat(levels[index]));
+    }
+    return levels;
+  }
+
+  function draw() {
+    const levels = computeLevels(topologyStore.calls, topologyStore.nodes, []);
+
     topologyLayout.value = layout(levels, topologyStore.calls, radius);
     graphWidth.value = topologyLayout.value.layout.width;
     const drag: any = d3.drag().on("drag", (d: { x: number; y: number }) => {