github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-02 14:34:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Fine 2025-04-08 18:11:36 +08:00
parent 82fc788d8c
commit 54a44e93e2
2 changed files with 16 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -115,6 +115,13 @@ export default class ListGraph {
this.root = d3.hierarchy(this.data, (d) => d.children); this.root = d3.hierarchy(this.data, (d) => d.children);
this.root.x0 = 0; this.root.x0 = 0;
this.root.y0 = 0; this.root.y0 = 0;
const t = this;
d3.select("svg.trace-list").on("click", function (event: MouseEvent) {
if (event.target === this) {
d3.select("#trace-action-box").style("display", "none");
t.selectedNode.classed("highlighted", false);
}
});
} }
draw(callback: Function) { draw(callback: Function) {
this.update(this.root, callback); this.update(this.root, callback);
@ -156,15 +163,6 @@ export default class ListGraph {
.on("click", function (event: MouseEvent, d: Trace & { id: string }) { .on("click", function (event: MouseEvent, d: Trace & { id: string }) {
event.stopPropagation(); event.stopPropagation();
t.tip.hide(d, this); 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); d3.select(this).classed("highlighted", true);
const nodeBox = this.getBoundingClientRect(); const nodeBox = this.getBoundingClientRect();
const svgBox = (d3.select(`.${t.el?.className} .trace-list`) as any).node().getBoundingClientRect(); const svgBox = (d3.select(`.${t.el?.className} .trace-list`) as any).node().getBoundingClientRect();

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

@ -130,8 +130,8 @@ export default class TraceMap {
const appStore = useAppStoreWithOut(); const appStore = useAppStoreWithOut();
const that: any = this; const that: any = this;
const treeData = this.treemap(this.root); const treeData = this.treemap(this.root);
const nodes = treeData.descendants(), const nodes = treeData.descendants();
links = treeData.descendants().slice(1); const links = treeData.descendants().slice(1);
nodes.forEach(function (d: Recordable) { nodes.forEach(function (d: Recordable) {
d.y = d.depth * 140; d.y = d.depth * 140;
@ -140,6 +140,12 @@ export default class TraceMap {
const node = this.svg.selectAll("g.trace-node").data(nodes, (d: Recordable) => { const node = this.svg.selectAll("g.trace-node").data(nodes, (d: Recordable) => {
return d.id || (d.id = ++this.i); return d.id || (d.id = ++this.i);
}); });
d3.select("svg.d3-trace-tree").on("click", function (event: MouseEvent) {
if (event.target === this) {
d3.select("#trace-action-box").style("display", "none");
t.selectedNode.classed("highlighted", false);
}
});
const nodeEnter = node const nodeEnter = node
.enter() .enter()
@ -248,9 +254,7 @@ export default class TraceMap {
.style("font-size", "10px") .style("font-size", "10px")
.text((d: Recordable) => { .text((d: Recordable) => {
const label = d.data.component const label = d.data.component
? "-" + (d.data.component.length > 10) ? " - " + (d.data.component.length > 10 ? d.data.label.slice(0, 10) + "..." : d.data.component)
? d.data.label.slice(0, 10) + "..."
: d.data.component
: ""; : "";
return `${d.data.layer || ""}${label}`; return `${d.data.layer || ""}${label}`;
}); });
@ -300,15 +304,6 @@ export default class TraceMap {
.on("click", function (event: MouseEvent, d: Trace & { id: string }) { .on("click", function (event: MouseEvent, d: Trace & { id: string }) {
event.stopPropagation(); event.stopPropagation();
t.tip.hide(d, this); 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); d3.select(this).classed("highlighted", true);
const nodeBox = this.getBoundingClientRect(); const nodeBox = this.getBoundingClientRect();
const svgBox = (d3.select(`.${t.el?.className} .d3-trace-tree`) as any).node().getBoundingClientRect(); const svgBox = (d3.select(`.${t.el?.className} .d3-trace-tree`) as any).node().getBoundingClientRect();