From 4f839164f5e008c5fc193e6cb126091a9198eed9 Mon Sep 17 00:00:00 2001
From: xiayifan <xiayifan1@huawei.com>
Date: Fri, 20 Nov 2020 10:59:32 +0800
Subject: [PATCH] UI deepening color of slider to image in image page and the
 message displayed when thhe tensor data is too large is optimized

---
 mindinsight/ui/src/locales/en-us.json         |  6 ++--
 mindinsight/ui/src/locales/zh-cn.json         |  7 +++--
 .../ui/src/views/train-manage/image.vue       | 30 +++++++++++++++++++
 3 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/mindinsight/ui/src/locales/en-us.json b/mindinsight/ui/src/locales/en-us.json
index c545e687..b7f67cbf 100644
--- a/mindinsight/ui/src/locales/en-us.json
+++ b/mindinsight/ui/src/locales/en-us.json
@@ -218,7 +218,7 @@
     "viewTypeTitle": "View",
     "chartViewType": "Table",
     "histogramViewType": "Histogram",
-    "tensorDashboardLimitErrorMsg": "The requested data is too large. Go to the tensor page and try another dimension."
+    "tensorDashboardLimitErrorMsg": "The requested data exceeds the upper limit 100,000. Go to the tensor page and try slicing or querying another dimensions."
   },
   "graph": {
     "titleText": "Computational Graph",
@@ -503,7 +503,7 @@
     "dType": "DType",
     "shape": "Shape",
     "value": "Value",
-    "largeDataTip": "The requested data is too large. Try another dimension.",
+    "largeDataTip": "The requested data exceeds the upper limit 100,000. Try slicing or querying another dimensions.",
     "continueTo": "Continue to",
     "inf": "INF:",
     "negativeInf": "-INF:",
@@ -597,7 +597,7 @@
     "50542217": "Incorrect summary log path.",
     "50542218": "Incorrect filtering parameter.",
     "50545012": "The tensor data does not exist. Please refresh.",
-    "50545013": "The requested data is too large. Try another dimension.",
+    "50545013": "The requested data exceeds the upper limit 100,000. Try slicing or querying another dimensions.",
     "50545014": "The queried tensor data has been replaced by new data. Please refresh.",
     "50546083": "The profiler directory does not exist.",
     "50548001": "Ascend AI Processor information query timed out.",
diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json
index 7746331e..54c26833 100644
--- a/mindinsight/ui/src/locales/zh-cn.json
+++ b/mindinsight/ui/src/locales/zh-cn.json
@@ -216,7 +216,7 @@
     "viewTypeTitle": "视图",
     "chartViewType": "表格",
     "histogramViewType": "直方图",
-    "tensorDashboardLimitErrorMsg": "请求的数据过大，请进入张量页使用其他维度重试。"
+    "tensorDashboardLimitErrorMsg": "请求的数据超过上限10万，请点击进入张量页，尝试切片或查询其他维度。"
   },
   "graph": {
     "titleText": "计算图",
@@ -504,7 +504,7 @@
     "dType": "类型",
     "shape": "形状",
     "value": "数值",
-    "largeDataTip": "请求的数据过大，请使用其他维度重试。",
+    "largeDataTip": "请求的数据超过上限10万，请尝试切片或查询其他维度。",
     "continueTo": "运行到该节点",
     "inf": "INF：",
     "negativeInf": "-INF：",
@@ -581,6 +581,7 @@
     "viewScore": "查看评分",
     "fetch": "筛选",
     "minConfidence": "概率阈值",
+    "confidenceRange": "概率(区间)",
     "imgSort": "图片排序",
     "default": "默认",
     "byProbability": "概率值降序",
@@ -652,7 +653,7 @@
     "50542217": "Summary日志路径错误",
     "50542218": "筛选参数错误",
     "50545012": "张量数据不存在，请刷新。",
-    "50545013": "请求的数据过大，请使用其他维度重试。",
+    "50545013": "请求的数据超过上限10万，请尝试切片或查询其他维度。",
     "50545014": "查询的张量数据已被新数据替换，请刷新。",
     "50546083": "性能数据目录不存在",
     "50548001": "昇腾AI处理器信息查询超时",
diff --git a/mindinsight/ui/src/views/train-manage/image.vue b/mindinsight/ui/src/views/train-manage/image.vue
index e52ff99e..5caba223 100644
--- a/mindinsight/ui/src/views/train-manage/image.vue
+++ b/mindinsight/ui/src/views/train-manage/image.vue
@@ -798,6 +798,36 @@ export default {
             margin-top: 10px;
           }
         }
+        ::-webkit-scrollbar-button {
+          z-index: 200;
+          width: 10px;
+          height: 10px;
+          background: #fff;
+          cursor: pointer;
+        }
+        ::-webkit-scrollbar-button:horizontal:single-button:start {
+          background-image: url('../../assets/images/scroll-btn-left.png');
+          background-position: center;
+        }
+        ::-webkit-scrollbar-button:horizontal:single-button:end {
+          background-image: url('../../assets/images/scroll-btn-right.png');
+          background-position: center;
+        }
+        ::-webkit-scrollbar-button:vertical:single-button:start {
+          background-image: url('../../assets/images/scroll-btn-up.png');
+          background-position: center;
+        }
+        ::-webkit-scrollbar-button:vertical:single-button:end {
+          background-image: url('../../assets/images/scroll-btn-down.png');
+          background-position: center;
+        }
+        ::-webkit-scrollbar-thumb {
+          background-color: #bac5cc;
+        }
+        ::-webkit-scrollbar {
+          width: 10px;
+          height: 10px;
+        }
       }
     }