diff --git a/mindinsight/ui/src/assets/css/reset.scss b/mindinsight/ui/src/assets/css/reset.scss
index 3246f079d4dd186d37a470160ced9429792d0ff0..d6e166c03a32eb9b9c7d0e3caba41ec0bbd1ff9c 100644
--- a/mindinsight/ui/src/assets/css/reset.scss
+++ b/mindinsight/ui/src/assets/css/reset.scss
@@ -156,8 +156,8 @@ body {
  * Defines the width of the scroll bar and the width of the background, respectively corresponding to the dimensions of the horizontal and vertical scroll bars.
  */
 ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: 10px;
+  height: 10px;
 }
 
 /*
diff --git a/mindinsight/ui/src/views/train-manage/data-traceback.vue b/mindinsight/ui/src/views/train-manage/data-traceback.vue
index 4b7239b1501e8327cb96dbfa62888f1afe80ecc3..6e3e5381ba9f690ddeded06bd5220dc5943621a5 100644
--- a/mindinsight/ui/src/views/train-manage/data-traceback.vue
+++ b/mindinsight/ui/src/views/train-manage/data-traceback.vue
@@ -28,37 +28,37 @@ limitations under the License.
           {{ $t('modelTraceback.showAllData') }}
         </el-button>
         <div v-show="totalSeries&&totalSeries.length&&(!summaryDirList||(summaryDirList&&summaryDirList.length))">
-        <div class="fixed-checkbox-group">
-          <el-checkbox v-for="item in fixedSeries"
-                       :key="item.id"
-                       :checked="item.checked"
-                       :disabled="true">
-            {{ item.name }}
-          </el-checkbox>
-          <br />
-        </div>
-        <div class="data-checkbox">
-          <!-- check box -->
-          <div class="check-box-div">
-            <el-checkbox v-model="checkAll"
-                         :indeterminate="isIndeterminate"
-                         class="select-all"
-                         @change="handleCheckAllChange">
-              {{ $t('scalar.selectAll') }}
+          <div class="fixed-checkbox-group">
+            <el-checkbox v-for="item in fixedSeries"
+                         :key="item.id"
+                         :checked="item.checked"
+                         :disabled="true">
+              {{ item.name }}
             </el-checkbox>
+            <br />
           </div>
-          <div class="checkbox-scroll">
-            <div class="checkbox-group-div">
-              <el-checkbox v-for="item in noFixedSeries"
-                           @change="handleCheckedSeriesChange()"
-                           v-model="item.checked"
-                           :key="item.id">
-                {{ item.name }}
+          <div class="data-checkbox">
+            <!-- check box -->
+            <div class="check-box-div">
+              <el-checkbox v-model="checkAll"
+                           :indeterminate="isIndeterminate"
+                           class="select-all"
+                           @change="handleCheckAllChange">
+                {{ $t('scalar.selectAll') }}
               </el-checkbox>
             </div>
+            <div class="checkbox-scroll">
+              <div class="checkbox-group-div">
+                <el-checkbox v-for="item in noFixedSeries"
+                             @change="handleCheckedSeriesChange()"
+                             v-model="item.checked"
+                             :key="item.id">
+                  {{ item.name }}
+                </el-checkbox>
+              </div>
+            </div>
           </div>
         </div>
-        </div>
       </div>
       <!-- echart drawing area -->
       <div id="data-echart"></div>
@@ -80,13 +80,16 @@ limitations under the License.
                            :key="key"
                            :prop="key"
                            :label="table.columnOptions[key].label"
-                           :sortable='sortArray.includes(table.columnOptions[key].label)?"custom":false'
+                           :sortable="sortArray.includes(table.columnOptions[key].label)?'custom':false"
+                           :fixed="table.columnOptions[key].label===text?true:false"
                            min-width="200"
                            show-overflow-tooltip>
-            <template slot="header" slot-scope="scope">
-              <div class="custom-label" :title="scope.column.label">
+            <template slot="header"
+                      slot-scope="scope">
+              <div class="custom-label"
+                   :title="scope.column.label">
                 {{scope.column.label}}
-                </div>
+              </div>
             </template>
             <template slot-scope="scope">
               <span class="icon-container"
@@ -125,15 +128,15 @@ limitations under the License.
           <img :src="require('@/assets/images/nodata.png')"
                alt="" />
           <p class="no-data-text"
-           v-show="!summaryDirList||(summaryDirList&&summaryDirList.length)&&!lineagedata.serData">
+             v-show="!summaryDirList||(summaryDirList&&summaryDirList.length)&&!lineagedata.serData">
             {{ $t('public.noData') }}
           </p>
-           <div v-show="echartNoData&&(lineagedata.serData&&!!lineagedata.serData.length)">
-              <p class="no-data-text">{{ $t('dataTraceback.noDataFound') }}</p>
+          <div v-show="echartNoData&&(lineagedata.serData&&!!lineagedata.serData.length)">
+            <p class="no-data-text">{{ $t('dataTraceback.noDataFound') }}</p>
           </div>
           <div v-show="summaryDirList&&!summaryDirList.length">
-             <p class="no-data-text">{{ $t('dataTraceback.noDataFound') }}</p>
-              <p class="no-data-text">{{ $t('dataTraceback.noDataTips') }}</p>
+            <p class="no-data-text">{{ $t('dataTraceback.noDataFound') }}</p>
+            <p class="no-data-text">{{ $t('dataTraceback.noDataTips') }}</p>
           </div>
         </div>
       </div>
@@ -315,6 +318,10 @@ export default {
       detailsDataTitle: '',
       detailsDataList: [],
       rowName: this.$t('dataTraceback.details'),
+      replaceStr: {
+        metric: 'metric/',
+        userDefined: 'user_defined/',
+      },
     };
   },
   computed: {},
@@ -328,23 +335,27 @@ export default {
      * init
      */
     init() {
-      this.customizedColumnOptions=this.$store.state.customizedColumnOptions||[];
-      this.table.columnOptions=Object.assign(this.table.columnOptions, this.customizedColumnOptions);
+      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={};
+      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.tableFilter.lineage_type = {in: ['dataset']};
       }
