fix: update trace tree

src/locales/lang/en.ts

@@ -90,6 +90,9 @@ const msg = {
   backgroundColors: "Background Colors",
   fontColors: "Font Colors",
   iconTheme: "Icon Theme",
+  default: "Default",
+  topSlow: "Top 5 of slow",
+  topChildren: "Top 5 of children",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",

src/locales/lang/zh.ts

@@ -89,6 +89,9 @@ const msg = {
   backgroundColors: "背景颜色",
   fontColors: "字体颜色",
   iconTheme: "图标主题",
+  default: "默认",
+  topSlow: "迟缓的前5名",
+  topChildren: "小孩数量的前5名",
   showDepth: "展示深度选择器",
   hourTip: "选择小时",
   minuteTip: "选择分钟",

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

@@ -14,7 +14,7 @@ limitations under the License. -->
   <div class="trace-t-loading" v-show="loading">
     <Icon iconName="spinner" size="sm" />
   </div>
-  <div ref="traceGraph"></div>
+  <div ref="traceGraph" class="d3-graph"></div>
 </template>
 <script lang="ts" setup>
 import { ref, watch, onBeforeUnmount, onMounted } from "vue";
@@ -62,7 +62,11 @@ onMounted(() => {
     );
   }
   loading.value = false;
+  window.addEventListener("resize", resize);
 });
