feat: update layput

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

@@ -22,23 +22,8 @@ limitations under the License. -->
   >
     <svg :width="width - 100" :height="height" style="background-color: #fff">
       <g v-for="(n, index) in tangleLayout.nodes" :key="index">
-        <path
-          class="selectable node"
-          stroke="black"
-          stroke-width="8"
-          :d="`M${n.x} ${n.y - n.height / 2}
-        L${n.x} ${n.y + n.height / 2}`"
-        />
-        <path
-          class="node"
-          stroke="white"
-          stroke-width="4"
-          :d="`M${n.x} ${n.y - n.height / 2} L${n.x} ${n.y + n.height / 2}`"
-        />
-        <text class="selectable" :x="n.x + 4" :y="n.y - n.height / 2 - 4" stroke="white" stroke-width="2">
-          {{ n.id }}
-        </text>
-        <text :x="n.x + 4" :y="n.y - n.height / 2 - 4" style="pointer-events: none">{{ n.id }}</text>
+        <circle class="node" r="18" stroke-width="2" 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>
       </g>
     </svg>
     <!-- <div class="legend">
@@ -179,15 +164,16 @@ limitations under the License. -->
   });
 
   function draw() {
-    const color = d3.scaleOrdinal(d3.schemeDark2);
     const options = {};
     tangleLayout.value = constructTangleLayout(data, options);
+    console.log(tangleLayout.value);
   }
 
   async function init() {
     tip.value = (d3tip as any)().attr("class", "d3-tip").offset([-8, 0]);
     graph.value = svg.value.append("g").attr("class", "topo-svg-graph").attr("transform", `translate(-100, -100)`);
     graph.value.call(tip.value);
+    console.log(topologyStore.calls);
     simulation.value = simulationInit(d3, topologyStore.nodes, topologyStore.calls, ticked);
     node.value = graph.value.append("g").selectAll(".topo-node");
     link.value = graph.value.append("g").selectAll(".topo-line");

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

@@ -92,21 +92,12 @@ export function constructTangleLayout(levels: any, options: any = {}) {
     n.bundles.forEach((b: any, i: any) => (b.i = i));
   });
 
-  links.forEach((l: any) => {
-    if (l.bundle.links === undefined) {
-      l.bundle.links = [];
-    }
-    l.bundle.links.push(l);
-  });
-
   // layout
-  const padding = 8;
-  const node_height = 22;
-  const node_width = 70;
+  const padding = 30;
+  const node_height = 120;
+  const node_width = 100;
   const bundle_width = 14;
-  const level_y_padding = 16;
   const metro_d = 4;
-  const min_family_height = 22;
 
   options.c ||= 16;
   const c = options.c;
@@ -115,73 +106,21 @@ export function constructTangleLayout(levels: any, options: any = {}) {
   nodes.forEach((n: any) => (n.height = (Math.max(1, n.bundles.length) - 1) * metro_d));
 
   let x_offset = padding;
-  let y_offset = padding;
+  let y_offset = 0;
   levels.forEach((l: any) => {
-    x_offset += l.bundles.length * bundle_width;
-    y_offset += level_y_padding;
+    y_offset = 0;
+    x_offset += 5 * bundle_width;
     l.forEach((n: any) => {
       n.x = n.level * node_width + x_offset;
       n.y = node_height + y_offset + n.height / 2;
-
       y_offset += node_height + n.height;
     });
   });
 
-  let i = 0;
-  levels.forEach((l: any) => {
-    l.bundles.forEach((b: any) => {
-      b.x =
-        (b.parents && d3.max(b.parents, (d: any) => d.x)) ||
-        0 + node_width + (l.bundles.length - 1 - b.i) * bundle_width;
-      b.y = i * node_height;
-    });
-    i += l.length;
-  });
-
-  links.forEach((l: any) => {
-    l.xt = l.target.x;
-    l.yt =
-      l.target.y +
-      l.target.bundles_index[l.bundle.id].i * metro_d -
-      (l.target.bundles.length * metro_d) / 2 +
-      metro_d / 2;
-    l.xb = l.bundle.x;
-    l.yb = l.bundle.y;
-    l.xs = l.source.x;
-    l.ys = l.source.y;
-  });
-
-  // compress vertical space
-  let y_negative_offset = 0;
-  levels.forEach((l: any) => {
-    y_negative_offset +=
-      (-min_family_height + l.bundles &&
-        d3.min(l.bundles, (b: any) => b.links && d3.min(b.links, (link: any) => link.ys - 2 * c - (link.yt + c)))) ||
-      0;
-    l.forEach((n: any) => (n.y -= y_negative_offset));
-  });
-
-  // very ugly, I know
-  links.forEach((l: any) => {
-    l.yt =
-      l.target.y +
-      l.target.bundles_index[l.bundle.id].i * metro_d -
-      (l.target.bundles.length * metro_d) / 2 +
-      metro_d / 2;
-    l.ys = l.source.y;
-    l.c1 = l.source.level - l.target.level > 1 ? Math.min(options.bigc, l.xb - l.xt, l.yb - l.yt) - c : c;
-    l.c2 = c;
-  });
-
   const layout = {
     width: d3.max(nodes, (n: any) => n.x) || 0 + node_width + 2 * padding,
     height: d3.max(nodes, (n: any) => n.y) || 0 + node_height / 2 + 2 * padding,
-    node_height,
-    node_width,
-    bundle_width,
-    level_y_padding,
-    metro_d,
   };
-  console.log({ levels, nodes, nodes_index, links, bundles, layout });
-  return { levels, nodes, nodes_index, links, bundles, layout };
+
+  return { nodes, bundles, layout };
 }