!418 Model traceability code review problem modification, method split optimization and string hard coding rectification

Merge pull request !418 from 秦君艳/master

mindinsight/ui/src/store.js

@@ -34,6 +34,10 @@ export default new Vuex.Store({
     multiSelectedGroupCount: 0,
     tableId: 0,
     componentsCount: 0,
+    summaryDirList: undefined,
+    selectedBarList: [],
+    hidenDirChecked: [],
+    customizedColumnOptions: [],
   },
   mutations: {
     // set cancelTokenArr

mindinsight/ui/src/views/train-manage/data-traceback.vue

@@ -435,6 +435,14 @@ export default {
         'learning_rate',
         'device_num',
       ],
+      valueType: {
+        float: 'float',
+        int: 'int',
+        string: 'string',
+        model_size: 'model_size',
+        learning_rate: 'learning_rate',
+        dataset_mark: 'dataset_mark',
+      },
       table: {
         columnOptions: {
           summary_dir: {
@@ -964,10 +972,10 @@ export default {
             id: item,
             checked: true,
           };
-          if (value && value.type === 'float') {
-            obj.type = 'float';
-          } else if (value && value.type === 'int') {
-            obj.type = 'int';
+          if (value && value.type === this.valueType.float) {
+            obj.type = this.valueType.float;
+          } else if (value && value.type === this.valueType.int) {
+            obj.type = this.valueType.int;
           }
           arrayTemp.push(obj);
         });
@@ -1006,14 +1014,14 @@ export default {
           content.name === this.repeatTitle ||
           content.name === this.shuffleTitle ||
           content.id === this.deviceNum ||
-          (content.type && content.type === 'int')
+          (content.type && content.type === this.valueType.int)
         ) {
           obj.scale = true;
           obj.minInterval = 1;
           this.setColorOfSelectedBar(selectedBarList, obj);
         } else if (
           this.numberTypeIdList.includes(content.id) ||
-          (content.type && content.type === 'float')
+          (content.type && content.type === this.valueType.float)
         ) {
           obj.scale = true;
           this.setColorOfSelectedBar(selectedBarList, obj);
@@ -1024,7 +1032,7 @@ export default {
             show: false,
           };
           this.setColorOfSelectedBar(selectedBarList, obj);
-          if (content.id === 'dataset_mark') {
+          if (content.id === this.valueType.dataset_mark) {
             obj.axisLabel = {
               show: false,
             };
@@ -1073,13 +1081,16 @@ export default {
       if (this.parallelEchart) {
         this.parallelEchart.off('axisareaselected', null);
         window.removeEventListener('resize', this.resizeChart, false);
+      } else {
+        this.parallelEchart = Echarts.init(
+            document.querySelector('#data-echart'),
+        );
       }
-      this.parallelEchart = Echarts.init(
-          document.querySelector('#data-echart'),
-      );
       this.parallelEchart.setOption(option, true);
       window.addEventListener('resize', this.resizeChart, false);
-
+      this.chartEventsListen(parallelAxis);
+    },
+    chartEventsListen(parallelAxis) {
       this.parallelEchart.on('axisareaselected', (params) => {
         this.recordsNumber = 0;
         this.showNumber = 0;
@@ -1149,17 +1160,19 @@ export default {
             color: '#00a5a7',
           },
           formatter: function(val) {
-            if (typeof val !== 'string') {
+            if (typeof val !== this.valueType.string) {
               return val;
             }
             const strs = val.split('');
             let str = '';
-            if (val.length > 100) {
-              return val.substring(0, 12) + '...';
+            const maxStringLength = 100;
+            const showStringLength = 12;
+            if (val.length > maxStringLength) {
+              return val.substring(0, showStringLength) + '...';
             } else {
               for (let i = 0, s = ''; (s = strs[i++]); ) {
                 str += s;
-                if (!(i % 12)) {
+                if (!(i % showStringLength)) {
                   str += '\n';
                 }
               }
@@ -1204,20 +1217,25 @@ export default {
       if (isNaN(value) || !value) {
         return value;
       } else {
-        if (key === 'learning_rate') {
-          let temp = value.toPrecision(4);
+        const numDigits = 4;
+        if (key === this.valueType.learning_rate) {
+          let temp = value.toPrecision(numDigits);
           let row = 0;
           while (temp < 1) {
             temp = temp * 10;
             row += 1;
           }
-          temp = this.toFixedFun(temp, 4);
+          temp = this.toFixedFun(temp, numDigits);
           return `${temp}${row ? `e-${row}` : ''}`;
-        } else if (key === 'model_size') {
+        } else if (key === this.valueType.model_size) {
           return value + 'MB';
         } else {
-          if (value < 1000) {
-            return Math.round(value * Math.pow(10, 4)) / Math.pow(10, 4);
+          const num = 1000;
+          if (value < num) {
+            return (
+              Math.round(value * Math.pow(10, numDigits)) /
+              Math.pow(10, numDigits)
+            );
           } else {
             const reg = /(?=(\B)(\d{3})+$)/g;
             return (value + '').replace(reg, ',');
@@ -1245,7 +1263,8 @@ export default {
      * @param {Object} scope
      */
     showDialogData(val, scope) {
-      if (typeof val !== 'string' || val === '{}') {
+      const emptyObjectStr = '{}';
+      if (typeof val !== this.valueType.string || val === emptyObjectStr) {
         return;
       } else {
         const isJson = this.isJSON(val);
@@ -1541,7 +1560,7 @@ export default {
     hideDataMarkTableData() {
       const result = [];
       this.selectedBarList.forEach((item) => {
-        if (item !== 'dataset_mark') {
+        if (item !== this.valueType.dataset_mark) {
           result.push(item);
         }
       });
@@ -1906,10 +1925,6 @@ export default {
 .el-color-alpha-slider {
   display: none;
 }
-.el-select > .el-input {
-  width: 280px !important;
-  max-width: 500px !important;
-}
 .select-inner-input {
   width: calc(100% - 140px);
   margin: 2px 4px;
@@ -1958,6 +1973,10 @@ export default {
   height: 100%;
   overflow-y: auto;
   position: relative;
+  .el-select > .el-input {
+    width: 280px !important;
+    max-width: 500px !important;
+  }
   .el-table th.is-leaf {
     background: #f5f7fa;
   }

mindinsight/ui/src/views/train-manage/model-traceback.vue

@@ -128,7 +128,7 @@ limitations under the License.
                              :prop="key"
                              :label="table.columnOptions[key].label.substring(3)"
                              show-overflow-tooltip
-                             min-width="150"
+                             min-width="120"
                              sortable="custom">
               <template slot="header"
                         slot-scope="scope">
@@ -152,7 +152,7 @@ limitations under the License.
                              :prop="key"
                              :label="table.columnOptions[key].label.substring(3)"
                              show-overflow-tooltip
-                             min-width="150"
+                             min-width="120"
                              sortable="custom">
               <template slot="header"
                         slot-scope="scope">
@@ -426,6 +426,26 @@ export default {
         metric: 'metric/',
         userDefined: 'user_defined/',
       },
+      valueType: {
+        int: 'int',
+        str: 'str',
+        mixed: 'mixed',
+        category: 'category',
+        model_size: 'model_size',
+        dataset_mark: 'dataset_mark',
+      },
+      valueName: {
+        userDefined: 'userDefined',
+        metric: 'metric',
+        UserDefined: 'UserDefined',
+        Metric: 'Metric',
+      },
+      labelValue: {
+        loss: 'loss',
+        batch_size: 'batch_size',
+        epoch: 'epoch',
+        learning_rate: 'learning_rate',
+      },
     };
   },
   computed: {},
@@ -479,8 +499,9 @@ export default {
       }
       this.addIconBorder(row);
       this.tagDialogShow = true;
+      const dialogHeight = 130;
       document.getElementById('tag-dialog').style.top =
-        window.event.clientY - 130 + 'px';
+        window.event.clientY - dialogHeight + 'px';
     },
 
     /**
@@ -790,7 +811,7 @@ export default {
             required: true,
           },
           loss: {
-            label: 'loss',
+            label: this.labelValue.loss,
             required: true,
           },
           network: {
@@ -814,11 +835,11 @@ export default {
             required: false,
           },
           epoch: {
-            label: 'epoch',
+            label: this.labelValue.epoch,
             required: false,
           },
           batch_size: {
-            label: 'batch_size',
+            label: this.labelValue.batch_size,
             required: false,
           },
           device_num: {
@@ -909,9 +930,9 @@ export default {
         } else if (item.indexOf('user_defined/') === 0) {
           userDefinedArray.push(item);
         } else if (
-          item === 'epoch' ||
-          item === 'batch_size' ||
-          item === 'learning_rate'
+          item === this.labelValue.epoch ||
+          item === this.labelValue.batch_size ||
+          item === this.labelValue.learning_rate
         ) {
           hyperArray.push(item);
         } else {
@@ -965,7 +986,9 @@ export default {
           .then(
               (res) => {
                 if (res && res.data && res.data.object) {
-                  const list = this.setDataOfModel(res.data.object);
+                  const listTemp = this.setDataOfModel(res.data.object);
+                  const list = JSON.parse(JSON.stringify(listTemp));
+                  const tempEchartData = JSON.parse(JSON.stringify(listTemp));
                   if (allData) {
                     let customized = {};
                     if (res.data.customized) {
@@ -973,17 +996,17 @@ export default {
                       const customizedKeys = Object.keys(customized);
                       if (customizedKeys.length) {
                         customizedKeys.forEach((i) => {
-                          if (customized[i].type === 'int') {
+                          if (customized[i].type === this.valueType.int) {
                             this.keysOfIntValue.push(i);
-                          } else if (customized[i].type === 'str') {
+                          } else if (customized[i].type === this.valueType.str) {
                             this.keysOfStringValue.push(i);
-                          } else if (customized[i].type === 'mixed') {
+                          } else if (customized[i].type === this.valueType.mixed) {
                             // list of type mixed
                             this.keysOfMixed.push(i);
                             this.keysOfStringValue.push(i);
                           }
                           if (i.startsWith(this.replaceStr.userDefined)) {
-                            this.labelObj.userDefined = 'userDefined';
+                            this.labelObj.userDefined = this.valueName.userDefined;
                             customized[i].label = customized[i].label.replace(
                                 this.replaceStr.userDefined,
                                 '[U]',
@@ -997,7 +1020,7 @@ export default {
                                 this.replaceStr.metric,
                                 '[M]',
                             );
-                            this.labelObj.metric = 'metric';
+                            this.labelObj.metric = this.valueName.metric;
                             const metricObject = {value: '', label: ''};
                             metricObject.value = customized[i].label;
                             metricObject.label = customized[i].label;
@@ -1033,7 +1056,7 @@ export default {
                       ];
                       if (this.labelObj.metric) {
                         const metricTemp = {
-                          label: 'Metric',
+                          label: this.valueName.Metric,
                           options: this.metricOptions,
                         };
                         this.checkOptions.push(metricTemp);
@@ -1041,7 +1064,7 @@ export default {
                       }
                       if (this.labelObj.userDefined) {
                         const userTemp = {
-                          label: 'UserDefined',
+                          label: this.valueName.UserDefined,
                           options: this.userOptions,
                         };
                         this.checkOptions.push(userTemp);
@@ -1049,19 +1072,19 @@ export default {
                       }
                       Object.keys(this.table.columnOptions).forEach((item) => {
                         if (
-                          item !== 'epoch' &&
-                      item !== 'learning_rate' &&
-                      item !== 'batch_size'
+                          item !== this.labelValue.epoch &&
+                      item !== this.labelValue.learning_rate &&
+                      item !== this.labelValue.batch_size
                         ) {
-                          const index = this.table.optionsNotInCheckbox.indexOf(
+                          const haveItem = this.table.optionsNotInCheckbox.includes(
                               item,
                           );
-                          if (index < 0) {
+                          if (!haveItem) {
                             const otherType = {value: '', label: ''};
                             otherType.value = this.table.columnOptions[item].label;
                             otherType.label = this.table.columnOptions[item].label;
                             if (
-                              otherType.value === 'loss' ||
+                              otherType.value === this.labelValue.loss ||
                           otherType.value ===
                             this.$t('modelTraceback.network') ||
                           otherType.value ===
@@ -1119,7 +1142,6 @@ export default {
                     this.noData = !res.data.object.length;
                     this.showEchartPic = !!res.data.object.length;
                     if (this.hidenDirChecked.length) {
-                      const tempEchartData = this.setDataOfModel(res.data.object);
                       this.hidenDirChecked.forEach((dir) => {
                         tempEchartData.forEach((item, index) => {
                           if (item.summary_dir === dir) {
@@ -1145,16 +1167,16 @@ export default {
                         return val[i] || val[i] === 0;
                       });
                       if (!flag) {
-                        let index = this.table.optionsNotInCheckbox.indexOf(i);
-                        if (index >= 0) {
+                        let haveItem = this.table.optionsNotInCheckbox.includes(i);
+                        if (haveItem) {
                           this.table.optionsNotInCheckbox.splice(index, 1);
                         }
-                        index = this.table.optionsNotInEchart.indexOf(i);
-                        if (index >= 0) {
+                        haveItem = this.table.optionsNotInEchart.includes(i);
+                        if (haveItem) {
                           this.table.optionsNotInEchart.splice(index, 1);
                         }
-                        index = this.table.optionsNotInTable.indexOf(i);
-                        if (index >= 0) {
+                        haveItem = this.table.optionsNotInTable.includes(i);
+                        if (haveItem) {
                           this.table.optionsNotInTable.splice(index, 1);
                         }
 
@@ -1230,8 +1252,9 @@ export default {
             ? item.added_info.tag
             : 0;
           const modelData = JSON.parse(JSON.stringify(item.model_lineage));
+          const byteNum = 1024;
           modelData.model_size = parseFloat(
-              ((modelData.model_size || 0) / 1024 / 1024).toFixed(2),
+              ((modelData.model_size || 0) / byteNum / byteNum).toFixed(2),
           );
           const keys = Object.keys(modelData.metric || {});
           if (keys.length) {
@@ -1512,9 +1535,9 @@ export default {
               values[i[key].toString()] = i[key].toString();
             }
           });
-          obj.type = 'category';
+          obj.type = this.valueType.category;
           obj.data = Object.keys(values);
-          if (key === 'dataset_mark') {
+          if (key === this.valueType.dataset_mark) {
             obj.axisLabel = {
               show: false,
             };
@@ -1612,15 +1635,15 @@ export default {
       if (this.echart.chart) {
         this.echart.chart.off('axisareaselected', null);
         window.removeEventListener('resize', this.resizeChart, false);
+      } else {
+        this.echart.chart = Echarts.init(document.querySelector('#echart'));
       }
-
-      this.echart.chart = Echarts.init(document.querySelector('#echart'));
       this.echart.chart.setOption(echartOption, true);
       window.addEventListener('resize', this.resizeChart, false);
-
-      // select use api
+      this.chartEventsListen(parallelAxis);
+    },
+    chartEventsListen(parallelAxis) {
       this.echart.chart.on('axisareaselected', (params) => {
-        // key of mixed item
         this.recordsNumber = 0;
         this.showNumber = 0;
         const key = params.parallelAxisId;
@@ -1649,15 +1672,16 @@ export default {
         const [axisData] = parallelAxis.filter((i) => {
           return i.id === key;
         });
-
-        if (axisData && range.length === 2) {
-          if (axisData && axisData.id === 'model_size') {
+        const lineLength = 2;
+        if (axisData && range.length === lineLength) {
+          if (axisData && axisData.id === this.valueType.model_size) {
+            const byteNum = 1024;
             range = [
-              parseInt(range[0] * 1024 * 1024, 0),
-              parseInt(range[1] * 1024 * 1024, 0),
+              parseInt(range[0] * byteNum * byteNum, 0),
+              parseInt(range[1] * byteNum * byteNum, 0),
             ];
           }
-          if (axisData.type === 'category') {
+          if (axisData.type === this.valueType.category) {
             const rangeData = {};
             for (let i = range[0]; i <= range[1]; i++) {
               rangeData[axisData.data[i]] = axisData.data[i];
@@ -1720,11 +1744,11 @@ export default {
                         ];
                         this.keysOfMixed = [];
                         customizedKeys.forEach((i) => {
-                          if (customized[i].type === 'int') {
+                          if (customized[i].type === this.valueType.int) {
                             this.keysOfIntValue.push(i);
-                          } else if (customized[i].type === 'str') {
+                          } else if (customized[i].type === this.valueType.str) {
                             this.keysOfStringValue.push(i);
-                          } else if (customized[i].type === 'mixed') {
+                          } else if (customized[i].type === this.valueType.mixed) {
                             // list of type mixed
                             this.keysOfMixed.push(i);
                             this.keysOfStringValue.push(i);
@@ -1858,20 +1882,25 @@ export default {
       if (isNaN(value) || !value) {
         return value;
       } else {
-        if (key === 'learning_rate') {
-          let temp = value.toPrecision(4);
+        const numDigits = 4;
+        if (key === this.labelValue.learning_rate) {
+          let temp = value.toPrecision(numDigits);
           let row = 0;
           while (temp < 1) {
             temp = temp * 10;
             row += 1;
           }
-          temp = this.toFixedFun(temp, 4);
+          temp = this.toFixedFun(temp, numDigits);
           return `${temp}${row ? `e-${row}` : ''}`;
-        } else if (key === 'model_size') {
+        } else if (key === this.valueType.model_size) {
           return value + 'MB';
         } else {
-          if (value < 1000) {
-            return Math.round(value * Math.pow(10, 4)) / Math.pow(10, 4);
+          const num = 1000;
+          if (value < num) {
+            return (
+              Math.round(value * Math.pow(10, numDigits)) /
+              Math.pow(10, numDigits)
+            );
           } else {
             const reg = /(?=(\B)(\d{3})+$)/g;
             return (value + '').replace(reg, ',');
@@ -1883,7 +1912,9 @@ export default {
      * Resizing Chart
      */
     resizeChart() {
-      this.echart.chart.resize();
+      if (this.echart && this.echart.chart) {
+        this.echart.chart.resize();
+      }
     },
   },
   /**
@@ -1927,11 +1958,6 @@ export default {
 .el-tag.el-tag--info .el-tag__close {
   color: #fff;
 }
-// select
-.el-select > .el-input {
-  min-width: 280px !important;
-  max-width: 500px !important;
-}
 .select-inner-input {
   width: calc(100% - 140px);
   margin: 2px 4px;
@@ -2091,7 +2117,11 @@ export default {
     -webkit-box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5);
     box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5);
     overflow: hidden;
-
+    // select
+    .el-select > .el-input {
+      min-width: 180px !important;
+      max-width: 500px !important;
+    }
     .top-area {
       margin: 24px 32px 12px;
       display: flex;