+function resize() {
+  tree.value.resize();
+}
 function handleSelectSpan(i: any) {
   currentSpan.value = i.data;
   showDetail.value = true;
@@ -263,6 +267,7 @@ function collapse(d: Span) {
 }
 onBeforeUnmount(() => {
   d3.selectAll(".d3-tip").remove();
+  window.removeEventListener("resize", resize);
 });
 watch(
   () => props.data,
@@ -286,6 +291,10 @@ watch(
 );
 </script>
 <style lang="scss" scoped>
+.d3-graph {
+  height: 100%;
+}
+
 .trace-node .group {
   cursor: pointer;
   fill-opacity: 0;

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

@@ -11,10 +11,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="time-charts">
+  <div class="charts">
     <div>
       <span
-        class="time-charts-item mr-5"
+        class="charts-item mr-5"
         v-for="(i, index) in list"
         :key="index"
         :style="`color:${computedScale(index)}`"
@@ -26,7 +26,7 @@ limitations under the License. -->
         {{ t("exportImage") }}
       </el-button>
     </div>
-    <div class="trace-chart">
+    <div>
       <Graph :data="data" :traceId="traceId" type="List" />
     </div>
   </div>
@@ -56,6 +56,7 @@ function computedScale(i: number) {
     .interpolator(d3.interpolateCool);
   return sequentialScale(i);
 }
+
 function downloadTrace() {
   const serializer = new XMLSerializer();
   const svgNode: any = d3.select(".trace-list-dowanload").node();
@@ -84,14 +85,14 @@ function downloadTrace() {
 }
 </script>
 <style lang="scss" scoped>
-.time-charts {
+.charts {
   overflow: auto;
   padding: 10px;
   height: calc(100% - 95px);
   width: 100%;
 }
 
-.time-charts-item {
+.charts-item {
   display: inline-block;
   padding: 2px 8px;
   border: 1px solid;
@@ -99,10 +100,6 @@ function downloadTrace() {
   border-radius: 4px;
 }
 
-.trace-chart {
-  fill: rgba(0, 0, 0, 0);
-}
-
 .btn {
   float: right;
 }

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

@@ -23,16 +23,18 @@ limitations under the License. -->
         <span>{{ i }}</span>
       </span>
     </div>
-    <div style="padding: 0 30px">
-      <a class="trace-tree-btn mr-10" @click="tree.setDefault()">Default</a>
+    <div style="padding: 10px 0">
+      <a class="trace-tree-btn mr-10" @click="tree.setDefault()">
+        {{ t("default") }}
+      </a>
       <a class="trace-tree-btn mr-10" @click="tree.getTopSlow()">
-        Top 5 of slow
+        {{ t("topSlow") }}
       </a>
       <a class="trace-tree-btn mr-10" @click="tree.getTopChild()">
-        Top 5 of children
+        {{ t("topChildren") }}
       </a>
     </div>
-    <div class="trace-tree" style="height: 100%">
+    <div class="trace-tree">
       <Graph :data="data" :traceId="traceId" type="Tree" />
     </div>
   </div>
@@ -66,6 +68,11 @@ function computedScale(i: number) {
 }
 </script>
 <style lang="scss" scoped>
+.trace-tree {
+  height: 100%;
+  overflow: auto;
+}
+
 .trace-tree-btn {
   display: inline-block;
   border-radius: 4px;
@@ -75,7 +82,7 @@ function computedScale(i: number) {
   font-size: 11px;
 }
 
-.time-charts {
+.trace-tree-charts {
   overflow: auto;
   padding: 10px;
   position: relative;

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

@@ -18,6 +18,7 @@
 import * as d3 from "d3";
 import d3tip from "d3-tip";
 import { Trace, Span } from "@/types/trace";
+import { style } from "d3";
 
 export default class TraceMap {
   private i = 0;
@@ -51,8 +52,8 @@ export default class TraceMap {
     this.i = 0;
     this.topSlow = [];
     this.topChild = [];
-    this.width = el.clientWidth;
-    this.height = el.clientHeight - 28;
+    this.width = el.clientWidth - 20;
+    this.height = el.clientHeight;
     this.body = d3
       .select(this.el)
       .append("svg")
@@ -87,12 +88,10 @@ export default class TraceMap {
     if (!this.el) {
       return;
     }
-    // reset svg size
     this.width = this.el.clientWidth;
-    this.height = this.el.clientHeight - 28;
+    this.height = this.el.clientHeight + 100;
     this.body.attr("width", this.width).attr("height", this.height);
     this.body.select("g").attr("transform", () => `translate(160, 0)`);
-    // reset zoom function for translate
     const transform = d3.zoomTransform(this.body).translate(0, 0);
     d3.zoom().transform(this.body, transform);
   }
@@ -280,8 +279,6 @@ export default class TraceMap {
       .attr("transform", function (d: any) {
         return "translate(" + d.y + "," + d.x + ")";
       });
-
-    // Update the node attributes and style
     nodeUpdate
       .select("circle.node")
       .attr("r", 5)
@@ -295,8 +292,6 @@ export default class TraceMap {
         (d3 as any).event.stopPropagation();
         click(d);
       });
-
-    // Remove any exiting nodes
     const nodeExit = node
       .exit()
       .transition()
@@ -312,7 +307,7 @@ export default class TraceMap {
 
     const link = this.svg
       .selectAll("path.tree-link")
-      .data(links, function (d: any) {
+      .data(links, function (d: { id: string }) {
         return d.id;
       })
       .style("stroke-width", 1.5);
@@ -325,7 +320,9 @@ export default class TraceMap {
         const o = { x: source.x0, y: source.y0 };
         return diagonal(o, o);
       })
-      .style("stroke-width", 1.5);
+      .style("stroke-width", 1.5)
+      .style("fill", "none")
+      .attr("stroke", "rgba(0, 0, 0, 0.1)");
 
     const linkUpdate = linkEnter.merge(link);
     linkUpdate
@@ -334,6 +331,16 @@ export default class TraceMap {
       .attr("d", function (d: any) {
         return diagonal(d, d.parent);
       });
+    link
+      .exit()
+      .transition()
+      .duration(600)
+      .attr("d", function () {
+        const o = { x: source.x, y: source.y };
+        return diagonal(o, o);
+      })
+      .style("stroke-width", 1.5)
+      .remove();
 
     nodes.forEach(function (d: any) {
       d.x0 = d.x;
@@ -398,12 +405,9 @@ export default class TraceMap {
     return d3
       .zoom()
       .scaleExtent([0.3, 10])
-      .on("zoom", () => {
-        g.attr(
-          "transform",
-          `translate(${(d3 as any).event.transform.x + 120},${
-            (d3 as any).event.transform.y
-          })scale(${(d3 as any).event.transform.k})`
+      .on("zoom", (d: any) => {
+        g.attr("transform", d3.zoomTransform(this.svg.node())).attr(
+          `translate(${d.transform.x},${d.transform.y})scale(${d.transform.k})`
         );
       });
   }