!605 Source code parameter promotion code function submission

Merge pull request !605 from 秦君艳/scatter

mindinsight/ui/src/components/scatter.vue

+<!--
+Copyright 2020 Huawei Technologies Co., Ltd.All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<template>
+  <div class="scatter"
+       ref="scatter">
+  </div>
+</template>
+<script>
+import echarts from 'echarts';
+
+export default {
+  props: {
+    data: Array,
+    tooltipsData: Array,
+    yTitle: String,
+    xTitle: String,
+    showTooltip: Boolean,
+  },
+  watch: {
+    data: {
+      handler(newValue, oldValue) {
+        this.chartOption = this.formateCharOption();
+        this.createChart();
+      },
+    },
+  },
+  data() {
+    return {
+      chartObj: null,
+      chartOption: {},
+      charResizeTimer: null,
+    };
+  },
+  destroyed() {
+    // remove the size of a window and change the listener
+    window.removeEventListener('resize', this.resizeCallback);
+    // Remove Chart Calculation Delay
+    if (this.charResizeTimer) {
+      clearTimeout(this.charResizeTimer);
+      this.charResizeTimer = null;
+    }
+  },
+
+  mounted() {
+    window.addEventListener('resize', this.resizeCallback, false);
+  },
+  methods: {
+    /**
+     * formate Chart option
+     */
+
+    formateCharOption() {
+      const tempOption = {
+        // Set the top, bottom, left, and right blanks of the echart diagram
+        grid: {
+          left: 20,
+          right: 20,
+          x2: 20,
+          y2: 20,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: 'item',
+          show: this.showTooltip,
+          axisPointer: {
+            type: 'cross',
+          },
+          formatter: (params) => {
+            const dataIndex = params.dataIndex;
+            const item = this.tooltipsData[dataIndex];
+            let res = '';
+            const obj = Object.keys(item);
+            for (let i = 0; i < obj.length; i++) {
+              if (obj[i] && item[obj[i]] !== null) {
+                if (typeof item[obj[i]] === 'number') {
+                  if (item[obj[i]] < 0.0001 && item[obj[i]] > 0) {
+                    item[obj[i]] = item[obj[i]].toExponential(4);
+                  } else {
+                    item[obj[i]] =
+                      Math.round(item[obj[i]] * Math.pow(10, 4)) /
+                      Math.pow(10, 4);
+                  }
+                }
+                res +=
+                  '<p>' + obj[i] + ':' + '&nbsp;&nbsp;' + item[obj[i]] + '</p>';
+              }
+            }
+            return res;
+          },
+        },
+        xAxis: {
+          name: this.xTitle,
+          nameLocation: 'end',
+          nameTextStyle: {
+            align: 'right',
+            padding: [60, 0, 0, 0],
+          },
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {},
+        },
+        yAxis: {
+          name: this.yTitle,
+          nameGap: 20,
+          nameTextStyle: {
+            align: 'middle',
+          },
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            formatter: (value) => {
+              const symbol = Math.abs(value);
+              if (symbol.toString().length > 6) {
+                return value.toExponential(4);
+              } else if (value >= 1000 || value <= -1000) {
+                return parseFloat((value / 1000).toFixed(2)) + 'k';
+              } else if (value > 0) {
+                return value;
+              } else {
+                return parseFloat(value.toFixed(3));
+              }
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#E6EBF5',
+              width: 1,
+            },
+          },
+        },
+        series: [
+          {
+            symbol: 'circle',
+            data: this.data,
+            name: this.yTitle,
+            type: 'scatter',
+            // Set scatter color
+            color: '#cc5b58',
+          },
+        ],
+      };
+      return tempOption;
+    },
+
+    /**
+     * formate Chart option
+     */
+
+    createChart() {
+      if (!this.chartObj) {
+        this.chartObj = echarts.init(this.$refs.scatter);
+        this.chartObj.setOption(this.chartOption, true);
+      } else {
+        this.chartObj.setOption(this.chartOption, false);
+      }
+    },
+
+    /**
+     *window resize
+     */
+    resizeCallback() {
+      this.charResizeTimer = setTimeout(() => {
+        if (this.chartObj) {
+          this.chartObj.resize();
+        }
+      }, 500);
+    },
+  },
+  components: {},
+};
+</script>
+<style lang="scss">
+.scatter {
+  height: 100%;
+}
+</style>

mindinsight/ui/src/services/request-service.js

@@ -42,6 +42,13 @@ export default {
     });
   },
 
+  queryTargetsData() {
+    return axios({
+      method: 'get',
+      url: `v1/mindinsight/optimizer/targets`,
+    });
+  },
+
   // query summary list
   querySummaryList(params, isIgnoreError) {
     return axios({

mindinsight/ui/src/views/train-manage/data-traceback.vue

@@ -14,7 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <template>
-  <div id="cl-data-traceback">
+  <div class="cl-data-traceback">
+    <div class="traceback-tab">
+      <div class="traceback-tab-item"
+           @click="jumpToModelTraceback()">{{$t("summaryManage.modelTraceback")}}</div>
+      <div class="traceback-tab-item item-active">{{$t("summaryManage.dataTraceback")}}</div>
+    </div>
+    <div id="data-traceback-con">
       <div v-if="loading"
            class="no-data-page">
         <div class="no-data-img">
@@ -27,7 +33,7 @@ limitations under the License.
            v-if="!loading">
         <!-- select area -->
         <div class="data-checkbox-area"
-           v-show="!errorData&&!(!totalSeries.length&&pagination.total)">
+             v-show="!errorData && !(!totalSeries.length && pagination.total)">
           <div class="select-container"
                v-show="totalSeries && totalSeries.length &&
               (!summaryDirList || (summaryDirList && summaryDirList.length))">
@@ -331,6 +337,7 @@ limitations under the License.
         </div>
       </div>
     </div>
+  </div>
 </template>
 <script>
 import RequestService from '../../services/request-service';
@@ -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,462 +544,367 @@ 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;
+    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);
       }
     },
+    /** Data source page initialization**/
     /**
-     * Display of the icon dialog box
-     * @param {Object} row
-     * @param {Object} scope
-     * @param {Object} event
+     * init
      */
-    showAllIcon(row, scope, event) {
-      this.tagScope = scope;
-      this.iconValue = row.tag >= 0 ? row.tag : 0;
-      if (this.tagDialogShow) {
-        this.tagDialogShow = false;
-        this.removeIconBorder();
-        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.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');
+      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);
     },
-
     /**
-     * Remove  icon border style
+     * Method of invoking the interface
+     * @param {Object} params
      */
-    removeIconBorder() {
-      const classArr = document.querySelectorAll('.icon-border');
-      if (classArr.length) {
-        classArr.forEach((item) => {
-          item.classList.remove('icon-border');
+    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];
                           }
-    },
-
-    /**
-     *  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');
+                        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];
+                          }
                         });
-      const htmDom = path.find((item) => {
-        return item.nodeName === 'DIV';
+                        delete modelData.user_defined;
+                      }
+                      list.push(modelData);
+                    }
                   });
-      htmDom.classList.add('icon-border');
-      this.iconValue = num;
-    },
+                  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);
+                  }
+                }
 
-    /**
-     * 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.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.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';
+                this.noFixedSeries.forEach((item) => {
+                  item.checked = true;
                 });
-      const classArr = classWrap.querySelectorAll('.icon-border');
-      classArr.forEach((item) => {
-        item.classList.remove('icon-border');
+                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.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);
+                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 (this.selectedBarList) {
-        const resultArray = this.hideDataMarkTableData();
-        this.table.column = this.dirPathList.concat(resultArray, list);
+                  if (listdada.length) {
+                    this.showEchartPic = true;
                   } else {
-        this.table.column = this.dirPathList.concat(list);
+                    this.showEchartPic = false;
                   }
-    },
-
-    /**
-     * deselect all
-     */
-    deselectAll() {
-      this.selectArrayValue = [];
-      this.checkOptions.forEach((item) => {
-        if (item.disabled) {
-          this.selectArrayValue.push(item.value);
+                  this.echart.showData = listdada;
+                } else {
+                  this.echart.showData = this.echart.brushData;
+                  this.showEchartPic = true;
                 }
-      });
-      this.selectCheckAll = false;
+                this.resizeChart();
+                this.setEchartValue();
                 this.$nextTick(() => {
                   this.initChart();
                 });
-      const list = [];
-      this.checkOptions.forEach((item) => {
-        this.selectArrayValue.forEach((i) => {
-          if (i === item.value) {
-            list.push(i);
-          }
-        });
-      });
+                // 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, list);
+                  this.table.column = this.dirPathList.concat(
+                      resultArray,
+                      this.checkedSeries.map((i) => i.id),
+                  );
                 } else {
-        this.table.column = this.dirPathList.concat(list);
+                  this.table.column = this.dirPathList.concat(
+                      this.checkedSeries.map((i) => i.id),
+                  );
                 }
               },
-
-    /**
-     * Edit remarks
-     * @param {Object} row
-     */
-    editRemarks(row) {
-      row.editShow = false;
-      row.isError = false;
-      this.beforeEditValue = row.remark;
-    },
-
-    /**
-     * Save remarks
-     * @param {Object} row
-     */
-    saveRemarksValue(row) {
-      const tagValidation = new RegExp('^[a-zA-Z0-9\u4e00-\u9fa5_.-]{1,128}$');
-      const result = row.remark.length ? tagValidation.test(row.remark) : true;
-      if (result) {
-        row.isError = false;
-        row.editShow = true;
-        const params = {
-          train_id: row.summary_dir,
-          body: {
-            remark: row.remark,
-          },
-        };
-        this.putChangeToLineagesData(params);
-      } else {
-        row.isError = true;
-      }
+              (error) => {
+                this.loading = false;
+                this.initOver = true;
+                this.showEchartPic = false;
+                this.errorData = true;
+                this.nodata = true;
               },
-
-    /**
-     * Cancel Save Editing
-     * @param {Object} row
-     */
-    cancelRemarksValue(row) {
-      row.editShow = true;
-      row.remark = this.beforeEditValue;
-      row.isError = false;
+          )
+          .catch(() => {
+            this.loading = false;
+            this.initOver = true;
+            this.showEchartPic = false;
+            this.errorData = true;
+            this.nodata = true;
+          });
     },
-
     /**
-     * After the remark or tag is modified,invoke the interface and save the modification
-     * @param {Object} params
+     *  Gets the selected items and updates the select all state.
      */
