init()

in src/views/dashboard/related/trace/utils/d3-trace-tree.ts [83:124]


  init(data: Recordable, row: Recordable) {
    d3.select("#trace-action-box").style("display", "none");
    this.treemap = d3.tree().size([row.length * 35, this.width]);
    this.row = row;
    this.data = data;
    this.min = Number(d3.min(this.row.map((i: Span) => i.startTime)));
    this.max = Number(d3.max(this.row.map((i: Span) => i.endTime - this.min)));
    this.list = Array.from(new Set(this.row.map((i: Span) => i.serviceCode)));
    this.xScale = d3.scaleLinear().range([0, 100]).domain([0, this.max]);
    this.sequentialScale = d3
      .scaleSequential()
      .domain([0, this.list.length + 1])
      .interpolator(d3.interpolateCool);

    this.body.call(this.getZoomBehavior(this.svg));
    this.root = d3.hierarchy(this.data, (d) => d.children);
    this.root.x0 = this.height / 2;
    this.root.y0 = 0;
    this.topSlow = [];
    this.topChild = [];
    const that = this;
    this.root.children.forEach(collapse);
    this.topSlowMax = this.topSlow.sort((a: number, b: number) => b - a)[0];
    this.topSlowMin = this.topSlow.sort((a: number, b: number) => b - a)[4];
    this.topChildMax = this.topChild.sort((a: number, b: number) => b - a)[0];
    this.topChildMin = this.topChild.sort((a: number, b: number) => b - a)[4];
    this.update(this.root);
    // Collapse the node and all it's children
    function collapse(d: Recordable) {
      if (d.children) {
        let dur = d.data.endTime - d.data.startTime;
        d.children.forEach((i: Recordable) => {
          dur -= i.data.endTime - i.data.startTime;
        });
        d.dur = dur < 0 ? 0 : dur;
        that.topSlow.push(dur);
        that.topChild.push(d.children.length);
        d.childrenLength = d.children.length;
        d.children.forEach(collapse);
      }
    }
  }