@@ -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
*/