diff --git a/mindinsight/ui/src/locales/en-us.json b/mindinsight/ui/src/locales/en-us.json
index 15a984c1..5bcaa0f8 100644
--- a/mindinsight/ui/src/locales/en-us.json
+++ b/mindinsight/ui/src/locales/en-us.json
@@ -465,6 +465,7 @@
   },
   "debugger": {
     "debugger": "Debugger",
+    "nodeTypes": "Node Types",
     "nodeList": "Node List",
     "watchList": "Watch Point List",
     "watchPoint": "Watch Point",
@@ -502,7 +503,17 @@
     "shape": "Shape",
     "value": "Value",
     "largeDataTip": "The requested data is too large. Try another dimension.",
-    "continueTo": "Continue to"
+    "continueTo": "Continue to",
+    "inf": "INF:",
+    "negativeInf": "-INF:",
+    "max": "MAX:",
+    "min": "MIN:",
+    "mean": "MEAN:",
+    "nan": "NAN:",
+    "zero": "0:",
+    "positiveNum": "Positive number:",
+    "negativeNum": "Negative number:",
+    "all": "All"
   },
   "explain": {
     "explain": "Model Explanation",
diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json
index 6b9eaaca..831f3455 100644
--- a/mindinsight/ui/src/locales/zh-cn.json
+++ b/mindinsight/ui/src/locales/zh-cn.json
@@ -464,6 +464,7 @@
   },
   "debugger": {
     "debugger": "调试器",
+    "nodeTypes": "节点类型",
     "nodeList": "节点列表",
     "watchList": "监测点列表",
     "watchPoint": "监测点",
@@ -476,7 +477,9 @@
     "backstageStatus": "后台运行状态是",
     "view": "查看",
     "deleteWatchpointConfirm": "此操作将删除当前监测点，是否继续？",
+    "clearWatchpointConfirm": "此操作将删除所有监测点，是否继续？",
     "ternimateConfirm": "此操作将结束当前状态，是否继续？",
+    "createWP": "新建监测点",
     "successCreateWP": "新建监测点成功",
     "successDeleteWP": "删除监测点成功",
     "pendingTips": "等待训练连接...",
@@ -501,7 +504,36 @@
     "shape": "形状",
     "value": "数值",
     "largeDataTip": "请求的数据过大，请使用其他维度重试。",
-    "continueTo": "运行到该节点"
+    "continueTo": "运行到该节点",
+    "inf": "INF：",
+    "negativeInf": "-INF：",
+    "max": "最大值：",
+    "min": "最小值：",
+    "mean": "平均值：",
+    "nan": "NAN：",
+    "zero": "零：",
+    "positiveNum": "正数：",
+    "negativeNum": "负数：",
+    "all": "全部",
+    "tensorTip": "张量",
+    "recheck": "重新检查",
+    "clearWatchpoint": "清空监测点",
+    "addWatchpoint": "新增监测点",
+    "chooseTemp": "请选择模板",
+    "chooseParam": "请选择参数",
+    "nodeType": {
+      "all": "全部节点",
+      "weight": "权重节点",
+      "gradient": "梯度节点",
+      "activation": "激活节点"
+    },
+    "recheckSuccess": "重新检查成功",
+    "curStatisticsLabel": "当前step：",
+    "preStatisticsLabel": "上一个step：",
+    "diffStatisticsLabel": "diff：",
+    "graphFile": "图文件",
+    "selectAll": "全选",
+    "selectNone": "取消全选"
   },
   "explain": {
     "explain": "模型解释",
diff --git a/mindinsight/ui/src/mixins/debuggerMixin.vue b/mindinsight/ui/src/mixins/debuggerMixin.vue
index 167e241f..3d74dd64 100644
--- a/mindinsight/ui/src/mixins/debuggerMixin.vue
+++ b/mindinsight/ui/src/mixins/debuggerMixin.vue
@@ -1,5 +1,8 @@
 <script>
 import RequestService from '@/services/request-service';
+import {select, selectAll, zoom, dispatch} from 'd3';
+import 'd3-graphviz';
+const d3 = {select, selectAll, zoom, dispatch};
 export default {
   methods: {
     toleranceInputChange() {
@@ -75,6 +78,7 @@ export default {
         detail: 'data',
         shape,
         tolerance: this.tolerance / 100,
+        graph_name: row.graph_name,
       };
       const loadingInstance = this.$loading(this.loadingOption);
       RequestService.tensorComparisons(params).then(
@@ -109,11 +113,17 @@ 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,
                     JSON.parse(row.shape),
-                    tensorValue.statistics,
+                    statistics,
                     shape,
                 );
               });
@@ -126,47 +136,30 @@ export default {
     },
     /**
      * Initialize the condition
+     * @param {String} trainId Training job id
      */
-    initCondition() {
-      this.conditionMappings = {
-        INF: 'INF',
-        NAN: 'NAN',
-        OVERFLOW: 'OVERFLOW',
-        MAX_GT: 'MAX >',
-        MAX_LT: 'MAX <',
-        MIN_GT: 'MIN >',
-        MIN_LT: 'MIN <',
-        MAX_MIN_GT: 'MAX-MIN >',
-        MAX_MIN_LT: 'MAX-MIN <',
-        MEAN_GT: 'MEAN >',
-        MEAN_LT: 'MEAN <',
-      };
-      this.conditions.noValue = ['INF'];
-      this.conditions.hasValue = [
-        'MAX_GT',
-        'MAX_LT',
-        'MIN_GT',
-        'MIN_LT',
-        'MAX_MIN_GT',
-        'MAX_MIN_LT',
-        'MEAN_GT',
-        'MEAN_LT',
-      ];
-
-      if (this.version === 'GPU') {
-        this.conditions.noValue.push('NAN');
+    initCondition(trainId) {
+      RequestService.queryConditions(trainId).then((res) => {
+        if (res && res.data) {
+          this.conditionCollections = res.data;
+        }
+      });
+    },
+    transCondition(str) {
+      if (!str) {
+        return '';
+      }
+      let temp;
+      if (str.endsWith('_lt')) {
+        temp = str.replace(/_lt$/, ' <');
+      } else if (str.endsWith('_gt')) {
+        temp = str.replace(/_gt$/, ' >');
+      } else if (str.endsWith('_ge')) {
+        temp = str.replace(/_ge$/, ' >=');
       } else {
-        this.conditions.noValue.push('OVERFLOW');
+        temp = str;
       }
-
-      this.conditions.options = this.conditions.noValue
-          .concat(this.conditions.hasValue)
-          .map((i) => {
-            return {
-              label: this.conditionMappings[i],
-              value: i,
-            };
-          });
+      return temp;
     },
     /**
      * Collaspe btn click function
@@ -182,7 +175,7 @@ export default {
      */
     resizeCallback() {
       if (this.$refs.tensorValue) {
-        this.debounce(this.$refs.tensorValue.resizeView(), 1000);
+        this.$refs.tensorValue.resizeView();
       }
     },
     /**
@@ -220,15 +213,26 @@ export default {
      * Query current node info
      */
     getCurrentNodeInfo() {
+      let name = this.currentNodeName;
       const params = {
         mode: 'node',
         params: {
           watch_point_id: this.curWatchPointId ? this.curWatchPointId : 0,
-          name: this.currentNodeName,
+          name,
           single_node: true,
           node_type: 'leaf',
         },
       };
+      if (this.graphFiles.value === this.$t('debugger.all')) {
+        name = `${this.metadata.graph_name}/${this.currentNodeName}`;
+        params.params.name = name;
+      } else {
+        if (this.metadata.graph_name !== this.graphFiles.value) {
+          this.graphFiles.value = this.metadata.graph_name;
+          this.isCurrentGraph = false;
+        }
+        params.params.graph_name = this.graphFiles.value;
+      }
       RequestService.retrieve(params).then(
           (res) => {
             if (res.data) {
@@ -237,15 +241,54 @@ export default {
               }
               if (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.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)),
+                      name,
+                      true,
+                  );
+                }
                 if (graph.children) {
-                  this.dealTreeData(graph.children, this.currentNodeName);
+                  this.dealTreeData(graph.children, name);
                   this.defaultCheckedArr = this.$refs.tree.getCheckedKeys();
                 }
-                this.querySingleNode(
-                    JSON.parse(JSON.stringify(res.data.graph)),
-                    this.currentNodeName,
-                    false,
-                );
               }
             }
           },
@@ -253,7 +296,6 @@ export default {
             this.showErrorMsg(err);
           },
       );
-      this.retrieveTensorHistory({name: this.nodeName});
     },
     /**
      * Query next node info
@@ -264,7 +306,11 @@ export default {
         mode: 'continue',
         level: 'node',
         name: '',
+        graph_name: this.graphFiles.value,
       };
+      if (this.graphFiles.value === this.$t('debugger.all')) {
+        delete params.graph_name;
+      }
       RequestService.control(params).then(
           (res) => {},
           (err) => {
@@ -290,7 +336,11 @@ export default {
         ascend,
         name,
         watch_point_id: this.curWatchPointId ? this.curWatchPointId : 0,
+        graph_name: this.graphFiles.value,
       };
+      if (this.graphFiles.value === this.$t('debugger.all')) {
+        delete params.graph_name;
+      }
       RequestService.retrieveNodeByBfs(params).then(
           (res) => {
             if (res.data && res.data.graph && res.data.name) {
@@ -303,7 +353,7 @@ export default {
                 this.defaultCheckedArr = this.$refs.tree.getCheckedKeys();
               }
               this.querySingleNode(
-                  JSON.parse(JSON.stringify(res.data.graph)),
+                  JSON.parse(JSON.stringify(graph)),
                   res.data.name,
               );
             } else if (ascend) {
@@ -353,20 +403,29 @@ export default {
      * @return { Object }
      */
     objectSpanMethod({row, column, rowIndex, columnIndex}) {
-      if (columnIndex === 0 && this.outputLength > 0) {
+      let inputLength = 0;
+      let outputLength = 0;
+      if (this.tabs.activeName === 'tensor') {
+        inputLength = this.inputLength;
+        outputLength = this.outputLength;
+      } else {
+        inputLength = this.selectedNode.inputNum;
+        outputLength = this.selectedNode.outputNum;
+      }
+      if (columnIndex === 0 && outputLength > 0) {
         if (rowIndex === 0) {
           return {
-            rowspan: this.outputLength,
+            rowspan: outputLength,
             colspan: 1,
           };
-        } else if (rowIndex > 0 && rowIndex < this.outputLength) {
+        } else if (rowIndex > 0 && rowIndex < outputLength) {
           return {
             rowspan: 0,
             colspan: 0,
           };
-        } else if (rowIndex === this.outputLength) {
+        } else if (rowIndex === outputLength) {
           return {
-            rowspan: this.inputLength,
+            rowspan: inputLength,
             colspan: 1,
           };
         } else {
@@ -396,17 +455,32 @@ export default {
       if (this.treeFlag) {
         this.querySingleNode({}, data.name, true);
       } else {
-        this.queryAllTreeData(data.name, true);
+        if (this.graphFiles.value === this.$t('debugger.all')) {
+          const graphName = data.name.split('/')[0];
+          this.queryAllTreeData(
+              data.name.replace(`${graphName}/`, ''),
+              true,
+              graphName,
+          );
+        } else {
+          this.queryAllTreeData(data.name, true, this.graphFiles.value);
+        }
       }
     },
     /**
      * Query tensor value
      * @param { Object } data node info
+     * @param { String } graphName Graph name
      */
-    retrieveTensorHistory(data) {
+    retrieveTensorHistory(data, graphName) {
       const params = {
         name: data.name,
       };
+      if (this.graphFiles.value === this.$t('debugger.all')) {
+        params.name = `${graphName}/${data.name}`;
+      } else {
+        params.graph_name = graphName;
+      }
       RequestService.retrieveTensorHistory(params).then(
           (res) => {
             if (res.data && res.data.metadata) {
@@ -490,7 +564,12 @@ export default {
                 })
                 .reverse(),
         ).replace(/"/g, '');
-      const params = {name: row.name, detail: 'data', shape};
+      const params = {
+        name: row.name,
+        detail: 'data',
+        shape,
+        graph_name: row.graph_name,
+      };
       const loadingInstance = this.$loading(this.loadingOption);
       RequestService.tensors(params).then(
           (res) => {
@@ -518,12 +597,13 @@ export default {
                 return;
               }
               this.tensorValue = value instanceof Array ? value : [value];
-              const status = res.data.tensor_value.statistics || {};
+              const statistics = res.data.tensor_value.statistics || {};
+              this.statisticsArr = [statistics];
               this.$nextTick(() => {
                 this.$refs.tensorValue.updateGridData(
                     this.tensorValue,
                     JSON.parse(row.shape),
-                    status,
+                    statistics,
                     shape,
                 );
               });
@@ -541,7 +621,16 @@ export default {
      * @param {Boolean} isQuery wheather to query tree data
      */
     dealMetadata(metadata) {
+      if (
+        metadata.graph_name &&
+        metadata.graph_name !== this.graphFiles.value &&
+        this.graphFiles.value !== this.$t('debugger.all')
+      ) {
+        this.graphFiles.value = metadata.graph_name;
+        this.isCurrentGraph = false;
+      }
       this.metadata.pos = metadata.pos;
+      this.enableRecheck = metadata.enable_recheck;
       if (metadata.state) {
         this.metadata.state = metadata.state;
       }
@@ -554,7 +643,10 @@ export default {
           this.nodeName = nodeName ? nodeName : this.nodeName;
           this.currentNodeName = nodeName ? nodeName : this.currentNodeName;
           this.metadata.step = metadata.step;
-          this.queryAllTreeData(this.nodeName, true);
+          this.metadata.graph_name = metadata.graph_name
+            ? metadata.graph_name
+            : this.metadata.graph_name;
+          this.queryAllTreeData(this.nodeName, true, metadata.graph_name);
         }
       }
       if (metadata.step && metadata.step > this.metadata.step) {
@@ -565,35 +657,47 @@ export default {
      * Long polling,update some info
      */
     pollData() {
-      const params = {pos: this.metadata.pos};
+      const params = {
+        pos: this.metadata.pos,
+        graph_name: this.graphFiles.value,
+      };
+      if (this.graphFiles.value === this.$t('debugger.all')) {
+        delete params.graph_name;
+      }
       RequestService.pollData(params).then(
           (res) => {
             if (res.data) {
               if (res.data.metadata) {
                 this.dealMetadata(res.data.metadata);
               }
+              let name = null;
+              if (this.$refs.tree && this.$refs.tree.getCurrentKey()) {
+                name = this.$refs.tree.getCurrentKey();
+              }
+              let graphName = this.graphFiles.value;
               if (
                 res.data.receive_tensor &&
               res.data.metadata &&
               res.data.metadata.step >= this.metadata.step &&
-              res.data.receive_tensor.node_name === this.nodeName
+              res.data.receive_tensor.node_name === name
               ) {
-                this.retrieveTensorHistory({
-                  name: res.data.receive_tensor.node_name,
-                });
+                if (this.graphFiles.value === this.$t('debugger.all')) {
+                  graphName = name.split('/')[0];
+                  name = name.replace(`${graphName}/`, '');
+                }
+                this.retrieveTensorHistory(
+                    {
+                      name,
+                    },
+                    graphName,
+                );
               }
               if (
                 res.data.watch_point_hits &&
               res.data.watch_point_hits.length > 0
               ) {
-                this.watchPointHits = res.data.watch_point_hits;
-                this.watchPointHits.forEach((val) => {
-                  val.selected = false;
-                });
                 this.radio1 = 'hit';
-                this.$nextTick(() => {
-                  this.updateTensorValue(0);
-                });
+                this.dealWatchpointHits(res.data.watch_point_hits);
               }
               if (
                 res.data.tensor_history &&
@@ -683,27 +787,48 @@ export default {
       this.resolve(JSON.parse(JSON.stringify(this.origialTree)));
       this.resetGraph();
     },
+    recheckWatchpoint() {
+      RequestService.recheckWatchPoints().then(
+          (res) => {
+            if (res && res.data && res.data.metadata) {
+              this.enableRecheck = res.data.metadata.enable_recheck;
+            }
+            this.$message.success(this.$t('debugger.recheckSucess'));
+          },
+          (err) => {},
+      );
+    },
     /**
      * Delete new watchpoint
      * @param {Object} item watchpoint data
      */
     deleteWatchpoint(item) {
-      if (item.id) {
-        this.$confirm(
-            this.$t('debugger.deleteWatchpointConfirm'),
-            this.$t('public.notice'),
-            {
-              confirmButtonText: this.$t('public.sure'),
-              cancelButtonText: this.$t('public.cancel'),
-              type: 'warning',
-            },
-        ).then(() => {
-          const params = {watch_point_id: item.id};
+      if (!this.watchPointArr.length) {
+        return;
+      }
+      if ((item && item.id) || !item) {
+        const msg = item
+          ? this.$t('debugger.deleteWatchpointConfirm')
+          : this.$t('debugger.clearWatchpointConfirm');
+        this.$confirm(msg, this.$t('public.notice'), {
+          confirmButtonText: this.$t('public.sure'),
+          cancelButtonText: this.$t('public.cancel'),
+          type: 'warning',
+        }).then(() => {
+          if (!item) {
+            this.curWatchPointId = null;
+            this.watchPointArr = [];
+          }
+          const params = {watch_point_id: item ? item.id : null};
           RequestService.deleteWatchpoint(params).then(
               (res) => {
                 this.loadOriginalTree();
                 this.queryWatchPoints();
                 this.$message.success(this.$t('debugger.successDeleteWP'));
+                if (res && res.data && res.data.metadata) {
+                  this.enableRecheck = res.data.metadata.enable_recheck;
+                }
+                this.curWatchPointId = null;
               },
               (err) => {
                 this.showErrorMsg(err);
@@ -712,46 +837,86 @@ export default {
         });
       } else {
         this.curWatchPointId = null;
-        this.watchPointPending = true;
-        this.watchPointArr.pop();
       }
     },
     validateParam(item) {
       const reg = /^(\-|\+)?\d+(\.\d+)?$/;
-      this.validPram = reg.test(item.param);
+      this.validPram = reg.test(item.param.value);
     },
     /**
      * Create new watchpoint
-     * @param {Object} item watchpoint data
+     * @param {Boolean} creatFlag Whether create watchpoint
      */
-    createWatchPoint(item) {
-      if (item.condition) {
-        if (item.pending) {
-          const params = {
-            condition: {
-              condition: item.condition,
+    createWatchPoint(creatFlag) {
+      if (creatFlag) {
+        const item = this.createWatchPointArr[0];
+        const params = {
+          condition: {
+            id: item.condition.selectedId,
+            params: [],
+          },
+          watch_nodes: [],
+          graph_name: this.graphFiles.value,
+        };
+        if (this.graphFiles.value === this.$t('debugger.all')) {
+          delete params.graph_name;
+        }
+        if (item.param.options.length) {
+          params.condition.params = [
+            {
+              name: item.param.name,
+              value:
+                item.param.type === 'BOOL'
+                  ? Boolean(item.param.value)
+                  : Number(item.param.value),
+              disable: false,
             },
-            watch_nodes: this.$refs.tree.getCheckedKeys(),
-          };
-          if (this.conditions.hasValue.includes(item.condition)) {
-            params.condition.param = parseFloat(item.param);
-          }
-          RequestService.createWatchpoint(params).then(
-              (res) => {
-                this.loadOriginalTree();
-                this.queryWatchPoints();
-                this.watchPointPending = true;
-                this.$message.success(this.$t('debugger.successCreateWP'));
-              },
-              (err) => {
-                this.loadOriginalTree();
-                this.queryWatchPoints();
-                this.watchPointPending = true;
-                this.showErrorMsg(err);
-              },
-          );
-        } else {
+          ];
         }
+        RequestService.createWatchpoint(params).then(
+            (res) => {
+              this.createWatchPointArr = [];
+              this.createWPDialogVisible = false;
+              this.$message.success(this.$t('debugger.successCreateWP'));
+              if (res && res.data && res.data.metadata) {
+                this.enableRecheck = res.data.metadata.enable_recheck;
+              }
+
+              this.queryWatchPoints(true);
+            },
+            (err) => {
+              this.loadOriginalTree();
+              this.queryWatchPoints();
+              this.showErrorMsg(err);
+            },
+        );
+      } else {
+        this.createWatchPointArr = [];
+        this.createWPDialogVisible = false;
+      }
+    },
+    /**
+     * Collection change processing
+     * @param {Object} item
+     */
+    collectionChange(item) {
+      const collection = this.conditionCollections.filter((i) => {
+        return i.id === item.collection.selectedId;
+      })[0];
+
+      if (collection.conditions && collection.conditions.length) {
+        item.condition.options = collection.conditions;
+        item.condition.selectedId = item.condition.options[0].id;
+        this.conditionChange(item);
+      } else {
+        item.condition.options = [];
+        item.condition.selectedId = '';
+
+        item.param.options = [];
+        item.param.name = '';
+        item.param.type = '';
+        item.param.value = '';
+        this.validPram = false;
       }
     },
     /**
@@ -759,10 +924,37 @@ export default {
      * @param {Object} item
      */
     conditionChange(item) {
-      item.label = this.conditionMappings[item.condition];
-      if (this.conditions.noValue.includes(item.condition)) {
-        item.param = '';
-        this.validPram = false;
+      const condition = item.condition.options.filter((i) => {
+        return i.id === item.condition.selectedId;
+      })[0];
+
+      if (condition.parameters && condition.parameters.length) {
+        item.param.options = condition.parameters;
+        item.param.name = condition.parameters[0].name;
+        this.paramChange(item);
+      } else {
+        item.param.options = [];
+        item.param.name = '';
+        item.param.type = '';
+        item.param.value = '';
+        this.validPram = true;
+      }
+    },
+    /**
+     * Parameter change processing
+     * @param {Object} item
+     */
+    paramChange(item) {
+      const param = item.param.options.filter((i) => {
+        return i.name === item.param.name;
+      })[0];
+
+      item.param.type = param.type;
+      item.param.value = '';
+      this.validPram = false;
+      if (item.param.type === 'BOOL') {
+        item.param.value = true;
+        this.validPram = true;
       }
     },
     /** Draw the tree
@@ -772,12 +964,14 @@ export default {
       const node = this.$refs.tree.getNode(obj.name);
       const check = node.checked;
       if (this.treeFlag && node.childNodes) {
-        this.dealCheckPro(node.childNodes, check);
+        this.dealCheckPro(node.childNodes, node.indeterminate || check);
       }
-      if (this.curWatchPointId !== null && this.curWatchPointId !== '') {
+      if (this.curWatchPointId) {
         const checkedKeys = this.$refs.tree.getCheckedKeys();
         const watchNodes = [];
-        if (this.defaultCheckedArr.length > checkedKeys.length) {
+        if (this.defaultCheckedArr.length === checkedKeys.length) {
+          return;
+        } else if (this.defaultCheckedArr.length > checkedKeys.length) {
           watchNodes.push(obj.name);
         } else {
           checkedKeys.forEach((val) => {
@@ -789,8 +983,12 @@ export default {
         const params = {
           watch_point_id: this.curWatchPointId ? this.curWatchPointId : 0,
           watch_nodes: watchNodes,
-          mode: check ? 1 : 0,
+          mode: node.indeterminate || check ? 1 : 0,
+          graph_name: this.graphFiles.value,
         };
+        if (this.graphFiles.value === this.$t('debugger.all')) {
+          delete params.graph_name;
+        }
         if (this.searchWord !== '') {
           params.name = this.searchWord;
           params.watch_nodes = [obj.name];
@@ -799,6 +997,7 @@ export default {
         RequestService.updateWatchpoint(params).then(
             (res) => {
               this.defaultCheckedArr = checkedKeys;
+              this.enableRecheck = res.data.metadata.enable_recheck;
             },
             (err) => {
               this.showErrorMsg(err);
@@ -824,26 +1023,24 @@ export default {
     addWatchPoint() {
       this.searchWord = '';
       this.treeFlag = true;
-      if (this.watchPointPending) {
-        this.watchPointPending = false;
-        this.loadOriginalTree();
-        this.$refs.tree.getCheckedKeys().forEach((val) => {
-          this.$refs.tree.setChecked(val, false);
-        });
-        this.defaultCheckedArr = [];
-        this.watchPointArr.forEach((val) => {
-          val.selected = false;
-        });
-        this.watchPointArr.push({
-          selected: true,
-          id: '',
-          condition: '',
-          label: '',
-          param: '',
-          pending: true,
-        });
-      }
-      this.curWatchPointId = '';
+      this.createWatchPointArr.push({
+        collection: {
+          selectedId: this.conditionCollections[0].id,
+        },
+        condition: {
+          selectedId: '',
+          options: [],
+        },
+        param: {
+          options: [],
+          name: '',
+          value: '',
+          type: '',
+        },
+      });
+      this.collectionChange(this.createWatchPointArr[0]);
+      this.createWPDialogVisible = true;
+      this.curWatchPointId = null;
     },
     /**
      * Collapse node
@@ -862,18 +1059,34 @@ export default {
     filterChange() {
       if (this.searchWord === '') {
         this.treeFlag = true;
-        this.queryGraphByWatchpoint(this.curWatchPointId);
+        this.$nextTick(() => {
+          setTimeout(() => {
+            const dom = document.querySelector(
+                '.el-tree-node.is-current.is-focusable',
+            );
+            if (dom) {
+              dom.scrollIntoView();
+            }
+          }, 800);
+        });
       }
     },
     /**
      * Filter tree data by node name
      */
     filter() {
-      if (this.searchWord) {
+      if (this.searchWord || this.nodeTypes.value !== 'all') {
         const params = {
           name: this.searchWord,
           watch_point_id: this.curWatchPointId ? this.curWatchPointId : 0,
+          graph_name: this.graphFiles.value,
         };
+        if (this.graphFiles.value === this.$t('debugger.all')) {
+          delete params.graph_name;
+        }
+        if (this.nodeTypes.value !== 'all') {
+          params.node_category = this.nodeTypes.value;
+        }
         RequestService.search(params).then(
             (res) => {
               if (res.data && res.data.nodes) {
@@ -882,6 +1095,27 @@ export default {
                 this.searchCheckedArr = [];
                 this.dealSearchResult(this.searchTreeData);
                 this.defaultCheckedArr = this.searchCheckedArr;
+                this.treeFlag = false;
+                this.searchNode.childNodes = [];
+                const data = res.data.nodes.map((val) => {
+                  return {
+                    label: val.name.split('/').pop(),
+                    ...val,
+                  };
+                });
+                const currentData = JSON.parse(JSON.stringify(data));
+                currentData.forEach((val) => {
+                  val.nodes = [];
+                });
+                this.searchResolve(currentData);
+                data.forEach((val, key) => {
+                  if (val.nodes && val.nodes.length) {
+                    val.nodes.forEach((value) => {
+                      value.parentName = val.name;
+                    });
+                    this.dealSearchTreeData(val.nodes);
+                  }
+                });
               }
             },
             (err) => {
@@ -890,6 +1124,24 @@ export default {
         );
       }
     },
+    dealSearchTreeData(children) {
+      children.forEach((val) => {
+        const node = this.$refs.searchTree.getNode(val.parentName);
+        val.label = val.name.split('/').pop();
+        val.leaf =
+          val.type === 'name_scope' || val.type === 'aggregation_scope'
+            ? false
+            : true;
+        this.$refs.searchTree.append(val, node);
+        node.expanded = true;
+        if (val.nodes && val.nodes.length) {
+          val.nodes.forEach((value) => {
+            value.parentName = val.name;
+          });
+          this.dealSearchTreeData(val.nodes);
+        }
+      });
+    },
     /**
      * Deal search data
      * @param {Array} arr search tree data
@@ -927,7 +1179,12 @@ export default {
               this.initFail = false;
               this.dialogVisible = false;
               if (res.data) {
-                if (res.data.graph && res.data.graph.nodes) {
+                if (res.data.graph) {
+                  this.graphFiles.options = res.data.graph.graph_names || [];
+                  if (this.graphFiles.options.length > 1) {
+                    this.graphFiles.options.unshift(this.$t('debugger.all'));
+                  }
+                  this.graphFiles.value = this.graphFiles.options[0];
                   this.origialTree = res.data.graph.nodes.map((val) => {
                     return {
                       label: val.name.split('/').pop(),
@@ -939,39 +1196,34 @@ export default {
                       ...val,
                     };
                   });
-                  resolve(JSON.parse(JSON.stringify(this.origialTree)));
-                  this.$refs.tree.getCheckedKeys().forEach((val) => {
-                    this.$refs.tree.setChecked(val, false);
-                  });
-                  if (this.treeFlag) {
-                    this.dealGraphData(
-                        JSON.parse(JSON.stringify(res.data.graph.nodes)),
-                    );
-                  }
+                  resolve(this.origialTree);
+                  this.dealGraphData(
+                      JSON.parse(JSON.stringify(res.data.graph.nodes)),
+                  );
                 }
                 if (res.data.watch_points) {
                   this.watchPointArr = res.data.watch_points.map((val) => {
                     return {
-                      ...val,
+                      id: val.id,
+                      condition: val.watch_condition.id,
+                      params: val.watch_condition.params || [],
                       selected: false,
-                      condition: val.watch_condition.condition,
-                      label: this.conditionMappings[
-                          val.watch_condition.condition
-                      ],
-                      param:
-                      val.watch_condition.param ||
-                      (val.watch_condition.param === 0 ? 0 : ''),
                     };
                   });
                 }
                 if (res.data.metadata) {
                   this.metadata = res.data.metadata;
+                  this.enableRecheck = res.data.metadata.enable_recheck;
                   if (this.metadata.backend) {
                     this.version = this.metadata.backend;
                   }
-                  this.initCondition();
+                  const trainId = encodeURIComponent(res.data.metadata.ip);
+                  if (trainId) {
+                    this.initCondition(trainId);
+                  }
+
                   this.nodeName = this.metadata.node_name;
-                  this.currentNodeName = this.metadata.node_name;
+                  this.currentNodeName = this.nodeName;
                   if (this.pollInit) {
                     this.pollData();
                     this.pollInit = false;
@@ -994,15 +1246,20 @@ 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);
               }
-              if (res.data && res.data.graph && res.data.graph.nodes) {
-                this.curNodeData = res.data.graph.nodes.map((val) => {
+              if (res.data && res.data.graph) {
+                const graph = res.data.graph;
+                this.curNodeData = graph.nodes.map((val) => {
                   return {
                     label: val.name.split('/').pop(),
                     leaf:
@@ -1044,7 +1301,7 @@ export default {
                 this.selectedNode.name = node.data.name;
                 if (!this.allGraphData[node.data.name].isUnfold) {
                   this.dealGraphData(
-                      JSON.parse(JSON.stringify(res.data.graph.nodes)),
+                      JSON.parse(JSON.stringify(graph.nodes)),
                       node.data.name,
                   );
                 } else {
@@ -1063,14 +1320,58 @@ export default {
         );
       }
     },
+    /**
+     * Draw the tree
+     * @param {Object} node tree root node
+     * @param {Function} resolve callback function ,return next node data
+     */
+    loadSearchNode(node, resolve) {
+      if (node.level === 0) {
+        node.childNodes = [];
+        if (!this.searchNode && !this.searchResolve) {
+          this.searchNode = node;
+          this.searchResolve = resolve;
+        }
+      } else if (node.level >= 1) {
+        if (node.childNodes && node.childNodes.length) {
+          node.expanded = true;
+          node.loaded = true;
+          node.loading = false;
+          return;
+        }
+        const params = {
+          mode: 'node',
+          params: {
+            node_type: node.data.type,
+            watch_point_id: this.curWatchPointId ? this.curWatchPointId : 0,
+            name: node.data.name,
+          },
+        };
+        RequestService.retrieve(params).then((res) => {
+          if (res.data && res.data.metadata) {
+            this.dealMetadata(res.data.metadata);
+          }
+          if (res.data && res.data.graph && res.data.graph.nodes) {
+            this.curNodeData = res.data.graph.nodes.map((val) => {
+              return {
+                label: val.name.split('/').pop(),
+                leaf:
+                  val.type === 'name_scope' || val.type === 'aggregation_scope'
+                    ? false
+                    : true,
+                ...val,
+              };
+            });
+            resolve(this.curNodeData);
+          }
+        });
+      }
+    },
     /**
      * Show data of current selected watchpoint
      * @param {Number} key watchpoint id
      */
     selectWatchPoint(key) {
-      if (!this.watchPointPending) {
-        return;
-      }
       this.curLeafNodeName = null;
       this.curHalfCheckedKeys = [];
       this.watchPointArr.forEach((val, index) => {
@@ -1095,25 +1396,47 @@ export default {
     },
     /**
      * Query WatchPoints
+     * @param {Boolean} focusLast
      */
-    queryWatchPoints() {
+    queryWatchPoints(focusLast) {
       const params = {
         mode: 'watchpoint',
+        graph_name: this.graphFiles.value,
       };
+      if (this.graphFiles.value === this.$t('debugger.all')) {
+        delete params.graph_name;
+      }
       RequestService.retrieve(params).then(
           (res) => {
             if (res.data.watch_points) {
               this.watchPointArr = res.data.watch_points.map((val) => {
                 return {
-                  ...val,
+                  id: val.id,
+                  condition: val.watch_condition.id,
+                  params: val.watch_condition.params || [],
                   selected: false,
-                  condition: val.watch_condition.condition,
-                  label: this.conditionMappings[val.watch_condition.condition],
-                  param:
-                  val.watch_condition.param ||
-                  (val.watch_condition.param === 0 ? 0 : ''),
                 };
               });
+              if (focusLast) {
+                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;
+                this.curWatchPointId = obj.id;
+
+                this.$nextTick(() => {
+                  const newWatchPointDom = document.querySelector(
+                      '#watch-point-list>li:last-child',
+                  );
+                  if (newWatchPointDom) {
+                    newWatchPointDom.scrollIntoView();
+                  }
+                });
+              }
             }
           },
           (err) => {
@@ -1175,46 +1498,123 @@ export default {
       if (this.radio1 === 'hit') {
         const params = {
           mode: 'watchpoint_hit',
+          graph_name: this.graphFiles.value,
         };
+        if (this.graphFiles.value === this.$t('debugger.all')) {
+          delete params.graph_name;
+        }
         RequestService.retrieve(params).then(
             (res) => {
               if (res.data.metadata) {
                 this.dealMetadata(res.data.metadata);
               }
               if (res.data && res.data.watch_point_hits) {
-                this.watchPointHits = res.data.watch_point_hits;
-                this.watchPointHits.forEach((val) => {
-                  val.selected = false;
-                });
-                this.$nextTick(() => {
-                  if (this.watchPointHits.length > 0) {
-                    this.updateTensorValue(0);
-                  }
-                });
+                this.dealWatchpointHits(res.data.watch_point_hits);
               }
             },
             (err) => {
               this.showErrorMsg(err);
             },
         );
+      } else {
+        this.$nextTick(() => {
+          setTimeout(() => {
+            const dom = document.querySelector(
+                '.el-tree-node.is-current.is-focusable',
+            );
+            if (dom) {
+              dom.scrollIntoView();
+            }
+          }, 200);
+        });
+      }
+    },
+    dealWatchpointHits(data) {
+      this.watchPointHits = [];
+      if (data && data.length) {
+        data.forEach((hit) => {
+          const obj = {
+            name: hit.node_name,
+            lists: [],
+            selected: false,
+            id: hit.node_name,
+          };
+          if (hit.tensors && hit.tensors.length) {
+            hit.tensors.forEach((i) => {
+              const tensorName = `slot: ${i.slot}, `;
+              if (i.watch_points && i.watch_points.length) {
+                i.watch_points.forEach((j, key) => {
+                  let item = `${tensorName} Watch Point Id: ${j.id}, `;
+                  if (j.watch_condition) {
+                    item += ` ${this.transCondition(j.watch_condition.id)}`;
+                    const param = (j.watch_condition.params || [])
+                        .map((k) => `${this.transCondition(k.name)}: ${k.value}`)
+                        .join(', ');
+                    if (param) {
+                      item += ` (${param})`;
+                    }
+                  }
+                  obj.lists.push({
+                    name: item,
+                    id: `${key}${hit.node_name}`,
+                  });
+                });
+              }
+            });
+          }
+          this.watchPointHits.push(obj);
+        });
+        this.focusWatchpointHit();
+      }
+    },
+    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;
+        }
+      });
+      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].node_name;
+      const name = this.watchPointHits[key].name;
       const temName = this.nodeName;
       this.nodeName = name;
+      this.isHitIntoView = false;
       const params = {
         mode: 'watchpoint_hit',
         params: {
           name,
           single_node: true,
           watch_point_id: this.curWatchPointId ? this.curWatchPointId : 0,
+          graph_name: this.watchPointHits[key].graph_name,
         },
       };
+      if (this.graphFiles.value === this.$t('debugger.all')) {
+        delete params.params.graph_name;
+        params.params.name = `${this.watchPointHits[key].graph_name}/${name}`;
+      }
       this.watchPointHits.forEach((val, index) => {
         if (key === index) {
           val.selected = true;
@@ -1228,7 +1628,10 @@ export default {
             if (res.data.metadata) {
               this.dealMetadata(res.data.metadata);
             }
-            this.retrieveTensorHistory({name: this.nodeName});
+            this.retrieveTensorHistory(
+                {name: this.nodeName},
+                this.watchPointHits[key].graph_name,
+            );
             if (res.data && res.data.graph) {
               const graph = res.data.graph;
               if (graph.children) {
@@ -1236,7 +1639,7 @@ export default {
                 this.defaultCheckedArr = this.$refs.tree.getCheckedKeys();
               }
               this.querySingleNode(
-                  JSON.parse(JSON.stringify(res.data.graph)),
+                  JSON.parse(JSON.stringify(graph)),
                   name,
                   false,
               );
@@ -1252,9 +1655,10 @@ export default {
      * Query the graph data
      * @param {String} nodeName The name of the node that needs to be query
      * @param {Boolean} isQueryTensor The name of the node that needs to be query
+     * @param {String} graphName Graph file name
      */
-    queryAllTreeData(nodeName, isQueryTensor) {
-      const name = nodeName ? nodeName.split(':')[0] : '';
+    queryAllTreeData(nodeName, isQueryTensor, graphName) {
+      let name = nodeName ? nodeName.split(':')[0] : '';
       const params = {
         mode: 'node',
         params: {
@@ -1263,6 +1667,14 @@ 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;
+        }
+      } else {
+        params.params.graph_name = graphName;
+      }
       RequestService.retrieve(params).then(
           (res) => {
             if (res.data && res.data.metadata) {
@@ -1270,19 +1682,54 @@ 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.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)),
+                    name,
+                    true,
+                );
+              }
               if (graph.children) {
                 this.dealTreeData(graph.children, name);
                 this.defaultCheckedArr = this.$refs.tree.getCheckedKeys();
               }
-              this.querySingleNode(
-                  JSON.parse(JSON.stringify(res.data.graph)),
-                  name,
-                  isQueryTensor,
-              );
-            }
-            if (res.data && res.data.tensor_history) {
-              this.tableData = res.data.tensor_history;
-              this.dealTableData(this.tableData);
             }
           },
           (err) => {
diff --git a/mindinsight/ui/src/services/request-service.js b/mindinsight/ui/src/services/request-service.js
index 0e70b1de..7b30f343 100644
--- a/mindinsight/ui/src/services/request-service.js
+++ b/mindinsight/ui/src/services/request-service.js
@@ -389,6 +389,18 @@ export default {
       data: params,
     });
   },
+  queryConditions(trainId) {
+    return axios({
+      method: 'get',
+      url: `v1/mindinsight/conditionmgr/train-jobs/${trainId}/condition-collections`,
+    });
+  },
+  recheckWatchPoints() {
+    return axios({
+      method: 'post',
+      url: `v1/mindinsight/debugger/recheck`,
+    });
+  },
   // explain list
   getExplainList(params) {
     return axios({
diff --git a/mindinsight/ui/src/views/debugger/debugger.vue b/mindinsight/ui/src/views/debugger/debugger.vue
index 96fd94df..22034001 100644
--- a/mindinsight/ui/src/views/debugger/debugger.vue
+++ b/mindinsight/ui/src/views/debugger/debugger.vue
@@ -20,7 +20,7 @@ limitations under the License.
       <div class="left"
            v-show="!leftShow">
         <div class="header">
-          {{$t('debugger.nodeList')}}
+          {{radio1==='tree' ? $t('debugger.nodeList') : $t('debugger.curHitNode')}}
           <div class="radio-tabs">
             <el-radio-group v-model="radio1"
                             size='mini'
@@ -36,6 +36,27 @@ limitations under the License.
         </div>
         <div class="content"
              v-show="radio1==='tree'">
+          <div class="node-type">
+            <div class="label">{{ $t('debugger.graphFile') }}</div>
+            <el-select v-model="graphFiles.value"
+                       @change="queryGraphByFile">
+              <el-option v-for="item in graphFiles.options"
+                         :key="item"
+                         :value="item">
+              </el-option>
+            </el-select>
+          </div>
+          <div class="node-type">
+            <div class="label">{{$t('debugger.nodeTypes')}}</div>
+            <el-select v-model="nodeTypes.value"
+                       @change="nodeTypesChange">
+              <el-option v-for="item in nodeTypes.options"
+                         :key="item"
+                         :label="nodeTypes.label[item]"
+                         :value="item">
+              </el-option>
+            </el-select>
+          </div>
           <div class="select-wrap">
             <el-input :placeholder="$t('graph.inputNodeName')"
                       v-model="searchWord"
@@ -46,6 +67,18 @@ limitations under the License.
             </el-input>
           </div>
           <div class="tree-wrap">
+            <div class="select-all-files"
+                 v-if="curWatchPointId && graphFiles.options.length > 1 &&
+                 graphFiles.value === $t('debugger.all')">
+              <el-button type="primary"
+                         size="mini"
+                         class="custom-btn"
+                         @click="selectAllFiles(true)">{{ $t('debugger.selectAll') }}</el-button>
+              <el-button type="primary"
+                         size="mini"
+                         class="custom-btn"
+                         @click="selectAllFiles(false)">{{ $t('debugger.selectNone') }}</el-button>
+            </div>
             <el-tree v-show="treeFlag"
                      :props="props"
                      :load="loadNode"
@@ -58,166 +91,156 @@ limitations under the License.
                      :highlight-current="true"
                      ref="tree"
                      @check="check"
-                     :show-checkbox="curWatchPointId!==null">
-              <span slot-scope="{ node , data}">
-                <span class="custom-tree-node "
-                      :class="{highlight:data.highlight}">{{ node.label }}</span>
+                     :show-checkbox="!!curWatchPointId">
+              <span class="custom-tree-node"
+                    slot-scope="{ node ,data }">
+                <span>
+                  <img v-if="data.type ==='name_scope'"
+                       :src="require('@/assets/images/name-scope.svg')"
+                       class="image-type" />
+                  <img v-else-if="data.type ==='Const'"
+                       :src="require('@/assets/images/constant-node.svg')"
+                       class="image-type" />
+                  <img v-else-if="data.type ==='aggregation_scope'"
+                       :src="require('@/assets/images/polymetric.svg')"
+                       class="image-type" />
+                  <img v-else
+                       :src="require('@/assets/images/operator-node.svg')"
+                       class="image-type" />
+                </span>
+                <span class="custom-tree-node">{{ node.label }}</span>
               </span>
             </el-tree>
             <el-tree v-show="!treeFlag"
-                     :data="searchTreeData"
                      :props="defaultProps"
+                     :load="loadSearchNode"
+                     :lazy="true"
                      node-key="name"
                      :default-checked-keys="searchCheckedArr"
-                     default-expand-all
+                     :expand-on-click-node="false"
                      @node-click="handleNodeClick"
                      ref="searchTree">
+              <span class="custom-tree-node"
+                    slot-scope="{ node ,data }">
+                <span>
+                  <img v-if="data.type ==='name_scope'"
+                       :src="require('@/assets/images/name-scope.svg')"
+                       class="image-type" />
+                  <img v-else-if="data.type ==='Const'"
+                       :src="require('@/assets/images/constant-node.svg')"
+                       class="image-type" />
+                  <img v-else-if="data.type ==='aggregation_scope'"
+                       :src="require('@/assets/images/polymetric.svg')"
+                       class="image-type" />
+                  <img v-else
+                       :src="require('@/assets/images/operator-node.svg')"
+                       class="image-type" />
+                </span>
+                <span class="custom-tree-node">{{ node.label }}</span>
+              </span>
             </el-tree>
           </div>
           <div class="watch-point-wrap">
             <div class="title-wrap">
               {{$t('debugger.watchList')}}
+
+              <div class="check-wrap">
+                <i class="el-icon-circle-check"
+                   :title="$t('debugger.recheck')"
+                   :class="{disable: !enableRecheck}"
+                   @click="recheckWatchpoint()"></i>
+              </div>
+
+              <div class="delete-wrap">
+                <i class="el-icon-delete"
+                   :title="$t('debugger.clearWatchpoint')"
+                   :class="{disable: !watchPointArr.length}"
+                   @click="deleteWatchpoint()"></i>
+              </div>
               <div class="add-wrap">
                 <i class="el-icon-circle-plus"
+                   :title="$t('debugger.addWatchpoint')"
                    @click="addWatchPoint"></i>
               </div>
             </div>
             <div class="content-wrap">
-              <ul class="list-wrap"
+              <ul id="watch-point-list"
+                  class="list-wrap"
                   v-show="allWatchPointFlag">
                 <li class="list"
                     v-for="(item,key) in watchPointArr"
                     :key="key"
-                    :title="$t('debugger.watchPoint') + ' ' + item.id + ': ' +
-                    item.label + ' ' + item.param">
+                    :title="getWatchPointContent(item)">
                   <div class="name"
                        :class="{selected:item.selected}"
                        @click="selectWatchPoint(key)">
                     <div class="item-content">
-                      {{$t('debugger.watchPoint')}} {{item.id}}: {{item.label}} {{item.param}}
+                      {{getWatchPointContent(item)}}
                     </div>
                     <i class="el-icon-check"
-                       v-if="item.selected && watchPointPending"
+                       v-if="item.selected"
                        @click.stop="showOrigin()"></i>
                     <i class="el-icon-close"
                        v-if="item.selected"
                        @click.stop="deleteWatchpoint(item)"></i>
                   </div>
-                  <div v-show="!watchPointPending && key === watchPointArr.length - 1">
-                    <div class="condition">
-                      <el-select v-model="item.condition"
-                                 :placeholder="$t('debugger.selectCondition')"
-                                 @change="conditionChange(item)">
-                        <el-option v-for="i in conditions.options"
-                                   :key="i.value"
-                                   :label="i.label"
-                                   :value="i.value">
-                        </el-option>
-                      </el-select>
-                      <el-input v-model="item.param"
-                                :placeholder="$t('scalar.placeHolderNumber')"
-                                v-if="conditions.hasValue.includes(item.condition)"
-                                @input="validateParam(item)"
-                                class="condition-param"></el-input>
-                      <div class="btn-wrap">
-                        <el-button type="primary"
-                                   size="mini"
-                                   class="custom-btn"
-                                   @click="createWatchPoint(item)"
-                                   :disabled="!(conditions.noValue.includes(item.condition) ||
-                                   (conditions.hasValue.includes(item.condition) && validPram))">
-                          {{ $t('public.sure') }}
-                        </el-button>
-                      </div>
-                    </div>
-                  </div>
                 </li>
               </ul>
             </div>
           </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-button type="primary"
-                         size="mini"
-                         class="custom-btn green"
-                         :disabled="!step || metadata.state==='running' || metadata.state==='pending'"
-                         @click="control(0)">{{ $t('public.sure') }}</el-button>
-            </div>
-            <div class="btn-two">
-              <el-button size="mini"
-                         class="custom-btn white"
-                         :disabled="metadata.state==='running'|| metadata.state==='pending'"
-                         @click="control(1)">{{$t('debugger.continue')}}</el-button>
-              <el-button size="mini"
-                         class="custom-btn white"
-                         :disabled="metadata.state!=='running'"
-                         @click="control(3)">{{$t('debugger.pause')}}</el-button>
-              <el-button size="mini"
-                         class="custom-btn white"
-                         :disabled="metadata.state==='pending'"
-                         @click="terminate">{{$t('debugger.terminate')}}</el-button>
-            </div>
-          </div>
         </div>
-        <div class="hit"
+        <div class="content"
              v-show="radio1==='hit'">
-          <div class="content">
-            <div class="title">{{ $t('debugger.curHitNode') }}</div>
-            <div class="hit-list-wrap">
-              <div class="hit-list"
-                   v-for="(item,key) in watchPointHits"
-                   :key="key">
-                <div>
-                  <div class="node-name"
-                       :class="{selected:item.selected}"
-                       @click="updateTensorValue(key)">{{ item.node_name }}</div>
-                  <div class="watch-points"
-                       v-for="(watchpoint,index) in item.watch_points"
-                       :key="index">
-                    id:{{ watchpoint.id }}&nbsp;condition :{{
-                      conditionMappings[watchpoint.watch_condition.condition]
-                         }} {{watchpoint.watch_condition.param}}
-                  </div>
-                </div>
-              </div>
-              <div class="no-data"
-                   v-if="!watchPointHits.length">
-                {{ $t('public.noData') }}
-              </div>
-            </div>
+          <div class="hit-list-wrap">
+            <el-table :data="watchPointHits"
+                      row-key="id"
+                      :expand-row-keys="expandKeys">
+              <el-table-column type="expand"
+                               width="40">
+                <template slot-scope="props">
+                  <ul>
+                    <li v-for="(i, index) in props.row.lists"
+                        :key="index">{{i.name}}</li>
+                  </ul>
+                </template>
+              </el-table-column>
+              <el-table-column prop="name"
+                               :label="$t('graph.name')">
+                <template slot-scope="scope">
+                  <div class="hit-item"
+                       :class="{selected:scope.row.selected}"
+                       @click="updateTensorValue(scope.$index)">{{scope.row.name}}</div>
+                </template>
+              </el-table-column>
+            </el-table>
           </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-button type="primary"
-                         size="mini"
-                         class="custom-btn green"
-                         :disabled="!step || metadata.state==='running' || metadata.state==='pending'"
-                         @click="control(0)">{{ $t('public.sure') }}</el-button>
-            </div>
-            <div class="btn-two">
-              <el-button size="mini"
-                         class="custom-btn white"
-                         :disabled="metadata.state==='running'|| metadata.state==='pending'"
-                         @click="control(1)">{{$t('debugger.continue')}}</el-button>
-              <el-button size="mini"
-                         class="custom-btn white"
-                         :disabled="metadata.state!=='running'"
-                         @click="control(3)">{{$t('debugger.pause')}}</el-button>
-              <el-button size="mini"
-                         class="custom-btn white"
-                         :disabled="metadata.state==='pending'"
-                         @click="terminate">{{$t('debugger.terminate')}}</el-button>
-            </div>
+        </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-button type="primary"
+                       size="mini"
+                       class="custom-btn green"
+                       :disabled="!step || metadata.state==='running' || metadata.state==='pending'"
+                       @click="control(0)">{{ $t('public.sure') }}</el-button>
+          </div>
+          <div class="btn-two">
+            <el-button size="mini"
+                       class="custom-btn white"
+                       :disabled="metadata.state==='running'|| metadata.state==='pending'"
+                       @click="control(1)">{{$t('debugger.continue')}}</el-button>
+            <el-button size="mini"
+                       class="custom-btn white"
+                       :disabled="metadata.state!=='running'"
+                       @click="control(3)">{{$t('debugger.pause')}}</el-button>
+            <el-button size="mini"
+                       class="custom-btn white"
+                       :disabled="metadata.state==='pending'"
+                       @click="terminate">{{$t('debugger.terminate')}}</el-button>
           </div>
         </div>
       </div>
@@ -300,78 +323,114 @@ limitations under the License.
              v-show="!collapseTable"
              @click="collapseTable=!collapseTable"
              alt="" />
-        <div class="table-title">{{ $t('debugger.tensorMsg')}}</div>
 
-        <div class="table-content">
-          <div class="table-wrap">
-            <el-table ref="singleTable"
-                      :data="tableData"
-                      :header-cell-style="discountHeaderStyle"
-                      :span-method="objectSpanMethod"
-                      :row-class-name="tableRowClassName"
-                      tooltip-effect="light">
-              <el-table-column :label="$t('graph.name')">
-                <el-table-column property="type"
-                                 width="80"></el-table-column>
-                <el-table-column label=""
-                                 show-overflow-tooltip>
-                  <template slot-scope="scope">
-                    <span class="value"
-                          @click="queryAllTreeData(scope.row.name,false)">
-                      {{ scope.row.name }}
-                    </span>
-                  </template>
-                </el-table-column>
-              </el-table-column>
-              <el-table-column property="step"
-                               :label="$t('debugger.step')"
-                               width="80">
-              </el-table-column>
-              <el-table-column property="dtype"
-                               :label="$t('debugger.dType')"
-                               width="200">
-              </el-table-column>
-              <el-table-column property="shape"
-                               :label="$t('debugger.shape')"
-                               width="120">
-              </el-table-column>
-              <el-table-column :label="$t('debugger.value')"
-                               width="260">
-                <template slot="header">
-                  <span class="center">{{ $t('debugger.value')}}</span>
-                </template>
-                <template slot-scope="scope">
-                  <div class="value-wrap">
-                    <el-button size="mini"
-                               type="text"
-                               v-if="scope.row.value === 'click to view'"
-                               @click="viewValueDetail(scope.row)">
-                      {{ $t('debugger.view') }}
-                    </el-button>
-                    <span v-else
-                          class="value-tip"
-                          :title="isNaN(scope.row.value)?'':scope.row.value">{{ scope.row.value }}</span>
-                    <el-button size="mini"
-                               type="text"
-                               :disabled="!scope.row.has_prev_step"
-                               @click="tensorComparisons(scope.row)">
-                      {{ $t('debugger.compareToPre') }}
-                    </el-button>
-                  </div>
-                </template>
-              </el-table-column>
-            </el-table>
-          </div>
-        </div>
+        <el-tabs v-model="tabs.activeName">
+          <el-tab-pane :label="$t('debugger.tensorMsg')"
+                       name="tensor">
+            <div class="table-content">
+              <div class="table-wrap">
+                <el-table ref="singleTable"
+                          :data="tableData"
+                          :header-cell-style="discountHeaderStyle"
+                          :span-method="objectSpanMethod"
+                          :row-class-name="tableRowClassName"
+                          tooltip-effect="light">
+                  <el-table-column :label="$t('graph.name')">
+                    <el-table-column property="type"
+                                     width="80"></el-table-column>
+                    <el-table-column label=""
+                                     show-overflow-tooltip>
+                      <template slot-scope="scope">
+                        <span class="value"
+                              @click="queryAllTreeData(scope.row.name,false,scope.row.graph_name)">
+                          {{ scope.row.name }}
+                        </span>
+                      </template>
+                    </el-table-column>
+                  </el-table-column>
+                  <el-table-column property="step"
+                                   :label="$t('debugger.step')"
+                                   width="80">
+                  </el-table-column>
+                  <el-table-column property="dtype"
+                                   :label="$t('debugger.dType')"
+                                   width="200">
+                  </el-table-column>
+                  <el-table-column property="shape"
+                                   :label="$t('debugger.shape')"
+                                   width="120">
+                  </el-table-column>
+                  <el-table-column :label="$t('debugger.value')"
+                                   width="260">
+                    <template slot="header">
+                      <span class="center">{{ $t('debugger.value')}}</span>
+                    </template>
+                    <template slot-scope="scope">
+                      <div class="value-wrap">
+                        <el-button size="mini"
+                                   type="text"
+                                   v-if="scope.row.value === 'click to view'"
+                                   @click="viewValueDetail(scope.row)">
+                          {{ $t('debugger.view') }}
+                        </el-button>
+                        <span v-else
+                              class="value-tip"
+                              :title="isNaN(scope.row.value)?'':scope.row.value">{{ scope.row.value }}</span>
+                        <el-button size="mini"
+                                   type="text"
+                                   :disabled="!scope.row.has_prev_step"
+                                   @click="tensorComparisons(scope.row)">
+                          {{ $t('debugger.compareToPre') }}
+                        </el-button>
+                      </div>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane :label="$t('graph.nodeInfo')"
+                       name="detail">
+            <div class="table-content">
+              <div class="table-wrap">
+                <el-table ref="nodeInfo"
+                          :data="selectedNode.IOInfo"
+                          :header-cell-style="discountHeaderStyle"
+                          :span-method="objectSpanMethod"
+                          :row-class-name="tableRowClassName"
+                          tooltip-effect="light">
+                  <el-table-column :label="$t('graph.name')">
+                    <el-table-column property="IOType"
+                                     width="80"></el-table-column>
+                    <el-table-column label=""
+                                     show-overflow-tooltip>
+                      <template slot-scope="scope">
+                        <span class="value"
+                              @click="queryAllTreeData(scope.row.name,false,scope.row.graph_name)">
+                          {{ scope.row.name }}
+                        </span>
+                      </template>
+                    </el-table-column>
+                  </el-table-column>
+                </el-table>
+              </div>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
       </div>
     </div>
     <div class="deb-con"
          v-if="tensorCompareFlag">
       <div class="deb-con-title">
-        <div class="deb-con-title-left">
+        <div class="deb-con-title-left"
+             :title="curRowObj.name">
           {{ curRowObj.name }}
         </div>
-
+        <div class="deb-con-title-middle">
+          MIN
+          <div class="grident">0</div>
+          MAX
+        </div>
         <div class="deb-con-title-right">
           <div class="close-btn">
             <img src="@/assets/images/close-page.png"
@@ -427,10 +486,106 @@ limitations under the License.
           </debuggerGridTable>
         </div>
         <div class="deb-compare-detail">
-          {{ $t('tensors.dimension') }} {{ curRowObj.shape }}
+          <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===2">{{$t('debugger.diffStatisticsLabel')}}</label>
+            <span>{{ $t('debugger.max') }} {{ statistics.overall_max }}</span>
+            <span>{{ $t('debugger.min') }} {{ statistics.overall_min }}</span>
+            <span>{{ $t('debugger.mean') }} {{ statistics.overall_avg }}</span>
+            <span>{{ $t('debugger.nan') }} {{ statistics.overall_nan_count }}</span>
+            <span>{{ $t('debugger.negativeInf') }} {{ statistics.overall_neg_inf_count }}</span>
+            <span>{{ $t('debugger.inf') }} {{ statistics.overall_pos_inf_count }}</span>
+            <span>{{ $t('debugger.zero') }} {{ statistics.overall_zero_count }}</span>
+            <span>{{ $t('debugger.negativeNum') }} {{ statistics.overall_neg_zero_count }}</span>
+            <span>{{ $t('debugger.positiveNum') }} {{ statistics.overall_pos_zero_count }}</span>
+          </div>
         </div>
       </div>
     </div>
+    <el-dialog :title="$t('debugger.createWP')"
+               :visible.sync="createWPDialogVisible"
+               :close-on-click-modal="false"
+               :modal-append-to-body="false"
+               class="creat-watch-point-dialog"
+               width="900px">
+
+      <div class="conditions-container">
+        <div class="condition-item"
+             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"
+                       :key="i.id"
+                       :label="transCondition(i.id)"
+                       :value="i.id">
+            </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"
+                       :key="i.id"
+                       :label="transCondition(i.id)"
+                       :value="i.id">
+            </el-option>
+          </el-select>
+
+          <el-select v-model="item.param.name"
+                     :placeholder="$t('debugger.chooseParam')"
+                     @change="paramChange(item)"
+                     v-if="item.param.options.length"
+                     class="param">
+            <el-option v-for="i in item.param.options"
+                       :key="i.name"
+                       :label="transCondition(i.name)"
+                       :value="i.name">
+            </el-option>
+          </el-select>
+
+          <el-input v-model="item.param.value"
+                    :placeholder="$t('scalar.placeHolderNumber')"
+                    v-if="item.param.options.length &&
+                                item.param.type !== 'BOOL'"
+                    @input="validateParam(item)"
+                    class="param-value"></el-input>
+          <el-select v-model="item.param.value"
+                     v-if="item.param.options.length &&
+                                item.param.type === 'BOOL'"
+                     class="param-value">
+            <el-option :key="true"
+                       label="true"
+                       :value="true">
+            </el-option>
+            <el-option :key="false"
+                       label="false"
+                       :value="false">
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <span slot="footer"
+            class="dialog-footer">
+        <el-button type="primary"
+                   size="mini"
+                   class="custom-btn green"
+                   :disabled="!validPram"
+                   @click="createWatchPoint(true)">{{$t('public.sure')}}</el-button>
+        <el-button type="primary"
+                   size="mini"
+                   class="custom-btn"
+                   @click="createWatchPoint(false)">
+          {{ $t('public.cancel') }}
+        </el-button>
+      </span>
+    </el-dialog>
+
     <el-dialog :title="$t('public.notice')"
                :visible.sync="dialogVisible"
                :show-close="false"
@@ -483,24 +638,27 @@ export default {
       defaultProps: {
         children: 'nodes',
         label: 'label',
+        isLeaf: 'leaf',
       },
       curNodeData: [],
       lazy: true,
       radio1: 'tree',
+      nodeTypes: {
+        options: ['all', 'weight', 'activation', 'gradient'],
+        label: {},
+        value: 'all',
+      },
       watchPointArr: [],
       allWatchPointFlag: true,
+      enableRecheck: false,
       dynamicTreeData: [],
       watchPointHits: [],
       defaultCheckedArr: [],
-      watchPointPending: true,
       origialTree: [],
-      conditions: {
-        options: [],
-        hasValue: [],
-        noValue: [],
-      },
+      conditionCollections: [],
+      createWatchPointArr: [],
+      createWPDialogVisible: false,
       validPram: false,
-      conditionMappings: {},
       curWatchPointId: null,
       step: '',
       metadata: {},
@@ -521,6 +679,11 @@ export default {
       inputLength: 0,
       curLeafNodeName: null,
 
+      graphFiles: {
+        options: [],
+        value: '',
+        graphs: {},
+      },
       allGraphData: {}, // Graph Original input data
       firstFloorNodes: [], // ID array of the first layer node.
       nodesCountLimit: 1500, // Maximum number of sub-nodes in a namespace.
@@ -554,14 +717,27 @@ export default {
       toleranceInput: 0,
       showFilterInput: true,
       currentNodeName: '',
+      statisticsArr: [],
+      tabs: {
+        activeName: 'tensor',
+      },
+      searchNode: null,
+      searchResolve: null,
+      isCurrentGraph: true, // Check whether the new and old graphs are the same.
+      expandKeys: [],
+      isHitIntoView: true,
     };
   },
   components: {debuggerGridTable},
   computed: {},
   mounted() {
-    document.title = `Debugger-MindInsight`;
-    window.addEventListener('resize', this.resizeCallback, false);
-    this.initCondition();
+    document.title = `${this.$t('debugger.debugger')}-MindInsight`;
+    window.addEventListener(
+        'resize',
+        this.debounce(this.resizeCallback, 200),
+        false,
+    );
+    this.nodeTypes.label = this.$t('debugger.nodeType');
   },
   watch: {
     'metadata.state': {
@@ -572,6 +748,9 @@ export default {
         if (oldValue === 'pending' && newValue === 'waiting') {
           this.loadNode(this.node, this.resolve);
         }
+        if (oldValue === 'running' && newValue === 'waiting') {
+          this.getWatchpointHits();
+        }
         if (newValue === 'pending') {
           this.dialogVisible = true;
         } else {
@@ -582,7 +761,113 @@ export default {
     },
   },
   methods: {
-
+    queryGraphByFile() {
+      this.searchWord = '';
+      this.nodeTypes.value = 'all';
+      this.treeFlag = true;
+      const params = {
+        mode: 'node',
+        params: {
+          watch_point_id: this.curWatchPointId ? this.curWatchPointId : 0,
+          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);
+            }
+            if (res.data && res.data.graph) {
+              const graph = res.data.graph;
+              this.origialTree = res.data.graph.nodes.map((val) => {
+                return {
+                  label: val.name.split('/').pop(),
+                  leaf:
+                  val.type === 'name_scope' || val.type === 'aggregation_scope'
+                    ? false
+                    : true,
+                  ...val,
+                };
+              });
+              this.node.childNodes = [];
+              this.resolve(this.origialTree);
+              this.defaultCheckedArr = this.origialTree
+                  .filter((val) => {
+                    return val.watched === 2;
+                  })
+                  .map((val) => val.name);
+              this.node.childNodes.forEach((val) => {
+                if (val.data.watched === 1) {
+                  val.indeterminate = true;
+                }
+                if (val.data.watched === 0) {
+                  val.checked = false;
+                }
+                if (val.data.watched === 2) {
+                  val.checked = true;
+                }
+              });
+              this.firstFloorNodes = [];
+              this.allGraphData = {};
+              d3.select('#graph svg').remove();
+              this.selectedNode.name = '';
+              this.dealGraphData(JSON.parse(JSON.stringify(graph.nodes)));
+            }
+          },
+          (err) => {
+            this.showErrorMsg(err);
+            this.resolve([]);
+          },
+      );
+    },
+    selectAllFiles(type) {
+      if (!type && !this.$refs.tree.getCheckedKeys().length) {
+        return;
+      }
+      if (type && !this.node.childNodes.find((val) => val.checked === false)) {
+        return;
+      }
+      const watchNodes = [];
+      this.node.childNodes.forEach((val) => {
+        val.checked = type;
+        watchNodes.push(val.data.name);
+        if (val.childNodes) {
+          this.dealCheckPro(val.childNodes, type);
+        }
+      });
+      if (this.curWatchPointId) {
+        const params = {
+          watch_point_id: this.curWatchPointId ? this.curWatchPointId : 0,
+          watch_nodes: watchNodes,
+          mode: type ? 1 : 0,
+          graph_name: this.graphFiles.value,
+        };
+        if (this.graphFiles.value === this.$t('debugger.all')) {
+          delete params.graph_name;
+        }
+        RequestService.updateWatchpoint(params).then(
+            (res) => {
+              this.defaultCheckedArr = this.$refs.tree.getCheckedKeys();
+            },
+            (err) => {
+              this.showErrorMsg(err);
+            },
+        );
+      }
+    },
+    nodeTypesChange() {
+      if (this.nodeTypes.value === 'all' && !this.searchWord) {
+        this.treeFlag = true;
+        this.node.level = 0;
+        this.queryGraphByFile();
+      } else {
+        this.treeFlag = false;
+        this.filter();
+      }
+    },
     /**
      * Query graph data by watchpoint id
      * @param {Number} id Wacthpoint id
@@ -590,12 +875,16 @@ export default {
     queryGraphByWatchpoint(id) {
       const params = {
         mode: 'watchpoint',
-        params: {watch_point_id: id},
+        params: {watch_point_id: id, 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.graph && res.data.graph.nodes) {
-              this.curNodeData = res.data.graph.nodes.map((val) => {
+            if (res.data && res.data.graph) {
+              const graph = res.data.graph;
+              this.curNodeData = graph.nodes.map((val) => {
                 return {
                   label: val.name.split('/').pop(),
                   ...val,
@@ -623,14 +912,11 @@ export default {
                 }
               });
 
-              Object.keys(this.allGraphData).forEach((key) => {
-                delete this.allGraphData[key];
-              });
+              this.firstFloorNodes = [];
+              this.allGraphData = {};
               d3.select('#graph svg').remove();
               this.selectedNode.name = '';
-              this.dealGraphData(
-                  JSON.parse(JSON.stringify(res.data.graph.nodes)),
-              );
+              this.dealGraphData(JSON.parse(JSON.stringify(graph.nodes)));
             }
           },
           (err) => {
@@ -640,6 +926,32 @@ export default {
     },
     /** ************************ graph **********************/
 
+    /**
+     * Get watchpoint messages
+     * @param {Object} item Wacthpoint data
+     * @return {String}
+     */
+    getWatchPointContent(item) {
+      let param = '';
+      if (item.params.length) {
+        item.params.forEach((i, ind) => {
+          const name = this.transCondition(i.name);
+          if (!ind) {
+            param += `${name}:${i.value}`;
+          } else {
+            param += `, ${name}:${i.value}`;
+          }
+        });
+        param = `(${param})`;
+      }
+
+      const str = `${this.$t('debugger.watchPoint')} ${
+        item.id
+      }: ${this.transCondition(item.condition)} ${param}`;
+      return str;
+    },
+    /** ************************ graph **********************/
+
     /**
      * Add the location attribute to each node to facilitate the obtaining of node location parameters.
      */
@@ -812,7 +1124,11 @@ export default {
         mode: 'continue',
         level: 'node',
         name: this.selectedNode.name.replace('_unfold', ''),
+        graph_name: this.graphFiles.value,
       };
+      if (this.graphFiles.value === this.$t('debugger.all')) {
+        delete params.graph_name;
+      }
       RequestService.control(params).then(
           (res) => {
             if (res && res.data) {
@@ -885,20 +1201,18 @@ export default {
           name: name,
           node_type: type,
           single_node: false,
+          graph_name: this.graphFiles.value,
         };
+        if (this.graphFiles.value === this.$t('debugger.all')) {
+          delete params.params.graph_name;
+        }
       }
       RequestService.retrieve(params)
           .then(
               (response) => {
-                if (
-                  response &&
-              response.data &&
-              response.data.graph &&
-              response.data.graph.nodes
-                ) {
-                  const nodes = JSON.parse(
-                      JSON.stringify(response.data.graph.nodes),
-                  );
+                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);
                   }
@@ -1023,18 +1337,78 @@ export default {
               clearTimeout(this.graph.timer);
             }
             this.graph.timer = setTimeout(() => {
-              this.retrieveTensorHistory({
-                name: path[0].replace('_unfold', ''),
-              });
+              const name = path[0].replace('_unfold', '');
+              if (this.graphFiles.value === this.$t('debugger.all')) {
+                this.retrieveTensorHistory(
+                    {name: name.replace(`${name.split('/')[0]}/`, '')},
+                    name.split('/')[0],
+                );
+              } else {
+                this.retrieveTensorHistory(
+                    {
+                      name,
+                    },
+                    this.graphFiles.value,
+                );
+              }
             }, 500);
           }
           if (ignoreType.includes(type)) {
             this.tableData = [];
           } else {
-            this.nodeName = this.selectedNode.name;
+            if (this.graphFiles.value === this.$t('debugger.all')) {
+              this.nodeName = this.selectedNode.name.replace(
+                  `${this.selectedNode.name.split('/')[0]}/`,
+                  '',
+              );
+            } else {
+              this.nodeName = this.selectedNode.name;
+            }
           }
         }
       }
+      this.setSelectedNodeData(node.data);
+      if (
+        this.watchPointHits.length &&
+        this.radio1 === 'hit' &&
+        this.isHitIntoView
+      ) {
+        this.focusWatchpointHit();
+      }
+      this.isHitIntoView = true;
+    },
+    /**
+     * The node information of the selected node.
+     * @param {Object} selectedNode Node data
+     */
+    setSelectedNodeData(selectedNode = {}) {
+      this.selectedNode.IOInfo = [];
+      this.selectedNode.inputNum = 0;
+      this.selectedNode.outputNum = 0;
+      if (selectedNode.output) {
+        Object.keys(selectedNode.output).forEach((key) => {
+          let graphName = this.graphFiles.value;
+          if (this.graphFiles.value === this.$t('debugger.all')) {
+            graphName = key.split('/')[0];
+            key = key.replace(`${graphName}/`, '');
+          }
+          const obj = {name: key, IOType: 'output', graph_name: graphName};
+          this.selectedNode.IOInfo.push(obj);
+          this.selectedNode.outputNum++;
+        });
+      }
+      if (selectedNode.input) {
+        Object.keys(selectedNode.input).forEach((key) => {
+          let graphName = this.graphFiles.value;
+          if (this.graphFiles.value === this.$t('debugger.all')) {
+            graphName = key.split('/')[0];
+            key = key.replace(`${graphName}/`, '');
+          }
+          const obj = {name: key, IOType: 'input', graph_name: graphName};
+          this.selectedNode.IOInfo.push(obj);
+          this.selectedNode.inputNum++;
+        });
+      }
     },
     /**
      * The position is offset to the current node in the center of the screen.
@@ -1243,7 +1617,11 @@ export default {
     },
   },
   destroyed() {
-    window.removeEventListener('resize', this.resizeCallback);
+    window.removeEventListener(
+        'resize',
+        this.debounce(this.resizeCallback, 200),
+        false,
+    );
   },
 };
 </script>
@@ -1283,7 +1661,18 @@ export default {
         }
       }
       .content {
-        height: calc(100% - 50px);
+        height: calc(100% - 145px);
+        .node-type {
+          height: 50px;
+          padding: 15px 15px 0 15px;
+          .label {
+            display: inline-block;
+            width: 80px;
+          }
+          .el-select {
+            width: calc(100% - 80px);
+          }
+        }
         .select-wrap {
           padding: 10px 15px;
           font-size: 14px;
@@ -1300,14 +1689,17 @@ export default {
           }
         }
         .tree-wrap {
-          height: calc(60% - 180px);
+          height: calc(70% - 155px);
           overflow-y: auto;
           padding: 0 15px 15px;
           position: relative;
           z-index: 2;
+          .image-type {
+            width: 20px;
+            height: 10px;
+            margin-right: 10px;
+          }
           .el-tree {
-            overflow-x: auto;
-            overflow-y: hidden;
             & > .el-tree-node {
               min-width: 100%;
               display: inline-block;
@@ -1315,9 +1707,8 @@ export default {
           }
         }
         .watch-point-wrap {
-          height: 40%;
+          height: 30%;
           border-top: 1px solid #ebeef5;
-          border-bottom: 1px solid #ebeef5;
           .title-wrap {
             height: 30px;
             line-height: 30px;
@@ -1326,6 +1717,33 @@ export default {
             border-bottom: 1px solid #ebeef5;
             font-weight: bold;
           }
+          .check-wrap {
+            position: absolute;
+            right: 60px;
+            top: 0px;
+            .el-icon-circle-check {
+              color: #00a5a7;
+              cursor: pointer;
+              display: none;
+            }
+            .disable:before {
+              cursor: not-allowed;
+              color: #adb0b8;
+            }
+          }
+          .delete-wrap {
+            position: absolute;
+            right: 35px;
+            top: 0px;
+            .el-icon-delete:before {
+              color: #00a5a7;
+              cursor: pointer;
+            }
+            .disable:before {
+              cursor: not-allowed;
+              color: #adb0b8;
+            }
+          }
           .add-wrap {
             position: absolute;
             right: 10px;
@@ -1348,7 +1766,7 @@ export default {
                 .name {
                   .item-content {
                     display: inline-block;
-                    width: 320px;
+                    width: 310px;
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     overflow: hidden;
@@ -1364,118 +1782,81 @@ export default {
                   .el-icon-close {
                     position: absolute;
                     right: 10px;
-                    top: 0;
+                    top: 3px;
                   }
                   .el-icon-check {
                     position: absolute;
-                    right: 40px;
-                    top: 0;
-                  }
-                }
-                .condition {
-                  margin: 10px 0;
-                  .el-select {
-                    width: 150px;
-                  }
-                  .condition-param {
-                    width: 120px;
-                    margin-left: 10px;
-                  }
-                  .btn-wrap {
-                    display: inline-block;
-                    margin-left: 10px;
-                    padding: 0;
+                    right: 30px;
+                    top: 3px;
                   }
                 }
               }
             }
           }
         }
-        .btn-wrap {
-          padding: 10px 20px 0;
-          .step {
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-            .custom-btn {
-              margin-left: 10px;
-            }
-          }
-          .btn-two {
-            width: 100%;
-            .custom-btn {
-              height: 30px;
-              margin-top: 10px;
-            }
-          }
-          .el-button + .el-button {
-            margin-left: 0px;
-          }
-          .el-button:not(:last-child) {
-            margin-right: 10px;
-          }
-        }
         .custom-tree-node {
           padding-right: 8px;
         }
         .custom-tree-node.highlight {
           color: red;
         }
-      }
-      .hit {
-        height: 100%;
-        .content {
-          height: calc(100% - 185px);
-          padding-left: 15px;
-        }
-        .title {
-          margin: 10px 0 30px;
-        }
         .hit-list-wrap {
-          height: calc(100% - 50px);
+          height: 100%;
           overflow-y: auto;
-          .hit-list {
-            margin-bottom: 10px;
-            border-bottom: 1px solid #ebeef5;
-            .node-name {
-              padding-left: 10px;
-              line-height: 20px;
-              &:hover {
-                color: #00a5a7;
-                cursor: pointer;
-              }
-            }
-            .node-name.selected {
-              color: #00a5a7;
-            }
-            .watch-points {
-              padding-left: 20px;
-              margin: 5px 0;
+          padding: 10px;
+          .hit-item {
+            word-break: break-all;
+            line-height: 18px;
+            padding: 10px;
+            &:hover {
+              cursor: pointer;
             }
           }
-          .no-data {
-            text-align: center;
-            color: #909399;
+          .selected {
+            color: #00a5a7;
           }
-        }
-        .btn-wrap {
-          padding: 10px 20px 0;
-          .step {
-            margin-bottom: 10px;
-            display: flex;
-            justify-content: space-between;
-            .custom-btn {
-              margin-left: 10px;
+          .el-table__expanded-cell[class*='cell'] {
+            padding: 0px 10px 0 50px;
+            ul {
+              background-color: #f5f7fa;
+              li {
+                line-height: 18px;
+                padding: 10px;
+                word-break: break-all;
+                border-top: 1px solid white;
+                border-bottom: 1px solid white;
+                &:hover {
+                  background-color: #ebeef5;
+                }
+              }
             }
           }
-          .el-button + .el-button {
-            margin-bottom: 10px;
-            margin-left: 0px;
+        }
+      }
+      .btn-wrap {
+        padding: 10px 20px;
+        border-top: 1px solid #ebeef5;
+        .step {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          .custom-btn {
+            margin-left: 10px;
           }
-          .el-button:not(:last-child) {
-            margin-right: 10px;
+        }
+        .btn-two {
+          width: 100%;
+          .custom-btn {
+            height: 30px;
+            margin-top: 10px;
           }
         }
+        .el-button + .el-button {
+          margin-left: 0px;
+        }
+        .el-button:not(:last-child) {
+          margin-right: 10px;
+        }
       }
     }
     .collapse-btn {
@@ -1635,21 +2016,14 @@ export default {
     .table-container {
       background: #fff;
       height: calc(50% - 60px);
-      padding-left: 15px;
       position: relative;
       img {
         position: absolute;
         right: 10px;
-        top: 20px;
+        top: 12px;
         cursor: pointer;
         z-index: 99;
       }
-      .table-title {
-        height: 50px;
-        line-height: 30px;
-        padding: 10px 0;
-        font-weight: bold;
-      }
       .el-tabs.el-tabs--top {
         height: 100%;
         .el-tabs__content {
@@ -1660,7 +2034,7 @@ export default {
         }
       }
       .table-content {
-        height: calc(100% - 50px);
+        height: 100%;
         overflow: hidden;
         position: relative;
         .table-wrap {
@@ -1726,6 +2100,9 @@ export default {
     }
     .table-container.collapse {
       height: 35px;
+      .el-tabs__header {
+        margin: 0;
+      }
       .table-content {
         display: none;
       }
@@ -1761,6 +2138,20 @@ export default {
   .notShow {
     display: none;
   }
+  .conditions-container {
+    .collection {
+      width: 200px;
+    }
+    .condition {
+      width: 200px;
+    }
+    .param {
+      width: 200px;
+    }
+    .param-value {
+      width: 200px;
+    }
+  }
   .el-dialog__wrapper.pendingTips {
     position: absolute;
     .dialog-icon {
@@ -1806,6 +2197,29 @@ export default {
         left: 32px;
         font-weight: bold;
         font-size: 16px;
+        width: 50%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .deb-con-title-middle {
+        position: absolute;
+        left: calc(50% + 32px);
+        width: 300px;
+        padding: 10px 0;
+        line-height: 36px;
+        .grident {
+          display: inline-block;
+          width: calc(100% - 70px);
+          background-image: linear-gradient(
+            to right,
+            rgba(227, 125, 41),
+            #fff,
+            rgba(0, 165, 167)
+          );
+          text-align: center;
+          color: transparent;
+        }
       }
       .deb-con-title-right {
         position: absolute;
@@ -1870,7 +2284,19 @@ export default {
       flex: 1;
       padding: 0 32px;
       .deb-compare-wrap {
-        height: calc(100% - 50px);
+        height: calc(100% - 120px);
+      }
+      .deb-compare-detail {
+        span {
+          margin-right: 15px;
+        }
+        & > div {
+          margin-top: 10px;
+        }
+        label {
+          display: inline-block;
+          min-width: 100px;
+        }
       }
     }
   }