diff --git a/mindinsight/ui/src/views/train-manage/scalar.vue b/mindinsight/ui/src/views/train-manage/scalar.vue
index a6f701f23fb4b23128c86a5d5defe28111d2de0e..6de42cc2a0c82d4332f088213987216204e0b1aa 100644
--- a/mindinsight/ui/src/views/train-manage/scalar.vue
+++ b/mindinsight/ui/src/views/train-manage/scalar.vue
@@ -226,9 +226,11 @@ limitations under the License.
@@ -251,9 +253,11 @@ limitations under the License.
@@ -306,8 +310,8 @@ export default {
thresholdErrorMsg: '',
thresholdRelational: '',
thresholdValue: [
- {filterCondition: this.$t('scalar.lessThan'), value: ''},
- {filterCondition: this.$t('scalar.lessThan'), value: ''},
+ { filterCondition: this.$t('scalar.lessThan'), value: '' },
+ { filterCondition: this.$t('scalar.lessThan'), value: '' },
],
filterOptions: [
{
@@ -420,7 +424,7 @@ export default {
return;
}
document.title = `${decodeURIComponent(
- this.$route.query.train_id,
+ this.$route.query.train_id
)}-${this.$t('scalar.titleText')}-MindInsight`;
// Adding a Listener
window.addEventListener('resize', this.resizeCallback, false);
@@ -448,7 +452,7 @@ export default {
if (localStorage.getItem('thresholdCache')) {
try {
this.thresholdLocal = JSON.parse(
- localStorage.getItem('thresholdCache'),
+ localStorage.getItem('thresholdCache')
);
this.clearCache();
} catch (e) {
@@ -475,8 +479,8 @@ export default {
) {
delete this.thresholdLocal[this.decodeTrainingJobId];
localStorage.setItem(
- 'thresholdCache',
- JSON.stringify(this.thresholdLocal),
+ 'thresholdCache',
+ JSON.stringify(this.thresholdLocal)
);
}
}
@@ -492,81 +496,81 @@ export default {
train_id: this.trainingJobId,
};
RequestService.getSingleTrainJob(params, false)
- .then((res) => {
+ .then((res) => {
// error;
- if (
- !res ||
+ if (
+ !res ||
!res.data ||
!res.data.train_jobs ||
!res.data.train_jobs.length
- ) {
- this.initOver = true;
- return;
- }
- const tempTagList = [];
- const dataList = [];
- const propsList = [];
- const data = res.data.train_jobs[0];
- const runNmeColor = CommonProperty.commonColorArr[0];
- data.tags.forEach((tagObj) => {
- if (!this.oriDataDictionaries[tagObj]) {
- this.oriDataDictionaries[tagObj] = true;
- // Add the tag list
- tempTagList.push({
- label: tagObj,
- checked: true,
- show: true,
- });
- const sampleIndex = dataList.length;
- // Adding Chart Data
- dataList.push({
- tagName: tagObj,
- runNames: data.name,
- colors: runNmeColor,
- show: false,
- updateFlag: false,
- dataRemove: false,
- fullScreen: false,
- sampleIndex: sampleIndex,
- domId: 'prDom' + this.DomIdIndex,
- charData: {
- oriData: [],
- charOption: {},
- },
- zoomData: [null, null],
- zoomDataTimer: null,
- charObj: null,
- invalidData: false,
- });
-
- propsList.push({
- tagName: tagObj,
- runNames: data.name,
- colors: '',
- });
- this.DomIdIndex++;
- }
- });
- this.tagOperateList = tempTagList;
- this.tagPropsList = JSON.parse(JSON.stringify(tempTagList));
- if (dataList.length === 1) {
- dataList[0].fullScreen = true;
- }
- this.originDataArr = dataList;
- this.propsList = propsList;
+ ) {
this.initOver = true;
+ return;
+ }
+ const tempTagList = [];
+ const dataList = [];
+ const propsList = [];
+ const data = res.data.train_jobs[0];
+ const runNmeColor = CommonProperty.commonColorArr[0];
+ data.tags.forEach((tagObj) => {
+ if (!this.oriDataDictionaries[tagObj]) {
+ this.oriDataDictionaries[tagObj] = true;
+ // Add the tag list
+ tempTagList.push({
+ label: tagObj,
+ checked: true,
+ show: true,
+ });
+ const sampleIndex = dataList.length;
+ // Adding Chart Data
+ dataList.push({
+ tagName: tagObj,
+ runNames: data.name,
+ colors: runNmeColor,
+ show: false,
+ updateFlag: false,
+ dataRemove: false,
+ fullScreen: false,
+ sampleIndex: sampleIndex,
+ domId: 'prDom' + this.DomIdIndex,
+ charData: {
+ oriData: [],
+ charOption: {},
+ },
+ zoomData: [null, null],
+ zoomDataTimer: null,
+ charObj: null,
+ invalidData: false,
+ });
- this.$nextTick(() => {
- this.multiSelectedTagNames = this.$refs.multiselectGroupComponents.updateSelectedDic();
- // Obtains data on the current page
- this.updateTagInPage();
- this.resizeCallback();
- });
- }, this.requestErrorCallback)
- .catch((e) => {
- this.initOver = true;
- this.$message.error(this.$t('public.dataError'));
+ propsList.push({
+ tagName: tagObj,
+ runNames: data.name,
+ colors: '',
+ });
+ this.DomIdIndex++;
+ }
});
+ this.tagOperateList = tempTagList;
+ this.tagPropsList = JSON.parse(JSON.stringify(tempTagList));
+ if (dataList.length === 1) {
+ dataList[0].fullScreen = true;
+ }
+ this.originDataArr = dataList;
+ this.propsList = propsList;
+ this.initOver = true;
+
+ this.$nextTick(() => {
+ this.multiSelectedTagNames = this.$refs.multiselectGroupComponents.updateSelectedDic();
+ // Obtains data on the current page
+ this.updateTagInPage();
+ this.resizeCallback();
+ });
+ }, this.requestErrorCallback)
+ .catch((e) => {
+ this.initOver = true;
+ this.$message.error(this.$t('public.dataError'));
+ });
},
/**
@@ -614,108 +618,108 @@ export default {
};
RequestService.getScalarsSample(params)
- .then((res) => {
+ .then((res) => {
// error
- if (!res || !res.data || !res.data.metadatas) {
+ if (!res || !res.data || !res.data.metadatas) {
// canceled
- if (res.toString() === 'false') {
- return;
- }
- if (sampleObject.charObj) {
- sampleObject.charObj.clear();
- sampleObject.onePoint = false;
- }
+ if (res.toString() === 'false') {
return;
}
- let hasInvalidData = false;
-
if (sampleObject.charObj) {
- sampleObject.charObj.showLoading();
+ sampleObject.charObj.clear();
+ sampleObject.onePoint = false;
}
+ 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;
- // 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;
+ const tempObject = {
+ valueData: {
+ stepData: [],
+ absData: [],
+ relativeData: [],
+ },
+ logData: {
+ stepData: [],
+ absData: [],
+ relativeData: [],
+ },
+ };
+ let relativeTimeBench = 0;
+ if (resData.metadatas.length) {
+ relativeTimeBench = resData.metadatas[0].wall_time;
+ }
- if (hasInvalidData) {
- this.$set(sampleObject, 'invalidData', true);
- } else {
- this.$set(sampleObject, 'invalidData', false);
+ // 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.charOption = this.formateCharOption(
- sampleIndex,
- );
- const tempOption = sampleObject.charData.charOption;
- if (
- tempOption.series[0].data.length === 1 ||
+ sampleObject.charData.oriData[0] = tempObject;
+
+ if (hasInvalidData) {
+ this.$set(sampleObject, 'invalidData', true);
+ } else {
+ this.$set(sampleObject, 'invalidData', false);
+ }
+
+ sampleObject.charData.charOption = this.formateCharOption(
+ sampleIndex
+ );
+ const tempOption = sampleObject.charData.charOption;
+ if (
+ tempOption.series[0].data.length === 1 ||
sampleObject.onePoint
- ) {
- tempOption.series[0].showSymbol = true;
- } else {
- tempOption.series[0].showSymbol = false;
- }
+ ) {
+ tempOption.series[0].showSymbol = true;
+ } else {
+ tempOption.series[0].showSymbol = false;
+ }
- this.$forceUpdate();
+ this.$forceUpdate();
- this.$nextTick(() => {
- if (sampleObject.charObj) {
- sampleObject.charObj.hideLoading();
- }
- // Draw chart
- if (!this.compare) {
- this.updateOrCreateChar(sampleIndex, true);
- }
- });
- })
- .catch((e) => {
+ this.$nextTick(() => {
if (sampleObject.charObj) {
- sampleObject.charObj.clear();
+ sampleObject.charObj.hideLoading();
+ }
+ // Draw chart
+ if (!this.compare) {
+ this.updateOrCreateChar(sampleIndex, true);
}
});
+ })
+ .catch((e) => {
+ if (sampleObject.charObj) {
+ sampleObject.charObj.clear();
+ }
+ });
});
},
@@ -726,7 +730,7 @@ export default {
setOnePoint(sampleObject) {
const that = this;
- sampleObject.charObj.on('datazoom', function(params) {
+ sampleObject.charObj.on('datazoom', function (params) {
const xAxisObject = params.batch[0];
const yAxisObject = params.batch[1];
const charData = sampleObject.charData.charOption.series[0].data;
@@ -785,7 +789,7 @@ export default {
setRestore(sampleObject) {
const that = this;
- sampleObject.charObj.on('restore', function(params) {
+ sampleObject.charObj.on('restore', function (params) {
const charData = sampleObject.charData.charOption.series[0].data;
const tempCharOption = sampleObject.charData.charOption;
@@ -854,12 +858,12 @@ export default {
if (curOriData) {
if (sampleObject.log) {
dataObj.data = this.formateSmoothData(
- curOriData.logData[this.curBenchX],
+ curOriData.logData[this.curBenchX]
);
dataObjBackend.data = curOriData.logData[this.curBenchX];
} else {
dataObj.data = this.formateSmoothData(
- curOriData.valueData[this.curBenchX],
+ curOriData.valueData[this.curBenchX]
);
dataObjBackend.data = curOriData.valueData[this.curBenchX];
}
@@ -989,23 +993,23 @@ export default {
position: (point, params, dom, rect, size) => {
const curDom = document.getElementById(sampleObject.domId);
if (!curDom) {
- return {left: 0, bottom: '100%'};
+ return { left: 0, bottom: '100%' };
}
if (sampleObject.fullScreen) {
if (point[0] + size.contentSize[0] <= size.viewSize[0]) {
- return {left: point[0], bottom: '10%'};
+ return { left: point[0], bottom: '10%' };
} else {
- return {right: size.viewSize[0] - point[0], bottom: '10%'};
+ return { right: size.viewSize[0] - point[0], bottom: '10%' };
}
} else {
const parentNode = curDom.parentNode;
if (!parentNode) {
- return {left: 0, bottom: '100%'};
+ return { left: 0, bottom: '100%' };
}
if (parentNode.offsetLeft > size.contentSize[0]) {
- return {right: '100%', bottom: 0};
+ return { right: '100%', bottom: 0 };
} else {
- return {left: '100%', bottom: 0};
+ return { left: '100%', bottom: 0 };
}
}
},
@@ -1090,16 +1094,16 @@ export default {
`display:inline-block;">| ${parma.seriesName} | ` +
`${that.formateYaxisValue(parma.value[1])} | ` +
`${that.formateYaxisValue(
- curSerieOriData.stepData[parma.dataIndex][1],
+ curSerieOriData.stepData[parma.dataIndex][1]
)} | ` +
`${curSerieOriData.stepData[parma.dataIndex][0]} | ` +
`${curSerieOriData.relativeData[
- parma.dataIndex
+ parma.dataIndex
][0].toFixed(3)}${unit} | ` +
`${that.dealrelativeTime(
- new Date(
- curSerieOriData.absData[parma.dataIndex][0] * 1000,
- ).toString(),
+ new Date(
+ curSerieOriData.absData[parma.dataIndex][0] * 1000
+ ).toString()
)} | ` +
``;
}
@@ -1184,9 +1188,9 @@ export default {
this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName]
) {
const tempStorgeArr = JSON.parse(
- JSON.stringify(
- this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName],
- ),
+ JSON.stringify(
+ this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName]
+ )
);
let pieceStr = '';
pieceStr = this.formatePieceStr(tempStorgeArr);
@@ -1220,8 +1224,8 @@ export default {
// Updating chart option
if (sampleObject.updateFlag) {
sampleObject.charObj.setOption(
- sampleObject.charData.charOption,
- sampleObject.dataRemove,
+ sampleObject.charData.charOption,
+ sampleObject.dataRemove
);
sampleObject.updateFlag = false;
sampleObject.dataRemove = false;
@@ -1229,8 +1233,8 @@ export default {
} else {
// creat chart
sampleObject.charObj = echarts.init(
- document.getElementById(sampleObject.domId),
- null,
+ document.getElementById(sampleObject.domId),
+ null
);
sampleObject.charObj.setOption(sampleObject.charData.charOption, true);
this.setOnePoint(sampleObject);
@@ -1336,13 +1340,13 @@ export default {
const oriIndexData = sampleObject.charData.oriData[index];
if (sampleObject.log) {
seriesData[index * 2].data = this.formateSmoothData(
- oriIndexData.logData[this.curBenchX],
+ oriIndexData.logData[this.curBenchX]
);
seriesData[index * 2 + 1].data =
oriIndexData.logData[this.curBenchX];
} else {
seriesData[index * 2].data = this.formateSmoothData(
- oriIndexData.valueData[this.curBenchX],
+ oriIndexData.valueData[this.curBenchX]
);
seriesData[index * 2 + 1].data =
oriIndexData.valueData[this.curBenchX];
@@ -1556,56 +1560,56 @@ export default {
train_id: this.trainingJobId,
};
RequestService.getSingleTrainJob(params, ignoreError)
- .then((res) => {
- if (this.isReloading) {
- this.$store.commit('setIsReload', false);
- this.isReloading = false;
- }
+ .then((res) => {
+ if (this.isReloading) {
+ this.$store.commit('setIsReload', false);
+ this.isReloading = false;
+ }
- // Fault tolerance processing
- if (!res || !res.data) {
- return;
- } else if (!res.data.train_jobs || !res.data.train_jobs.length) {
- this.clearAllData();
- return;
- }
- const data = res.data.train_jobs[0];
- // Delete the data that does not exist
- const tagRemoveFlag = this.removeNonexistentData(data);
+ // Fault tolerance processing
+ if (!res || !res.data) {
+ return;
+ } else if (!res.data.train_jobs || !res.data.train_jobs.length) {
+ this.clearAllData();
+ return;
+ }
+ const data = res.data.train_jobs[0];
+ // Delete the data that does not exist
+ const tagRemoveFlag = this.removeNonexistentData(data);
- // Check whether new data exists and add it to the page
- const tagAddFlag = this.checkNewDataAndComplete(data);
+ // Check whether new data exists and add it to the page
+ const tagAddFlag = this.checkNewDataAndComplete(data);
- this.$nextTick(() => {
- this.multiSelectedTagNames = this.$refs.multiselectGroupComponents.updateSelectedDic();
- this.updateTagInPage(!tagRemoveFlag && !tagAddFlag);
- this.resizeCallback();
- });
+ this.$nextTick(() => {
+ this.multiSelectedTagNames = this.$refs.multiselectGroupComponents.updateSelectedDic();
+ this.updateTagInPage(!tagRemoveFlag && !tagAddFlag);
+ this.resizeCallback();
+ });
- const tempTagList = [];
- const propsList = [];
- // Initial chart data
- data.tags.forEach((tagObj) => {
+ const tempTagList = [];
+ const propsList = [];
+ // Initial chart data
+ data.tags.forEach((tagObj) => {
// Check whether the tag with the same name exists
- tempTagList.push({
- label: tagObj,
- checked: true,
- show: true,
- });
+ tempTagList.push({
+ label: tagObj,
+ checked: true,
+ show: true,
+ });
- // Add the tag list.
- propsList.push({
- tagName: tagObj,
- runNames: data.name,
- colors: '',
- });
+ // Add the tag list.
+ propsList.push({
+ tagName: tagObj,
+ runNames: data.name,
+ colors: '',
});
- this.tagPropsList = tempTagList;
- this.propsList = propsList;
- }, this.requestErrorCallback)
- .catch((e) => {
- this.$message.error(this.$t('public.dataError'));
});
+ this.tagPropsList = tempTagList;
+ this.propsList = propsList;
+ }, this.requestErrorCallback)
+ .catch((e) => {
+ this.$message.error(this.$t('public.dataError'));
+ });
},
/**
@@ -1711,15 +1715,15 @@ export default {
if (index % 2 === 0) {
if (log) {
serie.data = this.formateSmoothData(
- sampleObject.charData.oriData[index / 2].logData[
- this.curBenchX
- ],
+ sampleObject.charData.oriData[index / 2].logData[
+ this.curBenchX
+ ]
);
} else {
serie.data = this.formateSmoothData(
- sampleObject.charData.oriData[index / 2].valueData[
- this.curBenchX
- ],
+ sampleObject.charData.oriData[index / 2].valueData[
+ this.curBenchX
+ ]
);
}
}
@@ -1815,13 +1819,13 @@ export default {
tempOriData.forEach((originData, index) => {
if (log) {
tempOption.series[index * 2].data = this.formateSmoothData(
- tempOriData[index].logData[this.curBenchX],
+ tempOriData[index].logData[this.curBenchX]
);
tempOption.series[index * 2 + 1].data =
tempOriData[index].logData[this.curBenchX];
} else {
tempOption.series[index * 2].data = this.formateSmoothData(
- tempOriData[index].valueData[this.curBenchX],
+ tempOriData[index].valueData[this.curBenchX]
);
tempOption.series[index * 2 + 1].data =
tempOriData[index].valueData[this.curBenchX];
@@ -1908,7 +1912,7 @@ export default {
this.thresholdLocal[this.decodeTrainingJobId][sampleItem.tagName]
) {
delete this.thresholdLocal[this.decodeTrainingJobId][
- sampleItem.tagName
+ sampleItem.tagName
];
}
this.currentTagName = sampleItem.tagName;
@@ -2257,7 +2261,7 @@ export default {
this.originDataArr.forEach((sampleObject) => {
if (this.multiSelectedTagNames[sampleObject.tagName]) {
this.thresholdLocal[this.decodeTrainingJobId][
- sampleObject.tagName
+ sampleObject.tagName
] = chartPieces;
sampleObject.pieceStr = pieceStr;
@@ -2268,14 +2272,14 @@ export default {
});
} else {
this.thresholdLocal[this.decodeTrainingJobId][
- this.currentTagName
+ this.currentTagName
] = chartPieces;
this.currentSample.pieceStr = pieceStr;
this.setVisualMap(this.currentSample, chartPieces);
}
localStorage.setItem(
- 'thresholdCache',
- JSON.stringify(this.thresholdLocal),
+ 'thresholdCache',
+ JSON.stringify(this.thresholdLocal)
);
this.thresholdDialogVisible = false;
@@ -2340,11 +2344,11 @@ export default {
this.thresholdLocal &&
this.thresholdLocal[this.decodeTrainingJobId] &&
this.thresholdLocal[this.decodeTrainingJobId][
- sampleObject.tagName
+ sampleObject.tagName
]
) {
delete this.thresholdLocal[this.decodeTrainingJobId][
- sampleObject.tagName
+ sampleObject.tagName
];
sampleObject.pieceStr = '';
const tempCharOption = sampleObject.charData.charOption;
@@ -2371,7 +2375,7 @@ export default {
this.thresholdLocal[this.decodeTrainingJobId][this.currentTagName]
) {
delete this.thresholdLocal[this.decodeTrainingJobId][
- this.currentTagName
+ this.currentTagName
];
this.currentSample.pieceStr = '';
const tempCharOption = this.currentSample.charData.charOption;
@@ -2383,7 +2387,7 @@ export default {
tempCharOption.visualMap = null;
tempCharOption.series[0].markLine = null;
tempCharOption.series[0].lineStyle[
- 'color'
+ 'color'
] = this.currentSample.colors;
}
this.currentSample.charObj.setOption(tempCharOption, false);
@@ -2391,8 +2395,8 @@ export default {
}
this.clearCache();
localStorage.setItem(
- 'thresholdCache',
- JSON.stringify(this.thresholdLocal),
+ 'thresholdCache',
+ JSON.stringify(this.thresholdLocal)
);
this.delThresholdVisible = false;
},
@@ -2408,11 +2412,25 @@ export default {
.cl-scalar-manage {
height: 100%;
- .el-dialog__title {
- line-height: 24px;
- font-size: 18px;
- color: #303133;
- font-weight: bold;
+ .el-dialog {
+ border-radius: 4px;
+ }
+
+ .el-dialog__header {
+ padding: 15px 15px 10px;
+ font-size: 14px;
+
+ .el-dialog__title {
+ font-size: 14px;
+ }
+ }
+
+ .el-dialog__body {
+ padding: 10px 15px;
+ }
+
+ .el-dialog__footer {
+ padding: 5px 15px 10px;
}
.w60 {
@@ -2776,7 +2794,7 @@ export default {
}
.fs16 {
- font-size: 16px;
+ font-size: 14px;
color: #6c7280;
width: 180px;
}
@@ -2789,17 +2807,6 @@ export default {
}
.delDialog {
- .el-dialog__header {
- padding: 15px 15px 10px;
- }
- .el-dialog__title {
- font-weight: normal;
- line-height: 18px;
- }
- .el-dialog__body {
- padding: 10px 15px;
- }
-
.delThresholdItem {
display: flex;
margin-bottom: 10px;