UI fix bug of model trace back page

mindinsight/ui/src/components/scatter.vue

@@ -78,6 +78,7 @@ export default {
           axisPointer: {
             type: 'cross',
           },
+          confine: true,
           formatter: (params) => {
             const dataIndex = params.dataIndex;
             const item = this.tooltipsData[dataIndex];
@@ -94,11 +95,10 @@ export default {
                       Math.pow(10, 4);
                   }
                 }
-                res +=
-                  '<p>' + obj[i] + ':' + '&nbsp;&nbsp;' + item[obj[i]] + '</p>';
+                res += `<p>${obj[i]}:&nbsp;&nbsp;${item[obj[i]]}</p>`;
               }
             }
-            return res;
+            return `<div class="tooltip-msg">${res}</div>`;
           },
         },
         xAxis: {
@@ -205,4 +205,9 @@ export default {
 .scatter {
   height: 100%;
 }
+.tooltip-msg {
+  white-space: normal;
+  word-break: break-all;
+  max-width: 250px;
+}
 </style>

mindinsight/ui/src/mixins/modelData.vue

@@ -168,6 +168,7 @@ export default {
           axisPointer: {
             type: 'shadow',
           },
+          confine: true,
           formatter: this.barToolTipFormatter,
         },
         label: {

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

@@ -2042,6 +2042,7 @@ export default {
       border-bottom: 1px solid #b9bcc1;
       border-top: 1px solid #b9bcc1;
       padding: 10px 0;
+      overflow: hidden;
       .bar-select {
         display: flex;
         flex: 1.35;
@@ -2091,7 +2092,7 @@ export default {
       }
     }
     .left-scatters-container {
-      overflow: auto;
+      overflow: hidden;
       width: 100%;
       height: calc(100% - 32px);
     }
@@ -2204,6 +2205,7 @@ export default {
 }
 .tooltip-msg {
   white-space: normal;
-  max-width: 150px;
+  word-break: break-all;
+  max-width: 250px;
 }
 </style>