UI fix bug of debugger page

mindinsight/ui/src/components/debugger-grid-table-simple.vue

@@ -64,6 +64,14 @@ limitations under the License.
         <span>{{ $t('tensors.dimension') }} {{ shape }}</span>
       </div>
       <div class="accuracy-container">
+        {{$t('components.category')}}<el-select v-model="category"
+                   class="select-category"
+                   @change="accuracyChange">
+          <el-option v-for="item in categoryArr"
+                     :key="item.label"
+                     :label="item.label"
+                     :value="item.value"></el-option>
+        </el-select>
         {{$t('components.gridAccuracy')}}<el-select v-model="accuracy"
                    class="select-item"
                    @change="accuracyChange">
@@ -162,6 +170,11 @@ export default {
         colStartIndex: 0,
       },
       shape: '',
+      categoryArr: [
+        {label: this.$t('components.value'), value: 'value'},
+        {label: this.$t('components.ScientificCounting'), value: 'science'},
+      ],
+      category: 'value', // value:Numerical notation      science:Scientific notation
     };
   },
   computed: {},
@@ -239,7 +252,7 @@ export default {
           id: -1,
           name: ' ',
           field: -1,
-          width: 100,
+          width: 120,
           headerCssClass: 'headerStyle',
         },
       ];
@@ -251,7 +264,7 @@ export default {
             id: order,
             name: order,
             field: order,
-            width: 100,
+            width: 120,
             headerCssClass: 'headerStyle',
             formatter:
               this.gridType === this.gridTypeKeys.compare ? this.formateCompareColor : this.formateValueColor,
@@ -350,7 +363,11 @@ export default {
               if (isNaN(innerValue) || innerValue === 'Infinity' || innerValue === '-Infinity') {
                 tempArr.push(innerValue);
               } else {
-                tempArr.push(innerValue.toFixed(this.accuracy));
+                if (this.category === 'science') {
+                  tempArr.push(innerValue.toExponential(this.accuracy));
+                } else {
+                  tempArr.push(innerValue.toFixed(this.accuracy));
+                }
               }
             });
             tempData[innerOrder] = tempArr;
@@ -367,7 +384,11 @@ export default {
             if (isNaN(innerData) || innerData === 'Infinity' || innerData === '-Infinity') {
               tempData[innerOrder] = innerData;
             } else {
-              tempData[innerOrder] = innerData.toFixed(this.accuracy);
+              if (this.category === 'science') {
+                tempData[innerOrder] = innerData.toExponential(this.accuracy);
+              } else {
+                tempData[innerOrder] = innerData.toFixed(this.accuracy);
+              }
             }
           });
           tempArr.push(tempData);
@@ -676,6 +697,10 @@ export default {
         width: 65px;
         margin-left: 5px;
       }
+      .select-category {
+        width: 105px;
+        margin-left: 5px;
+      }
     }
   }
 }

mindinsight/ui/src/components/debugger-tensor.vue

@@ -279,12 +279,13 @@ export default {
       tuningAdvice: [],
       tuningAdviceTitle: '',
       watchPoints: [],
+      callbackFun: null,
     };
   },
   mounted() {
     this.$nextTick(() => {
-      window.addEventListener('resize', this.debounce(this.resizeCallback, 200), false);
-
+      this.callbackFun = this.debounce(this.resizeCallback, 200);
+      window.addEventListener('resize', this.callbackFun);
       this.init();
     });
   },
