in src/views/dashboard/related/trace/utils/d3-trace-tree.ts [51:82]
constructor(el: HTMLDivElement, handleSelectSpan: (i: Trace) => void) {
this.el = el;
this.handleSelectSpan = handleSelectSpan;
this.i = 0;
this.topSlow = [];
this.topChild = [];
this.width = el.clientWidth - 20;
this.height = el.clientHeight - 30;
d3.select(`.${this.el?.className} .d3-trace-tree`).remove();
this.body = d3
.select(this.el)
.append("svg")
.attr("class", "d3-trace-tree")
.attr("width", this.width > 0 ? this.width : 10)
.attr("height", this.height > 0 ? this.height : 10);
this.tip = (d3tip as any)()
.attr("class", "d3-tip")
.offset([-8, 0])
.html(
(d: Recordable) => `
<div class="mb-5">${d.data.label}</div>
${d.data.dur ? '<div class="sm">SelfDuration: ' + d.data.dur + "ms</div>" : ""}
${
d.data.endTime - d.data.startTime
? '<div class="sm">TotalDuration: ' + (d.data.endTime - d.data.startTime) + "ms</div>"
: ""
}
`,
);
this.svg = this.body.append("g").attr("transform", () => `translate(120, 0)`);
this.svg.call(this.tip);
}