debugger ui add loading mask and clear torerance

mindinsight/ui/src/components/debuggerGridTableSimple.vue

@@ -120,7 +120,7 @@ export default {
       formateData: [], // formatted data
       formateArr: [], // formatted Array
       statistics: {}, // Object contain maximun and minimun
-      accuracy: 7, // accuracy value
+      accuracy: 10, // accuracy value
       incorrectData: false, // Wheather the dimension is correctly selected
       updated: false, // Updated
       scrollTop: false, // Wheather scroll to the top
@@ -138,6 +138,9 @@ export default {
         {label: 5, value: 5},
         {label: 6, value: 6},
         {label: 7, value: 7},
+        {label: 8, value: 8},
+        {label: 9, value: 9},
+        {label: 10, value: 10},
       ],
       // Table configuration items
       optionObj: {
@@ -495,10 +498,11 @@ export default {
      * @param {String} errorMsg Error message
      * @param {Array} dimension Array of dimension
      * @param {String} filterStr String of dimension selection
+     * @param {Boolean} isUpdate Whether to reset
      */
-    showRequestErrorMessage(errorMsg, dimension, filterStr) {
+    showRequestErrorMessage(errorMsg, dimension, filterStr, isUpdate) {
       this.errorMsg = errorMsg;
-      if (!this.filterArr.length && dimension && filterStr) {
+      if ((!this.filterArr.length && dimension && filterStr)|| isUpdate) {
         this.initializeFilterArr(dimension, filterStr);
       }
       this.requestError = true;
@@ -595,7 +599,7 @@ export default {
         }
       }
       .filter-input {
-        width: 50px;
+        width: 65px;
         text-align: center;
       }
       .input-behind {
@@ -610,7 +614,7 @@ export default {
     .accuracy-container {
       float: right;
       .select-item {
-        width: 60px;
+        width: 65px;
       }
     }
   }

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

@@ -372,7 +372,7 @@ limitations under the License.
         <div class="deb-con-title-right">
           <div class="close-btn">
             <img src="@/assets/images/close-page.png"
-                 @click="tensorCompareFlag=false">
+                 @click="tensorCompareFlag=false;dims=null;tolerance=0;">
           </div>
         </div>
 
@@ -589,6 +589,8 @@ export default {
       if (this.gridType === 'compare') {
         this.tensorComparisons(this.curRowObj);
       } else {
+        this.dims = null;
+        this.tolerance = 0;
         this.viewValueDetail(this.curRowObj);
       }
     },
@@ -613,48 +615,54 @@ export default {
                 })
                 .reverse(),
         ).replace(/"/g, '');
+      this.dims = shape;
       const params = {
         name: row.name,
         detail: 'data',
         shape,
         tolerance: this.tolerance / 100,
       };
-      RequestService.tensorComparisons(params).then((res) => {
-        if (res && res.data && res.data.tensor_value) {
-          this.tensorCompareFlag = true;
-          const tensorValue = res.data.tensor_value;
-          if (
-            tensorValue.diff &&
-            tensorValue.diff.includes('Too large to show')
-          ) {
-            this.tensorValue = [];
-            this.$nextTick(() => {
-              this.$refs.tensorValue.showRequestErrorMessage(
-                  this.$t('debugger.largeDataTip'),
-                  JSON.parse(row.shape),
-                  shape,
-              );
-            });
-            return;
-          }
-          this.tensorValue = tensorValue.diff;
-          if (
-            this.tensorValue &&
-            this.tensorValue instanceof Array &&
-            !(this.tensorValue[0] instanceof Array)
-          ) {
-            this.tensorValue = [this.tensorValue];
-          }
-          this.$nextTick(() => {
-            this.$refs.tensorValue.updateGridData(
-                this.tensorValue,
-                JSON.parse(row.shape),
-                tensorValue.statistics,
-                shape,
-            );
-          });
-        }
-      });
+      const loadingInstance = this.$loading(this.loadingOption);
+      RequestService.tensorComparisons(params).then(
+          (res) => {
+            loadingInstance.close();
+            if (res && res.data && res.data.tensor_value) {
+              this.tensorCompareFlag = true;
+              const tensorValue = res.data.tensor_value;
+              if (tensorValue.diff === 'Too large to show.') {
+                this.tensorValue = [];
+                this.$nextTick(() => {
+                  this.$refs.tensorValue.showRequestErrorMessage(
+                      this.$t('debugger.largeDataTip'),
+                      JSON.parse(row.shape),
+                      shape,
+                      true,
+                  );
+                });
+                return;
+              }
+              this.tensorValue = tensorValue.diff;
+              if (
+                this.tensorValue &&
+              this.tensorValue instanceof Array &&
+              !(this.tensorValue[0] instanceof Array)
+              ) {
+                this.tensorValue = [this.tensorValue];
+              }
+              this.$nextTick(() => {
+                this.$refs.tensorValue.updateGridData(
+                    this.tensorValue,
+                    JSON.parse(row.shape),
+                    tensorValue.statistics,
+                    shape,
+                );
+              });
+            }
+          },
+          (err) => {
+            loadingInstance.close();
+          },
+      );
     },
     /**
      * Initialize the condition
@@ -1018,7 +1026,6 @@ export default {
                 })
                 .reverse(),
         ).replace(/"/g, '');
-      this.dims = shape;
       const params = {name: row.name, detail: 'data', shape};
       const loadingInstance = this.$loading(this.loadingOption);
       RequestService.tensors(params).then(
@@ -1029,13 +1036,14 @@ export default {
             this.tensorCompareFlag = true;
             if (res.data.tensor_value) {
               const value = res.data.tensor_value.value;
-              if (value.includes('Too large to show')) {
+              if (value === 'Too large to show.') {
                 this.tensorValue = [];
                 this.$nextTick(() => {
                   this.$refs.tensorValue.showRequestErrorMessage(
                       this.$t('debugger.largeDataTip'),
                       JSON.parse(row.shape),
                       shape,
+                      true,
                   );
                 });
                 return;