UI optimizing condition display of creating watch point in debugger page

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

@@ -519,9 +519,6 @@
     "tensorTip": "张量",
     "recheck": "重新检查",
     "clearWatchpoint": "清空监测点",
-    "addWatchpoint": "新增监测点",
-    "chooseTemp": "请选择模板",
-    "chooseParam": "请选择参数",
     "nodeType": {
       "all": "全部节点",
       "weight": "权重节点",
@@ -531,10 +528,48 @@
     "recheckSuccess": "重新检查成功",
     "curStatisticsLabel": "当前step：",
     "preStatisticsLabel": "上一个step：",
-    "diffStatisticsLabel": "diff：",
+    "diffStatisticsLabel": "对比结果：",
     "graphFile": "图文件",
-    "selectAll": "全选",
-    "selectNone": "取消全选"
+    "tensorDiagram": "张量关系图",
+    "selectDetail": "单击张量选中，双击张量查看详情",
+    "operator": "算子",
+    "jumpFailInformation": "跳转失败，张量信息为空",
+    "tensorMax": "最大值",
+    "tensorMin": "最小值",
+    "optimizationOrientation": "调优向导",
+    "tuningAdvice": "调优建议",
+    "tensorTuningRule": {
+      "operator_real_data_validation": "真实数据单算子验证",
+      "loss_overflow": "检查loss值溢出（NAN，INF）",
+      "weight_condition_collection": "检查权重",
+      "weight_initialization": "检查权重初始值",
+      "weight_overflow": "检查权重溢出",
+      "weight_too_large": "检查过大权重",
+      "weight_too_small": "检查过小权重",
+      "weight_not_changed": "检查未变化权重",
+      "weight_change_too_large": "检查权重变化过大",
+      "weight_change_too_small": "检查权重变化过小",
+      "gradient_condition_collection": "检查梯度",
+      "gradient_vanishing": "检查梯度消失",
+      "gradient_too_large": "检查梯度过大",
+      "gradient_exploding": "检查梯度爆炸",
+      "activation_condition_collection": "检查激活值",
+      "activation_range": "检查激活值范围",
+      "tensor_condition_collection": "检查张量",
+      "tensor_overflow": "检查张量溢出",
+      "operator_overflow": "检查计算过程溢出",
+      "tensor_initialization": "检查张量初始值",
+      "tensor_too_large": "检查过大张量",
+      "tensor_too_small": "检查过小张量",
+      "tensor_range": "检查张量值范围",
+      "tensor_all_zero": "检查张量是否全为0",
+      "tensor_change_too_large": "检查张量变化过大",
+      "tensor_change_too_small": "检查张量变化过小",
+      "tensor_not_changed": "检查未变化张量"
+    },
+    "curStep": "显示当前step",
+    "preStep": "显示上一step",
+    "compareResult": "显示对比结果"
   },
   "explain": {
     "explain": "模型解释",

mindinsight/ui/src/mixins/commonGraph.vue

@@ -129,9 +129,11 @@ export default {
      */
     nodeCollapseLinkage(name) {
       const node = this.$refs.tree.getNode(name.replace('_unfold', ''));
-      node.expanded = false;
-      node.loaded = false;
-      node.childNodes = [];
+      if (node) {
+        node.expanded = false;
+        node.loaded = false;
+        node.childNodes = [];
+      }
     },
     /**
      * Initializing the graph

mindinsight/ui/src/mixins/debuggerMixin.vue

@@ -4,6 +4,11 @@ import {select, selectAll, zoom, dispatch} from 'd3';
 import 'd3-graphviz';
 const d3 = {select, selectAll, zoom, dispatch};
 export default {
+  data() {
+    return {
+      conditionRulesMap: this.$t('debugger.tensorTuningRule'),
+    };
+  },
   methods: {
     toleranceInputChange() {
       this.toleranceInput = this.tolerance;
@@ -150,7 +155,9 @@ export default {
         return '';
       }
       let temp;
-      if (str.endsWith('_lt')) {
+      if (this.conditionRulesMap[str]) {
+        temp = this.conditionRulesMap[str];
+      } else if (str.endsWith('_lt')) {
         temp = str.replace(/_lt$/, ' <');
       } else if (str.endsWith('_gt')) {
         temp = str.replace(/_gt$/, ' >');
@@ -159,6 +166,10 @@ export default {
       } else {
         temp = str;
       }
+
+      if (temp.includes('max_min')) {
+        temp = temp.replace('max_min', 'max-min');
+      }
       return temp;
     },
     /**
@@ -646,7 +657,14 @@ export default {
           this.metadata.graph_name = metadata.graph_name
             ? metadata.graph_name
             : this.metadata.graph_name;
-          this.queryAllTreeData(this.nodeName, true, metadata.graph_name);
+          let graphName = this.graphFiles.value;
+          if (this.graphFiles.value === this.$t('debugger.all')) {
+            graphName = this.selectedNode.name.split('/')[0];
+          }
+          if (metadata.graph_name) {
+            graphName = metadata.graph_name;
+          }
+          this.queryAllTreeData(this.nodeName, true, graphName);
         }
       }
       if (metadata.step && metadata.step > this.metadata.step) {
@@ -1345,8 +1363,12 @@ export default {
             node_type: node.data.type,
             watch_point_id: this.curWatchPointId ? this.curWatchPointId : 0,
             name: node.data.name,
+            graph_name: this.graphFiles.value,
           },
         };
+        if (this.graphFiles.value === this.$t('debugger.all')) {
+          delete params.params.graph_name;
+        }
         RequestService.retrieve(params).then((res) => {
           if (res.data && res.data.metadata) {
             this.dealMetadata(res.data.metadata);

mindinsight/ui/src/views/debugger/debugger.vue

@@ -53,7 +53,8 @@ limitations under the License.
               <el-option v-for="item in nodeTypes.options"
                          :key="item"
                          :label="nodeTypes.label[item]"
-                         :value="item">
+                         :value="item"
+                         :class="{'deb-indent': item != 'all'}">
               </el-option>
             </el-select>
           </div>
@@ -68,16 +69,15 @@ limitations under the License.
           </div>
           <div class="tree-wrap">
             <div class="select-all-files"
-                 v-if="curWatchPointId && graphFiles.options.length > 1 &&
-                 graphFiles.value === $t('debugger.all')">
+                 v-if="curWatchPointId">
               <el-button type="primary"
                          size="mini"
                          class="custom-btn"
-                         @click="selectAllFiles(true)">{{ $t('debugger.selectAll') }}</el-button>
+                         @click="selectAllFiles(true)">{{ $t('public.selectAll') }}</el-button>
               <el-button type="primary"
                          size="mini"
                          class="custom-btn"
-                         @click="selectAllFiles(false)">{{ $t('debugger.selectNone') }}</el-button>
+                         @click="selectAllFiles(false)">{{ $t('public.deselectAll') }}</el-button>
             </div>
             <el-tree v-show="treeFlag"
                      :props="props"
@@ -159,7 +159,7 @@ limitations under the License.
               </div>
               <div class="add-wrap">
                 <i class="el-icon-circle-plus"
-                   :title="$t('debugger.addWatchpoint')"
+                   :title="$t('debugger.createWP')"
                    @click="addWatchPoint"></i>
               </div>
             </div>
@@ -507,6 +507,7 @@ limitations under the License.
     </div>
     <el-dialog :title="$t('debugger.createWP')"
                :visible.sync="createWPDialogVisible"
+               :show-close="false"
                :close-on-click-modal="false"
                :modal-append-to-body="false"
                class="creat-watch-point-dialog"
@@ -517,7 +518,6 @@ limitations under the License.
              v-for="(item, index) in createWatchPointArr"
              :key="index">
           <el-select v-model="item.collection.selectedId"
-                     :placeholder="$t('debugger.chooseTemp')"
                      class="collection"
                      @change="collectionChange(item)">
             <el-option v-for="i in conditionCollections"
@@ -527,7 +527,6 @@ limitations under the License.
             </el-option>
           </el-select>
           <el-select v-model="item.condition.selectedId"
-                     :placeholder="$t('debugger.chooseTemp')"
                      class="condition"
                      @change="conditionChange(item)">
             <el-option v-for="i in item.condition.options"
@@ -538,7 +537,6 @@ limitations under the License.
           </el-select>
 
           <el-select v-model="item.param.name"
-                     :placeholder="$t('debugger.chooseParam')"
                      @change="paramChange(item)"
                      v-if="item.param.options.length"
                      class="param">
@@ -832,8 +830,11 @@ export default {
       }
       const watchNodes = [];
       this.node.childNodes.forEach((val) => {
+        if (type !== val.checked) {
+          watchNodes.push(val.data.name);
+        }
         val.checked = type;
-        watchNodes.push(val.data.name);
+
         if (val.childNodes) {
           this.dealCheckPro(val.childNodes, type);
         }
@@ -2143,12 +2144,15 @@ export default {
       width: 200px;
     }
     .condition {
+      margin-left: 10px;
       width: 200px;
     }
     .param {
+      margin-left: 10px;
       width: 200px;
     }
     .param-value {
+      margin-left: 10px;
       width: 200px;
     }
   }
@@ -2301,6 +2305,9 @@ export default {
     }
   }
 }
+.deb-indent {
+  padding-left: 40px;
+}
 #graphTemp,
 #subgraphTemp {
   position: absolute;