Skip to content

M
mindinsight

MindSpore / mindinsight

通知 7
Star 3
Fork 2
M
mindinsight

体验新版 GitCode，发现更多精彩内容 >>

提交 0a8162e8 编写于 作者: P ph
浏览文件
操作

tracing association

上级 41693da1
隐藏空白更改
内联 并排
Showing with 748 addition and 299 deletion
mindinsight/ui/src/locales/zh-cn.json
浏览文件 @ 0a8162e8
...@@ -43,13 +43,18 @@ ...@@ -43,13 +43,18 @@
"lossFunc": "损失函数", "lossFunc": "损失函数",
"learningRate": "学习率", "learningRate": "学习率",
"modelSize": "模型大小", "modelSize": "模型大小",
"dataProcess": "数据处理" "dataProcess": "数据处理",
"noDataFound":"暂无满足筛选条件的数据",
"noDataTips":"请点击“显示全量数据”按钮查看全量数据"
}, },
"dataTraceback": { "dataTraceback": {
"details": "详情", "details": "详情",
"key": "KEY", "key": "KEY",
"value": "VALUE", "value": "VALUE",
"dataTraceTips": "该数据涉及合并操作" "dataTraceTips": "该数据涉及合并操作",
"noDataFound":"暂无满足筛选条件的数据",
"noDataTips":"请点击“显示全量数据”按钮查看全量数据"
}, },
"trainingDashboard": { "trainingDashboard": {
"trainingDashboardTitle": "训练看板", "trainingDashboardTitle": "训练看板",
......
mindinsight/ui/src/services/request-service.js
浏览文件 @ 0a8162e8
...@@ -25,19 +25,11 @@ export default { ...@@ -25,19 +25,11 @@ export default {
}); });
}, },
// query dataset lineage // NEW API for model and data source tracing
getDatasetLineage() { queryLineagesData(params) {
return axios({ return axios({
method: 'post', method: 'post',
url: 'v1/mindinsight/datasets/dataset_lineage', url: '/v1/mindinsight/lineagemgr/lineages',
});
},
// query model versions
queryModelVersions(params) {
return axios({
method: 'post',
url: 'v1/mindinsight/models/model_lineage',
data: params.body, data: params.body,
}); });
}, },
......
mindinsight/ui/src/store.js
浏览文件 @ 0a8162e8
...@@ -27,8 +27,9 @@ export default new Vuex.Store({ ...@@ -27,8 +27,9 @@ export default new Vuex.Store({
// Scheduled reload flag // Scheduled reload flag
isTimeReload: localStorage.isTimeReload === 'false' ? false : true, isTimeReload: localStorage.isTimeReload === 'false' ? false : true,
// reload time // reload time
timeReloadValue: localStorage.timeReloadValue ? localStorage.timeReloadValue : 3, timeReloadValue: localStorage.timeReloadValue
? localStorage.timeReloadValue
: 3,
}, },
mutations: { mutations: {
// set cancelTokenArr // set cancelTokenArr
...@@ -46,6 +47,15 @@ export default new Vuex.Store({ ...@@ -46,6 +47,15 @@ export default new Vuex.Store({
setIsReload: (state, val) => { setIsReload: (state, val) => {
state.isReload = val; state.isReload = val;
}, },
setSummaryDirList: (state, val) => {
state.summaryDirList = val;
},
setSelectedBarList: (state, val) => {
state.selectedBarList = val;
},
customizedColumnOptions: (state, val) => {
state.customizedColumnOptions = val;
},
// set isTimeReload // set isTimeReload
setIsTimeReload: (state, val) => { setIsTimeReload: (state, val) => {
state.isTimeReload = val; state.isTimeReload = val;
...@@ -53,7 +63,6 @@ export default new Vuex.Store({ ...@@ -53,7 +63,6 @@ export default new Vuex.Store({
setTimeReloadValue: (state, val) => { setTimeReloadValue: (state, val) => {
state.timeReloadValue = val; state.timeReloadValue = val;
}, },
}, },
actions: {}, actions: {},
}); });
mindinsight/ui/src/views/train-manage/data-traceback.vue
浏览文件 @ 0a8162e8
...@@ -14,27 +14,28 @@ See the License for the specific language governing permissions and ...@@ -14,27 +14,28 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
--> -->
<template> <template>
<div id='cl-data-traceback'> <div id="cl-data-traceback">
<div class="cl-data-right"> <div class="cl-data-right">
<!-- select area --> <!-- select area -->
<div class="data-checkbox-area" <div class="data-checkbox-area">
v-show="totalSeries && totalSeries.length">
<!-- show all data button --> <!-- show all data button -->
<el-button class="reset-btn custom-btn" <el-button class="reset-btn custom-btn"
@click="echartShowAllData" @click="echartShowAllData"
type="primary" type="primary"
size="mini" size="mini"
plain> plain
{{$t('modelTraceback.showAllData')}} v-show="(summaryDirList&&!summaryDirList.length)||(totalSeries&&totalSeries.length)">
{{ $t('modelTraceback.showAllData') }}
</el-button> </el-button>
<div v-show="totalSeries&&totalSeries.length&&(!summaryDirList||(summaryDirList&&summaryDirList.length))">
<div class="fixed-checkbox-group"> <div class="fixed-checkbox-group">
<el-checkbox v-for="item in fixedSeries" <el-checkbox v-for="item in fixedSeries"
:key="item.id" :key="item.id"
:checked="item.checked" :checked="item.checked"
:disabled="true"> :disabled="true">
{{item.name}} {{ item.name }}
</el-checkbox> </el-checkbox>
<br> <br />
</div> </div>
<div class="data-checkbox"> <div class="data-checkbox">
<!-- check box --> <!-- check box -->
...@@ -43,7 +44,7 @@ limitations under the License. ...@@ -43,7 +44,7 @@ limitations under the License.
:indeterminate="isIndeterminate" :indeterminate="isIndeterminate"
class="select-all" class="select-all"
@change="handleCheckAllChange"> @change="handleCheckAllChange">
{{$t('scalar.selectAll')}} {{ $t('scalar.selectAll') }}
</el-checkbox> </el-checkbox>
</div> </div>
<div class="checkbox-scroll"> <div class="checkbox-scroll">
...@@ -52,35 +53,25 @@ limitations under the License. ...@@ -52,35 +53,25 @@ limitations under the License.
@change="handleCheckedSeriesChange()" @change="handleCheckedSeriesChange()"
v-model="item.checked" v-model="item.checked"
:key="item.id"> :key="item.id">
{{item.name}} {{ item.name }}
</el-checkbox> </el-checkbox>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
<!-- echart drawing area --> <!-- echart drawing area -->
<div id="data-echart"></div> <div id="data-echart"></div>
<div v-if="echartNoData"
class="echart-no-data">
<div class="echart-no-data-container">
<img :src="require('@/assets/images/nodata.png')"
alt="" />
<p class='no-data-text'>
{{$t("public.noData")}}
</p>
</div>
</div>
<!-- table area --> <!-- table area -->
<div class="table-container" <div class="table-container"
v-show="lineagedata.serData && !!lineagedata.serData.length"> v-show="!echartNoData&&lineagedata.serData && !!lineagedata.serData.length">
<el-table ref="table" <el-table ref="table"
:data="table.data" :data="table.data"
tooltip-effect="light" tooltip-effect="light"
height="calc(100% - 54px)" height="calc(100% - 54px)"
row-key='summaryDir' row-key="summary_dir"
@selection-change="handleSelectionChange"> @selection-change="handleSelectionChange"
@sort-change="tableSortChange">
<el-table-column type="selection" <el-table-column type="selection"
width="55" width="55"
:reserve-selection="true"> :reserve-selection="true">
...@@ -89,32 +80,33 @@ limitations under the License. ...@@ -89,32 +80,33 @@ limitations under the License.
:key="key" :key="key"
:prop="key" :prop="key"
:label="table.columnOptions[key].label" :label="table.columnOptions[key].label"
min-width='200' :sortable='sortArray.includes(table.columnOptions[key].label)?"custom":false'
min-width="200"
show-overflow-tooltip> show-overflow-tooltip>
<template slot="header" slot-scope="scope">
<div class="custom-label" :title="scope.column.label">
{{scope.column.label}}
</div>
</template>
<template slot-scope="scope"> <template slot-scope="scope">
<span class="icon-container" <span class="icon-container"
v-show='table.columnOptions[key].label===text'> v-show="table.columnOptions[key].label === text">
<el-tooltip effect="light" <el-tooltip effect="light"
:content="$t('dataTraceback.dataTraceTips')" :content="$t('dataTraceback.dataTraceTips')"
placement="top" placement="top"
v-show='scope.row.children'> v-show="scope.row.children">
<i class="el-icon-warning"></i> <i class="el-icon-warning"></i>
</el-tooltip> </el-tooltip>
</span> </span>
<span @click="jumpToTrainDashboard(scope.row[key])" <span @click="jumpToTrainDashboard(scope.row[key])"
v-if='table.columnOptions[key].label===text' v-if="table.columnOptions[key].label === text"
class="href-color"> {{scope.row[key]}} </span> class="href-color">
<span v-else-if="table.columnOptions[key].label===repeatTitle {{ scope.row[key] }}
||table.columnOptions[key].label===shuffleTitle
||table.columnOptions[key].label===batchNode
||scope.row[key]===emptyObject
||!scope.row[key]">
{{scope.row[key]}}
</span> </span>
<span v-else <span v-else
@click="showDialogData(scope.row[key], scope)" @click="showDialogData(scope.row[key], scope)"
class="click-span"> class="click-span">
{{scope.row[key]}} {{formatNumber(key, scope.row[key]) }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
...@@ -126,14 +118,23 @@ limitations under the License. ...@@ -126,14 +118,23 @@ limitations under the License.
:total="pagination.total"> :total="pagination.total">
</el-pagination> </el-pagination>
</div> </div>
<div v-show="(!lineagedata.serData || !lineagedata.serData.length) && initOver" <div v-show="((!lineagedata.serData || !lineagedata.serData.length) && initOver)
||(echartNoData&&(lineagedata.serData&&!!lineagedata.serData.length))"
class="no-data-page"> class="no-data-page">
<div class="no-data-img"> <div class="no-data-img">
<img :src="require('@/assets/images/nodata.png')" <img :src="require('@/assets/images/nodata.png')"
alt="" /> alt="" />
<p class='no-data-text'> <p class="no-data-text"
{{$t("public.noData")}} v-show="!summaryDirList||(summaryDirList&&summaryDirList.length)&&!lineagedata.serData">
{{ $t('public.noData') }}
</p> </p>
<div v-show="echartNoData&&(lineagedata.serData&&!!lineagedata.serData.length)">
<p class="no-data-text">{{ $t('dataTraceback.noDataFound') }}</p>
</div>
<div v-show="summaryDirList&&!summaryDirList.length">
<p class="no-data-text">{{ $t('dataTraceback.noDataFound') }}</p>
<p class="no-data-text">{{ $t('dataTraceback.noDataTips') }}</p>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -142,13 +143,13 @@ limitations under the License. ...@@ -142,13 +143,13 @@ limitations under the License.
width="50%" width="50%"
:close-on-click-modal="false" :close-on-click-modal="false"
class="details-data-list"> class="details-data-list">
<div class="details-data-title">{{detailsDataTitle}}</div> <div class="details-data-title">{{ detailsDataTitle }}</div>
<el-table :data="detailsDataList" <el-table :data="detailsDataList"
row-key="id" row-key="id"
lazy lazy
tooltip-effect="light" tooltip-effect="light"
:load="loadDataListChildren" :load="loadDataListChildren"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"> :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
<el-table-column width="50" /> <el-table-column width="50" />
<el-table-column prop="key" <el-table-column prop="key"
width="180" width="180"
...@@ -158,7 +159,7 @@ limitations under the License. ...@@ -158,7 +159,7 @@ limitations under the License.
show-overflow-tooltip show-overflow-tooltip
label="Value"> label="Value">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.value}} {{ scope.row.value }}
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -173,6 +174,16 @@ export default { ...@@ -173,6 +174,16 @@ export default {
data() { data() {
return { return {
initOver: false, // Page initialization completed. initOver: false, // Page initialization completed.
dataCheckedSummary: [],
selectedBarList: [],
customizedColumnOptions: [],
// Set the type of customized
customizedTypeObject: [],
// Value of the vertical axis query interface brought by model source tracing
modelObjectArray: [],
summaryDirList: undefined,
// Table filter condition
tableFilter: {},
echartNoData: false, echartNoData: false,
// Encapsulate the data returned by the background interface. // Encapsulate the data returned by the background interface.
lineagedata: {}, lineagedata: {},
...@@ -196,7 +207,6 @@ export default { ...@@ -196,7 +207,6 @@ export default {
shuffleTitle: 'Shuffle', shuffleTitle: 'Shuffle',
repeatTitle: 'Repeat', repeatTitle: 'Repeat',
categoryType: 'category', categoryType: 'category',
emptyObject: '{}',
objectType: 'object', objectType: 'object',
type: { type: {
batch: 'BatchDataset', batch: 'BatchDataset',
...@@ -230,13 +240,69 @@ export default { ...@@ -230,13 +240,69 @@ export default {
layout: 'total, prev, pager, next, jumper', layout: 'total, prev, pager, next, jumper',
}, },
// Summary path column // Summary path column
summaryList: ['summaryDir'], dirPathList: ['summary_dir'],
// Options that support sorting
sortArray: [
this.$t('modelTraceback.summaryPath'),
'loss',
this.$t('modelTraceback.network'),
this.$t('modelTraceback.optimizer'),
this.$t('modelTraceback.trainingSampleNum'),
this.$t('modelTraceback.testSampleNum'),
this.$t('modelTraceback.learningRate'),
'epoch',
'steps',
this.$t('modelTraceback.modelSize'),
this.$t('modelTraceback.lossFunc'),
],
numberTypeIdList: [
'train_dataset_count',
'test_dataset_count',
'epoch',
'batch_size',
'model_size',
'loss',
'learning_rate',
],
table: { table: {
columnOptions: { columnOptions: {
summaryDir: { summary_dir: {
label: this.$t('modelTraceback.summaryPath'), label: this.$t('modelTraceback.summaryPath'),
required: true, required: true,
}, },
dataset_mark: {
label: this.$t('modelTraceback.dataProcess'),
},
model_size: {
label: this.$t('modelTraceback.modelSize'),
},
network: {
label: this.$t('modelTraceback.network'),
},
loss: {
label: 'loss',
},
optimizer: {
label: this.$t('modelTraceback.optimizer'),
},
train_dataset_count: {
label: this.$t('modelTraceback.trainingSampleNum'),
},
test_dataset_count: {
label: this.$t('modelTraceback.testSampleNum'),
},
learning_rate: {
label: this.$t('modelTraceback.learningRate'),
},
epoch: {
label: 'epoch',
},
batch_size: {
label: 'steps',
},
loss_function: {
label: this.$t('modelTraceback.lossFunc'),
},
}, },
// All options of the column in the table // All options of the column in the table
column: [], column: [],
...@@ -262,7 +328,24 @@ export default { ...@@ -262,7 +328,24 @@ export default {
* init * init
*/ */
init() { init() {
this.getDatasetLineage(); this.customizedColumnOptions=this.$store.state.customizedColumnOptions||[];
this.table.columnOptions=Object.assign(this.table.columnOptions, this.customizedColumnOptions);
// Obtain the value of summary_dir from the store,
this.summaryDirList=this.$store.state.summaryDirList;
this.selectedBarList=this.$store.state.selectedBarList;
if (this.selectedBarList&&this.selectedBarList.length) {
this.tableFilter={};
} else {
this.tableFilter.lineage_type={in: ['dataset']};
}
const params={};
if (this.summaryDirList) {
this.tableFilter.summary_dir={in: this.summaryDirList};
} else {
this.tableFilter.summary_dir=undefined;
}
params.body=Object.assign({}, this.tableFilter);
this.queryLineagesData(params);
}, },
/* /*
...@@ -270,7 +353,29 @@ export default { ...@@ -270,7 +353,29 @@ export default {
*/ */
initChart() { initChart() {
const parallelAxis = []; const parallelAxis = [];
const selectedBarList=this.$store.state.selectedBarList;
const data = []; const data = [];
const arrayTemp=[];
if (selectedBarList&&selectedBarList.length) {
selectedBarList.forEach((item)=>{
const value=this.customizedTypeObject[item];
if (value&&value.type=='float') {
arrayTemp.push({
name: item,
id: item,
type: 'float',
checked: true,
});
} else {
arrayTemp.push({
name: this.table.columnOptions[item].label,
id: item,
checked: true,
});
}
});
}
const totalBarArray=arrayTemp.concat(this.checkedSeries);
this.echart.showData.forEach((val, i) => { this.echart.showData.forEach((val, i) => {
const item = { const item = {
lineStyle: { lineStyle: {
...@@ -280,25 +385,40 @@ export default { ...@@ -280,25 +385,40 @@ export default {
}, },
value: [], value: [],
}; };
this.checkedSeries.forEach((obj) => { totalBarArray.forEach((obj) => {
item.value.push(val[obj.id]); item.value.push(val[obj.id]);
}); });
data.push(item); data.push(item);
}); });
this.checkedSeries.forEach((content, i) => { totalBarArray.forEach((content, i) => {
const obj = {dim: i, name: content.name, id: content.id}; const obj = {dim: i, name: content.name, id: content.id};
if ( if (
content.name === this.repeatTitle || content.name === this.repeatTitle ||
content.name === this.shuffleTitle content.name === this.shuffleTitle
) { ) {
obj.scale = true; obj.scale = true;
obj.minInterval=1;
this.setColorOfSelectedBar(selectedBarList, obj);
} else if (
this.numberTypeIdList.includes(content.id)||
(content.type&&content.type=='float')
) {
obj.scale=true;
this.setColorOfSelectedBar(selectedBarList, obj);
} else { } else {
// Character string // String type
obj.type = this.categoryType; obj.type = this.categoryType;
obj.axisLabel = { obj.axisLabel = {
show: false, show: false,
}; };
this.setColorOfSelectedBar(selectedBarList, obj);
if (content.id==='dataset_mark') {
obj.axisLabel={
show: false,
};
}
const values = {}; const values = {};
this.echart.showData.forEach((i) => { this.echart.showData.forEach((i) => {
if (i[content.id] || i[content.id] === 0) { if (i[content.id] || i[content.id] === 0) {
...@@ -325,7 +445,6 @@ export default { ...@@ -325,7 +445,6 @@ export default {
areaSelectStyle: { areaSelectStyle: {
width: 40, width: 40,
}, },
minInterval: 1,
tooltip: { tooltip: {
show: true, show: true,
}, },
...@@ -370,18 +489,60 @@ export default { ...@@ -370,18 +489,60 @@ export default {
return i[key] >= range[0] && i[key] <= range[1]; return i[key] >= range[0] && i[key] <= range[1];
}); });
} }
this.echart.showData = this.echart.brushData; const tempList = this.echart.brushData;
this.initChart(); const summaryList=[];
tempList.forEach((item)=>{
this.pagination.currentPage = 1; summaryList.push(item.summary_dir);
this.pagination.total = this.echart.brushData.length; });
this.table.data = this.echart.brushData.slice( // The summaryList value could not be saved in the destroy state.
(this.pagination.currentPage - 1) * this.pagination.pageSize, this.dataCheckedSummary=[];
this.pagination.currentPage * this.pagination.pageSize, this.$store.commit('setSummaryDirList', summaryList);
); if (!tempList.length) {
this.summaryDirList=[];
this.lineagedata.serData=undefined;
document.querySelector('#data-echart').style.display='none';
} else {
this.echart.showData = this.echart.brushData;
this.initChart();
this.pagination.currentPage = 1;
this.pagination.total = this.echart.brushData.length;
this.table.data = this.echart.brushData.slice(
(this.pagination.currentPage - 1) * this.pagination.pageSize,
this.pagination.currentPage * this.pagination.pageSize,
);
}
} }
}); });
}, },
/**
* Set the color of the model tracing axis.
* @param {Array} selectedBarList
* @param {Object} obj
*/
setColorOfSelectedBar(selectedBarList, obj) {
if (selectedBarList&&obj.dim<selectedBarList.length) {
obj.nameTextStyle={
color: '#00a5a7',
};
obj.axisLabel={
show: true,
textStyle: {
color: '#00a5a7',
},
};
obj.axisLine={
show: true,
lineStyle: {
color: '#00a5a7',
},
};
} else {
// Text color
obj.nameTextStyle={
color: 'black',
};
}
},
/** /**
* jump to train dashboard * jump to train dashboard
...@@ -396,20 +557,89 @@ export default { ...@@ -396,20 +557,89 @@ export default {
window.open(routeUrl.href, '_blank'); window.open(routeUrl.href, '_blank');
}, },
/**
* Formatting Data
* @param {String} key
* @param {String} value
* @return {Object}
*/
formatNumber(key, value) {
if (isNaN(value) || !value) {
return value;
} else {
if (key === 'accuracy') {
return this.toFixedFun(value * 100, 2) + '%';
} else if (key === 'learning_rate') {
let temp = value.toPrecision(3);
let row = 0;
while (temp < 1) {
temp = temp * 10;
row += 1;
}
temp = this.toFixedFun(temp, 2);
return `${temp}${row ? `e-${row}` : ''}`;
} else if (key === 'model_size') {
return value + 'MB';
} else {
if (value < 1000) {
return Math.round(value * Math.pow(10, 2)) / Math.pow(10, 2);
} else {
const reg = /(?=(\B)(\d{3})+$)/g;
return (value + '').replace(reg, ',');
}
}
}
},
/**
* Keep the number with n decimal places.
* @param {Number} num
* @param {Number} pow Number of decimal places
* @return {Number}
*/
toFixedFun(num, pow) {
if (isNaN(num) || isNaN(pow) || !num || !pow) {
return num;
}
return Math.round(num * Math.pow(10, pow)) / Math.pow(10, pow);
},
/** /**
* The detailed information is displayed in the dialog box. * The detailed information is displayed in the dialog box.
* @param {String} val * @param {String} val
* @param {Object} scope * @param {Object} scope
*/ */
showDialogData(val, scope) { showDialogData(val, scope) {
if (typeof val!=='string'||val=='{}') {
return;
} else {
const isJson=this.isJSON(val);
if (!isJson) {
return;
}
}
this.rowName = `${scope.column.property}${this.$t( this.rowName = `${scope.column.property}${this.$t(
'dataTraceback.details', 'dataTraceback.details',
)}`; )}`;
this.detailsDialogVisible = true; this.detailsDialogVisible = true;
this.detailsDataTitle = scope.row.summaryDir; this.detailsDataTitle = scope.row.summary_dir;
this.detailsDataList = this.formateJsonString(val); this.detailsDataList = this.formateJsonString(val);
}, },
/**
* Checks whether the value is a JSON character string.
* @param {String} val
* @return {Boolean}
*/
isJSON(val) {
try {
JSON.parse(val);
return true;
} catch (e) {
return false;
}
},
/** /**
* set object value * set object value
* @param {Array} array * @param {Array} array
...@@ -426,20 +656,75 @@ export default { ...@@ -426,20 +656,75 @@ export default {
/** /**
* Method of invoking the interface * Method of invoking the interface
* @param {Object} params
*/ */
getDatasetLineage() { queryLineagesData(params) {
RequestService.getDatasetLineage() RequestService.queryLineagesData(params)
.then( .then(
(res) => { (res) => {
this.initOver = true; this.initOver = true;
if (!res || !res.data) { if (!res || !res.data) {
return; return;
} }
this.customizedTypeObject=res.data.customized;
const key=Object.keys(this.customizedTypeObject);
if (key.length) {
this.sortArray=this.sortArray.concat(key);
}
// Model source tracing filtering parameters
this.selectedBarList=this.$store.state.selectedBarList;
if ( this.selectedBarList&& this.selectedBarList.length) {
const tempList = JSON.parse(JSON.stringify(res.data.object));
const list=[];
const metricKeys={};
tempList.forEach((item)=>{
if (item.model_lineage) {
const i=JSON.parse(JSON.stringify(item.model_lineage));
i.model_size=parseFloat(((i.model_size||0)/1024/1024).toFixed(2));
const keys=Object.keys(i.metric||{});
if (keys.length) {
keys.forEach((key)=>{
if (i.metric[key]||i.metric[key]===0) {
const temp='metric/'+key;
metricKeys[temp]=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;
}
list.push(i);
}
});
this.modelObjectArray=[];
for (let i=0; i<list.length; i++) {
const modelObject={};
for (let j=0; j<this.selectedBarList.length; j++) {
const tempObject=list[i];
const key=this.selectedBarList[j];
modelObject[key]=tempObject[key];
}
this.modelObjectArray.push(modelObject);
}
}
this.fixedSeries = []; this.fixedSeries = [];
this.noFixedSeries = []; this.noFixedSeries = [];
this.checkedSeries = []; this.checkedSeries = [];
this.lineagedata = this.formateOriginData(res.data); this.lineagedata = this.formateOriginData(res.data);
this.totalSeries = this.lineagedata.fullNodeList; this.totalSeries = this.lineagedata.fullNodeList;
if (!this.totalSeries.length) {
this.echartNoData=true;
}
this.totalSeries.forEach((nodeItem) => { this.totalSeries.forEach((nodeItem) => {
if (this.createType[nodeItem.name]) { if (this.createType[nodeItem.name]) {
nodeItem.checked = true; nodeItem.checked = true;
...@@ -463,18 +748,24 @@ export default { ...@@ -463,18 +748,24 @@ export default {
this.echart.showData = this.echart.brushData; this.echart.showData = this.echart.brushData;
if (this.totalSeries.length) { if (this.totalSeries.length) {
document.querySelector('#data-echart').style.display = 'block'; document.querySelector('#data-echart').style.display = 'block';
} else {
this.echartNoData = true;
} }
this.setEchartValue();
this.initChart();
// Total number of pages in the table // Total number of pages in the table
this.pagination.total = this.lineagedata.serData.length; this.pagination.total =res.data.count;
// Data encapsulation of the table // Data encapsulation of the table
this.setTableData(); this.setTableData();
this.table.column = this.summaryList.concat( if (this.selectedBarList) {
this.checkedSeries.map((i) => i.id), const resultArray=this.hideDataMarkTableData();
); this.table.column=this.dirPathList.concat(
this.initChart(); resultArray,
this.checkedSeries.map((i)=> i.id),
);
} else {
this.table.column = this.dirPathList.concat(
this.checkedSeries.map((i) => i.id),
);
}
}, },
(error) => { (error) => {
this.initOver = true; this.initOver = true;
...@@ -515,13 +806,18 @@ export default { ...@@ -515,13 +806,18 @@ export default {
*/ */
echartShowAllData() { echartShowAllData() {
// The first page is displayed. // The first page is displayed.
this.initOver=false;
this.echartNoData=false;
this.pagination.currentPage = 1; this.pagination.currentPage = 1;
this.echart.brushData = this.lineagedata.serData; this.$store.commit('setSummaryDirList', undefined);
this.echart.showData = this.echart.brushData; this.$store.commit('setSelectedBarList', []);
this.initChart(); if (this.parallelEchart) {
this.parallelEchart.clear();
}
document.querySelector('#data-echart').style.display='block';
this.$refs.table.clearSelection(); this.$refs.table.clearSelection();
this.setTableData(); this.init();
this.pagination.total = this.echart.brushData.length; this.parallelEchart.resize();
}, },
/** /**
...@@ -535,13 +831,36 @@ export default { ...@@ -535,13 +831,36 @@ export default {
this.$forceUpdate(); this.$forceUpdate();
this.getCheckedSerList(); this.getCheckedSerList();
// Value assignment in the table column // Value assignment in the table column
this.table.column = this.summaryList.concat( if (this.selectedBarList) {
this.checkedSeries.map((i) => i.id), const resultArray=this.hideDataMarkTableData();
); this.table.column=this.dirPathList.concat(
resultArray,
this.checkedSeries.map((i)=>i.id),
);
} else {
this.table.column = this.dirPathList.concat(
this.checkedSeries.map((i) => i.id),
);
}
this.isIndeterminate = false; this.isIndeterminate = false;
this.initChart(); this.initChart();
}, },
/**
* The table column data is deleted from the data processing result.
* @return {Array}
*/
hideDataMarkTableData() {
const result=[];
this.selectedBarList.forEach((item)=>{
if ( item !== 'dataset_mark') {
result.push(item);
}
});
return result;
},
/** /**
* The column options in the table are changed * The column options in the table are changed
*/ */
...@@ -549,9 +868,19 @@ export default { ...@@ -549,9 +868,19 @@ export default {
this.$forceUpdate(); this.$forceUpdate();
this.getCheckedSerList(); this.getCheckedSerList();
// Value assignment in the table column // Value assignment in the table column
this.table.column = this.summaryList.concat( // Value assignment in the table column
this.checkedSeries.map((i) => i.id), if (this.selectedBarList) {
); const resultArray=this.hideDataMarkTableData();
this.table.column=this.dirPathList.concat(
resultArray,
this.checkedSeries.map((i)=>i.id),
);
} else {
this.table.column = this.dirPathList.concat(
this.checkedSeries.map((i) => i.id),
);
}
this.isIndeterminate = this.isIndeterminate =
this.checkedSeries.length > this.fixedSeries.length && !this.checkAll; this.checkedSeries.length > this.fixedSeries.length && !this.checkAll;
this.initChart(); this.initChart();
...@@ -562,6 +891,8 @@ export default { ...@@ -562,6 +891,8 @@ export default {
* @param {Object} val * @param {Object} val
*/ */
handleSelectionChange(val) { handleSelectionChange(val) {
// summary_dir cannot be stored here.If it is not selected ,it cannot be stroed correctly.
this.dataCheckedSummary=val;
if (val.length) { if (val.length) {
this.echart.showData = val; this.echart.showData = val;
} else { } else {
...@@ -570,6 +901,30 @@ export default { ...@@ -570,6 +901,30 @@ export default {
this.initChart(); this.initChart();
}, },
setEchartValue() {
if (this.modelObjectArray.length) {
const list=this.echart.showData;
for (let i=0; i<list.length; i++) {
const temp=this.modelObjectArray[i];
this.echart.showData[i]=Object.assign(this.echart.showData[i], temp);
}
}
},
/**
* Sort by path parameter
* @param {Object} data
*/
tableSortChange(data) {
const params={};
const tempParam={
sorted_name: data.prop,
sorted_type: data.order,
};
params.body=Object.assign({}, tempParam, this.tableFilter);
this.queryLineagesData(params);
},
/** /**
* Setting Table Data * Setting Table Data
* @param {Number} val * @param {Number} val
...@@ -666,7 +1021,7 @@ export default { ...@@ -666,7 +1021,7 @@ export default {
curDataObj[nodeItem.id] = nodeItem.value; curDataObj[nodeItem.id] = nodeItem.value;
}); });
curDataObj.children = objectData.children; curDataObj.children = objectData.children;
curDataObj.summaryDir = objectData.summary_dir; curDataObj.summary_dir = objectData.summary_dir;
serData.push(curDataObj); serData.push(curDataObj);
}); });
const formateData = { const formateData = {
...@@ -775,6 +1130,13 @@ export default { ...@@ -775,6 +1130,13 @@ export default {
* Destroy the page * Destroy the page
*/ */
destroyed() { destroyed() {
if (this.dataCheckedSummary&&this.dataCheckedSummary.length) {
const summaryDirList=[];
this.dataCheckedSummary.forEach((item)=>{
summaryDirList.push(item.summary_dir);
});
this.$store.commit('setSummaryDirList', summaryDirList);
}
if (this.parallelEchart) { if (this.parallelEchart) {
window.removeEventListener('resize', this.resizeChart, false); window.removeEventListener('resize', this.resizeChart, false);
this.parallelEchart.clear(); this.parallelEchart.clear();
...@@ -792,7 +1154,7 @@ export default { ...@@ -792,7 +1154,7 @@ export default {
.no-data-page { .no-data-page {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-top: 200px; padding-top: 184px;
} }
.no-data-img { .no-data-img {
background: #fff; background: #fff;
...@@ -803,21 +1165,15 @@ export default { ...@@ -803,21 +1165,15 @@ export default {
img { img {
max-width: 100%; max-width: 100%;
} }
p{
font-size:16px;
padding-top:10px
}
} }
.no-data-text { .no-data-text {
font-size: 16px; font-size: 16px;
padding-top: 10px; padding-top: 10px;
} }
.echart-no-data {
width: 100%;
height: 48%;
text-align: center;
display: table;
}
.echart-no-data-container {
display: table-cell;
vertical-align: middle;
}
.cl-data-right { .cl-data-right {
height: 100%; height: 100%;
...@@ -829,6 +1185,7 @@ export default { ...@@ -829,6 +1185,7 @@ export default {
.data-checkbox-area { .data-checkbox-area {
position: relative; position: relative;
margin: 24px 32px 12px; margin: 24px 32px 12px;
height:62px;
.reset-btn { .reset-btn {
position: absolute; position: absolute;
right: 0px; right: 0px;
...@@ -882,6 +1239,11 @@ export default { ...@@ -882,6 +1239,11 @@ export default {
height: calc(60% - 90px); height: calc(60% - 90px);
margin: 2px 32px 0; margin: 2px 32px 0;
position: relative; position: relative;
.custom-label{
max-width:calc(100% - 25px);
padding:0;
vertical-align:middle;
}
.el-icon-warning { .el-icon-warning {
font-size: 16px; font-size: 16px;
} }
......
mindinsight/ui/src/views/train-manage/model-traceback.vue
浏览文件 @ 0a8162e8
...@@ -16,14 +16,18 @@ limitations under the License. ...@@ -16,14 +16,18 @@ limitations under the License.
<template> <template>
<div id="cl-model-traceback"> <div id="cl-model-traceback">
<div class="cl-model-right"> <div class="cl-model-right">
<div class="checkbox-area" <div class="checkbox-area">
v-if="!noData && echart.allData.length">
<el-button class="reset-btn custom-btn" <el-button class="reset-btn custom-btn"
@click="resetChart" @click="resetChart"
type="primary" type="primary"
size="mini" size="mini"
plain>{{ $t('modelTraceback.showAllData') }}</el-button> plain
<div class="checkbox"> v-if="(!noData && echart.allData.length) ||
(noData && summaryDirList && !summaryDirList.length)">
{{ $t('modelTraceback.showAllData') }}</el-button>
<div class="checkbox"
v-if="!noData && echart.allData.length &&
(!summaryDirList ||(summaryDirList && summaryDirList.length))">
<el-checkbox v-for="item in table.mandatoryColumn" <el-checkbox v-for="item in table.mandatoryColumn"
:key="item" :key="item"
:label="item" :label="item"
...@@ -61,7 +65,7 @@ limitations under the License. ...@@ -61,7 +65,7 @@ limitations under the License.
row-key="summary_dir"> row-key="summary_dir">
<el-table-column type="selection" <el-table-column type="selection"
width="55" width="55"
v-if="table.data.length" v-if="table.data && table.data.length"
:reserve-selection="true"></el-table-column> :reserve-selection="true"></el-table-column>
<el-table-column v-for="key in table.column" <el-table-column v-for="key in table.column"
:key="key" :key="key"
...@@ -95,7 +99,13 @@ limitations under the License. ...@@ -95,7 +99,13 @@ limitations under the License.
<div class="no-data-img"> <div class="no-data-img">
<img :src="require('@/assets/images/nodata.png')" <img :src="require('@/assets/images/nodata.png')"
alt /> alt />
<p class="no-data-text">{{ $t('public.noData') }}</p> <p class="no-data-text"
v-show="!summaryDirList || (summaryDirList && summaryDirList.length)">
{{ $t('public.noData') }}</p>
<div v-show="summaryDirList && !summaryDirList.length">
<p class="no-data-text">{{ $t('modelTraceback.noDataFound') }}</p>
<p class="no-data-text">{{ $t('modelTraceback.noDataTips') }}</p>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -111,7 +121,76 @@ export default { ...@@ -111,7 +121,76 @@ export default {
watch: {}, watch: {},
data() { data() {
return { return {
table: { table: {},
summaryDirList: undefined,
checkedSummary: [],
keysOfStringValue: [
'summary_dir',
'network',
'optimizer',
'loss_function',
'train_dataset_path',
'test_dataset_path',
'dataset_mark',
], // All keys whose values are character strings
keysOfIntValue: [
'train_dataset_count',
'test_dataset_count',
'epoch',
'batch_size',
], // All keys whose values are int
echart: {
chart: null,
allData: [],
brushData: [],
showData: [],
},
pagination: {
currentPage: 1,
pageSize: 8,
total: 0,
layout: 'total, prev, pager, next, jumper',
pageChange: {},
},
chartFilter: {}, // chart filter condition
tableFilter: {lineage_type: {in: ['model']}}, // table filter condition
sortInfo: {
sorted_name: 'summary_dir',
sorted_type: null,
},
showTable: false,
noData: false,
};
},
computed: {},
mounted() {
this.$store.commit('setSelectedBarList', []);
this.getStoreList();
this.pagination.pageChange = (page) => {
this.pagination.currentPage = page;
this.queryLineagesData(false);
};
this.$nextTick(() => {
this.init();
});
},
methods: {
getStoreList() {
this.summaryDirList = this.$store.state.summaryDirList;
if (this.summaryDirList) {
this.tableFilter.summary_dir = {
in: this.summaryDirList,
};
} else {
this.tableFilter.summary_dir = undefined;
}
},
/**
* Initialization
*/
init() {
this.table = {
columnOptions: { columnOptions: {
train_dataset_path: { train_dataset_path: {
label: this.$t('modelTraceback.trainSetPath'), label: this.$t('modelTraceback.trainSetPath'),
...@@ -180,61 +259,8 @@ export default { ...@@ -180,61 +259,8 @@ export default {
selectedColumn: [], selectedColumn: [],
selectAll: false, // Whether to select all columns selectAll: false, // Whether to select all columns
indeterminate: false, indeterminate: false,
}, };
keysOfStringValue: [ this.queryLineagesData(true);
'summary_dir',
'network',
'optimizer',
'loss_function',
'train_dataset_path',
'test_dataset_path',
'dataset_mark',
], // All keys whose values are character strings
keysOfIntValue: [
'train_dataset_count',
'test_dataset_count',
'epoch',
'batch_size',
], // All keys whose values are int
echart: {
chart: null,
allData: [],
brushData: [],
showData: [],
},
pagination: {
currentPage: 1,
pageSize: 8,
total: 0,
layout: 'total, prev, pager, next, jumper',
pageChange: {},
},
chartFilter: {}, // chart filter condition
tableFilter: {}, // table filter condition
sortInfo: {
sorted_name: 'summary_dir',
sorted_type: null,
},
showTable: false,
noData: false,
};
},
computed: {},
mounted() {
this.pagination.pageChange = (page) => {
this.pagination.currentPage = page;
this.queryModelVersions(false);
};
this.$nextTick(() => {
this.init();
});
},
methods: {
/**
* Initialization
*/
init() {
this.queryModelVersions(true);
}, },
/** /**
* Column initialization * Column initialization
...@@ -261,83 +287,68 @@ export default { ...@@ -261,83 +287,68 @@ export default {
* Querying All Model Version Information * Querying All Model Version Information
* @param {Boolean} allData Indicates whether to query all data * @param {Boolean} allData Indicates whether to query all data
*/ */
queryModelVersions(allData) { queryLineagesData(allData) {
const params = {}; const params = {
body: {},
};
const tempParam = {
sorted_name: this.sortInfo.sorted_name,
sorted_type: this.sortInfo.sorted_type,
};
if (!allData) { if (!allData) {
const tempParam = { this.summaryDirList = this.$store.state.summaryDirList;
limit: this.pagination.pageSize, this.tableFilter.summary_dir = {
offset: this.pagination.currentPage - 1, in: this.summaryDirList,
sorted_name: this.sortInfo.sorted_name,
sorted_type: this.sortInfo.sorted_type,
}; };
if (Object.keys(this.chartFilter).length > 0) {
params.body = Object.assign({}, tempParam, this.chartFilter); tempParam.limit = this.pagination.pageSize;
} else { tempParam.offset = this.pagination.currentPage - 1;
params.body = tempParam; params.body = Object.assign(params.body, this.chartFilter);
}
} }
RequestService.queryModelVersions(params) params.body = Object.assign(params.body, tempParam, this.tableFilter);
RequestService.queryLineagesData(params)
.then( .then(
(res) => { (res) => {
if (res && res.data && res.data.object) { if (res && res.data && res.data.object) {
const list = JSON.parse(JSON.stringify(res.data.object)); const tempList = JSON.parse(JSON.stringify(res.data.object));
list.forEach((i) => { const list = [];
i.model_size = parseFloat( tempList.forEach((item) => {
((i.model_size || 0) / 1024 / 1024).toFixed(2), if (item.model_lineage) {
); item.model_lineage.summary_dir = item.summary_dir;
const keys = Object.keys(i.metric || {}); const i = JSON.parse(JSON.stringify(item.model_lineage));
if (keys.length) { i.model_size = parseFloat(
keys.forEach((key) => { ((i.model_size || 0) / 1024 / 1024).toFixed(2),
if (i.metric[key] || i.metric[key] === 0) { );
const temp = 'metric/' + key; const keys = Object.keys(i.metric || {});
i[temp] = i.metric[key]; if (keys.length) {
} keys.forEach((key) => {
}); if (i.metric[key] || i.metric[key] === 0) {
delete i.metric; const temp = 'metric/' + key;
} i[temp] = i.metric[key];
const udkeys = Object.keys(i.user_defined || {}); }
if (udkeys.length) { });
udkeys.forEach((key) => { delete i.metric;
if (i.user_defined[key] || i.user_defined[key] === 0) { }
const temp = 'user_defined/' + key; const udkeys = Object.keys(i.user_defined || {});
i[temp] = i.user_defined[key]; if (udkeys.length) {
} udkeys.forEach((key) => {
}); if (i.user_defined[key] || i.user_defined[key] === 0) {
delete i.user_defined; const temp = 'user_defined/' + key;
i[temp] = i.user_defined[key];
}
});
delete i.user_defined;
}
list.push(i);
} }
}); });
if (allData) { if (allData) {
let customized = {};
if (res.data.customized) { if (res.data.customized) {
const customized = JSON.parse( customized = JSON.parse(JSON.stringify(res.data.customized));
JSON.stringify(res.data.customized),
);
const customizedKeys = Object.keys(customized); const customizedKeys = Object.keys(customized);
if (customizedKeys.length > 0) { 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) => { customizedKeys.forEach((i) => {
if (customized[i].type === 'int') { if (customized[i].type === 'int') {
this.keysOfIntValue.push(i); this.keysOfIntValue.push(i);
...@@ -347,10 +358,24 @@ export default { ...@@ -347,10 +358,24 @@ export default {
}); });
} }
} }
this.table.columnOptions = Object.assign(
{
summary_dir: {
label: this.$t('modelTraceback.summaryPath'),
required: true,
},
dataset_mark: {
label: this.$t('modelTraceback.dataProcess'),
required: true,
},
},
customized,
this.table.columnOptions,
);
this.$store.commit('customizedColumnOptions', customized);
this.noData = !!!res.data.object.length; this.noData = !res.data.object.length;
this.echart.allData = list; this.echart.showData = this.echart.brushData = this.echart.allData = list;
this.echart.showData = this.echart.brushData = this.echart.allData;
Object.keys(this.table.columnOptions).forEach((i) => { Object.keys(this.table.columnOptions).forEach((i) => {
const flag = list.some((val) => { const flag = list.some((val) => {
return val[i] || val[i] === 0; return val[i] || val[i] === 0;
...@@ -422,6 +447,7 @@ export default { ...@@ -422,6 +447,7 @@ export default {
selectionChange(list = []) { selectionChange(list = []) {
this.echart.showData = list.length ? list : this.echart.brushData; this.echart.showData = list.length ? list : this.echart.brushData;
this.initChart(); this.initChart();
this.checkedSummary = list;
const summaryDirFilter = []; const summaryDirFilter = [];
this.echart.showData.forEach((i) => { this.echart.showData.forEach((i) => {
summaryDirFilter.push(i.summary_dir); summaryDirFilter.push(i.summary_dir);
...@@ -437,6 +463,7 @@ export default { ...@@ -437,6 +463,7 @@ export default {
sortChange(column) { sortChange(column) {
this.sortInfo.sorted_name = column.prop; this.sortInfo.sorted_name = column.prop;
this.sortInfo.sorted_type = column.order; this.sortInfo.sorted_type = column.order;
this.getStoreList();
const tempParam = { const tempParam = {
limit: this.pagination.pageSize, limit: this.pagination.pageSize,
offset: 0, offset: 0,
...@@ -444,39 +471,47 @@ export default { ...@@ -444,39 +471,47 @@ export default {
sorted_type: this.sortInfo.sorted_type, sorted_type: this.sortInfo.sorted_type,
}; };
const params = {}; const params = {};
if (Object.keys(this.chartFilter).length > 0) { params.body = Object.assign(
params.body = Object.assign({}, tempParam, this.chartFilter); {},
} else { tempParam,
params.body = tempParam; this.tableFilter,
} this.chartFilter || {},
RequestService.queryModelVersions(params) );
RequestService.queryLineagesData(params)
.then( .then(
(res) => { (res) => {
if (res && res.data && res.data.object) { if (res && res.data && res.data.object) {
const list = JSON.parse(JSON.stringify(res.data.object)); const tempList = JSON.parse(JSON.stringify(res.data.object));
list.forEach((i) => { const list = [];
i.model_size = parseFloat(
((i.model_size || 0) / 1024 / 1024).toFixed(2), tempList.forEach((item) => {
); if (item.model_lineage) {
const keys = Object.keys(i.metric || {}); item.model_lineage.summary_dir = item.summary_dir;
if (keys.length) { const i = JSON.parse(JSON.stringify(item.model_lineage));
keys.forEach((key) => { i.model_size = parseFloat(
if (i.metric[key] || i.metric[key] === 0) { ((i.model_size || 0) / 1024 / 1024).toFixed(2),
const temp = 'metric/' + key; );
i[temp] = i.metric[key]; const keys = Object.keys(i.metric || {});
} if (keys.length) {
}); keys.forEach((key) => {
delete i.metric; if (i.metric[key] || i.metric[key] === 0) {
} const temp = 'metric/' + key;
const udkeys = Object.keys(i.user_defined || {}); i[temp] = i.metric[key];
if (udkeys.length) { }
udkeys.forEach((key) => { });
if (i.user_defined[key] || i.user_defined[key] === 0) { delete i.metric;
const temp = 'user_defined/' + key; }
i[temp] = i.user_defined[key]; const udkeys = Object.keys(i.user_defined || {});
} if (udkeys.length) {
}); udkeys.forEach((key) => {
delete i.user_defined; 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;
}
list.push(i);
} }
}); });
this.table.data = list; this.table.data = list;
...@@ -607,6 +642,18 @@ export default { ...@@ -607,6 +642,18 @@ export default {
// select use api // select use api
this.echart.chart.on('axisareaselected', (params) => { this.echart.chart.on('axisareaselected', (params) => {
const key = params.parallelAxisId; const key = params.parallelAxisId;
const list = this.$store.state.selectedBarList || [];
const selectedAxisId = params.parallelAxisId;
if (list.length) {
list.forEach((item, index) => {
if (item == selectedAxisId) {
list.splice(index, 1);
}
});
}
list.push(selectedAxisId);
this.$store.commit('setSelectedBarList', list);
let range = params.intervals[0] || []; let range = params.intervals[0] || [];
const [axisData] = parallelAxis.filter((i) => { const [axisData] = parallelAxis.filter((i) => {
return i.id === key; return i.id === key;
...@@ -645,36 +692,49 @@ export default { ...@@ -645,36 +692,49 @@ export default {
this.tableFilter, this.tableFilter,
this.sortInfo, this.sortInfo,
); );
RequestService.queryModelVersions(filterParams) RequestService.queryLineagesData(filterParams)
.then( .then(
(res) => { (res) => {
if (res && res.data && res.data.object) { if (res && res.data && res.data.object) {
const list = JSON.parse(JSON.stringify(res.data.object)); const tempList = JSON.parse(JSON.stringify(res.data.object));
list.forEach((i) => { const list = [];
i.model_size = parseFloat( const summaryDirList = [];
((i.model_size || 0) / 1024 / 1024).toFixed(2), tempList.forEach((item) => {
); if (item.model_lineage) {
const keys = Object.keys(i.metric || {}); item.model_lineage.summary_dir = item.summary_dir;
if (keys.length) { const i = JSON.parse(JSON.stringify(item.model_lineage));
keys.forEach((key) => { i.model_size = parseFloat(
if (i.metric[key] || i.metric[key] === 0) { ((i.model_size || 0) / 1024 / 1024).toFixed(2),
const temp = 'metric/' + key; );
i[temp] = i.metric[key]; const keys = Object.keys(i.metric || {});
} if (keys.length) {
}); keys.forEach((key) => {
delete i.metric; if (i.metric[key] || i.metric[key] === 0) {
} const temp = 'metric/' + key;
const udkeys = Object.keys(i.user_defined || {}); i[temp] = i.metric[key];
if (udkeys.length) { }
udkeys.forEach((key) => { });
if (i.user_defined[key] || i.user_defined[key] === 0) { delete i.metric;
const temp = 'user_defined/' + key; }
i[temp] = i.user_defined[key]; summaryDirList.push(i.summary_dir);
}
}); const udkeys = Object.keys(i.user_defined || {});
delete 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;
}
list.push(i);
} }
}); });
this.$store.commit('setSummaryDirList', summaryDirList);
this.echart.showData = this.echart.brushData = list; this.echart.showData = this.echart.brushData = list;
this.initChart(); this.initChart();
...@@ -686,6 +746,11 @@ export default { ...@@ -686,6 +746,11 @@ export default {
this.pagination.currentPage = 1; this.pagination.currentPage = 1;
this.pagination.total = this.echart.brushData.length; this.pagination.total = this.echart.brushData.length;
this.$refs.table.clearSelection(); this.$refs.table.clearSelection();
} else {
this.summaryDirList = [];
this.$store.commit('setSummaryDirList', []);
this.noData = true;
this.checkedSummary = summaryDirList;
} }
}, },
(error) => {}, (error) => {},
...@@ -698,13 +763,20 @@ export default { ...@@ -698,13 +763,20 @@ export default {
* Resetting the Eechart * Resetting the Eechart
*/ */
resetChart() { resetChart() {
this.summaryDirList = undefined;
this.$store.commit('setSummaryDirList', undefined);
this.$store.commit('setSelectedBarList', []);
this.noData = false;
this.showTable = false;
this.chartFilter = {}; this.chartFilter = {};
this.tableFilter = {}; this.tableFilter.summary_dir = undefined;
this.pagination.currentPage = 1; this.pagination.currentPage = 1;
this.echart.showData = this.echart.brushData = this.echart.allData; this.echart.allData = [];
this.queryModelVersions(false); if (this.echart.chart) {
this.echart.chart.clear();
}
this.init();
this.$refs.table.clearSelection(); this.$refs.table.clearSelection();
this.initChart();
}, },
/** /**
* Select all columns in the table. * Select all columns in the table.
...@@ -785,6 +857,13 @@ export default { ...@@ -785,6 +857,13 @@ export default {
}, },
}, },
destroyed() { destroyed() {
if (this.checkedSummary.length) {
const tempList = [];
this.checkedSummary.forEach((item) => {
tempList.push(item.summary_dir);
});
this.$store.commit('setSummaryDirList', tempList);
}
if (this.echart.chart) { if (this.echart.chart) {
window.removeEventListener('resize', this.resizeChart, false); window.removeEventListener('resize', this.resizeChart, false);
this.echart.chart.clear(); this.echart.chart.clear();
...@@ -820,6 +899,8 @@ export default { ...@@ -820,6 +899,8 @@ export default {
.checkbox-area { .checkbox-area {
margin: 24px 32px 16px; margin: 24px 32px 16px;
position: relative; position: relative;
min-height: 42px;
max-height: 66px;
.checkbox { .checkbox {
width: calc(100% - 264px); width: calc(100% - 264px);
max-height: 66px; max-height: 66px;
...@@ -848,7 +929,7 @@ export default { ...@@ -848,7 +929,7 @@ export default {
} }
} }
#echart { #echart {
height: 40%; height: 39%;
} }
.table-container { .table-container {
background-color: white; background-color: white;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或