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

@@ -38,6 +38,20 @@ export default {
     '#A34142',
     '#664EA3',
   ],
+  radarColorArr: [
+    '#00A5A7',
+    '#F45C5E',
+    '#4C6BC2',
+    '#C2663A',
+    '#7EB05D',
+    '#468BC2',
+    '#BF5254',
+    '#C2AE44',
+    '#56B077',
+    '#25386E',
+    '#8A4321',
+    '#388252',
+  ],
   commonColorArr: [
     '#00A5A7',
     '#6C92FA',

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: {

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() {

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());

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",

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": "逐层遮掩过程",

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
                     ],

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],
               );
             }

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
                     ],

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;