Skip to content

M
mindinsight

MindSpore / mindinsight

通知 7
Star 3
Fork 2
M
mindinsight
提交 3780de85 编写于 作者: M mindspore-ci-bot 提交者： Gitee
浏览文件
操作

!54 UI Linkage of lineages: model and dataset(2nd commit) 

Merge pull request !54 from 潘慧/master_ph
上级 4598422c 04934ab5
隐藏空白更改
内联 并排
Showing with 386 addition and 328 deletion
mindinsight/ui/src/assets/css/reset.scss
浏览文件 @ 3780de85
...@@ -156,8 +156,8 @@ body { ...@@ -156,8 +156,8 @@ body {
* Defines the width of the scroll bar and the width of the background, respectively corresponding to the dimensions of the horizontal and vertical scroll bars. * Defines the width of the scroll bar and the width of the background, respectively corresponding to the dimensions of the horizontal and vertical scroll bars.
*/ */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 6px; width: 10px;
height: 6px; height: 10px;
} }
/* /*
......
mindinsight/ui/src/views/train-manage/data-traceback.vue
浏览文件 @ 3780de85
...@@ -28,37 +28,37 @@ limitations under the License. ...@@ -28,37 +28,37 @@ limitations under the License.
{{ $t('modelTraceback.showAllData') }} {{ $t('modelTraceback.showAllData') }}
</el-button> </el-button>
<div v-show="totalSeries&&totalSeries.length&&(!summaryDirList||(summaryDirList&&summaryDirList.length))"> <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>
<br />
</div>
<div class="data-checkbox">
<!-- check box -->
<div class="check-box-div">
<el-checkbox v-model="checkAll"
:indeterminate="isIndeterminate"
class="select-all"
@change="handleCheckAllChange">
{{ $t('scalar.selectAll') }}
</el-checkbox> </el-checkbox>
<br />
</div> </div>
<div class="checkbox-scroll"> <div class="data-checkbox">
<div class="checkbox-group-div"> <!-- check box -->
<el-checkbox v-for="item in noFixedSeries" <div class="check-box-div">
@change="handleCheckedSeriesChange()" <el-checkbox v-model="checkAll"
v-model="item.checked" :indeterminate="isIndeterminate"
:key="item.id"> class="select-all"
{{ item.name }} @change="handleCheckAllChange">
{{ $t('scalar.selectAll') }}
</el-checkbox> </el-checkbox>
</div> </div>
<div class="checkbox-scroll">
<div class="checkbox-group-div">
<el-checkbox v-for="item in noFixedSeries"
@change="handleCheckedSeriesChange()"
v-model="item.checked"
:key="item.id">
{{ item.name }}
</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>
...@@ -80,13 +80,16 @@ limitations under the License. ...@@ -80,13 +80,16 @@ limitations under the License.
:key="key" :key="key"
:prop="key" :prop="key"
:label="table.columnOptions[key].label" :label="table.columnOptions[key].label"
:sortable='sortArray.includes(table.columnOptions[key].label)?"custom":false' :sortable="sortArray.includes(table.columnOptions[key].label)?'custom':false"
:fixed="table.columnOptions[key].label===text?true:false"
min-width="200" min-width="200"
show-overflow-tooltip> show-overflow-tooltip>
<template slot="header" slot-scope="scope"> <template slot="header"
<div class="custom-label" :title="scope.column.label"> slot-scope="scope">
<div class="custom-label"
:title="scope.column.label">
{{scope.column.label}} {{scope.column.label}}
</div> </div>
</template> </template>
<template slot-scope="scope"> <template slot-scope="scope">
<span class="icon-container" <span class="icon-container"
...@@ -125,15 +128,15 @@ limitations under the License. ...@@ -125,15 +128,15 @@ limitations under the License.
<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"
v-show="!summaryDirList||(summaryDirList&&summaryDirList.length)&&!lineagedata.serData"> v-show="!summaryDirList||(summaryDirList&&summaryDirList.length)&&!lineagedata.serData">
{{ $t('public.noData') }} {{ $t('public.noData') }}
</p> </p>
<div v-show="echartNoData&&(lineagedata.serData&&!!lineagedata.serData.length)"> <div v-show="echartNoData&&(lineagedata.serData&&!!lineagedata.serData.length)">
<p class="no-data-text">{{ $t('dataTraceback.noDataFound') }}</p> <p class="no-data-text">{{ $t('dataTraceback.noDataFound') }}</p>
</div> </div>
<div v-show="summaryDirList&&!summaryDirList.length"> <div v-show="summaryDirList&&!summaryDirList.length">
<p class="no-data-text">{{ $t('dataTraceback.noDataFound') }}</p> <p class="no-data-text">{{ $t('dataTraceback.noDataFound') }}</p>
<p class="no-data-text">{{ $t('dataTraceback.noDataTips') }}</p> <p class="no-data-text">{{ $t('dataTraceback.noDataTips') }}</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -315,6 +318,10 @@ export default { ...@@ -315,6 +318,10 @@ export default {
detailsDataTitle: '', detailsDataTitle: '',
detailsDataList: [], detailsDataList: [],
rowName: this.$t('dataTraceback.details'), rowName: this.$t('dataTraceback.details'),
replaceStr: {
metric: 'metric/',
userDefined: 'user_defined/',
},
}; };
}, },
computed: {}, computed: {},
...@@ -328,23 +335,27 @@ export default { ...@@ -328,23 +335,27 @@ export default {
* init * init
*/ */
init() { init() {
this.customizedColumnOptions=this.$store.state.customizedColumnOptions||[]; this.customizedColumnOptions =
this.table.columnOptions=Object.assign(this.table.columnOptions, 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, // Obtain the value of summary_dir from the store,
this.summaryDirList=this.$store.state.summaryDirList; this.summaryDirList = this.$store.state.summaryDirList;
this.selectedBarList=this.$store.state.selectedBarList; this.selectedBarList = this.$store.state.selectedBarList;
if (this.selectedBarList&&this.selectedBarList.length) { if (this.selectedBarList && this.selectedBarList.length) {
this.tableFilter={}; this.tableFilter = {};
} else { } else {
this.tableFilter.lineage_type={in: ['dataset']}; this.tableFilter.lineage_type = {in: ['dataset']};
} }
const params={}; const params = {};
if (this.summaryDirList) { if (this.summaryDirList) {
this.tableFilter.summary_dir={in: this.summaryDirList}; this.tableFilter.summary_dir = {in: this.summaryDirList};
} else { } else {
this.tableFilter.summary_dir=undefined; this.tableFilter.summary_dir = undefined;
} }
params.body=Object.assign({}, this.tableFilter); params.body = Object.assign({}, this.tableFilter);
this.queryLineagesData(params); this.queryLineagesData(params);
}, },
...@@ -353,29 +364,24 @@ export default { ...@@ -353,29 +364,24 @@ export default {
*/ */
initChart() { initChart() {
const parallelAxis = []; const parallelAxis = [];
const selectedBarList=this.$store.state.selectedBarList; const selectedBarList = this.$store.state.selectedBarList;
const data = []; const data = [];
const arrayTemp=[]; const arrayTemp = [];
if (selectedBarList&&selectedBarList.length) { if (selectedBarList && selectedBarList.length) {
selectedBarList.forEach((item)=>{ selectedBarList.forEach((item) => {
const value=this.customizedTypeObject[item]; const value = this.customizedTypeObject[item];
if (value&&value.type=='float') { const obj = {
arrayTemp.push({ name: this.table.columnOptions[item].label,
name: item, id: item,
id: item, checked: true,
type: 'float', };
checked: true, if (value && value.type == 'float') {
}); obj.type = 'float';
} else {
arrayTemp.push({
name: this.table.columnOptions[item].label,
id: item,
checked: true,
});
} }
arrayTemp.push(obj);
}); });
} }
const totalBarArray=arrayTemp.concat(this.checkedSeries); const totalBarArray = arrayTemp.concat(this.checkedSeries);
this.echart.showData.forEach((val, i) => { this.echart.showData.forEach((val, i) => {
const item = { const item = {
lineStyle: { lineStyle: {
...@@ -398,13 +404,13 @@ export default { ...@@ -398,13 +404,13 @@ export default {
content.name === this.shuffleTitle content.name === this.shuffleTitle
) { ) {
obj.scale = true; obj.scale = true;
obj.minInterval=1; obj.minInterval = 1;
this.setColorOfSelectedBar(selectedBarList, obj); this.setColorOfSelectedBar(selectedBarList, obj);
} else if ( } else if (
this.numberTypeIdList.includes(content.id)|| this.numberTypeIdList.includes(content.id) ||
(content.type&&content.type=='float') (content.type && content.type == 'float')
) { ) {
obj.scale=true; obj.scale = true;
this.setColorOfSelectedBar(selectedBarList, obj); this.setColorOfSelectedBar(selectedBarList, obj);
} else { } else {
// String type // String type
...@@ -413,12 +419,11 @@ export default { ...@@ -413,12 +419,11 @@ export default {
show: false, show: false,
}; };
this.setColorOfSelectedBar(selectedBarList, obj); this.setColorOfSelectedBar(selectedBarList, obj);
if (content.id==='dataset_mark') { if (content.id === 'dataset_mark') {
obj.axisLabel={ obj.axisLabel = {
show: false, 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) {
...@@ -438,8 +443,8 @@ export default { ...@@ -438,8 +443,8 @@ export default {
}, },
parallel: { parallel: {
top: 30, top: 30,
left: 80, left: 50,
right: 80, right: 100,
bottom: 12, bottom: 12,
parallelAxisDefault: { parallelAxisDefault: {
areaSelectStyle: { areaSelectStyle: {
...@@ -454,7 +459,8 @@ export default { ...@@ -454,7 +459,8 @@ export default {
series: { series: {
type: 'parallel', type: 'parallel',
lineStyle: { lineStyle: {
width: 2, width: 1,
opacity: 1,
}, },
data: data, data: data,
}, },
...@@ -490,17 +496,17 @@ export default { ...@@ -490,17 +496,17 @@ export default {
}); });
} }
const tempList = this.echart.brushData; const tempList = this.echart.brushData;
const summaryList=[]; const summaryList = [];
tempList.forEach((item)=>{ tempList.forEach((item) => {
summaryList.push(item.summary_dir); summaryList.push(item.summary_dir);
}); });
// The summaryList value could not be saved in the destroy state. // The summaryList value could not be saved in the destroy state.
this.dataCheckedSummary=[]; this.dataCheckedSummary = [];
this.$store.commit('setSummaryDirList', summaryList); this.$store.commit('setSummaryDirList', summaryList);
if (!tempList.length) { if (!tempList.length) {
this.summaryDirList=[]; this.summaryDirList = [];
this.lineagedata.serData=undefined; this.lineagedata.serData = undefined;
document.querySelector('#data-echart').style.display='none'; document.querySelector('#data-echart').style.display = 'none';
} else { } else {
this.echart.showData = this.echart.brushData; this.echart.showData = this.echart.brushData;
this.initChart(); this.initChart();
...@@ -516,21 +522,39 @@ export default { ...@@ -516,21 +522,39 @@ export default {
}, },
/** /**
* Set the color of the model tracing axis. * Set the color of the model tracing axis.
* @param {Array} selectedBarList * @param {Array} selectedBarList
* @param {Object} obj * @param {Object} obj
*/ */
setColorOfSelectedBar(selectedBarList, obj) { setColorOfSelectedBar(selectedBarList, obj) {
if (selectedBarList&&obj.dim<selectedBarList.length) { if (selectedBarList && obj.dim < selectedBarList.length) {
obj.nameTextStyle={ obj.nameTextStyle = {
color: '#00a5a7', color: '#00a5a7',
}; };
obj.axisLabel={ obj.axisLabel = {
show: true, show: true,
textStyle: { textStyle: {
color: '#00a5a7', color: '#00a5a7',
}, },
formatter: function(val) {
if (typeof val !== 'string') {
return val;
}
const strs = val.split('');
let str = '';
if (val.length > 100) {
return val.substring(0, 12) + '...';
} else {
for (let i = 0, s = ''; (s = strs[i++]); ) {
str += s;
if (!(i % 12)) {
str += '\n';
}
}
return str;
}
},
}; };
obj.axisLine={ obj.axisLine = {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#00a5a7', color: '#00a5a7',
...@@ -538,7 +562,7 @@ export default { ...@@ -538,7 +562,7 @@ export default {
}; };
} else { } else {
// Text color // Text color
obj.nameTextStyle={ obj.nameTextStyle = {
color: 'black', color: 'black',
}; };
} }
...@@ -567,22 +591,20 @@ export default { ...@@ -567,22 +591,20 @@ export default {
if (isNaN(value) || !value) { if (isNaN(value) || !value) {
return value; return value;
} else { } else {
if (key === 'accuracy') { if (key === 'learning_rate') {
return this.toFixedFun(value * 100, 2) + '%'; let temp = value.toPrecision(4);
} else if (key === 'learning_rate') {
let temp = value.toPrecision(3);
let row = 0; let row = 0;
while (temp < 1) { while (temp < 1) {
temp = temp * 10; temp = temp * 10;
row += 1; row += 1;
} }
temp = this.toFixedFun(temp, 2); temp = this.toFixedFun(temp, 4);
return `${temp}${row ? `e-${row}` : ''}`; return `${temp}${row ? `e-${row}` : ''}`;
} else if (key === 'model_size') { } else if (key === 'model_size') {
return value + 'MB'; return value + 'MB';
} else { } else {
if (value < 1000) { if (value < 1000) {
return Math.round(value * Math.pow(10, 2)) / Math.pow(10, 2); return Math.round(value * Math.pow(10, 4)) / Math.pow(10, 4);
} else { } else {
const reg = /(?=(\B)(\d{3})+$)/g; const reg = /(?=(\B)(\d{3})+$)/g;
return (value + '').replace(reg, ','); return (value + '').replace(reg, ',');
...@@ -610,17 +632,15 @@ export default { ...@@ -610,17 +632,15 @@ export default {
* @param {Object} scope * @param {Object} scope
*/ */
showDialogData(val, scope) { showDialogData(val, scope) {
if (typeof val!=='string'||val=='{}') { if (typeof val !== 'string' || val == '{}') {
return; return;
} else { } else {
const isJson=this.isJSON(val); const isJson = this.isJSON(val);
if (!isJson) { if (!isJson) {
return; return;
} }
} }
this.rowName = `${scope.column.property}${this.$t( this.rowName = `${scope.column.label}${this.$t('dataTraceback.details')}`;
'dataTraceback.details',
)}`;
this.detailsDialogVisible = true; this.detailsDialogVisible = true;
this.detailsDataTitle = scope.row.summary_dir; this.detailsDataTitle = scope.row.summary_dir;
this.detailsDataList = this.formateJsonString(val); this.detailsDataList = this.formateJsonString(val);
...@@ -666,52 +686,69 @@ export default { ...@@ -666,52 +686,69 @@ export default {
if (!res || !res.data) { if (!res || !res.data) {
return; return;
} }
this.customizedTypeObject=res.data.customized; this.customizedTypeObject = res.data.customized;
const key=Object.keys(this.customizedTypeObject); let keys = Object.keys(this.customizedTypeObject);
if (key.length) { if (keys.length) {
this.sortArray=this.sortArray.concat(key); keys = keys.map((i) => {
if (i.startsWith(this.replaceStr.userDefined)) {
return i.replace(this.replaceStr.userDefined, '[U]');
} else if (i.startsWith(this.replaceStr.metric)) {
return i.replace(this.replaceStr.metric, '[M]');
}
});
this.sortArray = this.sortArray.concat(keys);
} }
// Model source tracing filtering parameters // Model source tracing filtering parameters
this.selectedBarList=this.$store.state.selectedBarList; this.selectedBarList = this.$store.state.selectedBarList;
if ( this.selectedBarList&& this.selectedBarList.length) { if (this.selectedBarList && this.selectedBarList.length) {
const tempList = JSON.parse(JSON.stringify(res.data.object)); const tempList = JSON.parse(JSON.stringify(res.data.object));
const list=[]; const list = [];
const metricKeys={}; const metricKeys = {};
tempList.forEach((item)=>{ tempList.forEach((item) => {
if (item.model_lineage) { if (item.model_lineage) {
const i=JSON.parse(JSON.stringify(item.model_lineage)); const modelData = JSON.parse(
i.model_size=parseFloat(((i.model_size||0)/1024/1024).toFixed(2)); JSON.stringify(item.model_lineage),
const keys=Object.keys(i.metric||{}); );
modelData.model_size = parseFloat(
((modelData.model_size || 0) / 1024 / 1024).toFixed(2),
);
const keys = Object.keys(modelData.metric || {});
if (keys.length) { if (keys.length) {
keys.forEach((key)=>{ keys.forEach((key) => {
if (i.metric[key]||i.metric[key]===0) { if (
const temp='metric/'+key; modelData.metric[key] ||
metricKeys[temp]=key; modelData.metric[key] === 0
i[temp]=i.metric[key]; ) {
const temp = this.replaceStr.metric + key;
metricKeys[temp] = key;
modelData[temp] = modelData.metric[key];
} }
}); });
delete i.metric; delete modelData.metric;
} }
const udkeys=Object.keys(i.user_defined||{}); const udkeys = Object.keys(modelData.user_defined || {});
if (udkeys.length) { if (udkeys.length) {
udkeys.forEach((key)=>{ udkeys.forEach((key) => {
if (i.user_defined[key]||i.user_defined[key]===0) { if (
const temp='user_defined/'+key; modelData.user_defined[key] ||
i[temp]=i.user_defined[key]; modelData.user_defined[key] === 0
) {
const temp = this.replaceStr.userDefined + key;
modelData[temp] = modelData.user_defined[key];
} }
}); });
delete i.user_defined; delete modelData.user_defined;
} }
list.push(i); list.push(modelData);
} }
}); });
this.modelObjectArray=[]; this.modelObjectArray = [];
for (let i=0; i<list.length; i++) { for (let i = 0; i < list.length; i++) {
const modelObject={}; const modelObject = {};
for (let j=0; j<this.selectedBarList.length; j++) { for (let j = 0; j < this.selectedBarList.length; j++) {
const tempObject=list[i]; const tempObject = list[i];
const key=this.selectedBarList[j]; const key = this.selectedBarList[j];
modelObject[key]=tempObject[key]; modelObject[key] = tempObject[key];
} }
this.modelObjectArray.push(modelObject); this.modelObjectArray.push(modelObject);
} }
...@@ -723,7 +760,7 @@ export default { ...@@ -723,7 +760,7 @@ export default {
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) { if (!this.totalSeries.length) {
this.echartNoData=true; this.echartNoData = true;
} }
this.totalSeries.forEach((nodeItem) => { this.totalSeries.forEach((nodeItem) => {
if (this.createType[nodeItem.name]) { if (this.createType[nodeItem.name]) {
...@@ -752,14 +789,14 @@ export default { ...@@ -752,14 +789,14 @@ export default {
this.setEchartValue(); this.setEchartValue();
this.initChart(); this.initChart();
// Total number of pages in the table // Total number of pages in the table
this.pagination.total =res.data.count; this.pagination.total = res.data.count;
// Data encapsulation of the table // Data encapsulation of the table
this.setTableData(); this.setTableData();
if (this.selectedBarList) { if (this.selectedBarList) {
const resultArray=this.hideDataMarkTableData(); const resultArray = this.hideDataMarkTableData();
this.table.column=this.dirPathList.concat( this.table.column = this.dirPathList.concat(
resultArray, resultArray,
this.checkedSeries.map((i)=> i.id), this.checkedSeries.map((i) => i.id),
); );
} else { } else {
this.table.column = this.dirPathList.concat( this.table.column = this.dirPathList.concat(
...@@ -806,15 +843,15 @@ export default { ...@@ -806,15 +843,15 @@ export default {
*/ */
echartShowAllData() { echartShowAllData() {
// The first page is displayed. // The first page is displayed.
this.initOver=false; this.initOver = false;
this.echartNoData=false; this.echartNoData = false;
this.pagination.currentPage = 1; this.pagination.currentPage = 1;
this.$store.commit('setSummaryDirList', undefined); this.$store.commit('setSummaryDirList', undefined);
this.$store.commit('setSelectedBarList', []); this.$store.commit('setSelectedBarList', []);
if (this.parallelEchart) { if (this.parallelEchart) {
this.parallelEchart.clear(); this.parallelEchart.clear();
} }
document.querySelector('#data-echart').style.display='block'; document.querySelector('#data-echart').style.display = 'block';
this.$refs.table.clearSelection(); this.$refs.table.clearSelection();
this.init(); this.init();
this.parallelEchart.resize(); this.parallelEchart.resize();
...@@ -832,10 +869,10 @@ export default { ...@@ -832,10 +869,10 @@ export default {
this.getCheckedSerList(); this.getCheckedSerList();
// Value assignment in the table column // Value assignment in the table column
if (this.selectedBarList) { if (this.selectedBarList) {
const resultArray=this.hideDataMarkTableData(); const resultArray = this.hideDataMarkTableData();
this.table.column=this.dirPathList.concat( this.table.column = this.dirPathList.concat(
resultArray, resultArray,
this.checkedSeries.map((i)=>i.id), this.checkedSeries.map((i) => i.id),
); );
} else { } else {
this.table.column = this.dirPathList.concat( this.table.column = this.dirPathList.concat(
...@@ -852,9 +889,9 @@ export default { ...@@ -852,9 +889,9 @@ export default {
* @return {Array} * @return {Array}
*/ */
hideDataMarkTableData() { hideDataMarkTableData() {
const result=[]; const result = [];
this.selectedBarList.forEach((item)=>{ this.selectedBarList.forEach((item) => {
if ( item !== 'dataset_mark') { if (item !== 'dataset_mark') {
result.push(item); result.push(item);
} }
}); });
...@@ -868,12 +905,11 @@ export default { ...@@ -868,12 +905,11 @@ export default {
this.$forceUpdate(); this.$forceUpdate();
this.getCheckedSerList(); this.getCheckedSerList();
// Value assignment in the table column // Value assignment in the table column
// Value assignment in the table column
if (this.selectedBarList) { if (this.selectedBarList) {
const resultArray=this.hideDataMarkTableData(); const resultArray = this.hideDataMarkTableData();
this.table.column=this.dirPathList.concat( this.table.column = this.dirPathList.concat(
resultArray, resultArray,
this.checkedSeries.map((i)=>i.id), this.checkedSeries.map((i) => i.id),
); );
} else { } else {
this.table.column = this.dirPathList.concat( this.table.column = this.dirPathList.concat(
...@@ -892,7 +928,7 @@ export default { ...@@ -892,7 +928,7 @@ export default {
*/ */
handleSelectionChange(val) { handleSelectionChange(val) {
// summary_dir cannot be stored here.If it is not selected ,it cannot be stroed correctly. // summary_dir cannot be stored here.If it is not selected ,it cannot be stroed correctly.
this.dataCheckedSummary=val; this.dataCheckedSummary = val;
if (val.length) { if (val.length) {
this.echart.showData = val; this.echart.showData = val;
} else { } else {
...@@ -903,10 +939,13 @@ export default { ...@@ -903,10 +939,13 @@ export default {
setEchartValue() { setEchartValue() {
if (this.modelObjectArray.length) { if (this.modelObjectArray.length) {
const list=this.echart.showData; const list = this.echart.showData;
for (let i=0; i<list.length; i++) { for (let i = 0; i < list.length; i++) {
const temp=this.modelObjectArray[i]; const temp = this.modelObjectArray[i];
this.echart.showData[i]=Object.assign(this.echart.showData[i], temp); this.echart.showData[i] = Object.assign(
this.echart.showData[i],
temp,
);
} }
} }
}, },
...@@ -916,12 +955,12 @@ export default { ...@@ -916,12 +955,12 @@ export default {
* @param {Object} data * @param {Object} data
*/ */
tableSortChange(data) { tableSortChange(data) {
const params={}; const params = {};
const tempParam={ const tempParam = {
sorted_name: data.prop, sorted_name: data.prop,
sorted_type: data.order, sorted_type: data.order,
}; };
params.body=Object.assign({}, tempParam, this.tableFilter); params.body = Object.assign({}, tempParam, this.tableFilter);
this.queryLineagesData(params); this.queryLineagesData(params);
}, },
...@@ -1130,9 +1169,9 @@ export default { ...@@ -1130,9 +1169,9 @@ export default {
* Destroy the page * Destroy the page
*/ */
destroyed() { destroyed() {
if (this.dataCheckedSummary&&this.dataCheckedSummary.length) { if (this.dataCheckedSummary && this.dataCheckedSummary.length) {
const summaryDirList=[]; const summaryDirList = [];
this.dataCheckedSummary.forEach((item)=>{ this.dataCheckedSummary.forEach((item) => {
summaryDirList.push(item.summary_dir); summaryDirList.push(item.summary_dir);
}); });
this.$store.commit('setSummaryDirList', summaryDirList); this.$store.commit('setSummaryDirList', summaryDirList);
...@@ -1165,9 +1204,9 @@ export default { ...@@ -1165,9 +1204,9 @@ export default {
img { img {
max-width: 100%; max-width: 100%;
} }
p{ p {
font-size:16px; font-size: 16px;
padding-top:10px padding-top: 10px;
} }
} }
.no-data-text { .no-data-text {
...@@ -1185,7 +1224,7 @@ export default { ...@@ -1185,7 +1224,7 @@ export default {
.data-checkbox-area { .data-checkbox-area {
position: relative; position: relative;
margin: 24px 32px 12px; margin: 24px 32px 12px;
height:62px; height: 62px;
.reset-btn { .reset-btn {
position: absolute; position: absolute;
right: 0px; right: 0px;
...@@ -1239,10 +1278,10 @@ export default { ...@@ -1239,10 +1278,10 @@ export default {
height: calc(60% - 90px); height: calc(60% - 90px);
margin: 2px 32px 0; margin: 2px 32px 0;
position: relative; position: relative;
.custom-label{ .custom-label {
max-width:calc(100% - 25px); max-width: calc(100% - 25px);
padding:0; padding: 0;
vertical-align:middle; vertical-align: middle;
} }
.el-icon-warning { .el-icon-warning {
font-size: 16px; font-size: 16px;
......
mindinsight/ui/src/views/train-manage/model-traceback.vue
浏览文件 @ 3780de85
...@@ -16,18 +16,17 @@ limitations under the License. ...@@ -16,18 +16,17 @@ 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="top-area">
<el-button class="reset-btn custom-btn"
@click="resetChart"
type="primary"
size="mini"
plain
v-if="(!noData && echart.allData.length) ||
(noData && summaryDirList && !summaryDirList.length)">
{{ $t('modelTraceback.showAllData') }}</el-button>
<div class="checkbox" <div class="checkbox"
:style="{'max-height': haveCustomizedParams ? '88px' : '66px',
'min-height': haveCustomizedParams ? '63px' : '42px'}"
v-if="!noData && echart.allData.length && v-if="!noData && echart.allData.length &&
(!summaryDirList ||(summaryDirList && summaryDirList.length))"> (!summaryDirList || (summaryDirList && summaryDirList.length))">
<div class="label-legend"
v-if="haveCustomizedParams">
<div>[U]: {{$t('modelTraceback.userDefined')}}</div>
<div>[M]: {{$t('modelTraceback.metric')}}</div>
</div>
<el-checkbox v-for="item in table.mandatoryColumn" <el-checkbox v-for="item in table.mandatoryColumn"
:key="item" :key="item"
:label="item" :label="item"
...@@ -45,11 +44,21 @@ limitations under the License. ...@@ -45,11 +44,21 @@ limitations under the License.
<el-checkbox v-for="item in table.optionalColumn" <el-checkbox v-for="item in table.optionalColumn"
:key="item" :key="item"
:label="item" :label="item"
:class=" :class="table.optionsNotInCheckbox.includes(item) ? 'notShow' : 'option'">
table.optionsNotInCheckbox.includes(item) ? 'notShow' : 'option' {{ table.columnOptions[item].label }}</el-checkbox>
">{{ table.columnOptions[item].label }}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
<div class="btns">
<el-button class="custom-btn"
@click="resetChart"
type="primary"
size="mini"
plain
v-if="(!noData && echart.allData.length) ||
(noData && summaryDirList && !summaryDirList.length)">
{{ $t('modelTraceback.showAllData') }}</el-button>
</div>
</div> </div>
<div id="echart" <div id="echart"
v-show="!noData"></div> v-show="!noData"></div>
...@@ -71,6 +80,7 @@ limitations under the License. ...@@ -71,6 +80,7 @@ limitations under the License.
:key="key" :key="key"
:prop="key" :prop="key"
:label="table.columnOptions[key].label" :label="table.columnOptions[key].label"
:fixed="table.columnOptions[key].label===text?true:false"
show-overflow-tooltip show-overflow-tooltip
min-width="180" min-width="180"
sortable="custom"> sortable="custom">
...@@ -123,6 +133,7 @@ export default { ...@@ -123,6 +133,7 @@ export default {
return { return {
table: {}, table: {},
summaryDirList: undefined, summaryDirList: undefined,
text: this.$t('modelTraceback.summaryPath'),
checkedSummary: [], checkedSummary: [],
keysOfStringValue: [ keysOfStringValue: [
'summary_dir', 'summary_dir',
...@@ -160,6 +171,11 @@ export default { ...@@ -160,6 +171,11 @@ export default {
}, },
showTable: false, showTable: false,
noData: false, noData: false,
haveCustomizedParams: false,
replaceStr: {
metric: 'metric/',
userDefined: 'user_defined/',
},
}; };
}, },
computed: {}, computed: {},
...@@ -311,51 +327,32 @@ export default { ...@@ -311,51 +327,32 @@ export default {
.then( .then(
(res) => { (res) => {
if (res && res.data && res.data.object) { if (res && res.data && res.data.object) {
const tempList = JSON.parse(JSON.stringify(res.data.object)); const list = this.setDataOfModel(res.data.object);
const list = [];
tempList.forEach((item) => {
if (item.model_lineage) {
item.model_lineage.summary_dir = item.summary_dir;
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;
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);
}
});
if (allData) { if (allData) {
let customized = {}; let customized = {};
if (res.data.customized) { if (res.data.customized) {
customized = JSON.parse(JSON.stringify(res.data.customized)); customized = JSON.parse(JSON.stringify(res.data.customized));
const customizedKeys = Object.keys(customized); const customizedKeys = Object.keys(customized);
if (customizedKeys.length > 0) { if (customizedKeys.length) {
customizedKeys.forEach((i) => { customizedKeys.forEach((i) => {
if (customized[i].type === 'int') { if (customized[i].type === 'int') {
this.keysOfIntValue.push(i); this.keysOfIntValue.push(i);
} else if (customized[i].type === 'str') { } else if (customized[i].type === 'str') {
this.keysOfStringValue.push(i); this.keysOfStringValue.push(i);
} }
if (i.startsWith(this.replaceStr.userDefined)) {
customized[i].label = customized[i].label.replace(
this.replaceStr.userDefined,
'[U]',
);
} else if (i.startsWith(this.replaceStr.metric)) {
customized[i].label = customized[i].label.replace(
this.replaceStr.metric,
'[M]',
);
}
}); });
this.haveCustomizedParams = true;
} }
} }
this.table.columnOptions = Object.assign( this.table.columnOptions = Object.assign(
...@@ -377,6 +374,7 @@ export default { ...@@ -377,6 +374,7 @@ export default {
this.noData = !res.data.object.length; this.noData = !res.data.object.length;
this.echart.showData = this.echart.brushData = this.echart.allData = list; this.echart.showData = this.echart.brushData = this.echart.allData = list;
Object.keys(this.table.columnOptions).forEach((i) => { Object.keys(this.table.columnOptions).forEach((i) => {
this.table.columnOptions[i].selected = true;
const flag = list.some((val) => { const flag = list.some((val) => {
return val[i] || val[i] === 0; return val[i] || val[i] === 0;
}); });
...@@ -415,19 +413,71 @@ export default { ...@@ -415,19 +413,71 @@ export default {
) )
.catch(() => {}); .catch(() => {});
}, },
/**
* Selected data in the table
* @param {Array} data
* @return {Array}
*/
setDataOfModel(data = []) {
const modelLineageList = [];
data.forEach((item) => {
if (item.model_lineage) {
item.model_lineage.summary_dir = item.summary_dir;
const modelData = JSON.parse(JSON.stringify(item.model_lineage));
modelData.model_size = parseFloat(
((modelData.model_size || 0) / 1024 / 1024).toFixed(2),
);
const keys = Object.keys(modelData.metric || {});
if (keys.length) {
keys.forEach((key) => {
if (modelData.metric[key] || modelData.metric[key] === 0) {
const temp = this.replaceStr.metric + key;
modelData[temp] = modelData.metric[key];
}
});
delete modelData.metric;
}
const udkeys = Object.keys(modelData.user_defined || {});
if (udkeys.length) {
udkeys.forEach((key) => {
if (
modelData.user_defined[key] ||
modelData.user_defined[key] === 0
) {
const temp = this.replaceStr.userDefined + key;
modelData[temp] = modelData.user_defined[key];
}
});
delete modelData.user_defined;
}
modelLineageList.push(modelData);
}
});
return modelLineageList;
},
/** /**
* The column options in the table are changed. * The column options in the table are changed.
*/ */
columnSelectionChange() { columnSelectionChange() {
this.table.optionalColumn.forEach((key) => {
this.table.columnOptions[key].selected = false;
});
this.table.selectedColumn.forEach((key) => {
this.table.columnOptions[key].selected = true;
});
const columnCount = const columnCount =
Object.keys(this.table.columnOptions).length - Object.keys(this.table.columnOptions).length -
this.table.optionsNotInCheckbox.length; this.table.optionsNotInCheckbox.length;
this.table.column = this.table.mandatoryColumn this.table.column = Object.keys(this.table.columnOptions).filter((i) => {
.concat(this.table.selectedColumn) return (
.filter((i) => { this.table.columnOptions[i].selected &&
return !this.table.optionsNotInTable.includes(i); !this.table.optionsNotInTable.includes(i)
}); );
});
this.table.selectAll = this.table.selectAll =
this.table.selectedColumn this.table.selectedColumn
...@@ -481,39 +531,7 @@ export default { ...@@ -481,39 +531,7 @@ export default {
.then( .then(
(res) => { (res) => {
if (res && res.data && res.data.object) { if (res && res.data && res.data.object) {
const tempList = JSON.parse(JSON.stringify(res.data.object)); const list = this.setDataOfModel(res.data.object);
const list = [];
tempList.forEach((item) => {
if (item.model_lineage) {
item.model_lineage.summary_dir = item.summary_dir;
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;
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.table.data = list; this.table.data = list;
this.pagination.total = res.data.count || 0; this.pagination.total = res.data.count || 0;
this.pagination.currentPage = 0; this.pagination.currentPage = 0;
...@@ -527,11 +545,12 @@ export default { ...@@ -527,11 +545,12 @@ export default {
* Initializing the Eechart * Initializing the Eechart
*/ */
initChart() { initChart() {
const chartAxis = this.table.mandatoryColumn const chartAxis = Object.keys(this.table.columnOptions).filter((i) => {
.concat(this.table.selectedColumn) return (
.filter((i) => { this.table.columnOptions[i].selected &&
return !this.table.optionsNotInEchart.includes(i); !this.table.optionsNotInEchart.includes(i)
}); );
});
const data = []; const data = [];
this.echart.showData.forEach((i, index) => { this.echart.showData.forEach((i, index) => {
const item = { const item = {
...@@ -566,6 +585,33 @@ export default { ...@@ -566,6 +585,33 @@ export default {
obj.axisLabel = { obj.axisLabel = {
show: false, show: false,
}; };
} else {
obj.axisLabel = {
formatter: function(val) {
const strs = val.split('');
let str = '';
if (val.length > 100) {
return val.substring(0, 12) + '...';
} else {
if (chartAxis.length < 10) {
for (let i = 0, s = ''; (s = strs[i++]); ) {
str += s;
if (!(i % 16)) {
str += '\n';
}
}
} else {
for (let i = 0, s = ''; (s = strs[i++]); ) {
str += s;
if (!(i % 12)) {
str += '\n';
}
}
}
return str;
}
},
};
} }
} }
if (this.keysOfIntValue.includes(key)) { if (this.keysOfIntValue.includes(key)) {
...@@ -583,7 +629,7 @@ export default { ...@@ -583,7 +629,7 @@ export default {
parallel: { parallel: {
top: 25, top: 25,
left: 50, left: 50,
right: 80, right: 100,
bottom: 10, bottom: 10,
parallelAxisDefault: { parallelAxisDefault: {
type: 'value', type: 'value',
...@@ -695,45 +741,14 @@ export default { ...@@ -695,45 +741,14 @@ export default {
RequestService.queryLineagesData(filterParams) RequestService.queryLineagesData(filterParams)
.then( .then(
(res) => { (res) => {
if (res && res.data && res.data.object) { if (
const tempList = JSON.parse(JSON.stringify(res.data.object)); res &&
const list = []; res.data &&
const summaryDirList = []; res.data.object &&
tempList.forEach((item) => { res.data.object.length
if (item.model_lineage) { ) {
item.model_lineage.summary_dir = item.summary_dir; const list = this.setDataOfModel(res.data.object);
const i = JSON.parse(JSON.stringify(item.model_lineage)); const summaryDirList = list.map((i) => i.summary_dir);
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;
i[temp] = i.metric[key];
}
});
delete i.metric;
}
summaryDirList.push(i.summary_dir);
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.$store.commit('setSummaryDirList', summaryDirList); this.$store.commit('setSummaryDirList', summaryDirList);
this.echart.showData = this.echart.brushData = list; this.echart.showData = this.echart.brushData = list;
...@@ -749,8 +764,8 @@ export default { ...@@ -749,8 +764,8 @@ export default {
} else { } else {
this.summaryDirList = []; this.summaryDirList = [];
this.$store.commit('setSummaryDirList', []); this.$store.commit('setSummaryDirList', []);
this.checkedSummary = [];
this.noData = true; this.noData = true;
this.checkedSummary = summaryDirList;
} }
}, },
(error) => {}, (error) => {},
...@@ -783,6 +798,9 @@ export default { ...@@ -783,6 +798,9 @@ export default {
* @param {Boolean} value Select All * @param {Boolean} value Select All
*/ */
checkboxSelectAll(value) { checkboxSelectAll(value) {
this.table.optionalColumn.forEach((key) => {
this.table.columnOptions[key].selected = value;
});
this.table.selectedColumn = value ? this.table.optionalColumn : []; this.table.selectedColumn = value ? this.table.optionalColumn : [];
this.table.column = this.table.mandatoryColumn this.table.column = this.table.mandatoryColumn
.concat(value ? this.table.optionalColumn : []) .concat(value ? this.table.optionalColumn : [])
...@@ -826,22 +844,20 @@ export default { ...@@ -826,22 +844,20 @@ export default {
if (isNaN(value) || !value) { if (isNaN(value) || !value) {
return value; return value;
} else { } else {
if (key === 'accuracy') { if (key === 'learning_rate') {
return this.toFixedFun(value * 100, 2) + '%'; let temp = value.toPrecision(4);
} else if (key === 'learning_rate') {
let temp = value.toPrecision(3);
let row = 0; let row = 0;
while (temp < 1) { while (temp < 1) {
temp = temp * 10; temp = temp * 10;
row += 1; row += 1;
} }
temp = this.toFixedFun(temp, 2); temp = this.toFixedFun(temp, 4);
return `${temp}${row ? `e-${row}` : ''}`; return `${temp}${row ? `e-${row}` : ''}`;
} else if (key === 'model_size') { } else if (key === 'model_size') {
return value + 'MB'; return value + 'MB';
} else { } else {
if (value < 1000) { if (value < 1000) {
return Math.round(value * Math.pow(10, 2)) / Math.pow(10, 2); return Math.round(value * Math.pow(10, 4)) / Math.pow(10, 4);
} else { } else {
const reg = /(?=(\B)(\d{3})+$)/g; const reg = /(?=(\B)(\d{3})+$)/g;
return (value + '').replace(reg, ','); return (value + '').replace(reg, ',');
...@@ -885,28 +901,24 @@ export default { ...@@ -885,28 +901,24 @@ export default {
-webkit-box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5); -webkit-box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5);
box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5); box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5);
overflow: hidden; overflow: hidden;
.custom-btn {
border: 1px solid #00a5a7;
border-radius: 2px;
background-color: white;
color: #00a5a7;
}
.custom-btn:hover {
color: #00a5a7;
background: #e9f7f7;
}
.checkbox-area { .top-area {
margin: 24px 32px 16px; margin: 24px 32px 16px;
position: relative; display: flex;
min-height: 42px; justify-content: flex-end;
max-height: 66px;
.checkbox { .checkbox {
width: calc(100% - 264px);
max-height: 66px;
overflow: auto; overflow: auto;
.mgr30 { flex-grow: 1;
margin-right: 30px; .label-legend {
height: 19px;
margin-bottom: 4px;
div {
display: inline-block;
font-size: 12px;
}
div + div {
margin-left: 30px;
}
} }
.notShow { .notShow {
display: none; display: none;
...@@ -921,11 +933,18 @@ export default { ...@@ -921,11 +933,18 @@ export default {
margin-right: 30px; margin-right: 30px;
} }
} }
.btns {
.reset-btn { margin-left: 20px;
position: absolute; .custom-btn {
right: 0; border: 1px solid #00a5a7;
bottom: 0; border-radius: 2px;
background-color: white;
color: #00a5a7;
}
.custom-btn:hover {
color: #00a5a7;
background: #e9f7f7;
}
} }
} }
#echart { #echart {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或