From 48c79ba539cc001f7e2f4f93d3bf148104df4c32 Mon Sep 17 00:00:00 2001 From: WeiFeng-mindinsight Date: Wed, 24 Jun 2020 11:07:27 +0800 Subject: [PATCH] fix bug of step trace, the text of small data will show outside of the rect which own it --- .../train-manage/profiling-dashboard.vue | 68 +++++++++-- .../ui/src/views/train-manage/step-trace.vue | 114 ++++++++++++------ 2 files changed, 135 insertions(+), 47 deletions(-) diff --git a/mindinsight/ui/src/views/train-manage/profiling-dashboard.vue b/mindinsight/ui/src/views/train-manage/profiling-dashboard.vue index 7bddd41..37d4ae3 100644 --- a/mindinsight/ui/src/views/train-manage/profiling-dashboard.vue +++ b/mindinsight/ui/src/views/train-manage/profiling-dashboard.vue @@ -186,7 +186,7 @@ limitations under the License.
- {{$t('profiling.deviceQueueOpTip')}} + {{$t('profiling.deviceQueueOp')}}
@@ -351,6 +351,7 @@ export default { totalTime: 0, rowHeight: 60, markerPadding: 4, + minRate: 0.05, namespaceURI: 'http://www.w3.org/2000/svg', resizeTimer: null, colorList: [ @@ -650,20 +651,28 @@ export default { const traceDom = document.querySelector('#trace'); if (traceDom) { this.svg.totalWidth = traceDom.offsetWidth - this.svg.svgPadding * 2; + if (this.svg.data[0] && this.svg.data[0].length) { - const svg = document.querySelector('#trace svg'); + const svg = traceDom.querySelector('svg'); this.svg.totalTime = this.svg.data[0][0].duration; + if (this.svg.totalTime) { this.svg.colorIndex = 0; + const minTime = this.svg.minRate * this.svg.totalTime; + this.svg.data.forEach((row, index) => { if (row && row.length) { const dashedLine = this.addDashedLine(index); svg.insertBefore(dashedLine, svg.querySelector('g')); + row.forEach((i) => { if (i.duration) { if (i.name) { const tempDom = this.createRect(i, index); - svg.insertBefore(tempDom, svg.querySelector('g')); + const tempStr = `g${ + i.duration > minTime ? '' : '.arrow' + }`; + svg.insertBefore(tempDom, svg.querySelector(tempStr)); } else { const tempDom = this.createArrow(i, index); svg.appendChild(tempDom); @@ -690,19 +699,27 @@ export default { line.setAttribute('style', 'stroke:#E2E2E2;stroke-width:1'); line.setAttribute('stroke-dasharray', '5 5'); const g = document.createElementNS(this.svg.namespaceURI, 'g'); + g.setAttribute('class', 'dashedLine'); g.appendChild(line); return g; }, createRect(data, rowIndex) { - const color = this.svg.colorList[this.svg.colorIndex++ % 4]; + const color = this.svg.colorList[ + rowIndex > 1 ? 3 : this.svg.colorIndex++ % 4 + ]; const height = 40; const width = (data.duration / this.svg.totalTime) * this.svg.totalWidth; + const fontSize = 12; + const normalRect = data.duration > this.svg.minRate * this.svg.totalTime; + const x1 = (data.start / this.svg.totalTime) * this.svg.totalWidth + this.svg.svgPadding; const y1 = rowIndex * this.svg.rowHeight + (this.svg.rowHeight - height) / 2; + const g = document.createElementNS(this.svg.namespaceURI, 'g'); + g.setAttribute('class', 'rect'); const gChild = document.createElementNS(this.svg.namespaceURI, 'g'); let name = ''; switch (data.name) { @@ -710,7 +727,7 @@ export default { name = this.$t('profiling.lterationGap'); break; case 'fp_and_bp': - name = this.$t('profiling.deviceQueueOpTip'); + name = this.$t('profiling.deviceQueueOp'); break; case 'tail': name = this.$t('profiling.lterationTail'); @@ -731,16 +748,30 @@ export default { this.svg.namespaceURI, 'foreignObject', ); - foreignObject.setAttribute('x', x1); - foreignObject.setAttribute('y', y1); - foreignObject.setAttribute('height', height); + foreignObject.textContent = `${name}: ${data.duration.toFixed(4)}ms`; + const textWidth = this.getTextWidth(foreignObject.textContent); + + foreignObject.setAttribute( + 'x', + normalRect + ? x1 + : Math.min( + this.svg.svgPadding * 2 + this.svg.totalWidth - textWidth, + Math.max(0, x1 + width / 2 - textWidth / 2), + ), + ); + + foreignObject.setAttribute( + 'y', + y1 + (height - fontSize) / 2 + (normalRect ? 0 : fontSize), + ); + foreignObject.setAttribute('height', fontSize); foreignObject.setAttribute('width', width); + foreignObject.setAttribute('style', `color:${color[0]}`); foreignObject.setAttribute( - 'style', - `overflow:hidden;text-align:center;text-overflow:ellipsis;` + - `white-space:nowrap;font-size:12px;line-height:${height}px;color:${color[0]}`, + 'class', + `content${normalRect ? '' : ' content-mini'}`, ); - foreignObject.textContent = `${name}: ${data.duration.toFixed(4)}ms`; const title = document.createElementNS(this.svg.namespaceURI, 'title'); title.textContent = `${name}: ${data.duration.toFixed(4)}ms`; @@ -761,6 +792,7 @@ export default { const x2 = x1 + width - this.svg.markerPadding * 2; const y = rowIndex * this.svg.rowHeight + this.svg.rowHeight / 2; const g = document.createElementNS(this.svg.namespaceURI, 'g'); + g.setAttribute('class', 'arrow'); const line = document.createElementNS(this.svg.namespaceURI, 'line'); line.setAttribute('x1', x1); @@ -1036,6 +1068,17 @@ export default { .training-trace { position: relative; height: 0; + .content { + overflow: hidden; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 12px; + line-height: 12px; + } + .content-mini { + overflow: visible; + } } } } @@ -1213,6 +1256,7 @@ export default { .pie-chart { width: 100%; height: 260px; + overflow: hidden; } .image-noData { width: 100%; diff --git a/mindinsight/ui/src/views/train-manage/step-trace.vue b/mindinsight/ui/src/views/train-manage/step-trace.vue index 89fdd05..3bd0c06 100644 --- a/mindinsight/ui/src/views/train-manage/step-trace.vue +++ b/mindinsight/ui/src/views/train-manage/step-trace.vue @@ -162,6 +162,7 @@ export default { totalTime: 0, rowHeight: 60, markerPadding: 4, + minRate: 0.05, namespaceURI: 'http://www.w3.org/2000/svg', resizeTimer: null, colorList: [ @@ -328,7 +329,6 @@ export default { type: 'category', data: xAxisData, name: 'step', - max: this.steps.max, }, yAxis: { type: 'value', @@ -456,33 +456,43 @@ export default { }, dealTraceData() { - this.svg.totalWidth = - document.querySelector('#trace').offsetWidth - this.svg.svgPadding * 2; - if (this.svg.data[0] && this.svg.data[0].length) { - const svg = document.querySelector('#trace svg'); - this.svg.totalTime = this.svg.data[0][0].duration; - if (this.svg.totalTime) { - this.svg.colorIndex = 0; - this.svg.data.forEach((row, index) => { - if (row && row.length) { - const dashedLine = this.addDashedLine(index); - svg.insertBefore(dashedLine, svg.querySelector('g')); - row.forEach((i) => { - if (i.duration) { - if (i.name) { - const tempDom = this.createRect(i, index); - svg.insertBefore(tempDom, svg.querySelector('g')); - } else { - const tempDom = this.createArrow(i, index); - svg.appendChild(tempDom); + const traceDom = document.querySelector('#trace'); + if (traceDom) { + this.svg.totalWidth = traceDom.offsetWidth - this.svg.svgPadding * 2; + + if (this.svg.data[0] && this.svg.data[0].length) { + const svg = traceDom.querySelector('svg'); + this.svg.totalTime = this.svg.data[0][0].duration; + + if (this.svg.totalTime) { + this.svg.colorIndex = 0; + const minTime = this.svg.minRate * this.svg.totalTime; + + this.svg.data.forEach((row, index) => { + if (row && row.length) { + const dashedLine = this.addDashedLine(index); + svg.insertBefore(dashedLine, svg.querySelector('g')); + + row.forEach((i) => { + if (i.duration) { + if (i.name) { + const tempDom = this.createRect(i, index); + const tempStr = `g${ + i.duration > minTime ? '' : '.arrow' + }`; + svg.insertBefore(tempDom, svg.querySelector(tempStr)); + } else { + const tempDom = this.createArrow(i, index); + svg.appendChild(tempDom); + } } - } - }); - } - }); + }); + } + }); + } + } else { + this.removeTrace(); } - } else { - this.removeTrace(); } }, addDashedLine(index) { @@ -497,19 +507,27 @@ export default { line.setAttribute('style', 'stroke:#E2E2E2;stroke-width:1'); line.setAttribute('stroke-dasharray', '5 5'); const g = document.createElementNS(this.svg.namespaceURI, 'g'); + g.setAttribute('class', 'dashedLine'); g.appendChild(line); return g; }, createRect(data, rowIndex) { - const color = this.svg.colorList[this.svg.colorIndex++ % 4]; + const color = this.svg.colorList[ + rowIndex > 1 ? 3 : this.svg.colorIndex++ % 4 + ]; const height = 40; const width = (data.duration / this.svg.totalTime) * this.svg.totalWidth; + const fontSize = 12; + const normalRect = data.duration > this.svg.minRate * this.svg.totalTime; + const x1 = (data.start / this.svg.totalTime) * this.svg.totalWidth + this.svg.svgPadding; const y1 = rowIndex * this.svg.rowHeight + (this.svg.rowHeight - height) / 2; + const g = document.createElementNS(this.svg.namespaceURI, 'g'); + g.setAttribute('class', 'rect'); const gChild = document.createElementNS(this.svg.namespaceURI, 'g'); let name = ''; switch (data.name) { @@ -517,7 +535,7 @@ export default { name = this.$t('profiling.lterationGap'); break; case 'fp_and_bp': - name = this.$t('profiling.deviceQueueOpTip'); + name = this.$t('profiling.deviceQueueOp'); break; case 'tail': name = this.$t('profiling.lterationTail'); @@ -538,16 +556,30 @@ export default { this.svg.namespaceURI, 'foreignObject', ); - foreignObject.setAttribute('x', x1); - foreignObject.setAttribute('y', y1); - foreignObject.setAttribute('height', height); + foreignObject.textContent = `${name}: ${data.duration.toFixed(4)}ms`; + const textWidth = this.getTextWidth(foreignObject.textContent); + + foreignObject.setAttribute( + 'x', + normalRect + ? x1 + : Math.min( + this.svg.svgPadding * 2 + this.svg.totalWidth - textWidth, + Math.max(0, x1 + width / 2 - textWidth / 2), + ), + ); + + foreignObject.setAttribute( + 'y', + y1 + (height - fontSize) / 2 + (normalRect ? 0 : fontSize), + ); + foreignObject.setAttribute('height', fontSize); foreignObject.setAttribute('width', width); + foreignObject.setAttribute('style', `color:${color[0]}`); foreignObject.setAttribute( - 'style', - `overflow:hidden;text-align:center;text-overflow:ellipsis;` + - `white-space:nowrap;font-size:12px;line-height:${height}px;color:${color[0]}`, + 'class', + `content${normalRect ? '' : ' content-mini'}`, ); - foreignObject.textContent = `${name}: ${data.duration.toFixed(4)}ms`; const title = document.createElementNS(this.svg.namespaceURI, 'title'); title.textContent = `${name}: ${data.duration.toFixed(4)}ms`; @@ -568,6 +600,7 @@ export default { const x2 = x1 + width - this.svg.markerPadding * 2; const y = rowIndex * this.svg.rowHeight + this.svg.rowHeight / 2; const g = document.createElementNS(this.svg.namespaceURI, 'g'); + g.setAttribute('class', 'arrow'); const line = document.createElementNS(this.svg.namespaceURI, 'line'); line.setAttribute('x1', x1); @@ -742,6 +775,17 @@ export default { cursor: pointer; background-image: url('../../assets/images/download.png'); } + .content { + overflow: hidden; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 12px; + line-height: 12px; + } + .content-mini { + overflow: visible; + } } } .chart-wrap { -- GitLab