From 8a0ae45ff3d81c390db2cd8ef810d555b2fd021d Mon Sep 17 00:00:00 2001
From: xiayifan <xiayifan1@huawei.com>
Date: Wed, 27 Jan 2021 16:02:57 +0800
Subject: [PATCH] UI tensor bugfix, eslint fix and optimizing entries 1.fixed
 an issue where error message disappears after the vertical axis   is switched
 in tensor histogram mode 2.fix eslint 3.Optimized I18n string statements and
 the radar chart line color

---
 mindinsight/ui/src/common/common-property.js  | 14 +++++++++++
 mindinsight/ui/src/components/radar-chart.vue |  2 +-
 mindinsight/ui/src/components/scatter.vue     |  4 ++--
 .../ui/src/components/search-select.vue       | 20 +++++++++-------
 mindinsight/ui/src/locales/en-us.json         | 23 +++++++++++--------
 mindinsight/ui/src/locales/zh-cn.json         |  7 ++++--
 .../src/views/train-manage/compare-plate.vue  |  6 ++---
 .../src/views/train-manage/scalar-compare.vue |  4 ++--
 .../ui/src/views/train-manage/scalar.vue      |  6 ++---
 .../ui/src/views/train-manage/tensor.vue      | 21 ++++++++++++-----
 10 files changed, 70 insertions(+), 37 deletions(-)

diff --git a/mindinsight/ui/src/common/common-property.js b/mindinsight/ui/src/common/common-property.js
index 881f8216..6acce84d 100644
--- a/mindinsight/ui/src/common/common-property.js
+++ b/mindinsight/ui/src/common/common-property.js
@@ -38,6 +38,20 @@ export default {
     '#A34142',
     '#664EA3',
   ],
+  radarColorArr: [
+    '#00A5A7',
+    '#F45C5E',
+    '#4C6BC2',
+    '#C2663A',
+    '#7EB05D',
+    '#468BC2',
+    '#BF5254',
+    '#C2AE44',
+    '#56B077',
+    '#25386E',
+    '#8A4321',
+    '#388252',
+  ],
   commonColorArr: [
     '#00A5A7',
     '#6C92FA',
diff --git a/mindinsight/ui/src/components/radar-chart.vue b/mindinsight/ui/src/components/radar-chart.vue
index 2a485f1f..8418b33f 100644
--- a/mindinsight/ui/src/components/radar-chart.vue
+++ b/mindinsight/ui/src/components/radar-chart.vue
@@ -153,7 +153,7 @@ export default {
           },
           padding: [15, 16],
         },
