!25 display user-defined info on model trace ui

Merge pull request !25 from 潘慧/master_ph

mindinsight/ui/src/components/checkList.vue

+<!--
+Copyright 2020 Huawei Technologies Co., Ltd.All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<template>
+  <div class="cl-checklist-container">
+    <!-- Select tag -->
+    <div class="select-content">
+      <div class="title mr24">{{$t("components.tagSelectTitle")}}</div>
+      <!-- Select all -->
+      <div class="select-all mr24"
+           @click="listSelectAll">
+        <span class="multiCheckBox-border multi-check-border"
+              :class="operateSelectAll ? 'checkbox-checked':'checkbox-unchecked'"></span>
+        <span class="label-item select-disable">{{$t("components.selectAll")}}</span>
+      </div>
+      <!-- Tag search box -->
+      <el-input class="search-input-item"
+                v-model="searchInput"
+                @input="listFilter"
+                v-if="listFullScreen"
+                :placeholder="$t('components.tagFilterPlaceHolder')"></el-input>
+      <!-- Tag list -->
+      <div class="select-item-content"
+           v-if="!listFullScreen"
+           ref="selectItemContent">
+        <div class="select-item"
+             v-for="(item, itemIndex) in checkListArr"
+             :key="itemIndex"
+             @click="listItemClick(item)"
+             v-show="item.show">
+          <span class="multiCheckBox-border multi-check-border"
+                :class="item.checked ? 'checkbox-checked':'checkbox-unchecked'"></span>
+          <span class="label-item">
+            <el-tooltip effect="dark"
+                        popper-class="tooltip-show-content"
+                        :content="item.label"
+                        placement="top">
+              <span class="select-disable">{{item.label}}</span>
+            </el-tooltip>
+          </span>
+        </div>
+      </div>
+      <!-- Tag expansion/collapse button -->
+      <div class="select-content-open select-disable"
+           @click="toggleListFullScreen"
+           v-if="overRowFlag || searchInput"
+           v-show="!listFullScreen">{{$t("components.open")}}</div>
+      <div class="select-content-open select-disable"
+           @click="toggleListFullScreen"
+           v-if="overRowFlag || listFullScreen"
+           v-show="listFullScreen">{{$t("components.close")}}</div>
+    </div>
+    <div class="select-content-all"
+         v-if="listFullScreen">
+      <div class="select-item"
+           v-for="(item, itemIndex) in checkListArr"
+           :key="itemIndex"
+           @click="listItemClick(item)"
+           v-show="item.show">
+        <span class="multiCheckBox-border multi-check-border"
+              :class="item.checked ? 'checkbox-checked' : 'checkbox-unchecked'"></span>
+        <span class="label-item">
+          <el-tooltip effect="dark"
+                      popper-class="tooltip-show-content"
+                      :content="item.label"
+                      placement="top">
+            <span class="select-disable">{{item.label}}</span>
+          </el-tooltip>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    checkListArr: Array,
+  },
+  data() {
+    return {
+      listFullScreen: false, // Indicates whether to expand the selection list.
+      overRowFlag: false, // Check whether the list contains more than one line.
+      searchInputTimer: null, // Timer for filtering.
+      searchInput: '', // Regular input value of the search.
+      valiableSearchInput: '', // Last valid input for tag retrieval.
+      multiSelectedItemNames: {}, // Dictionary for storing the name of the selected tags.
+      operateSelectAll: true, // Indicates whether to select all tags.
+      perSelectItemMarginBottom: 1, // Outer margin of the bottom of each selection box.
+    };
+  },
+  computed: {},
+  watch: {},
+  mounted() {
+    this.init();
+  },
+  methods: {
+    /**
+     * Initialize
+     */
+    init() {
+      this.$nextTick(() => {
+        this.resizeCallback();
+      });
+      window.addEventListener('resize', this.resizeCallback, false);
+    },
+    /**
+     * The callback of window size changes listener
+     */
+    resizeCallback() {
+      // Calculating the display of the Expand Folding Button
+      const selectItemContent = this.$refs.selectItemContent;
+      if (selectItemContent) {
+        this.overRowFlag =
+          selectItemContent.clientHeight <
+          selectItemContent.scrollHeight - this.perSelectItemMarginBottom;
+      }
+    },
+    /**
+     * Click select all
+     */
+    listSelectAll() {
+      this.operateSelectAll = !this.operateSelectAll;
+      this.multiSelectedItemNames = {};
+      // Setting the status of list items
+      if (this.operateSelectAll) {
+        this.checkListArr.forEach((listItem) => {
+          if (listItem.show) {
+            listItem.checked = true;
+            this.multiSelectedItemNames[listItem.label] = true;
+          }
+        });
+      } else {
+        this.checkListArr.forEach((listItem) => {
+          if (listItem.show) {
+            listItem.checked = false;
+          }
+        });
+      }
+      // Returns a dictionary containing selected items.
+      this.$emit('selectedChange', this.multiSelectedItemNames);
+    },
+    /**
+     * Tag Filter
+     */
+    listFilter() {
+      if (this.searchInputTimer) {
+        clearTimeout(this.searchInputTimer);
+        this.searchInputTimer = null;
+      }
+      this.searchInputTimer = setTimeout(() => {
+        let reg;
+        try {
+          reg = new RegExp(this.searchInput);
+        } catch (e) {
+          this.$message.warning(this.$t('public.regIllegal'));
+          return;
+        }
+        this.valiableSearchInput = this.searchInput;
+        this.multiSelectedItemNames = {};
+        let itemSelectAll = true;
+        // Filter the tags that do not meet the conditions in the operation bar and hide them
+        this.checkListArr.forEach((listItem) => {
+          if (reg.test(listItem.label)) {
+            listItem.show = true;
+            if (listItem.checked) {
+              this.multiSelectedItemNames[listItem.label] = true;
+            } else {
+              itemSelectAll = false;
+            }
+          } else {
+            listItem.show = false;
+          }
+        });
+        // Update the selected status of the Select All button
+        this.operateSelectAll = itemSelectAll;
+        this.$emit('selectedChange', this.multiSelectedItemNames);
+      }, 200);
+    },
+    /**
+     * Item click event
+     * @param {Object} listItem Current item object
+     */
+    listItemClick(listItem) {
+      if (!listItem) {
+        return;
+      }
+      listItem.checked = !listItem.checked;
+      // Refreshes the selected status of the current label option
+      if (listItem.checked) {
+        this.multiSelectedItemNames[listItem.label] = true;
+      } else {
+        if (this.multiSelectedItemNames[listItem.label]) {
+          delete this.multiSelectedItemNames[listItem.label];
+        }
+      }
+      // Update the selected status of the Select All button
+      let itemSelectAll = true;
+      this.checkListArr.some((curListItem) => {
+        if (curListItem.show && !curListItem.checked) {
+          itemSelectAll = false;
+          return true;
+        }
+      });
+      this.operateSelectAll = itemSelectAll;
+      // Return a dictionary containing selected items.
+      this.$emit('selectedChange', this.multiSelectedItemNames);
+    },
+    /**
+     * Expand or collapse the list of items.
+     */
+    toggleListFullScreen() {
+      this.listFullScreen = !this.listFullScreen;
+      if (!this.listFullScreen) {
+        this.$nextTick(() => {
+          this.resizeCallback();
+        });
+      }
+    },
+    /**
+     * Updates the dictionary of selected tags.
+     * @return {Object} Dictionary containing selected tags
+     */
+    updateSelectedDic() {
+      let reg;
+      try {
+        reg = new RegExp(this.searchInput);
+      } catch (e) {
+        reg = new RegExp(this.valiableSearchInput);
+      }
+      this.multiSelectedItemNames = {};
+      let itemSelectAll = true;
+      this.checkListArr.forEach((listItem) => {
+        if (reg.test(listItem.label)) {
+          listItem.show = true;
+          if (listItem.checked) {
+            this.multiSelectedItemNames[listItem.label] = true;
+          } else {
+            itemSelectAll = false;
+          }
+        } else {
+          listItem.show = false;
+        }
+      });
+      this.operateSelectAll = itemSelectAll;
+      this.resizeCallback();
+      return this.multiSelectedItemNames;
+    },
+  },
+  destroyed() {
+    // Remove the listener of window size change
+    window.removeEventListener('resize', this.resizeCallback);
+    // Remove filter timer
+    if (this.searchInputTimer) {
+      clearTimeout(this.searchInputTimer);
+      this.searchInputTimer = null;
+    }
+  },
+};
+</script>
+<style lang="scss">
+.cl-checklist-container {
+  width: 100%;
+  height: 100%;
+  .select-content {
+    display: flex;
+    align-items: center;
+    .title {
+      font-size: 14px;
+      vertical-align: middle;
+      flex-shrink: 0;
+    }
+    .select-all {
+      cursor: pointer;
+      flex-shrink: 0;
+    }
+    .select-item-content {
+      display: flex;
+      height: 16px;
+      flex-wrap: wrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .select-content-open {
+      flex: 1;
+      text-align: right;
+      font-size: 14px;
+      color: #00a5a7;
+      cursor: pointer;
+      min-width: 60px;
+    }
+  }
+  .select-content-all {
+    max-height: 150px;
+    padding-left: 72px;
+    overflow-x: hidden;
+    display: flex;
+    flex-wrap: wrap;
+    .label-item {
+      line-height: 14px;
+    }
+    .select-item {
+      height: 25px;
+      margin-top: 25px;
+    }
+  }
+  .select-item {
+    margin-right: 20px;
+    flex-shrink: 0;
+    margin-bottom: 1px;
+    cursor: pointer;
+    .label-item {
+      width: 100px;
+      display: block;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      text-align: left;
+    }
+  }
+  .multiCheckBox-border {
+    width: 16px;
+    height: 16px;
+    display: block;
+    margin-right: 20px;
+    cursor: pointer;
+    float: left;
+  }
+  .checkbox-checked {
+    background-image: url('../assets/images/mult-select.png');
+  }
+  .checkbox-unchecked {
+    background-image: url('../assets/images/mult-unselect.png');
+  }
+  .label-item {
+    font-size: 14px;
+    line-height: 14px;
+    vertical-align: middle;
+    .el-tooltip {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      text-align: left;
+      height: 16px;
+    }
+    span {
+      font-size: 14px;
+      line-height: 14px;
+      display: block;
+    }
+  }
+  .mr24 {
+    margin-right: 24px;
+  }
+  .select-disable {
+    -moz-user-select: none; /*Firefox*/
+    -webkit-user-select: none; /*webkitbrowser*/
+    -ms-user-select: none; /*IE10*/
+    -khtml-user-select: none; /*Early browser*/
+    user-select: none;
+  }
+  .search-input-item {
+    width: 261px;
+  }
+}
+.tooltip-show-content {
+  max-width: 50%;
+}
+</style>

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

@@ -124,6 +124,13 @@
     "tooManyNodes": "节点太多，打开失败",
     "inputNodeName": "请输入节点名称"
   },
