From 6dd0e5999a8c94b037d8128bdb82eddbb7d93cb8 Mon Sep 17 00:00:00 2001 From: fengxuefeng Date: Sat, 28 Nov 2020 16:26:10 +0800 Subject: [PATCH] In order to improve the user experience, debugger monitor point parameter list display and tensor support boolean and null display --- .../components/debugger-grid-table-simple.vue | 17 +++- .../ui/src/components/debugger-tensor.vue | 95 ++++++++++++------- mindinsight/ui/src/locales/en-us.json | 1 - mindinsight/ui/src/locales/zh-cn.json | 2 +- mindinsight/ui/src/mixins/debugger-mixin.vue | 65 +++++++------ .../ui/src/views/debugger/debugger.vue | 39 +++++--- 6 files changed, 143 insertions(+), 76 deletions(-) diff --git a/mindinsight/ui/src/components/debugger-grid-table-simple.vue b/mindinsight/ui/src/components/debugger-grid-table-simple.vue index 4bb9232b..ee1487ae 100644 --- a/mindinsight/ui/src/components/debugger-grid-table-simple.vue +++ b/mindinsight/ui/src/components/debugger-grid-table-simple.vue @@ -284,7 +284,7 @@ export default { * @return {String} */ formateValueColor(row, cell, value, columnDef, dataContext) { - if (!cell || !value || isNaN(value) || value === Infinity || value === -Infinity) { + if (!cell || !value || this.judgeDataType(value)) { return value; } else if (value < 0) { return `${value}`; } }, + judgeDataType(value) { + return ( + isNaN(value) || + value === 'Infinity' || + value === '-Infinity' || + typeof value === 'boolean' || + value === 'null' + ); + }, /** * Setting the background color of data * @param {Number} row @@ -308,7 +317,7 @@ export default { formateCompareColor(row, cell, value, columnDef, dataContext) { if (value instanceof Array && value.length >= 3) { const valueNum = value[2]; - if (!cell || !valueNum || isNaN(valueNum) || valueNum === Infinity || valueNum === -Infinity) { + if (!cell || !valueNum || this.judgeDataType(valueNum)) { return `${valueNum}`; } else if (valueNum < 0) { return ` {{item.tip}} -
+
{{ $t('debugger.tuningAdvice') }}
{{ item.tuningAdviceTitle }}
@@ -64,7 +65,7 @@ limitations under the License.
{{ $t('public.noData') }}
+ class="leftNoData">{{ $t('debugger.noWatchPoint') }}
- {{ $t('debugger.max') }} {{ statistics.overall_max }} - {{ $t('debugger.min') }} {{ statistics.overall_min }} - {{ $t('debugger.mean') }} {{ statistics.overall_avg }} - {{ $t('debugger.nan') }} {{ statistics.overall_nan_count }} - {{ $t('debugger.negativeInf') }} {{ statistics.overall_neg_inf_count }} - {{ $t('debugger.inf') }} {{ statistics.overall_pos_inf_count }} - {{ $t('debugger.zero') }} {{ statistics.overall_zero_count }} - {{ $t('debugger.negativeNum') }} {{ statistics.overall_neg_zero_count }} - {{ $t('debugger.positiveNum') }} {{ statistics.overall_pos_zero_count }} + {{ $t('debugger.max') }} {{ statistics.overall_max===undefined?'--':statistics.overall_max }} + {{ $t('debugger.min') }} {{ statistics.overall_min===undefined?'--':statistics.overall_min }} + {{ $t('debugger.mean') }} {{ statistics.overall_avg===undefined?'--':statistics.overall_avg }} + {{ $t('debugger.nan') }} + {{ statistics.overall_nan_count===undefined?'--':statistics.overall_nan_count }} + + {{ $t('debugger.negativeInf') }} + {{ statistics.overall_neg_inf_count===undefined?'--':statistics.overall_neg_inf_count }} + + {{ $t('debugger.inf') }} + {{ statistics.overall_pos_inf_count===undefined?'--': statistics.overall_pos_inf_count}} + + {{ $t('debugger.zero') }} + {{ statistics.overall_zero_count===undefined?'--': statistics.overall_zero_count}} + {{ $t('debugger.negativeNum') }} + {{ statistics.overall_neg_zero_count===undefined?'--':statistics.overall_neg_zero_count }} + {{ $t('debugger.positiveNum') }} + {{ statistics.overall_pos_zero_count===undefined?'--':statistics.overall_pos_zero_count }}
@@ -110,16 +120,17 @@ limitations under the License. {{ $t('debugger.curStep') }} {{ $t('debugger.preStep') }} {{ $t('debugger.compareResult') }}
{{$t('debugger.tensorMsg')}}
+ {{ $t('graph.name') + $t('symbols.colon') }} {{ statistics.name }} {{ $t('debugger.max') }} {{ statistics.overall_max }} {{ $t('debugger.min') }} {{ statistics.overall_min }} {{ $t('debugger.mean') }} {{ statistics.overall_avg }} @@ -217,7 +229,8 @@ limitations under the License.
{{ $t('debugger.watchList') }}
-
+
@@ -229,6 +242,8 @@ limitations under the License.
+
{{ $t('debugger.noWatchPoint') }}
@@ -276,12 +291,18 @@ export default { selectedNode: {}, statistics: {}, leftDataShow: true, + rightDataShow: true, tuningAdvice: [], tuningAdviceTitle: '', watchPoints: [], callbackFun: null, }; }, + computed: { + state() { + return this.$parent.metadata.state; + }, + }, mounted() { this.$nextTick(() => { this.callbackFun = this.debounce(this.resizeCallback, 200); @@ -330,6 +351,10 @@ export default { this.selectedNode.name = this.curRowObj.name; const dot = this.packageData(); this.initGraph(dot); + } else { + if (this.selectedNode.name) { + this.setNodeData(); + } } } }, @@ -578,19 +603,16 @@ export default { const selectedNode = nodesList[index]; if (selectedNode.id !== this.curRowObj.name) { const data = this.tensorGraphData[selectedNode.id]; - if (data.statistics && JSON.stringify(data.statistics) !== '{}') { - this.curRowObj.name = data.name; - this.curRowObj.full_name = data.full_name; - this.curRowObj.graph_name = data.graph_name; - this.curRowObj.has_prev_step = data.has_prev_step; - this.curRowObj.shape = JSON.stringify(data.shape || []); - nodes.on('click', null); - nodes.on('dblclick', null); - this.resetTensor(); - } else { - this.$message.error(this.$t('debugger.jumpFailInformation')); - } + this.curRowObj.name = data.name; + this.curRowObj.full_name = data.full_name; + this.curRowObj.graph_name = data.graph_name; + this.curRowObj.has_prev_step = data.has_prev_step; + this.curRowObj.shape = JSON.stringify(data.shape || []); + + nodes.on('click', null); + nodes.on('dblclick', null); + this.resetTensor(); } }); @@ -701,13 +723,14 @@ export default { }, setNodeData() { window.getSelection().removeAllRanges(); - const selectedNode = document.querySelector(`g[id="${this.selectedNode.name}"]`); - d3.selectAll('.node').classed('selected', false); + const selectedNode = document.querySelector(`#tensor-graph g[id="${this.selectedNode.name}"]`); + d3.selectAll('#tensor-graph .node').classed('selected', false); selectedNode.classList.add('selected'); - d3.selectAll('.edge').classed('selected', false); + d3.selectAll('#tensor-graph .edge').classed('selected', false); this.selectedNode = JSON.parse(JSON.stringify(this.tensorGraphData[this.selectedNode.name])); const keys = [ + 'name', 'overall_avg', 'overall_count', 'overall_max', @@ -727,6 +750,8 @@ export default { } else { this.statistics = JSON.parse(JSON.stringify(this.selectedNode.statistics)); } + this.statistics.name = JSON.parse(JSON.stringify(this.selectedNode.name)); + if (this.selectedNode.watch_points && this.selectedNode.watch_points.length) { this.watchPoints = this.selectedNode.watch_points.map((val) => { return { @@ -736,16 +761,18 @@ export default { selected: false, }; }); + this.rightDataShow = true; } else { - this.watchPoints = []; + this.rightDataShow = false; } } else { keys.forEach((key) => { this.statistics[key] = '--'; }); - this.watchPoints = []; + this.rightDataShow = false; this.highLightEdges(); } + this.$forceUpdate(); }, highLightEdges() { const edges = []; @@ -985,7 +1012,7 @@ export default { this.showFilterInput = true; } if (res.data.tensor_value) { - const value = res.data.tensor_value.value; + let value = res.data.tensor_value.value; const statistics = res.data.tensor_value.statistics || {}; this.statisticsArr = [statistics]; if (value === 'Too large to show.') { @@ -1000,6 +1027,9 @@ export default { }); return; } + if (value === null) { + value = 'null'; + } this.tensorValue = value instanceof Array ? value : [value]; this.$nextTick(() => { this.$refs.tensorValue.updateGridData(this.tensorValue, JSON.parse(row.shape), statistics, shape); @@ -1374,6 +1404,7 @@ export default { display: inline-block; padding: 5px 0px; min-width: 50%; + word-break: break-all; } ul { li { diff --git a/mindinsight/ui/src/locales/en-us.json b/mindinsight/ui/src/locales/en-us.json index 944d4b3f..5326435b 100644 --- a/mindinsight/ui/src/locales/en-us.json +++ b/mindinsight/ui/src/locales/en-us.json @@ -542,7 +542,6 @@ "tensorDiagram": "Tensor Relationship Diagram", "selectDetail": "Select a tensor and double-click it to view details.", "operator": "Operator", - "jumpFailInformation": "Redirection fails because the tensor information is empty.", "optimizationOrientation": "Optimization Guide", "tuningAdvice": "Optimization Suggestions", "setValue": "Preset Value", diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json index 98ed1c68..8b99f74d 100644 --- a/mindinsight/ui/src/locales/zh-cn.json +++ b/mindinsight/ui/src/locales/zh-cn.json @@ -541,11 +541,11 @@ "tensorDiagram": "张量关系图", "selectDetail": "单击张量选中，双击张量查看详情", "operator": "算子", - "jumpFailInformation": "跳转失败，张量信息为空", "optimizationOrientation": "调优向导", "tuningAdvice": "调优建议", "setValue": "设置值", "actualValue": "实际值", + "noWatchPoint": "没有命中的监测点", "tensorTuningRule": { "operator_real_data_validation": "真实数据单算子验证", "loss_overflow": "检查loss值溢出（NAN，INF）", diff --git a/mindinsight/ui/src/mixins/debugger-mixin.vue b/mindinsight/ui/src/mixins/debugger-mixin.vue index 2daa5d29..b462e315 100644 --- a/mindinsight/ui/src/mixins/debugger-mixin.vue +++ b/mindinsight/ui/src/mixins/debugger-mixin.vue @@ -392,7 +392,10 @@ export default { this.isCurrentGraph = false; } this.metadata.pos = metadata.pos; - this.enableRecheck = metadata.enable_recheck; + if (metadata.enable_recheck !== undefined) { + this.enableRecheck = metadata.enable_recheck; + } + if (metadata.state) { this.metadata.state = metadata.state; } @@ -421,13 +424,6 @@ export default { if (metadata.step && metadata.step > this.metadata.step) { this.metadata.step = metadata.step; } - - if (metadata.graph_name && metadata.tensor_name && this.tensorCompareFlag) { - const debTensor = this.$refs['deb-tensor']; - if (debTensor) { - debTensor.updateGraphData(metadata.graph_name, metadata.tensor_name); - } - } }, /** * Long polling,update some info @@ -472,6 +468,18 @@ export default { this.radio1 = 'hit'; this.getWatchpointHits(); } + + if ( + res.data.receive_tensor && + res.data.receive_tensor.graph_name && + res.data.receive_tensor.tensor_name && + this.tensorCompareFlag + ) { + const debTensor = this.$refs['deb-tensor']; + if (debTensor) { + debTensor.updateGraphData(res.data.receive_tensor.graph_name, res.data.receive_tensor.tensor_name); + } + } this.pollData(); } }, @@ -537,7 +545,7 @@ export default { recheckWatchpoint() { RequestService.recheckWatchPoints().then( (res) => { - if (res && res.data && res.data.metadata) { + if (res && res.data && res.data.metadata && res.data.metadata.enable_recheck !== undefined) { this.enableRecheck = res.data.metadata.enable_recheck; } this.$message.success(this.$t('debugger.recheckSuccess')); @@ -598,7 +606,7 @@ export default { this.loadOriginalTree(); this.queryWatchPoints(); this.$message.success(this.$t('debugger.successDeleteWP')); - if (res && res.data && res.data.metadata) { + if (res && res.data && res.data.metadata && res.data.metadata.enable_recheck !== undefined) { this.enableRecheck = res.data.metadata.enable_recheck; } this.curWatchPointId = null; @@ -660,7 +668,7 @@ export default { this.createWatchPointArr = []; this.createWPDialogVisible = false; this.$message.success(this.$t('debugger.successCreateWP')); - if (res && res.data && res.data.metadata) { + if (res && res.data && res.data.metadata && res.data.metadata.enable_recheck !== undefined) { this.enableRecheck = res.data.metadata.enable_recheck; } @@ -806,7 +814,9 @@ export default { RequestService.updateWatchpoint(params).then( (res) => { this.defaultCheckedArr = checkedKeys; - this.enableRecheck = res.data.metadata.enable_recheck; + if (res && res.data && res.data.metadata && res.data.metadata.enable_recheck !== undefined) { + this.enableRecheck = res.data.metadata.enable_recheck; + } this.$nextTick(() => { if (node.indeterminate) { node.checked = true; @@ -869,7 +879,9 @@ export default { RequestService.updateWatchpoint(params).then( (res) => { this.searchCheckedArr = checkedKeys; - this.enableRecheck = res.data.metadata.enable_recheck; + if (res && res.data && res.data.metadata && res.data.metadata.enable_recheck !== undefined) { + this.enableRecheck = res.data.metadata.enable_recheck; + } this.$nextTick(() => { if (node.indeterminate) { node.checked = true; @@ -1096,7 +1108,9 @@ export default { this.debuggerVersion = res.data.metadata.debugger_version; } this.metadata = res.data.metadata; - this.enableRecheck = res.data.metadata.enable_recheck; + if (res && res.data && res.data.metadata && res.data.metadata.enable_recheck !== undefined) { + this.enableRecheck = res.data.metadata.enable_recheck; + } if (this.metadata.backend) { this.version = this.metadata.backend; } @@ -1462,24 +1476,21 @@ export default { const tensorName = `slot: ${i.slot}, `; if (i.watch_points && i.watch_points.length) { i.watch_points.forEach((j, key) => { - let item = `${tensorName} Watch Point Id: ${j.id}, `; + let item = `${tensorName}${this.$t('debugger.watchPoint')} ${j.id}, `; + let params = []; if (j.watch_condition) { item += ` ${this.transCondition(j.watch_condition.id)}`; - const param = (j.watch_condition.params || []) - .map((k) => - k.actual_value === undefined || k.actual_value === null - ? `${this.transCondition(k.name)}: ${this.$t('debugger.setValue')}:${k.value}` - : `${this.transCondition(k.name)}: ${this.$t('debugger.setValue')}:${k.value}, ${this.$t( - 'debugger.actualValue', - )}:${k.actual_value}`, - ) - .join(', '); - if (param) { - item += ` (${param})`; - } + params = (j.watch_condition.params || []).map((k) => + k.actual_value === undefined || k.actual_value === null + ? `${this.transCondition(k.name)}: ${this.$t('debugger.setValue')}:${k.value}` + : `${this.transCondition(k.name)}: ${this.$t('debugger.setValue')}:${k.value}, ${this.$t( + 'debugger.actualValue', + )}:${k.actual_value}`, + ); } obj.lists.push({ name: item, + params, id: `${key}${hit.node_name}`, tip: j.error_code ? this.$t('debugger.checkTips', {msg: tipsMapping[j.error_code]}) : '', }); diff --git a/mindinsight/ui/src/views/debugger/debugger.vue b/mindinsight/ui/src/views/debugger/debugger.vue index 0f3751fb..83c1fb3b 100644 --- a/mindinsight/ui/src/views/debugger/debugger.vue +++ b/mindinsight/ui/src/views/debugger/debugger.vue @@ -214,6 +214,12 @@ limitations under the License.