!881 UI fix bug of debugger page and update condition display

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

mindinsight/ui/src/locales/en-us.json

@@ -479,7 +479,9 @@
     "backstageStatus": "The backend running status is ",
     "view": "View",
     "deleteWatchpointConfirm": "Are you sure you want to delete the watchpoint?",
+    "clearWatchpointConfirm": "All watchpoints will be deleted. Are you sure you want to continue? ",
     "ternimateConfirm": "Are you sure you want to end the status?",
+    "createWP": "Create Watchpoint",
     "successCreateWP": "The watchpoint is created.",
     "successDeleteWP": "The watchpoint is deleted.",
     "pendingTips": "Waiting for training connection...",
@@ -514,7 +516,188 @@
     "zero": "0:",
     "positiveNum": "Positive number:",
     "negativeNum": "Negative number:",
-    "all": "All"
+    "all": "All",
+    "tensorTip": "tensor",
+    "recheck": "Recheck",
+    "clearWatchpoint": "Clear Watchpoint",
+    "nodeType": {
+      "all": "All",
+      "weight": "Weight",
+      "gradient": "Gradient",
+      "activation": "Activation"
+    },
+    "recheckSuccess": "Rechecked.",
+    "curStatisticsLabel": "Current Step:",
+    "preStatisticsLabel": "Previous Step:",
+    "diffStatisticsLabel": "Comparison Result:",
+    "graphFile": "Graph File",
+    "tensorDiagram": "Tensor Relationship Diagram",
+    "selectDetail": "Select a tensor and double-click it to view details.",
+    "operator": "Operator",
+    "jumpFailInformation": "Redirection fails because the tensor information is empty.",
+    "optimizationOrientation": "Optimization Guide",
+    "tuningAdvice": "Optimization Suggestions",
+    "tensorTuningRule": {
+      "operator_real_data_validation": "Real data validation using single operator",
+      "loss_overflow": "Loss overflow (NAN,INF)",
+      "weight_condition_collection": "Weight check",
+      "weight_initialization": "Initial weight value",
+      "weight_overflow": "Weight overflow",
+      "weight_too_large": "Weight above threshold",
+      "weight_too_small": "Weight below threshold",
+      "weight_not_changed": "Unchanged weight",
+      "weight_change_too_large": "Weight change above threshold",
+      "weight_change_too_small": "Weight change below threshold",
+      "gradient_condition_collection": "Gradient check",
+      "gradient_vanishing": "Gradient disappearance",
+      "gradient_too_large": "Gradient above threshold",
+      "gradient_exploding": "Gradient explosion",
+      "activation_condition_collection": "Activation value check",
+      "activation_range": "Activation value range",
+      "tensor_condition_collection": "Tensor check",
+      "tensor_overflow": "Tensor overflow",
+      "operator_overflow": "Operator overflow",
+      "tensor_initialization": "Initial tensor value",
+      "tensor_too_large": "Tensor above threshold",
+      "tensor_too_small": "Tensor below threshold",
+      "tensor_range": "Tensor value range",
+      "tensor_all_zero": "Whether tensor values are all 0",
+      "tensor_change_too_large": "Tensor change above threshold",
+      "tensor_change_too_small": "Tensor change below threshold",
+      "tensor_not_changed": "Unchanged tensor"
+    },
+    "tensorTuningAdvice": {
+      "operator_real_data_validation": [
+        "Real data validation using single operator",
+        "The operator may be faulty. You can perform the following operations to locate the fault:",
+        ["1.Check whether the operator implementation is correct."]
+      ],
+      "loss_overflow": [
+        "Loss overflow (NAN,INF)",
+        "Loss overflow occurs. This may be an anomaly. You can perform the following operations to locate the fault:",
+        [
+          "1.Check whether a tensor overflow occurs on a network. Find the first overflow tensor for further analysis."
+        ]
+      ],
+      "weight_initialization": [
+        "Initial weight value",
+        "The initial weight value may be incorrect. This may be an anomaly. You can perform the following operations to locate the fault:",
+        [
+          "1.Check whether the weight initialization algorithm in the script is correct."
+        ]
+      ],
+      "weight_overflow": [
+        "Weight overflow",
+        "Weight value overflow occurs. This may be an anomaly. You can perform the following operations to locate the fault:",
+        [
+          "1.Check whether the learning rate is too high.",
+          "2.Check whether the gradient is too large.",
+          "3.Check whether the optimizer algorithm is correct."
+        ]
+      ],
+      "weight_too_large": [
+        "Weight above threshold",
+        "The weight value is greater than the threshold. This may be an anomaly. You can perform the following operations to locate the fault:",
+        [
+          "1.Check whether the learning rate is correct.",
+          "2.Check whether the gradient is correct.",
+          "3.Check whether the optimizer algorithm is correct.",
+          "4.Check whether the weight before the update is too large."
+        ]
+      ],
+      "weight_too_small": [
+        "Weight below threshold",
+        "The weight value is less than the threshold. This may be an anomaly. You can perform the following operations to locate the fault:",
+        [
+          "1.Check whether the learning rate is correct.",
+          "2.Check whether the gradient is correct.",
+          "3.Check whether the optimizer algorithm is correct.",
+          "4.Check whether the weight before the update is too small."
+        ]
+      ],
+      "gradient_vanishing": [
+        "Gradient disappearance",
+        "Gradient disappears. This may be an anomaly. You can perform the following operations to locate the fault:",
+        ["1.Check whether the input tensor of the operator is normal."]
+      ],
+      "gradient_too_large": [
+        "Gradient above threshold",
+        "The gradient value is greater than the threshold. This may be an anomaly. You can perform the following operations to locate the fault:",
+        ["1.Check whether the input tensor of the operator is normal."]
+      ],
+      "gradient_exploding": [
+        "Gradient explosion",
+        "Gradient value overflows. This may be an anomaly. You can perform the following operations to locate the fault:",
+        ["1.Check whether the input tensor of the operator is normal."]
+      ],
+      "activation_range": [
+        "Activation value range",
+        "The activation value range is not within the specified range. This may be an anomaly. You can perform the following operations to locate the fault:",
+        ["1.Check whether the input tensor of the operator is normal."]
+      ],
+      "tensor_overflow": [
+        "Tensor overflow",
+        "Tensor overflows. This may be an anomaly. You can perform the following operations to locate the fault:",
+        ["1.Check whether the input tensor of the operator is normal."]
+      ],
+      "operator_overflow": [
+        "Operator overflow",
+        "Overflow occurs during operator computation. This may be an anomaly. You can perform the following operations to locate the fault:",
+        ["1.Check whether the input tensor of the operator is normal."]
+      ],
+      "tensor_too_large": [
+        "Tensor above threshold",
+        "The tensor is greater than the threshold. This may be an anomaly. You can perform the following operations to locate the fault:",
+        ["1.Check whether the input tensor of the operator is normal."]
+      ],
+      "tensor_too_small": [
+        "Tensor below threshold",
+        "The tensor is less than the threshold. This may be an anomaly. You can perform the following operations to locate the fault:",
+        ["1.Check whether the input tensor of the operator is normal."]
+      ],
+      "tensor_range": [
+        "Tensor value range",
+        "The tensor value range is not within the configured range. This may be an anomaly. You can perform the following operations to locate the fault:",
+        ["1.Check whether the input tensor of the operator is normal."]
+      ],
+      "tensor_all_zero": [
+        "Whether tensor values are all 0",
+        "There are too many 0 values in a tensor. This may be an anomaly. You can perform the following operations to locate the fault:",
+        ["1.Check whether the input tensor of the operator is normal."]
+      ],
+      "weight_not_changed": [
+        "Unchanged weight",
+        "The weight is not updated. This may be an anomaly. You can perform the following operations to locate the fault:",
+        [
+          "1.Check whether the learning rate is too low.",
+          "2.Check whether the gradient is too small.",
+          "3.Check whether the optimizer algorithm is correct.",
+          "4.Check whether the weight is fixed."
+        ]
+      ],
+      "weight_change_too_large": [
+        "Weight change above threshold",
+        "The weight change is greater than the threshold. This may be an anomaly. You can perform the following operations to locate the fault:",
+        [
+          "1.Check whether the learning rate is correct.",
+          "2.Check whether the gradient is correct.",
+          "3.Check whether the optimizer algorithm is correct."
+        ]
+      ],
+      "weight_change_too_small": [
+        "Weight change below threshold",
+        "The weight change is less than the threshold. This may be an anomaly. You can perform the following operations to locate the fault:",
+        [
+          "1.Check whether the learning rate is correct.",
+          "2.Check whether the gradient is correct.",
+          "3.Check whether the optimizer algorithm is correct."
+        ]
+      ]
+    },
+    "noAdvice": "No suggestions available",
+    "curStep": "Current Step",
+    "preStep": "Previous Step",
+    "compareResult": "Comparison Result"
   },
   "explain": {
     "explain": "Model Explanation",

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

@@ -567,6 +567,131 @@
       "tensor_change_too_small": "检查张量变化过小",
       "tensor_not_changed": "检查未变化张量"
     },
