handle the situation with VNode (#338)

src/views/components/common/trace-detail-chart-table.vue

@@ -137,7 +137,7 @@ limitations under the License. -->
         return arr;
       },
       traverseTree(node, spanId, segmentId, data) {
-        if (!node) {
+        if (!node || node.isBroken) {
           return;
         }
         if (node.spanId === spanId && node.segmentId === segmentId) {

src/views/components/trace/d3-trace.js

@@ -69,7 +69,7 @@ export default class Trace {
     L${d.target.y} ${d.target.x - 20}
     L${d.target.y} ${d.target.x - 5}`;
   }
-  init(data, row) {
+  init(data, row, fixSpansSize) {
     d3.select('.trace-xaxis').remove();
     this.row = row;
     this.data = data;
@@ -85,7 +85,7 @@ export default class Trace {
       if (d >= 1000) return d / 1000 + 's';
       return d;
     });
-    this.svg.attr('height', (this.row.length + 1) * this.barHeight);
+    this.svg.attr('height', (this.row.length + fixSpansSize + 1) * this.barHeight);
     this.svg
       .append('g')
       .attr('class', 'trace-xaxis')

src/views/components/trace/trace-detail-chart-list.vue

@@ -101,6 +101,7 @@ limitations under the License. -->
         list: [],
         currentSpan: [],
         loading: true,
+        fixSpansSize: 0,
       };
     },
     watch: {
@@ -108,7 +109,7 @@ limitations under the License. -->
         if (!this.data.length) { return; }
         this.loading = true;
         this.changeTree();
-        this.tree.init({label: 'TRACE_ROOT', children: this.segmentId}, this.data);
+        this.tree.init({label: 'TRACE_ROOT', children: this.segmentId}, this.data, this.fixSpansSize);
         this.tree.draw(() => {
           setTimeout(() => {
             this.loading = false;
@@ -124,7 +125,7 @@ limitations under the License. -->
       // this.loading = true;
       this.changeTree();
       this.tree = new Trace(this.$refs.traceList, this);
-      this.tree.init({label: 'TRACE_ROOT', children: this.segmentId}, this.data);
+      this.tree.init({label: 'TRACE_ROOT', children: this.segmentId}, this.data, this.fixSpansSize);
       this.tree.draw();
       this.loading = false;
       // this.computedScale();
@@ -136,7 +137,7 @@ limitations under the License. -->
         this.showDetail = true;
       },
       traverseTree(node, spanId, segmentId, data) {
-        if (!node) { return; }
+        if (!node || node.isBroken) { return; }
         if (node.spanId === spanId && node.segmentId === segmentId) {
           node.children.push(data);
           return;
@@ -263,6 +264,7 @@ limitations under the License. -->
             segmentGroup[i.segmentId].push(i);
           }
         });
+        this.fixSpansSize = fixSpans.length;
         segmentIdGroup.forEach((id) => {
           const currentSegment = segmentGroup[id].sort((a, b) => b.parentSpanId - a.parentSpanId);
           currentSegment.forEach((s) => {

src/views/components/trace/trace-detail-chart-tree.vue

@@ -127,7 +127,7 @@ limitations under the License. -->
         this.showDetail = true;
       },
       traverseTree(node, spanId, segmentId, data){
-        if (!node) return;
+        if (!node || node.isBroken) return;
         if(node.spanId == spanId && node.segmentId == segmentId) {node.children.push(data);return;}
         if (node.children && node.children.length > 0) {
           for (let i = 0; i < node.children.length; i++) {