From 64353d9d8b0c4f96d01a7f8f60b7b99257d29e16 Mon Sep 17 00:00:00 2001
From: WeiFeng-mindinsight <huangweifeng4@huawei.com>
Date: Tue, 16 Jun 2020 14:12:27 +0800
Subject: [PATCH] fix graph bug which can not open aggregation scope node

---
 .../ui/src/components/autocomplete.vue        |  91 +++++++--------
 mindinsight/ui/src/locales/zh-cn.json         |   3 +-
 .../ui/src/views/train-manage/graph.vue       | 104 +++++++++++++-----
 3 files changed, 129 insertions(+), 69 deletions(-)

diff --git a/mindinsight/ui/src/components/autocomplete.vue b/mindinsight/ui/src/components/autocomplete.vue
index 81419d7..3a8fb53 100644
--- a/mindinsight/ui/src/components/autocomplete.vue
+++ b/mindinsight/ui/src/components/autocomplete.vue
@@ -15,58 +15,56 @@ limitations under the License.
 -->
 
 <template>
-  <div
-    class="el-autocomplete"
-    v-clickoutside="close"
-    aria-haspopup="listbox"
-    role="combobox"
-    :aria-expanded="suggestionVisible"
-    :aria-owns="id"
-  >
-    <el-input
-      ref="input"
-      v-bind="[$props, $attrs]"
-      @input="handleChange"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @clear="handleClear"
-      @keydown.up.native.prevent="highlight(highlightedIndex - 1)"
-      @keydown.down.native.prevent="highlight(highlightedIndex + 1)"
-      @keydown.enter.native="handleKeyEnter"
-      @keydown.native.tab="close"
-    >
-      <template slot="prepend" v-if="$slots.prepend">
+  <div class="el-autocomplete"
+       v-clickoutside="close"
+       aria-haspopup="listbox"
+       role="combobox"
+       :aria-expanded="suggestionVisible"
+       :aria-owns="id">
+    <el-input ref="input"
+              class="rtl-item"
+              v-bind="[$props, $attrs]"
+              @input="handleChange"
+              @focus="handleFocus"
+              @blur="handleBlur"
+              @clear="handleClear"
+              @keydown.up.native.prevent="highlight(highlightedIndex - 1)"
+              @keydown.down.native.prevent="highlight(highlightedIndex + 1)"
+              @keydown.enter.native="handleKeyEnter"
+              @keydown.native.tab="close">
+      <template slot="prepend"
+                v-if="$slots.prepend">
         <slot name="prepend"></slot>
       </template>
-      <template slot="append" v-if="$slots.append">
+      <template slot="append"
+                v-if="$slots.append">
         <slot name="append"></slot>
       </template>
-      <template slot="prefix" v-if="$slots.prefix">
+      <template slot="prefix"
+                v-if="$slots.prefix">
         <slot name="prefix"></slot>
       </template>
-      <template slot="suffix" v-if="$slots.suffix">
+      <template slot="suffix"
+                v-if="$slots.suffix">
         <slot name="suffix"></slot>
       </template>
     </el-input>
-    <el-autocomplete-suggestions
-      visible-arrow
-      :class="[popperClass ? popperClass : '']"
-      :suggestions-has-data="suggestionsHasData"
-      :popper-options="popperOptions"
-      :append-to-body="popperAppendToBody"
-      ref="suggestions"
-      :placement="placement"
-      :id="id"
-    >
-      <li
-        v-for="(item, index) in suggestions"
-        :key="index"
-        :class="{ highlighted: highlightedIndex === index }"
-        @click="select(item)"
-        :id="`${id}-item-${index}`"
-        role="option"
-        :aria-selected="highlightedIndex === index"
-      >
+    <el-autocomplete-suggestions visible-arrow
+                                 :class="[popperClass ? popperClass : '']"
+                                 :suggestions-has-data="suggestionsHasData"
+                                 :popper-options="popperOptions"
+                                 :append-to-body="popperAppendToBody"
+                                 ref="suggestions"
+                                 :placement="placement"
+                                 :id="id">
+      <li v-for="(item, index) in suggestions"
+          :key="index"
+          :class="{ highlighted: highlightedIndex === index }"
+          class="rtl-item"
+          @click="select(item)"
+          :id="`${id}-item-${index}`"
+          role="option"
+          :aria-selected="highlightedIndex === index">
         <slot :item="item">
           <span :title="item[valueKey]">{{ item[valueKey] }}</span>
         </slot>
