feat: sort nodes

src/views/dashboard/related/topology/components/Graph.vue

@@ -23,7 +23,7 @@ limitations under the License. -->
     <svg :width="width - 100" :height="height" style="background-color: #fff">
       <g v-for="(n, index) in tangleLayout.nodes" :key="index">
         <circle class="node" r="18" stroke-width="6" stroke="#72c59f" fill="#fff" :cx="n.x" :cy="n.y" />
-        <text :x="n.x + 10" :y="n.y - n.height / 2 + 5" style="pointer-events: none">{{ n.id }}</text>
+        <text :x="n.x + 10" :y="n.y - n.height / 2 + 5" style="pointer-events: none">{{ n.name }}</text>
       </g>
     </svg>
     <!-- <div class="legend">
@@ -95,8 +95,7 @@ limitations under the License. -->
   import { aggregation } from "@/hooks/useMetricsProcessor";
   import icons from "@/assets/img/icons";
   import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
-  import { constructTangleLayout } from "./utils/layout";
-  import { data } from "./utils/data";
+  import { layout } from "./utils/layout";
 
   /*global Nullable, defineProps */
   const props = defineProps({
@@ -151,9 +150,9 @@ limitations under the License. -->
     if (resp && resp.errors) {
       ElMessage.error(resp.errors);
     }
+    topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
     topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []);
     topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []);
-    topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
     // window.addEventListener("resize", resize);
     // svg.value = d3.select(chart.value).append("svg").attr("class", "topo-svg");
     await initLegendMetrics();
@@ -161,22 +160,42 @@ limitations under the License. -->
     // await init();
     // update();
     // setNodeTools(settings.value.nodeDashboard);
