update

src/store/modules/trace.ts

@@ -176,7 +176,21 @@ export const traceStore = defineStore({
         return res.data;
       }
       const data = res.data.data.trace.spans;
-
+      data[4].attachedEvents = [
+        {
+          startTime: {
+            seconds: 1669102205296,
+            nanos: 1669102205296,
+          },
+          event: "event",
+          endTime: {
+            seconds: 1669102212791,
+            nanos: 1669102212791,
+          },
+          tags: [{ key: "test", value: "test" }],
+          summary: [{ key: "test", value: 123 }],
+        },
+      ];
       this.setTraceSpans(data || []);
       return res.data;
     },

src/views/dashboard/related/trace/utils/d3-trace-list.ts

@@ -180,15 +180,22 @@ export default class ListGraph {
           return "";
         }
         const label =
-          d.data.label.length > 35
+          d.data.label.length > 30
-            ? `${d.data.label.slice(0, 35)}...`
+            ? `${d.data.label.slice(0, 30)}...`
             : `${d.data.label}`;
         return label;
       });
     nodeEnter
       .append("circle")
-      .attr("r", 8)
+      .attr("r", 10)
-      .attr("cx", 270)
+      .attr("cx", (d: any) => {
+        const events = d.data.attachedEvents;
+        if (events && events.length > 9) {
+          return 272;
+        } else {
+          return 270;
+        }
+      })
       .attr("cy", -5)
       .attr("fill", "none")
       .attr("stroke", "#e66")
@@ -209,7 +216,7 @@ export default class ListGraph {
       .text((d: any) => {
         const events = d.data.attachedEvents;
         if (events && events.length) {
-          return `E`;
+          return `${events.length}`;
         } else {
           return "";
         }

src/views/dashboard/related/trace/utils/d3-trace-tree.ts

@@ -208,7 +208,10 @@ export default class TraceMap {
     nodeEnter
       .append("text")
       .attr("x", function (d: any) {
-        return d.children || d._children ? -18 : 107;
+        const events = d.data.attachedEvents || [];
+        let p = d.children || d._children ? -18 : 107;
+        p = events.length > 9 ? p - 2 : p;
+        return p;
       })
       .attr("dy", "-0.8em")
       .attr("fill", "#e66")
@@ -216,7 +219,7 @@ export default class TraceMap {
       .text((d: any) => {
         const events = d.data.attachedEvents;
         if (events && events.length) {
-          return `E`;
+          return `${events.length}`;
         } else {
           return "";
         }