From e66fd2362dff7536ee7f03d4a89f57291d8cabe9 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Wed, 23 Nov 2022 14:23:01 +0800
Subject: [PATCH] update trace graph

---
 .../related/trace/utils/d3-trace-list.ts      | 40 +++++++++----
 .../related/trace/utils/d3-trace-tree.ts      | 58 +++++++++++++++++--
 2 files changed, 82 insertions(+), 16 deletions(-)

diff --git a/src/views/dashboard/related/trace/utils/d3-trace-list.ts b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
index 40e396e9..f0fa162a 100644
--- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
@@ -186,19 +186,35 @@ export default class ListGraph {
         return label;
       });
     nodeEnter
-      .append("rect")
-      .attr("rx", 2)
-      .attr("ry", 2)
-      .attr("height", 15)
-      .attr("width", 40)
-      .attr("fill", "#e66")
-      .attr("x", 270)
-      .attr("y", -15);
+      .append("circle")
+      .attr("r", 8)
+      .attr("cx", 270)
+      .attr("cy", -5)
+      .attr("fill", "none")
+      .attr("stroke", "#e66")
+      .style("opacity", (d: any) => {
+        // const events = d.data.attachedEvents;
+        const events = [
+          {
+            startTime: "",
+            event: "event",
+            endTime: "",
+            tags: [],
+            summary: [],
+          },
+        ];
+        if (events && events.length) {
+          return 0.5;
+        } else {
+          return 0;
+        }
+      });
     nodeEnter
       .append("text")
-      .attr("x", 272)
-      .attr("y", -4)
-      .attr("fill", "#fff")
+      .attr("x", 267)
+      .attr("y", -1)
+      .attr("fill", "#e66")
+      .style("font-size", "10px")
       .text(() => {
         // const events = d.data.attachedEvents;
         const events = [
@@ -211,7 +227,7 @@ export default class ListGraph {
           },
         ];
         if (events && events.length) {
-          return `events`;
+          return `E`;
         } else {
           return "";
         }
diff --git a/src/views/dashboard/related/trace/utils/d3-trace-tree.ts b/src/views/dashboard/related/trace/utils/d3-trace-tree.ts
index fab33bf8..d3974f86 100644
--- a/src/views/dashboard/related/trace/utils/d3-trace-tree.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-tree.ts
@@ -188,7 +188,57 @@ export default class TraceMap {
       .on("click", function (event: any, d: any) {
         that.handleSelectSpan(d);
       });
-
+    nodeEnter
+      .append("circle")
+      .attr("r", 8)
+      .attr("cy", "-12")
+      .attr("cx", function (d: any) {
+        return d.children || d._children ? -15 : 110;
+      })
+      .attr("fill", "none")
+      .attr("stroke", "#e66")
+      .style("opacity", (d: any) => {
+        // const events = d.data.attachedEvents;
+        const events = [
+          {
+            startTime: "",
+            event: "event",
+            endTime: "",
+            tags: [],
+            summary: [],
+          },
+        ];
+        if (events && events.length) {
+          return 0.5;
+        } else {
+          return 0;
+        }
+      });
+    nodeEnter
+      .append("text")
+      .attr("x", function (d: any) {
+        return d.children || d._children ? -18 : 107;
+      })
+      .attr("dy", "-0.8em")
+      .attr("fill", "#e66")
+      .style("font-size", "10px")
+      .text((d: any) => {
+        // const events = d.data.attachedEvents;
+        const events = [
+          {
+            startTime: "",
+            event: "event",
+            endTime: "",
+            tags: [],
+            summary: [],
+          },
+        ];
+        if (events && events.length) {
+          return `E`;
+        } else {
+          return "";
+        }
+      });
     nodeEnter
       .append("circle")
       .attr("class", "node")
@@ -208,14 +258,14 @@ export default class TraceMap {
       .attr("font-size", 11)
       .attr("dy", "-0.5em")
       .attr("x", function (d: any) {
-        return d.children || d._children ? -15 : 15;
+        return d.children || d._children ? -45 : 15;
       })
       .attr("text-anchor", function (d: any) {
         return d.children || d._children ? "end" : "start";
       })
       .text((d: any) =>
         d.data.label.length > 19
-          ? (d.data.isError ? "◉ " : "") + d.data.label.slice(0, 19) + "..."
+          ? (d.data.isError ? "◉ " : "") + d.data.label.slice(0, 10) + "..."
           : (d.data.isError ? "◉ " : "") + d.data.label
       )
       .style("fill", (d: any) => (!d.data.isError ? "#3d444f" : "#E54C17"));
@@ -223,7 +273,7 @@ export default class TraceMap {
       .append("text")
       .attr("class", "node-text")
       .attr("x", function (d: any) {
-        return d.children || d._children ? -15 : 15;
+        return d.children || d._children ? -45 : 15;
       })
       .attr("dy", "1em")
       .attr("fill", "#bbb")