From 010c2193ad945e5174300182ed6f79459acd319e Mon Sep 17 00:00:00 2001 From: ph Date: Thu, 21 May 2020 20:57:09 +0800 Subject: [PATCH] add model trace group display --- mindinsight/ui/src/assets/images/icon1.svg | 9 + mindinsight/ui/src/assets/images/icon10.svg | 9 + mindinsight/ui/src/assets/images/icon2.svg | 9 + mindinsight/ui/src/assets/images/icon3.svg | 9 + mindinsight/ui/src/assets/images/icon4.svg | 9 + mindinsight/ui/src/assets/images/icon5.svg | 9 + mindinsight/ui/src/assets/images/icon6.svg | 9 + mindinsight/ui/src/assets/images/icon7.svg | 9 + mindinsight/ui/src/assets/images/icon8.svg | 9 + mindinsight/ui/src/assets/images/icon9.svg | 9 + .../ui/src/services/request-service.js | 25 +- mindinsight/ui/src/store.js | 4 + .../views/train-manage/model-traceback.vue | 1281 +++++++++++++++-- .../ui/src/views/train-manage/profiler.vue | 36 +- 14 files changed, 1275 insertions(+), 161 deletions(-) create mode 100644 mindinsight/ui/src/assets/images/icon1.svg create mode 100644 mindinsight/ui/src/assets/images/icon10.svg create mode 100644 mindinsight/ui/src/assets/images/icon2.svg create mode 100644 mindinsight/ui/src/assets/images/icon3.svg create mode 100644 mindinsight/ui/src/assets/images/icon4.svg create mode 100644 mindinsight/ui/src/assets/images/icon5.svg create mode 100644 mindinsight/ui/src/assets/images/icon6.svg create mode 100644 mindinsight/ui/src/assets/images/icon7.svg create mode 100644 mindinsight/ui/src/assets/images/icon8.svg create mode 100644 mindinsight/ui/src/assets/images/icon9.svg diff --git a/mindinsight/ui/src/assets/images/icon1.svg b/mindinsight/ui/src/assets/images/icon1.svg new file mode 100644 index 0000000..75067dd --- /dev/null +++ b/mindinsight/ui/src/assets/images/icon1.svg @@ -0,0 +1,9 @@ + + + + 1 + Created with Sketch. + + + + \ No newline at end of file diff --git a/mindinsight/ui/src/assets/images/icon10.svg b/mindinsight/ui/src/assets/images/icon10.svg new file mode 100644 index 0000000..95c6e3a --- /dev/null +++ b/mindinsight/ui/src/assets/images/icon10.svg @@ -0,0 +1,9 @@ + + + + 10 + Created with Sketch. + + + + \ No newline at end of file diff --git a/mindinsight/ui/src/assets/images/icon2.svg b/mindinsight/ui/src/assets/images/icon2.svg new file mode 100644 index 0000000..8cbb1bc --- /dev/null +++ b/mindinsight/ui/src/assets/images/icon2.svg @@ -0,0 +1,9 @@ + + + + 2 + Created with Sketch. + + + + \ No newline at end of file diff --git a/mindinsight/ui/src/assets/images/icon3.svg b/mindinsight/ui/src/assets/images/icon3.svg new file mode 100644 index 0000000..c394181 --- /dev/null +++ b/mindinsight/ui/src/assets/images/icon3.svg @@ -0,0 +1,9 @@ + + + + 3 + Created with Sketch. + + + + \ No newline at end of file diff --git a/mindinsight/ui/src/assets/images/icon4.svg b/mindinsight/ui/src/assets/images/icon4.svg new file mode 100644 index 0000000..6f60d5e --- /dev/null +++ b/mindinsight/ui/src/assets/images/icon4.svg @@ -0,0 +1,9 @@ + + + + 4 + Created with Sketch. + + + + \ No newline at end of file diff --git a/mindinsight/ui/src/assets/images/icon5.svg b/mindinsight/ui/src/assets/images/icon5.svg new file mode 100644 index 0000000..3121b93 --- /dev/null +++ b/mindinsight/ui/src/assets/images/icon5.svg @@ -0,0 +1,9 @@ + + + + 5 + Created with Sketch. + + + + \ No newline at end of file diff --git a/mindinsight/ui/src/assets/images/icon6.svg b/mindinsight/ui/src/assets/images/icon6.svg new file mode 100644 index 0000000..a4fa80a --- /dev/null +++ b/mindinsight/ui/src/assets/images/icon6.svg @@ -0,0 +1,9 @@ + + + + 6 + Created with Sketch. + + + + \ No newline at end of file diff --git a/mindinsight/ui/src/assets/images/icon7.svg b/mindinsight/ui/src/assets/images/icon7.svg new file mode 100644 index 0000000..b2c0d1d --- /dev/null +++ b/mindinsight/ui/src/assets/images/icon7.svg @@ -0,0 +1,9 @@ + + + + 7 + Created with Sketch. + + + + \ No newline at end of file diff --git a/mindinsight/ui/src/assets/images/icon8.svg b/mindinsight/ui/src/assets/images/icon8.svg new file mode 100644 index 0000000..6656421 --- /dev/null +++ b/mindinsight/ui/src/assets/images/icon8.svg @@ -0,0 +1,9 @@ + + + + 8 + Created with Sketch. + + + + \ No newline at end of file diff --git a/mindinsight/ui/src/assets/images/icon9.svg b/mindinsight/ui/src/assets/images/icon9.svg new file mode 100644 index 0000000..11eaa9f --- /dev/null +++ b/mindinsight/ui/src/assets/images/icon9.svg @@ -0,0 +1,9 @@ + + + + 9 + Created with Sketch. + + + + \ No newline at end of file diff --git a/mindinsight/ui/src/services/request-service.js b/mindinsight/ui/src/services/request-service.js index af4ee81..7e2a7be 100644 --- a/mindinsight/ui/src/services/request-service.js +++ b/mindinsight/ui/src/services/request-service.js @@ -37,7 +37,7 @@ export default { putLineagesData(params) { return axios({ method: 'put', - url: '/v1/mindinsight/lineagemgr/lineages?train_id='+params.train_id, + url: '/v1/mindinsight/lineagemgr/lineages?train_id=' + params.train_id, data: params.body, }); }, @@ -125,15 +125,15 @@ export default { // query metedata getSummarySample(params) { - const trainIdsStr=params.train_id; - const trainIdsArr=trainIdsStr.split('&'); - let requestStr=''; - trainIdsArr.forEach((item)=>{ + const trainIdsStr = params.train_id; + const trainIdsArr = trainIdsStr.split('&'); + let requestStr = ''; + trainIdsArr.forEach((item) => { if (item) { - requestStr+=`train_id=${encodeURIComponent(item)}&`; + requestStr += `train_id=${encodeURIComponent(item)}&`; } }); - requestStr+=`tag=${params.tag}`; + requestStr += `tag=${params.tag}`; return axios({ method: 'get', url: `v1/mindinsight/datavisual/scalars?${requestStr}`, @@ -170,15 +170,16 @@ export default { getProfilerDeviceData(params) { return axios({ method: 'get', - url: '/v1/mindinsight/profiler_device', + url: '/v1/mindinsight/profile/devices', params: params, }); }, - getProfilerOpTypeList(params) { + getProfilerOpData(params) { return axios({ - method: 'get', - url: '/v1/mindinsight/profiler_device', - params: params, + method: 'post', + url: '/v1/mindinsight/profile/ops/search', + params: params.params, + data: params.body, }); }, }; diff --git a/mindinsight/ui/src/store.js b/mindinsight/ui/src/store.js index e65da8a..c503c30 100644 --- a/mindinsight/ui/src/store.js +++ b/mindinsight/ui/src/store.js @@ -55,6 +55,10 @@ export default new Vuex.Store({ setSelectedBarList: (state, val) => { state.selectedBarList = val; }, + // hide list of model traceback + setHidenDirChecked: (state, val) => { + state.hidenDirChecked = val; + }, customizedColumnOptions: (state, val) => { state.customizedColumnOptions = val; }, diff --git a/mindinsight/ui/src/views/train-manage/model-traceback.vue b/mindinsight/ui/src/views/train-manage/model-traceback.vue index 72ab89c..f7953dd 100644 --- a/mindinsight/ui/src/views/train-manage/model-traceback.vue +++ b/mindinsight/ui/src/views/train-manage/model-traceback.vue @@ -17,36 +17,63 @@ limitations under the License.
-
-
-
[U]: {{$t('modelTraceback.userDefined')}}
-
[M]: {{$t('modelTraceback.metric')}}
+
+
+ +
{{$t('modelTraceback.displayColumn')}}
+
+ +
+
+ +
+ + {{$t('public.selectAll')}} + + + + {{$t('public.deselectAll')}} + +
+ + + + + +
+
+
[U]: {{$t('modelTraceback.userDefined')}}
+
[M]: {{$t('modelTraceback.metric')}}
+
- - {{ table.columnOptions[item].label }} -
- {{ $t('scalar.selectAll') }} - - - {{ table.columnOptions[item].label }} -
{{ $t('modelTraceback.showAllData') }}
+ v-show="!noData&&showEchartPic">
+
+
+
+ {{$t('modelTraceback.hide')}} + {{$t('modelTraceback.unhide')}} +
- - + + + + + + + + + + + + + + + + + + + + + + + + + + + {{ formatNumber(key, scope.row[key]) }} + + + + + + + + - +
+
+ {{$t('modelTraceback.totalHide').replace(`{n}`,(recordsNumber-showNumber))}} +
+ + +
+
@@ -114,7 +318,11 @@ limitations under the License. {{ $t('public.noData') }}

{{ $t('modelTraceback.noDataFound') }}

-

{{ $t('modelTraceback.noDataTips') }}

+

+ {{ $t('modelTraceback.click') }} + {{ $t('modelTraceback.showAllDataBtn') }} + {{ $t('modelTraceback.viewAllData') }} +

@@ -131,6 +339,72 @@ export default { watch: {}, data() { return { + iconValue: 0, + imageList: [ + { + number: 1, + iconAdd: require('@/assets/images/icon1.svg'), + }, + { + number: 2, + iconAdd: require('@/assets/images/icon2.svg'), + }, + { + number: 3, + iconAdd: require('@/assets/images/icon3.svg'), + }, + { + number: 4, + iconAdd: require('@/assets/images/icon4.svg'), + }, + { + number: 5, + iconAdd: require('@/assets/images/icon5.svg'), + }, + { + number: 6, + iconAdd: require('@/assets/images/icon6.svg'), + }, + { + number: 7, + iconAdd: require('@/assets/images/icon7.svg'), + }, + { + number: 8, + iconAdd: require('@/assets/images/icon8.svg'), + }, + { + number: 9, + iconAdd: require('@/assets/images/icon9.svg'), + }, + { + number: 10, + iconAdd: require('@/assets/images/icon10.svg'), + }, + ], + // Select all + selectCheckAll: true, + // Number of data records returned by the interface. + recordsNumber: 0, + showNumber: 0, + showEchartPic: true, + hideRecord: false, + hidenDirChecked: [], + beforeEditValue: '', + keyWord: '', + basearr: [], + labelObj: {metric: '', userDefined: ''}, + userOptions: [], + metricOptions: [], + hyperOptions: [], + otherTypeOptions: [], + checkOptions: [], + selectArrayValue: [], + // metric list + metricList: [], + userDefinedList: [], + hyperList: [], + summaryList: [], table: {}, summaryDirList: undefined, text: this.$t('modelTraceback.summaryPath'), @@ -180,6 +454,7 @@ export default { computed: {}, mounted() { document.title = this.$t('summaryManage.modelTraceback') + '-MindInsight'; + document.addEventListener('click', this.blurFloat, true); this.$store.commit('setSelectedBarList', []); this.getStoreList(); this.pagination.pageChange = (page) => { @@ -191,6 +466,280 @@ export default { }); }, methods: { + blurFloat(event) { + const domArr = document.querySelectorAll('.icon-dialog'); + const isActiveDom = event.path.some((item) => { + return item.className === 'icon-dialog'; + }); + if (!isActiveDom) { + domArr.forEach((item) => { + item.style.display = 'none'; + }); + } + }, + + /** + * Display of the icon dialog box + * @param {Object} row + */ + showAllIcon(row) { + this.iconValue = 0; + if (row.showIcon) { + row.showIcon = false; + const classArr = document.querySelectorAll('.icon-border'); + + classArr.forEach((item) => { + item.classList.remove('icon-border'); + }); + return; + } + row.showIcon = true; + const e = window.event; + document.getElementById('icon-dialog').style.top = e.clientY + 'px'; + }, + + /** + * icon value change + * @param {Object} row + * @param {Number} num + * @param {Object} event + */ + iconValueChange(row, num, event) { + const classWrap = event.path.find((item) => { + return item.className === 'icon-dialog'; + }); + const classArr = classWrap.querySelectorAll('.icon-border'); + classArr.forEach((item) => { + item.classList.remove('icon-border'); + }); + const htmDom = event.path.find((item) => { + return item.nodeName === 'DIV'; + }); + htmDom.classList.add('icon-border'); + this.iconValue = num; + }, + /** + * Save the modification of the icon. + * @param {Object} row + */ + iconChangeSave(row) { + row.showIcon = false; + if (row.tag == this.iconValue || this.iconValue == 0) { + return; + } + row.tag = this.iconValue; + const id = row.summary_dir; + document.getElementById(id).src = require('@/assets/images/icon' + + this.iconValue + + '.svg'); + const params = { + train_id: row.summary_dir, + body: { + tag: row.tag, + }, + }; + this.putChangeToLineagesData(params); + }, + // clear icon + clearIcon(row) { + row.showIcon = false; + this.iconValue = 0; + row.tag = 0; + const params = { + train_id: row.summary_dir, + body: { + tag: row.tag, + }, + }; + this.putChangeToLineagesData(params); + }, + /** + * cancel save + * @param {Object} row + */ + cancelChangeIcon(row) { + const classArr = document.querySelectorAll('.icon-border'); + classArr.forEach((item) => { + item.classList.remove('icon-border'); + }); + row.showIcon = false; + }, + + /** + * Select all + */ + allSelect() { + if (this.selectCheckAll) { + return; + } + this.selectArrayValue = []; + this.checkOptions.forEach((item) => { + item.options.forEach((option) => { + this.selectArrayValue.push(option.label); + }); + }); + this.selectCheckAll = !this.selectCheckAll; + let allList = []; + const listA = [this.$t('modelTraceback.summaryPath')]; + allList = this.selectArrayValue.concat(listA); + // Set selected of the column data in the table to false; + Object.keys(this.table.columnOptions).filter((i) => { + this.table.columnOptions[i].selected = false; + }); + allList.forEach((item) => { + Object.keys(this.table.columnOptions).filter((i) => { + const labelValue = this.table.columnOptions[i].label; + if (labelValue == item) { + this.table.columnOptions[i].selected = true; + } + }); + }); + this.initChart(); + this.initColumm(); + this.$nextTick(() => { + this.$refs.table.doLayout(); + }); + }, + + /** + * deselect all + */ + deselectAll() { + this.selectArrayValue = []; + this.checkOptions.forEach((item) => { + item.options.forEach((option) => { + if (option.disabled) { + this.selectArrayValue.push(option.label); + } + }); + }); + this.selectCheckAll = false; + let allList = []; + const listA = [this.$t('modelTraceback.summaryPath')]; + allList = this.selectArrayValue.concat(listA); + // Set selected to false for these columns in the table. + Object.keys(this.table.columnOptions).filter((i) => { + this.table.columnOptions[i].selected = false; + }); + allList.forEach((item) => { + Object.keys(this.table.columnOptions).filter((i) => { + const labelValue = this.table.columnOptions[i].label; + if (labelValue == item) { + this.table.columnOptions[i].selected = true; + } + }); + }); + this.initChart(); + this.initColumm(); + }, + /** + * Edit remarks + * @param {Object} row + */ + editRemarks(row) { + row.editShow = false; + row.isError = false; + this.beforeEditValue = row.remark; + }, + + /** + * Save remarks + * @param {Object} row + */ + saveRemarksValue(row) { + const tagValidation = new RegExp('^[a-zA-Z0-9\u4e00-\u9fa5_.-]{1,128}$'); + const result = row.remark.length ? tagValidation.test(row.remark) : true; + if (result) { + row.isError = false; + row.editShow = true; + const params = { + train_id: row.summary_dir, + body: { + remark: row.remark, + }, + }; + this.putChangeToLineagesData(params); + } else { + row.isError = true; + } + }, + + /** + * Cancel save editing + * @param {Object} row + */ + cancelRemarksValue(row) { + row.editShow = true; + row.remark = this.beforeEditValue; + row.isError = false; + }, + + /** + *After the remark or tag is modified, invoke the interface and save the modification. + * @param {Object} params + */ + putChangeToLineagesData(params) { + RequestService.putLineagesData(params) + .then( + (res) => { + if (res) { + this.$message.success(this.$t('modelTraceback.changeSuccess')); + } + }, + (error) => {}, + ) + .catch(() => {}); + }, + + selectinputFocus() { + this.keyWord = ''; + this.checkOptions = this.basearr; + }, + /** + * Input search filtering in the select module. + */ + myfilter() { + const queryString = this.keyWord; + const restaurants = this.basearr; + const results = queryString + ? this.createFilter(queryString, restaurants) + : restaurants; + this.checkOptions = results; + }, + + /** + *Input search filtering in the select module. + * @param {String} queryString + * @param {Array} restaurants + * @return {Array} + */ + createFilter(queryString, restaurants) { + const list = []; + restaurants.forEach((item) => { + const object = {}; + const options = []; + if (item.options) { + item.options.forEach((item) => { + if ( + item.label.toLowerCase().indexOf(queryString.toLowerCase()) >= 0 + ) { + const tempObj = {}; + tempObj.label = item.label; + tempObj.value = item.value; + tempObj.disabled = item.disabled; + options.push(tempObj); + } + }); + } + if (options.length > 0) { + object.label = item.label; + object.options = options; + list.push(object); + } + }); + return list; + }, + getStoreList() { this.summaryDirList = this.$store.state.summaryDirList; if (this.summaryDirList) { @@ -261,10 +810,11 @@ export default { required: false, }, }, // All options of the column in the table - column: [], // Table Column + otherColumn: [], // Table Column mandatoryColumn: [], // Mandatory Table Column optionalColumn: [], // Optional Table Column data: [], + // no checked list optionsNotInCheckbox: [ 'summary_dir', 'train_dataset_path', @@ -281,12 +831,33 @@ export default { indeterminate: false, }; this.keysOfMixed = []; + + this.userOptions = []; + this.metricOptions = []; + // metric list + this.metricList = []; + // User-defined list + this.userDefinedList = []; + // hyper list + this.hyperList = []; + this.summaryList = []; + this.hyperOptions = []; + this.otherTypeOptions = []; + this.checkOptions = []; + this.selectArrayValue = []; + // Obtain the hidden summary_dir list after initialization. + this.hidenDirChecked = this.$store.state.hidenDirChecked || []; this.queryLineagesData(true); }, /** * Column initialization */ initColumm() { + this.metricList = []; + this.userDefinedList = []; + // hyper list + this.hyperList = []; + this.summaryList = []; this.table.mandatoryColumn = Object.keys(this.table.columnOptions).filter( (i) => { return this.table.columnOptions[i].required; @@ -297,12 +868,44 @@ export default { return !this.table.columnOptions[i].required; }, ); - this.table.column = Object.keys(this.table.columnOptions).filter((i) => { - return !this.table.optionsNotInTable.includes(i); + const columnList = Object.keys(this.table.columnOptions).filter((i) => { + return ( + !this.table.optionsNotInTable.includes(i) && + this.table.columnOptions[i].selected + ); + }); + const metricArray = []; + const userDefinedArray = []; + const columnArray = []; + const hyperArray = []; + columnList.forEach((item) => { + if (item.indexOf('metric/') == 0) { + metricArray.push(item); + } else if (item.indexOf('user_defined/') == 0) { + userDefinedArray.push(item); + } else if ( + item == 'epoch' || + item == 'batch_size' || + item == 'learning_rate' + ) { + hyperArray.push(item); + } else { + columnArray.push(item); + } }); + this.showTable = true; + this.table.otherColumn = columnArray; + this.metricList = metricArray; + this.userDefinedList = userDefinedArray; + // hyper list + this.hyperList = hyperArray; + this.table.selectedColumn = this.table.optionalColumn; this.table.selectAll = true; this.showTable = true; + this.$nextTick(() => { + this.$refs.table.doLayout(); + }); }, /** * Querying All Model Version Information @@ -355,20 +958,121 @@ export default { this.keysOfStringValue.push(i); } if (i.startsWith(this.replaceStr.userDefined)) { + this.labelObj.userDefined = 'userDefined'; customized[i].label = customized[i].label.replace( this.replaceStr.userDefined, '[U]', ); + const userDefinedObject = {value: '', label: ''}; + userDefinedObject.value = customized[i].label; + userDefinedObject.label = customized[i].label; + this.userOptions.push(userDefinedObject); } else if (i.startsWith(this.replaceStr.metric)) { customized[i].label = customized[i].label.replace( this.replaceStr.metric, '[M]', ); + this.labelObj.metric = 'metric'; + const metricObject = {value: '', label: ''}; + metricObject.value = customized[i].label; + metricObject.label = customized[i].label; + metricObject.disabled = true; + this.metricOptions.push(metricObject); } }); this.haveCustomizedParams = true; } + this.checkOptions = [ + { + label: '', + options: [ + { + value: this.$t('modelTraceback.dataProcess'), + label: this.$t('modelTraceback.dataProcess'), + disabled: true, + }, + ], + }, + ]; + this.basearr = [ + { + label: '', + options: [ + { + value: this.$t('modelTraceback.dataProcess'), + label: this.$t('modelTraceback.dataProcess'), + disabled: true, + }, + ], + }, + ]; + if (this.labelObj.metric) { + const metricTemp = { + label: 'Metric', + options: this.metricOptions, + }; + this.checkOptions.push(metricTemp); + this.basearr.push(metricTemp); + } + if (this.labelObj.userDefined) { + const userTemp = { + label: 'UserDefined', + options: this.userOptions, + }; + this.checkOptions.push(userTemp); + this.basearr.push(userTemp); + } + Object.keys(this.table.columnOptions).forEach((item) => { + if ( + item !== 'epoch' && + item !== 'learning_rate' && + item !== 'batch_size' + ) { + const index = this.table.optionsNotInCheckbox.indexOf( + item, + ); + if (index < 0) { + const otherType = {value: '', label: ''}; + otherType.value = this.table.columnOptions[item].label; + otherType.label = this.table.columnOptions[item].label; + if ( + otherType.value === 'loss' || + otherType.value === '网络' || + otherType.value === '优化器' + ) { + otherType.disabled = true; + } + this.otherTypeOptions.push(otherType); + } + } else { + const hyperObject = {value: '', label: ''}; + hyperObject.value = this.table.columnOptions[item].label; + hyperObject.label = this.table.columnOptions[item].label; + this.hyperOptions.push(hyperObject); + } + }); + if (this.hyperOptions.length) { + const hyperTemp = { + label: this.$t('modelTraceback.hyperLabel'), + options: this.hyperOptions, + }; + this.checkOptions.push(hyperTemp); + this.basearr.push(hyperTemp); + } + if (this.otherTypeOptions.length) { + const otherTemp = { + label: this.$t('modelTraceback.otherLabel'), + options: this.otherTypeOptions, + }; + this.checkOptions.push(otherTemp); + this.basearr.push(otherTemp); + } } + this.checkOptions.forEach((item) => { + item.options.forEach((option) => { + this.selectArrayValue.push(option.label); + }); + }); this.table.columnOptions = Object.assign( { summary_dir: { @@ -386,7 +1090,28 @@ export default { this.$store.commit('customizedColumnOptions', customized); this.noData = !res.data.object.length; - this.echart.showData = this.echart.brushData = this.echart.allData = list; + this.showEchartPic = !!res.data.object.length; + if (this.hidenDirChecked.length) { + const tempEchartData = this.setDataOfModel(res.data.object); + this.hidenDirChecked.forEach((dir) => { + tempEchartData.forEach((item, index) => { + if (item.summary_dir == dir) { + tempEchartData.splice(index, 1); + } + }); + }); + if (tempEchartData.length == 0) { + this.showEchartPic = false; + } else { + this.showEchartPic = true; + this.echart.allData = tempEchartData; + this.echart.brushData = tempEchartData; + } + } else { + this.echart.allData = list; + this.echart.brushData = list; + } + this.echart.showData = this.echart.brushData; Object.keys(this.table.columnOptions).forEach((i) => { this.table.columnOptions[i].selected = true; const flag = list.some((val) => { @@ -411,17 +1136,46 @@ export default { }); this.initColumm(); this.initChart(); + const tempList = list.slice(0, this.pagination.pageSize); + this.recordsNumber = tempList.length; + if (this.hidenDirChecked.length) { + this.hidenDirChecked.forEach((dir) => { + tempList.forEach((item, index) => { + if (item.summary_dir == dir) { + tempList.splice(index, 1); + } + }); + }); + } + this.showNumber = tempList.length; + this.table.data = tempList; + } else { + const tempList = list.slice(0, this.pagination.pageSize); + this.recordsNumber = tempList.length; + this.hidenDirChecked = this.$store.state.hidenDirChecked || []; + if (this.hidenDirChecked.length) { + this.hidenDirChecked.forEach((dir) => { + tempList.forEach((item, index) => { + if (item.summary_dir === dir) { + tempList.splice(index, 1); + } + }); + }); + } + this.showNumber = tempList.length; + this.table.data = tempList; } - this.table.data = list.slice(0, this.pagination.pageSize); this.pagination.total = res.data.count || 0; } else { this.noData = allData; + this.showEchartPic = !allData; } }, (error) => { if (allData) { this.noData = allData; + this.showEchartPic = !allData; } }, ) @@ -437,7 +1191,17 @@ export default { const modelLineageList = []; data.forEach((item) => { if (item.model_lineage) { + item.model_lineage.editShow = true; + item.model_lineage.isError = false; item.model_lineage.summary_dir = item.summary_dir; + item.model_lineage.remark = item.added_info.remark + ? item.added_info.remark + : ''; + item.model_lineage.tag = item.added_info.tag + ? item.added_info.tag + : 0; + item.model_lineage.showIcon = false; + const modelData = JSON.parse(JSON.stringify(item.model_lineage)); modelData.model_size = parseFloat( ((modelData.model_size || 0) / 1024 / 1024).toFixed(2), @@ -471,44 +1235,14 @@ export default { return modelLineageList; }, - /** - * The column options in the table are changed. - */ - 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 = - Object.keys(this.table.columnOptions).length - - this.table.optionsNotInCheckbox.length; - - this.table.column = Object.keys(this.table.columnOptions).filter((i) => { - return ( - this.table.columnOptions[i].selected && - !this.table.optionsNotInTable.includes(i) - ); - }); - - this.table.selectAll = - this.table.selectedColumn - .concat(this.table.mandatoryColumn) - .filter((i) => { - return !this.table.optionsNotInCheckbox.includes(i); - }).length === columnCount; - - this.table.isIndeterminate = - this.table.selectedColumn.length > 0 && !this.table.selectAll; - this.initChart(); - }, /** * Selected data in the table * @param {Array} list Selected data in the table */ selectionChange(list = []) { + if (this.hideRecord) { + return; + } this.echart.showData = list.length ? list : this.echart.brushData; this.initChart(); this.checkedSummary = list; @@ -520,6 +1254,135 @@ export default { in: summaryDirFilter, }; }, + + /** + * Selected data in the table + */ + selectValueChange() { + const list = []; + this.basearr.forEach((item) => { + item.options.forEach((option) => { + list.push(option.label); + }); + }); + if (list.length > this.selectArrayValue.length) { + this.selectCheckAll = false; + } else { + this.selectCheckAll = true; + } + let allList = []; + const listA = [this.$t('modelTraceback.summaryPath')]; + allList = this.selectArrayValue.concat(listA); + Object.keys(this.table.columnOptions).filter((i) => { + this.table.columnOptions[i].selected = false; + }); + allList.forEach((item) => { + Object.keys(this.table.columnOptions).filter((i) => { + const labelValue = this.table.columnOptions[i].label; + if (labelValue == item) { + this.table.columnOptions[i].selected = true; + } + }); + }); + this.initChart(); + this.initColumm(); + }, + + /** + * Hidden records + */ + hiddenRecords() { + this.hideRecord = true; + if (this.checkedSummary.length) { + this.checkedSummary.forEach((i) => { + this.hidenDirChecked.push(i.summary_dir); + }); + } + this.checkedSummary = []; + this.summaryDirList = this.$store.state.summaryDirList; + this.tableFilter.summary_dir = { + in: this.summaryDirList, + }; + this.$store.commit('setHidenDirChecked', this.hidenDirChecked); + if (this.hidenDirChecked.length) { + const tempEchartData = this.echart.brushData; + this.hidenDirChecked.forEach((dir) => { + tempEchartData.forEach((item, index) => { + if (item.summary_dir == dir) { + tempEchartData.splice(index, 1); + } + }); + }); + const tableTemp = this.table.data; + this.hidenDirChecked.forEach((dir) => { + tableTemp.forEach((item, index) => { + if (item.summary_dir == dir) { + tableTemp.splice(index, 1); + } + }); + }); + this.table.data = tableTemp; + this.showNumber = tableTemp.length; + this.echart.showData = tempEchartData; + // Restore the style of the table selection box. + this.$refs.table.clearSelection(); + if (this.echart.showData.length > 0) { + this.initChart(); + } else { + this.showEchartPic = false; + } + } + this.hideRecord = false; + }, + /** + * Unhide + */ + unhideRecords() { + this.showEchartPic = true; + this.$refs.table.clearSelection(); + this.$store.commit('setHidenDirChecked', []); + if (this.hidenDirChecked.length) { + this.checkedSummary = []; + this.hidenDirChecked = []; + } + const params = { + body: {}, + }; + const tempParam = { + sorted_name: this.sortInfo.sorted_name, + sorted_type: this.sortInfo.sorted_type, + }; + this.summaryDirList = this.$store.state.summaryDirList; + this.tableFilter.summary_dir = { + in: this.summaryDirList, + }; + params.body = Object.assign( + params.body, + this.chartFilter, + tempParam, + this.tableFilter, + ); + RequestService.queryLineagesData(params).then( + (res) => { + if (res && res.data && res.data.object) { + const list = this.setDataOfModel(res.data.object); + this.echart.allData = list; + this.echart.brushData = list; + this.echart.showData = this.echart.brushData; + this.initChart(); + this.table.data = list.slice( + (this.pagination.currentPage - 1) * this.pagination.pageSize, + this.pagination.currentPage * this.pagination.pageSize, + ); + this.recordsNumber = this.table.data.length; + this.showNumber = this.table.data.length; + this.pagination.total = res.data.count || 0; + } + }, + (error) => {}, + ); + }, + /** * Sort data in the table * @param {Object} column current column @@ -555,6 +1418,7 @@ export default { ) .catch(() => {}); }, + /** * Initializing the Eechart */ @@ -567,7 +1431,8 @@ export default { }); const data = []; this.echart.showData.forEach((i, index) => { - const item = { + let item = {}; + item = { lineStyle: { normal: { color: CommonProperty.commonColorArr[index % 10], @@ -710,6 +1575,9 @@ export default { // select use api this.echart.chart.on('axisareaselected', (params) => { + // key of mixed item + this.recordsNumber = 0; + this.showNumber = 0; const key = params.parallelAxisId; if ( this.keysOfMixed && @@ -820,9 +1688,17 @@ export default { } const list = this.setDataOfModel(res.data.object); + if (this.hidenDirChecked.length) { + this.hidenDirChecked.forEach((dir) => { + list.forEach((item, index) => { + if (item.summary_dir === dir) { + list.splice(index, 1); + } + }); + }); + } const summaryDirList = list.map((i) => i.summary_dir); this.$store.commit('setSummaryDirList', summaryDirList); - this.echart.showData = this.echart.brushData = list; this.initChart(); this.getTableList(tableParams); @@ -831,6 +1707,7 @@ export default { this.$store.commit('setSummaryDirList', []); this.checkedSummary = []; this.noData = true; + this.showEchartPic = false; } }, (error) => {}, @@ -849,7 +1726,20 @@ export default { (res) => { if (res && res.data && res.data.object && res.data.object.length) { const list = this.setDataOfModel(res.data.object); - this.table.data = list.slice(0, this.pagination.pageSize); + + if (this.hidenDirChecked.length) { + this.hidenDirChecked.forEach((dir) => { + list.forEach((item, index) => { + if (item.summary_dir === dir) { + list.splice(index, 1); + } + }); + }); + } + const tempList = list.slice(0, this.pagination.pageSize); + this.recordsNumber = tempList.length; + this.showNumber = tempList.length; + this.table.data = tempList; this.pagination.currentPage = 1; this.pagination.total = this.echart.brushData.length; this.$refs.table.clearSelection(); @@ -879,23 +1769,7 @@ export default { this.init(); this.$refs.table.clearSelection(); }, - /** - * Select all columns in the table. - * @param {Boolean} value Select All - */ - checkboxSelectAll(value) { - this.table.optionalColumn.forEach((key) => { - this.table.columnOptions[key].selected = value; - }); - this.table.selectedColumn = value ? this.table.optionalColumn : []; - this.table.column = this.table.mandatoryColumn - .concat(value ? this.table.optionalColumn : []) - .filter((i) => { - return !this.table.optionsNotInTable.includes(i); - }); - this.table.isIndeterminate = false; - this.initChart(); - }, + /** * Jump to the training dashboard * @param {String} id @@ -958,6 +1832,9 @@ export default { this.echart.chart.resize(); }, }, + /** + * Destroy the page + */ destroyed() { if (this.checkedSummary.length) { const tempList = []; @@ -971,14 +1848,161 @@ export default { this.echart.chart.clear(); this.echart.chart = null; } + document.removeEventListener('resize', this.blurFloat); }, };