feat: update layout

src/types/topology.d.ts

@@ -46,6 +46,7 @@ export interface Node {
   layer?: string;
   serviceName?: string;
   height?: number;
+  width?: number;
   x?: number;
   y?: number;
   level?: number;

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

@@ -37,7 +37,7 @@ limitations under the License. -->
         <text
           class="node-text"
           :x="n.x - (Math.min(n.name.length, 20) * 6) / 2 + 6"
-          :y="n.y + n.height + 8"
+          :y="n.y + n.width + 8"
           style="pointer-events: none"
         >
           {{ n.name.length > 20 ? `${n.name.substring(0, 20)}...` : n.name }}
@@ -78,7 +78,7 @@ limitations under the License. -->
   import type { Node, Call } from "@/types/topology";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import icons from "@/assets/img/icons";
-  import { layout, changeNode, computeLevels } from "./utils/layout";
+  import { changeNode, computeLevels, hierarchy } from "./utils/layout";
   import zoom from "@/views/dashboard/related/components/utils/zoom";
 
   /*global Nullable, defineProps */
@@ -110,7 +110,7 @@ limitations under the License. -->
   const graphWidth = ref<number>(100);
   const currentNode = ref<Nullable<Node>>(null);
   const diff = computed(() => [(width.value - graphWidth.value - 120) / 2, 0]);
-  const radius = 8;
+  const radius = 4;
 
   async function init() {
     const dom = document.querySelector(".hierarchy-related")?.getBoundingClientRect() || {
@@ -129,7 +129,7 @@ limitations under the License. -->
   function draw() {
     const levels = computeLevels(props.calls, props.nodes, []);
 
-    topologyLayout.value = layout(levels, props.calls, radius);
+    topologyLayout.value = hierarchy(levels, props.calls, radius);
     graphWidth.value = topologyLayout.value.layout.width;
     const drag: any = d3.drag().on("drag", (d: { x: number; y: number }) => {
       topologyLayout.value.calls = changeNode(d, currentNode.value, topologyLayout.value, radius);

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

@@ -227,3 +227,46 @@ export function changeNode(d: { x: number; y: number }, currentNode: Nullable<No
   }
   return computeCallPos(layout.calls, radius);
 }
+export function hierarchy(levels: Node[][], calls: Call[], radius: number) {
+  // precompute level depth
+  console.log(levels);
+  levels.forEach((l: Node[], i: number) => l.forEach((n: any) => n && (n.level = i)));
+
+  const nodes: Node[] = levels.reduce((a, x) => a.concat(x), []);
+  // layout
+  const padding = 30;
+  const node_height = 120;
+  const node_width = 100;
+  const bundle_width = 14;
+  const metro_d = 4;
+  for (const n of nodes) {
+    n.width = 5 * metro_d;
+  }
+
+  let y_offset = padding;
+  let x_offset = 0;
+  for (const level of levels) {
+    x_offset = 0;
+    y_offset += 5 * bundle_width;
+    for (const l of level) {
+      const n: any = l;
+      for (const call of calls) {
+        if (call.source === n.id) {
+          call.sourceObj = n;
+        }
+        if (call.target === n.id) {
+          call.targetObj = n;
+        }
+      }
+      n.x = node_width + x_offset + n.width / 2;
+      n.y = n.level * node_height + y_offset;
+      x_offset += node_height + n.width;
+    }
+  }
+  const layout = {
+    width: d3.max(nodes as any, (n: { x: number }) => n.x) || 0 + node_width + 2 * padding,
+    height: d3.max(nodes as any, (n: { y: number }) => n.y) || 0 + node_height / 2 + 2 * padding,
+  };
+
+  return { nodes, layout, calls: computeCallPos(calls, radius) };
+}