add action box

src/types/trace.d.ts

@@ -50,7 +50,7 @@ export interface Span {
   refs?: Ref[];
 }
 export type Ref = {
-  type: string;
+  type?: string;
   parentSegmentId: string;
   parentSpanId: number;
   traceId: string;
@@ -60,13 +60,6 @@ export interface log {
   data: Map<string, string>;
 }
 
-export interface Ref {
-  traceId: string;
-  parentSegmentId: string;
-  parentSpanId: number;
-  type: string;
-}
-
 export interface StatisticsSpan {
   groupRef: StatisticsGroupRef;
   maxTime: number;

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

@@ -15,6 +15,10 @@ limitations under the License. -->
     <Icon iconName="spinner" size="sm" />
   </div>
   <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">{{ `Parent Span: ${span.parentSegmentId}` }}</div>
+  </div>
   <el-dialog v-model="showDetail" :destroy-on-close="true" @closed="showDetail = false" v-if="currentSpan?.segmentId">
     <SpanDetail :currentSpan="currentSpan" />
   </el-dialog>
@@ -46,6 +50,7 @@ limitations under the License. -->
   const refSpans = ref<Array<Ref>>([]);
   const tree = ref<Nullable<any>>(null);
   const traceGraph = ref<Nullable<HTMLDivElement>>(null);
+  const parentSpans = ref<Array<Ref>>([]);
   const debounceFunc = debounce(draw, 500);
 
   defineExpose({
@@ -93,7 +98,15 @@ limitations under the License. -->
   }
   function handleSelectSpan(i: Recordable) {
     currentSpan.value = i.data;
-    showDetail.value = true;
+    parentSpans.value = currentSpan.value?.refs?.filter((d) => d) || [];
+    if (currentSpan.value?.parentSpanId !== -1) {
+      parentSpans.value.push({
+        parentSegmentId: currentSpan.value?.segmentId || "",
+        parentSpanId: currentSpan.value?.parentSpanId || NaN,
+        traceId: currentSpan.value?.traceId || "",
+      });
+    }
+    // showDetail.value = true;
   }
   function traverseTree(node: Recordable, spanId: string, segmentId: string, data: Recordable) {
     if (!node || node.isBroken) {
@@ -396,4 +409,27 @@ limitations under the License. -->
     font-weight: bold;
     fill: #409eff;
   }
+
+  #action-box {
+    position: absolute;
+    color: $font-color;
+    cursor: pointer;
+    border: var(--sw-topology-border);
+    border-radius: 3px;
+    background-color: $theme-background;
+    padding: 10px 0;
+    display: none;
+
+    div {
+      height: 30px;
+      line-height: 30px;
+      text-align: left;
+      padding: 0 15px;
+    }
+
+    div:hover {
+      color: $active-color;
+      background-color: $popper-hover-bg-color;
+    }
+  }
 </style>

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

@@ -117,6 +117,10 @@ 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;
@@ -155,9 +159,14 @@ export default class ListGraph {
         event.stopPropagation();
         if (t.selectedNode) {
           t.selectedNode.classed("highlighted", false);
+          d3.select("#action-box").style("display", "none");
         }
         if (t.selectedNode?.datum().id !== d.id) {
           d3.select(this).classed("highlighted", true);
+          d3.select("#action-box")
+            .style("display", "block")
+            .style("left", `${event.pageX - 70}px`)
+            .style("top", `${event.pageY - 100}px`);
         }
         t.selectedNode = d3.select(this);
         if (t.handleSelectSpan) {