!1151 UI tensor bugfix, eslint fix and optimizing entries

From: @xia_yi_fan1
Reviewed-by: @ouwenchang,@yelihua
Signed-off-by: @yelihua

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;