+    "tensorTuningAdvice": {
+      "operator_real_data_validation": [
+        "真实数据单算子验证",
+        "算子可能存在问题。您可以参考以下思路进行检查：",
+        ["1.请检查算子实现是否存在错误。"]
+      ],
+      "loss_overflow": [
+        "检查loss值溢出（NAN，INF）",
+        "loss存在溢出现象。这可能是一个异常现象。您可以参考以下思路进行检查：",
+        ["1.检查网络中的张量是否存在溢出，找到第一个溢出的张量后进行进一步分析"]
+      ],
+      "weight_initialization": [
+        "检查权重初始值",
+        "权重初始值可能存在问题。这可能是一个异常现象。您可以参考以下思路进行检查：",
+        ["1.请检查脚本中的权重初始化算法是否存在问题"]
+      ],
+      "weight_overflow": [
+        "检查权重溢出",
+        "权重值存在溢出现象。这可能是一个异常现象。您可以参考以下思路进行检查：",
+        [
+          "1.请检查学习率是否过大",
+          "2.请检查梯度是否过大",
+          "3.请检查优化器算法是否正确"
+        ]
+      ],
+      "weight_too_large": [
+        "检查过大权重",
+        "权重值大于设置的阈值。这可能是一个异常现象。您可以参考以下思路进行检查：",
+        [
+          "1.请检查学习率是否正确",
+          "2.请检查梯度是否正确",
+          "3.请检查优化器算法是否正确",
+          "4.请检查更新前的权重是否过大"
+        ]
+      ],
+      "weight_too_small": [
+        "检查过小权重",
+        "权重值小于设置的阈值。这可能是一个异常现象。您可以参考以下思路进行检查：",
+        [
+          "1.请检查学习率是否正确",
+          "2.请检查梯度是否正确",
+          "3.请检查优化器算法是否正确",
+          "4.请检查更新前的权重是否过小"
+        ]
+      ],
+      "gradient_vanishing": [
+        "检查梯度消失",
+        "存在梯度消失现象。这可能是一个异常现象。您可以参考以下思路进行检查：",
+        ["1.请检查算子的输入张量是否正常"]
+      ],
+      "gradient_too_large": [
+        "检查梯度过大",
+        "梯度值大于设置的阈值。这可能是一个异常现象。您可以参考以下思路进行检查：",
+        ["1.请检查算子的输入张量是否正常"]
+      ],
+      "gradient_exploding": [
+        "检查梯度爆炸",
+        "梯度值溢出。这可能是一个异常现象。您可以参考以下思路进行检查：",
+        ["1.请检查算子的输入张量是否正常"]
+      ],
+      "activation_range": [
+        "检查激活值范围",
+        "激活值范围不在设置的范围中。这可能是一个异常现象。您可以参考以下思路进行检查：",
+        ["1.请检查算子的输入张量是否正常"]
+      ],
+      "tensor_overflow": [
+        "检查张量溢出",
+        "张量溢出。这可能是一个异常现象。您可以参考以下思路进行检查：",
+        ["1.请检查算子的输入张量是否正常"]
+      ],
+      "operator_overflow": [
+        "检查计算过程溢出",
+        "算子计算过程中发生了溢出。这可能是一个异常现象。您可以参考以下思路进行检查：",
+        ["1.请检查算子的输入张量是否正常"]
+      ],
+      "tensor_too_large": [
+        "检查过大张量",
+        "张量大于设置的阈值。这可能是一个异常现象。您可以参考以下思路进行检查：",
+        ["1.请检查算子的输入张量是否正常"]
+      ],
+      "tensor_too_small": [
+        "检查过小张量",
+        "张量小于设置的阈值。这可能是一个异常现象。您可以参考以下思路进行检查：",
+        ["1.请检查算子的输入张量是否正常"]
+      ],
+      "tensor_range": [
+        "检查张量值范围",
+        "张量值范围不在设置的范围中。这可能是一个异常现象。您可以参考以下思路进行检查：",
+        ["1.请检查算子的输入张量是否正常"]
+      ],
+      "tensor_all_zero": [
+        "检查张量是否全为0",
+        "张量中有太多0。这可能是一个异常现象。您可以参考以下思路进行检查：",
+        ["1.请检查算子的输入张量是否正常"]
+      ],
+      "weight_not_changed": [
+        "检查未变化权重",
+        "权重未更新。这可能是一个异常现象。您可以参考以下思路进行检查：",
+        [
+          "1.请检查学习率是否过小",
+          "2.请检查梯度是否过小",
+          "3.请检查优化器算法是否正确",
+          "4.请检查是否固定了此权重"
+        ]
+      ],
+      "weight_change_too_large": [
+        "检查权重变化过大",
+        "权重变化大于设置的阈值。这可能是一个异常现象。您可以参考以下思路进行检查：",
+        [
+          "1.请检查学习率是否正确",
+          "2.请检查梯度是否正确",
+          "3.请检查优化器算法是否正确"
+        ]
+      ],
+      "weight_change_too_small": [
+        "检查权重变化过小",
+        "权重变化小于设置的阈值。这可能是一个异常现象。您可以参考以下思路进行检查：",
+        [
+          "1.请检查学习率是否正确",
+          "2.请检查梯度是否正确",
+          "3.请检查优化器算法是否正确"
+        ]
+      ]
+    },
+    "noAdvice": "没有可用的建议",
     "curStep": "显示当前step",
     "preStep": "显示上一step",
     "compareResult": "显示对比结果"

