Huawei_Technology
/
mindspore-mindinsight
Not watched
1
0
Fork 0
Code
Releases 11 Wiki evaluate Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain HPC
Browse Source

display user-define info on model traceback ; 

fix issue
tags/v0.2.0-alpha
ph 5 years ago
parent
c84d33d977
commit
461df37b4d
11 changed files with 789 additions and 857 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      mindinsight/ui/src/assets/images/logo.png
  2. +381
    -0
      mindinsight/ui/src/components/checkList.vue
  3. +7
    -1
      mindinsight/ui/src/locales/zh-cn.json
  4. +11
    -30
      mindinsight/ui/src/main.js
  5. +1
    -1
      mindinsight/ui/src/services/fetcher.js
  6. +1
    -0
      mindinsight/ui/src/views/train-manage/graph.vue
  7. +129
    -542
      mindinsight/ui/src/views/train-manage/image.vue
  8. +109
    -54
      mindinsight/ui/src/views/train-manage/model-traceback.vue
  9. +6
    -30
      mindinsight/ui/src/views/train-manage/scalar-compare.vue
  10. +137
    -192
      mindinsight/ui/src/views/train-manage/scalar.vue
  11. +7
    -7
      mindinsight/ui/src/views/train-manage/training-dashboard.vue

BIN
mindinsight/ui/src/assets/images/logo.png View File

Before After
Width: 174  |  Height: 30  |  Size: 4.2 kB Width: 192  |  Height: 29  |  Size: 4.1 kB

+ 381
- 0
mindinsight/ui/src/components/checkList.vue View File

@@ -0,0 +1,381 @@
<!--
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>

+ 7
- 1
mindinsight/ui/src/locales/zh-cn.json View File

@@ -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解码失败",


+ 11
- 30
mindinsight/ui/src/main.js View File

@@ -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);
};

+ 1
- 1
mindinsight/ui/src/services/fetcher.js View File

@@ -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') {


+ 1
- 0
mindinsight/ui/src/views/train-manage/graph.vue View File

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


+ 129
- 542
mindinsight/ui/src/views/train-manage/image.vue View File

@@ -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;


+ 109
- 54
mindinsight/ui/src/views/train-manage/model-traceback.vue View File

@@ -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;
}


+ 6
- 30
mindinsight/ui/src/views/train-manage/scalar-compare.vue View File

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


+ 137
- 192
mindinsight/ui/src/views/train-manage/scalar.vue View File

@@ -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;
}
});
});


+ 7
- 7
mindinsight/ui/src/views/train-manage/training-dashboard.vue View File

@@ -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,
},


Write Preview
Loading…
Cancel
Save