update

src/views/dashboard/related/trace/components/D3Graph/Index.vue

@@ -17,7 +17,7 @@ limitations under the License. -->
   <div ref="traceGraph" class="d3-graph"></div>
   <div id="action-box">
     <div @click="showDetail = true">Span Details</div>
-    <div v-for="span in parentSpans" :key="span.parentSegmentId" @click="viewParentSpan">{{
+    <div v-for="span in parentSpans" :key="span.parentSegmentId" @click="viewParentSpan(span)">{{
       `Parent Span: ${span.parentSegmentId}`
     }}</div>
   </div>
@@ -116,8 +116,8 @@ limitations under the License. -->
       });
     }
   }
-  function viewParentSpan() {
-    tree.value.highlightParents();
+  function viewParentSpan(span: Recordable) {
+    tree.value.highlightParents(span);
   }
   function traverseTree(node: Recordable, spanId: string, segmentId: string, data: Recordable) {
     if (!node || node.isBroken) {

src/views/dashboard/related/trace/components/List.vue

@@ -55,12 +55,12 @@ limitations under the License. -->
 
   function downloadTrace() {
     const serializer = new XMLSerializer();
-    const svgNode: any = d3.select(".trace-list-dowanload").node();
+    const svgNode: any = d3.select(".trace-list").node();
     const source = `<?xml version="1.0" standalone="no"?>\r\n${serializer.serializeToString(svgNode)}`;
     const canvas = document.createElement("canvas");
     const context: any = canvas.getContext("2d");
-    canvas.width = (d3.select(".trace-list-dowanload") as Recordable)._groups[0][0].clientWidth;
-    canvas.height = (d3.select(".trace-list-dowanload") as Recordable)._groups[0][0].clientHeight;
+    canvas.width = (d3.select(".trace-list") as Recordable)._groups[0][0].clientWidth;
+    canvas.height = (d3.select(".trace-list") as Recordable)._groups[0][0].clientHeight;
     context.fillStyle = appStore.theme === Themes.Dark ? "#212224" : `#fff`;
     context.fillRect(0, 0, canvas.width, canvas.height);
     const image = new Image();

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

@@ -48,11 +48,11 @@ export default class ListGraph {
     this.el = el;
     this.width = el.getBoundingClientRect().width - 10;
     this.height = el.getBoundingClientRect().height - 10;
-    d3.select(`.${this.el?.className} .trace-list-dowanload`).remove();
+    d3.select(`.${this.el?.className} .trace-list`).remove();
     this.svg = d3
       .select(this.el)
       .append("svg")
-      .attr("class", "trace-list-dowanload")
+      .attr("class", "trace-list")
       .attr("width", this.width > 0 ? this.width : 10)
       .attr("height", this.height > 0 ? this.height : 10)
       .attr("transform", `translate(-5, 0)`);
@@ -118,10 +118,6 @@ export default class ListGraph {
   }
   draw(callback: Function) {
     this.update(this.root, callback);
-    // d3.select("body").on("click", function (event) {
-    //   if (event.target.closest("#action-box")) return;
-    //   d3.select("#action-box").style("display", "none");
-    // });
   }
   click(d: Recordable, scope: Recordable) {
     if (!d.data.type) return;
@@ -172,7 +168,7 @@ export default class ListGraph {
         d3.select("#action-box")
           .style("display", "block")
           .style("left", `${event.pageX - 70}px`)
-          .style("top", `${event.pageY - 100}px`);
+          .style("top", `${event.pageY + 30}px`);
         t.selectedNode = d3.select(this);
         if (t.handleSelectSpan) {
           t.handleSelectSpan(d);
@@ -407,38 +403,37 @@ export default class ListGraph {
       callback();
     }
   }
-  highlightParents() {
-    if (!this.selectedNode) {
+  highlightParents(span: Recordable) {
+    if (!span) {
       return;
     }
     const nodes = this.root.descendants().map((node: { id: number }) => {
       d3.select(`#list-node-${node.id}`).classed("highlightedParent", false);
       return node;
     });
-    const selectedNode = this.selectedNode.datum();
-    const parentSpans = selectedNode.data.refs.map((d: Recordable) => d);
-    if (selectedNode.data?.parentSpanId !== -1) {
-      parentSpans.push({
-        parentSegmentId: selectedNode.data.segmentId,
-        parentSpanId: selectedNode.data.parentSpanId,
-        traceId: selectedNode.data.traceId,
-      });
-    }
-    const parents = parentSpans.map((d: Recordable) => {
-      return nodes.find(
-        (node: Recordable) =>
-          d.parentSpanId === node.data.spanId &&
-          d.parentSegmentId === node.data.segmentId &&
-          d.traceId === node.data.traceId,
-      );
-    });
-    for (const node of parents) {
-      if (node) {
-        d3.select(`#list-node-${node.id}`).classed("highlightedParent", true);
-      }
+    const parentSpan = nodes.find(
+      (node: Recordable) =>
+        span.parentSpanId === node.data.spanId &&
+        span.parentSegmentId === node.data.segmentId &&
+        span.traceId === node.data.traceId,
+    );
+    if (parentSpan) {
+      d3.select(`#list-node-${parentSpan.id}`).classed("highlightedParent", true);
     }
     d3.select("#action-box").style("display", "none");
     this.selectedNode.classed("highlighted", false);
+    if (!parentSpan) return;
+    const container = document.querySelector(".trace-chart .charts");
+    const containerRect = container?.getBoundingClientRect();
+    if (!containerRect) return;
+    const targetElement = document.querySelector(`#list-node-${parentSpan.id}`);
+    if (!targetElement) return;
+    const targetRect = targetElement.getBoundingClientRect();
+    container?.scrollTo({
+      left: targetRect.left - containerRect.left + container?.scrollLeft,
+      top: targetRect.top - containerRect.top + container?.scrollTop - 100,
+      behavior: "smooth",
+    });
   }
   visDate(date: number, pattern = "YYYY-MM-DD HH:mm:ss:SSS") {
     return dayjs(date).format(pattern);