+  "components": {
+    "tagSelectTitle": "标签选择",
+    "selectAll": "全选",
+    "tagFilterPlaceHolder": "请输入需要的标签(支持正则表达式)",
+    "open": "展开",
+    "close": "折叠"
+  },
   "error": {
     "50540000": "系统错误",
     "50540001": "参数类型错误，请检查请求参数类型是否都符合要求",
@@ -133,7 +140,6 @@
     "50545001": "API 路由资源不存在",
     "50545002": "请求API的HTTP方法错误",
     "50545005": "训练作业不存在",
-    "50545006": "Summary日志路径无效",
     "50545007": "Summary数据正在被加载，请等待Summary数据加载结束",
     "50545009": "查询的节点不在图中",
     "5054500A": "训练作业ID进行URL解码失败",

mindinsight/ui/src/main.js

@@ -42,21 +42,6 @@ router.beforeEach((to, from, next) => {
 // forbidden showing production tip
 Vue.config.productionTip = false;
 
-/**
- * Check whether the input string contains special characters
- * @param {String} strurl
- * @return {Boolen}
- */
-function justSql(strurl) {
-  const reA = /select|create|alert|update|delete|truncate/i;
-  const reB = /join|union|exec|insert|drop|count|'|"|;|>|</i;
-  const reAll = new RegExp(reA.source + reB.source, 'i');
-  if (reAll.test(strurl)) {
-    return true;
-  } else {
-    return false;
-  }
-}
 
 /**
  * Check the browser version
@@ -83,20 +68,16 @@ function isBrowserSupport() {
 }
 
 window.onload = function(e) {
-  if (justSql(location.hash.toLowerCase())) {
-    location.href = location.origin;
-  } else {
-    if (isBrowserSupport()) {
-      Vue.prototype.$warmBrowser = true;
-    }
-    // Instantiation
-    setTimeout(() => {
-      new Vue({
-        router,
-        store,
-        i18n,
-        render: (h) => h(App),
-      }).$mount('#app');
-    }, 100);
+  if (isBrowserSupport()) {
+    Vue.prototype.$warmBrowser = true;
   }
+  // Instantiation
+  setTimeout(() => {
+    new Vue({
+      router,
+      store,
+      i18n,
+      render: (h) => h(App),
+    }).$mount('#app');
+  }, 100);
 };

mindinsight/ui/src/services/fetcher.js

@@ -50,7 +50,7 @@ axios.interceptors.response.use(
 
       // error returned by backend
       if (error.response && error.response.data && error.response.data.error_code) {
-        if (error.response.data.error_code.toString() === '50540005' ||
+        if (error.response.data.error_code.toString() === '50545005' ||
         error.response.data.error_code.toString() === '50545006') {
           if (error.config.headers.ignoreError ||
             router.currentRoute.path === '/train-manage/training-dashboard') {

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

@@ -850,6 +850,7 @@ export default {
             }
           })
           .catch(() => {
+            this.fileSearchBox.suggestions = [];
             this.initOver = true;
             this.loading.show = false;
           });

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

@@ -28,72 +28,9 @@ limitations under the License.
       </div>
       <!-- Selecting an operation area -->
       <div class="cl-img-operate-content">
-        <!-- Select tag -->
-        <div class="tag-select-content">
-          <div class="title mr24">{{$t("images.tagSelectTitle")}}</div>
-          <!-- Select All -->
-          <div class="select-all mr24"
-               @click="tagSelectAll">
-            <span class="multiCheckBox-border multi-check-border"
-                  :class="tagOperateSelectAll ? 'checkbox-checked' : 'checkbox-unchecked'"></span>
-            <span class="label-item select-disable">{{$t('images.selectAll')}}</span>
-          </div>
-          <!-- Tag search box -->
-          <el-input class="search-input-item"
-                    v-model="tagInput"
-                    @input="filterByTagName"
-                    v-if="headTagFullScreen"
-                    :placeholder="$t('public.tagFilterPlaceHolder')"></el-input>
-          <!-- Tag List -->
-          <div class="select-item-content"
-               v-if="!headTagFullScreen"
-               ref="tagSelectItemContent">
-            <div class="select-item"
-                 v-for="(tagItem, tagIndex) in tagOperateList"
-                 :key="tagIndex"
-                 @click="tagItemClick(tagItem)"
-                 v-show="tagItem.show">
-              <span class="multiCheckBox-border multi-check-border"
-                    :class="tagItem.checked ? 'checkbox-checked' : 'checkbox-unchecked'"></span>
-              <span class="label-item">
-                <el-tooltip effect="dark"
-                            popper-class="tooltip-show-content"
-                            :content="tagItem.label"
-                            placement="top">
-                  <span class="select-disable">{{tagItem.label}}</span>
-                </el-tooltip>
-              </span>
-            </div>
-          </div>
-          <!-- Tag expansion/collapse button -->
-          <div class="run-select-content-open select-disable"
-               @click="toggleHeadTagFullScreen"
-               v-if="tagOverRowFlag || tagInput"
-               v-show="!headTagFullScreen">{{$t("images.open")}}</div>
-          <div class="run-select-content-open select-disable"
-               @click="toggleHeadTagFullScreen"
-               v-if="tagOverRowFlag || headTagFullScreen"
-               v-show="headTagFullScreen">{{$t("images.close")}}</div>
-        </div>
-        <div class="run-select-content-all"
-             v-if="headTagFullScreen">
-          <div class="select-item"
-               v-for="(tagItem, tagIndex) in tagOperateList"
-               :key="tagIndex"
-               @click="tagItemClick(tagItem)"
-               v-show="tagItem.show">
-            <span class="multiCheckBox-border multi-check-border"
-                  :class="tagItem.checked ? 'checkbox-checked' : 'checkbox-unchecked'"></span>
-            <span class="label-item">
-              <el-tooltip effect="dark"
-                          popper-class="tooltip-show-content"
-                          :content="tagItem.label"
-                          placement="top">
-                <span class="select-disable">{{tagItem.label}}</span>
-              </el-tooltip>
-            </span>
-          </div>
-        </div>
+        <checkListComponents ref="checkListComponents"
+                             :checkListArr="tagOperateList"
+                             @selectedChange="tagSelectedChanged"></checkListComponents>
       </div>
       <!-- Sliding block area -->
       <div class="cl-img-slider-operate-content">
@@ -117,8 +54,7 @@ limitations under the License.
                    :class="contrast===50?'button-disable':'' ">{{$t('public.reset')}}</el-button>
       </div>
       <!-- Content display area -->
-      <div class="cl-img-show-data-content"
-           ref="miDataShoeContent">
+      <div class="cl-img-show-data-content">
         <!-- No data is displayed. -->
         <div class="image-noData"
              v-if="initOver && originDataArr.length === 0">
@@ -151,8 +87,8 @@ limitations under the License.
             <div class="sample-data-show">
               <div class="tag-title"
                    :title="sampleItem.tagName">{{sampleItem.tagName}}</div>
-              <div class="run-title"
-                   :title="sampleItem.runName">{{sampleItem.runName}}</div>
+              <div class="summary-title"
+                   :title="sampleItem.summaryName">{{sampleItem.summaryName}}</div>
               <!-- Current step information -->
               <div class="sample-operate-info select-disable">
                 <span class="step-info"
@@ -175,8 +111,7 @@ limitations under the License.
       <!-- Page number area -->
       <div class="pagination-content"
            v-if="originDataArr.length">
-        <el-pagination @size-change="pageSizeChange"
-                       @current-change="currentPageChange"
+        <el-pagination @current-change="currentPageChange"
                        :current-page="pageIndex + 1"
                        :page-sizes="pageSizes"
                        :page-size="pageNum"
@@ -189,6 +124,7 @@ limitations under the License.
 </template>
 
 <script>
+import checkListComponents from '../../components/checkList.vue';
 import RequestService from '../../services/request-service';
 import {basePath} from '@/services/fetcher';
 export default {
@@ -196,27 +132,18 @@ export default {
     return {
       initOver: false, // Indicates whether the initialization is complete.
       autoUpdateTimer: null, // Automatic refresh timer
-      tagInput: '', // Regular input value of the training tag
-      valiableTagInput: '', // Last valid input for tag retrieval.
       brightness: 50, // Brightness
       contrast: 50, // Contrast
       trainingJobId: this.$route.query.id, // ID of the current training job
-      tagInputTimer: '', // Timer for filtering training tags
-      multiSelectedRunNames: {}, // Dictionary for storing the name of the selected training logs
       multiSelectedTagNames: {}, // Dictionary for storing the name of the selected tags
       curFilterSamples: [], // List of images that meet the current filter criteria
-      headTagFullScreen: false, // Indicates whether to expand the tag selection list.
-      tagOperateSelectAll: true, // Indicates whether to select all tags
-      runOperateList: [], // Training log list
       tagOperateList: [], // Tag list
       originDataArr: [], // List of all image data.
-      oriDataDictionaries: {}, // Dictionary for storing training logs and tag relationships
+      oriDataDictionaries: {}, // Dictionary that contains all the current tags.
       curPageArr: [], // Image data list on the current page
       pageIndex: 0, // Current page number
       pageSizes: [8, 16, 24], // The number of records on each page is optional
       pageNum: 8, // Number of records on each page
-      tagOverRowFlag: false, // Check whether the tag list contains more than one line
-      perSelectItemMarginBottom: 1, // Outer margin of the bottom of each selection box
       isReloading: false, // Manually refresh
       imageBasePath: '/v1/mindinsight/datavisual/image/single-image?', // Relative path header of the picture
     };
@@ -275,29 +202,26 @@ export default {
       }
     },
     /**
-     *The refresh time is changed
+     * The refresh time is changed.
      */
     timeReloadValue() {
       this.autoUpdateSamples();
     },
   },
   destroyed() {
-    // Remove the listener of the label input box
-    if (this.tagInputTimer) {
-      clearTimeout(this.tagInputTimer);
-      this.tagInputTimer = null;
-    }
     // Disable the automatic refresh function
     if (this.autoUpdateTimer) {
       clearInterval(this.autoUpdateTimer);
       this.autoUpdateTimer = null;
     }
-    // Remove the listener of window size change
-    window.removeEventListener('resize', this.resizeCallback);
+    // Stop Refreshing
+    if (this.isReloading) {
+      this.$store.commit('setIsReload', false);
+      this.isReloading = false;
+    }
   },
   mounted() {
-    this.getCharMainContentwidth();
-    this.getTagAndRunList();
+    this.getTagList();
     // Automatic refresh
     if (this.isTimeReload) {
       this.autoUpdateSamples();
@@ -308,7 +232,7 @@ export default {
     /**
      * Initialize the training log and tag list
      */
-    getTagAndRunList() {
+    getTagList() {
       const params = {
         plugin_name: 'image',
         train_id: this.trainingJobId,
@@ -319,40 +243,25 @@ export default {
               this.initOver = true;
               return;
             }
-            const data = res.data.train_jobs;
-            const tempRunList = [];
+            const data = res.data.train_jobs[0];
+            if (!data.tags) {
+              return;
+            }
             const tempTagList = [];
             const dataList = [];
-            data.forEach((runObj, runObjIndex) => {
-            // Add to Training Log List
-              tempRunList.push({
-                label: runObj.name,
-                checked: true,
-                show: true,
-              });
-              this.multiSelectedRunNames[runObj.name] = true;
-              runObj.tags.forEach((tagName) => {
-              // Check whether a label with the same name exists
-                if (!this.oriDataDictionaries[tagName]) {
-                // The new tag information is added to the dictionary
-                  this.oriDataDictionaries[tagName] = {};
-                  // Add to Tag List
-                  tempTagList.push({
-                    label: tagName,
-                    checked: true,
-                    show: true,
-                  });
-                  this.multiSelectedTagNames[tagName] = true;
-                }
-                this.oriDataDictionaries[tagName][runObj.name] = true;
-                // Add to the original data list
-                const sampleItem = {
-                  runId: runObj.id,
-                  runName: runObj.name,
+            data.tags.forEach((tagName) => {
+              if (!this.oriDataDictionaries[tagName]) {
+                this.oriDataDictionaries[tagName] = true;
+                tempTagList.push({
+                  label: tagName,
+                  checked: true,
+                  show: true,
+                });
+                dataList.push({
+                  summaryId: data.id,
+                  summaryName: data.name,
                   tagName: tagName,
                   sampleData: [],
-                  tagShow: true,
-                  runShow: true,
                   curPageShow: false,
                   sliderValue: 0,
                   fullScreen: false,
@@ -361,23 +270,19 @@ export default {
                   curImgUrl: '',
                   curTime: '',
                   curImageSize: [0, 0],
-                };
-                dataList.push(sampleItem);
-                this.curFilterSamples.push(sampleItem);
-              });
+                });
+              }
             });
-            // Initialize the assignment training log list, tag list, and image list
-            this.runOperateList = tempRunList;
+            // Initialize the assignment tag list, and image list
             this.tagOperateList = tempTagList;
             this.originDataArr = dataList;
             this.initOver = true;
 
             this.$nextTick(() => {
-              this.resizeCallback();
+              this.multiSelectedTagNames = this.$refs.checkListComponents.updateSelectedDic();
+              // Obtains data on the current page
+              this.updateTagInPage();
             });
-
-            // Obtains data on the current page
-            this.getCurPageDataArr();
           }, this.requestErrorCallback)
           .catch((e) => {
             this.$message.error(this.$t('public.dataError'));
@@ -385,7 +290,7 @@ export default {
     },
     /**
      * Obtains data on the current page
-     * @param {Boolwn} noPageDataNumChange No new data is added or deleted
+     * @param {Boolean} noPageDataNumChange No new data is added or deleted
      */
     getCurPageDataArr(noPageDataNumChange) {
       // Clear the previous page
@@ -415,54 +320,52 @@ export default {
     updateCurPageSamples() {
       this.curPageArr.forEach((sampleItem) => {
         const params = {
-          train_id: sampleItem.runId,
+          train_id: sampleItem.summaryId,
           tag: sampleItem.tagName,
         };
         RequestService.getImageMetadatas(params)
-            .then((res) => {
-              if (!res || !res.data || !res.data.metadatas) {
-                return;
-              }
-              // Processes image data
-              const tempData = res.data.metadatas;
-              sampleItem.sampleData = tempData;
-              const oldTotalStepNum = sampleItem.totalStepNum;
-              sampleItem.totalStepNum = tempData.length - 1;
-              if (sampleItem.sliderValue === oldTotalStepNum) {
-                sampleItem.sliderValue = sampleItem.totalStepNum;
-              }
-              const curSampleData = sampleItem.sampleData[sampleItem.sliderValue];
-              // Initialize the current step information
-              if (curSampleData) {
-                sampleItem.curStep = curSampleData.step;
-                sampleItem.curImgUrl =
-                `${basePath}${this.imageBasePath}train_id=${sampleItem.runId}` +
-                `&tag=${sampleItem.tagName}&step=${curSampleData.step}&wt=${curSampleData.wall_time}`;
-                sampleItem.curTime = new Date(
-                    curSampleData.wall_time * 1000,
-                ).toLocaleString();
-                sampleItem.curImageSize = [
-                  curSampleData.width,
-                  curSampleData.height,
-                ];
-              }
-              this.$forceUpdate();
-            }, (e) => {
-              sampleItem.totalStepNum = 0;
-              sampleItem.sliderValue = 0;
-              sampleItem.curStep = '';
-              sampleItem.curImgUrl = '';
-              sampleItem.curTime = '';
-            }).catch((e) => {});
+            .then(
+                (res) => {
+                  if (!res || !res.data || !res.data.metadatas) {
+                    return;
+                  }
+                  // Processes image data
+                  const tempData = res.data.metadatas;
+                  sampleItem.sampleData = tempData;
+                  const oldTotalStepNum = sampleItem.totalStepNum;
+                  sampleItem.totalStepNum = tempData.length - 1;
+                  if (sampleItem.sliderValue === oldTotalStepNum) {
+                    sampleItem.sliderValue = sampleItem.totalStepNum;
+                  }
+                  const curSampleData =
+                sampleItem.sampleData[sampleItem.sliderValue];
+                  // Initialize the current step information
+                  if (curSampleData) {
+                    sampleItem.curStep = curSampleData.step;
+                    sampleItem.curImgUrl =
+                  `${basePath}${this.imageBasePath}train_id=${sampleItem.summaryId}` +
+                  `&tag=${sampleItem.tagName}&step=${curSampleData.step}&wt=${curSampleData.wall_time}`;
+                    sampleItem.curTime = new Date(
+                        curSampleData.wall_time * 1000,
+                    ).toLocaleString();
+                    sampleItem.curImageSize = [
+                      curSampleData.width,
+                      curSampleData.height,
+                    ];
+                  }
+                  this.$forceUpdate();
+                },
+                (e) => {
+                  sampleItem.totalStepNum = 0;
+                  sampleItem.sliderValue = 0;
+                  sampleItem.curStep = '';
+                  sampleItem.curImgUrl = '';
+                  sampleItem.curTime = '';
+                },
+            )
+            .catch((e) => {});
       });
     },
-    /**
-     * Listens to and obtains the width of the table container in the content area
-     */
-    getCharMainContentwidth() {
-      // Add the resize listener.
-      window.addEventListener('resize', this.resizeCallback, false);
-    },
     /**
      * Image step value change event
      * @param {Number} sliderValue Current slider value
@@ -480,36 +383,13 @@ export default {
       const curStepData = sampleItem.sampleData[sliderValue];
       sampleItem.curStep = curStepData.step;
       sampleItem.curImgUrl =
-        `${basePath}${this.imageBasePath}train_id=${sampleItem.runId}` +
+        `${basePath}${this.imageBasePath}train_id=${sampleItem.summaryId}` +
         `&tag=${sampleItem.tagName}&step=${curStepData.step}&wt=${curStepData.wall_time}`;
       sampleItem.curTime = new Date(
           curStepData.wall_time * 1000,
       ).toLocaleString();
       sampleItem.curImageSize = [curStepData.width, curStepData.height];
     },
-    /**
-     * The callback of window size changes listener
-     */
-    resizeCallback() {
-      // Calculating the Display of the Expand Folding Button
-      const tagSelectItemContent = this.$refs.tagSelectItemContent;
-      if (tagSelectItemContent) {
-        this.tagOverRowFlag =
-          tagSelectItemContent.clientHeight <
-          tagSelectItemContent.scrollHeight - this.perSelectItemMarginBottom;
-      }
-    },
-    /**
-     * Expand or collapse the list of tag items
-     */
-    toggleHeadTagFullScreen() {
-      this.headTagFullScreen = !this.headTagFullScreen;
-      if (!this.headTagFullScreen) {
-        this.$nextTick(() => {
-          this.resizeCallback();
-        });
-      }
-    },
     /**
      * Image click event
      * @param {Object} event Native event event
@@ -534,143 +414,45 @@ export default {
       this.getCurPageDataArr();
     },
     /**
-     * The number of pages displayed on each page is changed
-     * @param {Number} value Number of pages after modification
-     */
-    pageSizeChange(value) {
-      this.pageNum = value;
-      this.pageIndex = 0;
-      this.getCurPageDataArr();
-    },
-    /**
-     * Click event of the tag selection button
+     * The selected label is changed
+     * @param {Object} selectedItemDict Dictionary containing the selected tags
      */
-    tagSelectAll() {
-      this.tagOperateSelectAll = !this.tagOperateSelectAll;
-      this.multiSelectedTagNames = {};
-      // Setting the status of tag items
-      if (this.tagOperateSelectAll) {
-        this.tagOperateList.forEach((tagItem) => {
-          if (tagItem.show) {
-            tagItem.checked = true;
-            this.multiSelectedTagNames[tagItem.label] = true;
-          }
-        });
-      } else {
-        this.tagOperateList.forEach((tagItem) => {
-          if (tagItem.show) {
-            tagItem.checked = false;
-          }
-        });
-      }
-      // Update the image list based on the selected status of the tag.
-      this.updateTagInPage();
-    },
-    /**
-     * Tag Filter
-     */
-    filterByTagName() {
-      if (this.tagInputTimer) {
-        clearTimeout(this.tagInputTimer);
-        this.tagInputTimer = null;
-      }
-      this.tagInputTimer = setTimeout(() => {
-        let reg;
-        try {
-          reg = new RegExp(this.tagInput);
-        } catch (e) {
-          this.$message.warning(this.$t('public.regIllegal'));
-          return;
-        }
-        this.valiableTagInput = this.tagInput;
-        this.multiSelectedTagNames = {};
-        let tagSelectAll = true;
-        // Filter the tags that do not meet the conditions in the operation bar and hide them
-        this.tagOperateList.forEach((tagItem) => {
-          if (reg.test(tagItem.label)) {
-            tagItem.show = true;
-            if (tagItem.checked) {
-              this.multiSelectedTagNames[tagItem.label] = true;
-            } else {
-              tagSelectAll = false;
-            }
-          } else {
-            tagItem.show = false;
-          }
-        });
-        // Update the selected status of the Select All button
-        this.tagOperateSelectAll = tagSelectAll;
-        // Update the image list based on the selected status of the tag.
-        this.updateTagInPage();
-      }, 200);
-    },
-    /**
-     * Tag item click event
-     * @param {Object} tagItem Current tag item object
-     */
-    tagItemClick(tagItem) {
-      if (!tagItem) {
+    tagSelectedChanged(selectedItemDict) {
+      if (!selectedItemDict) {
         return;
       }
-      tagItem.checked = !tagItem.checked;
-      // Refreshes the selected status of the current label option
-      if (tagItem.checked) {
-        this.multiSelectedTagNames[tagItem.label] = true;
-      } else {
-        if (this.multiSelectedTagNames[tagItem.label]) {
-          delete this.multiSelectedTagNames[tagItem.label];
-        }
-      }
-      // Update the selected status of the Select All button
-      let tagSellectAll = true;
-      this.tagOperateList.some((curTagItem) => {
-        if (curTagItem.show && !curTagItem.checked) {
-          tagSellectAll = false;
-          return true;
-        }
-      });
-      this.tagOperateSelectAll = tagSellectAll;
-      // Update the image list based on the selected status of the tag.
+      this.multiSelectedTagNames = selectedItemDict;
+      // Reset to the first page
+      this.pageIndex = 0;
       this.updateTagInPage();
     },
     /**
      * Update the image list based on the filtered tags
+     * @param {Boolean} noPageDataNumChange No new data is added or deleted
      */
-    updateTagInPage() {
-      // Reset to the first page
-      this.pageIndex = 0;
+    updateTagInPage(noPageDataNumChange) {
       const curFilterSamples = [];
       // Obtains the image data subscript that meets the tag filtering conditions
       this.originDataArr.forEach((sampleItem) => {
         if (this.multiSelectedTagNames[sampleItem.tagName]) {
-          sampleItem.tagShow = true;
-          if (sampleItem.runShow) {
-            curFilterSamples.push(sampleItem);
-          }
-        } else {
-          sampleItem.tagShow = false;
+          curFilterSamples.push(sampleItem);
         }
       });
       this.curFilterSamples = curFilterSamples;
       // Obtains data on the current page
-      this.getCurPageDataArr();
+      this.getCurPageDataArr(noPageDataNumChange);
     },
     /**
      * Clear data.
      */
     clearAllData() {
-      this.multiSelectedRunNames = {};
       this.multiSelectedTagNames = {};
       this.curFilterSamples = [];
-      this.tagOperateSelectAll = true;
-      this.runOperateList = [];
       this.tagOperateList = [];
       this.originDataArr = [];
       this.oriDataDictionaries = {};
       this.curPageArr = [];
       this.pageIndex = 0;
-      this.tagOverRowFlag = false;
-      this.headTagFullScreen = false;
     },
     /**
      * Request error handling
@@ -705,50 +487,28 @@ export default {
       if (!oriData) {
         return false;
       }
-      const newRunDictionaries = {}; // Index of the training log in the new data.
       const newTagDictionaries = {}; // Index of the tag in the new data
       let dataRemoveFlag = false;
-      // Obtains the current training log and tag list
-      oriData.forEach((runObj, runIndex) => {
-        newRunDictionaries[runObj.name] = true;
-        runObj.tags.forEach((tagName) => {
-          if (newTagDictionaries[tagName]) {
-            newTagDictionaries[tagName][runObj.name] = true;
-          } else {
-            newTagDictionaries[tagName] = {};
-            newTagDictionaries[tagName][runObj.name] = true;
-          }
-        });
+      // Obtains the current tag list
+      oriData.tags.forEach((tagName) => {
+        newTagDictionaries[tagName] = true;
       });
-      // Delete training logs that do not exist in the operation bar
-      const oldRunListLength = this.runOperateList.length;
-      for (let i = oldRunListLength - 1; i >= 0; i--) {
-        if (!newRunDictionaries[this.runOperateList[i].label]) {
-          dataRemoveFlag = true;
-          this.runOperateList.splice(i, 1);
-        }
-      }
       // Delete the tags that do not exist in the operation bar
       const oldTagListLength = this.tagOperateList.length;
       for (let i = oldTagListLength - 1; i >= 0; i--) {
         if (!newTagDictionaries[this.tagOperateList[i].label]) {
           dataRemoveFlag = true;
           this.tagOperateList.splice(i, 1);
+          delete this.oriDataDictionaries[this.tagOperateList[i].label];
         }
       }
       // Delete the old data from the image list and update the dictionary
       const oldSampleLength = this.originDataArr.length;
       for (let i = oldSampleLength - 1; i >= 0; i--) {
         const oldSample = this.originDataArr[i];
-
         if (!newTagDictionaries[oldSample.tagName]) {
-          delete this.oriDataDictionaries[oldSample.tagName];
-          this.originDataArr.splice(i, 1);
           dataRemoveFlag = true;
-        } else if (!newTagDictionaries[oldSample.tagName][oldSample.runName]) {
-          delete this.oriDataDictionaries[oldSample.tagName][oldSample.runName];
           this.originDataArr.splice(i, 1);
-          dataRemoveFlag = true;
         }
       }
       return dataRemoveFlag;
@@ -762,129 +522,35 @@ export default {
       if (!oriData) {
         return false;
       }
-      const runDictionaries = {};
-      const tagDictionaries = {};
-      // Generate the current training log dictionary
-      this.runOperateList.forEach((runItem) => {
-        runDictionaries[runItem.label] = true;
-      });
-      // Generate the current tag dictionary
-      this.tagOperateList.forEach((tagItem) => {
-        tagDictionaries[tagItem.label] = true;
-      });
-
       // Add New Data
       let dataAddFlag = false;
-      oriData.forEach((runObj) => {
-        // Add training logs in the operation bar
-        if (!runDictionaries[runObj.name]) {
-          this.runOperateList.push({
-            label: runObj.name,
+      oriData.tags.forEach((tagName) => {
+        if (!this.oriDataDictionaries[tagName]) {
+          this.oriDataDictionaries[tagName] = true;
+          this.tagOperateList.push({
+            label: tagName,
             checked: true,
             show: false,
           });
-          runDictionaries[runObj.name] = true;
+          this.originDataArr.push({
+            summaryId: oriData.id,
+            summaryName: oriData.name,
+            tagName: tagName,
+            sampleData: [],
+            curPageShow: false,
+            sliderValue: 0,
+            fullScreen: false,
+            totalStepNum: 0,
+            curStep: '',
+            curImgUrl: '',
+            curTime: '',
+            curImageSize: [0, 0],
+          });
           dataAddFlag = true;
         }
-
-        runObj.tags.forEach((tagName) => {
-          // Adding a tag to the operation bar
-          if (!tagDictionaries[tagName]) {
-            this.tagOperateList.push({
-              label: tagName,
-              checked: true,
-              show: false,
-            });
-            tagDictionaries[tagName] = true;
-            dataAddFlag = true;
-          }
-
-          // Add Image Information
-          let newSampleFlag = false;
-          if (this.oriDataDictionaries[tagName]) {
-            if (!this.oriDataDictionaries[tagName][runObj.name]) {
-              newSampleFlag = true;
-              this.oriDataDictionaries[tagName][runObj.name] = true;
-            }
-          } else {
-            newSampleFlag = true;
-            this.oriDataDictionaries[tagName] = {};
-            this.oriDataDictionaries[tagName][runObj.name] = true;
-          }
-          // Add image information to all data array
-          if (newSampleFlag) {
-            dataAddFlag = true;
-            this.originDataArr.push({
-              runId: runObj.id,
-              runName: runObj.name,
-              tagName: tagName,
-              sampleData: [],
-              tagShow: false,
-              runShow: true,
-              curPageShow: false,
-              sliderValue: 0,
-              fullScreen: false,
-              totalStepNum: 0,
-              curStep: '',
-              curImgUrl: '',
-              curTime: '',
-              curImageSize: [0, 0],
-            });
-          }
-        });
       });
       return dataAddFlag;
     },
-    /**
-     * Update the training log and tag selection status and select all status,
-     * and obtain the list of images that meet the search criteria
-     */
-    updateRunAndTagSelectStateAndFilterResult() {
-      this.multiSelectedRunNames = {};
-      this.multiSelectedTagNames = {};
-      // Update the selection status and selection status of training logs
-      this.runOperateList.forEach((runItem) => {
-        runItem.show = true;
-        this.multiSelectedRunNames[runItem.label] = true;
-      });
-      // Update the tag selection status and select all status
-      let tagReg;
-      try {
-        tagReg = new RegExp(this.tagInput);
-      } catch (e) {
-        tagReg = new RegExp(this.valiableTagInput);
-      }
-      let tagSelectAll = true;
-      this.tagOperateList.forEach((tagItem) => {
-        if (tagReg.test(tagItem.label)) {
-          tagItem.show = true;
-          if (tagItem.checked) {
-            this.multiSelectedTagNames[tagItem.label] = true;
-          } else {
-            tagSelectAll = false;
-          }
-        } else {
-          tagItem.show = false;
-        }
-      });
-      this.tagOperateSelectAll = tagSelectAll;
-      // Update the list of images that meet the filter criteria
-      const curFilterSamples = [];
-      this.originDataArr.forEach((sampleItem) => {
-        sampleItem.runShow = true;
-        // Filter tag
-        if (this.multiSelectedTagNames[sampleItem.tagName]) {
-          sampleItem.tagShow = true;
-        } else {
-          sampleItem.tagShow = false;
-        }
-        // whether all filter criteria are met.
-        if (sampleItem.tagShow && sampleItem.runShow) {
-          curFilterSamples.push(sampleItem);
-        }
-      });
-      this.curFilterSamples = curFilterSamples;
-    },
     /**
      * Update all data.
      * @param {Boolean} ignoreError whether ignore error tip
@@ -901,25 +567,25 @@ export default {
               this.isReloading = false;
             }
             // Fault tolerance processing
-            if (!res || !res.data) {
-              return;
-            } else if (!res.data.train_jobs) {
+            if (
+              !res ||
+            !res.data ||
+            !res.data.train_jobs ||
+            !res.data.train_jobs.length ||
+            !res.data.train_jobs[0].tags
+            ) {
               this.clearAllData();
               return;
             }
-            const oriData = res.data.train_jobs;
+            const oriData = res.data.train_jobs[0];
             // Delete the data that does not exist.
             const dataRemoveFlag = this.removeNonexistentData(oriData);
             // Check whether new data exists and add it
             const dataAddFlag = this.checkNewDataAndComplete(oriData);
             this.$nextTick(() => {
-              this.resizeCallback();
+              this.multiSelectedTagNames = this.$refs.checkListComponents.updateSelectedDic();
+              this.updateTagInPage(!dataRemoveFlag && !dataAddFlag);
             });
-            // Update the training log and tag selection status and select all status,
-            // and obtain the list of images that meet the search criteria
-            this.updateRunAndTagSelectStateAndFilterResult();
-            // Obtains data on the current page
-            this.getCurPageDataArr(!dataRemoveFlag && !dataAddFlag);
           }, this.requestErrorCallback)
           .catch((e) => {
             this.$message.error(this.$t('public.dataError'));
@@ -957,8 +623,9 @@ export default {
       });
     },
   },
-  // Component titlebar
-  components: {},
+  components: {
+    checkListComponents,
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -979,7 +646,6 @@ export default {
     font-size: 14px;
     vertical-align: middle;
     flex-shrink: 0;
-    width: 84px;
   }
   .select-all {
     cursor: pointer;
@@ -989,85 +655,6 @@ export default {
     width: 100%;
     padding: 8px 32px 22px 32px;
     background: #ffffff;
-    .tag-select-content {
-      display: flex;
-      align-items: center;
-
-      .select-item-content {
-        display: flex;
-        height: 16px;
-        flex-wrap: wrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      .run-select-content-open {
-        flex: 1;
-        text-align: right;
-        font-size: 14px;
-        color: #00a5a7;
-        cursor: pointer;
-        min-width: 60px;
-      }
-    }
-    .run-select-content-all {
-      max-height: 150px;
-      padding-left: 72px;
-      overflow-x: hidden;
-      display: flex;
-      flex-wrap: wrap;
-      .label-item {
-        line-height: 14px;
-      }
-      .select-item {
-        height: 25px;
-        margin-top: 25px;
-      }
-    }
-    .select-item {
-      margin-right: 20px;
-      flex-shrink: 0;
-      margin-bottom: 1px;
-      cursor: pointer;
-      .label-item {
-        width: 100px;
-        display: block;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        text-align: left;
-      }
-    }
-    .multiCheckBox-border {
-      width: 16px;
-      height: 16px;
-      display: block;
-      margin-right: 20px;
-      cursor: pointer;
-      float: left;
-    }
-    .checkbox-checked {
-      background-image: url('../../assets/images/mult-select.png');
-    }
-    .checkbox-unchecked {
-      background-image: url('../../assets/images/mult-unselect.png');
-    }
-    .label-item {
-      font-size: 14px;
-      line-height: 14px;
-      vertical-align: middle;
-      .el-tooltip {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        text-align: left;
-        height: 16px;
-      }
-      span {
-        font-size: 14px;
-        line-height: 14px;
-        display: block;
-      }
-    }
   }
   .cl-img-slider-operate-content {
     background: #ffffff;
@@ -1148,7 +735,7 @@ export default {
           overflow: hidden;
           background-color: #f0f3fa;
           .tag-title,
-          .run-title {
+          .summary-title {
             font-size: 14px;
             line-height: 20px;
             text-overflow: ellipsis;

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

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <template>
-  <div id='cl-model-traceback'>
+  <div id="cl-model-traceback">
     <div class="cl-model-right">
       <div class="checkbox-area"
            v-if="!noData && echart.allData.length">
@@ -22,33 +22,28 @@ limitations under the License.
                    @click="resetChart"
                    type="primary"
                    size="mini"
-                   plain>
-          {{$t('modelTraceback.showAllData')}}
-        </el-button>
+                   plain>{{ $t('modelTraceback.showAllData') }}</el-button>
         <div class="checkbox">
           <el-checkbox v-for="item in table.mandatoryColumn"
                        :key="item"
                        :label="item"
                        :checked="true"
                        :disabled="true"
-                       :class="table.optionsNotInCheckbox.includes(item)?'notShow': ''">
-            {{table.columnOptions[item].label}}
-          </el-checkbox>
-          <br>
+                       :class="table.optionsNotInCheckbox.includes(item) ? 'notShow' : ''">
+            {{ table.columnOptions[item].label }}</el-checkbox>
+          <br />
           <el-checkbox class="select-all"
                        v-model="table.selectAll"
                        :indeterminate="table.isIndeterminate"
-                       @change="checkboxSelectAll">
-            {{$t('scalar.selectAll')}}
-          </el-checkbox>
+                       @change="checkboxSelectAll">{{ $t('scalar.selectAll') }}</el-checkbox>
           <el-checkbox-group v-model="table.selectedColumn"
                              @change="columnSelectionChange">
             <el-checkbox v-for="item in table.optionalColumn"
                          :key="item"
                          :label="item"
-                         :class="table.optionsNotInCheckbox.includes(item)?'notShow': 'option'">
-              {{table.columnOptions[item].label}}
-            </el-checkbox>
+                         :class="
+                table.optionsNotInCheckbox.includes(item) ? 'notShow' : 'option'
+              ">{{ table.columnOptions[item].label }}</el-checkbox>
           </el-checkbox-group>
         </div>
       </div>
@@ -62,24 +57,30 @@ limitations under the License.
                   tooltip-effect="light"
                   height="calc(100% - 40px)"
                   @selection-change="selectionChange"
-                  @sort-change='sortChange'
+                  @sort-change="sortChange"
                   row-key="summary_dir">
           <el-table-column type="selection"
                            width="55"
                            v-if="table.data.length"
-                           :reserve-selection="true">
-          </el-table-column>
+                           :reserve-selection="true"></el-table-column>
           <el-table-column v-for="key in table.column"
                            :key="key"
                            :prop="key"
                            :label="table.columnOptions[key].label"
                            show-overflow-tooltip
-                           min-width='150'
-                           sortable='custom'>
+                           min-width="180"
+                           sortable="custom">
+            <template slot="header"
+                      slot-scope="scope">
+              <div class="custom-label"
+                   :title="scope.column.label">
+                {{ scope.column.label }}
+              </div>
+            </template>
             <template slot-scope="scope">
               <a v-if="key === 'summary_dir'"
-                 @click="jumpToTrainDashboard(scope.row[key])">{{scope.row[key]}}</a>
-              <span v-else> {{formatNumber(key, scope.row[key])}}</span>
+                 @click="jumpToTrainDashboard(scope.row[key])">{{ scope.row[key] }}</a>
+              <span v-else>{{ formatNumber(key, scope.row[key]) }}</span>
             </template>
           </el-table-column>
         </el-table>
@@ -87,17 +88,14 @@ limitations under the License.
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        :layout="pagination.layout"
-                       :total="pagination.total">
-        </el-pagination>
+                       :total="pagination.total"></el-pagination>
       </div>
       <div v-if="noData"
            class="no-data-page">
         <div class="no-data-img">
           <img :src="require('@/assets/images/nodata.png')"
-               alt="" />
-          <p class='no-data-text'>
-            {{$t("public.noData")}}
-          </p>
+               alt />
+          <p class="no-data-text">{{ $t('public.noData') }}</p>
         </div>
       </div>
     </div>
@@ -283,7 +281,6 @@ export default {
               (res) => {
                 if (res && res.data && res.data.object) {
                   const list = JSON.parse(JSON.stringify(res.data.object));
-                  const metricKeys = {};
                   list.forEach((i) => {
                     i.model_size = parseFloat(
                         ((i.model_size || 0) / 1024 / 1024).toFixed(2),
@@ -292,37 +289,64 @@ export default {
                     if (keys.length) {
                       keys.forEach((key) => {
                         if (i.metric[key] || i.metric[key] === 0) {
-                          const temp = 'metric_' + key;
-                          metricKeys[temp] = key;
+                          const temp = 'metric/' + key;
                           i[temp] = i.metric[key];
                         }
                       });
                       delete i.metric;
                     }
+                    const udkeys = Object.keys(i.user_defined || {});
+                    if (udkeys.length) {
+                      udkeys.forEach((key) => {
+                        if (i.user_defined[key] || i.user_defined[key] === 0) {
+                          const temp = 'user_defined/' + key;
+                          i[temp] = i.user_defined[key];
+                        }
+                      });
+                      delete i.user_defined;
+                    }
                   });
                   if (allData) {
-                    const obj = {};
-                    Object.keys(metricKeys).forEach((key) => {
-                      obj[key] = {
-                        label: metricKeys[key],
-                        required: true,
-                      };
-                    });
-
-                    this.table.columnOptions = Object.assign(
-                        {
-                          summary_dir: {
-                            label: this.$t('modelTraceback.summaryPath'),
-                            required: true,
-                          },
-                          dataset_mark: {
-                            label: this.$t('modelTraceback.dataProcess'),
-                            required: true,
-                          },
-                        },
-                        obj,
-                        this.table.columnOptions,
-                    );
+                    if (res.data.customized) {
+                      const customized = JSON.parse(
+                          JSON.stringify(res.data.customized),
+                      );
+                      const customizedKeys = Object.keys(customized);
+                      if (customizedKeys.length > 0) {
+                        const metricColumnOptions = {};
+                        const userDefinedColumnOptions = {};
+                        customizedKeys.forEach((key) => {
+                          const str = key.substring(0, key.indexOf('/'));
+                          if ('metric' === str) {
+                            metricColumnOptions[key] = customized[key];
+                          } else if ('user_defined' === str) {
+                            userDefinedColumnOptions[key] = customized[key];
+                          }
+                        });
+                        this.table.columnOptions = Object.assign(
+                            {
+                              summary_dir: {
+                                label: this.$t('modelTraceback.summaryPath'),
+                                required: true,
+                              },
+                              dataset_mark: {
+                                label: this.$t('modelTraceback.dataProcess'),
+                                required: true,
+                              },
+                            },
+                            metricColumnOptions,
+                            userDefinedColumnOptions,
+                            this.table.columnOptions,
+                        );
+                        customizedKeys.forEach((i) => {
+                          if (customized[i].type === 'int') {
+                            this.keysOfIntValue.push(i);
+                          } else if (customized[i].type === 'str') {
+                            this.keysOfStringValue.push(i);
+                          }
+                        });
+                      }
+                    }
 
                     this.noData = !!!res.data.object.length;
                     this.echart.allData = list;
@@ -438,12 +462,22 @@ export default {
                     if (keys.length) {
                       keys.forEach((key) => {
                         if (i.metric[key] || i.metric[key] === 0) {
-                          const temp = 'metric_' + key;
+                          const temp = 'metric/' + key;
                           i[temp] = i.metric[key];
                         }
                       });
                       delete i.metric;
                     }
+                    const udkeys = Object.keys(i.user_defined || {});
+                    if (udkeys.length) {
+                      udkeys.forEach((key) => {
+                        if (i.user_defined[key] || i.user_defined[key] === 0) {
+                          const temp = 'user_defined/' + key;
+                          i[temp] = i.user_defined[key];
+                        }
+                      });
+                      delete i.user_defined;
+                    }
                   });
                   this.table.data = list;
                   this.pagination.total = res.data.count || 0;
@@ -508,6 +542,9 @@ export default {
       const echartOption = {
         backgroundColor: 'white',
         parallelAxis: parallelAxis,
+        tooltip: {
+          trigger: 'axis',
+        },
         parallel: {
           top: 25,
           left: 50,
@@ -540,6 +577,9 @@ export default {
             areaSelectStyle: {
               width: 40,
             },
+            tooltip: {
+              show: true,
+            },
             realtime: false,
           },
         },
@@ -618,12 +658,22 @@ export default {
                         if (keys.length) {
                           keys.forEach((key) => {
                             if (i.metric[key] || i.metric[key] === 0) {
-                              const temp = 'metric_' + key;
+                              const temp = 'metric/' + key;
                               i[temp] = i.metric[key];
                             }
                           });
                           delete i.metric;
                         }
+                        const udkeys = Object.keys(i.user_defined || {});
+                        if (udkeys.length) {
+                          udkeys.forEach((key) => {
+                            if (i.user_defined[key] || i.user_defined[key] === 0) {
+                              const temp = 'user_defined/' + key;
+                              i[temp] = i.user_defined[key];
+                            }
+                          });
+                          delete i.user_defined;
+                        }
                       });
 
                       this.echart.showData = this.echart.brushData = list;
@@ -805,6 +855,11 @@ export default {
       height: calc(60% - 74px);
       padding: 12px 32px;
       position: relative;
+      .custom-label {
+        max-width: calc(100% - 25px);
+        padding: 0;
+        vertical-align: middle;
+      }
       a {
         cursor: pointer;
       }

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

@@ -553,12 +553,8 @@ export default {
 
       if (this.curPageArr.length > 0) {
         this.curPageArr.forEach((sampleObject, yIndex) => {
-          const runCount = sampleObject.runId.length;
-          if (runCount === 0) {
-            return;
-          }
           const params = {
-            train_id: sampleObject.runId[0],
+            train_id: this.trainingJobId,
             tag: sampleObject.tagName,
           };
           ajaxArr.push(this.addAjax(params, yIndex));
@@ -574,14 +570,11 @@ export default {
                 return;
               }
               this.curPageArr.forEach((sampleObject, yIndex) => {
-                sampleObject.runNames.forEach((runName, runNameIndex) => {
-                  sampleObject.colors.push(
+                sampleObject.colors=
                   CommonProperty.commonColorArr[this.colorNum]
                     ? CommonProperty.commonColorArr[this.colorNum]
-                    : CommonProperty.commonColorArr[this.defColorCount - 1],
-                  );
-                  this.colorNum++;
-                });
+                    : CommonProperty.commonColorArr[this.defColorCount - 1];
+                this.colorNum++;
               });
               this.colorNum = 0;
               for (let i = 0; i < res.length; i++) {
@@ -600,9 +593,8 @@ export default {
                   color: CommonProperty.commonColorArr[this.colorNum]
                   ? CommonProperty.commonColorArr[this.colorNum]
                   : CommonProperty.commonColorArr[this.defColorCount - 1],
-                  runName: this.returnRunName(this.trainingJobId),
-                  curBackName:
-                  this.returnRunName(this.trainingJobId) + this.backendString,
+                  runName: this.trainingJobId,
+                  curBackName: this.trainingJobId + this.backendString,
                   tagName: res[i].params.tag,
                 };
                 let relativeTimeBench = 0;
@@ -639,22 +631,6 @@ export default {
       }
     },
 
-    /**
-     * return run name
-     * @param {String} id
-     * @return {String}
-     */
-
-    returnRunName(id) {
-      if (!id) {
-        return;
-      }
-      let runName = '';
-      if (this.curPageArr[0].runNames[0]) {
-        runName = this.curPageArr[0].runNames[0];
-      }
-      return runName;
-    },
 
     /**
      * add request

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

@@ -212,9 +212,6 @@ export default {
       propsList: [], // dataList props
       smoothValue: 0, // Initial smoothness of the slider
       smoothSliderValueTimer: null, // Smoothness slider timer
-      // Number of predefined colors
-      defColorCount: CommonProperty.commonColorArr.length,
-      curAvlColorIndexArr: [], // color subscript
       DomIdIndex: 0, // DomId num
       originDataArr: [], // Original data
       curPageArr: [], // data of the current page
@@ -329,9 +326,6 @@ export default {
       // Adding a Listener
       this.getCharMainContentwidth();
 
-      // Initialize available colors
-      this.initAvlColorArr();
-
       // Initializing Data
       this.getScalarsList();
 
@@ -367,52 +361,45 @@ export default {
             const tempTagList = [];
             const dataList = [];
             const propsList = [];
-            const data = res.data.train_jobs;
-            data.forEach((runObj, runObjectIndex) => {
-              const colorIndex = this.curAvlColorIndexArr.length
-              ? this.curAvlColorIndexArr.shift()
-              : this.defColorCount - 1;
-              const runNmeColor = CommonProperty.commonColorArr[colorIndex];
-              runObj.tags.forEach((tagObj) => {
+            const data = res.data.train_jobs[0];
+            const runNmeColor = CommonProperty.commonColorArr[0];
+            data.tags.forEach((tagObj) => {
               // Add the tag list
-                this.multiSelectedTagNames[tagObj] = true;
-                tempTagList.push({
-                  label: tagObj,
-                  checked: true,
-                  show: true,
-                });
-                const sampleIndex = dataList.length;
-                this.curFilterTagIndexArr.push(sampleIndex);
-
-                // Adding Chart Data
-                dataList.push({
-                  tagName: tagObj,
-                  runNames: [runObj.name],
-                  colors: [runNmeColor],
-                  runId: [runObj.id],
-                  show: false,
-                  updateFlag: false,
-                  dataRemove: false,
-                  fullScreen: false,
-                  sampleIndex: sampleIndex,
-                  domId: 'prDom' + this.DomIdIndex,
-                  charData: {
-                    oriData: [],
-                    charOption: {},
-                  },
-                  zoomData: [null, null],
-                  zoomDataTimer: null,
-                  charObj: null,
-                });
-
-                propsList.push({
-                  tagName: tagObj,
-                  runNames: [runObj.name],
-                  runId: [runObj.id],
-                  colors: [],
-                });
-                this.DomIdIndex++;
+              this.multiSelectedTagNames[tagObj] = true;
+              tempTagList.push({
+                label: tagObj,
+                checked: true,
+                show: true,
+              });
+              const sampleIndex = dataList.length;
+              this.curFilterTagIndexArr.push(sampleIndex);
+
+              // Adding Chart Data
+              dataList.push({
+                tagName: tagObj,
+                runNames: data.name,
+                colors: runNmeColor,
+                show: false,
+                updateFlag: false,
+                dataRemove: false,
+                fullScreen: false,
+                sampleIndex: sampleIndex,
+                domId: 'prDom' + this.DomIdIndex,
+                charData: {
+                  oriData: [],
+                  charOption: {},
+                },
+                zoomData: [null, null],
+                zoomDataTimer: null,
+                charObj: null,
+              });
+
+              propsList.push({
+                tagName: tagObj,
+                runNames: data.name,
+                colors: '',
               });
+              this.DomIdIndex++;
             });
             this.tagOperateList = tempTagList;
             this.tagPropsList = JSON.parse(JSON.stringify(tempTagList));
@@ -485,15 +472,11 @@ export default {
         return;
       }
       sampleObject.updateFlag = true;
-      const runCount = sampleObject.runId.length;
-      if (runCount === 0) {
-        return;
-      }
 
       const promiseArr = [];
 
       const params = {
-        train_id: sampleObject.runId[0],
+        train_id: this.trainingJobId,
         tag: sampleObject.tagName,
       };
 
@@ -629,48 +612,47 @@ export default {
       let returnFlag = false;
       const seriesData = [];
       const oriData = sampleObject.charData.oriData;
-      sampleObject.runNames.forEach((runName, runNameIndex) => {
-        const curBackName = runName + this.backendString;
-        const dataObj = {
-          name: runName,
-          data: [],
-          type: 'line',
-          showSymbol: false,
-          lineStyle: {
-            color: sampleObject.colors[runNameIndex],
-          },
-        };
-        const dataObjBackend = {
-          name: curBackName,
-          data: [],
-          type: 'line',
-          smooth: 0,
-          symbol: 'none',
-          lineStyle: {
-            color: sampleObject.colors[runNameIndex],
-            opacity: 0.2,
-          },
-        };
-        const curOriData = oriData[runNameIndex];
+      const runName=sampleObject.runNames;
+      const curBackName = runName + this.backendString;
+      const dataObj = {
+        name: runName,
+        data: [],
+        type: 'line',
+        showSymbol: false,
+        lineStyle: {
+          color: sampleObject.colors,
+        },
+      };
+      const dataObjBackend = {
+        name: curBackName,
+        data: [],
+        type: 'line',
+        smooth: 0,
+        symbol: 'none',
+        lineStyle: {
+          color: sampleObject.colors,
+          opacity: 0.2,
+        },
+      };
+      const curOriData = oriData[0];
 
-        if (curOriData) {
-          if (sampleObject.log) {
-            dataObj.data = this.formateSmoothData(
-                curOriData.logData[this.curBenchX],
-            );
-            dataObjBackend.data = curOriData.logData[this.curBenchX];
-          } else {
-            dataObj.data = this.formateSmoothData(
-                curOriData.valueData[this.curBenchX],
-            );
-            dataObjBackend.data = curOriData.valueData[this.curBenchX];
-          }
+      if (curOriData) {
+        if (sampleObject.log) {
+          dataObj.data = this.formateSmoothData(
+              curOriData.logData[this.curBenchX],
+          );
+          dataObjBackend.data = curOriData.logData[this.curBenchX];
         } else {
-          returnFlag = true;
+          dataObj.data = this.formateSmoothData(
+              curOriData.valueData[this.curBenchX],
+          );
+          dataObjBackend.data = curOriData.valueData[this.curBenchX];
         }
+      } else {
+        returnFlag = true;
+      }
 
-        seriesData.push(dataObj, dataObjBackend);
-      });
+      seriesData.push(dataObj, dataObjBackend);
       if (returnFlag) {
         return;
       }
@@ -884,7 +866,7 @@ export default {
                   });
                   strBody +=
                     `<tr><td style="border-radius:50%;width:15px;height:15px;vertical-align: middle;` +
-                    `margin-right: 5px;background-color:${sampleObject.colors[curIndex]};` +
+                    `margin-right: 5px;background-color:${sampleObject.colors};` +
                     `display:inline-block;"></td><td>${parma.seriesName}</td>` +
                     `<td>${that.formateYaxisValue(parma.value[1])}</td>` +
                     `<td>${that.formateYaxisValue(
@@ -1292,16 +1274,6 @@ export default {
       window.addEventListener('resize', this.resizeCallback, false);
     },
 
-    /**
-     * Initialize the color array
-     */
-
-    initAvlColorArr() {
-      const length = this.defColorCount;
-      for (let i = 0; i < length; i++) {
-        this.curAvlColorIndexArr.push(i);
-      }
-    },
 
     /**
      * Clear data
@@ -1368,16 +1340,13 @@ export default {
       const tagList = []; // tag list
       let dataRemoveFlag = false;
       // Obtains the current tag and run list
-      oriData.forEach((runObj, runIndex) => {
-        runObj.tags.forEach((tagObj) => {
-          let sameTagIndex = tagList.indexOf(tagObj);
-          if (sameTagIndex === -1) {
-            sameTagIndex = tagList.length;
-            tagList.push(tagObj);
-          }
-        });
+      oriData.tags.forEach((tagObj) => {
+        let sameTagIndex = tagList.indexOf(tagObj);
+        if (sameTagIndex === -1) {
+          sameTagIndex = tagList.length;
+          tagList.push(tagObj);
+        }
       });
-
       // Delete the tag that does not exist
       const oldTagListLength = this.tagOperateList.length;
       for (let i = oldTagListLength - 1; i >= 0; i--) {
@@ -1419,59 +1388,44 @@ export default {
         return false;
       }
       let dataAddFlag = false;
-      oriData.forEach((runObj) => {
-        const colorIndex = this.curAvlColorIndexArr.length
-          ? this.curAvlColorIndexArr.shift()
-          : this.defColorCount - 1;
-        const runColor = CommonProperty.commonColorArr[colorIndex];
-        runObj.tags.forEach((tagObj) => {
-          let sameTagIndex = -1;
-          this.tagOperateList.some((tagItem, tagIndex) => {
-            if (tagItem.label === tagObj) {
-              sameTagIndex = tagIndex;
-              return true;
-            }
-          });
-          if (sameTagIndex === -1) {
-            this.tagOperateList.push({
-              label: tagObj,
-              checked: true,
-              show: false,
-            });
-            const sampleIndex = this.originDataArr.length;
-            dataAddFlag = true;
-            this.originDataArr.push({
-              tagName: tagObj,
-              runNames: [runObj.name],
-              runId: [runObj.id],
-              colors: [runColor],
-              show: false,
-              updateFlag: false,
-              dataRemove: false,
-              fullScreen: false,
-              sampleIndex: sampleIndex,
-              domId: 'prDom' + this.DomIdIndex,
-              charData: {
-                oriData: [],
-                charOption: {},
-              },
-              zoomData: [null, null],
-              zoomDataTimer: null,
-              charObj: null,
-            });
-            this.DomIdIndex++;
-          } else {
-            const sameSampleObj = this.originDataArr[sameTagIndex];
-            if (
-              sameSampleObj &&
-              sameSampleObj.runNames.indexOf(runObj.name) === -1
-            ) {
-              sameSampleObj.runNames.push(runObj.name);
-              sameSampleObj.runId.push(runObj.id);
-              sameSampleObj.colors.push(runColor);
-            }
+      // oriData.forEach((runObj) => {
+      const runColor = CommonProperty.commonColorArr[0];
+      oriData.tags.forEach((tagObj) => {
+        let sameTagIndex = -1;
+        this.tagOperateList.some((tagItem, tagIndex) => {
+          if (tagItem.label === tagObj) {
+            sameTagIndex = tagIndex;
+            return true;
           }
         });
+        if (sameTagIndex === -1) {
+          this.tagOperateList.push({
+            label: tagObj,
+            checked: true,
+            show: false,
+          });
+          const sampleIndex = this.originDataArr.length;
+          dataAddFlag = true;
+          this.originDataArr.push({
+            tagName: tagObj,
+            runNames: oriData.name,
+            colors: runColor,
+            show: false,
+            updateFlag: false,
+            dataRemove: false,
+            fullScreen: false,
+            sampleIndex: sampleIndex,
+            domId: 'prDom' + this.DomIdIndex,
+            charData: {
+              oriData: [],
+              charOption: {},
+            },
+            zoomData: [null, null],
+            zoomDataTimer: null,
+            charObj: null,
+          });
+          this.DomIdIndex++;
+        }
       });
 
       return dataAddFlag;
@@ -1540,7 +1494,7 @@ export default {
               this.clearAllData();
               return;
             }
-            const data = res.data.train_jobs;
+            const data = res.data.train_jobs[0];
 
             // Delete the data that does not exist
             const tagRemoveFlag = this.removeNonexistentData(data);
@@ -1561,23 +1515,20 @@ export default {
             const tempTagList = [];
             const propsList = [];
 
-            data.forEach((runObj, runObjectIndex) => {
             // Initial chart data
-              runObj.tags.forEach((tagObj) => {
+            data.tags.forEach((tagObj) => {
               // Check whether the tag with the same name exists
-                tempTagList.push({
-                  label: tagObj,
-                  checked: true,
-                  show: true,
-                });
-
-                // Add the tag list.
-                propsList.push({
-                  tagName: tagObj,
-                  runNames: [runObj.name],
-                  runId: [runObj.id],
-                  colors: [],
-                });
+              tempTagList.push({
+                label: tagObj,
+                checked: true,
+                show: true,
+              });
+
+              // Add the tag list.
+              propsList.push({
+                tagName: tagObj,
+                runNames: data.name,
+                colors: '',
               });
             });
             this.tagPropsList = tempTagList;
@@ -1796,18 +1747,12 @@ export default {
 
         if (this.abort) {
           this.curPageArr.forEach((sampleObject) => {
-            let runCount = sampleObject.runNames.length;
-            sampleObject.runNames.forEach((runName, runNameIndex) => {
-              runCount--;
-              if (runCount === 0) {
-                this.$nextTick(() => {
-                  // Draw chart
-                  if (!this.compare) {
-                    this.updateOrCreateChar(sampleObject.sampleIndex);
-                  } else {
-                    this.abort = true;
-                  }
-                });
+            this.$nextTick(() => {
+              // Draw chart
+              if (!this.compare) {
+                this.updateOrCreateChar(sampleObject.sampleIndex);
+              } else {
+                this.abort = true;
               }
             });
           });

mindinsight/ui/src/views/train-manage/training-dashboard.vue

@@ -29,7 +29,7 @@ limitations under the License.
         <div class="cl-dashboard-title"> {{$t("trainingDashboard.trainingScalar")}}</div>
         <div class="cl-module">
           <div class="cl-scalar-tagName"
-               v-if="curPageArr.length && !wrongPlugin">
+               v-show="curPageArr.length && !wrongPlugin">
             <div v-for="(sampleItem,index) in curPageArr"
                  :key="index"
                  :class="['tagNameLeft',index==1? 'tagNameRight':'']">
@@ -37,10 +37,10 @@ limitations under the License.
             </div>
           </div>
           <div id="module-chart"
-               v-if="curPageArr.length && !wrongPlugin"
+               v-show="curPageArr.length && !wrongPlugin"
                key="chart-data"></div>
           <div class="no-data-img"
-               v-if="!curPageArr.length || wrongPlugin"
+               v-show="!curPageArr.length || wrongPlugin"
                key="no-chart-data">
             <img :src="require('@/assets/images/nodata.png')"
                  alt="" />
@@ -107,12 +107,12 @@ limitations under the License.
                :class="originImageDataArr.length && !wrongPlugin ? '' : 'no-data-img'">
             <img class="sample-img select-disable"
                  :src="curImageShowSample.curImgUrl"
-                 v-if="originImageDataArr.length && !wrongPlugin">
+                 v-show="originImageDataArr.length && !wrongPlugin">
             <img :src="require('@/assets/images/nodata.png')"
                  alt=""
-                 v-if="!originImageDataArr.length || wrongPlugin">
+                 v-show="!originImageDataArr.length || wrongPlugin">
             <p class='no-data-text'
-               v-if=" !originImageDataArr.length || wrongPlugin">
+               v-show=" !originImageDataArr.length || wrongPlugin">
               {{$t("public.noData")}}
             </p>
           </div>
@@ -615,7 +615,7 @@ export default {
         },
         grid: {
           top: 20,
-          bottom: 50,
+          bottom: 66,
           left: 66,
           right: 60,
         },