!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/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,
         },