update

mindinsight/ui/src/components/header.vue

@@ -31,6 +31,7 @@ limitations under the License.
           <el-menu-item index="/summary-manage">{{$t("summaryManage.summaryList")}}</el-menu-item>
           <el-menu-item index="/model-traceback">{{$t("summaryManage.modelTraceback")}}</el-menu-item>
           <el-menu-item index="/data-traceback">{{$t("summaryManage.dataTraceback")}}</el-menu-item>
+          <el-menu-item index="/compare-plate">{{$t("summaryManage.comparePlate")}}</el-menu-item>
         </el-menu>
       </div>
     </div>
@@ -39,7 +40,8 @@ limitations under the License.
          v-if="this.$route.path.indexOf('/scalar') > 0
          || this.$route.path.indexOf('/image') > 0
          || this.$route.path.indexOf('/histogram') > 0
-         || this.$route.path.indexOf('/training-dashboard') > 0">
+         || this.$route.path.indexOf('/training-dashboard') > 0
+         || !this.$route.path.indexOf('/compare-plate')">
       <!-- automatic refresh switch -->
       <el-switch v-model="isTimeReload"
                  :active-text="$t('header.timeReload')+$t('symbols.leftbracket')+

mindinsight/ui/src/components/multiselectGroup.vue

@@ -17,7 +17,7 @@ limitations under the License.
   <div class="cl-checklist-container">
     <!-- Select tag -->
     <div class="select-content">
-      <div class="title mr24">{{$t("components.tagSelectTitle")}}</div>
+      <div class="title mr24">{{componentsLabel.title || $t("components.tagSelectTitle")}}</div>
       <!-- Select all -->
       <div class="select-all mr24"
            @click="listSelectAll">
@@ -30,16 +30,17 @@ limitations under the License.
                 v-model="searchInput"
                 @input="listFilter"
                 v-if="listFullScreen"
-                :placeholder="$t('components.tagFilterPlaceHolder')"></el-input>
+                :placeholder="componentsLabel.placeholder || $t('components.tagFilterPlaceHolder')"></el-input>
       <!-- Tag list -->
       <div class="select-item-content"
            v-if="!listFullScreen"
-           ref="selectItemContent">
+           :ref="itemId">
         <div class="select-item"
              v-for="(item, itemIndex) in checkListArr"
              :key="itemIndex"
              @click="listItemClick(item)"
-             v-show="item.show">
+             v-show="item.show"
+             :class="(isLimit && selectedNumber >= limitNum && !item.checked)?'item-disable':'item-able'">
           <span class="multiCheckBox-border multi-check-border"
                 :class="item.checked ? 'checkbox-checked':'checkbox-unchecked'"></span>
           <span class="label-item">
@@ -68,7 +69,8 @@ limitations under the License.
            v-for="(item, itemIndex) in checkListArr"
            :key="itemIndex"
            @click="listItemClick(item)"
-           v-show="item.show">
+           v-show="item.show"
+           :class="(isLimit && selectedNumber >= limitNum && !item.checked)?'item-disable':'item-able'">
         <span class="multiCheckBox-border multi-check-border"
               :class="item.checked ? 'checkbox-checked' : 'checkbox-unchecked'"></span>
         <span class="label-item">
