This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 7aef327d fix: resizing window causes the trace graph to display
incorrectly (#367)
7aef327d is described below
commit 7aef327d2e36d34337bd1bcff0b137c9365a5166
Author: Fine0830 <[email protected]>
AuthorDate: Mon Jan 22 22:07:03 2024 +0800
fix: resizing window causes the trace graph to display incorrectly (#367)
---
src/utils/debounce.ts | 29 ++++++++++++++++++++++
src/views/dashboard/controls/Trace.vue | 4 +--
src/views/dashboard/related/trace/Detail.vue | 3 +--
src/views/dashboard/related/trace/TraceList.vue | 5 ++--
.../related/trace/components/D3Graph/Index.vue | 19 +++++++++-----
.../dashboard/related/trace/utils/d3-trace-list.ts | 12 +--------
.../dashboard/related/trace/utils/d3-trace-tree.ts | 12 +--------
7 files changed, 50 insertions(+), 34 deletions(-)
diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts
new file mode 100644
index 00000000..83cc8b0f
--- /dev/null
+++ b/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);
+ };
+}
diff --git a/src/views/dashboard/controls/Trace.vue
b/src/views/dashboard/controls/Trace.vue
index d717b496..4daa614b 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/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>
diff --git a/src/views/dashboard/related/trace/Detail.vue
b/src/views/dashboard/related/trace/Detail.vue
index f58f80fc..c5c1ea2a 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/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 {
diff --git a/src/views/dashboard/related/trace/TraceList.vue
b/src/views/dashboard/related/trace/TraceList.vue
index 2ec6016d..6b2ca76a 100644
--- a/src/views/dashboard/related/trace/TraceList.vue
+++ b/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 {
diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue
b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
index f848f8c2..c96c04b7 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue
+++ b/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,
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 3d738832..ac244e48 100644
--- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts
+++ b/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);
- }
}
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 e7001ac2..9647e627 100644
--- a/src/views/dashboard/related/trace/utils/d3-trace-tree.ts
+++ b/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;
