!1010 UI fix bug that tensor graph add tips

From: @huang_wei_feng4
Reviewed-by: 
Signed-off-by:

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

@@ -325,6 +325,7 @@ export default {
         'overall_false_count',
       ],
       loadingInstance: {},
+      initOver: false,
     };
   },
   computed: {
@@ -341,6 +342,8 @@ export default {
   },
   methods: {
     init() {
+      this.loadingInstance = this.$loading(this.loadingOption);
+      this.initOver = false;
       if (this.curRowObj.type === 'value') {
         this.gridType = 'value';
         this.viewValueDetail(this.curRowObj);
@@ -378,13 +381,9 @@ export default {
               });
 
               if (initPage) {
-                this.loadingInstance = this.$loading(this.loadingOption);
                 this.selectedNode.name = this.curRowObj.name;
                 const dot = this.packageData();
-                // Delay is required, otherwise the loading icon cannot be loaded
-                setTimeout(() => {
-                  this.initGraph(dot);
-                }, 200);
+                this.initGraph(dot);
               } else {
                 if (this.selectedNode.name) {
                   this.setNodeData();
@@ -403,6 +402,7 @@ export default {
             this.statisticsKeys.forEach((key) => {
               this.statistics[key] = '--';
             });
+            this.dealLoading();
           },
       );
     },
@@ -642,10 +642,12 @@ export default {
         }
       });
 
-      this.loadingInstance.close();
       if (this.selectedNode.name) {
         this.setNodeData();
       }
+      this.$nextTick(() => {
+        this.dealLoading();
+      });
     },
     fitGraph() {
       const graphContainer = document.getElementById('tensor-graph');
@@ -669,27 +671,25 @@ export default {
         );
 
         this.$nextTick(() => {
-          setTimeout(() => {
-            nodeRect = selectedNode.getBoundingClientRect();
-            graphRect = graphDom.getBoundingClientRect();
-            const nodeCenter = {
-              x: nodeRect.x + nodeRect.width / 2,
-            };
-            const containerCenter = {
-              x: containerRect.x + containerRect.width / 2,
-            };
+          nodeRect = selectedNode.getBoundingClientRect();
+          graphRect = graphDom.getBoundingClientRect();
+          const nodeCenter = {
+            x: nodeRect.x + nodeRect.width / 2,
+          };
+          const containerCenter = {
+            x: containerRect.x + containerRect.width / 2,
+          };
 
-            let x = (containerCenter.x - nodeCenter.x) * transRate;
-            let y = (containerRect.top + paddingTop - graphRect.top) * transRate;
-            x = parseFloat(x.toFixed(2));
-            y = parseFloat(y.toFixed(2));
-            scale = parseFloat((scale * transformData.scale[0]).toFixed(2));
+          let x = (containerCenter.x - nodeCenter.x) * transRate;
+          let y = (containerRect.top + paddingTop - graphRect.top) * transRate;
+          x = parseFloat(x.toFixed(2));
+          y = parseFloat(y.toFixed(2));
+          scale = parseFloat((scale * transformData.scale[0]).toFixed(2));
 
-            graphDom.setAttribute(
-                'transform',
-                `translate(${transformData.translate[0] + x},${transformData.translate[1] + y}) scale(${scale})`,
-            );
-          }, 100);
+          graphDom.setAttribute(
+              'transform',
+              `translate(${transformData.translate[0] + x},${transformData.translate[1] + y}) scale(${scale})`,
+          );
         });
       }
     },
@@ -987,10 +987,8 @@ export default {
         tolerance: this.tolerance / 100,
         graph_name: row.graph_name,
       };
-      const loadingInstance = this.$loading(this.loadingOption);
       RequestService.tensorComparisons(params).then(
           (res) => {
-            loadingInstance.close();
             if (res && res.data && res.data.tensor_value) {
               if (row.shape === '[]') {
                 this.showFilterInput = false;
@@ -1014,6 +1012,7 @@ export default {
                       true,
                   );
                 });
+                this.dealLoading();
                 return;
               }
               this.tensorValue = tensorValue.diff;
@@ -1025,9 +1024,12 @@ export default {
                 this.$refs.tensorValue.updateGridData(this.tensorValue, JSON.parse(row.shape), statistics, shape);
               });
             }
