From 9dd3e3bd2d52b4fef37c68de06d6c222d73c1937 Mon Sep 17 00:00:00 2001
From: xiayifan <xiayifan1@huawei.com>
Date: Fri, 27 Nov 2020 14:51:23 +0800
Subject: [PATCH] UI add tip of irrelevant measurrement method

---
 .../ui/src/components/select-group.vue        | 56 +++++++++++++++----
 mindinsight/ui/src/locales/en-us.json         |  4 +-
 mindinsight/ui/src/locales/zh-cn.json         |  4 +-
 .../ui/src/views/explain/xai-metric.vue       | 30 +++++++++-
 4 files changed, 80 insertions(+), 14 deletions(-)

diff --git a/mindinsight/ui/src/components/select-group.vue b/mindinsight/ui/src/components/select-group.vue
index 45f6c548..d534bd26 100644
--- a/mindinsight/ui/src/components/select-group.vue
+++ b/mindinsight/ui/src/components/select-group.vue
@@ -18,24 +18,41 @@ limitations under the License.
     <!-- Title -->
     <div class="checkboxes-title left"
          v-if="typeof title !== 'undefined'">
-      {{title}}
+      {{ title }}
     </div>
     <!-- Group -->
     <div class="right">
       <el-tooltip v-for="checkbox in checkboxes"
                   :key="checkbox.label"
                   effect="dark"
-                  :content="checkbox.label"
+                  :content="
+          checkbox.label + (typeof checkbox.title === 'string' && checkbox.title !== ''
+            ? ($t('symbols.comma') + checkbox.title)
+            : '')
+        "
                   placement="top">
-        <div class="checkboxes-item item"
-             @click="checkedChange(checkbox)">
-          <div class="checkbox"
-               :class="{'is-checked': checkbox.checked, 'is-unchecked': !checkbox.checked}">
+        <template v-if="typeof checkbox.disabled === 'boolean' && checkbox.disabled">
+          <div class="checkboxes-item item item-disabled">
+            <div class="checkbox is-disabled"></div>
+            <div class="label label-disabled">
+              {{ checkbox.label }}
+            </div>
           </div>
-          <div class="label">
-            {{checkbox.label}}
+        </template>
+        <template v-else>
+          <div class="checkboxes-item item"
+               @click="checkedChange(checkbox)">
+            <div class="checkbox"
+                 :class="{
+                'is-checked': checkbox.checked,
+                'is-unchecked': !checkbox.checked,
+              }"></div>
+            <div class="label"
+                 :title="typeof checkbox.title === 'string' ? checkbox.title : ''">
+              {{ checkbox.label }}
+            </div>
           </div>
-        </div>
+        </template>
       </el-tooltip>
       <!-- Slot -->
       <div class="checkboxes-last item">
