fix: resizing window causes the trace graph to display incorrectly (#367)

src/utils/debounce.ts

@@ -0,0 +1,29 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+
+export function debounce(callback: Function, dur: number) {
+  let timer: any;
+
+  return function () {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(function () {
+      callback();
+    }, dur);
+  };
+}

src/views/dashboard/controls/Trace.vue

@@ -81,7 +81,7 @@ limitations under the License. -->
     padding: 10px;
     font-size: $font-size-smaller;
     border-bottom: 1px solid $border-color;
-    min-width: 1200px;
+    min-width: 1000px;
   }
 
   .tools {
@@ -101,6 +101,6 @@ limitations under the License. -->
     min-height: calc(100% - 150px);
     width: 100%;
     overflow: auto;
-    min-width: 1200px;
+    min-width: 1000px;
   }
 </style>

src/views/dashboard/related/trace/Detail.vue

@@ -172,9 +172,8 @@ limitations under the License. -->
   }
 
   .trace-chart {
-    height: calc(100% - 100px);
+    height: calc(100% - 95px);
     overflow: auto;
-    padding-bottom: 20px;
   }
 
   .trace-detail-wrapper {

src/views/dashboard/related/trace/TraceList.vue

@@ -159,6 +159,7 @@ limitations under the License. -->
 
   .selectors {
     margin: 2px 2px 0 0;
+    width: 120px;
   }
 
   .trace-t-wrapper {
@@ -182,11 +183,11 @@ limitations under the License. -->
   }
 
   .trace-t {
-    width: 420px;
+    width: 300px;
   }
 
   .list {
-    width: 300px;
+    width: 280px;
   }
 
   .trace-tr {

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

@@ -29,6 +29,7 @@ limitations under the License. -->
   import type { Span, Ref } from "@/types/trace";
   import SpanDetail from "./SpanDetail.vue";
   import { useAppStoreWithOut } from "@/store/modules/app";
+  import { debounce } from "@/utils/debounce";
 
   /* global defineProps, Nullable, defineExpose,Recordable*/
   const props = defineProps({
@@ -45,6 +46,8 @@ limitations under the License. -->
   const refSpans = ref<Array<Ref>>([]);
   const tree = ref<Nullable<any>>(null);
   const traceGraph = ref<Nullable<HTMLDivElement>>(null);
+  const debounceFunc = debounce(draw, 500);
+
   defineExpose({
     tree,
   });
@@ -55,6 +58,15 @@ limitations under the License. -->
       loading.value = false;
       return;
     }
+    draw();
+    loading.value = false;
+    window.addEventListener("resize", debounceFunc);
+  });
+
+  function draw() {
+    if (!traceGraph.value) {
+      return;
+    }
     if (props.type === "List") {
       tree.value = new ListGraph(traceGraph.value, handleSelectSpan);
       tree.value.init({ label: "TRACE_ROOT", children: segmentId.value }, props.data, fixSpansSize.value);
@@ -63,11 +75,6 @@ limitations under the License. -->
       tree.value = new TreeGraph(traceGraph.value, handleSelectSpan);
       tree.value.init({ label: `${props.traceId}`, children: segmentId.value }, props.data);
     }
-    loading.value = false;
-    window.addEventListener("resize", resize);
-  });
-  function resize() {
-    tree.value.resize();
   }
   function handleSelectSpan(i: Recordable) {
     currentSpan.value = i.data;
@@ -273,7 +280,7 @@ limitations under the License. -->
   }
   onBeforeUnmount(() => {
     d3.selectAll(".d3-tip").remove();
-    window.removeEventListener("resize", resize);
+    window.removeEventListener("resize", debounceFunc);
   });
   watch(
     () => props.data,

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

@@ -47,6 +47,7 @@ export default class ListGraph {
     this.el = el;
     this.width = el.getBoundingClientRect().width - 10;
     this.height = el.getBoundingClientRect().height - 10;
+    d3.select(".trace-list-dowanload").remove();
     this.svg = d3
       .select(this.el)
       .append("svg")
@@ -384,15 +385,4 @@ export default class ListGraph {
   visDate(date: number, pattern = "YYYY-MM-DD HH:mm:ss:SSS") {
     return dayjs(date).format(pattern);
   }
-  resize() {
-    if (!this.el) {
-      return;
-    }
-    this.width = this.el.getBoundingClientRect().width - 20;
-    this.height = this.el.getBoundingClientRect().height - 10;
-    this.svg.attr("width", this.width).attr("height", this.height);
-    this.svg.select("g").attr("transform", () => `translate(160, 0)`);
-    const transform = d3.zoomTransform(this.svg).translate(0, 0);
-    d3.zoom().transform(this.svg, transform);
-  }
 }

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

@@ -55,6 +55,7 @@ export default class TraceMap {
     this.topChild = [];
     this.width = el.clientWidth - 20;
     this.height = el.clientHeight - 30;
+    d3.select(".d3-trace-tree").remove();
     this.body = d3
       .select(this.el)
       .append("svg")
@@ -78,17 +79,6 @@ export default class TraceMap {
     this.svg = this.body.append("g").attr("transform", () => `translate(120, 0)`);
     this.svg.call(this.tip);
   }
-  resize() {
-    if (!this.el) {
-      return;
-    }
-    this.width = this.el.clientWidth;
-    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)`);
-    const transform = d3.zoomTransform(this.body).translate(0, 0);
-    d3.zoom().transform(this.body, transform);
-  }
   init(data: Recordable, row: Recordable) {
     this.treemap = d3.tree().size([row.length * 35, this.width]);
     this.row = row;