From d77f689bf6b769e524289045720e8fe17a6bcb6e Mon Sep 17 00:00:00 2001
From: WeiFeng-mindinsight <huangweifeng4@huawei.com>
Date: Sat, 31 Oct 2020 14:56:36 +0800
Subject: [PATCH] UI fix bug of model trace back page

---
 mindinsight/ui/src/components/scatter.vue             | 11 ++++++++---
 mindinsight/ui/src/mixins/modelData.vue               |  1 +
 .../ui/src/views/train-manage/model-traceback.vue     |  6 ++++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/mindinsight/ui/src/components/scatter.vue b/mindinsight/ui/src/components/scatter.vue
index a169452a..fa67ce32 100644
--- a/mindinsight/ui/src/components/scatter.vue
+++ b/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>
diff --git a/mindinsight/ui/src/mixins/modelData.vue b/mindinsight/ui/src/mixins/modelData.vue
index d8b72725..a8c59448 100644
--- a/mindinsight/ui/src/mixins/modelData.vue
+++ b/mindinsight/ui/src/mixins/modelData.vue
@@ -168,6 +168,7 @@ export default {
           axisPointer: {
             type: 'shadow',
           },
+          confine: true,
           formatter: this.barToolTipFormatter,
         },
         label: {
diff --git a/mindinsight/ui/src/views/train-manage/model-traceback.vue b/mindinsight/ui/src/views/train-manage/model-traceback.vue
index 6489ee89..60c235af 100644
--- a/mindinsight/ui/src/views/train-manage/model-traceback.vue
+++ b/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>