+            this.$nextTick(() => {
+              this.dealLoading();
+            });
           },
           (err) => {
-            loadingInstance.close();
+            this.dealLoading();
           },
       );
     },
@@ -1070,10 +1072,8 @@ export default {
         graph_name: row.graph_name,
         prev: this.gridType === 'preStep' ? true : false,
       };
-      const loadingInstance = this.$loading(this.loadingOption);
       RequestService.tensors(params).then(
           (res) => {
-            loadingInstance.close();
             if (row.shape === '[]') {
               this.showFilterInput = false;
             } else {
@@ -1093,6 +1093,7 @@ export default {
                       true,
                   );
                 });
+                this.dealLoading();
                 return;
               }
               if (value === null) {
@@ -1103,13 +1104,23 @@ export default {
                 this.$refs.tensorValue.updateGridData(this.tensorValue, JSON.parse(row.shape), statistics, shape);
               });
             }
+            this.$nextTick(() => {
+              this.dealLoading();
+            });
           },
           (err) => {
-            loadingInstance.close();
             this.$parent.showErrorMsg(err);
+            this.dealLoading();
           },
       );
     },
+    dealLoading() {
+      if (!this.initOver) {
+        this.initOver = true;
+      } else {
+        this.loadingInstance.close();
+      }
+    },
   },
   destroyed() {
     window.removeEventListener('resize', this.callbackFun);

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

@@ -190,8 +190,8 @@
   },
   "images": {
     "titleText": "Image",
-    "titleTip": "The Image only displays 10 images randomly.",
-    "imageErrorTip": "The current picture has been updated, Please wait until the data loading is complete.",
+    "titleTip": "Only 10 images are displayed randomly.",
+    "imageErrorTip": "An image has been updated, View the image after data loading is complete.",
     "tagSelectTitle": "Tag Selection",
     "selectAll": "All",
     "open": "More",
@@ -222,7 +222,7 @@
     "viewTypeTitle": "View",
     "chartViewType": "Table",
     "histogramViewType": "Histogram",
-    "tensorDashboardLimitErrorMsg": "The requested data exceeds the upper limit 100,000. Go to the tensor page and try slicing or querying another dimensions."
+    "tensorDashboardLimitErrorMsg": "The number of requested data records exceeds the upper limit 100,000. Click here to go to the tensor page and shard or query other dimensions."
   },
   "graph": {
     "titleText": "Computational Graph",
@@ -472,7 +472,8 @@
     "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.",
     "category": "Type",
-    "scientificCounting": "Scientific notation"
+    "scientificCounting": "Scientific notation",
+    "accuracyTips": "If a value is not completely displayed, drag a border of the table header to resize."
   },
   "debugger": {
     "debugger": "Debugger",
@@ -516,7 +517,7 @@
     "dType": "DType",
     "shape": "Shape",
     "value": "Value",
-    "largeDataTip": "The requested data exceeds the upper limit 100,000. Try slicing or querying another dimensions.",
+    "largeDataTip": "The requested data exceeds the upper limit 100,000. Shard or query other dimensions.",
     "continueTo": "Continue to",
     "inf": "INF:",
     "negativeInf": "-INF:",
@@ -551,6 +552,7 @@
     "tuningAdvice": "Optimization Suggestions",
     "setValue": "Preset Value",
     "actualValue": "Actual Value",
+    "noWatchPoint": "No watchpoint hit.",
     "tensorTuningRule": {
       "operator_real_data_validation": "Real data validation using single operator",
       "loss_overflow": "Loss overflow (NAN,INF)",
@@ -733,7 +735,12 @@
     "use": "Yes",
     "notUse": "No",
     "versionConflictTip": "MindSpore and MindInsight versions do not match. MindSpore version: {msv}; MindInsight version: {miv}",
-    "checkTips": "Note: The tensor contains {msg}, resulting in value check failure. "
+    "checkTips": {
+      "nan": "A tensor contains NaN, ",
+      "inf": "A tensor contains +/-INF, ",
+      "no_prev_tensor": "The previous step value cannot be found, ",
+      "cannotCheck": "check fails."
+    }
   },
   "explain": {
     "explain": "Model Explanation",
@@ -795,7 +802,7 @@
     "scoreSystemtooltipfour": " - Faithfulness: evaluates the faithfulness of the explanation result to the model, that is, whether the saliency map correctly reflects the model classification basis. Modify the corresponding positions in the original image according to a certain rule (for example, from bright to dark) and transfer the modified image to the model for inference in sequence. If the brighter the area of the saliency map is, the greater the impact on the selected tag is, the higher the faithfulness of the interpretation result is. Conversely, the explanation result may not reflect the inference basis of the model. Currently, there are three mainstream solutions: naive faithfulness, insertion AUC, and deletion AUC.",
     "scoreSystemtooltipfive": "  - Localization: uses the bounding box of the dataset to assess the positioning accuracy of the highlighted area in the saliency map. Select an objective and related tag. If the explanation method accurately highlights the area related to the selected tag in the image, the highlighted area should overlap the bounding box of the selected objective. Localization assesses the location capability of the explanation result by assessing the overlapped area of the highlighted area and bounding box.",
     "scoreSystemtooltipsix": "- ClassSensitivity: evaluates the explantion through comparing saliency maps of max-confidence and min-confidence labels. Since models are expected to rely on different features for inference, an reason explainer should generate different saliecny map for different labels. The class sensitivity is evaluated through calculating the correlation between saliency maps of max-confidence and min-confidence labels.",
-    "scoreSystemtooltipseven":"- Robustness: evaluate the stability of explainer, i.e., how much will the saliency map change if some noise is added to the original image. Disturb the original image by add little noise, which have     no effect on the inference. The less the saliency map changes, the more robust the explainer is.",
+    "scoreSystemtooltipseven": "- Robustness: evaluate the stability of explainer, i.e., how much will the saliency map change if some noise is added to the original image. Disturb the original image by add little noise, which have     no effect on the inference. The less the saliency map changes, the more robust the explainer is.",
     "errorTipTitle": "Exception scenario：",
     "errorTipText": "if NaN is displayed, please check the runtime log."
   },
@@ -822,7 +829,7 @@
     "50542217": "Incorrect summary log path.",
     "50542218": "Incorrect filtering parameter.",
     "50545012": "The tensor data does not exist. Please refresh.",
-    "50545013": "The requested data exceeds the upper limit 100,000. Try slicing or querying another dimensions.",
+    "50545013": "The requested data exceeds the upper limit 100,000. Shard or query other dimensions.",
     "50545014": "The queried tensor data has been replaced by new data. Please refresh.",
     "50546083": "The profiler directory does not exist.",
     "50548001": "Ascend AI Processor information query timed out.",

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

@@ -574,8 +574,13 @@ export default {
       }
       RequestService.recheckWatchPoints().then(
           (res) => {
-            if (res && res.data && res.data.metadata && res.data.metadata.enable_recheck !== undefined) {
-              this.enableRecheck = res.data.metadata.enable_recheck;
+            if (res && res.data && res.data.metadata) {
+              if (res.data.metadata.enable_recheck !== undefined) {
+                this.enableRecheck = res.data.metadata.enable_recheck;
+              }
+              if (res.data.metadata.state) {
+                this.metadata.state = res.data.metadata.state;
+              }
             }
             this.$message.success(this.$t('debugger.recheckSuccess'));
           },

mindinsight/ui/src/mixins/model-data.vue

@@ -381,6 +381,7 @@ export default {
         }
       }
       this.scatterChartData = arrayTemp;
+      this.viewBigBtnDisabled = !this.scatterChartData.length;
     },
 
     /**