!272 fix graph bug which can not open aggregation scope node

Merge pull request !272 from WeiFeng-mindinsight/myMaster

mindinsight/ui/src/components/autocomplete.vue

@@ -15,16 +15,14 @@ limitations under the License.
 -->
 
 <template>
-  <div
-    class="el-autocomplete"
+  <div class="el-autocomplete"
        v-clickoutside="close"
        aria-haspopup="listbox"
        role="combobox"
        :aria-expanded="suggestionVisible"
-    :aria-owns="id"
-  >
-    <el-input
-      ref="input"
+       :aria-owns="id">
+    <el-input ref="input"
+              class="rtl-item"
               v-bind="[$props, $attrs]"
               @input="handleChange"
               @focus="handleFocus"
@@ -33,40 +31,40 @@ limitations under the License.
               @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">
+              @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
+    <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"
+                                 :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"
-      >
+          :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>

mindinsight/ui/src/locales/zh-cn.json

@@ -205,7 +205,8 @@
     "guideContent3": "计算图中存在数据边和控制边。其中数据边表示数据的输入，控制边表示节点之间执行依赖关系。",
     "next": "下一步",
     "finish": "完成",
-    "dataTooLarge": "节点和边的数量过多，导致打开失败"
+    "dataTooLarge": "节点和边的数量过多，导致打开失败",
+    "tooManyChain": "直接子节点的深度超过70，不支持展开"
   },
   "operator": {
     "titleText": "性能分析",

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}/`);
+        if (ids.length) {
           idsGroup.push(ids);
         }
+        const chainNum = this.dealChainingData(key, `${name}/`);
+        maxChainNum = Math.max(...chainNum, maxChainNum);
       });
 
       const idsList = [];
@@ -1092,23 +1106,46 @@ export default {
           if (temp.length + idsGroup[i].length <= aggregationNodeLimit) {
             temp = temp.concat(idsGroup[i]);
           } else {
+            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 = [];
+
+      if (!node.grouped) {
+        node.grouped = true;
         ids.push(node.name);
         Object.keys(node.input).forEach((i) => {
           if (i.startsWith(prefix)) {
@@ -1126,6 +1163,8 @@ export default {
             }
           }
         });
+      }
+
       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) {