-      const params={};
+      const params = {};
       if (this.summaryDirList) {
-        this.tableFilter.summary_dir={in: this.summaryDirList};
+        this.tableFilter.summary_dir = {in: this.summaryDirList};
       } else {
-        this.tableFilter.summary_dir=undefined;
+        this.tableFilter.summary_dir = undefined;
       }
-      params.body=Object.assign({}, this.tableFilter);
+      params.body = Object.assign({}, this.tableFilter);
       this.queryLineagesData(params);
     },
 
@@ -353,29 +364,24 @@ export default {
      */
     initChart() {
       const parallelAxis = [];
-      const selectedBarList=this.$store.state.selectedBarList;
+      const selectedBarList = this.$store.state.selectedBarList;
       const data = [];
-      const arrayTemp=[];
-      if (selectedBarList&&selectedBarList.length) {
-        selectedBarList.forEach((item)=>{
-          const value=this.customizedTypeObject[item];
-          if (value&&value.type=='float') {
-            arrayTemp.push({
-              name: item,
-              id: item,
-              type: 'float',
-              checked: true,
-            });
-          } else {
-            arrayTemp.push({
-              name: this.table.columnOptions[item].label,
-              id: item,
-              checked: true,
-            });
+      const arrayTemp = [];
+      if (selectedBarList && selectedBarList.length) {
+        selectedBarList.forEach((item) => {
+          const value = this.customizedTypeObject[item];
+          const obj = {
+            name: this.table.columnOptions[item].label,
+            id: item,
+            checked: true,
+          };
+          if (value && value.type == 'float') {
+            obj.type = 'float';
           }
+          arrayTemp.push(obj);
         });
       }
-      const totalBarArray=arrayTemp.concat(this.checkedSeries);
+      const totalBarArray = arrayTemp.concat(this.checkedSeries);
       this.echart.showData.forEach((val, i) => {
         const item = {
           lineStyle: {
@@ -398,13 +404,13 @@ export default {
           content.name === this.shuffleTitle
         ) {
           obj.scale = true;
-          obj.minInterval=1;
+          obj.minInterval = 1;
           this.setColorOfSelectedBar(selectedBarList, obj);
         } else if (
-          this.numberTypeIdList.includes(content.id)||
-          (content.type&&content.type=='float')
+          this.numberTypeIdList.includes(content.id) ||
+          (content.type && content.type == 'float')
         ) {
-          obj.scale=true;
+          obj.scale = true;
           this.setColorOfSelectedBar(selectedBarList, obj);
         } else {
           // String type
@@ -413,12 +419,11 @@ export default {
             show: false,
           };
           this.setColorOfSelectedBar(selectedBarList, obj);
-          if (content.id==='dataset_mark') {
-            obj.axisLabel={
+          if (content.id === 'dataset_mark') {
+            obj.axisLabel = {
               show: false,
             };
           }
-
           const values = {};
           this.echart.showData.forEach((i) => {
             if (i[content.id] || i[content.id] === 0) {
@@ -438,8 +443,8 @@ export default {
         },
         parallel: {
           top: 30,
-          left: 80,
-          right: 80,
+          left: 50,
+          right: 100,
           bottom: 12,
           parallelAxisDefault: {
             areaSelectStyle: {
@@ -454,7 +459,8 @@ export default {
         series: {
           type: 'parallel',
           lineStyle: {
-            width: 2,
+            width: 1,
+            opacity: 1,
           },
           data: data,
         },
@@ -490,17 +496,17 @@ export default {
             });
           }
           const tempList = this.echart.brushData;
-          const summaryList=[];
-          tempList.forEach((item)=>{
+          const summaryList = [];
+          tempList.forEach((item) => {
             summaryList.push(item.summary_dir);
           });
           // The summaryList value could not be saved in the destroy state.
-          this.dataCheckedSummary=[];
+          this.dataCheckedSummary = [];
           this.$store.commit('setSummaryDirList', summaryList);
           if (!tempList.length) {
-            this.summaryDirList=[];
-            this.lineagedata.serData=undefined;
-            document.querySelector('#data-echart').style.display='none';
+            this.summaryDirList = [];
+            this.lineagedata.serData = undefined;
+            document.querySelector('#data-echart').style.display = 'none';
           } else {
             this.echart.showData = this.echart.brushData;
             this.initChart();
@@ -516,21 +522,39 @@ export default {
     },
     /**
      * Set the color of the model tracing axis.
-    * @param {Array} selectedBarList
-    * @param {Object} obj
+     * @param {Array} selectedBarList
+     * @param {Object} obj
      */
     setColorOfSelectedBar(selectedBarList, obj) {
-      if (selectedBarList&&obj.dim<selectedBarList.length) {
-        obj.nameTextStyle={
+      if (selectedBarList && obj.dim < selectedBarList.length) {
+        obj.nameTextStyle = {
           color: '#00a5a7',
         };
-        obj.axisLabel={
+        obj.axisLabel = {
           show: true,
           textStyle: {
             color: '#00a5a7',
           },
+          formatter: function(val) {
+            if (typeof val !== 'string') {
+              return val;
+            }
+            const strs = val.split('');
+            let str = '';
+            if (val.length > 100) {
+              return val.substring(0, 12) + '...';
+            } else {
+              for (let i = 0, s = ''; (s = strs[i++]); ) {
+                str += s;
+                if (!(i % 12)) {
+                  str += '\n';
+                }
+              }
+              return str;
+            }
+          },
         };
-        obj.axisLine={
+        obj.axisLine = {
           show: true,
           lineStyle: {
             color: '#00a5a7',
@@ -538,7 +562,7 @@ export default {
         };
       } else {
         // Text color
-        obj.nameTextStyle={
+        obj.nameTextStyle = {
           color: 'black',
         };
       }
@@ -567,22 +591,20 @@ export default {
       if (isNaN(value) || !value) {
         return value;
       } else {
-        if (key === 'accuracy') {
-          return this.toFixedFun(value * 100, 2) + '%';
-        } else if (key === 'learning_rate') {
-          let temp = value.toPrecision(3);
+        if (key === 'learning_rate') {
+          let temp = value.toPrecision(4);
           let row = 0;
           while (temp < 1) {
             temp = temp * 10;
             row += 1;
           }
-          temp = this.toFixedFun(temp, 2);
+          temp = this.toFixedFun(temp, 4);
           return `${temp}${row ? `e-${row}` : ''}`;
         } else if (key === 'model_size') {
           return value + 'MB';
         } else {
           if (value < 1000) {
-            return Math.round(value * Math.pow(10, 2)) / Math.pow(10, 2);
+            return Math.round(value * Math.pow(10, 4)) / Math.pow(10, 4);
           } else {
             const reg = /(?=(\B)(\d{3})+$)/g;
             return (value + '').replace(reg, ',');
@@ -610,17 +632,15 @@ export default {
      * @param {Object} scope
      */
     showDialogData(val, scope) {
-      if (typeof val!=='string'||val=='{}') {
+      if (typeof val !== 'string' || val == '{}') {
         return;
       } else {
-        const isJson=this.isJSON(val);
+        const isJson = this.isJSON(val);
         if (!isJson) {
           return;
         }
       }
-      this.rowName = `${scope.column.property}${this.$t(
-          'dataTraceback.details',
-      )}`;
+      this.rowName = `${scope.column.label}${this.$t('dataTraceback.details')}`;
       this.detailsDialogVisible = true;
       this.detailsDataTitle = scope.row.summary_dir;
       this.detailsDataList = this.formateJsonString(val);
@@ -666,52 +686,69 @@ export default {
                 if (!res || !res.data) {
                   return;
                 }
-                this.customizedTypeObject=res.data.customized;
-                const key=Object.keys(this.customizedTypeObject);
-                if (key.length) {
-                  this.sortArray=this.sortArray.concat(key);
+                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) {
+                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)=>{
+                  const list = [];
+                  const metricKeys = {};
+                  tempList.forEach((item) => {
                     if (item.model_lineage) {
-                      const i=JSON.parse(JSON.stringify(item.model_lineage));
-                      i.model_size=parseFloat(((i.model_size||0)/1024/1024).toFixed(2));
-                      const keys=Object.keys(i.metric||{});
+                      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 (i.metric[key]||i.metric[key]===0) {
-                            const temp='metric/'+key;
-                            metricKeys[temp]=key;
-                            i[temp]=i.metric[key];
+                        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 i.metric;
+                        delete modelData.metric;
                       }
-                      const udkeys=Object.keys(i.user_defined||{});
+                      const udkeys = Object.keys(modelData.user_defined || {});
                       if (udkeys.length) {
-                        udkeys.forEach((key)=>{
-                          if (i.user_defined[key]||i.user_defined[key]===0) {
-                            const temp='user_defined/'+key;
-                            i[temp]=i.user_defined[key];
+                        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 i.user_defined;
+                        delete modelData.user_defined;
                       }
-                      list.push(i);
+                      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 = [];
+                  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);
                   }
@@ -723,7 +760,7 @@ export default {
                 this.lineagedata = this.formateOriginData(res.data);
                 this.totalSeries = this.lineagedata.fullNodeList;
                 if (!this.totalSeries.length) {
-                  this.echartNoData=true;
+                  this.echartNoData = true;
                 }
                 this.totalSeries.forEach((nodeItem) => {
                   if (this.createType[nodeItem.name]) {
@@ -752,14 +789,14 @@ export default {
                 this.setEchartValue();
                 this.initChart();
                 // Total number of pages in the table
-                this.pagination.total =res.data.count;
+                this.pagination.total = res.data.count;
                 // Data encapsulation of the table
                 this.setTableData();
                 if (this.selectedBarList) {
-                  const resultArray=this.hideDataMarkTableData();
-                  this.table.column=this.dirPathList.concat(
+                  const resultArray = this.hideDataMarkTableData();
+                  this.table.column = this.dirPathList.concat(
                       resultArray,
-                      this.checkedSeries.map((i)=> i.id),
+                      this.checkedSeries.map((i) => i.id),
                   );
                 } else {
                   this.table.column = this.dirPathList.concat(
@@ -806,15 +843,15 @@ export default {
      */
     echartShowAllData() {
       // The first page is displayed.
-      this.initOver=false;
-      this.echartNoData=false;
+      this.initOver = false;
+      this.echartNoData = false;
       this.pagination.currentPage = 1;
       this.$store.commit('setSummaryDirList', undefined);
       this.$store.commit('setSelectedBarList', []);
       if (this.parallelEchart) {
         this.parallelEchart.clear();
       }
-      document.querySelector('#data-echart').style.display='block';
+      document.querySelector('#data-echart').style.display = 'block';
       this.$refs.table.clearSelection();
       this.init();
       this.parallelEchart.resize();
@@ -832,10 +869,10 @@ export default {
       this.getCheckedSerList();
       // Value assignment in the table column
       if (this.selectedBarList) {
-        const resultArray=this.hideDataMarkTableData();
-        this.table.column=this.dirPathList.concat(
+        const resultArray = this.hideDataMarkTableData();
+        this.table.column = this.dirPathList.concat(
             resultArray,
-            this.checkedSeries.map((i)=>i.id),
+            this.checkedSeries.map((i) => i.id),
         );
       } else {
         this.table.column = this.dirPathList.concat(
@@ -852,9 +889,9 @@ export default {
      * @return {Array}
      */
     hideDataMarkTableData() {
-      const result=[];
-      this.selectedBarList.forEach((item)=>{
-        if ( item !== 'dataset_mark') {
+      const result = [];
+      this.selectedBarList.forEach((item) => {
+        if (item !== 'dataset_mark') {
           result.push(item);
         }
       });
@@ -868,12 +905,11 @@ export default {
       this.$forceUpdate();
       this.getCheckedSerList();
       // Value assignment in the table column
-      // Value assignment in the table column
       if (this.selectedBarList) {
-        const resultArray=this.hideDataMarkTableData();
-        this.table.column=this.dirPathList.concat(
+        const resultArray = this.hideDataMarkTableData();
+        this.table.column = this.dirPathList.concat(
             resultArray,
-            this.checkedSeries.map((i)=>i.id),
+            this.checkedSeries.map((i) => i.id),
         );
       } else {
         this.table.column = this.dirPathList.concat(
@@ -892,7 +928,7 @@ export default {
      */
     handleSelectionChange(val) {
       // summary_dir cannot be stored here.If it is not selected ,it cannot be stroed correctly.
-      this.dataCheckedSummary=val;
+      this.dataCheckedSummary = val;
       if (val.length) {
         this.echart.showData = val;
       } else {
@@ -903,10 +939,13 @@ 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);
+        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,
+          );
         }
       }
     },
@@ -916,12 +955,12 @@ export default {
      * @param {Object} data
      */
     tableSortChange(data) {
-      const params={};
-      const tempParam={
+      const params = {};
+      const tempParam = {
         sorted_name: data.prop,
         sorted_type: data.order,
       };
-      params.body=Object.assign({}, tempParam, this.tableFilter);
+      params.body = Object.assign({}, tempParam, this.tableFilter);
       this.queryLineagesData(params);
     },
 
@@ -1130,9 +1169,9 @@ export default {
    * Destroy the page
    */
   destroyed() {
-    if (this.dataCheckedSummary&&this.dataCheckedSummary.length) {
-      const summaryDirList=[];
-      this.dataCheckedSummary.forEach((item)=>{
+    if (this.dataCheckedSummary && this.dataCheckedSummary.length) {
+      const summaryDirList = [];
+      this.dataCheckedSummary.forEach((item) => {
         summaryDirList.push(item.summary_dir);
       });
       this.$store.commit('setSummaryDirList', summaryDirList);
@@ -1165,9 +1204,9 @@ export default {
     img {
       max-width: 100%;
     }
-    p{
-      font-size:16px;
-      padding-top:10px
+    p {
+      font-size: 16px;
+      padding-top: 10px;
     }
   }
   .no-data-text {
@@ -1185,7 +1224,7 @@ export default {
     .data-checkbox-area {
       position: relative;
       margin: 24px 32px 12px;
-      height:62px;
+      height: 62px;
       .reset-btn {
         position: absolute;
         right: 0px;
@@ -1239,10 +1278,10 @@ export default {
       height: calc(60% - 90px);
       margin: 2px 32px 0;
       position: relative;
-      .custom-label{
-        max-width:calc(100% - 25px);
-        padding:0;
-        vertical-align:middle;
+      .custom-label {
+        max-width: calc(100% - 25px);
+        padding: 0;
+        vertical-align: middle;
       }
       .el-icon-warning {
         font-size: 16px;
diff --git a/mindinsight/ui/src/views/train-manage/model-traceback.vue b/mindinsight/ui/src/views/train-manage/model-traceback.vue
index c5dd7b2da12780293359a23206d09f9255c425e7..12bdd5efb068e6e2ae093ec840269e8e1fd2f77d 100644
--- a/mindinsight/ui/src/views/train-manage/model-traceback.vue
+++ b/mindinsight/ui/src/views/train-manage/model-traceback.vue
@@ -16,18 +16,17 @@ limitations under the License.
 <template>
   <div id="cl-model-traceback">
     <div class="cl-model-right">
-      <div class="checkbox-area">
-        <el-button class="reset-btn custom-btn"
-                   @click="resetChart"
-                   type="primary"
-                   size="mini"
-                   plain
-                   v-if="(!noData && echart.allData.length) ||
-                   (noData && summaryDirList && !summaryDirList.length)">
-          {{ $t('modelTraceback.showAllData') }}</el-button>
+      <div class="top-area">
         <div class="checkbox"
+             :style="{'max-height': haveCustomizedParams ? '88px' : '66px',
+        'min-height': haveCustomizedParams ? '63px' : '42px'}"
              v-if="!noData && echart.allData.length &&
-                   (!summaryDirList ||(summaryDirList && summaryDirList.length))">
+                   (!summaryDirList || (summaryDirList && summaryDirList.length))">
+          <div class="label-legend"
+               v-if="haveCustomizedParams">
+            <div>[U]: {{$t('modelTraceback.userDefined')}}</div>
+            <div>[M]: {{$t('modelTraceback.metric')}}</div>
+          </div>
           <el-checkbox v-for="item in table.mandatoryColumn"
                        :key="item"
                        :label="item"
@@ -45,11 +44,21 @@ limitations under the License.
             <el-checkbox v-for="item in table.optionalColumn"
                          :key="item"
                          :label="item"
-                         :class="
-                table.optionsNotInCheckbox.includes(item) ? 'notShow' : 'option'
-              ">{{ table.columnOptions[item].label }}</el-checkbox>
+                         :class="table.optionsNotInCheckbox.includes(item) ? 'notShow' : 'option'">
+              {{ table.columnOptions[item].label }}</el-checkbox>
           </el-checkbox-group>
         </div>
+        <div class="btns">
+          <el-button class="custom-btn"
+                     @click="resetChart"
+                     type="primary"
+                     size="mini"
+                     plain
+                     v-if="(!noData && echart.allData.length) ||
+                   (noData && summaryDirList && !summaryDirList.length)">
+            {{ $t('modelTraceback.showAllData') }}</el-button>
+        </div>
+
       </div>
       <div id="echart"
            v-show="!noData"></div>
@@ -71,6 +80,7 @@ limitations under the License.
                            :key="key"
                            :prop="key"
                            :label="table.columnOptions[key].label"
+                           :fixed="table.columnOptions[key].label===text?true:false"
                            show-overflow-tooltip
                            min-width="180"
                            sortable="custom">
@@ -123,6 +133,7 @@ export default {
     return {
       table: {},
       summaryDirList: undefined,
+      text: this.$t('modelTraceback.summaryPath'),
       checkedSummary: [],
       keysOfStringValue: [
         'summary_dir',
@@ -160,6 +171,11 @@ export default {
       },
       showTable: false,
       noData: false,
+      haveCustomizedParams: false,
+      replaceStr: {
+        metric: 'metric/',
+        userDefined: 'user_defined/',
+      },
     };
   },
   computed: {},
@@ -311,51 +327,32 @@ export default {
           .then(
               (res) => {
                 if (res && res.data && res.data.object) {
-                  const tempList = JSON.parse(JSON.stringify(res.data.object));
-                  const list = [];
-                  tempList.forEach((item) => {
-                    if (item.model_lineage) {
-                      item.model_lineage.summary_dir = item.summary_dir;
-                      const i = JSON.parse(JSON.stringify(item.model_lineage));
-                      i.model_size = parseFloat(
-                          ((i.model_size || 0) / 1024 / 1024).toFixed(2),
-                      );
-                      const keys = Object.keys(i.metric || {});
-                      if (keys.length) {
-                        keys.forEach((key) => {
-                          if (i.metric[key] || i.metric[key] === 0) {
-                            const temp = 'metric/' + key;
-                            i[temp] = i.metric[key];
-                          }
-                        });
-                        delete i.metric;
-                      }
-                      const udkeys = Object.keys(i.user_defined || {});
-                      if (udkeys.length) {
-                        udkeys.forEach((key) => {
-                          if (i.user_defined[key] || i.user_defined[key] === 0) {
-                            const temp = 'user_defined/' + key;
-                            i[temp] = i.user_defined[key];
-                          }
-                        });
-                        delete i.user_defined;
-                      }
-                      list.push(i);
-                    }
-                  });
+                  const list = this.setDataOfModel(res.data.object);
                   if (allData) {
                     let customized = {};
                     if (res.data.customized) {
                       customized = JSON.parse(JSON.stringify(res.data.customized));
                       const customizedKeys = Object.keys(customized);
-                      if (customizedKeys.length > 0) {
+                      if (customizedKeys.length) {
                         customizedKeys.forEach((i) => {
                           if (customized[i].type === 'int') {
                             this.keysOfIntValue.push(i);
                           } else if (customized[i].type === 'str') {
                             this.keysOfStringValue.push(i);
                           }
+                          if (i.startsWith(this.replaceStr.userDefined)) {
+                            customized[i].label = customized[i].label.replace(
+                                this.replaceStr.userDefined,
+                                '[U]',
+                            );
+                          } else if (i.startsWith(this.replaceStr.metric)) {
+                            customized[i].label = customized[i].label.replace(
+                                this.replaceStr.metric,
+                                '[M]',
+                            );
+                          }
                         });
+                        this.haveCustomizedParams = true;
                       }
                     }
                     this.table.columnOptions = Object.assign(
@@ -377,6 +374,7 @@ export default {
                     this.noData = !res.data.object.length;
                     this.echart.showData = this.echart.brushData = this.echart.allData = list;
                     Object.keys(this.table.columnOptions).forEach((i) => {
+                      this.table.columnOptions[i].selected = true;
                       const flag = list.some((val) => {
                         return val[i] || val[i] === 0;
                       });
@@ -415,19 +413,71 @@ export default {
           )
           .catch(() => {});
     },
+
+    /**
+     * Selected data in the table
+     * @param {Array} data
+     * @return {Array}
+     */
+    setDataOfModel(data = []) {
+      const modelLineageList = [];
+      data.forEach((item) => {
+        if (item.model_lineage) {
+          item.model_lineage.summary_dir = item.summary_dir;
+          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;
+                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;
+          }
+          modelLineageList.push(modelData);
+        }
+      });
+      return modelLineageList;
+    },
+
     /**
      * The column options in the table are changed.
      */
     columnSelectionChange() {
+      this.table.optionalColumn.forEach((key) => {
+        this.table.columnOptions[key].selected = false;
+      });
+      this.table.selectedColumn.forEach((key) => {
+        this.table.columnOptions[key].selected = true;
+      });
+
       const columnCount =
         Object.keys(this.table.columnOptions).length -
         this.table.optionsNotInCheckbox.length;
 
-      this.table.column = this.table.mandatoryColumn
-          .concat(this.table.selectedColumn)
-          .filter((i) => {
-            return !this.table.optionsNotInTable.includes(i);
-          });
+      this.table.column = Object.keys(this.table.columnOptions).filter((i) => {
+        return (
+          this.table.columnOptions[i].selected &&
+          !this.table.optionsNotInTable.includes(i)
+        );
+      });
 
       this.table.selectAll =
         this.table.selectedColumn
@@ -481,39 +531,7 @@ export default {
           .then(
               (res) => {
                 if (res && res.data && res.data.object) {
-                  const tempList = JSON.parse(JSON.stringify(res.data.object));
-                  const list = [];
-
-                  tempList.forEach((item) => {
-                    if (item.model_lineage) {
-                      item.model_lineage.summary_dir = item.summary_dir;
-                      const i = JSON.parse(JSON.stringify(item.model_lineage));
-                      i.model_size = parseFloat(
-                          ((i.model_size || 0) / 1024 / 1024).toFixed(2),
-                      );
-                      const keys = Object.keys(i.metric || {});
-                      if (keys.length) {
-                        keys.forEach((key) => {
-                          if (i.metric[key] || i.metric[key] === 0) {
-                            const temp = 'metric/' + key;
-                            i[temp] = i.metric[key];
-                          }
-                        });
-                        delete i.metric;
-                      }
-                      const udkeys = Object.keys(i.user_defined || {});
-                      if (udkeys.length) {
-                        udkeys.forEach((key) => {
-                          if (i.user_defined[key] || i.user_defined[key] === 0) {
-                            const temp = 'user_defined/' + key;
-                            i[temp] = i.user_defined[key];
-                          }
-                        });
-                        delete i.user_defined;
-                      }
-                      list.push(i);
-                    }
-                  });
+                  const list = this.setDataOfModel(res.data.object);
                   this.table.data = list;
                   this.pagination.total = res.data.count || 0;
                   this.pagination.currentPage = 0;
@@ -527,11 +545,12 @@ export default {
      * Initializing the Eechart
      */
     initChart() {
-      const chartAxis = this.table.mandatoryColumn
-          .concat(this.table.selectedColumn)
-          .filter((i) => {
-            return !this.table.optionsNotInEchart.includes(i);
-          });
+      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) => {
         const item = {
@@ -566,6 +585,33 @@ export default {
             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;
+                }
+              },
+            };
           }
         }
         if (this.keysOfIntValue.includes(key)) {
@@ -583,7 +629,7 @@ export default {
         parallel: {
           top: 25,
           left: 50,
-          right: 80,
+          right: 100,
           bottom: 10,
           parallelAxisDefault: {
             type: 'value',
@@ -695,45 +741,14 @@ export default {
           RequestService.queryLineagesData(filterParams)
               .then(
                   (res) => {
-                    if (res && res.data && res.data.object) {
-                      const tempList = JSON.parse(JSON.stringify(res.data.object));
-                      const list = [];
-                      const summaryDirList = [];
-                      tempList.forEach((item) => {
-                        if (item.model_lineage) {
-                          item.model_lineage.summary_dir = item.summary_dir;
-                          const i = JSON.parse(JSON.stringify(item.model_lineage));
-                          i.model_size = parseFloat(
-                              ((i.model_size || 0) / 1024 / 1024).toFixed(2),
-                          );
-                          const keys = Object.keys(i.metric || {});
-                          if (keys.length) {
-                            keys.forEach((key) => {
-                              if (i.metric[key] || i.metric[key] === 0) {
-                                const temp = 'metric/' + key;
-                                i[temp] = i.metric[key];
-                              }
-                            });
-                            delete i.metric;
-                          }
-                          summaryDirList.push(i.summary_dir);
-
-                          const udkeys = Object.keys(i.user_defined || {});
-                          if (udkeys.length) {
-                            udkeys.forEach((key) => {
-                              if (
-                                i.user_defined[key] ||
-                            i.user_defined[key] === 0
-                              ) {
-                                const temp = 'user_defined/' + key;
-                                i[temp] = i.user_defined[key];
-                              }
-                            });
-                            delete i.user_defined;
-                          }
-                          list.push(i);
-                        }
-                      });
+                    if (
+                      res &&
+                  res.data &&
+                  res.data.object &&
+                  res.data.object.length
+                    ) {
+                      const list = this.setDataOfModel(res.data.object);
+                      const summaryDirList = list.map((i) => i.summary_dir);
                       this.$store.commit('setSummaryDirList', summaryDirList);
 
                       this.echart.showData = this.echart.brushData = list;
@@ -749,8 +764,8 @@ export default {
                     } else {
                       this.summaryDirList = [];
                       this.$store.commit('setSummaryDirList', []);
+                      this.checkedSummary = [];
                       this.noData = true;
-                      this.checkedSummary = summaryDirList;
                     }
                   },
                   (error) => {},
@@ -783,6 +798,9 @@ export default {
      * @param {Boolean} value Select All
      */
     checkboxSelectAll(value) {
+      this.table.optionalColumn.forEach((key) => {
+        this.table.columnOptions[key].selected = value;
+      });
       this.table.selectedColumn = value ? this.table.optionalColumn : [];
       this.table.column = this.table.mandatoryColumn
           .concat(value ? this.table.optionalColumn : [])
@@ -826,22 +844,20 @@ export default {
       if (isNaN(value) || !value) {
         return value;
       } else {
-        if (key === 'accuracy') {
-          return this.toFixedFun(value * 100, 2) + '%';
-        } else if (key === 'learning_rate') {
-          let temp = value.toPrecision(3);
+        if (key === 'learning_rate') {
+          let temp = value.toPrecision(4);
           let row = 0;
           while (temp < 1) {
             temp = temp * 10;
             row += 1;
           }
-          temp = this.toFixedFun(temp, 2);
+          temp = this.toFixedFun(temp, 4);
           return `${temp}${row ? `e-${row}` : ''}`;
         } else if (key === 'model_size') {
           return value + 'MB';
         } else {
           if (value < 1000) {
-            return Math.round(value * Math.pow(10, 2)) / Math.pow(10, 2);
+            return Math.round(value * Math.pow(10, 4)) / Math.pow(10, 4);
           } else {
             const reg = /(?=(\B)(\d{3})+$)/g;
             return (value + '').replace(reg, ',');
@@ -885,28 +901,24 @@ export default {
     -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);
     overflow: hidden;
-    .custom-btn {
-      border: 1px solid #00a5a7;
-      border-radius: 2px;
-      background-color: white;
-      color: #00a5a7;
-    }
-    .custom-btn:hover {
-      color: #00a5a7;
-      background: #e9f7f7;
-    }
 
-    .checkbox-area {
+    .top-area {
       margin: 24px 32px 16px;
-      position: relative;
-      min-height: 42px;
-      max-height: 66px;
+      display: flex;
+      justify-content: flex-end;
       .checkbox {
-        width: calc(100% - 264px);
-        max-height: 66px;
         overflow: auto;
-        .mgr30 {
-          margin-right: 30px;
+        flex-grow: 1;
+        .label-legend {
+          height: 19px;
+          margin-bottom: 4px;
+          div {
+            display: inline-block;
+            font-size: 12px;
+          }
+          div + div {
+            margin-left: 30px;
+          }
         }
         .notShow {
           display: none;
@@ -921,11 +933,18 @@ export default {
           margin-right: 30px;
         }
       }
-
-      .reset-btn {
-        position: absolute;
-        right: 0;
-        bottom: 0;
+      .btns {
+        margin-left: 20px;
+        .custom-btn {
+          border: 1px solid #00a5a7;
+          border-radius: 2px;
+          background-color: white;
+          color: #00a5a7;
+        }
+        .custom-btn:hover {
+          color: #00a5a7;
+          background: #e9f7f7;
+        }
       }
     }
     #echart {