@@ -369,7 +370,7 @@ export default {
                   item.tuningAdvice = this.$t(`debugger.tensorTuningAdvice`)[tuning][2];
                 }
                 item.params.forEach((element) => {
-                  if (!element.actual_value) {
+                  if (element.actual_value === undefined || element.actual_value === null) {
                     element.actual = this.$t('symbols.rightbracket');
                   } else {
                     element.actual = `, ${this.$t('debugger.actualValue')}${this.$t('symbols.colon')}${
@@ -397,22 +398,18 @@ export default {
       if (item.params.length) {
         item.params.forEach((i, ind) => {
           const name = this.$parent.transCondition(i.name);
+          const actual =
+            i.actual_value === undefined || i.actual_value === null
+              ? ''
+              : `, ${this.$t('debugger.actualValue')}:${i.actual_value}`;
           if (!ind) {
-            param += !i.actual_value
-              ? `${name}${this.$t('symbols.leftbracket')}${this.$t('debugger.setValue')}:${i.value}${this.$t(
-                  'symbols.rightbracket',
-              )}`
-              : `${name}${this.$t('symbols.leftbracket')}${this.$t('debugger.setValue')}:${i.value}, ${this.$t(
-                  'debugger.actualValue',
-              )}:${i.actual_value}${this.$t('symbols.rightbracket')}`;
+            param += `${name}${this.$t('symbols.leftbracket')}${this.$t('debugger.setValue')}:${
+              i.value
+            }${actual}${this.$t('symbols.rightbracket')}`;
           } else {
-            param += !i.actual_value
-              ? `, ${name}${this.$t('symbols.leftbracket')}${this.$t('debugger.setValue')}:${i.value}${this.$t(
-                  'symbols.rightbracket',
-              )}`
-              : `, ${name}${this.$t('symbols.leftbracket')}${this.$t('debugger.setValue')}:${i.value}, ${this.$t(
-                  'debugger.actualValue',
-              )}:${i.actual_value}${this.$t('symbols.rightbracket')}`;
+            param += `, ${name}${this.$t('symbols.leftbracket')}${this.$t('debugger.setValue')}:${
+              i.value
+            }${actual}${this.$t('symbols.rightbracket')}`;
           }
         });
         param = `(${param})`;
@@ -1017,7 +1014,7 @@ export default {
     },
   },
   destroyed() {
-    window.removeEventListener('resize', this.debounce(this.resizeCallback, 200), false);
+    window.removeEventListener('resize', this.callbackFun);
   },
 };
 </script>
@@ -1207,7 +1204,7 @@ export default {
       }
       label {
         display: inline-block;
-        min-width: 100px;
+        min-width: 123px;
         span {
           border-left: none;
         }

mindinsight/ui/src/components/header.vue

@@ -191,6 +191,9 @@ export default {
     getActive() {
       const str = this.$route.path.split('/');
       if (str.length > 1) {
+        if (!str[1]) {
+          return;
+        }
         if (str[1] === 'debugger') {
           return this.$route.path;
         } else if (str[1] === 'explain') {

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

@@ -465,7 +465,9 @@
     "gridTableNoData": "No data in the table.",
     "value": "Value",
     "dimsFilterInputTitle": "Dimension Selection",
-    "dimsFilterInputTip": "The dimension value can be a specific index (consistent with the Python index meaning and supporting negative signs) or a colon (:) that indicates all values of the current dimension."
+    "dimsFilterInputTip": "The dimension value can be a specific index (consistent with the Python index meaning and supporting negative signs) or a colon (:) that indicates all values of the current dimension.",
+    "category": "Type",
+    "ScientificCounting": "Scientific notation"
   },
   "debugger": {
     "debugger": "Debugger",
@@ -581,6 +583,8 @@
       "rtol": "Relative tolerance",
       "abs_update_ratio_mean_gt": "Average of the absolute value of the change ratio >",
       "abs_update_ratio_mean_lt": "Average of the absolute value of the change ratio <",
+      "abs_mean_update_ratio_gt": "Ratio of mean update >",
+      "abs_mean_update_ratio_lt": "Ratio of mean update <",
       "param": "Threshold",
       "max_min_lt": "MAX-MIN <",
       "max_min_gt": "MAX-MIN >",

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

@@ -464,7 +464,9 @@
     "gridTableNoData": "表格无数据",
     "value": "数值",
     "dimsFilterInputTitle": "维度选择",
-    "dimsFilterInputTip": "维度输入值可以是具体的索引（和Python的索引含义一致,支持负号）或者冒号\":\"，其中冒号\":\"表示当前维度的所有值"
+    "dimsFilterInputTip": "维度输入值可以是具体的索引（和Python的索引含义一致,支持负号）或者冒号\":\"，其中冒号\":\"表示当前维度的所有值",
+    "category": "分类",
+    "ScientificCounting": "科学计数"
   },
   "debugger": {
     "debugger": "调试器",
@@ -580,9 +582,11 @@
       "rtol": "相对容忍度",
       "abs_update_ratio_mean_gt": "变化比例绝对值的平均值>",
       "abs_update_ratio_mean_lt": "变化比例绝对值的平均值<",
+      "abs_mean_update_ratio_gt": "平均变化比例值>",
+      "abs_mean_update_ratio_lt": "平均变化比例值<",
       "param": "阈值",
-      "max_min_lt": "MAX-MIN<",
-      "max_min_gt": "MAX-MIN>"
+      "max_min_lt": "MAX-MIN <",
+      "max_min_gt": "MAX-MIN >"
     },
     "tensorTuningAdvice": {
       "operator_real_data_validation": [

mindinsight/ui/src/mixins/debugger-mixin.vue

@@ -300,8 +300,12 @@ export default {
         this.querySingleNode({}, data.name, true);
       } else {
         if (this.graphFiles.value === this.$t('debugger.all')) {
-          const graphName = data.name.split('/')[0];
-          this.queryAllTreeData(data.name.replace(`${graphName}/`, ''), true, graphName);
+          if (data.name.includes('/')) {
+            const graphName = data.name.split('/')[0];
+            this.queryAllTreeData(data.name.replace(`${graphName}/`, ''), true, graphName);
+          } else {
+            this.queryAllTreeData(data.name, true, data.name);
+          }
         } else {
           this.queryAllTreeData(data.name, true, this.graphFiles.value);
         }
@@ -1463,7 +1467,7 @@ export default {
                     item += ` ${this.transCondition(j.watch_condition.id)}`;
                     const param = (j.watch_condition.params || [])
                         .map((k) =>
-                        !k.actual_value
+                        k.actual_value === undefined || k.actual_value === null
                           ? `${this.transCondition(k.name)}: ${this.$t('debugger.setValue')}:${k.value}`
                           : `${this.transCondition(k.name)}: ${this.$t('debugger.setValue')}:${k.value}, ${this.$t(
                               'debugger.actualValue',
@@ -1591,8 +1595,10 @@ export default {
         },
       };
       if (this.graphFiles.value === this.$t('debugger.all') && graphName && name) {
-        name = `${graphName}/${name}`;
-        params.params.name = name;
+        if (name !== graphName) {
+          name = `${graphName}/${name}`;
+          params.params.name = name;
+        }
       } else {
         params.params.graph_name = graphName;
       }

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

@@ -104,7 +104,7 @@ limitations under the License.
                   :show-checkbox="!!curWatchPointId">
               <span class="custom-tree-node"
                     slot-scope="{ node ,data }">
-                <span :class="{const:data.type==='Const'}">
+                <span :class="{const:data.type==='Const' && curWatchPointId}">
                   <img v-if="data.type ==='name_scope'"
                        :src="require('@/assets/images/name-scope.svg')"
                        class="image-type" />
@@ -134,7 +134,7 @@ limitations under the License.
                   ref="searchTree">
               <span class="custom-tree-node"
                     slot-scope="{ node ,data }">
-                <span :class="{const:data.type==='Const'}">
+                <span :class="{const:data.type==='Const' && curWatchPointId}">
                   <img v-if="data.type ==='name_scope'"
                        :src="require('@/assets/images/name-scope.svg')"
                        class="image-type" />