@@ -91,3 +89,10 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.rtl-item {
+  text-align: right;
+  direction: rtl;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json
index 3408f7a..cdcd2d2 100644
--- a/mindinsight/ui/src/locales/zh-cn.json
+++ b/mindinsight/ui/src/locales/zh-cn.json
@@ -205,7 +205,8 @@
     "guideContent3": "计算图中存在数据边和控制边。其中数据边表示数据的输入，控制边表示节点之间执行依赖关系。",
     "next": "下一步",
     "finish": "完成",
-    "dataTooLarge": "节点和边的数量过多，导致打开失败"
+    "dataTooLarge": "节点和边的数量过多，导致打开失败",
+    "tooManyChain": "直接子节点的深度超过70，不支持展开"
   },
   "operator": {
     "titleText": "性能分析",
diff --git a/mindinsight/ui/src/views/train-manage/graph.vue b/mindinsight/ui/src/views/train-manage/graph.vue
index a1df7b8..f8d4dbf 100644
--- a/mindinsight/ui/src/views/train-manage/graph.vue
+++ b/mindinsight/ui/src/views/train-manage/graph.vue
@@ -450,6 +450,7 @@ export default {
       trainJobID: '',
       frameSpace: 25, // Distance between the namespace border and the internal node
       nodesCountLimit: 1500, // Maximum number of sub-nodes in a namespace.
+      maxChainNum: 70,
       curColorIndex: 0,
       // Node search box
       searchBox: {
@@ -992,6 +993,16 @@ export default {
                       } else {
                         if (this.allGraphData[name].type === 'aggregation_scope') {
                           this.dealAggregationNodes(name);
+                          if (
+                            this.allGraphData[name].maxChainNum > this.maxChainNum
+                          ) {
+                            this.$message.error(this.$t('graph.tooManyChain'));
+                            this.allGraphData[name].isUnfold = true;
+                            this.selectedNode.name = name;
+                            this.loading.show = false;
+                            this.deleteNamespace(name);
+                            return;
+                          }
                         }
                         this.allGraphData[name].isUnfold = true;
                         this.selectedNode.name = `${name}_unfold`;
@@ -1075,12 +1086,15 @@ export default {
       // A maximum of 10 subnodes can be displayed on an aggregation node.
       const aggregationNodeLimit = 10;
       const idsGroup = [];
+      let maxChainNum = 1;
 
       this.allGraphData[name].children.forEach((key) => {
-        if (!this.allGraphData[key].grouped) {
-          const ids = this.getAssociatedNode(key, `${name}/`);
+        const ids = this.getAssociatedNode(key, `${name}/`);
+        if (ids.length) {
           idsGroup.push(ids);
         }
+        const chainNum = this.dealChainingData(key, `${name}/`);
+        maxChainNum = Math.max(...chainNum, maxChainNum);
       });
 
       const idsList = [];
@@ -1092,40 +1106,65 @@ export default {
           if (temp.length + idsGroup[i].length <= aggregationNodeLimit) {
             temp = temp.concat(idsGroup[i]);
           } else {
-            idsList.push(temp);
-            temp = [].concat(idsGroup[i]);
+            if (temp.length) {
+              idsList.push(temp);
+              temp = [].concat(idsGroup[i]);
+            }
           }
         }
-        if (i === idsGroup.length - 1) {
+        if (i === idsGroup.length - 1 && temp.length) {
           idsList.push(temp);
         }
       }
 
       this.allGraphData[name].childIdsList = idsList;
       this.allGraphData[name].index = 0;
+      this.allGraphData[name].maxChainNum = maxChainNum;
+    },
+
+    dealChainingData(name, prefix) {
+      const node = this.allGraphData[name];
+      if (!node.chained) {
+        node.chained = true;
+        let temp = [];
+        Object.keys(node.input).forEach((key) => {
+          if (key.includes(prefix)) {
+            temp = temp.concat(this.dealChainingData(key, prefix));
+          }
+        });
+
+        if (temp.length) {
+          node.chainNum = [...new Set(temp.map((i) => i + 1))];
+        }
+      }
+      return node.chainNum;
     },
 
     getAssociatedNode(name, prefix) {
       const node = this.allGraphData[name];
-      node.grouped = true;
       let ids = [];
-      ids.push(node.name);
-      Object.keys(node.input).forEach((i) => {
-        if (i.startsWith(prefix)) {
-          if (!this.allGraphData[i].grouped) {
-            const idsTemp = this.getAssociatedNode(i, prefix);
-            ids = ids.concat(idsTemp);
+
+      if (!node.grouped) {
+        node.grouped = true;
+        ids.push(node.name);
+        Object.keys(node.input).forEach((i) => {
+          if (i.startsWith(prefix)) {
+            if (!this.allGraphData[i].grouped) {
+              const idsTemp = this.getAssociatedNode(i, prefix);
+              ids = ids.concat(idsTemp);
+            }
           }
-        }
-      });
-      Object.keys(node.output).forEach((i) => {
-        if (i.startsWith(prefix)) {
-          if (!this.allGraphData[i].grouped) {
-            const idsTemp = this.getAssociatedNode(i, prefix);
-            ids = ids.concat(idsTemp);
+        });
+        Object.keys(node.output).forEach((i) => {
+          if (i.startsWith(prefix)) {
+            if (!this.allGraphData[i].grouped) {
+              const idsTemp = this.getAssociatedNode(i, prefix);
+              ids = ids.concat(idsTemp);
+            }
           }
-        }
-      });
+        });
+      }
+
       return ids;
     },
     /**
@@ -1157,7 +1196,8 @@ export default {
             `label="${name}";class="aggregation";` +
             `${
               node.isUnfold
-                ? `shape="polygon";width=${node.size[0]};height=${node.size[1]};fixedsize=true;`
+                ? `shape="polygon";width=${node.size[0]};` +
+                  `height=${node.size[1]};fixedsize=true;`
                 : 'shape="octagon";'
             }];`;
         } else if (node.type === 'name_scope') {
@@ -2285,6 +2325,8 @@ export default {
             node.size = [];
             node.html = '';
             node.grouped = false;
+            node.chained = false;
+            node.chainNum = [1];
             this.allGraphData[node.name] = node;
             this.allGraphData[name].children.push(node.name);
           });
@@ -2399,7 +2441,7 @@ export default {
       if (this.allGraphData[option.value]) {
         if (
           d3
-              .select(`g[id="${option.value}"],g[id="${option.value}_unfold"]`)
+              .select(`g[id="${option.value}"], g[id="${option.value}_unfold"]`)
               .size()
         ) {
           // If the namespace or aggregation node is expanded, you need to close it and select
@@ -2418,7 +2460,7 @@ export default {
             this.allGraphData[parentId].isUnfold
           ) {
             const aggregationNode = this.allGraphData[parentId];
-            if (aggregationNode) {
+            if (aggregationNode && aggregationNode.childIdsList) {
               for (let i = 0; i < aggregationNode.childIdsList.length; i++) {
                 if (aggregationNode.childIdsList[i].includes(option.value)) {
                   aggregationNode.index = i;
@@ -2487,7 +2529,6 @@ export default {
           ) {
             this.selectedNode.name = data.scope_name;
             this.querySingleNode({value: data.scope_name});
-            this.selectNode(true);
             this.$message.error(this.$t('graph.tooManyNodes'));
             this.$nextTick(() => {
               this.loading.show = false;
@@ -2513,6 +2554,19 @@ export default {
                   }
                 }
               }
+              if (
+                this.allGraphData[data.scope_name].maxChainNum >
+                this.maxChainNum
+              ) {
+                this.selectedNode.name = data.scope_name;
+                this.allGraphData[data.scope_name].isUnfold = false;
+                this.deleteNamespace(data.scope_name);
+                this.$message.error(this.$t('graph.tooManyChain'));
+                this.$nextTick(() => {
+                  this.loading.show = false;
+                });
+                return;
+              }
             }
 
             if (data.children.scope_name) {
-- 
GitLab