From 2e6a58a59eb358fc04eb1030f0cd2d0994e8b3dd Mon Sep 17 00:00:00 2001
From: weiyanxi <weiyanxi@huawei.com>
Date: Fri, 11 Dec 2020 11:43:28 +0800
Subject: [PATCH] UI saliency-map / filter selector add tooltip

---
 mindinsight/ui/src/locales/en-us.json             |  1 +
 mindinsight/ui/src/locales/zh-cn.json             |  1 +
 mindinsight/ui/src/views/explain/saliency-map.vue | 12 +++++++++++-
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/mindinsight/ui/src/locales/en-us.json b/mindinsight/ui/src/locales/en-us.json
index b7a00ba7..68e06f69 100644
--- a/mindinsight/ui/src/locales/en-us.json
+++ b/mindinsight/ui/src/locales/en-us.json
@@ -752,6 +752,7 @@
     "originalPicture": "Original Image",
     "forecastTag": "Prediction Tag",
     "tag": "Tag",
+    "tagTip": "Query the image data that contains any filter label",
     "confidence": "Probability",
     "forecastTagTip": "When the inference image has the correct tag, the following four flags are displayed in the tag row",
     "TP": "TP, indicates true positive. The tag is a positive sample, and the classification is a positive sample;",
diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json
index cb848df0..496408b0 100644
--- a/mindinsight/ui/src/locales/zh-cn.json
+++ b/mindinsight/ui/src/locales/zh-cn.json
@@ -755,6 +755,7 @@
     "originalPicture": "原始图片",
     "forecastTag": "预测标签",
     "tag": "标签",
+    "tagTip": "查询包含任一筛选标签的图片数据",
     "confidence": "概率",
     "forecastTagTip": "当推理图片带有正确标签时，标签行会显示下列四种旗标",
     "TP": "TP，代表Ture Positive，标签为正样本，分类为正样本；",
diff --git a/mindinsight/ui/src/views/explain/saliency-map.vue b/mindinsight/ui/src/views/explain/saliency-map.vue
index 1ba55feb..30493e7b 100644
--- a/mindinsight/ui/src/views/explain/saliency-map.vue
+++ b/mindinsight/ui/src/views/explain/saliency-map.vue
@@ -57,7 +57,17 @@ limitations under the License.
     <!-- Parameters Fetch -->
     <div class="cl-saliency-map-condition">
       <div class="condition-left">
-        <div class="condition-item line-title">{{ $t('explain.tag') }}</div>
+        <div class="condition-item line-title">
+          {{ $t('explain.tag') }}
+          <el-tooltip placement="bottom-start"
+                      effect="light">
+            <div slot="content"
+                 class="tooltip-container">
+                {{$t('explain.tagTip')}}
+            </div>
+            <i class="el-icon-info"></i>
+          </el-tooltip>
+        </div>
         <!-- Truth Labels -->
         <div class="condition-item search-select">
           <search-select multiple