@@ -88,6 +90,23 @@ limitations under the License.
 export default {
   props: {
     checkListArr: Array,
+    isLimit: {
+      type: Boolean,
+      default: false,
+    },
+    limitNum: {
+      type: Number,
+      default: 0,
+    },
+    componentsLabel: {
+      type: Object,
+      default() {
+        return {
+          title: '',
+          placeholder: '',
+        };
+      },
+    },
   },
   data() {
     return {
@@ -99,6 +118,8 @@ export default {
       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.
+      selectedNumber: 0, // Number of Selected items
+      itemId: '', // component Id
       searching: false,
     };
   },
@@ -112,6 +133,10 @@ export default {
      * Initialize
      */
     init() {
+      this.itemId =
+      `${new Date().getTime()}` +
+      `${this.$store.state.multiSelectedGroupCount}`;
+      this.$store.commit('multiSelectedGroupComponentNum');
       this.$nextTick(() => {
         this.resizeCallback();
       });
@@ -122,7 +147,7 @@ export default {
      */
     resizeCallback() {
       // Calculating the display of the Expand Folding Button
-      const selectItemContent = this.$refs.selectItemContent;
+      const selectItemContent = this.$refs[this.itemId];
       if (selectItemContent) {
         this.overRowFlag =
           selectItemContent.clientHeight <
@@ -137,15 +162,31 @@ export default {
       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;
+        if (this.isLimit) {
+          const loopCount = this.checkListArr.length;
+          for (let i = 0; i < loopCount; i++) {
+            if (this.selectedNumber >= this.limitNum) {
+              break;
+            }
+            const listItem = this.checkListArr[i];
+            if (listItem.show) {
+              listItem.checked = true;
+              this.multiSelectedItemNames[listItem.label] = true;
+              this.selectedNumber++;
+            }
           }
-        });
+        } else {
+          this.checkListArr.forEach((listItem) => {
+            if (listItem.show) {
+              listItem.checked = true;
+              this.multiSelectedItemNames[listItem.label] = true;
+            }
+          });
+        }
       } else {
         this.checkListArr.forEach((listItem) => {
-          if (listItem.show) {
+          if (listItem.show && listItem.checked) {
+            this.selectedNumber--;
             listItem.checked = false;
           }
         });
@@ -188,6 +229,9 @@ export default {
           }
         });
         // Update the selected status of the Select All button
+        if (this.isLimit && !itemSelectAll) {
+          itemSelectAll = this.selectedNumber >= this.limitNum;
+        }
         this.operateSelectAll = itemSelectAll;
         this.$emit('selectedChange', this.multiSelectedItemNames);
       }, 200);
@@ -197,16 +241,23 @@ export default {
      * @param {Object} listItem Current item object
      */
     listItemClick(listItem) {
-      if (!listItem) {
+      if (
+        !listItem ||
+        (this.isLimit &&
+          this.selectedNumber >= this.limitNum &&
+          !listItem.checked)
+      ) {
         return;
       }
       listItem.checked = !listItem.checked;
       // Refreshes the selected status of the current label option
       if (listItem.checked) {
         this.multiSelectedItemNames[listItem.label] = true;
+        this.selectedNumber++;
       } else {
         if (this.multiSelectedItemNames[listItem.label]) {
           delete this.multiSelectedItemNames[listItem.label];
+          this.selectedNumber--;
         }
       }
       // Update the selected status of the Select All button
@@ -217,6 +268,9 @@ export default {
           return true;
         }
       });
+      if (this.isLimit && !itemSelectAll) {
+        itemSelectAll = this.selectedNumber >= this.limitNum;
+      }
       this.operateSelectAll = itemSelectAll;
       // Return a dictionary containing selected items.
       this.$emit('selectedChange', this.multiSelectedItemNames);
@@ -248,18 +302,43 @@ export default {
       }
       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;
+      if (this.isLimit) {
+        this.selectedNumber = 0;
+        const loopCount = this.checkListArr.length;
+        for (let i = 0; i < loopCount; i++) {
+          const listItem = this.checkListArr[i];
+          if (reg.test(listItem.label)) {
+            listItem.show = true;
+            if (this.selectedNumber >= this.limitNum) {
+              listItem.checked = false;
+              itemSelectAll = false;
+            } else if (listItem.checked) {
+              this.multiSelectedItemNames[listItem.label] = true;
+              this.selectedNumber++;
+            } else {
+              itemSelectAll = false;
+            }
           } else {
-            itemSelectAll = false;
+            listItem.show = false;
           }
-        } else {
-          listItem.show = false;
         }
-      });
+        if (!itemSelectAll && this.selectedNumber >= this.limitNum) {
+          itemSelectAll = true;
+        }
+      } else {
+        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;
@@ -326,7 +405,6 @@ export default {
     margin-right: 20px;
     flex-shrink: 0;
     margin-bottom: 1px;
-    cursor: pointer;
     .label-item {
       width: 100px;
       display: block;
@@ -336,12 +414,18 @@ export default {
       text-align: left;
     }
   }
+  .item-disable {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .item-able {
+    cursor: pointer;
+  }
   .multiCheckBox-border {
     width: 16px;
     height: 16px;
     display: block;
     margin-right: 20px;
-    cursor: pointer;
     float: left;
   }
   .checkbox-checked {

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

@@ -28,7 +28,8 @@
     "createTime": "创建时间",
     "updateTime": "更新时间",
     "operation": "操作",
-    "viewDashboard": "查看训练看板",
+    "viewDashboard": "训练看板",
+    "viewProfiler": "性能分析",
     "modelTraceback": "模型溯源",
     "dataTraceback": "数据溯源"
   },
@@ -91,7 +92,8 @@
     "compareCancel": "取消合成",
     "open": "展开",
     "close": "折叠",
-    "invalidData": "存在无效数据"
+    "invalidData": "存在无效数据",
+    "restore":"还原"
   },
 
   "images": {
@@ -159,6 +161,8 @@
     "finish": "完成"
   },
   "components": {
+    "summaryTitle":"run选择",
+    "tagTitle":"tag选择",
     "tagSelectTitle": "标签选择",
     "selectAll": "全选",
     "tagFilterPlaceHolder": "请输入需要的标签(支持正则表达式)",
@@ -181,7 +185,7 @@
     "5054500D": "图片数据不存在，请刷新",
     "5054500E": "标量数据不存在，请刷新",
     "5054500F": "参数分布图数据不存在，请刷新",
-
+    "50545010": "请求的数据不在缓存中，请刷新",
     "50542082": "模型名称缺失",
     "50542085": "模型名称不合法",
     "50542215": "查询参数错误",

mindinsight/ui/src/router.js

@@ -66,5 +66,9 @@ export default new Router({
       path: '/data-traceback',
       component: () => import('./views/train-manage/data-traceback.vue'),
     },
+    {
+      path: '/compare-plate',
+      component: () => import('./views/train-manage/compare-plate.vue'),
+    },
   ],
 });

mindinsight/ui/src/services/request-service.js

@@ -94,6 +94,43 @@ export default {
     });
   },
 
+  // query trainJob data
+  getTrainJobs(isIgnoreError) {
+    return axios({
+      method: 'get',
+      url: 'v1/mindinsight/datavisual/train-jobs',
+      headers: {
+        ignoreError: isIgnoreError,
+      },
+    });
+  },
+
+  // set caches
+  trainJobsCaches(params) {
+    return axios({
+      method: 'post',
+      url: 'v1/mindinsight/datavisual/train-job-caches',
+      data: params,
+    });
+  },
+
+  // query metedata
+  getSummarySample(params) {
+    const trainIdsStr=params.train_id;
+    const trainIdsArr=trainIdsStr.split('&');
+    let requestStr='';
+    trainIdsArr.forEach((item)=>{
+      if (item) {
+        requestStr+=`train_id=${encodeURIComponent(item)}&`;
+      }
+    });
+    requestStr+=`tag=${params.tag}`;
+    return axios({
+      method: 'get',
+      url: `v1/mindinsight/datavisual/scalars?${requestStr}`,
+    });
+  },
+
   // query image meta data
   getImageMetadatas(params) {
     return axios({

mindinsight/ui/src/store.js

@@ -30,6 +30,8 @@ export default new Vuex.Store({
     timeReloadValue: localStorage.timeReloadValue
       ? localStorage.timeReloadValue
       : 3,
+    // multiSelevtGroup component count
+    multiSelectedGroupCount: 0,
   },
   mutations: {
     // set cancelTokenArr
@@ -63,6 +65,9 @@ export default new Vuex.Store({
     setTimeReloadValue: (state, val) => {
       state.timeReloadValue = val;
     },
+    multiSelectedGroupComponentNum(state) {
+      state.multiSelectedGroupCount++;
+    },
   },
   actions: {},
 });

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

@@ -91,8 +91,13 @@ limitations under the License.
       <el-slider v-model="smoothValue"
                  :step="0.01"
                  :max="0.99"
-                 @input="updataInputValue"
-                 show-input></el-slider>
+                 @input="updataInputValue"></el-slider>
+
+                 <el-input v-model="smoothValueNumber"
+                   class="w60"
+                   @input="smoothValueChange"
+                   @blur="smoothValueBlur"
+                   ></el-input>
     </div>
     <!-- Content display -->
     <div class="cl-eval-show-data-content"
@@ -159,6 +164,7 @@ export default {
       curBenchX: 'stepData', // Front axle reference
       curAxisName: this.$t('scalar.step'), // Current chart tip
       smoothValue: 0, // Initial smoothness of the slider
+      smoothValueNumber: 0,
       smoothSliderValueTimer: null, // Smoothness slider timer
       axisBenchChangeTimer: null, // Horizontal axis reference switching timing
       backendString: 'scalarBackend', // Background layer suffix
@@ -452,11 +458,11 @@ export default {
      */
 
     updataInputValue() {
+      this.smoothValueNumber = Number(val);
       if (this.smoothSliderValueTimer) {
         clearTimeout(this.smoothSliderValueTimer);
         this.smoothSliderValueTimer = null;
       }
-
       if (Object.keys(this.multiSelectedTagNames).length > 0) {
         this.smoothSliderValueTimer = setTimeout(() => {
           // Change the smoothness
@@ -465,6 +471,30 @@ export default {
       }
     },
 
+    smoothValueChange(val) {
+      if (!isNaN(val)) {
+        if (Number(val) === 0) {
+          this.smoothValue = 0;
+        }
+        if (Number(val) < 0) {
+          this.smoothValue = 0;
+          this.smoothValueNumber = 0;
+        }
+        if (Number(val) > 0) {
+          if (Number(val) > 0.99) {
+            this.smoothValue = 0.99;
+            this.smoothValueNumber = 0.99;
+          } else {
+            this.smoothValue = Number(val);
+          }
+        }
+      }
+    },
+
+    smoothValueBlur() {
+      this.smoothValueNumber = this.smoothValue;
+    },
+
     /**
      * Setting the smoothness
      */