diff --git a/mindinsight/ui/src/views/train-manage/data-map.vue b/mindinsight/ui/src/views/train-manage/data-map.vue index 5289e68a80976593a659c2b05a4e03127b683fce..862061c11d1b26b5568e561820ce44d11710ee6d 100644 --- a/mindinsight/ui/src/views/train-manage/data-map.vue +++ b/mindinsight/ui/src/views/train-manage/data-map.vue @@ -511,6 +511,7 @@ export default { cursor: pointer; width: 12px; height: 12px; + z-index: 999; display: inline-block; background-image: url('../../assets/images/full-screen.png'); } @@ -529,7 +530,6 @@ export default { width: 100%; } #sidebar { - top: 32px; .node-info-con { height: calc(100% - 280px); } diff --git a/mindinsight/ui/src/views/train-manage/data-traceback.vue b/mindinsight/ui/src/views/train-manage/data-traceback.vue index 9415d3807dab8d0e029776b6f83bd71082b4c776..dd05010673d8251807b26f0f2ba0b62184076bc4 100644 --- a/mindinsight/ui/src/views/train-manage/data-traceback.vue +++ b/mindinsight/ui/src/views/train-manage/data-traceback.vue @@ -207,6 +207,7 @@ export default { }, // echart parallel line coordinate system parallelEchart: null, + deviceNum: 'device_num', shuffleTitle: 'Shuffle', repeatTitle: 'Repeat', categoryType: 'category', @@ -406,7 +407,8 @@ export default { const obj = {dim: i, name: content.name, id: content.id}; if ( content.name === this.repeatTitle || - content.name === this.shuffleTitle + content.name === this.shuffleTitle || + content.id === this.deviceNum ) { obj.scale = true; obj.minInterval = 1; diff --git a/mindinsight/ui/src/views/train-manage/histogram.vue b/mindinsight/ui/src/views/train-manage/histogram.vue index 7a9453ad2642c002505054d4fe422631a8362fd2..3afff3e13fe0c76a15459feebd40f344d0dabf78 100644 --- a/mindinsight/ui/src/views/train-manage/histogram.vue +++ b/mindinsight/ui/src/views/train-manage/histogram.vue @@ -212,10 +212,7 @@ export default { } if (this.curPageArr.length) { this.curPageArr.forEach((item) => { - if (item.zr) { - item.zr.off('mouseout', 'mousemove'); - item.zr = null; - } + this.clearZrData(item); }); } // Stop refreshing @@ -296,18 +293,15 @@ export default { checked: true, show: true, }); - const sampleIndex = dataList.length; dataList.push({ tagName: tagName, - sampleIndex: sampleIndex, zr: null, show: false, fullScreen: false, domId: `${tagName}`, - charData: { - oriData: [], - charOption: {}, - }, + oriData: {}, + charOption: {}, + chartData: [], charObj: null, }); } @@ -356,10 +350,7 @@ export default { if (!noPageDataNumChange) { this.curPageArr.forEach((sampleItem) => { sampleItem.show = false; - if (sampleItem.zr) { - sampleItem.zr.off('mouseout', 'mousemove'); - sampleItem.zr = null; - } + this.clearZrData(sampleItem); }); } // This interface is used to obtain the current page group and hide the current page group. @@ -379,28 +370,23 @@ export default { }, freshCurPageData() { this.curPageArr.forEach((item, index) => { - this.updateCurPageSamples(item.sampleIndex); - }); - }, - updateCurPageSamples(sampleIndex) { - const item = this.originDataArr[sampleIndex]; - if (!item || !item.tagName) { - return; - } - const params = { - train_id: this.trainingJobId, - tag: item.tagName, - }; - RequestService.getHistogramData(params).then((res) => { - if (!res || !res.data) { + if (!item || !item.tagName) { return; } - const data = JSON.parse(JSON.stringify(res.data)); - this.originDataArr[sampleIndex].charData.oriData = this.formOriData( - data, - ); - const charOption = this.formatDataToChar(sampleIndex); - this.updateSampleData(sampleIndex, charOption); + const params = { + train_id: this.trainingJobId, + tag: item.tagName, + }; + RequestService.getHistogramData(params).then((res) => { + if (!res || !res.data) { + return; + } + const data = JSON.parse(JSON.stringify(res.data)); + item.chartData = this.formOriData(data); + this.formatDataToChar(item); + this.updateSampleData(item); + this.sampleEventBind(item); + }); }); }, /** @@ -408,9 +394,8 @@ export default { * @param {Number} val Current mode */ timeTypeChange(val) { - this.curPageArr.forEach((k) => { - const charOption = this.formatDataToChar(k.sampleIndex); - this.updateSampleData(k.sampleIndex, charOption); + this.curPageArr.forEach((item) => { + this.updateSampleData(item); }); }, /** @@ -418,9 +403,9 @@ export default { * @param {Number} val Current mode */ viewTypeChange(val) { - this.curPageArr.forEach((k) => { - const charOption = this.formatDataToChar(k.sampleIndex); - this.updateSampleData(k.sampleIndex, charOption); + this.curPageArr.forEach((item) => { + this.formatDataToChar(item); + this.updateSampleData(item); }); }, /** @@ -444,10 +429,7 @@ export default { */ clearAllData() { this.originDataArr.forEach((item) => { - if (item.zr) { - item.zr.off('mouseout', 'mousemove'); - item.zr = null; - } + this.clearZrData(item); }); this.tagList = []; this.originDataArr = []; @@ -574,6 +556,8 @@ export default { for (let i = oldSampleLength - 1; i >= 0; i--) { if (!newTagDictionaries[this.originDataArr[i].tagName]) { dataRemoveFlag = true; + this.clearZrData(this.originDataArr[i]); + this.originDataArr[i].charObj.clear(); this.originDataArr.splice(i, 1); } } @@ -599,18 +583,15 @@ export default { checked: true, show: false, }); - const sampleIndex = this.originDataArr.length; this.originDataArr.push({ tagName: tagName, - sampleIndex: sampleIndex, zr: null, show: false, fullScreen: false, domId: `${tagName}`, - charData: { - oriData: [], - charOption: {}, - }, + oriData: {}, + charOption: {}, + chartData: [], charObj: null, }); this.curFullTagDic[tagName] = true; @@ -621,381 +602,369 @@ export default { }, /** * update sample data - * @param {Number} sampleIndex index - * @param {Object} charOption data + * @param {Object} sampleObject sampleObject */ - updateSampleData(sampleIndex, charOption) { - let curViewName = this.curViewName; - const sampleObject = this.originDataArr[sampleIndex]; - sampleObject.charData = sampleObject.charData - ? sampleObject.charData - : {}; - sampleObject.charData.charOption = this.formatCharOption( - sampleIndex, - charOption, - ); + updateSampleData(sampleObject) { + sampleObject.charOption = this.formatCharOption(sampleObject); if (!sampleObject.charObj) { sampleObject.charObj = echarts.init( document.getElementById(sampleObject.domId), null, ); } - sampleObject.charObj.setOption(sampleObject.charData.charOption, true); + this.removeTooltip(sampleObject); + sampleObject.charObj.setOption(sampleObject.charOption, true); + }, + sampleEventBind(sampleObject) { if (!sampleObject.zr) { sampleObject.zr = sampleObject.charObj.getZr(); + sampleObject.zr.off('mouseout', 'mousemove'); + sampleObject.zr.on('mouseout', (e) => { + this.removeTooltip(sampleObject); + this.chartTipFlag = false; + }); + sampleObject.zr.on('mousemove', (e) => { + this.removeTooltip(sampleObject); + this.mousemoveEvent(sampleObject, e); + }); + } + }, + mousemoveEvent(sampleObject, e) { + const unit = 's'; + const nearestIndex = this.findNearestValue(sampleObject, [ + e.offsetX, + e.offsetY, + ]); + if ( + nearestIndex && + nearestIndex.yIndex !== null && + nearestIndex.binIndex !== null + ) { + const {binIndex, yIndex} = nearestIndex; + const chartData = sampleObject.chartData; + const hoveredItem = chartData[yIndex]; const p = Math.max(0, d3.precisionRound(0.01, 1.01) - 1); - const yValueFormat = d3.format('.' + p + 'e'); - const chartData = sampleObject.charData.oriData.chartData; - const rawData = charOption.seriesData; - /** - * get convert point - * @param {Array} pt value - * @return {Array} - */ - function getCoord(pt) { - return sampleObject.charObj.convertToPixel('grid', pt); + const yValueFormat = d3.format(`.${p}e`); + const gridRect = sampleObject.charObj + .getModel() + .getComponent('grid', 0) + .coordinateSystem.getRect(); + const gridRectY = gridRect.y - 10; + let linePoints = []; + if (!hoveredItem || !hoveredItem.items[binIndex]) { + return; } - /** - * find nearest value - * @param {Array} eventPoint value - * @return {Object} - */ - function findNearestValue(eventPoint) { - if ( - !eventPoint || - !eventPoint.length || - !sampleObject || - !sampleObject.charObj - ) { - return; - } - const value = sampleObject.charObj.convertFromPixel( - 'grid', - eventPoint, + if (!this.chartTipFlag) { + this.chartTipFlag = true; + } + if (this.curViewName === 1 && yIndex !== null) { + linePoints = this.makePolyPoints( + yIndex, + this.getCoord, + gridRectY, + sampleObject, ); - let binIndex = null; - let yIndex = null; - let nearestX = Infinity; - let nearestY = -Infinity; - let nearestYData = Infinity; - if (!sampleObject.charData.oriData || !value || !value.length) { - return; - } - const gridRect = sampleObject.charObj - .getModel() - .getComponent('grid', 0) - .coordinateSystem.getRect(); - const gridRectY = gridRect.y - 10; - const x = value[0]; - chartData.forEach((dataItem, i) => { - let distY; - let yAxis; - for (let k = 0; k < dataItem.items.length - 1; k++) { - const item = dataItem.items[k]; - const itemNext = dataItem.items[k + 1]; - const nextX = itemNext[2]; - const nextZ = itemNext[3]; - if (item.length >= 4) { - if (item[2] < x && nextX >= x) { - const proportionX = (x - item[2]) / (nextX - item[2]); - yAxis = (nextZ - item[3]) * proportionX + item[3]; - distY = Math.abs(value[1] - yAxis); - break; - } - } - } - if (curViewName === 0 && distY < nearestYData) { - nearestYData = distY; - yIndex = i; - } else if (curViewName === 1) { - const pt = getCoord([x, dataItem.step]); - const ptStep = pt[1]; - pt[1] -= - ((yAxis - charOption.minZ) / - (charOption.maxZ - charOption.minZ)) * - gridRectY; - if ( - eventPoint[1] > pt[1] && - eventPoint[1] < ptStep && - ptStep > nearestY - ) { - nearestY = ptStep; - yIndex = i; - } - } + } else if (this.curViewName === 0 && hoveredItem.items) { + hoveredItem.items.forEach((item) => { + linePoints.push(this.getCoord([item[2], item[3]], sampleObject)); }); - if (yIndex === null && curViewName === 1) { - chartData.forEach((item, index) => { - if (item.step > value[1]) { - yIndex = yIndex === null ? index : Math.min(yIndex, index); - } - }); - } - if (yIndex !== null) { - const yData = chartData[yIndex].items; - yData.forEach((ele, index) => { - const distX = Math.abs(ele[2] - value[0]); - if (distX < nearestX) { - nearestX = distX; - binIndex = index; + } + + this.zrDrawElement.hoverLine = new echarts.graphic.Polyline({ + silent: true, + shape: { + points: linePoints.slice(1, -1), + }, + z: 999, + }); + sampleObject.zr.add(this.zrDrawElement.hoverLine); + + this.zrDrawElement.tooltip = new echarts.graphic.Text({}); + let itemX; + const x = hoveredItem.items[binIndex][2]; + let z = 0; + chartData.forEach((dataItem, index) => { + const y = dataItem.step; + const pt = this.getCoord([x, y], sampleObject); + if (index === yIndex) { + z = hoveredItem.items[binIndex][3]; + } else { + const items = dataItem.items; + for (let k = 1; k < items.length - 1; k++) { + const nextX = items[k + 1][2]; + const nextZ = items[k + 1][3]; + if (items[k][2] === x) { + z = items[k][3]; + break; + } else if (items[k][2] < x && nextX > x) { + const proportionX = (x - items[k][2]) / (nextX - items[k][2]); + z = (nextZ - items[k][3]) * proportionX + items[k][3]; + break; } - }); - binIndex = - binIndex === 0 - ? 1 - : binIndex === yData.length - 1 - ? yData.length - 2 - : binIndex; + } } - return { - binIndex, - yIndex, + itemX = pt[0]; + const circleOption = { + z: 1000, }; - } - sampleObject.zr.off('mouseout', 'mousemove'); - sampleObject.zr.on('mouseout', (e) => { - if (!rawData || !rawData.length) { - return; + if (this.curViewName === 1) { + pt[1] -= + ((z - sampleObject.oriData.minZ) / + (sampleObject.oriData.maxZ - sampleObject.oriData.minZ)) * + gridRectY; + circleOption.shape = { + cx: itemX, + cy: pt[1], + r: 1.5, + }; + } else { + circleOption.shape = { + cx: 0, + cy: 0, + r: 1.5, + }; + circleOption.position = sampleObject.charObj.convertToPixel( + 'grid', + [x, z], + ); } - this.chartTipFlag = false; - this.removeTooltip(sampleIndex); + const dot = new echarts.graphic.Circle(circleOption); + sampleObject.zr.add(dot); + this.zrDrawElement.hoverDots.push(dot); }); - sampleObject.zr.on('mousemove', (e) => { - if (!rawData || !rawData.length) { - return; - } - this.removeTooltip(sampleIndex); - curViewName = this.curViewName; - const unit = 's'; - const nearestIndex = findNearestValue([e.offsetX, e.offsetY]); - if ( - nearestIndex && - nearestIndex.yIndex !== null && - nearestIndex.binIndex !== null - ) { - const {binIndex, yIndex} = nearestIndex; - const gridRect = sampleObject.charObj - .getModel() - .getComponent('grid', 0) - .coordinateSystem.getRect(); - const gridRectY = gridRect.y - 10; - let linePoints = []; - if (curViewName === 1 && yIndex !== null) { - linePoints = this.makePolyPoints( - yIndex, - getCoord, - gridRectY, - charOption, - ); - } else if ( - curViewName === 0 && - chartData[yIndex] && - chartData[yIndex].items - ) { - chartData[yIndex].items.forEach((item) => { - linePoints.push( - sampleObject.charObj.convertToPixel('grid', [ - item[2], - item[3], - ]), - ); - }); - } - this.zrDrawElement.hoverLine = new echarts.graphic.Polyline({ - silent: true, - shape: { - points: linePoints.slice(1, -1), - }, - z: 999, - }); - sampleObject.zr.add(this.zrDrawElement.hoverLine); - this.zrDrawElement.tooltip = new echarts.graphic.Text({}); - let itemX; - const x = chartData[yIndex].items[binIndex][2]; - let z = 0; - chartData.forEach((dataItem, index) => { - const y = dataItem.step; - const pt = getCoord([x, y]); - if (index === yIndex) { - z = chartData[yIndex].items[binIndex][3]; - } else { - const items = dataItem.items; - for (let k = 1; k < items.length - 1; k++) { - const nextX = items[k + 1][2]; - const nextZ = items[k + 1][3]; - if (items[k][2] === x) { - z = items[k][3]; - break; - } else if (items[k][2] < x && nextX > x) { - const proportionX = - (x - items[k][2]) / (nextX - items[k][2]); - z = (nextZ - items[k][3]) * proportionX + items[k][3]; - break; - } - } - } - itemX = pt[0]; - const circleOption = { - z: 1000, - }; - if (curViewName === 1) { - pt[1] -= - ((z - charOption.minZ) / - (charOption.maxZ - charOption.minZ)) * - gridRectY; - circleOption.shape = { - cx: itemX, - cy: pt[1], - r: 1.5, - }; - } else { - circleOption.shape = { - cx: 0, - cy: 0, - r: 1.5, - }; - circleOption.position = sampleObject.charObj.convertToPixel( - 'grid', - [x, z], - ); - } - const dot = new echarts.graphic.Circle(circleOption); - sampleObject.zr.add(dot); - this.zrDrawElement.hoverDots.push(dot); - }); + this.zrDrawElement.tooltip = new echarts.graphic.Text({}); - const hoveredItem = chartData[yIndex]; - this.zrDrawElement.tooltip = new echarts.graphic.Text({}); - if (!this.chartTipFlag) { - this.chartTipFlag = true; - } - if (!hoveredItem || !hoveredItem.items[binIndex]) { - return; - } - let htmlStr = ''; - const hoveredAxis = hoveredItem.items[binIndex][3]; - htmlStr = `${ - hoveredAxis.toString().length >= 6 - ? yValueFormat(hoveredAxis) - : hoveredAxis - }${hoveredItem.step}${( - hoveredItem.relative_time / 1000 - ).toFixed(3)}${unit}${this.dealrelativeTime( - new Date(hoveredItem.wall_time).toString(), - )}`; - const dom = document.querySelector('#tipTr'); - dom.innerHTML = htmlStr; - if (!sampleObject.fullScreen) { - const chartWidth = document.querySelectorAll('.sample-content')[ - sampleIndex - ].clientWidth; - const chartHeight = document.querySelectorAll('.sample-content')[ - sampleIndex - ].clientHeight; - const left = document.querySelectorAll('.sample-content')[ - sampleIndex - ].offsetLeft; - const top = document.querySelectorAll('.sample-content')[ - sampleIndex - ].offsetTop; - const echartTip = document.querySelector('#echartTip'); - echartTip.style.top = `${top + chartHeight - 60}px`; - if (left > echartTip.clientWidth) { - echartTip.style.left = `${left - echartTip.clientWidth}px`; - } else { - echartTip.style.left = `${left + chartWidth}px`; - } - } else { - const width = document.querySelector('#echartTip').clientWidth; - const height = document.querySelector('#echartTip').clientHeight; - const screenWidth = document.body.scrollWidth; - const screenHeight = document.body.scrollHeight; - const scrollTop = document.querySelector( - '.cl-histogram-show-data-content', - ).scrollTop; - const offsetTop = document.querySelector( - '.cl-histogram-show-data-content', - ).offsetTop; - if ( - height + e.event.y + 20 > screenHeight && - screenHeight > height - ) { - document.querySelector('#echartTip').style.top = `${e.event.y + - scrollTop - - height - - 20 - - offsetTop}px`; - } else { - document.querySelector('#echartTip').style.top = `${e.event.y + - scrollTop + - 20 - - offsetTop}px`; - } - if (width + e.event.x + 50 > screenWidth && screenWidth > width) { - document.querySelector('#echartTip').style.left = `${e.event.x - - width - - 20}px`; - } else { - document.querySelector('#echartTip').style.left = `${e.event.x + - 20}px`; - } - } + let htmlStr = ''; + const hoveredAxis = hoveredItem.items[binIndex][3]; + htmlStr = `${ + hoveredAxis.toString().length >= 6 + ? yValueFormat(hoveredAxis) + : hoveredAxis + }${hoveredItem.step}${( + hoveredItem.relative_time / 1000 + ).toFixed(3)}${unit}${this.dealrelativeTime( + new Date(hoveredItem.wall_time).toString(), + )}`; + const dom = document.querySelector('#tipTr'); + dom.innerHTML = htmlStr; + if (!sampleObject.fullScreen) { + const chartWidth = document.getElementById(sampleObject.domId) + .parentNode.parentNode.clientWidth; + const chartHeight = document.getElementById(sampleObject.domId) + .parentNode.parentNode.clientHeight; + const left = document.getElementById(sampleObject.domId).parentNode + .parentNode.offsetLeft; + const top = document.getElementById(sampleObject.domId).parentNode + .parentNode.offsetTop; + const echartTip = document.querySelector('#echartTip'); + echartTip.style.top = `${top + chartHeight - 60}px`; + if (left > echartTip.clientWidth) { + echartTip.style.left = `${left - echartTip.clientWidth}px`; + } else { + echartTip.style.left = `${left + chartWidth}px`; + } + } else { + const width = document.querySelector('#echartTip').clientWidth; + const height = document.querySelector('#echartTip').clientHeight; + const screenWidth = document.body.scrollWidth; + const screenHeight = document.body.scrollHeight; + const scrollTop = document.querySelector( + '.cl-histogram-show-data-content', + ).scrollTop; + const offsetTop = document.querySelector( + '.cl-histogram-show-data-content', + ).offsetTop; + if (height + e.event.y + 20 > screenHeight && screenHeight > height) { + document.querySelector('#echartTip').style.top = `${e.event.y + + scrollTop - + height - + 20 - + offsetTop}px`; + } else { + document.querySelector('#echartTip').style.top = `${e.event.y + + scrollTop + + 20 - + offsetTop}px`; + } + if (width + e.event.x + 50 > screenWidth && screenWidth > width) { + document.querySelector('#echartTip').style.left = `${e.event.x - + width - + 20}px`; + } else { + document.querySelector('#echartTip').style.left = `${e.event.x + + 20}px`; + } + } - this.zrDrawElement.tooltipX = new echarts.graphic.Text({ - position: [itemX, gridRect.y + gridRect.height], - style: { - text: Math.round(x * 1000) / 1000, - textFill: '#fff', - textAlign: 'center', - fontSize: 12, - textBackgroundColor: '#333', - textBorderWidth: 2, - textPadding: [5, 7], - rich: {}, - }, - z: 2000, - }); - sampleObject.zr.add(this.zrDrawElement.tooltipX); - if (curViewName === 1 && linePoints && linePoints.length) { - let text = ''; - if (yIndex) { - text = this.yAxisFormatter(sampleIndex, yIndex); - } - this.zrDrawElement.tooltipY = new echarts.graphic.Text({ - position: [ - gridRect.x + gridRect.width, - linePoints[linePoints.length - 1][1], - ], - style: { - text: text, - textFill: '#fff', - textVerticalAlign: 'middle', - fontSize: 12, - textBackgroundColor: '#333', - textBorderWidth: 2, - textPadding: [5, 7], - rich: {}, - }, - z: 2000, - }); - sampleObject.zr.add(this.zrDrawElement.tooltipY); + this.zrDrawElement.tooltipX = new echarts.graphic.Text({ + position: [itemX, gridRect.y + gridRect.height], + style: { + text: Math.round(x * 1000) / 1000, + textFill: '#fff', + textAlign: 'center', + fontSize: 12, + textBackgroundColor: '#333', + textBorderWidth: 2, + textPadding: [5, 7], + rich: {}, + }, + z: 2000, + }); + sampleObject.zr.add(this.zrDrawElement.tooltipX); + if (this.curViewName === 1 && linePoints && linePoints.length) { + let text = ''; + if (yIndex !== null) { + text = this.yAxisFormatter(sampleObject, hoveredItem.step); + } + this.zrDrawElement.tooltipY = new echarts.graphic.Text({ + position: [ + gridRect.x + gridRect.width, + linePoints[linePoints.length - 1][1], + ], + style: { + text: text, + textFill: '#fff', + textVerticalAlign: 'middle', + fontSize: 12, + textBackgroundColor: '#333', + textBorderWidth: 2, + textPadding: [5, 7], + rich: {}, + }, + z: 2000, + }); + sampleObject.zr.add(this.zrDrawElement.tooltipY); + } + } + }, + /** + * get convert point + * @param {Array} pt value + * @param {Object} sampleObject sampleObject + * @return {Array} + */ + getCoord(pt, sampleObject) { + return sampleObject.charObj.convertToPixel('grid', pt); + }, + /** + * find nearest value + * @param {Object} sampleObject sampleObject + * @param {Array} eventPoint value + * @return {Object} + */ + findNearestValue(sampleObject, eventPoint) { + if ( + !eventPoint || + !eventPoint.length || + !sampleObject || + !sampleObject.charObj || + !sampleObject.oriData + ) { + return; + } + const value = sampleObject.charObj.convertFromPixel('grid', eventPoint); + if (!value || !value.length) { + return; + } + let binIndex = null; + let yIndex = null; + let nearestX = Infinity; + let nearestY = -Infinity; + let nearestYData = Infinity; + const gridRect = sampleObject.charObj + .getModel() + .getComponent('grid', 0) + .coordinateSystem.getRect(); + const gridRectY = gridRect.y - 10; + const x = value[0]; + sampleObject.chartData.forEach((dataItem, i) => { + let distY; + let yAxis; + for (let k = 0; k < dataItem.items.length - 1; k++) { + const item = dataItem.items[k]; + const itemNext = dataItem.items[k + 1]; + const nextX = itemNext[2]; + const nextZ = itemNext[3]; + if (item.length >= 4) { + if (item[2] < x && nextX >= x) { + const proportionX = (x - item[2]) / (nextX - item[2]); + yAxis = (nextZ - item[3]) * proportionX + item[3]; + distY = Math.abs(value[1] - yAxis); + break; } } + } + if (this.curViewName === 0 && distY < nearestYData) { + nearestYData = distY; + yIndex = i; + } else if (this.curViewName === 1) { + const pt = this.getCoord([x, dataItem.step], sampleObject); + const ptStep = pt[1]; + pt[1] -= + ((yAxis - sampleObject.oriData.minZ) / + (sampleObject.oriData.maxZ - sampleObject.oriData.minZ)) * + gridRectY; + if ( + eventPoint[1] > pt[1] && + eventPoint[1] < ptStep && + ptStep > nearestY + ) { + nearestY = ptStep; + yIndex = i; + } + } + }); + if (yIndex === null && this.curViewName === 1) { + sampleObject.chartData.forEach((item, index) => { + if (index > value[1]) { + yIndex = yIndex === null ? index : Math.min(yIndex, index); + } + }); + } + if (yIndex !== null) { + const yData = sampleObject.chartData[yIndex].items; + yData.forEach((ele, index) => { + const distX = Math.abs(ele[2] - value[0]); + if (distX < nearestX) { + nearestX = distX; + binIndex = index; + } }); + binIndex = + binIndex === 0 + ? 1 + : binIndex === yData.length - 1 + ? yData.length - 2 + : binIndex; } + return { + binIndex, + yIndex, + }; }, dealrelativeTime(time) { const arr = time.split(' '); const str = arr[0] + ' ' + arr[1] + ' ' + arr[2] + ',' + ' ' + arr[4]; return str; }, + clearZrData(sampleObject) { + if (sampleObject && sampleObject.zr) { + this.removeTooltip(sampleObject); + sampleObject.zr.off('mouseout', 'mousemove'); + sampleObject.zr = null; + } + }, /** * remove tooltip - * @param {Number} sampleIndex sampleIndex + * @param {Number} sampleObject sampleObject */ - removeTooltip(sampleIndex) { - const sampleObject = this.originDataArr[sampleIndex]; - if (sampleObject.zr) { + removeTooltip(sampleObject) { + if (sampleObject && sampleObject.zr) { + if (this.zrDrawElement.hoverDots) { + this.zrDrawElement.hoverDots.forEach((dot) => + sampleObject.zr.remove(dot), + ); + } if (this.zrDrawElement.hoverLine) { sampleObject.zr.remove(this.zrDrawElement.hoverLine); } @@ -1005,15 +974,6 @@ export default { if (this.zrDrawElement.tooltipY) { sampleObject.zr.remove(this.zrDrawElement.tooltipY); } - if ( - this.zrDrawElement.hoverDots && - this.zrDrawElement.hoverDots.length - ) { - this.zrDrawElement.hoverDots.forEach((dot) => - sampleObject.zr.remove(dot), - ); - this.zrDrawElement.hoverDots.length = 0; - } if (this.zrDrawElement.tooltipX) { sampleObject.zr.remove(this.zrDrawElement.tooltipX); } @@ -1022,16 +982,16 @@ export default { getValue(seriesData, dataIndex, i) { return seriesData[dataIndex][i]; }, - makePolyPoints(dataIndex, getCoord, yValueMapHeight, charOption) { + makePolyPoints(dataIndex, getCoord, yValueMapHeight, sampleObject) { const points = []; - const rawData = charOption.seriesData; - const maxZ = charOption.maxZ; - const minZ = charOption.minZ; + const rawData = sampleObject.oriData.seriesData; + const maxZ = sampleObject.oriData.maxZ; + const minZ = sampleObject.oriData.minZ; for (let i = 0; i < rawData[dataIndex].length; ) { const x = this.getValue(rawData, dataIndex, i++); const y = this.getValue(rawData, dataIndex, i++); const z = this.getValue(rawData, dataIndex, i++); - const pt = getCoord([x, y]); + const pt = getCoord([x, y], sampleObject); // linear map in z axis pt[1] -= ((z - minZ) / (maxZ - minZ)) * yValueMapHeight; points.push(pt); @@ -1044,10 +1004,11 @@ export default { ? dataItem.histograms[0].wall_time : 0; dataItem.histograms.forEach((histogram, index) => { + const step = histogram.step.toString(); const chartItem = { wall_time: histogram.wall_time, relative_time: histogram.wall_time - wallTimeInit, - step: `${histogram.step}`, + step: step, items: [], }; const chartArr = []; @@ -1057,7 +1018,7 @@ export default { if (!filter.length) { chartArr.push([ histogram.wall_time, - `${histogram.step}`, + step, xData, Math.floor(bucket[2]), ]); @@ -1068,32 +1029,26 @@ export default { const minItem = chartArr[0][2]; const maxItem = chartArr[chartArr.length - 1][2]; const chartAll = [ - [histogram.wall_time, `${histogram.step}`, minItem, 0], - ].concat(chartArr, [ - [histogram.wall_time, `${histogram.step}`, maxItem, 0], - ]); + [histogram.wall_time, step, minItem, 0], + ].concat(chartArr, [[histogram.wall_time, step, maxItem, 0]]); chartItem.items = chartAll; chartData.push(chartItem); } }); - return {tag: dataItem.tag, train_id: dataItem.train_id, chartData}; + return chartData; }, - formatDataToChar(dataIndex) { - const dataItem = this.originDataArr[dataIndex].charData.oriData; + formatDataToChar(item) { + const chartData = item.chartData; const seriesData = []; - let maxStep = -Infinity; - let minStep = Infinity; let maxX = -Infinity; let minX = Infinity; let maxZ = -Infinity; let minZ = Infinity; - const girdData = []; - if (dataItem.chartData && dataItem.chartData.length) { - dataItem.chartData.forEach((histogram) => { + const gridData = []; + if (chartData && chartData.length) { + chartData.forEach((histogram) => { const seriesItem = []; - girdData.push(histogram.step); - maxStep = Math.max(maxStep, histogram.step); - minStep = Math.min(minStep, histogram.step); + gridData.push(histogram.step); histogram.items.forEach((bucket) => { if (this.curViewName === 0) { seriesItem.push([bucket[2], bucket[3]]); @@ -1108,26 +1063,24 @@ export default { seriesData.push(seriesItem); }); } - return { + item.oriData = { seriesData, - maxStep, - minStep, maxX, minX, maxZ, minZ, - girdData, + gridData, }; }, - formatCharOption(sampleIndex, charOption) { + formatCharOption(sampleObject) { const colorMin = '#346E69'; const colorMax = '#EBFFFD'; + const oriData = sampleObject.oriData; const colorArr = this.getGrientColor( colorMin, colorMax, - charOption.seriesData.length, + oriData.seriesData.length, ); - const sampleObject = this.originDataArr[sampleIndex]; const fullScreenFun = this.toggleFullScreen; const curAxisName = this.curAxisName; const option = { @@ -1138,13 +1091,13 @@ export default { bottom: 60, }, xAxis: { - max: charOption.maxX, - min: charOption.minX, + max: oriData.maxX, + min: oriData.minX, axisLine: {onZero: false}, axisLabel: { fontSize: '11', formatter: function(value) { - if (value.toString().length > 6) { + if (value.toString().length >= 6) { return value.toExponential(3); } else { return Math.round(value * 1000) / 1000; @@ -1158,6 +1111,7 @@ export default { axisLine: {onZero: false, show: false}, splitLine: {show: true}, axisTick: {show: false}, + boundaryGap: false, axisLabel: { fontSize: '11', }, @@ -1181,7 +1135,7 @@ export default { }, icon: CommonProperty.fullScreenIcon, onclick() { - fullScreenFun(sampleIndex); + fullScreenFun(sampleObject); }, }, }, @@ -1189,7 +1143,7 @@ export default { }; if (this.curViewName === 1) { const seriesData = []; - charOption.seriesData.forEach((item, dataIndex) => { + oriData.seriesData.forEach((item, dataIndex) => { const dataItem = { name: item[1], value: item, @@ -1208,7 +1162,7 @@ export default { params.dataIndex, api.coord, params.coordSys.y - 10, - charOption, + sampleObject, ); return { @@ -1226,7 +1180,7 @@ export default { data: seriesData, }, ]; - option.yAxis.data = charOption.girdData; + option.yAxis.data = oriData.gridData; option.yAxis.type = 'category'; option.grid.top = 126; if (curAxisName === 2 && sampleObject.fullScreen) { @@ -1235,12 +1189,12 @@ export default { option.yAxis.inverse = true; const that = this; option.yAxis.axisLabel.formatter = function(value) { - return that.yAxisFormatter(sampleIndex, value); + return that.yAxisFormatter(sampleObject, value); }; } else if (this.curViewName === 0) { option.color = colorArr; option.series = []; - charOption.seriesData.forEach((k) => { + oriData.seriesData.forEach((k) => { option.series.push({ type: 'line', symbol: 'none', @@ -1253,12 +1207,9 @@ export default { } return option; }, - yAxisFormatter(sampleIndex, value) { - const sampleObject = this.originDataArr[sampleIndex]; + yAxisFormatter(sampleObject, value) { let data = ''; - const filter = sampleObject.charData.oriData.chartData.filter( - (k) => k.step === value, - ); + const filter = sampleObject.chartData.filter((k) => k.step === value); if (filter.length) { if (this.curAxisName === 2) { data = sampleObject.fullScreen @@ -1332,22 +1283,21 @@ export default { } return colorResult; }, - toggleFullScreen(sampleIndex) { - const sampleObject = this.originDataArr[sampleIndex]; + toggleFullScreen(sampleObject) { if (!sampleObject) { return; } - this.removeTooltip(sampleIndex); + this.removeTooltip(sampleObject); sampleObject.fullScreen = !sampleObject.fullScreen; if (sampleObject.fullScreen) { if (this.curAxisName === 2) { sampleObject.charObj.setOption({grid: {right: 140}}); } - sampleObject.charData.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor = + sampleObject.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor = '#3E98C5'; } else { sampleObject.charObj.setOption({grid: {right: 40}}); - sampleObject.charData.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor = + sampleObject.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor = '#6D7278'; } setTimeout(() => { diff --git a/mindinsight/ui/src/views/train-manage/model-traceback.vue b/mindinsight/ui/src/views/train-manage/model-traceback.vue index 345be3fbfdd3a6f919c5563f439d3c41ec70879b..cbd9ed2a6149354ec843b271b6b9d6ac3027a151 100644 --- a/mindinsight/ui/src/views/train-manage/model-traceback.vue +++ b/mindinsight/ui/src/views/train-manage/model-traceback.vue @@ -149,6 +149,7 @@ export default { 'test_dataset_count', 'epoch', 'batch_size', + 'device_num', ], // All keys whose values are int echart: { chart: null, diff --git a/mindinsight/ui/src/views/train-manage/training-dashboard.vue b/mindinsight/ui/src/views/train-manage/training-dashboard.vue index 228ddff3744a0dc4cd7a6c4c96bea3f4a5d0f016..1f5d76bbf0d71495ca281e4b1c64ad28d9439972 100644 --- a/mindinsight/ui/src/views/train-manage/training-dashboard.vue +++ b/mindinsight/ui/src/views/train-manage/training-dashboard.vue @@ -21,6 +21,12 @@ limitations under the License.
{{$t('trainingDashboard.trainingDashboardTitle')}}
+
+ {{$t("symbols.leftbracket")}} + {{$t("trainingDashboard.summaryDirPath")}} + {{summaryPath}} + {{$t("symbols.rightbracket")}} +
{ + const step = histogram.step.toString(); const chartItem = { wall_time: histogram.wall_time, - step: `${histogram.step}`, + step: step, items: [], }; const chartArr = []; @@ -817,7 +827,7 @@ export default { if (!filter.length) { chartArr.push([ histogram.wall_time, - `${histogram.step}`, + step, xData, Math.floor(bucket[2]), ]); @@ -828,33 +838,26 @@ export default { const minItem = chartArr[0][2]; const maxItem = chartArr[chartArr.length - 1][2]; const chartAll = [ - [histogram.wall_time, `${histogram.step}`, minItem, 0], - ].concat(chartArr, [ - [histogram.wall_time, `${histogram.step}`, maxItem, 0], - ]); + [histogram.wall_time, step, minItem, 0], + ].concat(chartArr, [[histogram.wall_time, step, maxItem, 0]]); chartItem.items = chartAll; chartData.push(chartItem); } }); - return {tag: dataItem.tag, train_id: dataItem.train_id, chartData}; + return chartData; }, formatDataToChar() { - const dataItem = this.histogramData; + const chartData = this.histogramData; const seriesData = []; - let maxStep = -Infinity; - let minStep = Infinity; let maxX = -Infinity; let minX = Infinity; let maxZ = -Infinity; let minZ = Infinity; const gridData = []; - if (dataItem.chartData && dataItem.chartData.length) { - dataItem.chartData.forEach((histogram) => { + if (chartData && chartData.length) { + chartData.forEach((histogram) => { const seriesItem = []; gridData.push(histogram.step); - maxStep = Math.max(maxStep, histogram.step); - minStep = Math.min(minStep, histogram.step); - histogram.items.sort((a, b) => a[0] - b[0]); histogram.items.forEach((bucket) => { seriesItem.push(bucket[2], histogram.step, bucket[3]); maxX = Math.max(maxX, bucket[2]); @@ -865,10 +868,8 @@ export default { seriesData.push(seriesItem); }); } - return { + this.histogramOriData = { seriesData, - maxStep, - minStep, maxX, minX, maxZ, @@ -876,16 +877,17 @@ export default { gridData, }; }, - formatCharOption(charOption) { + formatCharOption() { const colorMin = '#346E69'; const colorMax = '#EBFFFD'; + const oriData = this.histogramOriData; const colorArr = this.getGrientColor( colorMin, colorMax, - charOption.seriesData.length, + oriData.seriesData.length, ); const seriesData = []; - charOption.seriesData.forEach((item, dataIndex) => { + oriData.seriesData.forEach((item, dataIndex) => { const dataItem = { name: item[1], value: item, @@ -903,13 +905,13 @@ export default { bottom: 43, }, xAxis: { - max: charOption.maxX, - min: charOption.minX, + max: oriData.maxX, + min: oriData.minX, axisLine: {onZero: false}, axisLabel: { fontSize: '11', formatter: function(value) { - if (value.toString().length > 6) { + if (value.toString().length >= 6) { return value.toExponential(3); } else { return Math.round(value * 1000) / 1000; @@ -925,6 +927,7 @@ export default { splitLine: {show: true}, inverse: true, axisTick: {show: false}, + boundaryGap: false, axisLabel: { fontSize: '11', }, @@ -938,7 +941,6 @@ export default { params.dataIndex, api.coord, params.coordSys.y - 10, - charOption, ); return { @@ -1021,10 +1023,9 @@ export default { }, /** * update sample data - * @param {Object} charOption data */ - updateHistogramSampleData(charOption) { - this.histogramOption = this.formatCharOption(charOption); + updateHistogramSampleData() { + this.histogramOption = this.formatCharOption(); setTimeout(() => { if (!this.histogramObj) { this.histogramObj = echarts.init( @@ -1038,11 +1039,11 @@ export default { getValue(seriesData, dataIndex, i) { return seriesData[dataIndex][i]; }, - makePolyPoints(dataIndex, getCoord, yValueMapHeight, charOption) { + makePolyPoints(dataIndex, getCoord, yValueMapHeight) { const points = []; - const rawData = charOption.seriesData; - const maxZ = charOption.maxZ; - const minZ = charOption.minZ; + const rawData = this.histogramOriData.seriesData; + const maxZ = this.histogramOriData.maxZ; + const minZ = this.histogramOriData.minZ; for (let i = 0; i < rawData[dataIndex].length; ) { const x = this.getValue(rawData, dataIndex, i++); const y = this.getValue(rawData, dataIndex, i++); @@ -1727,6 +1728,12 @@ export default { height: 56px; vertical-align: middle; background: #ffffff; + .path-message { + display: inline-block; + line-height: 20px; + padding: 18px 16px; + font-weight: bold; + } .cl-dashboard-top-title { float: left; color: #000000;