From 8cd675f2a8744b32d94adf3ef1551739ec983b93 Mon Sep 17 00:00:00 2001 From: WeiFeng-mindinsight Date: Thu, 22 Apr 2021 14:07:20 +0800 Subject: [PATCH] UI add resize monitor and page identifier --- mindinsight/ui/src/locales/zh-cn.json | 2 +- mindinsight/ui/src/mixins/common-graph.vue | 25 +++++++++---------- mindinsight/ui/src/mixins/debugger-mixin.vue | 2 +- .../ui/src/views/debugger/debugger.vue | 19 +++++++++----- .../ui/src/views/train-manage/graph.vue | 4 +-- 5 files changed, 29 insertions(+), 23 deletions(-) diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json index 3c03f592..67d9a1aa 100644 --- a/mindinsight/ui/src/locales/zh-cn.json +++ b/mindinsight/ui/src/locales/zh-cn.json @@ -85,7 +85,7 @@ "graphUrl": "https://www.mindspore.cn/tutorial/training/zh-CN/master/advanced_use/dashboard.html#id5", "dataProcessUrl": "https://www.mindspore.cn/tutorial/training/zh-CN/master/advanced_use/dashboard.html#id6", "imageUrl": "https://www.mindspore.cn/tutorial/training/zh-CN/master/advanced_use/dashboard.html#id7", - "sessionLimit": "离线调试器的session个数超过上线", + "sessionLimit": "离线调试器的session个数超过上限", "sessionLimitNum": "最多同时存在2个", "sessionLists": "目前存在的session列表", "deleteSessionConfirm": "此操作将删除当前session, 是否继续?", diff --git a/mindinsight/ui/src/mixins/common-graph.vue b/mindinsight/ui/src/mixins/common-graph.vue index ff4f2681..5f20f729 100644 --- a/mindinsight/ui/src/mixins/common-graph.vue +++ b/mindinsight/ui/src/mixins/common-graph.vue @@ -44,7 +44,9 @@ export default { nodesCountLimit: 4500, // Maximum number of sub-nodes in a namespace. maxChainNum: 70, graphContainer: null, + resizeTimer: null, resizeDelay: 500, // The delay of resize's event + pageKey: '', }; }, mounted() { @@ -85,18 +87,17 @@ export default { if (target) { if (type === 'click') { - this.clickEvent(target, 'graph'); + this.clickEvent(target); } else { - this.dblclickEvent(target, 'graph'); + this.dblclickEvent(target); } } }, /** * Initializing the click event * @param {Object} target The target of the click event - * @param {String} pageKey Page identification mark */ - clickEvent(target, pageKey) { + clickEvent(target) { const nodeId = target.id; const nodeClass = target.classList.value; setTimeout(() => { @@ -109,9 +110,9 @@ export default { this.clickScope = {}; }, 1000); this.selectedNode.name = nodeId; - if (pageKey === 'graph') { + if (this.pageKey === 'graph') { this.selectNode(false); - } else if (pageKey === 'debugger') { + } else if (this.pageKey === 'debugger') { this.selectNode(false, true); this.contextmenu.dom.style.display = 'none'; } @@ -119,9 +120,8 @@ export default { /** * Initializing the click event * @param {Object} target The target of the click event - * @param {String} pageKey Page identification mark */ - dblclickEvent(target, pageKey) { + dblclickEvent(target) { const nodeId = target.id; const nodeClass = target.classList.value; let name = nodeId; @@ -157,7 +157,7 @@ export default { this.dealDoubleClick(name); } else if (this.clickScope.id) { this.selectedNode.name = this.clickScope.id; - if (pageKey === 'graph') { + if (this.pageKey === 'graph') { this.selectNode(false); } } @@ -242,9 +242,8 @@ export default { }, /** * Initializing the graph zoom - * @param {String} pageKey */ - initZooming(pageKey) { + initZooming() { const minDistance = 100; const pointer = {start: {x: 0, y: 0}, end: {x: 0, y: 0}}; const zoom = d3 @@ -253,7 +252,7 @@ export default { const event = currentEvent.sourceEvent; pointer.start.x = event.x; pointer.start.y = event.y; - if (pageKey === 'debugger') { + if (this.pageKey === 'debugger') { this.contextmenu.dom.style.display = 'none'; } }) @@ -316,7 +315,7 @@ export default { `translate(${this.graph.transform.x},${this.graph.transform.y}) ` + `scale(${this.graph.transform.k})`; this.graph.dom.setAttribute('transform', tempStr); - if (pageKey === 'graph') { + if (this.pageKey === 'graph') { this.setInsideBoxData(); } }); diff --git a/mindinsight/ui/src/mixins/debugger-mixin.vue b/mindinsight/ui/src/mixins/debugger-mixin.vue index 96e73e6a..de5d0324 100644 --- a/mindinsight/ui/src/mixins/debugger-mixin.vue +++ b/mindinsight/ui/src/mixins/debugger-mixin.vue @@ -136,7 +136,7 @@ export default { */ collapseBtnClick() { this.leftShow = !this.leftShow; - setTimeout(this.initSvgSize, this.resizeDelay); + this.initSvgSize(); }, /** * Step input validation diff --git a/mindinsight/ui/src/views/debugger/debugger.vue b/mindinsight/ui/src/views/debugger/debugger.vue index 656c1171..d8b8bd52 100644 --- a/mindinsight/ui/src/views/debugger/debugger.vue +++ b/mindinsight/ui/src/views/debugger/debugger.vue @@ -902,16 +902,17 @@ export default { }; }, components: {debuggerTensor, tree}, - computed: {}, mounted() { document.title = `${this.$t('debugger.debugger')}-MindInsight`; this.nodeTypes.label = this.$t('debugger.nodeType'); + this.pageKey = 'debugger'; if (this.trainId) { document.title = `${this.trainId}-${this.$t('debugger.debugger')}-MindInsight`; this.retrieveAll(); } else { this.getSession(); } + window.addEventListener('resize', this.initSvgSize, false); }, watch: { 'metadata.state': { @@ -1232,7 +1233,7 @@ export default { this.svg.size.width / 2 / this.graph.size.width, this.svg.size.height / 2 / this.graph.size.height ); - this.initZooming('debugger'); + this.initZooming(); this.initContextMenu(); if (this.selectedNode.name) { @@ -1786,14 +1787,20 @@ export default { }, rightCollapse() { this.collapseTable = !this.collapseTable; - setTimeout(this.initSvgSize, this.resizeDelay); + this.initSvgSize(); }, initSvgSize() { - const svgRect = document.querySelector('#graph svg').getBoundingClientRect(); - this.svg.size = {width: svgRect.width, height: svgRect.height, left: svgRect.left, top: svgRect.top}; + if (this.resizeTimer) clearTimeout(this.resizeTimer); + this.resizeTimer = setTimeout(() => { + const svgRect = document.querySelector('#graph svg').getBoundingClientRect(); + this.svg.size = {width: svgRect.width, height: svgRect.height, left: svgRect.left, top: svgRect.top}; + this.resizeTimer = null; + }, this.resizeDelay); }, }, - destroyed() {}, + destroyed() { + window.removeEventListener('resize', this.initSvgSize); + }, };