From ccdcdea2968321dce77335bff0bde497a78b7caa Mon Sep 17 00:00:00 2001 From: Fine Date: Tue, 8 Apr 2025 14:46:17 +0800 Subject: [PATCH] update tree --- .../trace/components/D3Graph/Index.vue | 12 ++- .../related/trace/utils/d3-trace-list.ts | 1 + .../related/trace/utils/d3-trace-tree.ts | 91 +++++++++---------- 3 files changed, 55 insertions(+), 49 deletions(-) diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue index a04e2280..393f689c 100644 --- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue +++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue @@ -428,12 +428,20 @@ limitations under the License. --> pointer-events: none; } - .trace-node.highlighted .node-text { + .trace-node.highlighted .node-text, + .trace-node.highlightedParent .node-text { font-weight: bold; fill: #409eff; } - .trace-node.highlightedParent .node-text { + .highlightedParent .node { + stroke-width: 4; + fill: var(--font-color); + stroke: var(--font-color); + } + + .trace-node.highlighted .trace-node-text, + .trace-node.highlightedParent .trace-node-text { font-weight: bold; fill: #409eff; } 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 5b44857c..2e801c75 100644 --- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts +++ b/src/views/dashboard/related/trace/utils/d3-trace-list.ts @@ -155,6 +155,7 @@ export default class ListGraph { }) .on("click", function (event: MouseEvent, d: Trace & { id: string }) { event.stopPropagation(); + t.tip.hide(d, this); const hasClass = d3.select(this).classed("highlighted"); if (t.selectedNode) { t.selectedNode.classed("highlighted", false); 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 eab269a0..5b70c974 100644 --- a/src/views/dashboard/related/trace/utils/d3-trace-tree.ts +++ b/src/views/dashboard/related/trace/utils/d3-trace-tree.ts @@ -169,35 +169,6 @@ export default class TraceMap { if (_node.length) { that.timeTip.hide(d, _node[0].children[1]); } - }) - .on("click", function (event: MouseEvent, d: Trace & { id: string }) { - event.stopPropagation(); - const hasClass = d3.select(this).classed("highlighted"); - if (t.selectedNode) { - t.selectedNode.classed("highlighted", false); - d3.select("#trace-action-box").style("display", "none"); - } - if (hasClass) { - t.selectedNode = null; - return; - } - d3.select(this).classed("highlighted", true); - const nodeBox = this.getBoundingClientRect(); - const svgBox = (d3.select(`.${t.el?.className} .trace-list`) as any).node().getBoundingClientRect(); - const offsetX = nodeBox.x - svgBox.x; - const offsetY = nodeBox.y - svgBox.y; - d3.select("#trace-action-box") - .style("display", "block") - .style("left", `${offsetX + 30}px`) - .style("top", `${offsetY + 40}px`); - t.selectedNode = d3.select(this); - if (t.handleSelectSpan) { - t.handleSelectSpan(d); - } - t.root.descendants().map((node: { id: number }) => { - d3.select(`#trace-node-${node.id}`).classed("highlightedParent", false); - return node; - }); }); nodeEnter .append("circle") @@ -237,16 +208,15 @@ export default class TraceMap { }); nodeEnter .append("circle") - .attr("class", "trace-node") - .attr("r", 1e-6) - .style("fill", (d: Recordable) => - d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff", - ) + .attr("class", "node") + .attr("r", 2) .attr("stroke", (d: Recordable) => this.sequentialScale(this.list.indexOf(d.data.serviceCode))) - .attr("stroke-width", 2.5); + .attr("stroke-width", 2.5) + .attr("fill", (d: Recordable) => this.sequentialScale(this.list.indexOf(d.data.serviceCode))); nodeEnter .append("text") + .attr("class", "trace-node-text") .attr("font-size", 11) .attr("dy", "-0.5em") .attr("x", function (d: Recordable) { @@ -260,7 +230,7 @@ export default class TraceMap { ? (d.data.isError ? "◉ " : "") + d.data.label.slice(0, 10) + "..." : (d.data.isError ? "◉ " : "") + d.data.label, ) - .style("fill", (d: Recordable) => + .attr("fill", (d: Recordable) => !d.data.isError ? (appStore.theme === Themes.Dark ? "#eee" : "#3d444f") : "#E54C17", ); nodeEnter @@ -269,15 +239,20 @@ export default class TraceMap { .attr("x", function (d: Recordable) { return d.children || d._children ? -45 : 15; }) - .attr("dy", "1em") + .attr("dy", "1.5em") .attr("fill", appStore.theme === Themes.Dark ? "#888" : "#bbb") .attr("text-anchor", function (d: Recordable) { return d.children || d._children ? "end" : "start"; }) .style("font-size", "10px") - .text( - (d: Recordable) => `${d.data.layer || ""}${d.data.component ? "-" + d.data.component : d.data.component || ""}`, - ); + .text((d: Recordable) => { + const label = d.data.component + ? "-" + (d.data.component.length > 10) + ? d.data.label.slice(0, 10) + "..." + : d.data.component + : ""; + return `${d.data.layer || ""}${label}`; + }); nodeEnter .append("rect") .attr("rx", 1) @@ -318,16 +293,38 @@ export default class TraceMap { return "translate(" + d.y + "," + d.x + ")"; }); nodeUpdate - .select(".trace-node") + .select("circle.node") .attr("r", 5) - .style("fill", (d: Recordable) => - d._children ? this.sequentialScale(this.list.indexOf(d.data.serviceCode)) : "#fff", - ) .attr("cursor", "pointer") - .on("click", (event: any, d: Recordable) => { + .on("click", function (event: MouseEvent, d: Trace & { id: string }) { event.stopPropagation(); - if (d.data.children.length === 0) return; - click(d); + t.tip.hide(d, this); + const hasClass = d3.select(this).classed("highlighted"); + if (t.selectedNode) { + t.selectedNode.classed("highlighted", false); + d3.select("#trace-action-box").style("display", "none"); + } + if (hasClass) { + t.selectedNode = null; + return; + } + d3.select(this).classed("highlighted", true); + const nodeBox = this.getBoundingClientRect(); + const svgBox = (d3.select(`.${t.el?.className} .d3-trace-tree`) as any).node().getBoundingClientRect(); + const offsetX = nodeBox.x - svgBox.x; + const offsetY = nodeBox.y - svgBox.y; + d3.select("#trace-action-box") + .style("display", "block") + .style("left", `${offsetX + 30}px`) + .style("top", `${offsetY + 40}px`); + t.selectedNode = d3.select(this); + if (t.handleSelectSpan) { + t.handleSelectSpan(d); + } + t.root.descendants().map((node: { id: number }) => { + d3.select(`#trace-node-${node.id}`).classed("highlightedParent", false); + return node; + }); }); const nodeExit = node .exit()