diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json index b6b3a4f8be2ac430992019cc816e5198b41d9d84..665ef6cdc26402c6a39968c760a5a195f1280b9a 100644 --- a/mindinsight/ui/src/locales/zh-cn.json +++ b/mindinsight/ui/src/locales/zh-cn.json @@ -67,7 +67,8 @@ "samplingData": "数据抽样", "imagesampleSwitch": "切换标签", "invalidId": "无效的训练作业", - "summaryDirPath": "summary路径:" + "summaryDirPath": "summary路径:", + "mixedItemMessage": "该参数含有多种类型数据,无法筛选展示" }, "scalar": { "titleText": "标量", diff --git a/mindinsight/ui/src/views/train-manage/data-map.vue b/mindinsight/ui/src/views/train-manage/data-map.vue index c8c093824d5ab1d75158b275cb8bf7f688df770e..802f033858f3433f8d7a35f7c1eaf53269082472 100644 --- a/mindinsight/ui/src/views/train-manage/data-map.vue +++ b/mindinsight/ui/src/views/train-manage/data-map.vue @@ -525,7 +525,7 @@ export default { `${CommonProperty.graphDownloadStyle}${svgXml}`; + `viewBox="${viewBoxSize}">${CommonProperty.dataMapDownloadStyle}${svgXml}`; // Write the svg stream encoded by base64 to the image object. const src = `data:image/svg+xml;base64, diff --git a/mindinsight/ui/src/views/train-manage/data-traceback.vue b/mindinsight/ui/src/views/train-manage/data-traceback.vue index dd05010673d8251807b26f0f2ba0b62184076bc4..91a70feab4bb000ea5b27035ca4d3b6c67baf313 100644 --- a/mindinsight/ui/src/views/train-manage/data-traceback.vue +++ b/mindinsight/ui/src/views/train-manage/data-traceback.vue @@ -509,6 +509,7 @@ export default { }); // The summaryList value could not be saved in the destroy state. this.dataCheckedSummary = []; + this.tableFilter.summary_dir = {in: summaryList}; this.$store.commit('setSummaryDirList', summaryList); if (!tempList.length) { this.summaryDirList = []; @@ -967,6 +968,7 @@ export default { sorted_name: data.prop, sorted_type: data.order, }; + this.pagination.currentPage = 1; params.body = Object.assign({}, tempParam, this.tableFilter); this.queryLineagesData(params); }, diff --git a/mindinsight/ui/src/views/train-manage/histogram.vue b/mindinsight/ui/src/views/train-manage/histogram.vue index 050417d64b989880615023faba689065f2611562..20c0bc78f8320b5535ad84d2761ef90f586928b5 100644 --- a/mindinsight/ui/src/views/train-manage/histogram.vue +++ b/mindinsight/ui/src/views/train-manage/histogram.vue @@ -222,6 +222,14 @@ export default { this.$store.commit('setIsReload', false); this.isReloading = false; } + if (this.changeAxisTimer) { + clearTimeout(this.changeAxisTimer); + this.changeAxisTimer = null; + } + if (this.changeViewTimer) { + clearTimeout(this.changeViewTimer); + this.changeViewTimer = null; + } }, mounted() { this.init(); @@ -398,6 +406,7 @@ export default { timeTypeChange(val) { if (this.changeAxisTimer) { clearTimeout(this.changeAxisTimer); + this.changeAxisTimer = null; } this.changeAxisTimer = setTimeout(() => { this.curPageArr.forEach((item) => { @@ -412,6 +421,7 @@ export default { viewTypeChange(val) { if (this.changeViewTimer) { clearTimeout(this.changeViewTimer); + this.changeViewTimer = null; } this.changeViewTimer = setTimeout(() => { this.curPageArr.forEach((item) => { diff --git a/mindinsight/ui/src/views/train-manage/model-traceback.vue b/mindinsight/ui/src/views/train-manage/model-traceback.vue index cbd9ed2a6149354ec843b271b6b9d6ac3027a151..78cd4e843e1dca316818bcb2c148fd975e06024d 100644 --- a/mindinsight/ui/src/views/train-manage/model-traceback.vue +++ b/mindinsight/ui/src/views/train-manage/model-traceback.vue @@ -151,6 +151,7 @@ export default { 'batch_size', 'device_num', ], // All keys whose values are int + keysOfMixed: [], echart: { chart: null, allData: [], @@ -166,10 +167,7 @@ export default { }, chartFilter: {}, // chart filter condition tableFilter: {lineage_type: {in: ['model']}}, // table filter condition - sortInfo: { - sorted_name: 'summary_dir', - sorted_type: null, - }, + sortInfo: {}, showTable: false, noData: false, haveCustomizedParams: false, @@ -281,6 +279,7 @@ export default { selectAll: false, // Whether to select all columns indeterminate: false, }; + this.keysOfMixed = []; this.queryLineagesData(true); }, /** @@ -324,10 +323,15 @@ export default { tempParam.limit = this.pagination.pageSize; tempParam.offset = this.pagination.currentPage - 1; - params.body = Object.assign(params.body, this.chartFilter); + params.body = Object.assign( + params.body, + this.chartFilter, + tempParam, + this.tableFilter, + ); + } else { + params.body = Object.assign(params.body, this.tableFilter); } - params.body = Object.assign(params.body, tempParam, this.tableFilter); - RequestService.queryLineagesData(params) .then( (res) => { @@ -344,6 +348,10 @@ export default { this.keysOfIntValue.push(i); } else if (customized[i].type === 'str') { this.keysOfStringValue.push(i); + } else if (customized[i].type === 'mixed') { + // list of type mixed + this.keysOfMixed.push(i); + this.keysOfStringValue.push(i); } if (i.startsWith(this.replaceStr.userDefined)) { customized[i].label = customized[i].label.replace( @@ -568,7 +576,16 @@ export default { }; chartAxis.forEach((key) => { - item.value.push(i[key]); + if ( + (i[key] || i[key] == 0) && + this.keysOfMixed && + this.keysOfMixed.length && + this.keysOfMixed.includes(key) + ) { + item.value.push(i[key].toString()); + } else { + item.value.push(i[key]); + } }); data.push(item); }); @@ -581,7 +598,7 @@ export default { const values = {}; this.echart.showData.forEach((i) => { if (i[key] || i[key] === 0) { - values[i[key]] = i[key]; + values[i[key].toString()] = i[key].toString(); } }); obj.type = 'category'; @@ -693,6 +710,15 @@ export default { // select use api this.echart.chart.on('axisareaselected', (params) => { const key = params.parallelAxisId; + if ( + this.keysOfMixed && + this.keysOfMixed.length && + this.keysOfMixed.includes(key) + ) { + this.$message.error(this.$t('modelTraceback.mixedItemMessage')); + this.initChart(); + return; + } const list = this.$store.state.selectedBarList || []; const selectedAxisId = params.parallelAxisId; if (list.length) { @@ -741,6 +767,12 @@ export default { {}, this.chartFilter, this.tableFilter, + ); + const tableParams = {}; + tableParams.body = Object.assign( + {}, + this.chartFilter, + this.tableFilter, this.sortInfo, ); RequestService.queryLineagesData(filterParams) @@ -752,20 +784,47 @@ export default { res.data.object && res.data.object.length ) { + let customized = {}; + customized = JSON.parse(JSON.stringify(res.data.customized)); + const customizedKeys = Object.keys(customized); + if (customizedKeys.length) { + this.keysOfStringValue = [ + 'summary_dir', + 'network', + 'optimizer', + 'loss_function', + 'train_dataset_path', + 'test_dataset_path', + 'dataset_mark', + ]; + this.keysOfIntValue = [ + 'train_dataset_count', + 'test_dataset_count', + 'epoch', + 'batch_size', + 'device_num', + ]; + this.keysOfMixed = []; + customizedKeys.forEach((i) => { + if (customized[i].type === 'int') { + this.keysOfIntValue.push(i); + } else if (customized[i].type === 'str') { + this.keysOfStringValue.push(i); + } else if (customized[i].type === 'mixed') { + // list of type mixed + this.keysOfMixed.push(i); + this.keysOfStringValue.push(i); + } + }); + } + const list = this.setDataOfModel(res.data.object); const summaryDirList = list.map((i) => i.summary_dir); this.$store.commit('setSummaryDirList', summaryDirList); this.echart.showData = this.echart.brushData = list; this.initChart(); - - this.table.data = this.echart.brushData.slice( - 0, - this.pagination.pageSize, - ); - this.pagination.currentPage = 1; - this.pagination.total = this.echart.brushData.length; - this.$refs.table.clearSelection(); + this.getTableList(tableParams); } else { this.summaryDirList = []; this.$store.commit('setSummaryDirList', []); @@ -779,6 +838,26 @@ export default { } }); }, + /** + * Get table data + * @param {Object} tableParams + */ + getTableList(tableParams) { + RequestService.queryLineagesData(tableParams) + .then( + (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); + this.pagination.currentPage = 1; + this.pagination.total = this.echart.brushData.length; + this.$refs.table.clearSelection(); + } + }, + (error) => {}, + ) + .catch(() => {}); + }, /** * Resetting the Eechart */ @@ -790,6 +869,7 @@ export default { this.showTable = false; this.chartFilter = {}; this.tableFilter.summary_dir = undefined; + this.sortInfo = {}; this.pagination.currentPage = 1; this.echart.allData = []; if (this.echart.chart) { diff --git a/mindinsight/ui/src/views/train-manage/scalar.vue b/mindinsight/ui/src/views/train-manage/scalar.vue index 46097d77a5b25337746def44c64fd6acca5ad0fe..32820806a39bf4754fda77c4f8124682e4514565 100644 --- a/mindinsight/ui/src/views/train-manage/scalar.vue +++ b/mindinsight/ui/src/views/train-manage/scalar.vue @@ -34,10 +34,9 @@ limitations under the License.
- +
- - + @input="updataInputValue"> + +
{ if (!this.oriDataDictionaries[tagObj]) { - this.oriDataDictionaries[tagObj]=true; + this.oriDataDictionaries[tagObj] = true; // Add the tag list tempTagList.push({ label: tagObj, @@ -337,7 +334,7 @@ export default { this.initOver = true; this.$nextTick(() => { - this.multiSelectedTagNames=this.$refs.multiselectGroupComponents.updateSelectedDic(); + this.multiSelectedTagNames = this.$refs.multiselectGroupComponents.updateSelectedDic(); // Obtains data on the current page this.updateTagInPage(); @@ -365,10 +362,10 @@ export default { const curPageArr = []; for (let i = startIndex; i < endIndex; i++) { - const sampleItem=this.curFilterSamples[i]; + const sampleItem = this.curFilterSamples[i]; if (sampleItem) { - sampleItem.updateFlag=true; - sampleItem.show=true; + sampleItem.updateFlag = true; + sampleItem.show = true; curPageArr.push(sampleItem); } } @@ -381,110 +378,110 @@ export default { * Load the data on the current page */ updateCurPageSamples() { - this.curPageArr.forEach((sampleObject)=>{ - const sampleIndex=sampleObject.sampleIndex; + this.curPageArr.forEach((sampleObject) => { + const sampleIndex = sampleObject.sampleIndex; if (!sampleObject) { return; } sampleObject.updateFlag = true; - const params = { train_id: this.trainingJobId, tag: sampleObject.tagName, }; - RequestService.getScalarsSample(params).then((res)=>{ - // error - if (!res || !res.data || !res.data.metadatas) { - if (sampleObject.charObj) { - sampleObject.charObj.clear(); - } - return; - } - let hasInvalidData = false; - - if (sampleObject.charObj) { - sampleObject.charObj.showLoading(); - } + RequestService.getScalarsSample(params) + .then((res) => { + // error + if (!res || !res.data || !res.data.metadatas) { + if (sampleObject.charObj) { + sampleObject.charObj.clear(); + } + return; + } + let hasInvalidData = false; - const resData = res.data; + if (sampleObject.charObj) { + sampleObject.charObj.showLoading(); + } - const tempObject = { - valueData: { - stepData: [], - absData: [], - relativeData: [], - }, - logData: { - stepData: [], - absData: [], - relativeData: [], - }, - }; - let relativeTimeBench = 0; - if (resData.metadatas.length) { - relativeTimeBench = resData.metadatas[0].wall_time; - } + const resData = res.data; + + const tempObject = { + valueData: { + stepData: [], + absData: [], + relativeData: [], + }, + logData: { + stepData: [], + absData: [], + relativeData: [], + }, + }; + let relativeTimeBench = 0; + if (resData.metadatas.length) { + relativeTimeBench = resData.metadatas[0].wall_time; + } - // Initializing Chart Data - resData.metadatas.forEach((metaData) => { - if (metaData.value === null && !hasInvalidData) { - hasInvalidData = true; - } - tempObject.valueData.stepData.push([ - metaData.step, - metaData.value, - ]); - tempObject.valueData.absData.push([ - metaData.wall_time, - metaData.value, - ]); - tempObject.valueData.relativeData.push([ - metaData.wall_time - relativeTimeBench, - metaData.value, - ]); - const logValue = metaData.value >= 0 ? metaData.value : ''; - tempObject.logData.stepData.push([metaData.step, logValue]); - tempObject.logData.absData.push([metaData.wall_time, logValue]); - tempObject.logData.relativeData.push([ - metaData.wall_time - relativeTimeBench, - logValue, - ]); - }); + // Initializing Chart Data + resData.metadatas.forEach((metaData) => { + if (metaData.value === null && !hasInvalidData) { + hasInvalidData = true; + } + tempObject.valueData.stepData.push([ + metaData.step, + metaData.value, + ]); + tempObject.valueData.absData.push([ + metaData.wall_time, + metaData.value, + ]); + tempObject.valueData.relativeData.push([ + metaData.wall_time - relativeTimeBench, + metaData.value, + ]); + const logValue = metaData.value >= 0 ? metaData.value : ''; + tempObject.logData.stepData.push([metaData.step, logValue]); + tempObject.logData.absData.push([metaData.wall_time, logValue]); + tempObject.logData.relativeData.push([ + metaData.wall_time - relativeTimeBench, + logValue, + ]); + }); - sampleObject.charData.oriData[0] = tempObject; + sampleObject.charData.oriData[0] = tempObject; - if (hasInvalidData) { - this.$set(sampleObject, 'invalidData', true); - } - sampleObject.charData.charOption = this.formateCharOption( - sampleIndex, - ); + if (hasInvalidData) { + this.$set(sampleObject, 'invalidData', true); + } + sampleObject.charData.charOption = this.formateCharOption( + sampleIndex, + ); - this.$forceUpdate(); + this.$forceUpdate(); - this.$nextTick(() => { - if (sampleObject.charObj) { - sampleObject.charObj.hideLoading(); - } + this.$nextTick(() => { + if (sampleObject.charObj) { + sampleObject.charObj.hideLoading(); + } - // Draw chart - if (!this.compare) { - this.updateOrCreateChar(sampleIndex); - } else { - this.abort = true; - } - }); - }).catch((e)=>{ - if (sampleObject.charObj) { - sampleObject.charObj.clear(); - } - }); + // Draw chart + if (!this.compare) { + this.updateOrCreateChar(sampleIndex); + } else { + this.abort = true; + } + }); + }) + .catch((e) => { + if (sampleObject.charObj) { + sampleObject.charObj.clear(); + } + }); }); }, - /** * Formatting Chart Data * @param {Number} sampleIndex Chart subscript @@ -499,7 +496,7 @@ export default { let returnFlag = false; const seriesData = []; const oriData = sampleObject.charData.oriData; - const runName=sampleObject.runNames; + const runName = sampleObject.runNames; const curBackName = runName + this.backendString; const dataObj = { name: runName, @@ -886,9 +883,11 @@ export default { if (sampleObject.fullScreen) { sampleObject.charData.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor = '#3E98C5'; + sampleObject.charData.charOption.grid.right = 80; } else { sampleObject.charData.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor = '#6D7278'; + sampleObject.charData.charOption.grid.right = 10; } sampleObject.updateFlag = true; @@ -901,14 +900,13 @@ export default { }, 0); }, - /** * Update Chart by tag * @param {Boolean} noPageDataNumChange No new data is added or deleted */ updateTagInPage(noPageDataNumChange) { - const curFilterSamples=[]; + const curFilterSamples = []; // Obtains the chart subscript this.originDataArr.forEach((sampleItem) => { if (this.multiSelectedTagNames[sampleItem.tagName]) { @@ -1012,13 +1010,12 @@ export default { if (!selectedItemDict) { return; } - this.multiSelectedTagNames=selectedItemDict; + this.multiSelectedTagNames = selectedItemDict; // Reset to the first page - this.pageIndex=0; + this.pageIndex = 0; this.updateTagInPage(); }, - /** *window resize */ @@ -1050,7 +1047,7 @@ export default { this.tagOperateList = []; this.pageIndex = 0; this.originDataArr = []; - this.oriDataDictionaries={}; + this.oriDataDictionaries = {}; this.curPageArr = []; this.tagPropsList = []; this.propsList = []; @@ -1090,10 +1087,10 @@ export default { if (!oriData) { return false; } - const newTagDictionaries={}; // Index of the tag in the new data + const newTagDictionaries = {}; // Index of the tag in the new data let dataRemoveFlag = false; oriData.tags.forEach((tagName) => { - newTagDictionaries[tagName]=true; + newTagDictionaries[tagName] = true; }); // Delete the tag that does not exist const oldTagListLength = this.tagOperateList.length; @@ -1132,7 +1129,7 @@ export default { const runColor = CommonProperty.commonColorArr[0]; oriData.tags.forEach((tagObj) => { if (!this.oriDataDictionaries[tagObj]) { - this.oriDataDictionaries[tagObj]=true; + this.oriDataDictionaries[tagObj] = true; this.tagOperateList.push({ label: tagObj, checked: true, @@ -1198,7 +1195,7 @@ export default { const tagAddFlag = this.checkNewDataAndComplete(data); this.$nextTick(() => { - this.multiSelectedTagNames=this.$refs.multiselectGroupComponents.updateSelectedDic(); + this.multiSelectedTagNames = this.$refs.multiselectGroupComponents.updateSelectedDic(); this.updateTagInPage(!tagRemoveFlag && !tagAddFlag); this.resizeCallback(); @@ -1209,7 +1206,7 @@ export default { // Initial chart data data.tags.forEach((tagObj) => { - // Check whether the tag with the same name exists + // Check whether the tag with the same name exists tempTagList.push({ label: tagObj, checked: true, @@ -1266,7 +1263,7 @@ export default { if (this.firstNum === 0) { return; } - this.smoothValueNumber=Number(val); + this.smoothValueNumber = Number(val); if (this.smoothSliderValueTimer) { clearTimeout(this.smoothSliderValueTimer); this.smoothSliderValueTimer = null; @@ -1279,26 +1276,26 @@ export default { smoothValueChange(val) { if (!isNaN(val)) { - if (Number(val)===0) { - this.smoothValue=0; + if (Number(val) === 0) { + this.smoothValue = 0; } - if (Number(val)<0) { - this.smoothValue=0; - this.smoothValueNumber=0; + if (Number(val) < 0) { + this.smoothValue = 0; + this.smoothValueNumber = 0; } - if (Number(val)>0) { - if (Number(val)>0.99) { - this.smoothValue=0.99; - this.smoothValueNumber=0.99; + if (Number(val) > 0) { + if (Number(val) > 0.99) { + this.smoothValue = 0.99; + this.smoothValueNumber = 0.99; } else { - this.smoothValue=Number(val); + this.smoothValue = Number(val); } } } }, smoothValueBlur() { - this.smoothValueNumber=this.smoothValue; + this.smoothValueNumber = this.smoothValue; }, /**