-    putChangeToLineagesData(params) {
-      RequestService.putLineagesData(params)
-          .then(
-              (res) => {
-                if (res) {
-                  this.$message.success(this.$t('modelTraceback.changeSuccess'));
+    getCheckedSerList() {
+      this.checkedSeries = [];
+      this.totalSeries.forEach((nodeItem) => {
+        if (nodeItem.checked) {
+          this.checkedSeries.push(nodeItem);
         }
+      });
     },
-              (error) => {},
-          )
-          .catch(() => {});
-    },
-
     /**
-     * Hidden records
+     * Chart data encapsulation
+     * @param {Object} data
+     * @return {Object}
      */
-    hiddenRecords() {
-      this.hideRecord = true;
-      if (this.dataCheckedSummary.length) {
-        this.dataCheckedSummary.forEach((i) => {
-          this.hidenDirChecked.push(i.summary_dir);
-        });
+    formateOriginData(data) {
+      if (!data || !data.object) {
+        return {};
       }
-      this.$store.commit('setHidenDirChecked', this.hidenDirChecked);
-      if (this.hidenDirChecked.length) {
-        const tempEchartData = this.echart.brushData.slice();
-        this.hidenDirChecked.forEach((dir) => {
-          tempEchartData.forEach((item, index) => {
-            if (item.summary_dir === dir) {
-              tempEchartData.splice(index, 1);
+      // 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)));
       });
-        });
-        const tableTemp = this.table.data.slice();
-        this.hidenDirChecked.forEach((dir) => {
-          tableTemp.forEach((item, index) => {
-            if (item.summary_dir === dir) {
-              tableTemp.splice(index, 1);
+      // 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,
               });
-        });
-        this.dataCheckedSummary = [];
-        this.table.data = tableTemp;
-        this.showNumber = tableTemp.length;
-        this.echart.showData = tempEchartData;
-        this.$refs.table.clearSelection();
-        if (this.echart.showData.length > 0) {
-          this.$nextTick(() => {
-            this.initChart();
-          });
+              nodeItem.id = tempId;
+              startIndex++;
+              tempNodeListMap = fullNodeList.map((nodeObj) => nodeObj.name);
             } else {
-          this.showEchartPic = false;
-        }
-      }
-      this.hideRecord = false;
-    },
-
-    /**
-     * Unhide
-     */
-    unhideRecords() {
-      if (this.unhideTimer) {
-        clearTimeout(this.unhideTimer);
-        this.unhideTimer = null;
-      }
-      this.unhideTimer = setTimeout(() => {
-        this.showEchartPic = true;
-        this.$refs.table.clearSelection();
-        if (this.parallelEchart) {
-          this.parallelEchart.clear();
-        }
-        this.$store.commit('setHidenDirChecked', []);
-        if (this.hidenDirChecked.length) {
-          this.checkedSummary = [];
-          this.hidenDirChecked = [];
-        }
-        this.checkOptions = [];
-        this.selectArrayValue = [];
-        this.basearr = [];
-        const params = {
-          body: {},
-        };
-        const tempParam = {
-          sorted_name: this.sortInfo.sorted_name,
-          sorted_type: this.sortInfo.sorted_type,
-        };
-        this.summaryDirList = this.$store.state.summaryDirList;
-        this.tableFilter.summary_dir = {
-          in: this.summaryDirList,
-        };
-        params.body = Object.assign(
-            params.body,
-            this.chartFilter,
-            tempParam,
-            this.tableFilter,
-        );
-        this.queryLineagesData(params);
-      }, this.delayTime);
-    },
-    /**
-     * Input search filtering in the select module
-     */
-    myfilter() {
-      const queryString = this.keyWord;
-      const restaurants = this.basearr;
-      const results = queryString
-        ? this.createFilter(queryString, restaurants)
-        : restaurants;
-      this.checkOptions = results;
-    },
-
-    /**
-     * Input search filtering in the select module
-     * @param {String} queryString
-     * @param {Array} restaurants
-     * @return {Array}
-     */
-    createFilter(queryString, restaurants) {
-      const list = [];
-      restaurants.forEach((item) => {
-        const object = {};
-        if (
-          item &&
-          item.label.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
-        ) {
-          object.label = item.label;
-          object.value = item.value;
-          object.disabled = item.disabled;
-          list.push(object);
+              nodeItem.id = fullNodeList[tempIndex].id;
+              startIndex = tempIndex + 1;
             }
           });
-      return list;
-    },
-
-    selectinputFocus() {
-      // the text box is restored to empty
-      this.keyWord = '';
-      this.checkOptions = this.basearr;
-    },
-
-    /**
-     * Selected data in the table
-     */
-    selectValueChange() {
-      const templist = [];
-      this.basearr.forEach((item) => {
-        templist.push(item.label);
+        } 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,
               });
-      if (templist.length > this.selectArrayValue.length) {
-        this.selectCheckAll = false;
+              nodeItem.id = nodeItem.name;
             } else {
-        this.selectCheckAll = true;
+              fullNodeList.push({
+                name: nodeItem.name,
+                id: `${nodeItem.name}${tempDic[nodeItem.name]}`,
+              });
+              nodeItem.id = `${nodeItem.name}${tempDic[nodeItem.name]}`;
             }
-      this.$nextTick(() => {
-        this.initChart();
           });
-      const list = [];
-      this.basearr.forEach((item) => {
-        this.selectArrayValue.forEach((i) => {
-          if (i === item.value) {
-            list.push(i);
         }
       });
+      // 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;
 
-      if (this.selectedBarList) {
-        const resultArray = this.hideDataMarkTableData();
-        this.table.column = this.dirPathList.concat(resultArray, list);
-      } else {
-        this.table.column = this.dirPathList.concat(list);
-      }
+        // 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;
     },
 
-    /**
-     * init
-     */
-    init() {
-      this.customizedColumnOptions =
-        this.$store.state.customizedColumnOptions || [];
-      this.table.columnOptions = Object.assign(
-          this.table.columnOptions,
-          this.customizedColumnOptions,
+    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,
           );
-      // 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.
      */
@@ -1189,56 +1096,537 @@ export default {
         }
       });
     },
+
+    /**
+     *  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 {
+        // Text color
+        obj.nameTextStyle = {
+          color: 'black',
+        };
+      }
+    },
+
+    /**
+     * Edit remarks
+     * @param {Object} row
+     */
+    editRemarks(row) {
+      row.editShow = false;
+      row.isError = false;
+      this.beforeEditValue = row.remark;
+    },
+
+    /**
+     * Save remarks
+     * @param {Object} row
+     */
+    saveRemarksValue(row) {
+      const tagValidation = new RegExp('^[a-zA-Z0-9\u4e00-\u9fa5_.-]{1,128}$');
+      const result = row.remark.length ? tagValidation.test(row.remark) : true;
+      if (result) {
+        row.isError = false;
+        row.editShow = true;
+        const params = {
+          train_id: row.summary_dir,
+          body: {
+            remark: row.remark,
+          },
+        };
+        this.putChangeToLineagesData(params);
+      } else {
+        row.isError = true;
+      }
+    },
+
+    /**
+     * Cancel Save Editing
+     * @param {Object} row
+     */
+    cancelRemarksValue(row) {
+      row.editShow = true;
+      row.remark = this.beforeEditValue;
+      row.isError = false;
+    },
+    /**
+     * After the remark or tag is modified,invoke the interface and save the modification
+     * @param {Object} params
+     */
+    putChangeToLineagesData(params) {
+      RequestService.putLineagesData(params)
+          .then(
+              (res) => {
+                if (res) {
+                  this.$message.success(this.$t('modelTraceback.changeSuccess'));
+                }
+              },
+              (error) => {},
+          )
+          .catch(() => {});
+    },
+
+    // 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
+     */
+    hiddenRecords() {
+      this.hideRecord = true;
+      if (this.dataCheckedSummary.length) {
+        this.dataCheckedSummary.forEach((i) => {
+          this.hidenDirChecked.push(i.summary_dir);
+        });
+      }
+      this.$store.commit('setHidenDirChecked', this.hidenDirChecked);
+      if (this.hidenDirChecked.length) {
+        const tempEchartData = this.echart.brushData.slice();
+        this.hidenDirChecked.forEach((dir) => {
+          tempEchartData.forEach((item, index) => {
+            if (item.summary_dir === dir) {
+              tempEchartData.splice(index, 1);
+            }
+          });
+        });
+        const tableTemp = this.table.data.slice();
+        this.hidenDirChecked.forEach((dir) => {
+          tableTemp.forEach((item, index) => {
+            if (item.summary_dir === dir) {
+              tableTemp.splice(index, 1);
+            }
+          });
+        });
+        this.dataCheckedSummary = [];
+        this.table.data = tableTemp;
+        this.showNumber = tableTemp.length;
+        this.echart.showData = tempEchartData;
+        this.$refs.table.clearSelection();
+        if (this.echart.showData.length > 0) {
+          this.$nextTick(() => {
+            this.initChart();
+          });
+        } else {
+          this.showEchartPic = false;
+        }
+      }
+      this.hideRecord = false;
+    },
+
+    /**
+     * Unhide
+     */
+    unhideRecords() {
+      if (this.unhideTimer) {
+        clearTimeout(this.unhideTimer);
+        this.unhideTimer = null;
+      }
+      this.unhideTimer = setTimeout(() => {
+        this.showEchartPic = true;
+        this.$refs.table.clearSelection();
+        if (this.parallelEchart) {
+          this.parallelEchart.clear();
+        }
+        this.$store.commit('setHidenDirChecked', []);
+        if (this.hidenDirChecked.length) {
+          this.checkedSummary = [];
+          this.hidenDirChecked = [];
+        }
+        this.checkOptions = [];
+        this.selectArrayValue = [];
+        this.basearr = [];
+        const params = {
+          body: {},
+        };
+        const tempParam = {
+          sorted_name: this.sortInfo.sorted_name,
+          sorted_type: this.sortInfo.sorted_type,
+        };
+        this.summaryDirList = this.$store.state.summaryDirList;
+        this.tableFilter.summary_dir = {
+          in: this.summaryDirList,
+        };
+        params.body = Object.assign(
+            params.body,
+            this.chartFilter,
+            tempParam,
+            this.tableFilter,
+        );
+        this.queryLineagesData(params);
+      }, this.delayTime);
+    },
+    /**
+     * Input search filtering in the select module
+     */
+    myfilter() {
+      const queryString = this.keyWord;
+      const restaurants = this.basearr;
+      const results = queryString
+        ? this.createFilter(queryString, restaurants)
+        : restaurants;
+      this.checkOptions = results;
+    },
+
+    /**
+     * Input search filtering in the select module
+     * @param {String} queryString
+     * @param {Array} restaurants
+     * @return {Array}
+     */
+    createFilter(queryString, restaurants) {
+      const list = [];
+      restaurants.forEach((item) => {
+        const object = {};
+        if (
+          item &&
+          item.label.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
+        ) {
+          object.label = item.label;
+          object.value = item.value;
+          object.disabled = item.disabled;
+          list.push(object);
+        }
+      });
+      return list;
+    },
+
+    selectinputFocus() {
+      // the text box is restored to empty
+      this.keyWord = '';
+      this.checkOptions = this.basearr;
+    },
+
     /**
-     * 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) + '...';
+    selectValueChange() {
+      const templist = [];
+      this.basearr.forEach((item) => {
+        templist.push(item.label);
+      });
+      if (templist.length > this.selectArrayValue.length) {
+        this.selectCheckAll = false;
       } else {
-              for (let i = 0, s = ''; (s = strs[i++]); ) {
-                str += s;
-                if (!(i % showStringLength)) {
-                  str += '\n';
-                }
+        this.selectCheckAll = true;
       }
-              return str;
+      this.$nextTick(() => {
+        this.initChart();
+      });
+      const list = [];
+      this.basearr.forEach((item) => {
+        this.selectArrayValue.forEach((i) => {
+          if (i === item.value) {
+            list.push(i);
           }
-          },
-        };
-        obj.axisLine = {
-          show: true,
-          lineStyle: {
-            color: '#00a5a7',
-          },
-        };
+        });
+      });
+
+      if (this.selectedBarList) {
+        const resultArray = this.hideDataMarkTableData();
+        this.table.column = this.dirPathList.concat(resultArray, list);
       } else {
-        // Text color
-        obj.nameTextStyle = {
-          color: 'black',
-        };
+        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
@@ -1409,259 +1804,41 @@ export default {
                       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);
-                      }
-                    });
-                  });
-                  if (listdada.length) {
-                    this.showEchartPic = true;
-                  } else {
-                    this.showEchartPic = false;
+                  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.echart.showData = listdada;
+                    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.echart.showData = this.echart.brushData;
-                  this.showEchartPic = true;
+                    this.table.data = JSON.parse(JSON.stringify(serData));
                   }
-                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 {
 };
 </script>
 <style lang="scss">
+.cl-data-traceback {
+  height: 100%;
+  background-color: #fff;
+}
+.traceback-tab {
+  height: 51px;
+  line-height: 56px;
+  padding: 0 24px;
+  border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
+}
+.traceback-tab-item {
+  padding: 0 10px;
+  height: 48px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  line-height: 48px;
+  display: inline-block;
+  list-style: none;
+  font-size: 18px;
+  color: #303133;
+  position: relative;
+}
+.item-active {
+  color: #00a5a7;
+  font-weight: bold;
+  border-bottom: 3px solid rgba($color: #00a5a7, $alpha: 1);
+}
+.traceback-tab-item:hover {
+  color: #00a5a7;
+  cursor: pointer;
+}
 .label-text {
   line-height: 20px !important;
   padding-top: 20px;
@@ -2128,9 +2173,9 @@ export default {
 .btn-disabled {
   cursor: not-allowed !important;
 }
-#cl-data-traceback {
+#data-traceback-con {
   display: flex;
-  height: 100%;
+  height: calc(100% - 51px);
   overflow-y: auto;
   position: relative;
   background: #fff;
@@ -2266,7 +2311,7 @@ export default {
     overflow: hidden;
 
     .data-checkbox-area {
-      margin: 24px 32px 12px;
+      margin: 6px 32px;
       height: 46px;
       display: flex;
       justify-content: flex-end;
@@ -2287,12 +2332,12 @@ export default {
       padding: 0 12px;
     }
     .echart-nodata-container {
-      height: 32%;
+      height: 35%;
       width: 100%;
     }
     .table-container {
       background-color: white;
-      height: calc(68% - 130px);
+      height: calc(65% - 88px);
       padding: 6px 32px;
       position: relative;
       .disabled-checked {

mindinsight/ui/src/views/train-manage/model-traceback.vue

@@ -14,7 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <template>
-  <div id="cl-model-traceback">
+  <div class="cl-model-traceback">
+    <div class="traceback-tab">
+      <div class="traceback-tab-item item-active">{{$t("summaryManage.modelTraceback")}}</div>
+      <div class="traceback-tab-item"
+           @click="jumpToDataTraceback()">{{$t("summaryManage.dataTraceback")}}</div>
+    </div>
+    <div id="model-traceback-con">
       <div v-if="loading"
            class="no-data-page">
         <div class="no-data-img">
@@ -23,8 +29,127 @@ limitations under the License.
           <p class="no-data-text">{{$t("public.dataLoading")}}</p>
         </div>
       </div>
+
+      <div class="cl-model-left"
+           :class="{collapse:collapse}"
+           v-show="!loading && !errorData">
+        <div class="left-chart-container"
+             v-show="!collapse && !errorData">
+          <div class="left-title">
+            <div class="title-style">{{$t('modelTraceback.optimizationObject')}}
+            </div>
+            <div class="pie-select-style">
+              <el-select v-model="targetValue"
+                         class="left-select"
+                         @change="targetSelectChange()">
+                <el-option v-for="item in targetOptions"
+                           :key="item.value"
+                           :label="item.label"
+                           :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+          <!-- pie chart -->
+          <div class="pie-module-container">
+            <div class="title-container">
+              <div class="pie-title">{{$t('modelTraceback.targetDistribution')}}</div>
+            </div>
+            <div id="pie-chart">
+            </div>
+          </div>
+          <!-- bar -->
+          <div class="bar-module-container">
+            <div class="bar-title-container">
+              <div class="bar-title"> {{$t('modelTraceback.parameterImportance')}}</div>
+              <div class="inline-block-set bar-select">
+                <!-- Parameter importance drop-down box -->
+                <el-select v-model="selectedBarArray"
+                           multiple
+                           collapse-tags
+                           @change="selectedBarNameListChange"
+                           :placeholder="$t('public.select')"
+                           @focus="selectinputFocus('left')">
+                  <div class="select-input-button">
+                    <div class="select-inner-input">
+                      <el-input v-model="barKeyWord"
+                                @input="myfilter('left')"
+                                :placeholder="$t('public.search')"></el-input>
+                    </div>
+                    <button type="text"
+                            @click="barAllSelect"
+                            class="select-all-button"
+                            :class="[selectedAllBar ? 'checked-color' : 'button-text',
+                            baseSelectOptions.length > barNameList.length ? 'btn-disabled' : '']"
+                            :disabled="baseSelectOptions.length > barNameList.length">
+                      {{$t('public.selectAll')}}
+                    </button>
+                    <button type="text"
+                            @click="barDeselectAll"
+                            class="deselect-all-button"
+                            :class="[!selectedAllBar ? 'checked-color' : 'button-text',
+                            baseSelectOptions.length > barNameList.length ? 'btn-disabled' : '']"
+                            :disabled="baseSelectOptions.length > barNameList.length">
+                      {{$t('public.deselectAll')}}
+                    </button>
+                  </div>
+                  <el-option-group v-for="group in barNameList"
+                                   :key="group.label"
+                                   :label="group.label">
+                    <el-option v-for="item in group.options"
+                               :key="item.value"
+                               :label="item.label"
+                               :value="item.value"
+                               :disabled="item.disabled"
+                               :title="item.disabled ? $t('modelTraceback.mustExist') : ''">
+                    </el-option>
+                  </el-option-group>
+                </el-select>
+              </div>
+            </div>
+            <div id="bar-chart"></div>
+          </div>
+          <!-- scatter -->
+          <div class="scatter-container">
+            <div class="scatter-title-container">
+              <div>
+                {{$t('modelTraceback.optimizationTitle')}}
+                <el-tooltip class="item"
+                            effect="light"
+                            placement="top-start">
+                  <div slot="content"
+                       class="tooltip-container">
+                    {{$t('modelTraceback.targetTips')}}
+                  </div>
+                  <i class="el-icon-info"></i>
+                </el-tooltip>
+              </div>
+              <div class="right-view">
+                <div class="view-big"
+                     @click="viewLargeImage"
+                     :title="$t('modelTraceback.viewBigImage')">
+                </div>
+              </div>
+            </div>
+            <div class="left-scatters-container">
+              <Scatter :data="scatterChartData"
+                       :yTitle="yTitle"
+                       :xTitle="xTitle"
+                       :tooltipsData="tooltipsData"
+                       :showTooltip="false">
+              </Scatter>
+            </div>
+          </div>
+        </div>
+        <div class="collapse-btn"
+             :class="{collapse:collapse}"
+             @click="collapseLeft()">
+        </div>
+      </div>
+      <!-- Model traceability right column  -->
       <div class="cl-model-right"
-         v-if="!loading">
+           v-if="!loading"
+           :class="{collapse:collapse}">
         <div class="top-area"
              v-show="!errorData">
           <div class="select-box"
@@ -86,7 +211,7 @@ limitations under the License.
           </div>
           <div class="btns">
             <el-button class="custom-btn"
-                     @click="resetChart"
+                       @click="showAllDatafun"
                        type="primary"
                        size="mini"
                        plain
@@ -121,7 +246,7 @@ limitations under the License.
           <el-table ref="table"
                     :data="table.data"
                     tooltip-effect="light"
-                  height="calc(100% - 40px)"
+                    height="calc(100% - 30px)"
                     @selection-change="selectionChange"
                     @sort-change="sortChange"
                     row-key="summary_dir">
@@ -355,18 +480,78 @@ limitations under the License.
           </div>
         </div>
       </div>
+      <!-- echart dialog -->
+      <div v-show="echartDialogVisible">
+        <el-dialog :title="$t('modelTraceback.optimizationTitle')"
+                   :visible.sync="echartDialogVisible"
+                   width="50%"
+                   :close-on-click-modal="false"
+                   class="echart-data-list">
+          <div class="dialog-scatter">
+            <Scatter ref="dialogScatter"
+                     :data="largeScatterChartData"
+                     :yTitle="yTitle"
+                     :xTitle="xTitle"
+                     :tooltipsData="tooltipsData"
+                     :showTooltip="true">
+            </Scatter>
+          </div>
+        </el-dialog>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 import RequestService from '../../services/request-service';
 import CommonProperty from '@/common/common-property.js';
 import Echarts from 'echarts';
+import Scatter from '@/components/scatter';
 
 export default {
   props: {},
   watch: {},
   data() {
     return {
+      // left data
+      // Expand and collapse the left column
+      collapse: false,
+      showLeftChart: null,
+      targetValue: '',
+      targetOptions: [],
+      targetLabel: '',
+      targetData: [],
+      scatterData: [],
+      pieLegendData: [],
+      pieSeriesData: [],
+      barYAxisData: [],
+      barSeriesData: [],
+      scatterChartData: [],
+      largeScatterChartData: [],
+      // Scatter chart tips data
+      tooltipsData: [],
+      // The content of the bar graph drop-down box
+      barNameList: [],
+      // All values of the drop-down box initially saved
+      baseSelectOptions: [],
+      // Whether to select all the drop-down boxes of the histogram
+      selectedAllBar: false,
+      // Selected select bar name
+      selectBarNameList: [],
+      // input key word
+      barKeyWord: '',
+      // List of selected bars
+      selectedBarArray: [],
+      // List of all bars
+      allBararr: [],
+      yTitle: '',
+      xTitle: '',
+      // bar datazoom scroll bar settings
+      barStart: 100,
+      barEnd: 0,
+      tooltipsBarData: [],
+      echartDialogVisible: false,
+
+      // right data
       sortChangeTimer: null,
       unhideRecordsTimer: null,
       tagDialogShow: false,
@@ -380,6 +565,7 @@ export default {
       recordsNumber: 0,
       showNumber: 0,
       delayTime: 500,
+      otherDelayTime: 300,
       showEchartPic: true,
       hideRecord: false,
       hidenDirChecked: [],
@@ -454,13 +640,7 @@ export default {
   computed: {},
   mounted() {
     this.setInitListValue();
-    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.setTableTagImage();
     document.title = `${this.$t('summaryManage.modelTraceback')}-MindInsight`;
     document.addEventListener('click', this.blurFloat, true);
     this.$store.commit('setSelectedBarList', []);
@@ -474,357 +654,449 @@ 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;
+    // Set the image display of the tag
+    setTableTagImage() {
+      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);
       }
     },
-
+    /** ***  left code***/
     /**
-     * Display of the icon dialog box
-     * @param {Object} row
-     * @param {Object} scope
-     * @param {Object} event
+     * open or close left  column
      */
-    showAllIcon(row, scope, event) {
-      this.iconValue = row.tag >= 0 ? row.tag : 0;
-      this.tagScope = scope;
-      if (this.tagDialogShow) {
-        this.tagDialogShow = false;
-        this.removeIconBorder();
-        return;
+    collapseLeft() {
+      this.collapse = !this.collapse;
+      if (this.showLeftChart) {
+        clearTimeout(this.showLeftChart);
+        this.showLeftChart = null;
       }
-      this.addIconBorder(row);
-      this.tagDialogShow = true;
-      const dialogHeight = 130;
-      const ev = window.event || event;
-      document.getElementById('tag-dialog').style.top =
-        ev.clientY - dialogHeight + 'px';
+      this.showLeftChart = setTimeout(() => {
+        this.resizeChart();
+      }, 50);
     },
 
     /**
-     * Add icon border style
-     * @param {Object} row
+     * Call the left side to optimize the target interface to obtain data
      */
-    addIconBorder(row) {
-      const iconImage = document.querySelectorAll('.icon-image');
-      iconImage.forEach((item, index) => {
-        if (index + 1 === row.tag) {
-          item.classList.add('icon-border');
+    initLeftColumnData() {
+      this.getTargetsData();
+    },
+    getTargetsData() {
+      this.targetOptions = [];
+      RequestService.queryTargetsData().then((resp) => {
+        if (
+          resp &&
+          resp.data &&
+          resp.data.targets &&
+          resp.data.targets.length
+        ) {
+          this.targetData = JSON.parse(JSON.stringify(resp.data.targets));
+          this.scatterData = JSON.parse(JSON.stringify(resp.data));
+          let targetName = '';
+          for (let i = 0; i < this.targetData.length; i++) {
+            const obj = {};
+            targetName = this.targetData[i].name;
+            obj.value = targetName;
+            obj.label = targetName;
+            this.targetOptions.push(obj);
+          }
+          this.targetValue = this.targetData[0].name;
+          this.targetLabel = this.targetData[0].name;
+          this.setTargetsData(0);
+          this.$nextTick(() => {
+            setTimeout(() => {
+              this.setChartOfPie();
+              this.setChartOfBar();
+              this.setChartOfScatters();
+            }, this.otherDelayTime);
+          });
         }
       });
     },
 
     /**
-     * Remove  icon border style
+     * Single selection drop-down box on the left
      */
-    removeIconBorder() {
-      const classArr = document.querySelectorAll('.icon-border');
-      if (classArr.length) {
-        classArr.forEach((item) => {
-          item.classList.remove('icon-border');
-        });
+    targetSelectChange() {
+      const length = this.targetOptions.length;
+      let index = 0;
+      for (let i = 0; i < length; i++) {
+        if (this.targetValue === this.targetOptions[i].value) {
+          this.targetLabel = this.targetOptions[i].label;
+          index = i;
+        }
       }
+      this.setTargetsData(index);
+      this.$nextTick(() => {
+        this.setChartOfPie();
+        this.setChartOfBar();
+        this.setChartOfScatters();
+      });
     },
-
     /**
-     * icon value change
-     * @param {Object} row
-     * @param {Number} num
-     *  @param {Object} event
+     * The method of changing the value of the multi-select drop-down box of the histogram
      */
-    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');
+    selectedBarNameListChange() {
+      // Setting the bar selection
+      const list = [];
+      this.baseSelectOptions.forEach((item) => {
+        item.options.forEach((option) => {
+          list.push(option.label);
         });
-      const htmDom = path.find((item) => {
-        return item.nodeName === 'DIV';
       });
-      htmDom.classList.add('icon-border');
-      this.iconValue = num;
+      if (list.length > this.selectedBarArray.length) {
+        this.selectedAllBar = false;
+      } else {
+        this.selectedAllBar = true;
+      }
+      this.selectedSetBarData();
     },
-    /**
-     * Save the modification of the icon.
-     * @param {Object} scope
-     */
-    iconChangeSave(scope) {
-      this.tagDialogShow = false;
-      if (scope.row.tag === this.iconValue || this.iconValue === 0) {
+    // Select all bar options
+    barAllSelect() {
+      if (this.selectedAllBar) {
         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.selectedBarArray = [];
+      this.barNameList.forEach((item) => {
+        item.options.forEach((option) => {
+          this.selectedBarArray.push(option.label);
         });
-      this.$forceUpdate();
-      const params = {
-        train_id: scope.row.summary_dir,
-        body: {
-          tag: this.tagScope.row.tag,
-        },
-      };
-      this.putChangeToLineagesData(params);
+      });
+      this.selectedAllBar = !this.selectedAllBar;
+      this.selectedSetBarData();
     },
 
-    /**
-     * 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';
+    // Bar unselect all
+    barDeselectAll() {
+      this.selectedBarArray = [];
+      this.barNameList.forEach((item) => {
+        item.options.forEach((option) => {
+          if (option.disabled) {
+            this.selectedBarArray.push(option.label);
+          }
         });
-      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');
+      this.selectedAllBar = false;
+      this.selectedSetBarData();
+    },
+
+    viewLargeImage() {
+      this.echartDialogVisible = true;
+      this.$nextTick(() => {
+        this.largeScatterChartData = this.scatterChartData;
+        this.$refs.dialogScatter.resizeCallback();
       });
-      const params = {
-        train_id: scope.row.summary_dir,
-        body: {
-          tag: 0,
     },
+
+    sortBy(field) {
+      return function(a, b) {
+        return a[field] - b[field];
       };
-      this.putChangeToLineagesData(params);
     },
-    /**
-     * cancel save
-     * @param {Object} row
-     */
-    cancelChangeIcon(row) {
-      this.removeIconBorder();
-      this.addIconBorder(row);
-      this.tagDialogShow = false;
+    setNumberType(value) {
+      const num = 1000000;
+      if (value < num) {
+        return Math.round(value * Math.pow(10, 4)) / Math.pow(10, 4);
+      } else {
+        return value.toExponential(4);
+      }
     },
 
-    /**
-     * Select all
-     */
-    allSelect() {
-      if (this.selectCheckAll) {
-        return;
-      }
-      this.selectArrayValue = [];
-      this.checkOptions.forEach((item) => {
-        item.options.forEach((option) => {
-          this.selectArrayValue.push(option.label);
-        });
+    setTargetsData(index) {
+      const pieHBuckets = this.targetData[index].buckets;
+      this.pieLegendData = [];
+      this.pieSeriesData = [];
+      // data of pie
+      for (let i = 0; i < pieHBuckets.length; i++) {
+        const objData = {};
+        let preNumber = pieHBuckets[i][0];
+        preNumber = Math.round(preNumber * Math.pow(10, 4)) / Math.pow(10, 4);
+        let nextNumber = pieHBuckets[i][1];
+        nextNumber = Math.round(nextNumber * Math.pow(10, 4)) / Math.pow(10, 4);
+        let numSum = preNumber + nextNumber;
+        numSum = Math.round(numSum * Math.pow(10, 4)) / Math.pow(10, 4);
+        const numSumString = preNumber + '~' + numSum;
+        this.pieLegendData.push(numSumString);
+        objData.value = pieHBuckets[i][2];
+        objData.name = numSumString;
+        this.pieSeriesData.push(objData);
+      }
+      this.setBarData(index);
+    },
+
+    //
+    setBarData(index) {
+      const barHyper = this.targetData[index].hyper_parameters;
+      barHyper.sort(this.sortBy('importance'));
+      this.selectedBarArray = [];
+      const mustSelectOptions = [];
+      const otherListOptions = [];
+      const selectBar = [];
+      barHyper.forEach((item) => {
+        if (item.name.startsWith('[U]')) {
+          otherListOptions.push({
+            value: item.name,
+            label: item.name,
+            disabled: false,
           });
-      this.selectCheckAll = !this.selectCheckAll;
-      let allList = [];
-      const listA = [this.$t('modelTraceback.summaryPath')];
-      allList = this.selectArrayValue.concat(listA);
-      //  Set selected of the column data in the table to false;
-      Object.keys(this.table.columnOptions).filter((i) => {
-        this.table.columnOptions[i].selected = false;
+        } else {
+          mustSelectOptions.push({
+            value: item.name,
+            label: item.name,
+            disabled: true,
           });
-      allList.forEach((item) => {
-        Object.keys(this.table.columnOptions).filter((i) => {
-          const labelValue = this.table.columnOptions[i].label;
-          if (labelValue === item) {
-            this.table.columnOptions[i].selected = true;
+          selectBar.push(item.name);
         }
       });
-      });
-      this.initColumm();
+      this.selectedBarArray = selectBar;
+      this.barNameList = [];
+      this.baseSelectOptions = [];
+      const nameObjMust = {
+        label: this.$t('modelTraceback.mustOptions'),
+        options: mustSelectOptions,
+      };
+      const nameObjOther = {
+        label: this.$t('modelTraceback.customOptions'),
+        options: otherListOptions,
+      };
+      // The displayed bar drop-down box content
+      this.barNameList.push(nameObjMust, nameObjOther);
+      // Save all the contents of the drop-down box
+      this.baseSelectOptions.push(nameObjMust, nameObjOther);
+      this.barYAxisData = [];
+      this.barSeriesData = [];
+      for (let i = 0; i < barHyper.length; i++) {
+        const name = barHyper[i].name;
+        let importanceValue = barHyper[i].importance;
+        const smallNum = 0.0001;
+        if (importanceValue < smallNum && importanceValue > 0) {
+          importanceValue = importanceValue.toExponential(4);
+        } else {
+          importanceValue =
+            Math.round(importanceValue * Math.pow(10, 4)) / Math.pow(10, 4);
+        }
+        if (!barHyper[i].name.startsWith('[U]')) {
+          this.barYAxisData.push(name);
+          this.barSeriesData.push(importanceValue);
+        }
+      }
+      this.selectedAllBar =
+        barHyper.length > this.barYAxisData.length ? false : true;
+    },
+
+    setChartOfPie() {
+      const myPieChart = Echarts.init(document.getElementById('pie-chart'));
+      const pieOption = {
+        grid: {
+          y2: 0,
+          y: 0,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/> {b} : {c} ({d}%)',
+        },
+        legend: {
+          data: this.pieLegendData,
+          selectedMode: false,
+          icon: 'circle',
+          itemWidth: 10,
+          itemHeight: 10,
+          itemGap: 10,
+        },
+        color: ['#6c91fb', '#7cdc9f', '#fc8b5d', '#f1689b', '#ab74ff'],
+        series: [
+          {
+            name: this.targetLabel,
+            type: 'pie',
+            radius: '55%',
+            center: ['50%', '60%'],
+            label: {formatter: '{c}({d}%)'},
+            data: this.pieSeriesData,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+              },
+            },
+          },
+        ],
+      };
       this.$nextTick(() => {
-        this.initChart();
-        this.$refs.table.doLayout();
+        myPieChart.setOption(pieOption);
       });
     },
 
-    /**
-     * deselect all
-     */
-    deselectAll() {
-      this.selectArrayValue = [];
-      this.checkOptions.forEach((item) => {
-        item.options.forEach((option) => {
-          if (option.disabled) {
-            this.selectArrayValue.push(option.label);
-          }
-        });
-      });
-      this.selectCheckAll = false;
-      let allList = [];
-      const listA = [this.$t('modelTraceback.summaryPath')];
-      allList = this.selectArrayValue.concat(listA);
-      // Set selected to false for these columns in the table.
-      Object.keys(this.table.columnOptions).filter((i) => {
-        this.table.columnOptions[i].selected = false;
-      });
-      allList.forEach((item) => {
-        Object.keys(this.table.columnOptions).filter((i) => {
-          const labelValue = this.table.columnOptions[i].label;
-          if (labelValue === item) {
-            this.table.columnOptions[i].selected = true;
-          }
-        });
-      });
-      this.initChart();
-      this.initColumm();
+    setChartOfBar() {
+      this.xTitle = this.barYAxisData[this.barYAxisData.length - 1];
+      const myBarChart = Echarts.init(document.getElementById('bar-chart'));
+      const barOption = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+          formatter: (val) => {
+            this.tooltipsBarData = val;
+            const res =
+              '<p>' +
+              val[0].name +
+              '</p><p>' +
+              this.$t('modelTraceback.parameterImportance') +
+              ':' +
+              '&nbsp;&nbsp;' +
+              val[0].value +
+              '</p>';
+            return res;
+          },
+        },
+        xAxis: [{type: 'value'}],
+        yAxis: [
+          {
+            type: 'category',
+            axisTick: {show: false},
+            data: this.barYAxisData,
+            axisLabel: {
+              textStyle: {
+                color: (params) => {
+                  const textColor =
+                    params === this.xTitle ? '#cc5b58' : 'black';
+                  return textColor;
                 },
-    /**
-     * Edit remarks
-     * @param {Object} row
-     */
-    editRemarks(row) {
-      row.editShow = false;
-      row.isError = false;
-      this.beforeEditValue = row.remark;
               },
-
-    /**
-     * Save remarks
-     * @param {Object} row
-     */
-    saveRemarksValue(row) {
-      const tagValidation = new RegExp('^[a-zA-Z0-9\u4e00-\u9fa5_.-]{1,128}$');
-      const result = row.remark.length ? tagValidation.test(row.remark) : true;
-      if (result) {
-        row.isError = false;
-        row.editShow = true;
-        const params = {
-          train_id: row.summary_dir,
-          body: {
-            remark: row.remark,
             },
-        };
-        this.putChangeToLineagesData(params);
+          },
+        ],
+        series: [
+          {
+            name: this.$t('modelTraceback.parameterImportance'),
+            type: 'bar',
+            barGap: 0,
+            barWidth: 10,
+            data: this.barSeriesData,
+            itemStyle: {
+              normal: {
+                color: (params) => {
+                  // Determine the selected name to change the color setting of the column
+                  if (params.name === this.xTitle) {
+                    return '#cc5b58';
                   } else {
-        row.isError = true;
+                    return '#6c92fa';
                   }
                 },
-
-    /**
-     * Cancel save editing
-     * @param {Object} row
-     */
-    cancelRemarksValue(row) {
-      row.editShow = true;
-      row.remark = this.beforeEditValue;
-      row.isError = false;
               },
-
-    /**
-     *After the remark or tag is modified, invoke the interface and save the modification.
-     * @param {Object} params
-     */
-    putChangeToLineagesData(params) {
-      RequestService.putLineagesData(params)
-          .then(
-              (res) => {
-                if (res) {
-                  this.$message.success(this.$t('modelTraceback.changeSuccess'));
+            },
+          },
+        ],
+        grid: {
+          x: 90,
+          y: 30,
+          x2: 40,
+          y2: 30,
+        },
+        dataZoom: [
+          {
+            show: this.barYAxisData.length > 15 ? true : false,
+            type: 'slider',
+            yAxisIndex: 0,
+            width: '30px',
+            start: 100, // The starting percentage of the data frame range
+            end: this.barYAxisData.length > 15 ? 40 : 0, // The end percentage of the data frame range
+          },
+        ],
+      };
+      this.barEnd = this.barYAxisData.length > 15 ? 40 : 0;
+      this.$nextTick(() => {
+        myBarChart.setOption(barOption);
+      });
+      myBarChart.on('datazoom', (params) => {
+        this.barStart = params.start;
+        this.barEnd = params.end;
+      });
+      myBarChart.getZr().on('click', (params) => {
+        this.xTitle = this.tooltipsBarData[0].name;
+        barOption.dataZoom = [
+          {
+            show: this.barYAxisData.length > 15 ? true : false,
+            type: 'slider',
+            yAxisIndex: 0,
+            width: '30px',
+            start: this.barStart,
+            end: this.barEnd,
+          },
+        ];
+        barOption.yAxis = [
+          {
+            type: 'category',
+            axisTick: {show: false},
+            data: this.barYAxisData,
+          },
+        ];
+        barOption.series = [
+          {
+            type: 'bar',
+            barWidth: 10,
+            data: this.barSeriesData,
+            itemStyle: {
+              normal: {
+                color: (params) => {
+                  // Determine the selected name to change the color setting of the column
+                  if (params.name === this.xTitle) {
+                    return '#cc5b58';
+                  } else {
+                    return '#6c92fa';
                   }
                 },
-              (error) => {},
-          )
-          .catch(() => {});
               },
-
-    selectinputFocus() {
-      this.keyWord = '';
-      this.checkOptions = this.basearr;
             },
-    /**
-     * Input search filtering in the select module.
-     */
-    myfilter() {
-      const queryString = this.keyWord;
-      const restaurants = this.basearr;
-      const results = queryString
-        ? this.createFilter(queryString, restaurants)
-        : restaurants;
-      this.checkOptions = results;
+          },
+        ];
+        this.$nextTick(() => {
+          myBarChart.setOption(barOption);
+        });
+        // Draw a scatter chart after click
+        this.setChartOfScatters();
+      });
     },
 
     /**
-     *Input search filtering in the select module.
-     * @param {String} queryString
-     * @param {Array} restaurants
-     * @return {Array}
+     * set data of scatters echart
      */
-    createFilter(queryString, restaurants) {
-      const list = [];
-      restaurants.forEach((item) => {
-        const object = {};
-        const options = [];
-        if (item.options) {
-          item.options.forEach((item) => {
-            if (
-              item.label.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
-            ) {
-              const tempObj = {};
-              tempObj.label = item.label;
-              tempObj.value = item.value;
-              tempObj.disabled = item.disabled;
-              options.push(tempObj);
+    setChartOfScatters() {
+      this.yTitle = this.targetLabel;
+      let xvalue = [];
+      let yvalue = [];
+      this.tooltipsData = [];
+      const hyper = this.scatterData.metadata.hyper_parameters;
+      for (let m = 0; m < hyper.length; m++) {
+        if (hyper[m].name === this.xTitle) {
+          xvalue = hyper[m].data;
         }
-          });
       }
-        if (options.length > 0) {
-          object.label = item.label;
-          object.options = options;
-          list.push(object);
+      for (let k = 0; k < this.scatterData.targets.length; k++) {
+        if (this.scatterData.targets[k].name === this.yTitle) {
+          yvalue = this.scatterData.targets[k].data;
         }
-      });
-      return list;
-    },
-
-    getStoreList() {
-      this.summaryDirList = this.$store.state.summaryDirList;
-      if (this.summaryDirList) {
-        this.tableFilter.summary_dir = {
-          in: this.summaryDirList,
-        };
-      } else {
-        this.tableFilter.summary_dir = undefined;
       }
-    },
-    setInitListValue() {
-      this.keysOfStringValue = [
-        'summary_dir',
-        'network',
-        'optimizer',
-        'loss_function',
-        'train_dataset_path',
-        'test_dataset_path',
-        'dataset_mark',
-      ]; // All keys whose values are character strings
-      this.keysOfIntValue = [
-        'train_dataset_count',
-        'test_dataset_count',
-        'epoch',
-        'batch_size',
-        'device_num',
-      ]; // All keys whose values are int
-      this.keysOfMixed = [];
+      const arrayTemp = [];
+      for (let i = 0; i < xvalue.length; i++) {
+        if ((xvalue[i] || xvalue[i] === 0) && (yvalue[i] || yvalue[i] === 0)) {
+          arrayTemp.push([xvalue[i], yvalue[i]]);
+          const obj = {train_id: this.scatterData.metadata['train_id'][i]};
+          obj[this.xTitle] = xvalue[i];
+          obj[this.yTitle] = yvalue[i];
+          this.tooltipsData.push(obj);
+        }
+      }
+      this.scatterChartData = arrayTemp;
     },
 
+    /** ***********right column*********** **/
     /**
      * Initialization
      */
@@ -924,64 +1196,7 @@ export default {
       this.hidenDirChecked = this.$store.state.hidenDirChecked || [];
       this.queryLineagesData(true);
     },
-    /**
-     * Column initialization
-     */
-    initColumm() {
-      this.metricList = [];
-      this.userDefinedList = [];
-      // hyper list
-      this.hyperList = [];
-      this.summaryList = [];
-      this.table.mandatoryColumn = Object.keys(this.table.columnOptions).filter(
-          (i) => {
-            return this.table.columnOptions[i].required;
-          },
-      );
-      this.table.optionalColumn = Object.keys(this.table.columnOptions).filter(
-          (i) => {
-            return !this.table.columnOptions[i].required;
-          },
-      );
-      const columnList = Object.keys(this.table.columnOptions).filter((i) => {
-        return (
-          !this.table.optionsNotInTable.includes(i) &&
-          this.table.columnOptions[i].selected
-        );
-      });
-      const metricArray = [];
-      const userDefinedArray = [];
-      const columnArray = [];
-      const hyperArray = [];
-      columnList.forEach((item) => {
-        if (item.indexOf('metric/') === 0) {
-          metricArray.push(item);
-        } else if (item.indexOf('user_defined/') === 0) {
-          userDefinedArray.push(item);
-        } else if (
-          item === this.labelValue.epoch ||
-          item === this.labelValue.batch_size ||
-          item === this.labelValue.learning_rate
-        ) {
-          hyperArray.push(item);
-        } else {
-          columnArray.push(item);
-        }
-      });
-      this.showTable = true;
-      this.table.otherColumn = columnArray;
-      this.metricList = metricArray;
-      this.userDefinedList = userDefinedArray;
-      // hyper list
-      this.hyperList = hyperArray;
 
-      this.table.selectedColumn = this.table.optionalColumn;
-      this.table.selectAll = true;
-      this.showTable = true;
-      this.$nextTick(() => {
-        this.$refs.table.doLayout();
-      });
-    },
     /**
      * Querying All Model Version Information
      * @param {Boolean} allData Indicates whether to query all data
@@ -1011,6 +1226,8 @@ export default {
       } else {
         params.body = Object.assign(params.body, this.tableFilter);
       }
+      // 1.调取左边栏数据接口请求
+      this.initLeftColumnData();
       RequestService.queryLineagesData(params)
           .then(
               (res) => {
@@ -1273,7 +1490,6 @@ export default {
             this.noData = true;
           });
     },
-
     /**
      * Selected data in the table
      * @param {Array} data
@@ -1325,317 +1541,162 @@ export default {
       });
       return modelLineageList;
     },
-
-    /**
-     * Selected data in the table
-     * @param {Array} list Selected data in the table
-     */
-    selectionChange(list = []) {
-      if (this.hideRecord) {
-        return;
-      }
-      this.echart.showData = list.length ? list : this.echart.brushData;
-      this.$nextTick(() => {
-        this.initChart();
-      });
-      this.checkedSummary = list;
-      const summaryDirFilter = [];
-      this.echart.showData.forEach((i) => {
-        summaryDirFilter.push(i.summary_dir);
-      });
-      this.tableFilter.summary_dir = {
-        in: summaryDirFilter,
-      };
+    setInitListValue() {
+      this.keysOfStringValue = [
+        'summary_dir',
+        'network',
+        'optimizer',
+        'loss_function',
+        'train_dataset_path',
+        'test_dataset_path',
+        'dataset_mark',
+      ]; // All keys whose values are character strings
+      this.keysOfIntValue = [
+        'train_dataset_count',
+        'test_dataset_count',
+        'epoch',
+        'batch_size',
+        'device_num',
+      ]; // All keys whose values are int
+      this.keysOfMixed = [];
     },
-
     /**
-     * Selected data in the table
+     * Column initialization
      */
-    selectValueChange() {
-      const list = [];
-      this.basearr.forEach((item) => {
-        item.options.forEach((option) => {
-          list.push(option.label);
-        });
+    initColumm() {
+      this.metricList = [];
+      this.userDefinedList = [];
+      // hyper list
+      this.hyperList = [];
+      this.summaryList = [];
+      this.table.mandatoryColumn = Object.keys(this.table.columnOptions).filter(
+          (i) => {
+            return this.table.columnOptions[i].required;
+          },
+      );
+      this.table.optionalColumn = Object.keys(this.table.columnOptions).filter(
+          (i) => {
+            return !this.table.columnOptions[i].required;
+          },
+      );
+      const columnList = Object.keys(this.table.columnOptions).filter((i) => {
+        return (
+          !this.table.optionsNotInTable.includes(i) &&
+          this.table.columnOptions[i].selected
+        );
       });
-      if (list.length > this.selectArrayValue.length) {
-        this.selectCheckAll = false;
+      const metricArray = [];
+      const userDefinedArray = [];
+      const columnArray = [];
+      const hyperArray = [];
+      columnList.forEach((item) => {
+        if (item.indexOf('metric/') === 0) {
+          metricArray.push(item);
+        } else if (item.indexOf('user_defined/') === 0) {
+          userDefinedArray.push(item);
+        } else if (
+          item === this.labelValue.epoch ||
+          item === this.labelValue.batch_size ||
+          item === this.labelValue.learning_rate
+        ) {
+          hyperArray.push(item);
         } else {
-        this.selectCheckAll = true;
-      }
-      let allList = [];
-      const listA = [this.$t('modelTraceback.summaryPath')];
-      allList = this.selectArrayValue.concat(listA);
-      Object.keys(this.table.columnOptions).filter((i) => {
-        this.table.columnOptions[i].selected = false;
-      });
-      allList.forEach((item) => {
-        Object.keys(this.table.columnOptions).filter((i) => {
-          const labelValue = this.table.columnOptions[i].label;
-          if (labelValue === item) {
-            this.table.columnOptions[i].selected = true;
+          columnArray.push(item);
         }
       });
-      });
+      this.showTable = true;
+      this.table.otherColumn = columnArray;
+      this.metricList = metricArray;
+      this.userDefinedList = userDefinedArray;
+      // hyper list
+      this.hyperList = hyperArray;
+
+      this.table.selectedColumn = this.table.optionalColumn;
+      this.table.selectAll = true;
+      this.showTable = true;
       this.$nextTick(() => {
-        this.initChart();
+        this.$refs.table.doLayout();
       });
-      this.initColumm();
     },
 
     /**
-     * Hidden records
+     * Initializing the Eechart
      */
-    hiddenRecords() {
-      this.hideRecord = true;
-      if (this.checkedSummary.length) {
-        this.checkedSummary.forEach((i) => {
-          this.hidenDirChecked.push(i.summary_dir);
+    initChart() {
+      const chartAxis = Object.keys(this.table.columnOptions).filter((i) => {
+        return (
+          this.table.columnOptions[i].selected &&
+          !this.table.optionsNotInEchart.includes(i)
+        );
       });
-      }
-      this.checkedSummary = [];
-      this.summaryDirList = this.$store.state.summaryDirList;
-      this.tableFilter.summary_dir = {
-        in: this.summaryDirList,
+      const data = [];
+      this.echart.showData.forEach((i, index) => {
+        let item = {};
+        item = {
+          lineStyle: {
+            normal: {
+              color: CommonProperty.commonColorArr[index % 10],
+            },
+          },
+          value: [],
         };
-      this.$store.commit('setHidenDirChecked', this.hidenDirChecked);
-      if (this.hidenDirChecked.length) {
-        const tempEchartData = this.echart.brushData;
-        this.hidenDirChecked.forEach((dir) => {
-          tempEchartData.forEach((item, index) => {
-            if (item.summary_dir === dir) {
-              tempEchartData.splice(index, 1);
+
+        chartAxis.forEach((key) => {
+          if (
+            (i[key] || i[key] === 0) &&
+            this.keysOfMixed &&
+            this.keysOfMixed.length &&
+            this.keysOfMixed.includes(key)
+          ) {
+            item.value.push(i[key].toString());
+          } else {
+            item.value.push(i[key]);
           }
         });
+        data.push(item);
       });
-        const tableTemp = this.table.data;
-        this.hidenDirChecked.forEach((dir) => {
-          tableTemp.forEach((item, index) => {
-            if (item.summary_dir === dir) {
-              tableTemp.splice(index, 1);
+
+      const parallelAxis = [];
+      chartAxis.forEach((key, index) => {
+        const obj = {dim: index, scale: true, id: key};
+        obj.name = this.table.columnOptions[key].label;
+        if (this.keysOfStringValue.includes(key)) {
+          const values = {};
+          this.echart.showData.forEach((i) => {
+            if (i[key] || i[key] === 0) {
+              values[i[key].toString()] = i[key].toString();
             }
           });
-        });
-        this.table.data = tableTemp;
-        this.showNumber = tableTemp.length;
-        this.echart.showData = tempEchartData;
-        // Restore the style of the table selection box.
-        this.$refs.table.clearSelection();
-        if (this.echart.showData.length > 0) {
-          this.$nextTick(() => {
-            this.initChart();
-          });
+          obj.type = this.valueType.category;
+          obj.data = Object.keys(values);
+          if (key === this.valueType.dataset_mark) {
+            obj.axisLabel = {
+              show: false,
+            };
           } else {
-          this.showEchartPic = false;
+            obj.axisLabel = {
+              formatter: function(val) {
+                const strs = val.split('');
+                let str = '';
+                if (val.length > 100) {
+                  return val.substring(0, 12) + '...';
+                } else {
+                  if (chartAxis.length < 10) {
+                    for (let i = 0, s = ''; (s = strs[i++]); ) {
+                      str += s;
+                      if (!(i % 16)) {
+                        str += '\n';
                       }
                     }
-      this.hideRecord = false;
-    },
-    /**
-     * Unhide
-     */
-    unhideRecords() {
-      if (this.unhideRecordsTimer) {
-        clearTimeout(this.unhideRecordsTimer);
-        this.unhideRecordsTimer = null;
+                  } else {
+                    for (let i = 0, s = ''; (s = strs[i++]); ) {
+                      str += s;
+                      if (!(i % 12)) {
+                        str += '\n';
                       }
-      this.unhideRecordsTimer = setTimeout(() => {
-        this.showEchartPic = true;
-        this.$refs.table.clearSelection();
-        this.$store.commit('setHidenDirChecked', []);
-        if (this.hidenDirChecked.length) {
-          this.checkedSummary = [];
-          this.hidenDirChecked = [];
                     }
-        const params = {
-          body: {},
-        };
-        const tempParam = {
-          sorted_name: this.sortInfo.sorted_name,
-          sorted_type: this.sortInfo.sorted_type,
-        };
-        this.summaryDirList = this.$store.state.summaryDirList;
-        this.tableFilter.summary_dir = {
-          in: this.summaryDirList,
-        };
-        params.body = Object.assign(
-            params.body,
-            this.chartFilter,
-            tempParam,
-            this.tableFilter,
-        );
-        RequestService.queryLineagesData(params).then(
-            (res) => {
-              if (res && res.data && res.data.object) {
-                this.errorData = false;
-                const list = this.setDataOfModel(res.data.object);
-                this.echart.allData = list;
-                this.echart.brushData = list;
-                this.echart.showData = this.echart.brushData;
-                this.$nextTick(() => {
-                  this.resizeChart();
-                  this.initChart();
-                });
-                const showList = list.slice(
-                    (this.pagination.currentPage - 1) * this.pagination.pageSize,
-                    this.pagination.currentPage * this.pagination.pageSize,
-                );
-                this.table.data = showList;
-                this.recordsNumber = this.table.data.length;
-                this.showNumber = this.table.data.length;
-                this.pagination.total = res.data.count || 0;
-              } else {
-                this.errorData = true;
-              }
-            },
-            (error) => {
-              this.errorData = true;
-            },
-        );
-      }, this.delayTime);
-    },
-
-    /**
-     * Sort data in the table
-     * @param {Object} column current column
-     */
-    sortChange(column) {
-      if (this.sortChangeTimer) {
-        clearTimeout(this.sortChangeTimer);
-        this.sortChangeTimer = null;
-      }
-      this.sortChangeTimer = setTimeout(() => {
-        this.sortInfo.sorted_name = column.prop;
-        this.sortInfo.sorted_type = column.order;
-        this.recordsNumber = 0;
-        this.showNumber = 0;
-        this.getStoreList();
-        const tempParam = {
-          limit: this.pagination.pageSize,
-          offset: 0,
-          sorted_name: this.sortInfo.sorted_name,
-          sorted_type: this.sortInfo.sorted_type,
-        };
-        const params = {};
-        params.body = Object.assign(
-            {},
-            tempParam,
-            this.tableFilter,
-            this.chartFilter || {},
-        );
-        RequestService.queryLineagesData(params)
-            .then(
-                (res) => {
-                  if (res && res.data && res.data.object) {
-                    this.errorData = false;
-                    const list = this.setDataOfModel(res.data.object);
-                    const tempList = list.slice(0, this.pagination.pageSize);
-                    this.recordsNumber = tempList.length;
-                    if (this.hidenDirChecked.length) {
-                      this.hidenDirChecked.forEach((dir) => {
-                        tempList.forEach((item, index) => {
-                          if (item.summary_dir === dir) {
-                            tempList.splice(index, 1);
-                          }
-                        });
-                      });
-                    }
-                    this.showNumber = tempList.length;
-                    this.table.data = tempList;
-                    this.pagination.total = res.data.count || 0;
-                    this.pagination.currentPage = 1;
-                  } else {
-                    this.errorData = true;
-                  }
-                },
-                (error) => {
-                  this.errorData = true;
-                },
-            )
-            .catch(() => {
-              this.errorData = true;
-            });
-      }, this.delayTime);
-    },
-
-    /**
-     * Initializing the Eechart
-     */
-    initChart() {
-      const chartAxis = Object.keys(this.table.columnOptions).filter((i) => {
-        return (
-          this.table.columnOptions[i].selected &&
-          !this.table.optionsNotInEchart.includes(i)
-        );
-      });
-      const data = [];
-      this.echart.showData.forEach((i, index) => {
-        let item = {};
-        item = {
-          lineStyle: {
-            normal: {
-              color: CommonProperty.commonColorArr[index % 10],
-            },
-          },
-          value: [],
-        };
-
-        chartAxis.forEach((key) => {
-          if (
-            (i[key] || i[key] === 0) &&
-            this.keysOfMixed &&
-            this.keysOfMixed.length &&
-            this.keysOfMixed.includes(key)
-          ) {
-            item.value.push(i[key].toString());
-          } else {
-            item.value.push(i[key]);
-          }
-        });
-        data.push(item);
-      });
-
-      const parallelAxis = [];
-      chartAxis.forEach((key, index) => {
-        const obj = {dim: index, scale: true, id: key};
-        obj.name = this.table.columnOptions[key].label;
-        if (this.keysOfStringValue.includes(key)) {
-          const values = {};
-          this.echart.showData.forEach((i) => {
-            if (i[key] || i[key] === 0) {
-              values[i[key].toString()] = i[key].toString();
-            }
-          });
-          obj.type = this.valueType.category;
-          obj.data = Object.keys(values);
-          if (key === this.valueType.dataset_mark) {
-            obj.axisLabel = {
-              show: false,
-            };
-          } else {
-            obj.axisLabel = {
-              formatter: function(val) {
-                const strs = val.split('');
-                let str = '';
-                if (val.length > 100) {
-                  return val.substring(0, 12) + '...';
-                } else {
-                  if (chartAxis.length < 10) {
-                    for (let i = 0, s = ''; (s = strs[i++]); ) {
-                      str += s;
-                      if (!(i % 16)) {
-                        str += '\n';
-                      }
-                    }
-                  } else {
-                    for (let i = 0, s = ''; (s = strs[i++]); ) {
-                      str += s;
-                      if (!(i % 12)) {
-                        str += '\n';
-                      }
-                    }
-                  }
-                  return str;
+                  }
+                  return str;
                 }
               },
             };
@@ -1713,6 +1774,10 @@ export default {
       window.addEventListener('resize', this.resizeChart, false);
       this.chartEventsListen(parallelAxis);
     },
+    /**
+     * Model traceability parallel coordinate system echart frame selection operation monitoring
+     * @param {Object} parallelAxis
+     */
     chartEventsListen(parallelAxis) {
       this.echart.chart.on('axisareaselected', (params) => {
         const key = params.parallelAxisId;
@@ -1786,6 +1851,8 @@ export default {
               this.tableFilter,
               this.sortInfo,
           );
+          // 调取target接口，传入框选参数
+          this.initLeftColumnData();
           RequestService.queryLineagesData(filterParams)
               .then(
                   (res) => {
@@ -1817,35 +1884,655 @@ export default {
                         const list = this.setDataOfModel(res.data.object);
                         if (this.hidenDirChecked.length) {
                           this.hidenDirChecked.forEach((dir) => {
-                            list.forEach((item, index) => {
+                            list.forEach((item, index) => {
+                              if (item.summary_dir === dir) {
+                                list.splice(index, 1);
+                              }
+                            });
+                          });
+                        }
+                        if (!list.length) {
+                          this.noData = true;
+                          this.showEchartPic = false;
+                          this.summaryDirList = [];
+                          this.checkedSummary = [];
+                          this.$store.commit('setSummaryDirList', []);
+                          return;
+                        }
+                        const summaryDirList = list.map((i) => i.summary_dir);
+                        this.$store.commit('setSummaryDirList', summaryDirList);
+                        this.echart.showData = this.echart.brushData = list;
+                        this.$nextTick(() => {
+                          this.initChart();
+                        });
+                        this.getTableList(tableParams);
+                      } else {
+                        this.summaryDirList = [];
+                        this.$store.commit('setSummaryDirList', []);
+                        this.checkedSummary = [];
+                        this.noData = true;
+                        this.showEchartPic = false;
+                      }
+                    } else {
+                      this.errorData = true;
+                    }
+                  },
+                  (error) => {
+                    this.errorData = true;
+                  },
+              )
+              .catch(() => {
+                this.errorData = true;
+              });
+        }
+      });
+    },
+    /**
+     * Get table data
+     * @param {Object} tableParams
+     */
+    getTableList(tableParams) {
+      RequestService.queryLineagesData(tableParams)
+          .then(
+              (res) => {
+                if (res && res.data && res.data.object) {
+                  this.errorData = false;
+                  if (res.data.object.length) {
+                    const list = this.setDataOfModel(res.data.object);
+                    if (this.hidenDirChecked.length) {
+                      this.hidenDirChecked.forEach((dir) => {
+                        list.forEach((item, index) => {
+                          if (item.summary_dir === dir) {
+                            list.splice(index, 1);
+                          }
+                        });
+                      });
+                    }
+                    const tempList = list.slice(0, this.pagination.pageSize);
+                    this.recordsNumber = tempList.length;
+                    this.showNumber = tempList.length;
+                    this.table.data = tempList;
+                    this.pagination.currentPage = 1;
+                    this.pagination.total = this.echart.brushData.length;
+                    this.$refs.table.clearSelection();
+                  }
+                } else {
+                  this.errorData = true;
+                }
+              },
+              (error) => {
+                this.errorData = true;
+              },
+          )
+          .catch(() => {
+            this.errorData = true;
+          });
+    },
+    /**
+     * Resetting the Eechart
+     */
+    showAllDatafun() {
+      this.summaryDirList = undefined;
+      this.$store.commit('setSummaryDirList', undefined);
+      this.$store.commit('setSelectedBarList', []);
+      this.noData = false;
+      this.showTable = false;
+      this.selectCheckAll = true;
+      this.chartFilter = {};
+      this.tableFilter.summary_dir = undefined;
+      this.sortInfo = {};
+      this.pagination.currentPage = 1;
+      this.echart.allData = [];
+      if (this.echart.chart) {
+        this.echart.chart.clear();
+      }
+      this.init();
+      this.$refs.table.clearSelection();
+    },
+    // 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.iconValue = row.tag >= 0 ? row.tag : 0;
+      this.tagScope = scope;
+      if (this.tagDialogShow) {
+        this.tagDialogShow = false;
+        this.removeIconBorder();
+        return;
+      }
+      this.addIconBorder(row);
+      this.tagDialogShow = true;
+      const dialogHeight = 130;
+      const ev = window.event || event;
+      document.getElementById('tag-dialog').style.top =
+        ev.clientY - dialogHeight + '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);
+    },
+    /**
+     * 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) => {
+        item.options.forEach((option) => {
+          this.selectArrayValue.push(option.label);
+        });
+      });
+      this.selectCheckAll = !this.selectCheckAll;
+      let allList = [];
+      const listA = [this.$t('modelTraceback.summaryPath')];
+      allList = this.selectArrayValue.concat(listA);
+      //  Set selected of the column data in the table to false;
+      Object.keys(this.table.columnOptions).filter((i) => {
+        this.table.columnOptions[i].selected = false;
+      });
+      allList.forEach((item) => {
+        Object.keys(this.table.columnOptions).filter((i) => {
+          const labelValue = this.table.columnOptions[i].label;
+          if (labelValue === item) {
+            this.table.columnOptions[i].selected = true;
+          }
+        });
+      });
+      this.initColumm();
+      this.$nextTick(() => {
+        this.initChart();
+        this.$refs.table.doLayout();
+      });
+    },
+    /**
+     * deselect all
+     */
+    deselectAll() {
+      this.selectArrayValue = [];
+      this.checkOptions.forEach((item) => {
+        item.options.forEach((option) => {
+          if (option.disabled) {
+            this.selectArrayValue.push(option.label);
+          }
+        });
+      });
+      this.selectCheckAll = false;
+      let allList = [];
+      const listA = [this.$t('modelTraceback.summaryPath')];
+      allList = this.selectArrayValue.concat(listA);
+      // Set selected to false for these columns in the table.
+      Object.keys(this.table.columnOptions).filter((i) => {
+        this.table.columnOptions[i].selected = false;
+      });
+      allList.forEach((item) => {
+        Object.keys(this.table.columnOptions).filter((i) => {
+          const labelValue = this.table.columnOptions[i].label;
+          if (labelValue === item) {
+            this.table.columnOptions[i].selected = true;
+          }
+        });
+      });
+      this.initChart();
+      this.initColumm();
+    },
+    /**
+     * Edit remarks
+     * @param {Object} row
+     */
+    editRemarks(row) {
+      row.editShow = false;
+      row.isError = false;
+      this.beforeEditValue = row.remark;
+    },
+
+    /**
+     * Save remarks
+     * @param {Object} row
+     */
+    saveRemarksValue(row) {
+      const tagValidation = new RegExp('^[a-zA-Z0-9\u4e00-\u9fa5_.-]{1,128}$');
+      const result = row.remark.length ? tagValidation.test(row.remark) : true;
+      if (result) {
+        row.isError = false;
+        row.editShow = true;
+        const params = {
+          train_id: row.summary_dir,
+          body: {
+            remark: row.remark,
+          },
+        };
+        this.putChangeToLineagesData(params);
+      } else {
+        row.isError = true;
+      }
+    },
+
+    /**
+     * Cancel save editing
+     * @param {Object} row
+     */
+    cancelRemarksValue(row) {
+      row.editShow = true;
+      row.remark = this.beforeEditValue;
+      row.isError = false;
+    },
+
+    /**
+     *After the remark or tag is modified, invoke the interface and save the modification.
+     * @param {Object} params
+     */
+    putChangeToLineagesData(params) {
+      RequestService.putLineagesData(params)
+          .then(
+              (res) => {
+                if (res) {
+                  this.$message.success(this.$t('modelTraceback.changeSuccess'));
+                }
+              },
+              (error) => {},
+          )
+          .catch(() => {});
+    },
+    /**
+     * The method for the drop-down box to get the focus operation.
+     *  @param {String} val
+     */
+    selectinputFocus(val) {
+      if (val === 'left') {
+        // Parameter importance drop-down box
+        this.barKeyWord = '';
+        this.barNameList = this.baseSelectOptions;
+      } else {
+        // Model traceability drop-down box on the right
+        this.keyWord = '';
+        this.checkOptions = this.basearr;
+      }
+    },
+    /**
+     * Input search filtering in the select module.
+     *  @param {String} val
+     */
+    myfilter(val) {
+      if (val === 'left') {
+        // Parameter importance drop-down box
+        const queryString = this.barKeyWord;
+        const restaurants = this.baseSelectOptions;
+        const results = queryString
+          ? this.createFilter(queryString, restaurants)
+          : restaurants;
+        this.barNameList = results;
+      } else {
+        // Model traceability drop-down box on the right
+        const queryString = this.keyWord;
+        const restaurants = this.basearr;
+        const results = queryString
+          ? this.createFilter(queryString, restaurants)
+          : restaurants;
+        this.checkOptions = results;
+      }
+    },
+
+    /**
+     *Input search filtering in the select module.
+     * @param {String} queryString
+     * @param {Array} restaurants
+     * @return {Array}
+     */
+    createFilter(queryString, restaurants) {
+      const list = [];
+      restaurants.forEach((item) => {
+        const object = {};
+        const options = [];
+        if (item.options) {
+          item.options.forEach((item) => {
+            if (
+              item.label.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
+            ) {
+              const tempObj = {};
+              tempObj.label = item.label;
+              tempObj.value = item.value;
+              tempObj.disabled = item.disabled;
+              options.push(tempObj);
+            }
+          });
+        }
+        if (options.length > 0) {
+          object.label = item.label;
+          object.options = options;
+          list.push(object);
+        }
+      });
+      return list;
+    },
+
+    getStoreList() {
+      this.summaryDirList = this.$store.state.summaryDirList;
+      if (this.summaryDirList) {
+        this.tableFilter.summary_dir = {
+          in: this.summaryDirList,
+        };
+      } else {
+        this.tableFilter.summary_dir = undefined;
+      }
+    },
+
+    /**
+     * Selected data in the table
+     * @param {Array} list Selected data in the table
+     */
+    selectionChange(list = []) {
+      if (this.hideRecord) {
+        return;
+      }
+      this.echart.showData = list.length ? list : this.echart.brushData;
+      this.$nextTick(() => {
+        this.initChart();
+      });
+      this.checkedSummary = list;
+      const summaryDirFilter = [];
+      this.echart.showData.forEach((i) => {
+        summaryDirFilter.push(i.summary_dir);
+      });
+      this.tableFilter.summary_dir = {
+        in: summaryDirFilter,
+      };
+    },
+
+    /**
+     * Selected data in the table
+     */
+    selectValueChange() {
+      const list = [];
+      this.basearr.forEach((item) => {
+        item.options.forEach((option) => {
+          list.push(option.label);
+        });
+      });
+      if (list.length > this.selectArrayValue.length) {
+        this.selectCheckAll = false;
+      } else {
+        this.selectCheckAll = true;
+      }
+      let allList = [];
+      const listA = [this.$t('modelTraceback.summaryPath')];
+      allList = this.selectArrayValue.concat(listA);
+      Object.keys(this.table.columnOptions).filter((i) => {
+        this.table.columnOptions[i].selected = false;
+      });
+      allList.forEach((item) => {
+        Object.keys(this.table.columnOptions).filter((i) => {
+          const labelValue = this.table.columnOptions[i].label;
+          if (labelValue === item) {
+            this.table.columnOptions[i].selected = true;
+          }
+        });
+      });
+      this.$nextTick(() => {
+        this.initChart();
+      });
+      this.initColumm();
+    },
+
+    selectedSetBarData() {
+      // Set the y-axis coordinate
+      let barHyper = [];
+      for (let i = 0; i < this.targetData.length; i++) {
+        if (this.targetData[i].name === this.yTitle) {
+          barHyper = this.targetData[i].hyper_parameters;
+        }
+      }
+      barHyper.sort(this.sortBy('importance'));
+      this.barYAxisData = [];
+      this.barSeriesData = [];
+      for (let j = 0; j < barHyper.length; j++) {
+        const name = barHyper[j].name;
+        let importanceValue = barHyper[j].importance;
+        if (importanceValue < 0.0001 && importanceValue > 0) {
+          importanceValue = importanceValue.toExponential(4);
+        } else {
+          importanceValue =
+            Math.round(importanceValue * Math.pow(10, 4)) / Math.pow(10, 4);
+        }
+        if (this.selectedBarArray.includes(name)) {
+          this.barYAxisData.push(name);
+          this.barSeriesData.push(importanceValue);
+        }
+      }
+      this.selectedAllBar =
+        barHyper.length > this.barYAxisData.length ? false : true;
+      this.$nextTick(() => {
+        this.setChartOfBar();
+        this.setChartOfScatters();
+      });
+    },
+
+    /**
+     * Hidden records
+     */
+    hiddenRecords() {
+      this.hideRecord = true;
+      if (this.checkedSummary.length) {
+        this.checkedSummary.forEach((i) => {
+          this.hidenDirChecked.push(i.summary_dir);
+        });
+      }
+      this.checkedSummary = [];
+      this.summaryDirList = this.$store.state.summaryDirList;
+      this.tableFilter.summary_dir = {
+        in: this.summaryDirList,
+      };
+      this.$store.commit('setHidenDirChecked', this.hidenDirChecked);
+      if (this.hidenDirChecked.length) {
+        const tempEchartData = this.echart.brushData;
+        this.hidenDirChecked.forEach((dir) => {
+          tempEchartData.forEach((item, index) => {
             if (item.summary_dir === dir) {
-                                list.splice(index, 1);
+              tempEchartData.splice(index, 1);
             }
           });
         });
+        const tableTemp = this.table.data;
+        this.hidenDirChecked.forEach((dir) => {
+          tableTemp.forEach((item, index) => {
+            if (item.summary_dir === dir) {
+              tableTemp.splice(index, 1);
             }
-                        if (!list.length) {
-                          this.noData = true;
-                          this.showEchartPic = false;
-                          this.summaryDirList = [];
-                          this.checkedSummary = [];
-                          this.$store.commit('setSummaryDirList', []);
-                          return;
-                        }
-                        const summaryDirList = list.map((i) => i.summary_dir);
-                        this.$store.commit('setSummaryDirList', summaryDirList);
-                        this.echart.showData = this.echart.brushData = list;
+          });
+        });
+        this.table.data = tableTemp;
+        this.showNumber = tableTemp.length;
+        this.echart.showData = tempEchartData;
+        // Restore the style of the table selection box.
+        this.$refs.table.clearSelection();
+        if (this.echart.showData.length > 0) {
           this.$nextTick(() => {
             this.initChart();
           });
-                        this.getTableList(tableParams);
         } else {
-                        this.summaryDirList = [];
-                        this.$store.commit('setSummaryDirList', []);
-                        this.checkedSummary = [];
-                        this.noData = true;
           this.showEchartPic = false;
         }
+      }
+      this.hideRecord = false;
+    },
+    /**
+     * Unhide
+     */
+    unhideRecords() {
+      if (this.unhideRecordsTimer) {
+        clearTimeout(this.unhideRecordsTimer);
+        this.unhideRecordsTimer = null;
+      }
+      this.unhideRecordsTimer = setTimeout(() => {
+        this.showEchartPic = true;
+        this.$refs.table.clearSelection();
+        this.$store.commit('setHidenDirChecked', []);
+        if (this.hidenDirChecked.length) {
+          this.checkedSummary = [];
+          this.hidenDirChecked = [];
+        }
+        const params = {
+          body: {},
+        };
+        const tempParam = {
+          sorted_name: this.sortInfo.sorted_name,
+          sorted_type: this.sortInfo.sorted_type,
+        };
+        this.summaryDirList = this.$store.state.summaryDirList;
+        this.tableFilter.summary_dir = {
+          in: this.summaryDirList,
+        };
+        params.body = Object.assign(
+            params.body,
+            this.chartFilter,
+            tempParam,
+            this.tableFilter,
+        );
+        RequestService.queryLineagesData(params).then(
+            (res) => {
+              if (res && res.data && res.data.object) {
+                this.errorData = false;
+                const list = this.setDataOfModel(res.data.object);
+                this.echart.allData = list;
+                this.echart.brushData = list;
+                this.echart.showData = this.echart.brushData;
+                this.$nextTick(() => {
+                  this.resizeChart();
+                  this.initChart();
+                });
+                const showList = list.slice(
+                    (this.pagination.currentPage - 1) * this.pagination.pageSize,
+                    this.pagination.currentPage * this.pagination.pageSize,
+                );
+                this.table.data = showList;
+                this.recordsNumber = this.table.data.length;
+                this.showNumber = this.table.data.length;
+                this.pagination.total = res.data.count || 0;
               } else {
                 this.errorData = true;
               }
@@ -1853,42 +2540,59 @@ export default {
             (error) => {
               this.errorData = true;
             },
-              )
-              .catch(() => {
-                this.errorData = true;
-              });
-        }
-      });
+        );
+      }, this.delayTime);
     },
+
     /**
-     * Get table data
-     * @param {Object} tableParams
+     * Sort data in the table
+     * @param {Object} column current column
      */
-    getTableList(tableParams) {
-      RequestService.queryLineagesData(tableParams)
+    sortChange(column) {
+      if (this.sortChangeTimer) {
+        clearTimeout(this.sortChangeTimer);
+        this.sortChangeTimer = null;
+      }
+      this.sortChangeTimer = setTimeout(() => {
+        this.sortInfo.sorted_name = column.prop;
+        this.sortInfo.sorted_type = column.order;
+        this.recordsNumber = 0;
+        this.showNumber = 0;
+        this.getStoreList();
+        const tempParam = {
+          limit: this.pagination.pageSize,
+          offset: 0,
+          sorted_name: this.sortInfo.sorted_name,
+          sorted_type: this.sortInfo.sorted_type,
+        };
+        const params = {};
+        params.body = Object.assign(
+            {},
+            tempParam,
+            this.tableFilter,
+            this.chartFilter || {},
+        );
+        RequestService.queryLineagesData(params)
             .then(
                 (res) => {
                   if (res && res.data && res.data.object) {
                     this.errorData = false;
-                  if (res.data.object.length) {
                     const list = this.setDataOfModel(res.data.object);
+                    const tempList = list.slice(0, this.pagination.pageSize);
+                    this.recordsNumber = tempList.length;
                     if (this.hidenDirChecked.length) {
                       this.hidenDirChecked.forEach((dir) => {
-                        list.forEach((item, index) => {
+                        tempList.forEach((item, index) => {
                           if (item.summary_dir === dir) {
-                            list.splice(index, 1);
+                            tempList.splice(index, 1);
                           }
                         });
                       });
                     }
-                    const tempList = list.slice(0, this.pagination.pageSize);
-                    this.recordsNumber = tempList.length;
                     this.showNumber = tempList.length;
                     this.table.data = tempList;
+                    this.pagination.total = res.data.count || 0;
                     this.pagination.currentPage = 1;
-                    this.pagination.total = this.echart.brushData.length;
-                    this.$refs.table.clearSelection();
-                  }
                   } else {
                     this.errorData = true;
                   }
@@ -1900,27 +2604,7 @@ export default {
             .catch(() => {
               this.errorData = true;
             });
-    },
-    /**
-     * Resetting the Eechart
-     */
-    resetChart() {
-      this.summaryDirList = undefined;
-      this.$store.commit('setSummaryDirList', undefined);
-      this.$store.commit('setSelectedBarList', []);
-      this.noData = false;
-      this.showTable = false;
-      this.selectCheckAll = true;
-      this.chartFilter = {};
-      this.tableFilter.summary_dir = undefined;
-      this.sortInfo = {};
-      this.pagination.currentPage = 1;
-      this.echart.allData = [];
-      if (this.echart.chart) {
-        this.echart.chart.clear();
-      }
-      this.init();
-      this.$refs.table.clearSelection();
+      }, this.delayTime);
     },
 
     /**
@@ -1935,6 +2619,14 @@ export default {
       });
       window.open(routeUrl.href, '_blank');
     },
+    /**
+     * Jump to DataTraceback
+     */
+    jumpToDataTraceback() {
+      this.$router.push({
+        path: '/data-traceback',
+      });
+    },
     /**
      * Keep the number with n decimal places.
      * @param {Number} num
@@ -2019,9 +2711,43 @@ export default {
     }
     document.removeEventListener('resize', this.blurFloat);
   },
+  components: {
+    Scatter,
+  },
 };
 </script>
 <style lang="scss">
+.cl-model-traceback {
+  height: 100%;
+  background-color: #fff;
+}
+.traceback-tab {
+  height: 51px;
+  line-height: 56px;
+  padding: 0 24px;
+  border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
+}
+.traceback-tab-item {
+  padding: 0 10px;
+  height: 48px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  line-height: 48px;
+  display: inline-block;
+  list-style: none;
+  font-size: 18px;
+  color: #303133;
+  position: relative;
+}
+.item-active {
+  color: #00a5a7;
+  font-weight: bold;
+  border-bottom: 3px solid rgba($color: #00a5a7, $alpha: 1);
+}
+.traceback-tab-item:hover {
+  color: #00a5a7;
+  cursor: pointer;
+}
 .label-text {
   line-height: 20px !important;
   padding-top: 20px;
@@ -2043,7 +2769,7 @@ export default {
   color: #fff;
 }
 .select-inner-input {
-  width: calc(100% - 140px);
+  width: calc(100% - 130px);
   margin: 2px 4px;
   display: inline-block;
 }
@@ -2087,9 +2813,9 @@ export default {
   background: none;
 }
 
-#cl-model-traceback {
+#model-traceback-con {
   display: flex;
-  height: 100%;
+  height: calc(100% - 51px);
   overflow-y: auto;
   position: relative;
   background: #fff;
@@ -2123,6 +2849,24 @@ export default {
       text-align: center;
     }
   }
+  .echart-data-list {
+    .dialog-scatter {
+      width: 100%;
+      height: 100%;
+    }
+    .el-dialog__title {
+      font-weight: bold;
+    }
+    .el-dialog__body {
+      height: 500px;
+      padding-top: 0px;
+      margin-bottom: 20px;
+      overflow: auto;
+      .details-data-title {
+        margin-bottom: 20px;
+      }
+    }
+  }
   .el-table th.gutter {
     display: table-cell !important;
   }
@@ -2180,7 +2924,7 @@ export default {
     text-align: center;
   }
   .btns-container {
-    padding: 14px 32px 4px;
+    padding: 6px 32px 4px;
   }
   .table-container .el-icon-edit {
     margin-left: 5px;
@@ -2224,12 +2968,154 @@ export default {
   .button-text {
     color: #606266 !important;
   }
+  // left module
+  .cl-model-left {
+    width: 400px;
+    background: #edf0f5;
+    overflow-y: auto;
+    margin: 6px 0px 10px 32px;
+    padding: 10px 20px;
+    .left-chart-container {
+      height: 100%;
+      min-height: 800px;
+    }
+    .left-title {
+      height: 30px;
+      display: flex;
+      .pie-select-style {
+        flex: 1;
+      }
+      .left-select {
+        width: 200px;
+        .el-select > .el-input {
+          width: 200px !important;
+        }
+      }
+    }
+    .title-style {
+      font-size: 18px;
+      flex: 1;
+      font-weight: bold;
+      margin-bottom: 4px;
+      margin-right: 80px;
+      .el-icon-refresh-right {
+        font-size: 20px;
+        vertical-align: middle;
+        cursor: pointer;
+      }
+    }
 
+    .pie-title {
+      margin-right: 110px;
+      height: 20px;
+      line-height: 20px;
+      font-weight: bold;
+    }
+    .title-container {
+      margin-bottom: 10px;
+      display: flex;
+      .tooltip-container {
+        line-height: 20px;
+        padding: 10px;
+      }
+    }
+    .pie-module-container {
+      padding: 10px 0 0px;
+      height: 280px;
+      #pie-chart {
+        width: 100%;
+        height: 240px;
+      }
+    }
+    .bar-module-container {
+      height: 270px;
+      border-bottom: 1px solid #b9bcc1;
+      border-top: 1px solid #b9bcc1;
+      padding: 10px 0;
+      .bar-select {
+        display: flex;
+        flex: 1.5;
+        .el-select {
+          width: 240px;
+        }
+      }
+      .bar-title-container {
+        display: flex;
+      }
+      .bar-title {
+        font-weight: bold;
+        flex: 1;
+        height: 32px;
+        line-height: 32px;
+      }
+      #bar-chart {
+        width: 100%;
+        height: 220px;
+      }
+    }
+    .scatter-container {
+      height: calc(100% - 30px - 270px - 270px);
+      padding-top: 10px;
+      .scatter-title-container {
+        display: flex;
+        font-weight: bold;
+        flex-direction: row;
+        width: 100%;
+        .right-view {
+          position: relative;
+          flex: 1;
+        }
+        .el-icon-info {
+          font-size: 16px;
+          margin-left: 5px;
+          color: #6c7280;
+        }
+        .view-big {
+          position: absolute;
+          right: 10px;
+          width: 12px;
+          height: 12px;
+          cursor: pointer;
+          background-image: url('../../assets/images/full-screen.png');
+        }
+      }
+    }
+    .left-scatters-container {
+      overflow: auto;
+      width: 100%;
+      height: calc(100% - 32px);
+    }
+    .collapse-btn {
+      position: absolute;
+      width: 31px;
+      height: 100px;
+      top: 50%;
+      left: 423px;
+      margin-top: -50px;
+      cursor: pointer;
+      line-height: 86px;
+      z-index: 1999;
+      text-align: center;
+      background-image: url('../../assets/images/collapse-left.svg');
+    }
+    .collapse-btn.collapse {
+      left: -10px;
+      background-image: url('../../assets/images/collapse-right.svg');
+    }
+  }
+  .cl-model-right.collapse {
+    width: 100% !important;
+  }
+  .cl-model-left.collapse {
+    width: 0;
+    padding: 0px;
+  }
   .cl-model-right {
     display: flex;
     flex-direction: column;
     width: 100%;
     flex: 1;
+    width: calc(100% - 400px);
     background-color: #fff;
     -webkit-box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5);
     box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5);
@@ -2240,7 +3126,7 @@ export default {
       max-width: 500px !important;
     }
     .top-area {
-      margin: 24px 32px 12px;
+      margin: 6px 32px;
       display: flex;
       justify-content: flex-end;
       .select-box {
@@ -2265,16 +3151,16 @@ export default {
       }
     }
     #echart {
-      height: 32%;
+      height: 33%;
       padding: 0 12px;
     }
     .echart-no-data {
-      height: 32%;
+      height: 33%;
       width: 100%;
     }
     .table-container {
       background-color: white;
-      height: calc(68% - 130px);
+      height: calc(67% - 88px);
       padding: 6px 32px;
       position: relative;
       .disabled-checked {