-
- ![]()
-
+ {{$t("public.dataLoading")}}
-
+
+
- {{$t("summaryManage.modelTraceback")}}
+ {{$t("summaryManage.dataTraceback")}}
-
-
-
+
+
+
+ ![]()
+
+ {{$t("public.dataLoading")}}
+
+
+
+
-
-
-
+
+
- {{$t('modelTraceback.displayColumn')}}
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
+ :disabled="basearr.length > checkOptions.length">
+ {{ $t('public.deselectAll')}}
+
+
+
+
+ {{ $t('modelTraceback.showAllData') }}
+
-
+
+
-
-
-
+
+
+
+ {{ $t('modelTraceback.hide')}}
+
+
- {{ $t('modelTraceback.showAllData') }}
+ class="custom-btn"
+ @click="unhideRecords"
+ plain>
+ {{$t('modelTraceback.unhide')}}
-
-
-
-
- {{ $t('modelTraceback.hide')}}
-
-
- {{$t('modelTraceback.unhide')}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ scope.row[key] }}
-
-
- {{formatNumber(key, scope.row[key]) }}
-
-
-
-
-
-
-
- {{scope.column.label}}
-
-
-
-
-
-
-
-
-
+ {{$t('public.remark')}}
- {{$t('modelTraceback.remarkTips')}}
-
+
+
+
+
+
+
+
+
+
+
+
+ {{ scope.row[key] }}
+
+
+ {{formatNumber(key, scope.row[key]) }}
+
+
+
+
+
+
+
+ {{scope.column.label}}
+
+
+
+
+
+
+
+
+
- {{$t('public.remark')}}
+ {{$t('modelTraceback.remarkTips')}}
+ {{ scope.row.remark }}
-
-
-
-
-
-
-
- {{ $t('modelTraceback.remarkValidation')}}
+
-
-
-
- {{ scope.row.remark }}
+
+
+
-
+ {{ $t('modelTraceback.remarkValidation')}}
+
- ![]()
- ![]()
-
-
-
-
-
-
-
-
-
- ![]()
-
- - {{ $t('public.noData') }} -
-
-
- {{ $t('dataTraceback.noDataFound') }}
-
-
- {{ $t('dataTraceback.noDataFound') }}
-- {{ $t('dataTraceback.click') }} - {{ $t('modelTraceback.showAllDataBtn') }} - {{ $t('dataTraceback.viewAllData') }} +
+
+ ![]()
+
+ {{ $t('public.noData') }}
+
+
+ {{ $t('dataTraceback.noDataFound') }}
+
+
{{ $t('dataTraceback.noDataFound') }}
++ {{ $t('dataTraceback.click') }} + {{ $t('modelTraceback.showAllDataBtn') }} + {{ $t('dataTraceback.viewAllData') }} +
+
-
-
-
-
-
-
- {{ scope.row.value }}
-
-
-
-
-
-
- {{ detailsDataTitle }}
-
-
-
-
-
- ![]()
-
-
-
-
-
- {{ $t('public.clear')}}
-
+
+
+
+
+
+
+
+ {{ scope.row.value }}
+
+
+
+
+
+
+ {{ detailsDataTitle }}
+
+
+
@@ -528,13 +535,8 @@ export default {
},
computed: {},
mounted() {
- this.imageList = [];
- for (let i = 1; i <= 10; i++) {
- const obj = {};
- obj.number = i;
- obj.iconAdd = require('@/assets/images/icon' + obj.number + '.svg');
- this.imageList.push(obj);
- }
+ // Set the image display of the tag
+ this.setTagImage();
document.title = `${this.$t('summaryManage.dataTraceback')}-MindInsight`;
document.addEventListener('click', this.blurFloat, true);
this.$nextTick(() => {
@@ -542,212 +544,659 @@ export default {
});
},
methods: {
- blurFloat(event) {
- const domArr = document.querySelectorAll('.icon-dialog');
- const path = event.path || (event.composedPath && event.composedPath());
- const isActiveDom = path.some((item) => {
- return item.className === 'icon-dialog';
- });
- if (!isActiveDom) {
- this.removeIconBorder();
- domArr.forEach((item) => {
- item.style.display = 'none';
- });
- this.tagDialogShow = false;
- }
- },
- /**
- * Display of the icon dialog box
- * @param {Object} row
- * @param {Object} scope
- * @param {Object} event
- */
- showAllIcon(row, scope, event) {
- this.tagScope = scope;
- this.iconValue = row.tag >= 0 ? row.tag : 0;
- if (this.tagDialogShow) {
- this.tagDialogShow = false;
- this.removeIconBorder();
- return;
- }
- this.addIconBorder(row);
- this.tagDialogShow = true;
- const ev = window.event || event;
- document.getElementById('tag-dialog').style.top = ev.clientY - 130 + 'px';
- },
-
- /**
- * Add icon border style
- * @param {Object} row
- */
- addIconBorder(row) {
- const iconImage = document.querySelectorAll('.icon-image');
- iconImage.forEach((item, index) => {
- if (index + 1 === row.tag) {
- item.classList.add('icon-border');
- }
- });
- },
-
- /**
- * Remove icon border style
- */
- removeIconBorder() {
- const classArr = document.querySelectorAll('.icon-border');
- if (classArr.length) {
- classArr.forEach((item) => {
- item.classList.remove('icon-border');
- });
- }
- },
-
- /**
- * icon value change
- * @param {Object} row
- * @param {Number} num
- * @param {Object} event
- */
- iconValueChange(row, num, event) {
- const path = event.path || (event.composedPath && event.composedPath());
- const classWrap = path.find((item) => {
- return item.className === 'icon-dialog';
- });
- const classArr = classWrap.querySelectorAll('.icon-border');
- classArr.forEach((item) => {
- item.classList.remove('icon-border');
- });
- const htmDom = path.find((item) => {
- return item.nodeName === 'DIV';
- });
- htmDom.classList.add('icon-border');
- this.iconValue = num;
- },
-
- /**
- * Save the modification of the icon
- * @param {Object} scope
- */
- iconChangeSave(scope) {
- this.tagDialogShow = false;
- if (scope.row.tag === this.iconValue || this.iconValue === 0) {
- return;
+ setTagImage() {
+ this.imageList = [];
+ for (let i = 1; i <= 10; i++) {
+ const obj = {};
+ obj.number = i;
+ obj.iconAdd = require('@/assets/images/icon' + obj.number + '.svg');
+ this.imageList.push(obj);
}
- this.tagScope.row.tag = this.iconValue;
- const imgDom = document.querySelectorAll('.img' + scope.$index);
- imgDom.forEach((item) => {
- item.src = require('@/assets/images/icon' + this.iconValue + '.svg');
- });
- this.$forceUpdate();
- const params = {
- train_id: scope.row.summary_dir,
- body: {
- tag: this.tagScope.row.tag,
- },
- };
- this.putChangeToLineagesData(params);
- },
-
- /**
- * clear icon
- * @param {Object} scope
- * @param {Object} event
- */
- clearIcon(scope, event) {
- const path = event.path || (event.composedPath && event.composedPath());
- const classWrap = path.find((item) => {
- return item.className === 'icon-dialog';
- });
- const classArr = classWrap.querySelectorAll('.icon-border');
- classArr.forEach((item) => {
- item.classList.remove('icon-border');
- });
- this.tagDialogShow = false;
- this.iconValue = 0;
- this.tagScope.row.tag = 0;
- const imgDom = document.querySelectorAll('.img' + scope.$index);
- imgDom.forEach((item) => {
- item.src = require('@/assets/images/icon-down.svg');
- });
- const params = {
- train_id: scope.row.summary_dir,
- body: {
- tag: 0,
- },
- };
- this.putChangeToLineagesData(params);
- this.tagDialogShow = false;
- },
-
- /**
- * Cancel Save
- * @param {Object} row
- */
- cancelChangeIcon(row) {
- this.removeIconBorder();
- this.addIconBorder(row);
- this.tagDialogShow = false;
},
-
+ /** Data source page initialization**/
/**
- * Select all
+ * init
*/
- allSelect() {
- if (this.selectCheckAll) {
- return;
+ init() {
+ this.customizedColumnOptions =
+ this.$store.state.customizedColumnOptions || [];
+ this.table.columnOptions = Object.assign(
+ this.table.columnOptions,
+ this.customizedColumnOptions,
+ );
+ // Obtain the value of summary_dir from the store,
+ this.summaryDirList = this.$store.state.summaryDirList;
+ this.selectedBarList = this.$store.state.selectedBarList;
+ if (this.selectedBarList && this.selectedBarList.length) {
+ this.tableFilter = {};
+ } else {
+ this.tableFilter.lineage_type = {in: ['dataset']};
}
- this.selectArrayValue = [];
- this.checkOptions.forEach((item) => {
- this.selectArrayValue.push(item.value);
- });
-
- this.selectCheckAll = !this.selectCheckAll;
- this.$nextTick(() => {
- this.initChart();
- });
- const list = [];
- this.checkOptions.forEach((item) => {
- this.selectArrayValue.forEach((i) => {
- if (i === item.value) {
- list.push(i);
- }
- });
- });
-
- if (this.selectedBarList) {
- const resultArray = this.hideDataMarkTableData();
- this.table.column = this.dirPathList.concat(resultArray, list);
+ const params = {};
+ if (this.summaryDirList) {
+ this.tableFilter.summary_dir = {in: this.summaryDirList};
} else {
- this.table.column = this.dirPathList.concat(list);
+ this.tableFilter.summary_dir = undefined;
}
+ params.body = Object.assign({}, this.tableFilter);
+ this.queryLineagesData(params);
},
-
/**
- * deselect all
+ * Method of invoking the interface
+ * @param {Object} params
*/
- deselectAll() {
- this.selectArrayValue = [];
- this.checkOptions.forEach((item) => {
- if (item.disabled) {
- this.selectArrayValue.push(item.value);
- }
- });
- this.selectCheckAll = false;
- this.$nextTick(() => {
- this.initChart();
- });
- const list = [];
- this.checkOptions.forEach((item) => {
- this.selectArrayValue.forEach((i) => {
- if (i === item.value) {
- list.push(i);
- }
- });
- });
- if (this.selectedBarList) {
- const resultArray = this.hideDataMarkTableData();
- this.table.column = this.dirPathList.concat(resultArray, list);
+ queryLineagesData(params) {
+ RequestService.queryLineagesData(params)
+ .then(
+ (res) => {
+ this.initOver = true;
+ this.loading = false;
+ this.echartNoData = false;
+ if (!res || !res.data) {
+ this.nodata = true;
+ return;
+ }
+ this.nodata = false;
+ this.errorData = false;
+ this.customizedTypeObject = res.data.customized;
+ let keys = Object.keys(this.customizedTypeObject);
+ if (keys.length) {
+ keys = keys.map((i) => {
+ if (i.startsWith(this.replaceStr.userDefined)) {
+ return i.replace(this.replaceStr.userDefined, '[U]');
+ } else if (i.startsWith(this.replaceStr.metric)) {
+ return i.replace(this.replaceStr.metric, '[M]');
+ }
+ });
+ this.sortArray = this.sortArray.concat(keys);
+ }
+ // Model source tracing filtering parameters
+ this.selectedBarList = this.$store.state.selectedBarList;
+ if (this.selectedBarList && this.selectedBarList.length) {
+ const tempList = JSON.parse(JSON.stringify(res.data.object));
+ const list = [];
+ const metricKeys = {};
+ tempList.forEach((item) => {
+ if (item.model_lineage) {
+ const modelData = JSON.parse(
+ JSON.stringify(item.model_lineage),
+ );
+ modelData.model_size = parseFloat(
+ ((modelData.model_size || 0) / 1024 / 1024).toFixed(2),
+ );
+ const keys = Object.keys(modelData.metric || {});
+ if (keys.length) {
+ keys.forEach((key) => {
+ if (
+ modelData.metric[key] ||
+ modelData.metric[key] === 0
+ ) {
+ const temp = this.replaceStr.metric + key;
+ metricKeys[temp] = key;
+ modelData[temp] = modelData.metric[key];
+ }
+ });
+ delete modelData.metric;
+ }
+ const udkeys = Object.keys(modelData.user_defined || {});
+ if (udkeys.length) {
+ udkeys.forEach((key) => {
+ if (
+ modelData.user_defined[key] ||
+ modelData.user_defined[key] === 0
+ ) {
+ const temp = this.replaceStr.userDefined + key;
+ modelData[temp] = modelData.user_defined[key];
+ }
+ });
+ delete modelData.user_defined;
+ }
+ list.push(modelData);
+ }
+ });
+ this.modelObjectArray = [];
+ for (let i = 0; i < list.length; i++) {
+ const modelObject = {};
+ for (let j = 0; j < this.selectedBarList.length; j++) {
+ const tempObject = list[i];
+ const key = this.selectedBarList[j];
+ modelObject[key] = tempObject[key];
+ }
+ this.modelObjectArray.push(modelObject);
+ }
+ }
+
+ this.fixedSeries = [];
+ this.noFixedSeries = [];
+ this.checkedSeries = [];
+ this.lineagedata = this.formateOriginData(res.data);
+ this.totalSeries = this.lineagedata.fullNodeList;
+ if (!this.totalSeries.length) {
+ this.echartNoData = true;
+ this.nodata = true;
+ } else {
+ this.nodata = false;
+ }
+ this.totalSeries.forEach((nodeItem) => {
+ if (this.createType[nodeItem.name]) {
+ nodeItem.checked = true;
+ this.fixedSeries.push(nodeItem);
+ } else {
+ nodeItem.checked = false;
+ this.noFixedSeries.push(nodeItem);
+ }
+ });
+ this.noFixedSeries.forEach((item) => {
+ item.checked = true;
+ });
+ this.getCheckedSerList();
+ if (this.fixedSeries.length) {
+ this.setObjectValue(this.fixedSeries, true);
+ }
+ if (this.noFixedSeries.length) {
+ this.setObjectValue(this.noFixedSeries, false);
+ }
+ const list1 = this.fixedSeries.concat(this.noFixedSeries);
+ list1.forEach((item, index) => {
+ this.checkOptions[index] = {};
+ this.basearr[index] = {};
+ this.checkOptions[index].label = item.name;
+ this.checkOptions[index].value = item.id;
+ if (this.createType[item.name]) {
+ this.checkOptions[index].disabled = true;
+ this.basearr[index].disabled = true;
+ }
+ this.basearr[index].label = item.name;
+ this.basearr[index].value = item.id;
+ });
+ this.checkOptions.forEach((item) => {
+ this.selectArrayValue.push(item.value);
+ });
+ this.hidenDirChecked = this.$store.state.hidenDirChecked || [];
+ this.echart.brushData = this.lineagedata.serData;
+ if (this.hidenDirChecked.length) {
+ const listdada = this.lineagedata.serData.slice();
+ this.hidenDirChecked.forEach((item) => {
+ listdada.forEach((i, index) => {
+ if (i.summary_dir === item) {
+ listdada.splice(index, 1);
+ }
+ });
+ });
+ if (listdada.length) {
+ this.showEchartPic = true;
+ } else {
+ this.showEchartPic = false;
+ }
+ this.echart.showData = listdada;
+ } else {
+ this.echart.showData = this.echart.brushData;
+ this.showEchartPic = true;
+ }
+ this.resizeChart();
+ this.setEchartValue();
+ this.$nextTick(() => {
+ this.initChart();
+ });
+ // Total number of pages in the table
+ this.pagination.total = res.data.count;
+ // Data encapsulation of the table
+ let data = [];
+ data = this.setTableData();
+ this.table.data = data;
+ this.showTable = true;
+ if (this.selectedBarList) {
+ const resultArray = this.hideDataMarkTableData();
+ this.table.column = this.dirPathList.concat(
+ resultArray,
+ this.checkedSeries.map((i) => i.id),
+ );
+ } else {
+ this.table.column = this.dirPathList.concat(
+ this.checkedSeries.map((i) => i.id),
+ );
+ }
+ },
+ (error) => {
+ this.loading = false;
+ this.initOver = true;
+ this.showEchartPic = false;
+ this.errorData = true;
+ this.nodata = true;
+ },
+ )
+ .catch(() => {
+ this.loading = false;
+ this.initOver = true;
+ this.showEchartPic = false;
+ this.errorData = true;
+ this.nodata = true;
+ });
+ },
+ /**
+ * Gets the selected items and updates the select all state.
+ */
+ getCheckedSerList() {
+ this.checkedSeries = [];
+ this.totalSeries.forEach((nodeItem) => {
+ if (nodeItem.checked) {
+ this.checkedSeries.push(nodeItem);
+ }
+ });
+ },
+ /**
+ * Chart data encapsulation
+ * @param {Object} data
+ * @return {Object}
+ */
+ formateOriginData(data) {
+ if (!data || !data.object) {
+ return {};
+ }
+ // Preliminarily filter the required data from the original data and form a unified format.
+ const objectDataArr = [];
+ data.object.forEach((object) => {
+ this.tempFormateData = {
+ nodeList: [],
+ children: false,
+ summary_dir: object.summary_dir,
+ remark: object.added_info.remark ? object.added_info.remark : '',
+ tag: object.added_info.tag,
+ };
+ if (JSON.stringify(object.dataset_graph) !== '{}') {
+ this.getSingleRunData(object.dataset_graph);
+ }
+ objectDataArr.push(JSON.parse(JSON.stringify(this.tempFormateData)));
+ });
+ // The data in the unified format is combined by category.
+ const fullNodeList = [];
+ const tempDic = {};
+ objectDataArr.forEach((objectData) => {
+ if (fullNodeList.length) {
+ let startIndex = 0;
+ let tempNodeListMap = fullNodeList.map((nodeObj) => nodeObj.name);
+ objectData.nodeList.forEach((nodeItem) => {
+ const tempIndex = tempNodeListMap.indexOf(
+ nodeItem.name,
+ startIndex,
+ );
+ if (tempIndex === -1) {
+ if (!tempDic[nodeItem.name]) {
+ tempDic[nodeItem.name] = 0;
+ }
+ tempDic[nodeItem.name]++;
+ let tempId = '';
+ const createKey = Object.keys(this.createType);
+ if (createKey.includes(nodeItem.name)) {
+ tempId = nodeItem.name;
+ } else {
+ tempId = `${nodeItem.name}${tempDic[nodeItem.name]}`;
+ }
+ fullNodeList.splice(startIndex, 0, {
+ name: nodeItem.name,
+ id: tempId,
+ });
+ nodeItem.id = tempId;
+ startIndex++;
+ tempNodeListMap = fullNodeList.map((nodeObj) => nodeObj.name);
+ } else {
+ nodeItem.id = fullNodeList[tempIndex].id;
+ startIndex = tempIndex + 1;
+ }
+ });
+ } else {
+ objectData.nodeList.forEach((nodeItem) => {
+ if (!tempDic[nodeItem.name]) {
+ tempDic[nodeItem.name] = 0;
+ }
+ tempDic[nodeItem.name]++;
+ const createKey = Object.keys(this.createType);
+ if (createKey.includes(nodeItem.name)) {
+ fullNodeList.push({
+ name: nodeItem.name,
+ id: nodeItem.name,
+ });
+ nodeItem.id = nodeItem.name;
+ } else {
+ fullNodeList.push({
+ name: nodeItem.name,
+ id: `${nodeItem.name}${tempDic[nodeItem.name]}`,
+ });
+ nodeItem.id = `${nodeItem.name}${tempDic[nodeItem.name]}`;
+ }
+ });
+ }
+ });
+ // Obtain the value of run on each coordinate.
+ const serData = [];
+ objectDataArr.forEach((objectData) => {
+ const curDataObj = {};
+ objectData.nodeList.forEach((nodeItem) => {
+ curDataObj[nodeItem.id] = nodeItem.value;
+ });
+ curDataObj.children = objectData.children;
+ curDataObj.summary_dir = objectData.summary_dir;
+
+ // set remark value
+ curDataObj.remark = objectData.remark;
+ // set tag value
+ curDataObj.tag = objectData.tag;
+ // set remark icon is show
+ curDataObj.editShow = true;
+ curDataObj.isError = false;
+ serData.push(curDataObj);
+ });
+ const formateData = {
+ fullNodeList: fullNodeList,
+ serData: serData,
+ };
+ return formateData;
+ },
+
+ setEchartValue() {
+ if (this.modelObjectArray.length) {
+ const list = this.echart.showData;
+ for (let i = 0; i < list.length; i++) {
+ const temp = this.modelObjectArray[i];
+ this.echart.showData[i] = Object.assign(
+ this.echart.showData[i],
+ temp,
+ );
+ }
+ }
+ },
+ /*
+ * Initialize the echart diagram.
+ */
+ initChart() {
+ const parallelAxis = [];
+ const selectedBarList = this.$store.state.selectedBarList;
+ const data = [];
+ const arrayTemp = [];
+ if (selectedBarList && selectedBarList.length) {
+ selectedBarList.forEach((item) => {
+ const value = this.customizedTypeObject[item];
+ const obj = {
+ name: this.table.columnOptions[item].label,
+ id: item,
+ checked: true,
+ };
+ if (value && value.type === this.valueType.float) {
+ obj.type = this.valueType.float;
+ } else if (value && value.type === this.valueType.int) {
+ obj.type = this.valueType.int;
+ }
+ arrayTemp.push(obj);
+ });
+ }
+ const list = [];
+ this.basearr.forEach((item) => {
+ this.selectArrayValue.forEach((i) => {
+ if (i === item.value) {
+ const obj = {};
+ obj.id = item.value;
+ obj.name = item.label;
+ list.push(obj);
+ }
+ });
+ });
+ const totalBarArray = arrayTemp.concat(list);
+ this.echart.showData.forEach((val, i) => {
+ let item = {};
+ item = {
+ lineStyle: {
+ normal: {
+ color: CommonProperty.commonColorArr[i % 10],
+ },
+ },
+ value: [],
+ };
+ totalBarArray.forEach((obj) => {
+ item.value.push(val[obj.id]);
+ });
+ data.push(item);
+ });
+
+ totalBarArray.forEach((content, i) => {
+ const obj = {dim: i, name: content.name, id: content.id};
+ if (
+ content.name === this.repeatTitle ||
+ content.name === this.shuffleTitle ||
+ content.id === this.deviceNum ||
+ (content.type && content.type === this.valueType.int)
+ ) {
+ obj.scale = true;
+ obj.minInterval = 1;
+ this.setColorOfSelectedBar(selectedBarList, obj);
+ } else if (
+ this.numberTypeIdList.includes(content.id) ||
+ (content.type && content.type === this.valueType.float)
+ ) {
+ obj.scale = true;
+ this.setColorOfSelectedBar(selectedBarList, obj);
+ } else {
+ // String type
+ obj.type = this.categoryType;
+ obj.axisLabel = {
+ show: false,
+ };
+ this.setColorOfSelectedBar(selectedBarList, obj);
+ if (content.id === this.valueType.dataset_mark) {
+ obj.axisLabel = {
+ show: false,
+ };
+ }
+ const values = {};
+ this.echart.showData.forEach((i) => {
+ if (i[content.id] || i[content.id] === 0) {
+ values[i[content.id]] = '';
+ }
+ });
+ obj.data = Object.keys(values);
+ }
+ parallelAxis.push(obj);
+ });
+
+ const option = {
+ backgroundColor: 'white',
+ parallelAxis: parallelAxis,
+ tooltip: {
+ trigger: 'axis',
+ },
+ parallel: {
+ top: 30,
+ left: 90,
+ right: 100,
+ bottom: 12,
+ parallelAxisDefault: {
+ areaSelectStyle: {
+ width: 40,
+ },
+ tooltip: {
+ show: true,
+ },
+ realtime: false,
+ },
+ },
+ series: {
+ type: 'parallel',
+ lineStyle: {
+ width: 1,
+ opacity: 1,
+ },
+ data: data,
+ },
+ };
+ if (this.parallelEchart) {
+ this.parallelEchart.off('axisareaselected', null);
+ window.removeEventListener('resize', this.resizeChart, false);
+ } else {
+ this.parallelEchart = Echarts.init(
+ document.querySelector('#data-echart'),
+ );
+ }
+ this.parallelEchart.setOption(option, true);
+ window.addEventListener('resize', this.resizeChart, false);
+ this.chartEventsListen(parallelAxis);
+ },
+ chartEventsListen(parallelAxis) {
+ this.parallelEchart.on('axisareaselected', (params) => {
+ this.recordsNumber = 0;
+ this.showNumber = 0;
+ const key = params.parallelAxisId;
+ const range = params.intervals[0] || [];
+ const [axisData] = parallelAxis.filter((i) => {
+ return i.id === key;
+ });
+ if (axisData && range.length === 2) {
+ if (axisData.type === this.categoryType) {
+ const selectedAxisKeys = axisData.data.slice(
+ range[0],
+ range[1] + 1,
+ );
+ this.echart.brushData = this.echart.showData.filter((i) => {
+ return selectedAxisKeys.includes(i[key]);
+ });
+ } else {
+ this.echart.brushData = this.echart.showData.filter((i) => {
+ return i[key] >= range[0] && i[key] <= range[1];
+ });
+ }
+ const tempList = this.echart.brushData;
+ const summaryList = [];
+ tempList.forEach((item) => {
+ summaryList.push(item.summary_dir);
+ });
+ // The summaryList value could not be saved in the destroy state.
+ this.dataCheckedSummary = [];
+ this.$store.commit('setSummaryDirList', summaryList);
+ this.tableFilter.summary_dir = {in: summaryList};
+ if (!tempList.length) {
+ this.summaryDirList = [];
+ this.lineagedata.serData = undefined;
+ this.showTable = false;
+ this.nodata = true;
+ this.echartNoData = true;
+ } else {
+ this.echart.showData = this.echart.brushData;
+ this.$nextTick(() => {
+ this.initChart();
+ });
+ this.pagination.currentPage = 1;
+ this.pagination.total = this.echart.brushData.length;
+ this.table.data = this.echart.brushData.slice(
+ (this.pagination.currentPage - 1) * this.pagination.pageSize,
+ this.pagination.currentPage * this.pagination.pageSize,
+ );
+ const tableLength = this.table.data.length;
+ this.recordsNumber = tableLength;
+ this.showNumber = tableLength;
+ this.showTable = true;
+ }
+ }
+ });
+ },
+
+ /**
+ * The window size changes. Resizing Chart
+ */
+ resizeChart() {
+ if (
+ document.getElementById('data-echart') &&
+ document.getElementById('data-echart').style.display !== 'none' &&
+ this.parallelEchart
+ ) {
+ this.parallelEchart.resize();
+ }
+ },
+ /**
+ * Setting Table Data
+ * @return {Array}
+ */
+ setTableData() {
+ let data = [];
+ // Table data encapsulation
+ const pathData = JSON.parse(JSON.stringify(this.echart.brushData));
+ // Obtain table data based on the page number and number of records.
+ data = pathData.slice(
+ (this.pagination.currentPage - 1) * this.pagination.pageSize,
+ this.pagination.currentPage * this.pagination.pageSize,
+ );
+ this.recordsNumber = data.length;
+ if (this.hidenDirChecked.length) {
+ this.hidenDirChecked.forEach((dir) => {
+ data.forEach((item, index) => {
+ if (item.summary_dir === dir) {
+ data.splice(index, 1);
+ }
+ });
+ });
+ }
+ this.showNumber = data.length;
+ return data;
+ },
+
+ /**
+ * The table column data is deleted from the data processing result.
+ * @return {Array}
+ */
+ hideDataMarkTableData() {
+ const result = [];
+ this.selectedBarList.forEach((item) => {
+ if (item !== this.valueType.dataset_mark) {
+ result.push(item);
+ }
+ });
+ return result;
+ },
+
+ /**
+ * Set the color of the model tracing axis.
+ * @param {Array} selectedBarList
+ * @param {Object} obj
+ */
+ setColorOfSelectedBar(selectedBarList, obj) {
+ if (selectedBarList && obj.dim < selectedBarList.length) {
+ obj.nameTextStyle = {
+ color: '#00a5a7',
+ };
+ obj.axisLabel = {
+ show: true,
+ textStyle: {
+ color: '#00a5a7',
+ },
+ formatter: function(val) {
+ if (typeof val !== 'string') {
+ return val;
+ }
+ const strs = val.split('');
+ let str = '';
+ const maxStringLength = 100;
+ const showStringLength = 12;
+ if (val.length > maxStringLength) {
+ return val.substring(0, showStringLength) + '...';
+ } else {
+ for (let i = 0, s = ''; (s = strs[i++]); ) {
+ str += s;
+ if (!(i % showStringLength)) {
+ str += '\n';
+ }
+ }
+ return str;
+ }
+ },
+ };
+ obj.axisLine = {
+ show: true,
+ lineStyle: {
+ color: '#00a5a7',
+ },
+ };
} else {
- this.table.column = this.dirPathList.concat(list);
+ // Text color
+ obj.nameTextStyle = {
+ color: 'black',
+ };
}
},
@@ -792,7 +1241,6 @@ export default {
row.remark = this.beforeEditValue;
row.isError = false;
},
-
/**
* After the remark or tag is modified,invoke the interface and save the modification
* @param {Object} params
@@ -810,6 +1258,216 @@ export default {
.catch(() => {});
},
+ // Set tag style
+ blurFloat(event) {
+ const domArr = document.querySelectorAll('.icon-dialog');
+ const path = event.path || (event.composedPath && event.composedPath());
+ const isActiveDom = path.some((item) => {
+ return item.className === 'icon-dialog';
+ });
+ if (!isActiveDom) {
+ this.removeIconBorder();
+ domArr.forEach((item) => {
+ item.style.display = 'none';
+ });
+ this.tagDialogShow = false;
+ }
+ },
+ /**
+ * Display of the icon dialog box
+ * @param {Object} row
+ * @param {Object} scope
+ * @param {Object} event
+ */
+ showAllIcon(row, scope, event) {
+ this.tagScope = scope;
+ this.iconValue = row.tag >= 0 ? row.tag : 0;
+ if (this.tagDialogShow) {
+ this.tagDialogShow = false;
+ this.removeIconBorder();
+ return;
+ }
+ this.addIconBorder(row);
+ this.tagDialogShow = true;
+ const ev = window.event || event;
+ document.getElementById('tag-dialog').style.top = ev.clientY - 130 + 'px';
+ },
+
+ /**
+ * Add icon border style
+ * @param {Object} row
+ */
+ addIconBorder(row) {
+ const iconImage = document.querySelectorAll('.icon-image');
+ iconImage.forEach((item, index) => {
+ if (index + 1 === row.tag) {
+ item.classList.add('icon-border');
+ }
+ });
+ },
+
+ /**
+ * Remove icon border style
+ */
+ removeIconBorder() {
+ const classArr = document.querySelectorAll('.icon-border');
+ if (classArr.length) {
+ classArr.forEach((item) => {
+ item.classList.remove('icon-border');
+ });
+ }
+ },
+
+ /**
+ * icon value change
+ * @param {Object} row
+ * @param {Number} num
+ * @param {Object} event
+ */
+ iconValueChange(row, num, event) {
+ const path = event.path || (event.composedPath && event.composedPath());
+ const classWrap = path.find((item) => {
+ return item.className === 'icon-dialog';
+ });
+ const classArr = classWrap.querySelectorAll('.icon-border');
+ classArr.forEach((item) => {
+ item.classList.remove('icon-border');
+ });
+ const htmDom = path.find((item) => {
+ return item.nodeName === 'DIV';
+ });
+ htmDom.classList.add('icon-border');
+ this.iconValue = num;
+ },
+
+ /**
+ * Save the modification of the icon
+ * @param {Object} scope
+ */
+ iconChangeSave(scope) {
+ this.tagDialogShow = false;
+ if (scope.row.tag === this.iconValue || this.iconValue === 0) {
+ return;
+ }
+ this.tagScope.row.tag = this.iconValue;
+ const imgDom = document.querySelectorAll('.img' + scope.$index);
+ imgDom.forEach((item) => {
+ item.src = require('@/assets/images/icon' + this.iconValue + '.svg');
+ });
+ this.$forceUpdate();
+ const params = {
+ train_id: scope.row.summary_dir,
+ body: {
+ tag: this.tagScope.row.tag,
+ },
+ };
+ this.putChangeToLineagesData(params);
+ },
+
+ /**
+ * clear icon
+ * @param {Object} scope
+ * @param {Object} event
+ */
+ clearIcon(scope, event) {
+ const path = event.path || (event.composedPath && event.composedPath());
+ const classWrap = path.find((item) => {
+ return item.className === 'icon-dialog';
+ });
+ const classArr = classWrap.querySelectorAll('.icon-border');
+ classArr.forEach((item) => {
+ item.classList.remove('icon-border');
+ });
+ this.tagDialogShow = false;
+ this.iconValue = 0;
+ this.tagScope.row.tag = 0;
+ const imgDom = document.querySelectorAll('.img' + scope.$index);
+ imgDom.forEach((item) => {
+ item.src = require('@/assets/images/icon-down.svg');
+ });
+ const params = {
+ train_id: scope.row.summary_dir,
+ body: {
+ tag: 0,
+ },
+ };
+ this.putChangeToLineagesData(params);
+ this.tagDialogShow = false;
+ },
+
+ /**
+ * Cancel Save
+ * @param {Object} row
+ */
+ cancelChangeIcon(row) {
+ this.removeIconBorder();
+ this.addIconBorder(row);
+ this.tagDialogShow = false;
+ },
+
+ /**
+ * Select all
+ */
+ allSelect() {
+ if (this.selectCheckAll) {
+ return;
+ }
+ this.selectArrayValue = [];
+ this.checkOptions.forEach((item) => {
+ this.selectArrayValue.push(item.value);
+ });
+
+ this.selectCheckAll = !this.selectCheckAll;
+ this.$nextTick(() => {
+ this.initChart();
+ });
+ const list = [];
+ this.checkOptions.forEach((item) => {
+ this.selectArrayValue.forEach((i) => {
+ if (i === item.value) {
+ list.push(i);
+ }
+ });
+ });
+
+ if (this.selectedBarList) {
+ const resultArray = this.hideDataMarkTableData();
+ this.table.column = this.dirPathList.concat(resultArray, list);
+ } else {
+ this.table.column = this.dirPathList.concat(list);
+ }
+ },
+
+ /**
+ * deselect all
+ */
+ deselectAll() {
+ this.selectArrayValue = [];
+ this.checkOptions.forEach((item) => {
+ if (item.disabled) {
+ this.selectArrayValue.push(item.value);
+ }
+ });
+ this.selectCheckAll = false;
+ this.$nextTick(() => {
+ this.initChart();
+ });
+ const list = [];
+ this.checkOptions.forEach((item) => {
+ this.selectArrayValue.forEach((i) => {
+ if (i === item.value) {
+ list.push(i);
+ }
+ });
+ });
+ if (this.selectedBarList) {
+ const resultArray = this.hideDataMarkTableData();
+ this.table.column = this.dirPathList.concat(resultArray, list);
+ } else {
+ this.table.column = this.dirPathList.concat(list);
+ }
+ },
+
/**
* Hidden records
*/
@@ -938,307 +1596,37 @@ export default {
},
/**
- * Selected data in the table
- */
- selectValueChange() {
- const templist = [];
- this.basearr.forEach((item) => {
- templist.push(item.label);
- });
- if (templist.length > this.selectArrayValue.length) {
- this.selectCheckAll = false;
- } else {
- this.selectCheckAll = true;
- }
- this.$nextTick(() => {
- this.initChart();
- });
- const list = [];
- this.basearr.forEach((item) => {
- this.selectArrayValue.forEach((i) => {
- if (i === item.value) {
- list.push(i);
- }
- });
- });
-
- if (this.selectedBarList) {
- const resultArray = this.hideDataMarkTableData();
- this.table.column = this.dirPathList.concat(resultArray, list);
- } else {
- this.table.column = this.dirPathList.concat(list);
- }
- },
-
- /**
- * init
- */
- init() {
- this.customizedColumnOptions =
- this.$store.state.customizedColumnOptions || [];
- this.table.columnOptions = Object.assign(
- this.table.columnOptions,
- this.customizedColumnOptions,
- );
- // Obtain the value of summary_dir from the store,
- this.summaryDirList = this.$store.state.summaryDirList;
- this.selectedBarList = this.$store.state.selectedBarList;
- if (this.selectedBarList && this.selectedBarList.length) {
- this.tableFilter = {};
- } else {
- this.tableFilter.lineage_type = {in: ['dataset']};
- }
- const params = {};
- if (this.summaryDirList) {
- this.tableFilter.summary_dir = {in: this.summaryDirList};
- } else {
- this.tableFilter.summary_dir = undefined;
- }
- params.body = Object.assign({}, this.tableFilter);
- this.queryLineagesData(params);
- },
-
- /*
- * Initialize the echart diagram.
- */
- initChart() {
- const parallelAxis = [];
- const selectedBarList = this.$store.state.selectedBarList;
- const data = [];
- const arrayTemp = [];
- if (selectedBarList && selectedBarList.length) {
- selectedBarList.forEach((item) => {
- const value = this.customizedTypeObject[item];
- const obj = {
- name: this.table.columnOptions[item].label,
- id: item,
- checked: true,
- };
- if (value && value.type === this.valueType.float) {
- obj.type = this.valueType.float;
- } else if (value && value.type === this.valueType.int) {
- obj.type = this.valueType.int;
- }
- arrayTemp.push(obj);
- });
- }
- const list = [];
- this.basearr.forEach((item) => {
- this.selectArrayValue.forEach((i) => {
- if (i === item.value) {
- const obj = {};
- obj.id = item.value;
- obj.name = item.label;
- list.push(obj);
- }
- });
- });
- const totalBarArray = arrayTemp.concat(list);
- this.echart.showData.forEach((val, i) => {
- let item = {};
- item = {
- lineStyle: {
- normal: {
- color: CommonProperty.commonColorArr[i % 10],
- },
- },
- value: [],
- };
- totalBarArray.forEach((obj) => {
- item.value.push(val[obj.id]);
- });
- data.push(item);
- });
-
- totalBarArray.forEach((content, i) => {
- const obj = {dim: i, name: content.name, id: content.id};
- if (
- content.name === this.repeatTitle ||
- content.name === this.shuffleTitle ||
- content.id === this.deviceNum ||
- (content.type && content.type === this.valueType.int)
- ) {
- obj.scale = true;
- obj.minInterval = 1;
- this.setColorOfSelectedBar(selectedBarList, obj);
- } else if (
- this.numberTypeIdList.includes(content.id) ||
- (content.type && content.type === this.valueType.float)
- ) {
- obj.scale = true;
- this.setColorOfSelectedBar(selectedBarList, obj);
- } else {
- // String type
- obj.type = this.categoryType;
- obj.axisLabel = {
- show: false,
- };
- this.setColorOfSelectedBar(selectedBarList, obj);
- if (content.id === this.valueType.dataset_mark) {
- obj.axisLabel = {
- show: false,
- };
- }
- const values = {};
- this.echart.showData.forEach((i) => {
- if (i[content.id] || i[content.id] === 0) {
- values[i[content.id]] = '';
- }
- });
- obj.data = Object.keys(values);
- }
- parallelAxis.push(obj);
- });
-
- const option = {
- backgroundColor: 'white',
- parallelAxis: parallelAxis,
- tooltip: {
- trigger: 'axis',
- },
- parallel: {
- top: 30,
- left: 90,
- right: 100,
- bottom: 12,
- parallelAxisDefault: {
- areaSelectStyle: {
- width: 40,
- },
- tooltip: {
- show: true,
- },
- realtime: false,
- },
- },
- series: {
- type: 'parallel',
- lineStyle: {
- width: 1,
- opacity: 1,
- },
- data: data,
- },
- };
- if (this.parallelEchart) {
- this.parallelEchart.off('axisareaselected', null);
- window.removeEventListener('resize', this.resizeChart, false);
- } else {
- this.parallelEchart = Echarts.init(
- document.querySelector('#data-echart'),
- );
- }
- this.parallelEchart.setOption(option, true);
- window.addEventListener('resize', this.resizeChart, false);
- this.chartEventsListen(parallelAxis);
- },
- chartEventsListen(parallelAxis) {
- this.parallelEchart.on('axisareaselected', (params) => {
- this.recordsNumber = 0;
- this.showNumber = 0;
- const key = params.parallelAxisId;
- const range = params.intervals[0] || [];
- const [axisData] = parallelAxis.filter((i) => {
- return i.id === key;
- });
- if (axisData && range.length === 2) {
- if (axisData.type === this.categoryType) {
- const selectedAxisKeys = axisData.data.slice(
- range[0],
- range[1] + 1,
- );
- this.echart.brushData = this.echart.showData.filter((i) => {
- return selectedAxisKeys.includes(i[key]);
- });
- } else {
- this.echart.brushData = this.echart.showData.filter((i) => {
- return i[key] >= range[0] && i[key] <= range[1];
- });
- }
- const tempList = this.echart.brushData;
- const summaryList = [];
- tempList.forEach((item) => {
- summaryList.push(item.summary_dir);
- });
- // The summaryList value could not be saved in the destroy state.
- this.dataCheckedSummary = [];
- this.$store.commit('setSummaryDirList', summaryList);
- this.tableFilter.summary_dir = {in: summaryList};
- if (!tempList.length) {
- this.summaryDirList = [];
- this.lineagedata.serData = undefined;
- this.showTable = false;
- this.nodata = true;
- this.echartNoData = true;
- } else {
- this.echart.showData = this.echart.brushData;
- this.$nextTick(() => {
- this.initChart();
- });
- this.pagination.currentPage = 1;
- this.pagination.total = this.echart.brushData.length;
- this.table.data = this.echart.brushData.slice(
- (this.pagination.currentPage - 1) * this.pagination.pageSize,
- this.pagination.currentPage * this.pagination.pageSize,
- );
- const tableLength = this.table.data.length;
- this.recordsNumber = tableLength;
- this.showNumber = tableLength;
- this.showTable = true;
- }
- }
- });
- },
- /**
- * Set the color of the model tracing axis.
- * @param {Array} selectedBarList
- * @param {Object} obj
+ * Selected data in the table
*/
- setColorOfSelectedBar(selectedBarList, obj) {
- if (selectedBarList && obj.dim < selectedBarList.length) {
- obj.nameTextStyle = {
- color: '#00a5a7',
- };
- obj.axisLabel = {
- show: true,
- textStyle: {
- color: '#00a5a7',
- },
- formatter: function(val) {
- if (typeof val !== 'string') {
- return val;
- }
- const strs = val.split('');
- let str = '';
- const maxStringLength = 100;
- const showStringLength = 12;
- if (val.length > maxStringLength) {
- return val.substring(0, showStringLength) + '...';
- } else {
- for (let i = 0, s = ''; (s = strs[i++]); ) {
- str += s;
- if (!(i % showStringLength)) {
- str += '\n';
- }
- }
- return str;
- }
- },
- };
- obj.axisLine = {
- show: true,
- lineStyle: {
- color: '#00a5a7',
- },
- };
+ selectValueChange() {
+ const templist = [];
+ this.basearr.forEach((item) => {
+ templist.push(item.label);
+ });
+ if (templist.length > this.selectArrayValue.length) {
+ this.selectCheckAll = false;
} else {
- // Text color
- obj.nameTextStyle = {
- color: 'black',
- };
+ this.selectCheckAll = true;
}
- },
+ this.$nextTick(() => {
+ this.initChart();
+ });
+ const list = [];
+ this.basearr.forEach((item) => {
+ this.selectArrayValue.forEach((i) => {
+ if (i === item.value) {
+ list.push(i);
+ }
+ });
+ });
+ if (this.selectedBarList) {
+ const resultArray = this.hideDataMarkTableData();
+ this.table.column = this.dirPathList.concat(resultArray, list);
+ } else {
+ this.table.column = this.dirPathList.concat(list);
+ }
+ },
/**
* jump to train dashboard
* @param {String} val
@@ -1251,7 +1639,14 @@ export default {
});
window.open(routeUrl.href, '_blank');
},
-
+ /**
+ * Jump to DataTraceback
+ */
+ jumpToModelTraceback() {
+ this.$router.push({
+ path: '/model-traceback',
+ });
+ },
/**
* Formatting Data
* @param {String} key
@@ -1404,264 +1799,46 @@ export default {
modelData[temp] = modelData.user_defined[key];
}
});
- delete modelData.user_defined;
- }
- list.push(modelData);
- }
- });
- this.modelObjectArray = [];
- for (let i = 0; i < list.length; i++) {
- const modelObject = {};
- for (let j = 0; j < this.selectedBarList.length; j++) {
- const tempObject = list[i];
- const key = this.selectedBarList[j];
- modelObject[key] = tempObject[key];
- }
- this.modelObjectArray.push(modelObject);
- }
- if (this.modelObjectArray.length) {
- const list = JSON.parse(JSON.stringify(serData));
- for (let i = 0; i < list.length; i++) {
- const temp = this.modelObjectArray[i];
- list[i] = Object.assign(list[i], temp);
- }
- this.table.data = list;
- } else {
- this.table.data = JSON.parse(JSON.stringify(serData));
- }
- } else {
- this.table.data = JSON.parse(JSON.stringify(serData));
- }
- },
- (error) => {
- this.errorData = true;
- this.nodata = true;
- },
- )
- .catch(() => {
- this.errorData = true;
- this.nodata = true;
- });
- },
-
- /**
- * Method of invoking the interface
- * @param {Object} params
- */
- queryLineagesData(params) {
- RequestService.queryLineagesData(params)
- .then(
- (res) => {
- this.initOver = true;
- this.loading = false;
- this.echartNoData = false;
- if (!res || !res.data) {
- this.nodata = true;
- return;
- }
- this.nodata = false;
- this.errorData = false;
- this.customizedTypeObject = res.data.customized;
- let keys = Object.keys(this.customizedTypeObject);
- if (keys.length) {
- keys = keys.map((i) => {
- if (i.startsWith(this.replaceStr.userDefined)) {
- return i.replace(this.replaceStr.userDefined, '[U]');
- } else if (i.startsWith(this.replaceStr.metric)) {
- return i.replace(this.replaceStr.metric, '[M]');
- }
- });
- this.sortArray = this.sortArray.concat(keys);
- }
- // Model source tracing filtering parameters
- this.selectedBarList = this.$store.state.selectedBarList;
- if (this.selectedBarList && this.selectedBarList.length) {
- const tempList = JSON.parse(JSON.stringify(res.data.object));
- const list = [];
- const metricKeys = {};
- tempList.forEach((item) => {
- if (item.model_lineage) {
- const modelData = JSON.parse(
- JSON.stringify(item.model_lineage),
- );
- modelData.model_size = parseFloat(
- ((modelData.model_size || 0) / 1024 / 1024).toFixed(2),
- );
- const keys = Object.keys(modelData.metric || {});
- if (keys.length) {
- keys.forEach((key) => {
- if (
- modelData.metric[key] ||
- modelData.metric[key] === 0
- ) {
- const temp = this.replaceStr.metric + key;
- metricKeys[temp] = key;
- modelData[temp] = modelData.metric[key];
- }
- });
- delete modelData.metric;
- }
- const udkeys = Object.keys(modelData.user_defined || {});
- if (udkeys.length) {
- udkeys.forEach((key) => {
- if (
- modelData.user_defined[key] ||
- modelData.user_defined[key] === 0
- ) {
- const temp = this.replaceStr.userDefined + key;
- modelData[temp] = modelData.user_defined[key];
- }
- });
- delete modelData.user_defined;
- }
- list.push(modelData);
- }
- });
- this.modelObjectArray = [];
- for (let i = 0; i < list.length; i++) {
- const modelObject = {};
- for (let j = 0; j < this.selectedBarList.length; j++) {
- const tempObject = list[i];
- const key = this.selectedBarList[j];
- modelObject[key] = tempObject[key];
- }
- this.modelObjectArray.push(modelObject);
- }
- }
-
- this.fixedSeries = [];
- this.noFixedSeries = [];
- this.checkedSeries = [];
- this.lineagedata = this.formateOriginData(res.data);
- this.totalSeries = this.lineagedata.fullNodeList;
- if (!this.totalSeries.length) {
- this.echartNoData = true;
- this.nodata = true;
- } else {
- this.nodata = false;
- }
- this.totalSeries.forEach((nodeItem) => {
- if (this.createType[nodeItem.name]) {
- nodeItem.checked = true;
- this.fixedSeries.push(nodeItem);
- } else {
- nodeItem.checked = false;
- this.noFixedSeries.push(nodeItem);
- }
- });
- this.noFixedSeries.forEach((item) => {
- item.checked = true;
- });
- this.getCheckedSerList();
- if (this.fixedSeries.length) {
- this.setObjectValue(this.fixedSeries, true);
- }
- if (this.noFixedSeries.length) {
- this.setObjectValue(this.noFixedSeries, false);
- }
- const list1 = this.fixedSeries.concat(this.noFixedSeries);
- list1.forEach((item, index) => {
- this.checkOptions[index] = {};
- this.basearr[index] = {};
- this.checkOptions[index].label = item.name;
- this.checkOptions[index].value = item.id;
- if (this.createType[item.name]) {
- this.checkOptions[index].disabled = true;
- this.basearr[index].disabled = true;
- }
- this.basearr[index].label = item.name;
- this.basearr[index].value = item.id;
- });
- this.checkOptions.forEach((item) => {
- this.selectArrayValue.push(item.value);
- });
- this.hidenDirChecked = this.$store.state.hidenDirChecked || [];
- this.echart.brushData = this.lineagedata.serData;
- if (this.hidenDirChecked.length) {
- const listdada = this.lineagedata.serData.slice();
- this.hidenDirChecked.forEach((item) => {
- listdada.forEach((i, index) => {
- if (i.summary_dir === item) {
- listdada.splice(index, 1);
+ delete modelData.user_defined;
}
- });
+ list.push(modelData);
+ }
});
- if (listdada.length) {
- this.showEchartPic = true;
+ this.modelObjectArray = [];
+ for (let i = 0; i < list.length; i++) {
+ const modelObject = {};
+ for (let j = 0; j < this.selectedBarList.length; j++) {
+ const tempObject = list[i];
+ const key = this.selectedBarList[j];
+ modelObject[key] = tempObject[key];
+ }
+ this.modelObjectArray.push(modelObject);
+ }
+ if (this.modelObjectArray.length) {
+ const list = JSON.parse(JSON.stringify(serData));
+ for (let i = 0; i < list.length; i++) {
+ const temp = this.modelObjectArray[i];
+ list[i] = Object.assign(list[i], temp);
+ }
+ this.table.data = list;
} else {
- this.showEchartPic = false;
+ this.table.data = JSON.parse(JSON.stringify(serData));
}
- this.echart.showData = listdada;
- } else {
- this.echart.showData = this.echart.brushData;
- this.showEchartPic = true;
- }
- this.resizeChart();
- this.setEchartValue();
- this.$nextTick(() => {
- this.initChart();
- });
- // Total number of pages in the table
- this.pagination.total = res.data.count;
- // Data encapsulation of the table
- let data = [];
- data = this.setTableData();
- this.table.data = data;
- this.showTable = true;
- if (this.selectedBarList) {
- const resultArray = this.hideDataMarkTableData();
- this.table.column = this.dirPathList.concat(
- resultArray,
- this.checkedSeries.map((i) => i.id),
- );
} else {
- this.table.column = this.dirPathList.concat(
- this.checkedSeries.map((i) => i.id),
- );
+ this.table.data = JSON.parse(JSON.stringify(serData));
}
},
(error) => {
- this.loading = false;
- this.initOver = true;
- this.showEchartPic = false;
this.errorData = true;
this.nodata = true;
},
)
.catch(() => {
- this.loading = false;
- this.initOver = true;
- this.showEchartPic = false;
this.errorData = true;
this.nodata = true;
});
},
- /**
- * Gets the selected items and updates the select all state.
- */
- getCheckedSerList() {
- this.checkedSeries = [];
- this.totalSeries.forEach((nodeItem) => {
- if (nodeItem.checked) {
- this.checkedSeries.push(nodeItem);
- }
- });
- },
-
- /**
- * The window size changes. Resizing Chart
- */
- resizeChart() {
- if (
- document.getElementById('data-echart') &&
- document.getElementById('data-echart').style.display !== 'none' &&
- this.parallelEchart
- ) {
- this.parallelEchart.resize();
- }
- },
-
/**
* reset echart data.Show all data
*/
@@ -1692,20 +1869,6 @@ export default {
}, this.delayTime);
},
- /**
- * The table column data is deleted from the data processing result.
- * @return {Array}
- */
- hideDataMarkTableData() {
- const result = [];
- this.selectedBarList.forEach((item) => {
- if (item !== this.valueType.dataset_mark) {
- result.push(item);
- }
- });
- return result;
- },
-
/**
* Selected rows of tables
* @param {Object} val
@@ -1726,19 +1889,6 @@ export default {
});
},
- setEchartValue() {
- if (this.modelObjectArray.length) {
- const list = this.echart.showData;
- for (let i = 0; i < list.length; i++) {
- const temp = this.modelObjectArray[i];
- this.echart.showData[i] = Object.assign(
- this.echart.showData[i],
- temp,
- );
- }
- }
- },
-
/**
* Sort by path parameter
* @param {Object} data
@@ -1801,142 +1951,6 @@ export default {
this.queryTableLineagesData(params);
},
- /**
- * Setting Table Data
- * @return {Array}
- */
- setTableData() {
- let data = [];
- // Table data encapsulation
- const pathData = JSON.parse(JSON.stringify(this.echart.brushData));
- // Obtain table data based on the page number and number of records.
- data = pathData.slice(
- (this.pagination.currentPage - 1) * this.pagination.pageSize,
- this.pagination.currentPage * this.pagination.pageSize,
- );
- this.recordsNumber = data.length;
- if (this.hidenDirChecked.length) {
- this.hidenDirChecked.forEach((dir) => {
- data.forEach((item, index) => {
- if (item.summary_dir === dir) {
- data.splice(index, 1);
- }
- });
- });
- }
- this.showNumber = data.length;
- return data;
- },
-
- /**
- * Chart data encapsulation
- * @param {Object} data
- * @return {Object}
- */
- formateOriginData(data) {
- if (!data || !data.object) {
- return {};
- }
- // Preliminarily filter the required data from the original data and form a unified format.
- const objectDataArr = [];
- data.object.forEach((object) => {
- this.tempFormateData = {
- nodeList: [],
- children: false,
- summary_dir: object.summary_dir,
- remark: object.added_info.remark ? object.added_info.remark : '',
- tag: object.added_info.tag,
- };
- if (JSON.stringify(object.dataset_graph) !== '{}') {
- this.getSingleRunData(object.dataset_graph);
- }
- objectDataArr.push(JSON.parse(JSON.stringify(this.tempFormateData)));
- });
- // The data in the unified format is combined by category.
- const fullNodeList = [];
- const tempDic = {};
- objectDataArr.forEach((objectData) => {
- if (fullNodeList.length) {
- let startIndex = 0;
- let tempNodeListMap = fullNodeList.map((nodeObj) => nodeObj.name);
- objectData.nodeList.forEach((nodeItem) => {
- const tempIndex = tempNodeListMap.indexOf(
- nodeItem.name,
- startIndex,
- );
- if (tempIndex === -1) {
- if (!tempDic[nodeItem.name]) {
- tempDic[nodeItem.name] = 0;
- }
- tempDic[nodeItem.name]++;
- let tempId = '';
- const createKey = Object.keys(this.createType);
- if (createKey.includes(nodeItem.name)) {
- tempId = nodeItem.name;
- } else {
- tempId = `${nodeItem.name}${tempDic[nodeItem.name]}`;
- }
- fullNodeList.splice(startIndex, 0, {
- name: nodeItem.name,
- id: tempId,
- });
- nodeItem.id = tempId;
- startIndex++;
- tempNodeListMap = fullNodeList.map((nodeObj) => nodeObj.name);
- } else {
- nodeItem.id = fullNodeList[tempIndex].id;
- startIndex = tempIndex + 1;
- }
- });
- } else {
- objectData.nodeList.forEach((nodeItem) => {
- if (!tempDic[nodeItem.name]) {
- tempDic[nodeItem.name] = 0;
- }
- tempDic[nodeItem.name]++;
- const createKey = Object.keys(this.createType);
- if (createKey.includes(nodeItem.name)) {
- fullNodeList.push({
- name: nodeItem.name,
- id: nodeItem.name,
- });
- nodeItem.id = nodeItem.name;
- } else {
- fullNodeList.push({
- name: nodeItem.name,
- id: `${nodeItem.name}${tempDic[nodeItem.name]}`,
- });
- nodeItem.id = `${nodeItem.name}${tempDic[nodeItem.name]}`;
- }
- });
- }
- });
- // Obtain the value of run on each coordinate.
- const serData = [];
- objectDataArr.forEach((objectData) => {
- const curDataObj = {};
- objectData.nodeList.forEach((nodeItem) => {
- curDataObj[nodeItem.id] = nodeItem.value;
- });
- curDataObj.children = objectData.children;
- curDataObj.summary_dir = objectData.summary_dir;
-
- // set remark value
- curDataObj.remark = objectData.remark;
- // set tag value
- curDataObj.tag = objectData.tag;
- // set remark icon is show
- curDataObj.editShow = true;
- curDataObj.isError = false;
- serData.push(curDataObj);
- });
- const formateData = {
- fullNodeList: fullNodeList,
- serData: serData,
- };
- return formateData;
- },
-
/**
* Get single run data
* @param {Object} nodeObj
@@ -2067,6 +2081,37 @@ export default {
};
+
-
+ ![]()
+