!84 fix lineage issue and scalar issue

Merge pull request !84 from 潘慧/master_ph

mindinsight/ui/src/locales/zh-cn.json

@@ -67,7 +67,8 @@
     "samplingData": "数据抽样",
     "imagesampleSwitch": "切换标签",
     "invalidId": "无效的训练作业",
-    "summaryDirPath": "summary路径："
+    "summaryDirPath": "summary路径：",
+    "mixedItemMessage": "该参数含有多种类型数据，无法筛选展示"
   },
   "scalar": {
     "titleText": "标量",

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

@@ -525,7 +525,7 @@ export default {
         `<svg xmlns="http://www.w3.org/2000/svg" ` +
         `xmlns:xlink="http://www.w3.org/1999/xlink" ` +
         `width="${bbox.width}" height="${bbox.height}" ` +
-        `viewBox="${viewBoxSize}">${CommonProperty.graphDownloadStyle}<g>${svgXml}</g></svg>`;
+        `viewBox="${viewBoxSize}">${CommonProperty.dataMapDownloadStyle}<g>${svgXml}</g></svg>`;
 
       // Write the svg stream encoded by base64 to the image object.
       const src = `data:image/svg+xml;base64,

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

@@ -509,6 +509,7 @@ export default {
           });
           // The summaryList value could not be saved in the destroy state.
           this.dataCheckedSummary = [];
+          this.tableFilter.summary_dir = {in: summaryList};
           this.$store.commit('setSummaryDirList', summaryList);
           if (!tempList.length) {
             this.summaryDirList = [];
@@ -967,6 +968,7 @@ export default {
         sorted_name: data.prop,
         sorted_type: data.order,
       };
+      this.pagination.currentPage = 1;
       params.body = Object.assign({}, tempParam, this.tableFilter);
       this.queryLineagesData(params);
     },

mindinsight/ui/src/views/train-manage/histogram.vue

@@ -222,6 +222,14 @@ export default {
       this.$store.commit('setIsReload', false);
       this.isReloading = false;
     }
+    if (this.changeAxisTimer) {
+      clearTimeout(this.changeAxisTimer);
+      this.changeAxisTimer = null;
+    }
+    if (this.changeViewTimer) {
+      clearTimeout(this.changeViewTimer);
+      this.changeViewTimer = null;
+    }
   },
   mounted() {
     this.init();
@@ -398,6 +406,7 @@ export default {
     timeTypeChange(val) {
       if (this.changeAxisTimer) {
         clearTimeout(this.changeAxisTimer);
+        this.changeAxisTimer = null;
       }
       this.changeAxisTimer = setTimeout(() => {
         this.curPageArr.forEach((item) => {
@@ -412,6 +421,7 @@ export default {
     viewTypeChange(val) {
       if (this.changeViewTimer) {
         clearTimeout(this.changeViewTimer);
+        this.changeViewTimer = null;
       }
       this.changeViewTimer = setTimeout(() => {
         this.curPageArr.forEach((item) => {

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

@@ -151,6 +151,7 @@ export default {
         'batch_size',
         'device_num',
       ], // All keys whose values are int
+      keysOfMixed: [],
       echart: {
         chart: null,
         allData: [],
@@ -166,10 +167,7 @@ export default {
       },
       chartFilter: {}, // chart filter condition
       tableFilter: {lineage_type: {in: ['model']}}, // table filter condition
-      sortInfo: {
-        sorted_name: 'summary_dir',
-        sorted_type: null,
-      },
+      sortInfo: {},
       showTable: false,
       noData: false,
       haveCustomizedParams: false,
@@ -281,6 +279,7 @@ export default {
         selectAll: false, // Whether to select all columns
         indeterminate: false,
       };
+      this.keysOfMixed = [];
       this.queryLineagesData(true);
     },
     /**
@@ -324,10 +323,15 @@ export default {
 
         tempParam.limit = this.pagination.pageSize;
         tempParam.offset = this.pagination.currentPage - 1;
-        params.body = Object.assign(params.body, this.chartFilter);
+        params.body = Object.assign(
+            params.body,
+            this.chartFilter,
+            tempParam,
+            this.tableFilter,
+        );
+      } else {
+        params.body = Object.assign(params.body, this.tableFilter);
       }
-      params.body = Object.assign(params.body, tempParam, this.tableFilter);
-
       RequestService.queryLineagesData(params)
           .then(
               (res) => {
@@ -344,6 +348,10 @@ export default {
                             this.keysOfIntValue.push(i);
                           } else if (customized[i].type === 'str') {
                             this.keysOfStringValue.push(i);
+                          } else if (customized[i].type === 'mixed') {
+                            // list of type mixed
+                            this.keysOfMixed.push(i);
+                            this.keysOfStringValue.push(i);
                           }
                           if (i.startsWith(this.replaceStr.userDefined)) {
                             customized[i].label = customized[i].label.replace(
@@ -568,7 +576,16 @@ export default {
         };
 
         chartAxis.forEach((key) => {
-          item.value.push(i[key]);
+          if (
+            (i[key] || i[key] == 0) &&
+            this.keysOfMixed &&
+            this.keysOfMixed.length &&
+            this.keysOfMixed.includes(key)
+          ) {
+            item.value.push(i[key].toString());
+          } else {
+            item.value.push(i[key]);
+          }
         });
         data.push(item);
       });
@@ -581,7 +598,7 @@ export default {
           const values = {};
           this.echart.showData.forEach((i) => {
             if (i[key] || i[key] === 0) {
-              values[i[key]] = i[key];
+              values[i[key].toString()] = i[key].toString();
             }
           });
           obj.type = 'category';
@@ -693,6 +710,15 @@ export default {
       // select use api
       this.echart.chart.on('axisareaselected', (params) => {
         const key = params.parallelAxisId;
+        if (
+          this.keysOfMixed &&
+          this.keysOfMixed.length &&
+          this.keysOfMixed.includes(key)
+        ) {
+          this.$message.error(this.$t('modelTraceback.mixedItemMessage'));
+          this.initChart();
+          return;
+        }
         const list = this.$store.state.selectedBarList || [];
         const selectedAxisId = params.parallelAxisId;
         if (list.length) {
@@ -741,6 +767,12 @@ export default {
               {},
               this.chartFilter,
               this.tableFilter,
+          );
+          const tableParams = {};
+          tableParams.body = Object.assign(
+              {},
+              this.chartFilter,
+              this.tableFilter,
               this.sortInfo,
           );
           RequestService.queryLineagesData(filterParams)
@@ -752,20 +784,47 @@ export default {
                   res.data.object &&
                   res.data.object.length
                     ) {
+                      let customized = {};
+                      customized = JSON.parse(JSON.stringify(res.data.customized));
+                      const customizedKeys = Object.keys(customized);
+                      if (customizedKeys.length) {
+                        this.keysOfStringValue = [
+                          'summary_dir',
+                          'network',
+                          'optimizer',
+                          'loss_function',
+                          'train_dataset_path',
+                          'test_dataset_path',
+                          'dataset_mark',
+                        ];
+                        this.keysOfIntValue = [
+                          'train_dataset_count',
+                          'test_dataset_count',
+                          'epoch',
+                          'batch_size',
+                          'device_num',
+                        ];
+                        this.keysOfMixed = [];
+                        customizedKeys.forEach((i) => {
+                          if (customized[i].type === 'int') {
+                            this.keysOfIntValue.push(i);
+                          } else if (customized[i].type === 'str') {
+                            this.keysOfStringValue.push(i);
+                          } else if (customized[i].type === 'mixed') {
+                            // list of type mixed
+                            this.keysOfMixed.push(i);
+                            this.keysOfStringValue.push(i);
+                          }
+                        });
+                      }
+
                       const list = this.setDataOfModel(res.data.object);
                       const summaryDirList = list.map((i) => i.summary_dir);
                       this.$store.commit('setSummaryDirList', summaryDirList);
 
                       this.echart.showData = this.echart.brushData = list;
                       this.initChart();
-
-                      this.table.data = this.echart.brushData.slice(
-                          0,
-                          this.pagination.pageSize,
-                      );
-                      this.pagination.currentPage = 1;
-                      this.pagination.total = this.echart.brushData.length;
-                      this.$refs.table.clearSelection();
+                      this.getTableList(tableParams);
                     } else {
                       this.summaryDirList = [];
                       this.$store.commit('setSummaryDirList', []);
@@ -779,6 +838,26 @@ export default {
         }
       });
     },
+    /**
+     * Get table data
+     * @param {Object} tableParams
+     */
+    getTableList(tableParams) {
+      RequestService.queryLineagesData(tableParams)
+          .then(
+              (res) => {
+                if (res && res.data && res.data.object && res.data.object.length) {
+                  const list = this.setDataOfModel(res.data.object);
+                  this.table.data = list.slice(0, this.pagination.pageSize);
+                  this.pagination.currentPage = 1;
+                  this.pagination.total = this.echart.brushData.length;
+                  this.$refs.table.clearSelection();
+                }
+              },
+              (error) => {},
+          )
+          .catch(() => {});
+    },
     /**
      * Resetting the Eechart
      */
@@ -790,6 +869,7 @@ export default {
       this.showTable = false;
       this.chartFilter = {};
       this.tableFilter.summary_dir = undefined;
+      this.sortInfo = {};
       this.pagination.currentPage = 1;
       this.echart.allData = [];
       if (this.echart.chart) {

mindinsight/ui/src/views/train-manage/scalar.vue

@@ -34,10 +34,9 @@ limitations under the License.
       <!--operation area -->
       <div class="cl-eval-operate-content"
            v-show="!compare">
-           <multiselectGroupComponents ref="multiselectGroupComponents"
-           :checkListArr="tagOperateList"
-           @selectedChange="tagSelectedChanged"
-           ></multiselectGroupComponents>
+        <multiselectGroupComponents ref="multiselectGroupComponents"
+                                    :checkListArr="tagOperateList"
+                                    @selectedChange="tagSelectedChanged"></multiselectGroupComponents>
       </div>
       <!-- Slider -->
       <div class="cl-eval-slider-operate-content"
@@ -56,14 +55,12 @@ limitations under the License.
         <el-slider v-model="smoothValue"
                    :step="0.01"
                    :max="0.99"
-                   @input="updataInputValue"
-                   ></el-slider>
-
-                   <el-input v-model="smoothValueNumber"
-                   class="w60"
-                   @input="smoothValueChange"
-                   @blur="smoothValueBlur"
-                   ></el-input>
+                   @input="updataInputValue"></el-slider>
+
+        <el-input v-model="smoothValueNumber"
+                  class="w60"
+                  @input="smoothValueChange"
+                  @blur="smoothValueBlur"></el-input>
       </div>
       <!-- Content display -->
       <div class="cl-eval-show-data-content"
@@ -290,7 +287,7 @@ export default {
             const runNmeColor = CommonProperty.commonColorArr[0];
             data.tags.forEach((tagObj) => {
               if (!this.oriDataDictionaries[tagObj]) {
-                this.oriDataDictionaries[tagObj]=true;
+                this.oriDataDictionaries[tagObj] = true;
                 // Add the tag list
                 tempTagList.push({
                   label: tagObj,
@@ -337,7 +334,7 @@ export default {
             this.initOver = true;
 
             this.$nextTick(() => {
-              this.multiSelectedTagNames=this.$refs.multiselectGroupComponents.updateSelectedDic();
+              this.multiSelectedTagNames = this.$refs.multiselectGroupComponents.updateSelectedDic();
 
               // Obtains data on the current page
               this.updateTagInPage();
@@ -365,10 +362,10 @@ export default {
       const curPageArr = [];
 
       for (let i = startIndex; i < endIndex; i++) {
-        const sampleItem=this.curFilterSamples[i];
+        const sampleItem = this.curFilterSamples[i];
         if (sampleItem) {
-          sampleItem.updateFlag=true;
-          sampleItem.show=true;
+          sampleItem.updateFlag = true;
+          sampleItem.show = true;
           curPageArr.push(sampleItem);
         }
       }
@@ -381,110 +378,110 @@ export default {
      * Load the data on the current page
      */
     updateCurPageSamples() {
-      this.curPageArr.forEach((sampleObject)=>{
-        const sampleIndex=sampleObject.sampleIndex;
+      this.curPageArr.forEach((sampleObject) => {
+        const sampleIndex = sampleObject.sampleIndex;
         if (!sampleObject) {
           return;
         }
         sampleObject.updateFlag = true;
 
-
         const params = {
           train_id: this.trainingJobId,
           tag: sampleObject.tagName,
         };
 
-        RequestService.getScalarsSample(params).then((res)=>{
-        // error
-          if (!res || !res.data || !res.data.metadatas) {
-            if (sampleObject.charObj) {
-              sampleObject.charObj.clear();
-            }
-            return;
-          }
-          let hasInvalidData = false;
-
-          if (sampleObject.charObj) {
-            sampleObject.charObj.showLoading();
-          }
+        RequestService.getScalarsSample(params)
+            .then((res) => {
+            // error
+              if (!res || !res.data || !res.data.metadatas) {
+                if (sampleObject.charObj) {
+                  sampleObject.charObj.clear();
+                }
+                return;
+              }
+              let hasInvalidData = false;
 
-          const resData = res.data;
+              if (sampleObject.charObj) {
+                sampleObject.charObj.showLoading();
+              }
 
-          const tempObject = {
-            valueData: {
-              stepData: [],
-              absData: [],
-              relativeData: [],
-            },
-            logData: {
-              stepData: [],
-              absData: [],
-              relativeData: [],
-            },
-          };
-          let relativeTimeBench = 0;
-          if (resData.metadatas.length) {
-            relativeTimeBench = resData.metadatas[0].wall_time;
-          }
+              const resData = res.data;
+
+              const tempObject = {
+                valueData: {
+                  stepData: [],
+                  absData: [],
+                  relativeData: [],
+                },
+                logData: {
+                  stepData: [],
+                  absData: [],
+                  relativeData: [],
+                },
+              };
+              let relativeTimeBench = 0;
+              if (resData.metadatas.length) {
+                relativeTimeBench = resData.metadatas[0].wall_time;
+              }
 
-          // Initializing Chart Data
-          resData.metadatas.forEach((metaData) => {
-            if (metaData.value === null && !hasInvalidData) {
-              hasInvalidData = true;
-            }
-            tempObject.valueData.stepData.push([
-              metaData.step,
-              metaData.value,
-            ]);
-            tempObject.valueData.absData.push([
-              metaData.wall_time,
-              metaData.value,
-            ]);
-            tempObject.valueData.relativeData.push([
-              metaData.wall_time - relativeTimeBench,
-              metaData.value,
-            ]);
-            const logValue = metaData.value >= 0 ? metaData.value : '';
-            tempObject.logData.stepData.push([metaData.step, logValue]);
-            tempObject.logData.absData.push([metaData.wall_time, logValue]);
-            tempObject.logData.relativeData.push([
-              metaData.wall_time - relativeTimeBench,
-              logValue,
-            ]);
-          });
+              // Initializing Chart Data
+              resData.metadatas.forEach((metaData) => {
+                if (metaData.value === null && !hasInvalidData) {
+                  hasInvalidData = true;
+                }
+                tempObject.valueData.stepData.push([
+                  metaData.step,
+                  metaData.value,
+                ]);
+                tempObject.valueData.absData.push([
+                  metaData.wall_time,
+                  metaData.value,
+                ]);
+                tempObject.valueData.relativeData.push([
+                  metaData.wall_time - relativeTimeBench,
+                  metaData.value,
+                ]);
+                const logValue = metaData.value >= 0 ? metaData.value : '';
+                tempObject.logData.stepData.push([metaData.step, logValue]);
+                tempObject.logData.absData.push([metaData.wall_time, logValue]);
+                tempObject.logData.relativeData.push([
+                  metaData.wall_time - relativeTimeBench,
+                  logValue,
+                ]);
+              });
 
-          sampleObject.charData.oriData[0] = tempObject;
+              sampleObject.charData.oriData[0] = tempObject;
 
-          if (hasInvalidData) {
-            this.$set(sampleObject, 'invalidData', true);
-          }
-          sampleObject.charData.charOption = this.formateCharOption(
-              sampleIndex,
-          );
+              if (hasInvalidData) {
+                this.$set(sampleObject, 'invalidData', true);
+              }
+              sampleObject.charData.charOption = this.formateCharOption(
+                  sampleIndex,
+              );
 
-          this.$forceUpdate();
+              this.$forceUpdate();
 
-          this.$nextTick(() => {
-            if (sampleObject.charObj) {
-              sampleObject.charObj.hideLoading();
-            }
+              this.$nextTick(() => {
+                if (sampleObject.charObj) {
+                  sampleObject.charObj.hideLoading();
+                }
 
-            // Draw chart
-            if (!this.compare) {
-              this.updateOrCreateChar(sampleIndex);
-            } else {
-              this.abort = true;
-            }
-          });
-        }).catch((e)=>{
-          if (sampleObject.charObj) {
-            sampleObject.charObj.clear();
-          }
-        });
+                // Draw chart
+                if (!this.compare) {
+                  this.updateOrCreateChar(sampleIndex);
+                } else {
+                  this.abort = true;
+                }
+              });
+            })
+            .catch((e) => {
+              if (sampleObject.charObj) {
+                sampleObject.charObj.clear();
+              }
+            });
       });
     },
 
-
     /**
      * Formatting Chart Data
      * @param {Number} sampleIndex Chart subscript
@@ -499,7 +496,7 @@ export default {
       let returnFlag = false;
       const seriesData = [];
       const oriData = sampleObject.charData.oriData;
-      const runName=sampleObject.runNames;
+      const runName = sampleObject.runNames;
       const curBackName = runName + this.backendString;
       const dataObj = {
         name: runName,
@@ -886,9 +883,11 @@ export default {
       if (sampleObject.fullScreen) {
         sampleObject.charData.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
           '#3E98C5';
+        sampleObject.charData.charOption.grid.right = 80;
       } else {
         sampleObject.charData.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
           '#6D7278';
+        sampleObject.charData.charOption.grid.right = 10;
       }
       sampleObject.updateFlag = true;
 
@@ -901,14 +900,13 @@ export default {
       }, 0);
     },
 
-
     /**
      * Update Chart by tag
      * @param {Boolean} noPageDataNumChange No new data is added or deleted
      */
 
     updateTagInPage(noPageDataNumChange) {
-      const curFilterSamples=[];
+      const curFilterSamples = [];
       // Obtains the chart subscript
       this.originDataArr.forEach((sampleItem) => {
         if (this.multiSelectedTagNames[sampleItem.tagName]) {
@@ -1012,13 +1010,12 @@ export default {
       if (!selectedItemDict) {
         return;
       }
-      this.multiSelectedTagNames=selectedItemDict;
+      this.multiSelectedTagNames = selectedItemDict;
       // Reset to the first page
-      this.pageIndex=0;
+      this.pageIndex = 0;
       this.updateTagInPage();
     },
 
-
     /**
      *window resize
      */
@@ -1050,7 +1047,7 @@ export default {
       this.tagOperateList = [];
       this.pageIndex = 0;
       this.originDataArr = [];
-      this.oriDataDictionaries={};
+      this.oriDataDictionaries = {};
       this.curPageArr = [];
       this.tagPropsList = [];
       this.propsList = [];
@@ -1090,10 +1087,10 @@ export default {
       if (!oriData) {
         return false;
       }
-      const newTagDictionaries={}; // Index of the tag in the new data
+      const newTagDictionaries = {}; // Index of the tag in the new data
       let dataRemoveFlag = false;
       oriData.tags.forEach((tagName) => {
-        newTagDictionaries[tagName]=true;
+        newTagDictionaries[tagName] = true;
       });
       // Delete the tag that does not exist
       const oldTagListLength = this.tagOperateList.length;
@@ -1132,7 +1129,7 @@ export default {
       const runColor = CommonProperty.commonColorArr[0];
       oriData.tags.forEach((tagObj) => {
         if (!this.oriDataDictionaries[tagObj]) {
-          this.oriDataDictionaries[tagObj]=true;
+          this.oriDataDictionaries[tagObj] = true;
           this.tagOperateList.push({
             label: tagObj,
             checked: true,
@@ -1198,7 +1195,7 @@ export default {
             const tagAddFlag = this.checkNewDataAndComplete(data);
 
             this.$nextTick(() => {
-              this.multiSelectedTagNames=this.$refs.multiselectGroupComponents.updateSelectedDic();
+              this.multiSelectedTagNames = this.$refs.multiselectGroupComponents.updateSelectedDic();
               this.updateTagInPage(!tagRemoveFlag && !tagAddFlag);
 
               this.resizeCallback();
@@ -1209,7 +1206,7 @@ export default {
 
             // Initial chart data
             data.tags.forEach((tagObj) => {
-              // Check whether the tag with the same name exists
+            // Check whether the tag with the same name exists
               tempTagList.push({
                 label: tagObj,
                 checked: true,
@@ -1266,7 +1263,7 @@ export default {
       if (this.firstNum === 0) {
         return;
       }
-      this.smoothValueNumber=Number(val);
+      this.smoothValueNumber = Number(val);
       if (this.smoothSliderValueTimer) {
         clearTimeout(this.smoothSliderValueTimer);
         this.smoothSliderValueTimer = null;
@@ -1279,26 +1276,26 @@ export default {
 
     smoothValueChange(val) {
       if (!isNaN(val)) {
-        if (Number(val)===0) {
-          this.smoothValue=0;
+        if (Number(val) === 0) {
+          this.smoothValue = 0;
         }
-        if (Number(val)<0) {
-          this.smoothValue=0;
-          this.smoothValueNumber=0;
+        if (Number(val) < 0) {
+          this.smoothValue = 0;
+          this.smoothValueNumber = 0;
         }
-        if (Number(val)>0) {
-          if (Number(val)>0.99) {
-            this.smoothValue=0.99;
-            this.smoothValueNumber=0.99;
+        if (Number(val) > 0) {
+          if (Number(val) > 0.99) {
+            this.smoothValue = 0.99;
+            this.smoothValueNumber = 0.99;
           } else {
-            this.smoothValue=Number(val);
+            this.smoothValue = Number(val);
           }
         }
       }
     },
 
     smoothValueBlur() {
-      this.smoothValueNumber=this.smoothValue;
+      this.smoothValueNumber = this.smoothValue;
     },
 
     /**