-    draw();
   });
   function initData() {
     const levels = [];
-    console.log(topologyStore.nodes);
-    // for (const n of topologyStore.nodes) {
-    //   if (n.type === "USER") {
-    //     levels[0] = n;
-    //   }
-    // }
-    const nodes = topologyStore.nodes.sort((a: any, b: any) => b.service_cpm - a.service_cpm);
-  }
-
-  function draw() {
+    const nodes = topologyStore.nodes.sort(
+      (a: { service_cpm: number }, b: { service_cpm: number }) => b.service_cpm - a.service_cpm,
+    );
+    const index = nodes.findIndex((n: Node) => n.type === "USER") || 0;
+    levels.push([nodes[index]]);
+    nodes.splice(index, 1);
+    for (const level of levels) {
+      const a = [];
+      for (const l of level) {
+        for (const n of topologyStore.calls) {
+          if (n.target === l.id) {
+            const i = nodes.findIndex((d: Node) => d.id === n.source);
+            if (i > -1) {
+              a.push(nodes[i]);
+              nodes.splice(i, 1);
+            }
+          }
+          if (n.source === l.id) {
+            const i = nodes.findIndex((d: Node) => d.id === n.target);
+            if (i > -1) {
+              a.push(nodes[i]);
+              nodes.splice(i, 1);
+            }
+          }
+        }
+      }
+      if (a.length) {
+        levels.push(a);
+      }
+    }
+    console.log(levels);
     const options = {};
-    tangleLayout.value = constructTangleLayout(data, options);
+    tangleLayout.value = layout(levels, options);
   }
 
   async function init() {

src/views/dashboard/related/topology/components/utils/data.ts

@@ -1,78 +0,0 @@
-export const data = [
-  [{ id: "Chaos" }],
-  [{ id: "Gaea", parents: ["Chaos"] }, { id: "Uranus" }],
-  [
-    { id: "Oceanus", parents: ["Gaea", "Uranus"] },
-    { id: "Thethys", parents: ["Gaea", "Uranus"] },
-    { id: "Pontus" },
-    { id: "Rhea", parents: ["Gaea", "Uranus"] },
-    { id: "Cronus", parents: ["Gaea", "Uranus"] },
-    { id: "Coeus", parents: ["Gaea", "Uranus"] },
-    { id: "Phoebe", parents: ["Gaea", "Uranus"] },
-    { id: "Crius", parents: ["Gaea", "Uranus"] },
-    { id: "Hyperion", parents: ["Gaea", "Uranus"] },
-    { id: "Iapetus", parents: ["Gaea", "Uranus"] },
-    { id: "Thea", parents: ["Gaea", "Uranus"] },
-    { id: "Themis", parents: ["Gaea", "Uranus"] },
-    { id: "Mnemosyne", parents: ["Gaea", "Uranus"] },
-  ],
-  [
-    { id: "Doris", parents: ["Oceanus", "Thethys"] },
-    { id: "Neures", parents: ["Pontus", "Gaea"] },
-    { id: "Dionne" },
-    { id: "Demeter", parents: ["Rhea", "Cronus"] },
-    { id: "Hades", parents: ["Rhea", "Cronus"] },
-    { id: "Hera", parents: ["Rhea", "Cronus"] },
-    { id: "Alcmene" },
-    { id: "Zeus", parents: ["Rhea", "Cronus"] },
-    { id: "Eris" },
-    { id: "Leto", parents: ["Coeus", "Phoebe"] },
-    { id: "Amphitrite" },
-    { id: "Medusa" },
-    { id: "Poseidon", parents: ["Rhea", "Cronus"] },
-    { id: "Hestia", parents: ["Rhea", "Cronus"] },
-  ],
-  [
-    { id: "Thetis", parents: ["Doris", "Neures"] },
-    { id: "Peleus" },
-    { id: "Anchises" },
-    { id: "Adonis" },
-    { id: "Aphrodite", parents: ["Zeus", "Dionne"] },
-    { id: "Persephone", parents: ["Zeus", "Demeter"] },
-    { id: "Ares", parents: ["Zeus", "Hera"] },
-    { id: "Hephaestus", parents: ["Zeus", "Hera"] },
-    { id: "Hebe", parents: ["Zeus", "Hera"] },
-    { id: "Hercules", parents: ["Zeus", "Alcmene"] },
-    { id: "Megara" },
-    { id: "Deianira" },
-    { id: "Eileithya", parents: ["Zeus", "Hera"] },
-    { id: "Ate", parents: ["Zeus", "Eris"] },
-    { id: "Leda" },
-    { id: "Athena", parents: ["Zeus"] },
-    { id: "Apollo", parents: ["Zeus", "Leto"] },
-    { id: "Artemis", parents: ["Zeus", "Leto"] },
-    { id: "Triton", parents: ["Poseidon", "Amphitrite"] },
-    { id: "Pegasus", parents: ["Poseidon", "Medusa"] },
-    { id: "Orion", parents: ["Poseidon"] },
-    { id: "Polyphemus", parents: ["Poseidon"] },
-  ],
-  [
-    { id: "Deidamia" },
-    { id: "Achilles", parents: ["Peleus", "Thetis"] },
-    { id: "Creusa" },
-    { id: "Aeneas", parents: ["Anchises", "Aphrodite"] },
-    { id: "Lavinia" },
-    { id: "Eros", parents: ["Hephaestus", "Aphrodite"] },
-    { id: "Helen", parents: ["Leda", "Zeus"] },
-    { id: "Menelaus" },
-    { id: "Polydueces", parents: ["Leda", "Zeus"] },
-  ],
-  [
-    { id: "Andromache" },
-    { id: "Neoptolemus", parents: ["Deidamia", "Achilles"] },
-    { id: "Aeneas(2)", parents: ["Creusa", "Aeneas"] },
-    { id: "Pompilius", parents: ["Creusa", "Aeneas"] },
-    { id: "Iulus", parents: ["Lavinia", "Aeneas"] },
-    { id: "Hermione", parents: ["Helen", "Menelaus"] },
-  ],
-];

src/views/dashboard/related/topology/components/utils/layout.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import * as d3 from "d3";
-export function constructTangleLayout(levels: any, options: any = {}) {
+export function layout(levels: any, options: any = {}) {
   // precompute level depth
   levels.forEach((l: any, i: any) => l.forEach((n: any) => (n.level = i)));