Skip to content

M
mindinsight

MindSpore / mindinsight

通知 7
Star 3
Fork 2
M
mindinsight
提交 461df37b 编写于 作者: P ph
浏览文件
操作

display user-define info on model traceback ; 

fix issue
上级 c84d33d9
展开全部 隐藏空白更改
内联 并排
Showing with 789 addition and 857 deletion
mindinsight/ui/src/components/checkList.vue 0 → 100644
浏览文件 @ 461df37b
<!--
Copyright 2020 Huawei Technologies Co., Ltd.All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<template>
<div class="cl-checklist-container">
<!-- Select tag -->
<div class="select-content">
<div class="title mr24">{{$t("components.tagSelectTitle")}}</div>
<!-- Select all -->
<div class="select-all mr24"
@click="listSelectAll">
<span class="multiCheckBox-border multi-check-border"
:class="operateSelectAll ? 'checkbox-checked':'checkbox-unchecked'"></span>
<span class="label-item select-disable">{{$t("components.selectAll")}}</span>
</div>
<!-- Tag search box -->
<el-input class="search-input-item"
v-model="searchInput"
@input="listFilter"
v-if="listFullScreen"
:placeholder="$t('components.tagFilterPlaceHolder')"></el-input>
<!-- Tag list -->
<div class="select-item-content"
v-if="!listFullScreen"
ref="selectItemContent">
<div class="select-item"
v-for="(item, itemIndex) in checkListArr"
:key="itemIndex"
@click="listItemClick(item)"
v-show="item.show">
<span class="multiCheckBox-border multi-check-border"
:class="item.checked ? 'checkbox-checked':'checkbox-unchecked'"></span>
<span class="label-item">
<el-tooltip effect="dark"
popper-class="tooltip-show-content"
:content="item.label"
placement="top">
<span class="select-disable">{{item.label}}</span>
</el-tooltip>
</span>
</div>
</div>
<!-- Tag expansion/collapse button -->
<div class="select-content-open select-disable"
@click="toggleListFullScreen"
v-if="overRowFlag || searchInput"
v-show="!listFullScreen">{{$t("components.open")}}</div>
<div class="select-content-open select-disable"
@click="toggleListFullScreen"
v-if="overRowFlag || listFullScreen"
v-show="listFullScreen">{{$t("components.close")}}</div>
</div>
<div class="select-content-all"
v-if="listFullScreen">
<div class="select-item"
v-for="(item, itemIndex) in checkListArr"
:key="itemIndex"
@click="listItemClick(item)"
v-show="item.show">
<span class="multiCheckBox-border multi-check-border"
:class="item.checked ? 'checkbox-checked' : 'checkbox-unchecked'"></span>
<span class="label-item">
<el-tooltip effect="dark"
popper-class="tooltip-show-content"
:content="item.label"
placement="top">
<span class="select-disable">{{item.label}}</span>
</el-tooltip>
</span>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
checkListArr: Array,
},
data() {
return {
listFullScreen: false, // Indicates whether to expand the selection list.
overRowFlag: false, // Check whether the list contains more than one line.
searchInputTimer: null, // Timer for filtering.
searchInput: '', // Regular input value of the search.
valiableSearchInput: '', // Last valid input for tag retrieval.
multiSelectedItemNames: {}, // Dictionary for storing the name of the selected tags.
operateSelectAll: true, // Indicates whether to select all tags.
perSelectItemMarginBottom: 1, // Outer margin of the bottom of each selection box.
};
},
computed: {},
watch: {},
mounted() {
this.init();
},
methods: {
/**
* Initialize
*/
init() {
this.$nextTick(() => {
this.resizeCallback();
});
window.addEventListener('resize', this.resizeCallback, false);
},
/**
* The callback of window size changes listener
*/
resizeCallback() {
// Calculating the display of the Expand Folding Button
const selectItemContent = this.$refs.selectItemContent;
if (selectItemContent) {
this.overRowFlag =
selectItemContent.clientHeight <
selectItemContent.scrollHeight - this.perSelectItemMarginBottom;
}
},
/**
* Click select all
*/
listSelectAll() {
this.operateSelectAll = !this.operateSelectAll;
this.multiSelectedItemNames = {};
// Setting the status of list items
if (this.operateSelectAll) {
this.checkListArr.forEach((listItem) => {
if (listItem.show) {
listItem.checked = true;
this.multiSelectedItemNames[listItem.label] = true;
}
});
} else {
this.checkListArr.forEach((listItem) => {
if (listItem.show) {
listItem.checked = false;
}
});
}
// Returns a dictionary containing selected items.
this.$emit('selectedChange', this.multiSelectedItemNames);
},
/**
* Tag Filter
*/
listFilter() {
if (this.searchInputTimer) {
clearTimeout(this.searchInputTimer);
this.searchInputTimer = null;
}
this.searchInputTimer = setTimeout(() => {
let reg;
try {
reg = new RegExp(this.searchInput);
} catch (e) {
this.$message.warning(this.$t('public.regIllegal'));
return;
}
this.valiableSearchInput = this.searchInput;
this.multiSelectedItemNames = {};
let itemSelectAll = true;
// Filter the tags that do not meet the conditions in the operation bar and hide them
this.checkListArr.forEach((listItem) => {
if (reg.test(listItem.label)) {
listItem.show = true;
if (listItem.checked) {
this.multiSelectedItemNames[listItem.label] = true;
} else {
itemSelectAll = false;
}
} else {
listItem.show = false;
}
});
// Update the selected status of the Select All button
this.operateSelectAll = itemSelectAll;
this.$emit('selectedChange', this.multiSelectedItemNames);
}, 200);
},
/**
* Item click event
* @param {Object} listItem Current item object
*/
listItemClick(listItem) {
if (!listItem) {
return;
}
listItem.checked = !listItem.checked;
// Refreshes the selected status of the current label option
if (listItem.checked) {
this.multiSelectedItemNames[listItem.label] = true;
} else {
if (this.multiSelectedItemNames[listItem.label]) {
delete this.multiSelectedItemNames[listItem.label];
}
}
// Update the selected status of the Select All button
let itemSelectAll = true;
this.checkListArr.some((curListItem) => {
if (curListItem.show && !curListItem.checked) {
itemSelectAll = false;
return true;
}
});
this.operateSelectAll = itemSelectAll;
// Return a dictionary containing selected items.
this.$emit('selectedChange', this.multiSelectedItemNames);
},
/**
* Expand or collapse the list of items.
*/
toggleListFullScreen() {
this.listFullScreen = !this.listFullScreen;
if (!this.listFullScreen) {
this.$nextTick(() => {
this.resizeCallback();
});
}
},
/**
* Updates the dictionary of selected tags.
* @return {Object} Dictionary containing selected tags
*/
updateSelectedDic() {
let reg;
try {
reg = new RegExp(this.searchInput);
} catch (e) {
reg = new RegExp(this.valiableSearchInput);
}
this.multiSelectedItemNames = {};
let itemSelectAll = true;
this.checkListArr.forEach((listItem) => {
if (reg.test(listItem.label)) {
listItem.show = true;
if (listItem.checked) {
this.multiSelectedItemNames[listItem.label] = true;
} else {
itemSelectAll = false;
}
} else {
listItem.show = false;
}
});
this.operateSelectAll = itemSelectAll;
this.resizeCallback();
return this.multiSelectedItemNames;
},
},
destroyed() {
// Remove the listener of window size change
window.removeEventListener('resize', this.resizeCallback);
// Remove filter timer
if (this.searchInputTimer) {
clearTimeout(this.searchInputTimer);
this.searchInputTimer = null;
}
},
};
</script>
<style lang="scss">
.cl-checklist-container {
width: 100%;
height: 100%;
.select-content {
display: flex;
align-items: center;
.title {
font-size: 14px;
vertical-align: middle;
flex-shrink: 0;
}
.select-all {
cursor: pointer;
flex-shrink: 0;
}
.select-item-content {
display: flex;
height: 16px;
flex-wrap: wrap;
overflow: hidden;
text-overflow: ellipsis;
}
.select-content-open {
flex: 1;
text-align: right;
font-size: 14px;
color: #00a5a7;
cursor: pointer;
min-width: 60px;
}
}
.select-content-all {
max-height: 150px;
padding-left: 72px;
overflow-x: hidden;
display: flex;
flex-wrap: wrap;
.label-item {
line-height: 14px;
}
.select-item {
height: 25px;
margin-top: 25px;
}
}
.select-item {
margin-right: 20px;
flex-shrink: 0;
margin-bottom: 1px;
cursor: pointer;
.label-item {
width: 100px;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-align: left;
}
}
.multiCheckBox-border {
width: 16px;
height: 16px;
display: block;
margin-right: 20px;
cursor: pointer;
float: left;
}
.checkbox-checked {
background-image: url('../assets/images/mult-select.png');
}
.checkbox-unchecked {
background-image: url('../assets/images/mult-unselect.png');
}
.label-item {
font-size: 14px;
line-height: 14px;
vertical-align: middle;
.el-tooltip {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-align: left;
height: 16px;
}
span {
font-size: 14px;
line-height: 14px;
display: block;
}
}
.mr24 {
margin-right: 24px;
}
.select-disable {
-moz-user-select: none; /*Firefox*/
-webkit-user-select: none; /*webkitbrowser*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*Early browser*/
user-select: none;
}
.search-input-item {
width: 261px;
}
}
.tooltip-show-content {
max-width: 50%;
}
</style>
mindinsight/ui/src/locales/zh-cn.json
浏览文件 @ 461df37b
......@@ -124,6 +124,13 @@
"tooManyNodes": "节点太多，打开失败",
"inputNodeName": "请输入节点名称"
},
"components": {
"tagSelectTitle": "标签选择",
"selectAll": "全选",
"tagFilterPlaceHolder": "请输入需要的标签(支持正则表达式)",
"open": "展开",
"close": "折叠"
},
"error": {
"50540000": "系统错误",
"50540001": "参数类型错误，请检查请求参数类型是否都符合要求",
......@@ -133,7 +140,6 @@
"50545001": "API 路由资源不存在",
"50545002": "请求API的HTTP方法错误",
"50545005": "训练作业不存在",
"50545006": "Summary日志路径无效",
"50545007": "Summary数据正在被加载，请等待Summary数据加载结束",
"50545009": "查询的节点不在图中",
"5054500A": "训练作业ID进行URL解码失败",
......
mindinsight/ui/src/main.js
浏览文件 @ 461df37b
......@@ -42,21 +42,6 @@ router.beforeEach((to, from, next) => {
// forbidden showing production tip
Vue.config.productionTip = false;
/**
* Check whether the input string contains special characters
* @param {String} strurl
* @return {Boolen}
*/
function justSql(strurl) {
const reA = /select|create|alert|update|delete|truncate/i;
const reB = /join|union|exec|insert|drop|count|'|"|;|>|</i;
const reAll = new RegExp(reA.source + reB.source, 'i');
if (reAll.test(strurl)) {
return true;
} else {
return false;
}
}
/**
* Check the browser version
......@@ -83,20 +68,16 @@ function isBrowserSupport() {
}
window.onload = function(e) {
if (justSql(location.hash.toLowerCase())) {
location.href = location.origin;
} else {
if (isBrowserSupport()) {
Vue.prototype.$warmBrowser = true;
}
// Instantiation
setTimeout(() => {
new Vue({
router,
store,
i18n,
render: (h) => h(App),
}).$mount('#app');
}, 100);
if (isBrowserSupport()) {
Vue.prototype.$warmBrowser = true;
}
// Instantiation
setTimeout(() => {
new Vue({
router,
store,
i18n,
render: (h) => h(App),
}).$mount('#app');
}, 100);
};
mindinsight/ui/src/services/fetcher.js
浏览文件 @ 461df37b
......@@ -50,7 +50,7 @@ axios.interceptors.response.use(
// error returned by backend
if (error.response && error.response.data && error.response.data.error_code) {
if (error.response.data.error_code.toString() === '50540005' ||
if (error.response.data.error_code.toString() === '50545005' ||
error.response.data.error_code.toString() === '50545006') {
if (error.config.headers.ignoreError ||
router.currentRoute.path === '/train-manage/training-dashboard') {
......
mindinsight/ui/src/views/train-manage/graph.vue
浏览文件 @ 461df37b
......@@ -850,6 +850,7 @@ export default {
}
})
.catch(() => {
this.fileSearchBox.suggestions = [];
this.initOver = true;
this.loading.show = false;
});
......
mindinsight/ui/src/views/train-manage/model-traceback.vue
浏览文件 @ 461df37b
......@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
-->
<template>
<div id='cl-model-traceback'>
<div id="cl-model-traceback">
<div class="cl-model-right">
<div class="checkbox-area"
v-if="!noData && echart.allData.length">
......@@ -22,33 +22,28 @@ limitations under the License.
@click="resetChart"
type="primary"
size="mini"
plain>
{{$t('modelTraceback.showAllData')}}
</el-button>
plain>{{ $t('modelTraceback.showAllData') }}</el-button>
<div class="checkbox">
<el-checkbox v-for="item in table.mandatoryColumn"
:key="item"
:label="item"
:checked="true"
:disabled="true"
:class="table.optionsNotInCheckbox.includes(item)?'notShow': ''">
{{table.columnOptions[item].label}}
</el-checkbox>
<br>
:class="table.optionsNotInCheckbox.includes(item) ? 'notShow' : ''">
{{ table.columnOptions[item].label }}</el-checkbox>
<br />
<el-checkbox class="select-all"
v-model="table.selectAll"
:indeterminate="table.isIndeterminate"
@change="checkboxSelectAll">
{{$t('scalar.selectAll')}}
</el-checkbox>
@change="checkboxSelectAll">{{ $t('scalar.selectAll') }}</el-checkbox>
<el-checkbox-group v-model="table.selectedColumn"
@change="columnSelectionChange">
<el-checkbox v-for="item in table.optionalColumn"
:key="item"
:label="item"
:class="table.optionsNotInCheckbox.includes(item)?'notShow': 'option'">
{{table.columnOptions[item].label}}
</el-checkbox>
:class="
table.optionsNotInCheckbox.includes(item) ? 'notShow' : 'option'
">{{ table.columnOptions[item].label }}</el-checkbox>
</el-checkbox-group>
</div>
</div>
......@@ -62,24 +57,30 @@ limitations under the License.
tooltip-effect="light"
height="calc(100% - 40px)"
@selection-change="selectionChange"
@sort-change='sortChange'
@sort-change="sortChange"
row-key="summary_dir">
<el-table-column type="selection"
width="55"
v-if="table.data.length"
:reserve-selection="true">
</el-table-column>
:reserve-selection="true"></el-table-column>
<el-table-column v-for="key in table.column"
:key="key"
:prop="key"
:label="table.columnOptions[key].label"
show-overflow-tooltip
min-width='150'
sortable='custom'>
min-width="180"
sortable="custom">
<template slot="header"
slot-scope="scope">
<div class="custom-label"
:title="scope.column.label">
{{ scope.column.label }}
</div>
</template>
<template slot-scope="scope">
<a v-if="key === 'summary_dir'"
@click="jumpToTrainDashboard(scope.row[key])">{{scope.row[key]}}</a>
<span v-else> {{formatNumber(key, scope.row[key])}}</span>
@click="jumpToTrainDashboard(scope.row[key])">{{ scope.row[key] }}</a>
<span v-else>{{ formatNumber(key, scope.row[key]) }}</span>
</template>
</el-table-column>
</el-table>
......@@ -87,17 +88,14 @@ limitations under the License.
:current-page="pagination.currentPage"
:page-size="pagination.pageSize"
:layout="pagination.layout"
:total="pagination.total">
</el-pagination>
:total="pagination.total"></el-pagination>
</div>
<div v-if="noData"
class="no-data-page">
<div class="no-data-img">
<img :src="require('@/assets/images/nodata.png')"
alt="" />
<p class='no-data-text'>
{{$t("public.noData")}}
</p>
alt />
<p class="no-data-text">{{ $t('public.noData') }}</p>
</div>
</div>
</div>
......@@ -283,7 +281,6 @@ export default {
(res) => {
if (res && res.data && res.data.object) {
const list = JSON.parse(JSON.stringify(res.data.object));
const metricKeys = {};
list.forEach((i) => {
i.model_size = parseFloat(
((i.model_size || 0) / 1024 / 1024).toFixed(2),
......@@ -292,37 +289,64 @@ export default {
if (keys.length) {
keys.forEach((key) => {
if (i.metric[key] || i.metric[key] === 0) {
const temp = 'metric_' + key;
metricKeys[temp] = key;
const temp = 'metric/' + key;
i[temp] = i.metric[key];
}
});
delete i.metric;
}
const udkeys = Object.keys(i.user_defined || {});
if (udkeys.length) {
udkeys.forEach((key) => {
if (i.user_defined[key] || i.user_defined[key] === 0) {
const temp = 'user_defined/' + key;
i[temp] = i.user_defined[key];
}
});
delete i.user_defined;
}
});
if (allData) {
const obj = {};
Object.keys(metricKeys).forEach((key) => {
obj[key] = {
label: metricKeys[key],
required: true,
};
});
this.table.columnOptions = Object.assign(
{
summary_dir: {
label: this.$t('modelTraceback.summaryPath'),
required: true,
},
dataset_mark: {
label: this.$t('modelTraceback.dataProcess'),
required: true,
},
},
obj,
this.table.columnOptions,
);
if (res.data.customized) {
const customized = JSON.parse(
JSON.stringify(res.data.customized),
);
const customizedKeys = Object.keys(customized);
if (customizedKeys.length > 0) {
const metricColumnOptions = {};
const userDefinedColumnOptions = {};
customizedKeys.forEach((key) => {
const str = key.substring(0, key.indexOf('/'));
if ('metric' === str) {
metricColumnOptions[key] = customized[key];
} else if ('user_defined' === str) {
userDefinedColumnOptions[key] = customized[key];
}
});
this.table.columnOptions = Object.assign(
{
summary_dir: {
label: this.$t('modelTraceback.summaryPath'),
required: true,
},
dataset_mark: {
label: this.$t('modelTraceback.dataProcess'),
required: true,
},
},
metricColumnOptions,
userDefinedColumnOptions,
this.table.columnOptions,
);
customizedKeys.forEach((i) => {
if (customized[i].type === 'int') {
this.keysOfIntValue.push(i);
} else if (customized[i].type === 'str') {
this.keysOfStringValue.push(i);
}
});
}
}
this.noData = !!!res.data.object.length;
this.echart.allData = list;
......@@ -438,12 +462,22 @@ export default {
if (keys.length) {
keys.forEach((key) => {
if (i.metric[key] || i.metric[key] === 0) {
const temp = 'metric_' + key;
const temp = 'metric/' + key;
i[temp] = i.metric[key];
}
});
delete i.metric;
}
const udkeys = Object.keys(i.user_defined || {});
if (udkeys.length) {
udkeys.forEach((key) => {
if (i.user_defined[key] || i.user_defined[key] === 0) {
const temp = 'user_defined/' + key;
i[temp] = i.user_defined[key];
}
});
delete i.user_defined;
}
});
this.table.data = list;
this.pagination.total = res.data.count || 0;
......@@ -508,6 +542,9 @@ export default {
const echartOption = {
backgroundColor: 'white',
parallelAxis: parallelAxis,
tooltip: {
trigger: 'axis',
},
parallel: {
top: 25,
left: 50,
......@@ -540,6 +577,9 @@ export default {
areaSelectStyle: {
width: 40,
},
tooltip: {
show: true,
},
realtime: false,
},
},
......@@ -618,12 +658,22 @@ export default {
if (keys.length) {
keys.forEach((key) => {
if (i.metric[key] || i.metric[key] === 0) {
const temp = 'metric_' + key;
const temp = 'metric/' + key;
i[temp] = i.metric[key];
}
});
delete i.metric;
}
const udkeys = Object.keys(i.user_defined || {});
if (udkeys.length) {
udkeys.forEach((key) => {
if (i.user_defined[key] || i.user_defined[key] === 0) {
const temp = 'user_defined/' + key;
i[temp] = i.user_defined[key];
}
});
delete i.user_defined;
}
});
this.echart.showData = this.echart.brushData = list;
......@@ -805,6 +855,11 @@ export default {
height: calc(60% - 74px);
padding: 12px 32px;
position: relative;
.custom-label {
max-width: calc(100% - 25px);
padding: 0;
vertical-align: middle;
}
a {
cursor: pointer;
}
......
mindinsight/ui/src/views/train-manage/scalar-compare.vue
浏览文件 @ 461df37b
......@@ -553,12 +553,8 @@ export default {
if (this.curPageArr.length > 0) {
this.curPageArr.forEach((sampleObject, yIndex) => {
const runCount = sampleObject.runId.length;
if (runCount === 0) {
return;
}
const params = {
train_id: sampleObject.runId[0],
train_id: this.trainingJobId,
tag: sampleObject.tagName,
};
ajaxArr.push(this.addAjax(params, yIndex));
......@@ -574,14 +570,11 @@ export default {
return;
}
this.curPageArr.forEach((sampleObject, yIndex) => {
sampleObject.runNames.forEach((runName, runNameIndex) => {
sampleObject.colors.push(
sampleObject.colors=
CommonProperty.commonColorArr[this.colorNum]
? CommonProperty.commonColorArr[this.colorNum]
: CommonProperty.commonColorArr[this.defColorCount - 1],
);
this.colorNum++;
});
: CommonProperty.commonColorArr[this.defColorCount - 1];
this.colorNum++;
});
this.colorNum = 0;
for (let i = 0; i < res.length; i++) {
......@@ -600,9 +593,8 @@ export default {
color: CommonProperty.commonColorArr[this.colorNum]
? CommonProperty.commonColorArr[this.colorNum]
: CommonProperty.commonColorArr[this.defColorCount - 1],
runName: this.returnRunName(this.trainingJobId),
curBackName:
this.returnRunName(this.trainingJobId) + this.backendString,
runName: this.trainingJobId,
curBackName: this.trainingJobId + this.backendString,
tagName: res[i].params.tag,
};
let relativeTimeBench = 0;
......@@ -639,22 +631,6 @@ export default {
}
},
/**
* return run name
* @param {String} id
* @return {String}
*/
returnRunName(id) {
if (!id) {
return;
}
let runName = '';
if (this.curPageArr[0].runNames[0]) {
runName = this.curPageArr[0].runNames[0];
}
return runName;
},
/**
* add request
......
mindinsight/ui/src/views/train-manage/scalar.vue
浏览文件 @ 461df37b
......@@ -212,9 +212,6 @@ export default {
propsList: [], // dataList props
smoothValue: 0, // Initial smoothness of the slider
smoothSliderValueTimer: null, // Smoothness slider timer
// Number of predefined colors
defColorCount: CommonProperty.commonColorArr.length,
curAvlColorIndexArr: [], // color subscript
DomIdIndex: 0, // DomId num
originDataArr: [], // Original data
curPageArr: [], // data of the current page
......@@ -329,9 +326,6 @@ export default {
// Adding a Listener
this.getCharMainContentwidth();
// Initialize available colors
this.initAvlColorArr();
// Initializing Data
this.getScalarsList();
......@@ -367,52 +361,45 @@ export default {
const tempTagList = [];
const dataList = [];
const propsList = [];
const data = res.data.train_jobs;
data.forEach((runObj, runObjectIndex) => {
const colorIndex = this.curAvlColorIndexArr.length
? this.curAvlColorIndexArr.shift()
: this.defColorCount - 1;
const runNmeColor = CommonProperty.commonColorArr[colorIndex];
runObj.tags.forEach((tagObj) => {
const data = res.data.train_jobs[0];
const runNmeColor = CommonProperty.commonColorArr[0];
data.tags.forEach((tagObj) => {
// Add the tag list
this.multiSelectedTagNames[tagObj] = true;
tempTagList.push({
label: tagObj,
checked: true,
show: true,
});
const sampleIndex = dataList.length;
this.curFilterTagIndexArr.push(sampleIndex);
// Adding Chart Data
dataList.push({
tagName: tagObj,
runNames: [runObj.name],
colors: [runNmeColor],
runId: [runObj.id],
show: false,
updateFlag: false,
dataRemove: false,
fullScreen: false,
sampleIndex: sampleIndex,
domId: 'prDom' + this.DomIdIndex,
charData: {
oriData: [],
charOption: {},
},
zoomData: [null, null],
zoomDataTimer: null,
charObj: null,
});
propsList.push({
tagName: tagObj,
runNames: [runObj.name],
runId: [runObj.id],
colors: [],
});
this.DomIdIndex++;
this.multiSelectedTagNames[tagObj] = true;
tempTagList.push({
label: tagObj,
checked: true,
show: true,
});
const sampleIndex = dataList.length;
this.curFilterTagIndexArr.push(sampleIndex);
// Adding Chart Data
dataList.push({
tagName: tagObj,
runNames: data.name,
colors: runNmeColor,
show: false,
updateFlag: false,
dataRemove: false,
fullScreen: false,
sampleIndex: sampleIndex,
domId: 'prDom' + this.DomIdIndex,
charData: {
oriData: [],
charOption: {},
},
zoomData: [null, null],
zoomDataTimer: null,
charObj: null,
});
propsList.push({
tagName: tagObj,
runNames: data.name,
colors: '',
});
this.DomIdIndex++;
});
this.tagOperateList = tempTagList;
this.tagPropsList = JSON.parse(JSON.stringify(tempTagList));
......@@ -485,15 +472,11 @@ export default {
return;
}
sampleObject.updateFlag = true;
const runCount = sampleObject.runId.length;
if (runCount === 0) {
return;
}
const promiseArr = [];
const params = {
train_id: sampleObject.runId[0],
train_id: this.trainingJobId,
tag: sampleObject.tagName,
};
......@@ -629,48 +612,47 @@ export default {
let returnFlag = false;
const seriesData = [];
const oriData = sampleObject.charData.oriData;
sampleObject.runNames.forEach((runName, runNameIndex) => {
const curBackName = runName + this.backendString;
const dataObj = {
name: runName,
data: [],
type: 'line',
showSymbol: false,
lineStyle: {
color: sampleObject.colors[runNameIndex],
},
};
const dataObjBackend = {
name: curBackName,
data: [],
type: 'line',
smooth: 0,
symbol: 'none',
lineStyle: {
color: sampleObject.colors[runNameIndex],
opacity: 0.2,
},
};
const curOriData = oriData[runNameIndex];
const runName=sampleObject.runNames;
const curBackName = runName + this.backendString;
const dataObj = {
name: runName,
data: [],
type: 'line',
showSymbol: false,
lineStyle: {
color: sampleObject.colors,
},
};
const dataObjBackend = {
name: curBackName,
data: [],
type: 'line',
smooth: 0,
symbol: 'none',
lineStyle: {
color: sampleObject.colors,
opacity: 0.2,
},
};
const curOriData = oriData[0];
if (curOriData) {
if (sampleObject.log) {
dataObj.data = this.formateSmoothData(
curOriData.logData[this.curBenchX],
);
dataObjBackend.data = curOriData.logData[this.curBenchX];
} else {
dataObj.data = this.formateSmoothData(
curOriData.valueData[this.curBenchX],
);
dataObjBackend.data = curOriData.valueData[this.curBenchX];
}
if (curOriData) {
if (sampleObject.log) {
dataObj.data = this.formateSmoothData(
curOriData.logData[this.curBenchX],
);
dataObjBackend.data = curOriData.logData[this.curBenchX];
} else {
returnFlag = true;
dataObj.data = this.formateSmoothData(
curOriData.valueData[this.curBenchX],
);
dataObjBackend.data = curOriData.valueData[this.curBenchX];
}
} else {
returnFlag = true;
}
seriesData.push(dataObj, dataObjBackend);
});
seriesData.push(dataObj, dataObjBackend);
if (returnFlag) {
return;
}
......@@ -884,7 +866,7 @@ export default {
});
strBody +=
`<tr><td style="border-radius:50%;width:15px;height:15px;vertical-align: middle;` +
`margin-right: 5px;background-color:${sampleObject.colors[curIndex]};` +
`margin-right: 5px;background-color:${sampleObject.colors};` +
`display:inline-block;"></td><td>${parma.seriesName}</td>` +
`<td>${that.formateYaxisValue(parma.value[1])}</td>` +
`<td>${that.formateYaxisValue(
......@@ -1292,16 +1274,6 @@ export default {
window.addEventListener('resize', this.resizeCallback, false);
},
/**
* Initialize the color array
*/
initAvlColorArr() {
const length = this.defColorCount;
for (let i = 0; i < length; i++) {
this.curAvlColorIndexArr.push(i);
}
},
/**
* Clear data
......@@ -1368,16 +1340,13 @@ export default {
const tagList = []; // tag list
let dataRemoveFlag = false;
// Obtains the current tag and run list
oriData.forEach((runObj, runIndex) => {
runObj.tags.forEach((tagObj) => {
let sameTagIndex = tagList.indexOf(tagObj);
if (sameTagIndex === -1) {
sameTagIndex = tagList.length;
tagList.push(tagObj);
}
});
oriData.tags.forEach((tagObj) => {
let sameTagIndex = tagList.indexOf(tagObj);
if (sameTagIndex === -1) {
sameTagIndex = tagList.length;
tagList.push(tagObj);
}
});
// Delete the tag that does not exist
const oldTagListLength = this.tagOperateList.length;
for (let i = oldTagListLength - 1; i >= 0; i--) {
......@@ -1419,59 +1388,44 @@ export default {
return false;
}
let dataAddFlag = false;
oriData.forEach((runObj) => {
const colorIndex = this.curAvlColorIndexArr.length
? this.curAvlColorIndexArr.shift()
: this.defColorCount - 1;
const runColor = CommonProperty.commonColorArr[colorIndex];
runObj.tags.forEach((tagObj) => {
let sameTagIndex = -1;
this.tagOperateList.some((tagItem, tagIndex) => {
if (tagItem.label === tagObj) {
sameTagIndex = tagIndex;
return true;
}
});
if (sameTagIndex === -1) {
this.tagOperateList.push({
label: tagObj,
checked: true,
show: false,
});
const sampleIndex = this.originDataArr.length;
dataAddFlag = true;
this.originDataArr.push({
tagName: tagObj,
runNames: [runObj.name],
runId: [runObj.id],
colors: [runColor],
show: false,
updateFlag: false,
dataRemove: false,
fullScreen: false,
sampleIndex: sampleIndex,
domId: 'prDom' + this.DomIdIndex,
charData: {
oriData: [],
charOption: {},
},
zoomData: [null, null],
zoomDataTimer: null,
charObj: null,
});
this.DomIdIndex++;
} else {
const sameSampleObj = this.originDataArr[sameTagIndex];
if (
sameSampleObj &&
sameSampleObj.runNames.indexOf(runObj.name) === -1
) {
sameSampleObj.runNames.push(runObj.name);
sameSampleObj.runId.push(runObj.id);
sameSampleObj.colors.push(runColor);
}
// oriData.forEach((runObj) => {
const runColor = CommonProperty.commonColorArr[0];
oriData.tags.forEach((tagObj) => {
let sameTagIndex = -1;
this.tagOperateList.some((tagItem, tagIndex) => {
if (tagItem.label === tagObj) {
sameTagIndex = tagIndex;
return true;
}
});
if (sameTagIndex === -1) {
this.tagOperateList.push({
label: tagObj,
checked: true,
show: false,
});
const sampleIndex = this.originDataArr.length;
dataAddFlag = true;
this.originDataArr.push({
tagName: tagObj,
runNames: oriData.name,
colors: runColor,
show: false,
updateFlag: false,
dataRemove: false,
fullScreen: false,
sampleIndex: sampleIndex,
domId: 'prDom' + this.DomIdIndex,
charData: {
oriData: [],
charOption: {},
},
zoomData: [null, null],
zoomDataTimer: null,
charObj: null,
});
this.DomIdIndex++;
}
});
return dataAddFlag;
......@@ -1540,7 +1494,7 @@ export default {
this.clearAllData();
return;
}
const data = res.data.train_jobs;
const data = res.data.train_jobs[0];
// Delete the data that does not exist
const tagRemoveFlag = this.removeNonexistentData(data);
......@@ -1561,23 +1515,20 @@ export default {
const tempTagList = [];
const propsList = [];
data.forEach((runObj, runObjectIndex) => {
// Initial chart data
runObj.tags.forEach((tagObj) => {
data.tags.forEach((tagObj) => {
// Check whether the tag with the same name exists
tempTagList.push({
label: tagObj,
checked: true,
show: true,
});
// Add the tag list.
propsList.push({
tagName: tagObj,
runNames: [runObj.name],
runId: [runObj.id],
colors: [],
});
tempTagList.push({
label: tagObj,
checked: true,
show: true,
});
// Add the tag list.
propsList.push({
tagName: tagObj,
runNames: data.name,
colors: '',
});
});
this.tagPropsList = tempTagList;
......@@ -1796,18 +1747,12 @@ export default {
if (this.abort) {
this.curPageArr.forEach((sampleObject) => {
let runCount = sampleObject.runNames.length;
sampleObject.runNames.forEach((runName, runNameIndex) => {
runCount--;
if (runCount === 0) {
this.$nextTick(() => {
// Draw chart
if (!this.compare) {
this.updateOrCreateChar(sampleObject.sampleIndex);
} else {
this.abort = true;
}
});
this.$nextTick(() => {
// Draw chart
if (!this.compare) {
this.updateOrCreateChar(sampleObject.sampleIndex);
} else {
this.abort = true;
}
});
});
......
mindinsight/ui/src/views/train-manage/training-dashboard.vue
浏览文件 @ 461df37b
......@@ -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,
},
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或