!1305 UI add resize monitor and page identifier

From: @huang_wei_feng4
Reviewed-by: @ouwenchang,@yelihua
Signed-off-by: @yelihua

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, 是否继续?",

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();
             }
           });

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

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);
+  },
 };
 </script>
 <style>

mindinsight/ui/src/views/train-manage/graph.vue

@@ -575,7 +575,6 @@ export default {
       isIntoView: true,
     };
   },
-  computed: {},
   watch: {
     guide: {
       handler(newVal) {
@@ -608,6 +607,7 @@ export default {
       window.localStorage.setItem('graphShowGuide', true);
     }
 
+    this.pageKey = 'graph';
     this.trainJobID = this.$route.query.train_id;
 
     this.language = window.localStorage.getItem('milang');
@@ -786,7 +786,7 @@ export default {
         this.loading.show = false;
       });
       this.initSmallMap();
-      this.initZooming('graph');
+      this.initZooming();
       if (this.selectedNode.name) {
         this.selectNode(true);
       }