mindinsight/ui/src/mixins/debuggerMixin.vue

@@ -98,6 +98,12 @@ export default {
                 this.showFilterInput = true;
               }
               const tensorValue = res.data.tensor_value;
+              const statistics = tensorValue.statistics || {};
+              this.statisticsArr = [
+                tensorValue.curr_step_statistics || {},
+                tensorValue.prev_step_statistics || {},
+                tensorValue.statistics || {},
+              ];
               if (tensorValue.diff === 'Too large to show.') {
                 this.tensorValue = [];
                 this.$nextTick(() => {
@@ -118,12 +124,7 @@ export default {
               ) {
                 this.tensorValue = [this.tensorValue];
               }
-              const statistics = tensorValue.statistics || {};
-              this.statisticsArr = [
-                tensorValue.curr_step_statistics || {},
-                tensorValue.prev_step_statistics || {},
-                tensorValue.statistics || {},
-              ];
+
               this.$nextTick(() => {
                 this.$refs.tensorValue.updateGridData(
                     this.tensorValue,
@@ -219,6 +220,9 @@ export default {
       if (this.step === 0) {
         this.step = 1;
       }
+      if (this.step >= 1000000000) {
+        this.step = 999999999;
+      }
     },
     /**
      * Query current node info
@@ -595,6 +599,8 @@ export default {
             }
             if (res.data.tensor_value) {
               const value = res.data.tensor_value.value;
+              const statistics = res.data.tensor_value.statistics || {};
+              this.statisticsArr = [statistics];
               if (value === 'Too large to show.') {
                 this.tensorValue = [];
                 this.$nextTick(() => {
@@ -608,8 +614,6 @@ export default {
                 return;
               }
               this.tensorValue = value instanceof Array ? value : [value];
-              const statistics = res.data.tensor_value.statistics || {};
-              this.statisticsArr = [statistics];
               this.$nextTick(() => {
                 this.$refs.tensorValue.updateGridData(
                     this.tensorValue,
@@ -657,14 +661,22 @@ export default {
           this.metadata.graph_name = metadata.graph_name
             ? metadata.graph_name
             : this.metadata.graph_name;
-          let graphName = this.graphFiles.value;
-          if (this.graphFiles.value === this.$t('debugger.all')) {
+          let graphName =
+            this.graphFiles.value === this.$t('debugger.all')
+              ? ''
+              : this.graphFiles.value;
+          if (
+            this.graphFiles.value === this.$t('debugger.all') &&
+            this.selectedNode.name
+          ) {
             graphName = this.selectedNode.name.split('/')[0];
           }
           if (metadata.graph_name) {
             graphName = metadata.graph_name;
           }
-          this.queryAllTreeData(this.nodeName, true, graphName);
+          if (this.nodeName) {
+            this.queryAllTreeData(this.nodeName, true, graphName);
+          }
         }
       }
       if (metadata.step && metadata.step > this.metadata.step) {
@@ -717,32 +729,6 @@ export default {
                 this.radio1 = 'hit';
                 this.dealWatchpointHits(res.data.watch_point_hits);
               }
-              if (
-                res.data.tensor_history &&
-              this.metadata.step <= res.data.metadata.step
-              ) {
-                setTimeout(() => {
-                  const tableData = res.data.tensor_history;
-
-                  if (this.tableData.length) {
-                    this.tableData.forEach((val, key, arr) => {
-                      tableData.forEach((value) => {
-                        if (val.name === value.name) {
-                          val.dtype = value.dtype;
-                          val.shape = value.shape;
-                          val.step = value.step;
-                          val.value = value.value;
-                        }
-                      });
-                    });
-                  } else {
-                    this.tableData = tableData;
-                  }
-
-                  this.dealTableData(this.tableData);
-                  this.tableData = JSON.parse(JSON.stringify(this.tableData));
-                }, 200);
-              }
               this.pollData();
             }
           },
@@ -1029,6 +1015,7 @@ export default {
      */
     dealCheckPro(childNodes, check) {
       childNodes.forEach((val) => {
+        val.indeterminate = false;
         val.checked = check;
         if (val.childNodes) {
           this.dealCheckPro(val.childNodes, check);
@@ -1039,8 +1026,6 @@ export default {
      * Add watchpoint
      */
     addWatchPoint() {
-      this.searchWord = '';
-      this.treeFlag = true;
       this.createWatchPointArr.push({
         collection: {
           selectedId: this.conditionCollections[0].id,
@@ -1075,7 +1060,7 @@ export default {
      * Function to be executed after the search value changes
      */
     filterChange() {
-      if (this.searchWord === '') {
+      if (this.searchWord === '' && this.nodeTypes.value === 'all') {
         this.treeFlag = true;
         this.$nextTick(() => {
           setTimeout(() => {
@@ -1093,6 +1078,7 @@ export default {
      * Filter tree data by node name
      */
     filter() {
+      this.treeFlag = this.searchWord === '' && this.nodeTypes.value === 'all';
       if (this.searchWord || this.nodeTypes.value !== 'all') {
         const params = {
           name: this.searchWord,
@@ -1108,12 +1094,10 @@ export default {
         RequestService.search(params).then(
             (res) => {
               if (res.data && res.data.nodes) {
-                this.treeFlag = false;
                 this.searchTreeData = res.data.nodes;
                 this.searchCheckedArr = [];
                 this.dealSearchResult(this.searchTreeData);
                 this.defaultCheckedArr = this.searchCheckedArr;
-                this.treeFlag = false;
                 this.searchNode.childNodes = [];
                 const data = res.data.nodes.map((val) => {
                   return {
@@ -1439,12 +1423,15 @@ export default {
                   selected: false,
                 };
               });
+
               if (focusLast) {
-                this.loadOriginalTree();
-                this.$refs.tree.getCheckedKeys().forEach((val) => {
-                  this.$refs.tree.setChecked(val, false);
-                });
-                this.defaultCheckedArr = [];
+                if (this.nodeTypes.value === 'all' && !this.searchWord) {
+                  this.loadOriginalTree();
+                  this.$refs.tree.getCheckedKeys().forEach((val) => {
+                    this.$refs.tree.setChecked(val, false);
+                  });
+                  this.defaultCheckedArr = [];
+                }
 
                 const obj = this.watchPointArr[this.watchPointArr.length - 1];
                 obj.selected = true;
@@ -1595,37 +1582,40 @@ export default {
       }
     },
     focusWatchpointHit() {
-      let selectedNodeName = this.selectedNode.name;
-      if (this.graphFiles.value === this.$t('debugger.all')) {
-        selectedNodeName = selectedNodeName.replace(
-            `${selectedNodeName.split('/')[0]}/`,
-            '',
-        );
-      }
-      this.expandKeys = [];
-      this.watchPointHits.forEach((val) => {
-        if (val.name === selectedNodeName) {
-          val.selected = true;
-          this.expandKeys.push(val.id);
-        } else {
-          val.selected = false;
+      if (this.selectedNode.name) {
+        let selectedNodeName = this.selectedNode.name;
+        if (this.graphFiles.value === this.$t('debugger.all')) {
+          selectedNodeName = selectedNodeName.replace(
+              `${selectedNodeName.split('/')[0]}/`,
+              '',
+          );
         }
-      });
-      this.$nextTick(() => {
-        setTimeout(() => {
-          const dom = document.querySelector('.hit-item.selected');
-          if (dom) {
-            dom.scrollIntoView();
+        this.expandKeys = [];
+        this.watchPointHits.forEach((val) => {
+          if (val.name === selectedNodeName) {
+            val.selected = true;
+            this.expandKeys.push(val.id);
+          } else {
+            val.selected = false;
           }
-        }, 200);
-      });
+        });
+        this.$nextTick(() => {
+          setTimeout(() => {
+            const dom = document.querySelector('.hit-item.selected');
+            if (dom) {
+              dom.scrollIntoView();
+            }
+          }, 200);
+        });
+      }
     },
     /**
      * Update tensor value
      * @param {number} key The index of the node of the watchPointHits currently clicked
      */
     updateTensorValue(key) {
-      const name = this.watchPointHits[key].name;
+      const currentHit = this.watchPointHits[key];
+      const name = currentHit.name;
       const temName = this.nodeName;
       this.nodeName = name;
       this.isHitIntoView = false;
@@ -1635,14 +1625,12 @@ export default {
           name,
           single_node: true,
           watch_point_id: this.curWatchPointId ? this.curWatchPointId : 0,
-          graph_name: this.watchPointHits[key].graph_name,
+          graph_name: currentHit.graph_name,
         },
       };
       if (this.graphFiles.value === this.$t('debugger.all')) {
         delete params.params.graph_name;
-        params.params.name = `${this.watchPointHits[key].graph_name}/${name}`;
-      } else {
-        this.graphFiles.value = this.watchPointHits[key].graph_name;
+        params.params.name = `${currentHit.graph_name}/${name}`;
       }
       this.watchPointHits.forEach((val, index) => {
         if (key === index) {
@@ -1659,19 +1647,28 @@ export default {
             }
             this.retrieveTensorHistory(
                 {name: this.nodeName},
-                this.watchPointHits[key].graph_name,
+                currentHit.graph_name,
             );
             if (res.data && res.data.graph) {
               const graph = res.data.graph;
+
+              if (
+                this.graphFiles.value !== currentHit.graph_name &&
+              this.graphFiles.value !== this.$t('debugger.all')
+              ) {
+                this.graphFiles.value = currentHit.graph_name;
+                this.resetAllData(graph, params.params.name);
+              } else {
+                this.querySingleNode(
+                    JSON.parse(JSON.stringify(graph)),
+                    params.params.name,
+                    true,
+                );
+              }
               if (graph.children) {
                 this.dealTreeData(graph.children, name);
                 this.defaultCheckedArr = this.$refs.tree.getCheckedKeys();
               }
-              this.querySingleNode(
-                  JSON.parse(JSON.stringify(graph)),
-                  params.params.name,
-                  true,
-              );
             }
           },
           (err) => {
@@ -1696,11 +1693,13 @@ export default {
           watch_point_id: this.curWatchPointId ? this.curWatchPointId : 0,
         },
       };
-      if (this.graphFiles.value === this.$t('debugger.all')) {
-        if (graphName !== name) {
-          name = `${graphName}/${name}`;
-          params.params.name = name;
-        }
+      if (
+        this.graphFiles.value === this.$t('debugger.all') &&
+        graphName &&
+        name
+      ) {
+        name = `${graphName}/${name}`;
+        params.params.name = name;
       } else {
         params.params.graph_name = graphName;
       }
@@ -1712,42 +1711,8 @@ export default {
             if (res.data && res.data.graph) {
               const graph = res.data.graph;
               if (graph.nodes && !this.isCurrentGraph) {
-                this.node.childNodes = [];
-                this.origialTree = graph.nodes.map((val) => {
-                  return {
-                    label: val.name.split('/').pop(),
-                    leaf:
-                    val.type === 'name_scope' ||
-                    val.type === 'aggregation_scope'
-                      ? false
-                      : true,
-                    ...val,
-                  };
-                });
-                this.resolve(this.origialTree);
-                this.node.childNodes.forEach((val) => {
-                  if (val.data.watched === 2) {
-                    val.checked = true;
-                  }
-                  if (val.data.watched === 1) {
-                    val.indeterminate = true;
-                  }
-                });
+                this.resetAllData(graph, name);
                 this.isCurrentGraph = true;
-                this.firstFloorNodes = [];
-                this.allGraphData = {};
-                d3.select('#graph svg').remove();
-                this.selectedNode.name = '';
-                this.packageDataToObject(
-                    '',
-                    true,
-                    JSON.parse(JSON.stringify(graph.nodes)),
-                );
-                this.querySingleNode(
-                    JSON.parse(JSON.stringify(graph)),
-                    name,
-                    true,
-                );
               } else {
                 this.querySingleNode(
                     JSON.parse(JSON.stringify(graph)),
@@ -1827,6 +1792,41 @@ export default {
         this.dealTreeData(children.children, name);
       }
     },
+    resetAllData(graph, name) {
+      this.node.childNodes = [];
+      this.origialTree = graph.nodes.map((val) => {
+        return {
+          label: val.name.split('/').pop(),
+          leaf:
+            val.type === 'name_scope' || val.type === 'aggregation_scope'
+              ? false
+              : true,
+          ...val,
+        };
+      });
+      this.resolve(this.origialTree);
+      this.node.childNodes.forEach((val) => {
+        if (val.data.watched === 2) {
+          val.checked = true;
+        }
+        if (val.data.watched === 1) {
+          val.indeterminate = true;
+        }
+      });
+      this.firstFloorNodes = [];
+      this.allGraphData = {};
+      d3.select('#graph svg').remove();
+      this.packageDataToObject(
+          '',
+          true,
+          JSON.parse(JSON.stringify(graph.nodes)),
+      );
+      if (name) {
+        this.querySingleNode(JSON.parse(JSON.stringify(graph)), name, true);
+      } else {
+        this.resetGraph();
+      }
+    },
   },
 };
 </script>

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

@@ -69,7 +69,7 @@ limitations under the License.
           </div>
           <div class="tree-wrap">
             <div class="select-all-files"
-                 v-if="curWatchPointId">
+                 v-if="curWatchPointId && treeFlag">
               <el-button type="primary"
                          size="mini"
                          class="custom-btn"
@@ -209,7 +209,9 @@ limitations under the License.
                 <template slot-scope="scope">
                   <div class="hit-item"
                        :class="{selected:scope.row.selected}"
-                       @click="updateTensorValue(scope.$index)">{{scope.row.name}}</div>
+                       @click="updateTensorValue(scope.$index)">
+                    {{scope.row.graph_name}}/{{scope.row.name}}
+                  </div>
                 </template>
               </el-table-column>
             </el-table>
@@ -217,11 +219,17 @@ limitations under the License.
         </div>
         <div class="btn-wrap">
           <div class="step">
-            <el-input v-model="step"
-                      :placeholder="$t('debugger.inputStep')"
-                      @input="stepChange"
-                      @keyup.native.enter="control(0)">
-            </el-input>
+            <el-tooltip class="item"
+                        effect="light"
+                        :content="$t('debugger.inputTip')"
+                        placement="top-start">
+              <el-input v-model="step"
+                        :placeholder="$t('debugger.inputStep')"
+                        @input="stepChange"
+                        @keyup.native.enter="control(0)">
+              </el-input>
+            </el-tooltip>
+
             <el-button type="primary"
                        size="mini"
                        class="custom-btn green"
@@ -489,8 +497,8 @@ limitations under the License.
           <span>{{ $t('tensors.dimension') }} {{ curRowObj.shape }}</span>
           <div v-for="(statistics,key) in statisticsArr"
                :key="key">
-            <label v-if="key===0">{{$t('debugger.curStatisticsLabel')}}</label>
-            <label v-if="key===1">{{$t('debugger.preStatisticsLabel')}}</label>
+            <label v-if="key===0">{{$t('debugger.curStatisticsLabel')}}<span>{{ metadata.step }}</span></label>
+            <label v-if="key===1">{{$t('debugger.preStatisticsLabel')}}<span>{{ metadata.step-1 }}</span></label>
             <label v-if="key===2">{{$t('debugger.diffStatisticsLabel')}}</label>
             <span>{{ $t('debugger.max') }} {{ statistics.overall_max }}</span>
             <span>{{ $t('debugger.min') }} {{ statistics.overall_min }}</span>
@@ -822,7 +830,11 @@ export default {
       );
     },
     selectAllFiles(type) {
-      if (!type && !this.$refs.tree.getCheckedKeys().length) {
+      if (
+        !type &&
+        !this.$refs.tree.getCheckedKeys().length &&
+        !this.$refs.tree.getHalfCheckedKeys().length
+      ) {
         return;
       }
       if (type && !this.node.childNodes.find((val) => val.checked === false)) {
@@ -830,9 +842,10 @@ export default {
       }
       const watchNodes = [];
       this.node.childNodes.forEach((val) => {
-        if (type !== val.checked) {
+        if (type !== val.checked || (!type && val.indeterminate)) {
           watchNodes.push(val.data.name);
         }
+        val.indeterminate = false;
         val.checked = type;
 
         if (val.childNodes) {
@@ -1214,10 +1227,7 @@ export default {
                 if (response && response.data && response.data.graph) {
                   const graph = response.data.graph;
                   const nodes = JSON.parse(JSON.stringify(graph.nodes));
-                  if (this.treeFlag) {
-                    this.nodeExpandLinkage(nodes, name);
-                  }
-
+                  this.nodeExpandLinkage(nodes, name);
                   this.dealGraphData(nodes, name);
                 }
               },