From 84047fa44dd83384fbfbcfbf5dd1ddffb7840bf3 Mon Sep 17 00:00:00 2001 From: ph Date: Tue, 19 May 2020 21:13:13 +0800 Subject: [PATCH] update --- mindinsight/ui/src/components/header.vue | 4 +- .../ui/src/components/multiselectGroup.vue | 132 ++++++++++++++---- mindinsight/ui/src/locales/zh-cn.json | 10 +- mindinsight/ui/src/router.js | 4 + .../ui/src/services/request-service.js | 37 +++++ mindinsight/ui/src/store.js | 5 + .../src/views/train-manage/scalar-compare.vue | 36 ++++- 7 files changed, 197 insertions(+), 31 deletions(-) diff --git a/mindinsight/ui/src/components/header.vue b/mindinsight/ui/src/components/header.vue index 52f7f4cb..9f921870 100644 --- a/mindinsight/ui/src/components/header.vue +++ b/mindinsight/ui/src/components/header.vue @@ -31,6 +31,7 @@ limitations under the License. {{$t("summaryManage.summaryList")}} {{$t("summaryManage.modelTraceback")}} {{$t("summaryManage.dataTraceback")}} + {{$t("summaryManage.comparePlate")}} @@ -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')">
-
{{$t("components.tagSelectTitle")}}
+
{{componentsLabel.title || $t("components.tagSelectTitle")}}
@@ -30,16 +30,17 @@ limitations under the License. v-model="searchInput" @input="listFilter" v-if="listFullScreen" - :placeholder="$t('components.tagFilterPlaceHolder')"> + :placeholder="componentsLabel.placeholder || $t('components.tagFilterPlaceHolder')">
+ :ref="itemId">
+ v-show="item.show" + :class="(isLimit && selectedNumber >= limitNum && !item.checked)?'item-disable':'item-able'"> @@ -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'"> @@ -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 { diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json index a468a102..9bff68b7 100644 --- a/mindinsight/ui/src/locales/zh-cn.json +++ b/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": "查询参数错误", diff --git a/mindinsight/ui/src/router.js b/mindinsight/ui/src/router.js index b0cea4f6..3dfad5ae 100644 --- a/mindinsight/ui/src/router.js +++ b/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'), + }, ], }); diff --git a/mindinsight/ui/src/services/request-service.js b/mindinsight/ui/src/services/request-service.js index be099656..e6705326 100644 --- a/mindinsight/ui/src/services/request-service.js +++ b/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({ diff --git a/mindinsight/ui/src/store.js b/mindinsight/ui/src/store.js index 27625413..e65da8a8 100644 --- a/mindinsight/ui/src/store.js +++ b/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: {}, }); diff --git a/mindinsight/ui/src/views/train-manage/scalar-compare.vue b/mindinsight/ui/src/views/train-manage/scalar-compare.vue index f25be297..b9a854d8 100644 --- a/mindinsight/ui/src/views/train-manage/scalar-compare.vue +++ b/mindinsight/ui/src/views/train-manage/scalar-compare.vue @@ -91,8 +91,13 @@ limitations under the License. + @input="updataInputValue"> + +
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 */