@@ -48,8 +65,15 @@ limitations under the License.
 <script>
 export default {
   props: {
-    // Array<Checkbox>
-    // Class Checkbox {checked: boolean, label: string}
+    /** The structure of checkboxes should be Array<Checkbox>
+    *   The structure of Checkbox should as follow
+    *   Class Checkbox {
+    *     checked: boolean,
+    *     label: string,
+    *     title?: string,
+    *     disabled?: Boolean,
+    *   }
+    */
     checkboxes: Array,
     title: String, // The title of group
   },
@@ -135,12 +159,19 @@ export default {
         font-size: 14px;
         color: #333333;
       }
+      .label-disabled {
+        color: #c0c4cc;
+      }
       .is-checked {
         background-image: url('../assets/images/mult-select.png');
       }
       .is-unchecked {
         background-image: url('../assets/images/mult-unselect.png');
       }
+      .is-disabled {
+        border: 1px solid #dbdbdb;
+        background-color: #e7e7e7;
+      }
     }
   }
   .item {
@@ -148,6 +179,9 @@ export default {
     margin-right: 20px;
     height: 32px;
   }
+  .item-disabled {
+    cursor: not-allowed !important;
+  }
   .checkboxes-last {
     display: flex;
     align-items: center;
diff --git a/mindinsight/ui/src/locales/en-us.json b/mindinsight/ui/src/locales/en-us.json
index 708ab63b..a08cd989 100644
--- a/mindinsight/ui/src/locales/en-us.json
+++ b/mindinsight/ui/src/locales/en-us.json
@@ -30,7 +30,8 @@
     "point": "·",
     "slashes": "/",
     "colon": ":",
-    "fullStop": "."
+    "fullStop": ".",
+    "comma": ","
   },
   "header": {
     "refreshData": "Refresh Data",
@@ -767,6 +768,7 @@
     "multiMethod": "Single indicator and multiple methods",
     "interpretation": "Explanation",
     "measurement": "Measurement",
+    "disableMetricTip": "The result of this measurement method is irrelevant to the tag, the classification assessment result cannot be viewed.",
     "seeInterpretation": "You are viewing scores of the explanation method ",
     "seeMeasurement": "You are viewing scores of the measurement method ",
     "showGrade": " of different tag types",
diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json
index 5029083d..a07b0b91 100644
--- a/mindinsight/ui/src/locales/zh-cn.json
+++ b/mindinsight/ui/src/locales/zh-cn.json
@@ -30,7 +30,8 @@
     "point": "·",
     "slashes": "/",
     "colon": "：",
-    "fullStop": "。"
+    "fullStop": "。",
+    "comma": "，"
   },
   "header": {
     "refreshData": "刷新数据",
@@ -762,6 +763,7 @@
     "multiMethod": "单指标多方法",
     "interpretation": "解释方法",
     "measurement": "度量方法",
+    "disableMetricTip": "该度量方法的结果与标签无关，不支持查看分类评估结果",
     "seeInterpretation": "您正在查看解释方法 ",
     "seeMeasurement": "您正在查看度量方法 ",
     "showGrade": " 在不同标签类型上的分数",
diff --git a/mindinsight/ui/src/views/explain/xai-metric.vue b/mindinsight/ui/src/views/explain/xai-metric.vue
index ffd849b5..ea9602ab 100644
--- a/mindinsight/ui/src/views/explain/xai-metric.vue
+++ b/mindinsight/ui/src/views/explain/xai-metric.vue
@@ -194,7 +194,9 @@ limitations under the License.
                   <el-option v-for="(item, index) in classifyAllMetrics"
                              :key="index"
                              :value="item.label"
-                             :label="item.label"></el-option>
+                             :label="item.label"
+                             :disabled="item.disabled"
+                             :title="item.title"></el-option>
                 </el-select>
               </span>
             </div>
@@ -581,6 +583,7 @@ export default {
       const metricsDic = {};
       const labelDic = {};
       const allLabels = [];
+      const compareMetric = {};
       // Simplify data to dictionary
       oriData.explainer_scores.forEach((explainerScore) => {
         const curMethod = explainerScore.explainer;
@@ -588,6 +591,8 @@ export default {
           classifyAllMethods.push({
             label: curMethod,
             checked: true,
+            disabled: false,
+            title: '',
           });
           fullDataDict[curMethod] = {};
           explainerScore.class_scores.forEach((classScore) => {
@@ -606,13 +611,31 @@ export default {
                   classifyAllMetrics.push({
                     label: evaluation.metric,
                     checked: true,
+                    disabled: false,
+                    title: '',
                   });
                 }
               });
             }
           });
+          explainerScore.evaluations.forEach((evaluation) => {
+            compareMetric[evaluation.metric] = true;
+          });
+        }
+      });
+
+      const compareArr = Object.keys(compareMetric);
+      compareArr.forEach((metricName) => {
+        if (!metricsDic[metricName]) {
+          classifyAllMetrics.push({
+            label: metricName,
+            checked: false,
+            disabled: true,
+            title: this.$t('metric.disableMetricTip'),
+          });
         }
       });
+
       this.fullDict = fullDataDict;
       this.classifyAllMethods = classifyAllMethods;
       this.classifyAllMetrics = classifyAllMetrics;
@@ -864,6 +887,11 @@ export default {
       flex-shrink: 0;
       border: 1px solid #e6ebf5;
       margin-left: 20px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
     }
   }