From 7aef327d2e36d34337bd1bcff0b137c9365a5166 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Mon, 22 Jan 2024 22:07:03 +0800 Subject: [PATCH] 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 +- .../dashboard/related/trace/TraceList.vue | 5 ++-- .../trace/components/D3Graph/Index.vue | 19 ++++++++---- .../related/trace/utils/d3-trace-list.ts | 12 +------- .../related/trace/utils/d3-trace-tree.ts | 12 +------- 7 files changed, 50 insertions(+), 34 deletions(-) create mode 100644 src/utils/debounce.ts 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; } 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>([]); const tree = ref>(null); const traceGraph = ref>(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;