-        color: common.pieColorArr,
+        color: common.radarColorArr,
         radar: {
           shape: 'circle',
           name: {
diff --git a/mindinsight/ui/src/components/scatter.vue b/mindinsight/ui/src/components/scatter.vue
index 44ea6c57..c9c09845 100644
--- a/mindinsight/ui/src/components/scatter.vue
+++ b/mindinsight/ui/src/components/scatter.vue
@@ -64,7 +64,7 @@ export default {
   },
   methods: {
     /**
-     * format Chart option
+     * Format Chart option
      */
 
     formateCharOption() {
@@ -156,7 +156,7 @@ export default {
     },
 
     /**
-     * format Chart option
+     * Create chart
      */
 
     createChart() {
diff --git a/mindinsight/ui/src/components/search-select.vue b/mindinsight/ui/src/components/search-select.vue
index dafa2ef3..12ae62ab 100644
--- a/mindinsight/ui/src/components/search-select.vue
+++ b/mindinsight/ui/src/components/search-select.vue
@@ -107,10 +107,14 @@ limitations under the License.
 
 <script>
 /**
- * The PublicStore holds the key of focused selector
+ * The publicStore holds the key of focused selector
  * When there is more than two component in same page, help selector to keep correct display
  */
-const PublicStore = { activeKey: { key: '' } };
+const publicStore = {
+  activeKey: {
+    key: '',
+  },
+};
 export default {
   props: {
     multiple: {
@@ -170,11 +174,11 @@ export default {
       containerWidth: 0, // The min-width of container
       containerToSelector: 12, // The gap between options-container and selector
       functionAble: true, // The effective of button after input
-      // The key of component to make sure it can be distinguished from PublicStore
+      // The key of component to make sure it can be distinguished from publicStore
       key: new Date().getTime().toString(),
       filter: '', // The value to filter the option
       ifEmpty: true, // If no option match the filter
-      activeKey: undefined, // In order to add wacter to the PublicStore.activeKey.key
+      activeKey: undefined, // In order to add wacter to the publicStore.activeKey.key
       latestIndex: undefined, // The index of the last click option, only effective when multiple is false
       indexes: [], // The list of index of selected options
       filterDebounce: 150, // The filter watcher debounce time in ms
@@ -226,7 +230,7 @@ export default {
      * @param {Object} event
      */
     mouseClick(event) {
-      PublicStore.activeKey.key = this.key;
+      publicStore.activeKey.key = this.key;
       event.stopPropagation();
       event.preventDefault();
     },
@@ -381,7 +385,7 @@ export default {
       this.options = this.processData(this.source);
       this.ifEmpty = false;
     }
-    this.activeKey = PublicStore.activeKey;
+    this.activeKey = publicStore.activeKey;
     window.addEventListener('click', this.clickHandler);
   },
   mounted() {
@@ -423,7 +427,7 @@ export default {
       }, this.filterDebounce);
     },
     // The watcher of source can process asynchronous data input, or make response when original data changed
-    source: {
+    'source': {
       handler(newVal) {
         this.indexes = [];
         this.options = this.processData(newVal);
@@ -439,7 +443,7 @@ export default {
         }
       },
     },
-    indexes: {
+    'indexes': {
       handler() {
         this.$nextTick(() => {
           this.$emit('selectedUpdate', this.calValues());
diff --git a/mindinsight/ui/src/locales/en-us.json b/mindinsight/ui/src/locales/en-us.json
index 5ed1a31c..9ba80a8e 100644
--- a/mindinsight/ui/src/locales/en-us.json
+++ b/mindinsight/ui/src/locales/en-us.json
@@ -326,6 +326,9 @@
     "minddata_pipeline-general": {
       "desc": "The {n1} operator in the pipeline may have performance bottlenecks."
     },
+    "minddata_cpu_utilization": {
+      "desc": "The average CPU usage of the entire system is {n1}, which may affect the data processing performance."
+    },
     "minddata_pipeline-dataset_op": {
       "desc": "For operator {n1}, you can adjust the num_parallel_workers parameter."
     },
@@ -464,18 +467,18 @@
       "memoryKiBUnit": "KiB",
       "usedMemory": "Memory Usage",
       "operatorMemoryAssign": "Operator Memory Allocation",
-      "tensorName": "Tensor name",
-      "totalTensorMemoryAssign": "Tensor size",
+      "tensorName": "Tensor Name",
+      "totalTensorMemoryAssign": "Tensor Size",
       "format": "Format",
-      "tensorType": "Tensor type",
+      "tensorType": "Tensor Type",
       "dataType": "Data Type",
       "shapes": "Shape",
       "chartXaxisUnit": "Execution ID",
       "chartYaxisUnit": "Size(GiB)",
       "curOperaterId": "Current Operator Execution ID",
       "curOperator": "Current Operator",
-      "curOperatorMemorySize": "Memory occupied by the current operator",
-      "curMemorySize": "Total memory occupied",
+      "curOperatorMemorySize": "Memory Occupied by Current Operator",
+      "curMemorySize": "Total Occupied Usage",
       "memoryChanged": "Memory Change",
       "lifeCycle": "Lifecycle",
       "fpStart": "Forward",
@@ -837,11 +840,11 @@
     "minConfidenceTip": "Probability threshold of a prediction tag. A tag is recorded as a prediction tag if its output probability is greater than the threshold.",
     "noData": "Loading data... Refresh the page later",
     "predictionType": "Prediction Type",
-    "disableSaliencyMapTip": "Failed to view saliency map visualization because no saliency map log is available.",
-    "disableHOCTip": "Failed to view counterfactual explanation because no counterfactual explanation log is available.",
-    "hocMinConfidenceTip": "Display and explain the labels whose prediction probability is greater than the prediction threshold",
-    "imageList": "Picture list",
-    "hocTitleTip": "Gradually shrink the display range to find the minimum display area where the prediction probability is greater than the threshold"
+    "disableSaliencyMapTip": "No saliency map visualization log is available.",
+    "disableHOCTip": "No counterfactual explanation log is available.",
+    "hocMinConfidenceTip": "Display and explanation for tags whose prediction probability is greater than the prediction threshold",
+    "imageList": "Image list",
+    "hocTitleTip": "Gradually shrink the display area to find the minimum display area where the prediction probability is greater than the threshold"
   },
   "metric": {
     "scoreSystem": "Scoring System",
diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json
index 8860b26a..90ab349b 100644
--- a/mindinsight/ui/src/locales/zh-cn.json
+++ b/mindinsight/ui/src/locales/zh-cn.json
@@ -325,6 +325,9 @@
     "minddata_pipeline-general": {
       "desc": "Pipeline中的算子{n1}可能存在性能瓶颈，请用户重点关注。"
     },
+    "minddata_cpu_utilization": {
+      "desc": "整机CPU利用率平均值为{n1}，可能影响数据处理性能，请用户关注。"
+    },
     "minddata_pipeline-dataset_op": {
       "desc": "对于算子{n1}，用户可以尝试调整num_parallel_workers参数。"
     },
@@ -817,10 +820,10 @@
     "typeTip": "查询包含任一预测类型的图片数据",
     "confidence": "概率",
     "forecastTagTip": "当推理图片带有正确标签时，标签行会显示下列三种旗标",
-    "TP": "TP，代表Ture Positive，标签为正样本，分类为正样本；",
+    "TP": "TP，代表True Positive，标签为正样本，分类为正样本；",
     "FN": "FN，代表False Negative，标签为正样本，分类为负样本；",
     "FP": "FP，代表False Positive，标签为负样本，分类为正样本；",
-    "TN": "TN，代表Ture Negative，标签为负样本，分类为负样本；",
+    "TN": "TN，代表True Negative，标签为负样本，分类为负样本；",
     "coverfactualInterpretation": "遮掩反事实解释",
     "viewExplanation": "查看解释",
     "maskingProcess": "逐层遮掩过程",
diff --git a/mindinsight/ui/src/views/train-manage/compare-plate.vue b/mindinsight/ui/src/views/train-manage/compare-plate.vue
index c06206e1..38af2bbb 100644
--- a/mindinsight/ui/src/views/train-manage/compare-plate.vue
+++ b/mindinsight/ui/src/views/train-manage/compare-plate.vue
@@ -1607,16 +1607,16 @@ export default {
       this.curPageArr.forEach((sampleObject) => {
         if (sampleObject.charObj) {
           const log = sampleObject.log;
-          sampleObject.charData.charOption.series.forEach((serie, index) => {
+          sampleObject.charData.charOption.series.forEach((singleItem, index) => {
             if (index % 2 === 0) {
               if (log) {
-                serie.data = this.formateSmoothData(
+                singleItem.data = this.formateSmoothData(
                     sampleObject.charData.oriData[index / 2].logData[
                         this.curBenchX
                     ],
                 );
               } else {
-                serie.data = this.formateSmoothData(
+                singleItem.data = this.formateSmoothData(
                     sampleObject.charData.oriData[index / 2].valueData[
                         this.curBenchX
                     ],
diff --git a/mindinsight/ui/src/views/train-manage/scalar-compare.vue b/mindinsight/ui/src/views/train-manage/scalar-compare.vue
index ceb6ac53..d8feea4a 100644
--- a/mindinsight/ui/src/views/train-manage/scalar-compare.vue
+++ b/mindinsight/ui/src/views/train-manage/scalar-compare.vue
@@ -507,9 +507,9 @@ export default {
       // Update the smoothness of initialized data
       if (this.charObj) {
         if (this.charOption.series && this.charOption.series.length > 0) {
-          this.charOption.series.forEach((serie, index) => {
+          this.charOption.series.forEach((singleItem, index) => {
             if (index % 2 === 0) {
-              serie.data = this.formateSmoothData(
+              singleItem.data = this.formateSmoothData(
                   this.charData[index / 2].valueData[this.curBenchX],
               );
             }
diff --git a/mindinsight/ui/src/views/train-manage/scalar.vue b/mindinsight/ui/src/views/train-manage/scalar.vue
index 8697716e..b14f5c6b 100644
--- a/mindinsight/ui/src/views/train-manage/scalar.vue
+++ b/mindinsight/ui/src/views/train-manage/scalar.vue
@@ -1467,16 +1467,16 @@ export default {
       this.curPageArr.forEach((sampleObject) => {
         if (sampleObject.charObj) {
           const log = sampleObject.log;
-          sampleObject.charData.charOption.series.forEach((serie, index) => {
+          sampleObject.charData.charOption.series.forEach((singleItem, index) => {
             if (index % 2 === 0) {
               if (log) {
-                serie.data = this.formateSmoothData(
+                singleItem.data = this.formateSmoothData(
                     sampleObject.charData.oriData[index / 2].logData[
                         this.curBenchX
                     ],
                 );
               } else {
-                serie.data = this.formateSmoothData(
+                singleItem.data = this.formateSmoothData(
                     sampleObject.charData.oriData[index / 2].valueData[
                         this.curBenchX
                     ],
diff --git a/mindinsight/ui/src/views/train-manage/tensor.vue b/mindinsight/ui/src/views/train-manage/tensor.vue
index 10348cfb..9e14aa4d 100644
--- a/mindinsight/ui/src/views/train-manage/tensor.vue
+++ b/mindinsight/ui/src/views/train-manage/tensor.vue
@@ -348,6 +348,7 @@ export default {
                   fullData: [],
                   filterStr: '',
                   curMartixShowSliderValue: 0,
+                  showErrorTip: false,
                 });
               }
             });
@@ -485,6 +486,7 @@ export default {
       };
       RequestService.getTensorsSample(params).then(
           (res) => {
+            sampleItem.showErrorTip = false;
             sampleItem.showLoading = false;
             if (!res || !res.data || !this.curDataType) {
               return;
@@ -604,6 +606,7 @@ export default {
       sampleItem.curMartixShowSliderValue = sampleItem.sliderValue;
       RequestService.getTensorsSample(params).then(
           (res) => {
+            sampleItem.showErrorTip = false;
             sampleItem.showLoading = false;
             if (!res || !res.data || this.curDataType) {
               return;
@@ -660,6 +663,7 @@ export default {
               errorData.response.data.error_code.toString() === '50545016')
       ) {
         showLimitError = true;
+        sampleItem.showErrorTip = true;
         errorMsg = this.$t('error')[errorData.response.data.error_code];
       }
       if (isMartix) {
@@ -722,9 +726,11 @@ export default {
       }
       this.axisNameChangeTimer = setTimeout(() => {
         this.curPageArr.forEach((sampleItem) => {
-          const elementItem = this.$refs[sampleItem.ref];
-          if (elementItem) {
-            elementItem[0].updateHistogramData();
+          if (!sampleItem.showErrorTip) {
+            const elementItem = this.$refs[sampleItem.ref];
+            if (elementItem) {
+              elementItem[0].updateHistogramData();
+            }
           }
         });
       }, 500);
@@ -740,9 +746,11 @@ export default {
       }
       this.viewNameChangeTimer = setTimeout(() => {
         this.curPageArr.forEach((sampleItem) => {
-          const elementItem = this.$refs[sampleItem.ref];
-          if (elementItem) {
-            elementItem[0].updateHistogramData();
+          if (!sampleItem.showErrorTip) {
+            const elementItem = this.$refs[sampleItem.ref];
+            if (elementItem) {
+              elementItem[0].updateHistogramData();
+            }
           }
         });
       }, 200);
@@ -930,6 +938,7 @@ export default {
             fullData: [],
             filterStr: '',
             curMartixShowSliderValue: 0,
+            showErrorTip: false,
           });
           this.curFullTagDic[tagName] = true;
           dataAddFlag = true;